Curso de Diseño Web V - Imágenes

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, en la tercera hablamos de la metodología de trabajo cuando nos enfrentamos a un proyecto Web y en la cuarta sobre publicar nuestro proyecto Web en Internet. En esta entrada trataremos uno de los elementos más importantes, las imágenes

En primer lugar hay que entender como funciona la carga de de un archivo HTML con imágenes en un navegador. El navegador comienza con un lienzo en blanco que ha de pintar con las respuestas que le proporciona el servidor tal y como se muestra en la siguiente imagen:

El servidor manda el archivo HTML pedido, que el navegador comienza a pintar. El navegador examina el archivo recibido y se da cuenta que éste contiene imágenes. Al no disponer de estas imágenes todavía no puede pintarlas. Pide estas imágenes al servidor, como se muestra en la siguiente imagen. En HTML usamos para incluir imágenes el elemento img.

Conforme va recibiendo las imágenes, el navegador las muestra y continua pidiendo las restantes.

Es posible que no nos demos cuenta de este proceso porqué los navegadores más modernos realizan la petición de imágenes en paralelo y porqué en la actualidad disponemos de conexiónes a Internet bastante rápidas.

Como hemos visto en los gráficos anteriores las imágenes se cargan después de leer el HTML. Podemos usar los atributos width y height para ayudar al navegador a dibujar nuestra página al decirle que ancho y alto van a tener nuestras imágenes. Si no usamos estos atributos el navegador tiene que identificar ambos valores al recibir las imágenes. Siempre que podamos es bueno ayudar al navegador, para obtener una carga más rápida de nuestras páginas Web.

¿Qué tipo de imágenes podemos usar en Internet?

Podemos usar imágenes en formato JPEG, GIF y PNG. En la entrada ¿Cuál es la diferencia entre JPEG y GIF? discutíamos cuando usar un formato u otro.

¿Cómo mejorar la accesibilidad de las imágenes

A continuación se muestra un extracto de HTML que usa el atributo alt. Este atributo se usa para ofrecer un texto alternativo.

<img src="http://softamo.com/images/logo.gif" alt="Logotipo de la empresa Softamo"/>

• El atributo alt debe ser un texto corto que describa la imagen
• Si la imagen no se encuentra (fallo en el código, se ha movido a otro directorio), algunos navegadores, muestra este texto alternativo en su lugar.
• Los lectores de pantalla usan este texto alternativo para describir a los usuarios con minusvalías visuales lo que verían en pantalla.

¿Podemos crear enlaces a otras páginas por medio de imágenes?

Sí, de hecho es muy fácil crear enlaces por medio de imágenes. Para ello debes rodear el elemento imagen (img) con el elemento enlace (a), que presentábamos en la segunda entrada de este curso, tal y como se muestra a continuación.

<a href="http://brihuega.es"> <img src="miniaturas/escudo_de_brihuega.gif" /></a>

Resumen

• Use el elemento <img> para posicionar imágenes en su portal Web.
• Los navegadores tratan los elementos <img> de un modo algo diferente que el resto de los elementos. Después de mostrar el HTML de la página, el navegador obtiene cada imagen del servidor Web y la muestra.
• Si tiene más de una imagen grande en su página Web, puede hacer la página más usable y más rápida creando miniaturas - imágenes que el usuario puede pulsar para ver una versión más grande de la imagen.
• El atributo src es como especificas la localización de la imagen. Puede incluir las imágenes de su portal usando caminos relativos en el atributo src, o imágenes desde otros portales usando una URL.
• El atributo alt del elemento <img> es una descripción significativa. Es mostrada por algunos navegadores si la imagen no puede ser encontrada, y es usada por lectores de pantalla para describir la misma a las personas con minusvalías visuales.
• Un ancho de menos de 800 pixeles es una buena general para la imágenes de un portal Web. La mayoría de los imágenes creadas por cámaras digitales son demasiado grande para usarlas en páginas Web, así que hay que reducir su tamaño.
• Imágenes demasiado grandes para un navegador hace que los portales Web sean menos usables y más lentos para descargar y mostrar.
• Un pixel es el punto más pequeño que se puede representar en la pantalla. Cada imágenes está compuesta por miles de pixeles. Dependiendo del monitor, puede haber desde 72 pixeles por pulgada a 100 pixeles por pulgada.
• JPEG y GIF son dos formatos para imágenes que están soportados extensamente por todos los navegadores.
• El formato JPEG es más adecuado para fotografías y otras imágenes complejas.
• El formato GIF es más adecuado para logotipos y otras imágenes simples con colores sólidos, lineas y texto. Las imágenes JPEG se pueden comprimir en diferentes calidades. Debe escoger un balance entre calidad y tamaño de archivo según sus necesidades.
• El formato GIF permite tener imágenes con fondo transparente.

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

Bebes y Mujeres

Hace dos días, mi pareja y yo, unimos fuerzas para lanzar un nuevo proyecto Web. Se llama Bebes y Mujeres. La siguiente cita resumen la visión del proyecto:

No sería genial tener un portal Web donde los papas puedan acudir cuando tengan una duda relacionada con sus bebés o las mujeres encuentren respuesta a sus dudas sobre su salud (adolescencia, embarazo, parto, postparto...). Un portal donde poder formular preguntas y donde la mayoría de las veces estas ya hayan sido preguntadas y respondidas por una gran comunidad de usuarios. No sería genial si las respuestas aparecieran ordenadas por relevancia. No sería genial tener un portal Web donde para formular o responder una pregunta no haya que registrarse.

Esta es la visión detrás de Bebes y Mujeres. Te invito a ayudarnos a hacerla reliadad.

Bebes y Mujeres es un lugar donde padres primerizos o experimentados y mujeres en general pueden acudir para formular preguntas y comprartir sus experiencias con otros. A diferencia de los foros habituales, que archivan las preguntas cronologicamente, bebesymujeres.com está basado en un software que permite ordenar las respuestas por relevancia. Es decir aquellas respuestas más útiles primero. Las respuestas más votadas apareceran al comienzo de la página, justo debajo de la pregunta. Nuestra visión es que bebesymujeres.com sea un compendio de conocimiento de libros, otros portales Web y experiencia personal. Todo ordenado por como de útil ha sido para otros padres y mujeres. El portal está diseñado para ser incluido en los principales motores de búsqueda. De modo que cuando alguien escriba una pregunta en Google, debería ver las respuestas más relevantes de bebesymujeres.com en los primeros resultados de la lista. Esta es una página construida por padres y mujeres para todos los padres y mujeres.

Esta página te permite ganar "reputación" basandose en las respuestas que das y como ayudas a la comunidad. Si tienes mucha reputación, puedes ayudarnos a mejorar el portal marcando preguntas como no deseadas, añadiendo "tags" a las preguntas e incluso editando o votando par a cerrar preguntas. Piensa en tags como etiquetas que ayudan a encontrar más tarde una pregunta.

El reto en los próximos meses consiste en crear una comunidad entusiasta que disfrute del poderoso interfaz que usa la Web. Os animo a notificar a vuestro contactos de la existencia del sitio y unirse a la comunidad.

Etiquetas: Bebes y Mujeres, Questions and Answers

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