Tijdens de derde week heb ik verder gewerkt aan de frontend van de projectleiding website. Dit proces verliep met vallen en opstaan omdat er altijd wel zaken opduiken waar je niet op gerekend had.
De week voordien heb ik de algemene structuur uitgewerkt (het skelet) met behulp van masterpages in visual studio en heb ik het grootste deel van de hoofdpagina uitgewerkt. Maandag heb ik de draad weer opgepikt bij het hoofdmenu. Deze heb ik samen met mijn collega verder uitgebreid met JavaScript. In de middag heb ik alle frontend functionaliteiten aangevuld op de hoofpagina (html5 placeholders, iconen in TextBox controls) en tegen het einde van de dag heb ik afbeeldingen voor de artikels gebatched naar dezelfde resolutie.
Dinsdag, woensdag en donderdag heb ik alle andere pagina’s gecodeerd en de standaard html-controls vervangen door asp.net controls gekoppeld aan backend validatie. Dit ging vrij snel aangezien ik grote delen van de hoofdpagina kon hergebruiken in de andere pagina’s.
Vrijdag heb ik mij terug achter de ontwerptafel gezet en mocht ik thuis werken aan een opdracht omdat er niemand van het bedrijf aanwezig kon zijn die dag. Ik kreeg de opdracht om een logo te ontwerpen voor een boekhoudkantoor gevestigd in Mechelen. Na enkele voorstudies ben ik tot drie logos gekomen met elk een andere stijl en heb ik deze gevectoriseerd in illustrator.
Het was een leuke week en het logo op het einde zorgde voor een leuke afwisseling in de workload. Back for more soon!
Welke problemen heb ik ondervonden en hoe heb ik die problemen opgelost?
• Responsive: float vs. inline-block
Het floaten van de verschillende artikelblokken was geen enkel probleem totdat ik het browervenster versleepte naar kleinere resoluties. Om de één of andere reden wilde de overkoepelende <div> soms wel drie artikels naast elkaar floaten en bij andere resoluties dan weer niet. Dit verschilde dan weer van browser tot browser. Na wat deskresearch heb ik het geprobeerd met de inline-block methode maar ook dit gaf problemen met het behouden van drie artikels op één rij.
• Responsive: %-waarden voor de height-property
Nog een vreemd probleem was het bepalen van de hoogtes voor de verschillende container-divs en placeholder-divs. Wanneer je een <div> een percentage meegeeft voor de height-property is de kans groot dat deze <div> die hoogte niet zal weergeven op het scherm.
Wat heb ik deze week geleerd?
• Responsive: % float != px float
Het werken met floats bij een statische website vergt een totaal andere aanpak dan bij responsive websites. Omdat afmetingen van de verschillende artikelblokken (divs) steeds veranderen bij het resizen van het browservenster zullen de waarden soms kommagetallen bedragen. Dit betekent dat bij een bepaalde browsergrootte de kans bestaat dat de som van alle breedtes van de floated elementen meer dan 100% van de beschikbare breedte zal zijn. Dit verklaart het fenomeen waarbij het laatste element van de floated reeks op de volgende rij zal worden gezet. Dit probleem kan worden vermeden door bijvoorbeeld de drie divs niet 33% width mee te geven maar 30% zodat er altijd wat spatiëring overblijft.
• Responsive: geen % voor height gebruiken
Mijn stagementor raadde mij aan om in plaats van procentuele hoogtes, de padding-bottom te gebruiken voor de hoogte in te stellen. Vreemd genoeg neemt de padding wel procentuele waardes aan terwijl de height-property dit niet kan.
Drie kernwoorden van deze week:
· css struggles
· asp.net validatie
· logo
Logboek:
