31 luglio 2009

Il nuovo banner di ubuntu-it con JQuery

Da pochi giorni abbiamo un nuovo banner nella homepage del sito web di ubuntu-it.
Il suo compito è quello di evidenziare i contenuti del sito più importanti, dato che il menù, essendo un sito che contiene molti contenuti, è piuttosto corposo.
Il nuovo banner utilizza un mix di HTML, CSS e javascript con la libreria JQuery.




Innanzitutto nella pagina in cui verrà incluso il banner dobbiamo includere il file javascript per jquery e quello del banner, oltre ai file CSS: a questo proposito, dobbiamo includere con degli IF condizionali dei CSS speciali per Internet Explorer 7 e Internet Explorer 6, se sono i browser utilizzati dall'utente.



<link rel="stylesheet" href="banner.css">
<!--[if IE 7]><br /> <link rel="stylesheet" href="ie7tricks.css"><br /> <![endif]-->

<!--[if IE 6]><br /> <link rel="stylesheet" href="ie6tricks.css"><br /> <![endif]-->


Per quanto riguarda l'HTML, potete trovarlo qui.

Il file javascript che gestisce il banner (che contiene degli accorgimenti specifici per Internet Explorer 6, che come al solito è categoria a parte), è il seguente:


/* Licenza tagliata per limiti di spazio, si veda il file originale indicato giù per la licenza */


/* The currently selected category */
curCategory = "";
/* The URL realated to the current category */
url = "http://www.ubuntu-it.org/Ottenere_Ubuntu.shtml";
/* category -> url map */
urlsMap = {
"support": "http://www.ubuntu-it.org/Supporto.shtml",
"contribuire": "http://www.ubuntu-it.org/contribuire.shtml",
"newsletter": "http://www.ubuntu-it.org/contenuti/newsletter-italiana.shtml",
"fcm": "http://www.ubuntu-it.org/contenuti/fcm.shtml",
"media": "http://www.ubuntu-it.org/contenuti/media.shtml",
"contatti": "http://www.ubuntu-it.org/contatti.shtml"
}
/* Tracking activated items, if the user highlights more than 1 menu item
* too fast. */
activatedItems = Array();

function changeActiveCategory(liId) {
/* Change the active category in the banner.

@param liId the ID of the selected 'li' element
*/
/* Change 'li' classes for the old selected category and the new one */
newCategory = liId.substring(2);
if (curCategory != "") {
$("#li" + curCategory).removeClass("lihover");
$("#li" + curCategory).addClass("linormal");
}
$("#" + liId).removeClass("linormal");
$("#" + liId).addClass("lihover");
/* Change the main image for the new category*/
$("#bannermainbg").fadeOut("slow", function(data) {
if (curCategory != "") {
$("#bannermainbg").removeClass(curCategory + "main");
}
/* Update info about the new category */
curCategory = newCategory;
url = urlsMap[curCategory];
$("#bannermainbg").addClass(curCategory + "main");
/* Workaround for IE6: CSS class doesn't work properly, so we set
* the background manually. */
if ($.browser.msie) {
/* Check that is IE with version < 7 */
if ($.browser.version < 7.0) {
path = "url(/uploads/file/banner2009/images/" + curCategory + ".png)";
$("#bannermainbg").css("background-image", path);
}
}
$("#bannermainbg").fadeIn("slow");
});

}


$(document).ready(function() {
/* Change the link href, because the user has JS enabled */
$("#bannerlinkslist li a").attr("href", "#");
$("#bannerlinkslist li").hover(function() {
/* Give info about the current 'li' id to the function */
activatedItems.push($(this).attr("id"));
changeActiveCategory($(this).attr("id"));
},
function() {
/* If it's not the currently selected item,
* remove the correspective class */
for (iter = 0; iter < activatedItems.length; iter += 1) {
if (activatedItems[iter] != ("li" + curCategory)) {
$("#" + activatedItems[iter]).removeClass("lihover");
$("#" + activatedItems[iter]).addClass("linormal");
activatedItems.splice(iter);
}
}
});
/* Manage the onclick event on the main banner content */
$("#bannermain").click(function() {
window.location = url;
});
});

//vim: ai ts=2 sw=2 et sts=2


Il codice completo è a questo indirizzo.

La funzione changeActiveCategory() si occupa di:
1) evidenziare la voce correntemente selezionata nella lista della parte destra del banner;
2) riportare nello stato di elemento non selezionato la voce precedentemente selezionata;
3) assicurarsi che soltanto 1 sola voce sia selezionata (il problema si pone se l'utente passa velocemente su più di un elemento, più velocemente dell'effetto, che poteva portare a più voci selezionate nello stesso tempo);
4) cambiare l'immagine principale del banner nella parte sinistra: il tutto è gestito da classi CSS, tranne per IE6 per il quale aggiungiamo un controllo e cambiamo "manualmente" l'immagine;
5) cambiare l'indirizzo a cui si arriva cliccando sul banner.

Il CSS principale è invece consultabile qui.

Il demo, oltre ovviamente al sito di ubuntu-it, è qui.

23 luglio 2009

5 fantastici design, numero 7

Ogni giorno visito vari siti web per studiarne la grafica e prendere ispirazione.
Catalogo spesso quelli che mi hanno più colpito, quindi condivido questi siti web nel blog, sperando che alcuni possano essere utili anche ad altri.
Continuiamo con altri 5 design :)
1. Ryan McMaster (http://ryanmcmaster.com/web-design-blog/)



2. Tori's Eye (http://toriseye.quodis.com/)



3. Merchant Warrior (http://www.merchantwarrior.com/)



4. Design19 (http://www.design19.ro/)



5. Nalden.net (http://www.nalden.net/#/newsitem/1273/)



Quale preferisci?

21 luglio 2009

Launchpad Open Source

Oggi è un giorno importante: Launchpad è ora Open Source.
Tutto il codice, anche quello di quei componenti che in precedenza erano indicati come parti il cui codice non sarebbe stato rilasciato (soyuz e codehosting), sono inclusi.

È possibile leggere l'annuncio di Canonical.

19 luglio 2009

Fine sondaggio: quanti sistemi operativi hai provato finora?

I dati del sondaggio:


Totale voti: 50.
Il prossimo sondaggio, per chi fosse interessato, riguarda quante applicazioni hai in esecuzione contemporaneamente nella tua sessione di lavoro.

18 luglio 2009

Box semplici ed eleganti con JQuery

Trovo i box molto efficaci in un layout di un'applicazione web, soprattutto quando è piuttosto complicata e le informazioni da mostrare sono molte. C'è, come fanno molte applicazioni web, il metodo stile accordion, i tab, un mix di stili oppure i box. Ognuna di queste possibilità si adatta meglio al genere di contenuto e al genere di applicazione.
Per una delle mie applicazioni web ancora in sviluppo, Enchanted Webmail (pagina su launchpad) utilizzo appunto i box, di cui riporto l'esempio qui:



Per realizzarli utilizziamo un mix di HTML, CSS e javascript con la libreria JQuery.
Il codice sorgente:
Puoi provarlo subito visitando la pagina demo.

16 luglio 2009

5 fantastici design, numero 6

Ogni giorno visito vari siti web per studiarne la grafica e prendere ispirazione.
Catalogo spesso quelli che mi hanno più colpito, quindi condivido questi siti web nel blog, sperando che alcuni possano essere utili anche ad altri.
Continuiamo con altri 5 design :)
1. OH! Media (http://www.ohmedia.ca)



2. VPS Hosting (http://www.howhost.com/en/)



3. BizShark (http://www.bizshark.com)




4. Nine Lion Design (http://www.nineliondesign.com)



5. stopdesign (http://www.tutorial9.net)



Quale preferisci?

12 luglio 2009

Segnalazione articolo: 15 suggerimenti utili per gli sviluppatori PHP

Condivido un articolo che è stato più volte segnalato su twitter, lo ritengo molto utile: sono suggerimenti di base, quindi non così utili per programmatori esperti, ma contiene diversi procedimenti molto comuni.
I 15 punti sono:
  1. Inviare un'email in PHP (molto basilare...necessiterebbe di un articolo a parte, comprendente anche l'autenticazione SMTP, etc...);
  2. Encoding e decoding di stringhe;
  3. Ottenere l'indirizzo IP del client (anche in presenza di un proxy);
  4. Da secondi a stringhe;
  5. Validazione email;
  6. Semplice parsing XML;
  7. Connessione a un database;
  8. Creare e analizzare dati JSON;
  9. Gestire il timestamp MySQL;
  10. Generare un codice di autorizzazione;
  11. Validazione del formato della data;
  12. Reindirizzamento HTTP;
  13. Mostrare il contenuto di una directory;
  14. Ottenere il browser dell'utente;
  15. Estrarre un file .zip.
L'articolo è a questo indirizzo.

09 luglio 2009

5 fantastici design, numero 5

Ogni giorno visito vari siti web per studiarne la grafica e prendere ispirazione.
Catalogo spesso quelli che mi hanno più colpito, quindi condivido questi siti web nel blog, sperando che alcuni possano essere utili anche ad altri.
Continuiamo con altri 5 design :)

1. sitemakers Portfolio (http://www.sitemakers.co.uk/portfolio/30/)




2. 45rotale Inc. (http://www.45royale.com/)



3. Prolific Interactive (http://www.prolificinteractive.com/)



4. Web Design Berkshire (http://www.ormanclark.com/)





5. Tutorial9 (http://www.tutorial9.net/)



Quale preferisci?

06 luglio 2009

esempi bash: zenity radiolist e rhythmbox-client


Gli script in bash vanno ben oltre l'idea di semplici sequenze di comandi eseguiti l'uno dopo l'altro.
Si può persino avere GUI, interfacciarsi con altri programmi, mostrare notifiche, barre di scorrimento, finestre di dialogo.
Questo è un esempio di un semplicissimo player che utilizza zenity e rhythmbox-client per controllare un'instanza di rhythmbox.


#!/bin/bash
# Copyright (C) 2009 Lorenzo Sfarra

# Rhythmobx is running?
RHYTHMBOXPID="`pidof rhythmbox`"
if [ "x$RHYTHMBOXPID" == "x" ]; then
# Launch rhythmbox...
rhythmbox &
else
echo "Found a rhythmbox instance with PID: $RHYTHMBOXPID";
fi

RHYTHMBOX="rhythmbox-client --no-start"

# ACTIONS AND INFOS
commands=( Pause Play Next Previous Info Details Close )
actionslist=""
command="zenity --title Player --list --radiolist --column=* --column=Action "

# Add the commands to the list
for act in ${commands[@]}
do
actionslist="$actionslist $act $act"
done
command="$command $actionslist --height 300"


# Infinite loop
while [ 1 ]; do
action="`$command`"
case "$action" in
Pause)
$RHYTHMBOX --pause
;;
Play)
$RHYTHMBOX --play
;;
Next)
$RHYTHMBOX --next
;;
Previous)
$RHYTHMBOX --previous
;;
Info)
# Display track name and track artist
playing="`$RHYTHMBOX --print-playing`"
zenity --info --title "Now playing..." --text "$playing"
;;
Details)
# A detailed list of info about the currently played song
playing="`$RHYTHMBOX --print-playing-format "%tt (%td) from %at (%ay, %ag) by %ta"`"
zenity --info --title "Details about the current track" --text "$playing"
;;
Close)
$RHYTHMBOX --quit
break;
;;
*)
break;
;;
esac
done

#vim: ai ts=2 sw=2 et sts=2


Per vedere il codice formattato e con l'highlight della sintassi, clicca qui.

04 luglio 2009

age += 1




Ogni anno puntualmente succede.
Deve essere un bug, devo segnalarlo su launchpad, è arrivato il momento di risolverlo!

02 luglio 2009

5 fantastici design, numero 4

Ogni giorno visito vari siti web per studiarne la grafica e prendere ispirazione.
Catalogo spesso quelli che mi hanno più colpito, quindi condivido questi siti web nel blog, sperando che alcuni possano essere utili anche ad altri.
Continuiamo con altri 5 design :)

1. branded07 (http://www.branded07.com)



2. Internet Dreams (http://www.netdreams.co.uk/)




3. Blogfullbliss (http://www.blogfullbliss.com)



4. anderbose (http://anderbose.com/)



5. Carrot Creative (http://carrotcreative.com/)