Programación Web en Servidor Curso INEM 2010 CSS y jQuery Santiago González Tortosa.

Presentación del tema: "Programación Web en Servidor Curso INEM 2010 CSS y jQuery Santiago González Tortosa."— Transcripción de la presentación:

1 Programación Web en Servidor Curso INEM 2010 CSS y jQuery Santiago González Tortosa

2 Programación Web en Servidor Curso 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…

3 Programación Web en Servidor Curso 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…

4 Programación Web en Servidor Curso 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

5 Programación Web en Servidor Curso 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…

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

7 Programación Web en Servidor Curso INEM 2010 Repaso JavaScript OperatorDescriptionExampleResult +Additionx=y+2x=7 -Subtractionx=y-2x=3 *Multiplicationx=y*2x=10 /Divisionx=y/2x=2.5 %Modulus (division remainder) x=y%2x=1 ++Incrementx=++yx=6 --Decrementx=--yx=4

8 Programación Web en Servidor Curso INEM 2010 Objetivo Notas Repaso JavaScript OperatorDescriptionExample ==is equal tox==8 is false ===is exactly equal tox===5 is true x==="5" is false !=is not equalx!=8 is true >is greater thanx>8 is false <is less thanx<8 is true >=is greater than or equal tox>=8 is false <=is less than or equal tox<=8 is true Los operadores de comparación son importantes

9 Programación Web en Servidor Curso 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

10 Programación Web en Servidor Curso 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

11 Programación Web en Servidor Curso 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…

12 Programación Web en Servidor Curso 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…

13 Programación Web en Servidor Curso 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

14 Programación Web en Servidor Curso INEM 2010 Objetivo Notas EJEMPLO DE PROYECTO

15 Programación Web en Servidor Curso 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…

16 Programación Web en Servidor Curso INEM 2010 Objetivo Notas http://jquery.com Librería de JS –Write less, do more.… 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

17 Programación Web en Servidor Curso 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

18 Programación Web en Servidor Curso 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…

19 Programación Web en Servidor Curso INEM 2010 Web 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

20 Programación Web en Servidor Curso 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

21 Programación Web en Servidor Curso 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

22 Programación Web en Servidor Curso 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)

23 Programación Web en Servidor Curso 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

24 Programación Web en Servidor Curso 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

25 Programación Web en Servidor Curso 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

26 Programación Web en Servidor Curso 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é es Intercreatividad?

27 Programación Web en Servidor Curso 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

28 Programación Web en Servidor Curso INEM 2010 … ¿hasta dónde está permitido que hagamos uso de ciertos recursos? La gran industria del entretenimiento sufre su impacto Intercreatividad Derechos de autor Objetivo Notas

29 Programación Web en Servidor Curso INEM 2010 Si más personas usan la Web 2.0 ésta mejora sus prestaciones Comunicarse, compartir e intercambiar sin intermediarios Intercreatividad Redes sociales para compartir y crear juntos Redes sociales http://www.facebook.com http://www.43things.com http://myspace.com Objetivo Notas

30 Programación Web en Servidor Curso 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 contenidos además de las redes sociales tenemos: Blogs http://wordpress.org http://www.vox.com http://www.blogger.com Blogging http://technorati.com http://www.bloginfluence.net http://bloglines.com Sistemas de gestión de contenidos http://www.joomla.org http://www.backpackit.com http://www.livestoryboard.comopensourcecms.com Wikis http://wikispaces.com http://www.mediawiki.org http://www.tiddlywiki.com Ver: http://www.youtube.com/watch?v=NN2I1pWXjXI&feature=related Objetivo Notas

31 Programación Web en Servidor Curso 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 virtuales http://docs.google.com http://www.ajaxwrite.com http://thinkfree.com http://www.zohosheet.com http://product.thinkfree.com/desktop/calc http://www.slide.com http://empressr.com http://slideshare.net Fotos http://www.flickr.com http://www.riya.com http://picasa.google.com Videos http://www.blinkx.com http://jumpcut.com http://www.youtube.com Ver: http://www.youtube.com/watch?v=muVUA-sKcc4&feature=related Idea central Objetivo Notas

32 Programación Web en Servidor Curso 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 servicios http://maps.google.com/ http://maps.live.com/ http://espanol.maps.yahoo.com http://www.mapquest.com/ http://www.openlayers.org/ Live Search Maps Objetivo Notas

33 Programación Web en Servidor Curso 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 Maps Objetivo Notas

34 Programación Web en Servidor Curso 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 reemplazar programas 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

35 Programación Web en Servidor Curso INEM 2010 Objetivo Notas Apendice Contenidos AjaxAjax Conocer los alcances y limitaciones de Ajax y Web 2.0 Javascript es la base…

36 Programación Web en Servidor Curso 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)

37 Programación Web en Servidor Curso INEM 2010 Objetivo Notas

38 Programación Web en Servidor Curso 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 misma maquina en el mismo puerto ¿Qué necesita?

39 Programación Web en Servidor Curso 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

40 Programación Web en Servidor Curso 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

41 Programación Web en Servidor Curso 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?o p=goGoogle); Con jQuery

42 Programación Web en Servidor Curso INEM 2010 Objetivo Notas Navegación por mi web –Carga dinámica de paginas –Menú: Home, Mis aficiones, Curriculum Ejercicio

43 Programación Web en Servidor Curso 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)

44 Programación Web en Servidor Curso 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

45 Programación Web en Servidor Curso 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/

46 Programación Web en Servidor Curso INEM 2010 Objetivo Notas Ejercicio Obtener fotos de flickr –WS: http://www.flickr.com/service s/feeds/photos_public.gne?tag s=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 Programación Web en Servidor Curso 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

48 Programación Web en Servidor Curso INEM 2010 CSS y jQuery Santiago González Tortosa