{"id":3740,"date":"2017-10-31T23:51:43","date_gmt":"2017-10-31T23:51:43","guid":{"rendered":"http:\/\/disenodepagina.com\/disenoweb\/?p=3740"},"modified":"2017-10-31T23:51:43","modified_gmt":"2017-10-31T23:51:43","slug":"diseno-web-api-history","status":"publish","type":"post","link":"https:\/\/disenodepagina.com\/disenoweb\/diseno-web-api-history\/","title":{"rendered":"Dise\u00f1o web &#8211; API History"},"content":{"rendered":"<h1>Dise\u00f1o web<\/h1>\n<p><a href=\"http:\/\/marketingweb.com.mx\/blog\/wp-content\/uploads\/alejandrodemiguel-web-responsive-1.jpg\" target=\"_blank\" rel=\"noopener\"><img loading=\"lazy\" decoding=\"async\" class=\"size-medium wp-image-4668\" src=\"http:\/\/marketingweb.com.mx\/blog\/wp-content\/uploads\/alejandrodemiguel-web-responsive-1-300x225.jpg\" alt=\"Dise\u00f1o web\" width=\"300\" height=\"225\" \/><\/a><\/p>\n<p><strong><em>\u00a0Dise\u00f1o web<\/em><\/strong>\u00a0Uno de los aspectos fundamentales a la hora de crear cualquier web o blog es el\u00a0<strong>dise\u00f1o<\/strong>, del que debemos ocuparnos despu\u00e9s de haber definido la arquitectura de la informaci\u00f3n (que engloba el planteamiento del \u00e1rbol web, la elaboraci\u00f3n del an\u00e1lisis funcional y el esquema de las funcionalidades y contenidos en los\u00a0<em>wireframes<\/em>)\u00a0<strong><em>desarrollo web<\/em><\/strong>\u00a0.<\/p>\n<p>Sin duda, el dise\u00f1o es la parte m\u00e1s creativa del proyecto, ya que permite vestir los prototipos ya aprobados. Continuando con este s\u00edmil, la\u00a0<em>ropa<\/em>\u00a0y los\u00a0<em>complementos<\/em>\u00a0conferir\u00e1n al sitio web un aspecto externo atractivo, capaz de suscitar el inter\u00e9s y de llamar la atenci\u00f3n del p\u00fablico objetivo\u00a0<strong><em>sitio web<\/em><\/strong>\u00a0.<\/p>\n<h1>API History<\/h1>\n<p><a href=\"http:\/\/marketingweb.com.mx\/blog\/wp-content\/uploads\/images-13.jpg\" target=\"_blank\" rel=\"noopener\"><img loading=\"lazy\" decoding=\"async\" class=\"size-full wp-image-4669\" src=\"http:\/\/marketingweb.com.mx\/blog\/wp-content\/uploads\/images-13.jpg\" alt=\"API History\" width=\"268\" height=\"188\" \/><\/a><\/p>\n<p><strong><em>\u00a0Dise\u00f1o web<\/em><\/strong>\u00a0el\u00a0<strong><em>API History<\/em><\/strong>\u00a0de\u00a0<a href=\"http:\/\/marketingweb.com.mx\/diseno-web.html\" target=\"_blank\" rel=\"noopener\">HTML es la manera<\/a>\u00a0est\u00e1ndar de manipular el historial de navegaci\u00f3n a trav\u00e9s de JavaScript. Partes de esta\u00a0<strong><em>API\u00a0 History<\/em>\u00a0<\/strong>ya se encontraban disponibles en versiones anteriores de HTML. Ahora, HTML5 incluye una nueva manera de a\u00f1adir entradas al historial de navegaci\u00f3n, modificando la URL pero sin actualizar la p\u00e1gina actual, y eventos que se disparan cuando el usuario a eliminado estas entradas, pulsando el bot\u00f3n de volver del navegador. Esto quiere decir que la barra de direcciones sigue funcionando de la misma manera, identificando los recursos de manera \u00fanica, a\u00fan cuando las aplicaciones hacen un uso intensivo de JavaScript sin recargar la p\u00e1gina.<br \/>\nComo sabemos, una URL representa un recurso \u00fanico. Podemos enlazarlo directamente, almacenarlo como favorito, los motores de b\u00fasqueda pueden analizar su contenido, podemos copiarlo y enviarlo por email&#8230; La URL realmente importa\u00a0<strong><em>dise\u00f1o<\/em><\/strong>.<br \/>\nAs\u00ed pues, lo que queremos es que contenidos \u00fanicos dispongan de una URL \u00fanica. Hasta ahora, el comportamiento normal de los navegadores recargar de nuevo la p\u00e1gina si modific\u00e1bamos la URL, realizando una nueva petici\u00f3n y obteniendo de nuevo todos los recursos del servidor. No hab\u00eda manera de decir al navegador que cambiase la URL pero descargase \u00fanicamente la mitad de la p\u00e1gina. El API history de HTML5 permite precisamente esto. En lugar de solicitar la carga de toda la p\u00e1gina, podemos utilizar JavaScript para cargar \u00fanicamente los contenidos que deseemos.<br \/>\nLa idea es la siguiente. Imaginemos que tenemos una p\u00e1gina A y otra p\u00e1gina B, que comparten el 90% de su contenido. Cuando un usuario se encuentra en la p\u00e1gina A, y quiere navegar a la B, lo normal es realizar una petici\u00f3n completa. En lugar de realizar esta petici\u00f3n, interrumpimos esta navegaci\u00f3n y realizamos los siguientes pasos de<a href=\"https:\/\/www.facebook.com\/disenopaginaweb\" target=\"_blank\" rel=\"noopener\">\u00a0manera manual:<\/a><br \/>\n1. Cargar el 10% de contenido diferente de la p\u00e1gina B, a trav\u00e9s de alg\u00fan m\u00e9todo como AJAX\u00a0<em><strong>p\u00e1gina web<\/strong><\/em>\u00a0.<\/p>\n<p>2. Cambiar el contenido, utilizando innerHTML u otros m\u00e9todos del DOM. Es posible que tengamos que reiniciar los eventos asociados a los elementos.<\/p>\n<p>3. Actualizamos la URL del navegador, indicando la direcci\u00f3n de la p\u00e1gina B, utilizando el API history de HTML5.<br \/>\nTras realizar estos pasos, disponemos de un DOM exacto al de la p\u00e1gina B, como si hubi\u00e9semos navegado hasta ella, pero sin realizar una petici\u00f3n completa\u00a0<strong><em>Dise\u00f1o web<\/em><\/strong>.<\/p>\n<p><span style=\"text-decoration: underline;\"><strong><em>Dise\u00f1o web<\/em><\/strong><\/span><\/p>\n<p><strong><em><span style=\"text-decoration: underline;\">API History<\/span><\/em><\/strong><\/p>\n","protected":false},"excerpt":{"rendered":"<p>Dise\u00f1o web \u00a0Dise\u00f1o web\u00a0Uno de los aspectos fundamentales a la hora de crear cualquier web o blog es el\u00a0dise\u00f1o, del que debemos ocuparnos despu\u00e9s de haber definido la arquitectura de la informaci\u00f3n (que engloba el planteamiento del \u00e1rbol web, la elaboraci\u00f3n del an\u00e1lisis funcional y el esquema de las funcionalidades y contenidos en los\u00a0wireframes)\u00a0desarrollo web\u00a0. [&#8230;]\n","protected":false},"author":2,"featured_media":3526,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[478,477,8],"tags":[555,19,82,12,138,530],"class_list":["post-3740","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-desarrollo-web","category-diseno-de-pagina","category-diseno-web","tag-api-history","tag-desarrollo-web","tag-diseno","tag-diseno-web","tag-pagina-web","tag-sitio-web"],"_links":{"self":[{"href":"https:\/\/disenodepagina.com\/disenoweb\/wp-json\/wp\/v2\/posts\/3740","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/disenodepagina.com\/disenoweb\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/disenodepagina.com\/disenoweb\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/disenodepagina.com\/disenoweb\/wp-json\/wp\/v2\/users\/2"}],"replies":[{"embeddable":true,"href":"https:\/\/disenodepagina.com\/disenoweb\/wp-json\/wp\/v2\/comments?post=3740"}],"version-history":[{"count":1,"href":"https:\/\/disenodepagina.com\/disenoweb\/wp-json\/wp\/v2\/posts\/3740\/revisions"}],"predecessor-version":[{"id":3741,"href":"https:\/\/disenodepagina.com\/disenoweb\/wp-json\/wp\/v2\/posts\/3740\/revisions\/3741"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/disenodepagina.com\/disenoweb\/wp-json\/wp\/v2\/media\/3526"}],"wp:attachment":[{"href":"https:\/\/disenodepagina.com\/disenoweb\/wp-json\/wp\/v2\/media?parent=3740"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/disenodepagina.com\/disenoweb\/wp-json\/wp\/v2\/categories?post=3740"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/disenodepagina.com\/disenoweb\/wp-json\/wp\/v2\/tags?post=3740"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}