De tools voor een web design

bootstrap logo

In de afgelopen jaren is het maken van een web design sterk veranderd. Hier leg ik uit wat ik gebruik, waarvoor en waarom. Ik gebruik Bootstrap, jQuery, LESS, Node.js, NPM, Grunt, Simple Localhost, NetBeans en NotePad++

Een web design kan je niet zomaar maken. Het is niet zo simpel als een paar lijntjes HTML code en dan staat er een design. Ik ben begonnen toen statische pagina’s de norm waren. Hiervoor gebruikte ik Dreamweaver en codeerde ik de HTML handmatig. Al snel was dat niet genoeg en ben ik javascript erbij gaan schrijven. In die tijd kopieerde en plakte ik veel stukjes HTML en javascript van het ene project in het andere. Dat plakken en kopiëren was vrij inefficient en ik moest onthouden bij welk project ik welk snippet (kleine stukjes code) had gebruikt en wat dat deed. Daarom begon ik die stukjes code te groeperen in verschillende bestanden en mappen. Tegenwoordig zijn de eisen aan een web design veel hoger en gebruik ik een libary die al die stukjes code netjes in zich heeft op een ordelijke manier. Ook gebruik ik Dreamweaver niet meer. Daarvoor gebruik ik andere tools en programma’s om een mooi design te maken. Hier ga ik uitleggen wat ik gebruik en waarvoor ik het gebruik.

Bootstrap: De basis waarmee ik werk

is een open source collectie voor het maken van een web design. Het is de basis van een web design. Bootstrap bestaat uit css en jQuery. Het is een verzameling van formulieren, knoppen, navigatie als ook andere interface componenten. Bootstrap is voorgekomen uit Twitter Blueprint. Twitter gebruikte Blueprint om de verschillende onderdelen op Twitter te standaardiseren waardoor de kosten voor onderhoud omlaag gaan en de gebruiker een meer consistente beleving krijgt. Op 19 augustus 2011 heeft Twitter de code open source gemaakt waardoor iedereen de code kan gebruiken. De meest belangrijke update was op 19 augustus 2013 met de update naar Bootstrap 3. In Bootstrap 3 werd het begrip “mobile first” gebruikt. Dit betekend dat er eerst voor de mobiele apparaten wordt ontworpen en later voor de desktop. Bootstrap bestaat uit CSS en jQuery.

  • CSS: Eén framework voor alle apparaten
    Het grootste voordeel van het gebruik van Bootstrap is dat Bootstrap HTML5 utiliseert en het is volledig responsive is. In het kort betekend dit dat Bootstrap voor alle apparaten, of het nu desktop, mobiel of tablet is, mooi naar voren komt. De responsiveness komt doordat Bootstrap media queries gebruikt. Media queries is een stukje css en verteld welke stijl er gebruikt wordt voor welk beeldscherm afmeting.

  • jQuery
    jQuery is de bekenste en meest gebruikte javascript libary. In het kort zorgt jQuery voor de animaties, zoals dropdowns, slideshows en meer.

De tools voor het maken van een web design

Bootstrap kan gedownload worden in drie verschillende versies: de vanilla CSS, LESS en Sass. Zelf gebruik ik . LESS is een dynamische style sheet dat naar CSS kan worden omgezet. LESS lijkt op CSS en heeft dezelfde semantiek. Dat wil zeggen, valide CSS code is ook valide in LESS. LESS draait op javascript en vergroot de functionaliteit van CSS met variabelen, functies en meer waardoor de CSS beter te beheren en te onderhouden is. Omdat LESS javascript gebruikt kan LESS in Node.js draaien. is een manier om javascript (wat normaal in een browser functioneert) op de server te laten uitvoeren. Het wordt met name gebruikt voor server-side web applicaties. De package manager voor node.js is . Een package manager zorgt ervoor dat programma’s makkelijk worden geïnstalleerd, programma’s makkelijk kunnen worden geconfigureerd, programma’s makkelijk kunnen worden verwijderd en dat programma’s makkelijk kunnen worden up-ge-date. Daarnaast gebruik ik, op aanraden van Bootstrap, . Grunt is geschreven voor node.js en is een programma om taken die herhaald moeten worden te automatiseren. Grunt zorgt ervoor dat de LESS bestanden worden omgezet in CSS. Tot slot gebruik ik een voor node.js. Hierdoor kan ik op de lokale computer de voorbeelden makkelijk testen. Samenvattend:

  • : Gebruik ik omdat binnen LESS CSS onderdelen als een variabele kunnen worden ingesteld. Hierdoor kan ik op een plek een variabele veranderen en dat wordt uitgezet naar de hele CSS. Bijvoorbeeld de kleur van de tekst.
  • : Deze is nodig om Grunt te draaien.
  • : De package manager voor Node.js.
  • : Dit programma zorgt ervoor dat LESS wordt omgezet in CSS (ook wordt de CSS geminimaliseerd).
  • : hierdoor kan ik op de lokale computer een simpele node.js server tijdelijk draaien waardoor ik mijn bewerkingen kan bekijken.

logo tools

IDE en notepads

Een IDE (Integrated Development Environment) is een programma die veel codering automatiseert. Bijvoorbeeld de code wordt automatische ingevuld. Over het algemeen probeert een IDE het proces van coderen makkelijker te maken. Een IDE is een programma om de broncode te bewerken, bouwt automatisch de code, een debugger en heeft vaak een intelligente manier om code te voltooien. Een notepad programma kleurt alleen de code zodat je makkelijker kan zien wat iets is, bijvoorbeeld een functie.

Het grote verschil tussen beide is dat hoewel een IDE het codeer proces kan versneller een kladblok programma je oplettender houdt en daardoor kan het werk minder saai zijn en kan het zijn dat de kwaliteit van de code beter is. Zelf werk ik zowel met een IDE als een notepad.

  • NetBeans: Als IDE gebruik ik NetBeans.  is een opensource programma en kan gratis worden gedownload en gebruikt. Het ondersteund LESS out-of-the-box en het heeft een mooie integratie met Node.js. Hierdoor is het vrij makkelijk om HTML5 en LESS te bewerken.
  • NotePad++: is een vrij uitgebreide kladblok, het is opensource en kan gratis worden gedownload en gebruikt. Ook NotePad++ ondersteund LESS out-of-the-box. Alleen wordt Linux niet ondersteund, daarom gebruik ik ook Gedit. Soms, en dan gaat het meestal om config files, gebruikt ik ook nog Vi. Vi is een editor voor de terminal (command prompt in Windows).

NetBeans en NotePad++ logo

Geef een reactie

Uw e-mail adres wordt niet gepubliceerd.

*
*

De volgende HTML tags en attributen kunnen worden gebruikt: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>