diseño y desarrollo web en dreamweaver
TRANSCRIPT
![Page 1: Diseño y Desarrollo web en Dreamweaver](https://reader036.vdocuments.co/reader036/viewer/2022062401/588556b81a28ab47268b5513/html5/thumbnails/1.jpg)
DISEÑO & DESARROLLO WEBEN DREAMWEAVER
JUEVES 10 MARZO
LUIS PALOMINO
![Page 2: Diseño y Desarrollo web en Dreamweaver](https://reader036.vdocuments.co/reader036/viewer/2022062401/588556b81a28ab47268b5513/html5/thumbnails/2.jpg)
TEMARIO• Estructuras• Punto de interés• Flujo visual• Bocetos• Diagrama• HTML & CSS• Ejercicio N°1
Jueves 10Marzo
1LUIS PALOMINO
![Page 3: Diseño y Desarrollo web en Dreamweaver](https://reader036.vdocuments.co/reader036/viewer/2022062401/588556b81a28ab47268b5513/html5/thumbnails/3.jpg)
LUIS PALOMINO BELTRÁNPadre. Comunicador. MBA. Brand Manager. Project Director. Docente. Músico. Scout. 11 años en eMKT.
/ Mehaceslataba@Mehaceslataba/ Mehaceslataba
![Page 4: Diseño y Desarrollo web en Dreamweaver](https://reader036.vdocuments.co/reader036/viewer/2022062401/588556b81a28ab47268b5513/html5/thumbnails/4.jpg)
¿ALGÚN PROGRAMADOR EN EL GRUPO?
![Page 5: Diseño y Desarrollo web en Dreamweaver](https://reader036.vdocuments.co/reader036/viewer/2022062401/588556b81a28ab47268b5513/html5/thumbnails/5.jpg)
![Page 6: Diseño y Desarrollo web en Dreamweaver](https://reader036.vdocuments.co/reader036/viewer/2022062401/588556b81a28ab47268b5513/html5/thumbnails/6.jpg)
ESTRUCTURAS¿Qué partes tiene mi diseño?
![Page 7: Diseño y Desarrollo web en Dreamweaver](https://reader036.vdocuments.co/reader036/viewer/2022062401/588556b81a28ab47268b5513/html5/thumbnails/7.jpg)
![Page 8: Diseño y Desarrollo web en Dreamweaver](https://reader036.vdocuments.co/reader036/viewer/2022062401/588556b81a28ab47268b5513/html5/thumbnails/8.jpg)
![Page 9: Diseño y Desarrollo web en Dreamweaver](https://reader036.vdocuments.co/reader036/viewer/2022062401/588556b81a28ab47268b5513/html5/thumbnails/9.jpg)
http://www.w3schools.com/w3 schools
![Page 10: Diseño y Desarrollo web en Dreamweaver](https://reader036.vdocuments.co/reader036/viewer/2022062401/588556b81a28ab47268b5513/html5/thumbnails/10.jpg)
![Page 11: Diseño y Desarrollo web en Dreamweaver](https://reader036.vdocuments.co/reader036/viewer/2022062401/588556b81a28ab47268b5513/html5/thumbnails/11.jpg)
![Page 12: Diseño y Desarrollo web en Dreamweaver](https://reader036.vdocuments.co/reader036/viewer/2022062401/588556b81a28ab47268b5513/html5/thumbnails/12.jpg)
SLIDER |
FOOTER
HEADER
Código externo para que se muevan las secciones
SECTION SECTION
SECTION
![Page 13: Diseño y Desarrollo web en Dreamweaver](https://reader036.vdocuments.co/reader036/viewer/2022062401/588556b81a28ab47268b5513/html5/thumbnails/13.jpg)
PUNTO DEINTERÉS
![Page 14: Diseño y Desarrollo web en Dreamweaver](https://reader036.vdocuments.co/reader036/viewer/2022062401/588556b81a28ab47268b5513/html5/thumbnails/14.jpg)
![Page 15: Diseño y Desarrollo web en Dreamweaver](https://reader036.vdocuments.co/reader036/viewer/2022062401/588556b81a28ab47268b5513/html5/thumbnails/15.jpg)
![Page 16: Diseño y Desarrollo web en Dreamweaver](https://reader036.vdocuments.co/reader036/viewer/2022062401/588556b81a28ab47268b5513/html5/thumbnails/16.jpg)
![Page 17: Diseño y Desarrollo web en Dreamweaver](https://reader036.vdocuments.co/reader036/viewer/2022062401/588556b81a28ab47268b5513/html5/thumbnails/17.jpg)
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 DEINTERÉS
![Page 18: Diseño y Desarrollo web en Dreamweaver](https://reader036.vdocuments.co/reader036/viewer/2022062401/588556b81a28ab47268b5513/html5/thumbnails/18.jpg)
FLUJO VISUAL
![Page 19: Diseño y Desarrollo web en Dreamweaver](https://reader036.vdocuments.co/reader036/viewer/2022062401/588556b81a28ab47268b5513/html5/thumbnails/19.jpg)
![Page 20: Diseño y Desarrollo web en Dreamweaver](https://reader036.vdocuments.co/reader036/viewer/2022062401/588556b81a28ab47268b5513/html5/thumbnails/20.jpg)
![Page 21: Diseño y Desarrollo web en Dreamweaver](https://reader036.vdocuments.co/reader036/viewer/2022062401/588556b81a28ab47268b5513/html5/thumbnails/21.jpg)
![Page 22: Diseño y Desarrollo web en Dreamweaver](https://reader036.vdocuments.co/reader036/viewer/2022062401/588556b81a28ab47268b5513/html5/thumbnails/22.jpg)
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
![Page 23: Diseño y Desarrollo web en Dreamweaver](https://reader036.vdocuments.co/reader036/viewer/2022062401/588556b81a28ab47268b5513/html5/thumbnails/23.jpg)
BOCETO
![Page 24: Diseño y Desarrollo web en Dreamweaver](https://reader036.vdocuments.co/reader036/viewer/2022062401/588556b81a28ab47268b5513/html5/thumbnails/24.jpg)
![Page 25: Diseño y Desarrollo web en Dreamweaver](https://reader036.vdocuments.co/reader036/viewer/2022062401/588556b81a28ab47268b5513/html5/thumbnails/25.jpg)
![Page 26: Diseño y Desarrollo web en Dreamweaver](https://reader036.vdocuments.co/reader036/viewer/2022062401/588556b81a28ab47268b5513/html5/thumbnails/26.jpg)
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
![Page 27: Diseño y Desarrollo web en Dreamweaver](https://reader036.vdocuments.co/reader036/viewer/2022062401/588556b81a28ab47268b5513/html5/thumbnails/27.jpg)
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 OESTRUCTURA
![Page 28: Diseño y Desarrollo web en Dreamweaver](https://reader036.vdocuments.co/reader036/viewer/2022062401/588556b81a28ab47268b5513/html5/thumbnails/28.jpg)
HTML & CCSDreamweaver
![Page 29: Diseño y Desarrollo web en Dreamweaver](https://reader036.vdocuments.co/reader036/viewer/2022062401/588556b81a28ab47268b5513/html5/thumbnails/29.jpg)
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 12Formato: Lápiz y Papel