{"id":2668,"date":"2018-06-07T13:26:28","date_gmt":"2018-06-07T11:26:28","guid":{"rendered":"https:\/\/www.inesem.es\/revistadigital\/informatica-y-tics\/?p=2668"},"modified":"2022-09-06T13:46:28","modified_gmt":"2022-09-06T11:46:28","slug":"desarrollo-web-responsive-en-mis-sitios","status":"publish","type":"post","link":"https:\/\/www.inesem.es\/revistadigital\/informatica-y-tics\/desarrollo-web-responsive-en-mis-sitios","title":{"rendered":"\u00bfPor qu\u00e9 desarrollo web responsive en mis site?"},"content":{"rendered":"<p style=\"text-align: justify;\">La necesidad de un desarrollo web responsive parte de la base de que en los \u00faltimos a\u00f1os se ha incrementado de forma exponencial el acceso a internet. Adem\u00e1s los usuarios acceden desde diferentes tipos de dispositivo (Ordenadores, Tabletas, M\u00f3viles, Smart-Tv, etc.). Este hecho da lugar a que las empresas con presencia en Internet tengan que adaptar su sitio a los diferentes medios de acceso. Todo con la finalidad de que nuestra web se vea bien y de manera similar, independientemente del dispositivo de visualizaci\u00f3n.<\/p>\n<p style=\"text-align: justify;\">Seg\u00fan el <a href=\"https:\/\/www.ine.es\/dyngs\/INEbase\/es\/categoria.htm?c=Estadistica_P&amp;cid=1254735576692\" target=\"_blank\" rel=\"noopener\">Instituto Nacional de Estad\u00edstica<\/a> en 2017 m\u00e1s del 82% de los hogares ten\u00edan conexi\u00f3n a Internet, y un 80% de los usuarios acced\u00eda de manera peri\u00f3dica desde diferentes dispositivos. Adem\u00e1s, al menos el 32% de los usuarios han realizado alguna compra por internet. Sumado a que aproximadamente el 75% de las empresas tiene una p\u00e1gina web en la que desarrolla su negocio, pone de manifiesto la notable y contin\u00faa incorporaci\u00f3n al uso de las TIC y el comercio electr\u00f3nico.<\/p>\n<p style=\"text-align: justify;\">Viendo las cifras anteriores, si extrapolamos a nivel mundial, no es de extra\u00f1ar la necesidad de un desarrollo web responsive. La finalidad ser\u00e1 como no, hacerse un hueco en el mercado aumentando \u00a0ventas y clientes potenciales.<\/p>\n<p style=\"text-align: justify;\">El desarrollo web responsive est\u00e1\u00a0 ligado a los conceptos de <strong>Responsive Web Design<\/strong> y <strong>Dise\u00f1o Web adaptativo.<\/strong>\u00a0El objetivo ser\u00e1 adaptar las necesidades de las webs a los diferentes entorno de visualizaci\u00f3n.<\/p>\n<p style=\"text-align: justify;\">Existen una multitud de tama\u00f1os de pantalla diferentes entre los dispositivos con los que se accede a internet. Estos tama\u00f1os cambian continuamente y aqu\u00ed radica la importancia del desarrollo web responsive. Necesitamos adaptar la visualizaci\u00f3n del contenido a cualquier entorno.<\/p>\n<div id=\"ez-toc-container\" class=\"ez-toc-v2_0_72 counter-hierarchy ez-toc-counter ez-toc-grey ez-toc-container-direction\">\n<div class=\"ez-toc-title-container\">\n<p class=\"ez-toc-title\" style=\"cursor:inherit\">Table of Contents<\/p>\n<span class=\"ez-toc-title-toggle\"><a href=\"#\" class=\"ez-toc-pull-right ez-toc-btn ez-toc-btn-xs ez-toc-btn-default ez-toc-toggle\" aria-label=\"Toggle Table of Content\"><span class=\"ez-toc-js-icon-con\"><span class=\"\"><span class=\"eztoc-hide\" style=\"display:none;\">Toggle<\/span><span class=\"ez-toc-icon-toggle-span\"><svg style=\"fill: #999;color:#999\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\" class=\"list-377408\" width=\"20px\" height=\"20px\" viewBox=\"0 0 24 24\" fill=\"none\"><path d=\"M6 6H4v2h2V6zm14 0H8v2h12V6zM4 11h2v2H4v-2zm16 0H8v2h12v-2zM4 16h2v2H4v-2zm16 0H8v2h12v-2z\" fill=\"currentColor\"><\/path><\/svg><svg style=\"fill: #999;color:#999\" class=\"arrow-unsorted-368013\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"10px\" height=\"10px\" viewBox=\"0 0 24 24\" version=\"1.2\" baseProfile=\"tiny\"><path d=\"M18.2 9.3l-6.2-6.3-6.2 6.3c-.2.2-.3.4-.3.7s.1.5.3.7c.2.2.4.3.7.3h11c.3 0 .5-.1.7-.3.2-.2.3-.5.3-.7s-.1-.5-.3-.7zM5.8 14.7l6.2 6.3 6.2-6.3c.2-.2.3-.5.3-.7s-.1-.5-.3-.7c-.2-.2-.4-.3-.7-.3h-11c-.3 0-.5.1-.7.3-.2.2-.3.5-.3.7s.1.5.3.7z\"\/><\/svg><\/span><\/span><\/span><\/a><\/span><\/div>\n<nav><ul class='ez-toc-list ez-toc-list-level-1 ' ><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-1\" href=\"https:\/\/www.inesem.es\/revistadigital\/informatica-y-tics\/desarrollo-web-responsive-en-mis-sitios\/#Diseno_web_responsive_VS_Diseno_web_adaptativo\" title=\"Dise\u00f1o web responsive VS Dise\u00f1o web adaptativo\">Dise\u00f1o web responsive VS Dise\u00f1o web adaptativo<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-2\" href=\"https:\/\/www.inesem.es\/revistadigital\/informatica-y-tics\/desarrollo-web-responsive-en-mis-sitios\/#Caracteristicas_de_un_desarrollo_web_responsive\" title=\"Caracter\u00edsticas de un desarrollo web responsive\">Caracter\u00edsticas de un desarrollo web responsive<\/a><ul class='ez-toc-list-level-3' ><li class='ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-3\" href=\"https:\/\/www.inesem.es\/revistadigital\/informatica-y-tics\/desarrollo-web-responsive-en-mis-sitios\/#Fluid_Grids_y_Diseno_fluido\" title=\"Fluid Grids y Dise\u00f1o fluido\">Fluid Grids y Dise\u00f1o fluido<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-4\" href=\"https:\/\/www.inesem.es\/revistadigital\/informatica-y-tics\/desarrollo-web-responsive-en-mis-sitios\/#Imagenes_flexibles\" title=\"Im\u00e1genes flexibles\">Im\u00e1genes flexibles<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-5\" href=\"https:\/\/www.inesem.es\/revistadigital\/informatica-y-tics\/desarrollo-web-responsive-en-mis-sitios\/#Medias_Queries\" title=\"Medias Queries\">Medias Queries<\/a><\/li><\/ul><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-6\" href=\"https:\/\/www.inesem.es\/revistadigital\/informatica-y-tics\/desarrollo-web-responsive-en-mis-sitios\/#Apuesta_por_el_diseno_responsive\" title=\"Apuesta por el dise\u00f1o responsive.\">Apuesta por el dise\u00f1o responsive.<\/a><\/li><\/ul><\/nav><\/div>\n<h2 style=\"text-align: justify;\"><span class=\"ez-toc-section\" id=\"Diseno_web_responsive_VS_Diseno_web_adaptativo\"><\/span>Dise\u00f1o web responsive VS Dise\u00f1o web adaptativo<span class=\"ez-toc-section-end\"><\/span><\/h2>\n<p style=\"text-align: justify;\">El <a href=\"https:\/\/www.inesem.es\/revistadigital\/diseno-y-artes-graficas\/mobile-first\" target=\"_blank\" rel=\"noopener\">dise\u00f1o web responsive<\/a> no es una \u00fanica t\u00e9cnica, sino que engloba una filosof\u00eda de dise\u00f1o y desarrollo. Como hemos visto, su objetivo es adaptar la apariencia de un entorno web a los diferentes dispositivos de visualizaci\u00f3n.<\/p>\n<p style=\"text-align: justify;\">Por el contrario, el Dise\u00f1o web adaptativo consiste en construir una web con diferentes dise\u00f1os. Cada dise\u00f1o est\u00e1 adaptado a un tipo de dispositivo. Tendremos un \u00fanico dise\u00f1o web y es el navegador el que detecta lo que se debe mostrar. El aspecto de la web siempre ser\u00e1 el mismo.<\/p>\n<p style=\"text-align: justify;\">Podemos ver a continuaci\u00f3n un resumen con las principales caracter\u00edsticas de ambos conceptos.<\/p>\n<p style=\"text-align: justify;\"><img loading=\"lazy\" decoding=\"async\" class=\"aligncenter wp-image-2670 \" title=\"Dise\u00f1o web responsive VS Dise\u00f1o web adaptativo\" src=\"https:\/\/www.inesem.es\/revistadigital\/informatica-y-tics\/files\/2018\/06\/resVSadap-1.jpg\" alt=\"Tabla en la que podemos comparar las caracter\u00edsticas del dise\u00f1o web responsive con el dise\u00f1o web adaptativo\" width=\"627\" height=\"418\" srcset=\"https:\/\/www.inesem.es\/revistadigital\/informatica-y-tics\/files\/2018\/06\/resVSadap-1.jpg 1020w, https:\/\/www.inesem.es\/revistadigital\/informatica-y-tics\/files\/2018\/06\/resVSadap-1-175x117.jpg 175w, https:\/\/www.inesem.es\/revistadigital\/informatica-y-tics\/files\/2018\/06\/resVSadap-1-768x512.jpg 768w, https:\/\/www.inesem.es\/revistadigital\/informatica-y-tics\/files\/2018\/06\/resVSadap-1-600x400.jpg 600w, https:\/\/www.inesem.es\/revistadigital\/informatica-y-tics\/files\/2018\/06\/resVSadap-1-283x190.jpg 283w\" sizes=\"(max-width: 627px) 100vw, 627px\" \/><\/p>\n<h2 style=\"text-align: justify;\"><span class=\"ez-toc-section\" id=\"Caracteristicas_de_un_desarrollo_web_responsive\"><\/span>Caracter\u00edsticas de un desarrollo web responsive<span class=\"ez-toc-section-end\"><\/span><\/h2>\n<p style=\"text-align: justify;\">Cuando dise\u00f1amos una web, el objetivo es que las personas tengan una <a href=\"https:\/\/www.inesem.es\/revistadigital\/informatica-y-tics\/experiencia-de-usuario\/\">experiencia de usuario<\/a> grata y vuelvan. Adem\u00e1s guiaremos al usuario hacia los contenidos que nosotros queremos.<\/p>\n<p style=\"text-align: justify;\">En el desarrollo web responsive, el servidor siempre env\u00eda el mismo c\u00f3digo HTML a todos los dispositivos y se utiliza c\u00f3digo <a href=\"https:\/\/www.inesem.es\/revistadigital\/informatica-y-tics\/estilos-css-web\/\" target=\"_blank\" rel=\"noopener\">CSS<\/a> para modificar el procesamiento de la p\u00e1gina en el dispositivo. Por tanto, se proporciona a todos los dispositivos un mismo c\u00f3digo que se ajusta al tama\u00f1o de pantalla.<\/p>\n<p style=\"text-align: justify;\">Seg\u00fan <a href=\"https:\/\/ethanmarcotte.com\/\" target=\"_blank\" rel=\"noopener\">Ethan Marcotte<\/a>, el camino a seguir para un desarrollo responsive consiste en aplicar una serie de t\u00e9cnicas que focalizan el dise\u00f1o para que la web se adapte a:<\/p>\n<ul style=\"text-align: justify;\">\n<li>Todos las resoluciones y tama\u00f1o de pantalla<\/li>\n<li>Todos los navegadores y sistemas<\/li>\n<li>Todas las velocidades de conexi\u00f3n<\/li>\n<\/ul>\n<p style=\"text-align: justify;\">Veamos qu\u00e9\u00a0 t\u00e9cnicas son las que nos propone y c\u00f3mo afectan cada una de ellas en el desarrollo.<\/p>\n<h3 style=\"text-align: justify;\"><span class=\"ez-toc-section\" id=\"Fluid_Grids_y_Diseno_fluido\"><\/span>Fluid Grids y Dise\u00f1o fluido<span class=\"ez-toc-section-end\"><\/span><\/h3>\n<p style=\"text-align: justify;\">Esta t\u00e9cnica se centra en NO fijar un ancho fijo para el dise\u00f1o de la interfaz. Cada navegador adapta el contenido (layout) a su tama\u00f1o. Ahora los p\u00edxeles no van a ser la unidad de medida, sino que nos basaremos en porcentajes y relaciones.<\/p>\n<p style=\"text-align: justify;\">Hasta la aparici\u00f3n del concepto responsive, para el dise\u00f1o de la interfaz se establec\u00edan resoluciones de unos 960 p\u00edxeles. Esto funcionaba porque pr\u00e1cticamente el 100% de los usuarios pod\u00edan adaptarse y leer en esta resoluci\u00f3n, independientemente del medio.<\/p>\n<p style=\"text-align: justify;\">Con el dise\u00f1o fluido, conseguimos un ancho flexible de la plantilla. Creamos layouts que se extiende o encogen en las diferentes resoluciones.<\/p>\n<p style=\"text-align: justify;\">El objetivo es conseguir ajustar la dimensi\u00f3n horizontal de la pantalla de forma autom\u00e1tica y sin necesidad de una barra de desplazamiento. El dise\u00f1o se expande al ancho disponible de la pantalla gracias a que el tama\u00f1o de los distintos elementos es un porcentaje del total disponible.<\/p>\n<h3 style=\"text-align: justify;\"><span class=\"ez-toc-section\" id=\"Imagenes_flexibles\"><\/span>Im\u00e1genes flexibles<span class=\"ez-toc-section-end\"><\/span><\/h3>\n<p style=\"text-align: justify;\">Las im\u00e1genes dejar\u00e1n de tener un tama\u00f1o fijo, sino que se cargar\u00e1n en el tama\u00f1o m\u00e1s grande a utilizar. El sistema se encarga de reescalar la imagen seg\u00fan las necesidades de cada dispositivo.<\/p>\n<p style=\"text-align: justify;\">Los fondos tambi\u00e9n deben ser flexibles, de manera que la web no pierda sus caracter\u00edsticas. El usuario debe tener la impresi\u00f3n de encontrarse siempre en el mismo entorno, independientemente del dispositivo.<\/p>\n<p style=\"text-align: justify;\">Por tanto, debemos adaptar el ancho de las im\u00e1genes de manera que nunca exceda el ancho del elemento que la contiene. As\u00ed si cambia el ancho del elemento contenedor, tambi\u00e9n lo har\u00e1 la imagen en todos los navegadores. De la misma forma podemos extender este concepto a los videos u otros objetos.<\/p>\n<h3 style=\"text-align: justify;\"><span class=\"ez-toc-section\" id=\"Medias_Queries\"><\/span>Medias Queries<span class=\"ez-toc-section-end\"><\/span><\/h3>\n<p style=\"text-align: justify;\">El uso de las medias queries nos permite que todos los dispositivos vean la web con los elementos dispuestos de tal manera que se facilite su lectura. Nos van a permitir definir estilos diferentes para cada tama\u00f1o de pantalla. Si las caracter\u00edsticas del medio de visualizaci\u00f3n, est\u00e1n dentro de un condicional establecido con los Medias Queries, se aplicar\u00e1n una serie de instrucciones <a href=\"https:\/\/www.w3c.es\/\" target=\"_blank\" rel=\"noopener\">CSS<\/a> espec\u00edficas.<\/p>\n<p style=\"text-align: justify;\">En este sentido, el desarrollador web debe tener en mente la expresi\u00f3n condicional que debe cumplirse para que se apliquen ciertos estilos. Adem\u00e1s una misma expresi\u00f3n condicional puede tener varias condiciones mediante los operados l\u00f3gicos.<\/p>\n<p style=\"text-align: justify;\">Por tanto una consulta Media Query estar\u00e1 formada por:<\/p>\n<ol style=\"text-align: justify;\">\n<li>Un tipo de <strong>medio<\/strong><\/li>\n<li>Una <strong>consulta<\/strong> concreta sobre la caracter\u00edstica del medio y el valor r objetivo.<\/li>\n<\/ol>\n<h2 style=\"text-align: justify;\"><span class=\"ez-toc-section\" id=\"Apuesta_por_el_diseno_responsive\"><\/span>Apuesta por el dise\u00f1o responsive.<span class=\"ez-toc-section-end\"><\/span><\/h2>\n<p style=\"text-align: justify;\">El desarrollo web responsive se consolida como una de las mejores pr\u00e1cticas a d\u00eda de hoy dentro del dise\u00f1o y desarrollo web. Con una sola versi\u00f3n de HTML y CSS optimizamos el sitio web para todos los dispositivos, lo que va a mejorar la experiencia de usuario. Adem\u00e1s evitamos el contenido duplicado y mejoramos la experiencia en la navegaci\u00f3n offline.<\/p>\n<p style=\"text-align: justify;\">A todo ello le sumamos la reducci\u00f3n en costes y mantenimiento. Ahora las actualizaciones del sitio web se realizan una \u00fanica vez y no una por cada tipo de dispositivo de visualizaci\u00f3n.<\/p>\n<p style=\"text-align: justify;\">En base a esto, el objetivo debe ser crear nuestras web directamente con un dise\u00f1o responsive o migrar nuestros proyectos, en la medida de lo posible, hacia este concepto.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>\u00bfEst\u00e1s desarrollando un proyecto web? Si quieres saber en qu\u00e9 consiste el desarrollo web responsive y c\u00f3mo influye en tu marca personal aqu\u00ed te damos las pautas para que lo lleves a cabo desde los inicio de tu proyecto.<\/p>\n","protected":false},"author":89272,"featured_media":2673,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[5],"class_list":["post-2668","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-desarrollo-de-aplicaciones"],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v23.5 - https:\/\/yoast.com\/wordpress\/plugins\/seo\/ -->\n<title>El camino hacia un desarrollo web responsive de los site<\/title>\n<meta name=\"description\" content=\"El dise\u00f1o web responsive es hoy en d\u00eda un requisito imprescindible para todas aquellas empresas que tengan un site en Internet\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/www.inesem.es\/revistadigital\/informatica-y-tics\/desarrollo-web-responsive-en-mis-sitios\" \/>\n<meta property=\"og:locale\" content=\"es_ES\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"El camino hacia un desarrollo web responsive de los site\" \/>\n<meta property=\"og:description\" content=\"El dise\u00f1o web responsive es hoy en d\u00eda un requisito imprescindible para todas aquellas empresas que tengan un site en Internet\" \/>\n<meta property=\"og:url\" content=\"https:\/\/www.inesem.es\/revistadigital\/informatica-y-tics\/desarrollo-web-responsive-en-mis-sitios\" \/>\n<meta property=\"og:site_name\" content=\"Canal Inform\u00e1tica y TICS\" \/>\n<meta property=\"article:publisher\" content=\"https:\/\/www.facebook.com\/InesemBusinessSchool\/\" \/>\n<meta property=\"article:published_time\" content=\"2018-06-07T11:26:28+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2022-09-06T11:46:28+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/www.inesem.es\/revistadigital\/informatica-y-tics\/files\/2018\/06\/1.jpg\" \/>\n\t<meta property=\"og:image:width\" content=\"1020\" \/>\n\t<meta property=\"og:image:height\" content=\"680\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/jpeg\" \/>\n<meta name=\"author\" content=\"Paula Rochina\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:creator\" content=\"@inesem\" \/>\n<meta name=\"twitter:site\" content=\"@inesem\" \/>\n<meta name=\"twitter:label1\" content=\"Escrito por\" \/>\n\t<meta name=\"twitter:data1\" content=\"Paula Rochina\" \/>\n\t<meta name=\"twitter:label2\" content=\"Tiempo de lectura\" \/>\n\t<meta name=\"twitter:data2\" content=\"6 minutos\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\/\/www.inesem.es\/revistadigital\/informatica-y-tics\/desarrollo-web-responsive-en-mis-sitios#article\",\"isPartOf\":{\"@id\":\"https:\/\/www.inesem.es\/revistadigital\/informatica-y-tics\/desarrollo-web-responsive-en-mis-sitios\"},\"author\":{\"name\":\"Paula Rochina\",\"@id\":\"https:\/\/www.inesem.es\/revistadigital\/informatica-y-tics\/#\/schema\/person\/b5904573ef1312c302269e2710d1f7c1\"},\"headline\":\"\u00bfPor qu\u00e9 desarrollo web responsive en mis site?\",\"datePublished\":\"2018-06-07T11:26:28+00:00\",\"dateModified\":\"2022-09-06T11:46:28+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/www.inesem.es\/revistadigital\/informatica-y-tics\/desarrollo-web-responsive-en-mis-sitios\"},\"wordCount\":1158,\"commentCount\":0,\"publisher\":{\"@id\":\"https:\/\/www.inesem.es\/revistadigital\/informatica-y-tics\/#organization\"},\"image\":{\"@id\":\"https:\/\/www.inesem.es\/revistadigital\/informatica-y-tics\/desarrollo-web-responsive-en-mis-sitios#primaryimage\"},\"thumbnailUrl\":\"https:\/\/www.inesem.es\/revistadigital\/informatica-y-tics\/files\/2018\/06\/1.jpg\",\"keywords\":[\"desarrollo web\",\"dise\u00f1o responsive\",\"fluid grids\",\"medias queries\",\"responsive\",\"web responsive\"],\"articleSection\":[\"Desarrollo de Aplicaciones\"],\"inLanguage\":\"es\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\/\/www.inesem.es\/revistadigital\/informatica-y-tics\/desarrollo-web-responsive-en-mis-sitios#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/www.inesem.es\/revistadigital\/informatica-y-tics\/desarrollo-web-responsive-en-mis-sitios\",\"url\":\"https:\/\/www.inesem.es\/revistadigital\/informatica-y-tics\/desarrollo-web-responsive-en-mis-sitios\",\"name\":\"El camino hacia un desarrollo web responsive de los site\",\"isPartOf\":{\"@id\":\"https:\/\/www.inesem.es\/revistadigital\/informatica-y-tics\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/www.inesem.es\/revistadigital\/informatica-y-tics\/desarrollo-web-responsive-en-mis-sitios#primaryimage\"},\"image\":{\"@id\":\"https:\/\/www.inesem.es\/revistadigital\/informatica-y-tics\/desarrollo-web-responsive-en-mis-sitios#primaryimage\"},\"thumbnailUrl\":\"https:\/\/www.inesem.es\/revistadigital\/informatica-y-tics\/files\/2018\/06\/1.jpg\",\"datePublished\":\"2018-06-07T11:26:28+00:00\",\"dateModified\":\"2022-09-06T11:46:28+00:00\",\"description\":\"El dise\u00f1o web responsive es hoy en d\u00eda un requisito imprescindible para todas aquellas empresas que tengan un site en Internet\",\"breadcrumb\":{\"@id\":\"https:\/\/www.inesem.es\/revistadigital\/informatica-y-tics\/desarrollo-web-responsive-en-mis-sitios#breadcrumb\"},\"inLanguage\":\"es\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/www.inesem.es\/revistadigital\/informatica-y-tics\/desarrollo-web-responsive-en-mis-sitios\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"es\",\"@id\":\"https:\/\/www.inesem.es\/revistadigital\/informatica-y-tics\/desarrollo-web-responsive-en-mis-sitios#primaryimage\",\"url\":\"https:\/\/www.inesem.es\/revistadigital\/informatica-y-tics\/files\/2018\/06\/1.jpg\",\"contentUrl\":\"https:\/\/www.inesem.es\/revistadigital\/informatica-y-tics\/files\/2018\/06\/1.jpg\",\"width\":\"1020\",\"height\":\"680\",\"caption\":\"Te damos las pautas a seguir para un desarrollo web responsive que se adapte a tus necesidades\"},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/www.inesem.es\/revistadigital\/informatica-y-tics\/desarrollo-web-responsive-en-mis-sitios#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/www.inesem.es\/revistadigital\/informatica-y-tics\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Desarrollo de Aplicaciones\",\"item\":\"https:\/\/www.inesem.es\/revistadigital\/informatica-y-tics\/categorias\/desarrollo-de-aplicaciones\"},{\"@type\":\"ListItem\",\"position\":3,\"name\":\"\u00bfPor qu\u00e9 desarrollo web responsive en mis site?\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/www.inesem.es\/revistadigital\/informatica-y-tics\/#website\",\"url\":\"https:\/\/www.inesem.es\/revistadigital\/informatica-y-tics\/\",\"name\":\"Canal Inform\u00e1tica y TICS\",\"description\":\"Canal de Noticias gestionado por el Departamento Docente de Inform\u00e1tica y TICS de INESEM\",\"publisher\":{\"@id\":\"https:\/\/www.inesem.es\/revistadigital\/informatica-y-tics\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/www.inesem.es\/revistadigital\/informatica-y-tics\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"es\"},{\"@type\":\"Organization\",\"@id\":\"https:\/\/www.inesem.es\/revistadigital\/informatica-y-tics\/#organization\",\"name\":\"Canal Inform\u00e1tica y TICS\",\"url\":\"https:\/\/www.inesem.es\/revistadigital\/informatica-y-tics\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"es\",\"@id\":\"https:\/\/www.inesem.es\/revistadigital\/informatica-y-tics\/#\/schema\/logo\/image\/\",\"url\":\"\",\"contentUrl\":\"\",\"caption\":\"Canal Inform\u00e1tica y TICS\"},\"image\":{\"@id\":\"https:\/\/www.inesem.es\/revistadigital\/informatica-y-tics\/#\/schema\/logo\/image\/\"},\"sameAs\":[\"https:\/\/www.facebook.com\/InesemBusinessSchool\/\",\"https:\/\/x.com\/inesem\",\"http:\/\/www.linkedin.com\/company\/2370697\",\"https:\/\/www.youtube.com\/user\/inesembusinesschool\/\"]},{\"@type\":\"Person\",\"@id\":\"https:\/\/www.inesem.es\/revistadigital\/informatica-y-tics\/#\/schema\/person\/b5904573ef1312c302269e2710d1f7c1\",\"name\":\"Paula Rochina\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"es\",\"@id\":\"https:\/\/www.inesem.es\/revistadigital\/informatica-y-tics\/#\/schema\/person\/image\/\",\"url\":\"https:\/\/www.inesem.es\/revistadigital\/wp-content\/uploads\/2016\/12\/Paula-Rochina_avatar_1480596807-96x96.jpg\",\"contentUrl\":\"https:\/\/www.inesem.es\/revistadigital\/wp-content\/uploads\/2016\/12\/Paula-Rochina_avatar_1480596807-96x96.jpg\",\"caption\":\"Paula Rochina\"},\"description\":\"EDUCACI\u00d3N: \u2022 M\u00e1ster en Formaci\u00f3n del Profesorado de Educaci\u00f3n Secundaria Obligatoria, Bachillerato, Formaci\u00f3n Profesional y Ense\u00f1anza de Idiomas (Especialidad en Inform\u00e1tica) en la Universidad de Granada. \u2022 Licenciada en Ingenier\u00eda T\u00e9cnica en Inform\u00e1tica de Sistemas en la Universidad de Granada. EXPERIENCIA: \u2022 Profesora del Departamento de Inform\u00e1tica y Comunicaciones de INESEM Business School. \u2022 Profesora de clases de rob\u00f3tica educativa. \u2022 Profesora de ciclos medios y superiores de Inform\u00e1tica. \u2022 Ayudante de coordinaci\u00f3n en el servicio de monitores de atenci\u00f3n al p\u00fablico en el Parque de las Ciencias de Granada. ESCRIBE SOBRE:Inform\u00e1tica \u2022 Ciberseguridad \u2022 Seguridad de la informaci\u00f3n \u2022 Big Data \u2022 Anal\u00edtica web \u2022 Web \u2022 Programaci\u00f3n Linkedin de Paula Ingeniera T\u00e9cnica en Inform\u00e1tica especializada en ense\u00f1anza. Amante de las nuevas tecnolog\u00edas y la innovaci\u00f3n educativa. Compagina su profesi\u00f3n con su vocaci\u00f3n como profesora del Departamento de Inform\u00e1tica de INESEM.\",\"url\":\"https:\/\/www.inesem.es\/revistadigital\/informatica-y-tics\/autores\/paula-rochina\"}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"El camino hacia un desarrollo web responsive de los site","description":"El dise\u00f1o web responsive es hoy en d\u00eda un requisito imprescindible para todas aquellas empresas que tengan un site en Internet","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:\/\/www.inesem.es\/revistadigital\/informatica-y-tics\/desarrollo-web-responsive-en-mis-sitios","og_locale":"es_ES","og_type":"article","og_title":"El camino hacia un desarrollo web responsive de los site","og_description":"El dise\u00f1o web responsive es hoy en d\u00eda un requisito imprescindible para todas aquellas empresas que tengan un site en Internet","og_url":"https:\/\/www.inesem.es\/revistadigital\/informatica-y-tics\/desarrollo-web-responsive-en-mis-sitios","og_site_name":"Canal Inform\u00e1tica y TICS","article_publisher":"https:\/\/www.facebook.com\/InesemBusinessSchool\/","article_published_time":"2018-06-07T11:26:28+00:00","article_modified_time":"2022-09-06T11:46:28+00:00","og_image":[{"width":1020,"height":680,"url":"https:\/\/www.inesem.es\/revistadigital\/informatica-y-tics\/files\/2018\/06\/1.jpg","type":"image\/jpeg"}],"author":"Paula Rochina","twitter_card":"summary_large_image","twitter_creator":"@inesem","twitter_site":"@inesem","twitter_misc":{"Escrito por":"Paula Rochina","Tiempo de lectura":"6 minutos"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/www.inesem.es\/revistadigital\/informatica-y-tics\/desarrollo-web-responsive-en-mis-sitios#article","isPartOf":{"@id":"https:\/\/www.inesem.es\/revistadigital\/informatica-y-tics\/desarrollo-web-responsive-en-mis-sitios"},"author":{"name":"Paula Rochina","@id":"https:\/\/www.inesem.es\/revistadigital\/informatica-y-tics\/#\/schema\/person\/b5904573ef1312c302269e2710d1f7c1"},"headline":"\u00bfPor qu\u00e9 desarrollo web responsive en mis site?","datePublished":"2018-06-07T11:26:28+00:00","dateModified":"2022-09-06T11:46:28+00:00","mainEntityOfPage":{"@id":"https:\/\/www.inesem.es\/revistadigital\/informatica-y-tics\/desarrollo-web-responsive-en-mis-sitios"},"wordCount":1158,"commentCount":0,"publisher":{"@id":"https:\/\/www.inesem.es\/revistadigital\/informatica-y-tics\/#organization"},"image":{"@id":"https:\/\/www.inesem.es\/revistadigital\/informatica-y-tics\/desarrollo-web-responsive-en-mis-sitios#primaryimage"},"thumbnailUrl":"https:\/\/www.inesem.es\/revistadigital\/informatica-y-tics\/files\/2018\/06\/1.jpg","keywords":["desarrollo web","dise\u00f1o responsive","fluid grids","medias queries","responsive","web responsive"],"articleSection":["Desarrollo de Aplicaciones"],"inLanguage":"es","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/www.inesem.es\/revistadigital\/informatica-y-tics\/desarrollo-web-responsive-en-mis-sitios#respond"]}]},{"@type":"WebPage","@id":"https:\/\/www.inesem.es\/revistadigital\/informatica-y-tics\/desarrollo-web-responsive-en-mis-sitios","url":"https:\/\/www.inesem.es\/revistadigital\/informatica-y-tics\/desarrollo-web-responsive-en-mis-sitios","name":"El camino hacia un desarrollo web responsive de los site","isPartOf":{"@id":"https:\/\/www.inesem.es\/revistadigital\/informatica-y-tics\/#website"},"primaryImageOfPage":{"@id":"https:\/\/www.inesem.es\/revistadigital\/informatica-y-tics\/desarrollo-web-responsive-en-mis-sitios#primaryimage"},"image":{"@id":"https:\/\/www.inesem.es\/revistadigital\/informatica-y-tics\/desarrollo-web-responsive-en-mis-sitios#primaryimage"},"thumbnailUrl":"https:\/\/www.inesem.es\/revistadigital\/informatica-y-tics\/files\/2018\/06\/1.jpg","datePublished":"2018-06-07T11:26:28+00:00","dateModified":"2022-09-06T11:46:28+00:00","description":"El dise\u00f1o web responsive es hoy en d\u00eda un requisito imprescindible para todas aquellas empresas que tengan un site en Internet","breadcrumb":{"@id":"https:\/\/www.inesem.es\/revistadigital\/informatica-y-tics\/desarrollo-web-responsive-en-mis-sitios#breadcrumb"},"inLanguage":"es","potentialAction":[{"@type":"ReadAction","target":["https:\/\/www.inesem.es\/revistadigital\/informatica-y-tics\/desarrollo-web-responsive-en-mis-sitios"]}]},{"@type":"ImageObject","inLanguage":"es","@id":"https:\/\/www.inesem.es\/revistadigital\/informatica-y-tics\/desarrollo-web-responsive-en-mis-sitios#primaryimage","url":"https:\/\/www.inesem.es\/revistadigital\/informatica-y-tics\/files\/2018\/06\/1.jpg","contentUrl":"https:\/\/www.inesem.es\/revistadigital\/informatica-y-tics\/files\/2018\/06\/1.jpg","width":"1020","height":"680","caption":"Te damos las pautas a seguir para un desarrollo web responsive que se adapte a tus necesidades"},{"@type":"BreadcrumbList","@id":"https:\/\/www.inesem.es\/revistadigital\/informatica-y-tics\/desarrollo-web-responsive-en-mis-sitios#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/www.inesem.es\/revistadigital\/informatica-y-tics\/"},{"@type":"ListItem","position":2,"name":"Desarrollo de Aplicaciones","item":"https:\/\/www.inesem.es\/revistadigital\/informatica-y-tics\/categorias\/desarrollo-de-aplicaciones"},{"@type":"ListItem","position":3,"name":"\u00bfPor qu\u00e9 desarrollo web responsive en mis site?"}]},{"@type":"WebSite","@id":"https:\/\/www.inesem.es\/revistadigital\/informatica-y-tics\/#website","url":"https:\/\/www.inesem.es\/revistadigital\/informatica-y-tics\/","name":"Canal Inform\u00e1tica y TICS","description":"Canal de Noticias gestionado por el Departamento Docente de Inform\u00e1tica y TICS de INESEM","publisher":{"@id":"https:\/\/www.inesem.es\/revistadigital\/informatica-y-tics\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/www.inesem.es\/revistadigital\/informatica-y-tics\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"es"},{"@type":"Organization","@id":"https:\/\/www.inesem.es\/revistadigital\/informatica-y-tics\/#organization","name":"Canal Inform\u00e1tica y TICS","url":"https:\/\/www.inesem.es\/revistadigital\/informatica-y-tics\/","logo":{"@type":"ImageObject","inLanguage":"es","@id":"https:\/\/www.inesem.es\/revistadigital\/informatica-y-tics\/#\/schema\/logo\/image\/","url":"","contentUrl":"","caption":"Canal Inform\u00e1tica y TICS"},"image":{"@id":"https:\/\/www.inesem.es\/revistadigital\/informatica-y-tics\/#\/schema\/logo\/image\/"},"sameAs":["https:\/\/www.facebook.com\/InesemBusinessSchool\/","https:\/\/x.com\/inesem","http:\/\/www.linkedin.com\/company\/2370697","https:\/\/www.youtube.com\/user\/inesembusinesschool\/"]},{"@type":"Person","@id":"https:\/\/www.inesem.es\/revistadigital\/informatica-y-tics\/#\/schema\/person\/b5904573ef1312c302269e2710d1f7c1","name":"Paula Rochina","image":{"@type":"ImageObject","inLanguage":"es","@id":"https:\/\/www.inesem.es\/revistadigital\/informatica-y-tics\/#\/schema\/person\/image\/","url":"https:\/\/www.inesem.es\/revistadigital\/wp-content\/uploads\/2016\/12\/Paula-Rochina_avatar_1480596807-96x96.jpg","contentUrl":"https:\/\/www.inesem.es\/revistadigital\/wp-content\/uploads\/2016\/12\/Paula-Rochina_avatar_1480596807-96x96.jpg","caption":"Paula Rochina"},"description":"EDUCACI\u00d3N: \u2022 M\u00e1ster en Formaci\u00f3n del Profesorado de Educaci\u00f3n Secundaria Obligatoria, Bachillerato, Formaci\u00f3n Profesional y Ense\u00f1anza de Idiomas (Especialidad en Inform\u00e1tica) en la Universidad de Granada. \u2022 Licenciada en Ingenier\u00eda T\u00e9cnica en Inform\u00e1tica de Sistemas en la Universidad de Granada. EXPERIENCIA: \u2022 Profesora del Departamento de Inform\u00e1tica y Comunicaciones de INESEM Business School. \u2022 Profesora de clases de rob\u00f3tica educativa. \u2022 Profesora de ciclos medios y superiores de Inform\u00e1tica. \u2022 Ayudante de coordinaci\u00f3n en el servicio de monitores de atenci\u00f3n al p\u00fablico en el Parque de las Ciencias de Granada. ESCRIBE SOBRE:Inform\u00e1tica \u2022 Ciberseguridad \u2022 Seguridad de la informaci\u00f3n \u2022 Big Data \u2022 Anal\u00edtica web \u2022 Web \u2022 Programaci\u00f3n Linkedin de Paula Ingeniera T\u00e9cnica en Inform\u00e1tica especializada en ense\u00f1anza. Amante de las nuevas tecnolog\u00edas y la innovaci\u00f3n educativa. Compagina su profesi\u00f3n con su vocaci\u00f3n como profesora del Departamento de Inform\u00e1tica de INESEM.","url":"https:\/\/www.inesem.es\/revistadigital\/informatica-y-tics\/autores\/paula-rochina"}]}},"autor_name":{"name":"Paula Rochina"},"featured_image":{"attachment_meta":{"width":"1020","height":"680","file":"2018\/06\/1.jpg","sizes":{"thumbnail":{"file":"1-345x180.jpg","width":"345","height":"180","mime_type":"image\/jpeg","url":"https:\/\/www.inesem.es\/revistadigital\/informatica-y-tics\/files\/2018\/06\/1-345x180.jpg"},"medium":{"file":"1-175x117.jpg","width":"175","height":"117","mime_type":"image\/jpeg","url":"https:\/\/www.inesem.es\/revistadigital\/informatica-y-tics\/files\/2018\/06\/1-175x117.jpg"},"medium_large":{"file":"1-768x512.jpg","width":"768","height":"512","mime_type":"image\/jpeg","url":"https:\/\/www.inesem.es\/revistadigital\/informatica-y-tics\/files\/2018\/06\/1-768x512.jpg"},"large":{"file":"1-1020x680.jpg","width":"1020","height":"680","mime_type":"image\/jpeg","url":"https:\/\/www.inesem.es\/revistadigital\/informatica-y-tics\/files\/2018\/06\/1-1020x680.jpg"},"wysija-newsletters-max":{"file":"1-600x400.jpg","width":"600","height":"400","mime_type":"image\/jpeg","url":"https:\/\/www.inesem.es\/revistadigital\/informatica-y-tics\/files\/2018\/06\/1-600x400.jpg"},"thumb-small":{"file":"1-59x42.jpg","width":"59","height":"42","mime_type":"image\/jpeg","url":"https:\/\/www.inesem.es\/revistadigital\/informatica-y-tics\/files\/2018\/06\/1-59x42.jpg"},"thumb-standard":{"file":"1-110x110.jpg","width":"110","height":"110","mime_type":"image\/jpeg","url":"https:\/\/www.inesem.es\/revistadigital\/informatica-y-tics\/files\/2018\/06\/1-110x110.jpg"},"thumb-medium":{"file":"1-196x166.jpg","width":"196","height":"166","mime_type":"image\/jpeg","url":"https:\/\/www.inesem.es\/revistadigital\/informatica-y-tics\/files\/2018\/06\/1-196x166.jpg"},"thumb-large":{"file":"1-283x190.jpg","width":"283","height":"190","mime_type":"image\/jpeg","url":"https:\/\/www.inesem.es\/revistadigital\/informatica-y-tics\/files\/2018\/06\/1-283x190.jpg"},"thumb-anteriores":{"file":"1-230x163.jpg","width":"230","height":"163","mime_type":"image\/jpeg","url":"https:\/\/www.inesem.es\/revistadigital\/informatica-y-tics\/files\/2018\/06\/1-230x163.jpg"},"thumb-inverso":{"file":"1-369x261.jpg","width":"369","height":"261","mime_type":"image\/jpeg","url":"https:\/\/www.inesem.es\/revistadigital\/informatica-y-tics\/files\/2018\/06\/1-369x261.jpg"},"thumb-cercano":{"file":"1-650x200.jpg","width":"650","height":"200","mime_type":"image\/jpeg","url":"https:\/\/www.inesem.es\/revistadigital\/informatica-y-tics\/files\/2018\/06\/1-650x200.jpg"},"thumb-slider":{"file":"1-574x430.jpg","width":"574","height":"430","mime_type":"image\/jpeg","url":"https:\/\/www.inesem.es\/revistadigital\/informatica-y-tics\/files\/2018\/06\/1-574x430.jpg"},"thumb-busqueda":{"file":"1-580x375.jpg","width":"580","height":"375","mime_type":"image\/jpeg","url":"https:\/\/www.inesem.es\/revistadigital\/informatica-y-tics\/files\/2018\/06\/1-580x375.jpg"},"thumb-formacion-continua":{"file":"1-440x336.jpg","width":"440","height":"336","mime_type":"image\/jpeg","url":"https:\/\/www.inesem.es\/revistadigital\/informatica-y-tics\/files\/2018\/06\/1-440x336.jpg"},"advps-thumb-one":{"file":"1-600x220.jpg","width":"600","height":"220","mime_type":"image\/jpeg","url":"https:\/\/www.inesem.es\/revistadigital\/informatica-y-tics\/files\/2018\/06\/1-600x220.jpg"}},"image_meta":{"aperture":"0","credit":"","camera":"","caption":"","created_timestamp":"0","copyright":"","focal_length":"0","iso":"0","shutter_speed":"0","title":"","orientation":"0"}}},"_links":{"self":[{"href":"https:\/\/www.inesem.es\/revistadigital\/informatica-y-tics\/wp-json\/wp\/v2\/posts\/2668"}],"collection":[{"href":"https:\/\/www.inesem.es\/revistadigital\/informatica-y-tics\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.inesem.es\/revistadigital\/informatica-y-tics\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.inesem.es\/revistadigital\/informatica-y-tics\/wp-json\/wp\/v2\/users\/89272"}],"replies":[{"embeddable":true,"href":"https:\/\/www.inesem.es\/revistadigital\/informatica-y-tics\/wp-json\/wp\/v2\/comments?post=2668"}],"version-history":[{"count":0,"href":"https:\/\/www.inesem.es\/revistadigital\/informatica-y-tics\/wp-json\/wp\/v2\/posts\/2668\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.inesem.es\/revistadigital\/informatica-y-tics\/wp-json\/wp\/v2\/media\/2673"}],"wp:attachment":[{"href":"https:\/\/www.inesem.es\/revistadigital\/informatica-y-tics\/wp-json\/wp\/v2\/media?parent=2668"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.inesem.es\/revistadigital\/informatica-y-tics\/wp-json\/wp\/v2\/categories?post=2668"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}