Cosa vuol dire dinamiche? Significa che se in questo listino prodotti devo aggiungere o togliere un elemento dovrei evitare il più possibile di manipolare il codice Html stesso, ma modificare un file “sorgente” di dati nel quale ci sono esclusivamente le informazioni da visualizzare (nome, prezzo e disponibilità) che al caricamento della pagina verrano importate e inserite nella tabella, infine faremo in modo che questa tabella possa essere ordinabile in base al campo interessato come accade comunemente in programma come Excel o Google Documents.

Guarda la demo Scarica i file

Prerequisiti:

Conoscenza base di jQuery e degli Array

In generale quando si lavora con Ajax in locale ci possono essere un paio di problemini su Chrome… se vi sembra che le chiamate Ajax non vengano fatte effettivamente è quello che succede! Spostate i file in server locale tipo Xamp e simili e le cose riprenderanno a funzionare oppure aprite Firefox

Cosa ci serve:

Useremo il framework Bootstrap 2 per il CSS (ha degli ottimi stili per le tabele, specie in casi di prototipizzazioni sono molto comodi!) e due plugin di jQuery: Templating e TableSorter per rendere la nostra tabella dinamica e interattiva.

1. Organizziamo i file

Avremo 3 file javascript, un Html, un Css e un JSON… nessuno ci obbliga a disporli in modo particolare, ma mettendo le mani avanti in una possibile inclusione di questo componente in un sito completo ho preferito tenere un’organizzazione precisa e separata:

• il file .html nella cartella principale
• i file .js nella sottocartella /script
• il .css di Bootstrap in /css
• il file .json nella sottocartella /dati

E ora passiamo alle cose serie…

2. I dati all’interno del file JSON

Ogni prodotto sarà rappresentato da un oggetto Javascript con 3 proprietà: nome – prezzo – disponibilità. I prodotti tanti o pochi che siano saranno comunque una serie, quindi tenendo una struttura abbastanza classica per un file JSON, avremo un array che all’interno di ogni nodo avrà uno degli oggetti descritti poco fa:

[
  {"nome":"Manuale CSS","qta":12,"prezzo":39},
  {"nome":"Tastiera Wireless","qta":8,"prezzo":80},
  {"nome":"Stampante","qta":3,"prezzo":200},
  {"nome":"Penne","qta":20,"prezzo":1},
  {"nome":"Vacanza!","qta":0,"prezzo":"N/A"}
]

Quindi aggiungere o rimuovere un prodotto corrisponde ad aggiungere o togliere un nodo (e relativo oggetto) da questo array.

3. La pagina Html e perché Bootstrap è figo

In un nuova pagina Html (per questo esempio userò il Doctype Html5) includiamo nel tag head la libreria Bootstrap di Twitter.

Poi spostandoci nel body creiamo una tabella Html con solamente intestazione e corpo vuoto che chiamo “prodotti” e alla quale associo subito tre classi “table”, “table-bordered” e “table-striped” che sono definite all’interno di Bootstrap che renderanno la nostra tabella con le righe a colorazione alternata (appunto, a zebra) e con un bordo esterno discreto e pulito

NomeQuantita’Prezzo (€)

Utilizzare il tagper definire l’intestazione di una tabella dovrebbe essere una prassi, tuttavia è una cosa che vedo spesso ignorata in molte pagine web… in questo caso ci servirà per forza non solo per fare le cose per bene ma perché l’intestazione verrà usata anche dal plugin TableSorter.

4. Il template Html che useremo

Non abbiamo creato alcuna riga e/o cella nel corpo della tabella proprio perché lo scopo di una tabella dinamica è che questi elementi vengano create e inseriti in automatico tramite Javascript in base al numero di prodotti presenti nel file JSON.

Per fare ciò sfrutteremo una tecnica chiamata “templating” per il quale un blocco di codice Html viene popolato con i dati e inserito nella pagine tante volte quanto è necessario, ma anziché sviluppare tutto a mano ci appoggeremo al plugin Tmpl di jQuery, che ha una sua struttura che dobbiamo seguire per definire il template:

I “segnaposti” che iniziano con ${ verrano poi sostituiti dai valori delle variabili (nel nostro caso definite nel file JSON) non a caso si chiamano con gli stessi nomi.

Quindi questo blocco di Html non apparirà fin dall’inizio nella pagina ma rimarrà astratto, lo richiameremo tra poco con Javascript.

5. Caricare i dati e inserirli nella pagina

Ok, potremmo dire che è più il setup del tutto che il codice effettivo, infatti grazie a jQuery e i suoi plugin caricare un file tramite una chiamata asincrona (Ajax), passare i dati al template e inserire il tutto nella pagina è un’operazione semplice, inseriamo 3 tag script in fondo alla pagina: uno caricherà jQuery, il secondo il plugin di Templating e il terzo conterrà queste poche righe:

// Caricamento completato documento
$(document).ready(caricamento);

function caricamento(){
	// Chiamata Ajax per caricare il file JSON con i prodotti
	$.getJSON("dati/prodotti.json",creaTabella);
}

// Funzione che viene eseguita al termine del caricamento
// la variabile "informazioni" ospiterà il contenuto del file JSON
function creaTabella(informazioni){
	// Inserisco il template con i dati esterni nella tabella
	$("#templateRiga").tmpl(informazioni)
		.appendTo("#prodotti");
}

La riga dentro la funzione “creaTabella” si occupa di selezionare il template Html, chiamare il plugin Tmpl passandogli i dati che abbiamo caricato dal file JSON e con il metodo .appendTo() inserire il risultato dell’operazione nel corpo della tabella.

A questo punto salvate il file e lanciatelo nel browser, dovreste vedere la tabella non più vuota ma con i dati definiti nel file esterno.

6. Rendere ordinabile la tabella

Per far percepire il tutto più come un’applicazione e meno come una pagina possiamo fare in modo che cliccando sulle intestazioni delle colonne queste vengano riordinate, grazie al plugin TableSorter (che dovrà essere caricato prima dello script con le nostre azioni) ci basterà aggiungere una riga nella funzione “creaTabella”:

function creaTabella(informazioni){
	...
	// Rendo la tabella ordinabile
	$("#prodotti").tablesorter();
}

Ora salvate e riaggiornate nel browser!

7. Idee per il dopo

Considerato che la riga che si occupa di fare la chiamata Ajax è all’interno di una funzione Javascript si possono provare delle alternative rispetto alla soluzione che vi ho presentato qui, anziche caricare il tutto all’avvio della pagina è possibile:

• creare un pulsante e far caricare i dati esterni al click su di esso
• impostare un timer e far aggiornare i contenuti della tabella ogni x millisecondi

In chiusura

Alla fine, merito sopratutto di jQuery e di questi due suoi plugin, non è neanche stato troppo difficile realizzare questo componente! Come avete visto Bootstrap è molto comodo ma ricordatevi che dovrebbe appunto essere il vostro punto di inizio con i Css non una scusa per non stilare ulteriormente gli elementi!

(Foto originale di goosmurf)

Questa volta (e devo dire anche finalmente) il pacchetto super scontato di materiale riguarda proprio il mondo del web design, il Web Designer Pro Bundle che ci propongono include:

• più di 500 icone (vettoriali e non)
• elementi grafici generici per siti web
• raccolta di pattern per sfondi
• elementi grafici di interfaccia utente
• vari temi per WordPress (compreso uno “responsive”)
• template Html per siti e email
• plugin premium sia di jQuery che di WordPress
• alcune foto di stock

come i precedenti pacchetti anche questo viene venduto all’invitante prezzo di 20 dollari (per noi sono circa 15 euro) ma sbrigatevi perché il pacchetto sarà disponibile fino al 27 febbraio!

I motivi ci sono e con il recente rilascio della seconda versione sono aumentati!

Che dobbiate realizzare un prototipo, un sito vero e proprio, un gestionale o una web app troverete gran parte delle funzionalità messe a disposizione da Bootstrap utilissime per il vostro progetto! 

E’ tutto in uno

Basta andare a caccia di reset, griglie, stili per form e utility varie! Bootstrap include tutto questo e in più ha due varianti di layout: fisso e fluido. Gli stili che vengono applicati alle form sono forse la prima cosa che mi ha reso dipendente da questa libreria, in quanto danno un look molto più moderno e professionale rispetto a quelli di default dei vari browser, per non parlare di quelli dei pulsanti con alcune varianti a disposizione.

Ora anche con icone

Grazie a Glyphicon Bootstrap2 include uno sprite di varie icone che possono essere incluse molto facilmente rendendo molto più espressivi i pulsanti, sia che realizzate un sito o una web app.

Le tabelle non sono più una vergogna

Grazie allo stile di default e gli altri messi a disposizione, tra cui lo “zebra-striped” che colora in modo alternato le righe, non vedrete l’ora di inserire delle tabelle nelle vostre pagine!

C’è anche un set di plugin Javascript

Bootstrap include anche alcuni plugin di jQuery per realizzare gli effetti più comuni: menu a tendina, slider di immagini, schede e finestre modali solo per citarne alcuni… che sia l’inizio di una concorrenza con jQuery UI ?

E’ pronto per il mobile!

Tutti gli stili di Bootstrap 2 sono costruiti sfruttando anche i CSS Media Queries e quindi che il vostro sito sia visualizzato su uno schermo a 1280 pixel di larghezza o sullo display di uno smartphone il layout si riadatta in modo ottimale. Non ci credete? andate sul sito di Boostrap con il vostro Pc e anche con un dispositivo mobile!

Tuttavia ricordatevi che…

… i framework CSS sono e resteranno sempre dei punti di partenza, il loro scopo non è farci fare di meno ma permetterci di spendere il tempo che impiegheremmo per creare tutto ciò che includono per fare la parte più divertente di questo lavoro: creare siti e web apps favolose!

Il prolungamento, da uno a due giorni, sarà l’occasione per distribuire le attività del Codemotion in un arco temporale più vasto. I partecipanti avranno così la possibilità di poter seguire i talk da loro desiderati con minore probabilità di incorrere nel rischio di sovrapposizioni di interventi.

La contemporaneità fra Roma e Madrid permetterà di costruire un evento che unirà le due capitali attraverso la passione per la tecnologia e per la programmazione. Codemotion Roma e Codemotion Madrid sono organizzati con lo stesso spirito e format, i protagonisti saranno i contenuti tecnici e le Codemotion People.

Il Codemotion si terrà a Roma il 23 e 24  marzo 2012.
L’ingresso all’evento è come sempre gratuito.
Per ogni informazione: http://www.codemotion.it

Un “problema” delle transizioni CSS3 è il fatto che sono legate ai cambiamenti di stato, e nonostante nel linguaggio CSS ne esistono vari, spesso il più utilizzato è :hover ovvero quello responsabile di gestire il passaggio del mouse su un particolare elemento (esiste un CSS Tip a riguardo)… una favolosa interazione che è completamente inutile sui dispositivi touch! 

Ma non disperate non è ancora tutto perduto perché Javascript è qui per darci una mano, possiamo tranquillamente utilizzare eventi Javascript (uno a caso… il click!) per far scaturire queste transizioni senza neanche troppa fatica.

Tenete pronto jQuery, anche se non è strettamente necessario, ci farà comodo per accedere velocemente agli eventi e alle classi CSS.

Guardate il file di prova Le basi delle transizioni CSS3

1. Preparare il file

Creiamo un nuovo file Html vuoto nel quale creiamo un elemento “cavia”. Un div, un button… quello che più vi piace, assegnategli un id così sarà più facile selezionarlo dopo.

<div id="elemento"></div>

Tramite Css dategli un colore di sfondo e delle dimensioni, giusto per creare un elemento di test, tipo 150×150 pixel con sfondo azzurro.

2. Creare le regole necessarie

Nella regola che definisce questo elemento dovremo anche inserire la proprietà “transition” (con il prefisso per Webkit) che dirà al browser di eseguire un’interpolazione quando rileva un cambiamento di proprietà sull’elemento:

#elemento{
  -webkit-transition: all 0.5s ease;
}

Visto che è un oggetto a posizionamento statico useremo  i margini per muoverlo, creiamo una classe che rappresenti lo stato finale della nostra animazione, dandogli un bel margin-left abbondante lo faremo muovere verso destra:

.spostamento{
  margin-left: 400px;
}

E per adesso non assegnatela a nessun elemento,

3. jQuery mette e toglie

Ora è il turno di jQuery! Dopo averlo incorporato dovremo dirgli che al click sul nostro id elemento dovrà fare qualcosa… alternare l’assegnazione e la rimozione di una classe, magari quella creata poco fa, sull’elemento corrente

$("#elemento").click(function(){
  $(this).toggleClass("spostamento");
});

Quindi:

1. si clicca sull’elemento
2. jQuery assegna la classe a quest’ultimo
3. la proprietà “transform” rileva un cambiamento di proprietà e il browser esegue la transizione
4. si clicca di nuovo e jQuery toglie la classe, altro cambiamento e la transizione va al contrario
5. e via così…

4. Opzionale – versione senza jQuery

Per chi vuole smanettare un pò di più con Javascript allo stato puro, il codice per fare (quasi tutto) quello ricreato poco fa:

var elemento = document.querySelector("#elemento");

elemento.addEventListener("click",cambia,false);

function cambia(){
  this.className += " sposta";
  this.removeEventListener("click",cambia,false);
}

Descrivendo le righe qui sopra:

1. Accedo all’oggetto con id elemento e lo memorizzo in una variabile Javascript
2. Aggiungo un event listener per dirgli di richiamare la funzione cambia al click
3. Nella funzione cambia: aggiungo la classe sposta all’elemento corrente
4. Nella funzione cambia: rimuovo l’event listener per evitare che continui ad aggiungere la stessa classe

Rimuovere la classe dall’elemento e alternare l’assegna/rimuovi è un po più complesso e va un po fuori l’argomento di questo breve tutorial… e poi ragazzi le librerie Javascript come jQuery esistono proprio per questo .

5. Dateci dentro!

A questo punto direi che è giunto il vostro momento di provare, testare e smanettare. Magari anche con eventi diversi dal click, jQuery UI mette a disposizione anche il trascinamento (drag)!

Ricordatevi che potete riprovare la demo e scaricare un file già completo e funzionante tornando verso l’inizio dell’articolo.

Abbiamo già parlato in precedenza di alcuni servizi dedicati ai font, oggi ne vediamo uno diverso ma che ha come scopo proprio quello di permetterci di usare tipografia avanzate diverse dai soliti font sicuri per meglio caratterizzare le nostre pagine, stiamo parlando di Cufón, un semplicissimo script supportato da tutti browser disponibili. 

L’implementazione è molto facile e riducibili in quattro fasi:

1. Scaricare Cufon-yui.js dal sito http://cufon.shoqolate.com/generate/ ed inserirlo nella sezione <head>della vostra pagina web ( <script src=”cufon-yui.js” type=”text/javascript”> </ script>)
2. Scegliere il file del font (*.ttf, *otf, ecc.) che si desidera convertire e caricarlo nel convertitore che trovate sempre sul sito lasciando  le impostazioni predefinite, accettate i termini del generatore, e dopo aver flaggato la casella di controllo EULA inviare il modulo e il gioco è fatto!
3. Caricate il file javascript del font generato nella vostra pagina subito sotto allo script del cufon (<script src=”IlTuoFont.font.js” type=”text/javascript”></ script>)
4. Utilizzare gli ID, le classi o i tag dove volete trasformare il vostro font così:

<script type="text/javascript">
  Cufon.replace('H1');
  Cufon.replace('#sub1');
</script>

Nella head del nostro documento inseriamo il tag script di caricamento di Cufón, del nostro fon convertito e un blocco di codice Javascript dove specifichiamo su quali elementi vogliamo usare i nostri font speciali.

Se vogliamo usare selettori avanzati (in genere sono inclusi in librerie Javascript come jQuery e MooTools) dovremo incorporarli prima di queste righe!

<script src="cufon-yui.js" type="text/javascript"> </script>
<script src="YourFont.font.js" type="text/javascript"> </script>
<script type="text/javascript">
  Cufon.replace('H1'); / / Funziona senza un motore di selettore
  Cufon.replace('#sub1'); / / Richiede un motore di selettore per IE 6-7, vedi sopra
</script>

Inseriamo i nuovi elementi Html nella pagina:

<h1> tuo carattere personalizzato qui </h1>
<h2 id="sub1"> tuo carattere personalizzato anche qui </h2>

Per evitare ritardi, è meglio inizializzare Cufon prima di altri script in fondo alla pagina.

<script type="text/javascript">
  Cufon.now ();
</script>

Attenzione però per evitare problemi, qui ci sono alcune cose da osservare:

• Un doctype transitional potrebbe rompere l’attibuto line-height del css, utilizzare un doctype strict o HTML5.
• Evitare spazi bianchi (o qualsiasi altra cosa) prima del doctype. Questo creerebbe dei problemi di stampa in IE.
• UTF-8 è il solo set di caratteri supportati. Infatti è possibile che alcuni font non siano visualizzati correttamente.

Lascio a voi la possibilità di sbizzarrirvi utilizzando tutte le API supportate dal cufon, che troverete qui.

(Foto originale di pheezy)

Sappiamo che il web per metà è imprevedibile quindi occupiamoci dell’altra metà, ovvero la strada presa durante il 2011 a cosa sta portando… 

La grande metamorfosi di Internet Explorer

Per il sito più pessimista di statistiche web IE si aggira oggi intorno al 51% di share, il che significa che nel giro di un mese o due la somma degli altri browser sarà per la prima volta nella storia più alta della quota di mercato del caro vecchio IE, che tuttavia rimarrà (ancora per questo anno mi sa) singolarmente il browser più usato. In più a partire da questo mese e progressivamente la Microsoft forzerà gli aggiornamenti delle versione 6 e 7 verso le più recenti 8 e 9 (in base alla versione di Windows). In più la versione 10 di IE dovrebbe giungere a noi verso primavera/estate, probabilmente insieme a Windows 8.

Anche se sarà dura, la nostra percezione di Internet Explorer cambierà sensibilmente!

Chrome inpenna, Firefox ancora sotto choc e Safari… boh!

Il 2011 ha anche segnato la già incontrastata ascesa di Chrome confermandolo tra novembre e dicembre come il 2° browser più usato al mondo. Fatto molto importante perché Chrome si porta dietro molte feature innovative come i comandi vocali (per ora solo sui siti Google americani), il Web Store, le estensioni scritte in linguaggi web, Flash Player integrato e a breve supporto nativo di webcam e joypad!

Firefox con sommo rammarico non solo perde terreno ma ha perso molta fiducia da parte degli sviluppatori, specie dopo la decisione di aggiornarlo ogni 6 settimane con aggiornamenti praticamente vuoti e privi di particolari novità. C’è ancora tanta utenza fedele ma nel 2012 vedo un trend negativo per questo browser, sopratutto per l’incapacità di Mozilla di indicare una strada da seguire per Firefox la dove la concorrenza invece sembra avere le idee molto chiare.

E Safari? attualmente è il browser più vecchio (la versione 5 ha più di un anno) e di recente Apple si è degnata solo di assegnargli un vago “.1″ in occasione dell’uscita di OSX Lion. Strano vedere così poco interesse in un browser da parte di un’azienda che ha detto di puntare tutto sui nuovi standard. Safari Mobile guida il mercato dei browser per smartphones e tablet, ma anche qui recentemente non ci sono state particolari novità. Per lui difficile fare previsioni… staremo a vedere!

Mobile, mobile e ancora mobile

Ormai è un trend abbastanza scontato: si vendono sempre più smartphone, si è aperto il mercato dei tablet, qualcuno ci prova con prodotti “nuovi”. Prepariamoci a un web sempre più evoluto e vissuto in movimento!

E invece cosa accadrà su MoebiusMania.net?

Ammetto le scarse pubblicazioni in dicembre, purtroppo lavoro progetti paralleli e nuovi design mi hanno tenuto un po impegnato, ma grazie ai nuovi autori preparatevi a nuovi articoli e tutorial sempre all’avanguardia!

Posso anticiparvi che:

• ci sarà un nuovo design (con nuove funzionalità) nel giro di poche settimane
• in generale i tutorial saranno più orientati su Html5 e dintorni
• i tutorial di Javascript saranno meno basilari
• ci saranno tutorial che combineranno più linguaggi
• inizieremo a parlare anche di Php
• e altro ancora…

Ringraziandovi per il tempo speso su questo blog vi auguro buon anno e vi ricordo che se siete interessati a partecipare potete sia commentare i post (magari con suggerimenti o link) o anche proporvi come autori.

(foto di copertina a cura di playlight55)

Le novità non sono poche, ma vediamo quelle principali:

• un nuovo uploader di immagini/multimedia che supporta il drag’n'drop(ovvero trascinate i file da una cartella nel nuovo uploader e il gioco è fatto)
• barra di ammistrazione snellita e riorganizzata
• schermate e tooltip introduttivi per spiegare le nuove funzionalità
• ora WordPress incorpora jQuery 1.7.1
• è anche integrato tutto lo stack di jQuery UI 1.8.16
• il menu di navigazione dell’admin ora è a tendina al passaggio del mouse
• l’admin di WordPress muove i primi passi verso il mobile ed è stata disegnare per funzionare su iPad

Trovate la lista completa e dettagliata delle novità nel post ufficiale del team di sviluppo, WordPress 3.3 è gia scaricabile in inglese dal sito ufficiale e l’aggiornamento è già disponibile dalle backend dei siti. Per la traduzione in italiano dovrebbe essere questione di giorni!

Il primo di questo Dicembre arriva dai ragazzi di Envato che dopo il fortunato bundle grafico di Ottobre ce ne propongono uno nuovo dedicato a chi sviluppa o realizza videogiochi: l’ Indie Game Developer Bundle. Ammetto che è un pochino off-topic rispetto al blog ma essendo un’appassionato di gaming non potevo non segnalarlo!

Il pacchetto contiene modelli 3D, grafiche 2D, texture, tutorial di programmazione per iPhone e materiale per Unity 3D.

Se siete piccoli sviluppatori di videogiochi o volete solo avvicinarvi all’argomento direi che sono 20$ (dollari) spesi bene!

Nei prossimi giorni altri bundle, tra cui quello nostro!

La soluzione?

Una libreria Javascript chiamata Modernizr che ci permette di testare la disponibilità delle funzioni html5 e css3 nei vari browsers. In questo modo è possibile creare codice cross browser  gestendo le varie eccezioni. Vediamo nel dettaglio come installare questa libreria. 

Nella pagina di download ,è possibile scaricare la versione development , dove potete scaricare la versione completa ed e estesa della libreria per implementarla secondo le vostre specifiche. Per chi, invece, deve solo testare la compatibilità dei Css3 nel browser , è possibile settare le varie opzioni che la libreria ci offre e generare il nostro codice compresso. Incollate il codice in un file .js esterno e inseritelo nel tag <head> della pagina. Il team di Modernizr consiglia di includere la libreria appena dopo le importazioni Css.

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
 <head>
  <title>La tua pagina</title>
  <script type="text/javascript" src="modernizr-latest.js""></script>
 </head>

 <body>

 </body>
</html>

Modernizr  supporta  i seguenti  browsers :

IE6+, Firefox 3.5+, Opera 9.6+, Safari 2+, Chrome. Su mobile: iOS mobile Safari, Android WebKit browser, Opera Mobile, Firefox Mobile.

Ora avete una libreria javascript che vi dice se la funzione Css3 o Html5 che avete utilizzato viene supportata o meno, lanciate la pagina nel browser e guardando il tag <html> con strumenti sviluppatori di Chrome o Firebug vedrete una cosa di questo tipo:

<html class="js flexbox canvas canvastext webgl no-touch geolocation postmessage websqldatabase no-indexeddb hashchange history draganddrop websockets rgba hsla multiplebgs backgroundsize borderimage no-borderradius boxshadow textshadow opacity cssanimations csscolumns cssgradients cssreflections csstransforms csstransforms3d csstransitions fontface generatedcontent video audio no-localstorage no-sessionstorage webworkers applicationcache svg inlinesvg smil svgclippaths">
....
</html>

Prendendo come esempio di proprietà da monitorare il border-radius, se il browser la supporta viene applicata al tag <html> la classe “borderradius” altrimenti un’altra di nome “no-borderradius”. Dato che i browser vecchi ignorano le proprietà Css3 possiamo applicare border-radius senza problema per stilare, per esempio, un tag <img> e a questo punto per creare una regola alternativa nel caso questo elemento venga visualizzato da un browser che non supporta i Css3 usiamo questo selettore

.no-borderradius img{
  /* ... */
}

Per chi è più esperto e ha dei casi particolari da monitorare, ci sono una seri di API che servono per implementare il cuore della librerie adattandola alle vostre esigenze.

Nella pagina dedicata potete trovare tutta la documentazione inerente alla libreria con i vari esempi per ciascuna features che Modernizr supporta.

Potrei stare a scrivere mille cose a riguardo, ma dato che non so a quanti di voi possano realmente interessare, ho deciso di rendere questo post un pochino più creativo facendo una classifica degli articoli più letti di questo terzo anno:

1. Introduzione a TweenLite – in questo tutorial ho esposto le basi della libreria TweenLite di ActionScript 3 per creare facilmente animazioni accattivanti all’interno di siti/applicazioni creati all’interno di Flash o Flex.
2. 15 estensioni di Chrome per Webdesigners – Raccolta di piccole ma comode estensioni per facilitare la vita del web designer/developer.
3. Html5 parla italiano – Dove segnalavo un buon blog (e attualmente mi pare anche l’unico) nostrano che parla esclusivamente dell’argomento più hot dell’ultimo nel mondo dello sviluppo web.
4. Lavorare con i bookmark: Licorize – La mia recensione dell’ottimo servizio di bookmarking realizzato dalla software house fiorentina Open Lab.
5. 4 client FTP per ogni esigenza – mini raccolta dedicata ai software di File Transfer Protocol.

Ringraziando sempre tutti i visitatori, spero di fare un quarto anno ancora migliore!

• Adobe acquisisce Typekit e Nitobi (creatori di PhoneGap) per arricchire i servizi della Creative Suite.
• E’ disponibile la beta di jQuery 1.7 che introduce nuovi eventi, miglioramenti alle animazioni e altre modifiche.
• Bootstrap (il framework di Twitter) arriva alla versione 1.3 e aggiunge anche effetti Javascript.
• Flash Player 11 e AIR 3 sono stati ufficialmente rilasciati!
• JetBrains rende disponibile gratuitamente in beta un IDE per Flex, AS3, AIR e Html5.
• jQuery Mobile arriva alla prima Release Candidate e si avvicina il rilascio ufficiale.

Aggiornamento 27/10: Ho aggiunto in fondo alla lista alcuni link a risorse premium (a pagamento) e altri link a risorse gratuite.

Siete liberi di segnalare altri link di risorse utili a tema nei commenti! 

Combinazioni di colori

Prima ancora di disegnare siti o assets grafici è sempre bene avere chiaro cosa si vuole ottenere, e la giusta combinazione di colori fa parte di questa fase, eccovi alcuni spunti a tema dark.

• Halloween
• Carved Pumpkin
• Halloween in summer
• Bedazzled Halloween

Photoshop & Illustrator

Dai tutorial a template di partenza ad elementi completi ecco una lista di materiale sia raster che vettorial da non perdere.

• Testo con effetto Mummia – tutorial per Illustrator CS5.
• Zucca in Photoshop – tutorial per creare una composizione in Photoshop CS3+.
• 50 illustrazioni vettoriali – raccolta di wallpaper.
• Halloween doodles – set di pennelli per Photoshop in stile schizzi a mano.
• Sfondo “cartoon-oso” - un simpatico wallpaper vettoriali con i mostri classici in versione cartoon.
• Scary Halloween - un bel wallpaper vettoriale.
• Halloween Grunge – pennelli per Photoshop con sagome di scheletri e pipistrelli.

Webdesign (Html, Css, Js, Flash)

Template, elementi, script che possono sempre servire nella realizzazione di siti con combinazioni di colori “dark”.

• Horror fonts – un pò di fonts stile a mano/horror… gratuiti!
• Countdown banner – un conto alla rovescia con animazioni in Flash da inserire nel vostro sito

WordPress

Temi e plugin a tema per il noto CMS del momento!

• Trick or Treat – Tema gratuito abbastanza curato graficamente.
• Halloween quotes – plugin che aggiunge a caso ad intervalli di tempo predefiniti effetti inaspettati.
• Countdown clock – un plugin per aggiungere un conto alla rovescia nelle sidebar, utile per qualunque evento!
• Theme rotator - rotatore di temi, per alternare più temi in modo automatico.
• Halloween Festival – altro tema gratuito.

Fotografia

Può sembrare off-topic ma quando si realizzano siti o assets spesso sono necessarie fotografie, sia propriamente descrittive sia di “contorno” ai contenuti. Può darsi che queste vi vadano bene può darsi che dovreste (o vorreste) scattarle voi.

• Halloween photography tips – ottime indicazioni per gli scatti durante le feste di Halloween.
• Creative ideas – altri consigli per gli scatti hallowiniani.
• Photos at Halloween – un paio di idee interessanti su come cambiare il colore delle luci per gli scatti.
• Ottilien Lantern, Pumpkin light – foto di stock gratuite.

Materiale Premium

Tutto quello che vi ho elencato finora era materiale gratuito e per certe cose c’è da ammettere, nonostante abbia selezionato solo quello che mi sembrava migliore, che bisogna un po’ scendere a compromessi… ecco perché qui vi elenco alcuni elementi “premium” ovvero a pagamento, ma non preoccupatevi il massimo è 14 dollari , che poi va convertito in euro .

• Hallowinning Landig page – 10$ – Una pagina Html singola ben realizzata con già diversi effetti Javascript integrati.
• Hallowinning email – 14$ – Stesso tema ma questa volta è un template per email.
• Halloween Labels – 4$ – Biglietti vettoriali stampabili
• Halloween Background – 2$ – Uno sfondo tetro vettoriale usabile come base per poster o locandine.
• Zombie Hand – 4$ – Ottima illustrazione vettoriale da usare per composizioni.

in chiusura

E con quest’ultima raccolta chiudiamo la sessione dedicata ad Halloween, il materiale non è mancato, quindi ora tocca a voi… datevi da fare .

Dopo aver realizzato la favolosa zucca 3D del nostro Halloween Bundle 2011 , The Monk Design ci guida nella realizzazione di un fotomontaggio per ricreare un effetto simile a quelli visti nel cartone animato Ken Shiro, quando i nemici esplodono dopo aver premuto i punti di pressione. 

Head Xplosion – Parte 1 | Head Xplosion – Parte 2

Ci vediamo domani con l’ultimo post, la raccolta di materiale e risorse su web!

Oggi daremo un’occhiata ad alcuni siti che utilizzano un layout basato su temi scuri , in genere quando si lavora con un combinazione di colori “dark” si usa un nero di sfondo e si gioca con colori caldi di contrapposizione. Ecco alcune semplici nozioni da tenere in considerazione quando optate per combinazioni di colore scure per i layout:

• non bisogna per forza usare il nero totale (#000) come sfondo.
• una volta trovato un buon colore di sfondo provate ad applicarci una texture.
• con le combinazioni di colore scure è più facile cadere nell’errore di ottenere contrasti testo/sfondo non molto efficaci e leggibili.
• a volte c’è il pregiudizio che il nero e lo scuro siano “macabri”, errato! ovviamente dipende come lo trattate, spesso i colori scuri sono sinonimi di eleganza.
• non si deve per forza esagerare con colori e contenuti in un layout dark, molti siti scuri sono anche minimalisti!

Detto questo, ecco alcuni siti in cui osservare quello di cui discusso qui sopra:

(Nota: la generazione delle preview è automatica, se appare la scritta “generating preview” provate a ricaricare la pagina)

Blake Allen Design

Osvaldas Valutis (v1)

Riser Media

Vivas

Edson Espíndola

Leukocit

Nell’ultimo post della sessione (la raccolta) troverete link anche ad alcune palette di colori scuri.