Introducción Al Diseño Web

64
INTRODUCCIÓN AL < DISEÑO WEB > ASOCIACIÓN DISEÑO WEB Y SEGURIDAD - UNIVERSIDAD DE CÁDIZ FRANCISCO JAVIER DÁVILA DELGADO AUTOR MÁS INFORMACIÓN EN www.adwys.es EN COLABORACIÓN CON

description

Taller creado e impartido por Javier Dávila, de la Asociación de Diseño Web y Seguridad (ADWYS) de la Universidad de Cádiz, con motivo de la semana de las asociaciones del 2008.

Transcript of Introducción Al Diseño Web

Page 1: Introducción Al Diseño Web

INTRODUCCIÓNAL <DISEÑO WEB>

ASOCIACIÓN DISEÑO WEB Y SEGURIDAD - UNIVERSIDAD DE CÁDIZ

FRANCISCO JAVIER DÁVILA DELGADOAUTOR

MÁS INFORMACIÓN EN www.adwys.es

EN COLABORACIÓN CON

Page 2: Introducción Al Diseño Web
Page 3: Introducción Al Diseño Web

INDICE DE CONTENIDOS

¿QUÉ ES EL DISEÑO WEB?_ 1

LA RED DE REDES_ 5

LA WEB: FUNCIONAMIENTO_ 6

TIPOS DE PÁGINAS WEB: ESTÁTICAS Y DINÁMICAS_ 7

LENGUAJES DE MARCADO_ 9

HTML_ 10

CSS: UNA BREVE INTRODUCCIÓN_ 39

OTRAS TECNOLOGÍAS_ 48

ACCESIBILIDAD, USABILIDAD Y ESTÁNDARES WEB_ 50

DISEÑO LIMPIO Y POSICIONAMIENTO ÓPTIMO (SEO)_ 52

ALGUNOS ERRORES COMUNES EN EL DISEÑO WEB_ 54

LICENCIA_ 59

Page 4: Introducción Al Diseño Web
Page 5: Introducción Al Diseño Web

¿QUÉ ES EL DISEÑO WEB?_

Se puede entender el diseño web como la actividad enfocada a la planificación, el diseño y la implementación de sitios y páginas web. Para que un diseño web cumpla a la perfección con los objetivos de mostrar la información de manera adecuada y cuidar la forma en la que ésta se presenta hay que tener en cuenta diferentes factores:

• El acceso a la información debe ser fácilmente accesible, proporcionando al usuario recursos para acceder a todas y cada una de las páginas web de un sitio (navegabilidad)

• La navegación por nuestra página ha de ser cómoda, por lo que nuestra interfaz tiene que ser clara y fácil de usar (usabilidad)

• Analizar y organizar la información, seleccionando la estructura más conveniente para mostrarla (arquitectura)

• Cuidar la interacción del usuario con medios como el audio, imágenes, vídeo, etc. (interactividad)

El auge de Internet ha facilitado el contacto directo entre proveedores de contenidos y el consumidor, sobre todo a través de la World Wide Web (WWW). El diseño web en sí no se centra sólo en mostrar una faceta visual atractiva, si no que tiene en cuenta además que los contenidos, piedra angular de la web, se muestren de forma adecuada y jerárquica. Un diseño puede considerarse adecuado cuando es capaz de complementar información bien tratada y enlazada con una expresión visual agradable que, además, tenga a bien intentar proporcionar al usuario la mejor experiencia de navegación posible.

Una página web se define como un conjunto de información que es accesible a través de un navegador web (o agente de usuario (AU)) tras haber sido tratada y adaptada al protocolo WWW, mientras que un sitio es un conjunto de páginas web. En un principio, las páginas web mostraban solamente texto, pero con el paso del tiempo la tecnología ha mejorado, y a día de hoy la experiencia del usuario en la red es bastante mejor, con la inclusión de contenidos multimedia en la web. Además del hipertexto, verdadero rey de la web, se ha incluido la posibilidad de visualizar imágenes, vídeos, etc. aportando dosis de estilo e interactividad con el navegante nunca antes vistos.

Se estima que hay más páginas web en Internet que habitantes en el planeta, lo cual muestra la importancia que este canal de comunicación ha adquirido con el paso del tiempo. Toda empresa, particular o grupo de personas puede, fácilmente, poseer un espacio propio en la red de redes en la actualidad. Por eso, es importante marcar la diferencia, siendo el apostar por un diseño web de calidad un factor decisivo para el éxito,

1 INTRODUCCIÓN AL DISEÑO WEB

ASOCIACIÓN DISEÑO WEB Y SEGURIDAD - UNIVERSIDAD DE CÁDIZ

Page 6: Introducción Al Diseño Web

y otro, ofrecer contenidos de calidad para conseguir así un público fiel y satisfecho con lo que se pone a su disposición.

Para diseñar una página web se ha de crear, básicamente, un documento con información que va a ser enlazado con otros documentos, y a continuación aplicarles a todos un estilo visual determinado. Los diferentes pasos a seguir podrían ser éstos:

• Realizar un boceto en papel de cómo van a ser distribuidos en la página web los elementos que van a componerla, como los vínculos a otras páginas, los contenidos multimedia y el texto.

• Comenzar la creación de los documentos con la información que va a ser mostrada, dejando la parte visual para después. Para facilitar el trabajo con los enlaces entre páginas, se desarrolló el lenguaje HTML o Lenguaje de Marcación de Hipertexto (Hypertext Mark-up Language en inglés). Para la labor de crear los documentos HTML, se pueden usar tanto programas de edición WYSIWYG (What You See Is What You Get) (MS Frontpage, Macromedia Dreamweaver, etc.), programas WYSIWYM (What You See Is What You Mean) o editores de texto (Notepad, GNU Emacs, etc.). Aunque los editores WYSIWYG facilitan enormemente la tarea de realizar documentos HTML al centrarse el usuario en el aspecto visual antes que en el código, hay quien no ve demasiado bien su uso, ya que generan un código bastante “sucio” y hacen al desarrollador dependiente de su plataforma. Hay que destacar que existen varios lenguajes de marcado aparte de HTML, como XML, o la adaptación de HTML a éste último, XHTML, aunque hoy en día HTML como tal sigue estando presente en la mayoría de los proyectos web.

• Si es necesario, crear la parte visual usando programas para diseño gráfico (Adobe Ilustrator, Adobe Photoshop, The Gimp, etc.) (si se necesita) para, a continuación, implementar las hojas de estilo que indicarán al navegador del cliente cómo mostrar la información expuesta en el contenido. En este manual haremos una introducción a las hojas de estilo en cascada (CSS).

• Revisar que nuestro sitio web cumple los estándares, validándolo en el sitio del World Wide Consortium (W3C), que es el consorcio encargado de velar por el respeto hacia los estándares web. No es un paso obligatorio, pero siempre es adecuado desarrollar páginas que cumplan con las normas básicas de publicación web para hacer de la www un espacio más ordenado, con las mismas normas para todos y con elementos de una mayor calidad.

2 INTRODUCCIÓN AL DISEÑO WEB

ASOCIACIÓN DISEÑO WEB Y SEGURIDAD - UNIVERSIDAD DE CÁDIZ

Page 7: Introducción Al Diseño Web

• Por último, si estamos realizando nuestro sitio web en local, subir los archivos del proyecto a un servidor huésped (hosting), perteneciente a una empresa. Esa empresa nos alquilará un espacio en ese servidor por una cuota (o nos lo ofrece de manera gratuita con la condición de insertar publicidad), ofreciéndonos diferentes servicios (cuentas de correo electrónico, bases de datos, soporte PHP, etc.). Además, nos asignará un ancho de banda mensual límite a consumir, por lo que si lo sobrepasamos nuestro sitio quedará inaccesible temporalmente. Se puede explicar lo que es ancho de banda de manera rápido definiéndolo como la cantidad de información en bytes que podemos cargar en ese sitio (cada vez que se visita una página web, se produce la descarga de los contenidos que se van a mostrar al caché)

Es importante recalcar que siguiendo los pasos descritos anteriormente crearíamos una página web estática; no obstante, a la hora de desarrollar una página web dinámica se siguen las mismas pautas exceptuando la creación de scripts que pueden ser embebidos dentro del mismo código HTML. Estos scripts son interpretados por un servidor web, que proporciona como respuesta un documento distinto dependiendo de la petición. El documento devuelto muestra u oculta determinadas zonas de código HTML dependiendo de las condiciones impuestas en el código PHP, mostrándose así en el navegador una información u otra.

Una vez realizada la página web, podemos encontrar el problema de que ésta no es visualizada en todos los navegadores de la misma forma. Si la has desarrollado cumpliendo a la perfección con los estándares y ha sido validada por el W3C, el problema no es tuyo, sino de cómo interpreta el navegador de turno el código que le has proporcionado. De los navegadores más populares en la actualidad (2008), la mayoría cumple más o menos con los estándares y los que no lo hacen trabajan en ello. El que más problemas a la hora de respetar los estándares web ha sido el navegador Internet Explorer de Microsoft. Tras la “Guerra de Navegadores” Microsoft impuso muchas de sus extensiones propietarias sobre las existentes del W3C, causando que la mayoría de los desarrolladores tuvieran que crear sitios web para Internet Explorer de manera exclusiva, lo que fue devastador para las alternativas existentes (Netscape). Tras los diferentes problemas de seguridad que ha ido sufriendo IE estos últimos años, han surgido diferentes alternativas basadas en Netscape (Mozilla, Firefox, etc.) y el navegador Opera. Estos últimos son más respetuosos con los estándares, y, debido a que estaban ganándole terreno al navegador del gigante de Redmond, la última versión de Internet Explorer promete cumplir los estándares en mayor medida.

Un documento web debe ser creado de una forma que sea independiente del medio donde vaya ser mostrado, y no dependiente del programa que lo ha generado, si se ha

3 INTRODUCCIÓN AL DISEÑO WEB

ASOCIACIÓN DISEÑO WEB Y SEGURIDAD - UNIVERSIDAD DE CÁDIZ

Page 8: Introducción Al Diseño Web

usado un editor web. También debe mostrar el contenido separado del estilo, usándose el código HTML para organizar la información y las hojas de estilo para determinar la forma en que ésta va a ser mostrada. Al mantener una parte independiente de la otra, conseguimos acercarnos al concepto de web semántica y, entre otras cosas, aplicar diferentes modos de visualización según el medio (ordenador, teléfono móvil, impresora, etc.) o cambiar todos los colores y formas de una página web cambiando solamente la hoja de estilo.

Para que nuestra página web sea universalmente accesible, además de cumplir los estándares, debe ser accesible, lo que está estrechamente ligado con el concepto de usabilidad. Cuando conseguimos que un sitio sea accesible, favorecemos que nuestros contenidos sean disfrutados por todo clase de personas, sin importar su nivel de discapacidad mental o física.

Sin duda, aparte de la importancia que tiene que un sitio web cumpla con una serie de requisitos que lo hagan universal, lo fundamental es que la información esté organizada correctamente y que el estilo visual implementado sea, además de atractivo, cómodo para el usuario final del sitio. Más adelante se mostrarán los errores más comunes a la hora de diseñar e implementar un sitio web, y las posibles maneras de corregirlos. Todo para llegar a ser un webmaster.

Comenzamos.

4 INTRODUCCIÓN AL DISEÑO WEB

ASOCIACIÓN DISEÑO WEB Y SEGURIDAD - UNIVERSIDAD DE CÁDIZ

Page 9: Introducción Al Diseño Web

LA RED DE REDES_

Internet se erige como un poderoso competidor de los medios de comunicación tradicionales, como la televisión, el cine o el teléfono, al abrir un abanico enorme de posibilidades a los usuarios. Un navegante puede decidir en cada momento qué leer, qué ver o escuchar haciendo unos pocos clics, centrando su atención en lo que realmente le interesa y obviando aquello que no le llama la atención. Esto ofrece una increíble libertad al usuario que los medios de comunicación tradicionales no permiten. Por ejemplo, una persona puede tener unas convicciones políticas distintas a las defendidas por los medios de comunicación de masas, y por ello no verse identificado con ninguna de las opiniones vertidas. Al poder tener acceso a una red global como es Internet, esta persona puede visitar un sitio web que le provea con información acorde a su ideología, sintiéndose de esa manera informado de manera veraz. O por ejemplo, cualquier grupo de música que no cuente con el beneplácito de una multinacional discográfica, puede colgar su disco en Internet usando cualquiera de las licencias disponibles y así sea escuchado por la comunidad. El mayor poder de Internet no es sólo la posibilidad de disponer de casi cualquier contenido en cualquier momento, sino el brindar la oportunidad de que cualquier persona anónima pueda mostrarse a todo el mundo con facilidad, quedándole la sensación de que entre tantas opiniones su voz también puede ser escuchada.

Pero no todo el mundo sabe con exactitud qué es Internet. Internet, de manera sencilla, se define como un conjunto de redes de ordenadores descentralizadas que se comunican entre ellas de manera rápida y sencilla. Estas redes están compuestas por una multiplicidad de computadores que comparten información entre sí a través de diferentes protocolos TCP/IP (TCP, IP, HTTP (HyperText Transfer Protocol), etc.) comportándose en la práctica como una sola red de alcance mundial. Hay que evitar asociar únicamente a Internet con la World Wide Web, cuando ésta última sólo es un servicio más de la red de redes. Además de la ya mencionada WWW, encontramos otros servicios como:

• Transferencia de archivos (protocolo FTP)

• Correo electrónico (protocolos POP y SMTP)

• Chat online (IRC)

• Mensajería instantánea

• etc.

Todo comenzó en 1969, cuando se realizó la primera conexión entre universidades de California (EE.UU.) en lo que venía a ser una implementación práctica de estudios anteriores llevados a cabo en los años 50 del siglo XX. Esta red sería conocida como ARPANET hasta su desaparición en 1989. Surgieron diferentes redes y se desarrollaron nuevos protocolos de comunicación hasta que apareció la red NSFNET. Surgieron diferentes redes a gran escala a lo largo y ancho del mundo que interconectadas entre sí

5 INTRODUCCIÓN AL DISEÑO WEB

ASOCIACIÓN DISEÑO WEB Y SEGURIDAD - UNIVERSIDAD DE CÁDIZ

Page 10: Introducción Al Diseño Web

han dado lugar a la que hoy conocemos como la red de redes, Internet. Al principio tener conexión a esta red era algo que estaba al alcance de muy pocos, pero con el paso del tiempo, la mejora de los protocolos, el abaratamiento de los costes de mantenimiento y la aparición de proveedores de acceso privados (ISP) han hecho accesible Internet a la mayoría del público, llegando a ser el fenómeno que es hoy en día.

Sin embargo, no es hasta 1989 cuando aparece la WWW, o web, a pesar de ser uno de los servicios más conocidos. La web nace de la mente de Tim Berners-Lee y su equipo, en el CERN (Centro Europeo de Investigación Nuclear), cuando pensaban en una manera de hacer fácilmente accesible la información del CERN usando hipertexto. Así surgió el lenguaje HTML, el protocolo HTTP y el URL (surgiendo después el URI), que es una forma de localizar recursos en Internet. A continuación el grupo alumbró el primer navegador web de la historia, llamado precisamente WorldWideweb (posteriormente renombrado como Nexus), y construyó el primer servidor web de la historia usando una computadora NEXTcube.

Con el tiempo el número de servidores web aumentó, así también el número de navegadores web (Netscape, Internet Explorer, etc.) y el número de personas que usaban la web. Es en 1994 cuando nace el World Wide Web Consortium (W3C) para encargarse de aprobar estándares y defender el uso de los mismos hasta hoy día. La guerra de navegadores, el surgimiento de nuevos estándares y tecnologías, la hegemonía de Google en el campo de los motores de búsqueda y alguno que otro más (visionado de vídeo online, publicidad,etc.) y el auge de los sistemas de blogging no hacen sino demostrar que Internet, la web y el resto de sus servicios ocupan un lugar importante en nuestra sociedad.

LA WEB: FUNCIONAMIENTO_

Como bien se ha dicho, la WWW o Web se define como un sistema de documentos de hipertexto (enlazados entre sí) los cuales son accedidos desde un navegador web de un equipo conectado a la red Internet. Los pilares fundamentales de la web son el protocolo HTTP, los identificadores uniformes de recursos o URLs y el hipertexto, normalmente HTML. El HTTP proporciona, normalmente a través del puerto 80, una manera sencilla de enviar datos en Internet permitiendo que los servidores funcionen de una manera más simple y que éstos, aunque tengan poca capacidad de procesamiento, puedan atender miles de peticiones. Existe una variante del HTTP, el HTTPS, que utiliza un protocolo para hacer las conexiones servidor-cliente más seguras. Los URLs, por su parte, asocian una dirección única a un recurso existente en Internet, facilitando así que éste sea encontrado; así, el hipertexto, muestra una información enlazándola con otra relacionada mediante el uso de hipervínculos o referencias. El HTML es un lenguaje de marcas que permite

6 INTRODUCCIÓN AL DISEÑO WEB

ASOCIACIÓN DISEÑO WEB Y SEGURIDAD - UNIVERSIDAD DE CÁDIZ

Page 11: Introducción Al Diseño Web

componer y estructurar información enlazada con una simplicidad bastante grande y una eficiencia muy alta.

La navegación por la web normalmente comienza tecleando el URL de la página web que se quiere visitar en la barra de direcciones del navegador, o por medio de un enlace pulsado que apunte a ese recurso. Luego, tras varias comunicaciones, se traduce la URL en una dirección IP buscando su correspondencia en un servidor DNS, ya que se hace necesaria la dirección IP del servidor para poder empezar a hacerle peticiones HTTP, sean éstas de tipo GET (parámetros incluidos en la URL) o de tipo POST (parámetros incluidos en la petición). Tras las peticiones oportunas, se obtienen los recursos requeridos (texto HTML, gráficos, etc.) y el navegador se encarga de formar la página web siguiendo las especificaciones del código HTML, el CSS u otro, produciéndose al final del todo la página que va a ver el usuario. El contenido visualizado normalmente se almacena en el disco duro del usuario para acelerar la carga la siguiente vez que se visite esa página, reduciendo el tráfico en la red. A esto se le llama guardar una página en caché.

A la hora de recibir respuesta, el servidor puede indicarnos el estado de nuestra petición, y para ello usa uno de los siguientes valores:

• 1XX indica que la petición está siendo procesada.

• 2XX la petición ha sido procesada.

• 3XX la petición enviada debe ser repetida o redirigida.

• 4XX ha ocurrido un error porque la petición es incorrecta, no se encuentra, etc.

• 5XX ha tenido lugar un error en el servidor, por lo que la petición puede ser correcta.

Los distintos hiperenlaces que podemos encontrar en una página web pueden llevarnos, además de a otro documento relacionado, a diferentes recursos web, como pueden ser descargas, contenido multimedia, etc.

TIPOS DE PÁGINAS WEB: ESTÁTICAS Y DINÁMICAS_

Al principio de los tiempos de Internet, todas las páginas web que existían eran estáticas; es decir, toda la información que contenían podía ser consulta y/o descargada, pero no se podía interactuar con ella. Las páginas web se realizaban enteramente en código HTML y el formato se aplicaba en el mismo código o ya separado cuando aparecieron las hojas de estilo. En respuesta a esta falta de interactividad, surgieron diferentes formas de aportar dinamismo a una página web: el HTML dinámico o DHTML, el uso de CGI (Common Gateway Interface) y diferentes lenguajes de programación interpretados del lado del

7 INTRODUCCIÓN AL DISEÑO WEB

ASOCIACIÓN DISEÑO WEB Y SEGURIDAD - UNIVERSIDAD DE CÁDIZ

Page 12: Introducción Al Diseño Web

servidor (PHP, ASP, etc.). Así, el contenido de una página web podría verse modificado atendiendo a las peticiones realizadas por el cliente.

Hay que tener claro que las tecnologías mostradas anteriormente, aunque aporten dinamismo, no funciona de la misma forma ni poseen las mismas posibilidades. El DHTML no es más que HTML, hojas de estilo CSS y un lenguaje de programación interpretado del lado del cliente (normalmente, Javascript), embebido en el propio documento HTML, que ayuda a cambiar el aspecto y/o la información contenida en una página dependiendo de las acciones llevadas a cabo por el usuario. Se ejecuta en el navegador, por lo que no requiere del servidor para aportarle interactividad. Es ampliamente usado para la elaboración de menús desplegables, imágenes que cambian al poner el ratón sobre ellas, etc.

La tecnología CGI, sin embargo, depende de la información pasada entre el cliente y el servidor para mostrar diferentes contenidos, generados a partir de la petición realizada. El servidor web, atendiendo a la petición recibida, ejecuta un programa determinado y ofrece la respuesta a través de una página web. Los CGI se siguen usando ampliamente hoy en día, debido a su sencillez y versatilidad a la hora de elegir lenguaje para desarrollarlos (Python, Perl, etc.); no obstante, poseen un problema importante: su ejecución, en ocasiones, produce una carga importante para el servidor, y ni que decir tiene los problemas que esto conlleva si existen no un CGI, sino varios.

Por ello, se buscaron diferentes alternativas, siendo una de ellas el uso de lenguajes de programación interpretados del lado del servidor. Se instala un intérprete de un lenguaje de programación de este tipo en el servidor web, lo que posibilita que se incluya el código en la misma página web, para que posteriormente el servidor la interprete y la muestre, reduciendo el tiempo de respuesta y liberando al servidor de carga.

Entre los lenguajes de programación interpretados del lado del servidor, el más exitoso ha sido PHP, debido principalmente al parecido de su sintaxis a la de C y a que sea software libre. El código PHP puede ser incrustado dentro del propio código HTML, es fácil de aprender y a la vez muy potente. Es de propósito general y está orientado principalmente al desarrollo de páginas web.

8 INTRODUCCIÓN AL DISEÑO WEB

ASOCIACIÓN DISEÑO WEB Y SEGURIDAD - UNIVERSIDAD DE CÁDIZ

Page 13: Introducción Al Diseño Web

LENGUAJES DE MARCADO_

Antes de todo, es preciso definir que es un lenguaje de marcado o de marcas. Un lenguaje de marcado es una forma de codificar un documento de manera que el texto lleva además asociado una serie de marcas que informan de la forma en la que éste debe ser estructurado o presentado. No pueden considerarse como lenguajes de programación, ya que no poseen ningún tipo de función aritmética ni variable. Se llevan usando desde hace mucho tiempo, pero hoy día han tomado de nuevo especial relevancia debido al auge experimentado por el lenguaje de marcas más extendido de todos: el HTML.

Los lenguajes de marcado presentan una serie de características que los hacen bastante interesantes:

1. Generan documentos en texto plano, es decir, son independientes del sistema operativo y pueden ser entendidos y editados con sólo un editor de texto.

2. Las etiquetas de marcado van junto al contenido.3. Se procesan con mayor facilidad.4. Son muy flexibles, ya que son utilizados tanto con texto como con gráficos, por

ejemplo, y pueden ser combinados entre sí (XML + HTML = XHTML).

En estos lenguajes encontramos diferentes tipos de marcado, según el propósito, aunque estos pueden combinarse en un mismo documento. En este manual nos centraremos en el marcado descriptivo o semántico.

En el marcado descriptivo se usan las etiquetas para definir fragmentos de texto, sin especificar de la forma en que debe ser representados ni cuando. Gracias a la flexibilidad de estos lenguajes, los fragmentos de texto etiquetados pueden usarse para cosas distintas de las previstas cuando se crearon: por ejemplo, una etiqueta que sirva para poner énfasis en una porción de texto puede ser redefinida para que muestre ese mismo texto en cursiva, sin cambiar la etiqueta, cambiando lo que hace la misma mediante hojas de estilo.

Los lenguajes de marcado se generalizaron tras la creación por parte de IBM del GML (Generalized Mark-up Language). Más tarde, tras la inclusión de diferentes ideas de diversas fuentes, se publicó el Standard Generalized Mark-up Language o SGML por parte de la Organización Internacional de Estándares. El SGML es un metalenguaje, es decir, permite que se definan nuevos lenguajes a partir de él. Además, define cómo deben escribirse las etiquetas a utilizar y controla las etiquetas que pueden escribirse y dónde

9 INTRODUCCIÓN AL DISEÑO WEB

ASOCIACIÓN DISEÑO WEB Y SEGURIDAD - UNIVERSIDAD DE CÁDIZ

Page 14: Introducción Al Diseño Web

mediante el DTD (Document Type Definition). El SGML fue clave para el desarrollo de lenguajes posteriores, debido a su potencia y flexibilidad.

El SGML, aunque se sigue usando hoy en día, ha perdido popularidad en favor de otros lenguajes derivados de él. Bajo el auspicio del W3C, se desarrollaron dos lenguajes basados en SGML orientados a la publicación en web uno (HTML) y al tratamiento de documentos a gran escala (XML), aunque este último desempeña un papel muy importante a la hora de intercambiar datos en la web. En este manual nos centraremos en el HTML, abordando su uso, características y definiendo su sintaxis.

HTML_

El lenguaje HTML es un lenguaje de marcas que genera un tipo especial de documentos de texto (hipertexto) que son usados por los navegadores web para presentar texto, imágenes y otro tipo de contenido. No es el único lenguaje para crear documentos hipertexto, pero si es el más ampliamente usado todavía. Los documentos generados poseen la extensión .htm o .html.

Los documentos HTML son generados en texto plano, mientras que toda la estructura y el formato propio del documento se establece mediante el uso de diferentes etiquetas en determinadas zonas del texto. Estas etiquetas pueden ser de diferentes tipos: de marcado estructural y de marcado presentacional. El primero define la forma en la que va a ser posicionado el texto y su función dentro del documento; en cambio, el marcado presentacional describe el formato que va a poseer el texto, sin tener en cuenta su papel dentro del documento. Como etiquetas de marcado estructural, encontramos las etiquetas de encabezado y la de párrafo, y como ejemplo de etiquetas presentacionales tenemos las que muestran el texto en negrita, en itálica o cursiva o las que muestran el texto preformateado. Muchas de las etiquetas de marcado presentacional han caído en desuso en favor de las hojas de estilo.

Las etiquetas en HTML, al contrario de lo que pasa en otros lenguajes de marcado, están definidas de antemano por el DTD que lleven asociado. Toda etiqueta de inicio de marcado se compone de un carácter <, a continuación el nombre de la etiqueta, los atributos que lleve asociados (si los lleva), y finaliza con el carácter >, tal que así:

<nombre atributo =“valor” ...>

10 INTRODUCCIÓN AL DISEÑO WEB

ASOCIACIÓN DISEÑO WEB Y SEGURIDAD - UNIVERSIDAD DE CÁDIZ

Page 15: Introducción Al Diseño Web

La etiqueta de final de marcado se forma con un carácter <, la barra /, el nombre de la etiqueta y el carácter > para finalizar:

</nombre>

Las etiquetas pueden ir en mayúscula o en minúscula, pero es recomendable acostumbrarse a escribir el nombre de las etiquetas en minúscula para que tengamos menos dificultades a la hora de aprender XHTML. Además, algunas etiquetas pueden anidarse dentro de otras.

Como ejemplo, se muestra el uso de la etiqueta <font> que, aunque se desaconseja su utilización en favor de estilos CSS, sirve a la perfección para ilustrar este ejemplo. Tenemos un texto determinado:

Lorem ipsum dolor sit amet, consectetur adipisici elit, sed eiusmod tempor incidunt ut labore et dolore magna aliqua.

Si queremos, por ejemplo, que la frase se mostrara con un tipo de letra ʻArialʼ y un tamaño de 14px, tendríamos que escribir los siguiente en código HTML:

<font family=”Arial” size=”14px”>Lorem ipsum dolor sit amet, consectetur adipisici elit, sed eiusmod tempor incidunt ut labore et dolore magna aliqua.</font>

Una vez aplicado el marcado sobre la porción de texto, en el navegador veríamos la frase así:

Lorem ipsum dolor sit amet, consectetur adipisici elit, sed eiusmod tempor incidunt ut labore et dolore magna aliqua.

En HTML se permite cierta flexibilidad a la hora de definir los atributos y escribir las etiquetas de cierre. Los valores de los atributos en HTML pueden ir entrecomillados o no, y en cuanto a las etiquetas de cierre, HTML permite que no se cierren etiquetas que no necesitan envolver ningún texto entre ellas, como la etiqueta de <img>, que se usa para insertar imágenes. No obstante, se recomienda que se entrecomillen los atributos y se cierren todas las etiquetas para encontrar menos problemas al hacer el cambio a XHTML.

A pesar de lo expuesto antes, también existen etiquetas que no poseen cierre, como la etiqueta de salto de línea (<br>), la que muestra una barra separadora horizontal (<hr>) o la utilizada para poner una imagen (<img>).

11 INTRODUCCIÓN AL DISEÑO WEB

ASOCIACIÓN DISEÑO WEB Y SEGURIDAD - UNIVERSIDAD DE CÁDIZ

Page 16: Introducción Al Diseño Web

Comenzamos a definir la estructura típica de un documento HTML y la sintaxis del lenguaje.

DTD

Lo primero de todo, es elegir el DTD (Definición de Tipo de Documento) adecuado. El DTD es una definición de la estructura y los elementos que debe llevar un documento, que permite que éstos puedan ser validados y que todos los documentos que lleven asociados ese DTD usen un formato común. Presenta algunas desventajas que han impulsado la creación de XML Schema, pero a pesar de todo es ampliamente usado y aceptado.

Existen diferentes tipos de DTD. Están orientados a diferentes lenguajes (XML, HTML, etc.), a diferentes tipos de arquitectura de la información (DTD para frames), y se distribuyen según el nivel de “relajación” que desee el desarrollador a la hora de hacer una página.

Para HTML 4 (la versión actual) se definen los siguientes DTDs:

• DTD estricto (strict)

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">

• DTD transicional (transitional)

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/loose.dtd">

• DTD con uso de frames (frameset)

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/frameset.dtd">

La diferencia entre el DTD estricto y el transicional es que el primero es más escrupuloso a la hora de aceptar determinados atributos que no se encuentren completamente definidos en HTML 4, mientras el segundo da una mayor flexibilidad. El DTD con uso de frames está definido para eso mismo, para usar un conjunto de frames en una página web. Se explicarán en detalle los frames más adelante.

12 INTRODUCCIÓN AL DISEÑO WEB

ASOCIACIÓN DISEÑO WEB Y SEGURIDAD - UNIVERSIDAD DE CÁDIZ

Page 17: Introducción Al Diseño Web

Estructura de un documento

Una vez definido el DTD, es importante destacar que todo el documento HTML tiene que ir contenido entre las etiquetas <html> y </html>. Dentro de estas etiquetas, el documento se encuentra dividido en dos partes: una cabecera y un cuerpo.

• Cabecera: comprendida entre las etiquetas <head> y </head>. Contiene

etiquetas meta (determinan el tipo de contenido y son útiles para buscadores, puesto que contienen las características del documento, como las palabras clave

(keywords)), el título de la página web (contenido entre las etiquetas <title> y

</title>), una dirección base y, en ocasiones, scripts y definición de estilos

(mediante las etiquetas <script>, <style> o <link> si deseamos ligar un

documento externo). Lo que se sitúe aquí no será visualizado en la pantalla principal del navegador.

• Cuerpo: situado entre las etiquetas <body> y </body>, acota el contenido de la

página web. En él encontramos el resto de las etiquetas estructurales y presentacionales. Se puede escribir texto dentro del cuerpo sin necesidad de ninguna etiqueta, mostrándose correctamente en el navegador, pero no es aconsejable ya que no cumple con los estándares.

Por tanto, la estructura básica de un documento en HTML sería como sigue, suponiendo un DTD estricto y omitiendo las etiquetas meta por simplicidad:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"><html><head><title>Título del documento HTML</title>

</head><body>Texto de prueba</body></html>

13 INTRODUCCIÓN AL DISEÑO WEB

ASOCIACIÓN DISEÑO WEB Y SEGURIDAD - UNIVERSIDAD DE CÁDIZ

Page 18: Introducción Al Diseño Web

Este documento no mostraría nada en la pantalla principal del navegador, porque el cuerpo no contiene ningún tipo de contenido. Para un documento con frames la estructura variaría un poco: lo veremos con detalle en el apartado dedicado a ellos.

Etiquetas meta (metatags)

Situadas en la cabecera del documento, definen tanto las características del documento como las palabras claves para los motores de búsqueda. Cuando llevan asociado el atributo http-equiv pueden describir el tipo de contenido del documento (en el caso que nos ocupa, text/html) y la codificación con el parámetro charset (utf-8, ascii, etc.), el lenguaje de scripts usado (text/javascript), el lenguaje de estilos (text/css) y otras cosas más que en ocasiones se desaconsejan por problemas de compatibilidad en ciertos navegadores.

Cuando elijamos la codificación del documento, nos decantaremos por utf-8, ya que, entre otras ventajas, es el valor predeterminado para XML y además puede codificar cualquier carácter usando un número de bits variable.

Por ejemplo, si queremos usar lenguaje HTML y CSS en nuestra página, tendríamos que escribir dos etiquetas meta de este modo:

<meta http-equiv=”Content-Type” content=”text/html; charset=utf-8”><meta http-equiv=”Content-Style-Type” content=”text/css”>

Comentarios

Sirven para facilitar la lectura del código, pudiendo ser situados donde se precie sin que lo contenido en ellos se muestre en el navegador. Se sitúan entre las etiquetas <!-- y -->:

<!-- Esto es un comentario -->

Tipos de elementos HTML

En HTML existen dos tipos de elementos fundamentales: los elementos de bloque (block) y los elementos de línea o de texto (inline). También existen elementos que ni son de bloque ni de línea, porque está subordinados a otros, y otros que son tanto de línea o de bloque según convenga, como el elemento <del>.

En este manual nos centraremos en definir los elementos más comunes, centrándonos en sus sintaxis y su funcionalidad. Algunos de ellos, aunque sean mostrados, no se

14 INTRODUCCIÓN AL DISEÑO WEB

ASOCIACIÓN DISEÑO WEB Y SEGURIDAD - UNIVERSIDAD DE CÁDIZ

Page 19: Introducción Al Diseño Web

recomiendan, ya que su función es dar estilo a partes de texto que fácilmente podrían ser formateadas usando CSS, al igual que pasa con los atributos que pueden llevar asociados dichos elementos. En el apartado de Introducción al CSS veremos como aplicar los estilos al contenido afectado por una etiqueta.

Elementos de bloque

Los elementos de bloque pueden contener elementos de bloque y de línea a su vez. Producen un salto de párrafo y además, en el caso del elemento <div>, un salto de línea añadido. Pasamos a describir los diversos elementos de bloque existentes, obviando como hemos dicho con anterioridad aquellos que han sido desaprobados:

• Encabezado (etiqueta <hx>)

Usado para marcar encabezados en un texto, el navegador asigna diferentes tamaños según el valor que tome x, pudiendo variar éste entre 1 y 6 (valores discretos), siendo 1 el mayor tamaño y 6 el menor. Además, este elemento puede presentar el atributo de alineamiento align, para alinear el contenido respecto a la ventana, con los posibles valores left, center o right.

Ejemplo de uso:

<h1>El Señor de los Anillos</h1>

<h2>La Comunidad del Anillo</h2>

• Párrafo (etiqueta <p>)

Debido a que todo el texto escrito en HTML se considera continuo, necesitamos alguna forma de separar el contenido en párrafos. En HTML la etiqueta de final de párrafo, </p>, puede ser omitida, tomando como nuevo párrafo la aparición de una nueva etiqueta <p>, aunque se recomienda cerrar todas las etiquetas.

Ejemplo de uso:

<p>¡Nadie empuja a un enano!</p><p>¡Nadie empuja a un enano! <p>¡No! ¡De la barba no! <!-- (CORRECTO, PERO DESACONSEJADO) -->

15 INTRODUCCIÓN AL DISEÑO WEB

ASOCIACIÓN DISEÑO WEB Y SEGURIDAD - UNIVERSIDAD DE CÁDIZ

Page 20: Introducción Al Diseño Web

• Bloques de contenido (etiqueta <div>)

Permiten agrupar dentro de ellos contenido, insertando entre bloques un salto de línea, asignando a todo lo que está dentro de ellos propiedades comunes (pueden ser referenciados desde las hojas de estilo usando los atributos class o id). Al igual que otros elementos de bloque, puede admitir el atributo align (con los valores posibles de left (por defecto), right y center) que alinea el contenido dentro del bloque. Sin embargo, se desestima su uso en favor de las hojas de estilo.

Ejemplo de uso:

<div>Hay muchos Anillos Mágicos en este mundo, y ninguno debería usarse a la ligera.</div><div align=”center”>¿Tesoro? Ya lo han llamado así, pero tú no.</div>

• Citas literales (etiqueta <blockquote>)

Este elemento se usa para mostrar párrafos de otro texto, citados literalmente. Llevan una identación a ambos lados y un salto de párrafo antes y después.

Ejemplo de uso:

<p>Gandalf dijo:</p><blockquote>¡No! Pero el aire no está tan viciado aquí abajo.

En caso de duda Meriadoc, ¡sigue siempre tu olfato!</blockquote>

• Texto preformateado (etiqueta <pre>)

El texto preformateado es mostrado por el navegador respetando la forma en la que ha sido introducido, teniendo en cuenta los espacios y los saltos de línea, y con un formato de escritura como el de las máquinas de escribir.

Ejemplo de uso:

<pre>Soy un pedazo de texto preformateado</pre>

16 INTRODUCCIÓN AL DISEÑO WEB

ASOCIACIÓN DISEÑO WEB Y SEGURIDAD - UNIVERSIDAD DE CÁDIZ

Page 21: Introducción Al Diseño Web

• Listas desordenadas (etiqueta <ul>), ordenadas (etiqueta <ol>) y de definiciones (etiqueta <dl>)

Ambos tipos organizan los elementos en forma de repertorio. Todos los componentes de la lista deben estar contenidos entre las etiquetas <li> y </li> (list-item). Además, es posible anidar unas listas dentro de otras.

Las listas desordenadas muestran, por defecto, delante de cada sujeto de la lista, un pequeño círculo como marcador. Esto puede ser cambiado mediante el atributo type, pudiendo elegir diferentes marcadores, como un disco (disc) o un cuadrado (square), aunque también se desaconseja su uso.

Ejemplo de uso:

<ul><li>Un elemento</li>

<li>Otro elemento</li></ul>

<ul type=”square”><li>Un elemento</li><li>Otro elemento</li></ul>

Las listas ordenadas, en cambio, lista los elementos según un orden determinado. Podemos usar diferentes marcadores mediante el atributo type (números (1), letras mayúsculas (A), numeración romana en minúscula (i), etc. pudiéndose aplicar a elementos individuales), al igual que con las listas desordenadas, y comenzar la numeración cuando queramos haciendo uso del atributo start. Estos atributos están desaconsejados en favor de las hojas de estilo.

Ejemplo de uso:

<ol><li>Primer elemento</li><li>Segundo elemento</li></ol>

<ol type=”a”> <!-- Letras minúsculas --><li>Primer elemento</li>

17 INTRODUCCIÓN AL DISEÑO WEB

ASOCIACIÓN DISEÑO WEB Y SEGURIDAD - UNIVERSIDAD DE CÁDIZ

Page 22: Introducción Al Diseño Web

<li type=”i”>Segundo elemento</li></ol>

Existe un tipo especial de lista desordenada, llamada lista de definiciones, que presenta, además de el componente de la lista en cuestión, una definición del mismo. El término a definir se acota entre las etiquetas <dt> y </dt> y la definición entre <dd> y </dd>.

Ejemplo de uso:

<dl><dt>Primer elemento</dt>

<dd>Este es el primer elemento</dd><dt>Segundo elemento</dt><dd>Este es el segundo elemento</dd></dl>

<dl><dt>Primer elemento<dd>Este es el primer elemento<dt>Segundo elemento<dd>Este es el segundo elemento</dl>

• Tablas (etiqueta <table>)

El elemento de tabla nos permite estructurar contenido en forma de tabla, en una distribución por filas y columnas. Todo aquello que vaya a estar situado en el interior de la tabla debe estar situado entre las etiquetas <table> y </table>. Para la creación de filas y columnas HTML nos provee de una serie de etiquetas subordinadas a <table>:

<tr> crea una fila

<td> crea una celda

<th> crea una celda de cabecera (posee un formateo especial)

<caption> provee a la tabla de un nombre

La etiqueta <caption> puede situarse justo después de la etiqueta <table> o al final del todo, a modo de pie de tabla. Es importante decir que toda etiqueta de celda (<td> y <th>) debe ir situada en una fila (etiqueta <tr>).<table> puede llevar una serie de atributos:

18 INTRODUCCIÓN AL DISEÑO WEB

ASOCIACIÓN DISEÑO WEB Y SEGURIDAD - UNIVERSIDAD DE CÁDIZ

Page 23: Introducción Al Diseño Web

border para indicar el tamaño de los bordes de la celda

cellspacing para definir el tamaño entre celdas

cellpadding se encarga de definir el espacio entre los bordes de una celda

y su contenido

width para especificar el ancho de la tabla en porcentaje u otra medida (puntos,

píxeles),

align determina el alineamiento de la tabla (atributo compartido además con la

etiqueta <caption>)

bgcolor para establecer un color de fondo

Como se ha indicado anteriormente, <tr> introduce una fila en una tabla. Presenta atributos para alinear el contenido (align y valign) y para poner un color de fondo a la fila (bgcolor).

Las etiquetas de celda <td> y <th> presentan, en principio, diferencias en cuanto al formato de presentación (la celdas de cabecera muestran la información en negrita y centrada) pero comparten estos atributos:

align y valign para alinear el contenido horizontal y verticalmente

bgcolor establece un color de fondo para la celda

width para asignar un ancho en porcentaje (con respecto al ancho de la tabla) o

valor absoluto

nowrap indica que el contenido de la celda no puede ocupar nada más que esa

celda

colspan determina el número de celdas que se deben unir hacia la derecha para

formar una única

rowspan determina el número de celdas que se deben unir hacia abajo para

formar una sola

Ni que decir tiene que todos los atributos relacionados con las etiquetas <table>, <tr>, <td> y <th> se obvian para especificar el estilo mediante CSS.

Ejemplo de uso:

<table>

19 INTRODUCCIÓN AL DISEÑO WEB

ASOCIACIÓN DISEÑO WEB Y SEGURIDAD - UNIVERSIDAD DE CÁDIZ

Page 24: Introducción Al Diseño Web

<caption>Prueba de tabla</caption><tr><th>Cabecera 1</th><th>Cabecera 2</th></tr><tr><td>Contenido 11</td><td>Contenido 21</td></tr><tr><td>Contenido 12</td><td>Contenido 22</td></tr>

</table>

<table border=”0”><caption align=”top”>Prueba de tabla</caption><tr><th>Cabecera 1</th><th>Cabecera 2</th></tr><tr><td>Contenido 11</td><td>Contenido 21</td></tr><tr><td>Contenido 12</td><td>Contenido 22</td></tr>

</table>

• Salto de línea (etiqueta <br>)

Produce, como bien indica su nombre, un salto de línea. Es uno de los elementos que no posee etiqueta de fin (en XHTML pasa al contrario, sólo se escribe la etiqueta del final).

Ejemplo de uso:

<p>Bilbo... El Anillo sigue en tu bolsillo...</p><br>

<p>He pensado un final para mi libro... Y vivió feliz para siempre... hasta el final de sus días.</p>

• Barra horizontal (etiqueta <hr>)

Esta etiqueta genera una barra horizontal que ocupa todo el ancho de la pantalla por defecto. Permite definir varios parámetros, como la longitud (width), el grosor de la línea (size), la alineación (align) y el sombreado (noshade).

Ejemplo de uso:

<p>Ojalá el Anillo nunca hubiera llegado a mí. Ojalá nada

hubiera ocurrido.</p><hr><p>Eso desean quienes viven estos tiempos, pero no les toca a ellos decidir. Solo tú puedes decidir qué hacer con el tiempo que se te ha dado. Hay otras fuerzas actuando en el mundo

20 INTRODUCCIÓN AL DISEÑO WEB

ASOCIACIÓN DISEÑO WEB Y SEGURIDAD - UNIVERSIDAD DE CÁDIZ

Page 25: Introducción Al Diseño Web

además del mal. Bilbo estaba destinado a encontrar el Anillo, por tanto tu también estabas destinado a tenerlo. Y eso es un pensamiento alentador. ¡Es por ahí!</p>

• Otros elementos

Se pueden encontrar varios elementos HTML más, como <address> (para direcciones de cualquier tipo), <center> (centrar contenido) y otros transicionales, como <menu> (para la elaboración de menús), pero o bien están en desuso o se ha desaconsejado su utilización en favor de las hojas de estilo.

Ejemplo de uso de <address>:

<address>[email protected]</address>

Elementos de linea

Si bien tratamos los elementos <hx> y <address> como elementos de bloque, presentan una cualidad: sólo pueden albergar texto en su interior. Ésta es precisamente una de las características de los elementos de línea junto a que no generan saltos de párrafo.

Algunos elementos de texto no están desaconsejados de manera formal por el W3C, pero sin embargo se omite su utilización para especificar el formato en hojas de estilo.

• Texto en negrita (etiqueta <b>)

Muestra el contenido de la etiqueta en negrita. En desuso.

Ejemplo de uso:

<p>Tienen un <b>Troll de las Cavernas</b>.</p>

21 INTRODUCCIÓN AL DISEÑO WEB

ASOCIACIÓN DISEÑO WEB Y SEGURIDAD - UNIVERSIDAD DE CÁDIZ

Page 26: Introducción Al Diseño Web

• Texto en cursiva (etiqueta <i>)

Muestra el contenido de la etiqueta en cursiva. En desuso.

Ejemplo de uso:

<p>Aquí yace Balin, hijo de Fundin, <i>Señor de Moria</i>. Ha muerto entonces, tal como yo temía.</p>

• Texto en monoespaciado (teletipo) (etiqueta <tt>)

Muestra el contenido de la etiqueta en teletipo. En desuso.

Ejemplo de uso:

<p><tt>La pasada noche una compañía de orcos de Mordor atacó la ciudad de Osgiliath. Seguiremos informando.</tt></p>

• Texto grande (etiqueta <big>)

Muestra el contenido de la etiqueta en tamaño grande. En desuso.

Ejemplo de uso:

<p>Esto no es una mina...<big>¡Es una tumba!</big></p>

• Texto pequeño (etiqueta <small>)

Muestra el contenido de la etiqueta en tamaño pequeño. En desuso.

Ejemplo de uso:

<p><small>Pues aquí hay un enano al que no embrujará con facilidad.</small> Tengo ojos de halcón y oído de zorro.</p>

22 INTRODUCCIÓN AL DISEÑO WEB

ASOCIACIÓN DISEÑO WEB Y SEGURIDAD - UNIVERSIDAD DE CÁDIZ

Page 27: Introducción Al Diseño Web

• Texto enfatizado (etiqueta <em>)

Muestra el texto afectado por la etiqueta con énfasis.

Ejemplo de uso:

<p>Espera Hay unas marcas... Algo que parece <em>élfico</em>, no sé leerlo.</p>

• Texto enfatizado fuerte (etiqueta <strong>)

Muestra el texto afectado por la etiqueta con énfasis más fuerte de lo normal.

Ejemplo de uso:

<p>Muy pocos pueden. Es la <strong>lengua de Mordor</strong>, que no emplearé aquí.</p>

• Cita (etiqueta <cite>)

Etiqueta pensada para indicar la fuente de donde se ha obtenido una información o el autor de la misma.

Ejemplo de uso:

<p>Muy pocos pueden. Es la <strong>lengua de Mordor</strong>, que no emplearé aquí.</p>

<p><cite>Gandalf el Gris</cite></p>

• Código fuente (etiqueta <code>), variable (etiqueta <var>) y salida de programa (etiqueta <samp>)

Muestra el texto con formato de código fuente, la segunda etiqueta muestra las variables con un formato y la última muestra la salida del programa con otro formato especial.

Ejemplo de uso:

<p><code>printf(“¡Orcos!”);<br>

23 INTRODUCCIÓN AL DISEÑO WEB

ASOCIACIÓN DISEÑO WEB Y SEGURIDAD - UNIVERSIDAD DE CÁDIZ

Page 28: Introducción Al Diseño Web

while (<var>orcos</var>){<br>printf(“¡Seguid luchando!”);<br><var>orcos</var>=luchaEncarnizada();<br>}<br>

printf(“Gracias a nosotros, la Tierra Media es un lugar más seguro”);</code></p><p><samp>¡Orcos!<br>¡Seguid luchando!<br>¡Seguid luchando!<br>

.................<br>Gracias a nosotros, la Tierra Media es un lugar más seguro</samp></p>

• Texto tecleado (etiqueta <kbd>)

Muestra el texto con formato de teclado. En desuso.

Ejemplo de uso:

<p><kbd>De acuerdo. Lo guardaremos, lo ocultaremos y no se

hable más de él. Nadie sabe que esta aquí, ¿verdad? ¿Verdad, Gandalf?</kbd></p>

• Superíndice (etiqueta <sup>) y subíndice (etiqueta <sub>)

Muestra el texto en superíndice o en subíndice.

Ejemplo de uso:

<p>Número<sub>ORCOS</sub>: 10<sup>2</sup></p>

• Elemento span (etiqueta <span>)

Agrupa elementos de texto para aplicarle unas características comunes. Tiene muchas similitudes con el elemento <div>, como el poseer también un atributo de alineado (align) que, como en el caso del elemento de bloque de contenido, está desaconsejado su uso. Es referenciado por las hojas de estilo mediante los atributos class e id.

24 INTRODUCCIÓN AL DISEÑO WEB

ASOCIACIÓN DISEÑO WEB Y SEGURIDAD - UNIVERSIDAD DE CÁDIZ

Page 29: Introducción Al Diseño Web

Ejemplo de uso:

<p>Cruzaron el río Isen en la pascua de Verano, vestidos de

<span>Jinetes Negros.</span></p>

<p>Cruzaron el río Isen en la pascua de Verano, vestidos de <span align=”right”>Jinetes Negros</span></p>

• Hiperenlaces (etiqueta <a>)

Los enlaces son unos de los pilares de la web. Proporcionan un vínculo a información relacionada con la que estamos consultando en ese momento. Un enlace no permite otro enlace anidado.

Todo enlace posee dos extremos: el ancla de origen y destino. Los navegadores tienden a diferenciar a los enlaces del resto de los componentes de una página web, mostrándolos de otro color, subrayados, cambiando el puntero al pasar sobre ellos, etc. Toda esta presentación puede ser cambiada usando hojas de estilo.

Los enlaces toman mayor importancia aún si cabe cuando empiezan a ser utilizados por los motores de búsqueda como medidores de la influencia y popularidad de un sitio web, influyendo directamente en el posicionamiento. Esto ha producido situaciones de dudosa reputación, al darse el caso de webmasters que han tratado de aumentar las referencias hacia su sitio mediante métodos como las link farms (granjas de enlaces) o el spam.

Existen cuatro tipos de enlaces distintos: Enlaces dentro de la misma página Enlaces a otras páginas de nuestro sitio (relativo) Enlaces a páginas de otro sitio (absoluto) Enlaces con otros protocolos (correo electrónico, ftp, etc.)

Para crear un enlace debemos envolver el contenido entre las etiquetas <a> y </a> y asociar alguno de los principales atributos que posee el elemento:

name (o id) proporciona un nombre al enlace que servirá para que éste sea

referenciado por otro de manera eventual dentro de la misma página

href especifica un destino dentro de la misma página (establecido por los

distintos atributos name) o un hipervínculo a un recurso (ya sea relativo o absoluto). Los recursos pueden ser, además de documentos web, archivos a

través del protocolo ftp, envío de correo electrónico, etc.

25 INTRODUCCIÓN AL DISEÑO WEB

ASOCIACIÓN DISEÑO WEB Y SEGURIDAD - UNIVERSIDAD DE CÁDIZ

Page 30: Introducción Al Diseño Web

target define un frame de destino para el recurso referenciado por el atributo

href. El valor del atributo target puede ser el nombre del frame de destino o un

frame predeterminado: _self para que se abra el recurso en el marco actual,

_blank para que se abra en una ventana nueva, _parent en el frame padre o

_top para que el recurso se muestre en la pantalla del navegador al completo.

Ejemplo de uso de vínculo interno (en la misma página):

<p><a href=”#ancla”>Pulsa aquí</a></p><!-- Aquí se emplaza texto o cualquier otro tipo de contenido -->

<p><a name=”ancla”>Destino</a></p>

Ejemplo de uso de vínculo a un recurso externo:

<p><a href=”http://www.minasdemoria.com/” target=”_blank”>Mithril a buen precio y sin riesgo alguno

</a></p>

Ejemplo de envío de correo usando mailto:

<p><a href=”mailto:[email protected]”>Departamento de atención al cliente</a></p>

• Objetos (etiqueta <object>)

Aunque parte de los contenidos multimedia poseen etiquetas propias, el elemento <object> sirve para mostrar en la página cualquier tipo de documento de audio, vídeo, applets, etc.)

Posee, además, una serie de atributos: data indica el objeto que se va a insertar

classid si se necesita código de programa (Java, ActiveX, etc.)

param para establecer parámetros de inicio

type define el tipo de objeto que se va a insertar

26 INTRODUCCIÓN AL DISEÑO WEB

ASOCIACIÓN DISEÑO WEB Y SEGURIDAD - UNIVERSIDAD DE CÁDIZ

Page 31: Introducción Al Diseño Web

archive contiene una URL con información importante sobre el objeto

codebase establece una ruta absoluta de base para los URL relativos de data,

classid y archive

standby muestra un texto mientras el objeto se carga

Existen varios atributos más para definir el tamaño y el modo de visualización del objeto, pero se rechaza su uso para implementar el aspecto visual mediante CSS.

Ejemplo de uso:

<object codetype="application/java-archive" classid="java:prog.start" codebase=”http://www.minasdemoria.com/java/” standby=”Cargando...”>Java no es soportado</object>

• Imágenes (etiqueta <img>)

Para insertar imágenes se usa el elemento <img> y, aunque también podría usarse el elemento <object>, se prefiere este último por ser más específico. Recordar que el elemento imagen no requiere de una etiqueta de cierre.

Los formatos de imagen usados para la representación web son el gif, el jpg y el png. El uso de gráficos es un aspecto muy importante en el diseño web para realizar documentos vistosos, haciendo de la navegación una tarea más agradable.

El formato jpg se usa principalmente para las fotografías, mientras gif y png se usan para gráficos, ya que poseen la capacidad de mostrar transparencias (no soportado por algunos navegadores). El formato gif se ha venido usando durante todo este tiempo por su capacidad para comprimir los gráficos (reduciendo el peso de las imágenes, algo fundamental para la rápida carga de una página web), aunque últimamente se está implantando con fuerza el formato png, ya que presenta la misma capacidad de compresión que el gif (en ocasiones) conservando una mayor calidad de imagen.

A pesar de que las conexiones a Internet aumentan bastante cada día que pasa, es importante optimizar los ficheros de imagen antes de publicarlos en una página web para hacer la carga de ésta más rápida. Las fotografías y los gráficos tienen distinto tratamiento a la hora de ser optimizados, ya que, si para reducir el peso de un gráfico (en formato gif o png) basta con decrementar el número de colores del mismo, para una fotografía no es válido, ya que la pérdida de calidad sería evidente. Para ello, se debe reducir la

27 INTRODUCCIÓN AL DISEÑO WEB

ASOCIACIÓN DISEÑO WEB Y SEGURIDAD - UNIVERSIDAD DE CÁDIZ

Page 32: Introducción Al Diseño Web

calidad de la fotografía utilizando programas específicos para ello o algún programa de edición de gráficos que soporte el trabajo con el formato jpg.

Otros pasos a seguir son trabajar siempre con la imagen original (para que la pérdida de calidad sea menor), ajustar el tamaño de la imagen a unos valores adecuados para una visualización correcta (a menor altura y anchura, menor peso), crear miniaturas o thumbnails de las imágenes (ofrecen una previsualización de la imagen sin necesidad de cargarla por completo), recortar las partes que nos interesan de nuestra imagen, etc.

Para el caso de los gráficos, podemos querer usarlos como fondo de algún elemento de nuestra página (imagen de fondo, enlaces, etc.) o simplemente mostrarlos formando parte de la estructura. Un truco importante para cumplir esta labor y que nuestra carga de página no se resienta es que, al usar un gráfico, por ejemplo, como fondo de pantalla, si éste es de color o textura uniforme, podemos recortar una pequeña porción de él y mediante reglas CSS repetirlo tantas veces como sea necesario hasta rellenar completamente el fondo. Así, sólo cargamos una pequeña porción (que puede pesar menos de un KB) evitando consumir un ancho de banda mayor y haciendo la navegación más rápida.

Volviendo al etiquetado del elemento <img>, es de importancia mostrar los diferentes atributos que puede llevar asociado:

src indica la dirección (absoluta o relativa) donde se encuentra la imagen

alt muestra un texto alternativo por si no se carga la imagen o si se usa un

navegador de sólo texto

usemap proporciona la capacidad de usar la imagen como mapa interactivo, con

diferentes zonas conteniendo enlaces o información distinta Además de los mencionados, existen varios atributos para definir el ancho y el alto de la imagen (si no se especifica el navegador muestra el tamaño original de la imagen) y relativos al borde que lleva la imagen. De nuevo, se desaconseja su uso.

No solamente los textos son susceptibles a ser convertidos en enlaces; las imágenes también pueden. Si se desea que una imagen enlace a algún otro lugar es preciso que se incluya la etiqueta de imagen dentro de una etiqueta de enlace (<a> y </a>).

Ejemplo de uso:

<p><img src=”frodo_has_failed.gif” alt=”El verdadero dueño del anillo”></p>

28 INTRODUCCIÓN AL DISEÑO WEB

ASOCIACIÓN DISEÑO WEB Y SEGURIDAD - UNIVERSIDAD DE CÁDIZ

Page 33: Introducción Al Diseño Web

<p><a href=”http://www.minasdemoria.com”><img src=”frodo_has_failed.gif” alt=”El verdadero dueño del anillo”></a></p>

• Elementos desaconsejados (varias etiquetas)

Entre los elementos desaconsejados por el W3C y aquellos, que por una cuestión u otra, han caído en desuso, encontramos el elemento de subrayado <u> (no recomendado por producir confusión con los hiperenlaces), el elemento <strike>, que tacha el texto (texto tachado), la etiqueta de texto parpadeante <blink> (algunos navegadores ni la interpretan), <font> y <basefont> (para dar formato al texto) y otras como <applet>.

Otros elementos del HTML

En este apartado se sitúan dos elementos de HTML que no pueden ser catalogados de la misma forma que los anteriores: los formularios y los frames (marcos). Éstos pueden contener en su interior datos de cualquier naturaleza y condición: pueden tener insertado texto, imágenes, objetos, etc. pudiendo ser tanto elementos de bloque como de línea.

• Frames (etiqueta <frameset>)

Los frames o marcos son divisiones rectangulares que se llevan a cabo en la ventana del navegador con el fin de mostrar en cada una de las zonas un contenido diferente. Hace un tiempo se usaba con inusitada frecuencia; se acostumbraba (aunque hoy todavía se siguen usando) a dividir la ventana en varias partes: una, arriba del todo, para mostrar un título, otra (u otras) a los lados de la ventana para mostrar un menú de navegación, una en medio para albergar el contenido principal y otra abajo del todo para poner los créditos y otra información de interés.

A la larga, aunque la intención que podía tener el uso de frames era positiva (cargar sólo el área de la pagina que se necesitara) el sistema posee una serie de problemas. Cuando navegas por una página con frames, al cargarse el contenido de zonas concretas, puedes encontrar problemas a la hora de usar los botones de delante y atrás. Otro problema surge a la hora de guardar la página en favoritos, ya que no se podría determinar con exactitud cuál de los documentos que componen una página con frames deseas guardar. El último de los principales inconvenientes es quizás el más determinante: si tu navegador no soporta los frames, no podrás navegar por la página.

29 INTRODUCCIÓN AL DISEÑO WEB

ASOCIACIÓN DISEÑO WEB Y SEGURIDAD - UNIVERSIDAD DE CÁDIZ

Page 34: Introducción Al Diseño Web

Las particularidades de los documentos construidos con frames comienzan a quedar patentes justo en el momento de describir el documento. Los documentos HTML con un conjunto de frames (frameset) no llevan etiqueta <body>, ya que realmente no necesitan un cuerpo para contener nada; en su lugar, llevan la etiqueta <frameset>.

Un documento con un conjunto de marcos no posee contenido: sólo sirve como un modo de agrupar a los documentos que se van a mostrar en los diferentes marcos. Atendiendo al elemento <frameset>, podemos encontrar varios atributos asociados a él:

rows determina el número de filas que va a haber en el documento y su tamaño

(ancho y alto) en porcentaje (%), píxeles (px) o en proporción a otro valor (*)

cols divide el documento en zonas verticales pudiéndose, al igual que en el caso

de las filas, definir el número de divisiones y el tamaño de cada una

onload y onunload son compartidos con el elemento <body>. Se ejecuta un

script cuando se carga el documento y cuando se cierra

Ejemplo de uso:

<frameset rows=”100,20%,*”><!-- Contenido de la primera fila, PRIMER FRAME--> <frameset cols=”*,3*”> <!-- Contenido de la segunda fila, primera columna, SEGUNDO FRAME -->

<!-- Contenido de la segunda fila, segunda columna, TERCER FRAME --> </frameset><!-- Contenido de la tercera fila, CUARTO FRAME --></frameset>

La primera zona horizontal sería de 100px, la segunda de 120px (20% del alto total de la ventana, en este caso 600px) y la última con el espacio sobrante. Dentro de la segunda zona horizontal situamos dos nuevas zonas verticales, que tendrán los siguientes tamaños: la primera (asociada al segundo frame) tiene un tamaño de un cuarto del ancho (* es 1*), que con un ancho de pantalla de 800px, le corresponderían 200px; mientras, a la segunda zona vertical (tercer frame) le corresponderían 3 cuartas partes del tamaño, o lo que es lo mismo, 600px.Para aquellos navegadores que no soportan frames, existe el atributo <noframes> con un contenido alternativo a mostrar como si hiciera las veces de <body>.

30 INTRODUCCIÓN AL DISEÑO WEB

ASOCIACIÓN DISEÑO WEB Y SEGURIDAD - UNIVERSIDAD DE CÁDIZ

Page 35: Introducción Al Diseño Web

Como subordinado a <frameset>, encontramos el elemento <frames>, que define lo que va a ir contenido dentro de un marco mediante el atributo src, que indica la dirección del documento a mostrar (relativa o absoluta). El elemento <frame> también puede llevar los siguientes atributos, además del ya mencionado:

name otorga un identificador al frame para poder referenciarlo y asociarlo

como destino

noresize impide que se cambie el tamaño de un frame

scrolling agrega barras de scroll al frame (yes, no o auto)

frameborder indica si el frame llevará un borde para separarlo de los otros (1,0)

marginwidth y marginheight asignan valores de margen entre el frame y el

contenido

Una vez explicado el elemento <frameset>, el <noframes> y el elemento <frame>

podemos pasar a ver un ejemplo práctico.

Ejemplo de uso:

<frameset rows=”100,20%,*”>

<frame name=”primero” src=”primero.html” noresize scrolling=”no”> <frameset cols=”*,3*”> <frame name=”segundo” src=”segundo.html” noresize scrolling=”yes”>

<frame name=”tercero” src=”tercero.html” noresize scrolling=”yes”> </frameset><frame name=”cuarto” src=”cuarto.html” noresize></frameset>

En el cuarto frame se ha omitido el atributo scrolling, por lo que se le asignará el valor auto, por defecto.

Se deja a iniciativa del lector el ver como se mostraría en un navegador.

31 INTRODUCCIÓN AL DISEÑO WEB

ASOCIACIÓN DISEÑO WEB Y SEGURIDAD - UNIVERSIDAD DE CÁDIZ

Page 36: Introducción Al Diseño Web

• Formularios (etiqueta <form>)

Los formularios son elementos de HTML que permiten la recogida de información del cliente, sin procesarla, a través de diferentes componentes que interactúan con el usuario (cajas de texto, botones de selección, etc.). El formulario se limita únicamente a solicitar la información mientras que es otro programa quien se encarga de tratarla, ya sea para enviarla como un e-mail o para insertarla en una base de datos, entre otras opciones.

El elemento <form>, que engloba en su interior a todos los componentes del formulario, posee varios atributos:

action nos permite escribir una URL donde se enviaran los datos (programa CGI

o script PHP) o bien una dirección de correo electrónico (tratada usando mailto)

method especifica el método de envío de los datos del formulario. Puede ser GET

(valores incluidos en la URL) o POST (valores incluidos en el cuerpo de la petición HTTP)

enctype es usado para especificar la codificación de los datos enviados. Para

enviar por correo elegir codificación text/plain

name asigna un identificador al formulario

Para que podamos proporcionarle la información al formulario, éste debe proveernos con una serie de mecanismos que recojan nuestros datos. Así, existen diversos elementos de entrada que permiten escribir texto, hacer elecciones e incluso enviar ficheros.

Uno de ellos es el elemento <input>. Proporciona la entrada necesaria para los datos, distinguiéndose diferentes tipos de <input> según el valor del atributo type:

<input type=”text”> permite la entrada de una línea de texto

<input type=”password”> permite la entrada de texto enmascarado bajo

caracteres ʻ * ʻ (a modo de contraseña)

<input type=”hidden”> es un campo no visible para el usuario

<input type=”checkbox”> da la opción de escoger opciones de manera

múltiple

<input type=”radio”> permite escoger una opción entre varias del mismo

nombre

<input type=”reset”> borra todo lo escrito en el formulario

<input type=”submit”> ejecuta la acción definida en el atributo action

32 INTRODUCCIÓN AL DISEÑO WEB

ASOCIACIÓN DISEÑO WEB Y SEGURIDAD - UNIVERSIDAD DE CÁDIZ

Page 37: Introducción Al Diseño Web

<input type=”button”> es un botón genérico al que se le puede asociar una

acción determinada dependiendo del evento (al hacer click, al soltar, etc.)

<input type=”file”> permite el envío de un fichero desde nuestro

ordenador

<input type=”image”> funciona igual que submit con la diferencia de que

muestra un gráfico situado en la dirección referida en el atributo src. Se puede

indicar un texto alternativo con el atributo alt al igual que con el elemento <img>

Además del atributo type, <input> acepta los siguientes atributos: name asigna un nombre al campo, importante a la hora de procesar el formulario

value proporciona un valor por defecto

size define un tamaño para los campos de texto y contraseña (password)

maxlength determina el número máximo de caracteres a introducir en los

campos de texto y contraseña

checked para marcar una opción por defecto en los campos radio y

checkbox

Otro de los elementos de entrada es <select>. Éste proporciona una lista despegable con varias opciones para marcar. Presenta, a su vez, varios atributos: size define el tamaño del elemento <select>, mostrándose como una lista

desplegable o como una lista de selección.

multiple permite elegir varias opciones si está indicado

Dentro de <select>, la etiqueta <option> se encarga de establecer las diferentes opciones. Puede llevar los siguientes atributos:

selected indica si la opción está seleccionada por defecto

value determina el valor que tomará el campo si es seleccionado (si no se

especifica, el valor tomado por el campo será el contenido del elemento option)

33 INTRODUCCIÓN AL DISEÑO WEB

ASOCIACIÓN DISEÑO WEB Y SEGURIDAD - UNIVERSIDAD DE CÁDIZ

Page 38: Introducción Al Diseño Web

label identifica la etiqueta con un texto más corto que se mostrará en lugar de

éste

También dependiente de <select>, el elemento <optgroup> puede englobar a diferentes opciones dentro de un grupo determinado aplicándole a todos los componentes de ese grupo el mismo valor textual en el atributo label.

Ejemplo de uso de <select>:

<p>Elige una de las razas de la Tierra Media</p><select name=”razas”> <option selected>Elfos</option> <option>Hombres</option> <option>Hobbits</option>

<option>Orcos</option> <option label=”...”>Valar, Maiar, otras criaturas</option></select>

En la última de las opciones se mostrarán los puntos suspensivos en vez de el texto contenido en <option> debido al uso del atributo label.

El último de los elementos de gran importancia en los formularios es el elemento <textarea>. Ofrece una entrada de texto multilínea, pudiendo especificarse su nombre (atributo name), el número de filas (atributo rows) y columnas (atributo cols) que tendrá el área. El texto que vaya contenido entre las etiquetas <textarea> y </textarea> se interpretará como el contenido por defecto del área de texto.

Ejemplo de uso:

<textarea name=”area” rows=”5” cols=”20”>

Texto por defecto del textarea</textarea>

Para terminar, existen otros elementos de formulario como <label> (etiqueta aquellos controles que no tienen un identificador asociado), <fieldset> (agrupa a un conjunto de controles) y <legend> (este último asociado a <fieldset>, proporcionando un nombre a los elementos agrupados).

34 INTRODUCCIÓN AL DISEÑO WEB

ASOCIACIÓN DISEÑO WEB Y SEGURIDAD - UNIVERSIDAD DE CÁDIZ

Page 39: Introducción Al Diseño Web

A continuación, un ejemplo de uso de formularios:

<form name=”tierramedia”

action=”mailto:[email protected]” method=”post”> <p>Nombre: <input type=”text” name=”nombre” size=”20”> </p> <p>Apellidos: <input type=”text” name=”apellidos” size=”20”></p>

<p>Correo electrónico: <input type=”text” name=”email” size=”20”></p> <p>Sexo: <input type=”radio” name=”sexo” value=”hombre”><input type=”radio” name=”sexo” value=”mujer”></p>

<p>La Tierra Media puede ser un lugar peligroso, ¿quieres entrar en ella para...? <input type=”checkbox” name=”objetivos” value=”ocio”>Disfrutar de su belleza <input type=”checkbox” name=”objetivos”

value=”trabajar”>Trabajar sus campos <input type=”checkbox” name=”objetivos” value=”guerrear” checked>Cargarme a Sauron</p> <p>¿A qué raza perteneces? <select name=”razas”> <option selected>Elfos</option>

<option>Hombres</option> <option>Hobbits</option> <option>Orcos</option> <option label=”...”>Valar, Maiar, otras criaturas </option>

</select></p> <p>Algo sobre ti: <br><textarea name=”areatexto” rows=”5” cols=”20”>Observaciones</textarea></p> <p><input type=”submit” value=”Enviar”><input type=”reset” value=”Borrar”></p>

</form>

Se deja al lector su visualización en el navegador.

35 INTRODUCCIÓN AL DISEÑO WEB

ASOCIACIÓN DISEÑO WEB Y SEGURIDAD - UNIVERSIDAD DE CÁDIZ

Page 40: Introducción Al Diseño Web

Caracteres especiales

En principio, eligiendo un juego de caracteres de tipo occidental no tendremos problemas a la hora de que nuestro sitio web sea visualizado desde computadores de otros países de nuestro entorno. El problema sale a la luz cuando pretendemos escribir una serie de caracteres que no están contemplados en la codificación de otras zonas del mundo, como la letra ñ o las tildes. Para que nuestros documentos HTML sean perfectamente visualizados en cualquier ordenador del mundo, debemos elegir una codificación amplia, descendiente de Unicode (por ejemplo, utf-8, ya que entre otras ventajas almacena los caracteres de manera variable). Por ello, existe un conjunto de caracteres, denominados caracteres especiales o entidades de carácter, los cuales tendremos que escribir en sustitución del carácter que deseemos. Por ejemplo, si deseamos escribir la palabra niño, tendríamos que escribir ni&ntilde;o y así nos aseguraríamos su correcta visualización en un navegador en cualquier parte del globo.

Se muestra una tabla con todos los caracteres especiales:

Carácter Entidad asociada Carácter Entidad asociada

< &lt; > &gt;

& &amp; " &quot;

Á &Aacute; À &Agrave;

É &Eacute; È &Egrave;

Í &Iacute; Ì &Igrave;

Ó &Oacute; Ò &Ograve;

Ú &Uacute; Ù &Ugrave;

á &aacute; à &agrave;

é &eacute; è &egrave;

í &iacute; ì &igrave;

ó &oacute; ò &ograve;

ú &uacute; ù &ugrave;

Ä &Auml; Â &Acirc;

Ë &Euml; Ê &Ecirc;

Ï &Iuml; Î &Icirc;

Ö &Ouml; Ô &Ocirc;

Ü &Uuml; Û &Ucirc;

ä &auml; â &acirc;

36 INTRODUCCIÓN AL DISEÑO WEB

ASOCIACIÓN DISEÑO WEB Y SEGURIDAD - UNIVERSIDAD DE CÁDIZ

Page 41: Introducción Al Diseño Web

Carácter Entidad asociada Carácter Entidad asociada

ë &euml; ê &ecirc;

ï &iuml; î &icirc;

ö &ouml; ô &ocirc;

ü &uuml; û &ucirc;

à &Atilde; å &aring;

Ñ &Ntilde; Å &Aring;

Õ &Otilde; Ç &Ccedil;

ã &atilde; ç &ccedil;

ñ &ntilde; Ý &Yacute;

õ &otilde; ý &yacute;

Ø &Oslash; ÿ &yuml;

ø &oslash; Þ &THORN;

Ð &ETH; þ &thorn;

ð &eth; Æ &AElig;

ß &szlig; æ &aelig;

¼ &frac14; &nbsp;

½ &frac12; ¡ &iexcl;

¾ &frac34; £ &pound;

© &copy; ¥ &yen;

® &reg; § &sect;

ª &ordf; ¤ &curren;

² &sup2; ¦ &brvbar;

³ &sup3; « &laquo;

¹ &sup1; ¬ &not;

¯ &macr; ­ &shy;

µ &micro; º &ordm;

¶ &para; ´ &acute;

· &middot; ¨ &uml;

° &deg; ± &plusmn;

¸ &cedil; » &raquo;

37 INTRODUCCIÓN AL DISEÑO WEB

ASOCIACIÓN DISEÑO WEB Y SEGURIDAD - UNIVERSIDAD DE CÁDIZ

Page 42: Introducción Al Diseño Web

Carácter Entidad asociada Carácter Entidad asociada

× &times; ¢ &cent;

÷ &divide; € &euro;

“ &#147; ™ &#153;

” &#148; ‰ &#137;

Œ &#140; ƒ &#131;

‡ &#135; † &#134;

¿ &iquest;

El futuro: HTML 5

Al plantearse nuevas necesidades y quedar patentes las carencias que posee el HTML actual, se ha impulsado una revisión del estándar de publicación web. Así, tras muchos cambios y deliberaciones, ha surgido HTML 5, aunque por ahora no se ha liberado. Éste trae, además de una gran compatibilidad con versiones anteriores, nuevas etiquetas y atributos. Otros cambios están referidos al uso del DTD (obligatorio en HTML, pero no en XML), reglas más estrictas a la hora de usar los tipos de elementos, etiquetas como <video>, <audio> o <footer> (esta última para contenido a pie de página), nuevos atributos como replace para sustituir contenido de un formulario si hay un error o el resurgimiento de las etiquetas <address>, <b> o <menu>, dándoles nuevos usos o impulsando de nuevo su utilización tras ser desaconsejados. Quizás uno de los pasos más significativos de esta revisión ha sido la eliminación de los frames.

En la actualidad (mayo 2008) aún está pendiente de ser liberado.

38 INTRODUCCIÓN AL DISEÑO WEB

ASOCIACIÓN DISEÑO WEB Y SEGURIDAD - UNIVERSIDAD DE CÁDIZ

Page 43: Introducción Al Diseño Web

CSS: UNA BREVE INTRODUCCIÓN_

Las hojas de estilo en cascada (Cascading Style Sheets) o CSS son un lenguaje usado para definir el formato visual de un documento HTML, XML o XHTML. Fueron creadas por el W3C con el fin de mantener el contenido de un documento separado de la presentación, con el fin último de conseguir una web completamente semántica. Su última versión estable es la 2.0.

Las etiquetas de marcado, como <p> o <h1>, pueden llevar asociados, como bien sabemos, una serie de atributos para darle formato. En el apartado anterior, se ha recomendado por activa y por pasiva que se obviaran determinados atributos relacionados con la presentación de los diferentes elementos del documento HTML para delegar la responsabilidad en las hojas de estilo.

Antes de que el uso de las hojas de estilo se generalizase, el aspecto visual que debía presentar cada elemento HTML iba definido dentro de la propia etiqueta, tal que así:

<body bgcolor=”#000088”><p align=”center”><font size=”12px” color=”red”>Hola</font>

</p></body>

Esto, desde el principio, presentaba una serie de desventajas. La primera de todas, que se mezclaba completamente el contenido con la forma de presentarlo, haciendo en ocasiones uno dependiente del otro. La segunda era que generaba unos documentos más pesados e ilegibles. La tercera, que las páginas sólo podían presentar un único aspecto visual (el que determinara el diseñador), sin posibilidad de ser adaptado para personas con deficiencias. Y la cuarta, y quizás una de la más importantes, era que a la hora de cambiar la presentación de un conjunto de páginas web, se hacía necesario ir cambiando todos los atributos uno a uno en los distintos documentos, convirtiendo el hecho de cambiar la imagen de un sitio en una tarea harto complicada.

La implementación de las hojas de estilo dio solución a todos esos problemas, proporcionando un método sencillo para definir el aspecto visual de una página web siguiendo una serie de reglas y presentando una sintaxis clara y fácil de aprender.

39 INTRODUCCIÓN AL DISEÑO WEB

ASOCIACIÓN DISEÑO WEB Y SEGURIDAD - UNIVERSIDAD DE CÁDIZ

Page 44: Introducción Al Diseño Web

Las principales ventajas que poseen las hojas de estilo en cascada son las siguientes:

• Separan la representación del contenido

• Al aplicarlas, los documentos HTML resultantes son más simples

• Facilitan la representación al proporcionar una forma más simple de gestionar los colores, estilos de letra, etc.

• En un mismo documento puede haber definidas varias hojas de estilo en cascada a la vez

• Pueden mostrarse diferentes hojas de estilo en cascada según las especificaciones del usuario o el modo de presentación (modo impresión, visualización en un teléfono móvil, etc.)

• Es posible modificar el aspecto visual completo de un sitio web cuyas páginas enlazan la misma hoja de estilo en cascada modificando simplemente ese fichero CSS

Existen varios tipos de hojas de estilo aparte de CSS, como XSL, pero se usa con mayor asiduidad CSS debido a que aunque es codificado de forma distinta por los distintos navegadores (por el problema del incumplimiento de los estándares) son compatibles por completo con éstos. Precisamente por el incumplimiento de los estándares por parte de algunos navegadores, no está de más comprobar cómo se visualiza tu página en algunos de ellos para asegurar que aunque existan diferencias a la hora de generarla, se muestra de manera correcta.

Ya metidos en la cuestión, pasamos a presentar las tres formas que tiene CSS de aplicar las reglas de presentación a una página:

• Insertado en la propia etiqueta HTML: puede aplicarse un estilo a una etiqueta determinada incluyendo la definición del formato usando el atributo style.

<a href=”http://www.minasdemoria.com/ style=”text-decoration: none; color: black”>Lugar de vacaciones</a>

En el ejemplo se ha modificado la presentación del enlace, quitándole el subrayado y poniéndolo de color negro. No es la mejor forma de aplicar estilos, ya que cambiar la presentación sería de nuevo una tarea ardua, además de que no se termina de separar el contenido del aspecto visual. Aún así, es una forma de trabajar válida.

40 INTRODUCCIÓN AL DISEÑO WEB

ASOCIACIÓN DISEÑO WEB Y SEGURIDAD - UNIVERSIDAD DE CÁDIZ

Page 45: Introducción Al Diseño Web

• Mediante una hoja de estilo interna: se pueden definir estilos para los elementos de una página dentro del mismo documento HTML si se sitúan en el interior del elemento <style>, que lleva asociado un atributo (type) que indica el tipo de estilo aplicado. Éste, a su vez, debe situarse dentro de la cabecera del documento, entre las etiquetas <head> y </head>.

<!-- Inicio del documento -->

<head><!-- Etiquetas meta, omitidas por simplicidad --><style type=”text/css”> body { background-color: blue;

font-family: Arial; color: red; } a { text-decoration: none;

} /* Fin de los estilos */</style></head><!-- Continuación del documento -->

Examinando los estilos aplicados, vemos que se ha configurado el azul como color de fondo de todo el documento, el tipo de letra se ha establecido como ʻArialʼ y el color de la misma como rojo (todo aplicado al elemento de cuerpo <body>), además de eliminarse el subrayado de los enlaces (aplicado al elemento <a>). El texto contenido entre /* y */ es un comentario, que será ignorado por el navegador.

Esta forma de aplicar el CSS es, no obstante, mejor que la anterior, pero aún así presenta la dificultad de tener que copiar y pegar el estilo a todas las páginas a las que se le quiera aplicar el mismo. Resulta útil para aplicar un estilo determinado a una página en particular. Si lo que se pretende es conseguir que una serie de páginas compartan unos estilos, la mejor solución es la siguiente.

41 INTRODUCCIÓN AL DISEÑO WEB

ASOCIACIÓN DISEÑO WEB Y SEGURIDAD - UNIVERSIDAD DE CÁDIZ

Page 46: Introducción Al Diseño Web

• Mediante una hoja de estilo externa: es la forma más potente de trabajar con hojas de estilo. Permite separar completamente la presentación del contenido en un documento HTML facilitando, además, su mantenimiento y asegurando una cierta uniformidad presentacional en un sitio web. El fichero CSS, que se encuentra en un documento aparte, puede ser referenciado desde HTML usando el elemento <link>, el cual posee una serie de atributos:

rel indica la naturaleza del documento que se enlaza (para hojas de estilo,

stylesheet)

href establece la URL del documento enlazado

type define el tipo del archivo (text/css para CSS)

media asocia la hoja de estilo a un medio de visualización

Veamos un ejemplo de uso del elemento <link>:

<link rel=”stylesheet” href=”printable.css” type=”text/css” media=”print”>

El documento enlazado es una hoja de estilo, de nombre ʻprintableʼ y situada en el mismo directorio que el documento, de tipo CSS y establecida como hoja de estilo a usar en caso de que el usuario pretenda imprimir la página.

Si hay varias hojas de estilo externas se pueden definir hojas, unas como alternativas, una como persistente y una como favorita.

Definidas las formas de aplicar los estilos, pasemos a dar una introducción a lo que es el formato de los estilos en sí. Siguiendo la sintaxis de CSS, la forma de la instrucción en el lenguaje de hojas de estilo en cascada es la siguiente, teniendo presente que este lenguaje es case sensitive, es decir, sensible a mayúsculas y minúsculas:

<elemento HTML> { <atributo de formato> : <valor> ; }

Dentro de las llaves pueden ponerse tantos atributos con su respectivo valor como se necesite. Poniendo, como ejemplo, el caso siguiente, donde queremos que el color del texto de los párrafos de una página sea rojo:

p { color : red; }

Recordemos que esta instrucción pondría de color rojo el texto de todos los párrafos del documento sin excepción, ya que aplicamos el estilo a todo el contenido del elemento

42 INTRODUCCIÓN AL DISEÑO WEB

ASOCIACIÓN DISEÑO WEB Y SEGURIDAD - UNIVERSIDAD DE CÁDIZ

Page 47: Introducción Al Diseño Web

<p>. Para poder determinar un estilo que sea aplicado sólo a las partes del documento que nosotros queramos, se crearon las clases. Su definición en CSS es como sigue:

.nombredelaclase { <atributo de formato> : <valor> ; }

En ʻnombredelaclaseʼ ponemos un nombre que identifique la función que tiene dicha clase. Como ejemplo práctico, crearemos la clase .importante, que pondrá las letras del texto sobre el que se aplique en mayúsculas:

.importante { text-transform: uppercase; }

Ahora, para aplicar la clase a una porción de nuestro documento, tenemos que usar el atributo class que poseen los elementos de HTML. Así, si queremos que un párrafo aparezca con el formato definido en la clase .importante (dejando a otros párrafos sin formatear), tenemos que escribir la etiqueta del párrafo así:

<p>A continuación, alguien dijo: </p><p class=”importante”>¡Tienen un Troll de las Cavernas!</p>

Las clases pueden aplicarse a todos los elementos que se quiera y tantas veces como se necesite. Sin embargo, sería interesante que existiera un método para asignar un estilo único a elementos individuales, para asegurarnos que serán diferentes de los demás. Para ello se usa el atributo de identificación id, que asigna un nombre único a un elemento. El formato de instrucción para aplicar formato a los identificadores en CSS es este:

#nombredeindentificador { <atributo de formato> : <valor> ; }

Si queremos definir un párrafo diferenciado de los demás (en mayúsculas) pero queremos que el estilo sea aplicado solamente a ese párrafo, crearíamos la identidad #importante:

#importante { text-transform: uppercase; }

Aplicado en el texto anterior, quedaría algo así:

<p>A continuación, alguien dijo: </p>

<p id=”importante”>¡Tienen un Troll de las Cavernas!</p>

El resultado en el navegador sería el mismo que antes, con la diferencia de que sabemos con seguridad que ese estilo no puede ser aplicado a ningún otro párrafo del documento.

43 INTRODUCCIÓN AL DISEÑO WEB

ASOCIACIÓN DISEÑO WEB Y SEGURIDAD - UNIVERSIDAD DE CÁDIZ

Page 48: Introducción Al Diseño Web

Cabe destacar, además, que se pueden aplicar de manera simultánea clases e identidades a un mismo elemento HTML.

Los diferentes tipos de selectores y la herencia no serán tratadas en esta ocasión por superar los objetivos que tiene este manual.

Aplicando estilos a bloques de texto y contenido

Sabemos que con los elementos <div> y <span> podemos agrupar bloques de contenido y texto respectivamente (a diferencia de <p>, <span> no produce saltos de párrafo). Así, podemos encerrar contenido que tenga las mismas características dentro del elemento <div> y, al aplicarle a éste una identidad o clase, se verá afectado por igual lo que se encuentre en su interior, ocurriendo exactamente lo mismo con el texto situado entre las etiquetas <span> y </span>.

Creamos la identidad #centrado y la clase .destacado para ilustrar lo comentado:

#centrado { /* identidad centrado */ text-align: center; /* centro el texto */

}

.destacado { /* clase destacado */ color: red; /* texto en color rojo */

} A continuación, aplicamos los estilos sobre los elementos <div> y <span>:

<div id=”centrado”>Cruzaron el río Isen en la pascua de Verano, vestidos de <span class=”destacado”>Jinetes Negros.</span></div>

44 INTRODUCCIÓN AL DISEÑO WEB

ASOCIACIÓN DISEÑO WEB Y SEGURIDAD - UNIVERSIDAD DE CÁDIZ

Page 49: Introducción Al Diseño Web

Modelo de caja

Los contenidos cuya presentación ha sido establecida usando CSS se distribuyen en “cajas” a lo largo y ancho de la pantalla. Para entenderlo correctamente, nada mejor que mostrar un gráfico definiendo todas y cada de las particularidades de este modelo:

Todas las partes que ahí se muestran pueden ser tratadas mediante las propiedades CSS. Pasamos a definir algunas de ellas:

• Borde (propiedad border) es el marco que rodea al contenido (borde interior) y al

relleno (exterior)

• Margen (propiedad margin) determina la distancia desde el borde al resto de las

cajas de alrededor

• Relleno (propiedad padding) se refiere a la distancia que existe entre el contenido

y el borde (exterior)

45 INTRODUCCIÓN AL DISEÑO WEB

ASOCIACIÓN DISEÑO WEB Y SEGURIDAD - UNIVERSIDAD DE CÁDIZ

Page 50: Introducción Al Diseño Web

Explicado brevemente el modelo de cajas, pasamos a comentar algunas de las propiedades CSS más utilizadas.

Algunas propiedades CSS

Es importante explicar como se trabaja con las propiedades CSS. Una propiedad general, como background, puede modificar todos los aspectos de un fondo, simplemente poniendo uno detrás de otro todos los valores. Sin embargo, si se quiere cambiar sólo uno de esos valores, se puede acceder directamente a él. Así, puedo establecer simplemente un color de fondo modificando la propiedad background-color directamente, o definir el color en la propiedad background omitiendo los demás valores (ya que background-color está contenida en background)

Algunas propiedades:

• background (background-color, background-image, etc.)

Permite modificar el área del contenido y del relleno poniendo un color de fondo, una imagen, etc. La URL de la imagen a mostrar debe ser de la forma url(fondo.gif), pudiendo variar la ruta o el formato del gráfico

• color Establece un color para el texto. Los colores pueden estar definidos por un nombre (blue, red, cyan, etc.) o por un valor hexadecimal (#000000 por ejemplo)

• list-style

Para cambiar el marcador de un elemento de lista. Los valores posibles son none (deshabilita el marcador), disc, decimal, circle, square, etc. o una URL de una imagen

• margin (margin-top, margin-right, margin-bottom, margin-left)

Determina la distancia entre el borde de una caja y las cajas adyacentes. Los valores posibles son: porcentaje, tamaño o auto. Si se escribe margin: 0; se asignará margen cero a todos los lados. Sin embargo, se pueden definir los márgenes dos a dos o de uno en uno. Si se escribe margin: 0 auto; el cero se asignará a los márgenes de arriba y abajo mientras los márgenes laterales serán automáticos. En cambio, si se escribe margin: 0 10px 2px 0; se asignarán los valores a los márgenes según orden horario

46 INTRODUCCIÓN AL DISEÑO WEB

ASOCIACIÓN DISEÑO WEB Y SEGURIDAD - UNIVERSIDAD DE CÁDIZ

Page 51: Introducción Al Diseño Web

• padding (padding-top, padding-right, padding-bottom, padding-left)

Determina la distancia entre el borde del contenido de una caja y el borde exterior. Los valores posibles son: porcentaje, tamaño o auto. Asignar valores a los rellenos se hace de la misma forma que con los márgenes

• border (border-top, border-top-width, border-left-style, etc.)

Permite modificar el formato del borde, modificando su anchura (border-width), su estilo (border-style) o su color (border-color)

• width

Establece un ancho del bloque en valor absoluto, porcentaje o un valor automático (auto)

• height

Establece un alto del bloque en valor absoluto, porcentaje o un valor automático (auto)

• float y clear

La primera posiciona un bloque (caja) a izquierda (left), derecha (right) o ninguno (none) dentro del flujo mientras la propiedad clear indica si pueden situarse elementos respecto al actual (valores left, right, both (a ambos lados) o none)

• font (font-family, font-size, font-weight, font-style)

Esta propiedad define un tipo de letra genérica o un conjunto de fuentes separadas por comas, un tamaño del tipo de letra (con valores predefinidos o numéricos elegidos por el desarrollador), un grosor (negrita, más negrita, etc.) y un estilo (cursiva, mayúsculas pequeñas, etc.)

• line-height

Define el interlineado en porcentaje o valor numérico

47 INTRODUCCIÓN AL DISEÑO WEB

ASOCIACIÓN DISEÑO WEB Y SEGURIDAD - UNIVERSIDAD DE CÁDIZ

Page 52: Introducción Al Diseño Web

• vertical-align

Alinea verticalmente el texto (valores top, middle, bottom, etc.)

• text (text-align, text-indent, text-decoration, text-transform)

La propiedad text formatea el texto. La primera de las propiedades, text-align, alinea el texto horizontalmente, la segunda produce un sangrado en la primera línea del texto, la tercera trata la decoración del texto (underline (subrayado), blink (parpadeante), etc.) y la última modifica el texto, poniéndolo en mayúsculas (uppercase), en minúscula (lowercase), etc.

Posicionamiento

En CSS existen tres modos de posicionamiento: flotante (tratado con las propiedades float y clear), relativo y absoluto. El posicionamiento determina la manera en la que van a estar las cajas situadas en nuestra página, si es dentro del flujo normal o fuera de él. Cuando una caja se encuentra fuera del flujo normal, pudiendo ser posicionada como se desee, se dice que está situada de manera absoluta.

No se tratará el posicionamiento ni las peculiaridades de las capas en este manual.

OTRAS TECNOLOGÍAS_

Durante un tiempo, la forma que existía de hacer páginas web era usando únicamente HTML, por lo que sólo se generaban páginas web estáticas, por lo que no existía interactividad entre el usuario y el sitio. Con el paso del tiempo, el mundo fue testigo de numerosos avances en el campo de las tecnologías web; a veces por iniciativa del W3C, otras veces por iniciativa privada, se iban desarrollando nuevas formas de implementar tecnologías que propiciaron el cambio en la naturaleza de la web misma: se pasó de un contenido “muerto” a contenido dinámico e interactivo.

Primero hizo su aparición el DHTML (Dinamic HTML), que pretendía mejorar la experiencia de navegación del usuario utilizando una combinación de HTML, Javascript, CSS y jerarquía de objetos (DOM). En una página hecha en DHTML el HTML aporta el contenido, el CSS el formato de presentación de éste, el lenguaje Javascript ejecuta scripts del lado del cliente (navegador) mediante un intérprete para cambiar el HTML del

48 INTRODUCCIÓN AL DISEÑO WEB

ASOCIACIÓN DISEÑO WEB Y SEGURIDAD - UNIVERSIDAD DE CÁDIZ

Page 53: Introducción Al Diseño Web

documento y el DOM ofrece una estructura del documento para poder manipular las partes de un fichero HTML como si de objetos se trataran.

Javascript (ECMAScript) es un lenguaje interpretado orientado a objetos estrechamente ligado a la web desde su nacimiento. Fue inventado por la empresa Netscape con una sintaxis muy parecida a la de Java. Era y es usado todavía para dotar de dinamismo a una página web, sirviendo usualmente para generar menús desplegables, generar movimiento en un texto, mostrar mensajes de alerta y otras cosas más. A pesar de todas sus funcionalidades, tiene bastantes detractores. Por una parte, se le acusa de aumentar el tráfico de la red y a producir sitios “pesados”. Por otra, hay quien lo acusa de ser susceptible a ser usado de manera intrusiva y con fines poco éticos, ya que es ampliamente utilizado por crackers para inyectar en los equipos de la red código malicioso y así explotar vulnerabilidades. A pesar de todo, ha vuelto a tomar relevancia al formar parte de la técnica de desarrollo web del momento (si no la mejor, la más de actualidad por el boom de la web 2.0), AJAX (Asynchronous Javascript And XML).

Para poder usar Javascript en un documento HTML, es preciso crear una etiqueta meta que avise del tipo de lenguaje de script que se va usar:

<meta http-equiv=”Content-Script-Type” content=”JavaScript”>

Posteriormente se puede o embeber el código Javascript en la página mediante el uso de la etiqueta <script> (en la cabecera del documento o en el cuerpo) o enlazar el código escrito en otro archivo mediante la misma etiqueta de esta forma:

<script type=”JavaScript” src=”scripts.js”>Script</script>

Ejemplo de un programa en Javascript que muestra una ventana de alerta:

<p><a href=”javascript:alert (‘¡Al puente de Khazad Dhum!’)”>Pulsa</a></p>

Por su parte, DOM es una API (Application Programming Interface) (conjunto de funciones y procedimientos de una biblioteca que permiten ser usados por un software) para manipular de manera dinámica el contenido en un lenguaje orientado a objetos como ECMAScript.

En un capítulo anterior, al hablar de páginas dinámicas, se mencionaron los CGIs y los lenguajes interpretados del lado del servidor, como PHP y ASP. Un paso más allá van las RIAs o Aplicaciones de Internet Ricas, que buscan llevar la experiencia del usuario del escritorio a la web. Muchas de ellas usan tecnología Adobe Flash, conocida por la generación de películas vistosas que son luego embebidas en páginas web, aportándoles

49 INTRODUCCIÓN AL DISEÑO WEB

ASOCIACIÓN DISEÑO WEB Y SEGURIDAD - UNIVERSIDAD DE CÁDIZ

Page 54: Introducción Al Diseño Web

un grado más de dinamismo e interactividad. El problema de las películas de Flash es que, al requerir de un plugin para su funcionamiento, no pueden ser visualizadas en todos los navegadores, por lo que hacer una página web enteramente en Flash es hoy día un error si no se proporciona al usuario una alternativa. A pesar de que se generan sitios webs muy llamativos, no cumplen las normas de usabilidad y accesibilidad básicas que todo desarrollador web debería tener en cuenta.

ACCESIBILIDAD, USABILIDAD Y ESTÁNDARES WEB_

Anteriormente se definió brevemente el concepto de accesibilidad y usabilidad. Nos centraremos ahora en profundizar un poco más en el tema, hablando de una rama muy importante de la usabilidad: la accesibilidad web.

Accesibilidad web

La accesibilidad web se refiere a la capacidad de acceso que tiene una página web por todos sus usuarios. Una web es accesible si permite que sus contenidos sean disfrutados por una colectividad de personas al margen de que éstas posean algún tipo de discapacidad o algún otro tipo de dificultad derivada del entorno o la tecnología. Por ello, es considerado un elemento fundamental que favorece que cualquier persona pueda tener acceso a la cultura en igualdad de oportunidades.

Toda página accesible debe presentar un diseño adecuado para todos. Éste tiene que ser desarrollado de una manera adecuada para que pueda ser usado por el mayor número de personas posible sin necesidad de ser adaptado. Presenta una serie de principios:

• Debe favorecer la igualdad en el uso

• Debe ser flexible

• Debe ser simple e intuitivo

• Debe presentar la información de una manera fácil de percibir

• Debe ser tolerante a errores

• Debe minimizar el esfuerzo a realizar

• Debe presentar una dimensiones apropiadas

Cumplir con los principios expuestos anteriormente nos va a asegurar que nuestro diseño va a ser accesible. Una vez desarrollado y puesto en funcionamiento, el acceso a nuestros contenidos por parte de las personas con algún tipo de discapacidad se va a ver mejorado. Además, disfrutaremos de otras ventajas adicionales, vistas también desde el lado del desarrollador:

50 INTRODUCCIÓN AL DISEÑO WEB

ASOCIACIÓN DISEÑO WEB Y SEGURIDAD - UNIVERSIDAD DE CÁDIZ

Page 55: Introducción Al Diseño Web

• El desarrollo se hace más simple

• Los costes bajan

• Nuestro sitio es indexado por buscadores de una mejor manera

• Facilita la interoperabilidad

• Aumenta la usabilidad (la accesibilidad no es si no una parte de la usabilidad)

• El acceso a nuestro sitio es mejor

• El número de usuarios potenciales aumenta

Para crear sitios web accesibles hay que seguir una especificación del W3C, la WCAG 1.0 o “Pautas de Accesibilidad al Contenido en la Web 1.0”.

Entre las limitaciones que puede presentar un usuario con discapacidad encontramos deficiencias de tipo visual (ceguera total o parcial, daltonismo, etc.), motriz (dificultad para mover las extremidades, etc.), auditivas (sordera total o parcial) o cognitivas, como problemas con la memoria o dislexia.

Para poder navegar por la web, usuarios con discapacidades usan diferentes aplicaciones:

• Un lector de pantalla con sintetizador de voz para usuarios con problemas visuales

• Hardware que convierte el texto en pantalla al lenguaje Braille

• Otros programas adaptados según discapacidades: aumentador de pantalla, reconocimiento de voz, etc.

Para validar si un sitio web es accesible, existen una serie de herramientas para su comprobación. La más importante de todas en el mundo de habla hispana es el TAW, o Test de Accesibilidad Web. La barra de tarea Web Developer, además de proporcionar herramientas muy útiles para los desarrolladores web, presenta una serie de opciones para evaluar la accesibilidad de un sitio web.

Estándares web

Al estar basada la web en una multitud de tecnologías, ninguna de ellas puede pretender cubrir todas y cada una de las necesidades del usuario. Por ello, se hace imprescindible que se controle con qué herramientas se construyen los sitios de manera clara y transparente para asegurar que la web es accesible por todo el mundo. El W3C controla las tecnologías usadas, confirmando algunas como estándares y desestimando otras para que ningún fabricante se haga con el control del monopolio de la web. Así, la existencia de los estándares favorece la existencia de una web universal, y por otra parte asegura que los navegadores que cumplan dichos estándares muestren una página web de

51 INTRODUCCIÓN AL DISEÑO WEB

ASOCIACIÓN DISEÑO WEB Y SEGURIDAD - UNIVERSIDAD DE CÁDIZ

Page 56: Introducción Al Diseño Web

idéntica forma. Las tecnologías recomendadas por el W3C como estándares para la web son, entre otras, las siguientes:

• HTML (XHTML) para la creación de páginas estáticas

• Hojas de estilo en cascada (CSS) para la presentación

• DOM como especificación DOM

• XML para la distribución de información estructurada

• SVG como especificación para gráficos vectoriales

En muchas ocasiones, el cumplimiento de los estándares es pasado por alto por parte de organizaciones o empresas para imponer a los demás sus propias tecnologías de desarrollo. Esto es algo tristemente conocido por los desarrolladores web, que se ven forzados en ocasiones a hacer sitios web que no cumplen los estándares para que puedan ser visualizados por navegadores poco respetuosos con ellos, como el caso de las versiones de Internet Explorer. En lo que muchos denominan como la enésima aplicación de la técnica Adoptar, Extender, Extinguir (Embrace, Extend, Extinguish en inglés), tras la Guerra de los Navegadores Microsoft consiguió situar a Internet Explorer como el navegador más usado del mundo, al incluirlo en su sistema operativo Microsoft Windows y obligando a los desarrolladores a crear sitios específicos para él, por lo que se fomentó y extendió el uso de sus tecnologías propietarias. Tras el resurgir de Netscape (con su navegador derivado Mozilla) y su posterior aumento de cuota de mercado, todos los navegadores están convergiendo hacia la opinión de que una web estandarizada es la mejor opción con más o menos éxito y en mayor o menor tiempo.

DISEÑO LIMPIO Y POSICIONAMIENTO ÓPTIMO (SEO)_

Cuando nos planteamos comenzar a diseñar un sitio web, debemos tener en cuenta múltiples factores: además de tener una estética apropiada, debe ser funcional y además fácil de actualizar.

Si un particular o una empresa nos pide realizar su sitio web, se va a centrar en enseñarnos cómo desea que se muestre el sitio y la información que debemos incluir en él. Es decir, el cliente se centra en el diseño (cómo se va a mostrar) y no se preocupa en las tecnologías que vayamos a usar para implementarlo, y mucho menos en el código de nuestros documentos. Por ello, debemos procurar la realización de un sitio web que satisfaga al solicitante, mostrándole un diseño usable y atractivo, mientras ponemos especial atención en las tecnologías usadas (respetando, en la medida de lo posible, los estándares web) y en generar código limpio y adecuado para que sea fácilmente indexado por los motores de búsqueda.

52 INTRODUCCIÓN AL DISEÑO WEB

ASOCIACIÓN DISEÑO WEB Y SEGURIDAD - UNIVERSIDAD DE CÁDIZ

Page 57: Introducción Al Diseño Web

Los motores de búsqueda, como Google o Yahoo!, almacenan información sobre nuestro sitio en sus bases de datos mediante el uso de algoritmos de búsqueda. Para conseguir posicionar un sitio en los primeros lugares de resultado se siguen una serie de procesos de optimización (SEO o Search Engine Optimization), estando estrechamente relacionado el lugar donde se posiciona un sitio en la lista de resultados con la presencia y reputación que adquiere éste en la Red. Bien realizado el proceso SEO, se mejora la visibilidad del sitio web por parte de los buscadores facilitando el reconocimiento de los contenidos y aumenta el tráfico dirigido hacia nuestra web.

Algunas reglas para mejorar nuestro posicionamiento:

• Crear contenido único y de calidad

• Dar de alta nuestro sitio en los buscadores más importantes, como Google

• Conseguir que te enlacen otras páginas con información relacionada (sin caer nunca en hacer spam)

• Limitar el contenido flash usado y evitar los frames

• Enlazar de manera interna siguiendo una estructura clara y ordenada

• Procurar que nuestro código sea lo más indexable posible

La importancia de los buscadores es mayor de la que pensamos en principio. Además de poner orden en la web (antes de existir los motores de búsqueda, la web era un poco caótica), se erigen como los grandes canalizadores de tráfico, facilitando enormemente la labor de encontrar un contenido determinado con un par de clics. Cuando construyes tu espacio web es importante que éste sea realizado, además de accesible a los usuarios, accesible a los buscadores. Por ejemplo, si realizas tu sitio web usando únicamente imágenes (incluso para incluir texto) puede llegar a ser visualmente atractivo para los usuarios, aunque no tenga en cuenta la accesibilidad, usabilidad, ni la separación del contenido de la presentación. Sin embargo, cuando un buscador trate de indexar tu página, no va a poder hacerlo de una manera correcta, ya que al estar los contenidos formando parte de imágenes, éstos serán invisibles para el motor de búsqueda. Así, el buscador sólo podrá indexar determinadas parte del código, como los enlaces y el atributo alternativo de cada una de los gráficos. De esa forma, tu sitio no conseguirá un posicionamiento importante.

El proceso de indexación por parte de los motores de búsqueda y el funcionamiento general de los mismo excede ampliamente los objetivos de este manual.

53 INTRODUCCIÓN AL DISEÑO WEB

ASOCIACIÓN DISEÑO WEB Y SEGURIDAD - UNIVERSIDAD DE CÁDIZ

Page 58: Introducción Al Diseño Web

ALGUNOS ERRORES COMUNES EN EL DISEÑO WEB_

El papel del webmaster es claro: realizar páginas web navegables, usables, respetar los estándares y presentar un diseño y contenido que satisfagan necesidades. Pero esto no es siempre así.

Con la explosión del fenómeno Internet, muchas personas con ganas de mostrar sus actividades al mundo, han aprendido la manera de realizar sitios webs y así formar parte de la Red. La generalización del uso de los programas WYSIWYG ha hecho la tarea de realizar páginas web complejas un poco más asequible y rápida, y la proliferación de manuales de HTML, CSS, etc. han favorecido la existencia de cada vez más usuarios autodidactas. No obstante, estos programas presentan una serie de carencias que, unido a malas prácticas de diseño arrastradas desde hace tiempo por parte de diseñadores y desarrolladores, han hecho de la creación de espacios web algo caótico.

A continuación, se presentan una serie de errores que se cometen a la hora de elaborar sitios web bien por desconocimiento bien por malos hábitos:

Uso abusivo de pop-ups

Los pop-ups o ventanas emergentes son usados para, en una nueva ventana, mostrar una información determinada. Los pop-ups son usados bastante a menudo para mostrar publicidad, por lo que muchos usuarios tienen instalados en sus navegadores bloqueadores de ventanas emergentes para evitar así el visionado de la misma. Muchos sitios corporativos acostumbran a abrir un pop-up con contenido en flash nada más entrar en su espacio web, lo que es un error importante.

No significa esto que el uso de pop-ups sea algo prohibido o desaconsejado; bien usados, pueden ser harto útiles. Hoy día, con el auge de la web 2.0, hemos asistido al nacimiento de las ventanas emergentes en AJAX, con una nueva estética y un comportamiento nada intrusivo.

Hotlinking

El hotlinking es una práctica bastante perjudicial (aunque prácticamente desconocida para el usuario medio), que consiste en usar una imagen en una página web, foro, red social, etc. que se encuentra alojada en el espacio web de un tercero (totalmente ajeno), consumiendo cada vez que se carga la imagen el ancho de banda asignado al mismo. Por ejemplo, si deseamos mostrar una imagen o firma en nuestro perfil de un foro, podemos buscar la imagen, copiar la URL de la misma y pegarla en nuestro perfil, mostrándose cada vez que escribamos un nuevo comentario. Aunque el método es sencillo, esa actividad es bastante dañina para la persona que tiene alojada la imagen en

54 INTRODUCCIÓN AL DISEÑO WEB

ASOCIACIÓN DISEÑO WEB Y SEGURIDAD - UNIVERSIDAD DE CÁDIZ

Page 59: Introducción Al Diseño Web

su espacio web, ya que cada vez que se muestre nuestra imagen en el foro, se realizará una petición al servidor que aloja el sitio del dueño de la imagen, consumiendo su ancho de banda. Si el sitio web de esa persona tiene asignado 20 GB de transferencia mensual por parte de su proveedor de hosting, y la imagen pesa 200KB, cada vez que se realiza una petición a la imagen desde el foro se consumen 200KB de ancho de banda del sitio. Un sitio web importante no notará merma alguna, pero si la imagen enlazada está en una página web modesta, la consecuencia será un alto consumo de ancho de banda por parte del tercero, lo que puede propiciar el cierre de la página. Quizás el afectado por el hotlinking ni siquiera sepa lo que ha ocurrido, pero es cosa nuestra como usuarios y desarrolladores responsables el tema de evitar esta práctica. Las soluciones pasan por alojar las imágenes que vayamos a usar en nuestras páginas en nuestro propio servidor o, en su defecto, si queremos usar una imagen para mostrarla en un foro podemos subir ésta a un servidor dedicado al alojamiento de imágenes, de los que hay muchos en Internet.

Mal uso de los enlaces

La creación de enlaces debe seguir ciertas directrices. El contenido al que apunta un enlace debe ser claro para que nuestro visitante sepa con certeza a dónde va a acceder, y abrirse éste en la misma ventana del navegador a ser posible (el usuario es responsable de abrirlo en una ventana nueva si le parece oportuno). Por otra parte, se hace vital revisar los enlaces para ver si hay alguno que apunta a una página que ya no existe (enlaces muertos). Por último, conviene seguir un cierto estilo a la hora de poner enlaces en tu web: el visitante está acostumbrado a que los enlaces sean azules y con un estilo de texto subrayado. A causa de eso, si tus enlaces van a poseer un estilo diferente, deja claro lo que es un enlace y lo que no.

Sobrecarga visual

Tus contenidos deberían estar estructurados de la mejor forma posible para evitar que ciertas zonas estén sobrecargadas y otras completamente vacías. Además es importante no saturar al visitante con demasiadas imágenes animadas (ni texto parpadeante) para no distraer su atención y causarle cansancio.

Mal uso de las distintas tecnologías

Procura no abusar con el uso de nuevas tecnologías en tu sitio web ni mantener algunas obsoletas por comodidad. Además, es conveniente evitar el uso de scripts para el redimensionado de la ventana o para solicitar votos para un ranking.

55 INTRODUCCIÓN AL DISEÑO WEB

ASOCIACIÓN DISEÑO WEB Y SEGURIDAD - UNIVERSIDAD DE CÁDIZ

Page 60: Introducción Al Diseño Web

Sobrepeso

Otra de las cosas que hay que tener en cuenta a la hora de desarrollar un sitio web es el sobrepeso. Normalmente, los sitios que utilizan estándares web al pie de la letra son menos pesados que otros que no los usan (albergando más o menos el mismo contenido). Cuando hablamos de peso en una página web, nos referimos a la cantidad de bytes que tenemos que descargar desde el servidor para poder visualizarla por completo. El peso es un factor importante a tener en cuenta a la hora de publicar nuestra web en Internet, ya que es un factor que determina el tiempo de carga que va a emplear (a nadie nos gusta tener que esperar medio minuto para poder ver una página). Para evitar que nuestro espacio web sea muy pesado, debemos procurar organizar el contenido, reducir el uso de gráficos en la maquetación en la medida de lo posible y usar estándares web. Aún hecho todo esto, el tiempo de carga puede seguir siendo alto. Si es así, revisar los contenidos externos que se cargan (scripts, banners publicitarios, etc.) y revisar concienzudamente el número de peticiones HTTP que se realizan, por si se estuvieran llevando a cabo más de las estrictamente necesarias.

Deficiente arquitectura de la información

Todas las zonas de tu sitio web deben ser accesibles desde cualquier parte, por lo que hay que evitar la existencia de ʻcallejones sin salidaʼ y el deshabilitar los botones de navegación delante y atrás. Además, es mejor evitar la utilización de menús desplegables demasiado grandes y estrechos, ya que requieren en ocasiones de una gran destreza para pulsar una de las opciones. Mejor usar menús normales, aunque tengas que poner varios en diferentes zonas de la página.

Esta página está optimizada para...

Es un error común. Toda página que realices debe funcionar en cualquier resolución y cualquier navegador. Para ello, se pueden realizar páginas que adapten el contenido a la resolución (líquidas) y si respetando los estándares tu página web no se muestra correctamente en algunos navegadores, usar determinados hacks CSS (qué remedio).

Sitios enteramente en flash

Aunque la tecnología flash ofrece una imagen visual increíble, las páginas realizadas usando sólo esa tecnología son poco usables, se posicionan mal y requieren de un plugin para funcionar. Integra películas flash en tu sitio pero sin abusar de ellas, dando la posibilidad de saltarse su reproducción.

56 INTRODUCCIÓN AL DISEÑO WEB

ASOCIACIÓN DISEÑO WEB Y SEGURIDAD - UNIVERSIDAD DE CÁDIZ

Page 61: Introducción Al Diseño Web

Música de fondo

Poner música de fondo era algo típico en los sitios web de la década de los 90 en el siglo XX. Si eres un nostálgico y aún te apetece compartir tus gustos musicales con el resto de la Red, facilita una manera de que ésta sea parada o pausada. Si no, puedes provocar hastío en el usuario (que no tiene por qué compartir tus mismos gustos musicales) para que acabe, finalmente, abandonando tu página.

Uso de tablas para maquetar

Las tablas no deben ser usadas para definir la estructura de un sitio web: eso es labor de las hojas de estilo. Las tablas tienen que ser usadas para lo que están pensadas, tabular una serie de datos relacionados. Con CSS la estructura del sitio puede cambiar sencillamente redefiniendo las propiedades de la hoja de estilo, sin necesidad de modificar el código HTML. Así, damos un paso más en favor de separar el contenido de la forma en la que éste es presentado. Tampoco es adecuado el uso de marcos, ya que no son soportados por algunos navegadores en la actualidad.

Lo principal, el contenido

El rey de la web es el contenido. Si tu web carece de información o el texto que hay en ella está insertado en imágenes o películas flash, no será correctamente indexado por los buscadores y tu posicionamiento será nulo o deficiente. Además, ¿qué hacemos con los navegadores de sólo texto?

Colores y fondos adecuados

Es importante que los colores y los fondos de pantalla sean los más adecuados para una navegación continuada. Evitar fondos demasiado complejos y colores llamativos.

57 INTRODUCCIÓN AL DISEÑO WEB

ASOCIACIÓN DISEÑO WEB Y SEGURIDAD - UNIVERSIDAD DE CÁDIZ

Page 62: Introducción Al Diseño Web

58 INTRODUCCIÓN AL DISEÑO WEB

ASOCIACIÓN DISEÑO WEB Y SEGURIDAD - UNIVERSIDAD DE CÁDIZ

Page 63: Introducción Al Diseño Web

LICENCIA_

Este manual posee una licencia libre Creative Commons 2.5, que determina que este trabajo puede ser distribuido, copiado y comunicado públicamente, además de que se pueden generar trabajos derivados de él siempre y cuando se sigan las siguientes condiciones:

• Se ha de dar reconocimiento a la autoría de la obra.

• No se puede utilizar esta obra con fines comerciales

• En el caso de realizarse una obra derivada, ésta sólo puede ser distribuida con una licencia igual a ésta

Este manual de Introducción al Diseño Web ha sido realizado por Francisco Javier Dávila Delgado, miembro de la Asociación de Diseño Web Y Seguridad de la Universidad de Cádiz en el año 2008.

59 INTRODUCCIÓN AL DISEÑO WEB

ASOCIACIÓN DISEÑO WEB Y SEGURIDAD - UNIVERSIDAD DE CÁDIZ

Page 64: Introducción Al Diseño Web