Programación Web en Servidor Curso INEM 2010 CSS y jQuery CSS y jQuery Santiago González Tortosa <sgonzalez@fi.upm.es>
Programación Web en ServidorCurso INEM 2010
CSS y jQueryCSS y jQuery
Santiago González Tortosa<[email protected]>
Programación Web en ServidorCurso INEM 2010
Objetivo
Notas
Contenidos
• Repaso del curso• Cliente VS Servidor
• JavaScript• CSS• Estructura de un proyecto• jQuery• Web 2.0
Conocer los alcances y limitaciones de Ajax y Web 2.0
Javascript es la base…
Programación Web en ServidorCurso INEM 2010
Objetivo
Notas
Contenidos
• Repaso del curso• Cliente VS Servidor
• JavaScript• CSS• Estructura de un proyecto• jQuery• Web 2.0
Conocer los alcances y limitaciones de Ajax y Web 2.0
Javascript es la base…
Programación Web en ServidorCurso INEM 2010
Objetivo
Notas
• Cliente– Ubicación: Cualquier
máquina
– Navegador web
– Maquina local
– Tiempo de Ejecución• Servida la página
• Por evento
– Ejemplo: JavaScript
• Servidor– Ubicación: Máquina
determinada
– Ejecución de paginas dinámicas
– Servicios
– Tiempo de Ejecución• Al solicitar la página
– Ejemplo: PHP, ASP, …
Cliente VS Servidor
Programación Web en ServidorCurso INEM 2010
Objetivo
Notas
Contenidos
• Repaso del curso• Cliente VS Servidor
• JavaScript• CSS• Estructura de un proyecto• jQuery• Web 2.0
Conocer los alcances y limitaciones de Ajax y Web 2.0
Javascript es la base…
Programación Web en ServidorCurso INEM 2010
Objetivo
Notas
BuclesFor…in
While
ObjetosString
Date
Array
Math
Ejemplos
Mandatosdocument.write("Hello Dolly");
Comentarios// Comentario
/* Otro
comentario */
Variablesvar res = 14;
Operadores
ComparacionesIf…then
Switch
Repaso JavaScript
Repasar contenidos de JavaScript (JS)
Programación Web en ServidorCurso INEM 2010
Repaso JavaScript
Operator Description Example Result
+ Addition x=y+2 x=7
- Subtraction x=y-2 x=3
* Multiplication x=y*2 x=10
/ Division x=y/2 x=2.5
% Modulus (division remainder)
x=y%2 x=1
++ Increment x=++y x=6
-- Decrement x=--y x=4
Programación Web en ServidorCurso INEM 2010
Objetivo
Notas
Repaso JavaScript
Operator Description Example== is equal to x==8 is false === is exactly equal to x===5 is true
x==="5" is false!= is not equal x!=8 is true> is greater than x>8 is false< is less than x<8 is true>= is greater than or equal to x>=8 is false<= is less than or equal to x<=8 is true
Los operadores de comparación son importantes
Programación Web en ServidorCurso INEM 2010
Objetivo
Notas
• Temporizador– Hacer un temporizador con la función setTimeOut() para que salude la
maquina
• Password cifrado– Cuando el usuario inserte el password en dos campos
– Comprobar que ambos password debe ser el mismo
– Al pulsar sobre botón, se transformará en ******
• Tips– Cuando el usuario se ponga encima de una imagen, se le muestra una
explicación. Al salir de la imagen, se oculta la información
• Creador de Passwords– Se puede utilizar el nombre de usuario y mail para crear el password.
Utilizar Rand o Date.
• Comprobar que una fecha sea correcta– Meses de 28/29, 30 o 31 días. Año bisiesto
Ejemplos de JS
Más info en la página de W3Schools
Programación Web en ServidorCurso INEM 2010
Objetivo
Notas
• JS no es para hacer cálculos dummy…
• JS es para operar en la web a nivel de cliente
• JS permite acceder al DOM
Recuerda
Programación Web en ServidorCurso INEM 2010
Objetivo
Notas
Contenidos
• Repaso del curso• Cliente VS Servidor
• JavaScript• CSS
• W3Schools• Estructura de un proyecto• jQuery• Web 2.0
Conocer los alcances y limitaciones de Ajax y Web 2.0
Javascript es la base…
Programación Web en ServidorCurso INEM 2010
Objetivo
Notas
Contenidos
• Repaso del curso• Cliente VS Servidor
• JavaScript• CSS• Estructura de un proyecto• jQuery• Web 2.0
Conocer los alcances y limitaciones de Ajax y Web 2.0
Javascript es la base…
Programación Web en ServidorCurso INEM 2010
Objetivo
Notas
• PROYECTO– img: Imagenes– css: ficheros de estilo– js: javascript– inc: ficheros incluidos– private: ficheros PHP ejecutados solo al
loguearse un usuario– public: ficheros PHP ejecutados sin
necesidad de loguearse– index.php
Programación Web en ServidorCurso INEM 2010
Objetivo
Notas
• EJEMPLO DE PROYECTO
Programación Web en ServidorCurso INEM 2010
Objetivo
Notas
Contenidos
• Repaso del curso• Cliente VS Servidor
• JavaScript• CSS• Estructura de un proyecto• jQuery• Web 2.0
Conocer los alcances y limitaciones de Ajax y Web 2.0
Javascript es la base…
Programación Web en ServidorCurso INEM 2010
Objetivo
Notas
• http://jquery.com• Librería de JS
– Write less, do more.…<script src=http://code.jquery.com/jquery-1.4.2.js type="text/javascript"></script>
• Nos permite manipular toda la web (DOM,css, javascript,…)
• Todos los elementos DOM se acceden con ‘$’ o con lo que quieras.window.document.getElementById(“id_campo”).value = ‘h’;
$(‘#id_campo’).val(‘h’);
• Veamos la documentación…
jQuery
Qué es jQuery
Programación Web en ServidorCurso INEM 2010
Objetivo
Notas
• Aplicaciones:– jQuery Plugins: http://plugins.jquery.com/
– jQuery UI: http://jqueryui.com/
– jQuery TOOLS: http://flowplayer.org/tools/
jQuery
Qué es jQuery
Programación Web en ServidorCurso INEM 2010
Objetivo
Notas
Contenidos
• Repaso del curso• Cliente VS Servidor
• JavaScript• CSS• Estructura de un proyecto• jQuery• Web 2.0
Conocer los alcances y limitaciones de Ajax y Web 2.0
Javascript es la base…
Programación Web en ServidorCurso INEM 2010Web 2.0
La Web es sólo una parte de los servicios que componen Internet
La popularidad de la Web se debe a su versatilidad
Servicios que componen Internet
Esta parte de Internet es la Web
Objetivo
Notas
Programación Web en ServidorCurso INEM 2010
Todos los medios y formas de comunicación pueden ser contenidos en la Web 2.0
Ver: http://flickrvision.com/maps/show_3d
... y una parte de la Web es la Web 2.0
La mezcla de servicios es lo común
Web 2.0
Objetivo
Notas
Programación Web en ServidorCurso INEM 2010
La web 2.0 es una serie de formas de sindicación y servicios inter- dependientes
Para algunos la Web 2.0 no es otra cosa que la Web evolucionada
Esfera Web 2.0
Historia
Web 2.0
Objetivo
Notas
Programación Web en ServidorCurso INEM 2010
Objetivo
Notas
• Llega la Web 2.0– Páginas dinámicas
– Info obtenida de BBDD
– Se actualiza muy frecuentemente
– El usuario interactua con la web
• Frente a la Web 1.0– Páginas estáticas
– Info. estática
– No era actualizada frecuentemente
– El usuario era un mero espectador
“…2.0 es aquellas utilidades y servicios de internet que se sustentan en una base de datos, la cual puede ser modificaa por los usuarios del servicio, ya sea en su contenido (añadiendo, editando o borrando info), bien en la forma de presentarlos, o en contenido y forma simultaneamente.” (Ribes 2007)
Programación Web en ServidorCurso INEM 2010
Uso de Internet por país
Web 2.0
Objetivo
Notas
Internet se extiende por el mundo con mucha rapidez y AL ha mejorado su acceso y participación en contenidos
El Castellano es la tercera lengua en Internet
Programación Web en ServidorCurso INEM 2010
Internet se extiende por el mundo con mucha rapidez y AL ha mejorado su acceso y participación en contenidos
El Castellano es la tercera lengua en Internet
Número de páginas web por
país
Web 2.0
Objetivo
Notas
Programación Web en ServidorCurso INEM 2010
La web 2.0 es definida, principalmente, por su carácter social y participativo
Definida por ser un vehículo social
¿Qué define la web 2.0?
Web 2.0
• La World Wide Web como plataforma• Aprovechar la inteligencia colectiva• La gestión de la base de datos como
competencia básica• El fin del ciclo de las actualizaciones de
versiones del software• Modelos de programación ligera. Búsqueda de
la simplicidad• El software no limitado a un solo dispositivo• Experiencias enriquecedoras del usuario
Ver: http://es.wikipedia.org/wiki/Web_2.0
Objetivo
Notas
Programación Web en ServidorCurso INEM 2010
Actualmente una serie de profesionales trabajan juntos a través de la Web 2.0
Sin libertad de intercambio no hay Web 2.0
Intercreatividad
Ver: http://es.wikipedia.org/wiki/Wikipedia
• La intercreatividad es el proceso de hacer cosas o resolver problemas juntos”
• No solo refuerza la capacidad de transferir datos, sino que va mucho más allá, pues le asigna un valor estratégico al proceso social de intercambio y a la construcción colectiva del saber.
Objetivo
Notas
¿Qué esIntercreatividad?
Programación Web en ServidorCurso INEM 2010
Si compartir es la escencia de W2, ¿hasta dónde un producto es nuestro?,…
Nuevas fórmulas se están ensayando
Intercreatividad
Ver: http://creativecommons.org/
• Los derechos de autor son muy restrictivos para las formas de web 2.0
• Se requería formulas legales que pudieran dar cabida a la posmodernidad de la web 2.0
• Creative Commons es una de las formulas más extendidas y que mejor cubre diversas posibilidades
Derechos de autor
Objetivo
Notas
Programación Web en ServidorCurso INEM 2010
… ¿hasta dónde está permitido que hagamos uso de ciertos recursos?
La gran industria del entretenimiento sufre su impacto
Intercreatividad
Derechosde autor
Objetivo
Notas
Programación Web en ServidorCurso INEM 2010
Si más personas usan la Web 2.0 ésta mejora sus prestaciones
Comunicarse, compartir e intercambiar sin intermediarios
Intercreatividad
Redes socialespara compartir y crear juntos
Redes socialeshttp://www.facebook.com http://www.43things.com http://myspace.com
Objetivo
Notas
Programación Web en ServidorCurso INEM 2010
Uno de los grandes impactos de la web 2.0 es la “desaparición” de los intermediarios de la información
Muchos Blogs tienen más visitas que algunos diarios
Principales servicios Web 2.0
Servicios para intercambio de contenidosademás de las redes sociales tenemos:
Blogshttp://wordpress.orghttp://www.vox.comhttp://www.blogger.com
Blogginghttp://technorati.comhttp://www.bloginfluence.net http://bloglines.com
Sistemas de gestión de contenidoshttp://www.joomla.orghttp://www.backpackit.comhttp://www.livestoryboard.comopensourcecms.com
Wikishttp://wikispaces.comhttp://www.mediawiki.orghttp://www.tiddlywiki.com
Ver:http://www.youtube.com/watch?v=NN2I1pWXjXI&feature=related
Objetivo
Notas
Programación Web en ServidorCurso INEM 2010
El impacto de los Blogs se debe, en buena medida, gracias a que: fotos, videos y audios se encuentran en otros servicios
Todos los medios pueden estar en la red
Principales servicios Web 2.0
Más sobre contenidos
Oficinas virtualeshttp://docs.google.comhttp://www.ajaxwrite.comhttp://thinkfree.comhttp://www.zohosheet.com http://product.thinkfree.com/desktop/calchttp://www.slide.com http://empressr.comhttp://slideshare.net
Fotoshttp://www.flickr.comhttp://www.riya.com http://picasa.google.com
Videoshttp://www.blinkx.comhttp://jumpcut.comhttp://www.youtube.com
Ver:http://www.youtube.com/watch?v=muVUA-sKcc4&feature=related Idea central
Objetivo
Notas
Programación Web en ServidorCurso INEM 2010
Los mapas en la Web 2.0 son parte escencial de su desarrollo. La “Neo Geografía” se basa en su uso.
El móvil será pieza clave en la elaboración de mapas
Mapas 2.0
Algunos servicioshttp://maps.google.com/http://maps.live.com/http://espanol.maps.yahoo.comhttp://www.mapquest.com/http://www.openlayers.org/ Live Search Maps
Objetivo
Notas
Programación Web en ServidorCurso INEM 2010
Google Maps permite que varios usuarios trabajen sobre un mismo mapa (es el más difundido)
Los usuarios pueden acceder a diversos permisos
Mapas 2.0
Google MapsObjetivo
Notas
Programación Web en ServidorCurso INEM 2010
La desaparición de los programas de escritorio ya no es una apuesta descabellada
Algunos programas Web 2.0 son mejores que los de escritorio
Competidores en 2.0
Objetivo
Notas
Servicios que pueden reemplazarprogramas de PC
•De oficina: Google Docs y Zoho Suite•Antivirus: VirSCAN o VirusTotal•Para zipear: Wobzip•Audio: Anywhere.fm o Sideload•Webmessenger múltiples: Meebo, Google Talk Gadget•Gestionar tareas: Remember The Milk, Nozbe o Labelia•Gestionar nuestros gastos e ingresos: Moneytrackin o Buxfer•Gestión de proyectos: 5pm, MyQuire, Project2manage o ProjectOffice•Base de datos de clientes: Relenta CRM o FunClient•Miniblog: Twitter
Programación Web en ServidorCurso INEM 2010
Objetivo
Notas
Apendice Contenidos
• AjaxAjaxConocer los alcances y limitaciones de Ajax y Web 2.0
Javascript es la base…
Programación Web en ServidorCurso INEM 2010
Objetivo
Notas
• ¿Qué significa?– Asynchronous JavaScript And XML
• ¿Para qué sirve?– Para hacer solicitudes desde cliente a
servidor
• ¿Y qué conseguimos?– Web dinámica, interactiva (RIA o Rich
Internet Applications)
Programación Web en ServidorCurso INEM 2010
Objetivo
Notas
Programación Web en ServidorCurso INEM 2010
Objetivo
Notas
• JavaScript
• DOM (Document Object Model)
• Objecto XmlHttpRequest (jQuery)
• Servidor (PHP, ASP, Perl, JSP, etc.)– OJO: Solicitudes Ajax SÓLO hacia la OJO: Solicitudes Ajax SÓLO hacia la
misma maquina en el mismo puertomisma maquina en el mismo puerto
¿Qué necesita?
Programación Web en ServidorCurso INEM 2010
Objetivo
Notas
• Cargar paginas?• Almacenar información?• Carrito de la compra?• Añadir contacto?• Comprobación de URL?
• Gmail (Google Mail)• Facebook
Ejemplos
Programación Web en ServidorCurso INEM 2010
Objetivo
Notas
$.ajax({
type: “GET”,
url: “http://localhost/prueba.php?op=goGoogle”,
async: false,
dataType: html,
success: function(htmlObtained){
$(“#mydiv”).html(htmlObtained);
},
error: function(){
$(“#error”).show();
$(“#mydiv”).hide();
}
});
Con jQuery
Programación Web en ServidorCurso INEM 2010
Objetivo
Notas
• Cuando la unica respuesta es HTML y la deseas cargar sobre un elemento del DOM:
$(elto).load(url)
• Ejemplo$(“#mydiv”).load(“http://localhost/prueba.php?
op=goGoogle”);
Con jQuery
Programación Web en ServidorCurso INEM 2010
Objetivo
Notas
• Navegación por mi web– Carga dinámica de paginas– Menú: Home, Mis aficiones, Curriculum
Ejercicio
Programación Web en ServidorCurso INEM 2010
Objetivo
Notas
• Conjunto de protocolos y estándares que sirven para intercambiar datos entre aplicaciones.
• Cliente & Servidor• Ventajas
– Independiente del lenguaje
– Independiente de las plataformas
– Se apoya en HTTP (seguridad)
– Interoperabilidad entre plataformas de distintos fabricantes
– Formato de los datos variable (xml, html, json, txt, …)
Servicios Web (Web services)
Programación Web en ServidorCurso INEM 2010
Objetivo
Notas
• Meteorología de una ciudad
• Cita de la semana
• Cambio de pesetas a euros
• Traductor
• Noticias destacadas (no RSS)
• Imágenes Flickr
Ejemplos de WS
Programación Web en ServidorCurso INEM 2010
Objetivo
Notas
JSON
• JavaScript Object Notation
• http://www.json.org/
var variable = {“personas": [
{“nombre": “juan", “edad": “32“, “genero”: “H”},
{“nombre": “maria", “edad": “26“, “genero”: “M”},
{“nombre": “luis", “edad": “50“, “genero”: “H”},
] };
• Validador JSON– http://www.jsonlint.com/
Programación Web en ServidorCurso INEM 2010
Objetivo
Notas
Ejercicio
• Obtener fotos de flickr– WS: http://www.flickr.com/services/feeds/photos_public.gne?tags=TAGS&format=json
– Rellenar un campo de texto con las tags a buscar. Al pinchar sobre el botón “buscar”, obtener las fotos obtenidas según las tags.
Programación Web en ServidorCurso INEM 2010
Objetivo
Notas
• Buscador con Ajax– Buscar en fichero o en BD– Obtención de información con JSON
– PREGUNTA: Presentar resultados paginados: desde JavaScript o desde PHP???
Ejercicio
Programación Web en ServidorCurso INEM 2010
CSS y jQueryCSS y jQuery
Santiago González Tortosa<[email protected]>