Ecco come ho conciato la mia pagina di facebook:

Per ottenere un effetto del genere le istruzioni da seguire sono poche è molto semplici, non bisogna neanche avere grandi competenze grafiche per ottenere grandi risultati:

[ad code=4 align=center]

1) Prendi una immagine di dimensioni massime 180×540 pixel e usala per l’immagine a sinistra, caricala come immagine del profilo

2) Prendi una immagine da 485×68 pixel e tagliala in 5 parti perfettamente uguali, da 97×68 pixel (in pratica, i 4 tagli andranno fatti a 97-194-291-388 pixel): queste saranno le 5 immagini che stanno in alto, al centro del tuo profilo.

3) Vai su Foto->e quindi carica le 5 immagini.

4) Tagga la 5 immagini col tuo nome. ATTENZIONE: L’immagine che vuoi che appaia per prima (=quella più a sinistra) va taggata per ultima.

5) E’ tutto! Ovviamente l’immagine di sinistra dovrebbe in qualche modo essere “collegata” alle 5 centrali per rendere la cosa più gradevole… qui trovi qualche “esempio creativo“: http://reface.me/hacks/new-facebook-profile-hack/

Allora piaciuto il trucchetto? Aspetto i vostri lavori con ansia

Riccardo Tartaglia

Lo scopo di questa nuova rubrica è quella di segnalare i siti web, i font, foto e video più creativi e ingegnosi presenti in rete, logicamente per dare una fonte di ispirazione a web designer e web developer.

Se avete dei siti o altre creazioni da segnalare potete farlo alla mia mail (tartaglia.riccardo@gmail.com)

Sito di ispirazione

Il sito che stavolta ho scelto per voi è il seguente: BMW Cinetique

[ad code=4 align=center]

Ottima creazione della BMW che punta su un sito completamente in 3D realizzato in Flash per il lancio della nuova BMW serie 5.

Il sito presenta un’innovativa piattaforma di modellazione che permette appunto ai visitatori di creare e inviare modelli, oltre a presentare una vasta fotogallery. Insomma un sito da osservare attentamente per tutti gli appassionati di auto e non, ottimo trampolino di lancio per una buona campagna di marketing.

Google Font Directory è un nuovo progetto in beta di Google che permette di usare Font non inclusi nella lista dei Font-Family.

Come molti sviluppatori sapranno, durante la progettazione di un sito web, i font che dovranno essere indicizzati in un secondo momento devono essere di tipo testo e inclusi nella lista dei Font-Family.

Google Font Directory è una directory di Font esclusivi, che tramite un codice HTML+CSS, avremo la possibilità di usarli senza preoccuparci di verificare se il font sia della famiglia Font-Family.

Includere un font all’interno della nostra pagina risulterà semplicissimo infatti basta includere un semplice css in questo modo:

<link href='http://fonts.googleapis.com/css?family=Nome+Font' rel='stylesheet' type='text/css'>

Logicamente essendo ancora in beta i font disponibili risultano ancora limitati, ma comunque resta un ottima risorsa per l’utilizzo di font particolari, in attesa logicamente dei nuovi standard CSS3 che permetteranno l’utilizzo di qualsiasi tipo di font.

Alla prossima

Riccardo Tartaglia

Infatti oggi alle ore 17:00 si terra la manifestazione di presentazione per il lancio della nuova CS5.

La Creative Suite di Adobe è uno degli strumenti più utilizzati nel mondo dei professionisti e non solo: la storica acquisizione del colosso Macromedia nel 2005 ha consentito alla nota società americana di poter arricchire la propria offerta prodotto, andando così ad affiancare al già noto Photoshop, software del calibro di Dreamweaver.

[ad code=4 align=center]

L’Adobe per favorire la massima visibilità dell’evento ha predisposto una diretta web per la manifestazione, che si terra intorno alle 17:00 ora italiana. Andate a questa pagina per assistere all’evento.

Alla prossima

Riccardo Tartaglia

Il layout si presenta con una larghezza fissa di 960px e  a lunghezza variabile, infatti la lunghezza di ogni colonna si adatta perfettamente al contenuto in esse presente, tutto logicamente utilizzando div e css.

Logicamente questo è solo la struttura di base, può essere notevolmente migliorata a vostro piacimento, aggiungendo le regole css e le immagini che più vi soddisfano.

Ecco l’esempio on-line: layout a tre colonne

Ecco invece il link per scaricare il codice: download layout a 3 colonne

Si ringrazia Eric Meyer per il reset tool CSS

Alla prossima

Riccardo Tartaglia

Infatti è possibile cambire il tema, aggiungere plug-in e altre funzionalità con un semplice click.
Ecco il link alla home degli add-on che il team di mozilla ci mette a disposizione logicamente gratuitamente: https://addons.mozilla.org/it/firefox/

Permettetemi di consigliarvi l’installazione di alcuni add-on che possono risultare molto utili per lo sviluppo web:

• Firebug: Tool che permette la visualizzazione e la modifica del codice sorgente della pagina compreso i CSS e gli JavaScript permettendo cosi un pieno controllo della pagina
• Colorzilla: Tool che permette di aggiungere un contagoccie al proprio Firefox riuscendo cosi a prelevare l’esadecimale del colore selezionato all’interno della pagina
• Web Developer: Aggiunge una toolbar che permette di gestire cache, abilitazione javascript, ridimensionamento immagini e molto altro
• MeasureIt: Una righello per poter misurare tutti gli elementi del DOM