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

5. Como era antes…
19/04/2013Page 5

6. Como era antes…
19/04/2013Page 6

7. Y aparece FLASH!!
19/04/2013Page 7

8. Y aparece FLASH!!
19/04/2013Page 8

9. ¿nos sirve?
19/04/2013Page 9
NO

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

11. ¿nos sirve?
19/04/2013Page 11
NO

12. 19/04/2013Page 12

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

14. ¿nos sirve?
19/04/2013Page 14
DEPENDE

15. ¿Como lo hacemos sencillo?
19/04/2013Page 15
AJAXIFY

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

18. Como se usa
19/04/2013Page 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.histo
ry.js"></script>
<!-- Ajaxify -->
<script src="//raw.github.com/browserstate/ajaxify/master/ajaxify-
html5.js"></script>

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

21. EJEMPLOS
19/04/2013Page 21

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

23. Gracias
19/04/2013Page 24
@alfonsosiloniz // alfonsosiloniz@gmail.com