Scribd Logo
Cargar

¡Te damos la bienvenida a Scribd!

  • Investigacion de Reponsive Web Design

    Cargado por

    Lopez Lopez
    27 vistas6 páginas
    Conoceme mas de este tema,vamos atrevete:

    Derechos de autor

    © © All Rights Reserved

    Formatos disponibles

    DOCX, PDF, TXT o lea en línea desde Scribd

    ¿Le pareció útil este documento?

    ¿Este contenido es inapropiado?

    Denunciar este documento
    Conoceme mas de este tema,vamos atrevete:

    Copyright:

    © All Rights Reserved
    Descargue como DOCX, PDF, TXT o lea en línea desde Scribd
    Marcar por contenido inapropiado
    27 vistas6 páginas

    Investigacion de Reponsive Web Design

    Cargado por

    Lopez Lopez
    Conoceme mas de este tema,vamos atrevete:

    Copyright:

    © All Rights Reserved
    Descargue como DOCX, PDF, TXT o lea en línea desde Scribd
    Marcar por contenido inapropiado
    de 6

    INVESTIGACION DE

    REPONSIVE WEB
    DESIGN
    Diseo web Responsive (RWD) es un enfoque de diseo de
    pginas web destinado a la elaboracin de sitios para
    proporcionar una visualizacin ptima y la interaccin
    experiencia de fcil lectura y navegacin con un mnimo de
    cambio de tamao, paneo, y el desplazamiento-a travs de
    una amplia gama de dispositivos (de la computadora de
    escritorio monitores a telfonos mviles). [1] [2] [3]
    Un sitio diseado con RWD [1] [4] se adapta el diseo de un
    entorno de visualizacin mediante el uso de fluidos, redes
    basadas en proporcin, [5] [6] imgenes flexibles, [7] [8] [9] y CSS3
    preguntas de los medios, [3] [10] [11] una extensin de @media
    regla general, de las siguientes maneras: [12]
    El fluido rejilla concepto exige elemento de pgina de
    tamao para estar en unidades relativas, como
    porcentajes, en lugar de unidades absolutas como
    pxeles o puntos. [6]
    Imgenes flexibles tambin estn dimensionados en
    unidades relativas, a fin de evitar que se presentan fuera
    de su contenga elemento. [7]
    Consultas de los medios de comunicacin permiten que
    la pgina a utilizar diferentes reglas de estilo CSS en
    base a caractersticas del dispositivo del sitio se muestra
    en, por lo general el ancho del navegador.

    Diseo web Responsive es cada vez ms importante como la


    cantidad de trfico mvil representa en la actualidad ms de
    la mitad del trfico total de Internet. [13] Esta tendencia es tan
    frecuente que Google ha comenzado a aumentar las
    calificaciones de los sitios que son mviles amistosa si la
    bsqueda era a partir de un dispositivo mvil. [14] Esto tiene el
    efecto neto de los sitios que no son mviles amigable
    penalizar.
    Diseo Web Sensible hace que su pgina web se ve bien en
    todos los dispositivos (equipos de escritorio, tabletas y
    mviles).
    Diseo Web Sensible es sobre el uso de CSS y HTML para
    redimensionar, ocultar, reducir, ampliar, o mover el contenido
    para que se vea bien en cualquier pantalla:

    Cree su propio diseo Responsive


    Una forma de crear un diseo de respuesta, es para crear t
    mismo:
    Ejemplo
    <!DOCTYPE html>
    <html lang="en-us">
    <head>
    <style>
    .city {
    float: left;
    margin: 5px;
    padding: 15px;
    width: 300px;
    height: 300px;
    border: 1px solid black;
    }
    </style>

    </head>
    <body>
    <h1>Responsive Web Design Demo</h1>
    <div class="city">
    <h2>London</h2>
    <p>London is the capital city of England.</p>
    <p>It is the most populous city in the United Kingdom,
    with a metropolitan area of over 13 million inhabitants.</p>
    </div>
    <div class="city">
    <h2>Paris</h2>
    <p>Paris is the capital of France.</p>
    <p>The Paris area is one of the largest population centers in
    Europe,
    with more than 12 million inhabitants.</p>
    </div>
    <div class="city">
    <h2>Tokyo</h2>
    <p>Tokyo is the capital of Japan.</p>
    <p>It is the center of the Greater Tokyo Area,
    and the most populous metropolitan area in the world.</p>
    </div>
    </body>
    </html>
    Informacin general Responsive
    Diseo web Responsive es la prctica de la construccin de
    una pgina web adecuada para trabajar en todos los
    dispositivos y cada tamao de la pantalla, no importa cun
    grande o pequeo, mvil o de escritorio. Diseo web
    Responsive se centra en brindar una experiencia intuitiva y
    gratificante para todos. Informticos y de telefona celular Los
    usuarios de escritorio por igual todos los beneficios de los
    sitios web que responden.

    El diseo web receptivo propio trmino fue acuado, y en gran


    parte se desarroll, por Ethan Marcotte. Mucho de lo que se
    trata en esta leccin se habl primero sobre por Ethan en
    lnea y en su libro Responsive Web Design, que es digno de
    una lectura.
    Origen del RWD
    Tanto la idea como el propsito del diseo web adaptable
    fueron previamente discutidos y descritos por el World Wide
    Web Consortium (W3C) en julio de 2008 en su recomendacin
    "Mobile Web Best Practices" bajo el subttulo "One Web".2
    Dicha recomendacin, aunque especfica para dispositivos
    mviles, puntualiza que est hecha en el contexto de One
    Web, y que por lo tanto engloba no solo la experiencia de
    navegacin en dispositivos mviles sino tambin en
    dispositivos de mayor resolucin de pantalla como
    dispositivos de sobremesa.3
    El concepto de One Web hace referencia a la idea de construir
    una Web para Todos (Web for All) y accesible desde cualquier
    tipo de dispositivo (Web on Everything).4
    Hoy en da, la variedad de dispositivos existentes en el
    mercado ha provocado que la informacin disponible no sea
    accesible desde todos los dispositivos, o bien es accesible
    pero la experiencia de navegacin es muy pobre.
    Ventajas del RWD
    El uso de dispositivos mviles est creciendo a un ritmo
    increble, dispositivos como tabletas y telfonos inteligentes
    han incrementado sus ventas en los ltimos aos y la
    navegacin en Internet mediante estos dispositivos es cada
    vez ms comn. Ese es el motivo por el que el diseo web
    adaptable se ha vuelto tan popular, pues es una tcnica que
    proporciona una solucin web que puede manejar la
    visualizacin web tanto de escritorio como de dispositivos.

    Con una sola versin en HTML y CSS se cubren todas las


    resoluciones de pantalla, es decir, el sitio web creado estar
    optimizado para todo tipo de dispositivos: PC, tabletas,
    telfonos mviles, etctera. Esto mejora la experiencia de
    usuario a diferencia de lo que ocurre, por ejemplo, con sitios
    web de ancho fijo cuando se acceden desde dispositivos
    mviles.
    De esta forma se reducen los costos de creacin y
    mantenimiento cuando el diseo de las pantallas es similar
    entre dispositivos de distintos tamaos.
    Tambin se supone que evita tener que desarrollar
    aplicaciones ad-hoc para versiones mviles, o no, por ejemplo,
    una aplicacin especfica para iPhone, otra para mviles
    Android, etctera,5 aunque hoy en da las webs para mviles
    todava no pueden realizar las mismas funciones que las
    aplicaciones nativas.
    Desde el punto de vista de la optimizacin de motores de
    bsqueda, slo aparecera una URL en los resultados de
    bsqueda, con lo cual se ahorran redirecciones y los fallos que
    se derivan de estas. Tambin se evitaran errores al acceder al
    sitio web en concreto desde los llamados social links, es decir,
    desde enlaces que los usuarios comparten en medios sociales
    tales como Facebook o Twitter, y que pueden acabar en error
    dependiendo de qu enlace se copi (desde qu dispositivo se
    copi) y desde qu dispositivo se accede. 6
    Funcionamiento del RWD
    El Responsive Web Design se hace posible gracias a la
    introduccin de las Media Queries en las propiedades de los
    estilos CSS en su versin nmero 3. Las media queries son
    una serie de rdenes que se incluyen en la hoja de estilos que
    indica al documento HTML cmo debe comportarse en
    diferentes resoluciones de pantalla.
    Para entenderlo mejor, los diseos de las pginas web, al igual
    que los peridicos y las revistas, estn basados en columnas,

    entonces con la filosofa del diseo adaptativo, si una web a


    resolucin de PC (1028x768 px) tiene 5 columnas, para una
    tableta (800x600 pxeles) necesitara slo 4, y en el caso de
    un telfono inteligente cuyo ancho suele ser entre 320 y 480
    pxeles las columnas usadas seran 3.

    También podría gustarte