• Author / Uploaded
• David Herrera

• Categories
• HTML
• Red mundial
• Tecnología
• Página web
• Datos de computadora

Citation preview

---

¿Estás escribiendo bien tus páginas? Más contenido 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.

HTML: juego de caracteres Más contenido 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.



Introducción al Desarrollo Web: HTML y CSS 

HTML: juego de caracteres

Vídeo: http://youtu.be/_MwDNB3jOx0 Hola, soy Sergio Luján Mora, profesor de informática de la Universidad de Alicante, y en este vídeo que forma parte del curso “Introducción al desarrollo web”, te voy a hablar del juego de caracteres y de su uso en las páginas web. Antes de empezar, me gustaría recordarte algunos de los sitios web en los que puedes encontrar más información sobre mí y sobre mi trabajo, y dos formas de contactar conmigo, a través de mi correo electrónico [email protected] y a través de mi cuenta en Twitter @sergiolujanmora. ¿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 estabas 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, Latin-1, ANSI, UTF-8, UTF-8 sin BOM, Unicode, Cotejamiento. ¡Menudo lío! ¿Qué significa todo esa 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 que el sistema binario moderno fue documentado en su totalidad por el gran matemático Leibniz, en el siglo XVII. 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 sólo 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. Pero también 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 invocas 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. 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 convertir 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 ISO8859-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 indico el juego de caracteres en HTML?

Se realiza mediante una etiqueta , que se escribe en el de la página web, pero depende de la versión de HTML que estés utilizando. Si estás utilizando HTML4, 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 documento XML al principio de la página web. Y por fin llegamos a HTML5. ¿Cómo será en HTML5? ¿Más fácil? ¿Más complicado? Bueno, 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. Bueno, después de este vídeo no espero que ya no veas el juego de caracteres como un lio, en realidad no te he 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. Recuerda que este vídeo forma parte del curso “Introducción al desarrollo web” que está disponible en la dirección idesweb.es. Muchas gracias por tu atención. Vídeo: http://youtu.be/_MwDNB3jOx0

HTML: el juego de caracteres y los editores de texto Más contenido 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.

Introducción al Desarrollo Web: HTML y CSS HTML: el juego de caracteres y los editores de texto

Vídeo: http://youtu.be/4vF41rQU_4Y Hola, soy Sergio Luján Mora, profesor de informática de la Universidad de Alicante, y en este vídeo que forma parte del curso “Introducción al desarrollo web”, te voy a dar unas pautas para resolver unos problemas relacionados con el juego de caracteres y los editores de texto. Antes de empezar, me gustaría recordarte algunos de los sitios web en los que puedes encontrar más información sobre mí y sobre mi trabajo, y dos formas de contactar conmigo, a través de mi correo electrónico [email protected] y a través de mi cuenta en Twitter @sergiolujanmora. 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 ese 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, esos 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++). En el vídeo recomiendas usar UTF8 sin BOM. Resulta que el fichero lo tengo con codificación ANSI, pero si lo cambio a UTF8 sin BOM, el disquete de guardar no se me marca (es decir, no se ha modificado el fichero). Entonces marco UTF8, se marca el disquete y guardo. Ahora selecciono UTF8 sin BOM. Se me marca el disquete y guardo (un pequeño chanchullo para que me permitiese guardar UTF8 sin BOM). Y el correo continuaba: Y ahora viene el tema. Si he guardado en UTF8 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 sin BOM" además de "Codificar en UTF sin BOM" ¿cuál es la diferencia? Bien, 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? Sí, 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. ¿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, PHP5 no tiene un soporte completo de UTF-8: si vamos a trabajar con PHP5, debemos de utilizar

UTF-8 sin BOM. Voy a realizar una demostración práctica con el editor Notepad++ para que lo entiendas mejor. Te voy a mostrar un problema típico que aparece cuando trabajamos con UTF8 y con PHP5. Estoy en Notepad++ 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 echo, párrafo, “Esto lo escribe PHP”, que lo único que hace es escribir esta cadena de texto, esta cadena HTML. Y por último también tenemos este fichero en PHP, php-file.php que lo único que hace es incluir la instrucción include de PHP para incluir el primer fichero de HTML, es decir, lo único que hace es leerlo y volcarlo en la salida. Fíjate que los tres ficheros los tengo almacenados en formato UTF-8. Vamos a ver cómo se visualizan estos tres ficheros en el navegador. Me voy al navegador y aquí tenemos el primer fichero, el de solamente HTML. Se ve bien, no hay ningún problema. Luego tenemos el otro fichero, el que contiene código de PHP. Se ve bien. Y ahora el tercer fichero, este fichero de aquí, que contiene esta instrucción de PHP para cargar el primer fichero, es decir, se debería de ver igual que este fichero. Sin embargo, cuando lo visualizamos, notamos aquí que hay un cambio. Fijaros cómo aparece aquí un margen superior, como si hubiese aquí una línea adicional de texto. ¿Esto a qué es debido? Si nos vamos ahora al código fuente, veremos que he añadido un comentario al principio de cada uno de los ficheros. ¿Este comentario debe producir ese espacio adicional? No, para nada. Este espacio no lo debe producir un comentario. Es más, aquí lo podemos comprobar, como estos ficheros también tienen el comentario y sin embargo no aparece ahí ese espacio. Por tanto, ¿a qué se debe esto? El problema está en que al cargar aquí en PHP este fichero, el fichero html.html, este fichero de aquí, recordad que está en formato UTF-8, lleva el BOM, aunque nosotros aquí no lo veamos. ¿Cómo lo puedo saber? Aquí en Notepad++ me he instalado un plugin que es un editor hexadecimal. Si le doy a ver el código hexadecimal del fichero, fijaros lo que tenemos aquí al principio. ¿Recordáis los tres caracteres que os he dicho “acordaros de estos tres caracteres”? Lo podemos ver aquí también en hexadecimal: ef bb bf. Ese es el BOM, esa es la marca que indica que este es un fichero en formato UTF-8 e indica el orden de los bytes.

Este carácter es el que me está produciendo aquí este salto de línea, porque ese carácter está aquí incluido. Lo que ocurre es que el navegador tampoco me lo muestra aquí al ver el código fuente. Por tanto, me puedo volver loco, muy loco, buscando por qué me aparece aquí este margen. Y todo es debido a ese carácter invisible que no me aparece. ¿Cómo solucionamos este problema? Pues bien sencillo, la solución ya te la he dicho y es no almacenar el fichero en formato UTF-8, sino almacenarlo en formato UTF-8 sin BOM. Para eso nos vamos aquí al menú codificación, y le damos a “Convertir a UTF-8 sin BOM”. Pero aquí tenemos la duda, tenemos la pregunta que me hacían en un correo electrónico: ¿qué debo de usar, codificar o convertir? Codificar lo debería de usar cuando inicio un fichero desde cero, es decir, cuando no tiene contenido. O cuando quiero hacer algo raro como almacenar en un mismo fichero caracteres con dos codificaciones distintas, porque lo que estoy indicando es que a partir de este momento, el contenido que yo escriba lo quiero codificar con este juego de caracteres, pero el contenido que ya tiene el fichero, lo dejamos en el juego de caracteres que ya tenía. En nuestro caso no queremos hacer eso, no queremos dejar el fichero con la codificación anterior, sino que queremos transformar, convertir todos los caracteres a la nueva codificación. Por tanto debemos de usar convertir. Yo te puedo asegurar que nunca he usado codificar. Esta opción nunca la he necesitado y la verdad es que si yo fuese el diseñador del Notepad++ la escondería un poco para no causar confusión entre los usuarios. Así que en este caso vamos a usar “Convertir a UTF-8 sin BOM”. Fijaros como me aparece en rojo para indicarme que el fichero ha sido modificado y lo que me ponían en el correo electrónico, ahora ya lo puedo guardar porque el fichero ha sufrido una transformación. Al guardarlo me desaparece el disquete que se decía en el correo electrónico. El fichero no necesita guardarse porque no tiene ningún cambio y si me voy ahora al editor hexadecimal veréis que me han desaparecido esos tres caracteres que habían al principio. Ya no está el BOM, ya no está esa marca, ¿lo entendéis? Es bien sencillo. Voy a realizar lo mismo con todos los ficheros, los voy a convertir a UTF-8 sin BOM. Ya los tengo los tres en UTF-8 sin BOM y vuelvo aquí, recargo, y veréis que aparentemente no ha habido ningún cambio. Efectivamente, porque el navegador Google Chrome está preparado para trabajar con UTF-8 con o sin BOM. Pero ahora vamos a ver si se soluciona este problema, vamos a ver si desaparece este margen. Le doy a recargar y “ta chán”, ya no me sale ese margen. Genial, ¿no? Solucionado. Esto es muy importante que lo recordéis, porque cuando trabajemos con PHP es muy normal hacer cosas como ésta, es decir, construir una página web mediante trozos, mediante componentes que los vamos incluyendo, los vamos uniendo. Si nos despistamos y los componentes que vamos uniendo están almacenados en UTF-8 con BOM, nos aparecerá ese carácter no visible y nos romperá el diseño de la página web.

Por tanto, recordad: hay que almacenar los ficheros con UTF-8 sin BOM. Y para finalizar, un último detalle. Acordaros que debéis poner la etiqueta para indicar el juego de caracteres. Y este juego de caracteres que indicamos aquí debe de coincidir con el juego de caracteres que físicamente se está empleando para almacenar el fichero. Si yo aquí indico un juego de caracteres y almaceno el fichero con otro juego de caracteres, tendré problemas. Vamos a hacer una prueba. Por ejemplo, aquí tengo indicado UTF-8 como juego de caracteres para mi página y voy a cambiarlo a Latin1, por aquí está en algún sitio, pero bueno. Yo lo que hago es convertir a ANSI, fijaros como ahora me dice que tengo que guardar el fichero porque ha sufrido una transformación. Aquí me aparece efectivamente ANSI. Le doy a guardar. Y ahora cuando cargue la página, “ta chán”, ya no me aparece el carácter que me va a dar problemas. El carácter que me va a dar problemas es la vocal acentuada “á”. El resto de caracteres no me dan problema porque están entre los 128 primeros caracteres ASCII. Y esos caracteres se representan de igual forma en ASCII, en ISO-8859-1, en UTF-8. Como son los caracteres más comunes, siempre se representan igual, por eso no me dan problemas, los problemas me los dan los caracteres especiales. Vamos a hacer otra prueba. Si yo ahora le pongo “latin1” o también le podría poner “iso-8859-1” pues, se debe de arreglar el problema. Volvemos al navegador, le doy a recargar y ya me sale bien el carácter otra vez. Y ahora vamos a hacer la última prueba. Yo indico que mi juego de caracteres es en “latin”, lo tengo guardado en ANSI, bien es “latin1”. Le cambio la codificación y volvemos a UTF-8 sin BOM. Me vuelve a decir que lo guarde. Lo guardo. Recargar y “ta chán”, otra vez problema. Ahora me sale otro carácter distinto. En conclusión, hay que llevar mucho cuidado y, lo que ponga aquí, lo que indiquemos en el HTML, tiene que coincidir con la codificación física del fichero. En cuanto haya una discrepancia, en cuanto no coincida, empezaremos a tener problemas. Bien, espero que este vídeo te ayude un poco más a evitar los típicos problemas que aparecen al trabajar con los juegos de caracteres. Pero te vuelvo a recordar, el tema es muy complejo y hay que saber muchas cosas para hacer frente a todos los problemas que pueden surgir. Recuerda que este vídeo forma parte del curso “Introducción al desarrollo web” que está disponible en la dirección idesweb.es. Muchas gracias por tu atención. Vídeo: http://youtu.be/4vF41rQU_4Y HTML: tablas Más contenido

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).

Introducción al Desarrollo Web: HTML y CSS HTML: tablas

Vídeo: http://youtu.be/ZFrWfhxpP2U Hola, soy Guzmán Fernández García, desarrollador web, y en este vídeo que forma parte del curso “Introducción al desarrollo web”, voy a explicar el uso de tablas en HTML. Puedes encontrarme en mi web guzmanfernandez.com y en twitter como pieizquierdo, también puedes contactar conmigo a través de mi correo electrónico [email protected] ¿Qué son las tablas? Una tabla HTML, tal y como explica Wikipedia, es una forma gráfica de representar información de manera esquematizada, ordenada y compacta. “Voilà”, esto podría ser un buen ejemplo de tabla que representa a alumnos con sus respectivas notas. Y este sería el esquema HTML de la tabla anterior. Como puedes observar, las tablas se organizan en filas y celdas. Puede que eches de menos la organización en filas y columnas de los procesadores de texto, o que estés pensando en el por qué de la nota de Jordi, o… bueno, de momento nos tendremos que conformar con lo que hay: filas y celdas. La etiqueta table indica el inicio y cierre de la tabla. El resto de etiquetas necesariamente estarán recogidas entre

y . TR (Table Row) representa una nueva fila de la tabla. En el ejemplo tendríamos cuatro etiquetas tr. TD (Table Data Cell) es la etiqueta de último nivel y se traduce en una celda de datos en la tabla.

Estas son las tres etiquetas básicas y las más utilizadas. A continuación, te presento las grandes olvidadas que pueden ser útiles según el caso frente al que nos encontremos. No te agobies, con estas tres puedes trabajar sin problemas. Para añadir semántica a la tabla, contamos con la etiqueta th (Table Header Cell) que sustituye la etiqueta td para celdas de cabecera. Es posible utilizarlas en cualquier punto de la tabla, aunque su uso se recomienda para las primeras y las últimas filas y columnas de la tabla. Esta etiqueta también se puede utilizar para trabajar estilos; de hecho, verás que los navegadores destacan el texto de estas celdas en negrita. También es posible agrupar filas en tres bloques de estilos. thead agrupa una o más filas de cabecera, tbody se utiliza para agrupar filas de cuerpo, típicamente aquellas que contienen el grueso de los datos y tfoot, como cabría esperar, agrupa las filas del pie de la tabla. El código de esta tabla quedaría como aparece en pantalla. He omitido el código de las celdas para que resulte legible. He hablado de th, thead, tbody y tfoot para trabajar los estilos de la tabla y probablemente te estés preguntando cómo hacerlo. Te recuerdo que trabajarás estilos en el tema CSS. Puede que navegando por la web, te hayas encontrado con alguna tabla que tiene una cabecera como esta. Antes de intentar trabajar con combinaciones de celdas, te presento una nueva etiqueta: Caption añade un título sobre la tabla. De nuevo, en el ejemplo, he eliminado el código conocido para que resulte más fácil de leer. Igual que en los procesadores de texto, en HTML es posible combinar celdas. Para ello utilizamos dos atributos de las celdas: colspan y rowspan. Colspan y rowspan esperan un valor entero que especifique cuántas columnas o filas, respectivamente, ocupa la celda.

En el ejemplo, un valor de dos en el atributo colspan de la celda con el texto 2012, extiende la celda para que ocupe toda la fila. Un valor de dos en el atributo rowspan de la celda con el texto Enero, extiende la celda para que ocupe dos filas. Aquí puedes ver un ejemplo de uso de colspan y rowspan. Por supuesto, para que una celda pueda ocupar el espacio de otras, es necesario que ese espacio no se rellene, sino pueden ocurrir cosas como esta. Hasta aquí parece fácil, ¿verdad? Seguramente hayas echado de menos las columnas o, al menos, alguna forma de poder dar estilos por columnas. Para dar estilos por columnas podemos hacer uso de las etiquetas colgroup y col. La etiqueta col no tiene etiqueta de cierre, pero conviene cerrarla adecuadamente para cumplir con el estándar. El atributo span funciona de forma parecida en colgroup o col a como lo hacían colspan y rowspan para las celdas de la tabla. El valor del atributo indica el número de columnas que agrupará colgroup o col. Hay varias formas de utilizarlas, como puedes comprobar en los ejemplos. De nuevo, para aplicar estilos a las columnas, es necesario estudiar el tema CSS. En resumen, las etiquetas básicas para codificar una tabla en HTML son table para la tabla, tr para cada fila y td para las celdas. Para añadir un título a la tabla, utiliza la etiqueta caption entre las etiquetas table. Th, en sustitución de td, añade semántica especificando celdas de cabecera Las etiquetas que puedes usar para facilitar el trabajo posterior de CSS son las agrupaciones de filas: thead para las de cabecera, tbody para las filas de datos y tfoot para las del pie de la tabla, así como agrupaciones de columnas: colgroup y col. Los atributos colspan y rowspan de las etiquetas th y td sirven para extender las celdas y el atributo span de las etiquetas colgroup y col para extender columnas. Y para terminar, te dejo tres consejos que espero te sean útiles: 1. Utiliza tablas HTML exclusivamente para representar tablas y no caigas en la tentación de maquetar tu página con tablas: el código generado resulta farragoso, tu página no será accesible y además no es cool.

Antes se utilizaban las tablas para maquetar y, pese que a día de hoy puedas visitar algunas páginas conocidas que siguen haciendo uso de estas prácticas, como la de la CIA, hay más argumentos en contra que a favor. En la página www.hotdesign.com/seybold/spanish, puedes leer muchos más. 2. Repasa bien la combinación de celdas, recuerda que una mala codificación puede dar lugar a resultados desastrosos. 3. Utiliza la agrupación de filas y columnas para que el posterior trabajo de estilo con CSS resulte más sencillo. Puedes ampliar información y ver ejemplos utilizando tu buscador favorito, en alguna de las comunidades de desarrollo web como: webestilo.com o desarrolloweb.com o probando y modificando online los ejemplos Try it yourself de la w3schools. Y como todo, HTML se aprende trabajándolo, así pues, puedes intentar realizar estas tablas cuyas soluciones estarán disponibles en la página del curso. Ahora es un buen momento para pausar el vídeo, copiar el ejemplo y disfrutar de un poco de código. Puedes hacerme llegar cualquier duda a través de mi correo electrónico o de mi cuenta en twitter. Recuerda que este vídeo forma parte del curso “Introducción al desarrollo web”, disponible en la dirección idesweb.es. Muchas gracias por tu atención.

Vídeo: http://youtu.be/ZFrWfhxpP2U

HTML: imágenes Más contenido 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).



Introducción al Desarrollo Web: HTML y CSS 

HTML: imágenes

Vídeo: http://youtu.be/tnpPJou1EVA Hola, soy Sergio Luján Mora, profesor de informática de la Universidad de Alicante, y en este vídeo que forma parte del curso “Introducción al desarrollo web”, te voy a hablar del uso de las imágenes en las páginas web. Antes de empezar, me gustaría recordarte algunos de los sitios web en los que puedes encontrar más información sobre mí y sobre mi trabajo, y dos formas de contactar conmigo, a través de mi correo electrónico [email protected] y a través de mi cuenta en Twitter @sergiolujanmora. Las imágenes son el elemento principal que confiere a la Web su carácter de hipermedia, es decir, su capacidad de integrar en un único soporte, la página web, contenidos muy distintos como texto, imagen, vídeo, audio y otros. En algunos sitios web el uso de imágenes es escaso, y su ausencia no plantea ningún problema. En otros sitios web, cuando las imágenes no se visualizan, pueden aparecer algunos problemas de uso en la página. Sin embargo, en otros sitios web, la ausencia de imágenes puede hacer que el sitio web sea totalmente inútil. La etiqueta para insertar una imagen en HTML es . Si consultamos la documentación oficial, de HTML 4 y de HTML5 del World Wide Web Consortium, el W3C, veremos que no ha habido grandes cambios en la sintaxis de esta etiqueta. Debido a que no ha habido grandes cambios, en este vídeo me voy a centrar en HTML4 y XHTML 1.0. Además, la especificación de HTML5 no está terminada, por lo que puede sufrir variaciones. La etiqueta tiene dos atributos obligatorios, src y alt. El atributo src indica la ruta en la que se encuentra la imagen, mientras que el atributo alt es el texto alternativo que se debe visualizar cuando la imagen aún no se ha cargado o no se puede cargar por diversas razones, como puede ser que no exista o que su formato no sea válido. El atributo alt es muy importante para la accesibilidad de una página web. La etiqueta posee los siguientes atributos opcionales: width y height para definir las dimensiones de la imagen, el ancho y el alto; longdesc para indicar la URL de una página en la que se proporciona una descripción larga de la imagen, este atributo también es muy importante para la accesibilidad de una página; y por último, ismap y usemap para definir mapas de imagen que veremos ahora después. Por último, también existen unos atributos obsoletos que puedes encontrar alguna vez en alguna página web antigua o en algún libro o tutorial, pero que no se deben utilizar ya que su función ha sido sustituida por propiedades de CSS. En HTML también se puede incluir una imagen como fondo de ciertos elementos, como por ejemplo como fondo de la propia página o de una tabla, pero este uso está totalmente desaconsejado y se debe realizar mediante CSS. Para usar la etiqueta no hay que saber mucho más: como ves, su uso es muy sencillo. En este ejemplo, en el primer caso se está incluyendo en la página web una imagen en formato JPG que se encuentra en el mismo directorio en el que se encuentra la página web, mientras que en el segundo caso se está incluyendo una imagen en formato PNG que se encuentra en otro servidor web. Es por ello que se debe indicar la ruta completa de acceso a la imagen. Sin embargo, al utilizar la etiqueta , la primera pregunta que surge es: ¿qué formatos gráficos se pueden emplear con la etiqueta ? En la documentación oficial de Mozilla, en el apartado sobre la etiqueta , podemos leer que el lenguaje HTML no impone una lista de formatos gráficos que deban ser soportados, sino que depende del agente de usuario, es decir del navegador.

En el caso de Mozilla, se aceptan todos estos formato, pero en la práctica, los que son considerados como el estándar son los tres primeros: JPG, GIF y PNG. Vamos a ver a continuación las características principales de cada uno de estos tres formatos. El primero, el formato GIF, es el más antiguo y el primero que se empleó en las páginas web. Sus características más particulares son que sólo soporta paletas de colores con 256 colores, permite transparencia pero de un solo color y permite realizar animaciones sencillas. Como el formato GIF sólo permite 256 colores, se suele emplear una técnica llamada dithering, que permite representar una imagen como una fotografía, con una variedad de colores prácticamente infinita, mediante un número limitado de colores, en este caso, 256 colores. Básicamente, esta técnica consiste en colocar dos puntos juntos con colores diferentes para crear la ilusión de que existe un tercer color. Por ejemplo, en esta imagen, mediante la colocación de los puntos rojos y azules se logra la ilusión de que el color que hay es el violeta. El efecto final puede ser muy sorprendente y puede engañar al ojo humano, pero hoy no es muy necesario utilizar esta técnica ya que existen otros formatos de imagen que permiten el uso de millones de colores. Por ejemplo, aquí tenemos una fotografía de un lindo gatito. Al ver un detalle de cerca no se aprecian cambios bruscos. La siguiente imagen es la imagen inicial convertida a la paleta de 216 colores seguros para la Web sin utilizar la técnica de dithering: se pueden apreciar los cambios bruscos y grandes zonas planas de un mismo color. En la siguiente imagen se muestra la misma imagen con la misma paleta de colores, pero esta vez sí que se ha aplicado la técnica de dithering: se observa que la mejora es enorme respecto a la anterior. Finalmente, otra vez la misma imagen, pero esta vez con un paleta de 256 colores optimizada: al poder seleccionar los colores de la paleta, la mejora es enorme y el parecido con la imagen original es asombroso. El formato JPG es quizás el más popular en la Web, y ello es debido a que permite trabajar con imágenes con más de 16 millones de colores y con tamaños de ficheros muy pequeños. Esto se logra mediante el uso de algoritmos de compresión con pérdidas. La compresión con pérdidas significa que una vez comprimida una imagen, al descomprimirla no se obtendrá la imagen original, sino una aproximación. Para entenderlo, veamos este ejemplo real. Tenemos esta fotografía comprimida con el formato JPG. Al 100% de calidad, la fotografía ocupa 492 KB. Al 50% de calidad, la fotografía ocupa 57 KB. Y al 25% de calidad, la fotografía ocupa sólo 34 KB. A simple vista no se aprecian grandes diferencias entre estas tres fotografías, parece que poseen la misma calidad. Sin embargo, al aumentar un detalle de la fotografía, se empiezan a ver los famosos “artefactos” que introduce el formato JPG. El último formato que vamos a ver es PNG. Este es un formato que se creó específicamente para la Web y ofrece una gran variedad de posibilidades. Si se compara con el formato JPG, ofrece la máxima calidad, ya que utiliza un formato de compresión sin pérdidas, pero claro, esto es a costa de producir ficheros con un tamaño superior al formato JPG. Por último, vamos a ver los mapas de imagen.

Los mapas de imagen también se llaman imágenes sensibles, y son imágenes en las que se han definido ciertas zonas llamadas “activas”, “sensibles” o “calientes” que son enlaces a otras páginas. Los mapas de imagen se pueden procesar en el lado del cliente o en el lado del servidor. En este vídeo nos vamos a centrar en los mapas del lado del cliente, ya que son los más comunes en la actualidad. Un mapa de imagen en el lado del cliente se define con dos etiquetas de HTML: Con la etiqueta se define el mapa de imagen, con sus distintas zonas activas. El mapa de imagen debe tener un nombre, ya que ese nombre se emplea en la etiqueta para relacionar el mapa de imagen con la imagen correspondiente. En la etiqueta que representa la imagen del mapa se utiliza el atributo usemap para indicar el nombre del mapa que se quiere utilizar. Cada zona activa o sensible del mapa de imagen se define mediante una figura geométrica. Y existen tres tipos de figuras geométricas que se pueden emplear: Todas las zonas activas se definen con la etiqueta , que posee los atributos shape para indicar el tipo de figura geométrica, coords para indicar las coordenadas de la figura geométrica, href para indicar la URL del destino del enlace y alt para definir el texto alternativo que representa la figura geométrica en el caso de que no se pueda visualizar la imagen. Recuerda que este atributo alt ayuda a mejorar la accesibilidad de la página web. El tipo de figura geométrica “rect” define un rectángulo que está definido por las coordenadas (x, y) de su esquina superior izquierda y las coordenadas (x, y) de su esquina inferior derecha. En HTML, la esquina superior izquierda corresponde a la posición (0,0). El tipo de figura “circle” define un círculo que está definido por las coordenadas (x, y) del centro y el radio r. Finalmente, el tipo de figura “poly” define un polígono , regular o irregular, de n lados definido por las coordenadas (x, y) de los vértices que forman el polígono. A continuación te muestro un ejemplo completo extraído del sitio web W3Schools. La imagen que podemos ver representar una parte del sistema solar. Sobre esta imagen se han definido tres zonas activas: el Sol por medio de un rectángulo, Mercurio mediante un círculo de radio 3 píxeles y Venus con otro círculo de radio 8 píxeles. Muy importante, fíjate que cuando se indica el nombre del mapa en el atributo usemap de la etiqueta se debe escribir al principio el símbolo almohadilla. En este otro ejemplo, extraído de la especificación oficial de HTML5, se han definido cuatro zonas activas en la imagen que se muestra: un rectángulo rojo con un hueco, un círculo verde, un triángulo azul y una estrella amarilla de cuatro puntas. Las dos primeras figuras se pueden definir con las figuras geométricas básicas, el rectángulo y el círculo, pero el triángulo y la estrella de cuatro puntas se tienen que definir con el polígono. Fíjate otra vez cómo se ha indicado el símbolo almohadilla antes del nombre del mapa en el atributo usemap. Por último, ya sabemos crear un mapa de imagen, pero ¿para qué se usan en las páginas web? Bueno, eso depende de tu imaginación, tú le debes buscar los posibles usos, pero para ayudarte un poco, te voy a contar tres usos típicos. Por supuesto, se pueden utilizar para verdaderos mapas geográficos, por ejemplo, para seleccionar las oficinas o tiendas de una empresa en una región particular. También se emplean cómo método de navegación cuando se utiliza una barra de menú especial, por ejemplo creada mediante iconos.

Y por último, antes se utilizaba bastante en la página principal o portada de un sitio web en el que se daba a conocer cada una de las secciones del sitio web por medio de una imagen. Recuerda que este vídeo forma parte del curso “Introducción al desarrollo web” que está disponible en la dirección idesweb.es. Muchas gracias por tu atención. Vídeo: http://youtu.be/tnpPJou1EVA HTML: validación del código Más contenido 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.



Introducción al Desarrollo Web: HTML y CSS 

HTML: validación del código

Vídeo: http://youtu.be/CHfYRVHKMtc Hola, soy Sergio Luján Mora, profesor de informática de la Universidad de Alicante, y en este vídeo que forma parte del curso “Introducción al desarrollo web”, te voy a hablar de la validación del código HTML y de lo importante que es. Antes de empezar, me gustaría recordarte algunos de los sitios web en los que puedes encontrar más información sobre mí y sobre mi trabajo, y dos formas de contactar conmigo, a través de mi correo electrónico [email protected] y a través de mi cuenta en Twitter @sergiolujanmora. El lenguaje HTML es un lenguaje, y como tal, tiene su vocabulario, sus palabras con sus significados, y su gramática, sus reglas que nos indican cómo podemos combinar sus palabras para formar textos complejos.

Cuando escribimos en español, podemos cometer faltas de ortografía (cuando hablamos, no se notan mucho). Además, también hay reglas gramaticales que debemos cumplir, como por ejemplo la regla de concordancia de género y número entre un sustantivo y sus adjetivos, o la concordancia de número entre el sujeto y el verbo. En HTML ocurre lo mismo, podemos cometer errores y estos errores pueden afectar de forma dramática a la visualización de la página. ¿Cómo podemos estar seguros de que nuestro código HTML es correcto y no contiene errores? Muy fácil, mediante la validación del código fuente. Pero antes de ver cómo se valida el código fuente de una página web, debemos de hacer memoria y recordar que el lenguaje HTML fue desarrollado por Tim Berners-Lee en el año 1990 tomando como base SGML. Desde su nacimiento, el lenguaje HTML ha ido cambiando: se han añadido y quitado etiquetas y atributos, y el funcionamiento de algunas etiquetas ha ido cambiando con el paso del tiempo. Te tendría que contar algo de la historia del lenguaje HTML para que lo entiendas mucho mejor, pero eso lo haré en otro vídeo. Ahora sólo nos interesa saber que existen diferentes versiones de HTML. En la actualidad, las tres versiones principales que conviven son HTML 4.01, XHTML 1.0 y HTML5, aunque ya se empieza a hablar de HTML5.1. Lo primero que tienes que hacer cuando comiences a escribir una nueva página web, es decidir qué versión de HTML vas a utilizar. La versión de HTML que utilizas en una página web se indica con la instrucción DOCTYPE al principio del código. Esto del DOCTYPE es junto con el juego de caracteres uno de los mayores misterios para mucha gente que lleva años y años haciendo páginas web. Mucha gente no sabe para qué sirve el DOCTYPE ni qué valor debe poner. Prueba de ello es este estudio en el que se analizaron 1.788.294 páginas web y se encontraron 13.941 valores distintos de DOCTYPE. No existen tantos DOCTYPEs oficiales, esto muestra que en muchas ocasiones la gente al final acaba inventándose su propio DOCTYPE. Te estarás preguntando, ¿Qué valor de DOCTYPE debo usar en mis más páginas web? Como te he dicho antes, depende de la versión de HTML que estés utilizando. En varios sitios web, como está página del W3C, puedes encontrar una lista con las declaraciones de DOCTYPE recomendadas.

Si utilizas la versión 4 de HTML, debes utilizar este DOCTYPE. Si te inclinas por XHTML, debes utilizar este otro DOCTYPE. Y por último, en HTML5, te lo han puesto bien fácil. No deberías tener problemas para recordar este DOCTYPE. ¿Y qué son esos tres DOCTYPES que aparecen en la versión de HTML 4.01 y en XHTML 1.0? Eso son variantes que existen dentro de una misma versión, y para una nueva página web te debes olvidar de ellas, debes usar la variante estricta. Las otras variantes, la transicional y la de marcos (frameset) son necesarias cuando estás realizando la migración de un sitio web con una versión antigua de HTML a una versión moderna y necesitas conservar ciertas características desaconsejadas. Recuerda que el DOCTYPE debe ser la primera línea en tu código HTML. ¿Y cómo realizo la validación del código fuente? Existen varias herramientas gratuitas disponibles online, aunque también existen otras herramientas más sofisticadas de pago. Mi favorita es la herramienta oficial que ofrece el World Wide Web Consortium, el W3C, el organismo internacional que vela por el correcto desarrollo de la Web. Su servicio de validación es muy sencillo de utilizar y te permite validar una página web introduciendo su URL si la página está publicada en la Web, también puedes subir el fichero con el código fuente, y por último, también puedes copiar directamente el código fuente. Sin embargo, este no es el único servicio de este estilo y otros que te recomiendo son el validador del Web Design Group, y el validator.nu que ofrece algunas opciones muy interesantes. ¿Y es muy importante esto de la validación? ¿Qué pasa si no valido mis páginas web? Pues bien sencillo, en muchas ocasiones, que una página web se visualice de distinta forma en distintos navegadores se debe a que la página web contiene errores. Eso te lo explico en otro vídeo, HTML5: ¿Por qué es importante escribir código correcto?, que está dividido en tres partes y que te aconsejo que veas para entenderlo y estar convencido de la importancia de la validación. Para terminar, te voy a hacer una demostración de validación, vamos a validar la página principal del sitio web de este curso, de la Universidad de Alicante, el sitio donde trabajo, y de La Moncloa, el gobierno de mi país. Esta es la página principal del servicio de validación de lenguaje de marcado del W3C. Como vamos a validar tres páginas que están publicadas en Internet, voy a usar la primera pestaña, que me permite introducir la dirección, la URL de la página web que quiero validar. Introduzco la dirección del sitio web de este curso, idesweb.es, y le doy al botón “Check”, comprobar, validar. Cuando me sale aquí este mensaje en color verde significa que la validación ha sido correcta. En algunas situaciones me puede aparecer alguna advertencia, como en este caso que me dice que hay un warning. Pero este warning se debe a que la página está realizada con HTML5 y el validador me avisa de

que estoy usando características experimentales ya que HTML5 no es, por ahora, una recomendación oficial. Así que hay cosas que pueden cambiar. Volvemos a la página principal del validador y ahora voy a validar la página principal de la Universidad de Alicante. Introduzco su URL y le vuelvo a dar al botón “Check”. Fijaros que no estoy activando ninguna de estas opciones adicionales, para una validación simple no las necesito. Le doy al botón de validar, espero unos segundos y “ta chán”. Problemas. Se me indica que se han encontrado algunos errores mientras se validaba este documento que tiene la versión HTML5 y en concreto se han encontrado 6 errores y 2 advertencias. Para ver los errores, desplazo la página hacia abajo y me aparece el informe de errores: me aparece la línea, la columna y el mensaje de error. Y un fragmento del código donde está el error. Estos mensajes de error me ayudan a localizar mis errores en mi código y a resolverlos. Un consejo muy importante: nunca comenzar a resolver, a solucionar los errores por el último, eso es un error. Hay que ir siempre al primer error, ya que en muchas ocasiones, al corregir el primer error desaparecen el resto de errores. Por último vamos a validar la última página web que es la de La Moncloa: www.lamoncloa.gob.es. Le damos a validar, y esperamos, esperamos. “Ta chán”, también contiene errores, y 38 errores. Y a continuación nos aparece el listado con los 38 errores que se han detectado. Como he explicado antes, hay que corregir los errores desde el principio, desde el primero. Y al corregir un único error, podrían desaparecer todos los de la página. Es decir, que en esta página, realmente quizás haya menos de 38 errores. Podemos ver que el primer error se debe a que aquí hay un valor del atributo id que ya ha sido definido. Las especificación de HTML nos indica que el valor del atributo id debe ser único en la página web. Y se nos indica justo debajo la otra línea del código donde ya se ha definido ese atributo id. En la página de La Moncloa ocurre algo curioso. Si copiamos la dirección y nos vamos y visitamos la página de La Moncloa, lo curioso que os quiero enseñar es que se han puesto la medalla, se han puesto la insignia de que el HTML de esta página es válido. Y ya hemos comprobado que no, que no es válido. Pero bueno, qué se puede esperar de un político, verdades no muchas. Como has podido ver, validar una página web se hace en pocos segundos, así que no tienes excusa para no hacerlo. Recuerda que este vídeo forma parte del curso “Introducción al desarrollo web” que está disponible en la dirección idesweb.es. Muchas gracias por tu atención. Vídeo: http://youtu.be/CHfYRVHKMtc HTML5: introducción Más contenido

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.

Introducción al Desarrollo Web: HTML y CSS HTML5: introducción

Vídeo: http://youtu.be/DdXBcoaFPro Hola, soy Sergio Luján Mora, profesor de informática de la Universidad de Alicante, y en este vídeo que forma parte del curso “Introducción al desarrollo web”, te voy a ayudar con tus primeros pasos con el lenguaje de etiquetado HTML5. En el vídeo “Historia de HTML”, te expliqué la evolución del lenguaje de marcado o etiquetado HTML, el lenguaje con el que se crean las páginas web desde que Tim Berners-Lee creó la primera página web a finales de 1990 en el CERN. Recuerda que después de HTML4, el W3C, el organismo que desarrolla los estándares de la Web inició el desarrollo de XHTML. Sin embargo, unos años después, el W3C canceló el desarrolló de XHTML y se unió a un grupo independiente de desarrolladores web con el objetivo de desarrollar HTML5. Mucha gente tiene una gran confusión con HTML5, se piensa que es algo totalmente distinto a HTML4 y XHTML. Y no es así. Fijémonos en este gráfico: cada rectángulo representa una etiqueta de HTML 4. En HTML5, algunas de las etiquetas han desaparecido porque se han quedado viejas y ya no se deben emplear. Otras etiquetas han variado un poco su funcionamiento o incluyen atributos nuevos. Y por último, se han añadido etiquetas y atributos nuevos. Pero como podemos ver, la mayor parte de HTML5 sigue siendo lo mismo que ya existía en HTML4.

Por ejemplo, si consultamos una referencia de las etiquetas de HTML5, como ésta que existe en W3Schools, veremos que hay etiquetas como frame, frameset o noframes que aparecen marcadas como “no soportadas en HTML5”, ya no se deben emplear. También hay etiquetas como header, keygen, main, mark, menuitem, meter y nav que aparecen marcadas como etiquetas nuevas de HTML5. En el momento de grabar este vídeo, HTML5 todavía sigue en desarrollo. La última versión publicada tiene fecha del 16 de septiembre de 2014 y posee el estado de “recomendación propuesta”, lo que significa que es ya casi la versión final. ¿Cuándo se espera que esté terminado HTML5? El W3C tiene publicado un plan u hoja de ruta en el que se explica el proceso de estandarización de HTML5. Según este plan, se espera que HTML5 adopte el estado de recomendación durante el último cuatrimestre del año 2014. El W3C no para, y aunque no esté finalizado HTML5, ya está trabajando en la próxima versión, la versión 5.1. HTML 5.0 será una especificación oficial a finales del año 2014, y la versión 5.1 a finales del año 2016. Aunque todavía no esté terminada su especificación, ya puedes empezar a usar HTML5, aunque con mucho cuidado. ¿Por qué con cuidado? Porque no todos los navegadores admiten las nuevas características de HTML5. Existen varios sitios web en los que se puede comprobar la compatibilidad de los navegadores con HTML5. Por ejemplo, en HTML5Test, el test indica que la versión 37 de Google Chrome, la última versión en el momento de grabar este vídeo, obtiene 512 puntos de compatibilidad de un máximo de 555 puntos, lo cual está muy bien. Sin embargo, Internet Explorer 11 obtiene un pobre resultado, sólo 365 puntos del máximo de 555, un resultado muy muy muy malo. En HTML5Test también es posible encontrar una comparativa de distintos navegadores. También existe el sitio web Can I use?, en el que se puede consultar la compatibilidad de las novedades de HTML5 y CSS3 con los distintos navegadores. Por ejemplo, el nuevo control input type date tiene como propósito visualizar un calendario para que el usuario pueda seleccionar una fecha.

Según Can I use?, este control sólo se puede emplear en Google Chrome y Opera, pero no funciona en Internet Explorer, Firefox y Safari. Me estoy refiriendo a las versiones de estos navegadores de escritorio, de ordenador. ¿Lo podemos verificar? Sí, por ejemplo en el sitio web “The Current State of HTML5 Forms” podemos verificar el funcionamiento de los nuevos controles de los formularios. Efectivamente, el control de tipo date se visualiza correctamente en Google Chrome, pero en Mozilla Firefox se visualiza simplemente como un cuadro de texto, igual que en Internet Explorer. Para empezar a aprender HTML5 puedes consultar documentación sobre HTML5 o sobre las versiones anteriores de HTML 4 o XHTML 1. Te conviene conocerlas todas, y las diferencias que hay entre unas y otras, porque ahí fuera, en Internet, te vas a encontrar de todo. Para ser un buen profesional del desarrollo web necesitas conocer las tres versiones. De todo ello te hablo en el vídeo “¿Cuál es el mejor: HTML, XHTML, HTML5?”. Una vez que ya conozcas las versiones anteriores de HTML, ya puedes pasar a aprender HTML5. Existen muy buenos recursos para ello. El primero que te recomiendo es “Dive into HTML5”, de Mark Pilgrim. Este sitio web se comenzó a desarrollar en el año 2009 y no se actualiza desde el 2011, pero en HTML5Doctor existe una copia que sí que se intenta actualizar con las últimas novedades del lenguaje. También te recomiendo que consultes el sitio web W3Schools, que contiene tanto un tutorial como una referencia de todas las etiquetas de HTML5. Y por supuesto, también puedes consultar el resto de vídeos del curso iDESWEB. Ya para terminar, me gustaría recordarte algunos de los sitios web en los que puedes encontrar más información sobre mí y sobre mi trabajo, y dos formas de contactar conmigo, a través de mi correo electrónico [email protected] y a través de mi cuenta en Twitter @sergiolujanmora. Recuerda que este vídeo forma parte del curso “Introducción al desarrollo web” que está disponible en la dirección idesweb.es. Muchas gracias por tu atención. Vídeo: http://youtu.be/DdXBcoaFPro Actividad 1.Acerca de HTML5, se puede afirmar que:

a) HTML5 es muy distinto de HTML4. b) HTML5 es todo lo que había en HTML4 más algunas cosas nuevas. c) La mayor parte de HTML5 sigue siendo igual a HTML4.

Comprobar respuesta

¡Correcto! HTML5 es básicamente HTML4 con algunas mejoras; HTML5 también elimina algunas características de HTML4 que ya no tienen sentido. 2. Según el sitio web HTML5 Test, ¿qué navegador web obtiene una mayor puntuación de compatibilidad con HTML5?

a) Google Chrome. b) Microsoft Internet Explorer. c) Mozilla Firefox.

Comprobar respuesta

¡Correcto! En el momento de crear el contenido de la lección era así, pero esto puede cambiar en cualquier momento.

Introducción al Desarrollo Web: HTML y CSS HTML5: ¿Qué es HTML5?

Vídeo: http://youtu.be/1hR7EtD6Bns Hola, soy Sergio Luján Mora, profesor de la Universidad de Alicante, y en este videotutorial vamos a ver qué es HTML5. Hoy en día, todo el mundo conoce las tres uves dobles, la World Wide Web, la Web, el invento que más ha cambiado nuestras vidas en los últimos 15 años. La Web, es un sistema de distribución de información basado en hipertexto e hipermedia accesible a través de Internet.

Un elemento esencial de la Web es HTML, el lenguaje de marcado que se emplea para crear las páginas web. HTML permite describir la estructura y el contenido de una página web, principalmente texto, aunque también permite incluir otros objetos como imágenes y vídeos. HTML5 es la quinta y última versión, por ahora, del lenguaje de etiquetado HTML. Sin embargo, como veremos más adelante, HTML5 no es sólo eso, es algo más. HTML es un estándar de facto desarrollado por el World Wide Web Consortium, un consorcio internacional que produce recomendaciones para la World Wide Web. El desarrollo del lenguaje de marcado HTML ha ido parejo al desarrollo del World Wide Web Consortium, que fue fundado en 1994. 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. En diciembre de 1997 apareció HTML 4. Y en enero de 2000 se publico XHTML 1.0, una reformulación de HTML 4 utilizando XML. Finalmente, a mediados de 2007 el W3C comenzó a trabajar en HTML5, versión que está actualmente en desarrollo y que se espera que se termine en 2014. Pero las páginas web no se desarrollan solamente con el lenguaje de marcado HTML. También se emplean otras tecnologías como las hojas de estilo en cascada, la jerarquía de objetos DOM y el lenguaje interpretado JavaScript. El uso combinado de estas cuatro tecnologías se conoce como DHTML, el HTML dinámico, que permite crear sitios web interactivos. Además del HTML dinámico existen otras tecnologías, como el API de programación XHR, XMLHttpRequest, el metalenguaje XML y el formato de intercambio de datos JSON. Todo ello se conoce como AJAX, una técnica de desarrollo web que permite crear aplicaciones interactivas que se ejecutan en el navegador. Desde hace un par de años, a AJAX se le han unido una serie de nuevas tecnologías. Estas tecnologías están en desarrollo y en algunos casos existen varias alternativas que realizan la misma función. A todas ellas se las conoce como HTML5, aunque lo más correcto sería llamarlas “la familia de tecnologías HTML5”. Veamos que nos ofrece cada una de ellas. HTML5 es el nuevo lenguaje de marcado que se ofrece con dos sintaxis: sintaxis de HTML y sintaxis de XHTML. Como he dicho antes, se espera que en 2014 se publique la versión final, ya que lo que tenemos ahora mismo es un borrador. El lenguaje de marcado HTML5 define nuevas etiquetas y atributos que añaden una mayor capacidad semántica al lenguaje.

Una de las nuevas tecnologías de la familia HTML5 es el canvas, que tiene asociada una nueva etiqueta HTML. El canvas o lienzo permite definir un área dentro de una página web en la que se puede dibujar mediante un API para JavaScript. Las posibilidades que ofrece esta tecnología son enormes. Por ejemplo, permite el desarrollo de juegos online, ya no es necesario el uso de Flash, o permite crear aplicaciones de dibujo como esta que vemos en esta imagen. Otra de las tecnologías de HTML5 es SVG, un lenguaje de etiquetas basado en XML que permite crear gráficos vectoriales. Con SVG se pueden crear gráficos utilizando un lenguaje similar a HTML. Otra de las tecnologías de la familia HTML5 es el API de geolocalización para JavaScript, que permite obtener la localización del usuario, siempre que el dispositivo que utilice ofrezca esa información y siempre que el usuario lo permita. La tecnología de CACHE permite indicar aquellos recursos de una página web o una aplicación web que se desea que se almacenen de forma local. De esta forma se mejora el rendimiento y además permite descargar todos los contenidos necesarios y trabajar en local. Mientras que la tecnología de base de datos es un API que ofrece la posibilidad de almacenar información en local en el navegador mediante una base de datos SQL Lite. Con esta tecnología se pueden realizar aplicaciones como ésta, donde el usuario puede crear notas persistentes que conservan la posición y la información aunque se abandone la página web. Por último, los WEB WORKERS es otra API para JavaScript que permite crear múltiples hilos de ejecución que se ejecutan en paralelo. Ahora bien, de todas estas tecnologías, ¿cuáles podemos utilizar hoy en día? Es difícil responder esta pregunta, porque existen múltiples navegadores con múltiples versiones, cada uno con un nivel de soporte diferente. Pero hay algunos sitios web que nos pueden ayudar. Por ejemplo, el sitio web “When can I use…” ofrece tablas de compatibilidad de HTML5, CSS3, SVG y otras características en diferentes navegadores y diferentes plataformas. El sitio web “findmebyIP” ofrece los niveles de compatibilidad de diferentes navegadores en Windows y Macintosh. Este mismo sitio web también nos permite conocer el nivel de compatibilidad de nuestro navegador, ya que lo detecta automáticamente y nos muestra las características de HTML5 que admite.

El sitio web “The HTML5 Test” también permite conocer el nivel de soporte de nuestro navegador y de otros navegadores. Se diferencia de los anteriores porque ofrece una puntuación, lo cual hace que las comparaciones entre navegadores sea más sencillas. Por último, si quieres aprender más cosas sobre HTML5, te recomiendo el sitio web “HTML5 Rocks” desarrollado por Google. En él encontrarás numerosos ejemplos y tutoriales que te mostrarán las fantásticas posibilidades de HTML5. Y con esto finaliza este videotutorial sobre las tecnologías que forman la familia HTML5. Si necesitas más información o quieres contactar conmigo, en la página web http://desarrolloweb.dlsi.ua.es podrás encontrar más información sobre el desarrollo web o también puedes contactar directamente conmigo a través de mi dirección de correo electrónico [email protected]. Vídeo: http://youtu.be/1hR7EtD6Bns Actividad 1. ¿Qué es JSON?

a) Un formato de intercambio de datos. b) Un formato de presentación visual de las páginas web. c) Un formato de ejecución de una página web.

Comprobar respuesta

¡Correcto! JSON significa JavaScript Object Notation y se emplea para serializar estructuras de datos en JavaScript. 2. ¿Qué es AJAX?

a) Un formato de presentación visual de las páginas web. b) Un lenguaje de programación específico para páginas web. c) Una técnica de desarrollo que permite crear aplicaciones interactivas que se ejecutan en el navegador.

Comprobar respuesta

¡Correcto! AJAX significa Asynchronous JavaScript And XML y permite crear páginas web en las que cambia su contenido sin que se tenga que recargar la página. 3. ¿Que nuevas etiquetas o tecnologías podemos usar en HTML5?.

a) La etiqueta , que permite definir una area dentro de la página web donde dibujar mediante Javascript. b) La etiqueta , que que nos permite introducir gráficos vectoriales. c) Los Web Workers, que nos permiten lanzar varios hilos de ejecución en Javascript. d) Todas las anteriores.

Comprobar respuesta

¡Correcto!

HTML5: de HTML4 a HTML5 Más contenido 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.

Introducción al Desarrollo Web: HTML y CSS HTML5: de HTML4 a HTML5

Vídeo: http://youtu.be/vRqQRrULSxI Hola, soy Sergio Luján Mora, profesor de informática de la Universidad de Alicante, y en este vídeo que forma parte del curso “Introducción al desarrollo web”, te voy a explicar cómo emplear los nuevos elementos semánticos de HTML5 para transformar la estructura de una página web de las versiones antiguas de HTML a la última versión. En las versiones anteriores de HTML existían dos enfermedades terribles, la spanmania y la divitis. Estas enfermedades pueden seguir existiendo en HTML5, así

que presta mucha atención a este vídeo, ya que te voy a explicar cómo las puedes evitar. En la Web se pueden encontrar varios artículos que explican los síntomas de estas dos enfermedades y sus posibles curas. Incluso en la Wikipedia se puede encontrar un artículo dedicado a las etiquetas span y div en el que se comenta el abuso en el uso de estas dos etiquetas. Respecto el abuso en el uso de la etiqueta span, la spanmania, es muy común encontrar situaciones como esta. O incluso a veces he visto barbaridades como esta otra, en la que se emplea un span para envolver todo el contenido de una página web. Estos dos errores se arreglan fácilmente, ya que se pueden emplear las etiquetas que ya existen en el código y en muchas casos no hace falta añadir la etiqueta span. Respecto a la etiqueta div, la divitis, es muy común encontrar situaciones como esta, en la que se anida un div dentro de otro div, y de otro div, y así varias veces. Hay páginas web en las que se pueden encontrar verdaderas barbaridades, como la página principal de un famoso diario deportivo que tiene más de mil etiquetas div. En HTML5 se han añadido etiquetas nuevas que ayudan a evitar el abuso de las etiquetas span y div. Vamos a ver a continuación cómo se tienen que usar estas etiquetas para estructurar correctamente una página web con HTML5. Esta imagen muestra la estructura típica de una página web escrita con las versiones anteriores de HTML. Esta página contiene: Una cabecera. Una barra o menú de navegación. Un panel con información adicional, como por ejemplo noticias. La zona de contenido principal formada por dos entradas o artículos. Una imagen en una de las entradas. Y un pie de página. Con HTML5, todas estas etiquetas se sustituyen por nuevas etiquetas específicas para definir regiones especiales que tienen las páginas web. La cabecera se etiqueta con header.

La barra o menú de navegación con nav. Un panel con información adicional con aside. La zona de contenido principal con main. Las entradas o artículos con article. Una imagen con figure. Y el pie de página con footer. En algún caso puede ser difícil decidir cuál es la etiqueta más adecuada para una región de una página web. Esta imagen extraída de HTML5Doctor es un diagrama de flujo que, mediante varias preguntas, ayuda a decidir cuál es la etiqueta más adecuada según la función que realiza la región que se quiere etiquetar dentro de la página web. A continuación vamos a ver parte por parte cómo se transforma una página web de una versión antigua de HTML a HTML5. En primer lugar vamos a ver el código HTML de la cabecera. Este es el típico código de una cabecera de una página web: un div y un h1. En realidad, en muchos casos, simplemente es necesario el h1. Pero si por alguna razón, es necesario utilizar un div para definir algunas características de la presentación del encabezado, es mejor utilizar la nueva etiqueta header. Ahora la barra o menú de navegación del sitio web. Una barra o menú de navegación es un conjunto de enlaces. Por tanto, se debe etiquetar como una lista, ordenada o no ordenada. La etiqueta div que envuelve a la lista se debe cambiar por la etiqueta nav en HTML5. Un panel con información adicional, contiene información que complementa a la información principal y que no es esencial. Por ejemplo, un panel de este tipo puede ser una región con noticias o anuncios. Para este tipo de contenido se debe emplear la etiqueta aside en HTML5. Vamos a ver a continuación cómo etiquetar la zona de contenido principal que está formada por una serie de entradas o artículos. La zona de contenido principal que agrupa todas las entradas se puede etiquetar con main, y cada una de las entradas o artículos con la etiqueta article. Respecto a las imágenes, esta es la forma tradicional de etiquetar una imagen. No existe ninguna relación entre una imagen y su título. Sin embargo, en HTML5 esto está

resuelto, ya que existe la etiqueta figure y la etiqueta figcaption que permite definir el título de una figura. Muy importante, la etiqueta figure no sólo se emplea para etiquetar una imagen. También puede etiquetar otras cosas, como un fragmento de código, o una cita. Por último, el pie de página. En el pie de una página web suele aparecer el correo de contacto, el aviso legal, la información de copyright o información similar. En HTML5 se debe emplear la etiqueta footer para etiquetar este contenido. Como ves, transformar una página web de HTML antiguo a HTML5 es muy sencillo, simplemente hay que aprender a utilizar la etiqueta adecuada para cada región de una página web. Ya para terminar, me gustaría recordarte algunos de los sitios web en los que puedes encontrar más información sobre mí y sobre mi trabajo, y dos formas de contactar conmigo, a través de mi correo electrónico [email protected] y a través de mi cuenta en Twitter @sergiolujanmora. Recuerda que este vídeo forma parte del curso “Introducción al desarrollo web” que está disponible en la dirección idesweb.es. Muchas gracias por tu atención. Vídeo: http://youtu.be/vRqQRrULSxI Actividad 1. ¿Qué etiquetas añade HTML5 para estructurar una página web?

a) header, nav, aside, footer. b) header, article, chapter, footer. c) header, nav, article, part, chapter, section.

Comprobar respuesta

¡Correcto! 2. La nueva etiqueta figure de HTML5 se emplea para

a) Etiquetar cualquier cosa. b) Etiquetar solo imágenes.

c) Etiquetar solo imágenes y tablas.

Comprobar respuesta

¡Correcto! Mucha gente cree que dentro de figure sólo se puede incluir una imagen, pero en realidad se puede incluir cualquier cosa, como una cita, un fragmento de código, una tabla, etc. 3. La nueva etiqueta footer de HTML5 se emplea para

a) Etiquetar el encabezado de una página. b) Etiquetar el contenido principal de una página. c) Etiquetar el pie de una página.

Comprobar respuesta

¡Correcto!

Los formularios en HTML5 Más contenido 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.

HTML5: Nuevas funcionalidades en formularios (parte 1) Más contenido 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.

Introducción al Desarrollo Web: HTML y CSS HTML5: Nuevas funcionalidades en formularios (parte 1)

Vídeo: http://youtu.be/6oGjhVRu7cU Hola a todos. Mi nombre es Mar Martínez, soy experta en E-learning y estándares web, y trabajo en la Oficina de 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 los formularios. Antes de comenzar, deciros que podéis contactar conmigo en la dirección de correo: [email protected] 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 el 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 sea 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 vídeo tutorial 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. En la segunda parte del vídeo tutorial 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, time). En cuanto al tipo de input “url”, como se puede deducir, se usa en aquellos campos que deban contener una dirección web. El valor del campo “url” es automáticamente validado cuando el formulario es enviado. En el ejemplo podemos ver cómo 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 deba 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 video tutorial, y que se basa en expresiones regulares. En el ejemplo podemos ver cómo 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 del 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 cómo 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, 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 video 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, éste aparece automáticamente al mostrarse el campo. 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 de 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 que hablaremos en la segunda parte del video tutorial. 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 video tutorial, 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íficos. El tipo de input “time” permite al usuario seleccionar la hora, en formato de horas y minutos. En la siguiente tabla, podemos ver todos los valores de input type que hemos analizado en este vídeo, y qué navegadores los soportan hasta el momento de ser grabado. Como se puede observar, no todos los principales navegadores soportan todos los nuevos tipos de input, sin embargo, puedes usarlos de todos modos, ya que, en los navegadores que no estén soportados, estos tipos se comportarán por defecto como un input de tipo “text". Ya que HTML5 no será recomendación oficial del W3C hasta el año 2014, el soporte de las nuevas funcionalidades es muy desigual entre los navegadores, así que conviene consultar a menudo algunas páginas web de referencia para conocer el estado de compatibilidad con ellos. Es recomendable consultar más de una y hacer tus propias pruebas en los distintos navegadores y entre sus distintas versiones. Recuerda que lo que hemos visto en este vídeo se basa en el estado del HTML5 y el soporte que dan de él los distintos navegadores en el momento de ser grabado, y puede cambiar de un día para otro hasta que sea recomendación oficial del W3C en el año 2014. Hasta ahora hemos tenido en cuenta los navegadores web desde el punto de vista de un ordenador de sobremesa o 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. Dentro de un formulario, cuando el foco se situé en un campo de tipo “tel”, las pantallas táctiles cambiarán su formato por defecto y se optimizarán para la introducción de un número de teléfono, mostrando un teclado numérico. Cuando el foco se situé 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 la arroba. En el caso de Android, se usa el tipo de entrada de texto que existe por defecto. Por último, cuando el foco se situé en un campo de tipo “url”, las pantallas táctiles cambiarán y se optimizarán para la introducción de un campo de texto. Pero en este caso, como ocurría en el anterior, iPhone va más allá e incorpora la teclas de acceso directo de barra inclinada y de “.com”. En el caso de Android, para url se usa el tipo de entrada de texto que existe por defecto.

En resumen, los dispositivos móviles están incorporando mejoras muy interesantes de usabilidad para el usuario, adaptándose en la medida de lo posible a sus necesidades, ahorrándoles así trabajo y tiempo. Y hasta aquí la primera parte del video tutorial “HTML5: Nuevas funcionalidades en formularios (1ª parte)”. Recuerda que este vídeo forma parte del curso “Introducción al desarrollo web” que está disponible en la dirección “idesweb.es”. Espero que toda esta información te sea útil. Muchas gracias por tu atención y hasta pronto. Vídeo: http://youtu.be/6oGjhVRu7cU Actividad 1. Los nuevos controles de formulario de HTML5 permiten:

a) Reducir la complejidad de desarrollar un formulario. b) Lograr un comportamiento más intuitivo de los formularios. c) Prescindir de JavaScript para realizar algunas validaciones de formulario del lado del cliente. d) Todas las anteriores.

Comprobar respuesta

¡Correcto! 2. En HTML5, ¿qué tipo de control input no existe?

a) calendar. b) color. c) email. c) tel.

Comprobar respuesta

¡Correcto! Existen date, datetime, datetime-local, month, time o week, pero calendar no existe. 3. En HTML5, ¿qué atributo se emplea para definir una regla que limite el contenido de un cuadro de texto?

a) pattern. b) placeholder. c) rule. d) value.

Comprobar respuesta

¡Correcto! El atributo pattern admite una expresión regular que se emplea para validar los datos introducidos en el control. 4. El tipo number se emplea para definir campos en los que se debe introducir:

a) Una fecha. b) Un día del mes. c) Un rango de valores. d) Un número.

Comprobar respuesta

¡Correcto!

TML5: Nuevas funcionalidades en formularios (parte 2) Más contenido 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.

Introducción al Desarrollo Web: HTML y CSS HTML5: Nuevas funcionalidades en formularios (parte 2) Vídeo: http://youtu.be/UVpE-tBtdvY Hola a todos. Mi nombre es Mar Martínez, soy experta en E-learning y estándares web, y trabajo en la Oficina de 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 los formularios. Antes de comenzar, deciros que podéis contactar conmigo en la dirección de correo: [email protected] Además mi cuenta de Twitter relacionada con el tema es @Mar_Martinez_C Como ya vimos en la primera parte del tutorial, una de las características más importantes que nos trae el 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 sea 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 primera parte del vídeo tutorial analizamos algunos de los nuevos estados del atributo “TYPE” del elemento “input”. Al final del vídeo vimos 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. En esta segunda parte del vídeo tutorial, vamos a ver algunos de los nuevos atributos de contenido que introduce HTML5, y además vamos a hablar brevemente de Modernizr y de los Polyfills. En esta lista podéis ver los nuevos atributos de contenido incluidos en HTML5 para el elemento “input” que vamos a analizar. Alguno de ellos, como ocurre con el atributo “Autocomplete”, se pueden usar además con otros elementos, como el elemento “form”.

El atributo “Autocomplete” nos permite especificar si un formulario completo o un campo de éste debe tener la opción de autocompletado activada o no. Cuando el autocompletado esté activado (es decir, cuando su valor sea “on”), el navegador completará automáticamente el campo con valores que el usuario haya introducido en ese campo en ocasiones anteriores. Si se desactiva (asignando el valor “off”) lo que se consigue es prevenir que un campo se autocomplete automáticamente, ya que en muchos casos este autocompletado puede causar problemas, incluso de seguridad. Es posible tener el autocompletado a “on” en un formulario, y a “off” en uno o más campos dentro del mismo formulario (por ejemplo en el campo de contraseña), y viceversa. Este atributo funciona con el elemento y con los siguientes tipos de : text, search, url, tel, email, datepickers, password, range, y color. El atributo “Autofocus” nos permite especificar en qué campo de entrada queremos que se coloque automáticamente el foco cuando se carga la página. Es un atributo de tipo booleano, por lo que no deberemos definir más de un elemento con este atributo en la misma página. Este atributo puede suponer una ventaja en muchos casos, sobre todo a usuarios de teléfonos móviles, ya que permite al usuario comenzar a escribir de inmediato sin tener que hacer click en el campo, pero por otro lado, supone una desventaja para aquellos usuarios que utilizan la barra espaciadora para moverse hacia abajo por la página, ya que esto no sucederá si el foco está colocado automáticamente en un campo. Ya que el forzar la colocación del foco puede provocar problemas de accesibilidad y de usabilidad, en caso de usarse, se debe estar seguro de que el campo que lo contenga sea el campo que prácticamente la totalidad de los usuarios vayan a usar en primer lugar. Por ejemplo, en la página principal de Google, lo más lógico es colocarlo en el campo de búsqueda, ya que en otro caso, estaríamos provocando problemas de usabilidad. Los atributos “min” y “max” sirven para delimitar un rango de valores numéricos, permitiendo especificar el valor máximo y mínimo para un campo de entrada. El campo no permitirá al usuario introducir un valor por encima del máximo ni por debajo del mínimo. En el ejemplo hemos usado el input type number restringido por un valor mínimo y uno máximo (2 y 14 respectivamente). Se puede observar que el sistema no permite incrementar el valor del campo más allá de 14 porque ha llegado al máximo definido. Estos atributos, min y max, los habíamos visto ya en la primera parte del tutorial en dos ocasiones: Al analizar el input type “number”, Y al analizar el input type “range”. En ambos casos para restringir el valor de un campo numérico. Estos atributos funcionan con los tipos de : number, range, date, datetime, datetime-local, month, time y week. El atributo “step” especifica los intervalos numéricos válidos para un elemento . Este atributo puede ser usado junto con los atributos “max” y “min” para crear un rango cerrado de valores válidos de un campo. En este ejemplo, donde “step” vale 2, y tenemos definido un valor por defecto (2), un máximo (14) y un mínimo (2), los valores válidos para el campo son 2, 4, 6, 8, 10, 12 y 14. El atributo “step” funciona con los tipos de : number, range, date, datetime, datetime-local, month, time y week. El atributo “pattern” permite validar un elemento en base a una expresión regular (RegEx). Para los que no lo sepáis, Las expresiones regulares son modelos o

patrones que describen las combinaciones de caracteres que se pueden introducir en el campo de texto (las que se tomarían como correctas). Se puede usar el atributo global “title” para ayudar al usuario a comprender lo que debe escribir en el campo. En el ejemplo podemos ver en primer lugar, el efecto de usar el atributo “title” mostrando un tooltip de ayuda, y a continuación, podemos ver cómo un campo que tiene una expresión regular definida avisa al usuario cuando el texto introducido no cumple dicha expresión regular. El atributo “pattern” funciona con los tipos de : text, search, url, tel, email, y password. El atributo “Placeholder” permite que se muestre una pista o ejemplo de lo que el usuario debe introducir en el campo de entrada, ya sea mediante un valor representativo o mediante una descripción corta del formato esperado en el campo. Esta pista se muestra en el campo mientras está vacío, y desaparece, bien cuando el campo recibe el foco (en Firefox por ejemplo) bien cuando se comienza a rellenar el campo (para el caso de Google Chrome). El atributo “Placeholder” funciona con los tipos de : text, search, url, tel, email, y password. El atributo “required” es un atributo booleano que, cuando está presente, especifica que el input que lo contiene debe ser rellenado por el usuario antes de enviar el formulario. Es el clásico campo obligatorio, que suele marcarse con un asterisco o con color rojo. El atributo “required” funciona con los tipos de input: text, search, url, tel, email, date pickers, password, number, checkbox, radio, y file. En la siguiente tabla, podemos ver todos nuevos atributos de contenido que hemos analizado en este vídeo, y qué navegadores los soportan hasta el momento de ser grabado. Ya que HTML5 no será recomendación oficial del W3C hasta el año 2014, el soporte de las nuevas funcionalidades es muy desigual entre los navegadores, así que conviene consultar algunas páginas web de referencia para conocer el estado de compatibilidad con ellos. Es recomendable consultar más de una y hacer tus propias pruebas en los distintos navegadores y entre sus distintas versiones. Recuerda que lo que hemos visto en este vídeo se basa en el estado del HTML5 y el soporte que dan de él los distintos navegadores en el momento de ser grabado, y puede cambiar de un día para otro hasta que sea recomendación oficial del W3C en el año 2014. Antes de finalizar, quería hablaros brevemente de “Modernizr” y de los “Polyfills”. Modernizr es una micro-librería Javascript que nos permite conocer la compatibilidad del navegador del usuario con las tecnologías HTML5 y CSS3, y en caso de que alguna característica usada en el código no sea compatible con el navegador, Modernizr lo detecta y permite tomar medidas para resolver el problema. Estas medidas se basan en el uso de los Polyfills, que son librerías Javascript que nos permiten cubrir las capacidades HTML5 y CSS3 que los navegadores no soportan. Lo que hacen es cambiar el HTML5 por otras tecnologías soportadas por el navegador en cuestión, por ejemplo, por Javascript. En resumen, el código que desarrollemos será estándar HTML5/CSS3 . Modernizr nos permite utilizar el Polyfill (es decir, un fragmento de código en otro lenguaje) solo si es necesario debido a alguna incompatibilidad con el navegador del usuario. Modernizr ya cuenta con una extensa lista de Polyfills, lo que supone un ahorro notable de trabajo para los desarrolladores.

Vamos a ver muy rápidamente un ejemplo de uso de Modernizr, que podemos encontrar en la página web de Modernizr. En este ejemplo, lo que se hace en primer lugar es comprobar si la geolocalización es soportada por el navegador. Si lo es, se carga el fichero Javascript o CSS3 que hay en la parte del “yep”, y si no lo soporta, se carga el fichero especificado en el “nope”. Podéis descargar Modernizr desde esta página: modernizr.com Además podéis encontrar la lista de los Polyfills más usados en la dirección que se muestra en pantalla. Y hasta aquí el video tutorial “HTML5: Nuevas funcionalidades en formularios (2ª parte)”. Recuerda que este vídeo forma parte del curso “Introducción al desarrollo web” que está disponible en la dirección “idesweb.es”. Espero que toda esta información te sea útil. Muchas gracias por tu atención y hasta pronto. Vídeo: http://youtu.be/UVpE-tBtdvY Actividad 1. En HTML5, ¿qué atributo se emplea para especificar los intervalos numéricos válidos para un elemento input?

a) min. b) max. c) step. d) value.

Comprobar respuesta

¡Correcto! El atributo step especifica los intervalos numéricos válidos para un control. 2. En HTML5, el atributo que se emplea para que un cuadro de texto sea obligatorio es:

a) compulsory. b) mandatory. c) obligatory. d) required.

Comprobar respuesta

¡Correcto! 3. En HTML5, el valor del atributo pattern tiene que ser:

a) Un mensaje de error. b) Un conjunto de valores. c) Una expresión regular. d) Un mensaje de ayuda.

Comprobar respuesta

¡Correcto! 4. En HTML5, ¿qué atributo se emplea para mostrar una pista o ayuda de lo que se debe escribir en un cuadro de texto?

a) pattern. b) placeholder. c) tip. d) value.

Comprobar respuesta

¡Correcto! El atributo placeholder se emplea para definir un valor de ejemplo o un consejo que ayude al usuario a introducir el dato en el control. HTML5: Ejemplo de formulario Más contenido 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.

Introducción al Desarrollo Web: HTML y CSS HTML5: Ejemplo de formulario

Vídeo: http://youtu.be/Bjc-sykJ8bg

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 vamos a ver un ejemplo de un formulario en HTML5. Antes de comenzar, deciros que podéis contactar conmigo en la dirección de correo: [email protected] Además mi cuenta de twitter relacionada con el tema es @Mar_Martinez_C Como ya hemos analizado en lo que llevamos de curso, una de las características más importantes que nos trae el 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. Esto facilita mucho el trabajo del desarrollador, porque no se tiene que preocupar por problemas de compatibilidad entre distintos navegadores; además supone un ahorro de tiempo y de ancho de banda, ya que, por un lado, permite que el formulario NO sea 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. En este vídeo vamos a ver un ejemplo de un formulario en HTML5, y para ello vamos a usar la aplicación Notepad++ para la edición del código, y el navegador Google Chrome para ver los resultados. Para poder comprender y aprovechar al máximo la información que vamos a ver a continuación, deberías haber visto previamente los vídeos: HTML5: Nuevas funcionalidades en formularios, parte 1 y parte 2. En primer lugar vamos a analizar cómo debe ser la estructura básica de nuestro fichero HTML5: Lo primero que debemos colocar siempre es la declaración de DOCTYPE. Debe estar antes de la etiqueta “html”. A continuación debemos tener este elemento raíz: html. Este elemento contiene el documento completo y únicamente el DOCTYPE está fuera de él. Debe contener dos elementos: head y body. Con “lang” indicamos el idioma base de los valores de los atributos y del texto del contenido. Esta información puede ser utilizada por un agente de usuario de diferentes formas para controlar la presentación de la página. En este caso hemos asignado el español. La etiqueta “head” es el contenedor de todos los elementos de cabecera. Debe incluir un título para el documento, y puede contener scripts, estilos, meta información, etc. "charset" UTF-8 sirve para especificar la codificación de caracteres de marcado del documento. Esto ya os sonará porque lo habéis visto en detalle en otros vídeos del curso, así que no vamos a explicarlo en este.

La etiqueta “title” es obligatoria en todos los documentos HTML y define el título del documento. Lo que significa que: Define el título para la barra del navegador. Proporciona un título para la página cuando ésta se añade a favoritos. Y muestra un título para la página en los resultados de los motores de búsqueda. La etiqueta “body” indica que se trata de la sección principal del documento. Está siempre definida después de la etiqueta de cierre del elemento head y antes de la etiqueta de cierre del elemento html. El elemento “h1” define un encabezado de nivel 1. Como ya sabéis, existen 6 niveles de encabezado, y nos ayudan a organizar la información de un documento. En este caso lo usamos para definir un texto como un titular, más grande y destacado que cualquier otro texto. La etiqueta “p” define un párrafo, por lo que los navegadores añadirán un margen antes y después de este elemento. En este caso hemos escrito un párrafo descriptivo sobre el contenido de la página que vamos a crear. La etiqueta “form” se usa para crear formularios de entrada de datos en HTML. Este elemento puede contener uno o más de los siguientes elementos: , , , , , , , , , . Finalmente, tenemos un tipo de input “submit” para definir un botón que nos permita enviar el formulario. A continuación podemos ver el resultado del código escrito hasta el momento en el navegador google Chrome.

Como podéis observar, en la barra superior del navegador tenemos el título que hemos definido para la página. Después podemos ver un encabezado de tipo "h1", con un tamaño grande y destacado. Y debajo de él tenemos un párrafo con un texto descriptivo en un tamaño de texto estándar. Por último, podemos ver el botón que hemos definido para enviar el formulario que vamos a crear a continuación. A continuación vamos a ir añadiendo elementos al formulario, usando los input type y los nuevos atributos de contenido vistos en los videotutoriales, y vamos a ir viendo cómo se comportan en el navegador google Chrome: En primer lugar vamos a añadir un elemento input de tipo “text”, que contiene los siguientes componentes: Una etiqueta label: que como ya sabéis a estas alturas del curso, define una etiqueta para un elemento input. Cabe destacar que cuando esta etiqueta recibe el foco, automáticamente se lo cede al control asociado. Existen dos tipos de asociación de las etiquetas con los controles de formulario: asociación implícita y asociación explícita. En la asociación implícita, la etiqueta debe estar colocada inmediatamente antes o después de su control en la misma línea (o encima del control si la línea es diferente) o el control debe estar dentro de la etiqueta. En la asociación explícita, la asociación se realiza identificando cada control con un atributo id único y asociándolo a través del atributo for de la etiqueta "label" correspondiente. Las normas de accesibilidad WCAG 2.0 recomiendan usar la asociación explícita ya que algunas tecnologías asistivas no manejan correctamente las etiquetas implícitas. En este caso, la usamos de forma explícita, aunque más adelante, veremos cómo usarla de forma implícita también. Además tenemos un atributo “placeholder” para mostrar un texto por defecto dentro del campo. En este caso es un ejemplo de un nombre y un apellido. Tenemos también un atributo “autofocus” para que sea el campo que recibe el foco automáticamente cuando se carga la página. Después tenemos un atributo “autocomplete” para que se pueda seleccionar un valor introducido en este campo con anterioridad, Y por último tenemos un atributo “required”, para definir este campo como obligatorio. Si no lo rellenamos, el sistema nos avisa de que es un campo de entrada requerido.

Ahora vamos a pasar a ver cuál sería el resultado de este código en el navegador google Chrome. Como podéis observar, nos ha aparecido un nuevo campo de input tipo "text", que cuando cargamos la página, recibe el foco automáticamente gracias al atributo "autofocus". Además, tenemos un texto mostrado por defecto que hemos definido mediante el atributo "placeholder". Si intentamos escribir vemos que aparece el autocompletado con otros textos que hemos introducido en este campo anteriormente. Y además, si intentamos enviar el formulario sin haber escrito nada dentro del campo, el sistema nos avisa de que este campo es obligatorio rellenarlo. A continuación, vamos a añadir un elemento input de tipo “password” (contraseña) que contiene los siguientes atributos: un atributo “pattern” para definir la estructura de la contraseña en base a una expresión regular definida, un atributo “placeholder” para mostrar un texto por defecto dentro del campo. En este caso es un ejemplo de una contraseña válida según la expresión regular definida, lo que puede ayudar al usuario a entender que formato es el correcto para este campo de contraseña. Y por último tenemos un atributo de tipo “required”, para definir este campo como obligatorio. Como podemos observar, ahora tenemos un nuevo campo en nuestro formulario: el campo Contraseña, de tipo password. Tiene un texto por defecto que hemos definido con el atributo placeholder. Además, con el atributo required hemos definido este campo como obligatorio, por lo que el sistema nos avisa si intentamos enviar el formulario sin haber rellenado este campo. Como veis, el sistema nos está diciendo que debemos completar este campo. A este campo le habíamos definido, con el atributo pattern, una expresión regular, por lo que el sistema nos debe avisar si escribimos un texto que no cumple con dicha expresión regular. Vamos a probar a introducir un montón de letras para ver si el sistema nos avisa de que es incorrecto. Efectivamente, el sistema nos avisa de que el formato no coincide con el definido en este campo. Así que vamos a cambiarlo por uno correcto, por ejemplo “jjj9999”, y si tratamos de enviar el formulario ahora mismo, efectivamente el sistema nos deja enviar el formulario ya que no contiene ningún error. A continuación vamos a añadir tres tipos nuevos de input: uno de tipo “tel”, uno de tipo “email” y otro de tipo “url”, los tres con texto o un número definido como ejemplo para que el usuario sepa lo que debe introducir en este campo. Como podemos observar en el navegador, tenemos estos nuevos campos, en el caso del campo teléfono, como no hemos definido una expresión regular con pattern, nos va a dejar introducir cualquier valor, y nos va a permitir enviar el formulario sin darnos ningún mensaje de error.

En el campo de email, sin embargo, la cosa cambia, porque si introducimos una dirección de correo no válida, el sistema nos advierte de que la dirección de correo electrónico no es correcta. Para el caso de la página web ocurre lo mismo que con email. Si intentamos escribir una dirección que no es correcta, el sistema nos advierte de que la dirección url no es correcta. Sin embargo, si ponemos una dirección web correcta, el sistema nos permite enviar el formulario. A continuación vamos a añadir dos tipos de input más: un tipo “number” y el otro es un tipo date. El tipo number tiene los siguientes atributos: min y max para fijar los valores mínimo y máximo respectivamente permitidos en el campo (en este caso el mínimo sería 2 y el máximo 14). Además tenemos el atributo “placeholder” para definir un número por defecto que aparecerá en el campo automáticamente. Finalmente podemos ver que tenemos un atributo “step”, que como ya habíamos visto en vídeos anteriores, sirve para especificar los intervalos de valores válidos para el campo. En este ejemplo vale 2, y como su valor mínimo es 2, sus valores válidos para este campo serán: 2, 4, 6, 8, 10, 12 y 14. El siguiente tipo de input que hemos definido es un tipo de input “date”, con el atributo min para fijar una fecha mínima por defecto. Como podemos observar ahora tenemos estos dos nuevos campos, el nº de temas que era el tipo number, y la fecha de envío que era el tipo date. En el caso del nº de temas, tenemos un valor definido por defecto de 2, mediante el atributo placeholder. Además tenemos un máximo y un mínimo por lo tanto no me deja disminuir la cifra por debajo de 2. El atributo máximo me obligaba a tener un máximo permitido de 14, y además con step podemos comprobar que solo nos deja movernos en cifras de dos en dos, en este caso, cifras pares. En cuanto al campo de fecha de envío, si lo pulsamos podemos ver un calendario en el que podemos seleccionar una fecha, y que contiene una fecha mínima de 16 de julio de 2012, por lo tanto, antes del 16 de julio no nos deja seleccionar ninguna fecha. Esto lo conseguíamos con el atributo min dentro del tipo date. A continuación vamos a añadir tres campos más a nuestro formulario: el tipo “color”, el tipo “search” y un tipo “range”. El tipo “color” contiene un atributo “value”, que nos permite especificar el valor por defecto. Su tipo de valor difiere según el tipo de input, por ejemplo, para “color” especifica el código hexadecimal del color por defecto, pero por ejemplo como podemos ver en el tipo “submit” del botón enviar, lo que define en ese caso es el texto del botón. En el caso del tipo de input search, lo que nos encontramos es un campo de búsqueda.

Y por último hemos añadido un input de tipo “range”, que es un tipo de campo con un rango específico de valores, delimitado en este caso por los valores 1 de mínimo y 10 de máximo. Como podemos observar, ahora tenemos estos tres nuevos campos en nuestro formulario. Uno es el de color, que cuando lo pulsamos, nos permite seleccionar un color desde una paleta de colores, y al que habíamos puesto un color azul por defecto con su código hexadecimal y el atributo value. En cuanto al campo de búsqueda, cuando nos colocamos en el campo y comenzamos a escribir, podemos ver que aparece el aspa, para borrar lo escrito hasta el momento. Y en cuanto al tipo de input range, podemos ver que nos permite seleccionar un valor dentro de un rango de 1 a 10. A continuación vamos a añadir una agrupación de campos de tipo “radio”, lo que significa que solo 1 valor del grupo podrá ser seleccionado al mismo tiempo. Tenemos un grupo de tres. La etiqueta “fieldset” se usa para agrupar elementos relacionados entre sí, dentro de un mismo formulario. Esta etiqueta dibuja una caja alrededor de todos los elementos agrupados. Con la etiqueta “legend” definimos un título o leyenda para un conjunto de elementos agrupados mediante un fieldset. En este caso, la etiqueta “label” la estamos usando de manera implícita. No es incorrecto, pero recuerda que lo recomendado es usar la asociación explícita. Cada opción tiene un texto diferente definido mediante el atributo “value”. Y por último, el atributo “checked” nos permite especificar qué elemento debe estar preseleccionado cuando la página se carga. Se usa en tipos de input “checkbox” o “radio”. En este grupo, podemos ver que el atributo “checked” está en la primera opción, definiendo por tanto que esta opción debe estar seleccionada cuando se carga la página. Como podemos observar, ahora tenemos el nuevo campo o agrupación de campos, en el que tenemos tres opciones para seleccionar una prioridad. Este tipo de campo está enmarcado gracias a la etiqueta fieldset, y además debido a que son de tipo radio solo podremos seleccionar una opción cada vez. A continuación vamos a añadir una agrupación de campos de tipo “checkbox”, que a diferencia de los de tipo “radio”, permite que más de una opción sea seleccionada al mismo tiempo. Actúan individualmente como conmutadores. Como en el caso de “radio”, se ha usado la etiqueta “fieldset” para agrupar los elementos y la etiqueta “legend” para dar un título a esta agrupación. Además se ha usado la etiqueta “label” de forma implícita. Cada opción tiene un texto diferente definido mediante el atributo “value”, y el atributo “checked” se ha colocado en la primera opción para que sea esta la que esté seleccionada por defecto.

Como podemos observar ahora en el navegador, ha aparecido una nueva agrupación de campos de tipo checkbox, que nos permite realizar una selección de cada una de las opciones individualmente, pudiendo haber más de una opción seleccionada al mismo tiempo. Además mediante la etiqueta fieldset se muestra un marco alrededor de la agrupación de campos. Con esto, hemos terminado de realizar nuestro formulario en HTML5. Vamos a recordar un poco todo lo visto en el vídeo. Hemos visto un campo de tipo text, en el que teníamos un "placeholder" con el que definíamos un texto por defecto, que tenía además un "autofocus" y un "autocomplete". Después hemos visto una contraseña que tenía definida una expresión regular gracias al atributo "pattern", y además tenía un texto por defecto para ayudar al usuario a saber cómo debe ser el formato que debe poner en el campo de contraseña. Además teníamos un teléfono, un email y una página web, cada uno con un texto por defecto. Después teníamos un elemento de tipo "number", que nos permitía incrementar o decrementar el valor hasta un máximo y dentro de un valor mínimo, y mediante saltos de dos en dos. Además teníamos un campo date, que nos permitía seleccionar una fecha a partir del 16 de julio de 2012. También teníamos un control de tipo color, que nos permite seleccionar desde una paleta de colores, un color determinado, el que queramos. Además teníamos un campo de tipo búsqueda, que, dependiendo del navegador que estemos usando, nos mostrará el aspa para eliminar el texto cuando ya hemos escrito algo o nada más poner el foco dentro del campo. Después teníamos un input de tipo "range" que nos permite definir un rango de valores dentro de un mínimo y un máximo (1 y 10), y luego teníamos una agrupación de campos de tipo radio, que solo permite seleccionar una opción de cada grupo, y una agrupación de campos de tipo checkbox, que nos permite seleccionar más de una opción al mismo tiempo. Y hasta aquí el videotutorial “Ejemplo de formulario en HTML5”. Recuerda que este vídeo forma parte del curso “Introducción al desarrollo web” que está disponible en la dirección “idesweb.es”. Espero que toda esta información te sea muy útil. Muchas gracias por tu atención y hasta pronto. Vídeo: http://youtu.be/Bjc-sykJ8bg Los navegadores web son buenos pero tontos. ¿Por qué?

Más contenido 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.

HTML5: ¿Por qué es importante escribir código correcto? (1/3) Más contenido 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.



Introducción al Desarrollo Web: HTML y CSS

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

Vídeo: http://youtu.be/RnzKl8OA5gQ Hola, soy Sergio Luján Mora, profesor de la Universidad de Alicante, y en este videotutorial vamos a ver por qué es importante escribir código HTML correcto. HTML es el lenguaje de marcado que se emplea para crear las páginas web. HTML permite describir la estructura y el contenido de una página web, principalmente texto, aunque también permite incluir otros objetos como imágenes y vídeos.

HTML es un estándar de facto desarrollado por el World Wide Web Consortium, un consorcio internacional que produce recomendaciones para la World Wide Web. Hay un momento en la vida de cualquier desarrollador web que se plantea la siguiente duda existencial: Mi página web se ve bien en todos los navegadores, pero en Internet Explorer 6 se rompe. ¿Por qué? Aunque hay desarrolladores web que se plantean el mismo problema pero al revés: Mi página web se ve bien en Internet Explorer 6, pero en el resto de navegadores se rompe. ¿Por qué? Veamos un ejemplo real. Visitemos la página oficial del Colegio de Ingenieros de Caminos, Canales y Puertos de España. No voy a entrar a criticar ni el diseño ni la usabilidad de esta página web, porque podría estar horas y horas. Sólo voy a destacar dos elementos que me producen mucha grima. Tanto en la cabecera como en el pie de página podemos encontrar el aviso “Optimizado para Internet Explorer 6”. ¿Y cuál es el problema? Volvamos a ver como se muestra esta página web, en concreto en el navegador Internet Explorer 8. No es Internet Explorer 6, me deshice de él hace muchos años, pero podemos suponer que más o menos se mostrará igual, ya que ambos son primos hermanos. La página web se ve bien. Toda esta zona vacía desaprovechada se debe a que la página emplea un diseño fijo para 1024 pixels de ancho: no es un error, pero no es el mejor diseño que se puede realizar hoy en día. Y así es como se muestra en Mozilla Firefox 3.6. Podemos notar que no se muestra igual: el contenido de la página aparece centrado respecto los límites izquierdo y derecho de la ventana del navegador. Eso no es problema, más bien al revés, esto es mucho mejor. El problema importante es que el menú de navegación principal no está centrado respecto el contenido de la página. Aunque es un problema leve, este es el típico ejemplo de página web que se rompe. Aquí se puede aplicar la frase “Mi página web se ve bien en Internet Explorer 6, pero en el resto de navegadores se rompe”. ¿Cuál es la razón de que se rompa? No me he puesto a buscar la razón, pero si vemos el código fuente, esta página web no tiene una única etiqueta HTML como indica el estándar del W3C. Sino que tiene dos. Tres. ¡Y hasta cuatro etiquetas HTML en la misma página! Lo diré en dos palabras, “im presionante”.

Los ingenieros de caminos, canales y puertos sabrán hacer muy bien los caminos, canales y puertos, pero las páginas web no es lo suyo. Que se las dejen a los verdaderos profesionales. O si se la ha hecho un informático, se la ha metido doblada. Volviendo al tema de los navegadores, el afirmar que una página web está optimizada para Internet Explorer 6 es un tremendo error. Internet Explorer 6 apareció en agosto de 2001 y se puede afirmar que hasta ahora ha sido el peor navegador de la historia, ya que cumplía los estándares web como le daba la gana. Ello obligó a miles de desarrolladores web a invertir miles de horas para lograr que un sitio web fuese compatible, por una lado con Internet Explorer 6 y, por otro lado con el resto de navegadores que sí que cumplían los estándares. Desgraciadamente, todavía hoy, en marzo de 2011, aún podemos encontrar numerosas páginas web donde se muestran estos avisos de “página web optimizada para Internet Explorer”. Internet Explorer 6 fue tan malo que incluso la propia Microsoft inició en marzo de 2011 la campaña “The Internet Explorer 6 Countdown” para que la gente dejase de usar este navegador. Según Microsoft, en febrero de 2011 el 12% de los usuarios a nivel mundial todavía usaban ese navegador. El objetivo de la campaña es que la gente deje de usar Internet Explorer 6 y así ahorrar horas de trabajo a los desarrolladores web. Pero bueno, tampoco hay que echarle toda la culpa a Internet Explorer 6, ya que la frase “Mi página web se ve bien en todos los navegadores, pero en Internet Explorer 6 se rompe.” la podemos cambiar a “Mi página web se ve bien en todos los navegadores, pero en XYZ versión n se rompe.” Vamos a ver las principales cuatro razones por las que una página web se puede visualizar de forma incorrecta en un navegador. En primer lugar, los navegadores pueden tener fallos y en algunas situaciones pueden cometer errores. Las diferencias de visualización de una página web también se pueden deber a problemas de compatibilidad entre los navegadores. La especificación de HTML proporciona reglas de cómo se deben interpretar y visualizar los diferentes elementos y atributos del lenguaje, pero en algunos casos existe espacio para la interpretación. Por otro lado, el soporte para las nuevas etiquetas y atributos no es universal, por lo que puede ser que en algunos casos una página no se vea bien porque la página contiene alguna característica que no admite el navegador. Por último, las páginas a veces no se ven bien porque existen errores en el código HTML de la página. De estas cuatro posibles causas, las tres primeras están fuera del control de los desarrolladores web:

- Las dos primeras dependen de los fabricantes de los navegadores, como la empresa Microsoft o la organización Mozilla. - La tercera depende en parte de los fabricantes, como es el caso de Microsoft que siempre ha tardado muchos años en actualizar sus navegadores y adecuarlos a los nuevos estándares, pero también depende de los usuarios cuando no se actualizan a los nuevos navegadores. - La última causa depende de los desarrolladores web, de las personas que escriben el código HTML, y es lo que vamos a tratar en este videotutorial. La especificación del lenguaje HTML establece claramente cómo se tiene que escribir el código HTML. El W3C proporciona un validador que permite comprobar si el código de una página es correcto, es decir, si se ajusta a la especificación de HTML. A pesar de existir herramientas como el validador del W3C, muchos de los desarrolladores web nunca comprueban el código de sus páginas web. Los navegadores web son programas muy complejos y robustos que están preparados para manejar ciertos errores. Pero cada navegador los maneja de diferente forma, ya que la especificación de HTML no establece cómo se tiene que recuperar un navegador cuando encuentra un error en el código. Por ejemplo, cuando no se cierra un párrafo, el navegador decide cerrarlo automáticamente cuando empieza un nuevo párrafo, ya que en las normas de HTML, un párrafo no puede contener otro párrafo. Pero las situaciones de error pueden ser infinitas y pueden ser mucho más complicadas que la anterior. En este ejemplo la etiqueta de negrita no ha sido cerrada. En HTML las etiquetas deben estar correctamente anidadas, así que el sitio correcto para ser cerrada es aquí. ¿Pero se comportan así todos los navegadores? ¿Hay algunos navegadores que cierran la etiqueta en otro punto? La respuesta a esta y otras preguntas similares la veremos en la próxima parte de este videotutorial, donde veremos cómo una página web sencilla se puede mostrar de diferente forma en diferentes navegadores por existir un pequeño error. Y con esto finaliza este videotutorial sobre la importancia de escribir código HTML correcto. Si necesitas más información o quieres contactar conmigo, en la página web http://desarrolloweb.dlsi.ua.es podrás encontrar más información sobre el desarrollo web o también puedes contactar directamente conmigo a través de mi dirección de correo electrónico [email protected]. Vídeo: http://youtu.be/RnzKl8OA5gQ Actividad 1. ¿Qué se afirma en el vídeo tutorial acerca del navegador Internet Explorer 6?

a) Fue un navegador web que era querido por los desarrolladores web. b) Fue un navegador web que influyó positivamente en el desarrollo web. c) Fue un mal navegador web porque no cumplía correctamente los estándares web.

Comprobar respuesta

¡Correcto! Microsoft Internet Explorer 6 presentaba importantes inconsistencias respecto a los estándares, lo que obligaba a los desarrolladores web a crear versiones específicas de las páginas web para este navegador. 2. De las posibles causas que hacen que una página web no se visualice correctamente, ¿cuál depende de los desarrolladores web?

a) Los errores en el código HTML. b) Los problemas de compatibilidad entre los navegadores. c) El soporte de HTML por los navegadores. c) Los fallos de los navegadores.

Comprobar respuesta

¡Correcto! Los desarrolladores web escriben el código HTML.

HTML5: ¿Por qué es importante escribir código correcto? (2/3) Más contenido En este vídeo se muestran algunos ejemplos de errores en el código HTML: 

Etiqueta sin cerrar.



Etiqueta sin cerrar.



Comillas del valor de un atributo sin cerrar (2 versiones).



Valor del atributo size de la etiqueta "input" incorrecto.



Introducción al Desarrollo Web: HTML y CSS

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

Vídeo: http://youtu.be/_NHarDRZimw Hola, soy Sergio Luján Mora, profesor de la Universidad de Alicante, y en este videotutorial vamos a ver por qué es importante escribir código HTML correcto. En la primera parte de este videotutorial estuvimos viendo por qué muchos desarrolladores web se plantean alguna vez por qué una página web se ve bien en todos los navegadores pero no en alguno concreto. Vimos las principales cuatro razones por las que una página web se puede visualizar de forma incorrecta en un navegador. De estas cuatro razones, las tres primeras están fuera del control de los desarrolladores web. La última causa sí que depende de los desarrolladores web, de las personas que hacen las páginas web, y es la que vamos a tratar en este videotutorial. Para demostrar por qué es importante escribir código HTML correcto, vamos a ver cinco ejemplos sencillos en los que se aíslan algunas situaciones de error típicas. Las pruebas que vamos a ver a continuación se han realizado en Windows 7 con los cuatro navegadores web más comunes: Mozilla Firefox 3.6, Google Chrome 10, Internet Explorer 8 y Opera 11. Veamos el primer ejemplo. Este es el código HTML de una página sencilla. En el segundo párrafo hay una etiqueta de negrita que no ha sido cerrada al final del párrafo. En el tercer párrafo vuelve a aparecer la etiqueta de negrita, pero esta vez sí que ha sido cerrada al final del párrafo. ¿Cómo se visualizará esta página en los diferentes navegadores? Antes que nada, comprobemos que esta página realmente tiene un error. Para ello, vamos a usar el “HTML and markup validator del W3C”. Validamos la página web y el validador nos indica que la página tiene 6 errores. ¿6 errores? Si vemos el informe completo de validación, el primer error nos indica correctamente que existe alguna etiqueta que no ha sido cerrada. Pero el resto de errores son falsos y desaparecerán una vez que se haya corregido el primer error. Veamos ahora como se visualiza la página en los diferentes navegadores.

En Mozilla Firefox, desde el punto de inicio de la etiqueta que no se cierra hasta el final de la página, todo aparece en negrita. Como ahora veremos, el resto de navegadores se comporta igual. En Google Chrome comprobamos que ocurre lo mismo, toda la página se muestra en negrita. Igual en Internet Explorer 8. Y por último, vemos que la página se visualiza igual en Opera 11. Por tanto, la conclusión a la que llegamos es que los navegadores, hasta que no se cierra la etiqueta de negrita, su efecto continúa hasta el final de la página. Veamos ahora otro ejemplo. A partir del ejemplo anterior, sustituimos la etiqueta de negrita por la etiqueta con el atributo style que incluye la propiedad fontweight de CSS para mostrar el texto en negrita. No es exactamente lo mismo, pero un navegador web debería presentar esta página web igual que el ejemplo anterior, ya que el efecto visual que se consigue es el mismo. Como podemos ver, en Mozilla Firefox hay un cambio importante respecto el ejemplo anterior: el efecto de la etiqueta finaliza cuando termina el párrafo en la que se encuentra. En Google Chrome podemos ver que la presentación de la página es igual que en Mozilla Firefox. El efecto de la etiqueta finaliza cuando finaliza el párrafo y por tanto, el siguiente párrafo no aparece en negrita. Pero en Internet Explorer aparecen diferencias y este navegador se comporta de forma similar a cómo lo hace en el ejemplo anterior y todo aparece en negrita hasta el final del documento. Por último, Opera también se comporta igual que Internet Explorer y todo aparece en negrita. Por tanto, en este ejemplo, Mozilla Firefox y Google Chrome tienen un comportamiento similar, la etiqueta la cierra automáticamente cuando se llega al final del párrafo, mientras que Internet Explorer y Opera muestran la página de la misma forma, la etiqueta no la cierran y su efecto actúa hasta el final de la página. En el siguiente ejemplo el error está en la etiqueta que enlaza con una hoja de estilo CSS que está en otro fichero. En esta etiqueta, el valor del atributo rel no tiene la comilla de cierre. El editor de texto ya nos avisa de que hay un problema en el código HTML ya que a partir de este punto todo el código aparece pintado en verde, como si todo fuese el valor de un atributo. La página es muy sencilla: contiene un encabezado y un párrafo de texto.

La hoja de estilo CSS también es muy sencilla. Contiene solamente dos reglas, una para definir el tamaño y el tipo de letra de toda la página y otra para definir el tipo de letra y el color del encabezado. ¿Cómo se verá esta página? En Mozilla Firefox parece que el error no produce ningún efecto negativo en la visualización de la página: el encabezado aparece con el tipo de letra Garamond y en color rojo, y el resto del texto de la página aparece con el tipo de letra Verdana. Sin embargo, en Google Chrome esto es lo que se muestra: absolutamente nada, no hay página. En Internet Explorer parece que la hoja de estilo CSS no se tiene en cuenta. Además, podemos ver que en la página aparece el código de la etiqueta . Y en Opera se vuelve a mostrar absolutamente nada. Como podemos ver, por falta de una comilla puede desaparecer toda una página web. Desgraciadamente, mucha gente no le da importancia a errores como éste. El siguiente ejemplo es una modificación del anterior, en el que se ha añadido una etiqueta con un atributo id. Como podemos observar por el color verde, parece que el editor de textos cierra el atributo que no se había cerrado, el atributo rel, lo cierra correctamente en este punto. Esto puede ser una señal de lo que van a hacer los navegadores y de cómo van a interpretar esta página web. La hoja de estilo CSS es también la del ejemplo anterior, pero le hemos añadido esta regla #contenido para que el contenedor se muestre con un color de fondo gris. Así es como se debería mostrar la página web si no tuviera el error del valor del atributo que no se cierra su comilla, vemos que el se muestra con un color de fondo gris. En Mozilla Firefox, el encabezado y el texto aparecen correctamente, con el tipo de letra y con el color adecuado. Sin embargo, el contenedor no aparece con el color de fondo gris. Como veremos a continuación, el resto de navegadores tienen el mismo comportamiento. En Google Chrome, en Internet Explorer, y en Opera se muestra el mismo resultado. El comportamiento de los navegadores coincide con el comportamiento del editor de textos: este atributo, el atributo rel, se cierra en este punto y, por tanto, la etiqueta se rompe y no se tiene en cuenta en la presentación de la página por el navegador. Y llegamos al último ejemplo. En este ejemplo se muestra un formulario que contiene cuatro cuadros de texto. En tres de los cuadros de texto se incluye el atributo size para

modificar el tamaño del cuadro de texto. En este atributo size se ha cometido un error: parece que pone “treinta”, pero en realidad pone “tres o”. Como podemos ver aquí, cuando un cuadro de texto no tiene definido un tamaño con el atributo size, el valor por defecto es 20. En Mozilla Firefox, el valor “tres o” se interpreta como “tres”. En Google Chrome se observa el mismo comportamiento que en Mozilla Firefox, el primer cuadro de texto tiene un tamaño 20, el segundo un tamaño 30 que es el que se indica en el código HTML, el tercer cuadro de texto tiene un tamaño 3, que es la interpretación de “tres o”, y el último cuadro de texto tiene un tamaño 3. En Internet Explorer cambia la forma de interpretar el valor “tres o”. El navegador le asigna el valor por defecto que es 20, el navegador no reconoce este valor como válido y le asigna el valor por defecto. Por último, en Opera se observa el mismo comportamiento que en Internet Explorer: al detectar un valor no correcto, se le asigna el valor por defecto. Resumamos los cinco ejemplos que hemos visto. En el ejemplo de la etiqueta no cerrada, los cuatro navegadores se comportan de la misma forma. En el ejemplo de la etiqueta no cerrada, Mozilla Firefox y Google Chrome muestran el mismo comportamiento, mientras que Microsoft Internet Explorer y Opera se comportan de igual forma. En el primer ejemplo de las comillas no cerradas, Firefox, Chrome e Internet Explorer muestran un comportamiento distinto, mientras que Opera muestra un comportamiento similar a Chrome. En el segundo ejemplo de las comillas no cerradas los cuatro navegadores muestran un comportamiento similar. Y en el último ejemplo, Firefox y Chrome muestran el mismo comportamiento, mientras que Microsoft Internet Explorer y Opera se comportan de igual forma. ¿A qué se debe este errático comportamiento de los navegadores? Lo veremos en la tercera y última parte de este videotutorial. Y con esto finaliza este videotutorial sobre la importancia de escribir código HTML correcto. Si necesitas más información o quieres contactar conmigo, en la página web http://desarrolloweb.dlsi.ua.es podrás encontrar más información sobre el desarrollo web o también puedes contactar directamente conmigo a través de mi dirección de correo electrónico [email protected]. Vídeo: http://youtu.be/_NHarDRZimw HTML5: ¿Por qué es importante escribir código correcto? (3/3) Más contenido

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.

Introducción al Desarrollo Web: HTML y CSS HTML5: ¿Por qué es importante escribir código correcto? (3/3)

Vídeo: http://youtu.be/fBQ8wE5Ffxs Hola, soy Sergio Luján Mora, profesor de la Universidad de Alicante, y este es el último videotutorial de la serie de videotutoriales en los que estamos viendo por qué es importante escribir código HTML correcto. En la primera parte de este videotutorial vimos las principales cuatro razones que pueden ocasionar que no se vea igual una página web en todos los navegadores. Vimos lo importante que es escribir código HTML correcto para que una página web no se rompa. En la segunda parte vimos cinco ejemplos sencillos que contenían errores que producían que una página web no se mostrase igual en todos los navegadores. Las pruebas las realizamos en el sistema operativo Windows 7 con los cuatro navegadores web más comunes: Mozilla Firefox 3.6, Google Chrome 10, Internet Explorer 8 y Opera 11. Al final, vimos que ante algunos errores los navegadores mostraban el mismo comportamiento, mientras que frente a otros errores había diferencias importantes en el comportamiento. ¿A qué se debe este errático comportamiento de los navegadores frente a los errores de una página? La clave está en el DOM, el Document Object Model. Con el DOM vamos a entender por qué una página web que tiene errores no se visualiza igual en todos los navegadores.

La mayoría de la gente que hace página web no tiene ni idea de qué es el DOM. Y los que sí lo conocen, suelen tener muchas lagunas o ideas erróneas sobre él. El DOM es una recomendación del World Wide Web Consortium, el W3C, el consorcio internacional que produce recomendaciones para la Web. En la traducción al castellano de la versión 3 de la especificación del DOM encontramos el apartado “¿Qué es el Modelo de Objetos del Documento?”, donde se nos define el DOM: El Modelo de Objetos del Documento (DOM) es una interfaz de programación de aplicaciones (API) para documentos validos HTML y bien construidos XML. Define la estructura lógica de los documentos y el modo en que se accede y manipula. Y en otro punto de la especificación podemos leer: En DOM, los documentos tienen una estructura lógica que es muy parecida a un árbol; para ser más preciso, es más bien como un "bosque" o una "arboleda", que puede contener más de un árbol. Cada documento contiene cero o un nodo doctype, un nodo de elemento de documento, y cero o más comentarios o instrucciones de tratamiento; el elemento del documento sirve como la raíz del árbol para el documento. Con un ejemplo lo entenderemos mejor. Tenemos este fragmento de un documento HTML, que representa una tabla con dos filas y dos columnas. El DOM es una representación en forma de árbol de una página web. Es sencilla, pero para su comprensión y uso correcto hace falta realizar un proceso de abstracción que mucha gente es incapaz de realizar. La representación en forma de árbol de este fragmento es la siguiente: Los rectángulos representan nodos de tipo elemento, mientras que los óvalos representan nodos de tipo texto. La raíz del árbol es la etiqueta , que contiene un sólo hijo con la etiqueta , el cual a su vez tiene dos hijos, los cuales a su vez también tienen dos hijos. Una vez que sabemos qué es el DOM, que es el Document Object Model, vamos a aplicarlo para entender por qué una misma página web se visualiza de diferente forma en

diferentes navegadores. Vamos a empezar con el ejemplo que ya vimos en la parte anterior de este videotutorial en el que se empleaba la etiqueta con el atributo style y la propiedad fontweight de CSS para mostrar el texto en negrita. En este ejemplo, esta etiqueta no se cierra en el párrafo y tampoco se cierra en el documento. En Mozilla Firefox el efecto de la etiqueta finaliza cuando termina el párrafo en la que se encuentra. En Google Chrome podemos ver que la presentación de la página es igual que en Mozilla Firefox. Pero en Internet Explorer aparecen diferencias y todo aparece en negrita hasta el final del documento. Por último, Opera también se comporta igual que Internet Explorer y la etiqueta que no se cierra actúa hasta el final del documento. Para entender por qué los navegadores se comportan de diferente forma debemos comparar el DOM que construye cada navegador a partir del código HTML de la página. Aquí podemos ver el DOM en Mozilla Firefox. Podemos ver como la etiqueta que no está cerrada en el código HTML, el navegador la cierra automáticamente en este punto, antes de que finalice el párrafo. Por ello, cuando se muestra la página, el texto de este párrafo sí que aparece en negrita, pero el siguiente no, porque la etiqueta ya ha sido cerrada antes. Sin embargo, en Opera, el DOM que se construye es distinto. Como podemos ver aquí, como la etiqueta no se ha cerrado en el código HTML, todo lo que aparece a continuación se considera parte del contenido de la etiqueta que no se ha cerrado. Por eso, todo el texto que aparece a continuación se muestra en negrita. Pero al actuar de esta forma, se llega a una representación de la página que es inconsistente con la especificación oficial de HTML, ya que un párrafo de texto no puede contener otros párrafos de texto. En el siguiente ejemplo el error está en la etiqueta que enlaza con una hoja de estilo que está en otro fichero. En esta etiqueta, el valor del atributo rel no tiene

la comilla de cierre. La página es muy sencilla: contiene un encabezado y un párrafo de texto. La hoja de estilo CSS también es muy sencilla. Contiene dos reglas, body y h1, para definir el tamaño y el tipo de letra de toda la página, y para definir el tipo de letra y el color del encabezado. ¿Cómo se verá esta página? En Mozilla Firefox parece que el error no produce ningún efecto negativo en la visualización de la página: el encabezado aparece con el tipo de letra Garamond y en color rojo, y el resto del texto de la página aparece con el tipo de letra Verdana. Sin embargo, en Google Chrome esto es lo que se muestra: absolutamente nada. En Internet Explorer parece que la hoja de estilo CSS no se tiene en cuenta. Además, podemos ver que en la página aparece el código de la etiqueta . Y en Opera se vuelve a mostrar absolutamente nada. Aquí tenemos el DOM que Mozilla Firefox construye a partir del código HTML. Como podemos ver, Firefox ha descartado el atributo rel que no tenía la comilla de cierre. Además, se ha recuperado correctamente frente a este error y ha construido el árbol del documento como se esperaba. En el caso de Google Chrome, el navegador descarta la etiqueta y todo lo que aparece a continuación hasta el final de la página. Por eso la página aparece vacía cuando se muestra. En el caso de Internet Explorer, el navegador ha descartado toda la etiqueta que estaba mal escrita y la ha movido al , al cuerpo de la página, como podemos ver aquí. Por eso se muestra en la página. Pero a diferencia de Google Chrome, Internet Explorer en algún momento (por ejemplo, al encontrar la etiqueta ) se ha recuperado correctamente y muestra, de forma correcta, el resto de la página. Por último, en el caso de Opera, podemos ver que el navegador asume que todo lo que aparece a continuación del atributo rel forma parte del valor del atributo, ya que no se ha cerrado la comilla. Por eso, en la página no aparece nada, aparece vacía, todo forma parte del atributo rel, como podemos ver aquí.

El último ejemplo es una modificación del anterior, en el que se ha añadido una etiqueta con un atributo id. Como podemos observar por el color verde del editor, parece que el editor cierra esta comilla que no hemos cerrado en este punto. Y todo esto va a formar parte del valor del atributo. Esto es una señal de lo que van a hacer los navegadores. La hoja de estilo CSS es también la del ejemplo anterior, pero le hemos añadido esta regla “almohadilla contenido” para que el contenedor se muestre con un color de fondo gris. En Mozilla Firefox, el encabezado y el texto aparecen correctamente. Sin embargo, el contenedor no aparece con el color de fondo gris. Como veremos a continuación, el resto de navegadores tienen el mismo comportamiento. En Google Chrome, en Internet Explorer, y en Opera se muestra el mismo resultado. Aquí tenemos el DOM, el árbol que construye Mozilla Firefox. Podemos ver que el navegador ha considerado que el valor del atributo rel va desde esta comilla hasta esta otra comilla. Lo que viene a continuación lo ha transformado en un nuevo atributo, como podemos ver aquí, “contenido” se ha transformado en un nuevo atributo. Y a partir de ahí ha seguido correctamente con la interpretación del código. La etiqueta ha desaparecido, porque ha pasado a formar parte del atributo rel, pero el navegador la ha incorporado al DOM automáticamente, ya que siempre debe existir. Como el ha desaparecido, la página no se muestra con el color de fondo gris. En Google Chrome, también parece que todo lo que aparece a continuación del atributo rel hasta la siguiente comilla lo ha considerado parte del valor del atributo. “contenido” lo interpreta como un nuevo atributo de la etiqueta , como podemos ver aquí. Y a partir de ahí el navegador se ha recuperado de forma correcta. Internet Explorer hace algo parecido a Mozilla Firefox y Google Chrome y por eso la página se muestra igual. Podemos ver aquí como Internet Explorer, todo lo que viene a continuación también lo mete en el valor del atributo rel hasta que se encuentra la comilla. Y “contenido” también lo ha transformado en un nuevo atributo de la etiqueta .

Y por último Opera también muestra un comportamiento similar, aquí tenemos el valor del atributo rel que vuelve a ser lo mismo y “contenido” también lo ha vuelto a transformar en un atributo de la etiqueta y a partir de este punto se ha recuperado correctamente en la presentación de la página web. En resumen, hemos visto que la clave para entender los diferentes comportamientos de los navegadores es el DOM, el Document Object Model. Los navegadores construyen un mismo DOM, un mismo árbol, a partir de un código HTML correcto, pero cuando el código contiene errores, cada navegador puede construir un árbol diferente. Y con esto finaliza este videotutorial sobre la importancia de escribir código HTML correcto. Si necesitas más información o quieres contactar conmigo, en la página web http://desarrolloweb.dlsi.ua.es podrás encontrar más información sobre el desarrollo web o también puedes contactar directamente conmigo a través de mi dirección de correo electrónico [email protected]. Vídeo: http://youtu.be/fBQ8wE5Ffxs

Presentación del proyecto Más contenido 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.

¿Y ahora qué? Más contenido 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.

×

Report "Modulo 4"

Your name

Email

Reason -Select Reason- Pornographic Defamatory Illegal/Unlawful Spam Other Terms Of Service Violation File a copyright complaint

Description

Close Submit

Our partners will collect data and use cookies for ad targeting and measurement. Learn how we and our ad partner Google, collect and use data. Agree & close