Post on 03-Jul-2015
description
Cristian M. Zaragoza Gómez SharePoint Developer – Colaboración y Búsqueda MCTS, SharePoint 2010, Application Development
ααα
β
β
β
β
β
α
Objetivos de la sesión ¿Qué pasa con HTML5?
αααα
β
β
β
α
αα
Objetivos de la sesión jQuery y SharePoint: matrimonio perfecto
¿Qué pasa con HTML5?
αβ
β
β
β
β
β
β
β
β
β
αβ
¿Qué pasa con HTML5? Mitos y realidades (I)
αβ
β
γ
β
γ
γ
γ
¿Qué pasa con HTML5? Mitos y realidades (II)
Demo 1: Ejemplo de web en HTML5
α
α
α
α
¿Qué pasa con HTML5? Cuestionario de compatibilidad: SP2010 + HTML5 (I)
α
β
β
β
β
β
¿Qué pasa con HTML5? Cuestionario de compatibilidad: SP2010 + HTML5 (II)
α
β
γ
β
γ
γ
γ
β
¿Qué pasa con HTML5? Cuestionario de compatibilidad: SP2010 + HTML5 (III)
<video> en HTML5
α
β
γ
β
γ
β
γ
¿Qué pasa con HTML5? Cuestionario de compatibilidad: SP2010 + HTML5 (IV)
α
β
β
β
β
γ
γ
γ
¿Qué pasa con HTML5? Cuestionario de compatibilidad: SP2010 + HTML5 (IV)
Demo 6: «Servicio meteorológico» en SharePoint 2010
jQuery y SharePoint: matrimonio perfecto
α
α
α
¿Por qué jQuery? SharePoint es un diamante por pulir.
α
α
α
α
¿Por qué jQuery? Entonces…¿Cuál es el problema?
¿Por qué jQuery? Igual que tenemos el amigo pintor…
¿Por qué jQuery? ….tenemos a jQuery.
αα
β
β
β
β
β
ααα
β
β
β
β
β
¿Qué es jQuery? Básicamente es…
¿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());
})
})
α
α
α
α
¿Qué es jQuery? Historia de amor
Demo 4: Casos de éxito de webs con jQuery
αβ 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/
¿Qué es jQuery? Referencias
¿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>
αβ
α
αβ
β
β
α
α
¿Cómo incluyo jQuery en SP? ¿Por qué es importante usar los CDN?
α
α
α
α
α
¿Cómo incluyo jQuery en SP? Múltiples opciones…
α
α
αβ
β
β
α
α
¿Cómo incluyo jQuery en SP? ScriptLink & CustomAction & ScriptSrc
Demo 5: Añadiendo jQuery mediante ScriptLink
αα
β
αα
αα
Evitar conflictos En jQuery, como en la vida, muy importante evitar conflictos.
jQuery.noConflict();
Demo 6: Servicios Web + Ajax + jQuery = Menú Dinámico
Cristian M. Zaragoza Gómez SharePoint Developer – Colaboración y Búsqueda
MCTS, SharePoint 2010, Application Development