43. De Brocade gebruikersinterface

43.1. De iconen verzameling

43.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

43.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.

Notitie

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?

43.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

43.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.

43.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.

43.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

43.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.