domingo, 27 de diciembre de 2015

4.1. Presentación

4.1. Presentación

Los objetivos de este módulo son:
  • Aprender a crear páginas web con tablas e imágenes.
  • Aprender a válidar el código HTML para crear páginas web correctas.
  • Aprender las principales novedades de HTML5.

4.2. ¿Estás escribiendo bien tus páginas?

4.2. ¿Estás escribiendo bien tus páginas?

Ya has aprendido muchas cosas, ya sabes escribir páginas web sencillas pero, ¿estás escribiendo bien tus páginas?
"Klaro, este testo lo puedes entender, quisas alla errores que te confundan, pero si lo bes dos vezes seguro que lo entiendes."
Con las páginas web ocurre lo mismo, pueden tener errores que hagan que los navegadores se confundan y no interpreten correctamente nuestras páginas
Después de todo el esfuerzo invertido en crear una página web, ¿te gustaría que un navegador web mostrase algo distinto de lo que tú has querido hacer? Para evitarlo debes escribir páginas web correctas: páginas bien estructuradas y sin errores.

4.3. HTML: juego de caracteres

4.3. HTML: juego de caracteres

El juego de caracteres, también llamado codificación de caracteres, es la pesadilla de la mayoría de los informáticos porque es una fuente de problemas inagotable.
En el siguiente vídeo se muestran ejemplos reales de problemas con el juego de caracteres y se proporcionan los consejos más importantes para trabajar con el juego de caracteres:
  • Utiliza siempre el mismo juego de caracteres.
  • Utiliza UTF-8 sin BOM.
  • Diferencias entre ISO-8859-1 (Latin1) e ISO-8859-15 (Latin9).
  • Cómo se indica el juego de caracteres en HTML (etiqueta meta).
  • Diferencias entre HTML4, XHTML1 y HTML5.

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

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

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

4.5. HTML: tablas

4.5. HTML: tablas

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

4.5. Actividad

4.5. Actividad

1. Crea una página web a partir del texto que se te proporciona y que tenga el mismo aspecto que en la siguiente imagen:
Captura de pantalla
Para crear la página web tienes que tener en cuenta los siguientes requisitos:
  • El destino del enlace "Índice de desempleo anual" es la página web:
    http://epp.eurostat.ec.europa.eu/tgm/table.do?tab=table&init=1&language=en&pcode=tsdec450&plugin=1
Nota: en el código base que se te proporciona vas a encontrar una etiqueta nueva, la etiqueta <style>. Esta etiqueta permite introducir instrucciones de CSS (Cascading Style Sheets) en una página web.
CSS se emplea para definir la presentación visual de una página web y se explica en la segunda parte de este curso. Las instrucciones que se han incluido tienen como objetivo que la tabla y las celdas de la tabla se muestren con un borde. Esto también se podría haber logrado con el atributo border de HTML, pero es mejor utilizar siempre CSS para todo lo relacionado con la presentación de una página web. El uso del CSS se explica en la segunda parte de este curso.

SOLUCIÓN:
 <!-- SOLUCIÓN -->
<html>
<head>
<title>Desempleo</title>
<style>
table, tr, th, td {
border: 1px solid black;
}
</style>
</head>
<body>

<h1>El desempleo en España</h1>

<p>
La siguiente tabla muestra la evolución del desempleo en España, comparado con la media de los 27 países de la Unión Europea, Grecia, que compite con España en ser el primero en esta vergonzosa competición y Estados Unidos y Japón, dos de las primeras economías mundiales.
</p>

<table>
<tr>
<th>País</th>
<th>2000</th>
<th>2001</th>
<th>2002</th>
<th>2003</th>
<th>2004</th>
<th>2005</th>
<th>2006</th>
<th>2007</th>
<th>2008</th>
<th>2009</th>
<th>2010</th>
<th>2011</th>
<th>2012</th>
<th>2013</th>
</tr>

<tr>
<td>UE (27 países)</td>
<td>8.9</td>
<td>8.7</td>
<td>9</td>
<td>9.1</td>
<td>9.3</td>
<td>9</td>
<td>8.2</td>
<td>7.2</td>
<td>7</td>
<td>9</td>
<td>9.6</td>
<td>9.6</td>
<td>10.4</td>
<td>10.8</td>
</tr>

<tr>
<td><strong>España</strong></td>
<td><strong>11.9</strong></td>
<td><strong>10.6</strong></td>
<td><strong>11.5</strong></td>
<td><strong>11.5</strong></td>
<td><strong>11</strong></td>
<td><strong>9.2</strong></td>
<td><strong>8.5</strong></td>
<td><strong>8.2</strong></td>
<td><strong>11.3</strong></td>
<td><strong>17.9</strong></td>
<td><strong>19.9</strong></td>
<td><strong>21.4</strong></td>
<td><strong>24.8</strong></td>
<td><strong>26.1</strong></td>
</tr>

<tr>
<td>Grecia</td>
<td>11.2</td>
<td>10.7</td>
<td>10.3</td>
<td>9.7</td>
<td>10.6</td>
<td>10</td>
<td>9</td>
<td>8.4</td>
<td>7.8</td>
<td>9.6</td>
<td>12.7</td>
<td>17.9</td>
<td>24.5</td>
<td>27.5</td>
</tr>

<tr>
<td>Estados Unidos</td>
<td>4</td>
<td>4.8</td>
<td>5.8</td>
<td>6</td>
<td>5.5</td>
<td>5.1</td>
<td>4.6</td>
<td>4.6</td>
<td>5.8</td>
<td>9.3</td>
<td>9.6</td>
<td>8.9</td>
<td>8.1</td>
<td>7.4</td>
</tr>

<tr>
<td>Japón</td>
<td>4.7</td>
<td>5</td>
<td>5.4</td>
<td>5.3</td>
<td>4.7</td>
<td>4.4</td>
<td>4.1</td>
<td>3.9</td>
<td>4</td>
<td>5.1</td>
<td>5.1</td>
<td>4.6</td>
<td>4.3</td>
<td>4</td>
</tr>

</table>

<p>
Fuente: <a href="http://epp.eurostat.ec.europa.eu/tgm/table.do?tab=table&init=1&language=en&pcode=tsdec450&plugin=1">Índice de desempleo anual</a>, Eurostat
</p>

</body>
</html>

4.6. HTML: imágenes

4.6. HTML: imágenes

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

4.7. HTML: validación del código

4.7. HTML: validación del código

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

4.7. Actividad

4.7. Actividad
¿Qué sitio web tiene más errores de validación?
Selecciona un conjunto de sitios web, elegidos al azar o sobre una temática en particular (por ejemplo, sitios web de ayuntamientos, de universidades, de periódicos, de empresas de telecomunicaciones).
Con la ayuda de una herramienta de validación del código HTML, como Markup Validation Service del W3C, averigua qué sitio web de los que has seleccionado es el que más errores de validación presenta.

4.8. HTML5: introducción

4.8. HTML5: introducción

El 28 de octubre de 2014 el W3C publicó "HTML5. A vocabulary and associated APIs for HTML and XHTML. W3C Recommendation 28 October 2014", en dicha fecha, lo que supone que HTML5 ya tiene el rango de estándar.
¿Significa esto que ya se puede utilizar HTML5 sin problemas? No, algo ha cambiado, ya tenemos una versión estable de HTML5, pero eso no significa que de un día para otro todos los navegadores web lo soportarán mágicamente. Los navegadores web actuales, y no digamos los que tienen varios años, no soportan muchas cosas de HTML5, así que se debe utilizar con precaución.
En el siguiente vídeo se comenta la nueva versión de HTML5, los problemas de compatibilidad que pueden existir con los navegadores y se ofrecen algunos consejos para aprender HTML5.

4.9. HTML5: ¿Qué es HTML5?

4.9. HTML5: ¿Qué es HTML5?

En el siguiente vídeo verás las principales tecnologías de la familia HTML5:
  • HTML5.
  • Canvas.
  • SVG.
  • Geolocalización.
  • Caché.
  • Base de datos.
  • Web workers.

4.10. HTML5: de HTML4 a HTML5

4.10. HTML5: de HTML4 a HTML5

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


4.11. Los formularios en HTML5

4.11. Los formularios en HTML5

HTML5 incorpora novedades muy interesantes para la creación de formularios. Estas novedades aumentan los tipos de controles (se añade un control para introducir una fecha o un correo electrónico) y las características que se pueden configurar (se puede definir un patrón de entrada o un placeholder) pero hay que llevar cuidado al usarlas, ya que no todos los navegadores las aceptan todas por ahora (pero sí que lo harán en breve).
En las siguientes lecciones se resumen las novedades principales y se muestran algunos ejemplos. Si quieres complementar y contrastar lo que se explica, te recomendamos la lectura de Formularios en HTML5.

4.15. HTML5: Nuevas funcionalidades en formularios (parte 1)

4.15. HTML5: Nuevas funcionalidades en formularios (parte 1)

En el siguiente vídeo se presentan los nuevos controles de HTML5:
  • url.
  • tel.
  • email.
  • number.
  • color.
  • search.
  • range.
  • datetime.
  • datetime-local.
  • date.
  • month.
  • week.
  • time.
Además, se comenta el soporte por parte de los navegadores y se muestra la representación de algunos controles en dispositivos móviles.


4.13. HTML5: Nuevas funcionalidades en formularios (parte 2)


4.13. HTML5: Nuevas funcionalidades en formularios (parte 2)

En el siguiente vídeo se presentan los nuevos atributos que se pueden emplear en los controles de los formularios:
  • autocomplete.
  • autofocus.
  • min.
  • max.
  • step.
  • pattern.
  • placeholder.
  • required.
También se explica qué es Modernizr y los polyfills.

 

4.14. HTML5: Ejemplo de formulario

4.14. HTML5: Ejemplo de formulario

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

4.14. HTML 5: Ejemplo de formulario

4.14. HTML 5: Ejemplo de formulario

Actividad

1. Crea una página web que contenga un formulario con los siguientes campos de información:
  • Nombre, con un control de tipo texto obligatorio y con autofoco.
  • Correo electrónico, con un control de tipo email obligatorio.
  • URL, con un control de tipo url que muestre la ayuda "Escribe la URL de tu página web personal".
  • Fecha, con un control de tipo date.
  • Tiempo, con un control de tipo time.
  • Fecha y hora, con un control de tipo datetime.
  • Mes, con un control de tipo month.
  • Semana, con un control de tipo week.
  • Número, con un control de tipo number que limite la entrada a un valor entre -10 y 10.
  • Teléfono, con un control de tipo tel.
  • Término de búsqueda, con un control de tipo search.
  • Color favorito, con un control de tipo color.
  • Un botón de envío.
Además, tienes que tener en cuenta los siguientes requisitos:
  • El título de la página debe ser Formulario de prueba de HTML5.
  • El método de envío del formulario debe ser GET.
  • El destino del envío del formulario debe ser "".
Nota 1: si al validar el código HTML de tu página web con el validador del W3C se muestran mensajes de advertencia como "The date input type is not supported in all browsers. Please be sure to test, and consider using a polyfill.", no te preocupes. El validador te está avisando de que tengas cuidado al usar una característica de HTML5 que no está admitida por todos los navegadores actuales.
Nota 2: debido a lo explicado en la nota anterior, cuando realices esta actividad y compruebes cómo se visualiza tu página web en distintos navegadores es muy probable que obtengas diferentes resultados.

SOLUCIÓN
<!-- SOLUCIÓN -->
<html>
<head>
<title>Formulario de prueba de HTML5</title>
</head>
<body>

<form action="" method="get">
<p>
Nombre: <input type="text" name="name_control" autofocus required />
</p>

<p>
Correo electrónico: <input type="email" name="email_control" required />
</p>

<p>
URL: <input type="url" name="url_control" placeholder="Escribe la URL de tu página web personal" />
</p>

<p>
Fecha: <input type="date" name="date_control" />
</p>

<p>
Tiempo: <input type="time" name="time_control" />
</p>

<p>
Fecha y hora: <input type="datetime" name="datetime_control" />
</p>

<p>
Mes: <input type="month" name="month_control" />
</p>

<p>
Semana: <input type="week" name="week_control" />
</p>

<p>
Número (min -10, max 10): <input type="number" name="number_control" min="-10" max="10" value="0" />
</p>

<p>
Teléfono: <input type="tel" name="tel_control" />
</p>

<p>
Término de búsqueda: <input type="search" name="search_control" />
</p>

<p>
Color favorito: <input type="color" name="color_control" />
</p>

<p>
<input type="submit" value="Enviar" />
</p>
</form>
</body>
</html>

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

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

Los navegadores web son programas muy complejos que deben ser capaces de interpretar y representar las páginas web, que cada vez emplean tecnologías más complejas y avanzadas.
Los navegadores web deben ser "buenos" pues deben manejar cualquier página web, aunque contenga errores (que suele ser lo normal, lo extraño es encontrar una página web que no contenga errores). Pero los navegadores web a veces son "tontos" y no son capaces de interpretar correctamente una página web cuando contiene muchos errores. Cuando esto ocurre la página se puede mostrar de una forma incorrecta.
Para evitar esta situación es muy importante que escribas correctamente el código HTML. En las próximas lecciones vas a aprender a validar el código HTML para localizar y corregir los errores que puedan tener tus páginas web.

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

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

En este vídeo se explican las principales causas por las que una página web no se ve igual en todos los navegadores:
  • Fallos de los navegadores.
  • Problemas de compatibilidad entre los navegadores.
  • Soporte de HTML por los navegadores.
  • Errores en el código HTML.

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

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

En este vídeo se muestran algunos ejemplos de errores en el código HTML:
  • Etiqueta <b> sin cerrar.
  • Etiqueta <span> sin cerrar.
  • Comillas del valor de un atributo sin cerrar (2 versiones).
  • Valor del atributo size de la etiqueta "input" incorrecto.

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

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

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

4.19. Presentación del proyecto

4.19.  Presentación del proyecto

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

4.19. Actividad

4.19. Actividad

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

Objetivos

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

Qué tengo que hacer

En este módulo tienes que mejorar las páginas de tu sitio web con la incorporación de nuevos elementos, como las tablas y las imágenes.
Recuerda que las tablas no las tienes que utilizar para distribuir el contenido en tus páginas web: las tablas son para mostrar datos tabulados, no para maquetar el contenido de las páginas web. La maquetación se realizará mediante CSS (Cascading Style Sheets), la tecnología que se explicará en la segunda parte de este curso. Si quieres saber más cosas sobre esto te recomendamos la lectura de Porqué diseñar con tablas es estúpido: problemas definidos, soluciones ofrecidas.
También puedes mejorar los formularios de tu sitio web con la incorporación de los nuevos controles que añade HTML5. HTML5 ya es un estándar, fue publicado como recomendación el 28 de octubre de 2014 (HTML5 - A vocabulary and associated APIs for HTML and XHTML), pero eso no significa que todas sus características se puedan emplear: no todos los navegadores actuales admiten las nuevas características y por supuesto existe un problema de compatibilidad con los navegadores antiguos. Por tanto, antes de usar una nueva característica te recomendamos que consultes algún sitio web en el que puedas comprobar el grado de compatibilidad de las nuevas características de HTML5:
Por último, en este proyecto también te pedimos que escribas páginas web válidas, páginas web que se ajustan al estándar. Muchas personas han aprendido a hacer páginas web por la simple observación de cómo están hechas las páginas web y eso ha conducido a que se repitan malas prácticas. En el artículo Obsolete practices to avoid se indican algunas cosas que no se deben hacer en las páginas web porque son erróneas o han quedado obsoletas (ya no tiene sentido hacerlas). Al principio de este artículo se indica un problema que se da muchas veces:
Many people learned HTML, CSS, and JavaScript by viewing the source of pages and then copying and pasting them, without considering whether or not the original site was well implemented. This means that they have perpetuated coding practices that might have been necessary in the past, but are irrelevant now.This article tries to list older coding practices that over time have become unnecessary or bad practices.
Traducido al español:
Muchas personas aprendieron HTML, CSS y JavaScript mediante la visualización del código fuente de las páginas y luego copiaban y pegaban el código, sin tener en cuenta si el sitio web original estaba bien implementado. Esto significa que se han perpetuado prácticas de codificación que podrían haber sido necesarias en el pasado, pero que son irrelevantes ahora.
Tienes que aprender a utilizar las herramientas que te pueden ayudar a validar el código HTML de tus páginas web. Por ejemplo, te recomendamos que utilices Markup Validation Service del W3C.
Por último, no te olvides de publicar en Internet tu sitio web.

4.20. ¿Y ahora qué?

4.20. ¿Y ahora qué?

Si has llegado hasta aquí y has leído todas las lecciones, has visto todos los vídeos y has hecho todos los ejercicios debes de haber aprendido muchas cosas, pero el haber llegado hasta aquí no es el final de tu aprendizaje, más bien es el principio.
Todavía te quedan muchas cosas por aprender de HTML. Gracias a este curso tienes una base para seguir aprendiendo por tu cuenta. Pero quedan muchas más cosas que vas a aprender con nosotros, pero eso será en la segunda parte de este curso.

4.22 Aprende+

4.22 Aprende+
Si después de todo lo visto en este módulo todavía tienes ganas y tiempo de aprender más cosas, el apartado Aprende+ [A+] es lo que necesitas.

4.23. [A+] HTML: ¿migrar a un nuevo Juego de caracteres?

4.23. [A+] HTML: ¿migrar a un nuevo Juego de caracteres?



4.24. [A+] XML: HTML y XHTML

4.24. [A+] XML: HTML y XHTML
En el siguiente vídeo se explican las diferencias entre XML, HTML y XHTML.