Publicado el Deja un comentario

Crea tu Web Responsive 2

CSS, dando formato a la web

Diseño para móvil

Vamos a crear donde tenemos grabada
nuestra web index.html una carpeta que llamaremos “css” y dentro de esta
carpeta crearemos un archivo llamado “estilos.css”.
En el “head” de index, os recuerdo que
ya incluimos la siguiente línea: <link
rel=”stylesheet” href=”css/estilos.css”
type=”text/css”/>
, esta línea enlaza al archivo de estilos
que vamos a preparar a continuación.
Para comenzar con el formato de la
web, personalmente prefiero primero prepararla para móvil y después para
escritorio, por lo que debemos añadir la siguiente línea al “head”: <meta name=”viewport”
content=”width=device-width, initial-scale=1″>.
En el archivo estilos.css añadimos lo
siguiente:
@media screen and
(min-width:480px){}
@media screen and
(min-width:767px){}
@media screen and
(min-width:950px){}
Con lo que podemos poner dentro de las
llaves de cada uno los estilos y atributos para móvil, tablet y PC’s, debido al
minimo de ancho que especificamos en pixeles (480, 767 y 950).
Ahora vamos a diferenciar las partes
de nuestra web añadiendo colores llamativos al CSS para ver claramente las
partes, una vez que situemos todo bien pasaremos a poner una gama de colores menos
llamativa.
header{
         background:cyan;
}
nav{
         background:yellow;
}
section{
         background:brown;
}
article{
         background:red;
}
aside{
         background:blue;
}
footer{
         background:pink;
}
@media screen and
(min-width:480px){
}
@media screen and (min-width:767px){
header{
         background:green;
         }
nav{
         background:cyan;
}
section{
         background:pink;
}
article{
         background:yellow;
}
aside{
         background:red;
}
footer{
         background:brown;
}
}
@media screen and
(min-width:950px){      
}
Con el código anterior puesto en el
archivo css, una vez grabado, podréis observar, al ejecutar la web index.html
en el navegador, que al disminuir el tamaño los colores de fondo cambiaran. Con
esto hemos conseguido que al cambiar el tamaño de la visualización cambien los
colores de fondo, ahora vamos a cambiar también la disposición de los bloques
según se vean en un dispositivo u otro, para ello cambiamos el código css a:
*{
         margin:0px;
         padding:0px;
}
header,nav,section,article,aside,footer{
         display:block;
}
header{
         background:cyan;
}
nav{
         background:yellow;
}
section{
         background:brown;
}
article{
         background:red;
}
aside{
         background:blue;
}
footer{
         background:pink;
}
@media screen and
(min-width:480px){
}
@media screen and
(min-width:767px){
header{
         background:green;
         }
nav{
         background:cyan;
}
section{
         background:pink;
         display:inline-block;
         width:74%;
}
article{
         background:yellow;      
}
aside{
         background:red;
         display:inline-block;
         vertical-align:top;
         width:23%;        
}
footer{
         background:brown;
}
}
@media screen and
(min-width:950px){      
}
Quedando nuestra web en modo
escritorio:

Y en modo móvil:

Os explico las modificaciones en este
código, lo primero que cambiamos es:
*{
         margin:0px;
         padding:0px;
}
header,nav,section,article,aside,footer{
         display:block;
}
Con esto indicamos con el “*”
(selector universal) que eliminamos todos los márgenes y paddings, el padding
es como un margen interior.
Despues separamos todos los
identificadores usados con “,” para darles a todos formato para que actúen como
bloques y se visualicen uno debajo del otro según el orden que tienen en el
html.
Seguidamente, dentro del apartado css
para las tablets minimo de ancho 767px, introducimos el siguiente código:
section{
         background:pink;
         display:inline-block;
         width:74%;
}
article{
         background:yellow;      
}
aside{
         background:red;
         display:inline-block;
         vertical-align:top;
         width:23%;
}
Como podeis ver, el primer cambio es
que en vez de visualizarse en bloque como indicamos anteriormente, ahora
indicamos que se visualicen en línea e indicamos un ancho en porcentaje para
que quepan las dos partes, alineando el “aside” verticalmente arriba (top). El
ancho se puede indicar mediante pixeles, os recomiendo hacer cambios y probar.
Con esto ya tenemos la web preparada
para varios dispositivos, ahora pasaremos a darle un formato mejor.
En la siguiente entrada profundizare en el formato CSS para cada componente de nuestra web.
Gracias.
Please follow and like us:
Publicado el Deja un comentario

Plantilla basica HTML5 con CSS

Os indico codigo basico HTML5 desde donde comenzar a modificar para crear nuestros propios archivos, segun los puntos vistos hasta ahora en este blog.
El codigo de partida HTML5 es:

<!DOCTYPE html>
<html lang=”es”>
<head>
<meta charset=”utf-8″>
<meta name=”description” content=”Ejemplo Html5″>
<meta name=”keywords” content=”HTML5, CSS”>
<title>Plantilla de html5</title>
<link rel=”stylesheet” href=”estilo.css”>
</head>
<body>
<header>
<h1>Titulo principal de la web</h1>
</header>
<nav>
<ul>
<li>inicio</li>
<li>acerca de</li>
<li>contacto</li>
<li>blog</li>
</ul>
</nav>
<section>
<article>
<header>
<hgroup>
<h1>Titulo primer mensaje</h1>
<h2>Subtitulo del primer mensaje</h2>
</hgroup>
</header>
<p>Texto del primer mensaje</p>
<figure>
<img src=”#” alt=”imagen”>
<figcaption>Imagen del primer mensaje</figcaption>
</figure>
<footer>
<p>comentarios pie primer mensaje</p>
</footer>
</article>
<article>
<header>
<hgroup>
<h1>Titulo segundo mensaje</h1>
<h2>Subtitulo del segundo mensaje</h2>
</hgroup>
</header>
<p>Texto del segundo mensaje</p>
<figure>
<img src=”#” alt=”imagen2″>
<figcaption>Imagen del segundo mensaje</figcaption>
</figure>
<footer>
<p>comentarios pie segundo mensaje</p>
</footer>
</article>
</section>
<aside>
<blockquote>Cita en barra lateral</blockquote>
</aside>
<footer><p>Derechos reservados 2016</p></footer>
</body>
</html>

El codigo basico de la hoja de estilos o CSS (estilo.css) seria asi:

 *{
    margin: 0 auto;
    max-width:960px;
}
header h1{

    background-color: grey;
    margin:10px;  
}
nav {
  
}
section{
    float:left;
    width: 70%;
    padding: 5px;
}
aside {
    float:right;
    width: 25%;
    padding: 5px;
    background-color: grey;
    border-radius: 15px 20px;
}
footer{
    clear:both;
    width: 100%;
    padding: 5px;
    margin: 5px;
    background-color: grey;
    border-radius: 15px 20px;
}

 Con lo que obtendriamos la siguiente web:

Que es el punto de partida para comenzar a desarrollar nuestra web, sirviendo como ejemplo al que poder modificar o añadir todo lo que se nos ocurra.
Espero os sea util. Gracias.

Please follow and like us: