Opdrachten

Meekijken

Zo af en toe schoof ik aan bij Jurre om even mee te kijken, voor het geval ik de oplossing wist of anders om te helpen.

Adressenlijst filteren

De vraag was of het mogelijk was een grote lijst met contactpersonen te filteren tegen plaatsen in een straal van 50 kilometer rond, in dit geval, Enschede. Want dit zou in de toekomst vaker moeten voorkomen. Het filteren was voor een uitnodiging die verstuurd werd met de post.

Het eerste waar we naar opzoek gingen was een manier om de lijst met plaatsen te genereren. Hier hebben we uiteindelijk een website voor gevonden waar deze lijsten, en meer, te genereren vielen.  

We hadden een website gevonden die filter handelingen gratis uitvoerde, je hoefde alleen het bestand te uploaden en daarna een gefilterd bestand te downloaden. Maar wat doet de site, of eigenaren daarvan, daarna met de data? Het zijn nogal vertrouwelijke gegevens dus daarom zijn we niet voor deze optie gegaan.

Vervolgens hebben we in Excel een manier gevonden om met een formule de lijst met contactpersonen te vergelijken met de lijst met plaatsnamen op overeenkomsten en daarna te filteren op welk niet overeengekomen zijn.

Mailing

Jurre was bezig met een mailing voor Aveco de Bondt, op een gegeven moment ben ik mee gaan kijken omdat het niet om het meest gemakkelijke ontwerp ging qua email. Een mailing maken is nog lastiger dan het maken van een website omdat je met nog meer factoren zit in de verschillende afhandeling die allerlei programma’s, websites en apps er op nahouden wat betreft email zoals: Outlook (elke versie verschilt) Gmail, Windows Live mail, email apps voor op de smartphone met weer een verschil in besturingssysteem (Android of iOS en de onderverdeelde versies daar weer onder).

Email cliënten negeren willekeurig opmaak die toegevoegd is of geven deze verkeerd weer en veel opties ondersteunen ze al niet. Tijdens mijn meekijken heb ik een paar behulpzame pointers/tips kunnen geven zoals het gebruik van de HTML elementen tbody, colspan en het gebruik van tables in tables. Deze elementen kun je allemaal gebruiken voor de lay-out/opmaak van een email.

Modal window

Jurre was bezig met de nieuwe Catapult website en een groot onderdeel daarvan is de modal window achter de ‘verras me’ knop. Hierin worden willekeurig verschillende dingen weer gegeven.

Zodat met toeval niet steeds dezelfde ‘willekeurige’ optie vertoond wordt moet er bijgehouden worden welke optie al geweest is. In het geval alle opties een keer tevoorschijn zijn gekomen moet er weer opnieuw bijgehouden worden welke van de opties getoond zijn. Aan dit script heb ik samen met Jurre en met input van Hans Nep gewerkt.

De zoekfunctie van de nieuwe website is fullscreen en zit daarom ook in een modal window. Om de tekst correct (ook op verschillende schermgroottes), dynamisch en groot weer te geven wordt er gebruik gemaakt van het script FitText.

Het probleem in dit geval is een soort van conflict tussen het modal window en Fittext. Fittext schaalt in dit geval de tekst al voordat de verschijningsanimatie van de modal window klaar is. Dit resulteert in een te kleine tekst, omdat ook in het begin de modal window achter de schermen klein is.

De oplossing was het schalen extra aan te roepen samen met dat de modal window aangeroepen wordt. Dit kan vaak via een ingebakken functie in de modal window. Alleen valt het op deze manier wel te zien dat de grootte van de tekst aangepast wordt tijdens de fade in.

Een soortgelijk probleem was ik zelf eerder ook tegengekomen met responsive video op de website voor het grootste kennisfestival. FancyBox (ook een modal window plugin) en een script dat er voor zorgde dat de video mee schaalt met de grootte van de viewport. Ook in dit geval werd het schalen in de eerste instantie al op het verkeerde moment gedaan. De modal window bestaat eigenlijk nog niet en achter de schermen wordt er dan geschaald naar 0 pixel breed bij 0 pixel hoog.

In beide gevallen ging het wel goed met het aanpassen van de grootte van het browser. Omdat het script dan opnieuw wordt uitgevoerd.

De opdrachten

Hieronder beschrijf ik de opdrachten in de volgorde dat ze voor mij voorbijkwamen, de tijd gewerkt aan de opdrachten verschilt soms nogal. De meeste opdrachten zijn niet in één keer afgewerkt, hier heb ik dus verschillende keren aan gewerkt.

Blendser

Het eerste waar ik mij mee bezig hield toen ik gevestigd was; het onderzoeken of een ronde grafiek in een browser te genereren valt. Het ging in dit geval om een rond grafiek van drie niveaus die een bedrijfsstructuur weer moest geven.

Uitwerking

Na veel Googlen had ik een script gevonden waarmee je een cirkeldiagram kon aanmaken in het browser.

Resultaat

Conclusie

Aan het einde van de dag had ik een soort van prototype. Niet helemaal hoe het eindresultaat er uit moest zien maar zo werd ook duidelijk dat dat niet heel makkelijk ging vanwege teveel informatie om op die manier weer te geven.

Atrium

Mijn eerste echte opdracht. De website voor Atrium (inmiddels hier online) controleren op:

• Werken de links allemaal.
• Klopt de site visueel in de verschillende browsers zoals Internet Explorer 9, Edge, Firefox
• Klopt de site visueel in de verschillende apparaten als smartphones en tablets.

Compatibiliteit websites

Bij Catapult bouwen ze ondersteuning, wel met een waarschuwing, in websites voor verouderde versie van Internet Explorer terug tot aan Internet Explorer 9 die uitkwam in 2009.

Deze verouderde browsers hebben problemen met het begrijpen van nieuwe technieken maar maken ook veel fouten met het correct weergeven van bepaalde styling.

Internet Explorer 11, de laatste Internet Explorer, en de versies daarvoor aan hebben hier allemaal last van. Hoe verder je terug gaat qua versie hoe meer dingen fout gaan.

Ondanks dat Internet Explorer hier berucht om staat is dit niet het enige browser die fouten heeft in de weergave of werking van een website. Daarom moet je ze allemaal testen.

Daarbij komt ook dat je het moet testen voor verschillende scherm groottes, voor de verschillende apparaten groottes maar ook omdat niet iedereen fullscreen of met de zelfde scherm resoluties websites bekijkt.

Uitwerking

Firefox, Chrome en Edge, de opvolger van Internet explorer, zijn makkelijk te testen op de computer en dan ook meteen de meest recente versies, het up-to-date houden van deze browsers gaat normaal gesproken ook vol automatisch.

Internet Explorer 9 kon ik op dit moment nog testen met de ontwikkelaar tools in Edge.

Met de ingebouwde developer tools in de browsers is het ook mogelijk om de browser zich voor te laten doen als apparaten als een smartphone of een tablet. In dit geval heb ik het gedaan voor de smartphone met Chrome, het testen voor de tablet heb ik gedaan op een iPad.

Resultaat

Eerst heb ik de dingen die ik vond opgeschreven en heb deze later op verzoek alsnog uitgetypt, bij latere website controles ben ik dat meteen gaan doen.

De probleempunten onderverdeeld per pagina met daaronder de verdeling in apparaten (weer onderverdeeld in portret en landschap) en scherm groottes. Met ook een algemeen deel voor veel voorkomende site onderdelen zoals de header en footer.

atrium-amsterdam.nl

Tweets oet Twente

Om de zoveel tijd krijgen websites een onderhoudsbeurt. Deze keer mocht ik de onderhoud van tweetsoettwente.nl doen de website voor het gelijknamige boek.

Dit houdt in dat er eerst een backup gemaakt wordt van alle bestanden op de server en een backup van de database.

Hierna wordt Wordpress geüpdate, daarna de geïnstalleerde plug-ins en vervolgens wordt er aan de hand van een checklist gecontroleerd of bepaalde zaken nog kloppen. Deze checklist bevat zaken als:

• Zijn bepaalde plug-ins geïnstalleerd zoals; Login limiter, Yoast SEO en WordFence.
• Zijn deze plug-ins juist ingesteld.
• Is de website toegevoegd aan het Google Analytics account.
• Is de website nog leesbaar.

Uitwerking

Met het versturen van een test berichtje met het contactformulier kwam ik erachter dat deze niet werkte. Om dit te verhelpen heb ik de gebruikte plugin voor het contact formulier te vervangen met de plugin ContactForm7.

De plugin’s Login Limiter, Yoast SEO waren niet geïnstalleerd, heb ik Google Analytics toegevoegd aan de site header en Google webmaster tools ingesteld.

Een negatieve margin in de opmaak zorgde ervoor dat de verstuur knop van het formulier niet ingedrukt kon worden.

De twitterfeed werkte ook niet meer. De plugin hiervoor was normaal gesproken inbegrepen bij het thema. Dit heb ik opgelost door een losse Twitter feed plugin te installeren en deze te integreren.

Daarna heb ik de site verder samen met Jurre gecontroleerd en overige problemen opgelost.

Resultaten

tweetsoettwente.nl

Flexibel huren

Ook voor deze site heb ik net als voor Atrium de controle gedaan op links en styling en heb ik ook gekeken naar hoe de gevonden punten opgelost konden worden.

Regio Academy

Voor Regio Academy wordt een nieuwe website gebouwd met WordPress. De bouw hiervan was al begonnen voordat ik stage kwam lopen. Het eerste wat ik heb mogen doen voor deze site was een controle net als ik gedaan heb voor Atrium en Flexibel huren en de punten daarvan zelf proberen op te lossen.

Ik heb de algemene styling aangepast en onderzoek gedaan naar het stijlen van een formulier checkbox met CSS en dit geïmplementeerd.

Later moest ik specifieke aanpassingen doen voor de mobiele versie en heb ik geholpen met het implementeren van een multi search drop down menu.

Uitwerking

Het eerste wat ik te doen kreeg, na de controle, was het dynamisch maken van thumbnails die op dat moment nog statisch waren. Dit heb ik gedaan met de ACF plugin, de eerste keer dat ik daar mee werkte.

In de styling van de website heb ik aanpassingen gemaakt voor kleuren van knoppen, ervoor gezorgd dat de afbeeldingen die in de volle breedte weergegeven worden gegeven op de mobiele versie dat ook daadwerkelijk doen en heb ik padding problemen opgelost met items die helemaal links of rechts van de site getoond werden.

In de modal windows voor de sprekers kwam soms content niet meer in beeld, dit kon ik ook met CSS oplossen.

Voor de checkboxes gebruikt in de filter op de pagina ‘workshop op locatie’ heb ik onderzocht hoe je deze visueel aanpast. Uit meerdere oplossingen heb ik gekozen voor de oplossing die het minst benodigde qua scripts en het meest browser vriendelijk was.

Vanwege deze opmaak moest er ook een label element komen. Om een label met een checkbox te laten werken moeten de id en for attributen gelijk zijn. Dit heb ik met behulp van een beetje PHP scripting opgelost.

Later moest de zoekbalk weggehaald worden voor de mobiel. Daarvoor in de plek moest een zoek knop komen waarmee je dan een zoek veld zichtbaar maakt. Met behulp van JavaScript moest ik ervoor zorgen dat dit dan niet conflicteerde met het (hamburger) menu voor op de mobiel en dus beide met elkaar wisselt.

HTML opmaak voor de mobiele zoek variant

								
<div class="col-xs-12 visible-xs">
	<img src="images/header-xs.png" width="100%" alt=""/>
</div>
<div class="col-xs-12 hidden-xs ">
	<img src="images/header.png" width="100%" alt=""/>
</div>
								
							

In de eerste instantie heb ik met Jurre meegekeken met het inbouwen van een multi dropdown search selector, later ben ik hier alleen mee doorgegaan. Met dit dropdown menu kan je meerdere opties aanvinken en ook zoeken in de lijst.

Van het semantic.js script heb ik eerst een stuk doorgelezen van de gigantische code en ben ik daarna gaan uitzoeken hoe de ingebouwde debug functie werkte die ik tegenkwam. Eenmaal dat geactiveerd te hebben kon ik makkelijker inzien in welke delen van de code de filter functie voor Isotope gezet moest worden. Isotope is een plugin die gebruikt wordt om afbeeldingen te verbergen, voor wanneer er iets gefilterd wordt met de dropdown, en om de afbeeldingen opnieuw te rangschikken.

Daarna heb ik uitgezocht hoe de opties in de dropdown lijst, die opgehaald worden uit de database, niet dubbel of vaker voorkomen.

Er moest ook een duidelijk onderscheid komen tussen de eerste twee geforceerde opties sprekers en workshops en de rest. Normaal valt een opdeling makkelijk toe te voegen maar het semantic.js script nam de verdeel streep niet op in de lijst tijdens aanmaken van de dropdown. Het aanmaken gebeurt met het inladen van de pagina. Met een jQuery script heb ik ervoor gezorgd dat bijna meteen na het inladen van de pagina, de scheiding alsnog toegevoegd wordt.

JavaScript voor de dropdown opsplitsing

								
function addDivider() { 
	jQuery( "[data-value='.workshop']" ).after("
");
}
setTimeout(addDivider, 500)
								
							

Kleurrijk Hellendoorn

Voor deze website moest ik wijzigingen aanbrengen aan de content. Dit is de eerste website die ik bewerkt heb die draait op het eigen CMS van Catapult.

Uitwerking

Ik moest sponsoren uit de meest rechter kolom verwijderen, of liever gezegd uitschakelen. Dat is handig voor in het geval het later nog weer terug gezet moet worden.

Op de locatie pagina heb ik de afbeelding vervangen en de locatie toegevoegd, op de oude afbeelding stonden meerdere locaties aangegeven.

Verder is er op verschillende punten tekst aangepast en heb ik de grote roze met groen omlijnde afbeelding toegevoegd op de homepagina.

Tot slot heb ik de link naar Twitter uit de linker kolom gehaald en heb ik de indicatie lijn van het menu, die met afbeeldingen werkt, gerepareerd.

kleurrijkhellendoorn.nl

Het Grootste Kennisfestival van Nederland

Aan deze WordPress website heb ik ook mogen meewerken. Door de tijd heen heb ik aanpassingen gedaan aan scripts en styling, nieuwe dingen ingebouwd en content aangepast.

Uitwerking

Voor het gedeelte om kaartjes te kopen werd gebruik gemaakt van een externe service. Deze werd met behulp van iframes op de site geplaatst. Een iframe is een gebied op een pagina waar een andere pagina te zien is. In sommige browsers kwam het voor dat bij één van deze iframes de hoogte altijd ingesteld werd op 0. Daardoor was het voor deze groep gebruikers niet mogelijk om aan te melden. Met CSS heb ik een vaste hoogte aan dit iframe gegeven.

De site moest nog een vaak gestelde vragen onderdeel gaan bevatten, later omgevormd tot huisregels. Hiervoor heb ik een page template gemaakt en met behulp van jQuery UI’s accordion widget heb ik ervoor gezorgd dat je de vraag open kan klappen om het antwoord te kunnen lezen.

De contact pagina had een vreemd probleem met een grote lege ruimte die veroorzaakt werd door een geanimeerde GIF afbeelding die gebruikt wordt om aan te geven dat er nog een deel ingeladen moet worden. De grootte van de leegte had te maken met 100% breedte styling op afbeeldingen.

Willekeurige achtergrond

Voor de achtergrond van de pagina heb ik met JavaScript een script gemaakt zodat de achtergrond willekeurig gekozen wordt met het inladen van de pagina.

JavaScript voor een willekeurige achtergrond

								
 var randomImages = ['backgroundimage-1.jpg', 'backgroundimage-2.jpg', 'backgroundimage-3.jpg'];
 jQuery('body').css({'background-image': 'url(http://www.hetgrootstekennisfestivalvannederland.nl/site/wp-content/themes/kennis/images/' + randomImages[Math.floor(Math.random() * randomImages.length)] + ')'});
								
							

Responsive video

Voor één van de sprekers kwam er een video te staan in de modal window die te voorschijnkomt zodra je op zijn tegel klikt. Omdat het modal window verschillende groottes kan hebben moet de video responsive geschaald worden. Het script dat daar voor zorgde doet dat bij het inladen van de pagina of bij het aanpassen van de grootte van de viewport. Het probleem daarbij is dat het modal window met het inladen van de pagina eigenlijk niet bestaat en dus een hoogte en breedte van 0 bij 0 pixels heeft. Daarvoor heb ik de documentatie van FancyBox 2 even doorgespit en kwam ik een mogelijkheid tegen dat je kunt inhaken op het moment van het openen van de modal window. Hier heb ik het schaal script ingezet in geplaatst.

Hierbij heb ik iets nieuws geleerd over de scope in JavaScript. Wanneer je een variable aanmaakt in een functie en var ervoor zet, dan is de variable alleen aan te spreken in die functie, doe je dit niet en laat je var achterwege dan wordt de variable op het globale niveau aangemaakt aan kan je de variable overal aanspreken.

De JavaScript oplossing voor de responsive video.
Code voor de video en voor FancyBox.

								
//// Responsive video // Responsive video // Responsive video // Responsive video ////

// -- After the document is ready
jQuery(function() {
  // Find all YouTube and Vimeo videos
  $allVideos = jQuery("iframe[src*='www.youtube.com'], iframe[src*='player.vimeo.com'], iframe[src*='vpro.nl']");

  // Figure out and save aspect ratio for each video
  $allVideos.each(function() {
	jQuery(this)
	  .data('aspectRatio', this.height / this.width)
	  // and remove the hard coded width/height
	  .removeAttr('height')
	  .removeAttr('width');
});

// When the window is resized
jQuery(window).resize(function() {
	// Resize all videos according to their own aspect ratio
	$allVideos.each(function() {
	  var $el = jQuery(this);
	  // Get parent width of this video
	  var newWidth = $el.parent().width();
	  $el
		.width(newWidth)
		.height(newWidth * $el.data('aspectRatio'));
	});
	
	// Kick off one resize to fix all videos on page load
	}).resize();
});

// FancyBox // FancyBox // FancyBox

jQuery(document).ready(function(){
	jQuery(".fancybox").fancybox();

	jQuery(".various").fancybox({
		maxWidth	: 900,
		scrolling	: 'auto',
		width		: '70%',
		padding		: 0,
		closeClick	: false,
		afterShow: function(){
			
			$allVideos.each(function() {
				  var $el2 = jQuery(this);
				  // Get parent width of this video
				  var newWidth = $el2.parent().width();
				  $el2
					.width(newWidth)
					.height(newWidth * $el2.data('aspectRatio'));
			});
   		}
	});
});
								
							

Voor één van de content toevoegingen/aanpassingen moest ik foto’s bewerken voor sommige sprekers. Omdat we niet van alle sprekers goede foto’s hadden ontvangen moest er wat beeld materiaal bij bewerkt worden om op een goede compositie uit te komen.

Huisartsmaatschap MCN

Een WordPress website voor twee samenvoegende huisartspraktijken.

Het eerste wat ik moest doen was een controle, verder heb ik content aangepast en toegevoegd, styling aangepast en scripts bewerkt.

Ook heb ik een handleiding gemaakt voor het algemeen gebruik van de website.

Uitwerking

Dus als eerste heb ik een controle uitgevoerd zoals bij de vorige websites. De gevonden punten heb ik zoveel mogelijk zelf geprobeerd op te lossen.

De grote knoppen van het hoofd menu waren op mobiele schermen niet gecentreerd. Bij sommige pagina’s miste ruimte voor de footer aan. Heb ik hover (oplichten) effecten duidelijker gemaakt door de kleur lichter te maken en hebben de grote knoppen in het hoofd menu en de team knoppen nu ook hover effecten door gebruikt te maken van transparantie.

In het Google Chrome browser kreeg dit hover effect voor de grote knoppen een ongewenst effect mee dat tijdens het effect de knop 1 pixel kleiner en groter schaalde. Dit blijkt te komen doordat de hoogte of breedte niet afgerond is op hele getallen.

CSS Chrome 1 pixel schalen oplossing

								
.belBlok a img{
	transition: opacity 0.2s ease; 
	-webkit-transform: translateZ(0);
}
	.belBlok a img:hover{
		opacity: 0.7;
	}
								
							

Van de twee bestaande websites heb ik de content overgezet, links in de teksten klik baar gemaakt en nieuwe team foto’s op de site gezet. De link ‘alle vragen’ in het vraag en antwoord gedeelte op de homepage kwam uit op de 404 pagina.

De indeling van de blokken op de homepage moest op verzoek van de klant anders en heb ik dus de volgorde verandert. Er moesten ook nog een paar logo’s op van het CHPA en thuiszorg.nl.

Op de contact pagina heb ik Google Maps en een contactformulier geplaatst. Voor het contactformulier heb ik gebruik gemaakt van de ContactForm7 plugin voor WordPress.

Als laatste voor de website moest ik de het gebruikers account die de klant ging gebruiken restricties opleggen zodat ze niet bij alle beheer onderdelen kunnen.

Ook heb ik dus voor de klant nog een handleiding gemaakt, deze is uiteindelijk doorgelezen en getest door collega’s. In de aanpassing ronde heb ik zaken duidelijker gemaakt door meer afbeeldingen te gebruiken en meer indicatie als pijlen en omlijningen.

Resultaten

Nederlands Loodswezen B.V.

Voor Loodswezen moest ik de pensioen tool bouwen. Wat inhoudt dat ik een al gebouwde template site voorzie van content en in dit geval ook wat extra’s inbouw.

Uitwerking

De meeste content moest ik uit een Word document halen en zelf van HTML opmaak voorzien. De template is namelijk ook statisch. Dat wil zeggen geen gebruik van PHP dus ook geen CMS.

Uit een PDF bestand moest ik tabellen halen en die moest ik ook handmatig opbouwen met HTML en daarna vullen met de content.

Voor deze content heb ik ook wat styling regels (CSS) aangepast voor de weergave van de tabellen, wit regels na alinea’s en de geordende en niet geordende lijsten.

Voor bepaalde begrippen was het de bedoeling dat er een speciale pagina kwam met een begrippenlijst waar die begrippen dan heen zouden linken. Omdat naar mijn idee dat waarschijnlijk verwarrend zou werken om steeds heen en weer te gaan in de slider, omdat de pagina’s horizontaal scrollen, heb ik het idee geopperd om daarvoor tooltips in te zetten.

Een tooltip is net een tekstballon, in dit geval komt de uitleg van het begrip erin te staan als je er met de cursor over een begrip heen gaat of zoals in dit geval vanwege iPad gebruikers er op klikt of tikt.

De eerste plugin die ik tegenkwam, jQuerys UI’s tooltip (een JavaScript framework), had out of the box niet de gewenste functionaliteit om meerdere tooltips dezelfde data te laten gebruiken.

Tooltips

Vanwege dat er bepaalde termen vaker voorkwamen zou het fijn zijn dat je de tekst die in de tooltip te lezen valt op één centrale plek staat zodat je het maar één keer hoeft aan te passen indien nodig.

De tweede plugin die ik onderzocht, maakt ook gebruik van het jQuery framework, is qTip2. Daarvan moest ik de styling nog wel aanpassen zodat het bij de site paste.

HTML voor het activeren van een tooltip bij een tekst

								
<span class="tt tt-pensioenregeling">pensioenreglement</span>
								
							

Vanwege de slider functie (het horizontaal scrollen van de pagina’s) bleven de tooltips vastgeplakt aan het scherm en bleven ze dus niet bij de begrippen staan. Daarvoor moest er dus nog een sluit knopje ingebouwd worden.

CSS voor de tooltips

								
span.tt{
	color: #00ABFF;
}
	span.tt:hover{
		cursor: pointer;
	}
	
.qtip-default{
	font-size: 12px;
	line-height: 160%;
	border-color: #001C48;
	background-color: #97A0CD;
	color: #FFF;
}

	.qtip-default .qtip-icon{
		border-color: #001C48;
		background: #00307E;
		color: #FFF;
	}
	
	.qtip-default .qtip-icon:hover{
		color: #97A0CD;
	}
	
	.qtip-close{
		right: -11px; top: -11px;
	}

		.qtip-titlebar .qtip-close{
			right: 3px; top: 50%;
			margin-top: -8px;
		}

		* html .qtip-titlebar .qtip-close{ top: 15px; } /* IE fix */

			.qtip-icon .ui-icon{
				width: 16px;
				height: 18px;
				line-height: 20px;
				font: normal bold 16px/16px Tahoma,sans-serif;
			}
								
							

JavaScript gebruikt voor de tooltips

								
 $(document).ready(function()
 {
	 $('span.tt').qtip({
		 content: {text: '...', button: true},
		 show: {
			 event: 'click',
			 solo: true
		 },
		 hide: 'unfocus',
		 position: {
			my: 'top center', 
			at: 'bottom center', 
		}
	 });

	$('.tt-pensioenregeling').qtip('option', 'content.text', 'De pensioenregeling op grond van de pensioenovereenkomst');

 });
								
							

De cover afbeelding (de homepagina), de thumbnails op de inhoudsopgave en de afbeeldingen bovenaan de individuele pagina’s moesten ook nog aangepast worden. Daarvoor heeft een collega verschillende stock foto’s uitgezocht die ik er daarna in geplaatst heb.

TKP Database

Een project waar ik mij vooral de eerste helft van de stage mee bezig gehouden heb.

Het ging om het handmatig omzetten van InDesign bestanden van drukwerk van verschillende pensioenfondsen verspreid over verschillende jaartallen, naar PDF en JPG bestanden en daarna deze uploaden in de TKP database site.

Deze site is bedoelt voor intern gebruik bij TKP voor het doorzoeken van eerder gemaakt werk.

Uitwerking

Bij het omzetten naar PDF zaten ook de eisen dat er geen kleurprofielen mee geëxporteerd mogen worden, 150 dpi (Dots per Inch) en de afbeeldingen moesten de maximale kwaliteit hebben. Daarnaast mochten de bestanden niet groter zijn dan 2 MB, wat soms niet te vermijden viel.

De JPG bestanden moesten ook opgeslagen worden met hoge kwaliteit, 100 DPI en moesten uiteindelijk gemiddeld 500 KB groot zijn.

Om de PDF bestanden groter dan 2 MB als nog in de database te krijgen, omdat sommige bestanden met verlaagde kwaliteit niet kleiner wilde worden dan 3,3 MB, heb ik een omweg gevonden. Eerst een tijdelijk PDF bestand dat niet te groot is uploaden (wel met de juiste bestandsnamen) en dan deze later via FTP handmatig vervangen. In dit geval stond de site nog lokaal dus kon ik het gewoon via Windows verkenner doen. Op deze manier staat de PDF dan wel in het WordPress systeem.

In sommige gevallen moest er bij het exporteren van de PDF rekening gehouden worden met spread (twee pagina’s aan elkaar, niet los van elkaar) en voor flyers de juiste volgorde van pagina’s. Bij het laatste moet je bij het exporteren van het JPG bestand ook opletten wat de voorpagina is, wat dan niet de eerste pagina van het document is.

De PDF bestanden komen als download in de database gepaard met de JPG als voorbeeld afbeelding samen met een descriptie en de e-mailadressen van de contactpersonen voor het bestand. Deze combinaties worden in de database onder de verschillende pensioenfondsen geplaatst. In de meeste gevallen moest ik de fondsen nog aanmaken voor de jaartallen die terug gaan tot en met 2013.

Tijdens het omzetten ben ik kapotte bestanden tegengekomen. Zowel het InDesign bestand zelf (het project bestand) als Indesign bestanden met een kapotte afbeelding. Hierdoor moest ik de PDF en JPG maar genereren van het PDF bestand dat verstuurd was naar de drukker. Ik had hiervoor een script gevonden dat al ingebouwd is in InDesign. Daarmee is het mogelijk om alle pagina’s uit een PDF te importeren in een nieuw InDesign bestand.

De meeste fondsen moesten ook nog worden voorzien van het juiste logo en moest ik overige aanpassingen doorvoeren als het inzien van bestanden in een nieuw tabblad of venster.

Na dit alles heb ik aan de site zelf gewerkt en heb ik de site voorzien van een favicon (het plaatje voor de URL aan in de adresbalk) de plug-ins geüpdate en een archief toegevoegd omdat het de bedoeling was dat het hoofdmenu bestaat uit de meest recente drie jaartallen.

Resultaten

Het valt moeilijk te illustreren en hier en daar waren een paar gegevens al wel ingevoerd maar het merendeel van de database invulling is mijn werk. Ik heb het niet bijgehouden maar ik heb voor mijn gevoel een paar honderd (misschien wel meer) InDesign bestanden handmatig omgezet en de daaruit voortkomende PDF en JPG bestanden (inclusief descripties) in de database gezet.

Bpf HiBiN nieuwe website

Eerst moest ik voor deze site de dekkingsgraadgrafiek afbeelding bijwerken en drie nieuwe maanden toevoegen. Later moest ik deze ook spiegelen.

De website zelf moest ik later controleren op links en styling. Een verschil met de websites die ik hiervoor gecontroleerd heb is dat deze website adaptive is en niet responsive.

Een responsive website is ontworpen voor verschillende schermgroottes en dan maakt het niet uit op welk apparaat dit dan getoond wordt. Je kan dan ook door je browser venster in de breedte kleiner en groter te maken de verschillende versies van een website zien.

Een adaptive website let op met welk apparaat deze bezocht wordt. In dit geval zijn er drie varianten; smartphones, tablets en desktops.

Uitwerking

De grafiek was opgemaakt in Illustrator, zonder veel moeite kon ik de drie nieuwe maanden toevoegen, opslaan als PNG en deze in de nieuwe site plaatsen. Later moest ik de inhoudt van de grafiek spiegelen.

Om de website te controleren heb ik in de eerste instantie gebruik gemaakt van spoofing om de website te controleren op tablet en smartphone gebruik. Op deze manier doet het browser zich voor als een andere apparaat of browser. Daarna heb ik de site nog getest met een iPad.

Op de desktops kwam een verstuur knop buiten een kader. Dit bleek makkelijk op te lossen door een clear left toe te voegen aan de CSS.

Pijlen

Voor de tablets heb ik ervoor gezorgd dat pijlen in de menu balken nu mee schalen met de grootte van de balken en kwamen veel links, specifiek voor de tablet versie, uit op de 404 pagina.

Bij de mobiele versie kwam één link uit op een forbidden pagina. Dus heb ik teksten in het hoofdmenu verticaal gecentreerd en groter gemaakt en speciaal voor wanneer de pagina in landscape weergegeven wordt zijn de pagina titels groter.

Ook heb ik ervoor gezorgd dat de footer navigatie niet stapelt in de tablet variant.

Kartsportinfo.com

De eerste website die ik geüpload heb. Ik heb meegeholpen met content aanpassingen. Deze website is namelijk een soort van broertje van in een netwerkje van sites.

kartsportinfo.com

Reiswerk

De eerste landingspagina waar ik aan gewerkt heb. Ik moest hem controleren op styling en daarna de gevonden punten zelf oplossen.

Uitwerking

De footer was op zo’n manier handmatig gepositioneerd dat in sommige gevallen de footer op de content ging staan. Dit heb ik verandert zodat de footer gewoon weer onder de content geplaatst wordt.

De achtergrond was op de body geplaatst waardoor je altijd het bovenste gedeelte van de afbeelding niet zag. Deze heb ik op het deel gezet waar de afbeelding daadwerkelijk te zien moest zijn, alleen moest ik er wel voor zorgen dat de body 100% de hoogte bleef van de viewport.

Verder heb ik nog een paar tweaks aan de mobiele versie gedaan.

CSS voor de pagina

								
@import url(https://fonts.googleapis.com/css?family=Roboto:400,300,500,700);

html,body{
	height: 100%;  /* Voor de achtergrond afbeelding 2e container-fluid */
}

body {
	font-family: 'Roboto', sans-serif;
	}
	
	.backgroundImage{
		background-image:url(../images/background-image-landschap.jpg); 
		background-size:cover;
		background-repeat:no-repeat;
		background-attachment: fixed;
		min-height: 100%; /* Anders houdt de achtergrond meteen op na het formulier */
		padding-bottom: 40px; /* Footer wegdrukken */
	}
	
p, a {
	font-weight: 400;
	}
footer {
	background-color: #75acb5;
    text-align: center;
    padding: 5px;
    bottom: 0;
    width: 100%;
	}
footer p {
	margin: 5px; 
	color:#fff; 
	font-size: 18px; 
	font-weight: 400;
	}
	
/* FORMULIER */
tr td.breed {
	width: 100%;
	}
input[type="text"] {
	width: 100%;
	padding: 5px;
	}
tr td p {
	margin: 10px 0 5px 25px;
	color: #BE0027;
	font-size: 16px;
	}
input[type="radio"], input[type="checkbox"] {
    margin: 5px 0 0;
    margin-top: 1px \9;
    line-height: normal;
    width: 20px;
    height: 20px;
}

@media only screen and (max-width: 500px) {
body {
	font-family: 'Roboto', sans-serif;
	background-image: none;
	background-color: #75acb5;
	}
	.backgroundImage{
		background-image: none;	
	}
footer {
	background-color: #75acb5;
    text-align: center;
    padding: 5px;
    position: relative;
    bottom: 0;
    width: 100%;
	}
}
								
							

Bpf HiBiN werkgevers

Deze website moest ik controleren en aanpassen samen met één van de andere Bpf HiBiN websites.

Uitwerking

Het controleren van de links en styling ging net als bij de voorgaande websites. Er was niet heel veel aan de hand.

De ‘blijf op de hoogte’ link kwam uit op een 404 pagina niet gevonden error, omdat de pagina nog niet aangemaakt was in het (eigen) CMS.

HTML opmaak was te zien als tekst: <br />.

En in de footer kwam de tekst ‘verplichtstelling’ onder ‘over ons’ te staan. Dit heb ik opgelost door de verhouding in kolommen van 5 en 7 kolommen aan te passen naar 6 en 6 kolommen en een onnodige padding ruimte te verwijderen.

Vos & Julo

De eerste website waarbij ik meer vrij werd gelaten en de website vanaf het begin mocht bouwen. Het ging om een grotendeels statische landingspagina voor de fusie van Vos Techniek en Julo.

Uitwerking

Ik heb de site gebouwd met Bootstrap, SASS en jQuery UI’s tabs widget voor de tabbladen. Daarbij had ik het ontwerp uitgeprint en in PDF vorm.

In de footer is er een knop voor de routebeschrijving en kan je op de kop ‘neem contact met ons op’ klikken om een contact formulier op te roepen. In beide gevallen wordt hier FancyBox 2 gebruikt om deze in een modal window tevoorschijn te laten komen.

De werking van het contact formulier, het PHP script, kon ik van een andere site kopiëren.

Tijdens het bouwen is er beslist dat de afbeelding na de tabs met de tab mee moet veranderen. Hiervoor heb ik een klein scriptje gemaakt met een functie die aangeroepen wordt door het klikken op een tabblad. Met het aanroepen wordt meegegeven wat de nieuwe afbeelding is.

Tabbladen HTML

								
<div id="tabs">
	<ul>
		<li><a onclick="changeBackground('pre-footer-leverancier-elektromotoren.jpg');" href="#leverancier-elektro-motoren">Leverancier elektro motoren</a></li>
		<li><a onclick="changeBackground('pre-footer-reparatie-aandrijving.jpg');" href="#reparatie-aandrijving">Reparatie aandrijving</a></li>
		<li><a onclick="changeBackground('pre-footer-reviseren.jpg');" href="#reviseren">Reviseren</a></li>
	</ul>
	<section id="leverancier-elektro-motoren">
								
							

JavaScript voor het veranderen van de achtergrond afbeelding

								
function changeBackground(bgImage){
	bgImage = bgImage || "pre-footer-leverancier-elektromotoren.jpg";

	$('.preFooter').css('background-image', 'url(images/' + bgImage + ')');
}
								
							

Toen was het nog uploaden en het contactformulier testen, dat kan alleen online omdat er lokaal geen email (SMTP) server aanwezig is. Eerst nog buiten het zicht van de buitenwereld omdat de afbeeldingen eventjes op zich lieten wachten.

Als laatste moest ik er nog voor zorgen dat het ‘bedankt’ bericht voor het gebruik maken van het contact formulier te zien was. Vanwege het vernieuwen van de pagina na het verzenden was het bericht niet te zien omdat het modal window niet opnieuw weer tevoorschijn kwam.

Met dat de site online ging voor het grote publiek moest ik op de website van Vos Techniek een afbeelding met het goede nieuws in de slider op de homepage plaatsen. Met ik daar mee bezig was moest ik nog even uitpluizen hoe de Visual Composer plugin (een pagina bouw plugin voor WordPress) nou werkte om de slider minder hoog te maken.

Onderzoek SASS

Dit valt eigenlijk samen met het maken van de Vos & Julo website. Hierbij mocht ik SASS inzetten.

Ik kende SASS al vanwege de Minor die ik gedaan had voor deze stage aan maar in dit geval ging het om de originele syntax; indented SASS.

Onderzoek

SASS is een CSS preprocessor. SASS moet namelijk omgezet worden in CSS omdat browsers SASS niet begrijpen.

Ik had niet de tijd om een complete workflow op te zetten zoals ik had tijdens mijn Minor dus heb ik gebruik gemaakt van de tool Koala. Een programmatje dat de mogelijkheid heeft om SASS bestanden in de gaten te houden. SASS wordt automatisch omgezet naar CSS zodra er een SASS bestand opgeslagen wordt.

SCSS (Sassy CSS) is de nieuwe syntax en tegenwoordig de meest populaire. Deze syntax is ontworpen als een super set voor CSS. Standaard CSS is daarom ook compatible en kan gewoon meegenomen worden tijdens het omzetten van SASS naar CSS.

De indented SASS syntax werkt met witruimte en lijkt haast wel ontworpen om zo min mogelijk te hoeven typen. CSS werkt normaal met brackets, de { en } tekens, deze komen niet voor bij de indented syntax. Eerst type je de selector en vervolgens ‘indent’ je de declaraties voor die selector in de regels die daarop volgen met een tab ruimte.

Verder kan je met SASS gebruik maken van variables zodat je bijvoorbeeld een kleur maar één keer hoeft aan te passen. Daarnaast zijn er nog mixin’s, herbruikbare blokjes SASS, de syntax hiervoor is anders als voor SCSS in dit geval wordt het aanmaken en het oproepen van een mixin gedaan met + en het declareren met =. Verder zijn er nog functies voor kleuren en wiskunde berekeningen, loops, if else statements en een boel meer.  

Vos & Julo indented SASS

								
header
	height: 600px
	background: url(../images/header.jpg) center center fixed
	background-size: cover

.logo
	background-color: $vosWhite
	img
		width: 100%
		height: auto
		padding: 20px

.intro
	padding-bottom: 40px
	background-color: $vosWhite

.contentTabs
	background-color: $vosPurple
	color: $vosWhite
	
	p, ul
		color: $vosWhite

.preFooter
	height: 600px
	background: url(../images/pre-footer.jpg) center center fixed
	background-size: cover

footer
	margin-bottom: 100px
	text-align: center
	background-color: $vosBlack
	
	a, address, h1
		color: $vosWhite

	h1
		font-size: 2.7em
	
	a
		margin: 0 8px
		letter-spacing: 1px
		&:hover
			text-decoration: none
			color: lighten($vosPurple, 10)
	
	address
		margin-top: 1em

.btn-footer
	color: $vosWhite
	background-color: $vosPurple
	border-color: $vosPurple
	border-style: outset

	&:hover
		color: lighten($vosPurple, 60)
		background-color: lighten($vosPurple, 10)
	&:focus
		color: lighten($vosPurple, 40)

#contactForm
	display: none
	
	label
		font-size: 1.5em

								
							

Aanbevelingen

Als ik een syntax moet aanraden dan is het de SCSS variant. Deze is net iets duidelijker leesbaar door de brackets en populairder onder de gebruikers. Bij deze syntax kun je ook gewoon CSS overnemen als je een CSS oplossing op een site gevonden hebt bijvoorbeeld.

Aveco de Bondt

De tweede landingspagina voor mij. Mensen komen hier terecht vanuit de mailing waar ik het eerder over schreef bij de meekijk opdrachten. Op de pagina konden mensen zich inschrijven voor de feestelijke opening van het nieuwe pand.

Vervolgens moest ik de site uploaden en testen.

Tegen de tijd van de opening heb ik 21 USB sticks voorzien van filmpjes die uitgedeeld werden tijdens de opening. De filmpjes waren ook te zien tijdens de opening zelf.

Uitwerking

Mijn eerste website onder iets meer druk dan anders.

Ik kon het formulier afhandel script dat een e-mail verstuurd, met de ingevulde gegevens overnemen van een andere site.

Een groot deel van de opmaak is afkomstig van afbeeldingen. Voor desktops en tablets gelden dezelfde afbeelding maar voor de mobiel worden die afbeeldingen verborgen en afbeeldingen specifiek voor op de mobiel zichtbaar gemaakt. Dit in verband met leesbaarheid.

HTML voor het omwisselen van afbeeldingen voor desktop en mobiel

								
<div class="col-xs-12 visible-xs">
	<img src="images/header-xs.png" width="100%" alt=""/>
</div>
<div class="col-xs-12 hidden-xs">
	<img src="images/header.png" width="100%" alt=""/>
</div>
								
							

Er was nog een probleempje met het wegschrijven van special tekens als ‘ë’ (tekencodering), de aanmeldingen werden niet goed weggeschreven in de database. De database dient als backup voor als er problemen zijn met het versturen van email. Dat bleek achteraf aan een instelling van MySQLi te liggen.

Blendser

Voor Blendser moest ik de nieuwe website opzetten die ik grotendeels kon overnemen van de bestaande website. Centraal op de nieuwe site is de BB 3.0 (bedrijfsbestuur), hier ging het over in de eerste Blendser opdracht die ik beschreef.

Uitwerking

Ik ben begonnen door het thema over te nemen van de al bestaande website. Daarna kon ik alvast een groot deel van de content overnemen, zeven pagina’s met daaronder weer gemiddeld zes sub pagina’s. Hier heb ik toen ook het menu met de submenu’s voor opgezet.

Vervolgens heb ik de instellingen voor de master slider plugin, te zien op de homepagina, handmatig overgenomen van de bestaande site en overige content ook gekopieerd.

Toen kwam er een wijziging in de content. De sub pagina’s moesten verdwijnen en de content daarvan moest in secties komen op hoofdpagina.

De submenu’s moesten nu naar de secties linken op de pagina’s. Om dit te realiseren heb ik een repeater field gebruikt van ACF en dit toegevoegd aan de pagina template. Daarmee is het mogelijk om zoveel secties aan te maken per pagina als je maar wilt.

Per sectie moet je ingeven wat de titel van die sectie is, het tekst gedeelte voor die sectie wat in de URL komt te staan en de content voor die sectie.

Het gedeelte van de URL is namelijk nodig voor de submenu’s, de knoppen moeten nu handmatig voorzien worden van een URL. De link naar de pagina is zoals normaal, je voegt er alleen de verwijzing naar de sectie op de pagina nog aan toe zoals het volgende: www.dit-is-een-url-voorbeeld.nl/pagina#sectie-link-voorbeeld.

In het origineel stonden er op de homepage cirkels met daarin icoontjes van Font Awesome, een symbool font. Deze heb ik omgebouwd zodat er plaatjes getoond werden met daarom de begin letters voor de pagina’s.

Vervolgens heb ik nog styling aangepast zoals het uitlijnen van koppen en de submenu’s diapositief gemaakt. De teksten van de  knoppen in het menu naar de afdelingen hadden al de kleuren van de afdeling. Deze heb ik omgezet naar diapositief zodat de achtergrondkleur van deze submenu’s de kleuren kregen van de afdeling en de tekstkleur wit.

Voor op de mobiel heb ik in het menu de submenu’s verborgen. De lijst werd namelijk zo lang dat een deel buiten het scherm zou vallen.

Ik heb ook nog onderzoek gedaan naar het plaatsen van een interactief Excel sheet op een website. Dit zodat bezoekers een berekening konden doen. Zo kwam ik erachter dat de mogelijkheid er ooit was met Microsoft zijn eigen online tools maar nu maakten we al gebruik van Google Docs met het nadeel dat iedereen hetzelfde bestand bewerkt en niet ieder voor zich.

De koppen van de pagina’s moesten ook de kleur krijgen van de afdeling, dit heb ik afgehandeld met een script in het template bestand.

PHP script voor de gekleurde koppen

								
if ( is_page( 'ondersteuning' ) ) {    
	$kleurClass = "kleur-O";
} elseif ( is_page( 'financieel-beheer' ) ) {   
	$kleurClass = "kleur-FB";
} elseif ( is_page( 'risicomanagement' ) ) { 
	$kleurClass = "kleur-RM";
} elseif ( is_page( 'communicatie' ) ) { 
	$kleurClass = "kleur-COM";
} elseif ( is_page( 'pensioenadministratie-en-actuariaat' ) ) { 
	$kleurClass = "kleur-PA";
} elseif ( is_page( 'governance-compliance' ) ) { 
	$kleurClass = "kleur-GC";
} elseif ( is_page( 'uitbestedingsmanagement-vermogensbeheer' ) ) { 
	$kleurClass = "kleur-UM";
}; ?>

	<h2 <?php if(isset($kleurClass)) {?> class="<?php echo $kleurClass; };?> "><?php the_title();?></h2>
								
							

Sommige secties kregen ook een PDF als download. Dit heb ik toegevoegd aan de repeater fields zodat je nu per sectie een download kan toevoegen in het administrator gedeelte. In het geval er een PDF gedownload kan worden verschijnt er een download icoontje achter de titel van die sectie.

PHP script voor de download knoppen

								
<h3><?php the_sub_field('dienst_titel'); ?>
	<?php if( get_sub_field('dienst_download') ): ?>
		<a target="_blank" href="<?php the_sub_field('dienst_download'); ?>"><img src="<?php echo get_template_directory_uri(); ?>/img/icon-download.png" alt=""></a>
	<?php endif; ?>
</h3>
								
							

blendser.com

Go Zen

Aan deze website met het WordPress CMS moest ik aanpassingen doen en content invoeren.

Referenties moesten kunnen worden gefilterd per pagina, verder moest ik nog zorgen voor een extra locatie om een afbeelding te plaatsen op pagina’s.

Zodat de eigenaresse ook daadwerkelijk van het filteren gebruik kon maken heb ik ook een handleiding gemaakt.

Uitwerking

Voor het filteren van referenties heb ik gebruik gemaakt van tags. In het geval dat een tag toegekend wordt aan een pagina en identiek is aan de titel van de pagina komt de referentie op die pagina te staan.

Het kunnen toekennen van tags aan berichten is een standaard functionaliteit van WordPress. Naast de controle op tags wordt ook gecontroleerd of het bericht aan de nieuws of referentie categorie is toegevoegd.

Op de homepage zijn altijd de laatste twee referenties te zien. Daarnaast nog op de overzicht pagina voor referenties en nieuwsberichten.

Later moest dit ook mogelijk worden gemaakt voor nieuwsberichten. Zodra er geen specifiek nieuwsbericht is om te tonen worden er maximaal twee algemene nieuwsberichten getoond.

Met behulp van ACF heb ik een locatie aangemaakt op de pagina’s waar nu in het administrator gedeelte voorzien van een afbeelding.

De afbeeldingen die op de pagina’s moesten komen waren al geselecteerd. Met aanwijzingen vanuit de studio heb ik het zelf gewaagd om de gewenste uitsneden te plaatsen. Er kwam namelijk ietwat Photoshop werk bij kijken om beeld materiaal te creëren die er in de eerste instantie niet was.

Met de handleiding heb ik eerst uitgebreid uitgelegd hoe tags aan te maken zijn, aan te passen en te verwijderen. Vervolgens hoe je deze toevoegt aan een bericht. Deze handleiding is vervolgens weer nagelezen en getest door collega’s.

go-zen.nl

Catapult blog

Op een gegeven moment kreeg ik de opdracht om een stukje te schrijven voor het Catapult blog.

Ik had de opdracht om een nummer van de Catapult playlist op Spotify weg te stemmen, er zelf weer één toe te voegen en beschrijven waarom.

Uitwerking

Die keer dat het mijn bedoeling was het bericht te schrijven ben ik het vanwege drukte vergeten en toen ik er eindelijk aan wou beginnen functioneerde de Spotify playlist niet.

Maar dan toch heb ik uiteindelijk het blog bericht uitgetypt en moest ik er nog  even een gepaste afbeelding bij zoeken.

blog.catapult.nl/catapults-sound-paul-dyk/

Onderzoek Node.js workflow

Ik heb de mogelijkheid gekregen om te onderzoeken hoe een Node.js workflow zou passen bij de web afdeling, zodat er bijvoorbeeld gewerkt kan worden met SASS.

Onderzoek

Het eerste wat ik onderzocht heb is of er goede Node.js starters kits waren die werkten met Gulp, één van de betere taskrunners (automatische taak afhandeling). Het gebruiken van een starter kit is handig om het feit dat je dan niet zelf de workflow hoeft te updaten.

Node.js is een JavaScript engine, dat normaal gesproken in een browser aanwezig is maar in dit geval als server. Hiervoor zijn een heleboel plug-ins geschreven die bij het ontwikkelen van websites en apps heel goed van pas komen.

Een taskrunner is software die je vooraf gespecificeerde taken kan laten uitvoeren. Het mooie hieraan is dat je ook watch tasks kan aanmaken die dus in de gaten houden als je bijvoorbeeld een bestand opslaat. Dat is handig voor iets als SASS waar je graag hebt dat elke keer als je een SASS bestand opslaat automatisch het CSS bestand gegenereerd wordt.

WordPress SASS starter kitt

De eerste starter kit die ik probeerde had mooie features maar helaas de LiveReload niet van werkte. LiveReload is handig omdat het automatisch de browser ververst als je een SASS bestand opslaat, dat scheelt weer een stap. Daar kwam ook bij dat het meegeleverde WordPress thema niet de handigste was en het er op leek dat het pakket niet echt vaak geüpdate werd. 

Met het testen van deze starter kit moest ik ook een aantal zaken oplossen. De sites staan namelijk op de lokale server, dit is niet zo vanzelf sprekend voor een Node workflow.

Het command prompt waar je Node opdrachten mee uitdeelt moet daarom met administrator rechten uitgevoerd worden en om toegang te krijgen tot de netwerk map moet je gebruik maken van de pushd en popd commando’s. Door na pushd het pad naar de netwerk map te typen koppel je de map. Met popd ontkoppel je de netwerk map weer.

UnderStrap

Toen ben ik toch verder gaan kijken naar andere starter kits en moest ik de afweging tussen een starter kit met het Underscores thema of het Sage starter kit maken.

Underscores wordt neergezet als een 1000 uren voorsprong thema gebouwd en onderhouden door WordPress professionals. Toen was het nog de vraag om voor Suzy te gaan, een framework voor SASS, of te gaan voor Bootstrap wat al gebruikt wordt door de web afdeling.

Uiteindelijke heb ik UnderStrap getest, een starter kit die gebruikt maak van het Underscores thema omgebouwd met BootStrap waarbij je kan kiezen voor de huidige versie 3 en de alpha versie van 4.

Tijdens dit onderzoek ben ik ook al bezig met het maken van een document waarin ik uitleg wat er geïnstalleerd moet worden, welke commando’s er zijn en welke hoe en wanneer gebruikt moet worden. Op moment van schrijven ben ik nog met dit onderzoek bezig en ben ik het Underscores thema aan het doorspitten maar zit de hele SASS uitleg al wel in het document.

Site onderhoud

Eens in de maand verspreid over een paar dagen wordt er van bepaalde websites backups gemaakt en worden ze geüpdate. Voor mijn rekening dit keer de websites: Afvalbewust, Catapult pensioen en het Catapult blog

Uitwerking

De backups van de bestanden schrijf je weg onder de map van de site op de lokale server onder de map ‘backups’ met daaronder de map voor de datum waarop je de ‘backup’ uitvoert en daar dan weer onder de map ‘files’. Deze bestanden haal je op met een FTP cliënt als FileZilla.

Daarna maak je backup van de database waar je op inlogt. Daar exporteer je de hele database in een zip bestand en plaats je dit bestand wanneer je het gedownload hebt onder de ‘db’ map in de map met de datum voor die dag.

Wanneer je dat gedaan hebt kan het updaten van WordPress beginnen. Als dat eenmaal goed verlopen is kunnen de plug-ins één voor één geüpdate worden. Thema’s, de hele visuele opmaak van een WordPress site, worden met rust gelaten vanwege aanpassingen die vaak gedaan zijn die dan hoogstwaarschijnlijk te niet gedaan zouden worden.

Dan is er nog een PDF checklist in te vullen die je wanneer je klaar bent opslaat in een map waar deze lijsten allemaal komen te staan, gescheiden op datum doormiddel van mappen. Aan de hand van deze checklist controleer je dat bepaalde plug-ins geïnstalleerd zijn, dat deze de juiste instellingen hebben en controleer je en kijk je of de site in Google Analytics staat.

Resultaten

Bij de eerste website waar ik de onderhoud aan deed was het al raak. Het thema van Afvalbewust raakte out of date in vergelijking met de nieuwe WordPress. Dus moest ik eerst de backup terug zetten.

Vervolgens moest ik met de versie op de lokale server de updates doen inclusief het thema en ervoor zorgen dat deze er weer hetzelfde uit kwam te zien.

Bij het onderhoud aan de andere sites had ik meer geluk.