ACME webwinkeltje

In deze periode werk je de website met webwinkeltje met producten van het merk ACME. Je werkt in tweetallen. Je gebruikt hier voor je technische kennis op het gebied van HTML/CSS, JavaScrript en PHP.

Inleiding

Acme is een naam die in het Engelse taalgebied wordt gebruikt voor een Fictief rechtspersoon of bedrijf, wanneer men zo'n naam nodig heeft in een voorbeeldgeval. Dit gebeurt bijvoorbeeld bij juridische kwesties. De naam wordt vergelijkbaar als de fictieve persoonsnaam John Doe gebruikt.

Toen de yellow pages (de Amerikaanse versie van de gouden gids) in Amerika voor het eerst werd uitgegeven, wilden veel bedrijven vooraan in het boek staan. Velen veranderden daarvoor hun naam in Acme (met eventueel de soort dienst die werd uitgevoerd door het bedrijf erachter), aangezien dat vaak op de eerste pagina's van het boek kwam te staan. Er veranderden echter zoveel bedrijven hun naam in Acme, dat het uiteindelijk niet meer serieus werd genomen en men het als een soort grap begon te beschouwen.

Het woord is in algemene kring bekend geworden door de Looney Tunes-tekenfilms van Warner Bros. Pictures|Warner Brothers, in het bijzonder Road Runner en Wile E. Coyote|, maar wordt ook soms in speelfilms van Warner gebruikt.

In deze filmpjes is Acme een fictief bedrijf. Om niet in problemen te komen met het Amerikaanse merkenrecht was het voor het maken van deze Looney Tunes-filmpjes noodzakelijk fictieve bedrijfsnamen te gebruiken voor alle producten die de personages gebruiken. Maar in plaats van voor elk product weer een nieuwe naam te moeten verzinnen, besloten de producers een firma te introduceren die blijkbaar alles produceert wat men maar in de verhalen nodig heeft. Van alledaagse dingen als kleding en tandpasta tot minder gangbare zaken als zakraketten en laserkanonnen, er is niets dat ACME Corporation niet fabriceert. De naam ACME werd bedacht zonder specifieke betekenis. Pas later legde men het woord uit als een backroniem voor A (of American) Company that Manufactures Everything: een (of Amerikaans) bedrijf dat alles vervaardigt.

Wat ga je maken?

Website

Voor het domein ACME.nl ga je een website bouwen. Deze website bevat een webwinkel waar minimaal 12 producten uit het assortiment van ACME verkocht worden.

Een voorbeeld van een dergelijke website vind je op: http://greatsbrand.com

De website opent met een overzicht van alle producten. Per producten kan je vervolgens extra informatie ophalen. De website heeft de volgende items:

·      Productenpagina (Beelden + namen van de producten)

o   Productdetail

• Naam
• Beeld
• Beschrijving
• Specificaties
• Extra: stem / ratingsysteem, leveringstijd, etc.

·      Over ACME

·      Winkelwagen

·      Bestelformulier met inlogsysteem bestaande klant

·      Leveringsvoorwaarden

·      Veel gestelde vragen

·      Contactformulier

Landing page

Naast de website bouw je een landingpage voor 1 product uit de catalogus. Deze pagina is een alternatief voor de homepage en bedoeld om vanuit een advertentie of zoekactie de bezoeker in de sfeer te brengen van dit enkele product.

De hoofdnavigatie mag op deze pagina zijn verborgen of aangepast. Gebruik het volledige browserscherm om de sfeer van het product op de bezoeker over te laten komen.

Voorbeeld:

https://www.google.com/nexus/

Eisen voor de (deel)producten

Functioneel ontwerp

Voordat je start met het realiseren van de website, maak je een functioneel ontwerp. In dit ontwerp leg je vast hoe de website gaat werken, welke informatie waar te vinden is en hoe pagina’s aan elkaar zijn gekoppeld.

Het functioneel ontwerp bestaat uit wireframes, flowchart (sitemap)

Dit product is een ‘deliverable’ voor de opdrachtgever. Je werkt dit dus netjes uit met inhoudsopgave, paginanummering etc.

Grid

Als het functioneel ontwerp gereed is, leg je de functionaliteit van de website vast in een html-css grid. Kies bijvoorbeeld www.960.gs 

Inhoud (content)

Voor dit project schrijf je alle teksten zelf. Je maakt geen gebruik van ‘lorem ipsum’ of andere dummy-tekst.

Ieder bedenkt zelf 3 van de 12 producten. De afbeeldingen werk je zelf uit in Photoshop of Illustrator. Ook de naam, beschrijving en de specificaties bedenk je zelf. Voor de overige producten mag je kiezen uit de producten van jouw klasgenoten. Wij verzamelen alle ACME producten zodat je producten van anderen kan kiezen.

Maak van jouw producten twee formaten afbeeldingen: een tumbnail en een grote afbeelding.

Visueel ontwerp

Voor dit project maak je zelf het visuele ontwerp. Hieruit de volgende producten:

• De drie eerder genoemde ACME-producten per persoon.

• Header footer / achtergrond beeldelementen ter versterking van de sfeer van website.

• Afwijkende lettertypen voor de kopteksten en de titel van de website (het woordmerk ACME). Gebruik https://www.google.com/fonts Voor een afwijkend lettertype van de koppen

• Kies een kleurenschema op bijvoorbeeld http://colorschemedesigner.com/ of https://kuler.adobe.com/create/color-wheel/ 

Realisatie (front-end)

De HTML/CSS zijn valide en de HTML heeft de juiste semantiek (http://nl.wikibooks.org/wiki/HTML/Semantiek). Ter verbetering van de gebruikerservaring gebruik je Javascript / CSS-transities. Maak bijvoorbeeld gebruik van Javascript en of CSS om de navigatie en/of header te laten verschijnen of verdwijnen, zoals bijverbeeld het menu op: http://greatsbrand.com/ en http://fortrabbit.com/. Maak zelf een keuze hiervoor bij de website en/of de landing page.

De productdetails verschijnen in een ‘lightbox’, waarbij de onderliggende pagina niet hoeft te herladen.

De winkelwagen, het bestelformulier/betalingssysteem en het contactformulier mogen als prototype aangeleverd worden. We verwachten geen werkend betalingssysteem. Wel alle stappen en handelingen van de gebruikers ten aanzien van de winkelwagen, het bestelformulier/betalingssysteem en het contactformulier. Vergeet de interactie/feedback naar de klant niet. Feedback kan zijn: Uw bestelling is in behandeling. Het product is tijdelijk uitverkocht. Uw e-mail is verstuurd. etc

Implementatieplan

De website leveren je op je eigen ma-cloud host. Schrijf een stappenplan voor de implementatie op deze of een willekeurige andere webhost.

De website en landingpage zijn eenvoudig te benaderen vanaf de root-map van jouw ma-cloud host.

Beschrijving implementatieplan: Titel website, specificaties / versies html css php gebruikte frameworks, databases beschrijving (van de) mappenstructuur.

Test

Als je de website hebt afgerond, laat je deze testen door iemand die niet bij jou in de klas zit. Vraag dit aan een vriend of familielid.

Je maakt hiervoor een testplan. Hierin staat staat exact beschreven hoe de website getest moet op de juiste functionaliteit. Je maakt hiervoor een stappenplan.

Het resultaat van de test leg je vast in een testrapport. Na de test verbeter je de website waar nodig.

Planning

Met de datum wordt bedoeld: Volledig af en ingeleverd op vrijdag.

Week 2 (vr 13//2): onderzoeksverslag (team)

Week 3 (vr 20/2): 3 producten verzinnen (individueel): naam, beschrijving, thumbnail, afbeelding

Week 4 (vr 6/3): Producten verder ontwerpen. Producten visueel online en link gedeeld met klas (individueel).

Week 5 (vr 13/3): Functioneel ontwerp klaar en werken aan front-end (team).

Week 6 (vr 20/3): Werken aan front-end. Visueel ontwerp en grid klaar (team).

Week 7 (vr 27/3): Prototype online (team).

Week 8 (vr 3/4): Realiseren met backend (team)

Week 9 (vr 10/4 ): Afronden realisatie en opleveren, implementatie +plan + test. Webwinkel online (team)

Eindweek: presentatie.

Aftekenlijst

Werkproces 1.3 Levert een bijdrage aan een functioneel ontwerp

Werkproces 2.3 Realiseert een (cross)media uiting en/of systeem

Werkproces 2.5 Test het ontwikkelde product

Werkproces 3.1 Maakt of levert een bijdrage aan het implementatieplan

Extra: Ontwerpt de media-uiting

Prestatie-indicatoren

Hieronder vind je de beschrijving van de werkprocessen en bijbehorende prestatie-indicatoren. Deze komen rechtstreeks uit het kwalificatiedossier (http://prod.pub.kwalificatiesmbo.nl/DossierDetails.aspx ) Deze indicatoren beschrijven het gewenste niveau aan het einde van jouw opleiding. De docent zal deze voor de huidige fase in jouw opleiding interpreteren op het juiste niveau.  

1.3 werkproces:

Levert een bijdrage aan een functioneel ontwerp

• De mediadeveloper staat open voor nieuwe ideeën en plannen die aangedragen worden door de projectleider en/of multidisciplinaire team en kan deze verwerken in zijn bijdrage aan het functioneel ontwerp zodat de laatste aanpassingen zijn verwerkt.
• De mediadeveloper stemt met de vormgever en/of communicatieadviseur zijn bijdrage aan het functioneel ontwerp af op het vormgevings-/communicatief ontwerp en hij overlegt met de opdrachtgever en/of multidisciplinaire team als bepaalde keuzes moeten worden gemaakt zodat zijn bijdrage aan het functioneel ontwerp goed aansluit bij het geheel.
• De mediadeveloper documenteert de specificaties van zijn bijdrage aan het functioneel ontwerp conform afspraken of procedures en overlegt deze rapportage aan zijn projectleider en/of multidisciplinaire team zodat de juiste specificaties zijn gedocumenteerd.
• Op basis van zijn vaktechnische inzicht levert de mediadeveloper met behulp van beschikbare gegevens een onderbouwde bijdrage aan het functionele ontwerp voor een (cross)media-uiting en/of -systeem, zodat hij zijn bijdrage aan het ontwerp kan toelichten.
• De mediadeveloper legt de bijdrage aan het functionele ontwerp voor de (cross)media-uiting en/of -systeem op een professionele wijze uit aan derden, zodat het ontwerp door de toehoorder begrepen wordt.

2.3 werkproces:

Realiseert een (cross)media uiting en/of systeem

• De mediadeveloper kiest de juiste materialen, en middelen, -vaak software(tools)- en gebruikt deze effectief opdat de gerealiseerde media-uiting en/of -systeem aan de gestelde eisen voldoet.
• De mediadeveloper maakt op basis van zijn vaktechnisch inzicht de keuze voor een programmeertaal of programmeertalen voor het bouwen van een databasegestuurde media-uiting en/of -systeem en voor het databasesysteem, hij programmeert de volledige code voor de media-uiting en/of -systeem op basis van het functioneel en technisch ontwerp en realiseert een dynamische koppeling naar de database zodat er een goed functionerende databasegestuurde media-uiting en/of -systeem is.
• De mediadeveloper blijft constructief te werk gaan bij tegenslag en is in staat om zijn planning dusdanig aan te passen dat overschrijding van de deadline voorkomen of beperkt wordt.
• Op een logische, systematische wijze realiseert de mediadeveloper een (cross)media-uiting en/of -systeem die/dat voldoet aan de gestelde eisen en verwachtingen en goed is afgestemd met het multidisciplinaire team.

2.5 werkproces:

Test het ontwikkelde product

• De mediadeveloper houdt gedurende het testen van de media-uiting en/of -systeem de documentatie nauwkeurig bij en waar nodig past hij deze aan zodat alle testresultaten in de organisatie op een correcte manier gedocumenteerd en gearchiveerd blijven.
• De mediadeveloper kiest en maakt gebruik van de juiste materialen en middelen om doeltreffend en doelmatig de werking en functionaliteit van de gerealiseerde (cross)media-uiting en/of -systeem te testen.
• De mediadeveloper verzamelt bij het testen van (cross)media-uitingen en/of -systemen op een adequate wijze relevante gegevens en toetst deze op juistheid en betrouwbaarheid, waardoor hij komt tot onderbouwde conclusies en waar nodig oplossingen aandraagt en vervolgacties kan uitzet.
• De mediadeveloper beoordeelt tijdens het testen kritisch en op juiste wijze of er naar aanleiding van de testresultaten mogelijke aanpassingen of veranderingen doorgevoerd moeten worden.

3.1 werkproces:

Maakt of levert een bijdrage aan het implementatieplan

• De mediadeveloper presenteert onderbouwd en met steekhoudende argumenten zijn stappenplan voor de implementatie, waarbij hij genomen beslissingen verdedigt en streeft naar overeenstemming door met oplossingen voor bezwaren te komen en anderen te overtuigen van de voordelen van zijn stappenplan voor de implementatie.
• De mediadeveloper weet op een duidelijke, heldere wijze zichzelf en zijn boodschap te presenteren aan betrokkenen, waarbij hij overtuigend overkomt. Met regelmaat checkt hij de aansluiting met de toehoorders, of het stappenplan voor de implementatie begrepen wordt.
• De mediadeveloper stelt een nauwkeurig stappenplan voor de implementatie op, zodat alle betrokkenen juist en volledig geïnformeerd en voorbereid zijn.
• De mediadeveloper toetst alle voor hem beschikbare gegevens en informatie kritisch op juistheid, volledigheid, betrouwbaarheid en relevantie, zodat hij de consequenties van het stappenplan voor de implementatie van een (cross)media-uiting en/of -systeem goed in kan schatten.
• De mediadeveloper schat de benodigde tijd voor de uit te voeren activiteiten in. Hij schrijft een helder en volledig stappenplan voor de implementatie, waarin hij aangeeft welke werkzaamheden er wanneer gedaan moeten worden, welke middelen nodig zijn en wat voor consequenties de activiteiten hebben voor de betrokkenen en de organisatie, zodat de uitvoering gestructureerd en volgens plan kan verlopen.