{"id":7706,"date":"2015-03-16T22:52:59","date_gmt":"2015-03-16T21:52:59","guid":{"rendered":"http:\/\/www.palentino.es\/blog\/?p=7706"},"modified":"2015-03-17T10:10:56","modified_gmt":"2015-03-17T09:10:56","slug":"responsive-web-design-introduccion-conceptos-y-recursos","status":"publish","type":"post","link":"https:\/\/www.palentino.es\/blog\/responsive-web-design-introduccion-conceptos-y-recursos\/","title":{"rendered":"Responsive Web Design. Conjeturas y conceptos."},"content":{"rendered":"

Existen una serie de estrategias, conceptos y t\u00e9cnicas<\/strong> que comprenden el dise\u00f1o responsive.<\/p>\n

Uno de los principales problemas existentes cuando un dise\u00f1ador crea contenidos para la web, es que se va a encontrar con diferentes escenarios, variables, dispositivos, resoluciones, navegadores y sistemas operativos. Adem\u00e1s estos dispositivos cambian todos los d\u00edas, existiendo diversos tama\u00f1os de pantallas desde los equipos fijos hasta los m\u00f3viles.<\/p>\n

Responsive Design fue ideado por Ethan Marcotte (http:\/\/ethanmarcotte.com<\/a>)<\/strong> y es una estrategia<\/strong> de dise\u00f1o para la creaci\u00f3n de contenidos para que funcionen y respondan de forma adecuada<\/strong> independientemente de la resoluci\u00f3n del dispositivo o la pantalla.<\/p>\n

Ethan identific\u00f3 3 t\u00e9cnicas diferentes<\/strong>.<\/p>\n

Lo primero las Rejillas fluidas<\/strong> para crear dise\u00f1os flexibles. Las Im\u00e1genes flexibles que respondan a los cambios de pantalla, es decir contenidos multimedia adaptables<\/strong>. Y para finalizar el uso de Media Queries<\/strong>.<\/p>\n

Debido a los cambios existentes en el mercado, sobre todo en el\u00a0 dise\u00f1o web, los creadores necesitaran tener en mente estas 3 t\u00e9cnicas para crear sitios que sean visualizados en diferentes marcos o escenarios.<\/p>\n

El mundo del dise\u00f1o web es muy cambiante. Podemos recordar aquellos tiempos en los que el dise\u00f1o de sitios web en flash arrasaba en Internet. Algo parecido ocurr\u00eda con las resoluciones, Se creaban sitios para resoluciones que se consideraban est\u00e1ndar, como los 640×480 pixel de pantalla, luego poco a poco, esta resoluci\u00f3n fue cambiando a los 800×600, 1024×768, etc.<\/p>\n

Con la llegada de los m\u00f3viles, se plante\u00f3 crear 2 webs diferentes en funci\u00f3n del dispositivo que la visualizaba.<\/p>\n

Como podemos apreciar han existido y siguen existiendo grandes cambios.<\/p>\n

<\/p>\n

\u00bfC\u00f3mo puedo saber si mi web es responsive?<\/strong><\/p>\n

Bueno. La prueba que sugiero es sencilla.<\/p>\n

Simplemente visualiza la web en un ordenador, e intenta escalarla de forma horizontal, podr\u00e1s ir viendo que a medida que reducimos el tama\u00f1o el dise\u00f1o se adapta al nuevo escenario y\/o resoluci\u00f3n. Tambi\u00e9n podremos comprobar que las im\u00e1genes se re-escalan<\/strong> y se sit\u00faan una bajo otra. Podemos ver la web de corrido y el sistema de men\u00fas<\/strong> puede que cambie para adecuarse a los nuevos escenarios o layouts. Tambi\u00e9n puede pasar con los iconos, y que estos sean diferentes para cada tipo de dispositivo permitiendo sacar provecho a las funciones de los mismos. Podemos por ejemplo, con el dedo pulsar el Tel\u00e9fono para realizar una llamada y esto en el layout<\/strong> del desktop<\/strong> no es posible (bueno con Skype s\u00ed, pero no es la idea que quiero transmitir).<\/p>\n

Para ver la web, no es necesario realizar aproximaciones con los dedos sobre un dispositivo t\u00e1ctil para ver o acercar parte de la web.<\/p>\n

RD o Responsive Design<\/strong> es importante porque podremos crear dise\u00f1os para diferentes entornos y resoluciones para que el usuario sea capaz de consumir los contenidos en el entorno que ellos deseen.<\/p>\n

Para crear RD necesitaremos \u00a0conocer como base las tecnolog\u00edas web HTML y CSS<\/strong>, crear un c\u00f3digo limpio, sobre todo usando HTML5<\/strong> (por ejemplo los formularios facilitan el trabajo responsive). Necesitaremos crear una sem\u00e1ntica<\/strong> adecuada y correcta.<\/p>\n

Mediante los CSS emplearemos los media queries<\/strong> para cambiar los dise\u00f1os en funci\u00f3n de la resoluci\u00f3n, y poder crear diferentes estilos. CSS3<\/strong> podremos crear transiciones, para crear interacciones con los usuarios. La tecnolog\u00eda javascript<\/strong> tambi\u00e9n se suele emplear (carga de recursos, funciones para dispositivos m\u00f3viles, detecci\u00f3n, etc).<\/p>\n

Pero, \u00bf Qu\u00e9 es eso del Mobile First<\/a>?<\/strong><\/p>\n

Bueno, esta t\u00e9cnica se encuentra ligada al responsive design, puesto que los dise\u00f1adores al construir sitios web y que sean responsive, empiezan pensando primero en como dise\u00f1ar para dispositivos m\u00f3viles y luego van ampliando el dise\u00f1o al resto de dispositivos. Por eso la traducci\u00f3n es: Primero el m\u00f3vil. El motivo por el que se realiza esto ahora, es sencillo de entender viendo la cantidad de usuarios que navegan hoy en d\u00eda empleando el Smartphone, independientemente del navegador que usen claro.<\/p>\n

Por ejemplo, si pulsamos la tecla F12 sobre google chrome<\/strong>, podemos ver el inspector de elementos. Es tal la importancia que ofrece google a esto que nos muestra un icono dentro del inspector, para que podamos ver la web en modo simulado en diferentes dispositivos m\u00f3viles.<\/p>\n

\"Diseno-Responsive-en-google-chrome\"<\/p>\n

 <\/p>\n

Pero ojo, \u00faltimamente se est\u00e1 informando desde google que es necesario adaptar la web a responsive para mejorar el SEO<\/strong>. Realmente, considero que es cierto a medias. Google s\u00ed valora esta caracter\u00edstica para el posicionamiento org\u00e1nico, pero como un factor m\u00e1s e incluso igual o de menor relevancia que otros, como puede ser la calidad del contenido, su capacidad de contenido socializado, o compartido en las redes<\/strong>. \u00a0No caigamos en la desesperaci\u00f3n del hecho de que nuestra web al no ser\u00a0responsive, no aparecer\u00e1 listada en la SERP, al contrario, seguir\u00e1 apareciendo<\/strong>\u00a0(pod\u00e9is hacer la prueba).<\/p>\n

S\u00edrvase como an\u00e9cdota, algunas empresas est\u00e1n realizando campa\u00f1as de spam agresivo, indicando que si no adaptamos la web a responsive, desaparecer\u00e1n del listado de google, todo con el objeto de vender<\/strong> un curso responsive o adaptar una web a un precio determinado. No es todo lo que reluce, y ojo, esto lo pod\u00e9is denunciar. Este tipo de campa\u00f1as, hace bastante\u00a0da\u00f1o a empresas, freelands, dise\u00f1adores puesto que los clientes pueden recibir estos mensajes y cuestionar la calidad y futuro de sus apariciones en google (ya se sabe, que \u00faltimamente se valora mas el posicionamiento que el dise\u00f1o, pero eso es harina de otro costal<\/a>).<\/p>\n

\u00bfPodemos usar una metodolog\u00eda LEAN\u00a0aplicada al proyecto de software<\/a> y usar PWP\u00a0<\/a>para sites responsives?<\/strong><\/p>\n

S\u00ed, mediante el empleo de templates<\/strong>. Tambi\u00e9n mediante frameworks<\/strong> como puede ser Bootstrap <\/a>para acelerar el proceso de desarrollo y evitar tener que realizar todo desde 0 \u00f3 from scratch<\/strong>. Ahorrando tiempo, costes y aumentando los beneficios. Ah\u00ed le hemos dado…<\/p>\n

Continuar\u00e1 \u2026<\/p>\n

Estate atento al Responsive Web Design. Introducci\u00f3n, conceptos y recursos. Parte II<\/strong><\/p>\n","protected":false},"excerpt":{"rendered":"

Existen una serie de estrategias, conceptos y t\u00e9cnicas que comprenden el dise\u00f1o responsive. Uno de los principales problemas existentes cuando un dise\u00f1ador crea contenidos para la web, es que se va a encontrar con diferentes escenarios, variables, dispositivos, resoluciones, navegadores y sistemas operativos. Adem\u00e1s estos dispositivos cambian todos los d\u00edas, existiendo diversos tama\u00f1os de pantallas desde los equipos fijos hasta los m\u00f3viles. Responsive Design fue ideado por Ethan Marcotte (http:\/\/ethanmarcotte.com) y es una estrategia de dise\u00f1o para la creaci\u00f3n de contenidos para que funcionen y respondan de forma adecuada independientemente de la resoluci\u00f3n del dispositivo o la pantalla. Ethan identific\u00f3 3 t\u00e9cnicas diferentes. Lo primero las Rejillas fluidas para crear dise\u00f1os flexibles. Las Im\u00e1genes flexibles que respondan a los cambios de pantalla, es decir contenidos multimedia adaptables. Y para finalizar el uso de Media Queries. Debido a los cambios existentes en el mercado, sobre todo en el\u00a0 dise\u00f1o web, los creadores necesitaran tener en mente estas 3 t\u00e9cnicas para crear sitios que sean visualizados en diferentes marcos o escenarios. El mundo del dise\u00f1o web es muy cambiante. Podemos recordar aquellos tiempos en los que el dise\u00f1o de sitios web en flash arrasaba en Internet. Algo parecido ocurr\u00eda con las resoluciones, Se creaban sitios para resoluciones que se consideraban est\u00e1ndar, como los 640×480 pixel de pantalla, luego poco a poco, esta resoluci\u00f3n fue cambiando a los 800×600, 1024×768, etc. Con la llegada de los m\u00f3viles, se plante\u00f3 crear 2 webs diferentes en funci\u00f3n del dispositivo que la visualizaba. Como podemos apreciar han existido y siguen existiendo grandes cambios.<\/p>\n","protected":false},"author":1,"featured_media":7707,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[53,418,446,24],"tags":[669,619,659],"class_list":["post-7706","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-google","category-html-2","category-html5","category-web","tag-google","tag-responsive-design","tag-seo"],"_links":{"self":[{"href":"https:\/\/www.palentino.es\/blog\/wp-json\/wp\/v2\/posts\/7706","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.palentino.es\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.palentino.es\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.palentino.es\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.palentino.es\/blog\/wp-json\/wp\/v2\/comments?post=7706"}],"version-history":[{"count":5,"href":"https:\/\/www.palentino.es\/blog\/wp-json\/wp\/v2\/posts\/7706\/revisions"}],"predecessor-version":[{"id":7713,"href":"https:\/\/www.palentino.es\/blog\/wp-json\/wp\/v2\/posts\/7706\/revisions\/7713"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.palentino.es\/blog\/wp-json\/wp\/v2\/media\/7707"}],"wp:attachment":[{"href":"https:\/\/www.palentino.es\/blog\/wp-json\/wp\/v2\/media?parent=7706"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.palentino.es\/blog\/wp-json\/wp\/v2\/categories?post=7706"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.palentino.es\/blog\/wp-json\/wp\/v2\/tags?post=7706"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}