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

40

description

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.

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

Page 1: SharePoint 2010 + jQuery + HTML5, ¿Me estoy perdiendo algo?
Page 2: SharePoint 2010 + jQuery + HTML5, ¿Me estoy perdiendo algo?
Page 3: SharePoint 2010 + jQuery + HTML5, ¿Me estoy perdiendo algo?

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

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

ααα

β

β

β

β

β

α

Objetivos de la sesión ¿Qué pasa con HTML5?

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

αααα

β

β

β

α

αα

Objetivos de la sesión jQuery y SharePoint: matrimonio perfecto

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

¿Qué pasa con HTML5?

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

αβ

β

β

β

β

β

β

β

β

β

αβ

¿Qué pasa con HTML5? Mitos y realidades (I)

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

αβ

β

γ

β

γ

γ

γ

¿Qué pasa con HTML5? Mitos y realidades (II)

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

Demo 1: Ejemplo de web en HTML5

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

α

α

α

α

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

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

α

β

β

β

β

β

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

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

α

β

γ

β

γ

γ

γ

β

¿Qué pasa con HTML5? Cuestionario de compatibilidad: SP2010 + HTML5 (III)

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

<video> en HTML5

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

α

β

γ

β

γ

β

γ

¿Qué pasa con HTML5? Cuestionario de compatibilidad: SP2010 + HTML5 (IV)

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

α

β

β

β

β

γ

γ

γ

¿Qué pasa con HTML5? Cuestionario de compatibilidad: SP2010 + HTML5 (IV)

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

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

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

jQuery y SharePoint: matrimonio perfecto

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

α

α

α

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

Page 19: SharePoint 2010 + jQuery + HTML5, ¿Me estoy perdiendo algo?
Page 20: SharePoint 2010 + jQuery + HTML5, ¿Me estoy perdiendo algo?
Page 21: SharePoint 2010 + jQuery + HTML5, ¿Me estoy perdiendo algo?

α

α

α

α

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

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

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

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

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

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

αα

β

β

β

β

β

ααα

β

β

β

β

β

¿Qué es jQuery? Básicamente es…

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

¿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());

})

})

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

α

α

α

α

¿Qué es jQuery? Historia de amor

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

Demo 4: Casos de éxito de webs con jQuery

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

¿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>

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

αβ

α

αβ

β

β

α

α

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

Page 31: SharePoint 2010 + jQuery + HTML5, ¿Me estoy perdiendo algo?
Page 32: SharePoint 2010 + jQuery + HTML5, ¿Me estoy perdiendo algo?

α

α

α

α

α

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

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

α

α

αβ

β

β

α

α

¿Cómo incluyo jQuery en SP? ScriptLink & CustomAction & ScriptSrc

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

Demo 5: Añadiendo jQuery mediante ScriptLink

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

αα

β

αα

αα

Evitar conflictos En jQuery, como en la vida, muy importante evitar conflictos.

jQuery.noConflict();

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

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

Page 37: SharePoint 2010 + jQuery + HTML5, ¿Me estoy perdiendo algo?
Page 38: SharePoint 2010 + jQuery + HTML5, ¿Me estoy perdiendo algo?

Cristian M. Zaragoza Gómez SharePoint Developer – Colaboración y Búsqueda

MCTS, SharePoint 2010, Application Development

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