In het begin van mijn stageperiode heb ik voor het bedrijf veel op het gebied qua vormgeving gedaan en op beide het gebied van Photoshop en Illustrator. In het begin had ik aangegeven het liever niet te doen maar ben samen met het bedrijf in overeenkomst gegaan om het toch te maken aangezien ze het graag gemaakt wouden hebben.

Ik heb twee verschillende websites voor het bedrijf gemaakt als we het hebben over designs.Ook heb ik het logo van ASDWire opnieuw vormgegeven. Verder ben ik er zeer blij mee dat ik de designs toch voor het bedrijf gemaakt aangezien ik mijzelf er weer redelijk veel vormgeving ervaring heb opgedaan.

Ook heb ik redelijk wat gebruik gemaakt van de nieuwe HTML5 script taal die ik op alle pagina’s van de ASDWire website heb toegepast. HTML5 nam ik zeer snel in mezelf op maar kwam wel bij de conclusie dat HTML5 het redelijk moeilijk heeft als je het hebt over oudere browsers (IE 7/8). HTML5 zal waarschijnlijk over een aantal jaar pas de normale standaard zijn op het internet.

Van PHP en MySQL is helaas niks gekomen in mijn stageplek aangezien het bedrijf niet in PHP programmeert maar de ASP en ASP classic taal gebruikt voor de programmering van hun websites. ASP was voor mij een zeer nieuwe taal en snapte soms niet helemaal hoe het nou precies in elkaar zat maar leerde het na enkele weken al snel begrijpen. Elke programmeer taal is bijna het zelfde alleen de syntaxen die gebruikt worden zijn verschillend.

De link herschrijvingen gingen mij ook zeer goed af. Ik heb bij het bedrijf geleerd hoe het .htaccess bestand nou precies werkt en heb dit vervolgens thuis ook toegepast op een aantal van mijn eigen projecten.

Ik heb deze stage weer redelijk veel geleerd en ben er achter gekomen dat je nooit klaar bent met leren. Ik ben blij dat ik bij dit bedrijf terecht ben gekomen, en hoop ook dat zij insgelijks denken.

Daarna heb ik een klusje gekregen om Media Contacten van bedrijven te vinden die nieuws publiceren en of daar iets mee te maken hebben. Zij zullen belangrijk nieuws doorsturen naar betreffende afdelingen die hier mee te maken hebben (Aerospace , Defense / IT of overige markten). Dit klusje is het laatste klusje waar ik mee bezig zal zijn voordat mijn stage eindigt. Hiernaast staat een voorbeeld van de Media Contacten lijst.

In de laatste week van Januari heb ik nog een geanimeerde banner gemaakt die met de nieuwsbrief mee wordt gestuurd. Bij deze banner was het belangrijk dat de tekst even stil stond in beeld en het asdwire logo er in schoof. De locatie waar de banner in komt te staan is te bezichtigen op het nieuwsbrief voorbeeld.

De banner bevat 40 frames intotaal en het .gif bestand is ongeveer 50kb (richtlijn 40kb vanwege de tien duizenden emails die verstuurd worden). Ik heb het met verschillende programma’s geprobeerd maar het lukte pas bij het gebruiken van de Photoshop Animatie functie die twee verschillende opties heeft. De eerste 39 frames worden binnen 0,05 seconden getoond na elkaar en de laatste blijft 2 seconden stil staan.

Het uit eindelijke ontwerp van de banner heeft me niet lang geduurd. Met de 3D rotatie tool in photoshop kan je het ontwerp draaien en zo kan je de voorkant op de gewenste manier positioneren.

Het begon met de opbouw van de paginas, dat verliep redelijk lekker alleen heeft wel eventjes geduurd voordat het eindelijk klaar was i.v.b.m. de hoeveelheid pagina’s die er op de bestaande pagina aanwezig waren. Ik heb als een van de eerste pagina’s de Nieuwsberichten pagina gemaakt waar alle persberichten van de grote bedrijven staan na plaatsen en goedkeuring vanuit het bedrijf zelf.

Verder kunnen de persberichten ook doorgestuurd worden en eventueel ook uitgeprint. Bij het printen van deze artikelen wordt alle overige informatie weg gehaald en blijft alleen het artikel nog over.

Ook is de email ook anders opgemaakt als de nieuwsbrief pagina aangezien emails alleen op een bepaalde manier opgemaakt kunnen worden (met HTML Tables). Email berichten worden verstuurd met een mailserver en staat daarom helemaal los van hoe een browser een pagina interperteert. Hier onder staat een voorbeeld van hoe een doorgestuurd persbericht aankomt in een e-mail programma zoals “Apple Mail”.

Ik had niet verwacht dat het moeilijk werd van inprencipe is mailen gewoon nog html van lang geleden. Een mail stijl je ook heel anders dan een website en wordt opgebouwd in tables. Verder had ik in het begin wel weer redelijk moeite met debuggen omdat je niet kan zien wat je fout doet in een browser zoals internet explorer 7/ 8 en bij een browser als IE6 wordt het al vaker nog veel lastiger. Het is logische nadenken en meestal zijn het de simpelste oplossingen, bij ASDWire had ik hier gelukkig weinig last van.

Ook heb ik enkele jquery effecten in de website gemaakt om de website een beetje interactiever te laten doen lijken dan wat hij is. Waaronder een effect wat je ziet als je uitlogt (hier te bekijken), ze wouden graag dat het blokje automatische zou verdwijnen inplaats van dat je hem weg moest clicken. Overigens is het menu gemaakt met JQuery (Javascript extensie) en in de homepagina zit nog een functie die later in gebruikt genomen gaat worden voor recensie quote’s van bedrijven.

Ook heb ik iets handigs geleerd voor Zoekmachine Optimalisatie en dat is het rewriten van URL’s via de .htaccess bestanden. die zich in de home directory van je server moet bevinden. Een voorbeeld hiervan dat de bestaande URL van de website word herschreven naar de gewenste naam.

https://www.chipbuddy.nl/winkel/bekijk-product?kleur=zwart

https://www.chipbuddy.nl/winkel/bekijk-product/zwart/

De vetgedrukte link is het bestandsnaam een bestandslocatie op de server en hoe je hem via de programmeer taal zou aanroepen. De onderste niet vetgedrukte is de herschreven link wat simpelweg met enkele regel in het .htaccess bestand al wordt gedaan.

RewriteRule ^winkel/bekijk-product/(.*)/ /winkel/bekijk-product.php?kleur=$1

De laatste week voor de kerstvakantie heb ik de Website zo ongeveer volledig afgerond. In de kerstvakantie zijn we woensdag nog even naar het bedrijven gegaan om de website Live online te zetten en dus van de TEST site op de Officiële site.

Dit keer verliep het process vele malen beter als in het begin van mijn stage periode. Ik was alweer helemaal gewend aan het doorwerken en goed functioneren. Binnen twee dagen had ik voor het bedrijf enkele logo’s gemaakt en een template die al direct bij het bedrijf in de smaak viel. Hier was ik natuurlijk erg blij mee vanwege het feit dat het veel tijd zou besparen.

Het volgende ontwerp is het laatste ontwerp voor het Logo en ook het nieuwe definitieve logo. Het design verliep dit keer zeer goed en met veel overleggen d.m.v. goed contact hadden we binnen 2 dagen al een design voor verschillende pagina’s. Na enkele kleine aanpassingen kwamen we uit op het volgende design

Na anderhalve dag had ik het design en het logo al helemaal klaar en de aanpassingen waren uitgewerkt en opgelost. De bedoeling van de website was nog wel dat het zakelijk bleef. Ik heb er dus een klein beetje interactie ingestopt en heb enkele javascript toepassingen bij de website aangebracht zoals een dropdown menu en nog wat andere functies voor de gebruikers.

Helaas was er even een tegenslag. Dat ik de websites ging testen in internet explorer 7 en 8 werkten de websites niet helemaal optimaal dus ben deze gaan debuggen en kijken hoe ik dit probleem kon oplossen. Het probleem was vrij simpel en dat was dat oudere browsers de nieuwere HTML5 tags niet pakten vanwege het feit dat ze onbekend voor die browsers waren en je ze nooit correct er in geprogrammeerd kan krijgen met wat voor addons of iets dan ook voor IE dus hebben wij besloten het niet helemaal te optimaliseren in HTML5 zoals aangegeven eerder bij een voorbeeld. In mijn derde week van de tweede maand had ik alle pagina’s omgezet naar HTML5 en alles moest alleen nog in ASP omgezet worden, geen probleem dus dacht ik zo.

In de tussentijd heb ik steeds de website een beetje bijgehouden met het debuggen van Internet Explorer 7/8 in de tijden dat een van hun werknemers (Frank) tevens ook student aan een Universiteit er niet was. Ook ben ik begonnen met de HTML pagina’s om te zetten naar ASP, deze programmeer taal was toen nog redelijk onbekend voor mij en wist ook niet echt dat het nog veel in gebruik werd. De homepagina was de eerste uitdaging en al gauw begon in het een beetje te snappen. Mijn tweede maand zat er alweer op en ik had ondertussen al weer veel bij ASDMedia geleerd.

Het bedrijf is de tussenpersoon voor de media en heeft velen contacten. Naast hun Nieuws website (ASDNews.com) heeft het bedrijf nog enkele andere soorten sites die uiteindelijk allemaal gedeeltelijk op elkaar aanvullen. De eerste week van mijn stageperiode moest ik onderzoek gaan doen naar een van hun websites genaamd ASDSource.

Wat ik bij dit project moest gaan doen was kijken naar de vormgeving, de usability (functionaliteit) en naar hoe ik dit project voor hun ging verbeteren. Vormgeven was iets waarvoor ik niet graag naar een nieuwe stage zou gaan en wou er het liefst ook niets mee te maken hebben. Dit heeft mij redelijk wat tijd gekost vanwege het feit dat ze alles rustig op zijn tijd door mij wouden laten ontwikkelen.

Ik ben met deze informatie een week later na mijn onderzoek aan de slag gegaan voor de vormgeving en heb enkele verschillende templates voor het bedrijf gemaakt. Ze wisten nog niet precies wat ze wouden dus ben ik er vanuit gegaan dat ze een beetje dezelfde kleuren en stijlen in hun nieuwe website wouden hebben. Ik ben toen met de vormgeving aan de slag gegaan en heb de volgende templates gemaakt

Het bedrijf was nog niet helemaal tevreden over de kleur, Indeling en opzet van de template. Zo doende ben ik met het design verder gegaan om te kijken wat wel precies bij het bedrijf aansloot. Ik heb hier een beetje verschillende kleurstellingen gemaakt zodat ze een overzicht hadden van wat ik allemaal gemaakt had. Als eind conclusie hebben ze mijn laatste template uitgekozen en deze mocht ik vervolgens gaan omzetten naar de nieuwe HTML5 taal (nieuwe extensies op HTML4).

Op het internet valt veel handige informatie te vinden over wat HTML5 precies inhoudt en hoe je het correct gebruikt tijdens het programmeren. De oudere browsers Internet Explorer 6/7/8 etc. zijn nog niet helemaal geïntegreerd met de nieuwe HTML5 dus zijn er enkele trucjes hiervoor om dit wel te laten werken. Op google vond ik een zeer handige stukje over HTML5 wat jou leert HTML5 te gebruiken en hoe je het in de oudere browsers kan optimaliseren.

Aan het einde van de eerste Maand begon ik met de Template te bouwen in HTML5, Dit was voor mij ook nog een nieuwe HTML taal en had hier zelf nog niet echt mee gewerkt behalve het ‘User Framework’ van mijn vorige stage, overigens ook in HTML5 geprogrammeerd Hier staat een voorbeeld van hoe HTML5 werkt. Ik heb deze bron overigens ook voor een van mijn nieuwe stageprojecten toegepast met redelijk goed succes. De laatste uitgewerkte template was bijna klaar, en is te bekijken op het test gedeelte.