Mattoncini per il webParte 3

Giorgio Carpoca

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

Argomenti Javascript DOM AJAX Web 2.0 Wordpress, Drupal e Joomla!

Il nodo principale Sempre piu’ spesso ci si trova nella condizione di dover

utilizzare applicazioni web: ricaricare il credito del cellulare, controllare la posta, prenotare un viaggio

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.

IFrame Il tag iframe permette di inserire in una pagina il contenuto di

un’altra pagina. L’indirizzo della pagina che riempie l’iframe puo’ essere definito

e cambiato anche dinamicamente. E’ uno spazio rettangolare. Puo’ essere usato anche per eseguire chiamate nascoste che

non caricano un risultato ma attivano un’operazione sul server. E’ una tecnica che si puo’ utilizzare ma ne esistono altre piu’

efficienti e potenti.

Esempio Iframe<iframe src="http://www.google.it" width="300" height="300">

  Contenuto alternativo per i browser che non leggono gli iframe.</iframe>

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.

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.

La soluzione E’ possibile aggiornare solo una parte della pagina senza dover

ricaricare tutto il contenuto? Esiste un modo per rappresentare la pagina html in una

struttura facilmente utilizzabile da un algoritmo? Esiste un linguaggio che mi permetta di interagire con i singoli

elementi della pagina?

Javascript Nasce nel 1995 come linguaggio semplice per modificare

dinamicamente dei tag nelle pagine web. Il nome e’ fonte di fraintendimento, non e’ una versione

semplice di java. E’ simile come scrittura ma e’ una similitudine solo formale.

Il javascript e’ un linguaggio client-side: vive nel browser dell’utente. Questa caratteristica e’ la forza e anche la debolezza del linguaggio

Aspetti e caratteristiche generali Il linguaggio di scripting e’ piu’ sicuro e affidabile. E’ in chiaro e

viene interpretato quindi e’ semplice filtrarlo e bloccarlo. 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.

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.

Il codice javascript deve essere scaricato completamente per essere eseguito.

Il suo utilizzo e’ aumentato in modo esponenziale nell’ultimo periodo e in futuro sara’ sempre piu’ presente.

Istruzioni di base <SCRIPT Language="Javascript">

<!-- //--></SCRIPT>

<SCRIPT Language=Javascript src="nomefile.js"><!-- //--></SCRIPT>

Istruzioni di assegnazione: var pippo=“ciao”; Istruzione condizionale:

if(pippo==“ciao”) { alert(pippo); }

switch(pippo) { case “ciao”: alert(pippo);break; }

Istruzioni cicliche:for( i=0; i<10; i++) { alert(pippo); }

while(i<10) { alert(pippo); i++; }

Interagire con gli elementi della pagina document.getElementById(idelemento);

Con document.getElementById e’possibile individuare uno specif ico elemento della pagina

<div id="mioEl">...</div> document.getElementById('mioEl').style.color='red';

Interazione con gli oggetti del DOM DOM (Dynamic Object Model) e’ uno standard definito dal W3C

per la modifica di un documento che contenga contenuti xml. E’ un modo di rappresentare secondo un albero gerarchico la

struttura e il contenuto di un documento xml e quindi anche html.

Javascript e’ un modo per accedere al DOM e modificarlo. Sono definiti anche una serie di eventi sugli oggetti che è

possibile controllare

Ajax Asynchronous JavaScript and XML E’ una tecnologia di cui javascript e’ il componente principale. Funziona nella maggior parte dei browser moderni. Chi lo usa? Google e’ stato uno dei primi, ormai l’utilizzo e’

generalizzato. La responsivita’ delle pagine ajax ha permesso lo sviluppo di

applicazioni prima impossibili o quasi inutilizzabili. Il vantaggio principale e’ l’usabilita’

Chiamate asincrone

Un esempio 1/2<input type=“text” id=“email” name=“email” onblur=“validate();” />

Var xmlhttp;

Function validate() {

var email=document.getElementById(“email”);

var url=“validate?email=” + escape(email.value);

if(window.ActiveXObject) {

xmlhttp=new ActiveXObject(“Microsoft.XMLHTTP”);

}

else {

xmlhttp=new XMLHttpRequest();

}

xmlhttp.open(“GET”,url);

xmlhttp.onreadystatechange=callback;

xmlhttp.send(null);

}

Esempio 2/2Function callback() {

if(xmlhttp.readystate==4) {

if(xmlhttp.status==200) {

// succede qualcosa

}

}

}

Semplificare la programmazione Il problema del javascript e’ la differenza tra i comportamenti

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

Le piu’ utilizzate sono Scriptacolous, Jquery, Mootools e infine ExtJs

JQuery E’ una libreria di funzioni per le pagine web, scritta in javascript

e si propone di astrarre la programmazione lato client La prima versione stabile e’ uscita nell’agosto del 2006. Attualmente l’ultima versione disponibile e’ la 1.4.2 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="mioEl">...</div>

Versione Javascript:document.getElementById('mioEl').style.color='red';

Versione jquery:$(‘#mioEl’).css(“color”,”red”);

Altre librerie Script.aculo.us Mootools ExtJs

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

Facebook, Youtube, Wikipedia, Flickr etc. Non e’ quindi una definizione basata sulla tecnologia ma fa

riferimento al tipo di utilizzo.

Le fondamenta del web 2.0 Disponibilita’ di database Linguaggi server-side Javascript Possibilita’ di chiamate asincrone lato client

Analisi delle necessita’+ tecnologie = innovazione

Applicazioni web 2.0 Blog: una sorta di diario online, eventualmente corredato di

commenti. Sono nati nel 1997. Forum: sito in cui gli utenti discutono di vari argomenti Chat: e’ un sistema che permette agli utenti di scambiarsi

messaggi con rapporto 1 a 1 o anche gruppi Album fotografici Twitter Social Network

Facebook Wikipedia

Wordpress, Drupal e Joomla! 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.

Wordpress, Drupal e Joomla sono tre applicazioni opensource che rientrano in questa categoria, ognuno di esse con delle specificita’.

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.

Wordpress E’ una piattaforma dedicata al “personal publishing” Nasce per gestire blog ed e’ probabilmente la piattaforma di

blogging piu’ usata E’ possibile costruire siti che si discostano dal blog quali ad

esempio siti di news utilizzandone le caratteristiche di content management system.

E’ scritta in PHP e utilizza un database MySql. E’ rilasciata sotto licenza GNU General Public License. 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.

Esiste un’enorme base di sviluppatori indipendenti che provvede alla realizzazione di template e plugin nuovi e al debug del codice.

Drupal E’ un content management system E’ scritto in PHP e puo’ utilizzare un database MySql o

PostgreSql E’ rilasciato sotto licenza GNU General Public License. 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.

Drupal permette partendo da una versione base di aggiungere i moduli necessari all’applicazione che si sta costruendo.

Rispetto a Wordpress mantiene una certa difficolta’ nella installazione iniziale anche se con le varie versioni questo aspetto e’ stato molto migliorato.

Joomla! E’ un content management system E’ scritto in PHP e si basa sul database MySql E’ rilasciato sotto licenza GNU General public license La caratteristica principale e’ quella di permettere la creazione

di un sito completo di tutte le funzionalita’ principali con poco sforzo

Mantiene una certa rigidita’ per quanto riguarda la personalizzazione dei template

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!

Grazie