SharePoint 2010 + jQuery + HTML5, ¿Me estoy perdiendo algo?

1,053 views

Published on

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.

Published in: Technology
0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total views
1,053
On SlideShare
0
From Embeds
0
Number of Embeds
6
Actions
Shares
0
Downloads
6
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

SharePoint 2010 + jQuery + HTML5, ¿Me estoy perdiendo algo?

  1. 1. Cristian M. Zaragoza GómezSharePoint Developer – Colaboración y BúsquedaMCTS, SharePoint 2010, Application Development
  2. 2. Objetivos de la sesión¿Qué pasa con HTML5?ααα β β β β βα
  3. 3. Objetivos de la sesiónjQuery y SharePoint: matrimonio perfectoαααα β β βααα
  4. 4. ¿Qué pasa con HTML5?
  5. 5. ¿Qué pasa con HTML5?Mitos y realidades (I)α β β β β β β β β β βα β
  6. 6. ¿Qué pasa con HTML5?Mitos y realidades (II)α β β γ β γ γ γ
  7. 7. Demo 1: Ejemplo de web en HTML5
  8. 8. ¿Qué pasa con HTML5?Cuestionario de compatibilidad: SP2010 + HTML5 (I)αααα
  9. 9. ¿Qué pasa con HTML5?Cuestionario de compatibilidad: SP2010 + HTML5 (II)α β β β β β
  10. 10. ¿Qué pasa con HTML5?Cuestionario de compatibilidad: SP2010 + HTML5 (III)α β γ β γ γ γ β
  11. 11. <video> en HTML5
  12. 12. ¿Qué pasa con HTML5?Cuestionario de compatibilidad: SP2010 + HTML5 (IV)α β γ β γ β γ
  13. 13. ¿Qué pasa con HTML5?Cuestionario de compatibilidad: SP2010 + HTML5 (IV)α β β β β γ γ γ
  14. 14. Demo 6: «Servicio meteorológico» en SharePoint 2010
  15. 15. jQuery y SharePoint: matrimonio perfecto
  16. 16. ¿Por qué jQuery?SharePoint es un diamante por pulir.ααα
  17. 17. ¿Por qué jQuery?Entonces…¿Cuál es el problema?αααα
  18. 18. ¿Por qué jQuery?Igual que tenemos el amigo pintor…
  19. 19. ¿Por qué jQuery?….tenemos a jQuery.
  20. 20. ¿Qué es jQuery?Básicamente es…αα β β β β βααα β β β β β
  21. 21. ¿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()); }) })
  22. 22. ¿Qué es jQuery?Historia de amorαααα
  23. 23. Demo 4: Casos de éxito de webs con jQuery
  24. 24. ¿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/
  25. 25. ¿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>
  26. 26. ¿Cómo incluyo jQuery en SP?¿Por qué es importante usar los CDN?α βαα β β βαα
  27. 27. ¿Cómo incluyo jQuery en SP?Múltiples opciones… α α α α α
  28. 28. ¿Cómo incluyo jQuery en SP?ScriptLink & CustomAction & ScriptSrcααα β β βαα
  29. 29. Demo 5: Añadiendo jQuery mediante ScriptLink
  30. 30. Evitar conflictosEn jQuery, como en la vida, muy importante evitar conflictos.αα βαααα jQuery.noConflict();
  31. 31. Demo 6: Servicios Web + Ajax + jQuery = Menú Dinámico
  32. 32. Cristian M. Zaragoza GómezSharePoint Developer – Colaboración y Búsqueda MCTS, SharePoint 2010, Application Development

×