Betabeers 19 abril2013
23
Ajaxify, carga dinámica de páginas en WordPress guardando el estado y respetando el SEO @alfonsosiloniz
-
Upload
alfonso-sandino -
Category
Technology
-
view
534 -
download
3
description
Charla sobre Ajaxify presentada en el Betabeers Cadiz del 19 de Abril de 2013 en la Sala Supersonic. referencia de Ajaxify: https://github.com/browserstate/ajaxify
Transcript of Betabeers 19 abril2013
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
