Archive | December 2014

En Mejorando.la decidimos dar 7 días más de Navidad

Desde el nacimiento de Cristalab ha sido mi trabajo y objetivo crear un ecosistema hispano que compita con Silicon Valley. Ayudar y conectar a las personas que crean el futuro de Internet, con profesionales que viven y aman la tecnología.

Es por esto es que Mejorando.la ofrece un paquete anual en cada inicio de año, en Navidad, con el que te damos todos nuestros cursos por un año, además de un Taller para crear Startups desde Silicon Valley, sólo como parte de ese plan.

Muchos nos hablaron de cómo el 24 y 25 de diciembre fue una prioridad sus familias. Por eso decidimos extender la promoción 7 días más, hasta el 6 de enero del 2015.

¿Qué vendrá de Mejorando.la y Platzi en el 2015?

Hace un año apenas salía iOS 7 y Android KitKat (ahora Android L). Este año descubrimos Swift en vez de Objective-C y la explosión de relojes inteligentes que quizás, o no, tengan éxito en Software. En Mejorando.la lanzamos cursos y material gratuito de todas estas herramientas y estamos listos para las innovaciones que traiga el 2015.

Planificar por un año resultó más útil que comprar cursos por separado para muchos, y vaya que nos lo dijeron. Hemos respondido miles de correos, tuits y mensajes de sugerencias, cursos, peticiones y Navidad.

Vienen cursos nuevos de bases de datos, desarrollo de videojuegos, eCommerce, WordPress, creación de Startups y negocios online. También renovaremos todos nuestros cursos de diseño web, marketing online, Python, Node.js, Ruby on Rails, PHP profesional, Responsive Design, Frontend y Diseño de Interfaces.

Crearemos más eventos y streamings tanto abiertos como exclusivos para nuestros estudiantes. Tendremos profesores y tutores en vivo cada semana, en streaming. Además de muchas clases en vivo, en video y más alianzas.

Este año trabajamos de cerca con Microsoft, Rackspace y Google. Además de tener profesores cercanos a Linux, Amazon, Node.js y otros grandes proyectos. Nuestros profesores siempre serán expertos de la industria que viven esto día a día.

Invertir en tu formación y tener un mejor empleo, una gran startup o crecer en tu carrera siempre será el mejor propósito que puedas hacer para el 2015. No decepcionamos en el 2014, no lo haremos el otro año. Únete a Mejorando.la Navidad.

Enviar comentario

via Cristalab http://feeds.cristalab.com/~r/clab/~3/8iyUs2VtzO0/

Automatización de tareas de frontend usando Gulp.js

Como desarrollador Frontend, hay ciertas tareas que se terminan volviendo repetitivas durante el desarrollo, como compilar el CSS desde un pre-procesador, concatenar archivos o minificarlos. Es hasta el ambiente de producción en donde realizamos estas dos ultimas tareas.

Gracias a herramientas como Gulp.js y Grunt.js ahora es posible automatizar todas estas tareas repetitivas e inicializarlas con un único comando en la terminal. En este tutorial les voy a explicar como usar una de estas herramientas, Gulp.js.

Descargar e instalar Gulp.js

Lo primero que necesitamos hacer para empezar a usar Gulp.js es descargarlo e instalarlo, para esto necesitamos tener Node.js instalado, si no lo tienen pueden ir al sitio, descargarlo e instalarlo. Una vez tengan Node.js simplemente abren la consola y escriben el comando para instalar Gulp.js de forma global.

Código :

sudo npm i -g gulp

Luego de que lo tengan instalado de forma global necesitan instalarlo en cada proyecto donde lo vayan a usar, para eso simplemente van desd la consola a la carpeta del proyecto usando el comando:

Código :

npm i -D gulp

El -D es para que lo agregue como dependencia de desarrollo en el archivo package.json del proyecto. Es lo mismo que –save-dev.

Instalar plugins

Lo siguiente es buscar los plugins necesarios para nuestro proyecto, para eso pueden ir al sitio de Gulp.js y en la sección de plugins tienen la lista completa con un buscador.

O pueden ir directamente a NPM y buscar ahí el plugin agregando la palabra gulp a su búsqueda.

Para este ejemplo vamos a compilar del pre-procesador LESS a CSS, además de minificar el CSS resultante y por último que si se cambian los archivos de LESS vuelva a compilar.

Para esto buscamos y descargamos los plugins gulp-less, gulp-minify-css y gulp-watch, podemos instalarlos en nuestro proyecto con el comando:

Código :

npm i -D gulp-less gulp-minify-css gulp-watch

Con esto ya están descargados en la carpeta node_modules del proyecto y agregados como dependencia de desarrollo a nuestro package.json.

Armar las tareas de Gulp.js

Ahora viene lo más importante, armar las tareas que queremos ejecutar, para esto necesitamos crear un archivo gulpfile.js en la raíz de nuestro proyecto (donde esté el package.json), en este archivo lo primero que vamos a hacer es cargar Gulp.js y nuestros plugins, para eso agregamos estas líneas:

Código :

var gulp = require(‘gulp’);
var less = require(‘gulp-less’);
var minifyCSS = require(‘gulp-minify-css’);
var watch = require(‘gulp-watch’);

Ya importados los módulos necesarios podemos escribir nuestras tareas. Las tareas en gulp se definen con el método task que posee gulp y que recibe el nombre de la tarea y una función a ejecutar.

Código :

gulp.task('css’, function () {
   // acá vamos a poner nuestra tarea
});

Dentro de nuestra tarea lo primero es indicar cuales son los archivos sobre los que vamos a trabajar, para esto usamos otro método de gulp llamado src que recibe o un string con la ruta relativa al archivo o un array con muchos archivos, estas rutas pueden hacer referencia a una carpeta entera usando * en lugar del nombre de un archivo. En nuestro caso solo apuntamos a nuestro archivo principal.

Código :

gulp.task('css’, function () {
   gulp.src(‘./less/main.less’)
});

Ahora necesitamos empezar a ejecutar nuestros plugins, para eso necesitamos decir a Gulp.js que luego de obtener el archivo main.less le pase el contenido a nuestros plugins, esto se hace con el método pipe que recibe como parámetro la ejecución de una función, en nuestro caso uno de nuestros plugins.

Código :

gulp.task('css’, function () {
   gulp.src(‘./less/main.less’)
   .pipe(less({
      paths: __dirname + ‘/less’,
      filename: 'main.less',
      ru: true
   })) // 1
   .pipe(minifyCSS()) // 2
});

En el punto 1 compilamos nuestro LESS a CSS, el objeto que le pasamos como parámetro le indica la ruta donde encontrar todos nuestros archivos de LESS, el nombre de nuestro archivo principal y por último que use rutas relativas para los @import que usemos en nuestros archivos, de esta forma podemos trabajar con múltiples archivos LESS y Gulp.js los va a compilar a un único CSS.
El punto 2 recibe el CSS compilado en el punto 1 y lo minifica, simple.

Por último para terminar nuestra tarea necesitamos indicarlo donde guardar el archivo final que generamos, esto es con otro método de Gulp.js llamado dest, este método recibe como único parámetro un string con la ruta donde vamos a guardar los archivos finales.

Código :

gulp.task('css’, function () {
   gulp.src(‘./less/main.less’)
   .pipe(less({
      paths: __dirname + ‘/less’,
      filename: 'main.less',
      ru: true
   }))
   .pipe(minifyCSS())
   .pipe(gulp.dest(‘./css’);
});

Se agrega dentro de una pipe para poder recibir el archivo que minificado que devuelve minifyCSS.

Ahora que tenemos nuestra tarea lista la podemos ejecutar desde la terminal con el comando:

Código :

gulp css

Cuando se termine de ejecutar la tarea (mientras más pipe agregues más tarda) vamos a tener un archivo main.css en la carpeta css ubicada en la raíz de nuestro proyecto.

Ahora nos falta poder vigilar todos los cambios de los archivos de la carpeta less y volver a ejecutar automaticamente la tarea css, para eso creamos otra tarea llamada watch y programamos la tarea de esta forma:

Código :

gulp.task(‘watch’, function () {
   gulp.watch([‘./less/**/*.less], [‘css’]);
});

Esta vez no hicimos la tarea como antes, esto es porque el plugin gulp-watch agrega un método watch a gulp en lugar de funcionar como una tarea normal que se usa con pipe, por eso simplemente le decimos que se fije en la carpeta less cualquier archivo .less (*.less) ubicado tanto en esta carpeta como en otras subcarpetas (**) y si alguno cambia ejecute la tarea css. Los parámetros pueden no estar en un array, pero si los pasas en un array podes ejecutar múltiples tareas o escuchar varias rutas.

Ahora para poder ejecutar esta tarea tenemos que usar el comando

Código :

gulp watch

Con esto ya estaría escuchando los cambios, sin embargo actualmente tendriamos que ejecutar dos comandos para hacer que todo funcione pefectamente, primero compilar una vez el CSS y luego escuchar los cambios.

Como esto es molesto también podemos automatizarlo, para eso creamos una nueva tarea y la llamos default, a esta tarea no le pasamos una función como hicimos antes, sino que le pasamos un array con cada una de las tareas que queremos que se ejecuten, en nuestro caso css y watch.

Código :

gulp.task(‘default’, [‘css’, ‘watch’]);

Ahora simplemente usamos el comando:

Código :

gulp

Y con esto estamos ejecutando una vez cada tarea (al no indicar el nombre de la tarea Gulp.js trata de ejecutar la tarea con el nombre default, si no existe da error), así que primero compila el CSS y luego se queda escuchando los cambios, ya luego es la tarea watch la que se encarga de volver a ejecutar la tarea css cada vez que sea necesarios.

Conclusión

Al principio puede resultar algo raro estar automatizando estas tareas, pero luego de acostumbrarse pasa a ser algo casi imprescindible en cada proyecto que realicemos, y con la gran cantidad de plugins que existen para Gulp.js se pueden automatizar una cantidad enorme de cosas ya sea compilar Stylus, CoffeeScript, concatenar archivos de JS, minificarlos, ejecutar pruebas unitarias e incluso es posible iniciar un servidor HTTP para probar el sitio.

Los invito a probar Gulp ó si no les convence intentar con Grunt.js, otro automatizador de tareas. Sin duda alguna vale mucho la pena incorporar estas herramientas en nuestro ambiente de trabajo para ayudarnos a poder dedicar más tiempo a escribir código y menos a realizar todas estas tareas repetitivas.

Enviar comentario

via Cristalab http://ift.tt/1B2Vcuc

Material Design en versiones Anteriores a Lollipop

Es cierto que Lollipop aun no llega a todos los dispositivos, pero desde su antes nombre L ha dado mucho de que hablar. Esta vez, Android, nos ofrece un nuevo lenguaje visual denominado: “Material Design”, que si bien es muy atractivo, no era compatible con las versiones anteriores del Robot de Google.

Poco a poco se han visto aplicaciones que se adaptan a este nuevo diseño, ignorando la versión con la que corren y esto es gracias a herramientas que aprenderemos con este pequeño proyecto. Trate de simplificarlo en pasos muy puntuales, ademas de dos diseños diferentes (uno en cada branch del repositorio), recuerda que cualquier duda me encuentras en twitter como @thespianartist.

Paso 1: Tener actualizado tu entorno de trabajo:

Vale la pena recordar que Android Studio es el IDE oficial para el desarrollo de aplicaciones móviles para Android (incluyendo Wear, Auto y Glass), por lo que si aun trabajas bajo eclipse (pronto sin soporte), ten prioridad en actualizar pronto a este IDE que, actualmente ya dejó de ser Beta y la experiencia de usuario al estar creando proyectos es única.

Así mismo, antes de iniciar cualquier proyecto, es importante ver el conjunto de librerías y SDKs con los que estaremos trabajando y que de igual manera deben estar actualizados. Recuerda que esto se logra gracias al SDK Manager.

Paso 2: Creando el proyecto y agregando las librerías necesarias:

Vamos a crear un nuevo proyecto, en este caso la versión mínima puede ser a partir de Ice Cream Sandwich 4.0 (API 14). Si te preguntas por Gingerbread, la mayoría del marcado ya omite dicha versión, ya que requiere una reducción importante de features y el beneficio de cubrir las mismas ya no es tanto:

Ademas vamos a usar 4 librerías, 2 del SDK oficial y 2 de terceros:

Código :

    //Librerias standar en el SDK de Android:
    //Necesario para usar Toolbar y configurar el Tema Material en V14+
    compile 'com.android.support:appcompat-v7:21.0.2'

    //Libreria para usar un RecyclerView
    compile 'com.android.support:recyclerview-v7:21.0.0'

    //Librerias de terceros :

    //Libreria para agregar un Floating Action Button
    compile 'com.getbase:floatingactionbutton:1.2.1'

    //Libreria para volver circular una Imagen
    compile 'de.hdodenhof:circleimageview:1.2.1'

Recordar que dichas librerías se agregan en el build.gradle que se encuentra a la altura de la carpeta app, tal como se muestra en la siguiente imagen:

¿Cómo buscar una librería?

Un sitio muy recomendable para consultar las librerías compatibles con Android Studio (y contenidas en el repositorio Maven), es Gradle Please. Cuenta con un buscador excelente, que puede ir desde búsquedas muy especificas como el SDK de facebook, hasta mostrarnos las versiones que tienen actualmente las librerías nativas del SDK, como por ejemplo RecyclerView.

Paso 3: AppCompat, crea un tema compatible con todas las versiones

Recordemos un poco como funciona un tema Material Design, la sugerencia siempre son 3 colores: Primary, Primary Dark and Accent.

Esos 3 colores se pueden elegir de acuerdo a las guías de diseño
de material design. Una vez seleccionados, debemos agregarlos en un archivo colors.xml en la carpeta values, tal como se muestra en la siguiente imagen imagen:

Código :

<?xml version="1.0" encoding="utf-8"?>
<resources>
    <color name="primary_color">#E91E63</color>
    <color name="primary_dark_color">#AD1457</color>
    <color name="accent_color">#69F0AE</color>
</resources>

Ahora modifiquemos styles.xml de la carpeta values, el cual tendrá como tema base AppCompat. AppCompat nos permite dentro de sus muchas propiedades:

1.-Esconder el ActionBar, ya que este será sustituido por un nuevo Widget llamado Toolbar, que es el encargado de dar ese aspecto Material.

2.-Agregar los colores previamente elegidos en colors.xml a toda la aplicación.

Código :

<resources>

    //Darle el aspecto material, necesitamos configirar
    <style name="AppTheme" parent="Theme.AppCompat.NoActionBar">

        <item name="colorPrimary">@color/primary_color</item>
        <item name="colorPrimaryDark">@color/primary_dark_color</item>
        <item name="colorAccent">@color/accent_color</item>

    </style>

</resources>

La ultima configuración que necesita AppCompat para funcionar es nuestra Actividad extienda de ActionBarActivity, no te preocupes, tiene todos los base que tendría un Activity normal :

Código :

public class MainActivity extends ActionBarActivity {

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main)

    }

Paso 4: Toolbar, un ActionBar Personalizado

Así como AppCompat nos permite personalizar un tema, toolbar nos permite crear nuestro propio ActionBar, inclusive, al punto de llevarlo a necesidades muy puntuales de personalización. Toolbar se maneja como un archivo toolbar.xml dentro de nuestra carpeta de layout.

Para que quede un poco mas claro las posibilidades del widget, el proyecto se basa en dos configuraciones diferentes:

El primero no es nada ajeno a lo que haz visto antes, se trata de un ActionBar de un tamaño estándar y que hereda el color primario que configuramos:

Código :


<android.support.v7.widget.Toolbar xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:id="@+id/activity_my_toolbar"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:minHeight="?attr/actionBarSize"
    android:background="@color/primary_color"
    app:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar"
    app:popupTheme="@style/ThemeOverlay.AppCompat.Dark.ActionBar"/>


De lo cual, es importante repasar lo siguiente:

android:id="@+id/activity_my_toolbar
Es importante asignarle un ID a nuestro widget,ya que va ser usado por nuestro Activity principal.

android:minHeight="?attr/actionBarSize"
Esto indica el tamaño del widget y si lo quieres ver así, de nuestro ActionBar. Para este ejemplo "heredamos" un párametro llamado actionBarSize que para fines prácticos, es una constante que nos entrega el tamaño por defecto de un ActionBar, ni mas, ni menos.

android:background="@color/primary_color"
Esto indica el color de fondo del ActionBar, para hacer referencia al declarado en colors.xml, lo hacemos mediante @color/primary_color.

app:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar"
Esto es importante, vamos a sobreescribir el ActionBar partiendo de un tema base, en este caso se trata de AppCompat.Dark.ActionBar. Esto hace que el fondo por defecto sea negro (Pero en este caso lo cambiamos a primary_color) y la letra de titulo sea color blanca. Si quisiéramos que el color de texto fuera negro, basta extender de AppCompat.Light o de cualquiera de los temas disponibles:

app:popupTheme="@style/ThemeOverlay.AppCompat.Dark.ActionBar
Esto es lo mismo para lo anterior solo que aplicable al contexto de los menús, podemos decidir si un menú se presenta del mismo tema o diferente al del ActionBar. Esto quiere decir que podemos tener un tema exclusivo para la aplicación y otro propio para el menú. En este caso lo deje igual, pero es elección tuya iterar sobre todas las posibilidades.

Una vez elegidos configurado el Toolbar procedemos a setearlo en nuestra Actividad, es muy sencillo, lo que hacemos primero es el llamado como objeto del Widget:

Código :

Toolbar toolbar = (Toolbar) findViewById(R.id.activity_my_toolbar);

Y de inmediato setearlo:

Código :

setSupportActionBar(toolbar);

Como un paso opcional podemos cambiar el nombre del ActionBar, la siguiente imagen muestra el código implementado:

Y listo, ya tenemos el UI de la aplicación totalmente configurada, que queda de la siguiente manera:

Si notaste, en versiones anteriores a Lollipop, el StatusBar no cambia de color, pero en Android 5.0 si lo hace, pero a pesar de eso, conservan ese mismo look Material Design, y totalmente compatible para todos. Ahora veamos su segunda variante:

Lo único que cambia es el tamaño del ActionBar, que pasa de ser estándar a ser un poco grande (100dp), cosa que antes era imposible sin Toolbar, después puedes usar tu imaginación, podrías agregar widgets del tipo Button, ImageView o hasta Fragment.

Código :

<android.support.v7.widget.Toolbar xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:id="@+id/activity_my_toolbar"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:minHeight="100dp"
    android:background="@color/primary_color"
    app:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar"
    app:popupTheme="@style/ThemeOverlay.AppCompat.Dark.ActionBar"/>

Paso 5: Agregando un Floating Action Button

No hay duda que Floating Action Button es un elemento que de inmediato lo relacionamos con Material Design, existen muchas formas de agregarlo, pero esta vez, optare por una librería hecha especialmente para ello (recordar que ese librería la agregamos en el paso 2):

Lo único que tenemos que hacer es agregar el widget en la vista que queremos, la configuración básica de la librería es:

Código :

        <com.getbase.floatingactionbutton.FloatingActionButton
            android:id="@+id/pink_icon"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            fab:fab_icon="@drawable/ic_add"
            fab:fab_colorNormal="@color/accent_color"
            fab:fab_colorPressed="@color/accent_color" />

Donde:

android:id="@+id/pink_icon"
Es el id que le asignamos al botón, con ello, podemos manipularlo fuera de nuestra vista, como por ejemplo, escuchar eventos "onClick"

android:layout_width="wrap_content"
Siempre se debe configurar el ancho con el contenido que necesite, nunca con todo el disponible.

android:layout_height="wrap_content"
Siempre se debe configurar el alto con el contenido que necesite, nunca con todo el disponible.

fab:fab_icon="@drawable/ic_add"
Es el icono dentro del botón, y dicho icono es una imagen contenida dentro de nuestras carpetas drawable, como tip Google tiene como descarga todos los iconos basados en Material Design.

fab:fab_colorNormal="@color/accent_color"
fab:fab_colorPressed="@color/accent_color"
Y estos últimos son los colores que tendrá el botón, precisamente como recomendación es el color Accent, configurado previamente en colors.xml.

Lo se, nuestro diseño muestra dos variaciones y parecieran muy diferentes entre ellas, pero lo único que cambia de nuestro botón es la posición, nada mas. La siguiente imagen muestra los cambios entre ellos (recuerda que todo el código se menciona en el paso 1):

Realmente ya configuramos lo importante del UI, esto es la base de una aplicación Material Design, todo lo demás depende mucho de lo que quieras hacer: Tabs, Navigation Drawer, Listas, etc. Solo como ejemplo, en este casó, use un RecyclerView para desplegar una lista de elementos, no seré muy especifico ya que fue algo que nos enfocamos mucho en otro tutorial.

Paso 6: Nuestro viejo amigo RecyclerView

Ya como punto final de este pequeño proyecto, tenemos a un viejo conocido, un RecyclerView. Recordar que en un RecyclerView se crea:

Un modelo (En este caso se llama Pusheen.java):

Código :

public class Pusheen {
    private Integer id;
    private String name;
    private String pasTime;

    public String getPasTime() {
        return pasTime;
    }

    public void setPasTime(String passTime) {
        this.pasTime = passTime;
    }

    public Integer getId() {
        return id;
    }

    public void setId(Integer id) {
        this.id = id;
    }

    public String getName() {
        return name;
    }

    public void setName(String name) {
        this.name = name;
    }
}


Una Vista (row.xml dentro de layout y es donde ademas usamos la librería para imágenes circulares):

Código :


<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout
    android:layout_marginLeft="16dp"
    android:layout_marginTop="10dp"
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent">

    <de.hdodenhof.circleimageview.CircleImageView
        android:id="@+id/image"
        android:layout_width="56dp"
        android:layout_height="56dp"
        android:src="@drawable/pusheen"/>

    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:textAppearance="?android:attr/textAppearanceLarge"
        android:text="Pusheen"
        android:id="@+id/name"
        android:textStyle="bold"
        android:textColor="#424242"
        android:layout_alignParentTop="true"
        android:layout_toRightOf="@+id/image"
        android:layout_toEndOf="@+id/image"
        android:layout_marginLeft="16dp"
        android:layout_marginTop="10dp" />

    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:textAppearance="?android:attr/textAppearanceSmall"
        android:text="pastime"
        android:textColor="#424242"
        android:id="@+id/passtime"
        android:layout_below="@+id/name"
        android:layout_alignLeft="@+id/name"
        android:layout_alignStart="@+id/name" />
</RelativeLayout>

Un Adapter (PusheenAdapter.java):

Código :

package la.mejorando.prelollipopmaterialdesign.adapters;

import android.support.v7.widget.RecyclerView;
import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;
import android.widget.ImageView;
import android.widget.TextView;

import java.util.ArrayList;

import la.mejorando.prelollipopmaterialdesign.R;
import la.mejorando.prelollipopmaterialdesign.models.Pusheen;

/**
 * Created by thespianartist on 07/12/14.
 */
public class PusheenAdapter extends RecyclerView.Adapter<PusheenAdapter.ViewHolder> {

    private ArrayList<Pusheen> pusheenArrayList;
    private int itemLayout;


    public PusheenAdapter(ArrayList<Pusheen> data,  int itemLayout){

        this.pusheenArrayList = data;
        this.itemLayout = itemLayout;
    }

    public static class ViewHolder extends RecyclerView.ViewHolder {

        public ImageView image;
        public TextView name;
        private TextView pasTime;

        public ViewHolder(View itemView) {

            super(itemView);
            image = (ImageView) itemView.findViewById(R.id.image);
            name = (TextView) itemView.findViewById(R.id.name);
            pasTime = (TextView) itemView.findViewById(R.id.passtime);

        }
    }

    @Override
    public PusheenAdapter.ViewHolder onCreateViewHolder(ViewGroup parent, int i) {
        View itemLayoutView = LayoutInflater.from(parent.getContext()).inflate(itemLayout, parent, false);
        ViewHolder viewHolder = new ViewHolder(itemLayoutView);
        return viewHolder;
    }

    @Override
    public void onBindViewHolder(PusheenAdapter.ViewHolder viewHolder, int position) {

        Pusheen pusheen = pusheenArrayList.get(position);

        viewHolder.name.setText(pusheen.getName());
        viewHolder.pasTime.setText(pusheen.getPasTime());

        if (pusheen.getId()!=null) {
            switch (pusheen.getId()) {
                case 1:
                    viewHolder.image.setImageResource(R.drawable.pusheen);
                    break;

                case 2:
                    viewHolder.image.setImageResource(R.drawable.pusheen2);
                    break;

                case 3:
                    viewHolder.image.setImageResource(R.drawable.pusheen3);
                    break;

                case 4:
                    viewHolder.image.setImageResource(R.drawable.pusheen4);
                    break;

                case 5:
                    viewHolder.image.setImageResource(R.drawable.pusheen5);
                    break;
            }

        }else{
            viewHolder.image.setImageResource(R.drawable.pusheen);
        }
        viewHolder.itemView.setTag(pusheen);
    }

    @Override
    public int getItemCount() {
        return this.pusheenArrayList.size();
    }
}


y propiamente el Widget dentro de la vista

Código :

 <android.support.v7.widget.RecyclerView
        android:layout_marginTop="?attr/actionBarSize"
        android:id="@+id/my_recycler_view"
        android:layout_width="match_parent"
        android:layout_height="wrap_content" />

Y eso es todo, tenemos un lindo proyecto Material Design para versiones anteriores a Lollipop, les dejo una ultima imagen de la aplicación vista en horizontal:

Recuerden que si tienen alguna pregunta no olviden consultarme en twitter @thespianartist, les dejo de nuevo el repositorio del ejemplo (Recuerden que tiene dos branches). Ademas, me gustaría saber si esto aporto en sus proyectos actuales (:

Enviar comentario

via Cristalab http://ift.tt/1vZh62d

La gran historia tras el rediseño de Mejorando.la

Arte y diseño. User Experience y User Interface. El diseño tiene que comunicar un mensaje más allá del arte y la belleza. Hacer UX tiene ciencia por encima del instinto del UI. Ese es nuestro ADN al crear nuevas experiencias.

Este año, Mejorando.la lanzó una inmensa cantidad de productos: Maestros del Web goza de un nuevo look, cambiamos de oficina y ahora tenemos presencia local en España, México y Colombia.

Mereciamos un gran cambio.

Tras semanas de estudios de usabilidad, análisis de UX, prototipos y test A/B. Tras dos meses de trabajo…

Presentamos el nuevo Mejorando.la y Platzi

Un nuevo home, un sistema de pagos de clase mundial (en serio, esto podría ser una startup nueva, intenta comprar una suscripción), landings hermosos para nuestros cursos de Frontend, Backend, Marketing y todos los demás.

Y otras nuevas cosas que iremos añadiendo a lo largo de diciembre.

Por debajo, cambiamos el Backend y Frontend a un sistema modular escalable. Continuamos con nuestro stack de Django, HTML5, CSS3 con Stylus y Backbone.js. Aún podemos optimizar más y lo seguiremos haciendo en las próximas semanas.


Pero más que hablar, ¿Qué tal verlo ya mismo?

Bienvenidos al nuevo Mejorando.la. Nuestro siguiente paso: Grandes noticias para Cristalab, Maestros del Web y Foros del Web. Ya lo verás :)

Por Ophelia Pastrana y Freddy Vega del Team Mejorando.la

Enviar comentario

via Cristalab http://ift.tt/1BkNCic

Impulsa tu sitio en Google con estos 10 tips SEO

¿Has escuchado que Google tiene 100,000,000,000 visitas diarias pero tu tienes menos de 100, por mes?

Sabes que no importa cuanto mejores tu diseño web, cuántos blog posts escribas, las veces que compartas tu blog en Twitter, de primera, no va a variar mucho tu posicionamiento en Google. No dejes tu blog o proyecto, optimizar para posicionarte en Google es mucho más simple de lo que parece.

La calidad del contenido influencian el comportamiento de la gente adentro de tu sitio, mientras que optimizando el SEO va a influenciar a la gente afuera de tu sitio a hacer click.

Las mejores Prácticas de SEO resume las técnicas para rankear en la primera página de Google y creeme, cuando digo Rankear en Google, me refiero a los primeros lugares que pueden darte muchísimas ganancias.

Sí no me crees, aca hay algunas cosas interesantes sobre los beneficios de estar en los primeros lugares de Google:

  • El primer lugar en Google obtiene un 34% de los clicks. Mirándolo de otro modo, sí te posicionas primero para "Vender cursos de Marketing Digital Online" y eso tiene 200.000 visitas por día, tu estas obteniendo 68.000 visitas por días.
  • SEO es gratis, no vas a dedicar mucho dinero en SEO, lo que vas a dedicar es tiempo y esfuerzo,
    o un experto en SEO que lo haga a cambio de dinero.
  • La primera razón por la cual debes optimizar tu sitio web en los buscadores es. INCREMENTAR TUS VENTAS. Aunque tu sitio apeste siempre va a ver un bajo número de conversión(.05%) que aumenta en ganancias sí obtienes el 34% de los clicks.
  • Saber lo que hace la competencia, de que escriben, que productos venden, por último el SEO también nos hace averiguar sobre la competencia.

Para el final de este post, sabrás las mejores prácticas de SEO para optimizar tu sitio web y comenzar a rankear en los mejores lugares de Google. Sabiendo cuales son esas mágicas keywords que incrementarán tus visitas, como prevenir la duplicación de contenido, y si tu URL es lo suficientemente buena

Como funciona Google

Primero que nada tenemos que saber como funciona Google. Ellos envían spiders a tu sitio web para que sea indexado en el motor de búsqueda. Pero el problema es que estas arañas son medias "especiales"(en el sentido negativo).

Ellas indexan lo que ven en ese mismo instante, cualquier cambio que hagas Google lo notará la próxima vez que indexe tu sitio. Tampoco leen el HTML, solamente ven tu HTML.

Hay dos cosas que debes saber sobre las spiders de Google, primero es que cada vez que haces cambios grandes en tu sitio web, atraer las Google Spiders. Para esto en Google Webmaster Tools se nos permite pedir que Google pase nuevamente.

El segundo truco es tener, como dije anteriormente, el un sitio HTML friendly. Sí tu landing page tiene un seleccionador de países y nada más, va a ser muy difícil para las Google Spiders indexar tu sitio.

Entonces sí tienes una store, tu negocio está en internet, o si tienes una página personal o un blog,lo que viene es para ti

Las mejores practicas de SEO

Títulos

Los títulos de tus páginas son muy importante, es lo primero que un usuario ve en Google. Debe tener el keyword en el cual se enfoca esa página. Y es muy recomendable que el Keyword aparezca al principio del título, no al final.

Excepto sí eres una marca reconocida, como en el caso de Amazon(aparece al final).

Okey pero que pasa con esas página que tienen un título incompleto en Google, es horrible y pierden el % que pueden recibir de clicks.

Es por eso que tienes que estar seguro que tu título tenga un máximo de 70 caracteres, así como también solamente debes utilizar una keyword de la que te enfocas.

Algunos errores que a veces ocurre con los títulos:

  • Poner el mismo título y H1 tag
  • El mismo título en todas las páginas
  • Utilizar muchas keywords en las cuales te enfocas.

Meta Description

Lo segundo que ve un usuario en Google es el meta description. Ya casi ni es tenido en cuenta por Google para rankear, pero sigue siendo de las cosas más influyente que lleva a un usuario a realizar click. Aquí tienes 150 caracteres máximo para utilizar.

Así que debes escribir algo totalmente que lleve a hacer click a los usuarios a tu posts, puede ser una explicación de lo que hay en la página o puede ser un fragmento de un post.

URL

Okey, cuantas veces eh visto gente compartiendo un link que termina siendo "http://ift.tt/1yhGeBO;, muchas y es HORRIBLE, está seguro que ninguna página en tu sitio tiene ese problema, usa URLs limpias.

Tener una arquitectura clara y limpia es vital para que los Google Spiders puedan indexar mejor tu sitio. Una buena estructura es

http://ift.tt/1vfUlSj

  • www : es el Subdomimino.
  • StartupsThatRock : Dominio, es mejor tener un dominio que incluya el keyword principal de tu sitio web.
  • com : Top level domain.
  • seo : Carpeta, son muchas veces las categorias, es muy recomendable no tener más de dos guiones.
  • seo-keyword-research: Página, generalmente la gente los deja por defecto, pero es muy importante no usar más de tres guiones.

Este ejemplo es de un sitio web con arquitectura limpia. Otra recomendación es siempre mantener tu contenido. Sí por ejemplo, actualizas un posts lo común es borrar el viejo… MAL!, el viejo post lo puedes guardar bajo otra URL, pero el nuevo déjalo con la vieja URL.

Imágenes

¿Cuántas veces has descargado una imagen como ejfiadfd.jpg? O, ¿has entrado a un sitio web por Google Images?

Las imágenes son muy importantes en las prácticas de SEO, hay un montón de personas que suben imágenes y envían el post sin fijarse en muchas cosas. Hay muchísima gente que adquiere tráfico por las imágenes.

El primer punto es el nombre, el mismo es muy importante. Luego sigue la etiqueta de html alt, que muchísima gente deja vacía. Estas etiquetas ayudan a los Google Bots indexar mejor el sitio y las imágenes.

Copy

Lo que Google tiene más en cuenta cuando se fija en las keywords es en centro de la página, donde se concentra todo el copy.

La keyword en la cual nos enfocamos debe aparecer demasiadas veces para asegurarnos de tener una alta densidad.

La misma puede estar en el footer, título, etc, PERO DEBE ESTAR EN EL COPY. Para chequear la densidad podemos usar SEOBOOK, esta herramienta para las mejores prácticas de SEO nos permite analizar que tanto usamos la keyword.

Se habla mucho de cuantas palabras debe haber mínimo por página 250, 300, 500, la realidad es que lo óptimo es entre 250-500 mínimo.

Aquí no importa mucho la cantidad de palabras, sino la calidad de las mismas.

El último consejo sobre el Copy es incluir la keyword al comienzo y al final, es muy importante para Google esto. Sí solamente aparece en el medio, primero que tus usuarios van a demorar más en encontrarla y segundo que los Google Bots vana demorar más en encontrarla.

Usa también sinónimos, son muuuuuy importante para las mejores prácticas de SEO.

Dominio

Tu dominio es como el nombre de tu sitio web, si no es cool, facil y sencillo, seguramente sea un looser.

Por ejemplo la gente que utiliza guiones en los dominios www.micro-soft.com, no solamente baja el % de confianza en los usuarios, si no que también para Google son tomados como espacios.

Mencionar tu keyword principal en tu dominio es muy, muy, muy importante. Sí tu negocio es sobre X, tu dominio debe ser www.Xventas.com.

Los mejores dominios están compuestos de la marca + keyword… www.brandkeyword.com.

Otra cosa a tener en cuenta de los dominios es su edad, Google para rankear lo tiene en cuenta. Un viejo dominio va a rankear mejor que uno nuevo.

Breadcrumbs

Los breadcrumbs son esas guías que nos muestran donde estamos, sin duda es una muy buena práctica de SEO, y nos ayuda a saber en que parte dei sitio estamos

Esto es demasiado importante para la arquitectura del sitio web. Hace que las Google Spiders indexen mejor tu sitio y tenga un panorama de las páginas más jerárquicas.

Por lo cual los breadcrumbs valen doble, ofrecen una mejor usabilidad a los usuarios y también por parte de SEO para google.

Subdominios vs Subdirectorios

Okey, esta es una guerra que lleva muchos años. Son muchas las veces que eh escuchado decir Los subdirectorios rankean mejor que los subdominios en SEO:

Y es una gran mentira, tanto los subdominios como los subdirectorios Google no hace gran diferencia cuando los rankea. Por lo cual no afecta el SEO.

Los subdominios son usados por sitios webs grandes que tienen MUCHISIMA información y deben organizarse mejor para dar una mejor usabilidad al usuario. Ej: miami.hello.com y nyc.hello.com

Canonización

[*]http://growthsquare.la
[*] www.growthsquare.la
[*] growthsquare.la
[*] http://ift.tt/1vfUm8F

¿Puedes decirme la diferencia entre todos esos link? ¿No, no hay diferencia, todos te llevan a una misma Landing Page?

Sí bien puede usar todos, solamente debes optar por tener uno activo, ¿por qué? Simple, te dará un impacto negativo, hay una forma de que todos tus links diferentes se transformen en uno solo

  • rel=canonical
  • 301 redirect

El tag rel=canonical se puede activar en Google Webmaster tool, sí bien es más facil de usar hay dudas de sí es realmente efectivo.

Por otro lado, 301 redirect es lo mejor, es un poco más difícil de usar, pero sin duda alguna es más efectivo, hay varios plugins de WordPress(en caso de que tu sitio sea en wordpress) O guías para aprender a usarlo.

Lo que hacen es que sí tu sitio es www.growthsquare.la, cada vez que un usuario entre por http://ift.tt/1yhGcKn o algo similar, sera redirigido a www.growthsquare.la

Sitemaps

Por último, una de las mejores prácticas de SEO son los sitemaps. Los sitemaps presentan un mapa de la arquitectura de tu sitio, que facilitan a los Google Spiders su trabajo, incluso les dices que sitios son más relevantes que otros.

Hay dos tipos de Sitemaps

  • XML: Estos son para los Google Spiders, básicamente se les muestra la arquitectura del Sitio, una de las mejores prácticas de SEO sin duda alguna. Los puedes subir en Google Webmaster Tools, así como crearlo en www.xml-sitemaps.com
  • HTML FRIENDLY: Este es para los usuarios, se les muestra a los usuarios la arquitectura del sitio, y a la vez se pone todos los links del sitio. De esa forma sacas más ventaja SEO. Lo mejor también es poner todos los links en el footer.
    [img]http://ift.tt/1yhGeSm]

CONCLUSIÓN

Okey, eso fue un montón de información, para complementar esto puedes leer este tutorial de Cristalab también para hacer un keyword research.
PD: Sí necesitas ayuda con SEO, puedes contactarme es Twitter o a mi Facebook
PPD: Sin duda sí sigues ambos tutoriales, puedes posicionarte increíblemente en Google.

Enviar comentario

via Cristalab http://ift.tt/11R3RnT