Fundamentos para Diseño Web

1,342 views

Published on

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.

Published in: Design
  • Be the first to comment

  • Be the first to like this

Fundamentos para Diseño Web

  1. 1. Diseño para la RedFundamentosMtro. Omar Sosa TzecUniversidad de las Américas Puebla
  2. 2. ¿Arquitectura deInformación?
  3. 3. ¿Dónde estoy?¿Qué es aquí?¿A dónde puedo ir desde aquí?
  4. 4. Sistemas deNavegación
  5. 5. Sistemas de NavegaciónSistemas de Etiquetado
  6. 6. Sistemas de NavegaciónSistemas de Etiquetado Sistemas de Organización
  7. 7. Sistemas de NavegaciónSistemas de Sistemas de Etiquetado Búsqueda Sistemas de Organización
  8. 8. ¿Dónde estoy? ¿Cuál es el sistema ¿Cuál es el sistema de organización? de navegación?¿Qué es aquí? ¿Cuál es el sistema ¿Dónde está el sistema¿A dónde puedo ir desde aquí? de etiquetado? de búsqueda?
  9. 9. Color
  10. 10. ¿Qué es un modelo de coloraditivo y uno sustractivo?¿Este modelo es para pantallao para impresión?¿Qué es PANTONE?
  11. 11. ¿Qué diferencia hay conCMYK?¿Qué es el cubo RGB?El cubo RGB y la escritura delos colores en hexadecimal.
  12. 12. ¿Qué es profundidadde una imagen?
  13. 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
  14. 14. ¿Qué es resolución? ¿Qué es pixel pitch?¿Qué es dpi?
  15. 15. 72dpi
  16. 16. Sitio web de la UDLAP.
  17. 17. 1440x900 px de resolución.
  18. 18. 1024x768 px de resolución.
  19. 19. 800x600 px de resolución.
  20. 20. El <title></title>
  21. 21. El <body></body>
  22. 22. El “color del body” y otros colores de fondo.
  23. 23. El “color del body” y otros colores de fondo.
  24. 24. El “color del body” y otros colores de fondo.
  25. 25. La “imagen de fondo para el body”.
  26. 26. El “patrón de fondo para el body”.
  27. 27. El “patrón de fondo para el body”.
  28. 28. El 960 Grid System.
  29. 29. El 960 Grid System.
  30. 30. Layout líquido.
  31. 31. Layout líquido.
  32. 32. Layout fijo.
  33. 33. Layout fijo.
  34. 34. La separación decontenido y presentación
  35. 35. contenido presentación
  36. 36. estructura formatosemántica
  37. 37. Hypertext Cascade Markup StyleLanguage Sheets
  38. 38. .html .css
  39. 39. .html .css
  40. 40. .swf .jpg.html .css .js
  41. 41. Lo que el usuario ve: estilos activos.
  42. 42. Lo que un robot puede indizar: estilos inactivos.
  43. 43. Lo que el usuario ve: estilos activos.
  44. 44. Lo que un robot puede indizar: estilos inactivos.
  45. 45. Lo que el usuario ve: estilos activos.
  46. 46. Lo que un robot puede indizar: estilos inactivos.
  47. 47. CSS Zen Gardenhttp://www.csszengarden.com/
  48. 48. El modelo de caja
  49. 49. The box modelhttp://www.w3.org/TR/1998/REC-CSS2-19980512/box.html
  50. 50. The box modelhttp://www.w3.org/TR/1998/REC-CSS2-19980512/box.html
  51. 51. The box modelhttp://www.w3.org/TR/1998/REC-CSS2-19980512/box.html
  52. 52. Tarea
  53. 53. Ya sea en Illustrator o Photoshop deberás sobre unartboard/canvas de 1024x768 pixeles de tamaño,realizar una caja no mayor a 960px de ancho y unaaltura 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 elfondo ya establecido.
  54. 54. En la caja pondrás un párrafo cuyo texto será unacorta biografía de ti: quién eres, cuáles son tushobbies o en qué te gustaría trabajar.
  55. 55. Tienes que decidir y apuntar cuánto le pusiste a lacaja 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.
  56. 56. * La entrega es indispensable para la siguientesesión de laboratorio.
  57. 57. Graciashttp://tzek-design.com

×