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.

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.

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>.

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!

Dopo aver, nella prima parte, presentato giusto una introduzione su come gestire le eccezioni in php (blocco try-catch), proviamo a scendere più in dettaglio in questa seconda parte.

Come sempre, facciamo parlare un esempio :

<?
try {
  $var = -5;
  $var2 = -3;
  if ( $var < $var2 )
  {
    throw new Exception($var. " è inferiore a " .$var2. "<br />");
    echo "Stampa qui!!";
  }
}
catch (Exception $excp) {
  echo "Attenzione!! Trovata eccezione:<br />", $excp;
}
?>

che, se lanciato, produrrà a video il seguente output :
Attenzione!! Trovata eccezione:
exception 'Exception' with message '-5 è inferiore a -3
' in c:\programmi\php\www\err.php:7 Stack trace: #0 {main}


Si tratta di uemplice script che racchiude delle istruzioni in un  blocco try. Il fatto di aver lanciato all'interno del blocco un'eccezione  tramite throw, ha determinato l'impossibilità di eseguire le istruzioni  seguenti che troviamo nello stesso blocco try. Ecco perchè la stampa  ‘Stampa qui!!’ non compare nell’output.

Poichè abbiamo istanziato l’oggetto  che appartiene alla classe Exception, tale istanza è riutilizzabile e,  infatti, lo ritroviamo al di fuori del blocco di try dove diviene  argomento di un'istruzione e non ne blocca l'esecuzione.
Ma la gestione delle eccezioni si basa su una serie di variabili e metodi più  importanti da utilizzare nella gestione delle eccezioni. Partiamo con le  variabili :

message: non è altro che il messaggio di errore da passare come  argomento al costruttore della classe.
line: linea esatta del blocco di codice in cui viene generato  l'errore.
file: nome del file PHP in cui si origina l'errore gestito tramite  eccezione.

Attenzione perchè queste tre variabili sono "protette" (non potranno essere  riscritte nè modificate).
Veniamo ora ai metodi :

getMessage(): lo abbiamo descritto nella prima parte : prende come  parametro la notifica di errore che viene generata dal controllo delle eccezioni  e lo invia, come parametro, al costruttore della classe di riferimento.
getLine(): metodo che permette il rinvio alla riga di codice in cui  si verifica l'errore.
getTrace(): metodo che rinvia ad una tabella con le caratteristiche  dell'errore.
getTraceAsString(): metodo che svolge una funzione similare al  precedente creando una stringa con lo stesso contenuto di  informazioni.

Infine va ricordato che il metodo getTrace() presenta 6 differenti elementi  costitutivi :

file: documento in cui si verifica l'errore.
line: riga di codice in cui si verifica l'errore.
function: funzione coinvolta nell'errore.
class: classe coinvolta nell'errore.
type: modo in cui viene richiamato il metodo che potrebbe essere  statico o dinamico.
args: argomenti passati al metodo raccolti in una tabella  associativa.

Nella terza ed ultima parte vedremo, dopo aver digerito variabili, metodi e  altro, come realizzare una classe vera e propria per gestire le eccezioni.
				

Il CSS ha una sintassi per i selettori che permette di riconoscere l’estemsione di un file alla fine dell’attributo href del tag <a>. Questo offre molti vantaggi, non ultimo quello di aggiungere un’icona prima o dopo la parte testuale del link.

Vediamo come. Supponiamo che vogliate aggiungere un’icona ad ogni file zip presente tramite link sul vostro blog. Il codice sarà del tipo :

a[href$='.zip'] {
/* parte dedicata allo stile */
}

Il carattere $ riesce a riconoscere l’estensione del file presente nel tag <a>.

Vediamo, ora, più in dettaglio un esempio concreto dove alcune icone di 16px x 16px  sono allineate prima e dopo un link.

a[href$='.doc'], a[href$='.docx'] {
    background: transparent url(/images/content/icon_word.gif) center right no-repeat;
    padding-right: 18px;
}
a[href$='.pdf'] {
    background: transparent url(/images/content/icon_pdf.gif) center left no-repeat;
    padding-left: 18px;
}
a[href$='.zip'] {
    background: transparent url(/images/content/icon_zip.gif) center left no-repeat;
    padding-left: 18px;
}

Commenti?

Su questo blog, ho solo leggermente sfiorato questo argomento che,di sicuro, merita un’attenzione particolare.

Se siete calciofili, dimenticatevi, per un attimo, il calcio e affini. Parlando di Ajax, infatti, non occorre scomodare la famosa squadra di Amsterdam, ma si tratta di una tecnica di sviluppo per la realizzazione di applicazioni web interattive.

Ajax sta per Asynchronous JavaScript and XML e sviluppare applicazioni HTML con AJAX significa basare il tutto su uno scambio di dati che avviene fra web browser e server che permette l’aggiornamento dinamico di una pagina web senza il classico refresh (ricaricamento) esplicito dell’utente che naviga.

Si parla di linguaggio asincrono poiché tutti i dati che occorrono per il ricaricamento della pagina sono richiesti al server e vengono caricati in background senza che l’utente si accorga di nulla.

Inoltre, le funzioni richiamate sono in JavaScript anche se, sia per l’uso di JavaScript che di XML non vi è nulla di obbligatorio.

In ogni caso, Ajax non è una tecnologia individuale, ma un gruppo di tecnologie utilizzate insieme ( HTML o XHTML, CSS, JavaScript, DOM, XML, XSLT e l’oggetto XMLHttpRequest.)
Anche se le applicazioni web basate su Ajax richiedono molte tecnologie, tutti i browser attuali supportano Ajax, in sostanza.

Dopo questa infarinatura molto breve (in rete trovate decine di siti con guide e tutorial) riprendo l’abitudine, molto apprezzata, peraltro, di proporvi alcune presentazioni in merito davvero molto interessanti e utili qualora vogliate iniziare a confrontarvi con questa splendida tecnologia.

Nella Guida Html 5 di qualche giorno fà avevo profetizzato che le applicazioni del nuovo standard sarebbero cresciute di numero con il passare del tempo. A dar supporto al mio nuovo ruolo di profeta ci pensa anche JAI o “JavaScript Audio Interface” che è uno script open source che fornisce una funzionalità stile juke-box contemplata nel tag HTML5 <audio>

Nessun immagine è sfruttata per creare l’interfaccia del player perchè tutti gli elementi grafici sono inseriti nel <canvas>  a run-time. Tutti i links presenti nella play-list possono essere customizzati tramite CSS.

JAI lavora con tutti i browser che supportano correttamente l’HTML5 e il tag <audio>. Oltre ad una playlist cliccabile, JAI fornisce funzione di  play, pause e controllo del volume.

Sviluppata da Alistair MacDonald trovate tutte le informazioni, demo e download sul sito ufficiale di JAI