#HTML5 pruebas y demos

by

  Para los que quieran comenzar un nuevo proyecto #web, y aprender un poco más, les traemos unos codigos para que comiencen hacer pruebas y demos, el nombre del proyecto le colocaremos HTML,   aparte de código HTML es importante darle un diseño es CSS. Sin embargo no tocaremos ese punto de diseño ya que sería muy largo el post pero con un poco de estudio y dedicación se pueden obtener muchas cosas. La cosa esta en que se sabe que HTML5 y CCS3 es el futuro del desarrollo web así que decidí comenzar a documentarme y acá les ofrezco algunos snipes de código HTML5. Por cierto estos ejemplos los extraje de un libro que estoy leyendo se llama “HTML5 solutions essential techniques for HTML5 developers 2011” Bastante bueno lo recomiendo escrito por  Marco Casario, Peter Elst, Charles Brown, Nathalie Wormser and Cyril Hanquez.

El primer snipe de código es la cabecera de una pagina en HTML5 veamos como:
{code type=HTML}
<!DOCTYPE html>
<html xmlns=”http://www.w3.org/1999/xhtml”>
<head>
<meta http-equiv=”Content-Type” content=”text/html; charset=UTF-8″ />
<title>HTML5</title>
</head>

{/code}

Ok. Esto es suficiente para declarar un documento como HTML5 ahora veamos como agregar un menú de opciones.

{code type=HTML}

<nav>
<a href=”#” target=”_blank”>Opcion1</a> |
<a href=”#” target=”_blank”>Opcion2</a> |
<a href=”#” target=”_blank”>Opcion3</a> |
<a href=”#” target=”_blank”>Opcion4</a>
</nav>

{/code}

Bien hasta ahora cosas básicas veamos algo único HTML5 la etiqueta <aside> esta etiqueta debe ser usada cuando queremos expresar algo relevante a un párrafo sin colocarlo directamente en el contenido de la etiqueta <p>, ejemplo:
{code type=HTML}
<aside style=”font-size:larger;
font-style:italic;
color:blue;
float:left;
width:200px;”>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec vel nibh id elit iaculis rhoncus eget eu ligula. Mauris viverra luctus turpis sed placerat. Vestibulum scelerisque, purus ac placerat pretium, orci enim vehicula metus, vel gravida ante magna in turpis. Mauris porttitor arcu vel enim consequat eget placerat dui gravida. Pellentesque magna leo, consectetur a blandit et, feugiat nec tortor. Duis rutrum bibendum ante sit amet posuere. Aliquam eros nulla, lobortis quis pulvinar a, bibendum vel est. Praesent ultrices diam eu nisi malesuada facilisis.
</aside> {/code}

Bastante practico y no requiere de mucho esfuerzo en el procesamiento de formato. Ahora algo que si me pareció realmente bueno y que en el libro lo recomiendan bastante… el uso de los nuevos tipos de INPUT y que ya son soportados por los últimos navegadores. Antes requeríamos de código javascript para hacer validaciones en los formularios pero ahora no es necesario lo que hace el desarrollo mas rápido . Veamos:

{code type=HTML}

<fieldset>
<legend>Validación de Formularios</legend>
<label for=”name”>Name</label>
<input id=”name” name=”name” type=”text” placeholder=”Insert your first name” required/><br/>
<label for=”email”>Email</label>
<input id=”email” name=”email” type=”email” placeholder=”Insert your email” required/><br/>
<label for=”blog”>Blog</label>
<input id=”blog” name=”blog” type=url placeholder=”Insert your blog”/><br/>
<input type=”submit” value=”Submit”/>
</fieldset>
</form>

{/code}

Si prueban este ultimo código en su navegador Opera o GC se darán cuenta que el formulario no pasa si los campos no son llenados correctamente y ademas de eso el mensaje de error es desplegado en el idioma nativo del usuario (idioma configurado por defecto). Mas adelante postiare otros snipes pero con su correspondiente código CCS3. Espero les resulte util.

Actualizo el post mientras sigo con la lectura del libro que les dije arriba. Pagina 81 un buen ejemplo de un pequeño motor de busqueda en caliente con HTML5, los parametros <datalist> hacen esto posible. veamos el codigo que utilizan en el libro.

{code type=HTML}

<form id=”myForm”>
<fieldset>
<legend>Solution 4-6:</legend>
<label> Enter your favorite movies:<br/>
<input type=”text” name=”movies” list=”movies”/>
<datalist id=”movies”>
<option value=”Star Wars”>
<option value=”The Godfather”>
<option value=”Goodfellas”>
</datalist>
</label>
</fieldset>
</form>

{/code}

Esto produce una lista de sugerencias para cuando el usuario tipea el nombre de una pelicula en el campo input. Pero esto no podria por ejemplo usarse en la vida real. Por que esto no es escalable no es automatico, cada nueva sugerencia debe ser introducida a mano en el archivo. Pero si sirve como la guia perfecta para llevar este ejemplo mas allá. Agreguemos mediante PHP una rutina que conecte a una base de datos en Postgresql y creemos la lista de sugerencia en base a una columna completa de una tabla (escalable, automatico).

{code type=PHP}
<form id=”forma-de-sugerencias”>
<fieldset>
<legend>Suegerencias en caliente cortesia de Postgresql:</legend>
<label> Palabras en Frances:<br/>
<input type=”text” name=”palabras” list=”frances”/>
<?
$connstr=”host=’127.0.0.1′ port = ‘5432’ dbname=’frances’ user=’flux’ password=’password'”;
$dbh = pg_connect($connstr);
if ($dbh) {
}
$sqlvista= “SELECT fr FROM palabras”;
$stat2 = pg_exec($sqlvista);
if ($stat2) {
$vistaso = pg_numrows($stat2);
for ($i = 0; $i < $vistaso; $i++) {
$data = pg_fetch_row($stat2, $i);
?>
<datalist id=”frances”>
<option value=” <?echo”$data[0]”;?> “>
<?
}
#Cerrar conexion
pg_close($dbh);
}
else {
echo “Algo fallo<br>n”;
#Cerrar conexion
pg_close($dbh);
}
?>
</datalist>
</label>
</fieldset>
</form>
{/code}

Corran esto en su servidor web con soporte para PHP y verán como vuela. No había echo esto antes en versiones previas de HTML, pero con la versión 5 se me ocurrió y no utilice ni javascript ni ningún otro elemento para completar esta tarea. Saludos pruébenlo y me cuentan. Nota no olviden que tienen que reemplazar los datos en la linea de conexión.

 

 

 

 

13 thoughts on “#HTML5 pruebas y demos”

    • Hi blackhat thanks for your comment, you wanna know more about this topic , I tell you what … I am reading a couple of books about HTML5 if you give some time I will make post about it and recommend you a few good books. Also later on today maybe tomorrow I will update this post and put some useful links of some good tutorials I have found on the web stay tune. Bye see you on net.

      Reply

  3. I am very happy to read this. This is the type of manual that needs to be given and not the accidental misinformation that is at the other blogs. Appreciate your sharing this best doc.

    Reply

  4. Do you mind if I quote a couple of your posts as long as I provide credit and sources back to your blog? My blog is in the very same area of interest as yours and my users would genuinely benefit from a lot of the information you present here. Please let me know if this ok with you. Cheers!

    Reply

  6. I feel this is among the most vital info for me. And im glad reading your article. But wanna remark on few general items, The site style is perfect, the articles is genuinely excellent : D. Great job, cheers

    Reply

Leave a Comment