© 2010 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential.

Descubriendo el HTML5 con Adobe Dreamweaver

© 2010 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential.

Luis Palacios Castro Co-Manager del AUGE

Director de Tecnologías de Geeks Ecuador@luispalaciosc

© 2010 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential.

Paradigmas de un Diseñador Web

Que el maquetador construya el website tal cual yo lo hice en Photoshop

Yo no me meto con “El CODIGO” solo hago la interfaz

Las resoluciones , esas son un problema !!

¿ Por qué se demoran tanto en desarrollar lo que diseñe?

© 2010 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential.

Los roles “Ideales”

Diseñador Web

DesarrolladorWeb

Desarrolla el sitio web , utiliza la interfaz para darle funcionalidad por medios de software de desarrollo

Crea la interfaz web desde un software de diseño (Photoshop, Fireworks, Illustrator).

© 2010 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential.

¿Cómo resolver el problema ?

© 2010 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential.

¿Cómo resolver el problema?

Los diseñadores web necesitamos un

programa con integración con nuestras herramientas comunes para crear websites

sin necesidad de saber tantos lenguajes y códigos, donde pueda ver

mi diseño y lo pueda hacer funcionar a mi gusto.

Def: @cristalab y @freddier

© 2010 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential.

¿Cómo resolver el problema?

Def: @cristalab y @freddier

© 2010 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential.

Lo nuevo de Dreamweaver CS5.5

8

•Panel de vista previa mejorada multipantalla ( fácilmente una vista previa de los diseños de los

smartphones, tabletas y pantallas de PC)

• Nuevas pantallas de diálogo de Media-Queries • Soporte mejorado para CSS3 y HTML5 •  Vista en vivo actualizada

© 2010 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential.

Lo nuevo de Dreamweaver CS5.5

9

•Sugerencias de código para CSS3. •Panel CSS mejorado. 

•Soporte integrado para HTML5

• La sólida integración de jQuery + jQuery

sugerencias para el código PhoneGap integración para crear aplicaciones nativas para Android y iOS

© 2010 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential.

Lo nuevo de Dreamweaver CS5.5

10

•Vista en vivo mejorada para la web, móvil, y proyectos multipantalla 

• Validación W3C para mejorar la precisión • Soporte para Subversion 1.7 VCS 

•FTPS y apoyo FTPES

© 2010 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential.

¿Qué tecnología me ayudará con darle vida a mi diseño?

Voy a usar Dreamweaver, ¿y ahora?

© 2010 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential.

¿Cómo resolver el problema?

Imagenes de http://www.distilled.net/

© 2010 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential.

¿Cómo resolver el problema?

Imagenes de http://www.distilled.net/

© 2010 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential.

¿Que es HTML 5?

HTML5 es la actualización de HTML, el lenguaje en el que es creada la web, también es un termino para agrupar las

nuevas tecnologías de desarrollo de aplicaciones web: HTML5, CSS3 y

nuevas capacidades de Javascript, que apunta hacia una web semántica

Def: @cristalab y @freddier

© 2010 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential.

¿ Como diseñador podrías hacer lo siguiente en sus páginas web maquetadas? (Flechas rojas)

Html5 Nuevas Caracteristicas – Dreamweaver 5.5

© 2010 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential.

Html5 Nuevas Caracteristicas – Dreamweaver 5.5

- Transparencia en los elementos de diseño,

- Texto de la columna, banners, pies de página  lista de selección de diseños de columna diferentes

- Elementos de diseño inclinadas y redondeadas que se colocan en una página muy similar a una "capa" en Photoshop

Incrustar vídeo / audio con etiquetas HTML5

© 2010 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential.

Diseño y desarrollo de Contenido Web para muchas pantallas

Integración con jquery mobile

Vista en vivo mejorada para diferentes dispositivos (multipantallas)

Contenido escalable con Adobe Flash

Emulación HTML5 y nuevo soporte para Adobe Device Central

Mejor integración con Phototoshop y Fireworks

Un solo contenido , diferentes maneras de verlo.

© 2010 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential.

Tu sitio debe verse bien en todos los navegadores

Dreamweaver tiene la funcionalidad “Browser Lab”

Puedes guardar el historial de tus sitios vistos en los navegadores ,mas populares

© 2010 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential.

z

Donde encontrarlo :

© 2010 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential.

Quienes Somos:

ADOBE USER GROUP ECUADOR

@AUGEcuador

@cfmichael

@luispalaciosc

http://auge.ec