Arrancar Con HTML5 Parte 6

22
Preparndonos para HTML5
La figura 2.5 muestra el aspecto que tiene el cdigo anterior cuando lo prueba
en el navegador.
Fig. 2.5 Pgina que utiliza prrafos <p>.

Muchas veces el espacio vertical entre prrafos no es algo deseable para la
esttica de sus pginas, por ejemplo, cuando se quiere hacer un breve resumen de
indicaciones o especificaciones.
Para insertar un salto de lnea, simplemente se utiliza la etiqueta <br/>, esta
etiqueta no requiere cierre. Hay que aclarar que el uso de <br/> no depende de
ninguna manera de la etiqueta <p>, por tanto se puede utilizar dentro o fuera de un
prrafo o sin ningn prrafo presente, como se muestra:
<p>Correo electrnico:</p><br/>prueba@midominio.com
o bien, si as lo desea:
<p>Correo electrnico:<br/>prueba@midominio.com</p>
Modifique el archivo principal.html para agregar un prrafo con la leyenda

Bienvenido(a) a la Tienda de Mascotas!, despus el pequeo mensaje informativo
Nuestra misin es facilitarle el camino para hacer de una de nuestras mascotas un
gran compaero para usted y toda su familia, disfrute la visita a nuestro sitio y esperamos servirle pronto en nuestra tienda. Finalmente, utilizando un prrafo y dentro
saltos de lnea, coloque lo siguiente:
Nuestra Direccin:
Calle: San Ciprin No. 45
Colonia: Centro
Mxico D.F.
C.P. 07640
La Fig. 2.6 muestra cmo se ver la pgina en el navegador, una vez salvada.
ARRANCAR CON HTML5. CURSO DE PROGRAMACIN EMMANUEL HERRERA
Alfaomega
Apoyo en la
23
Fig. 2.6 Pgina que utiliza saltos de lnea <br/>.

En los materiales adicionales encontrar el archivo principal.html
2.6 Deteccin de las caractersticas de HTML5

No quiero dejar pasar la tcnica que utilic para hacer el detector de caractersticas,
porque es probable que algunos lectores con algo de experiencia deseen saber
cmo lo hice, pero si usted es an un principiante, no se preocupe si no entiende
totalmente el cdigo expuesto, si contina consultando este libro lo entender por
completo antes de lo que cree.
Todas las tcnicas que hay para detectar la viabilidad de HTML5 se basan en
intentar crear un elemento, para despus llamar a alguna propiedad de este elemento y ver si efectivamente est ah. Como mencion anteriormente, utilic la
popular librera de cdigo libre llamada Modernizr licenciada por el MIT, los pasos
bsicos para hacer su propio detector son los siguientes:
1. Descargue la librera Modernizr del sitio oficial http://www.modernizr.com y
coloque el archivo de esta librera en el mismo directorio donde se
encontrar su pgina (utilice la ltima disponible).
2. Abra el archivo primer_html5.html) y gurdelo como midetector.html (si
prefiere hacer todo desde cero, adelante).
3. Dentro de la cabecera de su pgina (etiqueta <head>) coloque una etiqueta
para poder leer JavaScript, Modernizr es esencialmente un archivo
JavaScript con extensin .js que se invocar desde su pgina.
<script src="modernizr-2.0.js"></script>
Alfaomega
24
4. Hay que aadir una clase que requiere Modernizr para dejarle saber a las
hojas de estilo (CSS) si JavaScript est o no disponible en el navegador, sta
se coloca en la etiqueta <html> como sigue:
<html class="no-js">
5. Coloque un contenedor para depositar el resultado obtenido del anlisis con

Modernizr, para esto se usa la etiqueta <div> con el identificador resultado
y la indicacin de disparar la funcin desde la etiqueta <body> con su evento
onload llamando a la funcin JavaScript detectar().
<body onload="detectar()">
<div id="resultado">
</div>
</body>
6. Finalmente se debe colocar una funcin llamada en nuestro caso detectar

que utiliza Modernizr para averiguar si una caracterstica HTML5 existe,
para fines del ejemplo se detectar una caracterstica que est presente en
todos los navegadores que soportan HTML5, sta es la etiqueta <canvas>.
Para enriquecer un poco el detector, haga que le indique si est disponible
una caracterstica HTML5 para grficos en 3D llamada Webgl disponible hasta
ahora slo en Chrome y en Firefox en sus ltimas versiones, nuestra funcin
detectar:
<script type = "text/javascript">
function detectar(){
if (Modernizr.canvas){
document.getElementById("resultado").innerHTML
puede usar la etiqueta canvas :))) <br />";
}else{
no puede usar la etiqueta canvas :( <br />";
}
if (Modernizr.webgl){
puede usar WebGL :))) ";
}else{
no puede usar WebGL :( ";
}
}
= "El navegador
= "El navegador
+= "El navegador
+= "El navegador
</script>
La Fig. 2.7 muestra la pgina en ejecucin.
Alfaomega
25
Fig. 2.7 Pgina en ejecucin que utiliza Modernizr.

Nota
Si desea hacer an ms sofisticado su detector de caractersticas HTML5
requiere entonces ir ms a fondo en la librera Modernizr y mejorar el cdigo
JavaScript.
Actividades para el lector

1. Investigue qu son los tipos MIME.
2. Haga una tabla donde indique los tipos MIME, sus caractersticas y acciones.
3. Determine el tipo MIME utilizado implcitamente por HTML5.
4.- Utilice el detector de caractersticas HTML5 y compare las capacidades de
por menos dos navegadores.
5.-Elabore un documento HTML5 cuya estructura bsica sea: ttulo, metadatos y
dos prrafos incluya un salto de lnea entre ellos.
Alfaomega
26
RESUMEN
En este captulo se han analizado los puntos ms esenciales para poder a comenzar
a desarrollar bajo la especificacin HTML5:
x
Navegadores que soportan HTML5 y cmo elegir uno.
Como crear la estructura base de un HTML5.
Utilizar los elementos HTML para crear prrafos y saltos de pgina para
familiarizarse con estos elementos.
Filosofa de etiquetado de HTML.
Cmo establecer el nivel de soporte de HTML5 por parte de un navegador

utilizando la librera Modernizr.
Autoevaluacin
1. Qu navegador es el ms avanzado en cuanto a soporte para HTML5?
2. Cmo indica en un documento HTML que debe ser interpretado como HTML5?
3. Qu elemento indica el encabezado de un documento HTML?
4. Qu elemento indica el cuerpo de un documento HTML?
5. Qu es Modernizr?
Alfaomega
27
EVIDENCIA
Investig los tipos MlME, en un tabla indica sus caracteristicas y
acciones.
Determin que tipo MIME utiliza HTML5
Compar y document las capacidades de diferentes navegadores con

el detector de caractersticas HTML5.
Implement la estructura bsica de un documento HTML5.
Utiliz prrafos y saltos de lnea, en documentos HTML5.
REFERENCIAS
Bibliografa
Pilgrim, Mark, (2010). HTML5: Up and Running, 1a. ed., OReilly, Estados Unidos de
Amrica.
Wempen, Faithe, (2011). HTML5: Step by Step 1a. ed., OReilly, Canad.
Pginas Web recomendadas

http://www.modernizr.com/
http://dev.w3.org/html5/spec/Overview.html
http://diveintohtml5.org/
Alfaomega
28
Respuestas sugeridas a las preguntas de autoevaluacin

1. Google Chrome es el navegador con mayor soporte para HTML5
(Octubre de 2011)
2. Utilizando el elemento DOCTYPE (<!DOCTYPE html>).
3. El elemento <head>.
4. El elemento <body>.
5. Es una librera de cdigo libre proporcionada por el MIT que facilita la deteccin
del soporte de los navegadores para elemento HTML5.
Alfaomega

Arrancar Con HTML5 Parte 6

Cargado por

Información del documento

Descripción:

Derechos de autor

Formatos disponibles

Compartir este documento

Compartir o incrustar documentos

Opciones para compartir

¿Le pareció útil este documento?

¿Este contenido es inapropiado?

Descripción:

Copyright:

Formatos disponibles

Arrancar Con HTML5 Parte 6

Cargado por

Descripción:

Copyright:

Formatos disponibles

22

Preparndonos para HTML5

Fig. 2.5 Pgina que utiliza prrafos <p>.

Modifique el archivo principal.html para agregar un prrafo con la leyenda

ARRANCAR CON HTML5. CURSO DE PROGRAMACIN EMMANUEL HERRERA

Preparndonos para HTML5

Fig. 2.6 Pgina que utiliza saltos de lnea <br/>.

2.6 Deteccin de las caractersticas de HTML5

ARRANCAR CON HTML5. CURSO DE PROGRAMACIN EMMANUEL HERRERA

Preparndonos para HTML5

5. Coloque un contenedor para depositar el resultado obtenido del anlisis con

6. Finalmente se debe colocar una funcin llamada en nuestro caso detectar

La Fig. 2.7 muestra la pgina en ejecucin.

ARRANCAR CON HTML5. CURSO DE PROGRAMACIN EMMANUEL HERRERA

Preparndonos para HTML5

Fig. 2.7 Pgina en ejecucin que utiliza Modernizr.

Actividades para el lector

ARRANCAR CON HTML5. CURSO DE PROGRAMACIN EMMANUEL HERRERA

Preparndonos para HTML5

Navegadores que soportan HTML5 y cmo elegir uno.

Como crear la estructura base de un HTML5.

Filosofa de etiquetado de HTML.

Cmo establecer el nivel de soporte de HTML5 por parte de un navegador

ARRANCAR CON HTML5. CURSO DE PROGRAMACIN EMMANUEL HERRERA

Preparndonos para HTML5

Compar y document las capacidades de diferentes navegadores con

Pginas Web recomendadas

ARRANCAR CON HTML5. CURSO DE PROGRAMACIN EMMANUEL HERRERA

Preparndonos para HTML5

Respuestas sugeridas a las preguntas de autoevaluacin

ARRANCAR CON HTML5. CURSO DE PROGRAMACIN EMMANUEL HERRERA

También podría gustarte