JQuery y HTML5 estan de moda! En esta sesión veremos ejemplos de qué nos puede aportar jQuery para mejorar nuestra aplicación de SharePoint, así como su compatibilidad e integración con el nuevo HTML5.

3. Cristian M. Zaragoza Gómez
SharePoint Developer – Colaboración y Búsqueda
MCTS, SharePoint 2010, Application Development

4. Objetivos de la sesión
¿Qué pasa con HTML5?
α
α
α
β
β
β
β
β
α

5. Objetivos de la sesión
jQuery y SharePoint: matrimonio perfecto
α
α
α
α
β
β
β
α
α
α

6. ¿Qué pasa con HTML5?

7. ¿Qué pasa con HTML5?
Mitos y realidades (I)
α
β
β
β
β
β
β
β
β
β
β
α
β

8. ¿Qué pasa con HTML5?
Mitos y realidades (II)
α
β
β
γ
β
γ
γ
γ

9. Demo 1: Ejemplo de web en HTML5

10. ¿Qué pasa con HTML5?
Cuestionario de compatibilidad: SP2010 + HTML5 (I)
α
α
α
α

11. ¿Qué pasa con HTML5?
Cuestionario de compatibilidad: SP2010 + HTML5 (II)
α
β
β
β
β
β

12. ¿Qué pasa con HTML5?
Cuestionario de compatibilidad: SP2010 + HTML5 (III)
α
β
γ
β
γ
γ
γ
β

13. <video> en HTML5

14. ¿Qué pasa con HTML5?
Cuestionario de compatibilidad: SP2010 + HTML5 (IV)
α
β
γ
β
γ
β
γ

15. ¿Qué pasa con HTML5?
Cuestionario de compatibilidad: SP2010 + HTML5 (IV)
α
β
β
β
β
γ
γ
γ

16. Demo 6: «Servicio meteorológico» en SharePoint 2010

17. jQuery y SharePoint: matrimonio perfecto

18. ¿Por qué jQuery?
SharePoint es un diamante por pulir.
α
α
α

21. ¿Por qué jQuery?
Entonces…¿Cuál es el problema?
α
α
α
α

22. ¿Por qué jQuery?
Igual que tenemos el amigo pintor…

23. ¿Por qué jQuery?
….tenemos a jQuery.

24. ¿Qué es jQuery?
Básicamente es…
α
α
β
β
β
β
β
α
α
α
β
β
β
β
β

25. ¿Qué es jQuery?
JavaScript vs jQuery
//JAVASCRIPT NATIVO
window.onload = function(){
var elemento =
document.getElementById("elemento1");
elemento.onclick = function(){
alert("Has hecho click en: "+this.value);
}
}
//NUEVO PARADIGMA - JQuery
$(function(){
$("#elemento1").click(function(){
alert("Has hecho click en: +$(this).val());
})
})

26. ¿Qué es jQuery?
Historia de amor
α
α
α
α

27. Demo 4: Casos de éxito de webs con jQuery

28. ¿Qué es jQuery?
Referencias
α
β http://docs.jquery.com/Main_Page
α
β http://jqfundamentals.com/book/index.html
α
β http://woorkup.com/2011/05/12/jquery-visual-cheat-sheet-1-6/
α
β http://jqapi.com/

29. ¿Cómo incluyo jQuery en SP?
Empezamos por el principio…
α
α
<script src=”/Style Library/js/Scripts/jquery-1.6.0.min.js”
type=”text/javascript”></script>
α
<script src=”http://ajax.microsoft.com/ajax/jquery/jquery-
1.6.0.min.js” type=”text/javascript”></script>

30. ¿Cómo incluyo jQuery en SP?
¿Por qué es importante usar los CDN?
α
β
α
α
β
β
β
α
α

32. ¿Cómo incluyo jQuery en SP?
Múltiples opciones…
α
α
α
α
α

33. ¿Cómo incluyo jQuery en SP?
ScriptLink & CustomAction & ScriptSrc
α
α
α
β
β
β
α
α

34. Demo 5: Añadiendo jQuery mediante ScriptLink

35. Evitar conflictos
En jQuery, como en la vida, muy importante evitar conflictos.
α
α
β
α
α
α
α
jQuery.noConflict();

36. Demo 6: Servicios Web + Ajax + jQuery = Menú Dinámico

38. Cristian M. Zaragoza Gómez
SharePoint Developer – Colaboración y Búsqueda
MCTS, SharePoint 2010, Application Development