OTHispano
¿Quieres reaccionar a este mensaje? Regístrate en el foro con unos pocos clics o inicia sesión para continuar.
OTHispano

Crear Página Web Adaptable a moviles

2 participantes
OTHispano :: Diseño en General :: Tutoriales
Ir abajo
Esparda
Esparda
Diseñador Web
Mensajes Mensajes : 11
http://www.ovicorp.org
+

Crear Página Web Adaptable a moviles Empty Crear Página Web Adaptable a moviles

Lun Jul 07, 2014 10:06 pm
Reputación del mensaje :100% (2 votos)
Versión del tutorial en video aun no completa
Lista de repoducción

Saludos Con este tutorial vamos a crear un sitio web sencillo para una carga eficiente en redes lentas o tomadas "prestadas" Wink 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
Crear Página Web Adaptable a moviles Mini_140530015234342378

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:
[color=#000000]
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
[/color]

Ya que tenemos listas las carpetas creamos el primer archivo el cual llamaremos
Código:
[color=#000000]index.html[/color]
y dentro de este archivo comenzaremos a maquetar nuestra página
Código:
[color=#000000]
<!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ía</a></li>
                <li><a href="#">Blog</a></li>
                <li><a href="#">Contacto</a></li>
            </ul>
        </nav>
    </header>

<footer>
</footer>
</body>
</html>
[/color]
con este pedazo de código comenzamos a diseñar el sitio las partes para aclarar son :
Código:
[color=#000000]<meta name="viewport" content="width=device-width, initial-scale=1.0" />[/color]
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:
[color=#000000]<img src="img/logo.png" />[/color]
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
Crear Página Web Adaptable a moviles Logo

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í
Crear Página Web Adaptable a moviles Mini_140530020150941104

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:
[color=#000000]
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%;
}
[/color]
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:
[color=#000000]background-image: url('../img/fondo.jpg');[/color]
Declaramos la imagen que queremos para el fondo de nuestra página

Código:
[color=#000000]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;[/color]
El color de la letra, su tamaño y el tipo de letra para nuestro sitio

Código:
[color=#000000]line-height: 1.429;
    margin: 0;
    padding: 0;
    text-align: left;[/color]
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í
Crear Página Web Adaptable a moviles Mini_140530022124698241

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:
[color=#000000]
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;
}
[/color]
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:
[color=#000000]
.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;
}[/color]
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:
[color=#000000].mainHeader nav ul {
    list-style: none; 
    margin: 0 auto;
}

.mainHeader nav ul li {
    float: left; 
    display: inline; 
}
[/color]
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:
[color=#000000].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;
}[/color]
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:
[color=#000000].mainHeader img {
    width: 30%;
    height: auto;
    margin: 3% 0;
}
[/color]
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í
Crear Página Web Adaptable a moviles Mini_140530022606955895

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:
[color=#000000]header[/color]
agregamos
Código:
[color=#000000]
<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ó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>
[/color]

Por lo cual nuestro index.html completo quedaría de la siguiente manera
Código:
[color=#000000]
<!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í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ó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>
[/color]

Ahora las partes para describir son las siguientes
Código:
[color=#000000]<div class="mainContent">[/color]
Aquí estará todo el contenido de nuestra página y lo que hagamos con esto afectara a sus margenes y ubicación

Código:
[color=#000000]
<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ó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>[/color]
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:
[color=#000000]escribe lorem y presiona la tecla tab[/color]
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:
[color=#000000]í[/color]
Ahora en está parte
Código:
[color=#000000]
<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ó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>
[/color]

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:
[color=#000000]
<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>    
[/color]
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
Crear Página Web Adaptable a moviles Mini_140530025743230523

Ahora vamos a mejorar la apariencia con la magia del css, primero vamos con el contenido principal
Código:
[color=#000000].mainContent {
    overflow: hidden;
    line-height: 25px;
    border-radius: 5px;
    -moz-border-radius: 5px;
    -webkit-border-radius: 5px;
}[/color]
declaramos las "cajas donde se vera el contenido de cada seccion

Código:
[color=#000000].topcontent {
    background-color: #FFF;
    border-radius: 5px;
    -moz-border-radius: 5px;
    -webkit-border-radius: 5px;    
    padding: 3% 5%;    
    margin-bottom: 3%;
}[/color]
aquí estamos indicando el color de fondo para el contenido uno, su borde redondeado, y los margenes
Código:
[color=#000000].bottomcontent {
    background-color: #FFF;    
    border-radius: 5px;
    -moz-border-radius: 5px;
    -webkit-border-radius: 5px;    
    padding: 3% 5%;
}[/color]
Lo mismo para el contenido 2
Código:
[color=#000000].content {
    width: 68%;
    float: left;
    border-radius: 5px;
    -moz-border-radius: 5px;
    -webkit-border-radius: 5px;    
}[/color]
El formato para el contenido del contenido jejeje Surprised es decir como queramos que se vea lo que colocamos dentro de cada sección principal

Código:
[color=#000000].post-info {
    font-style: italic;
    color: #999;
    font-size: 85%;
}[/color]
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:
[color=#000000].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%;
}[/color]
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
Crear Página Web Adaptable a moviles Mini_140530030614496218

Ahora solo falta agregar el footer a nuestra página
Código:
[color=#000000]
<footer class="mainFooter">
        <p>Copyright ©️ 2014 <a href="http://ovicorp.org">Tutorial hecho por Ovicorp</a></p>
    </footer>
[/color]

y su clase a nuestro archivo css
Código:
[color=#000000]
.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;
}
[/color]

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
Crear Página Web Adaptable a moviles Mini_140530031001549740

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:
[color=#000000]
@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;
    }
}
[/color]

La parte importante de todo esto es la siguiente
Código:
[color=#000000]@media only screen and (min-width : 150px) and (max-width : 780px)[/color]
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:
[color=#000000]
.mainHeader img {
        width: 100%;
        height: auto;
        margin-bottom: 3%;
    }
[/color]
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
Crear Página Web Adaptable a moviles Mini_140530034134993197
Vemos como se empieza a ajustar digamos para tablets o ipads, y ahora para un celular se vería de la siguiente manera
Crear Página Web Adaptable a moviles Mini_140530034322792864
Aside
Crear Página Web Adaptable a moviles Mini_140530034435544306

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:
[color=#000000]
<li><a href="index.html">Inicio</a></li>
                <li><a href="#">Galería</a></li>
                <li><a href="#">Blog</a></li>
                <li><a href="#">Contacto</a></li>
[/color]
Y queremos crear el enlace solo cambiamos el # por el archivo nuevo
Código:
[color=#000000]<li><a href="#">Galería</a></li>[/color]
por
Código:
[color=#000000]<li><a href="galeria.html">Galería</a></li>[/color]

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 Smile
X
X
Miembro
Mensajes Mensajes : 23
+

Crear Página Web Adaptable a moviles Empty Re: Crear Página Web Adaptable a moviles

Lun Jul 07, 2014 10:28 pm
Perfecto tutorial!
Volver arriba
Permisos de este foro:
No puedes responder a temas en este foro.