2.- Vocabulario y definiciones indispensables
3.- Diferencias b\u00e1sicas entre dise\u00f1o impreso y dise\u00f1o web
4.- Usabilidad
5.- Arquitectura de un sitio web
6.- Estructura de una p\u00e1gina web
Estructuras est\u00e1ndares
Dise\u00f1ando la estructura
7.- Adaptaci\u00f3n de la estructura en funci\u00f3n de la resoluci\u00f3n<\/h1>\n
Adaptaci\u00f3n del bloque principal<\/h2>\nAdaptaci\u00f3n de bloques secundarios<\/h2>\n8.- Ejemplos: p\u00e1ginas web sensibles
9.- Presentaci\u00f3n de los contenidos<\/h1>\nTipograf\u00edas<\/h2>\nIm\u00e1genes<\/h2>\nEnlaces web<\/h2>\nFormularios web<\/h2>\nTablas<\/h2>\nAnimaciones<\/h2>\nOtros contenidos posibles<\/h2>\nNuevas posibilidades: CSS3 y HTML5<\/h2>\n10.- Dise\u00f1o de p\u00e1ginas web programadas
11.- Optimizaci\u00f3n para los buscadores (SEO)
Recomendaciones de Google<\/h1>\n12.- Presupuesto y entrega del dise\u00f1o al maquetador<\/h1>\n <\/span><\/h1>\nIntroducci\u00f3n<\/h1>\n\nHay dificultades que muchos dise\u00f1adores tienen para entender las importantes diferencias entre el dise\u00f1o impreso y el dise\u00f1o web, las limitaciones que presenta respecto al dise\u00f1o tradicional pero tambi\u00e9n las nuevas posibilidades que permiten formas ins\u00f3litas de expresi\u00f3n y comunicaci\u00f3n.<\/p>\n
Esta gu\u00eda est\u00e1 pensada para terminar con estas dificultades, para que cualquier dise\u00f1ador gr\u00e1fico, tenga o no experiencia t\u00e9cnica web, adquiera los conocimientos necesarios que le permitan dise\u00f1ar cualquier sitio o p\u00e1gina web, dando rienda suelta a su imaginaci\u00f3n y creatividad, explotando todas las posibilidades que ofrece este medio. Pero, al mismo tiempo ci\u00f1\u00e9ndose a las limitaciones tecnol\u00f3gicas del momento, para que ning\u00fan maquetador o programador competente jam\u00e1s mire su dise\u00f1o y le diga \u00abeso no se puede hacer\u00bb.<\/p>\n
Dicen que las modas van y vienen, pero que el buen dise\u00f1o es atemporal. Lamentablemente para los buenos dise\u00f1adores, las tecnolog\u00edas tambi\u00e9n van y vienen (o evolucionan) y los buenos dise\u00f1os se tienen de adaptar a la tecnolog\u00eda del momento, si no caducan.<\/p>\n
<\/p>\n
<\/p>\n
Vocabulario y definiciones indispensables<\/h1>\n\n\n- P\u00e1gina web: <\/strong>documento que forma parte de un sitio web, con un contenido que puede incluir texto, im\u00e1genes, elementos multimedia y enlaces para navegar a otras p\u00e1ginas web o contenidos.<\/li>\n
- Sitio web: <\/strong>colecci\u00f3n de p\u00e1ginas web relacionadas y comunes a un dominio de Internet o subdominio.<\/li>\n
- P\u00e1gina principal o home<\/em>: <\/strong>p\u00e1gina de entrada a un sitio web, normalmente con un dise\u00f1o mucho m\u00e1s trabajado, que presenta el sitio y las opciones de navegaci\u00f3n a las p\u00e1ginas o contenidos del sitio.<\/li>\n
- Enlace web: <\/strong>elemento de una p\u00e1gina web que, al clicarlo te lleva a otra p\u00e1gina web o a otra parte de la misma p\u00e1gina web.<\/li>\n
- Men\u00fa de navegaci\u00f3n: <\/strong>conjunto de enlaces web que reflejan la organizaci\u00f3n de los contenidos del sitio web y enlazan a cada una de sus p\u00e1ginas web.<\/li>\n
- Dominio de Internet: <\/strong>es un nombre \u00fanico 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\u00f1adores).<\/li>\n
- URL: <\/strong>cadena de caracteres con la cual se asigna una direcci\u00f3n \u00fanica a cada uno de los recursos de informaci\u00f3n disponibles en la Internet (p\u00e1ginas web y sus elementos: im\u00e1genes, hojas de estilos, elementos multimedia,\u2026). La URL de la p\u00e1gina principal normalmente es el nombre del dominio.<\/li>\n
- Servidor web: <\/strong>ordenador remoto que provee los datos solicitados por parte de los navegadores de otras computadoras. Las p\u00e1ginas web y dominios de Internet deben de ser alojadas en un servidor. Existen muchas empresas que poseen servidores.<\/li>\n
- Navegador web: <\/strong>aplicaci\u00f3n que interpreta el contenido de las p\u00e1ginas web y lo presenta en pantalla permitiendo al usuario interactuar. Ejemplos de navegador: Internet Explorer, Mozilla Firefox, Google Chrome, Safari… Al dise\u00f1ar una p\u00e1gina web, tenemos que tener en cuenta que los distintos navegadores pueden presentar nuestros dise\u00f1os con peque\u00f1as variaciones.<\/li>\n
- Resoluci\u00f3n de ventana web: <\/strong>n\u00famero de p\u00edxeles m\u00e1ximos horizontales y verticales disponibles para presentar una p\u00e1gina web. La resoluci\u00f3n vendr\u00e1 determinada por la resoluci\u00f3n de la pantalla del dispositivo y por el espacio que el navegador web deja para la presentaci\u00f3n. Las distintas resoluciones disponibles Internet limitaran en gran medida el dise\u00f1o web.\n
![\"\"](\"http:\/\/www.xn--guiadiseo-s6a.com\/imgs\/resolucion.png\")
Ejemplos de pantalla ipad (1024 x 768) y iphone (640 x 480) mostrando la misma p\u00e1gina web, presenta un dise\u00f1o diferente para cada una de las resoluciones.<\/span><\/p>\n<\/li>\n- Dise\u00f1ador web: <\/strong>Profesional que utiliza programas de dise\u00f1o tradicional, como photoshop, freehand, ilustrator, indesign\u2026<\/li>\n
- Maquetador web: <\/strong>Profesional que maqueta los dise\u00f1os utilizando las codificaciones est\u00e1ndares (html, css, javascript\u2026), transformando los dise\u00f1os en p\u00e1ginas web.<\/li>\n
- Programador web: <\/strong>Profesional que programa las p\u00e1ginas web maquetadas (php, asp, jquery \u2026) para que presenten informaci\u00f3n de una base de datos, personalicen los contenidos, env\u00eden los formularios, interact\u00faen con el usuario\u2026<\/li>\n<\/ul>\n
<\/span><\/p>\n<\/p><\/div>\n<\/p><\/div>\nDiferencias b\u00e1sicas entre dise\u00f1o impreso
y dise\u00f1o web<\/h1>\n\nInteractuar en vez de mostrar<\/p>\n
El dise\u00f1o impreso est\u00e1 basado en ver, pero el dise\u00f1o web est\u00e1 basado en hacer.
La funci\u00f3n del dise\u00f1o tradicional es contar historias, la misi\u00f3n del dise\u00f1o digital es entablar conversaciones.
El soporte gr\u00e1fico se sostiene sobre relaciones espaciales y la experiencia web sobre relaciones temporales. El dise\u00f1o impreso es est\u00e1tico, en cambio, la experiencia de un sitio web se define por la interacci\u00f3n del usuario con dise\u00f1o y contenido. Por ejemplo, un usuario hace clic sobre la navegaci\u00f3n o se desplaza hacia abajo para leer una p\u00e1gina.
Un buen dise\u00f1o impreso tiene que entenderse y ser bonito, pero un buen dise\u00f1o web tiene que entenderse, facilitar la navegaci\u00f3n (usabilidad) y ser bonito. Normalmente se recomienda priorizar la usabilidad, despu\u00e9s el contenido y si queda tiempo el arte. Aunque esto no implica que el buen dise\u00f1o se deba sacrificar para ganar usabilidad, en esta gu\u00eda vamos a explicar c\u00f3mo hacerlos compatibles.<\/p>\n
Espacio y entorno indefinido en vez de definido<\/p>\n
El dise\u00f1o impreso se visualiza en espacio limitado pero el dise\u00f1o web se tiene que poder visualizar en m\u00faltiples espacios, adem\u00e1s el dise\u00f1o web se puede extender fuera de la pantalla (podemos que utilizar barras de desplazamiento o scrolling).
Cuando se dise\u00f1a para imprimir, el resultado va a ser exactamente igual o muy parecido al original que hemos dise\u00f1ado y guardado, en cambio, cuando se dise\u00f1a una web, debemos considerar factores externos de los cuales no tenemos ning\u00fan control (el usuario puede tener resoluciones de pantalla diferente o utilizar un navegador web distinto, adem\u00e1s de no tener las tipograf\u00edas utilizadas,\u2026).
El dise\u00f1o impreso se visualiza igual en cualquier revista, en cambio, los diferentes navegadores web pueden presentar los elementos del dise\u00f1o 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\u2026 sin que alguno muestre errores.<\/p>\n
Problema con las tipograf\u00edas<\/p>\n
En el dise\u00f1o impreso se puede utilizar cualquier tipograf\u00eda, pero el dise\u00f1o web normalmente solo muestra las tipograf\u00edas que el usuario tenga instaladas en su ordenador. M\u00e1s adelante veremos que existen diversas soluciones a este problema, por ejemplo poniendo el texto con el formato y la tipograf\u00eda deseada en im\u00e1genes, pero tendremos que tener en cuenta las limitaciones.<\/p>\n
Pixeles en vez de pulgadas y cent\u00edmetros<\/p>\n
En el dise\u00f1o impreso se trabaja con pulgadas y cent\u00edmetros, pero en el dise\u00f1o web solo se trabaja con pixeles. As\u00ed pues, dependiendo de la resoluci\u00f3n de la pantalla (pixeles por pulgada o dpi) una misma imagen se puede ver mayor o menor. Las medidas de los dise\u00f1os web siempre son p\u00edxeles, aunque en ocasiones se pueden utilizar porcentajes de pantalla o porcentajes de \u00e1rea (se explica m\u00e1s adelante).
Si les cuesta dise\u00f1ar con pixeles, pueden utilizar la resoluci\u00f3n 72 dpi, que es la resoluci\u00f3n est\u00e1ndar de la mayor\u00eda de pantallas de ordenador. Dise\u00f1ando a esta resoluci\u00f3n, la mayor\u00eda de usuarios ver\u00e1n las im\u00e1genes y elementos de su dise\u00f1o al mismo tama\u00f1o que en su pantalla.<\/p>\n
P\u00edxel: <\/strong>la menor unidad de medida en la pantalla (un punto de luz). La mayor\u00eda de pantallas tienen una resoluci\u00f3n de 72 p\u00edxeles por pulgada o dpi.<\/p>\nArchivos peque\u00f1os en vez de grandes<\/p>\n
El dise\u00f1o impreso se trabaja con altas resoluciones de archivos y se procura mantener la mejor calidad en las im\u00e1genes y originales, mientras que en el dise\u00f1o web se trabaja con resoluciones bajas para ahorrar recursos del servidor y permitir que el usuario abra la p\u00e1gina r\u00e1pidamente. En dise\u00f1o web, debemos optimizar las im\u00e1genes y animaciones, es decir, bajar la resoluci\u00f3n lo m\u00e1s posible sin perder una calidad significativa. El peso (calculado en Kb o Mb) de una p\u00e1gina web se calcula como la suma de todos pesos de los documentos que abre una p\u00e1gina web (im\u00e1genes, 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\u00e1gina tarda un segundo m\u00e1s a descargarse y abrirse.<\/p>\n
RGB en vez de CMYK<\/p>\n
En el dise\u00f1o impreso se trabaja colores substractivos o CMYK, en cambio en el dise\u00f1o web solo se trabaja con colores aditivos o RGB.
El color es un error com\u00fan de los dise\u00f1adores gr\u00e1ficos cuando quieren dise\u00f1ar para web. En la escuela de dise\u00f1o te ense\u00f1an a utilizar siempre CMYK para que la impresi\u00f3n quede bien, pero en el mundo web, es todo lo contrario, las pantallas emiten luz \u00fanicamente interpretan datos RGB o aditivos.<\/p>\n
Posible editar despu\u00e9s de publicar<\/p>\n
El dise\u00f1o impreso no se puede modificar despu\u00e9s de la impresi\u00f3n. Por suerte el dise\u00f1o web se puede modificar despu\u00e9s de la publicaci\u00f3n, se pueden corregir errores, completar contenido no introducido inicialmente, o mantener actualizada la informaci\u00f3n. En este sentido, es mejor evitar dise\u00f1os que no sean flexibles, para que en el futuro el dise\u00f1o se pueda adaptar a diferentes tama\u00f1os de los contenidos, sin perjudicar la est\u00e9tica del conjunto.<\/p>\n
<\/p>\n
<\/p>\n
<\/p>\n
Usabilidad<\/h1>\n\nUn atributo determinante para la calidad de un sitio web es suusabilidad<\/strong>. Se trata de lograr que los visitantes encuentren r\u00e1pidamente aquello que buscan, con el m\u00ednimo esfuerzo por su parte. Sea cual sea el contenido o la finalidad de nuestra web, navegar por ella debe resultar una experiencia gratificante.<\/p>\nWeb usable: <\/strong>es aquella en la que los usuarios pueden interactuar de la forma m\u00e1s f\u00e1cil, c\u00f3moda, evidente y segura posible. Una web usable denota calidad, genera confianza y nos diferencia positivamente de otras alternativas.<\/p>\nLos usuarios pasan mucho menos tiempo visitando una p\u00e1gina web de lo que sus dise\u00f1adores desear\u00edan, por lo que hay que facilitarles las cosas al m\u00e1ximo. Cuando un usuario encuentra que la navegaci\u00f3n por una web es c\u00f3moda, agradable y \u00fatil, existen mayores probabilidades de que la visite de nuevo en el futuro.<\/p>\n
Lograr un buen nivel de usabilidad requiere combinar h\u00e1bilmente una serie de elementos: tecnolog\u00eda, dise\u00f1o, contenidos\u2026 Aunque no existen recetas universales, he aqu\u00ed algunos criterios a tener en cuenta:<\/p>\n
\n- >Crear una jerarqu\u00eda visual clara en cada p\u00e1gina. <\/strong>Debe percibirse a simple vista cu\u00e1l es la importancia de los distintos contenidos, qu\u00e9 relaci\u00f3n existe entre ellos, a qu\u00e9 tema o bloque pertenecen… La colocaci\u00f3n, el tama\u00f1o, la tipograf\u00eda o los colores de los textos y de los dem\u00e1s elementos de la p\u00e1gina son los principales recursos a utilizar.<\/li>\n
- >Dar el control al usuario. <\/strong>\u00c9ste debe sentir en todo momento que sabe d\u00f3nde est\u00e1 y que controla la situaci\u00f3n. Nada importante deber\u00eda situarse a m\u00e1s de dos clics de distancia. Los t\u00edtulos y contenidos de cada apartado deben ser claros y visibles. Tambi\u00e9n son muy \u00fatiles los men\u00fas de situaci\u00f3n, la navegaci\u00f3n por pesta\u00f1as, las opciones de volver atr\u00e1s o deshacer una acci\u00f3n, la visualizaci\u00f3n clara de las distintos pasos de un proceso (la compra on-line, por ejemplo).<\/li>\n
- >Facilitar la interacci\u00f3n. <\/strong>Suele ser muy positivo que una web permita al usuario \u201chacer cosas\u201d: clicar, desplegar, abrir, mover… En todo caso, el acceso y el uso de cualquier elemento de interacci\u00f3n debe ser intuitivo, r\u00e1pido y f\u00e1cil. No podemos permitirnos frustrar al usuario o hacerle perder el tiempo.<\/li>\n
- >Aprovechar las convenciones y llamar a las cosas por su nombre. <\/strong>La mayor\u00eda de usuarios tienen ciertas expectativas derivadas de su experiencia navegando por internet. Saben, m\u00e1s o menos, d\u00f3nde se sit\u00faan los men\u00fas, c\u00f3mo funciona un buscador, para qu\u00e9 sirven determinados botones, qu\u00e9 significan ciertos iconos o expresiones, etc. As\u00ed, hay que situar los contenidos donde el usuario espera que est\u00e9n y hacer que las cosas funcionen como se espera que lo hagan. Si queremos sorprender o hacer \u201calgo diferente\u201d, hemos de asegurarnos de que ello no suponga una complicaci\u00f3n innecesaria.<\/li>\n
- >Simplificar<\/strong>. Hay que evitar la informaci\u00f3n 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\u00e1genes y animaciones, y crearemos men\u00fas claros, bien estructurados y desplegables si hay muchas opciones a mostrar.<\/li>\n<\/ul>\n
No hay que entender la usabilidad como un lastre para nuestra creatividad. Podemos innovar y ser originales mientras no olvidemos quenuestro dise\u00f1o debe estar centrado en el usuario<\/strong>. \u00c9l es el verdadero protagonista y hemos de asegurarnos de que comprender\u00e1 y podr\u00e1 seguirnos el juego en todo momento.<\/p>\nOtros aspectos a tener en cuenta<\/strong>:<\/p>\n\n- >Situar los elementos importantes siempre a mano.<\/li>\n
- >Los usuarios no siempre entran por la p\u00e1gina principal (poner men\u00fas de navegaci\u00f3n en todas las p\u00e1ginas).<\/li>\n
- >Dejar claro qu\u00e9 elementos son enlaces y cu\u00e1les no.<\/li>\n
- >A\u00f1adir un buscador o un mapa del sitio web si \u00e9ste tiene mucho contenido i\/o p\u00e1ginas.<\/li>\n
- >Enlazar a cualquier informaci\u00f3n en menos de 3 clicks (o enlaces)<\/li>\n
- >Mantener una coherencia en el dise\u00f1o de toda la p\u00e1gina.<\/li>\n
- >Seguir las reglas b\u00e1sicas del buen dise\u00f1o: selecci\u00f3n de colores, tipograf\u00edas, regla de los tercios\u2026<\/li>\n
- >No distraer el usuario con excesivas animaciones o elementos que parpadean.<\/li>\n
- >Intentar que los contenidos no tengan faltas de ortograf\u00eda.<\/li>\n
- >No abrir nuevas ventanas del navegador innecesariamente…<\/li>\n<\/ul>\n
Ejemplo web que intenta romper todas las reglas de la usabilidad:http:\/\/theworldsworstwebsiteever.com\/<\/a>
(listado de errores del web:http:\/\/theworldsworstwebsiteever.com\/new_page_1.htm<\/a>).
Otro sitio con listados de dise\u00f1os web que se deben evitar copiar:http:\/\/www.javajan.com\/?id=271-guia<\/a><\/p>\n<\/p><\/div>\n <\/p>\n<\/p><\/div>\n
<\/p>\n
<\/p>\n
<\/p>\n
Arquitectura de un sitio web<\/h1>\n\nAlgunos dicen que dise\u00f1ar para web es m\u00e1s parecido a la arquitectura que al dise\u00f1o gr\u00e1fico. Como en una casa, antes de escoger los muebles, el color de las cortinas o la iluminaci\u00f3n, es importante saber c\u00f3mo estar\u00e1 estructurada la planta, c\u00f3mo ser\u00e1 el sal\u00f3n, donde estar\u00e1n las habitaciones, como se acceder\u00e1 a ellas, donde estar\u00e1n las ventanas… Asimismo en la web, si la estructura no es s\u00f3lida e intuitiva, el arte de la p\u00e1gina no sirve para nada.<\/p>\n
Antes de empezar a trabajar en el aspecto puramente est\u00e9tico de las p\u00e1ginas web, imaginando animaciones impresionantes y gr\u00e1ficos atractivos, es indispensables pensar en la estructura del sitio web. Para eso, fundamentalmente, tendremos que:<\/p>\n
\n- >Definir las secciones y p\u00e1ginas web que debe tener el sitio.<\/li>\n
- >Escoger las secciones o p\u00e1ginas a las que podremos acceder desde la p\u00e1gina principal (o de inicio).<\/li>\n
- >Decidir si alguna secci\u00f3n o p\u00e1gina tiene que destacar m\u00e1s respecto las dem\u00e1s.<\/li>\n
- >Distribuir el contenido a presentar entre las distintas secciones y p\u00e1ginas.<\/li>\n
- >Concretar las distintas v\u00edas de acceso a cada una de p\u00e1ginas web del sitio (es importante ofrecer m\u00faltiples maneras de acceder a la misma informaci\u00f3n).<\/li>\n
- >Especificar el n\u00famero de idiomas que dispondr\u00e1 el sitio web.<\/li>\n<\/ul>\n
Para ayudar a concretar la estructura final del sitio web, muchos dise\u00f1adores y programadores web recomiendan hacer un esquema a mano alzada, con post-its o con un simple programa de dise\u00f1o del ordenador, que nos permita realizar cambios f\u00e1cilmente a medida que redescubrimos mejores estructuras para nuestro sitio web.<\/p>\n
![\"esquema](\"http:\/\/www.xn--guiadiseo-s6a.com\/imgs\/esquema.jpg\")
Ejemplo de la estructura de un sitio web en el que se detalla todas las p\u00e1ginas y el recorrido para acceder a ellas.<\/span><\/p>\nNormalmente, el contenido de un sitio web se estructura en diferentes p\u00e1ginas web, pero debemos mencionar una tendencia (no muy utilizada ni recomendada), llamada \u201cparallax scrolling\u201d, que estructura todos los contenidos en una solo p\u00e1gina web y permite que el usuario acceda a ellos mediante enlaces internos o bajando por la barra de desplazamiento o \u201cscroll\u201d.<\/p>\n
Ejemplos web de parallax scrolling: http:\/\/www.javajan.com\/news.php?id=277-guia<\/a><\/p>\n<\/p><\/div>\n <\/p>\n
<\/p>\n
<\/p>\n
Estructura de una p\u00e1gina web<\/h1>\n\nUna vez ya tengamos clara como estar\u00e1 estructurada la planta de la casa (sitio web a dise\u00f1ar), podemos empezar a dise\u00f1ar la estructura de cada habitaci\u00f3n (p\u00e1gina web), decidiendo donde pondremos los muebles (contenido) y la decoraci\u00f3n (elementos gr\u00e1ficos). Con especial esmero tendremos que estructurar el sal\u00f3n de la casa (p\u00e1gina principal), donde recibiremos a todos nuestros invitados (usuarios), para que sea lo m\u00e1s confortable posible (dise\u00f1o) pero tambi\u00e9n aporte el m\u00e1ximo de informaci\u00f3n sobre los anfitriones y sobre los contenidos de las distintas habitaciones (usabilidad).<\/p>\n
Para determinar la estructura de cada p\u00e1gina web, tendremos que definir (entre otros):<\/p>\n
\n- >Qu\u00e9 tipo de web quiere el cliente: tipo tarjeta de visita, tipo cat\u00e1logo, tipo anuncio de revista, tipo juego, una combinaci\u00f3n entre las anteriores…<\/li>\n
- >Qu\u00e9 tipo de informaci\u00f3n desea presentar el cliente: mucha imagen, mucha informaci\u00f3n escrita…<\/li>\n
- >Qu\u00e9 mensaje deber\u00eda de recibir el usuario cuando abra la p\u00e1gina principal.<\/li>\n
- >Hac\u00eda qu\u00e9 secciones del web se deber\u00eda sentir atra\u00eddo.<\/li>\n
- >Qu\u00e9 elementos comunes deben presentarse en todas las p\u00e1ginas (por ejemplo sistema de navegaci\u00f3n).<\/li>\n
- >Qu\u00e9 contenido espec\u00edfico deber\u00eda presentarse en cada p\u00e1gina.<\/li>\n<\/ul>\n
De todos modos, antes de empezar a dise\u00f1ar la estructura de una p\u00e1gina web, deber\u00edamos conocer las estructuras est\u00e1ndares utilizadas normalmente.<\/p>\n
<\/p>\n<\/p><\/div>\n
\nEstructuras est\u00e1ndares<\/h2>\n\nUno de los aspectos m\u00e1s importantes de las estructura de una p\u00e1gina web es decidir d\u00f3nde posicionaremos los men\u00fas de navegaci\u00f3n y enlaces a otras p\u00e1ginas web y d\u00f3nde posicionaremos el contenido que van a consultar los navegantes. Existen diversos tipos de estructuras est\u00e1ndares de p\u00e1ginas web que especifican la posici\u00f3n de los men\u00fas de navegaci\u00f3n y el contenido, manteni\u00e9ndose esta estructura y dise\u00f1o durante toda la navegaci\u00f3n por el sitio web.<\/p>\n
Sin que sea sorprendente, los men\u00fas de navegaci\u00f3n acostumbran a posicionarse en los m\u00e1rgenes de la p\u00e1gina, dejando los contenidos en el centro. Por defecto, las estructuras est\u00e1ndares posicionan los men\u00fas de navegaci\u00f3n arriba o en los laterales, pero tambi\u00e9n existen otras posibilidades:<\/p>\n
Bloque de navegaci\u00f3n a la izquierda:<\/p>\n
Permite presentar muchos men\u00fas o enlaces, pues cada l\u00ednea puede ser un enlace (por ejemplo, el men\u00fa de navegaci\u00f3n de esta gu\u00eda). Tampoco supone mucho problema que los men\u00fas se extiendan fuera de la pantalla, porque el usuario puede visualizarlos con la barra de desplazamiento vertical. Este m\u00e9todo es ideal si los men\u00fas son administrables, pues el dise\u00f1o no se ver\u00e1 muy afectado si aumentan o disminuyen el n\u00famero de enlaces.<\/p>\n
![\"\"](\"http:\/\/www.xn--guiadiseo-s6a.com\/imgs\/exemples\/bloque_izq.jpg\")
<\/a>Ejemplo de bloque de navegaci\u00f3n a la izquierda:guiadise\u00f1o.com<\/a><\/p>\nBloque de navegaci\u00f3n arriba:<\/p>\n
Ideal si el sitio web no tiene demasiadas secciones. Los men\u00fas se sit\u00faan en l\u00ednea y ocupan mucho espacio. Es f\u00e1cil si los men\u00fas se despliegan con otros submen\u00fas (es m\u00e1s f\u00e1cil la navegaci\u00f3n que si los submen\u00fas se abren lateralmente)<\/p>\n
![\"\"](\"http:\/\/www.xn--guiadiseo-s6a.com\/imgs\/exemples\/bloque_arriba.jpg\")
<\/a>Ejemplo de bloque de navegaci\u00f3n arriba:http:\/\/www.apple.es<\/a><\/p>\nBloque de navegaci\u00f3n derecha:<\/p>\n
Las mismas ventajas que el men\u00fa a la izquierda pero menos usado.<\/p>\n
![\"\"](\"http:\/\/www.xn--guiadiseo-s6a.com\/imgs\/exemples\/bloque_der.jpg\")
<\/a>Ejemplo de bloque de navegaci\u00f3n a la izquierda:http:\/\/www.narfstuff.co.uk<\/a><\/p>\nCombinaci\u00f3n de los anteriores:<\/p>\n
Si tenemos muchos enlaces a presentar, siempre podemos utilizar cualquier combinaci\u00f3n de los anteriores (arriba e izquierda; izquierda y derecha; arriba, izquierda y derecha;\u2026), sobre todo si los men\u00fas se pueden agrupar en dos o tres grandes grupos.<\/p>\n
![\"\"](\"http:\/\/www.xn--guiadiseo-s6a.com\/imgs\/exemples\/bloque_combi.jpg\")
<\/a>Ejemplo de combinaci\u00f3n de bloques:http:\/\/www.apple.es<\/a><\/p>\nPie de p\u00e1gina<\/p>\n
El pie de p\u00e1gina acostumbra a tener una gran importancia en las estructuras de los webs actuales, donde se pueden repetir los men\u00fas de navegaci\u00f3n (para que el usuario no deba subir por la p\u00e1gina), situar los enlaces alaviso legal<\/em>,copyright<\/em>, redes sociales: facebook, RSS, twitter o los datos de direcci\u00f3n y contacto.<\/p>\nEjemplos de pie de p\u00e1gina:<\/p>\n
![\"\"](\"http:\/\/www.xn--guiadiseo-s6a.com\/imgs\/exemples\/footers--www-bristolarchiverecords-com.jpg\")
<\/a>Ejemplo de pie de p\u00e1gina:http:\/\/bristolarchiverecords.com<\/a><\/p>\n![\"\"](\"http:\/\/www.xn--guiadiseo-s6a.com\/imgs\/exemples\/footers--yuruinspires-com.jpg\")
<\/a>Ejemplo de pie de p\u00e1gina:http:\/\/yuruinspires.com<\/a><\/p>\n![\"\"](\"http:\/\/www.xn--guiadiseo-s6a.com\/imgs\/exemples\/footers--splitdadiz-com.jpg\")
<\/a>Ejemplo de pie de p\u00e1gina:http:\/\/splitdadiz.com<\/a><\/p>\n![\"\"](\"http:\/\/www.xn--guiadiseo-s6a.com\/imgs\/exemples\/footers--www-mecannical-com.jpg\")
<\/a>Ejemplo de pie de p\u00e1gina:http:\/\/www.mecannical.com<\/a><\/p>\n![\"\"](\"http:\/\/www.xn--guiadiseo-s6a.com\/imgs\/exemples\/footers--bitsamppixels-com.jpg\")
<\/a>Ejemplo de pie de p\u00e1gina:http:\/\/bitsamppixels.com<\/a><\/p>\nOtros ejemplos web de pies de p\u00e1gina:http:\/\/www.javajan.com\/news.php?id=205-guia<\/a><\/p>\nP\u00e1gina principal<\/p>\n
La p\u00e1gina principal es un caso especial, para la cual no existe una estructura est\u00e1ndar. Aunque la p\u00e1gina principal tambi\u00e9n se puede estructurar de un modo est\u00e1ndar, en la mayor\u00eda de sitios web, la p\u00e1gina principal no se dise\u00f1a para presentar contenido, y m\u00e1s bien se imagina como escaparate de la empresa, en el que tambi\u00e9n se presentan los men\u00fas o enlaces a las diferentes p\u00e1ginas o secciones del web.<\/p>\n
Ejemplos de p\u00e1gina principal:<\/p>\n
![\"\"](\"http:\/\/www.xn--guiadiseo-s6a.com\/imgs\/exemples\/pag-principal--www-coullon-com.jpg\")
<\/a>Ejemplo de p\u00e1gina principal:http:\/\/www.coullon.com<\/a><\/p>\n![\"\"](\"http:\/\/www.xn--guiadiseo-s6a.com\/imgs\/exemples\/pag-principal--www-luhsetea-com.jpg\")
<\/a>Ejemplo de p\u00e1gina principal:http:\/\/www.luhsetea.com<\/a><\/p>\n![\"\"](\"http:\/\/www.xn--guiadiseo-s6a.com\/imgs\/exemples\/pag-principal--dotmick-com.jpg\")
<\/a>Ejemplo de p\u00e1gina principal:http:\/\/dotmick.com<\/a><\/p>\n![\"\"](\"http:\/\/www.xn--guiadiseo-s6a.com\/imgs\/exemples\/pag-principal--gnosh-co-uk.jpg\")
<\/a>Ejemplo de p\u00e1gina principal:http:\/\/gnosh.co.uk<\/a><\/p>\n![\"\"](\"http:\/\/www.xn--guiadiseo-s6a.com\/imgs\/exemples\/pag-principal--www-wearecupcup-com.jpg\")
<\/a>Ejemplo de p\u00e1gina principal:http:\/\/wearecupcup.com<\/a><\/p>\n![\"\"](\"http:\/\/www.xn--guiadiseo-s6a.com\/imgs\/exemples\/pag-principal--www-mcfarlanechangemanagement-com-au.jpg\")
<\/a><\/p>\nEjemplo de p\u00e1gina principal:http:\/\/www.mcfarlanechangemanagement.com.au<\/a><\/p>\n<\/p><\/div>\n<\/p><\/div>\n <\/div>\n <\/div>\n\nDise\u00f1ando la estructura<\/h2>\n\nConociendo las estructuras web m\u00e1s utilizadas, ya podemos empezar a dibujar la estructura espec\u00edfica de nuestra p\u00e1gina web, dibujando y posicionando a nuestro gusto los bloques de men\u00fas, contenido, gr\u00e1ficos, y los sub-bloques dentro de cada uno de los anteriores.<\/p>\n
Cada dise\u00f1ador tendr\u00e1 su propio m\u00e9todo para plasmar la estructura imaginada de una p\u00e1gina web a la pantalla de su ordenador. Aqu\u00ed transcribimos el m\u00e9todo de trabajo espec\u00edfico de un dise\u00f1ador:\u201cComienzo por bosquejar algunos posibles dise\u00f1os sobre papel. Despu\u00e9s de unos pocos de estos bocetos, decido cual me gusta m\u00e1s o cual se adapta mejor a los requisitos del cliente y el salto al Photoshop (o freehand), y uso la herramienta de rect\u00e1ngulo para bloquear las \u00e1reas que he marcado en mi papel. Una vez que he definido mi dise\u00f1o, experimento con los colores de fondo y de los rect\u00e1ngulos hasta tener un esquema de color s\u00f3lido. Y sigo trabajando con p\u00edxeles hasta que, finalmente, tengo un borrador para mostrar al cliente.\u201d<\/em><\/p>\nEjemplo de dise\u00f1o de la estructura:<\/p>\n
![\"ejemplo](\"http:\/\/www.xn--guiadiseo-s6a.com\/imgs\/exemples\/estructura.jpg\")
<\/a><\/p>\nEjemplo de dise\u00f1o para la p\u00e1gina:http:\/\/www.ginecologiavhebron.com<\/a>(dise\u00f1o deDeumonforte<\/em>y programaci\u00f3n Javajan)<\/p>\nTrabajando con bloques rectangulares<\/p>\n
La estructura de una p\u00e1gina web se sub-divide en bloques rectangulares, dentro de los cuales vamos a posicionar los diferentes elementos de dise\u00f1o o contenido. M\u00e1s tarde, al aplicar dise\u00f1o sobre estos rect\u00e1ngulos podemos enmascararlos eliminando los bordes o utilizando formas curvas, pero es importante conocer que cualquier estructura web est\u00e1 basada en rect\u00e1ngulos horizontales (no en diagonal).<\/p>\n
A pesar de todo, el dise\u00f1o de la estructura web no finaliza al posicionar los diferentes bloques, porque tenemos de definir como se adaptaran y comportaran en funci\u00f3n de la resoluci\u00f3n de pantalla.<\/p>\n<\/p><\/div>\n<\/p><\/div>\n
<\/p>\n
<\/p>\n
<\/p>\n
Adaptaci\u00f3n de la estructura en funci\u00f3n de la resoluci\u00f3n<\/h1>\nAdaptaci\u00f3n del bloque principal<\/h2>\n\nBloque principal: <\/strong>recuadro exterior que engloba toda la estructura de p\u00e1gina web, es decir, no existe ning\u00fan recuadro o bloque secundario que rebase el bloque o recuadro principal.<\/p>\nBloque secundario: <\/strong>cada uno de los recuadros que componen el bloque o recuadro principal.<\/p>\nExisten tres maneras distintas de adaptar el bloque principal en funci\u00f3n del tama\u00f1o de la pantalla:<\/p>\n
Fijo:<\/p>\n
El bloque se dise\u00f1a con un tama\u00f1o fijo que no se va a modificar en funci\u00f3n del tama\u00f1o de la pantalla. Es el m\u00e1s f\u00e1cil de dise\u00f1ar y maquetar porqu\u00e9 los elementos del dise\u00f1o o bloques secundarios siempre estar\u00e1n en la misma posici\u00f3n y mantendr\u00e1n el mismo ancho.<\/p>\n
![\"\"](\"http:\/\/www.xn--guiadiseo-s6a.com\/imgs\/exemples\/monitores.jpg\")
Ejemplo p\u00e1gina web de estructura fija, mostrada en pantallas de distinta resoluci\u00f3n. A resoluciones grandes aparecen muchos espacios en blanco; a resoluciones peque\u00f1as el dise\u00f1o queda cortado<\/p>\n
Si escogemos una estructura principal fija, tenemos que pensar qu\u00e9 tama\u00f1o en pixeles vamos a utilizar. Seg\u00fan las estad\u00edsticas actuales (http:\/\/www.w3schools.com\/browsers\/browsers_display.asp<\/a>), el 98% de usuarios tienen resoluciones igual o superiores a 1024×768, aunque empiezan a crecer el n\u00famero de usuarios con pantallas inferiores a 800×600 debido a la navegaci\u00f3n con tabletas y tel\u00e9fonos.<\/p>\nSi dise\u00f1amos un bloque principal fijo, podr\u00eda ser bueno tomar como referencia la resoluci\u00f3n de 1024×768, aunque el ancho del bloque principal deber\u00eda de ser m\u00e1s peque\u00f1o, pues el navegador se necesita algunos pixeles para los men\u00fas, m\u00e1rgenes y barras de desplazamiento. As\u00ed pues, deber\u00edamos de dise\u00f1ar un bloque principal de un ancho m\u00e1ximo de 990 pixeles. Si queremos que todo el contenido aparezca en la pantalla y no aparezcan barras de desplazamiento verticales, la altura m\u00e1xima del dise\u00f1o deber\u00eda de ser entre 600 y 650 pixeles (depender\u00e1 mucho del espacio que ocupen los men\u00fas del navegador del usuario).<\/p>\n
Normalmente, la estructura principal fija se centra en la pantalla para resoluciones grandes, aunque tambi\u00e9n se puede alinear a la izquierda o a la derecha.<\/p>\n
Fluido o l\u00edquido:<\/p>\n
Con independencia de la resoluci\u00f3n de una pantalla, un bloque principal fluido ocupa un porcentaje horizontal de la pantalla, normalmente el 100% (aunque tambi\u00e9n puede ocupar el 90% centrado, o alineado a la izquierda o derecha). Normalmente, al disminuir la resoluci\u00f3n o tama\u00f1o de una pantalla, el bloque fluido se estrecha horizontalmente pero se alarga verticalmente para poder presentar toda la informaci\u00f3n 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\u00f3n fija o fluida (se ver\u00e1 en el siguiente punto).<\/p>\n
Dise\u00f1ar y maquetar una estructura fluida es m\u00e1s complejo, pues se tienen que prever c\u00f3mo se van a comportar cada uno de los bloques secundarios en su interior. Bien dise\u00f1ada, una estructura fluida se puede adaptar desde las resoluciones de pantalla m\u00e1s grandes hasta las resoluciones de pantallas m\u00e1s peque\u00f1as de los tel\u00e9fonos, aunque para \u00e9ste \u00faltimo caso se recomiendan distintas estructuras, como se ver\u00e1 a continuaci\u00f3n.<\/p>\n
Ejemplo de adaptaci\u00f3n fluida (en este caso, todos los bloques secundarios tambi\u00e9n son fluidos):<\/p>\n
![\"\"](\"http:\/\/www.xn--guiadiseo-s6a.com\/imgs\/exemples\/estruc_fluido.jpg\")
<\/p>\n
Dos buenos art\u00edculo sobre dise\u00f1o fluido:
http:\/\/www.javajan.com\/news.php?id=225-guia<\/a> y http:\/\/www.javajan.com\/news.php?id=193-guia<\/a><\/p>\nEstructuras distintas – Dise\u00f1o sensible:<\/p>\n
El dise\u00f1o sensible (del ingl\u00e9s: responsive design) es una opci\u00f3n cada vez m\u00e1s utilizada en el dise\u00f1o web actual es crear estructuras del bloque principal distintas, reacomodando los contenidos en funci\u00f3n de la resoluci\u00f3n de la pantalla. Esto puede ser muy \u00fatil cuando consideremos el acceso a nuestro web a trav\u00e9s de tel\u00e9fonos, que tienen resoluciones de pantallas muy peque\u00f1as. Algunos navegadores para m\u00f3viles reestructuran el dise\u00f1o de los webs de un modo eficiente, pero si queremos asegurar la buena visualizaci\u00f3n y dise\u00f1o de nuestro web a cualquier resoluci\u00f3n, deberemos de crear varias estructuras en funci\u00f3n de la resoluci\u00f3n de la pantalla.<\/p>\n
En un dise\u00f1o sensible, no aparecer\u00e1n barras de desplazamiento horizontales (scroll) hasta resoluciones muy peque\u00f1as.<\/p>\n
Podemos decidir las medidas a las cuales se presentaran las diferentes estructuras del bloque principal en funci\u00f3n del dise\u00f1o planteado, pero tambi\u00e9n podemos determinarlas consultando las pantallas m\u00e1s utilizadas actualmente:<\/p>\n
Resoluciones de pantalla m\u00e1s utilizadas:
http:\/\/www.w3schools.com\/browsers\/browsers_display.asp<\/a>
Resoluciones de pantalla m\u00e1s utilizadas en tel\u00e9fonos m\u00f3viles:
http:\/\/deviceatlas.com\/resourcecentre\/Explore+DeviceAtlas+Data\/Data+Explorer#_\/<\/a><\/p>\nSi queremos optimizar recursos y dise\u00f1ar \u00fanicamente dos estructuras de web, una posible soluci\u00f3n ser\u00eda dise\u00f1ar 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\u00eda ser fija para pantallas mayores a 480 p\u00edxeles (iPhone) que se vuelva fluido para resoluciones menores, hasta las pantallas de los tel\u00e9fonos m\u00e1s peque\u00f1as (160 pixeles o menos). Es importante recordar que a todas estas medidas debemos restar 30 o 40 pixeles para que el dise\u00f1o no quede recortado por barras de desplazamiento o m\u00e1rgenes del navegador web.<\/p>\n
Buen art\u00edculo sobre dise\u00f1o web sobre m\u00f3viles:
http:\/\/www.circulodemaquetadores.com\/disenando-para-moviles-diseno-para-multiples-tamanos-de-pantalla\/<\/a>
Ventajas del web frente las aplicaciones y an\u00e1lisis de los distintas posibilidades de dise\u00f1o web para m\u00f3vil
http:\/\/www.javajan.com\/news.php?id=350-guia<\/a><\/p>\nEjemplo de estructuras distintas: a 800 pixeles existe una transici\u00f3n que camb\u00eda de una estructura de 3 columnas a una estructura de 2 columnas (manteniendo la mayor\u00eda de contenidos):<\/p>\n
![\"\"](\"http:\/\/www.xn--guiadiseo-s6a.com\/imgs\/exemples\/estruc_distinta.jpg\")
<\/p>\n
Consultar tambi\u00e9n los diversos ejemplos web con distintas estructuras fluidas que presentamos y explicamos al final del cap\u00edtulo.<\/p>\n
Comparativa:<\/p>\n
Ventajas y desventajas de los tres modelos de adaptaci\u00f3n a las distintas resoluciones de pantalla:<\/p>\n
\n
8.- Ejemplos: p\u00e1ginas web sensibles
9.- Presentaci\u00f3n de los contenidos<\/h1>\nTipograf\u00edas<\/h2>\nIm\u00e1genes<\/h2>\nEnlaces web<\/h2>\nFormularios web<\/h2>\nTablas<\/h2>\nAnimaciones<\/h2>\nOtros contenidos posibles<\/h2>\nNuevas posibilidades: CSS3 y HTML5<\/h2>\n10.- Dise\u00f1o de p\u00e1ginas web programadas
11.- Optimizaci\u00f3n para los buscadores (SEO)
Recomendaciones de Google<\/h1>\n12.- Presupuesto y entrega del dise\u00f1o al maquetador<\/h1>\n <\/span><\/h1>\nIntroducci\u00f3n<\/h1>\n\nHay dificultades que muchos dise\u00f1adores tienen para entender las importantes diferencias entre el dise\u00f1o impreso y el dise\u00f1o web, las limitaciones que presenta respecto al dise\u00f1o tradicional pero tambi\u00e9n las nuevas posibilidades que permiten formas ins\u00f3litas de expresi\u00f3n y comunicaci\u00f3n.<\/p>\n
Esta gu\u00eda est\u00e1 pensada para terminar con estas dificultades, para que cualquier dise\u00f1ador gr\u00e1fico, tenga o no experiencia t\u00e9cnica web, adquiera los conocimientos necesarios que le permitan dise\u00f1ar cualquier sitio o p\u00e1gina web, dando rienda suelta a su imaginaci\u00f3n y creatividad, explotando todas las posibilidades que ofrece este medio. Pero, al mismo tiempo ci\u00f1\u00e9ndose a las limitaciones tecnol\u00f3gicas del momento, para que ning\u00fan maquetador o programador competente jam\u00e1s mire su dise\u00f1o y le diga \u00abeso no se puede hacer\u00bb.<\/p>\n
Dicen que las modas van y vienen, pero que el buen dise\u00f1o es atemporal. Lamentablemente para los buenos dise\u00f1adores, las tecnolog\u00edas tambi\u00e9n van y vienen (o evolucionan) y los buenos dise\u00f1os se tienen de adaptar a la tecnolog\u00eda del momento, si no caducan.<\/p>\n
<\/p>\n
<\/p>\n
Vocabulario y definiciones indispensables<\/h1>\n\n\n- P\u00e1gina web: <\/strong>documento que forma parte de un sitio web, con un contenido que puede incluir texto, im\u00e1genes, elementos multimedia y enlaces para navegar a otras p\u00e1ginas web o contenidos.<\/li>\n
- Sitio web: <\/strong>colecci\u00f3n de p\u00e1ginas web relacionadas y comunes a un dominio de Internet o subdominio.<\/li>\n
- P\u00e1gina principal o home<\/em>: <\/strong>p\u00e1gina de entrada a un sitio web, normalmente con un dise\u00f1o mucho m\u00e1s trabajado, que presenta el sitio y las opciones de navegaci\u00f3n a las p\u00e1ginas o contenidos del sitio.<\/li>\n
- Enlace web: <\/strong>elemento de una p\u00e1gina web que, al clicarlo te lleva a otra p\u00e1gina web o a otra parte de la misma p\u00e1gina web.<\/li>\n
- Men\u00fa de navegaci\u00f3n: <\/strong>conjunto de enlaces web que reflejan la organizaci\u00f3n de los contenidos del sitio web y enlazan a cada una de sus p\u00e1ginas web.<\/li>\n
- Dominio de Internet: <\/strong>es un nombre \u00fanico 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\u00f1adores).<\/li>\n
- URL: <\/strong>cadena de caracteres con la cual se asigna una direcci\u00f3n \u00fanica a cada uno de los recursos de informaci\u00f3n disponibles en la Internet (p\u00e1ginas web y sus elementos: im\u00e1genes, hojas de estilos, elementos multimedia,\u2026). La URL de la p\u00e1gina principal normalmente es el nombre del dominio.<\/li>\n
- Servidor web: <\/strong>ordenador remoto que provee los datos solicitados por parte de los navegadores de otras computadoras. Las p\u00e1ginas web y dominios de Internet deben de ser alojadas en un servidor. Existen muchas empresas que poseen servidores.<\/li>\n
- Navegador web: <\/strong>aplicaci\u00f3n que interpreta el contenido de las p\u00e1ginas web y lo presenta en pantalla permitiendo al usuario interactuar. Ejemplos de navegador: Internet Explorer, Mozilla Firefox, Google Chrome, Safari… Al dise\u00f1ar una p\u00e1gina web, tenemos que tener en cuenta que los distintos navegadores pueden presentar nuestros dise\u00f1os con peque\u00f1as variaciones.<\/li>\n
- Resoluci\u00f3n de ventana web: <\/strong>n\u00famero de p\u00edxeles m\u00e1ximos horizontales y verticales disponibles para presentar una p\u00e1gina web. La resoluci\u00f3n vendr\u00e1 determinada por la resoluci\u00f3n de la pantalla del dispositivo y por el espacio que el navegador web deja para la presentaci\u00f3n. Las distintas resoluciones disponibles Internet limitaran en gran medida el dise\u00f1o web.\n
Ejemplos de pantalla ipad (1024 x 768) y iphone (640 x 480) mostrando la misma p\u00e1gina web, presenta un dise\u00f1o diferente para cada una de las resoluciones.<\/span><\/p>\n<\/li>\n- Dise\u00f1ador web: <\/strong>Profesional que utiliza programas de dise\u00f1o tradicional, como photoshop, freehand, ilustrator, indesign\u2026<\/li>\n
- Maquetador web: <\/strong>Profesional que maqueta los dise\u00f1os utilizando las codificaciones est\u00e1ndares (html, css, javascript\u2026), transformando los dise\u00f1os en p\u00e1ginas web.<\/li>\n
- Programador web: <\/strong>Profesional que programa las p\u00e1ginas web maquetadas (php, asp, jquery \u2026) para que presenten informaci\u00f3n de una base de datos, personalicen los contenidos, env\u00eden los formularios, interact\u00faen con el usuario\u2026<\/li>\n<\/ul>\n
<\/span><\/p>\n<\/p><\/div>\n<\/p><\/div>\nDiferencias b\u00e1sicas entre dise\u00f1o impreso
y dise\u00f1o web<\/h1>\n\nInteractuar en vez de mostrar<\/p>\n
El dise\u00f1o impreso est\u00e1 basado en ver, pero el dise\u00f1o web est\u00e1 basado en hacer.
La funci\u00f3n del dise\u00f1o tradicional es contar historias, la misi\u00f3n del dise\u00f1o digital es entablar conversaciones.
El soporte gr\u00e1fico se sostiene sobre relaciones espaciales y la experiencia web sobre relaciones temporales. El dise\u00f1o impreso es est\u00e1tico, en cambio, la experiencia de un sitio web se define por la interacci\u00f3n del usuario con dise\u00f1o y contenido. Por ejemplo, un usuario hace clic sobre la navegaci\u00f3n o se desplaza hacia abajo para leer una p\u00e1gina.
Un buen dise\u00f1o impreso tiene que entenderse y ser bonito, pero un buen dise\u00f1o web tiene que entenderse, facilitar la navegaci\u00f3n (usabilidad) y ser bonito. Normalmente se recomienda priorizar la usabilidad, despu\u00e9s el contenido y si queda tiempo el arte. Aunque esto no implica que el buen dise\u00f1o se deba sacrificar para ganar usabilidad, en esta gu\u00eda vamos a explicar c\u00f3mo hacerlos compatibles.<\/p>\n
Espacio y entorno indefinido en vez de definido<\/p>\n
El dise\u00f1o impreso se visualiza en espacio limitado pero el dise\u00f1o web se tiene que poder visualizar en m\u00faltiples espacios, adem\u00e1s el dise\u00f1o web se puede extender fuera de la pantalla (podemos que utilizar barras de desplazamiento o scrolling).
Cuando se dise\u00f1a para imprimir, el resultado va a ser exactamente igual o muy parecido al original que hemos dise\u00f1ado y guardado, en cambio, cuando se dise\u00f1a una web, debemos considerar factores externos de los cuales no tenemos ning\u00fan control (el usuario puede tener resoluciones de pantalla diferente o utilizar un navegador web distinto, adem\u00e1s de no tener las tipograf\u00edas utilizadas,\u2026).
El dise\u00f1o impreso se visualiza igual en cualquier revista, en cambio, los diferentes navegadores web pueden presentar los elementos del dise\u00f1o 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\u2026 sin que alguno muestre errores.<\/p>\n
Problema con las tipograf\u00edas<\/p>\n
En el dise\u00f1o impreso se puede utilizar cualquier tipograf\u00eda, pero el dise\u00f1o web normalmente solo muestra las tipograf\u00edas que el usuario tenga instaladas en su ordenador. M\u00e1s adelante veremos que existen diversas soluciones a este problema, por ejemplo poniendo el texto con el formato y la tipograf\u00eda deseada en im\u00e1genes, pero tendremos que tener en cuenta las limitaciones.<\/p>\n
Pixeles en vez de pulgadas y cent\u00edmetros<\/p>\n
En el dise\u00f1o impreso se trabaja con pulgadas y cent\u00edmetros, pero en el dise\u00f1o web solo se trabaja con pixeles. As\u00ed pues, dependiendo de la resoluci\u00f3n de la pantalla (pixeles por pulgada o dpi) una misma imagen se puede ver mayor o menor. Las medidas de los dise\u00f1os web siempre son p\u00edxeles, aunque en ocasiones se pueden utilizar porcentajes de pantalla o porcentajes de \u00e1rea (se explica m\u00e1s adelante).
Si les cuesta dise\u00f1ar con pixeles, pueden utilizar la resoluci\u00f3n 72 dpi, que es la resoluci\u00f3n est\u00e1ndar de la mayor\u00eda de pantallas de ordenador. Dise\u00f1ando a esta resoluci\u00f3n, la mayor\u00eda de usuarios ver\u00e1n las im\u00e1genes y elementos de su dise\u00f1o al mismo tama\u00f1o que en su pantalla.<\/p>\n
P\u00edxel: <\/strong>la menor unidad de medida en la pantalla (un punto de luz). La mayor\u00eda de pantallas tienen una resoluci\u00f3n de 72 p\u00edxeles por pulgada o dpi.<\/p>\nArchivos peque\u00f1os en vez de grandes<\/p>\n
El dise\u00f1o impreso se trabaja con altas resoluciones de archivos y se procura mantener la mejor calidad en las im\u00e1genes y originales, mientras que en el dise\u00f1o web se trabaja con resoluciones bajas para ahorrar recursos del servidor y permitir que el usuario abra la p\u00e1gina r\u00e1pidamente. En dise\u00f1o web, debemos optimizar las im\u00e1genes y animaciones, es decir, bajar la resoluci\u00f3n lo m\u00e1s posible sin perder una calidad significativa. El peso (calculado en Kb o Mb) de una p\u00e1gina web se calcula como la suma de todos pesos de los documentos que abre una p\u00e1gina web (im\u00e1genes, 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\u00e1gina tarda un segundo m\u00e1s a descargarse y abrirse.<\/p>\n
RGB en vez de CMYK<\/p>\n
En el dise\u00f1o impreso se trabaja colores substractivos o CMYK, en cambio en el dise\u00f1o web solo se trabaja con colores aditivos o RGB.
El color es un error com\u00fan de los dise\u00f1adores gr\u00e1ficos cuando quieren dise\u00f1ar para web. En la escuela de dise\u00f1o te ense\u00f1an a utilizar siempre CMYK para que la impresi\u00f3n quede bien, pero en el mundo web, es todo lo contrario, las pantallas emiten luz \u00fanicamente interpretan datos RGB o aditivos.<\/p>\n
Posible editar despu\u00e9s de publicar<\/p>\n
El dise\u00f1o impreso no se puede modificar despu\u00e9s de la impresi\u00f3n. Por suerte el dise\u00f1o web se puede modificar despu\u00e9s de la publicaci\u00f3n, se pueden corregir errores, completar contenido no introducido inicialmente, o mantener actualizada la informaci\u00f3n. En este sentido, es mejor evitar dise\u00f1os que no sean flexibles, para que en el futuro el dise\u00f1o se pueda adaptar a diferentes tama\u00f1os de los contenidos, sin perjudicar la est\u00e9tica del conjunto.<\/p>\n
<\/p>\n
<\/p>\n
<\/p>\n
Usabilidad<\/h1>\n\nUn atributo determinante para la calidad de un sitio web es suusabilidad<\/strong>. Se trata de lograr que los visitantes encuentren r\u00e1pidamente aquello que buscan, con el m\u00ednimo esfuerzo por su parte. Sea cual sea el contenido o la finalidad de nuestra web, navegar por ella debe resultar una experiencia gratificante.<\/p>\nWeb usable: <\/strong>es aquella en la que los usuarios pueden interactuar de la forma m\u00e1s f\u00e1cil, c\u00f3moda, evidente y segura posible. Una web usable denota calidad, genera confianza y nos diferencia positivamente de otras alternativas.<\/p>\nLos usuarios pasan mucho menos tiempo visitando una p\u00e1gina web de lo que sus dise\u00f1adores desear\u00edan, por lo que hay que facilitarles las cosas al m\u00e1ximo. Cuando un usuario encuentra que la navegaci\u00f3n por una web es c\u00f3moda, agradable y \u00fatil, existen mayores probabilidades de que la visite de nuevo en el futuro.<\/p>\n
Lograr un buen nivel de usabilidad requiere combinar h\u00e1bilmente una serie de elementos: tecnolog\u00eda, dise\u00f1o, contenidos\u2026 Aunque no existen recetas universales, he aqu\u00ed algunos criterios a tener en cuenta:<\/p>\n
\n- >Crear una jerarqu\u00eda visual clara en cada p\u00e1gina. <\/strong>Debe percibirse a simple vista cu\u00e1l es la importancia de los distintos contenidos, qu\u00e9 relaci\u00f3n existe entre ellos, a qu\u00e9 tema o bloque pertenecen… La colocaci\u00f3n, el tama\u00f1o, la tipograf\u00eda o los colores de los textos y de los dem\u00e1s elementos de la p\u00e1gina son los principales recursos a utilizar.<\/li>\n
- >Dar el control al usuario. <\/strong>\u00c9ste debe sentir en todo momento que sabe d\u00f3nde est\u00e1 y que controla la situaci\u00f3n. Nada importante deber\u00eda situarse a m\u00e1s de dos clics de distancia. Los t\u00edtulos y contenidos de cada apartado deben ser claros y visibles. Tambi\u00e9n son muy \u00fatiles los men\u00fas de situaci\u00f3n, la navegaci\u00f3n por pesta\u00f1as, las opciones de volver atr\u00e1s o deshacer una acci\u00f3n, la visualizaci\u00f3n clara de las distintos pasos de un proceso (la compra on-line, por ejemplo).<\/li>\n
- >Facilitar la interacci\u00f3n. <\/strong>Suele ser muy positivo que una web permita al usuario \u201chacer cosas\u201d: clicar, desplegar, abrir, mover… En todo caso, el acceso y el uso de cualquier elemento de interacci\u00f3n debe ser intuitivo, r\u00e1pido y f\u00e1cil. No podemos permitirnos frustrar al usuario o hacerle perder el tiempo.<\/li>\n
- >Aprovechar las convenciones y llamar a las cosas por su nombre. <\/strong>La mayor\u00eda de usuarios tienen ciertas expectativas derivadas de su experiencia navegando por internet. Saben, m\u00e1s o menos, d\u00f3nde se sit\u00faan los men\u00fas, c\u00f3mo funciona un buscador, para qu\u00e9 sirven determinados botones, qu\u00e9 significan ciertos iconos o expresiones, etc. As\u00ed, hay que situar los contenidos donde el usuario espera que est\u00e9n y hacer que las cosas funcionen como se espera que lo hagan. Si queremos sorprender o hacer \u201calgo diferente\u201d, hemos de asegurarnos de que ello no suponga una complicaci\u00f3n innecesaria.<\/li>\n
- >Simplificar<\/strong>. Hay que evitar la informaci\u00f3n 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\u00e1genes y animaciones, y crearemos men\u00fas claros, bien estructurados y desplegables si hay muchas opciones a mostrar.<\/li>\n<\/ul>\n
No hay que entender la usabilidad como un lastre para nuestra creatividad. Podemos innovar y ser originales mientras no olvidemos quenuestro dise\u00f1o debe estar centrado en el usuario<\/strong>. \u00c9l es el verdadero protagonista y hemos de asegurarnos de que comprender\u00e1 y podr\u00e1 seguirnos el juego en todo momento.<\/p>\nOtros aspectos a tener en cuenta<\/strong>:<\/p>\n\n- >Situar los elementos importantes siempre a mano.<\/li>\n
- >Los usuarios no siempre entran por la p\u00e1gina principal (poner men\u00fas de navegaci\u00f3n en todas las p\u00e1ginas).<\/li>\n
- >Dejar claro qu\u00e9 elementos son enlaces y cu\u00e1les no.<\/li>\n
- >A\u00f1adir un buscador o un mapa del sitio web si \u00e9ste tiene mucho contenido i\/o p\u00e1ginas.<\/li>\n
- >Enlazar a cualquier informaci\u00f3n en menos de 3 clicks (o enlaces)<\/li>\n
- >Mantener una coherencia en el dise\u00f1o de toda la p\u00e1gina.<\/li>\n
- >Seguir las reglas b\u00e1sicas del buen dise\u00f1o: selecci\u00f3n de colores, tipograf\u00edas, regla de los tercios\u2026<\/li>\n
- >No distraer el usuario con excesivas animaciones o elementos que parpadean.<\/li>\n
- >Intentar que los contenidos no tengan faltas de ortograf\u00eda.<\/li>\n
- >No abrir nuevas ventanas del navegador innecesariamente…<\/li>\n<\/ul>\n
Ejemplo web que intenta romper todas las reglas de la usabilidad:http:\/\/theworldsworstwebsiteever.com\/<\/a>
(listado de errores del web:http:\/\/theworldsworstwebsiteever.com\/new_page_1.htm<\/a>).
Otro sitio con listados de dise\u00f1os web que se deben evitar copiar:http:\/\/www.javajan.com\/?id=271-guia<\/a><\/p>\n<\/p><\/div>\n <\/p>\n<\/p><\/div>\n
<\/p>\n
<\/p>\n
<\/p>\n
Arquitectura de un sitio web<\/h1>\n\nAlgunos dicen que dise\u00f1ar para web es m\u00e1s parecido a la arquitectura que al dise\u00f1o gr\u00e1fico. Como en una casa, antes de escoger los muebles, el color de las cortinas o la iluminaci\u00f3n, es importante saber c\u00f3mo estar\u00e1 estructurada la planta, c\u00f3mo ser\u00e1 el sal\u00f3n, donde estar\u00e1n las habitaciones, como se acceder\u00e1 a ellas, donde estar\u00e1n las ventanas… Asimismo en la web, si la estructura no es s\u00f3lida e intuitiva, el arte de la p\u00e1gina no sirve para nada.<\/p>\n
Antes de empezar a trabajar en el aspecto puramente est\u00e9tico de las p\u00e1ginas web, imaginando animaciones impresionantes y gr\u00e1ficos atractivos, es indispensables pensar en la estructura del sitio web. Para eso, fundamentalmente, tendremos que:<\/p>\n
\n- >Definir las secciones y p\u00e1ginas web que debe tener el sitio.<\/li>\n
- >Escoger las secciones o p\u00e1ginas a las que podremos acceder desde la p\u00e1gina principal (o de inicio).<\/li>\n
- >Decidir si alguna secci\u00f3n o p\u00e1gina tiene que destacar m\u00e1s respecto las dem\u00e1s.<\/li>\n
- >Distribuir el contenido a presentar entre las distintas secciones y p\u00e1ginas.<\/li>\n
- >Concretar las distintas v\u00edas de acceso a cada una de p\u00e1ginas web del sitio (es importante ofrecer m\u00faltiples maneras de acceder a la misma informaci\u00f3n).<\/li>\n
- >Especificar el n\u00famero de idiomas que dispondr\u00e1 el sitio web.<\/li>\n<\/ul>\n
Para ayudar a concretar la estructura final del sitio web, muchos dise\u00f1adores y programadores web recomiendan hacer un esquema a mano alzada, con post-its o con un simple programa de dise\u00f1o del ordenador, que nos permita realizar cambios f\u00e1cilmente a medida que redescubrimos mejores estructuras para nuestro sitio web.<\/p>\n
Ejemplo de la estructura de un sitio web en el que se detalla todas las p\u00e1ginas y el recorrido para acceder a ellas.<\/span><\/p>\nNormalmente, el contenido de un sitio web se estructura en diferentes p\u00e1ginas web, pero debemos mencionar una tendencia (no muy utilizada ni recomendada), llamada \u201cparallax scrolling\u201d, que estructura todos los contenidos en una solo p\u00e1gina web y permite que el usuario acceda a ellos mediante enlaces internos o bajando por la barra de desplazamiento o \u201cscroll\u201d.<\/p>\n
Ejemplos web de parallax scrolling: http:\/\/www.javajan.com\/news.php?id=277-guia<\/a><\/p>\n<\/p><\/div>\n <\/p>\n
<\/p>\n
<\/p>\n
Estructura de una p\u00e1gina web<\/h1>\n\nUna vez ya tengamos clara como estar\u00e1 estructurada la planta de la casa (sitio web a dise\u00f1ar), podemos empezar a dise\u00f1ar la estructura de cada habitaci\u00f3n (p\u00e1gina web), decidiendo donde pondremos los muebles (contenido) y la decoraci\u00f3n (elementos gr\u00e1ficos). Con especial esmero tendremos que estructurar el sal\u00f3n de la casa (p\u00e1gina principal), donde recibiremos a todos nuestros invitados (usuarios), para que sea lo m\u00e1s confortable posible (dise\u00f1o) pero tambi\u00e9n aporte el m\u00e1ximo de informaci\u00f3n sobre los anfitriones y sobre los contenidos de las distintas habitaciones (usabilidad).<\/p>\n
Para determinar la estructura de cada p\u00e1gina web, tendremos que definir (entre otros):<\/p>\n
\n- >Qu\u00e9 tipo de web quiere el cliente: tipo tarjeta de visita, tipo cat\u00e1logo, tipo anuncio de revista, tipo juego, una combinaci\u00f3n entre las anteriores…<\/li>\n
- >Qu\u00e9 tipo de informaci\u00f3n desea presentar el cliente: mucha imagen, mucha informaci\u00f3n escrita…<\/li>\n
- >Qu\u00e9 mensaje deber\u00eda de recibir el usuario cuando abra la p\u00e1gina principal.<\/li>\n
- >Hac\u00eda qu\u00e9 secciones del web se deber\u00eda sentir atra\u00eddo.<\/li>\n
- >Qu\u00e9 elementos comunes deben presentarse en todas las p\u00e1ginas (por ejemplo sistema de navegaci\u00f3n).<\/li>\n
- >Qu\u00e9 contenido espec\u00edfico deber\u00eda presentarse en cada p\u00e1gina.<\/li>\n<\/ul>\n
De todos modos, antes de empezar a dise\u00f1ar la estructura de una p\u00e1gina web, deber\u00edamos conocer las estructuras est\u00e1ndares utilizadas normalmente.<\/p>\n
<\/p>\n<\/p><\/div>\n
\nEstructuras est\u00e1ndares<\/h2>\n\nUno de los aspectos m\u00e1s importantes de las estructura de una p\u00e1gina web es decidir d\u00f3nde posicionaremos los men\u00fas de navegaci\u00f3n y enlaces a otras p\u00e1ginas web y d\u00f3nde posicionaremos el contenido que van a consultar los navegantes. Existen diversos tipos de estructuras est\u00e1ndares de p\u00e1ginas web que especifican la posici\u00f3n de los men\u00fas de navegaci\u00f3n y el contenido, manteni\u00e9ndose esta estructura y dise\u00f1o durante toda la navegaci\u00f3n por el sitio web.<\/p>\n
Sin que sea sorprendente, los men\u00fas de navegaci\u00f3n acostumbran a posicionarse en los m\u00e1rgenes de la p\u00e1gina, dejando los contenidos en el centro. Por defecto, las estructuras est\u00e1ndares posicionan los men\u00fas de navegaci\u00f3n arriba o en los laterales, pero tambi\u00e9n existen otras posibilidades:<\/p>\n
Bloque de navegaci\u00f3n a la izquierda:<\/p>\n
Permite presentar muchos men\u00fas o enlaces, pues cada l\u00ednea puede ser un enlace (por ejemplo, el men\u00fa de navegaci\u00f3n de esta gu\u00eda). Tampoco supone mucho problema que los men\u00fas se extiendan fuera de la pantalla, porque el usuario puede visualizarlos con la barra de desplazamiento vertical. Este m\u00e9todo es ideal si los men\u00fas son administrables, pues el dise\u00f1o no se ver\u00e1 muy afectado si aumentan o disminuyen el n\u00famero de enlaces.<\/p>\n
<\/a>Ejemplo de bloque de navegaci\u00f3n a la izquierda:guiadise\u00f1o.com<\/a><\/p>\nBloque de navegaci\u00f3n arriba:<\/p>\n
Ideal si el sitio web no tiene demasiadas secciones. Los men\u00fas se sit\u00faan en l\u00ednea y ocupan mucho espacio. Es f\u00e1cil si los men\u00fas se despliegan con otros submen\u00fas (es m\u00e1s f\u00e1cil la navegaci\u00f3n que si los submen\u00fas se abren lateralmente)<\/p>\n
<\/a>Ejemplo de bloque de navegaci\u00f3n arriba:http:\/\/www.apple.es<\/a><\/p>\nBloque de navegaci\u00f3n derecha:<\/p>\n
Las mismas ventajas que el men\u00fa a la izquierda pero menos usado.<\/p>\n
<\/a>Ejemplo de bloque de navegaci\u00f3n a la izquierda:http:\/\/www.narfstuff.co.uk<\/a><\/p>\nCombinaci\u00f3n de los anteriores:<\/p>\n
Si tenemos muchos enlaces a presentar, siempre podemos utilizar cualquier combinaci\u00f3n de los anteriores (arriba e izquierda; izquierda y derecha; arriba, izquierda y derecha;\u2026), sobre todo si los men\u00fas se pueden agrupar en dos o tres grandes grupos.<\/p>\n
<\/a>Ejemplo de combinaci\u00f3n de bloques:http:\/\/www.apple.es<\/a><\/p>\nPie de p\u00e1gina<\/p>\n
El pie de p\u00e1gina acostumbra a tener una gran importancia en las estructuras de los webs actuales, donde se pueden repetir los men\u00fas de navegaci\u00f3n (para que el usuario no deba subir por la p\u00e1gina), situar los enlaces alaviso legal<\/em>,copyright<\/em>, redes sociales: facebook, RSS, twitter o los datos de direcci\u00f3n y contacto.<\/p>\nEjemplos de pie de p\u00e1gina:<\/p>\n
<\/a>Ejemplo de pie de p\u00e1gina:http:\/\/bristolarchiverecords.com<\/a><\/p>\n<\/a>Ejemplo de pie de p\u00e1gina:http:\/\/yuruinspires.com<\/a><\/p>\n<\/a>Ejemplo de pie de p\u00e1gina:http:\/\/splitdadiz.com<\/a><\/p>\n<\/a>Ejemplo de pie de p\u00e1gina:http:\/\/www.mecannical.com<\/a><\/p>\n<\/a>Ejemplo de pie de p\u00e1gina:http:\/\/bitsamppixels.com<\/a><\/p>\nOtros ejemplos web de pies de p\u00e1gina:http:\/\/www.javajan.com\/news.php?id=205-guia<\/a><\/p>\nP\u00e1gina principal<\/p>\n
La p\u00e1gina principal es un caso especial, para la cual no existe una estructura est\u00e1ndar. Aunque la p\u00e1gina principal tambi\u00e9n se puede estructurar de un modo est\u00e1ndar, en la mayor\u00eda de sitios web, la p\u00e1gina principal no se dise\u00f1a para presentar contenido, y m\u00e1s bien se imagina como escaparate de la empresa, en el que tambi\u00e9n se presentan los men\u00fas o enlaces a las diferentes p\u00e1ginas o secciones del web.<\/p>\n
Ejemplos de p\u00e1gina principal:<\/p>\n
<\/a>Ejemplo de p\u00e1gina principal:http:\/\/www.coullon.com<\/a><\/p>\n<\/a>Ejemplo de p\u00e1gina principal:http:\/\/www.luhsetea.com<\/a><\/p>\n<\/a>Ejemplo de p\u00e1gina principal:http:\/\/dotmick.com<\/a><\/p>\n<\/a>Ejemplo de p\u00e1gina principal:http:\/\/gnosh.co.uk<\/a><\/p>\n<\/a>Ejemplo de p\u00e1gina principal:http:\/\/wearecupcup.com<\/a><\/p>\n<\/a><\/p>\nEjemplo de p\u00e1gina principal:http:\/\/www.mcfarlanechangemanagement.com.au<\/a><\/p>\n<\/p><\/div>\n<\/p><\/div>\n <\/div>\n <\/div>\n\nDise\u00f1ando la estructura<\/h2>\n\nConociendo las estructuras web m\u00e1s utilizadas, ya podemos empezar a dibujar la estructura espec\u00edfica de nuestra p\u00e1gina web, dibujando y posicionando a nuestro gusto los bloques de men\u00fas, contenido, gr\u00e1ficos, y los sub-bloques dentro de cada uno de los anteriores.<\/p>\n
Cada dise\u00f1ador tendr\u00e1 su propio m\u00e9todo para plasmar la estructura imaginada de una p\u00e1gina web a la pantalla de su ordenador. Aqu\u00ed transcribimos el m\u00e9todo de trabajo espec\u00edfico de un dise\u00f1ador:\u201cComienzo por bosquejar algunos posibles dise\u00f1os sobre papel. Despu\u00e9s de unos pocos de estos bocetos, decido cual me gusta m\u00e1s o cual se adapta mejor a los requisitos del cliente y el salto al Photoshop (o freehand), y uso la herramienta de rect\u00e1ngulo para bloquear las \u00e1reas que he marcado en mi papel. Una vez que he definido mi dise\u00f1o, experimento con los colores de fondo y de los rect\u00e1ngulos hasta tener un esquema de color s\u00f3lido. Y sigo trabajando con p\u00edxeles hasta que, finalmente, tengo un borrador para mostrar al cliente.\u201d<\/em><\/p>\nEjemplo de dise\u00f1o de la estructura:<\/p>\n
<\/a><\/p>\nEjemplo de dise\u00f1o para la p\u00e1gina:http:\/\/www.ginecologiavhebron.com<\/a>(dise\u00f1o deDeumonforte<\/em>y programaci\u00f3n Javajan)<\/p>\nTrabajando con bloques rectangulares<\/p>\n
La estructura de una p\u00e1gina web se sub-divide en bloques rectangulares, dentro de los cuales vamos a posicionar los diferentes elementos de dise\u00f1o o contenido. M\u00e1s tarde, al aplicar dise\u00f1o sobre estos rect\u00e1ngulos podemos enmascararlos eliminando los bordes o utilizando formas curvas, pero es importante conocer que cualquier estructura web est\u00e1 basada en rect\u00e1ngulos horizontales (no en diagonal).<\/p>\n
A pesar de todo, el dise\u00f1o de la estructura web no finaliza al posicionar los diferentes bloques, porque tenemos de definir como se adaptaran y comportaran en funci\u00f3n de la resoluci\u00f3n de pantalla.<\/p>\n<\/p><\/div>\n<\/p><\/div>\n
<\/p>\n
<\/p>\n
<\/p>\n
Adaptaci\u00f3n de la estructura en funci\u00f3n de la resoluci\u00f3n<\/h1>\nAdaptaci\u00f3n del bloque principal<\/h2>\n\nBloque principal: <\/strong>recuadro exterior que engloba toda la estructura de p\u00e1gina web, es decir, no existe ning\u00fan recuadro o bloque secundario que rebase el bloque o recuadro principal.<\/p>\nBloque secundario: <\/strong>cada uno de los recuadros que componen el bloque o recuadro principal.<\/p>\nExisten tres maneras distintas de adaptar el bloque principal en funci\u00f3n del tama\u00f1o de la pantalla:<\/p>\n
Fijo:<\/p>\n
El bloque se dise\u00f1a con un tama\u00f1o fijo que no se va a modificar en funci\u00f3n del tama\u00f1o de la pantalla. Es el m\u00e1s f\u00e1cil de dise\u00f1ar y maquetar porqu\u00e9 los elementos del dise\u00f1o o bloques secundarios siempre estar\u00e1n en la misma posici\u00f3n y mantendr\u00e1n el mismo ancho.<\/p>\n
Ejemplo p\u00e1gina web de estructura fija, mostrada en pantallas de distinta resoluci\u00f3n. A resoluciones grandes aparecen muchos espacios en blanco; a resoluciones peque\u00f1as el dise\u00f1o queda cortado<\/p>\n
Si escogemos una estructura principal fija, tenemos que pensar qu\u00e9 tama\u00f1o en pixeles vamos a utilizar. Seg\u00fan las estad\u00edsticas actuales (http:\/\/www.w3schools.com\/browsers\/browsers_display.asp<\/a>), el 98% de usuarios tienen resoluciones igual o superiores a 1024×768, aunque empiezan a crecer el n\u00famero de usuarios con pantallas inferiores a 800×600 debido a la navegaci\u00f3n con tabletas y tel\u00e9fonos.<\/p>\nSi dise\u00f1amos un bloque principal fijo, podr\u00eda ser bueno tomar como referencia la resoluci\u00f3n de 1024×768, aunque el ancho del bloque principal deber\u00eda de ser m\u00e1s peque\u00f1o, pues el navegador se necesita algunos pixeles para los men\u00fas, m\u00e1rgenes y barras de desplazamiento. As\u00ed pues, deber\u00edamos de dise\u00f1ar un bloque principal de un ancho m\u00e1ximo de 990 pixeles. Si queremos que todo el contenido aparezca en la pantalla y no aparezcan barras de desplazamiento verticales, la altura m\u00e1xima del dise\u00f1o deber\u00eda de ser entre 600 y 650 pixeles (depender\u00e1 mucho del espacio que ocupen los men\u00fas del navegador del usuario).<\/p>\n
Normalmente, la estructura principal fija se centra en la pantalla para resoluciones grandes, aunque tambi\u00e9n se puede alinear a la izquierda o a la derecha.<\/p>\n
Fluido o l\u00edquido:<\/p>\n
Con independencia de la resoluci\u00f3n de una pantalla, un bloque principal fluido ocupa un porcentaje horizontal de la pantalla, normalmente el 100% (aunque tambi\u00e9n puede ocupar el 90% centrado, o alineado a la izquierda o derecha). Normalmente, al disminuir la resoluci\u00f3n o tama\u00f1o de una pantalla, el bloque fluido se estrecha horizontalmente pero se alarga verticalmente para poder presentar toda la informaci\u00f3n 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\u00f3n fija o fluida (se ver\u00e1 en el siguiente punto).<\/p>\n
Dise\u00f1ar y maquetar una estructura fluida es m\u00e1s complejo, pues se tienen que prever c\u00f3mo se van a comportar cada uno de los bloques secundarios en su interior. Bien dise\u00f1ada, una estructura fluida se puede adaptar desde las resoluciones de pantalla m\u00e1s grandes hasta las resoluciones de pantallas m\u00e1s peque\u00f1as de los tel\u00e9fonos, aunque para \u00e9ste \u00faltimo caso se recomiendan distintas estructuras, como se ver\u00e1 a continuaci\u00f3n.<\/p>\n
Ejemplo de adaptaci\u00f3n fluida (en este caso, todos los bloques secundarios tambi\u00e9n son fluidos):<\/p>\n
<\/p>\n
Dos buenos art\u00edculo sobre dise\u00f1o fluido:
http:\/\/www.javajan.com\/news.php?id=225-guia<\/a> y http:\/\/www.javajan.com\/news.php?id=193-guia<\/a><\/p>\nEstructuras distintas – Dise\u00f1o sensible:<\/p>\n
El dise\u00f1o sensible (del ingl\u00e9s: responsive design) es una opci\u00f3n cada vez m\u00e1s utilizada en el dise\u00f1o web actual es crear estructuras del bloque principal distintas, reacomodando los contenidos en funci\u00f3n de la resoluci\u00f3n de la pantalla. Esto puede ser muy \u00fatil cuando consideremos el acceso a nuestro web a trav\u00e9s de tel\u00e9fonos, que tienen resoluciones de pantallas muy peque\u00f1as. Algunos navegadores para m\u00f3viles reestructuran el dise\u00f1o de los webs de un modo eficiente, pero si queremos asegurar la buena visualizaci\u00f3n y dise\u00f1o de nuestro web a cualquier resoluci\u00f3n, deberemos de crear varias estructuras en funci\u00f3n de la resoluci\u00f3n de la pantalla.<\/p>\n
En un dise\u00f1o sensible, no aparecer\u00e1n barras de desplazamiento horizontales (scroll) hasta resoluciones muy peque\u00f1as.<\/p>\n
Podemos decidir las medidas a las cuales se presentaran las diferentes estructuras del bloque principal en funci\u00f3n del dise\u00f1o planteado, pero tambi\u00e9n podemos determinarlas consultando las pantallas m\u00e1s utilizadas actualmente:<\/p>\n
Resoluciones de pantalla m\u00e1s utilizadas:
http:\/\/www.w3schools.com\/browsers\/browsers_display.asp<\/a>
Resoluciones de pantalla m\u00e1s utilizadas en tel\u00e9fonos m\u00f3viles:
http:\/\/deviceatlas.com\/resourcecentre\/Explore+DeviceAtlas+Data\/Data+Explorer#_\/<\/a><\/p>\nSi queremos optimizar recursos y dise\u00f1ar \u00fanicamente dos estructuras de web, una posible soluci\u00f3n ser\u00eda dise\u00f1ar 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\u00eda ser fija para pantallas mayores a 480 p\u00edxeles (iPhone) que se vuelva fluido para resoluciones menores, hasta las pantallas de los tel\u00e9fonos m\u00e1s peque\u00f1as (160 pixeles o menos). Es importante recordar que a todas estas medidas debemos restar 30 o 40 pixeles para que el dise\u00f1o no quede recortado por barras de desplazamiento o m\u00e1rgenes del navegador web.<\/p>\n
Buen art\u00edculo sobre dise\u00f1o web sobre m\u00f3viles:
http:\/\/www.circulodemaquetadores.com\/disenando-para-moviles-diseno-para-multiples-tamanos-de-pantalla\/<\/a>
Ventajas del web frente las aplicaciones y an\u00e1lisis de los distintas posibilidades de dise\u00f1o web para m\u00f3vil
http:\/\/www.javajan.com\/news.php?id=350-guia<\/a><\/p>\nEjemplo de estructuras distintas: a 800 pixeles existe una transici\u00f3n que camb\u00eda de una estructura de 3 columnas a una estructura de 2 columnas (manteniendo la mayor\u00eda de contenidos):<\/p>\n
<\/p>\n
Consultar tambi\u00e9n los diversos ejemplos web con distintas estructuras fluidas que presentamos y explicamos al final del cap\u00edtulo.<\/p>\n
Comparativa:<\/p>\n
Ventajas y desventajas de los tres modelos de adaptaci\u00f3n a las distintas resoluciones de pantalla:<\/p>\n
\n
Im\u00e1genes<\/h2>\nEnlaces web<\/h2>\nFormularios web<\/h2>\nTablas<\/h2>\nAnimaciones<\/h2>\nOtros contenidos posibles<\/h2>\nNuevas posibilidades: CSS3 y HTML5<\/h2>\n10.- Dise\u00f1o de p\u00e1ginas web programadas
11.- Optimizaci\u00f3n para los buscadores (SEO)
Recomendaciones de Google<\/h1>\n12.- Presupuesto y entrega del dise\u00f1o al maquetador<\/h1>\n <\/span><\/h1>\nIntroducci\u00f3n<\/h1>\n\nHay dificultades que muchos dise\u00f1adores tienen para entender las importantes diferencias entre el dise\u00f1o impreso y el dise\u00f1o web, las limitaciones que presenta respecto al dise\u00f1o tradicional pero tambi\u00e9n las nuevas posibilidades que permiten formas ins\u00f3litas de expresi\u00f3n y comunicaci\u00f3n.<\/p>\n
Esta gu\u00eda est\u00e1 pensada para terminar con estas dificultades, para que cualquier dise\u00f1ador gr\u00e1fico, tenga o no experiencia t\u00e9cnica web, adquiera los conocimientos necesarios que le permitan dise\u00f1ar cualquier sitio o p\u00e1gina web, dando rienda suelta a su imaginaci\u00f3n y creatividad, explotando todas las posibilidades que ofrece este medio. Pero, al mismo tiempo ci\u00f1\u00e9ndose a las limitaciones tecnol\u00f3gicas del momento, para que ning\u00fan maquetador o programador competente jam\u00e1s mire su dise\u00f1o y le diga \u00abeso no se puede hacer\u00bb.<\/p>\n
Dicen que las modas van y vienen, pero que el buen dise\u00f1o es atemporal. Lamentablemente para los buenos dise\u00f1adores, las tecnolog\u00edas tambi\u00e9n van y vienen (o evolucionan) y los buenos dise\u00f1os se tienen de adaptar a la tecnolog\u00eda del momento, si no caducan.<\/p>\n
<\/p>\n
<\/p>\n
Vocabulario y definiciones indispensables<\/h1>\n\n\n- P\u00e1gina web: <\/strong>documento que forma parte de un sitio web, con un contenido que puede incluir texto, im\u00e1genes, elementos multimedia y enlaces para navegar a otras p\u00e1ginas web o contenidos.<\/li>\n
- Sitio web: <\/strong>colecci\u00f3n de p\u00e1ginas web relacionadas y comunes a un dominio de Internet o subdominio.<\/li>\n
- P\u00e1gina principal o home<\/em>: <\/strong>p\u00e1gina de entrada a un sitio web, normalmente con un dise\u00f1o mucho m\u00e1s trabajado, que presenta el sitio y las opciones de navegaci\u00f3n a las p\u00e1ginas o contenidos del sitio.<\/li>\n
- Enlace web: <\/strong>elemento de una p\u00e1gina web que, al clicarlo te lleva a otra p\u00e1gina web o a otra parte de la misma p\u00e1gina web.<\/li>\n
- Men\u00fa de navegaci\u00f3n: <\/strong>conjunto de enlaces web que reflejan la organizaci\u00f3n de los contenidos del sitio web y enlazan a cada una de sus p\u00e1ginas web.<\/li>\n
- Dominio de Internet: <\/strong>es un nombre \u00fanico 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\u00f1adores).<\/li>\n
- URL: <\/strong>cadena de caracteres con la cual se asigna una direcci\u00f3n \u00fanica a cada uno de los recursos de informaci\u00f3n disponibles en la Internet (p\u00e1ginas web y sus elementos: im\u00e1genes, hojas de estilos, elementos multimedia,\u2026). La URL de la p\u00e1gina principal normalmente es el nombre del dominio.<\/li>\n
- Servidor web: <\/strong>ordenador remoto que provee los datos solicitados por parte de los navegadores de otras computadoras. Las p\u00e1ginas web y dominios de Internet deben de ser alojadas en un servidor. Existen muchas empresas que poseen servidores.<\/li>\n
- Navegador web: <\/strong>aplicaci\u00f3n que interpreta el contenido de las p\u00e1ginas web y lo presenta en pantalla permitiendo al usuario interactuar. Ejemplos de navegador: Internet Explorer, Mozilla Firefox, Google Chrome, Safari… Al dise\u00f1ar una p\u00e1gina web, tenemos que tener en cuenta que los distintos navegadores pueden presentar nuestros dise\u00f1os con peque\u00f1as variaciones.<\/li>\n
- Resoluci\u00f3n de ventana web: <\/strong>n\u00famero de p\u00edxeles m\u00e1ximos horizontales y verticales disponibles para presentar una p\u00e1gina web. La resoluci\u00f3n vendr\u00e1 determinada por la resoluci\u00f3n de la pantalla del dispositivo y por el espacio que el navegador web deja para la presentaci\u00f3n. Las distintas resoluciones disponibles Internet limitaran en gran medida el dise\u00f1o web.\n
Ejemplos de pantalla ipad (1024 x 768) y iphone (640 x 480) mostrando la misma p\u00e1gina web, presenta un dise\u00f1o diferente para cada una de las resoluciones.<\/span><\/p>\n<\/li>\n- Dise\u00f1ador web: <\/strong>Profesional que utiliza programas de dise\u00f1o tradicional, como photoshop, freehand, ilustrator, indesign\u2026<\/li>\n
- Maquetador web: <\/strong>Profesional que maqueta los dise\u00f1os utilizando las codificaciones est\u00e1ndares (html, css, javascript\u2026), transformando los dise\u00f1os en p\u00e1ginas web.<\/li>\n
- Programador web: <\/strong>Profesional que programa las p\u00e1ginas web maquetadas (php, asp, jquery \u2026) para que presenten informaci\u00f3n de una base de datos, personalicen los contenidos, env\u00eden los formularios, interact\u00faen con el usuario\u2026<\/li>\n<\/ul>\n
<\/span><\/p>\n<\/p><\/div>\n<\/p><\/div>\nDiferencias b\u00e1sicas entre dise\u00f1o impreso
y dise\u00f1o web<\/h1>\n\nInteractuar en vez de mostrar<\/p>\n
El dise\u00f1o impreso est\u00e1 basado en ver, pero el dise\u00f1o web est\u00e1 basado en hacer.
La funci\u00f3n del dise\u00f1o tradicional es contar historias, la misi\u00f3n del dise\u00f1o digital es entablar conversaciones.
El soporte gr\u00e1fico se sostiene sobre relaciones espaciales y la experiencia web sobre relaciones temporales. El dise\u00f1o impreso es est\u00e1tico, en cambio, la experiencia de un sitio web se define por la interacci\u00f3n del usuario con dise\u00f1o y contenido. Por ejemplo, un usuario hace clic sobre la navegaci\u00f3n o se desplaza hacia abajo para leer una p\u00e1gina.
Un buen dise\u00f1o impreso tiene que entenderse y ser bonito, pero un buen dise\u00f1o web tiene que entenderse, facilitar la navegaci\u00f3n (usabilidad) y ser bonito. Normalmente se recomienda priorizar la usabilidad, despu\u00e9s el contenido y si queda tiempo el arte. Aunque esto no implica que el buen dise\u00f1o se deba sacrificar para ganar usabilidad, en esta gu\u00eda vamos a explicar c\u00f3mo hacerlos compatibles.<\/p>\n
Espacio y entorno indefinido en vez de definido<\/p>\n
El dise\u00f1o impreso se visualiza en espacio limitado pero el dise\u00f1o web se tiene que poder visualizar en m\u00faltiples espacios, adem\u00e1s el dise\u00f1o web se puede extender fuera de la pantalla (podemos que utilizar barras de desplazamiento o scrolling).
Cuando se dise\u00f1a para imprimir, el resultado va a ser exactamente igual o muy parecido al original que hemos dise\u00f1ado y guardado, en cambio, cuando se dise\u00f1a una web, debemos considerar factores externos de los cuales no tenemos ning\u00fan control (el usuario puede tener resoluciones de pantalla diferente o utilizar un navegador web distinto, adem\u00e1s de no tener las tipograf\u00edas utilizadas,\u2026).
El dise\u00f1o impreso se visualiza igual en cualquier revista, en cambio, los diferentes navegadores web pueden presentar los elementos del dise\u00f1o 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\u2026 sin que alguno muestre errores.<\/p>\n
Problema con las tipograf\u00edas<\/p>\n
En el dise\u00f1o impreso se puede utilizar cualquier tipograf\u00eda, pero el dise\u00f1o web normalmente solo muestra las tipograf\u00edas que el usuario tenga instaladas en su ordenador. M\u00e1s adelante veremos que existen diversas soluciones a este problema, por ejemplo poniendo el texto con el formato y la tipograf\u00eda deseada en im\u00e1genes, pero tendremos que tener en cuenta las limitaciones.<\/p>\n
Pixeles en vez de pulgadas y cent\u00edmetros<\/p>\n
En el dise\u00f1o impreso se trabaja con pulgadas y cent\u00edmetros, pero en el dise\u00f1o web solo se trabaja con pixeles. As\u00ed pues, dependiendo de la resoluci\u00f3n de la pantalla (pixeles por pulgada o dpi) una misma imagen se puede ver mayor o menor. Las medidas de los dise\u00f1os web siempre son p\u00edxeles, aunque en ocasiones se pueden utilizar porcentajes de pantalla o porcentajes de \u00e1rea (se explica m\u00e1s adelante).
Si les cuesta dise\u00f1ar con pixeles, pueden utilizar la resoluci\u00f3n 72 dpi, que es la resoluci\u00f3n est\u00e1ndar de la mayor\u00eda de pantallas de ordenador. Dise\u00f1ando a esta resoluci\u00f3n, la mayor\u00eda de usuarios ver\u00e1n las im\u00e1genes y elementos de su dise\u00f1o al mismo tama\u00f1o que en su pantalla.<\/p>\n
P\u00edxel: <\/strong>la menor unidad de medida en la pantalla (un punto de luz). La mayor\u00eda de pantallas tienen una resoluci\u00f3n de 72 p\u00edxeles por pulgada o dpi.<\/p>\nArchivos peque\u00f1os en vez de grandes<\/p>\n
El dise\u00f1o impreso se trabaja con altas resoluciones de archivos y se procura mantener la mejor calidad en las im\u00e1genes y originales, mientras que en el dise\u00f1o web se trabaja con resoluciones bajas para ahorrar recursos del servidor y permitir que el usuario abra la p\u00e1gina r\u00e1pidamente. En dise\u00f1o web, debemos optimizar las im\u00e1genes y animaciones, es decir, bajar la resoluci\u00f3n lo m\u00e1s posible sin perder una calidad significativa. El peso (calculado en Kb o Mb) de una p\u00e1gina web se calcula como la suma de todos pesos de los documentos que abre una p\u00e1gina web (im\u00e1genes, 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\u00e1gina tarda un segundo m\u00e1s a descargarse y abrirse.<\/p>\n
RGB en vez de CMYK<\/p>\n
En el dise\u00f1o impreso se trabaja colores substractivos o CMYK, en cambio en el dise\u00f1o web solo se trabaja con colores aditivos o RGB.
El color es un error com\u00fan de los dise\u00f1adores gr\u00e1ficos cuando quieren dise\u00f1ar para web. En la escuela de dise\u00f1o te ense\u00f1an a utilizar siempre CMYK para que la impresi\u00f3n quede bien, pero en el mundo web, es todo lo contrario, las pantallas emiten luz \u00fanicamente interpretan datos RGB o aditivos.<\/p>\n
Posible editar despu\u00e9s de publicar<\/p>\n
El dise\u00f1o impreso no se puede modificar despu\u00e9s de la impresi\u00f3n. Por suerte el dise\u00f1o web se puede modificar despu\u00e9s de la publicaci\u00f3n, se pueden corregir errores, completar contenido no introducido inicialmente, o mantener actualizada la informaci\u00f3n. En este sentido, es mejor evitar dise\u00f1os que no sean flexibles, para que en el futuro el dise\u00f1o se pueda adaptar a diferentes tama\u00f1os de los contenidos, sin perjudicar la est\u00e9tica del conjunto.<\/p>\n
<\/p>\n
<\/p>\n
<\/p>\n
Usabilidad<\/h1>\n\nUn atributo determinante para la calidad de un sitio web es suusabilidad<\/strong>. Se trata de lograr que los visitantes encuentren r\u00e1pidamente aquello que buscan, con el m\u00ednimo esfuerzo por su parte. Sea cual sea el contenido o la finalidad de nuestra web, navegar por ella debe resultar una experiencia gratificante.<\/p>\nWeb usable: <\/strong>es aquella en la que los usuarios pueden interactuar de la forma m\u00e1s f\u00e1cil, c\u00f3moda, evidente y segura posible. Una web usable denota calidad, genera confianza y nos diferencia positivamente de otras alternativas.<\/p>\nLos usuarios pasan mucho menos tiempo visitando una p\u00e1gina web de lo que sus dise\u00f1adores desear\u00edan, por lo que hay que facilitarles las cosas al m\u00e1ximo. Cuando un usuario encuentra que la navegaci\u00f3n por una web es c\u00f3moda, agradable y \u00fatil, existen mayores probabilidades de que la visite de nuevo en el futuro.<\/p>\n
Lograr un buen nivel de usabilidad requiere combinar h\u00e1bilmente una serie de elementos: tecnolog\u00eda, dise\u00f1o, contenidos\u2026 Aunque no existen recetas universales, he aqu\u00ed algunos criterios a tener en cuenta:<\/p>\n
\n- >Crear una jerarqu\u00eda visual clara en cada p\u00e1gina. <\/strong>Debe percibirse a simple vista cu\u00e1l es la importancia de los distintos contenidos, qu\u00e9 relaci\u00f3n existe entre ellos, a qu\u00e9 tema o bloque pertenecen… La colocaci\u00f3n, el tama\u00f1o, la tipograf\u00eda o los colores de los textos y de los dem\u00e1s elementos de la p\u00e1gina son los principales recursos a utilizar.<\/li>\n
- >Dar el control al usuario. <\/strong>\u00c9ste debe sentir en todo momento que sabe d\u00f3nde est\u00e1 y que controla la situaci\u00f3n. Nada importante deber\u00eda situarse a m\u00e1s de dos clics de distancia. Los t\u00edtulos y contenidos de cada apartado deben ser claros y visibles. Tambi\u00e9n son muy \u00fatiles los men\u00fas de situaci\u00f3n, la navegaci\u00f3n por pesta\u00f1as, las opciones de volver atr\u00e1s o deshacer una acci\u00f3n, la visualizaci\u00f3n clara de las distintos pasos de un proceso (la compra on-line, por ejemplo).<\/li>\n
- >Facilitar la interacci\u00f3n. <\/strong>Suele ser muy positivo que una web permita al usuario \u201chacer cosas\u201d: clicar, desplegar, abrir, mover… En todo caso, el acceso y el uso de cualquier elemento de interacci\u00f3n debe ser intuitivo, r\u00e1pido y f\u00e1cil. No podemos permitirnos frustrar al usuario o hacerle perder el tiempo.<\/li>\n
- >Aprovechar las convenciones y llamar a las cosas por su nombre. <\/strong>La mayor\u00eda de usuarios tienen ciertas expectativas derivadas de su experiencia navegando por internet. Saben, m\u00e1s o menos, d\u00f3nde se sit\u00faan los men\u00fas, c\u00f3mo funciona un buscador, para qu\u00e9 sirven determinados botones, qu\u00e9 significan ciertos iconos o expresiones, etc. As\u00ed, hay que situar los contenidos donde el usuario espera que est\u00e9n y hacer que las cosas funcionen como se espera que lo hagan. Si queremos sorprender o hacer \u201calgo diferente\u201d, hemos de asegurarnos de que ello no suponga una complicaci\u00f3n innecesaria.<\/li>\n
- >Simplificar<\/strong>. Hay que evitar la informaci\u00f3n 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\u00e1genes y animaciones, y crearemos men\u00fas claros, bien estructurados y desplegables si hay muchas opciones a mostrar.<\/li>\n<\/ul>\n
No hay que entender la usabilidad como un lastre para nuestra creatividad. Podemos innovar y ser originales mientras no olvidemos quenuestro dise\u00f1o debe estar centrado en el usuario<\/strong>. \u00c9l es el verdadero protagonista y hemos de asegurarnos de que comprender\u00e1 y podr\u00e1 seguirnos el juego en todo momento.<\/p>\nOtros aspectos a tener en cuenta<\/strong>:<\/p>\n\n- >Situar los elementos importantes siempre a mano.<\/li>\n
- >Los usuarios no siempre entran por la p\u00e1gina principal (poner men\u00fas de navegaci\u00f3n en todas las p\u00e1ginas).<\/li>\n
- >Dejar claro qu\u00e9 elementos son enlaces y cu\u00e1les no.<\/li>\n
- >A\u00f1adir un buscador o un mapa del sitio web si \u00e9ste tiene mucho contenido i\/o p\u00e1ginas.<\/li>\n
- >Enlazar a cualquier informaci\u00f3n en menos de 3 clicks (o enlaces)<\/li>\n
- >Mantener una coherencia en el dise\u00f1o de toda la p\u00e1gina.<\/li>\n
- >Seguir las reglas b\u00e1sicas del buen dise\u00f1o: selecci\u00f3n de colores, tipograf\u00edas, regla de los tercios\u2026<\/li>\n
- >No distraer el usuario con excesivas animaciones o elementos que parpadean.<\/li>\n
- >Intentar que los contenidos no tengan faltas de ortograf\u00eda.<\/li>\n
- >No abrir nuevas ventanas del navegador innecesariamente…<\/li>\n<\/ul>\n
Ejemplo web que intenta romper todas las reglas de la usabilidad:http:\/\/theworldsworstwebsiteever.com\/<\/a>
(listado de errores del web:http:\/\/theworldsworstwebsiteever.com\/new_page_1.htm<\/a>).
Otro sitio con listados de dise\u00f1os web que se deben evitar copiar:http:\/\/www.javajan.com\/?id=271-guia<\/a><\/p>\n<\/p><\/div>\n <\/p>\n<\/p><\/div>\n
<\/p>\n
<\/p>\n
<\/p>\n
Arquitectura de un sitio web<\/h1>\n\nAlgunos dicen que dise\u00f1ar para web es m\u00e1s parecido a la arquitectura que al dise\u00f1o gr\u00e1fico. Como en una casa, antes de escoger los muebles, el color de las cortinas o la iluminaci\u00f3n, es importante saber c\u00f3mo estar\u00e1 estructurada la planta, c\u00f3mo ser\u00e1 el sal\u00f3n, donde estar\u00e1n las habitaciones, como se acceder\u00e1 a ellas, donde estar\u00e1n las ventanas… Asimismo en la web, si la estructura no es s\u00f3lida e intuitiva, el arte de la p\u00e1gina no sirve para nada.<\/p>\n
Antes de empezar a trabajar en el aspecto puramente est\u00e9tico de las p\u00e1ginas web, imaginando animaciones impresionantes y gr\u00e1ficos atractivos, es indispensables pensar en la estructura del sitio web. Para eso, fundamentalmente, tendremos que:<\/p>\n
\n- >Definir las secciones y p\u00e1ginas web que debe tener el sitio.<\/li>\n
- >Escoger las secciones o p\u00e1ginas a las que podremos acceder desde la p\u00e1gina principal (o de inicio).<\/li>\n
- >Decidir si alguna secci\u00f3n o p\u00e1gina tiene que destacar m\u00e1s respecto las dem\u00e1s.<\/li>\n
- >Distribuir el contenido a presentar entre las distintas secciones y p\u00e1ginas.<\/li>\n
- >Concretar las distintas v\u00edas de acceso a cada una de p\u00e1ginas web del sitio (es importante ofrecer m\u00faltiples maneras de acceder a la misma informaci\u00f3n).<\/li>\n
- >Especificar el n\u00famero de idiomas que dispondr\u00e1 el sitio web.<\/li>\n<\/ul>\n
Para ayudar a concretar la estructura final del sitio web, muchos dise\u00f1adores y programadores web recomiendan hacer un esquema a mano alzada, con post-its o con un simple programa de dise\u00f1o del ordenador, que nos permita realizar cambios f\u00e1cilmente a medida que redescubrimos mejores estructuras para nuestro sitio web.<\/p>\n
Ejemplo de la estructura de un sitio web en el que se detalla todas las p\u00e1ginas y el recorrido para acceder a ellas.<\/span><\/p>\nNormalmente, el contenido de un sitio web se estructura en diferentes p\u00e1ginas web, pero debemos mencionar una tendencia (no muy utilizada ni recomendada), llamada \u201cparallax scrolling\u201d, que estructura todos los contenidos en una solo p\u00e1gina web y permite que el usuario acceda a ellos mediante enlaces internos o bajando por la barra de desplazamiento o \u201cscroll\u201d.<\/p>\n
Ejemplos web de parallax scrolling: http:\/\/www.javajan.com\/news.php?id=277-guia<\/a><\/p>\n<\/p><\/div>\n <\/p>\n
<\/p>\n
<\/p>\n
Estructura de una p\u00e1gina web<\/h1>\n\nUna vez ya tengamos clara como estar\u00e1 estructurada la planta de la casa (sitio web a dise\u00f1ar), podemos empezar a dise\u00f1ar la estructura de cada habitaci\u00f3n (p\u00e1gina web), decidiendo donde pondremos los muebles (contenido) y la decoraci\u00f3n (elementos gr\u00e1ficos). Con especial esmero tendremos que estructurar el sal\u00f3n de la casa (p\u00e1gina principal), donde recibiremos a todos nuestros invitados (usuarios), para que sea lo m\u00e1s confortable posible (dise\u00f1o) pero tambi\u00e9n aporte el m\u00e1ximo de informaci\u00f3n sobre los anfitriones y sobre los contenidos de las distintas habitaciones (usabilidad).<\/p>\n
Para determinar la estructura de cada p\u00e1gina web, tendremos que definir (entre otros):<\/p>\n
\n- >Qu\u00e9 tipo de web quiere el cliente: tipo tarjeta de visita, tipo cat\u00e1logo, tipo anuncio de revista, tipo juego, una combinaci\u00f3n entre las anteriores…<\/li>\n
- >Qu\u00e9 tipo de informaci\u00f3n desea presentar el cliente: mucha imagen, mucha informaci\u00f3n escrita…<\/li>\n
- >Qu\u00e9 mensaje deber\u00eda de recibir el usuario cuando abra la p\u00e1gina principal.<\/li>\n
- >Hac\u00eda qu\u00e9 secciones del web se deber\u00eda sentir atra\u00eddo.<\/li>\n
- >Qu\u00e9 elementos comunes deben presentarse en todas las p\u00e1ginas (por ejemplo sistema de navegaci\u00f3n).<\/li>\n
- >Qu\u00e9 contenido espec\u00edfico deber\u00eda presentarse en cada p\u00e1gina.<\/li>\n<\/ul>\n
De todos modos, antes de empezar a dise\u00f1ar la estructura de una p\u00e1gina web, deber\u00edamos conocer las estructuras est\u00e1ndares utilizadas normalmente.<\/p>\n
<\/p>\n<\/p><\/div>\n
\nEstructuras est\u00e1ndares<\/h2>\n\nUno de los aspectos m\u00e1s importantes de las estructura de una p\u00e1gina web es decidir d\u00f3nde posicionaremos los men\u00fas de navegaci\u00f3n y enlaces a otras p\u00e1ginas web y d\u00f3nde posicionaremos el contenido que van a consultar los navegantes. Existen diversos tipos de estructuras est\u00e1ndares de p\u00e1ginas web que especifican la posici\u00f3n de los men\u00fas de navegaci\u00f3n y el contenido, manteni\u00e9ndose esta estructura y dise\u00f1o durante toda la navegaci\u00f3n por el sitio web.<\/p>\n
Sin que sea sorprendente, los men\u00fas de navegaci\u00f3n acostumbran a posicionarse en los m\u00e1rgenes de la p\u00e1gina, dejando los contenidos en el centro. Por defecto, las estructuras est\u00e1ndares posicionan los men\u00fas de navegaci\u00f3n arriba o en los laterales, pero tambi\u00e9n existen otras posibilidades:<\/p>\n
Bloque de navegaci\u00f3n a la izquierda:<\/p>\n
Permite presentar muchos men\u00fas o enlaces, pues cada l\u00ednea puede ser un enlace (por ejemplo, el men\u00fa de navegaci\u00f3n de esta gu\u00eda). Tampoco supone mucho problema que los men\u00fas se extiendan fuera de la pantalla, porque el usuario puede visualizarlos con la barra de desplazamiento vertical. Este m\u00e9todo es ideal si los men\u00fas son administrables, pues el dise\u00f1o no se ver\u00e1 muy afectado si aumentan o disminuyen el n\u00famero de enlaces.<\/p>\n
<\/a>Ejemplo de bloque de navegaci\u00f3n a la izquierda:guiadise\u00f1o.com<\/a><\/p>\nBloque de navegaci\u00f3n arriba:<\/p>\n
Ideal si el sitio web no tiene demasiadas secciones. Los men\u00fas se sit\u00faan en l\u00ednea y ocupan mucho espacio. Es f\u00e1cil si los men\u00fas se despliegan con otros submen\u00fas (es m\u00e1s f\u00e1cil la navegaci\u00f3n que si los submen\u00fas se abren lateralmente)<\/p>\n
<\/a>Ejemplo de bloque de navegaci\u00f3n arriba:http:\/\/www.apple.es<\/a><\/p>\nBloque de navegaci\u00f3n derecha:<\/p>\n
Las mismas ventajas que el men\u00fa a la izquierda pero menos usado.<\/p>\n
<\/a>Ejemplo de bloque de navegaci\u00f3n a la izquierda:http:\/\/www.narfstuff.co.uk<\/a><\/p>\nCombinaci\u00f3n de los anteriores:<\/p>\n
Si tenemos muchos enlaces a presentar, siempre podemos utilizar cualquier combinaci\u00f3n de los anteriores (arriba e izquierda; izquierda y derecha; arriba, izquierda y derecha;\u2026), sobre todo si los men\u00fas se pueden agrupar en dos o tres grandes grupos.<\/p>\n
<\/a>Ejemplo de combinaci\u00f3n de bloques:http:\/\/www.apple.es<\/a><\/p>\nPie de p\u00e1gina<\/p>\n
El pie de p\u00e1gina acostumbra a tener una gran importancia en las estructuras de los webs actuales, donde se pueden repetir los men\u00fas de navegaci\u00f3n (para que el usuario no deba subir por la p\u00e1gina), situar los enlaces alaviso legal<\/em>,copyright<\/em>, redes sociales: facebook, RSS, twitter o los datos de direcci\u00f3n y contacto.<\/p>\nEjemplos de pie de p\u00e1gina:<\/p>\n
<\/a>Ejemplo de pie de p\u00e1gina:http:\/\/bristolarchiverecords.com<\/a><\/p>\n<\/a>Ejemplo de pie de p\u00e1gina:http:\/\/yuruinspires.com<\/a><\/p>\n<\/a>Ejemplo de pie de p\u00e1gina:http:\/\/splitdadiz.com<\/a><\/p>\n<\/a>Ejemplo de pie de p\u00e1gina:http:\/\/www.mecannical.com<\/a><\/p>\n<\/a>Ejemplo de pie de p\u00e1gina:http:\/\/bitsamppixels.com<\/a><\/p>\nOtros ejemplos web de pies de p\u00e1gina:http:\/\/www.javajan.com\/news.php?id=205-guia<\/a><\/p>\nP\u00e1gina principal<\/p>\n
La p\u00e1gina principal es un caso especial, para la cual no existe una estructura est\u00e1ndar. Aunque la p\u00e1gina principal tambi\u00e9n se puede estructurar de un modo est\u00e1ndar, en la mayor\u00eda de sitios web, la p\u00e1gina principal no se dise\u00f1a para presentar contenido, y m\u00e1s bien se imagina como escaparate de la empresa, en el que tambi\u00e9n se presentan los men\u00fas o enlaces a las diferentes p\u00e1ginas o secciones del web.<\/p>\n
Ejemplos de p\u00e1gina principal:<\/p>\n
<\/a>Ejemplo de p\u00e1gina principal:http:\/\/www.coullon.com<\/a><\/p>\n<\/a>Ejemplo de p\u00e1gina principal:http:\/\/www.luhsetea.com<\/a><\/p>\n<\/a>Ejemplo de p\u00e1gina principal:http:\/\/dotmick.com<\/a><\/p>\n<\/a>Ejemplo de p\u00e1gina principal:http:\/\/gnosh.co.uk<\/a><\/p>\n<\/a>Ejemplo de p\u00e1gina principal:http:\/\/wearecupcup.com<\/a><\/p>\n<\/a><\/p>\nEjemplo de p\u00e1gina principal:http:\/\/www.mcfarlanechangemanagement.com.au<\/a><\/p>\n<\/p><\/div>\n<\/p><\/div>\n <\/div>\n <\/div>\n\nDise\u00f1ando la estructura<\/h2>\n\nConociendo las estructuras web m\u00e1s utilizadas, ya podemos empezar a dibujar la estructura espec\u00edfica de nuestra p\u00e1gina web, dibujando y posicionando a nuestro gusto los bloques de men\u00fas, contenido, gr\u00e1ficos, y los sub-bloques dentro de cada uno de los anteriores.<\/p>\n
Cada dise\u00f1ador tendr\u00e1 su propio m\u00e9todo para plasmar la estructura imaginada de una p\u00e1gina web a la pantalla de su ordenador. Aqu\u00ed transcribimos el m\u00e9todo de trabajo espec\u00edfico de un dise\u00f1ador:\u201cComienzo por bosquejar algunos posibles dise\u00f1os sobre papel. Despu\u00e9s de unos pocos de estos bocetos, decido cual me gusta m\u00e1s o cual se adapta mejor a los requisitos del cliente y el salto al Photoshop (o freehand), y uso la herramienta de rect\u00e1ngulo para bloquear las \u00e1reas que he marcado en mi papel. Una vez que he definido mi dise\u00f1o, experimento con los colores de fondo y de los rect\u00e1ngulos hasta tener un esquema de color s\u00f3lido. Y sigo trabajando con p\u00edxeles hasta que, finalmente, tengo un borrador para mostrar al cliente.\u201d<\/em><\/p>\nEjemplo de dise\u00f1o de la estructura:<\/p>\n
<\/a><\/p>\nEjemplo de dise\u00f1o para la p\u00e1gina:http:\/\/www.ginecologiavhebron.com<\/a>(dise\u00f1o deDeumonforte<\/em>y programaci\u00f3n Javajan)<\/p>\nTrabajando con bloques rectangulares<\/p>\n
La estructura de una p\u00e1gina web se sub-divide en bloques rectangulares, dentro de los cuales vamos a posicionar los diferentes elementos de dise\u00f1o o contenido. M\u00e1s tarde, al aplicar dise\u00f1o sobre estos rect\u00e1ngulos podemos enmascararlos eliminando los bordes o utilizando formas curvas, pero es importante conocer que cualquier estructura web est\u00e1 basada en rect\u00e1ngulos horizontales (no en diagonal).<\/p>\n
A pesar de todo, el dise\u00f1o de la estructura web no finaliza al posicionar los diferentes bloques, porque tenemos de definir como se adaptaran y comportaran en funci\u00f3n de la resoluci\u00f3n de pantalla.<\/p>\n<\/p><\/div>\n<\/p><\/div>\n
<\/p>\n
<\/p>\n
<\/p>\n
Adaptaci\u00f3n de la estructura en funci\u00f3n de la resoluci\u00f3n<\/h1>\nAdaptaci\u00f3n del bloque principal<\/h2>\n\nBloque principal: <\/strong>recuadro exterior que engloba toda la estructura de p\u00e1gina web, es decir, no existe ning\u00fan recuadro o bloque secundario que rebase el bloque o recuadro principal.<\/p>\nBloque secundario: <\/strong>cada uno de los recuadros que componen el bloque o recuadro principal.<\/p>\nExisten tres maneras distintas de adaptar el bloque principal en funci\u00f3n del tama\u00f1o de la pantalla:<\/p>\n
Fijo:<\/p>\n
El bloque se dise\u00f1a con un tama\u00f1o fijo que no se va a modificar en funci\u00f3n del tama\u00f1o de la pantalla. Es el m\u00e1s f\u00e1cil de dise\u00f1ar y maquetar porqu\u00e9 los elementos del dise\u00f1o o bloques secundarios siempre estar\u00e1n en la misma posici\u00f3n y mantendr\u00e1n el mismo ancho.<\/p>\n
Ejemplo p\u00e1gina web de estructura fija, mostrada en pantallas de distinta resoluci\u00f3n. A resoluciones grandes aparecen muchos espacios en blanco; a resoluciones peque\u00f1as el dise\u00f1o queda cortado<\/p>\n
Si escogemos una estructura principal fija, tenemos que pensar qu\u00e9 tama\u00f1o en pixeles vamos a utilizar. Seg\u00fan las estad\u00edsticas actuales (http:\/\/www.w3schools.com\/browsers\/browsers_display.asp<\/a>), el 98% de usuarios tienen resoluciones igual o superiores a 1024×768, aunque empiezan a crecer el n\u00famero de usuarios con pantallas inferiores a 800×600 debido a la navegaci\u00f3n con tabletas y tel\u00e9fonos.<\/p>\nSi dise\u00f1amos un bloque principal fijo, podr\u00eda ser bueno tomar como referencia la resoluci\u00f3n de 1024×768, aunque el ancho del bloque principal deber\u00eda de ser m\u00e1s peque\u00f1o, pues el navegador se necesita algunos pixeles para los men\u00fas, m\u00e1rgenes y barras de desplazamiento. As\u00ed pues, deber\u00edamos de dise\u00f1ar un bloque principal de un ancho m\u00e1ximo de 990 pixeles. Si queremos que todo el contenido aparezca en la pantalla y no aparezcan barras de desplazamiento verticales, la altura m\u00e1xima del dise\u00f1o deber\u00eda de ser entre 600 y 650 pixeles (depender\u00e1 mucho del espacio que ocupen los men\u00fas del navegador del usuario).<\/p>\n
Normalmente, la estructura principal fija se centra en la pantalla para resoluciones grandes, aunque tambi\u00e9n se puede alinear a la izquierda o a la derecha.<\/p>\n
Fluido o l\u00edquido:<\/p>\n
Con independencia de la resoluci\u00f3n de una pantalla, un bloque principal fluido ocupa un porcentaje horizontal de la pantalla, normalmente el 100% (aunque tambi\u00e9n puede ocupar el 90% centrado, o alineado a la izquierda o derecha). Normalmente, al disminuir la resoluci\u00f3n o tama\u00f1o de una pantalla, el bloque fluido se estrecha horizontalmente pero se alarga verticalmente para poder presentar toda la informaci\u00f3n 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\u00f3n fija o fluida (se ver\u00e1 en el siguiente punto).<\/p>\n
Dise\u00f1ar y maquetar una estructura fluida es m\u00e1s complejo, pues se tienen que prever c\u00f3mo se van a comportar cada uno de los bloques secundarios en su interior. Bien dise\u00f1ada, una estructura fluida se puede adaptar desde las resoluciones de pantalla m\u00e1s grandes hasta las resoluciones de pantallas m\u00e1s peque\u00f1as de los tel\u00e9fonos, aunque para \u00e9ste \u00faltimo caso se recomiendan distintas estructuras, como se ver\u00e1 a continuaci\u00f3n.<\/p>\n
Ejemplo de adaptaci\u00f3n fluida (en este caso, todos los bloques secundarios tambi\u00e9n son fluidos):<\/p>\n
<\/p>\n
Dos buenos art\u00edculo sobre dise\u00f1o fluido:
http:\/\/www.javajan.com\/news.php?id=225-guia<\/a> y http:\/\/www.javajan.com\/news.php?id=193-guia<\/a><\/p>\nEstructuras distintas – Dise\u00f1o sensible:<\/p>\n
El dise\u00f1o sensible (del ingl\u00e9s: responsive design) es una opci\u00f3n cada vez m\u00e1s utilizada en el dise\u00f1o web actual es crear estructuras del bloque principal distintas, reacomodando los contenidos en funci\u00f3n de la resoluci\u00f3n de la pantalla. Esto puede ser muy \u00fatil cuando consideremos el acceso a nuestro web a trav\u00e9s de tel\u00e9fonos, que tienen resoluciones de pantallas muy peque\u00f1as. Algunos navegadores para m\u00f3viles reestructuran el dise\u00f1o de los webs de un modo eficiente, pero si queremos asegurar la buena visualizaci\u00f3n y dise\u00f1o de nuestro web a cualquier resoluci\u00f3n, deberemos de crear varias estructuras en funci\u00f3n de la resoluci\u00f3n de la pantalla.<\/p>\n
En un dise\u00f1o sensible, no aparecer\u00e1n barras de desplazamiento horizontales (scroll) hasta resoluciones muy peque\u00f1as.<\/p>\n
Podemos decidir las medidas a las cuales se presentaran las diferentes estructuras del bloque principal en funci\u00f3n del dise\u00f1o planteado, pero tambi\u00e9n podemos determinarlas consultando las pantallas m\u00e1s utilizadas actualmente:<\/p>\n
Resoluciones de pantalla m\u00e1s utilizadas:
http:\/\/www.w3schools.com\/browsers\/browsers_display.asp<\/a>
Resoluciones de pantalla m\u00e1s utilizadas en tel\u00e9fonos m\u00f3viles:
http:\/\/deviceatlas.com\/resourcecentre\/Explore+DeviceAtlas+Data\/Data+Explorer#_\/<\/a><\/p>\nSi queremos optimizar recursos y dise\u00f1ar \u00fanicamente dos estructuras de web, una posible soluci\u00f3n ser\u00eda dise\u00f1ar 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\u00eda ser fija para pantallas mayores a 480 p\u00edxeles (iPhone) que se vuelva fluido para resoluciones menores, hasta las pantallas de los tel\u00e9fonos m\u00e1s peque\u00f1as (160 pixeles o menos). Es importante recordar que a todas estas medidas debemos restar 30 o 40 pixeles para que el dise\u00f1o no quede recortado por barras de desplazamiento o m\u00e1rgenes del navegador web.<\/p>\n
Buen art\u00edculo sobre dise\u00f1o web sobre m\u00f3viles:
http:\/\/www.circulodemaquetadores.com\/disenando-para-moviles-diseno-para-multiples-tamanos-de-pantalla\/<\/a>
Ventajas del web frente las aplicaciones y an\u00e1lisis de los distintas posibilidades de dise\u00f1o web para m\u00f3vil
http:\/\/www.javajan.com\/news.php?id=350-guia<\/a><\/p>\nEjemplo de estructuras distintas: a 800 pixeles existe una transici\u00f3n que camb\u00eda de una estructura de 3 columnas a una estructura de 2 columnas (manteniendo la mayor\u00eda de contenidos):<\/p>\n
<\/p>\n
Consultar tambi\u00e9n los diversos ejemplos web con distintas estructuras fluidas que presentamos y explicamos al final del cap\u00edtulo.<\/p>\n
Comparativa:<\/p>\n
Ventajas y desventajas de los tres modelos de adaptaci\u00f3n a las distintas resoluciones de pantalla:<\/p>\n
\n
Formularios web<\/h2>\nTablas<\/h2>\nAnimaciones<\/h2>\nOtros contenidos posibles<\/h2>\nNuevas posibilidades: CSS3 y HTML5<\/h2>\n10.- Dise\u00f1o de p\u00e1ginas web programadas
11.- Optimizaci\u00f3n para los buscadores (SEO)
Recomendaciones de Google<\/h1>\n12.- Presupuesto y entrega del dise\u00f1o al maquetador<\/h1>\n <\/span><\/h1>\nIntroducci\u00f3n<\/h1>\n\nHay dificultades que muchos dise\u00f1adores tienen para entender las importantes diferencias entre el dise\u00f1o impreso y el dise\u00f1o web, las limitaciones que presenta respecto al dise\u00f1o tradicional pero tambi\u00e9n las nuevas posibilidades que permiten formas ins\u00f3litas de expresi\u00f3n y comunicaci\u00f3n.<\/p>\n
Esta gu\u00eda est\u00e1 pensada para terminar con estas dificultades, para que cualquier dise\u00f1ador gr\u00e1fico, tenga o no experiencia t\u00e9cnica web, adquiera los conocimientos necesarios que le permitan dise\u00f1ar cualquier sitio o p\u00e1gina web, dando rienda suelta a su imaginaci\u00f3n y creatividad, explotando todas las posibilidades que ofrece este medio. Pero, al mismo tiempo ci\u00f1\u00e9ndose a las limitaciones tecnol\u00f3gicas del momento, para que ning\u00fan maquetador o programador competente jam\u00e1s mire su dise\u00f1o y le diga \u00abeso no se puede hacer\u00bb.<\/p>\n
Dicen que las modas van y vienen, pero que el buen dise\u00f1o es atemporal. Lamentablemente para los buenos dise\u00f1adores, las tecnolog\u00edas tambi\u00e9n van y vienen (o evolucionan) y los buenos dise\u00f1os se tienen de adaptar a la tecnolog\u00eda del momento, si no caducan.<\/p>\n
<\/p>\n
<\/p>\n
Vocabulario y definiciones indispensables<\/h1>\n\n\n- P\u00e1gina web: <\/strong>documento que forma parte de un sitio web, con un contenido que puede incluir texto, im\u00e1genes, elementos multimedia y enlaces para navegar a otras p\u00e1ginas web o contenidos.<\/li>\n
- Sitio web: <\/strong>colecci\u00f3n de p\u00e1ginas web relacionadas y comunes a un dominio de Internet o subdominio.<\/li>\n
- P\u00e1gina principal o home<\/em>: <\/strong>p\u00e1gina de entrada a un sitio web, normalmente con un dise\u00f1o mucho m\u00e1s trabajado, que presenta el sitio y las opciones de navegaci\u00f3n a las p\u00e1ginas o contenidos del sitio.<\/li>\n
- Enlace web: <\/strong>elemento de una p\u00e1gina web que, al clicarlo te lleva a otra p\u00e1gina web o a otra parte de la misma p\u00e1gina web.<\/li>\n
- Men\u00fa de navegaci\u00f3n: <\/strong>conjunto de enlaces web que reflejan la organizaci\u00f3n de los contenidos del sitio web y enlazan a cada una de sus p\u00e1ginas web.<\/li>\n
- Dominio de Internet: <\/strong>es un nombre \u00fanico 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\u00f1adores).<\/li>\n
- URL: <\/strong>cadena de caracteres con la cual se asigna una direcci\u00f3n \u00fanica a cada uno de los recursos de informaci\u00f3n disponibles en la Internet (p\u00e1ginas web y sus elementos: im\u00e1genes, hojas de estilos, elementos multimedia,\u2026). La URL de la p\u00e1gina principal normalmente es el nombre del dominio.<\/li>\n
- Servidor web: <\/strong>ordenador remoto que provee los datos solicitados por parte de los navegadores de otras computadoras. Las p\u00e1ginas web y dominios de Internet deben de ser alojadas en un servidor. Existen muchas empresas que poseen servidores.<\/li>\n
- Navegador web: <\/strong>aplicaci\u00f3n que interpreta el contenido de las p\u00e1ginas web y lo presenta en pantalla permitiendo al usuario interactuar. Ejemplos de navegador: Internet Explorer, Mozilla Firefox, Google Chrome, Safari… Al dise\u00f1ar una p\u00e1gina web, tenemos que tener en cuenta que los distintos navegadores pueden presentar nuestros dise\u00f1os con peque\u00f1as variaciones.<\/li>\n
- Resoluci\u00f3n de ventana web: <\/strong>n\u00famero de p\u00edxeles m\u00e1ximos horizontales y verticales disponibles para presentar una p\u00e1gina web. La resoluci\u00f3n vendr\u00e1 determinada por la resoluci\u00f3n de la pantalla del dispositivo y por el espacio que el navegador web deja para la presentaci\u00f3n. Las distintas resoluciones disponibles Internet limitaran en gran medida el dise\u00f1o web.\n
Ejemplos de pantalla ipad (1024 x 768) y iphone (640 x 480) mostrando la misma p\u00e1gina web, presenta un dise\u00f1o diferente para cada una de las resoluciones.<\/span><\/p>\n<\/li>\n- Dise\u00f1ador web: <\/strong>Profesional que utiliza programas de dise\u00f1o tradicional, como photoshop, freehand, ilustrator, indesign\u2026<\/li>\n
- Maquetador web: <\/strong>Profesional que maqueta los dise\u00f1os utilizando las codificaciones est\u00e1ndares (html, css, javascript\u2026), transformando los dise\u00f1os en p\u00e1ginas web.<\/li>\n
- Programador web: <\/strong>Profesional que programa las p\u00e1ginas web maquetadas (php, asp, jquery \u2026) para que presenten informaci\u00f3n de una base de datos, personalicen los contenidos, env\u00eden los formularios, interact\u00faen con el usuario\u2026<\/li>\n<\/ul>\n
<\/span><\/p>\n<\/p><\/div>\n<\/p><\/div>\nDiferencias b\u00e1sicas entre dise\u00f1o impreso
y dise\u00f1o web<\/h1>\n\nInteractuar en vez de mostrar<\/p>\n
El dise\u00f1o impreso est\u00e1 basado en ver, pero el dise\u00f1o web est\u00e1 basado en hacer.
La funci\u00f3n del dise\u00f1o tradicional es contar historias, la misi\u00f3n del dise\u00f1o digital es entablar conversaciones.
El soporte gr\u00e1fico se sostiene sobre relaciones espaciales y la experiencia web sobre relaciones temporales. El dise\u00f1o impreso es est\u00e1tico, en cambio, la experiencia de un sitio web se define por la interacci\u00f3n del usuario con dise\u00f1o y contenido. Por ejemplo, un usuario hace clic sobre la navegaci\u00f3n o se desplaza hacia abajo para leer una p\u00e1gina.
Un buen dise\u00f1o impreso tiene que entenderse y ser bonito, pero un buen dise\u00f1o web tiene que entenderse, facilitar la navegaci\u00f3n (usabilidad) y ser bonito. Normalmente se recomienda priorizar la usabilidad, despu\u00e9s el contenido y si queda tiempo el arte. Aunque esto no implica que el buen dise\u00f1o se deba sacrificar para ganar usabilidad, en esta gu\u00eda vamos a explicar c\u00f3mo hacerlos compatibles.<\/p>\n
Espacio y entorno indefinido en vez de definido<\/p>\n
El dise\u00f1o impreso se visualiza en espacio limitado pero el dise\u00f1o web se tiene que poder visualizar en m\u00faltiples espacios, adem\u00e1s el dise\u00f1o web se puede extender fuera de la pantalla (podemos que utilizar barras de desplazamiento o scrolling).
Cuando se dise\u00f1a para imprimir, el resultado va a ser exactamente igual o muy parecido al original que hemos dise\u00f1ado y guardado, en cambio, cuando se dise\u00f1a una web, debemos considerar factores externos de los cuales no tenemos ning\u00fan control (el usuario puede tener resoluciones de pantalla diferente o utilizar un navegador web distinto, adem\u00e1s de no tener las tipograf\u00edas utilizadas,\u2026).
El dise\u00f1o impreso se visualiza igual en cualquier revista, en cambio, los diferentes navegadores web pueden presentar los elementos del dise\u00f1o 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\u2026 sin que alguno muestre errores.<\/p>\n
Problema con las tipograf\u00edas<\/p>\n
En el dise\u00f1o impreso se puede utilizar cualquier tipograf\u00eda, pero el dise\u00f1o web normalmente solo muestra las tipograf\u00edas que el usuario tenga instaladas en su ordenador. M\u00e1s adelante veremos que existen diversas soluciones a este problema, por ejemplo poniendo el texto con el formato y la tipograf\u00eda deseada en im\u00e1genes, pero tendremos que tener en cuenta las limitaciones.<\/p>\n
Pixeles en vez de pulgadas y cent\u00edmetros<\/p>\n
En el dise\u00f1o impreso se trabaja con pulgadas y cent\u00edmetros, pero en el dise\u00f1o web solo se trabaja con pixeles. As\u00ed pues, dependiendo de la resoluci\u00f3n de la pantalla (pixeles por pulgada o dpi) una misma imagen se puede ver mayor o menor. Las medidas de los dise\u00f1os web siempre son p\u00edxeles, aunque en ocasiones se pueden utilizar porcentajes de pantalla o porcentajes de \u00e1rea (se explica m\u00e1s adelante).
Si les cuesta dise\u00f1ar con pixeles, pueden utilizar la resoluci\u00f3n 72 dpi, que es la resoluci\u00f3n est\u00e1ndar de la mayor\u00eda de pantallas de ordenador. Dise\u00f1ando a esta resoluci\u00f3n, la mayor\u00eda de usuarios ver\u00e1n las im\u00e1genes y elementos de su dise\u00f1o al mismo tama\u00f1o que en su pantalla.<\/p>\n
P\u00edxel: <\/strong>la menor unidad de medida en la pantalla (un punto de luz). La mayor\u00eda de pantallas tienen una resoluci\u00f3n de 72 p\u00edxeles por pulgada o dpi.<\/p>\nArchivos peque\u00f1os en vez de grandes<\/p>\n
El dise\u00f1o impreso se trabaja con altas resoluciones de archivos y se procura mantener la mejor calidad en las im\u00e1genes y originales, mientras que en el dise\u00f1o web se trabaja con resoluciones bajas para ahorrar recursos del servidor y permitir que el usuario abra la p\u00e1gina r\u00e1pidamente. En dise\u00f1o web, debemos optimizar las im\u00e1genes y animaciones, es decir, bajar la resoluci\u00f3n lo m\u00e1s posible sin perder una calidad significativa. El peso (calculado en Kb o Mb) de una p\u00e1gina web se calcula como la suma de todos pesos de los documentos que abre una p\u00e1gina web (im\u00e1genes, 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\u00e1gina tarda un segundo m\u00e1s a descargarse y abrirse.<\/p>\n
RGB en vez de CMYK<\/p>\n
En el dise\u00f1o impreso se trabaja colores substractivos o CMYK, en cambio en el dise\u00f1o web solo se trabaja con colores aditivos o RGB.
El color es un error com\u00fan de los dise\u00f1adores gr\u00e1ficos cuando quieren dise\u00f1ar para web. En la escuela de dise\u00f1o te ense\u00f1an a utilizar siempre CMYK para que la impresi\u00f3n quede bien, pero en el mundo web, es todo lo contrario, las pantallas emiten luz \u00fanicamente interpretan datos RGB o aditivos.<\/p>\n
Posible editar despu\u00e9s de publicar<\/p>\n
El dise\u00f1o impreso no se puede modificar despu\u00e9s de la impresi\u00f3n. Por suerte el dise\u00f1o web se puede modificar despu\u00e9s de la publicaci\u00f3n, se pueden corregir errores, completar contenido no introducido inicialmente, o mantener actualizada la informaci\u00f3n. En este sentido, es mejor evitar dise\u00f1os que no sean flexibles, para que en el futuro el dise\u00f1o se pueda adaptar a diferentes tama\u00f1os de los contenidos, sin perjudicar la est\u00e9tica del conjunto.<\/p>\n
<\/p>\n
<\/p>\n
<\/p>\n
Usabilidad<\/h1>\n\nUn atributo determinante para la calidad de un sitio web es suusabilidad<\/strong>. Se trata de lograr que los visitantes encuentren r\u00e1pidamente aquello que buscan, con el m\u00ednimo esfuerzo por su parte. Sea cual sea el contenido o la finalidad de nuestra web, navegar por ella debe resultar una experiencia gratificante.<\/p>\nWeb usable: <\/strong>es aquella en la que los usuarios pueden interactuar de la forma m\u00e1s f\u00e1cil, c\u00f3moda, evidente y segura posible. Una web usable denota calidad, genera confianza y nos diferencia positivamente de otras alternativas.<\/p>\nLos usuarios pasan mucho menos tiempo visitando una p\u00e1gina web de lo que sus dise\u00f1adores desear\u00edan, por lo que hay que facilitarles las cosas al m\u00e1ximo. Cuando un usuario encuentra que la navegaci\u00f3n por una web es c\u00f3moda, agradable y \u00fatil, existen mayores probabilidades de que la visite de nuevo en el futuro.<\/p>\n
Lograr un buen nivel de usabilidad requiere combinar h\u00e1bilmente una serie de elementos: tecnolog\u00eda, dise\u00f1o, contenidos\u2026 Aunque no existen recetas universales, he aqu\u00ed algunos criterios a tener en cuenta:<\/p>\n
\n- >Crear una jerarqu\u00eda visual clara en cada p\u00e1gina. <\/strong>Debe percibirse a simple vista cu\u00e1l es la importancia de los distintos contenidos, qu\u00e9 relaci\u00f3n existe entre ellos, a qu\u00e9 tema o bloque pertenecen… La colocaci\u00f3n, el tama\u00f1o, la tipograf\u00eda o los colores de los textos y de los dem\u00e1s elementos de la p\u00e1gina son los principales recursos a utilizar.<\/li>\n
- >Dar el control al usuario. <\/strong>\u00c9ste debe sentir en todo momento que sabe d\u00f3nde est\u00e1 y que controla la situaci\u00f3n. Nada importante deber\u00eda situarse a m\u00e1s de dos clics de distancia. Los t\u00edtulos y contenidos de cada apartado deben ser claros y visibles. Tambi\u00e9n son muy \u00fatiles los men\u00fas de situaci\u00f3n, la navegaci\u00f3n por pesta\u00f1as, las opciones de volver atr\u00e1s o deshacer una acci\u00f3n, la visualizaci\u00f3n clara de las distintos pasos de un proceso (la compra on-line, por ejemplo).<\/li>\n
- >Facilitar la interacci\u00f3n. <\/strong>Suele ser muy positivo que una web permita al usuario \u201chacer cosas\u201d: clicar, desplegar, abrir, mover… En todo caso, el acceso y el uso de cualquier elemento de interacci\u00f3n debe ser intuitivo, r\u00e1pido y f\u00e1cil. No podemos permitirnos frustrar al usuario o hacerle perder el tiempo.<\/li>\n
- >Aprovechar las convenciones y llamar a las cosas por su nombre. <\/strong>La mayor\u00eda de usuarios tienen ciertas expectativas derivadas de su experiencia navegando por internet. Saben, m\u00e1s o menos, d\u00f3nde se sit\u00faan los men\u00fas, c\u00f3mo funciona un buscador, para qu\u00e9 sirven determinados botones, qu\u00e9 significan ciertos iconos o expresiones, etc. As\u00ed, hay que situar los contenidos donde el usuario espera que est\u00e9n y hacer que las cosas funcionen como se espera que lo hagan. Si queremos sorprender o hacer \u201calgo diferente\u201d, hemos de asegurarnos de que ello no suponga una complicaci\u00f3n innecesaria.<\/li>\n
- >Simplificar<\/strong>. Hay que evitar la informaci\u00f3n 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\u00e1genes y animaciones, y crearemos men\u00fas claros, bien estructurados y desplegables si hay muchas opciones a mostrar.<\/li>\n<\/ul>\n
No hay que entender la usabilidad como un lastre para nuestra creatividad. Podemos innovar y ser originales mientras no olvidemos quenuestro dise\u00f1o debe estar centrado en el usuario<\/strong>. \u00c9l es el verdadero protagonista y hemos de asegurarnos de que comprender\u00e1 y podr\u00e1 seguirnos el juego en todo momento.<\/p>\nOtros aspectos a tener en cuenta<\/strong>:<\/p>\n\n- >Situar los elementos importantes siempre a mano.<\/li>\n
- >Los usuarios no siempre entran por la p\u00e1gina principal (poner men\u00fas de navegaci\u00f3n en todas las p\u00e1ginas).<\/li>\n
- >Dejar claro qu\u00e9 elementos son enlaces y cu\u00e1les no.<\/li>\n
- >A\u00f1adir un buscador o un mapa del sitio web si \u00e9ste tiene mucho contenido i\/o p\u00e1ginas.<\/li>\n
- >Enlazar a cualquier informaci\u00f3n en menos de 3 clicks (o enlaces)<\/li>\n
- >Mantener una coherencia en el dise\u00f1o de toda la p\u00e1gina.<\/li>\n
- >Seguir las reglas b\u00e1sicas del buen dise\u00f1o: selecci\u00f3n de colores, tipograf\u00edas, regla de los tercios\u2026<\/li>\n
- >No distraer el usuario con excesivas animaciones o elementos que parpadean.<\/li>\n
- >Intentar que los contenidos no tengan faltas de ortograf\u00eda.<\/li>\n
- >No abrir nuevas ventanas del navegador innecesariamente…<\/li>\n<\/ul>\n
Ejemplo web que intenta romper todas las reglas de la usabilidad:http:\/\/theworldsworstwebsiteever.com\/<\/a>
(listado de errores del web:http:\/\/theworldsworstwebsiteever.com\/new_page_1.htm<\/a>).
Otro sitio con listados de dise\u00f1os web que se deben evitar copiar:http:\/\/www.javajan.com\/?id=271-guia<\/a><\/p>\n<\/p><\/div>\n <\/p>\n<\/p><\/div>\n
<\/p>\n
<\/p>\n
<\/p>\n
Arquitectura de un sitio web<\/h1>\n\nAlgunos dicen que dise\u00f1ar para web es m\u00e1s parecido a la arquitectura que al dise\u00f1o gr\u00e1fico. Como en una casa, antes de escoger los muebles, el color de las cortinas o la iluminaci\u00f3n, es importante saber c\u00f3mo estar\u00e1 estructurada la planta, c\u00f3mo ser\u00e1 el sal\u00f3n, donde estar\u00e1n las habitaciones, como se acceder\u00e1 a ellas, donde estar\u00e1n las ventanas… Asimismo en la web, si la estructura no es s\u00f3lida e intuitiva, el arte de la p\u00e1gina no sirve para nada.<\/p>\n
Antes de empezar a trabajar en el aspecto puramente est\u00e9tico de las p\u00e1ginas web, imaginando animaciones impresionantes y gr\u00e1ficos atractivos, es indispensables pensar en la estructura del sitio web. Para eso, fundamentalmente, tendremos que:<\/p>\n
\n- >Definir las secciones y p\u00e1ginas web que debe tener el sitio.<\/li>\n
- >Escoger las secciones o p\u00e1ginas a las que podremos acceder desde la p\u00e1gina principal (o de inicio).<\/li>\n
- >Decidir si alguna secci\u00f3n o p\u00e1gina tiene que destacar m\u00e1s respecto las dem\u00e1s.<\/li>\n
- >Distribuir el contenido a presentar entre las distintas secciones y p\u00e1ginas.<\/li>\n
- >Concretar las distintas v\u00edas de acceso a cada una de p\u00e1ginas web del sitio (es importante ofrecer m\u00faltiples maneras de acceder a la misma informaci\u00f3n).<\/li>\n
- >Especificar el n\u00famero de idiomas que dispondr\u00e1 el sitio web.<\/li>\n<\/ul>\n
Para ayudar a concretar la estructura final del sitio web, muchos dise\u00f1adores y programadores web recomiendan hacer un esquema a mano alzada, con post-its o con un simple programa de dise\u00f1o del ordenador, que nos permita realizar cambios f\u00e1cilmente a medida que redescubrimos mejores estructuras para nuestro sitio web.<\/p>\n
Ejemplo de la estructura de un sitio web en el que se detalla todas las p\u00e1ginas y el recorrido para acceder a ellas.<\/span><\/p>\nNormalmente, el contenido de un sitio web se estructura en diferentes p\u00e1ginas web, pero debemos mencionar una tendencia (no muy utilizada ni recomendada), llamada \u201cparallax scrolling\u201d, que estructura todos los contenidos en una solo p\u00e1gina web y permite que el usuario acceda a ellos mediante enlaces internos o bajando por la barra de desplazamiento o \u201cscroll\u201d.<\/p>\n
Ejemplos web de parallax scrolling: http:\/\/www.javajan.com\/news.php?id=277-guia<\/a><\/p>\n<\/p><\/div>\n <\/p>\n
<\/p>\n
<\/p>\n
Estructura de una p\u00e1gina web<\/h1>\n\nUna vez ya tengamos clara como estar\u00e1 estructurada la planta de la casa (sitio web a dise\u00f1ar), podemos empezar a dise\u00f1ar la estructura de cada habitaci\u00f3n (p\u00e1gina web), decidiendo donde pondremos los muebles (contenido) y la decoraci\u00f3n (elementos gr\u00e1ficos). Con especial esmero tendremos que estructurar el sal\u00f3n de la casa (p\u00e1gina principal), donde recibiremos a todos nuestros invitados (usuarios), para que sea lo m\u00e1s confortable posible (dise\u00f1o) pero tambi\u00e9n aporte el m\u00e1ximo de informaci\u00f3n sobre los anfitriones y sobre los contenidos de las distintas habitaciones (usabilidad).<\/p>\n
Para determinar la estructura de cada p\u00e1gina web, tendremos que definir (entre otros):<\/p>\n
\n- >Qu\u00e9 tipo de web quiere el cliente: tipo tarjeta de visita, tipo cat\u00e1logo, tipo anuncio de revista, tipo juego, una combinaci\u00f3n entre las anteriores…<\/li>\n
- >Qu\u00e9 tipo de informaci\u00f3n desea presentar el cliente: mucha imagen, mucha informaci\u00f3n escrita…<\/li>\n
- >Qu\u00e9 mensaje deber\u00eda de recibir el usuario cuando abra la p\u00e1gina principal.<\/li>\n
- >Hac\u00eda qu\u00e9 secciones del web se deber\u00eda sentir atra\u00eddo.<\/li>\n
- >Qu\u00e9 elementos comunes deben presentarse en todas las p\u00e1ginas (por ejemplo sistema de navegaci\u00f3n).<\/li>\n
- >Qu\u00e9 contenido espec\u00edfico deber\u00eda presentarse en cada p\u00e1gina.<\/li>\n<\/ul>\n
De todos modos, antes de empezar a dise\u00f1ar la estructura de una p\u00e1gina web, deber\u00edamos conocer las estructuras est\u00e1ndares utilizadas normalmente.<\/p>\n
<\/p>\n<\/p><\/div>\n
\nEstructuras est\u00e1ndares<\/h2>\n\nUno de los aspectos m\u00e1s importantes de las estructura de una p\u00e1gina web es decidir d\u00f3nde posicionaremos los men\u00fas de navegaci\u00f3n y enlaces a otras p\u00e1ginas web y d\u00f3nde posicionaremos el contenido que van a consultar los navegantes. Existen diversos tipos de estructuras est\u00e1ndares de p\u00e1ginas web que especifican la posici\u00f3n de los men\u00fas de navegaci\u00f3n y el contenido, manteni\u00e9ndose esta estructura y dise\u00f1o durante toda la navegaci\u00f3n por el sitio web.<\/p>\n
Sin que sea sorprendente, los men\u00fas de navegaci\u00f3n acostumbran a posicionarse en los m\u00e1rgenes de la p\u00e1gina, dejando los contenidos en el centro. Por defecto, las estructuras est\u00e1ndares posicionan los men\u00fas de navegaci\u00f3n arriba o en los laterales, pero tambi\u00e9n existen otras posibilidades:<\/p>\n
Bloque de navegaci\u00f3n a la izquierda:<\/p>\n
Permite presentar muchos men\u00fas o enlaces, pues cada l\u00ednea puede ser un enlace (por ejemplo, el men\u00fa de navegaci\u00f3n de esta gu\u00eda). Tampoco supone mucho problema que los men\u00fas se extiendan fuera de la pantalla, porque el usuario puede visualizarlos con la barra de desplazamiento vertical. Este m\u00e9todo es ideal si los men\u00fas son administrables, pues el dise\u00f1o no se ver\u00e1 muy afectado si aumentan o disminuyen el n\u00famero de enlaces.<\/p>\n
<\/a>Ejemplo de bloque de navegaci\u00f3n a la izquierda:guiadise\u00f1o.com<\/a><\/p>\nBloque de navegaci\u00f3n arriba:<\/p>\n
Ideal si el sitio web no tiene demasiadas secciones. Los men\u00fas se sit\u00faan en l\u00ednea y ocupan mucho espacio. Es f\u00e1cil si los men\u00fas se despliegan con otros submen\u00fas (es m\u00e1s f\u00e1cil la navegaci\u00f3n que si los submen\u00fas se abren lateralmente)<\/p>\n
<\/a>Ejemplo de bloque de navegaci\u00f3n arriba:http:\/\/www.apple.es<\/a><\/p>\nBloque de navegaci\u00f3n derecha:<\/p>\n
Las mismas ventajas que el men\u00fa a la izquierda pero menos usado.<\/p>\n
<\/a>Ejemplo de bloque de navegaci\u00f3n a la izquierda:http:\/\/www.narfstuff.co.uk<\/a><\/p>\nCombinaci\u00f3n de los anteriores:<\/p>\n
Si tenemos muchos enlaces a presentar, siempre podemos utilizar cualquier combinaci\u00f3n de los anteriores (arriba e izquierda; izquierda y derecha; arriba, izquierda y derecha;\u2026), sobre todo si los men\u00fas se pueden agrupar en dos o tres grandes grupos.<\/p>\n
<\/a>Ejemplo de combinaci\u00f3n de bloques:http:\/\/www.apple.es<\/a><\/p>\nPie de p\u00e1gina<\/p>\n
El pie de p\u00e1gina acostumbra a tener una gran importancia en las estructuras de los webs actuales, donde se pueden repetir los men\u00fas de navegaci\u00f3n (para que el usuario no deba subir por la p\u00e1gina), situar los enlaces alaviso legal<\/em>,copyright<\/em>, redes sociales: facebook, RSS, twitter o los datos de direcci\u00f3n y contacto.<\/p>\nEjemplos de pie de p\u00e1gina:<\/p>\n
<\/a>Ejemplo de pie de p\u00e1gina:http:\/\/bristolarchiverecords.com<\/a><\/p>\n<\/a>Ejemplo de pie de p\u00e1gina:http:\/\/yuruinspires.com<\/a><\/p>\n<\/a>Ejemplo de pie de p\u00e1gina:http:\/\/splitdadiz.com<\/a><\/p>\n<\/a>Ejemplo de pie de p\u00e1gina:http:\/\/www.mecannical.com<\/a><\/p>\n<\/a>Ejemplo de pie de p\u00e1gina:http:\/\/bitsamppixels.com<\/a><\/p>\nOtros ejemplos web de pies de p\u00e1gina:http:\/\/www.javajan.com\/news.php?id=205-guia<\/a><\/p>\nP\u00e1gina principal<\/p>\n
La p\u00e1gina principal es un caso especial, para la cual no existe una estructura est\u00e1ndar. Aunque la p\u00e1gina principal tambi\u00e9n se puede estructurar de un modo est\u00e1ndar, en la mayor\u00eda de sitios web, la p\u00e1gina principal no se dise\u00f1a para presentar contenido, y m\u00e1s bien se imagina como escaparate de la empresa, en el que tambi\u00e9n se presentan los men\u00fas o enlaces a las diferentes p\u00e1ginas o secciones del web.<\/p>\n
Ejemplos de p\u00e1gina principal:<\/p>\n
<\/a>Ejemplo de p\u00e1gina principal:http:\/\/www.coullon.com<\/a><\/p>\n<\/a>Ejemplo de p\u00e1gina principal:http:\/\/www.luhsetea.com<\/a><\/p>\n<\/a>Ejemplo de p\u00e1gina principal:http:\/\/dotmick.com<\/a><\/p>\n<\/a>Ejemplo de p\u00e1gina principal:http:\/\/gnosh.co.uk<\/a><\/p>\n<\/a>Ejemplo de p\u00e1gina principal:http:\/\/wearecupcup.com<\/a><\/p>\n<\/a><\/p>\nEjemplo de p\u00e1gina principal:http:\/\/www.mcfarlanechangemanagement.com.au<\/a><\/p>\n<\/p><\/div>\n<\/p><\/div>\n <\/div>\n <\/div>\n\nDise\u00f1ando la estructura<\/h2>\n\nConociendo las estructuras web m\u00e1s utilizadas, ya podemos empezar a dibujar la estructura espec\u00edfica de nuestra p\u00e1gina web, dibujando y posicionando a nuestro gusto los bloques de men\u00fas, contenido, gr\u00e1ficos, y los sub-bloques dentro de cada uno de los anteriores.<\/p>\n
Cada dise\u00f1ador tendr\u00e1 su propio m\u00e9todo para plasmar la estructura imaginada de una p\u00e1gina web a la pantalla de su ordenador. Aqu\u00ed transcribimos el m\u00e9todo de trabajo espec\u00edfico de un dise\u00f1ador:\u201cComienzo por bosquejar algunos posibles dise\u00f1os sobre papel. Despu\u00e9s de unos pocos de estos bocetos, decido cual me gusta m\u00e1s o cual se adapta mejor a los requisitos del cliente y el salto al Photoshop (o freehand), y uso la herramienta de rect\u00e1ngulo para bloquear las \u00e1reas que he marcado en mi papel. Una vez que he definido mi dise\u00f1o, experimento con los colores de fondo y de los rect\u00e1ngulos hasta tener un esquema de color s\u00f3lido. Y sigo trabajando con p\u00edxeles hasta que, finalmente, tengo un borrador para mostrar al cliente.\u201d<\/em><\/p>\nEjemplo de dise\u00f1o de la estructura:<\/p>\n
<\/a><\/p>\nEjemplo de dise\u00f1o para la p\u00e1gina:http:\/\/www.ginecologiavhebron.com<\/a>(dise\u00f1o deDeumonforte<\/em>y programaci\u00f3n Javajan)<\/p>\nTrabajando con bloques rectangulares<\/p>\n
La estructura de una p\u00e1gina web se sub-divide en bloques rectangulares, dentro de los cuales vamos a posicionar los diferentes elementos de dise\u00f1o o contenido. M\u00e1s tarde, al aplicar dise\u00f1o sobre estos rect\u00e1ngulos podemos enmascararlos eliminando los bordes o utilizando formas curvas, pero es importante conocer que cualquier estructura web est\u00e1 basada en rect\u00e1ngulos horizontales (no en diagonal).<\/p>\n
A pesar de todo, el dise\u00f1o de la estructura web no finaliza al posicionar los diferentes bloques, porque tenemos de definir como se adaptaran y comportaran en funci\u00f3n de la resoluci\u00f3n de pantalla.<\/p>\n<\/p><\/div>\n<\/p><\/div>\n
<\/p>\n
<\/p>\n
<\/p>\n
Adaptaci\u00f3n de la estructura en funci\u00f3n de la resoluci\u00f3n<\/h1>\nAdaptaci\u00f3n del bloque principal<\/h2>\n\nBloque principal: <\/strong>recuadro exterior que engloba toda la estructura de p\u00e1gina web, es decir, no existe ning\u00fan recuadro o bloque secundario que rebase el bloque o recuadro principal.<\/p>\nBloque secundario: <\/strong>cada uno de los recuadros que componen el bloque o recuadro principal.<\/p>\nExisten tres maneras distintas de adaptar el bloque principal en funci\u00f3n del tama\u00f1o de la pantalla:<\/p>\n
Fijo:<\/p>\n
El bloque se dise\u00f1a con un tama\u00f1o fijo que no se va a modificar en funci\u00f3n del tama\u00f1o de la pantalla. Es el m\u00e1s f\u00e1cil de dise\u00f1ar y maquetar porqu\u00e9 los elementos del dise\u00f1o o bloques secundarios siempre estar\u00e1n en la misma posici\u00f3n y mantendr\u00e1n el mismo ancho.<\/p>\n
Ejemplo p\u00e1gina web de estructura fija, mostrada en pantallas de distinta resoluci\u00f3n. A resoluciones grandes aparecen muchos espacios en blanco; a resoluciones peque\u00f1as el dise\u00f1o queda cortado<\/p>\n
Si escogemos una estructura principal fija, tenemos que pensar qu\u00e9 tama\u00f1o en pixeles vamos a utilizar. Seg\u00fan las estad\u00edsticas actuales (http:\/\/www.w3schools.com\/browsers\/browsers_display.asp<\/a>), el 98% de usuarios tienen resoluciones igual o superiores a 1024×768, aunque empiezan a crecer el n\u00famero de usuarios con pantallas inferiores a 800×600 debido a la navegaci\u00f3n con tabletas y tel\u00e9fonos.<\/p>\nSi dise\u00f1amos un bloque principal fijo, podr\u00eda ser bueno tomar como referencia la resoluci\u00f3n de 1024×768, aunque el ancho del bloque principal deber\u00eda de ser m\u00e1s peque\u00f1o, pues el navegador se necesita algunos pixeles para los men\u00fas, m\u00e1rgenes y barras de desplazamiento. As\u00ed pues, deber\u00edamos de dise\u00f1ar un bloque principal de un ancho m\u00e1ximo de 990 pixeles. Si queremos que todo el contenido aparezca en la pantalla y no aparezcan barras de desplazamiento verticales, la altura m\u00e1xima del dise\u00f1o deber\u00eda de ser entre 600 y 650 pixeles (depender\u00e1 mucho del espacio que ocupen los men\u00fas del navegador del usuario).<\/p>\n
Normalmente, la estructura principal fija se centra en la pantalla para resoluciones grandes, aunque tambi\u00e9n se puede alinear a la izquierda o a la derecha.<\/p>\n
Fluido o l\u00edquido:<\/p>\n
Con independencia de la resoluci\u00f3n de una pantalla, un bloque principal fluido ocupa un porcentaje horizontal de la pantalla, normalmente el 100% (aunque tambi\u00e9n puede ocupar el 90% centrado, o alineado a la izquierda o derecha). Normalmente, al disminuir la resoluci\u00f3n o tama\u00f1o de una pantalla, el bloque fluido se estrecha horizontalmente pero se alarga verticalmente para poder presentar toda la informaci\u00f3n 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\u00f3n fija o fluida (se ver\u00e1 en el siguiente punto).<\/p>\n
Dise\u00f1ar y maquetar una estructura fluida es m\u00e1s complejo, pues se tienen que prever c\u00f3mo se van a comportar cada uno de los bloques secundarios en su interior. Bien dise\u00f1ada, una estructura fluida se puede adaptar desde las resoluciones de pantalla m\u00e1s grandes hasta las resoluciones de pantallas m\u00e1s peque\u00f1as de los tel\u00e9fonos, aunque para \u00e9ste \u00faltimo caso se recomiendan distintas estructuras, como se ver\u00e1 a continuaci\u00f3n.<\/p>\n
Ejemplo de adaptaci\u00f3n fluida (en este caso, todos los bloques secundarios tambi\u00e9n son fluidos):<\/p>\n
<\/p>\n
Dos buenos art\u00edculo sobre dise\u00f1o fluido:
http:\/\/www.javajan.com\/news.php?id=225-guia<\/a> y http:\/\/www.javajan.com\/news.php?id=193-guia<\/a><\/p>\nEstructuras distintas – Dise\u00f1o sensible:<\/p>\n
El dise\u00f1o sensible (del ingl\u00e9s: responsive design) es una opci\u00f3n cada vez m\u00e1s utilizada en el dise\u00f1o web actual es crear estructuras del bloque principal distintas, reacomodando los contenidos en funci\u00f3n de la resoluci\u00f3n de la pantalla. Esto puede ser muy \u00fatil cuando consideremos el acceso a nuestro web a trav\u00e9s de tel\u00e9fonos, que tienen resoluciones de pantallas muy peque\u00f1as. Algunos navegadores para m\u00f3viles reestructuran el dise\u00f1o de los webs de un modo eficiente, pero si queremos asegurar la buena visualizaci\u00f3n y dise\u00f1o de nuestro web a cualquier resoluci\u00f3n, deberemos de crear varias estructuras en funci\u00f3n de la resoluci\u00f3n de la pantalla.<\/p>\n
En un dise\u00f1o sensible, no aparecer\u00e1n barras de desplazamiento horizontales (scroll) hasta resoluciones muy peque\u00f1as.<\/p>\n
Podemos decidir las medidas a las cuales se presentaran las diferentes estructuras del bloque principal en funci\u00f3n del dise\u00f1o planteado, pero tambi\u00e9n podemos determinarlas consultando las pantallas m\u00e1s utilizadas actualmente:<\/p>\n
Resoluciones de pantalla m\u00e1s utilizadas:
http:\/\/www.w3schools.com\/browsers\/browsers_display.asp<\/a>
Resoluciones de pantalla m\u00e1s utilizadas en tel\u00e9fonos m\u00f3viles:
http:\/\/deviceatlas.com\/resourcecentre\/Explore+DeviceAtlas+Data\/Data+Explorer#_\/<\/a><\/p>\nSi queremos optimizar recursos y dise\u00f1ar \u00fanicamente dos estructuras de web, una posible soluci\u00f3n ser\u00eda dise\u00f1ar 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\u00eda ser fija para pantallas mayores a 480 p\u00edxeles (iPhone) que se vuelva fluido para resoluciones menores, hasta las pantallas de los tel\u00e9fonos m\u00e1s peque\u00f1as (160 pixeles o menos). Es importante recordar que a todas estas medidas debemos restar 30 o 40 pixeles para que el dise\u00f1o no quede recortado por barras de desplazamiento o m\u00e1rgenes del navegador web.<\/p>\n
Buen art\u00edculo sobre dise\u00f1o web sobre m\u00f3viles:
http:\/\/www.circulodemaquetadores.com\/disenando-para-moviles-diseno-para-multiples-tamanos-de-pantalla\/<\/a>
Ventajas del web frente las aplicaciones y an\u00e1lisis de los distintas posibilidades de dise\u00f1o web para m\u00f3vil
http:\/\/www.javajan.com\/news.php?id=350-guia<\/a><\/p>\nEjemplo de estructuras distintas: a 800 pixeles existe una transici\u00f3n que camb\u00eda de una estructura de 3 columnas a una estructura de 2 columnas (manteniendo la mayor\u00eda de contenidos):<\/p>\n
<\/p>\n
Consultar tambi\u00e9n los diversos ejemplos web con distintas estructuras fluidas que presentamos y explicamos al final del cap\u00edtulo.<\/p>\n
Comparativa:<\/p>\n
Ventajas y desventajas de los tres modelos de adaptaci\u00f3n a las distintas resoluciones de pantalla:<\/p>\n
\n
Animaciones<\/h2>\nOtros contenidos posibles<\/h2>\nNuevas posibilidades: CSS3 y HTML5<\/h2>\n10.- Dise\u00f1o de p\u00e1ginas web programadas
11.- Optimizaci\u00f3n para los buscadores (SEO)
Recomendaciones de Google<\/h1>\n12.- Presupuesto y entrega del dise\u00f1o al maquetador<\/h1>\n <\/span><\/h1>\nIntroducci\u00f3n<\/h1>\n\nHay dificultades que muchos dise\u00f1adores tienen para entender las importantes diferencias entre el dise\u00f1o impreso y el dise\u00f1o web, las limitaciones que presenta respecto al dise\u00f1o tradicional pero tambi\u00e9n las nuevas posibilidades que permiten formas ins\u00f3litas de expresi\u00f3n y comunicaci\u00f3n.<\/p>\n
Esta gu\u00eda est\u00e1 pensada para terminar con estas dificultades, para que cualquier dise\u00f1ador gr\u00e1fico, tenga o no experiencia t\u00e9cnica web, adquiera los conocimientos necesarios que le permitan dise\u00f1ar cualquier sitio o p\u00e1gina web, dando rienda suelta a su imaginaci\u00f3n y creatividad, explotando todas las posibilidades que ofrece este medio. Pero, al mismo tiempo ci\u00f1\u00e9ndose a las limitaciones tecnol\u00f3gicas del momento, para que ning\u00fan maquetador o programador competente jam\u00e1s mire su dise\u00f1o y le diga \u00abeso no se puede hacer\u00bb.<\/p>\n
Dicen que las modas van y vienen, pero que el buen dise\u00f1o es atemporal. Lamentablemente para los buenos dise\u00f1adores, las tecnolog\u00edas tambi\u00e9n van y vienen (o evolucionan) y los buenos dise\u00f1os se tienen de adaptar a la tecnolog\u00eda del momento, si no caducan.<\/p>\n
<\/p>\n
<\/p>\n
Vocabulario y definiciones indispensables<\/h1>\n\n\n- P\u00e1gina web: <\/strong>documento que forma parte de un sitio web, con un contenido que puede incluir texto, im\u00e1genes, elementos multimedia y enlaces para navegar a otras p\u00e1ginas web o contenidos.<\/li>\n
- Sitio web: <\/strong>colecci\u00f3n de p\u00e1ginas web relacionadas y comunes a un dominio de Internet o subdominio.<\/li>\n
- P\u00e1gina principal o home<\/em>: <\/strong>p\u00e1gina de entrada a un sitio web, normalmente con un dise\u00f1o mucho m\u00e1s trabajado, que presenta el sitio y las opciones de navegaci\u00f3n a las p\u00e1ginas o contenidos del sitio.<\/li>\n
- Enlace web: <\/strong>elemento de una p\u00e1gina web que, al clicarlo te lleva a otra p\u00e1gina web o a otra parte de la misma p\u00e1gina web.<\/li>\n
- Men\u00fa de navegaci\u00f3n: <\/strong>conjunto de enlaces web que reflejan la organizaci\u00f3n de los contenidos del sitio web y enlazan a cada una de sus p\u00e1ginas web.<\/li>\n
- Dominio de Internet: <\/strong>es un nombre \u00fanico 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\u00f1adores).<\/li>\n
- URL: <\/strong>cadena de caracteres con la cual se asigna una direcci\u00f3n \u00fanica a cada uno de los recursos de informaci\u00f3n disponibles en la Internet (p\u00e1ginas web y sus elementos: im\u00e1genes, hojas de estilos, elementos multimedia,\u2026). La URL de la p\u00e1gina principal normalmente es el nombre del dominio.<\/li>\n
- Servidor web: <\/strong>ordenador remoto que provee los datos solicitados por parte de los navegadores de otras computadoras. Las p\u00e1ginas web y dominios de Internet deben de ser alojadas en un servidor. Existen muchas empresas que poseen servidores.<\/li>\n
- Navegador web: <\/strong>aplicaci\u00f3n que interpreta el contenido de las p\u00e1ginas web y lo presenta en pantalla permitiendo al usuario interactuar. Ejemplos de navegador: Internet Explorer, Mozilla Firefox, Google Chrome, Safari… Al dise\u00f1ar una p\u00e1gina web, tenemos que tener en cuenta que los distintos navegadores pueden presentar nuestros dise\u00f1os con peque\u00f1as variaciones.<\/li>\n
- Resoluci\u00f3n de ventana web: <\/strong>n\u00famero de p\u00edxeles m\u00e1ximos horizontales y verticales disponibles para presentar una p\u00e1gina web. La resoluci\u00f3n vendr\u00e1 determinada por la resoluci\u00f3n de la pantalla del dispositivo y por el espacio que el navegador web deja para la presentaci\u00f3n. Las distintas resoluciones disponibles Internet limitaran en gran medida el dise\u00f1o web.\n
Ejemplos de pantalla ipad (1024 x 768) y iphone (640 x 480) mostrando la misma p\u00e1gina web, presenta un dise\u00f1o diferente para cada una de las resoluciones.<\/span><\/p>\n<\/li>\n- Dise\u00f1ador web: <\/strong>Profesional que utiliza programas de dise\u00f1o tradicional, como photoshop, freehand, ilustrator, indesign\u2026<\/li>\n
- Maquetador web: <\/strong>Profesional que maqueta los dise\u00f1os utilizando las codificaciones est\u00e1ndares (html, css, javascript\u2026), transformando los dise\u00f1os en p\u00e1ginas web.<\/li>\n
- Programador web: <\/strong>Profesional que programa las p\u00e1ginas web maquetadas (php, asp, jquery \u2026) para que presenten informaci\u00f3n de una base de datos, personalicen los contenidos, env\u00eden los formularios, interact\u00faen con el usuario\u2026<\/li>\n<\/ul>\n
<\/span><\/p>\n<\/p><\/div>\n<\/p><\/div>\nDiferencias b\u00e1sicas entre dise\u00f1o impreso
y dise\u00f1o web<\/h1>\n\nInteractuar en vez de mostrar<\/p>\n
El dise\u00f1o impreso est\u00e1 basado en ver, pero el dise\u00f1o web est\u00e1 basado en hacer.
La funci\u00f3n del dise\u00f1o tradicional es contar historias, la misi\u00f3n del dise\u00f1o digital es entablar conversaciones.
El soporte gr\u00e1fico se sostiene sobre relaciones espaciales y la experiencia web sobre relaciones temporales. El dise\u00f1o impreso es est\u00e1tico, en cambio, la experiencia de un sitio web se define por la interacci\u00f3n del usuario con dise\u00f1o y contenido. Por ejemplo, un usuario hace clic sobre la navegaci\u00f3n o se desplaza hacia abajo para leer una p\u00e1gina.
Un buen dise\u00f1o impreso tiene que entenderse y ser bonito, pero un buen dise\u00f1o web tiene que entenderse, facilitar la navegaci\u00f3n (usabilidad) y ser bonito. Normalmente se recomienda priorizar la usabilidad, despu\u00e9s el contenido y si queda tiempo el arte. Aunque esto no implica que el buen dise\u00f1o se deba sacrificar para ganar usabilidad, en esta gu\u00eda vamos a explicar c\u00f3mo hacerlos compatibles.<\/p>\n
Espacio y entorno indefinido en vez de definido<\/p>\n
El dise\u00f1o impreso se visualiza en espacio limitado pero el dise\u00f1o web se tiene que poder visualizar en m\u00faltiples espacios, adem\u00e1s el dise\u00f1o web se puede extender fuera de la pantalla (podemos que utilizar barras de desplazamiento o scrolling).
Cuando se dise\u00f1a para imprimir, el resultado va a ser exactamente igual o muy parecido al original que hemos dise\u00f1ado y guardado, en cambio, cuando se dise\u00f1a una web, debemos considerar factores externos de los cuales no tenemos ning\u00fan control (el usuario puede tener resoluciones de pantalla diferente o utilizar un navegador web distinto, adem\u00e1s de no tener las tipograf\u00edas utilizadas,\u2026).
El dise\u00f1o impreso se visualiza igual en cualquier revista, en cambio, los diferentes navegadores web pueden presentar los elementos del dise\u00f1o 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\u2026 sin que alguno muestre errores.<\/p>\n
Problema con las tipograf\u00edas<\/p>\n
En el dise\u00f1o impreso se puede utilizar cualquier tipograf\u00eda, pero el dise\u00f1o web normalmente solo muestra las tipograf\u00edas que el usuario tenga instaladas en su ordenador. M\u00e1s adelante veremos que existen diversas soluciones a este problema, por ejemplo poniendo el texto con el formato y la tipograf\u00eda deseada en im\u00e1genes, pero tendremos que tener en cuenta las limitaciones.<\/p>\n
Pixeles en vez de pulgadas y cent\u00edmetros<\/p>\n
En el dise\u00f1o impreso se trabaja con pulgadas y cent\u00edmetros, pero en el dise\u00f1o web solo se trabaja con pixeles. As\u00ed pues, dependiendo de la resoluci\u00f3n de la pantalla (pixeles por pulgada o dpi) una misma imagen se puede ver mayor o menor. Las medidas de los dise\u00f1os web siempre son p\u00edxeles, aunque en ocasiones se pueden utilizar porcentajes de pantalla o porcentajes de \u00e1rea (se explica m\u00e1s adelante).
Si les cuesta dise\u00f1ar con pixeles, pueden utilizar la resoluci\u00f3n 72 dpi, que es la resoluci\u00f3n est\u00e1ndar de la mayor\u00eda de pantallas de ordenador. Dise\u00f1ando a esta resoluci\u00f3n, la mayor\u00eda de usuarios ver\u00e1n las im\u00e1genes y elementos de su dise\u00f1o al mismo tama\u00f1o que en su pantalla.<\/p>\n
P\u00edxel: <\/strong>la menor unidad de medida en la pantalla (un punto de luz). La mayor\u00eda de pantallas tienen una resoluci\u00f3n de 72 p\u00edxeles por pulgada o dpi.<\/p>\nArchivos peque\u00f1os en vez de grandes<\/p>\n
El dise\u00f1o impreso se trabaja con altas resoluciones de archivos y se procura mantener la mejor calidad en las im\u00e1genes y originales, mientras que en el dise\u00f1o web se trabaja con resoluciones bajas para ahorrar recursos del servidor y permitir que el usuario abra la p\u00e1gina r\u00e1pidamente. En dise\u00f1o web, debemos optimizar las im\u00e1genes y animaciones, es decir, bajar la resoluci\u00f3n lo m\u00e1s posible sin perder una calidad significativa. El peso (calculado en Kb o Mb) de una p\u00e1gina web se calcula como la suma de todos pesos de los documentos que abre una p\u00e1gina web (im\u00e1genes, 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\u00e1gina tarda un segundo m\u00e1s a descargarse y abrirse.<\/p>\n
RGB en vez de CMYK<\/p>\n
En el dise\u00f1o impreso se trabaja colores substractivos o CMYK, en cambio en el dise\u00f1o web solo se trabaja con colores aditivos o RGB.
El color es un error com\u00fan de los dise\u00f1adores gr\u00e1ficos cuando quieren dise\u00f1ar para web. En la escuela de dise\u00f1o te ense\u00f1an a utilizar siempre CMYK para que la impresi\u00f3n quede bien, pero en el mundo web, es todo lo contrario, las pantallas emiten luz \u00fanicamente interpretan datos RGB o aditivos.<\/p>\n
Posible editar despu\u00e9s de publicar<\/p>\n
El dise\u00f1o impreso no se puede modificar despu\u00e9s de la impresi\u00f3n. Por suerte el dise\u00f1o web se puede modificar despu\u00e9s de la publicaci\u00f3n, se pueden corregir errores, completar contenido no introducido inicialmente, o mantener actualizada la informaci\u00f3n. En este sentido, es mejor evitar dise\u00f1os que no sean flexibles, para que en el futuro el dise\u00f1o se pueda adaptar a diferentes tama\u00f1os de los contenidos, sin perjudicar la est\u00e9tica del conjunto.<\/p>\n
<\/p>\n
<\/p>\n
<\/p>\n
Usabilidad<\/h1>\n\nUn atributo determinante para la calidad de un sitio web es suusabilidad<\/strong>. Se trata de lograr que los visitantes encuentren r\u00e1pidamente aquello que buscan, con el m\u00ednimo esfuerzo por su parte. Sea cual sea el contenido o la finalidad de nuestra web, navegar por ella debe resultar una experiencia gratificante.<\/p>\nWeb usable: <\/strong>es aquella en la que los usuarios pueden interactuar de la forma m\u00e1s f\u00e1cil, c\u00f3moda, evidente y segura posible. Una web usable denota calidad, genera confianza y nos diferencia positivamente de otras alternativas.<\/p>\nLos usuarios pasan mucho menos tiempo visitando una p\u00e1gina web de lo que sus dise\u00f1adores desear\u00edan, por lo que hay que facilitarles las cosas al m\u00e1ximo. Cuando un usuario encuentra que la navegaci\u00f3n por una web es c\u00f3moda, agradable y \u00fatil, existen mayores probabilidades de que la visite de nuevo en el futuro.<\/p>\n
Lograr un buen nivel de usabilidad requiere combinar h\u00e1bilmente una serie de elementos: tecnolog\u00eda, dise\u00f1o, contenidos\u2026 Aunque no existen recetas universales, he aqu\u00ed algunos criterios a tener en cuenta:<\/p>\n
\n- >Crear una jerarqu\u00eda visual clara en cada p\u00e1gina. <\/strong>Debe percibirse a simple vista cu\u00e1l es la importancia de los distintos contenidos, qu\u00e9 relaci\u00f3n existe entre ellos, a qu\u00e9 tema o bloque pertenecen… La colocaci\u00f3n, el tama\u00f1o, la tipograf\u00eda o los colores de los textos y de los dem\u00e1s elementos de la p\u00e1gina son los principales recursos a utilizar.<\/li>\n
- >Dar el control al usuario. <\/strong>\u00c9ste debe sentir en todo momento que sabe d\u00f3nde est\u00e1 y que controla la situaci\u00f3n. Nada importante deber\u00eda situarse a m\u00e1s de dos clics de distancia. Los t\u00edtulos y contenidos de cada apartado deben ser claros y visibles. Tambi\u00e9n son muy \u00fatiles los men\u00fas de situaci\u00f3n, la navegaci\u00f3n por pesta\u00f1as, las opciones de volver atr\u00e1s o deshacer una acci\u00f3n, la visualizaci\u00f3n clara de las distintos pasos de un proceso (la compra on-line, por ejemplo).<\/li>\n
- >Facilitar la interacci\u00f3n. <\/strong>Suele ser muy positivo que una web permita al usuario \u201chacer cosas\u201d: clicar, desplegar, abrir, mover… En todo caso, el acceso y el uso de cualquier elemento de interacci\u00f3n debe ser intuitivo, r\u00e1pido y f\u00e1cil. No podemos permitirnos frustrar al usuario o hacerle perder el tiempo.<\/li>\n
- >Aprovechar las convenciones y llamar a las cosas por su nombre. <\/strong>La mayor\u00eda de usuarios tienen ciertas expectativas derivadas de su experiencia navegando por internet. Saben, m\u00e1s o menos, d\u00f3nde se sit\u00faan los men\u00fas, c\u00f3mo funciona un buscador, para qu\u00e9 sirven determinados botones, qu\u00e9 significan ciertos iconos o expresiones, etc. As\u00ed, hay que situar los contenidos donde el usuario espera que est\u00e9n y hacer que las cosas funcionen como se espera que lo hagan. Si queremos sorprender o hacer \u201calgo diferente\u201d, hemos de asegurarnos de que ello no suponga una complicaci\u00f3n innecesaria.<\/li>\n
- >Simplificar<\/strong>. Hay que evitar la informaci\u00f3n 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\u00e1genes y animaciones, y crearemos men\u00fas claros, bien estructurados y desplegables si hay muchas opciones a mostrar.<\/li>\n<\/ul>\n
No hay que entender la usabilidad como un lastre para nuestra creatividad. Podemos innovar y ser originales mientras no olvidemos quenuestro dise\u00f1o debe estar centrado en el usuario<\/strong>. \u00c9l es el verdadero protagonista y hemos de asegurarnos de que comprender\u00e1 y podr\u00e1 seguirnos el juego en todo momento.<\/p>\nOtros aspectos a tener en cuenta<\/strong>:<\/p>\n\n- >Situar los elementos importantes siempre a mano.<\/li>\n
- >Los usuarios no siempre entran por la p\u00e1gina principal (poner men\u00fas de navegaci\u00f3n en todas las p\u00e1ginas).<\/li>\n
- >Dejar claro qu\u00e9 elementos son enlaces y cu\u00e1les no.<\/li>\n
- >A\u00f1adir un buscador o un mapa del sitio web si \u00e9ste tiene mucho contenido i\/o p\u00e1ginas.<\/li>\n
- >Enlazar a cualquier informaci\u00f3n en menos de 3 clicks (o enlaces)<\/li>\n
- >Mantener una coherencia en el dise\u00f1o de toda la p\u00e1gina.<\/li>\n
- >Seguir las reglas b\u00e1sicas del buen dise\u00f1o: selecci\u00f3n de colores, tipograf\u00edas, regla de los tercios\u2026<\/li>\n
- >No distraer el usuario con excesivas animaciones o elementos que parpadean.<\/li>\n
- >Intentar que los contenidos no tengan faltas de ortograf\u00eda.<\/li>\n
- >No abrir nuevas ventanas del navegador innecesariamente…<\/li>\n<\/ul>\n
Ejemplo web que intenta romper todas las reglas de la usabilidad:http:\/\/theworldsworstwebsiteever.com\/<\/a>
(listado de errores del web:http:\/\/theworldsworstwebsiteever.com\/new_page_1.htm<\/a>).
Otro sitio con listados de dise\u00f1os web que se deben evitar copiar:http:\/\/www.javajan.com\/?id=271-guia<\/a><\/p>\n<\/p><\/div>\n <\/p>\n<\/p><\/div>\n
<\/p>\n
<\/p>\n
<\/p>\n
Arquitectura de un sitio web<\/h1>\n\nAlgunos dicen que dise\u00f1ar para web es m\u00e1s parecido a la arquitectura que al dise\u00f1o gr\u00e1fico. Como en una casa, antes de escoger los muebles, el color de las cortinas o la iluminaci\u00f3n, es importante saber c\u00f3mo estar\u00e1 estructurada la planta, c\u00f3mo ser\u00e1 el sal\u00f3n, donde estar\u00e1n las habitaciones, como se acceder\u00e1 a ellas, donde estar\u00e1n las ventanas… Asimismo en la web, si la estructura no es s\u00f3lida e intuitiva, el arte de la p\u00e1gina no sirve para nada.<\/p>\n
Antes de empezar a trabajar en el aspecto puramente est\u00e9tico de las p\u00e1ginas web, imaginando animaciones impresionantes y gr\u00e1ficos atractivos, es indispensables pensar en la estructura del sitio web. Para eso, fundamentalmente, tendremos que:<\/p>\n
\n- >Definir las secciones y p\u00e1ginas web que debe tener el sitio.<\/li>\n
- >Escoger las secciones o p\u00e1ginas a las que podremos acceder desde la p\u00e1gina principal (o de inicio).<\/li>\n
- >Decidir si alguna secci\u00f3n o p\u00e1gina tiene que destacar m\u00e1s respecto las dem\u00e1s.<\/li>\n
- >Distribuir el contenido a presentar entre las distintas secciones y p\u00e1ginas.<\/li>\n
- >Concretar las distintas v\u00edas de acceso a cada una de p\u00e1ginas web del sitio (es importante ofrecer m\u00faltiples maneras de acceder a la misma informaci\u00f3n).<\/li>\n
- >Especificar el n\u00famero de idiomas que dispondr\u00e1 el sitio web.<\/li>\n<\/ul>\n
Para ayudar a concretar la estructura final del sitio web, muchos dise\u00f1adores y programadores web recomiendan hacer un esquema a mano alzada, con post-its o con un simple programa de dise\u00f1o del ordenador, que nos permita realizar cambios f\u00e1cilmente a medida que redescubrimos mejores estructuras para nuestro sitio web.<\/p>\n
Ejemplo de la estructura de un sitio web en el que se detalla todas las p\u00e1ginas y el recorrido para acceder a ellas.<\/span><\/p>\nNormalmente, el contenido de un sitio web se estructura en diferentes p\u00e1ginas web, pero debemos mencionar una tendencia (no muy utilizada ni recomendada), llamada \u201cparallax scrolling\u201d, que estructura todos los contenidos en una solo p\u00e1gina web y permite que el usuario acceda a ellos mediante enlaces internos o bajando por la barra de desplazamiento o \u201cscroll\u201d.<\/p>\n
Ejemplos web de parallax scrolling: http:\/\/www.javajan.com\/news.php?id=277-guia<\/a><\/p>\n<\/p><\/div>\n <\/p>\n
<\/p>\n
<\/p>\n
Estructura de una p\u00e1gina web<\/h1>\n\nUna vez ya tengamos clara como estar\u00e1 estructurada la planta de la casa (sitio web a dise\u00f1ar), podemos empezar a dise\u00f1ar la estructura de cada habitaci\u00f3n (p\u00e1gina web), decidiendo donde pondremos los muebles (contenido) y la decoraci\u00f3n (elementos gr\u00e1ficos). Con especial esmero tendremos que estructurar el sal\u00f3n de la casa (p\u00e1gina principal), donde recibiremos a todos nuestros invitados (usuarios), para que sea lo m\u00e1s confortable posible (dise\u00f1o) pero tambi\u00e9n aporte el m\u00e1ximo de informaci\u00f3n sobre los anfitriones y sobre los contenidos de las distintas habitaciones (usabilidad).<\/p>\n
Para determinar la estructura de cada p\u00e1gina web, tendremos que definir (entre otros):<\/p>\n
\n- >Qu\u00e9 tipo de web quiere el cliente: tipo tarjeta de visita, tipo cat\u00e1logo, tipo anuncio de revista, tipo juego, una combinaci\u00f3n entre las anteriores…<\/li>\n
- >Qu\u00e9 tipo de informaci\u00f3n desea presentar el cliente: mucha imagen, mucha informaci\u00f3n escrita…<\/li>\n
- >Qu\u00e9 mensaje deber\u00eda de recibir el usuario cuando abra la p\u00e1gina principal.<\/li>\n
- >Hac\u00eda qu\u00e9 secciones del web se deber\u00eda sentir atra\u00eddo.<\/li>\n
- >Qu\u00e9 elementos comunes deben presentarse en todas las p\u00e1ginas (por ejemplo sistema de navegaci\u00f3n).<\/li>\n
- >Qu\u00e9 contenido espec\u00edfico deber\u00eda presentarse en cada p\u00e1gina.<\/li>\n<\/ul>\n
De todos modos, antes de empezar a dise\u00f1ar la estructura de una p\u00e1gina web, deber\u00edamos conocer las estructuras est\u00e1ndares utilizadas normalmente.<\/p>\n
<\/p>\n<\/p><\/div>\n
\nEstructuras est\u00e1ndares<\/h2>\n\nUno de los aspectos m\u00e1s importantes de las estructura de una p\u00e1gina web es decidir d\u00f3nde posicionaremos los men\u00fas de navegaci\u00f3n y enlaces a otras p\u00e1ginas web y d\u00f3nde posicionaremos el contenido que van a consultar los navegantes. Existen diversos tipos de estructuras est\u00e1ndares de p\u00e1ginas web que especifican la posici\u00f3n de los men\u00fas de navegaci\u00f3n y el contenido, manteni\u00e9ndose esta estructura y dise\u00f1o durante toda la navegaci\u00f3n por el sitio web.<\/p>\n
Sin que sea sorprendente, los men\u00fas de navegaci\u00f3n acostumbran a posicionarse en los m\u00e1rgenes de la p\u00e1gina, dejando los contenidos en el centro. Por defecto, las estructuras est\u00e1ndares posicionan los men\u00fas de navegaci\u00f3n arriba o en los laterales, pero tambi\u00e9n existen otras posibilidades:<\/p>\n
Bloque de navegaci\u00f3n a la izquierda:<\/p>\n
Permite presentar muchos men\u00fas o enlaces, pues cada l\u00ednea puede ser un enlace (por ejemplo, el men\u00fa de navegaci\u00f3n de esta gu\u00eda). Tampoco supone mucho problema que los men\u00fas se extiendan fuera de la pantalla, porque el usuario puede visualizarlos con la barra de desplazamiento vertical. Este m\u00e9todo es ideal si los men\u00fas son administrables, pues el dise\u00f1o no se ver\u00e1 muy afectado si aumentan o disminuyen el n\u00famero de enlaces.<\/p>\n
<\/a>Ejemplo de bloque de navegaci\u00f3n a la izquierda:guiadise\u00f1o.com<\/a><\/p>\nBloque de navegaci\u00f3n arriba:<\/p>\n
Ideal si el sitio web no tiene demasiadas secciones. Los men\u00fas se sit\u00faan en l\u00ednea y ocupan mucho espacio. Es f\u00e1cil si los men\u00fas se despliegan con otros submen\u00fas (es m\u00e1s f\u00e1cil la navegaci\u00f3n que si los submen\u00fas se abren lateralmente)<\/p>\n
<\/a>Ejemplo de bloque de navegaci\u00f3n arriba:http:\/\/www.apple.es<\/a><\/p>\nBloque de navegaci\u00f3n derecha:<\/p>\n
Las mismas ventajas que el men\u00fa a la izquierda pero menos usado.<\/p>\n
<\/a>Ejemplo de bloque de navegaci\u00f3n a la izquierda:http:\/\/www.narfstuff.co.uk<\/a><\/p>\nCombinaci\u00f3n de los anteriores:<\/p>\n
Si tenemos muchos enlaces a presentar, siempre podemos utilizar cualquier combinaci\u00f3n de los anteriores (arriba e izquierda; izquierda y derecha; arriba, izquierda y derecha;\u2026), sobre todo si los men\u00fas se pueden agrupar en dos o tres grandes grupos.<\/p>\n
<\/a>Ejemplo de combinaci\u00f3n de bloques:http:\/\/www.apple.es<\/a><\/p>\nPie de p\u00e1gina<\/p>\n
El pie de p\u00e1gina acostumbra a tener una gran importancia en las estructuras de los webs actuales, donde se pueden repetir los men\u00fas de navegaci\u00f3n (para que el usuario no deba subir por la p\u00e1gina), situar los enlaces alaviso legal<\/em>,copyright<\/em>, redes sociales: facebook, RSS, twitter o los datos de direcci\u00f3n y contacto.<\/p>\nEjemplos de pie de p\u00e1gina:<\/p>\n
<\/a>Ejemplo de pie de p\u00e1gina:http:\/\/bristolarchiverecords.com<\/a><\/p>\n<\/a>Ejemplo de pie de p\u00e1gina:http:\/\/yuruinspires.com<\/a><\/p>\n<\/a>Ejemplo de pie de p\u00e1gina:http:\/\/splitdadiz.com<\/a><\/p>\n<\/a>Ejemplo de pie de p\u00e1gina:http:\/\/www.mecannical.com<\/a><\/p>\n<\/a>Ejemplo de pie de p\u00e1gina:http:\/\/bitsamppixels.com<\/a><\/p>\nOtros ejemplos web de pies de p\u00e1gina:http:\/\/www.javajan.com\/news.php?id=205-guia<\/a><\/p>\nP\u00e1gina principal<\/p>\n
La p\u00e1gina principal es un caso especial, para la cual no existe una estructura est\u00e1ndar. Aunque la p\u00e1gina principal tambi\u00e9n se puede estructurar de un modo est\u00e1ndar, en la mayor\u00eda de sitios web, la p\u00e1gina principal no se dise\u00f1a para presentar contenido, y m\u00e1s bien se imagina como escaparate de la empresa, en el que tambi\u00e9n se presentan los men\u00fas o enlaces a las diferentes p\u00e1ginas o secciones del web.<\/p>\n
Ejemplos de p\u00e1gina principal:<\/p>\n
<\/a>Ejemplo de p\u00e1gina principal:http:\/\/www.coullon.com<\/a><\/p>\n<\/a>Ejemplo de p\u00e1gina principal:http:\/\/www.luhsetea.com<\/a><\/p>\n<\/a>Ejemplo de p\u00e1gina principal:http:\/\/dotmick.com<\/a><\/p>\n<\/a>Ejemplo de p\u00e1gina principal:http:\/\/gnosh.co.uk<\/a><\/p>\n<\/a>Ejemplo de p\u00e1gina principal:http:\/\/wearecupcup.com<\/a><\/p>\n<\/a><\/p>\nEjemplo de p\u00e1gina principal:http:\/\/www.mcfarlanechangemanagement.com.au<\/a><\/p>\n<\/p><\/div>\n<\/p><\/div>\n <\/div>\n <\/div>\n\nDise\u00f1ando la estructura<\/h2>\n\nConociendo las estructuras web m\u00e1s utilizadas, ya podemos empezar a dibujar la estructura espec\u00edfica de nuestra p\u00e1gina web, dibujando y posicionando a nuestro gusto los bloques de men\u00fas, contenido, gr\u00e1ficos, y los sub-bloques dentro de cada uno de los anteriores.<\/p>\n
Cada dise\u00f1ador tendr\u00e1 su propio m\u00e9todo para plasmar la estructura imaginada de una p\u00e1gina web a la pantalla de su ordenador. Aqu\u00ed transcribimos el m\u00e9todo de trabajo espec\u00edfico de un dise\u00f1ador:\u201cComienzo por bosquejar algunos posibles dise\u00f1os sobre papel. Despu\u00e9s de unos pocos de estos bocetos, decido cual me gusta m\u00e1s o cual se adapta mejor a los requisitos del cliente y el salto al Photoshop (o freehand), y uso la herramienta de rect\u00e1ngulo para bloquear las \u00e1reas que he marcado en mi papel. Una vez que he definido mi dise\u00f1o, experimento con los colores de fondo y de los rect\u00e1ngulos hasta tener un esquema de color s\u00f3lido. Y sigo trabajando con p\u00edxeles hasta que, finalmente, tengo un borrador para mostrar al cliente.\u201d<\/em><\/p>\nEjemplo de dise\u00f1o de la estructura:<\/p>\n
<\/a><\/p>\nEjemplo de dise\u00f1o para la p\u00e1gina:http:\/\/www.ginecologiavhebron.com<\/a>(dise\u00f1o deDeumonforte<\/em>y programaci\u00f3n Javajan)<\/p>\nTrabajando con bloques rectangulares<\/p>\n
La estructura de una p\u00e1gina web se sub-divide en bloques rectangulares, dentro de los cuales vamos a posicionar los diferentes elementos de dise\u00f1o o contenido. M\u00e1s tarde, al aplicar dise\u00f1o sobre estos rect\u00e1ngulos podemos enmascararlos eliminando los bordes o utilizando formas curvas, pero es importante conocer que cualquier estructura web est\u00e1 basada en rect\u00e1ngulos horizontales (no en diagonal).<\/p>\n
A pesar de todo, el dise\u00f1o de la estructura web no finaliza al posicionar los diferentes bloques, porque tenemos de definir como se adaptaran y comportaran en funci\u00f3n de la resoluci\u00f3n de pantalla.<\/p>\n<\/p><\/div>\n<\/p><\/div>\n
<\/p>\n
<\/p>\n
<\/p>\n
Adaptaci\u00f3n de la estructura en funci\u00f3n de la resoluci\u00f3n<\/h1>\nAdaptaci\u00f3n del bloque principal<\/h2>\n\nBloque principal: <\/strong>recuadro exterior que engloba toda la estructura de p\u00e1gina web, es decir, no existe ning\u00fan recuadro o bloque secundario que rebase el bloque o recuadro principal.<\/p>\nBloque secundario: <\/strong>cada uno de los recuadros que componen el bloque o recuadro principal.<\/p>\nExisten tres maneras distintas de adaptar el bloque principal en funci\u00f3n del tama\u00f1o de la pantalla:<\/p>\n
Fijo:<\/p>\n
El bloque se dise\u00f1a con un tama\u00f1o fijo que no se va a modificar en funci\u00f3n del tama\u00f1o de la pantalla. Es el m\u00e1s f\u00e1cil de dise\u00f1ar y maquetar porqu\u00e9 los elementos del dise\u00f1o o bloques secundarios siempre estar\u00e1n en la misma posici\u00f3n y mantendr\u00e1n el mismo ancho.<\/p>\n
Ejemplo p\u00e1gina web de estructura fija, mostrada en pantallas de distinta resoluci\u00f3n. A resoluciones grandes aparecen muchos espacios en blanco; a resoluciones peque\u00f1as el dise\u00f1o queda cortado<\/p>\n
Si escogemos una estructura principal fija, tenemos que pensar qu\u00e9 tama\u00f1o en pixeles vamos a utilizar. Seg\u00fan las estad\u00edsticas actuales (http:\/\/www.w3schools.com\/browsers\/browsers_display.asp<\/a>), el 98% de usuarios tienen resoluciones igual o superiores a 1024×768, aunque empiezan a crecer el n\u00famero de usuarios con pantallas inferiores a 800×600 debido a la navegaci\u00f3n con tabletas y tel\u00e9fonos.<\/p>\nSi dise\u00f1amos un bloque principal fijo, podr\u00eda ser bueno tomar como referencia la resoluci\u00f3n de 1024×768, aunque el ancho del bloque principal deber\u00eda de ser m\u00e1s peque\u00f1o, pues el navegador se necesita algunos pixeles para los men\u00fas, m\u00e1rgenes y barras de desplazamiento. As\u00ed pues, deber\u00edamos de dise\u00f1ar un bloque principal de un ancho m\u00e1ximo de 990 pixeles. Si queremos que todo el contenido aparezca en la pantalla y no aparezcan barras de desplazamiento verticales, la altura m\u00e1xima del dise\u00f1o deber\u00eda de ser entre 600 y 650 pixeles (depender\u00e1 mucho del espacio que ocupen los men\u00fas del navegador del usuario).<\/p>\n
Normalmente, la estructura principal fija se centra en la pantalla para resoluciones grandes, aunque tambi\u00e9n se puede alinear a la izquierda o a la derecha.<\/p>\n
Fluido o l\u00edquido:<\/p>\n
Con independencia de la resoluci\u00f3n de una pantalla, un bloque principal fluido ocupa un porcentaje horizontal de la pantalla, normalmente el 100% (aunque tambi\u00e9n puede ocupar el 90% centrado, o alineado a la izquierda o derecha). Normalmente, al disminuir la resoluci\u00f3n o tama\u00f1o de una pantalla, el bloque fluido se estrecha horizontalmente pero se alarga verticalmente para poder presentar toda la informaci\u00f3n 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\u00f3n fija o fluida (se ver\u00e1 en el siguiente punto).<\/p>\n
Dise\u00f1ar y maquetar una estructura fluida es m\u00e1s complejo, pues se tienen que prever c\u00f3mo se van a comportar cada uno de los bloques secundarios en su interior. Bien dise\u00f1ada, una estructura fluida se puede adaptar desde las resoluciones de pantalla m\u00e1s grandes hasta las resoluciones de pantallas m\u00e1s peque\u00f1as de los tel\u00e9fonos, aunque para \u00e9ste \u00faltimo caso se recomiendan distintas estructuras, como se ver\u00e1 a continuaci\u00f3n.<\/p>\n
Ejemplo de adaptaci\u00f3n fluida (en este caso, todos los bloques secundarios tambi\u00e9n son fluidos):<\/p>\n
<\/p>\n
Dos buenos art\u00edculo sobre dise\u00f1o fluido:
http:\/\/www.javajan.com\/news.php?id=225-guia<\/a> y http:\/\/www.javajan.com\/news.php?id=193-guia<\/a><\/p>\nEstructuras distintas – Dise\u00f1o sensible:<\/p>\n
El dise\u00f1o sensible (del ingl\u00e9s: responsive design) es una opci\u00f3n cada vez m\u00e1s utilizada en el dise\u00f1o web actual es crear estructuras del bloque principal distintas, reacomodando los contenidos en funci\u00f3n de la resoluci\u00f3n de la pantalla. Esto puede ser muy \u00fatil cuando consideremos el acceso a nuestro web a trav\u00e9s de tel\u00e9fonos, que tienen resoluciones de pantallas muy peque\u00f1as. Algunos navegadores para m\u00f3viles reestructuran el dise\u00f1o de los webs de un modo eficiente, pero si queremos asegurar la buena visualizaci\u00f3n y dise\u00f1o de nuestro web a cualquier resoluci\u00f3n, deberemos de crear varias estructuras en funci\u00f3n de la resoluci\u00f3n de la pantalla.<\/p>\n
En un dise\u00f1o sensible, no aparecer\u00e1n barras de desplazamiento horizontales (scroll) hasta resoluciones muy peque\u00f1as.<\/p>\n
Podemos decidir las medidas a las cuales se presentaran las diferentes estructuras del bloque principal en funci\u00f3n del dise\u00f1o planteado, pero tambi\u00e9n podemos determinarlas consultando las pantallas m\u00e1s utilizadas actualmente:<\/p>\n
Resoluciones de pantalla m\u00e1s utilizadas:
http:\/\/www.w3schools.com\/browsers\/browsers_display.asp<\/a>
Resoluciones de pantalla m\u00e1s utilizadas en tel\u00e9fonos m\u00f3viles:
http:\/\/deviceatlas.com\/resourcecentre\/Explore+DeviceAtlas+Data\/Data+Explorer#_\/<\/a><\/p>\nSi queremos optimizar recursos y dise\u00f1ar \u00fanicamente dos estructuras de web, una posible soluci\u00f3n ser\u00eda dise\u00f1ar 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\u00eda ser fija para pantallas mayores a 480 p\u00edxeles (iPhone) que se vuelva fluido para resoluciones menores, hasta las pantallas de los tel\u00e9fonos m\u00e1s peque\u00f1as (160 pixeles o menos). Es importante recordar que a todas estas medidas debemos restar 30 o 40 pixeles para que el dise\u00f1o no quede recortado por barras de desplazamiento o m\u00e1rgenes del navegador web.<\/p>\n
Buen art\u00edculo sobre dise\u00f1o web sobre m\u00f3viles:
http:\/\/www.circulodemaquetadores.com\/disenando-para-moviles-diseno-para-multiples-tamanos-de-pantalla\/<\/a>
Ventajas del web frente las aplicaciones y an\u00e1lisis de los distintas posibilidades de dise\u00f1o web para m\u00f3vil
http:\/\/www.javajan.com\/news.php?id=350-guia<\/a><\/p>\nEjemplo de estructuras distintas: a 800 pixeles existe una transici\u00f3n que camb\u00eda de una estructura de 3 columnas a una estructura de 2 columnas (manteniendo la mayor\u00eda de contenidos):<\/p>\n
<\/p>\n
Consultar tambi\u00e9n los diversos ejemplos web con distintas estructuras fluidas que presentamos y explicamos al final del cap\u00edtulo.<\/p>\n
Comparativa:<\/p>\n
Ventajas y desventajas de los tres modelos de adaptaci\u00f3n a las distintas resoluciones de pantalla:<\/p>\n
\n
Nuevas posibilidades: CSS3 y HTML5<\/h2>\n10.- Dise\u00f1o de p\u00e1ginas web programadas
11.- Optimizaci\u00f3n para los buscadores (SEO)
Recomendaciones de Google<\/h1>\n12.- Presupuesto y entrega del dise\u00f1o al maquetador<\/h1>\n <\/span><\/h1>\nIntroducci\u00f3n<\/h1>\n\nHay dificultades que muchos dise\u00f1adores tienen para entender las importantes diferencias entre el dise\u00f1o impreso y el dise\u00f1o web, las limitaciones que presenta respecto al dise\u00f1o tradicional pero tambi\u00e9n las nuevas posibilidades que permiten formas ins\u00f3litas de expresi\u00f3n y comunicaci\u00f3n.<\/p>\n
Esta gu\u00eda est\u00e1 pensada para terminar con estas dificultades, para que cualquier dise\u00f1ador gr\u00e1fico, tenga o no experiencia t\u00e9cnica web, adquiera los conocimientos necesarios que le permitan dise\u00f1ar cualquier sitio o p\u00e1gina web, dando rienda suelta a su imaginaci\u00f3n y creatividad, explotando todas las posibilidades que ofrece este medio. Pero, al mismo tiempo ci\u00f1\u00e9ndose a las limitaciones tecnol\u00f3gicas del momento, para que ning\u00fan maquetador o programador competente jam\u00e1s mire su dise\u00f1o y le diga \u00abeso no se puede hacer\u00bb.<\/p>\n
Dicen que las modas van y vienen, pero que el buen dise\u00f1o es atemporal. Lamentablemente para los buenos dise\u00f1adores, las tecnolog\u00edas tambi\u00e9n van y vienen (o evolucionan) y los buenos dise\u00f1os se tienen de adaptar a la tecnolog\u00eda del momento, si no caducan.<\/p>\n
<\/p>\n
<\/p>\n
Vocabulario y definiciones indispensables<\/h1>\n\n\n- P\u00e1gina web: <\/strong>documento que forma parte de un sitio web, con un contenido que puede incluir texto, im\u00e1genes, elementos multimedia y enlaces para navegar a otras p\u00e1ginas web o contenidos.<\/li>\n
- Sitio web: <\/strong>colecci\u00f3n de p\u00e1ginas web relacionadas y comunes a un dominio de Internet o subdominio.<\/li>\n
- P\u00e1gina principal o home<\/em>: <\/strong>p\u00e1gina de entrada a un sitio web, normalmente con un dise\u00f1o mucho m\u00e1s trabajado, que presenta el sitio y las opciones de navegaci\u00f3n a las p\u00e1ginas o contenidos del sitio.<\/li>\n
- Enlace web: <\/strong>elemento de una p\u00e1gina web que, al clicarlo te lleva a otra p\u00e1gina web o a otra parte de la misma p\u00e1gina web.<\/li>\n
- Men\u00fa de navegaci\u00f3n: <\/strong>conjunto de enlaces web que reflejan la organizaci\u00f3n de los contenidos del sitio web y enlazan a cada una de sus p\u00e1ginas web.<\/li>\n
- Dominio de Internet: <\/strong>es un nombre \u00fanico 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\u00f1adores).<\/li>\n
- URL: <\/strong>cadena de caracteres con la cual se asigna una direcci\u00f3n \u00fanica a cada uno de los recursos de informaci\u00f3n disponibles en la Internet (p\u00e1ginas web y sus elementos: im\u00e1genes, hojas de estilos, elementos multimedia,\u2026). La URL de la p\u00e1gina principal normalmente es el nombre del dominio.<\/li>\n
- Servidor web: <\/strong>ordenador remoto que provee los datos solicitados por parte de los navegadores de otras computadoras. Las p\u00e1ginas web y dominios de Internet deben de ser alojadas en un servidor. Existen muchas empresas que poseen servidores.<\/li>\n
- Navegador web: <\/strong>aplicaci\u00f3n que interpreta el contenido de las p\u00e1ginas web y lo presenta en pantalla permitiendo al usuario interactuar. Ejemplos de navegador: Internet Explorer, Mozilla Firefox, Google Chrome, Safari… Al dise\u00f1ar una p\u00e1gina web, tenemos que tener en cuenta que los distintos navegadores pueden presentar nuestros dise\u00f1os con peque\u00f1as variaciones.<\/li>\n
- Resoluci\u00f3n de ventana web: <\/strong>n\u00famero de p\u00edxeles m\u00e1ximos horizontales y verticales disponibles para presentar una p\u00e1gina web. La resoluci\u00f3n vendr\u00e1 determinada por la resoluci\u00f3n de la pantalla del dispositivo y por el espacio que el navegador web deja para la presentaci\u00f3n. Las distintas resoluciones disponibles Internet limitaran en gran medida el dise\u00f1o web.\n
Ejemplos de pantalla ipad (1024 x 768) y iphone (640 x 480) mostrando la misma p\u00e1gina web, presenta un dise\u00f1o diferente para cada una de las resoluciones.<\/span><\/p>\n<\/li>\n- Dise\u00f1ador web: <\/strong>Profesional que utiliza programas de dise\u00f1o tradicional, como photoshop, freehand, ilustrator, indesign\u2026<\/li>\n
- Maquetador web: <\/strong>Profesional que maqueta los dise\u00f1os utilizando las codificaciones est\u00e1ndares (html, css, javascript\u2026), transformando los dise\u00f1os en p\u00e1ginas web.<\/li>\n
- Programador web: <\/strong>Profesional que programa las p\u00e1ginas web maquetadas (php, asp, jquery \u2026) para que presenten informaci\u00f3n de una base de datos, personalicen los contenidos, env\u00eden los formularios, interact\u00faen con el usuario\u2026<\/li>\n<\/ul>\n
<\/span><\/p>\n<\/p><\/div>\n<\/p><\/div>\nDiferencias b\u00e1sicas entre dise\u00f1o impreso
y dise\u00f1o web<\/h1>\n\nInteractuar en vez de mostrar<\/p>\n
El dise\u00f1o impreso est\u00e1 basado en ver, pero el dise\u00f1o web est\u00e1 basado en hacer.
La funci\u00f3n del dise\u00f1o tradicional es contar historias, la misi\u00f3n del dise\u00f1o digital es entablar conversaciones.
El soporte gr\u00e1fico se sostiene sobre relaciones espaciales y la experiencia web sobre relaciones temporales. El dise\u00f1o impreso es est\u00e1tico, en cambio, la experiencia de un sitio web se define por la interacci\u00f3n del usuario con dise\u00f1o y contenido. Por ejemplo, un usuario hace clic sobre la navegaci\u00f3n o se desplaza hacia abajo para leer una p\u00e1gina.
Un buen dise\u00f1o impreso tiene que entenderse y ser bonito, pero un buen dise\u00f1o web tiene que entenderse, facilitar la navegaci\u00f3n (usabilidad) y ser bonito. Normalmente se recomienda priorizar la usabilidad, despu\u00e9s el contenido y si queda tiempo el arte. Aunque esto no implica que el buen dise\u00f1o se deba sacrificar para ganar usabilidad, en esta gu\u00eda vamos a explicar c\u00f3mo hacerlos compatibles.<\/p>\n
Espacio y entorno indefinido en vez de definido<\/p>\n
El dise\u00f1o impreso se visualiza en espacio limitado pero el dise\u00f1o web se tiene que poder visualizar en m\u00faltiples espacios, adem\u00e1s el dise\u00f1o web se puede extender fuera de la pantalla (podemos que utilizar barras de desplazamiento o scrolling).
Cuando se dise\u00f1a para imprimir, el resultado va a ser exactamente igual o muy parecido al original que hemos dise\u00f1ado y guardado, en cambio, cuando se dise\u00f1a una web, debemos considerar factores externos de los cuales no tenemos ning\u00fan control (el usuario puede tener resoluciones de pantalla diferente o utilizar un navegador web distinto, adem\u00e1s de no tener las tipograf\u00edas utilizadas,\u2026).
El dise\u00f1o impreso se visualiza igual en cualquier revista, en cambio, los diferentes navegadores web pueden presentar los elementos del dise\u00f1o 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\u2026 sin que alguno muestre errores.<\/p>\n
Problema con las tipograf\u00edas<\/p>\n
En el dise\u00f1o impreso se puede utilizar cualquier tipograf\u00eda, pero el dise\u00f1o web normalmente solo muestra las tipograf\u00edas que el usuario tenga instaladas en su ordenador. M\u00e1s adelante veremos que existen diversas soluciones a este problema, por ejemplo poniendo el texto con el formato y la tipograf\u00eda deseada en im\u00e1genes, pero tendremos que tener en cuenta las limitaciones.<\/p>\n
Pixeles en vez de pulgadas y cent\u00edmetros<\/p>\n
En el dise\u00f1o impreso se trabaja con pulgadas y cent\u00edmetros, pero en el dise\u00f1o web solo se trabaja con pixeles. As\u00ed pues, dependiendo de la resoluci\u00f3n de la pantalla (pixeles por pulgada o dpi) una misma imagen se puede ver mayor o menor. Las medidas de los dise\u00f1os web siempre son p\u00edxeles, aunque en ocasiones se pueden utilizar porcentajes de pantalla o porcentajes de \u00e1rea (se explica m\u00e1s adelante).
Si les cuesta dise\u00f1ar con pixeles, pueden utilizar la resoluci\u00f3n 72 dpi, que es la resoluci\u00f3n est\u00e1ndar de la mayor\u00eda de pantallas de ordenador. Dise\u00f1ando a esta resoluci\u00f3n, la mayor\u00eda de usuarios ver\u00e1n las im\u00e1genes y elementos de su dise\u00f1o al mismo tama\u00f1o que en su pantalla.<\/p>\n
P\u00edxel: <\/strong>la menor unidad de medida en la pantalla (un punto de luz). La mayor\u00eda de pantallas tienen una resoluci\u00f3n de 72 p\u00edxeles por pulgada o dpi.<\/p>\nArchivos peque\u00f1os en vez de grandes<\/p>\n
El dise\u00f1o impreso se trabaja con altas resoluciones de archivos y se procura mantener la mejor calidad en las im\u00e1genes y originales, mientras que en el dise\u00f1o web se trabaja con resoluciones bajas para ahorrar recursos del servidor y permitir que el usuario abra la p\u00e1gina r\u00e1pidamente. En dise\u00f1o web, debemos optimizar las im\u00e1genes y animaciones, es decir, bajar la resoluci\u00f3n lo m\u00e1s posible sin perder una calidad significativa. El peso (calculado en Kb o Mb) de una p\u00e1gina web se calcula como la suma de todos pesos de los documentos que abre una p\u00e1gina web (im\u00e1genes, 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\u00e1gina tarda un segundo m\u00e1s a descargarse y abrirse.<\/p>\n
RGB en vez de CMYK<\/p>\n
En el dise\u00f1o impreso se trabaja colores substractivos o CMYK, en cambio en el dise\u00f1o web solo se trabaja con colores aditivos o RGB.
El color es un error com\u00fan de los dise\u00f1adores gr\u00e1ficos cuando quieren dise\u00f1ar para web. En la escuela de dise\u00f1o te ense\u00f1an a utilizar siempre CMYK para que la impresi\u00f3n quede bien, pero en el mundo web, es todo lo contrario, las pantallas emiten luz \u00fanicamente interpretan datos RGB o aditivos.<\/p>\n
Posible editar despu\u00e9s de publicar<\/p>\n
El dise\u00f1o impreso no se puede modificar despu\u00e9s de la impresi\u00f3n. Por suerte el dise\u00f1o web se puede modificar despu\u00e9s de la publicaci\u00f3n, se pueden corregir errores, completar contenido no introducido inicialmente, o mantener actualizada la informaci\u00f3n. En este sentido, es mejor evitar dise\u00f1os que no sean flexibles, para que en el futuro el dise\u00f1o se pueda adaptar a diferentes tama\u00f1os de los contenidos, sin perjudicar la est\u00e9tica del conjunto.<\/p>\n
<\/p>\n
<\/p>\n
<\/p>\n
Usabilidad<\/h1>\n\nUn atributo determinante para la calidad de un sitio web es suusabilidad<\/strong>. Se trata de lograr que los visitantes encuentren r\u00e1pidamente aquello que buscan, con el m\u00ednimo esfuerzo por su parte. Sea cual sea el contenido o la finalidad de nuestra web, navegar por ella debe resultar una experiencia gratificante.<\/p>\nWeb usable: <\/strong>es aquella en la que los usuarios pueden interactuar de la forma m\u00e1s f\u00e1cil, c\u00f3moda, evidente y segura posible. Una web usable denota calidad, genera confianza y nos diferencia positivamente de otras alternativas.<\/p>\nLos usuarios pasan mucho menos tiempo visitando una p\u00e1gina web de lo que sus dise\u00f1adores desear\u00edan, por lo que hay que facilitarles las cosas al m\u00e1ximo. Cuando un usuario encuentra que la navegaci\u00f3n por una web es c\u00f3moda, agradable y \u00fatil, existen mayores probabilidades de que la visite de nuevo en el futuro.<\/p>\n
Lograr un buen nivel de usabilidad requiere combinar h\u00e1bilmente una serie de elementos: tecnolog\u00eda, dise\u00f1o, contenidos\u2026 Aunque no existen recetas universales, he aqu\u00ed algunos criterios a tener en cuenta:<\/p>\n
\n- >Crear una jerarqu\u00eda visual clara en cada p\u00e1gina. <\/strong>Debe percibirse a simple vista cu\u00e1l es la importancia de los distintos contenidos, qu\u00e9 relaci\u00f3n existe entre ellos, a qu\u00e9 tema o bloque pertenecen… La colocaci\u00f3n, el tama\u00f1o, la tipograf\u00eda o los colores de los textos y de los dem\u00e1s elementos de la p\u00e1gina son los principales recursos a utilizar.<\/li>\n
- >Dar el control al usuario. <\/strong>\u00c9ste debe sentir en todo momento que sabe d\u00f3nde est\u00e1 y que controla la situaci\u00f3n. Nada importante deber\u00eda situarse a m\u00e1s de dos clics de distancia. Los t\u00edtulos y contenidos de cada apartado deben ser claros y visibles. Tambi\u00e9n son muy \u00fatiles los men\u00fas de situaci\u00f3n, la navegaci\u00f3n por pesta\u00f1as, las opciones de volver atr\u00e1s o deshacer una acci\u00f3n, la visualizaci\u00f3n clara de las distintos pasos de un proceso (la compra on-line, por ejemplo).<\/li>\n
- >Facilitar la interacci\u00f3n. <\/strong>Suele ser muy positivo que una web permita al usuario \u201chacer cosas\u201d: clicar, desplegar, abrir, mover… En todo caso, el acceso y el uso de cualquier elemento de interacci\u00f3n debe ser intuitivo, r\u00e1pido y f\u00e1cil. No podemos permitirnos frustrar al usuario o hacerle perder el tiempo.<\/li>\n
- >Aprovechar las convenciones y llamar a las cosas por su nombre. <\/strong>La mayor\u00eda de usuarios tienen ciertas expectativas derivadas de su experiencia navegando por internet. Saben, m\u00e1s o menos, d\u00f3nde se sit\u00faan los men\u00fas, c\u00f3mo funciona un buscador, para qu\u00e9 sirven determinados botones, qu\u00e9 significan ciertos iconos o expresiones, etc. As\u00ed, hay que situar los contenidos donde el usuario espera que est\u00e9n y hacer que las cosas funcionen como se espera que lo hagan. Si queremos sorprender o hacer \u201calgo diferente\u201d, hemos de asegurarnos de que ello no suponga una complicaci\u00f3n innecesaria.<\/li>\n
- >Simplificar<\/strong>. Hay que evitar la informaci\u00f3n 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\u00e1genes y animaciones, y crearemos men\u00fas claros, bien estructurados y desplegables si hay muchas opciones a mostrar.<\/li>\n<\/ul>\n
No hay que entender la usabilidad como un lastre para nuestra creatividad. Podemos innovar y ser originales mientras no olvidemos quenuestro dise\u00f1o debe estar centrado en el usuario<\/strong>. \u00c9l es el verdadero protagonista y hemos de asegurarnos de que comprender\u00e1 y podr\u00e1 seguirnos el juego en todo momento.<\/p>\nOtros aspectos a tener en cuenta<\/strong>:<\/p>\n\n- >Situar los elementos importantes siempre a mano.<\/li>\n
- >Los usuarios no siempre entran por la p\u00e1gina principal (poner men\u00fas de navegaci\u00f3n en todas las p\u00e1ginas).<\/li>\n
- >Dejar claro qu\u00e9 elementos son enlaces y cu\u00e1les no.<\/li>\n
- >A\u00f1adir un buscador o un mapa del sitio web si \u00e9ste tiene mucho contenido i\/o p\u00e1ginas.<\/li>\n
- >Enlazar a cualquier informaci\u00f3n en menos de 3 clicks (o enlaces)<\/li>\n
- >Mantener una coherencia en el dise\u00f1o de toda la p\u00e1gina.<\/li>\n
- >Seguir las reglas b\u00e1sicas del buen dise\u00f1o: selecci\u00f3n de colores, tipograf\u00edas, regla de los tercios\u2026<\/li>\n
- >No distraer el usuario con excesivas animaciones o elementos que parpadean.<\/li>\n
- >Intentar que los contenidos no tengan faltas de ortograf\u00eda.<\/li>\n
- >No abrir nuevas ventanas del navegador innecesariamente…<\/li>\n<\/ul>\n
Ejemplo web que intenta romper todas las reglas de la usabilidad:http:\/\/theworldsworstwebsiteever.com\/<\/a>
(listado de errores del web:http:\/\/theworldsworstwebsiteever.com\/new_page_1.htm<\/a>).
Otro sitio con listados de dise\u00f1os web que se deben evitar copiar:http:\/\/www.javajan.com\/?id=271-guia<\/a><\/p>\n<\/p><\/div>\n <\/p>\n<\/p><\/div>\n
<\/p>\n
<\/p>\n
<\/p>\n
Arquitectura de un sitio web<\/h1>\n\nAlgunos dicen que dise\u00f1ar para web es m\u00e1s parecido a la arquitectura que al dise\u00f1o gr\u00e1fico. Como en una casa, antes de escoger los muebles, el color de las cortinas o la iluminaci\u00f3n, es importante saber c\u00f3mo estar\u00e1 estructurada la planta, c\u00f3mo ser\u00e1 el sal\u00f3n, donde estar\u00e1n las habitaciones, como se acceder\u00e1 a ellas, donde estar\u00e1n las ventanas… Asimismo en la web, si la estructura no es s\u00f3lida e intuitiva, el arte de la p\u00e1gina no sirve para nada.<\/p>\n
Antes de empezar a trabajar en el aspecto puramente est\u00e9tico de las p\u00e1ginas web, imaginando animaciones impresionantes y gr\u00e1ficos atractivos, es indispensables pensar en la estructura del sitio web. Para eso, fundamentalmente, tendremos que:<\/p>\n
\n- >Definir las secciones y p\u00e1ginas web que debe tener el sitio.<\/li>\n
- >Escoger las secciones o p\u00e1ginas a las que podremos acceder desde la p\u00e1gina principal (o de inicio).<\/li>\n
- >Decidir si alguna secci\u00f3n o p\u00e1gina tiene que destacar m\u00e1s respecto las dem\u00e1s.<\/li>\n
- >Distribuir el contenido a presentar entre las distintas secciones y p\u00e1ginas.<\/li>\n
- >Concretar las distintas v\u00edas de acceso a cada una de p\u00e1ginas web del sitio (es importante ofrecer m\u00faltiples maneras de acceder a la misma informaci\u00f3n).<\/li>\n
- >Especificar el n\u00famero de idiomas que dispondr\u00e1 el sitio web.<\/li>\n<\/ul>\n
Para ayudar a concretar la estructura final del sitio web, muchos dise\u00f1adores y programadores web recomiendan hacer un esquema a mano alzada, con post-its o con un simple programa de dise\u00f1o del ordenador, que nos permita realizar cambios f\u00e1cilmente a medida que redescubrimos mejores estructuras para nuestro sitio web.<\/p>\n
Ejemplo de la estructura de un sitio web en el que se detalla todas las p\u00e1ginas y el recorrido para acceder a ellas.<\/span><\/p>\nNormalmente, el contenido de un sitio web se estructura en diferentes p\u00e1ginas web, pero debemos mencionar una tendencia (no muy utilizada ni recomendada), llamada \u201cparallax scrolling\u201d, que estructura todos los contenidos en una solo p\u00e1gina web y permite que el usuario acceda a ellos mediante enlaces internos o bajando por la barra de desplazamiento o \u201cscroll\u201d.<\/p>\n
Ejemplos web de parallax scrolling: http:\/\/www.javajan.com\/news.php?id=277-guia<\/a><\/p>\n<\/p><\/div>\n <\/p>\n
<\/p>\n
<\/p>\n
Estructura de una p\u00e1gina web<\/h1>\n\nUna vez ya tengamos clara como estar\u00e1 estructurada la planta de la casa (sitio web a dise\u00f1ar), podemos empezar a dise\u00f1ar la estructura de cada habitaci\u00f3n (p\u00e1gina web), decidiendo donde pondremos los muebles (contenido) y la decoraci\u00f3n (elementos gr\u00e1ficos). Con especial esmero tendremos que estructurar el sal\u00f3n de la casa (p\u00e1gina principal), donde recibiremos a todos nuestros invitados (usuarios), para que sea lo m\u00e1s confortable posible (dise\u00f1o) pero tambi\u00e9n aporte el m\u00e1ximo de informaci\u00f3n sobre los anfitriones y sobre los contenidos de las distintas habitaciones (usabilidad).<\/p>\n
Para determinar la estructura de cada p\u00e1gina web, tendremos que definir (entre otros):<\/p>\n
\n- >Qu\u00e9 tipo de web quiere el cliente: tipo tarjeta de visita, tipo cat\u00e1logo, tipo anuncio de revista, tipo juego, una combinaci\u00f3n entre las anteriores…<\/li>\n
- >Qu\u00e9 tipo de informaci\u00f3n desea presentar el cliente: mucha imagen, mucha informaci\u00f3n escrita…<\/li>\n
- >Qu\u00e9 mensaje deber\u00eda de recibir el usuario cuando abra la p\u00e1gina principal.<\/li>\n
- >Hac\u00eda qu\u00e9 secciones del web se deber\u00eda sentir atra\u00eddo.<\/li>\n
- >Qu\u00e9 elementos comunes deben presentarse en todas las p\u00e1ginas (por ejemplo sistema de navegaci\u00f3n).<\/li>\n
- >Qu\u00e9 contenido espec\u00edfico deber\u00eda presentarse en cada p\u00e1gina.<\/li>\n<\/ul>\n
De todos modos, antes de empezar a dise\u00f1ar la estructura de una p\u00e1gina web, deber\u00edamos conocer las estructuras est\u00e1ndares utilizadas normalmente.<\/p>\n
<\/p>\n<\/p><\/div>\n
\nEstructuras est\u00e1ndares<\/h2>\n\nUno de los aspectos m\u00e1s importantes de las estructura de una p\u00e1gina web es decidir d\u00f3nde posicionaremos los men\u00fas de navegaci\u00f3n y enlaces a otras p\u00e1ginas web y d\u00f3nde posicionaremos el contenido que van a consultar los navegantes. Existen diversos tipos de estructuras est\u00e1ndares de p\u00e1ginas web que especifican la posici\u00f3n de los men\u00fas de navegaci\u00f3n y el contenido, manteni\u00e9ndose esta estructura y dise\u00f1o durante toda la navegaci\u00f3n por el sitio web.<\/p>\n
Sin que sea sorprendente, los men\u00fas de navegaci\u00f3n acostumbran a posicionarse en los m\u00e1rgenes de la p\u00e1gina, dejando los contenidos en el centro. Por defecto, las estructuras est\u00e1ndares posicionan los men\u00fas de navegaci\u00f3n arriba o en los laterales, pero tambi\u00e9n existen otras posibilidades:<\/p>\n
Bloque de navegaci\u00f3n a la izquierda:<\/p>\n
Permite presentar muchos men\u00fas o enlaces, pues cada l\u00ednea puede ser un enlace (por ejemplo, el men\u00fa de navegaci\u00f3n de esta gu\u00eda). Tampoco supone mucho problema que los men\u00fas se extiendan fuera de la pantalla, porque el usuario puede visualizarlos con la barra de desplazamiento vertical. Este m\u00e9todo es ideal si los men\u00fas son administrables, pues el dise\u00f1o no se ver\u00e1 muy afectado si aumentan o disminuyen el n\u00famero de enlaces.<\/p>\n
<\/a>Ejemplo de bloque de navegaci\u00f3n a la izquierda:guiadise\u00f1o.com<\/a><\/p>\nBloque de navegaci\u00f3n arriba:<\/p>\n
Ideal si el sitio web no tiene demasiadas secciones. Los men\u00fas se sit\u00faan en l\u00ednea y ocupan mucho espacio. Es f\u00e1cil si los men\u00fas se despliegan con otros submen\u00fas (es m\u00e1s f\u00e1cil la navegaci\u00f3n que si los submen\u00fas se abren lateralmente)<\/p>\n
<\/a>Ejemplo de bloque de navegaci\u00f3n arriba:http:\/\/www.apple.es<\/a><\/p>\nBloque de navegaci\u00f3n derecha:<\/p>\n
Las mismas ventajas que el men\u00fa a la izquierda pero menos usado.<\/p>\n
<\/a>Ejemplo de bloque de navegaci\u00f3n a la izquierda:http:\/\/www.narfstuff.co.uk<\/a><\/p>\nCombinaci\u00f3n de los anteriores:<\/p>\n
Si tenemos muchos enlaces a presentar, siempre podemos utilizar cualquier combinaci\u00f3n de los anteriores (arriba e izquierda; izquierda y derecha; arriba, izquierda y derecha;\u2026), sobre todo si los men\u00fas se pueden agrupar en dos o tres grandes grupos.<\/p>\n
<\/a>Ejemplo de combinaci\u00f3n de bloques:http:\/\/www.apple.es<\/a><\/p>\nPie de p\u00e1gina<\/p>\n
El pie de p\u00e1gina acostumbra a tener una gran importancia en las estructuras de los webs actuales, donde se pueden repetir los men\u00fas de navegaci\u00f3n (para que el usuario no deba subir por la p\u00e1gina), situar los enlaces alaviso legal<\/em>,copyright<\/em>, redes sociales: facebook, RSS, twitter o los datos de direcci\u00f3n y contacto.<\/p>\nEjemplos de pie de p\u00e1gina:<\/p>\n
<\/a>Ejemplo de pie de p\u00e1gina:http:\/\/bristolarchiverecords.com<\/a><\/p>\n<\/a>Ejemplo de pie de p\u00e1gina:http:\/\/yuruinspires.com<\/a><\/p>\n<\/a>Ejemplo de pie de p\u00e1gina:http:\/\/splitdadiz.com<\/a><\/p>\n<\/a>Ejemplo de pie de p\u00e1gina:http:\/\/www.mecannical.com<\/a><\/p>\n<\/a>Ejemplo de pie de p\u00e1gina:http:\/\/bitsamppixels.com<\/a><\/p>\nOtros ejemplos web de pies de p\u00e1gina:http:\/\/www.javajan.com\/news.php?id=205-guia<\/a><\/p>\nP\u00e1gina principal<\/p>\n
La p\u00e1gina principal es un caso especial, para la cual no existe una estructura est\u00e1ndar. Aunque la p\u00e1gina principal tambi\u00e9n se puede estructurar de un modo est\u00e1ndar, en la mayor\u00eda de sitios web, la p\u00e1gina principal no se dise\u00f1a para presentar contenido, y m\u00e1s bien se imagina como escaparate de la empresa, en el que tambi\u00e9n se presentan los men\u00fas o enlaces a las diferentes p\u00e1ginas o secciones del web.<\/p>\n
Ejemplos de p\u00e1gina principal:<\/p>\n
<\/a>Ejemplo de p\u00e1gina principal:http:\/\/www.coullon.com<\/a><\/p>\n<\/a>Ejemplo de p\u00e1gina principal:http:\/\/www.luhsetea.com<\/a><\/p>\n<\/a>Ejemplo de p\u00e1gina principal:http:\/\/dotmick.com<\/a><\/p>\n<\/a>Ejemplo de p\u00e1gina principal:http:\/\/gnosh.co.uk<\/a><\/p>\n<\/a>Ejemplo de p\u00e1gina principal:http:\/\/wearecupcup.com<\/a><\/p>\n<\/a><\/p>\nEjemplo de p\u00e1gina principal:http:\/\/www.mcfarlanechangemanagement.com.au<\/a><\/p>\n<\/p><\/div>\n<\/p><\/div>\n <\/div>\n <\/div>\n\nDise\u00f1ando la estructura<\/h2>\n\nConociendo las estructuras web m\u00e1s utilizadas, ya podemos empezar a dibujar la estructura espec\u00edfica de nuestra p\u00e1gina web, dibujando y posicionando a nuestro gusto los bloques de men\u00fas, contenido, gr\u00e1ficos, y los sub-bloques dentro de cada uno de los anteriores.<\/p>\n
Cada dise\u00f1ador tendr\u00e1 su propio m\u00e9todo para plasmar la estructura imaginada de una p\u00e1gina web a la pantalla de su ordenador. Aqu\u00ed transcribimos el m\u00e9todo de trabajo espec\u00edfico de un dise\u00f1ador:\u201cComienzo por bosquejar algunos posibles dise\u00f1os sobre papel. Despu\u00e9s de unos pocos de estos bocetos, decido cual me gusta m\u00e1s o cual se adapta mejor a los requisitos del cliente y el salto al Photoshop (o freehand), y uso la herramienta de rect\u00e1ngulo para bloquear las \u00e1reas que he marcado en mi papel. Una vez que he definido mi dise\u00f1o, experimento con los colores de fondo y de los rect\u00e1ngulos hasta tener un esquema de color s\u00f3lido. Y sigo trabajando con p\u00edxeles hasta que, finalmente, tengo un borrador para mostrar al cliente.\u201d<\/em><\/p>\nEjemplo de dise\u00f1o de la estructura:<\/p>\n
<\/a><\/p>\nEjemplo de dise\u00f1o para la p\u00e1gina:http:\/\/www.ginecologiavhebron.com<\/a>(dise\u00f1o deDeumonforte<\/em>y programaci\u00f3n Javajan)<\/p>\nTrabajando con bloques rectangulares<\/p>\n
La estructura de una p\u00e1gina web se sub-divide en bloques rectangulares, dentro de los cuales vamos a posicionar los diferentes elementos de dise\u00f1o o contenido. M\u00e1s tarde, al aplicar dise\u00f1o sobre estos rect\u00e1ngulos podemos enmascararlos eliminando los bordes o utilizando formas curvas, pero es importante conocer que cualquier estructura web est\u00e1 basada en rect\u00e1ngulos horizontales (no en diagonal).<\/p>\n
A pesar de todo, el dise\u00f1o de la estructura web no finaliza al posicionar los diferentes bloques, porque tenemos de definir como se adaptaran y comportaran en funci\u00f3n de la resoluci\u00f3n de pantalla.<\/p>\n<\/p><\/div>\n<\/p><\/div>\n
<\/p>\n
<\/p>\n
<\/p>\n
Adaptaci\u00f3n de la estructura en funci\u00f3n de la resoluci\u00f3n<\/h1>\nAdaptaci\u00f3n del bloque principal<\/h2>\n\nBloque principal: <\/strong>recuadro exterior que engloba toda la estructura de p\u00e1gina web, es decir, no existe ning\u00fan recuadro o bloque secundario que rebase el bloque o recuadro principal.<\/p>\nBloque secundario: <\/strong>cada uno de los recuadros que componen el bloque o recuadro principal.<\/p>\nExisten tres maneras distintas de adaptar el bloque principal en funci\u00f3n del tama\u00f1o de la pantalla:<\/p>\n
Fijo:<\/p>\n
El bloque se dise\u00f1a con un tama\u00f1o fijo que no se va a modificar en funci\u00f3n del tama\u00f1o de la pantalla. Es el m\u00e1s f\u00e1cil de dise\u00f1ar y maquetar porqu\u00e9 los elementos del dise\u00f1o o bloques secundarios siempre estar\u00e1n en la misma posici\u00f3n y mantendr\u00e1n el mismo ancho.<\/p>\n
Ejemplo p\u00e1gina web de estructura fija, mostrada en pantallas de distinta resoluci\u00f3n. A resoluciones grandes aparecen muchos espacios en blanco; a resoluciones peque\u00f1as el dise\u00f1o queda cortado<\/p>\n
Si escogemos una estructura principal fija, tenemos que pensar qu\u00e9 tama\u00f1o en pixeles vamos a utilizar. Seg\u00fan las estad\u00edsticas actuales (http:\/\/www.w3schools.com\/browsers\/browsers_display.asp<\/a>), el 98% de usuarios tienen resoluciones igual o superiores a 1024×768, aunque empiezan a crecer el n\u00famero de usuarios con pantallas inferiores a 800×600 debido a la navegaci\u00f3n con tabletas y tel\u00e9fonos.<\/p>\nSi dise\u00f1amos un bloque principal fijo, podr\u00eda ser bueno tomar como referencia la resoluci\u00f3n de 1024×768, aunque el ancho del bloque principal deber\u00eda de ser m\u00e1s peque\u00f1o, pues el navegador se necesita algunos pixeles para los men\u00fas, m\u00e1rgenes y barras de desplazamiento. As\u00ed pues, deber\u00edamos de dise\u00f1ar un bloque principal de un ancho m\u00e1ximo de 990 pixeles. Si queremos que todo el contenido aparezca en la pantalla y no aparezcan barras de desplazamiento verticales, la altura m\u00e1xima del dise\u00f1o deber\u00eda de ser entre 600 y 650 pixeles (depender\u00e1 mucho del espacio que ocupen los men\u00fas del navegador del usuario).<\/p>\n
Normalmente, la estructura principal fija se centra en la pantalla para resoluciones grandes, aunque tambi\u00e9n se puede alinear a la izquierda o a la derecha.<\/p>\n
Fluido o l\u00edquido:<\/p>\n
Con independencia de la resoluci\u00f3n de una pantalla, un bloque principal fluido ocupa un porcentaje horizontal de la pantalla, normalmente el 100% (aunque tambi\u00e9n puede ocupar el 90% centrado, o alineado a la izquierda o derecha). Normalmente, al disminuir la resoluci\u00f3n o tama\u00f1o de una pantalla, el bloque fluido se estrecha horizontalmente pero se alarga verticalmente para poder presentar toda la informaci\u00f3n 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\u00f3n fija o fluida (se ver\u00e1 en el siguiente punto).<\/p>\n
Dise\u00f1ar y maquetar una estructura fluida es m\u00e1s complejo, pues se tienen que prever c\u00f3mo se van a comportar cada uno de los bloques secundarios en su interior. Bien dise\u00f1ada, una estructura fluida se puede adaptar desde las resoluciones de pantalla m\u00e1s grandes hasta las resoluciones de pantallas m\u00e1s peque\u00f1as de los tel\u00e9fonos, aunque para \u00e9ste \u00faltimo caso se recomiendan distintas estructuras, como se ver\u00e1 a continuaci\u00f3n.<\/p>\n
Ejemplo de adaptaci\u00f3n fluida (en este caso, todos los bloques secundarios tambi\u00e9n son fluidos):<\/p>\n
<\/p>\n
Dos buenos art\u00edculo sobre dise\u00f1o fluido:
http:\/\/www.javajan.com\/news.php?id=225-guia<\/a> y http:\/\/www.javajan.com\/news.php?id=193-guia<\/a><\/p>\nEstructuras distintas – Dise\u00f1o sensible:<\/p>\n
El dise\u00f1o sensible (del ingl\u00e9s: responsive design) es una opci\u00f3n cada vez m\u00e1s utilizada en el dise\u00f1o web actual es crear estructuras del bloque principal distintas, reacomodando los contenidos en funci\u00f3n de la resoluci\u00f3n de la pantalla. Esto puede ser muy \u00fatil cuando consideremos el acceso a nuestro web a trav\u00e9s de tel\u00e9fonos, que tienen resoluciones de pantallas muy peque\u00f1as. Algunos navegadores para m\u00f3viles reestructuran el dise\u00f1o de los webs de un modo eficiente, pero si queremos asegurar la buena visualizaci\u00f3n y dise\u00f1o de nuestro web a cualquier resoluci\u00f3n, deberemos de crear varias estructuras en funci\u00f3n de la resoluci\u00f3n de la pantalla.<\/p>\n
En un dise\u00f1o sensible, no aparecer\u00e1n barras de desplazamiento horizontales (scroll) hasta resoluciones muy peque\u00f1as.<\/p>\n
Podemos decidir las medidas a las cuales se presentaran las diferentes estructuras del bloque principal en funci\u00f3n del dise\u00f1o planteado, pero tambi\u00e9n podemos determinarlas consultando las pantallas m\u00e1s utilizadas actualmente:<\/p>\n
Resoluciones de pantalla m\u00e1s utilizadas:
http:\/\/www.w3schools.com\/browsers\/browsers_display.asp<\/a>
Resoluciones de pantalla m\u00e1s utilizadas en tel\u00e9fonos m\u00f3viles:
http:\/\/deviceatlas.com\/resourcecentre\/Explore+DeviceAtlas+Data\/Data+Explorer#_\/<\/a><\/p>\nSi queremos optimizar recursos y dise\u00f1ar \u00fanicamente dos estructuras de web, una posible soluci\u00f3n ser\u00eda dise\u00f1ar 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\u00eda ser fija para pantallas mayores a 480 p\u00edxeles (iPhone) que se vuelva fluido para resoluciones menores, hasta las pantallas de los tel\u00e9fonos m\u00e1s peque\u00f1as (160 pixeles o menos). Es importante recordar que a todas estas medidas debemos restar 30 o 40 pixeles para que el dise\u00f1o no quede recortado por barras de desplazamiento o m\u00e1rgenes del navegador web.<\/p>\n
Buen art\u00edculo sobre dise\u00f1o web sobre m\u00f3viles:
http:\/\/www.circulodemaquetadores.com\/disenando-para-moviles-diseno-para-multiples-tamanos-de-pantalla\/<\/a>
Ventajas del web frente las aplicaciones y an\u00e1lisis de los distintas posibilidades de dise\u00f1o web para m\u00f3vil
http:\/\/www.javajan.com\/news.php?id=350-guia<\/a><\/p>\nEjemplo de estructuras distintas: a 800 pixeles existe una transici\u00f3n que camb\u00eda de una estructura de 3 columnas a una estructura de 2 columnas (manteniendo la mayor\u00eda de contenidos):<\/p>\n
<\/p>\n
Consultar tambi\u00e9n los diversos ejemplos web con distintas estructuras fluidas que presentamos y explicamos al final del cap\u00edtulo.<\/p>\n
Comparativa:<\/p>\n
Ventajas y desventajas de los tres modelos de adaptaci\u00f3n a las distintas resoluciones de pantalla:<\/p>\n
\n
11.- Optimizaci\u00f3n para los buscadores (SEO)
Recomendaciones de Google<\/h1>\n
12.- Presupuesto y entrega del dise\u00f1o al maquetador<\/h1>\n <\/span><\/h1>\nIntroducci\u00f3n<\/h1>\n\nHay dificultades que muchos dise\u00f1adores tienen para entender las importantes diferencias entre el dise\u00f1o impreso y el dise\u00f1o web, las limitaciones que presenta respecto al dise\u00f1o tradicional pero tambi\u00e9n las nuevas posibilidades que permiten formas ins\u00f3litas de expresi\u00f3n y comunicaci\u00f3n.<\/p>\n
Esta gu\u00eda est\u00e1 pensada para terminar con estas dificultades, para que cualquier dise\u00f1ador gr\u00e1fico, tenga o no experiencia t\u00e9cnica web, adquiera los conocimientos necesarios que le permitan dise\u00f1ar cualquier sitio o p\u00e1gina web, dando rienda suelta a su imaginaci\u00f3n y creatividad, explotando todas las posibilidades que ofrece este medio. Pero, al mismo tiempo ci\u00f1\u00e9ndose a las limitaciones tecnol\u00f3gicas del momento, para que ning\u00fan maquetador o programador competente jam\u00e1s mire su dise\u00f1o y le diga \u00abeso no se puede hacer\u00bb.<\/p>\n
Dicen que las modas van y vienen, pero que el buen dise\u00f1o es atemporal. Lamentablemente para los buenos dise\u00f1adores, las tecnolog\u00edas tambi\u00e9n van y vienen (o evolucionan) y los buenos dise\u00f1os se tienen de adaptar a la tecnolog\u00eda del momento, si no caducan.<\/p>\n
<\/p>\n
<\/p>\n
Vocabulario y definiciones indispensables<\/h1>\n\n\n- P\u00e1gina web: <\/strong>documento que forma parte de un sitio web, con un contenido que puede incluir texto, im\u00e1genes, elementos multimedia y enlaces para navegar a otras p\u00e1ginas web o contenidos.<\/li>\n
- Sitio web: <\/strong>colecci\u00f3n de p\u00e1ginas web relacionadas y comunes a un dominio de Internet o subdominio.<\/li>\n
- P\u00e1gina principal o home<\/em>: <\/strong>p\u00e1gina de entrada a un sitio web, normalmente con un dise\u00f1o mucho m\u00e1s trabajado, que presenta el sitio y las opciones de navegaci\u00f3n a las p\u00e1ginas o contenidos del sitio.<\/li>\n
- Enlace web: <\/strong>elemento de una p\u00e1gina web que, al clicarlo te lleva a otra p\u00e1gina web o a otra parte de la misma p\u00e1gina web.<\/li>\n
- Men\u00fa de navegaci\u00f3n: <\/strong>conjunto de enlaces web que reflejan la organizaci\u00f3n de los contenidos del sitio web y enlazan a cada una de sus p\u00e1ginas web.<\/li>\n
- Dominio de Internet: <\/strong>es un nombre \u00fanico 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\u00f1adores).<\/li>\n
- URL: <\/strong>cadena de caracteres con la cual se asigna una direcci\u00f3n \u00fanica a cada uno de los recursos de informaci\u00f3n disponibles en la Internet (p\u00e1ginas web y sus elementos: im\u00e1genes, hojas de estilos, elementos multimedia,\u2026). La URL de la p\u00e1gina principal normalmente es el nombre del dominio.<\/li>\n
- Servidor web: <\/strong>ordenador remoto que provee los datos solicitados por parte de los navegadores de otras computadoras. Las p\u00e1ginas web y dominios de Internet deben de ser alojadas en un servidor. Existen muchas empresas que poseen servidores.<\/li>\n
- Navegador web: <\/strong>aplicaci\u00f3n que interpreta el contenido de las p\u00e1ginas web y lo presenta en pantalla permitiendo al usuario interactuar. Ejemplos de navegador: Internet Explorer, Mozilla Firefox, Google Chrome, Safari… Al dise\u00f1ar una p\u00e1gina web, tenemos que tener en cuenta que los distintos navegadores pueden presentar nuestros dise\u00f1os con peque\u00f1as variaciones.<\/li>\n
- Resoluci\u00f3n de ventana web: <\/strong>n\u00famero de p\u00edxeles m\u00e1ximos horizontales y verticales disponibles para presentar una p\u00e1gina web. La resoluci\u00f3n vendr\u00e1 determinada por la resoluci\u00f3n de la pantalla del dispositivo y por el espacio que el navegador web deja para la presentaci\u00f3n. Las distintas resoluciones disponibles Internet limitaran en gran medida el dise\u00f1o web.\n
Ejemplos de pantalla ipad (1024 x 768) y iphone (640 x 480) mostrando la misma p\u00e1gina web, presenta un dise\u00f1o diferente para cada una de las resoluciones.<\/span><\/p>\n<\/li>\n- Dise\u00f1ador web: <\/strong>Profesional que utiliza programas de dise\u00f1o tradicional, como photoshop, freehand, ilustrator, indesign\u2026<\/li>\n
- Maquetador web: <\/strong>Profesional que maqueta los dise\u00f1os utilizando las codificaciones est\u00e1ndares (html, css, javascript\u2026), transformando los dise\u00f1os en p\u00e1ginas web.<\/li>\n
- Programador web: <\/strong>Profesional que programa las p\u00e1ginas web maquetadas (php, asp, jquery \u2026) para que presenten informaci\u00f3n de una base de datos, personalicen los contenidos, env\u00eden los formularios, interact\u00faen con el usuario\u2026<\/li>\n<\/ul>\n
<\/span><\/p>\n<\/p><\/div>\n<\/p><\/div>\nDiferencias b\u00e1sicas entre dise\u00f1o impreso
y dise\u00f1o web<\/h1>\n\nInteractuar en vez de mostrar<\/p>\n
El dise\u00f1o impreso est\u00e1 basado en ver, pero el dise\u00f1o web est\u00e1 basado en hacer.
La funci\u00f3n del dise\u00f1o tradicional es contar historias, la misi\u00f3n del dise\u00f1o digital es entablar conversaciones.
El soporte gr\u00e1fico se sostiene sobre relaciones espaciales y la experiencia web sobre relaciones temporales. El dise\u00f1o impreso es est\u00e1tico, en cambio, la experiencia de un sitio web se define por la interacci\u00f3n del usuario con dise\u00f1o y contenido. Por ejemplo, un usuario hace clic sobre la navegaci\u00f3n o se desplaza hacia abajo para leer una p\u00e1gina.
Un buen dise\u00f1o impreso tiene que entenderse y ser bonito, pero un buen dise\u00f1o web tiene que entenderse, facilitar la navegaci\u00f3n (usabilidad) y ser bonito. Normalmente se recomienda priorizar la usabilidad, despu\u00e9s el contenido y si queda tiempo el arte. Aunque esto no implica que el buen dise\u00f1o se deba sacrificar para ganar usabilidad, en esta gu\u00eda vamos a explicar c\u00f3mo hacerlos compatibles.<\/p>\n
Espacio y entorno indefinido en vez de definido<\/p>\n
El dise\u00f1o impreso se visualiza en espacio limitado pero el dise\u00f1o web se tiene que poder visualizar en m\u00faltiples espacios, adem\u00e1s el dise\u00f1o web se puede extender fuera de la pantalla (podemos que utilizar barras de desplazamiento o scrolling).
Cuando se dise\u00f1a para imprimir, el resultado va a ser exactamente igual o muy parecido al original que hemos dise\u00f1ado y guardado, en cambio, cuando se dise\u00f1a una web, debemos considerar factores externos de los cuales no tenemos ning\u00fan control (el usuario puede tener resoluciones de pantalla diferente o utilizar un navegador web distinto, adem\u00e1s de no tener las tipograf\u00edas utilizadas,\u2026).
El dise\u00f1o impreso se visualiza igual en cualquier revista, en cambio, los diferentes navegadores web pueden presentar los elementos del dise\u00f1o 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\u2026 sin que alguno muestre errores.<\/p>\n
Problema con las tipograf\u00edas<\/p>\n
En el dise\u00f1o impreso se puede utilizar cualquier tipograf\u00eda, pero el dise\u00f1o web normalmente solo muestra las tipograf\u00edas que el usuario tenga instaladas en su ordenador. M\u00e1s adelante veremos que existen diversas soluciones a este problema, por ejemplo poniendo el texto con el formato y la tipograf\u00eda deseada en im\u00e1genes, pero tendremos que tener en cuenta las limitaciones.<\/p>\n
Pixeles en vez de pulgadas y cent\u00edmetros<\/p>\n
En el dise\u00f1o impreso se trabaja con pulgadas y cent\u00edmetros, pero en el dise\u00f1o web solo se trabaja con pixeles. As\u00ed pues, dependiendo de la resoluci\u00f3n de la pantalla (pixeles por pulgada o dpi) una misma imagen se puede ver mayor o menor. Las medidas de los dise\u00f1os web siempre son p\u00edxeles, aunque en ocasiones se pueden utilizar porcentajes de pantalla o porcentajes de \u00e1rea (se explica m\u00e1s adelante).
Si les cuesta dise\u00f1ar con pixeles, pueden utilizar la resoluci\u00f3n 72 dpi, que es la resoluci\u00f3n est\u00e1ndar de la mayor\u00eda de pantallas de ordenador. Dise\u00f1ando a esta resoluci\u00f3n, la mayor\u00eda de usuarios ver\u00e1n las im\u00e1genes y elementos de su dise\u00f1o al mismo tama\u00f1o que en su pantalla.<\/p>\n
P\u00edxel: <\/strong>la menor unidad de medida en la pantalla (un punto de luz). La mayor\u00eda de pantallas tienen una resoluci\u00f3n de 72 p\u00edxeles por pulgada o dpi.<\/p>\nArchivos peque\u00f1os en vez de grandes<\/p>\n
El dise\u00f1o impreso se trabaja con altas resoluciones de archivos y se procura mantener la mejor calidad en las im\u00e1genes y originales, mientras que en el dise\u00f1o web se trabaja con resoluciones bajas para ahorrar recursos del servidor y permitir que el usuario abra la p\u00e1gina r\u00e1pidamente. En dise\u00f1o web, debemos optimizar las im\u00e1genes y animaciones, es decir, bajar la resoluci\u00f3n lo m\u00e1s posible sin perder una calidad significativa. El peso (calculado en Kb o Mb) de una p\u00e1gina web se calcula como la suma de todos pesos de los documentos que abre una p\u00e1gina web (im\u00e1genes, 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\u00e1gina tarda un segundo m\u00e1s a descargarse y abrirse.<\/p>\n
RGB en vez de CMYK<\/p>\n
En el dise\u00f1o impreso se trabaja colores substractivos o CMYK, en cambio en el dise\u00f1o web solo se trabaja con colores aditivos o RGB.
El color es un error com\u00fan de los dise\u00f1adores gr\u00e1ficos cuando quieren dise\u00f1ar para web. En la escuela de dise\u00f1o te ense\u00f1an a utilizar siempre CMYK para que la impresi\u00f3n quede bien, pero en el mundo web, es todo lo contrario, las pantallas emiten luz \u00fanicamente interpretan datos RGB o aditivos.<\/p>\n
Posible editar despu\u00e9s de publicar<\/p>\n
El dise\u00f1o impreso no se puede modificar despu\u00e9s de la impresi\u00f3n. Por suerte el dise\u00f1o web se puede modificar despu\u00e9s de la publicaci\u00f3n, se pueden corregir errores, completar contenido no introducido inicialmente, o mantener actualizada la informaci\u00f3n. En este sentido, es mejor evitar dise\u00f1os que no sean flexibles, para que en el futuro el dise\u00f1o se pueda adaptar a diferentes tama\u00f1os de los contenidos, sin perjudicar la est\u00e9tica del conjunto.<\/p>\n
<\/p>\n
<\/p>\n
<\/p>\n
Usabilidad<\/h1>\n\nUn atributo determinante para la calidad de un sitio web es suusabilidad<\/strong>. Se trata de lograr que los visitantes encuentren r\u00e1pidamente aquello que buscan, con el m\u00ednimo esfuerzo por su parte. Sea cual sea el contenido o la finalidad de nuestra web, navegar por ella debe resultar una experiencia gratificante.<\/p>\nWeb usable: <\/strong>es aquella en la que los usuarios pueden interactuar de la forma m\u00e1s f\u00e1cil, c\u00f3moda, evidente y segura posible. Una web usable denota calidad, genera confianza y nos diferencia positivamente de otras alternativas.<\/p>\nLos usuarios pasan mucho menos tiempo visitando una p\u00e1gina web de lo que sus dise\u00f1adores desear\u00edan, por lo que hay que facilitarles las cosas al m\u00e1ximo. Cuando un usuario encuentra que la navegaci\u00f3n por una web es c\u00f3moda, agradable y \u00fatil, existen mayores probabilidades de que la visite de nuevo en el futuro.<\/p>\n
Lograr un buen nivel de usabilidad requiere combinar h\u00e1bilmente una serie de elementos: tecnolog\u00eda, dise\u00f1o, contenidos\u2026 Aunque no existen recetas universales, he aqu\u00ed algunos criterios a tener en cuenta:<\/p>\n
\n- >Crear una jerarqu\u00eda visual clara en cada p\u00e1gina. <\/strong>Debe percibirse a simple vista cu\u00e1l es la importancia de los distintos contenidos, qu\u00e9 relaci\u00f3n existe entre ellos, a qu\u00e9 tema o bloque pertenecen… La colocaci\u00f3n, el tama\u00f1o, la tipograf\u00eda o los colores de los textos y de los dem\u00e1s elementos de la p\u00e1gina son los principales recursos a utilizar.<\/li>\n
- >Dar el control al usuario. <\/strong>\u00c9ste debe sentir en todo momento que sabe d\u00f3nde est\u00e1 y que controla la situaci\u00f3n. Nada importante deber\u00eda situarse a m\u00e1s de dos clics de distancia. Los t\u00edtulos y contenidos de cada apartado deben ser claros y visibles. Tambi\u00e9n son muy \u00fatiles los men\u00fas de situaci\u00f3n, la navegaci\u00f3n por pesta\u00f1as, las opciones de volver atr\u00e1s o deshacer una acci\u00f3n, la visualizaci\u00f3n clara de las distintos pasos de un proceso (la compra on-line, por ejemplo).<\/li>\n
- >Facilitar la interacci\u00f3n. <\/strong>Suele ser muy positivo que una web permita al usuario \u201chacer cosas\u201d: clicar, desplegar, abrir, mover… En todo caso, el acceso y el uso de cualquier elemento de interacci\u00f3n debe ser intuitivo, r\u00e1pido y f\u00e1cil. No podemos permitirnos frustrar al usuario o hacerle perder el tiempo.<\/li>\n
- >Aprovechar las convenciones y llamar a las cosas por su nombre. <\/strong>La mayor\u00eda de usuarios tienen ciertas expectativas derivadas de su experiencia navegando por internet. Saben, m\u00e1s o menos, d\u00f3nde se sit\u00faan los men\u00fas, c\u00f3mo funciona un buscador, para qu\u00e9 sirven determinados botones, qu\u00e9 significan ciertos iconos o expresiones, etc. As\u00ed, hay que situar los contenidos donde el usuario espera que est\u00e9n y hacer que las cosas funcionen como se espera que lo hagan. Si queremos sorprender o hacer \u201calgo diferente\u201d, hemos de asegurarnos de que ello no suponga una complicaci\u00f3n innecesaria.<\/li>\n
- >Simplificar<\/strong>. Hay que evitar la informaci\u00f3n 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\u00e1genes y animaciones, y crearemos men\u00fas claros, bien estructurados y desplegables si hay muchas opciones a mostrar.<\/li>\n<\/ul>\n
No hay que entender la usabilidad como un lastre para nuestra creatividad. Podemos innovar y ser originales mientras no olvidemos quenuestro dise\u00f1o debe estar centrado en el usuario<\/strong>. \u00c9l es el verdadero protagonista y hemos de asegurarnos de que comprender\u00e1 y podr\u00e1 seguirnos el juego en todo momento.<\/p>\nOtros aspectos a tener en cuenta<\/strong>:<\/p>\n\n- >Situar los elementos importantes siempre a mano.<\/li>\n
- >Los usuarios no siempre entran por la p\u00e1gina principal (poner men\u00fas de navegaci\u00f3n en todas las p\u00e1ginas).<\/li>\n
- >Dejar claro qu\u00e9 elementos son enlaces y cu\u00e1les no.<\/li>\n
- >A\u00f1adir un buscador o un mapa del sitio web si \u00e9ste tiene mucho contenido i\/o p\u00e1ginas.<\/li>\n
- >Enlazar a cualquier informaci\u00f3n en menos de 3 clicks (o enlaces)<\/li>\n
- >Mantener una coherencia en el dise\u00f1o de toda la p\u00e1gina.<\/li>\n
- >Seguir las reglas b\u00e1sicas del buen dise\u00f1o: selecci\u00f3n de colores, tipograf\u00edas, regla de los tercios\u2026<\/li>\n
- >No distraer el usuario con excesivas animaciones o elementos que parpadean.<\/li>\n
- >Intentar que los contenidos no tengan faltas de ortograf\u00eda.<\/li>\n
- >No abrir nuevas ventanas del navegador innecesariamente…<\/li>\n<\/ul>\n
Ejemplo web que intenta romper todas las reglas de la usabilidad:http:\/\/theworldsworstwebsiteever.com\/<\/a>
(listado de errores del web:http:\/\/theworldsworstwebsiteever.com\/new_page_1.htm<\/a>).
Otro sitio con listados de dise\u00f1os web que se deben evitar copiar:http:\/\/www.javajan.com\/?id=271-guia<\/a><\/p>\n<\/p><\/div>\n <\/p>\n<\/p><\/div>\n
<\/p>\n
<\/p>\n
<\/p>\n
Arquitectura de un sitio web<\/h1>\n\nAlgunos dicen que dise\u00f1ar para web es m\u00e1s parecido a la arquitectura que al dise\u00f1o gr\u00e1fico. Como en una casa, antes de escoger los muebles, el color de las cortinas o la iluminaci\u00f3n, es importante saber c\u00f3mo estar\u00e1 estructurada la planta, c\u00f3mo ser\u00e1 el sal\u00f3n, donde estar\u00e1n las habitaciones, como se acceder\u00e1 a ellas, donde estar\u00e1n las ventanas… Asimismo en la web, si la estructura no es s\u00f3lida e intuitiva, el arte de la p\u00e1gina no sirve para nada.<\/p>\n
Antes de empezar a trabajar en el aspecto puramente est\u00e9tico de las p\u00e1ginas web, imaginando animaciones impresionantes y gr\u00e1ficos atractivos, es indispensables pensar en la estructura del sitio web. Para eso, fundamentalmente, tendremos que:<\/p>\n
\n- >Definir las secciones y p\u00e1ginas web que debe tener el sitio.<\/li>\n
- >Escoger las secciones o p\u00e1ginas a las que podremos acceder desde la p\u00e1gina principal (o de inicio).<\/li>\n
- >Decidir si alguna secci\u00f3n o p\u00e1gina tiene que destacar m\u00e1s respecto las dem\u00e1s.<\/li>\n
- >Distribuir el contenido a presentar entre las distintas secciones y p\u00e1ginas.<\/li>\n
- >Concretar las distintas v\u00edas de acceso a cada una de p\u00e1ginas web del sitio (es importante ofrecer m\u00faltiples maneras de acceder a la misma informaci\u00f3n).<\/li>\n
- >Especificar el n\u00famero de idiomas que dispondr\u00e1 el sitio web.<\/li>\n<\/ul>\n
Para ayudar a concretar la estructura final del sitio web, muchos dise\u00f1adores y programadores web recomiendan hacer un esquema a mano alzada, con post-its o con un simple programa de dise\u00f1o del ordenador, que nos permita realizar cambios f\u00e1cilmente a medida que redescubrimos mejores estructuras para nuestro sitio web.<\/p>\n
Ejemplo de la estructura de un sitio web en el que se detalla todas las p\u00e1ginas y el recorrido para acceder a ellas.<\/span><\/p>\nNormalmente, el contenido de un sitio web se estructura en diferentes p\u00e1ginas web, pero debemos mencionar una tendencia (no muy utilizada ni recomendada), llamada \u201cparallax scrolling\u201d, que estructura todos los contenidos en una solo p\u00e1gina web y permite que el usuario acceda a ellos mediante enlaces internos o bajando por la barra de desplazamiento o \u201cscroll\u201d.<\/p>\n
Ejemplos web de parallax scrolling: http:\/\/www.javajan.com\/news.php?id=277-guia<\/a><\/p>\n<\/p><\/div>\n <\/p>\n
<\/p>\n
<\/p>\n
Estructura de una p\u00e1gina web<\/h1>\n\nUna vez ya tengamos clara como estar\u00e1 estructurada la planta de la casa (sitio web a dise\u00f1ar), podemos empezar a dise\u00f1ar la estructura de cada habitaci\u00f3n (p\u00e1gina web), decidiendo donde pondremos los muebles (contenido) y la decoraci\u00f3n (elementos gr\u00e1ficos). Con especial esmero tendremos que estructurar el sal\u00f3n de la casa (p\u00e1gina principal), donde recibiremos a todos nuestros invitados (usuarios), para que sea lo m\u00e1s confortable posible (dise\u00f1o) pero tambi\u00e9n aporte el m\u00e1ximo de informaci\u00f3n sobre los anfitriones y sobre los contenidos de las distintas habitaciones (usabilidad).<\/p>\n
Para determinar la estructura de cada p\u00e1gina web, tendremos que definir (entre otros):<\/p>\n
\n- >Qu\u00e9 tipo de web quiere el cliente: tipo tarjeta de visita, tipo cat\u00e1logo, tipo anuncio de revista, tipo juego, una combinaci\u00f3n entre las anteriores…<\/li>\n
- >Qu\u00e9 tipo de informaci\u00f3n desea presentar el cliente: mucha imagen, mucha informaci\u00f3n escrita…<\/li>\n
- >Qu\u00e9 mensaje deber\u00eda de recibir el usuario cuando abra la p\u00e1gina principal.<\/li>\n
- >Hac\u00eda qu\u00e9 secciones del web se deber\u00eda sentir atra\u00eddo.<\/li>\n
- >Qu\u00e9 elementos comunes deben presentarse en todas las p\u00e1ginas (por ejemplo sistema de navegaci\u00f3n).<\/li>\n
- >Qu\u00e9 contenido espec\u00edfico deber\u00eda presentarse en cada p\u00e1gina.<\/li>\n<\/ul>\n
De todos modos, antes de empezar a dise\u00f1ar la estructura de una p\u00e1gina web, deber\u00edamos conocer las estructuras est\u00e1ndares utilizadas normalmente.<\/p>\n
<\/p>\n<\/p><\/div>\n
\nEstructuras est\u00e1ndares<\/h2>\n\nUno de los aspectos m\u00e1s importantes de las estructura de una p\u00e1gina web es decidir d\u00f3nde posicionaremos los men\u00fas de navegaci\u00f3n y enlaces a otras p\u00e1ginas web y d\u00f3nde posicionaremos el contenido que van a consultar los navegantes. Existen diversos tipos de estructuras est\u00e1ndares de p\u00e1ginas web que especifican la posici\u00f3n de los men\u00fas de navegaci\u00f3n y el contenido, manteni\u00e9ndose esta estructura y dise\u00f1o durante toda la navegaci\u00f3n por el sitio web.<\/p>\n
Sin que sea sorprendente, los men\u00fas de navegaci\u00f3n acostumbran a posicionarse en los m\u00e1rgenes de la p\u00e1gina, dejando los contenidos en el centro. Por defecto, las estructuras est\u00e1ndares posicionan los men\u00fas de navegaci\u00f3n arriba o en los laterales, pero tambi\u00e9n existen otras posibilidades:<\/p>\n
Bloque de navegaci\u00f3n a la izquierda:<\/p>\n
Permite presentar muchos men\u00fas o enlaces, pues cada l\u00ednea puede ser un enlace (por ejemplo, el men\u00fa de navegaci\u00f3n de esta gu\u00eda). Tampoco supone mucho problema que los men\u00fas se extiendan fuera de la pantalla, porque el usuario puede visualizarlos con la barra de desplazamiento vertical. Este m\u00e9todo es ideal si los men\u00fas son administrables, pues el dise\u00f1o no se ver\u00e1 muy afectado si aumentan o disminuyen el n\u00famero de enlaces.<\/p>\n
<\/a>Ejemplo de bloque de navegaci\u00f3n a la izquierda:guiadise\u00f1o.com<\/a><\/p>\nBloque de navegaci\u00f3n arriba:<\/p>\n
Ideal si el sitio web no tiene demasiadas secciones. Los men\u00fas se sit\u00faan en l\u00ednea y ocupan mucho espacio. Es f\u00e1cil si los men\u00fas se despliegan con otros submen\u00fas (es m\u00e1s f\u00e1cil la navegaci\u00f3n que si los submen\u00fas se abren lateralmente)<\/p>\n
<\/a>Ejemplo de bloque de navegaci\u00f3n arriba:http:\/\/www.apple.es<\/a><\/p>\nBloque de navegaci\u00f3n derecha:<\/p>\n
Las mismas ventajas que el men\u00fa a la izquierda pero menos usado.<\/p>\n
<\/a>Ejemplo de bloque de navegaci\u00f3n a la izquierda:http:\/\/www.narfstuff.co.uk<\/a><\/p>\nCombinaci\u00f3n de los anteriores:<\/p>\n
Si tenemos muchos enlaces a presentar, siempre podemos utilizar cualquier combinaci\u00f3n de los anteriores (arriba e izquierda; izquierda y derecha; arriba, izquierda y derecha;\u2026), sobre todo si los men\u00fas se pueden agrupar en dos o tres grandes grupos.<\/p>\n
<\/a>Ejemplo de combinaci\u00f3n de bloques:http:\/\/www.apple.es<\/a><\/p>\nPie de p\u00e1gina<\/p>\n
El pie de p\u00e1gina acostumbra a tener una gran importancia en las estructuras de los webs actuales, donde se pueden repetir los men\u00fas de navegaci\u00f3n (para que el usuario no deba subir por la p\u00e1gina), situar los enlaces alaviso legal<\/em>,copyright<\/em>, redes sociales: facebook, RSS, twitter o los datos de direcci\u00f3n y contacto.<\/p>\nEjemplos de pie de p\u00e1gina:<\/p>\n
<\/a>Ejemplo de pie de p\u00e1gina:http:\/\/bristolarchiverecords.com<\/a><\/p>\n<\/a>Ejemplo de pie de p\u00e1gina:http:\/\/yuruinspires.com<\/a><\/p>\n<\/a>Ejemplo de pie de p\u00e1gina:http:\/\/splitdadiz.com<\/a><\/p>\n<\/a>Ejemplo de pie de p\u00e1gina:http:\/\/www.mecannical.com<\/a><\/p>\n<\/a>Ejemplo de pie de p\u00e1gina:http:\/\/bitsamppixels.com<\/a><\/p>\nOtros ejemplos web de pies de p\u00e1gina:http:\/\/www.javajan.com\/news.php?id=205-guia<\/a><\/p>\nP\u00e1gina principal<\/p>\n
La p\u00e1gina principal es un caso especial, para la cual no existe una estructura est\u00e1ndar. Aunque la p\u00e1gina principal tambi\u00e9n se puede estructurar de un modo est\u00e1ndar, en la mayor\u00eda de sitios web, la p\u00e1gina principal no se dise\u00f1a para presentar contenido, y m\u00e1s bien se imagina como escaparate de la empresa, en el que tambi\u00e9n se presentan los men\u00fas o enlaces a las diferentes p\u00e1ginas o secciones del web.<\/p>\n
Ejemplos de p\u00e1gina principal:<\/p>\n
<\/a>Ejemplo de p\u00e1gina principal:http:\/\/www.coullon.com<\/a><\/p>\n<\/a>Ejemplo de p\u00e1gina principal:http:\/\/www.luhsetea.com<\/a><\/p>\n<\/a>Ejemplo de p\u00e1gina principal:http:\/\/dotmick.com<\/a><\/p>\n<\/a>Ejemplo de p\u00e1gina principal:http:\/\/gnosh.co.uk<\/a><\/p>\n<\/a>Ejemplo de p\u00e1gina principal:http:\/\/wearecupcup.com<\/a><\/p>\n<\/a><\/p>\nEjemplo de p\u00e1gina principal:http:\/\/www.mcfarlanechangemanagement.com.au<\/a><\/p>\n<\/p><\/div>\n<\/p><\/div>\n <\/div>\n <\/div>\n\nDise\u00f1ando la estructura<\/h2>\n\nConociendo las estructuras web m\u00e1s utilizadas, ya podemos empezar a dibujar la estructura espec\u00edfica de nuestra p\u00e1gina web, dibujando y posicionando a nuestro gusto los bloques de men\u00fas, contenido, gr\u00e1ficos, y los sub-bloques dentro de cada uno de los anteriores.<\/p>\n
Cada dise\u00f1ador tendr\u00e1 su propio m\u00e9todo para plasmar la estructura imaginada de una p\u00e1gina web a la pantalla de su ordenador. Aqu\u00ed transcribimos el m\u00e9todo de trabajo espec\u00edfico de un dise\u00f1ador:\u201cComienzo por bosquejar algunos posibles dise\u00f1os sobre papel. Despu\u00e9s de unos pocos de estos bocetos, decido cual me gusta m\u00e1s o cual se adapta mejor a los requisitos del cliente y el salto al Photoshop (o freehand), y uso la herramienta de rect\u00e1ngulo para bloquear las \u00e1reas que he marcado en mi papel. Una vez que he definido mi dise\u00f1o, experimento con los colores de fondo y de los rect\u00e1ngulos hasta tener un esquema de color s\u00f3lido. Y sigo trabajando con p\u00edxeles hasta que, finalmente, tengo un borrador para mostrar al cliente.\u201d<\/em><\/p>\nEjemplo de dise\u00f1o de la estructura:<\/p>\n
<\/a><\/p>\nEjemplo de dise\u00f1o para la p\u00e1gina:http:\/\/www.ginecologiavhebron.com<\/a>(dise\u00f1o deDeumonforte<\/em>y programaci\u00f3n Javajan)<\/p>\nTrabajando con bloques rectangulares<\/p>\n
La estructura de una p\u00e1gina web se sub-divide en bloques rectangulares, dentro de los cuales vamos a posicionar los diferentes elementos de dise\u00f1o o contenido. M\u00e1s tarde, al aplicar dise\u00f1o sobre estos rect\u00e1ngulos podemos enmascararlos eliminando los bordes o utilizando formas curvas, pero es importante conocer que cualquier estructura web est\u00e1 basada en rect\u00e1ngulos horizontales (no en diagonal).<\/p>\n
A pesar de todo, el dise\u00f1o de la estructura web no finaliza al posicionar los diferentes bloques, porque tenemos de definir como se adaptaran y comportaran en funci\u00f3n de la resoluci\u00f3n de pantalla.<\/p>\n<\/p><\/div>\n<\/p><\/div>\n
<\/p>\n
<\/p>\n
<\/p>\n
Adaptaci\u00f3n de la estructura en funci\u00f3n de la resoluci\u00f3n<\/h1>\nAdaptaci\u00f3n del bloque principal<\/h2>\n\nBloque principal: <\/strong>recuadro exterior que engloba toda la estructura de p\u00e1gina web, es decir, no existe ning\u00fan recuadro o bloque secundario que rebase el bloque o recuadro principal.<\/p>\nBloque secundario: <\/strong>cada uno de los recuadros que componen el bloque o recuadro principal.<\/p>\nExisten tres maneras distintas de adaptar el bloque principal en funci\u00f3n del tama\u00f1o de la pantalla:<\/p>\n
Fijo:<\/p>\n
El bloque se dise\u00f1a con un tama\u00f1o fijo que no se va a modificar en funci\u00f3n del tama\u00f1o de la pantalla. Es el m\u00e1s f\u00e1cil de dise\u00f1ar y maquetar porqu\u00e9 los elementos del dise\u00f1o o bloques secundarios siempre estar\u00e1n en la misma posici\u00f3n y mantendr\u00e1n el mismo ancho.<\/p>\n
Ejemplo p\u00e1gina web de estructura fija, mostrada en pantallas de distinta resoluci\u00f3n. A resoluciones grandes aparecen muchos espacios en blanco; a resoluciones peque\u00f1as el dise\u00f1o queda cortado<\/p>\n
Si escogemos una estructura principal fija, tenemos que pensar qu\u00e9 tama\u00f1o en pixeles vamos a utilizar. Seg\u00fan las estad\u00edsticas actuales (http:\/\/www.w3schools.com\/browsers\/browsers_display.asp<\/a>), el 98% de usuarios tienen resoluciones igual o superiores a 1024×768, aunque empiezan a crecer el n\u00famero de usuarios con pantallas inferiores a 800×600 debido a la navegaci\u00f3n con tabletas y tel\u00e9fonos.<\/p>\nSi dise\u00f1amos un bloque principal fijo, podr\u00eda ser bueno tomar como referencia la resoluci\u00f3n de 1024×768, aunque el ancho del bloque principal deber\u00eda de ser m\u00e1s peque\u00f1o, pues el navegador se necesita algunos pixeles para los men\u00fas, m\u00e1rgenes y barras de desplazamiento. As\u00ed pues, deber\u00edamos de dise\u00f1ar un bloque principal de un ancho m\u00e1ximo de 990 pixeles. Si queremos que todo el contenido aparezca en la pantalla y no aparezcan barras de desplazamiento verticales, la altura m\u00e1xima del dise\u00f1o deber\u00eda de ser entre 600 y 650 pixeles (depender\u00e1 mucho del espacio que ocupen los men\u00fas del navegador del usuario).<\/p>\n
Normalmente, la estructura principal fija se centra en la pantalla para resoluciones grandes, aunque tambi\u00e9n se puede alinear a la izquierda o a la derecha.<\/p>\n
Fluido o l\u00edquido:<\/p>\n
Con independencia de la resoluci\u00f3n de una pantalla, un bloque principal fluido ocupa un porcentaje horizontal de la pantalla, normalmente el 100% (aunque tambi\u00e9n puede ocupar el 90% centrado, o alineado a la izquierda o derecha). Normalmente, al disminuir la resoluci\u00f3n o tama\u00f1o de una pantalla, el bloque fluido se estrecha horizontalmente pero se alarga verticalmente para poder presentar toda la informaci\u00f3n 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\u00f3n fija o fluida (se ver\u00e1 en el siguiente punto).<\/p>\n
Dise\u00f1ar y maquetar una estructura fluida es m\u00e1s complejo, pues se tienen que prever c\u00f3mo se van a comportar cada uno de los bloques secundarios en su interior. Bien dise\u00f1ada, una estructura fluida se puede adaptar desde las resoluciones de pantalla m\u00e1s grandes hasta las resoluciones de pantallas m\u00e1s peque\u00f1as de los tel\u00e9fonos, aunque para \u00e9ste \u00faltimo caso se recomiendan distintas estructuras, como se ver\u00e1 a continuaci\u00f3n.<\/p>\n
Ejemplo de adaptaci\u00f3n fluida (en este caso, todos los bloques secundarios tambi\u00e9n son fluidos):<\/p>\n
<\/p>\n
Dos buenos art\u00edculo sobre dise\u00f1o fluido:
http:\/\/www.javajan.com\/news.php?id=225-guia<\/a> y http:\/\/www.javajan.com\/news.php?id=193-guia<\/a><\/p>\nEstructuras distintas – Dise\u00f1o sensible:<\/p>\n
El dise\u00f1o sensible (del ingl\u00e9s: responsive design) es una opci\u00f3n cada vez m\u00e1s utilizada en el dise\u00f1o web actual es crear estructuras del bloque principal distintas, reacomodando los contenidos en funci\u00f3n de la resoluci\u00f3n de la pantalla. Esto puede ser muy \u00fatil cuando consideremos el acceso a nuestro web a trav\u00e9s de tel\u00e9fonos, que tienen resoluciones de pantallas muy peque\u00f1as. Algunos navegadores para m\u00f3viles reestructuran el dise\u00f1o de los webs de un modo eficiente, pero si queremos asegurar la buena visualizaci\u00f3n y dise\u00f1o de nuestro web a cualquier resoluci\u00f3n, deberemos de crear varias estructuras en funci\u00f3n de la resoluci\u00f3n de la pantalla.<\/p>\n
En un dise\u00f1o sensible, no aparecer\u00e1n barras de desplazamiento horizontales (scroll) hasta resoluciones muy peque\u00f1as.<\/p>\n
Podemos decidir las medidas a las cuales se presentaran las diferentes estructuras del bloque principal en funci\u00f3n del dise\u00f1o planteado, pero tambi\u00e9n podemos determinarlas consultando las pantallas m\u00e1s utilizadas actualmente:<\/p>\n
Resoluciones de pantalla m\u00e1s utilizadas:
http:\/\/www.w3schools.com\/browsers\/browsers_display.asp<\/a>
Resoluciones de pantalla m\u00e1s utilizadas en tel\u00e9fonos m\u00f3viles:
http:\/\/deviceatlas.com\/resourcecentre\/Explore+DeviceAtlas+Data\/Data+Explorer#_\/<\/a><\/p>\nSi queremos optimizar recursos y dise\u00f1ar \u00fanicamente dos estructuras de web, una posible soluci\u00f3n ser\u00eda dise\u00f1ar 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\u00eda ser fija para pantallas mayores a 480 p\u00edxeles (iPhone) que se vuelva fluido para resoluciones menores, hasta las pantallas de los tel\u00e9fonos m\u00e1s peque\u00f1as (160 pixeles o menos). Es importante recordar que a todas estas medidas debemos restar 30 o 40 pixeles para que el dise\u00f1o no quede recortado por barras de desplazamiento o m\u00e1rgenes del navegador web.<\/p>\n
Buen art\u00edculo sobre dise\u00f1o web sobre m\u00f3viles:
http:\/\/www.circulodemaquetadores.com\/disenando-para-moviles-diseno-para-multiples-tamanos-de-pantalla\/<\/a>
Ventajas del web frente las aplicaciones y an\u00e1lisis de los distintas posibilidades de dise\u00f1o web para m\u00f3vil
http:\/\/www.javajan.com\/news.php?id=350-guia<\/a><\/p>\nEjemplo de estructuras distintas: a 800 pixeles existe una transici\u00f3n que camb\u00eda de una estructura de 3 columnas a una estructura de 2 columnas (manteniendo la mayor\u00eda de contenidos):<\/p>\n
<\/p>\n
Consultar tambi\u00e9n los diversos ejemplos web con distintas estructuras fluidas que presentamos y explicamos al final del cap\u00edtulo.<\/p>\n
Comparativa:<\/p>\n
Ventajas y desventajas de los tres modelos de adaptaci\u00f3n a las distintas resoluciones de pantalla:<\/p>\n
\n
Introducci\u00f3n<\/h1>\n\nHay dificultades que muchos dise\u00f1adores tienen para entender las importantes diferencias entre el dise\u00f1o impreso y el dise\u00f1o web, las limitaciones que presenta respecto al dise\u00f1o tradicional pero tambi\u00e9n las nuevas posibilidades que permiten formas ins\u00f3litas de expresi\u00f3n y comunicaci\u00f3n.<\/p>\n
Esta gu\u00eda est\u00e1 pensada para terminar con estas dificultades, para que cualquier dise\u00f1ador gr\u00e1fico, tenga o no experiencia t\u00e9cnica web, adquiera los conocimientos necesarios que le permitan dise\u00f1ar cualquier sitio o p\u00e1gina web, dando rienda suelta a su imaginaci\u00f3n y creatividad, explotando todas las posibilidades que ofrece este medio. Pero, al mismo tiempo ci\u00f1\u00e9ndose a las limitaciones tecnol\u00f3gicas del momento, para que ning\u00fan maquetador o programador competente jam\u00e1s mire su dise\u00f1o y le diga \u00abeso no se puede hacer\u00bb.<\/p>\n
Dicen que las modas van y vienen, pero que el buen dise\u00f1o es atemporal. Lamentablemente para los buenos dise\u00f1adores, las tecnolog\u00edas tambi\u00e9n van y vienen (o evolucionan) y los buenos dise\u00f1os se tienen de adaptar a la tecnolog\u00eda del momento, si no caducan.<\/p>\n
<\/p>\n
<\/p>\n
Vocabulario y definiciones indispensables<\/h1>\n\n\n- P\u00e1gina web: <\/strong>documento que forma parte de un sitio web, con un contenido que puede incluir texto, im\u00e1genes, elementos multimedia y enlaces para navegar a otras p\u00e1ginas web o contenidos.<\/li>\n
- Sitio web: <\/strong>colecci\u00f3n de p\u00e1ginas web relacionadas y comunes a un dominio de Internet o subdominio.<\/li>\n
- P\u00e1gina principal o home<\/em>: <\/strong>p\u00e1gina de entrada a un sitio web, normalmente con un dise\u00f1o mucho m\u00e1s trabajado, que presenta el sitio y las opciones de navegaci\u00f3n a las p\u00e1ginas o contenidos del sitio.<\/li>\n
- Enlace web: <\/strong>elemento de una p\u00e1gina web que, al clicarlo te lleva a otra p\u00e1gina web o a otra parte de la misma p\u00e1gina web.<\/li>\n
- Men\u00fa de navegaci\u00f3n: <\/strong>conjunto de enlaces web que reflejan la organizaci\u00f3n de los contenidos del sitio web y enlazan a cada una de sus p\u00e1ginas web.<\/li>\n
- Dominio de Internet: <\/strong>es un nombre \u00fanico 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\u00f1adores).<\/li>\n
- URL: <\/strong>cadena de caracteres con la cual se asigna una direcci\u00f3n \u00fanica a cada uno de los recursos de informaci\u00f3n disponibles en la Internet (p\u00e1ginas web y sus elementos: im\u00e1genes, hojas de estilos, elementos multimedia,\u2026). La URL de la p\u00e1gina principal normalmente es el nombre del dominio.<\/li>\n
- Servidor web: <\/strong>ordenador remoto que provee los datos solicitados por parte de los navegadores de otras computadoras. Las p\u00e1ginas web y dominios de Internet deben de ser alojadas en un servidor. Existen muchas empresas que poseen servidores.<\/li>\n
- Navegador web: <\/strong>aplicaci\u00f3n que interpreta el contenido de las p\u00e1ginas web y lo presenta en pantalla permitiendo al usuario interactuar. Ejemplos de navegador: Internet Explorer, Mozilla Firefox, Google Chrome, Safari… Al dise\u00f1ar una p\u00e1gina web, tenemos que tener en cuenta que los distintos navegadores pueden presentar nuestros dise\u00f1os con peque\u00f1as variaciones.<\/li>\n
- Resoluci\u00f3n de ventana web: <\/strong>n\u00famero de p\u00edxeles m\u00e1ximos horizontales y verticales disponibles para presentar una p\u00e1gina web. La resoluci\u00f3n vendr\u00e1 determinada por la resoluci\u00f3n de la pantalla del dispositivo y por el espacio que el navegador web deja para la presentaci\u00f3n. Las distintas resoluciones disponibles Internet limitaran en gran medida el dise\u00f1o web.\n
Ejemplos de pantalla ipad (1024 x 768) y iphone (640 x 480) mostrando la misma p\u00e1gina web, presenta un dise\u00f1o diferente para cada una de las resoluciones.<\/span><\/p>\n<\/li>\n- Dise\u00f1ador web: <\/strong>Profesional que utiliza programas de dise\u00f1o tradicional, como photoshop, freehand, ilustrator, indesign\u2026<\/li>\n
- Maquetador web: <\/strong>Profesional que maqueta los dise\u00f1os utilizando las codificaciones est\u00e1ndares (html, css, javascript\u2026), transformando los dise\u00f1os en p\u00e1ginas web.<\/li>\n
- Programador web: <\/strong>Profesional que programa las p\u00e1ginas web maquetadas (php, asp, jquery \u2026) para que presenten informaci\u00f3n de una base de datos, personalicen los contenidos, env\u00eden los formularios, interact\u00faen con el usuario\u2026<\/li>\n<\/ul>\n
<\/span><\/p>\n<\/p><\/div>\n<\/p><\/div>\nDiferencias b\u00e1sicas entre dise\u00f1o impreso
y dise\u00f1o web<\/h1>\n\nInteractuar en vez de mostrar<\/p>\n
El dise\u00f1o impreso est\u00e1 basado en ver, pero el dise\u00f1o web est\u00e1 basado en hacer.
La funci\u00f3n del dise\u00f1o tradicional es contar historias, la misi\u00f3n del dise\u00f1o digital es entablar conversaciones.
El soporte gr\u00e1fico se sostiene sobre relaciones espaciales y la experiencia web sobre relaciones temporales. El dise\u00f1o impreso es est\u00e1tico, en cambio, la experiencia de un sitio web se define por la interacci\u00f3n del usuario con dise\u00f1o y contenido. Por ejemplo, un usuario hace clic sobre la navegaci\u00f3n o se desplaza hacia abajo para leer una p\u00e1gina.
Un buen dise\u00f1o impreso tiene que entenderse y ser bonito, pero un buen dise\u00f1o web tiene que entenderse, facilitar la navegaci\u00f3n (usabilidad) y ser bonito. Normalmente se recomienda priorizar la usabilidad, despu\u00e9s el contenido y si queda tiempo el arte. Aunque esto no implica que el buen dise\u00f1o se deba sacrificar para ganar usabilidad, en esta gu\u00eda vamos a explicar c\u00f3mo hacerlos compatibles.<\/p>\n
Espacio y entorno indefinido en vez de definido<\/p>\n
El dise\u00f1o impreso se visualiza en espacio limitado pero el dise\u00f1o web se tiene que poder visualizar en m\u00faltiples espacios, adem\u00e1s el dise\u00f1o web se puede extender fuera de la pantalla (podemos que utilizar barras de desplazamiento o scrolling).
Cuando se dise\u00f1a para imprimir, el resultado va a ser exactamente igual o muy parecido al original que hemos dise\u00f1ado y guardado, en cambio, cuando se dise\u00f1a una web, debemos considerar factores externos de los cuales no tenemos ning\u00fan control (el usuario puede tener resoluciones de pantalla diferente o utilizar un navegador web distinto, adem\u00e1s de no tener las tipograf\u00edas utilizadas,\u2026).
El dise\u00f1o impreso se visualiza igual en cualquier revista, en cambio, los diferentes navegadores web pueden presentar los elementos del dise\u00f1o 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\u2026 sin que alguno muestre errores.<\/p>\n
Problema con las tipograf\u00edas<\/p>\n
En el dise\u00f1o impreso se puede utilizar cualquier tipograf\u00eda, pero el dise\u00f1o web normalmente solo muestra las tipograf\u00edas que el usuario tenga instaladas en su ordenador. M\u00e1s adelante veremos que existen diversas soluciones a este problema, por ejemplo poniendo el texto con el formato y la tipograf\u00eda deseada en im\u00e1genes, pero tendremos que tener en cuenta las limitaciones.<\/p>\n
Pixeles en vez de pulgadas y cent\u00edmetros<\/p>\n
En el dise\u00f1o impreso se trabaja con pulgadas y cent\u00edmetros, pero en el dise\u00f1o web solo se trabaja con pixeles. As\u00ed pues, dependiendo de la resoluci\u00f3n de la pantalla (pixeles por pulgada o dpi) una misma imagen se puede ver mayor o menor. Las medidas de los dise\u00f1os web siempre son p\u00edxeles, aunque en ocasiones se pueden utilizar porcentajes de pantalla o porcentajes de \u00e1rea (se explica m\u00e1s adelante).
Si les cuesta dise\u00f1ar con pixeles, pueden utilizar la resoluci\u00f3n 72 dpi, que es la resoluci\u00f3n est\u00e1ndar de la mayor\u00eda de pantallas de ordenador. Dise\u00f1ando a esta resoluci\u00f3n, la mayor\u00eda de usuarios ver\u00e1n las im\u00e1genes y elementos de su dise\u00f1o al mismo tama\u00f1o que en su pantalla.<\/p>\n
P\u00edxel: <\/strong>la menor unidad de medida en la pantalla (un punto de luz). La mayor\u00eda de pantallas tienen una resoluci\u00f3n de 72 p\u00edxeles por pulgada o dpi.<\/p>\nArchivos peque\u00f1os en vez de grandes<\/p>\n
El dise\u00f1o impreso se trabaja con altas resoluciones de archivos y se procura mantener la mejor calidad en las im\u00e1genes y originales, mientras que en el dise\u00f1o web se trabaja con resoluciones bajas para ahorrar recursos del servidor y permitir que el usuario abra la p\u00e1gina r\u00e1pidamente. En dise\u00f1o web, debemos optimizar las im\u00e1genes y animaciones, es decir, bajar la resoluci\u00f3n lo m\u00e1s posible sin perder una calidad significativa. El peso (calculado en Kb o Mb) de una p\u00e1gina web se calcula como la suma de todos pesos de los documentos que abre una p\u00e1gina web (im\u00e1genes, 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\u00e1gina tarda un segundo m\u00e1s a descargarse y abrirse.<\/p>\n
RGB en vez de CMYK<\/p>\n
En el dise\u00f1o impreso se trabaja colores substractivos o CMYK, en cambio en el dise\u00f1o web solo se trabaja con colores aditivos o RGB.
El color es un error com\u00fan de los dise\u00f1adores gr\u00e1ficos cuando quieren dise\u00f1ar para web. En la escuela de dise\u00f1o te ense\u00f1an a utilizar siempre CMYK para que la impresi\u00f3n quede bien, pero en el mundo web, es todo lo contrario, las pantallas emiten luz \u00fanicamente interpretan datos RGB o aditivos.<\/p>\n
Posible editar despu\u00e9s de publicar<\/p>\n
El dise\u00f1o impreso no se puede modificar despu\u00e9s de la impresi\u00f3n. Por suerte el dise\u00f1o web se puede modificar despu\u00e9s de la publicaci\u00f3n, se pueden corregir errores, completar contenido no introducido inicialmente, o mantener actualizada la informaci\u00f3n. En este sentido, es mejor evitar dise\u00f1os que no sean flexibles, para que en el futuro el dise\u00f1o se pueda adaptar a diferentes tama\u00f1os de los contenidos, sin perjudicar la est\u00e9tica del conjunto.<\/p>\n
<\/p>\n
<\/p>\n
<\/p>\n
Usabilidad<\/h1>\n\nUn atributo determinante para la calidad de un sitio web es suusabilidad<\/strong>. Se trata de lograr que los visitantes encuentren r\u00e1pidamente aquello que buscan, con el m\u00ednimo esfuerzo por su parte. Sea cual sea el contenido o la finalidad de nuestra web, navegar por ella debe resultar una experiencia gratificante.<\/p>\nWeb usable: <\/strong>es aquella en la que los usuarios pueden interactuar de la forma m\u00e1s f\u00e1cil, c\u00f3moda, evidente y segura posible. Una web usable denota calidad, genera confianza y nos diferencia positivamente de otras alternativas.<\/p>\nLos usuarios pasan mucho menos tiempo visitando una p\u00e1gina web de lo que sus dise\u00f1adores desear\u00edan, por lo que hay que facilitarles las cosas al m\u00e1ximo. Cuando un usuario encuentra que la navegaci\u00f3n por una web es c\u00f3moda, agradable y \u00fatil, existen mayores probabilidades de que la visite de nuevo en el futuro.<\/p>\n
Lograr un buen nivel de usabilidad requiere combinar h\u00e1bilmente una serie de elementos: tecnolog\u00eda, dise\u00f1o, contenidos\u2026 Aunque no existen recetas universales, he aqu\u00ed algunos criterios a tener en cuenta:<\/p>\n
\n- >Crear una jerarqu\u00eda visual clara en cada p\u00e1gina. <\/strong>Debe percibirse a simple vista cu\u00e1l es la importancia de los distintos contenidos, qu\u00e9 relaci\u00f3n existe entre ellos, a qu\u00e9 tema o bloque pertenecen… La colocaci\u00f3n, el tama\u00f1o, la tipograf\u00eda o los colores de los textos y de los dem\u00e1s elementos de la p\u00e1gina son los principales recursos a utilizar.<\/li>\n
- >Dar el control al usuario. <\/strong>\u00c9ste debe sentir en todo momento que sabe d\u00f3nde est\u00e1 y que controla la situaci\u00f3n. Nada importante deber\u00eda situarse a m\u00e1s de dos clics de distancia. Los t\u00edtulos y contenidos de cada apartado deben ser claros y visibles. Tambi\u00e9n son muy \u00fatiles los men\u00fas de situaci\u00f3n, la navegaci\u00f3n por pesta\u00f1as, las opciones de volver atr\u00e1s o deshacer una acci\u00f3n, la visualizaci\u00f3n clara de las distintos pasos de un proceso (la compra on-line, por ejemplo).<\/li>\n
- >Facilitar la interacci\u00f3n. <\/strong>Suele ser muy positivo que una web permita al usuario \u201chacer cosas\u201d: clicar, desplegar, abrir, mover… En todo caso, el acceso y el uso de cualquier elemento de interacci\u00f3n debe ser intuitivo, r\u00e1pido y f\u00e1cil. No podemos permitirnos frustrar al usuario o hacerle perder el tiempo.<\/li>\n
- >Aprovechar las convenciones y llamar a las cosas por su nombre. <\/strong>La mayor\u00eda de usuarios tienen ciertas expectativas derivadas de su experiencia navegando por internet. Saben, m\u00e1s o menos, d\u00f3nde se sit\u00faan los men\u00fas, c\u00f3mo funciona un buscador, para qu\u00e9 sirven determinados botones, qu\u00e9 significan ciertos iconos o expresiones, etc. As\u00ed, hay que situar los contenidos donde el usuario espera que est\u00e9n y hacer que las cosas funcionen como se espera que lo hagan. Si queremos sorprender o hacer \u201calgo diferente\u201d, hemos de asegurarnos de que ello no suponga una complicaci\u00f3n innecesaria.<\/li>\n
- >Simplificar<\/strong>. Hay que evitar la informaci\u00f3n 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\u00e1genes y animaciones, y crearemos men\u00fas claros, bien estructurados y desplegables si hay muchas opciones a mostrar.<\/li>\n<\/ul>\n
No hay que entender la usabilidad como un lastre para nuestra creatividad. Podemos innovar y ser originales mientras no olvidemos quenuestro dise\u00f1o debe estar centrado en el usuario<\/strong>. \u00c9l es el verdadero protagonista y hemos de asegurarnos de que comprender\u00e1 y podr\u00e1 seguirnos el juego en todo momento.<\/p>\nOtros aspectos a tener en cuenta<\/strong>:<\/p>\n\n- >Situar los elementos importantes siempre a mano.<\/li>\n
- >Los usuarios no siempre entran por la p\u00e1gina principal (poner men\u00fas de navegaci\u00f3n en todas las p\u00e1ginas).<\/li>\n
- >Dejar claro qu\u00e9 elementos son enlaces y cu\u00e1les no.<\/li>\n
- >A\u00f1adir un buscador o un mapa del sitio web si \u00e9ste tiene mucho contenido i\/o p\u00e1ginas.<\/li>\n
- >Enlazar a cualquier informaci\u00f3n en menos de 3 clicks (o enlaces)<\/li>\n
- >Mantener una coherencia en el dise\u00f1o de toda la p\u00e1gina.<\/li>\n
- >Seguir las reglas b\u00e1sicas del buen dise\u00f1o: selecci\u00f3n de colores, tipograf\u00edas, regla de los tercios\u2026<\/li>\n
- >No distraer el usuario con excesivas animaciones o elementos que parpadean.<\/li>\n
- >Intentar que los contenidos no tengan faltas de ortograf\u00eda.<\/li>\n
- >No abrir nuevas ventanas del navegador innecesariamente…<\/li>\n<\/ul>\n
Ejemplo web que intenta romper todas las reglas de la usabilidad:http:\/\/theworldsworstwebsiteever.com\/<\/a>
(listado de errores del web:http:\/\/theworldsworstwebsiteever.com\/new_page_1.htm<\/a>).
Otro sitio con listados de dise\u00f1os web que se deben evitar copiar:http:\/\/www.javajan.com\/?id=271-guia<\/a><\/p>\n<\/p><\/div>\n <\/p>\n<\/p><\/div>\n
<\/p>\n
<\/p>\n
<\/p>\n
Arquitectura de un sitio web<\/h1>\n\nAlgunos dicen que dise\u00f1ar para web es m\u00e1s parecido a la arquitectura que al dise\u00f1o gr\u00e1fico. Como en una casa, antes de escoger los muebles, el color de las cortinas o la iluminaci\u00f3n, es importante saber c\u00f3mo estar\u00e1 estructurada la planta, c\u00f3mo ser\u00e1 el sal\u00f3n, donde estar\u00e1n las habitaciones, como se acceder\u00e1 a ellas, donde estar\u00e1n las ventanas… Asimismo en la web, si la estructura no es s\u00f3lida e intuitiva, el arte de la p\u00e1gina no sirve para nada.<\/p>\n
Antes de empezar a trabajar en el aspecto puramente est\u00e9tico de las p\u00e1ginas web, imaginando animaciones impresionantes y gr\u00e1ficos atractivos, es indispensables pensar en la estructura del sitio web. Para eso, fundamentalmente, tendremos que:<\/p>\n
\n- >Definir las secciones y p\u00e1ginas web que debe tener el sitio.<\/li>\n
- >Escoger las secciones o p\u00e1ginas a las que podremos acceder desde la p\u00e1gina principal (o de inicio).<\/li>\n
- >Decidir si alguna secci\u00f3n o p\u00e1gina tiene que destacar m\u00e1s respecto las dem\u00e1s.<\/li>\n
- >Distribuir el contenido a presentar entre las distintas secciones y p\u00e1ginas.<\/li>\n
- >Concretar las distintas v\u00edas de acceso a cada una de p\u00e1ginas web del sitio (es importante ofrecer m\u00faltiples maneras de acceder a la misma informaci\u00f3n).<\/li>\n
- >Especificar el n\u00famero de idiomas que dispondr\u00e1 el sitio web.<\/li>\n<\/ul>\n
Para ayudar a concretar la estructura final del sitio web, muchos dise\u00f1adores y programadores web recomiendan hacer un esquema a mano alzada, con post-its o con un simple programa de dise\u00f1o del ordenador, que nos permita realizar cambios f\u00e1cilmente a medida que redescubrimos mejores estructuras para nuestro sitio web.<\/p>\n
Ejemplo de la estructura de un sitio web en el que se detalla todas las p\u00e1ginas y el recorrido para acceder a ellas.<\/span><\/p>\nNormalmente, el contenido de un sitio web se estructura en diferentes p\u00e1ginas web, pero debemos mencionar una tendencia (no muy utilizada ni recomendada), llamada \u201cparallax scrolling\u201d, que estructura todos los contenidos en una solo p\u00e1gina web y permite que el usuario acceda a ellos mediante enlaces internos o bajando por la barra de desplazamiento o \u201cscroll\u201d.<\/p>\n
Ejemplos web de parallax scrolling: http:\/\/www.javajan.com\/news.php?id=277-guia<\/a><\/p>\n<\/p><\/div>\n <\/p>\n
<\/p>\n
<\/p>\n
Estructura de una p\u00e1gina web<\/h1>\n\nUna vez ya tengamos clara como estar\u00e1 estructurada la planta de la casa (sitio web a dise\u00f1ar), podemos empezar a dise\u00f1ar la estructura de cada habitaci\u00f3n (p\u00e1gina web), decidiendo donde pondremos los muebles (contenido) y la decoraci\u00f3n (elementos gr\u00e1ficos). Con especial esmero tendremos que estructurar el sal\u00f3n de la casa (p\u00e1gina principal), donde recibiremos a todos nuestros invitados (usuarios), para que sea lo m\u00e1s confortable posible (dise\u00f1o) pero tambi\u00e9n aporte el m\u00e1ximo de informaci\u00f3n sobre los anfitriones y sobre los contenidos de las distintas habitaciones (usabilidad).<\/p>\n
Para determinar la estructura de cada p\u00e1gina web, tendremos que definir (entre otros):<\/p>\n
\n- >Qu\u00e9 tipo de web quiere el cliente: tipo tarjeta de visita, tipo cat\u00e1logo, tipo anuncio de revista, tipo juego, una combinaci\u00f3n entre las anteriores…<\/li>\n
- >Qu\u00e9 tipo de informaci\u00f3n desea presentar el cliente: mucha imagen, mucha informaci\u00f3n escrita…<\/li>\n
- >Qu\u00e9 mensaje deber\u00eda de recibir el usuario cuando abra la p\u00e1gina principal.<\/li>\n
- >Hac\u00eda qu\u00e9 secciones del web se deber\u00eda sentir atra\u00eddo.<\/li>\n
- >Qu\u00e9 elementos comunes deben presentarse en todas las p\u00e1ginas (por ejemplo sistema de navegaci\u00f3n).<\/li>\n
- >Qu\u00e9 contenido espec\u00edfico deber\u00eda presentarse en cada p\u00e1gina.<\/li>\n<\/ul>\n
De todos modos, antes de empezar a dise\u00f1ar la estructura de una p\u00e1gina web, deber\u00edamos conocer las estructuras est\u00e1ndares utilizadas normalmente.<\/p>\n
<\/p>\n<\/p><\/div>\n
\nEstructuras est\u00e1ndares<\/h2>\n\nUno de los aspectos m\u00e1s importantes de las estructura de una p\u00e1gina web es decidir d\u00f3nde posicionaremos los men\u00fas de navegaci\u00f3n y enlaces a otras p\u00e1ginas web y d\u00f3nde posicionaremos el contenido que van a consultar los navegantes. Existen diversos tipos de estructuras est\u00e1ndares de p\u00e1ginas web que especifican la posici\u00f3n de los men\u00fas de navegaci\u00f3n y el contenido, manteni\u00e9ndose esta estructura y dise\u00f1o durante toda la navegaci\u00f3n por el sitio web.<\/p>\n
Sin que sea sorprendente, los men\u00fas de navegaci\u00f3n acostumbran a posicionarse en los m\u00e1rgenes de la p\u00e1gina, dejando los contenidos en el centro. Por defecto, las estructuras est\u00e1ndares posicionan los men\u00fas de navegaci\u00f3n arriba o en los laterales, pero tambi\u00e9n existen otras posibilidades:<\/p>\n
Bloque de navegaci\u00f3n a la izquierda:<\/p>\n
Permite presentar muchos men\u00fas o enlaces, pues cada l\u00ednea puede ser un enlace (por ejemplo, el men\u00fa de navegaci\u00f3n de esta gu\u00eda). Tampoco supone mucho problema que los men\u00fas se extiendan fuera de la pantalla, porque el usuario puede visualizarlos con la barra de desplazamiento vertical. Este m\u00e9todo es ideal si los men\u00fas son administrables, pues el dise\u00f1o no se ver\u00e1 muy afectado si aumentan o disminuyen el n\u00famero de enlaces.<\/p>\n
<\/a>Ejemplo de bloque de navegaci\u00f3n a la izquierda:guiadise\u00f1o.com<\/a><\/p>\nBloque de navegaci\u00f3n arriba:<\/p>\n
Ideal si el sitio web no tiene demasiadas secciones. Los men\u00fas se sit\u00faan en l\u00ednea y ocupan mucho espacio. Es f\u00e1cil si los men\u00fas se despliegan con otros submen\u00fas (es m\u00e1s f\u00e1cil la navegaci\u00f3n que si los submen\u00fas se abren lateralmente)<\/p>\n
<\/a>Ejemplo de bloque de navegaci\u00f3n arriba:http:\/\/www.apple.es<\/a><\/p>\nBloque de navegaci\u00f3n derecha:<\/p>\n
Las mismas ventajas que el men\u00fa a la izquierda pero menos usado.<\/p>\n
<\/a>Ejemplo de bloque de navegaci\u00f3n a la izquierda:http:\/\/www.narfstuff.co.uk<\/a><\/p>\nCombinaci\u00f3n de los anteriores:<\/p>\n
Si tenemos muchos enlaces a presentar, siempre podemos utilizar cualquier combinaci\u00f3n de los anteriores (arriba e izquierda; izquierda y derecha; arriba, izquierda y derecha;\u2026), sobre todo si los men\u00fas se pueden agrupar en dos o tres grandes grupos.<\/p>\n
<\/a>Ejemplo de combinaci\u00f3n de bloques:http:\/\/www.apple.es<\/a><\/p>\nPie de p\u00e1gina<\/p>\n
El pie de p\u00e1gina acostumbra a tener una gran importancia en las estructuras de los webs actuales, donde se pueden repetir los men\u00fas de navegaci\u00f3n (para que el usuario no deba subir por la p\u00e1gina), situar los enlaces alaviso legal<\/em>,copyright<\/em>, redes sociales: facebook, RSS, twitter o los datos de direcci\u00f3n y contacto.<\/p>\nEjemplos de pie de p\u00e1gina:<\/p>\n
<\/a>Ejemplo de pie de p\u00e1gina:http:\/\/bristolarchiverecords.com<\/a><\/p>\n<\/a>Ejemplo de pie de p\u00e1gina:http:\/\/yuruinspires.com<\/a><\/p>\n<\/a>Ejemplo de pie de p\u00e1gina:http:\/\/splitdadiz.com<\/a><\/p>\n<\/a>Ejemplo de pie de p\u00e1gina:http:\/\/www.mecannical.com<\/a><\/p>\n<\/a>Ejemplo de pie de p\u00e1gina:http:\/\/bitsamppixels.com<\/a><\/p>\nOtros ejemplos web de pies de p\u00e1gina:http:\/\/www.javajan.com\/news.php?id=205-guia<\/a><\/p>\nP\u00e1gina principal<\/p>\n
La p\u00e1gina principal es un caso especial, para la cual no existe una estructura est\u00e1ndar. Aunque la p\u00e1gina principal tambi\u00e9n se puede estructurar de un modo est\u00e1ndar, en la mayor\u00eda de sitios web, la p\u00e1gina principal no se dise\u00f1a para presentar contenido, y m\u00e1s bien se imagina como escaparate de la empresa, en el que tambi\u00e9n se presentan los men\u00fas o enlaces a las diferentes p\u00e1ginas o secciones del web.<\/p>\n
Ejemplos de p\u00e1gina principal:<\/p>\n
<\/a>Ejemplo de p\u00e1gina principal:http:\/\/www.coullon.com<\/a><\/p>\n<\/a>Ejemplo de p\u00e1gina principal:http:\/\/www.luhsetea.com<\/a><\/p>\n<\/a>Ejemplo de p\u00e1gina principal:http:\/\/dotmick.com<\/a><\/p>\n<\/a>Ejemplo de p\u00e1gina principal:http:\/\/gnosh.co.uk<\/a><\/p>\n<\/a>Ejemplo de p\u00e1gina principal:http:\/\/wearecupcup.com<\/a><\/p>\n<\/a><\/p>\nEjemplo de p\u00e1gina principal:http:\/\/www.mcfarlanechangemanagement.com.au<\/a><\/p>\n<\/p><\/div>\n<\/p><\/div>\n <\/div>\n <\/div>\n\nDise\u00f1ando la estructura<\/h2>\n\nConociendo las estructuras web m\u00e1s utilizadas, ya podemos empezar a dibujar la estructura espec\u00edfica de nuestra p\u00e1gina web, dibujando y posicionando a nuestro gusto los bloques de men\u00fas, contenido, gr\u00e1ficos, y los sub-bloques dentro de cada uno de los anteriores.<\/p>\n
Cada dise\u00f1ador tendr\u00e1 su propio m\u00e9todo para plasmar la estructura imaginada de una p\u00e1gina web a la pantalla de su ordenador. Aqu\u00ed transcribimos el m\u00e9todo de trabajo espec\u00edfico de un dise\u00f1ador:\u201cComienzo por bosquejar algunos posibles dise\u00f1os sobre papel. Despu\u00e9s de unos pocos de estos bocetos, decido cual me gusta m\u00e1s o cual se adapta mejor a los requisitos del cliente y el salto al Photoshop (o freehand), y uso la herramienta de rect\u00e1ngulo para bloquear las \u00e1reas que he marcado en mi papel. Una vez que he definido mi dise\u00f1o, experimento con los colores de fondo y de los rect\u00e1ngulos hasta tener un esquema de color s\u00f3lido. Y sigo trabajando con p\u00edxeles hasta que, finalmente, tengo un borrador para mostrar al cliente.\u201d<\/em><\/p>\nEjemplo de dise\u00f1o de la estructura:<\/p>\n
<\/a><\/p>\nEjemplo de dise\u00f1o para la p\u00e1gina:http:\/\/www.ginecologiavhebron.com<\/a>(dise\u00f1o deDeumonforte<\/em>y programaci\u00f3n Javajan)<\/p>\nTrabajando con bloques rectangulares<\/p>\n
La estructura de una p\u00e1gina web se sub-divide en bloques rectangulares, dentro de los cuales vamos a posicionar los diferentes elementos de dise\u00f1o o contenido. M\u00e1s tarde, al aplicar dise\u00f1o sobre estos rect\u00e1ngulos podemos enmascararlos eliminando los bordes o utilizando formas curvas, pero es importante conocer que cualquier estructura web est\u00e1 basada en rect\u00e1ngulos horizontales (no en diagonal).<\/p>\n
A pesar de todo, el dise\u00f1o de la estructura web no finaliza al posicionar los diferentes bloques, porque tenemos de definir como se adaptaran y comportaran en funci\u00f3n de la resoluci\u00f3n de pantalla.<\/p>\n<\/p><\/div>\n<\/p><\/div>\n
<\/p>\n
<\/p>\n
<\/p>\n
Adaptaci\u00f3n de la estructura en funci\u00f3n de la resoluci\u00f3n<\/h1>\nAdaptaci\u00f3n del bloque principal<\/h2>\n\nBloque principal: <\/strong>recuadro exterior que engloba toda la estructura de p\u00e1gina web, es decir, no existe ning\u00fan recuadro o bloque secundario que rebase el bloque o recuadro principal.<\/p>\nBloque secundario: <\/strong>cada uno de los recuadros que componen el bloque o recuadro principal.<\/p>\nExisten tres maneras distintas de adaptar el bloque principal en funci\u00f3n del tama\u00f1o de la pantalla:<\/p>\n
Fijo:<\/p>\n
El bloque se dise\u00f1a con un tama\u00f1o fijo que no se va a modificar en funci\u00f3n del tama\u00f1o de la pantalla. Es el m\u00e1s f\u00e1cil de dise\u00f1ar y maquetar porqu\u00e9 los elementos del dise\u00f1o o bloques secundarios siempre estar\u00e1n en la misma posici\u00f3n y mantendr\u00e1n el mismo ancho.<\/p>\n
Ejemplo p\u00e1gina web de estructura fija, mostrada en pantallas de distinta resoluci\u00f3n. A resoluciones grandes aparecen muchos espacios en blanco; a resoluciones peque\u00f1as el dise\u00f1o queda cortado<\/p>\n
Si escogemos una estructura principal fija, tenemos que pensar qu\u00e9 tama\u00f1o en pixeles vamos a utilizar. Seg\u00fan las estad\u00edsticas actuales (http:\/\/www.w3schools.com\/browsers\/browsers_display.asp<\/a>), el 98% de usuarios tienen resoluciones igual o superiores a 1024×768, aunque empiezan a crecer el n\u00famero de usuarios con pantallas inferiores a 800×600 debido a la navegaci\u00f3n con tabletas y tel\u00e9fonos.<\/p>\nSi dise\u00f1amos un bloque principal fijo, podr\u00eda ser bueno tomar como referencia la resoluci\u00f3n de 1024×768, aunque el ancho del bloque principal deber\u00eda de ser m\u00e1s peque\u00f1o, pues el navegador se necesita algunos pixeles para los men\u00fas, m\u00e1rgenes y barras de desplazamiento. As\u00ed pues, deber\u00edamos de dise\u00f1ar un bloque principal de un ancho m\u00e1ximo de 990 pixeles. Si queremos que todo el contenido aparezca en la pantalla y no aparezcan barras de desplazamiento verticales, la altura m\u00e1xima del dise\u00f1o deber\u00eda de ser entre 600 y 650 pixeles (depender\u00e1 mucho del espacio que ocupen los men\u00fas del navegador del usuario).<\/p>\n
Normalmente, la estructura principal fija se centra en la pantalla para resoluciones grandes, aunque tambi\u00e9n se puede alinear a la izquierda o a la derecha.<\/p>\n
Fluido o l\u00edquido:<\/p>\n
Con independencia de la resoluci\u00f3n de una pantalla, un bloque principal fluido ocupa un porcentaje horizontal de la pantalla, normalmente el 100% (aunque tambi\u00e9n puede ocupar el 90% centrado, o alineado a la izquierda o derecha). Normalmente, al disminuir la resoluci\u00f3n o tama\u00f1o de una pantalla, el bloque fluido se estrecha horizontalmente pero se alarga verticalmente para poder presentar toda la informaci\u00f3n 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\u00f3n fija o fluida (se ver\u00e1 en el siguiente punto).<\/p>\n
Dise\u00f1ar y maquetar una estructura fluida es m\u00e1s complejo, pues se tienen que prever c\u00f3mo se van a comportar cada uno de los bloques secundarios en su interior. Bien dise\u00f1ada, una estructura fluida se puede adaptar desde las resoluciones de pantalla m\u00e1s grandes hasta las resoluciones de pantallas m\u00e1s peque\u00f1as de los tel\u00e9fonos, aunque para \u00e9ste \u00faltimo caso se recomiendan distintas estructuras, como se ver\u00e1 a continuaci\u00f3n.<\/p>\n
Ejemplo de adaptaci\u00f3n fluida (en este caso, todos los bloques secundarios tambi\u00e9n son fluidos):<\/p>\n
<\/p>\n
Dos buenos art\u00edculo sobre dise\u00f1o fluido:
http:\/\/www.javajan.com\/news.php?id=225-guia<\/a> y http:\/\/www.javajan.com\/news.php?id=193-guia<\/a><\/p>\nEstructuras distintas – Dise\u00f1o sensible:<\/p>\n
El dise\u00f1o sensible (del ingl\u00e9s: responsive design) es una opci\u00f3n cada vez m\u00e1s utilizada en el dise\u00f1o web actual es crear estructuras del bloque principal distintas, reacomodando los contenidos en funci\u00f3n de la resoluci\u00f3n de la pantalla. Esto puede ser muy \u00fatil cuando consideremos el acceso a nuestro web a trav\u00e9s de tel\u00e9fonos, que tienen resoluciones de pantallas muy peque\u00f1as. Algunos navegadores para m\u00f3viles reestructuran el dise\u00f1o de los webs de un modo eficiente, pero si queremos asegurar la buena visualizaci\u00f3n y dise\u00f1o de nuestro web a cualquier resoluci\u00f3n, deberemos de crear varias estructuras en funci\u00f3n de la resoluci\u00f3n de la pantalla.<\/p>\n
En un dise\u00f1o sensible, no aparecer\u00e1n barras de desplazamiento horizontales (scroll) hasta resoluciones muy peque\u00f1as.<\/p>\n
Podemos decidir las medidas a las cuales se presentaran las diferentes estructuras del bloque principal en funci\u00f3n del dise\u00f1o planteado, pero tambi\u00e9n podemos determinarlas consultando las pantallas m\u00e1s utilizadas actualmente:<\/p>\n
Resoluciones de pantalla m\u00e1s utilizadas:
http:\/\/www.w3schools.com\/browsers\/browsers_display.asp<\/a>
Resoluciones de pantalla m\u00e1s utilizadas en tel\u00e9fonos m\u00f3viles:
http:\/\/deviceatlas.com\/resourcecentre\/Explore+DeviceAtlas+Data\/Data+Explorer#_\/<\/a><\/p>\nSi queremos optimizar recursos y dise\u00f1ar \u00fanicamente dos estructuras de web, una posible soluci\u00f3n ser\u00eda dise\u00f1ar 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\u00eda ser fija para pantallas mayores a 480 p\u00edxeles (iPhone) que se vuelva fluido para resoluciones menores, hasta las pantallas de los tel\u00e9fonos m\u00e1s peque\u00f1as (160 pixeles o menos). Es importante recordar que a todas estas medidas debemos restar 30 o 40 pixeles para que el dise\u00f1o no quede recortado por barras de desplazamiento o m\u00e1rgenes del navegador web.<\/p>\n
Buen art\u00edculo sobre dise\u00f1o web sobre m\u00f3viles:
http:\/\/www.circulodemaquetadores.com\/disenando-para-moviles-diseno-para-multiples-tamanos-de-pantalla\/<\/a>
Ventajas del web frente las aplicaciones y an\u00e1lisis de los distintas posibilidades de dise\u00f1o web para m\u00f3vil
http:\/\/www.javajan.com\/news.php?id=350-guia<\/a><\/p>\nEjemplo de estructuras distintas: a 800 pixeles existe una transici\u00f3n que camb\u00eda de una estructura de 3 columnas a una estructura de 2 columnas (manteniendo la mayor\u00eda de contenidos):<\/p>\n
<\/p>\n
Consultar tambi\u00e9n los diversos ejemplos web con distintas estructuras fluidas que presentamos y explicamos al final del cap\u00edtulo.<\/p>\n
Comparativa:<\/p>\n
Ventajas y desventajas de los tres modelos de adaptaci\u00f3n a las distintas resoluciones de pantalla:<\/p>\n
\n
Hay dificultades que muchos dise\u00f1adores tienen para entender las importantes diferencias entre el dise\u00f1o impreso y el dise\u00f1o web, las limitaciones que presenta respecto al dise\u00f1o tradicional pero tambi\u00e9n las nuevas posibilidades que permiten formas ins\u00f3litas de expresi\u00f3n y comunicaci\u00f3n.<\/p>\n
Esta gu\u00eda est\u00e1 pensada para terminar con estas dificultades, para que cualquier dise\u00f1ador gr\u00e1fico, tenga o no experiencia t\u00e9cnica web, adquiera los conocimientos necesarios que le permitan dise\u00f1ar cualquier sitio o p\u00e1gina web, dando rienda suelta a su imaginaci\u00f3n y creatividad, explotando todas las posibilidades que ofrece este medio. Pero, al mismo tiempo ci\u00f1\u00e9ndose a las limitaciones tecnol\u00f3gicas del momento, para que ning\u00fan maquetador o programador competente jam\u00e1s mire su dise\u00f1o y le diga \u00abeso no se puede hacer\u00bb.<\/p>\n
Dicen que las modas van y vienen, pero que el buen dise\u00f1o es atemporal. Lamentablemente para los buenos dise\u00f1adores, las tecnolog\u00edas tambi\u00e9n van y vienen (o evolucionan) y los buenos dise\u00f1os se tienen de adaptar a la tecnolog\u00eda del momento, si no caducan.<\/p>\n
<\/p>\n
<\/p>\n
Vocabulario y definiciones indispensables<\/h1>\n\n\n- P\u00e1gina web: <\/strong>documento que forma parte de un sitio web, con un contenido que puede incluir texto, im\u00e1genes, elementos multimedia y enlaces para navegar a otras p\u00e1ginas web o contenidos.<\/li>\n
- Sitio web: <\/strong>colecci\u00f3n de p\u00e1ginas web relacionadas y comunes a un dominio de Internet o subdominio.<\/li>\n
- P\u00e1gina principal o home<\/em>: <\/strong>p\u00e1gina de entrada a un sitio web, normalmente con un dise\u00f1o mucho m\u00e1s trabajado, que presenta el sitio y las opciones de navegaci\u00f3n a las p\u00e1ginas o contenidos del sitio.<\/li>\n
- Enlace web: <\/strong>elemento de una p\u00e1gina web que, al clicarlo te lleva a otra p\u00e1gina web o a otra parte de la misma p\u00e1gina web.<\/li>\n
- Men\u00fa de navegaci\u00f3n: <\/strong>conjunto de enlaces web que reflejan la organizaci\u00f3n de los contenidos del sitio web y enlazan a cada una de sus p\u00e1ginas web.<\/li>\n
- Dominio de Internet: <\/strong>es un nombre \u00fanico 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\u00f1adores).<\/li>\n
- URL: <\/strong>cadena de caracteres con la cual se asigna una direcci\u00f3n \u00fanica a cada uno de los recursos de informaci\u00f3n disponibles en la Internet (p\u00e1ginas web y sus elementos: im\u00e1genes, hojas de estilos, elementos multimedia,\u2026). La URL de la p\u00e1gina principal normalmente es el nombre del dominio.<\/li>\n
- Servidor web: <\/strong>ordenador remoto que provee los datos solicitados por parte de los navegadores de otras computadoras. Las p\u00e1ginas web y dominios de Internet deben de ser alojadas en un servidor. Existen muchas empresas que poseen servidores.<\/li>\n
- Navegador web: <\/strong>aplicaci\u00f3n que interpreta el contenido de las p\u00e1ginas web y lo presenta en pantalla permitiendo al usuario interactuar. Ejemplos de navegador: Internet Explorer, Mozilla Firefox, Google Chrome, Safari… Al dise\u00f1ar una p\u00e1gina web, tenemos que tener en cuenta que los distintos navegadores pueden presentar nuestros dise\u00f1os con peque\u00f1as variaciones.<\/li>\n
- Resoluci\u00f3n de ventana web: <\/strong>n\u00famero de p\u00edxeles m\u00e1ximos horizontales y verticales disponibles para presentar una p\u00e1gina web. La resoluci\u00f3n vendr\u00e1 determinada por la resoluci\u00f3n de la pantalla del dispositivo y por el espacio que el navegador web deja para la presentaci\u00f3n. Las distintas resoluciones disponibles Internet limitaran en gran medida el dise\u00f1o web.\n
Ejemplos de pantalla ipad (1024 x 768) y iphone (640 x 480) mostrando la misma p\u00e1gina web, presenta un dise\u00f1o diferente para cada una de las resoluciones.<\/span><\/p>\n<\/li>\n- Dise\u00f1ador web: <\/strong>Profesional que utiliza programas de dise\u00f1o tradicional, como photoshop, freehand, ilustrator, indesign\u2026<\/li>\n
- Maquetador web: <\/strong>Profesional que maqueta los dise\u00f1os utilizando las codificaciones est\u00e1ndares (html, css, javascript\u2026), transformando los dise\u00f1os en p\u00e1ginas web.<\/li>\n
- Programador web: <\/strong>Profesional que programa las p\u00e1ginas web maquetadas (php, asp, jquery \u2026) para que presenten informaci\u00f3n de una base de datos, personalicen los contenidos, env\u00eden los formularios, interact\u00faen con el usuario\u2026<\/li>\n<\/ul>\n
<\/span><\/p>\n<\/p><\/div>\n<\/p><\/div>\nDiferencias b\u00e1sicas entre dise\u00f1o impreso
y dise\u00f1o web<\/h1>\n\nInteractuar en vez de mostrar<\/p>\n
El dise\u00f1o impreso est\u00e1 basado en ver, pero el dise\u00f1o web est\u00e1 basado en hacer.
La funci\u00f3n del dise\u00f1o tradicional es contar historias, la misi\u00f3n del dise\u00f1o digital es entablar conversaciones.
El soporte gr\u00e1fico se sostiene sobre relaciones espaciales y la experiencia web sobre relaciones temporales. El dise\u00f1o impreso es est\u00e1tico, en cambio, la experiencia de un sitio web se define por la interacci\u00f3n del usuario con dise\u00f1o y contenido. Por ejemplo, un usuario hace clic sobre la navegaci\u00f3n o se desplaza hacia abajo para leer una p\u00e1gina.
Un buen dise\u00f1o impreso tiene que entenderse y ser bonito, pero un buen dise\u00f1o web tiene que entenderse, facilitar la navegaci\u00f3n (usabilidad) y ser bonito. Normalmente se recomienda priorizar la usabilidad, despu\u00e9s el contenido y si queda tiempo el arte. Aunque esto no implica que el buen dise\u00f1o se deba sacrificar para ganar usabilidad, en esta gu\u00eda vamos a explicar c\u00f3mo hacerlos compatibles.<\/p>\n
Espacio y entorno indefinido en vez de definido<\/p>\n
El dise\u00f1o impreso se visualiza en espacio limitado pero el dise\u00f1o web se tiene que poder visualizar en m\u00faltiples espacios, adem\u00e1s el dise\u00f1o web se puede extender fuera de la pantalla (podemos que utilizar barras de desplazamiento o scrolling).
Cuando se dise\u00f1a para imprimir, el resultado va a ser exactamente igual o muy parecido al original que hemos dise\u00f1ado y guardado, en cambio, cuando se dise\u00f1a una web, debemos considerar factores externos de los cuales no tenemos ning\u00fan control (el usuario puede tener resoluciones de pantalla diferente o utilizar un navegador web distinto, adem\u00e1s de no tener las tipograf\u00edas utilizadas,\u2026).
El dise\u00f1o impreso se visualiza igual en cualquier revista, en cambio, los diferentes navegadores web pueden presentar los elementos del dise\u00f1o 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\u2026 sin que alguno muestre errores.<\/p>\n
Problema con las tipograf\u00edas<\/p>\n
En el dise\u00f1o impreso se puede utilizar cualquier tipograf\u00eda, pero el dise\u00f1o web normalmente solo muestra las tipograf\u00edas que el usuario tenga instaladas en su ordenador. M\u00e1s adelante veremos que existen diversas soluciones a este problema, por ejemplo poniendo el texto con el formato y la tipograf\u00eda deseada en im\u00e1genes, pero tendremos que tener en cuenta las limitaciones.<\/p>\n
Pixeles en vez de pulgadas y cent\u00edmetros<\/p>\n
En el dise\u00f1o impreso se trabaja con pulgadas y cent\u00edmetros, pero en el dise\u00f1o web solo se trabaja con pixeles. As\u00ed pues, dependiendo de la resoluci\u00f3n de la pantalla (pixeles por pulgada o dpi) una misma imagen se puede ver mayor o menor. Las medidas de los dise\u00f1os web siempre son p\u00edxeles, aunque en ocasiones se pueden utilizar porcentajes de pantalla o porcentajes de \u00e1rea (se explica m\u00e1s adelante).
Si les cuesta dise\u00f1ar con pixeles, pueden utilizar la resoluci\u00f3n 72 dpi, que es la resoluci\u00f3n est\u00e1ndar de la mayor\u00eda de pantallas de ordenador. Dise\u00f1ando a esta resoluci\u00f3n, la mayor\u00eda de usuarios ver\u00e1n las im\u00e1genes y elementos de su dise\u00f1o al mismo tama\u00f1o que en su pantalla.<\/p>\n
P\u00edxel: <\/strong>la menor unidad de medida en la pantalla (un punto de luz). La mayor\u00eda de pantallas tienen una resoluci\u00f3n de 72 p\u00edxeles por pulgada o dpi.<\/p>\nArchivos peque\u00f1os en vez de grandes<\/p>\n
El dise\u00f1o impreso se trabaja con altas resoluciones de archivos y se procura mantener la mejor calidad en las im\u00e1genes y originales, mientras que en el dise\u00f1o web se trabaja con resoluciones bajas para ahorrar recursos del servidor y permitir que el usuario abra la p\u00e1gina r\u00e1pidamente. En dise\u00f1o web, debemos optimizar las im\u00e1genes y animaciones, es decir, bajar la resoluci\u00f3n lo m\u00e1s posible sin perder una calidad significativa. El peso (calculado en Kb o Mb) de una p\u00e1gina web se calcula como la suma de todos pesos de los documentos que abre una p\u00e1gina web (im\u00e1genes, 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\u00e1gina tarda un segundo m\u00e1s a descargarse y abrirse.<\/p>\n
RGB en vez de CMYK<\/p>\n
En el dise\u00f1o impreso se trabaja colores substractivos o CMYK, en cambio en el dise\u00f1o web solo se trabaja con colores aditivos o RGB.
El color es un error com\u00fan de los dise\u00f1adores gr\u00e1ficos cuando quieren dise\u00f1ar para web. En la escuela de dise\u00f1o te ense\u00f1an a utilizar siempre CMYK para que la impresi\u00f3n quede bien, pero en el mundo web, es todo lo contrario, las pantallas emiten luz \u00fanicamente interpretan datos RGB o aditivos.<\/p>\n
Posible editar despu\u00e9s de publicar<\/p>\n
El dise\u00f1o impreso no se puede modificar despu\u00e9s de la impresi\u00f3n. Por suerte el dise\u00f1o web se puede modificar despu\u00e9s de la publicaci\u00f3n, se pueden corregir errores, completar contenido no introducido inicialmente, o mantener actualizada la informaci\u00f3n. En este sentido, es mejor evitar dise\u00f1os que no sean flexibles, para que en el futuro el dise\u00f1o se pueda adaptar a diferentes tama\u00f1os de los contenidos, sin perjudicar la est\u00e9tica del conjunto.<\/p>\n
<\/p>\n
<\/p>\n
<\/p>\n
Usabilidad<\/h1>\n\nUn atributo determinante para la calidad de un sitio web es suusabilidad<\/strong>. Se trata de lograr que los visitantes encuentren r\u00e1pidamente aquello que buscan, con el m\u00ednimo esfuerzo por su parte. Sea cual sea el contenido o la finalidad de nuestra web, navegar por ella debe resultar una experiencia gratificante.<\/p>\nWeb usable: <\/strong>es aquella en la que los usuarios pueden interactuar de la forma m\u00e1s f\u00e1cil, c\u00f3moda, evidente y segura posible. Una web usable denota calidad, genera confianza y nos diferencia positivamente de otras alternativas.<\/p>\nLos usuarios pasan mucho menos tiempo visitando una p\u00e1gina web de lo que sus dise\u00f1adores desear\u00edan, por lo que hay que facilitarles las cosas al m\u00e1ximo. Cuando un usuario encuentra que la navegaci\u00f3n por una web es c\u00f3moda, agradable y \u00fatil, existen mayores probabilidades de que la visite de nuevo en el futuro.<\/p>\n
Lograr un buen nivel de usabilidad requiere combinar h\u00e1bilmente una serie de elementos: tecnolog\u00eda, dise\u00f1o, contenidos\u2026 Aunque no existen recetas universales, he aqu\u00ed algunos criterios a tener en cuenta:<\/p>\n
\n- >Crear una jerarqu\u00eda visual clara en cada p\u00e1gina. <\/strong>Debe percibirse a simple vista cu\u00e1l es la importancia de los distintos contenidos, qu\u00e9 relaci\u00f3n existe entre ellos, a qu\u00e9 tema o bloque pertenecen… La colocaci\u00f3n, el tama\u00f1o, la tipograf\u00eda o los colores de los textos y de los dem\u00e1s elementos de la p\u00e1gina son los principales recursos a utilizar.<\/li>\n
- >Dar el control al usuario. <\/strong>\u00c9ste debe sentir en todo momento que sabe d\u00f3nde est\u00e1 y que controla la situaci\u00f3n. Nada importante deber\u00eda situarse a m\u00e1s de dos clics de distancia. Los t\u00edtulos y contenidos de cada apartado deben ser claros y visibles. Tambi\u00e9n son muy \u00fatiles los men\u00fas de situaci\u00f3n, la navegaci\u00f3n por pesta\u00f1as, las opciones de volver atr\u00e1s o deshacer una acci\u00f3n, la visualizaci\u00f3n clara de las distintos pasos de un proceso (la compra on-line, por ejemplo).<\/li>\n
- >Facilitar la interacci\u00f3n. <\/strong>Suele ser muy positivo que una web permita al usuario \u201chacer cosas\u201d: clicar, desplegar, abrir, mover… En todo caso, el acceso y el uso de cualquier elemento de interacci\u00f3n debe ser intuitivo, r\u00e1pido y f\u00e1cil. No podemos permitirnos frustrar al usuario o hacerle perder el tiempo.<\/li>\n
- >Aprovechar las convenciones y llamar a las cosas por su nombre. <\/strong>La mayor\u00eda de usuarios tienen ciertas expectativas derivadas de su experiencia navegando por internet. Saben, m\u00e1s o menos, d\u00f3nde se sit\u00faan los men\u00fas, c\u00f3mo funciona un buscador, para qu\u00e9 sirven determinados botones, qu\u00e9 significan ciertos iconos o expresiones, etc. As\u00ed, hay que situar los contenidos donde el usuario espera que est\u00e9n y hacer que las cosas funcionen como se espera que lo hagan. Si queremos sorprender o hacer \u201calgo diferente\u201d, hemos de asegurarnos de que ello no suponga una complicaci\u00f3n innecesaria.<\/li>\n
- >Simplificar<\/strong>. Hay que evitar la informaci\u00f3n 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\u00e1genes y animaciones, y crearemos men\u00fas claros, bien estructurados y desplegables si hay muchas opciones a mostrar.<\/li>\n<\/ul>\n
No hay que entender la usabilidad como un lastre para nuestra creatividad. Podemos innovar y ser originales mientras no olvidemos quenuestro dise\u00f1o debe estar centrado en el usuario<\/strong>. \u00c9l es el verdadero protagonista y hemos de asegurarnos de que comprender\u00e1 y podr\u00e1 seguirnos el juego en todo momento.<\/p>\nOtros aspectos a tener en cuenta<\/strong>:<\/p>\n\n- >Situar los elementos importantes siempre a mano.<\/li>\n
- >Los usuarios no siempre entran por la p\u00e1gina principal (poner men\u00fas de navegaci\u00f3n en todas las p\u00e1ginas).<\/li>\n
- >Dejar claro qu\u00e9 elementos son enlaces y cu\u00e1les no.<\/li>\n
- >A\u00f1adir un buscador o un mapa del sitio web si \u00e9ste tiene mucho contenido i\/o p\u00e1ginas.<\/li>\n
- >Enlazar a cualquier informaci\u00f3n en menos de 3 clicks (o enlaces)<\/li>\n
- >Mantener una coherencia en el dise\u00f1o de toda la p\u00e1gina.<\/li>\n
- >Seguir las reglas b\u00e1sicas del buen dise\u00f1o: selecci\u00f3n de colores, tipograf\u00edas, regla de los tercios\u2026<\/li>\n
- >No distraer el usuario con excesivas animaciones o elementos que parpadean.<\/li>\n
- >Intentar que los contenidos no tengan faltas de ortograf\u00eda.<\/li>\n
- >No abrir nuevas ventanas del navegador innecesariamente…<\/li>\n<\/ul>\n
Ejemplo web que intenta romper todas las reglas de la usabilidad:http:\/\/theworldsworstwebsiteever.com\/<\/a>
(listado de errores del web:http:\/\/theworldsworstwebsiteever.com\/new_page_1.htm<\/a>).
Otro sitio con listados de dise\u00f1os web que se deben evitar copiar:http:\/\/www.javajan.com\/?id=271-guia<\/a><\/p>\n<\/p><\/div>\n <\/p>\n<\/p><\/div>\n
<\/p>\n
<\/p>\n
<\/p>\n
Arquitectura de un sitio web<\/h1>\n\nAlgunos dicen que dise\u00f1ar para web es m\u00e1s parecido a la arquitectura que al dise\u00f1o gr\u00e1fico. Como en una casa, antes de escoger los muebles, el color de las cortinas o la iluminaci\u00f3n, es importante saber c\u00f3mo estar\u00e1 estructurada la planta, c\u00f3mo ser\u00e1 el sal\u00f3n, donde estar\u00e1n las habitaciones, como se acceder\u00e1 a ellas, donde estar\u00e1n las ventanas… Asimismo en la web, si la estructura no es s\u00f3lida e intuitiva, el arte de la p\u00e1gina no sirve para nada.<\/p>\n
Antes de empezar a trabajar en el aspecto puramente est\u00e9tico de las p\u00e1ginas web, imaginando animaciones impresionantes y gr\u00e1ficos atractivos, es indispensables pensar en la estructura del sitio web. Para eso, fundamentalmente, tendremos que:<\/p>\n
\n- >Definir las secciones y p\u00e1ginas web que debe tener el sitio.<\/li>\n
- >Escoger las secciones o p\u00e1ginas a las que podremos acceder desde la p\u00e1gina principal (o de inicio).<\/li>\n
- >Decidir si alguna secci\u00f3n o p\u00e1gina tiene que destacar m\u00e1s respecto las dem\u00e1s.<\/li>\n
- >Distribuir el contenido a presentar entre las distintas secciones y p\u00e1ginas.<\/li>\n
- >Concretar las distintas v\u00edas de acceso a cada una de p\u00e1ginas web del sitio (es importante ofrecer m\u00faltiples maneras de acceder a la misma informaci\u00f3n).<\/li>\n
- >Especificar el n\u00famero de idiomas que dispondr\u00e1 el sitio web.<\/li>\n<\/ul>\n
Para ayudar a concretar la estructura final del sitio web, muchos dise\u00f1adores y programadores web recomiendan hacer un esquema a mano alzada, con post-its o con un simple programa de dise\u00f1o del ordenador, que nos permita realizar cambios f\u00e1cilmente a medida que redescubrimos mejores estructuras para nuestro sitio web.<\/p>\n
Ejemplo de la estructura de un sitio web en el que se detalla todas las p\u00e1ginas y el recorrido para acceder a ellas.<\/span><\/p>\nNormalmente, el contenido de un sitio web se estructura en diferentes p\u00e1ginas web, pero debemos mencionar una tendencia (no muy utilizada ni recomendada), llamada \u201cparallax scrolling\u201d, que estructura todos los contenidos en una solo p\u00e1gina web y permite que el usuario acceda a ellos mediante enlaces internos o bajando por la barra de desplazamiento o \u201cscroll\u201d.<\/p>\n
Ejemplos web de parallax scrolling: http:\/\/www.javajan.com\/news.php?id=277-guia<\/a><\/p>\n<\/p><\/div>\n <\/p>\n
<\/p>\n
<\/p>\n
Estructura de una p\u00e1gina web<\/h1>\n\nUna vez ya tengamos clara como estar\u00e1 estructurada la planta de la casa (sitio web a dise\u00f1ar), podemos empezar a dise\u00f1ar la estructura de cada habitaci\u00f3n (p\u00e1gina web), decidiendo donde pondremos los muebles (contenido) y la decoraci\u00f3n (elementos gr\u00e1ficos). Con especial esmero tendremos que estructurar el sal\u00f3n de la casa (p\u00e1gina principal), donde recibiremos a todos nuestros invitados (usuarios), para que sea lo m\u00e1s confortable posible (dise\u00f1o) pero tambi\u00e9n aporte el m\u00e1ximo de informaci\u00f3n sobre los anfitriones y sobre los contenidos de las distintas habitaciones (usabilidad).<\/p>\n
Para determinar la estructura de cada p\u00e1gina web, tendremos que definir (entre otros):<\/p>\n
\n- >Qu\u00e9 tipo de web quiere el cliente: tipo tarjeta de visita, tipo cat\u00e1logo, tipo anuncio de revista, tipo juego, una combinaci\u00f3n entre las anteriores…<\/li>\n
- >Qu\u00e9 tipo de informaci\u00f3n desea presentar el cliente: mucha imagen, mucha informaci\u00f3n escrita…<\/li>\n
- >Qu\u00e9 mensaje deber\u00eda de recibir el usuario cuando abra la p\u00e1gina principal.<\/li>\n
- >Hac\u00eda qu\u00e9 secciones del web se deber\u00eda sentir atra\u00eddo.<\/li>\n
- >Qu\u00e9 elementos comunes deben presentarse en todas las p\u00e1ginas (por ejemplo sistema de navegaci\u00f3n).<\/li>\n
- >Qu\u00e9 contenido espec\u00edfico deber\u00eda presentarse en cada p\u00e1gina.<\/li>\n<\/ul>\n
De todos modos, antes de empezar a dise\u00f1ar la estructura de una p\u00e1gina web, deber\u00edamos conocer las estructuras est\u00e1ndares utilizadas normalmente.<\/p>\n
<\/p>\n<\/p><\/div>\n
\nEstructuras est\u00e1ndares<\/h2>\n\nUno de los aspectos m\u00e1s importantes de las estructura de una p\u00e1gina web es decidir d\u00f3nde posicionaremos los men\u00fas de navegaci\u00f3n y enlaces a otras p\u00e1ginas web y d\u00f3nde posicionaremos el contenido que van a consultar los navegantes. Existen diversos tipos de estructuras est\u00e1ndares de p\u00e1ginas web que especifican la posici\u00f3n de los men\u00fas de navegaci\u00f3n y el contenido, manteni\u00e9ndose esta estructura y dise\u00f1o durante toda la navegaci\u00f3n por el sitio web.<\/p>\n
Sin que sea sorprendente, los men\u00fas de navegaci\u00f3n acostumbran a posicionarse en los m\u00e1rgenes de la p\u00e1gina, dejando los contenidos en el centro. Por defecto, las estructuras est\u00e1ndares posicionan los men\u00fas de navegaci\u00f3n arriba o en los laterales, pero tambi\u00e9n existen otras posibilidades:<\/p>\n
Bloque de navegaci\u00f3n a la izquierda:<\/p>\n
Permite presentar muchos men\u00fas o enlaces, pues cada l\u00ednea puede ser un enlace (por ejemplo, el men\u00fa de navegaci\u00f3n de esta gu\u00eda). Tampoco supone mucho problema que los men\u00fas se extiendan fuera de la pantalla, porque el usuario puede visualizarlos con la barra de desplazamiento vertical. Este m\u00e9todo es ideal si los men\u00fas son administrables, pues el dise\u00f1o no se ver\u00e1 muy afectado si aumentan o disminuyen el n\u00famero de enlaces.<\/p>\n
<\/a>Ejemplo de bloque de navegaci\u00f3n a la izquierda:guiadise\u00f1o.com<\/a><\/p>\nBloque de navegaci\u00f3n arriba:<\/p>\n
Ideal si el sitio web no tiene demasiadas secciones. Los men\u00fas se sit\u00faan en l\u00ednea y ocupan mucho espacio. Es f\u00e1cil si los men\u00fas se despliegan con otros submen\u00fas (es m\u00e1s f\u00e1cil la navegaci\u00f3n que si los submen\u00fas se abren lateralmente)<\/p>\n
<\/a>Ejemplo de bloque de navegaci\u00f3n arriba:http:\/\/www.apple.es<\/a><\/p>\nBloque de navegaci\u00f3n derecha:<\/p>\n
Las mismas ventajas que el men\u00fa a la izquierda pero menos usado.<\/p>\n
<\/a>Ejemplo de bloque de navegaci\u00f3n a la izquierda:http:\/\/www.narfstuff.co.uk<\/a><\/p>\nCombinaci\u00f3n de los anteriores:<\/p>\n
Si tenemos muchos enlaces a presentar, siempre podemos utilizar cualquier combinaci\u00f3n de los anteriores (arriba e izquierda; izquierda y derecha; arriba, izquierda y derecha;\u2026), sobre todo si los men\u00fas se pueden agrupar en dos o tres grandes grupos.<\/p>\n
<\/a>Ejemplo de combinaci\u00f3n de bloques:http:\/\/www.apple.es<\/a><\/p>\nPie de p\u00e1gina<\/p>\n
El pie de p\u00e1gina acostumbra a tener una gran importancia en las estructuras de los webs actuales, donde se pueden repetir los men\u00fas de navegaci\u00f3n (para que el usuario no deba subir por la p\u00e1gina), situar los enlaces alaviso legal<\/em>,copyright<\/em>, redes sociales: facebook, RSS, twitter o los datos de direcci\u00f3n y contacto.<\/p>\nEjemplos de pie de p\u00e1gina:<\/p>\n
<\/a>Ejemplo de pie de p\u00e1gina:http:\/\/bristolarchiverecords.com<\/a><\/p>\n<\/a>Ejemplo de pie de p\u00e1gina:http:\/\/yuruinspires.com<\/a><\/p>\n<\/a>Ejemplo de pie de p\u00e1gina:http:\/\/splitdadiz.com<\/a><\/p>\n<\/a>Ejemplo de pie de p\u00e1gina:http:\/\/www.mecannical.com<\/a><\/p>\n<\/a>Ejemplo de pie de p\u00e1gina:http:\/\/bitsamppixels.com<\/a><\/p>\nOtros ejemplos web de pies de p\u00e1gina:http:\/\/www.javajan.com\/news.php?id=205-guia<\/a><\/p>\nP\u00e1gina principal<\/p>\n
La p\u00e1gina principal es un caso especial, para la cual no existe una estructura est\u00e1ndar. Aunque la p\u00e1gina principal tambi\u00e9n se puede estructurar de un modo est\u00e1ndar, en la mayor\u00eda de sitios web, la p\u00e1gina principal no se dise\u00f1a para presentar contenido, y m\u00e1s bien se imagina como escaparate de la empresa, en el que tambi\u00e9n se presentan los men\u00fas o enlaces a las diferentes p\u00e1ginas o secciones del web.<\/p>\n
Ejemplos de p\u00e1gina principal:<\/p>\n
<\/a>Ejemplo de p\u00e1gina principal:http:\/\/www.coullon.com<\/a><\/p>\n<\/a>Ejemplo de p\u00e1gina principal:http:\/\/www.luhsetea.com<\/a><\/p>\n<\/a>Ejemplo de p\u00e1gina principal:http:\/\/dotmick.com<\/a><\/p>\n<\/a>Ejemplo de p\u00e1gina principal:http:\/\/gnosh.co.uk<\/a><\/p>\n<\/a>Ejemplo de p\u00e1gina principal:http:\/\/wearecupcup.com<\/a><\/p>\n<\/a><\/p>\nEjemplo de p\u00e1gina principal:http:\/\/www.mcfarlanechangemanagement.com.au<\/a><\/p>\n<\/p><\/div>\n<\/p><\/div>\n <\/div>\n <\/div>\n\nDise\u00f1ando la estructura<\/h2>\n\nConociendo las estructuras web m\u00e1s utilizadas, ya podemos empezar a dibujar la estructura espec\u00edfica de nuestra p\u00e1gina web, dibujando y posicionando a nuestro gusto los bloques de men\u00fas, contenido, gr\u00e1ficos, y los sub-bloques dentro de cada uno de los anteriores.<\/p>\n
Cada dise\u00f1ador tendr\u00e1 su propio m\u00e9todo para plasmar la estructura imaginada de una p\u00e1gina web a la pantalla de su ordenador. Aqu\u00ed transcribimos el m\u00e9todo de trabajo espec\u00edfico de un dise\u00f1ador:\u201cComienzo por bosquejar algunos posibles dise\u00f1os sobre papel. Despu\u00e9s de unos pocos de estos bocetos, decido cual me gusta m\u00e1s o cual se adapta mejor a los requisitos del cliente y el salto al Photoshop (o freehand), y uso la herramienta de rect\u00e1ngulo para bloquear las \u00e1reas que he marcado en mi papel. Una vez que he definido mi dise\u00f1o, experimento con los colores de fondo y de los rect\u00e1ngulos hasta tener un esquema de color s\u00f3lido. Y sigo trabajando con p\u00edxeles hasta que, finalmente, tengo un borrador para mostrar al cliente.\u201d<\/em><\/p>\nEjemplo de dise\u00f1o de la estructura:<\/p>\n
<\/a><\/p>\nEjemplo de dise\u00f1o para la p\u00e1gina:http:\/\/www.ginecologiavhebron.com<\/a>(dise\u00f1o deDeumonforte<\/em>y programaci\u00f3n Javajan)<\/p>\nTrabajando con bloques rectangulares<\/p>\n
La estructura de una p\u00e1gina web se sub-divide en bloques rectangulares, dentro de los cuales vamos a posicionar los diferentes elementos de dise\u00f1o o contenido. M\u00e1s tarde, al aplicar dise\u00f1o sobre estos rect\u00e1ngulos podemos enmascararlos eliminando los bordes o utilizando formas curvas, pero es importante conocer que cualquier estructura web est\u00e1 basada en rect\u00e1ngulos horizontales (no en diagonal).<\/p>\n
A pesar de todo, el dise\u00f1o de la estructura web no finaliza al posicionar los diferentes bloques, porque tenemos de definir como se adaptaran y comportaran en funci\u00f3n de la resoluci\u00f3n de pantalla.<\/p>\n<\/p><\/div>\n<\/p><\/div>\n
<\/p>\n
<\/p>\n
<\/p>\n
Adaptaci\u00f3n de la estructura en funci\u00f3n de la resoluci\u00f3n<\/h1>\nAdaptaci\u00f3n del bloque principal<\/h2>\n\nBloque principal: <\/strong>recuadro exterior que engloba toda la estructura de p\u00e1gina web, es decir, no existe ning\u00fan recuadro o bloque secundario que rebase el bloque o recuadro principal.<\/p>\nBloque secundario: <\/strong>cada uno de los recuadros que componen el bloque o recuadro principal.<\/p>\nExisten tres maneras distintas de adaptar el bloque principal en funci\u00f3n del tama\u00f1o de la pantalla:<\/p>\n
Fijo:<\/p>\n
El bloque se dise\u00f1a con un tama\u00f1o fijo que no se va a modificar en funci\u00f3n del tama\u00f1o de la pantalla. Es el m\u00e1s f\u00e1cil de dise\u00f1ar y maquetar porqu\u00e9 los elementos del dise\u00f1o o bloques secundarios siempre estar\u00e1n en la misma posici\u00f3n y mantendr\u00e1n el mismo ancho.<\/p>\n
Ejemplo p\u00e1gina web de estructura fija, mostrada en pantallas de distinta resoluci\u00f3n. A resoluciones grandes aparecen muchos espacios en blanco; a resoluciones peque\u00f1as el dise\u00f1o queda cortado<\/p>\n
Si escogemos una estructura principal fija, tenemos que pensar qu\u00e9 tama\u00f1o en pixeles vamos a utilizar. Seg\u00fan las estad\u00edsticas actuales (http:\/\/www.w3schools.com\/browsers\/browsers_display.asp<\/a>), el 98% de usuarios tienen resoluciones igual o superiores a 1024×768, aunque empiezan a crecer el n\u00famero de usuarios con pantallas inferiores a 800×600 debido a la navegaci\u00f3n con tabletas y tel\u00e9fonos.<\/p>\nSi dise\u00f1amos un bloque principal fijo, podr\u00eda ser bueno tomar como referencia la resoluci\u00f3n de 1024×768, aunque el ancho del bloque principal deber\u00eda de ser m\u00e1s peque\u00f1o, pues el navegador se necesita algunos pixeles para los men\u00fas, m\u00e1rgenes y barras de desplazamiento. As\u00ed pues, deber\u00edamos de dise\u00f1ar un bloque principal de un ancho m\u00e1ximo de 990 pixeles. Si queremos que todo el contenido aparezca en la pantalla y no aparezcan barras de desplazamiento verticales, la altura m\u00e1xima del dise\u00f1o deber\u00eda de ser entre 600 y 650 pixeles (depender\u00e1 mucho del espacio que ocupen los men\u00fas del navegador del usuario).<\/p>\n
Normalmente, la estructura principal fija se centra en la pantalla para resoluciones grandes, aunque tambi\u00e9n se puede alinear a la izquierda o a la derecha.<\/p>\n
Fluido o l\u00edquido:<\/p>\n
Con independencia de la resoluci\u00f3n de una pantalla, un bloque principal fluido ocupa un porcentaje horizontal de la pantalla, normalmente el 100% (aunque tambi\u00e9n puede ocupar el 90% centrado, o alineado a la izquierda o derecha). Normalmente, al disminuir la resoluci\u00f3n o tama\u00f1o de una pantalla, el bloque fluido se estrecha horizontalmente pero se alarga verticalmente para poder presentar toda la informaci\u00f3n 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\u00f3n fija o fluida (se ver\u00e1 en el siguiente punto).<\/p>\n
Dise\u00f1ar y maquetar una estructura fluida es m\u00e1s complejo, pues se tienen que prever c\u00f3mo se van a comportar cada uno de los bloques secundarios en su interior. Bien dise\u00f1ada, una estructura fluida se puede adaptar desde las resoluciones de pantalla m\u00e1s grandes hasta las resoluciones de pantallas m\u00e1s peque\u00f1as de los tel\u00e9fonos, aunque para \u00e9ste \u00faltimo caso se recomiendan distintas estructuras, como se ver\u00e1 a continuaci\u00f3n.<\/p>\n
Ejemplo de adaptaci\u00f3n fluida (en este caso, todos los bloques secundarios tambi\u00e9n son fluidos):<\/p>\n
<\/p>\n
Dos buenos art\u00edculo sobre dise\u00f1o fluido:
http:\/\/www.javajan.com\/news.php?id=225-guia<\/a> y http:\/\/www.javajan.com\/news.php?id=193-guia<\/a><\/p>\nEstructuras distintas – Dise\u00f1o sensible:<\/p>\n
El dise\u00f1o sensible (del ingl\u00e9s: responsive design) es una opci\u00f3n cada vez m\u00e1s utilizada en el dise\u00f1o web actual es crear estructuras del bloque principal distintas, reacomodando los contenidos en funci\u00f3n de la resoluci\u00f3n de la pantalla. Esto puede ser muy \u00fatil cuando consideremos el acceso a nuestro web a trav\u00e9s de tel\u00e9fonos, que tienen resoluciones de pantallas muy peque\u00f1as. Algunos navegadores para m\u00f3viles reestructuran el dise\u00f1o de los webs de un modo eficiente, pero si queremos asegurar la buena visualizaci\u00f3n y dise\u00f1o de nuestro web a cualquier resoluci\u00f3n, deberemos de crear varias estructuras en funci\u00f3n de la resoluci\u00f3n de la pantalla.<\/p>\n
En un dise\u00f1o sensible, no aparecer\u00e1n barras de desplazamiento horizontales (scroll) hasta resoluciones muy peque\u00f1as.<\/p>\n
Podemos decidir las medidas a las cuales se presentaran las diferentes estructuras del bloque principal en funci\u00f3n del dise\u00f1o planteado, pero tambi\u00e9n podemos determinarlas consultando las pantallas m\u00e1s utilizadas actualmente:<\/p>\n
Resoluciones de pantalla m\u00e1s utilizadas:
http:\/\/www.w3schools.com\/browsers\/browsers_display.asp<\/a>
Resoluciones de pantalla m\u00e1s utilizadas en tel\u00e9fonos m\u00f3viles:
http:\/\/deviceatlas.com\/resourcecentre\/Explore+DeviceAtlas+Data\/Data+Explorer#_\/<\/a><\/p>\nSi queremos optimizar recursos y dise\u00f1ar \u00fanicamente dos estructuras de web, una posible soluci\u00f3n ser\u00eda dise\u00f1ar 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\u00eda ser fija para pantallas mayores a 480 p\u00edxeles (iPhone) que se vuelva fluido para resoluciones menores, hasta las pantallas de los tel\u00e9fonos m\u00e1s peque\u00f1as (160 pixeles o menos). Es importante recordar que a todas estas medidas debemos restar 30 o 40 pixeles para que el dise\u00f1o no quede recortado por barras de desplazamiento o m\u00e1rgenes del navegador web.<\/p>\n
Buen art\u00edculo sobre dise\u00f1o web sobre m\u00f3viles:
http:\/\/www.circulodemaquetadores.com\/disenando-para-moviles-diseno-para-multiples-tamanos-de-pantalla\/<\/a>
Ventajas del web frente las aplicaciones y an\u00e1lisis de los distintas posibilidades de dise\u00f1o web para m\u00f3vil
http:\/\/www.javajan.com\/news.php?id=350-guia<\/a><\/p>\nEjemplo de estructuras distintas: a 800 pixeles existe una transici\u00f3n que camb\u00eda de una estructura de 3 columnas a una estructura de 2 columnas (manteniendo la mayor\u00eda de contenidos):<\/p>\n
<\/p>\n
Consultar tambi\u00e9n los diversos ejemplos web con distintas estructuras fluidas que presentamos y explicamos al final del cap\u00edtulo.<\/p>\n
Comparativa:<\/p>\n
Ventajas y desventajas de los tres modelos de adaptaci\u00f3n a las distintas resoluciones de pantalla:<\/p>\n
\n
- \n
- P\u00e1gina web: <\/strong>documento que forma parte de un sitio web, con un contenido que puede incluir texto, im\u00e1genes, elementos multimedia y enlaces para navegar a otras p\u00e1ginas web o contenidos.<\/li>\n
- Sitio web: <\/strong>colecci\u00f3n de p\u00e1ginas web relacionadas y comunes a un dominio de Internet o subdominio.<\/li>\n
- P\u00e1gina principal o home<\/em>: <\/strong>p\u00e1gina de entrada a un sitio web, normalmente con un dise\u00f1o mucho m\u00e1s trabajado, que presenta el sitio y las opciones de navegaci\u00f3n a las p\u00e1ginas o contenidos del sitio.<\/li>\n
- Enlace web: <\/strong>elemento de una p\u00e1gina web que, al clicarlo te lleva a otra p\u00e1gina web o a otra parte de la misma p\u00e1gina web.<\/li>\n
- Men\u00fa de navegaci\u00f3n: <\/strong>conjunto de enlaces web que reflejan la organizaci\u00f3n de los contenidos del sitio web y enlazan a cada una de sus p\u00e1ginas web.<\/li>\n
- Dominio de Internet: <\/strong>es un nombre \u00fanico 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\u00f1adores).<\/li>\n
- URL: <\/strong>cadena de caracteres con la cual se asigna una direcci\u00f3n \u00fanica a cada uno de los recursos de informaci\u00f3n disponibles en la Internet (p\u00e1ginas web y sus elementos: im\u00e1genes, hojas de estilos, elementos multimedia,\u2026). La URL de la p\u00e1gina principal normalmente es el nombre del dominio.<\/li>\n
- Servidor web: <\/strong>ordenador remoto que provee los datos solicitados por parte de los navegadores de otras computadoras. Las p\u00e1ginas web y dominios de Internet deben de ser alojadas en un servidor. Existen muchas empresas que poseen servidores.<\/li>\n
- Navegador web: <\/strong>aplicaci\u00f3n que interpreta el contenido de las p\u00e1ginas web y lo presenta en pantalla permitiendo al usuario interactuar. Ejemplos de navegador: Internet Explorer, Mozilla Firefox, Google Chrome, Safari… Al dise\u00f1ar una p\u00e1gina web, tenemos que tener en cuenta que los distintos navegadores pueden presentar nuestros dise\u00f1os con peque\u00f1as variaciones.<\/li>\n
- Resoluci\u00f3n de ventana web: <\/strong>n\u00famero de p\u00edxeles m\u00e1ximos horizontales y verticales disponibles para presentar una p\u00e1gina web. La resoluci\u00f3n vendr\u00e1 determinada por la resoluci\u00f3n de la pantalla del dispositivo y por el espacio que el navegador web deja para la presentaci\u00f3n. Las distintas resoluciones disponibles Internet limitaran en gran medida el dise\u00f1o web.\n
Ejemplos de pantalla ipad (1024 x 768) y iphone (640 x 480) mostrando la misma p\u00e1gina web, presenta un dise\u00f1o diferente para cada una de las resoluciones.<\/span><\/p>\n<\/li>\n- Dise\u00f1ador web: <\/strong>Profesional que utiliza programas de dise\u00f1o tradicional, como photoshop, freehand, ilustrator, indesign\u2026<\/li>\n
- Maquetador web: <\/strong>Profesional que maqueta los dise\u00f1os utilizando las codificaciones est\u00e1ndares (html, css, javascript\u2026), transformando los dise\u00f1os en p\u00e1ginas web.<\/li>\n
- Programador web: <\/strong>Profesional que programa las p\u00e1ginas web maquetadas (php, asp, jquery \u2026) para que presenten informaci\u00f3n de una base de datos, personalicen los contenidos, env\u00eden los formularios, interact\u00faen con el usuario\u2026<\/li>\n<\/ul>\n
<\/span><\/p>\n<\/p><\/div>\n<\/p><\/div>\n
Diferencias b\u00e1sicas entre dise\u00f1o impreso
y dise\u00f1o web<\/h1>\n\nInteractuar en vez de mostrar<\/p>\n
El dise\u00f1o impreso est\u00e1 basado en ver, pero el dise\u00f1o web est\u00e1 basado en hacer.
La funci\u00f3n del dise\u00f1o tradicional es contar historias, la misi\u00f3n del dise\u00f1o digital es entablar conversaciones.
El soporte gr\u00e1fico se sostiene sobre relaciones espaciales y la experiencia web sobre relaciones temporales. El dise\u00f1o impreso es est\u00e1tico, en cambio, la experiencia de un sitio web se define por la interacci\u00f3n del usuario con dise\u00f1o y contenido. Por ejemplo, un usuario hace clic sobre la navegaci\u00f3n o se desplaza hacia abajo para leer una p\u00e1gina.
Un buen dise\u00f1o impreso tiene que entenderse y ser bonito, pero un buen dise\u00f1o web tiene que entenderse, facilitar la navegaci\u00f3n (usabilidad) y ser bonito. Normalmente se recomienda priorizar la usabilidad, despu\u00e9s el contenido y si queda tiempo el arte. Aunque esto no implica que el buen dise\u00f1o se deba sacrificar para ganar usabilidad, en esta gu\u00eda vamos a explicar c\u00f3mo hacerlos compatibles.<\/p>\nEspacio y entorno indefinido en vez de definido<\/p>\n
El dise\u00f1o impreso se visualiza en espacio limitado pero el dise\u00f1o web se tiene que poder visualizar en m\u00faltiples espacios, adem\u00e1s el dise\u00f1o web se puede extender fuera de la pantalla (podemos que utilizar barras de desplazamiento o scrolling).
Cuando se dise\u00f1a para imprimir, el resultado va a ser exactamente igual o muy parecido al original que hemos dise\u00f1ado y guardado, en cambio, cuando se dise\u00f1a una web, debemos considerar factores externos de los cuales no tenemos ning\u00fan control (el usuario puede tener resoluciones de pantalla diferente o utilizar un navegador web distinto, adem\u00e1s de no tener las tipograf\u00edas utilizadas,\u2026).
El dise\u00f1o impreso se visualiza igual en cualquier revista, en cambio, los diferentes navegadores web pueden presentar los elementos del dise\u00f1o 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\u2026 sin que alguno muestre errores.<\/p>\nProblema con las tipograf\u00edas<\/p>\n
En el dise\u00f1o impreso se puede utilizar cualquier tipograf\u00eda, pero el dise\u00f1o web normalmente solo muestra las tipograf\u00edas que el usuario tenga instaladas en su ordenador. M\u00e1s adelante veremos que existen diversas soluciones a este problema, por ejemplo poniendo el texto con el formato y la tipograf\u00eda deseada en im\u00e1genes, pero tendremos que tener en cuenta las limitaciones.<\/p>\n
Pixeles en vez de pulgadas y cent\u00edmetros<\/p>\n
En el dise\u00f1o impreso se trabaja con pulgadas y cent\u00edmetros, pero en el dise\u00f1o web solo se trabaja con pixeles. As\u00ed pues, dependiendo de la resoluci\u00f3n de la pantalla (pixeles por pulgada o dpi) una misma imagen se puede ver mayor o menor. Las medidas de los dise\u00f1os web siempre son p\u00edxeles, aunque en ocasiones se pueden utilizar porcentajes de pantalla o porcentajes de \u00e1rea (se explica m\u00e1s adelante).
Si les cuesta dise\u00f1ar con pixeles, pueden utilizar la resoluci\u00f3n 72 dpi, que es la resoluci\u00f3n est\u00e1ndar de la mayor\u00eda de pantallas de ordenador. Dise\u00f1ando a esta resoluci\u00f3n, la mayor\u00eda de usuarios ver\u00e1n las im\u00e1genes y elementos de su dise\u00f1o al mismo tama\u00f1o que en su pantalla.<\/p>\nP\u00edxel: <\/strong>la menor unidad de medida en la pantalla (un punto de luz). La mayor\u00eda de pantallas tienen una resoluci\u00f3n de 72 p\u00edxeles por pulgada o dpi.<\/p>\n
Archivos peque\u00f1os en vez de grandes<\/p>\n
El dise\u00f1o impreso se trabaja con altas resoluciones de archivos y se procura mantener la mejor calidad en las im\u00e1genes y originales, mientras que en el dise\u00f1o web se trabaja con resoluciones bajas para ahorrar recursos del servidor y permitir que el usuario abra la p\u00e1gina r\u00e1pidamente. En dise\u00f1o web, debemos optimizar las im\u00e1genes y animaciones, es decir, bajar la resoluci\u00f3n lo m\u00e1s posible sin perder una calidad significativa. El peso (calculado en Kb o Mb) de una p\u00e1gina web se calcula como la suma de todos pesos de los documentos que abre una p\u00e1gina web (im\u00e1genes, 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\u00e1gina tarda un segundo m\u00e1s a descargarse y abrirse.<\/p>\nRGB en vez de CMYK<\/p>\n
En el dise\u00f1o impreso se trabaja colores substractivos o CMYK, en cambio en el dise\u00f1o web solo se trabaja con colores aditivos o RGB.
El color es un error com\u00fan de los dise\u00f1adores gr\u00e1ficos cuando quieren dise\u00f1ar para web. En la escuela de dise\u00f1o te ense\u00f1an a utilizar siempre CMYK para que la impresi\u00f3n quede bien, pero en el mundo web, es todo lo contrario, las pantallas emiten luz \u00fanicamente interpretan datos RGB o aditivos.<\/p>\nPosible editar despu\u00e9s de publicar<\/p>\n
El dise\u00f1o impreso no se puede modificar despu\u00e9s de la impresi\u00f3n. Por suerte el dise\u00f1o web se puede modificar despu\u00e9s de la publicaci\u00f3n, se pueden corregir errores, completar contenido no introducido inicialmente, o mantener actualizada la informaci\u00f3n. En este sentido, es mejor evitar dise\u00f1os que no sean flexibles, para que en el futuro el dise\u00f1o se pueda adaptar a diferentes tama\u00f1os de los contenidos, sin perjudicar la est\u00e9tica del conjunto.<\/p>\n
<\/p>\n
<\/p>\n
<\/p>\n
Usabilidad<\/h1>\n
\nUn atributo determinante para la calidad de un sitio web es suusabilidad<\/strong>. Se trata de lograr que los visitantes encuentren r\u00e1pidamente aquello que buscan, con el m\u00ednimo esfuerzo por su parte. Sea cual sea el contenido o la finalidad de nuestra web, navegar por ella debe resultar una experiencia gratificante.<\/p>\n
Web usable: <\/strong>es aquella en la que los usuarios pueden interactuar de la forma m\u00e1s f\u00e1cil, c\u00f3moda, evidente y segura posible. Una web usable denota calidad, genera confianza y nos diferencia positivamente de otras alternativas.<\/p>\n
Los usuarios pasan mucho menos tiempo visitando una p\u00e1gina web de lo que sus dise\u00f1adores desear\u00edan, por lo que hay que facilitarles las cosas al m\u00e1ximo. Cuando un usuario encuentra que la navegaci\u00f3n por una web es c\u00f3moda, agradable y \u00fatil, existen mayores probabilidades de que la visite de nuevo en el futuro.<\/p>\n
Lograr un buen nivel de usabilidad requiere combinar h\u00e1bilmente una serie de elementos: tecnolog\u00eda, dise\u00f1o, contenidos\u2026 Aunque no existen recetas universales, he aqu\u00ed algunos criterios a tener en cuenta:<\/p>\n
- \n
- >Crear una jerarqu\u00eda visual clara en cada p\u00e1gina. <\/strong>Debe percibirse a simple vista cu\u00e1l es la importancia de los distintos contenidos, qu\u00e9 relaci\u00f3n existe entre ellos, a qu\u00e9 tema o bloque pertenecen… La colocaci\u00f3n, el tama\u00f1o, la tipograf\u00eda o los colores de los textos y de los dem\u00e1s elementos de la p\u00e1gina son los principales recursos a utilizar.<\/li>\n
- >Dar el control al usuario. <\/strong>\u00c9ste debe sentir en todo momento que sabe d\u00f3nde est\u00e1 y que controla la situaci\u00f3n. Nada importante deber\u00eda situarse a m\u00e1s de dos clics de distancia. Los t\u00edtulos y contenidos de cada apartado deben ser claros y visibles. Tambi\u00e9n son muy \u00fatiles los men\u00fas de situaci\u00f3n, la navegaci\u00f3n por pesta\u00f1as, las opciones de volver atr\u00e1s o deshacer una acci\u00f3n, la visualizaci\u00f3n clara de las distintos pasos de un proceso (la compra on-line, por ejemplo).<\/li>\n
- >Facilitar la interacci\u00f3n. <\/strong>Suele ser muy positivo que una web permita al usuario \u201chacer cosas\u201d: clicar, desplegar, abrir, mover… En todo caso, el acceso y el uso de cualquier elemento de interacci\u00f3n debe ser intuitivo, r\u00e1pido y f\u00e1cil. No podemos permitirnos frustrar al usuario o hacerle perder el tiempo.<\/li>\n
- >Aprovechar las convenciones y llamar a las cosas por su nombre. <\/strong>La mayor\u00eda de usuarios tienen ciertas expectativas derivadas de su experiencia navegando por internet. Saben, m\u00e1s o menos, d\u00f3nde se sit\u00faan los men\u00fas, c\u00f3mo funciona un buscador, para qu\u00e9 sirven determinados botones, qu\u00e9 significan ciertos iconos o expresiones, etc. As\u00ed, hay que situar los contenidos donde el usuario espera que est\u00e9n y hacer que las cosas funcionen como se espera que lo hagan. Si queremos sorprender o hacer \u201calgo diferente\u201d, hemos de asegurarnos de que ello no suponga una complicaci\u00f3n innecesaria.<\/li>\n
- >Simplificar<\/strong>. Hay que evitar la informaci\u00f3n 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\u00e1genes y animaciones, y crearemos men\u00fas claros, bien estructurados y desplegables si hay muchas opciones a mostrar.<\/li>\n<\/ul>\n
No hay que entender la usabilidad como un lastre para nuestra creatividad. Podemos innovar y ser originales mientras no olvidemos quenuestro dise\u00f1o debe estar centrado en el usuario<\/strong>. \u00c9l es el verdadero protagonista y hemos de asegurarnos de que comprender\u00e1 y podr\u00e1 seguirnos el juego en todo momento.<\/p>\n
Otros aspectos a tener en cuenta<\/strong>:<\/p>\n
- \n
- >Situar los elementos importantes siempre a mano.<\/li>\n
- >Los usuarios no siempre entran por la p\u00e1gina principal (poner men\u00fas de navegaci\u00f3n en todas las p\u00e1ginas).<\/li>\n
- >Dejar claro qu\u00e9 elementos son enlaces y cu\u00e1les no.<\/li>\n
- >A\u00f1adir un buscador o un mapa del sitio web si \u00e9ste tiene mucho contenido i\/o p\u00e1ginas.<\/li>\n
- >Enlazar a cualquier informaci\u00f3n en menos de 3 clicks (o enlaces)<\/li>\n
- >Mantener una coherencia en el dise\u00f1o de toda la p\u00e1gina.<\/li>\n
- >Seguir las reglas b\u00e1sicas del buen dise\u00f1o: selecci\u00f3n de colores, tipograf\u00edas, regla de los tercios\u2026<\/li>\n
- >No distraer el usuario con excesivas animaciones o elementos que parpadean.<\/li>\n
- >Intentar que los contenidos no tengan faltas de ortograf\u00eda.<\/li>\n
- >No abrir nuevas ventanas del navegador innecesariamente…<\/li>\n<\/ul>\n
Ejemplo web que intenta romper todas las reglas de la usabilidad:http:\/\/theworldsworstwebsiteever.com\/<\/a>
(listado de errores del web:http:\/\/theworldsworstwebsiteever.com\/new_page_1.htm<\/a>).
Otro sitio con listados de dise\u00f1os web que se deben evitar copiar:http:\/\/www.javajan.com\/?id=271-guia<\/a><\/p>\n<\/p><\/div>\n<\/p>\n<\/p><\/div>\n
<\/p>\n
<\/p>\n
<\/p>\n
Arquitectura de un sitio web<\/h1>\n
\nAlgunos dicen que dise\u00f1ar para web es m\u00e1s parecido a la arquitectura que al dise\u00f1o gr\u00e1fico. Como en una casa, antes de escoger los muebles, el color de las cortinas o la iluminaci\u00f3n, es importante saber c\u00f3mo estar\u00e1 estructurada la planta, c\u00f3mo ser\u00e1 el sal\u00f3n, donde estar\u00e1n las habitaciones, como se acceder\u00e1 a ellas, donde estar\u00e1n las ventanas… Asimismo en la web, si la estructura no es s\u00f3lida e intuitiva, el arte de la p\u00e1gina no sirve para nada.<\/p>\n
Antes de empezar a trabajar en el aspecto puramente est\u00e9tico de las p\u00e1ginas web, imaginando animaciones impresionantes y gr\u00e1ficos atractivos, es indispensables pensar en la estructura del sitio web. Para eso, fundamentalmente, tendremos que:<\/p>\n
- \n
- >Definir las secciones y p\u00e1ginas web que debe tener el sitio.<\/li>\n
- >Escoger las secciones o p\u00e1ginas a las que podremos acceder desde la p\u00e1gina principal (o de inicio).<\/li>\n
- >Decidir si alguna secci\u00f3n o p\u00e1gina tiene que destacar m\u00e1s respecto las dem\u00e1s.<\/li>\n
- >Distribuir el contenido a presentar entre las distintas secciones y p\u00e1ginas.<\/li>\n
- >Concretar las distintas v\u00edas de acceso a cada una de p\u00e1ginas web del sitio (es importante ofrecer m\u00faltiples maneras de acceder a la misma informaci\u00f3n).<\/li>\n
- >Especificar el n\u00famero de idiomas que dispondr\u00e1 el sitio web.<\/li>\n<\/ul>\n
Para ayudar a concretar la estructura final del sitio web, muchos dise\u00f1adores y programadores web recomiendan hacer un esquema a mano alzada, con post-its o con un simple programa de dise\u00f1o del ordenador, que nos permita realizar cambios f\u00e1cilmente a medida que redescubrimos mejores estructuras para nuestro sitio web.<\/p>\n
Ejemplo de la estructura de un sitio web en el que se detalla todas las p\u00e1ginas y el recorrido para acceder a ellas.<\/span><\/p>\nNormalmente, el contenido de un sitio web se estructura en diferentes p\u00e1ginas web, pero debemos mencionar una tendencia (no muy utilizada ni recomendada), llamada \u201cparallax scrolling\u201d, que estructura todos los contenidos en una solo p\u00e1gina web y permite que el usuario acceda a ellos mediante enlaces internos o bajando por la barra de desplazamiento o \u201cscroll\u201d.<\/p>\n
Ejemplos web de parallax scrolling: http:\/\/www.javajan.com\/news.php?id=277-guia<\/a><\/p>\n<\/p><\/div>\n
<\/p>\n
<\/p>\n
<\/p>\n
Estructura de una p\u00e1gina web<\/h1>\n
\nUna vez ya tengamos clara como estar\u00e1 estructurada la planta de la casa (sitio web a dise\u00f1ar), podemos empezar a dise\u00f1ar la estructura de cada habitaci\u00f3n (p\u00e1gina web), decidiendo donde pondremos los muebles (contenido) y la decoraci\u00f3n (elementos gr\u00e1ficos). Con especial esmero tendremos que estructurar el sal\u00f3n de la casa (p\u00e1gina principal), donde recibiremos a todos nuestros invitados (usuarios), para que sea lo m\u00e1s confortable posible (dise\u00f1o) pero tambi\u00e9n aporte el m\u00e1ximo de informaci\u00f3n sobre los anfitriones y sobre los contenidos de las distintas habitaciones (usabilidad).<\/p>\n
Para determinar la estructura de cada p\u00e1gina web, tendremos que definir (entre otros):<\/p>\n
- \n
- >Qu\u00e9 tipo de web quiere el cliente: tipo tarjeta de visita, tipo cat\u00e1logo, tipo anuncio de revista, tipo juego, una combinaci\u00f3n entre las anteriores…<\/li>\n
- >Qu\u00e9 tipo de informaci\u00f3n desea presentar el cliente: mucha imagen, mucha informaci\u00f3n escrita…<\/li>\n
- >Qu\u00e9 mensaje deber\u00eda de recibir el usuario cuando abra la p\u00e1gina principal.<\/li>\n
- >Hac\u00eda qu\u00e9 secciones del web se deber\u00eda sentir atra\u00eddo.<\/li>\n
- >Qu\u00e9 elementos comunes deben presentarse en todas las p\u00e1ginas (por ejemplo sistema de navegaci\u00f3n).<\/li>\n
- >Qu\u00e9 contenido espec\u00edfico deber\u00eda presentarse en cada p\u00e1gina.<\/li>\n<\/ul>\n
De todos modos, antes de empezar a dise\u00f1ar la estructura de una p\u00e1gina web, deber\u00edamos conocer las estructuras est\u00e1ndares utilizadas normalmente.<\/p>\n
<\/p>\n<\/p><\/div>\n
\nEstructuras est\u00e1ndares<\/h2>\n
\nUno de los aspectos m\u00e1s importantes de las estructura de una p\u00e1gina web es decidir d\u00f3nde posicionaremos los men\u00fas de navegaci\u00f3n y enlaces a otras p\u00e1ginas web y d\u00f3nde posicionaremos el contenido que van a consultar los navegantes. Existen diversos tipos de estructuras est\u00e1ndares de p\u00e1ginas web que especifican la posici\u00f3n de los men\u00fas de navegaci\u00f3n y el contenido, manteni\u00e9ndose esta estructura y dise\u00f1o durante toda la navegaci\u00f3n por el sitio web.<\/p>\n
Sin que sea sorprendente, los men\u00fas de navegaci\u00f3n acostumbran a posicionarse en los m\u00e1rgenes de la p\u00e1gina, dejando los contenidos en el centro. Por defecto, las estructuras est\u00e1ndares posicionan los men\u00fas de navegaci\u00f3n arriba o en los laterales, pero tambi\u00e9n existen otras posibilidades:<\/p>\n
Bloque de navegaci\u00f3n a la izquierda:<\/p>\n
Permite presentar muchos men\u00fas o enlaces, pues cada l\u00ednea puede ser un enlace (por ejemplo, el men\u00fa de navegaci\u00f3n de esta gu\u00eda). Tampoco supone mucho problema que los men\u00fas se extiendan fuera de la pantalla, porque el usuario puede visualizarlos con la barra de desplazamiento vertical. Este m\u00e9todo es ideal si los men\u00fas son administrables, pues el dise\u00f1o no se ver\u00e1 muy afectado si aumentan o disminuyen el n\u00famero de enlaces.<\/p>\n
<\/a>Ejemplo de bloque de navegaci\u00f3n a la izquierda:guiadise\u00f1o.com<\/a><\/p>\nBloque de navegaci\u00f3n arriba:<\/p>\n
Ideal si el sitio web no tiene demasiadas secciones. Los men\u00fas se sit\u00faan en l\u00ednea y ocupan mucho espacio. Es f\u00e1cil si los men\u00fas se despliegan con otros submen\u00fas (es m\u00e1s f\u00e1cil la navegaci\u00f3n que si los submen\u00fas se abren lateralmente)<\/p>\n
<\/a>Ejemplo de bloque de navegaci\u00f3n arriba:http:\/\/www.apple.es<\/a><\/p>\nBloque de navegaci\u00f3n derecha:<\/p>\n
Las mismas ventajas que el men\u00fa a la izquierda pero menos usado.<\/p>\n
<\/a>Ejemplo de bloque de navegaci\u00f3n a la izquierda:http:\/\/www.narfstuff.co.uk<\/a><\/p>\nCombinaci\u00f3n de los anteriores:<\/p>\n
Si tenemos muchos enlaces a presentar, siempre podemos utilizar cualquier combinaci\u00f3n de los anteriores (arriba e izquierda; izquierda y derecha; arriba, izquierda y derecha;\u2026), sobre todo si los men\u00fas se pueden agrupar en dos o tres grandes grupos.<\/p>\n
<\/a>Ejemplo de combinaci\u00f3n de bloques:http:\/\/www.apple.es<\/a><\/p>\nPie de p\u00e1gina<\/p>\n
El pie de p\u00e1gina acostumbra a tener una gran importancia en las estructuras de los webs actuales, donde se pueden repetir los men\u00fas de navegaci\u00f3n (para que el usuario no deba subir por la p\u00e1gina), situar los enlaces alaviso legal<\/em>,copyright<\/em>, redes sociales: facebook, RSS, twitter o los datos de direcci\u00f3n y contacto.<\/p>\n
Ejemplos de pie de p\u00e1gina:<\/p>\n
<\/a>Ejemplo de pie de p\u00e1gina:http:\/\/bristolarchiverecords.com<\/a><\/p>\n<\/a>Ejemplo de pie de p\u00e1gina:http:\/\/yuruinspires.com<\/a><\/p>\n<\/a>Ejemplo de pie de p\u00e1gina:http:\/\/splitdadiz.com<\/a><\/p>\n<\/a>Ejemplo de pie de p\u00e1gina:http:\/\/www.mecannical.com<\/a><\/p>\n<\/a>Ejemplo de pie de p\u00e1gina:http:\/\/bitsamppixels.com<\/a><\/p>\nOtros ejemplos web de pies de p\u00e1gina:http:\/\/www.javajan.com\/news.php?id=205-guia<\/a><\/p>\n
P\u00e1gina principal<\/p>\n
La p\u00e1gina principal es un caso especial, para la cual no existe una estructura est\u00e1ndar. Aunque la p\u00e1gina principal tambi\u00e9n se puede estructurar de un modo est\u00e1ndar, en la mayor\u00eda de sitios web, la p\u00e1gina principal no se dise\u00f1a para presentar contenido, y m\u00e1s bien se imagina como escaparate de la empresa, en el que tambi\u00e9n se presentan los men\u00fas o enlaces a las diferentes p\u00e1ginas o secciones del web.<\/p>\n
Ejemplos de p\u00e1gina principal:<\/p>\n
<\/a>Ejemplo de p\u00e1gina principal:http:\/\/www.coullon.com<\/a><\/p>\n<\/a>Ejemplo de p\u00e1gina principal:http:\/\/www.luhsetea.com<\/a><\/p>\n<\/a>Ejemplo de p\u00e1gina principal:http:\/\/dotmick.com<\/a><\/p>\n<\/a>Ejemplo de p\u00e1gina principal:http:\/\/gnosh.co.uk<\/a><\/p>\n<\/a>Ejemplo de p\u00e1gina principal:http:\/\/wearecupcup.com<\/a><\/p>\n<\/a><\/p>\nEjemplo de p\u00e1gina principal:http:\/\/www.mcfarlanechangemanagement.com.au<\/a><\/p>\n<\/p><\/div>\n<\/p><\/div>\n
<\/div>\n<\/div>\n\nDise\u00f1ando la estructura<\/h2>\n
\nConociendo las estructuras web m\u00e1s utilizadas, ya podemos empezar a dibujar la estructura espec\u00edfica de nuestra p\u00e1gina web, dibujando y posicionando a nuestro gusto los bloques de men\u00fas, contenido, gr\u00e1ficos, y los sub-bloques dentro de cada uno de los anteriores.<\/p>\n
Cada dise\u00f1ador tendr\u00e1 su propio m\u00e9todo para plasmar la estructura imaginada de una p\u00e1gina web a la pantalla de su ordenador. Aqu\u00ed transcribimos el m\u00e9todo de trabajo espec\u00edfico de un dise\u00f1ador:\u201cComienzo por bosquejar algunos posibles dise\u00f1os sobre papel. Despu\u00e9s de unos pocos de estos bocetos, decido cual me gusta m\u00e1s o cual se adapta mejor a los requisitos del cliente y el salto al Photoshop (o freehand), y uso la herramienta de rect\u00e1ngulo para bloquear las \u00e1reas que he marcado en mi papel. Una vez que he definido mi dise\u00f1o, experimento con los colores de fondo y de los rect\u00e1ngulos hasta tener un esquema de color s\u00f3lido. Y sigo trabajando con p\u00edxeles hasta que, finalmente, tengo un borrador para mostrar al cliente.\u201d<\/em><\/p>\n
Ejemplo de dise\u00f1o de la estructura:<\/p>\n
<\/a><\/p>\nEjemplo de dise\u00f1o para la p\u00e1gina:http:\/\/www.ginecologiavhebron.com<\/a>(dise\u00f1o deDeumonforte<\/em>y programaci\u00f3n Javajan)<\/p>\n
Trabajando con bloques rectangulares<\/p>\n
La estructura de una p\u00e1gina web se sub-divide en bloques rectangulares, dentro de los cuales vamos a posicionar los diferentes elementos de dise\u00f1o o contenido. M\u00e1s tarde, al aplicar dise\u00f1o sobre estos rect\u00e1ngulos podemos enmascararlos eliminando los bordes o utilizando formas curvas, pero es importante conocer que cualquier estructura web est\u00e1 basada en rect\u00e1ngulos horizontales (no en diagonal).<\/p>\n
A pesar de todo, el dise\u00f1o de la estructura web no finaliza al posicionar los diferentes bloques, porque tenemos de definir como se adaptaran y comportaran en funci\u00f3n de la resoluci\u00f3n de pantalla.<\/p>\n<\/p><\/div>\n<\/p><\/div>\n
<\/p>\n
<\/p>\n
<\/p>\n
Adaptaci\u00f3n de la estructura en funci\u00f3n de la resoluci\u00f3n<\/h1>\n
Adaptaci\u00f3n del bloque principal<\/h2>\n
\nBloque principal: <\/strong>recuadro exterior que engloba toda la estructura de p\u00e1gina web, es decir, no existe ning\u00fan recuadro o bloque secundario que rebase el bloque o recuadro principal.<\/p>\n
Bloque secundario: <\/strong>cada uno de los recuadros que componen el bloque o recuadro principal.<\/p>\n
Existen tres maneras distintas de adaptar el bloque principal en funci\u00f3n del tama\u00f1o de la pantalla:<\/p>\n
Fijo:<\/p>\n
El bloque se dise\u00f1a con un tama\u00f1o fijo que no se va a modificar en funci\u00f3n del tama\u00f1o de la pantalla. Es el m\u00e1s f\u00e1cil de dise\u00f1ar y maquetar porqu\u00e9 los elementos del dise\u00f1o o bloques secundarios siempre estar\u00e1n en la misma posici\u00f3n y mantendr\u00e1n el mismo ancho.<\/p>\n
Ejemplo p\u00e1gina web de estructura fija, mostrada en pantallas de distinta resoluci\u00f3n. A resoluciones grandes aparecen muchos espacios en blanco; a resoluciones peque\u00f1as el dise\u00f1o queda cortado<\/p>\nSi escogemos una estructura principal fija, tenemos que pensar qu\u00e9 tama\u00f1o en pixeles vamos a utilizar. Seg\u00fan las estad\u00edsticas actuales (http:\/\/www.w3schools.com\/browsers\/browsers_display.asp<\/a>), el 98% de usuarios tienen resoluciones igual o superiores a 1024×768, aunque empiezan a crecer el n\u00famero de usuarios con pantallas inferiores a 800×600 debido a la navegaci\u00f3n con tabletas y tel\u00e9fonos.<\/p>\n
Si dise\u00f1amos un bloque principal fijo, podr\u00eda ser bueno tomar como referencia la resoluci\u00f3n de 1024×768, aunque el ancho del bloque principal deber\u00eda de ser m\u00e1s peque\u00f1o, pues el navegador se necesita algunos pixeles para los men\u00fas, m\u00e1rgenes y barras de desplazamiento. As\u00ed pues, deber\u00edamos de dise\u00f1ar un bloque principal de un ancho m\u00e1ximo de 990 pixeles. Si queremos que todo el contenido aparezca en la pantalla y no aparezcan barras de desplazamiento verticales, la altura m\u00e1xima del dise\u00f1o deber\u00eda de ser entre 600 y 650 pixeles (depender\u00e1 mucho del espacio que ocupen los men\u00fas del navegador del usuario).<\/p>\n
Normalmente, la estructura principal fija se centra en la pantalla para resoluciones grandes, aunque tambi\u00e9n se puede alinear a la izquierda o a la derecha.<\/p>\n
Fluido o l\u00edquido:<\/p>\n
Con independencia de la resoluci\u00f3n de una pantalla, un bloque principal fluido ocupa un porcentaje horizontal de la pantalla, normalmente el 100% (aunque tambi\u00e9n puede ocupar el 90% centrado, o alineado a la izquierda o derecha). Normalmente, al disminuir la resoluci\u00f3n o tama\u00f1o de una pantalla, el bloque fluido se estrecha horizontalmente pero se alarga verticalmente para poder presentar toda la informaci\u00f3n 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\u00f3n fija o fluida (se ver\u00e1 en el siguiente punto).<\/p>\n
Dise\u00f1ar y maquetar una estructura fluida es m\u00e1s complejo, pues se tienen que prever c\u00f3mo se van a comportar cada uno de los bloques secundarios en su interior. Bien dise\u00f1ada, una estructura fluida se puede adaptar desde las resoluciones de pantalla m\u00e1s grandes hasta las resoluciones de pantallas m\u00e1s peque\u00f1as de los tel\u00e9fonos, aunque para \u00e9ste \u00faltimo caso se recomiendan distintas estructuras, como se ver\u00e1 a continuaci\u00f3n.<\/p>\n
Ejemplo de adaptaci\u00f3n fluida (en este caso, todos los bloques secundarios tambi\u00e9n son fluidos):<\/p>\n
<\/p>\nDos buenos art\u00edculo sobre dise\u00f1o fluido:
http:\/\/www.javajan.com\/news.php?id=225-guia<\/a> y http:\/\/www.javajan.com\/news.php?id=193-guia<\/a><\/p>\nEstructuras distintas – Dise\u00f1o sensible:<\/p>\n
El dise\u00f1o sensible (del ingl\u00e9s: responsive design) es una opci\u00f3n cada vez m\u00e1s utilizada en el dise\u00f1o web actual es crear estructuras del bloque principal distintas, reacomodando los contenidos en funci\u00f3n de la resoluci\u00f3n de la pantalla. Esto puede ser muy \u00fatil cuando consideremos el acceso a nuestro web a trav\u00e9s de tel\u00e9fonos, que tienen resoluciones de pantallas muy peque\u00f1as. Algunos navegadores para m\u00f3viles reestructuran el dise\u00f1o de los webs de un modo eficiente, pero si queremos asegurar la buena visualizaci\u00f3n y dise\u00f1o de nuestro web a cualquier resoluci\u00f3n, deberemos de crear varias estructuras en funci\u00f3n de la resoluci\u00f3n de la pantalla.<\/p>\n
En un dise\u00f1o sensible, no aparecer\u00e1n barras de desplazamiento horizontales (scroll) hasta resoluciones muy peque\u00f1as.<\/p>\n
Podemos decidir las medidas a las cuales se presentaran las diferentes estructuras del bloque principal en funci\u00f3n del dise\u00f1o planteado, pero tambi\u00e9n podemos determinarlas consultando las pantallas m\u00e1s utilizadas actualmente:<\/p>\n
Resoluciones de pantalla m\u00e1s utilizadas:
http:\/\/www.w3schools.com\/browsers\/browsers_display.asp<\/a>
Resoluciones de pantalla m\u00e1s utilizadas en tel\u00e9fonos m\u00f3viles:
http:\/\/deviceatlas.com\/resourcecentre\/Explore+DeviceAtlas+Data\/Data+Explorer#_\/<\/a><\/p>\nSi queremos optimizar recursos y dise\u00f1ar \u00fanicamente dos estructuras de web, una posible soluci\u00f3n ser\u00eda dise\u00f1ar 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\u00eda ser fija para pantallas mayores a 480 p\u00edxeles (iPhone) que se vuelva fluido para resoluciones menores, hasta las pantallas de los tel\u00e9fonos m\u00e1s peque\u00f1as (160 pixeles o menos). Es importante recordar que a todas estas medidas debemos restar 30 o 40 pixeles para que el dise\u00f1o no quede recortado por barras de desplazamiento o m\u00e1rgenes del navegador web.<\/p>\n
Buen art\u00edculo sobre dise\u00f1o web sobre m\u00f3viles:
http:\/\/www.circulodemaquetadores.com\/disenando-para-moviles-diseno-para-multiples-tamanos-de-pantalla\/<\/a>
Ventajas del web frente las aplicaciones y an\u00e1lisis de los distintas posibilidades de dise\u00f1o web para m\u00f3vil
http:\/\/www.javajan.com\/news.php?id=350-guia<\/a><\/p>\nEjemplo de estructuras distintas: a 800 pixeles existe una transici\u00f3n que camb\u00eda de una estructura de 3 columnas a una estructura de 2 columnas (manteniendo la mayor\u00eda de contenidos):<\/p>\n
<\/p>\nConsultar tambi\u00e9n los diversos ejemplos web con distintas estructuras fluidas que presentamos y explicamos al final del cap\u00edtulo.<\/p>\n
Comparativa:<\/p>\n
Ventajas y desventajas de los tres modelos de adaptaci\u00f3n a las distintas resoluciones de pantalla:<\/p>\n
\n
- >Dar el control al usuario. <\/strong>\u00c9ste debe sentir en todo momento que sabe d\u00f3nde est\u00e1 y que controla la situaci\u00f3n. Nada importante deber\u00eda situarse a m\u00e1s de dos clics de distancia. Los t\u00edtulos y contenidos de cada apartado deben ser claros y visibles. Tambi\u00e9n son muy \u00fatiles los men\u00fas de situaci\u00f3n, la navegaci\u00f3n por pesta\u00f1as, las opciones de volver atr\u00e1s o deshacer una acci\u00f3n, la visualizaci\u00f3n clara de las distintos pasos de un proceso (la compra on-line, por ejemplo).<\/li>\n
- Sitio web: <\/strong>colecci\u00f3n de p\u00e1ginas web relacionadas y comunes a un dominio de Internet o subdominio.<\/li>\n
![\"\"](\"http:\/\/www.xn--guiadiseo-s6a.com\/imgs\/ley1.gif\")
bloques conancho fijo<\/strong><\/p>\n![\"\"](\"http:\/\/www.xn--guiadiseo-s6a.com\/imgs\/ley2.gif\")
bloques deancho fluido<\/strong><\/p>\n![\"\"](\"http:\/\/www.xn--guiadiseo-s6a.com\/imgs\/ley3.gif\")
![\"\"](\"http:\/\/www.xn--guiadiseo-s6a.com\/imgs\/ley33.gif\")
espacios en blanco no ocupados por ning\u00fan bloque<\/p>\n![\"\"](\"http:\/\/www.xn--guiadiseo-s6a.com\/imgs\/exemples\/ancho_max.jpg\")
<\/p>\n![\"\"](\"http:\/\/www.xn--guiadiseo-s6a.com\/imgs\/exemples\/ancho_medio.jpg\")
<\/p>\n![\"\"](\"http:\/\/www.xn--guiadiseo-s6a.com\/imgs\/exemples\/ancho_min.jpg\")
<\/p>\n![\"\"](\"http:\/\/www.xn--guiadiseo-s6a.com\/imgs\/exemples\/Untitled-1.jpg\")
<\/p>\n![\"\"](\"http:\/\/www.xn--guiadiseo-s6a.com\/imgs\/exemples\/Untitled-2.jpg\")
<\/p>\n![\"\"](\"http:\/\/www.xn--guiadiseo-s6a.com\/imgs\/exemples\/Untitled-3.jpg\")
<\/p>\n![\"\"](\"http:\/\/www.xn--guiadiseo-s6a.com\/imgs\/exemples\/Untitled-4.jpg\")
<\/p>\n![\"\"](\"http:\/\/www.xn--guiadiseo-s6a.com\/imgs\/exemples\/Untitled-5.jpg\")
<\/p>\n![\"\"](\"http:\/\/www.xn--guiadiseo-s6a.com\/imgs\/exemples\/Untitled-6.jpg\")
<\/p>\n<\/p><\/div>\n![\"\"](\"http:\/\/www.xn--guiadiseo-s6a.com\/imgs\/exemples\/Untitled-7.jpg\")
<\/p>\n![\"\"](\"http:\/\/www.xn--guiadiseo-s6a.com\/imgs\/exemples\/Untitled-8.jpg\")
<\/p>\n![\"\"](\"http:\/\/www.xn--guiadiseo-s6a.com\/imgs\/exemples\/Untitled-9.jpg\")
<\/p>\n![\"\"](\"http:\/\/www.xn--guiadiseo-s6a.com\/imgs\/exemples\/Untitled-10.jpg\")
<\/p>\n![\"\"](\"http:\/\/www.xn--guiadiseo-s6a.com\/imgs\/exemples\/Untitled-11.jpg\")
<\/p>\n![\"\"](\"http:\/\/www.xn--guiadiseo-s6a.com\/imgs\/exemples\/Untitled-12.jpg\")
<\/p>\n<\/p><\/div>\n![\"\"](\"http:\/\/www.xn--guiadiseo-s6a.com\/imgs\/exemples\/Untitled-13.jpg\")
<\/p>\n![\"\"](\"http:\/\/www.xn--guiadiseo-s6a.com\/imgs\/exemples\/Untitled-14.jpg\")
<\/p>\n![\"\"](\"http:\/\/www.xn--guiadiseo-s6a.com\/imgs\/exemples\/Untitled-15.jpg\")
<\/p>\n![\"\"](\"http:\/\/www.xn--guiadiseo-s6a.com\/imgs\/exemples\/Untitled-16.jpg\")
<\/p>\n![\"\"](\"http:\/\/www.xn--guiadiseo-s6a.com\/imgs\/exemples\/Untitled-17.jpg\")
<\/p>\n![\"\"](\"http:\/\/www.xn--guiadiseo-s6a.com\/imgs\/exemples\/Untitled-18.jpg\")
<\/p>\n![\"\"](\"http:\/\/www.xn--guiadiseo-s6a.com\/imgs\/exemples\/Untitled-19.jpg\")
<\/p>\n![\"\"](\"http:\/\/www.xn--guiadiseo-s6a.com\/imgs\/exemples\/Untitled-20.jpg\")
<\/p>\n![\"\"](\"http:\/\/www.xn--guiadiseo-s6a.com\/imgs\/exemples\/Untitled-21.jpg\")
<\/p>\n![\"\"](\"http:\/\/www.xn--guiadiseo-s6a.com\/imgs\/exemples\/Untitled-22.jpg\")
<\/p>\n![\"\"](\"http:\/\/www.xn--guiadiseo-s6a.com\/imgs\/exemples\/Untitled-23.jpg\")
<\/p>\n![\"\"](\"http:\/\/www.xn--guiadiseo-s6a.com\/imgs\/exemples\/Untitled-24.jpg\")
<\/p>\n![\"\"](\"http:\/\/www.xn--guiadiseo-s6a.com\/imgs\/exemples\/Untitled-25.jpg\")
<\/p>\n![\"\"](\"http:\/\/www.xn--guiadiseo-s6a.com\/imgs\/exemples\/Untitled-26.jpg\")
<\/p>\n![\"\"](\"http:\/\/www.xn--guiadiseo-s6a.com\/imgs\/exemples\/Untitled-31.jpg\")
<\/p>\n![\"\"](\"http:\/\/www.xn--guiadiseo-s6a.com\/imgs\/exemples\/Untitled-32.jpg\")
<\/p>\n![\"\"](\"http:\/\/www.xn--guiadiseo-s6a.com\/imgs\/exemples\/Untitled-33.jpg\")
<\/p>\n![\"\"](\"http:\/\/www.xn--guiadiseo-s6a.com\/imgs\/exemples\/Untitled-34.jpg\")
<\/p>\n![\"\"](\"http:\/\/www.xn--guiadiseo-s6a.com\/imgs\/exemples\/Untitled-35.jpg\")
<\/p>\n![\"\"](\"http:\/\/www.xn--guiadiseo-s6a.com\/imgs\/exemples\/Untitled-36.jpg\")
<\/p>\n![\"\"](\"http:\/\/www.xn--guiadiseo-s6a.com\/imgs\/exemples\/textura3.jpg\")
<\/p>\n![\"\"](\"http:\/\/www.xn--guiadiseo-s6a.com\/imgs\/exemples\/textura2.jpg\")
<\/p>\n![\"\"](\"http:\/\/www.xn--guiadiseo-s6a.com\/imgs\/exemples\/textura4.jpg\")
<\/p>\n![\"\"](\"http:\/\/www.xn--guiadiseo-s6a.com\/imgs\/exemples\/textura5.jpg\")
<\/p>\n![\"\"](\"http:\/\/www.xn--guiadiseo-s6a.com\/imgs\/exemples\/bloc-envato.com.jpg\")
<\/a>![\"\"](\"http:\/\/www.xn--guiadiseo-s6a.com\/imgs\/exemples\/bloc-fridgeworks.com.jpg\")
<\/a>![\"\"](\"http:\/\/www.xn--guiadiseo-s6a.com\/imgs\/exemples\/bloc-www.icebrrg.com.jpg\")
<\/a>![\"\"](\"http:\/\/www.xn--guiadiseo-s6a.com\/imgs\/exemples\/bloc-www.trentcruising.com.jpg\")
<\/a>