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.

 

Advertisements

Week 7

Image

Week 7 kort samengevat:
– finaliseren van de zoekmachine
– mockups website getij-oosterschelde
– data dynamisch inladen voor de consultancy pagina
– project module opbouwen (databank, DAL, BLL, PL)
– projectleiding website IE8 compatibel maken
– iconen ontwerpen (getij-oosterschelde, leclosdupapoune en het Netpulse CMS)

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

· Repeater toont niet alle data naar behoren:
De Repeater control was enorm buggy wanneer deze foto’s moest weergeven via een url-path uit de databank. Dit heeft mijn collega opgelost door simpelweg de Repeater te vervangen met de ListView control.

· IE8 problemen bij weergave:
Vrijwel alle browsers gaven de gewenste ouput van de projectleiding website maar natuurlijk gelde dit niet voor IE8. IE8 ondersteunt geen box-shadow en geen border-radius. Dit heb ik na wat deskresearch ook weeral opgelost met conditional css in de body-tag.

. IE8 problemen met “display: inline-block”:
Alle browsers behalve IE8 weten perfect om te springen met “display: inline-block” wat een gelijkaardig effect geeft als “float:left”. Soms negeert IE8 deze property en zal de browser de elementen met deze property niet op eenzelfde lijn zetten maar onder elkaar (zijbalk bij het artikeldetail) of op elkaar (bij de breadcrumb). Oplossing: zowel “display: inline-block” als “float: left” definiëren.

· Zoekmachine aanspreken vanuit een andere pagina:
Ik probeerde de zoekmachine aan te spreken vanuit de homepage. De gebruiker zou na het klikken op de zoekknop doorverwezen worden naar de thema-pagina waar de zoekmachine zich bevindt. Ik heb lang zitten zoeken achter de reden waarom de zoekresultaten leeg waren. Met behulp van debug-modus en breakpoints ben ik tot de constatatie gekomen dat de zoekterm van de home pagina niet werd meegstuurd naar de databank call.

Image

Wat heb ik deze week geleerd?

· werken met tussentabellen voor veel-op-veel relaties
· geen Repeaters meer gebruiken
· debuggen in visual studio met breakpoints
· website snel cross-browser maken met conditional css in de body tag
· blijven debuggen voor IE8 (enorm veel mensen gebruiken deze browser nog)
· IE8 geeft weinig of geen ondersteuning voor volgende css-properties: text-indent, display, border-radius, box-shadow
· linq queries schrijven en gebruik maken van built-in functies: take(), Guid.NewGuid()
· shortcuts voor het aanmaken van delete/edit knop bij GridView controls

Drie kernwoorden van deze week:
· Icon Design
· IE8
· Tevredenheid

Logboek:
logboek_week_7

Week 6

Image

Waar ik deze week aan heb gewerkt:
– zoekmachine: frontend code, backend code en responsive maken
– gewerkt met repeater en listview controls
– herzien van css-code: zoekmachine, tagsmenu, css-clipping
– layout le clos du papoune
– brainstorm rond Netpulse redesign van de website

Welke problemen heb ik ondervonden en hoe heb ik die problemen opgelost?
· Filteren van de juiste artikelen:
Mijn collega en ik waren bezig met het schrijven van de linq2sql query voor het filteren van artikels en subartikels. De query mocht enkel de artikels weergeven die de opgegeven zoekterm in de titel, inleiding, of een ander veld bevatte. Dit werkte perfect maar de listview control toonde het hoofdartikel soms meerdere keren omdat ook het subartikel deze zoekterm bevatte. Na veel zoeken is mijn collega met een mooi staaltje coderen tot de oplossing gekomen door gebruik te maken van views (inner join query) in plaats van tabellen.

· Buggy datapager control:
Tijdens het werken met listviews heb ik voor het eerst paginatie toegepast op data. Dit was moeilijker dan ik dacht. De ingebouwde datapager control van het .net framework vereist veel aanpassingen en onlogische manieren van werken om deze normaal te laten functioneren. Na veel debuggen heb ik het opgelost door de databank call nogmaals op te roepen in de prerender() event en gebruik te maken van de setPageProperties() functie.

Wat heb ik deze week geleerd?
· Databank Views gebruiken in plaats van Databank Tabellen opnieuw te definiëren
· Leren werken met de listview -en datapager controls
· CSS-clipping voor afbeeldingen
· ASP.NET zoekmachine opbouwen van begin tot einde

Drie kernwoorden van deze week:
· List controls
· zoekmachine
· databank views

Logboek:
logboek_week_6

Image

Week 5

Image

Hier ben ik weer met meer nieuws over mijn stage!

Deze week kort samengevat:
– afronden van de pagina’s hoofdartikel en subartikel (css media queries)
– inleiding tot het custom CMS-systeem van het bedrijf
– verdiepen in het 3-lagen model binnen ASP.NET (DAL BLL en PL)
– layout voor le clos du papoune

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

· Media query viewports met verschillende ordening van de containeronderdelen:
Bij de projectleiding website was het de bedoeling dat de ordening van de artikelonderdelen zou verschillen per css-media-query-viewport. In mijn geval moest het submenu voor de mobile viewport op een andere plaats staan dan de desktop viewport. Ik heb dit opgelost door het submenu 2 keer te plaatsen in mijn html-code. Het scherm zal met behulp van conditional css het eerste submenu tonen in de desktop viewport terwijl het tweede submenu enkel getoond wordt in de mobile viewport.

· Efficiëntie: uitdenken cms pagina’s:
Voor het uitdenken van de cms pagina’s was ik direct begonnen in de code. Dit bleek niet zo goed te werken en heb ik de pagina’s uitgetekend op papier met de gekoppelde functionaliteiten en doorverwijzingen. Ook het uitprinten van de databank bleek achteraf een enorme hulp te zijn.

· Databank tabellen aanpassen:
Vorig jaar bij het vak asp.net heb ik bij het aanmaken van de databank enorm veel tijd verspild bij de databank. Wanneer ik een tabel na het opslaan wou aanpassen gaf deze een foutmelding en heb ik de tabel steeds opnieuw aangemaakt. Mijn collega heeft wat in de settings zitten sleutelen waardoor Visual Studio voortaan wel aanpassingen toelaat op bestaande databank tabellen.

Wat heb ik deze week geleerd?

· Leren werken met conditional css als oplossing voor viewport-friendly design.

· DAL BLL PL opgefrist

· C#: MaintainScrollPositionOnPostback=”true” voor wanneer men dezelfde paginapositie na het klikken van een asp control wilt behouden

· Databanken: bestaande databank tabellen in visual studio aanpassen

Drie kernwoorden van deze week:
· CMS
· 3-tier architecture
· C#

Logboek:

logboek_week_5

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

Week 2

Image

De tweede week verliep naar mijn beleving sneller en efficiënter dan de eerste week. Zo moest ik bijvoorbeeld niet elke keer meer vragen waar -en hoe en kon ik al beter zelfstandig werken dan de week voordien. Af en toe wou het toetsenbord nog wel eens verspringen van azerty naar qwerty maar voor de rest verliep alles zeer vlot.

Deze week heb ik in overleg met mijn collega’s de structuur en lay-out verder uitgewerkt voor de detailpagina’s van de artikelen die op de website zouden komen. Hierbij zochten we naar een gepaste uitwerking voor de grote hoeveelheid content die heel erg kan variëren van artikel tot artikel. Na veel overleg en alles op een rij gezet te hebben van alle mogelijke oplossingen hebben we de knoop doorgehakt en zijn we gegaan voor een uitwerking waarbij artikels ook subartikels kunnen bevatten.

Woensdag heb ik de designs van alle pagina’s afgerond en heb ik een pagina herwerkt om deze beter binnen het geheel van de website te doen passen. De bedoeling is dat de website responsive zou worden dus heb ik ook een pagina uitgewerkt in PhotoShop voor smartphones.

Donderdag en vrijdag heb ik mij verdiept in responsive webdesign en de hoofdpagina uitgewerkt volgens deze methode. Hoewel ik voordien gewerkt heb met absolute waarden voor responsive webdesign heb ik voor deze website gekozen om procentueel aan de slag te gaan.

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

• Sticky footer probleem:

De sticky footer is een probleem waar ik nooit eerder heb bij stilgestaan. De bedoeling was om de footer ook beneden te houden helemaal onderaan de pagina wanneer de content van de pagina minder zou zijn dan de lengte van de pagina. Na wat deskresearch heb ik de oplossing gevonden op deze link

• Responsive te werk gaan:

Er zijn veel verschillende methoden voor responsive aan de slag te gaan en volgens mij kan het geen kwaad om te experimenteren met de verschillende methoden. Bij de relatieve aanpak (met procenten) moet ik wel meer kijken of alles proportioneel nog goed in elkaar steekt bij de preview. Wat er wel beter is aan deze aanpak is dat het beter geschaald en afgestemd is voor de verschillende devices (smartphones en tablets).

Wat heb ik deze week geleerd?

• Sticky footer kunnen toepassen

• Jquery + css technieken (bijvoorbeeld eerste letter van een zin in een andere kleur zetten)

• Basis Visual Studio 2013: databank, TFS en de workflow van het programma

Drie kernwoorden van deze week:

• Overleg

• Responsive Webdesign

• Usability

Logboek:

logboek_week_2

 

Week 1

Mijn eerste week zit er al op! Deze week heb ik mij wat kunnen inwerken in de bedrijfsstructuur. Ik heb ook moeten wennen om terug in een Windows omgeving te werken. Zulke zaken moet men duidelijk onderhouden als je enkel gewend bent om met een Mac te werken. Na de bedrijfspresentatie door mijn stagebegeleider kreeg ik een korte rondleiding in het bedrijf en uitleg over allerlei praktische zaken.

Mijn eerste opdracht was direct een opfrisser van webtechnologie en betrof het herschrijven van bestaande flashbanners naar javascript en css. De bedoeling was om deze banners ook werkende te krijgen op tablets en smartphones. Hierbij testte ik voornamelijk in Internet Explorer omdat deze soms moeilijk deed met css3-eigenschappen.

Naast het recoden van banners kreeg ik de opdracht om een bestaande website een nieuwe lay-out te geven. Aan dit project zal ik waarschijnlijk de komende week werken en zal ik de backend mee uitbouwen in ASP.NET.

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

• Cross-browser compatibiliteitsproblemen met css:

Tijdens het werkproces heb ik regelmatig nagegaan hoe de output van de banners was in de verschillende browsers om onnodig werk achteraf te vermijden.

• JavaScript code die niet wilde werken:

Soms wordt de geschreven code te complex tot je er zelf niet meer aan uit kunt en is het beter om een stap terug te zetten. Stack-overflow en fora waren de perfecte plaats om te lezen hoe andere mensen met een gelijkaardig probleem een oplossing hebben gevonden.

• Het overplaatsen van folders met subfolders tussen verschillende psd-files:

Hier heb ik lang achter zitten zoeken voor ik wist wat het probleem uiteindelijk was. Het probleem was te wijten aan het feit dat PhotoShop maar tot een beperkt aantal niveaus kan gaan op vlak van subfolders. Ik heb dan gekozen om met de kleurcodes te werken binnen PhotoShop, bepaalde layers samen te voegen en pagina’s in verschillende psd’s te bewaren.

• De AZERTY-QWERTY switch is zeer irritant!

Wat heb ik deze week geleerd?

• Hoe het bedrijf structureel in elkaar zit (databanken, server, designs, beeldmateriaal)

• Photoshop vaardigheden bijgeleerd om productiever te kunnen werken

Drie kernwoorden van deze week:

• Cross-browser

• Flash

• PhotoShop

Logboek:

logboek_week_1

flash-dead