Share
L'evoluzione delle tecnologie Internet non finisce mai di stupire. Apparentemente ogni giorno, nuovi concetti e tecniche sono state ideate da persone creative e di talento. Con i browser moderni che vengono adottati a un ritmo maggiore, sistemi come CSS3 stanno diventando sempre più fattibili per l'uso su progetti di tutte le dimensioni. Chiaramente, questo può essere visto guardando i nuovi servizi che spuntano on-line come TypeKit. Concettualmente, se decostruiamo un font in base ai suoi elementi di base, possiamo usare questa tecnologia per cose diverse dal tipo, icone.
Per un breve periodo di tempo, gli sviluppatori hanno iniziato a produrre siti web con scarso interesse per il consumo di larghezza di banda. HTML e CSS dove restrittiva e Adobe Flash era una tela aperta per designer e sviluppatori per creare animazioni e layout complessi. Ciò ha comportato alcuni siti pesanti con larghezza di banda elevata, tutti ne ricordiamo alcuni. Quelli erano i giorni prima della proliferazione degli smartphone mobili.
Con gli smartphone che accedono a Internet con maggiore frequenza, la larghezza di banda e le velocità di caricamento delle pagine sono improvvisamente tornate alla ribalta. Per fortuna, i progressi in HTML, CSS, e JavaScript hanno reso tutto ciò possibile. La velocità e la reattività della pagina web centrale è il numero di HTTP richiede un caricamento della pagina deve fare. I browser moderni limitano il numero di richieste a un singolo server. Si legge la specifica HTTP 1.1 del W3C
"Un client single-user NON DEVE mantenere più di 2 connessioni con qualsiasi server o proxy. Un proxy DEVE utilizzare fino a 2 * N connessioni a un altro server o proxy, dove N è il numero di utenti attivi contemporaneamente. Queste linee guida sono destinate a migliorare HTTP tempi di risposta ed evitare la congestione. "
Una tecnica che è diventata sempre più popolare è l'uso di CSS sprite. CSS gli sprite sono progettati per ridurre il numero di HTTP richiede al server Web combinando molte immagini più piccole in un'unica immagine più grande e definendo un livello di blocco CSS elemento per mostrare solo una porzione definita dell'immagine più grande. La tecnica è semplice, ma geniale.
I caratteri al loro livello molecolare più basilare sono una serie di glifi vettoriali racchiusi in un singolo "glifo archivio".
CSS3 ha introdotto nel mondo dello sviluppo web la possibilità di incorporare i caratteri con il @ Faccia a faccia dichiarazione. Senza dubbio, questo progresso nelle tecnologie Internet è una delle fasi più emozionanti e importanti della nostra breve storia. Con gli sviluppatori in grado di incorporare i caratteri di loro scelta, i progettisti possono produrre layout che renderanno molto più coerenti da una piattaforma all'altra portando l'arte del layout interattivo più vicino al cugino della stampa.
Se osserviamo da vicino la tecnologia alla base di un font, possiamo ottenere una migliore comprensione di come possono essere utilizzati e distribuiti. I caratteri al loro livello molecolare più basilare sono una serie di glifi vettoriali racchiusi in un singolo "glifo". Possiamo quindi fare riferimento a ciascun glifo tramite il suo codice carattere corrispondente. In teoria, è molto simile al modo in cui facciamo riferimento a un array in quasi tutti i linguaggi di programmazione, attraverso una coppia chiave / valore.
Con questo in mente, i glifi che facciamo riferimento possono essere in realtà qualsiasi immagine monocromatica basata su vettori. Non è una novità - abbiamo visto tutti i Dingbats e Webdings. Sono due esempi di caratteri non di tipo, ovvero una serie di immagini vettoriali basate su un singolo archivio di font.
Con l'avvento dell'integrazione dei font e la consapevolezza che i font sono essenzialmente una serie di semplici glifi vettoriali, ho iniziato a sperimentare su come utilizzare questo formato a mio vantaggio. Concettualmente, se inserissi tutte le icone necessarie per un particolare sito in un carattere personalizzato, sarei quindi in grado di utilizzare quelle icone ovunque sul sito con la possibilità di cambiare dimensione e colore, aggiungere sfondi, ombre e rotazione e praticamente qualsiasi cosa altro CSS consentirà il testo. Il vantaggio aggiunto è un singolo CSS sprite-like HTTP richiesta.
Per illustrare, ho compilato un nuovo font con alcune delle grandi icone di Brightmix.
Ho usato gli slot in minuscolo per le icone semplici e gli slot in maiuscolo per la stessa icona in un trattamento circolare.
Per utilizzare il mio nuovo Icon Pack, dovrò prima esportare il mio set di caratteri come un numero di diversi file di font (.eot, .woff, .ttf, .svg) per essere compatibili con tutti i browser. L'argomento dell'incorporazione dei font e della conversione del formato dei file è trattato altrove, quindi eviterò una spiegazione dettagliata qui. comunque, il CSS sarebbe simile a questo.
Accentsconagua
@ font-face font-family: 'IconPack'; src: url ('iconpack.eot'); src: local ('IconPack'), formato url ('iconpack.woff') ('woff'), formato url ('iconpack.ttf') ('truetype'), url ('iconpack.svg # IconPack') ( 'svg'); Una volta incorporato, ora ho un'icona completa impostata in formato vettoriale a cui fare riferimento. Per fare riferimento a un'icona ho semplicemente bisogno di uno stile che includa il famiglia di font di "IconPack".
un
L'esempio sopra mostrerebbe una stella ed è l'uso più basilare del concetto di Icon Pack, tuttavia non è molto intuitivo dal punto di vista dello sviluppo, non SEO amichevole, né si degradano con grazia nel caso di non-CSS supporto.
Per rimediare alla situazione, includerò a :prima pseudo-elemento e avvolgere il contenuto in a campata etichetta.
stella
Ora, la stella viene aggiunta al display e posso attivare la visiblility del testo usando il mostrare e nascondere classi. Il risultato è facile da consultare CSS classe che degrada con grazia ed è ottimizzata per i motori di ricerca. Per il mio intero set di icone, posso scrivere qualcosa di simile qui sotto.
icona sullo schermo
Il vantaggio qui è che l'icona si ridimensiona con la dimensione del carattere. In effetti, tutte le icone si ridimensionano e mantengono una perfetta chiarezza.
Finora, abbiamo solo toccato la punta dell'iceberg, niente di innovativo qui, anche se potresti iniziare a vedere le possibilità. Un vero mondo scenerio sarebbe la sostituzione del list-item-style. Per quanto riguarda l'utilizzo di un'immagine, ora possiamo utilizzare un'icona vettoriale dal nostro Icon Pack. Il vantaggio qui è che l'icona si ridimensiona con la dimensione del carattere. In effetti, tutte le icone si ridimensionano e mantengono una perfetta chiarezza.
Poiché le icone sono ora posizionate sulla nostra pagina come se fossero testo, possiamo applicare qualsiasi valido CSS stile per loro senza scaricare altre risorse. Potremmo fare domanda colore, dimensione del font, text-shadow, ecc. e utilizzare il : hover pseudo-elemento per il mouse sugli effetti-tutto con un singolo glifo.
Come con qualsiasi cosa, ci sono alcuni limiti sfortunati. Al momento, non è possibile visualizzare un glifo singolo con più colori. Ci sono stati alcuni trucchi CSS per ottenere sfumature sul testo dal vivo, tuttavia forme complesse con colori diversi in un singolo glifo rappresentano una limitazione. Detto questo, ci sono modi per approssimare glifi multicolori, segragando le parti di un grafico vettoriale in singoli glifi, quindi assemblandoli e colorandoli sulla pagina attraverso i CSS.
Un altro utilizzo interessante è un semplice CAPTCHA convalida. Sostituendo i glifi dell'alfabeto con i numeri, gli utenti vedranno i numeri, ma il codice della pagina sarà lettere. Alcuni semplici calcoli per tradurre tra i due, e tu hai un facile da leggere CAPTCHA.
Per illustrare meglio questi concetti, ho assemblato una pagina di esempio composta da due HTTP richieste: il codice della pagina e un singolo Icon Pack. È inclusa anche la possibilità di ridimensionare la dimensione del carattere della pagina per dimostrare chiaramente la flessibilità di incorporare glifi vettoriali. Il logo aziendale, la navigazione, le immagini e CAPTCHA usano tutti glifi. Si prega di notare, il CAPTCHA incluso qui è solo per illustrazione. Per utilizzarlo su un sito di produzione, suggerirei di convalidare sul lato server un algoritmo dinamico come apposto a JavaScript.
Questa pagina di esempio illustra anche l'uso di un glifo come sfondo "ripetuto" scalabile. Sarò il primo ad ammettere che questa implementazione è Hack-Ish nella migliore delle ipotesi, tuttavia penso che dimostri la flessibilità e la versatilità di Icon Pack.
Chiaramente, questo apre alcune possibilità. I progettisti possono sviluppare Icon Pack in vendita, le entità aziendali possono ospitare un singolo Icon Pack da utilizzare su tutti i media aziendali. I progettisti di modelli possono facilmente distribuire più opzioni di colore dello stesso modello senza dover salvare ed esportare un singolo file aggiuntivo. I web designer possono facilmente scalare i siti esistenti per renderli compatibili con i dispositivi portatili. Inoltre, questa tecnica espone le nostre icone al DOM abilitando effetti animati di tipo Flash con il tuo JavaScript preferito API.
Come supporto per l'utilizzo e il browser CSS3 penetra ulteriormente, Icon Packs avrà presto un grande impatto sulla distribuzione dei contenuti, migliorando le tendenze leggere, scalabili e multi-dispositivo che stanno iniziando a diventare una necessità.
