51. De Brocade gebruikersinterface

51.1. De iconen verzameling

51.1.1. Inleiding

Op diverse plaatsen worden in brocade kleine afbeeldingen gehanteerd. Deze afbeeldingen hebben voordelen ten opzichte van tekst:

ze zijn klein (althans: het zichtbare gedeelte in de interface is klein)
ze zijn herkenbaar
ze fraaien de bladspiegel op

51.1.2. Technologieën

Iconen kunnen op verschillende wijzen worden gegenereerd. Hier volgt een overzicht van de gangbare technologieën met hun voordelen en nadelen.

Note

Een belangrijk element bij de keuze van technologie is het bestaan van retina displays (iPhone, iPad). Het gebruik van statische, niet-schaalbare technologieën betekent essentieel het verdubbelen van het aantal bestanden. Hoe lang zal het duren vooraleer er andere display technologieën op de markt komen zodanig dat we het aantal afbeelding nog eens gaan moeten verdubbelen?

51.1.2.1. Een file, een icon

Voor elke icon bestaat er een bestand. Dit is de techniek die wordt gebruikt voor Brocade 4.00 en kleiner.

Deze techniek heeft als voordelen:

vertrouwde manier van werken
gemakkelijk onderhoudbaar
het is gemakkelijk om een icon te vervangen
enkel de icons die worden getoond, worden ook opgevraagd
de <IMG> tag laat toe om alternatieven aan te duiden.

Er zijn nogal wat nadelen:

de icons worden als verschillende files getransfereerd wat een onrustig beeld veroorzaakt en zeker ook niet performant is.
icons zijn slecht schaalbaar
CSS kan slecht een beperkt aantal operaties uitvoeren op een icon

51.1.2.2. Data URI

Het performantie nadeel kan worden weggewerkt door het icon voor te stellen als een data URI.

Data URI's worden echter niet door alle browsers ondersteund.

De techniek is echter wel uitbreidbaar naar andere content.

51.1.2.3. CSS Sprites

Het principe is dat alle iconen worden verzameld in één enkele PNG (en dus 1 file transfer). De individuele icons worden dan met behulp van CSS geselecteerd uit deze afbeelding.

Deze techniek is performant in file transfer en alle afbeeldingen zijn binnen handbereik. Deze techniek laat ook toe om zeer complexe iconen te bouwen.

Het blijft echter een rastertechniek: iconen kunnen niet bijvoorbeeld niet worden geschaald.

51.1.2.4. SVG

Scalable Vector Graphics lijken wel de ultieme oplossing:

ze zijn inbedbaar in een HTML pagina (dus geen extra transfer)
ze worden beschreven in XML: aanmaak kan dus met een programmer's editor
ze zijn programmeerbaar met behulp van Javascript (client-side!)
het is een vector formaat
ze zijn polychromatisch (verschillende kleuren in 1 afbeelding)

Er zijn ook nadelen:

hoe kleiner de afbeelding (icons!) hoe groter de (relatieve) XML overhead
CSS kan niet goed werken met SVG

51.1.2.5. Web Icon fonts

Dit zijn reguliere fonts waarvan de glyphs staan voor een icon.

Icon fonts hebben vele voordelen:

de ganse collectie is klein
fonts zijn schaalbaar
CSS werkt uitstekend samen met fonts (grootte, vet, ilac, cursief, schaduw, kleur)
Met Font Awesome bestaat er een uitstekende collectie met meer dan 500 icons en een bijhorende CSS file die allerlei abstracties voor de rekening neemt. Font Awesome is gratis bruikbaar voor commerciële producten.

Er zijn ook nadelen:

een extra icon bijmaken is niet zo eenvoudig (maar mogelijk)
ze zijn monochromatisch

WOFF, Web Open Font Format is beschikbaar op alle belangrijke browsers. Internet Explorer wordt onderteund vanaf versie 9.

Font Awesome ondersteunt ook andere file formaten (eot, ttf) waardoor ook IE8 (en zelfs IE7) mee wordt ondersteund.