DISEÑO DE PAGINAS WEB

55
DISEÑO DE PAGINAS WEB DISEÑO ANATOMIA ETAPAS PARTES DISEÑOS M DISEÑOS B PRACTICA

Transcript of DISEÑO DE PAGINAS WEB

Page 1: DISEÑO DE PAGINAS WEB

DISEÑO DE PAGINAS WEB

DISEÑO ANATOMIA ETAPAS PARTES DISEÑOS M DISEÑOS B PRACTICA

Page 2: DISEÑO DE PAGINAS WEB

QUE ES UNA PAGINA WEB?Es un tipo de fichero de texto con extensión .htm o .html(hipertext markup language - lenguaje de hipertexto)Con tiene el texto + unos códigos que permiten dar formato a la pagina en el navegador.

DISEÑO DE PAGINAS WEB

Page 3: DISEÑO DE PAGINAS WEB

QUE SUCEDE CON LAS IMAGENES Y ELEMENTOS?Son ficheros adicionales que NO están dentro del fichero .htmEstán enlazados con un código que indica al navegador que imagen debe mostrarse, donde está esta imagen, de que tamaño es, si es o no un enlace, etc.

DISEÑO DE PAGINAS WEB

Page 4: DISEÑO DE PAGINAS WEB
Page 5: DISEÑO DE PAGINAS WEB

ASI QUE…Una página web vista con un programa editor de texto contiene una mezcla de texto normal y una serie de códigos.

DISEÑO DE PAGINAS WEB

Page 6: DISEÑO DE PAGINAS WEB
Page 7: DISEÑO DE PAGINAS WEB

POR EJEMPLO…<head> y </head>

Siempre va entre llaves y cada código tiene una forma inicialy una de cierre que indican el intervalo.

DISEÑO DE PAGINAS WEB

Page 8: DISEÑO DE PAGINAS WEB

PARA UN PARRAFO…<p> y </p>

*Antes de 1997 toda página se diseñaba a punta y solo con este lenguaje.

DISEÑO DE PAGINAS WEB

Page 9: DISEÑO DE PAGINAS WEB
Page 10: DISEÑO DE PAGINAS WEB

ANATOMIA DE UNA PAGINA WEB

ANATOMIA ETAPAS PARTES

Page 11: DISEÑO DE PAGINAS WEB

ANATOMIA DE UNA PAGINA WEB

Page 12: DISEÑO DE PAGINAS WEB

ANATOMIA DE UNA PAGINA WEB

TEXTOEl texto se muestra con alguna fuente que el usuario tiene instalada, o una fuente incrustada (que no posee).

Estos textos se pueden marcar y copiar en otro programa editor de textos como word. Pero muchos son sólo imágenes (ejm: botones)

http://www.krolikov.net

Page 13: DISEÑO DE PAGINAS WEB
Page 14: DISEÑO DE PAGINAS WEB

ANATOMIA DE UNA PAGINA WEB

IMAGENES O GRAFICOSSon ficheros enlazados directamente con la página.

Existen diversos formatos pero los más exclusivos son: gif y jpg

Page 15: DISEÑO DE PAGINAS WEB
Page 16: DISEÑO DE PAGINAS WEB

ANATOMIA DE UNA PAGINA WEB

www.corbis.com

FORMULARIOSSon una mezcla de textos y a veces gráficos que permiten enviar información del visitante.

Existen diversos tipos de formulario, algunos se envían por e-mail,otros funcionan ejecutando un programa guion en el servidor.

Page 17: DISEÑO DE PAGINAS WEB
Page 18: DISEÑO DE PAGINAS WEB

ANATOMIA DE UNA PAGINA WEB

JAVASCRIPTEs un tipo de programación interpretada y ejecutada por el navegador, usado para efectos.

Ejm: cambio de imagen cuando pasamos el mouse por un lugar específico.

http://www.spacecadetdesign.com/

http://www.elcodigo.net/taller/taller.html

Page 19: DISEÑO DE PAGINAS WEB
Page 20: DISEÑO DE PAGINAS WEB

ANATOMIA DE UNA PAGINA WEB

JAVAEs otro tipo de programación usada para agregar interactividad y efectos a la página.

http://www.ths.nu

Page 21: DISEÑO DE PAGINAS WEB

ANATOMIA DE UNA PAGINA WEB

FLASH / SHOCKWAVE (ANIMACION)Imágenes fijas o interactivas con gráficos vectoriales, extremadamente compactas.

*Dependen de un plug-in para ser ejecutadas en la computadora.

http://www.monoblock.tv/

Page 22: DISEÑO DE PAGINAS WEB
Page 23: DISEÑO DE PAGINAS WEB

ANATOMIA DE UNA PAGINA WEB

Existen otros elementos que más que formar parte de la página las acompañan y se guardan para ser vistas posteriormente…

Page 24: DISEÑO DE PAGINAS WEB

ANATOMIA DE UNA PAGINA WEB

FICHEROS ADJUNTOSAlgunos sitios web comprimen materiales para poder ser bajados comodamente. (Rapidshare - Megaupload)

*SHAREWARE: ZIP, RAR, SIT, ISO.

Page 25: DISEÑO DE PAGINAS WEB

ANATOMIA DE UNA PAGINA WEB

DOCUMENTOS PDFEs otro recurso sumamente utilizado para guardar documentos de interés para el navegante.

Ejm: Partituras, e-books, manuales.

Page 26: DISEÑO DE PAGINAS WEB

QUE SE BUSCA AL DISEÑAR UNA PAGINA?En una página siempre encontraremos una misma estructura: un botón “home”, uno para enviar correos, una tabla de contenidos, y cierto estándar acerca de cómo funcionan los sitios.

Page 27: DISEÑO DE PAGINAS WEB

PERO TIENE QUE SER TAN SENSILLA QUE…La persona al entrar al sitio x PRIMERA VEZ aprenda a navegar en él en sólo 2 o 3 minutos.

http://www.zaum.com/index.html

Page 28: DISEÑO DE PAGINAS WEB

1. DELIMITACION DEL TEMAEsta es la etapa crucial, se define DE QUE SE VA A TRATAR LA PAGINA? Se define el mercado meta y los objetivos.

*La gente busca contenido, no un montón de links a otros lugares.

ETAPAS DEL DISEÑO WEB

Page 29: DISEÑO DE PAGINAS WEB

2. RECOLECCION DE LA INFORMACIONSe busca la información que se va a publicar en la web, se puede contratar un proveedor de información.

*No utilizar información tan vieja, la vigencia máxima es de 3 años.

ETAPAS DEL DISEÑO WEB

Page 30: DISEÑO DE PAGINAS WEB

3. AGREGACION Y DESCRIPCIONHay que clasificar la info y jerarquizarla A) Clasificación LinealLa que la gente lee poco a poco, como un libro.*SE PONE EN UNA SOLA PAGINA

ETAPAS DEL DISEÑO WEB

Page 31: DISEÑO DE PAGINAS WEB

B) Clasificación jerárquicaSe a plica a trozos de info que son complementarios, que dependan uno de otro, como secciones.*SE PONE EN UNA PAGINAS SEPARADAS

ETAPAS DEL DISEÑO WEB

Page 32: DISEÑO DE PAGINAS WEB

4. ESTRUCTURACIONSe estructura como se unirán las páginas, proveer ayudas para la navegación, enlaces que permitan la jerarquización y enlace entre elementos de una misma jerarquía.*Es importante proveer de índices.

ETAPAS DEL DISEÑO WEB

Page 33: DISEÑO DE PAGINAS WEB

5. METAFORAConsiste en alguna parte del documento donde mencionamos otra página, el usuario hace click en esta referencia y le permite “saltar” a otras zonas.

ETAPAS DEL DISEÑO WEB

Page 34: DISEÑO DE PAGINAS WEB

6. DISEÑO Y ESTILO GRAFICOHace que el visitante se sienta cómodo y el contenido sea digerible. Mantener un balance de imágenes y textos para que no se vea saturado, un fondo o un color de fondo que sea inolvidable. ATREVERSE A INNOVAR.

ETAPAS DEL DISEÑO WEB

Page 35: DISEÑO DE PAGINAS WEB

7. ENSAMBLE FINALEn este punto se concreta el diseño con el estilo gráfico en las páginas.Se hace la portada, que en 1 sola hoja incorpora lo más relevante del sitio, se instalan links.

ETAPAS DEL DISEÑO WEB

Page 36: DISEÑO DE PAGINAS WEB

8. TESTEOSe revisa el funcionamiento de la página, redacción, ortografía, que no hayan links rotos. Si fuera posible hacer la prueba con un prospecto del usuario final.

ETAPAS DEL DISEÑO WEB

Page 37: DISEÑO DE PAGINAS WEB

PARTES DE UNA PAGINA WEB

ANATOMIA ETAPAS PARTES

Page 38: DISEÑO DE PAGINAS WEB

CABECERA PRINCIPAL (HEADER)Se conoce también como dintel, se ubica generalmente en la parte superior, contiene el logotipo y a veces hasta una frase que identifica la identidad y contenido de la página.

PARTES DE UNA PAGINA WEB

Page 39: DISEÑO DE PAGINAS WEB
Page 40: DISEÑO DE PAGINAS WEB

MENU PRINCIPAL (NAVEGACION)Permite la navegación rápida por todo el contenido del sitio, puede estar a un lado o debajo del header.

*Los “links” deben ser fácilmente visibles y puede ser el elemento más interactivo de la página.

PARTES DE UNA PAGINA WEB

Page 41: DISEÑO DE PAGINAS WEB
Page 42: DISEÑO DE PAGINAS WEB

MENU GENERALEn esta parte se colocan las secciones que no se tomaron en cuenta en el principal.

*No es recomendable saturarlo de enlaces.

PARTES DE UNA PAGINA WEB

Page 43: DISEÑO DE PAGINAS WEB
Page 44: DISEÑO DE PAGINAS WEB

MENU DESTACADASEn esta parte se colocan las secciones generalmente destinadas a publicidad.

*No es recomendable saturarlo de enlaces.

PARTES DE UNA PAGINA WEB

Page 45: DISEÑO DE PAGINAS WEB
Page 46: DISEÑO DE PAGINAS WEB

CUERPO DE LA PAGINASe conoce como sección principal, en esta parte figura la información que queremos transmitir al visitante.

*Los colores de textos y elementos gráficos deben permitir una lectura de contenidos clara y amena.

PARTES DE UNA PAGINA WEB

Page 47: DISEÑO DE PAGINAS WEB
Page 48: DISEÑO DE PAGINAS WEB

PIE DE PAGINAEn esta parte se colocan enlaces de tipo terciario, links a correo, servicios secundarios, etc.

*No debe robarle el protagonismo al menú de navegación, debe tener un diseño más discreto.

PARTES DE UNA PAGINA WEB

Page 49: DISEÑO DE PAGINAS WEB
Page 50: DISEÑO DE PAGINAS WEB

DISEÑOS MALOS

http://www.webpagesthatsuck.com

Page 51: DISEÑO DE PAGINAS WEB

DIFICIL NAVEGACIÓN (USABILIDAD)http://www.billyconnolly.com/main.htmlhttp://www.leoburnett.ca/FLASH/index.htmhttp://yugop.com/ver2/

Page 52: DISEÑO DE PAGINAS WEB

LOS PEORES DEL 2009http://webpagesthatsuck.smugmug.com/gallery/6837311_tyvTi#497125770_dDDkt-A-LBhttp://www.genicap.com/Site/http://www.drivingskills.on.ca/http://www.evangelcathedral.net/http://www.johntitor.com/http://www.msy.com.au/

Page 53: DISEÑO DE PAGINAS WEB

SIN PALABRAS…http://www.justlikesugarinc.com/http://www.miauk.com/http://www.horserentals.com/virginia.html http://www.adultswim.com/shows/athf/movie/indexLb.htmlhttp://phat.distort.orghttp://www.drpamelastephenson.com/http://www.americanbeautybordercollies.com/http://www.lingscars.com/http://hosanna1.com/http://www.arngren.net/

Page 54: DISEÑO DE PAGINAS WEB

DISEÑOS BUENOS

ANATOMIA ETAPAS PARTES

http://www.cerotec.net

Page 55: DISEÑO DE PAGINAS WEB

TOP 50 DE MEJORES PAGINAS 2009

ANATOMIA ETAPAS PARTES

http://www.time.com/time/specials/packages/completelist/0,29569,1918031,00.html

DESTACADOShttp://www.vimeo.com/joinhttp://www.hulu.com