1.- Introducción 2.- Vocabulario y definiciones indispensables 3.- Diferencias básicas entre diseño impreso y diseño web 4.- Usabilidad 5.- Arquitectura de un sitio web 6.- Estructura de una página web Estructuras estándares Diseñando la estructura 7.- Adaptación de la estructura en función de la resolución
Adaptación del bloque principal
Adaptación de bloques secundarios
8.- Ejemplos: páginas web sensibles 9.- Presentación de los contenidos
Tipografías
Imágenes
Enlaces web
Formularios web
Tablas
Animaciones
Otros contenidos posibles
Nuevas posibilidades: CSS3 y HTML5
10.- Diseño de páginas web programadas 11.- Optimización para los buscadores (SEO) Recomendaciones de Google
12.- Presupuesto y entrega del diseño al maquetador
Introducción
Hay dificultades que muchos diseñadores tienen para entender las importantes diferencias entre el diseño impreso y el diseño web, las limitaciones que presenta respecto al diseño tradicional pero también las nuevas posibilidades que permiten formas insólitas de expresión y comunicación.
Esta guía está pensada para terminar con estas dificultades, para que cualquier diseñador gráfico, tenga o no experiencia técnica web, adquiera los conocimientos necesarios que le permitan diseñar cualquier sitio o página web, dando rienda suelta a su imaginación y creatividad, explotando todas las posibilidades que ofrece este medio. Pero, al mismo tiempo ciñéndose a las limitaciones tecnológicas del momento, para que ningún maquetador o programador competente jamás mire su diseño y le diga “eso no se puede hacer”.
Dicen que las modas van y vienen, pero que el buen diseño es atemporal. Lamentablemente para los buenos diseñadores, las tecnologías también van y vienen (o evolucionan) y los buenos diseños se tienen de adaptar a la tecnología del momento, si no caducan.
Vocabulario y definiciones indispensables
Página web: documento que forma parte de un sitio web, con un contenido que puede incluir texto, imágenes, elementos multimedia y enlaces para navegar a otras páginas web o contenidos.
Sitio web: colección de páginas web relacionadas y comunes a un dominio de Internet o subdominio.
Página principal o home: página de entrada a un sitio web, normalmente con un diseño mucho más trabajado, que presenta el sitio y las opciones de navegación a las páginas o contenidos del sitio.
Enlace web: elemento de una página web que, al clicarlo te lleva a otra página web o a otra parte de la misma página web.
Menú de navegación: conjunto de enlaces web que reflejan la organización de los contenidos del sitio web y enlazan a cada una de sus páginas web.
Dominio de Internet: es un nombre único que identifica un sitio web en Internet (ejemplos de dominio: informatiu.com o javajan.es). Existen muchas empresas que registran dominios, Javajan entre ellas (consulta nuestros precios especiales para diseñadores).
URL: cadena de caracteres con la cual se asigna una dirección única a cada uno de los recursos de información disponibles en la Internet (páginas web y sus elementos: imágenes, hojas de estilos, elementos multimedia,…). La URL de la página principal normalmente es el nombre del dominio.
Servidor web: ordenador remoto que provee los datos solicitados por parte de los navegadores de otras computadoras. Las páginas web y dominios de Internet deben de ser alojadas en un servidor. Existen muchas empresas que poseen servidores.
Navegador web: aplicación que interpreta el contenido de las páginas web y lo presenta en pantalla permitiendo al usuario interactuar. Ejemplos de navegador: Internet Explorer, Mozilla Firefox, Google Chrome, Safari… Al diseñar una página web, tenemos que tener en cuenta que los distintos navegadores pueden presentar nuestros diseños con pequeñas variaciones.
Resolución de ventana web: número de píxeles máximos horizontales y verticales disponibles para presentar una página web. La resolución vendrá determinada por la resolución de la pantalla del dispositivo y por el espacio que el navegador web deja para la presentación. Las distintas resoluciones disponibles Internet limitaran en gran medida el diseño web.
Ejemplos de pantalla ipad (1024 x 768) y iphone (640 x 480) mostrando la misma página web, presenta un diseño diferente para cada una de las resoluciones.
Diseñador web: Profesional que utiliza programas de diseño tradicional, como photoshop, freehand, ilustrator, indesign…
Maquetador web: Profesional que maqueta los diseños utilizando las codificaciones estándares (html, css, javascript…), transformando los diseños en páginas web.
Programador web: Profesional que programa las páginas web maquetadas (php, asp, jquery …) para que presenten información de una base de datos, personalicen los contenidos, envíen los formularios, interactúen con el usuario…
Diferencias básicas entre diseño impreso y diseño web
Interactuar en vez de mostrar
El diseño impreso está basado en ver, pero el diseño web está basado en hacer. La función del diseño tradicional es contar historias, la misión del diseño digital es entablar conversaciones. El soporte gráfico se sostiene sobre relaciones espaciales y la experiencia web sobre relaciones temporales. El diseño impreso es estático, en cambio, la experiencia de un sitio web se define por la interacción del usuario con diseño y contenido. Por ejemplo, un usuario hace clic sobre la navegación o se desplaza hacia abajo para leer una página. Un buen diseño impreso tiene que entenderse y ser bonito, pero un buen diseño web tiene que entenderse, facilitar la navegación (usabilidad) y ser bonito. Normalmente se recomienda priorizar la usabilidad, después el contenido y si queda tiempo el arte. Aunque esto no implica que el buen diseño se deba sacrificar para ganar usabilidad, en esta guía vamos a explicar cómo hacerlos compatibles.
Espacio y entorno indefinido en vez de definido
El diseño impreso se visualiza en espacio limitado pero el diseño web se tiene que poder visualizar en múltiples espacios, además el diseño web se puede extender fuera de la pantalla (podemos que utilizar barras de desplazamiento o scrolling). Cuando se diseña para imprimir, el resultado va a ser exactamente igual o muy parecido al original que hemos diseñado y guardado, en cambio, cuando se diseña una web, debemos considerar factores externos de los cuales no tenemos ningún control (el usuario puede tener resoluciones de pantalla diferente o utilizar un navegador web distinto, además de no tener las tipografías utilizadas,…). El diseño impreso se visualiza igual en cualquier revista, en cambio, los diferentes navegadores web pueden presentar los elementos del diseño con sutiles variaciones. A veces, el peor dolor de cabeza de un maquetador web es como hacer funcionar una web en Internet Explorer, Firefox, Chrome, smartphones, tablets… sin que alguno muestre errores.
Problema con las tipografías
En el diseño impreso se puede utilizar cualquier tipografía, pero el diseño web normalmente solo muestra las tipografías que el usuario tenga instaladas en su ordenador. Más adelante veremos que existen diversas soluciones a este problema, por ejemplo poniendo el texto con el formato y la tipografía deseada en imágenes, pero tendremos que tener en cuenta las limitaciones.
Pixeles en vez de pulgadas y centímetros
En el diseño impreso se trabaja con pulgadas y centímetros, pero en el diseño web solo se trabaja con pixeles. Así pues, dependiendo de la resolución de la pantalla (pixeles por pulgada o dpi) una misma imagen se puede ver mayor o menor. Las medidas de los diseños web siempre son píxeles, aunque en ocasiones se pueden utilizar porcentajes de pantalla o porcentajes de área (se explica más adelante). Si les cuesta diseñar con pixeles, pueden utilizar la resolución 72 dpi, que es la resolución estándar de la mayoría de pantallas de ordenador. Diseñando a esta resolución, la mayoría de usuarios verán las imágenes y elementos de su diseño al mismo tamaño que en su pantalla.
Píxel: la menor unidad de medida en la pantalla (un punto de luz). La mayoría de pantallas tienen una resolución de 72 píxeles por pulgada o dpi.
Archivos pequeños en vez de grandes
El diseño impreso se trabaja con altas resoluciones de archivos y se procura mantener la mejor calidad en las imágenes y originales, mientras que en el diseño web se trabaja con resoluciones bajas para ahorrar recursos del servidor y permitir que el usuario abra la página rápidamente. En diseño web, debemos optimizar las imágenes y animaciones, es decir, bajar la resolución lo más posible sin perder una calidad significativa. El peso (calculado en Kb o Mb) de una página web se calcula como la suma de todos pesos de los documentos que abre una página web (imágenes, archivos flash, animaciones…). Con las conexiones de internet actual podemos calcular muy orientativamente que por cada incremento de peso de 500Kb a 1Mb, una página tarda un segundo más a descargarse y abrirse.
RGB en vez de CMYK
En el diseño impreso se trabaja colores substractivos o CMYK, en cambio en el diseño web solo se trabaja con colores aditivos o RGB. El color es un error común de los diseñadores gráficos cuando quieren diseñar para web. En la escuela de diseño te enseñan a utilizar siempre CMYK para que la impresión quede bien, pero en el mundo web, es todo lo contrario, las pantallas emiten luz únicamente interpretan datos RGB o aditivos.
Posible editar después de publicar
El diseño impreso no se puede modificar después de la impresión. Por suerte el diseño web se puede modificar después de la publicación, se pueden corregir errores, completar contenido no introducido inicialmente, o mantener actualizada la información. En este sentido, es mejor evitar diseños que no sean flexibles, para que en el futuro el diseño se pueda adaptar a diferentes tamaños de los contenidos, sin perjudicar la estética del conjunto.
Usabilidad
Un atributo determinante para la calidad de un sitio web es suusabilidad. Se trata de lograr que los visitantes encuentren rápidamente aquello que buscan, con el mínimo esfuerzo por su parte. Sea cual sea el contenido o la finalidad de nuestra web, navegar por ella debe resultar una experiencia gratificante.
Web usable: es aquella en la que los usuarios pueden interactuar de la forma más fácil, cómoda, evidente y segura posible. Una web usable denota calidad, genera confianza y nos diferencia positivamente de otras alternativas.
Los usuarios pasan mucho menos tiempo visitando una página web de lo que sus diseñadores desearían, por lo que hay que facilitarles las cosas al máximo. Cuando un usuario encuentra que la navegación por una web es cómoda, agradable y útil, existen mayores probabilidades de que la visite de nuevo en el futuro.
Lograr un buen nivel de usabilidad requiere combinar hábilmente una serie de elementos: tecnología, diseño, contenidos… Aunque no existen recetas universales, he aquí algunos criterios a tener en cuenta:
>Crear una jerarquía visual clara en cada página. Debe percibirse a simple vista cuál es la importancia de los distintos contenidos, qué relación existe entre ellos, a qué tema o bloque pertenecen… La colocación, el tamaño, la tipografía o los colores de los textos y de los demás elementos de la página son los principales recursos a utilizar.
>Dar el control al usuario. Éste debe sentir en todo momento que sabe dónde está y que controla la situación. Nada importante debería situarse a más de dos clics de distancia. Los títulos y contenidos de cada apartado deben ser claros y visibles. También son muy útiles los menús de situación, la navegación por pestañas, las opciones de volver atrás o deshacer una acción, la visualización clara de las distintos pasos de un proceso (la compra on-line, por ejemplo).
>Facilitar la interacción. Suele ser muy positivo que una web permita al usuario “hacer cosas”: clicar, desplegar, abrir, mover… En todo caso, el acceso y el uso de cualquier elemento de interacción debe ser intuitivo, rápido y fácil. No podemos permitirnos frustrar al usuario o hacerle perder el tiempo.
>Aprovechar las convenciones y llamar a las cosas por su nombre. La mayoría de usuarios tienen ciertas expectativas derivadas de su experiencia navegando por internet. Saben, más o menos, dónde se sitúan los menús, cómo funciona un buscador, para qué sirven determinados botones, qué significan ciertos iconos o expresiones, etc. Así, hay que situar los contenidos donde el usuario espera que estén y hacer que las cosas funcionen como se espera que lo hagan. Si queremos sorprender o hacer “algo diferente”, hemos de asegurarnos de que ello no suponga una complicación innecesaria.
>Simplificar. Hay que evitar la información superflua y minimizar todo aquello que pueda confundir, abrumar o distraer innecesariamente. Para ello, usaremos textos breves y concisos, haremos un uso racional de las imágenes y animaciones, y crearemos menús claros, bien estructurados y desplegables si hay muchas opciones a mostrar.
No hay que entender la usabilidad como un lastre para nuestra creatividad. Podemos innovar y ser originales mientras no olvidemos quenuestro diseño debe estar centrado en el usuario. Él es el verdadero protagonista y hemos de asegurarnos de que comprenderá y podrá seguirnos el juego en todo momento.
Otros aspectos a tener en cuenta:
>Situar los elementos importantes siempre a mano.
>Los usuarios no siempre entran por la página principal (poner menús de navegación en todas las páginas).
>Dejar claro qué elementos son enlaces y cuáles no.
>Añadir un buscador o un mapa del sitio web si éste tiene mucho contenido i/o páginas.
>Enlazar a cualquier información en menos de 3 clicks (o enlaces)
>Mantener una coherencia en el diseño de toda la página.
>Seguir las reglas básicas del buen diseño: selección de colores, tipografías, regla de los tercios…
>No distraer el usuario con excesivas animaciones o elementos que parpadean.
>Intentar que los contenidos no tengan faltas de ortografía.
>No abrir nuevas ventanas del navegador innecesariamente…
Algunos dicen que diseñar para web es más parecido a la arquitectura que al diseño gráfico. Como en una casa, antes de escoger los muebles, el color de las cortinas o la iluminación, es importante saber cómo estará estructurada la planta, cómo será el salón, donde estarán las habitaciones, como se accederá a ellas, donde estarán las ventanas… Asimismo en la web, si la estructura no es sólida e intuitiva, el arte de la página no sirve para nada.
Antes de empezar a trabajar en el aspecto puramente estético de las páginas web, imaginando animaciones impresionantes y gráficos atractivos, es indispensables pensar en la estructura del sitio web. Para eso, fundamentalmente, tendremos que:
>Definir las secciones y páginas web que debe tener el sitio.
>Escoger las secciones o páginas a las que podremos acceder desde la página principal (o de inicio).
>Decidir si alguna sección o página tiene que destacar más respecto las demás.
>Distribuir el contenido a presentar entre las distintas secciones y páginas.
>Concretar las distintas vías de acceso a cada una de páginas web del sitio (es importante ofrecer múltiples maneras de acceder a la misma información).
>Especificar el número de idiomas que dispondrá el sitio web.
Para ayudar a concretar la estructura final del sitio web, muchos diseñadores y programadores web recomiendan hacer un esquema a mano alzada, con post-its o con un simple programa de diseño del ordenador, que nos permita realizar cambios fácilmente a medida que redescubrimos mejores estructuras para nuestro sitio web.
Ejemplo de la estructura de un sitio web en el que se detalla todas las páginas y el recorrido para acceder a ellas.
Normalmente, el contenido de un sitio web se estructura en diferentes páginas web, pero debemos mencionar una tendencia (no muy utilizada ni recomendada), llamada “parallax scrolling”, que estructura todos los contenidos en una solo página web y permite que el usuario acceda a ellos mediante enlaces internos o bajando por la barra de desplazamiento o “scroll”.
Una vez ya tengamos clara como estará estructurada la planta de la casa (sitio web a diseñar), podemos empezar a diseñar la estructura de cada habitación (página web), decidiendo donde pondremos los muebles (contenido) y la decoración (elementos gráficos). Con especial esmero tendremos que estructurar el salón de la casa (página principal), donde recibiremos a todos nuestros invitados (usuarios), para que sea lo más confortable posible (diseño) pero también aporte el máximo de información sobre los anfitriones y sobre los contenidos de las distintas habitaciones (usabilidad).
Para determinar la estructura de cada página web, tendremos que definir (entre otros):
>Qué tipo de web quiere el cliente: tipo tarjeta de visita, tipo catálogo, tipo anuncio de revista, tipo juego, una combinación entre las anteriores…
>Qué tipo de información desea presentar el cliente: mucha imagen, mucha información escrita…
>Qué mensaje debería de recibir el usuario cuando abra la página principal.
>Hacía qué secciones del web se debería sentir atraído.
>Qué elementos comunes deben presentarse en todas las páginas (por ejemplo sistema de navegación).
>Qué contenido específico debería presentarse en cada página.
De todos modos, antes de empezar a diseñar la estructura de una página web, deberíamos conocer las estructuras estándares utilizadas normalmente.
Estructuras estándares
Uno de los aspectos más importantes de las estructura de una página web es decidir dónde posicionaremos los menús de navegación y enlaces a otras páginas web y dónde posicionaremos el contenido que van a consultar los navegantes. Existen diversos tipos de estructuras estándares de páginas web que especifican la posición de los menús de navegación y el contenido, manteniéndose esta estructura y diseño durante toda la navegación por el sitio web.
Sin que sea sorprendente, los menús de navegación acostumbran a posicionarse en los márgenes de la página, dejando los contenidos en el centro. Por defecto, las estructuras estándares posicionan los menús de navegación arriba o en los laterales, pero también existen otras posibilidades:
Bloque de navegación a la izquierda:
Permite presentar muchos menús o enlaces, pues cada línea puede ser un enlace (por ejemplo, el menú de navegación de esta guía). Tampoco supone mucho problema que los menús se extiendan fuera de la pantalla, porque el usuario puede visualizarlos con la barra de desplazamiento vertical. Este método es ideal si los menús son administrables, pues el diseño no se verá muy afectado si aumentan o disminuyen el número de enlaces.
Ejemplo de bloque de navegación a la izquierda:guiadiseño.com
Bloque de navegación arriba:
Ideal si el sitio web no tiene demasiadas secciones. Los menús se sitúan en línea y ocupan mucho espacio. Es fácil si los menús se despliegan con otros submenús (es más fácil la navegación que si los submenús se abren lateralmente)
Si tenemos muchos enlaces a presentar, siempre podemos utilizar cualquier combinación de los anteriores (arriba e izquierda; izquierda y derecha; arriba, izquierda y derecha;…), sobre todo si los menús se pueden agrupar en dos o tres grandes grupos.
El pie de página acostumbra a tener una gran importancia en las estructuras de los webs actuales, donde se pueden repetir los menús de navegación (para que el usuario no deba subir por la página), situar los enlaces alaviso legal,copyright, redes sociales: facebook, RSS, twitter o los datos de dirección y contacto.
La página principal es un caso especial, para la cual no existe una estructura estándar. Aunque la página principal también se puede estructurar de un modo estándar, en la mayoría de sitios web, la página principal no se diseña para presentar contenido, y más bien se imagina como escaparate de la empresa, en el que también se presentan los menús o enlaces a las diferentes páginas o secciones del web.
Conociendo las estructuras web más utilizadas, ya podemos empezar a dibujar la estructura específica de nuestra página web, dibujando y posicionando a nuestro gusto los bloques de menús, contenido, gráficos, y los sub-bloques dentro de cada uno de los anteriores.
Cada diseñador tendrá su propio método para plasmar la estructura imaginada de una página web a la pantalla de su ordenador. Aquí transcribimos el método de trabajo específico de un diseñador:“Comienzo por bosquejar algunos posibles diseños sobre papel. Después de unos pocos de estos bocetos, decido cual me gusta más o cual se adapta mejor a los requisitos del cliente y el salto al Photoshop (o freehand), y uso la herramienta de rectángulo para bloquear las áreas que he marcado en mi papel. Una vez que he definido mi diseño, experimento con los colores de fondo y de los rectángulos hasta tener un esquema de color sólido. Y sigo trabajando con píxeles hasta que, finalmente, tengo un borrador para mostrar al cliente.”
La estructura de una página web se sub-divide en bloques rectangulares, dentro de los cuales vamos a posicionar los diferentes elementos de diseño o contenido. Más tarde, al aplicar diseño sobre estos rectángulos podemos enmascararlos eliminando los bordes o utilizando formas curvas, pero es importante conocer que cualquier estructura web está basada en rectángulos horizontales (no en diagonal).
A pesar de todo, el diseño de la estructura web no finaliza al posicionar los diferentes bloques, porque tenemos de definir como se adaptaran y comportaran en función de la resolución de pantalla.
Adaptación de la estructura en función de la resolución
Adaptación del bloque principal
Bloque principal: recuadro exterior que engloba toda la estructura de página web, es decir, no existe ningún recuadro o bloque secundario que rebase el bloque o recuadro principal.
Bloque secundario: cada uno de los recuadros que componen el bloque o recuadro principal.
Existen tres maneras distintas de adaptar el bloque principal en función del tamaño de la pantalla:
Fijo:
El bloque se diseña con un tamaño fijo que no se va a modificar en función del tamaño de la pantalla. Es el más fácil de diseñar y maquetar porqué los elementos del diseño o bloques secundarios siempre estarán en la misma posición y mantendrán el mismo ancho.
Ejemplo página web de estructura fija, mostrada en pantallas de distinta resolución. A resoluciones grandes aparecen muchos espacios en blanco; a resoluciones pequeñas el diseño queda cortado
Si escogemos una estructura principal fija, tenemos que pensar qué tamaño en pixeles vamos a utilizar. Según las estadísticas actuales (http://www.w3schools.com/browsers/browsers_display.asp), el 98% de usuarios tienen resoluciones igual o superiores a 1024×768, aunque empiezan a crecer el número de usuarios con pantallas inferiores a 800×600 debido a la navegación con tabletas y teléfonos.
Si diseñamos un bloque principal fijo, podría ser bueno tomar como referencia la resolución de 1024×768, aunque el ancho del bloque principal debería de ser más pequeño, pues el navegador se necesita algunos pixeles para los menús, márgenes y barras de desplazamiento. Así pues, deberíamos de diseñar un bloque principal de un ancho máximo de 990 pixeles. Si queremos que todo el contenido aparezca en la pantalla y no aparezcan barras de desplazamiento verticales, la altura máxima del diseño debería de ser entre 600 y 650 pixeles (dependerá mucho del espacio que ocupen los menús del navegador del usuario).
Normalmente, la estructura principal fija se centra en la pantalla para resoluciones grandes, aunque también se puede alinear a la izquierda o a la derecha.
Fluido o líquido:
Con independencia de la resolución de una pantalla, un bloque principal fluido ocupa un porcentaje horizontal de la pantalla, normalmente el 100% (aunque también puede ocupar el 90% centrado, o alineado a la izquierda o derecha). Normalmente, al disminuir la resolución o tamaño de una pantalla, el bloque fluido se estrecha horizontalmente pero se alarga verticalmente para poder presentar toda la información que contiene. A su tiempo, los bloques secundarios dentro de un bloque principal fluido pueden tener un ancho fijo o fluido y tener una posición fija o fluida (se verá en el siguiente punto).
Diseñar y maquetar una estructura fluida es más complejo, pues se tienen que prever cómo se van a comportar cada uno de los bloques secundarios en su interior. Bien diseñada, una estructura fluida se puede adaptar desde las resoluciones de pantalla más grandes hasta las resoluciones de pantallas más pequeñas de los teléfonos, aunque para éste último caso se recomiendan distintas estructuras, como se verá a continuación.
Ejemplo de adaptación fluida (en este caso, todos los bloques secundarios también son fluidos):
El diseño sensible (del inglés: responsive design) es una opción cada vez más utilizada en el diseño web actual es crear estructuras del bloque principal distintas, reacomodando los contenidos en función de la resolución de la pantalla. Esto puede ser muy útil cuando consideremos el acceso a nuestro web a través de teléfonos, que tienen resoluciones de pantallas muy pequeñas. Algunos navegadores para móviles reestructuran el diseño de los webs de un modo eficiente, pero si queremos asegurar la buena visualización y diseño de nuestro web a cualquier resolución, deberemos de crear varias estructuras en función de la resolución de la pantalla.
En un diseño sensible, no aparecerán barras de desplazamiento horizontales (scroll) hasta resoluciones muy pequeñas.
Podemos decidir las medidas a las cuales se presentaran las diferentes estructuras del bloque principal en función del diseño planteado, pero también podemos determinarlas consultando las pantallas más utilizadas actualmente:
Si queremos optimizar recursos y diseñar únicamente dos estructuras de web, una posible solución sería diseñar una estructura fija para pantallas mayores a 1280 pixeles de ancho que se vuelva fluido para pantallas menores a 1280 pixeles hasta 800 pixeles (Ipad). La segunda estructura podría ser fija para pantallas mayores a 480 píxeles (iPhone) que se vuelva fluido para resoluciones menores, hasta las pantallas de los teléfonos más pequeñas (160 pixeles o menos). Es importante recordar que a todas estas medidas debemos restar 30 o 40 pixeles para que el diseño no quede recortado por barras de desplazamiento o márgenes del navegador web.
Ejemplo de estructuras distintas: a 800 pixeles existe una transición que cambía de una estructura de 3 columnas a una estructura de 2 columnas (manteniendo la mayoría de contenidos):
Consultar también los diversos ejemplos web con distintas estructuras fluidas que presentamos y explicamos al final del capítulo.
Comparativa:
Ventajas y desventajas de los tres modelos de adaptación a las distintas resoluciones de pantalla:
VENTAJAS
DESVENTAJAS
Ancho fijo
– El diseñador tiene más control sobre cómo se verán los bloques secundarios dentro del principal. – Los bloques de texto secundarios son más estrechos y se mejorara la legibilidad. – Más sencillo y económico de diseñar y maquetar.
– Las estructuras pueden aparecer muy pequeñas en grandes resoluciones, y pueden aparecer cortados en pequeñas resoluciones. – El usuario pierde el control.
Ancho fluido
– Se adapta a las distintas resoluciones de pantalla y se visualiza de una forma controlada y correcta en más dispositivos. – No se corta en pantallas de dispositivos pequeños.
– Si el diseño no se vuelve fijo para resoluciones grandes, el texto en los bloques secundarios se alarga y empeora su legibilidad. – Más complejo de diseñar y maquetar. Se tiene que prever muy bien cómo se comportará la fluidez en función de las resoluciones.
Diseño sensible
– La mejor solución para dispositivos móviles. La estructura se ve siempre perfecta con indiferencia de la resolución de la pantalla del usuario. – no aparecerán barras de desplazamiento horizontales hasta resoluciones muy pequeñas.
– Se requiere de más recursos para hacer dos o más estructuras diferentes que en general se comporten de un modo fluido.
Adaptación de bloques secundarios
Si la estructura es fija, no tendremos que pensar cómo se van a adaptar los bloques secundarios en función de la resolución de la pantalla, pues los bloques secundarios se posicionaran en la pantalla del usuario dónde lo hagamos diseñado. En cambio, si la estructura es fluida, tendremos que definir cómo se van a comportar cada uno de los bloques secundarios. Metafóricamente, si tenemos una casa cuyas medidas y estructura pudiera modificarse, tendríamos que decidir cómo se deberían de adaptar y posicionar los muebles (o bloques) a cada posible medida de la casa.
Muestra de webs muy bien diseñados que adaptan los bloques secundarios en función de la resolución de la pantalla:http://mediaqueri.es
Cada bloque puede estar integrado por sub-bloques más recuadros, de los cuales también tendremos que prever cómo se comportaran. Tenemos que pensar muy bien cómo se van a adaptar porque si un bloque o conjunto de bloques no cabe dentro de otro bloque, se producirá un error (los navegadores lo intentarán representar con resultados imprevistos). En general, debemos definir el comportamiento en anchura y posición de cada bloque secundario en función de la resolución de pantalla (o en función del ancho del bloque que lo contiene).
Comportamiento en anchura:
Fija
El contenido que diseñamos dentro (texto, imágenes, animaciones,…), será el mismo con independencia de la resolución de la pantalla. La altura del bloque también se mantendrá.
Fluida
En este caso, la anchura del bloque se adaptará (como un porcentaje) en función del ancho de la pantalla o del bloque que lo contiene. Como su anchura es fluida, tendremos que definir o prever cómo se van a comportar cada uno de los elementos en su interior (otros bloques, o imágenes, texto, animaciones, video…):
>El elemento reduce o amplia su tamaño en función del acho del bloque. La altura del elemento y del bloque también se reducirá o ampliará. Ideal para imágenes.
>El elemento mantiene fijo su tamaño con indiferencia del ancho del bloque.
Si el elemento es una imagen, la altura del bloque se mantendrá fija. Pueden aparecer espacios en blanco si la resolución es grande y la imagen se puede cortar en resoluciones pequeñas.
Si el elemento es texto, los saltos de línea se generarán automáticament en función del ancho del recuadro y el bloque aumentará o disminuirá la altura.
(Ver en el siguiente capítulo, el comportamiento de imágenes y textos en un mismo bloque).
>El elemento se comporta diferente en función de la resolución de la pantalla. Por ejemplo, podemos definir que el elemento tenga el mismo tamaño para resoluciones grandes, pero se reduce para resoluciones pequeñas, hasta un límite en el cual su tamaño vuelve a ser fijo.
>El elemento a presentar es diferente en función del tamaño de la pantalla. Por ejemplo podemos presentar un logo con eslogan para pantallas grandes, otro logo sin slogan para pantallas medianas, otro logo simplificado para resoluciones más pequeñas y dejarlo de presentar en las resoluciones aun más pequeñas. En estos casos, la altura del bloque variará en función del elemento a presentar.
Comportamiento en posición:
Fluida
Podemos diseñar que dos o más bloques se representen o posicionen de lado para resoluciones de pantalla grandes pero se posicionen uno debajo del otro (o definir que desaparezcan) para resoluciones más pequeñas.
Fija en la estructura
Si definimos un bloque con una posición fija en la estructura este de mantendrá donde lo hagamos definido, con independencia del comportamiento de los otros bloques.
Fija en la pantalla
Ocasionalmente, podemos definir que algunos bloques queden fijos en la pantalla con independencia que el usuario se mueva arriba o debajo de la página web con las barras de desplazamiento. Esta opción puede ser útil para presentar menús de navegación en la parte superior del web (o al lado) que queramos que estén siempre visibles para facilitar la navegación del web. Los demás bloques sin una posición fija en la pantalla pasaran por debajo de los bloques fijos, quedando ocultos a no ser que definamos alguna transparencia al bloque fijo.
Superposición
Con independencia de su comportamiento en anchura y posición, es posible situar bloques unos por encima de otros. Además es posible definirles transparencias (ver más adelante).
Ejemplo de una estructura principal fluida y sensible:
bloques conancho fijo
bloques deancho fluido
espacios en blanco no ocupados por ningún bloque
Reestructuración si la resolución de la pantalla fuera menor. Las imágenesAyBse hacen más pequeñas; la imagen 5 se va debajo, el texto se divide en más líneas; aparecen espacios en blanco (la opción que el texto rodea laimagen 1se explica más adelante):
Si la resolución sigue disminuyendo, vamos a suponer que el boque del logo se modifica volviéndose fluido; el bloque del menú y el pie de página también se reestructuran, adaptando el texto al nuevo espacio disponible; desaparecen el bloque del slogan y alguna de las imágenes; todos los bloques se redistributen uno debajo del otro.
NOTA: Todos las medidas en pixeles son aproximadas. Algunas medidas pueden ser diferentes si el usuario amplia o disminuye el tamaño de la tipografía con Ctrl+ o Ctrl- .
La imagen muestra la página web en una pantalla grande, a partir de 1024px de resolución:
La página web mantiene una estructura fija centrada hasta los 980px:
A partir de los 980px, los bloques se redistribuyen de 4 a 2 columnas, manteniendo el diseño de cada bloque (bloques de diseño fijo):
La nueva estructura se mantiene fija y centrada hasta los 500px:
A partir de los 500px, los bloques se redistribuyen de nuevo, de 2 a 1 columnas, pero esta vez los bloques ensanchan un poco el tamaño (excepto la cabecera y las imágines que se mantienen con el mismo tamaño para todas las resoluciones):
La nueva estructura se mantiene fija y centrada hasta los 320px, la mínima resolución de esta página web:
NOTA: Todos las medidas en pixeles son aproximadas. Algunas medidas pueden ser diferentes si el usuario amplia o disminuye el tamaño de la tipografía con Ctrl+ o Ctrl- .
La imagen muestra la página web en una pantalla grande:
La página web mantiene una estructura fija centrada hasta los 1050px, pero con algunos bloques con posición fluida (notar que el logo de facebook “cae” abajo por falta de espacio a 1050px):
A partir de 1050px toda la estructura del web se mantiene pero los menús se comprimen a la derecha del logo, dejando espacio para que la página se comprima para resoluciones menores:
A medida que la resolución disminuye de 1050px a 595px, algunos bloques se mantienen con posición y ancho fijos (menús, logo,…), otros se mantienen con posición fija pero ancho líquido (Boques de texto: notar como el texto automáticamente se presenta en diferentes líneas en función del ancho disponible), y algunos bloques mantienen su ancho fijo pero su posición fluida (los iconos redondos se resitúan en función del ancho disponible).
También, alrededor de los 800px, el titularWe’re Hiring New Teachers!se presenta a un tamaño de letra más pequeña.
A partir de los 595px, el web mantiene el mismo aspecto, pero la estructura se modifica ligeramente: Logo más pequeño, menú debajo el logo, algunos textos ya no se presentan (texto debajoLearn with Treehouse), los menús de la columna derecha dejan de presentarse, los bloques de texto se presentan de un lado a otro de la pantalla…:
Disminuyendo la resolución a partir de los 595px, los menús mantienen el ancho fijo pero su posición fluida, los campos de texto mantienen un ancho fluido y algunas de sus imágenes dentro se reducen en función de la resolución de la página (por ejemplo foto del autor):
NOTA: Todos las medidas en pixeles son aproximadas. Algunas medidas pueden ser diferentes si el usuario amplia o disminuye el tamaño de la tipografía con Ctrl+ o Ctrl- .
La página web mantiene una estructura fija centrada hasta los 1230px. Naturalmente, a resoluciones grandes el web es capaz de presentar gran cantidad de información:
A medida que la resolución disminuye de 1230px a 800px, se mantiene la estructura de 3 columnas pero todas mantienen un ancho fluido. La mayoría de las fotos disminuyen su ancho en función del espacio disponible (excepto anunció y cabecera, que mantiene bloques de ancho fijo pero posición fluida, unos alineados a la derecha, otros centrados y otros alineados a la izquierda). El texto mantiene el mismo tamaño en todas las resoluciones:
A partir de los 800px, la estructura del web cambia a 2 columnas (las imágenes se vuelven a adaptar al ancho disponible) y se simplifica la cabecera del web y menús:
A medida que la resolución disminuye de 800px a 635px, se mantiene la estructura de 2 columnas pero todas mantienen un ancho fluido, con las mismas características descritas anteriormente:
A partir de los 635px, la estructura del web cambia a 1 columna y por primera vez se cambia el logo de la cabecera:
Se mantiene la misma estructura hasta 470px:
Al disminuir la resolución a partir de los 470px, la cabecera se modifica, presentando un logo que irá disminuyendo el tamaño en función de la resolución:
El web sigue visualizándose correctamente hasta las mínimas resoluciones de 265px. En cualquier resolución, casi todas las tipografías mantienen el tamaño y formato, facilitando la lectura:
NOTA: Todos las medidas en pixeles son aproximadas. Algunas medidas pueden ser diferentes si el usuario amplia o disminuye el tamaño de la tipografía con Ctrl+ o Ctrl- .
La página web mantiene una estructura fija centrada hasta los 1000px. La imagen de fondo del tigre se mantiene centrada pero queda cortada a resoluciones inferiores a 1200px, sin que la calidad del diseño se vea afectada:
A partir de los 1000px, toda la estructura de la página se vuelve de tamaño fluido, estrechándose hasta los 850px. En concreto, los menús se acercan unos a los otros y los bloques de texto y algunas imágenes se vuelven más estrechos. En cambio, el titular de la página y la imagen de fondo se mantienen con ancho fijo y centradas en la página:
A partir de 850px se reestructura la página. Los bloques laterales se resitúan más abajo, el campo de texto se ensancha de lado a lado de la pantalla, el menú se pone en vertical a la derecha, los logos de la cabecera disminuyen ligeramente de tamaño… En cambio, los tamaños de tipografía e imagen de fondo se mantienen igual:
A partir de los 850px, toda la estructura de la página sigue con un tamaño fluido, estrechándose hasta los 590px. Algunos bloques tienen un tamaño fluido y otros un tamaño fijo manteniéndose centrados o alineados a la izquierda:
A partir de los 590px el diseño se simplifica mucho, desapareciendo la imagen de fondo, reduciendo tamaño de logos, resituando menús de lado a lado de la pantalla…:
El web sigue manteniendo una estructura fluida hasta un ancho mínimo de 207px, cuando no se puede reducir más porque las dos imágenes de la cabecera no se pueden estrechar más:
NOTA: Todos las medidas en pixeles son aproximadas. Algunas medidas pueden ser diferentes si el usuario amplia o disminuye el tamaño de la tipografía con Ctrl+ o Ctrl- .
Este ejemplo no se va a utilizar para estudiar cómo se adaptan los bloques en función de la resolución de la pantalla, aunque el web se adapta perfectamente. Este ejemplo nos será útil para ver los posibles comportamientos de los bloques en función de nuestra posición en la página (o delscrollo de la barra de desplazamiento):
Si nos desplazamos hacía abajo, vemos que algunos bloques se mantienen fijos en la pantalla (barra amarilla y el dibujo de los cuatro animales), mientras algunos bloques se mantienen fijos en la estructura web, es decir se desplazan arriba si consultamos la página más abajo (texto “Dmig” y “5”). El bloque “Dmig” se presenta por debajo del bloque de los animales y el bloque “5” encima, creando un interesante efecto:
A medida que vamos bajando por el contenido de la página, otro bloque se va presentando por encima de los animales (parece que se presente por debajo por su color más oscuro). Algunos de estos bloques que se presentan por encima son fijos a la estructura mientras otros son fijos a la pantalla (los animales de fondo montados unos encima los otros):
Bajando más abajo, la imagen de los animales montados se vuelve clara, indicando que los anteriores bloques de texto tenían una transparencia aplicada:
NOTA: Todos las medidas en pixeles son aproximadas. Algunas medidas pueden ser diferentes si el usuario amplia o disminuye el tamaño de la tipografía con Ctrl+ o Ctrl- .
Este web diseñado por Estudi DF y programada por Javajan no se adapta de un modo tan compleja como las otras webs vistas anteriormente, pero no deja de ser interesante para observar como la imagen de fondo se adapta al tamaño de la ventada del navegador, disminuyendo o cortándose por los lados o por abajo, según se adapta a la ventana del navegador.
Presentación de los contenidos
Ahora podemos empezar a diseñar los muebles, es decir, diseñar en contenido en cada uno de los bloques o recuadros anteriormente mencionados. Para eso, debemos de saber las limitaciones técnicas de cada uno de los elementos, es decir, cómo podemos diseñar las imágenes, texto, animaciones…
Bloques
Los bloques o rectángulos descritos anteriormente, aparte de definirle su comportamiento, les podemos definir diversos efectos:
>Color o imagen de fondo*.
>Márgenes con los bordes y márgenes con otros bloques.
>Ancho y color del borde, se pueden tomar imágenes para representar el borde, también se pueden redondear los vértices.
>Sombreados.
>Transparencias.
>Degradados de colores o de transparencias.
>Cambiar el puntero cuando entra dentro del bloque.
>Permitir que el usuario desplace el bloque a otra área de la pantalla.
>Cambiar los atributos de un bloque, o que aparezca o que se cierre a partir determinadas acciones del usuario.
>Otros (consultar con los maquetadores)
* Las imágenes de fondo, se pueden repetir horizontalmente, verticalmente, o en las dos direcciones juntas, formando lo que se llama una textura. Estastexturasson frecuentemente utilizadas en los fondos de las páginas web, otorgando una atmósfera muy personalizada:
Tradicionalmente, el uso de tipografías en el diseño web ha sido un problema. Por defecto, los navegadores web solo podían presentar el texto con las tipografías que el usuario tenga instaladas en su sistema operativo (Windows, Mac, Linux,…). Actualmente esta limitación se ha solucionado, pero los efectos web que se pueden realizar a las tipografías (negrita, subrayado, alienación…) continúan siendo muy limitados.
Imágenes con texto
Una posible solución a este problema con las tipografías es utilizar imágenes, lo cual nos permitirá crear cualquier efecto que queramos a las tipografías.
Pero, aunque la utilización de imágenes sea muy útil y utilizada para los títulos, menús, y otras partes del web, existen diversas limitaciones que tenemos que tener en cuenta. Básicamente, nunca se recomienda utilizar imágenes para presentar textos largos, porque:
>La página web tardaría mucho a cargarse.
>Los buscadores no podrían indexar el texto. Si el texto a presentar es corto (por ejemplo un menú) se puede poner un texto alternativo “detrás” la imagen, sin penalizar en los buscadores.
>El texto no se podría utilizar en bloques fluidos (Si el texto no es imagen automáticamente se adapta al espacio disponible).
>El usuario no puede aumentar el texto y algunos pueden tener problemas de legibilidad.
>El texto sería complicado de actualizar.
Además, si la página web es generada por un programa y se toma el texto de una base de datos, es complicado utilizar imágenes para presentar el texto.
Tipografías web
Con las nuevas tecnologías web, los nuevos navegadores pueden presentar cualquier fuente que queramos utilizar, como si se enviara la fuente junto al web. La ventaja, respecto la utilización de imágenes es que el texto es encontrado mejor por los buscadores, además se puede utilizar para presentar textos desde bases de datos (Por ejemplo, los titulares superiores de esta guía tienen la tipografíaUbuntuy están generados con esta solución jquery).
De todos modos, la mayoría de programadores web siguen utilizando las llamadas “tipografías seguras”, definiendo un listado de tipografías que se van a intentar utilizar en orden establecido (Si la primera fuente no está disponible en el ordenador del usuario, la segunda fuente será utilizada y así sucesivamente). Los grupos de fuentes más utilizados son los siguientes:
Verdana,Geneva,sans-serif Georgia,Times New Roman,Times,serif Courier New,Courier,monospace Arial,Helvetica,sans-serif Tahoma,Geneva,sans-serif Trebuchet MS,Arial,Helvetica,sans-serif Arial Black,Gadget,sans-serif Times New Roman,Times,serif Palatino Linotype,Book Antiqua,Palatino,serif Lucida Sans Unicode,Lucida Grande,sans-serif MS Serif,New York,serif Lucida Console,Monaco,monospace Comic Sans MS,cursive
Con independencia de la tipografía utilizada, deberemos definir su tamaño. Normalmente, las tipografías se trabajan en píxeles, que son equivalentes a puntos cuando la resolución de la pantalla es de 72 ppp (píxeles por pulgada). A modo de orientación, trabajar con 11 o 12 píxeles facilita la lectura de la mayoría de las tipografías, y casi nunca se trabaja con tipografías menores a 8 o 9 píxeles. Opcionalmente, en vez de trabajar con píxeles, podemos definir el tamaño de una tipografía como un porcentaje de la tipografía “media” definida en el ordenador del usuario.
Por defecto, las características o efectos que podemos escoger en cualquier texto web son:
>Color.
>Normal, negrita, cursiva, subrayado…
>Alinear a derecha, izquierda, centro, justificado
>Tamaño de fuente. Se puede definir en píxeles o en un tamaño relativo (pequeño, grande…)
>Espaciado de palabras, espaciado de letras, espaciado entre parágrafos…
>Sombreados o gradientes de colores (solo en algunos navegadores web)
>Otros (a consultar con el maquetador).
A parte de las anteriores posibilidades, el texto web tiene muchas limitaciones. Por ejemplo, la mayoría de navegadores no pueden representar texto en 3D o con un ángulo de rotación (por ejemplo a 45º), sólo sería posible hacerlo con imágenes, aunque eso plantea las limitaciones ya descritas.
Comportamiento del texto con bloques
Otra limitación a tener en cuenta al diseñar una página web es que el texto se puede adaptar automáticamente alrededor de bloques rectangulares (por ejemplo imágenes) que estén alineados a la derecha o a la izquierda. Pero no es posible (o sería muy complicado) que el texto se adapte automáticamente alrededor de formas no rectangulares. Por ejemplo, si tenemos que presentar un texto así, el texto se debería de presentar cómo una imagen, con sus problemas asociados (descritos anteriormente). Así pues, siempre es mejor diseñar teniendo en cuenta estas limitaciones.
Este bloque web se debería generar como una imagen.
Este bloque es posible generarlo como una imagen más el texto.
Imágenes
Formatos
Los formatos de imágenes que cualquier navegador web puede presentar son:.gif,.jpgy.png:
GIF:Es un formato que conserva cada pixel de la imagen original, muy eficiente para gráficos sencillos con pocos colores. Permite entrelazar la imagen, es decir, presentarla con mayor detalle a medida que el navegador la descargue. Permite crear animaciones y transparencias del 100%. PNG:Es un formato similar al GIF pero no permite crear animaciones. En cambio permite degradados de transparencias. JPG:Comprime mucho más las imágenes que los anteriores formatos. Excelente para trabajar con fotografías de muchos colores y texturas, porqué mantiene la calidad percibida con pesos de imagen mucho más bajos. No permite transparencias ni animaciones.
Teniendo en cuenta los formatos admitidos, las imágenes no pueden ser vectoriales ni contener capas. Solo se trabaja con píxeles.
Guardar imágenes para web
Actualmente, la mayoría de programas de tratamiento de imágenes tienen la opción “guardar para web”. Estas opciones permiten definir transparencias, tamaño y disminuir la calidad de la imagen y sus colores.
Idealmente se tienen que guardar al tamaño que se va a presentar en la página web, o no ser que vayamos a permitir que la imagen se presente más grande en navegadores con más resolución. Es importante recordar que, con las conexiones de internet actuales, podemos calcular muy orientativamente que por cada incremento de peso de 500Kb a 1Mb, una página tarda un segundo más a descargarse y abrirse. Para evitar pesos muy elevados de páginas con muchas imágenes, puede ser positivo trabajar con imágenes pequeñas que se ampliaran cuando el usuario las seleccione o clique.
Si una imagen contiene texto, antes de guardarla es mejor ponerle el efecto anti-aliasing, un ligero desenfoque en los bordes curvos que hará más suaves las transiciones entre los colores.
Texto alternativo de las imágenes
Para que el web esté bien posicionado en los buscadores, es importante pasar las imágenes al maquetador juntó con el texto alternativo que las define. Los buscadores toman este texto alternativo como la descripción o contenido de la imagen.
Actualmente no es necesario arriesgarse a tomar imágenes “robadas” de Internet, porqué existen muchas imágenes con Royalty free o se pueden comprar imágenes a precios muy económicos.
Los enlaces web pueden ser texto o imágenes. Para diferenciarlos de otros elementos que no son enlaces, el puntero (o ratón) cambia de la forma fecha a mano cuando se pasa por encima. De todos modos, el diseño de la página web también debe de diferenciar los enlaces utilizando colores distintos, subrayados, tipografías distintas,… Por ejemplo, debemos evitar que los enlaces no parezcan enlaces o que el texto resaltado se parezca a enlaces.
Por defecto, podemos definir imágenes diferentes o efectos de tipografía diferentes según distintos eventos relacionados con el enlace:
>El enlace no ha estado visitado por el usuario con anterioridad.
>El enlace ha estado visitado por el usuario con anterioridad.
>El puntero del usuario pasa por encima del enlace (eso sirve para iluminar o destacar más el enlace).
>El usuario clica sobre el enlace. Eso puede suceder tan rápido en algunos navegadores que a la práctica no es se utiliza este evento.
Menús desplegables
Opcionalmente se puede programar que al pasar el puntero del usuario por encima de un enlace (o al clicarlo) se abra un bloque situado por encima de los otros bloques (o también se puede hacer que el nuevo bloque se haga espacio entre los otros bloques). Eso permitirá diseñar un menú desplegable con nuevos enlaces listados en el bloque abierto. Deberemos definir en qué posición se va a presentar el nuevo bloque y la animación que tendrá al abrirse.
Los formularios web se utilizan para interactuar con el usuario de un modo más personalizado y obtener información proporcionada por él mismo. Un formulario siempre capta la información y la envía a un programa web que la trata, añadiéndola a una base de datos, enviando un correo electrónico o presentando nueva información al usuario en función de la información introducida.
Un formulario web puede estar compuesto por los siguientes elementos:
>
Campo de texto:una línea para introducir texto a la cual se puede especificar longitud de caracteres a presentar, longitud máxima de caracteres a introducir, texto que aparece al inicio (normalmente se presenta en blanco). Se puede definir como contraseña, de modo que el texto introducido no se vea.
>
Área de texto:diversas líneas en las que se puede introducir texto. Se puede especificar longitud en caracteres de la línea, número de caracteres por línea, texto o valor inicial. Opcionalmente el campo de texto se puede presentar con opciones que permitan diseñar el formato de la tipografía, insertar imágenes, presentar enlaces… de modo que el programa que capte la información la pueda tratar como codificación html o web (ejemplo editor html area:http://www.dynarch.com /projects/htmlarea/)
>
Botón:Se utiliza para enviar la información o para realizar otras opciones (por ejemplo, poner en blanco todos los campos introducidos, comprobar la información como paso previo…). Por defecto se le define el nombre a presentar y la acción a realizar.
>
Casilla de verificación:Pequeño recuadro que se puede marcar o desmarcar.
>
Botón de opción:Pequeño círculo que se puede marcar o desmarcar (siempre tiene que existir un circulo de la lista marcado).
>
Lista / menú:Listado de opciones que se pueden marcar (una o varias). El listado puede estar desplegado, mostrando todas las opciones o se puede desplegar cuando el usuario clique sobre el listado.
>
Campo de archivo o imagen:Similar al campo de texto, pero tiene un botón al lado para que el usuario pueda explorar sus directorios y seleccionar un archivo o imagen a enviar. Se pueden definir los mismos valores que en el campo de texto y botón.
>Campo oculto:A veces es necesario enviar información que el usuario no necesita ver, junto a la que introduzca el mismo. En este caso se utilizan campos ocultos, que lógicamente no se tienen que diseñar.
os distintos elementos de un formulario mencionados tienen un diseño por defecto que muchas veces no encajará con diseños elaborados de una página web. Así pues, cada uno de los elementos se puede diseñar como si se tratara de un bloque (márgenes, bordes, colores de fondo,…) y el texto se puede presentar con los mismos efectos definidos en la tipografía.
Aunque las tablas son unos elementos específicos frecuentemente utilizados en las páginas web, se pueden diseñar contemplando las mismas posibilidades y limitaciones que los bloques secundarios, los cuales serán posicionados unos al lado de otros, creando filas. Al mismo tiempo, las filas se irán posicionando unas debajo de las otras.
Ejemplos de diferentes diseños para tablas:
—-
Animaciones
Todos los efectos mencionados anteriormente (posiciones de bloques, efectos de las tipografías,…) se pueden modificar de acuerdo a la secuencia temporal que queramos o de acuerdo a una secuencia de acciones generadas por el usuario. Además de modificar las características de los bloques, de las tipografías, imágenes… dentro de la secuencia temporal (o de las acciones del usuario) también se pueden presentar nuevos bloques o eliminar de existentes.
Las posibilidades son infinitas, únicamente limitadas por la imaginación (y el trabajo de maquetación). Esta gran flexibilidad que permite animar los módulos y las características de cualquier elemento web ha provocado que la mayoría de maquetadores estén dejado de trabajar en flash, básicamente porqué existen dispositivos que no reproducen el flash y porqué las animaciones también serán reconocidas por los buscadores (no ocurría con el flash).
También existe la opción de presentar nuevos contenidos cuando el usuario realiza cierta acción, por ejemplo, en algunas páginas web, cuando el usuario llega al final de la página se abren nuevos bloques con nueva información (por ejemplo facebook.com).
A meowwww! using no graphics, no javascript, just CSS Compatible with Mozilla Firefox (5), Safari and Chrome (It’s a pity that CSS/keyframes cannot trigger sound effects)
A parte de imágenes, texto, formularios, tablas, animaciones… los bloques web también permiten insertar:
>Vídeos:Se pueden enlazar vídeos de Youtube, Vimeo… o se pueden presentar vídeos alojados junto al web. Si el video está alojado junto al web, se pueden diseñar o personalizar los enlaces de “play”, “stop”, “pause”… aunque la maquetación o programación se puede complicar. Muchos recomiendan no empezar el video hasta que el usuario no lo seleccione.
>Música:Se puede poner música en la web, con sus botones de “play”, “stop”, “pause”, selección de canción… Es necesario tener los derechos de reproducción o tener una canción sin derechos. Muchos recomiendan no activar la música al cargar la página, que sea el usuario quien tome la iniciativa.
>Calendarios:Se pueden actualizar automáticamente a partir los calendarios de Google, Microsoft Outlook… El usuario también puede actualizar sus calendarios a partir del calendario web.
>Chat:Aplicación para conversar on-line con otro usuario.
>Elementos de redes sociales:Facebook, Twitter, google+…
>Mapas de google.
>Otros: Cualquier aplicación existente en Internet se puede aplicar a su diseño web. Si tiene en mente otra aplicación no existente, consulte con su maquetador.
Las posibilidades web están en evolución constante. Existen posibilidades ya definidas (CSS3 y HTML5) que progresivamente van a ser reconocidas por todos los navegadores. Algunas simplemente facilitaran el trabajo de maquetación mientras que otras permitirán nuevas posibilidades en el diseño. Javajan toma el compromiso de mantener actualizado este libro con las nuevas tecnologías que se vayan implantando y que amplíen las posibilidades en el diseño web.
A medida que los navegadores web vayan aceptando los diferentes formatos y codificaciones propuestos conCSS3yhtml5vamos a ir manteniendo actualizada esta guía.
Diseño de páginas web programadas
Las posibilidades y utilidades de la programación web son prácticamente infinitas, limitadas únicamente por la imaginación. Por ejemplo, un programa web puede generar un contenido específico para cada usuario de Internet (en función de su procedencia, entradas o consultas anteriores…), puede tratar y guardar la información enviada por un usuario a través de un formulario, puede enviar correos electrónicos, puede generar o retocar imágenes, puede presentar informaciones de productos almacenados en una base de datos…
De todas las posibilidades de la programación web, la utilidad más utilizada es la que permite crear páginas con listados de elementos (categorías, productos, servicios, empresas, personas…) que enlacen a páginas con información individual de cada elemento del listado, todas estas generadas de un modo automático, obteniendo los datos (textos, imágenes y otras informaciones) de una base de datos que el cliente puede exportar a Internet o administrar a través de una intranet (programas web de gestión privados).
En este apartado vamos a describir las posibilidades y limitaciones en el diseño de páginas web programadas con listados o con información de elementos obtenidos de una base de datos. De todos modos, es necesario insistir que tales limitaciones no son reales, aunque facilitaran el trabajo del maquetador y programador y por lo tanto abarataran el coste del proyecto.
Página web programada para presentar un elemento
Antes de empezar a diseñar las páginas web de los elementos, tendríamos que preguntarnos:
>Qué información de la base de datos deseamos presentar por cada elemento (nombre, imagen, descripción, precio, web, dirección…)
>Cuáles son las dimensiones máximas y mínimas de las informaciones a presentar: ¿todas las imágenes tienen el mismo tamaño? ¿el texto a presentar tiene longitudes muy diferentes dependiendo del elemento?
>¿Existen informaciones que se pueden presentar para unos elementos y no presentarse para otros? Por ejemplo, unos productos pueden tener rebajas y otros no, unas empresas pueden tener dirección mail y otras no,…
A continuación podremos empezar a esbozar el diseño de la página web que va a presentar los datos e informaciones de cada elemento. Normalmente,todas las páginas web de cada elemento tendrán el mismo diseño y estructura o composiciónpor lo que tendremos que prever cómo se comportará elbloque principaly losbloques secundariossi las informaciones a presentar varían:
>Las informaciones (texto o imágenes) de dimensiones más largas o grandes se cortarán para caber en el espacio diseñado.
>O, los bloques serán fluidos (en ancho, altura y/o posición) en función de las dimensiones de la información a presentar o en función del número de informaciones a presentar. En este caso tendremos que diseñar la página web teniendo en cuenta las posibles variaciones de la estructura.
Si se desea que las páginas web de determinados elementos tengan un diseño completamente distinto (ofertas, empresas destacadas, productos sin estoc…), se tendrán que diseñar tales páginas del mismo modo especificado más arriba.
Idealmente, cada elemento de la base de datos debería tener un título, descripción y palabras clave para optimizar la página en los buscadores (ver Optimización para los buscadores – SEO)
Por defecto, cada elemento del listado web se presentará dentro de un bloque. El diseño de cada bloque listado seguirá el mismo procedimiento que el diseño de las páginas de elementos web programadas. Así pues, tendremos que definir los datos o informaciones a presentar para cada elemento (y las posibles excepciones). A continuación podremos empezar a esbozar el diseño de cada bloque que va a presentar la información de cada elemento. Normalmente,los bloques de cada elemento se diseñarán con la misma estructura y composición, por lo que tendremos que prever cómo se comportará el bloque si las informaciones a presentar varían, del mismo modo que vimos en el apartado anterior.
Si se desea que determinados elementos tengan un diseño de bloque completamente distinto, será necesario diseñar este nuevo bloque y prever el comportamiento de este bloque con el resto.
A parte de la estructura y diseño de los bloques de los elementos, debemos diseñar también como se van a listar los distintos bloques. Las siguientes son las opciones más comunes.
>De lado (¿Cuántas columnas se presentarán como máximo?)
>Unos debajo de los otros (lo más utilizado cuando principalmente se presenta texto).
Además, tendremos que definir cuántos elementos se listaran como máximo por cada página. Si no se listan todos los elementos en la primera página, tendremos que diseñar enlaces para acceder a la continuación de los listados.
Normalmente, una intranet no es pública y solo es accesible mediante nombre de usuario y clave de acceso (password). La intranet será utilizada por el cliente para consultar, añadir o eliminar elementos (productos, servicios, categorías, empresas, personas…) o actualizar sus informaciones (textos, imágenes, precios, vídeos…).
Normalmente una intranet no necesita un diseño muy elaborado, por lo que el presupuesto de un proyecto web siempre se abaratará si el programador toma un diseño estándar utilizado para sus programas. En principio, el cliente final o el diseñador solo necesitan especificar al programador qué elementos de la base de datos serán necesarios consultar o gestionar.
Optimización para los buscadores(SEO– Search Engine Optimization) sirve para mejorar el posicionamiento o la visibilidad de un sitio web o una página web en los buscadores (google, bing, yahoo…)
Para optimizar un sitio web para los buscadores, básicamente se tiene que optimizar cada una de sus páginas web para los buscadores. Para optimizarlas, tendremos que subministrar las siguientes informaciones para cada página web del sitio (tales informaciones quedaran ocultas al usuario cuando visita la página):
>Título de la página: Es el elemento más importante para el posicionamiento, además de ser el texto que aparecerá subrayado en los buscadores y en la cabezera de los navegadores. No debe ser muy largo pero idealmente tiene que contener las palabras clave por las que queremos ser encontrados. El título tiene que identificar a la página web, no al sitio web. Si el título es menor a 65 caracteres, se presentará entero (sin cortarse) en la mayoría de los buscadores web.
>Descripción de la página: Después del título, es el segundo elemento en importancia y también debería de incluir las palabras clave más importantes, aparte de describir la página específica en la que nos encontremos. La descripción puede ser más larga que el título pero se recomienda que sea inferior a 156 caracteres para que se presente entera en la mayoría de buscadores web.
>Palabras clave: Listado de palabras por las que queremos que nuestra página web sea encontrada en los buscadores. No hay limitaciones en el número de palabras clave a utilizar pero, cuantas menos palabras utilicemos, los buscadores las tendrán más en cuenta.
Otro aspecto muy importante es la inclusión de un título o nombre detrás de cada imagen utilizada en la página web. Por ejemplo, detrás del logo se puede poner el nombre de la empresa, detrás de una imagen de producto se puede poner el nombre el producto…
Finalmente, aparte de la optimización de las páginas webs para los buscadores, también es muy importante conseguir enlaces de calidad que enlacen a nuestra página web desde otras páginas web. Para conseguirlo, podemos intercambiar enlaces con otras web, conseguir menciones en webs sectoriales, participar en foros que dejen publicar nuestra web, escribir en google+,…
Google, el buscador más utilizado en Internet, ha hecho públicas un conjunto de recomendaciones (en inglés:http://support.google.com/webmasters/bin/static.py?hl=en&page=checklist.cs&tab=1095542) para optimizar el posicionamiento en Google y los otros buscadores de Internet. En este documento describimos un resumen de todas estas recomendaciones. Si quiere más información sobre estas recomendaciones o quiere implementarlas,contacte a Javajan.
Hay que definir y configurar:
>Títulos de páginas (poner títulos diferentes para cada página).
>Descripciones de páginas (poner descripciones diferentes para cada página).
>Palabras clave de páginas (poner palabras clave diferentes para cada página).
>Nombres de páginas que hagan referencia a su contenido (URL amigables).
>Nombres de imágenes que hagan referencia a su contenido (URL amigables).
>Descripción imágenes.
>Poner sitemap de la web a robots.txt
>Configurar robots.txt si alguna página o sección no debe ser listada por los buscadores.
>Poner botones de +1 y “compartir en facebook” y “compartir en twitter” en cada página.
>Activar web en buscadores locales y sectoriales.
>Escribir contenidos o comentarios en blogs sectoriales con enlaces a la web.
>Crear perfil de empresa en google +, facebook, twitter y linkedin
Herramientas de análisis:
>Activar web en google webmasters (https://www.google.com/webmasters), estudiar informes y activar geotargeting si la web sólo debe ser encontrado en un país (mejorará el posicionamiento en este país).
Javajanhace más de 10 años que trabaja maquetando y programando páginas web para diseñadores gráficos. Las siguientes recomendaciones –seguramente compartidas por todos los maquetadores– están encaminadas a facilitar un trabajo impecable y eficiente cómo maquetadores y programadores web, así como eliminar cualquier posibilidad de malentendido o equivocación.
Presupuesto previo
Normalmente, antes de empezar proyecto alguno, el diseñador o cliente final necesitarán un presupuesto que especifique el coste del trabajo del maquetador. Basándonos en nuestra experiencia enJavajan, un maquetador necesita como mínimo la siguiente información para presentar un presupuesto ajustado al diseñador o cliente final:
¿El diseño de cada página web será fijo, fluido o sensible?
Si el diseño es sensible, ¿cuántas transiciones existirán?
>Contenidos de las páginas:
Orientativamente, ¿qué contenidos tendrá cáda página web (elementos de diseño, texto, imágenes, formularios, vídeo…)?
¿el contenido y elementos de diseño serán similares entre las distintas páginas? Es decir, ¿todas las páginas mantendrán la misma estructura de diseño cambiando solo los contenidos?
>Efectos especiales:
¿Existirá algún elemento poco común en el diseño web?
¿Se van a diseñar animaciones para los bloques?
¿Serán animaciones estándares que se pueden copiar públicamente o serán animaciones que se tendrán que programar desde cero?
Entrega del diseño web
Una vez el presupuesto del maquetador esté aceptado, el diseñador puede trabajar libremente en el proyecto, dando vía libre a su creatividad, pero cumpliendo con las limitaciones técnicas presentadas en esta guía y las especificaciones del presupuesto.
A la vez que el diseñador va creando el diseño de cada página web, puede ir generando los documentos que tendrá que enviar al maquetador, los cuales también se podrán utilizar para que el cliente final dé el visto bueno al proyecto. (Antes de enviar el diseño al maquetador, asegúrese que el cliente final ha aceptado su diseño, pues las correcciones de un web maquetado acostumbran a ser costosas).
Idealmente, los documentos del diseño web se deberían de enviar todos juntos al maquetador web. A no ser que el maquetador especifique otra vía, se puede enviar por correo electrónico (por ejemplo comprimida en un zip), se puede enviar a un directorio ftp, o se puede enviar físicamente con un dispositivo de almacenamiento digital.
A continuación se listan todos los documentos que necesitará el maquetador para codificar el diseño de un sitio web.
Arquitectura del web
A no ser que el sitio web a maquetar conste de pocas páginas web, se debería entregar un documento titulado “arquitectura del web” que muestre todas las secciones y las páginas web que tendrá el sitio, especificando el acceso a cada una de páginas web, el número de idiomas…
El documento se puede entregar en formato texto (por ejemplo Word) listando las secciones y páginas en diferentes niveles o en formato gráfico (por ejemplo Photoshop o Illustrator) mostrando visualmente la estructura.
Se debe de entregar un documento con el diseño de cada página web que tenga un diseño y/o estructura diferenciado del resto. Es decir, es suficiente entregar un único diseño de página web para todas aquellas páginas web que compartan la misma estructura y elementos de diseño, aunque tengan un contenido diferente (textos y/o imágenes).
A modo de ejemplo: Para sitios webs sencillos, será suficiente entregar el diseño de la página principal, el diseño de la página de contacto (con el diseño deseado para el formulario) y el diseño de una página secundaria que se utilizará para presentar la empresa, productos, servicios…
Los diseños se podrán generar con un programa de tratamiento de imágines (Photoshop), en el cual se puede sacar provecho de las capas (por ejemplo, agrupando capas se pueden definir los efectos de los enlaces o menús al pasar el ratón por encima). Igualmente, los diseños de pueden generar con un programa vectorial (Freehand, Illustrator o Indesign). En este último caso, a no ser que el diseñador indique lo contrario, el diseño se transformará a píxeles tomando una resolución de pantalla de 72ppt (en la mayoría de los casos se verá a la misma resolución que veía el diseñador en su pantalla).
Con independencia del programa de diseño utilizado, para cada una de las páginas web diseñadas será necesario mostrar el aspecto de la página web deseado y los efectos de los enlaces o menús de navegación (en capas o diseños aparte).
Para diseños sensibles o adaptables, será necesario comunicar los píxeles o resoluciones de pantallas en las que se producirán las transiciones y mostrar un diseño de la página para cada una de las estructuras. Para cada uno de los bloques de la estructura se debería indicar si su ancho será fluido o fijo y/o si su posición será fluida o fija. Si algunos bloques incorporan transparencias, movimientos u otras características especiales, también será necesario especificarlo.
No es necesario enviar separadamente las imágenes utilizadas en el web, pues los maquetadores podrán extraerlas fácilmente de los documentos de los diseños de las páginas web.
Tipografías utilizadas
En caso de utilizar alguna tipografía poco común para el diseño web, será necesario enviarla junto a los otros documentos.
Contenido de las páginas web
Enviar bien estructurado el texto de cada página web. Idealmente, también se deberían enviar las traducciones al mismo tiempo, manteniendo todas la misma estructura. Si las imágenes no estaban incluidas en los diseños de las páginas, también será necesario enviarlas, idealmente al tamaño y formato (jpg, gif o png) definitivo. Igualmente, en caso de incorporar otros contenidos (vídeo, música…) se deberán de enviar juntamente con los anteriores contenidos.
Palabras claves, descripciones y títulos de páginas web
Junto a los contenidos de cada página web, sería ideal ajuntar el tílulo, descripción y palabras clave de cada página (Ver optimización para buscadores)
Fichero ico
Junto con todos los documentos anteriores, sería bueno entregar un fichero .png (con transparencias si se desea) de 16×16 píxeles que será utilizado para identificar gráficamente el sitio web en los navegadores (pequeña imagen que aparece en cada una de las pestañas de los navegadores web).
Cada vez nos encontramos más con aplicaciones de Inteligencia Artificial específicas para hacer depende que tareas y que nos faciliten el trabajo saliendo un po...
No compliques las cosas y simplifica los pasos con un enlace directo para que tus clientes no se quiebren la cabeza y te asegures así una reseña posit...
¿Qué es una factura REBU? La factura REBU es aquella que se acoge al Régimen Especial de Bienes Usados a efectos del IVA. El objetivo de este tipo de factura...
Ejemplo página web de estructura fija, mostrada en pantallas de distinta resolución. A resoluciones grandes aparecen muchos espacios en blanco; a resoluciones pequeñas el diseño queda cortado
bloques conancho fijo
bloques deancho fluido
espacios en blanco no ocupados por ningún bloque
http://www.infoworld.com/d/applications
