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.
Argomento: HTML
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.
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!
Immagini fluide
Imparate come rendere flessibili le immagini a larghezza fissa e come aggiungerle alle griglie fluide per creare un sito che risponda alla dimensione della viewport senza sacrificare l’estetica. Siamo lieti di presentarvi un estratto dal nuovo libro di Ethan (nonché il quarto titolo di A Book Apart): emResponsive Web Design/em.
Uso di float in CSS
La proprietà float è una risorsa molto utile e potente a disposizione dei web designer/developer che lavorano con HTML e CSS. Purtroppo però, può anche causare frustrazione e confusione se non si comprende appieno il suo funzionamento. Mettete alla prova la vostra conoscenza o fate un ripasso con Noah Stokes, che esplora la teoria ed il comportamento del float e ci guida attraverso le insidie correlate all’uso di float.
Scalable Vector Graphics multipiattaforma con svgweb
Povero Scalable Vector Graphics! E’ uno standard ufficiale fin da prima del rilascio di IE6 e tuttavia non ha mai avuto molto pubblico sul web, sicuramente non quello che si merita. E proprio nel momento in cui SVG cominciava ad essere supportato abbastanza efficacemente dai browser, ecco che arriva il tag canvas a rubargli l’idea delle immagini generate lato client. Ma nonostante tutta l’attenzione che si dedica a canvas, c’è ancora posto per SVG, in special modo per gli svluppatori che vorrebbero rimpiazzare plugin come Flash per la visualizzazione dei dati. A differenza di canvas o di altri approcci solo basati su script, SVG può essere facilmente diviso tra elementi di design ed elementi di codice, con l’aggiunta di poco codice per aggiungere l’interattività. Funziona anche su dispositivi come l’iPad e l’iPhone. E ora, grazie a svgweb e ad un uso intelligente di Flash, funziona anche sulle piattaforme più vecchie su cui nessuno si aspetterebbe che SVG possa funzionare. Jim Ray ci mostra come.
Fondamenti del posizionamento in CSS
Se siete un front-end developer o un designer a cui piace programmare, i layout basati sui CSS sono il fulcro del vostro lavoro. Il designer/developer Noah Stokes esamina attentamente la proprietà codeposition/code di CSS per mostrarvi come può essere usata per creare dei layout standard-compliant e senza tabelle mediante i CSS. Mettete alla prova la vostra conoscenza o ripassate il posizionamento statico, relativo, assoluto, fisso ed inherited e come funzionano quando usati insieme per creare qualsiasi layout web che la mente umana possa concepire.
