programacion web
TRANSCRIPT
#FormaciónEBusiness
Programación Web
Carlos Alonso Pérez
#FormaciónEBusiness
COMPARTE Y DEBATE #DIPLOMADOAPPS
Índice de contenidos
• Introducción a la Web • Introducción HTML • Introducción CSS • El navegador web como entorno de ejecución • Uso de JS en la web: jQuery • Seguridad
La web: Evolución• Inicialmente: Herramienta para visualizar archivos remotos que
cambiaban muy ocasionalmente. • El contenido se genera dinámicamente en los servidores. • Se añade interactividad a los sitios web. • Pasan unos años en blanco... • Se permite comunicar a la web con los servidores sin necesidad de
recargar la página al completo. • Se añade soporte nativo y estándar para muchas características
multimedia y de gráficos. Se aumentan las prestaciones con características como geolocalización, almacenamiento local de datos, etc...
La web
• La web es un entorno completo de programación de aplicaciones que utiliza:
• HTML para definir su estructura • CSS para definir la presentación • JS para la lógica
Desarrollo web: Evolución• El desarrollo es simplemente maquetación. • Se añade interactividad con JS, pero solo como elemento “decorativo”,
nada importante. Nadie se plantea que JS valga para otra cosa. • Aparecen DOM y AJAX. Las páginas web ya pueden comunicarse con
servidores sin recargar la página. Son mucho más usables y útiles.
• 2007: Aparece Google Gears: Extensión para navegadores que añadía capacidades como almacenamiento local, threads en background, etc...
• Actualmente podemos desarrollar aplicaciones web prácticamente como si se tratase de aplicaciones de escritorio.
Aplicaciones Web: Ventajas• Para el usuario:
– No tiene necesidad de instalar la aplicación ni desinstalarla si no le gusta. – Actualizaciones transparentes.
• Para el desarrollador: – Ventajas de sus usuarios:
• No hay que escribir código de instaladores/desinstaladores • Desarrollar una aplicación con pequeños incrementos y saber que todos
los usuarios estarán actualizados siempre. – La web es multiplataforma, por tanto, las aplicaciones web son
multiplataforma.
Aplicaciones Web: Desventajas• Rendimiento:
• Se ejecuta en el navegador • Los datos se deben descargar del servidor.
• Comparación con el SDK nativo. • Normalmente los SDK nativos permiten mayor funcionalidad y resultados más
integrados. • Fragmentación.
• Diferentes tamaños de pantalla. • Diferentes capacidades hardware. • Implementación / soporte de los APIs • http://caniuse.com/, http://mobilehtml5.org/, http://kangax.github.io/compat-table
HTML
• HTML Básico • Estructura • Elementos • Atributos
HTML
• HTML es el lenguaje utilizado para definir la estructura y contenido de una página web.
• Los documentos HTML se componen de elementos HTML encerrados en símbolos < y >.
• El navegador web lee e interpreta éstos elementos HTML y crea una representación visual y/o audible del contenido.
HTML: Estructura
• Partes del documento. • DOCTYPE • HTML • HEAD • BODY
• Estructura de árbol.
<!DOCTYPE html><html> <head> <!-- Cabecera del documento HTML --> </head> <body>
<!-- Cuerpo del documento HTML --> </body></html>
HTML: ElementosElemento Descripción Elemento Descripción
a Hipervínculo button Botón
codeFragmento de código fuente hr
Separa dos bloques con una línea horizontal
inputElemento para que el usuario introduzca datos label
E>queta para otro elemento
p Párrafo table Tabla
td Celda de una tabla textareaUna caja de texto de varias líneas
thCelda de cabecera de una tabla title El Ftulo del documento
tr Una fila de una tabla div Agrupa elementos
HTML: Elementos<!DOCTYPE html><html> <head> <!-- Cabecera del documento HTML --> </head> <body>
<p>Esto es un parrafo de ejemplo</p><button>Esto es un boton</button><table>
<tr><th>Cabecera 1</th><th>Cabecera 2</th>
</tr><tr>
<td>Celda 1, 1</td><td>Celda 1, 2</td>
</tr><tr>
<td>Celda 2, 1</td><td>Celda 2, 2</td>
</tr></table>
</body></html>
HTML: Elementos
• Todos los elementos van dentro del body.
• Todos los tags deben estar balanceados.
• El contenido de cada elemento va entre dos tags, apertura y cierre.
• Algunos elementos contienen texto, otros contienen otros elementos.
<!DOCTYPE html><html> <head> <!-- Cabecera del documento HTML --> </head> <body>
<p>Esto es un parrafo de ejemplo</p><button>Esto es un boton</button><table>
<tr><th>Cabecera 1</th><th>Cabecera 2</th>
</tr><tr>
<td>Celda 1, 1</td><td>Celda 1, 2</td>
</tr><tr>
<td>Celda 2, 1</td><td>Celda 2, 2</td>
</tr></table>
</body></html>
HTML: Atributos• Sirven para configurar los elementos • Tipos:
• Generales: id, style, class, name, ... • Propios: href, value, src, ... • Personales: data-*
• Cada elemento puede tener varios
<a href=”/target.html” class=”link” id=”firstlink”>Go to target</a><input type=”text” placeholder=”Write here...” disabled/><button data-custom=”custom data”>Click here</button>
CSS
• CSS Básico • Aplicando estilos • Selectores CSS • La cascada CSS • Clases CSS
CSS
• CSS es la herramienta estándar para definir los estilos visuales del contenido de una página web
• Un estilo está compuesto de una o varias declaraciones separadas por ;
• Cada declaración consiste en una propiedad CSS y un valor.
background-color: grey; color: white
CSS Básico• Propiedades fundamentales:
• Fuentes: font-family: ‘Arial’; font-size: 28 pt; • Colores: color: red; • Márgenes: margin-left: 10%; • Bordes: border-width: 1px; • Fondos: background-image: url(‘back.png’); • Tamaños: width: 100px; height: 200px; • Posiciones: position: absolute; left: 50px; top: 20px; • ...
CSS Básico• Propiedades ‘de acceso rápido’ (shortcut): Permiten
asignar muchas propiedades fundamentales relacionadas de una sola vez. • Márgenes:
• margin: 10px 10px 20px 5px;
• margin-top: 10px; margin-right: 10px; margin-bottom: 20px; margin-left: 5px;
• Bordes: • border: 1px solid blue;
• border-width: 1px; border-style: solid; border-color: blue;
• ...
Aplicando CSS• Inline: Mediante el atributo HTML style
<p style=”margin: 20px; border: solid red 2px”>Parrafo con 20 px de margen y borde rojo</p>
• En la sección head: Mediante un tag <style>
<head> ... <style> p { // p es un selector CSS!! margin: 20px; border: solid red 2px; } </style> ...</head>
Aplicando CSS
Hojas de estilos independientes
<head> ... <link rel=”stylesheet” href=”css/styles.css” type=”text/css” /> ...</head>
/* * css/styles.css */p { margin: 20px; border: solid red 2px;}
CSS: Estilos en cascada
• Orden de prioridad de los estilos • Estilos definidos en el
propio elemento • Estilos definidos en
<style> </style> en el <head> del documento
• Archivos CSS enlazados • Estilos por defecto del
navegador
<!DOCTYPE html><html><head> <link rel=”stylesheet” type=”text/css” href=”styles.css” /> <style> p { color: red; } </style></head><body> <p style=”color: blue”>The paragraph</p></body></html>
CSS: Selectores
• Sintaxis que permite seleccionar elementos de un documento HTML • Selectores básicos
• #a_id: El elemento cuyo atributo id sea “a_id” • .a_class: Los elementos cuyo atributo class contenga “a_class” • p: Elementos de tipo p (párrafos) • p[lang=”fr”]: Párrafos cuyo atributo lang sea igual a “fr” • *[name=”x”]: Cualquier elemento cuyo atributo name sea “x”
CSS: Selectores
• Combinando selectores básicos • span.fatal: Elementos <span> cuyo atributo class contenga “fatal” • span[lang=”fr”].warning: <span> con atributo lang=”fr” y además class “warning”
• Especificando su ubicación en el documento • #log span: Elementos <span> descendientes del elemento con id “log” • #log>span: Elementos <span> que sean hijos del elemento con id “log” • body>h1:first-child: El primer elemento <h1> que sea hijo del <body>
• Combinando varios selectores • div, #log: Todos los elementos <div> y el elemento con id “log”
CSS para programadores
• position • top, left, bottom, right • width, height • z-index • display • visibility
• clip • overflow • margin, padding • border • background • opacity
CSS: Ejemplo<!DOCTYPE html><html><head> <meta charset="utf-8" /> <title>CSS Example</title> <style> img { width: 200px; height: 200px; } #translucent { position: absolute; top: 100px; left: 100px; opacity: .75; } </style></head><body> <img src='images/A.jpg' /> <img id="translucent" src='images/E.jpg' /></body></html>
CSS: Clases
<head> ... <style> ... .translucent { position: absolute; top: 100px; left: 100px; opacity: .75; } </style></head><body> ... <img class="translucent" src='images/E.jpg' /></body>
Concepto similar a clases en OO.
CSS: PropiedadesPropiedad Descripción Propiedad Descripción
background-colorColor de fondo de un elemento border
El borde que rodea un elemento
colorColor principal de un elemento font-size
Tamaño de fuente de un elemento de texto
height Altura de un elemento paddingEspacio entre el borde de un elemento y su contenido
text-decorationDecoración de un elemento de texto width Ancho de un elemento
Maquetación Web: Ejercicio!• Construir la portada de vuestra página
personal. • Debe contener:
• Una fotografía vuestra. • Resúmen de vuestra biografía. • Sección con enlaces de interés.
<!DOCTYPE html><html><head> <title>Mi bio</title> <meta charset="utf8" />
<style type="text/css"> img { float: left; padding: 10px ; height: 280px; border: 2px solid black; margin: 0 20px; } </style></head><body> <h1>My personal website</h1> <img src="yo.jpg" /> <p>…</p>
<ul> <li><a href="http://mrcalonso.com">My website</a></li> <li><a href="http://www.mydrivesolutions.com">My company</a></li> <li><a href="http://http://www.interlat.co/">Interlat</a></li> </ul></body></html>
Maquetación Web: Solución!
Javascript en navegadores web: jQuery
Nuestro contexto: La web
El navegador como sistema operativoLos navegadores en los últimos años han
evolucionado hasta convertirse en sistemas operativos
SO Tradicional Navegador
Organizar archivos en carpetas representados por iconos
Organizar bookmarks en carpetas representados por iconos
Ejecutar múl>ples aplicaciones en ventanas dis>ntas
Visualizar múl>ples páginas o en diferentes pestañas
API’s de acceso a red, dibujar gráficos y guardar archivos
API’s de acceso a red, dibujar gráficos y guardar datos locales.
Ejecución de programas JS<!DOCTYPE html><html><head> <title>Page Title</title> <meta charset="utf8" /> <script src="http://code.jquery.com/jquery-2.1.1.min.js"></script> <script> var clicks = 0; $(document).ready(function(){ $("#the_button").click(function() { clicks += 1; $("#the_counter").html("You have clicked: " + clicks + " times."); }); }); </script></head><body> <input id="the_button" type="button" value="Click me!" /> <p id="the_counter" /></body></html>
Ejecución de programas web
• El navegador solicita la página. • El servidor responde con el contenido HTML. • Fase síncrona: El navegador recorre todo el HTML creando un
‘documento’ (DOM) en memoria. • El navegador renderiza el DOM en el viewport. • Fase asíncrona (event-driven): Cada vez que ocurre un evento
para el que se ha definido una acción, JS modifica el DOM de la memoria navegador y éste lo renderiza de nuevo en el viewport.
DOM: EstructuraRepresenta el contenido de un documento HTML como un árbol de nodos.
<!DOCTYPE html><html> <head> <title>Sample Document</title> </head> <body> <h1>An HTML Document</h1> <p>This is a <i>simple</i> document. </body></html>
DOM: Nodos
• Acerca de jQuery • Usando jQuery • Eventos • Efectos
• Ajax • Plugins • Rendimiento • Organización de código
• Framework JS pensado para simplificar el uso de JS en la web.
• Open Source • Utilizado en más del 80% de los 10.000
sitios web más visitados del mundo. • Prácticamente el estándar de la
programación web.
¿Por qué jQuery?
var p = document.getElementsByTagName(‘p’)[0];p.innerHTML = “New Contents.”;
Modificando el contenido del primer párrafo…
$(‘p’).first().html(“New Contents.”);
VS
Probando los ejemplos
Lab 2
https://www.dropbox.com/s/gssoy6gs1mjvy3e/Lab2.pdf
Existen métodos estáticos y métodos de instancia.
$.each($(‘p’), function(i, obj){ // Do something with the paragraph});
$(‘p’).each(function(i, obj){ // Do something with the paragraph});
¡Fuente común de errores!
Una página no se puede manipular hasta que no esté totalmente cargada.
$(document).ready(function() { console.log(‘ready!’);});
http://api.jquery.com/ready/
Los atributos de un elemento contienen información relevante sobre el mismo.
$(‘p’).attr(‘id’);$(‘p’).attr(‘id’, ‘the_new_id’);
http://api.jquery.com/attr/
Atributos
El concepto más simple de uso de jQuery es: “selecciona estos elementos y haz algo con ellos”
http://api.jquery.com/category/selectors/
Seleccionando elementos
Selectores CSS + Pseudo - Selectores
Selectores CSS
$(“#my_element_id”);
$(“.my_css_class”);
$(“input”);
$(“#contents ul.cars li”);
Pseudo - Selectores
$(“#my_element_id”);
$(“.my_css_class”);
$(“input”);
$(“#contents ul.cars li”);
Seleccionando elementos: Ejercicio!
var profileImage = $(‘.ProfileAvatar-image').attr('src');var headerImage = $('.ProfileCanopy-headerBg img’).attr('src');$('.ProfileAvatar-image').attr('src', headerImage);$('.ProfileCanopy-headerBg img').attr('src', profileImage);
jQuery ofrece métodos sencillos y cross-browser para manipular elementos
http://api.jquery.com/category/manipulation/
Manipulando Elementos
• Mover elementos • Copiar elementos • Eliminar elementos
• Crear elementos • Manipular atributos • …
Creando Elementos
$( “<p>Esto es mi nuevo párrafo</p>" );
$( "<a/>", { html: “Visite mi web!”, href: “http://www.mrcalonso.com“});
• Literal:
• Utilizando un objeto de atributos
Añadiendo/Moviendo Elementos
var new_p = $( “<p>Esto es mi nuevo párrafo</p>" );$(‘body’).append(new_p);
http://api.jquery.com/category/manipulation/dom-insertion-inside/
http://api.jquery.com/category/manipulation/dom-insertion-around/
http://api.jquery.com/category/manipulation/dom-insertion-outside/
• jQuery recubre los objetos DOM básicos en objetos jQuery • Le añade propiedades que nos facilitan la vida • Elimina incompatibilidades
El objeto jQuery
var target = document.getElementById(‘target’);var newElement = document.createElement(‘div’);// Sin jQuerytarget.parentNode.insertBefore(newElement, target.nextSibling);// Con jQuery$(target).after(newElement)
Navegando por el DOM
var child = $(‘#child_element’);child.parent();
http://api.jquery.com/category/traversing/tree-traversal/
• A partir de una selección, tenemos opción a movernos por el documento hacia:
• Ancestros • Descendientes
• Vecinos
DOM
Lab 3
https://www.dropbox.com/s/h9ehgkym20o5bhc/Lab3.pdf
jQuery también nos permite actuar sobre las propiedades CSS de los elementos.
http://api.jquery.com/category/css/
jQuery y CSS
var new_p = $( “<p>Esto es mi nuevo párrafo</p>" );new_p.css(‘background-color’, ‘red’);
jQuery y CSS: Ejercicio!
$('.ProfileNav-value:even').css('background-color', 'green');$('.ProfileNav-value:odd').css('background-color', 'red');
HTML: Enlaces al documento
• Los elementos enlace <a> pueden referenciar secciones dentro del documento.
• Al hacer click en el enlace, el navegador irá a la sección referenciada.
<a href=”#section1”>Go to section 1</a>...<h1 id=”section1”>
DOM: Ejercicio!• Mejorar el código de toc.js para que cada entrada de la tabla
generada sea un enlace a la sección correspondiente. • No se puede modificar el archivo base.html, por tanto el algoritmo deberá modificar
también el contenido existente para añadir los elementos necesarios para que los enlaces funcionen correctamente.
• Para que cada enlace se coloque en una nueva línea, incluirlos en párrafos, o utilizar la propiedad css display: block
<p><a href=’#id_x’>Seccion 1.1</a></p><p><a href=’#id_y’>Seccion 1.2</a></p>...<h2 id=‘id_x’>Seccion 1.1</h2><h2 id=‘id_y’>Seccion 1.2</h2>
DOM: Solucion!
function buildTOC() { var toc = $('<div />'); $('body').prepend(toc);
var headings = $("h1, h2, h3, h4, h5, h6");
headings.each(function(index){ var heading = $(this); var level = parseInt($(this).prop('tagName').charAt(1)); var tocEntry = $('<a/>', { html: $(this).html(), 'class': 'toc-' + level, href: '#id_'+index }); toc.append(tocEntry); $(this).attr('id', 'id_'+index); });}
<style> .toc-1 { display: block; margin-left: 0px } .toc-2 { display: block; margin-left: 15px } .toc-3 { display: block; margin-left: 30px } .toc-4 { display: block; margin-left: 45px } .toc-5 { display: block; margin-left: 60px } .toc-6 { display: block; margin-left: 75px } </style>
jQuery también nos facilita el manejo de las propiedades data de los elementos.
http://api.jquery.com/category/data/
Data
$( "#myDiv" ).data( "keyName", { foo: "bar" } );$( "#myDiv" ).data( "keyName" );
Eventos
Eventos: Conceptos• Uno de los aspectos más importantes de una página web es la interacción
con los usuarios. • Para saber cuando ocurre un evento debemos ‘escucharlo’ explícitamente. • Event handler o event listener: Función que maneja o responde a un
determinado evento. • Event object: Objeto asociado al evento que contiene detalles particulares del
mismo y se recibe como argumento de la función manejadora. • Propagación o ‘event bubbling’: Proceso por el que el navegador decide cuál
es el objeto que debe manejar el evento. • Cancelación: Técnica por la que podemos capturar un evento y evitar su
acción por defecto. Muy utilizada para validar campos de formularios.
Eventos: Tipos• En las páginas web se generan miles de eventos, algunos generados por parte del usuario,
otros por componentes de la página. • Eventos dependientes del dispositivo: Directamente relacionados con las capacidades del
dispositivo (mousedown, keydown, touchmove, ...) • Eventos independientes del dispositivo: Eventos de entrada que no dependen de las
capacidades del dispositivo (click, textinput, ...) • Eventos de interfaz de usuario: Eventos de alto nivel, generados por elementos de la interfaz
(focus, blur, submit, ...) • Eventos de cambio de estado: Lanzados por actividad en la red, no por actividad del usuario
(load) • Eventos de APIs: Eventos que puedan ser lanzados por cualquier API que estemos usando
(playing y volumechange de elemento <audio>) • Timers y errores: Eventos que se lanzan cuando un timer completa su cuenta o cuando ocurre
un error en tiempo de ejecución.
Manejando eventosDebemos asignar una función manejadora al evento que queremos ‘escuchar’.
http://api.jquery.com/on/
$( "p" ).on( "click", function() { console.log( "<p> was clicked" );});
Manejando eventosjQuery proporciona algunos métodos de conveniencia para eventos muy comunes.
http://api.jquery.com/category/events/
$( "p" ).click(function() { console.log( "<p> was clicked" );});
Manejando eventosEn algunos casos puede ser útil añadir datos personalizados al evento.
$( "p" ).on( "click", { foo: "bar"}, function( event ) { console.log( "event data: " + event.data.foo + " (should be 'bar')" );});
Manejando eventosUna vez que hemos ‘terminado’ y no queremos seguir recibiendo notificaciones de un evento en concreto.
http://api.jquery.com/off/
var handler = function() { console.log( "<p> was clicked" );};$( "p" ).on( “click", handler);//…$( "p" ).off( “click", handler);
Manejando eventos: Ejercicio!
Crear un documento HTML que contenga un botón y un párrafo que indique el número de veces que se ha hecho click en el botón.
Manejando eventos: Solución!<!DOCTYPE html><html><head> <title>Page Title</title> <meta charset="utf8" /> <script src="http://code.jquery.com/jquery-2.1.1.min.js"></script> <script> var clicks = 0; $(document).ready(function(){ $("button").click(function() { clicks += 1; $("#the_counter").html("You have clicked: " + clicks + " times."); }); }); </script></head><body> <button>Click Me!</button> <p id="the_counter" /></body></html>
Manejadores: Argumentos• Las funciones manejadoras reciben un único
argumento, que es el objeto evento que ha ocurrido. • Éste incluye información importante del evento ocurrido.
http://api.jquery.com/category/events/event-object/
$( "p" ).click(function(event) { console.log( "<p> was clicked at: “ + event.pageX + ", “ + event.pageY );});
Manejadores: Contexto
• Los manejadores se definen como métodos del objeto. • El contexto (this) dentro del manejador es el propio objeto • Este objeto se puede recubrir con un objeto jQuery para
manejarlo más fácilmente.
$( "p" ).click(function(event) { console.log( "Contents of the clicked <p>: “ + $(this).html() );});
Procesado de eventos• 1ª Fase: Captura de eventos. • 2ª Fase: Invocación de manejadores en el
objeto que lanzó el evento • 3ª Fase: Propagación (bubbling) del evento.
<html> ...<body> <div> <a> <img></img> </a> </div></body>
window
div
a
img
Fase 1: Captura de eventos• El evento recorre el árbol en sentido
descendente ejecutando los capturadores registrados si existen.
• Podemos capturar eventos en esta fase, pero dado que algunos navegadores no soportan esta característica, jQuery tampoco.
• Esta fase nos da la oportunidad de capturar un evento antes de que llegue al propio objeto que lo lanzó, por tanto en esta fase nunca se ejecutan manejadores del target.
window
div
a
img
Fase 2: Manejadores en el target
window
div
a
img
Fase 3: Propagación (bubbling)
Se recorre el árbol en sentido ascendente ejecutando todos los manejadores registrados para el evento.
window
div
a
img
Delegación de eventos
Uso de la propagación de eventos.
<ul id="list"> <li><a href="http://domain1.com">Item #1</a></li> <li><a href="/local/path/1">Item #2</a></li> <li><a href="/local/path/2">Item #3</a></li> <li><a href="http://domain4.com">Item #4</a></li></ul>
// attach a directly bound event$( "#list a" ).on( "click", function( event ) { // …});
// attach a delegated event$( "#list" ).on( "click", "a", function( event ) { // …});
Escuchando click en cada ‘a’
Escuchando click en la ‘#list’ y filtrando solo aquellos emitidos
por un elemento ‘a’
Cancelación ...
• ... de la acción por defecto.
$( "p" ).click(function(event) { event.preventDefault();});
• ... de la propagación.
$( "p" ).click(function(event) { event.stopPropagation();});
Manejo de eventos: Ejercicio!
Escribir una función que valide los datos del siguiente formulario y no permita su envío a menos que el campo obligatorio esté relleno.
...<form> <input type=”text” id=”mandatory” /> <input type=”submit” value=”Send!”/></form>...
Manejo de eventos: Solución!
La solución pasa por cancelar la acción por defecto del click en el input submit.
<script> $(document).ready(function(){ $('input[type="submit"]').click(function(event) { if (!$('#mandatory').val()) { event.preventDefault(); } }); });</script>
Invocando manejadores
http://api.jquery.com/trigger/
$( "p" ).click(function(event) { console.log( "<p> was clicked at: “);});$( "p" ).trigger(“click");
• En ocasiones puede ser necesario simular algún evento. • jQuery nos permite invocar manejadores, pero no simula
el evento nativo en el navegador.
Eventos personalizados
http://api.jquery.com/trigger/
$( "p" ).on(“my_event”, function(event, arg1, arg2) { console.log( “My event happened!. Args:“ + arg1 + arg2);});$( "p" ).trigger(“my_event”, [“arg1”, “arg2”]);
Si nuestra aplicación necesita manejar eventos personalizados, jQuery nos lo facilita.
http://api.jquery.com/on/
Eventos personalizados: Ejercicio colaborativo!• Se pide hacer un programa JS que simule una carrera de coches • El progreso de la carrera se visualizará en una tabla. • Los coches se crearán en estado de espera. • Cuando arranque la carrera cada coche pasará a estado corriendo
y calculará un tiempo aleatorio. • Transcurrido ese tiempo aleatorio, el coche habrá llegado a la meta,
será el ganador y pasará a estado apagado. • Cuando todos los coches hayan llegado a la meta, se mostrará cuál
fue el ganador. • La comunicación de cuando arranca la carrera a los coches y de los
coches cuando terminan será lanzando eventos personalizados.
DEMO
http://jsfiddle.net/Jnf4v/#&togetherjs=tMsCLFnUV8
Eventos personalizados: Ejercicio colaborativo!
Animaciones
Mostrar / Ocultar elementos
http://api.jquery.com/hide/
$( "p" ).hide();$( "p" ).show();
http://api.jquery.com/show/
$( "p" ).hide("slow");$( "p" ).show("fast");
Más efectos nativos
http://api.jquery.com/category/effects/sliding/
$( "p" ).fadeIn();$( "p" ).fadeOut();
http://api.jquery.com/category/effects/fading/
$( "p" ).slideUp();$( "p" ).slideDown();
Animaciones: Ejercicio!
• Mejorar el proyecto simulador de carreras de coches para que: • Inicialmente sólo se muestre un input de texto y el botón Run!. • En el input se recibirá el número de coches que participarán. • Cuando se pulse Run!, tanto el input como el botón
desaparecerán y la tabla de simulación de carrera aparecerá. • Finalizada la carrera la tabla desaparecerá y se mostrará un
párrafo indicando cuál fue el coche ganador.
Animaciones: Ejercicio!
<style type="text/css"> .hidden { display: none; }</style>
$(document).ready(function() { $('button').click(function() { $('table').fadeIn(); $('#race_config').fadeOut(); var race = new Race($('#cars_num').val()); race.start(); });});
<div id='race_config'> <input id="cars_num" type="number" /> <button>Run!</button></div><table class=“hidden">…</table>
Animaciones: Ejercicio!Race.prototype = { … add_finished: function(car_num) { … if(this.num_finished_cars == this.running_cars) { $('#race_results p').html('RACE FINISHED. WINNER: ' + this.winner); $('#race_results').fadeIn(); $('table').fadeOut(); } }};
…<div id='race_results' class='hidden'> <p></p></div>…
Callbacks de animación
$('#race_config').fadeOut(function(){ var race = new Race($('#cars_num').val()); race.start();});
¡La carrera comienza antes de que la tabla esté visible!
Los efectos visuales generan saltos desagradables.
Callbacks: Ejercicio!
Mejorar el proyecto del simulador de carreras de coches para que las animaciones sean ordenadas, de manera que no se generen esos
‘saltos’.
Callbacks: Ejercicio!
Mejorar el proyecto del simulador de carreras de coches para que las animaciones sean ordenadas, de manera que no se generen esos
‘saltos’.
$('#race_results p').html('RACE FINISHED. WINNER: ' + this.winner);$('table').fadeOut(function(){ $('#race_results').fadeIn();});
var race = new Race($('#cars_num').val());$('#race_config').fadeOut(function(){ $('table').fadeIn(function(){ race.start(); });});
Más animaciones
$( "p" ).animate( { height: “+=50", opacity: 0.25 }, 300, // Duration function() { // Callback console.log( "done!" ); });
http://api.jquery.com/animate/
jQuery nos permite animar cualquier propiedad CSS (excepto colores) para crear nuestra propia animación.
AJAX
AJAX
• Las páginas web tradicionales debían recargar todo el contenido cada vez que se quería actualizar alguna parte del mismo.
• Altamente ineficiente (e.g. webmail) • 2003: La mayoría de los navegadores adoptó XmlHttpRequest (XHR) • Con AJAX, el navegador inicia una petición mediante código JS. • Esta petición se hace en segundo plano, por tanto la aplicación sigue
funcionando y respondiendo. • Cuando la petición retorna se invoca un callback.
AJAX: Conceptos básicos• Verbos HTTP:
• GET: Para pedir datos, operaciones que no modifican datos. • POST: Operaciones que modifican, crean o destruyen datos.
• Tipos de datos: jQuery necesita conocer qué tipo de dato espera • text, html, json, jsonp, xml, …
• Same-Origin Policy y JSONP • Las peticiones AJAX están limitadas al mismo protocolo, mismo
dominio y mismo puerto que el origen de la página que hace la petición.
• Esta restricción se puede evitar usando JSONP
JSON• Formato de intercambio de información que utiliza sintaxis JS. • El más utilizado para el intercambio de información debido a su
sencillez y ligereza.
var json = '{"name":"John Johnson”, "street":"Oslo West 16”, "phone":"555 1234567” }’;
var obj = JSON.parse(json);console.log(obj.name);
JS -> JSONvar obj = {name:"John Johnson”, street:"Oslo West 16”, phone:"555 1234567” };
var json = JSON.stringify(obj);console.log(json);
JSON -> JS
AJAX
http://api.jquery.com/jQuery.ajax/
• El método $.ajax() es el indicado para crear peticiones AJAX. • Recibe un objeto de configuración con las opciones. • jQuery ofrece algunos métodos de conveniencia adicionales, pero
todos internamente utilizan $.ajax()
AJAX: Ejercicio!
http://api.jquery.com/jQuery.ajax/
• Ahora introducimos un servicio que coordinará las carreras de coches.
• Este servicio indicará el número de coches que deben competir. • Mejorar el proyecto de las carreras para que se reciba el número de
competidores del servicio http://interlat-racing.herokuapp.com/config
• Atención!, no se podrá pulsar Run! hasta que no se haya recibido cuántos conductores van a participar!
AJAX: Ejercicio!$(document).ready(function() { var race; $.ajax({ url: 'http://interlat-racing.herokuapp.com/config', success: function(data, textStatus, jqXHR ) { race = new Race(data.cars_count); $('button').removeAttr('disabled'); $('#race_config p').html(data.cars_count + ' drivers ready'); } });…
<div id='race_config'> <p>Waiting drivers...</p> <button disabled>Run!</button></div>
AJAX: Ejercicio!• Es el momento de un ranking! • http://interlat-racing.herokuapp.com/ranking es un servicio que recibirá
un POST con la clasificación de la carrera formateada como un JSON de una sola clave (ranking) que contendrá un array con los números de los coches ordenados según el resultado de la carrera. ({ ranking: [1, 3, 4, 2] }).
• Enviar a la finalización de la carrera el ranking para añadirlo al ranking global
• http://interlat-racing.herokuapp.com/ranking también recibe un GET en el que se recibirá un array ordenado de la forma [{car: 1, score: 50}, { car: 3, score: 41}, …].
function Ranking() { this.ranking = [];}
Ranking.prototype = { ranking: null, rank_car: function(car) { this.ranking.push(car); }, count: function() { return this.ranking.length; }, submit: function() { $.ajax({ url: 'http://interlat-racing.herokuapp.com/ranking', type: 'POST', contentType: 'application/json', data: JSON.stringify({ ranking: this.ranking }), error: function(data, textStatus, jqXHR) { alert('ERROR Submitting the ranking! ' + data.error); }, success: function(data, textStatus, jqXHR ) { console.log('Ranking successfully submitted'); } }); }}
AJAX: Ejercicio!
Race.prototype = { … add_finished: function(car_num) { … this.ranking.rank_car(car_num);
var race = this; if(this.ranking.count() == this.running_cars) {
… } }};
Ranking.prototype = {. . . get: function() { $.ajax({ url: 'http://interlat-racing.herokuapp.com/ranking', success: function(data, textStatus, jqXHR) { var list = $('#ranking ol');
$.each(data, function(index, object){ var item = $('<li></li>', { html: 'Car: ' + object.car + ' Score: ' + object.score }); list.append(item); }); $('#race_results').fadeOut(function(){ $('#ranking').fadeIn(); }); } }); }}
AJAX: Ejercicio!
<body>. . . <div id='ranking' class='hidden'> <ol> </ol> </div></body>
Organización de código• El código debe dividirse en unidades funcionales (módulos,
servicios, etc…). • Evita la tentación de tener todo el código en un sólo bloque
$(document).ready()! • DRY. Identifica piezas de código similares y reagrupa. • Cada unidad funcional debe estar total o lo máximo posible
desacoplada, es decir, debe poder existir por sí misma, y la comunicación con el exterior debe ser en forma de paso de mensajes.
Organización de código: Ejercicio!
Con el conocimiento que ya tenemos de cómo construir módulos en JS y siguiendo las ideas anteriores, organizar el código del proyecto simulador de carreras de coches.
• Carpetas separadas para css y js. • Un archivo js diferente para cada clase definida.
Seguridad
Seguridad• Primera barrera de defensa: Incapacidad.
• JS no tiene acceso al sistema de ficheros y directorios del ordenador. • JS tiene un acceso a red restringido
• Segunda barrera de defensa: Restricciones. • JS puede abrir nuevas ventanas, pero para prevenir su uso abusivo solo podrá
abrirlas en respuesta a un evento del usuario • JS puede cerrar ventanas, pero solamente aquellas que ese mismo programa ha
abierto. Para otras necesita confirmación del usuario. • JS no puede asignar el valor de un HTML FileUpload. • Un script no puede leer el contenido de documentos cargados desde otros
servidores, ni registrar manejadores de eventos de estos documentos. Así protege de leer passwords, etc... Esto se conoce como ‘Same-origin policy’
Same-origin policy• Un código JS sólo puede acceder a Windows o documents que
tienen el mismo origen que el documento que cargó el script. • Origen = protocolo + host + puerto del documento que cargó el script • Un script alojado en un servidor A es incluido en un documento de un
servidor B. El script podrá manejar el documento. Si el script abre una nueva ventana del mismo servidor B, también podrá manejarlo, pero si abre una ventana de un tercer servidor C, entonces Same-origin policy ya no le permitirá manejarla.
• Esta política también se usa para determinar con qué servidores puede comunicarse con AJAX
Relajando Same-origin policy
• Cross-Origin Resource Sharing (CORS) • Permite a los servidores definir desde dónde aceptan peticiones mediante la
cabecera Access-Control-Allow-Origin • Cross-Document Messaging:
• Técnica que permite el paso de mensajes de un objeto window a otro. • Los mensajes se envían con postMessage
• Se reciben escuchando el evento onmessage
#FormaciónEBusiness
GRACIAS. Carlos Alonso Pérez @calonso