Caputo's blog

Informatica, tecnologia, programmazione, fai da te, papercraft e papertoy

Debuggare e testare codice per il web con Firebugs

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 »

Creare animazioni con jQuery e CSS

maggio 2nd, 2009 by Giovanni Caputo

demo.
Flashy intro with jQuery animation

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 &gt; li &gt; 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 &gt; li &gt; 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 »

Effetti AJAX

maggio 2nd, 2009 by Giovanni Caputo

1. Image Menu

2. ImageFlow

3. Instant.js

4. Glassbox

5. Search Field CSS/JS

6. Protoload

7. jwysiwyg

8. jquery.biggerlink 2

9. jQuery Tag Suggestion

10. Facebox

11. Humanized Messages

12. LightWindow v2.0

13. Unobtrusive Table Actions

14. jQuery checkbox

15. iCarousel

16. MochaUI

17. jTip

18.Uni-Form

19. Validation Hints

20. Control Tabs

Category: Programmazione, Siti Web, Tecnologia, tutorial | No Comments »

Script Ajax

aprile 30th, 2009 by Giovanni Caputo

AJAX Rating Stars

AJAX Star Rating
Site | Demo

FancyZoom 1.1

Fancy Zoom

SIte | Demo

AJAX Pagination v1.2.2

AJAX Pagination

Site | Demo

AJAX Tab Content v2.2

AJAX Tab Content

Site | Demo

Coda Popup Bubbles

Coda Popup Bubbles

Site | Demo

Sunday Morning

Sunday Morning

Site | Demo

TimeLine

Timeline

Site | Demo

Pie & Donut Charts

Pie & Donut Charts

Site | Demo

Read the rest of this entry »

Category: programmi, Siti Web | No Comments »

Script per ritagliare immagini

aprile 29th, 2009 by Giovanni Caputo

  1. cfImageCropper -Scritto in Coldfusion.
  2. jsCropper – Basato su  Prototype e script.aculo.us.
  3. mooImageCrop – basato su mootools.
  4. Image Crop – Scritto in Javascript e php ma richiede l’installazione di ImageMagick.
  5. Ajax Image Editor – Script di editing di immagini che permette taglio, ridimensionamento e rotazione.
  6. Flash Image Crop – Scritto in Actionscript e PHP.
  7. Flash Based Cropping tool – Anche questo scritto in Actionscript e PHP.
  8. MooCrop Usa mootools e permette di modificare il colore della maschera.

Category: Open Source, Programmazione, Siti Web, Tecnologia, tutorial | No Comments »

Tutorial PHP + jQuery

aprile 11th, 2009 by Giovanni Caputo

Vediamo alcuni progetti con Demo che utilizzano PHP e jQuery.

Directory Tree

Check out the Demo Here

Pagina di amministrazione di foto

Commenti sincroni con jquery, PHP e JSON

Check out the Demo Here

Ajax login

Check out the Demo Here

TO DO list

Check out the Demo Here

Modulo newsletter

Check out the Demo Here

Leggere dati da un database e convertirli in XML per permettere la lettura da parte di jQuery

Check out the Demo Here

Validare un orm sia client che server side

Check out the Demo Here

Realizzare uno ShoutBox

Check out the Demo Here

Realizzare una progressBar

Check out the Demo Here

Campi con autocompletamento

Ricerca Apple – style

Check out the Demo Here

Upload e crop di immagini

Check out the Demo Here

Fliker scroll

Check out the Demo Here

Sistema di votazione

Check out the Demo Here

Mail con feedback SMTP

Check out the Demo Here

Ricaricare un elemento ad intervalli di tempo regolare

Check out the Demo Here

Image Replacement

Check out examples here

Read the rest of this entry »

Category: Programmazione, Siti Web, Tecnologia | No Comments »

Web Spell Checker:correttore ortografico PHP

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.

http://spellerpages.sourceforge.net/index.html

Category: Programmazione, Siti Web, Tecnologia | No Comments »

Librerie ed esempi per lavorare con Canvas

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.

Processing.js

http://ejohn.org/apps/processing.js/screens/Picture%2014.pngJohn Resig : processo di visualizzazione in Javascript

Canvas Photo Experiment

Canvas Photo Experiment interfacccia simile a “photo table” di Microsoft Surface.

Canvas 3D JS Libary

http://www.c3dl.org/wp-content/themes/c3dl4/images/headers/header.pngCanvas 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 Image Processing Library

Pixastic logoPixastic è 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.

Coverflow in Javascript

La libreria permette i creare uno slider di immagini in javascript.

Bevel.js

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 examples


Ben Joffe ha scritto un alibreria xhe permette di creare grafici 3D in javascript Ben Joffe web page.

ProtoChart

ProtoChartè una nuova libreria opensource che usa Prototype e Canvas per creare grafici.

IECanvas

IECanvas è una implementazione con  ActiveX delle API Canvas. Si basa sulla implementazione di Mozzilla s ulla libreria di rendering Cairo.

explorercanvas – Drawing canvas for Internet Explorer

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 »

Firebugs su Internet Explorer, Opera e Safari

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 »

Importare un file css o js all’interno del body

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.

Read the rest of this entry »

Category: Siti Web, Tecnologia, tutorial | 1 Comment »