Presentacin de PowerPoint
Diseo web adaptativoPresenta: Jess vlazquez Vsquez
World Wide Web ConsortiumEl 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. GopherGopher 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-LeeSir 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 WebEn 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 ADAPTATIVO6.1 AntecedentesLa 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 AdaptativoSe 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.
Media QueriesImgenes, objetos, videos o medios similares
flexibles.Fuentes tipogrficas con valores relativos.
10. El CSSEl 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 Por ejemplo,
en un encabezado 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 deba ser complementada con una
serie de atributos para informar de la fuente, color, etc. El CSS
simplifica esto.10.1. Ventajas del CSS1.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 personalizadoEn 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 FuturoTenga
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 servicios e interfaces de usuario que se
vinculan como servicios juntos, aprovechando esta tecnologa en el
futuro permitir a las empresas integrar una gran cantidad de
servicios.
13. Costo del Responsive Web DesignParece 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 DesignMostrar texto e
imgenes de manera legible en cualquier resolucin de pantallaNo
mostrar una barra de desplazamiento horizontal, sea cual sea el
tamao de la ventanaDejar 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
servidorEsta 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
AdaptativoLa utilizacin de un diseo web adaptativo trae consigo
varios beneficios, tanto para los usuarios como para los
desarrolladores, entre los que destacan:Reduccin de
costosEficiencia en la actualizacinMejora en la usabilidadCapacidad
de adaptacin de la interfazUtilizacin de imgenes, videos y otros
mediosTamao relativonica direccin del sitio web (URL).17.
Caractersticas diseo adaptativoUn 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 cerradasLa 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
desacopladasPara 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 progresivoCustomizacin: 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 abiertoAunque 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 colaborativaNo 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 adaptativoEl 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?
