Scribd Logo
Upload

Welcome to Scribd!

  • Desde La Llegada de HTML5 y CSS3

    Uploaded by

    Valdez Torres
    19 views2 pages
    Html 5 y CSS3

    Original Title

    Desde la Llegada de HTML5 y CSS3

    Copyright

    © © All Rights Reserved

    Available Formats

    DOCX, PDF, TXT or read online from Scribd

    Did you find this document useful?

    Is this content inappropriate?

    Report this Document
    Html 5 y CSS3

    Copyright:

    © All Rights Reserved
    Download as DOCX, PDF, TXT or read online from Scribd
    Flag for inappropriate content
    19 views2 pages

    Desde La Llegada de HTML5 y CSS3

    Uploaded by

    Valdez Torres
    Html 5 y CSS3

    Copyright:

    © All Rights Reserved
    Download as DOCX, PDF, TXT or read online from Scribd
    Flag for inappropriate content
    of 2

    Desde la llegada de HTML5 y CSS3, el Responsive Design o Diseo Sensible es una

    nueva tcnica que se est empezando a utilizar cada vez ms. Consiste bsicamente
    en adaptar los diseos de las pginas web en funcin del tamao de la ventana del
    navegador, cambiando segn esta aumenta o disminuye y sin necesidad de disponer
    varias versiones de CSS o HTML.
    Podis ver un pequeo ejemplo si redimensionis el blog o si lo vis en un iPad; o
    podis flipar si comprobis hasta que punto se puede utilizar esta tcnica entrando
    a Smashing Magazine o en mi pgina personal.
    El ejemplo que os voy a proponer es muy simple y solo cuenta con 3 pasos: Aadir
    un meta tag al header, aadir compatibilidad con navegadores antiguos y realizar
    modificaciones en el CSS.
    1. Aadir el meta tag para la escala
    En primer lugar debemos aadir el siguiente cdigo entre las etiquetas <head> de
    nuestra pgina.
    [html]<meta name="viewport" content="width=device-width, initialscale=1.0">[/html]
    Bsicamente lo que hace esta etiqueta es ajustar el ancho al ancho del dispositivo (sea
    un navegador o un dispositivo mvil) e indicar que no se debe hacer zoom
    inicialmente.
    2. Aadir compatibilidad con navegadores antiguos
    Como las versiones antiguas de Internet Explorer no soportan el meta viewport,
    debemos aadir un javascript que realice su funcin.
    [html]<![if lt IE 9]>
    <script src="http://css3-mediaqueries-js.googlecode.com/svn/trunk/css3mediaqueries.js"></script>
    <![endif]>[/html]
    3. Aplicar modificaciones al CSS
    Ahora tendremos que escribir el cdigo CSS necesario que deseamos modificar el
    funcin de la resolucin. Voy a utilizar como ejemplo el CSS que yo he utilizado para
    desplazar la barra lateral a debajo del contenido cuando la resolucin del dispositivo
    est entre 700px y 1000px (es decir, para que funcione en un iPad).
    El funcionamiento es el mismo que si utilizsemos un condicional.
    [css]
    @media screen and (min-width: 700px) and (max-width: 1000px) {
    /*Todo lo que aadamos aqu se utilizar solo en resoluciones X, donde
    700px<=X<=1000px*/
    }[/css]
    Ya con el nuevo cdigo CSS para desplazar la barra lateral para que no permita
    elementos flotantes a los lados y ajustar toda la maquetacin a 700px tendramos algo
    como lo siguiente:
    [css]
    @media screen and (min-width: 700px) and (max-width: 1000px) {
    #container{
    width: 700px;
    }
    #sidebar-content{
    clear: both;
    width: 100%;
    float:none;
    }
    }[/css]
    Tened en cuenta que todo el cdigo se encuentra dentro del condicional y que
    podramos jugar con los valores de este de tal manera que mostremos un cdigo a

    anchuras menores, mayores o entre otros dos valores. Las posibilidades son bastante
    extensas.

    You might also like