presentación

En las semanas anteriores, has aprendido los

conceptos básicos sobre la creación de páginas web.
Algunas cosas importantes, como el juego de
caracteres o la validación del código HTML, no las
hemos explicado para facilitarte el aprendizaje.
Pero esta semana ya toca, tienes que aprender a
realizar páginas web correctas. Además, esta semana,
vas a aprender a incluir elementos nuevos en una
página web, vas a aprender a crear tablas para
mostrar datos tabulados y vas a aprender a insertar
imágenes. En las próximas semanas, aprenderás a
insertar otros elementos multimedia, como, por
ejemplo, los vídeos.
Por último, también vas a aprender las principales
novedades que incorpora HTML5, la última versión de
HTML.
Espero que disfrutes aprendiendo todo lo que hemos
preparado.
 Crear tablas para datos tabulados te
será de gran ayuda para acumular datos
y llevar a cabo un mejor análisis de
estos. Añadir imágenes puede serte de
gran ayuda ya que hará tu página web
más atractiva al usuario que la visite.
Html: juego de
caracteres
¿Alguna vez el nombre de un fichero o su contenido no
lo has podido ver bien al moverlo de un sistema
operativo a otro? ¿Alguna vez has instalado un
programa y no se visualizaban correctamente algunos
caracteres? ¿Alguna vez te han dado un justificante, un
extracto bancario o un recibo en el que no se
mostraban correctamente algunos caracteres? ¿Alguna
vez has entrado en una página web y te aparecían
caracteres chinos cuando la página no estaba en
chino? Si alguna vez has sufrido un problema parecido
y te has sentido solo, porque pensabas que eras el
único al que le pasaba, no te preocupes, porque no
estaba solo. Mucha gente como tú sufre estos
problemas todos los días.
Sin duda alguna, en el campo de la informática, el
juego de caracteres es de las cosas más simples, que
más problemas ocasiona. Mapa de caracteres, ASCII,
ISO-8859-1, Latín-1, ANSI, UTF 8, UTF-8 sin BOM,
Unicode, Cotejamiento… menudo lío.
¿Qué significa toda esta sopa de términos? A muchos
experimentados informáticos las palabras juego de
caracteres les produce horribles pesadillas.
Para que a ti tampoco te produjese pesadillas y
entendieses correctamente qué es el juego de
caracteres, tendría que empezar por el principio, por la
primera descripción conocida de un sistema de
numeración binario que se debe a un matemático
hindú del siglo tercero antes de nuestra era.
Después te tendría que explicar el sistema binario
moderno fue documentado en su totalidad, por el gran
matemático Leibniz, en el siglo 17.
Leibniz utilizó el 0 y el 1, al igual que el sistema de
numeración binario actual. Y después, te tendría que
contar muchas otras cosas más pero este no es el
momento. Ya te las contaré en otro vídeo, en este
vídeo solo te voy a dar la solución fácil.
La regla más importante es muy fácil de recordar:
utiliza siempre el mismo juego de caracteres en todo lo
que hagas. ¿Qué significa esto en una aplicación web?
Significa que todos los ficheros que compongan tu sitio
web deben estar almacenados en el mismo juego de
caracteres, tus ficheros HTML, CSS, JavaScript, de
texto, etcétera, pero también en tus páginas PHP y
cualquier fichero de texto que leas desde PHP, y
también los datos que estén almacenados en tu base
de datos y también la conexión que establezcas con tu
base de datos y, si embocas a un servicio web que te
devuelve datos en formato xml o json, pues lo mismo,
los datos que te devuelva también tienen que estar en
el mismo juego de caracteres.
Html: juego de
caracteres
Sencillo, ¿verdad? Pues no es tan sencillo porque esto
muchas veces es imposible de lograr, no porque no se
pueda, sino porque no depende de nosotros, lo normal
es que en un escenario real nos encontremos con algo
parecido a esto. Un escenario en el que no puedes
utilizar el mismo juego de caracteres en todos los
elementos de tu sistema y, normalmente el problema
suele convertirse en algo muy grave, con solución,
pero muy costosa.
En ese momento es cuando te toca llamar al
informático para que te solucione el problema pero, no
a un informático que se dedica a instalar el Windows o
a cambiar tarjetas gráficas, no, a un informático de
verdad.
¿Qué juego de caracteres debo usar? Yo te recomiendo
UTF-8 sin BOM, es la solución a todos los problemas y
te permite mezclar en un mismo documento textos en
cualquier idioma, es decir, te permite mezclar
caracteres de cualquier alfabeto pero absolutamente
sin ningún problema.
Si no puedes utilizar UTF-8 sin BOM por alguna razón,
entonces te recomiendo ISO-8859-1 también llamado
Latin1. Después de UTF-8 es el mejor juego de
caracteres para los idiomas de europa occidental,
incluido el español.
Pero si necesitas escribir el símbolo del euro, entonces
debes utilizar ISO-8859-15, también llamado Latin9.
Latin1 y Latin9 se diferencian únicamente en 8
caracteres que han cambiado, y el único realmente
importante para el español, es la sustitución de un
carácter que seguramente, nunca has usado, por el
símbolo del euro.
¿Cómo indicó el juego de caracteres en HTML? Se
realiza mediante una etiqueta meta, que se escribe en
el head, en la cabecera de la página web, pero
depende de la versión de HTML que estés utilizando. Si
estás utilizando HTML 4 debes utilizar esta sintaxis, si
estás utilizando XHTML 1, debes utilizar alguna de
estas dos sintaxis. Además, si empleas un juego de
caracteres diferente a UTF-8, también tendrás que
indicar el juego de caracteres mediante la declaración
de documentos xml, al principio de la página web.
Y por fin llegamos a HTML 5, ¿cómo será en HTML 5?
¿Más fácil, más complicado? En HTML5 se ha
intentado hacer el lenguaje HTML más sencillo, así
que, han simplificado la forma de indicar el juego de
caracteres y ahora es algo tan sencillo como esto, o
esto.
Después de este vídeo, no espero que ya no veas el
juego caracteres como un lío, en realidad no te
explicado las razones de que sea un lío, pero sí que te
he dado dos consejos: utiliza siempre el mismo juego
de caracteres en todo lo que hagas y si puedes, utiliza
el juego de caracteres UTF-8 sin BOM.

Html: juego de
caracteres
Sencillo, ¿verdad? Pues no es tan sencillo porque esto
muchas veces es imposible de lograr, no porque no se
pueda, sino porque no depende de nosotros, lo normal
es que en un escenario real nos encontremos con algo
parecido a esto. Un escenario en el que no puedes
utilizar el mismo juego de caracteres en todos los
elementos de tu sistema y, normalmente el problema
suele convertirse en algo muy grave, con solución,
pero muy costosa.
En ese momento es cuando te toca llamar al
informático para que te solucione el problema pero, no
a un informático que se dedica a instalar el Windows o
a cambiar tarjetas gráficas, no, a un informático de
verdad.
¿Qué juego de caracteres debo usar? Yo te recomiendo
UTF-8 sin BOM, es la solución a todos los problemas y
te permite mezclar en un mismo documento textos en
cualquier idioma, es decir, te permite mezclar
caracteres de cualquier alfabeto pero absolutamente
sin ningún problema.
Si no puedes utilizar UTF-8 sin BOM por alguna razón,
entonces te recomiendo ISO-8859-1 también llamado
Latin1.
Después de UTF-8 es el mejor juego de caracteres para
los idiomas de europa occidental, incluido el español.
Pero si necesitas escribir el símbolo del euro, entonces
debes utilizar ISO-8859-15, también llamado Latin9.
Latin1 y Latin9 se diferencian únicamente en 8
caracteres que han cambiado, y el único realmente
importante para el español, es la sustitución de un
carácter que seguramente, nunca has usado, por el
símbolo del euro.
¿Cómo indicó el juego de caracteres en HTML? Se
realiza mediante una etiqueta meta, que se escribe en
el head, en la cabecera de la página web, pero
depende de la versión de HTML que estés utilizando. Si
estás utilizando HTML 4 debes utilizar esta sintaxis, si
estás utilizando XHTML 1, debes utilizar alguna de
estas dos sintaxis. Además, si empleas un juego de
caracteres diferente a UTF-8, también tendrás que
indicar el juego de caracteres mediante la declaración
de documentos xml, al principio de la página web.
Y por fin llegamos a HTML 5, ¿cómo será en HTML 5?
¿Más fácil, más complicado? En HTML5 se ha
intentado hacer el lenguaje HTML más sencillo, así
que, han simplificado la forma de indicar el juego de
caracteres y ahora es algo tan sencillo como esto, o
esto.
Después de este vídeo, no espero que ya no veas el
juego caracteres como un lío, en realidad no te
explicado las razones de que sea un lío, pero sí que te
he dado dos consejos: utiliza siempre el mismo juego
de caracteres en todo lo que hagas y si puedes, utiliza
el juego de caracteres UTF-8 sin BOM.
Html: el juego de los caracteres
y los editores de texto
En un vídeo anterior, ya te hablé del juego de
caracteres y de los típicos problemas que ocasiona en
las páginas web. En este vídeo te daba dos consejos:
utiliza siempre el mismo juego de caracteres en todo lo
que hagas y utiliza UTF-8 sin BOM, que te permite
mezclar en un mismo documento, textos en cualquier
idioma.
Pero ya te avisé en el otro vídeo, hay que saber mucho,
mucho más, ya que, cuando las cosas empiezan a ir
mal, estos dos consejos no son la solución para todos
los problemas.
Hace unos días recibí el siguiente correo: “Estoy
probando lo del juego de caracteres usando notepad
Plus Plus, en el vídeo recomiendas usar UTF-8 sin
BOM. Resulta que el fichero lo tengo con codificación
ANSI pero si lo cambio a UTF-8 sin BOM, el disquete de
guardar no se me marca, es decir, no se ha modificado
el fichero. Entonces, marco UTF-8, se marca el
disquete y guardo. Ahora selecciono UTF-8 sin BOM.
Se me marca el disquete y guardo (un pequeño
chanchullo para que me permitiese guardar UTF-8 sin
BOM)”.
Y el correo continuaba: “y ahora viene el tema si
guardado en UTF-8 sin BOM, cuando cierro el fichero y
lo vuelvo a abrir la codificación que me marca es ANSI.
¿Es normal? También veo convertir a UTF-8 sin BOM,
además de codificar en UTF-8 sin BOM. ¿Cuál es la
diferencia?”
primero vamos a ver qué es eso del BOM. BOM es el
acrónimo de Byte Order Mark, la marca de orden de
bytes y es un carácter Unicode que se utiliza para
indicar el orden de los bytes de un fichero de texto al
principio del fichero. Básicamente, existen dos órdenes
de bytes, el Little-endian y el Big-endian, que definen
de qué forma se almacenan los datos que ocupan más
de un byte en el ordenador. ¿Confuso? Si, puede ser
muy confuso, ya sabes para solucionar los problemas
con los juegos de caracteres hay que saber mucho.
Volviendo al BOM, en el caso de UTF-8, es un carácter
unicode que ocupa 3 bytes y que tiene esta
representación en hexadecimal y aparece
representado de esta forma como carácter. Quiero que
te acuerdes muy bien de lo que pone aquí EF, BB, BF y
de su representación en forma de carácter porque
ahora después la volveremos a ver.
Html: el juego de los caracteres
y los editores de texto
¿Cuál es el problema de todo esto? Lo mejor es utilizar
UTF-8, nos evitamos problemas, podemos escribir
cualquier carácter, podemos mezclar todos los idiomas
del mundo, pero UTF-8 lleva el BOM, esos tres bytes al
principio del fichero y hay programas que no se llevan
muy bien con el BOM. Por ejemplo, PHP 5, no tiene un
soporte completo de UTF-8. Si vamos a trabajar con
PHP 5, debemos de utilizar UTF-8 sin BOM. Voy a
realizar una demostración práctica con el editor
Notepad Plus Plus para que lo entiendas mejor. Te voy
a mostrar un problema típico que aparece cuando
trabajamos con UTF-8 y con PHP 5.
Estoy en Notepad Plus Plus y he preparado tres
ficheros de ejemplo para mostrarte el problema. Por
un lado, tenemos este fichero html.html que contiene
solamente código HTML. Luego, tenemos este fichero
php.php que contiene esta instrucción de PHP: un eco,
párrafo (esto lo escribe PHP) que lo único que hace es
escribir esta cadena de texto, esta cadena HTML. Y por
último, tenemos este fichero también en php,
phpfile.php, que lo único que hace es emplear la
instrucción include, include de PHP,
Y el correo continuaba: “y ahora viene el tema si
guardado en UTF-8 sin BOM, cuando cierro el fichero y
lo vuelvo a abrir la codificación que me marca es ANSI.
¿Es normal? También veo convertir a UTF-8 sin BOM,
además de codificar en UTF-8 sin BOM. ¿Cuál es la
diferencia?”
primero vamos a ver qué es eso del BOM. BOM es el
acrónimo de Byte Order Mark, la marca de orden de
bytes y es un carácter Unicode que se utiliza para
indicar el orden de los bytes de un fichero de texto al
principio del fichero. Básicamente, existen dos órdenes
de bytes, el Little-endian y el Big-endian, que definen
de qué forma se almacenan los datos que ocupan más
de un byte en el ordenador. ¿Confuso? Si, puede ser
muy confuso, ya sabes para solucionar los problemas
con los juegos de caracteres hay que saber mucho.
Volviendo al BOM, en el caso de UTF-8, es un carácter
unicode que ocupa 3 bytes y que tiene esta
representación en hexadecimal y aparece
representado de esta forma como carácter. Quiero que
te acuerdes muy bien de lo que pone aquí EF, BB, BF y
de su representación en forma de carácter porque
ahora después la volveremos a ver.

Html: tablas
Sencillo, ¿verdad? Pues no es tan sencillo porque esto
muchas veces es imposible de lograr, no porque no se
pueda, sino porque no depende de nosotros, lo normal
es que en un escenario real nos encontremos con algo
parecido a esto. Un escenario en el que no puedes
utilizar el mismo juego de caracteres en todos los
elementos de tu sistema y, normalmente el problema
suele convertirse en algo muy grave, con solución,
pero muy costosa.
En ese momento es cuando te toca llamar al
informático para que te solucione el problema pero, no
a un informático que se dedica a instalar el Windows o
a cambiar tarjetas gráficas, no, a un informático de
verdad.
¿Qué juego de caracteres debo usar? Yo te recomiendo
UTF-8 sin BOM, es la solución a todos los problemas y
te permite mezclar en un mismo documento textos en
cualquier idioma, es decir, te permite mezclar
caracteres de cualquier alfabeto pero absolutamente
sin ningún problema.
Si no puedes utilizar UTF-8 sin BOM por alguna razón,
entonces te recomiendo ISO-8859-1 también llamado
Latin1.
Después de UTF-8 es el mejor juego de caracteres para
los idiomas de europa occidental, incluido el español.
Pero si necesitas escribir el símbolo del euro, entonces
debes utilizar ISO-8859-15, también llamado Latin9.
Latin1 y Latin9 se diferencian únicamente en 8
caracteres que han cambiado, y el único realmente
importante para el español, es la sustitución de un
carácter que seguramente, nunca has usado, por el
símbolo del euro.
¿Cómo indicó el juego de caracteres en HTML? Se
realiza mediante una etiqueta meta, que se escribe en
el head, en la cabecera de la página web, pero
depende de la versión de HTML que estés utilizando. Si
estás utilizando HTML 4 debes utilizar esta sintaxis, si
estás utilizando XHTML 1, debes utilizar alguna de
estas dos sintaxis. Además, si empleas un juego de
caracteres diferente a UTF-8, también tendrás que
indicar el juego de caracteres mediante la declaración
de documentos xml, al principio de la página web.
Y por fin llegamos a HTML 5, ¿cómo será en HTML 5?
¿Más fácil, más complicado? En HTML5 se ha
intentado hacer el lenguaje HTML más sencillo, así
que, han simplificado la forma de indicar el juego de
caracteres y ahora es algo tan sencillo como esto, o
esto.
Después de este vídeo, no espero que ya no veas el
juego caracteres como un lío, en realidad no te
explicado las razones de que sea un lío, pero sí que te
he dado dos consejos: utiliza siempre el mismo juego
de caracteres en todo lo que hagas y si puedes, utiliza
el juego de caracteres UTF-8 sin BOM.

Html: imágenes
Sencillo, ¿verdad? Pues no es tan sencillo porque esto
muchas veces es imposible de lograr, no porque no se
pueda, sino porque no depende de nosotros, lo normal
es que en un escenario real nos encontremos con algo
parecido a esto. Un escenario en el que no puedes
utilizar el mismo juego de caracteres en todos los
elementos de tu sistema y, normalmente el problema
suele convertirse en algo muy grave, con solución,
pero muy costosa.
En ese momento es cuando te toca llamar al
informático para que te solucione el problema pero, no
a un informático que se dedica a instalar el Windows o
a cambiar tarjetas gráficas, no, a un informático de
verdad.
¿Qué juego de caracteres debo usar? Yo te recomiendo
UTF-8 sin BOM, es la solución a todos los problemas y
te permite mezclar en un mismo documento textos en
cualquier idioma, es decir, te permite mezclar
caracteres de cualquier alfabeto pero absolutamente
sin ningún problema.
Si no puedes utilizar UTF-8 sin BOM por alguna razón,
entonces te recomiendo ISO-8859-1 también llamado
Latin1.
Después de UTF-8 es el mejor juego de caracteres para
los idiomas de europa occidental, incluido el español.
Pero si necesitas escribir el símbolo del euro, entonces
debes utilizar ISO-8859-15, también llamado Latin9.
Latin1 y Latin9 se diferencian únicamente en 8
caracteres que han cambiado, y el único realmente
importante para el español, es la sustitución de un
carácter que seguramente, nunca has usado, por el
símbolo del euro.
¿Cómo indicó el juego de caracteres en HTML? Se
realiza mediante una etiqueta meta, que se escribe en
el head, en la cabecera de la página web, pero
depende de la versión de HTML que estés utilizando. Si
estás utilizando HTML 4 debes utilizar esta sintaxis, si
estás utilizando XHTML 1, debes utilizar alguna de
estas dos sintaxis. Además, si empleas un juego de
caracteres diferente a UTF-8, también tendrás que
indicar el juego de caracteres mediante la declaración
de documentos xml, al principio de la página web.
Y por fin llegamos a HTML 5, ¿cómo será en HTML 5?
¿Más fácil, más complicado? En HTML5 se ha
intentado hacer el lenguaje HTML más sencillo, así
que, han simplificado la forma de indicar el juego de
caracteres y ahora es algo tan sencillo como esto, o
esto.
Después de este vídeo, no espero que ya no veas el
juego caracteres como un lío, en realidad no te
explicado las razones de que sea un lío, pero sí que te
he dado dos consejos: utiliza siempre el mismo juego
de caracteres en todo lo que hagas y si puedes, utiliza
el juego de caracteres UTF-8 sin BOM.
Html: validación del código
Sencillo, ¿verdad? Pues no es tan sencillo porque esto
muchas veces es imposible de lograr, no porque no se
pueda, sino porque no depende de nosotros, lo normal
es que en un escenario real nos encontremos con algo
parecido a esto. Un escenario en el que no puedes
utilizar el mismo juego de caracteres en todos los
elementos de tu sistema y, normalmente el problema
suele convertirse en algo muy grave, con solución,
pero muy costosa.
En ese momento es cuando te toca llamar al
informático para que te solucione el problema pero, no
a un informático que se dedica a instalar el Windows o
a cambiar tarjetas gráficas, no, a un informático de
verdad.
¿Qué juego de caracteres debo usar? Yo te recomiendo
UTF-8 sin BOM, es la solución a todos los problemas y
te permite mezclar en un mismo documento textos en
cualquier idioma, es decir, te permite mezclar
caracteres de cualquier alfabeto pero absolutamente
sin ningún problema.
Si no puedes utilizar UTF-8 sin BOM por alguna razón,
entonces te recomiendo ISO-8859-1 también llamado
Latin1.
¿Cómo indicó el juego de caracteres en HTML? Se
realiza mediante una etiqueta meta, que se escribe en
el head, en la cabecera de la página web, pero
depende de la versión de HTML que estés utilizando. Si
estás utilizando HTML 4 debes utilizar esta sintaxis, si
estás utilizando XHTML 1, debes utilizar alguna de
estas dos sintaxis. Además, si empleas un juego de
caracteres diferente a UTF-8, también tendrás que
indicar el juego de caracteres mediante la declaración
de documentos xml, al principio de la página web.
Y por fin llegamos a HTML 5, ¿cómo será en HTML 5?
¿Más fácil, más complicado? En HTML5 se ha
intentado hacer el lenguaje HTML más sencillo, así
que, han simplificado la forma de indicar el juego de
caracteres y ahora es algo tan sencillo como esto, o
esto.
Después de este vídeo, no espero que ya no veas el
juego caracteres como un lío, en realidad no te
explicado las razones de que sea un lío, pero sí que te
he dado dos consejos: utiliza siempre el mismo juego
de caracteres en todo lo que hagas y si puedes, utiliza
el juego de caracteres UTF-8 sin BOM.
Html5: nuevas funcionalidades
en formularios
Hola a todos, mi nombre es Mar Martínez soy experta
en e-learning y estándares web y trabajo en la Oficina
para la Armonización del Mercado Interior. En el
siguiente vídeo os voy a presentar algunas de las
nuevas funcionalidades que HTML5 incorpora para la
gestión de formularios.
Antes de comenzar, deciros que podéis contactar
conmigo la dirección de correo
mmar.martínez.carrascosa@gmail.com, además mi
cuenta de Twitter, relacionada con el tema, es
@mar_martinez_c.
Una de las características más importantes que nos
trae nuevo estándar HTML5 son los nuevos elementos
disponibles para el manejo de formularios ya que nos
permite gestionarlos de manera nativa y, por tanto, se
puede prescindir de JavaScript para realizar algunas
validaciones de formulario del lado del cliente.
El disponer de controles avanzados nativos facilita
mucho el trabajo del desarrollador porque no se tiene
que preocupar por problemas de compatibilidad
entre distintos navegadores.
Además, esto supone un ahorro de tiempo y de ancho
de banda, ya que, por un lado, permite que el
formulario no se ha enviado, si no es válido y, por otro
lado, permite informar al usuario de que alguno de los
valores introducidos no cumple los requisitos
definidos.
Para los usuarios, los formularios tienen ahora un
comportamiento mucho más intuitivo, donde, por
ejemplo, se pueden mostrar pistas sobre lo que se
debe introducir en los campos de entrada. Se puede
mostrar un calendario interactivo al usuario, para
rellenar un campo de fecha o, incluso, se puede
seleccionar un color desde una paleta de colores.
En la siguiente tabla extraída de la página web del W3C
podemos ver la lista de estados disponibles para el
atributo type, en HTML5.
En esta primera parte del videotutorial vamos a
centrarnos en algunos de los nuevos estados del
atributo type, del elemento input. Al final del vídeo,
además, veremos brevemente cómo los dispositivos
móviles están mejorando su usabilidad para adaptarse
a las necesidades del usuario modificando la
apariencia de su teclado táctil dependiendo del tipo de
datos que el usuario tenga que rellenar.
Html5: nuevas funcionalidades
en formularios
En la segunda parte del videotutorial, lo que veremos
son algunos de los nuevos atributos de contenido que
introduce HTML5 y, además, hablaremos, brevemente,
de Modernizr y de los Polyfills.
Aquí podéis ver una tabla con todos los nuevos valores
para input type que vamos a analizar en este primer
videotutorial, url, tel, email, number, color, search,
range, datetime, datetime-local, date, month, week y
time. En cuanto al tipo de input url, como se puede
deducir, se usa en aquellos campos que deben
contener una dirección web. El valor del campo url, es
automáticamente validado, cuando el formulario es
enviado. En el ejemplo podemos ver como el sistema
informa al usuario de que la url introducida no tiene
un formato correcto.
El tipo de input tel se usa para definir campos en los
que se debe introducir un número de teléfono. Dada la
variedad de formatos que existe en todo el mundo
para los números de teléfono, este tipo no impone una
sintaxis o patrón determinado, así que, para validarlo
como un formato numérico en particular, se debe
complementar con pattern, un atributo de contenido
que veremos en detalle en la segunda parte del
videotutorial y que se basa en expresiones
regulares. En el ejemplo, podemos ver como el sistema
informa al usuario del error cometido al introducir el
número de teléfono. Cabe destacar que este tipo
puede ser útil para el caso de teléfonos móviles
porque se puede crear un autocompletado con el
número de teléfono en cuestión e incluso, se puede
mostrar la agenda del teléfono móvil para seleccionar
un número almacenado.
El tipo de input email se usa para definir campos en los
que se deba introducir una dirección de correo
electrónica válida, en el ejemplo, podemos ver como el
sistema informa al usuario de que la dirección de
correo electrónica introducida no tiene un formato
correcto.
El tipo de input number se usa para definir campos en
los que se deba introducir un valor numérico. Este
campo puede contener atributos que permitan realizar
restricciones sobre el número, como por ejemplo,
definiendo un valor mínimo o máximo mediante los
atributos min y max de los que hablaremos en la
segunda parte del vídeo tutorial o asignándole un
valor específico por defecto mediante el atributo
value. En el ejemplo, podemos observar que, al
asignarle un valor por defecto este aparece
automáticamente al mostrarse el campo.
Html5: nuevas funcionalidades
en formularios
El tipo de input color se usa para definir campos en los
que el usuario puede seleccionar un color desde una
paleta de colores. Le hemos asignado un color azul
marino desde base mediante el código hexadecimal
aunque, si no se define un valor, por defecto adquiere
el color negro.
El tipo de input search se usa para definir campos de
búsqueda en formato de texto adquiriendo un aspecto
gráfico más adecuado a su función. Como se puede
observar en el ejemplo, al introducir texto en este
campo, el navegador muestra una cruz a la derecha
que permite al usuario borrar todo lo escrito hasta el
momento.
El tipo de input range se usa para definir campos que
deban contener un valor numérico que esté dentro de
un rango específico, rango que definimos con los
atributos min y max, de los quedaremos en la segunda
parte del videotutorial. También podemos usar otros
atributos como, por ejemplo, value, para darle un valor
por defecto o el atributo step, del que también
hablaremos en la segunda parte del videotutorial y
que sirve para definir los intervalos en los que puede
variar el valor.
El tipo de input datetime permite al usuario
seleccionar la hora completa además del día, mes, año
y zona horaria.
El tipo de input datetime-local permite al usuario
seleccionar la hora completa más el día, mes y año,
pero, en este caso, a diferencia del anterior, no se
incluye la zona horaria. Si la zona horaria no es
importante para tu aplicación, usa este tipo datetime-
local, en lugar de datetime.
El tipo de input date permite al usuario seleccionar
una fecha completa formada por día, mes y año.
El tipo de input month permite al usuario seleccionar
un mes y un año específico.
El tipo de input week permite al usuario seleccionar
una semana y un año específico.
El tipo de input time permite al usuario seleccionar la
hora en formato de horas y minutos.
Hasta ahora hemos tenido en cuenta los navegadores
web desde el punto de vista de un ordenador de
sobremesa o de un portátil. A continuación, vamos a
ver las mejoras de usabilidad que introducen los tipos
de input tel, email y url cuando lo que estamos usando
es un dispositivo con pantalla táctil.
Html5: nuevas funcionalidades
en formularios

Dentro de un formulario, cuando el foco se sitúa en un

campo de tipo tel, las pantallas táctiles cambiarán su
formato por defecto y se utilizarán para la introducción
de un número de teléfono mostrando un teclado
numérico.
Cuando el foco se sitúa en un campo de tipo email, las
pantallas táctiles se optimizarán para la introducción
de un campo de texto. En este caso, iPhone va más
allá, ya que el teclado incorpora la tecla de acceso
directo de @. En el caso de Android, se usa el tipo de
entrada de texto que existe por defecto.
Por último, cuando el foco se sitúa en un campo de En resumen, los dispositivos móviles están
tipo url, las pantallas táctiles cambiarán y se incorporando mejoras muy interesantes de usabilidad
optimizarán para la introducción de un campo de texto para el usuario, adaptándose en la medida de lo
pero, en este caso, como ocurría en el anterior, iPhone posible a sus necesidades, ahorrándoles así trabajo y
va más allá e incorpora las teclas de acceso directo de tiempo.
barra inclinada y de .com. En el caso de Android, para
url se usa el tipo de entrada de texto que existe por Espero que toda esta información te sea útil. Muchas
defecto. gracias por tu atención y hasta pronto.
Html5: nuevas funcionalidades
en formularios
Sencillo, ¿verdad? Pues no es tan sencillo porque esto
muchas veces es imposible de lograr, no porque no se
pueda, sino porque no depende de nosotros, lo normal
es que en un escenario real nos encontremos con algo
parecido a esto. Un escenario en el que no puedes
utilizar el mismo juego de caracteres en todos los
elementos de tu sistema y, normalmente el problema
suele convertirse en algo muy grave, con solución,
pero muy costosa.
En ese momento es cuando te toca llamar al
informático para que te solucione el problema pero, no
a un informático que se dedica a instalar el Windows o
a cambiar tarjetas gráficas, no, a un informático de
verdad.
¿Qué juego de caracteres debo usar? Yo te recomiendo
UTF-8 sin BOM, es la solución a todos los problemas y
te permite mezclar en un mismo documento textos en
cualquier idioma, es decir, te permite mezclar
caracteres de cualquier alfabeto pero absolutamente
sin ningún problema.
Si no puedes utilizar UTF-8 sin BOM por alguna razón,
entonces te recomiendo ISO-8859-1 también llamado
Latin1.
¿Cómo indicó el juego de caracteres en HTML? Se
realiza mediante una etiqueta meta, que se escribe en
el head, en la cabecera de la página web, pero
depende de la versión de HTML que estés utilizando. Si
estás utilizando HTML 4 debes utilizar esta sintaxis, si
estás utilizando XHTML 1, debes utilizar alguna de
estas dos sintaxis. Además, si empleas un juego de
caracteres diferente a UTF-8, también tendrás que
indicar el juego de caracteres mediante la declaración
de documentos xml, al principio de la página web.
Y por fin llegamos a HTML 5, ¿cómo será en HTML 5?
¿Más fácil, más complicado? En HTML5 se ha
intentado hacer el lenguaje HTML más sencillo, así
que, han simplificado la forma de indicar el juego de
caracteres y ahora es algo tan sencillo como esto, o
esto.
Después de este vídeo, no espero que ya no veas el
juego caracteres como un lío, en realidad no te
explicado las razones de que sea un lío, pero sí que te
he dado dos consejos: utiliza siempre el mismo juego
de caracteres en todo lo que hagas y si puedes, utiliza
el juego de caracteres UTF-8 sin BOM.
Ejemplo de formulario
Sencillo, ¿verdad? Pues no es tan sencillo porque esto
muchas veces es imposible de lograr, no porque no se
pueda, sino porque no depende de nosotros, lo normal
es que en un escenario real nos encontremos con algo
parecido a esto. Un escenario en el que no puedes
utilizar el mismo juego de caracteres en todos los
elementos de tu sistema y, normalmente el problema
suele convertirse en algo muy grave, con solución,
pero muy costosa.
En ese momento es cuando te toca llamar al
informático para que te solucione el problema pero, no
a un informático que se dedica a instalar el Windows o
a cambiar tarjetas gráficas, no, a un informático de
verdad.
¿Qué juego de caracteres debo usar? Yo te recomiendo
UTF-8 sin BOM, es la solución a todos los problemas y
te permite mezclar en un mismo documento textos en
cualquier idioma, es decir, te permite mezclar
caracteres de cualquier alfabeto pero absolutamente
sin ningún problema.
Si no puedes utilizar UTF-8 sin BOM por alguna razón,
entonces te recomiendo ISO-8859-1 también llamado
Latin1.
¿Cómo indicó el juego de caracteres en HTML? Se
realiza mediante una etiqueta meta, que se escribe en
el head, en la cabecera de la página web, pero
depende de la versión de HTML que estés utilizando. Si
estás utilizando HTML 4 debes utilizar esta sintaxis, si
estás utilizando XHTML 1, debes utilizar alguna de
estas dos sintaxis. Además, si empleas un juego de
caracteres diferente a UTF-8, también tendrás que
indicar el juego de caracteres mediante la declaración
de documentos xml, al principio de la página web.
Y por fin llegamos a HTML 5, ¿cómo será en HTML 5?
¿Más fácil, más complicado? En HTML5 se ha
intentado hacer el lenguaje HTML más sencillo, así
que, han simplificado la forma de indicar el juego de
caracteres y ahora es algo tan sencillo como esto, o
esto.
Después de este vídeo, no espero que ya no veas el
juego caracteres como un lío, en realidad no te
explicado las razones de que sea un lío, pero sí que te
he dado dos consejos: utiliza siempre el mismo juego
de caracteres en todo lo que hagas y si puedes, utiliza
el juego de caracteres UTF-8 sin BOM.
¿por qué es importante escribir
el código correcto?
Sencillo, ¿verdad? Pues no es tan sencillo porque esto
muchas veces es imposible de lograr, no porque no se
pueda, sino porque no depende de nosotros, lo normal
es que en un escenario real nos encontremos con algo
parecido a esto. Un escenario en el que no puedes
utilizar el mismo juego de caracteres en todos los
elementos de tu sistema y, normalmente el problema
suele convertirse en algo muy grave, con solución,
pero muy costosa.
En ese momento es cuando te toca llamar al
informático para que te solucione el problema pero, no
a un informático que se dedica a instalar el Windows o
a cambiar tarjetas gráficas, no, a un informático de
verdad.
¿Qué juego de caracteres debo usar? Yo te recomiendo
UTF-8 sin BOM, es la solución a todos los problemas y
te permite mezclar en un mismo documento textos en
cualquier idioma, es decir, te permite mezclar
caracteres de cualquier alfabeto pero absolutamente
sin ningún problema.
Si no puedes utilizar UTF-8 sin BOM por alguna razón,
entonces te recomiendo ISO-8859-1 también llamado
Latin1.
¿Cómo indicó el juego de caracteres en HTML? Se
realiza mediante una etiqueta meta, que se escribe en
el head, en la cabecera de la página web, pero
depende de la versión de HTML que estés utilizando. Si
estás utilizando HTML 4 debes utilizar esta sintaxis, si
estás utilizando XHTML 1, debes utilizar alguna de
estas dos sintaxis. Además, si empleas un juego de
caracteres diferente a UTF-8, también tendrás que
indicar el juego de caracteres mediante la declaración
de documentos xml, al principio de la página web.
Y por fin llegamos a HTML 5, ¿cómo será en HTML 5?
¿Más fácil, más complicado? En HTML5 se ha
intentado hacer el lenguaje HTML más sencillo, así
que, han simplificado la forma de indicar el juego de
caracteres y ahora es algo tan sencillo como esto, o
esto.
Después de este vídeo, no espero que ya no veas el
juego caracteres como un lío, en realidad no te
explicado las razones de que sea un lío, pero sí que te
he dado dos consejos: utiliza siempre el mismo juego
de caracteres en todo lo que hagas y si puedes, utiliza
el juego de caracteres UTF-8 sin BOM.
¿por qué es importante escribir
el código correcto?
Sencillo, ¿verdad? Pues no es tan sencillo porque esto
muchas veces es imposible de lograr, no porque no se
pueda, sino porque no depende de nosotros, lo normal
es que en un escenario real nos encontremos con algo
parecido a esto. Un escenario en el que no puedes
utilizar el mismo juego de caracteres en todos los
elementos de tu sistema y, normalmente el problema
suele convertirse en algo muy grave, con solución,
pero muy costosa.
En ese momento es cuando te toca llamar al
informático para que te solucione el problema pero, no
a un informático que se dedica a instalar el Windows o
a cambiar tarjetas gráficas, no, a un informático de
verdad.
¿Qué juego de caracteres debo usar? Yo te recomiendo
UTF-8 sin BOM, es la solución a todos los problemas y
te permite mezclar en un mismo documento textos en
cualquier idioma, es decir, te permite mezclar
caracteres de cualquier alfabeto pero absolutamente
sin ningún problema.
Si no puedes utilizar UTF-8 sin BOM por alguna razón,
entonces te recomiendo ISO-8859-1 también llamado
Latin1.
¿Cómo indicó el juego de caracteres en HTML? Se
realiza mediante una etiqueta meta, que se escribe en
el head, en la cabecera de la página web, pero
depende de la versión de HTML que estés utilizando. Si
estás utilizando HTML 4 debes utilizar esta sintaxis, si
estás utilizando XHTML 1, debes utilizar alguna de
estas dos sintaxis. Además, si empleas un juego de
caracteres diferente a UTF-8, también tendrás que
indicar el juego de caracteres mediante la declaración
de documentos xml, al principio de la página web.
Y por fin llegamos a HTML 5, ¿cómo será en HTML 5?
¿Más fácil, más complicado? En HTML5 se ha
intentado hacer el lenguaje HTML más sencillo, así
que, han simplificado la forma de indicar el juego de
caracteres y ahora es algo tan sencillo como esto, o
esto.
Después de este vídeo, no espero que ya no veas el
juego caracteres como un lío, en realidad no te
explicado las razones de que sea un lío, pero sí que te
he dado dos consejos: utiliza siempre el mismo juego
de caracteres en todo lo que hagas y si puedes, utiliza
el juego de caracteres UTF-8 sin BOM.
¿por qué es importante escribir
el código correcto?
Sencillo, ¿verdad? Pues no es tan sencillo porque esto
muchas veces es imposible de lograr, no porque no se
pueda, sino porque no depende de nosotros, lo normal
es que en un escenario real nos encontremos con algo
parecido a esto. Un escenario en el que no puedes
utilizar el mismo juego de caracteres en todos los
elementos de tu sistema y, normalmente el problema
suele convertirse en algo muy grave, con solución,
pero muy costosa.
En ese momento es cuando te toca llamar al
informático para que te solucione el problema pero, no
a un informático que se dedica a instalar el Windows o
a cambiar tarjetas gráficas, no, a un informático de
verdad.
¿Qué juego de caracteres debo usar? Yo te recomiendo
UTF-8 sin BOM, es la solución a todos los problemas y
te permite mezclar en un mismo documento textos en
cualquier idioma, es decir, te permite mezclar
caracteres de cualquier alfabeto pero absolutamente
sin ningún problema.
Si no puedes utilizar UTF-8 sin BOM por alguna razón,
entonces te recomiendo ISO-8859-1 también llamado
Latin1.
¿Cómo indicó el juego de caracteres en HTML? Se
realiza mediante una etiqueta meta, que se escribe en
el head, en la cabecera de la página web, pero
depende de la versión de HTML que estés utilizando. Si
estás utilizando HTML 4 debes utilizar esta sintaxis, si
estás utilizando XHTML 1, debes utilizar alguna de
estas dos sintaxis. Además, si empleas un juego de
caracteres diferente a UTF-8, también tendrás que
indicar el juego de caracteres mediante la declaración
de documentos xml, al principio de la página web.
Y por fin llegamos a HTML 5, ¿cómo será en HTML 5?
¿Más fácil, más complicado? En HTML5 se ha
intentado hacer el lenguaje HTML más sencillo, así
que, han simplificado la forma de indicar el juego de
caracteres y ahora es algo tan sencillo como esto, o
esto.
Después de este vídeo, no espero que ya no veas el
juego caracteres como un lío, en realidad no te
explicado las razones de que sea un lío, pero sí que te
he dado dos consejos: utiliza siempre el mismo juego
de caracteres en todo lo que hagas y si puedes, utiliza
el juego de caracteres UTF-8 sin BOM.
[A+] ¿migrar a un nuevo juego
de caracteres?
Antes de ver este vídeo, te recomiendo que veas los
vídeos, "HTML juego de caracteres" y "HTML el juego
de caracteres y los editores de texto" que te ayudarán
a entender mejor qué es el juego de caracteres. En
estos dos vídeos, el consejo que doy, es que lo mejor,
es usar el juego de caracteres UTF-8 sin BOM, ya que
es la solución a todos los problemas que pueden
aparecer con el juego de caracteres y permite mezclar
en un mismo documento, textos en cualquier idioma,
es decir, te permite mezclar caracteres de cualquier
alfabeto, pero, ¿qué pasa si ya tenemos un sitio web
con otro juego de caracteres? ¿Debemos migrar el sitio
web al juego de caracteres UTF-8 sin BOM? Vamos a
analizarlo con un caso real, la situación que me ha
planteado un amigo que es alumno de este curso.
Mi amigo es biólogo y empezó a hacer páginas web en
el año 1996. Sus primeras páginas web las hacía con el
programa Microsoft Frontpage. Desde hace varios
años, mi amigo mantiene un sitio web sobre rutas de
montaña, de senderismo muy popular, con un buen
número de visitas. Mi amigo me mandó el siguiente
mensaje al ver uno de mis vídeos.
“Una duda técnica, después de ver el último vídeo que
has publicado sobre codificación UTF-8 sin BOM, me
he dado cuenta de dos cosas. Una de que eso existe,
dos que mi editor de HTML, Dreamweaver 8, las
nuevas páginas están configuradas como tipo de
documento DTD XHTML 1.0 transitional y codificación
encoding europeo occidental. Sobre la codificación, no
hay problema para ponerla en UTF-8 sin BOM pero,
con respecto al tipo de documento, ¿cuál de las
siguientes posibilidades que me ofrece debo escoger?
HTML 4.01 Transitional, HTML 4.01 Strict, XHTML 1.0
Transitonal, XHTML 1.0 Strict o XHTML Mobile 1.0”, y
continua, “esto es, más que nada, para hacer la
práctica del curso, aunque también me bajaré Notepad
Plus Plus, a ver si me acostumbro. A parte de eso, ya
me he dado cuenta de que todo lo que escrito más o
menos desde 2004, está en XHTML 1.0 transitional y
europeo occidental. Supongo que algún día tendré que
validar y limpiar todo ese código. ¿Es tan simple como
guardar las páginas con la nueva codificación o se debe
hacer una revisión completa y manual para detectar
errores? Tampoco estoy pensando en revisar todo lo
viejo, sino de aprovechar lo que funcione bien, se
entiende”.
[A+] ¿migrar a un nuevo juego
de caracteres?
Mi amigo usa Dreamweaver 8. Cuando se crea un
nuevo documento, aparece un asistente que permite
elegir la categoría de documento que se quiere crear.
Cuando se elige crear una página web, se tiene que
elegir el tipo de documento, el DTD que se quiere
aplicar. El DTD, el DOCTYPE, indica la versión de HTML
que se usa. Además, en las propiedades de un
documento, también se puede definir la codificación,
el encoding del documento, el juego de caracteres. Al
final, todo esto se traduce en dos cosas en el código
HTML, en el DOCTYPE, en el que se indica la versión
de HTML y en la etiqueta meta- charset, en la que se
indica la codificación o juego de caracteres.
Mi amigo usa el juego de caracteres ISO 8859-1,
también llamado Latin1, que Dreamweaver llama
Europa Occidental porque es el mejor juego de
caracteres para los idiomas de europa occidental
incluido el español. No hay ningún problema en usar
este juego de caracteres, pero mi amigo hace algo que
no es necesario. Mi amigo escribe los caracteres que
no pertenecen al juego de caracteres ASCII, como las
vocales acentuadas y la ñ, como referencias de
carácter con nombre.
En el vídeo "HTML, tres errores típicos" ya expliqué
que cuando se escribe el código así, a veces es muy
difícil de leer. ¿Este código está mal? No, no está mal,
pero si se emplea el juego de caracteres adecuado y,
mi amigo está utilizando ISO 8859-1, que es un juego
de caracteres adecuado, entonces, escribir el texto así
es totalmente inútil, porque no es necesario y no
aporta ninguna ventaja.
Volviendo al correo de mi amigo, le contesté lo
siguiente: “Este consejo, utilizar UTF-8 sin BOM es
para la creación de las páginas nuevas. En tu caso, yo
te aconsejo que sigas como hasta ahora, no te vale la
pena realizar una migración si ahora mismo no tienes
ningún problema. No hay ningún problema para
trabajar con Europeo Occidental ISO-8859-1 o Latin1,
si no tienes que incluir idiomas con otros alfabetos o
no te vas a conectar con otros sistemas que tengan
otra codificación”. Mi amigo podría tener problemas si
se conecta a una base de datos y no elige el juego de
caracteres adecuado o, si utiliza un servicio web que le
devuelve los datos en un juego de caracteres distinto al
suyo pero, en principio no tiene planes de hacer nada
de esto, y continuaba con mi respuesta.
[A+] ¿migrar a un nuevo juego
de caracteres?
“Digamos que UTF-8 sin BOM es la solución fácil para
todo y que te asegura que no tendrás problemas en el
futuro, pero usar Europa Occidental es una buena
opción, es más, es lo mejor porque ahorras espacio”.
¿Qué significa ahorrar espacio? Vamos a hacer una
prueba. Me bajo el fichero HTML de la página principal
de la Universidad de Alicante y con el Notepad Plus
Plus, lo convierto del formato original UTF-8 sin BOM a
ISO 8859-1 o Latin1. Si comparamos los tamaños de los
ficheros, comprobamos que la versión original de la
página web, que está en formato UTF-8 sin BOM, la
que podemos ver a la izquierda, ocupa 360 bytes más
que la versión en formato Latin1, que aparece a la
derecha. Esto se debe a que ciertos caracteres, las
vocales acentuadas o la ñ, ocupan dos bytes en vez de
uno. Y, por último, le decía a mi amigo, “respecto al
DOCTYPE, sí que te aconsejo que utilices DOCTYPE
HTML, para HTML5 en tus nuevas páginas, si no, sigue
con el XHTML 1.0 Transitional”. ¿Por qué le aconsejo
esto? Porque es muy probable que en un plazo corto
de tiempo le interese aprovechar algunas de las
nuevas características de HTML5.
Y, para terminar, ¿cómo podemos convertir fácilmente
un conjunto de páginas de una codificación a otra? Es
decir, ¿cómo puedo migrar un sitio web de una
codificación a otra? Pues en Windows no es fácil, en
Linux y Mac OSX es fácil desde la línea de comandos.
Por un lado, tenemos el comando file, que nos
permite conocer el tipo y la codificación de un fichero
y, por otro lado, tenemos iconv, que convierte la
codificación de un fichero, de una codificación a otra.
En Windows, el único método que conozco, es utilizar
un editor de textos, como, por ejemplo, pues el
Notepad Plus Plus y convertir fichero a fichero
nuestro sitio web.
Por último, en el sitio web del W3C dedicado a la
internacionalización podemos encontrar mucha
información sobre el juego de caracteres. Te
recomiendo la lectura de los artículos: "Codificación de
caracteres, conceptos básicos" y "Selección y
aplicación de codificación de caracteres".
Espero que estos vídeos te ayuden a entender qué es
el juego de caracteres y lo sepas utilizar un poco mejor.
 Para escribir un texto y que se entienda correctamente
se debe utilizar el juego de caracteres adecuado. Las
migraciones se realizan cuando la página web da
problemas o en el momento de conectarse a otro
sistema con otra codificación, pero si no da problemas,
no es aconsejable realizar una migración. Migrar un sitio
web de una codificación a otra es más sencillo en Linux
y macOS X ya que se realiza por línea de comandos. El
comando file permite conocer el tipo y la codificación de
un fichero y el comando iconv convierte la codificación
de un fichero de una codificación a otra.
[A+] XML: HTML y xhtml
XHTML es el acrónimo de eXtensible Hypertext
Markup Language, en castellano, lenguaje extensible
de marcado de hipertexto. XHTML es el lenguaje de
marcado, pensado para sustituir a HTML como
estándar para las páginas web. Si XHTML es el sucesor
de HTML, ¿qué relación existe con XML? En su versión
1.0 XHTML es solamente la versión de XML de HTML,
por lo que tiene, básicamente, las mismas etiquetas y
funcionalidades pero cumple las especificaciones más
estrictas de XML. Recordemos que HTML, XHTML y
XML, son los tres estándares de facto desarrollados
por el World Wide Web Consortium, el W3C, un
consorcio internacional que produce
recomendaciones para la world wide web.
Desde la publicación de la primera página web en
diciembre de 1990, el lenguaje HTML ha ido
mejorando con nuevas versiones. En noviembre de
1995, se publicó HTML 2.0. En enero de 1997, HTML
3.2 y en diciembre de 1997, apareció HTML 4. La
última revisión, HTML 4.01, se publicó en diciembre de
1999. En enero de 2000, se publicó XHTML 1.0, una
reformulación de HTML 4 utilizando XML 1.0. Una
revisión de XHTML 1.0 fue publicada en agosto de
2002.
XHTML es el lenguaje de marcado pensado para
sustituir a HTML como estándar para las páginas web.
En su versión 1.0 XHTML, es solamente la versión XML
de HTML, por lo que tiene básicamente las mismas
funcionalidades, pero cumple las especificaciones más
estrictas de XML.
XHTML incorpora a las páginas web el rigor de XML,
lo cual se traduce en un mejor procesamiento, un
mantenimiento más sencillo y es el primer paso hacia
la llamada web semántica. Desgraciadamente, todas
estas promesas se pararon en seco a mediados del año
2009. En julio del año 2009, el W3C anunció que
cuando el grupo de trabajo de XHTML 2, la próxima
versión de XHTML, terminase su trabajo a finales de
2009, no iba a ser renovado, ya que el W3C, quería
aumentar los recursos destinados a HTML 5.
Finalmente, en diciembre de 2010, el grupo de trabajo
de XHTML 2 fue definitivamente cerrado.
¿Y qué es HTML 5? HTML 5 es la quinta y última
versión, por ahora, del lenguaje de etiquetado HTML.
¿Pero qué pasó con XHTML? XHTML 1.0 fue publicado
en el año 2000 y en los siguientes años se
desarrollaron numerosas tecnologías que lo
complementaban o que lo iban a suceder.
[A+] XML: HTML y xhtml
Desgraciadamente todas estas tecnologías
complicaron bastante el desarrollo y el uso de XHTML,
en el año 2004, algunos miembros de Apple, Mozilla
Foundation y Opera Software fundaron el Web
Hypertext Application Technology Working Group,
porque no estaban contentos con la evolución de
XHTML y con la falta de interés del W3C, por las
necesidades reales de los desarrolladores web.
De forma independiente, este grupo empezó a
desarrollar su propia versión de cómo debía ser la
propia versión de HTML. En el año 2006, el W3C,
mostró su interés por participar en el desarrollo de
HTML 5 y en el año 2007 el W3C formó un grupo de
trabajo destinado a trabajar con el WHATWG, en el
desarrollo de la especificación de HTML5. Por tanto, el
W3C abandonó sus trabajos sobre XHTML 2.0 y pasó a
centrar su interés en HTML5.
Entonces ¿está muerto XHTML? No, para nada, no está
muerto, existen millones y millones de sitios web y
miles de herramientas basadas en XHTML, más aún,
HTML 5 se está desarrollando con dos sintaxis, una
basada en XHTML y otra basada en HTML. Por tanto,
tiene mucho sentido seguir trabajando con XHTML los
próximos años.
[A+] XML: HTML y xhtml
A continuación, vamos a ver las principales diferencias
que existen entre HTML y XHTML 1.0.
En HTML 4 existen tres variantes del lenguaje, la
versión estricta, la versión transicional y la versión con
marcos.
En XHTML 1.0 se conservan en las tres variantes pero,
claro está, con sus propios DOCTYPES. Así, tenemos la
versión estricta, la versión transicional y la versión con
marcos. En la página web, lista recomendada de
declaraciones de DOCTYPE del W3C, podemos
encontrar estas declaraciones que acabamos de ver y
algunas más. En esta misma página del W3C, también,
podemos encontrar esta plantilla para crear un nuevo
documento XHTML 1.0. Este documento está
configurado para el juego de caracteres UTF-8. Si se
quisiera utilizar otro juego de caracteres, como, por
ejemplo, ISO-8859-1, también llamado Latín 1, habría
que añadir esta declaración de documento XML y
habría que cambiar el valor del juego de caracteres en
esta etiqueta. Para comprobar si una página XHTML
está correctamente escrita, se puede emplear algún
validador, como, por ejemplo, el que proporciona el
W3C.
[A+] XML: HTML y xhtml
Veamos a continuación, las principales diferencias que
existen entre HTML y XHTML 1.0. Debido a que XHTML
es una aplicación de XML, ciertas prácticas que eran
posibles en XHTML, que está basado en SGML, ahora
no son posibles.
Pero, en primer lugar, recordemos la estructura de un
elemento HTML. Un elemento HTML, se compone de
una etiqueta inicial y una etiqueta final, que tienen el
mismo nombre, la etiqueta inicial puede llevar
atributos, pero la final nunca lleva. En HTML los
atributos pueden llevar un valor. Por último, las
etiquetas pueden tener contenido. El contenido Esto es debido a que XML diferencia las mayúsculas y
puede estar formado por otras etiquetas de HTML o minúsculas. En HTML es posible escribir las etiquetas y
puede ser simplemente texto, como en este ejemplo. atributos en mayúscula y en minúsculas, sin ningún
problema. En XHTML esto es totalmente incorrecto,
En primer lugar, los elementos anidados, deben tener todo tiene que estar escrito en minúsculas.
un correcto orden de apertura-cierre, el que se abre el
último, debe cerrarse el primero. Por ejemplo, en Los elementos vacíos deben cerrarse siempre. O bien,
HTML es posible este ejemplo pero esto es totalmente aparece la etiqueta final, o bien, la etiqueta inicial
incorrecto en XHTML porque los elementos están termina con barra mayor que. En HTML los elementos
superpuestos. La forma correcta de escribirlo en vacíos no llevan etiqueta de cierre, por tanto, se
XHTML sería la siguiente: los elementos, los nombres pueden escribir directamente de esta forma, sin
de elementos y atributos deben de ir siempre en embargo, esto es incorrecto en XHTML. En XHTML o se
minúsculas. cierra la etiqueta, o se escribe con una etiqueta vacía.
[A+] XML: HTML y xhtml
Los elementos no vacíos, también deben de cerrarse
siempre en XHTML. En HTML se permite no cerrar
ciertos elementos, ya que se cierran de forma
implícita, pero esto es totalmente imposible en
XHTML. Por ejemplo, la etiqueta p, de párrafo, se
puede no cerrar en HTML, pero esto está mal en
XHTML. En XHTML, los elementos se tienen que cerrar
siempre.
Los valores de los atributos deben siempre ir
encerrados entre comillas simples o dobles. En HTML,
los valores de los atributos se pueden escribir sin
comillas, sin embargo, esto es incorrecto en XHTML.
Siempre hay que encerrar los valores de los atributos
entre comillas dobles o comillas simples. No está
permitida la minimización de atributos. En aquellos
casos en que el atributo no tiene definido un conjunto
de valores, sino que simplemente está o no está, se
usa el nombre del atributo como único valor posible.
En HTML es posible minimizar los valores de los
atributos y simplemente, se escribe el nombre del
atributo, como vemos aquí, en este ejemplo, dl
compact o option selected o input checked. Esto es
totalmente incorrecto en XHTML. En XHTML se tiene
que asignar siempre un valor y se toma la regla de
asignarle como valor el mismo nombre del atributo.
El tratamiento de los espacios en blanco en los valores
de los atributos varía en XHTML respecto a HTML. Los
espacios en blanco al principio y al final se eliminan y
uno o más espacios en blanco, incluyendo los saltos de
línea, se traducen en un único espacio en blanco entre
las palabras del valor de un atributo.
En XHTML el contenido de la etiqueta script y style
está definido como # pc data. Como resultado de ello,
los símbolos menor que y & se interpretan por parte
del procesador de XML como inicio de etiqueta y
como entidad de carácter. Si se encierra el contenido
de script o de estilo con cdata se evita este
comportamiento. Como alternativa más cómoda,
también se pueden almacenar en ficheros separados.
En SGML se pueden definir exclusiones, evitar que
ciertos elementos sean contenidos en otros
elementos. Esto no es posible definirlo en XML y por
tanto tampoco en XHTML.
En XHTML no se pueden definir de forma formal a
través del DTD, sino, que sólo se puede proporcionar
en forma de lista de exclusiones. En HTML 4, tanto el
atributo name, como el atributo id, se pueden emplear
para identificar un fragmento de código. En XHTML
solo es posible emplear el atributo id.
[A+] XML: HTML y xhtml
[A+] XML: HTML y xhtml

En HTML, el tratamiento de los atributos con conjunto

de valores predefinidos como align o type, es no
sensible a mayúsculas y minúsculas, sin embargo, en
XHTML, sí que es sensible a las mayúsculas y
minúsculas y se deben escribir siempre los valores en
minúsculas.
En HTML, las referencias de entidad se pueden escribir
como & x mayúscula y el código hexadecimal o, como
& x minúscula y el código hexadecimal. En XML y por
tanto en XHTML, solo se pueden emplear las versiones
en minúsculas.
Y con esto termina este vídeo tutorial, sobre las
diferencias entre HTML y XHTML. Como hemos visto
estas diferencias están originadas por el hecho de que
XHTML es una aplicación de XML que impone una
serie de reglas más estrictas.
 XHTML es el lenguaje de marcado pensado para
sustituir a HTML como estándar para las páginas web.
En su versión 1.0 XHTML es solamente la versión de
XML de HTML por lo que tiene, básicamente, las mismas
etiquetas y funcionalidades, pero cumple las
especificaciones más estrictas de XML. XHTML es más
estricto que HTML por lo que tienen varias diferencias.
Una de ellas es que en XHTML los elementos vacíos
siempre llevan etiqueta de cierre y en HTML no es
necesario. Otra de ellas está relacionada con el valor de
los atributos: en XHTML siempre llevan comillas, cuando
en HTML no es imprescindible.