FlooidArt | Blog di Andrea Turri - web designer freelancer | html - css - asp.net - web 2.0 - jQuery - seo - iPhone

Lightbox_me: Semplice effetto lightbox per designers

Andrea Turri — Mon, 05 Jul 2010 14:34:44 +0000

Solitamente Lightbox viene utilizzato per gallerie di immagini o per rendere più visibile un video o uno spot pubblicitario, ma altre volte di sicuro ci sarà venuto in mente di voler realizzare anche altre cose sfruttando la bellezza di Lightbox, come ad esempio un form dei contatti, una login o semplicemente dare un highlight particolare ad una news in prima pagina…
Lightbox_me è sicuramente un tool essenziale per tutti i programmatori jQuery. Permette di prendere un intero elemento DOM, qualsiasi a nostra scelta, e lo raggruppa in un oggetto jQuery a cui poi darà l’effetto Lightbox. L’ho personalmente utilizzato e l’ho trovato fantastico, inoltre lavora perfettamente anche con IE6, quindi non dobbiamo pensare a dover fixare nulla o a dover trovare seconde alternative.

Demo: http://buckwilson.me/lightboxme/

Stress Test del tuo sito web

Andrea Turri — Sat, 26 Jun 2010 10:51:20 +0000

Una bella domanda da farsi quando rilasciamo progetti web di una certa misura, come e-commerce o siti interattivi e complessi è: Riesce il nostro sito web a sopportare lo stress da sovraccaricamento?
Load Impact è un servizio web che permette di farci capire proprio questo.
Load Impact simula traffico di utenze, ad esempio: ci fa vedere come risponde il nostro sito web se 50 utenti allo stesso momento caricassero la home page. Mentre completa la simulazione ci fa vedere in quanti secondi la nostra pagina viene caricata e permette anche di capire se il problema è lato server o lato client.

E’ facilissimo da usare e da capire, è gratuito e non richiede alcun tipo di installazione.

Provalo ora: http://loadimpact.com/

JavaScript Slider: Componente open source

Andrea Turri — Fri, 25 Jun 2010 10:15:18 +0000

Dragdealer è un componente drag-based Open Source in Javascript che racchiude numerose soluzioni front-end per la creazione, appunto, di slide. Ha diversi modi di interazione, normale drag con il mouse, si può tirare e farlo scivolare da solo, farlo procedere velocemente con il doppio click e funziona anche su dispositivi mobile e touch-screen come iPhone.

Il file è leggerissimo, appena 12Kb e inoltre è molto semplice da personalizzare tramite CSS.
Sicuramente da usare nei nostri progetti.

Demo: http://code.ovidiu.ch/dragdealer/

Soundation Studio: creare musica sul web

Andrea Turri — Thu, 24 Jun 2010 09:39:17 +0000

Ti piacerebbe creare della musica sul web, senza dover scaricare pesantissime applicazioni? Soundation Studio è allora quello che fa per te!! Non importa se sei un principiante o un professionista, Soundation Studio è semplicissimo da usare e soddisferà tutte le tue esigenze.
Contiene un potente sequencer con 11 effetti in tempo reale, 3 sintetizzatori, una drum machine e un sound shop.
Inoltre ha una libreria di suoni pre compilati con oltre 400 loop, insomma è molto divertente, io l’ho provato e mi è piaciuto molto… l’unica nota stonata è che non è possibile condividere con altri quello che realizzi in quanto tutti i suoni sono concessi in licenza solamente per le tue produzioni online.

Open Source Media Player in HTML5 e jQuery

Andrea Turri — Wed, 23 Jun 2010 14:32:00 +0000

La piattaforma mediafront è una soluzione front-end open source (GPLv3) per il web. Attraverso la sua integrazione con i più popolari cms è diventato sempre più innovativo e con un’interfaccia grafica intuitiva che permette ad ogni web designer di personalizzare l’intera media view senza dover scrivere alcun codice.
Oltre alla mediafront in aggiunta c’è OSM (Open Standard Media Player) Player. Anche quest’ultimo è open source (GPL) ed è stato costruito per essere compatibile con qualsiasi tipo di supporto web, compresi html5, youTube e Vimeo.

Per funzionare richiede solamente il framework jQuery.
Demo: http://www.mediafront.org/project/osmplayer

Photoshop: Effetti sui testi

Andrea Turri — Wed, 23 Jun 2010 09:19:02 +0000

Creare effetti su fotografie e testi è sempre divertente con Photoshop, ma trovare dei buoni tutorial che ci guidino passo passo nella realizzazione di questi è difficile, molti sono scritti male, altri sorvolano alcuni punti e la voglia ci passa.
Qui ho elencato alcuni buoni tutorial per la realizzazione di effetti sul testo, molto belli da provare.
Vi consiglio di giocare anche con i colori e le texture, o di cambiare le font in modo da scoprire nuovi effetti visivi utilizzando la stessa tecnica.

Ecco cosa vi propongo:

Copper Text Effect

Vanity License Plate

Transparent Text Effect with Fresh Grass

Retro Text Effect

Torn Paper Edges

Starry Text Effect in Photoshop

Patriotic Text

Ice Text Effect with Photoshop

Stylish Retro Text Effect

Colorful Glow

Semitransparent Amorous Text Effect

Eroded Metal with Photoshop

Horror Style with Dirt and Splatter

Papercraft

Grungy Metal

Burnt Wood

Abstract Text Effect

3D Layered Text Effect

Metal Text Under 12 O’clock Spot Light

Cloudy Text

Glowing Text in Space

Easy Neon Style

Jelly Fish Delight

Advanced Glow Effects

Maddening Text Effect

DarkSocial: Free Social Media Icon Set di alta qualità

Andrea Turri — Tue, 22 Jun 2010 12:18:42 +0000

In questo set troverete 10 social media icone di alta qualità: Blogger, Digg, Yelp, Picasa, MySpace, Yahoo!, Facebook, Twitter, WordPress e RSS. Ogni icona è in diverse dimensioni e in formato png.
Le icone sono state rilasciate senza diritti di autore quindi potrete usarle come volete e su qualsiasi progetto.

Download: dark-social (ZIP, 0.99 MB).

Come creare giochi in FLash?

Andrea Turri — Mon, 21 Jun 2010 10:46:48 +0000

Creare giochi in Flash e’ sempre stato un po’ il mio sogno, non solo per la realizzazione in se di un gioco, ma perche’ i giochi in Flash hanno un ruolo importante su internet. Sono da sempre uno dei migliori passatempi per tutti gli utenti. Creare un gioco in Flash richiede molto tempo, e’ un lavoro duro ma sicuramente interessante.
Qui ho elencato i migliori 6 tutorial per la realizzazione di giochi in FLash:

3D Slidin Puzzle

Pool Game

Pseudo 3D Pong Game

Star Shooter

Away3d Game

Ball Game

Come disegnare template per e-mail?

Andrea Turri — Sat, 19 Jun 2010 19:24:13 +0000

Uno dei mezzi più usati per l’informazione è ovviamente l’e-mail e penso tante volte vi saranno capitati clienti che avevano bisogno di template per le loro newsletter. Ma realizzare un template che sia perfetto e soprattutto accessibile a tutti i browser e gestori di e-mail come gMail, Outlook (tutte le versioni!!), Lotus, ecc… è veramente un’impresa titanica se non si ha la giusta esperienza.
Oggi quindi ho deciso di condividere con voi il modo migliore per la realizzazione di un template accessibile a tutto.

Per prima cosa sappiamo che utilizzeremo un solo file HTML, non potremo utilizzare tutti gli stili che ci offre CSS e dobbiamo anche tornare indietro di qualche anno perchè non useremo le DIV, ma le tabelle!

Alcuni gestori non supportano le div, altri non permettono di attribuire uno stile ad una div, altri ancora non leggono tanti parametri e così dovendo pensare a tutto questo l’unica cosa da fare è un bel minestrone, armarci di pazienza e specificare tutto il possibile.

Qui di seguito adesso creerò un piccolissimo template con tutte le specifiche che dovrete sempre usare e tenere a mente:

Per prima cosa nel tag possiamo creare un po’ di css, come ad esempio:

a
{
color: red;
text-decoration: underline;
}

a:hover
{
text-decoration: none;
}

h1
{
font-size: 16px;
font-weight: bold;
}

h2
{
font-size: 14px;
font-weight: bold;
}

p
{
font-size: 12px;
font-weight: normal;
line-height: 140%;
}

Possiamo anche attribuire colori alle font e creare qualche piccola classe se vogliamo per dei tag particolari riguardanti ,

, ecc…

Adesso il body della mail, la parte molto più rognosa, ci renderemo conto che quando avremo email complesse sarà noioso realizzarle, ma renderà il nostro cliente felice di avere un prodotto perfetto:

Questa è la tabella principale che conterrà la successiva tabella e la posizionerà al centro, non prendetemi per un matto, come vedete bisogna dichiarare tutto!!!

In parole povere quello da fare è:

Genrare la prima tabella come sopra, specificando width ed height, sempre! border, cellspacing e cellpadding a 0, sempre! Creare il tag , attribuire a lo style per l’altezza, e attribuire alle width, height e poi lo style width ed height! Ogni volta che andremo a creare una nuova tabella all’interno di una ricordiamoci sempre di creare una
che la contenga con style: margin, padding a 0, width ed height (quando height non è precisoo deve essere dinamico, ometterlo).

La tabella che conterrà il template sarà fatta in questo modo:

Come noterete è simile alla prima ma ho aggiunto altre 2 colonne, quelle sono il “padding” per i nostri testi o immagini, ovviamente potete cambiare il colore di sfondo di ogni tabella o colonna usando nello style: background-color.

Da qui in avanti se il vostro body conterrà più colonne non dovrete alterare questo schema, bensì creare all’interno del centrale una
e quindi un’altra tabella e quindi sfruttare tutte le e le che volete per creare il vostro template!

Suddividete sempre in differenti ogni blocco (header, body, footer, ecc…).

Ogni volta che inserirete delle immagine ricordatevi di lasciarla all’interno delle senza andare a capo!!!
in questo modo.

Altri consigli che vi posso dare sono:

Alterate il tag con dello stile: font-color, background-color, line-height, ecc…

Per realizzare poi un lavoro completo attribuite un testo che dica: Se non riuscite a visualizzare la e-mail in modo corretto, visualizzatela tramite html. Linkandola esternamente al browser.

Dovrei aver detto tutto, ma chiunque incontri dei problemi sono qui ad aiutarvi.

Ecosia: search engine ecologico

Andrea Turri — Sat, 19 Jun 2010 18:18:44 +0000

Ecosia è un motore di ricerca indipendente e senza scopo di lucro. Almeno l’80% dei guadagni ricavati dalle ricerche va a un programma di protezione della foresta pluviale del WWF che utilizza questo denaro per la protezione sostenibile delle foreste pluviali.
A noi che utilizziamo motori di ricerca ogni volta che abbiamo bisogno di qualcosa, sappiamo adesso che fare una ricerca al giorno su Ecosia, oltre a non costarci nulla, aiuterebbe il WWF nella protezione della foresta pluviale.