HTML5 y Blogger

Hace algún tiempo las "Plantillas de diseño" de Blogger fueron actualizadas para incluir html5 en su código, lo usan moderadamente, pero lo usan. Y si hablamos de las más nuevas, las de "Vistas Dinámicas", también están hechas en html5 y, aunque aún no son editables, algún día lo serán y hay que estar preparados.

En una entrada anterior explicaba las nuevas etiquetas del html5, sus funciones y cómo implementarlas. Es algo muy básico, solo explica las etiquetas más relevantes con definiciones que parecen sacadas del diccionario. Pero mientras la escribía me surgieron unas preguntas:

¿Qué tanto soporta Blogger el html5? ¿Cómo puedo implementarlo en mi blog? ¿Qué limitaciones hay?

Con motivo de responder estas preguntas, decidí crear una plantilla usando html5. Porque para aprender, nada mejor que la experiencia propia.

Primero, el soporte del html5 está en el navegador no en la plataforma que utilices para crear tu blog (Blogger en este caso). Por lo tanto, puedes usar todo el html5 que quieras en la plantilla de tu blog (con las limitaciones de Blogger) y se verá bien desde cualquier navegador con soporte para html5.

Así que partí desde mi plantilla base, modificando el Doctype.

De esto:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

Paso a ser esto:

<!DOCTYPE html>

Luego quise implementar las nuevas etiquetas en la estructura del documento. Todo parecía estar muy bien, hasta que me di cuenta que había un problema con la etiqueta <section>.

La idea era utilizar esta etiqueta para los contenedores Outer, Content y Main. Pero, tal parece que en la parte de "Diseño" de Blogger esta etiqueta <section> no es reconocida y por lo tanto no se muestra su contenido, impidiendo editar los gadgets. Pero aun así, el blog seguirá mostrándose de manera normal para el público.

No hubo problemas con otras etiquetas como <header>, <article>, <aside> y <footer>. Debido a que el problema con la etiqueta <section> es únicamente en la parte de "Diseño" de Blogger, pude usarla sin ningún problema en otros contenedores que no se muestran en esa parte.

Veamos un poco el código. Lo que hice fue reemplazar las etiquetas <div> en los contenedores header-wrapper, sidebar-wrapper y footer-wrapper por <header>, <aside> y <footer> respetivamente. Sin expandir artilugios, la plantilla se ve algo así:

<!-- Wrapper -->
<div id='outer-wrapper'>

    <!-- skip links for text browsers -->
<span id='skiplinks' style='display:none;'>
<a href='#main'>skip to main </a> |
<a href='#sidebar'>skip to sidebar</a>
</span>

<header id='header-wrapper'><!-- Header -->
<b:section class='header' id='header' maxwidgets='1' showaddelement='no'>
<b:widget id='Header1' locked='true' title='HTML5 en Blogger (cabecera)' type='Header'/>
</b:section>
</header><!-- /Header -->

<!-- Content wrapper -->
<div id='content-wrapper'>

<!-- Crosscol-->
<div id='crosscol-wrapper' style='text-align:center'>
<b:section class='crosscol' id='crosscol'/>
</div> <!-- /Crosscol -->

<div id='main-wrapper'><!-- Main -->
<b:section class='main' id='main' showaddelement='no'>
<b:widget id='Blog1' locked='true' title='Entradas del blog' type='Blog'/>
</b:section>
</div><!-- /Main -->

<aside id='sidebar-wrapper'> <!-- Sidebar -->
<b:section class='sidebar' id='sidebar' preferred='yes'>
<b:widget id='BlogArchive1' locked='false' title='Archivo del blog' type='BlogArchive'/>
<b:widget id='Profile1' locked='false' title='Datos personales' type='Profile'/>
</b:section>
</aside> <!-- /Sidebar -->

<!-- spacer for skins that want sidebar and main to be the same height-->
<div class='clear'>&#160;</div>

</div> <!-- end content-wrapper -->

<footer id='footer-wrapper'><!-- Footer -->
<b:section class='footer' id='footer'>
<b:widget id='Attribution1' locked='false' title='' type='Attribution'/>
</b:section>
</footer><!-- /Footer -->

</div> <!-- end outer-wrapper -->

También hice algunas modificaciones con la plantilla expandida, como la implementación de la etiqueta <article> para la entrada del blog. Así:

<b:includable id='post' var='post'>
  <article class='post hentry'>
    <!-- Código de la entrada -->
  </article>
</b:includable>

Luego encerré el código del título entre etiquetas <header>.

<header class='post-header'>
    <!-- Código del titulo de la entrada -->
  <section class='post-header-line-1'/>
</header>

Utilicé a etiqueta <section> para el contenido de la entrada:

<section class='post-body entry-content' 
expr:id='"post-body-" + data:post.id'>
  <data:post.body/>
  <div style='clear: both;'/> <!-- clear for photos floats -->
</section>

Y finalmente el footer:

<footer class='post-footer'>
  <section class='post-footer-line post-footer-line-1'>
    <!-- Contenido post-footer-line-1 -->
  </section>

  <section class='post-footer-line post-footer-line-2'>
    <!-- Contenido post-footer-line-2 -->
  </section>

  <section class='post-footer-line post-footer-line-3'>
    <!-- Contenido post-footer-line-3 -->
  </section>
</footer>

No quise tocar la plantilla móvil, simplemente porque no tengo donde probarla. Tampoco me quise cambiar todos los divs por sections, no lo creí conveniente.

Me hubiera gustado modificar el código de los comentarios, pero esta parte es muy restringida con el nuevo sistema de comentarios de Blogger. Hice lo que pude.

Por último, agregué el script que hace que la página se vea bien en las versiones viejas de Internet Explorer.

<!--[if lt IE 9]>
    <script src="//html5shim.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->

Puedes ver la plantilla de ejemplo y descargarla siguiendo estos enlaces:

Demo Descargar

18 comentarios

  1. Daniel Martínez Almela — 15 de mayo de 2012, 9:13

    ¡Estupendo!, estoy creando una nueva plantilla gracias a tu base :)

    ¡Gracias!

    1. Erwin Andrés — 16 de mayo de 2012, 16:00

      Me alegra saber que te es útil. Si puedes, comparte la plantilla.

  2. bloopers — 21 de septiembre de 2012, 17:15

    excelente guia amigo, me ha sido util ya que estare modificando los themes actuales que uso

  3. Protox — 23 de febrero de 2013, 2:02

    Muy buen aporte. Se te agradece

  4. Rolando Martinez Rivera — 9 de agosto de 2013, 20:56

    brother como hiciste ese cuadro donde pusistes tus codigos html?

    1. Erwin Andrés — 10 de agosto de 2013, 0:29

      Con Prettify, un resaltador de códigos. Lo explico en ésta entrada.

  5. Panchis Admin — 7 de septiembre de 2013, 23:54

    muy bien amigo... estoy empezando una plantilla desde tu base.. espero que me valla bien :)

  6. Anónimo — 3 de diciembre de 2013, 18:28

    Hola, justo estaba buscando una plantilla web en hmtl5 para blogger y me encontré con esto que es justo lo que necesitaba.

    El problema que tengo es que como no se muestra en diseño no puedo desactivar la fecha, ubicación y demás cosas que se desactivaban desde diseño-entradas del blog.

    Sabes de alguna forma en que pueda solucionar esto?

    Gracias y saludos!

    1. Erwin Andrés — 4 de diciembre de 2013, 0:23

      No sé a qué te refieres con que no se muestra en diseño, a mi me funciona perfectamente. Pero puedes también modificarlo desde la plantilla html, buscas esta linea de código: <h2 class='date-header'><span><data:post.dateHeader/></span></h2> y la borras o la mueves donde quieras ubicarlo.

    2. Anónimo — 4 de diciembre de 2013, 22:47

      Hola Erwin, gracias por tu respuesta. Fue error mío, te cuento, me puse a editar la plantilla antes de encontrarme con la tuya y mi problema es que cuando voy a diseño blogger sólo me aparece la sidebar (aside) y footer, el header y el recuadro de las entradas no (section).

      https://www.dropbox.com/s/in6g8i6fdwpy1cd/dienoblogger.jpg

      Me interesa el recuadro de las entradas porque quiero ocultar opciones de las entradas como fecha (ya me explicaste), publicado por y ubicación. Tú sabes cómo podría hacer que aparezcan las secciones que me faltan o diseño blogger o dónde quitar desde editar plantilla esas opciones?

      Te dejo mi plantilla base por si quieres mirarla:

      https://www.dropbox.com/s/wkxc2povkiv9p3s/Mitemplate.xml

      Muchas gracias y saludos!

    3. Erwin Andrés — 5 de diciembre de 2013, 1:33

      Bueno, la verdad es que tu plantilla está un podo desastrosa. Parece que borraste muchas cosas al momento de editarla. Te recomiendo que empieces de nuevo desde cero.

      Claro que todavía puedes editar esas opciones desde la plantilla identificando el código para cada opción:

      El código para el "publicado por" en tu plantilla es:

      <span class='post-author vcard'> <b:if cond='data:top.showAuthor'> <data:top.authorLabel/> <b:if cond='data:post.authorProfileUrl'> <span class='fn' itemprop='author' itemscope='itemscope' itemtype='http://schema.org/Person'> &lt;meta expr:content='data:post.authorProfileUrl' itemprop='url'/&gt; <a class='g-profile'href='data:post.authorProfileUrl' rel='author' title='author profile'> <span itemprop='name'><data:post.author/></span> </a> </span> <b:else/> <span class='fn' itemprop='author' itemscope='itemscope' itemtype='http://schema.org/Person'> <span itemprop='name'><data:post.author/></span> </span> </b:if> </b:if> </span>

      Y el de la ubicación es:

      <span class='post-location'> <b:if cond='data:top.showLocation'> <b:if cond='data:post.location'> <data:postLocationLabel/> <a href='data:post.location.mapsUrl' target='_blank'><data:post.location.name/></a> </b:if> </b:if> </span>

      Te diría también que no toques nada que no sabes para qué sirve, pero así aprendí yo, así que sigue neceando y preguntando.

  7. Anónimo — 5 de diciembre de 2013, 12:44

    jajajaja la verdad es que he borrado bastante por el afán de dejar la plantilla lo más limpia posible para usarla como página web, voy borrando y viendo si afecta algo que ocupe.

    Mi idea es dejar una plantilla diseñada en html5/css3 con responsive web design. También quiero evitar eso de las plantillas blogger que uno en header por ejemplo se encuentra como 5 ID o clases, para mí lo ideal sería aplicar todas las propiedades directo al header por ejemplo y no estar pasando por outer, inner y cuanta cosa más.

    Mi problema mayor es que he aprendido harto de html5 y css3 pero a la hora de ir y armarme "la página" en el blogger, me encuentro con un montón de código propio de blogger que desconozco y mucho que no entiendo cómo mejorar (como eso de activar los gadgets en el diseño blogger).

    Pensé en hacerme una página web y fin, de hecho la estoy desarrollando paralelamente, pero lo que me tiene preocupado es que mi blogger ya lleva como tres años siendo mi página web por lo que ya está indexado y posicionado. Asumo que al subir una página web debiera sacar todo eso de mi blog o eliminarlo y perdería todo lo logrado en cuanto a seo.

    Gracias por tu ayuda, creo que con eso podría solucionar el problema en las entradas, pero cómo le digo qué oculte eso?

    1. Erwin Andrés — 6 de diciembre de 2013, 2:29

      La verdad es que yo tampoco termino de entender para qué sirven todos esos códigos, pero tienes que empezar a familiarizarte con los códigos de blogger, conocerlos, entenderlos y así tal vez algún día llegues a amarlos.

      Creo que al redireccionar tu blog a un dominio personalizado no se pierdo el seo, pero yo no sé mucho de ese tema.

      Para ocultar esas secciones solo tienes que borrar el bloque de código que le corresponde a cada una.

  8. Anónimo — 8 de diciembre de 2013, 20:00

    Hola Erwin, finalmente opté por comenzar de cero y me quedó más limpia y ordenada. Logré activar el widget del header, pero el de las entradas no hay caso (section).

    Gracias por toda la ayuda, ahora ya está quedando tal cual quería la plantilla.

    Saludos!

  9. Juan Carlos Fernández Prior — 30 de enero de 2014, 13:38

    Buenos post, yo empecé con cursos de código en mi blog y voy a mi ritmo, espero que sigas añadiendo vida con nuevos artículos ;-)

  10. Libertad — 14 de mayo de 2014, 4:00

    Gracias
    Yo estoy intentando hacer desde 0 una plantilla para Blogger con htmlt5 y tus explicaciones me han ayudado mucho. Y más para lo novata que soy para esto

  11. Silvia Zuleta Romano — 17 de enero de 2017, 9:17

    Hola, no sé nada de programación ni de diseño web pero hace ya varios años que tengo dos blogs en Blogger y tenía ganas de refrescarlos un poco. Veo que las plantillas que ofrece Blogger son escasas y no me llaman los diseños. Hace poco estuve trabajando en un proyecto de periodismo y utilizamos HTML5, bueno, yo no, un colega que controlaba estos temas. Ahora quiero largarme sola. O sea, quiero pasar mi blog a alguna plantilla de HTML5, ¿se puede? He leído este post y me parece muy avanzado. ¿Por donde empiezo? ¿Es posible hacer lo que estoy pidiendo? ¿O debo crear un blog nuevo desde cero? Mi blog www.laguaridadeficcion.blogspot.com

    1. Erwin Andrés — 17 de enero de 2017, 13:29

      Las plantillas nuevas de Blogger ya vienen con html5. Tu blog usa plantilla de vista dinámicas, que son las más nuevas de Blogger pero las menos personalizables. Si lo que buscas es refrescar el diseño de tus blogs, hay varias páginas que ofrecen plantillas que puedes descargar gratis y modificarlas a tu antojo para usarlas en tu blog sin que tengas que empezar desde cero.