Fundamentos para Diseño Web
-
Upload
omar-sosa-tzec -
Category
Design
-
view
1.163 -
download
0
description
Transcript of Fundamentos para Diseño Web
![Page 1: Fundamentos para Diseño Web](https://reader034.fdocumento.com/reader034/viewer/2022051400/54bc2d004a795955638b4581/html5/thumbnails/1.jpg)
Diseño para la RedFundamentos
Mtro. Omar Sosa TzecUniversidad de las Américas Puebla
![Page 2: Fundamentos para Diseño Web](https://reader034.fdocumento.com/reader034/viewer/2022051400/54bc2d004a795955638b4581/html5/thumbnails/2.jpg)
¿Arquitectura de Información?
![Page 3: Fundamentos para Diseño Web](https://reader034.fdocumento.com/reader034/viewer/2022051400/54bc2d004a795955638b4581/html5/thumbnails/3.jpg)
¿Dónde estoy?
¿Qué es aquí?
¿A dónde puedo ir desde aquí?
![Page 4: Fundamentos para Diseño Web](https://reader034.fdocumento.com/reader034/viewer/2022051400/54bc2d004a795955638b4581/html5/thumbnails/4.jpg)
Sistemas de Navegación
![Page 5: Fundamentos para Diseño Web](https://reader034.fdocumento.com/reader034/viewer/2022051400/54bc2d004a795955638b4581/html5/thumbnails/5.jpg)
Sistemas de Navegación
Sistemas deEtiquetado
![Page 6: Fundamentos para Diseño Web](https://reader034.fdocumento.com/reader034/viewer/2022051400/54bc2d004a795955638b4581/html5/thumbnails/6.jpg)
Sistemas de Navegación
Sistemas deEtiquetado
Sistemas de Organización
![Page 7: Fundamentos para Diseño Web](https://reader034.fdocumento.com/reader034/viewer/2022051400/54bc2d004a795955638b4581/html5/thumbnails/7.jpg)
Sistemas de Navegación
Sistemas deEtiquetado
Sistemas de Organización
Sistemas deBúsqueda
![Page 8: Fundamentos para Diseño Web](https://reader034.fdocumento.com/reader034/viewer/2022051400/54bc2d004a795955638b4581/html5/thumbnails/8.jpg)
¿Dónde estoy?
¿Qué es aquí?
¿A dónde puedo ir desde aquí?
¿Cuál es el sistemade organización?
¿Cuál es el sistemade etiquetado?
¿Cuál es el sistemade navegación?
¿Dónde está el sistemade búsqueda?
![Page 9: Fundamentos para Diseño Web](https://reader034.fdocumento.com/reader034/viewer/2022051400/54bc2d004a795955638b4581/html5/thumbnails/9.jpg)
Color
![Page 10: Fundamentos para Diseño Web](https://reader034.fdocumento.com/reader034/viewer/2022051400/54bc2d004a795955638b4581/html5/thumbnails/10.jpg)
¿Qué es un modelo de color aditivo y uno sustractivo?
¿Este modelo es para pantalla o para impresión?
¿Qué es PANTONE?
![Page 11: Fundamentos para Diseño Web](https://reader034.fdocumento.com/reader034/viewer/2022051400/54bc2d004a795955638b4581/html5/thumbnails/11.jpg)
¿Qué diferencia hay con CMYK?
¿Qué es el cubo RGB?
El cubo RGB y la escritura de los colores en hexadecimal.
![Page 12: Fundamentos para Diseño Web](https://reader034.fdocumento.com/reader034/viewer/2022051400/54bc2d004a795955638b4581/html5/thumbnails/12.jpg)
¿Qué es profundidad de una imagen?
![Page 13: Fundamentos para Diseño Web](https://reader034.fdocumento.com/reader034/viewer/2022051400/54bc2d004a795955638b4581/html5/thumbnails/13.jpg)
(R, G, B) - 8 bits de profundidad (de 0 a 255).
#RGB - 8 bits de profundidad (de 0 a FF).
(0,0,0) = #000000 = #000
(255,255, 255) = #ffffff = #fff
(255, 0, 0) = #ff0000
(197, 175, 228) = #cbade7
![Page 14: Fundamentos para Diseño Web](https://reader034.fdocumento.com/reader034/viewer/2022051400/54bc2d004a795955638b4581/html5/thumbnails/14.jpg)
¿Qué es resolución?
¿Qué es dpi?
¿Qué es pixel pitch?
![Page 15: Fundamentos para Diseño Web](https://reader034.fdocumento.com/reader034/viewer/2022051400/54bc2d004a795955638b4581/html5/thumbnails/15.jpg)
dpi72
![Page 16: Fundamentos para Diseño Web](https://reader034.fdocumento.com/reader034/viewer/2022051400/54bc2d004a795955638b4581/html5/thumbnails/16.jpg)
Sitio web de la UDLAP.
![Page 17: Fundamentos para Diseño Web](https://reader034.fdocumento.com/reader034/viewer/2022051400/54bc2d004a795955638b4581/html5/thumbnails/17.jpg)
1440x900 px de resolución.
![Page 18: Fundamentos para Diseño Web](https://reader034.fdocumento.com/reader034/viewer/2022051400/54bc2d004a795955638b4581/html5/thumbnails/18.jpg)
1024x768 px de resolución.
![Page 19: Fundamentos para Diseño Web](https://reader034.fdocumento.com/reader034/viewer/2022051400/54bc2d004a795955638b4581/html5/thumbnails/19.jpg)
800x600 px de resolución.
![Page 20: Fundamentos para Diseño Web](https://reader034.fdocumento.com/reader034/viewer/2022051400/54bc2d004a795955638b4581/html5/thumbnails/20.jpg)
El <title></title>
![Page 21: Fundamentos para Diseño Web](https://reader034.fdocumento.com/reader034/viewer/2022051400/54bc2d004a795955638b4581/html5/thumbnails/21.jpg)
El <body></body>
![Page 22: Fundamentos para Diseño Web](https://reader034.fdocumento.com/reader034/viewer/2022051400/54bc2d004a795955638b4581/html5/thumbnails/22.jpg)
El “color del body” y otros colores de fondo.
![Page 23: Fundamentos para Diseño Web](https://reader034.fdocumento.com/reader034/viewer/2022051400/54bc2d004a795955638b4581/html5/thumbnails/23.jpg)
El “color del body” y otros colores de fondo.
![Page 24: Fundamentos para Diseño Web](https://reader034.fdocumento.com/reader034/viewer/2022051400/54bc2d004a795955638b4581/html5/thumbnails/24.jpg)
El “color del body” y otros colores de fondo.
![Page 25: Fundamentos para Diseño Web](https://reader034.fdocumento.com/reader034/viewer/2022051400/54bc2d004a795955638b4581/html5/thumbnails/25.jpg)
La “imagen de fondo para el body”.
![Page 26: Fundamentos para Diseño Web](https://reader034.fdocumento.com/reader034/viewer/2022051400/54bc2d004a795955638b4581/html5/thumbnails/26.jpg)
El “patrón de fondo para el body”.
![Page 27: Fundamentos para Diseño Web](https://reader034.fdocumento.com/reader034/viewer/2022051400/54bc2d004a795955638b4581/html5/thumbnails/27.jpg)
El “patrón de fondo para el body”.
![Page 28: Fundamentos para Diseño Web](https://reader034.fdocumento.com/reader034/viewer/2022051400/54bc2d004a795955638b4581/html5/thumbnails/28.jpg)
El 960 Grid System.
![Page 29: Fundamentos para Diseño Web](https://reader034.fdocumento.com/reader034/viewer/2022051400/54bc2d004a795955638b4581/html5/thumbnails/29.jpg)
El 960 Grid System.
![Page 30: Fundamentos para Diseño Web](https://reader034.fdocumento.com/reader034/viewer/2022051400/54bc2d004a795955638b4581/html5/thumbnails/30.jpg)
Layout líquido.
![Page 31: Fundamentos para Diseño Web](https://reader034.fdocumento.com/reader034/viewer/2022051400/54bc2d004a795955638b4581/html5/thumbnails/31.jpg)
Layout líquido.
![Page 32: Fundamentos para Diseño Web](https://reader034.fdocumento.com/reader034/viewer/2022051400/54bc2d004a795955638b4581/html5/thumbnails/32.jpg)
Layout fijo.
![Page 33: Fundamentos para Diseño Web](https://reader034.fdocumento.com/reader034/viewer/2022051400/54bc2d004a795955638b4581/html5/thumbnails/33.jpg)
Layout fijo.
![Page 34: Fundamentos para Diseño Web](https://reader034.fdocumento.com/reader034/viewer/2022051400/54bc2d004a795955638b4581/html5/thumbnails/34.jpg)
La separación decontenido y presentación
![Page 35: Fundamentos para Diseño Web](https://reader034.fdocumento.com/reader034/viewer/2022051400/54bc2d004a795955638b4581/html5/thumbnails/35.jpg)
contenido presentación
![Page 36: Fundamentos para Diseño Web](https://reader034.fdocumento.com/reader034/viewer/2022051400/54bc2d004a795955638b4581/html5/thumbnails/36.jpg)
estructurasemántica formato
![Page 37: Fundamentos para Diseño Web](https://reader034.fdocumento.com/reader034/viewer/2022051400/54bc2d004a795955638b4581/html5/thumbnails/37.jpg)
HypertextMarkup
Language
CascadeStyle
Sheets
![Page 38: Fundamentos para Diseño Web](https://reader034.fdocumento.com/reader034/viewer/2022051400/54bc2d004a795955638b4581/html5/thumbnails/38.jpg)
.html .css
![Page 39: Fundamentos para Diseño Web](https://reader034.fdocumento.com/reader034/viewer/2022051400/54bc2d004a795955638b4581/html5/thumbnails/39.jpg)
.html .css
![Page 40: Fundamentos para Diseño Web](https://reader034.fdocumento.com/reader034/viewer/2022051400/54bc2d004a795955638b4581/html5/thumbnails/40.jpg)
.html .css
.jpg
.js
.swf
![Page 41: Fundamentos para Diseño Web](https://reader034.fdocumento.com/reader034/viewer/2022051400/54bc2d004a795955638b4581/html5/thumbnails/41.jpg)
Lo que el usuario ve: estilos activos.
![Page 42: Fundamentos para Diseño Web](https://reader034.fdocumento.com/reader034/viewer/2022051400/54bc2d004a795955638b4581/html5/thumbnails/42.jpg)
Lo que un robot puede indizar: estilos inactivos.
![Page 43: Fundamentos para Diseño Web](https://reader034.fdocumento.com/reader034/viewer/2022051400/54bc2d004a795955638b4581/html5/thumbnails/43.jpg)
Lo que el usuario ve: estilos activos.
![Page 44: Fundamentos para Diseño Web](https://reader034.fdocumento.com/reader034/viewer/2022051400/54bc2d004a795955638b4581/html5/thumbnails/44.jpg)
Lo que un robot puede indizar: estilos inactivos.
![Page 45: Fundamentos para Diseño Web](https://reader034.fdocumento.com/reader034/viewer/2022051400/54bc2d004a795955638b4581/html5/thumbnails/45.jpg)
Lo que el usuario ve: estilos activos.
![Page 46: Fundamentos para Diseño Web](https://reader034.fdocumento.com/reader034/viewer/2022051400/54bc2d004a795955638b4581/html5/thumbnails/46.jpg)
Lo que un robot puede indizar: estilos inactivos.
![Page 48: Fundamentos para Diseño Web](https://reader034.fdocumento.com/reader034/viewer/2022051400/54bc2d004a795955638b4581/html5/thumbnails/48.jpg)
El modelo de caja
![Page 49: Fundamentos para Diseño Web](https://reader034.fdocumento.com/reader034/viewer/2022051400/54bc2d004a795955638b4581/html5/thumbnails/49.jpg)
The box modelhttp://www.w3.org/TR/1998/REC-CSS2-19980512/box.html
![Page 50: Fundamentos para Diseño Web](https://reader034.fdocumento.com/reader034/viewer/2022051400/54bc2d004a795955638b4581/html5/thumbnails/50.jpg)
![Page 51: Fundamentos para Diseño Web](https://reader034.fdocumento.com/reader034/viewer/2022051400/54bc2d004a795955638b4581/html5/thumbnails/51.jpg)
![Page 52: Fundamentos para Diseño Web](https://reader034.fdocumento.com/reader034/viewer/2022051400/54bc2d004a795955638b4581/html5/thumbnails/52.jpg)
![Page 53: Fundamentos para Diseño Web](https://reader034.fdocumento.com/reader034/viewer/2022051400/54bc2d004a795955638b4581/html5/thumbnails/53.jpg)
![Page 54: Fundamentos para Diseño Web](https://reader034.fdocumento.com/reader034/viewer/2022051400/54bc2d004a795955638b4581/html5/thumbnails/54.jpg)
![Page 55: Fundamentos para Diseño Web](https://reader034.fdocumento.com/reader034/viewer/2022051400/54bc2d004a795955638b4581/html5/thumbnails/55.jpg)
![Page 56: Fundamentos para Diseño Web](https://reader034.fdocumento.com/reader034/viewer/2022051400/54bc2d004a795955638b4581/html5/thumbnails/56.jpg)
![Page 57: Fundamentos para Diseño Web](https://reader034.fdocumento.com/reader034/viewer/2022051400/54bc2d004a795955638b4581/html5/thumbnails/57.jpg)
The box modelhttp://www.w3.org/TR/1998/REC-CSS2-19980512/box.html
![Page 58: Fundamentos para Diseño Web](https://reader034.fdocumento.com/reader034/viewer/2022051400/54bc2d004a795955638b4581/html5/thumbnails/58.jpg)
The box modelhttp://www.w3.org/TR/1998/REC-CSS2-19980512/box.html
![Page 59: Fundamentos para Diseño Web](https://reader034.fdocumento.com/reader034/viewer/2022051400/54bc2d004a795955638b4581/html5/thumbnails/59.jpg)
Tarea
![Page 60: Fundamentos para Diseño Web](https://reader034.fdocumento.com/reader034/viewer/2022051400/54bc2d004a795955638b4581/html5/thumbnails/60.jpg)
Ya sea en Illustrator o Photoshop deberás sobre un artboard/canvas de 1024x768 pixeles de tamaño, realizar una caja no mayor a 960px de ancho y una altura no mayor a 600px de alto.
El artboard/canvas lo pintarás de un color sólido.
El fondo de la caja será de un color adecuado para el fondo ya establecido.
![Page 61: Fundamentos para Diseño Web](https://reader034.fdocumento.com/reader034/viewer/2022051400/54bc2d004a795955638b4581/html5/thumbnails/61.jpg)
En la caja pondrás un párrafo cuyo texto será una corta biografía de ti: quién eres, cuáles son tus hobbies o en qué te gustaría trabajar.
![Page 62: Fundamentos para Diseño Web](https://reader034.fdocumento.com/reader034/viewer/2022051400/54bc2d004a795955638b4581/html5/thumbnails/62.jpg)
Tienes que decidir y apuntar cuánto le pusiste a la caja de:
* ancho (en pixeles).* alto (en pixeles).* espaciado interior (en pixeles).* el puntaje del texto (en pixeles).* el valor hexadecimal del color de fondo general.* el valor hexadecimal del color de fondo de la caja.
![Page 63: Fundamentos para Diseño Web](https://reader034.fdocumento.com/reader034/viewer/2022051400/54bc2d004a795955638b4581/html5/thumbnails/63.jpg)
* La entrega es indispensable para la siguiente sesión de laboratorio.