Fundamentos para Diseño Web
64
Diseño para la Red Fundamentos Mtro. Omar Sosa Tzec Universidad de las Américas Puebla
-
Upload
omar-sosa-tzec -
Category
Design
-
view
1.159 -
download
0
description
Sesión teórica para el curso de Diseño para la Red de la Universidad de las Américas Puebla en su versión 2011.
Transcript of Fundamentos para Diseño Web
Diseño para la RedFundamentos
Mtro. Omar Sosa TzecUniversidad de las Américas Puebla
¿Arquitectura de Información?
¿Dónde estoy?
¿Qué es aquí?
¿A dónde puedo ir desde aquí?
Sistemas de Navegación
Sistemas de Navegación
Sistemas deEtiquetado
Sistemas de Navegación
Sistemas deEtiquetado
Sistemas de Organización
Sistemas de Navegación
Sistemas deEtiquetado
Sistemas de Organización
Sistemas deBúsqueda
¿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?
Color
¿Qué es un modelo de color aditivo y uno sustractivo?
¿Este modelo es para pantalla o para impresión?
¿Qué es PANTONE?
¿Qué diferencia hay con CMYK?
¿Qué es el cubo RGB?
El cubo RGB y la escritura de los colores en hexadecimal.
¿Qué es profundidad de una imagen?
(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
¿Qué es resolución?
¿Qué es dpi?
¿Qué es pixel pitch?
dpi72
Sitio web de la UDLAP.
1440x900 px de resolución.
1024x768 px de resolución.
800x600 px de resolución.
El <title></title>
El <body></body>
El “color del body” y otros colores de fondo.
El “color del body” y otros colores de fondo.
El “color del body” y otros colores de fondo.
La “imagen de fondo para el body”.
El “patrón de fondo para el body”.
El “patrón de fondo para el body”.
El 960 Grid System.
El 960 Grid System.
Layout líquido.
Layout líquido.
Layout fijo.
Layout fijo.
La separación decontenido y presentación
contenido presentación
estructurasemántica formato
HypertextMarkup
Language
CascadeStyle
Sheets
.html .css
.html .css
.html .css
.jpg
.js
.swf
Lo que el usuario ve: estilos activos.
Lo que un robot puede indizar: estilos inactivos.
Lo que el usuario ve: estilos activos.
Lo que un robot puede indizar: estilos inactivos.
Lo que el usuario ve: estilos activos.
Lo que un robot puede indizar: estilos inactivos.
El modelo de caja
The box modelhttp://www.w3.org/TR/1998/REC-CSS2-19980512/box.html
The box modelhttp://www.w3.org/TR/1998/REC-CSS2-19980512/box.html
The box modelhttp://www.w3.org/TR/1998/REC-CSS2-19980512/box.html
Tarea
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.
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.
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.
* La entrega es indispensable para la siguiente sesión de laboratorio.
