PostIt . P ràctica de Tecnologia Multimèdia. 2012-13.

1. PostIt.Pràctica de Tecnologia Multimèdia. 2012-13. Per Mateu Llull Bennassar i Joan Miquel Perelló Puig

2. Índex • Què és PostIt • Com ho havíem pensat fer • Com ho hem fet • Desenvolupament de PostIt • Esborrany inicial • Peticions AJAX sobre PHP • Punts Interessants de la pàgina • Problemes soferts • Tecnologies utilitzades • Fitxers generats • Conclusions i millores • Petita introducció a jQuery

3. Què és PostIt • La nostra idea de pràctica va ser la de dissenyar un blog per a poder anar penjant notícies i que els demés poguessin estar informats. • Varem triar aquest projecte ja que varem trobar interessant el poder generar informació sobre el fitxer XML a través de PHP, entre altres coses.

4. Com ho havíem pensat fer • Inicialment havíem pensat en dissenyar dos fitxers XML: Comentaris.xml Articles.xml <articles> <post> <id></id> <titol></titol> <autor> <nom></nom> <id></id> </autor> <data></data> <text></text> </post> </articles> <comentaris> <comment> <autor> <id></id> <nom></nom> </autor> <data></data> <id_post></id_post> <text></text> </comment> </comentaris>

5. Com ho hem fet • Per començar, ho hem posat tot a un fitxer, i després, l’estructura de les taules ha canviat considerablement: Index.xml <articles> <post categoria=""> <id></id> <titol></titol> <autor> <nom></nom> <id></id> </autor> <data></data> <imatge></imatge> <text></text> </post> </articles> </root> <root> <usuaris> <usuari id=""> <nom></nom> <mail></mail> <contrasenya></contrasenya> </usuari> </usuaris>

6. Desenvolupament de PostIt • Les passes que hem seguit han estat les següents: • Esborrany inicial. Bootstrap sobre XSL. • Disseny bàsic de CSS3 sobre la pàgina. • Peticions AJAX sobre pàgines PHP amb jQuery. • Acabats visuals.

7. Esborrany Inicial • El nostre primer esborrany de PostIt amb bootstrap sobre xsl va ser aquest:

8. Peticions AJAX sobre PHP • Una única pàgina a carregar, l’index.php (a través d’AJAX). • PHP empra tant XSLT com l’extensió SimpleXML

9. Punts interessants de la pàgina • Permet no sols llegir dades des del fitxer XML, sinó que també permet escriure dades i modificar-les o eliminar nodes. • Incorpora sistema de sessió per a login d’usuaris (control de l'àrea d’accés a administració). • Tota la interacció de la pàgina es realitza sobre AJAX, reduint així el tràfic de dades entre el navegador i el servidor web.

10. Problemes soferts durant el procés de desenvolupament • Representació de bots de línia als articles publicats. Ho hem hagut d’arreglar recodificantl’HTML resultant (a l’index.php o als fitxers que retornaven articles) i a dins el fitxer XML subsituir els bots de línia per sentències <br/> amb els caràcters especials recodificats (quedant així: &lt;br&gt;) • El criteri d’ordenació de la instrucció xsl:sort és, per defecte, text, i nosaltres teníem els id dels posts com a numèric. El que feia que, ordenant com a text, els posts s’ordenassin així: 1,10,11,2,3,4,5,.... Ho varem arreglar afegint l’atribut data-type=“number”a la instrucció.

11. Tecnologies utilitzades • HTML5: Per a l’estructura de la pàgina. • XSLT: Per tractar les dades del fitxer XML. • Bootstrap: Per a la maquetació de la pàgina, juntament amb CSS3. • SVG: Per dissenyar el logotip de la pàgina. • jQuery: Per a tota la interacció amb JS i per a la part d’AJAX i de maneig de DOM. • Llibrería MD5.js: Per al xifratge de contrasenyes d’usuari (per a que desde el navegador ja viatgin xifrades). • PHP + SimpleXML: Per a realitzar petites consultes sobre XML i per a afegir,editar i eliminar continguts del fitxer XML.

12. Fitxers generats • Degut a la interacció AJAX, hem hagut de generar un fitxer PHP per a cada tasca de transferència, amb la qual cosa la carpeta de la pàgina conté molts de fitxers. Una possible solució hagués estat la incorporació d’un router PHP. El qual ens hagués permès gestionar les peticions a URL amb un únic fitxer PHP i que aquest hagués servit les peticions de la manera adequada.

13. Conclusions i possibles millores • Pensam que a la pàgina encara es podrien fer moltes més coses, com per exemple la incorporació de comentaris als articles. Aquesta és una llista de possibles millores a introduir a la pàgina: • Sistema de comentaris als articles. • Registre d’usuaris (no administradors) i edició de perfils. • Incorporació d’estils a la redacció dels articles. • Part d’administració molt més completa.

14. Petita introducció a jQuery • Què és jQuery? • Ús de jQuery • Comunitat de jQuery • Qui empra jQuery?

15. Què és jQuery? • jQuery és una llibreria JS que s’encarrega engloba la gestió de molts d’aspectes de JS i ofereix mètodes per a tractar-ho de manera molt senzilla e intuïtiva per al programador. Característiques: • Selecció d’elements DOM. • Edició de regles CSS i selecció d’elements amb XPath. • Gestió d’events. • Efectes i animacions • AJAX. • Suporta extensions. • Compatible amb casi tots els navegadors (compatibilitat total amb tots els navegadors més coneguts).

16. Ús de jQuery jQuery és una llibreria (normalment comprimida) que s’ha d’incloure a la pàgina web a la qual es vol emprar, una vegada carregada ja podem emprar-la allà on vulguem. Per a fer referència a jQuery, s’ha de fer mitjançant el caràcter $ dins de qualsevol script JS (tant a la pròpia pàgina com a dins d’un fitxer JS). Per exemple, un operador de jQuery és el següent: $("#taulaMeva"); El que fa aquesta instrucció és seleccionar l’element amb l’ID “taulaMeva”. Com veiem, els selectors son els mateixos que els que empra XPath. Una vegada seleccionat l’element després es pot treballar amb ell, per exemple, li llevarem una classe i li posarem una classe nova, tot això amb una línea de codi: $("#taulaMeva").removeClass(“activa”).addClass(“inactiva”);

17. Ús de jQuery jQuery permet instal·lar “listeners” per als events de JS, per exemple, si volem escoltar un click sobre un botó determinat, podem instal·lar un listener de la següent manera: $(document).on(‘click’, ’.botonet’, function(event){ $(this).css({ “background-color”: “red”, “width”: “200px” }); }); Aquest codi el que fa és escoltar l’event ‘click’ sobre el botó amb la classe “botonet” que pertany al document. Una vegada l’event es dispara, s’executa el tercer paràmetre de la funció on, que normalment és un callback, això vol dir que aquest paràmetre tant pot ser el nom d’una funció a executar com el contingut d’una funció sense declarar.

18. Ús de jQuery Una funció que a la pràctica hem emprat molt i que jQuery ho implementa d’una manera molt còmode per al programador és la seva funció AJAX: $.ajax({ data: {'post_id': post_id}, type: "POST", dataType: "html", url: "edit_post.php", success: function(html){ $('#contenidor_noticies').html(html); var text = stripHTML($('.write_post_area').val()); $('.write_post_area').val(text); } });

19. Comunitat de jQuery • jQuery és una llibreria amb una comunitat molt extesa, tant és així que el propi Google té disponible un repositori públic per a que els dissenyadors puguin incloure la llibreria jQuery directament desde els servidors de Google. Per a incloure la darrera versió de la llibreria a la teva web només cal fer això: <script src="http://code.jquery.com/jquery-latest.min.js" type="text/javascript"></script>

20. Qui empra jQuery?

21. Moltes gràcies!!