{"id":4175,"date":"2016-09-28T01:01:44","date_gmt":"2016-09-28T01:01:44","guid":{"rendered":"http:\/\/www.catedracosgaya.com.ar\/tipoblog\/2016\/?p=4175"},"modified":"2016-09-28T01:01:44","modified_gmt":"2016-09-28T01:01:44","slug":"responsive-design-y-los-periodicos-digitales","status":"publish","type":"post","link":"https:\/\/www.catedracosgaya.com.ar\/tipoblog\/2016\/responsive-design-y-los-periodicos-digitales\/","title":{"rendered":"Responsive design y los peri\u00f3dicos digitales"},"content":{"rendered":"<p><img loading=\"lazy\" decoding=\"async\" class=\"alignright size-medium wp-image-4184\" src=\"http:\/\/www.catedracosgaya.com.ar\/tipoblog\/2016\/wp-content\/uploads\/2016\/09\/tipoblog1-300x231.jpg\" alt=\"tipoblog1\" width=\"300\" height=\"231\" srcset=\"https:\/\/www.catedracosgaya.com.ar\/tipoblog\/2016\/wp-content\/uploads\/2016\/09\/tipoblog1-300x231.jpg 300w, https:\/\/www.catedracosgaya.com.ar\/tipoblog\/2016\/wp-content\/uploads\/2016\/09\/tipoblog1-768x590.jpg 768w, https:\/\/www.catedracosgaya.com.ar\/tipoblog\/2016\/wp-content\/uploads\/2016\/09\/tipoblog1-1024x787.jpg 1024w, https:\/\/www.catedracosgaya.com.ar\/tipoblog\/2016\/wp-content\/uploads\/2016\/09\/tipoblog1.jpg 1686w\" sizes=\"auto, (max-width: 300px) 100vw, 300px\" \/>Los avances tecnol\u00f3gicos en materia de dispositivos han cambiado significativamente la manera en la cual las personas acceden y comparten todo tipo de contenido a trav\u00e9s de internet. Como consecuencia, se han desarrollado nuevas herramientas que permiten generar mejores experiencias para los usuarios y un f\u00e1cil consumo de la informaci\u00f3n.<\/p>\n<p>Actualmente, las personas no necesitan exclusivamente comprar un diario para poder leer las noticias del d\u00eda, ya que una persona puede acceder a las noticias de todo el mundo sin importar el d\u00eda o d\u00f3nde se encuentre gracias a los sitios web o aplicaciones disponibles para cualquier dispositivo. Los sitios web de los peri\u00f3dicos ofrecen mucha m\u00e1s informaci\u00f3n de la cual es posible encontrar en una edici\u00f3n impresa del mismo, adem\u00e1s de poder contar con otro tipo de contenido como videos o gr\u00e1ficos interactivos, por lo que es necesario encontrar a trav\u00e9s del dise\u00f1o nuevas soluciones que permitan organizar la informaci\u00f3n para generar una comunicaci\u00f3n clara y accesible.<\/p>\n<p><strong>Del diario a la web<\/strong><br \/>\nLas versiones impresas de los peri\u00f3dicos siguen vigentes actualmente, pero en los \u00faltimos a\u00f1os se ha notado que los usuarios se inclinan m\u00e1s por los sitios web y aplicaciones para leer las noticias del d\u00eda a d\u00eda. A ra\u00edz de esto, muchos peri\u00f3dicos decidieron ampliar su oferta de contenido a trav\u00e9s de estos medios para responder a la demanda por parte del p\u00fablico, lo cual tambi\u00e9n gener\u00f3 una necesidad de volver a desarrollar los dise\u00f1os de sus p\u00e1ginas web para poder crear una plataforma que pueda contener y organizar toda esta informaci\u00f3n.<\/p>\n<p>Al observar la versi\u00f3n impresa de cualquier peri\u00f3dico importante, se puede reconocer el uso de varias grillas que ayudan a la organizaci\u00f3n del contenido. Ya sea partiendo de una grilla base y modific\u00e1ndola seg\u00fan las necesidades de la publicaci\u00f3n, tienen la capacidad de responder a las diversas situaciones que pueden plantearse al momento de organizar la pieza editorial. En muchos casos, cuando se hace un traslado a la web, esto se pierde. Muchos sitios utilizan tan s\u00f3lo un dise\u00f1o predeterminado, ya sea en sus p\u00e1ginas de inicio como en las p\u00e1ginas de los art\u00edculos completos, lo cual puede tornarse un tanto agotador y mon\u00f3tono para los usuarios que consumen la informaci\u00f3n, ya que carecen del ritmo de lectura que quiz\u00e1s s\u00ed pueden proponer a trav\u00e9s de la versi\u00f3n impresa.<\/p>\n<p>Esto no s\u00f3lo genera una limitaci\u00f3n en la experiencia de los usuarios, sino tambi\u00e9n limitan a trav\u00e9s de sus decisiones de dise\u00f1o la capacidad de organizar las noticias de modo tal que se pueda destacar o no cierto tipo de informaci\u00f3n para poder mostrar algo, ya sea una noticia destacada o una serie de noticias que forman parte del tema m\u00e1s importante de la jornada. Entonces la gran pregunta es: <em>\u00bfc\u00f3mo se puede evitar perder todo esto en un sitio web?<\/em><\/p>\n<p><strong>La soluci\u00f3n del momento: Responsive Web Design<\/strong><br \/>\nEl <em>responsive design<\/em>, lo que permite a dise\u00f1adores y desarrolladores crear sitios web que pueden adaptarse a diferentes tama\u00f1os de pantalla, es una de las herramientas m\u00e1s importantes que se han desarrollado para la web en la \u00faltima d\u00e9cada. Muchos peri\u00f3dicos han optado por el uso de la misma poder crear una plataforma que se adapte a todos los dispositivos que pueden llegar a utilizar los usuarios y al mismo tiempo que pueda otorgarles un mejor acceso a la informaci\u00f3n.<\/p>\n<figure id=\"attachment_4183\" aria-describedby=\"caption-attachment-4183\" style=\"width: 640px\" class=\"wp-caption aligncenter\"><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-4183 size-large\" src=\"http:\/\/www.catedracosgaya.com.ar\/tipoblog\/2016\/wp-content\/uploads\/2016\/09\/tipoblog3-1024x451.jpg\" width=\"640\" height=\"282\" srcset=\"https:\/\/www.catedracosgaya.com.ar\/tipoblog\/2016\/wp-content\/uploads\/2016\/09\/tipoblog3-1024x451.jpg 1024w, https:\/\/www.catedracosgaya.com.ar\/tipoblog\/2016\/wp-content\/uploads\/2016\/09\/tipoblog3-300x132.jpg 300w, https:\/\/www.catedracosgaya.com.ar\/tipoblog\/2016\/wp-content\/uploads\/2016\/09\/tipoblog3-768x338.jpg 768w, https:\/\/www.catedracosgaya.com.ar\/tipoblog\/2016\/wp-content\/uploads\/2016\/09\/tipoblog3.jpg 1600w\" sizes=\"auto, (max-width: 640px) 100vw, 640px\" \/><figcaption id=\"caption-attachment-4183\" class=\"wp-caption-text\">Adaptaci\u00f3n del dise\u00f1o seg\u00fan el ancho de la pantalla (Sitio: The Boston Globe)<\/figcaption><\/figure>\n<p>Si bien el <em>responsive design<\/em> permite adaptar el contenido de las p\u00e1ginas a los diferentes dispositivos\u00a0haciendo uso de las grillas, esto tambi\u00e9n propone una filosof\u00eda un tanto diferente que se pueda adaptar a esta nueva manera de pensar y dise\u00f1ar los sitios. Por ejemplo, se genera la necesidad de generar paquetes de contenido que se puedan adaptar a los diferentes contextos donde se pueden llegar a encontrar, ya sea en la p\u00e1gina principal como en una p\u00e1gina secundaria, por lo cual es necesario contemplar los diversos tama\u00f1os y extensiones que pueden llegar a necesitarse.<\/p>\n<p>Otro caso es el de la parte inferior de las p\u00e1ginas en los art\u00edculos. En las versiones impresas, la tapa es el punto fuerte en donde se intenta vender el peri\u00f3dico mostrando un pantallazo general de su contenido, mientras que en las versiones web la parte inferior de la p\u00e1gina es el punto fuerte para lograr esto. En muchos casos lo que se hace es colocar una lista de art\u00edculos relacionados al tema que se est\u00e1 leyendo, buscando poder guiar al usuario a desarrollar un recorrido del sitio que pueda llegar a interesarle teniendo en cuenta con qu\u00e9 contenidos interact\u00faa, debido a que existe una necesidad de mantener al usuario involucrado con el sitio.<\/p>\n<p>La selecci\u00f3n tipogr\u00e1fica tambi\u00e9n es algo clave, ya que las familias tipogr\u00e1ficas que se seleccionan para los sitios deben poder tener una buena visualizaci\u00f3n en los diferentes tama\u00f1os y extensiones del texto, por lo que es importante tambi\u00e9n establecer una buena\u00a0la relaci\u00f3n entre los tama\u00f1os de t\u00edtulos, bajadas y noticia. Entre los beneficios que provee el responsive design como soluci\u00f3n para el dise\u00f1o de sitios web de los peri\u00f3dicos se puede destacar la organizaci\u00f3n y legibilidad del contenido para que est\u00e9 disponible en los diferentes dispositivos, adem\u00e1s de la jerarquizaci\u00f3n\u00a0de la informaci\u00f3n (ej: el contenido adicional, como los art\u00edculos relacionados, se a\u00f1aden progresivamente a medida que aumenta el tama\u00f1o del dispositivo) y la adaptaci\u00f3n del tama\u00f1o de las im\u00e1genes seg\u00fan el dispositivo para poder mantener su relaci\u00f3n con el texto.<\/p>\n<p>Hoy en d\u00eda, el responsive design es una herramienta que ofrece muchas cosas para lo que es el dise\u00f1o web, obviamente tambi\u00e9n tiene sus problem\u00e1ticas, pero sin dudas a\u00fan se puede seguir buscando y desarrollando nuevas herramientas a partir de la misma que quiz\u00e1s en un futuro permitir\u00e1n incorporar otros aspectos al dise\u00f1o. Los sitios web deben hacer algo m\u00e1s que responder a los dispositivos, la experiencia del usuario tiene que poder responder a los m\u00faltiples contextos que se le proponen, por lo que es necesario seguir impulsando el desarrollo de estas herramientas que puedan enriquecer los sitios y su interacci\u00f3n con el usuario para generar una a\u00fan mejor comunicaci\u00f3n.<\/p>\n<p><strong>Algunos ejemplos para ver:<\/strong><\/p>\n<ul>\n<li>The Boston Globe &#8211; <a href=\"http:\/\/www.bostonglobe.com\/\">http:\/\/www.bostonglobe.com\/<\/a><\/li>\n<li>The Guardian &#8211; <a href=\"https:\/\/www.theguardian.com\/\">https:\/\/www.theguardian.com\/<\/a><\/li>\n<li>Infobae &#8211; <a href=\"http:\/\/www.infobae.com\/\">http:\/\/www.infobae.com\/<\/a><\/li>\n<li>La Naci\u00f3n &#8211; <a href=\"http:\/\/www.lanacion.com.ar\/\">http:\/\/www.lanacion.com.ar\/<\/a><\/li>\n<li>New Republic &#8211; <a href=\"https:\/\/newrepublic.com\/\">https:\/\/newrepublic.com\/<\/a><\/li>\n<li>The Washington Post &#8211; <a href=\"https:\/\/www.washingtonpost.com\/\">https:\/\/www.washingtonpost.com\/<\/a><\/li>\n<li>The Independent &#8211; <a href=\"http:\/\/www.independent.co.uk\/\">http:\/\/www.independent.co.uk\/<\/a><\/li>\n<\/ul>\n<p><strong>Responsive design en profundidad:<\/strong><\/p>\n<ul>\n<li><a href=\"http:\/\/www.maestrosdelweb.com\/que-es-responsive-web-design\/\">\u00bfQu\u00e9 es el responsive web design?<\/a><\/li>\n<li><a href=\"http:\/\/www.emenia.es\/diseno-web-adaptable-o-responsive-web-design\/\">Introducci\u00f3n al Dise\u00f1o Web Adaptable o Responsive Web Design<\/a><\/li>\n<li><a href=\"https:\/\/developers.google.com\/web\/fundamentals\/design-and-ui\/responsive\/fundamentals\/?hl=es\">Conceptos b\u00e1sicos de dise\u00f1o web adaptable (Google)<\/a><\/li>\n<li><a href=\"https:\/\/developer.mozilla.org\/es\/docs\/Desarrollo_Web\/Web_adaptable\">Dise\u00f1o Web Adaptable (Mozilla)<\/a><\/li>\n<li><a href=\"http:\/\/thenextweb.com\/dd\/2015\/12\/22\/the-web-in-2016-long-live-responsive-design\/#gref\">The Web in 2016: Long live responsive design [Ingl\u00e9s]<\/a><\/li>\n<\/ul>\n","protected":false},"excerpt":{"rendered":"<p>El responsive design como herramienta destacada para el pasaje del diario a los sitios web.<\/p>\n","protected":false},"author":145,"featured_media":4191,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"jetpack_post_was_ever_published":false,"_jetpack_newsletter_access":"","_jetpack_dont_email_post_to_subs":false,"_jetpack_newsletter_tier_id":0,"_jetpack_memberships_contains_paywalled_content":false,"_jetpack_memberships_contains_paid_content":false,"footnotes":"","jetpack_publicize_message":"","jetpack_publicize_feature_enabled":true,"jetpack_social_post_already_shared":true,"jetpack_social_options":{"image_generator_settings":{"template":"highway","default_image_id":0,"font":"","enabled":false},"version":2}},"categories":[17],"tags":[66,174,154,109],"class_list":["post-4175","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-periodico","tag-diseno","tag-diseno-web","tag-periodico","tag-tecnologia"],"jetpack_publicize_connections":[],"jetpack_featured_media_url":"https:\/\/www.catedracosgaya.com.ar\/tipoblog\/2016\/wp-content\/uploads\/2016\/09\/tipoblog2.jpg","jetpack_shortlink":"https:\/\/wp.me\/p7yOIN-15l","jetpack_sharing_enabled":true,"_links":{"self":[{"href":"https:\/\/www.catedracosgaya.com.ar\/tipoblog\/2016\/wp-json\/wp\/v2\/posts\/4175","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.catedracosgaya.com.ar\/tipoblog\/2016\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.catedracosgaya.com.ar\/tipoblog\/2016\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.catedracosgaya.com.ar\/tipoblog\/2016\/wp-json\/wp\/v2\/users\/145"}],"replies":[{"embeddable":true,"href":"https:\/\/www.catedracosgaya.com.ar\/tipoblog\/2016\/wp-json\/wp\/v2\/comments?post=4175"}],"version-history":[{"count":0,"href":"https:\/\/www.catedracosgaya.com.ar\/tipoblog\/2016\/wp-json\/wp\/v2\/posts\/4175\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.catedracosgaya.com.ar\/tipoblog\/2016\/wp-json\/wp\/v2\/media\/4191"}],"wp:attachment":[{"href":"https:\/\/www.catedracosgaya.com.ar\/tipoblog\/2016\/wp-json\/wp\/v2\/media?parent=4175"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.catedracosgaya.com.ar\/tipoblog\/2016\/wp-json\/wp\/v2\/categories?post=4175"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.catedracosgaya.com.ar\/tipoblog\/2016\/wp-json\/wp\/v2\/tags?post=4175"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}