Diseño web con estándares

r

Mapa conceptual diseño de webs con estándaresPráctica número 4, mapa conceptual unidad 3.Por Carlota Alegre Garcia (Estudiante de periodismo y humanidades de la UPF)_____________________Fuentes principales- Apuntes Unidad 3 (Arquitectura de la Informació) . Powerpoints unidad 3.- Documento 6: Manual sobre XHTML.- Documento 7: Manual sobre CSS.- Powerpoints: Documento 4 (Accessibilidad).- tutorial arquitectura de la información.

a

(X)HTML

r

XHTML (eXtended HyperText Markup Language)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.

a

Historia

El origen de HTML se remonta a 1980, cuando el físico Tim Berners-Lee, trabajador del
CERN (Organización Europea para la Investigación Nuclear) propuso un nuevo sistema de
“hipertexto” para compartir documentos.

Caracterísitcas básicas

1.

En XHTML, las etiquetas, los atributos, los valores, etc., de cada elemento, excepto la declaración DOCTYPE, se escriben siempre en minúsculas.

2.

Los documentos XHTML deben tener los 3 elementos estructurales: <html>, <head> y <body>.

3.

El elemento <title> debe aparecer siempre en <head>.

4.

Todos los elementos deben tener una etiqueta de cierre. Las etiquetas sin contenido afectado, como <hr> se cierran o bien de este modo: <hr></hr> o bien con una sola etiqueta pero con una barra: <hr />.

5.

Los valores de los atributos deben ir siempre entre comillas, aunque sean valores simples.

6.

Las etiquetas se deben anidar correctamente. Por ejemplo, <strong><em>negritas y cursivas</em></strong> es correcto, pero <strong><em>negritas y cursivas</strong></em> no lo es porque están cruzadas entre ellas: en este caso, si la etiqueta <strong> es la primera, su etiqueta de cierre </strong> debe ser la última

Etiquetas

r

El proceso de indicar las diferentes partes que componen la información se denominamarcar (markup en inglés). Cada una de las palabras que se emplean para marcar elinicio y el final de una sección se denominan etiquetas. Aunque existen algunas excepciones,en general las etiquetas se indican por pares.

De apertura

carácter <, seguido del nombre de la etiqueta (sin espacios en blanco) y terminado con el carácter >.

De cierre

carácter <, seguido del carácter /, seguido del nombre de la etiqueta (sin espacios en blanco) y terminado con el carácter >.

Otras básicas

declaración técnica denominada DOCTYPE.

r

(<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">)- Un DTD es el conjunto de normas y restricciones que se definen para fijar la sintaxis quedeben cumplir los documentos de un determinado tipo.

title

r

No es el título que aparece en el cuerpo del documento, sino el título que aparece en la banda superior del navegador.

h1, h2

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

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árrafo)

strong: Para marcar un texto en negrita.

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

Para crear listas

Inicio: <ol>

para cada elemento lista: <il>

Enlaces

a páginas web

r

La etiqueta <a>...</a> marca el lugar donde, si se hace clic, se activará el enlace. Este lugar de activación del enlace se denomina anclaje de inicio. El atributo href indica cuál será el destino del enlace, por esa razón, se denomina anclaje de destino. El anclaje de destino es la página Web o la sección del documento que se mostrará en el monitor si se hace clic sobre el anclaje de inicio.

Anclaje: <a href>...</a>

a documentos del mismo ordenador

<p>Enlace a un documento en nuestro ordenador<br>
<a href="pag02.htm">Página n. 02</a></p>

Direcciones

Relativas

Las URL relativas prescinden de algunas partes de las URL para hacerlas más breves. Como se trata de URL incompletas, es necesario disponer de información adicional para obtener el recurso enlazado. En concreto, para que una URL relativa sea útil es imprescindible conocer la URL del origen del enlace.

Ejemplo: <p>Enlace a un documento en el mismo ordenador y en la misma carpeta<br>
<a href="pag002.htm">Página n. 002</a></p>

Absolutas

Las URL absolutas incluyen todas las partes de la URL (protocolo, servidor y ruta) por lo que no se necesita
más información para obtener el recurso enlazado.

Ejemplo: <p>Enlace a un documento en nuestro ordenador<br>
<a href="c:/mispaginasweb/documentos/pag002.htm">Página n. 002</a></p>

Estructura básica documento

<html>...</html>Un indicador inicial y final de que la página contiene código fuente XHTML.

<head>...</head>Un elemento de cabecera, inmediatamente después de la primera etiqueta <html>, y por tanto al inicio del documento, para contener datos descriptivos (metadatos) sobre el documento

<body>...</body>cuerpo del documento en sí

Atributos

Básicos

id = “texto” Identifica de forma única a cada elemento dentro de una página HTML

class = “texto” (Establece la clase CSS que se aplicará al elemento)

style = “estilos CSS“ (Establece de forma directa los estilos CSS de un elemento)

title = “texto” Establece el título a un elemento (mejora la accesibilidad y los navegadores lo muestran cuando el usuario pasa el ratón por encima del elemento)

Para internacionalización

lang = “codigo de idioma”. Indica el idioma del elemento mediante un código predefinido.

xml:lang = “codigo de idioma”. Indica el idioma del elemento. Tiene más prioridad que lang y es obligatorio incluirlo cuando se define el atributo lan

dir. Permite indicar la dirección del texto (útil para los idiomas que escriben de derecha a izquierda)

XHTML Y HTML

El lenguaje XHTML es muy similar al lenguaje HTML. De hecho, XHTML no es más que
una adaptación de HTML al lenguaje XML. Técnicamente, HTML es descendiente directo
del lenguaje SGML, mientras que XHTML lo es del XML (que a su vez, también es descendiente
de SGML).

Editores

1.

Editores de texto, como el Bloc de Notas.

2.

Editores de código fuente, como Dreamweaver en modo código.

3.

Editores en modo gráfico, como el propio programa Dreamweaver, pero en este caso en modo gráfico.

a
4.

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

Accessibilidad

Objetivo

El principal objetivo de la accesibilidad web es el de permitir a cualquier usuario, independientemente del tipo de discapacidad que sufra, el acceso a los contenidos del sitio y permitirle la navegación necesaria para realizar las acciones deseadas.

Limitaciones

Visuales

Auditivas

Motoras

Cognitivas

Ejemplo: Proyecto del W3C

Estrategias, guias, recursos para hacer la web mas accesible a la gente con dificultades.

La acessibilidad significa que la gente con dificultades pueda percibir, entender, navegar y interactuar con la web yq eu puedan además contribuir a la Web.

Antecendentes

Arquitectura

r

Edificios y ciudades accesibles: eliminación de barreras de acceso.

Multimedia

r

Films y programas de televisión para personas sordas. Films “explicados” para invidentes

Documentación

r

El libro fácil: libros con tipografía y redacción adecuados a diversos niveles cognitivos. Libros “leídos”.

Ventajas

Páginas compatibles con los próximos navegadores

Menores costes de mantenimiento
Menores costes de servidor.

Sitios que cumplen con la ley

Metadatos

¿Qué son?

Las páginas y documentos HTML incluyen más información de la que los usuarios ven en sus pantallas. Los datos que incluye la página relacionados con la propia página se denominan metainformación. Toda la metainformación se incluye en la sección de la cabecera, es decir, dentro de la etiqueta <head>

Etiqueta "Meta"

Tipos

Título de la página <title>Título del documento</title>. Es el dato desplegado en la barra superior del programa navegador. Es usado también por los motores de búsqueda para presentar el título de la página en los resultados de una búsqueda.

Palabras clave <meta name="keywords" content="palabra1, palabra2,…" /> Sirve para representar el contenido de la página, para indizar la página web por motores internos y por algunos motores de búsqueda.

Autor <meta name="autor" content="nombre" /> Para indicar el nombre del autor. Usado por motores de búsqueda

Título del enlace <a href="enlace" title="información del enlace">… </a>. Provoca la aparición de un recuadro explicativo cuando el usuario desplaza el cursor sobre el enlace. Usado también por lo motores de búsqueda para indizar la página

Descripción de la página <meta name="description" content="descripción del sitio o de la página" />. Es usado por los motores de búsqueda indizar el sitio y para presentar la descripción del sitio en los resultados de una búsqueda

Descripción

Permite definir el valor de los metadatos que forman la metainformación del documento.

CSS

a

¿Qué es?

Cascading Style Sheets (CSS) es la forma de controlar el aspecto de un documento XHTML, es decir, su presentación, es decir, cómo vamos a verlos en el monitor (o una en forma impresa).
- CSS permite controlar cómo debe interpretar el navegador cada elemento. Por ejemplo, podemos cambiar la forma en la cual se interpretan los elementos <h1>, <h2>, etc., o hacer que cambie la apariencia de los enlaces, etc.

El método es muy sencillo: se puede añadir, dentro del elemento <head> de un documento XHTML un par de etiquetas de estilo (<style>... </style>), dentro de las cuales podemos especificar el aspecto de los elementos de la página.

Ejemplo:body {font-family: Verdana, Arial; font-size: 12pt; margin-right: 15px; margin-left: 15px}

Enlaces

Básicos

Tamaño

{font-size: 22pt;}

Color

{color: #CC0000;}

Decoración

{text-decoration: none;}

Pseudo-enlaces

r

CSS define cuatro pseudo-clases que permiten aplicar estilos avanzados para los enlacesde los documentos. Las pseudo-clases permiten aplicar diferentes estilos a un mismoenlace en función de su estado: enlace no visitado, enlace visitado, enlace en el que sepasa el puntero del ratón por encima y enlace activo en ese momento.

:link, permite aplicar estilos para los enlaces que aún no han sido pinchados.

:visited, aplica estilos a los enlaces que han sido pinchados anteriormente (el navegador del usuario elimina automáticamente el historial de enlaces visitados cada cierto tiempo).

:hover, estilos que muestra el enlace cuando el usuario posiciona el puntero del ratón sobre el enlace.

:active, estilos que se aplican al enlace cuando el usuario está pinchando sobre el enlace (el tiempo durante el que se aplica este estilo es muy breve)

Sintaxis

Se indica el nombre de elemento cuyo aspecto deseamos especificar, por ejemplo, body. Este elemento, en CSS se denomina selector. Después del selector hay un espacio, y entre corchetes ({…}) se indica la propiedad, por ejemplo, font-family, después, dos puntos (:), y el valor de la propiedad, por ejemplo, verdana. Si hay más de una propiedad, se separan mediante punto y como (;) y se cierra la declaración con corchetes como ya hemos visto ({…}). Finalmente, todas las declaraciones de estilo se encierran entre las etiquetas <style>…</style>. Es aconsejable indicar la propiedad type="text/css" en la etiqueta de apertura, de modo que la pareja de etiquetas recomendable es ésta:
<style type="text/css">…</style>.

Recursos útiles

Extensiones de Firefox

r

Las principales ventajas de Firefox desde el punto de vista del diseñador y creador de páginas web es que respeta los estándares del WC3. Además, permite instalar pequeños añadidos, llamados extensiones,que añaden funcionalidades al navegador.Una extensión se puede considerar como un pequeño programa que se instala dentro del navegador y que añade alguna característica interesante. La mayoría son gratuitas y de gran utilidad.

Firebug

Firebug es probablemente la extensión más útil y completa de todas las que están relacionadas con el diseño web. No importa si tu especialidad es XHTML, CSS, JavaScript, DOM o Ajax, ya que Firebug proporciona toda la información posible sobre cada uno de estos temas. Como Firebug tiene tantas opciones, lo mejor es instalar la extensión y probarla
en tus proyectos web.

Web Developer

Antes de que existiera Firebug, la extensión Web Developer era la más útil para los diseñadores web. Se trata de una barra que se instala junto con el resto de herramientas del navegador y que básicamente se puede utilizar para obtener información sobre la página. Además de proporcionar información, la extensión Web Developer incluye utilidades que Firebug todavía no incorpora, como la redimensión de la ventana del navegador a las dimensiones estándar, recuadrar todos los elementos de un determinado tipo (celdas de tabla, divs, etc.), mostrar una lupa, una regla redimensionable, mostrar los elementos de tipo hidden, mostrar la ruta de cada imagen, etc.

HTML Validator

Una buena práctica, y un requisito impuesto por muchos clientes, es que las páginas XHTML creadas sean válidas y por tanto, pasen el validador de HTML y de CSS disponible en el W3C. Para facilitar la validación de las páginas, esta extensión indica en todo momento
los errores y las recomendaciones sobre el código HTML de la página que muestra el navegador.

Otras

MeasureIt

Permite medir la altura y anchura de cualquier elemento de la página.

ColorZilla

permite obtener los colores de cualquier elemento de la página mediante una herramienta similar a la de los programas de diseño gráfic.

Conclusiones

Ventajas

Contenido compatible con

1.

Diferentes agentes de usuario

2.

Futuros agentes de usuario

3.

Futuras formas de procesamiento y explotación

Extraordinaria facilidad de mantenimiento

Optimización SEO

Accesibilidad

Para el profesional, plus de competitividad diferencial

Requerimientos

Familiaridad con los estándares web

Lenguajes de marcado (XML, XHTML)

Formatos de presentación (XSL, CSS)

Metadatos

Validación

Uso de tecnologías adecuadas

Producen código fuente sin errores

Analizan el código fuente

Separan contenido de presentación

Políticas de control de calidad

Libros de estilo

Auditorias y evaluación