Cómo armar un sitio Web? Conceptos básicos a la hora de armar un Sitio Web
Agenda Organización y Procesos   Colores Gráficos Fotos Tipografía Del Prototipo al HTML Del HTML a la Web
Planificación y Organización <ul><li>Utilizar lápiz y papel en la etapa inicial </li></ul><ul><li>Enumerar los temas que s...
Storyboard y Prototipo Storyboard Prototipo <ul><li>La diferencia entre el Storyboard y el Prototipo está entre el concept...
Procesos Relevamiento Mapa de Contenidos (Mapa Conceptual) Storyboard Prototipo Diseño Final Relevamiento de la empresa. -...
Colores <ul><li>Circulo Cromático </li></ul><ul><li>Colores Complementarios </li></ul><ul><li>RGB (Monitores) </li></ul><u...
Gráficos <ul><li>Diferencias entre JPG y GIF </li></ul><ul><li>Peso </li></ul><ul><ul><li>GIF: peso varia por tamaño y por...
Fotos de contenido <ul><li>Si el espacio para un contenido de uma imagen fotografica es muy reducido, nunca utilices toda ...
Fotos de contenido <ul><li>Conviene seleccionar el concepto más importante de esa foto y amplicarlo a ese espacio. </li></...
Tipografías <ul><li>Es conveniente utilizar tipografias sin “Serif” (Sans Serif), para mejorar la legibilidad del usuario ...
Del Prototipo al HTML <ul><li>Codigo HTML (Hyper Text Markup Language) </li></ul>                                         ...
Del HTML a Web Usuario INTERNET Hosting del Sitio                                                           
Upcoming SlideShare
Loading in...5
×

Sitio web

735

Published on

0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total Views
735
On Slideshare
0
From Embeds
0
Number of Embeds
0
Actions
Shares
0
Downloads
12
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

Sitio web

  1. 1. Cómo armar un sitio Web? Conceptos básicos a la hora de armar un Sitio Web
  2. 2. Agenda Organización y Procesos Colores Gráficos Fotos Tipografía Del Prototipo al HTML Del HTML a la Web
  3. 3. Planificación y Organización <ul><li>Utilizar lápiz y papel en la etapa inicial </li></ul><ul><li>Enumerar los temas que se interesan incluir </li></ul><ul><li>Agrupar los temas relacionados: establecer categorías </li></ul><ul><li>Dibujar un diagrama o mapa conceptual del sitio (site map) </li></ul><ul><li>Dibujar el storyboard (conceptual) </li></ul><ul><li>Crear prototipo (visual) </li></ul><ul><li>Realizar pruebas de usabilidad </li></ul><ul><li>Incorporar cambios sugeridos </li></ul>
  4. 4. Storyboard y Prototipo Storyboard Prototipo <ul><li>La diferencia entre el Storyboard y el Prototipo está entre el concepto del sitio a comunicar y la composición visual. </li></ul>¿Qué? ¿Cómo?
  5. 5. Procesos Relevamiento Mapa de Contenidos (Mapa Conceptual) Storyboard Prototipo Diseño Final Relevamiento de la empresa. -¿qué hace? -¿cómo funciona? -etc.. Toda la información de la empresa, con sus productos o servicios que se verán reflejada en el sitio En lápiz Estructura “Cuadrada” En Compu Feedback Modificaciones y Pruebas Idea - Boceto
  6. 6. Colores <ul><li>Circulo Cromático </li></ul><ul><li>Colores Complementarios </li></ul><ul><li>RGB (Monitores) </li></ul><ul><li>CYMK </li></ul><ul><li>Colores Web (Browser Safe Colors) 216 </li></ul>
  7. 7. Gráficos <ul><li>Diferencias entre JPG y GIF </li></ul><ul><li>Peso </li></ul><ul><ul><li>GIF: peso varia por tamaño y por cantidad de colores (256) </li></ul></ul><ul><ul><li>JPG: peso varia por tamaño y según la compresión de la imagen (16 millones) </li></ul></ul>
  8. 8. Fotos de contenido <ul><li>Si el espacio para un contenido de uma imagen fotografica es muy reducido, nunca utilices toda la foto para ese espacio, sino... </li></ul>Foto original Espacio para publicar la foto Resultado Reducción
  9. 9. Fotos de contenido <ul><li>Conviene seleccionar el concepto más importante de esa foto y amplicarlo a ese espacio. </li></ul>Foto original Resultado Selección del concepto más importante de la foto Reducción
  10. 10. Tipografías <ul><li>Es conveniente utilizar tipografias sin “Serif” (Sans Serif), para mejorar la legibilidad del usuario y poder reducir aun más el tamaño y utilizar más combinaciones de colores. </li></ul>Tipografia del sitio prueba Tipografia del sitio prueba Tipografia del sitio prueba Tipografia del sitio prueba Tipografia del sitio prueba Tipografia del sitio Tipografia del sitio Tipografia del sitio Tipografia del sitio prueba Tipografia del sitio prueba Tipografia del sitio prueba Tipografia del sitio prueba Tipografia del sitio Tipografia del sitio Tipografia del sitio Tipografia del sitio Familia Arial Familia Times New Roman Familias Sans Serif: Arial, Verdana, Tahoma, Futura, Zurich, etc... Sans Serif Serif                                                           
  11. 11. Del Prototipo al HTML <ul><li>Codigo HTML (Hyper Text Markup Language) </li></ul>                                                          
  12. 12. Del HTML a Web Usuario INTERNET Hosting del Sitio                                                           
  1. A particular slide catching your eye?

    Clipping is a handy way to collect important slides you want to go back to later.

×