Scribd Logo
Upload

Welcome to Scribd!

  • 2 - Desarrollo de Aplicaciones Web para Dispositivos Móviles - Diseño Adaptable PDF

    Uploaded by

    Avraham Jurado
    29 views15 pages

    Original Title

    2 - Desarrollo de Aplicaciones Web para Dispositivos Móviles - Diseño Adaptable.pdf

    Copyright

    © © All Rights Reserved

    Available Formats

    PDF, TXT or read online from Scribd

    Did you find this document useful?

    Is this content inappropriate?

    Report this Document

    Copyright:

    © All Rights Reserved
    Download as PDF, TXT or read online from Scribd
    Flag for inappropriate content
    29 views15 pages

    2 - Desarrollo de Aplicaciones Web para Dispositivos Móviles - Diseño Adaptable PDF

    Uploaded by

    Avraham Jurado

    Copyright:

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

    Diseño web adaptable

    Lic. Lisandro Delía


    III-LIDI – Facultad de Informática
    UNLP
    Diseño web adaptable
    Corresponde a la creación de sitios web que puedan
    ser visualizadas perfectamente en todo tipo de
    dispositivos, desde computadoras de escritorio
    hasta smartphones o tablets.

    Con este tipo de diseño no se necesita tener una


    versión para cada dispositivo, una solo sitio se
    adapta a todos ellos.

    2
    Funcionamiento
    En lugar de construir el sitio para cada tipo de
    dispositivo (smartphone, tablet, computadora de
    escritorio, laptop, smart TV), se crea una única web
    utilizando CSS3 media queries y un layout con
    imágenes flexibles.

    De esta forma, el sitio detecta desde qué clase de


    dispositivo está accediendo el usuario y muestra la
    versión más optimizada para ese medio,
    reorganizando los elementos de la web e incluso
    discriminando algunos de ellos (menos imágenes,
    más ligeras, redistribución de las columnas en el
    diseño, menos texto, etc.).

    3
    Actividad 1: Sitios con diseño web adaptable

    Conoce algún sitio que esté desarrollado según


    este diseño?

    Encuentre 3 sitios con diseño web adaptable y


    pruebe diferencias de visualización según el
    tamaño del navegador

    4
    Imágenes Fluidas

    Uno de los puntos críticos a la hora de aplicar este


    diseño son las imágenes.

    El objetivo es que su tamaño se adapte al


    dispositivo, evitando tener que hacer scroll
    horizontal en resoluciones inferiores al tamaño de
    la imagen

    5
    Actividad 2: Imágenes Fluidas

    Descargar una imagen con un tamaño considerado


    e incluirla en un archivo html.

    <body>
    <img src='responsive-web-design.png' />
    </body>

    Probar comportamiento al cambiar el ancho del


    navegador

    La imagen no se adapta al tamaño del


    navegador, y produce scroll
    6
    Actividad 2: Imágenes Fluidas
    Vamos a declarar que dicha imagen tenga un ancho relativo.
    En este caso del 100%.

    <head>
    …..
    <style>
    img { max-width: 100%; height: auto; }
    </style>
    </head>

    Probar comportamiento al cambiar el ancho del navegador

    La imagen se adapta al tamaño del navegador y no hay scroll


    cuando el ancho del navegador es menor al de la imagen.

    7
    CSS Media Queries

    Reglas CSS que se aplican según condiciones

    @media screen and (max-width: 980px){


    // reglas css
    }

    Hay diversas condiciones a evaluar:


    - tamaño: ancho, alto
    - orientación: landscape, portrait
    - resoluciones
    - cantidad de colores, etc

    8
    Actividad 3: CSS Media Queries
    Crear un html con el siguiente código:
    <head>
    ...
    <style>
    #bloque2{
    background-color: blue;
    }
    #bloque3{
    background-color: green;
    }
    </style>
    </head>
    <body>
    <span id='bloque1'>
    Este bloque se muestra en gris en dispositivos grandes. En dispositivos mediantes
    o chicos se visualiza en rojo
    </span>
    <span id='bloque2'>
    Este bloque se muestra al costado del bloque1 en dispositivos medianos o grandes,
    o debajo en dispositivos pequeños
    </span>
    <span id='bloque3'>
    Este bloque se muestra solo en dispositivos grandes
    </span>
    </body>

    9
    Actividad 3: CSS Media Queries
    Apliquemos reglas CSS condicionales:
    <head>
    ...
    <style>
    …
    @media screen and (min-width: 701px){
    #bloque1{
    background-color: grey;
    }
    }
    @media screen and (max-width: 700px){
    #bloque1{
    background-color: red;
    }
    #bloque3{
    display: none;
    }
    }
    @media screen and (max-width: 450px){
    #bloque2{
    display: inline-block;
    }
    }
    </style>
    </head>

    10
    Actividad 4: Adaptando un sitio
    Aplicar diseño adaptable a sitio existente.
    El HTML no debe cambiar. Solo aplicar CSS.

    11
    Actividad 4: Adaptando un sitio
    Prestar atención a:

    - Espaciado (padding) del menú principal

    - Contenido fluido (imagen de cabecera, vídeos, etc)

    - Ubicación y tamaños del “Buscador”

    - Cambio de tamaño del “Buscador” al tener foco

    - Ubicación de la sección “Sidebar”

    - Ubicación de la sección “Flickr”

    12
    Librerías HTML5 / Responsive
    Frameworks front-end

    - Bootstrap http://getbootstrap.com/

    - Foundation http://foundation.zurb.com/

    Templates pre-configurados (Boilerplate)

    - HTML5 ★ BOILERPLATE http://html5boilerplate.com/

    - Skeleton http://www.getskeleton.com/

    13
    Actividad 5: Librerías HTML5 / Responsive

    Visitar el sitio de las librerías mencionadas y probar


    diferentes demos.

    Consideraría utilizar alguna de ellas para


    desarrollos futuros?

    14
    Más información relevante/recomendada

    http://flippinawesome.org/2014/03/10/is-jquery-too-big-for-mobile/

    http://webdesignerwall.com/tutorials/responsive-design-in-3-steps

    http://webdesignerwall.com/tutorials/mobile-navigation-design-tutorial

    http://webdesignerwall.com/tutorials/responsive-column-layouts

    http://encosia.com/3-reasons-why-you-should-let-google-host-jquery-for-you/

    http://encosia.com/6953-reasons-why-i-still-let-google-host-jquery-for-me/

    http://encosia.com/cripple-the-google-cdns-caching-with-a-single-character/

    15

    You might also like