Share
Evoluția tehnologiilor pe Internet nu mai încearcă să uimească. Aparent zilnic, noile concepte și tehnici sunt gândite de oameni creativi și talentați. Cu browserele moderne fiind adoptate la o rată mai mare, sisteme cum ar fi CSS3 devin din ce în ce mai viabile pentru utilizarea pe proiecte de toate dimensiunile. În mod clar, acest lucru poate fi văzut prin examinarea noilor servicii care se dezvoltă online, cum ar fi TypeKit. Conceptual, dacă deconstruim un font pe baza elementelor de bază ale acestuia, putem folosi această tehnologie pentru alte lucruri decât tipul, icoanele.
Pentru o perioadă scurtă de timp, dezvoltatorii au început să producă site-uri cu puțină atenție pentru consumul de lățime de bandă. HTML și CSS unde restrictiv și Adobe Flash a fost o pânză deschisă pentru designeri și dezvoltatori pentru a umple animații și layouts complexe în. Acest lucru a dus la unele site-uri extrem de greu de bandă greu-ne amintim cu toții câteva. Acestea au fost zilele dinaintea proliferării telefoanelor mobile inteligente.
Cu telefoanele inteligente care accesează internetul mai frecvent, viteza de încărcare a lățimii de bandă și a paginii a revenit brusc în prim plan. Din fericire, avansează în HTML, CSS, și JavaScript au făcut ca toate acestea să fie posibile. Centralizarea vitezei și a capacității de reacție a paginilor web este numărul acestora HTTP solicită o încărcare de pagină trebuie să facă. Browserele moderne limitează numărul de cereri către un singur server. Se citește specificația W3C HTTP 1.1
"Un client cu un singur utilizator nu ar trebui să mențină mai mult de 2 conexiuni cu orice server sau proxy. Un proxy ar trebui să utilizeze conexiuni de până la 2 * N la un alt server sau proxy, unde N reprezintă numărul de utilizatori simultan activi. Aceste orientări sunt menite să se îmbunătățească HTTP timpii de răspuns și pentru a evita congestionarea. "
O tehnică care a devenit din ce în ce mai populară este folosirea CSS sprite. CSS sprites sunt concepute pentru a reduce numărul de HTTP solicită serverului web combinând multe imagini mai mici într-o singură imagine mai mare și definind un nivel de blocare CSS element pentru a arăta doar o porțiune definită a imaginii mai mari. Tehnica este simplă, dar ingenioasă.
Fonturile la nivelul molecular cel mai de bază sunt o serie de glife vectoriale ambalate într-o singură "arhivă de tip glif".
CSS3 a introdus în lumea dezvoltării web abilitatea de a încorpora fonturile cu @ Cu fața în față declaraţie. Fără îndoială, această avansare în tehnologiile Internet este una dintre cele mai interesante și importante etape ale istoriei noastre scurte. Cu dezvoltatorii capabili să încorporeze fonturile la alegerea lor, designerii pot produce machete care vor fi mult mai consecvente de la platformă la platformă, aducând arta de aspect interactiv mai aproape de vărul de imprimare.
Dacă ne uităm mai atent la tehnologia din spatele unui font, putem obține o înțelegere mult mai bună a modului în care pot fi utilizate și implementate. Fonturile la nivelul molecular cel mai de bază sunt o serie de glife vectoriale ambalate într-o singură "arhivă de tip glif". Putem apoi să facem referire la fiecare glif de codul său de caractere corespunzător. Teoretic, este foarte asemănător modului în care trimitem o matrice în aproape orice limbaj de programare - printr-o pereche cheie / valoare.
Având în vedere acest lucru, glifele pe care le menționăm pot fi într-adevăr orice imagine bazată pe un singur vector bazat pe vectori. Nu este nimic nou - am văzut pe toți Dingbats și Webdings. Acestea sunt două exemple de fonturi non-tip, adică o serie de imagini bazate pe vector, compilate într-o singură arhivă de fonturi.
Odată cu apariția încorporării fontului și realizarea faptului că fonturile sunt, în esență, o serie de simboluri vectoriale simple, am început să experimentez cum să folosesc acest format în avantajul meu. În mod conceptual, dacă aș fi plasat toate pictogramele necesare pentru un anumit site într-un font personalizat, atunci aș putea să folosesc aceste pictograme oriunde pe site cu abilitatea de a schimba dimensiunea și culoarea, de a adăuga fundaluri, de umbre și de rotație și de orice altfel CSS va permite textul. Avantajul suplimentar fiind un singur CSS sprite-like HTTP cerere.
Pentru a ilustra, am compilat un font nou cu câteva din marile icoane de la Brightmix.
Am folosit spațiile pentru caractere minuscule pentru pictogramele simple și sloturile majuscule pentru aceeași pictogramă într-un tratament circular.
Pentru a-mi folosi noul Icon Pack, mai întâi trebuie să-mi exporte setul de fonturi ca un număr de fișiere de fonturi diferite (.eot, .woff, .ttf, .svg) pentru a fi compatibile cu toate browserele. Subiectul de încorporare a fonturilor și de conversie a formatelor de fișiere este acoperit în altă parte, așadar voi evita o explicație detaliată aici. Însă CSS ar arăta așa.
Accentsconagua
@ font-face font-family: "IconPack"; src: url ("iconpack.eot"); src: format local ('IconPack'), format url ('iconpack.woff') format ('woff'), format url ('iconpack.ttf'), format url ('iconpack.svg # IconPack' ( 'svg'); După ce am încorporat, am acum un set complet de pictograme în format vectorial pentru referință. Pentru a face referire la o pictogramă, am nevoie pur și simplu de un stil care să includă familie de fonturi de "IconPack".
A
Exemplul de mai sus ar face o stea și este cea mai de bază utilizare a conceptului de Icon Pack, dar nu este foarte intutiv din perspectiva dezvoltării, nu SEO prietenos, și nici nu se degradează cu grație în cazul non-CSS a sustine.
Pentru a remedia situația, voi include o :inainte de pseudo-element și înfășurați conținutul într-un deschidere etichetă.
stea
Acum, steaua este adăugată la afișaj și pot schimba vizibilitatea textului folosind spectacol și ascunde clase. Rezultatul este ușor de referință CSS clasa care se degradează grațios și este optimizată pentru motoarele de căutare. Pentru întregul set de icoane, pot scrie ceva de genul de mai jos.
ecran pictograma
Beneficiul este că pictograma va fi scalată cu dimensiunea fontului. De fapt, toate icoanele vor scala și vor păstra claritatea perfectă.
Până acum, am atins numai vârful aisbergului, nimic inedit aici, deși ați putea începe să vedeți posibilitățile. Un sceneriu real al lumii ar fi înlocuirea lui Lista-item-style. Așa cum se recomandă să folosească o imagine, acum putem folosi o pictogramă vectorică din Pachetul nostru de Icon. Beneficiul este că pictograma va fi scalată cu dimensiunea fontului. De fapt, toate icoanele vor scala și vor păstra claritatea perfectă.
Deoarece pictogramele sunt acum plasate pe pagina noastră ca și când ar fi text, putem aplica orice valid CSS stil pentru ei, fără a descărca alte active. Am putea aplica culoare, marimea fontului, text-shadow, etc și să facă uz de :planare pseudo-element pentru efecte asupra mouse-ului - toate cu un singur glif.
Ca în orice, există unele limitări nefericite. De la această scriere, nu există nici o modalitate de a afișa un singur glif cu mai multe culori. Au existat câteva trucuri CSS pentru a obține gradienți asupra textului live, oricât de complexe ar fi forme cu culori variate într-un singur glif este o limitare. Acestea fiind spuse, există modalități de aproximare a glifelor multi-colorate prin separarea părților unui grafic vectorial în glife individuale, apoi prin asamblarea și colorarea acestora pe pagină prin CSS.
O altă utilizare interesantă este una simplă CAPTCHA validare. Prin înlocuirea glifurilor pentru alfabet cu numere, utilizatorii vor vedea numere, dar codul paginii va fi scris. Unele computere simple pentru a traduce între cele două, și aveți un ușor de citit CAPTCHA.
Pentru a ilustra mai bine aceste concepte, am asamblat o pagină de probă formată din două HTTP solicită - codul paginii și un singur pachet de pictograme. De asemenea, este inclusă abilitatea de a scala dimensiunea fontului paginii pentru a demonstra în mod clar flexibilitatea încorporării glifelor vectoriale. Logo-ul companiei, navigație, imagini și imagini CAPTCHA sunt toate folosind glifele. Vă rugăm să rețineți că CAPTCHA inclus aici este doar pentru ilustrare. Pentru a folosi acest lucru pe un site de producție, aș recomanda validarea pe partea de server cu un algoritm dinamic așa cum este folosit pentru JavaScript.
Această pagină eșantion demonstrează, de asemenea, utilizarea unui glif ca fundal scalabil "repetat". Voi fi primul care a recunoscut că această implementare este hack-ish în cel mai bun caz, dar cred că demonstrează flexibilitatea și versatilitatea pachetului Icon.
În mod clar, acest lucru deschide unele posibilități. Designerii pot dezvolta Pachete de Icon de vânzare, entitățile corporative pot găzdui un singur Pachet de Icon care să fie utilizat pe toate suporturile corporative. Designerii șabloanelor pot distribui cu ușurință mai multe opțiuni de culoare ale aceluiași șablon, fără a fi nevoie să salveze și să exporte un singur fișier suplimentar. Designerii de web pot scala cu ușurință site-urile existente pentru a fi compatibile cu dispozitivele de mână. În plus, această tehnică expune icoanele noastre DOM permițând efecte animate Flash cum ar fi JavaScript-ul dvs. preferat API-ul.
În ceea ce privește utilizarea și asistența pentru browser CSS3 pătrunde în continuare, Pachetele de produse Icon vor avea în curând un impact major asupra livrării conținutului, promovând tendințele ușoare, scalabile, pe mai multe dispozitive, care încep să devină o necesitate.
