Strumenti per lo sviluppo

Dimensione: px
Iniziare la visualizzazioe della pagina:

Download "Strumenti per lo sviluppo"

Transcript

1 Strumenti per lo sviluppo Librerie Javascript jquery script.aculo.us Componenti aggiuntivi per i browser firefox e chrome Firebug Web developer

2 Alcune utility on-the-fly Generatore di sorgente di codice da mettere in una pagina html: Sito in cui si possono provare al volo i comandi appresi, siano essi CSS HTML o JAVASCRIPT:

3 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

4 Firebug 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

5 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

6 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:

7 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()

8 La libreria jquery <head> }); Jquery gestisce l'evento ready, da utilizzare al posto del solito onload dell'oggetto window <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>

9 jquery come selettore $("#header") > restituisce l'elemento con id="header", come il comando getelementbyid $("h3") > prende tutti gli elementi di tipo H3 $("div#content.photo") > restituisce un array degli elementi con class="photo" dentro <div id="content"> $("ul li") > restituisce un array degli elementi <li> dentro tutti gli <ul>

10 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>

11 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

12 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 ) $.browser.mozilla > restituisce TRUE se si è dentro firefox

13 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>

14 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ì: $("tr").mouseover(function() { $(this).addclass( css_rollover ); }).mouseout(function(){ $(this).removeclass("css_rollover"); }); Ovvero al mouseover su ogni elemento tr si attiva la proprietà css css_rollover, che viene tolta al rollout. VERSIONE ALTERNATIVA: $("tr").hover( function () { $(this).addclass( css_rollover ); }, function () { $(this).removeclass("css_rollover"); } );

15 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

16 Break pausina veloce...

17 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--> }

18 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

19 Alcuni tutorial interessanti Gallery scorrevole con testo Menu fatto di immagini che scorrono al movimento del mouse:

20 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 $

21 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 });

22 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>

23 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

24 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: 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

25 The end. Grazie della partecipazione, esercitatevi a casa. La ripetizione fa il maestro. ^_^

aggiunge del testo nella parte finale del tag, in questo caso la stringa da controllare.

aggiunge del testo nella parte finale del tag, in questo caso la stringa da controllare. Capitolo 6 jquery Negli ultimi anni è stata rilasciata una mole incalcolabile di framework JavaScript, più o meno completi, realizzati per supportare nel miglior modo possibile lo sviluppatore web aiutandolo

Dettagli

Manuali.net. Nevio Martini

Manuali.net. Nevio Martini Manuali.net Corso base per la gestione di Siti Web Nevio Martini 2009 Il Linguaggio HTML 1 parte Introduzione Internet è un fenomeno in continua espansione e non accenna a rallentare, anzi è in permanente

Dettagli

Introduzione a jquery

Introduzione a jquery Introduzione a jquery Emiliano Castellina Dipartimento di Automatica e Informatica Politecnico di Torino Introduzione a jquery by Emiliano Castellina is licensed under a Creative Commons Attribuzione -

Dettagli

UTILIZZO DEI CSS. categoria e lente possiamo aggregare le istruzioni inserite ed avere infondo alla colonna stessa un anteprima.

UTILIZZO DEI CSS. categoria e lente possiamo aggregare le istruzioni inserite ed avere infondo alla colonna stessa un anteprima. UTILIZZO DEI CSS FOGLI STILE Il CSS consente di associare regole stilistiche agli elementi del codice HTML come o . Queste regole definiscono l aspetto rappresentativo degli elementi HTML a cui

Dettagli

COME ELIMINARE PARTI DEL TEMPLATE IN PAGINE SINGOLE

COME ELIMINARE PARTI DEL TEMPLATE IN PAGINE SINGOLE COME ELIMINARE PARTI DEL TEMPLATE IN PAGINE SINGOLE Con questa guida impareremo come eliminare delle singole zone del template che utilizziamo all'interno di una pagina specifica. Questo metodo torna utile

Dettagli

Esploriamo Javascript! 1 di Ivan Venuti

Esploriamo Javascript! 1 di Ivan Venuti Esploriamo Javascript! 1 di Ivan Venuti L Html è stato pensato (e creato) per presentare contenuti statici che, visualizzati da utenti diversi, diano sempre lo stesso risultato. Per sopperire a questa

Dettagli

Indice generale. Le persone dietro questo libro...xi. Introduzione...xv. Innamorarsi di jquery...1

Indice generale. Le persone dietro questo libro...xi. Introduzione...xv. Innamorarsi di jquery...1 Indice generale Le persone dietro questo libro...xi Introduzione...xv A chi si rivolge questo libro...xvi Contenuti del libro...xvi Dove trovare informazioni...xviii Il sito web del libro...xix Le newsletter

Dettagli

Metodologie Informatiche applicate al Turismo

Metodologie Informatiche applicate al Turismo Metodologie Informatiche applicate al Turismo 11. Realizzare Siti Dinamici e Applicazioni Web Paolo Milazzo Dipartimento di Informatica, Università di Pisa http://www.di.unipi.it/ milazzo milazzo di.unipi.it

Dettagli

Esercizi di JavaScript

Esercizi di JavaScript Esercizi di JavaScript JavaScript JavaScript é un linguaggio di programmazione interpretato e leggero, creato dalla Netscape. E' presente a patire da Netscape 2 in tutti i browser ed é dunque il linguaggio

Dettagli

Guida all uso di Java Diagrammi ER

Guida all uso di Java Diagrammi ER Guida all uso di Java Diagrammi ER Ver. 1.1 Alessandro Ballini 16/5/2004 Questa guida ha lo scopo di mostrare gli aspetti fondamentali dell utilizzo dell applicazione Java Diagrammi ER. Inizieremo con

Dettagli

Versione 2.0. Biblioteca Centralizzata Clinica A cura di Claudia Cavicchi

Versione 2.0. Biblioteca Centralizzata Clinica A cura di Claudia Cavicchi Versione 2.0 Biblioteca Centralizzata Clinica A cura di Claudia Cavicchi 1 Cos è? E un software gratuito, estensione del browser Mozilla Firefox ed è sviluppato dal Center for History and New Media della

Dettagli

AJAX. Goy - a.a. 2006/2007 Servizi Web 1. Cos'è il Web 2.0

AJAX. Goy - a.a. 2006/2007 Servizi Web 1. Cos'è il Web 2.0 AJAX Goy - a.a. 2006/2007 Servizi Web 1 Cos'è il Web 2.0 Web 2.0 = termine introdotto per la prima volta nel 2004 come titolo di una conferenza promossa dalla casa editrice O Reilly L'idea è che ci si

Dettagli

WWW.ICTIME.ORG. NVU Manuale d uso. Cimini Simonelli Testa

WWW.ICTIME.ORG. NVU Manuale d uso. Cimini Simonelli Testa WWW.ICTIME.ORG NVU Manuale d uso Cimini Simonelli Testa Cecilia Cimini Angelo Simonelli Francesco Testa NVU Manuale d uso EDIZIONE Gennaio 2008 Questo manuale utilizza la Creative Commons License www.ictime.org

Dettagli

GESTIRE LA BIBLIOGRAFIA

GESTIRE LA BIBLIOGRAFIA GESTIRE LA BIBLIOGRAFIA STRUMENTI DI GESTIONE BIBLIOGRAFICA I software di gestione bibliografica permettono di raccogliere, catalogare e organizzare diverse tipologie di materiali, prendere appunti, formattare

Dettagli

SERVIZIO EASYWEB INDICE GUIDA RAPIDA PER LA CONFIGURAZIONE DEL BROWSER. Quale browser usi? Introduzione. Browser compatibili e blocco popup

SERVIZIO EASYWEB INDICE GUIDA RAPIDA PER LA CONFIGURAZIONE DEL BROWSER. Quale browser usi? Introduzione. Browser compatibili e blocco popup SERVIZIO EASYWEB SE SIETE STATI REDIREZIONATI QUI PERCHE IL VOSTRO BROWSER, O UNA DELLE TOOL-BAR CHE VI SONO INSTALLATE, STA BLOCCANDO LA COMPARSA DELLA FINESTRA DI EASYWEB, LEGGETE QUESTA BREVE GUIDA

Dettagli

PROGRAMMA DEL CORSO WEB GRAPHIC DESIGNER

PROGRAMMA DEL CORSO WEB GRAPHIC DESIGNER PROGRAMMA DEL CORSO WEB GRAPHIC DESIGNER Il percorso Web Graphic Designer con Certificazione internazionale Adobe Dreamweaver prepara lo studente ad acquisire solide conoscenze per la figura professionale

Dettagli

JavaScript - 4. Modello ad oggetti tradizionale. L ambiente del web browser 1

JavaScript - 4. Modello ad oggetti tradizionale. L ambiente del web browser 1 JavaScript - 4 Modello ad oggetti tradizionale L ambiente del web browser 1 Per capire come funziona JavaScript lato client bisogna capire la struttura dell ambiente di programmazione offerto da un web

Dettagli

Le Proprietà della Barra delle applicazioni e Menu Start di Giovanni DI CECCA - http://www.dicecca.net

Le Proprietà della Barra delle applicazioni e Menu Start di Giovanni DI CECCA - http://www.dicecca.net - Introduzione Con questo articolo chiudiamo la lunga cavalcata attraverso il desktop di Windows XP. Sul precedente numero ho analizzato il tasto destro del mouse sulla Barra delle Applicazioni, tralasciando

Dettagli

MANUALE IMMEDIATO DI HTML

MANUALE IMMEDIATO DI HTML MANUALE IMMEDIATO DI HTML Realizzato da NiktorTheNat Iniziato il giorno 9 aprile 2010 - terminato il giorno 22 aprile 2010 email autore: niktorthenat@tiscali.it canale youtube: http://www.youtube.com/user/niktorthenat

Dettagli

Le librerie JavaScript

Le librerie JavaScript Le librerie JavaScript Nelle lezioni precedenti abbiamo notato che per garantire la maggior accessibilità e usabilità di un sito il codice JavaScript aumenta e occorre ricorrere a tecniche di programmazione

Dettagli

Uso di filmati flash sulla LIM

Uso di filmati flash sulla LIM Uso di filmati flash sulla LIM Spesso capita di trovare siti in cui sono presenti filmati flash che si rivelerebbero utili per le attività in classe. Per esempio, un flash che permette di colorare un'immagine

Dettagli

Sistema Bibliotecario di Ateneo Biblioteca della SSLMIT. Introduzione a. Che cos è Zotero

Sistema Bibliotecario di Ateneo Biblioteca della SSLMIT. Introduzione a. Che cos è Zotero Sistema Bibliotecario di Ateneo Biblioteca della SSLMIT Introduzione a Che cos è Zotero Zotero è uno strumento creato per rendere più veloce ed efficiente il lavoro della ricerca nelle fasi di acquisizione,

Dettagli

Creare un nuovo tema grafico ( skin")

Creare un nuovo tema grafico ( skin) Creare un nuovo tema grafico ( skin") Potenzialità e tecniche Validità: Febbraio 2013 Questa pubblicazione è puramente informativa. SISECO non offre alcuna garanzia, esplicita od implicita, sul contenuto.

Dettagli

Layout dell area di lavoro

Layout dell area di lavoro Layout dell area di lavoro In Windows, Dreamweaver fornisce un layout che integra tutti gli elementi in una sola finestra. Nell area di lavoro integrata, tutte le finestre e i pannelli sono integrati in

Dettagli

SardegnaMappe Manuale utente

SardegnaMappe Manuale utente SardegnaMappe Manuale utente [2] Indice 1. Introduzione 4 2. Requisiti dell utente 5 3. L applicazione SardegnaMappe 6 3.1. Panoramica dell applicazione 6 3.1.1. Accesso all applicazione 6 3.1.2. Icona

Dettagli

UN TOPO SFUGGENTE. CoderDOJO su Javascript - Trento. Augusto Ciuffoletti. 26 maggio 2015

UN TOPO SFUGGENTE. CoderDOJO su Javascript - Trento. Augusto Ciuffoletti. 26 maggio 2015 UN TOPO SFUGGENTE CoderDOJO su Javascript - Trento Augusto Ciuffoletti 26 maggio 2015 Un topo nella pagina Il tuo browser (quello che usi per navigare) può leggere un file del tuo computer, e mostrarti

Dettagli

JoomlafacebookChat+Plus tutorial

JoomlafacebookChat+Plus tutorial JoomlafacebookChat+Plus tutorial Componente scritto da: Marco Biagioni -- Doc. redatto da: Jacopo Sagramoso 07/01/12 Verificato da: Marco Biagioni 07/02/12 Rilascio versione: '1.0 03/02/11 Indice generale

Dettagli

principalmente un programma per la gestione di bibliografie: dalla raccolta dei riferimenti alla formattazione delle citazioni

principalmente un programma per la gestione di bibliografie: dalla raccolta dei riferimenti alla formattazione delle citazioni COS È? principalmente un programma per la gestione di bibliografie: dalla raccolta dei riferimenti alla formattazione delle citazioni un programma gratuito: la versione base offre 300 MB di spazio disco

Dettagli

JAVASCRIPT. Tale file è associato alla pagina web mediante il tag