E’ stata una versione largamente anticipata e di cui si sapeva già molto, tuttavia ci sono molte cose da tenere a mente:

• jQuery 2.0 non supporta Internet Explorer dalla versione 8 in giù
• la 1.9 invece si e continuerà a essere aggiornata (a breve rilasceranno jQuery 1.10)
• pesa circa il 12% in meno
• è già disponibile sui principali CDN (Google e Microsoft)
• alcune funzioni di jQuery 1.8 sono state deprecate (come .bind e .browser), usate il plugin Migrate se volete aggiornare siti da quella versione in maniera progressiva.

nel caso di dubbi, hanno pubblicato una pagina con uno schema sulla situazione supporto dei browser.  

A questo punto… perché non usare direttamente Javascript puro?

Tagliando il supporto ai browser più rompi scatole e con il prossimo avvento dei CSS3 per alcuni casi potrebbe sembrare superfluo l’utilizzo di una libreria.

Tuttavia ricordatevi che anche i browser “moderni” hanno delle piccole differenze nell’interpretazione di Javascript e jQuery sistema proprio queste cose, e molti metodi di traversing e Ajax sono estremamente più semplici con questa libreria. Per non parlare poi dell’immenso parco di plugin a disposizione…

Mantenere la retro-compatibilità

Non tutti i siti possono essere “pronti” a passare a jQuery 2.0 , dipende sempre dall’utenza media (monitorabile con qualunque servizio di analitiche), se avete almeno aggiornato alla versione 1.9 vista la loro parità di comandi si può usare un piccolo trucchetto che il team di jQuery ha diffuso tempo fa sul sito stesso, di alternare il caricamento delle ultime due versioni in base alla versione in uso di Internet Explorer:

<!--[if lt IE 9]-->
    <script src="jquery-1.9.1.js"></script>
<!--[endif]-->
<!--[if gte IE 9]-->
    <script src="jquery-2.0.0.js"></script>
<!--[endif]-->

se si usa IE da 8 in giù viene caricato jQuery 1.9, altrimenti viene caricato jQuery 2.0 . E’ una soluzione semplice e veloce che può aiutarvi a migrare dei siti verso la nuova versione, ricordatevi di testare i plugin per essere sicuri che funzionino!

Buon download!

In più possiamo utilizzare un “componente” CSS della mitica libreria Bootstrap per avere una buona formattazione della paginazione che possiamo poi eventualmente customizzare in base alle nostre esigenze. 

1. Scaricare Bootstrap

Per prima cosa scarichiamo  Bootstrap, ma attenzione, specie se NON la state usando nel vostro progetto per altre cose (griglia, pulsanti, form) vi conviene scaricare solamente la parte relativa alla paginazione, così da avere un file css leggero, dalla schermata customize deselezionate tutte le voci tranne quella del componente “pagination”.

2. Inserire il CSS nella maniera corretta per WordPress

In un tema di WordPress abbiamo due modi per inserire un file CSS: modificando un template del tema (in genere header.php) o iniettandolo dinamicamente da functions.php , ora opteremo per la seconda perché ci darà una maggiore flessibilità nella gestione dei vari file CSS.

Quindi all’interno di functions.php aggiungiamo prima un’azione , stando alla documentazione ufficiale di WordPress la stessa azione per l’inserimento degli script va bene anche per i CSS:

<?php

function caricaStiliPaginazione(){

}

add_action('wp_enqueue_scripts','caricaStiliPaginazione');

?>

ora all’interno della funzione caricaStiliPaginazione() useremo i comandi “wp_register_style” e “wp_enqueue_style” per definire e poi iniettare il nostro foglio di stile con il componente della paginazione.

wp_register_style(
  "bs_pagination",
  get_bloginfo("template_url") . "/css/bootstrap.min.css", 
  false, 
  "2.3.1", 
  "screen"
);

wp_enqueue_style("bs_pagination");

La funzione “wp_register_style” vuole sapere 5 cose:

• nome che diamo allo stile, deciso da noi e che verrà riutilizzato dopo per inserirlo nel tema
• posizione (url) del file nella cartella del tema o plugin
• eventuali dipendenze, in questo caso nessuna
• versione, ho messo quella in uso di Bootstrap
• media, qui ho settato solo per gli schermi

La funzione “wp_enqueue_style” genera il tag <link> per includere il file CSS indicato e lo inserirà nel punto del tema in cui avremo avviato la funzione wp_head().

3. Il codice della paginazione

Il codice per creare una paginazione di post è presente proprio sulla documentazione ufficiale di WordPress , utilizzeremo quello stesso codice, inserendolo però all’interno di un div che utilizzi la classe di Bootstrap per creare il componente della paginazione:

<div class="pagination">

<?php
global $wp_query;

$big = 999999999;

echo paginate_links( array(
	'base' => str_replace( $big, '%#%', esc_url( get_pagenum_link( $big ) ) ),
	'format' => '?paged=%#%',
	'current' => max( 1, get_query_var('paged') ),
	'total' => $wp_query->max_num_pages
) );
?>
</div>

Questo codice andrà inserito all’interno del template dove volete vedere la paginazione (index.php, search.php, category.php, ecc..) e a questo punto è già tutto funzionante, vederete il componente di paginazione di Bootstrap ma i contenuti sono generati da WordPress, in base alle impostazioni di lettura che avete settato dell’admin.

4. Varianti

Lo stile del componente di paginazione di Bootstrap è molto minimalista e lascia facilmente spazio a customizzazioni di vario tipo dandovi quindi uno scheletro ottimale su cui sviluppare le vostri idee, tuttavia dalla documentazione possiamo notare che ci sono alcune classi come  ”pagination-large” e “pagination-mini” che se aggiunte alla classe “pagination” iniziale ci permettono di modificare le dimensioni degli elementi in pochissimo tempo.

Conclusione

Questa piccola tecnica vi permette di ridurre il numero di plugin utilizzati in un’installazione di WordPress e rendere un tema un pò più “indipendente”, se poi già usate Bootstrap nel vostro tema avete il vantaggio che non dovrete fare ulteriori importazioni di file CSS, ma in generale è sempre preferibile utilizzare il sistema descritto in questo tutorial per il caricamento dei fogli di stile.

In realtà non ho mai avuto l’idea di cambiare o aggiornare il layout ogni anno fin dall’inizio… è successo e basta. Questa volta però come avrete notato per varie cose le differenze possono non sembrare evidenti (dalla v2 alla v3 avevo invertito lo schema dei colori nei contenuti, ed è stata una piccola rivoluzione!) in quanto ho mantenuto il “look and feel” originale della v3 andando a modellarlo e colmando alcune lacune che avevo lasciato aperte. 

Responsive

Ora tutto il blog è completamente responsive (sì, con qualche cosina da sistemare qua e la ma nelle prossime settimane limerò i dettagli), quindi potete godervelo dagli schermi 1200 pixel in su fino ai vostri smartphone. Mi sono basato per la seconda volta su Bootstrap, il motivo per cui non era responsive dalla versione 3 era che la griglia responsive in Bootstrap è stata introdotta grossomodo la settimana dopo che avevo pubblicato il terzo layout… e non mi andava di disfare e rifare subito! Ormai ignorare la frammentazione degli schermi inizia a essere un problema e volevo che questo blog rimanesse in vita anche in questa nuova epoca “mobile”. Grazie al plugin Dropdown Menus e jQuery da all’incirca 980 pixel in giù la navigazione viene gestita con il componente Html <select> , una pratica abbastanza comoda sui piccoli schermi.

Flatmania

Con questa versione del layout sto seguendo la corrente del “flat design” che attualmente è molto in voga nel webdesign degli ultimi 12 mesi circa. Ho tenuto i colori base della v3 andando a semplificare forme e composizione degli elementi, le icone che ho usato sono in parte quelle di Bootstrap (ovvero Glyphicons) e in parte quelle di Simple Icons, che principalmente sono loghi di servizi, framework e social network.

LESSizzato

Per rendere la gestione dei CSS più strutturata ho adottato anche per questo tema il preprocessore LESS , visto che “evangelizzo” molto a riguardo poteva essere una buona idea usarlo anche sul mio blog di punta . Sapendo che molte cose vanno sistemate dopo la prima pubblicazione, specie con WordPress e i contenuti dinamici in generale,  anche se non si ottiene un primo vero vantaggio nella scrittura del codice nelle modifiche seguenti lo si apprezza subito per la facilità con cui si possono modificare tante cose con uno sforzo minimo (magari farò un tutorial introduttivo nelle prossime settimane).

Dietro le quinte (note tecniche)

Essendo un blog orientato a utenti smanettoni mi posso permettere alcune cose che in molti altri lavori non posso… per esempio un ampio utilizzo dei tag Html5, di costruire tutto il layout usando diverse features CSS3, inserendo alcune immagini in formato .svg (vettoriale) per avere meno grane con i monitor HiDPI, tipo i Retina Display. L’utlizzo di Javascript e jQuery in questo caso è ridotto al minimo proprio grazie all’utilizzo di queste nuove features e appena sarà possibile aggiornerò la libreria alla versione 2.X , quindi in generale “taglio” con il passato.

Cosa non c’è più

Principalmente ho tolto i “Quick Link” ma a breve torneranno, ho intenzione però di utilizzare un paio di nuove features di WordPress 3.6 (che dovrebbe essere rilasciato nel giro di qualche settimana) legate ai “post types” che mi faciliteranno un pochino la gestione dei contenuti.

Con lo spirito del Codemotion vogliamo “contagiare” sviluppatori, makers, appassionati e studenti di tutto il mondo. Anche se cercheremo di costruire qualcosa di diverso in ogni paese, i protagonisti dell’evento saranno sempre i contenuti tecnici e i Codemotion People. 

MAKER E ARTIGIANI TECNOLOGICI FABBRICANO EMOZIONI AL CODEMOTION

Lo sviluppatore software può essere descritto come un artigiano del codice, un artista che mette in campo la sua esperienza per dar vita a un lavoro di qualità.
Ancor più artigiano è chi crea strumenti reali, valorizzando la tradizione con l’innovazione. I maker fanno proprio questo: combinano codice e hardware a oggetti della vita quotidiana, realizzano strumenti strabilianti da poter condividere con gli altri.

Ecco che Codemotion, l’evento aperto a tutti i linguaggi e tecnologie, diventa lo spazio naturale per accogliere il movimento dei makers, movimento protagonista di nuova inarrestabile rivoluzione che sta già sovvertendo le regole industriali. Oggi non sono più solo le grandi aziende che possono essere dei maker ma può esserlo chiunque abbia competenze e “voglia di fare”, perché le tecnologie necessarie sono potenti, divertenti e accessibili.
Per chi coltivi il sogno di dar vita qualcosa da produrre autonomamente, il Codemotion sarà un’occasione per iniziare a conoscere il movimento maker sia attraverso l’area espositiva dove si potranno ammirare creazioni e invenzioni e sia assistendo agli interventi tecnici in programma.

Il Codemotion Roma si terrà a Roma il 22 e 23 marzo e verrà ospitato dalla Facoltà di Ingegneria di Roma Tre.

Non che jQuery non vada bene, anzi, sono un suo assiduo utilizzatore e fan, ma può succedere che per un motivo o per l’altro nel progetto in cui ci troviamo a lavorare è stato scelto di utilizzare un’altra libreria core (o di non utilizzarne affatto) e quindi non è mai una cattiva idea avere nel proprio arsenale qualche piccola libreria Javascript agnostica, ovvero che non dipende direttamente da nessun’altra libreria come MooTools, jQuery o Prototype.

Oggi andiamo alla scoperta di Handlebars una fantastica mini-libreria per la creazione di template Html dinamici, molto simile a jQuery Tmpl ma come dicevamo prima senza prerequisiti di altre librerie! 

Guarda un esempio  Scarica i sorgenti del tutorial

1. Caricare la libreria

Come tutte le librerie Javascript per prima cosa includiamo il file nella nostra pagina Html:

<script type="text/javascript" src="js/handlebars-1.0.rc.1.js"></script>

Handlebars come ho detto prima è una libreria che non ha dipendenze, quindi se dovesse esserci anche jQuery nella pagina non importa che sia inserito prima o dopo di esso.

2. Definire la sorgente di dati

Voglio creare una lista non ordinata che visualizzi i principali linguaggi web, quindi dovrò creare come sorgente di dati un array con queste voci ma a differenza del plugin Tmpl non possiamo prendere un semplice array come sorgente, Handlebars vuole un vero e proprio oggetto JSON:

var dati1 = {
  linguaggi:["Html","Css","Javascript","PHP"]
}

Ora siamo pronti per creare la marcatura del template che visualizzerà questi dati.

3. Creare il template HTML

All’interno del body creiamo la lista che ospiterà il risultato finale

<ul id="lista"></ul>

Questo sarà l’unico pezzo statico di codice Html per questo esempio, le voci della lista le creeremo dinamicamente con Handlebars, quindi da qualche parte fuori dal tag <body> creiamo un nuovo tag <script> con una tipologia dedicata che ospiterà il nostro template di marcatura che useremo:

<script id="voce" type="text/x-handlebars-template">
 {{#each linguaggi}}
   <li>{{this}}</li>
 {{/each}}
</script>

come dicevo prima l’attributo type è settato in modo da distinguere questo tag apposta per Handlebars (quindi non è esclusa la possibilità di usare più librerie di templating JS nella stessa pagina), all’interno abbiamo un tag <li> con l’espressione {{this}} che serve come segnaposto per il valore attuale, tutto questo tag è all’interno di un’espressione {{#each}} che dice di ripetere il suo contenuto in base al numero di elementi presenti all’interno dell’array “linguaggi”, quindi ogni volta che verrà ripetuto il template verrà inserita un diverso elemento al suo interno.

4. Handlebars in azione

Adesso è giunto il momento di de elaborare il tutto con Javascript, le righe di codice necessarie sono poche

// Ottengo la marcatura del template
var struttura = document.getElementById("voce").innerHTML;
// Compilo la marcatura in un template
var template = Handlebars.compile(struttura);
// Inserisco i dati nel template
var html = template(dati1);
// Renderizzo il tutto nella pagina
document.getElementById("lista").innerHTML = html;

Se ora salviamo il documento e lanciamo la pagina del browser dovremmo vedere una lista non ordinata con 4 voci, ognuno che contiene il nome di un linguaggio web.

Bonus: Tabelle dinamiche con Handlebars

Nel download dei file del tutorial ho incluso anche una variante della tabella dinamica trattata in un precedente tutorial sostituendo la parte svolta dal plugin jQuery Tmpl con il codice di Handlebars!

Conclusione

Visti i concetti fondamentali di questa libreria dovrebbe essere relativamente semplice riuscire a costruire dei casi anche più complessi di pagine dinamiche lato client. Se dovessero esserci casistiche di utilizzo di Handlebars (o di Ajax e templating in generale) che vi piacerebbe vedere trattate in un tutorial lasciate un commento!

• E’ uscito jQuery 1.9 , l’ultima versione a supportare Internet Explorer versioni 6, 7 e 8
• Disponibile la prima beta di jQuery 2.0
• Finalmente ha riaperto il sito-directory dei plugin, con una nuova veste grafica
• E’ stato rilasciato il plugin Migrate alla prima versione
• Rilasciato jQuery UI 1.10

Più nel dettaglio cosa c’è da sapere?

jQuery 1.9 principalmente ha deprecato diverse vecchie API già segnalate obsolete dalla versione 1.8, da adesso in poi se avrete bisogno di retro-compatibilità per Internet Explorer questa sarà l’ultima versione a supportarla (anche in futuro). Proprio per aiutare il passaggio dalla versione 1.8 alla 1.9 è stato creato il plugin Migrate, che permette di utilizzare ancora le API deprecate con l’ultima release della libreria.

Stando ai piani del team di sviluppo a breve vedremo jQuery 2.0 che come ho spiegato in un precedente articolo sarà molto più leggero e veloce dedicandosi principalmente ai browser moderni, se non potete aspettare testate questa beta!

Dopo vari mesi offline per motivi tecnici torna il sito dei plugin gestito dalla community di jQuery, il suo scopo è quello di creare un punto centrale di riferimento per la ricerca e la condivisione dei plugin che sicuramente semplificherà la vita a molti, sia per chi crea plugin sia per chi li deve usare.

Insieme alla 1.9 è stata rilasciata la versione 1.10 di jQuery UI, la nota suite di componenti per creare interfacce, che introduce la compatibilità con l’ultima versione di jQuery, viene deprecato il supporto per la versione 1.8 (potete sempre scaricare jQuery UI 1.9.2 per lavorare con la vecchia versione) e vede il redesign delle API per alcuni componenti, quindi date un occhio alla documentazione se lo avete già usato in passato!

Per maggiori dettagli e le note ufficiali potete consultare il blog ufficiale del team di jQuery.

Questo attributo applicabile agli elementi di tipo input (specie i “text”) e textarea permette di specificare un valore temporaneo, appena l’utente clicca sulla casella di testo e inizia a scrivere questo valore scompare rimpiazzato da quello che si sta digitando al suo interno. Nonostante non sia una feature eccezionale o rivoluzionaria si è dimostrata spesso una piccolezza che migliora molto l’esperienza utente sulla compilazione della form.

Fino a prima di HTML5 era una cosa implementabile esclusivamente con Javascript, ma anche se dal prossimo futuro sarà uno standard come facciamo adesso a fare in modo che questa piccola funzionalità sia usufruibile da tutti? 

Guarda una demo Scarica i file dell’esempio

Uno sguardo in avanti (ma anche nel presente)

HTML5 sarà una specifica finalizzata dal W3C nel 2014 ma sappiamo che molti browser stanno allungando le mani iniziando a supportare già da qualche anno alcune di queste feature, tramite il servizio Can I use? possiamo notare che l’attributo placeholder gode di un’ottima compatibilità sulle ultime versioni di tutti i browser, vediamo quindi come si usa questo semplice attributo:

<input type="text" placeholder="Puoi scrivere qui dentro">

creando una input testuale o una textarea è possibile specificare questo nuovo attributo “placeholder” assegnando come valore il testo che vogliamo visualizzare (in genere visualizzato in grigio) nel caso in cui la casella sia vuota, appena cliccate sulla casella e digitate vedrete il vostro testo rimpiazzare il segnaposto usando il colore impostato per l’elemento (basta semplicamente impostare la prorpietà color tramite una regola CSS).

Uno sguardo al passato (ma anche nel presente)

Purtroppo sappiamo che non tutte le ultime versioni dei browser sono le più diffuse, specialmente nel mondo Internet Explorer, in più notiamo che neanche IE9 supporta l’attributo placeholder!

Abbiamo quindi bisogno di una soluzione che funzioni alla vecchia maniera… e l’unico che può aiutarci in questo caso è Javascript. Esistono diverse librerie che ricreano la funzionalità del placeholder tramite Javascript e quella che vi mostrerò in questo articolo senza troppe sorprese si chiama placeholder.js non è molto complessa da utilizzare, per prima cosa scarichiamo e includiamo lo script:

<script type="text/javascript" src="js/placeholder.min.js"></script>

come nel punto precendente aggiungiamo una nuova input di testo o una textarea e impostiamo il parametro placeholder. Ora in nuovo tag script o un nuovo file .js scriviamo questo comando:

Placeholder.init({wait: true});

dove semplicemente inizializiamo il plugin e come unico parametro gli indichiamo “wait: true” che serve a fare in modo che il testo nella casella rimanga fino a che viene digitato qualcosa al suo interno, senza questo parametro in genere il plugin rimuove il testo temporaneo non appena si clicca sulle caselle. Non si tratta di una differenza abissale, in questo caso ho deciso di attivare il parametro wait per fare in modo che l’esperienza d’uso della form sia identica in entrambe le circostanze (HTML5 o Javascript).

Passato, presente e futuro insieme

A questo punto l’unico dilemma è quale soluzione adottare per la pubblicazione. In entrambi i casi lasciamo fuori alcune fette di utenti e vogliamo cercare di ottimizzare il tutto: placeholder.js non da problemi su browser che supportano HTML5 ma vorremmo evitare di far caricare la libreria ad utenti che non ne hanno bisogno perché hanno un browser che supporta il placeholder nativamente.

Visto che in questa caso i browser problematici sono solamente i vecchi IE (stranamente…) possiamo risolvere il tutto inserendo i due tag Javascript visti nel passaggio precedente all’interno di un commento condizionale:

<!--[if IE lt 10]>

... codice ...

<![endif]-->

in questo modo il plugin e il suo codice di attivazione vengono caricati solo da Internet Explorer, “lt 10″ significa che la condizione deve considere le versioni inferiori alla 10 escludendo quest’ultima.

Conclusione

In generale ogni passaggio è stato abbastanza semplice ma non sempre implementare una soluzione “moderna” e gestirne la retrocompatibilità richiede così poco impegno, ma in quanto webdesigners anche questo fa parte del mestiere specie se vogliamo definirci professionisti!

Purtroppo finora questa task si è spesso rivelata sfrustrante a causa del dover cercare le informazione sparse per la rete, ammesso che si trovavano… ma da quest’anno (anche se in realtà la cosa è iniziata già dall’anno scorso) le cose cambieranno: un’insieme di volontari ed aziende hanno deciso di realizzare la prima documentazione della web platform, aperta e gratuita! 

Cosa significa questo per voi? Che da adesso in poi tutta la documentazione riguardante tag HTML, proprietà CSS, funzioni Javascript e molto altro ancora sarà disponibile in un’unico sito e chiunque potrà contribuire (è modello simile a quello delle Wiki).

Il progetto è ampliamente supportato e promosso da aziende come Google, Mozilla, il W3C, Adobe, Nokia, Microsoft e molti altri. Attualmente è in “alpha” e i contenuti ancora parziali e inglese, anche se in futuro è prevista la localizzazione in diverse lingue ma il tutto dipende da quanto si espanderà come progetto e quante persone parteciperanno, quindi se apprezzate l’idea iniziate a supportare subito la Web Platform documentation iniziando a spargerne la voce!

Questa release inizia un percorso che porterà ad adattare WordPress come un motore non solo di siti ma anche di applicazioni. Le novità di punta di questa release sono :

• Nuovo media uploader – sempre drag’n'drop, multi upload e con la nuova interfaccia è più facile caricare foto ed editare i dettagli al volo.
• HiDPI admin – la nuova “moda” del webdesign è quella di supportare gli schermi con alte densità pixel-per-pollice… adesso gustatevi l’admin a massima risoluzione sui dispositivi Retina-style!
• Lifting dell’admin – noterete dei pulsanti leggermente diversi, un nuovo colorpicker e in generale tutta la backend un pò sistemata.
• Nuovi embed – se vi era piaciuta la possibiltà di embeddare tweets e video di YouTube in pagine e articoli semplicemente incollando il loro url, ora potrete fare altrettanto con Instagram, SlideShare, SoundCloud e altri ancora.
• Librerie Javascript – jQuery e jQuery UI aggiornate alle ultime versioni, pare che Prototype sia stata spostata fuori dal core di WordPress e rimanga utilizzabile tramite CDN. La grossa novità in quest’ambito è l’inclusione di due librerie molto importanti Backbone e Underscore, e specialmente la prima più che libreria è un vero e proprio framework per la creazione di applicazioni Javascript.

Alla questione Backbone se uniamo le nuove JSON API introdotte con Jetpack 2.0 possiamo dire di avere tra le mani tutti gli strumenti necessari per creare applicazioni reattive lato-client con WordPress come motore lato server!

Qualche cliente vi ha chiesto di dare un tocco natalizio al sito? Dovete preparare delle pagine con le offerte di Natale dell’azienda dove lavorate? Volete “natalizzare” qualche sito solo per il vostro gusto personale?

Ecco per voi un elenco di tutorial, risorse e materiale vario per aiutarvi in queste ultime imprese lavorative prima delle ferie! 

Tutorial di MoebiusMania

• Tempo di natale per Illustrator – un classico di questo blog .
• Raccolta 2009 – alcuni articoli con risorse e materiali pubblicati in precedenza.

Tutorial Esterni

• Night before Christmas – tutorial Photoshop per realizzare un background natalizio.
• Pacchi regalo vettoriali – tutorial per Illustrator.
• Layout natalizio – tutorial di qualche anno fa ma ancora valido per il webdesign su Photoshop.

Risorse gratuite

• Vecteezy – vari file vettoriali festivi, gli ultimi inseriti sono molto interessanti.
• Pennelli natalizi – per Photoshop.
• Wallpaper natalizi – di Vlad Studio.
• Mini icone – vettoriali.

Risorse premium (a pagamento)

• Template newsletter – ottimo template (anche se un po costoso) per campagne mail natalizie.
• Albero di natale vettoriale – in formato EPS.
• Banner natalizio – template Photoshop per un banner promozionale natalizio.

Donazioni

Non è una cattiva idea quella di supportare qualche causa umanitaria tramite il proprio sito o blog, provare uno di questi programmi di affiliazione in questo periodo potrebbe essere una buona scusa per poi tenerli online tutto l’anno!

• Lista dei desideri – Iniziativa di Save The Children per supportare vari progetti.
• Natale per Emergency – i ricavati degli acquisti sosterranno un centro chirurgico pediatrico a Goderich.

Offerte/Bundle

Qui è il momento di fare del bene a noi stessi e approfittare di qualche sconticino ed offertina qua e la per comprarci qualcosa di utile nel nostro ambito.

• SitePoint Christmas Sale – per 24 giorni ogni giorno un nuovo bundle in offerta per 24 ore, in genere includono ebooks e risorse varie, da tenere sotto controllo per tutto dicembre!
• FlashMint Christmas Bundle – una raccolta di temi, template per newsletter e sfondi Twitter a soli 19.95 dollari (sono circa 15 euro).
• Guida ai regali per WebDevelopers (2011) – stilata dai ragazzi di Net Tuts.

Come si collabora nel web?

Il Web stesso è composto dalla collaborazione. Caricare una foto su Flickr, commentare un articolo su un e-commerce, scriver un post su un blog (come questo che state leggendo) è una forma di partecipazione, ognuna di queste azioni arricchisce il web riguardo un certo argomento permettendo a chi lo consulterà in seguito di avere maggiori informazioni rispetto ai visitatori precedenti creando una sorta di “memoria collettiva”.

Anche se come dicevo bastano questi piccoli gesti non è male nell’ambito delle professioni del web imparare a collaborare nel modo giusto.

Perché è importante che si continui così

Librerie come jQuery e MooTools, software come WordPress e Drupal e molti code editors che usiamo nel nostro lavoro derivano da un tipo di collaborazione che è possibile solo con il web. Uno (o più) programmatore scrive una libreria, la condivide su internet mettendo a disposizione anche i sorgenti e nel giro di poche settimane ottiene una quantità immensa di feedback che permettono di ridefinire, correggere e potenziare il progetto originale, tutte cose che il programmatore da solo non sarebbe riuscito a ottenere in tempi ragionevoli, in maniera molto semplificata questo è il concetto di Open Source che grazie a Internet ha permesso una crescita esponenziale di ogni sua minuscola sfaccettatura.

Nessuno dei progetti che ho citato poco fa sono stati ideati con l’idea iniziale di diventare “grandi”, i più sono iniziati come progetti personali che grazie alla condivisione e alla partecipazione sono diventati nel giro di pochissimi anni gli strumenti di punta di intere comunità di professionisti del web.

Come posso collaborare come web designer o web developer?

Inizi un nuovo progetto o una semplice ricerca personale su una nuova tecnologia web? prova a condividerla su network come GitHub e permetti ad altri sviluppatori di sbirciare il tuo codice sorgente e fare delle variazioni (tranquilli, sono separate dal vostro progetto originale!) .

Sei uno sviluppatore Javascript o PHP (o entrambi o anche altro) molto esperto? prova a dare un’occhiata ai sorgenti delle librerie e framework che usi più spesso, potresti essere tu a trovare quel bugfix che mancava, magari proprio in quei 10 minuti in cui non avevi di meglio da fare!

Sei alle prime armi o non ti senti così bravo da poter contribuire al codice sorgente? Scaricati le versioni beta (o in generale quelle ancora in fase di sviluppo) dei tuoi software e framework preferiti e appena ti accorgi di qualcosa che non va segnalalo prontamente agli sviluppatori!

Provateci, non sono cose che richiedono necessariamente ore, possono essere svolte anche durante ritagli di tempo e oltre che rendervi utili agli altri scoprirete che avrete anche molti vantaggi a livello personale.

Da più di tre anni a questa parte oltre al mio lavoro da web designer e blogger sto anche lavorando presso la scuola Mohole di Milano dove mi occupo di gran parte dei corsi relativi al Web (Html/Css, Javascript, jQuery, Ajax, Php & MySQL, WordPress, Html5, Mobile), e occasionalmente anche qualcuno di grafica (InDesign, Illustrator).

Quest’anno abbiamo introdotto qualche novità, prima di tutto il nome della scuola non è più “Web 2.0″ ma “Web e Apps” giusto per far chiaro la direzione che ha preso il mercato a riguardo e quindi anche la nostra offerta formativa. Poi abbiamo lanciato (e stiamo lanciando) vari nuovi corsi avanzati che permetteranno:

• a chi parte da zero, di avere un percorso formativo più completo e approfondito
• a chi già lavora nel mondo del web design di aggiornarsi alle nuove tecnologie e pratiche

tra le “cose” nuove ci sono PhoneGap, il Responsive Web Design, sviluppo di plugin per WordPress e altro ancora.

Se ho stuzzicato la vostra curiosità fatevi un giro sul sito e guardate i corsi a disposizione oppure scriveteci una mail, o meglio ancora se avete la possibilità venite direttamente da noi (possibilmente dicendomi prima quando ), ci facciamo quattro chiacchere e vediamo cos’è più adatto per le vostre necessità!

PS: io mi occupo di web, ma a Mohole ci sono anche corsi di grafica, 3D, fotografia e visual fx, video, teatro e moda!

Si tratta di una selezione di vari elementi dai loro marketplace (che trattano da Photoshop, al Web Design, ad After Effects e molto altro ancora) per un totale di circa 500 dollari svenduta a soli 20 dollari (per noi sono circa 16,2 euro) per 4 giorni! 

Unica limitazione oltre al tempo, bisogna essere registrati su almeno uno dei negozi!

Per i dettagli su cosa è contenuto nel bundle e per l’acquisto c’è una pagina dedicata oppure potete cliccare i banner relativi all’offerta che vedete qui di fianco.

Considerate che tutto ciò che è contenuto nel bundle viene venduto con una singola licenza commerciale, ciò significa che potete, anzi dovete usarli per scopi commerciali ma l’utilizzo per ogni elemento è limitato ad un singolo progetto. Data l’altissima qualità e alla varietà dei file venduti nel bundle non ci metterete molto a recuperare questi 20 dollari investiti oggi!

Giusto per citarne alcune:

• L’embedding dei tweets tramite copia/incolla dell’url
• Schermata di customizzazione dei temi
• Testate e sfondi personalizzabili possono essere selezionati dalla libreria media

Non trascurabile invece il nuovo aggiornamento di Jetpack, il multi-plugin-on-the-cloud creato dalla Automattic che aggiunge un nuovo tassello al set di funzionalità che già metteva a disposizione una volta installato: le gallerie stile lightbox!

WordPress offre già nativamente la possibilità di creare gallerie ma in maniera “classica”, ora con questo nuovo componente di Jetpack potrete muovervi tra le foto in maniera più fluida e piacevole.

Considerando che sia WordPress che Jetpack sono prodotti di libero utilizzo, c’è sempre più roba a disposizione anche per utenti meno “tecnici”!

Prima di scendere nei dettagli, consideriamo la prossima roadmap:

• jQuery 1.8 (di prossima uscita) elimininerà le funzioni deprecate che sono ancora incluse nella libreria attuale. Quindi nel caso usate ancora cose come .bind() vedete di aggiornarle con il nuovo event handler .on() prima di includere questa versione.
• jQuery 1.9 (uscirà entro la fine del 2012) rappresenterà l’ultima versione del ramo 1.x ad avere il supporto per le versioni di IE 6-8.
• jQuery 2.0 (verso inizio 2013) sarà la prima versione a lavorare esclusivamente con i browser moderni, i vantaggi saranno principalmente rappresentati da minori dimensioni del file e maggiori performance.

Prima di interpretare male queste cose il team di jQuery tramtie Twitter ha voluto puntualizzare un dato:

https://twitter.com/jquery/status/218812146937643008

Morale: jQuery 1.9 e 2.0 verrano mantenuti in sviluppo parallelamente (l’architettura modulare della libreria che viene già sfruttata per la creazione dei plugin aiuterà a riguardo) quindi niente panico, se avete progetti che necessitano supporto per i vecchi IE vi basterà includere la versione 1.9, mentre se il vostro sito si basa su utenti “moderni” o principalmente centrato sui dispositivi mobile non indugiate a passare alla versione 2.0 .

Perché l’abbandono (progressivo) di IE 6-8?

I motivi in gran parte dovrebbero esservi già noti… innanzitutto il team di jQuery rende noto che non basterà “snobbare” IE 6 e 7 (i più vecchi e problematici) per alleggerire la libreria, molto di quel codice di cross-compatibilità serve anche per IE 8, quindi o tutti e 3 o niente!

Per molti potrà sembrare ancora presto l’abbandono di IE 8, che attualmente detiene ancora circa il 25% dei browser mondiali, e questo è proprio uno dei motivi per cui jQuery 1.9 continuerà a essere sviluppato anche dopo il rilascio della versione 2.0, tuttavia notate che le percentuali di uso di IE 8 e IE 9 stanno rispettivamente  diminuendo e aumentando, con un sorpasso di IE 9 sul suo predecessore previsto per la fine del 2012. Inoltre ricordatevi che la Microsoft ha iniziato un processo di update automatico sui vari sistemi Windows che abbasserà ulteriormente la diffusione di IE 8 e che a breve uscirà ufficialmente Windows 8 che introdurrà IE 10 e se i prezzi di aggiornamento diffusi in questi giorni saranno reali, molte persone e aziende saranno interessate ad aggiornarsi, muovendo ulteriormente il web verso il futuro che dovrebbe già essere un presente.