Google+ Plantilla web html5 responsive design - con CSS3 y jQuery ; ) - Miopiblog

martes, 8 de enero de 2013

Plantilla web html5 responsive design - con CSS3 y jQuery ; )

Hola de nuevo, esta vez te traigo una fabulosa plantilla o página responsive web design, creada con html5, CSS3 y jQuery, gratis. Al utilizar responsive web design para crear la página web, ésta se adapta a todos los tamaños de pantalla. La página web o plantilla Html5, estaba pensada para ser utilizada como landing page profesional de facebook, no obstante, también te ofrezco esta versión de sitio web responsive design html5, para subirla a un servidor de forma habitual, o para implementar esta plantilla responsive web design, en tu sitio web. El código de la plantilla html5 gratuita, está validado en W3C, tanto la hoja de estilos CSS como el archivo Html5 (para comprobarlo, puedes descargar los archivos e introducir el código la página web o plantilla responsive web design, en las ventanas de validación de W3C). Supongo que te alegrará saber que esta página web responsive html5, se ve estupendamente en todos los navegadores modernos.




La página web o plantilla responsive web design, creada con html5 y javascript, que te ofrezco, es única y original. La he creado yo mismo para ofrecértela a ti gratis, simplemente, porque sí. Como te comentaba antes, el CSS3 es el rey en la hoja de estilos de esta página web responsive.

Este proyecto, está compuesto simplemente por cinco archivos: index.html, estiloprincipal.css, contacto.php, ie.css y video.mp4. Solamente contiene una imagen (en la cabecera). En el interior de tu nueva landing page, puedes observar varios elementos interesantes: un vídeo insertado con html5, un mapa de geolocalización (te muestra en un mapa desde donde accedes al site), un formulario plegable creado con html5, css3 y php... es bastante interesante, comprobar como todos estos elementos se adaptan completamente a la pantalla de un dispositivo móvil o una tablet, tras realizar responsive web design y optimizar un poco este sitio web para móviles.

Por cierto, puedes ver este ejemplo de sitio web responsive web design html5, funcionando en un navegador (sin facebook) normal, pinchando en el enlace ( recuerda los problemas de html5 y css3 con algunas versiones de IE ). Si te apetece, puedes comprobar como se ve la plantilla en diferentes tamaños o resoluciones de pantalla, utilizando alguna de estas herramientas.

¿te gusta la página web o de aterrizaje? : ) , ok, pues si la respuesta es afirmativa, aquí tienes el enlace para descargar los archivos de la plantilla html5 responsive design, gratis, para sitio web:


Ahora solo tienes que subir los archivos de la plantilla html5 a un servidor y... a funcionar!!! Descarga Webmatrix2 (por ejemplo), y una vez que lo tengas instalado; personaliza el texto a tu gusto, añade imágenes, cambia el vídeo... total; "apáñala" y disfruta de ella. Si no tienes editor html5 ni quieres descargar e instalar webmatrix2, no importa, junto al archivo index.html, he incluido una copia en formato de texto o .txt, para que puedas editar tu index html5, con el bloc de notas de windows : ).
Acuérdate de cambiar la descripción, palabras clave, nombre del autor... etc. Por cierto, un menú y un par de páginas no le vendrían nada mal... no crees? jeje!!!

Esta landing page o plantilla responsive design, se puede personalizar completamente: modificando un poco el CSS, puedes aplicar un cambio bastante notable sobre esta web. Además, es posible añadir plugins, iconos de redes sociales, un sidebar... y mucho más. Yo solo he dado el primer paso, si la quieres mejorar, ahora te toca a ti. El código utilizado es muy simple, por ese motivo no he incluido apenas comentarios en el. Te invito a investigar y aprender, como hago yo... así llegarás más lejos que descargando la plantilla y dejándola como está sin calentarte la cabeza. Márcate unos objetivos y cúmplelos, cuando ya los tengas, entonces corre a por otra cosa más difícil : ) ...pero nunca, nunca, te rindas.

Una última cosa: este es un proyecto al que he dedicado parte de tiempo para ofrecértelo a ti, gratis y con la intención de que puedas empezar a conocer como es Html5  y a experimentar en el mundo de CSS3 o jQuery. Para realizarlo, he puesto todo mi entusiasmo con el fin de que sea una obra creativa y que te guste a ti, a mi seguidor o usuario.

 La única manera que se me ocurre de que me puedas agradecer este pequeño aporte, es colocando un link a Miopiblog en la página principal del sitio web si decides descargar el proyecto y utilizarlo (si quieres, eh? jeje!!! si no te parece bien, tampoco me enfado, no pasa nada).

Acuérdate de seguirme en las redes sociales o de suscribirte a mi newsletter, si lo haces estarás al día en cuanto publique algún contenido o recurso web gratuito. Por cierto, las plantillas html5 responsive design (utilizables como landing page, también) suelen ser algo caras, yo te la regalo, pero también acepto donaciones ; ) jeje!!! un saludo!!!




Seguidores (seguir blog)

Me siguen en google plus: