Vi presentiamo la ALA Summer Reading Issue, i nostri articoli preferiti scelti tra i 355 numeri di A List Apart. Potete leggerli (in inglese) anche come epub sul Kindle, sull’iPhone, sull’iPad, su Readmill o altri lettori di e-book.
Argomento: CSS
Un esempio di CV responsive
I veterani brizzolati del job hunting sanno fin troppo bene che un brillante curriculum vitae e un colloquio praticamente perfetto potrebbero ancora lasciarvi senza il lavoro dei vostri sogni. La concorrenza è feroce e non finisce mai. Trovare nuovi modi per distinguersi nell’implacabile economia di oggi è vitale per la sopravvivenza di noi designer/developer. Fortunatamente, il maghetto degli standard web nonché mobile web developer Andrew Hoffman ha trovato un modo dandy per differenziarci e che tra l’altro è perfetto per i lettori di citeA List Apart/cite. Vediamo come creare un curriculum semplice in HTML5/CSS3 che si adatti bene alle varie dimensioni della viewport, che sia semplice da aggiornare e mantenere e che non diventi mai obsoleto.
Creare libri con CSS3
Sebbene storicamente sia stato difficile, nel caso migliore, creare dei libri in PDF di qualità pari a quella della stampa partendo dal solo markup, CSS3 ci mette ora a disposizione Paged Media Module, che ha come obiettivo la formattazione dei libri stampati. I media Paged esistono come pagine finite, come libri e riviste piuttosto che lunghi segmenti di testo su cui fare scrolling, come la maggior parte dei siti web. Con un solo foglio di stile CSS, gli editori possono prendere il contenuto sorgente XHTML e metterlo in un PDF sistemato e pronto per la stampa. Potete prendere il sorgente XHTML, bypassare i software di desktop page layout come Adobe InDesign e confezionarlo come un ePub Media. È un workflow leggero e adattabile, che vi dà dei libri bellissimi in maniera più rapida. Nellie McKesson, eBook Operations Manager in O’Reilly Media, spiega come creare libri con CSS3.
Diciamo no al grassetto simulato
I browser possono fare cose terribili ai caratteri. Se il testo ha come stile bold o italic e la famiglia del carattere non include un font bold o italico, i browser compenseranno questa mancanza cercando di crearsi da soli degli stili bold e italic. Il risultato sarà una goffa imitazione del design del carattere reale e può diventare particolarmente atroce con i font web. Alan Stearns di Adobe condivide con noi delle tecniche e ci dà dei suggerimenti su come essere sicuri che le regole @font-face corrispondano al font-weight e agli stili dei font e che ci sia una regola @font-face per ciascuno stile utilizzato dal contenuto. Se state passando parte del vostro tempo a scegliere un bel web font per il vostro sito, dovete a voi stessi e ai vostri utenti l’essere sicuri che stiate effettivamente usando un web font – e solo un web font – per visualizzare il contenuto del vostro sito in tutta la sua gloria.
Tuffiamoci nel responsive prototyping con Foundation
Ci sono centinaia di dispositivi che possono accedere al full web, come disse una volta Steve Jobs. Hanno capacità e vincoli differenti, cose come lo stile di input o le dimensioni dello schermo, la risoluzione e la forma. Con tutti questi dispositivi pronti a superare i tradizionali computer desktop per quel che riguarda il traffico web del prossimo anno, abbiamo bisogno di tool che ci aiutino a creare in maniera responsive. Jonathan Smiley ci mostra come tuffarci nel responsive design usando Foundation, un leggero framework front-end che ci aiuta a fare prototipi e siti in produzione in maniera rapida.
La delicata questione del vendor prefix: Eric Meyer di ALA intervista Tantek Çelik
Durante una riunione pubblica del W3C CSS Working Group, il web standards lead di Mozilla Tantek Çelik ha fatto esplodere una crisi nella Terra degli Standard Web quando si è lamentato degli sviluppatori che non hanno capito ed abusano dei vendor prefix supportando solo quello di WebKit, creando così un panorama di monocoltura di browser. La soluzione che propone Tantek, far finta che Mozilla sia WebKit, ha infiammato molti animi nella comunità degli standard, specialmente quando i rappresentanti di Opera e Microsoft sono stati immediatamente d’accordo riguardo tale questione e hanno annunciato dei piani simili a quelli di Mozilla. Per andare alla radice della nuova enorme confusione, il nostro Eric Meyer intervista, in esclusiva per A List Apart, Tantek sul controverso piano di Mozilla di supportare le proprietà con il prefisso -webkit-.
Ogni volta che chiamate “CSS3” una feature proprietaria, un gattino muore
Qualsiasi feature -webkit- che non sia presente in una specifica (nemmeno in Editor’s draft) non è CSS3. Sì, vengono comunemente evangelizzate come tali, ma non fanno assolutamente parte di CSS. Questa distinzione non è una pignoleria: è importante perché incoraggia alcuni produttori ad aggirare il processo degli standard, ad implementare qualunque cosa trovino in WebKit, per poi evangelizzarla agli sviluppatori come se fosse la cosa migliore del mondo. Siamo così bramosi di utilizzare il nuovo gioiello che spesso ci dimentichiamo di quante persone hanno combattuto negli scorsi dieci anni per far sì che potessimo scrivere codice senza fork e senza hack ed aspettarci che funzioni in maniera interoperabile. Lea Verou spiega perché le soluzioni “single-vendor” non sono standard e non sono salutari per la vostra pratica professionale o per il futuro del web.
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.
Le meraviglie di CSS3 nel mondo reale
Sono qui, sono strani, dovete farci l’abitudine! I CSS3 sono divertenti e fantastici e se progettiamo con in testa il progressive enhancemente, possiamo aggiungere qualsiasi magheggio CSS ai nostri siti web e alle nostre applicazioni senza doverci preoccupare di come le cose funzionino (oppure no) nei vecchi browser e sui device datati. Ma cosa succede se il nostro audience include gente che usa telefoni non-Webkit? E se i nostri clienti credono ancora che una pagina web debba apparire uguale su tutti i device? Impariamo come creare delle meraviglie CSS3 il più cross-browser possibili.
