Diseño de servicios Web Índice • • • • • • HTML HyperText Markup Language Conceptos básicos Historia y evolución de HTML XHTML vs. HTML HTML dinámico Hojas de estilo (CSS) DOM Diseño de servicios Web ¿Qué es HTML? 2 DATSI Conceptos básicos • Elemento HTML • Lenguaje de publicación en la Web de documentos de hipertexto – Permite especificar la organización lógica de documentos – Es independiente de la plataforma • Definido en SGML (Standard Generalized Markup Language, ISO 8879. 1986) – etiqueta + texto (<H2>texto</H2>) – Elementos “vacíos” (sin texto) (<BR>) – Elementos con atributos (<A HREF="X.html">texto</A>) • Estructura de documento:elementos HTML,HEAD y BODY <HTML> <HEAD> </HEAD> <BODY> </BODY> </HTML> – SGML es un metalenguaje – HTML es un lenguaje definido en SGML • Las etiquetas de HTML están especificadas en SGML – SGML es muy complejo – Precursor de XML Diseño de servicios Web HTML 3 DATSI Diseño de servicios Web 4 DATSI 1 Diseño de servicios Web Tipos de etiquetas • • • • • • • • • • • • • • Historia y evolución Título (<TITLE>) Cabeceras (<H1>, <H2>, ...) Formato de texto (<EM>, <STRONG>, ...) Párrafos (<P>) Listas (<UL>, <OL>, ...) Imágenes (<IMG>) Enlaces (<A>) Tablas (<TABLE>) Mapas (<MAP>) Formularios (<FORM>) Marcos (<FRAMESET>) Organización lógica del texto (<DIV> y <SPAN>) Scripts (<SCRIPT>) Hojas de estilo (<STYLE>) Diseño de servicios Web 5 • Controlado por World Wide Web Consortium (W3C) – http://www.w3.org/ • HTML 2.0 (propuesta de IETF RFC 1866, 1995) – Define núcleo básico de HTML • HTML 3.2 – Define el cuerpo principal de HTML: tablas, applets, etc. • HTML 4.0 – Desaconseja uso elem. o atrib. de formato (FONT,U,bgcolor) • Utilización de hojas de estilo (CSS) – Inclusión de marcos – Soporte a distintos idiomas – Mejoras en tablas, formularios y soporte de scripts – HTML 4.01 (diciembre de 1999) es la última versión • Parón en desarrollo de recomendaciones sobre HTML DATSI Diseño de servicios Web Situación actual: De HTML a XHTML – XML (eXtensible Markup Language, W3C, 9-2000) • SGML simplificado para uso en web (y otros) • Más regular y fácil de procesar pero igual de potente • Beneficios de XHTML: – Los de XML: rigor y flexibilidad con tratamiento simple – Facilita modularidad: • hacer extensiones • crear subconjuntos de funcionalidades – Documentos web más ricos sobre más plataformas – Convivencia de lenguajes basados en XML • XHTML, MathML, multimedia, comercio electrónico, etc. HTML 7 DATSI Transición de HTML a XHTML • ¿Compatibilidad documentos HTML y XHTML? • XHTML (eXtensible Hypertext Markup Language) • Redefinición de HTML en XML Diseño de servicios Web 6 DATSI – XHTML es más riguroso y regular – Navegadores han sido muy permisivos con páginas HTML • P. ej. aceptan mal anidamiento: <i><b>Hola</i></b> – Documentos XHTML sobre navegadores HTML • Casi compatible: Hay que seguir unas pocas reglas – Documentos HTML sobre navegadores XHTML: • Necesidad de transformación • Reglas básicas para la transformación de documentos: – – – – Etiquetas y atributos en minúsculas Etiquetas de fin obligatorias (</p> o </li>) Etiquetas sin cierre deben llevar carácter “/” (<br />) Valores de atributos entre comillas (<img src=“X.gif” />) • Herramientas automáticas de conversión: HTML Tidy Diseño de servicios Web 8 DATSI 2 Diseño de servicios Web XHTML Módulos en XHTML • XHTML es una familia de lenguajes • XHTML 1.0 (1-2000): El primer estándar – HTML 4.01 reformulado en XML – Tres variantes: • Strict. Documentos sin elem. o atrib. de formato • Transitional. Documentos con elem. o atrib. de formato • Frameset. Documentos con marcos • Modularización de XHTML (4-2001): – Entorno abstracto de modularización para lenguajes XHTML – Facilita extensión y definición de subconjuntos – Facilita convivencia con otros lenguajes estándar o propios • Perfil: XHTML + MathML + SVG (1-2003) – Perfiles de documentos (draft 9-1999): • Documento lleva asociado perfil (qué módulos requiere) • Negociación de contenido entre cliente-servidor Diseño de servicios Web 9 DATSI • • • • • • Módulo estructura: html, head, body, ... Módulo texto: h1, pre, div, ... Módulo hipertexto: a Módulo listas: dt, ol, li, ... Módulo presentación: b, i, tt, ... Módulos de formularios: form, input, select, ... – Distingue entre un módulo básico y uno completo • Módulos de tablas: tr, td, th, ... – Distingue entre un módulo básico y uno completo • Muchos otros módulos: – imágenes, mapas, marcos, scripts, hojas de estilo, ... Diseño de servicios Web Familia de lenguajes XHTML • HTML “clásico” – Uso en dispositivos con capacidad de presentación limitada – Usa conjunto limitado de módulos: • Tablas y formularios: sólo módulo básico • No incluye: presentación, scripts, marcos, etc. • XHTML 1.1 (5-2001): XHTML basado en módulos – Funcionalidad similar a XHTML 1.0 Strict pero con módulos • XHTML 2.0 (draft 5-2003): Próxima generación de XHTML Estructura mejorada e integración de nuevas tecnologías No asegura compatibilidad con versiones previas Elimina todos los aspectos de presentación (hojas de estilo) Extiende módulos de versión anterior y define nuevos Mejora en: facilidad de uso, accesibilidad, independencia de dispositivo de presentación, carácter internacional, etc. Diseño de servicios Web HTML DATSI HTML dinámico (DHTML) • XHTML Básico (12-2000): – – – – – 10 11 DATSI – Páginas estáticas – Formateo limitado y estático • HTML dinámico – Páginas dinámicas (“inteligentes”) – Formateo más “profesional” y dinámico • No es un estándar. Es un nombre comercial • Identifica a la combinación de un conjunto de tecnologías – – – – HTML CSS (Hojas de estilo) DOM (visión del documento con un modelo de objetos) Scripts (JavaScript, Jscript, VBScript) Diseño de servicios Web 12 DATSI 3 Diseño de servicios Web Evolución en el diseño de páginas • Especifica cómo se presenta una página • CSS (Cascading Style Sheets) (versión 2 en mayo 1998) • Cambio radical en el diseño de páginas – Lenguaje para definir estilos independiente de HTML • Antes: • CSS3 (dratf): Organiza en módulos CSS • Atributos de estilo que controlan propiedades sobre: – Diseñador debía conocer etiquetas HTML – Formato mediante etiquetas HTML (p.e. <FONT>) • Ahora: – Tres labores bastante independientes: • Contenido y estructura lógica de la página (XHTML) – No deberían usarse etiquetas de formato (p.e. <FONT>) • Estilo de la página (CSS) • Aspectos dinámicos de las páginas (DOM + scripts) Diseño de servicios Web 13 DATSI Inclusión de estilos <STYLE TYPE=“text/css”> definiciones de estilo </STYLE> • Desde un fichero (etiqueta LINK de HTML) <LINK REL=STYLESHEET TYPE=“text/css” HREF=“F.css”> • Asociado a un elemento HTML (atributo STYLE) – Poco recomendable pues mezcla estructura y formato <P STYLE=“color:red”> • Múltiples definiciones de estilo se acumulan: – Existen unas reglas de precedencia Diseño de servicios Web 15 – – – – “Caja” que contiene a un elemento (márgenes, bordes, ...) Fondo Color Fuente de texto • Permite también controlar cómo se posicionan elementos – Modelo de capas (atributo position) • Hojas de estilo se aplican al cargar la página (estático) – Pero pueden modificarse definiciones desde un script Diseño de servicios Web 14 DATSI Definiciones de estilo • Normalmente en cabecera • En el propio documento (etiqueta STYLE de HTML) HTML Hojas de estilo DATSI • Aplicada a un tipo de elemento H1 {color:red; font-size:14pt] • Aplicada a clase de elementos del mismo tipo (atributo CLASS) P.estrecho {margin-left:5em; margin-right:5em} <P CLASS=“estrecho”> • Aplicada a clase de elementos de distintos tipos .novedad {text-decoration:underline} <P CLASS=“novedad”> y <H3 CLASS=“novedad”> • Aplicada a elemento con un identificador único (atributo ID) #especial {font-size:20pt] <P ID=especial> • Selección por el contexto – Ejemplo de definición sólo para elementos EM dentro de párrafos P EM {color:red} Diseño de servicios Web 16 DATSI 4 Diseño de servicios Web Document Object Model (DOM) • DOM (Level 2 9-2000,Level 3 draft) Conjunto de interfaces para acceder y modificar documentos HTML y XML • Documento representado como árbol de objetos – Interfaces permiten navegar por la jerarquía – Herencia: Document, Element y Attribute derivan de Node • DOM organizado en módulos (mód. = cjto. de interfaces) – – – – Módulo Core (obligatorio): permite navegar en documento Otros módulos: HTML, Views, Style, Events, ... Implementación XML DOM: al menos módulo Core Implementación HTML DOM: al menos mód. Core + HTML • Ejemplos de propiedades y métodos de módulo Core – – – – Doc.documentElement.childNodes.item(2).nodeName Doc.documentElement.childNodes.item(2).attributes Doc.documentElement.getElementsByTagName(“clave“) Doc.documentElement.attributes.getNamedItem(“nivel”) Diseño de servicios Web 17 DATSI Ejemplo DOM con documento HTML <TABLE> <TBODY> <TR> <TD>Shady Grove</TD> <TD>Aeolian</TD> </TR> <TR> <TD>Over the River,Charlie</TD> <TD>Dorian</TD> </TR> </TBODY> </TABLE> Diseño de servicios Web HTML DOM – Incluye colecciones de objetos del mismo tipo • images: imágenes incluidas en el documento • lo mismo para links, forms, anchors, ... – HTMLHeadElement, HTMLLinkElement, HTMLTitleElement, HTMLBodyElement, HTMLFormElement, etc. • Ejemplos: – Métodos: document.forms.item(3).reset() – Propiedades: document.images.item(2).src – Sigue accesible funcionalidad Core: • document.documentElement.childNodes.item(1) HTML • Manipulación de página HTML cargada por navegador – Navegadores implementan HTML DOM – Acceso a través de scripts (p.ej. Javascript) • Manipulación de documento XML (XML DOM) • Nuevos elementos derivados de Element: 19 DATSI Uso de DOM • Extiende Core con funcionalidad específica para HTML • HTMLDocument deriva de Document: Diseño de servicios Web 18 DATSI – Parser autónomo (Microsoft XML parser, JAXP: Java API for XML Processing) – Navegadores también proporcionan XML DOM para cargar y procesar documentos XML desde scripts incluidos en la página HTML Diseño de servicios Web 20 DATSI 5