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