Cmo armar un sitio Web

1
Cómo armar un sitio Web?

• Conceptos básicos a la hora de armar un Sitio Web

2
Agenda
Organización y Procesos
Colores
Gráficos
Fotos
Tipografía
Del Prototipo al HTML
Del HTML a la Web
3
Planificación y Organización

• Utilizar lápiz y papel en la etapa inicial
• Enumerar los temas que se interesan incluir
• Agrupar los temas relacionados establecer
  categorías
• Dibujar un diagrama o mapa conceptual del sitio
  (site map)
• Dibujar el storyboard (conceptual)
• Crear prototipo (visual)
• Realizar pruebas de usabilidad
• Incorporar cambios sugeridos

4
Storyboard y Prototipo

• La diferencia entre el Storyboard y el Prototipo
  está entre el concepto del sitio a comunicar y la
  composición visual.

Storyboard
Prototipo
Qué?
Cómo?
5
Procesos
Idea - Boceto
Diseño Final
Relevamiento
Storyboard
Toda la información de la empresa, con sus
productos o servicios que se verán reflejada en
el sitio
Relevamiento de la empresa. -qué hace? -cómo
funciona? -etc..
En lápiz Estructura Cuadrada
En Compu Feedback
Modificaciones y Pruebas
Mapa de Contenidos (Mapa Conceptual)
Prototipo
6
Colores

• Circulo Cromático
• Colores Complementarios
• RGB (Monitores)
• CYMK
• Colores Web (Browser Safe Colors) 216

7
Gráficos

• Diferencias entre JPG y GIF
• Peso
• GIF peso varia por tamaño y por cantidad de
  colores (256)
• JPG peso varia por tamaño y según la compresión
  de la imagen (16 millones)

8
Fotos de contenido

• Si el espacio para un contenido de uma imagen
  fotografica es muy reducido, nunca utilices toda
  la foto para ese espacio, sino...

Espacio para publicar la foto
Reducción
Resultado
Foto original
9
Fotos de contenido

• Conviene seleccionar el concepto más importante
  de esa foto y amplicarlo a ese espacio.

Selección del concepto más importante de la foto
Reducción
Foto original
Resultado
10
Tipografías

• 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.

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
Sans Serif
Serif
Familias Sans Serif Arial, Verdana, Tahoma,
Futura, Zurich, etc...
11
Del Prototipo al HTML

• Codigo HTML (Hyper Text Markup Language)

12
Del HTML a Web
INTERNET
Hosting del Sitio
Usuario