Curso de Diseño Web IV - Publicar una página en la Web

Esta serie de entradas, tituladas Curso de Diseño Web, quieren ser un pequeño manual orientado a todo aquel que quiera iniciarse en el mundo del diseño Web partiendo de cero. En la primera entrada hablamos brevemente del funcionamiento de Internet y una pequeña introducción a HTML, en la segunda entrada hablamos sobre enlaces entre páginas y en la tercera hablamos de la metodología de trabajo cuando nos enfrentamos a un proyecto Web. En esta cuarta entrada hablamos sobre el proceso de mover nuestras páginas desde nuestro ordenador local a Internet.

Para publicar una página en Internet. Necesitaremos llevar a cabo los siguientes pasos:

1. Encontrar una empresa que proporcione espacio de almacenamiento. En ingles se refiere al alojamiento como Hosting. Cuando lea servicio de Hosting debe entender por ello que la empresa alquila un espacio de almacenamiento en un servidor donde residirá nuestra página. A menudo estas empresas de hosting alquilan también dominios. Algunas de las más famosas son 1&1, GoDaddy y Joker. Hay muchísimas empresas dedicadas al alquiler de servidores y dominios. Para evaluar la empresa de alquiler debemos pensar en las tecnologías que queramos usar para construir nuestras páginas, el presupuesto que tengamos, la localización de nuestro tráfico etc. A modo de metáfora podemos asemejar el dominio de una página (ej. softamo.com) con una dirección postal y el espacio de almacenamiento con la casa donde alojamos nuestras pertenencias y a la que se llega yendo a la dirección postal.
2. Escoger un nombre para tu portal. Por ejemplo: unpaisenlamochila.com. La ICANN coordina la administración de los elementos técnicos del DNS para garantizar la resolución unívoca de los nombres, para que los usuarios puedan encontrar todas las direcciones. En otras palabras, la ICANN delega en otras empresas el alquiler de nombres de dominio. Cuando una empresa nos alquila un nombre de dominio, dicha empresa notifica al ICANN que ese domino nos pertenece de modo que sólo haya en Internet un servidor asociado a dicho dominio.
3. Copiar los archivos desde tu ordenador hasta la empresa encargada del alojamiento. Para transferir archivos entre ordenadores en Internet hay varios protocolos que permiten la transferencia con cierta velocidad. Protocolos como FTP o SFTP. El uso de un protocolo u otro depende del soporte ofrecido por la empresa de alojamiento con la que contratemos.

El siguiente gráfico ilustra, el proceso mediante el cual copiamos nuestro directorio local (donde tenemos los archivos que forman nuestro portal Web) al servidor remoto.

Hay muchos programas que nos permiten usar el protocolo FTP. A continuación un listado de los más populares:

Windows

• SmartFTP, cliente FTP de pago.
• File Zilla, producto FTP gratuito
• IPSWITCH File Transfer gratis en la versión Home y de pago en la versión profesional.

MAC OS X

• Transmit es una elegante aplicación FTP para MAC OSX, de pago.
• Fetch es una de las más aplicaciones más populares FTP para Mac OSX, de pago.
• Cyberduck, una aplicación FTP gratuita para Mac OSX.

Anteriormente hemos mencionado la necesidad de alquilar un dominio o dirección Web. ¿Qué es un dominio?. Podemos dividir un dominio en tres partes. Por ejemplo para:

http://www.cabaretcafe.com/indicaciones.html

• La primera parte de la URL (http) habla sobre el protocolo que se usa para obtener un recurso
• La segunda parte (www.cabaretcafe.com) es el nombre del portal Web.
• La tercera parte (/indicaciones.html) es el camino absoluto hacia el archivo desde el directorio raíz.

¿Cómo funciona el protocolo HTTP?

El protocolo http es la base del funcionamiento de internet. Se basa en un intercambio de peticiones y respuestas entre clientes (portátiles, teléfonos móviles, ordenadores de escritorio ) y servidores. Este intercambio se ilustra en el siguiente gráfico:

¿Qué pasa si el servidor no encuentra el archivo?

Si el servidor no encuentra el archivo requerido por el cliente, envía un código 404. El protocolo HTTP define códigos de repuesta. Los navegadores entienden los códigos recibidos en los paquetes de respuesta HTTP.

¿Cómo funcionan las páginas por defecto?

A menudo navegamos a páginas que no especifican el nombre de ningún archivo. Por ejemplo, escribimos en nuestro navegador http://google.es. ¿Qué sucede en estos casos?, ¿Qué archivo envía el servidor al cliente para estas peticiones?. La respuesta es muy sencilla, los servidores nombran determinados archivos como archivos por defecto, habitualmente se usa el nombre index.html. Si en una petición se no se especifica ningún archivo, se busca el archivo por defecto. Si existe, se envía éste. Este proceso se ilustra en el siguiente gráfico.

En la segunda entrada de este curso hablamos sobre caminos relativos. Sin embargo, lo que el navegador entiende son caminos absolutos. De hecho cuando el navegador recibe un camino relativo hacia un archivo lo traduce a un camino absoluto. Un camino absoluto empieza en el directorio raíz y recorre el portal web saltando a través de directorios hasta llegar al archivo solicitado. El proceso se explica en el siguiente gráfico.

El siguiente ejercicio, muestra como construir direcciones para llegar a los diferentes archivos de nuestro portal Web.

1. http://www.autospaco.com
2. http://www.autospaco.com/direcciones.html
3. http://www.autospaco.com/nuevos/
4. http://www.autospaco.com/nuevos/imagenes/minicooper.gif
5. http://www.autospaco.com/usados/inventario.html

¿Cómo enlazo a un portal Web externo?

Podemos enlazar a portales externos. Por ejemplo el siguiente código enlazaría a la página de Softamo:
<a href="http://softamo.com">Softamo</a>

¿Cómo abrir la página enlazada en una ventana nueva?

Podemos abrir un enlace en una nueva ventana añadiendo el atributo target="_blank". El código quedaría del siguiente modo:
<a target="_blank" href="http://softamo.com">Softamo</a>

¿Cómo mejorar la accesiblidad de mis enlaces?

El atributo title sirve para mejorar la accesibilidad de nuestros enlaces. Este atributo se muestra en la mayoría los navegadores como una burbuja de ayuda cuando ponemos nuestro ratón sobre el enlace y lo dejamos encima durante un segundo. Más aún, el valor que pongamos en este atributo será leído por los lectores de pantalla usados por los usuarios con minusvalías visuales.
<a title="Ir a la empresa encargada del diseño de esta Web" href="http://softamo.com">Softamo</a>

Resumen

• Normalmente el mejor modo de publicar un portal en la Web es encontrar un proveedor de alojamiento.
• Un nombre de dominio es un nombre único, como google.com o dguadalajara.es, y es usado para identificar el portal.
• Un proveedor de alojamiento puede crear uno más servidores Web en su dominio. Los servidor se llaman a menudo www.
• El protocolo FTP (File Transfer Protocol) es un método común para transferir páginas web y contenido a un servidor.
• Un URL, Uniform Resource Locator o dirección Web, puede ser usado para identificar cualquier recurso en la Web.
• Una URL típica consiste de protocolo, un nombre de dominio Web y un camino absoluto a un recurso.
• HTTP es un protocolo de peticiones y respuestas que se usa para transferir páginas Web entre un servidor Web y un navegador.
• El protocolo file es usado por el navegador para leer páginas del propio ordenador del usuario.
• Un camino absoluto es el camino desde el directorio raíz al archivo.
• index.html y default.htm som ejemplos de páginas por omisión. Si especifica un directorio sin un nombre de archivo, el servidor Web buscara un archivo por omisión y se lo mandará al navegador.
• Puede usar caminos relativos o URLs en el atributo href de sus elementos <a> para enlazar con otras páginas. Para otras páginas en su sitio es mejor usar caminos relativos, usar URLs para enlaces externos.
• Usé el atributo id para crear un punto de destino en su página. Use # seguido del nombre usado en el atributo id para enlazar con dicha posición en la página.
• Para mejorar la accesibilidad, use el atributo title ofreciendo una descripción del enlace en los elementos <a>
• Use el atributo target para abrir un enlace en otra ventana del navegador. Né olvide que el atributo target puede ser problemático para usuarios en un rango de dispositivos y navegadores alternativos.

Este curso de diseño Web online está inspirado en el libro Head First HTML with CSS & XHTML . Compre dicho libro si quiere aprender HTML y CSS rápidamente.

Etiquetas: Curso Diseño Web, Web Design

Curso Diseño Web III - Primeros esbozos

Esta serie de entradas, tituladas Curso de Diseño Web, quieren ser un pequeño manual orientado a todo aquel que quiera iniciarse en el mundo del diseño Web partiendo de cero. En la primera entrada hablamos brevemente del funcionamiento de Internet y una pequeña introducción a HTML, en la segunda entrada hablamos sobre enlaces entre páginas. Esta entrada pretende transmitir al lector una metodología de trabajo cuando se enfrenta a un proyecto Web.

A menudo las propuestas de trabajo que reciben las agencias de diseño Web son descritas vagamente por el cliente y es tarea del diseñador descubrir los objetivos del portal Web a construir. No obstante, la mayoría de las veces recibimos un ramillete de información preexistente en forma de la antigua Web, un folleto, algunos documentos internos etc. Imaginemos que José Antonio Labordeta contacta con nosotros y nos pide que hagamos la Web de su programa de televisión un país en la mochila y nos facilita para ello su diario (mostrado en la imagen a continuación).

La primera tarea consiste en esbozar en papel o con la ayuda de algún programa de diseño de interfaz de usuario como será nuestro sitio. Yo recomiendo esbozar en papel ya que crearemos prototipos rápidamente y no hay predisposición a impedir cambios o nuevas ideas durante las primeras etapas del proceso de diseño. Nadie se enfada si tiramos su esbozo en papel a un papelera y comenzamos de cero. Sin embargo, no estará tan dispuesto a realizar cambios sobre su diseño en Microsoft Visio o OmmniGraffle en el que ha estado trabajando toda la mañana. Una vez tengamos el esbozo, hay que imaginarse como pasar de esa idea a código HTML. Este proceso se ilustra en la siguiente imagen.

El esquema HTML mostrado en la imagen anterior muestra elementos cabecera (<h1>, <h2>, <h3>), párrafos (<p>) e imágenes (<img>). El elemento imagen es un elemento vacío. Denominamos elementos vacíos a aquellos que sólo tienen etiqueta de apertura. Aparte de imagen, hay otros elementos vacíos como <br>. Éste sirve para crear retornos de carro. Los navegadores ignoran los espacios en blanco, sangrías etc. que aparezcan en nuestros archivos HTML por lo cual <br> sería el equivalente al efecto que obtenemos en los procesadores de texto cuando pulsamos la tecla ENTER. Es decir, un salto de linea.

Listas

En HTML es común encontrar información ordenada en listas. Hay dos tipos de listas aquellas cuyos elementos deben aparecer en un orden preestablecido y aquellas cuyos elementos no deben guardar un orden estricto. Ejemplo de lo primero serían el listado de los diez mandamientos que todos repetíamos en nuestros años de catequesis. En cuanto a lo segundo podemos tomar la lista de la compra. En la cual el orden en que tengamos escrita "leche" o "carne" no influye en la felicidad de nuestra nevera. Los elementos HTML para escribir listas son los siguientes:

• <ul> Lista desordenada
• <ol> Lista ordenada
• <li> elemento de una lista

A continuación se muestra un ejemplo de una lista de la compra en HTML

 
<ul> 
 <li>Pan</li> 
 <li>Leche</li> 
 <li>Mantequilla</li> 
</ul> 

Anidamiento

Podemos pensar que el modo de estructurar nuestros elementos HTML se asemeja al funcionamiento de las muñecas rusas. La originalidad de estas muñecas consiste en que se encuentran huecas por dentro, de tal manera que en su interior albergan una nueva muñeca, y ésta a su vez a otra, y ésta a su vez otra. Del mismo modo nuestros elementos HTML pueden albergar en su interior varios HTML y éstos a su vez otros. La imagen a continuación le ayudará a visualizar esta metáfora.

Resumen

• Planea la estructura del portal Web antes de escribir el contenido. Empieza con unos simples esbozos que te sirvan para crear una visión de como quedará el portal. Luego traslada esta visión a HTML.
• Planea tu página comenzando con los elementos de bloque, para luego refinarla con elementos en linea.
• Recuerda, que siempre que sea posible, hay que usar elementos que le digan al navegador el significado del contenido.
• Usa siempre el elemento que más cerca este del significado de su contenido. Por ejemplo, nunca use un elemento de párrafo cuando necesite una lista.
• <p>, <blockquote>, <ol>, <ul> y <li> son elementos de bloque. Constituyen un bloque en si mismo y son mostrados con espacio en blanco antes y después de su contenido.
• <q>, <em> y <a> son elementos en linea. El contenido de estos elementos fluye en linea con el resto del contenido del elemento que los contiene.
• Usa el elemento <br> cuando necesites insertar retornos de carro.
• <br> es un elemento vacío.
• Los elementos vacíos no tienen contenido.
• Un elemento vacío consiste sólo en una etiqueta y quizás algunos atributos.
• Un elemento anidado es un elemento contenido completamente dentro de otro elemento. Si sus elementos están anidados correctamente, sus etiquetas deberían encajar correctamente.
• Para crear una lista en HTML se debe usar una combinación de dos elementos: <ol> y <li> para una lista ordenada; o <ul> y <li> para una lista desordenada.
• Cuando el navegador muestra una lista ordenada, crea la numeración de la lista automáticamente.
• Puede especificar su propio orden en una lista ordenada por medio del atributo start. Para cambiar los valores de los elementos individuales, use el atributo value.
• Puede construir listas anidadas poniendo elementos <ol> o <ul> dentro de los elementos <li>.
• Use entidades para los caracteres especiales en su código HTML.

Este curso de diseño Web online está inspirado en el libro Head First HTML with CSS & XHTML. Compre dicho libro si quiere aprender HTML y CSS rápidamente.

Etiquetas: Curso Diseño Web, Web Design

Curso Diseño Web II - Enlaces

Esta serie de entradas, tituladas Curso de Diseño Web, quieren ser un pequeño manual orientado a todo aquel que quiera iniciarse en el mundo del diseño Web partiendo de cero.

En la primera entrada ¿Cómo funciona la Web? presentamos brevemente el idioma oficial de la Web, HTML. Hablamos de como las etiquetas HTML rodean a texto creando lo que llamamos elementos. HTML es una abreviatura de HyperText Markup Language. La parte ML (Markup Language) hace referencia al etiquetado de nuestro contenido para dar información semántica. Mientras que la parte HT (HyperText) hace referencia a la capacidad de los archivos HTML para enlazarse entre sí. Esta característica es sin duda la responsable del crecimiento exponencial de Internet, al permitirnos conectar grandes cantidades de información entre sí.

El siguiente extracto de código ilustra como se crea un enlace en HTML:

vea las <a href="indicaciones.html"> indicaciones</a> para llegar sin problemas.

El texto que aparece por defecto subrayado, en color azul y sobre el cual podemos pulsar es el texto que aparece entre la etiqueta de inicio y la etiqueta de cierre. En este caso indicaciones. La referencia que queremos enlazar la indicamos en el atributo href. Un atributo aparece dentro de la etiqueta de apertura y siempre sigue la misma nomenclatura (nombre, signo igual y valor entrecomillado). En el ejemplo decimos que queremos cargar el archivo indicaciones.html si el usuario pulsa en el enlace. La siguiente imagen muestra la estructura de un sitio Web compuesto por varias páginas HTML y varias imágenes. Añadiendo enlaces podemos saltar de archivo a archivo.

Normalmente nos ayudamos de directorios para estructurar nuestros portales y ser capaces de mantener éstos de un modo más fácil. Es habitual crear directorios de imágenes tal y como se muestra en la siguiente imagen:

Los cambios en la organización de nuestros portales requieren a menudo el uso de caminos relativos. Por caminos relativos denominamos a la cadena de caracteres que usamos antes del nombre del recurso para describir los saltos en la estructura del portal que se necesitan para llegar a otro recurso. Del mismo modo que cuando viajamos en el coche necesitamos calcular nuestras rutas teniendo en cuenta el punto de inicio y el punto de destino, HTML tiene en cuenta desde el archivo donde colocamos nuestro enlace y el archivo que queremos enlazar para calcular el camino relativo.

Por ejemplo, si queremos enlazar la página de inicio de nuestro portal (index.html) desde la página indicaciones.html nuestro enlace sería:

<a href="?../index.html"?>Volver a la página de inicio</a>

Si queremos enlazar la imagen margarita.jpg desde el archivo bebidas.html tal y como se muestra en el siguiente gráfico, el elemento imagen en HTML sería:

<img src="../imagenes/margarita.jpg" />

Resumen

• Cuando quiera enlazar una página con otra, use el elemento <a>.
• El atributo href del elemento <a> especifica el destino del enlace.
• El contenido del elemento <a> es la etiqueta del enlace. La etiqueta es lo que se ve en la página Web. Por defecto, está subrayado para indicar que se puede pulsar en él.
• Puede usar palabras o imágenes como la etiquetas de un enlace.
• Cuando pulsa en un enlace, el navegador carga la página Web que esta especificada en el atributo href.
• Puede enlazar a un archivo en el mismo directorio, o a archivos en otros directorios.
• Una dirección relativa es un enlace que apunta a otro archivo en su portal Web relativo a la página Web desde la que se enlaza. Como en un mapa, el itinerario hacia el destino depende del punto de origen.
• Use .. para enlazar a un archivo que esta en un directorio más arriba que el archivo desde el que se enlaza.
• .. significa directorio padre
• Recuerde separar las partes de su dirección con el carácter /
• Cuando la dirección hacia un imagen es incorrecto, verá el icono de una imagen rota en su página Web.
• No use espacios en los nombres de sus archivos y directorios de su página Web.
• Es una buena idea organizar los archivos de su página Web al principio del proceso de construcción del portal, de modo que no tenga que actualizar las direcciones más tarde cuando el portal crezca.
• Hay muchos modos de organizar un portal Web, como lo haga depende de usted.

Este curso de diseño Web online está inspirado en el libro Head First HTML with CSS & XHTML. Compre dicho libro si quiere aprender HTML y CSS rápidamente.

Etiquetas: Curso Diseño Web, links

Curso Diseño Web I - ¿Cómo funciona la Web?

Esta serie de entradas, tituladas Curso de Diseño Web, quieren ser un pequeño manual orientado a todo aquel que quiera iniciarse en el mundo del diseño Web partiendo de cero.

¿Cómo funciona Internet?

Internet se encuentra poblado por servidores y clientes. Por un lado los servidores almacenan los archivos (HTML, imágenes ...) que componen las páginas Web. Por otro lado los clientes, dispositivos como portátiles, teléfonos móviles, ordenadores de sobremesa, ejecutan unos programas llamados navegadores para acceder al contenido ofrecido por los servidores.

¿Qué hace un Servidor?

Un servidor es un ordenador, conectado las 24 horas del día a Internet, que acepta peticiones sobre ciertos archivos que almacena.

¿Qué hace un Navegador?

Un navegador es un programa que es capaz de interpretar lenguajes de programación relacionados con la Web como HTML, CSS o Javascript. Esta facultad le permite representar de un modo gráfico al usuario las páginas Web enviadas por el servidor.

Lo que uno escribe (el HTML) y lo que el navegador muestra

La siguiente imagen muestra la correspondencia entre un archivo HTML y la representación que un navegador muestra basandose en su contenido.

1. El elemento <title>Rock & ... </title> se muestra como título de la página en la parte superior del navegador. Este texto es también usado por los diferentes motores de búsqueda para nombrar nuestras páginas en sus listado de resultados.
2. El elemento <h1>Bienvenido a Rock& ... </h1> es una cabecera de primer nivel. Estamos habituados a utilizar cabeceras para destacar la predominancia de una porción de texto en otros programas como los procesadores de texto.
3. El elemento <img src="bebidas.jpg"/> sirve para posicionar imágenes en nuestras páginas Web.
4. El elemento <p>Este ... </p> designa una porción de texto como un párrafo.
5. Usamos el elemento <em>american bar</em> para indicar que una porción de texto contiene un cierto énfasis.
6. El elemento <h2>Dirección</h2> es una cabecera de segundo nivel. Podemos designar hasta 6 niveles distintos para nuestras cabeceras.
7. Al igual que el elemento D el uso de la etiqueta <p> indica que el texto rodeado actúa como un párrafo.

¿Qué es un elemento HTML?

Se conoce como elemento HTML al contenido (el texto) y las etiquetas de apertura y cierre. En el ejemplo de la cabecera de segundo nivel <h2>Dirección</h2>. <h2> sería la etiqueta de apertura, </h2> la etiqueta de cierre y Dirección el contenido. Se reconoce a las etiquetas de cierre por que aparecen después del contenido y llevan una barra invertida /.

HTML describe el contenido de nuestra página de un modo semántico. Es decir, definimos cabeceras, parrafos, listas etc. Para dotar de un color de fondo, cambiar el tamaño de letra o aplicar otro estilo usamos CSS. CSS es un lenguaje de programación que nos permite definir la representación de nuestros elementos HTML. A continuación se muestran varias lineas de código y una pequeña explicación de las mismas. No se preocupe si no las entiende ahora mismo.

body {
background-color: #d2b48c; ? Define el color de fondo en un tono canela.
margin-left: 20%; ? Define el margen izquierdo a un 20% del tamaño de la página.
border: 1px dotted gray; ? Define un borde alrededor de la etiqueta body que es punteado y de color gris.
padding: 10px 10px 10px 10px; ? Crea un indentado alrededor de la etiqueta body de la página.
font-family: san-serif; ? Define el tipo de letra del texto.
}

Resumen

• HTML y CSS son los lenguajes que usamos para crear páginas Web.
• Los servidores Web almacenan y sirven páginas Web que son creadas con HTML y CSS. Los navegadores recuperan las páginas y muestran su contenido basandose en HTML y CSS.
• HTML es una sigla de HyperText Markup Language y se usa para estructurar una página Web.
• CSS es una sigla de Cascading Sytel Sheets, y se usa para controlar la presentación de su HTML.
• Usando HTML marcamos el contenido con etiquetas para dar estructura. Las etiquetas de apertura, el contenido y las etiquetas de clausura se conocen como elementos. Un elemento esta compuesto de tres partes: etiqueta de apertura, contenido y etiqueta de cierre. Hay algunos elementos que son excepciones a esta regla, como <img>.
• Las etiquetas de apertura pueden tener atributos.
• Las etiquetas de cierre tienen un / después del símbolo menor que, delante del nombre de la etiqueta para distinguirlos de las etiquetas de cierre.
• Las páginas deben tener siempre un elemento <html> junto con un elemento <head> y un elemento <body>.
• Lo que se pone dentro del elemento <body> es lo que se ve en el navegador.
• La mayor parte del espacio en blanco (sangrías, retornos de carro, espacios) son ignorados por el navegador, sin embargo el uso de estos elementos puede hacer que tu código HTML sea más legible.
• Se puede añadir CSS a una página Web en HTML, poniendo las reglas CSS dentro del elemento <style>. El elemento style debe estar siempre dentro del elemento <head>
• Puede especificar la estética de los elementos de su código HTML usando CSS.

Este curso Web online está inspirado en el libro Head First HTML with CSS & XHTML. Compre dicho libro si quiere aprender HTML y CSS rapidamente.

Etiquetas: Curso Diseño Web, Internet, Web Design

¿Cual es la diferencia entre JPEG y GIF?

Usa JPEG para fotografías y gráficos complejos	Usa GIF para imágenes con colores sólidos, logotipos y formas geométricas
Funciona mejor con imágenes de tonalidades continuas. Por ejemplo, fotografías.	Funciona mejor con imágenes que tienen sólo unos pocos color solidosm, imágenes con lines como logotipos y texto pequeño dentro de imágenes.
Puede representar imágenes con hasta 16 millones de colores.	Puede representar imágenes con hasta 256 colores.
Es un formato con perdidas porque al reducir el tamaño del archivo, se pierda también algo de información sobre la imagen.	GIF comprime el archivo para reducir el tamaño del mismo, sin embargo no se se pierde información sobre la imagen. Se dice que es un formato sin perdidas.
No soporta transparencia	Permite definir un color de fondo como transparente de modo que todo lo que este debajo de la imagen se vea.

¿Que hace que una fotografía en JPEG sea mejor que una fotografía en GIF, o que un logotipo en GIF sea mejor que un logotipo en JPEG?
Mejor se define generalmente como un compromiso entre cualidad de imagen y tamaño de archivo. Una fotografía en JPEG puede ser generalmente mucho más pequeña que un GIF con la misma calidad, mientras que un logotipo en GIF será normalmente más atractivo y tendá un tamaño menor menor que el mismo logotipo en formato JPEG.

Etiquetas: images

Los seis pilares del diseño Web

Lograr el equilibrio entre los pilares del diseño Web es clave para el éxito de nuestro proyecto.

Hay seis pilares:

Usabilidad

La usabilidad se refiere a la claridad y la elegancia con que se diseña la interacción con un portal Web. Los portales difíciles de usar pueden resultar antipáticos, haciendo que los visitantes los abandonen rápidamente.

Estética

Se refiere a la armonía y apariencia agradable a la vista, que tiene un portal Web desde el punto de vista de la belleza. Es decir que un portal Web tenga un aspecto bello y elegante. A menudo, se cree equivocadamente que el diseño Web consiste sólo en dar a un portal Web una estética agradable. Sin embargo, la estética es sólo uno de los pilares. Y el favorecer dicho pilar en exceso puede perjudicar el resultado final. Esto es quizás debido a que en los inicios muchos de los diseñadores Web, venían de áreas de diseño gráfico y carecían de una visón más global. Esto causo la aparición de sitios en flash con animaciones superfluas y navegación compleja que limitaban la usabilidad, accesibilidad y visibilidad del contenido de las páginas. Afortunadamente esta tendencia se está corrigiendo y la industria, más madura, tiene en cuenta el resto de los pilares.

Accesibilidad

Un portal Web es accesible cuando el contenido ofrecido se puede acceder desde diferentes dispositivos (PC's, teléfonos móviles, ..) y por diferentes grupos de personas. Por ejemplo, gente con minusvalías. Cuando hablamos de minusvalías normalmente pensamos en gente con minusvalías visuales, sin embargo hay muchos otros tipos de minusvalías (auditivas, comprensión de lectura ...). Las personas de avanzada edad tienen a menudo dificultades navegando en portales Web con letra demasiado pequeña, navegación confusa o lenguaje complejo. Hay muchas razones para enfatizar la accesibilidad de los portales Web: incentivos comerciales (cuanto más accesible sea nuestro contenido, mayor número de personas alcanzaremos), responsabilidades legales y obligaciones morales.

Contenido

Este punto es, con asiduidad, el más descuidado de todos. Sin embargo, el éxito de un portal Web reside a menudo en la calidad de su contenido. No son pocas las veces, que el contenido de un portal Web es una copia de aquel folleto o tríptico que la organización ya tenía. La Web es una plataforma distinta a la prensa escrita y por tanto necesita un modo de escribir diferente ya que los usuarios consumen la información de un modo diferente. Estudios han mostrado que los usuarios de la Web realmente no leen tal y como estamos acostumbrados, sino que le echan un vistazo al texto seleccionando palabras individuales y frases.

Desarrollo

El desarrollo de un portal Web se refiere a los aspectos técnicos del proyecto. La industria del diseño Web evoluciona rápidamente y es importante que no sólo el personal técnico sino el dueño o gestor del portal tengan una visión de las oportunidades que existen para mejorar su portal y por lo tanto alcanzar los objetivos del mismo.

Objetivos

Para el dueño o gestor de un portal los objetivos de una portal deben ocupar la mayor parte de su atención. Es importante definir dichos objetivos para que el equilibrio entre el resto de pilares se encargue de satisfacerlos. Objetivos pueden ir desde incrementar la visibilidad de la compañía para nuestros potenciales clientes a aumentar nuestra ventas a través de comercio electrónico.

Esta entrada esta inspirada en el libro The Website Owner's Manual escrito por Paul Boag. Recomiendo la compra del mismo, si quiere profundizar en el tema.

Etiquetas: Web Design