Actualmente las empresas tienen más clara la necesidad de medir sus esfuerzos online, y Google Analytics es sin duda la herramienta más idónea para ello. Conoce en este espacio las tendencias del web analytics, las funciones avanzadas de Google Analytics y cómo sacar mejor provecho de esta gran herramienta.

Durante el evento habrá conferencias magistrales, así como conferencias de acuerdo a tu área de especialización: Negocio y Estrategia, Análisis, Optimización y Aspectos Técnicos

Aprovecha que tenemos 10% de descuento para los primeros 20 lugares que se registren utilizando el siguiente código GAUC_COD909

La rápida distribución de dispositivos móviles, ha puesto el mundo del web de cabeza. Los usuarios ya no ven únicamente contenido web en computadoras de escritorio, sino en smartphones, tabletas y otros dispositivos con un amplio rango de dimensiones. El reto para los diseñadores web es asegurar que sus sitios puedan verse bien, no sólo en una pantalla grande, sino también en una pequeña pantalla de celular y cualquier pantalla de por medio.

Los Media Queries, son una excelente forma de entregar diferentes estilos para diferentes dispositivos, y proveer la mejor experiencia para cada tipo de usuario. Como parte de la especificación CSS3, los Media Queries expanden el rol del atributo media, que controla como se aplican los estilos. Por ejemplo: se ha vuelto una práctica común por años el uso de una hoja de estilos por separado para imprimir sitios web al especificar media = “print”. Los Media Queries, llevan esta idea al siguiente nivel, al permitir a los diseñadores asignar estilos basados en las propiedades de un dispositivo, como el ancho de pantalla, orientación y así sucesivamente.

Las Figuras 1- 3, muestran los Media Queries en acción. De hecho muestran el mismo sitio web, visto en una computadora de escritorio, en una tableta y en un iPod Touch.

Figura 1. Al ser vista en una computadora de escritorio, el sitio tiene un layout de dos columnas.

En la versión de escritorio, la página tiene un ancho fijo y un layout de dos columnas, pero cuando el mismo sitio es visto en una tableta, la barra lateral se desplaza debajo del contenido principal.

<link href="css/phone.css" rel="stylesheet" type="text/css"
media="only screen and (max-width: 400px)" >

Figura 2. El layout cambia a una sola columna para ajustarse a una pantalla más angosta de una tableta.

Al ser visto el sitio en un iPod Touch, el menú se re-acomoda y las imágenes reducen su escala. Los diferentes estilos se aplican dependiendo el dispositivo con el uso de Media Queries.

Figura 3. Los Media Queries definen nuevos estilos al sitio para ajustarse a una pantalla mucho más pequeña.

Este artículo da una visión general de los Media Queries, incluyendo ejemplos que pueden ser de utilidad para el desarrollo de un sitio web.

Nota: Asegurate de ver los videos en Adobe TV: CSS3 Media Queries con Dreamweaver y Como los Media Queries pueden facilitar el diseño para dispositivos móviles y diferentes tipos de pantallas.

Ejemplos de Media Queries

Un ejemplo simple de un Medya Query puede verse así:

<link href="css/phone.css" rel="stylesheet" type="text/css"
media="only screen and (max-width: 400px)" >

En este ejemplo, el Media Query, ha sido agregado a la etiqueta. Como podrás ver más adelante, puedes usar Media Queries con hojas de estilo. El atributo media es dónde reside el Query. Este otro dice:

only screen and (max-width: 400px)

El significado puede ser obvio: aplica esta hoja de estilo sólo a un dispositivo con una ventana de navegador no mayor a 400 pixeles. Puedes observar por el nombre del archivo phone.css que este Query en particular, esta hecho para estilos de un dispositivo móvil. Ahora que has visto un ejemplo, vamos a profundizar en los Media Queries y las características de un dispositivo que se pueden utilizar para controlar como se aplican los estilos.

Soporte y características de Media Queries

Los Media Queries tienen soporto en Internet Explorer 9+, Firefox 3.5+, Safari 3+, Opera 7+, así como en los smartphones más modernos y otros dispositivos móviles. Aunque versiones viejas de IE no soporten los Media Queries, puedes -y deberías- empezar a usarlos ahora. Más adelante se discute como lidiar con versiones viejas de navegadores.

Tabla 1 lista de características de dispositivos que se pueden usar con Media Queries.

Tabla 1. Características de dispositivos para ajustar condiciones en Media Queries.

Las primeras cinco características de la Tabla 1 (width, height, device-width, device-height y orientation) son las más útiles. Puedes agregar un prefijo a la mayoría de las características con min- y max- para indicar un valor mínimo y máximo, como min-with y max-width. La columna Min/Max en la Tabla 1, indica que características se pueden modificar de esta manera.

Ancho, ancho de dispositivo y ventana.

Quizás uno de los aspectos más confusos de los Media Queries, es la diferencia entre width y height y sus valores equivalentes predefinidos por device-. En el caso de computadoras portables y de escritorio, la diferencia es fácil de entender: width y height se refieren al tamaño de la ventana del navegador, mientras que device-width y device-height se refieren a las dimensiones del monitor. No todo mundo corre su navegador a pantalla completa, así que tienes que utilizar width y height.

Los navegadores de dispositivos móviles, ocupan toda la pantalla, así que podrías esperar que width y device-width sean lo mismo. Desafortunadamente no siempre es el caso. La mayoría de los smartphones, incluyendo Android, iPhone y Windows Phone 7, ajustan width a una vista nominal de aproximadamente 1000 pixeles de ancho (en un iPhone y iPod Touch, de 980 pixeles, Windows Phone 7 usa 1024). La Figura 4 muestra como un iPod Touch despliega normalmente la página de ejemplo en las figuras previas.

Figura 4. Por default, los dispositivos modernos, escalan los sitios web para encajar en una ventana hipotética.

Aunque la hoja de estilos este vinculada con la página utilizando Media Queries, para proporcionar diferentes estilos dependiendo de los valores min-width y max-width, el iPod Touch, ignora los estilos y despliega la versión de escritorio por que su ventana se considera de 980 pixeles de ancho.

Para hacerlo más confuso, el iPhone, iPod Touch y iPad, no toman en cuenta la orientación para calcular el ancho, mientras que otros dispositivos si.

Afortunadamente hay una solución simple para esta confusión. La nueva etiqueta de Apple, que ha sido adoptada ampliamente por otros fabricantes de dispositivos móviles, se ha incorporado a la especificación que muy probablemente apruebe la World Wide Web Consortium (W3C). Para asegurar un campo de juego con todos los dispositivos móviles que soporten Media Queries, sólo agrega la siguiente línea de código en la etiquetade cada página:

<meta name="viewport" content="width=device-width, initial-scale=1">

Esto le dice a un dispositivo móvil que trate una ventana al mismo ancho del ancho físico del dispositivo. Es más, le dice al iPhone, iPod Touch y iPad que tome en cuenta la orientación para calcular el ancho. Como resultado, puedes usar width con la seguridad que significa lo que realmente es.

Nota: Muchos dispositivos móviles, particularmente el iPhone 4 y iPad 2, tienen pantallas de alta resolución con una densidad de pixel (resolución) mayor a una computadora de escritorio o una laptop. Esto no afecta como calculas el tamaño en pixeles dentro de los CSS. La especificación CSS, dice: si la densidad de pixel del dispositivo, es muy diferente de una computadora, el navegador, debe re-escalar los valores de los pixeles. Algunos desarrolladores, ahora se refieren a medidas en pixeles como CSS pixels.

Como escribir Media Queries

Para agregar un Media Querie al atributo media, tienes que ajustar una o más condiciones con las características de la Tabla 1. Especificas el valor para una característica y después dos puntos, de la misma forma que una propiedad de CSS. Cada condición esta envuelta en paréntesis y se agrega a la declaración con la palabra and. Por ejemplo:

"media="screen and (min-width: 401px) and (max-width: 600px)"

Los Media Queries son Booleanos: sólo pueden ser verdaderos o falsos. Si la condición es verdadera, se aplica el estilo; si es falsa, será ignorada.

Algunas características media, como color, monochrome y grid, se pueden usar como condiciones sin un valor específico. Por ejemplo, la siguiente línea apunta al color de todos los elementos desplegados.

media="screen and (color)"

Especificaciones alternativas

No existe la palabra clave or para especificar características media alternativas. En cambio, se enlistan alternativas separadas por coma, de esta forma:

media="screen and (min-width: 769px), print and (min-width: 6in)"

Esto se aplica a pantallas más anchas de 769 pixeles o dispositivos de impresión con un ancho de papel menor a 6 pulgadas.

Especificar condiciones negativas

Para especificar condiciones negativas, puedes preceder la declaración media con la palabra clave “not” de esta forma:

media="not screen and (monochrome)"

Puedes usar “not” frente a una condición individual. La palabra clave debe ir al inicio de una declaración para negarla por completo. El ejemplo precedente aplica a todos los dispositivos excepto de pantallas monocromáticas.

Esconder Media Queries de navegadores viejos

La especificación de Media Queries también provee la palabra only, que pretende esconder los Media Queries de navegadores viejos. Al igual que not, la palabra clave debe ir al inicio de la declaración. Por ejemplo:

media="only screen and (min-width: 401px) and (max-width: 600px)"

Los navegadores que no reconocen Media Queries, esperan una lista separada por comas de media types, y la especificación dice que se debería truncar cada valor, inmediatamente antes del primer caracter no alfanumérico que no sea un guión. Así que un navegador viejo debería interpretar el ejemplo precedente de esta forma:

media="only"

Como no existe ningún media type only, el estilo es ignorado. De igual manera, un navegador viejo, deberá interpretar lo siguiente como media=”screen”:

media="screen and (min-width: 401px) and (max-width: 600px)"

En otras palabras, deberá aplicar las reglas del estilo a todos los dispositivos, incluso aunque no sepa que son los Media Queries. Desafortunadamente, IE 6-8 falla al implementar la especificación correctamente. En lugar de aplicar los estilos a todos los dispositivos, ignora por completo la hoja de estilos.

A pesar de este comportamiento, aún se recomienda agregar el prefijo only a los Media Queries, si deseas esconder todos los estilos de otros navegadores menos comunes.

Tratando con versiones más viejas de Internet Explorer

La falta de soporte para Media Queries en IE 6 hasta IE 8 no es un problema. Simplemente crea un set básico de estilos para todos los navegadores que no usen Media Queries, y utiliza Media Queries para ofrecer una mejor experiencia para visitantes con navegadores más modernos.

Alternativamente, puedes usar una condicional de comentario para Internet Explorer y una serie de reglas para versiones viejas de IE, como estas:

<!--[if lt IE 9 & !IEMobile]>
  <link href="iestyles.css" rel="stylesheet" type="text/css">
<![endif]-->

Uso de Media Queries con @import y @media

Adicionalmente a los Media Queries en las etiquetas , al vincular una hoja de estilos externa, se pueden usar con @import y @media. La sintaxis básica es la misma. Por ejemplo, lo siguiente importa una hoja d estilo y aplica los estilos a dispositivos con una pantalla no mayor a 400 pixeles de ancho.

@import url("phone.css") only screen and (max-width:400px);

Los Media Queries, se pueden usar dentro de una hoja de estilos como esta:

@media only screen and (max-width:400px) {
#navbar {
float: none;
width: 400px;
}
}

Prueba de Media Queries

Probar tu código es importante. Para tabletas y smartphones se complican las pruebas ya que idealmente deberías tener una serie dispositivos a tu disposición. Por suerte, puedes probar la mayoría de los Queries sin poseer un dispositivo específico. Siempre es mejor tener algo real enfrente, sin embargo, para el propósito de este artículo, con el uso de un navegador bastará para entender como funcionan los Queries.

El ZIP que acompaña este artículo, contiene un archivo de ejemplo (mediaqueries.html) con tres diferentes diseños vinculados. Puedes utilizar el ejemplo para continuar con la siguiente prueba de tamaños. Con la ventana del navegador completamente abierta, se puede ver el diseño básico del sitio (ver Figura 1). Haz más pequeña la ventana del navegador y puedes observar los cambios mientras pasas por las dimensiones de diferentes dispositivos. Mientras recorres las dimensiones específicas en el código, el estilo de cambiar al de una tableta (Figura 2) o un celular (Figura 3). La imagen de encabezado se hace pequeña para tabletas por ejemplo; los siguientes módulos toman un flujo diferente. Para el estilo de celular, la imagen central desaparece, es sustituida por un menú más grande de botones verticales.

El navegador verifica los Media Queries cada vez que cambia el tamaño de la ventana del navegador o cuando volteas el celular a de una orientación vertical a una horizontal.

Media Queries en Dreamweaver CS5.5

Dreamweaver CS5.5 mejoró el soporte para Media Queries, desde que Adobe introdujo la actualización 11.0.3. El nuevo cuadro de diálogo para Media Queries, te ayuda a mantener tus Media Queries para una sola página o para un sitio completo (ver Figura 5).

Puedes acceder al cuadro de diálogo Media Queries de cualquiera de los siguientes lugares:

• Modify > Media Queries
• Panel Multiscreen Preview > Boton Media Queries
• Menú dropdown Multiscreen > Media Queries
• Opciones del menú del panel CSS Styles
• Menú contextual del panel CSS Styles

Figura 5. Cuadro de diálogo Media Queries en Dreamweaver CS5.5

Con el uso de este cuadro de diálogo podrás:

• Crear múltiples Media Queries.
• Vincular Media Queries a la página actual, que añade vínculos a uno o varios archivos CSS.
• Crear un archivo de ancho de sitio de Media Queries, que vincule a un solo y centralizado archivo CSS que importe otros archivos CSS específicos para cada dispositivo.

En el uso de un archivo de ancho de sitio de Media Queries, puedes vincular archivos existentes CSS o crear nuevos desde el mismo cuadro de diálogo. Incluso puedes crear comentarios arriba del query con lo que quieras agregar como descripción.

Adicionalmente, puedes escoger agregar la etiquetaal documento, que forze al dispositivo reportar sus dimensiones actuales, en lugar del tamaño del valor nominal del viewport. Seleccionar esta opción ayuda a prevenir escalas no deseadas por malos reportes de tamaño.

Nota: Por ahora, el cuadro de diálogo de Media Queries sólo lee y escribe Queries con al menos un valor min-width y max-width. El cuadro de diálogo sólo edita los valores min- y max-. Puedes editar manualmente otros parámetros, pero min-width y max-width son los valores más comunes enfocados a dispositivos.

Ajustes predeterminados y definición de un sitio

El cuadro de diálogo Media Queries incluso provee una opción de presets en la parte inferior del área de lista. Selecciona estos presets y Dreamweaver crea de manera automática:

• Media Queries para una tableta, celular y computadoras de escritorio.
• min-width y max-width con valores iniciales comunes.

El botón de Default Presets provee una forma rápida de iniciar con Media Queries.

Otra manera conveniente de gestionar un archivo de ancho de sitio, es a través del cuadro de diálogo Site Setup. Ahora existe un campo llamado Site-wide Media Query File, en Advanced Settings > Local Info, que especifica el archivo de ancho de sitio. El archivo listado aquí, aparece como la opción cada vez que abres el cuadro de diálogo de Meida Queries. Para un nuevo archivo (o existente) todo lo que tienes que hacer es seleccionar esa opción para aplicar el archivo de ancho Media Query a la página actual.

Nota: Cambiar este archivo, no actualizará de manera automática todos los archivos del sitio.

El cuadro de diálogo Media Queries, ofrece una gran forma de simplificar la creación y gestión de tus Media Queries.

Media Queries son la mejor forma de focalizar dispositivos con diferentes estilos. Como se muestra en la parte superior, no se usan únicamente para smartphones, también se pueden usar para controlar el estilo de cualquier pantalla.

Nota: Esta es una versión actualizada y expandida del artículo original escrito por Donald Booth.

En esta nueva versión Edge introduce varias nuevas características enfocadas a mejorar la animación y optimización de recursos. La línea de tiempo ha recibido un comportamiento más natural así mismo que ya podemos encontrar herramientas de clipping y transformación tipo on-stage, y algunas opciones de publicación que para incluir soporte a navegadores web antiguos así como código optimizado.

Así que no esperes más para descargar esta última versión y comenzar a experimentar con una herramienta que promete bastante.

Se busca que Shadow se actualice de forma regular para estar a la par de los estándares web, actualizaciones de navegadores web y nuevos dispositivos móviles al mismo tiempo que irán incorporando características de la retroalimentación que reciban de los usuarios.

El Toolkit de CreateJS para Flash Professional permitirá a los diseñadores llevar sus gráficos y animaciones a un mundo de browsers que soportan HTML5 (Chrome, Safari, Firefox, etc.) mediante el uso de una herramienta enfocada a ese trabajo como es Flash. Los elementos se exportan de una forma elegante y el código resultante de dicha conversión en Javascript generado mediante CreateJS, un framework de código abierto que seguramente dará mucho de que hablar próximamente ya que incluye librerías para dar soporte a gráficos, animación, sonido y precargas.

Unos cuantos avisos: Este trabajo esta en progreso. Mientras discutimos con lo ancho de la comunidad, haremos algunos cambios. La sintaxis usada en este artículo, refleja la sintaxis propuesta para los shaders CSS, sin embargo, puede evolucionar mientras continua la discusión entre la W3C FX Task Force y el ancho de la comunidad. Acorde a una práctica común, todas las nuevas propiedades propuestas tendrán el prefijo -webkit- en nuestro prototipo WebKit. A favor de la simplicidad, he omitido este prefijo en el resto del artículo.

Efectos más sofisticados como relieves mostrado en la Figura 1, serán posibles.

Figura 1. Filter Effects aplicados a contenido SVG, tomado del sitio svg-wow.org

Los avances en HTML5 y CSS (por ejemplo: transiciones, animaciones, transformaciones, sombras en textos y cajas, degradados, SVG )han mejorado la interactividad y riqueza del HTML. Los filtros SVG, ahora son Filter Effects 1.0 disponibles en CSS y HTML, adicionalmente a SVG, los cuales traeran efectos como escala de grises, tono sepia, o hue-rotate a todo contenido web.

La propuesta de Adobe CSS shaders fue traída por la W3C FX task force. Los shaders CSS definen el mecanismo de extensión de un filtro y proveen fácilmente efectos visuales animados a cualquier contenido HTML5. Trabajan particularmente bien con animaciones CSS y transiciones CSS.

Los siguientes videos muestran ejemplos de shaders CSS en acción sobre contenido HTML.

Demo Flipbook CSS shaders

Desdoblamiento de Mapa CSS shaders

Demo Twitter Feed CSS shaders

Filter Effects 1.0

Para entender los shaders CSS, es necesario tener un entendimiento básico de efectos de filtro predeterminados. El siguiente demo muestra algunos ejemplos simples de efectos de filtros: El usuario obtiene una una disolvencia de color a una simple escala de grises en el estado hover.

Demo Escala de Grises

Este es el código para el efecto escala de grises.

<html>
  <head> 
  ... 
  <style>
  #shaded {
  filter: grayscale(1);
  transition: filter ease-in 0.3s;
  }
#shaded:hover {
  filter: grayscale(0);
  }
  </style>
  </head>
<body>
  <div id="shaded">
  <div id="multi-col">
  <h2>The Creative Web</h2>
 <p>Lorem ipsum dolor ... </p>
  <img id="png-img" src="planes.jpg"/>
 <p>Mauris at ... </p>
  <img id="svg-img" src="picture.svg" />
 
  <p>Morbi congue ....</p>
  <img id="css3-img" src="html5_css3_styling.svg" />
 
  </div>
  </div>
  </body>
  </html>

El uso de efectos de filtro es muy directo: La propiedad filter, define el filtro (o cadena de filtros) que serán aplicados. Como podrás ver, también es muy fácil de integrar con transiciones CSS. La propiedad filter puede ser animada.

En el ejemplo la función grasycale () es animada gradualmente para disolverse por el parametro amount, en la función del filtro, es animado de 1 (escala de grises al 100%) a 0 (0% escala de grises) cuando el usuario se encuentra sobre el objeto.

El borrador de la especificación W3C Filter Effects 1.0 define dos cosas:

Una sintaxis general para definir un filtro al ensamblar filtros primitivos en un gráfico.

Una propiedad CSS filter, que puede hacer referencia a una definición de filtro o usar más funciones de filtro.

La propiedad filter puede usar un número predeterminado de funciones: blur, drop-shadow, gamma, grayscale, hue-rotate, invert, opacity, saturate, sepia y sharpen. La Figura 2 ejemplifica cada una:

1. blur (5,5)
2. drop-shadow(10,5,5)
3. hue-rotate(328deg)
4. saturate(5)
5. invert(1)
6. grayscale(1)
7. opacity(0.5)
8. gamma(1.1,3.6,0)
9. sepia(0.5)

Figura 2. Funciones de Efectos de Filtro

Lo mejor de los Efectos de Filtro, es la simplicidad de la sintaxis y la integración con animaciones CSS y transiciones CSS.

Sin embargo, algunas cosas son más difíciles. Por ejemplo, ¿qué pasa si deseas convertir sólo una porción del objeto a escala de grises? ¿qué pasa si quieres realizar la transición de otra manera, por ejemplo, como un efecto wipe sobre el elemento? ó ¿qué pasa si quieres un Efecto de Filtro que no esta entre el set predeterminado de funciones de filtro el el set de filtros primitivos predeterminados? Aquí es donde los shaders CSS entran.

La propuesta de shaders CSS, ofrece agregar un custom() a la función de filtro de Efectos de Filtro que integran filtros predeterminados, animaciones CSS y transiciones CSS. Los shaders CSS, proveen la flexibilidad y expresividad necesarias para crear efectos de manera arbitraria, desde algo simple hasta lo más complejo.

Efectos de Filtro personalizados con shaders CSS

Comenzare con un ejemplo. El efecto mostrado arriba (disolvencia de escala de grises a color)es bueno, pero se puede mejorar. El siguiente video muestra un efecto más sofisticado: mientras ocurre la transición de escala de grises a color, el contenido se deforma por un momento y simultáneamente, ocurre un color-swipe sobre el contenido de abajo hacia arriba.

Demo de shaders CSS.

Este demo utiliza un vertex shader para el efecto de distorción y un pixel shader para el efecto swipe de color. Ambos están referenciados por la función filter custom() que también lleva los parámetros para los shaders, así como algunas opciones de configuración. Este es el código:

 <html>
  <head> 
  ... 
  <style>
  #shaded {
  filter: custom(url('wobble.vs')        /* wobble effect */
  url('color-swipe.fs'), /* swipe effect  */
  40 40,                 /* mesh lines/cols */
  amplitude 60,          /* wobble strength */
  amount 0.0);           /* effect amount */
  transition: filter ease-in-out 2s;
  ...;
  }
#shaded:hover {
  filter: custom(url('wobble.vs') 
  url('color-swipe.fs'), 
  40 40, 
  amplitude 60, 
  amount 1.0);
  }
  </style>
  </head>
<body>
  <div id="shaded">
  <div id="multi-col">
  <h2>The Creative Web</h2>
  <!-- Same as previous example -->
  </div>
  </div>
  </body>
  </html>

Pueden ver la similitud del código con el ejemplo anterior en escala de grises. Para otros Efectos de Filtro, usamos la propiedad filter para definir el efecto. La diferencia radica en lugar de usar una de las funciones predeterminadas de filter, usamos la función custom() y referenciamos los dos shaders. Las especificidades de los shaders serán discutidas más adelante. Por el momento, es importante entender que cada shader, provee un efecto específico y expone parámetros que pueden ser animados vía CSS.

En este ejemplo, el filtro personalizado utiliza un wobble.vs vertex shader (para la distorción) y un fragmento del shader color-swipe.fs para el barrido de escala de grises a color.

¿Qué son los shaders?

Los shaders son comunes en gráficos 3D. Son regularmente, pequeños programas que procesan los vértices de geometría 3D (vertex shaders) y el color de los pixeles (fragment shaders).

Por ejemplo, un vertex shader puede crear un efecto de una bandera ondeandose sobre una superficie, ó un efecto wobble (distorción) como el ejemplo anterior. Un fragment shader (también llamado pixel shader) puede computar de manera arbitraria el color de un pixel. Los shaders CSS utilizan el poder de los programas acelerados por hardware.

¿Cómo funcionan los shaders CSS?

Con los shaders CSS, puedes convertir tus objetos SVG o HTML en una malla con vértices. Esto se ilustra en la Figura 3, paso por paso:  1. La malla se procesa por un vertex shader(paso 2) lo que hace posible cualquier tipo de distorsión en un espacio 3D. En el paso 3, la malla se renderea o rasteriza en pixeles con los colores del fragment shader.

Figura 3. Modelo del proceso de los shaders CSS

Como autores, pueden controlar la granularidad de la malla y pueden especificar parámetros que controlen los shaders.

En el ejemplo, el elemento con el id shaded tiene sus propiedades filter con los siguientes valores:

custom(url('wobble.vs')        /* wobble effect */
url('color-swipe.fs'), /* swipe effect  */
40 40,                 /* mesh lines/cols */
amplitude 60,          /* wobble strength */
amount 0.0);           /* effect amount */

Los shaders wobble.vs y color-swipe.fs fueron programados para que, cuando el parámetro amount sea 0, no hay wobble y el pixel shader aplica de manera uniforme la escala de grises al elemento.

Cuando el usuario esta sobre el elemento con el shader, la propiedad filter es:

custom(url('wobble.vs') 
url('color-swipe.fs'), 
40 40, 
amplitude 60,
amount 1)

Recuerden que el significado del parámetro es un shader específico. En este ejemplo, el autor del shader ha diseñado que 0.5 sea el valor máximo del efecto wobble y regrese a un valor fijo en 1.0. El shader color-swipe utiliza valores entre 0.0 y 1.0 esto genera un barrido de color de abajo hacia arriba con un efecto shine. El efecto shine esta hecho agregando blanco al valor de los pixeles ubicados en la división horizontal del swipe. Ver el video anterior es la mejor manera de entender el efecto.

Así como el Efecto de Filtro de escala de grises anterior, la integración con transiciones CSS facilita el ajuste del efecto en movimiento y se hace de la misma forma, usando la propiedad transition.

Escribiendo Shaders

En la práctica, parece algo común que la gente usará efectos personalizados a través de shaders que expondrán facilmente parámetros configurados, como en el ejemplo anterior.

Escribir shaders, mientras se obtiene alguna práctica no es tan difícil. Incluso, y esto es un secreto a voces, es muy divertido generarlos

Los shaders se escriben en el lenguaje Shading OpenGL ES, el mismo lenguaje usado por shaders WebGL. Aquí esta el ejemplo del vertex shader que genera el efecto wobble expuesto anteriormente

Para aquellos que no estén familiarizados con shaders, las siguientes definiciones les ayudarán a leer los ejemplos

• Vertex: Es una coordenada en la geometría procesada por el shader.
• Texture: Imagen de tipo raster. Los shaders CSS, convierten el render de un elemento en textura y es procesada por el vértice y los fragment shaders.
• Attributes: Parámetros por vértice, asignados al vertex shader.
• Projection Matrix: Matriz que convierte las coordenadas del rango normalizado de los vértices ([-.05,+.05] sobre cada eje) al valor actual del sistema de coordenadas de la ventana actual. Se usa generalmente en vertex shader.

precision mediump float; /* required */
// ================= Per-vertex attributes =================== //
  attribute vec3 a_position; /* The vertex's coordinates */
  attribute vec2 a_texCoord; /* The vertext's texture coordinate */
// Uniform parameters are available to shaders and have the 
  // same value for all vertex or pixel.
  uniform mat4 u_projectionMatrix; /* The projection matrix */
// ================ Shader parameters ======================== //
  uniform float amplitude;
  uniform float amount;
  // ============== End shader parameters ====================== //
 
  const float rotate = 20.0; /* could be made a uniform   */
  /* to allow control form CSS */
  const float PI = 3.14...;
  varying vec2 v_texCoord;
 
  mat4 rotateX(float f) {...}
  mat4 rotateY(float f) {...}
  mat4 rotateZ(float f) {...}
  void main()
  { 
  v_texCoord = a_texCoord.xy;
  vec4 pos = vec4(a_position, 1.0);
 
  float r = 1.0 - abs((amount - 0.5) / 0.5);
  float a = r * rotate * PI / 180.0;
  mat4 rotX = rotateX(a);
  mat4 rotY = rotateY(a / 4.0);
  mat4 rotZ = rotateZ(a / 8.0);
 
  float dx = 0.01 * cos(3.0 * PI * (pos.x + amount)) * r;
  float dy = 0.01 * cos(3.0 * PI * (pos.y + amount)) * r;
  float dz = 0.1 * cos(3.0 * PI * (pos.x + pos.y + amount)) * r;
  pos.x += dx;
  pos.y += dy;
  pos.z += dz;
 
  gl_Position = u_projectionMatrix * rotZ * rotY * rotX * pos;
  }

Y este el shader color-swipe del ejemplo:

precision mediump float; /* required */
// The 'original' content rendering in a texture.
  uniform sampler2D s_texture;
// ================ Shader parameters ======================== //
  uniform float amplitude; /* unused in this fragment shader */
  uniform float amount;
  // ============== End shader parameters ====================== //
varying vec2 v_texCoord;
// The desired 'color swipe' color.
  const vec4 swipeColor = vec4(1.0, 1.0, 1.0, 1.0); 
vec4 grayscale(vec4 color) {
  ...; 
  return gray;
  }
void main() {
  vec4 color = texture2D(s_texture, v_texCoord);
  vec4 gray = grayscale(color);
  vec2 pos = v_texCoord;
 float p = 1.0 - pos.y; /* progress from bottom to top */
 
  vec4 sc = swipeColor * color.a;
  float threshold = amount * 1.2;
  if (p < threshold) {
  float a = min(abs(threshold - p) / 0.2, 1.0); 
  gl_FragColor = mix(sc, color, a);
  } else {
  float a = min(abs(threshold - p) / 0.005, 1.0);
  gl_FragColor = mix(sc, gray, a);
  }
  }

Existen muy buenos recursos en la Web, para aprender como escribir shaders o algunas bibliotecas que contienen excelentes sets de shaders (hay algunas referencias al final).

Lenguajes para generar shaders como el lenguaje Shading OpenGL ES, están diseñados para programar efectos visuales de manera fácil. Los shaders CSS ofrecen una forma de amarrar expresividad en la sintaxis CSS y facilitar el uso y animación de estos efectos.

Comparación con WebGL

WebGL, provee una implementación a los elementos canvas en HTML5. WebGL ofrece un contexto 3D para los canvas y, dentro de este contexto, los pixel shaders están disponibles (también los vertex shaders y todas las características 3D que ofrece WebGL). WebGL opera dentro de los límites  del elemento canvas para el cual provee un contexto.

En contraste, los shaders CSS, proveen una manera arbitraria de aplicar shaders a contenido Web.

A dónde ir a partir de aqui

Adobe esta llevando los shaders CSS a la W3C como parte del FX Task Force y nuestro objetivo es empezar a contribuir para el código de WebKit, en cuanto el trabajo sea aceptado por la W3C los desarrolladores web podrán empezar a disfrutar de este nuevo y poderoso set de Efectos de Filtro.

Mientras tanto, pueden ver los siguientes recursos para aprender más de animaciones CSS y efectos:

• FX Task Force
• Animaciones CSS
• Transiciones CSS
• Filter Effects 1.0
• CSS 2D Transforms
• CSS 3D Transforms
• OpenGL EL 2.0
• OpenGL ES Shading Laguage
• WebGL
• WebGL Wiki
• GLFX.js

La versión original de este artículo pueden encontrarla Adobe Devnet traducido aquí bajo licencia Creative Commons por Juan de Dios León, cualquier comentario pueden hacerlo en este mismo post o en @juandediosleon

Pero lo que sucede cuando hablamos de un juego 2D estilo Angry Birds es que por defecto este tipo de aplicaciones y/o juegos no se benefician directamente del API de Stage3D, ese es el propósito de una tecnología como Starling Framework.

Starling Framework es una librería escrita totalmente en ActionScript 3 que emula la arquitectura del display list de Flash pero todo el contenido es rendereado directamente por el GPU con el respectivo incremento en desempeño de nuestras aplicaciones.

El API es bastante similar a la usada de forma nativa por lo que la curva de aprendizaje será mínima, solo hay que intercambiar las clases de Flash por sus equivalentes dentro de Starling para comenzar a gozar de los beneficios, además de que Starling soporta algunas nuevas características tales como fuentes bitmap, sprite sheets y efectos de partículas.

Sin lugar a dudas una interesante tecnología que valdrá la pena considerar como lo hizo el equipo de Rovio (responsables del desarrollo de Angry Birds) y que además es de código abierto.

Este tutorial muestra como usar un par de scripts para hacer que funcione tu prototipo de Fireworks para el iPhone. El método descrito en este tutorial es más útil para diseño de aplicaciones para iPhone que para el diseño web en móviles.

La idea detrás del método

Seguramente has intentado abrir un prototipo HTML creado en Fireworks en tu iPhone. No se ve nada bien. Hay márgenes que no quieres, el zoom no se puede controlar, la carga entre páginas toma demasiado tiempo. Por supuesto, puedes pedirle a un desarrollador que te ayude, pero hay otra alternativa: ¡construir tu prototipo en Fireworks!

El método mostrado en este tutorial, combina Fireworks con un poco de jQuery y PHP, para darte no sólo un prototipo que puedas ver, sino interactuar directamente en tu iPhone como si fuera una aplicación real(ver figura 1).

Figura 1. Concepto de como llevar tu prototipo de Fireworks a un iPhone.

Antes de que aprendas como ajustar tu prototipo de Fireworks, es importante entender los principios de este concepto, que puedes lograr y por que.

El utilizar esta técnica para construir tu prototipo de Fireworks para iPhone te da una serie de ventajas, para que los usuarios potenciales de tu aplicación obtengan la mejor previsualización de como va a funcionar. Al utilizar Fireworks, tu prototipo tiene los siguientes beneficios:

• Dar clic en las diferentes pantallas en la forma en la que normalmente lo harías con un mockup de Fireworks.
• Hacer uso de la pantalla completa (sin los botones de Safari)
• Exportar directamente de Fireworks sin la necesidad de cambiar CSS o HTML después.
• Abrir la aplicación directamente en la pantalla principal del iPhone.
• Desabilitar el zoom.
• Enviar hipervínculos a cada iPhone sin ser un desarrollador oficial de iPhone.

Por el otro lado, no quieres aprender técnicas avanzadas de programación o poner a tus usuarios complicaciones innecesarias para ver tu prototipo. Estos son algunos puntos dolorosos que este método previene:

• Aprender Objective-C o depender de alguien que si domine el lenguaje.
• Hacer demasiados pasos antes de poder ver las pantallas en el dispositivo.
• Esperar a que cargue cada pantalla cada vez que das clic en un botón.

Demostración del método

La mejor manera de entender esta idea es viendo un pequeño demo.

1. Asegurate de que tu iPhone esta en una red veloz (Wi-Fi o 3G).
2. Abre este link en Safari dentro de tu iPhone http://www.unitid.nl/iprototype/demo (generalmente mando los links a mi mail para abrirlos en mi iPhone)
3. Sigue las instrucciones.

Este demo esta hecho con FIreworks, con la ayuda de PHP y jQuery. jQuery es una biblioteca de JavaScript; PHP es un lenguaje para construir sitios dinámicos. Se intentó hacer esto con otras herramientas para hacer prototipos, pero ninguna fue tan fácil de usar.

Nota: Puedes aprender más de PHP en el artículo, Ajustando un ambiente de desarrollo PHP para Dreamweaver. Descubre más de jQuery en el artículo, JavaScript para diseñadores web.

Como funciona

¿Cómo puedes crear un prototipo como este? Esta es una vista general de los pasos necesarios. Explicare más a detalle después:
¿Cómo puedes crear un prototipo como este? Esta es una vista general de los pasos necesarios. Explicare más a detalle después:

1. Descarga el archivo .zip para este artículo, el cual contiene algunas carpetas con archivos PHP y jQuery.
2. Crea las pantallas en Fireworks como lo harías normalmente. Empieza con un área de trabajo de 320 x 480 y llama la primera página index (sin capitales, por favor).
3. Utiliza hotspots en lugar de slices para crear vínculos a las diferentes páginas.
4. Exporta el mokup a HTML y las imágenes como lo harías normalmente para probar el prototipo en un navegador.
5. Una vez satisfecho con la funcionalidad en tu navegador, exporta el archivo en el formato de la biblioteca de Dreamweaver (.lbi) a la carpeta Library.
6. Sube el set completo de archivos de tu prototipo a un servidor que pueda ejecutar PHP.
7. Con tu iPhone visita la página index de tu prototipo: http://www.yourwebsite.com/path_to_iprototype/iprototype

Pero, ¿cómo funciona realmente?

Tras bambalinas, jQuery y PHP trabajan juntos para proveer una experiencia fluida. Aquí se muestra como (si no estas interesado, puedes brincar esta sección, Crear el .png en Fireworks):

1. Cuando abres la URL del prototipo, jQuery verificará la altura de la pantalla y así sabrá si estas en un iPhone y si agregaste el vínculo al home screen.
2. Si no lo has hecho(si la altura de la pantalla es menor de 480 pixeles), manda una alerta para que agregues el vínculo al tu home screen.
3. Si entras al sitio desde tu home screen, la altura de tu ventana es de 480 pixeles, así que jQuery obtiene el contenido del mockup usando PHP.
4. Todos los archivos .lbi se cargan y son cambiados un poco por PHP para proveer las rutas adecuadas a las imágenes, remover tags innecesarias y cambiar los vínculos para que jQuery pueda trabajar con ellos. Incluso las etiquetas envuelven a las imágenes y el id del div se ajusta al nombre del archivo.
5. jQuery esconde todos los divs que encuentra en el HTML pero hace la página llamada index visible. Por eso necesitas esta página en tu archivo .png, de otra manera tu prototipo empezaría en blanco.
6. Dar clic al mapa de una imagen (que fue creado como un hotspot) muestra el div al cual esta vinculado el URL.

Echale un vistazo al código fuente de los archivos para más detalles. El código contiene alguna documentación importante. Seguramente la mayoría de ustedes son diseñadores que no están muy interesados en el código, como yo.

Ajustes a tu prototipo

Para ajustar tu prototipo, tienes que descargar el archivo iprototype.zip generado para este artículo, crea un archivo PNG en Fireworks y exporta tus páginas como elementos de una biblioteca. No iré más a detalle en como usar Fireworks, pero resaltare algunos puntos importantes para que funcione el prototipo en un iPhone.

Si eres nuevo usando Fireworks, puedes encontrar más tutoriales de como usar páginas y hotspots en el Fireworks Developer Center. Por ejemplo, me viene a la mente Prototipos interactivos con HTML, CSS y JavaScript con Fireworks y Dreamweaver CS4.

Descarga los archivos

Descarga el archivo ZIP y extrae su contenido en tu disco duro. Estos archivos los tienes que subir a un servidor, así que asegurate de encontrarlos en tu cliente FTP o ponlos directamente en el servidor. Esto es lo que necesitas saber sobre los archivos en la carpeta iprototype. (ver Figura 2).
index.html: Archivo que abre el navegador. El archivo contiene algunas etiquetas meta, CSS, JavaScript y el call al archivo PHP.

• Carpeta includes: Carpeta con algunos archivos necesarios para que funcione el prototipo.
• additional.css: Este archivo inserta CSS adicional al HTML por si abres el prototipo en un navegador convencional como Firefox o Internet Explorer.
• functions.php: Archivo que lee y modifica los archivos exportados de Fireworks.
• icon.png: El icono que se ve en el home screen de tu iPhone (puedes diseñar uno por tu cuenta)
• Carpeta img: Dos imágenes que son llamadas por el archivo additional.css para su uso en navegadores convencionales.
• js > jquery.js: La biblioteca de JavaScript.
• Carpeta Library: En esta carpeta exportas tus archivos de Fireworks. (Puedes utilizar estos archivos de prueba, pero deberás borrarlos antes de exportar los de tu prototipo.)
• source > proto.png: Es el archivo fuente del prototipo.

Figura 2. Archivos dentro del ZIP

Creación del PNG en FIreworks

Una buena forma para iniciar es descargar los elementos de la interfaz gráfica del iPhone de Metaspark (¡gracias por esto chicos!) Abre Fireworks y crea un nuevo archivo, ajusta el tamaño del documento a 320 x 480 y nombra la primera página index. Esto es importante, de otra forma, verás una pantalla en blanco cuando abras la página en tu iPhone. Incluso puedes iniciar con el archivo fuente PNG que viene en como demostración, lo puedes encontrar en la carpeta source dentro del ZIP. Si deseas un scroll has la página mayor a 480 pixeles.

Inserción de Páginas y Hotspots

En Fireworks puedes hacer el uso de páginas. Cada página puede tener sus propios gráficos, botones y ajustes. Para poder navegar en diferentes pantallas, necesitas crear más de una página y vincularlas usando hotspots.

La manera más fácil de crear un hotspot es dar clic derecho en el elemento que quieras que funcione como botón y seleccionar Insert Hotspot. En el panel Properties, ingresa un nombre para el botón (ver Figura 3). Puedes hacerlo de manera manual o a través del menú pop-up. Si creas un vínculo a una página que no existe, verás un color negro de fondo (o el color que hayas puesto de fondo) en la pantalla y tendrás que cargar nuevamente el prototipo. Asegurate de que los vínculos sean correctos. Puedes exportar el prototipo como HTML e imágenes para revisar todo en tu navegador favorito.

Figura 3. Creación de hotspots.

Nota: Para aprender las mejores prácticas de como estructurar un documento de Fireworks, organizar objetos y reutilizar elementos comunes, puedes leer Uso de páginas, estados y layers en Fireworks CS4.

Si deseas ver el prototipo en un navegador convencional, tienes que agregar una página llamada homescreen en el archivo PNG. En esta página, coloca un screenshot de tu iPhone con el icono de la aplicación en el home screen. Genera un hotspot en el icono y has un vínculo con la página index.htm. Esta página no se mostrara en el prototipo cuando lo veas en el iPhone.

Exportar, subir y ver el prototipo.

Cuando este completo tu prototipo y no haya vínculos inservibles, debes exportar todas las páginas como elementos de una biblioteca de Dreamweaver en la carpeta Library. Sube los archivos a un servidor que ejecute PHP, y después abre el vínculo en tu iPhone.

Exportar a .lbi

En Fireworks, selecciona File / Export. Selecciona la carpeta Library y exporta el archivo como elementos de una biblioteca de Dreamwever. Las bibliotecas de Dreamweaver, son pequeñas piezas de código HTML que generalmente insertas en sitios web y que se actualizan automaticamente. Al exportar, no ingreses un nombre de archivo, los archivos serán nombrados acorde a tus páginas. Selecciona None en Slices; la opción Put images in Subfolder; deselecciona la opción Current Frame Only y da clic en Export (ver Figura 4).

Subir y ver el prototipo en tu iPhone

Todos los archivos en la carpeta iprototype deben estar en un servidor que pueda ejecutar PHP. Generalmente uso un cliente FTP en Dreamweaver para hacer esto. Desde tu iPhone navega a la URL con terminación /iprototype. Sigue las instrucciones en la pantalla (Figura 5). Puedes cambiar este texto si gustas. Lo puedes encontrar en el archivo index.html. Si abres la URL en un navegador convencional, asegurate de tener una página llamada “homescreen” incluida en tus páginas.

Cosas que debes saber

Cada vez que abres el prototipo con el icono en tu home screen, las páginas primero deben cargar, antes de que puedas navegar en ellas. Incluso, la última página que verás al salir del prototipo se mostrará primero, pero desaparecerá cuando el resto de las páginas se hayan cargado. Como este método no soporta caching, tendrás que tomar esto en cuenta al mandar a tus clientes la URL o en pruebas de usabilidad.

Este método esta probado con prototipos de hasta 30 páginas, sin embargo pueden ocurrir problemas si tu prototipo tiene muchas más. Tendrás que trabajar un poco con el código o dividir la aplicación en dos (sólo con propósito de prueba, por supuesto).

A donde ir a partir de aqui

Si ya usas Fireworks y estas en el negocio del desarrollo o diseño de aplicaciones para iPhone, te va a gustar esta forma de ver tu diseño en el iPhone; es rápida, tamaño exacto en pixeles y es interactiva. No necesitas software adicional, cables o conocimiento de otros lenguajes de programación. Por supuesto, este método también tiene sus restricciones, pero es genial para mostrar a otros tu diseño y hacer algunas pruebas con el.

Seguiremos trabajando en el código para agregar más funcionalidad. Hemos notado que muchos diseñadores tienen dificultades para hacer prototipos para dispositivos móviles, no únicamente con el iPhone. Visita el sitio UNITiD (la mayor parte esta en alemán pero algunas cosas están en inglés ).

También puedes ver el siguiente video tutorial donde se muestra como se creo el demo.

Si eres nuevo en el diseño de aplicaciones para iPhone, recomiendo ver iPhone Human Interface Guidelines de Apple.

• Escribes menos código, lo que en JavaScript te tomaría cerca de 20 líneas, con jQuery puedes lograrlo en 2 o 3 líneas.
• El mismo código corre en todos los navegadores, no es necesario escribir un código especial para Internet Explorer
• Usa selectores CSS, aprovechando el  conocimiento  que la mayoría de los diseñadores web tiene.

Dreamweaver CS5.5 ahora tiene soporte completo con sugerencias de código (code hinting) para jQuery, haciendo que su uso sea aun más fácil.

Este tutorial es una introducción a los conceptos básicos de jQuery

Nota: En este tutorial se asume que haces uso de Dreamweaver CS5.5 Puedes seguir el tutorial con cualquier versión de Dreamweaver o editor de texto, pero no tendrás los beneficios de sugerencias de código (code hinting). Solo copia el código terminado al final.

¿Qué es jQuery?

De acuerdo al sitio web de jQuery, “jQuery esta diseñado para cambiar la manera en que se escribe código JavaScript”.  No solo ha hecho esto, se ha logrado algo aún más impresionante, ha animado a un gran número de diseñadores web a comenzar a escribir su propio código en lugar de copiarlo de dudosas fuentes. jQuery es lo que se conoce como  una librería JavaScript, pero no es del tipo de librerías que esta llena con filas y filas de libros. Es un archivo relativamente pequeño (84kb sin comprimir) que contiene docenas de funciones (métodos) de JavaScript diseñadas para simplificar el trabajo con JavaScript. Simplemente ligas tu página web al archivo y usas los métodos de jQuery para agregar interactividad a tu sitio web.

JavaScript es un lenguaje muy potente,  pero hay dos obstáculos importantes para su uso:

1. JavaScript fe desarrollado originalmente por Netscape, el archirrival de Internet Explorer durante la guerra de los navegadores en los 90’s. Aunque Internet Explorer adopto rápidamente el lenguaje (su versión oficial se llama JScript), hay diferencias fundamentales en ciertas áreas, como el manejo de eventos. Hacer scripts que funcionen en todos los navegadores generalmente implica rescribir mucho código.
2. La interactividad consiste en agregar y quitar elementos de una página o afectar los estilos que tengan. Los métodos oficiales para hacer esto, usando el Documento de Modelo de Objetos del consorcio World Wide Web (W3C DOM), son bastante engorrosos.

Las librerías de JavaScript destinados a resolver estos dos problemas comenzaron a surgir alrededor de 2005. Los primeros en ganar un uso generalizado fueron Prototype y Script.aculo.us. Otras librerías conocidas son Dojo Toolkit, Moo Tools,  Yahoo! UI Library y el Adobe Spry framework.  Todos tienen los objetivos básicos de jQuery: proporcionar a todos los navegadores de herramientas para añadir interactividad a sus páginas. Así que, ¿por qué elegir jQuery sobre los demás?

• jQuery funciona en todos los navegadores actuales incluyendo Internet Explorer 6+, Firefox 2+, Safari 3+, Chrome, and Opera 9+.
• Es de código libre licenciado a la vez con MIT License y GNU General Public License
• Se estima que tres de cada cuatros sitios web con JavaScript han adoptado jQuery.
• Empresas líderes usan jQuery como Amazon.com, Bank of America, BBC y Twitter.
• Y además es relativamente fácil de aprender.

Adobe se ha convertido en patrocinador oficial de jQuery Mobile, un nuevo framework para el desarrollo de aplicaciones móviles, que esta basado en la librería core de jQuery y los ingenieros de Dreamweaver han contribuido activamente al código del proyecto.

Como obtener jQuery

Aunque Dreamweaver CS5.5 tiene sugerencias de código para todo jQuery, es necesario ligar tus páginas web a la librearía core de jQuery. Hay dos maneras de hacer eso:

• Ligar a la última versión de la librería hospedada en un “Content Distribution Network (CDN)”
• Descargar una copia de la librería y almacenarla con los archivos de tu sitio.

Los detalles de ambos métodos puedes encontrarlos en la documentación de jQuery

Para propósitos de este tutorial, recomendamos trabajar con la versión local de jQuery. Los archivos de ejemplo contienen una copia de jQuery 1.5.2, que era la versión actual al momento de escribir este tutorial. Si hay una nueva versión solo reemplaza los archivos.

Nota: La página de descarga del sitio de jQuery tiene links para versiones mínimas y descomprimidas. Ambas contienen el mismo código, pero en  la versión mínima se quitaron todos los espacios en blanco para lograr un archivo de menor peso. Cuando haces click en el link de descarga, el archivo normalmente se abre en tu navegador.  Selecciona el menú Archivo > Guardar como… para guardar el archivo en tu disco duro.

Preparando los archivos del tutorial

Si aun no lo haz hecho, descarga jquery.zip y descomprímelo en una carpeta junto a los archivos de este tutorial. Todos los archivos están la carpeta llamada jqtut. Crea un nuevo sitio de Dreamweaver con la carpeta jqtut como raíz del sitio. Alternativamente copia los archivos de la carpeta jqtut en algún sitio existente de Dreamweaver y trabaja en esa carpeta.

Ligar e inicializar jQuery

Por muchos años, la practica recomendad ha sido vincular archivos externos de JavaScript en el <head> de la página web. Sin embargo, todo el código de JavaScript necesita ser procesado antes de que el resto de la página continúe cargando.

En consecuencia, ahora es recomendado adjuntar archivos de JavaScript externos justo antes  de cerrar la etiqueta </body> a menos que la página dependa de código que deba ser cargado previamente. Hacer esto resulta en páginas que cargan más rápido.

1. Abrir jq_01.html de la carpeta de archivo de ejemplos jqtut y cambiar a la vista de código o a la vista dividida.
2. Ubica tu cursor en el punto de inserción inmediatamente antes de la etiqueta de cierre </body> y haz click en Script en la categoría Común del panel insertar o a través del menú Insertar > HTML > Script Objects > Script.
3. En la ventana de diálogo Script, hacer click en el icono en forma de carpeta, ir a la carpeta js y seleccionar el archivo jquery-1.5.2.min.js.  Si descargaste una versión reciente de jQuery, selecciona esa en su lugar. Haz click en OK. El nombre del archivo debe aparecer listado en la ventana de diálogo Script como se muestra en la Figura 1.
   
   
   ^{Figura 1. Seleccionar la librería de jQuery.}
4. Click en OK para cerrar la ventana.  La librería debe aparecer ahora ligada a tu página justo antes de la etiqueta de cierre </body>como se muestra en la Figura 2.
   
   
   ^{Figura 2. La ubicación recomendada la librería jQuery es justo antes de la etiqueta de cierre </body>}
5. Guarda la página.

Agregar la librería jQuery a la página no hace nada por si sola. Simplemente pone los métodos de jQuery disponibles para tus scripts que vienen después de haber vinculado la librería.

Creando manejadores para inicializar documentos

Antes de que comiences a interactuar dinámicamente con tu página web, el browser necesita cargar el HTML y construir la estructura del DOM. Tradicionalmente JavaScript usa el evento onload para inicializar los scripts. Sin embargo, esta espera que todos los recursos de la página, incluyendo las imágenes, terminen de cargar antes de hacer otra cosa. Para acelerar este proceso, jQuery usa su propio manejador de documentos cuando están listos.

Hay diferentes formas de crear manejadores de documentos, pero en este tutorial  voy a mostrar la versión corta. Este es la manera más simple y común de hacerlo.

1. Continua trabajando con el mismo archivo. Alternativamente usa jq_02.html
2. Inserta algunas líneas entre el elemento <script> existente y la etiqueta de cierre </body>
3. Agrega las etiquetas <script></script>  en el espacio que acabas de crear.
4. Dentro de del nuevo bloque escribe $(function() {.
5. Pulsa la tecla enter un par de veces para agregar dos líneas nuevas. Ahora escribe un símbolo de llave que cierra seguido de un paréntesis que cierra y un punto y coma. Los dos bloques de <script> al fondo de tu página deben verse de la siguiente manera:
   
   

   <script type="text/javascript" src="js/jquery-1.5.2.min.js"></script>
   
   <script>
   
   $(function() {
   
   });
   
   </script>

   Todo el código JavaScript que necesites ejecutar al cargar la página debe ir dentro de las llaves de la función.

Guardar funciones como fragmentos reusables

El código que acabamos de hacer es código que se usa regularmente con jQuery, por lo que podemos guardarlo para poder reusarlo.

1. Selecciona el código completo que acabas de crear.
2. Haz click derecho y selecciona crear nuevo fragmento (o snippet) desde el menú contextual.
3. Escribe  jQuery Document Ready Handler en el campo nombre del cuadro de diálogo.
4. Dreamweaver copia el código seleccionado en el apartado de “Insertar antes”.
5. Haz click dentro del espacio del método y selecciona el código que hay después y córtalo.
6. Pega el código cortado en el apartado de “insertar después”. La ventana con el código debe verse como en la Figura 3.
   
   ^{Figura 3. Los métodos de jQuery que inicializan documentos son usados a menudo por lo que vale la pena guardarlo como un fragmento de código.}
7. Click en OK para guardar el fragmento.

Cuando necesites insertar este fragmento solo coloca tu cursor en el punto de inserción y haz doble click en el fragmento deseado del panel de fragmentos.

Agregar párrafos dinámicamente

Para demostrar como trabaja jQuery, este ejercicio agrega párrafos dinámicamente a la página cuando se carga. Es cierto, no es el uso más práctico de jQuery, pero ilustra dos características esenciales: Seleccionar elementos y usar métodos de jQuery.

1. Continua trabajando con el mismo archivo o usa jq_02.html
2. En el espacio en blanco dentro del método que habías creado, escribe el símbolo de dólar seguido de un paréntesis que abre. Dreamweaver CS5.5  te dará sugerencias de código jQuery. (ver Figura 4)
   
   
   ^{Figura 4. Dreamweaver ofrece consejos de código jQuery a medida que escribes.}
3. Las dos primeras líneas ofrecidas son para el documento, que aplican a todo el documento que es el destino del evento. Tampoco es apropiado para el ejercicio,  pero escribe una comilla (no importa si es simple o doble).Dreamweaver automáticamente agrega la comilla que cierra y despliega una lista de sugerencias de código para elementos HTML (ver Figura 5).
   
   
   ^{Figura 5. Cuando escribes una comilla, las sugerencias de código despliegan elementos HTML}
4. Para seleccionar la etiqueta <body>solo escribe las letras bo y pulsa la tecla enter. Dreamweaver completa el nombre de la etiqueta y deja el cursor antes de la comilla de cierre. jQuery usa selectores CSS para seleccionar elementos de una página por lo que Dreamweaver no puede decir si vas a refinar la selección. En este caso ya has terminado. Mueve tu cursor a la derecha de la comilla de cierre y escribe un paréntesis que cierra. El código ahora se ve de la siguiente manera:
   
   

   $(function() {
   
   $('body')
   
   });

   Esta es la manera en como jQuery selecciona el elemento <body> de la página

5. Después de seleccionar uno o más elementos de la página ya puedes aplicarle métodos de jQuery. Para agregar nuevos elementos de HTML a los elementos seleccionados debes usar el método append() y pasarle los nuevos elementos como argumentos. Escribe un punto después de  $('body'). Dreamweaver CS5.5 muestra sugerencias de código de todos los métodos de jQuery que pueden ser aplicados al o los elementos seleccionados. Selecciona el método append()y pasa una cadena de texto tipo HTML como esto:
   
   

   $(function() {
   
   $('body').append('<p>This paragraph was added dynamically.</p>');
   
   });

6. Guarda la página y revísala en un navegador en el Live View. El nuevo párrafo ha sido agregado a la página (ver Figura 6).
   
   
   ^{Figura 6. El HTML pasado como argumento al método append() ha sido agregado a la página}
   
   Puedes revisar tu código si es necesario con el archivo jq_03.html

Como una forma de comparar el archivo dom_01.html en los archivos de ejemplo produce el mismo resultado usando JavaScript estándar y los métodos de creación de elementos recomendados por la W3C DOM. El bloque <script> en la sección <head> de la página se ve de la siguiente manera:

<script>

function addPara(text) {

var body = document.getElementsByTagName('body')[0],

p = document.createElement('p'),

content = document.createTextNode(text);

p.appendChild(content);

body.appendChild(p);

}



window.onload = function() {

addPara('This paragraph has been added dynamically.');

};



</script>

Estamos de acuerdo que hacer esto con jQuery  es mucho más simple y fácil de entender. Sin embargo, no pienses que usar jQuery es como hacer trampa. Lo que jQuery hace en el fondo es usar JavaScript  estándar. Esconde la complejidad y ayuda a preservar tu salud mental.
En nuestra siguiente entrega revisaremos más a fondo el uso de los métodos de jQuery, como encadenarlos, como ligarlos a eventos de elementos HTML y como pasarle argumentos

[Descargar código de ejemplo]

Recuerda que en Activ tenemos un curso de jQuery con el cual podrás llevar tu conocimiento de JavaScript a otro nivel.

Este artículo lo compartimos aquí bajo licencia Creative Commons Attribution-Noncommercial-Share Alike 3.0 Unported License, la versión original puedes encontrarla en este link.

Se incluyeron mejoras para Android, BlackBerry, iOS y Windows Phone en diferentes aspectos como la seguridad, eficiencia y compatibilidad. Sin duda una importante noticia para todos aquellos interesados en desarrollar aplicaciones móviles mediante HTML5 a través de PhoneGap.

Y para aquellos que quieran ir más allá el curso de HTML5 para Móviles de Activ es un muy buen punto de partida.