Share
De evolutie van internettechnologieën blijft verbazen. Schijnbaar dagelijks worden nieuwe concepten en technieken bedacht door creatieve en getalenteerde mensen. Met moderne browsers die in een groter tempo worden gebruikt, systemen zoals CSS3 worden steeds meer levensvatbaar voor gebruik op projecten van elke omvang. Het is duidelijk dat dit te zien is door te kijken naar nieuwe diensten die online ontkiemen zoals TypeKit. Als we een lettertype deconstrueren tot aan de basiselementen, kunnen we deze technologie gebruiken voor andere dingen dan het type, pictogrammen.
Voor een korte periode van tijd begonnen ontwikkelaars websites te maken met weinig aandacht voor het bandbreedtegebruik. HTML en CSS waar beperkend en Adobe Flash was een open canvas voor ontwerpers en ontwikkelaars om animaties en complexe lay-outs in te vullen. Dit resulteerde in een aantal sites met extreem zware bandbreedte - we herinneren ons er allemaal een paar. Dat waren de dagen voor de verspreiding van mobiele smartphones.
Met smartphones die vaker op internet komen, zijn de snelheden voor bandbreedte en pagina laden plotseling weer op de voorgrond geplaatst. Gelukkig komt er vooruitgang HTML, CSS, en JavaScript hebben dat allemaal mogelijk gemaakt. Centraal in de snelheid van webpagina's en het reactievermogen staat het aantal HTTP verzoekt om het laden van een pagina. Moderne browsers beperken het aantal verzoeken tot een enkele server. De W3C HTTP 1.1-specificatie leest
"Een client voor één gebruiker MOET NIET meer dan 2 verbindingen onderhouden met een server of proxy. Een proxy MOET maximaal 2 * N verbindingen gebruiken met een andere server of proxy, waarbij N het aantal gelijktijdig actieve gebruikers is. Deze richtlijnen zijn bedoeld om te verbeteren HTTP reactietijden en voorkom congestie. "
Een techniek die steeds populairder is geworden, is het gebruik van CSS sprites. CSS sprites zijn ontworpen om het aantal te verminderen HTTP verzoeken aan de webserver door veel kleinere afbeeldingen te combineren in één grotere afbeelding en een blokniveau te definiëren CSS element om alleen een gedefinieerd gedeelte van de grotere afbeelding te tonen. De techniek is eenvoudig, maar geniaal.
Lettertypen op hun meest elementaire moleculaire niveau zijn een reeks vectorglyphs die zijn verpakt in een enkel "glyph-archief".
CSS3 heeft de mogelijkheid geïntroduceerd om lettertypen in te bedden in de webontwikkelingswereld @Gezicht gezicht verklaring. Zonder twijfel is deze vooruitgang in internettechnologieën een van de meest opwindende en belangrijke stadia in onze korte geschiedenis. Met ontwikkelaars die lettertypen van hun keuze kunnen insluiten, kunnen ontwerpers lay-outs maken die veel consistenter worden weergegeven van platform naar platform, waardoor de kunst van interactieve lay-outs dichter bij de drukte komt.
Als we de technologie achter een lettertype nader bekijken, kunnen we een veel beter begrip krijgen van hoe ze kunnen worden gebruikt en ingezet. Lettertypen op hun meest elementaire moleculaire niveau zijn een reeks vectorglyphs die zijn verpakt in een enkel "glyph-archief". We kunnen dan naar elke glyph verwijzen door de bijbehorende tekencode. Theoretisch lijkt het erg op de manier waarop we in bijna elke programmeertaal naar een array verwijzen - via een sleutel / waarde-paar.
Met dit in gedachten kunnen de glyphs waarnaar we verwijzen echt elke op vectoren gebaseerde afbeelding in één kleur zijn. Dit is niets nieuws - we hebben Dingbats en Webdings allemaal gezien. Het zijn twee voorbeelden van niet-type lettertypen, dat wil zeggen een reeks vectorgebaseerde afbeeldingen die zijn gecompileerd tot een enkel lettertypearchief.
Met de komst van het invoegen van lettertypen en het besef dat lettertypen in wezen een reeks eenvoudige vectorglyphs zijn, begon ik te experimenteren met het gebruik van dit formaat in mijn voordeel. Als ik alle vereiste pictogrammen voor een bepaalde site in een aangepast lettertype zou plaatsen, zou ik conceptueel kunnen gebruiken om die pictogrammen overal op de site te gebruiken met de mogelijkheid om de grootte en kleur te wijzigen, achtergronden, schaduwen en rotatie toe te voegen en zo ongeveer alles anders CSS zal tekst toestaan. Het extra voordeel is een single CSS sprite-achtige HTTP verzoek.
Ter illustratie, ik heb een nieuw lettertype samengesteld met een paar van de geweldige iconen van Brightmix.
Ik heb de kleine letters voor gewone pictogrammen en de slots in hoofdletters voor hetzelfde pictogram gebruikt in een circulaire behandeling.
Om mijn nieuwe Icon Pack te gebruiken, moet ik eerst mijn lettertypeset exporteren als een aantal verschillende lettertypebestanden (.eot, .woff, .ttf, .svg) om compatibel te zijn met alle browsers. Het onderwerp van het embedden van lettertypen en het converteren van bestanden is elders behandeld, dus ik zal hier een gedetailleerde uitleg vermijden. echter, de CSS zou er ongeveer zo uitzien.
Accentsconagua
@ font-face font-family: 'IconPack'; src: url ('iconpack.eot'); src: lokaal ('IconPack'), url ('iconpack.woff') formaat ('woff'), url ('iconpack.ttf') formaat ('truetype'), url ('iconpack.svg # IconPack') formaat (sVG); Eenmaal ingebed heb ik nu een compleet pictogram in vectorformaat om te verwijzen. Om naar een pictogram te verwijzen, heb ik eenvoudigweg een stijl nodig die het font-family van "IconPack".
een
Het bovenstaande voorbeeld zou een ster weergeven en is het meest elementaire gebruik van het Icon Pack-concept, maar het is niet erg intuïtief vanuit een ontwikkelingsperspectief, niet SEO vriendelijk, en ook niet fatsoenlijk in het geval van niet-CSS ondersteuning.
Om de situatie te verhelpen, ga ik een :voor pseudo-element en verpak de inhoud in a span label.
ster
Nu wordt de ster aan het scherm toegevoegd en kan ik de zichtbaarheid van de tekst wijzigen met behulp van de laten zien en verbergen klassen. Het resultaat is een gemakkelijk te raadplegen CSS klasse die gracieus verslaat en is geoptimaliseerd voor zoekmachines. Voor mijn hele set iconen kan ik iets als hieronder schrijven.
schermpictogram
Het voordeel hiervan is dat het pictogram wordt geschaald met de lettergrootte. In feite zullen alle pictogrammen schalen en perfecte helderheid behouden.
Tot nu toe hebben we alleen het topje van de ijsberg aangeraakt, hier niets grensverleggend, hoewel je misschien de mogelijkheden begint te zien. Een echte scenerio zou de vervanging zijn van de list-punt-stijl. Als reactie op het gebruik van een afbeelding kunnen we nu een vectorpictogram uit ons Icon Pack gebruiken. Het voordeel hiervan is dat het pictogram wordt geschaald met de lettergrootte. In feite zullen alle pictogrammen schalen en perfecte helderheid behouden.
Omdat de pictogrammen nu op onze pagina worden geplaatst alsof het tekst betreft, kunnen we een geldig document toepassen CSS stijl voor hen zonder enige andere activa te downloaden. We zouden kunnen toepassen kleur, lettertypegrootte, schaduw tekst, enz. en maak gebruik van de : hover pseudo-element voor muiseffecten - allemaal met een enkele glyph.
Zoals met alles, zijn er enkele ongelukkige beperkingen. Vanaf dit moment is er geen manier om een enkele glyph met meerdere kleuren weer te geven. Er is wat CSS-truc geweest om gradiënten over live tekst te krijgen, maar complexe vormen met variërende kleuren in één glyph vormen een beperking. Dat gezegd hebbende, zijn er manieren om meerkleurige glyphs te benaderen door de delen van een vectorafbeelding in afzonderlijke glyphs te splitsen en ze dan op de pagina samen te voegen en in te kleuren via CSS.
Een ander interessant gebruik is eenvoudig CAPTCHA validatie. Door de glyphs voor het alfabet te vervangen door cijfers, zien gebruikers cijfers, maar de paginacode is een letter. Enkele eenvoudige berekeningen om te vertalen tussen de twee, en je hebt een gemakkelijk te lezen CAPTCHA.
Om deze concepten beter te illustreren, heb ik een voorbeeldpagina samengesteld uit twee HTTP aanvragen: de paginacode en één pictogrampakket. Ook inbegrepen is de mogelijkheid om de lettergrootte van de pagina te schalen om de flexibiliteit van het insluiten van vectorglyphs duidelijk te demonstreren. Het bedrijfslogo, navigatie, afbeeldingen en CAPTCHA gebruiken allemaal glyphs. Let op, de CAPTCHA hier opgenomen is alleen ter illustratie. Om dit op een productiesite te gebruiken, raad ik aan om aan de server te valideren met een dynamisch algoritme dat is gebaseerd op JavaScript.
Deze voorbeeldpagina demostreert ook het gebruik van een glyph als een schaalbare "herhalende" achtergrond. Ik zal de eerste zijn om toe te geven dat deze implementatie op zijn best hack-achtig is, maar ik denk dat dit de flexibiliteit en veelzijdigheid van het Icon Pack aantoont..
Het is duidelijk dat dit enkele mogelijkheden opent. Ontwerpers kunnen Icon Packs te koop aanbieden, bedrijfsentiteiten kunnen een enkel Icon Pack hosten dat op alle bedrijfsmedia kan worden gebruikt. Sjabloonontwerpers kunnen eenvoudig meerdere kleuropties van dezelfde sjabloon distribueren zonder een extra bestand te hoeven opslaan en exporteren. Webontwerpers kunnen bestaande sites eenvoudig schalen om compatibel te zijn met draagbare apparaten. Bovendien legt deze techniek onze pictogrammen bloot aan de DOM het inschakelen van geanimeerde Flash-achtige effecten met uw favoriete JavaScript API.
Zoals gebruik en browserondersteuning voor CSS3 dringt verder door, Icon Packs zullen binnenkort een grote impact hebben op de levering van inhoud, waardoor de lichtgewicht, schaalbare trends op meerdere apparaten die een noodzaak worden steeds belangrijker worden.
