Este documento presenta una introducción a los conceptos básicos de diseño web, incluyendo las tres capas del diseño web (contenido, presentación y comportamiento), el vocabulario relevante, y herramientas como Dreamweaver para crear documentos HTML, CSS y JavaScript. También discute que cada rol (diseñador, programador, especialista en contenido) requiere conocimientos específicos y que el mejor editor de código es a veces lápiz y papel.

1. MAESTRÍA EN MEDIOS INTERACTIVOS
Curso Propedéutico
2010

2. ADOBE CS, CONCEPTOS MÍNIMOS
04

3. CONTENIDO
• Las tres capas del diseño Web, otra vez
• ¿Cómo crear documentos HTML, CSS y JS?
•A cada quien su santo
• Editar HTML, de David a Goliat
• Dreamweaver y cia.

4. VOCABULARIO PENDIENTE
Web 1.0, 2.0, 3.0 y los que aparezcan
•Accesabilidad Web
•Usabilidad (preferentemente definición norma ISO)
•hipertexto
•hipermedia
Actividad
•Consultar el sitio Web del W3C

5. LAS TRES CAPAS DEL DISEÑO WEB,
OTRA VEZ
Al diseñar un sitio Web, bajo estándares, es recomendable :
• Separar contenido/presentación/comportamiento
• Aplicar semántica
• Tener en cuenta la accesabilidad
• Utilizar herramientas de validación
• Pensar en todos los dispositivos desde donde todos los posibles
usuarios puedan acceder

6. LAS TRES CAPAS DEL DISEÑO WEB,
OTRA VEZ
Con esto se logra:
• Mejorar la usabilidad
• Mejorar la indexación
• Simplificar el desarrollo
• Mejorar la semántica y estructura de contenidos
• Mejorar la eficiencia en la gestión de contenidos
• Independencia del dispositivo

7. LAS TRES CAPAS DEL DISEÑO WEB,
OTRA VEZ
Los estándares Web fomentan la separación de un contenido
Web en 3 capas:
•Contenido: bla, bla, bla..., o sea, documento HTML
•Presentación: bla, bla, bla..., o sea, hoja de estilo CSS
•Comportamiento: bla, bla, bla..., o sea, documento JS

8. LAS TRES CAPAS DEL DISEÑO WEB,
OTRA VEZ
Todo está claro..., juro diseñar bajo estándares Web..., pero
¿¡ Cómo creo documentos HTML/CSS y JS !?
?

9. A CADA QUIEN SU SANTO
Los diseñadores usan
Dreamweaver, los demás
programan

10. A CADA QUIEN SU SANTO
Los programadores
codifican, no diseñan

11. A CADA QUIEN SU SANTO
Los contenidos
comunican, los demás
construyen el medio

12. A CADA QUIEN SU SANTO
•La programación HTML y JS, así como la definición de estilos CSS
implica la adquisición de conocimientos sobre estándares, naturaleza y
sintaxis específica de cada lenguaje.
•La definición del aspecto visual, así como la definición de la
experiencia del usuario implica la adquisición de conocimientos sobre
diseño gráfico, editorial y diseño de interacción
•La definición de contenidos, así como la arquitectura de la
información implica la adquisición de conocimientos sobre diseño de
la información, comunicación, mercadotecnia y otras áreas afines

13. A CADA QUIEN SU SANTO
Hasta el momento, ningún Software es capaz de
crear sitios y páginas Web.

14. EDITAR HTML, DE DAVID A GOLIAT
Un documento que contenga lenguaje HTML puede ser
escrito en un simple editor de texto hasta en una poderosa
aplicación especializada.
TextEdit Smultron Coda Dreamweaver Joomla Drupal

15. EDITAR HTML, DE DAVID A GOLIAT
El mejor editor de código es...
lápiz y papel.

16. DREAMWEAVER Y CIA.
pero, pa´qué sufrir...
Diseñe, desarrolle y realice el mantenimiento
de aplicaciones y sitios web basados en
estándares
Adobe® Dreamweaver® CS5 permite a los
diseñadores y desarrolladores crear sitios web
basados en estándares. Diseñe de forma visual
o directamente sobre el código, desarrolle
páginas con sistemas de gestión de contenido
y pruebe de forma precisa la compatibilidad
con los navegadores.

17. DREAMWEAVER Y CIA.
•Entorno de desarrollo web líder del sector
•Integración con Adobe Creative Suite
•Asistencia de codificación inteligente
•Compatibilidad con CMS integrada (CS5)
•Compatibilidad integral con CSS
•Integración con contenido de FLV
•Compatibilidad con las principales tecnologías
•Integración con Adobe BrowserLab
•Integración con Device Central

18. DREAMWEAVER Y CIA.
drag&drop
no
programes
usa
templates
¿Diseñe de forma visual o directamente sobre el código?
WYSIWYG MWYSINWSB
(what you see is what you get) (maybe what you see is not what should be)

19. DREAMWEAVER Y CIA.
drag&drop
no
programes
Práctica 01:
Conociendo la interfaz de Dreamweaver
usa
templates
¿Diseñe de forma visual o directamente sobre el código?
WYSIWYG MWYSINWSB
(what you see is what you get) (maybe what you see is not what should be)

20. VOCABULARIO
•WYSIWYG
•CMS
•FLV
•Algo de ortografía..., interface/interfase/interfases/interfaces/interfaz
Actividad
•Visitar: http://www.adobe.com/es/
•Visitar: http://www.chicageek.com/, como la ven, se verán!

21. Siguiente sesión:
05. INTRODUCCIÓN A HTML