{
    "id": 1744,
    "date": "2022-02-18T21:17:00",
    "date_gmt": "2022-02-18T21:17:00",
    "guid": {
        "rendered": "https:\/\/www.fabym.com\/?p=1744"
    },
    "modified": "2022-02-16T21:45:45",
    "modified_gmt": "2022-02-16T21:45:45",
    "slug": "como-hacer-responsive-una-pagina-web",
    "status": "publish",
    "type": "post",
    "link": "https:\/\/fabym.com\/es_co\/como-hacer-responsive-una-pagina-web\/",
    "title": {
        "rendered": "Como hacer Responsive una Pagina Web"
    },
    "content": {
        "rendered": "<p><strong>\u00bfQu\u00e9 es el Dise\u00f1o Responsivo?<\/strong><\/p>\n\n\n\n<p>El dise\u00f1o web receptivo se refiere a una estrategia de dise\u00f1o que crea sitios web que funcionan bien para dispositivos m\u00f3viles, tabletas y computadoras de escritorio. Los sitios web sin un dise\u00f1o receptivo corren el riesgo de alienar a un n\u00famero significativo de usuarios.<\/p>\n\n\n\n<p>Adem\u00e1s, Google considera la &#8220;compatibilidad con dispositivos m\u00f3viles&#8221; como un par\u00e1metro para la clasificaci\u00f3n.<\/p>\n\n\n\n<p>Adem\u00e1s, el 53,8% de los dise\u00f1adores web afirman que \u201cno responder en todos los dispositivos\u201d es una de las principales razones para redise\u00f1ar un sitio web. Naturalmente, los desarrolladores y dise\u00f1adores de sitios web ponen gran \u00e9nfasis en la creaci\u00f3n de sitios web receptivos en primer lugar. Este art\u00edculo explorar\u00e1 algunos m\u00e9todos mediante los cuales pueden lograr esto y probar\u00e1 sitios web para niveles adecuados de capacidad de respuesta.<\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img fetchpriority=\"high\" decoding=\"async\" width=\"1024\" height=\"293\" src=\"http:\/\/fabym.com\/wp-content\/uploads\/2022\/02\/Como-hacer-Responsive-una-Pagina-Web-1024x293.png\" alt=\"\" class=\"wp-image-1745\" srcset=\"https:\/\/fabym.com\/wp-content\/uploads\/2022\/02\/Como-hacer-Responsive-una-Pagina-Web-1024x293.png 1024w, https:\/\/fabym.com\/wp-content\/uploads\/2022\/02\/Como-hacer-Responsive-una-Pagina-Web-300x86.png 300w, https:\/\/fabym.com\/wp-content\/uploads\/2022\/02\/Como-hacer-Responsive-una-Pagina-Web-768x219.png 768w, https:\/\/fabym.com\/wp-content\/uploads\/2022\/02\/Como-hacer-Responsive-una-Pagina-Web-1536x439.png 1536w, https:\/\/fabym.com\/wp-content\/uploads\/2022\/02\/Como-hacer-Responsive-una-Pagina-Web-2048x585.png 2048w, https:\/\/fabym.com\/wp-content\/uploads\/2022\/02\/Como-hacer-Responsive-una-Pagina-Web-600x171.png 600w\" sizes=\"(max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"como-crear-un-sitio-web-responsive\">C\u00f3mo crear un sitio Web Responsive<\/h2>\n\n\n\n<p>La gu\u00eda para principiantes de dise\u00f1o web receptivo (ejemplos de c\u00f3digo y ejemplos de dise\u00f1o)<\/p>\n\n\n\n<p>Con un Internet al que se accede cada vez m\u00e1s desde dispositivos m\u00f3viles, ya no es suficiente tener un dise\u00f1o de sitio web est\u00e1tico que solo se ve bien en la pantalla de una computadora.<\/p>\n\n\n\n<p>Sin mencionar que tambi\u00e9n debe considerar tabletas, computadoras port\u00e1tiles 2 en 1 y diferentes modelos de tel\u00e9fonos inteligentes con diferentes dimensiones de pantalla al crear un dise\u00f1o.<\/p>\n\n\n\n<p>Por lo tanto, colocar su contenido en una sola columna y cancelarlo no va a ser suficiente.<\/p>\n\n\n\n<p>Con un dise\u00f1o web receptivo, puede asegurarse de que su sitio web se vea mejor en tel\u00e9fonos celulares, tabletas, computadoras port\u00e1tiles y pantallas de escritorio.<\/p>\n\n\n\n<p>Y esa mejora en la experiencia del usuario significa mayores conversiones y crecimiento empresarial.<\/p>\n\n\n\n<p>Esta gu\u00eda le brindar\u00e1 todo lo que necesita saber sobre el dise\u00f1o de sitios web receptivos, incluidas definiciones, un tutorial paso a paso, ejemplos y m\u00e1s.<\/p>\n\n\n\n<p><strong>Ahora que est\u00e1 familiarizado con los componentes b\u00e1sicos, es hora de hacer que su sitio web responda.<\/strong><\/p>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"1-el-diseno\">1\u2013 El dise\u00f1o<\/h2>\n\n\n\n<p>Al crear un sitio web receptivo o hacer receptivo un sitio existente, lo primero que debe observar es el dise\u00f1o.<\/p>\n\n\n\n<p>Cuando construyo sitios web receptivos, siempre empiezo creando un dise\u00f1o no receptivo, fijo en el tama\u00f1o predeterminado. Por ejemplo, el ancho predeterminado de CatsWhoCode.com es 1100px.<\/p>\n\n\n\n<p>Cuando estoy satisfecho con el dise\u00f1o que no responde, agrego consultas de medios y peque\u00f1os cambios en mi CSS para crear un sitio receptivo. Cuando se trata de dise\u00f1o web, es mucho m\u00e1s f\u00e1cil concentrarse en una tarea a la vez.<\/p>\n\n\n\n<p>Cuando haya terminado con su dise\u00f1o que no responde, lo primero que debe hacer es pegar las siguientes l\u00edneas dentro de las etiquetas y en su p\u00e1gina HTML.<\/p>\n\n\n\n<pre class=\"wp-block-preformatted\">&lt;meta name=\"viewport\" content=\"width=device-width,initial-scale=1,maximum-scale=1,user-scalable=no\">\r\n&lt;meta http-equiv=\"X-UA-Compatible\" content=\"IE=edge,chrome=1\">\r\n&lt;meta name=\"HandheldFriendly\" content=\"true\"><\/pre>\n\n\n\n<p>Esto establecer\u00e1 la vista en todas las pantallas en una relaci\u00f3n de aspecto de 1 \u00d7 1 y eliminar\u00e1 la funcionalidad predeterminada de los iPhone y otros dispositivos m\u00f3viles que representan sitios web en vista completa y permiten a los usuarios acercar el dise\u00f1o al pellizcar.<\/p>\n\n\n\n<p>Ahora es el momento de agregar algunas consultas de medios. Seg\u00fan el sitio W3C, las consultas de medios consisten en un tipo de medio y cero o m\u00e1s expresiones que verifican las condiciones de caracter\u00edsticas de medios particulares. Mediante el uso de consultas de medios, las presentaciones se pueden adaptar a una gama espec\u00edfica de dispositivos de salida sin cambiar el contenido en s\u00ed.<\/p>\n\n\n\n<p>En otras palabras, las consultas de medios permiten que su sitio web se vea bien en todo tipo de pantallas, desde tel\u00e9fonos inteligentes hasta pantallas grandes. Esto es lo que se llama dise\u00f1o web responsivo.<\/p>\n\n\n\n<p>Las consultas de medios dependen del dise\u00f1o de su sitio web, por lo que es bastante dif\u00edcil para m\u00ed proporcionarle un fragmento de c\u00f3digo listo para usar. Sin embargo, el siguiente c\u00f3digo es un buen punto de partida para la mayor\u00eda de los sitios web. En este ejemplo, <strong>#principal<\/strong> es el \u00e1rea de contenido principal y <strong>#secundario<\/strong> la barra lateral.<\/p>\n\n\n\n<p>Al observar el c\u00f3digo, puede ver que defin\u00ed dos tama\u00f1os: el primero tiene un ancho m\u00e1ximo de 1060 px y est\u00e1 optimizado para la visualizaci\u00f3n horizontal de tabletas. <strong>#primary<\/strong> ocupa el 67 % de su contenedor principal y <strong>#secundario <\/strong>el 30 %, m\u00e1s un margen izquierdo del 3 %.<\/p>\n\n\n\n<p>El segundo tama\u00f1o est\u00e1 dise\u00f1ado para tabletas de retrato y tama\u00f1os m\u00e1s peque\u00f1os. Debido al peque\u00f1o tama\u00f1o de las pantallas de los smartphones, decid\u00ed darle a #primary un ancho del 100%. <strong>#secundario <\/strong>tambi\u00e9n tiene un ancho del 100 % y se mostrar\u00e1 debajo de <strong>#primario.<\/strong><\/p>\n\n\n\n<p>Como ya dije, probablemente tendr\u00e1s que adaptar un poco este c\u00f3digo para que se ajuste a las necesidades espec\u00edficas de tu sitio web. P\u00e9guelo en el archivo .css de su sitio.<\/p>\n\n\n\n<p>Una vez hecho esto, veamos qu\u00e9 tan receptivo es su dise\u00f1o. Para hacerlo, <a href=\"http:\/\/mattkersley.com\/responsive\/\">uso esta incre\u00edble herramienta creada <\/a>por Matt Kersley. Por supuesto, puede comprobar el resultado en su propio dispositivo m\u00f3vil.<\/p>\n\n\n\n<pre class=\"wp-block-preformatted\">\/* Consultas de medios: panorama de la tableta *\/\r\npantalla @media y (ancho m\u00e1ximo: 1060px) {\r\n    #principal { ancho: 67%; }\r\n    #secundario { ancho:30%; margen izquierdo: 3%;}\r\n}\r\n\r\n\/* Media Queries: Tabled Portrait *\/\r\nPantalla @media y (ancho m\u00e1ximo: 768 px) {\r\n    #principal { ancho: 100%; }\r\n    #secundario { ancho:100%; margen:0; borde: ninguno; }\r\n}<\/pre>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"2-medios\">2\u2013 Medios<\/h2>\n\n\n\n<p>Un dise\u00f1o receptivo es el primer paso para un sitio web totalmente receptivo. Ahora, centr\u00e9monos en un aspecto muy importante de un sitio web moderno: los medios, como videos o im\u00e1genes.<\/p>\n\n\n\n<p>El c\u00f3digo CSS a continuaci\u00f3n garantizar\u00e1 que sus im\u00e1genes nunca sean m\u00e1s grandes que su contenedor principal. Es s\u00faper simple y funciona para la mayor\u00eda de los sitios web receptivos. Para que funcione correctamente, este fragmento de c\u00f3digo debe insertarse en su hoja de estilo CSS.<\/p>\n\n\n\n<pre class=\"wp-block-preformatted\">img { ancho m\u00e1ximo: 100%; altura: autom\u00e1tico; }<\/pre>\n\n\n\n<p>Aunque la t\u00e9cnica anterior es eficiente, a veces es posible que necesite tener m\u00e1s control sobre las im\u00e1genes y mostrar una imagen diferente seg\u00fan el tama\u00f1o de visualizaci\u00f3n del cliente.<\/p>\n\n\n\n<p>Como puede ver, usamos el atributo data-* para almacenar URL de im\u00e1genes de reemplazo. Ahora, usemos todo el poder de CSS3 para reemplazar la imagen predeterminada por una de las im\u00e1genes de reemplazo especificadas si se cumple la condici\u00f3n de ancho m\u00ednimo del dispositivo:<\/p>\n\n\n\n<p>Impresionante, \u00bfno? Ahora echemos un vistazo a otro medio muy importante en los sitios web de hoy: los videos.<\/p>\n\n\n\n<p>Como la mayor\u00eda de los sitios web utilizan videos de sitios de terceros como YouTube o Vimeo, decid\u00ed centrarme en la t\u00e9cnica de video el\u00e1stico.<\/p>\n\n\n\n<pre class=\"wp-block-preformatted\">.video-contenedor {\r\nposici\u00f3n: relativa;\r\nacolchado-bajo: 56,25%;\r\nacolchado superior: 30px;\r\naltura: 0;\r\ndesbordamiento: oculto;\r\n}\r\n\r\n.video-contenedor iframe,\r\nobjeto .video-container,\r\n.video-contenedor incrustar {\r\nposici\u00f3n: absoluta;\r\nsuperior: 0;\r\nizquierda: 0;\r\nancho: 100%;\r\naltura: 100%;\r\n}<\/pre>\n\n\n\n<p>Una vez que aplic\u00f3 este c\u00f3digo a su sitio web, los videos incrustados ahora responden.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"3-tipografia\">3\u2013 Tipograf\u00eda<\/h2>\n\n\n\n<p>El \u00faltimo paso de este tutorial es definitivamente importante, pero los desarrolladores a menudo lo descuidan cuando se trata de sitios web receptivos: la tipograf\u00eda.<\/p>\n\n\n\n<p>Hasta hace poco, la mayor\u00eda de los desarrolladores usaban p\u00edxeles para definir los tama\u00f1os de fuente. Si bien los p\u00edxeles est\u00e1n bien cuando su sitio web tiene un ancho fijo, un sitio web receptivo debe tener una fuente receptiva. El tama\u00f1o de fuente de su sitio debe estar relacionado con el ancho de su contenedor principal, para que pueda adaptarse a la pantalla del cliente y ser f\u00e1cilmente legible en dispositivos m\u00f3viles.<\/p>\n\n\n\n<p>La especificaci\u00f3n CSS3 incluye una nueva unidad llamada rems. Funcionan casi de manera id\u00e9ntica a la unidad em, pero son relativas al elemento html, lo que las hace mucho m\u00e1s f\u00e1ciles de usar que ems.<\/p>\n\n\n\n<p>Como los rems son relativos al elemento html, no olvide restablecer el tama\u00f1o de fuente html:<\/p>\n\n\n\n<pre class=\"wp-block-preformatted\">html { font-size:100%; }<\/pre>\n\n\n\n<p>Una vez hecho esto, puede definir tama\u00f1os de fuente receptivos como se muestra a continuaci\u00f3n:<\/p>\n\n\n\n<pre class=\"wp-block-preformatted\">@media (ancho m\u00ednimo: 640px) { cuerpo {font-size:1rem;} }\r\n@media (ancho m\u00ednimo: 960px) {cuerpo {tama\u00f1o de fuente: 1.2rem;}}\r\n@media (ancho m\u00ednimo: 1100px) {cuerpo {tama\u00f1o de fuente: 1.5rem;}}\n<\/pre>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"que-es-un-sitio-web-totalmente-receptivo\">\u00bfQu\u00e9 es un sitio web totalmente receptivo?<\/h2>\n\n\n\n<p>El dise\u00f1o web receptivo es una t\u00e9cnica que garantiza que una p\u00e1gina web se muestre bien y brinde una experiencia de usuario de calidad tanto en dispositivos tradicionales como m\u00f3viles. Debido a la importancia de los tel\u00e9fonos inteligentes y otros dispositivos port\u00e1tiles, es obligatorio que su sitio web pueda adaptarse a varios tama\u00f1os de pantalla.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"como-hago-que-mi-sitio-web-de-wordpress-sea-receptivo\">\u00bfC\u00f3mo hago que mi sitio web de WordPress sea receptivo?<\/h2>\n\n\n\n<p>Si desea crear un sitio de WordPress receptivo, el proceso es b\u00e1sicamente el mismo que con otros sitios web. Puede seguir este tutorial o instalar el complemento WP Touch que se encargar\u00e1 del trabajo por usted.<\/p>\n\n\n\n<p><\/p>",
        "protected": false
    },
    "excerpt": {
        "rendered": "<p>\u00bfQu\u00e9 es el Dise\u00f1o Responsivo? El dise\u00f1o web receptivo se refiere a una estrategia de dise\u00f1o que crea sitios web que funcionan bien para dispositivos m\u00f3viles, tabletas y computadoras de escritorio. Los sitios web sin un dise\u00f1o receptivo corren el riesgo de alienar a un n\u00famero significativo de usuarios. Adem\u00e1s, Google considera la &#8220;compatibilidad con [&hellip;]<\/p>",
        "protected": false
    },
    "author": 2,
    "featured_media": 0,
    "comment_status": "open",
    "ping_status": "open",
    "sticky": false,
    "template": "",
    "format": "standard",
    "meta": {
        "_mo_disable_npp": "",
        "site-sidebar-layout": "default",
        "site-content-layout": "",
        "ast-site-content-layout": "default",
        "site-content-style": "default",
        "site-sidebar-style": "default",
        "ast-global-header-display": "",
        "ast-banner-title-visibility": "",
        "ast-main-header-display": "",
        "ast-hfb-above-header-display": "",
        "ast-hfb-below-header-display": "",
        "ast-hfb-mobile-header-display": "",
        "site-post-title": "",
        "ast-breadcrumbs-content": "",
        "ast-featured-img": "",
        "footer-sml-layout": "",
        "ast-disable-related-posts": "",
        "theme-transparent-header-meta": "",
        "adv-header-id-meta": "",
        "stick-header-meta": "",
        "header-above-stick-meta": "",
        "header-main-stick-meta": "",
        "header-below-stick-meta": "",
        "astra-migrate-meta-layouts": "default",
        "ast-page-background-enabled": "default",
        "ast-page-background-meta": {
            "desktop": {
                "background-color": "",
                "background-image": "",
                "background-repeat": "repeat",
                "background-position": "center center",
                "background-size": "auto",
                "background-attachment": "scroll",
                "background-type": "",
                "background-media": "",
                "overlay-type": "",
                "overlay-color": "",
                "overlay-opacity": "",
                "overlay-gradient": ""
            },
            "tablet": {
                "background-color": "",
                "background-image": "",
                "background-repeat": "repeat",
                "background-position": "center center",
                "background-size": "auto",
                "background-attachment": "scroll",
                "background-type": "",
                "background-media": "",
                "overlay-type": "",
                "overlay-color": "",
                "overlay-opacity": "",
                "overlay-gradient": ""
            },
            "mobile": {
                "background-color": "",
                "background-image": "",
                "background-repeat": "repeat",
                "background-position": "center center",
                "background-size": "auto",
                "background-attachment": "scroll",
                "background-type": "",
                "background-media": "",
                "overlay-type": "",
                "overlay-color": "",
                "overlay-opacity": "",
                "overlay-gradient": ""
            }
        },
        "ast-content-background-meta": {
            "desktop": {
                "background-color": "var(--ast-global-color-5)",
                "background-image": "",
                "background-repeat": "repeat",
                "background-position": "center center",
                "background-size": "auto",
                "background-attachment": "scroll",
                "background-type": "",
                "background-media": "",
                "overlay-type": "",
                "overlay-color": "",
                "overlay-opacity": "",
                "overlay-gradient": ""
            },
            "tablet": {
                "background-color": "var(--ast-global-color-5)",
                "background-image": "",
                "background-repeat": "repeat",
                "background-position": "center center",
                "background-size": "auto",
                "background-attachment": "scroll",
                "background-type": "",
                "background-media": "",
                "overlay-type": "",
                "overlay-color": "",
                "overlay-opacity": "",
                "overlay-gradient": ""
            },
            "mobile": {
                "background-color": "var(--ast-global-color-5)",
                "background-image": "",
                "background-repeat": "repeat",
                "background-position": "center center",
                "background-size": "auto",
                "background-attachment": "scroll",
                "background-type": "",
                "background-media": "",
                "overlay-type": "",
                "overlay-color": "",
                "overlay-opacity": "",
                "overlay-gradient": ""
            }
        },
        "footnotes": ""
    },
    "categories": [
        1
    ],
    "tags": [],
    "class_list": [
        "post-1744",
        "post",
        "type-post",
        "status-publish",
        "format-standard",
        "hentry",
        "category-blog"
    ],
    "yoast_head": "<!-- This site is optimized with the Yoast SEO plugin v27.3 - https:\/\/yoast.com\/product\/yoast-seo-wordpress\/ -->\n<title>Como hacer Responsive una Pagina Web - FabyM<\/title>\n<meta name=\"description\" content=\"El dise\u00f1o web receptivo se refiere a una estrategia de dise\u00f1o que crea sitios web que funcionan bien para dispositivos m\u00f3viles...\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/fabym.com\/es_co\/como-hacer-responsive-una-pagina-web\/\" \/>\n<meta property=\"og:locale\" content=\"es_ES\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Como hacer Responsive una Pagina Web - FabyM\" \/>\n<meta property=\"og:description\" content=\"El dise\u00f1o web receptivo se refiere a una estrategia de dise\u00f1o que crea sitios web que funcionan bien para dispositivos m\u00f3viles...\" \/>\n<meta property=\"og:url\" content=\"https:\/\/fabym.com\/es_co\/como-hacer-responsive-una-pagina-web\/\" \/>\n<meta property=\"og:site_name\" content=\"FabyM\" \/>\n<meta property=\"article:published_time\" content=\"2022-02-18T21:17:00+00:00\" \/>\n<meta property=\"og:image\" content=\"http:\/\/fabym.com\/wp-content\/uploads\/2022\/02\/Como-hacer-Responsive-una-Pagina-Web-1024x293.png\" \/>\n<meta name=\"author\" content=\"admin_7lb2a8d8\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:label1\" content=\"Escrito por\" \/>\n\t<meta name=\"twitter:data1\" content=\"admin_7lb2a8d8\" \/>\n\t<meta name=\"twitter:label2\" content=\"Tiempo de lectura\" \/>\n\t<meta name=\"twitter:data2\" content=\"7 minutos\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\\\/\\\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\\\/\\\/fabym.com\\\/es_co\\\/como-hacer-responsive-una-pagina-web\\\/#article\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/fabym.com\\\/es_co\\\/como-hacer-responsive-una-pagina-web\\\/\"},\"author\":{\"name\":\"admin_7lb2a8d8\",\"@id\":\"https:\\\/\\\/fabym.com\\\/es_co\\\/#\\\/schema\\\/person\\\/24c90b5055dbc261b280250d04c29cc9\"},\"headline\":\"Como hacer Responsive una Pagina Web\",\"datePublished\":\"2022-02-18T21:17:00+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\\\/\\\/fabym.com\\\/es_co\\\/como-hacer-responsive-una-pagina-web\\\/\"},\"wordCount\":1401,\"commentCount\":0,\"publisher\":{\"@id\":\"https:\\\/\\\/fabym.com\\\/es_co\\\/#organization\"},\"image\":{\"@id\":\"https:\\\/\\\/fabym.com\\\/es_co\\\/como-hacer-responsive-una-pagina-web\\\/#primaryimage\"},\"thumbnailUrl\":\"http:\\\/\\\/fabym.com\\\/wp-content\\\/uploads\\\/2022\\\/02\\\/Como-hacer-Responsive-una-Pagina-Web-1024x293.png\",\"articleSection\":[\"Blog\"],\"inLanguage\":\"es-CO\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\\\/\\\/fabym.com\\\/es_co\\\/como-hacer-responsive-una-pagina-web\\\/#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\\\/\\\/fabym.com\\\/es_co\\\/como-hacer-responsive-una-pagina-web\\\/\",\"url\":\"https:\\\/\\\/fabym.com\\\/es_co\\\/como-hacer-responsive-una-pagina-web\\\/\",\"name\":\"Como hacer Responsive una Pagina Web - FabyM\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/fabym.com\\\/es_co\\\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\\\/\\\/fabym.com\\\/es_co\\\/como-hacer-responsive-una-pagina-web\\\/#primaryimage\"},\"image\":{\"@id\":\"https:\\\/\\\/fabym.com\\\/es_co\\\/como-hacer-responsive-una-pagina-web\\\/#primaryimage\"},\"thumbnailUrl\":\"http:\\\/\\\/fabym.com\\\/wp-content\\\/uploads\\\/2022\\\/02\\\/Como-hacer-Responsive-una-Pagina-Web-1024x293.png\",\"datePublished\":\"2022-02-18T21:17:00+00:00\",\"description\":\"El dise\u00f1o web receptivo se refiere a una estrategia de dise\u00f1o que crea sitios web que funcionan bien para dispositivos m\u00f3viles...\",\"breadcrumb\":{\"@id\":\"https:\\\/\\\/fabym.com\\\/es_co\\\/como-hacer-responsive-una-pagina-web\\\/#breadcrumb\"},\"inLanguage\":\"es-CO\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\\\/\\\/fabym.com\\\/es_co\\\/como-hacer-responsive-una-pagina-web\\\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"es-CO\",\"@id\":\"https:\\\/\\\/fabym.com\\\/es_co\\\/como-hacer-responsive-una-pagina-web\\\/#primaryimage\",\"url\":\"http:\\\/\\\/fabym.com\\\/wp-content\\\/uploads\\\/2022\\\/02\\\/Como-hacer-Responsive-una-Pagina-Web-1024x293.png\",\"contentUrl\":\"http:\\\/\\\/fabym.com\\\/wp-content\\\/uploads\\\/2022\\\/02\\\/Como-hacer-Responsive-una-Pagina-Web-1024x293.png\"},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\\\/\\\/fabym.com\\\/es_co\\\/como-hacer-responsive-una-pagina-web\\\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Portada\",\"item\":\"https:\\\/\\\/fabym.com\\\/es_co\\\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Como hacer Responsive una Pagina Web\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\\\/\\\/fabym.com\\\/es_co\\\/#website\",\"url\":\"https:\\\/\\\/fabym.com\\\/es_co\\\/\",\"name\":\"FabyM\",\"description\":\"FabyM\",\"publisher\":{\"@id\":\"https:\\\/\\\/fabym.com\\\/es_co\\\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\\\/\\\/fabym.com\\\/es_co\\\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"es-CO\"},{\"@type\":\"Organization\",\"@id\":\"https:\\\/\\\/fabym.com\\\/es_co\\\/#organization\",\"name\":\"FabyM\",\"url\":\"https:\\\/\\\/fabym.com\\\/es_co\\\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"es-CO\",\"@id\":\"https:\\\/\\\/fabym.com\\\/es_co\\\/#\\\/schema\\\/logo\\\/image\\\/\",\"url\":\"https:\\\/\\\/fabym.com\\\/wp-content\\\/uploads\\\/2024\\\/11\\\/cropped-fabym-logo-180-x-60-px-new-logo-250-x-150-px-1.png\",\"contentUrl\":\"https:\\\/\\\/fabym.com\\\/wp-content\\\/uploads\\\/2024\\\/11\\\/cropped-fabym-logo-180-x-60-px-new-logo-250-x-150-px-1.png\",\"width\":781,\"height\":287,\"caption\":\"FabyM\"},\"image\":{\"@id\":\"https:\\\/\\\/fabym.com\\\/es_co\\\/#\\\/schema\\\/logo\\\/image\\\/\"}},{\"@type\":\"Person\",\"@id\":\"https:\\\/\\\/fabym.com\\\/es_co\\\/#\\\/schema\\\/person\\\/24c90b5055dbc261b280250d04c29cc9\",\"name\":\"admin_7lb2a8d8\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"es-CO\",\"@id\":\"https:\\\/\\\/secure.gravatar.com\\\/avatar\\\/e915187e064ec9faf0a6b9398970da6e61e221112710ea9be08a827ce95112ff?s=96&d=mm&r=g\",\"url\":\"https:\\\/\\\/secure.gravatar.com\\\/avatar\\\/e915187e064ec9faf0a6b9398970da6e61e221112710ea9be08a827ce95112ff?s=96&d=mm&r=g\",\"contentUrl\":\"https:\\\/\\\/secure.gravatar.com\\\/avatar\\\/e915187e064ec9faf0a6b9398970da6e61e221112710ea9be08a827ce95112ff?s=96&d=mm&r=g\",\"caption\":\"admin_7lb2a8d8\"},\"url\":\"https:\\\/\\\/fabym.com\\\/es_co\\\/author\\\/admin_7lb2a8d8\\\/\"}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->",
    "yoast_head_json": {
        "title": "Como hacer Responsive una Pagina Web - FabyM",
        "description": "El dise\u00f1o web receptivo se refiere a una estrategia de dise\u00f1o que crea sitios web que funcionan bien para dispositivos m\u00f3viles...",
        "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:\/\/fabym.com\/es_co\/como-hacer-responsive-una-pagina-web\/",
        "og_locale": "es_ES",
        "og_type": "article",
        "og_title": "Como hacer Responsive una Pagina Web - FabyM",
        "og_description": "El dise\u00f1o web receptivo se refiere a una estrategia de dise\u00f1o que crea sitios web que funcionan bien para dispositivos m\u00f3viles...",
        "og_url": "https:\/\/fabym.com\/es_co\/como-hacer-responsive-una-pagina-web\/",
        "og_site_name": "FabyM",
        "article_published_time": "2022-02-18T21:17:00+00:00",
        "og_image": [
            {
                "url": "http:\/\/fabym.com\/wp-content\/uploads\/2022\/02\/Como-hacer-Responsive-una-Pagina-Web-1024x293.png",
                "type": "",
                "width": "",
                "height": ""
            }
        ],
        "author": "admin_7lb2a8d8",
        "twitter_card": "summary_large_image",
        "twitter_misc": {
            "Escrito por": "admin_7lb2a8d8",
            "Tiempo de lectura": "7 minutos"
        },
        "schema": {
            "@context": "https:\/\/schema.org",
            "@graph": [
                {
                    "@type": "Article",
                    "@id": "https:\/\/fabym.com\/es_co\/como-hacer-responsive-una-pagina-web\/#article",
                    "isPartOf": {
                        "@id": "https:\/\/fabym.com\/es_co\/como-hacer-responsive-una-pagina-web\/"
                    },
                    "author": {
                        "name": "admin_7lb2a8d8",
                        "@id": "https:\/\/fabym.com\/es_co\/#\/schema\/person\/24c90b5055dbc261b280250d04c29cc9"
                    },
                    "headline": "Como hacer Responsive una Pagina Web",
                    "datePublished": "2022-02-18T21:17:00+00:00",
                    "mainEntityOfPage": {
                        "@id": "https:\/\/fabym.com\/es_co\/como-hacer-responsive-una-pagina-web\/"
                    },
                    "wordCount": 1401,
                    "commentCount": 0,
                    "publisher": {
                        "@id": "https:\/\/fabym.com\/es_co\/#organization"
                    },
                    "image": {
                        "@id": "https:\/\/fabym.com\/es_co\/como-hacer-responsive-una-pagina-web\/#primaryimage"
                    },
                    "thumbnailUrl": "http:\/\/fabym.com\/wp-content\/uploads\/2022\/02\/Como-hacer-Responsive-una-Pagina-Web-1024x293.png",
                    "articleSection": [
                        "Blog"
                    ],
                    "inLanguage": "es-CO",
                    "potentialAction": [
                        {
                            "@type": "CommentAction",
                            "name": "Comment",
                            "target": [
                                "https:\/\/fabym.com\/es_co\/como-hacer-responsive-una-pagina-web\/#respond"
                            ]
                        }
                    ]
                },
                {
                    "@type": "WebPage",
                    "@id": "https:\/\/fabym.com\/es_co\/como-hacer-responsive-una-pagina-web\/",
                    "url": "https:\/\/fabym.com\/es_co\/como-hacer-responsive-una-pagina-web\/",
                    "name": "Como hacer Responsive una Pagina Web - FabyM",
                    "isPartOf": {
                        "@id": "https:\/\/fabym.com\/es_co\/#website"
                    },
                    "primaryImageOfPage": {
                        "@id": "https:\/\/fabym.com\/es_co\/como-hacer-responsive-una-pagina-web\/#primaryimage"
                    },
                    "image": {
                        "@id": "https:\/\/fabym.com\/es_co\/como-hacer-responsive-una-pagina-web\/#primaryimage"
                    },
                    "thumbnailUrl": "http:\/\/fabym.com\/wp-content\/uploads\/2022\/02\/Como-hacer-Responsive-una-Pagina-Web-1024x293.png",
                    "datePublished": "2022-02-18T21:17:00+00:00",
                    "description": "El dise\u00f1o web receptivo se refiere a una estrategia de dise\u00f1o que crea sitios web que funcionan bien para dispositivos m\u00f3viles...",
                    "breadcrumb": {
                        "@id": "https:\/\/fabym.com\/es_co\/como-hacer-responsive-una-pagina-web\/#breadcrumb"
                    },
                    "inLanguage": "es-CO",
                    "potentialAction": [
                        {
                            "@type": "ReadAction",
                            "target": [
                                "https:\/\/fabym.com\/es_co\/como-hacer-responsive-una-pagina-web\/"
                            ]
                        }
                    ]
                },
                {
                    "@type": "ImageObject",
                    "inLanguage": "es-CO",
                    "@id": "https:\/\/fabym.com\/es_co\/como-hacer-responsive-una-pagina-web\/#primaryimage",
                    "url": "http:\/\/fabym.com\/wp-content\/uploads\/2022\/02\/Como-hacer-Responsive-una-Pagina-Web-1024x293.png",
                    "contentUrl": "http:\/\/fabym.com\/wp-content\/uploads\/2022\/02\/Como-hacer-Responsive-una-Pagina-Web-1024x293.png"
                },
                {
                    "@type": "BreadcrumbList",
                    "@id": "https:\/\/fabym.com\/es_co\/como-hacer-responsive-una-pagina-web\/#breadcrumb",
                    "itemListElement": [
                        {
                            "@type": "ListItem",
                            "position": 1,
                            "name": "Portada",
                            "item": "https:\/\/fabym.com\/es_co\/"
                        },
                        {
                            "@type": "ListItem",
                            "position": 2,
                            "name": "Como hacer Responsive una Pagina Web"
                        }
                    ]
                },
                {
                    "@type": "WebSite",
                    "@id": "https:\/\/fabym.com\/es_co\/#website",
                    "url": "https:\/\/fabym.com\/es_co\/",
                    "name": "FabyM",
                    "description": "FabyM",
                    "publisher": {
                        "@id": "https:\/\/fabym.com\/es_co\/#organization"
                    },
                    "potentialAction": [
                        {
                            "@type": "SearchAction",
                            "target": {
                                "@type": "EntryPoint",
                                "urlTemplate": "https:\/\/fabym.com\/es_co\/?s={search_term_string}"
                            },
                            "query-input": {
                                "@type": "PropertyValueSpecification",
                                "valueRequired": true,
                                "valueName": "search_term_string"
                            }
                        }
                    ],
                    "inLanguage": "es-CO"
                },
                {
                    "@type": "Organization",
                    "@id": "https:\/\/fabym.com\/es_co\/#organization",
                    "name": "FabyM",
                    "url": "https:\/\/fabym.com\/es_co\/",
                    "logo": {
                        "@type": "ImageObject",
                        "inLanguage": "es-CO",
                        "@id": "https:\/\/fabym.com\/es_co\/#\/schema\/logo\/image\/",
                        "url": "https:\/\/fabym.com\/wp-content\/uploads\/2024\/11\/cropped-fabym-logo-180-x-60-px-new-logo-250-x-150-px-1.png",
                        "contentUrl": "https:\/\/fabym.com\/wp-content\/uploads\/2024\/11\/cropped-fabym-logo-180-x-60-px-new-logo-250-x-150-px-1.png",
                        "width": 781,
                        "height": 287,
                        "caption": "FabyM"
                    },
                    "image": {
                        "@id": "https:\/\/fabym.com\/es_co\/#\/schema\/logo\/image\/"
                    }
                },
                {
                    "@type": "Person",
                    "@id": "https:\/\/fabym.com\/es_co\/#\/schema\/person\/24c90b5055dbc261b280250d04c29cc9",
                    "name": "admin_7lb2a8d8",
                    "image": {
                        "@type": "ImageObject",
                        "inLanguage": "es-CO",
                        "@id": "https:\/\/secure.gravatar.com\/avatar\/e915187e064ec9faf0a6b9398970da6e61e221112710ea9be08a827ce95112ff?s=96&d=mm&r=g",
                        "url": "https:\/\/secure.gravatar.com\/avatar\/e915187e064ec9faf0a6b9398970da6e61e221112710ea9be08a827ce95112ff?s=96&d=mm&r=g",
                        "contentUrl": "https:\/\/secure.gravatar.com\/avatar\/e915187e064ec9faf0a6b9398970da6e61e221112710ea9be08a827ce95112ff?s=96&d=mm&r=g",
                        "caption": "admin_7lb2a8d8"
                    },
                    "url": "https:\/\/fabym.com\/es_co\/author\/admin_7lb2a8d8\/"
                }
            ]
        }
    },
    "_links": {
        "self": [
            {
                "href": "https:\/\/fabym.com\/es_co\/wp-json\/wp\/v2\/posts\/1744",
                "targetHints": {
                    "allow": [
                        "GET"
                    ]
                }
            }
        ],
        "collection": [
            {
                "href": "https:\/\/fabym.com\/es_co\/wp-json\/wp\/v2\/posts"
            }
        ],
        "about": [
            {
                "href": "https:\/\/fabym.com\/es_co\/wp-json\/wp\/v2\/types\/post"
            }
        ],
        "author": [
            {
                "embeddable": true,
                "href": "https:\/\/fabym.com\/es_co\/wp-json\/wp\/v2\/users\/2"
            }
        ],
        "replies": [
            {
                "embeddable": true,
                "href": "https:\/\/fabym.com\/es_co\/wp-json\/wp\/v2\/comments?post=1744"
            }
        ],
        "version-history": [
            {
                "count": 1,
                "href": "https:\/\/fabym.com\/es_co\/wp-json\/wp\/v2\/posts\/1744\/revisions"
            }
        ],
        "predecessor-version": [
            {
                "id": 1746,
                "href": "https:\/\/fabym.com\/es_co\/wp-json\/wp\/v2\/posts\/1744\/revisions\/1746"
            }
        ],
        "wp:attachment": [
            {
                "href": "https:\/\/fabym.com\/es_co\/wp-json\/wp\/v2\/media?parent=1744"
            }
        ],
        "wp:term": [
            {
                "taxonomy": "category",
                "embeddable": true,
                "href": "https:\/\/fabym.com\/es_co\/wp-json\/wp\/v2\/categories?post=1744"
            },
            {
                "taxonomy": "post_tag",
                "embeddable": true,
                "href": "https:\/\/fabym.com\/es_co\/wp-json\/wp\/v2\/tags?post=1744"
            }
        ],
        "curies": [
            {
                "name": "wp",
                "href": "https:\/\/api.w.org\/{rel}",
                "templated": true
            }
        ]
    }
}