Tecnologías Web para la presentación
HTML(5)/XHTML
Aplicaciones Web/Sistemas Web
Juan Pavón Mestras
Dep. Ingeniería del Software e Inteligencia Artificial
Facultad de Informática
Universidad Complutense Madrid
Material bajo licencia Creative Commons
¿Qué es HTML?
HTML (HyperText Markup Language): Lenguaje con el que
se definen páginas Web
Permite describir el contenido de una página, incluyendo texto y otros
elementos (imágenes, videos, pequeñas aplicaciones, etc.)
Una página HTML consta de texto y marcas especiales que permiten
indicar algún tratamiento especial (estructura, formato, hiperenlace,
etc.)
Las marcas se indican en formato <marca>…</marca>
<html>
<head>
<title>Título de la página</title>
</head>
<body>
</body>
</html>
<h1>Título de sección</h1>
<p>Texto...</p>
<p>Texto <b>en negrita</b></p>
Juan Pavón - UCM 2012-13
HTML/XHTML
2
HTML vs. XHTML vs. HTML5
HTML: Lenguaje original
Basado en SGML (Standard Generalized Markup Language)
Es casi un lenguaje XML, pero tiene elementos no compatibles con
XML
Empieza a cobrar fuerza la idea de no mezclar marcado de estructura
(tabla, sección, encabezado, etc.) con marcado de presentación
(fuente, color, alineamiento, etc.)
HTML 4.01: Última versión publicada de HTML
Dos modos:
• Strict: no permite marcado de presentación
• Transitional: permite marcado de presentación
(center, font, align, bgcolor, …)
Framesets:
• Primera incorporación al estándar de la etiqueta <frameset>
(aunque ya se usaba comúnmente en Netscape)
Juan Pavón - UCM 2012-13
HTML/XHTML
HTML vs. XHTML vs. HTML5
XHTML: versión basada en XML de HTML 4.01
Compatibilidad con otros documentos XML
• Combinar con otros documentos en lenguajes basados en XML,
XForms, MathML, SMIL, SVG, etc.)
• Usar herramientas (XSLT)
XHTML es más estricto que HTML
• Exige que los documentos estén bien formados (requisito de XML)
• Se pueden validar con http://validator.w3.org/ o con HTML Tidy
http://www.w3.org/People/Raggett/tidy/
Hay herramientas que permiten pasar de HTML a XHTML
• Por ejemplo, el navegador Amaya (http://www.w3.org/Amaya/)
Juan Pavón - UCM 2012-13
HTML/XHTML
3
4
HTML vs. XHTML vs. HTML5
XHTML separa claramente contenido y presentación
XHTML Strict obliga a que la asignación del formato de presentación
se haga de manera separada mediante hojas de estilo CSS
Esta separación tiene ventajas:
• La gestión del estilo de todo el sitio web está localizada en un punto
concreto: las hojas de estilo
• Es posible modificar todo el estilo del sitio (manteniendo su coherencia) sin
editar todas sus páginas
• Se pueden tener varios estilos definidos para el mismo sitio web
• Los usuarios de un sitio web pueden seleccionar el conjunto de colores y
estilos (tema) del sitio web
• Soporte a la navegación desde múltiples dispositivos, adaptando las
páginas a sus características (tamaño de pantalla, etc.)
Contenido
+
Formato
(HTML)
vs.
Contenido
(XHTML)
+
Formato
(CSS)
Juan Pavón - UCM 2012-13
HTML/XHTML
HTML vs. XHTML vs. HTML5
Al estar basado en XML, XHTML permite integrar fácilmente
otros lenguajes de la familia XML
Mayor extensibilidad
XHTML tiene reglas más simples para definir la estructura de un
documento
Por ejemplo: todos los elementos tienen que estar bien anidados y
tener siempre la etiqueta de cierre
Menos recursos para procesar los documentos
• Ventaja para hacer navegadores más eficientes
Juan Pavón - UCM 2012-13
HTML/XHTML
5
6
HTML vs. XHTML vs. HTML5
HTML5: Evolución de XHTML y HTML 4.01
Es el estándar vigente a día de hoy
• XHTML 2.0 ha sido abandonado
• Desarrollado por el WHATWG, adoptado por el W3C
• Participación de Opera, Mozilla, Apple (a fecha de hoy)
Un paso más
• Construye sobre 'strict'; acaba con 'frameset' y 'transitional‘
• "Estándar viviente": W3C publica, pero WHATWG no para de añadir
• Añaden cosas y recomiendan no usar otras, pero quitan poco o nada
HTML5 vs. XHTML5
• "Un estándar, dos formas de escribir”
• La recomendación vigente es codificar en HTML5 (la transición hacia
navegadores optimizados para XML puro no ha funcionado).
Juan Pavón - UCM 2012-13
HTML/XHTML
HTML y XHTML
Versiones
HTML 4.01 (1999)
• http://www.w3.org/TR/html401/
XHTML 1.0 (2000, revisado en 2002)
• http://www.w3.org/TR/xhtml1/
XHTML 1.1 (2001)
• XHTML™ Basic 1.1 - Second Edition (2010)
• http://www.w3.org/TR/xhtml-basic/
• XHTML™ 1.1 - Module-based XHTML - Second Edition (2010)
• http://www.w3.org/TR/xhtml11/
HTML5 está en proceso de estandarización
Publicación oficial en 2014
Casi todos los navegadores soportan casi todas sus características
• Pero no todos: http://www.caniuse.com
Juan Pavón - UCM 2012-13
HTML/XHTML
7
8
Ejercicio
¿Cuál será el mejor lenguaje de marcado para móviles?
¿Qué características debería tener?
¿Qué opciones se están barajando hoy día?
Juan Pavón - UCM 2012-13
HTML/XHTML
9
DOM
Definido por W3C
Modelo de Objetos del Documento (Document Object Model)
DOM define objetos y propiedades de los elementos HTML y XML, y
los métodos para acceder a ellos
• Representación de documentos HTML y XML
• API para consultar y manipular los documentos (contenido,
estructura, estilo)
Los objetos de un documento se organizan en una jerarquía
(árbol): jerarquía DOM
var elemento=document.getElementById("intro");
var cabecera=document.getElemnentByTag("title");
// ...
Juan Pavón - UCM 2012-13
HTML/XHTML
10
Herramientas para crear una página Web
Mínimo
Un editor de texto
• Por ejemplo, Notepad++: http://notepad-plus-plus.org/
Algún navegador
• Para visualizar las páginas
Juan Pavón - UCM 2012-13
HTML/XHTML
11
Herramientas para crear una página Web
Recomendable
Editor de páginas Web
• Amaya: editor de referencia del W3C – http://www.w3.org/Amaya/
• Gratuitos: Netbeans, HTML-Kit, Kompozer, Nvu
• Comerciales: Adobe Dreamweaver, Microsoft Expression Web
Navegadores Web (varias versiones, varios SOs)
• Chrome, Firefox, Internet Explorer, Safari, Opera
• Tienen buenas herramientas para ayuda a desarrolladores
• Considerar navegadores en móviles (iOS, Android)
Editores gráficos y de imágenes
• GIMP, Adobe Photoshop
Herramienta de desarrollo para código de scripts o del servidor
• Eclipse, Netbeans, Aptana Studio 3
Servidor Web
• El que se vaya a utilizar
• Se puede usar Apache sobre Windows para desarrollo pero es
recomendable sobre Linux para implantación por mejor seguridad
Juan Pavón - UCM 2012-13
HTML/XHTML
12
Eclipse IDE for Java EE Developers
Entorno de desarrollo de software: http://www.eclipse.org/
Descargar la versión Eclipse IDE for Java EE Developers
Windows, Linux, Mac OS X
Muchos plugins
Java EE
Git
HTML 5
JavaScript
Maven
etc.
Juan Pavón - UCM 2013-14
Desarrollo de páginas web con eclipse
13
Creación de páginas web estáticas
(1) Crear un proyecto
File New Project…
• Seleccionar Web Static Web Project
• Indicar un nombre
• Al crear el proyecto web eclipse solicita cambiar la perspectiva
Juan Pavón - UCM 2013-14
Desarrollo de páginas web con eclipse
14
Creación de páginas web estáticas
(2) Crear una página HTML
En WebContent seleccionar New HTML File
• Seleccionar Web Static Web Project
• Indicar un nombre (por ejemplo, index.html)
• A continuación seleccionar la plantilla New HTML File (5)
Juan Pavón - UCM 2013-14
Desarrollo de páginas web con eclipse
15
Varias opciones de editor
Juan Pavón - UCM 2013-14
Desarrollo de páginas web con eclipse
16
Plantillas de páginas HTML5
Window Preferences
Abrir Web XML HTML Files items
Juan Pavón - UCM 2013-14
Desarrollo de páginas web con eclipse
17
Ejercicio: Instalar Eclipse IDE for Java EE
http://www.eclipse.org
Una vez instalado, probar a crear una página XHTML que
visualice el típico "Hola Mundo"
Validar la página en http://validator.w3.org/
Juan Pavón - UCM 2012-13
HTML/XHTML
18
Recomendaciones sobre los ficheros
Una página Web involucra muchos ficheros
Estructurar adecuadamente los ficheros en directorios
• En el raíz, index.html, index.xhtml o index.php
• /img
• /res
• etc.
Nombrar los ficheros sin caracteres extraños, ni espacios, etc. para
mayor compatibilidad entre sistemas operativos (Windows, Unix)
Ser consistente en el uso de la extensión de los ficheros
• .html o .xhtml
Para imágenes
Utilizar formatos estándar (PNG o JPEG) mejor que propietarios (GIF)
Comprobar que se adecúan al tamaño de la pantalla
Comprobar que su tamaño es moderado
En general, comprobar que la página se ve correctamente con
todos sus componentes remotamente
Pudiera haber referencias absolutas a ficheros locales en vez de
relativas
Juan Pavón - UCM 2012-13
HTML/XHTML
19
Fichero inicial
La configuración del servidor permite determinar el fichero que
se enviará cuando se recibe una petición genérica (del tipo
http://www.dominio.com)
index.html
index.xhtml
index.php
Juan Pavón - UCM 2012-13
HTML/XHTML
20
De las pruebas a la implantación del sitio Web
Las pruebas se realizan en un entorno de desarrollo local
Herramientas como DreamWeaver proporcionan un análisis bastante
exhaustivo del código
También se puede validar la corrección del documento en
http://validator.w3.org/
Firefox tiene el complemento HTML Validator
https://addons.mozilla.org/es/firefox/addon/html-validator/
La implantación debe ser sencilla: subir los ficheros al servidor
Requiere previamente la configuración del servidor
Subir contenidos nuevos/modificados
• Normalmente la herramienta de desarrollo automatiza este proceso
• Se suele utilizar una conexión ftp (segura preferiblemente)
Administración del sitio Web
Configuración
Monitorización
Estadísticas de uso
Juan Pavón - UCM 2012-13
HTML/XHTML
21
Alojamiento del sitio Web (Web hosting)
En un servid
Crear cuenta
Comentarios de: Tecnologías Web para la presentación HTML(5)/XHTML (0)
No hay comentarios