La scelta di un framework, come più volte ripetuto, è una decisione non facile e molto personale. Il caso del css, trattato in questo post, non fa eccezione. Fra i molti frameworks a disposizione occorre sempre tener presente alcuni fattori di scelta importanti, alcuni dei quali totalmente soggettivi.

Se, ad esempio, siete dei beginners, occorre orientarsi da una parte, se, altresì cercate uno strumento per esperti occorre orientarsi da un’altra. Tanto per fare un esempio.

In sostanza, non esiste il framework migliore, ma esiste quello con cui si riesce a lavorare al meglio ottimizzando la produttività.

Assodato questo, eccovi un elenco dei migliori strumenti per CSS a disposizione. Tra questi, orientatevi inizialmente verso quello che sembra rispondere al meglio alle vostre esigenze di designers.

A voi la scelta!

52Framework

Chiamato il framework del futuro poichè mette a disposizione tutti gli strumenti per lavorare con i nuovi standard html 5 e css3. Inoltre supporta tutti i browser moderni (IE6 incluso).

Oltre alle funzioni di base ormai incluse in tutti i framework CSS, consente di utilizzare, coe detto, molti degli elementi introdotti nell’HTML5 : header, nav,section, article, footer.

Per le caratteristiche dei CSS3 implementabili possiamo elencare :

• l’uso del nuovo selettore ::selection
• gli angoli arrotondati su qualsiasi elemento
• l’ombra per il testo
• l’ombra per gli elementi mostrati come blocco

Va precisato che il framework è ancora in versione beta e, quindi, ogni parere al riguardo da parte di utenti finali è ben accetto.

Elements CSS

E’ un framework che ha come scopo quello di rendere facile ed efficiente la scrittura di codice CSS con un’organizzazione snella dei progetti in files e folder.

Leggero come strumento e molto facile da utilizzare include una vasta collezione di classi per facilitare la programmazione. Nonostante ogni tipologia di file incluso nel package da scaricare sia ben commentato, non esiste nel package stesso nessun tipo di documentazione.

BluePrint

E’ uno dei framework più gettonati al momento. Guida i web designer alla costruzione di una pagina web ben strutturata disponendo gli elementi su una griglia,fornendo un comodo ed elegante set tipografico, generando un foglio di stile per stampare ed estendendo le funzionalità di base con alcuni utili plugin.

Ecco le sue principali caratteristiche:

• Griglia facilmente personalizzabile
• Tipografia sensata
• Dimensionamento dei font relativo
• Baseline tipografia
• Reset perfetto con i CSS
• CSS per stampare
• Versione compressa
• Pochi fronzoli

Eccovi una piccola guida in italiano a BluePrint.

YUI Grid CSS

E’ il framework targato Yahoo!. Davvero ottimo strumento per la realizzazione di applicazioni web. Fornisce template per layout facilmente customizzabil con le seguenti caratteristiche :

• facili da personalizzare
• sono completamente table-less, poichè realizzati a DIV senza fare uso di tabelle
• l’ordine di visualizzazione delle colonne è indipendente dall’ordine con cui sono presenti nel codice.
• il footer si piazza automaticamente  in fondo alla pagina, indipendentemente dalla colonna più lunga (self-clearing footer)
• supporta il grado A di compatibilità con i browser. In pratica, si migliora progressivamente il supporto verso le nuove implementazioni dei vari browser tralasciando il supporto verso i browser più datati e obsoleti.
• sono compatibili con gli standard più evoluti.
• le larghezze sono facilmente impostabili.

Il file di installazione mette a disposizione layout a due, tre, quattro colonne di varie misure e proporzioni, fissi e fluidi.

Content With Style

Framework molto snello e pratico da utilizzare. Il codice della pagina che fornisce l’ossatura XHTML è molto leggibile e di facile personalizzazione. I file CSS presenti nel pacchetto di installazione sono ben commentati.

Include ben sei differenti layouts, navigazione verticale con una e due colonne e navigazione orizzontale con due colonne. Nel package sono anche inclusi oltre 30 files css e un framework HTML.

The 1kb CSS Grid

Il nome dovrebbe già avervi detto qualche cosa. Si tratta di un incredibile e leggerissimo framework molto semplice e flessibile nell’uso. Consente di creare griglie da 9 a 16 colonne personalizzabili.

Una sua importante peculiarità è che The 1Kb CSS Grid ti permette di scegliere la griglia prima di scaricarla evitando di scaricare ciò di cui non si ha bisogno. A questo link trovate una guida molto ben dettagliata su come usare questo Framework.

Un blog che voglia decollare in termini di traffico non può prescindere da un’ottimizzazione per i motori di ricerca delle sue pagine. Tante volte ho sottolineato come la SEO sia un fattore attualmente troppo importante per la crescita di un blog e non può essere, come tale, assolutamente trascurato.

Non si richiede di esser esperti SEO, ma quanto meno un’infarinatura di base è fondamentale per muoversi bene e al meglio nella fitta rete e nelle trappole dei motori di ricerca.

Il web è zeppo di guide e tutorial SEO per esperti e non, ma credo che spesso sia più benefico seguire alcuni blog-pilastro per consolidare e mettere in pratica alcune conoscenze in questo aspetto.

Io, giorno dopo giorno, divoro articoli SEO di una dozzina di blog e, a dire il vero, mi hanno arricchito molto di più queste letture che decine di guide asettiche suggerite in rete.

Volevo, appunto, condividere con voi la lista di questi blog che sono un punto fermo del mio reader.

Prima di elencarvi i blog, alcune veloci considerazioni.

Nella mia lista ci sono solo due blog italiani. Mi farebbe piacere se me ne segnalaste altri nei commenti, ma, al momento non vedo davvero altro materiale interessante nel nostro stivale. Molti blog, di sicuro, li avrete già nel vostro feed reader, ma spero che almeno qualcuno di sconosciuto ci sia.

Alcuni di questi blog non trattano solo l’argomento SEO e vi consiglio, a questo punto, di leggerli per intero. Eccovi l’elenco

• SeoPoint
• TagliaBlog
• Search Engine Journal
• SEO Blog
• SEO by the Sea
• SEOMoz
• SEO Optimise
• SiteProNews
• Houston Search Engine
• Seodesignsolutions
• Palatnikfactor
• SeoBook

Aspetto le vostre segnalazioni!

Se volete inserire dei banner (ciascuno composto da un’immagine) a rotazione sulle pagine del vostro blog, vi consiglio di non disturbare plugins o script particolari, perché si tratta di scrivere davvero una riga di codice per realizzare quanto detto.

In primis, scegliete le immagini e date loro un nome con un progressivo numerico del tipo :

• immagine_1.jpg
• immagine_2.jpg
• immagine_3.jpg
• ………………………

Fatto questo, potete semplicemente sfruttare la funzione rand() del php in tal modo :

<img src=”immagine_<?php echo rand(1,X); ?>.jpg” width=”123” height=”123” />

dove X dipende dal numero delle immagini da voi scelte e, logicamente, altezza e larghezza sono personalizzabili.

Piazzate questo codice laddove volete inserire, ad esempio, un banner a rotazione e il gioco è fatto.

Risulta decisamente ostico racchiudere in un post, per quanto lungo e dettagliato sia, il significato, i benefici e le attuali applicazioni dell’Html 5.

Ci provo, avendo comunque a disposizione fonti autorevoli che vi riporterò alla fine. Anche in questo caso, tratterò l’argomento senza scendere nel dettaglio del codice, ma cercando di fornirvi alcune nozioni importanti per capire le potenzialità di questo rinnovato linguaggio.

Premessa

Un primo articolo che trattava di risorse utili per approcciare all’Html 5 lo avevo pubblicato mesi fà premettendo come un aggiornamento dell’html non avveniva da oltre dieci anni. Il che era inaccettabile per un linguaggio di base, soprattutto in considerazione dell’evoluzione del web verso il sociale, verso i portali di video e audio sharing e verso il mondo dei blog in crescita esponenziale. Troppo distante e obsoleto appariva l’html dal contesto web attuale. E allora una revisione e, soprattutto un rinnovo, urgevano senza dubbio. Si intendeva andare verso un markup più semplice e chiaro.

Di questo si è parlato per tutto il 2009, ma ora possiamo cominciare a toccare con mano l’html 5 iniziando a vederlo spuntare qua e là navigando in rete. Non è più il futuro del web, ma sempre più il presente.

La Nuova Struttura

A dover presentare le ghiotte novità dell’html 5 non si può non iniziare con i nuovi elementi messi a disposizione. Si tratta, come vedrete, di novità chiaramente indirizzate a rivisitare la struttura di una pagina web. L’immagine qui sotto vi dà subito un’idea di quanto e come stia cambiando.

• <header> – Questo elemento contiene informazioni introduttive di una sezione o pagina. Anche di una sezione, quindi. Non è più solo l’elemento che apre l’inizio pagina, ma lo si inserisce anche come elemento iniziale di qualsiasi sezione importante all’interno della pagina stessa. Non sarà strano, quindi, costruire una pagina web con più tag <header> al suo interno.
• <nav> – Elemento riservato ad una sezione di un documento o pagina che contiene links (ad altre pagine oppure ad altre sezioni della stessa pagina).
• <section> – Entriamo nel vivo. Si tratta di un tag che rappresenta un generico documento o applicazione. Potete pensarlo anche come il div che separa porzioni importanti dello stesso documento.
• <article> – Elemento che rappresenta una porzione di pagina che vive, per così dire, di vita propria. Basta pensare ad un post su un blog, oppure ad una entry su un forum. Si tratta, in entrambi i casi, di item indipendenti nel contesto di una pagina.
• <aside> – Rappresenta contenuti in qualche modo relazionati con l’area principale della pagina. La nostra sidebar, per capirci, con articoli correlati, commenti recenti, tag clouds e simili.
• <figure> – Elemento che rappresenta un contenitore di immagine a livello di blocco, con didascalia.
• <dialog> – L’elemento indica una conversazione tra due o più persone : il tag <dt> sta ad indicare il nome di colui che parla mentre il tag <dd> racchiude il discorso vero e proprio.
• <footer> – Speculare nel significato all’elemento <header> presentato all’inizio. Per lo stesso motivo, non ci sono problemi ad inserire più volte questo tag all’interno di una pagina web.
• <video> – Elemento che consente banalmente di inserire un video all’interno di una pagina senza bisogno del player preposto alla riproduzione dei video
• <audio> – Elemento esattamente speculare al precedente per file audio.

Non sono presenti in questo elenco tutti i nuovi tag inseriti, ma solo i più importanti e significativi. La lista completa la trovate qui.

Tanto per farvi alcuni esempi pratici e veloci ecco come scriviamo il codice relativo ad un’immagine con didascalia in xHtml :

<img alt="Bmw X6" src="/bmw.jpg" border="0" height="362" width="563" />
<b>Figura 1. Una spendida macchina</b>

In Htlm 5, utilizzando il tag figure, diventa :

<figure>
<img alt="Bmw X6" src="/images/bmw.jpg" height="352" width="563">
<legend>Figura 1. Una splendida macchina</legend>
</figure>

Eccovi, per completezza, un ottimo articolo in cui vedrete costruite step by step una pagina con i nuovi tag appena presentati.

La domanda, ora, nasce spontanea e già ve la sarete posta fin dalle prime righe di questo articolo. Ma quali e quanti browser supportano Html 5? E si perché tutte belle e interessanti le novità presentate finora, ma se poi nessun browser è in grado di interpretarle, direi che tutto si rivela inutile.

Vi premetto che, allo stato attuale, la situazione è abbastanza sconfortante. Vediamo perché.

Uno strumento gratuito molto utile e da inserire subito tra i preferiti è FindMeByIP. Non ci vuole molto a capire, se ci cliccate, cosa faccia esattamente questo sito e a cosa serva. Ma oltre a rivelarvi info importanti sul vostro IP, browser utilizzato, Sistema Operativo e simili, vi fornisce, più in basso dati molto interessanti su cosa è supportato dal vostro browser.

Vediamo insieme cosa ne è uscito analizzando l’ultima versione dei 5 browser più famosi e utilizzati nel web : Mozilla Firefox 3.5, Google Chrome 3.0, Opera 10, Safari 4, Internet Explorer 8. Tutte versioni stabili, ovviamente.

Senza perderci in chiacchiere vi dico subito che, come supporto ai nuovi standard introdotti con l’html 5, il miglior browser è risultato Chrome anche se non gli si può attribuire un 10 pieno. Dietro, staccatissimi, tutti gli altri con risultati scadenti soprattutto per Opera 10 e IE 8. A dimostrazione che siamo ancora ben lontani dalla perfezione, eccezion fatta per Chrome che si difende molto bene. Ogni browser ha, pertanto, le sue pecche e le sue mancanze in relazione a qualche aspetto del linguaggio.

Così stando le cose, si spiega la lentezza e la gradualità della sua introduzione nel web. Comunque, aualora vogliate leggere dettagliatamente il test effettuato sui singoli browser leggete questo post.

Insomma, html 5 pronto a decollare in un web che, al momento, difficilmente lo accoglierà come si deve.

Applicazioni

Come anticipato prima,  cominciano a spuntare i primi servizi e applicazioni basate sull’html 5. E’ il caso di Bitspace, innovativo HTML5-Based, che integra un player musicale in streaming per riprodurre la vostra musica e organizzarla come desiderate. Se ne parla in questo articolo e vi potete subito rendere conto delle enormi potenzialità dei nuovi standards

Oppure, passando dall’audio al video, eccovi un ottimo uso del nuovo tag video prima presentato : Sublime Video.

Mentre Youtube e Vimeo stanno pian piano affinando le loro versioni basate su HTML5, alla faccia del Flash di Adobe, Sublime Video è un nuovissimo servizio di video sharing che vanta di essere il primo basato in grado di fare completamente a meno di Flash.

Ben testabile su Chrome e Safari, o magari su Internet Explore con Chrome Frame. 

E questo è solo l’inizio…

Volete che i vostri articoli inizino come questo che state leggendo? Cioè con una bella lettera grande il cui stile è da voi deciso nel file style.css del vostro tema.

Il tutto è fattibile senza troppo impegno sfruttando uno pseudo elemento del css ovvero :first-letter

Tale pseudo elemento aggiunge uno stile al primo carattere del testo cui è applicato. Eccovi le proprietà legate a :first-letter

• font
• color
• background
• margin
• padding
• border
• text-decoration
• vertical-align
• text-transform
• line-height
• float
• clear

Logicamente si può combinare con le classi css. Vediamo come realizzare la cosa in due passaggi.

Aprite con il vostro editor il file style.css e incollate il seguente codice relativo allo stile desiderato :

p.article:first-letter {
color:#ff0000;
font-size:xx-large;
}

Fatto questo, capite bene come poter applicare lo stile alla prima lettera di un testo. Infatti, nel caso di questo post :

<p class=”article”>Volete che i vostri articoli inizino come questo che state leggendo?</p>

Vi consiglio, qualora vogliate applicare quanto appena descritto ad ogni post, di crearvi un pulsante custom nel vostro editor Wordpress così da risparmiare tempo prezioso per inserire <p>.

Vi state accorgendo che il vostro blog ha un appiattimento mostruoso di statistiche giornaliere? Visite uniche in stallo? Sempre le stesse fonti di accesso? Insomma, non vedete nessuno spiraglio di crescita?

Bè, questo post non vuole essere miracoloso né tantomeno si vanta di risolvere chissà quali problemi, ma prima di sbattere la testa contro superfici dure alla ricerca di una soluzione che possa sbloccare una situazione apparentemente immobile, provate a dar un’occhiata qui sotto….

Si perché, magari, non avete proprio fatto tutto quello che si deve per lanciare alla grande un blog (appena nato o anche già ben solido) e, prima o poi, tutti i nodi vengono al pettine.

1. Contenuti di Qualità : potrà sembrare scontato, ma partiamo dalle basi. Fatevi un esamino di coscienza e siate sinceri con voi stessi. State scrivendo articoli di qualità? Soprattutto originali, interessanti, stimolanti? Di solito, le spie di questa carenza sono il numero di abbonati al feed e i commenti : se entrambi non decollano, vuol dire che occorre cambiare davvero strategia sui contenuti.
2. Social Network : ormai, nel 2010, non esiste blog o sito web che non condivida i suoi articoli sui vari social. Facebook, Twitter, FriendFeed e simili sono fonti di traffico troppo importanti per le vostre pagine web per poterne fare a meno. Sono centinaia i plugins che vi aiutano a far sì che i vostri post siano condivisi nelle reti sociali. Se peccate in questo, provvedete all’istante
3. Aggregatori : di sicuro meglio per blog emergenti, ma comunque sempre ottime fonti di traffico. OkNotizie, Diggita, Technotizie, ilBloggatore e così via : aggregatori di news o simili dove postare i vostri articoli più interessanti e catturare visite e lettori. Non fatene un’ossessione, ma comunque vale la pena prenderla in considerazione.
4. Commenti : leggete e commentate altri blog? spero proprio di si perché è un modo importante per farsi conoscere e lasciare anche qualche link (laddove usano il dofollow) utile per il ranking. Come più volte sottolineato, leggere deve far parte della vostra attività quotidiana di blogger anche a discapito di qualche post in meno.
5. Tutorial,Guide e How-To : dipende molto dai temi trattati dal vostro blog, ma ogni tanto sfornare un bel post stile tutorial o guida è sempre ottimale. Cercate di non lesinare energie ed impegno perché un articolo ben fatto e strutturato potrebbe essere una vetrina fondamentale per il vostro blog.

Queste sono solo alcuni tra i più importanti motivi di non-crescita del vostro blog. Ne volete aggiungere altre’?

E pian pianino anche Chrome si sta attrezzando. E Firefox non è più così lontano. Fioccano le estensioni per il browser di Google ed è arrivata da poco anche quella che consente il download di video da Youtube.

Si chiama S-YouTube Downloader e aggiunge un link sulla menu bar per ogni video che state visualizzando sul più famoso portale di video sharing.

Cliccate sul link ed avrete il pannello delle opzioni per il download con tutti i formati disponibili in cui salvare il video (separati tra formato per pc e mobile phone).

Estensione affidabile e poco intrusiva.

Messa subito al lavoro…eh eh

Inutile sottolineare come uno dei valori aggiunti di Wordpress sia, senza dubbio, il vastissimo e completo mondo dei plugins.Non esiste ambito o aspetto del web non inglobato in un plugin per dare la possibilità ad utenti finali e webmasters di avere tutti gli strumenti necessari a disposizione per i loro rispettivi scopi.

L’enorme flessibilità di questa piattaforma consente, come saprete, di poter anche creare da soli il proprio plugin (così come il proprio tema, volendo) e di metterlo a disposizione di tutta la community Wordpress.

Occorre solo masticare un po’ di php, html e MySql e non esitare troppo a cimentarsi in questa attività che potrebbe essere non solo personale, ma potrebbe anche diventare un’attività remunerativa qualora lo facciate per qualche cliente.

Su Webm.ag ho scovato un ottimo elenco di 6 completi e dettagliati tutorials utilissimi a coloro che vogliono provare a sviluppare il loro primo plugin e,magari, non sanno bene da dove cominciare.

• Anatomia di un plugin Wordpress (Net Tuts)
• Wordpress Plugin Tutorial (Bluefur)
• Come scrivere un plugin Wordpress (Corpocrat)
• Svillupare e promuovere il proprio plugin Wordpress (Devlounge)
• Il tuo primo plugin (Marl on Wordpress)
• Creare un plugin custom su Wordpress (Net Tuts)

Se avete qualche link da aggiungere alla lista, non esitate!

Il blog genera Business. Il Business produce soldi. Uhm, solo la seconda affermazione mi convince in pieno.

Andiamo per gradi. Non posso nascondervi che, quasi quotidianamente, butto l’occhio al mio account Adsense per verificare le (ridicole) entrate generate dal mio blog. Se vi dicessi che qualche soldino a fine mese non mi fà comodo, la crescita del mio naso bucherebbe inesorabilmente lo schermo.

D’altronde ‘pecunia non olet’ diceva Vespasiano in riferimento al fatto che nessuno disdegna il denaro. Ma da qui a farne il solo e unico obiettivo della mia attività di blogger troppo ne passa. Credo che la chiusura e l’abbandono di molti blog in rete sia dovuto proprio a questo : illusioni di guadagni alla Briatore puntualmente svanite.

Tutto ciò accade perché, alla base della nascita e crescita di un blog, ci si pone solo un obiettivo che è, appunto, quello di rimpolpare il conto in banca. Senza tener conto di tutto il resto e senza riflettere sul fatto che, allo stato attuale, 1 blog su 1000 (per esser ottimisti) raggiungerà notorietà e, quindi, potrà contare su qualche gruzzolo significativo a fine mese. Il resto vivrà per anni in quella sorta di limbo che ti consente solo di metter in tasca qualche spicciolo (da non disdegnare in ogni caso). Nulle di più.

Io, personalmente, ho pensato di puntare ad ottenere altre soddisfazioni che, ritengo, siano inizialmente molto più importanti e gratificanti per un blogger. Molto probabilmente molti non la pensano come me, ma son convinto che, se raggiunti alcuni degli obiettivi qui sotto riportati, molto probabilmente anche le entrate economiche seguiranno di conseguenza.

Commenti

Uno dei parametri più importanti per valutare la bontà di un blog. Per quel che mi riguarda, ricevere molti commenti o ricevere apprezzamenti su un articolo è sinceramente fonte di enorme soddisfazione. Saper di aver contribuito a fugare il dubbio di qualcuno, aver segnalato un servizio interessate per qualcun’altro è molto gratificante. Nel mio piccolo, ovviamente. Un post molto commentato e apprezzato non ha davvero prezzo.

Abbonati

Non c’è dubbio che si punta tutti fortemente a veder lievitare il numero di abbonati al proprio Feed. Anche fosse 1 abbonato a settimana, è comunque buon segnale che gli utenti sono desiderosi di leggervi ogni giorno. Almeno per i primi tempi, un blogger dovrebbe essere fortemente concentrato su questo aspetto.

Followers

Anche da Twitter, ormai, non si fugge. Più che da Facebook, FriendFeed e Buzz, a mio avviso. Nonostante il dilagante spam, comunque resta il fatto che un numero crescente di followers è sinonimo di blog (e blogger, quindi) che suscita interesse. Nulla è casuale su Twitter. Crescere come popolarità su Twitter deve essere motivo di orgoglio e, invece, è troppo spesso sottovalutato.

Citazioni

Son rarità. Va detto. Mi genera sempre una certa emozione quando vedo un mio articolo linkato e discusso altrove. Non parlo di aggregatori o social news, sia chiaro. In qualche occasione mi è, comunque, capitato che un mio post fosse argomento di discussione in un altro blog o in un forum. Erano presenti apprezzamenti positivi e negativi, va precisato, ma il fatto che abbia stimolato un dibattito è sinonimo di articolo interessate in ogni caso.

Apprezzamenti personali

Forse il più grande motivo di soddisfazione. C’è chi non sceglie il commento per farti un complimento. Ma la vecchia e cara email. E’ un modo per complimentarsi leggermente più intimo e sincero, a mio avviso. Nel commento ci può stare anche lo scopo primario del link senza nofollow, a pensarla male. Nella mail che ti arriva personalmente non c’è nulla se non la volontà di invogliarti a continuare così perché così sei apprezzato.

5 motivi per continuare a far meglio insomma…e chissà che, col tempo, non portino anche benefici al portafoglio?!