Diseño web con estándares

Lenguaje de marcado HTML

Definición

r

XHTML es el lenguaje con el cual están hechas las páginas web. La página web que vemos en el navegador es el resultado de la interpretación que el navegador hace de un documento escrito mediante el lenguaje XHTML. Este documento se denomina código fuente. El lenguaje XHTML se compone de un número de etiquetas que sirven para marcar contenidos de la página e indicar cómo debe mostrarlos el navegador.Los detalles concretos sobre qué etiquetas se pueden utilizar en una página Web y cómo se utilizan esas etiquetas están establecidos en una norma internacional denominada XHTML (eXtended HyperText Markup Language) de cuya publicación se encarga un consorcio internacional denominado World Wide Web Consortium.

Elementos

Etiquetas básicas

<html>...</html>

r

Indicador inicial y final de que la página contiene código fuente XHTML.

<head>...</head>

r

Elemento de cabecera. Se encuentra inmediatamente después de la primera etiqueta <html>, y por tanto al inicio del documento, para contener datos descriptivos sobre el documento.

<body>...</body>

r

Es el cuerpo del documento, lo que vemos en mayor medida en el navegador.

Otras etiquetas

<title>...</title>

En "head"

r

Es el título que aparece en la barra superior del navegador.

En "body"

r

Es el título que aparece dentro de la página del documento Web.

<h1>...</h1>

r

Las etiquetas h1, h2, etc., significan literalmente cabecera (o sea, títulos) de nivel 1, nivel 2, etc. Son los diferentes niveles de títulos que aparecen en el cuerpo de muchos documentos relativamente complejos y que deben presentar su contenido más o menos organizado por capítulos, subcapítulos, etc. XHTML proporciona hasta 6 de estos niveles (h1, h2, …, h6).

<hr>...<hr />

r

Línea horizontal. Traza una línea horizontal. No necesita etiqueta de cierre, pero hay que incluir una barra inclinada al final: <hr />

<p>...</p>

r

Organiza los contenidos bajo esta etiqueta en un párrafo.

Marcadores de texto

<strong>...</strong>

r

Para marcar un texto en negrita. El término proviene del inglés "fuerte" y hace referencia al hecho de marcar con más consistencia un elemento.

<em>...</em>

r

Abreviatura de “énfasis”. Marca un texto en cursiva.

Listas

<ol>...</ol>

r

Esta etiqueta hace referencia a "ordered list" y se coloca a principio y a final de un texto que se desea organizar en forma de lista en la que cada ítem lleva un número delante (1,2,3...).

<ul>...</ul>

r

Esta etiqueta hace referencia a "unordered list" y se coloca a principio y a final de un texto que se desea organizar en forma de lista. No obstante, los elementos de la lista no están numerados.

<li>

r

Cada ítem de la lista lleva esta etiqueta.

DOCTYPE

r

Todo documento XHTML debe incluir una declaración técnica denominada DOCTYPE. En el caso del lenguaje más utilizado actualmente en la creación de páginas web se trata de la siguiente:<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

Aclaración idioma

r

Por las pretensiones de carácter universal de la Web, es importante declarar explícitamente el lenguaje principal del documento, cosa que se hace añadiendo un atributo al elemento <html>:<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="es" lang="es">

Metadatos

r

Se colocan en la sección <head> y son un conjunto de etiquetas que informan sobre el contenido, autor del documento, palabras clave que describen su contenido, etc.

Enlaces hipertextuales

<a href="http://www.upf.edu">...</a>;

r

Su función es la de enlazar la página que estamos creando con otra web.

<a href="pag02.htm">...</a>

r

Su función es la de enlazar la página que estamos creando con un documento que tenemos en nuestro ordenador.

<title>...</title>

r

Sirve para poner título a los enlaces. Un título que se verá cuando, dentro del navegador, se coloque el cursor encima del enlace. Ejemplo:<p><a href=”http://allmovie.com” title="Biofilmografías de realizadores y actores y fichas de films">AllMovie</a><br />

a

Creación de un documento HTML

Editores de texto

Bloc de Notas

Editores de código fuente

Dreamweaver (modo código)

a

Editores en modo gráfico

Dreamweaver (modo gráfico)

a

Gestores de contenido

r

Programas mediante los cuales la edición se realiza principalmente mediante el uso de formularios y la selección de opciones de menú.

Buenas prácticas en el código

Declarar un Doctype

Usar etiquetas significativas e intuitivas

Utilizar metadatos descriptivos para ayudar al SEO

Estructurar bien el código fuente, con espacios y separaciones convenientes

Intentar unificar estilos en las CSS

Otras recomendaciones

Guía 1

Guía 2

a

Recursos

W3Schools

Alistapart

Google Books

Google Académico

Scirus

Softonic

a

Standards W3C

Hojas de estilo CSS

Definición

r

Hojas de Estilo en Cascada (Cascading Style Sheets), es un mecanismo simple que describe cómo se va a mostrar un documento en la pantalla, o cómo se va a imprimir, o incluso cómo va a ser pronunciada la información presente en ese documento a través de un dispositivo de lectura. Esta forma de descripción de estilos ofrece a los desarrolladores el control total sobre estilo y formato de sus documentos.

Funcionamiento

r

CSS funciona a base de reglas, es decir, declaraciones sobre el estilo de uno o más elementos. Las hojas de estilo están compuestas por una o más de esas reglas aplicadas a un documento HTML o XML. La regla tiene dos partes: un selector y la declaración. A su vez la declaración está compuesta por una propiedad y el valor que se le asigne.h1 {color: red;} h1 es el selector{color: red;} es la declaración.

Selector

r

El Selector especifica que elementos HTML van a estar afectados por esa declaración, de manera que hace de enlace entre la estructura del documento y la regla estilística en la hoja de estilo.

Declaración

r

La Declaración que va entre corchetes es la información de estilo que indica cómo se va a ver el selector. En caso de que haya más de una declaración se usa punto y coma para separarlas.

Atributo y valor

r

Dentro de la declaración, la Propiedad o Atributo define la interpretación del elemento asignándosele un cierto Valor, que puede ser color, alineación, tipo de fuente, tamaño..., es decir, especifican qué aspecto del selector se va a cambiar.

Tipos

r

La información CSS se puede proporcionar por varias fuentes, ya sea adjunto como un documento por separado o incorporado en el documento HTML, y dentro de estas posibilidades destacan tres formas de dar estilo a un documento web.

Hoja de estilo externa

r

La Hoja de Estilo Externa se almacena en un archivo diferente al del archivo con el código HTML al cal estar vinculado a través del elemento link, que debe ir situado en la sección head. Es la manera de programar ms eficiente, ya que separa completamente las reglas de formato para la página HTML de la estructura básica de la página.

Hoja de estilo interna

r

La Hoja de Estilo Interna est incorporada a un documento HTML, a través del elemento style dentro de la sección head, consiguiendo de esta manera separar la información del estilo del código HTML.

Estilo en línea

r

El Estilo en Línea sirve para insertar el lenguaje de estilo directamente dentro de la sección body con el elemento style. Sin embargo, este tipo de estilo no se recomienda pues se debe intentar siempre separar el contenido de la presentación.

Contenidos y selectores

Guía de referencia

a

Ventajas

Se puede guardar por separado al documento en sí

Es aplicable a muchos documentos

Mejor control en la presentación de un sitio web

Aumento de la accesibilidad de los usuarios

r

Es gracias a que pueden especificar su propia hoja de estilo, permitiéndoles modificar el formato de un sitio web según sus necesidades, de manera que por ejemplo, personas con deficiencias visuales puedan configurar su propia hoja de estilo para aumentar el tamaño del texto.

Ahorro global en el ancho de banda

r

Ya que la hoja de estilo se almacena en caché después de la primera solicitud y se puede volver a usar para cada página del sitio, no se tiene que descargar con cada página web. Por otro lado, quitando todo lenguaje de marcado en la presentación en favor del uso de CSS reduce su tamaño y ancho de banda hasta más del 50%, esto beneficia al dueño del sitio web con menos ancho de banda y costes de almacenamiento, as como a los visitantes para los cuales las páginas se van a cargar más rápido.

Permiten adaptación a varios dispositivos

r

Una página puede tener diferentes hojas de estilo para mostrarse en diferentes dispositivos, como pueden ser impresoras, lectores de voz o móviles.

Servicio validación CSS

a

Practicar con CSS

a

Accesibilidad

Definición

r

Comprende el conjunto de estrategias, recomendaciones y recursos que hacen accesible la web a personas con discapacidades para que puedan percibir, comprender, navegar e interactuar con cualquier página. También permite el acceso a los contenidos de una web a través de dispositivos de capacidad limitada como móviles o agendas electrónicas.

Recomendaciones

Niveles de adecuación

Prioridad 1

r

Formada por aquellos requisitos que el sitio web tiene que satisfacer obligatoriamente para que los internautas con necesidades especiales puedan acceder a la información.

Nivel de Conformidad A

Prioridad 2

r

Consta de aquellas características que el sitio web debe cumplir para facilitar su accesibilidad.

Nivel de Conformidad AA

Prioridad 3

r

Engloba aquellos requisitos que la página web puede seguir para optimizar aún más la accesibilidad de la gente que visita la web.

Nivel de Conformidad AAA

Barreras

Malas prácticas en la estructuración de contenidos

Ausencia metadatos (etiquetas y atributos)

Ventajas

Incremento audiencia y visibilidad

Más compatibilidad con navegadores

Webs más coherentes y fáciles de navegar

Se cumple totalmente con la legislación actual

Calcular accesibilidad

Tawdis