PDF de programación - Tecnologías Web para la presentación HTML(5)/XHTML

Imágen de pdf Tecnologías Web para la presentación HTML(5)/XHTML

Tecnologías Web para la presentación HTML(5)/XHTMLgráfica de visualizaciones

Publicado el 23 de Diciembre del 2018
340 visualizaciones desde el 23 de Diciembre del 2018
414,8 KB
46 paginas
Creado hace 6a (17/02/2014)
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
  • Links de descarga
http://lwp-l.com/pdf14663

Comentarios de: Tecnologías Web para la presentación HTML(5)/XHTML (0)


No hay comentarios
 

Comentar...

Nombre
Correo (no se visualiza en la web)
Valoración
Comentarios
Es necesario revisar y aceptar las políticas de privacidad