1.
Mattoncini per il web Parte 3 Giorgio Carpoca

2.
Riepilogo <ul><li>Internet un ambiente distribuito </li></ul><ul><li>Dal lato del server </li></ul><ul><li>PHP / ASP.NET </li></ul><ul><li>Oltre il testo </li></ul><ul><li>Audio e formati audio </li></ul><ul><li>Video e formati video </li></ul><ul><li>Flash / Silverlight </li></ul><ul><li>HTML 5 </li></ul>

3.
Argomenti <ul><li>Javascript </li></ul><ul><li>DOM </li></ul><ul><li>AJAX </li></ul><ul><li>Web 2.0 </li></ul><ul><li>Wordpress, Drupal e Joomla! </li></ul>

4.
Il nodo principale <ul><li>Sempre piu’ spesso ci si trova nella condizione di dover utilizzare applicazioni web: ricaricare il credito del cellulare, controllare la posta, prenotare un viaggio </li></ul><ul><li>Il paradigma delle applicazioni web e’ richiesta/risposta: si agisce sul browser, la richiesta di modifica viene inviata al server, la pagina modificata viene rimandata dal server al client. Questo funzionamento e’ fastidioso, e’ lento, e’ dispendioso in termini di risorse e di tempo. L’utente ha la sensazione di usare un’applicazione di serie B. </li></ul>

5.
IFrame <ul><li>Il tag iframe permette di inserire in una pagina il contenuto di un’altra pagina. </li></ul><ul><li>L’indirizzo della pagina che riempie l’iframe puo’ essere definito e cambiato anche dinamicamente. </li></ul><ul><li>E’ uno spazio rettangolare. </li></ul><ul><li>Puo’ essere usato anche per eseguire chiamate nascoste che non caricano un risultato ma attivano un’operazione sul server. </li></ul><ul><li>E’ una tecnica che si puo’ utilizzare ma ne esistono altre piu’ efficienti e potenti. </li></ul>

6.
Esempio Iframe <ul><li><iframe src=&quot;http://www.google.it&quot; width=&quot;300&quot; height=&quot;300&quot;> Contenuto alternativo per i browser che non leggono gli iframe. </iframe> </li></ul><ul><li>Vantaggi: e’ possibile organizzare il layout del sito scrivendo una quantita’ inferiore di codice organizzandolo in un numero minore di file, e’ possibile mantenere visibili sempre alcune parti del sito, e’ possibile cambiare solo una parte della pagina. </li></ul><ul><li>Svantaggi: gli svantaggi che comporta un uso scorretto di un layout a frame sono superiori ai vantaggi che possono derivare dal loro utilizzo. I motori di ricerca infatti navigano di link in link attraverso il web per catturare contenuti da indicizzare, puo’ succedere che a seguito di una ricerca si finisca non nella pagina contenitore ma nel blocco di un iframe impedendo di navigare ancora. </li></ul>

7.
La soluzione <ul><li>E’ possibile aggiornare solo una parte della pagina senza dover ricaricare tutto il contenuto? </li></ul><ul><li>Esiste un modo per rappresentare la pagina html in una struttura facilmente utilizzabile da un algoritmo? </li></ul><ul><li>Esiste un linguaggio che mi permetta di interagire con i singoli elementi della pagina? </li></ul>

8.
Javascript <ul><li>N asce nel 1995 come linguaggio semplice per modificare dinamicamente dei tag nelle pagine web. </li></ul><ul><li>Il nome e’ fonte di fraintendimento, non e’ una versione semplice di java. E’ simile come scrittura ma e’ una similitudine solo formale. </li></ul><ul><li>Il javascript e’ un linguaggio client-side: vive nel browser dell’utente. Questa caratteristica e’ la forza e anche la debolezza del linguaggio </li></ul>

9.
Aspetti e caratteristiche generali <ul><li>Il linguaggio di scripting e’ piu’ sicuro e affidabile. E’ in chiaro e viene interpretato quindi e’ semplice filtrarlo e bloccarlo. </li></ul><ul><li>Gli script hanno capacita’ limitate per ragioni di sicurezza. Non si puo’ fare qualunque cosa con il javascript ad esempio non è possibile accedere alle risorse hardware del pc. </li></ul><ul><li>Il codice javascript viene eseguito sul client e quindi e’possibile alleggerire la quantita’ di lavoro richiesto ai server spostando una parte di carico sul client. </li></ul><ul><li>Il codice javascript deve essere scaricato completamente per essere eseguito. </li></ul><ul><li>Il suo utilizzo e’ aumentato in modo esponenziale nell’ultimo periodo e in futuro sara’ sempre piu’ presente. </li></ul>

10.
Istruzioni di base <ul><li><SCRIPT Language=&quot;Javascript&quot;> <!-- //--> </SCRIPT> </li></ul><ul><li><SCRIPT Language=Javascript src=&quot;nomefile.js&quot;><!-- //--></SCRIPT> </li></ul><ul><li>Istruzioni di assegnazione: var pippo=“ciao”; </li></ul><ul><li>Istruzione condizionale: if(pippo==“ciao”) { alert(pippo); } switch(pippo) { case “ciao”: alert(pippo); break; } </li></ul><ul><li>Istruzioni cicliche: for( i=0; i<10; i++) { alert(pippo); } while(i<10) { alert(pippo); i++; } </li></ul>

11.
Interagire con gli elementi della pagina <ul><li>document.getElementById(idelemento); Con document.getElementById e’possibile individuare uno specifico elemento della pagina </li></ul><ul><li><div id=&quot;mioEl&quot;> ... </div> </li></ul><ul><li>document.getElementById('mioEl').style.color='red'; </li></ul>

12.
Interazione con gli oggetti del DOM <ul><li>DOM (Dynamic Object Model) e’ uno standard definito dal W3C per la modifica di un documento che contenga contenuti xml. </li></ul><ul><li>E’ un modo di rappresentare secondo un albero gerarchico la struttura e il contenuto di un documento xml e quindi anche html. </li></ul><ul><li>J avascript e’ un modo per accedere al DOM e modificarlo. </li></ul><ul><li>Sono definiti anche una serie di eventi sugli oggetti che è possibile controllare </li></ul>

13.
Ajax <ul><li>Asynchronous JavaScript and XML </li></ul><ul><li>E’ una tecnologia di cui javascript e’ il componente principale. </li></ul><ul><li>Funziona nella maggior parte dei browser moderni. </li></ul><ul><li>Chi lo usa? Google e’ stato uno dei primi, ormai l’utilizzo e’ generalizzato. </li></ul><ul><li>La responsivita’ delle pagine ajax ha permesso lo sviluppo di applicazioni prima impossibili o quasi inutilizzabili. Il vantaggio principale e’ l’usabilita’ </li></ul>

14.
Chiamate asincrone

15.
Un esempio 1/2 <ul><li><input type=“text” id=“email” name=“email” onblur=“validate();” /> </li></ul><ul><li>V ar xmlhttp; </li></ul><ul><li>F unction validate() { </li></ul><ul><li>var email=document.getElementById(“email”); </li></ul><ul><li>var url=“validate?email=” + escape(email.value); </li></ul><ul><li>if(window.ActiveXObject) { </li></ul><ul><li>xmlhttp=new ActiveXObject(“Microsoft.XMLHTTP”); </li></ul><ul><li>} </li></ul><ul><li>else { </li></ul><ul><li>xmlhttp=new XMLHttpRequest(); </li></ul><ul><li>} </li></ul><ul><li>xmlhttp.open(“GET”,url); </li></ul><ul><li>xmlhttp.onreadystatechange=callback; </li></ul><ul><li>xmlhttp.send(null); </li></ul><ul><li>} </li></ul>

16.
Esempio 2/2 <ul><li>F unction callback() { </li></ul><ul><li>if(xmlhttp.readystate==4) { </li></ul><ul><li>if(xmlhttp.status==200) { </li></ul><ul><li>// succede qualcosa </li></ul><ul><li>} </li></ul><ul><li>} </li></ul><ul><li>} </li></ul>

17.
Semplificare la programmazione <ul><li>Il problema del javascript e’ la differenza tra i comportamenti dei browser </li></ul><ul><li>Sono state sviluppate librerie che aumentano l’astrazione del codice cosi’ che lo sviluppatore si concentri sul proprio codice, cuore dell’applicazione, piuttosto che quello necessario a gestire le differenze tra browser e a compiti ripetitivi. </li></ul><ul><li>Le piu’ utilizzate sono Scriptacolous, Jquery, Mootools e infine ExtJs </li></ul>

18.
JQuery <ul><li>E ’ una libreria di funzioni per le pagine web, scritta in javascript e si propone di astrarre la programmazione lato client </li></ul><ul><li>La prima versione stabile e’ uscita nell’agosto del 2006. </li></ul><ul><li>Attualmente l’ultima versione disponibile e’ la 1.4.2 </li></ul><ul><li>Utilizzando jquery e’ possibile manipolare tutti gli oggetti del DOM, cambiare i contenuti, la formattazione applicando CSS, gestire eventi e infine aggiungere effetti tipo transizioni e dissolvenze <div id=&quot;mioEl&quot;> ... </div> </li></ul><ul><li>Versione Javascript: document.getElementById('mioEl').style.color='red'; </li></ul><ul><li>Versione jquery: $(‘#mioEl’).css(“color”,”red”); </li></ul>

19.
Altre librerie <ul><li>Script.aculo.us </li></ul><ul><li>Mootools </li></ul><ul><li>ExtJs </li></ul>

20.
Web 2.0 <ul><li>Si definiscono web 2.0 quelle applicazioni che permettono un alto livello di interazione sito-utente. In particolare sulla caratteristica di queste applicazioni di fornire all’utente la possibilita’ di generare i contenuti stessi dell’applicazione. </li></ul><ul><li>Facebook, Youtube, Wikipedia, Flickr etc. </li></ul><ul><li>Non e’ quindi una definizione basata sulla tecnologia ma fa riferimento al tipo di utilizzo. </li></ul>

21.
Le fondamenta del web 2.0 <ul><li>Disponibilita’ di database </li></ul><ul><li>Linguaggi server-side </li></ul><ul><li>Javascript </li></ul><ul><li>Possibilita’ di chiamate asincrone lato client </li></ul><ul><li>Analisi delle necessita’+ tecnologie = innovazione </li></ul>

22.
Applicazioni web 2.0 <ul><li>Blog: una sorta di diario online, eventualmente corredato di commenti. Sono nati nel 1997. </li></ul><ul><li>Forum: sito in cui gli utenti discutono di vari argomenti </li></ul><ul><li>Chat: e’ un sistema che permette agli utenti di scambiarsi messaggi con rapporto 1 a 1 o anche gruppi </li></ul><ul><li>Album fotografici </li></ul><ul><li>Twitter </li></ul><ul><li>Social Network </li></ul><ul><ul><li>Facebook </li></ul></ul><ul><ul><li>Wikipedia </li></ul></ul>

23.
Wordpress, Drupal e Joomla! <ul><li>CMS Content Management System, sistema per la gestione dei contenuti. E’ un’applicazione che permette di gestire il contenuto di una pagina senza avere conoscenze di programmazione. </li></ul><ul><li>Wordpress, Drupal e Joomla sono tre applicazioni opensource che rientrano in questa categoria, ognuno di esse con delle specificita’. </li></ul><ul><li>A cosa servono? E’ inutile inventare la ruota ogni volta. Se non si hanno esigenze particolari e si ha bisogno di un sistema con funzioni standard utilizzare un’applicazione pronta e testata da la possibilita’ di risparmiare del tempo e di arrivare sul mercato piu’ velocemente. </li></ul>

24.
Wordpress <ul><li>E’ una piattaforma dedicata al “personal publishing” </li></ul><ul><li>Nasce per gestire blog ed e’ probabilmente la piattaforma di blogging piu’ usata </li></ul><ul><li>E’ possibile costruire siti che si discostano dal blog quali ad esempio siti di news utilizzandone le caratteristiche di content management system. </li></ul><ul><li>E’ scritta in PHP e utilizza un database MySql. </li></ul><ul><li>E’ rilasciata sotto licenza GNU General Public License. </li></ul><ul><li>Le caratteristiche principali sono l’estedibilita’ tramite plugin, disponibilita’ di template, gestione della multi-autorialita’, traduzione in molte lingue, editor per la formattazione dei contenuti. </li></ul><ul><li>Esiste un’enorme base di sviluppatori indipendenti che provvede alla realizzazione di template e plugin nuovi e al debug del codice. </li></ul>

25.
Drupal <ul><li>E’ un content management system </li></ul><ul><li>E’ scritto in PHP e puo’ utilizzare un database MySql o PostgreSql </li></ul><ul><li>E’ rilasciato sotto licenza GNU General Public License. </li></ul><ul><li>Lo differenzia da Wordpress la scrittura del codice in modo modulare e’ quindi preferibile quando si tratta di dover realizzare forti personalizzazioni del codice di base. </li></ul><ul><li>Drupal permette partendo da una versione base di aggiungere i moduli necessari all’applicazione che si sta costruendo. </li></ul><ul><li>Rispetto a Wordpress mantiene una certa difficolta’ nella installazione iniziale anche se con le varie versioni questo aspetto e’ stato molto migliorato. </li></ul>

26.
Joomla! <ul><li>E’ un content management system </li></ul><ul><li>E’ scritto in PHP e si basa sul database MySql </li></ul><ul><li>E’ rilasciato sotto licenza GNU General public license </li></ul><ul><li>La caratteristica principale e’ quella di permettere la creazione di un sito completo di tutte le funzionalita’ principali con poco sforzo </li></ul><ul><li>Mantiene una certa rigidita’ per quanto riguarda la personalizzazione dei template </li></ul><ul><li>Ha una grossa base di sviluppatori che ha costruito negli anni una grande quantita’ di moduli aggiuntivi che incrementano di molto la possibilita’ di usare Joomla! </li></ul>

27.
Grazie