Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

Articulo (Responsive Web Desing)

403 views

Published on

En este articulo hablaremos acerca de la técnica RWD, que es usada mundialmente para el diseño Web actual

Published in: Education
  • Be the first to comment

  • Be the first to like this

Articulo (Responsive Web Desing)

  1. 1. República Bolivariana de Venezuela Ministerio del Poder Popular Para la Educación Universidad Centrooccidental Lisando Alvarado Decanato de Ciencias y Tecnología (UCLA DCyT) ¿Qué es el RWD y su implementación? Autor: Giovanni Quagliano C.I: 23.299.236 Desarrollo Móvil (E32) Barquisimeto, febrero de 2016
  2. 2. INTRODUCCIÓN: Debido a la era en la que actualmente vivimos; como estudiantes del increíble mundo de la programación nos surgen una serie de interrogantes en el área de la programación web. Desde que tuvimos nuestro primer acceso a internet, hemos visitado millones de páginas, (redes sociales, webs musicales, comercio, blogs) de cualquier tipo, pero desde hace algunos años como usuarios de la tecnología y de los gadgets tendemos a dejar el computador (PC/Laptop) a un lado, para comenzar a usar: (tabletas, teléfonos inteligentes, televisores inteligentes, relojes inteligentes, lentes inteligentes).Alguna de las interrogante que como usuarios y/o desarrolladores nos surgen pueden ser: ¿Cómo se adaptan estás paginas a cada uno de estos dispositivos? ¿Tenemos que crear la misma página, para cada dispositivo? ¿Cuántos días, meses, años, tardaremos en crear y diseñar la misma web para cada dispositivo que vaya saliendo al mercado? Pero para beneficio propio esto no es así, gracias a una filosofía de diseño y desarrollo creada por Ethan Marcotte llamada Reponsive Web Desing¸ también vista por su siglas (RWD) y nos hacemos más interrogantes. ¿Qué es esto? ¿Cómo digiero esto? ¿Cómo aprendo esto? ¿Me es útil aprender esto? Todas estas interrogantes trataremos de responderlas a continuación. Nota: Recomendamos al lector ir hacer clic en los hipervínculos con el fin de complementar el artículo, ya que aquí solo hacemos referencia a lo más básico
  3. 3. ¿QUÉ ES EL RESPONSIVE WEB DESING (RWD)? Responsive Web Desing, o en español diseño web adaptable, adaptativo o responsivo es una tendencia de diseño y desarrollo de páginas webs que pueden ser visualizadas perfectamente en todo tipo de dispositivo (gadgets), y gracias a esto los desarrolladores no tenemos que crear una versión para cada dispositivo existente o que se vaya a inventar (como se hacía años atrás), puesto que dicha técnica permite que una sola web sea inteligente, ¿Cómo es esto? Pues que la página web se adapte a cada dispositivo, con esto no hablamos solo al tamaño, calidad de imágenes, letras etc. Esta técnica va más allá de esto puesto que la pagina está obligada a adaptarse y/o reestructurarse para cada dispositivo donde se visualice. Pero… ¿Cómo funciona esto? Sencillo, como se comentó más arriba, en lugar de construir una website para cada tipo dispositivo, sea crea una sola web con la ayuda de un conjunto de herramientas que hacen posible esto:  CCS3 (Cascading Style Sheets o Hoja de estilo en cascada)  Media Queries (Las media queries son una serie de órdenes que se incluyen en la hoja de estilos que indica al documento HTML cómo debe comportarse en diferentes resoluciones de pantalla. Para entenderlo mejor, los diseños de las páginas web, al igual que los periódicos y las revistas, están basados en columnas, entonces con la filosofía del diseño adaptativo, si una web a resolución de PC (1028x768 px) tiene 5 columnas, para una tableta (800x600 píxeles) necesitaría sólo 4, y en el caso de un teléfono inteligente cuyo ancho suele ser entre 320 y 480 píxeles las columnas usadas serían 3.)  Layout Pudiendo así la web detectar desde que dispositivo está siendo visualizada, mostrando su versión más óptima para dicho dispositivo, ya sea reorganizando elementos, mostrando menos elementos (imágenes) o más ligeras, redistribuyendo las columnas en el diseño, menos texto, etc.). ¿Es ventajoso esto de diseñar un web inteligente? En todo sentido, puesto que todo lo que haga referencia a ahorrar tiempo y dinero, lo es. Ya que de esta forma se reducen los costos de creación y mantenimiento cuando el
  4. 4. diseño de las pantallas es similar entre dispositivos de distintos tamaños, desde el punto de vista de la optimización de motores de búsqueda, sólo aparecería una URL en los resultados de búsqueda, con lo cual se ahorran redirecciones y los fallos que se derivan de estas. También se evitarían 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 ¿CÓMO PODEMOS IMPLEMENTAR DICHA TÉCNICA Y CON QUE LENGUAJES? Esta técnica es para sitios webs, y como toda web es desarrollada en HTML este será la base de todo, debemos tener un código organizado y limpio, con buena semántica; gracias a HTML5 podemos tener todo esto; pero no solo es HTML, si no también CCS (se puede considerar que este es quien hace la gran parte del trabajo) ya que recordemos que HTML es solo la estructura de la casa y el CCS es el diseño de la casa (color, pintura, etc.) pero CCS no hace el trabajo completo, por eso más arriba definimos que el (RWD) no es una herramienta, es un conjunto de herramientas las que hacen posible esto. El CCS conjuntamente con los Media Queries, hacen posible que la web entienda, el tamaño de la pantalla, la orientación o la resolución de donde se está visitando la web, esto nos permite cambiar el layaout o la tipografía del diseño, además las rejillas fluidas basadas en CCS podemos conseguir que los elementos que fluyan por la pantalla, se recoloquen para adaptarse de nuevo al tamaño de la pantalla o a la resolución del monitor. Además, no podemos dejar por fuera los Java Scripts, ya que con estos podemos adaptarnos a las necesidades del dispositivo de donde se esté visualizando la página, y así nos permite utilizar herramientas como geolocalización, o eventos táctiles para la interacción del sitio. En resumen, lo que nos permite básicamente hacer o implementar un sitio web responsivo son básicamente estos tres (3) elementos (HTML, CCS, Java Script)
  5. 5. ALGUNOS DE LOS FRAMEWORKS MÁS FAMOSO PARA IMPLEMENTAR RWD SON: Antes de continuar con este punto tenemos que mencionar que son frameworks, para luego entender cuáles son las más comunes o los mejores a la hora de implementar RWD. Un Framework es un entorno o ambiente de trabajo para desarrollo; dependiendo del lenguaje normalmente integra componentes que facilitan el desarrollo de aplicaciones como el soporte de programa, bibliotecas, plantillas y más. En resumen, un frameworks puede ser ventajoso a la hora de desarrollar puesto que nos podría facilitar muchas cosas a la hora de desarrollar, pero no siempre sera así. Se recomienda al lector profundizar acerca de estos. Continuando con los frameworks más famosos para RWD, tenemos los siguientes: 1. Bootstrap 2. Foundation 3. Skeleton 4. HTML5 Boilerplate 5. HTML KickStart 6. MontageJS 7. SproutCore 8. Zebra 9. CreateJS 10. Less Framework ¿QUÉ SON LOS MEDIA QUERIES? Las Media Queries, incorporadas en CSS3, son las primeras construcciones del lenguaje CSS que nos permiten definir estilos condicionales, aplicables únicamente en determinadas situaciones. Las Media Queries son, en una traducción rápida, consultas de las características del medio donde se está visualizando una web y nos sirven para definir estilos condicionales, que solo se aplicarán en caso que esa consulta del medio sea satisfactoria. Nota: Recomendamos al lector investigar acerca de cada uno de estos, ya que no podemos céntranos en uno por uno; puesto que sería muy extenso el articulo
  6. 6. Son una de las herramientas fundamentales para implementar el "Responsive Web Design" y han llegado de la mano de las CSS3, convirtiéndose en un aliado fundamental de cualquier diseñador web. En la mayoría de los casos las Media Queries sirven para definir estilos diferentes para distintos tamaños de la pantalla. Son sencillas de entender y aplicar, aunque el estándar es bastante sofisticado, con diversas posibilidades. Existen muchos usos, algunos no tan habituales en el mundo del diseño actual, pero que podrán tener su protagonismo en algún momento. Como comentábamos en párrafos más arriba las media queries pueden decirnos si el dispositivo tiene una relación de pantalla 4:3 o 16/9, o una profundidad de color dada. Las Media Queries representan una evolución importante de CSS, puesto que suponen la primera estructura condicional en el lenguaje. Sabemos que CSS no es un lenguaje de programación, ni tiene motivos para parecerse, pero existen muchas cosas que se implementan en los lenguajes de programación y que nos vendrían bien en el desarrollo con CSS, como es el caso de los condicionales. - "Si ocurre esto, entonces haz tal cosa" - Una construcción condicional como esta es tan útil y básica que, aunque CSS no sea un lenguaje de programación, necesita incorporarlas. Ejemplos de casos en los que nos vendría bien un condicional: - Si la pantalla del usuario tiene estas características, entonces aplica estos estilos - Si se imprime el documento en la impresora, aplica estos estilos. - Si la pantalla del dispositivo tiene estas dimensiones y además está situado en posición horizontal (landscape), entonces aplica este CSS. Situaciones como esas son básicas y los diseñadores pueden resolverlas usando las Media Queries. Son un paso al frente en cuanto a la separación entre el contenido y su
  7. 7. representación, puesto que nos facilitan que el contenido de una página pueda adaptarse al medio donde se está reproduciendo, sólo a través de la definición de estilos, sin tener que tocar el HTML para nada.
  8. 8. CONCLUSIÓN Para finalizar este artículo, podemos decir que de ahora en adelante estamos en la obligación de desarrollar todos los sitios usando este conjunto de técnicas, ya que es la manera más óptima, puesto que los más importante de los sitios webs es su contenido y en cuantos dispositivos puedo llegar a mostrar dicho contenido de la manera más elegante y llamativa, para así seducir a nuestros futuros clientes. Queremos mencionar que no debemos quedarnos en el ayer, ni en el hoy, siempre tenemos que pensar en el futuro, además que estamos en la era del internet de las cosas y cada vez salen más aparatos en el mundo con acceso a internet; debemos aprovecharnos de esto para empezar a formarnos como desarrolladores webs. Esperamos haya sido de total entretenimiento para los lectores, para que despierten su curiosidad en el desarrollo web. Agradecimientos al profesor José Rojas por despertarnos la curiosidad de este extenso mundo, y por el material tan didáctico que nos regaló.
  9. 9. Algunas páginas de donde me he apoyado para este artículo:  http://designinstruct.com/roundups/html5-frameworks/  http://www.desarrolloweb.com/articulos/prototipado-diseno-web.html  http://www.desarrolloweb.com/articulos/resumen-fundamentos-rwd.html  http://www.desarrolloweb.com/articulos/diseno-responsive-web.html  http://www.desarrolloweb.com/articulos/taller-responsive-web-design.html  http://www.desarrolloweb.com/articulos/css-media-queries.html  www.adinteractive.co/web/diseno-web-adaptable-practico  https://es.wikipedia.org/wiki/Framework  https://translate.google.com/translate?sl=en&tl=es&js=y&prev=_t&hl=es- 419&ie=UTF-8&u=http%3A%2F%2Fethanmarcotte.com%2F&edit-text=&act=url

×