Alcuni fattori del mondo reale come le batterie scariche e il segnale scarso possono far diventare un incubo anche un’eccellente esperienza digitale. Questi fattori esulano dal nostro controllo e, fino a poco tempo fa, non c’era nulla che potessimo fare, mentre adesso potrebbe esserci. Tim Wright ci spiega in che modo migliorare le esperienze utente in condizioni che cambiano costantemente (e che a volta sono orribili), riflettendo sull’environmental design e sulle Device API.
Argomento: Javascript
Application Cache è un idiota
Siamo meglio connessi di quanto non lo siamo mai stati ma non siamo sempre connessi. ApplicationCache permette agli utenti di interagire con i propri dati anche quando si è scollegati, ma insieme a grandi poteri arrivano grandi problemi. Ad esempio, i files provengono sempre da ApplicationCache, anche se l’utente è online, Oh e in certe circostanze, un browser nono può sapere che quel contenuto online è cambiato, il che implica che l’utente ottiene continuamente contenuto vecchio. E… Sì, a seconda di come mettete in cache le vostre risorse, le risorse non messe in cache potrebbero non caricarsi, anche quando l’utente è online. Jake Archibald di Lanyrd fa luce sui rischi di ApplicationCache e condivide con noi strategie, tecniche e code workaround per massimizzare il piacere e minimizzare il dolore sia per l’utente sia per lo sviluppatore. Tutto questo insieme a una demo. Tuffiamoci!
La creazione di Twitter Bootstrap
Bootstrap è un tool open-source per il front-end ideato per aiutare i designer e gli sviluppatori a realizzare rapidamente ed in maniera efficace i loro progetti su internet. Il suo obiettivo è quello di fornire una libreria elegante, ben documentata ed estesa di componenti di design flessibili creati con HTML, CSS e JavaScript, in modo che altre persone possano creare cose su questa base e continuare ad innovare. Ad oggi, è cresciuto fino ad includere dozzine di componenti ed è diventato il progetto più popolare su GitHub, con più di 13.000 watchers e 2000 fork. Mark Otto, il co-creatore di Bootstrap, ci mostra come e perché Bootstrap è stato creato, i processi che sono stati usati per realizzarlo e come è cresciuto come sistema di design.
Primi passi con Sass
La semplicità di CSS è sempre stata una delle sue caratteristiche più gradite. Tuttavia, man mano che i nostri siti e le nostre app diventano più grandi e più complesse e hanno come obiettivo un ampio range di device e dimensioni di schermo, la semplicità tanto gradita all’inizio, quando ci stavamo spostando dai tag font e dai layout basati sulle tabelle, è diventata un fardello. Fortunatamente, qualche anno fa gli sviluppatori Hampton Catlin e Nathan Weizenbaum hanno creato una nuova sintassi per i fogli di stile, con caratteristiche che ci aiutano a scrivere e a gestire più facilmente i nostri CSS sempre più complessi e poi ad usare un preprocessore per tradurre la nuova brillante sintassi in quella vecchia dei CSS, che i browser sono in grado di interpretare. Vediamo come Sass (syntactically awesome style sheets) possono aiutarci a semplificare la creazione, l’aggiornamento ed il mantenimento di siti e app potenti.
Textarea espandibili con classe
Un’area di testo espandibile è un input field di testo multi-linea che si espande in altezza per includere tutto il suo contenuto. Si trova comunemente nelle applicazione desktop e mobile, come il campo di composizione degli SMS negli iPhone. Costituisce una buona scelta quando non si sa quanto testo scriverà l’utente e voi desiderate fare in modo che il layout sia compatto. In quanto tale, è specialmente utile sulle interfacce pensate per gli smartphone. Tuttavia, nonostante l’ubiquità di questo controllo, non c’è un modo per crearle utilizzando solo HTML e CSS e la maggior parte delle soluzioni JavaScript soffre di supposizioni, inaccuratezza o una certa mancanza di eleganza… fino ad ora!
Introduzione ai test A/B
I dati sono uno strumento inestimabile per i web designer che devono prendere delle decisioni sulla user experience. Gli A/B test, o split test, sono uno dei modi più semplici per misurare l’effetto di diversi design, contenuti o funzionalità, aiutandovi a creare degli elementi di user experience altamente performanti che potete implementare nel vostro sito. Tuttavia, è importante essere sicuri di raggiungere dei risultati statisticamente significativi ed evitare le false tracce. Lara Swanson ci mostra come fare.
Trucchi e suggerimenti per il debugging moderno
Essere sicuri che il nostro sito funzioni come ci si aspetta nei diversi browser e sui vari dispositivi può essere una sfida anche per il più esperto web developer. Seguite Tiffany B. Brown mentre spiega l’error thowing and handling, il code injection ed il mobile debugging utilizzando JavaScript.
Adesso mi vedi
E’ un pattern di sviluppo comune utilizzare lemanipolazioni di pagina basate su JavaScript per le interfacce a tab, per gli elementi collassabili e per le widget accordion per mostrare e nascondere del contenuto. Cerchiamo di capire come la scelta del meccanismo di occultamento del contenuto possa influenzare l’accessibilità al contenuto da parte delle tecnologie assistive come gli screen reader in un estratto da citeAdaptive Web Design/cite.
Rapid prototyping con Sinatra
Se siete web designer o web developer, conoscerete sicuramente il “prototyping”. Dai semplici wireframe alla creazione delle interfacce in Photoshop, i designer mappano il modo in cui siti funzioneranno prima di crearli. Negli ultimi anni, il processo di prototipazione è cambiato in maniera significativa. Con i produttori di browser che in generale aderiscono agli standard web e con l’avvento di tool come Firebug e web inspector di WebKit, possiamo a volte saltare Photoshop e andare direttamente nel browser. Inoltre, i framework JavaScript come jQuery ci permettono di giocare con gli eventi del browser usando solo qualche riga di codice. E se dovessimo fare qualcosa di più? Man mano che aumenta il numero di siti web che diventa web app, abbiamo ora bisogno di fare prototipi anche della funzionalità del back-end. Vi mostriamo come Sinatra, un cosiddetto “micro framework web”, vi può aiutare a creare delle web app reali (sebbene semplici) in maniera estremamente rapida, facendovi creare il prototipo dei flussi e del comportamento che integrerete nel prodotto finale.
Validazione innovativa delle form
Quando gli utenti compilano una form per comprare uno dei vostri prodotti o per sottoscrivere un vostro servizio, volete che gli errori siano ridotti al minimo e che vengano guidati verso il successo. Ora, con gli input types e gli attributi delle form in HTML5, potete porre dei vincoli di validazione per controllare l’input dell’utente. Con le nuove pseudo-classi UI di CSS3, potete assegnare degli stili agli stati di validazione per rendere la compilazione della form più veloce e semplice.
