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
1. Ajaxify, carga dinámica de
páginas en WordPress
guardando el estado y
respetando el SEO
@alfonsosiloniz
2. Quien soy
19/04/2013Page 2
Alfonso Silóniz
De ida y vuelta
Consultor Tecnológico Freelance
Actualmente trabajando en la
creación de una start-up
3. 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
19/04/2013Page 3
4. 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
19/04/2013Page 4
10. 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
19/04/2013Page 10
13. 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
19/04/2013Page 13
16. ¿Qué es?
• Un GIST
• https://github.com/browserstate/ajaxify
19/04/2013Page 16
17. 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
19/04/2013Page 17
19. 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! #!
19/04/2013Page 19
20. ¿Y lo de WordPress?
• CMS más extendido actualmente
• Existen plugins para integrarlo
• Pero vale para cualquier página web
19/04/2013Page 20
22. 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
19/04/2013Page 23