Desarrollaremos la pagina principal de un sitio web que se adapte a dispositivos móviles (Responsive). Para desarrollarlo deben tener un editor de código, pueden usar el que deseen. Este sitio tendrá una estructura completa, usaremos etiquetas propias de HTML5 y estilos de CSS3, que se adapte completamente a cualquier dispositivo. El sitio estará realizado de la manera mas sencilla, agregaremos nuestras imágenes para no llamar ninguna CDN externa. Estará escrito de una manera sencilla en la que explicare paso a paso las etiquetas que estamos agregando. Ver Ejemplo: Ejemplo Tutorial Responsive.
Creando los archivos de la Pagina Web Responsive
Debemos crear una carpeta donde alojaremos todos nuestros archivos, esa sera la carpeta principal de tu pagina web responsive, la nombraremos como deseemos. Luego debemos crear 2 carpetas dentro de la carpeta principal que acabamos de crear, las nuevas carpetas pueden denominarse «img» y «css«.
Modificar archivo INDEX de Pagina Web Responsive
Una vez estas carpetas estén creadas, debemos abrir un documento en nuestro editor de código y nombrarlo index.html. El archivo index.html sera el que contenga toda la estructura de nuestro sitio web, principalmente crearemos la estructura para dar estilos posteriormente. Como es un documento HTML abriremos la estructura con las siguientes lineas de código.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>Tutorial Sitio web Responsive</title> <meta name="viewport" content="width=device-width, initial scale=1.0" /> <link href="css/estilos.css" media="screen" rel="stylesheet"> </head> |
Hasta el momento no hemos agregado nada mas que el titulo de nuestro sitio web, pero podemos visualizar algunas etiquetas meta al principio de nuestro archivo, la etiqueta que vemos a continuación se utiliza para controlar cómo aparecerá el contenido HTML en los dispositivos móviles. En nuestro caso el contenido se ajustara al ancho del dispositivo con una escala inicial es de 1.
<meta name="viewport" content="width=device-width, initial-scale=1.0" /> |
También hemos llamado nuestra hoja de estilos por medio del enlace al archivo estilos.css que agregamos en el código mostrado anteriormente.
<LINK REL="stylesheet" TYPE="text/css" HREF="estilos.css"> |
Anteriormente cerramos la etiqueta <head>, ahora debemos agregar la etiqueta <body> a nuestro archivo, esta etiqueta contendrá dentro de ella todo el contenido de nuestro sitio web responsive.
Agregar Menu a Pagina Web Responsive
Ademas de la etiqueta <body> agregaremos <header>, <nav> y una etiqueta que crearemos llamada <banner>. Agregamos a nuestro código las siguientes lineas debajo del cierre de la etiqueta </head>.
<body> <header> <!--Logo--> <a href="#" id="logo"></a> <!--Menu--> <nav> <a href="#" id="menu-icon"></a> <ul> <li> <a href="index.html" class="current">Inicio</a></li> <li> <a href="servicios.html">Servicios</a></li> <li> <a href="planes.html">Planes</a></li> <li> <a href="nosotros.html">Nosotros</a></li> <li> <a href="contacto.html">Contacto</a></li> </ul> </nav> <!--Fin menu--> </header> <!--Banner--> <banner> <img src="img/slide.jpg"/> </banner> <!--Fin Banner--> |
Podemos ver que en las lineas de código mostradas anteriormente ya definimos un menú con la etiqueta nav, ademas definimos una clase para agregar un logo a nuestro sitio que se mostrara al lado del menú posteriormente. Adicionalmente agregue una etiqueta banner que mostrara una imagen determinada, la cual estará alojada en la carpeta «img» que creamos en el primer paso. En el menú se especifica una clase «current» para agregar estilos al botón que se encuentra activo.
Agregar Contenido a Pagina Web Responsive
Es hora de agregar la primera sección de contenido a nuestra pagina web responsive, en este ejemplo yo agregue 3 secciones que mostraran diferentes elementos e información en el sitio. Estas secciones se organizarán con los estilos CSS que le agreguemos a nuestro sitio. Para nombrar estas secciones agregue 2 etiquetas de HTML5 que son <section> y <aside> de esa forma logre organizar todo el contenido. La primera sección de elementos contiene los iconos y la información de nuestro sitio web. Agregaremos las siguientes lineas de código debajo del cierre de la etiqueta </banner>.
<!--Secciones--> <section> <img src="img/servicios.png"/> <h1>servicios</h1> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam convallis luctus tristique. Praesent accumsan accumsan mattis. In euismod urna vel laoreet bibendum. </p> </section> <section> <img src="img/plataforma.png"/> <h1>Planes</h1> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam convallis luctus tristique. Praesent accumsan accumsan mattis. In euismod urna vel laoreet bibendum. </p> </section> <section> <img src="img/alianzas.png"/> <h1>nosotros</h1> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam convallis luctus tristique. Praesent accumsan accumsan mattis. In euismod urna vel laoreet bibendum. </p> </section> <!--Fin Secciones--> |
En las lineas de código mostradas anteriormente vemos las primeras secciones de la pagina web, ahora debemos agregar las demás debajo de estas para finalizar nuestro archivo con un footer. Podemos ver que agregue etiquetas <h1> para los títulos y también otras imágenes a nuestra carpeta. Debemos escribir las siguientes lineas de código para terminar con el contenido de nuestra pagina web responsive. Agregamos las lineas debajo del cierre de la etiqueta </section>.
<!--Descripcion servicios y empresa--> <div class="clear"></div> <hr /> <article> <img src="img/article.png"/> </article> <aside> <h1>Nuestros Servicios</h1> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam convallis luctus tristique. Praesent accumsan accumsan mattis. In euismod urna vel laoreet bibendum.</p> <ul class="nosotros"> <li><h3>Lorem ipsum</h3></li> <li><h3>Lorem ipsum</h3></li> <li><h3>Lorem ipsum</h3></li> <li><h3>Lorem ipsum</h3></li> <li><h3>Lorem ipsum</h3></li> </ul> </aside> <!--Fin Descripcion servicios y empresa--> <!--secciones 2--> <div class="clear"></div> <hr /> <section> <h1>Lorem ipsum</h1> <img src="img/post1.png"/> <p> Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. </p> </section> <section> <h1>Lorem ipsum</h1> <img src="img/post2.png"/> <p> Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. </p> </section> <section> <h1>Lorem ipsum</h1> <img src="img/post3.png"/> <p> Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. </p> </section> <!--Fin secciones 2--> |
Agregar Pie de pagina a Pagina Web Responsive
Ya hemos añadido la mayor parte del contenido de nuestro sitio, por el momento no se mostrara de manera indicada pero cuando vinculemos los estilos podremos ver el sitio web organizado. Para finalizar debemos añadir un pie de pagina, en este caso tomamos la etiqueta <footer> para agregarla a nuestro archivo. Debajo de la etiqueta de cierre </section> escribimos las siguientes lineas de código.
<!--footer--> <footer> <section> <h3>Nuestra Empresa</h3> <p>Telefono: 333-333-33<br /><br /> Calle 33 # 33 - 33<br /> Bogota, Colombia</p> </section> <section> <h3>Conectate con Nosotros</h3> <ul class="social" style="padding: 0;"> <li><img src="img/facebook.png"/></li> <li><img src="img/instagram.png"/></li> <li><img src="img/linkedin.png"/></li> </ul> </section> <section> <img src="img/logo2.png"/> </section> </footer> <!--footer 2--> <footer class="second"> <p>Copyright © Internetedadinero.com</p> |
Podemos ver que yo he añadido 2 pie de paginas para aprovechar las secciones que teníamos creadas. Si analizan el código entenderán cada una de las etiquetas que utilice para dar «clases» y de esa manera también estilos a diferentes elementos del sitio. Crearemos la hoja de estilos que sera lo ultimo que agreguemos en nuestro sitio para la visualización adecuada de el y ademas sera de esa forma podrás editar el diseño.
Podemos verificar en nuestro navegador que hasta el momento solo se ve el contenido, pero no esta organizado, esa organización se la daremos con los estilos de CSS que añadiremos a continuación. En el archivo «estilos.css» que creamos al principio del articulo anexaremos todos los estilos de diseño de nuestro sitio web. En la siguiente parte del articulo modificaremos la hoja de estilos y explicare cada uno de ellos para que puedas entender mejor cual es su función.
Ver Segunda Parte: Estilos CSS para Web Responsive.
Ver Ejemplo: Ejemplo Tutorial Responsive.
Ver Estrucutra de HTML5 y CSS3: Web Responsive HTML5/CSS3
No olvides comentar si tienes alguna duda y si te ha gustado el articulo compártelo ¡Muchas Gracias!
