Caputo's blog

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

Testare il proprio sito sull’ iPhone

Gennaio 27th, 2009 by Giovanni Caputo

TestiPhone, permette di mostrare come viene visualizzato un sito su un iPhone. Utile per tutti i web master che vogliono ottimizzare il proprio codice.

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

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 »

Passi da seguire per la progettazione di un sitoweb

Gennaio 15th, 2009 by Giovanni Caputo

Antonio Lupetti ha scritto un articolo dettagliato in cui  spiega i vari passi e ragionamenti che portano alla creazione e progettazione di un sito o applicazione web che sia, con i controfiocchi.

Vi invito a leggere direttamente dal suo sito o a scaricare il pdf dello stesso.

Grazie Antonio, sei grande!

Category: Programmazione, Siti Web | No Comments »

Libro gratuito sul Web Design

Gennaio 12th, 2009 by Giovanni Caputo

Woork Handbook è un libro gratuito su  CSS, HTML, Ajax, programmazione web, Mootools, Scriptaculous e altri argomenti sul web design.

Download the Woork Handbook
Gratuito (Current Version 0.1)

Fonte: http://woork.blogspot.com/2009/01/woork-handbook.html

Category: Programmazione, Siti Web | No 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 »

Slider: plug-in per Jquery

Gennaio 9th, 2009 by Giovanni Caputo

Easy Slider è un plug-in per JQuery che permette di creare slider di testo o immagini orrizzontali o verticali in modo molto semplice.

Download easySlider.zip

Per creare lo slider basta

<div id="slider">
<ul>
<li>contenuto</li>
<li>contenuto</li>
<li>contenuto</li>
</ul>
</div>

ed inserire i seguenti comandi,tra i tag <head> ed </head>
<script type="text/javascript" src="/js/jquery.js"></script>
<script type="text/javascript" src="/js/easySlider.js"></script>

Per altre info : FONTE

Category: Curiosità, Programmazione, Siti Web, Tecnologia | 1 Comment »

Realizzare menu HTML e CSS online

Dicembre 29th, 2008 by Giovanni Caputo

MyCSSMenu è una applicazione web che permette di realizzare menu personalizzati senza la necessià di conoscere Css e HTML.

Si può scegliere tra i modelli predefiniti oppure personalizzare gli stili, i disegni, le immagini.

http://lh4.ggpht.com/_A71f44bjXuw/SVUD8u5Ai8I/AAAAAAAAESY/YjAHMKedVbA/mycssmenu_thumb%5B10%5D.jpg?imgmax=800

Category: Siti Web, Tecnologia | No Comments »

Effetto Blurry con i CSS

Dicembre 22nd, 2008 by Giovanni Caputo

body	 {
  background: url(images/bg-solid.jpg) no-repeat;
}

#page-wrap {
  background: url(images/bg-blurry.jpg) no-repeat fixed;
  width: 500px; margin: 40px auto;

}

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

Creare Layout per Siti Web

Dicembre 4th, 2008 by Giovanni Caputo

Drawter è un tool online in versione beta, che permette di creare al volo un layout per una pagina web ed ottenere il codice HTML e CSS.

Inoltre,  è possibile determinare altre caratteristiche come lo sfondo, il colore, attributi utilizzano i pannelli draggabili presenti sulla barra laterale.

In seguito potremo scaricare il codice di riferimento all’HTML usato e i fogli di stile CSS selezionando in alto il tasto “CODE”

Possiamo vedere un video su come utilizzare al meglio questo ottimo strumento online

Drawter può essere usato per creare al volo bozze di porgetti web senza dove mettere mano sul codice

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

CSS Sprites: tecnica per le immagini nelle pagine web

Novembre 28th, 2008 by Giovanni Caputo

La tecnica CSS Sprites consiste nell’utilizzare un unica immagine fisica realizzata tramite fusione di altre immagini, da utilizzare nelle proprie pagine web; in questo modo viene effettuata una singola richiesta HTTP al server per caricare l’immagine. Succesivamente viene mostrata solo parte dell’immagine tramite codice CSS attraverso  la proprietà background-position.

Utilizzano questo sistema anche google e youtube con le immagini seguenti:

Ecco alcune guide, link e tool interessanti:

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