You are on page 1of 7

Ciclo: II

Docente: Boris Stanley Molina Mendoza

Alumno: Juan Francisco Meja Salvador

Tema: Responsive Design

Carrera: Tcnico en Ingeniera en Sistemas Informticos

Seccin: SISTEMA 11 A

1
<QU ES EL

DISEO RESPONSIVE?>
El diseo web responsive o adaptativo
es una tcnica de diseo web que
busca la correcta visualizacin de una
misma pgina en distintos dispositivos.
Desde ordenadores de escritorio a
tablets y mviles.

Hoy en da accedemos a sitios web


desde todo tipo de dispositivos; ordenador, tablet, smartphone por lo que, cada
vez ms, nos surge la necesidad de que nuestra web se adapte a los diferentes
tamaos de los mismos. Pero, qu es esto exactamente?

<EN QU CONSISTE EL DISEO RESPONSIVE?>


Se trata de redimensionar y colocar los
elementos de la web de forma que se adapten
al ancho de cada dispositivo permitiendo una
correcta visualizacin y una mejor experiencia
de usuario. Se caracteriza porque los layouts
(contenidos) e imgenes son fluidos y se usa
cdigo media-queries de CSS3.

El diseo responsive permite reducir el tiempo de desarrollo, evita los contenidos


duplicados, y aumenta la viralidad de los contenidos ya que permite compartirlos de
una forma mucho ms rpida y natural.

2
Origen responsive web design
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".
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.
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).
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 sea
accesible pero con una experiencia de navegacin muy pobre.

Ventajas responsive design


El uso de
dispositivos
mviles ha
aumentado
notablemente en
los aos 2010,
en particular, el
uso de tabletas y
telfonos
inteligentes. La
evolucin de la navegacin en Internet ha ido a la par, y ello ha popularizado la
navegacin en Internet mediante una creciente variedad de dispositivos y
resoluciones de pantalla, lo que a su vez ha creado unas necesidades de adaptar
la experiencia de la navegacin web a ellos.
Con una sola versin en HTML y CSS se pueden cubrir todas las resoluciones de
pantalla, con lo que el sitio web estar optimizado para distintos dispositivos y

3
resoluciones de pantalla. 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 evita tener que desarrollar aplicaciones ad-hoc para cada
sistema operativo mvil: iOS, Android, Windows Phone, BlackBerry OS, etctera,
aunque hoy en da [cundo?] las webs para mviles todava no pueden realizar las
mismas funciones que las aplicaciones nativas. [cita requerida]
Desde el punto de vista del posicionamiento en buscadores, aparecera una nica
URL en los resultados de bsqueda, con lo cual se ahorraran mltiples
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 desde qu dispositivo se copi
y desde qu dispositivo se intenta acceder a ese enlace.

Funcionamiento Responsive Design


El diseo web adaptable 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 (1024x768 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.
El diseo responsivo debe fluir con una adaptacin constante del tamao de los
grficos y las estructuras compositivas de un sitio web dentro de los diferentes
dispositivos y tamaos de pantalla considerando de forma automtica la disposicin
(vertical horizontal) en la que se visualizan los contenidos.

4
Ejemplo:

Heathlife

Este sitio tiene una imagen completa con slider de fondo y el mapa giratorio en todos los
tamaos y se ve muy hermosa.

5
Anexos

6
Bibliografas
https://www.google.com.sv/url?sa=t&rct=j&q=&esrc=s&source=web&cd=7&c
ad=rja&uact=8&ved=0ahUKEwixv8a0oMnVAhUD7yYKHVf9AqAQFghQMAY&
url=https%3A%2F%2Fdevelopers.google.com%2Fweb%2Ffundamentals%2F
design-and-ui%2Fresponsive%2F%3Fhl%3Des-
419&usg=AFQjCNHoVdNTxSTHIyWBLrVyi7ERRY9F0w
https://www.40defiebre.com/que-es/diseno-responsive/
https://www.w3schools.com/html/html_responsive.asp
https://eduarea.wordpress.com/2013/09/03/23-ejemplos-de-grandes-sitios-de-
diseno-web-responsive/
https://es.wikipedia.org/wiki/Dise%C3%B1o_web_adaptable

You might also like