Diseo web adaptativo

Presenta: Jess vlazquez Vsquez

1.World Wide Web Consortium

El World Wide Web Consortium, abreviado W3C, es un consorcio internacional que
produce recomendaciones para la world wide web.
Fue creado en octubre de 1994 y est dirigida por Tim Berners-Lee, el creador
original de URL (Uniform Resource Locator, Localizador Uniforme de Recursos),
HTTP (HyperText Transfer Protocol, Protocolo de Transferencia de HiperTexto) y
HTML (Hyper Text Markup Language, Lenguaje de Marcado de HiperTexto) que
son las principales tecnologas sobre las que se basa la Web.

2.

Localizador de recursos
uniforme (uniform resource locator)
El URL es una cadena de caracteres con la cual se asigna una direccin nica a cada
uno de los recursos de informacin disponibles en la Internet. Existe un URL nico para
cada pgina de cada uno de los documentos de la World Wide Web.
El URL de un recurso de informacin es su direccin en Internet, la cual permite que el
navegador la encuentre y la muestre de forma adecuada.
Los localizadores uniformes de recursos fueron una innovacin en la historia de la
Internet. Fueron usadas por primera vez por Tim Berners-Lee en 1991, para permitir a
los autores de documentos establecer hiperenlaces en la World Wide Web. Desde 1994.
El formato general de un URL es:
esquema://mquina.directorio.archivo

3. Gopher
Gopher es un servicio de Internet consistente en el acceso a la informacin a travs de
mens. La informacin se organiza en forma de rbol: slo los nodos contienen mens de
acceso a otros mens o a hojas, mientras que las hojas contienen simplemente
informacin textual. En cierto modo es considerado un predecesor de la Web.
Gopher es uno de los sistemas de Internet para divulgar informacin que precedi a la
World Wide Web. Fue creado en 1991 en la Universidad de Minnesota y fue el primer
sistema que permiti pasar de un sitio a otro seleccionando una opcin en el men de una
pgina

4. Tim Berners-Lee
Sir Timothy "Tim" John Berners-Lee OM, KBE (TimBL o TBL) (Londres, Reino
Unido, 8 de junio de 1955) es un cientfico de la computacin britnico, conocido por
ser el padre de la Web. Estableci la primera comunicacin entre un cliente y un
servidor usando el protocolo HTTP en noviembre de 1989. En octubre de 1994 fund
el Consorcio de la World Wide Web (W3C) con sede en el MIT, para supervisar y
estandarizar el desarrollo de las tecnologas sobre las que se fundamenta la Web y que
permiten el funcionamiento de Internet

5. World Wide Web

En informtica, la World Wide Web (WWW) o Red informtica mundial comnmente
conocida como la Web, es un sistema de distribucin de documentos de hipertexto o
hipermedios interconectados y accesibles va Internet. Con un navegador web, un
usuario visualiza sitios web compuestos de pginas web que pueden contener texto,
imgenes, vdeos u otros contenidos multimedia, y navega a travs de esas pginas
usando hiperenlaces.

6. DISEO WEB ADAPTATIVO

6.1 Antecedentes
La filosofa de Mejora progresiva, establecida por Steven Champeon en 2003 plantea,
la continua supervisin tecnolgica de los sitios siguiendo la dinmica de crecimiento
de los navegadores. Es decir, se promueve hacer mejoras tcnicas cada vez que se
presenten actualizaciones en los navegadores, garantizando que el sitio se mantenga
tcnicamente a la vanguardia. Con esta vigilancia continua, se aprovechan las
posibilidades de las hojas de estilo, o Cascading Style Sheets (CSS), y el sitio se
mantiene preparado para la implementacin de nuevos estndares.

En 2009, Ethan Marcone propone Fluid Grids. La propuesta complementa la produccin

de pginas con sistemas de estructuracin para el diseo de sitios mediante la aplicacin
de una serie de estilos en el archivo CSS, los cuales organizan los contenidos de una
pgina. De esta manera, los estilos establecen un contenedor dividido mediante guas
verticales y horizontales en los que se incorporan los elementos de diseo de la pgina,
ofreciendo la posibilidad de que los elementos puedan salir del marco que los contiene,
para originar otro tipo de sensaciones en la percepcin del usuario.

Luke Wroblewski en 2009, propone Mobile First, concepto basado en el crecimiento

exponencial de los sistemas porttiles frente a las computadoras. Recomienda que el diseo
se oriente para ser desplegado en esos dispositivos, con el propsito de estar preparados al
inminente cambio de equipos grandes a equipos porttiles para la consulta de sitios.
Esta serie de reflexiones y propuestas son las que enmarcan el surgimiento, en 2010, del
Responsive Web Designde Ethan Marcone. Quin, basndose a su vez en los principios de
Arquitecture Responsive, encuentra en el concepto: intercambio de informacin continuo y
constructivo, la nocin de que los espacios y quienes los habitan deben influenciarse
mutuamente. Traducido al mbito de la tecnologa; se trata de que el diseo de los
contenidos y su espacio de presentacin se encuentren intrnsecamente vinculados

7. Qu es Responsive Web Desing?

El Responsive Web Design (RWD) trata bsicamente de adaptar una web a cualquier tipo
de pantalla y dispositivo. Es decir, que no se nos descoloque la web en la pantalla de
nuestra tableta, Smartphone o bien resoluciones menos comunes de las pantallas del
ordenador. La web se adapta perfectamente a la pantalla facilitando su lectura y uso.
Parece algo lgico pero tiene mucho ms de funcionalidad en diseo de lo que muchos
creen. Y, adems de funcionalidad, es una necesidad ya que cada vez son ms los usuarios
que utilizan el mvil o la Tablet para navegar por internet.
Si eres usuario de estos dispositivos ya sabrs la lata que es no poder ver una web
correctamente porque sigue estando en un "formato" acorde con la pantalla de un
ordenador standard.

8. Cmo funciona el Responsive Web

Design?
Es indispensable conocer los CSS Media Queries que nos permiten activar y
desactivar partes del CSS para que se adapte a la pantalla adecuada. Y, ojo! Slo
funciona con los navegadores modernos. Internet 6, 7 y 8 no lo soportan aunque
puede haber soluciones con el uso de Javascript.
La principal diferencia es que ya no jugamos con pxeles sino con porcentajes
abandonando as los anchos fijos de una web. El Responsive Web Design prefiere
el concepto de proporcin. As, cuando veamos el mismo contenido en la pantalla
de nuestro mvil todos los elementos se harn proporcionalmente ms pequeos.

9. Descripcin del Diseo Web Adaptativo

Se describe como una tcnica de diseo y desarrollo web que, mediante el uso de
estructuras e imgenes fluidas, as como de media-queries en la hoja de estilo CSS,
consigue adaptar el sitio web al entorno del usuario.
Toma las mejores prcticas para aplicarlas en la construccin de sitios, logrando buena
calidad en las aplicaciones. Para hacer un diseo web adaptativo se debe cumplir con los
siguientes aspectos:Diseo fluido con cuadrculas flexibles o fluid grids.
I. Media Queries
II. Imgenes, objetos, videos o medios similares flexibles.
III. Fuentes tipogrficas con valores relativos.

10. El CSS
El CSS (Cascade Style Sheets) u Hojas de Estilo en Cascada es un lenguaje que se
encarga de dar estilo a los documentos escritos en HTML. Es decir de la apariencia que
va a tener la pgina (tamao de fuente, color, etc.)
El CSS puede incorporarse en un documento aparte llamado Hoja de Estilos o estar
incluido en el HTML, en la cabecera y bajo el atributo <Style>
Por ejemplo, en un encabezado <h1> el lenguaje CSS nos indica como va a
visualizarse el contenido (color, fuente, alineacin, tamao, etc.) y el HTML indica que
se trata de un encabezamiento importante, a modo de ttulo.
Antiguamente cada etiqueta <h1> deba ser complementada con una serie de atributos
para informar de la fuente, color, etc. El CSS simplifica esto.

10.1. Ventajas del CSS

1.La presentacin o estilo de la pgina web quedan separadas del contenido, por lo
que es posible hacer cambios en la visualizacin sin necesidad de modificar el
contenido. Es decir, al variar el CSS actuamos exclusivamente sobre como se va a
presentar la pgina en nuestro dispositivo.
2.Adems un solo documento CSS puede definir a multitud de elementos, con lo que
se evita saturar el ancho de banda del dispositivo con demasiada informacin.
El diseo adaptativo o responsive evita tener que crear una aplicacin distinta para
cada modelo de mvil (iPhone, Android) o diferente dispositivo, con el
consiguiente ahorro econmico.

11. Diseo web adaptativo y

personalizado
En definitiva, el diseo web adaptativo ofrece solo ventajas. El diseo web
adaptativo le permite una correcta visualizacin de su sitio web en todos los
dispositivos ya que todos los elementos como textos, columnas, imgenes y
tablas se adaptan y reajustan automticamente.
Algo que hay que entender del diseo web adaptativo es que este reajuste de
elementos se realiza sin perder tamao, es decir, un prrafo o una imagen se
adapta a la nueva resolucin, pero no se achica o se hace ilegible, que es eso
lo que comnmente se cree del diseo web adaptativo.

12. Diseo de adaptativo "Responsive"

en el Futuro
Tenga en cuenta, el diseo de Web Sites adaptativos se encuentra todava en su
infancia, y el futuro parece muy brillante. "Hay un montn de cosas interesantes que
vienen con el diseo responsive", dice Resnick. "Ya se est utilizando elementos de
diseo responsive en las aplicaciones web, y los desarrolladores estn explorando
nuevas reas de diseo al probar un gran nmero de integraciones que ya estn
disponibles."
Resnick predice, "A medida que Internet se transforma ms en una plataforma de

13. Costo del Responsive Web Design

Parece un trabajo que requiere un coste econmico alto, pero nada de eso. Con el
Responsive Web Design creamos diferentes formatos a partir de una misma web y ya
no es necesario crear diferentes sites adaptadas a cada dispositivo. Requiere
conocimientos avanzados en diseo pero que evita muchos problemas de cara al
presente tecnolgico: smartphones y tabletas.

14. Los 3 pilares del Responsive Web

Design
1. Mostrar texto e imgenes de manera legible en cualquier resolucin de pantalla
2. No mostrar una barra de desplazamiento horizontal, sea cual sea el tamao de la
ventana
3. Dejar siempre espacio para hacer click en los enlaces o botones, el espacio debe ser
lo suficientemente cmodo para pinchar con un dedo pulgar.

15. Web adaptativa desde el servidor

Esta tcnica consiste en detectar el dispositivo que se usa, normalmente con el nombre del
agente del navegador (en el puede aparecer por ejemplo: "Android" o "iPhone") y
sabiendo si ests en un mvil se envia una web u otra distinta.
El diseo web adaptativo o adaptable (en ingls, Responsive Web Design) es una tcnica
de diseo y desarrollo web donde esta se adapte a la resolucin de la pantalla o al
dispositivo que est visitando su pgina web de manera inteligente.
El Responsive Web Design ayuda a que su pgina se adapte a los tamaos de casi
cualquier pantalla, como por ejemplo, las de los Celulares, SmartPhones, Tablets,
Laptops, Notebook o PC de escritorios. Prcticamente a cualquier dispositivo que pueda
navegar en internet, Cabe mencionar que para las personas que tiene un pgina web
espesificamente para dispositivos mviles, estn obligados a incorporar esta tecnologa.

16. Beneficios del Diseo Web

Adaptativo
La utilizacin de un diseo web adaptativo trae consigo varios beneficios,
tanto para los usuarios como para los desarrolladores, entre los que destacan:
i. Reduccin de costos
ii. Eficiencia en la actualizacin
iii.Mejora en la usabilidad
iv. Capacidad de adaptacin de la interfaz
v. Utilizacin de imgenes, videos y otros medios
vi.Tamao relativo
vii.nica direccin del sitio web (URL).

17. Caractersticas diseo adaptativo

Un producto adaptativo debe ofrecer espacio para la co-adaptacin con sus usuarios. Y
para ello, es recomendable que cumpla los siguientes puntos:

17.1 Construir plataformas, no soluciones cerradas

La mayora de los diseadores actuales buscan crear productos con un acabado perfecto,
que impresionen y ofrezcan a los usuarios una experiencia de uso nica. Para ello,
desarrollan productos con estilos de interaccin y funcionalidades muy delimitadas que
dejan poco espacio para que los usuarios los utilicen de la forma que ms les convenga en
funcin del contexto.

17.2. Desarrollo mediante capas desacopladas

Para que los productos interactivos puedan evolucionar y ser adaptados por sus usuarios
tambin es necesario que sean creados mediante capas independientes, de tal forma que las
capas profundas evolucionen lentamente proporcionando estabilidad, y las superficiales lo
hagan rpidamente proporcionando gran capacidad de innovacin y cambio.

17.3. Enfoque progresivo

Customizacin: Consiste en el cambio de apariencia de un objeto fsico o aplicacin de
software.
Personalizacin: La personalizacin va un paso ms all, ya que modifica la funcionalidad
base de un objeto para reflejar mejor las preferencias del usuario. No slo modifica la
apariencia del objeto, sino tambin la forma en la que funciona. Ejemplos cambio de los
atajos de teclado de una aplicacin o la frecuencia y volumen de los avisos de una agenda
electrnica.
Adaptacin: Una aplicacin de este tipo permite ser adaptada y ampliada por el usuario
que la maneja. Un claro ejemplo es Microsoft Excel.

17.4. Utilizar un enfoque abierto

Aunque no imprescindible, facilita que la aplicacin pueda trabajar con otras, extenderse a
travs de mdulos, visualizarse desde distintos dispositivos y aprovecharse de la innovacin
colaborativa.
Para ello es necesario utilizar tecnologas, protocolos de comunicacin y formatos de
informacin totalmente abiertos y estndares.

17.5. Innovacin colaborativa

No es imprescindible pero puede aumentar enormemente el potencial de nuestras
aplicaciones, es abrirlas a la innovacin colaborativa que nos brinda Internet. Una
aplicacin que los usuarios pueden adaptar en funcin de sus necesidades ofrece un gran
potencial, pero si permitimos y fomentamos que una comunidad de usuarios pueda
compartir y comunicar sus adaptaciones y trabajar colaborativamente, el potencial puede
aumentar enormemente.
Un ejemplo excepcional es Zoybar.

18. Problemas y retos del diseo adaptativo

El diseo adaptativo no est exento de retos, especialmente por su novedad y por el
hecho de estar poco desarrollado y haber sido puesto en prctica en pocas ocasiones:
La evaluacin de este tipo de aplicaciones desde la metodologa del diseo centrado en
el usuario puede ser complicada, ya que los tests con usuarios miden la usabilidad de
una aplicacin concreta en un momento determinado y bajo unas condiciones
determinadas, mientras que muchos usos que surgen en el entorno de un usuario en su
da a da se escapan del control y pueden ser totalmente desconocidos.
Puede haber clientes que tengan miedo a perder el control sobre sus aplicaciones y su
marca.

19. Conclusin
El diseo web adaptativo es definitivamente una solucin eficaz con el fin de ofrecer
una experiencia deseada al usuario. Es una evolucin superior del diseo web que
invita a los diseadores a un nuevo desafo ergonmico y asegura a los usuarios una
experiencia enriquecida. En cuanto a los inconvenientes de esta tcnica, se solucionan
con una mayor inversin al nivel del diseo y al nivel del desarrollo del sitio web.
Sin embargo, es necesario saber qu alternativas hay. Existen sitios alternativos para
mviles que dirigen a los visitantes en posesin de un smartphone hacia el sitio mvil
o a aplicaciones mviles que aunque son mejores para controlar la experiencia del
usuario, son bastante costosas en desarrollar y no permiten una indexacin ptima.

Gracias por su atencin

Espero la ponencia halla sido de su entera satisfaccin y
agrado, presento Jess Vlazquez Vsquez.
Preguntas ,dudas u amenazas?