Mostrando entradas con la etiqueta Html5. Mostrar todas las entradas
Mostrando entradas con la etiqueta Html5. Mostrar todas las entradas

lunes, 10 de junio de 2013

Estructura básica de una plantilla HTML5

Actualización: Nueva entrada en el siguiente enlace:

Vídeotutorial: Crear plantilla para Blogger: Introducción a los códigos esenciales de Blogger.


Esta entrada es un tanto especial, ya que es complementaria para un vídeotutorial que he realizado y que dentro de estos días publicaré en el blog, en el vídeo construiremos una plantilla en HTML5 y en esta entrada anexaremos la estructura básica y un pequeño ejemplo.

blogger html5, Blogger template HTML5


La estructura de un documento HTML5 es la siguiente (Incluyendo el tipo de codificación necesario para Blogger en la primera línea):
<?xml version="1.0" encoding="UTF-8" ?>
<!DOCTYPE html>
<html lang="es">
     <head>


     </head>


    <body>


    </body>
</html>
Si nosotros intentamos guardar este código desde nuestro editor HTML, Blogger nos advertirá que no es posible debido a que no se encuentra una etiqueta b:skin, para solucionarlo incluiremos dicha etiqueta en el <head>:
<?xml version="1.0" encoding="UTF-8" ?>
<!DOCTYPE html>
<html lang="es">
     <head>
    <b:skin></b:skin> <!-- Hoja de estilos del blog,
           la cual no utilizaremos posteriormente
           debido a que usaremos un archivo externo -->

     </head>


    <body>


    </body>
</html>
Otra vez, si intentamos guardar el código nos aparecerá otro mensaje de error, indicando que debe existir una sección (Para gadgets) dentro de nuestra plantilla, lo solucionamos con una etiqueta b:section y su respectivo identificador:
<?xml version="1.0" encoding="UTF-8" ?>
<!DOCTYPE html>
<html lang="es">
     <head>
    <b:skin></b:skin>

     </head>


    <body>
    <b:section id="main" /> <!-- Los b:section son secciones para almacenar gadgets -->

    </body>
</html>
Esta sección la utilizaremos posteriormente para incluir las entradas de nuestro blog, de momento es irrelevante pero necesaria para poder guardar el documento.

Sabiendo todo esto, podrán dar el siguiente paso para construir sus propias plantillas en formato HTML5, en la siguiente entrada anexaré el vídeotutorial explicando la forma de convertir todo esto en una plantilla válida, ya que como reitero, esta entrada es complementaria.

viernes, 21 de mayo de 2010

Lo que se nos viene con HTML5

Si quieres saber más sobre HTML5, te presentamos un interesante sitio en el que nos muestran ejemplos y demostraciones de esta nueva versión de HTML.

Ejemplos y Demos de HTML5 tiene los ejemplos básicos del uso de HTML5 y los soportes de los navegadores más conocidos. Entre ellos Internet Explorer, Mozilla Firefox, Safari, Opera y Google Chrome.

Sólo como ejemplo muestro un bloque del cual podemos editar el texto, mostrado en ContentEditable:

Código:
<section id="editable" contenteditable="true">
<h2>¡Este texto se puede editar!</h2>
<p>¿Por qué no lo intentas? Un párrafo cualquiera</p>

<ol>
<li>el primer ítem</li>
<li>el segundo</li>
<li>y el tercero</li>

</ol>
</section>

Ejemplo:

¡Este texto se puede editar!

¿Por qué no lo intentas? Un párrafo cualquiera


  1. el primer ítem
  2. el segundo
  3. y el tercero


Al añadir el atributo contenteditable="true" hacemos que ese bloque se pueda editar, como si estaríamos usando TinyMCE o FCKEditor. El código anterior funciona en todos los navegadores modernos.

Fuente: