Page 1
Diseño para la RedFundamentos
Mtro. Omar Sosa TzecUniversidad de las Américas Puebla
Page 2
¿Arquitectura de Información?
Page 3
¿Dónde estoy?
¿Qué es aquí?
¿A dónde puedo ir desde aquí?
Page 4
Sistemas de Navegación
Page 5
Sistemas de Navegación
Sistemas deEtiquetado
Page 6
Sistemas de Navegación
Sistemas deEtiquetado
Sistemas de Organización
Page 7
Sistemas de Navegación
Sistemas deEtiquetado
Sistemas de Organización
Sistemas deBúsqueda
Page 8
¿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 10
¿Qué es un modelo de color aditivo y uno sustractivo?
¿Este modelo es para pantalla o para impresión?
¿Qué es PANTONE?
Page 11
¿Qué diferencia hay con CMYK?
¿Qué es el cubo RGB?
El cubo RGB y la escritura de los colores en hexadecimal.
Page 12
¿Qué es profundidad de una imagen?
Page 13
(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
¿Qué es resolución?
¿Qué es dpi?
¿Qué es pixel pitch?
Page 16
Sitio web de la UDLAP.
Page 17
1440x900 px de resolución.
Page 18
1024x768 px de resolución.
Page 19
800x600 px de resolución.
Page 20
El <title></title>
Page 22
El “color del body” y otros colores de fondo.
Page 23
El “color del body” y otros colores de fondo.
Page 24
El “color del body” y otros colores de fondo.
Page 25
La “imagen de fondo para el body”.
Page 26
El “patrón de fondo para el body”.
Page 27
El “patrón de fondo para el body”.
Page 28
El 960 Grid System.
Page 29
El 960 Grid System.
Page 34
La separación decontenido y presentación
Page 35
contenido presentación
Page 36
estructurasemántica formato
Page 37
HypertextMarkup
Language
CascadeStyle
Sheets
Page 40
.html .css
.jpg
.js
.swf
Page 41
Lo que el usuario ve: estilos activos.
Page 42
Lo que un robot puede indizar: estilos inactivos.
Page 43
Lo que el usuario ve: estilos activos.
Page 44
Lo que un robot puede indizar: estilos inactivos.
Page 45
Lo que el usuario ve: estilos activos.
Page 46
Lo que un robot puede indizar: estilos inactivos.
Page 47
CSS Zen Gardenhttp://www.csszengarden.com/
Page 48
El modelo de caja
Page 49
The box modelhttp://www.w3.org/TR/1998/REC-CSS2-19980512/box.html
Page 57
The box modelhttp://www.w3.org/TR/1998/REC-CSS2-19980512/box.html
Page 58
The box modelhttp://www.w3.org/TR/1998/REC-CSS2-19980512/box.html
Page 60
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
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
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
* La entrega es indispensable para la siguiente sesión de laboratorio.
Page 64
Gracias
http://tzek-design.com