maggio 7th, 2009 by Giovanni Caputo
Segnalo a tutti gli sviluppatori web, un video dal canale di googletechtalks, nel quale viene spiegato come testare ed effettuare il debug di codice web, come javascript e CSS.
Category: Programmazione, Siti Web, tutorial | No Comments »
maggio 2nd, 2009 by Giovanni Caputo
demo.
Header:
<script src="js/jquery-1.3.2.js" type="text/javascript"></script> <script type="text/javascript" language="Javascript" src="js/jquery.color.js"></script>
Html della pagina
<body> <div id="container"> <ul id="navigator" class="fancy" > <li><a class="c1" href="#">Design-Notes</a></li> <li><a class="c2" href="#">Likes to be</a></li> <li><a class="c3" href="#">Creative</a></li> </ul> </div> </body>
CSS
body{ background:#000; font-size:30px; font-family:Arial, Helvetica, sans-serif; } a{ color:#fff; text-decoration:none; font-weight:bold; } #container{ width:600px; margin: 100px auto; } #navigator li{ display:inline; } #navigator li a{ position:relative; padding:2px 5px;}
Javascript
Leggere ciò che riguarda: chained animation and unqueued animation animation.
var menu_over_colors = ["#ffffff","#55C7FF","#FF5A8D","#FFA324","#f453g5"];/* the colors you want to use*/ $(document).ready(function(){ $("#navigator > li > a").each(function(){ var over_color = menu_over_colors[$(this).attr('class').substring(1,3)]; $("#navigator li a").animate({ color: over_color }, 200);/* animate text color for all text*/ $("#navigator li+li+li a").animate({fontSize: '3em'}, 300);/* animate text of the third list*/ $("#navigator li+li a").animate({top: '50px'}, 300);/* animate text of the second list*/ $("#navigator li a").animate({left: '50px',}, 300) .animate({fontSize: '1.5em'}, 300) .animate({ backgroundColor:over_color }, 500, function() {var over_color = menu_over_colors[$(this).attr('class').substring(1,3)];/* point out the colors again*/ $(this).animate({color:'white',backgroundColor:over_color},300);}); });/* animate all text again with callback function*/ $("#navigator > li > a").hover( function(){//over var over_color = menu_over_colors[$(this).attr('class').substring(1,3)]; $(this).animate({ color: over_color }, 500 ); $(this).animate({ backgroundColor:over_color }, 500 ); }, function(){//out $(this).animate({color: menu_over_colors[0]},500); }); });
Category: Programmazione, Siti Web, Tecnologia, tutorial | No Comments »
maggio 2nd, 2009 by Giovanni Caputo
Category: Programmazione, Siti Web, Tecnologia, tutorial | No Comments »
aprile 30th, 2009 by Giovanni Caputo
Category: programmi, Siti Web | No Comments »
aprile 29th, 2009 by Giovanni Caputo
Category: Open Source, Programmazione, Siti Web, Tecnologia, tutorial | No Comments »
aprile 11th, 2009 by Giovanni Caputo
Vediamo alcuni progetti con Demo che utilizzano PHP e jQuery.
Directory Tree
Pagina di amministrazione di foto
Commenti sincroni con jquery, PHP e JSON
Ajax login
TO DO list
Modulo newsletter
Leggere dati da un database e convertirli in XML per permettere la lettura da parte di jQuery
Validare un orm sia client che server side
Realizzare uno ShoutBox
Realizzare una progressBar
Campi con autocompletamento
Ricerca Apple – style
Upload e crop di immagini
Fliker scroll
Sistema di votazione
Mail con feedback SMTP
Ricaricare un elemento ad intervalli di tempo regolare
Image Replacement
Category: Programmazione, Siti Web, Tecnologia | No Comments »
marzo 9th, 2009 by Giovanni Caputo
Speller Pages è una libreria Open Source JavaScript per programmi server-side di spell check (correzione parole errate). Disponibile in PHP o Perl/CGI, Speller Pages ti permette di creare una interfaccia che valida il testo inserito in una textarea e suggerisce le varie correzioni da apportare.
Category: Programmazione, Siti Web, Tecnologia | No Comments »
marzo 1st, 2009 by Giovanni Caputo
Canvas è una estensione dell’HTML standard che permette il rendering dinamico di immagini bitmap gestibili attraverso un linguaggio di scripting.
In questo articolo mostro una serie di librerie widget per lavorare con Javascript Canvas
Vi ricordo inoltre che è possibile iscriversi gratuitamente ai nostri feed: RSS feed.
John Resig : processo di visualizzazione in Javascript
Canvas Photo Experiment interfacccia simile a “photo table” di Microsoft Surface.
Canvas 3D JS Libary (C3DL) è una libreriache permette di scrivere facilemtne applicazioni 3D usando canvas 3D. Fornisce un insieme di classi matematiche, e altri oggetti 3D.
Pixastic è una libreria sperimentale che permette di sviluppare diverse operazioni sulle imaggini usando pochissimo javascript. Gli effetti supportati sono desaturazione/scala di grigi, flipping, brightness/contrast adjustment, hue/saturazione, emboss, blur e molti altri.
La libreria permette i creare uno slider di immagini in javascript.
Bevel.js permette di aggiungere bordi e cornici, eventualemnte sfumate alle proprie immagini. Usa un codice javascript non intrusivo e funziona tutti i browser.
Ben Joffe ha scritto un alibreria xhe permette di creare grafici 3D in javascript Ben Joffe web page.
ProtoChartè una nuova libreria opensource che usa Prototype e Canvas per creare grafici.
IECanvas è una implementazione con ActiveX delle API Canvas. Si basa sulla implementazione di Mozzilla s ulla libreria di rendering Cairo.
Firefox, Safari and Opera 9 supporta i canvas. ExplorerCanvas aggiunge le stesse funzionalità ad Internet Explorer.
Category: Open Source, Siti Web, Tecnologia, tutorial | 1 Comment »
gennaio 24th, 2009 by Giovanni Caputo
Qualche tempo fa ho consigliato di una estensione per firefox molto utile per i web designer e gli sviluppatori web. Si chiama firebug. Potete anche scaricarlo dal sito ufficiale: getfirebug.com
Una cosa che ho scoperto solo oggi è che questo plug-in può essere utilizzato anche su altri browser come Internet Explorer, Opera e Safari.
Infatti firebug dispone di una versione lite che ovviamente, però, non dispone di tutte le funzionalità che il plug-in per firefox permette.
Ci sono 2 modi per attivare firebug lite: includere un javscript esterno ad ogni pagina che si vuole controllare oppure utilizzare un bookmark.
Nel primo caso bisogna inserire il seguente codice nella pagina
<script type='text/javascript'
src='http://getfirebug.com/releases/lite/1.2/firebug-lite-compressed.js'></script>
altrimenti dovete trascinare il seguente link sulla barra dei bookmark : Firebug Lite.
Se si vuole utilizzare invece firebug offline, bisogna scaricare i codice sorgente, imporater i file firebug-lite-compressed.js o firebug-lite.js nella directory del proprio sito, trovare l’url del “firebug-lite.css”nel file javasript che si è importati e sostituire con l’indirizzo offline del file firebug-lite.css .Esempio:
<script language="javascript" type="text/javascript"
src="/path/to/firebug/firebug-lite.js"></script>
Per altre infromazioni e comandi utilizzabili visitate il sito ufficiale
Category: Programmazione, Siti Web, Tecnologia | 2 Comments »
gennaio 11th, 2009 by Giovanni Caputo
Una limitazione nell’inclusione dei fogli di stile css mediante l’utilizzo del tag html <link> consiste nel fatto che lo stesso debba essere incluso all’interno del tag <head> affinchè gli stili inclusi possano essere utilizzati dal browser.
Nel caso in cui si voglia includere un file css in un qualsiasi punto della pagina, ad esempio nel <body>, magari associando l’inclusione ad un determinato evento o ad una determinata condizione risulterebbe impossibile se non ci venisse in contro il framework Javascript : MooTools.
E’ possibile mediante questa classe includere anche file javascript a runtime, così come per i file css.
E’ necessario importare all’interno della pagina 2 file javascript:
- Il core dei mootools
- il more dei mootools contenente il plugin Asset
I 2 files sono disponibili qui (core) e qui (more).
<script src="http://fritzzz.altervista.org/bloggerContent/mootools/mootools-1.2.1-core-nc.js" type="text/javascript"></script> <script src="http://fritzzz.altervista.org/bloggerContent/mootools/mootools-1.2-more.js" type="text/javascript"></script>
Il passo successivo è quello di utilizzare all’interno della pagina il seguente codice:
// include un file css a runtime
var myCSS = new Asset.css("style.css");
// include un file javascript a runtime
var myJS = new Asset.javascript("jsdefinition.js");
Di seguito è presente il codice per poter gestire la stampa del javascript per la chiamata ai metodi dei mootools mediante una classe PHP.
class MooTools{
/**
* Metodo per recuperare la chiamata al metodo della classe Asset dei mootools per
* importare un file css a runtime (quindi non necessariamente nell’head della pagina)
*
* @param $cssFile : path al file css
* @return : stringa javaScritpt contenente la chiamata al metodo della clase
* Asset dei mootools
*/
public static function getAssetCss($cssFile){
// nel caso in cui non si voglia usare un nome univoco , è possibile decommentare questa riga
// ed eliminare la seguente
//return “var myCss = new Asset.css(‘”.$cssFile.”‘);”;
return “var myCss”.Random::string().” = new Asset.css(‘”.$cssFile.”‘);”;
}
/**
* Metodo per stampare la chiamata al metodo della classe Asset dei mootools per
* importare un file css a runtime (quindi non necessariamente nell’head della pagina)
*
* @param $cssFile : path al file css
*/
public static function printAssetCss($cssFile){
echo self::getAssetCss($cssFile);
}
/**
* Metodo per recuperare la chiamata al metodo della classe Asset dei mootools per
* importare un file js a runtime
*
* @param $cssFile : path al file js
* @return : stringa javaScritpt contenente la chiamata al metodo della clase
* Asset dei mootools
*/
public static function getAssetJs($jsFile){
// nel caso in cui non si voglia usare un nome univoco , è possibile decommentare questa riga
// ed eliminare la seguente
//return “var myJs = new Asset.javascript(‘”.$jsFile.”‘)”;
return “var myJs”.Random::string().” = new Asset.javascript(‘”.$jsFile.”‘)”;
}
/**
* Metodo per stampare la chiamata al metodo della classe Asset dei mootools per
* importare un file js a runtime
*
* @param $cssFile : path al file js
* @return : stringa javaScritpt contenente la chiamata al metodo della clase
* Asset dei mootools
*/
public static function printAssetJs($jsFile){
echo self::getAssetJs($jsFile);
}
}
Attenzione : nel codice si fà riferimento alla classe Random la cui implementazione è possibile recuperarla sul post Generazione valori random in php.
Sicuramente questo post sarà utile a coloro, come nel mio caso utilizzino un controller per la gestione centralizzata dell’inclusione di file js e file css.
Category: Siti Web, Tecnologia, tutorial | 1 Comment »
2007 / 2010
.Giovanni Caputo | Caputo's blog
