tag:blogger.com,1999:blog-84930467288605809962023-11-15T10:44:58.686-08:00HTML 5Blog alrededor de la construcción de páginas web con el Lenguaje HTML en su versión 5angelpuentehttp://www.blogger.com/profile/17065488804316690770noreply@blogger.comBlogger10125tag:blogger.com,1999:blog-8493046728860580996.post-90957030450784374482013-08-22T06:38:00.000-07:002014-09-27T08:47:32.408-07:0009.- Vídeo: ¿cuántas opciones de formato?En la entrada <a href="http://angelpuentehtml5.blogspot.com.es/2011/01/video.html#more">05.- Vídeo</a> explicábamos el código para la inserción del vídeo con dos formatos diferentes: el <b>ogv</b> y el <b>mp4</b>.<br />
Con estos dos formatos, las cosas funcionan.<br />
Sin embargo, en <a href="http://www.w3schools.com/html/html_videos.asp" target="_blank">algunos sitios</a>, hacen la propuesta de un tercer formato: el <a href="http://es.wikipedia.org/wiki/WebM" target="_blank">webm</a>.<br />
Es un formato ideado por Google y destinado especialmente para ser usado con el <b>HTML 5</b>. Así que no parece mala idea incluirlo como una tercera opción.<br />
<br />
<a name='more'></a><br />
El código final quedaría así:<br />
<br />
<code><b style="color: blue;"><video controls="controls" height="<span style="color: red;">366</span>" width="<span style="color: red;">650</span>"><br /><source src="http://<span style="color: red;">_larutadelarchivo_</span>.mp4" type="video/mp4"><br /><source src="http://<span style="color: red;">_larutadelarchivo_</span>.ogv" type="video/ogg"></b><br /><b style="color: blue;"><b style="color: blue;"><source src="http://<span style="color: red;">_larutadelarchivo_</span>.webm" type="video/webm"></b></b><br />
<b style="color: blue;"></video></b></code><br />
<br />
Por cierto una excelente herramienta para convertir en línea vídeos de un formato a otro:<br />
<a href="http://www.online-convert.com/es" target="_blank">http://www.online-convert.com/es </a><br />
<br />
<a href="javascript:popUp('http://www.angelpuente.es/html5/09.html')">Comprobar el funcionamiento, el código empleado y la validación del W3C</a>. angelpuentehttp://www.blogger.com/profile/17065488804316690770noreply@blogger.com0tag:blogger.com,1999:blog-8493046728860580996.post-24471919503652781372013-08-21T23:54:00.000-07:002013-08-22T06:41:50.400-07:0008.- Etiqueta <source>Una de las más importantes características del lenguaje HTML 5 es la posibilidad de reproducir archivos de audio o de vídeo sin la dependencia de los reproductores flash.<br />
El objetivo es que nuestra multimedia pueda ser vista y oída en cualquier sistema operativo de cualquier dispositivo.<br />
En las entradas <a href="http://angelpuentehtml5.blogspot.com.es/2011/10/audio.html">4.- Audio</a> y <a href="http://angelpuentehtml5.blogspot.com.es/2011/01/video.html">5.- Vídeo</a> hemos descrito cómo debe hacerse para que el navegador reconozca los archivos multimedia correspondiente y nos coloque el reproductor.<br />
He revisado ambas entradas fruto de algunos comentarios.<br />
<br />
<a name='more'></a><br />
Para empezar decir que la etiqueta <b><span style="color: blue;"><source></span></b> (nueva en HTML 5) no tiene que cerrarse.<br />
Durante tiempo yo la he cerrado con la correspondiente etiqueta de cierre:<br />
<br />
<code><b><span style="color: blue;"><audio controls="controls"><br /><source src="rutadelaudio.mp3" type="audio/mpeg"></source><br /><source src="rutadelaudio.ogg" type="audio/ogg"></source><br /></audio></span></b></code><br />
<br />
Aunque la multimedia correspondiente, audio o vídeo, funciona correctamente, puedes comprobar que el consorcio W3C no lo admite.<br />
<br />
<a href="javascript:popUp('http://www.angelpuente.es/html5/08a.html')">Comprobar</a>. <br />
<br />
Podríamos optar por cerrarla dentro de la propia etiqueta:<br />
<br />
<code><b><span style="color: blue;"><audio controls="controls"><br /><source src="rutadelaudio.mp3" type="audio/mpeg" /><br /><source src="rutadelaudio.ogg" type="audio/ogg" /><br /></audio></span></b></code> <br />
<br />
Y eso ya es admitido por el W3C.<br />
<br />
<a href="javascript:popUp('http://www.angelpuente.es/html5/08b.html')">Comprobar</a>. <br />
<br />
Pero finalmente, parece que lo mejor es no cerrarla en ningún caso.<br />
Así que el código más ajustado a la norma sería:<br />
<br />
<code><b><span style="color: blue;"><audio controls="controls"><br /><source src="rutadelaudio.mp3" type="audio/mpeg"><br /><source src="rutadelaudio.ogg" type="audio/ogg"><br /></audio></span></b></code> <br />
<br />
<a href="javascript:popUp('http://www.angelpuente.es/html5/08c.html')">Comprobar</a>.<br />
<br />
<span style="font-size: x-small;">Audio empleado como ejemplo: poema "Paz" de Federico Mayor Zaragoza interpretado por Paco Damas</span>. <a href="http://antologiapoeticamultimedia.blogspot.com.es/2013/06/paz.html" target="_blank"><span style="font-size: x-small;">Ver en la Antología Poética Multimedia.</span></a>angelpuentehttp://www.blogger.com/profile/17065488804316690770noreply@blogger.com0tag:blogger.com,1999:blog-8493046728860580996.post-23931269019797362532013-08-21T14:35:00.004-07:002013-08-22T00:46:58.809-07:0007.- CSS 2: Centrar un textoDe forma similar a centrar una imagen, para centrar un texto hay que declarar una norma de estilo CSS:<br />
<br />
<span style="color: blue;"><b><code>p.txtcentrado {<br />
text-align:center;<br />
}</code></b></span><br />
<br />
Y después llamar a ese estilo cuando construyamos el párrafo que queremos entrar:<br />
<br />
<b><span style="color: blue;"><code><p class="txtcentrado">Este texto tiene que aparecer centrado</p></code></span></b><br />
<br />
<a href="javascript:popUp('http://www.angelpuente.es/html5/06.html')">Ver el ejemplo concreto para comprobar el código y para la validación</a>
angelpuentehttp://www.blogger.com/profile/17065488804316690770noreply@blogger.com1tag:blogger.com,1999:blog-8493046728860580996.post-52863612871686023402013-08-20T02:53:00.002-07:002013-08-21T14:27:54.374-07:0006.- Cursos gratuitos en la WebRetomamos la edición de este blog con la recomendación de un curso gratuito disponible en Internet.<br />
Se trata del<a href="http://msdn.microsoft.com/es-es/ie/hh749019" target="_blank"> curso de Microsoft</a> en seis lecciones:<br />
1.- <a href="http://msdn.microsoft.com/es-es/ie/hh749020" target="_blank">Definición de HTML 5</a><br />
2.- <a href="http://msdn.microsoft.com/es-es/ie/hh749021" target="_blank">Conceptos básicos de HTML, XHTML y CSS</a><br />
3.- <a href="http://msdn.microsoft.com/es-es/ie/hh749022" target="_blank">Introducción a la presentación en pantalla con CSS</a><br />
4.- <a href="http://msdn.microsoft.com/es-es/ie/hh749023" target="_blank">Uso de las etiquetas HTML5</a><br />
5.- <a href="http://msdn.microsoft.com/es-es/ie/hh749024" target="_blank">Uso del elemento Canvas</a><br />
6.- <a href="http://msdn.microsoft.com/es-es/ie/hh749025" target="_blank">Funciones Drag y Drop de HTML5</a>angelpuentehttp://www.blogger.com/profile/17065488804316690770noreply@blogger.com0tag:blogger.com,1999:blog-8493046728860580996.post-59259763190048986002011-10-28T06:01:00.000-07:002013-08-21T23:13:43.709-07:0005.- Vídeo<video controls="controls" height="342" width="480">
<source src="http://www.angelpuente.es/arte/m_c_escher.mp4" type="video/mp4"></source>
<source src="http://www.angelpuente.es/arte/m_c_escher.ogv" type="video/ogg"></source>
</video> <br />
<br />
Ver el <a href="javascript:popUp('http://www.angelpuente.es/html5/05.html')">ejemplo concreto en ventana emergente y comprobar validación de código</a>.<br />
<a name='more'></a>Para incorporar un vídeo debemos poner dos alternativas de formato. El <b>mp4 </b>y el <b>ogv</b>.<br />
El código quedaría así:<br />
<b style="color: blue;"><video controls="controls" height="<span style="color: red;">366</span>" width="<span style="color: red;">650</span>"><br /><source src="http://<span style="color: red;">_larutadelarchivo_</span>.mp4" type="video/mp4"><br /><source src="http://<span style="color: red;">_larutadelarchivo_</span>.ogv" type="video/ogg"><br /></video></b><br />
Cambiando los valores en rojo por lo que corresponda.angelpuentehttp://www.blogger.com/profile/17065488804316690770noreply@blogger.com0tag:blogger.com,1999:blog-8493046728860580996.post-90238357307633712882011-10-26T09:57:00.000-07:002013-08-21T23:13:23.701-07:0004.- Audio<audio controls="controls">
<source src="http://angelpuente.es/antologia/consejospara2.mp3" type="audio/mpeg"></source>
<source src="http://angelpuente.es/antologia/consejospara2.ogg" type="audio/ogg"></source>
</audio><br />
<br />
Ver el <a href="javascript:popUp('http://www.angelpuente.es/html5/04.html')">ejemplo concreto en ventana emergente y comprobar validación de código</a>.<br />
<br />
<a name='more'></a>Tenemos que proporcionar dos alternativas de formato: mp3 y ogg.<br />
El código a colocar es éste:<br />
<br />
<div style="color: blue;">
<b><audio controls="controls"><br /><source src="http://<span style="color: red;">_larutadelarchivo_</span>.mp3" type="audio/mpeg"><br /><source src="http://<span style="color: red;">_larutadelarchivo_</span>.ogg" type="audio/ogg"><br /></audio></b></div>
<br />
Modificando lo marcado en rojo por lo que corresponda.<br />
<span style="font-size: x-small;">Tema del ejemplo: "Consejos para ciudadanos pacifistas" de Luis García Montero interpretado por Lorena.</span><br />
<br />
<br />
Alternativa para navegadores que no soportan HTML 5:<br />
<object data="http://www.angelpuente.es/reprod/audio-player/player.swf?soundFile=http://angelpuente.es/antologia/consejospara2.mp3&bg=0xf8f8f8&leftbg=0xeeeeee&amp;amp;amp;amp;amp;lefticon=0x666666&rightbg=0xcccccc&rightbghover=0x999999&righticon=0x666666&righticonhover=0xffffff&text=0x666666&slider=0x666666&track=0xFFFFFF&border=0x666666&amp;loader=0x9FFFB8" height="24" type="application/x-shockwave-flash" width="290">
<param value="http://www.angelpuente.es/reprod/audio-player/player.swf?soundFile=http://angelpuente.es/antologia/consejospara2.mp3&bg=0xf8f8f8&leftbg=0xeeeeee&amp;lefticon=0x666666&rightbg=0xcccccc&amp;amp;amp;amp;amp;rightbghover=0x999999&righticon=0x666666&amp;amp;amp;amp;amp;righticonhover=0xffffff&text=0x666666&slider=0x666666&track=0xFFFFFF&border=0x666666&loader=0x9FFFB8" name="movie">
<param value="high" name="quality">
<param value="false" name="menu">
<param value="transparent" name="wmode">
</object>angelpuentehttp://www.blogger.com/profile/17065488804316690770noreply@blogger.com3tag:blogger.com,1999:blog-8493046728860580996.post-34224914102167072642011-01-13T13:26:00.000-08:002013-08-21T08:10:36.704-07:0003.- CSS 1: centrar una imagenMuchos de los temas de formato ya no se pueden hacer con tas tradicionales etiquetas.<br />
Es lo que ocurre, por ejemplo, con <b style="color: blue;"><center></b> para centrar un objeto, una imagen por ejemplo.<br />
Estos temas tienen que resolverse con <a href="http://es.wikipedia.org/wiki/Hojas_de_estilo_en_cascada" target="_blank">CSS</a>.<br />
Hay tres niveles de declaración para estos estilos: <br />
<ul>
<li>La hoja de estilos externa</li>
<li>La declaración para todo el documento en la cabecera del mismo</li>
<li>El estilo en una etiqueta al lado del elemento, en el body. El menos recomendado</li>
</ul>
Estos tres niveles de concreción es lo que da nombre a estos estilos "en cascada".<br />
Vamos a ver cómo hemos centrado la imagen del logo del <b>W3C </b>en los ejemplos anteriores<b> </b>para crear el vínculo al <b>W3C Validator</b>.<br />
La declaración se ha hecho en la cabecera del documento.<br />
Ver el <a href="javascript:popUp('http://www.angelpuente.es/html5/03.html')">ejemplo concreto</a>.<br />
<br />
<a name='more'></a><br />
Éste es el código para declarar el estilo <b>CSS</b>. Se ha añadido <b style="color: blue;">border:none;</b> para que la imagen no se marque con el borde azul que en principio tienen las imágenes que son vínculos.<br />
<br />
<table bgcolor="#e3fff4" border="1" cellpadding="10" style="width: 700px;"><tbody>
<tr><td><code><style type="text/css"><br />
IMG.imgcenter{<br />
display: block;<br />
margin-left: auto;<br />
margin-right: auto;<br />
border:none;<br />
}<br />
</style></code></td></tr>
</tbody></table>
<br />
Luego, en la etiqueta de la imagen, hay que escribir el <b>atributo </b>que llama a este estilo: <b style="color: blue;">class="imgcenter"</b>.<br />
<br />
<table bgcolor="#e3fff4" border="1" cellpadding="10" style="width: 700px;"><tbody>
<tr><td><code><img src="img/validator.png" alt="W3C_validator" width="80" height="15" class="imgcenter"></code></td></tr>
</tbody></table>
<br />
Éste es el código completo de la página creada:<br />
<br />
<table bgcolor="#e3fff4" border="1" cellpadding="10" style="width: 700px;"><tbody>
<tr><td><code><!DOCTYPE html><br />
<html><br />
<head><br />
<meta charset="UTF-8"><br />
<title>Tipo de documento</title><br />
<style type="text/css"><br />
IMG.imgcenter{<br />
display: block;<br />
margin-left: auto;<br />
margin-right: auto;<br />
border:none;<br />
} <br />
</style><br />
</head><br />
<body><br />
<p>Esto es un documento para mostrar cómo centrar una imagen.</p><br />
<p>Hacemos una declaración de estilo CSS en la cabecera del documento y le ponemos un nombre para referenciarlo luego desde el atributo "class" de la etiqueta de la imagen.</p><br />
<p>Pulsa sobre la imagen para comprobar que la página está correctamente escrita.</p><br />
<hr /><br />
<a href="http://validator.w3.org/check/referer" title="Pulsa para comprobar la validez del código de la página"></code><br />
<code><img src="img/validator.png" alt="W3C_validator" width="80" height="15" class="imgcenter"></code><br />
<code></a><br />
</body><br />
</html><br />
</code></td></tr>
</tbody></table>
angelpuentehttp://www.blogger.com/profile/17065488804316690770noreply@blogger.com13tag:blogger.com,1999:blog-8493046728860580996.post-70696096461128694022011-01-12T14:20:00.000-08:002013-08-21T01:26:12.601-07:0002.- Declaración del juego de caracteres, del "charset"La declaración del <span style="color: blue;"><a href="http://en.wikipedia.org/wiki/Character_encoding" target="_blank"><b>charset</b></a></span> es obligatoria en <b>HTML 5</b>.<br />
Charset: <i>char</i>, de carácteres y <i>set</i> de conjunto. <br />
Se hace con la etiqueta <b style="color: blue;"><meta></b><br />
El juego de caracteres más utilizado y que es adecuado a nuestro idioma es el <a href="http://es.wikipedia.org/wiki/UTF-8" target="_blank"><b>UTF-8</b></a>.<br />
En la página anterior creábamos una página con el charset declarado.<br />
Ahora lo hacemos sin el charset para comprobar que al intentar validar la página en el servicio del <b>W3C </b>nos da un mensaje de error.<br />
Ver el <a href="javascript:popUp('http://www.angelpuente.es/html5/02.html')">ejemplo concreto</a>. <br />
<br />
<a name='more'></a>Este es el código que hemos escrito en esta ocasión:<br />
<table bgcolor="#e3fff4" border="1" cellpadding="10" style="width: 700px;"><tbody>
<tr><td><code><!DOCTYPE html><br />
<html><br />
<head><br />
<title>Tipo de documento</title><br />
<style type="text/css"><br />
IMG.imgcenter{<br />
display: block;<br />
margin-left: auto;<br />
margin-right: auto;<br />
border:none;<br />
} <br />
</style><br />
</head><br />
<body><br />
<p>Esto es un documento para mostrar que la declaración del juego de caracteres es obligatorio en HTML 5.</p><br />
<p>En este documento no lo hemos declarado.</p><br />
<p>Comprueba que al intentar validar la página aparece el mensaje de error.</p><br />
<p>Pulsa con el botón derecho del ratón para comprobar el código fuente.</p><br />
<hr /><br />
<a href="http://validator.w3.org/check/referer" title="Pulsa para comprobar la validez del código de la página"><img src="img/validator.png" alt="W3C_validator" width="80" height="15" class="imgcenter"></a><br />
</body><br />
</html><br />
</code></td></tr>
</tbody></table>
<br />
<a href="javascript:popUp('http://www.angelpuente.es/html5/02b.html')">Ver ahora el ejemplo con el charset declarado</a>:<br />
<br />
<span style="color: blue;"><b><code><meta charset="UTF-8"></code></b></span><br />
<code> </code> <br />
Más información sobre el atributo <b><span style="color: blue;">charset</span></b> y otros atributos de la etiqueta <span style="color: blue;"><b><meta></b></span> en <a href="http://www.w3schools.com/tags/tag_meta.asp" target="_blank">w3schools</a>. angelpuentehttp://www.blogger.com/profile/17065488804316690770noreply@blogger.com0tag:blogger.com,1999:blog-8493046728860580996.post-58241379559174515802011-01-11T13:36:00.000-08:002013-08-21T00:31:23.092-07:0001.- Declaración del tipo de documento y alguna otra ideaEl documento HTML tiene que empezar con una declaración del <b>DOCTYPE</b> (tipo de documento: <i>doc</i> de documento, <i>type</i> de tipo).<br />
Es una declaración absolutamente sencilla.<br />
Nada que ver con las <a href="http://roble.pntic.mec.es/apuente/html/xhtml/02.htm" target="_blank">complejidades del XHTML</a> que también tenía la declaración del tipo de documento como obligatorio (no así en HTML 4).<br />
Veamos <a href="javascript:popUp('http://www.angelpuente.es/html5/01.html')">un ejemplo concreto</a>.<br />
<br />
<a name='more'></a> Este es el código que he escrito:<br />
<br />
<table bgcolor="#e3fff4" border="1" cellpadding="10" style="width: 700px;"><tbody>
<tr><td><code><!DOCTYPE html><br />
<html><br />
<head><br />
<meta charset="UTF-8"><br />
<title>Tipo de documento</title><br />
<style type="text/css"><br />
IMG.imgcenter{<br />
display: block;<br />
margin-left: auto;<br />
margin-right: auto;<br />
border:none;<br />
} <br />
</style><br />
</head><br />
<body><br />
<p>Esto es un documento para mostrar el DOCTYPE del HTML 5.</p><br />
<p>Pulsa con el botón derecho del ratón sobre cualquier parte de este documento para ver el código fuente.</p><br />
<p>Pulsa sobre la imagen para comprobar que la página está correctamente escrita.</p><br />
<hr /><br />
<a href="http://validator.w3.org/check/referer" title="Pulsa para comprobar la validez del código de la página"></code><br />
<code><img src="img/validator.png" alt="W3C_validator" width="80" height="15" class="imgcenter"></code><br />
<code></a><br />
</body><br />
</html><br />
</code></td></tr>
</tbody></table>
<br />
En lo que respecta a este contenido la única línea que nos importa es la primera.<br />
En ella se produce la declaración del tipo de contenido.<br />
Como se puede observar es absolutamente sencilla:<br />
<br />
<span style="color: blue;"><b><code><!DOCTYPE html></code></b></span><br />
<br />
Nada más.<br />
En las dos siguientes entradas comentaré la <a href="http://angelpuentehtml5.blogspot.com.es/2011/01/02-declaracion-del-juego-de-caracteres.html">cuarta línea del código</a>.<br />
Y las correspondientes al <a href="http://angelpuentehtml5.blogspot.com.es/2011/01/css-1-centrar-una-imagen.html">centrado de la imagen</a>.<br />
Este blog da por supuesto que el lector conoce el viejo lenguaje HTML 4.<br />
En caso de no ser así, es conveniente familiarizarse con el mismo.<br />
En <a href="http://roble.pntic.mec.es/apuente/html/" target="_blank">este manual</a> puedes hacerlo.<br />
<br />
En este página se explica la <a href="http://www.w3schools.com/tags/tag_doctype.asp" target="_blank">declaración del tipo de documento</a>. angelpuentehttp://www.blogger.com/profile/17065488804316690770noreply@blogger.com0tag:blogger.com,1999:blog-8493046728860580996.post-63232047350321565762011-01-07T14:52:00.000-08:002011-01-11T14:46:16.110-08:00¿Empezando?¿Es un blog el formato más adecuado para escribir sobre Lenguaje HTML?<br />
La verdad es que lo dudo...angelpuentehttp://www.blogger.com/profile/17065488804316690770noreply@blogger.com0