CSS y jQuery

1. CSS y jQuery Santiago González Tortosa <sgonzalez@fi.upm.es>

2. Contenidos Conocer los alcances y limitaciones de Ajax y Web 2.0 • Repaso del curso • Cliente VS Servidor • JavaScript • CSS • Estructura de un proyecto • jQuery • Web 2.0 Javascript es la base…

3. Contenidos Conocer los alcances y limitaciones de Ajax y Web 2.0 • Repaso del curso • Cliente VS Servidor • JavaScript • CSS • Estructura de un proyecto • jQuery • Web 2.0 Javascript es la base…

4. Cliente VS Servidor • 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 • Ubicación: Cualquier máquina • Navegador web • Maquina local • Tiempo de Ejecución • Servida la página • Por evento • Ejemplo: JavaScript

5. Contenidos Conocer los alcances y limitaciones de Ajax y Web 2.0 • Repaso del curso • Cliente VS Servidor • JavaScript • CSS • Estructura de un proyecto • jQuery • Web 2.0 Javascript es la base…

6. Bucles For…in While Objetos String Date Array Math Ejemplos Repaso JavaScript Mandatos document.write("Hello Dolly"); Comentarios // Comentario /* Otro comentario */ Variables var res = 14; Operadores Comparaciones If…then Switch Repasar contenidos de JavaScript (JS)

7. Repaso JavaScript

8. Repaso JavaScript Los operadores de comparación son importantes

9. Ejemplos de JS Más info en la página de W3Schools • 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

10. Recuerda JS no es para hacer cálculos dummy… JS es para operar en la web a nivel de cliente JS permite acceder al DOM

11. Contenidos Conocer los alcances y limitaciones de Ajax y Web 2.0 • Repaso del curso • Cliente VS Servidor • JavaScript • CSS • W3Schools • Estructura de un proyecto • jQuery • Web 2.0 Javascript es la base…

12. Contenidos Conocer los alcances y limitaciones de Ajax y Web 2.0 • Repaso del curso • Cliente VS Servidor • JavaScript • CSS • Estructura de un proyecto • jQuery • Web 2.0 Javascript es la base…

13. 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

14. EJEMPLO DE PROYECTO

15. Contenidos Conocer los alcances y limitaciones de Ajax y Web 2.0 • Repaso del curso • Cliente VS Servidor • JavaScript • CSS • Estructura de un proyecto • jQuery • Web 2.0 Javascript es la base…

16. jQuery Qué es jQuery • 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…

17. jQuery Qué es jQuery • Aplicaciones: • jQuery Plugins: http://plugins.jquery.com/ • jQuery UI: http://jqueryui.com/ • jQuery TOOLS: http://flowplayer.org/tools/

18. Contenidos Conocer los alcances y limitaciones de Ajax y Web 2.0 • Repaso del curso • Cliente VS Servidor • JavaScript • CSS • Estructura de un proyecto • jQuery • Web 2.0 Javascript es la base…

19. Web 2.0 Objetivo Servicios que componen Internet La Web es sólo una parte de los servicios que componen Internet Esta parte de Internet es la Web Notas La popularidad de la Web se debe a su versatilidad

20. Web 2.0 ... y una parte de la Web es la Web 2.0 Objetivo Todos los medios y formas de comunicación pueden ser contenidos en la Web 2.0 Notas La mezcla de servicios es lo común Ver: http://flickrvision.com/maps/show_3d

21. Web 2.0 Objetivo Esfera Web 2.0 La web 2.0 es una serie de formas de sindicación y servicios inter- dependientes Historia Notas Para algunos la Web 2.0 no es otra cosa que la Web evolucionada

22. 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)

23. Web 2.0 Objetivo Uso de Internet por país Internet se extiende por el mundo con mucha rapidez y AL ha mejorado su acceso y participación en contenidos Notas El Castellano es la tercera lengua en Internet

24. Web 2.0 Objetivo Internet se extiende por el mundo con mucha rapidez y AL ha mejorado su acceso y participación en contenidos Número de páginas web por país Notas El Castellano es la tercera lengua en Internet

25. Web 2.0 Objetivo ¿Qué define la web 2.0? La web 2.0 es definida, principalmente, por su carácter social y participativo • 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 Notas Definida por ser un vehículo social Ver: http://es.wikipedia.org/wiki/Web_2.0

26. Intercreatividad Objetivo Actualmente una serie de profesionales trabajan juntos a través de la Web 2.0 ¿Qué es Intercreatividad? • 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. Notas Sin libertad de intercambio no hay Web 2.0 Ver: http://es.wikipedia.org/wiki/Wikipedia

27. Intercreatividad Objetivo Si compartir es la escencia de W2, ¿hasta dónde un producto es nuestro?,… Derechos de autor • 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 Notas Nuevas fórmulas se están ensayando Ver: http://creativecommons.org/

28. Intercreatividad Objetivo … ¿hasta dónde está permitido que hagamos uso de ciertos recursos? Derechosde autor Notas La gran industria del entretenimiento sufre su impacto

29. Intercreatividad Objetivo Redes socialespara compartir y crear juntos Si más personas usan la Web 2.0 ésta mejora sus prestaciones Redes socialeshttp://www.facebook.com http://www.43things.com http://myspace.com Notas Comunicarse, compartir e intercambiar sin intermediarios

30. Principales servicios Web 2.0 Objetivo Servicios para intercambio de contenidosademás de las redes sociales tenemos: Uno de los grandes impactos de la web 2.0 es la “desaparición” de los intermediarios de la información Blogshttp://wordpress.orghttp://www.vox.comhttp://www.blogger.comBlogginghttp://technorati.comhttp://www.bloginfluence.net http://bloglines.com Sistemas de gestión de contenidoshttp://www.joomla.orghttp://www.backpackit.comhttp://www.livestoryboard.comopensourcecms.comWikishttp://wikispaces.comhttp://www.mediawiki.orghttp://www.tiddlywiki.com Notas Muchos Blogs tienen más visitas que algunos diarios Ver: http://www.youtube.com/watch?v=NN2I1pWXjXI&feature=related

31. Principales servicios Web 2.0 Objetivo Más sobre contenidos El impacto de los Blogs se debe, en buena medida, gracias a que: fotos, videos y audios se encuentran en otros servicios Fotoshttp://www.flickr.comhttp://www.riya.com http://picasa.google.comVideoshttp://www.blinkx.comhttp://jumpcut.comhttp://www.youtube.com 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 Notas Todos los medios pueden estar en la red Ver: http://www.youtube.com/watch?v=muVUA-sKcc4&feature=related Idea central

32. Mapas 2.0 Algunos servicios http://maps.google.com/ http://maps.live.com/ http://espanol.maps.yahoo.com http://www.mapquest.com/ http://www.openlayers.org/ Objetivo Los mapas en la Web 2.0 son parte escencial de su desarrollo. La “Neo Geografía” se basa en su uso. Live Search Maps Notas El móvil será pieza clave en la elaboración de mapas

33. Mapas 2.0 Objetivo Google Maps Google Maps permite que varios usuarios trabajen sobre un mismo mapa (es el más difundido) Notas Los usuarios pueden acceder a diversos permisos

34. Competidores en 2.0 Objetivo Servicios que pueden reemplazarprogramas de PC La desaparición de los programas de escritorio ya no es una apuesta descabellada • 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 Notas Algunos programas Web 2.0 son mejores que los de escritorio

35. Apendice Contenidos Conocer los alcances y limitaciones de Ajax y Web 2.0 • Ajax Javascript es la base…

36. ¿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)

38. ¿Qué necesita? • JavaScript • DOM (DocumentObjectModel) • ObjectoXmlHttpRequest(jQuery) • Servidor (PHP, ASP, Perl, JSP, etc.) • OJO: Solicitudes Ajax SÓLO hacia la misma maquina en el mismo puerto

39. Ejemplos • Cargar paginas? • Almacenar información? • Carrito de la compra? • Añadir contacto? • Comprobación de URL? • Gmail (Google Mail) • Facebook

40. Con jQuery $.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(); } });

41. Con jQuery • 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”);

42. Ejercicio • Navegación por mi web • Carga dinámica de paginas • Menú: Home, Mis aficiones, Curriculum

43. Servicios Web (Web services) • 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, …)

44. Ejemplos de WS Meteorología de una ciudad Cita de la semana Cambio de pesetas a euros Traductor Noticias destacadas (no RSS) Imágenes Flickr

45. 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/

46. 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.

47. Ejercicio • 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???

48. CSS y jQuery Santiago González Tortosa <sgonzalez@fi.upm.es>