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

Programación Web en ServidorCurso INEM 2010

CSS y jQueryCSS y jQuery

Santiago González Tortosa<[email protected]>


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…


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


Objetivo

Notas

Contenidos






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)


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


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


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


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


Objetivo

Notas

Contenidos


• JavaScript• CSS

• W3Schools• Estructura de un proyecto• jQuery• Web 2.0




Objetivo

Notas

Contenidos






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


Objetivo

Notas

• EJEMPLO DE PROYECTO


Objetivo

Notas

Contenidos






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


Objetivo

Notas

• Aplicaciones:– jQuery Plugins: http://plugins.jquery.com/

– jQuery UI: http://jqueryui.com/

– jQuery TOOLS: http://flowplayer.org/tools/

jQuery

Qué es jQuery


Objetivo

Notas

Contenidos





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


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


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


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)


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


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


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


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?


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


… ¿hasta dónde está permitido que hagamos uso de ciertos recursos?

La gran industria del entretenimiento sufre su impacto

Intercreatividad

Derechosde autor

Objetivo

Notas


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


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


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


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


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


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


Objetivo

Notas

Apendice Contenidos

• AjaxAjaxConocer los alcances y limitaciones de Ajax y Web 2.0



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)


Objetivo

Notas


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?


Objetivo

Notas

• Cargar paginas?• Almacenar información?• Carrito de la compra?• Añadir contacto?• Comprobación de URL?

• Gmail (Google Mail)• Facebook

Ejemplos


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


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


Objetivo

Notas

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

Ejercicio


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)


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


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/


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.


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


CSS y jQueryCSS y jQuery

Santiago González Tortosa<[email protected]>

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

Documents

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