Categorie archief: blog

3d tekenen in SketchUp: De basisprincipes

3d tekenen met SketchUp is makkelijk. Door de volgende stappen te volgen kun je al snel je eigen 3d tekening maken. Download en installeer eerst SketchUp vanaf http://www.sketchup.com/. Er zijn twee versies waaruit je kunt kiezen: Sketchup Make is gratis om te gebruiken terwijl voor Sketchup Pro betaald moet worden.

Navigeren

Als je SketchUp vervolgens opent zie je een 3d tekening verschijnen zoals in de onderstaande afbeelding. Er zijn 3 assen in de 3d tekening, voor elke dimensie één. De plek waar de assen elkaar kruisen is het middelpunt van de 3d tekening. Je kunt door deze tekening bewegen met je muis.

Klik en sleep met het muiswieltje om rond een punt in de tekening te draaien. Shift + klik en sleep met het muiswieltje om naar links, rechts, naar onderen of naar boven te bewegen. Door te scrollen met het muiswieltje kun je in of uitzoomen op een bepaald punt in de tekening.

01

Tekenen

Tekenen kan met de verschillende gereedschappen waarover SketchUp beschikt. Één zo’n gereedschap is de shaper-tool:

shapes

Klik op een punt in de tekening en beweeg je muis vervolgens in een richting. Klik vervolgens opnieuw om je vorm definitief te maken. Pro tip: Je kunt terwijl je je muis beweegt ook de afmetingen van je vorm intypen en vervolgens op enter drukken. Zo heb je meer controle over de grootte van je vormen.

02

Een tweede gereedschap waarmee je kunt tekenen in Sketchup is de line-tool:

potlood

Klik op een punt in de tekening en beweeg je muis vervolgens in een richting. Klik vervolgens opnieuw om je lijn definitief te maken. Pro tip: Als je je muis over een bestaande lijn of vorm beweegt worden de begin- of middelpunten gemarkeerd. Klik erop om een lijn vanaf of naar deze punten te trekken.

03

Behalve vierkanten kun je ook cirkels tekenen met de shaper-tool:

shapes

Klik op het pijltje in het menu en selecteer de cirkelKlik op een punt in de tekening en beweeg je muis vervolgens in een richting. Het punt waar je hebt geklikt is altijd het middelpunt van de cirkel. Klik vervolgens opnieuw om je cirkel definitief te maken. Pro tip: rechtsonder in beeld zie je de straal van de cirkel.

04

Als je in plaats van een cirkel liever een halve of een kwart van een cirkel tekent gebruik je de arc-tool:

arcs

Klik op een punt in de tekening om het beginpunt van de boog aan te geven en beweeg je muis vervolgens in een richting. Klik vervolgens opnieuw om het eindpunt van de boog aan te geven. Beweeg je muis nog een keer om de hoek van de boog te bepalen. Klik tenslotte nog één keer om de boog definitief te maken.

05

Als je tekening overbodige lijnen bevat kun je die weghalen met de eraser-tool:

gum

Klik op een lijn om die te wissen. Pro tip: Klik en sleep als je meerdere lijnen tegelijk wilt verwijderen.

06

3-dimensionaal tekenen

Tot nu toe heb je alleen nog platte vormen getekend. Je kunt aan deze platte vormen een dimensie toevoegen met de push/pull-tool:

push-pull

Klik op een vlak in je tekening. Beweeg je muis vervolgens omhoog of omlaag om het vlak volume te geven. Klik opnieuw om het volume definitief te maken.

07

3-dimensionaal tekenen kan ook met de line-tool:

potlood

Klik op een punt in je tekening en beweeg je muis in een richting. Klik vervolgens opnieuw om de lijn definitief te maken. Beweeg je muis vervolgens in een andere richting en klik opnieuw om een opvolgende lijn te tekenen.  Sluit de lijnen en SketchUp zal automatisch een vorm maken. Pro tip: Als je lijnen diagonaal aan de assen van je tekening trekt verschijnen er hulplijnen waarmee je rechte lijnen kunt maken.

08

Een bijzonder gereedschap is de follow-me-tool. Dit gereedschap werkt ongeveer hetzelfde als de de push/pull-tool maar geeft je de mogelijkheid om kromme lijnen of hoeken te volgen.

Klik op een vlak dat haaks staat op een lijn. Beweeg je muis en volg de lijn. Klik opnieuw om de vorm definitief te maken.

09

Als je om de vorm heen draait zul je zien dat je een deurlijst hebt gemaakt! Pro tip: Als je tekening af is kun je deze exporteren als een afbeelding via het menu File > Export > 2d Graphic.

10

Extra

Uitdaging: Maak een bol zoals in de onderstaande tekening met behulp van de gereedschappen die je nu kent.

11

Virtual reality in het onderwijs

“Het klaslokaal is nog niet klaar voor virtual reality”

In 2014 kocht Facebook de Oculus Rift, “de leider in Virtual Reality (VR) techniek” (Zuckerberg, 2014). Oculus Rift maakt Head Mounted Displays (HMD), een bril met ingebouwde schermen die de gebruiker op zijn hoofd kan zetten. Zo lijkt het alsof de gebruiker zich in een virtuele wereld bevindt. Mark Zuckerburg, eigenaar van Facebook, noemt in zijn aankondiging ook het leren in een klaslokaal met studenten en docenten uit de hele wereld. (Zuckerberg, 2014) En na die overname vertelde Palmer Luckey, de oprichter van Oculus Rift, in een e-mail dat de overweging werd gemaakt om gratis HMD’s naar lesinstituten te sturen (Lamb, 2014). De twee bedrijven lijken dus bezig te zijn om VR naar het onderwijs te brengen. Maar er is één probleem; het onderwijs zelf is nog niet klaar voor VR.

Er zijn veel redenen om VR in te zetten voor het onderwijs. Palmer Luckey zelf kwam in een White House Google Hangout met twee argumenten. (White House, 2014). Ten eerste vertelde Luckey over educatieve schoolreisjes. Volgens hem zijn deze veel minder educatief dan ze zouden moeten zijn, doordat veel tijd verloren gaat aan reizen en het begeleiden van de kinderen. Daarnaast kosten de reisjes veel geld. Nu VR techniek goedkoper wordt, en het uitstapjes kan bieden naar plekken over de hele wereld, zouden schoolreisjes vervangen kunnen worden door virtuele reizen. De aanschafprijs en de onderhoudskosten van headmounted displays moeten dan wel afgewogen worden tegenover de meerwaarde en het aantal keer dat je die kunt gebruiken vind ik. Ten tweede noemde Luckey tijdstippen in de geschiedenis die niet in het echt te bezoeken zijn. VR werelden kunnen de geschiedenis simuleren en zo kennis bijbrengen over het verleden. In een literatuuronderzoek van het ‘institute for educational technology’ in Genova, Italië, komen verschillende onderzoeken naar toepassingen aan bod (Freina & Ott, 2014). Uit dit literatuuronderzoek blijkt dat VR, naast vrij bewegen in tijd en ruimte, zoals Palmer Luckey al noemde, ook vaak wordt gebruikt in situaties die in het echt gevaarlijk zouden zijn, of ethisch onverantwoord. Bijvoorbeeld omdat onervaren chirurgen niet in een brein mogen snijden of omdat soldaten gewond kunnen raken. Daarnaast zijn er nog meer redenen om VR te gebruiken in de klas. In een artikel op hypergridbussiness.com (Abrosimova, 2014) worden er nog vijf genoemd. Naast het feit dat in VR dingen mogelijk zijn die niet in de fysieke wereld niet uitvoerbaar zijn, wordt ook genoemd dat samenwerken in VR sociale integratie van leerlingen stimuleert. Verder worden leerlingen gemotiveerd door spelenderwijs leren in VR, heeft VR een betere aanpak van beloningen en leerlingen kunnen VR gebruiken om nieuwe dingen te creëren (Abrosimova, 2014).

VR stimuleert sociale integratie van leerlingen. Dat wordt bevestigd in een onafhankelijk onderzoek door Dr. Conor Galvin naar MissionV; een immersieve spelgebaseerde leeromgeving voor scholen (Galvin, 2012). Docenten die mee deden aan een pilot in 2011 en 2012 konden verschillende voorbeelden geven van leerlingen die voorheen slecht presteerden of moeilijk geaccepteerd werden door hun klasgenoten. Dankzij MissionV kregen die meer technologische kennis en daarom werden ze “geaccepteerd door hun leeftijdsgenoten“ (Galvin, 2012 p. 3). Volgens de docenten begrepen leerlingen over het algemeen de kennis ook beter en bleef die langer hangen. Dat studenten kennis beter begrijpen dankzij VR was al eerder te zien in een studie uit 2000 door Jackson en Fagan, beiden werkzaam aan de Universiteit van Washington (Jackson en Fagan, 2000). In deze studie mochten 56 leerlingen van 14 tot 15 jaar oud kennis maken met Global Change World; een simulatie waarin door de tijd gereisd kan worden om de effecten van het broeikaseffect duidelijk te maken. Tijdens hun leservaring toonden de studenten meer individuele inzet en werkten zij vaker samen om meningsverschillen te bediscussiëren, om overtuigingen te verwoorden en om samen theorieën te ontwikkelen. De auteurs stellen echter wel dat de leerlingen veel begeleiding van deskundigen nodig hadden tijdens de lessen. (Jackson en Fagan, 2000)

In Australië zijn docenten zelf aan de slag gegaan met het implementeren van virtuele werelden zoals Second Life in hun lessen. Deze werelden werden ingezet voor veel verschillende doeleinden, zoals te lezen in een onderzoeksrapport uit 2014 (Gregory e.a., 2014 p. 285). Uit hetzelfde rapport blijkt echter ook dat het implementeren veel moeilijker was dan veel docenten in eerste instantie hadden gedacht (Gregory e.a., 2014 p. 286). Sommige ondervraagde onderwijskundigen gaven aan dat er in hun ogen te weinig werd gedaan om virtuele werelden bruikbaar te maken voor docenten zonder technische kennis. Er moest door hen teveel aandacht besteed worden aan het doorkrijgen van de interface waardoor er minder tijd overbleef voor het geven van les. Ook werd door onderwijskundigen verteld dat veel docenten van voor af aan beginnen met het gebruik van virtuele werelden zonder voort te bouwen op het werk van anderen. Een reden hiervoor wordt genoemd in een ander onderzoek uit Australië (Newman e.a., 2013) Hierin beschrijven de zes auteurs, allemaal onderwijskundigen, vanuit hun eigen ervaringen en waarnemingen de redenen voor het uitblijven van succes voor virtuele werelden in het onderwijs. Dat projecten worden stopgezet, komt volgens hen omdat onderwijsinstellingen te weinig ondersteuning bieden (Newman e.a., 2013 p. 623). Er wordt niet nagedacht over de lange termijn, en als het budget op is of een docent vertrekt worden projecten stil gelegd en worden ze vergeten. Hierdoor moeten docenten dus steeds weer opnieuw lesprojecten opstarten. Virtuele werelden zullen ongetwijfeld veranderen door de komst van betaalbare headmounted displays zoals de Oculus Rift, maar het is aannemelijk dat de problemen hiervoor beschreven zullen blijven bestaan. Sterker nog, die problemen zullen groter worden. Want het programmeren van lesmateriaal voor immersive VR vereist meer technische kennis en de hardware brengt extra kosten met zich mee ten opzichte van virtuele werelden die met een computer benaderd worden. Dit wordt ook opgemerkt in een onderzoek naar de houding van leerlingen ten opzichte van VR leeromgevingen (Huang, 2010). De auteurs, onderzoekers van universiteiten uit Taiwan en Amerika, benadrukken dat onderwijsinstellingen ondersteuning moeten bieden aan docenten die geen kennis van programmeren hebben. (Huang, 2010 p. 1180).

Om er achter te komen wat mijn docenten van VR vinden heb ik een enquete afgenomen bij zeven docenten van de opleiding Communicatie & Multimedia Design aan de Hogeschool Rotterdam (De Wit, 2015). De docenten zagen veel verschillende mogelijkheden, zoals het stimuleren van het verbeeldingsvermogen, het creëren van nieuwe toepassingen of leren om problemen op te lossen. Maar de docenten gaven wel aan zelf weinig tot geen ervaring met VR te hebben. De enige docent die wel ervaring had met Virtual Realiy binnen het onderwijs gaf aan dat systemen plug en play moeten zijn zodat docenten niet aan de implementatie hoeven te werken. Ook gaven twee docenten aan dat er nog geen lesprogramma’s voor VR zijn. Vanuit de Hogeschool Rotterdam is er een vooruitblik voor de periode 2015-2018 (Hogeschool Rotterdam, 2015). Daarin staat dat de hogeschool docenten verder wil professionaliseren op o.a. vernieuwende onderwijsvormen en wil investeren in ict-faciliteiten om de fysieke leeromgevingen beter aan te laten sluiten op de identiteit en wensen van de opleidingen (Hogeschool Rotterdam, 2015 p. 16). Docenten zouden hierdoor misschien ondersteuning kunnen krijgen en er kan budget vrijgemaakt worden om VR hardware aan te schaffen. Dat is nodig om lesgeven met Virtual Reality een succes te maken, want uit navraag bleek dat er op de hogeschool nog niemand aanwezig is die docenten kan trainen en ondersteunen bij het gebruik van VR hardware en VR leeromgevingen (De Wit, 2014).

VR in het onderwijs kent zeker veel mogelijkheden, zoals die genoemd worden door Palmer Luckey en anderen, en VR kan studenten motiveren in hun leerproces. Maar om VR succesvol in het onderwijs te implementeren is ondersteuning nodig voor docenten die er mee gaan werken. In Australië is dat bij docenten die zelf aan de slag gingen met virtuele werelden niet het geval geweest. Ook uit mijn eigen onderzoek blijkt dat er nog geen lesprogramma’s zijn op de hogeschool Rotterdam. Om headmounted displays zoals de Oculus Rift een succes te maken, is er dus een andere aanpak nodig. Onderwijsinstituten moeten budget vrijmaken voor VR projecten en plannen maken voor de lange termijn zodat docenten op de juiste manier ondersteund kunnen worden. Pas dan is het onderwijs echt klaar voor Virtual Reality.

Bronnen

Abrosimova, Kate (7 september 2014). 5 ways virtual reality will change education [Artikel]. Geaadpleegd op 22 juni 2015 van http://www.hypergridbusiness.com/2014/09/5-ways-virtual-reality-will-change-education/

Freina, Laura & Ott, Michella (2014). A Literature Review on Immersive Virtual Reality in Education:
State Of The Art and Perspectives [Onderzoek]. Geraadpleegd op 22 juni 2015 van http://www.itd.cnr.it/download/eLSE%202015%20Freina%20Ott%20Paper.pdf

Galvin, Connor (augustus 2012). MissionV Schools Pilot Programme: A Note on Key Findings [Onderzoek]. Geraadpleegd op 22 juni 2015 van https://dl.dropboxusercontent.com/u/63418/MissionV/Key%20Findings%20from%20Conor%20Galvin%20Evaluation%20-MissionV.pdf

Gregory, Sue. e.a. (2014). Rhetoric and reality: critical perspectives on education in a
3D virtual world [Onderzoek]. Geraadpleegd op 22 juni 2015 van http://ascilite2014.otago.ac.nz/files/fullpapers/231-Gregory.pdf

Jackson, Randolph L. en Fagan, Eileen (2000). Collaboration and learning within immersive virtual reality [Onderzoek]. Geraadpleegd op 9 juni 2015 van http://dl.acm.org/citation.cfm?id=351006.351018&coll=DL&dl=ACM.

Hogeschool Rotterdam (2 juni 2015). Financiëel verslag 2014 [Jaarverslag]. Geraadpleegd op 26 juni 2015 van http://www.hogeschoolrotterdam.nl/hogeschool/publicaties/jaarverslagen

Huang, Hsiu-Mei (20 april 2010) Investigating learners’ attitudes toward virtual reality learning environments: Based on a constructivist approach [Onderzoek]. Geraadpleegd op 22 juni 2015 van http://www.sciencedirect.com.ezproxy.hro.nl/science/article/pii/S0360131510001466#

Lamb, Jason (5 juni 2014). Awesome, Palmer Luckey replied to an email I sent him regarding education initiatives for @oculus [Tweet]. Geraadpleegd op 9 juni 2015 van https://twitter.com/jasonlamb/status/474378690181488640

Newman, Christine e.a. (2013). Virtual Worlds for learning: done and dusted? [Onderzoek]. Geraadpleegd op 22 juni 2015 van http://www.ascilite.org/conferences/sydney13/program/papers/Newman.pdf

White House (8 januari 2014). We the Geeks: Future of Computing [Youtube Video]. Geraadpleegd op 9 juni 2015 van
www.youtube.com/watch?v=5Q4euLAhNRo

Wit, Daniël de (26-6-2015). Meningen van docenten CMD aan de Hogeschool Rotterdam over Virtual Reality [Enquete].

Zückerberg, Mark (25 maart 2014). [Facebookpost]. Geraadpleegd op 9 juni 2015 van https://www.facebook.com/zuck/posts/10101319050523971

SVG animaties met snap.svg

SVG is bedoeld om vector illustraties op het web te tonen. De structuur van de taal bestaat namelijk uit xml. Daarom is het ook gemakkelijk om svg objecten te beïnvloeden met javascript.

Snap.svg is een javascript library die daar heel mooi gebruik van maakt. Zo kun je gemakkelijk zelf keigave animaties en ander interactieve applicaties bouwen.

http://snapsvg.io/

Voor mijn porftolio intro wilde ik een kameleon animeren die met zijn tong een duizendpoot vangt en vervolgens op eet. Het resultaat kun je bekijken op http://daniel-dewit.nl als je een paar keer naar beneden scrollt. Het eerste wat ik nodig had was een svg-illustratie van  een kameleon. Die heb ik in het programma Inkscape gemaakt.

https://inkscape.org/en/

chameleon_compiled

Inkscape is een handig programma omdat het gebaseerd is op het svg formaat. Illustraties die je maakt in Inkscape worden dus standaard opgeslagen als svg-afbeelding. Als je een svg-afbeelding voor het web wilt maken is het wel belangrijk om bij het opslaan te kiezen voor ‘geoptimaliseerde svg’. Er wordt dan leesbare code gegenereerd en je krijgt dan een aantal extra opties zoals het instellen van een viewbox. Viewbox is belangrijk bij het maken van responsive svg-afbeeldingen.

inkscape-export

Als je de afbeelding hebt opgeslagen kun je die openen in een tekst-editor en alle code er uithalen om in je webapplicatie te gebruiken. De volgende stap is om je svg-afbeelding met snap aan een javascript variabele te binden. Dat doe je met de functie Snap(). Daarna kun je onderdelen uit je svg-afbeelding aan aparte variabelen binden met select() zodat je die kunt animeren.

var chameleon = Snap("#chameleon");
var chameleonWrap = chameleon.select("#chameleon-wrap"); 
var chameleonMaw = chameleon.select("#chameleon #jaw"); 
var chameleonTongue = chameleon.select("#chameleon #tongue");
var chameleonHead = chameleon.select("#chameleon #head");

Nu heb ik een svg-afbeelding gemaakt en die verbonden met javascript variabelen. Er beweegt echter nog niets en dat is natuurlijk wel wat we willen doen. Snap.svg heeft daar een mooie functie voor, genaamd animate(). Met die functie kun je een nieuwe positie aangeven, de tijd die de animatie in beslag neemt en een versnellingsfunctie.

In mijn geval wil ik eerst de kaak openen voordat de tong uit de bek van de kameleon schiet. Daarvoor moet ik eerst weten hoe de functie animate() precies werkt. Die functie accepteert namelijk voor de nieuwe positie een array met svg-attributen. Om een vlak uit de svg-afbeelding te draaien moet ik het attribuut ‘transform’ aanpassen met de functie rotate(). En in die functie kun je de graden van de draaihoek en de x- en y-positie van de as aangeven. Bij mij wordt dat dan transform=”rotate(-20, 260, 110)”. In de snap functie animate() ziet dat er weer een klein beetje anders uit:

chameleonHead.animate({transform: 'r-20, 260, 110'}, 500, mina.easein);
chameleonMaw.animate({transform: 'r30, 260, 110'}, 500, mina.easein);
chameleonTongue.animate({transform: 'r20, 260, 110'}, 500, mina.easein);

Wanneer je dit script uitvoert in de browser zullen het hoofd en de tong en kaak van de kameleon in een halve seconde een draai maken. Maar nu wil ik ook nog de tong uit de bek laten schieten en tegen de duizendpoot laten botsen. Dat is iets ingewikkelder omdat ik daarvoor een pad moet aanpassen. In de code is dat niet te doen, maar met Inkscape is dat een stuk makkelijker.

Eerst draai ik ook in inkscape het hoofd, de kaak en de tong van de kameleon zodat de tong tevoorschijn komt op het canvas. Dat doe ik door de XML-editor te openen (bewerken > XML-editor) en de juiste elementen op te zoeken. Vervolgens kan ik in de editor het attribuut ‘transform’ toevoegen en de functie rotate() invullen.

inkscape xml editor rotate

Als ik dat heb toegepast kan ik op het canvas de tong bewerken door simpelweg pad-punten te verslepen. Tenslotte moet het pad weer terugvertaald worden naar een code. Die vind ik terug door in de XML-editor het pad van de tong op te zoeken en het attribuut ‘d’ aan te klikken. De code die dan tevoorschijn komt kan ik kopiëren en gebruiken met snap.svg.

inkscape xml editor

chameleonTongue.animate({d: 'm 254.142,105.465 c -0.91945,-4.73936 212.92389,-28.907989 374.41877,-26.893877 14.68355,0.183128 30.33905,15.332279 43.93075,15.714335 17.63322,0.495662 25.77761,-27.528571 41.00876,-25.899587 12.10879,1.295046 21.50394,13.74826 29.96377,19.69398 17.4323,12.251739 18.0602,-38.721554 26.41324,-35.997065 18.82566,6.140313 10.78299,32.752814 12.73743,45.135922 1.70453,10.799752 19.51626,40.672592 2.80281,46.348052 -5.31187,1.80377 -15.86623,-33.98243 -36.06211,-32.1603 -18.51088,1.6701 -24.00996,-14.403424 -36.34335,-12.354748 C 700.70693,101.0957 690.0714,117.01068 675.42381,116.11625 658.40639,115.07712 631.04537,95.873998 612.28816,95.29318 480.63912,91.216661 328.49376,115.83493 322.005,118.183 c -13.249,3.929 -66.362,-4.981 -67.863,-12.718 z'}, 100, mina.linear);

Handig om te weten is dat de animate() functie ook een callback accepteert. Op die manier kun je nadat je animatie klaar is een nieuwe animatie uitvoeren door opnieuw de animate() functie aan te roepen.

chameleonTongue.animate({transform: 'r0, 260, 110'}, 500, mina.easein,function() {
    chameleonTongue.animate({transform: 'r15, 260, 110'}, 500, mina.easein);
});

HTML & CSS Videolessen

Er wordt mij vaak gevraagd om uit te leggen hoe je met html en css een website kunt bouwen. Om die reden heb ik drie videolessen opgenomen waarin ik uitleg geef. In de video’s behandel ik basiskennis over html-tags, id’s en classes, positionering en margin en padding. Ik ben van plan om later nog twee videolessen toe te voegen waarin ik uitleg hoe je die basiskennis gebruikt om een volledige webpagina te maken.

Portfolio Design Keuzes

ontwerp portfolio4

 

Omdat ik voor het vak BIM de designkeuzes achter het ontwerp van mijn portfolio moet verantwoorden plaats ik hier het originele ontwerp en zal ik uitleggen waarom ik welke keuzes heb gemaakt. Het ontwerp hierboven is mijn vierde poging van een reeks ontwerpen die ik in photoshop heb gemaakt op basis van het gekozen wordpress-thema. Eerdere pogingen vond ik te donker of te druk, en daarom ben ik uiteindelijk voor dit ontwerp gegaan.

Ik heb gekozen voor een licht uiterlijk omdat ik graag openheid wil uitstralen. Een donker thema kan ook heel persoonlijk zijn, maar ik vond het toch te gesloten en te zwaar.
Daarnaast heb ik een palet van accenten in het ontwerp verwerkt om de diversiteit van mijn vaardigheden uit te stralen. Die diversiteit komt ook terug in het menu onder de slider, waar globaal de werkgebieden staan aangegeven waar ik actief in ben. De items in het menu linken ook door naar categorieën in mijn portfolio. Mijn portfolio is heel belangrijk, omdat ik altijd graag wil laten zien wat ik doe. Daarom hebben mijn tekeningen ook de belangrijkste plek gekregen in het ontwerp, ze staan heel groot in de slider die ook helemaal bovenaan staat.
Als achtergrond heb ik een tekening gekozen die voor mij heel persoonlijk is. Deze tekening is al jaren terug te vinden in mijn persoonlijke website, hij staat al ingesteld als achtergrond sinds de eerste versie. En daarom wilde ik hem ook deze keer niet laten ontbreken. De omgeving die in de tekening is afgebeeld staat voor mijn droomwereld. Een vrolijke en zorgeloze plek, met veel rust en kalmte waar alles voor mij mogelijk wordt. Op deze manier wil ik de bezoeker echt een kijkje geven in mijn persoonlijke wereld.

BIM Reflectie

Bim staat voor ‘behind interactive media’, een vak waar ik les in krijg op mijn opleiding ‘communicatie en multimedia design’. Tijdens BIM krijg ik les over het opzetten van een blog in WordPress en het bouwen van een webpagina in html/css. Voor mij is dat allemaal geen probleem omdat ik al zo’n zeven jaar aan front-end developing doe.

Om toch zoveel mogelijk uitdaging uit het vak te halen heb ik besloten om mijn persoonlijke portfolio om te zetten naar een wordpress-blog en hier extra veel aandacht aan te besteden. Na de eerste 3 lessen aan het begin van dit jaar heb ik thuis meteen een ontwerp gemaakt en ben ik gaan experimenteren met thema’s die ik kon omzetten in mijn eigen portfolio-uiterlijk. Uiteindelijk viel mijn keus op het thema ‘travelify’, niet omdat het op mijn ontwerp leek, maar omdat er een goede slider in zat die ik nodig had voor mijn ontwerp. Ik heb vervolgens een child-thema aangemaakt om overschrijvingen bij updates te voorkomen en heb het thema omgetoverd tot mijn eigen ontwerp.

Daarnaast ben ik op zoek gegaan naar plugins om de functionaliteit van mijn portfolio uit te breiden. Een contactformulier en een plugin om google analytics in te voegen waren snel gevonden, maar een plugin om portfolio-berichten aan te maken was lastiger te vinden. Plugins waren te uitgebreid, deden niet wat ik wilde, hadden een niet te begrijpen interface of ik wilde er simpelweg niet voor betalen. Uiteindelijk heb ik een heel basic exemplaar gevonden dat enkel een custom post type aanmaakt met enkele input velden. Het ontwerp kon ik zelf via mijn child-theme aanpassen, en dat was voor mij de belangrijkste voorwaarde. Het geven van de juiste namen aan de html-templates bleek nog een probleem te zijn, maar uiteindelijk is alles helemaal geworden zoals ik het wilde hebben.

Toen de lessen in het tweede kwartaal weer verder gingen had ik snel door dat er in de lessen en het huiswerk voor mij weinig uitdaging zat. Ik ben wel elke les aanwezig geweest maar ben vooral bezig geweest met werk en andere schoolvakken. Daarom heb ik de docent Sybren gevraagd of hij voor mij niet huiswerkopdrachten met meer uitdaging had, en dat bleek zo te zijn al moest hij even nadenken. Om tijdens het tentamen voor html/css de bonuspunten te halen moest ik aan de slag met responsive webdesign. Ik heb een aantal artikelen en de scriptie van de docent doorgelezen, en heb zelf een responsive website gemaakt. Verder heb ik responsive typography onderzocht en daar een artikel over geschreven.

Daarna was de docent door zijn uitdagende opdrachten heen en vroeg hij me om mijn klasgenoten te helpen met het leren van html en css. Ik heb toen een account aangemaakt op jsfiddle en ben daar voorbeelden gaan maken die ik op facebook heb gedeeld met mijn klasgenoten. Elk voorbeeld gaat een stap verder, ik begon met de opzet en voegde later een menu toe en daarna een interactief menu. Hieronder staan links naar de verschillende stappen.

http://jsfiddle.net/daan93/ZxL4F/
http://jsfiddle.net/daan93/LrFru/
http://jsfiddle.net/daan93/K5Vsh/
http://jsfiddle.net/daan93/uNVHm/

Daarnaast heb ik de peercoach van onze klas geholpen met het geven van bijlessen. Twee keer hebben we samen ongeveer 3 uur achter elkaar les gegeven waarbij we stap voor stap een webpagina van een proeftoets opbouwden. Tijdens de bijlessen hielp ik de peercoach met het voorbeeld op het presentatiescherm en liep ik rond om mensen te helpen. Ik kreeg positieve feedback van mijn klasgenoten, zij vonden het erg leerzaam omdat we stap voor stap alles uitlegden in plaats van losse opdrachten opgaven.

Kortom, BIM was voor mij in eerste instantie een vak met weinig uitdaging, maar door de uitdaging op te zoeken heb ik er toch uitgehaald wat er uit het vak te halen was voor mij, naar mijn idee.

 

Responsive Font-size met ‘%’ ‘px’, ‘em’ of ‘rem’

Stel dat je een website bezoekt op je desktop. Het normale lettertype grootte op een desktop is 16 pixels, maar veel webdesigners schalen dat naar beneden omdat de website op meerdere types schermen bekeken moet worden. Het gevolg is dat je met je ogen veel te dicht op je scherm gaat zitten om de tekst nog te lezen. Dezelfde situatie maar dan andersom doet zich voor als je de website op een mobiel bekijkt. Omdat de letters nu supergroot zijn moet je je mobiel bijna een meter van je gezicht afhouden om comfortabel te kunnen lezen. Op dit moment denk je misschien, zou het niet veel mooier zijn als de grootte van het lettertype zich aanpast aan de grootte van het scherm dat je op dat moment gebruikt. Nou, dat kan.

Sinds versie 3 van css is het mogelijk om zogenaamde media-queries te gebruiken op je website. Je kunt dan per type scherm instellen wat de website moet laten zien. Hieronder een voorbeeld van hoe je stylesheet eruit zou kunnen zien als je een desktop, een tablet en een mobiel wilt ondersteunen, dat mobile-first doet, en je pixels gebruikt om je lettergrootte in te stellen.

h1 { font-size: 16px;}

h2 { font-size: 12px;}

p { font-size: 10px;}

 

@media all and (min-width: 980px) {

h1 { font-size: 20px;}

h2 { font-size: 14px;}

p { font-size: 12px;}

}

 

@media all and (min-width: 1260px) {

h1 { font-size: 24px;}

h2 { font-size: 18px;}

p { font-size: 16px;}

}

Probleem opgelost? Niet dus. Want versies 8 van Internet Explorer en lager ondersteunen geen pixels als eenheid om lettergroottes mee in te stellen. En anno 2014 zijn er nog steeds legio bedrijven die een verouderde versie van internet explorer gebruiken. En wie neemt hen dat kwalijk, met hun eigenwijze systeembeheerders die niets zien in vernieuwing (lees: extra werk).

Nu komt de eenheid ‘em’ in beeld. Em wordt gebruikt als relatieve eenheid, zodat Internet Explorer je webpagina netjes kan schalen. Wanneer je de standaard lettergrootte van het document op 16px laat staan, zal een h1 element met een lettergrootte van ‘1.5em’ anderhalf keer zo groot zijn als 16 pixels, 22 pixels dus. Alleen het vervelende em is dat het als basis lettergrootte niet de standaard lettergrootte van het document neemt, maar de lettergrootte van het omvattende element. Heb je dus een standaard lettergrootte van 16 pixels, een div element met een lettergrootte van 0.8em, en daarin een p element met een lettergrootte van nog eens 0.8 em, dan wordt je lettergrootte in pixels 16 * 0.8 * 0.8 = 10,24 pixels, en dat slaat natuurlijk nergens op. Laat staan dat het makkelijk is om mee te rekenen. Eigenlijk schiet je met ‘em’ dus niets meer op dan wanneer je procenten gebruikt om je lettertypes te schalen, wat net zo min is aan te raden.

En daarom is er in versie 3 van css nog iets nieuws uitgevonden. De eenheid ‘rem’, wat staat voor root-em. Met rem hoef je niet steeds rekening te houden met de lettergrootte van het omvattende element, maar hoef je maar één keer de lettergrootte van het document in te stellen waarna je dat rem overal x aantal keer kunt vergroten of verkleinen.

Als je bovendien de lettergrootte van het document op 62.5% instelt kun je heel gemakkelijk zien op welk aantal pixels de lettergrootte uitkomt,  want want 16px * 0,625 = 10 pixels. 2.4rem is dan gewoon 24 pixels als je het omrekent. Wanneer je je website vervolgens responsive maakt wordt alles nog makkelijker omdat je alleen de lettergrootte van je document hoeft aan te passen, de rest wordt automatisch mee geschaald. Hieronder laat ik zien hoe je stylesheet er dan uitziet. Speciaal voor browsers die rem niet ondersteunen heb ik nog wel het aantal pixels ingesteld. Daarna stel ik steeds het aantal rem in zodat nieuwe en moderne browsers een relatieve lettergrootte gebruiken.

 

html { font-size: 62.5%)

h1 { font-size: 16px; font-size: 1.6rem;}

h2 { font-size: 12px; font-size: 1.2rem;}

p { font-size: 10px; font-size: 1.0rem;}

 

@media all and (min-width: 980px) {

html { font-size: 80%; }

}

@media all and (min-width: 1260px) {

html {font-size: {font-size: 100%;}

}

Hieronder staat bij bron 3 een link naar een webpagina waarbij ik het lettertype op deze manier responsive heb gemaakt. Als je de pagina op een desktop opent kun je het venster verkleinen en vergroten om eens te kijken welk effect dat heeft op de grootte van het lettertype.

Bronnen

1. http://www.w3schools.com/css/css_font.asp
2. http://snook.ca/archives/html_and_css/font-size-with-rem
3. http://www.daniel-dewit.nl/wp-content/Responsive%20design/index.html

On scroll footer

Voor mijn werk liep ik tijdens het bouwen van een website voor een klant tegen een probleem met een footer aan. De klant wilde graag dat de footer altijd te zien was ondanks hoe groot of hoe klein het scherm van de gebruiker was. Hij kwam zelf met het voorstel om de gehele website te verkleinen, maar dat is natuurlijk niet mooi in verband met leesbaarheid en ruimtegebruik. Na wat hersenwerk bedacht ik me dat sommige website een dynamische header gebruiken, die kleiner wordt als je naar beneden scrollt op de webpagina, maar wel altijd bovenin zichtbaar blijft.

Het leek me de ideale oplossing omdat principe op de footer in de website van de klant te los te laten. Echter tot mijn verbazing bleek dat er talloze jquery scripts waren voor zulke dynamische headers, maar geen enkele voor een dynamische footer. Na wat zoekwerk bleek dat de oorzaak lag bij jquery, die wel een functie voor scrollTop hadden, maar geen functie voor scrollBotttom die nodig is voor een dynamische footer. Gelukkig was de oplossing zoals altijd op internet te vinden, en was er al iemand geweest die in één regeltje code een vervangen voor scrollBottom had geschreven. Met behulp van dat stukje code kon ik toen mijn eigen script schrijven, dat heel simpel de class van de footer aanpast zodra je de onderkant van de pagina hebt bereikt. Zo kun je de footer twee uiterlijken geven, een grote voor de onderkant van de pagina en een kleine voor als de gebruiker niet aan de onderkant van de pagina is en er weinig ruimte beschikbaar is.

$(document).ready(function() {
    if ($(document).height() > $(window).height()) {
        $("#footer").addClass("footersmall");
    }
    else {
        $("#footer").addClass("footerbig");
    }    
    $(window).scroll(function() {
        var scrollBottom = $(document).height() - $(window).height() - $(window).scrollTop();
        if (scrollBottom > 170) {    
            $("#footer").addClass('footersmall').removeClass('footerbig');
            $(".footerspace").css('display', 'block');        
        } else {  
            $("#footer").addClass('footerbig').removeClass('footersmall');
            $(".footerspace").css('display', 'none');        
        }
    });     
});

Een aantekening bij het script is wel dat de footer twee statische hoogtes nodig heeft wil dit script goed werken. Zodra de footer namelijk kleiner wordt zal er onzichtbare ruimte onder de pagina toegevoegd worden, en die moet hetzelfde zijn als de hoogte van de grote footer. Ook is er een vaste waarde die bepaald vanaf welk aantal pixels scrollen vanaf de onderkant de gebruiker een kleinere footer krijgt voorgeschoteld. Maar als je al die waarden goed hebt ingesteld krijg je een footer die vloeiend groter of kleiner wordt afhankelijk van hoever de gebruiker naar beneden scrollt, en dat loont.

Een werkend voorbeeld is te zien op http:www.vizoverwarming.nl/, de website van de klant waar ik het script voor geschreven heb.

Update: Inmiddels is de werking van het script niet meer te zien op de website van de klant.

content architectuur

Wat moet er op mijn website komen?
Blog (categorie)
– Wat heb ik gemaakt (meerdere bladzijden) (verzameling berichten) (subcategorie)
– Wat vind ik interessant (actueel) (meerdere bladzijden) (verzameling berichten) (subcategorie)
Portfolio (categorie)
– websites (1 bladzij overzicht, 1 bladzij per project) (verzameling berichten) (subcategorie)
– drukwerk (1 bladzij overzicht, 1 bladzij per project) (verzameling berichten) (subcategorie)
– tekeningen (1 bladzij overzicht, 1 bladzij per project) (verzameling berichten) (subcategorie)
bio (1 bladzij)