Fundamentos para Diseño Web

  • 1,137 views
Uploaded 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.

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.

More in: Design
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Be the first to comment
    Be the first to like this
No Downloads

Views

Total Views
1,137
On Slideshare
0
From Embeds
0
Number of Embeds
0

Actions

Shares
Downloads
31
Comments
0
Likes
0

Embeds 0

No embeds

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
    No notes for slide

Transcript

  • 1. Diseño para la RedFundamentosMtro. Omar Sosa TzecUniversidad de las Américas Puebla
  • 2. ¿Arquitectura deInformación?
  • 3. ¿Dónde estoy?¿Qué es aquí?¿A dónde puedo ir desde aquí?
  • 4. Sistemas deNavegación
  • 5. Sistemas de NavegaciónSistemas de Etiquetado
  • 6. Sistemas de NavegaciónSistemas de Etiquetado Sistemas de Organización
  • 7. Sistemas de NavegaciónSistemas de Sistemas de Etiquetado Búsqueda Sistemas de Organización
  • 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. Color
  • 10. ¿Qué es un modelo de coloraditivo y uno sustractivo?¿Este modelo es para pantallao para impresión?¿Qué es PANTONE?
  • 11. ¿Qué diferencia hay conCMYK?¿Qué es el cubo RGB?El cubo RGB y la escritura delos colores en hexadecimal.
  • 12. ¿Qué es profundidadde una imagen?
  • 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. ¿Qué es resolución? ¿Qué es pixel pitch?¿Qué es dpi?
  • 15. 72dpi
  • 16. Sitio web de la UDLAP.
  • 17. 1440x900 px de resolución.
  • 18. 1024x768 px de resolución.
  • 19. 800x600 px de resolución.
  • 20. El <title></title>
  • 21. El <body></body>
  • 22. El “color del body” y otros colores de fondo.
  • 23. El “color del body” y otros colores de fondo.
  • 24. El “color del body” y otros colores de fondo.
  • 25. La “imagen de fondo para el body”.
  • 26. El “patrón de fondo para el body”.
  • 27. El “patrón de fondo para el body”.
  • 28. El 960 Grid System.
  • 29. El 960 Grid System.
  • 30. Layout líquido.
  • 31. Layout líquido.
  • 32. Layout fijo.
  • 33. Layout fijo.
  • 34. La separación decontenido y presentación
  • 35. contenido presentación
  • 36. estructura formatosemántica
  • 37. Hypertext Cascade Markup StyleLanguage Sheets
  • 38. .html .css
  • 39. .html .css
  • 40. .swf .jpg.html .css .js
  • 41. Lo que el usuario ve: estilos activos.
  • 42. Lo que un robot puede indizar: estilos inactivos.
  • 43. Lo que el usuario ve: estilos activos.
  • 44. Lo que un robot puede indizar: estilos inactivos.
  • 45. Lo que el usuario ve: estilos activos.
  • 46. Lo que un robot puede indizar: estilos inactivos.
  • 47. CSS Zen Gardenhttp://www.csszengarden.com/
  • 48. El modelo de caja
  • 49. The box modelhttp://www.w3.org/TR/1998/REC-CSS2-19980512/box.html
  • 50. The box modelhttp://www.w3.org/TR/1998/REC-CSS2-19980512/box.html
  • 51. The box modelhttp://www.w3.org/TR/1998/REC-CSS2-19980512/box.html
  • 52. Tarea
  • 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. 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. 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. * La entrega es indispensable para la siguientesesión de laboratorio.
  • 57. Graciashttp://tzek-design.com