tag:blogger.com,1999:blog-44279433995247027522024-03-17T20:00:46.370-07:00HTML 5 paso a pasoTodo lo que querías saber de HTML5Sergio Raposo Vargashttp://www.blogger.com/profile/00014687647130388430noreply@blogger.comBlogger21125tag:blogger.com,1999:blog-4427943399524702752.post-57712481932679576502012-06-29T04:54:00.000-07:002012-06-29T04:54:35.300-07:00File API de html5Hasta la llegada de HTML5 era imposible realizar operaciones con los ficheros de un formulario, como por ejemplo:<br />
<br />
<ul>
<li>Conocer el tamaño de un fichero y el tipo antes de ser enviado para poder realizar validaciones sin necesidad de enviarlo.</li>
<li>Poder seleccionar más de un fichero en un mismo input file.</li>
<li>Usar drag & drop para adjuntar un fichero a un formulario.</li>
</ul>
<div>
Miento, si había formas, pero todas ellas pasaban por usar otro tipo de elementos como por ejemplo, flash o applet de java</div>
<div>
<br /></div>
<div>
Con HTML5 disponemos de una nueva api con la que poder trabajar con los ficheros seleccionados en un formulario. En concreto disponemos de las siguientes funciones:</div>
<div>
<br /></div>
<div>
<ul>
<li>File: Nos permite acceder a información de un fichero individual como es el nombre, el tamaño, el mimetype o una referencia un manejador del fichero.</li>
<li>FileList: Nos permite las mismas acciones que File pero aplicadas a una lista de ficheros. Se utiliza cuando usamos un <input type="file" multiple>.</li>
<li>Blob: Nos permite cortar un fichero por rango de bytes. (Este todavía no lo he podido probar)</li>
</ul>
</div>
<div>
Como casi siempre en HTML5 no todos los navegadores soportan actualmente estas api, en principio las últimas versiones de Firefox, Chrome y Opera no tendremos problemas, pero si en Internet Explorer y Safari.</div>
<div>
<br /></div>
<div>
Para saber si el navegador del cliente soporta estas api podemos usar el código:<br />
<br /></div>
<div>
<pre class="prettyprint">if (window.File && window.FileReader && window.FileList && window.Blob) {
// Todas las APIs soportadas.
} else {
alert('La API de FILE no es soportada en este navegador.');
}</pre>
</div>
<div>
<br /></div>
<div>
A modo de ejemplo tenéis el siguiente código que muestra en un div la lista de todos los ficheros seleccionado y la información asociada a él.<br />
<br /></div>
<div>
<br />
<pre class="prettyprint"><span style="font-size: x-small;"><span class="tag"><input</span><span class="pln"> </span><span class="atn">type</span><span class="pun">=</span><span class="atv">"file"</span><span class="pln"> </span><span class="atn">id</span><span class="pun">=</span><span class="atv">"files"</span><span class="pln"> </span><span class="atn">name</span><span class="pun">=</span><span class="atv">"files[]"</span><span class="pln"> </span><span class="atn">multiple</span><span class="pln"> </span><span class="tag">/></span><span class="pln">
</span><span class="tag"><output</span><span class="pln"> </span><span class="atn">id</span><span class="pun">=</span><span class="atv">"list"</span><span class="tag">></output></span><span class="pln">
</span><span class="tag"><script></span><span class="pln">
</span><span class="kwd">function</span><span class="pln"> handleFileSelect</span><span class="pun">(</span><span class="pln">evt</span><span class="pun">)</span><span class="pln"> </span><span class="pun">{</span><span class="pln">
</span><span class="kwd">var</span><span class="pln"> files </span><span class="pun">=</span><span class="pln"> evt</span><span class="pun">.</span><span class="pln">target</span><span class="pun">.</span><span class="pln">files</span><span class="pun">;</span><span class="pln"> </span><span class="com">// FileList object</span><span class="pln">
</span><span class="com">// files is a FileList of File objects. List some properties.</span><span class="pln">
</span><span class="kwd">var</span><span class="pln"> output </span><span class="pun">=</span><span class="pln"> </span><span class="pun">[];</span><span class="pln">
</span><span class="kwd">for</span><span class="pln"> </span><span class="pun">(</span><span class="kwd">var</span><span class="pln"> i </span><span class="pun">=</span><span class="pln"> </span><span class="lit">0</span><span class="pun">,</span><span class="pln"> f</span><span class="pun">;</span><span class="pln"> f </span><span class="pun">=</span><span class="pln"> files</span><span class="pun">[</span><span class="pln">i</span><span class="pun">];</span><span class="pln"> i</span><span class="pun">++)</span><span class="pln"> </span><span class="pun">{</span><span class="pln">
output</span><span class="pun">.</span><span class="pln">push</span><span class="pun">(</span><span class="str">'<li><strong>'</span><span class="pun">,</span><span class="pln"> escape</span><span class="pun">(</span><span class="pln">f</span><span class="pun">.</span><span class="pln">name</span><span class="pun">),</span><span class="pln"> </span><span class="str">'</strong> ('</span><span class="pun">,</span><span class="pln"> f</span><span class="pun">.</span><span class="pln">type </span><span class="pun">||</span><span class="pln"> </span><span class="str">'n/a'</span><span class="pun">,</span><span class="pln"> </span><span class="str">') - '</span><span class="pun">,</span><span class="pln">
f</span><span class="pun">.</span><span class="pln">size</span><span class="pun">,</span><span class="pln"> </span><span class="str">' bytes, last modified: '</span><span class="pun">,</span><span class="pln">
f</span><span class="pun">.</span><span class="pln">lastModifiedDate </span><span class="pun">?</span><span class="pln"> f</span><span class="pun">.</span><span class="pln">lastModifiedDate</span><span class="pun">.</span><span class="pln">toLocaleDateString</span><span class="pun">()</span><span class="pln"> </span><span class="pun">:</span><span class="pln"> </span><span class="str">'n/a'</span><span class="pun">,</span><span class="pln">
</span><span class="str">'</li>'</span><span class="pun">);</span><span class="pln">
</span><span class="pun">}</span><span class="pln">
document</span><span class="pun">.</span><span class="pln">getElementById</span><span class="pun">(</span><span class="str">'list'</span><span class="pun">).</span><span class="pln">innerHTML </span><span class="pun">=</span><span class="pln"> </span><span class="str">'<ul>'</span><span class="pln"> </span><span class="pun">+</span><span class="pln"> output</span><span class="pun">.</span><span class="pln">join</span><span class="pun">(</span><span class="str">''</span><span class="pun">)</span><span class="pln"> </span><span class="pun">+</span><span class="pln"> </span><span class="str">'</ul>'</span><span class="pun">;</span><span class="pln">
</span><span class="pun">}</span><span class="pln">
document</span><span class="pun">.</span><span class="pln">getElementById</span><span class="pun">(</span><span class="str">'files'</span><span class="pun">).</span><span class="pln">addEventListener</span><span class="pun">(</span><span class="str">'change'</span><span class="pun">,</span><span class="pln"> handleFileSelect</span><span class="pun">,</span><span class="pln"> </span><span class="kwd">false</span><span class="pun">);</span><span class="pln">
</span><span class="tag"></script></span></span></pre>
</div>
<div>
<br /></div>
<div>
Espero que os sea útil. Yo ya le he encontrado alguna funcionalidad como por ejemplo, validar un formulario antes de ser enviado y mostrar por pantalla el tamaño del formulario que se va a enviar para calcular el tiempo medio de espera.<br />
<br /></div>
<div>
<br /></div>Sergio Raposo Vargashttp://www.blogger.com/profile/00014687647130388430noreply@blogger.com56tag:blogger.com,1999:blog-4427943399524702752.post-21734848717681896312011-11-20T02:52:00.001-08:002011-11-21T00:46:54.070-08:00CSS3, el futuro. (Conclusiones de la conferencia mejorando.la)En el siguiente artículo me gustaría mostrar a las conclusiones a las que he llegado después de ver ayer mismo (19 de Noviembre de 2011) la conferencia de <b>Christian Van Der Henst</b> titulada: "<b>El camino a CSS4</b>".<br />
<br />
Esta claro que <b>HTML5 </b>ha dejado ya de ser el futuro para convertirse en el presente. Ya la gran mayoría de navegadores modernos soportan gran cantidad de los nuevos elementos del estándar lo que hace que su uso se ya posible hoy día. Pero HTML5 no es lo único que ha evolucionado, conjunto a él ha crecido <b>CSS3 </b>y la nueva generación de <b>JavaScript</b>.<br />
<br />
La nueva versión de CSS nos va a permitir que el diseño de páginas web cambie por completo, esta nueva versión nos va a permitir hacer cosas que antes eran impensables, podremos incluso dibujar con CSS, hacer que nuestras webs cobren vida, y otras muchas cosas. Esto hará que los diseñadores que quieran mantenerse al día tenga que evolucionar, tenga que cambiar el concepto de hacer diseños web como si fueran artistas y pasar a hacer web como si fueran programadores haciendo uso de las nuevas herramientas que nos ofrece CSS3. Lo que está claro que la tecnología avanza y que todo el que se dedique al desarrollo web , ya sean programadores o diseñadores tendrán que ir de la mano de la evolución para no quedarse estancado en el pasado.<br />
<br />
El gran rival la evolución en los estándares son los navegadores antiguos, estilo IE6. Nosotros los desarrolladores web debemos luchar por la desaparición de esta "lacra de la evolución". Es significativo que hasta <a href="http://www.ie6countdown.com/">microsof mediante un comunicado oficial</a> desaconsejara el uso de dicha versión de su navegador, y como la gente sigue usándolo. Menos mal que las últimas estadísticas hablan de un descenso en el uso de este tipo de navegadores y por lo tanto, menor número de usuarios que lo usan.<br />
<br />
Es importante recordar que todos los navegadores modernos (opera, firefox, chrome, internet explorer, safari) ya dan un amplio soporte. Por lo tanto no debemos tenerle miedo a la actualización de nuestros desarrollos, abrazar estos nuevos estándares y empezar a dejar de mirar al pasado, y esas compatibilidades estúpidas que solo hacen aumentar los costes de desarrollos y que no compensa el retorno de la inversión que se obtiene con ello.<br />
<br />
Menos mal que siempre hay programadores dispuesto a resolver muchos de los problemas que nos encontramos debido a incompatibilidades. Por ello existen productos como:<br />
<br />
<ul>
<li><a href="http://www.modernizr.com/">Modernizr</a>: Libreria JS que nos permite conocer la compatibilidad del navegador con tecnologías HTML5 y CSS3 permitiéndonos hacer sitios web que se adapten a todos nuestros usuarios.</li>
<li><a href="http://selectivizr.com/">Selectivizr</a>: Librería JS que nos simula el comportamiento de CSS en los navegadores IE6-IE8.</li>
</ul>
<br />
<br />
<b><u>Recursos CSS3 interesantes:</u></b><br />
<br />
<ul>
<li><a href="http://www.zurb.com/article/266/super-awesome-buttons-with-css3-and-rgba">zurb.com</a>: Página donde generar botones interesantes con CSS3.</li>
<li><a href="http://ecsspert.com/">ecsspert.com</a>: Herramienta para dibujar directamente en CSS3</li>
<li>Adobe CSS Shaders: Permite aplicar efectos cinematográficos solo con CSS3.</li>
<li>CSS3 secrets: Demostración sobre las principales mejoras de CSS3</li>
<li><a href="http://hakim.se/">hakim.se</a>: Sitio web con demostraciones de HTML5 y canvas en el que podemos ver el potencial de este nuevo elemento.</li>
<li><a href="http://raphaeljs.com/">raphaeljs.com</a>: Libreria JS que nos simplifica el trabajo de desarrollar gráficos vectoriales en la web.</li>
<li><a href="http://impactjs.com/">impact.js</a>: Libreria JS que nos ayuda en el desarrollo de juegos en HTML5.</li>
<li><a href="http://css3generator.com/">CSS3Generator</a>: Herramienta que nos permite generar código CSS3 de una manera fácil y rápida.</li>
<li>Original Hover efects: Efectos originales basados en CSS3</li>
<li><a href="http://jquerymobile.com/">jquerymobile.com</a>: Libreria JQUERY para el desarrollo de páginas web para móviles con la posibilidad de crear nuestros propios <a href="http://jquerymobile.com/themeroller/">temas a medida</a>.</li>
</ul>
<div>
<b><u>Prefijos CSS3</u></b></div>
<div>
<br /></div>
<div>
Uno de los grandes inconvenientes de CSS3 es la necesidad de usar preficos para que los estilos sean comprendidos por los distintos motores de los navegadores. Esto nos obliga a duplicar la creación de estilos y a tener que ser muy cuidadosos a la hora de desarrollar con CSS3. Pero como siempre, hay recursos para facilitarnos el trabajo de desarrollo, como por ejemplo: <a href="http://cssprefixer.appspot.com/">CSS Prefixer</a> o <a href="http://leaverou.github.com/prefixfree/">Prefix-Free</a>, que nos permiten pasar nuestro CSS con los estilos propios de CSS3 y ellos se encargan automáticamente de generar los mismos estilos con todos los prefijos necesarios.</div>
<div>
<br /></div>
<div>
<b><u>Frameworks CSS3</u></b></div>
<div>
<br /></div>
<div>
En cualquier lenguaje de programación no suelen tardar mucho las herramientas que nos hacen que desarrollar en él sea una tarea mucho más simple. Para ello aparecen los frameworks de desarrollo. En CSS3 también existen frameworks que nos permiten que la tarea de desarrollar sea mucho más simple. Entre los entornos de desarrollo más importantes están:</div>
<div>
<ul>
<li><a href="http://lesscss.org/">lesscss.org</a></li>
<li><a href="http://sass-lang.com/">sass-lang.com</a></li>
</ul>
<div>
También disponemos de otras herramientas que nos facilitan la creación de nuestros layouts:</div>
</div>
<div>
<ul>
<li><a href="http://blueprintcss.org/">blueprint</a></li>
<li><a href="http://960.gs/">960</a></li>
</ul>
<div>
<b><u>CSS4</u></b></div>
</div>
<div>
<br /></div>
<div>
Por último, y para concluir la charla, Christian comentó cual es el futuro del CSS, y no es más que la próxima versión: CSS4.</div>
<div>
Ya se está empezando a hablar de cuales son las nuevas características que nos ofrecerá la W3C con esta versión. Entre algunas de las que se comentaron están:</div>
<div>
<ul>
<li>Nueva api para Vibración destinada a realizar webs para dispositivos móviles.</li>
<li>Nuevos selectores que nos permitirán elegir un elemento de nuestro DOM mucho más preciso.</li>
<li>Elemento Matches.</li>
</ul>
<div>
Pero CSS4 hoy día no es una realidad, es el futuro, y por lo tanto, tendremos que estar muy atentos para que la tecnología no nos deje atrás.</div>
</div>
<div>
<br /></div>Sergio Raposo Vargashttp://www.blogger.com/profile/00014687647130388430noreply@blogger.com13tag:blogger.com,1999:blog-4427943399524702752.post-55256893346556075052011-08-10T05:04:00.000-07:002011-08-10T05:09:40.537-07:00div, section y articleQuizás, lo más repetido desde que comenzamos a trabajar con <b>HTML5 </b>es que esta nueva versión nos ofrece la posibilidad de <b>dotar de semántica a los contenidos de una web</b>. <br />
Para ello dos nuevos elementos han aparecido: <b>section y article</b>. Pero, ¿realmente conocemos como y cuando debemos usarlos? Y tenemos claro que lo diferencia del antiguo (y todavía válido) <b>div</b>.<br />
<div>Pues bien, voy a intentar explicar los posibles usos de cada uno y dar los suficientes ejemplos para que lleguéis a comprender mejor las diferencias entre estas etiquetas. </div><div><span class="Apple-style-span" style="font-size: large;"><b><u>div</u></b> </span></div><div>La etiqueta div sigue funcionando exactamente igual que lo hacía hasta el momento. Lo usaremos para definir bloques sin ningún tipo de significado, normalmente bloques que usaremos para maquetar correctamente la página o para agrupar elementos en principio sin querer dar un significado específico. Este etiqueta era la más usada en HTML 4 y nos servía tanto para representar un artículo como para la cabecera o el pie de la página usando tan solo el atributo id para diferenciarlos sin dar significado ninguno a los contenidos.</div><div><span class="Apple-style-span" style="font-size: large;"><b><u>article </u></b></span></div><div>Esta etiqueta será usada para representar un contenido específico de nuestra web. Puede representar un artículo, ya sea un artículo de opinión, un entrada en un blog, un comentario en un foro, una noticia, una descarga, o simplemente un contenido estático de una web como el típico <i>quienes somo</i>s o <i>a qué nos dedicamos</i>. Para que entendáis mejor esta etiqueta, la usaremos para representar el contenido típico que se publica en una RSS. </div><div>Por lo tanto, este tipo de contenido tiene un alto valor semántico ya que aporta información relevante dentro de nuestro documento. Este elemento debería tener principalmente un título (un header con un h1-h6) y podría tener un footer (con la fecha de publicación, el autor o cualquier otra información adicional) y un cuerpo con el detalle. </div><div>Por ejemplo, en el caso de mostrar un listado de noticias, lo que estaremos listando será un listado de elementos article. </div><div><span class="Apple-style-span" style="font-size: large;"><b><u>section </u></b></span></div><div>La etiqueta section es quizás la más difícil de comprender. En principio se usa para representar un bloque de nuestra página que tiene valor semántico, es decir, que aporta un significado a la página. Realmente si tenemos que clasificar por la importancia del significado, el ranking sería: article sería la etiqueta que contiene la información más relevante, section la que contiene información menos relevante, y div que contiene información que no aporta significado ninguno. </div><div>Bien, vamos a intentar poner ejemplos de uso: </div><div><ul><li><b>Listado de noticias</b>: Antes hemos comentado que un listado de noticias será un listado de elementos article, pero, ¿cómo representamos este listado? Pues la mejor forma será con la etiqueta section. Este listado quedaría aproximadamente: </li>
</ul><span class="Apple-style-span" style="font-family: 'Courier New', Courier, monospace;"><section> <br />
<header><h1>Listado de noticias</h1></header> <br />
<article><header><h2>Noticia 1</h2></header></article> <br />
<article><header><h2>Noticia 2</h2></header></article> <br />
<article><header><h2>Noticia 3</h2></header></article> <br />
</section> </span><br />
<br />
<ul><li><b>Bloque principal de la página</b>: Imaginaros por ejemplo una portada que tiene una zona destacada en la que se muestra una introducción. Este bloque de contenido podría ser perfectamente un bloque section.</li>
<li><b>Separar elementos dentro de un artículo</b>: Cuando se trata de un artículo muy completo podríamos estructurar la información por secciones. Por ejemplo, un articulo separado en Introducción, Desarrollo y Conclusión estaría formado por 3 section, uno para cada bloque. Igualmente podríamos usarlo para agrupar una galería de imágenes asociada al contenido o incluso un listado de enlaces relacionados directamente con el artículo. </li>
</ul><span class="Apple-style-span" style="font-family: 'Courier New', Courier, monospace;"><article> <br />
<header><h1>Artículo</h1></header> <br />
<section><header><h2>Introducción</h2></header> …TEXTO … </section> <br />
<section><header><h2>Desarrollo</h2></header> …TEXTO … </section> <br />
<section><header><h2>Conclusiones</h2></header> …TEXTO … </section> <br />
<section><header><h2>Galería de imágenes</h2></header> …TEXTO … </section> <br />
</article> </span><br />
<br />
Un aspecto importante de la etiqueta section es que debe tener un título. Tal y como hemos comentado en otros artículos de este blog, la etiqueta section crea una sección de manera explícita en el outline del documento, por lo tanto debemos siempre asignarle un encabezado (h1-h6) ya que si no se le aplicará directamente <b>untitle</b>. </div><div>Por lo tanto, una buena forma de identificar cuando es necesario usar una etiqueta section es cuando tengamos la necesidad de aplicar un encabezado. </div><div><br />
</div><div>Si os dedicáis a investigar un poco por ahí veréis como hay opiniones para todos los gustos. Hay quien dice que el elemento section debería ser quien contiene al article, y otros dicen todo lo contrario, que article es quien debe contener a section. Lo cierto es que la documentación oficial no aclara mucho sobre el tema y lo deja abierto a posibles interpretaciones. Solo el tiempo dirá como lo acaba utilizando la gente, pero desde luego, yo creo que realmente ambos están en lo cierto. La etiqueta section abre un gran abanico de posibilidades y nos permite usarlo de muchas maneras, en algunos casos será el padre de article (como por ejemplo en el caso del listado de noticias) y en otros será el hijo de article (como en el caso del articulo fraccionado en bloques). Por lo tanto, pensad antes de usar una etiqueta u otra que tiene más sentido usar en base a la información que estamos representando. </div><div><br />
</div><div>Espero en un futuro aportar más ejemplos conforme se me vayan ocurriendo. Si queréis aportar vuestra experiencia no dudéis en comentar lo que queráis.</div>Sergio Raposo Vargashttp://www.blogger.com/profile/00014687647130388430noreply@blogger.com48tag:blogger.com,1999:blog-4427943399524702752.post-2903653907951889492011-08-05T05:41:00.000-07:002011-08-10T05:09:29.678-07:00Header y FooterBueno, va siendo hora de seguir repasando alguno de los nuevos elementos introducidos por HTML5.<br />
En este caso le toca el turno a las etiquetas <b>header </b>y<b> footer</b>.<br />
<br />
<b><u>Header</u></b><br />
<br />
La etiqueta header sirve para mostrar información de cabecera útil para un documento u otras <a href="http://html5pasoapaso.blogspot.com/2010/10/secciones-en-html5-el-algoritmo-de.html">secciones</a> principales. Típicamente se utiliza para agregar encabezados, es decir, h1-h6 que definen el título y subtítulos de la sección, aunque también se puede utilizar para dar información sobre fechas de publicación, versiones del contenido mostrado, o enlaces de navegación dentro del documento (por ejemplo, enlaces a la home, información de contacto, o al mapa web de una página). A pesar del nombre de la etiqueta, ésta no tiene porque ir situado al principio del HTML, sino que puede estar posicionado en cualquier posición dentro de nuestro documento.<br />
Ej:<br />
<span class="Apple-style-span" style="font-family: 'Courier New', Courier, monospace;"><header><br />
<h1>Blog: HTML5 Paso a paso</h1><br />
<p>Mi nombre es Sergio Raposo Vargas</p><br />
</header> </span><br />
<br />
<b><u>Footer</u></b><br />
<br />
La etiqueta footer representa el pie de un documento o sección. La información que se suele añadir en este bloque es el autor del documento, enlaces a contenido relacionado, información de copyright, avisos legales, etc.<br />
Igualmente podremos agregar al pie información de contacto. Recordar que para ello disponemos de otra etiqueta llamada address. Al igual que en la etiqueta anterior, a pesar de su nombre, este elemento no tiene porque ir al final del documento o sección aunque suele ser lo más normal.<br />
Ej:<br />
<span class="Apple-style-span" style="font-family: 'Courier New', Courier, monospace;"><footer>Este documento fue escrito en 2011.</footer></span>Sergio Raposo Vargashttp://www.blogger.com/profile/00014687647130388430noreply@blogger.com27Sevilla, España37.3790099 -6.000995337.3074854 -6.1232112999999995 37.4505344 -5.8787793tag:blogger.com,1999:blog-4427943399524702752.post-3813650273532234042011-03-27T05:08:00.000-07:002011-03-27T05:08:54.262-07:00Analizando una web. Parte IEn este post voy a intentar analizar una web construida en 3 columnas que existe actualmente y está programada en HTML4 y como se haría pensando en el nuevo estándar.<br />
El ejemplo que vamos a tomar como base es la web de una comunidad de la cual soy administrador: <a href="http://www.opencmshispano.com/">www.opencmshispano.com</a>. Para empezar con el análisis vamos a tomar como base la portada de la web.<br />
A continuación podéis ver como es actualmente:<br />
<div class="separator" style="clear: both; text-align: center;"><a href="http://www.opencmshispano.com/galerias/imagenes_uso_externo/portada_opencmshispano.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="640" src="http://www.opencmshispano.com/galerias/imagenes_uso_externo/portada_opencmshispano.png" width="568" /></a></div><div class="separator" style="clear: both; text-align: center;"><br />
</div><div class="separator" style="clear: both; text-align: left;">Lo primero que debemos pensar es buscar los distintos bloques a nivel semántico definidos por HTML5 en la web, para ello en la siguiente imagen he señalado los bloques de distintos colores . En rojo tenéis la cabecera y el pie, en naranja los bloques de navegación "nav" y en verde las distintas secciones "section".</div><div class="separator" style="clear: both; text-align: center;"><a href="http://www.opencmshispano.com/galerias/imagenes_uso_externo/portada_opencmshispano_secciones.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="640" src="http://www.opencmshispano.com/galerias/imagenes_uso_externo/portada_opencmshispano_secciones.png" width="568" /></a></div><div class="separator" style="clear: both; text-align: left;"><br />
</div><div class="separator" style="clear: both; text-align: left;">Como podéis ver, en esta pantalla principal del portal tenemos numerosas secciones, digamos que serían como las secciones principal del portal. Cada una de ellas tiene un significado y todas ellas podrían tener un título de encabezado. En ningún caso ninguna de ellas se encuentran relacionadas. Las secciones detectadas son:</div><div class="separator" style="clear: both; text-align: left;"></div><ul><li>Listado de noticias principal</li>
<li>Listado de articulos de Technology For Solutions</li>
<li>2 bloques de listado de banners</li>
<li>Un bloque de las últimas entradas en el blog</li>
<li>Un bloque de enlaces de interés relacionados con la comunidad.</li>
</ul><div>Igualmente podemos ver como hemos detectados 4 bloques de navegación:</div><div><ul><li>Menú principal situado en la columna de la izquierda.</li>
<li>Menú de acceso rápido a las herramientas adicionales a la web como son el foro, el blog y las FAQ</li>
<li>Menú de navegación a otras secciones de la web basadas en iconos, como son el link a la home, al mapa web, al formulario de contacto y las RSS</li>
<li>Enlaces en el pie a los textos legales que suelen acompañar a todas las web con las normas de uso y la política de privacidad.</li>
</ul><div>Por último, los dos bloques quizás más claros de todos, la cabecera y el pie, comunes en todas las páginas y donde introduciremos información relevante del portal como el nombre de la comundiad, la publicidad principal del portal o los agradecimientos situados en el pie.</div></div><div>Hasta el momento hemos comentado la división "semántica" del portal, pero evidentemente existe otro tipo de división, la visual. Como vemos la web está estructurada en 3 columnas, para ellos, y salvo que se me escape, tenemos que seguir usando los divs para la creación de este tipo de bloques visuales. Para ello tendremos un div general que englobará a toda la zona del centro, y un div por cada columna. Si fuera necesario añadir más div por temas de maquetación no tendremos problemas ya que este elemento lo podemos seguir usando como hasta ahora. Por lo tanto la división visual de la web sería:</div><div class="separator" style="clear: both; text-align: center;"><a href="http://www.opencmshispano.com/galerias/imagenes_uso_externo/portada_opencmshispano_div_columnas.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="640" src="http://www.opencmshispano.com/galerias/imagenes_uso_externo/portada_opencmshispano_div_columnas.png" width="568" /></a></div><div><br />
</div><br />
<div class="separator" style="clear: both; text-align: left;">Bueno hasta aquí hemos visto como se organiza de forma esquematizada una web siguiendo el nuevo estandar HTML5, para próximos post analizaremos con detalle cada uno de los sectores detectados y las páginas interiores como el detalle de una noticia, o el listado de artículos y tutoriales.</div><div class="separator" style="clear: both; text-align: left;">Espero vuestros comentarios al respecto, si creéis que mi interpretación y separación no es del todo correcta podemos comentarla para que entre todos lleguemos a sacar unas conclusiones definitivas.</div>Sergio Raposo Vargashttp://www.blogger.com/profile/00014687647130388430noreply@blogger.com6tag:blogger.com,1999:blog-4427943399524702752.post-51967476632174957872011-03-21T13:11:00.000-07:002011-08-10T05:09:16.867-07:00Para que nos sirve HTML5!!Que de tiempo sin escribir ...<br />
Bueno, espero recuperar la dinámica de actualizar este blog, es una iniciativa que la verdad que me gustaría mantener.<br />
Hoy quería escribir sobre una pregunta que se me ha ocurrido, y es: ¿Para que nos sirve <b>HTML5</b>?<br />
Supongo que cualquiera que haya visto algo del nuevo estándar de HTML podrá darme algunas respuestas. Sinceramente cuando empecé a leer información la ilusión era tremenda, parecía que HTML5 iba a dar un vuelco al concepto de web que tenemos hoy día. Conforme seguí avanzando me di cuenta que, efectivamente HTML5 era un gran cambio, pero quizás no era el cambio definitivo (quizás el que necesitábamos realmente).<br />
Aun así, y tras recuperar un poco del bajón sufrido, creo que <b>HTML5 </b>va a traer multitud de cosas buenas, y la principal de todas es la desaparición paulatina de los navegadores antiguos, principalmente de IE6. Nada más que por eso se merece un aplauso y un seguimiento incondicional.<br />
Pero nos va a ofrecer mucho más, la caída del flash, el fin de los div (para organizar la estructura de nuestras páginas), el fin de las cookies como las conocemos, más posibilidades multimedia, más semántica a nuestros contenidos, ....<br />
Poco a poco iré comentando aquellos elementos que me vayan llamando la atención, principalmente los nuevos elementos creados y los que han pasado a mejor vida.Sergio Raposo Vargashttp://www.blogger.com/profile/00014687647130388430noreply@blogger.com15tag:blogger.com,1999:blog-4427943399524702752.post-15247718406980347782010-11-14T05:05:00.000-08:002010-11-14T05:05:34.940-08:00Character Encoding en HTMLLa codificación en la web ha sido uno de los grandes problemas que todo programador web se habrá encontrado en algún punto de su carrera. Sobre todo cuando los contenidos de la web son gestionados por gestores de contenido la codificación todavía es más complicada, dependerá de la codificación con la que se guarda la información, y con la que se muestra posteriormente.<br />
En HTML existe 2 caminos de definir el encoding del documento:<br />
<br />
<ul><li>Configuración en la cabecera HTTP: <code>Content-Type: text/html; charset="utf-8".</code> Esta configuración se realiza a nivel del servidor, el principal problema de esta opción es que no todo el mundo tiene libertad para manipular esta configuración, imaginaros por ejemplo los blogs como el mío que está instalado en los servidores de blogger (google) donde no tenemos esta posibilidad.</li>
<li>Configuración con metatags: <code><meta http-equiv="Content-Type" content="text/html; charset=utf-8"></code>. Esta configuración va directamente en el document HTML de la página, el cual ya si es gestionado por nosotros mismos y tenemos la opción de modificar.</li>
</ul><div>Ambos caminos dan el mismo resultado y la finalidad es la misma, pero es muy importante usar uno u otro sistema, pero nunca dejar sin definir el character encoding de nuestros documentos html ya que sino puede traer bastantes problemas de seguridad.</div><div>Una buena práctica es definir por defecto un encoding en las cabecera HTTP, es decir, una codificación estándar en nuestros servidores web y en los casos que sea necesaria redefinirla usando el metatags. Siempre va a prevalecer el metatags por encima de la cabecera HTTP.</div><div>HTML5 no ha cambiado nada respecto a la configuración del encoding, y todo lo comentado hasta ahora es válido para la nueva versión del estándar. Lo único que se ha modificado ha sido la forma de especificarlo con el metatags, donde se ha comprimido y simplificada la linea, de forma que ahora tan solo debemos poner:</div><div><code><meta charset="utf-8" /></code></div><div>Para otro día comentaré otros problemas derivado del encoding más orientado a la gestión de los contenidos y la forma de presentar la información.</div><div><br />
</div><div><br />
</div><div><br />
</div>Sergio Raposo Vargashttp://www.blogger.com/profile/00014687647130388430noreply@blogger.com5tag:blogger.com,1999:blog-4427943399524702752.post-46923880053298397332010-11-04T11:37:00.000-07:002011-08-10T05:09:07.810-07:0054% de los videos en Internet están basados en HTML5.Esta soprendente estadística publicada por <a href="http://blog.mefeedia.com/html5-oct-2010">MEFEEDIA</a> nos dice que el <b>54% de los videos disponibles en internet actualmente son videos HTML5</b>. Esta cantidad es el doble de hace 5 meses, lo que nos hace ver la gran explosión que el nuevo estandar en lo que a video se refiere está teniendo.<br />
El gran motivo de esta explosión es la irrupción de la banda ancha en los móviles. Flash, el gran triunfador hasta el momento en lo que a video se refiere tenía un gran problema, la reproducción de videos en los pequeños dispositivos móviles. En este punto HTML5 entra con gran fuerza, la mayoría de los navegadores para móviles empiezan a dar soporte a esta nueva característica del estandar. Esto hace que se produzca esta gran explosión de videos HTML5 en internet en los últimos meses.<br />
<br />
La solución más extendida actualmente es la de ofrecer las dos alternativas, videos HTML5 para aquellos navegadores que lo soportan, y el antiguo formato de video FLASH para los navegadores que todavía no implementan esta característica.<br />
Sin lugar a duda este número hace que cada vez tenga más claro que <b>HTML5 </b>no es algo a tener en cuenta en el futuro, si no que es nuestro <b>PRESENTE</b>.Sergio Raposo Vargashttp://www.blogger.com/profile/00014687647130388430noreply@blogger.com1tag:blogger.com,1999:blog-4427943399524702752.post-66876948449142390292010-11-04T11:20:00.000-07:002011-08-10T05:08:56.041-07:00Adobe Edge vs Sencha AnimatorDesde hace tiempo se sabe que Adobe iba a entrar en la guerra de HTML5, sobre todo desde que no consiguo que su aplicación flash player entrara en los productos de Apple. Esta negativa de Apple hizo que Adobe cambiara su forma de actuar, en lugar de seguir con la batalla entre Flash y HTML5, ha entrado de lleno en la guerra por el mercado de HTML5. Para ello pretende competir con su nuevo producto: <b>Adobe Edge</b>. Este producto todavía no es descargable, pero por lo poco que podemos saber la principal característica es su gran parecido con Adobe Flash. Es una incognita todavía la calidad del producto que se puede generar con esta aplicación, y hasta que no tengamos en nuestras manos no lo sabremos.<br />
En la batalla de la generación de animaciones con HTML5 existe también otro producto llamado <b>Sencha Animator</b> el cual nos permite generar animaciones basadas en HTML5 y CSS3. A diferencia de Adobe Edge, este producto ya lo tenemos <a href="http://www.sencha.com/products/animator/">disponibles para ser descargado</a>. <br />
La ventaja de Sencha Animator es clara, será mejor o peor, pero ya podemos empezar a usarla. Efectivamente, CSS3 y HTML5 todavía no está tan extendido en los navegadores web, pero es cuestion de poco tiempo el tener un soporte casi total de ambos estándares y para entonces debemos estar preparados y disponer de nuestra animaciones de nueva generación.<br />
Se abre un nuevo horizonte y debemos intentar de no quedarnos atrás.Sergio Raposo Vargashttp://www.blogger.com/profile/00014687647130388430noreply@blogger.com1tag:blogger.com,1999:blog-4427943399524702752.post-57718614803959136142010-11-03T12:00:00.000-07:002011-08-10T05:08:45.508-07:00Internet Explorer 9 el rey de HTML5Curiosa la noticia que <a href="http://alt1040.com/2010/11/ie9-soporta-html5-mejor-que-nadie-es-oficial">he leido</a> en la que se comenta que en un informe oficial de la W3C en el que se han estudiado algunas de las principales características de HTML 5 en los distintos navegadores en desarrollo.<br />
El ranking que se ofrece en esta noticia es: <br />
<ol><li>Internet Explorer 9 Platform Preview 6</li>
<li>Google Chrome 7.0.517.41 beta</li>
<li>Firefox 4 Beta 6</li>
<li>Opera 10.60</li>
<li>Safari 5.0.7533.16</li>
</ol> Ufff, sinceramente, nunca pensé que esto pudiera ocurrir, viendo la historia a la que nos tiene acustumbrado Microsoft en el mundo de los navegadores, pensar que IE9 superara al resto era realmente imposible.<br />
La verdad que esto es una gran noticia, que Microsoft se tome en serio HTML5 puede hacer que este nuevo estandar sea una realidad mas pronto que tarde, de lo que nosotros, los desarrolladores web nos podremos aprovechar.<br />
Realmente sería todavía mejor noticia si forzara a todos los usuarios con IE6 a actualizarse, eso ya sería lo mejor que podría escuchar, pero me parece a mi que esto es bastante más complicado., por lo tanto, vamos a conformarnos con el soporte que Microsoft está ofreciendo y veremos como se comporta el mercado con el próximo lanzamiento de esta versión.Sergio Raposo Vargashttp://www.blogger.com/profile/00014687647130388430noreply@blogger.com3tag:blogger.com,1999:blog-4427943399524702752.post-21900209930866158552010-10-15T07:56:00.000-07:002011-08-10T05:08:31.253-07:00¿Qué es pronto para HTML5?Recientemente lei una noticia en la que se comentaba que un miembro de la W3C decia que es pronto para empezar a usar HTML5 para desarrollos "reales" de páginas web.<br />
<br />
Esta persona justifica este comentario por la falta de compatibilidad entre los distintos navegadores, y sobre todo en los más antiguos.<br />
<br />
Pues para nada estoy de acuerdo con esta corriente, y voy a intentar justificar mi posición:<br />
<ol><li>En mis primeros post comenté algunas de las formas para hacer compatible HTML5 con los navegadores antiguos que no implementan las nuevas características. Por lo tanto, tan solo hay que ser ordenados, saber utilizar las alternativas que hoy por hoy disponemos para que las funcionalidades que usemos tengan un equivalente que funcione en todos los navagadores. De hecho esto no es nuevo, cuando trabajamos con javascript siempre debemos intentar ofrecer alternativas para aquellos usuarios que no dispongan de javascript. Por lo tanto, donde está el problema??? la verdad que no lo veo por ningún lado. Un ejemplo claro es la reproducción de videos, siempre podemos usar el nuevo tag de video para la reproducción, si el navegador no tiene compatibilidad con el tag video, reproducimos el video tal cual se hacía hasta ahora, con un objeto flash y ya no tendremos problemas de incompatibilidad.</li>
<li>En el peor de los casos, encontramos una funcionalidad que no se ve en un navegador en concreto y no hay alternativa, pues en este caso una solución muy válida es poner un mensajito de: "actualice su navegador para poder ver esta página". ¿Qué malo hay en esta solución? Yo no lo veo, por ejemplo, hay software que se pierde la compatibilidad cuando actualizamos nuestro Sistemas Operativos, y simplemente nos vemos forzados a actualizarnos. Si no recuerdo mal, youtube desde hace tiempo ya pone este tipo de mensajes cuando lo abrimos con ie6.</li>
<li>El apoyo cada día es mayor, grandes compañias, google, yahoo, facebook, etc ... apoyan este nuevo estandar, y lo apoyan ahora mismo, por lo tanto, no creo que HTML5 sea el futuro, sino ya es presente, por lo que pensar que tenemos que esperar de 2 a 3 años para empezar a usarlo en proyectos reales me parece un gran error.</li>
</ol>Es más, yo creo que este es el mejor momento para quitarnos una de las grandes lacras del desarrollo web, los navegadores antiguos, y en especial Internet Explorer 6. Quizás hayamos encontrado la excusa perfecta!!<br />
<br />
En resumen, no tengais miedo en comenzar a usar HTML5, ir por delante nunca fue un problema, al revés, siempre es beneficioso, si somos capaces de tomar ventaja tendremos mucho camino recorrido.Sergio Raposo Vargashttp://www.blogger.com/profile/00014687647130388430noreply@blogger.com2tag:blogger.com,1999:blog-4427943399524702752.post-71183710253772221942010-10-15T07:18:00.000-07:002011-08-10T05:10:55.272-07:00Elemento address en HTML5El elemento <b><address></b> lo tenemos disponible desde html3, y lo podemos utilizar para indicar información de contacto de un documento, tales como los nombres de los autores y los enlace a sus correspondientes páginas, e-mail de contacto, dirección postal de los mismos, número de teléfonos y así sucesivamente. Pero hay que tener claro que este elemento no lo debemos usar para todos los enlaces o correos de contacto, o dirección postal que introduzcamos en nuestra página, si no que debemos reservarlo tan solo para la información de contacto del documento<br />
<br />
En versiones anteriores este elemento afecta a todo el documento, es decir, que tan solo podemos indicar la información de contacto de un autor por página.<br />
<br />
El problema de esta estructura es que es posible que necesitemos en una misma página mostrar más de un articulo, por lo que necesitaremos mostrar información de más de un autor, lo que se hace imposible en versiones anteriores.<br />
<br />
En html5, tal y como hemos comentado en <a href="http://html5pasoapaso.blogspot.com/2010/10/secciones-en-html5-el-algoritmo-de.html">post anteriores</a>, podemos crear secciones explícitamente con los elementos <article>. Cada sección <article> podrá tener su elemento address particular, ofreciendo información de cada articulo por separado.<br />
<br />
Una ventaja más de las secciones de html5.<br />
<br />
Para cerrar este tema os muestro un ejemplo de uso de este elemento:<br />
<br />
<pre class="brush:html;"><span class="Apple-style-span" style="font-family: 'Times New Roman'; white-space: normal;"><pre><ADDRESS>
HTML5 PASO A PASO<BR>
Sergio Raposo Vargas<BR>
Sevilla, España<BR>
Tel: +34 954 XX XX XX
</ADDRESS></pre></span></pre>Sergio Raposo Vargashttp://www.blogger.com/profile/00014687647130388430noreply@blogger.com0tag:blogger.com,1999:blog-4427943399524702752.post-2939664991056742212010-10-07T11:57:00.000-07:002010-10-07T11:57:36.026-07:00Secciones en HTML5: El algoritmo de generación de esquemas (outline)<a href="http://html5pasoapaso.blogspot.com/2010/09/nueva-organizacion-de-secciones-en.html">Ver articulo anterior sobre secciones en html4</a><br />
<br />
<br />
<u><b>Definiendo secciones en HTML5</b></u><br />
<br />
En principio todos los contenidos que se encuentran comprendidos dentro de la etiqueta body forman parte de una sección. Existe la posibilidad de tener secciones anidadas, es decir, de formar una estructura de secciones en arbol. Las secciones se pueden declarar de una forma explicita o implicita. Más adelante veremos que diferencias hay entre unas y otras.<br />
Las secciones explicitas se definen utilizando los elementos de html: body, section, article, aside, footer, header y nav.<br />
Ejemplo<br />
<br />
<pre class="brush:html;"><section>
<h1>HTML5 Paso a paso</h1>
<section>
<h2>Introducción</h2>
<p>En este capitulo haremos una introducción ....</p>
</section>
<section>
<h2>Configuración inicial</h2>
<p>La configuración inicial pasa por ...</p>
</section>
<aside>
<p>Manuales de HTML5 complementarios</p>
</aside>
</section>
<footer>
<p>(c) HTML5 paso a paso. Aviso legal ...
</footer></pre><br />
Este trozo de código html define dos secciones principales, la creada por el tag section y por footer:<br />
<pre><span class="Apple-style-span" style="color: red;"><section>
<h1>HTML5 Paso a paso</h1>
<section>
<h2>Introducción</h2>
<p>En este capitulo haremos una introducción ....</p>
</section>
<section>
<h2>Configuración inicial</h2>
<p>La configuración inicial pasa por ...</p>
</section>
<aside>
<p>Manuales de HTML5 complementarios</p>
</aside>
</section></span>
<span class="Apple-style-span" style="color: #38761d;"><footer>
<p>(c) HTML5 paso a paso. Aviso legal ...
</footer></span></pre><br />
<pre" style="margin-bottom: 0px; margin-left: 0px; margin-right: 0px; margin-top: 0px;"> y la primera sección tiene 3 subsecciones:
</pre"><pre><span class="Apple-style-span" style="color: grey;"><span class="Apple-style-span" style="color: black; font-family: 'Times New Roman'; white-space: normal;"><pre style="margin-bottom: 0px; margin-left: 0px; margin-right: 0px; margin-top: 0px;"><span class="Apple-style-span" style="color: #666666;"><section>
<h1>HTML5 Paso a paso</h1> </span>
<span class="Apple-style-span" style="color: red;"><section>
<h2>Introducción</h2>
<p>En este capitulo haremos una introducción ....</p>
</section></span>
<span class="Apple-style-span" style="color: #38761d;"><section>
<h2>Configuración inicial</h2>
<p>La configuración inicial pasa por ...</p>
</section></span>
<span class="Apple-style-span" style="color: #0b5394;"><aside>
<p>Manuales de HTML5 complementarios</p>
</aside></span>
<span class="Apple-style-span" style="color: #666666;"></section>
<footer>
<p>(c) HTML5 paso a paso. Aviso legal ...
</footer></span></pre></span></span></pre><br />
Esto lleva a la siguiente estructura:<br />
<br />
<pre>1. Section
1.1 Section
1.2 Section
1.3 Section (aside)
2. Section (footer)<span id="Problems_Solved_by_HTML5">
</span></pre><u><b>Definiendo Encabezados en HTML 5</b></u><br />
Mientras que los elementes comentados anteriormente crean una sección, el esquema del documento html requiere también de un título. La regla que define el título de una sección es simple: <b>El primer elemento de encabezado (h1-h6) de la sección será el título de la sección. </b><br />
Los elementos de encabezado vienen definido por un rango, el cual lo asigna el número que precede a la letra 'h', de forma que h1 es el elemento más alto y h6 es el más bajo. El ranking es solo relativo a la sección donde se encuentra, y no servirá para definir el resumen del documento html. Será la estructura de secciones la que definan el esquema. Por ejemplo, el siguiente trozo de código:<br />
<pre class="brush:html;"><section>
<h1>HTML5 Paso a paso</h1>
<p>...descripción de la sección...</p>
<section>
<h2>Nuevos elementos HTML5</h2>
<p>...definición de la subsección...</p>
</section>
</section>
<section>
<h3>HTML 5 Avanzado</h3>
<p>In this section, we discuss the famous mongolian gerbils.
...this section continues...
</section></pre><br />
llevará a la siguiente estructrua:<br />
<br />
<pre>1. HTML5 Paso a paso
1.1 Nuevos elementos HTML5
2. HTML 5 Avanzado</pre><br />
Como se puede observar, el rango establecido por los encabezados (en el ejemplo h1 para la sección principal, h2 para la subsección y h3 para la segunda sección principal) no es relevante a la hora de crear la estructura del documento. Aun así, se recomienda por claridad y legibilidad que los encabezados utilizados vayan acorde con la sección, aunque esto no sea tenido en cuenta posteriormente.<br />
<br />
<u><b>Secciones implícitas</b></u><br />
Ya que es necesario mantener una compatibilidad con las versiones anteriores de HTML, también es posible crear secciones de una forma implícita tal y como se hacía en las versiones anteriores.<br />
Los elementos de encabezados (H1-H6) crean por si solas una nueva sección implicita en el esquema, siempre y cuando no sean el encabezado principal de una sección explícita. La forma en la que se posiciona la sección implicita en el esquema será definido por el ranking relativo al encabezado anterior.<br />
Vamos a explicar esto mejor, imaginaros el siguiente ejemplo:<br />
<pre class="brush:html;"><section>
<h1>html5 paso a paso</h1>
<p>...this section continues...</p>
<h3 class="implicit subsection">Introducción</h3>
<p>...contenido de la subsección...</p>
</section>
</pre><br />
generará un esquema tal que:<br />
<pre>1. html5 paso a paso
1.1 Introducción
</pre><br />
Sin embargo si el encabezado de la sección implicita es igual que el encabezado anterior, este cerrará la sección anterior (el cual debe haber sido una sección explícita) y creará una nueva sección implicita al mismo nivel:<br />
<pre class="brush:html;"><section>
<h1>HTML5: Introducción</h1>
<p>...introducción a html5 ...
<h1 class="implicit section">Nuevos elementos de html5</h1>
<p>...definición de los nuevos elementos de html5...
</section></pre><br />
Este código creará el siguiente esquema:<br />
<pre>1. HTML5: Introducción
2. Nuevos elementos de html5 <i>(definido implicitamente por el elemento h1, el cual cerró la sección anterior al mismo tiempo que generó la nueva)</i>
</pre><br />
Por otro lado, si el encabezado es de un rango más alto que el encabezado anterior, este cerrará la sección y creará una sección nueva del nivel superior:<br />
<pre class="brush:html;"><body>
<h1>Manual de html5</h1>
<h2>Nuevos Elementos</h2>
<p>...introducción a los nuevos elementos...
<section>
<h3>Elemento header</h3>
<p>...definición del elemento header...</p>
<h3>Elemento footer</h3>
<p>...definición del elemento footer...</p>
<h2>Funcionalidad Offline</h2>
<p>Reptiles are animals with cold blood.
...this subsection continues...
</section>
</body></pre>en este caso, el esquema creado será:<br />
<pre>1. Manual de html5
1.1 Nuevos Elementos
1.1.1 Elemento header
1.1.2 Elemento footer
1.2 Funcionalidad Offline
</pre><br />
<u><b>Sobreescribiendo secciones implicitas</b></u><br />
<br />
Algunas veces una sección puede necesitar tener varios encabezados. A continuación veremos algunos casos habituales que se nos pueden presentar:<br />
<br />
<ul><li>Una sección sobre un libro o película en la que es necesario tener un título y subtítulo.</li>
<pre class="brush:html;"><section>
<h1>El señor de los anillos</h1>
<h2>La comunidad del anillo</h2>
</section></pre>Este código generará la siguiente estructura:</ul><ul><pre>1. El señor de los anillos
1.1 La comunidad del anillo
</pre></ul><ul><li>Usar como encabezado de segundo nivel las palabras clave de un articulo, o sección</li>
<pre class="brush:html;"><section>
<h1>Nuevo blog sobre html5</h1>
<h2>HTML, HTML5, Secciones, Outline, Esquemas, Semántica</h2>
</section></pre>Este código generará la siguiente estructura:</ul><ul><pre><pre>1. Nuevo blog sobre html5
1.1 HTML, HTML5, Secciones, Outline, Esquemas, Semántica</pre><pre><span class="Apple-style-span" style="font-family: 'Times New Roman'; white-space: normal;"></span></pre></pre></ul>Debido a la generación de secciones implícitas que hemos comentado anteriormente, esto no es posible sin usar el elemento agrupador de encabezado introducido por HTML5 (<hgroup>). Este elemento esconde en el esquema del documento todos los encabezados excepto el primero, permitiendo así sobrescribir las secciones implícitas que se generan debido al segundo encabezado. El ejemplo anterior quedaría:<br />
<pre class="brush:html;"><section>
<hgroup>
<h1>Blog sobre HTML5</h1>
<h2>Nuevo blog creado por Sergio Raposo sobre html5</h2>
</hgroup>
</section>
</pre>Este produce el siguiente esquema:<br />
<br />
<pre>1. Blog sobre HTML5
</pre><br />
<br />
<u><b>Sección raíz</b></u> <br />
La sección raíz es aquella que tiene un esquema (outline) por sí solo, pero las secciones y encabezados dentro de este no influyen en el esquema de su padre. A parte del body, el cual es el elemento raíz por defecto del documento html, los siguientes elementos generan un esquema independiente al esquema principal del documento html: <blockquote>, <details>, <fieldset>, <figure> y <td>.<br />
Por ejemplo:<br />
<pre class="brush:html;"><section>
<h1>HTML5 paso a paso</h1>
<section>
<h2>Introducción</h2>
<p>...introducción a html5 ...</p>
</section>
<section>
<h2>Elementos de html5</h2>
<p>Según dice el libro especializado en html5:
<blockquote cite="Dive Into HTML5">
<h1>Nuevos elementos
<p>Los nuevos elementos de html5 son ...</p>
</blockquote>
</section>
</section>
</pre>generará el siguiente esquema:<br />
<br />
<pre>1. HTML5 paso a paso
1.1 Introducción
1.2 Elementos de html5
</pre><br />
Si os fijáis, este esquema no contiene la sección creada por el elemento <blockquote>, el cual, al ser una cita externa, generará una sección raíz y aislará su esquema del esquema principal generado por el body.<br />
<br />
<u><b>Secciones fuera del esquema</b></u><br />
<br />
<br />
HTML 5 introduce cuatro nuevos elementos que permiten definir las secciones que no pertenecen a las grandes líneas de un documento web:<br />
<br />
1. El <b>elemento <aside></b> define una sección que, aunque relacionado con el elemento principal, no forma parte del mismo directamente, como un cuadro de explicación o un anuncio. Tiene su propio esquema, pero no pertenece al principal.<br />
2. El código HTML de navegación (<b>elemento <nav></b>) define una sección que contiene enlaces de navegación. Puede haber varios de ellos en un mismo documento, por ejemplo, una página con enlaces internos, como una tabla de contenido, y otro con los enlaces de navegación del sitio web. Estos enlaces no forman parte del flujo principal ni del esquema y pueden que los lectores de pantalla o software de ayuda similares los ignore no renderizandolos, ya que no forman parte de la información que se está mostrando, simplemente muestra una lista de enlaces para navegar por nuestro sitio.<br />
3. La sección de cabecera (<b><header></b>) define un encabezado de página, por lo general contiene el logotipo y el nombre del sitio y, posiblemente, un menú horizontal. A pesar de su nombre, no es necesariamente colocarlo al principio de la página. Igualmente puede contener banners publicitarios en posición destacado, iconos de acceso directo como por ejemplo acceso a la página de mapa web o al formulario de contacto.<br />
4. El<b> elemento <footer></b> define un pie de página, por lo general contiene los derechos de autor y avisos legales del sitio y en ocasiones algunos links de interés. A pesar de su nombre, no es necesario colocarlo en la parte inferior de la página.<br />
<br />
<br />
<span class="Apple-style-span" style="color: #25221d; font-family: Verdana, Tahoma, sans-serif; font-size: 17px; line-height: 23px;"><span class="Apple-style-span" style="color: black; font-family: arial, sans-serif; font-size: 16px; line-height: normal;">Este articulo está basado en el artículo <a href="https://developer.mozilla.org/en/Sections_and_Outlines_of_an_HTML5_document">sections and outlines of an HTML5 document</a> del <a href="https://developer.mozilla.org/">Mozilla Developer Center</a>.</span></span><br />
<span class="Apple-style-span" style="color: #25221d; font-family: Verdana, Tahoma, sans-serif; font-size: 17px; line-height: 23px;"><span class="Apple-style-span" style="color: black; font-family: arial, sans-serif; font-size: 16px; line-height: normal;"><br />
</span></span><br />
<span class="Apple-style-span" style="color: #25221d; font-family: Verdana, Tahoma, sans-serif; font-size: 17px; line-height: 23px;"><span class="Apple-style-span" style="color: black; font-family: arial, sans-serif; font-size: 16px; line-height: normal;"><br />
</span></span><br />
<span class="Apple-style-span" style="font-family: arial, sans-serif;"><a href="http://html5pasoapaso.blogspot.com/2010/09/nueva-organizacion-de-secciones-en.html">Ir al primer articulo sobre secciones en html5</a></span>Sergio Raposo Vargashttp://www.blogger.com/profile/00014687647130388430noreply@blogger.com5tag:blogger.com,1999:blog-4427943399524702752.post-13846296327160720842010-09-27T08:43:00.000-07:002011-08-10T05:08:05.264-07:00Secciones en HTML5: Errores encontrados en html4Como ya he comentado en este blog varias veces, HTML 5 trae nuevos elementos que nos permiten dar formato a nuestras páginas web con un valor semántico. En este post voy a intentar describir como crear un documento con la estructura más idónea para nuestros contenidos.<br />
<br />
<b><u>¿Qué és el outline de un documento html?</u></b><br />
Para comprender bien este post es fundamental saber qué es el outline de un documento html. El outline es lo que se puede llamar el esquema o índice del documento. No es más que la lista de secciones que forma la página web.<br />
<br />
<b><u>Estructura de un documento HTML4</u></b><br />
La estructura de un documento, es decir, la estrutura semántica de lo que está entre las etiquetas <body> y </ body>, es fundamental para la presentación de la página al usuario. HTML4 utiliza el concepto de secciones y subsecciones de un documento para describir su estructura. Una sección está definida por una división de HTML (<div>) con elementos de encabezado (<h1>, <h2>, <h3>, <h4>, <h5> o <h6>) dentro de ella, que definen su título. Las relaciones del elemento div junto con un encabezado forman la estructura del documento y forman el outline del documento.<br />
Para ver un ejemplo de como se forma el outline de un documento html veamos el siguiente ejemplo:<br />
<pre class="brush:html;"><div class="section" id="forest-elephants">
<h1>
Forest elephants</h1>
In this section, we discuss the lesser known forest elephants.
...this section continues...
<div class="subsection" id="forest-habitat">
<h2>
Habitat</h2>
Forest elephants do not live in trees but among them.
...this subsection continues...
</div>
</div> </pre><br />
El resultado será:<br />
1. Forest elephants<br />
1.1 Habitat<br />
Un elemento <div> no implica la creación de una nueva sección. La mera presencia de un encabezado implicará la creación de una nueva sección.<br />
De esta forma, el siguiente ejemplo:<br />
<br />
<pre class="brush:html;"><H1>Forest elephants</H1>
<P>In this section, we discuss the lesser known forest elephants.
...this section continues...
<H2>Habitat</H2>
<P>Forest elephants do not live in trees but among them.
...this subsection continues...
<H2>Diet</H2>
<H1>Mongolian gerbils</H1>
</pre><br />
implica el siguiente esquema:<br />
1. Forest elephants<br />
1.1 Habitat<br />
1.2 Diet<br />
2. Mongolian gerbils<br />
<br />
<b><u>Problemas resueltos por HTML5</u></b><br />
La definición de un documento con HTML4 implica numerosos problemas, a continuación comentamos los problemas que HTML5 ha intentado resolver respecto a los que teníamos en HTML4<br />
<br />
<div><ol><li><span class="Apple-style-span" style="font-family: arial, sans-serif; font-size: 16px;"><span title="">El uso de <div> para definir secciones semántica, sin definir valores específicos para los atributos class, hace que automatizar un algoritmo para la generación del esquema sea algo imposible ("¿Es ese <div> parte del esquema de la página, define una sección o una subsección?" O </span></span><span class="Apple-style-span" style="font-family: arial, sans-serif; font-size: 16px;"><span title="">"Es sólo un <div> de presentación, sólo utilizado para dar estilo?").</span></span><span class="Apple-style-span" style="font-family: arial, sans-serif; font-size: 16px;"><span style="background-color: white;" title="">En otras palabras, la especificación HTML 4 es muy imprecisa a la hora de definir una nueva sección. </span></span><span class="Apple-style-span" style="font-family: arial, sans-serif; font-size: 16px;"><span style="background-color: white;" title="">La generación automática de esquemas es importante, especialmente para los software especializados en ayudar a personas discapacitadas, que puedan adaptar la forma en que presentan la información a los usuarios de acuerdo a la estructura del documento. </span></span><span class="Apple-style-span" style="font-family: arial, sans-serif; font-size: 16px;"><span title="">HTML5 elimina la necesidad de utilizar elementos <div> para esquematizar nuestras pátinas html, introduciendo un nuevo elemento, <section>, que es el responsable de quedar este tipo de secciones en los nuevos documentos HTML.</span></span></li>
<li><span class="Apple-style-span" style="font-family: arial, sans-serif; font-size: 16px;"><span title=""><span title="">La fusión de varios documentos es difícil: la inclusión de un sub-documento en un documento principal significa cambiar el nivel del elemento de encabezados para conseguir mantener el esquema correcto. </span><span style="background-color: white;" title="">Esto se soluciona en HTML5 con los nuevos elementos de seccionamiento (<article>, <section>, <nav> y <aside>), que son siempre subsecciones de la sección anterior más cercana, independientemente de que las secciones hayan sido creadas por encabezados internos.</span></span></span></li>
<li><span class="Apple-style-span" style="font-family: arial, sans-serif;">Porque cada elemento de encabezado es parte de un esquema, no es posible describir un subtitulo o título secundario (Ej: <h1>Título</h1><h2>Subtítulo</h2> creará el esquema: 1. Título 1.1 Subtítulo) de forma que que el subtítulo dependa directamente del título. HTML 5 introduce el elemento <hgroup> que esconde todos los elementos de encabezado dentro de él bajo una misma entrada del esquema formando tan solo una sección (<hgroup><h1>Título</h1><h2>Subtítulo</h2></hgroup> creará un esquema tal que: 1. Título).</span></li>
<li><span class="Apple-style-span" style="font-family: arial, sans-serif;"><span class="Apple-style-span" style="font-size: 16px;"><span style="background-color: white;" title="">En HTML 4, cada sección es parte del esquema del documento. </span><span title="">Pero hay documentos que a menudo no son lineales. </span><span title="">Un documento puede tener secciones especiales que contienen información que no es parte de él, a pesar de que está relacionado con el flujo principal, como un bloque de publicidad o una caja de explicación. </span><span title="">HTML 5 introduce el elemento <aside> permitiendo que dichos tramos no sean parte del esquema principal.</span></span></span></li>
<li><span class="Apple-style-span" style="font-family: arial, sans-serif;"><span class="Apple-style-span" style="font-size: 16px;"><span title=""><span title="">Una vez más, en HTML4, ya que cada sección es parte del esquema del documento, no hay manera de tener información de la sección que contenga información relacionada con todo el sitio completo y no con el documento actual, así como los logotipos, los menús, tabla de contenidos, o información de derechos de autor y avisos legales </span><span title="">. </span><span title="">A tal efecto, HTML 5 introduce tres elementos de secciones específicas: <nav> para las colecciones de enlaces, tales como una tabla de contenido o menús, <foot> y <header> para obtener información relacionada con el sitio.</span></span></span></span></li>
</ol></div><div><span class="Apple-style-span" style="color: #25221d; font-family: Verdana, Tahoma, sans-serif; font-size: large;"><span class="Apple-style-span" style="font-size: 17px; line-height: 23px;"><span class="Apple-style-span" style="color: black; font-family: arial, sans-serif; font-size: 16px; line-height: normal;">En términos más generales HTML5 aporta precisión a las características de seccionamiento y encabezado, lo que permite crear esquemas de documentos más predecibles y que pueden ser utilizados por el navegador más fácilmente para mejorar la experiencia del usuario.</span></span></span></div><div><span class="Apple-style-span" style="color: #25221d; font-family: Verdana, Tahoma, sans-serif; font-size: large;"><span class="Apple-style-span" style="font-size: 17px; line-height: 23px;"><span class="Apple-style-span" style="color: black; font-family: arial, sans-serif; font-size: 16px; line-height: normal;"><br />
</span></span></span></div><div><span class="Apple-style-span" style="color: #25221d; font-family: Verdana, Tahoma, sans-serif; font-size: large;"><span class="Apple-style-span" style="font-size: 17px; line-height: 23px;"><span class="Apple-style-span" style="color: black; font-family: arial, sans-serif; font-size: 16px; line-height: normal;">Este articulo está basado en el artículo <a href="https://developer.mozilla.org/en/Sections_and_Outlines_of_an_HTML5_document">sections and outlines of an HTML5 document</a> del <a href="https://developer.mozilla.org/">Mozilla Developer Center</a>.</span></span></span></div>Sergio Raposo Vargashttp://www.blogger.com/profile/00014687647130388430noreply@blogger.com1tag:blogger.com,1999:blog-4427943399524702752.post-53144939255047613472010-09-26T05:50:00.000-07:002011-08-10T05:11:34.487-07:00hgroup element: Un agrupador de encabezados (h1-h6)En este post vamos a tratar uno de los nuevos elementos de html5, el hgroup. Para empezar, siempre viene bien irse a la definición del estándar:<br />
<div><span class="Apple-style-span" style="font-family: Cambria, Georgia, 'Times New Roman', Times, serif; font-size: 14px; font-style: italic; line-height: 21px;"></span><br />
<div style="background-color: transparent; border-width: 0px; font-size: 14px; margin: 0px; outline-width: 0px; padding: 0px 15px 10px 30px; text-indent: -5px; vertical-align: baseline;"><span class="Apple-style-span" style="font-family: Cambria, Georgia, 'Times New Roman', Times, serif; font-size: 14px; font-style: italic; line-height: 21px;">The hgroup <mark class="searchword" style="background-color: #ffff99; border-width: 0px; color: black; font-size: 14px; font-style: italic; font-weight: bold; margin: 0px; outline-width: 0px; padding: 0px; vertical-align: baseline;">element</mark> is typically used to group a set of one or more h1-h6 <mark class="searchword" style="background-color: #ffff99; border-width: 0px; color: black; font-size: 14px; font-style: italic; font-weight: bold; margin: 0px; outline-width: 0px; padding: 0px; vertical-align: baseline;">element</mark>s — to group, for example, a section title and an accompanying subtitle.</span></div><br />
<br />
<footer style="background-color: transparent; border-width: 0px; clear: both; color: #999999; display: block; font-size: 14px; margin: 0px; outline-width: 0px; padding: 0px 3px; vertical-align: baseline;"><cite style="background-color: transparent; border-width: 0px; font-size: 14px; margin: 0px 0px 0px 30px; outline-width: 0px; padding: 0px; vertical-align: baseline;"><span class="Apple-style-span" style="font-family: Cambria, Georgia, 'Times New Roman', Times, serif; font-size: 14px; font-style: italic; line-height: 21px;"><a href="http://dev.w3.org/html5/markup/hgroup.html" style="background-image: none; color: #999999; font-size: 14px; margin: 0px; padding: 0px; text-decoration: underline; vertical-align: baseline;">W3C Specification</a></span></cite></footer><span class="Apple-style-span" style="font-family: Cambria, Georgia, 'Times New Roman', Times, serif; font-size: 14px; font-style: italic; line-height: 21px;"></span></div><div><br />
</div><div>Vale, pasemos a describir para que sirve este elemento. Como su definición indica, <b>sirve para agrupar un conjunto de uno o más elementos de encabezado (h1-h6</b>). Es decir, este nuevo elemento nos va a permitir agrupar en un mismo bloque un título y un subtitulo, o eslogan. <b>Dentro de un elemento hgroup tan solo podemos introducir etiquetas de encabezado tales como h1, h2 o h3</b>, de forma que no permite ningún otro tipo de tag en su interior.</div><div>Pero ..., porque es interesante este elemento: La respuesta está en la semantica que esta agrupación nos da. Es cierto que hasta ahora, nosotros podríamos usar sin problemas las etiquetas h1-h6, por ejemplo, a la hora de hacer una página en el que se muestra una noticia o articulo (diarios o blog por ejemplo) podríamos tener los siguientes encabezados:<br />
<ul><li>El título de nuestro sitio web</li>
<li>El slogan utilizado en la cabecera que describe nuestro sitio web</li>
<li>El título de la noticia</li>
<li>El subtitulo de la noticia</li>
<li>El título de una sección con información adicional en la columna de la derecha.</li>
</ul>En este momento, en versiones anteriores teníamos un problema, no eramos capaces de poder agrupar los encabezados, pero podríamos empezar a asignar encabezados de la siguiente forma: <br />
<ul><li>H1: El título de nuestro sitio web</li>
<li>H2: El slogan utilizado en la cabecera que describe nuestro sitio web</li>
<li>H3: El título de la noticia</li>
<li>H4: El subtitulo de la noticia</li>
<li>H5: El título de una sección con información adicional en la columna de la derecha.</li>
</ul> Realmente esta asignación de prioridades de encabezado no es del todo correcta, principalmente porque se establece una prioridad de elementos que no es cierta ya que, según este orden, el slogan de la página es más importante que el titular de la noticia mostrada, por lo tanto, una estructura más correcta podría ser:<br />
<ul><li>H1: El título de nuestro sitio web</li>
<li><div>: El slogan utilizado en la cabecera que describe nuestro sitio web</li>
<li>H2: El título de la noticia</li>
<li>H3: El subtitulo de la noticia</li>
<li>H3: El título de una sección con información adicional en la columna de la derecha.</li>
</ul>Que pasa en este momento, lo primero es que hemos cambiado el slogan, ya no es un elemento de encabezado, y el titular de la noticia ha pasado a ser el h2 de esta forma elevamos la importancia del titular de la noticia. En nuestro caso hemos cambiado también el titular de nuestra sección de la derecha pasando a ser h3 y estando al mismo nivel que el subtitulo. Otra alternativa sería directamente quitar el título de la sección de la derecha de los encabezados, pasando a ser un elemento más de la web. <br />
<br />
Podemos seguír buscando posibles estructuras de nuestros encabezados, pero habrá una cosa que nunca llegaremos a conseguir, el relacionar los encabezados entre ellos, es decir, un sistema externo como un rastreador no será capaz de establecer asociaciones entre estos elementos, por lo que nunca sabrá que el slogan va asociado el título de nuestro sitio web, o que el subtitulo de la noticia va ligado con el titular.<br />
Para estos casos usaremos hgroups, pudiendo agrupar bloques nuestros encabezados:<br />
<div style="font-family: "Courier New",Courier,monospace;"><span style="font-size: x-small;"><header></span></div><div style="font-family: "Courier New",Courier,monospace;"><span style="font-size: x-small;"> <hgroup><h1>Título sitio web</h1><h2>Slogan</h2></hgroup> <br />
</span></div><span style="font-size: x-small;"><span style="font-family: 'Courier New', Courier, monospace;"></header></span></span><br />
<div style="font-family: "Courier New",Courier,monospace;"><br />
</div><div style="font-family: "Courier New",Courier,monospace;"><span style="font-size: x-small;"><header></span></div><div style="font-family: "Courier New",Courier,monospace;"><span style="font-size: x-small;"> <hgroup><h1>Titular de la noticia</h1><h2>Subtitulo de la noticia</h2></hgroup> </span></div><span style="font-size: x-small;"><span style="font-family: 'Courier New', Courier, monospace;"></header></span></span><br />
<br />
<div style="font-family: "Courier New",Courier,monospace;"><span style="font-size: x-small;"><header></span></div><div style="font-family: "Courier New",Courier,monospace;"><span style="font-size: x-small;"> <hgroup><h1>Titular sección secundaria</h1></hgroup> <br />
</span></div><span style="font-size: x-small;"><span style="font-family: 'Courier New', Courier, monospace;"></header></span></span><br />
<br />
En este caso si estamos ofreciendo información adicional, no solo que elemento es el titular principal y cual secundario, sino que además estamos diciendo que están estrechamente relacionados.<br />
En el ejemplo he usado el elemento header del cual no he comentado nada, pero esto lo dejaremos para otro post en el que explique mejor como usar dicho elemento.<br />
<br />
<br />
<br />
<br />
<br />
</div><div><br />
</div>Sergio Raposo Vargashttp://www.blogger.com/profile/00014687647130388430noreply@blogger.com4tag:blogger.com,1999:blog-4427943399524702752.post-43413409605441797992010-09-20T03:25:00.000-07:002011-08-10T05:07:32.667-07:00Introducción al objeto CANVAS de HTML5Aprovechando el blog de mi compañero Sergio, me gustaria contaros mi experiencia con el objeto CANVAS de html5.<br />
<br />
<b>¿Que es canvas?</b><br />
<br />
Para que os hagais una idea de que es CANVAS es lo mas parecido a tener un trozo de papel en blanco encima de la mesa para poder dibujar, pintar, escribir y borrar lo que nos de la gana de forma no estructurada.<br />
<br />
<b>¿Por qué nace el objeto canvas?</b><br />
<br />
Hasta ahora cuando un programador queria mostrar alguna animación en la pantalla una de las posibilidades que tenia era usar el plugin flash o cualquier otro plugin del estilo. Si queria crear una grafica estadistica podia llamar a alguna libreria de php que le creara la imagen en el servidor.<br />
En cualquier caso siempre se dependia de algo externo al navegador. Asi pues era necesario que el propio navegador pudiese hacer este tipo de cosas, la solucion: CANVAS.<br />
<br />
Basta de tanto rollos queremos verlo.<br />
<br />
Para ver algo necesitamos poner un objeto CANVAS en nuestro html y cogerlo en javascript por ejemplo:<br />
<code><br />
<html><br />
<head><br />
<script><br />
function cargado(){<br />
var objetoCanvas = document.getElementById("html5pasoapaso");<br />
if(objetoCanvas.getContext){<br />
var contextoCanvas = objetoCanvas.getContext('2d');<br />
contextoCanvas.font = "20px Times New Roman";<br />
contextoCanvas.textAlign="center";<br />
contextoCanvas.fillText("Hola Mundo. HTML5 paso a paso" ,300, 150);<br />
}<br />
}<br />
</script><br />
</head><br />
<body onLoad="cargado();"><br />
<canvas id="html5pasoapaso" width="600" height="300"><b>Este navegador no soporta canvas.</b></canvas><br />
</body><br />
</html><br />
</code><br />
Si vuestro navegador no soporta el objeto canvas aparecera lo que pongamos dentro de la etiqueta canvas (podemos aprovechar para enlazarlo a descargar otro navegador).<br />
<br />
Si lo soporta podremos ver el texto "Hola Mundo..."<br />
<br />
<b>¿Muy bien, que hemos hecho?</b><br />
<br />
Pues muy simple hemos creado un objeto canvas y hemos dibujado dentro de él un texto. Si os fijais hemos esperado a que este cargado el html, ya que si hubiesemos intentado dibujar antes da un error al no existir el objeto.<br />
<br />
<b>¿Solo sirve para dibujar textos?</b><br />
<br />
No, sirve para dibujar puntos, lineas, poligonos, circulos, curvas, textos, imagenes previamente cargadas, etc... y en un futuro (no muy lejano) poligonos en 3d con texturas.<br />
<br />
<b>¿Funciona en todos los navegadores?</b><br />
<br />
Casi, hasta el momento funciona en todas las versiones actuales menos IE8, aunque esta confirmado que funcionará en la version 9. Esta dentro de la especificación standard de HTML5 y por lo tanto no debemos preocuparnos porque todos los navegadores lo implementaran.<br />
<br />
<b>¿Que se puede hacer con esto?</b><br />
<br />
Practicamente todo lo que se podia hacer con flash y más, graficas, juegos, mapas y todo dinamico con javascript.<br />
<br />
<b>¿Por qué es mejor elegir canvas que cualquier otra opción?</b><br />
<br />
Porque el trabajo duro lo hace el cliente, dejando libre al servidor, canvas usa aceleraccion por hardware lo cual lo hace muy rapido. No necesita instalar nada en el navegador. Se maneja de forma sencilla con javascript. Y un sinfin de ventajas.<br />
<br />
Esto solo ha sido una introducción, en el proximo tutorial nos adentraremos más en el dibujo estatico con canvas.Israel Román Alvarezhttp://www.blogger.com/profile/13369204345278588432noreply@blogger.com1tag:blogger.com,1999:blog-4427943399524702752.post-21905297022041486632010-09-18T00:12:00.000-07:002010-09-20T04:31:44.961-07:00Nuevo colaborador para este blogEste blog amplia su lista de autores con la incorporación al mismo de Israel Román el cual va a compartir con nosotros su experiencia en HTML5, principalmente con el uso del elemento canvas.<br />
<div class="separator" style="clear: both; text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEitdQmAQE-6W3Ny0LYG87OZj5bwyDnqjkfno53MPlgR81YOxrHtKN4MAUnhDb6FF1U5hhyphenhyphenm509O71-QePOhVLPTubYN1lHK294kFKR7PqMszaMBHx_4cAaG7U9RdbI4LMPwnQvj382CzDLx/s1600/convenio_colaboracion.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEitdQmAQE-6W3Ny0LYG87OZj5bwyDnqjkfno53MPlgR81YOxrHtKN4MAUnhDb6FF1U5hhyphenhyphenm509O71-QePOhVLPTubYN1lHK294kFKR7PqMszaMBHx_4cAaG7U9RdbI4LMPwnQvj382CzDLx/s320/convenio_colaboracion.jpg" /></a></div><br />
Israel, "Isra para los amigos", ha sido compañero mio durante varios años y espero que pueda aportar mucha información a este blog para todos vosotros.<br />
Muy pronto tendremos un primer tutorial básico sobre canvas el cual irá ampliando con el tiempo.<br />
Aprovecho este post para invitar a todo aquel que tenga ganas de compartir sus conocimientos sobre HTML5 a unirse a este proyecto, para ello podéis contactar conmigo a través del correo: sergio.raposo (AT) opencmshispano.comSergio Raposo Vargashttp://www.blogger.com/profile/00014687647130388430noreply@blogger.com0tag:blogger.com,1999:blog-4427943399524702752.post-79450085533161472202010-09-17T01:57:00.000-07:002010-09-17T02:11:42.571-07:00Nuevo ranking de navegadores de Agosto de 2010: Buenas noticias!!En <a href="http://desarrolloweb.com/">desarrolloweb.com</a> se ha publicado un nuevo ranking de uso de navegadores de Agosto del 2010. De este nuevo ranking estaba claro que Internet Explorer sigue siendo el navegador de referencia, pero una cosa llama la atención, el tan "problemático" IE6 ha caído a la 3 posición, pasando de un 20% de uso a un 16,18%. Ahora es firefox 3.6 quien ocupa la 2 posición con un 16.80%. Poca diferencia, pero que al menos marca una tendencia a la baja de Internet Explorer 6.<br />
Esto es una buena noticia en lo que se refiere a la implantación de HTML5, ya que es en estos navegadores donde más problemas tendremos para hacer nuestros maquetas con html5 compatibles en todos los navegadores.<br />
Os dejo el<a href="http://www.desarrolloweb.com/de_interes/ranking-navegadores-agosto-2010-4029.html"> ranking completo</a>:<br />
<span class="Apple-style-span" style="font-family: verdana, arial, helvetica, sans-serif; font-size: 12px; line-height: 18px;"><span style="font-weight: bold;">Ranking de navegadores en Agosto 2010</span></span><span class="Apple-style-span" style="font-family: verdana, arial, helvetica, sans-serif; font-size: 12px; line-height: 18px;">:</span><span class="Apple-style-span" style="font-family: verdana, arial, helvetica, sans-serif; font-size: 12px; line-height: 18px;"><br />
</span><span class="Apple-style-span" style="font-family: verdana, arial, helvetica, sans-serif; font-size: 12px; line-height: 18px;"><br />
</span><span class="Apple-style-span" style="font-family: verdana, arial, helvetica, sans-serif; font-size: 12px; line-height: 18px;"> 1. Microsoft Internet Explorer: 60.40%</span><span class="Apple-style-span" style="font-family: verdana, arial, helvetica, sans-serif; font-size: 12px; line-height: 18px;"><br />
</span><span class="Apple-style-span" style="font-family: verdana, arial, helvetica, sans-serif; font-size: 12px; line-height: 18px;"> 2. Firefox: 22.93%</span><span class="Apple-style-span" style="font-family: verdana, arial, helvetica, sans-serif; font-size: 12px; line-height: 18px;"><br />
</span><span class="Apple-style-span" style="font-family: verdana, arial, helvetica, sans-serif; font-size: 12px; line-height: 18px;"> 3. Chrome: 7.52%</span><span class="Apple-style-span" style="font-family: verdana, arial, helvetica, sans-serif; font-size: 12px; line-height: 18px;"><br />
</span><span class="Apple-style-span" style="font-family: verdana, arial, helvetica, sans-serif; font-size: 12px; line-height: 18px;"> 4. Safari: 5.16%</span><span class="Apple-style-span" style="font-family: verdana, arial, helvetica, sans-serif; font-size: 12px; line-height: 18px;"><br />
</span><span class="Apple-style-span" style="font-family: verdana, arial, helvetica, sans-serif; font-size: 12px; line-height: 18px;"> 5. Opera: 2.37%</span><span class="Apple-style-span" style="font-family: verdana, arial, helvetica, sans-serif; font-size: 12px; line-height: 18px;"><br />
</span><span class="Apple-style-span" style="font-family: verdana, arial, helvetica, sans-serif; font-size: 12px; line-height: 18px;"><br />
</span><span class="Apple-style-span" style="font-family: verdana, arial, helvetica, sans-serif; font-size: 12px; line-height: 18px;"><span style="font-weight: bold;">Ranking de navegadores por versiones</span></span><span class="Apple-style-span" style="font-family: verdana, arial, helvetica, sans-serif; font-size: 12px; line-height: 18px;">:</span><span class="Apple-style-span" style="font-family: verdana, arial, helvetica, sans-serif; font-size: 12px; line-height: 18px;"><br />
</span><span class="Apple-style-span" style="font-family: verdana, arial, helvetica, sans-serif; font-size: 12px; line-height: 18px;"><br />
</span><span class="Apple-style-span" style="font-family: verdana, arial, helvetica, sans-serif; font-size: 12px; line-height: 18px;"> 1. Internet Explorer 8: 27.90%</span><span class="Apple-style-span" style="font-family: verdana, arial, helvetica, sans-serif; font-size: 12px; line-height: 18px;"><br />
</span><span class="Apple-style-span" style="font-family: verdana, arial, helvetica, sans-serif; font-size: 12px; line-height: 18px;"> 2. Firefox 3.6: 16.80% </span><span class="Apple-style-span" style="font-family: verdana, arial, helvetica, sans-serif; font-size: 12px; line-height: 18px;"><br />
</span><span class="Apple-style-span" style="font-family: verdana, arial, helvetica, sans-serif; font-size: 12px; line-height: 18px;"> 3. Internet Explorer 6: 16.18%</span><span class="Apple-style-span" style="font-family: verdana, arial, helvetica, sans-serif; font-size: 12px; line-height: 18px;"><br />
</span><span class="Apple-style-span" style="font-family: verdana, arial, helvetica, sans-serif; font-size: 12px; line-height: 18px;"> 4. Internet Explorer 7: 11.89%</span><span class="Apple-style-span" style="font-family: verdana, arial, helvetica, sans-serif; font-size: 12px; line-height: 18px;"><br />
</span><span class="Apple-style-span" style="font-family: verdana, arial, helvetica, sans-serif; font-size: 12px; line-height: 18px;"> 5. Chrome 5: 6.77%</span><span class="Apple-style-span" style="font-family: verdana, arial, helvetica, sans-serif; font-size: 12px; line-height: 18px;"><br />
</span><span class="Apple-style-span" style="font-family: verdana, arial, helvetica, sans-serif; font-size: 12px; line-height: 18px;"> 6. Internet Explorer 8.0 (C.M.): 3.54%</span><span class="Apple-style-span" style="font-family: verdana, arial, helvetica, sans-serif; font-size: 12px; line-height: 18px;"><br />
</span><span class="Apple-style-span" style="font-family: verdana, arial, helvetica, sans-serif; font-size: 12px; line-height: 18px;"> 7. Firefox 3.5: 3.41%</span><span class="Apple-style-span" style="font-family: verdana, arial, helvetica, sans-serif; font-size: 12px; line-height: 18px;"><br />
</span><span class="Apple-style-span" style="font-family: verdana, arial, helvetica, sans-serif; font-size: 12px; line-height: 18px;"> 8. Safari 5.0: 2.29%</span><span class="Apple-style-span" style="font-family: verdana, arial, helvetica, sans-serif; font-size: 12px; line-height: 18px;"><br />
</span><span class="Apple-style-span" style="font-family: verdana, arial, helvetica, sans-serif; font-size: 12px; line-height: 18px;"> 9. Firefox 3.0: 2.04%</span><span class="Apple-style-span" style="font-family: verdana, arial, helvetica, sans-serif; font-size: 12px; line-height: 18px;"><br />
</span><span class="Apple-style-span" style="font-family: verdana, arial, helvetica, sans-serif; font-size: 12px; line-height: 18px;"> 10. Opera 10.x: 1.99%</span>Sergio Raposo Vargashttp://www.blogger.com/profile/00014687647130388430noreply@blogger.com0tag:blogger.com,1999:blog-4427943399524702752.post-60415656666222851062010-09-13T10:49:00.000-07:002011-08-10T05:07:07.867-07:00Nueva semántica con HTML 5Una de las grandes innovaciones de HTML5 ha sido la de introducir semántica en nuestro código html de forma que de nuestra web se pueda extraer más información de la que ofrecemos mediante nuestros contenidos.<br />
<div>Vamos a centrarnos un poco en como trabajábamos hasta ahora, por ejemplo, a la hora de hacer un menú:</div><div><span class="Apple-style-span" style="font-family: 'Courier New', Courier, monospace;"><span class="Apple-style-span" style="font-size: small;"><div class="menu"></span></span></div><div><span class="Apple-style-span" style="font-family: 'Courier New', Courier, monospace;"><span class="Apple-style-span" style="font-size: small;"><ul></span></span><br />
<span class="Apple-style-span" style="font-family: 'Courier New', Courier, monospace;"><span class="Apple-style-span" style="font-size: small;"><li><a href="seccion1.html">ir a sección 1</li></span></span><br />
<span class="Apple-style-span" style="font-family: 'Courier New', Courier, monospace;"><span class="Apple-style-span" style="font-size: small;"><li><a href="seccion2.html">ir a sección 2</li></span></span><br />
<span class="Apple-style-span" style="font-family: 'Courier New', Courier, monospace;"><span class="Apple-style-span" style="font-size: small;"><li><a href="seccion3.html">ir a sección 3</li></span></span><br />
<span class="Apple-style-span" style="font-family: 'Courier New', Courier, monospace;"><span class="Apple-style-span" style="font-size: small;"><li><a href="seccion4.html">ir a sección 4</li></span></span><br />
<span class="Apple-style-span" style="font-family: 'Courier New', Courier, monospace;"><span class="Apple-style-span" style="font-size: small;"></ul></span></span></div><div><span class="Apple-style-span" style="font-family: 'Courier New', Courier, monospace;"><span class="Apple-style-span" style="font-size: small;"></div></span></span><br />
<span class="Apple-style-span" style="font-family: inherit;">Esto que vemos pinta una lista de enlaces, y será el menú principal de nuestra web. Hasta el momento con html4 no podíamos diferenciar entre estos enlaces que formaban el menú de nuestra web, con un enlace externo relacionado con, por ejemplo, una noticia de nuestro portal.</span><br />
<span class="Apple-style-span" style="font-family: inherit;"><b>La idea de html5 es darle semántica a nuestro código, es decir, dar significado al mismo.</b> Por ejemplo, ese trozo de código con html 5 podría ser algo parecido a:</span><br />
<br />
<span class="Apple-style-span" style="font-family: inherit;"></span><br />
<span class="Apple-style-span" style="font-family: inherit;"></span><br />
<div><div style="margin-bottom: 0px; margin-left: 0px; margin-right: 0px; margin-top: 0px;"><span class="Apple-style-span" style="font-family: inherit;"><span class="Apple-style-span" style="font-family: 'Courier New', Courier, monospace;"><span class="Apple-style-span" style="font-size: small;"><nav></span></span></span></div></div><div><div style="margin-bottom: 0px; margin-left: 0px; margin-right: 0px; margin-top: 0px;"><span class="Apple-style-span" style="font-family: inherit;"><span class="Apple-style-span" style="font-family: 'Courier New', Courier, monospace;"><span class="Apple-style-span" style="font-size: small;"><ul></span></span></span></div><div style="margin-bottom: 0px; margin-left: 0px; margin-right: 0px; margin-top: 0px;"><span class="Apple-style-span" style="font-family: inherit;"><span class="Apple-style-span" style="font-family: 'Courier New', Courier, monospace;"><span class="Apple-style-span" style="font-size: small;"><li><a href="seccion1.html">ir a sección 1</li></span></span></span></div><div style="margin-bottom: 0px; margin-left: 0px; margin-right: 0px; margin-top: 0px;"><span class="Apple-style-span" style="font-family: inherit;"><span class="Apple-style-span" style="font-family: 'Courier New', Courier, monospace;"><span class="Apple-style-span" style="font-size: small;"><li><a href="seccion2.html">ir a sección 2</li></span></span></span></div><div style="margin-bottom: 0px; margin-left: 0px; margin-right: 0px; margin-top: 0px;"><span class="Apple-style-span" style="font-family: inherit;"><span class="Apple-style-span" style="font-family: 'Courier New', Courier, monospace;"><span class="Apple-style-span" style="font-size: small;"><li><a href="seccion3.html">ir a sección 3</li></span></span></span></div><div style="margin-bottom: 0px; margin-left: 0px; margin-right: 0px; margin-top: 0px;"><span class="Apple-style-span" style="font-family: inherit;"><span class="Apple-style-span" style="font-family: 'Courier New', Courier, monospace;"><span class="Apple-style-span" style="font-size: small;"><li><a href="seccion4.html">ir a sección 4</li></span></span></span></div><div style="margin-bottom: 0px; margin-left: 0px; margin-right: 0px; margin-top: 0px;"><span class="Apple-style-span" style="font-family: inherit;"><span class="Apple-style-span" style="font-family: 'Courier New', Courier, monospace;"><span class="Apple-style-span" style="font-size: small;"></ul></span></span></span></div></div><div><div style="margin-bottom: 0px; margin-left: 0px; margin-right: 0px; margin-top: 0px;"><span class="Apple-style-span" style="font-family: inherit;"><span class="Apple-style-span" style="font-family: 'Courier New', Courier, monospace;"><span class="Apple-style-span" style="font-size: small;"></nav></span></span></span></div></div><span class="Apple-style-span" style="font-family: inherit;">De esta forma estamos diciendo, de una forma transparente a los visitantes de nuestro sitio web, que esa lista de enlaces es nuestro menú de navegación.</span><br />
<span class="Apple-style-span" style="font-family: inherit;">Ahora la pregunta es, realmente,<b> ¿para qué sirve todo esto?</b></span><br />
<span class="Apple-style-span" style="font-family: inherit;">Evidentemente, el darle significado a las cosas solo tiene sentido si luego hay alguien que es capaz de interpretar ese significado (sino sería como hablarle a los sordos por teléfono). En nuestro caso, los motivos pueden ser desde un mejor<b> posicionamiento SEO</b> (mientras más información le demos a los rastreadores más información podrán sacar de nuestros sitios), hasta una mejor interpretación de los lectores para ciegos u otros tipos de software similares.</span><br />
La nueva lista de elementos que tenemos en html5 es:<br />
<ul><li>section</li>
<li>nav</li>
<li>article</li>
<li>aside</li>
<li>hgroup</li>
<li>header</li>
<li>footer</li>
<li>time</li>
<li>mark</li>
</ul><div><div class="separator" style="clear: both; text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjVJmJbkaFnLzIudVau8nt4ewaBiA_6mbVsn8MwyZSrciS65GvqyzOeJlxDgE1eIqXMuemlDZAzPJW2d3mIKxkN1ivErm2ZtFJ5v6MBo2p1V8Tq20mlmi4aW3VggzRxiWkFuYC_ReyRQjg8/s1600/HTML5-estructura-sem%C3%A1ntica.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjVJmJbkaFnLzIudVau8nt4ewaBiA_6mbVsn8MwyZSrciS65GvqyzOeJlxDgE1eIqXMuemlDZAzPJW2d3mIKxkN1ivErm2ZtFJ5v6MBo2p1V8Tq20mlmi4aW3VggzRxiWkFuYC_ReyRQjg8/s320/HTML5-estructura-sem%C3%A1ntica.jpg" /></a></div><br />
No es motivo de este post describir estos elementos, para ello ya tendremos tiempo de verlos uno a uno, pero para el que tenga más interés recomiendo el libro "<a href="http://diveintohtml5.org/semantics.html#new-elements">Dive into html5</a>" o el articulo de <a href="http://theproc.es/2010/1/29/12236/manual-de-html5-en-espanol---1-de-3">Alejandro Castillo</a>.</div><div>Pero quizás la referencia más amplia que he encontrado de los nuevos elementos de html5 es <a href="http://simon.html5.org/html5-elements">este link</a>. Más que una lectura un lugar de referencia a la hora de maquetar nuestros contenidos con esta versión de html.<br />
Como siempre pasa, no todo el mundo está de acuerdo con el camino que los creadores de html5 han tenido para darle semántica a los elementos, para ver un poco más afondo esta polémica os aconsejo el articulo de <a href="http://www.alistapart.com/articles/semanticsinhtml5/">John Allsopp</a> o el comentario sobre el mismo de <a href="http://realidadaparte.es/archives/2009/07/16/semantica-en-html-5/">Julio Loayza en su blog Realidad Aparte</a>.</div><br />
</div>Sergio Raposo Vargashttp://www.blogger.com/profile/00014687647130388430noreply@blogger.com0tag:blogger.com,1999:blog-4427943399524702752.post-49131749686474836802010-09-10T09:01:00.000-07:002011-08-10T05:06:54.122-07:00Compatibilidad de html5 con navegadores antiguos<div class="separator" style="clear: both; text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiDIZddDoVg11lIfMnQtpTJPY09AG-eTGCl5W4ARudxg_rGHxpAnb9apM_ysgoaFe6mXqNUGOCyYnBXjpEMR0wqW4gleFUo6necxFrJMQuZph7ReQtGu-dn4JZZidlyd63TyY4x5VeOFfnm/s1600/Navegadores.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiDIZddDoVg11lIfMnQtpTJPY09AG-eTGCl5W4ARudxg_rGHxpAnb9apM_ysgoaFe6mXqNUGOCyYnBXjpEMR0wqW4gleFUo6necxFrJMQuZph7ReQtGu-dn4JZZidlyd63TyY4x5VeOFfnm/s320/Navegadores.jpg" /></a></div><br />
Una de las primeras preguntas que me hice a mi mismo cuando empecé a leer cosas de html5 es, vale, todo esta muy bien, y parece que todo es más fácil y más potente y tal y tal, pero ..., ¿qué pasa con los navegadores antiguos?<br />
El <a href="http://www.desarrolloweb.com/de_interes/ranking-navegadores-enero-2010-2957.html">último ranking de uso de navegadores </a>que vi por internet (de enero de 2010) ofrece la siguiente información:<br />
1. Microsoft Internet Explorer: 62.12%<br />
2. Firefox: 24.43%<br />
3. Chrome: 5.22%<br />
4. Safari: 4.53%<br />
5. Opera: 2.38%<br />
<div><br />
Mientras que por versiones:<br />
<br />
1. Internet Explorer 8: 22.37%<br />
2. Internet Explorer 6: 20.00%<br />
3 Firefox 3.5: 17.08%<br />
4. Internet Explorer 7: 14.53%<br />
5. Firefox 3.0: 5.24%<br />
6. Chrome 3: 3.85%<br />
7. Safari 4.0: 3,57%<br />
8. IE8 Compatibility Mode: 2.80%<br />
9. Opera 10: 1.65%<br />
10 Chrome 4.0 1.24<br />
11. Firefox 3.6 : 1.15<br />
12 Firefox 2.0: 0.78%<br />
<br />
Para los que no sabéis del tema, en Internet Explorer se espera que a partir de la versión 9 sea compatible con algunas funcionalidades nuevas de html5, en las anteriores no hay ningún tipo de compatibilidad. En lo que respecta a Chrome, Firefox, Safari y Opera, la cosa cambia, desde hace tiempo vienen dando soperte a algunas características de html5, y cada nueva versión la lista de funcionalidades soportadas aumenta. </div><div><br />
Pero que hacemos con esa mayoría de usuarios que todavía usan versiones antiguas de Internet Explorer (de verdad que me mata que IE6 esté en segundo lugar con un 20%!!!!!) o versiones antiguas del resto de navegadores (mucho menos como podéis ver).</div><div><br />
Pues era evidente que esta pregunta no solo me la he planteado yo, sino que desde el principio, los promotores de esta versión han ido pensando como hacerlo compatible.</div><div><br />
Para ello se ha creado un javascript llamado <a href="http://www.modernizr.com/">Modernizr </a>el cual nos ofrece una serie de funciones que detecta si el navegador es compatible con cada una de las nuevas funcionalidades de HTML 5.<br />
Esto me recuerda mucho a cuando teníamos los problemas para hacer accesible nuestros portales, la eterna lucha con el javascript y el ofrecer alternativas a aquellos navegadores que no tienen javascript.</div><div><br />
Pues eso, tenemos la opción de preguntar si la opción que queremos usar es compatible con el navegador cliente, si lo es, pues todo perfecto, en caso contrario mostramos una alternativa.</div><div>Por ejemplo, para saber si nuestro navegador interpreta los objetos canvas:</div><div><br />
<span class="Apple-style-span" style="font-family: 'Courier New', Courier, monospace;">if (Modernizr.canvas) {<br />
// pintamos el objeto canvas<br />
} else {<br />
// hacemos por ejemplo una llamada a un flash o imagen alternativa<br />
}</span><br />
<br />
Para el que quiera profundizar más en este tema recomiendo el capitulo 2 del libro “<a href="http://diveintohtml5.org/detect.html">Dive Into HTML 5</a>”.<br />
<br />
Existe otra buena herramienta llamada html5.js. Este javascript se utiliza para hacer compatibles las nuevas etiquetas de html5 como header, footer, canvas, video, ..., en las versiones anteriores a la 9 del navegador Internet Explorer.</div><div><br />
El script es el siguiente:</div><div><br />
<span class="Apple-style-span" style="font-family: 'Courier New', Courier, monospace;"><span class="Apple-style-span" style="font-size: small;"><!--[if lt IE 9]><br />
<script><br />
var e = ("abbr,article,aside,audio,canvas,datalist,details," +<br />
"figure,footer,header,hgroup,mark,menu,meter,nav,output," +<br />
"progress,section,time,video").split(',');<br />
for (var i = 0; i < e.length; i++) {<br />
document.createElement(e[i]);<br />
}<br />
</script><br />
<![endif]--></span></span></div><div><span class="Apple-style-span" style="font-family: 'Courier New', Courier, monospace;"><span class="Apple-style-span" style="font-size: small;"><br />
</span></span>Básicamente lo que hace es detectar si el navegador es un Internet Explorer anterior a la versión 9, y si es el caso crear los elementos propios de html5 en el objeto document (darlos de alta en el DOM de la página).<br />
Para entender este script hay que profundizar en como se comportan los navegadores ante elementos desconocidos. </div><div><br />
La mayoría de los navegadores (firefox, safari, opera, chrome), cuando se encuentran un elemento que desconocen, lo cargan en el DOM marcándolo como elemento desconocido. Esto nos permite que, aun siendo un elemento desconocido por el navegador, podremos darle estilo mediante CSS sin problemas ya que es un elemento activo del DOM, y por tanto podremos trabajar con él sin problemas.</div><div><br />
En los IE el criterio es distinto, en este caso cuando se encuentra un elemento desconocido pues lo ignora, y ni siquiera lo mete en el DOM. El problema en este caso es que, al ser ignorado, no podremos darle estilos ni poder operar con él.</div><div><br />
En este último caso, el script toma un papel fundamental, lo que hace es crear a mano los elementos html5 en el DOM. En este momento, cuando IE se encuentra uno de esos elementos ya no lo considera como un elemento desconocido y lo introduce en el DOM. Esto hace que el comportamiento sea el mismo que en el resto de navegadores. Tener en cuenta que, para que todo esto funcione, el script debe iniciarse en el head de nuestra página, nunca en el footer ya que en este caso ya sería demasiado tarde.</div><div><br />
Nuevamente, recomiendo para aquellos que quieran saber más del tema la lectura del libro <a href="http://diveintohtml5.org/semantics.html#unknown-elements">“Dive Into HTML 5” (Capitulo 3)</a>.<br />
<br />
Cuando descubra nuevas técnicas de compatibilidad entre html5 y navegadores antiguos os la seguiré contando.</div>Sergio Raposo Vargashttp://www.blogger.com/profile/00014687647130388430noreply@blogger.com3tag:blogger.com,1999:blog-4427943399524702752.post-23907096328779919762010-09-01T08:11:00.000-07:002011-08-10T05:06:37.919-07:00HTML 5 - Mis inicios<div class="separator" style="clear: both; text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgqyxYTT1hYwVWTMOhC8W80sAW0vwpAQ1IJIBHM19wFO1Cz771xiPjLpuzYI0rDyXlWIgzYmFieiptAjntQBhidP98JPKCuvaoCZuQ-PRizU1_YYL8i1Ra4p7Qmq8PyuiaGOxFlgm6Wjqhz/s1600/Html5-Logo.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgqyxYTT1hYwVWTMOhC8W80sAW0vwpAQ1IJIBHM19wFO1Cz771xiPjLpuzYI0rDyXlWIgzYmFieiptAjntQBhidP98JPKCuvaoCZuQ-PRizU1_YYL8i1Ra4p7Qmq8PyuiaGOxFlgm6Wjqhz/s320/Html5-Logo.jpg" /></a></div><br />
Recientemente he empezado a investigar sobre lo que parece será el futuro del desarrollo web, HTML 5, una nueva versión de este lenguaje de marcado que, si es cierto lo que se dice de él, nos va a simplificar mucho la maquetación web junto con CSS3.<br />
<div><br />
</div><div>Pero vayamos poco a poco. Antes de empezar quiero dejar claro una cosa, yo no me considero un experto en maquetación (de hecho no es mi especialidad), y por supuesto en lo que respecta a html5 parto de cero, es decir, estos son mis primeros pasos y mi intención es compartir con todos vosotros mi experiencia durante esta fase de aprendizaje.<br />
<br />
Para empezar, lo de siempre, consultas a nuestro buscador favorito, y a buscar el tiempo para leer todo lo que encontramos. Os dejo unos cuantos links interesantes:<br />
<br />
<a href="http://html5demos.com/">http://html5demos.com/</a><br />
<a href="http://www.htmlcinco.com/">http://www.htmlcinco.com/</a><br />
<a href="http://www.anexom.es/tecnologia/diseno-web/las-novedades-de-html5-i/">http://www.anexom.es/tecnologia/diseno-web/las-novedades-de-html5-i/</a><br />
<a href="http://www.desarrolloweb.com/articulos/que-es-html5.html">http://www.desarrolloweb.com/articulos/que-es-html5.html</a><br />
<br />
y muchos más .... No olviden seguir buscando en internet más información (y si encuentran algún enlace que merezca la pena me lo pasáis y lo publicamos todos juntos).<br />
<br />
Pero, sinceramente, la mejor lectura que he encontrado y la que me tiene totalmente enganchado es el libro “<a href="http://diveintohtml5.org/">Dive Into HTML 5</a>”. Un libro bajo mi punto de vista muy bueno (ojo, todavía estoy empezandolo, es una impresión inicial) y gratuito (lo que también ayuda bastante).<br />
<br />
Mi intención con este blog es comentar todo lo que me parezca interesante sobre html5 durante mi lectura de este libro u otra información que me encuentre.<br />
<br />
Espero que esta información le sea útil a mucha gente, y no olviden que seguramente como vosotros, estoy en proceso de aprendizaje, por lo que espero me disculpen si encuentran algún error grave.<br />
<br />
Lo primero que quiero compartir, que me llamó mucho la atención cuando lo leí, es que HTML 5 realmente no es una gran cosa, es decir, no es nada más que un conjunto de nuevas funcionalidades que vienen a completar lo que actuamente tenemos. Y muy importante, es una extensión de HTML 4 y totalmente compatible con esa versión, es decir, todos nuestros desarrollos basados en versiones anteriores no se van a ver afectados. Ya podemos ir respirando tranquilos, para los que lo deseen pueden seguir trabajando tal cual se ha estado haciendo hasta el momento sin problemas.<br />
<br />
Pronto empezaremos a descubrir que encierra HTML 5.</div>Sergio Raposo Vargashttp://www.blogger.com/profile/00014687647130388430noreply@blogger.com0