{"id":1836,"date":"2014-02-06T14:03:45","date_gmt":"2014-02-06T20:03:45","guid":{"rendered":"http:\/\/ottogarcia.com\/blog\/?p=1836"},"modified":"2014-02-06T14:03:45","modified_gmt":"2014-02-06T20:03:45","slug":"responsive-layout","status":"publish","type":"post","link":"https:\/\/ottogarcia.com\/nuevo_sitio\/blog\/responsive-layout\/","title":{"rendered":"Responsive Layout"},"content":{"rendered":"<h1>\u00bfQu\u00e9 es un Responsive Layout?<\/h1>\n<h2>Primero \u00bfQu\u00e9 es un Layout?<\/h2>\n<p>El layout es el t\u00e9rmino ingl\u00e9s que suele utilizarse para nombrar al esquema de distribuci\u00f3n de los elementos o bocetos dentro del dise\u00f1o de una web, es habitual que un dise\u00f1ador que se dedica a la creaci\u00f3n de p\u00e1ginas web desarrolle un layout y se lo presente a su cliente para que \u00e9ste lo apruebe y decida sobre la distribuci\u00f3n de los contenidos y as\u00ed realizar el trabajo final en base a \u00e9ste.<\/p>\n<p><!--more--><\/p>\n<p>El Layout no es m\u00e1s que la ordenaci\u00f3n y colocaci\u00f3n de todos los elementos que componen una p\u00e1gina web. A la hora de realizar los dise\u00f1os hay que tener en cuenta que un layout claro permitir\u00e1 una navegaci\u00f3n mucho m\u00e1s f\u00e1cil y eficiente.<\/p>\n<p>Es importante tener un layout de la p\u00e1gina web ya definido antes de crear la p\u00e1gina web, saber si vamos a agrupar el contenido en una sola columna, en dos o en tres, si va tener un ancho espec\u00edfico o si queremos que se adapte a cada resoluci\u00f3n, etc.<\/p>\n<p>Una vez sepamos esto, ser\u00e1 m\u00e1s f\u00e1cil empezar a meterle mano al c\u00f3digo.<\/p>\n<h2>\u00bfPero que es un Responsive Layout?<\/h2>\n<p>El responsive layout es la nueva tendencia en dise\u00f1o de sitios web, el responsive layout no es m\u00e1s que una distribuci\u00f3n de los elementos para cada una de las resoluciones que actualmente existen, el responsive layout nos ofrece todo el control que tendr\u00edamos con un dise\u00f1o de ancho fijo y nos ofrece much\u00edsima m\u00e1s flexibilidad ya que nos permite desarrollar p\u00e1ginas que se visualicen de forma correcta en cualquier dispositivo y resoluci\u00f3n.<\/p>\n<p>Los responsive layout usan un poco de la magia de CSS3 pero existen hacks para dar soporte a navegadores tan obsoletos como el IE7.<\/p>\n<p>As\u00ed como en a\u00f1os anteriores en que los monitores fueron creciendo en resoluci\u00f3n de 800*600 a 1024*768 hasta ofrecernos pantallas de 1900 pixeles o mayores, la tecnolog\u00eda nos ha otorgado equipos m\u00f3viles (tel\u00e9fonos y tabletas) que tienen alta calidad en resoluci\u00f3n pero en pantallas m\u00e1s peque\u00f1as.\u00a0 Muchos sitios web de tama\u00f1os tradicionales pueden no verse bien en dispositivos m\u00f3viles es ah\u00ed donde entra a jugar un papel importante el responsive layout que hace que un sitio web funcione en cualquier tipo de equipo, modificando el acomodo, presentaci\u00f3n incluso contenido.<\/p>\n<p>Las \u00faltimas tendencias dictan una reducci\u00f3n en venta de equipos de c\u00f3mputo tradicional, y un incremento en uso de dispositivos port\u00e1tiles como tabletas para navegar. Esto nos obliga a dise\u00f1ar sitios web con responsive layout que detecta la resoluci\u00f3n de pantalla y adapta el dise\u00f1o de acuerdo a este.<\/p>\n<p>De esta forma el sitio web cambia en tama\u00f1o seg\u00fan el dispositivo y puede presentar informaci\u00f3n en distinta posici\u00f3n. Esto facilita el usuario la navegaci\u00f3n dentro de la p\u00e1gina.<\/p>\n<p>El futuro es sin duda el uso creciente de tablets y tel\u00e9fonos. La pregunta es si su sitio web ya cuenta con esta tecnolog\u00eda.<\/p>\n","protected":false},"excerpt":{"rendered":"<p class=\"tx-excerpt\">\u00bfQu\u00e9 es un Responsive Layout? Primero \u00bfQu\u00e9 es un Layout? El layout es el t\u00e9rmino ingl\u00e9s que suele utilizarse para nombrar al esquema","protected":false},"author":1,"featured_media":2200,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[72,75],"tags":[],"class_list":["post-1836","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-blog","category-diseno"],"yoast_head":"<!-- This site is optimized with the Yoast SEO Premium plugin v19.7 (Yoast SEO v20.1) - https:\/\/yoast.com\/wordpress\/plugins\/seo\/ -->\n<title>Responsive Layout - Otto Garc\u00eda<\/title>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/ottogarcia.com\/nuevo_sitio\/blog\/responsive-layout\/\" \/>\n<meta property=\"og:locale\" content=\"es_ES\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Responsive Layout\" \/>\n<meta property=\"og:description\" content=\"\u00bfQu\u00e9 es un Responsive Layout? Primero \u00bfQu\u00e9 es un Layout? El layout es el t\u00e9rmino ingl\u00e9s que suele utilizarse para nombrar al esquema de distribuci\u00f3n de los elementos o bocetos dentro del dise\u00f1o de una web, es habitual que un dise\u00f1ador que se dedica a la creaci\u00f3n de p\u00e1ginas web desarrolle un layout y se [&hellip;]\" \/>\n<meta property=\"og:url\" content=\"https:\/\/ottogarcia.com\/nuevo_sitio\/blog\/responsive-layout\/\" \/>\n<meta property=\"og:site_name\" content=\"Otto Garc\u00eda\" \/>\n<meta property=\"article:published_time\" content=\"2014-02-06T20:03:45+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/ottogarcia.com\/nuevo_sitio\/wp-content\/uploads\/2014\/12\/responsive-Layout-1.jpg\" \/>\n\t<meta property=\"og:image:width\" content=\"1024\" \/>\n\t<meta property=\"og:image:height\" content=\"417\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/jpeg\" \/>\n<meta name=\"author\" content=\"usuario\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:label1\" content=\"Escrito por\" \/>\n\t<meta name=\"twitter:data1\" content=\"usuario\" \/>\n\t<meta name=\"twitter:label2\" content=\"Tiempo de lectura\" \/>\n\t<meta name=\"twitter:data2\" content=\"3 minutos\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"WebPage\",\"@id\":\"https:\/\/ottogarcia.com\/nuevo_sitio\/blog\/responsive-layout\/\",\"url\":\"https:\/\/ottogarcia.com\/nuevo_sitio\/blog\/responsive-layout\/\",\"name\":\"Responsive Layout - Otto Garc\u00eda\",\"isPartOf\":{\"@id\":\"https:\/\/ottogarcia.com\/nuevo_sitio\/#website\"},\"datePublished\":\"2014-02-06T20:03:45+00:00\",\"dateModified\":\"2014-02-06T20:03:45+00:00\",\"author\":{\"@id\":\"https:\/\/ottogarcia.com\/nuevo_sitio\/#\/schema\/person\/8b1473e334f848fafe8d90d4d28f6511\"},\"breadcrumb\":{\"@id\":\"https:\/\/ottogarcia.com\/nuevo_sitio\/blog\/responsive-layout\/#breadcrumb\"},\"inLanguage\":\"es\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/ottogarcia.com\/nuevo_sitio\/blog\/responsive-layout\/\"]}]},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/ottogarcia.com\/nuevo_sitio\/blog\/responsive-layout\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Inicio\",\"item\":\"https:\/\/ottogarcia.com\/nuevo_sitio\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Responsive Layout\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/ottogarcia.com\/nuevo_sitio\/#website\",\"url\":\"https:\/\/ottogarcia.com\/nuevo_sitio\/\",\"name\":\"Otto Garc\u00eda\",\"description\":\"Desarrollo Web - WordPress Developer - Freelance - Otto Garc\u00eda\",\"alternateName\":\"Desarrollo Web - WordPress Developer - Freelance - Otto Garc\u00eda\",\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/ottogarcia.com\/nuevo_sitio\/?s={search_term_string}\"},\"query-input\":\"required name=search_term_string\"}],\"inLanguage\":\"es\"},{\"@type\":\"Person\",\"@id\":\"https:\/\/ottogarcia.com\/nuevo_sitio\/#\/schema\/person\/8b1473e334f848fafe8d90d4d28f6511\",\"name\":\"usuario\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"es\",\"@id\":\"https:\/\/ottogarcia.com\/nuevo_sitio\/#\/schema\/person\/image\/\",\"url\":\"https:\/\/secure.gravatar.com\/avatar\/da553852ba43c95dcf7ceeef06171244c02004748d0dcbe852535ae8be17187c?s=96&d=mm&r=g\",\"contentUrl\":\"https:\/\/secure.gravatar.com\/avatar\/da553852ba43c95dcf7ceeef06171244c02004748d0dcbe852535ae8be17187c?s=96&d=mm&r=g\",\"caption\":\"usuario\"},\"sameAs\":[\"https:\/\/ottogarcia.com\/nuevo_sitio\"],\"url\":\"https:\/\/ottogarcia.com\/nuevo_sitio\/author\/usuario\/\"}]}<\/script>\n<!-- \/ Yoast SEO Premium plugin. -->","yoast_head_json":{"title":"Responsive Layout - Otto Garc\u00eda","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:\/\/ottogarcia.com\/nuevo_sitio\/blog\/responsive-layout\/","og_locale":"es_ES","og_type":"article","og_title":"Responsive Layout","og_description":"\u00bfQu\u00e9 es un Responsive Layout? Primero \u00bfQu\u00e9 es un Layout? El layout es el t\u00e9rmino ingl\u00e9s que suele utilizarse para nombrar al esquema de distribuci\u00f3n de los elementos o bocetos dentro del dise\u00f1o de una web, es habitual que un dise\u00f1ador que se dedica a la creaci\u00f3n de p\u00e1ginas web desarrolle un layout y se [&hellip;]","og_url":"https:\/\/ottogarcia.com\/nuevo_sitio\/blog\/responsive-layout\/","og_site_name":"Otto Garc\u00eda","article_published_time":"2014-02-06T20:03:45+00:00","og_image":[{"width":1024,"height":417,"url":"https:\/\/ottogarcia.com\/nuevo_sitio\/wp-content\/uploads\/2014\/12\/responsive-Layout-1.jpg","type":"image\/jpeg"}],"author":"usuario","twitter_card":"summary_large_image","twitter_misc":{"Escrito por":"usuario","Tiempo de lectura":"3 minutos"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"WebPage","@id":"https:\/\/ottogarcia.com\/nuevo_sitio\/blog\/responsive-layout\/","url":"https:\/\/ottogarcia.com\/nuevo_sitio\/blog\/responsive-layout\/","name":"Responsive Layout - Otto Garc\u00eda","isPartOf":{"@id":"https:\/\/ottogarcia.com\/nuevo_sitio\/#website"},"datePublished":"2014-02-06T20:03:45+00:00","dateModified":"2014-02-06T20:03:45+00:00","author":{"@id":"https:\/\/ottogarcia.com\/nuevo_sitio\/#\/schema\/person\/8b1473e334f848fafe8d90d4d28f6511"},"breadcrumb":{"@id":"https:\/\/ottogarcia.com\/nuevo_sitio\/blog\/responsive-layout\/#breadcrumb"},"inLanguage":"es","potentialAction":[{"@type":"ReadAction","target":["https:\/\/ottogarcia.com\/nuevo_sitio\/blog\/responsive-layout\/"]}]},{"@type":"BreadcrumbList","@id":"https:\/\/ottogarcia.com\/nuevo_sitio\/blog\/responsive-layout\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Inicio","item":"https:\/\/ottogarcia.com\/nuevo_sitio\/"},{"@type":"ListItem","position":2,"name":"Responsive Layout"}]},{"@type":"WebSite","@id":"https:\/\/ottogarcia.com\/nuevo_sitio\/#website","url":"https:\/\/ottogarcia.com\/nuevo_sitio\/","name":"Otto Garc\u00eda","description":"Desarrollo Web - WordPress Developer - Freelance - Otto Garc\u00eda","alternateName":"Desarrollo Web - WordPress Developer - Freelance - Otto Garc\u00eda","potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/ottogarcia.com\/nuevo_sitio\/?s={search_term_string}"},"query-input":"required name=search_term_string"}],"inLanguage":"es"},{"@type":"Person","@id":"https:\/\/ottogarcia.com\/nuevo_sitio\/#\/schema\/person\/8b1473e334f848fafe8d90d4d28f6511","name":"usuario","image":{"@type":"ImageObject","inLanguage":"es","@id":"https:\/\/ottogarcia.com\/nuevo_sitio\/#\/schema\/person\/image\/","url":"https:\/\/secure.gravatar.com\/avatar\/da553852ba43c95dcf7ceeef06171244c02004748d0dcbe852535ae8be17187c?s=96&d=mm&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/da553852ba43c95dcf7ceeef06171244c02004748d0dcbe852535ae8be17187c?s=96&d=mm&r=g","caption":"usuario"},"sameAs":["https:\/\/ottogarcia.com\/nuevo_sitio"],"url":"https:\/\/ottogarcia.com\/nuevo_sitio\/author\/usuario\/"}]}},"_links":{"self":[{"href":"https:\/\/ottogarcia.com\/nuevo_sitio\/wp-json\/wp\/v2\/posts\/1836","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/ottogarcia.com\/nuevo_sitio\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/ottogarcia.com\/nuevo_sitio\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/ottogarcia.com\/nuevo_sitio\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/ottogarcia.com\/nuevo_sitio\/wp-json\/wp\/v2\/comments?post=1836"}],"version-history":[{"count":0,"href":"https:\/\/ottogarcia.com\/nuevo_sitio\/wp-json\/wp\/v2\/posts\/1836\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/ottogarcia.com\/nuevo_sitio\/wp-json\/wp\/v2\/media\/2200"}],"wp:attachment":[{"href":"https:\/\/ottogarcia.com\/nuevo_sitio\/wp-json\/wp\/v2\/media?parent=1836"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/ottogarcia.com\/nuevo_sitio\/wp-json\/wp\/v2\/categories?post=1836"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/ottogarcia.com\/nuevo_sitio\/wp-json\/wp\/v2\/tags?post=1836"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}