Finalmente si alza il sipario: ecco il nuovo sito di ubuntu-it

Signore e signori,
dopo mesi di durissimo lavoro (che in realtà è il lavoro-dopo-il-vero-lavoro-ovvero-tempo-libero) siamo felicissimi e fieri di presentare la nuova veste del sito ufficiale di ubuntu-it:



Un cambio che vede il passaggio ad un nuovo CMS (Drupal), una grande attenzione ai contenuti, e una grandissima attenzione all'aspetto grafico.
Alcuni aspetti non sono ancora stabili al 100% ma abbiamo deciso di non temporeggiare ulteriormente, e di verificare insieme agli utenti dove occorre intervenire.

Detto questo, non resta che godersi il sito.

Enjoy!

ubuntu-it, il nuovo sito sta arrivando....

Il nuovo sito di ubuntu-it sta prendendo vita e manca davvero poco al suo esordio.
Un forte e costante lavoro che ha portato ad un risultato incredibile. Mancano pochi dettagli per andare online, questione di giorni...stay tuned!

Top 5 Design del mese, Maggio

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. The Croquis (http://www.thecroquis.com)



2. BAHUR78 (http://www.bahur78.com/)



3. Kiwi (http://kiwi-app.net/)



4. Square (https://squareup.com/)



5. Narhir Design (http://www.narhir.com/)

Top 5 design del mese, Aprile

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. matt cronin (http://www.matt-cronin.com/)



2. Newcastle web design & development (http://newism.com.au/)



3. Strutta - the contest platform (http://www.strutta.com/)



4. Breezi (http://breezi.com/)




5. Change Given (http://www.changegiven.com/)

Top 5 design del mese, Marzo

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. Fully Illustrated (http://www.fullyillustrated.com/)



2. Positive Hype (http://www.positivehype.com/)



3. ECTOMACHINE (http://www.ectomachine.com/)




4. Dezinerfolio (http://www.dezinerfolio.com/)



5. Jiri Sebek (http://swah.net/)

Top 5 design del mese, Febbraio

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.

1. Gavin Casteton (http://www.gavincastleton.com/)



2. Echo Enduring (http://blog.echoenduring.com/)



3. SOFA - Design Interfaces & Software (http://www.madebysofa.com/)



4. Design Informer (http://designinformer.com/)



5. Mark Jardine (http://markjardine.com/)




E tu quale preferisci?

Top 5 design del mese, Gennaio

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.
NOTA: Primo "numero" del 2010, la rubrica cambia nome, passando da "5 fantastici design" a "top 5 design del mese", per poi avere un numero speciale a fine anno.
Detto questo, continuiamo con altri 5 design :)

1. dedoce comunication on-line (http://www.dedoce.es)



2. creative leapes \& finishing moves (http://www.eldesigno.ca)



3. the best free way to manage your money (http://www.mint.com)




4. drawings and other creations (http://dlanham.com)



5. online portfolio (http://www.pinkcactus.com.au)



E tu quale preferisci?

Presentare un prodotto tramite un sito web

Durante un periodo strapieno della mia vita come questo (sto scrivendo una tesi bella ma difficile, sulla quale riserverò probabilmente un articolo una volta conclusa - ma della quale vi anticipo gli argomenti principali: C, OpenSSL, p2p, DRM, gstreamer - e 2 siti web da completare), non posso non segnalare un sito web davvero interessante.
In realtà il punto chiave dell'articolo l'ho già trattato qualche tempo fà parlando di sistemi operativi e dei loro siti di riferimento, ma il discorso è simile perchè da questo punto di vista si tratta di prodotti, nel senso più generico del termine, da presentare al pubblico.
Sono sempre convinto che Apple sia tuttora leader nel settore, tuttavia mi ha favorevolmente colpito il sito della Palm (nella figura) per la presentazione dei suoi prodotti.
Grande esempio di design, pulito, semplice, chiaro, che mette a disposizione le informazioni più importanti in modo molto semplice all'utente, accattivante visivamente.
Altri esempi di ottime presentazioni sono graditi nei commenti, in ogni caso questo sito entra sicuramente tra la lista delle fonti di ispirazione.

Mostrare tweets nel tuo HTML senza rallentare il caricamento della pagina

Se non vi accontentate dei widget disponibili, ci sono vari modi per includere i tweets del proprio account Twitter (o di qualunque altro utente) nel proprio sito.
Se poi l'inclusione di queste informazioni aggiuntive non rallenta in nessun modo il caricamento del resto della pagina, abbiamo trovato una buona soluzione.
Quella che vediamo in questo articolo la sto usando per il sito web personale che sto rinnovando e sarà presentato a breve.
Gli strumenti utilizzati sono HTML, CSS, e JavaScript con l'uso di due librerie: JQuery e Twitter.js.

La pagina inizialmente si presenta in un modo simile a questo (in questo caso lo stile è piuttosto semplice, per pure dimostrazione):



L'HTML sarà qualcosa come:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
  <head>
    <title>Lorenzo Sfarra :: Latest 5 tweets</title>
    <!-- CSS -->
    <link rel="stylesheet" href="style.css" type="text/css" />
    <!-- JS -->
    <!-- JQuery -->
    <script type="text/javascript"
            src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js">
      /* */
    </script>
    <!-- Twitterjs -->
    <script type="text/javascript"
            src="http://twitterjs.googlecode.com/svn/trunk/src/twitter.min.js">
      /* */
    </script>
    <!-- Custom JS -->
    <script type="text/javascript"
            src="custom.js">
      /* */
    </script>
  </head>

  <body>
  <!--
    Author: Lorenzo Sfarra
    Copyright: (c) 2009 Lorenzo Sfarra <lorenzosfarra@ubuntu.com>
  
    Twitter - latest 5 tweets -->
    <h1>Latest 5 tweets</h1>

    <div id="latesttweets">
      <p>Please wait while my latest 5 tweets load <img src="images/indicator.gif" alt="loading..."/></p>
      <p>If you can't wait or you haven't javascript enabled, go to my <a href="http://twitter.com/lrnzsfr">Twitter page</a>.</p>
    </div>
  </body>
</html>

dove style.css è:

/* CSS for the latest tweets in your HTML page.
 *
 * Author: Lorenzo Sfarra (lorenzosfarra@ubuntu.com)
*/
body {
  margin: 0px;
  padding: 0px;
  width: 100%;
  height: 100%;
  font-family: Arial, Helvetica, Tahoma, sans-serif;
  background: #000000;
  color: #dddddd;
  font-size: 11px;
}

h1 {
  padding-left: 100px;
  font-size: 18px;
  color: #aaa;
}

li a, li a:visited {
  color: #aaaaaa;
  text-decoration: none;
  font-weight: bold;
  font-size: 11px;
}

li a:hover {
  color: #dddddd;
}

#latesttweets ul {
  list-style-type: none;
  width: 300px;
}

#latesttweets ul li {
  background: url(images/twitter_footer.png) no-repeat left 20%;
  margin-top: 10px;
  padding: 5px 0px 10px 32px;
  border-bottom: 1px dotted #333333;
}

#latesttweets ul li a, #latesttweets ul li a:visited {
  color: #888888;
  text-decoration: none;
}

#latesttweets ul li a:hover {
  color: #aaaaaa;
  border-bottom: 1px solid #aaaaaa;
}

#latesttweets p {
  padding-left: 50px;
}

Quando il DOM è caricato, tramite JavaScript caricheremo i nostri tweets:

/* That's the javascript to display the latest N tweets in you HTML page.
 * 
 * Author: Lorenzo Sfarra (lorenzosfarra@ubuntu.com)
 * Requires: JQuery, TwitterJS
*/

$(document).ready(function() {
  /* We are going to use the TwitterJS function 'getTwitters' with the
   * following settings:
   *  - the css id target element
   *  - id: your user's (or the user you want to display) id on twitter
   *  - count: number of tweets to display
   *  - enableLinks: makes links clickable, including @replies and #hastags
   *  - ignoreReplies: skips over tweets starting with '@'
   *  - clearContents: clear the container div
   *  - template: html template to use for each element
   *
   * For the complete reference and for all the info required, visit the
   * project's website at http://remysharp.com/twitter/, Twitter.js
  */
  getTwitters('latesttweets', {
    id: 'lrnzsfr',
    count: 5,
    enableLinks: true,
    ignoreReplies: true,
    clearContents: true,
    template: '"%text%" %time%'
  });
});

con il seguente risultato:



È possibile vedere un demo dal quale vedere poi il sorgente.

5 fantastici design, numero 12

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. Dopo una breve pausa di qualche settimana, continuiamo con altri 5 design :)

1. Home Design Find (http://www.homedesignfind.com/)



2. Design-studio Simple.art (http://www.simpleart.com.ua/en/)




3. Metalab (http://www.metalabdesign.com/)



4. Mutant Labs (http://mutantlabs.co.uk/)



5. PixelCriminals (http://www.pixelcriminals.com/)



E tu quale preferisci?

il frack fà la differenza: come ti presento il mio sistema operativo

È uscito Windows 7.
Non voglio però soffermarmi sui dettagli tecnici del sistema operativo, ci sono milioni di articoli.
Quello che invece mi interessa vedere è, essendo l'argomento che tratto con maggior interesse, il lato web dell'evento.
Il sito della Microsoft non mi è mai piaciuto: oltre ai colori e il layout, lo trovo piuttosto caotico (provate a trovare qualcosa nei menù a tendina, con l'apoteosi toccata alla voce "All Products").
Detto questo, ero curioso di vedere la pagina di presentazione di Windows 7.
L'impatto con la pagina non è dei migliori, il banner con i suoi colori sembra un elemento estraneo alla pagina:



Senza contare i 72 errori e i 99 warnings validando l'HTML e gli 11 validando il CSS, mentre gli standard di accessibilità per il contrasto dei colori sono rispettati.
Quello che invece apprezzo (mossa anche "strategica" dati gli ultimi accordi Microsoft-Twitter per Bing) è l'idea del box a metà pagina che riporta i pareri degli utenti riportati su twitter.

Errori che interessano molto (in questo caso anche per l'accessibilità) anche la pagina del sito di Apple dedicata al suo sistema operativo. Detto ciò, a mio parere senza dubbio questa rimane il punto di riferimento generale: grande impatto visivo, poche informazioni ma efficaci: una presentazione di Leopard davvero ben fatta:



È ovviamente impossibile prendere come riferimento tutte le pagine di presentazione dei sistemi operativi, per cui prendiamo solo un altro paio di esempi interessanti.
La pagina di Ubuntu è quasi completamente valida (1 errore, 1 warning) per quanto riguarda l'HTML, al 100% valida per quanto riguarda il CSS e rispetta gli standard di accessibiltà per il contrasto dei colori: l'impatto visivo è buono anche se non ai livelli di Apple:


Seppur pienissimi di errori di validazione (che sembrano non interessare nessuno a parte il gruppo "Ubuntu Web Presence Team"), apprezzo anche lo stile sobrio e semplice, differente da quello scelto per la presentazione dei sistemi operativi appena analizzati, di OpenSolaris di Sun e di WebOS, anche se appunto di minore impatto visivo.
Se avete altre pagine degne di note, segnalate :)

Countdown per karmic: scelti i due nuovi banner

Come succede da qualche release, i banner per il countdown scelti per la nuova versione di Ubuntu saranno due, come comunicato da Matthew "newz2000" Nuzum nella ML dell'Ubuntu Web Presence Team:



Potrebbero ancora essere soggetti ad alcuni cambiamenti.
Ad ogni modo, sul wiki di Ubuntu è possibile vedere il risultato finale:

• proposta 1 (la versione scelta è la colonna "B");
• proposta 2.

Tutte le altre proposte sono comunque visualizzabili nella pagina del wiki internazionale dedicata.

5 fantastici design, numero 11

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. Modstudio (http://www.modstudio.com.ar)



2. Chattanooga Zoo (http://www.chattzoo.org)



3. Panelfly (http://www.panelfly.com)



4. Design Disease (http://designdisease.com)



5. Envato (http://envato.com)



Quale preferisci?

Segnalazione: JQuery Visual Cheat Sheet

Segnalo un'interessante iniziativa di Antonio Lupetti: JQuery Visual Cheat Sheet.


Consiste in un pratico mini-manuale per jQuery (versione 1.3) che contiene 6 pagine che brevemente spiegano le intere API di jQuery con brevi descrizioni ed esempi. Consiglio il download per i web designer.

Ordine gerarchico per directory (e non solo) con JQuery

Dopo un articolo di qualche mese fà su eleganti box con JQuery, oggi riporto come creare una struttura gerarchica come quelle di un qualunque filesystem, per capirci, che in ambito web può essere utile in varie circostanze.
Anche questo codice, come quella dell'articolo precedente già citato, è stato creato per il progetto Enchanted Webmail, anche se qui è riportato in una versione diversa e limitata. Il codice originale include anche l'uso di AJAX per ottenere dinamicamente le informazioni sulle Mailboxes IMAP, ed è consultabile nella pagina del progetto su Launchpad.

Questa è l'anteprima di quanto è possibile ottenere:



Il codice HTML è troppo lungo per essere scritto interamente qui, quindi riporto un breve estratto. Il link al codice completo è riportato alla fine dell'articolo.

L'HTML non è il massimo dell'eleganza nè validato al 100%, appunto perchè è generato dinamicamente tramite chiamate AJAX (il progetto è ancora in fase di sviluppo).

[..]
<div id="mboxApache" class="mailbox">
<span class="mailboxname">

  <img src="media/images/hide_mailbox.png" id="Apache" alt="Hide Children" class="actionmailbox folder">

  <a href="/mailboxes/Apache">Apache</a>

</span>

<div class="children" id="childrenApache">

    <div id="mboxApache__slash__prova" class="mailbox">

    <span class="mailboxname">

      <img src="media/images/hide_mailbox.png" id="Apache__slash__prova" alt="Hide Children" class="actionmailbox folder">

      <a href="/mailboxes/Apache/prova">prova</a>

    </span>
    <div class="children" id="childrenApache__slash__prova">

    <div id="mboxApache__slash__prova__slash__3rd__space__level__space__2" class="mailbox">
    <span class="mailboxname">

      <img src="media/images/mailbox_nochildren.png" alt="No Children" class="folder">

      <a href="/mailboxes/Apache/prova/3rd%20level%202">3rd level 2</a>

    </span>

    </div>



    <div id="mboxApache__slash__prova__slash__testing__space__29__space__Nov" class="mailbox">
      <span class="mailboxname">

        <img src="media/images/show_mailbox.png" id="Apache__slash__prova__slash__testing__space__29__space__Nov" alt="Hide Children" class="actionmailbox folder">


        <a href="/mailboxes/Apache/prova/testing%2029%20Nov">testing 29 Nov</a>
      </span>
[..]

Il file javascript principale è il seguente:

/* Copyright (C) 2008 Lorenzo Sfarra (lorenzosfarra@ubuntu.com)
*
* This program is free software; you can redistribute it and/or
* modify it under the terms of the GNU General Public License
* as published by the Free Software Foundation; either version 2
* of the License, or (at your option) any later version.
*
* This program is distributed in the hope that it will be useful,
* but WITHOUT ANY WARRANTY; without even the implied warranty of
* MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
* GNU General Public License for more details.
*
* You should have received a copy of the GNU General Public License
* along with this program; if not, write to the Free Software
* Foundation, Inc., 51 Franklin Street, Fifth Floor, Boston, MA  02110-1301, USA.
*
* NOTE: jquery required.
*/

SHOWMAILBOX='media/images/show_mailbox.png';
HIDEMAILBOX='media/images/hide_mailbox.png';
LOADING='media/images/icons/loading.gif';

function mailboxes_management(element) {
// Add "children" to the current id to obtain the children div's id
var childrenid = "#children" + $(element).attr('id');
if ($(element).attr('src') == SHOWMAILBOX) {
$(childrenid).removeClass("invisible");
$(childrenid).slideDown(400);
$(element).attr('src', HIDEMAILBOX);
} else if ($(element).attr('src') == HIDEMAILBOX) {
$(element).attr('src', SHOWMAILBOX);
$(childrenid).fadeOut(400);
}

}

function show_hide_children() {
$(".mailboxeslist").click(function(event) {
element = $(event.target);
mailboxes_management(element);
});
}

$(document).ready(function() {
show_hide_children();
});

Lo script precedente si occupa di nascondere/mostrare in modo elegante il contenuto della "directory", e di cambiare l'icona della directory stessa in base all'azione appena effettuata.

Vediamo anche il CSS:

.mailboxeslist {
margin-top: 25px;
margin-left: 25px;
margin-bottom: 30px;
}

.mailboxeslist .mailboxname {
margin-left: 10px;
font-size: 1.2em;
margin-top: 0px;
}

.mailboxeslist .children {
margin-left: 10px;
border-left: 1px solid #dddddd;
margin-top: 0px;
padding-top: 5px;
}

.mailboxeslist a, .mailboxeslist a:visited {
color: #002b3d;
}

.mailboxeslist a:hover, .mailboxeslist a:active {
color: #0169c9;
}

.mailboxeslist .leaf, .mailboxeslist .leaf:visited {
color: #d40000;
}

.folder {
float: left;
}

.parentmailbox {
margin-bottom: 20px;
margin-top: 10px;
}

.mailbox {
margin-top: 5px;
}

.mailboxesplainlist {
line-height: 1.7em;
margin: 15px 0px 20px 20px;
color: #002b3d;
}

.mailboxesplainlist a, .mailboxesplainlist a:visited {
color: #002b3d;
}

.mailboxesplainlist a:active, .mailboxesplainlist a:hover {
color: #0169c9;
}

.rootmailbox {
background: #ededed url(../images/mailbox_nochildren.png) no-repeat left 40%;
padding: 5px;
margin: 6px;
padding-left: 40px;
border-top: 1px solid #dddddd;
border-right: 1px solid #dddddd;
border-left: 1px solid #aaaaaa;
border-bottom: 1px solid #aaaaaa;
}

Puoi provare un demo qui.

Per quanto riguarda il codice completo:

• il sorgente per l'HTML;
• il sorgente per il JS;
  
• il sorgente per il CSS;
  

5 fantastici design, numero 10

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. Michael Austin (http://maustingraphics.com/)




2. Piipe (http://www.piipeonline.com/en/)



3. Webbureau (http://retouch.dk/)



4. World of Merix Studio (http://www.worldofmerix.com/)



5. Bilk Surface Graphics (http://www.whatisblik.com/)



Quale preferisci?