Nell’ultimo periodo il web sta subendo un cambiamento radicale per quanto riguarda il layout e l’impaginazione.

Ormai non è più sufficiente disegnare ed impaginare un sito web basandosi solo ed esclusivamente sulla risoluzione del proprio pc ma con l’avvento degli smartphone e tablet occorre fare in modo che il nostro design si adatti perfettamente a tutte le risoluzioni possibili, ma non solo, il layout deve anche poter cambiare aspetto in base alla dimensione dello schermo.

Per questo motivo è nata l’esigenza di creare dei layout elastici detti anche “Responsive” che si adattano a qualsiasi supporto o device.

I siti web “Responsive” rappresentano sicuramente la nuova tendenza del mondo del web ma come è possibile testarli in maniera semplice e veloce? È impensabile avere a disposizione tutti i device per poter eseguire i propri test data la vasta gamma di tablet e smartphone disponibili in commercio.
Esistono però svariati plugin o strumenti per testare il proprio sito web responsive in maniera pratica, veloce ed efficace.

Oggi vi presentiamo Viewport resizer, uno straordinario web tool in grado di testare in pochissimi secondi il vostro sito web responsive in tutte le risoluzioni attualmente disponibili.
Per prima cosa occorre andare sul sito ufficiale Viewport resizer e come appare nell’immagine sottostante vi basterà trascinare il bottone blu con la scritta “Click or bookmark” nella vostra barra dei preferiti.

A questo punto per testare un layout responsive vi basterà digitare nella barra degli indirizzi il vostro url e successivamente premere il pulsante “Resizer” che abbiamo appena aggiunto nei segnalibri.
Comparirà quindi una striscia nera nella parte alta dello schermo con tutte le risoluzioni attualmente disponibili con cui testate il vostro layout compreso il nuovo iPhone 5.

• 320 x 480 – iPhone 4/4S
• 480 x 320 – iPhone 4/4S Landscape
• 320 x 568 – iPhone 5
• 568 x 320 – iPhone 5 Landscape
• 600 x 800 – Small tablet
• 600 x 800 – Small tablet Landscape
• 768 x 1024 – Large Tablet (iPad)
• 1024 x 768 – Large Tablet Landscape (iPad)

Non mancano di certo anche le risoluzioni dei computer standard e la possibilità di inserire una propria risoluzione personalizzata nella zona rappresentata dalla piccola matita.

Infine è anche possibile testare le risoluzioni dei vari device in modalità “Landscape” cambiandone l’orientamento semplicemente cliccando due volte sull’icona desiderata.

Attenzione che con questo tool è possibile testare solamente layout responsive in quanto l’area visibile viene tagliata alla risoluzione selezionata e di conseguenza il design “Responsive” si adatterà alla superficie mentre sui vari device le interfacce classiche vengono ridimensionate per essere comunque interamente visibili.

Troppo spesso abbiamo l’esigenza di dover comprimere un file PDF per problemi di archiviazione o per poterlo inviare come allegato di una mail.
Ma come risolvere il problema sfruttando le potenzialità di Mac OS X e senza dover ricorrere alla creazione di un file ZIP?
Senza essere obbligati ad installare alcun software esterno è possibile ridurre le dimensioni di un file pdf attraverso l’applicazione Anteprima di Mac os X, che, dalla versione 3 in poi permette di effettuare tale operazione riducendo immagini, grafici e altri oggetti contenuti all’interno del file, permettendo così di ottenere un pdf molto leggero per l’archiviazione o per l’invio tramite posta elettronica.

Ecco i passaggi da fare per ridurre il nostro file pdf:

1. Aprire l’applicazione Anteprima e successivamente il file PDF che si desidera ridurre.
2. Fare clic su File > Esporta
3. Nel menu di esportazione fare clic sul menu a tendina Filtro Quartz e scegliere Riduci dimensioni file (vedi immagine seguente).

Il file PDF esportato dovrebbe essere significativamente più piccolo del file originale, ma attenzione che con questa operazione vengono compresse tutte le immagini, infatti avviene una compressione da una risoluzione di 300 DPI (ideale per la stampa) ad una risoluzione di 72 DPI (ideale per la visualizzazione a monitor) quindi la qualità delle immagini compresse non viene assolutamente compromessa quando le immagini vengono visualizzate sullo schermo, mentre potrebbe apparire inferiore in fase di stampa. Si consiglia in ogni caso di fare delle prove.

Se abbiamo la necessità di stampare il pdf forse allora è meglio ricorrere al metodo classico come la creazione di un file zip e se il file dovesse risultare troppo grande per l’invio tramite mail consiglio un ottimo servizio online gratuito, We transfer, che consente l’invio di qualsiasi tipo di file fino ad una dimensione di 2GB in maniera veloce e assolutamente gratuita. Vi rimando all’articolo originale.

Qualche giorno fa Abbiamo parlato su questo blog di come le applicazioni pensate per integrarsi al meglio in posizioni strategiche dell’interfaccia grafica dei nostri sistemi, abbiamo un valore aggiunto che si traduce in ottimi strumenti per la nostra produttività.

Perfpane e Menubar sono strumenti che semplificano l’accesso alle applicazioni, contestualizzando il loro utilizzo: un chiaro esempio di quanto stavamo dicendo per quello che riguarda gli ambienti Mac ma non solo.

Oggi voglio raccoglitore in una top 5 la mia lista di applicazioni preferite all’interno della suite che utilizzo nella mia MenuBar

Per altri spunti simili a questo potete consultare il tumblr macmenubars.com dove quotidianamente gli utenti intervistati mostrano con tanto di screenshot la loro suite spiegandone anche i contesti applicativi in poche righe.

Sparrow

Semplicemente il miglior client multi account per la Mail su Mac. Il costo è contenuto rispetto all’offerta dell’applicazione.

Il client come detto supporta più di un account di posta, l’ideale per chi deve gestire una grande quantità di email.
L’integrazione con Dropbox permette di velocizzare il passaggio di allegati di grandi dimensioni sfruttando il famoso servizio di Cloud Storage.
E’ possible collegare l’account Facebook così da associare la foto dell’email corrispondente sul social network, essendo svolta automaticamente la ricerca, tale immagine apparirà ogni qualvolta l’account del mittente fosse pubblico, semplificando il riconoscimento di quest’ultimo.

Recentemente è uscita l’applicazione per iPhone di qualità altrettanto elevata.

Copyless

Ogni giorno processiamo una moltitudine di testi e link, soprattutto se come me siete dei blogger  o web designer e dovere per forza di cose dividervi fra la consultazioni di news per la vostra formazione e la presenza su social network e gruppi di collaborazione. Avere uno storico della vostra Clipboard permette di velocizzare le operazioni oltre che di gestire a fine giornata quei momenti di organizzazione che possono tornare utili.

Copyless fornisce diversi strumenti per gestire al meglio la vostra Clipboard:

• Pin: è possibile marcare alcune voci della vostra clipboard per averle sempre accessibili all’intero della funzionalità favorite. Utile in alternativa ad un textexpander o per mantenere informazioni veloci come indirizzi email.
• App ID: ogni applicazioni da cui copierete il testo verrà identificata e la sua icona la distinguerà dalle altre per velocizzare il riconoscimento delle sessioni di lavoro
• Quicklook con apertura direttamente in Textedit: un popup vi mostrarà il contenuto esteso del clip, quando l’anteprima non dovesse bastare
• PlainText Support
• Ricerca Clip: è possibile ricercare all’interno della Clipboard frammenti di testo tramite parole chiave.
  

L’applicazione non smette mai di stupire, infatti è prevista una logica di shortcut interna all’app che velocizza moltissimo la gestione della clipboard.
Tramite delle liste a cui sono associate fino a  10 voci è possibile copiare i clip preferiti oltre che quelli presenti nella propria clipboard, con la possibilità di renderli più accessibili tramite riordinamento automatico.

L’app consente l’impostazione di filtri, contesti applicativi dove Copyless si disattiva automaticamente per non intasare la vostra clipboard.

MemoryScope

Tenere sotto controllo la memoria dei propri computer è importante. Personalmente ho una macchina molto prestante, tuttavia spesso mi trovo a fare uso di molteplici tool di navigazione, diversi browser e molte applicazioni che lavorano in background. MemoryScope oltre a darmi un’idea della memoria disponibile mi permette anche di deallocare quella che non è più legittimamente occupata dal sistema.
Semplice, chiaro e preciso è un’utilità che ha migliorato molto le prestazioni del mio iMac.

Caffeine

Caffeine è una piccola utility, disponibile gratuitamente nel Mac App Store, che permette di impostare l’attività dello schermo con un semplice tocco. Infatti quando l’applicazione è attiva il vostro computer non andrà mai in background. Strumento utile quando devo utilizzare il computer per consultare dei documenti, ma nel frattempo devo lavorare su carta. Compagno ideale quando si studia o durante una presentazione!

Evernote

Le potenzialità di Evernote come suite di produttività sono note a tutti.
La sua presenza nella Menubar è il completamento di uno strumento onnipresente, dal mobile (iOS e Android) alla web app.
Da questa estensione possiamo utilizzarne gli strumenti più utili come:

• la creazione di note a partire da uno screenshot, l’ideale durante la composizione di un post,
• l’accesso rapido alla creazione di note scritte
• le note vocali, features a mio avviso sottovalutata ma utilissima in certi momenti.

Tool fenomenale durante la quotidianità per annotare quanto accade nelle sessioni creative o magari più orientate alla produzione di post.
La tengo ovunque, non poteva mancare nella mia barra Menu

Voi cosa ne pensate? cosa inserite nella vostra menuBar?

La Menu Bar di Mac OS X

Un difetto della barra dei menu è che le applicazioni sono posizionate causalmente e nel sistema base non è previsto un metodo per organizzarle, ne per migliorare l’utilizzo di questo strumento, che, è si ottimo ma che deve potersi piegare alle nostre esigenze, nel momento in cui lo consideriamo un tool per la nostra produttività.

Oggi ci concentreremo su un aspetto più legato alla produttività e all’organizzazione dei nostri strumenti, vedremo infatti ben 5 applicazioni molto utili per organizzare la nostra sui di MenuBar App.

Bartender

Applicazione ancora in beta, ma si tratta di un tool già molto interessante recente che ci permette di organizzare la nostra suite, eliminando le icone che non ci interessano sostituendole con uno shortcut che richiama una seconda menubar ridotta di dimensioni al numero di icone che deciderete di aggiungere.

Questo tool supporta le scorciatoie da tastiera, così da poter richiamare velocemente la nostra seconda barra menu quando sarà necessario, in alternativa è sufficiente cliccare sull’icona di Bartender per aprire un popup statico con la nostra barra ausiliaria.

Bartender è acquistabile ad un prezzo scontato del 50% durante la fase beta, il suo costo previsto è di 11€ quindi affrettatevi prima che il prezzo renda questo strumento un po’ troppo caro per la sua utilità.

Menubar ReArranger

La seconda applicazione che vi presentiamo oggi è un ottimo tool per riordinare la vostra menubar, inserire nuove applicazioni e nascondere quelle indesiderate. Il funzionamento dell’applicazione è molto semplice: una volta deciso l’ordine le applicazioni vengono fatte ripartire forzando un ritardo che garantisce la disposizione predefinita.

Sicuramente uno strumento molto utile che può essere funzionale anche per nascondere quelle icone che non vogliamo trovarci nella nostra barra dei menu, così da averla più pulita e quindi meno distraente.

L’applicazione è disponibile nel Mac App Store a circa 4€, mentre una versione trial con 14 riordinamenti è disponibile sul sito dello sviluppatore.

BroomStick

Questa utility è un vero coltellino svizzero per quanto riguarda la vostra menubar. Infatti consente di fare tutte e tre le operazioni fondamentali per gestire la vostra menu bar:

• Nascondere
• Aggiugnere
• Riordinare

Se invece avete bisogno di applicazioni non presenti tra quelle supportate, potrete inviare una richiesta agli sviluppatori direttamente da questo tool, solamente segnalando il nome dell’applicazione necessaria. Per ogni applicazione è necessario lavorare manualmente sull’icona, potrete quindi aiutare lo sviluppatore tramite una pagina di collaborazione.

AcessMenubarApps

L’ultima applicazione che vi presentiamo oggi è un’utilità destinata a chi utilizza davvero molte applicazioni e/o ha uno scermo non troppo grande. Talvolta capita infatti che le applicazioni utilizzino una grossa fetta della menubar, andando a copire gli shortcut che abbiamo posizionato che diventano inaccessibili a meno di cambiare applicazioni.

Per risolvere questo problema, AccessMenubarApps è un’ottima soluzione: semplicemente clickando una tra l’icona nel dock e l’angolo in alto a sinistra della menubar, potrete in un attimo liberare lo spazio nascondendo tutti i menu relativi all’applicazione aperta. Un aspetto negativo è che occupa uno spazio lei stessa sia nella menuabar che nel vostro Dock, tuttavia in determinate circostanze risulta davvero utile, nel mio Hackintosh su un Dell Mini da 10 pollici vi assicuro che è un tweak fondamentale!

Conclusioni

Ci sono tante utilità che sfruttano la menubar per fornirvi funzionalità rapidamente accessibili, oggi abbiamo visto come organizzare gli strumenti da voi scelti, ma quali sono questi strumenti? ci piacerebbe sapere quali sono le vostre scelte in fatto di app e di tweak, segnalatecelo nei commenti!

Prima di andare via un ultimo suggerimento: per riordinare le icone di originali Apple (Wifi, Bluetooth, volume ecc) è sufficiente mantenere premuto il tasto command e trascinare le icone con il mouse.

Tra le critiche mosse all’iPad è che non si tratta di un vero computer perché non consente l’accesso a tutte le funzionalità che i computer offrono; fatto conclamato ma sempre più messo in discussione dalle capacità dei programmatori dell’AppStore che inventano soluzioni sempre nuove per superare i limiti, a volte un po’ eccessivi, che Apple impone per la piattaforma iOS.

Oggi qui su Creative Ispiration vogliamo mostrarvi due interessanti applicazioni di grande successo nel Store di Apple:

iMockup, la prima vi permette di affrontare la parte di progettazione e quella di brainstorming relative alla realizzazione dei vostri progetti web; la seconda, Textastic, cerca di risolvere una delle maggiori mancanze per iPad, la possibilità di programmare liberamente. Se nel campo dei software la questione rimane aperta, diverse soluzioni sono state trovate per il Web Design come Diet Coda, fratello minore di Coda 2, nei prossimi appuntamenti analizzeremo diverse alternative in questo campo, non risparmiateci quindi i vostri suggerimenti e le vostre segnalazioni

Texastic

Tesxastic  è un’utility davvero molto interessante che permette di gestire contenuti e codice relativo ai vostri progetti direttamente dall’iPad. Purtroppo non è possibile eseguire alcun tipo di compilazione al momento tramite il vostro Tablet iOS, per cui l’app non esegue questo tipo di azioni, ma ci consente di lavorare al nostro codice offrendoci un’interfaccia dedicata che evidenzia l’indentazione di moltissimi linguaggi tra cui i più diffusi in campo web, di cui è invece possibile visualizzare semplicemente l’anteprima HTML e CSS e PHP senza uscire dall’app.

Quest’app ha moltissime caratteristiche inerenti alla personalizzazione del vostro codice, rendendovi la vita molto più semplice attraverso strumenti dedicati a funzionalità specifiche. Potrete infatti utilizzare diversi stili di codifica come UTF-8 o ISO-8859-1. Altra caratteristica importante è la possibilità di recuperare contenuti e di condividerli tramite diversi strumenti online e via USB:

• iTunes: tramite il classico processo di inserimento di documenti attivabile dalla schermata principale del vostro iPad in iTunes, semplciemente selezionanto textastic tra le appllicazioni che forniscono questo tipo di funzionalità.
• Dropbox: l’ideale per condividere facilmente documenti con i nostri computer, così da facilitare il flusso di lavoro da una macchina all’altra.
• FTP: ideale per chi dedice di caricare direttamente le sue crazioni ed ammirarle online sempre tramite l’app.
• MobileMe, in fase di aggiornamento verso il nuovo iCloud
• un vostro server WebDAV

L’app supporta come detto l’esportazione, salvando direttamente il file secondo il template e bundles, che potrete anche personalizzare inserendo una cartella con nome #Textastic in cui copiare i vostri template .tmbundle e .tmTheme;

Un’altra utile funzionalità, è la possibilità di utilizzare in modalità anteprima una funzione denominata firebug, che vi permette di analizzare il codice da voi scritto, e di recuperare da questo alcune informazioni utili come:

• L’analisi compilata dei tag CSS relativi ad una pagina
• La struttura DOM della vostra pagina, con la possibilità di leggerne comodamente i contenuti
• Dati relativi allo scripting.
• accesso diretto al vostro iPad tramite l’opzione di sharing interna all’app

iMockUps

Quest’applicazione vi permetterà di struttturare rapidamente dei Mockup con il vostro iPad. L’app presenta diversi contenuti così da fornire un ampio spettro di soluzioni per tutti i possibili sketch che vi troverete a progettare. Divisi in tre sezioni abbiamo diversi tool per la costruzione dei nostri sketches:

• Web: contentente le rappresentazioni di attributi del linguaggio HTML come tabelle e liste oppure specifici contenuti relativi alla strutturazione della pagina all’interno del browser e dal punto di vista applicativo.
•  iPhone/iPad è la sezione dedicata ai dispositivi iOS che forniscono alcuni contenuti fondamentali come la gestione dell’immagine all’interno del dispositivo e la rappresentazione stilizzata di menu, tastiere e popup, tutto quelo che serve per buttare giù idee da realizzare in seguito o da presentare ad esempio al cliente, così da avere un feedback immediato sull’andamneto del proprio lavoro.
• Markup: l’utlima categoria contiene semplici tool per il commento e la gestione dei precedenti contenuti di progettazione.

Le funzionalità di esportazione ci consentiranno di portare ovunque i nostri progetti, producendo internamente all’applicazione anche PDF contenenti tutte le pagine di cui abbiamo trascritto una visualizzazione di bozza. iMockup prevede anche mantenere i progetti esplorandoli così da poter modificare e completare il lavoro all’interno dell’app.

Conclusioni

Come abbiamo detto queste applicazioni sono solo due delle applicazioni che l’App Store contiene, relative alla pratica del web design, abbiamo deciso di inziare da queste perchè si tratta di app a buon mercato, circa 10€ l’una non è molto se pensate a tutti i servizi offerti, e semplici da usare. Entrambe le app hanno siti web molto utili da cui reperire informazioni importanti per l’utilizzo avanzato di queste.

Sul sito di Textastic potrete trovare un manuale completo dell’app così da carpirne ogni segreto, mentre la community di iMockup è sempre molto attiva e attenta alle richieste di nuove feature da parte degli utenti.

Non vi resta che provarle e farci sapere cosa ne pensate.

A cosa stai lavorando? Mettiti in mostra! Condivisi e comunica.

Questi sono i tre slogan che troverete su questa nuovo servizio Online, dedicato a chi si occupa di design per lavoro o per passione.
Dribbble ha costruito una fiorente community di grafici, web designer, e molti altri esperti di design che al suo interno trovano uno spazio dedicato alla condivisione del proprio lavoro.

Ma vediamo più nel dettaglio che cosa offre questo Web Services.

Utenti

Dribbble è a tutti gli effetti un social network. Da subito è possibile registrarsi specificando la il proprio settore di appartenenza:

• Scouts, osservatore che non pubblica propri contenuti ma che si limita a seguire con un meccanismo di following/follower gli altri utenti e cura una propria raccolta. Può commentare e lasciare dei Like. Nella versione PRO ha un limite più alto per i messaggi diretti ai Designer ed ottiene l’accesso agli strumenti di ricerca avanzati, infatti la funzione Find Designer offre solo un esempio di risultato agli account gratuiti.
• Prospects, aggiunge alle opzioni dell’utenza Scout anche la possibilità di essere assunto e diventare così un Player, cioè un utente che può caricare contenuti e commentarli. Infatti l’opportunità di aggiungere i contenuti viene conferita dalla comunità stessa attraverso degli inviti mensilmente limitati. In questo moto la community cerca di autoregolarsi selezionando gli utenti al suo interno, periodicamente vengono fomiti degli inviti diretti dai moderatori agli utenti che più utilizzano questa funzione in modo utile alla comunità. Nella versione PRO un Prospect ottiene la possibilità di essere trovato attraverso il motore di ricerca interno e di essere quindi contattato per opportunità di lavoro. Un Player ottiene inoltre l’acesso ai progetti e la possibilità allegare file e di accedere alle statistiche. La versione PRO è sottoscribile per 20$ l’anno.

Dribbble è anche chiamato il Twitter per Designer, ma oltre a riproporre alcune funzioni tipiche del News Network a noi tanto caro, possiede una struttura interna volta alla cura dei contenuti e tenta di mantenere alta la qualità di quanto viene caricato. E’ un social selettivo in quanto pensato in ottica lavorativa.

Contenuti e comunicazione

Il caricamento dei contenuti è fortemente regolato, anzitutto sono limitate le dimensioni di quelli che in gergo vengono chiamati Shots, solo 400×300 pixel. Gli utenti hanno a disposizione un massimo di 24 shot al mese per 5 al giorno. Al rinnovarsi del mese il proprio caricamento viene riportato a 24.

Curation e di Social Networking

• Rebound è uno shot in risposta ad un altro caricato precedentemente. Sono strumenti fortemente utilizzati per iniziare discussioni all’interno di Dribbble, scambiandosi Shot tra utenti o mostrando in un uno spazio l’evoluzione del proprio lavoro.
  Per uno shot con molti Rebound viene creata una voce nella sezione Playoff dove tutti questi sono visibili.
• Bucket: un Bucket è un cestino letteralmente dove è possibile aggregare contenuti di interesse per un utente. Queste collezioni possono essere utilizzate sia come proprio strumento di lavoro, per mantenere ordinate le proprie fonti di ispirazione, sia per creare sezioni tematiche dei propri lavori e proporli in confronto tra loro o quelli di altri utenti.
• Project è una collezione specifica di un utente che viene raggruppata in base ad un tema ricorrente. Può essere creata solo dai PRO Prospect ma è visibile a tutti.

Dribbble permette anche tutte le classiche funzioni di interazione quali menzioni, messaggi diretti e like, ma manca attualmente una funzionalità assimilabile al retweet, presente invece su Pinterest come abbiamo visto, questo probabilmente perchè questo network è visto in ottica autopromozionale pertanto il retweet risulta una sovrapposizione del lavoro altrui al proprio, meglio invece apprezzarlo e mantenere se opportuno un’esplicita ottica di curation.

Menu

Vista la grandezza della community sono previsti dei meccanismi che rinfrescano la fruizione dei contenuti tramite la scoperta di nuovi utenti. La logica dei Menu in alto in questo senso è chiaramente improntata verso una navigazione attiva. La complessità del Social Network dovuta al grande numero di sezioni è alta, e questo potrebbe scoraggiare i nuovi utenti, tuttavità una volta entrati nella logica di funzionamento ogni cosa resta al suo posto per essere trovata ed abbiamo una sezione davvero per ogni cosa.

Il Menu Shot racchiude tutto ciò che riguarda i caricamenti, in ordine temporale e di popolarità distinguendo agilmente il chi dal cosa e dal quando; i “Suggerimenti” si basano direttamente su i nostri follower utilizzando algoritmi che tengono conto delle condivisioni di questi e delle loro caratteristiche individuali, Più utenti seguiremo più sarà semplice ottenere suggerimenti perchè delineiamo a quale tipologia di follower siamo interessati. La funzione Debuts è pensata per dare visibilità ai nuovi arrivati, questo dal mio punto di vista è molto importante, poichè di solito in una community le posizioni forti tendono a prevalere, vedi Twitter.

La sezione Explore racchiude tutto ciò che riguarda al Curation e le sezioni che abbiamo osservato prima, inoltre consente di analizzare per Colore e per tag i singoli Shot strumenti che aiutano sicuramente gli Scouts alla ricerca di particolari tipologie di Progetto.

Infine la sezione Designer è specificatamente indirizzata alla scoperta degli utenti, mi sorprende che non sia stata posta in prima posizione ma è vero che così ricopre un punto centrale all’interno della pagina. Qui abbiamo accesso a quanto visto in precedenza per gli utenti, oltre che una sezione dedicata ai Nuovi Players.

Infine la possibilità di aggiungere Skills agli utenti PRO li posiziona meglio all’interno del motore di ricerca mentre i tag sul singolo Shot favoriscono il suo ritrovamento oltre che il suo confronto.

Conclusioni

Ciò che più colpisce della logica di questo servizio è come la community si debba autoregolare sia tramite la scoperta di nuovi utenti, a cui vengono offerti nuovi lavori che li portano a caricare nuovi contenuti, sia tramite un meccanismo di fiducia per cui un utente permetta da un altro di diffondere i suoi Shots.

Inoltre ci si può chiedere come ottenere le informazioni necessarie per maturare le scelte di invito di un utente: la risposta a questa domanda la troviamo all’interno della struttura dei profili per cui è possibile, ed anche necessario, aggiungere informazioni relative alla prorpia biografia e link diretti ai propri siti web in ottica di Portfolio.

I Collegamenti diretti al portfolio ed a Twitter portano Dribbble ad essere il primo Social Network che non tenta di mantenere al suo interno gli utenti fornendo loro tutte le funzioni di cui necessitano, ma punta a farli tornare nel momento in cui hanno bisogno di uno strumento lavorativo e promozionale, rafforzato dalla presenza di una community.

Con iOS 5, l’ultimo aggiornamento di casa Apple per i dispositivi mobile, compatibile con iPhone 3GS, iPhone 4, iPhone 4S, iPod touch 3° generazione, iPod touch 4° generazione, iPad, iPad 2, Apple lancia un nuovo servizio di invio messaggi completamente gratis integrato nell’app messaggi attraverso il quale è possibile inviare testo, foto, video, posizione Gps e contatti.

Con iMessage infatti, tutti i possessori di un dispositivo Mobile di casa Apple sfruttando la tecnologia Wi-Fi o 3G possono inviare gratuitamente messaggi di testo, inviare messaggi di gruppo e abilitare le ricevute di lettura. E’ possibile inoltre sapere quando l’altra persona sta scrivendo grazie ad un’icona che compare in basso a sinistra, un pò come nella messaggistica instantanea di Skype.

Ovviamente il servizio funziona solo tra sistemi dotati di iOS 5 ed è inutile specificare che il dispositivo deve per forza essere supportato da un piano di traffico dati in quanto deve sfruttare tale tecnologia per la trasmissione dei dati e la verifica che in entrambi i dispositivi sia abilitata tale funziona, infatti, iMessage, se abilitato tenta l’invio, gratuitamente, attraverso il traffico dati, in alternativa se il destinatario non dispone di tale tecnologia il messaggio arriverà sottoforma di un normale sms a pagamento.

Come attivare iMessage?

Per attivare iMessage non serve fare altro che entrare nelle impostazioni del nostro dispositivo e scegliere la voce “Messaggi”, abilitare la funzione “iMessage” ed il gioco è fatto.
E’ possibile inoltre, come detto sopra, abilitare la funzione di “invia ricevute di lettura”, “invia come sms” nel caso in cui l’invio tramite iMessage non sia possibile ed infine “Ricevi su” dove è possibile indicare indirizzi diversi per la ricezione come il numero di cellulare per i possessori di iPhone oppure anche un indirizzo mail per i possessori di iPodTouch o iPad perchè sprovvisti di relativa sim.

Per sapere quando la funzione iMessagge è disponibile basta guardare la scritta all’interno del box di scrittura, dove, se compare il testo iMessage e il pulsante di invio è colorato di azzurro allora la funzione è disponibile altrimenti verrà inviato un sms normale e il pulsante di invio sarà di colore verde come del resto anche la nuvoletta contentente il messaggio inviato si presenterà azzurra se utilizzato il servizio iMessage mentre sarà verde in caso contrario.

Come probabilmente sapete, Mac OS X Lion è stato rilasciato qualche giorno fa con + di 250 nuove funzioni rispetto al precedente OS Snow Leopard. A primo impatto, ciò che salta maggiormente all’occhio è probabilmente la nuova interfaccia grafica, curata e trasformata nei minimi particolari rendendo il nuovo Mac OS semplicemente splendido, infatti, sono state ricreate tutte le icone, i pulsanti e le barre di caricamento rendendo l’impatto grafico più raffinato ed elegante.

Oggi, voglio mettere a disposizione questa fantastica libreria di icone del nuovo Mac os x Lion ridisegnate dal buon pixify.com che potete scaricare liberamente ed utilizzare all’interno dei vostri siti o applicazioni web.

Come utilizzare il set di icone

Le icone utilizzate in queste tutorial sono state tutte quante racchiuse all’interno di un unico file (cosa sempre consigliata in quanto è meglio caricare un’unica immagine contenente tutte le icone e poi giocare con le classi e i posizionamenti del foglio di stile piuttosto di caricare più 200 icone di dimensioni minori in immagini separate).

Per utilizzare le icone è sufficiente creare uno “span” contenuto all’interno di un “link” ed assegnare a quest’ultimo una classe, ad esempio:

<a class="icon icon1" href="#"><span>Label</span></a>

ora nel nostro foglio di stile occorre solamente posizionare l’icona corretta grazie al posizionamento del background sfruttando la classe appena assegnata “icon1″:

a.icon1 span {background:url(button-icons.png) -0px -36px;}

In questo caso abbiamo richiamato l’immagine “button-icons.png” che corrisponde all’immagine contenente tutte le icone e l’abbiamo posizionata a “0px” e “-36px” per mostrare esattamente l’icona che ci interessa.

Create tanti link quante sono le icone che desiderate mostrare creando nuove classi ed il gioco è fatto!!!

Infine non dimenticate di applicare l’effetto “Hover” aggiungendo la classe “icon” al nostro link come mostrato nell’esempio sopra per applicare l’effetto l’evidenziato.

Guardate la demo o scaricare il file.zip per utilizzare questo tutorial nei vostri progetti e non dimenticate di lasciare dei commenti in caso di problemi, dubbi o consigli.

Con questo tutorial vorrei condividere insieme a voi una video gallery molto semplice ma allo stesso tempo di grande impatto  sfruttando il motore di YouTube e il plugin FancyBox di jQuery.

Per realizzare la videogallery è sufficiente incorporare all’interno della nostra pagina.html la libreria jQuery, il plugin jQuery FancyBox con relativo foglio di stile .css + immagini ed il gioco è fatto.

Vediamo nel dettaglio come costruire la video gallery:

Per prima cosa occorre includere all’interno del tag <head></head> questi file:

• jquery-1.6.2.min.js
• jquery.fancybox-1.3.4.pack.js
• jquery.fancybox-1.3.4.css

Sempre all’interno del tag <head></head> occorre creare una funzione JavaScript che al click sul relativo link scatena l’apertura del pannello FancyBox come riportato sotto.

Copiate e incollate questo codice  all’interno del tag <head></head> del vostro file.html.

jQuery(document).ready(function() {
$(".video").click(function() {
$.fancybox({
'padding': 0,
'autoScale': false,
'transitionIn': 'none',
'transitionOut': 'none',
'title': this.title,
'width': 640,
'height': 385,
'href': this.href.replace(new RegExp("watch\\?v=", "i"), 'v/'),
'type': 'swf',
'swf': {
'wmode': 'transparent',
'allowfullscreen': 'true'
}
});
return false;
});
});

Soffermiamoci un attimo su alcuni particolari:

Riga n.2

$(".video").click(function(){

La classe (“.video”) corrisponde alla classe che assegneremo al link il quale scatenerà l’apertura del pannello FancyBox con il video YouTube.

Riga n.8

'title': this.title,

Attraverso questo parametro dichiariamo di leggere il parametro “title” contenuto all’interno del link che andremo a costruire e verrà mostrato all’apertura del pannello FancyBox.

Riga n.9 e 10

'width': 640,
'height': 385,

Queste due righe determinano le dimensioni in larghezza e altezza del pannello FancyBox.
(Ricordatevi di non esagerare nelle dimensioni in quanto l’attuale risoluzione standard dei monitor si aggira intorno ai 1024px x 768px).

È arrivato il momento di mettere in piedi il tutto

Infine, come ultimo passaggio occorre inserire all’interno del nostro tag <body></body> la nostra video gallery contenente uno o più link (nell’esempio che andrete a vedere ne saranno inclusi 4 formattati in una lista) che apriranno i rispettivi pannelli FancyBox

<a title="MTV Bumper - Motion Graphics" href="http://www.youtube.com/v/x3BVS1d6MWI?fs=1&amp;autoplay=1">
<img src="construction/thumb/1.png" alt="" />
</a>

Vediamo come viene costruito il link.

• attributo title=”" (mostrerà il titolo che andremo ad inserire, il quale verrà mostrato all’apertura del nostro pannello FancyBox)
• autoplay=1 (Inpostare questo parametro su 1 se vogliamo che il video parta in automatico all’apertura del pannello FancyBox, evitando così un ulteriore click).
• x3BVS1d6MWI (Questo parametro rappresenta l’id del video che siamo interessati a mostrare).

Per recuperare l’id di un video YouTube vedere l’immagine sottostante.

L’immagine che ho deciso di inserire all’interno del link non è altro che una miniatura creata manualmente da me a puro scopo stilistico, se non vi interessa potete tranquillamente ometterla e inserire un testo all’interno del link come: Visualizza il video.

Inserire tanti link quanti sono i video che volete aggiungere alla videogallery all’interno della vostra pagina.html variando solamente il titolo e l’id del video come mostrato sopra.

Infine potete stilare la vosta pagina.html a vostro piacimento creando un foglio di stile.

Date un occhiata alla demo oppure scaricate il tutorial per modificarlo o condividerlo a vostro piacimento e ricordate di lasciare un commento per qualsiasi necessità.

Come annunciato ormai qualche giorno fa, Google, ha finalmente pubblicato Google+ che per chi non lo sapesse, è il nuovo Social Network firmato dalla casa di Mountain View con importanti novità rispetto ai rivali Facebook e Twitter come:

• Utilizzo delle cerchie per organizzare i nostri amici,
• Completa intregrazione con l’account Google,
• Videoritrovi o “Hangout” con la possibilità di interegire con 10 nostri amici.

Google+ è disponibile solamente per utenti che possiedono un account Google e quindi Gmail!

Per chi volesse approfondire, Google, ha inoltre pubblicato una demo/presentazione di tutte le novità di questo interessantissimo progetto: www.google.com/+/demo/

Guardate il video qui di seguito per avere una breve anteprima del nuovo Google +

Secondo la stima di alcuni analisti il nuovo Google + sarà in grado di superare il gigante di Palo Alto Facebook con l’arrivo delle applicazioni per i sistemi IOS iPhone e iPad.

Google + è chiaramente disponibile come App fino a questo momento solo per i sistemi Android, ma fonti attendibili come il profilo ufficiale Google+ di Erica Joy (responsabile dello progetto Google TV) conferma che sono state prodotte ed inviate ad Apple per l’approvazione le applicazioni per i dispotivi IOS come iPhone e iPad quindi l’uscita sull’App Store è ormai imminente, in quanto, si attende solamente l’approvazione da parte di Apple delle due applicazione che dovrebbe risolversi nel giro di 2 settimane (tempo necessario per l’approvazione).

Attualmente l’utilizzo di Google + con i sistemi mobile è possibile tramite la Web-App disponibile all’indirizzo: plus.google.com per poter utilizzare alcune funzioni di Google+ come la Video Chat (iPhone di 4° generazione in quanto i precedenti non possiedono la fotocamera anteriore) e la possbilità di caricare delle foto sul profilo.

Google+ il tanto atteso social network di casa Google che sarà il nuovo concorrente dell’attuale leader Facebook è ancora ad ingresso limitato tramite invito, anche se alcune fonti non ufficiali come vari Blog o Forum comunicano il contrario.

Ma oggi voglio regalare ai lettori più veloci 250 inviti a Google+ che solo i più veloci avranno la possibilità di accapparrarsi un ingresso nel nuovo Social Network della BigG e dare la possibilità ad altre persone di entrare a far parte di questa cerchia ristretta di utenti.

Come si ricevono gli inviti?

Per ricevere il vostro premio non vi servirà altro che:

• Cliccate sul pulsante Google +1 all’inizio di questo articolo;
• Premere il pulsante “mi piace” di Facebook in fondo a questo articolo;
• Lasciare un commento inserendo il vostro indirizzo di posta elettronica (Account Gmail) con il quale potrete accedere a questo nuovo servizio da moltissimi atteso;

Se sarete fra i primi 250 ad aver effettuato i vari passaggi sopra elencati, riceverete il vostro meritato invito a Google+ appena possibile. Purtroppo a causa di un sovraffollamento di richieste non riusciremo ad accontentare tutti subito ma l’impegno preso verrà mantenuto nel più breve tempo possibile.

Ora, però, non perdete tempo, accapparratevi il vostro invito: cliccate prima sul pulsante “+1″, poi sul pulsante “mi piace” di FaceBook e commentate l’articolo digitando il vostro indirizzo gmail.

Che la sfida abbia inizio!!!

Ancora una volta, voglio condividere insieme a voi una straordinaria creatura dell’ottimo Flep Studio, una photogallery (FullScreen oppure ridimensionabile) realizzata in Flash & ActionScript 3.0 completamente personalizzabile e gestita da Xml.

Il tutorial si tratta di una photogallery visualizzabile sia in FullScreen sia ad una dimensione fissa gestita da un file XML esterno che carica le miniature al centro disposte a griglia generate in automatico.

L’intervento sul file Sorgente FLA non è necessario in quanto basta caricare le immagini, settare le dimensioni delle immagini e decidere se visualizzare la photogallery in FullScreen oppure ad una dimansione prestabilita dal file XML ed il gioco è fatto.

Files inclusi nel pacchetto:

• Main.fla
• Pacchetto com/flepstudio
• Xml/config.xml
• Pacchetto caurina.transitions
• Cartella images
• Swffit.js
• Swfobject.js
• Index.html
• Variabili Actionscript
• Main.as: XML_URL ( Se necessario cambiare il valore dell’url assoluto o del percorso che punta al file config.xml alla linea 42 )

Variabili da considerare bel file XML:

• image_width: larghezza della galleria
• image_height: altezza della galleria
• full_view: visualizzazione della galleria a 100% schermo intero settando “true” oppure per una visualizzazione a dimensione prestabilita impostare “false”.

<config image_width="640" image_height="400" columns="8" full_view="true">

Per installare il tutto:

• Aprire main.fla e com/flepstudio/Main.as e se necessario cambiare la variabile XML_URL con un url assoluto o percorso che punta al file config.xml alla linea 21.
• Ricreare main.swf dal main.fla
• Caricare main.swf, xml/config.xml, index.html, swffit.js, swfobject.js e la cartella images.

Visualizza la demo o scarica il pacchetto.zip

Già da qualche settimana, Google, il più grande motore di ricerca al mondo aggiunge una nuova e potente funzione per quanto riguarda la ricerca dei contenuti, implementando la possibilità da parte di tutti gli utenti possessori di un account google di votare e consigliare i migliori contenuti web attraverso il pulsante Google+1.

Disponibile da qualche settimana, ma solo da alcuni giorni a questa parte in Italia, il pulsante Google +1 rappresenta un’ulteriore passo in avanti verso il mondo dei social network.

Google+1, infatti, non è altro che un semplice pulsante che compare accanto a ogni risultato dopo aver effettuato una ricerca, dove ogni utente possessore di un profilo pubblico Google (purtroppo non disponibile per i possessori di account Google Apps) ha la possibilità di votare i risultati della ricerca come, un determinato articolo, sito, o un qualsiasi contenuto web e di conseguenza “consigliarlo” a tutti i suoi “amici” come l’ormai famoso “Mi Piace” di Facebook.

Gli “amici” non sono altro che i contatti presenti all’interno della nostra rubrica Gmail, che quando, a loro volta, effettuaranno una ricerca su Google non solo verranno loro prima presentate le pagine più votate dai loro conoscenti in base alla ricerca fatta ma verrà loro inoltre comunicato l’amico che fisicamente ha votato/consigliato quel determinato contenuto.

Google in questo modo riesce a delineare un “Profilo” per ogni utente dato dalle nostre ricerche, con l’obiettivo di affinare il più possibile i risultati dando primaria importanza a ciò che i nostri amici consigliano.

“Spesso quando abbiamo la necessità di acquistare una qualsiasi cosa, come un auto, un libro, un computer, siamo abituati a raccogliere delle impressioni, consigli, da chi già lo possiede per essere sicuri di non commettere degli errori.
Il parere di un estraneo si potrebbe rivelare utile ma alle volte potremmo essere un pò scettici perchè non sappiamo quali siano le abitudini, le esigenze, o quanto questa persona sia affidabile, ma il parere di un nostro amico o conoscente verrà preso maggiormente in considerazione in quanto esiste un legame e una sorta di affidabilità”.

Proprio per questo motivo Google considera molto prezioso il consiglio di un amico e quindi attribuisce a questo un peso di elevata importanza tanto da farlo prevalere rispetto ad altri nei criteri di ricerca.

Infine per tutti coloro possessori di un blog o sito web c’è la possibilità di aggiungere il pulsante +1 scegliendo tra una serie di bottoni personalizzabili attraverso una pagina appositamente creata dove viene generato il codice da copiace e incollare all’interno di ogni nostra pagina o contenuto web.

Spesso, quando si realizza un sito web, ci si limita ad inserire una serie di parole chiave pertinenti con il contenuto, ma l’ottimizzazione rappresenta un fattore da non sottovalutare in quanto i motori di ricerca diventanto man mano sempre più sofisticati nelle loro richieste, per favorire il posizionamento dei risultati.

Pertanto, è indispensabile seguire queste semplici 10 regole per favorire il vostro Page Rank nel motore di ricerca più potente al mondo, Google.

1. Contenuto

Il primo fattore di grandissima importanza per una buona posizione in classifica (Page Rank) è senz’altro creare contenuti sempre più aggiornati e pertinaneti. Aggiungere regolarmente contenuti nuovi e originali, e assicurarsi che dispongano termini di ricerca attinenti, migliorerà solo il vostro SEO.

2. Tag Meta

I popolari Tag <meta> presenti nella sezione head rappresentano descrizione e parole chiave.
La descrizione deve essere una frase piena di contenuti che illustra lo scopo del sito.

<meta name="description" content="Web agency di Verona, è un'azienda specializzata nella realizzazione di siti web per Verona. Offre soluzioni per lo sviluppo di siti web dinamici, campange di web marketing, posizionamento siti motori di ricerca." />

Le parole chiave sono termini di ricerca chiave che gli utenti useranno per cercare un argomento specifico.
Inserite alcuni termini chiave, ma attenzione a non esagerare altrimenti verranno ignorati.

<meta name="keywords" content="News sul mondo del web, Download, Blog, Css, Programmazione, Flash, jQuery, SoftWare Gratis, Tutorial, WebDesign, Guide e molto di più" />

3. Titolo della pagina

Il titolo della pagina è fondamentale per la vostra classifica SEO, verrà visualizzato nei risultati della ricerca ed è uno dei primi elementi visti dal motore di ricerca.
Assicuratevi che il titolo sia pertinente, conciso e contenga parole chiave.

<title>Creative-Ispiration - Official WebSite</title>

4. Tag Header

L’uso corretto del tag header aiuterà un motore di ricerca a determinare i punti chiave nel testo di una pagina.

<h1> viene solitamente usato per i titoli di una pagina o degli articoli ed è il testo più importante. Seguono in ordine di importanza <h2>, <h3>, <h4>, <h5>, <h6>

5. Attributi ALT

L’attributo ALT viene usato per applicare alle immagini descrizioni di testo. In questo modo si aggiunge testo pertinente al codice sorgente e si offre agli utenti una maggiore accessibilità. Se un’immagine non è presente, al suo posto appare una descrizione di testo.

<img src="google-10regole-per-in-seo-di-successo.jpg" alt="Google Rank - 1o regole per ottimizzare il proprio sito web e realizzare un seo di successo">

6. Attributi Title

L’attributo title viene usato per aggiungere informazioni aggiuntive e viene applicato al testo o alle immagini. Viene sfruttato come alternativa o insieme all’attributo ALT. Se inserito nello stesso elemento dell’attributo ALT ci si assicura che il Tooltip verrà visualizzato in tutti i browser.

<a href="http://www.creative-ispiration.com/googleRank-1oregoleperottimizzareilpropriositoweb" alt="1o regole per ottimizzare il proprio sito web" title="1o regole per ottimizzare il proprio sito web">Google Rank</a>

7. SiteMap

Le Sitemap sono un metodo efficace per informare Google sulle pagine di un sito. Assicurano che tutte le pagine incluse vengano esaminate aumentando la visibilità del sito.

8. Collegamenti

I collegamenti rappresentano un modo efficace per aumentare la visibilità di un sito web. Tuttavia, è importante che i collegamenti vengano costruiti in modo “naturale”. Evitate quindi la realizzazione di collegamenti artificiali come l’invio di link a directory o il loro acquisto.
Google è molto attento e soprattutto molto severo da questo punto di vista.

9. URL

Gli URL ottimizzati per la ricerca devono contenere parole chiave attinenti al contenuto della pagina. Se è una pagina che parla ad esempio di tecnologia, l’URL della pagina potrebbe essere “technology.html”. Altrimenti, se il contenuto riguarda un prodotto in particolare come, ad esempio, il “MacBookPro” usate il suo vero nome: “macbookpro.html”.

10. Social media

Altri strumenti di notevole importanza sono l’uso dei Social NetWork come Twitter o Facebook che in questo caso giocano un ruolo di notevole importanza in quanto più si parlerà di voi più le vostre visite aumenteranno in maniera esponenziale.

Da oggi grazie ad OpenCart, un’ottima risorsa gratuita con Licenza OpenSource, è possibile creare splendidi siti di e-commerce completi e assolutamente funzionali in piena facilità e autonomia anche per chi non ha le competenze informatiche o semplicemente il tempo necessario per affrontare la costruzione da zero di un proprio negozio virtuale.
Esistono molti strumenti per la creazione di un e-shop come ad esempio:
OSCommerce, Magento, Virtuemart, Zen-cart ma a mio parere OpenCart rappresenta una svolta nel mondo dell’e-Commerce OpenSource per la sua semplicità d’uso, per la facile configurazione (anche per utenti non esperti), per le moltissime opzioni a disposizione, per la robustezza del codice con il quale è stato sviluppato (PHP versione 5 e database MySql), e per l’ottimizzazione per i motori di ricerca.

OpenCart è molto versatile e capace di adattarsi completamente alle più svariate esigenze e funzionalità, inoltre, sul proprio sito web, mette a disposizione una serie infinita di strumenti, infatti è possibile trovare tutta la documentazione necessaria, demo, video, supporto, un forum di discussione, ed una grande quantità di estensioni per arricchire il vostro negozio virtuale, come ad esempio il modulo per il CheckOut creato ad hoc per il gruppo Unicredit ad un costo di 34,00€ già pronto all’uso (cifra ridicola se si prova a pensare quanto tempo occorre per crearlo da zero).

Alcune funzionalità principali:

• Utilizzo di valute diverse
• Sfruttare i template
• Pubblicare recensioni e voti per i prodotti,
• Configurazione tasse
• Calcolo del peso della spedizione,
• Search Engine Optimization (SEO),
• Sconti basati su Copuon,
• Report,
• Traduzione in varie lingue (vedi sez. Extensions)
• e …

OpenCart, come anticipavo qualche riga sopra include inoltre la possibilità di aggiungere un proprio template, oltre a quelli di default, che possiamo acquistare ad un prezzo ridicolo (in media 20$) direttamente sul sito OpenCart o sceglierne svariati dal famoso ThemeForest.

Ma vediamo qui di seguito un video di presentazione del progetto preso direttamente dal sito OpenCart

Il problema dei font è da sempre un punto a sfavore per tutti gli Web Designer che nel costruire un sito web dovevano fare i conti con i cosidetti “Font Web” ossia quella cerchia ristretta di font (Arial, Helvetica, Times New Roman, sans-serif, ecc…) che era possibile utilizzare per essere certi che fossero fisicamente contenuti all’interno della libreria del sistema opertivo, in altro parole per garantirne la compatiblità e la corretta visualizzazione.

Esistono ad oggi moltissimi strumenti per superare questo ostacolo ed incorporare i vari font, come, giusto per citarne uno (Font Squirrel) come parlavo in un mio precedente post ma la cosa è diventata a mio avviso macchinosa in quanto occorreva:

• Scaricare il pacchetto contenente il font
• Caricarlo in ftp
• Richiamare i font all’interno del Css
• Aggiungerlo all’attributo “Font Family”

Ma oggi vi voglio presentare Google Web Font, uno strumento a mio avviso fantastico in termini di semplicità di utilizzo e di comodità.

Google Web Font rappresenta una vastissima libreria di font OpenSource (presente sui loro server), suddivisa in categorie, che possiamo sfruttare utilizzandola all’interno di qualsiasi sito web semplicemente inserendo una riga di codice.

Ma vediamo immediatamente come funziona:

1= E’ possbilite accedere alla libreria Google Web Font a questo indirizzo dove possiamo scegliere il font che più ci piace

2= Una volta individuato il font possiamo notare tute le sue caratteristiche, testarlo, premendo il puntante “Launch in font previewer” dove possiamo editare del testo per vederne l’immediato risultato con il nostro testo o semplicemente utilizzarlo nel nostro sito web cliccando sul pulsante “Use this font” (v.Figura).

3= … Non resta altro che implementare il font

A questo punto l’unica cosa che occorre fare è richiamare il font all’interno del tag <head></head> del nostro template inserendo il codice fornito, ad esempio:

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

Infine basta inserire il nome del font (nel nostro esempio Artifika) all’interno del nostro css:

h1 { font-family: 'Artifika', arial, serif; }

Vi siete mai trovati a dover inviare file di grandi dimensioni ad un cliente o amico e di non avere i mezzi adeguati per farlo?
Non servirà più creare un accesso FTP per trasferire dei file perchè oggi vi segnalo WeTransfer, uno splendido e veloce servizio on-line sviluppato in flash assolutamente gratuito senza la richiesta di alcuna registrazione dove potrete caricare un file di grandi dimensioni (Max 2GB) e condividerlo con chiunque inserendo semplicemente l’indirizizzo mail del destinatario.

WeTransfer si presenta con un’interfaccia molto molto elegante caratterizzata da immagini di grande impatto come sfondo (“cartelloni pubblicitari” che permettono allo staff di mantenere in vita i server che contengono i nostri file caricati senza chiederci memmeno una registrazione) mentre al centro noteremo un riquadro dove aggiungere:

• Il file da caricare
• l’indirizzo mail del destinatario
• il tuo indirizzo mail
• ed eventualmente la possibilità di aggiungere una descrizione

Una volta caricato il tutto arriverà una mail al destinatario contentente il link dove potrà scaricare il file per un lasso di tempo di 2 settimane.
Questo è il tempo massimo che WeTransfer conserva i file sui propri server per poi rimuoverli successivamente.

Beh cosa dire ancora, non vi resta altro che provare, vedrete che ne rimarrete molto soddisfatti.

Ci siamo mai chiesti quali siano le strategie migliori per rendere il nostro blog/sito web più redditizio sfruttando il potente motore di Google AdSense?
Quale formato di annunci è meglio scegliere?
In quale punto del nostro Blog/Sito web conviene posizionare un’annuncio piuttosto che un’altro?

A fronte di queste domande o perplessità Google ha finalmente deciso di pubblicare all’interno della sezione “supporto” di Google AdSense una guida ufficiale molto dettagliata di suggerimenti e strategie vincenti per la scelta di posizioni e formati da scegliere per gli annunci pubblicitari con lo scopo di migliorare il rendimento e le entrate del proprio sito web/blog grazie ai report forniti dagli utenti in tutti questi anni.

Google fa una netta distinzione tra i vari siti web classificando varie tipologie:

• Siti di notizie
• Siti di annunci on-line
• siti di giochi
• forum
• blog

Ogni tipologia sopra elencata avrà pertanto una serie di annunci e posizioni consigliate per l’ottimizzazione anche a seconda del tipo e della lunghezza della pagina, con esempi dettagliati per ogni tipo di pagina e sito web.
Beh, cosa aspettate date subito un occhiata alla fonte ufficiale o scaricate direttamente la guida in pdf che ho generato comodamente per voi.

Come da suggerimento di un nostro carissimo lettore andiamo a proporre questo accattivante tutorial scaricabile gratuitamente contenente un menu a comparsa in JavaScript simil Flash che sfrutta il FrameWork MooTools per arricchire con un effetto alternativo il vostro sito Web/Blog.

L’installazione è semplicissima occorre solamente includere nel file index.html:

• Foglio di stile style.css,
• FrameWork MooTools mootools.v1.2.5.js,
• Plugin MooTools per la creazione del menu global.v12.js,

Ecco come si presenta il nostro file index.html

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<head>
 <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
 <link rel="stylesheet" type="text/css" href="style.css" />
 <script type="text/javascript" src="mootools.v1.2.5.js"></script>
 <script type="text/javascript" src="global.v12.js"></script>
</head>
<body>

 <div id="logo"><a href="#">Creative Ispiration <strong>menu</strong></a></div>
 <div id="menu">
 <div id="opts">
 <ul>
 <li><a href="#">Home</a></li>
 <li><a href="#">Tutorial</a></li>
 <li><a href="#">Resources</a></li>
 <li><a href="#">About Us</a></li>
 <li><a href="#">Advertise</a></li>
 <li><a href="#">Tools</a></li>
 </ul>
 </div>
 </div>

</body>
</html>

Inserire a questo punto il seguente codice JavaScript prima della chiusura del tag </body> per aggiungere al menu la class js_live

<script type="text/javascript">
//<![CDATA[
$('menu').addClass('js_live');
//]]>
</script>

Scaricate il zip contenente il menu per poterlo utilizzare all’interno del vostro SitoWeb/Blog.
in caso di problemi o chiarimenti non esitate a lasciare un commento.

Navigando in rete alla ricerca di una libreria Javascript OpenSource per realizzare grafici e analisi mi sono imbattuto in questo straordinario Framework che voglio condividere insieme a voi in quanto lo considero uno strumento molto utile ma soprattutto ben fatto.
Si chiama HighCharts, ed è una straordinaria libreria formata da tantissimi Grafici interattivi di ogni tipo, ben documentata, compatibile con tutti i browser (anche su dispositivi Mobile), scaricabile gratuitamente per uso personale e completamente personalizzabile per essere inserita all’interno del vostro sito Web/Blog o applicazione web.

Caratteristiche principali di questo Framework Javascript.

Possibilità di realizzare grafici di ogni tipo come:

• Grafici lineari
• Grafici a colonna
• Grafici a barre
• Grafici a torta
• Grafici a dispersione

Inoltre:

• Viene garantita la completa compatibilità con ogni Browser tra cui anche i dispositivi Mobile come iPhone e iPad e il fastidioso Internet Explorer dalla versione 6 in poi,
• Il codice è completamente OpenSource con la possibilità di scaricare il framework gratuitamente per uso personale,
• E’ possibile gestire numerosi eventi grazie alle API messe a disposizione per modificare qualsiasi elemento come aggiungere, rimuovere e modificare assi, punti, ecc,
• Completa gestione/modifica di ogni elemento come posizionamento e stile,
• Possibilità di effettuare lo Zoom su un grafico per esaminare un punto in particolare,
• Possibilità di modificare tutte le etichette di testo degli assi, dei dati, dei titoli con la possibilità di ruotarli in qualsiasi angolazione.
• Possibilità di stampare il grafico ed esportarlo in diversi formati Raster come PNG, JPG, PDF e in formato vettoriale come SVG.

Infine l’intero FrameWork Javascript è documentato in ogni singolo dettaglio con una guida passo passo per l’installazione, l’impostazione delle varie opzioni disponibili, l’esportazione dei moduli e infine il disegno a mano libera.