Download
1 / 130
1.3k likes | 1.45k Views
Tecnologies web. gener 2009. Índex. Tecnologies de client: del HTML a AJAX. Conceptes bàsics d'aplicacions web. Les arquitectures basades en Java (de JSP a JEE) El mon dels frameworks: Spring, Struts, Hibernate... Programar pensant en la seguretat Casos pràctics:
E N D
Tecnologies web gener 2009
Índex • Tecnologies de client: del HTML a AJAX. • Conceptes bàsics d'aplicacions web. • Les arquitectures basades en Java (de JSP a JEE) • El mon dels frameworks: Spring, Struts, Hibernate... • Programar pensant en la seguretat • Casos pràctics: • Usabilitat a la plataforma eCatalunya • Single Sign On en aplicacions web a la FIB • 10 anys i un rentat de cara del Racó
De què parlarem? • CSS • DOM • Javascript • AJAX • Altres tecnologies per aplicacions riques
Els estàndards W3C • És un organisme que es dedica a promoure els estàndards al web, dissenyant especificacions i eines • Tenen una oficina a Espanya: http://www.w3c.es/ • No només HTML, sino molts altres temes relacionats amb el web: • Accés universal (iniciativa WAI) • Web semàntica (RDF) • Multimedia (SVG, SMIL) • Web services (SOAP,WSDL) • ... • http://www.w3c.es/divulgacion/guiasbreves/
CSS • Fulls d'estil, que es poden tenir un un fitxer a part del HTML o entre els tags <style></style> • Defineixen atributs de visualització de: • Els tags HTML normals i corrents • Classes que podem associar a una part del text • Elements amb un identificador únic <span class=”titol”>Aixo es un titol</span> <span id=”menu1”>Primer menu</span> • Separar la presentació del contingut, faciliten la coherència
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
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ó
Un exemple de problemes de CSS <style> .postit { width: 200px; /* amplada de 200 px */padding: 25px; /* deixem un marge de 25 px */background: yellow; } </style> <div class="postit"> <p>Aixo amb explorer medeix 200 pixels i amb Mozilla, 250.</p> <p>El "padding" s'afegeix de formes diferents.</p> </div>
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
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
El DOM ha existit des de sempre... <script> function comprova() { if (document.forms[0].elements[0].value=="") { alert("Escriu un titol!"); } return false; // evita que enviem les dades } </script> ... <form name="pelicula" onSubmit="comprova()"> <input type="text" type="titol" > <input type="submit" value="OK"> </form>
Javascript + DOM • Obrim la porta a manipular la pàgina un cop carregada • Funcions per accedir i manipular l’arbre, normalment a partir del seu ID o un punter. • node=getElementById(“x”) • node.appendChildren(node2) • node.parentElement • Podem mostrar, amagar, moure elements de la pàgina i crear interfaces molt mes agradables i usables. • Hem d’estar preparats per patir diferències entre navegadors • Hi ha llibreries que ens permeten abstrure'ns
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>
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
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 • Ajuda: Plugin LiveHttpHeaders de Firefox
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
Exemples d’Ajax • GMail • només demana la pàgina sencera al principi • Demana via xmlhttprequest fragments de Javascript • Via DOM, modifica la pàgina amb la informacio del JavaScript • Pàgina personalitzada de Google • eyeOS • “sistema operatiu” al navegador • Un dels creadors era fiber • Flickr, ta-da list, Basecamp, Google Maps... • Molts webs l’utilitzen per petites coses • Filmaffinity (al votar), per fer-ho més simple
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. • http://developer.apple.com/internet/webcontent/iframe.html • AJAX no es només XML • Hi ha altres formats per intercanviar informació • Parlem amb propietat, que per algo som enginyers!
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!
Javascript avançat • Amb la manipulació del DOM i AJAX, 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 l’us de AJAX • Accedir facilment al DOM • Algunes d’aquestes capacitats depenen del navegador i es fa necessari una llibreria que ens abstregui
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
La llibreria Prototype • Molt ben dissenyada i base d’altres llibreries • Funció equivalent a document.getElementById() $(‘element’) • Gestió d’incompatibilitats. executa fins que funcioni algo: Try.these { funcio1(), funcio2() } • Registrar handlers pels events. Event.observe(‘element_id’,’click’,callback,false);
Llibreria Prototype (2) • Objecte AJAX var myAjax = new Ajax.Updater( 'element_a_actualitzar', 'http://servidor/url', {method: 'get', parameters:'p=nosque' } ); • Ajuda en la sintaxi per declarar classes MevaClasse = Class.create(); MevaClasse.prototype = { initialize : function(el) { this.el = el; }, ... } m=new MevaClasse(el);
Llibreria script.aculo.us • Llibreria construida sobre Prototype • Efectes i animacions (no AJAX) de forma molt senzilla • Drag & drop • Per AJAX • Autocompletar • Edició “in place” com el tiddlywiki • Lligar el drag and drop • Molt senzilla d’utilitzar: Effect.BlindDown('id_of_element', {duration:3}); Ajax.InPlaceEditor('editme', '/demoajaxreturn.php');
Altres llibreries útils • Yahoo User Interface library (YUI) • http://developer.yahoo.com/yui/ • Similar a script.aculo.us • Molt ben documentada • 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 • JQuery • http://jquery.com/ • Idea totalment diferent. Està molt de moda
JQuery • Idea: afegir “comportament” als elements de la pàgina de la mateixa forma que s’afegeixen propietats de visualització amb CSS • El Javascript no queda barrejat • Fem que els links amb class “menu” quans els clickem s’amaguin $("a.menu").click(function(event) { event.preventDefault(); $(this).hide("slow"); } ); • Es un javascript “no intrusiu”, que no es posa dintre del HTML
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();
i el Flash? Millor FLEX • Supera a HTML + Javascript amb temes relacionats amb gràfics vectorials, pero no en temes d'interfaces d'usuari • Encara que es pugui generar d'altres formes, el normal es fer-ho a partir del Flash Editor. Incomode (per programadors) • La solució: FLEX 3 • Framework basat en Flash per aplicacions "riques" • Llenguatge per generar interfícies MXML(similar a HTML) + ActionScript (similar a Javascript)… sense problemes de navegador! • Permet accedir a dades remotes per HTTP • SDK gratuit, un compilador que genera fitxers .swf • Es pot integrar a Eclipse
Altres tecnologies per les RIA (Rich Internet Applications) • OpenLaszlo • Framework OpenSource que genera HTML+Javascript o Fitxers Flash (SWF) a partir del seu codi LZX • Silverlight • Es l'alternativa a Flex de Microsoft. • XAML per definir l'interface + programació en algun llenguatge de la família .NET • Adobe AIR • Permet crear aplicacions multiplataforma d'escriptori com si fossin aplicacions web. Poden estar basades en HTML+Javascript o en FLEX • Els que han caigut pel cami… • Java Applets • Controls ActiveX
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ó • Hi ha alternatives a la idea de HTML + Javascript que poden evitar aquesta complexitat.
De què parlarem? • La interacció bàsica amb aplicacions web • Pas de paràmetres • Sessions • Cookies • Autenticació i Autoritzacio d’usuaris • Connexions a BD
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
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
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 • Altres possibles tècniques • Adreça IP. No sempre funciona.
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
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
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)
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
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
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”
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 • PHP a la configuració del servidor Apache
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
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!
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.
De què parlarem • Java com a llenguatge per fer aplicacions web • Servlets • JSP • El concepte d'aplicació web • L'especificació JEE
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
