Videobox: Lightbox per i video con mootools 11/11/07

Torno volentieri a parlare di Mootools segnalando Videobox; in pratica lo stesso effetto della Lightbox utilizzata per le immagini ma con la differenza che in questo caso si possono caricare i video dalle più disparate piattaforme di video sharing. Trattandosi di framework ho deciso di mostrare i risultati fuori dal blog, questo per evitare di dover caricare "tonnelate" di js esterni...

» continua

Videobox è un file Javascript di circa 6kb ispirato alla Lightbox v2, che sfrutta pezzi di codice di slimbox (clone in ambiente Mootools) ed infine swfobject per embeddare i filmati. Credetemi, davvero molto semplice da utilizzare.

Una volta scaricato lo zip dalla pagina ufficiale, dobbiamo caricare i file in remoto e quindi possiamo aggiungere l' effetto alle nostre pagine.

La prima cosa da fare è richiamare i file js che nel nostro caso sono tre, la libreria mootools, videobox e swfobject; all' interno del tag <head> in seriamo seguente codice:

<script type="text/javascript" src="js/mootools.js"></script>
<script type="text/javascript" src="js/swfobject.js"></script> <script type="text/javascript" src="js/videobox.js"></script>

Quindi, sempre nel tag <head> importiamo il foglio di stile:

<link href="css/videobox.css" rel="stylesheet" type="text/css" />

A questo punto basterà aggiungere l' attributo rel="vidbox" ai link dei video:

<a href="http://www.youtube.com/watch?v=vbRsz_LaLLk" rel="vidbox" title="YouTube">

È inoltre possibile modificare le dimensioni del video visualizzato, basterà aggiungere le dimensioni all' interno dell' attributo rel, ad esempio rel="vidbox 800 400". L' attributo title invece farà da caption per il video.

Qui ho realizzato una demo (un "angolino" che conto di arricchire); il mio giudizio è più che positivo... facile da utilizzare e non troppo pesante (complessivamente circa 60kb) Videobox allunga la lista delle "creazioni" basate sulla libreria (made in Italy) mootools.

Easy Cchart: HTML+CSS charts visualization tool 27/10/07

Ok il titolo è piuttosto generico, lasciatemi spiegare. Easy Cchart è un file CSS che, una volta importato in una pagina web o in un template, rende semplicissimo inserire i risultati di una classifica o un sondaggio nella pagina stessa (nei post di un blog ad esempio).

Date un' occhiata che ci tengo...

» continua

L' idea mi è venuta con il simpatico test religioso al quale nemmeno io sono scampato... leggendone su altri blog ho notato come la grande maggioranza inserisse i risultati in una lista; più che corretto del resto. Bene, volendo fare il "grande" ho deciso di personalizzare queste liste, in modo da creare un vero e proprio grafico a barre che mostrasse le percentuali. Il risultato è una specie di framework (in realtà un unico file CSS) con molte opzioni a disposizione...

Trovate tutto qui. Potete importare il file CSS nel vostro template o scaricarvi il pacchetto (ZIP). Naturalmente sono molto gradite le vostre impressioni (moltissimo gradite sui testi in inglese ^-^).

Fatemi sapere e nel frattempo questo è solo un esempio:

La mia religione è:

agnosticismo 85%

paganesimo 70%

buddismo 65%

induismo 60%

ateismo 60%

satanismo 55%

islam 50%

cristianesimo 45%

paranormale 45%

confucianesimo 45%

ebraismo 10%

Beh, il test è quello che è ma la forma assunta dai risultati mi pare carina... che ne dite?

MODx: CMS e framework PHP 30/09/07

Ho passato gli ultimi tre giorni a testare alcuni CMS (Content Management System) e con una certa sicurezza posso dire che MODx è un gran bel progetto; relativamente semplice da usare e Web2.0 oriented...

» continua

Esistono centinaia di CMS tanto che è stato coniato l' acronimo YAPS (Yet Another Portal System), ma sostanzialmente quelli realmente "utilizzabili" si riducono alla decina; come dicevo ne ho installati alcuni (Joomla, Drupal, Plone, Xoops e Openasp) sul mio PC ed alla fine ho concentrato la mia attenzione su MODx.

MODx è un CMS e un framework PHP (o CMF - Content Management Framework) che si basa sul binomio MYsql-PHP oltre a fornire un completo supporto Ajax (grazie alle API) e alcune librerie java (script.acul.us e moofx). Altro grande punto di forza è la sua natura SEO friendly; il suo motore prevede la conversione automatica degli URL (e loro "umanizzazione") oltre ad un completo controllo sulla semantica del nostro lavoro,la possibilità di inserire metatag diversificati e (last but not least) il codice XHTML scritto inserirà i contenuti il più possibile vicino al tag <body>... insomma tutti gli ingredienti necessari ad un moderna applicazione per la gestione dei contenuti.

Ovviamente grande valore in questi casi assume la facilità di utilizzo, sia nella personalizzazione che nell' esperienza utente; troppe volte prodotti meravigliosi sono nello stesso tempo non utilizzabili da un utente di base (vedi senza conoscenze informatiche) eccezion fatta per Plone che ha però enormi problemi di hosting (vedi la voce costi) e una curva d' apprendimento pazzesca (io python non lo capisco).

Bene, MODx è semplice da gestire; certo il pannello di controllo è assai complesso ma è possibile gestire i ruoli degli utenti assegnando loro pagine per l' inserimento dei contenuti decisamente semplificate (e senza entrare nel pannello di controllo stesso).

I requisiti per l' installazione sono gli stessi di altri CMS in PHP/MYsql:

1. Server Linux
2. Apache con mod_rewrite
3. PHP 4.3.10 o successivo
4. MySQL 4.1.x o successivo

Questo per l' installazione in remoto, in locale io utilizzo (con molta soddisfazione) Wamp Server.

La licenza è del tipo GNU General Public License che permette la condivisione e la modifica del software oltre all' utilizzo gratuito.

Ultima nota riguarda l' installazione in locale: ricordate di creare un nuovo database (vuoto, MODx creerà le tabelle) e soprattutto, una volta inserite le informazioni sul database, spuntate la voce Demo Site; in questo modo avrete moltissimi plugin funzionanti (il blog e i form di contatto ad esempio) che altrimenti vi farebbero dannare... perchè come documentazione, e questa è l' unica pecca (diciamo di gioventù), se ne trova pochina...

BluePrint CSS framework 12/09/07

Con un pò di ritardo vi segnalo BluePrint, un framework CSS che consente la creazione di complessi layout utilizzando una semplice griglia; la prima cosa da fare e scaricare il framework, decomprimerlo (è un file .zip) e caricarlo nella nostra pagina...

» continua

Il pacchetto contiene 7 file CSS, vediamo di cosa si tratta:

1. screen.css è il file principale del framework che importa gli altri CSS e deve essere incluso in tutte le pagine
2. print.css il file che si occupa della versione per la stampa
3. lib/grid.css è il file con i valori della griglia, colonne, classi e gestione del layout in genere
   
4. lib/reset.css resetta eventuali valori di default del browser
   
5. lib/buttons.css per creare e personalizzare pulsanti HTML/CSS
   
6. lib/typography.css si occupa della gestione del testo inserendo anche regole tipografica (come l' altezza di riga)
   
7. lib/compressed.css contiene tutto il framework in versione compressa
   

Ora vediamo come utilizzare la libreria per un nostro progetto (fate riferimento anche al tutorial ufficiale); carichiamo il framework nella nostra pagina HTML (nella <head> come un normale CSS), in questo modo:

<link rel="stylesheet" href="blueprint/screen.css" type="text/css" media="screen, projection">


Fatto, è tutto... in pratica il framework è perfettamente funzionante, dovete semplicemente richiamare le varie classi; in realtà il funzionamento è piuttosto semplice, basta ricordare alcune semplici regole, vediamo le principali.

La griglia di default misura 950 px ed è suddivisa in 24 colonne di 30 px con un margine destro di 10 px. Basterà applicare la classe container ad un contenitore (div) e richiamare poi le singole colonne nello stesso modo, ecco un esempio:

<div class="container">
<div class="column span-24">
<p>Esempio numero 1</p>
</div>
</div>

In questo esempio abbiamo inserito un contenitore di dimensione massima, il numero di span, in pratica, indica il numero di colonne presenti e 24 rappresenta l' intera dimensione della classe container. Se vogliamo inserire più colonne basta ricordarsi questo dato; poniamo il caso di voler inserire 3 colonne, una principale e due dedicate alla sidebar (un layout di un blog ad esempio), questo è l' esempio:

<div class="container">
<div class="column span-12">
<p>Prima colonna</p>
</div>
<div class="column span-6">
<p>Seconda colonna</p>
</div>
<div class="column span-6 last">
<p>Terza colonna</p>
</div>
</div>

Come vedete basterà ricordarsi che 24 è il numero massimo di colonne (potete rigirare i valori a vostro piacimento); in questo caso faccio notare anche il caricamento della classe last nell' ultima colonna, la classe applica un margine destro pari a 0px (invece dei 10px delle classi "normali" che avrebbero fatto scivolare sotto la colonna). È possibile nidificare all' interno di una colonna altre colonne (rispettando le stesse regole) e la licenza permette la totale personalizzazione dei file.

Un ultima cosa, dimenticavo di segnalare che il foglio di stile dedicato alla tipografia inserisce un' altezza di riga di 18 px e dovete ricordarlo; se vorrete inserire un' immagine nella pagina dovrà avere altezza pari o multipla di 18... io lo scaricherei

Ajax-JavaScript-DHTML, la megalista di AjaxRain 01/08/07

Vi segnalo questa bella lista di AjaxRain, esempi, tutorial e download di Ajax/JavaScript/DHTML; trovate un pò di tutto, dal jCodeViewer, "evidenziatore" di codice che sfrutta la libreria JQuery al framework Spry di Adobe (del quale consiglio un approfondimento, la documentazione è ricchissima e vi basta scaricare un unico zip - necessaria la registrazione).

In tutto quasi 500 esempi pratici che meritano di stare tra i preferiti °_^