martedì 29 gennaio 2008

Generatore di loading gif in Ajax

0 commenti

Ho trovato interessante il sito www.ajaxload.info, che dà ad ogni visitatore, senza obbligo di registrazione od altro, la possibilità di creare in pochi istanti una piccola gif animata, da usare come loading in svariate applicazioni.

E' possibile scegliere il disegno e i colori, e le immagini proposte di default sono veramente ben fatte.
Leggi tutto...

Coordinate per Google Maps API

3 commenti
Mi sono cimentata proprio nei giorni scorsi con le API Google Maps, poichè era mia intenzione inserire una mappa di Google nel mio sito.

Ho seguito la guida ufficiale, e per ricavare le coordinate suggerivano di cercare l'indirizzo desiderato su maps.google.it, cliccare su "Collegamento a questa pagina", copiare quindi il codice per l'iframe, e ricavarsi così le coordinate, associate al parametro ll.
Io ci ho provato, ma le coordinate non erano per nulla corrette. La mappa era "scentrata" di qualche centinaio di metri, cosa assolutamente non accettabile.

Ho trovato allora questo interessante sito, www.addressfix.com, che fornisce con grande precisione le coordinate da usare, e in questo modo ho risolto il problema!

Ve lo consiglio!
Leggi tutto...

lunedì 7 gennaio 2008

FCKeditor: guida all'installazione e all'uso

26 commenti
Oggi vi parlo di FCKeditor, un ottimo HTML editor da integrare ai nostri form online.

FCKeditor infatti non è un semplice Blocco Note per scrivere il nostro codice in locale, ma un tool da installare nel nostro sito web per permettere agli utenti, o a noi stessi, di scrivere del testo personalizzato, automaticamente tradotto dall'editor in codice HTML completamente validabile.

In questa pagina potete vedere un esempio di come apparirà l'editor nel vostro sito: http://www.fckeditor.net/demo. Naturalmente l'aspetto della barra degli strumenti è completamente personalizzabile. Si possono scegliere tre stili già pronti, oppure se avete la pazienza di crearvi da soli i vari pulsanti, potete addirittura usarne di personalizzati.

COME INSTALLARLO NEL VOSTRO SITO - INTEGRAZIONE CON IL PHP

  • Innanzitutto scaricate l'ultima versione disponibile dall'area download. A questo punto scompattate lo zip in una cartella del vostro sito.
  • Prendete la pagina .php in cui volete inserire l'editor, e aggiungete, a inizio pagina, il seguente codice (naturalmente il percorso è da modificare a seconda di dove avete inserito la cartella fckeditor):

<?php
include_once("fckeditor/fckeditor.php") ;
?>
  • A questo punto supponiamo di voler utilizzare l'editor all'interno di un form. Solo in questo modo infatti potremo recuperare e riutilizzare il codice HTML prodotto dallo stesso. Nella pagina dovremo scrivere:


<?php
include_once("fckeditor/fckeditor.php") ;
?>
<html>
<head>
<title>FCKeditor - Sample</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
</head>

<body>
<form action="send.php" method="post">
<?php
$oFCKeditor = new FCKeditor('testo') ;
$oFCKeditor->BasePath = '/fckeditor/' ;
$oFCKeditor->Value = 'Inserisci qui il testo';
$oFCKeditor->Create() ;
?>
<br>
<input type="submit" value="Submit">
</form>
</body>
</html>




  • Così facendo potremo recuperare, nella pagina send.php, il codice prodotto, che è contenuto nella variabile $_POST['testo'].

COME MODIFICARE L'ASPETTO DELLA BARRA DEGLI STRUMENTI

Non si tratta di una modifica di immediata comprensione, ma vedrò di essere il più chiara possibile :)
  • Aprite il file fckconfig.js, che trovate all'interno della cartella fckeditor.
  • Cercate la riga FCKConfig.SkinPath = FCKConfig.BasePath + 'skins/default/' ; .
  • Tra gli stili presenti, oltre a "default", quello indicato nella riga precedente, potete scegliere "silver" o "office2003". E' sufficiente sostituire la parola "default" con una di queste due per avere subito un aspetto diverso. Gli stili sono contenuti all'interno della cartella fckeditor/editor/skins/.
  • Sempre nel file fckeditor.js trovate molti altri settaggi. Dal nome della variabile dovreste capire automaticamente di cosa si tratta :)
  • Se vogliamo creare la nostra personale barra degli strumenti senza andare a modificare quelle già presenti, copiamo la barra di strumenti di default:FCKConfig.ToolbarSets["Default"] = [.......]; e rinominiamola a nostro piacimento (es. FCKConfig.ToolbarSets["Miosito"] = [.......];). Al suo interno lasciamo tutte le voci che ci interessano, e cancelliamo quelle che non vogliamo far apparire, avendo cura di cancellare anche gli apici ed eventuali virgole che le delimitano.
  • Sempre nello stesso file possiamo cambiare eventualmente i colori disponibili, i font e molto altro.
  • Apriamo ora il file fckeditor.php. Qui possiamo cambiare l'altezza e la larghezza dell'editor, ma soprattutto possiamo dire al nostro editor di usare la nostra toolbar, modificando la riga $this->ToolbarSet = 'Default' ; in questo modo $this->ToolbarSet = 'Miosito' ;
  • Nella cartella fckeditor/editor/css troviamo infine i css che determinano l'aspetto del nostro editor (fck_internal.css) e i css che determinano invece l'aspetto degli stili che possiamo applicare al testo creato con il nostro editor (fck_editorarea.css).

ALTRE INFORMAZIONI

Il LAU gli dedica questo interessante articolo: http://lau.csi.it/realizzare/accessibilita/linguaggi_programmazione/FCKEditor/documentazione.shtml

E questa è la guida completa per l'integrazione con il PHP:
http://docs.fckeditor.net/FCKeditor_2.x/Developers_Guide/Integration/PHP
Leggi tutto...

Free Vector Downloads

0 commenti

Ecco il sito che aspettavo!
Qui trovate un elenco di numerose risorse vettoriali free online! Veramente molto utile e interessante!

http://tutorialblog.org/free-vector-downloads/
Leggi tutto...

Photoshop: Raccolta Tutorial

0 commenti
Vi segnali di seguito alcuni siti pieni zeppi di tutorial per Photoshop!

http://www.911tutorials.com/
http://www.graphics-world.com/
http://www.cgtutorials.com/
Leggi tutto...

Amazing Sounds: collezione di file WAV

0 commenti
Vi serve qualche file WAV da inserire nel vostro programma o nelle vostre animazioni? Questo sito spagnolo ce ne mette a disposizione alcuni di veramente interessanti:

http://amazingsounds.iespana.es/en/
Leggi tutto...

Wallpaper Fantasy

0 commenti

Ecco una bella collezione di wallpaper in stile Fantasy per il vostro desktop:

http://www.satyrnet.it/fantasy/wallpaper.htm
Leggi tutto...

Rilassarsi davanti al monitor

0 commenti
Il vostro ufficio non è altro che un cubo di cemento in mezzo all'asfalto? La vostra collega non fa altro che parlare al telefono con le amiche?
Ecco un'ottima soluzione, anzi più di una: ricreate nel vostro pc un mondo immerso nei colori e nei suoni della natura. Come? Semplice, esistono diversi software allo scopo.

Qui ne trovate un breve ma interessante elenco: http://www.surfpack.com/software/nature/
Leggi tutto...

Raccolta di Gif Animate

1 commenti

Siete gli ultimi irriducibili che ancora inseriscono le gif animate nel proprio sito? O semplicemente cercate qualche gif per abbellire il vostro messaggio di posta elettronica?
Questo sito si spaccia come "the Internet's original and largest collection of free animations, animated GIF and clip art", quindi avete di che sbizzarrirvi, direi!

Link: http://www.gifanimations.com/action/MenuSelection/1/23
Leggi tutto...

Screensavers mania!

0 commenti
Volete dare un tocco in più al vostro screensaver? Che ne dite di una bella scenetta natalizia? No? Meglio delle montagne innevate in dissolvenza? Scegliete voi, tanto qui è tutto free!

Screensaver per tutti i gusti su http://www.scenicreflections.com/, alcuni veramente molto gradevoli.
Leggi tutto...

Abbelliamo il nostro desktop

0 commenti
Ecco un sito dove anche l'occhio più esigente troverà sicuramente l'immagine che si adatta alla perfezione alla scrivania del proprio pc: http://thundercloud.net/wallpaper/

Qui troverete una collezione pressochè infinita di immagini da usare come sfondi per il vostro desktop.
Leggi tutto...

Photoshop: Pennelli

0 commenti

Ecco un'altra raccolta di innumerevoli link a pennelli per Photoshop, scaricabili gratuitamente (quasi sempre!) dalla rete: http://www.squidoo.com/photoshop_brushes
Leggi tutto...

FlashKit: Il sito su Flash per eccellenza

0 commenti
Un piccolo promemoria per i più distratti.
Vi ricordo che nel fantastico sito www.flashkit.com potrete trovare tutto ma proprio tutto ciò che vi serve per i vostri lavori in Flash.

Suoni, effetti, movie già pronti da usare, tutorial, e un forum vivo e attivo!
Leggi tutto...

Sfondi dinamici per le tue pagine web con javascript

1 commenti
Anche se l'uso di Javascript per ottenere effetti particolari sulle vostre pagine web non è più molto in voga, vi propongo ugualmente questa raccolta di script del sito www.asbafo.net.
Gli script, scaricabili gratuitamente, permettono di dare un tocco originale alle vostre pagine, magari in occasione di eventi particolari.
Potrete far piovere, nevicare, far scorrere le nuvole, e tutto ciò con poche e leggere righe di codice.

Link: http://www.asbafo.net/ja_sfondi/sfondi_01.html
Leggi tutto...

Photoshop: Pennelli con fiori e foglie

0 commenti
Vi consiglio questi bei pennelli per Photoshop, utili in molte occasioni! Molto carini anche se ho notato qualche imprecisione su alcuni. Controllateli sempre molto bene prima di pubblicare o stampare il vostro lavoro!

Link: http://designfruit.com/jasongaylor/blog/?p=37
Leggi tutto...

Photoshop: Realizziamo una mappa antica

0 commenti
Ecco un altro tutorial che può sempre tornare utile. In questo articolo Richard Ramblings ci spiega come realizzare, grazie a Photoshop, un effetto carta invecchiata, utile per realizzare mappe antiche o illustrazioni fantasy.
Link: http://www.richardsramblings.com/?p=389

Variante sul tema:
http://www.dwphotoshop.com/photoshop/antique_paper.php
Leggi tutto...

Photoshop: Creare erba molto realistica

0 commenti
Questo riepilogo non è disponibile. Fai clic qui per visualizzare il post.
Leggi tutto...

Grafica Web 2.0 senza più segreti

0 commenti
Ecco una eccezionale raccolta di risorse web 2.0 pensate per Photoshop. Una vera manna per chi cerca ispirazione per un design moderno e accattivante.
Tutorial, raccolte di loghi, risorse, c'è proprio un po' di tutto.
Peccato che il sito sia in tedesco, ma per fortuna non servono parole: le immagini si spiegano da sole!!!

Link: http://www.drweb.de/weblog/weblog/?p=780
Leggi tutto...

Illustrator: Creare un bottone con effetto vetro

0 commenti
Questo semplice tutorial spiega nel dettaglio come realizzare un bel bottone vettoriale in perfetto stile Mac X!

Link: http://www.bittbox.com/illustrator/
Leggi tutto...

Font gratuiti da scaricare

1 commenti
Di seguito alcuni link a siti che offrono la possibilità di scaricare font gratuiti:

http://www.dafont.com
http://www.sofontes.com.br/

Se ne conoscete altri, segnalateli pure! Li inserirò immediatamente :)
Leggi tutto...

Photoshop: Come creare un pennello personalizzato

0 commenti
Questo tutorial spiega come realizzare un pennello personalizzato in stile grunge, ma la stessa tecnica può essere riutilizzata per realizzare qualsiasi altro tipo di pennello.
Inoltre l'articolo contiene diversi link a risorse grunge online.

Link: http://www.pixelzone.it/brushes.html
Leggi tutto...

Statistiche per il tuo sito

0 commenti
Mi permetto di segnalarvi questo sito, che offre la possibilità di inserire nel proprio sito web semplice codice, che visualizzerà un riquadro contenente tutte le informazioni sul traffico, sul page rank e molto altro.


Il sito non richiede la registrazione, ma solo l'indicazione dell'url da monitorare.
Leggi tutto...

CSS: Simulare i frame

4 commenti
Per un sito che sto realizzando, si è presentata la necessità di creare una struttura con una parte fissa (il menu), e una parte "scrollabile" (il contenuto), senza ricorrere all'uso dei frame (in questo caso indubbiamente utili!). Mi è venuto in aiuto questo articolo, realizzato dal L. A. U. (Laboratorio di Accessibilità e User Innovation), che spiega come sfruttare i vantaggi dei frame senza utilizzare un frameset, ovvero creando, grazie alle istruzioni CSS, dei div "fissi" sulla pagina, che sembrino appunto frame.


IL PROBLEMA
Avere un div fisso sulla pagina (div id="menu"), con una soluzione funzionante su tutti i browser e utilizzando solo i CSS.


LA SOLUZIONE
1^. Creiamo innanzitutto la struttura html:
<body>
<div id="menu">
voce 1
voce 2
voce 3
</div>
<div id="content">
...il nostro contenuto...
</div>
</body>

2^. Ora creiamo il css.
Per i browser moderni (Firefox 2+, Opera 9+, Safari 3+, IE 7+) sarebbe sufficiente usare la proprietà position:fixed;, che risolverebbe completamente tutti i nostri problemi.
Purtroppo, però, gli altri browser (ad esempio IE 6 e precedenti) non recepiscono correttamente questa istruzione, ma la interpretano come position:static;, che non produce alcun risultato sulla nostra pagina.

Dobbiamo quindi ricorrere ad un piccolo trucco.
Diamo un posizionamento assoluto al nostro div fisso, e poi rendiamo l'istruzione fixed interpretabile solo per i browser moderni:
#menu { position:absolute; top:0; left:0; height:100%; width:250px; background-color:#00FF00;}
body>#left {
position: fixed;
}

E diamo al nostro div di contenuto un padding pari alla larghezza del menu:
#content {
padding-left:250px;
width:500px;
background:#0000FF;
}

Questa soluzione funziona correttamente sui browser moderni, ma non su IE 6, che visualizza il div con posizionamento assoluto. Certo è meglio di niente, ma non è sufficiente.
Dobbiamo quindi inserire un commento condizionale, con del codice visibile solo da IE6 e precedenti, e forzare il browser ad operare in Quirksmode.

Il commento condizionale sarà il seguente:
<!--[if lte IE 6]>
<style type="text/css">
body
{
overflow-y: hidden;
}
#content
{
height: 100%;
width: 100%;
overflow: auto;
}
</style>
<![endif]-->

Il commento condizionale non fa altro che forzare l'altezza del nostro div di contenuto al 100% della finestra del browser, e quindi mostrare la barra di scorrimento verticale per il contenuto eccedente tale altezza.

Per forzare il browser ad operare in modalità Quirksmode, invece, è sufficiente inserire un commento prima della dichiarazione del DOCTYPE. Questa soluzione presenta però un inconveniente, in quanto inserendo un commento, forziamo anche IE7 ad operare in Quirksmode, quando in realtà il browser già funziona correttamente.
Ci sono quindi due possibilità: estendiamo il commento condizionale a IE7 (<!--[if lte IE 7]>), oppure inseriamo prima del DOCTYPE la dichiarazione XML (<?xml version="1.0" encoding="utf-8"?>). Attenzione, però. Utilizzando la dichiarazione in un file .php, questo smette di funzionare (<? è anche il tag di apertura del php). Consiglio quindi la prima soluzione.

Il nostro codice finale:
<!-- comment -->
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<style type="text/css">
#menu { position:absolute; top:0; left:0; height:100%; width:250px; background-color:#00FF00;}
body>#left {
position: fixed;
}
#content {
padding-left:250px;
width:500px;
background:#0000FF;
}
</style>
<!--[if lte IE 7]>
<style type="text/css">
body
{
overflow-y: hidden;
}
#content
{
height: 100%;
width: 100%;
overflow: auto;
}
</style>
<![endif]-->
</head>
<body>
<div id="menu">
voce 1
voce 2
voce 3
</div>
<div id="content">
...il nostro contenuto...
</div>
</body>
</html>



Ritengo che questo sito sia fonte di grande ispirazione per chi vuole creare siti con contenuti pienamente accessibili, e voglia rispettare in pieno quanto previsto dalla legislazione in materia.
Leggi tutto...

[PHP - Ajax]: Validazione di un form con mootools

0 commenti
Questo articolo spiega come effettuare una verifica sui dati inseriti ed inviati tramite form grazie alla famosa libreria Mootools (usata soprattutto in combinazione con l'altrettanto famosa Slimbox).
Un grosso vantaggio di questa operazione è che la pagina non viene ricaricata, con un conseguente risparmio di tempo!

L'articolo: http://www.slacko.org/2007/09/07/form-con-validazione-in-ajax-con-mootools-13/
L'esempio: http://www.slacko.org/ajaxform/index.php
Leggi tutto...

[PHP - Ajax]: Realizzare una chat senza database

3 commenti
Ecco un altro interessante articolo su come realizzare una chat in PHP con il supporto di Ajax, stavolta senza database, ma semplicemente con un file di testo.
L'esempio della chat: http://www.slacko.org/chat/index.html
L'articolo completo: http://www.slacko.org/2006/12/08/ajax-chat/

Se volete usare questo tutorial, vi consiglio di aggiungere al messaggio inviato in chat sia il nickname di chi scrive, sia l'ora e la data in cui è stato scritto il messaggio, in modo da rendere la chat più chiara e comprensibile.
Leggi tutto...

[PHP - Ajax]: Realizzare una chat

0 commenti
Questo articolo spiega come realizzare in modo semplice e veloce una chat in php con il supporto di ajax.

http://www.sastgroup.com/leggi-tutorial.php
Leggi tutto...

Button o input?

0 commenti
Un interessante articolo di Aaron Gustafson sull'utilizzo del tag
Leggi tutto...

CSSplay: il migliore sito sui CSS

0 commenti
Mi permetto di additare il sito CSSplay come il miglior sito sui CSS presente nel web.

Al suo interno troviamo una infinità di tutorial ed esempi pratici riguardanti menu, layout, gallery, riquadri e molto altro! Il tutto corredato di esempi funzionanti!
Il codice è pulito, comprensibile, semplice e completamente validabile.

Veramente un ottimo lavoro da parte di Stuart Nicholls, web designer per passione.
Leggi tutto...

Photoshop: Janee's Tutorials

0 commenti
Questo sito mi ha colpito perchè contiene alcuni dei tutorial più utili ed interessanti per Photoshop che io abbia mai letto.
Alcuni esempi? Effetto carta straccia, effetto angolo ricurvo, effetto gocce di pioggia, effetto disegno a mano, effetto porcellana, effetto post-it... Veramente tutti molto belli e accattivanti... Naturalmente in inglese!

http://myjanee.home.insightbb.com/tutorials.htm
Leggi tutto...

Masterizzare DVD

0 commenti
Ecco una semplice guida per comprimere e masterizzare un DVD video:

http://www.divxdoor.it/index.aspx?page=guide\guidenero\nerodvd\nerodvd.html
Leggi tutto...

Recuperare le password salvate in Outlook Express

3 commenti
Vi è mai capitato di dimenticare la password di un vostro account di posta? Però magari quella stessa password era stata a suo tempo memorizzata su Outlook Express? E ora temete un crash del sistema, perchè in quel caso perdereste irrimediabilmente la possibilità di leggere la vostra posta, dato che non è possibile vedere la password memorizzata su Outlook, in quanto criptata?!

Niente paura, la soluzione c'è, ed è molto semplice.
E' sufficiente esportare i vostri account di posta elettronica con l'apposito comando di Outlook Express. Questi verranno salvati sottoforma di file .iaf .

Fatto? Bene. Ora andate su questo sito:
http://www.motobit.com/util/iaf-password-recovery.asp
E' sufficiente caricare il vostro file .iaf, e il sistema decripterà la vostra password.

Non vi dò garanzie sulla "sicurezza" del sistema, in quanto non so chi veda le vostre password, perciò vi consiglio di cambiare password non appena recuperata quella perduta, per poter dormire sonni tranquilli!
Leggi tutto...