{"id":676,"date":"2014-01-13T15:17:32","date_gmt":"2014-01-13T20:17:32","guid":{"rendered":"https:\/\/e-lexia.com\/blog\/?p=676"},"modified":"2024-11-01T11:51:33","modified_gmt":"2024-11-01T16:51:33","slug":"que-es-responsive-web-design-desde-los-contenidos-web","status":"publish","type":"post","link":"https:\/\/e-lexia.com\/blog\/que-es-responsive-web-design-desde-los-contenidos-web\/","title":{"rendered":"\u00bfQu\u00e9 es Responsive Web Design, desde los contenidos web?"},"content":{"rendered":"<p>Hace varios meses me asignaron la tarea de realizar una breve exposici\u00f3n sobre <a href=\"https:\/\/e-lexia.com\/diccionario-tic\/responsive-web-design\/\" rel=\"noopener\" target=\"_blank\">Responsive Web Design<\/a> \u2013 RWD. El p\u00fablico era un peque\u00f1o y selecto grupo de dise\u00f1adores gr\u00e1ficos y programadores web, que luego servir\u00e1n como multiplicadores del concepto.<\/p>\n<p>Al principio pens\u00e9 dar un vistazo por Wikipedia y algunos <a href=\"https:\/\/e-lexia.com\/diccionario-tic\/blog\/\" rel=\"noopener\" target=\"_blank\">blogs<\/a> sobre dise\u00f1o web, con el fin de construir un concepto amplio sobre el tema. Sin embargo, en ese ir y venir, conclu\u00ed que el discurso de mi presentaci\u00f3n podr\u00eda resultar redundante, ya que \u201ctodo el mundo dice lo mismo\u201d sobre el Responsive Web Design:<\/p>\n<blockquote><p>Seg\u00fan Wikipedia (2014), el dise\u00f1o web adaptable o adaptativo (en ingl\u00e9s, <em>Responsive Web Design<\/em>) es una t\u00e9cnica de dise\u00f1o y desarrollo web que mediante el uso de estructuras e im\u00e1genes fluidas, as\u00ed como de <em>media-queries<\/em> en la hoja de estilo CSS, consigue adaptar el sitio web al entorno del usuario.<\/p>\n<p><!-- Google Adsense --><\/p>\n<div class=\"adsense\">\n  <script async src=\"https:\/\/pagead2.googlesyndication.com\/pagead\/js\/adsbygoogle.js?client=ca-pub-7923590131153633\" crossorigin=\"anonymous\"><\/script><br \/>\n  <ins class=\"adsbygoogle\" style=\"display:block; text-align:center;\" data-ad-layout=\"in-article\" data-ad-format=\"fluid\" data-ad-client=\"ca-pub-7923590131153633\" data-ad-slot=\"5345374831\"><\/ins><br \/>\n  <script>(adsbygoogle = window.adsbygoogle || []).push({});<\/script>\n<\/div>\n<p>Para Juan Carlos Mej\u00eda (2012), el <em>Responsive Web Design<\/em> permite crear sitios web que se adaptan al ancho del dispositivo en que se est\u00e9 navegando, lo que permite tener un \u00fanico dise\u00f1o para PC, m\u00f3viles y tabletas.<\/p>\n<p>Y para Juan D\u00edaz (2011), son una serie de t\u00e9cnicas que permiten a nuestra p\u00e1gina web adaptarse al medio a trav\u00e9s del cual un usuario est\u00e1 accediendo a la misma. Los tama\u00f1os de pantalla cambian seg\u00fan el medio con el que se accede (no es lo mismo una pantalla de un iPhone que la de un monitor panor\u00e1mico de sobremesa) pero el usuario cada vez m\u00e1s exige que su experiencia usando nuestra web sea la \u00f3ptima en cada caso concreto. Utilizando HTML y principalmente CSS podemos servir al usuario una versi\u00f3n de nuestra web en funci\u00f3n del ancho de pantalla utilizado.<\/p>\n<\/blockquote>\n<p>Y puedo quedarme citando autores (expertos, aventurados, docentes, blogueros) que coinciden en dise\u00f1o adaptable a trav\u00e9s del uso de <a href=\"https:\/\/e-lexia.com\/diccionario-tic\/css\/\" rel=\"noopener\" target=\"_blank\">CSS<\/a>.<\/p>\n<p>Fue entonces como me propuse agregar algo m\u00e1s a la conversaci\u00f3n e intentar definir el <em>Responsive Web<\/em> desde la mirada de un comunicador que genera y gestiona contenidos. Aunque era claro que deb\u00eda conservar todo lo que se ha dicho.<\/p>\n<p>Para mi entonces el <em>Responsive Web Design<\/em> es la respuesta pertinente a la frustraci\u00f3n de los usuarios cuando navegan un sitio web o ejecutan una aplicaci\u00f3n web desde sus dispositivos m\u00f3viles. Esta frustraci\u00f3n se presenta en la impertinencia de los contenidos y las m\u00faltiples versiones del mismo sitio, generando contenido duplicado.<\/p>\n<p><!-- ASESOR COMUNICATIVO --><\/p>\n<div class=\"destacado-asesor\">\n<div class=\"destacado-asesor__imagen\">\n    <a href=\"https:\/\/e-lexia.com\/contacto.html\"><br \/>\n      <img decoding=\"async\" src=\"https:\/\/e-lexia.com\/blog\/wp-content\/uploads\/2023\/01\/asesor-comunicativo-juancadotcom.png\" alt=\"Juan Carlos Morales S., asesor en comunicaci\u00f3n digital\"><br \/>\n    <\/a>\n   <\/div>\n<div class=\"destacado-asesor__desc\">\n<h2><a href=\"https:\/\/e-lexia.com\/contacto.html\">\u00bfNecesitas asesor\u00eda en comunicaci\u00f3n digital?<\/a><\/h2>\n<p>Dise\u00f1a y optimiza tus proyectos en comunicaci\u00f3n digital, entregando una mejor experiencia a tus usuarios y potenciando el valor de tu marca.<br \/>\n      <a class=\"cta-asesor\" href=\"https:\/\/e-lexia.com\/contacto.html\">Conversemos<\/a>\n     <\/p>\n<\/p><\/div>\n<\/div>\n<p>Cuando hacemos <em>Responsive Web Design<\/em> tenemos que:<\/p>\n<ul>\n<li>Re-pensar los contenidos: \u00bfQu\u00e9 vamos a presentar para un m\u00f3vil?<\/li>\n<li>Definir la apariencia: \u00bfC\u00f3mo lo vamos a presentar en los diferentes dispositivos m\u00f3viles?<\/li>\n<li>Dise\u00f1ar la estructura de navegaci\u00f3n: \u00bfQu\u00e9 contenido presentar en un m\u00f3vil y c\u00f3mo es la navegaci\u00f3n del usuario.<\/li>\n<li>Establecer la pertinencia y jerarqu\u00eda: \u00bfQu\u00e9 va primero? \u00bfQu\u00e9 va despu\u00e9s? \u00bfQu\u00e9 no va?.<\/li>\n<\/ul>\n<p>Comparto mi presentaci\u00f3n para ampliar a\u00fan m\u00e1s el concepto. Adem\u00e1s, anexo la bibliograf\u00eda utilizada en este art\u00edculo (es necesario indicar los otros autores).<\/p>\n<p><iframe loading=\"lazy\" style=\"border: 1px solid #CCC; border-width: 1px 1px 0; margin: 0 auto 5px auto; display:block;\" src=\"http:\/\/www.slideshare.net\/slideshow\/embed_code\/20223824\" width=\"600\" height=\"421\" frameborder=\"0\" marginwidth=\"0\" marginheight=\"0\" scrolling=\"no\" allowfullscreen=\"allowfullscreen\"> <\/iframe><\/p>\n<p>Si quer\u00e9s agregar m\u00e1s definiciones, tienes los comentarios (abajo) o puedes comentar en Twitter con una menci\u00f3n a mi cuenta <a href=\"http:\/\/www.twitter.com\/juancadotcom\" target=\"_blank\" rel=\"noopener noreferrer\">@juancadotcom<\/a>.<\/p>\n<div class=\"destacado-libro\">\n<div class=\"destacado-libro__imagen\">\n  <a href=\"https:\/\/e-lexia.com\/blog\/produccion-contenidos-web-ebook-gratuito\/\"><img decoding=\"async\" src=\"https:\/\/e-lexia.com\/blog\/wp-content\/uploads\/2021\/04\/libro-prodccion-contenidos-web.jpg\" alt=\"Producci\u00f3n de contenidos web. Libro gratuito. Autor: Juan Carlos Morales S.\"><\/a>\n <\/div>\n<div class=\"destacado-libro__desc\">\n<h2><a href=\"https:\/\/e-lexia.com\/blog\/produccion-contenidos-web-ebook-gratuito\/\">Producci\u00f3n de contenidos web<\/a><\/h2>\n<p>  Descarga este libro electr\u00f3nico de acceso libre, donde se presentan recomendaciones de producci\u00f3n multimedia.<br \/>\n  <a class=\"cta-libro\" href=\"https:\/\/e-lexia.com\/blog\/produccion-contenidos-web-ebook-gratuito\/\">Obtener una copia<\/a>\n <\/div>\n<\/div>\n<h2>Bibliograf\u00eda:<\/h2>\n<ul>\n<li>Wikipedia. (11 de enero de 2014). Dise\u00f1o web adaptable. Recuperado el 13 de Enero de 2014, de Wikipedia: http:\/\/es.wikipedia.org\/wiki\/Dise%C3%B1o_web_adaptable<\/li>\n<li>Mej\u00eda, J. (23 de enero de 2012). Gu\u00eda de Responsive Web Design: todo lo que necesita saber sobre Responsive Web Design. Recuperado el 13 de Enero de 2014, de Marketing Digital: http:\/\/www.ecbloguer.com\/marketingdigital\/?p=2635<\/li>\n<li>D\u00edaz, J. (16 de agosto de 2011). Introducci\u00f3n al Dise\u00f1o Web Adaptable o Responsive Web Design. Recuperado el 13 de Enero de 2014, de Emenia: http:\/\/www.emenia.es\/diseno-web-adaptable-o-responsive-web-design\/<\/li>\n<\/ul>\n","protected":false},"excerpt":{"rendered":"<p>Hace varios meses me asignaron la tarea de realizar una breve exposici\u00f3n sobre Responsive Web Design \u2013 RWD. El p\u00fablico era un peque\u00f1o y selecto grupo de dise\u00f1adores gr\u00e1ficos y programadores web, que luego servir\u00e1n como multiplicadores del concepto. Al principio pens\u00e9 dar un vistazo por Wikipedia y algunos blogs&hellip;<\/p>\n","protected":false},"author":1,"featured_media":1591,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[2],"tags":[66,60],"class_list":["post-676","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-comunicaciones","tag-hipermedia","tag-rwd","has-post-thumbnail-archive"],"aioseo_notices":[],"_links":{"self":[{"href":"https:\/\/e-lexia.com\/blog\/wp-json\/wp\/v2\/posts\/676","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/e-lexia.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/e-lexia.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/e-lexia.com\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/e-lexia.com\/blog\/wp-json\/wp\/v2\/comments?post=676"}],"version-history":[{"count":0,"href":"https:\/\/e-lexia.com\/blog\/wp-json\/wp\/v2\/posts\/676\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/e-lexia.com\/blog\/wp-json\/wp\/v2\/media\/1591"}],"wp:attachment":[{"href":"https:\/\/e-lexia.com\/blog\/wp-json\/wp\/v2\/media?parent=676"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/e-lexia.com\/blog\/wp-json\/wp\/v2\/categories?post=676"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/e-lexia.com\/blog\/wp-json\/wp\/v2\/tags?post=676"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}