Categorie: Web development

Na het stellen van mijn opdracht in de vorige aflevering van deze serie had ik ook de opdracht die ik daarna wilde uitvoeren al snel in gedachten. Ik heb nu besloten beide opdrachten om te draaien. Ik was van plan om eerst de site van inhoud te voorzien en daarna te zorgen voor een goede paginastructuur.

Bij nader inzien lijkt me dat een onlogische volgorde. Het toevoegen van pagina’s gaat namelijk een stuk efficiënter als je eerst zorgt voor een goede paginastructuur. Op die manier hoef je per pagina zo weinig mogelijk te wijzigen.

Een stukje geschiedenis

Een webpagina bestaat voor een groot deel uit onderdelen die voor elke pagina hetzelfde zijn. Denk een een header, een menu en een footer. Alleen het gedeelte met de inhoud van een pagina is steeds verschillend. Voordat dynamische websites opkwamen kon je in HTML dergelijke onderdelen in je site zetten met frames en een frameset. Belangrijk nadeel van deze techniek is dat leessoftware voor blinden een slechtzienden er niet mee overweg, wat waarschijnlijk een reden is geweest waarom de frame techniek geen onderdeel meer uitmaakt van HTML5.

Enter PHP

Tegenwoordig los je bovengenoemd scenario op met wat server side includes worden genoemd. Je maakt dan losse pagina’s voor je footer, je menu enz. en die voeg je dan op de plek waar ze in pagina moeten toe aan de code. Voor web development uitdagingen pagina betekende dat ik de werkende index.php pagina heb gepakt en daar de header, het menu, de footer en de aside van mee gemaakt heb. Voordeel van deze  aanpak is dat ik dus niet op 10 pagina’s het menu moet aanpassen, maar alleen maar menu.php.

Pagina’s in een andere pagina opnemen gaat heel makkelijk met include. Mocht een in te voegen deel van een pagina nu essentieel zijn voor de werking van de pagina dan heb je daar de functie require voor. In dat geval zal de pagina niet werken als het benodigde bestand ontbreekt. Van beide functies heb je ook een _once variant. Die is handig om te voorkomen dat je 2 keer een include opneemt waarin je een functie definieert. Een functie mag namelijk maar een keer gedefinieerd worden.

Includepad

Het is gebruikelijk de losse in te voegen bestanden in een includes map te zetten. Bijvoorbeeld www.example.com/includes/menu.php. Nadeel van deze werkwijze is dat het menu los van de site waar het bijhoort  te benaderen is. Je kunt er ook voor kiezen om je includes op te slaan in de map boven je www (root) map. Je verwijst dan als volgt vanaf de root ../includes.menu.php. Het menu wordt nu keurig opgenomen in de site maar is door bezoekers niet meer los te benaderen.

Benieuwd naar het resultaat tot nu toe? Klik op de schermafbeelding van de website. Die geeft overigens niet de actuele situatie weer.

Volgende uitdaging:

Lege pagina’s vullen.

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.

Zoals ik afgelopen maandag al schreef ben ik begonnen met een opleiding tot webontwikkelaar. Programmeren heeft me al tijd al getrokken en het einde van mijn vorige baan leek me een mooie gelegenheid om te kijken of ik me niet alsnog in die richting kon specialiseren. Ik heb uiteindelijk voor web development gekozen omdat de talen die daarvoor nodig zijn het minst abstract zijn. Een van de redenen dat ik na de middelbare school niet voor informatica/ict koos, was dat ik van wiskunde weinig kaas gegeten had.

Nu dus alsnog

Vorige maand ben ik met mijn opleiding gestart. Ter voorbereiding had ik al het nodige gegaan. Ik las Lezen, weten en niet vergeten van Mark Tigchelaar, volgde de MOOC Learning how to learn en ging aan de slag met het boek waarop die cursus is gebaseerd, A mind for numbers van Barbara Oakley. Het leek me nuttig om mijn kennis over leren te actualiseren omdat het toch al weer even geleden is dat ik nog studeerde.

Een van de dingen die ik opstak was dat dagelijks er bezig zijn het leren bevordert. Dat gaat me gelukkig met al mijn training met het wandelen aan de hand van deze serie van Peter over het boek Zen Habits – Mastering the Art of Change van Leo Babauta uitstekend af. Dagelijks ermee bezig zijn, versterkt het geheugen, losse onderdelen smelten samen waardoor je ze gemakkelijker onthoudt en je krijgt routine.

Wat me naar aanleiding van de boeken en de MOOC ook van belang leek, was om te oefenen en daarbij meerdere bronnen te gebruiken. De een legt het toch iets anders uit dan de ander uit en bovendien zorgen ze voor divers oefenmateriaal. Jezelf testen is een van de beste manieren om te toetsen of je iets begrijpt.

Oefenstof

Al met al heb ik afgelopen maanden al behoorlijk wat geoefend met HTML/CSS, JavaScript/jQuery, PHP/MySQL en Bootstrap. Het lijkt me daarom nu mijn opleiding echt begonnen is tijd voor de volgende stap: een wekelijkse web devopment uitdaging waarmee ik wat ik leer kan toepassen. Ik ga proberen om de opdracht steeds net iets moeilijker te maken dan ik al heb geleerd omdat dat ik dan de hard start, jump to easy techniek kan toepassen. Maar daarover waarschijnlijk meer in een van mijn afleveringen en mijn nieuwe serie Van lezen naar doen, waarvan maandag het eerste deel verschijnt.

Wat is het idee?

Het is mijn bedoeling om (mijzelf)* voortaan iedere vrijdag (voor de eerste aflevering heb ik vanwege onverwacht bezoek een dag gesmokkeld) een web devopment uitdaging te geven. De week daarna presenteer ik dan de oplossing en de uitleg daarbij plus een nieuwe opdracht. Op die manier hoop ik een leuke manier wat ik leer nog eens extra toe te passen en met een beetje geluk bouw ik dan ook een aardig portfolio op.

Uitdaging 1

• Bouw een website om alle web development uitdagingen op te presenteren.

*Uiteraard mag je meedoen en jouw oplossing van de uitdaging hier of volgende volgende week als reactie achterlaten.

@foto VIA PIXABAY met CC0 verklarinG