En este tutorial vamos a ver cómo acelerar la experiencia del usuario en pequeños sitios estáticos usando algunos métodos diferentes. (Un sitio estático es aquel que no tiene ningún contenido renovable, por lo que no hay publicaciones de blog o secuencias de fotos, etc.)

La forma en que vamos a hacer esto es sacando recargas de página. En pocas palabras, cuando el usuario usa algunos enlaces de navegación, solo cambia el contenido principal de la página y no hace que el navegador vuelva a cargar la página.

Vamos a lograr este efecto de dos maneras diferentes, la primera solo usa jQuery, y la otra usa AJAX y algo de PHP. Ambos tienen sus pros y sus contras, que veremos también. Echa un vistazo a la demo para ver lo que estamos tratando de lograr y comencemos con el primer (y más simple) método jQuery.

Logrando el efecto con jQuery

Primero veremos la configuración de la página. El HTML es muy simple pero tiene algunas partes importantes, "lo esencial" por así decirlo. Necesitamos algunos enlaces de navegación que tengan un hash href específico (que explicaremos en un minuto) y un área de contenido específico que ya tendrías en cualquier otro sitio de todos modos. Así que primero veamos qué hay en nuestro archivo index.html:

Speed Up Static Sites with jQuery

Título de la primera página

Contenido de la primera página.

Mira, no hay carga de página!

Contenido de la segunda página.

Ooh fade!

Contenido de la tercera página.

Título de la cuarta página

Cuarto contenido de la página.

Entonces, para recapitular las partes importantes de lo que debe incluirse en el marcado: tenemos nuestra navegación en la que cada enlace tiene un href del DIV correspondiente. Entonces, el enlace a "Página 2" tiene un href = "# page2" (que es la identificación del

elemento más abajo). Entonces, con este primer método, como puede ver, tenemos un div de # contenido principal que rodea nuestras secciones, y luego el contenido de cada página una detrás de la otra en su propio elemento 'sección' separado. También llamamos a jQuery y nuestro propio archivo javascript custom.js en el que se realizará la funcionalidad real del sitio.

Pero antes de llegar a eso, necesitamos agregar una línea a nuestro CSS, no hay necesidad de revisar todo el archivo CSS para este ejemplo, ya que es solo para apariencia, que cambiará con cualquier proyecto en el que esté trabajando. Sin embargo, con este primer método hay una línea que es esencial y eso es:

#page2, #page3, #page4 {display: none;}

Esto oculta todas las 'páginas' excepto la primera. Entonces, la página aparece normalmente en la primera carga.

El JavaScript

Entonces ahora explica lo que necesitamos lograr a través de jQuery. En nuestro archivo custom.js, debemos orientarnos cuando el usuario hace clic en un enlace de navegación. Recupere su enlace href y encuentre la 'sección' con esa misma ID, luego oculte todo en el # div de contenido principal y fade en la nueva sección. Esto es lo que parece:

$(function() {$('header nav a').click(function() {var $linkClicked = $(this).attr('href');document.location.hash = $linkClicked;if (!$(this).hasClass("active")) {$("header nav a").removeClass("active");$(this).addClass("active");$('#main-content section').hide();$($linkClicked).fadeIn();return false;}  else {return false;}}); var hash = window.location.hash; hash = hash.replace (/ ^ # /, ''); switch (hash) {case 'page2': $ ("#" + hash + "-link"). trigger ("click"); break; case 'page3': $ ("#" + hash + "-link"). trigger ("click"); break; case 'page4': $ ("#" + hash + "-link"). trigger ("click"); break;}}); 

Este código se divide en dos secciones; el primero logra lo que acabamos de mencionar. Tiene una función de clic en los enlaces de navegación del encabezado. A continuación, coloca '# page1, # page2', etc. en una variable llamada $ linkClicked. Luego actualizamos la URL del navegador para que tenga el mismo nombre hash. Luego tenemos una declaración if asegurándonos de que el enlace en el que estamos haciendo clic no es la pestaña actual, si es que no hace nada, pero si no esconde todo el contenido actual y muestra el div con un ID de $ linkClicked. ¡Simple como eso!

La segunda sección comprueba si la URL tiene un enlace hash al final, si lo hace, encuentra un enlace correspondiente en la página con el mismo valor (es por eso que los enlaces tienen identificadores específicos en el marcado) y luego activa esa enlace (hace clic en él). Lo que hace esto es que el usuario puede volver a cargar una página después de haber navegado a una 'página' y la actualización enviará al usuario allí en lugar de volver a la primera página, lo que a menudo puede ser un problema con este tipo de sistema.

Así que ese es el final del primer método, esto da como resultado un sitio estático en funcionamiento que tiene intercambio de contenido instantáneo y no se recarga la página. El único inconveniente de este método es el hecho de que todo el contenido se invoca en la carga inicial, ya que está todo allí en el archivo de índice. Esto puede comenzar a ser un problema con las fotos y el contenido adicional que hace que la primera visita al sitio cargue un poco más. Así que veamos otra forma de hacer este mismo efecto que puede eliminar ese problema.

Usando AJAX y PHP

Para lograr este mismo efecto, pero de una manera ligeramente diferente, de modo que la carga inicial no cargue todo nuestro contenido y, por lo tanto, disminuya la velocidad (derrotando el punto si el sitio tiene mucho contenido) usaremos un poco PHP y AJAX. Esto significa que la estructura de archivos de nuestro proyecto cambiará y se verá así:

estructura

Entonces, si mira, el archivo de índice ahora es .php y no .html. También tenemos un archivo adicional llamado 'load.php', así como una nueva carpeta / directorio llamado páginas en las que hay cuatro páginas HTML. Ahora, esto significa que, si trabajas localmente, debes configurar un entorno de desarrollo local utilizando algo así como MAMP (para Mac) o Servidor WAMP (para ventanas). O puede cargar toda la carpeta en un servidor web si tiene acceso y edición allí, básicamente necesitará un entorno donde funcionará PHP.

El index.php solo ha cambiado una cosa, pero es importante, ahora no cargaremos todo el contenido, y simplemente llamaremos al contenido inicial con un PHP incluido. Ahora se verá algo como esto:

Entonces el comienzo de la línea está llamando al primer archivo HTML de nuestra carpeta de páginas e insertando completamente en nuestro # contenido principal DIV. El archivo llamado puede contener cualquier contenido que desee que aparezca en la página.

Usando $ .ajax en el JavaScript

Pasemos al nuevo JavaScript, ahora se ve ligeramente diferente, principalmente ahora estamos usando AJAX para buscar el nuevo contenido de cada archivo HTML cuando el usuario hace clic en la navegación correspondiente. Aquí está la primera función en el código (el segundo permanece igual que antes):

$(function() {$('header nav a').click(function() {var $linkClicked = $(this).attr('href');document.location.hash = $linkClicked;var $pageRoot = $linkClicked.replace('#page', '');if (!$(this).hasClass("active")) {$("header nav a").removeClass("active");$(this).addClass("active");$.ajax({type: "POST",url: "load.php",data: 'page='+$pageRoot,dataType: "html",success: function(msg){if(parseInt(msg)!=0){$('#main-content').html(msg);$('#main-content section').hide().fadeIn();}  }});} else {event.preventDefault ();}}); 

Entonces, expliquemos lo que está pasando. Estamos agregando una variable más, eso es $ pageRoot. Este es básicamente el número real en el que se hace clic (tomando la parte 'página' del enlace hash y dejando el número individual). Luego, dentro de la misma declaración "if" que antes, llamamos ajax y usamos el otro archivo PHP que mencionamos anteriormente para analizar la información proporcionada (en qué enlace se ha hecho clic) y encontrar la página correspondiente. Luego, si vuelve sin error, insertamos el nuevo HTML del archivo recibido en nuestro # DIV de contenido principal. Entonces, para evitar que cambie repentinamente, lo ocultamos todo y luego lo atenuamos.

load.php

El contenido del nuevo archivo PHP es corto y agradable, toma el número de página que jQuery le ha enviado y busca si existe el archivo HTML correspondiente. Si lo hace, obtiene todo el contenido y lo devuelve a la función AJAX (que mostramos hace un momento que insertamos ese contenido en la DIV principal).

A continuación, el sitio debe verse como quieras, pero la mayoría funciona correctamente.

¡Eso es! El sitio ahora llama al archivo HTML correspondiente cada vez que el usuario hace clic en un enlace de navegación. Cambia el contenido sin hacer que la página se vuelva a cargar. ¡Y de esta manera todavía no tiene que llamar todo el contenido en la carga inicial de la página! Espero que haya logrado aprender algún método útil de este tutorial y que puede usarlo para mejorar algún proyecto de alguna manera.

Puedes ver el Demostración de jQuery aquí, el Demostración de PHP aquí, o descarga la fuente y mira más de cerca.

¿Has usado AJAX para cargar contenido? ¿Has usado una técnica similar para acelerar tu sitio? Háganos saber sus pensamientos en los comentarios a continuación.

Imagen / miniatura destacada, imagen sobrealimentada a través de Shutterstock.