diseÑo de paginas web
TRANSCRIPT
![Page 1: DISEÑO DE PAGINAS WEB](https://reader034.vdocuments.co/reader034/viewer/2022042602/5571f78249795991698b8368/html5/thumbnails/1.jpg)
DISEÑO DE PAGINAS WEB
DISEÑO ANATOMIA ETAPAS PARTES DISEÑOS M DISEÑOS B PRACTICA
![Page 2: DISEÑO DE PAGINAS WEB](https://reader034.vdocuments.co/reader034/viewer/2022042602/5571f78249795991698b8368/html5/thumbnails/2.jpg)
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](https://reader034.vdocuments.co/reader034/viewer/2022042602/5571f78249795991698b8368/html5/thumbnails/3.jpg)
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](https://reader034.vdocuments.co/reader034/viewer/2022042602/5571f78249795991698b8368/html5/thumbnails/4.jpg)
![Page 5: DISEÑO DE PAGINAS WEB](https://reader034.vdocuments.co/reader034/viewer/2022042602/5571f78249795991698b8368/html5/thumbnails/5.jpg)
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](https://reader034.vdocuments.co/reader034/viewer/2022042602/5571f78249795991698b8368/html5/thumbnails/6.jpg)
![Page 7: DISEÑO DE PAGINAS WEB](https://reader034.vdocuments.co/reader034/viewer/2022042602/5571f78249795991698b8368/html5/thumbnails/7.jpg)
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](https://reader034.vdocuments.co/reader034/viewer/2022042602/5571f78249795991698b8368/html5/thumbnails/8.jpg)
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](https://reader034.vdocuments.co/reader034/viewer/2022042602/5571f78249795991698b8368/html5/thumbnails/9.jpg)
![Page 10: DISEÑO DE PAGINAS WEB](https://reader034.vdocuments.co/reader034/viewer/2022042602/5571f78249795991698b8368/html5/thumbnails/10.jpg)
ANATOMIA DE UNA PAGINA WEB
ANATOMIA ETAPAS PARTES
![Page 11: DISEÑO DE PAGINAS WEB](https://reader034.vdocuments.co/reader034/viewer/2022042602/5571f78249795991698b8368/html5/thumbnails/11.jpg)
ANATOMIA DE UNA PAGINA WEB
![Page 12: DISEÑO DE PAGINAS WEB](https://reader034.vdocuments.co/reader034/viewer/2022042602/5571f78249795991698b8368/html5/thumbnails/12.jpg)
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](https://reader034.vdocuments.co/reader034/viewer/2022042602/5571f78249795991698b8368/html5/thumbnails/13.jpg)
![Page 14: DISEÑO DE PAGINAS WEB](https://reader034.vdocuments.co/reader034/viewer/2022042602/5571f78249795991698b8368/html5/thumbnails/14.jpg)
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](https://reader034.vdocuments.co/reader034/viewer/2022042602/5571f78249795991698b8368/html5/thumbnails/15.jpg)
![Page 16: DISEÑO DE PAGINAS WEB](https://reader034.vdocuments.co/reader034/viewer/2022042602/5571f78249795991698b8368/html5/thumbnails/16.jpg)
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](https://reader034.vdocuments.co/reader034/viewer/2022042602/5571f78249795991698b8368/html5/thumbnails/17.jpg)
![Page 18: DISEÑO DE PAGINAS WEB](https://reader034.vdocuments.co/reader034/viewer/2022042602/5571f78249795991698b8368/html5/thumbnails/18.jpg)
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](https://reader034.vdocuments.co/reader034/viewer/2022042602/5571f78249795991698b8368/html5/thumbnails/19.jpg)
![Page 20: DISEÑO DE PAGINAS WEB](https://reader034.vdocuments.co/reader034/viewer/2022042602/5571f78249795991698b8368/html5/thumbnails/20.jpg)
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](https://reader034.vdocuments.co/reader034/viewer/2022042602/5571f78249795991698b8368/html5/thumbnails/21.jpg)
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](https://reader034.vdocuments.co/reader034/viewer/2022042602/5571f78249795991698b8368/html5/thumbnails/22.jpg)
![Page 23: DISEÑO DE PAGINAS WEB](https://reader034.vdocuments.co/reader034/viewer/2022042602/5571f78249795991698b8368/html5/thumbnails/23.jpg)
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](https://reader034.vdocuments.co/reader034/viewer/2022042602/5571f78249795991698b8368/html5/thumbnails/24.jpg)
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](https://reader034.vdocuments.co/reader034/viewer/2022042602/5571f78249795991698b8368/html5/thumbnails/25.jpg)
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](https://reader034.vdocuments.co/reader034/viewer/2022042602/5571f78249795991698b8368/html5/thumbnails/26.jpg)
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](https://reader034.vdocuments.co/reader034/viewer/2022042602/5571f78249795991698b8368/html5/thumbnails/27.jpg)
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](https://reader034.vdocuments.co/reader034/viewer/2022042602/5571f78249795991698b8368/html5/thumbnails/28.jpg)
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](https://reader034.vdocuments.co/reader034/viewer/2022042602/5571f78249795991698b8368/html5/thumbnails/29.jpg)
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](https://reader034.vdocuments.co/reader034/viewer/2022042602/5571f78249795991698b8368/html5/thumbnails/30.jpg)
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](https://reader034.vdocuments.co/reader034/viewer/2022042602/5571f78249795991698b8368/html5/thumbnails/31.jpg)
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](https://reader034.vdocuments.co/reader034/viewer/2022042602/5571f78249795991698b8368/html5/thumbnails/32.jpg)
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](https://reader034.vdocuments.co/reader034/viewer/2022042602/5571f78249795991698b8368/html5/thumbnails/33.jpg)
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](https://reader034.vdocuments.co/reader034/viewer/2022042602/5571f78249795991698b8368/html5/thumbnails/34.jpg)
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](https://reader034.vdocuments.co/reader034/viewer/2022042602/5571f78249795991698b8368/html5/thumbnails/35.jpg)
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](https://reader034.vdocuments.co/reader034/viewer/2022042602/5571f78249795991698b8368/html5/thumbnails/36.jpg)
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](https://reader034.vdocuments.co/reader034/viewer/2022042602/5571f78249795991698b8368/html5/thumbnails/37.jpg)
PARTES DE UNA PAGINA WEB
ANATOMIA ETAPAS PARTES
![Page 38: DISEÑO DE PAGINAS WEB](https://reader034.vdocuments.co/reader034/viewer/2022042602/5571f78249795991698b8368/html5/thumbnails/38.jpg)
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](https://reader034.vdocuments.co/reader034/viewer/2022042602/5571f78249795991698b8368/html5/thumbnails/39.jpg)
![Page 40: DISEÑO DE PAGINAS WEB](https://reader034.vdocuments.co/reader034/viewer/2022042602/5571f78249795991698b8368/html5/thumbnails/40.jpg)
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](https://reader034.vdocuments.co/reader034/viewer/2022042602/5571f78249795991698b8368/html5/thumbnails/41.jpg)
![Page 42: DISEÑO DE PAGINAS WEB](https://reader034.vdocuments.co/reader034/viewer/2022042602/5571f78249795991698b8368/html5/thumbnails/42.jpg)
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](https://reader034.vdocuments.co/reader034/viewer/2022042602/5571f78249795991698b8368/html5/thumbnails/43.jpg)
![Page 44: DISEÑO DE PAGINAS WEB](https://reader034.vdocuments.co/reader034/viewer/2022042602/5571f78249795991698b8368/html5/thumbnails/44.jpg)
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](https://reader034.vdocuments.co/reader034/viewer/2022042602/5571f78249795991698b8368/html5/thumbnails/45.jpg)
![Page 46: DISEÑO DE PAGINAS WEB](https://reader034.vdocuments.co/reader034/viewer/2022042602/5571f78249795991698b8368/html5/thumbnails/46.jpg)
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](https://reader034.vdocuments.co/reader034/viewer/2022042602/5571f78249795991698b8368/html5/thumbnails/47.jpg)
![Page 48: DISEÑO DE PAGINAS WEB](https://reader034.vdocuments.co/reader034/viewer/2022042602/5571f78249795991698b8368/html5/thumbnails/48.jpg)
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](https://reader034.vdocuments.co/reader034/viewer/2022042602/5571f78249795991698b8368/html5/thumbnails/49.jpg)
![Page 50: DISEÑO DE PAGINAS WEB](https://reader034.vdocuments.co/reader034/viewer/2022042602/5571f78249795991698b8368/html5/thumbnails/50.jpg)
DISEÑOS MALOS
http://www.webpagesthatsuck.com
![Page 51: DISEÑO DE PAGINAS WEB](https://reader034.vdocuments.co/reader034/viewer/2022042602/5571f78249795991698b8368/html5/thumbnails/51.jpg)
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](https://reader034.vdocuments.co/reader034/viewer/2022042602/5571f78249795991698b8368/html5/thumbnails/52.jpg)
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](https://reader034.vdocuments.co/reader034/viewer/2022042602/5571f78249795991698b8368/html5/thumbnails/53.jpg)
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](https://reader034.vdocuments.co/reader034/viewer/2022042602/5571f78249795991698b8368/html5/thumbnails/54.jpg)
DISEÑOS BUENOS
ANATOMIA ETAPAS PARTES
http://www.cerotec.net
![Page 55: DISEÑO DE PAGINAS WEB](https://reader034.vdocuments.co/reader034/viewer/2022042602/5571f78249795991698b8368/html5/thumbnails/55.jpg)
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