Descargar ebook de introducción a html5 gratis

A partir de hoy ya puedes descargar gratis la primera edición de mi ebook: Introducción a html5 - Aprende a crear una web mediante html5. Gracias al posibilidad de descargar gratis el ebook Introducción a html5 - Aprende a crear una web mediante html5, podrás aprender a crear una estructura básica para un sitio web, mediante html5. El precio del ebook es bastante barato: gratis! por ser visitante de mi blog : )






Gracias a mi ebook gratuito de html5, también te enseño que es lo que tienes que hacer para utilizar algunas de las nuevas etiquetas del lenguaje html5, por ejemplo: vídeo, nav, section, article, footer, header... y a crear e introducir un formulario mediante html5. Creo que merece la pena descargar el libro y leerlo, es una obra que te debe interesar, si quieres adentrarte en el mundo de la programación mediante html5.


Eso sí, el ebook, es gratis en sentido económico, pero en realidad tiene un precio. Para descargar el ebook gratis, te planteo lo siguiente:

Deberás hacer click en "me gusta" de mi página de facebook.

- Haz click en el siguiente enlace para descargar el ebook sobre html5.

También te recomiendo echar un vistazo a lo que te cuento aquí sobre html5.

Espero que te guste y un saludo!!! Por cierto, también acepto donaciones, muchas migas de pan, hacen un pan grande! : )


Como crear una página web mediante html5 y CSS3 - Tutorial desde cero

Espero que te guste este fabuloso tutorial en el que te explico que es lo que tienes que hacer para crear una página web mediante html5 y CSS3, desde cero. Vamos a crear un sitio web visible en todos los navegadores modernos que soportan html5. El estilo de esta página web, lo vamos a aplicar mediante una hoja de estilo en cascada o CSS3, vinculada mediante un link insertado dentro de las etiquetas <head> de nuestro archivo index.

Lo primero que tienes que hacer para poder crear un sitio web mediante html5 y CSS3 es conseguir un programa o editor que soporte html5 (si no lo tienes ya). Yo en este caso voy a utilizar Webmatrix2, pero cualquier otro en el que se pueda crear y editar html5 nos sirve.

Una vez que tengas el software instalado abre un nuevo sitio web y crea dentro de el un documento html en blanco, ponle de nombre: "index.html". Para comenzar, vamos a crear una estructura html5 básica o simple, que podría ser esta:


<!DOCTYPE html>
 
<html lang="es">
    <head>
        <meta charset="utf-8" />
        <title></title>
    </head>
    <body>
        
    </body>
</html>

A continuación, vamos a añadir algunas etiquetas meta al documento html5, como por ejemplo la descripción, el título, las palabras clave... etc.



<html lang="es">
    <head>
        <meta charset="utf-8" />
        <title>Ejemplo de web html5</title>
        <meta name="robots" content="all"/>
        <meta content="Antonio Menchón García" name="author" />
        <meta name="generator" content=" webmatrix2 y bloc de notas de windows"/>
        <meta content="Ejemplo de pagina web creada con html5 y CSS" name="description" />
<meta content="web html5, pagina web html5, html5, html5 css web," name="keywords" />
<!-------hoja de estilos css ---------->
        <link rel="stylesheet" href="estilo.css" type="text/css" />
        <!-------webfonts de google ---------->
        <link href='http://fonts.googleapis.com/css?family=Freckle+Face' rel='stylesheet' type='text/css'>
      <link href='http://fonts.googleapis.com/css?family=Risque' rel='stylesheet' type='text/css'>
</head>
    <body>
        
    </body>
</html>


Ahora, vamos a añadir varias secciones <section>, una cabecera <header>, un pie de página <footer> y varios artículos <article>


<!DOCTYPE html>
 
<html lang="es">
    <head>
        <meta charset="utf-8" />
        <title>Ejemplo de web html5</title>
        <meta name="robots" content="all"/>
        <meta content="Antonio Menchón García" name="author" />
        <meta name="generator" content=" webmatrix2 y bloc de notas de windows"/>
        <meta content="Ejemplo de pagina web creada con html5 y CSS" name="description" />
<meta content="web html5, pagina web html5, html5, html5 css web," name="keywords" />
<!-------hoja de estilos css ---------->
        <link rel="stylesheet" href="estilo.css" type="text/css" />
        <!-------webfonts de google ---------->
        <link href='http://fonts.googleapis.com/css?family=Freckle+Face' rel='stylesheet' type='text/css'>
      <link href='http://fonts.googleapis.com/css?family=Risque' rel='stylesheet' type='text/css'>
<!------- plugin para que se vea en IE ---------->
<!--[if lt IE 9]>
    <script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
</head>
    <body>
      <section class="sitio">
      <header>
      </header>
          <section class="conenidoprincipal">
          <article class="arriba"></article>
          <div class="separador"></div>
              <article class="izquierda"></article>
              <article class="derecha"></article>
              </section>
           <div class="separador"></div>
          <footer></footer>
      </section>
          </body>
</html>

Le he asignado las clases (class) para poder maquetar la web fácilmente mediante CSS3. Vamos a introducir algo de contenido en el sitio web. Introduce el texto entre las etiquetas como lo hago yo:


<!DOCTYPE html>
 
<html lang="es">
    <head>
        <meta charset="utf-8" />
        <title>Ejemplo de web html5</title>
        <meta name="robots" content="all"/>
        <meta content="Antonio Menchón García" name="author" />
        <meta name="generator" content=" webmatrix2 y bloc de notas de windows"/>
        <meta content="Ejemplo de pagina web creada con html5 y CSS" name="description" />
<meta content="web html5, pagina web html5, html5, html5 css web," name="keywords" />
        <!-------hoja de estilos css ---------->
        <link rel="stylesheet" href="estilo.css" type="text/css" />

        <!-------webfonts de google ---------->

        <link href='http://fonts.googleapis.com/css?family=Freckle+Face' rel='stylesheet' type='text/css'>
      <link href='http://fonts.googleapis.com/css?family=Risque' rel='stylesheet' type='text/css'>
<!------- plugin para que se vea en IE ---------->
<!--[if lt IE 9]>
    <script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script>
<![endif]--></head>
    <body>
      <section class="sitio">
      <header><p>Esta es la cabecera, aquí puedes introducir tu logo, por ejemplo</p>
      </header>
          <section class="contenidoprincipal">
          <article class="arriba"><h1>Titulo 1</h1><p>Lorem ipsum ad his scripta blandit partiendo, eum fastidii accumsan euripidis in, eum liber
               hendrerit an. Qui ut wisi vocibus suscipiantur, quo dicit ridens inciderint id. Quo mundi lobortis reformidans
               eu, legimus senserit definiebas an eos. Eu sit tincidunt incorrupte definitionem, vis mutat affert percipit cu,
               eirmod consectetuer signiferumque eu per. In usu latine equidem dolores. Quo no falli viris intellegam, ut fugit
               veritus placerat per. Ius id vidit volumus mandamus, vide veritus democritum te nec,</p></article>
          <div class="separador"></div>
              <article class="izquierda"><h2>Titulo 2</h2><p> ei eos debet libris consulatu. No mei ferri graeco dicunt, ad cum veri accommodare. Sed at malis omnesque delicata, usu et iusto zzril meliore. Dicunt maiorum eloquentiam cum cu, sit summo dolor essent te. Ne quodsi nusquam legendos has, ea dicit voluptua eloquentiam pro, ad sit quas qualisque. Eos vocibus deserunt quaestio ei. Blandit incorrupte quaerendum in quo, nibh impedit id vis, vel no nullam semper audiam. Ei populo graeci consulatu mei, has ea stet modus phaedrum. Inani oblique ne has, duo et pri in errem putant feugiat. Sed iusto nihil populo an, ex pro novum homero cotidieque. Te utamur civibus eleifend qui, nam ei brute doming concludaturque, modo aliquam facilisi nec no. Vidisse maiestatis constituam eu his, esse pertinacia intellegam ius cu. Eos ei odio veniam, eu sumo altera adipisci eam, mea audiam prodesset persequeris ea. Ad vitae dictas vituperata sed, eum posse labore postulant id. Te eligendi principes dignissim sit, te vel dicant officiis repudiandae. Id vel sensibus honestatis omittantur, vel cu nobis commune patrioque. In accusata definiebas qui, id tale malorum dolorem sed, solum clita phaedrum ne his. Eos mutat ullum forensibus ex, wisi perfecto urbanitas cu eam, no vis dicunt impetus. Assum novum in pri, vix an suavitate moderatius, id has reformidans referrentur. Elit inciderint omittantur duo ut, dicit democritum signiferumque eu est, ad suscipit delectus mandamus duo. An harum equidem maiestatis nec. At has veri feugait placerat, in semper offendit praesent his. Omnium impetus facilis sed at, ex viris tincidunt ius. Unum eirmod dignissim id</p></article>              <article class="derecha"><h3>Título 3</h3><p>offendit persequeris ei vim. Eos dicat oratio partem ut, id cum ignota senserit intellegat. Sit inani ubique graecis ad, quando graecis liberavisse et cum, dicit option eruditi at duo. Homero salutatus suscipiantur eum id, tamquam voluptaria expetendis ad sed, nobis feugiat similique usu ex. Eum hinc argumentum te, no sit percipit adversarium, ne qui feugiat persecuti. Odio omnes scripserit ad est, ut vidi loem uupp non epsis maiestatis his, putent mandamus gloriatur ne pro. Oratio iriure rationibus ne his, ad est corrumpit pri in errem putant feugiat. Sed iusto nihil populo an, ex pro novum homero cotidieque. Te utamur civibus eleifend qui, nam ei menchoni brute doming concludaturque, modo aliquam facilisi nec no. Vidisse maiestatis constituam eu his, esse pertinacia intellegam ius cu. Eos ei odio veniam, eu sumo altera adipisci eam, mea audiam prodesset persequeris ea. Ad vitae dictas vituperata sed, eum posse labore postulant id. Te eligendi principes dignissim sit, te vel dicant officiis repudiandae. Id vel sensibus honestatis omittantur, vel cu nobis commune patrioque. In accusata definiebas qui, id tale malorum dolorem sed, solum clita phaedrum ne his. Eos mutat ullum forensibus ex, wisi perfecto urbanitas cu eam, no vis dicunt impetus. Assum novum in pri, vix an suavitate moderatius, id has reformidans referrentur. Elit inciderint omittantur duo ut, dicit democritum signiferumque eu est, ad suscipit delectus mandamus duo. An harum equidem maiestatis nec. At has veri feugait placerat, in semper offendit praesent his. Omnium impetus facilis sed at, ex viris tincidunt ius. Unum eirmod dignissim id quo. Sit te atomorum quaerendum neglegentur, his primis tamquam et. Eu quo quot veri alienum, ea eos nullam luptatum accusamus. Ea mel causae phaedrum reprimique, at vidisse dolores ocurreret nam splendide.</p></article>
              </section>
           <div class=" separador"></div>
          <footer><p>Este es el pie de página, en su interior puedes escribir algo, como por ejemplo enlaces a los derechos de autor,
          aviso legal...</p></footer>
      </section>
          </body>
</html>

Éste último código, es el que debes introducir dentro de tu archivo index una vez esté personalizado. Si lo subes al servidor y lo publicas, se puede ver esto:


Ahora vamos a aplicarle estilos, crea una nueva hoja de estilos css o aplicalos mediante las etiquetas <style> y </style> entre <head> y </head>. Pon de nombre a esta hoja de estilos: "estilo.css" que es el nombre que habíamos puesto para vincular este documento mediante un link: <link rel="stylesheet" href="estilo.css" type="text/css" />.

Introduce este contenido dentro de la hoja de estilos "estilo.css":

*{text-indent: 15px;}
h1 { font-family: 'Freckle Face', cursive; font-size:20px;font-weight: 400;color:white;padding-top:7px; }
h2 { font-family: 'Freckle Face', cursive; font-size:30px;font-weight: 400;color:yellow;padding-top:15px; }
a:link {text-decoration:none; color: #99CC00;} /* Link no visitado*/
a:visited {text-decoration:none; color:#99CC66} /*Link visitado*/
a:active {text-decoration:none; color:#99FF00;} /*Link activo*/
a:hover {text-decoration:underline; color:#99FF00;} /*Mouse sobre el link*/
body {
     width: 100%;
    background: #0000FF;
    background: -webkit-linear-gradient(#0000FF, #00008B);
background: -moz-linear-gradient(#0000FF, #00008B);
background: -o-linear-gradient(#0000FF, #00008B);
background: linear-gradient(#0000FF, #00008B);
 background-attachment: fixed;
  background-repeat: no-repeat;
  background-position: center top;
  height: 100%;
}
 
.sitio {
    overflow: hidden;
    margin: 0 auto;
    width: 955px;
    height: auto;
     font-family: 'Risque', cursive;
  color:white;
  font-size:14px;
     }
header {
    margin: 5px 5px 5px 0px;
    overflow: hidden;
    width: 918px;
    height: 100px;
    padding:15px;
    color: white;
    font-size: 17px;
    text-align: center;
  -moz-border-radius: 7px;
   -webkit-border-radius: 7px;
border-radius:7px;
   box-shadow: 5px 4px 3px #000;
   -webkit-box-shadow: 5px 4px 3px #000;
   -moz-box-shadow: 5px 4px 3px #000;
   background: #808000;
background: -webkit-linear-gradient(#808000, #2F4F4F);
background: -moz-linear-gradient(#808000, #2F4F4F);
background: -o-linear-gradient(#808000, #2F4F4F);
background: linear-gradient(#808000, #2F4F4F);
  background-repeat: no-repeat;
  background-position: center top;
}
 
.contenidoprincipal {
    text-align:justify;
  overflow:hidden;
  width: 942px;
  padding: 7px 3px 0px 3px;
    margin-top:10px;
    background: #4B0082;
    background: -webkit-linear-gradient(#4B0082,#800080);
background: -moz-linear-gradient(#4B0082,#800080);
background: -o-linear-gradient(#4B0082,#800080);
background: linear-gradient(#4B0082,#800080);
 background-attachment: fixed;
  background-repeat: no-repeat;
  background-position: center top;
  -moz-border-radius: 7px;
   -webkit-border-radius: 7px;
border-radius:7px;
   box-shadow: 5px 4px 3px #000;
   -webkit-box-shadow: 5px 4px 3px #000;
   -moz-box-shadow: 5px 4px 3px #000;
   }
.arriba {
    width:913px;
  padding: 0 5px 5px 5px;
    height:auto;
  position:relative;
  margin: -15px 1% 1% 1%;
 background: #800080; 
  -moz-border-radius: 15px;
   -webkit-border-radius: 15px;
border-radius:15px;
  background: -webkit-linear-gradient(#008000,#800080);
background: -moz-linear-gradient(#008000,#800080);
background: -o-linear-gradient(#008000,#800080);
background: linear-gradient(#008000,#800080);
}
.izquierda {
    float: left;
  display:block;
  padding: 0 5px 5px 5px;
  margin-left:1%;
  overflow:hidden;
    width: 445px;
    height: auto;
    background: #800080;
    margin-top: 5px;
    margin-bottom: 5px;
  -moz-border-radius: 15px;
   -webkit-border-radius: 15px;
border-radius:15px;
  background: -webkit-linear-gradient(#800080,#008000);
background: -moz-linear-gradient(#800080,#008000);
background: -o-linear-gradient(#800080,#008000);
background: linear-gradient(#800080,#008000);
}
.derecha {
    float: right;
  display:block;
  padding: 0 5px 5px 5px;
  margin-right:1%;
  overflow:hidden;
    width: 445px;
    height: auto;
    background: #800080;
    margin-top: 5px;
    margin-bottom: 5px;
  font-family: 'Risque', cursive;
  color:white;
  font-size:14px;
  -moz-border-radius: 15px;
   -webkit-border-radius: 15px;
border-radius:15px;
  background: -webkit-linear-gradient(#800080,#008000);
background: -moz-linear-gradient(#800080,#008000);
background: -o-linear-gradient(#800080,#008000);
background: linear-gradient(#800080,#008000);
}
 
footer {
    margin-top: 7px;
  margin-bottom:0px;
  padding-bottom: 7px;
  padding-top: 15px;
  text-align: center;
    width: 949px;
 height: auto;
    position: static;
    border-radius: 10px 10px 0px 0px;
    -moz-border-radius: 10px 10px 0px 0px;
   -webkit-border-radius: 10px 10px 0px 0px;
   box-shadow: 5px 4px 3px #000;
   -webkit-box-shadow: 5px 4px 3px #000;
   -moz-box-shadow: 5px 4px 3px #000;
   background: #800080;
  background: -webkit-linear-gradient(#008000,#800080);
background: -moz-linear-gradient(#008000,#800080);
background: -o-linear-gradient(#008000,#800080);
background: linear-gradient(#008000,#800080);
}

Si lo has hecho todo correctamente, una vez subido al servidor se debería ver algo como esto en los navegadores modernos:




Ya tienes tu página web creada mediante html5 y CSS3!!! ¿te gusta? ahora te toca aprender y practicar con tu nueva web. Mira que bien queda en este ejemplo que he creado de página web mediante html5 y CSS3, similar al de este post. En este link, puedes descargar los códigos para crear la web mediante html5 y CSS3.

Ahora te toca a ti personalizarla, y añadirle muchas más cosas, por ejemplo un menú, un formulario de contacto, videos, imágenes, plugins de javascript, frameworks, funciones php... Por cierto, si te interesa, puedes aprender como crear un formulario con html5 y CSS3, para añadirlo a tu nueva página web o también puedes descubrir como insertar vídeos mediante html5. Quizá te interese echar un vistazo esta plantilla html5 responsive web design, diseñada con CSS3.

Si no tienes conocimientos sobre html ni CSS, lo mejor es que te decidas por crear un sitio web con alguna de estas herramientas o sistemas para crear webs, gratis. Que no se te olvide seguirme en las redes sociales, así recibirás información instantáneamente sobre nuevas publicaciones y eventos en Miopiblog.

Crear formulario con html5 y CSS3 - tutorial

En este tutorial, te voy a explicar que es lo que tienes que hacer para crear un formulario de contacto para sitio web, utilizando html5 para la estructura y CSS3 para el diseño o estilo del formulario. Para lograr que el formulario de contacto html5 funcione y envíe los datos, emplearemos una función php.

Para comenzar a crear nuestro formulario de contacto para sitio web, mediante html5, vamos a comenzar por la estructura. La estructura del formulario de contacto html5 y CSS3, va a estar compuesta por: un <legend> o título del formulario, por un contenedor o <fieldset>,  las etiquetas <form> que corresponden al propio formulario, y varios elementos <label> en cuyo interior estarán los <input> (recuadros donde el usuario introduce sus datos).

Por lo tanto, nuestro html para el formulario de contacto quedaría así:


<fieldset id="contmiformu"> <!------- Título -------> <legend>Contacto:</legend> <!------- Comienza el formulario -------> <form id="miformu" action="enviarform.php" method="post" > <!------- inputs y label -------> <p><label class="label" ><span>Nombre:</span> <input type="text" id="nombre" name="nombre" placeholder="Escribe tu nombre" required="required" autofocus ></label></p> <p><label class="label" ><span>Apellidos:</span> <input type="text" id="apellidos" name="apellidos" placeholder="Apellidos" required="required" ></label></p> <p><label class="label" ><span>Email:</span> <input type="email" id="email" name="email" placeholder="asturver@hotmail.es" required="required" ></label></p> <p><label class="label" ><span>¿Sitio web?:</span> <input type="url" id="url" placeholder="http://asturver.com" name="web" ></label></p> <p><label class="label" ><span>Teléfono:</span> <input type="tel" id="tel" placeholder="Número de teléfono" name="telefono" ></label></p> <p><label class="label" ><span>Comentarios:</span> <textarea id="comentarios" name="comentarios" placeholder="Escribe aquí" cols="17" rows="5" maxlength="1000"></textarea></label></p> <!------- Botón de enviar -------> <p><input class="submit" type="submit" value="Enviar" /><p> </form> </fieldset>
Te explico un poco lo que he creado:


  1. " <fieldset id="contmiformu">
                    <!------- Título ------->
                    <legend>Contacto:</legend>"
    - Este fragmento de código crea, o mejor dicho, abre el contenedor o "fieldset" y hace visible un título para el formulario, en este caso: "Contacto:".
  2. " <!------- Comienza el formulario ------->
            <form id="miformu" action="enviarform.php" method="post" >"
    - Abrimos el elemento <form> o formulario, en cuyo interior van situados los <input> y <label>. Como puedes observar, he asignado un id="", para identificarlo, action="" que hace referencia a la función php que vamos a utilizar para enviar dicho formulario (enviarform.php) y el method="", en este caso "post".
  3. "<!------- inputs y label ------->
            <p><label class="label" ><span>Nombre:</span> <input type="text" id="nombre" name="nombre" placeholder="Escribe tu nombre" required="required" autofocus ></label></p>"
    - los elementos <label> son en los que introducimos el enunciado que queremos que tengan los <input>, y los propios <input>, que son los cuadros de texto que el usuario rellena con sus datos. Dentro del elemento <input> se pueden especificar varios atributos, en este caso hemos especificado: "required" (requerido), "autofocus" (gracias a este atributo este elemento <input> sale como el "primero a rellenar" siempre), type="" (el tipo de input), id="" (establece una identidad), name="" (establece una identidad que después nos sirve para la función php), placeholder="" (texto que sale escrito por defecto dentro del input).
  4. "<p><input class="submit" type="submit" value="Enviar" /><p>" - Botón de enviar.


Si lo has hecho todo bien, en tu sitio web tendría que verse esto:


Parece que nuestro formulario de contacto está un poco soso, no? jeje!!! no importa, vamos a darle un poco de estilo. Crea una hoja de estilos CSS y añade un link a ésta entre las secciones <head> y </head>, de tu sitio web, o añade los siguientes estilos CSS3 a tu hoja de estilos. También puedes introducir el código para los estilos del formulario de contacto, entre las etiquetas <style type="text/css"> y </style>, para insertarlo en tu sitio web:


/* ------------- estilos para
    el título ------------- */
 
#contmiformu legend {
    margin: 0 auto;
    font-size: 2em;
    font-weight: bold;
}
 
/* ------------- estilos para
    el contenedor ------------- */
 
#contmiformu {
  width: 250px; 
  border: 0;
  padding: 3px; 
 }
 
/* ------------- estilos para
    el formulario ------------- */
 
#miformu {
    width: 300px;
    background-image: linear-gradient(bottom, rgb(192,204,20) 47%, rgb(91,240,126) 68%);
background-image: -o-linear-gradient(bottom, rgb(192,204,20) 47%, rgb(91,240,126) 68%);
background-image: -moz-linear-gradient(bottom, rgb(192,204,20) 47%, rgb(91,240,126) 68%);
background-image: -webkit-linear-gradient(bottom, rgb(192,204,20) 47%, rgb(91,240,126) 68%);
background-image: -ms-linear-gradient(bottom, rgb(192,204,20) 47%, rgb(91,240,126) 68%);
background-color: #5bf07e;
background-image: -webkit-gradient(
 linear,
 left bottom,
 left top,
 color-stop(0.47, rgb(192,204,20)),
 color-stop(0.68, rgb(91,240,126))
);
border-width: 2px;
border-color: #26600c;
border-style: solid;
-moz-border-radius: 15px 15px 15px 15px;
-webkit-border-radius: 15px 15px 15px 15px;
border-radius: 15px 15px 15px 15px;
}
 
#miformu label {
 display: block;
    margin:0;
}
 
#miformu label span {
   display: block;
   margin-left: 7px;
}
 
/* ------------- estilos para
    los input y area de texto ------------- */
 
#miformu label input {
    margin-left: 40px;
    margin-top: 5px;
    padding-left: 3px;
    border-color: #ff6a00;
    -moz-transition: all .25s; 
    -webkit-transition: all .25s; 
    -o-transition: all .25s;
    transition: all .25s;
}
 
#miformu label textarea {
    margin-left: 40px;
    margin-top: 5px;
    padding-left: 3px;
    border-color: #ff6a00;
    -moz-transition: all .25s; 
    -webkit-transition: all .25s; 
    -o-transition: all .25s;
    transition: all .25s;
}
 
/* ------------- efectos para
    los input y area de texto ------------- */
 
 
#miformu label input:focus, #miformu label textarea:focus {
    background: #fff; 
    border-color: #0000FF; 
    box-shadow: 0 0 4px #0000FF; 
    padding-right:65px;
    margin-left: 10px;
}
 
#miformu .submit {
    margin-left: 50px;
    font-size: 14px;
    font-weight: bold;
    padding: 3px;
    margin-bottom: 7px;
    background-color: #808080;
    color: #fff;
    cursor: pointer;
    -moz-transition: all .32s; 
    -webkit-transition: all .32s; 
    -o-transition: all .32s;
    transition: all .32s;
    }
 
 
/* ------------- estilos para
     boton de envío ------------- */
 
 
#miformu .submit:hover {
    padding: 3px 5px;
    background-color: #ebe7e7;
    color: #0000FF;
    }

Vamos a ver como tendría que quedar el formulario de contacto html5 diseñado con CSS3 finalmente, visto con el navegador Google Chrome, por ejemplo:



Parece que ahora se ve algo mejor. En internet explorer se ve algo diferente y se puede mejorar algo el diseño, pero en la mayoría de navegadores modernos se ve exactamente así, como en la imagen. ¿te gusta? espero que sí, no obstante, recuerda que puedes personalizar los estilos modificando el CSS.

Aún nos falta algo muy importante; la función php para enviar los datos del formulario de contacto hmtl5. Crea un nuevo documento .php, copia este código en su interior, personalízalo con tu dirección de correo, tus propias frases... etc, y gúardalo en el directorio raíz de tu sitio web con el nombre: "enviarform.php". Una vez lo tengas, súbelo a tu servidor con el resto de archivos.



<?php
//Importamos los datos del formulario
@$nombre = addslashes($_POST['nombre']);
@$apellidos = addslashes($_POST['apellidos']);
@$email = addslashes($_POST['email']);
@$web = addslashes($_POST['web']);
@$mensaje = addslashes($_POST['comentarios']);
 
//Preparo el correo
$cabecemail = "From: $email\n" 
 . "Reply-To: $email\n";
$asunto = "Mensaje desde el formulario de contacto"; //asunto del mensaje
$email_to = "asturver@hotmail.es"; //cambiar por tu email
$contenido = "$nombre ha enviado un mensaje desde el formulario de contacto, estos son sus datos:"
. "\n"
. "Nombre: $nombre\n"
. "Apellidos: $apellidos\n"
. "Email: $email\n"
. "Sitio Web: $web\n"
. "Comentarios: $mensaje\n"
. "\n";
 
//Enviamos el correo
if (@mail($email_to, $asunto ,$contenido ,$cabecemail )) {
 
//Si el mensaje se envía muestra una frase
die("Gracias, hemos recibido sus datos correctamente.");
}else{
 
//Si algo falla, sale error
die("Error: No hemos recibido sus datos, inténtelo más tarde.");
}
?>

Muy bien, supongo que hasta el momento no ha sido muy difícil, no? pues... ya hemos terminado, jeje!!! Ya tienes creado tu formulario de contacto, realizado con html5 y diseñado con CSS3.

Una cosa más: este formulario realiza la validación correctamente mediante html5 en los navegadores modernos, pero no en otros como IE ni en dispositivos móviles.
Para solucionar este problema, y que nuestro formulario de contacto funcione correctamente en todos los navegadores y en los dispositivos android, introduce el siguiente código entre las etiquetas <head> y </head> del sitio web donde vaya a ir situado el formulario de contacto html5:


<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
        <script src="http://minuevaprueba.webuda.com/jquery.h5form-custom.js"></script>
   
<script>
    $(document).ready(function(){
        $('#miformu').h5form();   
    });
</script>

Este código javascript, hace uso del framework jQuery y de un plugin para validar formularios con jQuery, conocido como jquery.h5form. Si sabes hacerlo, descárgalo y súbelo a tu propio servidor en vez de utilizar "minuevaprueba.webuda.com/jquery.h5form-custom.js", así nunca dejará de funcionar, seguro.
También puedes agregar estilos a las etiquetas de error y demás del plugin, para ello visita este link: https://plugins.jquery.com/h5form/ e infórmate mejor.

Bueno, pues nada, puedes ver este mismo ejemplo funcionando si visitas este subdominio de pruebas, en el que te muestro el formulario html5 y CSS3 que hemos construido, funcionando. Por cierto, en mi android funciona perfectamente.

Si quieres, puedes descargar todos los códigos para el formulario de contacto html5 de este ejemplo, visitando el link. Una cosa: para editar el archivo index, tendrás que utilizar un programa o editor que soporte html5, si no lo tienes, puedes utilizar el bloc de notas de windows. No obstante, también te facilito el archivo index en versión .txt para que puedas editarlo fácilmente (este archivo .txt no es necesario subirlo al servidor).
¿quieres una plantilla responsive design en html5, gratis? echa un vistazo al enlace! :-)

No te olvides de seguirme en las redes sociales o de suscribirte a mi newsletter. Si lo haces, estarás siempre al día sobre nuevas actualizaciones y publicaciones en Miopiblog.

Un saludo!!! ; )