Comunidad de diseño web y desarrollo en internet online

Crear Página Web HTML 5 ajustable a moviles

Citar            
MensajeEscrito el 30 May 2014 01:46 am
Saludos Con este tutorial vamos a crear un sitio web sencillo para una carga eficiente en redes lentas o tomadas "prestadas" ;) desde nuestros dispositivos móviles, ¿que es lo que necesitamos?

-Sublime Text2 o editor de texto al gusto
-Crear una carpeta para nuestros archivos
-Imágenes para nuestro sitio
-Buena música para escuchar mientras trabajamos, les recomiendo mi radio www.ovicorp.org claro cuando la tenga en vivo jeje por el momento esta en mantenimiento aunque dependiendo de la fecha que leas este post quizá ya este on

Y pues empezamos

Primero creamos nuestra carpeta para el proyecto


Dentro de está carpeta vamos a crear algunas carpetas mas:
Cada carpeta la puedes llamar como quieras no es necesario que tengan el mismo nombre

Código :

img: está carpeta tendrá las imágenes de nuestro sitio
css: aquí se guardaran las hojas de estilo de nuestro sitio
js: dentro de está carpeta estarán los archivos js


Ya que tenemos listas las carpetas creamos el primer archivo el cual llamaremos

Código :

index.html

y dentro de este archivo comenzaremos a maquetar nuestra página

Código HTML :

<!DOCTYPE html>
<html lang="es">
<head>
   <title>Tutorial Web</title>
   <meta charset="utf-8" />
   <link rel="stylesheet" href="css/estilo.css" />
   <meta name="viewport" content="width=device-width, initial-scale=1.0" />
</head>
<body class="body">
   <header class="mainHeader">
      <img src="img/logo.png" />
      <nav>
         <ul>
            <li><a href="index.html">Inicio</a></li>
            <li><a href="#">Galer&iacute;a</a></li>
            <li><a href="#">Blog</a></li>
            <li><a href="#">Contacto</a></li>
         </ul>
      </nav>
   </header>

<footer>
</footer>
</body>
</html>

con este pedazo de código comenzamos a diseñar el sitio las partes para aclarar son :

Código :

<meta name="viewport" content="width=device-width, initial-scale=1.0" />

esta parte hace que nuestra página tome el ancho del dispositivo donde se esta viendo y se ajuste a el aunque claro no es todo para que se ajuste por completo aún faltan las media queries.

Código :

<img src="img/logo.png" />

Está parte es la que llama a nuestro logotipo a la página que en mi caso se llama logo.png recuerda que la imagen va dentro de la carpeta img o como la hayas llamado


Lo demás si tienes nociones básicas de HTML te darás cuenta que no es nada del otro mundo y una vez escrito ese código y abrimos el archivo con nuestro navegador veremos algo así


A continuación entramos a la carpeta css y creamos un archivo llamado estilo.css para comenzar a modificar el diseño y empezamos a declarar algunos valores:

Código CSS :

body {
   background-image: url('../img/fondo.jpg');
   color: #000305;
   font-size: 87.5%; /* Base de la  font size: 14px */
   font-family: 'Trebuchet MS', Trebuchet, 'Lucida Sans Unicode', 'Lucida Grande', 'Lucida Sans', Arial, sans-serif;
   line-height: 1.429;
   margin: 0;
   padding: 0;
   text-align: left;
   }
   
.body {
   clear: both; 
   margin: 0 auto; 
   width: 70%;
}

Te preguntaras ¿WTF porqué hay 2 bodys en el código? Simple si te das cuenta el primer body es el de todo el formato general de la página y el segundo que tiene un punto .body es la clase que le agregamos a nuestro body para hacer ciertos cambios que no afecten a todo.

Lo que esta pasando en está parte de css es:

Código :

background-image: url('../img/fondo.jpg');

Declaramos la imagen que queremos para el fondo de nuestra página

Código :

color: #000305;
   font-size: 87.5%; /* Base de la  font size: 14px */
   font-family: 'Trebuchet MS', Trebuchet, 'Lucida Sans Unicode', 'Lucida Grande', 'Lucida Sans', Arial, sans-serif;

El color de la letra, su tamaño y el tipo de letra para nuestro sitio

Código :

line-height: 1.429;
   margin: 0;
   padding: 0;
   text-align: left;

Espacio entre lineas, margenes y alinación.

Si se dan cuneta estamos usando porcentajes en lugar de pixeles y esto es para mantener el estándar de HTML5. Después de haber hecho esta parte nuestra página se vera así


Ahora vamos a cambiar el diseño para otros valores que ocuparemos mas adelante, para los enlaces y para la navegación y cabecera que ya tenemos creada

Código CSS :

h2 {font-size: 1.571em}   /* 22px */
h3 {font-size: 1.429em}   /* 20px */
h4 {font-size: 1.286em}   /* 18px */
h5 {font-size: 1.143em}   /* 16px */
h6 {font-size: 1em}      /* 14px */

h2, h3, h4, h5, h6 {
   font-weight: 400;
   line-height: 1.1;
   margin-bottom: .8em;
}

a {
   outline: 0;
   }

a img {
   border: 0px; 
   text-decoration: none;
}

a:link, a:visited {
   color: #CF5C3F;
   padding: 0 1px;
   text-decoration: none;
}

a:hover, a:active {
   background-color: #CF5C3F;
   color: #fff;
   text-decoration: none;
}

Aquí estamos diciendo las características que tendrán los encabezados de la página es decir todo lo que este dentro de las etiquetas "h". Y las características para los enlaces. Ahora vamos a declarar la sección de menú o mejor dicho el nav

Código CSS :

.mainHeader nav {
   background: #666;
   font-size: 1.143em;
   height: 40px;
   line-height: 30px;
   margin: 0 auto 30px auto;
   text-align: center;
   border-radius: 5px;
   -moz-border-radius: 5px;
   -webkit-border-radius: 5px;
}

Estamos diciendo el color de fondo, el tamño de la letra, su altura, los espacios de línea, el margen, la alineación y el borde redondeado, ahora la parte de -moz- y -webkit- ya casi no es necesaria puesto que ya las nuevas versiones de navegadores interpretan correctamente el border radius aunque lo dejamos por si alguien usa alguna versión vieja

Código CSS :

.mainHeader nav ul {
   list-style: none; 
   margin: 0 auto;
}

.mainHeader nav ul li {
   float: left; 
   display: inline; 
}

Estamos declarando el estilo para nuestros enlaces dentro del nav para que no sean el clasico azul feo con su subrayado y puntos

Código CSS :

.mainHeader nav a:link, .mainHeader nav a:visited {
   color: #fff;
   display: inline-block;
   height: 30px;
   padding: 5px 23px;
   text-decoration: none;
}
.mainHeader nav a:hover, .mainHeader nav a:active,
.mainHeader nav .active a:link, .mainHeader nav .active a:visited {
   background: #CF5C3F;
   color: #fff;
   text-shadow: none !important;
}
   
.mainHeader nav li a {
   border-radius: 5px;
   -moz-border-radius: 5px;
   -webkit-border-radius: 5px;
}

Aquí agregamos el estilo a nuestro menú diciéndole que queremos que se muestre en linea, su color de fondo, color de letra y ligero toque de sombra al texto con text-shadow y en la opción hover el color que queremos que tenga cuando el mouse este sobre él

Código CSS :

.mainHeader img {
   width: 30%;
   height: auto;
   margin: 3% 0;
}

Estamos diciendo como queremos que se comporte nuestra imagen de logotipo para el menú, el 30% indica el porcentaje que tomará dentro de esta clase, puedes cambiarlo al gusto. Y una vez hecho esto la página se vera así


Ahora vamos agregarle las secciones y asides a nuestro sitio. Las secciones son las partes principales de nuestra página donde se mostrara todo el contenido principal del sitio (valga la redundancia) y los asides son las partes donde podremos poner anuncios, públicidad, redes sociales, etc

Y después de la etiqueta

Código :

header

agregamos

Código HTML :

<div class="mainContent">
      <div class="content">   
            <article class="topcontent">   
               <header>
                  <h2><a href="#" rel="bookmark" title="titulo para el enlace">Primera parte del contenido</a></h2>
               </header>
               
               <footer>
                  <p class="post-info">pie de la publicaci&oacute;n</p>
               </footer>
               
               <content>
                  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. </p>
                  <p>At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum deleniti atque corrupti quos dolores et quas molestias excepturi sint occaecati cupiditate non provident, similique sunt in culpa qui officia deserunt mollitia animi, id est laborum et dolorum fuga. Et harum quidem rerum facilis est et expedita distinctio.</p>
               </content>
               
            </article>

            <article class="bottomcontent">   
               <header>
                  <h2><a href="#" rel="bookmark" title="titulo segundo enlace">Segunda parte del contenido</a></h2>
               </header>

               <footer>
                  <p class="post-info">Pie de la segunda parte</p>
               </footer>
               
               <content>
                  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.</p>
               </content>
            
            </article>
      </div>
         
            <aside class="top-sidebar">
               <article>
               <h2>Aside 1</h2>
               <p>Contenido de aside puede llevar publicidad, redes sociales, etc</p>
                </article>
            </aside>
            
            <aside class="middle-sidebar">
               <article>
               <h2>Aside 2</h2>
               <p>Contenido de aside puede llevar publicidad, redes sociales, etc</p>
                </article>
            </aside>            

            <aside class="bottom-sidebar">
               <article>
               <h2>Aside 3</h2>
               <p>Contenido de aside puede llevar publicidad, redes sociales, etc</p>
                </article>
            </aside>   
   </div>


Por lo cual nuestro index.html completo quedaría de la siguiente manera

Código HTML :

<!DOCTYPE html>
<html lang="es">
<head>
   <title>Tutorial Web</title>
   <meta charset="utf-8" />
   <link rel="stylesheet" href="css/estilo.css" />
   <meta name="viewport" content="width=device-width, initial-scale=1.0" />
</head>
<body class="body">
   <header class="mainHeader">
      <img src="img/logo.png" />
      <nav>
         <ul>
            <li><a href="index.html">Inicio</a></li>
            <li><a href="#">Galer&iacute;a</a></li>
            <li><a href="#">Blog</a></li>
            <li><a href="#">Contacto</a></li>
         </ul>
      </nav>
   </header>
   <div class="mainContent">
      <div class="content">   
            <article class="topcontent">   
               <header>
                  <h2><a href="#" rel="bookmark" title="titulo para el enlace">Primera parte del contenido</a></h2>
               </header>
               
               <footer>
                  <p class="post-info">pie de la publicaci&oacute;n</p>
               </footer>
               
               <content>
                  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. </p>
                  <p>At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum deleniti atque corrupti quos dolores et quas molestias excepturi sint occaecati cupiditate non provident, similique sunt in culpa qui officia deserunt mollitia animi, id est laborum et dolorum fuga. Et harum quidem rerum facilis est et expedita distinctio.</p>
               </content>
               
            </article>

            <article class="bottomcontent">   
               <header>
                  <h2><a href="#" rel="bookmark" title="titulo segundo enlace">Segunda parte del contenido</a></h2>
               </header>

               <footer>
                  <p class="post-info">Pie de la segunda parte</p>
               </footer>
               
               <content>
                  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.</p>
               </content>
            
            </article>
      </div>
         
            <aside class="top-sidebar">
               <article>
               <h2>Aside 1</h2>
               <p>Contenido de aside puede llevar publicidad, redes sociales, etc</p>
                </article>
            </aside>
            
            <aside class="middle-sidebar">
               <article>
               <h2>Aside 2</h2>
               <p>Contenido de aside puede llevar publicidad, redes sociales, etc</p>
                </article>
            </aside>            

            <aside class="bottom-sidebar">
               <article>
               <h2>Aside 3</h2>
               <p>Contenido de aside puede llevar publicidad, redes sociales, etc</p>
                </article>
            </aside>   
   </div>

<footer>
</footer>
</body>
</html>


Ahora las partes para describir son las siguientes

Código :

<div class="mainContent">

Aquí estará todo el contenido de nuestra página y lo que hagamos con esto afectara a sus margenes y ubicación

Código :

<div class="content">   
            <article class="topcontent">   
               <header>
                  <h2><a href="#" rel="bookmark" title="titulo para el enlace">Primera parte del contenido</a></h2>
               </header>
               
               <footer>
                  <p class="post-info">pie de la publicaci&oacute;n</p>
               </footer>
               
               <content>
                  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. </p>
                  <p>At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum deleniti atque corrupti quos dolores et quas molestias excepturi sint occaecati cupiditate non provident, similique sunt in culpa qui officia deserunt mollitia animi, id est laborum et dolorum fuga. Et harum quidem rerum facilis est et expedita distinctio.</p>
               </content>
               
            </article>

Estamos creando la primera parte de la página ya que la dividiremos en 2 secciones principales aqui puedes comenzar a escribir tu contenido o si quieres hacer prueba contexto lorem ipsum y estas usando sublime text2 solo

Código :

escribe lorem y presiona la tecla tab

Recuerda que los acentos no los ponemos cómo si fueran normales para escribir un acento en alguna letra tienes que empezar con el símbolo & después la letra que quieres acentuar y finalizar con "acute;" un ejemplo para acentuar la "i" sería

Código :

&iacute;

Ahora en está parte

Código :

<div class="content">   
            <article class="topcontent">   
               <header>
                  <h2><a href="#" rel="bookmark" title="titulo para el enlace">Primera parte del contenido</a></h2>
               </header>
               
               <footer>
                  <p class="post-info">pie de la publicaci&oacute;n</p>
               </footer>
               
               <content>
                  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. </p>
                  <p>At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum deleniti atque corrupti quos dolores et quas molestias excepturi sint occaecati cupiditate non provident, similique sunt in culpa qui officia deserunt mollitia animi, id est laborum et dolorum fuga. Et harum quidem rerum facilis est et expedita distinctio.</p>
               </content>
               
            </article>


Estamos declarando la segunda parte del contenido de la página y para configurar es exactamente lo mismo que la primera.

Lo siguiente son los "asides"

Código :

<aside class="top-sidebar">
               <article>
               <h2>Aside 1</h2>
               <p>Contenido de aside puede llevar publicidad, redes sociales, etc</p>
                </article>
            </aside>
            
            <aside class="middle-sidebar">
               <article>
               <h2>Aside 2</h2>
               <p>Contenido de aside puede llevar publicidad, redes sociales, etc</p>
                </article>
            </aside>            

            <aside class="bottom-sidebar">
               <article>
               <h2>Aside 3</h2>
               <p>Contenido de aside puede llevar publicidad, redes sociales, etc</p>
                </article>
            </aside>   

Aquí es simple solo el titulo del aside y su contenido desde texto o el código de enlace a tu pagina de facebook comentarios o twitts.

Guardamos y nuestra pagina se vera así (yo quite mi imagen de fondo para la captura de pantalla puesto que como es oscuro las letras no se veían a ustedes se les tiene que ver con el fondo que hayan colocado


Ahora vamos a mejorar la apariencia con la magia del css, primero vamos con el contenido principal

Código CSS :

.mainContent {
   overflow: hidden;
   line-height: 25px;
   border-radius: 5px;
   -moz-border-radius: 5px;
   -webkit-border-radius: 5px;
}

declaramos las "cajas donde se vera el contenido de cada seccion

Código CSS :

.topcontent {
   background-color: #FFF;
   border-radius: 5px;
   -moz-border-radius: 5px;
   -webkit-border-radius: 5px;   
   padding: 3% 5%;   
   margin-bottom: 3%;
}

aquí estamos indicando el color de fondo para el contenido uno, su borde redondeado, y los margenes

Código CSS :

.bottomcontent {
   background-color: #FFF;   
   border-radius: 5px;
   -moz-border-radius: 5px;
   -webkit-border-radius: 5px;   
   padding: 3% 5%;
}

Lo mismo para el contenido 2

Código CSS :

.content {
   width: 68%;
   float: left;
   border-radius: 5px;
   -moz-border-radius: 5px;
   -webkit-border-radius: 5px;   
}

El formato para el contenido del contenido jejeje :o es decir como queramos que se vea lo que colocamos dentro de cada sección principal

Código CSS :

.post-info {
   font-style: italic;
   color: #999;
   font-size: 85%;
}

Como queramos que se vea el footer de cada sección su color, tamaño y tipo de letra
Ahora siguen los aside

Código CSS :

.top-sidebar {
   width: 24%;
   float: left;
   margin-left: 2%;
   border-radius: 5px;
   -moz-border-radius: 5px;
   -webkit-border-radius: 5px;   
   background-color: #FFF;   
   padding: 2% 3%;
   margin-bottom: 2%;
}

.middle-sidebar {
   width: 24%;
   float: left;
   margin-left: 2%;
   border-radius: 5px;
   -moz-border-radius: 5px;
   -webkit-border-radius: 5px;   
   background-color: #FFF;   
   padding: 2% 3%;
   margin-bottom: 2%;
}

.bottom-sidebar {
   width: 24%;
   float: left;
   margin-left: 2%;
   border-radius: 5px;
   -moz-border-radius: 5px;
   -webkit-border-radius: 5px;   
   background-color: #FFF;   
   padding: 2% 3%;
}

declaramos su ancho en pantalla, su ubicación con float, su margen y borde, color de fondo y margen interno
una vez hecho estós arreglos como resultado nuestro sitio ya tendrá está forma


Ahora solo falta agregar el footer a nuestra página

Código HTML :

<footer class="mainFooter">
      <p>Copyright &copy; 2014 <a href="http://ovicorp.org">Tutorial hecho por Ovicorp</a></p>
   </footer>


y su clase a nuestro archivo css

Código CSS :

.mainFooter {
   width: 100%;
   float: left;
   margin-top: 2%;
   margin-bottom: 2%;
   padding-left: 0;
   background-color: #666;
   border-radius: 5px;
   -moz-border-radius: 5px;
   -webkit-border-radius: 5px;   
   color: #FFF;   
}

.mainFooter p {
   width: 91%;
   margin: 2% auto;
}


Como ven aquí ya no hago mucha mención puesto que son cosas que ya están explicadas y nuestro footer sería el siguiente


Desde aquí se puede decir que ya tenemos casi terminada la página ahora nos faltan las media queries que serán las responsables de que se vea perfectamente el contenido desde cualquier dispositivo para mayor información sobre ellas puedes leer Que son las media queries

Éstas media queries se declaran nuestro archivo css y van al final de lo que ya hemos trabajado, para no extender demasiado este tutorial el cual ya es muy largo dejare resumido en el siguiente codigo

Código CSS :

@media only screen and (min-width : 150px) and (max-width : 780px)
{
   .body {
      clear: both; 
      margin: 0 auto; 
      width: 90%;
      font-size: 90%;
   }
   
   .mainHeader nav {
      background: #666;
      font-size: 1.143em;
      height: 160px;
      line-height: 30px;
      margin-bottom: 0;
      border-radius: 5px;
      -moz-border-radius: 5px;
      -webkit-border-radius: 5px;
   }
      
   .mainHeader nav ul {
      list-style: none; 
      margin: 0 auto;
      padding-left: 0;
   }
   
   .mainHeader nav li {
      margin-left: 0 auto;
      width: 100%;
   }
   
   .mainHeader nav a:link, .mainHeader nav a:visited {
      color: #FFF;
      display: block;
      height: 30px;
      padding: 5px 0;
      text-decoration: none;
   }
   
   .mainHeader nav a:active,
   .mainHeader nav .active a:link, .mainHeader nav .active a:visited {
      background: #CF5C3F;
      color: #fff;
      text-shadow: none !important;
   }
      
   .mainHeader nav li a {
      border-radius: 5px;
      -moz-border-radius: 5px;
      -webkit-border-radius: 5px;
         
      border-radius: 5px;
      -moz-border-radius: 5px;
      -webkit-border-radius: 5px;
   }
   
   .mainHeader img {
      width: 100%;
      height: auto;
      margin-bottom: 3%;
   }
   
   .mainContent {
      overflow: hidden;
      line-height: 25px;
      border-radius: 5px;
      -moz-border-radius: 5px;
      -webkit-border-radius: 5px;
      margin-top: 4%;
      margin-bottom: 2%;
   }
   
   .topcontent {
      background-color: #FFF;
      border-radius: 5px;
      -moz-border-radius: 5px;
      -webkit-border-radius: 5px;   
      padding: 2% 5%;
      margin-bottom: 4%;
   }
   
   .bottomcontent {
      background-color: #FFF;   
      border-radius: 5px;
      -moz-border-radius: 5px;
      -webkit-border-radius: 5px;   
      padding: 2% 5%;
   }
   
   .content {
      width: 100%;
      float: left;
      border-radius: 5px;
      -moz-border-radius: 5px;
      -webkit-border-radius: 5px;   
   }   

   .post-info {
      display: none;
   }
   
   .top-sidebar {
      width: 86%;
      float: left;
      border-radius: 5px;
      -moz-border-radius: 5px;
      -webkit-border-radius: 5px;   
      background-color: #FFF;   
      margin-top: 4%;
      margin-left: 0;
      padding: 0 7%;
      margin-bottom: 0;      
   }
   
   .top-sidebar p {
      width: 90%;
   }

   .middle-sidebar {
      width: 86%;
      float: left;
      border-radius: 5px;
      -moz-border-radius: 5px;
      -webkit-border-radius: 5px;   
      background-color: #FFF;   
      margin-top: 4%;
      margin-left: 0;
      padding: 0 7%;
      margin-bottom: 0;   
   }
   
   .middle-sidebar p {
      width: 90%;
   }
   
   .bottom-sidebar {
      width: 86%;
      float: left;
      border-radius: 5px;
      -moz-border-radius: 5px;
      -webkit-border-radius: 5px;   
      background-color: #FFF;   
      margin-top: 4%;
      margin-left: 0%;
      padding: 0 7%;
      margin-bottom: 1%;
   }
   
   .bottom-sidebar p {
      width: 90%;
   }
      
   .mainFooter {
      width: 100%;
      float: left;
      margin: 2% 0;
      padding-left: 0;
      background-color: #666;
      border-radius: 5px;
      -moz-border-radius: 5px;
      -webkit-border-radius: 5px;   
      color: #FFF;   
   }
   
   .mainFooter p {
      width: 86%;
      margin: 2% auto;
   }
}


La parte importante de todo esto es la siguiente

Código :

@media only screen and (min-width : 150px) and (max-width : 780px)

Aquí estamos diciendo que dependiendo de la pantalla del aparato que este visualizando nuestro sitio se ajustara todo por ejemplo aquí decimos que es un mino de 150px a un máximo de 780.

Las distintas medidas las puedes encontrar en el enlace que deje arriba no pongo todas porque no se en que fecha estés viendo el tutorial.

Ahora si te das cuenta lo que se encuentra en las queries es como si volviéramos a declarar el archivo css y en parte es así ya que estamos diciendo que en ciertas medidas de la pantalla cambiara de margenes, de colores, de tamañano de letra, etc, para dar un ejemplo corto sería

Código :

.mainHeader img {
      width: 100%;
      height: auto;
      margin-bottom: 3%;
   }

Aquí decimos que al entrar a la página con un dispositivo con las medidas de pantalla definidas en la querie tomara el 100% de ancho de pantalla ajustándose asi y lo que veremos de resultado será lo siguiente

Vemos como se empieza a ajustar digamos para tablets o ipads, y ahora para un celular se vería de la siguiente manera

Aside


Ahora para editar las siguientes partes del sitio es cosa super sencilla solo es cuestión de crear un nuevo archivo y modificarlo en nuestro menú por ejemplo si tenemos ésto:

Código HTML :

<li><a href="index.html">Inicio</a></li>
            <li><a href="#">Galer&iacute;a</a></li>
            <li><a href="#">Blog</a></li>
            <li><a href="#">Contacto</a></li>

Y queremos crear el enlace solo cambiamos el # por el archivo nuevo

Código :

<li><a href="#">Galer&iacute;a</a></li>

por

Código :

<li><a href="galeria.html">Galer&iacute;a</a></li>


Y para facilitarnos aun mas la vida solo copiamos el archivo index.html y lo renombrados galeria.html ocmo en el ejemplo de arriba y solo borramos el contenido de los content principales por el nuevo contenido que queremos que en este caso sería agregar la galería de imagenes

Hasta aquí dejamos listo el tutorial del sitio web espero que les haya servido y ayudado a aclarar algunas dudas o a expandirlas mas jejeje

Cualquier cosa en los comentarios. Y pues los invito a pasar por mi sitio y hacer uso de la tienda online si gustan o si ya esta on la radio cuando veas este tutorial a escucharnos y pedir tus canciones :)

Por Ovicorp

5 de clabLevel



 

Learning

chrome
Citar            
MensajeEscrito el 30 May 2014 01:58 am
Disculpen que comente mi tutorial es que no encontré algún botón de edición sin darme cuenta lo publique en general si algún mod me podría hacer favor de mover el post a la sección correcta muchas gracias :)

Por Ovicorp

5 de clabLevel



 

Learning

chrome
Citar            
MensajeEscrito el 30 May 2014 07:27 pm

Ovicorp escribió:

Disculpen que comente mi tutorial es que no encontré algún botón de edición sin darme cuenta lo publique en general si algún mod me podría hacer favor de mover el post a la sección correcta muchas gracias :)


gracias. ahi lo muevo y reviso.

Por Mariux

BOFH

7756 de clabLevel

28 tutoriales
15 articulos

Genero:Femenino   Héroes Editores

Diseñadora & ilustradora

chrome
Citar            
MensajeEscrito el 31 May 2014 03:04 am
ok muchas gracias

Por Ovicorp

5 de clabLevel



 

Learning

chrome

 

Cristalab BabyBlue v4 + V4 © 2011 Cristalab
Powered by ClabEngines v4, HTML5, love and ponies.