4.1 Presentación

Los objetivos de este módulo son:

Aprender a crear páginas web con tablas e imágenes.
Aprender a válidar el código HTML para crear páginas web correctas.
Aprender las principales novedades de HTML5.

4.2 ¿Estas escribiendo bien tus pagina?

Ya has aprendido muchas cosas, ya sabes escribir páginas web sencillas pero, ¿estás escribiendo bien tus páginas?

"Klaro, este testo lo puedes entender, quisas alla errores que te confundan, pero si lo bes dos vezes seguro que lo entiendes."

Con las páginas web ocurre lo mismo, pueden tener errores que hagan que los navegadores se confundan y no interpreten correctamente nuestras páginas

Después de todo el esfuerzo invertido en crear una página web, ¿te gustaría que un navegador web mostrase algo distinto de lo que tú has querido hacer? Para evitarlo debes escribir páginas web correctas: páginas bien estructuradas y sin errores.

4.3 HTML: Juego de caracteres

El juego de caracteres, también llamado codificación de caracteres, es la pesadilla de la mayoría de los informáticos porque es una fuente de problemas inagotable.

En el siguiente vídeo se muestran ejemplos reales de problemas con el juego de caracteres y se proporcionan los consejos más importantes para trabajar con el juego de caracteres:

Utiliza siempre el mismo juego de caracteres.
Utiliza UTF-8 sin BOM.
Diferencias entre ISO-8859-1 (Latin1) e ISO-8859-15 (Latin9).
Cómo se indica el juego de caracteres en HTML (etiqueta meta).
Diferencias entre HTML4, XHTML1 y HTML5.

Recomendación para juego de caracteres : UTF-8 sin BOM, ISO-8859-1 (Latin 1), ISO-8859-15 (Latin 9) si necesitas colocar el símbolo del euro.

4.4 HTML: el juego de caracteres y los editores de texto

En el siguiente vídeo se explica qué es UTF-8 sin BOM (Byte Order Mark) y con BOM y se muestran los habituales problemas con los editores de texto.

Representación en hexadecimal BOM son 3 bytes (EF BB BF) = ï >> ¿ en caracteres

4.5 HTML: Tablas

En el siguiente vídeo se explican las etiquetas básicas para crear tablas en HTML (table, tr, th, td) y las etiquetas avanzadas (thead, tbody, tfoot, caption, colgroup, col).

Link relacionados:

http://www.hotdesign.com/seybold/spanish/

http://www.desarrolloweb.com

http://www.webestilo.com

http://www.w3schools.com/html/html_tables.asp

4.6 HTML: Imágenes

En el contenido del siguiente vídeo verás:

El concepto de hipermedia, la etiqueta img, sus atributos obligatorios (src, alt), opcionales (width, height, longdesc, ismap, usemap) y los atributos desaconsejados.
Las características de los formatos gráficos (GIF, JPG/JPEG, PNG), los mapas de imagen y su uso (map, area, atributos usemap e ismap).

Consejos atributos de manejo de imágenes obsoleto align, border, hspace, vspace, body background, table background, se realizan ahora con CSS.

4.7 HTML: Validación de código

Debes ver el vídeo "HTML: validación del código" en el que:

Se explica la validación del código HTML.
Se muestran las diferentes versiones que existen de HTML.
Se explica qué es el DOCTYPE y qué valor de DOCTYPE se debe usar.
Se muestra una lista de DOCTYPEs populares.
Se presentan los servicios de validación más populares, como W3C Markup Validator, WDG HTML Validator, Validator.nu.
Se realiza una demostración de validación de tres páginas.

Link relacionados:

http://www.w3.org/QA/2002/04/valid-dtd-list.html (Uso del Doctype)

http://validator.w3.org/ (Validador de codigo de una pagina web)

http://www.htmlhelp.com/tools/validator/ (Validador de codigo de una pagina web)

https://html5.validator.nu/ (Validador de codigo de una pagina web)

Video: HTML5: ¿Por qué es importante escribir código correcto? (1/3)

Video: HTML5: ¿Por qué es importante escribir código correcto? (2/3)

Video: HTML5: ¿Por qué es importante escribir código correcto? (3/3)

4.8 HTML5: Introducción

El 28 de octubre de 2014 el W3C publicó "HTML5. A vocabulary and associated APIs for HTML and XHTML. W3C Recommendation 28 October 2014", en dicha fecha, lo que supone que HTML5 ya tiene el rango de estándar.

¿Significa esto que ya se puede utilizar HTML5 sin problemas? No, algo ha cambiado, ya tenemos una versión estable de HTML5, pero eso no significa que de un día para otro todos los navegadores web lo soportarán mágicamente. Los navegadores web actuales, y no digamos los que tienen varios años, no soportan muchas cosas de HTML5, así que se debe utilizar con precaución.

En el siguiente vídeo se comenta la nueva versión de HTML5, los problemas de compatibilidad que pueden existir con los navegadores y se ofrecen algunos consejos para aprender HTML5.

Link para chequear la compatibilidad con HTML 5

http://html5test.com/

http://caniuse.com/

http://www.wufoo.com.mx/html5/

Video ¿Cuál es el mejor: HTML, XHTML, HTML5?

http://diveintohtml5.info/ (Para aprender HTML5)

http://diveinto.html5doctor.com/ (Para aprender HTML5 esta actualizada)

http://www.w3schools.com/

http://idesweb.es/

4.9 HTML5: ¿Qué es HTML5?

En el siguiente vídeo verás las principales tecnologías de la familia HTML5:

HTML5.
Canvas.
SVG.
Geolocalización.
Caché.
Base de datos.
Web workers.

Link para ver la compatibilidad de los navegadores con las versiones de HTML, CCS

http://caniuse.com/

4.10 HTML5: de HTML4 a HTML5

HTML5 incorpora nuevas etiquetas semánticas que definen la estructura de una página web. En el siguiente vídeo se presentan estas etiquetas y se explica cómo transformar una página web de las versiones antiguas de HTML a la nueva versión HTML5.

Link relacionado:

https://translate.google.co.ve/translate?hl=es&sl=en&u=https://en.wikipedia.org/wiki/Span_and_div&prev=search

4.11 Los formularios en HTML5

HTML5 incorpora novedades muy interesantes para la creación de formularios. Estas novedades aumentan los tipos de controles (se añade un control para introducir una fecha o un correo electrónico) y las características que se pueden configurar (se puede definir un patrón de entrada o un placeholder) pero hay que llevar cuidado al usarlas, ya que no todos los navegadores las aceptan todas por ahora (pero sí que lo harán en breve).

En las siguientes lecciones se resumen las novedades principales y se muestran algunos ejemplos. Si quieres complementar y contrastar lo que se explica, te recomendamos la lectura de Formularios en HTML5.

4.12 HTML5: Nuevas funcionalidades en formularios (parte 1)

En el siguiente vídeo se presentan los nuevos controles de HTML5:

url.
tel.
email.
number.
color.
search.
range.
datetime.
datetime-local.
date.
month.
week.
time.

Además, se comenta el soporte por parte de los navegadores y se muestra la representación de algunos controles en dispositivos móviles.

Link relacionado:

http://www.w3.org/html/logo/

http://www.comocreartuweb.com/curso-de-html/formularios-con-html5/placeholder.html

4.13 HTML5: Nuevas funcionalidades en formularios (parte 2)

En el siguiente vídeo se presentan los nuevos atributos que se pueden emplear en los controles de los formularios:

autocomplete.
autofocus.
min.
max.
step.
pattern.
placeholder.
required.

También se explica qué es Modernizr y los polyfills.

Link relacionado:

https://modernizr.com/

https://github.com/Modernizr/Modernizr/wiki/HTML5-Cross-browser-Polyfills (Cuando el navegador no soporta algun comando de HTML5)

4.14 HTML5: Ejemplo de formulario
En este vídeo verás un ejemplo de formulario en HTML5. Recuerda que los nuevos controles de formulario de HTML5 es una de sus mejores características.

4.15 Los navegadores web son buenos pero tontos. ¿Por qué?

Los navegadores web son programas muy complejos que deben ser capaces de interpretar y representar las páginas web, que cada vez emplean tecnologías más complejas y avanzadas.
Los navegadores web deben ser "buenos" pues deben manejar cualquier página web, aunque contenga errores (que suele ser lo normal, lo extraño es encontrar una página web que no contenga errores). Pero los navegadores web a veces son "tontos" y no son capaces de interpretar correctamente una página web cuando contiene muchos errores. Cuando esto ocurre la página se puede mostrar de una forma incorrecta.

Para evitar esta situación es muy importante que escribas correctamente el código HTML. En las próximas lecciones vas a aprender a validar el código HTML para localizar y corregir los errores que puedan tener tus páginas web.

4.16 HTML5: ¿Por qué es importante escribir código correcto? (1/3)

En este vídeo se explican las principales causas por las que una página web no se ve igual en todos los navegadores:

Fallos de los navegadores.
Problemas de compatibilidad entre los navegadores.
Soporte de HTML por los navegadores.
Errores en el código HTML.

4.17 HTML5: ¿Por qué es importante escribir código correcto? (2/3)

En este vídeo se muestran algunos ejemplos de errores en el código HTML:

Etiqueta <b> sin cerrar.
Etiqueta <span> sin cerrar.
Comillas del valor de un atributo sin cerrar (2 versiones).
Valor del atributo size de la etiqueta "input" incorrecto.

4.18 HTML5: ¿Por qué es importante escribir código correcto? (3/3)

En este vídeo se explica qué es el DOM (Document Object Model) y por qué es la razón por la que los navegadores muestran una página de diferentes formas cuando tiene un error.

Link relacionado

http://www.w3.org/2005/03/DOM3Core-es/introduccion.html

4.19 Presentación del proyecto

Los objetivos del proyecto de este módulo son:

Mejorar el sitio web con la incorporación de nuevos elementos como las tablas, las imágenes y los nuevos controles de formulario de HTML5.
Comprobar que todas las páginas web están correctamente escritas y no presentan errores.
Publicar en Internet el sitio web formado por varias páginas conectadas mediante enlaces.

MÓDULO 4: Cómo se escribe una página web correcta

Objetivos

Mejorar el sitio web con la incorporación de nuevos elementos como las tablas, las imágenes y los nuevos controles de formulario de HTML5.
Comprobar que todas las páginas web están correctamente escritas y no presentan errores.
Publicar en Internet el sitio web formado por varias páginas conectadas mediante enlaces.

Qué tengo que hacer

En este módulo tienes que mejorar las páginas de tu sitio web con la incorporación de nuevos elementos, como las tablas y las imágenes.

Recuerda que las tablas no las tienes que utilizar para distribuir el contenido en tus páginas web: las tablas son para mostrar datos tabulados, no para maquetar el contenido de las páginas web. La maquetación se realizará mediante CSS (Cascading Style Sheets), la tecnología que se explicará en la segunda parte de este curso. Si quieres saber más cosas sobre esto te recomendamos la lectura de Porqué diseñar con tablas es estúpido: problemas definidos, soluciones ofrecidas.

También puedes mejorar los formularios de tu sitio web con la incorporación de los nuevos controles que añade HTML5. HTML5 ya es un estándar, fue publicado como recomendación el 28 de octubre de 2014 (HTML5 - A vocabulary and associated APIs for HTML and XHTML), pero eso no significa que todas sus características se puedan emplear: no todos los navegadores actuales admiten las nuevas características y por supuesto existe un problema de compatibilidad con los navegadores antiguos. Por tanto, antes de usar una nueva característica te recomendamos que consultes algún sitio web en el que puedas comprobar el grado de compatibilidad de las nuevas características de HTML5:

Por último, en este proyecto también te pedimos que escribas páginas web válidas, páginas web que se ajustan al estándar. Muchas personas han aprendido a hacer páginas web por la simple observación de cómo están hechas las páginas web y eso ha conducido a que se repitan malas prácticas. En el artículo Obsolete practices to avoid se indican algunas cosas que no se deben hacer en las páginas web porque son erróneas o han quedado obsoletas (ya no tiene sentido hacerlas). Al principio de este artículo se indica un problema que se da muchas veces:

Many people learned HTML, CSS, and JavaScript by viewing the source of pages and then copying and pasting them, without considering whether or not the original site was well implemented. This means that they have perpetuated coding practices that might have been necessary in the past, but are irrelevant now.This article tries to list older coding practices that over time have become unnecessary or bad practices.

Traducido al español:

Muchas personas aprendieron HTML, CSS y JavaScript mediante la visualización del código fuente de las páginas y luego copiaban y pegaban el código, sin tener en cuenta si el sitio web original estaba bien implementado. Esto significa que se han perpetuado prácticas de codificación que podrían haber sido necesarias en el pasado, pero que son irrelevantes ahora.

Tienes que aprender a utilizar las herramientas que te pueden ayudar a validar el código HTML de tus páginas web. Por ejemplo, te recomendamos que utilices Markup Validation Service del W3C.

Por último, no te olvides de publicar en Internet tu sitio web.

AVISO IMPORTANTE

Este documento, su texto y gráficos e imágenes, puede ser utilizado bajo una licencia Creative Commons de tipo Atribución, No-Comercial. En caso de utilizarse este material o de la creación de un derivado, la atribución se debe respetar citando la fuente como “Actívate, Google España 2014” y expresamente, si es posible, mediante un enlace activo a http://google.es/activate. Revisado, marzo 2014.

4.20 ¿Y ahora qué?

Si has llegado hasta aquí y has leído todas las lecciones, has visto todos los vídeos y has hecho todos los ejercicios debes de haber aprendido muchas cosas, pero el haber llegado hasta aquí no es el final de tu aprendizaje, más bien es el principio.

Todavía te quedan muchas cosas por aprender de HTML. Gracias a este curso tienes una base para seguir aprendiendo por tu cuenta. Pero quedan muchas más cosas que vas a aprender con nosotros, pero eso será en la segunda parte de este curso.

4.21 HTML: ¿migrar a un nuevo juego de caracteres?

Debes ver el vídeo "HTML: ¿migrar a un nuevo juego de caracteres?" en el que plantean diferentes posibilidades ante el problema de migrar o no migrar un sitio web que ya existe a otro juego de caracteres.