Arquitectura de la información 1: Edición con estándares web
Accesibilidad
La accesibilidad web se refiere a la capacidad de acceso a la Web y a sus contenidos por todas las personas independientemente de la discapacidad (física, intelectual o técnica) que presenten o de las que se deriven del contexto de uso (tecnológicas o ambientales). Esta cualidad está íntimamente relacionada con la usabilidad.
Cuando los sitios web están diseñados pensando en la accesibilidad, todos los usuarios pueden acceder en condiciones de igualdad a los contenidos. Por ejemplo, cuando un sitio tiene un código XHTML semánticamente correcto, se proporciona un texto equivalente alternativo a las imágenes y a los enlaces se les da un nombre significativo, esto permite a los usuarios ciegos utilizar lectores de pantalla o líneas Braille para acceder a los contenidos. Cuando los vídeos disponen de subtítulos, los usuarios con dificultades auditivas podrán entenderlos plenamente. Si los contenidos están escritos en un lenguaje sencillo e ilustrados con diagramas y animaciones, los usuarios con dislexia o problemas de aprendizaje están en mejores condiciones de entenderlos.
Si el tamaño del texto es lo suficientemente grande, los usuarios con problemas visuales puedan leerlo sin dificultad. De igual modo, el tamaño de los botones o las áreas activas adecuado puede facilitar su uso a los usuarios que no pueden controlar el ratón con precisión. Si se evitan las acciones que dependan de un dispositivo concreto (pulsar una tecla, hacer clic con el ratón) el usuario podrá escoger el dispositivo que más le convenga.
Herramientas de Accesibilidad Web
INTAV
INTAV (INTECO Accessibility Validator)es un servicio que analiza, de forma automática, el cumplimiento de los requisitos de accesibilidad Web en base a la normativa vigente y estándares (UNE 139803:2004 y WCAG).
De este modo, el servicio de INTAV revisa una página Web e informa sobre los problemas de accesibilidad detectados automáticamente, así como de las advertencias y observaciones que deberán ser comprobadas de forma manual.
El objetivo de INTAV es poder facilitar la revisión de algunos aspectos de accesibilidad de las páginas Web. Al automatizar el análisis se consigue optimizar las acciones y los esfuerzos dedicados en el análisis de accesibilidad de una página web.
HERA
HERA es una utilidad para revisar la accesibilidad de las páginas web de acuerdo con las recomendaciones de las Directrices de Accesibilidad para el Contenido Web 1.0 (WCAG 1.0). HERA realiza un análisis automático previo de la página e informa si se encuentran errores (detectables en forma automática) y qué puntos de verificación de las pautas deben ser revisados manualmente.
La revisión manual es imprescindible para comprobar realmente si la página es accesible. Para poder llevar a cabo esta verificación manual es necesario conocer las directrices de accesibilidad, saber cómo utilizan los usuarios las ayudas técnicas y tener alguna experiencia en diseño y desarrollo de páginas web.
HERA facilita la revisión manual proporcionando información acerca de los elementos a verificar, instrucciones sobre cómo realizar ese control y dos vistas modificadas de la página (una en modo gráfico, otra del código HTML) con los elementos más importantes destacados con iconos y colores distintivos.
Un formulario permite modificar los resultados automáticos, agregar comentarios a cada punto de verificación e indicar el nombre del revisor. También es posible generar un informe final sobre la revisión, para imprimir o descargar, en diversos formatos (XHTML, RDF y PDF).
Importante: Los datos se conservarán en la base de datos de Sidar por el término de 7 (siete) días a partir del inicio de la revisión. Durante ese lapso es posible retomar un trabajo utilizando la URL de la página resumen, que contiene el identificador de la revisión.
TAW
TAW (test de accesibilidad Web) es una herramienta, desarrollada por Fundación CTIC, que permite comprobar de forma automática ciertos aspectos de la accesibilidad Web. Sus destinatarios son los profesionales del diseño y desarrollo Web.
La herramienta TAW dispone de 2 modalidades de ejecución, bien como analizador online (desde su portal web), o como aplicación instalable de forma local.
El analizador TAW online funciona introduciendo una URL del sitio Web que se pretende analizar, generando un informe HTML con información sobre el resultado del análisis. El analizador online está disponible para las siguientes normativas:
Pautas de accesibilidad al Contenido Web 1.0 (WCAG 1.0)Pautas de accesibilidad al Contenido Web 2.0 (WCAG 2.0)Aplicaciones informáticas para personas con discapacidad. Requisitos de accesibilidad para contenidos en la Web (UNE 139803)Las diferentes normativas agrupan una serie de comprobaciones (llamadas puntos de verificación o criterios de éxito) en 3 niveles de accesibilidad A, AA, AAA. El cumplimiento de todos los puntos de verificación de un determinado nivel de accesibilidad permite declarar la conformidad en ese nivel.
La aplicación TAW, instalable de forma local, analiza únicamente las Pautas de accesibilidad al Contenido Web 1.0 (WCAG 1.0) pero incluye una seríe de características adicionales como son:
Análisis multipágina, logrando un análisis extenso del portal.Permite la revisión de las incidencias manuales, incluyendo añadir comentarios y modificar su validez.Informe resumen de accesibilidad de las páginas analizadas.Configuración individualizada de los puntos de verificación a analizar.Creación de verificaciones personalizadas.Reduce el tiempo de carga de las páginas web y la carga del servidor web
Al separar el contenido de la información sobre la presentación de una página web mediante CSS se logra reducir el tamaño de las páginas web y, por tanto, se reduce el tiempo de carga de las páginas web.
Disminuye los costes de desarrollo y mantenimiento
Aunque inicialmente aprender a hacer una página web accesible supone un coste (igual que supone un coste aprender a utilizar cualquier tecnología nueva), una vez se tienen los conocimientos, el coste de desarrollar y mantener una página web accesible es menor que frente a una no accesible, ya que una página web accesible es una página bien hecha, menos propensa a contener errores y más sencilla de actualizar.
Aumenta el número de potenciales visitantes de la página web
Esta es una razón muy importante para una empresa que pretenda captar nuevos clientes. Cuando una página web es accesible no presenta barreras que dificulten su acceso, independientemente de las condiciones del usuario. Una página web que cumple los estándares es más probable que se visualice correctamente en cualquier dispositivo con cualquier navegador.
Legislación
España
Ley 51/2003 de 2 de diciembre de Igualdad de Oportunidades, No Discriminación y Accesibilidad Universal con discapacidad.
Real Decreto 366/2007 de 16 de marzo, de accesibilidad y no discriminación de las personas con discapacidad en sus relaciones con la Administración General del Estado.
Ley 27/2007, de 23 de octubre, por la que se reconocen las lenguas de signos españolas y se regulan los medios de apoyo a la comunicación oral de las personas sordas, con discapacidad auditiva y sordociegas.
Real Decreto 1494/2007, de 12 de noviembre, por el que se aprueba el Reglamento sobre las condiciones básicas para el acceso de las personas con discapacidad a la sociedad de la información.
Ley 49/2007, de 26 de diciembre, por la que se establece el régimen de infracciones y sanciones en materia de igualdad de oportunidades, no discriminación y accesibilidad universal de las personas con discapacidad.
Normativa UNE 139803:2004
Llamada “Aplicaciones informáticas para personas con discapacidad. Requisitos de accesibilidad para contenidos en la Web”, proporciona soluciones accesibles para los desarrolladores Web, creando un listado de recursos que permiten definir las características que han de cumplirse en materia de los contenidos Web en Internet, Intranets y en cualquier otro tipo de redes informáticas, para que éstos puedan ser utilizados por el mayor número de personas, incluyendo las personas con discapadicad y las personas de edad avanzada.
Europa
eEurope 2002. "Accesibilidad de los sitios Web públicos y de su Contenido".eEurope 2005. "Una sociedad de la información para todos".La accesibilidad electrónica Bruselas, 13.09.2005.Normativa CWA 15554:2006
Llamada "Especificaciones para el esquema de la evaluación de la conformidad y marca de calidad sobre accesibilidad Web".
Pautas de Accesibilidad Web
El máximo organismo dentro de la jerarquía de Internet que se encarga de promover la accesibilidad es el World Wide Web Consortium (W3C), en especial su grupo de trabajo Web Accessibility Initiative (WAI). En 1999 el WAI publicó la versión 1.0 de sus pautas de accesibilidad Web. Con el paso del tiempo se han convertido en un referente internacionalmente aceptado. En diciembre del 2008 las WCAG 2.0 fueron aprobadas como recomendación oficial.
Estas pautas se dividen en tres bloques.
UAAG
Pautas de Accesibilidad para Agentes de Usuario
Están dirigidas a los desarrolladores de Agentes de usuario (navegadores y similares), para que estos programas faciliten a todos los usuarios el acceso a los sitios Web.
ATAG
Pautas de Accesibilidad para Herramientas de Autor
Están dirigidas a los desarrolladores del software que usan los webmasters, para que estos programas faciliten la creación de sitios accesibles.
WCAG
Pautas de Accesibilidad al Contenido en la Web
Están dirigidas a los webmasters e indican cómo hacer que los contenidos del sitio Web sean accesibles.
Ayudas Técnicas
Las siguientes son algunas de las tecnologías que usan los usuarios discapacitados para navegar de la web:
Un programa lector de pantalla, que puede leer usando síntesis de voz, los elementos que se muestran en el monitor (de gran ayuda para los usuarios con dificultades de aprendizaje o lectura), o que puede leer todo lo que está pasando en el PC (utilizado por los usuarios ciegos y de visión reducida).líneas Braille, que consiste en dispositivo hardware que convierte el texto en caracteres Braille.Un programa magnificador de pantalla que amplía lo que se muestra en el monitor de la computadora, haciéndolo más fácil de leer para los usuarios de visión reducida.Limitaciones
Las limitaciones en la accesibilidad de los sitios Web pueden ser:
Visuales: En sus distintos grados, desde la baja visión a la ceguera total, además de problemas para distinguir colores (Daltonismo).Motrices: Dificultad o la imposibilidad de usar las manos, incluidos temblores, lentitud muscular, etc, debido a enfermedades como el Parkinson, distrofia muscular, parálisis cerebral, amputaciones...Auditivas: Sordera o deficiencias auditivas.Cognitivas: Dificultades de aprendizaje (dislexia, discalculia, etc) o discapacidades cognitivas que afecten a la memoria, la atención, las habilidades lógicas, etc.CSS -Hoja de Estilo(Aparencia)
Las hojas de estilo en cascada (en inglés Cascading Style Sheets), CSS es un lenguaje usado para definir la presentación de un documento estructurado escrito en HTML o XML (y por extensión en XHTML). El W3C (World Wide Web Consortium) es el encargado de formular la especificación de las hojas de estilo que servirán de estándar para los agentes de usuario o navegadores.
La idea que se encuentra detrás del desarrollo de CSS es separar la estructura de un documento de su presentación.
Por ejemplo, el elemento de HTML <h1> indica que un bloque de texto es un encabezamiento y que es más importante que un bloque etiquetado como <H2>. Versiones más antiguas de HTML permitían atributos extra dentro de la etiqueta abierta para darle formato (como el color o el tamaño de fuente). No obstante, cada etiqueta <H1> debía disponer de la información si se deseaba un diseño consistente para una página y, además, una persona que lea esa página con un navegador pierde totalmente el control sobre la visualización del texto.
Cuando se utiliza CSS, la etiqueta <H1> no debería proporcionar información sobre como va a ser visualizado, solamente marca la estructura del documento. La información de estilo separada en una hoja de estilo, especifica cómo se ha de mostrar <H1>: color, fuente, alineación del texto, tamaño y otras características no visuales como definir el volumen de un sintetizador de voz, por ejemplo.
La información de estilo puede ser adjuntada tanto como un documento separado o en el mismo documento HTML. En este último caso podrían definirse estilos generales en la cabecera del documento o en cada etiqueta particular mediante el atributo "style".
Validador CSS
Verifica Hojas de Estilo en Cascada (CSS) y documentos (X)HTML con hojas de estilo.
Recomendaciones del W3C
Cascading Style Sheets, nivel 1 (CSS1), Diciembre de 1996
Propiedades de fuentes.Propiedades de color y fondo.Propiedades de texto. espaciado de palabras.alineación.Propiedades de caja. Margen.Borde.Relleno.Propiedades de clasificación. visualización.listas.Ilustración de propiedades de caja:
Margen (Margin) Borde (Border) Relleno (Padding) Contenido (Content)
Relleno (Padding)
Borde (Border)
Margen (Margin)
Si se define una caja con el atributo width (ancho), se interpreta por el modelo de caja del W3C como la anchura del contenido. La anchura del relleno y del borde se añaden a la anchura total del elemento.
En el modelo no puede especificarse el margen, el relleno o el borde, en la misma etiqueta, que el ancho del contenido. Otra posibilidad es usar un hack.
El uso de CSS en correos electrónicos con HTML
Los clientes de correo electrónico no soportan las hojas de estilos externas; la solución más recomendable es utilizar estilos CSS dentro de las etiquetas (inline). No existen estándares que los fabricantes de clientes de correo respeten para utilizar CSS en este contexto, pero hay algunos intentos de recopilar recomendaciones en base a la experiencia, manteniéndolos actualizados según salen al mercado nuevos clientes de correo.
Diagramado de página en CSS
Antes de que estuviera disponible CSS, la única forma de componer espacialmente una página era el uso de tablas. Aunque es una técnica cómoda y versátil, se está usando un elemento con una semántica particular, que es la de expresar información tabular, solamente por su efecto en la presentación.
La introducción de CSS ha permitido en muchos casos reemplazar el uso de tablas. Sin embargo CSS todavía no permite la versatilidad que ofrecían las tablas, lograr un diagramado de una página compleja suele ser una tarea difícil en CSS y las diferencias entre navegadores dificultan aún más la tarea. Se espera que futuros desarrollos en CSS3 resuelvan esta deficiencia y hagan de CSS un lenguaje más apto para describir la estructura espacial de una página.
Ventajas
Estilos
Estilo en Línea
Es un método para insertar el lenguaje de estilo de página, directamente, dentro de una etiqueta HTML. Esta manera de proceder no es totalmente adecuada. El incrustar la descripción del formateo dentro del documento de la página Web, a nivel de código se convierte en una tarea larga, tediosa y poco elegante de resolver el problema de la programación de la página. Este modo de trabajo se podría usar de manera ocasional si se pretende aplicar un formateo con prisa, al vuelo. No es todo lo claro o estructurado que debería ser, pero funciona. Este es el método recomendado para maquetar correos electrónicos en HTML.
Hoja Externa
Es una hoja de estilo que está incrustada dentro de un documento HTML. (Va a la derecha dentro del elemento <head>). De esta manera se obtiene el beneficio de separar la información del estilo, del código HTML propiamente dicho. Se puede optar por copiar la hoja de estilo incrustada de una página a otra, (esta posibilidad es difícil de ejecutar si se desea para guardar las copias sincronizadas). En general, la única vez que se usa una hoja de estilo interna, es cuando se quiere proporcionar alguna característica a una página Web en un simple fichero, por ejemplo, si se está enviando algo a la página web.
Hoja Interna
Es una hoja de estilo que está almacenada en un archivo diferente al archivo donde se almacena el código HTML de la página Web. Esta es la manera de programar más potente, porque separa completamente las reglas de formateo para la página HTML de la estructura básica de la página.
W3C
El World Wide Web Consortium, abreviado W3C, es un consorcio internacional que produce recomendaciones para la World Wide Web. Está dirigida por Tim Berners-Lee, el creador original de URL (Uniform Resource Locator, Localizador Uniforme de Recursos), HTTP (HyperText Transfer Protocol, Protocolo de Transferencia de HiperTexto) y HTML (Lenguaje de Marcado de HiperTexto) que son las principales tecnologías sobre las que se basa la Web.
Fue creada el 1 de octubre de 1994 por el mismo Berners-Lee. Está integrada por diversas empresas de Francia, Japón y otros países.
Estándares Web
Los estándares web son un conjunto de recomendaciones dadas por el World Wide Web Consortium (W3C) y otras organizaciones internacionales acerca de cómo crear e interpretar documentos basados en el Web.
Son un conjunto de tecnologías orientadas a brindar beneficios a la mayor cantidad de usuarios, asegurando la vigencia de todo documento publicado en el Web.
El objetivo es crear un Web que trabaje mejor para todos, con sitios accesibles a más personas y que funcionen en cualquier dispositivo de acceso a Internet.
El uso de estándares web y la separación entre estructura y presentación ofrece múltiples beneficios para hoy y mañana.
Hoy: Acceso a una mayor audiencia, menor costo de producción y cumplir con los requerimientos de accesibilidad.
Mañana: Reducir costos de mantenimiento, así como la dependencia de algún producto de software, flexibilidad para los cambios de presentación y una puerta abierta al uso de tecnologías como XML.
Diseño Estructural
Hasta ahora gran parte de los diseñadores web creaban sus documentos desde una perspectiva visual.
Luego de crear nuestro boceto, cortamos y decidimos cuantas tablas crear y en que celda insertaremos tal o cual parte del diseño. ¿Necesito un borde de color rojo?, no hay problema, ¡crearé una tabla dentro
de otra y listo!
Cuando se diseña utilizando estándares web se empieza con la estructura de un documento.
¿Cuales son las piezas de información?, este texto es un título, estos serán párrafos, aquí tengo una lista ordenada, la frase siguiente es una cita y aquí insertaré un subtítulo.
Primero se crea la estructura y luego el estilo, o apariencia.
En otras palabras, empezamos con la estructura del contenido y luego vamos trabajando el diseño visual, en vez de hacerlo al revés.
Esta forma de trabajo puede resultar extraña para todos aquellos acostumbrados a “dibujar” sus páginas web. Las ventajas de diseñar con estándares web compensarán con creces el tiempo invertido en aprender el nuevo método.
Consideremos el siguiente ejemplo:
Hemos creado un diseño en el cual tenemos un bloque de contenido, compuesto por texto e imágenes. Ese diseño se utiliza en veinte páginas diferentes del sitio. Nuestro cliente está de acuerdo en todo salvo que desea que el fondo del bloque no sea azul sino verde, que los textos empiecen un poco más a la derecha y… “Ah!, ¿Podríamos ver como queda con un borde fino marrón?”. Si trabajamos de la forma “tradicional” deberiamos abrir cada una de las veinte páginas, encontrar el código de las tablas y celdas correspondientes a la sección por modificar, cambiar algunos bgcolor, modificar el cell padding y, tristemente, crear una tabla dentro de otra si queremos “simular” un borde de un pixel.
Este cambio, repito, se debe realizar en cada una de las veinte páginas.
Cuando volvemos a visitar a nuestro cliente este nos dice: “Perfecto, pero podríamos probar con rojo en vez de verde y el borde en negro?”.
Creo que va quedando clara la idea.
Si hubieramos diseñado de acuerdo a estándares
web no deberiamos tocar el código HTML, bastaría con cambiar tres líneas en nuestro archivo CSS, algo como esto:
#contenido {
background-color: #336699;
padding-left: 5px;
border: 1px solid #336699;
}
El cambio se notaría automáticamente en todas las páginas usando ese estilo, sean veinte o mil, y no habría necesidad de una segunda reunión con nuestro cliente (todos sabemos que este proceso de revisión
y reuniones puede ser, a veces, interminable), los cambios se pueden hacer al instante.
Beneficios
Las ventajas de utilizar CSS (u otro lenguaje de estilo) son:
Control centralizado de la presentación de un sitio web completo con lo que se agiliza de forma considerable la actualización del mismo.
Los navegadores permiten a los usuarios especificar su propia hoja de estilo local que será aplicada a un sitio web, con lo que aumenta considerablemente la accesibilidad. Por ejemplo, personas con deficiencias visuales pueden configurar su propia hoja de estilo para aumentar el tamaño del texto o remarcar más los enlaces.
Una página puede disponer de diferentes hojas de estilo según el dispositivo que la muestre o incluso a elección del usuario. Por ejemplo, para ser impresa, mostrada en un dispositivo móvil, o ser "leída" por un sintetizador de voz.
El documento HTML en sí mismo es más claro de entender y se consigue reducir considerablemente su tamaño (siempre y cuando no se utilice estilo en línea).
Organización
Fue creada el 1 de octubre de 1994 por Tim Berners-Lee en el MIT, actual sede central del consorcio. Uniéndose posteriormente en abril de 1995 INRIA en Francia, reemplazado por el ERCIM en el 2003 como el huésped europeo del consorcio y Universidad de Keiō (Shonan Fujisawa Campus) en Japón en septiembre de 1996 como huésped asiatico. Estos organismos administran el consorcio, el cual está integrado por:
Miembros del W3C. A abril de 2010 contaba con 330 miembros.Equipo W3C (W3C Team) 65 investigadores y expertos de todo el mundo.Oficinas W3C (W3C Offices). Centros regionales establecidos en Alemania y Austria (oficina conjunta), Australia, Benelux (oficina conjunta), China, Corea del Sur, España, Finlandia, Grecia, Hong Kong, Hungría, India, Israel, Italia, Marruecos, Suecia y Reino Unido e Irlanda (oficina conjunta).La oficina española del W3C, establecida en el 2003, está albergada por la Fundación CTIC en el Parque Científico Tecnológico de Gijón (Principado de Asturias).
Oficinas W3C
Equipos W3C
Miembros del W3C
XHTML (Contenido)
¿Qué es XHTML?
XHTML (Lenguaje de Marcado de Hipertexto Extensible) es una versión más estricta y limpia de HTML , que nace precisamente con el objetivo de remplazar a HTML ante su limitación de uso con las cada vez más abundantes herramientas basadas en XML . XHTML extiende HTML 4.0 combinando la sintaxis de HTML, diseñado para mostrar datos, con la de XML, diseñado para describir los datos.
¿Para qué sirve?
Ante la llegada al mercado de un gran número de dispositivos, XHTML surge como el lenguaje cuyo etiquetado, más estricto que HTML, va a permitir una correcta interpretación de la información independientemente del dispositivo desde el que se accede a ella. XHTML puede incluir otros lenguajes como MathML , SMIL o SVG , al contrario que HTML.
¿Cómo funciona?
XHTML, al estar orientado al uso de un etiquetado correcto, exige una serie de requisitos básicos a cumplir en lo que a código se refiere. Entre estos requisitos básicos se puede mencionar una estructuración coherente dentro del documento donde se incluirían elementos correctamente anidados, etiquetas en minúsculas, elementos cerrados correctamente, atributos de valores entrecomillados, etc.
Validador XHTML / HTML
Verifica en el marcado (HTML, XHTML, ...) de los documentos Web.
Manual XHTML
Diferencias entre HTML y XHTML
La siguiente lista muestra algunas reglas de XHTML 1.0 que lo diferencian de HTML 4.01. Muchas de estas diferencias vienen con el cambio de ser una aplicación SGML a ser una aplicación del más estricto XML:
Los elementos vacíos deben cerrarse siempre:
Incorrecto: <br>Correcto: <br></br> o <br/> o <br />Nota: Cualquiera de las tres formas es válida en XHTML. Para compatibilidad según el "Apéndice C" debe usarse <br />.Los elementos no vacíos también deben cerrarse siempre:
Incorrecto: <p>Primer párrafo<p>Segundo párrafoCorrecto: <p>Primer párrafo</p><p>Segundo párrafo</p>Los elementos anidados deben tener un correcto orden de apertura/cierre (el que se abre último, debe cerrarse primero).
Incorrecto: <em><strong>Texto</em></strong>Correcto: <em><strong>Texto</strong></em>Los valores de los atributos deben siempre ir encerrados entre comillas (simples o dobles).
Incorrecto: <td rowspan=3>Correcto: <td rowspan="3">Correcto: <td rowspan='3'>Los nombres de elementos y atributos deben ir en minúsculas.
Incorrecto: <A HREF="http://www.domname.com">Domname</A>Correcto: <a href="http://www.domname.com">Domname</a>No está permitida la minimización de atributos (se usa el nombre del atributo como valor).
Incorrecto: <textarea readonly>Solo-lectura</textarea>Correcto: <textarea readonly="readonly">Solo-lectura</textarea>Los atributos desaprobados en HTML 4.01 no forman parte de XHTML.
Incorrecto: <font color="#0000FF">Blue text</font>Correcto: <span style="color: #0000FF;">Blue text</span>Reglas para DTDs estrictos
El texto no debe ser insertado directamente en el cuerpo (dentro de la etiqueta "body").
Incorrecto: <body>Texto plano</body>Correcto: <body><span>Texto plano</span></body>No se deben insertar elementos de bloque dentro de elementos de línea.
Incorrecto: <em><h2>Título</h2></em>Correcto: <h2><em>Título</em></h2>Apéndice
El estándar XHTML indica en un apéndice informativo una manera de escribir XHTML de modo tal que los navegadores actuales que sólo entienden HTML, lo procesen como si fuera éste. Para esto se deberá crear un documento con algunas restricciones y consideraciones, y servirlo con el "content-type" text/html, en vez del correcto para XHTML.
Algunas de las reglas propuestas para que XHTML "parezca" HTML son:
No usar instrucciones de proceso.Los elementos vacíos (como <br>) deberán escribirse <br />, es decir en forma abreviada y con un espacio antes de "/".No se debe utilizar la forma abreviada para elementos no vacíos que no tengan contenido, es decir: no se debe escribir <p/>.Para algunos autores, la inclusión de este apéndice en el estándar fue un error y consideran que es un error usar XHTML de esta manera.
Ventajas respecto del HTML
Las principales ventajas del XHTML sobre el HTML son:
Se pueden incorporar elementos de distintos espacios de nombres XML (como MathML y Scalable Vector Graphics).Un navegador no necesita implementar heurísticas para detectar qué quiso poner el autor, por lo que el parser puede ser mucho más sencillo.Como es XML se pueden utilizar fácilmente herramientas creadas para procesamiento de documentos XML genéricos (editores, XSLT, etc.).Etiquetas HTML
HTML consta de varios componentes vitales, incluyendo elementos y sus atributos, tipos de data, y la declaración de tipo de documento.
Elementos
Los elementos son la estructura básica de HTML. Los elementos tienen dos propiedades básicas: atributos y contenido. Cada atributo y contenido tiene ciertas restricciones para que se considere válido al documento HTML. Un elemento generalmente tiene una etiqueta de inicio (p.ej. <nombre-de-elemento>) y una etiqueta de cierre (p.ej. </nombre-de-elemento>). Los atributos del elemento están contenidos en la etiqueta de inicio y el contenido está ubicado entre las dos etiquetas (p.ej. <nombre-de-elemento atributo="valor">Contenido</nombre-de-elemento>). Algunos elementos, tales como <br>, no tienen contenido ni llevan una etiqueta de cierre. Debajo se listan varios tipos de elementos de marcado usados en HTML.
Estructura general de una línea de código en el lenguaje de etiquetas HTML.El marcado estructural describe el propósito del texto. Por ejemplo, <h2>Golf</h2> establece a "Golf" como un encabezamiento de segundo nivel, el cual se mostraría en un navegador de una manera similar al título "Marcado HTML" al principio de esta sección. El marcado estructural no define cómo se verá el elemento, pero la mayoría de los navegadores web han estandarizado el formato de los elementos. Un formato específico puede ser aplicado al texto por medio de hojas de estilo en cascada.
El marcado presentacional describe la apariencia del texto, sin importar su función. Por ejemplo, <b>negrita</b> indica que los navegadores web visuales deben mostrar el texto en negrita, pero no indica qué deben hacer los navegadores web que muestran el contenido de otra manera (por ejemplo, los que leen el texto en voz alta). En el caso de <b>negrita</b> e <i>itálica</i>, existen elementos que se ven de la misma manera pero tienen una naturaleza más semántica: <strong>enfásis fuerte</strong> y <em>énfasis</em>. Es fácil ver cómo un lector de pantalla debería interpretar estos dos elementos. Sin embargo, son equivalentes a sus correspondientes elementos presentacionales: un lector de pantalla no debería decir más fuerte el nombre de un libro, aunque éste esté en itálicas en una pantalla. La mayoría del marcado presentacional ha sido desechada con HTML 4.0, en favor de Hojas de estilo en cascada.
El marcado hipertextual se utiliza para enlazar partes del documento con otros documentos o con otras partes del mismo documento. Para crear un enlace es necesario utilizar la etiqueta de ancla <a> junto con el atributo href, que establecerá la dirección URL a la que apunta el enlace. Por ejemplo, un enlace a la Wikipedia sería de la forma <a href=”es.wikipedia.org”>Wikipedia</a>. También se pueden crear enlaces sobre otros objetos, tales como imágenes <a href=”enlace”><img src=”imagen” /></a>.
Atributos
La mayoría de los atributos de un elemento son pares nombre-valor, separados por un signo de igual "=" y escritos en la etiqueta de comienzo de un elemento, después del nombre de éste. El valor puede estar rodeado por comillas dobles o simples, aunque ciertos tipos de valores pueden estar sin comillas en HTML (pero no en XHTML). De todas maneras, dejar los valores sin comillas es considerado poco seguro. En contraste con los pares nombre-elemento, hay algunos atributos que afectan al elemento simplemente por su presencia (tal como el atributo ismap para el elemento img).
Estructura de las Etiquetas
<etiqueta atributo=“valor”>Texto visible </etiqueta>
Esto equivale a:
<p align=“right”>Párrafo alineado a la derecha</p>
Otras Etiquetas HTML
<EMBED SRC="url o ruta de archivo" VOLUME="50" HEIGHT="50" WIDTH="130">
Incorpora sonido con panel de control en la pantalla.
< object width="600" height="300">
<param name="movie" value="miarchivo.swf">
<embed src="miarchivo.swf" width="600" height="300">
</embed>
</object>
Para insertar una pelicula flash swf en html
<!-- Este es un comentario -->
Inserta comentarios no visibles en la página.
< iframe src ="/mipagina.html"> ... </iframe> >
Inserta un frame dentro de una página. Inline Frame.
< script type="text/javascript">
document.write("<h2>bienvenido!</h2>")
</script>
Inserta un script dentro de una página html.
<span style="color:#00FFFF;"> </span>
Aplica a un grupo de texto un estilo, por ejemplo font, tamaño, color.
Formas
<form></form>
Forma
<select name="name"></select>
Menú desplegable
<option>
Opción del menú desplegable
<textarea name="name" cols=40 rows=8></textarea>
Crea una caja de texto, columnas es el ancho y las lineas la altura (cols y rows)
<input type="checkbox" name="name">
Crea un checkbox.
<input type="radio" name="name" value="x">
Crea botón de radio.
<input type=text name="name" size=20>
Crea una opción de texto para entrada de información o despliegue
<input type="submit" value="name">
Crea botón de envío de forma tipo submit
<input type="image" border=0 name="name" src="name.gif">
Crea botón de envío con imagen
<input type="reset">
Crea botón de limpieza (reset). Vacía la forma
Atributos de Frames
<frame src="URL">
Especifica que página html se muestra
<frame name="name">
Nombra al frame para que sea identificado por otros frames y accesado
<frame marginwidth=#>
Margen izquierdo y derecho de un grame, debe ser igual o mayor que 1
<frame marginheight=#>
Margen superior e inferior de un grame, igual o mayor a 1
<frame scrolling=VALUE>
Determina si un frame tiene barra de desplazamiento, Puede ser yes, no, auto, el cual es por defecto
<frame noresize>
No permite al usuario modificar el tamaño de un frame
Marcos (frames)
<frameset></frameset>
Substituye a la etiqueta HTML body en documentos con frames. Puede insertarse en otros framesets
<frameset rows="value,value">
Número de lineas en un frameset, usando pixeles o porcentaje de ancho
<frameset cols="value,value">
Número de columnas en un frameset, usando pixeles o porcentaje de ancho
<frame>
Frame singular dentro de un framset
<noframes></noframes>
Texto que aparecerá en navegadores que no soportan frames
Atributos de Tablas
<table border=#>
Coloca contorno en las celdas de la tabla
<table cellspacing=#>
Espacio entre las celdas de una tabla
<table cellpadding=#>
Espacio entre el contorno de una celda y su contenido
<table width=# or %>
Ancho de la tabla, en pixeles o porcentaje del ancho de la página
<tr align=?> or <td align=?>
Alineación para las celdas, izquierda derecha, centro
<tr valign=?> or <td valign=?>
Alineación vertical de las celdas, arriba, abajo,enmedio
<td colspan=#>
Expansión de una celda, en número de columnas
<td rowspan=#>
Expansión de una celda, en número de celdas
<td nowrap>
Texto continuo dentro de una celda
Tablas
<table></table>
Crea tabla
<tr></tr>
Crea filas en una tabla
<td></td>
Crea celda en una fila
<th></th>
Encabezado de tabla, texto normal, negrita y centrado
Elementos Gráficos
<img src="name">
Incorpora una imagen
<img src="name" align=?>
Alinea la imagen: izquierda, derecha y centro
<img src="name" border=?>
Determina el contorno de la imagen. Un valor 0 no tendrá contorno
<map></map>
Mapa de imágenes
<body background="URL o ruta de archivo"></body>
Coloca la imagen como fondo de la página
<hr>
Linea horizontal
<hr size=?>
Tamaño de una linea horizontal
<hr width=?>
Ancho de linea horizontal, ya sea porcentaje o valor absoluto.
<hr noshade>
Linea horizontal sin sombra
Formato y presentación
<p></p>
Nuevo párrafo
<p align=?>
Alinea el párrafo hacia la izquierda, derecha o al centro
<br>
Inserta un interlineado suave. Crea otra línea
<blockquote>
</blockquote>
Texto indentado de ambos lados
<dl></dl>
Lista de definiciones (glosario)
<dt>
Precede a cada término en definiciones
<dd>
Precede cada definición
<ol></ol>
Lista ordenada
<li></li>
Entrada en una lista
<ul></ul>
Lista con viñetas sin ordenar
<div align=?>
Para formato a porciones grandes del documento html, incluyendo hojas de estilo
Enlaces
<a href="URL"></a>
Hipervínculo
<a href="mailto:EMAIL"></a>
Hipervínculo mailto (para envío de correo)
<a name="name"></a>
Ancla en el mismo documento
<a href="#name"></a>
Enlace hacia algún lugar dentro del mismo sitio
Etiquetas HTML de Texto
<pre></pre>
Texto pre-formateado
<hl></hl>
Título más grande
<h6></h6>
Título más pequeño
<b></b>
Negritas
<u></u>
Subrayado
<i></i>
Cursivas
<tt></tt>
Tipo máquina de escribir
<cite></cite>
Cita, en cursiva
<em></em>
Resalta una palabra, negrita o cursiva
<strong></strong>
Resalta una palabra o grupo de palabras
<font face=?></font>
Coloca el tipo de letra: por ejemplo, arial, verdana, courier,etc.
<font size=?></font>
Coloca tamaño de letra, de 1 a 7
<font color=?></font>
Configura el color, usand valor hexadecimal o nombre directo (blue, green, etc.)
Atributos de la etiqueta Body
<body bgcolor=?>
Configura el color de fondo de la página, usando el valor del código de color hexadecimal.
<body text=?>
Configura el color por defecto del texto, usando el valor del código de color hexadecimal.
<body link=?>
Configura el color de las ligas, usando el valor del código de color hexadecimal.
<body vlink=?>
Configura el color de las ligas visitadas, usando el valor del código de color hexadecimal
<body alink=?>
Configura el color de las ligas al darle clic, usando el valor del código hexadecimal.
Etiquetas del Encabezado
<title></title>
El título de la página web.
Lenguaje HTML Básico
<!DOCTYPE>
Es la primera parte de una página web, aún antes que la etiqueta <html>.
Le indica al navegador que especificación de HTML se está utilizando
HTML 4.01: los tipos de documento que define son: strict, transitional y frameset.
Strict
Se usa cuando se utilizan CSS.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
Transitional
Presenta elementos en proceso de transición de acuerdo a los estándares del W3C.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
Frames
Debe usarse en documentos que incluyen frames
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN" "http://www.w3.org/TR/html4/frameset.dtd">
<html></html>
Abre y cierra un documento HTML
<head></head>
Encabezado de la página - aquí se coloca titulo, metatags, e informacion para buscadores entre otras cosas. Está información no es visible.
<body></body>
Dentro de esta etiqueta va toda la parte visible de la página web.
Estructura de un Documento
<html>
<head>
Contenido que no se ve,, Afecta a la descrpicón de la página web, puede contener metadatos, etc.
Siempre tiene un <title> que aparece en la barra del navegador.
</head>
<body>
Material que se visualiza.
</body>
</html>
