\n \n \n\nLo bueno de esto es que el parámetro no afecta al nombre del fichero. Todo lo que vaya después de la interrogación es independiente del nombre. En el ejemplo anterior, siempre se hace referencia al fichero 'miestilo.css', así que no te líes a cambiar el nombre de tus ficheros. Con añadir el parámetro en la URL vale.\n\nDe hecho, si ya eres un profesional más avanzado y has probado React o Angular, te habrás dado cuenta de que los CSS y los JS que obtienes tienen incluidos unos \"codiguitos\" estilo main.54ds6.js. Esto es precisamente para saltarse la caché cuando haya un cambio y solo descargar los contenidos nuevos.\n\nOtra opción que tienes si no quieres añadir parámetros es usando la directiva ****no-cache****. Recuerdas que te dije que no significaba lo que daba a entender por el nombre. Recapitulando, los recursos con la directiva ****no-cache**** permiten al navegador cachear un recurso pero siempre comprobando que no hay una versión más reciente. Lo malo de esta directiva es que siempre hay una petición al servidor. Lo bueno, es que si el recurso no ha cambiado, la respuesta será un 304 Not modified y sin cuerpo; traduciendo, que en vez de kB de tamaño, apenas serán unos bytes. Siempre es más rápido enviar bytes que kilobytes.\n\n¿Y cómo sabe el navegador o el servidor si el recurso está actualizado 🤔? Pues hay varias formas de hacerlo: usando la cabecera If-Modified-Since o usando la cabecera ETag.\n\nLa cabecera If-Modified-Since (que se traduce por \"si no ha sido modificado desde\") la manda el navegador. Es muy útil cuando se está pidiendo estáticos (que existen en el servidor como ficheros). El navegador envía la petición para comprobar si el recurso que tiene en caché es el último igual que con cualquier petición, pero añade esta cabecera indicando la fecha y hora en la que guardó el recurso en la caché. El servidor, comprobará la fecha del fichero y si no ha cambiado desde entonces, devolverá un ****304 Not Modified.**** El navegador cuando lee esta respuesta entiende que sí tiene la última versión, por lo que puede usarla. Si por el contrario el servidor detecta que hay una versión más reciente, devolverá un ****200 Ok**** y el propio recurso en la misma petición. El navegador entiende que debe borrar el recurso que tiene guardado en su caché y reemplazarlo por este nuevo que está enviando el servidor. Este proceso se repetirá siempre tal cual. Según el navegador detecte que necesita ese recurso y comprueba que existe en la caché con la directiva ****no-cache****, hará la petición esperando un 200 o un 304.\n\nLa otra posibilidad que tienes es usar la cabecera ETag. Funciona de forma similar a If-Modified-Since, pero en este caso no contiene fechas, sino cadenas de texto. Cuando el servidor envía un recurso le añade la cabecera ETag cuyo valor es aleatorio pero permite identificar el recurso (la firma de su contenido mediante algún hash, la fecha de generación, la versión, etc). Una vez que el navegador quiere comprobar si el recurso es la última versión envía la petición con la cabecera ETag según la envió el servidor. El servidor comprueba así si el recurso ha cambiado de versión y la cadena de texto coincide con la que envió el cliente. Si coincide, el servidor devuelve un 304; si no, un 200. No deberías tener que preocuparte de generar un ETag, los principales servidores web lo harán por ti. Quédate con el concepto de que el servidor sabe a través de ese ETag a qué versión del fichero se refiere.\n\n## Cómo aplicar la caché HTTP a mi web\n\nPues ya tienes toda la teoría que necesitas para empezar y para volar durante un tiempo. Pero, ¿y la práctica?. Pues depende del servidor web que estés utilizando, aunque seguramente sea Apache o Nginx. Si es Apache, tienes toda la información sobre caché en la [web oficial](http://web.archive.org/web/20201230082813/https://httpd.apache.org/docs/2.4/caching.html) (versión 2.4) o en muchos blogs, pero básicamente es usar el módulo Header de Apache (aunque puedes usar expires, pero no me hace mucha gracia; prefiero establecerlo a mano):\n\n \n Header set Cache-Control \"max-age=63072000, public\"\n \n \n // O...\n \n \n Header set Cache-Control \"max-age=300, private\"\n \n\nEn Nginx creo que es más sencillo (aunque siempre me gustó más Nginx, por lo que mi opinión es subjetiva). Entra en el fichero de configuración de tu sitio y añade cabeceras según el tipo de ruta.\n\n location ~* \\.(js|css|png|jpg|jpeg|gif|svg|ico)$ {\n add_header Cache-Control \"public, max-age=3600, s-maxage=10000\";\n }\n\nEspero que te haya quedado un poco más claro el tema de la caché y cómo puede ayudarte a optimizar tu sitio web y ayudarte con tu sitio web. Es más, estoy pensando que podría añadir caché al [proyecto del Blog en Ghost](http://web.archive.org/web/20201230082813/https://www.juannicolas.eu/montar-un-blog-con-ghost/) que te conté en este artículo. No sé... a lo mejor hacemos un nuevo capítulo de esa serie 😏.\n\nQue tengas un feliz coding !\n","mainEntityOfPage":"https://www.juannicolas.eu/cache-en-http/","datePublished":"2020-10-28T16:00:00.000Z","dateModified":"2022-10-06T16:00:59.000Z","author":{"@type":"Person","name":"Juan Nicolás","url":"https://www.juannicolas.eu/author/juan/","image":{"@type":"ImageObject","url":"https://www.juannicolas.eu/_astro/juan.BBZ4iYXg.jpg","width":460,"height":460}},"position":6}]}
WEB
6 posts
Trucos y recursos para comenzar tu nueva web o mejorar la que ya tienes
No solo vale con programar bien una App: hay muchos aspectos que pueden hacer destacar tu web por encima de los demás. Aspectos como hacer que una página web sea mucho más rápida gracias a la aplicación de caché, recursos que hagan tu web más atractiva al público o nuevas metodologías de programación pueden hacer que tu sitio web aumente visitantes y sea mejor considerado. HTML5 es la última versión del lenguaje de marcado de hipertexto (HTML), utilizado para crear y diseñar páginas web. Esta nueva versión incluye muchas mejoras y nuevas características, lo que lo convierte en una herramienta esencial para cualquier desarrollador web. Algunas de las nuevas características de HTML5 incluyen soporte para audio y video nativo, arrastrar y soltar, formularios mejorados, animaciones y gráficos vectoriales escalables. Con estas nuevas características, los desarrolladores web pueden crear sitios web más interactivos y dinámicos.
Sin embargo, para aprovechar al máximo estas nuevas características, los desarrolladores web necesitan conocer y utilizar herramientas adicionales para crear y diseñar sitios web. Algunas de estas herramientas incluyen:
Frameworks front-end: Los frameworks front-end como Bootstrap y Foundation ofrecen una variedad de componentes y estilos predefinidos que los desarrolladores web pueden usar para crear sitios web responsive y móviles. Estos frameworks también pueden ahorrar tiempo y esfuerzo al ofrecer una estructura y organización predefinidas para el diseño de sitios web.
Editores de texto: Los editores de texto especializados en HTML5, como Sublime Text y Atom, ofrecen una variedad de características para facilitar la edición de código, como la resaltación de sintaxis, la autocompletar y la búsqueda de archivos. Estas características pueden mejorar la eficiencia y la productividad de los desarrolladores web.
Herramientas de depuración: Las herramientas de depuración, como Chrome DevTools y Firebug, permiten a los desarrolladores web analizar y depurar su código HTML5 en tiempo real. Estas herramientas pueden ayudar a identificar y corregir errores y problemas en el código.
Bibliotecas de JavaScript: Las bibliotecas de JavaScript, como jQuery y React, pueden ayudar a los desarrolladores web a crear interacciones más avanzadas en sus sitios web, como animaciones y efectos visuales. Estas bibliotecas pueden ahorrar tiempo y esfuerzo al ofrecer una variedad de funciones predefinidas que los desarrolladores web pueden usar en su código.
Plataformas de alojamiento: Las plataformas de alojamiento web, como Amazon Web Services (AWS) y Microsoft Azure, pueden proporcionar un entorno escalable y seguro para alojar y ejecutar aplicaciones web HTML5. Estas plataformas también pueden ofrecer una variedad de servicios adicionales, como herramientas de monitoreo y análisis de rendimiento.
En conclusión, HTML5 es una herramienta esencial para cualquier desarrollador web que busque crear sitios web interactivos y dinámicos. Sin embargo, para aprovechar al máximo las nuevas características de HTML5, los desarrolladores web necesitan conocer y utilizar herramientas adicionales, como frameworks front-end, editores de texto especializados, herramientas de depuración, bibliotecas de JavaScript y plataformas de alojamiento. Al utilizar estas herramientas, los desarrolladores web pueden mejorar su eficiencia, productividad y calidad de sus sitios web.
En este artículo, te explico qué son las cookies, cómo funcionan, cuáles son sus atributos y para qué se utilizan. También hablaremos de los riesgos que pueden entrañar las cookies. Además, profundizaremos en las cookies de terceros, explicando su papel en la publicidad y el seguimiento de usuarios.
Si diseñas aplicaciones web que consumen API, estoy seguro de que alguna vez te has encontrado el problema de Cross origin resource sharing (CORS). En este documento veremos por qué ocurre, en qué se basa y cómo se puede solucionar.
Configurar Nginx para que sea compatible con Cross origin resource sharing, incluso con varios orígenes, es sencillo si tienes el truco. En este artículo configuraremos un servidor Nginx para que CORS no vuelva a molestarte. Incluye el código.
Empezar un proyecto ahora es más fácil si utilizas herramientas que te echan una mano para elegir diferentes aspectos visuales, listos para copiar y pegar. Artículo para los que no somos expertos en diseño.
En este artículo de la colección de Recursos para tu web te dejo un par de herramientas para crear o usar directamente animaciones CSS. Listas para copiar y pegar en tu web o para aprender sobre ellas.
La caché de HTTP nos permite servir una página web mucho más rápido, evitando latencias y retrasos en el cliente y reduciendo el uso de nuestros servidores.