1. Pasos previos en el
diseño de sitios web
Guia realizada por el Prof. Jorge Llantén B. - www.j2.cl
2. Hacer una página a partir del
código es demoroso
Guia realizada por el Prof. Jorge Llantén B. - www.j2.cl
3. Hacer un boceto de un sitio
realizándola con HTML
es arriesgado
Guia realizada por el Prof. Jorge Llantén B. - www.j2.cl
4. Hacer un boceto de un sitio
realizándola con HTML
es arriesgado
Por que si al cliente no le gusta
habrá sido tiempo perdido.
Guia realizada por el Prof. Jorge Llantén B. - www.j2.cl
5. Que se debe hacer
entonces?
Teniendo claro los objetivos que el cliente requiere
para su sitio, se crea un mapa del sitio para saber
que páginas llevará y cual va ser su jerarquía.
Guia realizada por el Prof. Jorge Llantén B. - www.j2.cl
6. Que se debe hacer
entonces?
Ejemplo 1:
Mapa del Sitio
Guia realizada por el Prof. Jorge Llantén B. - www.j2.cl
7. Que se debe hacer
entonces?
Ejemplo 2:
Mapa del Sitio
HOME
f
t
g+
index.html
QUIENES
SOMOS
quienes-somos.html
SERVICIOS
servicios.html
IMPR. OFFSET
offset.html
IMPR. DIGITAL
digital.html
IMPLEMENTACION
implementacion.html
NOTICIAS
noticias.php
BLOG
blog.php
CONTACTO
contacto.php
PORTAFOLIO
Guia realizada por el Prof. Jorge Llantén B. - www.j2.cl
12. Paso 2: Wireframe
Se define estructura y
disposición de elementos
Guia realizada por el Prof. Jorge Llantén B. - www.j2.cl
13. Paso 2: Wireframe
Se define estructura y
disposición de elementos
No se definen colores,
imágenes y textos
Guia realizada por el Prof. Jorge Llantén B. - www.j2.cl
14. Paso 2: Wireframe
Se define estructura y
disposición de elementos
No se definen colores,
imágenes y textos
Se trabaja con elementos
simulados y en escala de grises
Guia realizada por el Prof. Jorge Llantén B. - www.j2.cl
15. Paso 2: Wireframe
Se define estructura y
disposición de elementos
No se definen colores,
imágenes y textos
Se trabaja con elementos
simulados y en escala de grises
Esto es un trabajo más rápido
para mostrarle al cliente como
primer boceto.
Guia realizada por el Prof. Jorge Llantén B. - www.j2.cl
17. Al hacer una web con HTML y en
boceto hay procesos repetitivos
Guia realizada por el Prof. Jorge Llantén B. - www.j2.cl
18. Para solucionar esto existen los
FRAMEWORKS que son pasos previos ya
hechos para comenzar a ordenar y colocar
nuestro contenido.
Guia realizada por el Prof. Jorge Llantén B. - www.j2.cl
20. Existen muchos
FRAMEWORKS para diferentes
cosas y el aconsejable para
principiantes es
960 Grid Systems
Guia realizada por el Prof. Jorge Llantén B. - www.j2.cl
21. Ir a su web
www.960.gs
Guia realizada por el Prof. Jorge Llantén B. - www.j2.cl