Questi codici e plugin, possono essere molto utili per i nostri progetti, scopriremo insieme alcuni strumenti web gratis, codici jQuery e molte altri piccolo tools da avere a portata di mouse.

Come al solito la rubrica conclude con un esperimento unico e interessante da conoscere, per capire fino a dove possiamo spingerci.

1. Flotr

Flotr2 è una librearia open source che permette di creare e generare grafici interattivi con l’uso di HTML5 e CSS3.

2. CSS3 Button Generator

CSS3 Button Generator è un interessante tool online che permette di generare il codice HTML e CSS3 di pulsanti.

3. Gridulator

Gridulator è un servizio online gratuito per generere strutture PNG a griglie per layout.

4. CSS3 Test

CSS3 Test è un interessante servizio online che calcola e mostra la percentuale di caratteristiche HTML5 e CSS3 supportare da un browser.

5. HTML-Ipsum

HTML-Impsum è un simpatico sito che fornische il codice HTML da inserier nei progetti in fase di sviluppo come segnaposto.

6. CSS3 Patterns

CSS3 Patterns è una raccolta di patterns per layout web creati con solo CSS3.

7. WhatFont Tool

WhatFont Tool è un utile bookmarket da integrare nel proprio browser, con lo scopo di riconsocere in ogni momento qualsiasi font, utilizzato nel sito web che si sta visualizzando.

8. CSS Type Set

CSS Type Set è un utile tool online che ci permette in modalità visuale, di generare lo stile grafico CSS di un testo.

9. ResponsivePX

ResponsivePX è un tool che permette di integrare una pagina web Responsive Web Design in una determinata dimensione, con lo scopo di monitorare se la visualizzazione e ri-dimensionamento avviene in modo corretto.

10. CSS3 Walking [Experiment]

CSS3 Walking è  l’esperimento di oggi, l’uso di CSS3 e HTML5 per simulare una camminata.

Vuoi segnalare un Codice davvero Cool?

Hai visto sul web un tool o esperimetno davvero cool?

Se vuoi vedere nella raccolta il tuo codice o strumenti che hai trovato sul web, non ti basta altro che inviare una segnalazione su coolcode@juliusdesign.net e verrà inserito nelle prossime raccolte.

La presentazione del fondatore Massimo Marchiori, per molti è stata poco performante, come scrivono alcuni “sembrava che neanche lui ci credesse davvero”.

Molti i dubbi su alcune affermazioni come “Non esiste una regola per creare siti web” – “I Social Network  sono delle gabbie” e le similitudini a Galline e Pollai.

Questo articolo vuole essere una critica costruttiva, su un progetto molto ambizioso, e farlo diventare tale.

Mi sono chiesto ma se fossi stato al posto di Massimo, a cui porto rispetto, cosa avrei fatto per presentare al meglio il progetto?

La Comunicazione

Prima di presentare al pubblico un progetto di questa portata, io mi sarei circondato di persone fuori dall’ottica del progetto, ma di spessore.

Penso a Luca Conti, Robin Good, Marco Montemagno, Angelo di Veroli, Massimo Mantellini, Vittorio Pasteris, Marco Zamperini.

Solo alcune delle persone, che mi avrebbero sicuramente aiutato a capire, se la strada che stavo percorrendo fosse giusta, con suggerimenti e critiche.

Probabilmente eventuali galline le avrei evitate, e avrei aspettato un mese per migliorare il concept grafico.

Clicca qui per vedere il video incorporato.

Anche se è passato molto tempo dall’annuncio pubblico sul web alla vera e propria presentazione e apertura su inviti, sembra che i lavori e la comunicazione sia stata fatta in fretta e senza una logica definita.

Il Visual

Volunia è un progetto con una grande ambizione, ovvero quella di competere con colossi come Google e Facebook.

Per far innamorare i propri utenti, oltre a integrare caratteristiche innovative, dovrebbe avere un visual grafico molto accattivante.

Come primo impatto purtroppo ho notato un logo, che ricorda una catena commerciale di giochi, e un interfaccia molto banale.

A quanto si legge sul web i fondi di finanziamento al progetto sono stati circa 2 Milioni di euro, ma è possibile che non abbiamo investito una minima parte sulla parte di grafica e comunicazione?

L’Innovazione che non c’è

Per quello che ho potuto vedere e ascoltare durante la presentazione di Volunia, non ho riscontrato innovazioni.

Avrei coinvolto alcune persone, come Daniele Alberti, Fabio Lalli, Davide Pozzi, che di startup ne hanno viste di tutti i colori e mi sarei fatto dare da loro alcune impressioni prima del lancio.

Infatti molti scrivono che l’innovazione vera e propria in Volunia manca e non c’è nulla di nuovo.

Vediamo alcune caratteristiche svelate nella presentazione come nuove:

La possibilità di messaggiare su ogni singola pagina web l’abbiamo vista in italia grazie a Toolmet.

La possibilità di avere delle pagine sociali l’abbiamo vista grazie al browser Rockmelt.

La Forza di Provarci in Italia?

Su diverse testate giornalistiche sul web, leggo titoli come  “La Forza di Provarci in Italia”, va bene ma chi non avrebbe avuto la forza con con 2 Milioni di euro?

Molti di queste persone non hanno la minima idea di quante start-up italiane si autofinanziano in Italia, e nello stesso modo cercando di migliorare questo paese.

Sicuramente il progetto verrà migliorato, sotto molti punti di vista, sia per le funzionalità, e nel visual come mi auguro.

Come spesso dico la grafica può anche essere migliorata in un secondo momento, ma è essenziale che il progetto funzioni, e bene.

Volunia è sicuramente un Virale

Come ogni progetto tanto osannato e aspettato dal pubblico, tutti ne parlano e da ieri #Volunia è top trend su twitter.

Io stesso non ho resistito a pubblicare alcune immagini virali, proprio durante la presentazione.

Le galline hanno preso il sopravvento con alcune immagini virali.

Conclusione

La delusione è tanta, forse proprio perchè per una volta che abbiamo la possibilità in Italia di fare qualcosa di grande, non sempre tutto funziona come deve.

Staremo a vedere nei prossimi mesi cosa diventerà Volunia.

Il plugin jQuery pesa meno di 15KB, viene rilasciato sotto licenza MIT, ed è possibile usarlo e scaricarlo da Github.

Come possiamo vedere dalla demo abbiamo la possibilità di ancorare le pagine, e di voltare ogni singola pagina tramite mouse.

Turn.js può essere anche un ottimo modo per condividere presentazioni efficaci e di impatto durante brief creativi.

HTML5 ci porta sui dispositivi Mobile

La struttura progettata in HTML5, può essere modificata a nostro piacimento, scegliendo dimensioni e colorazioni.

Tra le caratteristiche che possiamo configurare troviamo del plugin, numero di pagine, ombre, tempo, durata e accellerazione.

Il plugin è compatibile con dispositivi mobile, essendo progettato in jQuery e HTML5 avremo la possibilità di sfogliare con dito anche da iPad o iPhone.

Come ben descritto dai ragazzi di ViralBlog, questo nuovo social network ispirazionale sta generando più referral traffic di LinkedIN, Reddit, YouTube e Google Plus.

L’amico Davide invece ci dimostra come molte note aziende, hanno iniziato con successo, ad abbracciare questo social network con le proprie ispirazioni.

Attualmente il servizio si basa su inviti, per generare maggiore aspettativa, e nel solo mese di gennaio ha raggiunto quota 3,6% di traffico referenziato.

Infatti come possiamo vedere dalla ricerca di Shareaholic, nel mese di gennaio 2012, Pinterest ha superato diversi noti importanti social media in ordine di Referral Traffic.

Un’altra cosa interessante è che le fonti delle immagini e video attualmente non hanno l’attributo NoFollow, e quindi possono migliorare il proprio ranking.

Usare Pinterest per ricevere traffico?

Quando viene condiviso un contenuto video o immagine, quest’ultimo viene visualizzato nella pagina categoria, e qui tutti gli iscritti possono vedere quel contenuto.

Quindi non solo i tuoi “Pinners” ma praticamente tutti i registrati al social media, e questo aumenta la propabilità di diffusione virale.

Una delle caratteristiche interessanti, è che una volta che il tuo contenuto diventa popolare, può andare a finire direttamente in home page ed essere replicata con fonte in modo virale.

Il social network è composto da diverse categorie, nelle quali vi è una home page popolare, in cui vengono visualizzati i contenuti più interessanti.

Risucire ad entrare in questa pagian con diverse ri-condivisioni, può aumentare in modo interessante traffico sulla fonte.

Usare Pinterest su Mobile e nei Blog

Pinterest ha una versione Mobile, Follow Button e addirittura il famoso pulsantino Pint It da integrare nei blog.

Clicca qui per vedere il video incorporato.

Tra gli strumenti utili per caricare o come ora si dice Pinnare foto e video, Pinterest offre un interessante bookmarks da applicare al proprio browser o addirittura vere e prore estensioni.

Questi strumenti facilitano la condivisione di immagini, e ci permettono di aumentare le nostre raccolte in poco tempo.

Come si usa Pinterest?

Clicca qui per vedere il video incorporato.

Ti voglio segnalare un ottimo video tutorial di Tiziano Fogliata, nel quale ti verrà spiegato in modo dettagliato l’utilizzo di questo social network.

Mi segui su Pinterest? Vuoi un Invito?

Attualmente sto provando il social network per capire altre potenzialità, se vuoi seguirmi mi trovi al seguente indirizzo.

JuliusDesign su Pinterest, se vuoi un invito richiedilo nei commenti, appena possibile ti sarà inviato.

Tra le mie raccolte puoi trovare Creative Graphic Design, Creative Image, Creative Office, iOS Website Design, Creative Viral ADV, Creative Nerd Image.

Nei prossimi mesi scopriremo se questo nuovo servizio, basato sulle ispirazioni, sarà solo una moda momentanea o un’ulteriore interessante opportunità.

Una delle tecnche per viralizzare un messaggio, è propio quello di ricordare personaggi o film famosi, in questo caso infatti Audi, ricorda molto la famosa e fortunata serie Twilight.

Spot divertente con finale a sorpresa e vincente per ottenere in meno di una settimana circa 3 milioni di visualizzazioni.

Il video Vampire Party Audi 2012

Clicca qui per vedere il video incorporato.

Oggi vi segnalo Google Music.

Come sta capitando in questo periodo, la famosa raccolta FWA, oltre a premiare siti in Flash inizia ad aprire le porte anche ad HTML5.

Infatti questo progetto di presentazione, è completamente progettato in HTML5 e CSS3, con una navigazione davvero molto creativa.

Google Music è il nuovo servizio musicale cloud-based, che permette agli utenti di caricare e condividere le proprie canzoni.

Inoltre sarà possibile anche accedere ad un’area in cui acquistare musica internazionale con un semplice click.

La navigazione è progettata con queste righe che si muoveranno a ritmo di musica, e che ci porteranno alle sezioni del sito.

Un interessante e inusuale quanto creastivo sito web per presentare uno degli ultimi servizi di mister Google.

Oggi vi segnalo Porn is Moving to .xxx.

Fine 2011 è stata divulgata la notizia della concessione di domini con estensione .xxx, orientanti per tutti i siti con fine ultimo pornografia.

L’agenzia M&C Saatchi ha voluto comunicare questa migrazione, con una campagna chiamata Porn is Moving con tre stampe altamente virali, che stanno facendo il giro del mondo.

L’agenzia è riuscita a mantenere una linea di creatività/humor senza cadere troppo nella volgarità, e giocando sulla comunicazione di  movimento.

Vediamo le tre stampe create per questa campagna.

Oggi vi segnalo il Font Mosaic Blanch - Free Download

Molto elegante questo font, con linee dure e curve che aiutano a rendere armonioso il carattere.

Il font è disponibile anche in versione solo bordi, con il quale è possibile creare delle creatività originali.

Vediamo alcune applicazioni e presentazione del font:

Questi codici e plugin, possono essere molto utili per i nostri progetti, scopriremo insieme alcuni strumenti web gratis, codici jQuery e molte altri piccolo tools da avere a portata di mouse.

Come al solito la rubrica conclude con un esperimento unico e interessante da conoscere, per capire fino a dove possiamo spingerci.

1. HTML5 Please

HTML5 Pleaser è un interessante riepilogo sulle caratteristiche di HTML5 e CSS3 consigliate o meno di usare in base all’attuale compatibilità con i browser.

2. Infinite Scroll

Infinite Scroll è un plugin jQuery che permette di simulare l’effetto di pre-loading contenuti simile a Facebook o Google Image.

3. Pure CSS GUI icons

Pure CSS GUI icons è una serie di fogli di stile CSS3 che ti permettono di simulare micro icone solo con il CSS, senza utilizzare immagini.

[thx HTML5 AndMore]

4. HexTone

HexTone è un interessante tool online che permette di trasformare un codice esadecimale in RGB.

5. Spin

Spin è un generatore di preloader circolare personalizzabile in JavaScript.

6. Scrollorama

Scrollorama è un plugin jQuery che permette di sviluppare i contenuti di un sito web in verticale, a seconda dello scroll del browser.

7. Grumble

Grumble è un plugin jQuery che permette di integrare dei fumetti interattivi animati su determinate parole o frasi.

8. CSSPrefix

CSS Prefix è un interessante tool che permette di generare al volo i prefissi di alcune proprietà dei maggiori browser in circolazione con un click.

9. List

List è un interessante codice JS che permette di generare una lista di elementi ordinata, ed effettuare in tempo reale ricerche e filtri sulla stessa.

10. OneHourPerSecond [Experiment]

OneHourPerSecond è  l’esperimento di oggi, in un secondo, viene caricata su YouTube un’ora di video quindi significa che…

Vuoi segnalare un Codice davvero Cool?

Hai visto sul web un tool o esperimetno davvero cool?

Se vuoi vedere nella raccolta il tuo codice o strumenti che hai trovato sul web, non ti basta altro che inviare una segnalazione su coolcode@juliusdesign.net e verrà inserito nelle prossime raccolte.

Oggi vediamo insieme come utilizzare la tecnica CSS Sprite, utilizzata creando un’unica immagine accorpando gli elementi fondamentali di una grafica web, con lo scopo di diminuire e ottimizzare il tempo di precaricamento.

Questa tecnica che consiste nel caricare una singola immagine e spostarle con l’ausilio di codice CSS al fine di aver una sola richiesta (HTTP request), allegerendo la pagina e velocizzandone la visualizzazione.

La Proprietà background-position

La proprietà background-position permette tramite percentuali di spostare un determinato sfondo associato a uno stile.

Grazie agli stati hover e active noi possiamo far muovere la nostra immagine e visualizzare una determianta porzione.

In questo modo l’immagini da caricare sarà solo una, e per eventuali modifiche dovremo solo fare riferimento a un unico file.

Come devo creare l’immagine con tutti gli elementi?

Puoi usare un qualsiasi software di editor come Fireworks o Phostohop e inserire tutti gli elementi che vuoi gestire tramite la tecnica CSS Sprite.

Sono molti i BIG che usano questa tecnica, da Google a YouTube e da Facebook a Twitter.

Per creare una corretta aggregazione di elementi grafici nel tuo file, devi stare attento a inserirli in modo che possano essere selezionati singolarmente e che non si sovrappongano.

Come vedremo nel codice CSS qui di seguito, non andremo altro che visualizzare una determianta area, quadrato o rettangolo e quindi bisogna distanziare gli elementi in modo corretto.

Il “trucco” è creare un’unica immagine con gli elementi fondamentai della nostra grafica web ben distanziati tra di loro.

Codice CSS

Scarichiamo da 365PSD un esempio di interfaccia grafica, ecco un esempio di pulsante base associato a un comune collegamento a un testo in <a href>.

.pulsante {
background: url("grey-ui_elements.jpg");
background-repeat: no-repeat;
background-position: -22px -28px;
display: block;
height: 45px;
line-height: 42px;
margin: 0 auto;
width: 114px;
}

Questa classe ci servirà per impostare il primo stile al nostro pulsante con classe “pulsante”.

Come vedete nella classe l’attributo background-position: è impostato a X -22px e Y -28px.

a:active.pulsante {
background: url("grey-ui_elements.jpg");
background-repeat: no-repeat;
background-position: -132px -28px;
display: block;
height: 45px;
line-height: 46px;
width: 114px;
}

In questo caso agiremo sullo stato active, per simulare lo stato di pressione pulsante.

Come vedete nella classe l’attributo background-position è impostato a -132px e -28px infatt abbiamo mosso la nostra immagine orizzontalmente di 110px.

Molto importante è ricordarsi anche di definire altezza e larghezza dell’oggetto da rendere visibile e in qualche modo tagliare dalla visualizzazione.

In questo modo l’effetto sarà quello voluto, e nessuno si accorgerà che l’immagine sia stata mossa o vedere fastidiosi buci in pre-caricamento di immagini singole.

Links utili

L’immagine contenete i vari oggetti può essere realizzata con un comune editor di immagini come vi dicevo prima, oppure per ottimizzare il proprio tempo bisogna sapere che esistono tools che possono darci una mano.

Tra i diversi tool gratuiti online vi segnalo SpriteBox e CSS Sprites Generator due utilissimi strumenti da consocere.

Segnala un Tuo CSS Trick!

Conosci un codice CSS che potrebbe essere utile ai lettori di JuliusDesign?

Invia una email con il codice CSS+HTML dettagliato a csstrick@juliusdesign.net, il prossimo codice potrebbe essere firmato da te!

Conoscevi questo codice CSS?

Consiglia questa tecnica ai tuoi collegi o ai tuoi amici!