15. Animaciones HTML5 con Edge Animate: Crear diseños adaptables.

El diseño web adaptativo o adaptable (en inglés, Responsive Web Design) es una técnica de diseño y desarrollo web que mediante el uso de estructuras e imágenes fluidas, así como de media-queries en la hoja de estilo CSS, consigue adaptar el sitio web al entorno del usuario.

El diseñador y autor norteamericano Ethan Marcotte creó y difundió esta técnica a partir de una serie de artículos en A List Apart, una publicación en línea especializada en diseño y desarrollo web, idea que luego extendería en su libro Responsive Web Design. (Referencias: Wikipedia - Diseño web adaptativo).

Décimo quinto y último videotutorial del curso de Animaciones HTML5 con Adobe Edge Animate, dictado por Jesús Conde. Hemos llegado al final de esta aventura iniciada ya casi dos meses, y la verdad ha sido muy interesante ir añadiendo las entradas de este curso. Hoy nos toca hablar sobre Responsive Web Design. ¿Cómo realizar diseño web qué respondan a los requerimientos de visualización de una gran cantidad de dispositivos?.

Bueno, sin otras consideraciones vayamos a la última sesión y aprendamos más sobre Edge Animate.

14. Animaciones HTML5 con Edge Animate: Publicación de los Proyectos.

Adobe Edge Animate es un sistema de animación con el nivel de complejidad y detalle de Flash y exportación directa a CSS3. La interfaz está completamente basada en Webkit y hecha en HTML5 (como casi todo de Adobe). Las herramientas vectoriales no son tan poderosas como en Flash, pero la idea es usar Adobe Illustrator u otras herramientas externas para crear los assets que dentro de Edge Animate serán animados. (Referencias: Analizamos Adobe Edge, el compromiso de Adobe por HTML5).

Décimo cuarto videotutorial del curso de Animaciones HTML5 con Adobe Edge Animate, dictado por Jesús Conde. Acercándonos a la recta final del curso, en la sesión preparada para hoy, aprenderemos a cómo publicar nuestros proyectos HTML5 elaborados en Edge Animate.

Así que, en sus marcas, listos, a PUBLICAR!!!...

13. Animaciones HTML5 con Edge Animate: Creación de un Slideshow.

Se llaman así las presentaciones de imágenes en las que éstas van desfilando ante tus ojos, de forma más o menos divertida y decorada. Habitualmente se puede detener una imagen al poner el ratón sobre ella. (Referencias: Slides o slideshow).

Décimo tercer videotutorial del curso de Animaciones HTML5 con Adobe Edge Animate, dictado por Jesús Conde. En la sesión preparada para hoy, aprenderemos la creación de un slideshow en proyecto realizado hasta el momento.

¿Preparados?, entonces vamos a la sesión de hoy...

12. Animaciones HTML5 con Edge Animate: Métodos HTML y uso de variables.

En la programación orientada a objetos, un método es una subrutina asociada exclusivamente a una clase (llamados métodos de clase o métodos estáticos) o a un objeto (llamados métodos de instancia). Análogamente a los procedimientos en los lenguajes imperativos, un método consiste generalmente de una serie de sentencias para llevar a cabo una acción, un juego de parámetros de entrada que regularán dicha acción y o, posiblemente, un valor de salida (o valor de retorno) de algún tipo. (Referencias: Wikipedia).

Décimo segundo videotutorial del curso de Animaciones HTML5 con Adobe Edge Animate, dictado por Jesús Conde. En esta ocasión aprenderemos sobre los métodos HTML disponible para Edge Animate y el empleo de variables, algo familiar en los lenguajes de programación.

Entonces, si estamos listos, continuemos con la sesión para hoy...

11. Animaciones HTML5 con Edge Animate: Embeber contenido Online y multimedia.

El término multimedia se utiliza para referirse a cualquier objeto o sistema que utiliza múltiples medios de expresión físicos o digitales para presentar o comunicar información. De allí la expresión multimedios. Los medios pueden ser variados, desde texto e imágenes, hasta animación, sonido, video, etc. También se puede calificar como multimedia a los medios electrónicos u otros medios que permiten almacenar y presentar contenido multimedia. Multimedia es similar al empleo tradicional de medios mixtos en las artes plásticas, pero con un alcance más amplio.

Se habla de multimedia interactiva cuando el usuario tiene libre control sobre la presentación de los contenidos, acerca de qué es lo que desea ver y cuando; a diferencia de una presentación lineal, en la que es forzado a visualizar contenido en un orden predeterminado. (Referencias: Wikipedia).

Décimo primer videotutorial del curso de Animaciones HTML5 con Adobe Edge Animate, dictado por Jesús Conde. En la sesión preparada para hoy aprenderemos a cómo embeber contenido online y multimedia.

Bueno, ¿estamos list@s?, entonces vamos...

10. Animaciones HTML5 con Edge Animate: Crear interactividad II.

La interactividad es un concepto ampliamente utilizado en las ciencias de la comunicación, en informática, en diseño multimedia y en diseño industrial.

Interactivo Dicho de un programa que permite una interacción a modo de diálogo entre ordenador y usuario En su campo de aplicación suele hablarse de tres niveles de comunicación:

No interactiva, cuando un mensaje no se relaciona con otro previo.
Reactiva, cuando un mensaje se relaciona únicamente con el previo inmediato.
Interactiva, cuando un mensaje se relaciona con una serie de elementos previos. (Referencias: Wikipedia).

Décimo videotutorial del curso de Animaciones HTML5 con Adobe Edge Animate, dictado por Jesús Conde. Dando continuidad a la sesión anterior vamos aplicando a nuestro proyecto de animación HTML5 en Edge Animate el concepto de interactividad.

Así que sigamos con lo que viene...

09. Animaciones HTML5 con Edge Animate: Añadir interactividad.

La interactividad es un concepto ampliamente utilizado en las ciencias de la comunicación, en informática, en diseño multimedia y en diseño industrial.

Interactivo Dicho de un programa que permite una interacción a modo de diálogo entre ordenador y usuario En su campo de aplicación suele hablarse de tres niveles de comunicación:

No interactiva, cuando un mensaje no se relaciona con otro previo.
Reactiva, cuando un mensaje se relaciona únicamente con el previo inmediato.
Interactiva, cuando un mensaje se relaciona con una serie de elementos previos. (Referencias: Wikipedia).

Noveno videotutorial del curso de Animaciones HTML5 con Adobe Edge Animate, dictado por Jesús Conde. Aplicaremos a nuestro proyecto de animación HTML5 en Edge Animate el concepto mencionado anteriormente, la de interactividad.

Así que pónganse cómodos y denle PLAY...

08. Animaciones HTML5 con Edge Animate: Mejorar las animaciones.

Dibujos, animaciones y videojuegos
Con la incoporación de la etiqueta canvas, HTML5 abre por fin la posibilidad de representación y dibujado de formas sobre un lienzo o canvas. Esta nueva funcionalidad aparentemente complementaria abre la web al mercado del videojuego, diseño y la animación nativa, que anteriormente dependía de otras plataformas propietarias como Flash. (Referencias: 5 ventajas de HTML5 para los usuarios).

Octavo videotutorial del curso de Animaciones HTML5 con Adobe Edge Animate, dictado por Jesús Conde. Hoy seguiremos mejorando nuestras animaciones aprendiendo procesos como el exportar e importar símbolos, sombras y aceleraciones avanzadas.

Nuevamente, con ustedes, Jesús Conde...

07. Animaciones HTML5 con Edge Animate: Animaciones complejas.

¿Por qué son tan importantes las animaciones?
Muchos sitios web dependen en gran medida del dinero que se recauda a través de la publicidad. En este sentido, un componente importante de cualquier buen anuncio es la capacidad de, no sólo atraer a los clientes potenciales, sino también de que permanezcan en nuestro sitio el máximo tiempo posible. Las animaciones son una forma de captar la atención de nuestros usuarios. Sin embargo, tener animaciones en tu sitios web no sólo es una gran herramienta de marketing: también hará que tu sitio web sea más atractivo y ayudará a mejorar la estética de la web. Conseguirás que tu sitio web parezca más profesional. (Referencias: Cómo crear animaciones e insertarlas en tu propia página web).

Séptimo videotutorial del curso de Animaciones HTML5 con Adobe Edge Animate, dictado por Jesús Conde. En esta sesión haremos animaciones más complejas en las cuales iremos aplicando conceptos tales como anidamientos y loops.

A continuación, con ustedes nuestro maestro Jesús Conde...

06. Animaciones HTML5 con Edge Animate: Diseñar Animaciones II.

Podemos crear animaciones en Edge Animate utilizando métodos de animación tradicionales basados en fotogramas clave. Edge Animate también proporciona un método alternativo basado en la herramienta Pin para crear fotogramas clave. (Referencias: Crear animaciones).

Sexto vídeo del curso de Animaciones HTML5 con Adobe Edge Animate, dictado por Jesús Conde. En esta ocasión continuamos aprendiendo a cómo realizar el diseño de animaciones.

Así que sin más vamos a la sesión que hoy nos tiene nuestro maestro Jesús Conde...

05. Animaciones HTML5 con Edge Animate: Diseñar Animaciones.

Podemos crear animaciones en Edge Animate utilizando métodos de animación tradicionales basados en fotogramas clave. Edge Animate también proporciona un método alternativo basado en la herramienta Pin para crear fotogramas clave. (Referencias: Crear animaciones).

Continuando con el curso de Animaciones HTML5 con Adobe Edge Animate, dictado por Jesús Conde. En la quinta sesión aprenderemos a cómo realizar el diseño de animaciones.

Pues listos, pónganle PLAY y aprendamos hoy...

04. Animaciones HTML5 con Edge Animate: Trabajar con Textos.

Hablando conceptualmente , las líneas guía son líneas horizontales, verticales u oblicuas, que se pueden colocar en cualquier punto del área de trabajo. Se puede colocar un número ilimitado de Líneas guía. Las líneas guía también son objetos que se pueden seleccionar, girar, desplazar, duplicar o borrar. (Referencias: Líneas guía).

Siguiendo el curso de animaciones con Adobe Edge Animate, dictado por Jesús Conde. En su cuarto vídeo aprenderemos el uso de texto en nuestros proyectos de animación HTML5, ya que en cualquier sitio web siempre se implementa esta pieza ya sea para ornamentación o bien para información. Tendremos un preámbulo con el uso de las líneas guía y luego el manejo de la herramienta de texto en Edge Animate.

Así que entremos a la sala y escuchemos al maestro...

03. Animaciones HTML5 con Edge Animate: Trabajar con gráficos.

Con el uso de Edge, tenemos la posibilidad de importar nuestro sitio actual y agregar animaciones a los documentos HTML y también la de importar gráficos estándar para la web como SVG, PNG, JPG y GIF, estilos CSS, y aplicar hasta 27 diferentes transformaciones. Esta son grandes prestaciones debido a que cuando se trata de animaciones es necesario trabajar con gráfico como base y Edge nos abre la posibilidad de hacerlo. (Referencias: Edge, el nuevo editor de animación HTML5 de Adobe).

Continuamos con el curso relacionado con HTML5: realizando animaciones con Adobe Edge Animate. En la tercera entrega de este curso realizaremos el trabajo de gráficos y imágenes en Edge, conociendo de esta manera el cómo utilizar las herramientas llamadas para trabajar en este aspecto.

Así que tomen asiento que ya empieza una nueva exposición de nuestro maestro, Jesús Conde...

02. Animaciones HTML5 con Edge Animate: Crear primer proyecto.

Adobe Edge es un nuevo proyecto que permitirá a los diseñadores crear animaciones basadas en estándares como HTML5, CSS3 y JavaScript. Al ver la demo preliminar podemos darnos cuenta que ésta aplicación permitirá crear archivos desde cero o animar archivos ya existentes teniendo soporta para bitmaps y vectores los cuales se animan de una forma muy sencilla e intuitiva.

Algo realmente interesante sobre ésta aplicación es la posibilidad de abrir un archivo .html (o similar) y animar los divs. En éste proceso el código html y CSS no es modificado pues las animaciones se crean mediante JavaScript (específicamente con JSON). (Referencias: Adobe Edge para animación en HTML5 y CSS3).

Hemos comenzado un nuevo curso relacionado con HTML5, realizar animaciones con Adobe Edge Animate. En la segunda sesión de este curso crearemos nuestro primer proyecto en Edge, viendo en detalle el manejo de las herramientas del programa para realizar mencionado proyecto.

Ahora si, con ustedes, Jesús Conde...

01. Animaciones HTML5 con Edge Animate: Iniciación.

Adobe Edge Animate fue una de las principales novedades presentadas en el evento "Create the Web". Una aplicación para crear contenido animado e interactivo al mejor estilo Flash, pero en HTML5 sirviéndose de jQuery.

Con solo abrir la aplicación podemos recordar el entorno de trabajo de Flash, trabajando con un Timeline, interpolaciones, símbolos y ventana de código (en este caso Javascript). (Referencias: Introducción a Adobe Edge Animate).

Reciente curso del maestro Jesús Conde que complementa lo aprendido en los cursos de HTML5 y CSS3. Una buena alternativa a la animación con Flash, que si bien no sabemos cuanto éxito llegue a tener sobre el software estrella para la animación en la web, al menos está llegando a tener acogida por su posibilidad de trabajar en el posicionamiento en la web y su accesibilidad a través de la búsqueda en los diversos motores (una gran ventaja sobre Flash). Esperamos que a lo largo del curso adquieras los conocimientos necesarios para lanzarte al mundo de la animación para la web.

Sin más palabras vamos al primer vídeo que nos dará nuestro querido maestro Jesús Conde...