Post on 20-Jun-2015
DISEÑO DE PAGINAS WEB
DISEÑO ANATOMIA ETAPAS PARTES DISEÑOS M DISEÑOS B PRACTICA
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
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
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
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
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
ANATOMIA DE UNA PAGINA WEB
ANATOMIA ETAPAS PARTES
ANATOMIA DE UNA PAGINA 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
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
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.
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
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
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/
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…
ANATOMIA DE UNA PAGINA WEB
FICHEROS ADJUNTOSAlgunos sitios web comprimen materiales para poder ser bajados comodamente. (Rapidshare - Megaupload)
*SHAREWARE: ZIP, RAR, SIT, ISO.
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.
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.
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
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
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
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
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
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
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
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
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
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
PARTES DE UNA PAGINA WEB
ANATOMIA ETAPAS PARTES
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
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
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
MENU DESTACADASEn esta parte se colocan las secciones generalmente destinadas a publicidad.
*No es recomendable saturarlo de enlaces.
PARTES DE UNA PAGINA 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
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
DISEÑOS MALOS
http://www.webpagesthatsuck.com
DIFICIL NAVEGACIÓN (USABILIDAD)http://www.billyconnolly.com/main.htmlhttp://www.leoburnett.ca/FLASH/index.htmhttp://yugop.com/ver2/
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/
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/
DISEÑOS BUENOS
ANATOMIA ETAPAS PARTES
http://www.cerotec.net
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