Spesso e volentieri i blog tecnici, come questo, riportano spezzoni di codice per illustrare delle funzionalità di un software oppure come eseguire una certa operazione. Il codice risulta però decisamente brutto a vedersi, formattato con i <pre> o semplicemente con un font monospace come courier.
Sarebbe utile poter formattare il codice come viene visto in un [...]
Archivi della categoria ‘Web Design’
Formattare il codice nelle pagine web
21
Aug
2007
Script.aculo.us, esempio di Effect.Appear ed Effect.Fade
13
Jul
2007
La libreria Javascript Script.aculo.us permette di realizzare in modo estremamente semplice effetti grafici accattivanti. Vediamo ad esempio l’uso di Effect.Appear ed Effect.Fade per creare un sempice roll-over di immagini.
Creiamo un file XHTML contenente una lista ed alcune immagini. Il codice usato nell’esempio è
<html>
<head>
<title>Esempio scripaculous</title>
<script src=”scriptaculous/lib/prototype.js” type=”text/javascript”></script>
<script src=”scriptaculous/src/scriptaculous.js” type=”text/javascript”></script>
<script src=”scriptaculous/src/effects.js” type=”text/javascript”></script>
</head>
<body>
<ul>
<a href=”#” onclick=”new Effect.Fade ( [...]
Che cos’è Script.aculo.us
03
Jul
2007
Script.aculo.us (Scriptaculous) è una libreria Javascript che permette di estendere le funzionalità della user interface di un sito web, come illustrate nel seguente sito.
Essa è estende Prototype, un’altra famosa libreria Javascript.
Come funziona Script.aculo.us?
Scriptaculous si installa copiando alcuni files all’interno di una cartella del server, ad esempio js/, ed importandoli nel file xhtml con le istruzioni
<script [...]
Css e pulsanti di submit form
25
Jun
2007
Come fare in modo che un pulsante di submit form abbia uno stile diverso da quello di default?
Possiamo utilizzare un elemento button anzichè input, usando poi un css come
#registrazione form button {
cursor: pointer;
background: transparent url(images/button_0.gif) no-repeat center center;
}
#registrazione form button:hover {
background: transparent url(images/button_1.gif) no-repeat center center;
}
In questo modo il pulsante avrà una immagine predefinita e [...]
Due web-tools per il web design
22
Jun
2007
Generare box dagli angoli arrotondati e creare pulsanti attraenti: ecco a cosa servono i due siti che vi propongo oggi: http://www.roundedcornr.com/ pemette di creare in pochi istanti un box dagli angoli arrotondati, con tanto di immagini generate on-the-fly, CSS e XHTML di esempio.
Glassy Buttons invece crea dei pulsanti graficamente molto attraenti basandosi sui dati inseriti. [...]
