Programacion web

#FormaciónEBusiness
Programación Web
Carlos Alonso Pérez

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>

</head>
<body>

</body>
</html>

HTML: Elementos
Elemento Descripción Elemento Descripción
a Hipervínculo button Botón
code
Fragmento
de
código

fuente
hr
Separa
dos
bloques
con

una
línea
horizontal
input
Elemento
para
que
el

usuario
introduzca
datos
label
E>queta
para
otro

elemento
p Párrafo table Tabla
td Celda
de
una
tabla textarea
Una
caja
de
texto
de
varias

líneas
th
Celda
de
cabecera
de
una

tabla
title El
Ftulo
del
documento
tr Una
ﬁla
de
una
tabla div Agrupa
elementos

HTML: Elementos
<!DOCTYPE html>
<html>
<head>
</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>
</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: Propiedades
Propiedad Descripción Propiedad Descripción
background-color
Color
de
fondo
de
un

elemento
border
El
borde
que
rodea
un

elemento
color
Color
principal
de
un

elemento
font-size
Tamaño
de
fuente
de
un

elemento
de
texto
height Altura
de
un
elemento padding
Espacio
entre
el
borde
de

un
elemento
y
su

contenido
text-decoration
Decoració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 operativo
Los 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áﬁcos
y

guardar
archivos
API’s
de
acceso
a
red,
dibujar
gráﬁcos
y

guardar
datos
locales.

Ejecución de programas JS
<!DOCTYPE html>
<html>
<head>
<title>Page Title</title>
<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: Estructura
Representa 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>

• 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!
https://twitter.com/calonso

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 jQuery
target.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!
https://twitter.com/calonso

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 }
</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: 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 eventos
Debemos 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 eventos
jQuery proporciona algunos métodos de
conveniencia para eventos muy comunes.
http://api.jquery.com/category/events/
$( "p" ).click(function() {
});

Manejando eventos
En 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 eventos
Una vez que hemos ‘terminado’ y no queremos seguir
recibiendo notificaciones de un evento en concreto.
http://api.jquery.com/off/
var handler = function() {
};
$( "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>
<script src="http://code.jquery.com/jquery-2.1.1.min.js"></script>
<script>
var clicks = 0;
$("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.
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.
event.preventDefault();
});
• ... de la propagación.
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>
$('input[type="submit"]').click(function(event) {
if (!$('#mandatory').val()) {
event.preventDefault();
}
});
});
</script>

Invocando manejadores
http://api.jquery.com/trigger/
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!

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.

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(){
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();
});
$('#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
• 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 -> JSON
var 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!
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}, …].

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

GRACIAS.
Carlos Alonso Pérez
@calonso

Programacion web

Más contenido relacionado

La actualidad más candente (20)

Destacado (20)

Similar a Programacion web (20)

Último (20)

Programacion web