Flash CC no soporta AS2. Último adiós después de más de diez años
Cuando me enteré de que Adobe Flash CC ya no es compatible con Action Script 2 (AS2), no pude menos que rendirle un homenaje a un lenguaje de programación que tanto me dio durante más de diez años. Sea este un adiós con nostalgia y un agradecimiento por las personas maravillosas que conocí.
La historia
En el año 2001 trabajaba para eltiempo.com. Ana, la diseñadora de ese entonces, me pidió que le ayudara con un programa que hacía animaciones y admitía unas líneas de programación. Fue así como tuve mi primer acercamiento a Macromedia Flash MX (no siempre ha sido de Adobe) y realicé mis primeras líneas de código en AS2.
Flash se convirtió en una pasión y comenzamos a trabajar con Ana en diferentes proyectos de presentación de contenido, logrando unir la creatividad de ella con la programación dinámica. El gusto por aprender cada vez más me llevó a Usershock, una comunidad colombiana de usuarios de Macromedia, donde tuve la oportunidad de conocer a Javier Fernández y Freddy Vega. Con el tiempo, logré obtener una certificación como desarrolladora y una mejor oportunidad laboral. En 2004 ingresé a la nómina de Studiocom, donde inicié como programadora de Action Script.
Me vi en la necesidad de aprender mucho más para estar a la altura de los nuevos retos que se me presentaban. Nunca olvidaré mi primer proyecto, vanillacoke.com, con el maravilloso Dov que me regalaba montajes de fotos mías, y con mi gran colega y amigo Alejandro Cadavid, fundador de onehundredtables.com.
Con las nuevas versiones de Flash no podía dejar de estudiar y renovar mi certificación. Era muy gratificante ver mi nombre en las páginas de Macromedia como certificada en Colombia. Se sentía muy bien que al buscar mi nombre en Internet se desplegaban en primera línea mis logros (en esos días no habían perfiles en redes sociales).
En 2006, el "bichito" de la independencia me picó y con mi hermano creamos Pixel Group, nuestra propia empresa; en 2007 comencé a trabajar en el tema del e-learning rodeada de grandes creativos como Toya Múnera y Freddy Fula, y AS2 seguía a mi lado como el lenguaje con el que creaba cursos virtuales (que en ese momento eran realmente presentaciones animadas en Flash).
Para algunos de los proyectos que realizaba tuve que aprender a implementar el estándar Scorm 1.2 y, gracias a un proyecto que realicé para Cognosonline, me volví experta en integrar el estándar SCORM con cursos virtuales elaborados en AS2, AS3 y ahora HTML5.
La noticia
Con el auge de AS3 y HTML5, hacía varios años que había dejado a un lado la programación en AS2. Sin embargo, el mes pasado ocurrió lo impredecible: un cliente a quien había dado una capacitación en el pasado, me llamó solicitando que le ayudara con un proyecto.
Le dije que me enviara los archivos fuente y que yo haría los ajustes que necesitaba.
Como hace menos de un mes había cambiado de computador no tenía instalado Flash. Entonces compré en Adobe.com una licencia para usar la última versión de Flash por un mes en mi equipo. Me emocioné mucho durante el tiempo de la descarga porque me intrigaba saber que traía de nuevo Adobe Flash CC.
Una vez instalado el programa, procedí a abrir los archivos de mi cliente y, ¡vaya sorpresa la que me llevé! Se desplegó una ventana indicándome que ya no había soporte para AS2 y que perdería todo el código.
¡Oh Dios! Y ahora, ¿quién podría ayudarme?
El Chapulín Colorado no apareció, pero sí mi esposo con un backup que tenía de un instalador de Adobe Flash CS6, luego desde la página de Adobe pude hacer válida la licencia adquirida para una versión inferior; mientras realizaba la labor encomendada, me preguntaba: ¿qué voy a hacer con todo el código que creé para muchos clientes durante estos años?.
El futuro
Si eres de los que nunca quiso aprender AS3 y todavía haces proyectos en Flash, te cuento que es hora de cambiar. Pásate a HTML5 y CSS3.
Si todavía tienes proyectos en AS2 a los que les das soporte, te recomiendo que guardes un instalador de CS6 en tus backups, porque podrías llegar a necesitarlo (como me pasó a mí).
Por otra parte, ya tienes un nuevo argumento de venta. Visita a tus clientes, cuéntales que es una tecnología que ya no tiene asistencia técnica por parte del proveedor del software y ofréceles actualizarse. Busca sitios web que todavía estén en flash y llama a los clientes y cuéntales de las nuevas tecnologías. Flash se apaga, pero tus opciones de negocio aumentan.
Carolina Avila Coral
@cavila78
via Cristalab http://ift.tt/1H4nHir
Entra YA a #PlatziConf online
PlatziConf online es una conferencia en streaming de los mejores founders e inversionistas del mundo de la tecnología. Traída a ti con el apoyo de Cristalab.
¿Amas internet, las startups, programar, diseñar o hacer marketing? Esta conferencia es para ti.
El acceso es gratis, abierto, sin registro. Sólo necesitas abrir ya mismo este link:
http://ift.tt/1uYJRZ1
Y disfrutar conferencias de Reddit, Y Combinator y Platzi (antes Mejorando.la)
Ya sabemos que estás dentro, pero ¿Lo puedes compartir por favor? Es sólo hoy, sábado, 3 de mayo, en vivo, en streaming. (O en nuestro canal de Youtube por si te la pierdes)
Todo empieza a las 9AM (COL/MEX/PER) | 4PM (ES)
¡Compartelo por favor!
via Cristalab http://ift.tt/1GNYbe8
Usa módulos del lado cliente con Browserify
Browserify te permite implementar módulos en el lado del cliente muy familiar a lo que hace Node.js. Puedes exportar módulos o requerir de ellos en diversos archivos. Ademas nos permite utilizar módulos del core de Node.js y demás módulos que se encuentra en NPM.
Instalación
Para empezar tenemos que instalar Browserify de manera global:
Código :
npm install -g browserify
Como un pequeño ejemplo, generaremos un archivo suma.js con el siguiente código:
Código :
var suma = function(a,b){
return a + b
}
module.exports = suma
Despues crearemos un archivo main.js, que contendrá lo siguiente:
Código :
var suma = require('./suma.js');
console.log(suma(2,3));
En nuestra consola, nos dirigimos a la carpeta de el proyecto en la cual tenemos nuestros archivos y escribiremos lo siguiente
Código :
browserify main.js > bundle.js
Este comando creara un archivo bundle.js incluyendo el contenido de suma.js y main.js listo para usarse.
Lo que tenemos que hacer es agregar bundel.js a nuestro archivo index.html
Código :
<html> <head> <title></title> <script charset="utf-8" src="bundle.js"></script> </head> <body> </body> </html>
Abrimos la consola de nuestro navegador y veremos el resultado de la operación.
Agregando como dependencias: Jquery, Underscore y Backbone
Si queremos agregar alguna dependencia como Jquery, Underscore, o Backbone, lo que tenemos que hacer es ir a nuestra terminal e instarlos usando NPM:
Código :
npm install jquery backbone underscore --save
Esto nos deberá de generar una carpeta node_modules donde se encontraran las librerías que bajamos, si queremos agregarlas en el archivo
Código :
main.js
haremos lo siguiente
Código :
var $ = require('jquery');
var _ = require("underscore")
var Backbone = require('backbone');
Backbone.$ = $;
Lo que hace browserify es buscar los módulos en la carpeta de node_modules igual que lo hace Node.js.
Ahora ya tenemos jquery, underscore y backbone en nuestro archivo, solo que tenemos un inconveniente, de esta forma solo están disponibles en nuestro archivomain.js y si quisiéramos utilizarlos en nuestro archivo suma.js o en cualquier otro archivo tendríamos que escribir siempre las mismas 4 lineas para poder hacer uso de ello 
, para resolverlo podemos hacer lo siguiente:
Código :
window.$ = require('jquery');
window._ = require("underscore")
window.Backbone = require('backbone');
Backbone.$ = $;
Ahora tenemos accesos a ellas de manera global y si queremos hacer uso de ellas en algun otro archivo solo tendremos que escribir $, _ o BacKbone
Para probarlo haremos un pequeño ejemplo consumiendo un API, creamos un archivo PaisesController.js con el siguiente código:
Código :
module.exports = Backbone.Collection.extend({
url: 'http://restcountries.eu/rest/v1/all'
});
También crearemos un archivo para las vistas que se llamara PaisesView.js con el siguiente código:
Código :
module.exports = Backbone.View.extend({
tagName:'p',
initialize:function() {
this.template = _.template($("#paisTemplate").html());
},
render: function() {
var data = this.model,
html = this.template(data);
this.$el.html(html);
}
});
Y nuestro archivo main.js lucirá así:
Código :
window.$ = require('jquery');
window._ = require("underscore")
window.Backbone = require('backbone');
window.bluebird = require("bluebird");
Backbone.$ = $;
var PaisesController = require("./PaisesController.js");
var PaisesView = require("./PaisesView.js");
var paises = new PaisesController();
paises.fetch()
.then(function(data){
data.forEach(function(pais){
var view = new PaisesView({model:pais})
view.render();
view.$el.appendTo("#paises");
});
});
Como podrán observar, se utiliza la librería bluebird para implementar promesas, pera un no la tenemos en nuestros módulos, para eso haremos lo siguiente en nuestra consola:
Código :
npm install bluebird --save
Ahora modifiquemos nnuestro archivo {b]index.html{/b]
Código :
<html> <head> <meta charset="UTF-8"> <title></title> </head> <body> <div id="paises"> </div> <script charset="utf-8" src="bundle.js"></script> <script type="text/template" id="paisTemplate"> Pais:<%=name%>, Capital:<%=capital%> </script> </body> </html>
Esto nos presentara una lista de países con su capital.
Ahora para que nuestro archivo bundle.js este listo, tendremos que poner en nuestra consola el comando de browserify:
Código :
browserify main.js > bundle.js
Usando Grunt para automatizar Browserify
Cada vez que hagamos un cambio en nuestros archivos tendremos que correr este archivo manualmente 
.Pero no se preocupen, podemos resolverlo utilizando grunt, para eso tendremos que tener instalado grun y ademas instalar: grunt-contrib-watch y grunt-browserify:
Código :
npm install -g grunt-cli
Código :
npm install grunt-contrib-watch --save-dev npm install grunt-browserify --save-dev
Y nuestro archivo Gruntfile.js se vera así:
Código :
module.exports = function (grunt) {
grunt.initConfig({
watch:{
scripts:{
files:['./main.js'],
tasks: ['browserify'],
}
},
browserify:{
client: {
src: ['./main.js'],
dest: './bundle.js',
}
}
});
grunt.loadNpmTasks('grunt-contrib-watch');
grunt.loadNpmTasks('grunt-browserify');
grunt.registerTask('default',['watch']);
}
Ahora solo tendremos que correr en nuestra terminal:
Código :
grunt -v
Y listo, grunt hará el trabajo por nosotros cada vez que hagamos un cambio . 
Bien ahora ya tenemos una aplicación funcionando usando browserify ,jquery , underscore backbone y bluebird y ademas un archivo de grunt corriendo nuestra tarea, espero les sea de ayuda 
Si quieres consultar el código, este es el repositorio: Github del Ejemplo
via Cristalab http://ift.tt/1AJfo5I
Cómo usar la etiqueta template en HTML5
Hasta hace unos años, cuando un desarrollador quería hacer templates de sus páginas , la opción era usar algún lenguaje en el Backbend como PHP, Ruby, Python, etc.
Actualmente el uso de templates es posible del lado del Frontend usando JavaScript. Para manejar dichos los templates tenemos algunos engines como:Jade, Swig, Mustache, Handlebars, etc.
Gracias a la popularidad de estos motores de templates la WhatWG creó una etiqueta nueva en HTML5 poco conocida, que gracias a los Web Components se está volviendo cada vez más popular, la etiqueta <template>.
Soporte
No todos los navegadores soportan la etiqueta <template>. Actualmente es soportado por Firefox +22, Chrome +26, Safari +7.1, Opera +15, iOS Safari +8, Android Browser +4.4, Opera Mobile +24, Chrome for Android +39 y Firefox for Android +33, Internet Explorer no tiene soporte alguno a esta etiqueta.
Para poder detectar si el navegador que el usuario está usando tiene soporte para esta etiqueta simplemente creamos el elemento del DOM con JavaScript y nos fijamos si posee la propiedad .content.
Código :
if ('content' in document.createElement('template')) {
// Funciona!
} else {
// Usamos algún motor de templates
}
Creando el template
La etiqueta <template> es esencialmente un elemento clonable del DOM para ser reutilizado en tu sitio o aplicación web. Para crear un template simplemente escribes HTML común y lo colocas dentro de la etiqueta <template>.
Código :
<template id="template"> <h1></h1> </template>
Características principales
Envolver contenido dentro de <template> nos da cuatro características importantes.
- 1) El contenido es parseado e interpretado por el navegador, pero no renderizado por lo que es invisible para el usuario.
2) Cualquier contenido dentro del template no tiene efectos secundarios. Los scripts no se ejecutan, las imágenes no cargan, el audio no suena y los vídeos no se reproducen, hasta que el template sea usado.
3) El contenido del template no es considerado parte del documento, hacer un document.getElementById() o .querySelector() no va a regresar los elementos del template.
4) El template puede ser colocado en cualquier parte dentro de <head>, <body> o <frameset> y puede contener cualquier tipo de contenido que sea posible usar dentro de estos elementos.
Activando los templates
Para usar un template hay que activarlo, de otra forma nunca va a ser renderizado. La forma más simple es copiar el .content usando document.importNode(). La propiedad .content la representación en JavaScript del contenido del template y desde donde se puede acceder a todo el contenido de este.
Código :
var t = document.querySelector('#template');
var clone = document.importNode(t.content, true);
clone.querySelector('h1').innerHTML = 'Hola Cristalab';
document.body.appendChild(clone);
Luego de colocar el clon del template en nuestra aplicación el contenido es renderizado, en este ejemplo dentro del h1 se coloca el string Hola Cristalab y se renderiza todo el HTML del template.
Como usarlo en Internet Explorer y otros navegadores viejos
Aunque la etiqueta <template> no tiene soporte en Internet Explorer es posible utilizarlo gracias a la librería HTML5Shiv, que por cierto forma parte de de Modernizr por lo que si están usando este, entonces ya tienen HTML5Shiv y ya pueden usar la etiqueta <template>.
Hay sin embargo una pequeña diferencia entre el soporte nativo de la etiqueta y el que permite HTML5Shiv y es que el soporte nativo funciona como está explicado arriba, mientras que HTML5Shiv lo que hace es crear el elemento usando document.createElement() y luego le pone el estilo display: none por defecto, por lo que durante muy poco tiempo es posible que el usuario vea el contenido del template.
Demo
Pueden ver una demo del código de arriba en CodePen en el siguiente link:
http://ift.tt/1yXO4T9[/img]
Hasta hace unos años, cuando un desarrollador quería hacer templates de sus páginas , la opción era usar algún lenguaje en el Backbend como PHP, Ruby, Python, etc.
Actualmente el uso de templates es posible del lado del Frontend usando JavaScript. Para manejar dichos los templates tenemos algunos engines como:Jade, Swig, Mustache, Handlebars, etc.
Gracias a la popularidad de estos motores de templates la WhatWG creó una etiqueta nueva en HTML5 poco conocida, que gracias a los Web Components se está volviendo cada vez más popular, la etiqueta <template>.
Soporte
No todos los navegadores soportan la etiqueta <template>. Actualmente es soportado por Firefox +22, Chrome +26, Safari +7.1, Opera +15, iOS Safari +8, Android Browser +4.4, Opera Mobile +24, Chrome for Android +39 y Firefox for Android +33, Internet Explorer no tiene soporte alguno a esta etiqueta.
Para poder detectar si el navegador que el usuario está usando tiene soporte para esta etiqueta simplemente creamos el elemento del DOM con JavaScript y nos fijamos si posee la propiedad .content.
Código :
if ('content' in document.createElement('template')) {
// Funciona!
} else {
// Usamos algún motor de templates
}
Creando el template
La etiqueta <template> es esencialmente un elemento clonable del DOM para ser reutilizado en tu sitio o aplicación web. Para crear un template simplemente escribes HTML común y lo colocas dentro de la etiqueta <template>.
Código :
<template id="template"> <h1></h1> </template>
Características principales
Envolver contenido dentro de <template> nos da cuatro características importantes.
- 1) El contenido es parseado e interpretado por el navegador, pero no renderizado por lo que es invisible para el usuario.
2) Cualquier contenido dentro del template no tiene efectos secundarios. Los scripts no se ejecutan, las imágenes no cargan, el audio no suena y los vídeos no se reproducen, hasta que el template sea usado.
3) El contenido del template no es considerado parte del documento, hacer un document.getElementById() o .querySelector() no va a regresar los elementos del template.
4) El template puede ser colocado en cualquier parte dentro de <head>, <body> o <frameset> y puede contener cualquier tipo de contenido que sea posible usar dentro de estos elementos.
Activando los templates
Para usar un template hay que activarlo, de otra forma nunca va a ser renderizado. La forma más simple es copiar el .content usando document.importNode(). La propiedad .content la representación en JavaScript del contenido del template y desde donde se puede acceder a todo el contenido de este.
Código :
var t = document.querySelector('#template');
var clone = document.importNode(t.content, true);
clone.querySelector('h1').innerHTML = 'Hola Cristalab';
document.body.appendChild(clone);
Luego de colocar el clon del template en nuestra aplicación el contenido es renderizado, en este ejemplo dentro del h1 se coloca el string Hola Cristalab y se renderiza todo el HTML del template.
Como usarlo en Internet Explorer y otros navegadores viejos
Aunque la etiqueta <template> no tiene soporte en Internet Explorer es posible utilizarlo gracias a la librería HTML5Shiv, que por cierto forma parte de de Modernizr por lo que si están usando este, entonces ya tienen HTML5Shiv y ya pueden usar la etiqueta <template>.
Hay sin embargo una pequeña diferencia entre el soporte nativo de la etiqueta y el que permite HTML5Shiv y es que el soporte nativo funciona como está explicado arriba, mientras que HTML5Shiv lo que hace es crear el elemento usando document.createElement() y luego le pone el estilo display: none por defecto, por lo que durante muy poco tiempo es posible que el usuario vea el contenido del template.
Demo
Pueden ver una demo del código de arriba en CodePen en el siguiente link:
http://ift.tt/1yXO4T9
via Cristalab http://ift.tt/1yXO4Ct
Introducción a Android Wear
¿Qué es Android Wear?
Android nació con la filosofia de ser una sola plataforma de software para todo tipo de hardware. Si bien los primeros productos que vimos fueron smartphones y tablets, el sistema operativo móvil de google ahora lidera el mercado e itera sobre otras posibilidades, tal como:
- -Android Wear
-Android Auto
-Android TV
Cada una de ellas con diversos contextos de uso, pero que juntos, proporcionan un ecosistema tanto familiar, como lleno de posibilidades.
La intención de este tutorial (y proximos) es el estudiar plataforma pensada especialmente para wearables, sus posibilidades, su alcance y el futuro de la misma.
¿Que es un wearable?
Llevar un smartphone se volvió algo tan cotidiano como vestir, no podemos salir de casa sin él y cuando se termina la bateria, nos sentimos casi desnudos. Su portabilidad y hardware los hacen perfectos a la hora de consumir contenido y realizar algunas tareas del dia a dia. Sin embargo, su funcionalidad decrece de manera considerable si no tenemos total atención sobre el, algo tan simple como responder un mensaje se vuelve casi imposible sin ver la pantalla.
Un wearable es una propuesta de tener información a tu alcance de una manera menos invasiva, presentando como algo que "vestirias" de forma casual. Si el smartphone lo usamos para todo menos para hablar, porque limitar un reloj a solo mostrar la hora. No pensemos por ahora que un wearable sustituye todo lo que puedes hacer con tu smartphone, la comodidad no se puede lograr sin tener unas especificaciones algo simples. Son un complemento para hacer acciones mas puntuales y llevar algunos registros mas precisos. Igual nuestro nuevo compañero requiere un poco mas de datos y batería por parte de tu smartphone.
Diferencias entre Android y Android Wear
¿Que propone Android Wear?
Android wear es una versión ajustada y optimizada para wearables, corriendo Android 5.0 Lollipop. No solo a nivel de código, si no con un equilibrio perfecto entre experiencia de usuario e interfaz de usuario (muy diferente a Glass). Dentro de lo mucho que podemos hacer con Android Wear encontramos:
- -Una nueva manera para visualizar y responder sobre notificaciones
-Comandos de voz (Multilenguaje) que funcionan muy bien
-Un SDK para crear aplicaciones propetarias para Wear
-Sensores optimizados en temas de fitness
¿Que es lo que cambia?
Si vienes del mundo del desarrollo de aplicaciones móviles para Android, las diferencias son minimas, seguimos teniendo Activities, Intents, Views y todo aquello que ya dominas. Si eres nuevo, quizás esto te parezca ajeno y es muy recomendable estudiar la plataforma para móviles primero.
En Android Wear tenemos 3 tipos de aplicaciones:
– Handheld Apps
– Wearable Apps (StandAlone Apps)
– Watch Faces
De igual manera, el uso de un wearable va getionado mediante la aplicación Android Wear ya sea para un dispositivo real o uno emulado:
Handheld Apps
Son aplicaciones instaladas en el smartphone con cierta interacción para tu wearable. La funcionalidad en el wearable es totalmente dependiente de la conexión entre ambos. Como ejemplos tenemos:
Mejores notificaciones, tal como lo hace Whatsapp:
En whatsapp no solo podemos ver un preview de los mensajes, si no que por medio del menú podemos responder el mismo o ignorarlo. A nivel de código, esto es posible con el uso de NotificationCompat API.
Ademas, por ser Handheld, Whatsapp esta limitado a ser usado en el wearable solo mediante notificaciones, no podemos ver ni responder de otro modo.
Compartir diversa información, como el uso de Navegación:
Pedir una dirección wearable significa dos cosas: Internet y GPS, si la mayoria de ellos no cuentan con ellos: ¿Cómo es que se comunican?. Es sencillo, se usa el Wearable Data Layer API. Wearable Data Layer API permite que el intermabio de datos entre el smartphone y el wearable sea mas sencilla.
Wearable Apps (StandAlone Apps)
Son aplicaciones que funcionan en el wearable exista o no conexión con tu smartphone. Sus caracteristicas son algo limitadas ya que se ejecuta directamente en el hardware del mismo. Estas aplicaciones se ejecutan desde el menú inicar:
Como ejemplos tenemos:
Flopsy Droid: un juego que rinde tributo al original Flappy Bird
Aplicaciones conocidas como Duolingo y Tinder
Watch Faces
Son aplicaciones especificamente diseñadas para funcionar como caratulas de reloj, estas se instalan en el wearable y pueden ser tan sencillas como para no requerir conexión entre ambos. Algunos Watch Faces pueden incluir información del clima y status de tu telefono (Cómo bateria, toggles, etc)
Requisitos para Desarrollar en Android Wear
Android Studio
El desarrollo para Android Wear solo es posible en Android Studio, de hecho, ADT pronto dejara de tener soporte. Android Studio es libre y multiplataforma, puede ser descargado en:
Lollipop SDK
Mediante el Android SDK Manager, debemos tener instalado el SDK de Android 5.0 Lollipop, ademas de sus respectivas System Images si quieres emular:
En extras, asegurarnos que tenemos acceso a Google Play Services y Support Libraries:
En caso de no tener un dispositivo con Android Wear:
Para crear un emulador de Android Wear, se recomienda instalar Intel Hardware Accelerated Execution Manager:
Intel Hardware Accelerated Execution Manage
En la siguiente parte, mostrare como crear un AVD de Android Wear.
Hola Mundo de Wearable Apps (StandAlone Apps)
Vamos a crear y entender nuestra primera aplicación en Android Wear.El ejemplo mas sencillo que podemos tener es un Wearable App (StandAlone App).
Lo primero que debemos hacer es abrir Android Studio y crear un nuevo proyecto, en este caso el nombre de la aplicación es WearApp:
En la siguiente pantalla podriamos seleccionar solo una aplicación para Wear, sin embargo, para publicar en el PlayStore es necesario haber crear la aplicación de Wear junto a la de Phone, por lo que lo crearemos en conjunto. Igual de importante tener como versión minima en Phone 4.3 Jelly Bean o superior.
Lo primero que configuraremos es la aplicación Phone, para ello no es necesario hacer alguna modificación, pero una vez que llegamos a la configuración para Wear es importante señalar que tendremos un Blank Wear Activity con sus respectivos Layouts:
Entender cual es nuestra aplicación para los telefonos y cual la del wearable es sencillo, tendremos separadas ambas por paquetes:
Y a nivel de carpetas, la aplicación para wear conserva la misma jerarquia:
A nivel de codigo, el MainActivity.java de la aplicación en Wear se muestra de la siguiente manera:
Código :
public class MainActivity extends Activity {
private TextView mTextView;
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
final WatchViewStub stub = (WatchViewStub) findViewById(R.id.watch_view_stub);
stub.setOnLayoutInflatedListener(new WatchViewStub.OnLayoutInflatedListener() {
@Override
public void onLayoutInflated(WatchViewStub stub) {
mTextView = (TextView) stub.findViewById(R.id.text);
}
});
}
}
Seguimos tendiendo el mismo ciclo de vida de un Activity, sin embargo, de inmediato debemos "inflar" una vista. ¿Pórque?. Sucede que WatchViewStub es una especie de contenedor que puede ser tanto un Layout Redondo o uno Cuadrado (Los dos tipos de vista que tienen los primeros Android Wear), y por medio de su Listener se muestra el correcto.
Es por eso que en nuestro activity_main.xml solo vemos este Widget, sin embargo se hace referencia a las vistas rectangulares y redondas, estas vistas son un layout independiente, y de hecho, no tienen que ser estrictamente iguales.
Código :
<?xml version="1.0" encoding="utf-8"?> <android.support.wearable.view.WatchViewStub xmlns:android="http://schemas.android.com/apk/res/android" xmlns:app="http://schemas.android.com/apk/res-auto" xmlns:tools="http://schemas.android.com/tools" android:id="@+id/watch_view_stub" android:layout_width="match_parent" android:layout_height="match_parent" app:rectLayout="@layout/rect_activity_main" app:roundLayout="@layout/round_activity_main" tools:context=".MainActivity" tools:deviceIds="wear"> </android.support.wearable.view.WatchViewStub>
Para notar la diferencia, en este ejemplo modifique el round_activity_main.xml agregando una imagen, pero el rect_activity_main.xml lo deje igual (La mayoria de Widgets son compatibles):
rect_activity_main.xml:
Código :
<?xml version="1.0" encoding="utf-8"?> <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" xmlns:tools="http://schemas.android.com/tools" android:layout_width="match_parent" android:layout_height="match_parent" android:orientation="vertical" tools:context=".MainActivity" tools:deviceIds="wear_square"> <TextView android:id="@+id/text" android:layout_width="wrap_content" android:layout_height="wrap_content" android:text="@string/hello_square" /> </LinearLayout>
round_activity_main.xml:
Código :
<?xml version="1.0" encoding="utf-8"?> <RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android" xmlns:tools="http://schemas.android.com/tools" android:layout_width="match_parent" android:layout_height="match_parent" android:background="#333366" tools:context=".MainActivity" tools:deviceIds="wear_round"> <TextView android:id="@+id/text" android:layout_width="wrap_content" android:layout_height="wrap_content" android:text="@string/hello_round" android:layout_alignParentTop="true" android:layout_centerHorizontal="true" android:layout_marginTop="59dp" /> <ImageView android:layout_width="wrap_content" android:layout_height="wrap_content" android:src="@drawable/mejorandopapel" android:id="@+id/imageView" android:layout_below="@+id/text" android:layout_centerHorizontal="true" /> </RelativeLayout>
Lo unico que falta es probar el proyecto, para ello mostrare el ejemplo funcionando sobre un AVD, si tienes un dispositivo real existen dos opciones, depuración USB o Bluetooth. Con USB es de la misma forma que en telefonos, para Bluetooth solo es necesario consultar esta información:
Lo primero que hacemos es iniciar nuestro AVD Manager, donde de primera, nos muestra los dispositivos que hemos creado, en este caso vamos a crear uno nuevo:
Nos dirigimos al apartado de Wear, donde tendremos dos configuraciones, yo creare uno tipo Round:
Lo siguiente es la versión del dispositivo, si recordamos los requerimientos esto debe ser Lollipop, de preferencia x86 para que sea mas rapido:
En Actions, es donde ejecutamos la Maquina Virtual, con el boton de Play:
Esperamos un momento a que inicie:
Antes de correr proyecto, nos aseguramos que vamos a compilar el proyecto Wear:
Y listo, tenemos nuestra primera App para Android Wear:
Y aqui en un dispositivo real:
Ya por ultimo, si ejecutamos el ejemplo en una vista rectangular, se ve de la siguiente manera:
Eso sucede ya que no lo modificamos. Estare muy agradecido si me mandas una captura de tu diseño en cuadraro por twitter (@thespianartist), esto es una señal de que querías aprender algo nuevo y me motiva en crear mas material.
El código esta disponible Github
Nos vemos pronto.
Uriel Ramirez @thespianartist – Developer Advocate Mejorando.la – Platzi
via Cristalab http://ift.tt/1yyKqPc
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.
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.
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 (:
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
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
- 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.
via Cristalab http://ift.tt/11R3RnT
Hosting barato web 
Recent Comments