Este documento presenta un taller sobre diseño y desarrollo web en Dreamweaver que incluye temas como estructuras, punto de interés, flujo visual, bocetos, diagramas, HTML y CSS. El taller finalizará con un ejercicio práctico donde los participantes deberán diseñar una página web boceteada a lápiz y papel sobre una marca definida, presentando su trabajo el sábado 12 de marzo.

1. DISEÑO & DESARROLLO WEB
EN DREAMWEAVER
JUEVES 10 MARZO
LUIS PALOMINO

2. TEMARIO
• Estructuras
• Punto de interés
• Flujo visual
• Bocetos
• Diagrama
• HTML & CSS
• Ejercicio N°1
Jueves 10
Marzo
1
LUIS PALOMINO

3. LUISPALOMINOBELTRÁN
Padre. Comunicador. MBA. Brand
Manager. Project Director. Docente.
Músico. Scout. 11 años en eMKT.
/ Mehaceslataba
@Mehaceslataba
/ Mehaceslataba

4. ¿ALGÚN PROGRAMADOR
EN EL GRUPO?

6. ESTRUCTURAS
¿Qué partes tiene mi diseño?

9. http://www.w3schools.com/
w3 schools

12. SLIDER |
FOOTER
HEADER
Código externo para que se muevan las secciones
SECTION SECTION
SECTION

13. PUNTO DE
INTERÉS

17. Es aquella parte de la
composición que llama
especialmente la atención.
Debe ayudar a transmitir los
objetivos de comunicación
de la marca.
Los demás elementos del
diseño deben ser
dispuestos de forma que
sean inferiores.
PUNTO DE
INTERÉS

18. FLUJO
VISUAL

22. El flujo visual es el
camino que recorren
los ojos a través de
una pantalla.
Si el diseño está bien
realizado, este
camino se da de
manera natural y
fluida.
FLUJO
VISUAL

23. BOCETO

26. Hacer bocetos es una
fase fundamental del
proceso de diseño y es
bastante útil para dejar
fluir tu creatividad.
Bocetear y diagramar
no es lo mismo.
BOCETO

27. Nos permite definir las
zonas o divisiones que
va a tener la página
web.
Nos permite planear el
punto de interés y flujo
visual.
DIAGRAMA O
ESTRUCTURA

28. HTML & CCSDreamweaver

29. 1. Definir la marca sobre la
cual diseñarán una web.
2. Definir los objetivos de
comunicación.
3. Definir la estructura de la
web.
4. Dibujar el boceto de la web.
EJERCICIO N°1
Presentación: Sábado 12
Formato: Lápiz y Papel