#WOT 30 Concept

Het eerste Biggles-boek dat ik vertaalde, The Boy Biggles, verhaalde onder andere Victoria_Cross_Medal_Ribbon_&_Barover iemand die het Victoria Cross had ontvangen. In mijn vertaling kende ik deze persoon prompt het Ijzeren Kruis toe. De onderscheiding van de (latere) vijand. Gelukkig zag ik het tijdig en staat het alleen in een concept. Jeugdig enthousiasme zullen we maar zeggen. Toch blijkt ieder boek weer dat er toch nog bepaalde dingen verder komen dan de diverse concepten, hoe vaak mijn medevertaler(s), bestuursleden  of ik het ook herlezen. Ik kan meestal wel een verklaring voor de foutjes vinden zodat ik er lering uit kan trekken, maar toch.

Ook dit blog ziet er in concept heel anders uit dan in de harde werkelijkheid. Zo had ik een week of vier terug stoute plannen: ik ging weer meedoen aan #WOT, aan #SG16, aan #50books en ik zou wekelijks een blogpost schrijven over mijn nieuwe opleiding tot webontwikkelaar en ook wekelijks nog eentje over hoe ik leer. Het concept was prachtig, ik vergat alleen dat ik de blogposts ook nog daadwerkelijk moest schrijven.

Daarnaast zat ik een beetje met mezelf in de knoop omdat mijn betere ik niet genoeg op mijn werkelijke ik leek, maar hopelijk kan ik daar nu langzaam verandering in gaan brengen. Ideeën genoeg om over te bloggen omdat het prima gaat op mijn opleiding en ik van mezelf weet dat ik beter leer als ik het nog eens opschrijf/uitleg. Webruimte heb ik alvast zodat het dit blog niet in de weg zit.

De weg van concept naar realiteit mag er dan een zijn vol hobbels, maar juist die hobbels maken de reis leerzaam. En bovendien heeft Raymond groot gelijk: kennis delen is fijn.

Deze blogpost maakt deel uit van #WOT: Write on Thursday. Iedere donderdag een woord van Martha/DrsPee om over te bloggen of vloggen.

~ ~ ~ ~

Bron afbeelding: Wikipedia.

Mobile first met een kleurtje

Deze blogpost is deel 2 van 8 in de reeks Web development uitdagingen

Web development uitdagingen

De uitdaging die ik mijzelf stelde in de eerste aflevering van deze nieuwe serie over de vorderingen die ik maak tijdens mijn opleiding tot webontwikkelaar was om een website te bouwen. De serie heet Web development uitdagingen en toen bleek dat het bijbehorende domein nog vrij was, heb ik dat maar snel geregistreerd.

Het resultaat van uitdaging 1 is dan ook te bewonderen op dat nieuwe domein. Dat geeft mij de vrijheid om te oefenen zonder dat ik mijn blog in de weg zit. Neem vooral even een kijkje, ik loop niet weg.

De uitdaging die ik mij hier stelde viel uiteen in een tweetal deeluitdagingen:

  1. Ontwerp een pagina die responsive is. Of te wel een pagina die er op elk formaat scherm goed uitziet. Natuurlijk had ik het mezelf makkelijk kunnen maken door uit te gaan van een kant-en-klaar Bootstrap ontwerp maar daarmee zou de uitdaging een stuk minder interessant zijn. Het was er mij juist om te doen om een zelf van de grond af een responsive website te bouwen en zo toe te passen wat ik tijdens mijn opleiding heb geleerd.Gelukkig blijkt responsive design niet heel ingewikkeld. Het geheim zit hem vooral in de grid en de media queries. Het eerste is een matrix waarmee je een scherm onderverdeelt in vlakken. Bij grid systems als Bootstrap zijn dat er meestal 12. Een pagina is dan opgebouwd uit rijen met daarin kolommen. De som van het totale aantal kolommen in een volledige rij bedraagt altijd 12. Ik heb in mijn ontwerp gekozen voor een item van drie kolommen (het menu), een van zes voor de hoofdtekst  waar nu nog een dummytekst staat en waar drie kolommen voor Done/To do.

    Bekijk je de pagina echter met een smartphone dan zijn de elementen gestapeld, of stacked, zoals dat in het Engels heet. Dat doe je door media queries op te nemen in je stylesheet. Een media query ziet er bijvoorbeeld zo uit:

    @media screen and (max-width: 767px){
    	[class*="col-"] {
        width: 100%;
    }
    

    Deze regel zorgt ervoor dat op schermen die maximaal 767 pixels breed zijn (smartphones) alle elementen de klasse “col-” in de naam 100% breed zijn en dus gestapeld worden.

    In de stylesheet en de html pagina heb ik ook van jQuery gebruikt om de pagina schaalbaar te maken,  het menu te verbergen bij kleine schermen om de breedte van het middengedeelte breder te maken als er een geen menu in beeld is. In code ziet dat er als volgt uit:

    <script>
    	$(document).ready(function() {
    		$("#menubutton").click(function() {
    			$("#menubutton").hide();
    			$("#menu").show();
    			$("#content").toggleClass("col-md-9");
    		});
    	});
    </script>
  2. Het tweede deel van de uitdaging lag in het grafisch ontwerp van de de site. Zelf heb ik weinig kleurgevoel maar gelukkig is daar Paletton (voorheen Color Scheme Designer). Kleurenlay-outs met 2, 3,  of 4 kleurgroepen of juist varianten van één bepaalde tint, het kan allemaal met een paar klikken. Zelf koos ik via de kleurencirkel voor een ontwerp met 1 hoofdkleur en 2 secundaire kleuren die ik keurig geëxporteerd kreeg naar CSS waarden. Maar het bleek nog een aardige klus om en ander te verwerken in mijn eigen pagina-ontwerp. Eerst had ik ook nog een lichtgroene zijbalk, maar dat vond ik minder mooi. Wat er staat, bevalt me zolang het duurt. Het aanpassen van het kleurenschema hoeft echter – dat heb ik nu wel geleerd – geen heel ingewikkelde zaak te zijn en omdat ik daarbij niet op mijn eigen gevoel voor kleurencombinaties hoef te vertrouwen, heb ik goede hoop dat het resultaat blijft ogen.

Web development uitdaging 2

Tot zover mijn uitwerking van de uitdaging van anderhalve week geleden.  Nu staat er nog dummycontent op de site en werken de links nog niet. Voordat ik aan mijn opleiding begon heb ik ook wat gewinkeld bij Udemy. De uitdaging voor volgende week is om de opdrachten die ik daarvoor gemaakt heb nog eens door te nemen en te verwerken in mijn nieuwe site.

PS: bij nader inzien leek het mij handiger om de verschijningsdagen van Van lezen naar doen en Web development uitdagingen om te draaien. De tweede aflevering van Van lezen naar doen verschijnt dan ook komende vrijdag en de web development uitdagingen blijven op de maandag.