Dropsolid, Silver Sponsor DrupalCon Barcelona 2015

Dominique De Cooman
Drupalcon

De stad van Gaudi mocht dit jaar op een massale toestroom rekenen van Drupal gebruikers over de hele wereld. Tijdens DrupalCon komen bezoekers de laatste nieuwe ontwikkelingen van Drupal te weten en kunnen ze ideeën uitwisselen. Dit jaar was Dropsolid op een opmerkelijke manier aanwezig, en dit niet alleen omdat zij Silver Sponsor waren ...

DAAR WAAR DRUPAL FANATEN SAMENKOMEN

DrupalCon vormt het kloppende hart van de Drupal gemeenschap. Dropsolid moest en zou hier dus aanwezig zijn. Tijdens DrupalCon worden belangrijke business contacten gelegd en kan men Drupal projecten optimaliseren. Tijdens het event kon de aanwezige ook een bezoekje brengen aan de Dropsolid stand en waar ze uitleg kregen over de verschillende activiteiten. Daarnaast kon de bezoeker kon zich op de Dropsolid-stand uitleven met een spelletje MarioKart waarbij de winnaar naar huis mocht gaan met een AppleWatch. De deelnemers kunnen de uitslag raadplegen op een website dat Dropsolid hier speciaal voor heeft ontworpen.

DROPSOLID WAS AANWEZIG 

Dropsolid stuurde ook vier eigen Drupal developers op pad om er verschillende sessies mee te volgen. Zij vertellen jou met plezier wat hun ervaringen waren, welke sessie’s hun zijn bijgebleven en waarom DrupalCon een onvergetelijke beleving is.

DEVELOPER JELLE

Dit jaar mocht ik gaan in naam van Dropsolid, om nieuwe kennis en nieuwe methodes te ontdekken. Interessante sessies over angular.js, front-end automatisatie en performantie, mijn interesse viel echter op SVG's. Zelf ben ik al enkele jaren geintreseerd in vectorische afbeeldingen, en ze overbrengen naar het web is nog zoveel leuker.

#SVG

## wat is SVG?

SVG's of Scalable Vector Graphics is een standaard/aanbeveling van het W3C die het mogelijk maakt om via markup (in dit geval XML) grafische elementen te creëren. Het kan zowel statische als dynamische elementen omvatten. Het bestaat als sinds eind de jaren ‘90 maar pas de laatste jaren heeft het wat populariteit gekregen.

## waarom SVG?

Bij hedendaagse browsers zijn SVG's ondersteund. Verder lost het ook een serieus hedendaags scherm probleem op: de zoektocht naar haarscherpe afbeeldingen, die zowel op desktop als op onze smartphones met gigantische schermresoluties mooi ogen. Doordat SVG's wiskundig opgebouwd zijn kan je ze oneindig groot schalen zonder qualiteits verlies te hebben, Of je ze nu groot maakt als 100 pixels of als 10.000 pixels.

Doordat ze vectorisch zijn en dus uit code bestaan is het ook gemakkelijk om kleuren aan te passen van bepaalde elementen. Zo kan je klassen toekennen aan paden, waardoor je ze bijvoorbeeld bij het over hoveren, het kan laten veranderen van kleur. Dit brengt het voordeel met zich mee dat het gemakkelijker is voor de front-ender om dit te programmeren maar ook naar de mobiele gebruiker brengt dit voordelen mee: er moet minder bandbreedte besteed worden aan het binnenhalen van schillende afbeeldingen in de vorm van jpeg of png.

Verder is het ook vrij eenvoudig om animaties te maken op je paths. Zo kan je in de path zelf code schrijven zodat het animeert op zichzelf, of je kan ze aanpassen met Javascript. Dit zorgt ervoor dat onscherpe GIF's tot het verleden horen. Doordat ze manipuleerbaar zijn met javascript en geen qualiteidsverlies hebben zijn de mogelijkheden eigenlijk eindeloos.

Mocht je vele SVG's moeten gebruikeren (als je ze bvb wilt gebruiken als iconen doorgeen je website), kun je deze eenvoudig ombouwen naar een font. Op deze manier kun je ze zoveel hergebruiken en aanpassen als je wilt. Op  het internet vind je ook genoeg fonts die enkel uit svg's bestaan. Font-awesolme is daar een mooi voorbeeld in. Een online tool is fontello.com of mocht je met Gulp of Grunt gebruiken, bestaan er daar ook verscheindene plugins voor.

## hoe SVG's maken?

De basis manier om SVG's te maken is gewoon een nieuw bestandje te maken in kladblok en op te slaan als svg. Ookal is dit eenvoudig, het is toch aangeraden om een tool te gebruiken zoals Adobe Illustrator of Inkscape of sketch. Hiermee kun je ze veel efficienter tekenen en kun je eenvoudig gradients en dergelijke toevoegen. Let wel: mocht je svg's willen converteren naar iconen, dan kunnen ze wel maar 1 kleur bevatten. Verder kunnen ze ook geen gradients bevatten. Daarom maak je best afbeeldingen met uitgesneden stukken, waardoor de achtergrond van de website door kan komen.

Mocht je vinden dat je svg te groot is qua bestandsgrote, zijn er handige tools op het web om je svg's wat op te kuisen. Dit kan ook handig zijn bij het maken van kleinere SVG's. een voorbeeld is jakearchibald.github.io/svgomg

In principe kun je dit ook deels met illustrator (via opkuisen van je paden), maar deze tool doet meer dan dat. zij kijkt hij ook naar whitespaces en onnodige attributen binnenin je svg, om daar ook plaats te besparen.

Een andere handig took is snap.svg, wat een jquery library is om svg's te animeren. Er is een korte introductie op de website waar je mee kan kennis maken met de library, verder is er nog genoeg documentatie om je verder te helpen.

Populaire blogposts
Drupal Mythes
Wat betekent Drupal 8 voor uw business?
Schrijven voor het web met de juiste keywords, gebruik Google Keyword Planner
Fairtrade Belgium bouwt eigen subsites
Is branding enkel het logo van mijn bedrijf?

Reacties

Reactie toevoegen