1 / 132

Tecnologies Web Seminaris d’empresa 2013

Tecnologies Web Seminaris d’empresa 2013. inLab FIB Jaume Moral. Índex. Tecnologies de client: del HTML a AJAX. Responsive design , web en el mòbil i accessibilitat Conceptes bàsics d'aplicacions web. Les arquitectures basades en Java

dacey
Download Presentation

Tecnologies Web Seminaris d’empresa 2013

An Image/Link below is provided (as is) to download presentation Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

E N D

Presentation Transcript

  1. Tecnologies Web Seminaris d’empresa 2013 inLab FIBJaume Moral

  2. Índex • Tecnologies de client: del HTML a AJAX. • Responsivedesign, web en el mòbil i accessibilitat • Conceptes bàsics d'aplicacions web. • Les arquitectures basades en Java • El mon dels frameworks: Spring, Struts, Hibernate... • Programar pensant en la seguretat • Casos pràctics: • L’entorn de desenvolupament Java + web a inLab FIB • Com hem muntat el web de inLab amb Drupal • El Racó i la API del Racó • Single Sign On a la FIB

  3. Les tecnologies del clientDel HTML a AJAX

  4. De què parlarem? • CSS • DOM • Javascript • HTML5 • AJAX • JQuery

  5. Les pàgines web: HTML + CSS • El HTML és el que conté la informació de la pàgina. • Els fulls d’estil CSS contenen la forma en que es visualitzen • 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 <spanclass=”titol”>Aixo es un titol</span> <spanid=”menu1”>Primer menu</span> • Separar la presentació del contingut, faciliten la coherència

  6. 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 • S’apliquen a certs elements de la pantalla amb uns filtres anomenats selectors • .navegacio li -> tots els li dintre de class=“navegacio” • #cap a:hover -> tots els links del id=“contingut” quan passem per sobre

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

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

  9. HTML 5 • http://www.html5rocks.com • HTML5 =~ HTML + CSS + Javascript • Nous tags HTML • CSS3 • Les API per accedir al DOM ja formen part de l’especificació • Pensat més per aplicacions i no simplement per pàgines • Com identificar una pàgina com HTML 5? • <!doctype HTML>

  10. Novetats més importants de HTML 5 • Emmagatzemament local • Clau valor • Base de dades (Indexed DB i SQL, ja deprecated) • Cache i suport per aplicacions off-line • Interfície d’usuari • Drag & drop • Nous camps per formularis: mail, numero, telefon... • Nous tags d’estructura • Multimedia • Tags audio, video, canvas, webgl • No hi ha acord amb els formats • API per Geolocalització, Websockets...

  11. On podem fer servir HTML5? • IE9, Chrome, Safari i Firefox 4+ (si no... Modernizr) • Mòbils • Camps de formularis adaptats • Geolocalització • Aplicacions off-line • Efectes i estil de mòbils: jQuery Mobile / PhoneGap • Substitut per Flash • Tag video • Canvas + Javascript o animacions CSS3 • Aplicacions per windows 8

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

  13. Funcions anònimes • function avisar(x) {alert(x) } • var avisar= function (x) {alert(x) } • document.getElement(“boto”).onclick=function(event) { alert(“hola”); }

  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. 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"); } );

  20. 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>”)

  21. 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”)

  22. 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://jqueryui.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();

  23. Conclusions • Una pàgina web no es una pàginaimmutable i estàtica • La sevaextructuras'exposavia DOM • Es pot manipular i canviar la visualització • Potrespondre a eventsJavascript • Potdemanarinformació a un servidor via AJAX • Tenimllibreriesfantàstiques que ensajuden: jQuery • Una pàgina web pot arribar a tenir un nivelld’interactivitat similar a una aplicaciód’escriptori

  24. Responsivedesign

  25. Què es responsivedesign? • Adaptar el contingutperque es vegi de la millor forma en qualsevoldispositiu. • No fer dos versions, sino una adaptable a la mida de la pantalla que tenim • Idea inicial: EthanMarcotte • http://www.alistapart.com/articles/responsive-web-design/

  26. Mateix web, diferentsnavegadors

  27. Layoutfixe • Treballem per una resolució concreta • Típica: 960px d’amplada (per pantalles de 1024px) • Podem “quadrar” el disseny al pixel • Quèpassa si la pantalla es mes gran? • Centremcontingut i omplim de blanc • Quèpassa si es méspetita? • Hem de ferscroll o es veure-horeduit • Hem de fer una segonaversió

  28. Layoutlíquid • No utilitza mides en pixels, sino en % • S’adapta a la mida de la pantalla • Un dissenypensat per una pantalla gran, adaptat a mòbil no hicap • Exemple: multiplescolumnes, imatgesgrans • Un dissenypensat per pantalla petita es incomode en pantalla gran • Columna moltestreta / massaampla

  29. Idea del responsivedesign • Consultem la resolució • Fem CSS adaptats a la resolució • Líquid, fixe o una barrejadepenent de la mida • Aixoenspermet • Canviar mides segons la resolució • Amagar elements • Recolocar elements • Volem una única versió del web!

  30. Media queries <link href="phone.css” rel="stylesheet" type="text/css" media=“screen and (max-width: 400px)" > @media screen and (max-width: 400px) { …. /* estils propis de pantalla petita */ } @importurl(phone.css) screen and (max-width: 400px)

  31. Control del viewport • iPhonesuposa que la pantalla fa 980px • Tot el que posem es veupetit • Si fem un CSS adaptat, volem evitar aquestcomportament • No volemfer zoom ni scroll <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">

  32. Problema: les imatges • Problema típicdelslayoutslíquids • El textflueix en linies, les imatges no • Imatgesmassapetites o que sobresurten • Solucions • Tallar les imatges (propietat de cssoverflow) • Imatges de fonsamb CSS, que podemcanviardepenent de la resolució • Reescalarambmax-width: 100%

  33. Consells • Començaramb una versió que es vegibé al mòbil • Base que es vegibé en mòbil • @media amb min-width • Provarambdiferents mides i navegadors • Intentar no partir de zero • Skeleton, Amazium…. • El que s’haconvertit en stardard: Bootstrap

  34. Una ajuda: bootstrap • Framework de CSS desenvolupat per twitter • Garantia de confiança • Permet que elsnostres webs tinguin una presentacióprofessionalsimplementafegintcertesclassesalsnostreselements • Permetpersonalització • Incorpora elements de responsivedesign • Podemtenir-los o no!

  35. Components Botons Menus Etiquetes Missatgesd’error Barra de progrés Formularis Taules …

  36. La graella • Permet colocar elselements de forma ordenada a la pàgina • Un bon disseny té una graella • Mireuqualsevoldiari • Bootstrap te una graella de 12 columnes • 960px (fixa) • Líquida • Reponsive (tant liquida comfixa)

  37. Conclusions sobre ResponsiveDesign Reponsivedesignésja una necessitat Bootstrapaconsegueixfer-hofàcil Bootstrappermet que un web tingui un dissenybastantacceptablesensenecessitar un dissenyador ni confiar en que elsinformàtics triaran unscolors que no facin mal alsulls

  38. Disseny per mòbils

  39. Altresaproximacions • Disseny per mòbils en HTML imitant una aplicació nativa. • Quanfer-ho servir? • Quèestemprogramant? • Una aplicació o un web? • Concepte de webapp • “Carcassa” nativa amb una vista web dintre… ambaspected’aplicació nativa

  40. Idees de jQuery Mobile • Atribut “data-role” alselements • Pàginesd’unaaplicació en un sol HTML • <div data-role=“page”></div> • Links entre pàginesambanchors • Elementstípics • <div data-role=“header”> (content o footer) • <ul data-role=“listview”> • <a href=“” data-transition=“slide”>

  41. Exemple de jQuery Mobile • Llistad’elements • Passem a una segonapàginaambtransició de desplaçament • Botó de tornar • Es veucom una pàgina normal i corrent si desactivemels CSS + JS

  42. Conclusions • jQuery Mobile permetdesenvoluparaplicacionsmòbilsambaspectenatiuutilitzantúnicamenttecnologies web • Últimquanrealment no necessitemcaptecnologiapròpia del mòbil • No serveix per ferAngryBirds • Sí serveix per fer una banca on line

  43. Accessibilitat

  44. Accessibilitat • És fer que tothom pugui fer servir el nostre web, incloent persones amb discapacitats (visuals, auditives i d’altres) • Projecteambl’empresaTechnosite • Experts en accessibilitat • Colaboracióamb la fundació ONCE • Auditories a diferents webs de la UPC • Web institucional • Ateneas • Versió 2.0 de les WAI

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

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

  47. Què hem après? • Una persona que no hi veuesbasamolt en agrupacionslògiques de contingut • Llistes de contingutsrelacionats • Jerarquia de títols • El javascript no està prohibit, tot ique ho pot semblar • El flash també pot ser accessible • Un web s’ha de poder “entendre” sense CSS i sense imatges • Les imatgeshan de tenirdescripcióquan cal • Si té un text al costat o esdecorativa, no cal • Es MOLT difícilfercanvisquan no s’hatingut en compte des d’un principi

  48. Conceptes bàsics d'aplicacions web.

  49. De què parlarem? • La interacció bàsica amb aplicacions web • Pas de paràmetres • Sessions • Cookies • Connexions a BD

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

More Related