View
741
Download
0
Category
Preview:
Citation preview
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
Recommended