Week 8

stageblog-017

De 8ste en laatste week samengevat:
– content van de huidige wesite (Le Clos Du Papoune) verwerken in het nieuw ontwerp
– ontwerpen van de voornaamste pagina’s voor de website Le Clos Du Papoune
– iconen ontwerpen voor de website
– de asp.net masterpage voor Le Clos Du Papoune
– contentpages: index, villa, tarieven
– jquery componenten implementeren: jquery cycle slider, jquery flexslider en jquery fancybox
– deskresearch

Welke problemen heb ik ondervonden en hoe heb ik die problemen opgelost?
· jquery cycle slider:
Het implementeren van de jquery cycle slider verliep vlekkeloos tot op het moment waarop ik de responsiveness van de slider wilde testen. Jammer genoeg was de jquery slider niet standaard aangepast voor responsive websites. Vervolgens ben ik er in geslaagd deze responsive te krijgen maar dit ten koste van het leuke slide effect dat ik wilde gebruiken. Jammer genoeg ben ik van deze slider uiteindlijk moeten afstappen en heb ik gekozen om de jquery flexslider te gebruiken.

Wat heb ik deze week geleerd?
· productiever: het werken met de verschillende programma’s verloopt nu enorm vlot
· responsive onderdeel per onderdeel uitwerken voor de verschillende viewports werkt veel efficiënter dan viewport per viewport uitwerken
· bij de mobile first werkwijze heb ik veel minder code dan anders
· oefening baart kunst: het developen van het tweede project verloopt tien keer sneller dan het eerste project
· doelgericht deskresearch kunnen verrichten is een essentiële vaardigheid

Drie kernwoorden van deze week:
· Productiever
· Mobile First
· JQuery

Logboek:
logboek_week_8

 

Dit is mijn laatste bericht want mijn stage zit er na 8 bewogen weken op. Het was een boeiende ervaring om eens mee te mogen draaien in een webdesignbureau en de ontwikkeling van een project van begin tot einde mee op te volgen. Ik heb enorm veel bijgeleerd en heb mijn vaardigheden in asp.net, css en jquery zeker vertienvoudigd. Ook responsive webdesign waar ik voor mijn stage veel vragen en moeilijkheden mee had heb ik eindelijk onder de knie.

Ik dank de zaakvoerder en mijn collega’s van Netpulse voor deze mooie kans en hoop dat ze evenveel hebben genoten van deze periode als ik.

 

Week 4

Image

En we zitten al in de helft van de stageperiode! Afgelopen week was een korte week met veel variatie in de opdrachten. Ik heb mijn tijd besteed aan drie hoofdopdrachten:
• variaties op boekhoudkantoor logo
• projectleiding website verder responsive maken
• redesign van de website ‘Le clos du papoune’

Welke problemen heb ik ondervonden en hoe heb ik die problemen opgelost?

• Responsive: hoofdmenu overkill
Het hoofdmenu responsive krijgen op elke resolutie wilde maar niet lukken. Ik had de html-code te complex geschreven met absolute en relative positioning gemixed en een overdosis geneste <divs>.

• Responsive: data tables
Ook de data tables werden niet juist getoond op mobile view.

• Display none vs. mobile first
Een ander probleem waar mijn collega en ik op botste was het gebruik rond ‘display: none’ in een responsive webomgeving. De bedoeling was om het onderdeel met de grote background-image te verbergen in de media querie voor de mobile viewport. Dit hebben we getest met Mobitest, een handige performance tool te vinden op deze link. Hier konden we uit afleiden dat elementen die worden verborgen aan de hand van deze methode toch geladen zullen worden ondanks de visuele afwezigheid in de browser.

Wat heb ik deze week geleerd?

• Wanneer een probleem niet opgelost geraakt:
Afstand kunnen nemen van een probleem en verder werken aan een andere opdracht. Ondertussen kan een collega het probleem bekijken en mogelijk wel een oplossing vinden.

• Keep it simple:
Het aantal geneste <div> niveaus beperken tot het minimum.

• Don’t waste time:
Css media queries direct schrijven per onderdeel (hoofdmenu, midden, footer) en niet eerst heel de website coderen voor desktop.

• Responsive data tables:
Een mogelijke oplossing voor responsive tables heb ik op deze link gevonden

• Rekening houden met de toegankelijkheid van responsive websites:
Om de methode van ‘display: none’ te vermijden (gewoonweg omdat deze niet deugd), is het geen slecht idee om bij de volgende website de mockups eerst te coderen voor de kleinste device (mobile) en vervolgens de content uit te breiden met css media queries voor viewports die daarop volgen (van klein naar groot). Meer over mobile first vs. display:none vindt u op deze link en deze link.

Drie kernwoorden van deze week:
• media queries
• mobile first
• redesign

Logboek:

logboek_week_4