Tecnologies web

1. Tecnologies web gener 2011

2. Índex • Tecnologies de client: del HTML a AJAX. • Conceptes bàsics d'aplicacions web. • Les arquitectures basades en Java • El mon dels frameworks: Spring, Struts, Hibernate... • Programar pensant en la seguretat • Escalabilitat • Casos pràctics: • Accessibilitat al web de la FIB • Single Sign On a la FIB • Passat, present i futur del Racó

3. Les tecnologies del clientDel HTML a AJAX

4. De què parlarem? • HTML • CSS • DOM • Javascript • AJAX • JQuery • Usabilitat i Accessibilitat

5. HTML • El HTML és el que conté la informació de la pàgina. • Es el que veiem fent “viewsource” del navegador • Basada en tags “semantics” • Titols, paragraf, llistes, taules, imatges, seccions, formularis... • Varies versions de HTML • Es declaren al principi de la pàgina • XHTML, HTML • Nova versió HTML 5 • Video i audio (sense Flash!) • Canvas (per dibuixar) • Nous tags d’estructura • ...

6. CSS • Els fulls d’estil CSS conten la forma en que es visualitzen • Defineixen atributs de visualització de: • Un determinat tag HTML • Un tag marcat amb un atribut “class” • Un tag marcat amb un atribut “id” • Combinacions d’aixo (selectors) <h1>Aixo es un titol</h1> <span class=”titol”>Aixo es un titol</span> <span id=”menu1”>Primer menu</span> • Separar la presentació del contingut, faciliten la coherència

7. Tipus de propietats que hi ha a CSS • Podem jugar amb • Marges • Mides • Posicions en pantalla • Tipus de lletra • Imatges i colors de fons • Visualització o no d’un element • Aplicar uns estils a pantalla i uns altres a l’imprimir • Fer que un menu es vegi en pantalla i no a l’imprimir • Exemple: web de la FIB • Aplicar estils diferents per dispositius mòbils

8. El mon ideal: HTML valid + CSS • Idealment, tots els webs haurien de tenir HTML vàlid • El CSS hauria de proporcionar tota la presentació • Exemple de fins on podem arribar: http://www.csszengarden.com • Realment el que normalment tenim es... • HTML que es veu be, però que no es 100% vàlid • Format incorporat dintre del HTML (taules) • Webs totalment correctes que es veuen malament en algun navegador per diferències en implementació

9. Treballant amb CSS • Web developer extension • Validadors de HTML • Edició de CSS “on the fly” • Firebug • Inspecció d’elements i els seus estils • CSS “cheat sheet” • http://www.addedbytes.com/cheat-sheets/css-cheat-sheet/ • Treballar amb CSS es dur. S'ha de provar amb tots els navegadors i tot i així d'han de recorrer a "hacks" per que les coses quedin com volem • Busqueu a google: hi ha receptes

10. L’estructura de la pàgina i el DOM • Document Object Model: model d'objectes de la pàgina que exposa el navegador als llenguatges de script. • API que ens permet accedir al que esta mostrant el navegador o manipular el seu comportament • DOM = Javascript? NO. • Javascript ens permet accedir a la pàgina mostrada i al navegador utilitzant el DOM • Accedint al DOM podem veure i manipular les propietats definides a través de CSS • Podem accedir a elements qualsevol de la pàgina si els identifiquem amb un ID únic al HTML

11. Example: àrea desplegable <script> function desplegar(id) { valor=document.getElementById(id).style.display; if (valor!="block") {valor="block";} else {valor="none";} document.getElementById(id).style.display=valor; } </script> <style> .desplegable {display:none} </style> ... <div><a href=”javascript:desplegar('op1')">Desplegar</a></div> <div class="desplegable" id="op1"> Aquest text apareixerà i desapareixerà</div>

12. Un exemple avançat: tiddlywiki • Creació de nous nodes a l’arbre HTML • Efectes de visualització • Programació avançada en Javascript • Accés a objectes interns del navegador per guardar • I a sobre... pot ser útil! http://www.tiddlywiki.org

13. Javascript avançat • Amb la manipulació del DOM, Javascript demostra que serveix per mes que validar formularis • Necessitem capacitats més avançades per fer que poguem realment “programar aplicacions” en Javascript. • Crear ojectes i classes • Passar com a paràmetres estructures complexes • Crear “callbacks” en resposta a events • Facilitar la comunicació directa amb el servidor (AJAX) • Accedir facilment al DOM • Algunes d’aquestes capacitats depenen del navegador i es fa necessari una llibreria que ens abstregui

14. JSON (Javascript Object Notation) • Notació per dades estructurades (arrays i arrays associatius) { aula:’Tecnologies web’, professors:[ {nom:’Jaume’,cognom:’Moral’}, {nom:’Daniel’,cognom:’Golobart’} ] } • Permet “simular” passar paràmetres a una funció per nom o pasar estructures complexes • Molt utilitzat en llibreries, per simplificar les API. • Similar a XML, pero més llegible per les persones

15. La revolució AJAX • AJAX=Asynchronous JavaScript+XML • http://www.adaptivepath.com/ideas/essays/archives/000385.php • Treballar des del navegador comunicant-se amb el servidor pero sense necessitat de recarregar les pàgines • Ús extensiu de l’objecte XMLHttpRequest • Permet fer peticions HTTP des de Javascript • Executa codi JavaScript en resposta a la crida • Manipulem el DOM de la pàgina • Problemes: • depenem molt del navegador • dificultat de desenvolupament

16. Flux d’execució de AJAX • Tenim un objecte AJAX • Creem una instancia i li diem: • URL a la que connecta • Funció de callback • Cridarem aquest objecte en resposta a un event • En rebre la resposta, executem el callback (assincronament) • El callback rep la resposta en XML, HTML, JSON... • Actualitzem la pàgina

17. Què no és AJAX? • AJAX és un nom que ha funcionat tan bé que s’aplica a coses que no tenen res a veure. • AJAX no es només Javascript • Si no hi ha interacció amb el servidor, no es AJAX • AJAX no es només XMLHTTPRequest • Es poden simular recàrregues amb un frame ocult. • Idea de JSONP, que veurem tot seguit • AJAX no es només XML • Hi ha altres formats per intercanviar informació • Parlem amb propietat, que per algo som enginyers!

18. Restriccions de AJAX i JSONP • No podem fer una petició AJAX a un servidor diferent que el que ens ha proporcionat la pàgina • Forma de saltar-se aquesta restricció: JSONP • Carrega un fitxer JS d’una màquina remota que acaba fent una crida a una funció Javascript de la nostra pàgina. • El nom ve de que es una estructura JSON amb un afegit (padding), que seria la crida a la funció • Ideal per fer API de serveis i incrustar-los a les nostres pàgines amb Javascript. • Exemple: API de twitter

19. Conclusions AJAX • AJAX es útil per: • Tenir interfícies més dinàmiques • Pantalles en la que les recàrregues molesten • Aconseguir efectes propis d’aplicacions d’escriptori (autocompletar, arrossegar...) • Però en canvi no es correcte per • Llistats: url que hem de poder passar a la gent • Quan el botó de tornar enrere té sentit • En resum: quan NO estem programant una aplicació • Exemple pràctic: www.atrapalo.com • Triar aeroport de destí i origen -> OK • Llistats de viatges -> Malament, molt poc pràctic!

20. JQuery • Idea: afegir “comportament” als elements de la pàgina de la mateixa forma que s’afegeixen propietats de visualització amb CSS • Es un javascript “no intrusiu”, que no es posa dintre del HTML • Exemple: fem que els links amb class “menu” quans els clickem s’amaguin $("a.menu").click(function(event) { event.preventDefault(); $(this).hide("slow"); } );

21. Més sobre JQuery • Events • $(selector).click(funcio_a_executar) • $(selector).mouseover(funcio_a_executar) • Animacions • $(selector).fadeIn(“slow”) • $(selector).animate({width:20,height:200}, "slow") • CSS • $(selector).addClass(“coses”) • $(selector).css ({width:200}) • Manipulació del DOM • $(selector).append(“<p>Afegim HTML!</p>”)

22. AJAX amb JQuery • Crida AJAX $.ajax({ url: 'document.xml', type: 'GET', dataType: 'xml', timeout: 1000, error: function(){ alert('Error loading XML document'); }, success: function(xml){ // do something with xml } }); • Carregar HTML via AJAX $(selector).load(“document.html”)

23. Extensions de JQuery • Plugins (http://plugins.jquery.com/) • Son extensions diverses basades en la llibreria • Exemple: tablesorter, que converteix una taula “normal” amb una taula que es pot ordenar picant sobre els titols $(".ordenable").tablesorter(); • UI (http://ui.jquery.com/) • Són únicament elements d’interficie d’usuari • Necessiten una part en javascript i una de CSS+imatges • Exemple: tabs, per crear pestanyes $(“.pestanyes").tabs();

24. Altres llibreries útils • Yahoo User Interface library (YUI) • http://developer.yahoo.com/yui/ • Molt ben documentada • Pensada per tenir controls gràfics • Google Web Toolkit (GWT) • http://code.google.com/webtoolkit/ • Orientada únicament a AJAX • Es una llibreria Java que genera el Javascript • Parteix de la base que no hem de programar Javascript • Prototype • Similar a Jquery (es considera l’antecessora)

25. Usabilitat i Accessibilitat • Usabilitat • La usabilitat busca que un web sigui fàcil de fer servir. • Per assegurar usabilitat el que fem es pensar en l’usuari, preguntar-li i fer tests per veure com es comporta. • Accessibilitat • És fer que tothom pugui fer servir el nostre web, incloent persones amb discapacitats (visuals, auditives i d’altres) • Equilibri • Millores que podem fer en quan a usabilitat poden comportar problemes d’accessibilitat

26. Cas pràctic: Info Accessibilitat UPC • Projecte amb l’empresa Technosite • Experts en accessibilitat • Colaboració amb la fundació ONCE • Auditories a diferents webs de la UPC • Web institucional • Ateneas • Auditen la versió 2.0 de les WAI

27. WAI 2.0 • Les pautes insisteixen en aquests temes • Alternatives textuals • Alternatives per continguts temporals • Adaptabilitat del contigut (a diferents dispositius) • Que es pugui distingir el text del fons • Que tot es pugui fer desde teclat • Donar suficient temps • Evitar continguts que puguin provocar atacs epilèptics • Fer continguts amb navegació • Fer els textos llegibles i entenibles • Predictibilitat. Que les coses funcionin com s’esperen • Ajuda als errors • Compatibilitat

28. Què ens han trobat? • Els formularis han d’estar correctament marcats • Label per descriure els camps • Fieldsets per agrupar • Els botons han de ser botons • Si es vol posar disseny ha de ser amb CSS • S’han de fer servir colors amb suficient contrast • Les taules només s’han de fer servir per taules • S’ha d’especificar l’idioma de les pàgines • Els links han d’explicar on van. No posar mai “aqui” o “més informació” • A l’obtenir una llista de links, no tenim informació

29. Què hem après? • Una persona que no hi veu es basa molt en agrupacions lògiques de contingut • Llistes de continguts relacionats • Jerarquia de títols • El javascript no està prohibit, tot i que ho pot semblar • El flash també pot ser accessible • Un web s’ha de poder “entendre” sense CSS i sense imatges • Les imatges han de tenir descripció quan cal • Si té un text al costat o es decorativa, no cal • Es MOLT difícil fer canvis quan no s’ha tingut en compte des d’un principi

30. Conclusions • Una pàgina web no es una pàgina immutable i estàtica • La seva extructura s'exposa via DOM • Es pot manipular i canviar la visualització • Pot respondre a events Javascript • Pot demanar informació a un servidor via AJAX • Pero… • Hem de tenir en compte diferències entre navegadors • Hem de recorrer a llibreries per facilitar la programació com per exemple Jquery • No hem d’oblidar l’usabilitat i accessibilitat

31. Conceptes bàsics d'aplicacions web.

32. De què parlarem? • La interacció bàsica amb aplicacions web • Pas de paràmetres • Sessions • Cookies • Autenticació i Autoritzacio d’usuaris • Connexions a BD

33. Interacció bàsica • Com pot comunicar-se una pàgina web amb el servidor? Utilitzant el protocol HTTP • Seguint un link • Demana al servidor una certa URL, que pot ser una pàgina generada pel servidor i el navegador la carrega. • Enviant un formulari • Li enviem les dades que acabem d'omplir • Amb una petició tipus AJAX • El navegador fa una petició "en background" i sense recarregar la pàgina

34. Pas de paràmetres • GET • S'afegeixen els paràmetres a la URL • POST • S'envien com una segona part de la petició • Aquesta informació es posa al formulari que envia els paràmetres. • Els parametres son strings. Qualsevol tipus complex requereix un tractament dels que s'encarrega la plataforma escollida

35. Sessions • Cada petició HTTP és independent de les altres. Problema quan volem desenvolupar aplicacions. • El protocol no proporciona cap mètode per saber des del servidor quines peticions ens arriben del mateix client, no incorpora el concepte de sessió. • Tècniques per aconseguir tenir estat: • Cookies amb un identificador de sessió • Paràmetre ID_SESSIO

36. Mites sobre la falta d’estat “Jo treballo amb IIS i el servidor ja suporta sessions, sense necessitar cookies” “Per què hem de passar un identificador de sessió? Encara que desactivem les cookies el PHP ja té una variable amb la sessió.” • Si volem sessions, el navegador sempre ha d’enviar alguna dada en les seves peticions per identificar-se. El servidor no fa miracles

37. Cookies • Un servidor ens pot enviar una cookie quan demanem qualsevol fitxer, afegint una capçalera de l’estil... Set-Cookie: foo=bar; path=/; expires Mon, 23-Jan-2009 • Quan fem una altra petició al mateix servidor, enviem aquesta informació en una capçalera extra Cookie: foo=bar Les cookies no les demana el servidor: les envia automàticament el navegador com si fos un paràmetre

38. Cookies de sessio • Les cookies que no tenen data de caducitat duren fins que es tanca el navegador. Son cookies de sessió • Les plataformes de desenvolupament web més conegudes (JSP, ASP, PHP…) utilitzen cookies per mantenir la sessió • La primera vegada que ens connectem al web, ens donen un identificador aleatori, que anirem enviant mentre no tanquem el navegador • El servidor es guardarà valors associats a aquest identificador (una mena de taula de hash)

39. Eines per treballar amb cookies • Si estem desenvolupant una aplicació web i les coses no acaben de funcionar, pot ser interessant veure que esta passan amb les cookies • Livehttpheaders • Permet veure les capçaleres HTTP que s'estan passant entre el client i el servidor. Entre elles, les cookies • Add'n'edit cookie • Permet manipular les cookies que tenim i canviar el valor

40. Paràmetre ID_SESSIO • És un substitut de les cookies, amb exactament la mateixa idea de la cookie de sessió, però passat explícitament com un paràmetre o una part de la URL • És més difícil d'implementar, perquè les nostres aplicacions l'han de passar explícitament a qualsevol petició que es faci al servidor, reescrivint les URL a les pàgines. • Podem perdre la sessió si fem una petició al servidor sense l’identificador (per exemple, una pàgina estàtica) • No es guarda cap informació: el id_sessió només serà vàlid fins que tanquem el navegador

41. Quan acaben les sessions? • En sistemes orientats a connexió, la sessió acaba quan tallem la connexió. En web no existeix aixo • 3 possibilitats • Tanquem el navegador. S’esborra la cookie pero no la informació que teníem al servidor • Caduca. Els servidors es configuren perque la informació de la sessió caduqui passats uns minuts d’inactivitat • Invalidem la sessio. Anem a una pàgina que esborra la informació de la sessió • Una sessió no invalidada ni caducada és perfectament vàlida al servidor. Si tenim el seu identificador, la podem “robar”

42. Autenticació i Autorització • Autenticació és el que ens permet saber quin usuari ha entrat a la nostra aplicació • Habitualment, es fa amb usuari i password • Dos grans formes: protocol HTTP i formulari + cookies • És millor que sigui un sistema extern a l’aplicació, que no es bona idea desenvolupar una i una altra vegada • Autorització és el fet de donar certs permisos o no a un usuari en un cop ja sabem qui és • Moltes vegades se n’encarrega la propia aplicació • Es pot muntar en base a rols • Idealment, haurien de ser declaratives, no per programa • JSP permet fer-ho al fitxer web.xml

43. Accés a bases de dades • Generar pàgines dinàmiques normalment implica treballar amb alguna bases de dades • En una aplicació no web, podem connectar una vegada al principi de l'aplicació i desconnectar al final. • En una aplicació web, no tenim clar quan ens desconnectem, així que no podem mantenir una connexió oberta "per sempre" • Obrir i tancar connexions continuament cada vegada que hem d'accedir a la BD té un cost

44. Pools de connexions • Solució: treballar amb connexions compartides • El servidor té oberta una connexió i nosaltres la “demanem”, la utilitzem i la “tornem” • Normalment, no n’hi ha una, sino que tenim vàries connexions obertes: pool de connexions • Normalment es configuren uns paràmetres • Número mínim de connexions obertes • Número màxim (per no saturar la màquina) • Temps màxim d’utilització • Si la nostra aplicació no torna les connexions, podem tenir problemes i es pot penjar el sistema!

45. Conclusions • Programem amb el que programem, hem de tenir molt clars una sèrie de conceptes • Els diferents tipus de pas de paràmetres • Els problemes que ens poden portar les sessions • El fet de no tenir estat i els problemes que implica • Els temes d’autorització i autorització d’usuaris • Els problemes que poden representar els accessos a les bases de dades • La plataforma que escollim per programar probablement ja ens aillarà d'aquests conceptes, però és bo saber-los.

46. Les arquitectures d’aplicacions webbasades en Java

47. De què parlarem • Java com a llenguatge per fer aplicacions web • Servlets • JSP • El concepte d'aplicació web • L'especificació JEE

48. La historia de Java • Java va sorgir fa ja més de 15 anys • Primera utilitat: petits programes que s'executen al navegador (amb el plugin de Java): els Applets • A la època, la única forma d'afegir més interactivitat • Complexitat per tenir el plugin correcte • Actualment quasi no s'utilitzen (millor Flash o similars) • Segon intent: Java per aplicacions d'escriptori • No gaire èxit. Aplicacions massa pesades • Tercer intent: Java al servidor • Al no tenir interfície d'usuari, funciona millor • Aplicacions web

49. Especificació de Servlets • Són una sèrie de tecnologies per fer aplicacions web desde Java • Compren diversos elements • Servlets pròpiament • JSP • Taglibs • Expression language • Concepte d’aplicació web (WAR) • El servidor més conegut que suporta treballar amb servlets és Tomcat • Veurem una a una totes aquestes tecnologies

50. Servlets • Són unes classes java que permeten generar pàgines web quan s’executen en un servidor • Tenim accés a la petició, la resposta, la sessió i a paràmetres d’aplicació • Anem escrivint la pàgina des del programa, generant el codi HTML per programa. (Sí, es molt lleig!) • Com funciona? • El servidor executa el mètode doGet() o doPost() del servlet, que reben com a parametres la resposta i la petició • Obtenim els paràmetres de la petició i construim el HTML utilitzant l’objecte resposta