{"id":20579,"date":"2022-02-18T19:59:27","date_gmt":"2022-02-19T00:59:27","guid":{"rendered":"https:\/\/niixer.com\/?p=20579"},"modified":"2022-03-11T19:45:59","modified_gmt":"2022-03-12T00:45:59","slug":"responsive-design-una-tecnica-de-adaptacion-para-cualquier-tamano-de-pantalla","status":"publish","type":"post","link":"https:\/\/niixer.com\/index.php\/2022\/02\/18\/responsive-design-una-tecnica-de-adaptacion-para-cualquier-tamano-de-pantalla\/","title":{"rendered":"Responsive Design: Una T\u00e9cnica De Adaptaci\u00f3n Para Cualquier Tama\u00f1o De Pantalla"},"content":{"rendered":"\n

Actualmente el dise\u00f1o de p\u00e1ginas web tiene infinidad de enfoques y t\u00e9cnicas para su desarrollo, desde interfaces gr\u00e1ficas que permiten al dise\u00f1ador arrastrar componentes visuales, hasta tecnolog\u00edas cuyo entorno es netamente para desarrollo en c\u00f3digo. De cualquier forma, es muy importante garantizar la correcta visualizaci\u00f3n de la p\u00e1gina web en lo que a diferentes dispositivos respecta, es decir, se debe poder asegurar a los usuarios finales, que la navegaci\u00f3n y utilizaci\u00f3n de una p\u00e1gina web sea tan sencilla y funcional en su smartphone o tablet, como lo es su computador de escritorio o port\u00e1til. Para cumplir este prop\u00f3sito, existe el concepto de responsive design<\/a>.<\/p>\n\n\n\n

Entonces \u00bfQu\u00e9 es exactamente responsive design?<\/strong><\/h3>\n\n\n\n

Es una t\u00e9cnica de adaptaci\u00f3n de un dise\u00f1o web para diferentes tama\u00f1os de pantallas, es decir, que aplicando dicha t\u00e9cnica es posible ajustar textos, im\u00e1genes, formularios, y componentes en general, de tal forma que cuando la p\u00e1gina web sea visualizada en dispositivos con pantallas de diversos tama\u00f1os, estos elementos se vean correctamente, y que sea posible interactuar con ellos de la misma forma que si estuvieran en una c\u00f3moda pantalla de escritorio. El responsive design no crea diferentes copias de una misma p\u00e1gina web, en cambio, ajusta los elementos de la misma en tiempo real y en funci\u00f3n de cada navegador, para que el usuario pueda visualizarla correctamente.<\/p>\n\n\n\n

Figura 1.<\/strong><\/p>\n\n\n\n

Im\u00e1gen ilustrativa sobre responsive design en varios dispositivos<\/em><\/p>\n\n\n\n

\"\"\/<\/figure><\/div>\n\n\n\n

Nota. Tomado de Responsive Design: an essential element<\/em> [Im\u00e1gen], por Enyosolutions<\/p>\n\n\n\n

\u00bfC\u00f3mo puedo implementar responsive design en mis p\u00e1ginas web?<\/strong><\/h3>\n\n\n\n

Como se hab\u00eda mencionado al inicio de este art\u00edculo, existen diversas formas de dise\u00f1ar una p\u00e1gina web, los entornos gr\u00e1ficos ciertamente facilitan la labor de implementaci\u00f3n de responsive design, debido a que es una caracter\u00edstica que normalmente incluyen en s\u00ed este tipo de entornos, por ejemplo: Wix Create<\/a> tiene una opci\u00f3n llamada \u201cswitch to mobile view \/ switch to desktop view\u201d, por lo que, aunque Wix no haga el trabajo de reajustar los componentes de la p\u00e1gina para ambas vistas (escritorio y m\u00f3vil), s\u00ed permite cambiar la vista del dise\u00f1ador, lo que posibilita el ajuste manual del contenido de la p\u00e1gina.<\/p>\n\n\n\n

Ahora bien, si hablamos de responsive design a nivel de entornos de c\u00f3digo fuente, esta t\u00e9cnica debe ser implementada a partir de los archivos de estilos en CSS3. CSS es un lenguaje que permite estilizar y personalizar la apariencia de componentes escritos en HTML<\/a> en p\u00e1ginas web. Normalmente esto se consigue a partir de atributos de tipo MediaQuery. <\/p>\n\n\n\n

Un MediaQuery es un tipo de atributo propio de CSS3<\/a> que permite, entre otras cosas, adaptar el tama\u00f1o del contenido de una p\u00e1gina web en funci\u00f3n del tama\u00f1o de la pantalla del usuario. Esta sentencia tambi\u00e9n puede ser utilizada para cambiar otro tipo de caracter\u00edsticas de la p\u00e1gina, como por ejemplo el color de fondos, botones o labels. Usar MediaQuery para ajustar el tama\u00f1o de la pantalla, permite incluso que al reducir la ventana del navegador en su versi\u00f3n de escritorio, esta responda y se ajuste en consecuencia.<\/p>\n\n\n\n

Figura 2.<\/strong><\/p>\n\n\n\n

Im\u00e1gen ilustrativa sobre el uso de media queries y su enfoque \u201cMobile First Desktop Last\u201d<\/em><\/p>\n\n\n\n

\"\"\/<\/figure><\/div>\n\n\n\n

Nota. Tomado de Media queries en CSS \u00bfc\u00f3mo funcionan?<\/em> [Im\u00e1gen], por Silo Creativo.<\/p>\n\n\n\n

Finalmente, existen m\u00faltiples herramientas para previsualizar una p\u00e1gina web en diferentes dispositivos, estas herramientas simulan los tama\u00f1os de las pantallas de varios tipos m\u00f3viles (Android y iPhone), tablets, ipads y PCs. Un ejemplo es Responsively App<\/a>, que incluso puede ser usada como una extensi\u00f3n de navegador.<\/p>\n\n\n\n

Autor:<\/strong> Luis Fernando Herrera Quintana<\/a><\/p>\n\n\n\n

Editor:<\/strong> Carlos Pinz\u00f3n<\/p>\n\n\n\n

C\u00f3digo:<\/strong> UCPW-102<\/p>\n\n\n\n

Universidad: <\/strong>Universidad Central<\/a><\/p>\n\n\n\n

Fuentes:<\/strong><\/h3>\n\n\n\n

MDN Web Docs. (s.f). Responsive Design. MDN Web Docs. <\/p>\n\n\n\n

https:\/\/developer.mozilla.org\/en-US\/docs\/Learn\/CSS\/CSS_layout\/Responsive_Design<\/a><\/pre>\n\n\n\n
IEBS. (s.f). Que es el Responsive Design y porque tu web deber\u00eda tenerlo. Innovation & Entrepreneurship Business School.<\/p>\n\n\n\n
https:\/\/www.iebschool.com\/blog\/que-es-responsive-web-design-analitica-usabilidad\/<\/a><\/pre>\n\n\n\n
Wix Create. (s.f).Is Wix Responsive. Wix Create.<\/p>\n\n\n\n
https:\/\/www.wixcreate.com\/post\/is-wix-responsive<\/a><\/pre>\n\n\n\n
MDN Web Docs. (s.f). Using media queries. MDN Web Docs. <\/p>\n\n\n\n
https:\/\/developer.mozilla.org\/en-US\/docs\/Web\/CSS\/Media_Queries\/Using_media_queries<\/a><\/pre>\n\n\n\n
Enyosolutions. (s.f).Responsive Design: an essential element. [Im\u00e1gen]. Enyosolutions<\/p>\n\n\n\n
https:\/\/www.enyosolutions.com\/news\/en\/responsive-design-an-essential-element\/<\/a><\/pre>\n\n\n\n
Silo Creativo. Media Queries en CSS \u00bfC\u00f3mo funcionan?. [Im\u00e1gen]. Silo Creativo.<\/p>\n\n\n\n
https:\/\/www.silocreativo.com\/media-queries-css\/<\/a><\/pre>\n\n\n\n
Alvaroweb. (Fern\u00e1ndez, 2015). \u00bfQu\u00e9 es Responsive Design?. [Im\u00e1gen]. Alvaroweb.<\/p>\n\n\n\n
https:\/\/www.alvaroweb.com\/es\/blog\/que-es-el-responsive-design\/<\/a><\/p>\n","protected":false},"excerpt":{"rendered":"
Actualmente el dise\u00f1o de p\u00e1ginas web tiene infinidad de enfoques y t\u00e9cnicas para su desarrollo, desde interfaces gr\u00e1ficas que permiten al dise\u00f1ador arrastrar componentes visuales, hasta tecnolog\u00edas cuyo entorno es netamente para desarrollo en c\u00f3digo. De cualquier forma, es muy importante garantizar la correcta visualizaci\u00f3n de la p\u00e1gina web enSeguir Leyendo<\/p>\n","protected":false},"author":339,"featured_media":22458,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"colormag_page_container_layout":"no_sidebar_full_width","colormag_page_sidebar_layout":"no_sidebar","footnotes":""},"categories":[1645],"tags":[196,195,1866,1865,222],"class_list":["post-20579","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-diseno-de-paginas-web","tag-css","tag-html","tag-mediaqueries","tag-responsive-design","tag-web-desing"],"yoast_head":"\nResponsive Desingn – Niixer<\/title>\n<meta name=\"description\" content=\"Es una t\u00e9cnica de adaptaci\u00f3n de un dise\u00f1o web para diferentes tama\u00f1os de pantallas, es decir, que aplicando dicha t\u00e9cnica es posible ajustar textos, im\u00e1genes, formularios, y componentes en general.\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/niixer.com\/index.php\/2022\/02\/18\/responsive-design-una-tecnica-de-adaptacion-para-cualquier-tamano-de-pantalla\/\" \/>\n<meta property=\"og:locale\" content=\"es_ES\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Responsive Desingn – Niixer\" \/>\n<meta property=\"og:description\" content=\"Es una t\u00e9cnica de adaptaci\u00f3n de un dise\u00f1o web para diferentes tama\u00f1os de pantallas, es decir, que aplicando dicha t\u00e9cnica es posible ajustar textos, im\u00e1genes, formularios, y componentes en general.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/niixer.com\/index.php\/2022\/02\/18\/responsive-design-una-tecnica-de-adaptacion-para-cualquier-tamano-de-pantalla\/\" \/>\n<meta property=\"og:site_name\" content=\"Portal de noticias de tecnolog\u00eda, Realidad Virtual, Aumentada y Mixta, Videojuegos\" \/>\n<meta property=\"article:publisher\" content=\"https:\/\/www.facebook.com\/niixer\/\" \/>\n<meta property=\"article:published_time\" content=\"2022-02-19T00:59:27+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2022-03-12T00:45:59+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/niixer.com\/wp-content\/uploads\/2022\/02\/gr-responsive-design-disenador-web-freelance.jpg\" \/>\n\t<meta property=\"og:image:width\" content=\"1200\" \/>\n\t<meta property=\"og:image:height\" content=\"600\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/jpeg\" \/>\n<meta name=\"author\" content=\"Luis Fernando Herrera Quintana\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:label1\" content=\"Escrito por\" \/>\n\t<meta name=\"twitter:data1\" content=\"Luis Fernando Herrera Quintana\" \/>\n\t<meta name=\"twitter:label2\" content=\"Tiempo de lectura\" \/>\n\t<meta name=\"twitter:data2\" content=\"4 minutos\" \/>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"Responsive Desingn – Niixer","description":"Es una t\u00e9cnica de adaptaci\u00f3n de un dise\u00f1o web para diferentes tama\u00f1os de pantallas, es decir, que aplicando dicha t\u00e9cnica es posible ajustar textos, im\u00e1genes, formularios, y componentes en general.","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/niixer.com\/index.php\/2022\/02\/18\/responsive-design-una-tecnica-de-adaptacion-para-cualquier-tamano-de-pantalla\/","og_locale":"es_ES","og_type":"article","og_title":"Responsive Desingn – Niixer","og_description":"Es una t\u00e9cnica de adaptaci\u00f3n de un dise\u00f1o web para diferentes tama\u00f1os de pantallas, es decir, que aplicando dicha t\u00e9cnica es posible ajustar textos, im\u00e1genes, formularios, y componentes en general.","og_url":"https:\/\/niixer.com\/index.php\/2022\/02\/18\/responsive-design-una-tecnica-de-adaptacion-para-cualquier-tamano-de-pantalla\/","og_site_name":"Portal de noticias de tecnolog\u00eda, Realidad Virtual, Aumentada y Mixta, Videojuegos","article_publisher":"https:\/\/www.facebook.com\/niixer\/","article_published_time":"2022-02-19T00:59:27+00:00","article_modified_time":"2022-03-12T00:45:59+00:00","og_image":[{"width":1200,"height":600,"url":"https:\/\/niixer.com\/wp-content\/uploads\/2022\/02\/gr-responsive-design-disenador-web-freelance.jpg","type":"image\/jpeg"}],"author":"Luis Fernando Herrera Quintana","twitter_card":"summary_large_image","twitter_misc":{"Escrito por":"Luis Fernando Herrera Quintana","Tiempo de lectura":"4 minutos"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/niixer.com\/index.php\/2022\/02\/18\/responsive-design-una-tecnica-de-adaptacion-para-cualquier-tamano-de-pantalla\/#article","isPartOf":{"@id":"https:\/\/niixer.com\/index.php\/2022\/02\/18\/responsive-design-una-tecnica-de-adaptacion-para-cualquier-tamano-de-pantalla\/"},"author":{"name":"Luis Fernando Herrera Quintana","@id":"https:\/\/niixer.com\/#\/schema\/person\/1152b9260fa9c0588eb9b8f56a85bdc3"},"headline":"Responsive Design: Una T\u00e9cnica De Adaptaci\u00f3n Para Cualquier Tama\u00f1o De Pantalla","datePublished":"2022-02-19T00:59:27+00:00","dateModified":"2022-03-12T00:45:59+00:00","mainEntityOfPage":{"@id":"https:\/\/niixer.com\/index.php\/2022\/02\/18\/responsive-design-una-tecnica-de-adaptacion-para-cualquier-tamano-de-pantalla\/"},"wordCount":753,"commentCount":0,"publisher":{"@id":"https:\/\/niixer.com\/#organization"},"image":{"@id":"https:\/\/niixer.com\/index.php\/2022\/02\/18\/responsive-design-una-tecnica-de-adaptacion-para-cualquier-tamano-de-pantalla\/#primaryimage"},"thumbnailUrl":"https:\/\/niixer.com\/wp-content\/uploads\/2022\/02\/gr-responsive-design-disenador-web-freelance.jpg","keywords":["CSS","Html","mediaqueries","responsive design","Web desing"],"articleSection":["Dise\u00f1o de paginas web"],"inLanguage":"es","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/niixer.com\/index.php\/2022\/02\/18\/responsive-design-una-tecnica-de-adaptacion-para-cualquier-tamano-de-pantalla\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/niixer.com\/index.php\/2022\/02\/18\/responsive-design-una-tecnica-de-adaptacion-para-cualquier-tamano-de-pantalla\/","url":"https:\/\/niixer.com\/index.php\/2022\/02\/18\/responsive-design-una-tecnica-de-adaptacion-para-cualquier-tamano-de-pantalla\/","name":"Responsive Desingn – Niixer","isPartOf":{"@id":"https:\/\/niixer.com\/#website"},"primaryImageOfPage":{"@id":"https:\/\/niixer.com\/index.php\/2022\/02\/18\/responsive-design-una-tecnica-de-adaptacion-para-cualquier-tamano-de-pantalla\/#primaryimage"},"image":{"@id":"https:\/\/niixer.com\/index.php\/2022\/02\/18\/responsive-design-una-tecnica-de-adaptacion-para-cualquier-tamano-de-pantalla\/#primaryimage"},"thumbnailUrl":"https:\/\/niixer.com\/wp-content\/uploads\/2022\/02\/gr-responsive-design-disenador-web-freelance.jpg","datePublished":"2022-02-19T00:59:27+00:00","dateModified":"2022-03-12T00:45:59+00:00","description":"Es una t\u00e9cnica de adaptaci\u00f3n de un dise\u00f1o web para diferentes tama\u00f1os de pantallas, es decir, que aplicando dicha t\u00e9cnica es posible ajustar textos, im\u00e1genes, formularios, y componentes en general.","breadcrumb":{"@id":"https:\/\/niixer.com\/index.php\/2022\/02\/18\/responsive-design-una-tecnica-de-adaptacion-para-cualquier-tamano-de-pantalla\/#breadcrumb"},"inLanguage":"es","potentialAction":[{"@type":"ReadAction","target":["https:\/\/niixer.com\/index.php\/2022\/02\/18\/responsive-design-una-tecnica-de-adaptacion-para-cualquier-tamano-de-pantalla\/"]}]},{"@type":"ImageObject","inLanguage":"es","@id":"https:\/\/niixer.com\/index.php\/2022\/02\/18\/responsive-design-una-tecnica-de-adaptacion-para-cualquier-tamano-de-pantalla\/#primaryimage","url":"https:\/\/niixer.com\/wp-content\/uploads\/2022\/02\/gr-responsive-design-disenador-web-freelance.jpg","contentUrl":"https:\/\/niixer.com\/wp-content\/uploads\/2022\/02\/gr-responsive-design-disenador-web-freelance.jpg","width":1200,"height":600},{"@type":"BreadcrumbList","@id":"https:\/\/niixer.com\/index.php\/2022\/02\/18\/responsive-design-una-tecnica-de-adaptacion-para-cualquier-tamano-de-pantalla\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Portada","item":"https:\/\/niixer.com\/"},{"@type":"ListItem","position":2,"name":"Responsive Design: Una T\u00e9cnica De Adaptaci\u00f3n Para Cualquier Tama\u00f1o De Pantalla"}]},{"@type":"WebSite","@id":"https:\/\/niixer.com\/#website","url":"https:\/\/niixer.com\/","name":"Portal de noticias de tecnolog\u00eda, ciencia, Android, iOS, Realidad Virtual, Aumentada y Mixta, Videojuegos, computadores, todo lo mas reciente en tecnolog\u00eda","description":"Portal de noticias de tecnolog\u00eda","publisher":{"@id":"https:\/\/niixer.com\/#organization"},"alternateName":"Niixer","potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/niixer.com\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"es"},{"@type":"Organization","@id":"https:\/\/niixer.com\/#organization","name":"Niixer","alternateName":"Niixer.com","url":"https:\/\/niixer.com\/","logo":{"@type":"ImageObject","inLanguage":"es","@id":"https:\/\/niixer.com\/#\/schema\/logo\/image\/","url":"https:\/\/niixer.com\/wp-content\/uploads\/2022\/08\/logo-niixer-sin-fondo-1.png","contentUrl":"https:\/\/niixer.com\/wp-content\/uploads\/2022\/08\/logo-niixer-sin-fondo-1.png","width":140,"height":140,"caption":"Niixer"},"image":{"@id":"https:\/\/niixer.com\/#\/schema\/logo\/image\/"},"sameAs":["https:\/\/www.facebook.com\/niixer\/","https:\/\/www.instagram.com\/niixer.tecnologia\/"]},{"@type":"Person","@id":"https:\/\/niixer.com\/#\/schema\/person\/1152b9260fa9c0588eb9b8f56a85bdc3","name":"Luis Fernando Herrera Quintana","image":{"@type":"ImageObject","inLanguage":"es","@id":"https:\/\/secure.gravatar.com\/avatar\/4c5be9db9ff53dc407836c251879bd1950921526f294a762ce8d377cccd8104d?s=96&d=mm&r=g","url":"https:\/\/secure.gravatar.com\/avatar\/4c5be9db9ff53dc407836c251879bd1950921526f294a762ce8d377cccd8104d?s=96&d=mm&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/4c5be9db9ff53dc407836c251879bd1950921526f294a762ce8d377cccd8104d?s=96&d=mm&r=g","caption":"Luis Fernando Herrera Quintana"},"url":"https:\/\/niixer.com\/index.php\/author\/lherreraq2\/"}]}},"jetpack_featured_media_url":"https:\/\/niixer.com\/wp-content\/uploads\/2022\/02\/gr-responsive-design-disenador-web-freelance.jpg","_links":{"self":[{"href":"https:\/\/niixer.com\/index.php\/wp-json\/wp\/v2\/posts\/20579","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/niixer.com\/index.php\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/niixer.com\/index.php\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/niixer.com\/index.php\/wp-json\/wp\/v2\/users\/339"}],"replies":[{"embeddable":true,"href":"https:\/\/niixer.com\/index.php\/wp-json\/wp\/v2\/comments?post=20579"}],"version-history":[{"count":6,"href":"https:\/\/niixer.com\/index.php\/wp-json\/wp\/v2\/posts\/20579\/revisions"}],"predecessor-version":[{"id":23422,"href":"https:\/\/niixer.com\/index.php\/wp-json\/wp\/v2\/posts\/20579\/revisions\/23422"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/niixer.com\/index.php\/wp-json\/wp\/v2\/media\/22458"}],"wp:attachment":[{"href":"https:\/\/niixer.com\/index.php\/wp-json\/wp\/v2\/media?parent=20579"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/niixer.com\/index.php\/wp-json\/wp\/v2\/categories?post=20579"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/niixer.com\/index.php\/wp-json\/wp\/v2\/tags?post=20579"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}