Demo e docs

Vi anticipo la live demo che ho realizzato per questo articolo: eccola qui, bella e funzionante. Quanto alla documentazione, per realizzare l’articolo mi sono semplicemente – e abbastanza ovviamente – attenuto alle istruzioni sul sito del plugin: le trovate qui.

Includere Jquery e Tablesorter

Per cominciare dobbiamo scaricare Jquery e Tablesorter.
Una volta posizionati i due file all’interno delle directory che preferiamo, dbbiamo includerli – all’interno del tag HEAD – nella pagina html che conterrà la tabella ordinabile, in questo modo:

<script src="js/jquery.js" type="text/javascript"></script> <script src="js/jquery.tablesorter.js" type="text/javascript"></script>

Ordinare la tabella con Tablesorter

A questo punto bisognerà comunicare al plugin su quale tabella agire, specificando l’ID che assegneremo alla tabella da rendere ordinabile. Supponendo che l’ID sia #mytable:

<script type="text/javascript"><!--mce:2--></script>

Caratteristiche della tabella ordinabile

La tabella che javascript renderà ordinabile, deve essere una tabella html standard, per cui è necessario definire anche i tag THEAD e TBODY. Dobbiamo anche specificare la classe che utilizzeremo nei css per dare un tocco di stile alla nostra tabella, in questo caso ho usato la classe tablesorter.

<table id="myTable" class="tablesorter" border="0">
<thead>
<tr>
<th>Nome</th>
<th>Cognome</th>
<th>Email</th>
<th>Web Site</th>
</tr>
</thead>
<tbody>
<tr>
<td>Daniele</td>
<td>Rollo</td>
<td>mymail[at]mail.com</td>
<td>http://www.danielerollo.com</td>
</tr>
<tr>
<td>Homer</td>
<td>Simpson</td>
<td>Themail[at]simposn.net</td>
<td>Simpson website</td>
</tr>
<tr>
<td>Oliver</td>
<td>Hatton</td>
<td>oliver[at]newteammail.net</td>
<td>newteam.comm</td>
</tr>
<tr>
<td>Mike</td>
<td>Jimma</td>
<td>jimma@mike.net</td>
<td>jimma.flcc</td>
</tr>
</tbody></table>

Applicare uno stile alla tabella

Se avete seguito correttamente tutti i passi, già a questo punto la tabella comincia ad essere sensibile rispetto ai click dell’utente (provate a cliccare sulle voci contenute nel THEAD). Per completare il lavoro però, è necessario applicare uno stile alla tabella, in modo che reagisca al click del mouse, e si modifichi in base a quale colonna è stata riordinata, ed in che ordine, se discendente o ascendente. Abbiamo già specificato la classe tablesorter nell’html, dobbiamo creare delle regole relative a questa classe nel foglio di stile.

table.tablesorter {
	font-family:arial;
	background-color: #CDCDCD;
	margin:10px 0pt 15px;
	font-size: 8pt;
	width: 100%;
	text-align: left;
}
table.tablesorter thead tr th, table.tablesorter tfoot tr th {
	background-color: #e6EEEE;
	border: 1px solid #FFF;
	font-size: 8pt;
	padding: 4px;
}
table.tablesorter thead tr .header {
	background-image: url(bg.gif);
	background-repeat: no-repeat;
	background-position: center right;
	cursor: pointer;
}
table.tablesorter tbody td {
	color: #3D3D3D;
	padding: 4px;
	background-color: #FFF;
	vertical-align: top;
}
table.tablesorter tbody tr.odd td {
	background-color:#F0F0F6;
}
table.tablesorter thead tr .headerSortUp {
	background-image: url(asc.gif);
}
table.tablesorter thead tr .headerSortDown {
	background-image: url(desc.gif);
}
table.tablesorter thead tr .headerSortDown, table.tablesorter thead tr .headerSortUp {
background-color: #8dbdd8;
}

Ricordate di creare le immagini asc.gif, desc.gif e bg.gif, o qualsiasi altra immagine specificata come background nel css.
Solo un’implementazione base di Tablesorter
È tutto! Con poche righe di codice, sfruttando la potenza di jQuery, avete reso decisamente più gradevole e leggibile le vostra pagina. Se non avete commesso errori infatti, la tabella dovrebbe già essere letteralmente bella e pronta per i vostri utenti.
Ma ovviamente questa è un’implementazione di base: se desiderate approfondire maggiormente l’utilizzo di Tablesorter, vi rimando al sito del plugin, dove troverete, oltre a tutti gli esempi,anche la documentazione necessaria per realizzare operazioni più complesse, come per esempio inizializzare tablesorter su una tabella vuota e riempirla con dati recuperati via ajax.
Per concludere, vi ricordo nuovamente l’esempio funzionante, che ho realizzato con il codice visto nel tutorial. Enjoy.

Per esportare video in formato mp4 compressi con H264 utilizzando Premiere si può utilizzare Adobe Media Encoder. Al momento dell’esportazione infatti, cliccando File > Esporta > Filmato non troveremo tra i container disponibili MP4, anche se è compreso nei formati previsti. Per questo motivo clicchiamo File > Esporta > Adobe media Encoder.

Nella parte destra di Media Encoder troviamo una serie di preset utili ad esportare in tutta semplicità il video nel formato ideale per i diversi device o le diverse piattaforme. Ma possiamo anche modificare singoli parameteri in un set predefinito, oppure impostare autonomamente tutte le caratteristiche del nostro video.

Per ottenere un MP4 compresso H264 dobbiamo appunto selezionare quest’ultimo nel campo “Formato”.

Nella tendina relativa al Codec viene indicato automaticamente “MAIN CONCEPT H264″.

A questo punto possiamo specificare tutti i parametri fondamentali per l’output che vogliamo ottenere. In particolare le dimensioni del video, il framerate ed il bitrate.

Quando clicchiamo su Ok, Media Encoder si chiude e lascia spazio ad una finestra di dialogo che ci chiede di specificare il nome ed il percorso del file .MP4 che andremo ad esportare.

Da quando su youtube è stata introdotta la possibilità di vedere il video in “qualità migliore”, opzione che dipende dalla effettiva qualità del filmato caricato su Youtube, ogni dettaglio dell’esportazione del nostro video diventa importante.

Ellingtonmedia offre sei suggerimenti sull’esportazione o la conversione del nostro video, in modo da aumentare la qualità finale del video visibile su youtube. Vediamoli insieme:

• Cominciare sempre dal video nel formato migliore possibile.
• Comprimere il video usando il codec H.264.
• Ridimensionare il video a 320×240 px.
• Deinterlacciare sempre il video.
• In caso di video con aspect ratio 16:9, usare le bande (letterbox).
• Sfruttare la mggior parte possibile dei cento megabyte che Youtube ci mette a disposizione.

Condivido pienamente tutti e sei i suggerimenti, fuorchè il terzo, quello del resize a 320×240. In un momento in cui le soluzioni tecnologiche spingono verso una qualità sempre migliore del filmato, e la stessa Youtube permette una visualizzazione in Higher quality per i video “migliori” può essere controproducente ridimensionare il fotogramma, per evitare che il resize venga effettuato dai server di youtube. Su questo punto allora meglio attenersi alle faq, 640×480, e – in fin dei conti – scegliere una risoluzione decisamente migliore.

Poi non dite che non ve l’avevo detto!

Link: 6 tips for High Quality Youtube Video.

photo credit: °Florian

Su Bloggingtips troviamo un breve elenco delle cose da fare subito dopo aver installato WordPress:

• Cambiare la struttura del permalink
• Cambiare il tema di default
• Aggiornare i servizi di ping
• Attivare l’antispam akismet
• Pubblicare il feed su feedburner

Link: Ok WordPress is installed. Now what?

Arrivato a questo punto normalmente io mi comporto così:

• disabilito la moderazione dei commenti, che normalmente su WordPress è attiva di default;
• imposto la cartella per l’upload (normalmente disabilito l’organizzazione per directory anno-mese);
• creo le categorie che ho in mente per il blog ;
• comicio a riempire il blogroll;
• attivo analytics e installo i plugin per l’ottimizzazione sui motori di ricerca

Che ne dite? Se ho dimenticato qualcosa, si accettano consigli…

Webdistortion stila una lista delle principali librerie javascript per trasformare una semplice textarea in un editor di testo visuale all’interno di una pagina web. Da TinyMCE a FCKeditor, dall’editor della Yahoo User Interface a Niceedit: c’è solo l’imbarazzo della scelta. Queste librerie si rivelano veramente utili grazie al fatto che sono altamente personalizzabili dal webdeveloper. Non solo: grazie alla presenza in rete di una serie di componenti aggiuntivi che ne estendono le funzionalità, abbiamo a disposione strumenti veramente potenti per permettere all’utente di inserire nel sito quello che vuole come vuole.
Ma è questo quello che noi vogliamo veramente? L’utilizzo prevalente degli editor visuali avviene a livello di CMS per aiutare chi amministra il sito a inserire testo ben formattato, che risulti gradevole all’utente finale.
A mio avviso, questi strumenti devono essere assolutamente “ponderati” (e non è certo difficile , visto l’alto grado di personalizzazione che possiamo raggiungere): lasciamo a disposizione le funzioni veramente necessarie (a seconda del tipo di sito e delle esigenze di chi lo amministra), in modo da permettere all’amministratore il giusto controllo su testi, link e immagini, ma non eliminiamo quelle opzioni che lasciando troppa libertà all’amministratore potrebbero compromettere le scelte stilistiche che riteniamo fondamentali per il nostro design.

WMVplayer di Flip4mac è un software che non dovrebbe mancare in nessun Mac. Un insieme di componenti che permettono a Quicktime di riprodurre video in formato WMV, all’interno dello stesso Quicktime, e, soprattutto, nel browser. Sul sito di Flip4mac si trovano diversi software dedicati a chi lavora con WMV su Mac, ma è già sufficiente il player gratutito (scaricabile sul sito Microsoft) per poter aprire e visualizzare i video sul desktop, e riprodurre i flussi di streaming Windows Media che ancora si trovano in rete. Le applicazioni a pagamento invece permettono d convertire, importare, esportare e montare su mac questo tipo di formato.

Link: Flip4mac WMV