li trovate anche nel materiale del corso di web design
annuncio pubblicitario
Strumenti per lo sviluppo
Librerie Javascript
−
jQuery
−
script.aculo.us
Componenti aggiuntivi per i browser firefox e chrome
−
Firebug
−
Web developer
Alcune utility on-the-fly
Generatore di sorgente di codice da mettere in una pagina
html:
−
http://quickhighlighter.com/
Sito in cui si possono provare al volo i comandi appresi, siano
essi CSS HTML o JAVASCRIPT:
−
http://www.w3schools.com/
Le Estensioni dei browser
Sono degli utility non indipendenti che si integrano con il browser
per cui sono fatti (e.s Firefox e Chrome su tutti)
Aggiungono funzioni specifiche che il browser non possiede
–
Scarico video in streaming > DownloaderHelper
–
Cancellazione della cache del browser >ClearCache
–
Sincronizzazione dei bookmarks > Xmarks
–
Analisi e debug delle pagine web > Firebug / Web developer
Svantaggi:
–
Rendono più lento il caricamento del browser
–
Spesso non sono compatibili con le nuove versioni dei
browser
Firebug
http://getfirebug.com
Potente estensione OPEN SOURCE che permette di :
−
Fare il debug delle pagine web anche passo a passo
−
Monitorare gli errori
−
Modificare il contenuto Css, html, DOM, javascript, xml..
della pagina
−
Monitorare il caricamento delle pagine con la funzione NET,
che illustra la durata dei caricamento dei singoli pezzi (swf,
jpg...) e lo script utilizzato
−
Cercare un elemento digitandone il nome
−
Analizzare al volo un qualsiasi elemento della pagina dal
menù del tasto destro del mouse
Web developer
https://addons.mozilla.org/it/firefox/addon/60/
Web developer è una toolbar che si aggiunge alla barra degli
strumenti del browser e che nasconde una lunga serie di comandi
e funzioni di analisi delle pagine web. Le modifiche saranno
applicate a tutte le pagine del browser.
Si integra ai comandi anche al tasto destro del mouse
Permette di
−
attivare e disattivare proprietà della pagina
−
visualizzare ogni singolo file o gruppo di file dalla pagina su
una nuova finestra
−
Modificare e controllare i dati personali
La libreria jQuery
Si tratta di una libreria javascript cross-browser, free e open
source .
Serve per velocizzare e facilitare la scrittura di script clientside:
−
Selezionare e modificare elementi del DOM
−
Manipolare CSS
−
Creare animazioni ed effetti
−
Gestire Eventi
È probabilmente il framework più utilizzato, per esempio da
Google, DELL, digg, NBC, CBS, mozilla.prg, wordpress
La documentazione per le API: http://api.jquery.com/
La libreria jQuery
jQuery è formato da un unico file javaScript, contenente tutto
il pacchetto. Deve essere incluso nella pagina html in uso nel
solito modo, dentro il tag HEAD:
<script type="text/javascript" src="jQuery.js"></script>
Per alterare gli elementi delle pagine si fa riferimento all'oggetto
principale, di tipo jQuery, tramite il carattere “$”
Es.: fare un fade out ai DIV del documento:
$("div").fadeOut()
La libreria jQuery
Jquery gestisce l'evento ready, da utilizzare al posto del solito
onload dell'oggetto window
<head>
<script src="http://code.jquery.com/jquery-latest.min.js"></script>
<script>
$(document).ready(function () {
$("p").text("The DOM is now loaded and can be manipulated.");
});
</script>
</head>
<body>
<p>Not loaded yet.</p>
</body>
jQuery come selettore
$("#header") >
$("h3") > prende tutti gli elementi di tipo H3
$("div#content .photo") > restituisce un array degli
restituisce l'elemento con id="header", come il
comando getElementById
elementi con class="photo" dentro <div id="content">
$("ul li") > restituisce un array degli elementi <li>
<ul>
dentro tutti gli
jQuery come selettore
$("ul li:first") >prende solo il primo elemento <li> degli <ul>
$("ul li:nth-child(2)") >prende solo il secondo elemento <li>
degli <ul>
$("ul li:nth-child(even)") > prende solo i figli di posizione
pari degli <ul>
jQuery come modificatore
$("div h1").addClass("colore_rosso") > attribuisce la
proprietà “colore_rosso” all'elemento h1 di tutti i div
$("div h1:first").html(“Testo nuovo”) > Sostituisce al
primo elemento H1 dei div il testo “Testo nuovo”
$("p").append(" Testo aggiunto") > aggiunge alla fine
del paragrafo la stringa di testo “ Testo aggiunto”
Altri esempi di uso di $
$(document.createElement('ul')) >
crea un elemento di
tipo ul
$('a.subject').click (function () {.... }); > gestisce gli
eventi
$("div")fadeIn(200) > animazione di fadeIn sui div
$.browser.version > rileva la versione (numero) del browser
(es. 1.9.2.3)
$.browser.mozilla > restituisce TRUE se si è dentro firefox
Scorciatoie con jQuery
Jquery però permette di ridurre notevolmente il codice.
Es.: la tabella a caselle zebrate. Invece di colorare una a una le caselle
basta richiamare il comando:
$("table tr:nth-child(even)").addClass("zebra");
Il comando passerà a ogni casella (“tr”) di posizione pari (EVEN) della tabella la
nuova proprietà di stile che abbiamo definito come “zebra”:
<style type="text/css"> tr.zebra { background-color: gold; color: #ffffff;
</style>
}
Scorciatoie con jQuery
E per quanto riguarda gli eventi del
mouse, invece di passare tutti gli
elementi della tabella con un ciclo
for e attribuire la modifica dello stile
nel ciclo, si può fare così:
Ovvero al mouseOver su ogni elemento
tr si attiva la proprietà css
”css_rollover”, che viene tolta al rollOut.
$("tr").mouseover(function() {
$(this).addClass(“css_rollover”);
}).mouseout(function(){
$(this).removeClass("css_rollover");
});
VERSIONE ALTERNATIVA:
$("tr").hover( function () {
$(this).addClass(“css_rollover”);
},
function () {
$(this).removeClass("css_rollover");
}
);
Animazioni con jQuery
Se ho un div con un rettangolo
posso, per esempio, modificarne le
dimensioni in x e y, decidendo la
durata dell'animazione e aggiungerci
funzioni in chiusura:
$("div:first").animate({
height: "20px",
width: "10px",
}, 1000, function() {
alert('done!');
});
Esistono anche dei plug-in aggiuntivi per
decidere il tipo di transizione
dell'animazione come questo
http://gsgd.co.uk/sandbox/jquery/easing/
Break – pausina veloce....
Form con jQuery
jQuery gestisce una moltitudine di tipi
di eventi, per esempio il “focus” su un
campo di testo:
$("input").focus(function () {
<!-- codice da eseguire al focus-->
});
E la pressione del campo di testo di
tipo “submit”
$("form").submit(function() {
<!-- codice da eseguire alla pressione del
tasto-->
}
Pannelli a scomparsa
Un comando interessante per le animazioni è il toggleClass, che fa
scorrere in altezza un qualsiasi elemento, facendolo scomparire e
riapparire:
$("div").slideToggle("slow");
L'elemento animato può contenere altri elementi che verranno di conseguenza
nascosti/visualizzati, creando un interessante effetto a scomparsa
Alcuni tutorial interessanti
•
Gallery scorrevole con testo
–
•
http://sixrevisions.com/tutorials/javascript_tutorial/create-a-slick-and-acces
Menu fatto di immagini che scorrono al movimento del mouse:
–
http://valums.com/wp-content/uploads/2009/02/menu/final.htm
La libreria script.aculo.us
La libreria è formata da una serie di file javaScript. Devono
essere inclusi nella pagina html in uso nel solito modo, dentro
il tag HEAD:
<script src="scr/prototype.js" type="text/javascript"></script>
<script src="src/scriptaculous.js" type="text/javascript"></script>
L'oggetto principale, che serve per elaborare il documento
html, fa riferimento sempre al carattere “$”
La libreria script.aculo.us
Un esempio di effetto di fade out (scomparsa):
new Effect.Fade('id_elemento_scelto');
oppure
$('id_elemento_scelto').fade();
Un esempio di effetto di fade in con una durata di 3 secondi e
opacità finale di .7 (70%):
$('id_elemento_scelto').appear( duration: 3.0, to:0.7 });
La libreria script.aculo.us
L'esempio su un div:
<body>
<div id="fade_demo" onmouseout="$(this).appear({ duration: 2, to: 0.7 });" onmouseover="$
(this).fade({ duration: 2, to: 0.3});" style="display:false; width:80px; height:80px;
background:#c2defb; border:1px solid #333;">
</div>
</body>
Uso di più librerie:
script.aculo.us + jQuery
Le librerie sono ovviamente compatibili e possono essere
usate assieme.
Ma come fa il browser a capire a quale quando usare
script.acuolo.us e quando jQuery se entrambi usano l'oggetto
$? Semplice: non lo sa.
La tecnica richiede di usare al posto della $ di jQuery proprio
l'oggetto jQuery. In alternativa si può rinominare l'oggetto $
con uno nuovo. Per esempio:
var $j = jQuery;
$j(“div”).fadeOut();
Link di spiegazione per jQuery
http://docs.jquery.com/Using_jQuery_with_Other_Libraries
Riassumendo..
•
Fate un po' di prove con le libreria jQuery
partendo da cose piccole e poi cercate di
integrarla con le vostre pagine.
•
Consultate le api che sono ricche di
informazioni ed esempi: http://api.jquery.com/
•
Estensioni firebug e web developer:
scaricatele e provatele con le vostre prove.
•
Si avanza tempo o siete curiosi date un
occhio anche alla libreria script.aculo.us
The end.
•
Grazie della partecipazione, esercitatevi a
casa. La ripetizione fa il maestro. ^_^
