Archive | Cristalab RSS for this section

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

Enviar comentario

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!

Enviar comentario

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 :shock: , 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 . :cool:

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 :D

Si quieres consultar el código, este es el repositorio: Github del Ejemplo

Enviar comentario

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

Enviar comentario

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:

Android Developers SDK

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:

Bluetooth Debugging

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

Enviar comentario

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.

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