sabato 28 maggio 2011

Inserire il Datepicker di jQuery UI nella propria pagina web

Vorrei condividere la modalità di integrazione dei widget del progetto jQuery UI.
Spiegazione veloce
  1. Ottenere il pacchetto di jQuery UI
  2. Una volta decompresso il pacchetto, copiare nel proprio progetto web le cartelle css e js
  3. Copiare i file di traduzione desiderati dalla cartella development-bundle/ui/i18n nella cartella js
  4. Referenziare nella propria pagina web
    • il foglio di stile del tema "css/<nome_tema>/jquery-ui-1.8.12.custom.css"
      <link rel="stylesheet" type="text/css" href="css/<nome_tema>/jquery-ui-1.8.12.custom.css"></link>
    • gli script di jQuery, jQuery UI e i file di traduzione
      <script type="text/javascript" src="js/jquery-1.5.1.min.js"></script>
      <script type="text/javascript" src="js/jquery-ui-1.8.12.custom.min.js"></script>
      <script type="text/javascript" src="js/jquery-ui-i18n.js"></script>
  5. Creare un elemento input di tipo text e assegnargli una classe o un id
    <input type="text" class="datepicker" />
  6. Inserire il codice che inizializza il calendario
    <script type="text/javascript">
    $(function(){
         $.datepicker.setDefaults( $.datepicker.regional[ "it" ] );
         $('.datepicker').datepicker();
    });
    </script>

Ottimizzazioni
Se il testo nel calendario è troppo grande, probabilmente non è stato definito il font-size nel proprio css. È possibile rimpicciolirlo correggendo il font-size nella classe CSS ui-datepicker, ad esempio aggiungendo questo frammento subito dopo il tag link  del punto 4
<style type="text/css">
    .ui-datepicker{ font-size: 80%; }
</style>


I file di traduzione
All'interno della cartella development-bundle/ui/i18n sono presenti tutti i file javascript che contengono le traduzioni e i formati per ogni lingua. Tramite il tag <script> è possibile includere solamente i file delle lingue che si desiderano, oppure con un unico file, il jquery-ui-i18n.js è possibile utilizzarle tutte.
jQuery automaticamente non riesce a capire la lingua che deve utilizzare, saremo perciò noi a dover decidere con che lingua deve essere inizializzato e per fare questo abbiamo due possibilità:
  1. Impostare la stessa lingua per tutti i datepicker
    $.datepicker.setDefaults($.datepicker.regional['it']);
  2. Impostare la lingua per il singolo datepicker $(selettore).datepicker($.datepicker.regional['it']);
Pagina di documentazione del Datepicker

domenica 15 maggio 2011

Recuperare il codice di monitoraggio di Google Analytics

Mi è capitato più volte di andare alla ricerca nel mio account Google Analytics del codice da incorporare nella pagina, ogni volta andarlo a cercare è un'impresa biblica perciò questa volta lo appunto qua.

sabato 14 maggio 2011

HTML for Outlook

Con Outlook 2007 e 2010, la Microsoft ha sostituito l'engine per la composizione e la visualizzazione delle email da quello di Internet Explorer a quello di Word. Questo causa un bel problema a tutti quelli che come me, devono creare periodicamente delle email in HTML e fare in modo che queste abbiano la massima compatibilità con i vari client di posta.

Combinazioni tastiera MacBook

Qui di seguito riporto le combinazioni di tastiera del mio MacBook, sia quelle che utilizzo più spesso, sia quelle un po meno frequenti ma che sono difficili da ricordare.