Ajaxify, carga dinámica de páginas en WordPress guardando el estado y respetando el SEO

@alfonsosiloniz

Quien soy

10/04/2023Page 2

Alfonso Silóniz

De ida y vuelta

Consultor Tecnológico Freelance

Actualmente trabajando en la creación de una start-up

Qué vamos a ver

• Como crear transiciones de carga dinámica entre páginas

• Y que guardan el estado• Y que respetan el SEO• Y sobre WordPress • o NO

10/04/2023Page 3

Qué queremos conseguir

• Cargar dinámicamente las páginas de una Web sin refresco en el navegador con animaciones

• Que podamos navegar por el historial de navegación

• Que Google se entere del contenido

10/04/2023Page 4

Como era antes…

10/04/2023Page 5

Como era antes…

10/04/2023Page 6

Y aparece FLASH!!

10/04/2023Page 7

Y aparece FLASH!!

10/04/2023Page 8

¿nos sirve?

10/04/2023Page 9

NO

Y surge el concepto AJAX

• Definido en 2005• Conglomerado de tecnologías• Basado en el objeto

XMLHttpRequest• Modificaciones asíncronas del DOM• Sumando jQuery y similares, se

añaden efectos

10/04/2023Page 10

¿nos sirve?

10/04/2023Page 11

NO

10/04/2023Page 12

HTML 5 History API

• Permite manipular el historial del navegador sin refrescar las páginas

• popState y pushState– Mantener el estado de la página

almacenado en local– Reescritura de la dirección de la

página

10/04/2023Page 13

¿nos sirve?

10/04/2023Page 14

DEPENDE

¿Como lo hacemos sencillo?

10/04/2023Page 15

AJAXIFY

¿Qué es?

• Un GIST• https://github.com/browserstate/

ajaxify

10/04/2023Page 16

Qué es

• Basado en History.js• Carga las páginas por AJAX

– Realiza transiciones fadein / fadeout– Configuras qué parte del contenido se

recarga dinámicamente obviando el resto (selectores)

– Puedes cargar scripts javascript incluso

10/04/2023Page 17

Como se usa

10/04/2023Page 18

<!-- jQuery --> <script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>

<!-- jQuery ScrollTo Plugin --> <script src="//balupton.github.io/jquery-scrollto/scripts/jquery.scrollto.min.js"></script>

<!-- History.js --> <script src="//browserstate.github.io/history.js/scripts/bundled/html4+html5/jquery.history.js"></script>

<!-- Ajaxify --> <script src="//raw.github.com/browserstate/ajaxify/master/ajaxify-html5.js"></script>

 

Ventajas

• Las páginas individuales mantienen su URL

• Compatible con SEO totalmente• Compatible con no-javascript Añades la

carga dinámica para el usuario final• Compatible con navegadores sin el

History API y HTML4• Actualiza Google Analytics• Evitar los hashbangs! #!

10/04/2023Page 19

¿Y lo de WordPress?

• CMS más extendido actualmente• Existen plugins para integrarlo• Pero vale para cualquier página

web

10/04/2023Page 20

EJEMPLOS

10/04/2023Page 21

Conclusión

• Simple Gist que incorporar a tu código para crear mayor dinamismo en cualquier web

• Manteniendo el historial del navegador y SEO compatible

• Lo puedes extender para crear animaciones javascript más complejas

10/04/2023Page 23

Gracias

10/04/2023Page 24

@alfonsosiloniz // alfonsosiloniz@gmail.com