DISEÑO WEB

Click here to load reader

  • date post

    10-Feb-2016
  • Category

    Documents

  • view

    30
  • download

    0

Embed Size (px)

description

DISEÑO WEB. Por Luis Salinas. DISEÑO. - PowerPoint PPT Presentation

Transcript of DISEÑO WEB

DISEO WEB

DISEO WEBPor Luis SalinasDISEOEl diseo web es una actividad que consiste en la planificacin, diseo e implementacin de sitios web. No es simplemente una aplicacin del diseo convencional, ya que requiere tener en cuenta la navegabilidad, interactividad, usabilidad, arquitectura de la informacin y la interaccin de medios como el audio, texto, imagen, enlaces y vdeo. Se lo considera dentro del diseo multimedia.La unin de un buen diseo con una jerarqua bien elaborada de contenidos, aumenta la eficiencia de la web como canal de comunicacin e intercambio de datos, que brinda posibilidades como el contacto directo entre el productor y el consumidor de contenidos, caracterstica destacable del medio.

ETAPASPara el diseo de pginas web debemos tener en cuenta tres etapas:

La primera, es el diseo visual de la informacin que se desea editar.En esta etapa se trabaja distribuyendo el texto, los grficos, los vnculos a otros documentos y otros objetos multimedia que se consideren pertinentes. Es importante que antes de trabajar sobre el computador se realice un boceto o pre diseo sobre el papel. Esto facilitar tener un orden claro sobre el diseo.Estructura bsica de una pagina web enHTML5

La segunda, es la estructura y relacin jerrquica de las pginas del sitio web, una vez que se tiene este boceto se pasa a 'escribir' la pgina web.Para esto, y fundamentalmente para manejar los vnculos entre documentos, se cre el lenguaje de marcacin de hipertexto o HTML. Los enlaces que aparecen subrayados en este documento y otros de Wikipedia son ejemplos de hipertexto, puesto que al pulsar sobre ellos conducen a otras pginas con informacin relacionada. La importancia de la estructura y arborescencia web radica en que los visitantes no siempre entran por la pgina principal o inicial y en ese caso el sitio debe darle la respuesta a lo que busca rpido, adems permitirle navegar por el sitio.

La tercera, etapa consiste en el posicionamiento en buscadores.sta consiste en optimizar la estructura del contenido para mejorar la posicin en que aparece la pgina en determinada bsqueda.Etapa no gustosa por los diseadores grficos, porque a diferencia del texto, an para el ao 2012 no se pueden tener nuevos resultados en los buscadores con sitios muy grficos.REGLAS DE DISEOAunque el diseo de un sitio web debe ser INTACHABLE, no es lo nico que vende. Las que venden son las ideas, y estas se hallan generalmente detrs de las palabras.

Por esta razn, adems de un diseo impecable desde el punto de vista de la imagen, es necesario tener en cuenta otros aspectos fundamentales para crear un sitio web efectivo: su facilidad de uso o navegabilidad, la efectividad del texto en la pgina de inicio, la estructura del sitio, y las herramientas que ofrece.LA FACILIDAD DE USOLa pgina de inicio debe ser la mejor. si esta no atrapa al visitante jams pasar a las siguientes. se deben incluir todos los beneficios en ella, con enlaces a sub pginas en los que se desarrollan ms detalladamente.Cmo comunicarse con la empresa y cmo comprar debe indicarse en todas las pginas del sitio.Escribir prrafos cortos, utilizando verbos activos y con cierta carga emocional. no es conveniente compensar la falta de inventiva literaria con un exceso de grficos, fotos, etc. adems de que el mensaje se desvirta aumenta innecesariamente el tiempo de descarga y eso va en contra de la cantidad de visitas al sitio: muchos usuarios no tiene ni tiempo ni paciencia para esperar la descarga de los grficos y se van.LA ESTRUCTURATodas las pginas deben seguir el mismo estilo esttico.Los encabezamientos deben comunicar la idea general de la pgina.Toda pgina debe tener un enlace a la pgina de contacto y a la de ventas.El tamao del contenido para pantallas de 1024x768 pixeles (las ms estndar), la medida en pixeles es: 955px de ancho por 610px de alto. de esta manera no obtendrs barras de desplazamiento. obviamente el alto puede varias segn contenidoLA IMAGENLos sitios vendedores nunca se ven como sitios personales o de aficionados.El logotipo de la empresa es fundamental.

Estructura de una pagina web con HTML5Con la evolucin a HTML5, han aparecido varias etiquetas nuevas para especificar ms la estructura de la web. Las metatags del HTML 5 tambin cambia respecto a las anteriores metatags, ahora son ms cortas.La declaracin del DocType es .La declaracin del charset es < meta charset=utf-8> (para poner un ejemplo)Para ir directamente al grano, muestro una plantilla de como usar las esta etiquetas para la estructura web.

RESUMEN DE ETIQUETASHeader:es el encabezamiento de la pgina o de la seccin.Footer:es el pie de pgina o de la seccinsection:es la seccin dentro de una pgina web.Article:contenido, contenido y ms contenido.aside:Cosas varias, ejemplo, todo aquello que se pone en los blogs en la barra derecha, como nuve de tags, los ms descargados, visitenos en Twitter, FB, etc.Nav:la navegacin de la web.Todas estas etiquetas van dentro de la etiqueta .En resumen, tenemos ms etiquetas para que los buscadores interpreten mejor la informacin que hay en la web y para que los diseadores entiendan con menos cdigo HTML la estructura de la pgina. Y con esto recordar que los IE no son muy compatibles con el estndar del HTML5, tendremos que esperar al IE9.SIMETRAEl diseo simtrico sugiere estabilidad, equilibrio, resultando esttico, ordenado, atractivo y agradable de contemplar. Por el contrario, el asimtrico muestra irregularidad, desigualdad en las formas y desequilibrio.

Hay que tener en cuenta que la simetra usada no debe de ser del todo exacta, ya que la simetra perfecta no es natural, es demasiado "perfecta", valga la redundancia, haciendo aparecer las composiciones artificiales y premeditadas. Pequeas variaciones en la distribucin simtrica dan ese toque de ruptura que hace su contemplacin ms amena y natural.

En el caso de una pgina web, la concepcin simtrica de la misma comienza con el reticulado elegido, ya que va a ser el que defina la distribucin bsica de elementos en ella. Hay que tender entonces a disear un reticulado lo ms simtrico posible.

Ejemplos claro de esta regla son la creacin de formularios y de fichas. Se construyen generalmente apoyndose en una tabla maquetadora, por lo que deberemos buscar la simetra en esta tabla, aunque luego, debido a las diferentes longitudes y naturaleza de los campos, el resultado final "parezca" no serlo.

ASPECTOS TCNICOS Y ESTTICOS DEL CONTENIDO DE UNA PAGINA WEBResulta deseable que los espacios Web presenten entornos originales, y que utilicen las crecientes potencialidades del ordenador y de las tecnologas multimedia e hipertexto, dichas tecnologa usada con finesdidcticos debe atender adiversos aspectos como son los que se consideran acontinuacin.La pgina principal ser la base porla que fluir la informacin, por ello, debe presentarse de forma ordenada. En ella tendr que aparecer la estructura de contenidos o apartados que sedesarrollen atravs de loshipervnculos establecidos con las pginas que complementen la informacin inicial. La pantalla de un ordenador es un soporte deespacio limitado para la lectura, por esta razn hay que procurar que las pginas no sean excesivamente largas. LAS IMGENESNo deben aparecer nicamente como elementos decorativos, sino quedeben complementar la informacin que aporta el texto. No es conveniente cambiar las imgenes de la Web con demasiada frecuencia, pues, adems de dar identidad a lapgina, acelera el proceso de navegacin.

FORMATOS DE IMAGEN SOPORTADO POR LOS NAVEGADORES DE INTERNETGIF (Graphic Image File Format).Es el formato ms adecuado para aquellas imgenes sencillas, de formas simples y en las que no existe un elevado nmero de colores.JPEG (Joint Photographic Experts Group).Fue diseado para la compresin de imgenes fotogrficas, basndose en el hecho de que el ojo humano no es perfecto y no es capaz de captar toda la informacin que se puede almacenar en una imagen de 24 bits.Por regla general, es el ms indicado para aquellas imgenes que son fotografas.PNG (Portable Network Graphics). Proporciona un formato compresin de imgenes sin prdida.El ms adecuado para imgenes de elementos renderizados, ya que se logran unos degradados muy suaves y una buena definicin de las lneas.EL TEXTOEl texto es muy importante ya que le ayuda al usuario captar y percibir la informacin. Es necesario que los textos estn organizados en prrafos cortos. No obstante, se debe procurar no romper abruptamente los prrafos, ni interrumpir la continuidad de las ideas que se exponen en ellos. Los distintos colores y diferentes tipos de letras aportan informacin por s mismos, ya que pueden servir para diferenciar los ttulos de otros tipos de enunciados o distinguir los mens de navegacin del texto de las pginas.VIDEOSUn sitio web que se precie de ser novedoso debe integrar necesariamente vdeo. La integracin de un archivo de vdeo en la web se traduce tambin en ms clics y en ms visitas. Para lograr la mxima efectividad, es recomendable asignar una pgina a cada vdeo y que en dicha pgina haya tambin contenido de texto.EL SONIDO

Las normas bsicas que consideramos importantes para usar sonido en una pgina son: Dejar que elusuario elija si desea o noescuchar el sonido, especialmente cuando ste no sea relevante para la informacin que mostramos. Para ello, debe aparecer un enlace paraactivarlo y desactivarlo. Los botones de enlace deben ser los de uso ms frecuente para el usuario. El usuario debe estarinformado antes de descargar un archivo de audio delas caractersticas de ste, tales como tamao, tipo de conexin a Internet