postit p r ctica de tecnologia multim dia 2012 13 n.
Download
Skip this Video
Loading SlideShow in 5 Seconds..
PostIt . P ràctica de Tecnologia Multimèdia. 2012-13. PowerPoint Presentation
Download Presentation
PostIt . P ràctica de Tecnologia Multimèdia. 2012-13.

Loading in 2 Seconds...

play fullscreen
1 / 21

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


  • 70 Views
  • Uploaded on

PostIt . P ràctica de Tecnologia Multimèdia. 2012-13. Per Mateu Llull Bennassar i Joan Miquel Perelló Puig. Í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

loader
I am the owner, or an agent authorized to act on behalf of the owner, of the copyrighted work described.
capcha
Download Presentation

PowerPoint Slideshow about 'PostIt . P ràctica de Tecnologia Multimèdia. 2012-13.' - gamada


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.While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server.


- - - - - - - - - - - - - - - - - - - - - - - - - - E N D - - - - - - - - - - - - - - - - - - - - - - - - - -
Presentation Transcript
postit p r ctica de tecnologia multim dia 2012 13

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

Per Mateu Llull Bennassar i Joan Miquel Perelló Puig

slide2
Í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
qu s postit
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.
com ho hav em pensat fer
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>

com ho hem fet
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>

desenvolupament de postit
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.
esborrany inicial
Esborrany Inicial
  • El nostre primer esborrany de PostIt amb bootstrap sobre xsl va ser aquest:
peticions ajax sobre php
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
punts interessants de la p gina
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.
problemes soferts durant el proc s de desenvolupament
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ó.
tecnologies utilitzades
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.
fitxers generats
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.
conclusions i possibles millores
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.
petita introducci a jquery
Petita introducció a jQuery
  • Què és jQuery?
  • Ús de jQuery
  • Comunitat de jQuery
  • Qui empra jQuery?
qu s jquery
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).
s de jquery
Ú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”);

s de jquery1
Ú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.

s de jquery2
Ú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);

}

});

comunitat de jquery
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>