• Save
Nociones sobre Diseño Web
Upcoming SlideShare
Loading in...5
×
 

Nociones sobre Diseño Web

on

  • 1,141 views

Diferencias del diseño web respecto a un medio impreso y técnicas empleadas para crear páginas/ layouts para la Web. Documento incluido en el Curso "editor de páginas web KompoZer" disponible ...

Diferencias del diseño web respecto a un medio impreso y técnicas empleadas para crear páginas/ layouts para la Web. Documento incluido en el Curso "editor de páginas web KompoZer" disponible gratuitamente en nuestra plataforma e-learning: http://digitallearning.es/online

Statistics

Views

Total Views
1,141
Views on SlideShare
1,141
Embed Views
0

Actions

Likes
0
Downloads
8
Comments
0

0 Embeds 0

No embeds

Accessibility

Categories

Upload Details

Uploaded via as Adobe PDF

Usage Rights

CC Attribution-NonCommercial-ShareAlike LicenseCC Attribution-NonCommercial-ShareAlike LicenseCC Attribution-NonCommercial-ShareAlike License

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment

Nociones sobre Diseño Web Nociones sobre Diseño Web Document Transcript

  • Curso on-line Editor de Páginas Web (NVU) / KompoZer Anexo 2: Nociones sobre Diseño Web Versión 1.1 elaborado por Fecha: 07/12/2010Este documento, así como el resto de material que compone el Curso, están disponibles en ladirección: http://digitallearning.es/online , según esta licencia Creative Commons
  • Curso on-line “Editor Páginas Web KompoZer" Anexo2: Nociones sobre Diseño WebAnexo 2: Nociones sobre Diseño WebEn este breve anexo, vamos a plantear algunas cuestiones relacionadas con el Diseño deestructuras (o layouts) de páginas Web: • Particularidades del diseño web • Factores a tener en cuenta • Técnicas existentes • Pruebas que deberíamos realizar • Utilizar diseños/hojas de estilo de otros autores • Diseño orientado al visitante de nuestro sitio web: UsabilidadElaborado por Digital Learning (v1.1 - 07/12/10) 2 de 7
  • Curso on-line “Editor Páginas Web KompoZer" Anexo2: Nociones sobre Diseño Web¿Qué tiene de particular el diseño web?El diseño web difiere del diseño gráfico orientado a un medio impreso. En este último, eldiseñador puede fijar todos los aspectos de su trabajo para que se reproduzca tal como lohabía planteado. Esto no se da en el entorno web, donde los diversos tamaños y resolucionesde pantallas o los distintos tipos y configuraciones de navegador de los visitantes, hacen que lapresentación de nuestra página pueda diferir respecto al diseño que habíamos ideado.¿Qué factores pueden afectar a nuestro diseño web?Algunos factores que pueden afectar a nuestro diseño son los siguientes: • Tamaño del monitor/pantalla del dispositivo donde se visualiza: pensemos desde un móvil navegando en Internet, pasando por un miniportatil de 10”, un portatil de 15” a un PC con pantalla de más de 22”. Incluso aunque solo diseñaramos para un tamaño de pantalla, el visitante podría estar visualizando nuestra página en una ventana no maximizada, como ocurre a veces con monitores más grandes. • Resolución a la que está configurado la pantalla: una resolución de 1024x768, implica ver 1024 pixeles en horizontal y 768 en vertical, cada uno de ellos con una anchura de 1/1024 y una altura de 1/768 veces la pantalla. Aplicando ese cálculo, en una de 1280x1024 los pixeles serán más pequeños y más grandes en una de 800x600. • Navegador del usuario: cada navegador presenta sus particularidades a la hora de mostrar (o renderizar) una página web en función de cómo se ajusten a lo estándares HTML y CSS (o cómo los interpreten). Aunque se ha avanzado mucho en este aspecto, siguen existiendo excepciones, con el caso más negativo del Internet Explorer de Microsoft que en casi todas sus versiones puede mostrar efectos muy anómalos por su mal cumplimiento de los estándares. • Configuración del navegador: aunque tienen valores estándar por defecto, el usuario puede fijar valores de referencia mayores o menores para el tamaño de letra o de zoom, es decir, un re-escalado de imágenes y texto al mismo tiempo.Puede haber algún factor más, cómo que el usuario fuerze su propia presentación (fuentes,tamaños, colores...) frente a la nuestra, pero en definitiva, queda claro que no tenemoscerteza de como se verá nuestra página en los equipos de nuestros visitantes. Viewport: término de mayor precisión cuando se habla en este contexto. Se refiere al tamaño del visor/ventana en que el usuario visualiza la página, y que no teine por qué coincidir con el de su pantalla/monitor.Elaborado por Digital Learning (v1.1 - 07/12/10) 3 de 7
  • Curso on-line “Editor Páginas Web KompoZer" Anexo2: Nociones sobre Diseño Web¿Qué efectos pueden darse en la pantalla del visitante a nuestro web debido a estosfactores?.Dependerá de nuestro diseño, pero suelen ser habituales algunos de éstos: • áreas o zonas que se solapan • texto que se desborda de su columna o del área en que ésta ubicado • líneas de texto que se dividen en dos o más afectando al efecto de diseño que se había elaborado (por ejemplo en títulos / cabeceras) • página que se visualizan muy pequeñas, con grandes márgenes a los lados, zonas vacías o con texto ilegible • páginas muy anchas, de líneas muy largas que pueden afectar a la comodidad de la lectura • Páginas más anchas que la pantalla que exige hacer scroll horizontal para poder ver todo el contenido. Además de ser molesto, a veces no es percibido por el usuario, perdiéndose información • incorrecta visualización de imágenes: mal posicionadas o desplazadas, tamaño no proporcionado con el resto del contenido¿Hay alguna receta infalible para el diseño de layouts de páginas web?Hay técnicas pero ninguna puede cubrir todos los aspectos, ya que como hemos visto, lacombinación de factores es múltiple y genera configuraciones muy variadas, algunas casiincompatibles. Por ejemplo, ¿qué pasa en el caso de un dispositivo móvil de pequeñasdimensiones? Podríamos crear hojas de estilos personalizadas aprovechando que existe elatributo media que nos permite definir un valor (handheld) específico para estos dispositivos,pero no todos dan soporte (o hacen caso) a dicho parámetro. De hecho ¿puede un diseñoadaptarse a 3” (pulgadas) y a 22” o es mejor crear páginas diferentes para casos tandispares?.En definitiva, como comentan algunos autores, aún dejando fuera casos tan extremos, eldiseño de una web de cierta complejidad, tiene tanto de ciencia como de arte, con cierta (obastante) dosis de prueba-error.No obstante, no partimos de cero. Contamos con guías o técnicas utilizando HTML y CSS (vernota 1) que nos permiten abordar el diseño del layout dentro de unos ciertos esquemas. Estos,se mueven entre dos filosofías de diseño: rígido o flexible. La primera trata de preservar laapariencia diseñada en papel y la segunda trata de de adaptarse a las condiciones en quevisualiza la página el visitante. Entre medias, es frecuente el empleo de métodos mixtos quecombinan características de ambos enfoques.Vamos a describirlas esquemáticamente en la siguiente página:Elaborado por Digital Learning (v1.1 - 07/12/10) 4 de 7
  • Curso on-line “Editor Páginas Web KompoZer" Anexo2: Nociones sobre Diseño Web • Diseño de ancho fijo: ◦ Especifica la anchura de la página y los contenedores en pixels, pensando en las resolución de pantalla más común que pueden tener los que nos visitan ◦ Posiblemente la técnica más extendida ya que intenta preservar el diseño original (proporción de las diversas áreas, longitud de las líneas) y la más fácil de realizar en cuanto a cálculos de tamaños. ◦ Según la resolución que tenga el usuario, la página puede quedar muy estrecha o por el contrario, ser necesario un scroll horizontal. Si el usuario aumenta tamaño de texto, las líneas pueden quedar muy cortas o perderse parte del diseño. Por ejemplo, un título en una línea, puede pasar a ocupar dos, trastocando la apariencia original. ◦ Puede haber variantes según utilicemos posicionamiento absoluto, (diseño aún más rígido), o hagamos que los contenedores floten. • Diseño Fluido o Líquido: ◦ la página y sus áreas se redimensionan de acuerdo al tamaño de la ventana del navegador del usuario ◦ Utiliza como unidades de medida el porcentaje (%) ◦ Si el diseño implica 2 ó más columnas, al menos uno de los contenedores se posiciona flotando a uno u otro lado de la pantalla. ◦ Este diseño se adapta muy bien a la variabilidad de este medio pero pueden darse efectos perjudiciales para la accesibilidad del sitio, como por ejemplo, líneas muy largas en pantallas grandes que dificultan su lectura. • Diseño Elástico: ◦ cambia el tamaño de las áreas de la página en función del tamaño del texto que elige el usuario, tratando de mantener el número de caracteres por línea igual al diseño original. ◦ los contenedores los dimensionamos con medidas en em, unidad proporcional al tamaño de texto definido (o redimensionado por el usuario) en cada área. ◦ El tamaño de las imágenes no varía al modificarse el tamaño de texto por el usuario, con lo que se romperían las proporciones (aunque hay formas más elaboradas para evitarlo) • Diseño híbridos o mixtos: ◦ utilizan combinaciones de unidades sobre estas técnicas. Por ejemplo, definir en un diseño fluido un ancho fijo para alguna columna-contenedor o fijar tamaños mínimos o máximos de página para evitar tamaños no deseables. Nota 1: existen también técnicas para detectar ciertas configuraciones del equipo en que se visualiza nuestra página (tipo de navegador, resolución, plugins instalados,....), empleando por ejemplo JavaScript. Se pueden servir páginas optimizadas a esos parámetros, aunque no se recomienda, salvo quizás para evitar algunos bugs conocidos en determinados navegadores.Elaborado por Digital Learning (v1.1 - 07/12/10) 5 de 7
  • Curso on-line “Editor Páginas Web KompoZer" Anexo2: Nociones sobre Diseño Web¿Estas técnicas son tan genéricas como se describen aquí, o se dan consejos másdetallados?Por supuesto, al profundizar en estos temas vas a encontrar numerosa documentación enInternet en forma de cursos/tutoriales, páginas web o blogs (aquí tienes un ejemplo), que tedetallaran mucho más como definir esos diseños. Incluso, hay numerosas herramientas on-lineque automatizan la creación de estructuras de página y hojas de estilo asociadas, segúndistintas técnicas y el diseño que se quiera obtener, aunque recomendamos su uso si es comoapoyo y complemento al aprendizaje del propio alumno.En cuanto a libros, hay muchos y muy buenos que tratan este tema dentro del contexto HTMLy CSS, pero podemos recomendar uno que se centra específicamente en estas cuestiones: • Flexible Web Design: Creating Liquid and Elastic Layouts with CSS (Zoe Gillenwater )¿Cómo debemos comprobar el diseño que realicemos?Podemos empezar probando en nuestro propio equipo. Si vamos a crear páginas web puedeser una buena idea tener instalados los navegadores más utilizados. Internet Explorer yFirefox, serían casi obligatorios (o y muy recomendables Google Chrome, Opera y Safari.Por supuesto, conviene que probemos con diversas configuraciones, aumentando tamaño detexto, haciendo zoom, minimizando la ventana y cambiando la resolución. Esto nos puede daruna idea rápida de como se comportan las páginas en situaciones diversas.Tenemos no obstante ayudas que nos pueden interesar. Por un lado, las estadísticas quesuministran las herramientas de análisis de visitas a nuestras páginas (Webanalyzer, GoogleAnalytics,...) nos dan información sobre el navegador y algunos aspectos de la configuracióndel equipo de nuestros visitantes. Podemos ver cuales son las más comunes o si hay algunasignificativa que no habíamos tenido en cuenta.Por otro lado, hay servicios on-line gratuitos que nos realizan estas comprobaciones. Dosejemplos: browsershots.org nos muestra capturas de pantalla de nuestra página en multitudde configuraciones(sobre todo con distintas versiones de cada navegador, algo que puede sermás complicado de probar en nuestro equipo) o este script que nos muestra nuestro sitio weben un amplio rango de resoluciones de pantalla. Nota 2: Las estadísticas generales en este área varían (están influidas por el tipo de visitantes de los sitios que las recogen, (en screenresolution.org, puedes ver un ejemplo) pero nos vienen a indicar que hay una gran variedad. Podemos pensar en 1024x768 y 1280x800 como la más comunes, aunque cada vez más monitores con mayores resoluciones y disminuyendo mucho la de 800x600 que hace unos años era la más extendida.Elaborado por Digital Learning (v1.1 - 07/12/10) 6 de 7
  • Curso on-line “Editor Páginas Web KompoZer" Anexo2: Nociones sobre Diseño Web¿Y si utilizo hojas de estilos ya creadas?En Internet hay numerosos sitios que recopilan ejemplos de múltiples tipos de layouts y hojasde estilo, de los que podemos aprender las mejores prácticas. Además, muchas están bajo unalicencia que permite su libre copia y uso, aunque conviene comprobar si bajo alguna condición.Te mencionamos dos de los más conocidos: • Open Source Web Design • Open Design CommunityNuestra recomendación, no obstante, es que esto no sustituya al aprendizaje práctico que nospermite idear y experimentar con los resultados de las distintas reglas de estilo que creemos.Aunque podamos copiar o enlazar a la hoja de estilo creada por otro autor, el contar consuficientes conocimientos nos permitirá comprender su funcionamiento, editarla ypersonalizarla y en definitiva, tener un mayor control sobre nuestras páginas.En esta línea, es muy recomendable para aquellos que empiezan en este campo y no laconozcan, instalar una herramienta como Firebug, extensión de Firefox, que permite analizary experimentar (a nivel de su código HTML, CSS y JavaScript) tanto con las páginas quecreemos como con aquellas que nos parezcan de interés, mientras navegamos. Si preferimosotro navegador, los más populares traen incorporadas utilidades en este sentido, que convieneque exploremos y aprendamos a utilizar.¿Alguna cuestión más a tener en cuenta en el diseño web?Sí. Por ejemplo las cuestiones relacionadas con la arquitectura de la web, donde planteamos laorganización y distribución lógica del contenido a través de las diferentes páginas del sitio.También el diseño gráfico, que marca el aspecto visual final de nuestra web y dondedeberemos tener en cuenta no solo las buenas prácticas aceptadas en este campo, sino suaplicación en un medio concreto como es la Web, con variedad de equipos y entornos en quese reproducirá dicho diseño.Sin entrar en cuestiones teóricas sobre la estrecha relación y áreas de solapamiento entretodos estos campos, apuntamos un concepto fundamental más: la USABILIDAD. Como sunombre indica, es un atributo relacionado con la facilidad de uso, de exploración de nuestrositio web. Surge a partir del concepto de diseño centrado en el usuario, a diferencia de losdiseños más basados en la tecnología o los orientados a la creatividad visual. Engloba aspectosque ya hemos apuntado o que entran de lleno en los campos que citábamos al principio, perocon el enfoque a la facilidad de interacción del usuario con nuestro sitio web.No podemos ahondar más en ello, pero puedes encontrar mucha información disponible enInternet sobre este tema, buscando por dicho término. Como ejemplo, en esta página tienesuna buena introducción a este campo. Uno de los gurús en este área es Jakob Nielsen, del quesi estás interesado, puedes leer su libro traducido al español: • “Usabilidad: Prioridad en el diseño Web” (Ed. Anaya Multimedia – 2006)o consultar su web: http://www.useit.com (¡curiosamente diseñada con una dudosa estructurade tablas!)Elaborado por Digital Learning (v1.1 - 07/12/10) 7 de 7