Plan van aanpak. Persoonlijke website. Martijn de Graaf

Plan van aanpak Persoonlijke website Martijn de Graaf

Klas: Datum: Naam opdrachtgever: Naam organisatie: Naam opdrachtnemer:

BIM01 23 september 2013 Mvr C. Paul, Mvr E.Leen Hogeschool Inholland Alkmaar Martijn de Graaf [email protected]

Plan van aanpak

Een persoonlijke website

Inhoudsopgave 1. Achtergronden 1.1. Algemeen 1.2. Afdelingen 1.2.1. Afdeling Beeldbewerking 1.2.2. Afdeling HCI 1.2.3. Afdeling Projectorganisatie 1.2.4. Afdeling XHTML CSS HTML5

4 4 4 4 4 4 4

2. Projectopdracht 2.1 SMART analyse

5

3. Projectactiviteiten 3.1. Vergadering 3.2. Plan van aanpak 3.3. Bezoekerswebsite 3.4. Communicatie 3.5. Oplevering

6 6 6 7 7

4. Projectgrenzen/randvoorwaarden 4.1. Wat wordt er wel gemaakt 4.2. Wat wordt er niet gemaakt

8 8 8

5 6

5. De producten 5.1. Plan van aanpak 5.2. Wireframe 5.3. Moodboard 5.4. Navigatie/menu-‐structuur 5.5. Concept website 5.6. Website codering 5.7. Home pagina 5.8. Persoonlijke pagina 5.8.1. Werk pagina 5.8.2. Opleiding pagina 5.8.3. Hobby’s pagina 5.9. Portfolio pagina 5.10. Contact pagina 5.11. De website

9

5.12 Het interviewverslag

9 9 9 9 9 9 10 10 10 10 10 10 11 11 11

6. Kwaliteit 6.1. Kwaliteit tussenproducten 6.2. Kwaliteit eindproducten

12 12

7. Projectorganisatie 7.1. Projectleden 7.2. Communicatie 7.3. Urenverantwoording 7.4. Vergaderfrequentie

13 13 14 14 14

8. Planning 8.1 Activiteiten

15 15

9. Kosten en baten 9.1. Kosten 9.2. Baten

16 16

12

16

2

Plan van aanpak


10. Risico’s 10.1. Bedreigingen 10.2. Kans

17 18

11. Bijlage 11.1 Bijlage A: Strokenplanning

19

17

19

3

Plan van aanpak

1.


Achtergronden

1.1. Algemeen Het project zal “Een persoonlijke website” genoemd worden. Dit project wordt in naam van Inholland Alkmaar uitgevoerd. De opdrachtgever is Mevrouw C. Paul. Het is de bedoeling dat er een persoonlijk website ontwikkeld wordt door de desbetreffende studenten. Dit moet een portfolio worden met informatie over de student zelf, deze is “vrij” in de opmaak en indeling hiervan. De opdrachtnemer van dit project is Martijn de Graaf. Martijn is tevens ook de projectleider.

1.2. Afdelingen Bij dit project zijn bij Inholland Alkmaar de volgende afdelingen betrokken, deze bieden informatie/input voor een succesvol eindproduct. • Afdeling Beeldbewerking • Afdeling HCI • Afdeling Projectorganisatie • Afdeling XHTML CSS HTML5 1.2.1. Afdeling Beeldbewerking Deze afdeling voorziet de student van voldoende kennis over het gebruik van Adobe Photoshop. Deze lessen worden aangeboden door Dhr J. Tieben. 1.2.2. Afdeling HCI Deze afdeling voorziet de student van voldoende kennis over het plannen en opzetten van interactie tussen mens(users) en computer. Deze lessen worden aangeboden door Mvr C. Paul 1.2.3. Afdeling Projectorganisatie Deze afdeling voorziet de student van voldoende kennis over het projectmatig werken, plannen, pva’s schrijven en andere vaardigheden die de student nodig heeft om projectmatig te kunnen werken. Deze lessen worden aangeboden door Mvr E. Leen 1.2.4. Afdeling XHTML CSS HTML5 Deze afdeling voorziet de student van voldoende kennis om succesvol de website te kunnen programmeren door middel van drie programeer talen, dit zijn: • XHTML • CSS • HTML 5 Met deze drie programmeertalen dient de student zijn website tot een succesvol eindproduct op te leveren. Deze lessen worden aangeboden door Dhr T. Boode.

4

Plan van aanpak


2.

Projectopdracht

2.1

SMART analyse

De projectopdracht “Een persoonlijke website” bevat een website ontwerpen die centraal staat voor de student zelf. “Onbekenden personen” zullen via deze manier een indruk krijgen met wat voor persoon zij te maken hebben. Doormiddel van een SMART analyse zal dit duidelijke geformuleerd worden.

S(pecifiek)

Het maken van een persoonlijke website met daarop informatie over de desbetreffende student, deze website zal verschillende pagina’s bevatten (Home, Opleiding, Werk, Hobby’s, Portfolio en Contact). Deze website wordt in opdracht van mevrouw C. Paul worden ontwikkeld.

M(meetbaar)

“een kijkje bieden” in het leven van de student, wat houdt hem/haar bezig, heeft hij/zij werk, heeft hij/zij hobby’s.

A(anwijsbaar)

Alle studenten dienen hun eigen website te maken, dit is een individueel project.

R(ealistisch)

De website geeft een weergave van de student.

T(ijdgebonden) Op 4 november zal het project afgerond zijn en zal dit gepresenteerd worden in de daarvoor beschikbare uren. Hierboven is beschreven wat het project inhoudt, of het haalbaar is, wie het gaan doen, of het uitvoerbaar is en de eindtijd waarop het project afgerond en ingeleverd moet zijn. 4 november zal de website gepresenteerd worden aan de aanwezige docenten en zal gekeken worden of het project succesvol is afgerond.

5

Plan van aanpak

3.


Projectactiviteiten

In dit hoofdstuk worden de activiteiten besproken die betrekking hebben op de ontwikkeling van de website en wat uitgevoerd tijdens dit project.

3.1. Vergadering 1. Eerste gesprek met de opdrachtgever • • •

Mogelijkheden en voorbeelden bespreken; Huidige situatie bespreken; Uitwisselen van persoonlijke gegevens en informatie voor de website.

2. Verdiepingsgesprek met de opdrachtgever • • • •

Bespreken plan van aanpak; Bespreken wensen voor de website; Aantekeningen maken; Schetsen maken voor de lay-out.

3. Afronding onderzoek • •

Bespreken persoonlijke website; Goedkeuring voor oplevering.

3.2. Plan van aanpak 1. Eerste versie plan van aanpak schrijven • • •

Gegevens verzamelen en bestuderen; Gegevens verwerken in het plan van aanpak; Verslag sturen naar de opdrachtgever;

3.3. Bezoekerswebsite 1. Basis voor de website ontwikkelen • • •

Bestuderen aangeleverde gegevens; Aantal voorbeelden van lay-outs maken voor de opdrachtgever; Juiste indeling maken.

2. De website • • • • • • • • • • • • • • •

Wireframe ontwikkelen; Moodboard ontwikkelen; Navigatie/menu-structuur ontwikkelen; Concept website ontwikkelen; Concept website goed laten keuren; Het ontwikkelen van de Home pagina; Het ontwikkelen van de Persoonlijke pagina; Het ontwikkelen van Werk pagina; Het ontwikkelen van de Opleiding pagina; Het ontwikkelen van de Hobby’s pagina; Het ontwikkelen van de Portfolio pagina; Het ontwikkelen van de Contact pagina; Website ontwikkelen; Opgeleverde pagina’s versturen naar de opdrachtgever voor controle; Testfase.

6

Plan van aanpak


3. Interviewschema • • • • •

Persoon uitzoeken die je wilt interviewen; Contact leggen met deze persoon; Afspraak maken wanneer interview plaatsvind; Vragen voorbereiden die gesteld worden; Interviewschema inleveren bij E. Leen.

4. Interviewverslag • • • • • • •

Voorbereidingen treffen voor het interview; Bij de geïnterviewde langsgaan op locatie; Interview afnemen; Interview digitaliseren; Geïnterviewde interview terug laten lezen; Eventueel aanpassingen maken; Interviewverslag inleveren bij E. Leen.

3.4. Communicatie 1. Communicatie met de opdrachtgever • • •

Tijdens het project zal er geregeld gecommuniceerd worden over de status; Communicatie zal plaatsvinden via e-mail of telefonisch; Daarnaast zullen er minimaal 3 bezoeken bij het bedrijf plaats vinden; o 1e gesprek voor introductie; o 2e gesprek voor verdieping; o 3e gesprek voor afronding.

2. Communicatie met het geïnterviewde persoon • • •

Communicatie zal plaatsvinden via e-mail of telefonisch; Afspraken zullen ingepland worden in de agenda’s zowel in de agenda van de geïnterviewde als van Martijn. Na het interview zal de geïnterviewde eerst een kopie toegezonden krijgen voor eventuele aanpassingen.

3.5. Oplevering • • • •

Feedback verwerken; Website opleveren; Presentatie voorbereiden Eindpresentatie houden (4 november).

7

Plan van aanpak

4.


Projectgrenzen/randvoorwaarden

Het is voor het project belangrijk dat er exact duidelijk is wat er wel en niet bij het project horen. Met behulp van deze projectgrenzen/randvoorwaarden wordt het project afgebakend. Het is belangrijk om twee zaken af te vragen: • Hoe ver gaat het project? (“lengte”) • Wat valt er niet bij het project?(“breedte”) Om latere problemen te voorkomen zullen deze op papier gezet worden dat beide partijen hiermee akkoord zullen gaan en achteraf niet hierover in conflict met elkaar kunnen gaan.

4.1. Wat wordt er wel gemaakt 1. Plan van aanpak; 2. Wireframe; 3. Moodboard; 4. Navigatie/menu-structuur; 5. Concept website; 6. Website codering; 7. Website layout; 8. Home pagina; 9. Persoonlijke pagina; 9.1. Werk pagina; 9.2. Opleiding pagina; 9.3. Hobby’s pagina; 10. Portfolio pagina; 11. Contact pagina.

4.2. Wat wordt er niet gemaakt 1. 2. 3. 4.

Mogelijkheid om zelf pagina’s toe te voegen; Mogelijkheid om zelf de lay-out aan te passen; Meerdere pagina’s te registreren; Statistiekenpagina.

8

Plan van aanpak

5.


De producten

Te vinden in dit hoofdstuk zijn de producten die geproduceerd worden. Onder ieder product staat een korte omschrijving en wanneer deze van toepassing is. Documenten worden ook in dit hoofdstuk gezien als producten.

5.1. Plan van aanpak In dit document staan informatie over het bedrijf, wat de opdracht is, wat het probleem is en hoe de opdracht uitgevoerd zal worden. Dit zal de richtlijn vormen voor het uitvoeren van het project.

5.2. Wireframe Het wireframe is een schematische tekening hoe de website “er ongeveer” uit gaat zien, hier wordt nog weinig aandacht aan details besteed. Hier gaat het eigenlijk alleen om de indeling van de website, wat de opbouw is, waar welk element moet komen.

5.3. Moodboard De website moet voorzien zijn van een bepaalde style, dit wordt ook wel de huis style genoemd. Door middel van een huis style krijgt de eind gebruiker een “look & feel” bij de website. Door middel van een mood board is het mogelijk om een bepaalde sfeer te creëren voor de website. Denk hierbij aan bijvoorbeeld een zakelijke style of een hele vrolijke style.

5.4. Navigatie/menu-‐structuur Belangrijk is dat de eind gebruiker, van elke leeftijd begrijpt hoe de website werkt en zich hier gemakkelijk doorheen kan navigeren. Door middel van een overzichtelijke navigatie/menu-structuur is dit mogelijk.

5.5. Concept website Uiteindelijk dient er een website opgeleverd te worden maar voor het zover is wordt er eerst een concept gemaakt. Dit maakt het mogelijk om het te laten controleren door de opdrachtgever en eventueel nog aanpassingen te maken. De concept website zal in Adobe Photoshop worden ontworpen en (net als bij het wireframe) een tekening zijn van hoe het “er ongeveer” uit ziet, met het verschil dat hier wel aan details gewerkt wordt.

5.6. Website codering Achter elke website draait een gecodeerd bestand, dit wordt ontworpen in drie programmeertalen, dit zijn: XHTML, CSS & HTML5. Dit is de broncode van de website.

9

Plan van aanpak


5.7. Home pagina De eindgebruiker zal ontvangen worden op deze pagina, hier staat een welkomsttekst en de volgende attributen: • Logo; • Introductie tekst, welkom ’s tekst; • Een eventuele foto van de persoon zelf. Dit zou later eventueel uitgebreid kunnen worden, mocht dit het geval zijn wordt het in dit document bijgewerkt.

5.8. Persoonlijke pagina “Persoonlijk” is de pagina met 3 sub pagina’s. Het idee hierachter is dat de eindgebruiker op deze komt en dan zowel via de content als via het menu verder een keuze kunt maken uit één van de drie volgende subcategorieën: “Werk, Opleiding, Hobby’s”. Wat er sowieso op deze pagina weergeven wordt: • Persoonlijke info over de persoon in kwestie(waar de website van is); • Een foto van de persoon zelf . 5.8.1. Werk pagina Via deze pagina wordt er informatie gegeven over het werk wat de desbetreffende student uitoefent. De “Werk” pagina bevat de volgende informatie: • Informatie over het werk; • Functie(om)beschrijving. 5.8.2. Opleiding pagina Ook de huidige opleiding is van groot belang en zal daarom ook niet ontbreken onder de kop “Persoonlijk”. Hierin zal het volgende beschreven worden: • Informatie over de opleiding; • Welke huidige opleiding gevold wordt; • Eventueel wat er na de opleiding mee gedaan wordt. 5.8.3. Hobby’s pagina Tot slot van de “Persoonlijk” pagina, iedereen heeft wel één of meerdere “Hobby’s” deze zullen dan ook onder de laatste sub pagina worden teruggevonden op de website. Deze pagina bevat: • Informatie over de hobby(‘s) die de persoon in kwestie uitoefent; • Eventueel plaatjes of foto’s om het wat “levendig” en minder statisch te maken.

5.9. Portfolio pagina Deze pagina zal inhoud bevatten wat de desbetreffende student al ontwikkeld heeft, binnen of buiten zijn/haar studie. Dit is te vergelijken met een gallerij.

10

Plan van aanpak


5.10. Contact pagina Mocht een eindgebruiker contact willen opnemen met de desbetreffende student is dit mogelijk via deze pagina. Hier zal het email adres vindbaar zijn evenals een koppeling naar de Twitter &/of Facebook pagina van de student.

5.11. De website Al deze pagina’s bij elkaar gevoegd projecteert een persoonlijke website van de student. Dit is tevens het eindproduct waar de opdrachtgever naar heeft gevraagd en de opdrachtnemer naartoe heeft gewerkt.

5.12 Het interviewverslag In dit verslag zal een interview staan met een persoon uit het bedrijfsleven die ervaring heeft met ICT & management. In dit verslag zijn terug te lezen welke vragen aan diegene gesteld worden en zijn/haar antwoorden hierop. Tevens zal dit interviewverslag ook op de website geplaats worden onder het kopje “Portfolio”.

11

Plan van aanpak

6.


Kwaliteit

Het hoofdstuk kwaliteit, daarin wordt besproken hoe de kwaliteit gecontroleerd en gegarandeerd kan worden van alle producten dus ook van de tussenproducten die opgeleverd worden. De opdrachtnemer en de opdrachtgever zullen het product uitvoerig testen en controleren of ze voldoen aan de eisen die gesteld zijn in dit document. De opdrachtnemer zal dit vanuit de technische kant doen en de opdrachtgever vanuit de functionele kant.

6.1. Kwaliteit tussenproducten Wanneer er een onderdeel afgerond zal zijn, zoals een pagina, zal deze doorgestuurd worden naar de opdrachtgever zodat deze het kan testen en eventueel kan voorzien van feedback. Deze feedback kan vervolgens weer worden verwerkt in een nieuwere versie van dit onderdeel.

6.2. Kwaliteit eindproducten Het eindproduct wordt gevormd door de website. Het plan van aanpak vormt hiervoor de basis. Voordat dit opgeleverd wordt zal het besproken worden met de opdrachtgever en zoveel mogelijk feedback verwerken voor de definitieve oplevering. Bij elke fase zal contact worden opgenomen met de opdrachtgever, dit om deze op de hoogte te houden en om mogelijke misverstanden te voorkomen.

Act

Check

Plan

Do

12

Plan van aanpak

7.


Projectorganisatie

Inholland Alkmaar is de organisatie waarvoor het project wordt ontwikkeld, de desbetreffende afdelingen zijn: HCI, Beeldbewerking, XHTML CSS HTML5 & Projectorganisatie. Al deze afdelingen hebben betrekking tot het project “Een persoonlijke website”.

Inholland HCI

XHTML CSS HTML5

Beeldbewerking

Projectorganisatie

Project "Een persoonlijke website"

7.1. Projectleden Dit project wordt mede mogelijk gemaakt door Inholland Alkmaar. Het project bevat de volgende projectleden: Naam: Mvr C. Paul

Email: [email protected]

Functie: Opdrachtgever

Mvr E. Leen

[email protected]

Ondersteunende functie projectorganisatie

Dhr J. Tieben

[email protected]

Ondersteunende functie beeldbewerking

Dhr A. Pot

[email protected]

Ondersteunende functie XHTML CSS HTML5

Dhr M. de Graaf [email protected] Opdrachtnemer

13

Plan van aanpak


7.2. Communicatie Door middel van email, telefoon en vergaderingen is het contact geregeld tussen de opdrachtgever en de opdrachtnemer. Mochten er enige “problemen” zich voordoen kan de opdrachtnemer direct contact opnemen met de opdrachtgever, ook kunnen de ondersteunende functies snel worden gecontacteerd mocht dit nodig zijn.

7.3. Urenverantwoording Dit wordt geheel verduidelijkt in de planning, mocht de opdrachtgever hier vragen over hebben kunnen deze altijd gesteld worden en in overeenstemming met de opdrachtnemer dit aanpassen.

7.4. Vergaderfrequentie Er is voorlopig een enkele maal vergaderd om de vooruitgang van het project vast te stellen, dit kan eventueel meer worden naarmate de deadline genaderd wordt. Zowel de opdrachtgever als opdrachtnemer kunnen snel bereikt worden mocht er een spoedvergadering over de gang van zaken nodig zijn.

14

Plan van aanpak

8.


Planning

De planning wordt als bijlage bijgevoegd voor een duidelijk beeld hiervan. Mochten er onduidelijkheden zijn kan dit altijd nog verduidelijkt worden. Er is met plannen uitgegaan van ongeveer een week bij elke activiteit, dit vanwege de lessen maar ook van goedkeuring van activiteiten. Hieronder zal in het kort opgesomd worden hoe deze er uitziet.

8.1

Activiteiten

1. • • • • •

Plan van aanpak Verzamelen van informatie; Contact / bespreken met de opdrachtgever; Concept plan opstellen; Eventuele feedback verwerken/aanpassen; Opleveren Plan van Aanpak.

• • • • •

Vormgeven website Wireframe tekenen; Wireframe digitaliseren; Mood board ontwikkelen; Foto’s eventueel bewerken; Concept website ontwikkelen.

2.

3.

Navigatie/menu-structuur • Navigatie/menu-structuur bedenken; • Navigatie/menu-structuur uittekenen; • Navigatie/menu-structuur digitaliseren.

4.

Invoegen van externe documenten Interviewschema invoegen; Wireframe invoegen; Moodboard invoegen; Navigatie/menu-structuur invoegen;

• • • • 5.

6.

7.

Website coderen • HTML code definiëren; • CSS code definiëren; • Bugfixes.

• • •

Testen Testen van de code; Testen van de grafische elementen; Opdrachtgever laten testen.

Opleveren • Website opleveren; • Presenteren. 15

Plan van aanpak

9.


Kosten en baten

Een niet geheel onbelangrijk overzicht van het project. De kosten en baten. Wat wordt er uitgegeven en wat is het nut hiervan. Het is lastig in te schatten wat de opbrengsten zullen zijn. Hieronder een schatting van de verwachte kosten en baten.

9.1. Kosten Inzet is al een onderdeel van de kosten dit project, denk hierbij aan voorbereiding, informatie vergaren, een plan van aanpak schrijven. Ook daar zitten kosten aan. Onder andere tijd en persoonlijke energie. Ook valt onder kosten het collegegeld voor school, dit om lessen te volgen en advies te vragen aan de docenten die tevens als ondersteunende functie fungeren. Software is ook nodig om dit project tot een goed einde te brengen, het Adobe pakket is een must , hieronder vallen Photoshop, Illustrator, Indesign en Dreamweaver. Ook een Office pakket is noodzakelijk, voor tekstverwerking met Word, presentaties met PowerPoint en het werken met Spreadsheets in Excel.

9.2. Baten Door dit project wordt er kennis vergaard wat in latere projecten weer van pas kan komen maar denk ook aan een eventuele baan. Door middel van deze website zal de student ook makkelijk online gevonden worden en wat er al eerder genoemd werd is het mogelijk dat een toekomstige werkgever contact met de student kan opnemen. Aan dit project zitten ook studiepunten verbonden. Als de desbetreffende student deze met succes afsluit betekend het dat hij/zij deze studiepunten heeft vergaard en weer een stap dichter bij een diploma. De kosten en baten worden hieronder voor de duidelijkheid nog weergegeven: Kosten Χ Inzet Χ Collegegeld Χ Adobe pakket Χ Office pakket

Baten ! Kennis ! Ervaring ! Studiepunten ! Eventuele baan

16

Plan van aanpak


10. Risico’s Dit wordt ook wel gezien als de kansen en bedreigingen van dit project. Er zijn voor de website zowel kansen als bedreigingen.

10.1. Bedreigingen Concurrentie Een mooie website valt bij iedereen op, zo ook bij de concurrent. Het kan voorkomen dat deze dan ook zorgt voor een identieke website. Dit om van het succes mee te profiteren. Server problemen Er kunnen zich problemen voordoen met de server, dit kan betekenen overbelasting of zelfs uitval hiervan. De website zal dan tijdelijk niet bereikbaar zijn waardoor het aantal bezoekers snel achteruit zal gaan. Out of date Bijhouden van een website is een must. Dit is toch één van de visitekaartjes, als deze dan oud of niet bijgehouden wordt komt er een statisch beeld van de desbetreffende persoon. Dit wil niemand hebben want iedereen is zich bewust van het tijdperk waar we in leven en dat vernieuwing een grote rol hierin speelt. Ziekte Iedereen wordt wel is ziek, dit is toch een bedreiging voor het project. Door een klein griepje kan het project een x aantal weken uitgesteld worden omdat zowel de opdrachtgever als opdrachtnemer weinig kunnen doen dan behalve goed uitzieken en veel rusten.

17

Plan van aanpak


10.2. Kans Vernieuwend concept De consument zal direct geïnteresseerd zijn als de website “anders” is als die van de rest. Een vernieuwend concept speelt hierbij een belangrijke rol. Als er van de standaard bouw wordt afgeweken, de klant zou dit snel opmerken. Blijft deze langer op de website, dit omdat het “nieuw” is. Populair bij google Websites die niet op de eerste 5 zoekpagina’s staan van google zijn eigenlijk al afgeschreven, omdat google een grote rol speelt is het belangrijk dat de website zo snel, zo hoog mogelijk terecht komt. Consumenten zullen toch vaak de bovenste website aanklikken als er gezocht wordt op een bepaalde term. Uitstraling Veel websites zullen een amateuristisch indruk achterlaten bij de consument, dit kan een kans zijn voor de website die wij gaan ontwikkelen. Als er gezorgd wordt voor een professionele “look & feel” zal de klant zich direct thuis voelen en geboeid blijven. Kans op werk Het kan zijn dat de website meteen opvalt bij grote bedrijven, deze kunnen dan interesse in de desbetreffende student hebben en zullen dan ook hun best doen deze voor zich te winnen.

18

Plan van aanpak


11. Bijlage 11.1 Bijlage A: Strokenplanning

19

Plan van aanpak. Persoonlijke website. Martijn de Graaf

Recommend Documents