Projectbriefing My People – Appo Project 6

Doelstelling

Een standaard PHP-website ontwikkelen.

Een compleet ontwikkelingsproces van begin tot eind doorlopen inclusief documentatie.

Kennismaken met usertesting, beheer en evaluatie.

Bovengenoemde doelen zijn gelinkt aan Kerntaken 1, 2 en 3 uit het kwalificatiedossier.

Inleiding

De komende negen weken gaan jullie een standaard PHP website ontwikkelen. Alle nog onbekende stof wordt behandeld in de bijbehorende lessen Back-end development, Projectmanagement, Projecten, Front-end fundamentals en Datamanagement.

Het is de bedoeling dat je (delen van) deze website kunt hergebruiken. Je gaat hiervoor een heldere structuur toepassen met een duidelijke verdeling in verschillende mappen en bestanden. Alle content (tekst, data en links naar afbeeldingen) komt uit een database. Ook is het van belang, dat je zoveel mogelijk de opmaak scheidt van de functionele applicatie.

Je gaat hiervoor templates gebruiken.

Let op! Deze oefening geeft je een goede basis voor het volgende project. Oefen je dit goed, dan is succes bij volgende project gegarandeerd. Je maakt de opdracht met een team van 5 studenten.

De opdracht

Maak een website voor een community, een sportclub, band, artiest of kunstenaar naar keuze (mag ook fictief zijn). Het doel van deze website: iedereen op de hoogte houden, dus zenden van informatie.

Je bouwt de website en het CMS in een omgeving met als uitgangspunt:

  • Apache 2.4.x
  • PHP 7.0
  • MySQL 5.6.x
  • GD / Image Magic 6.6.3

Het voldoet aan de eisen volgens het MVC-principe-design-pattern.

Het functioneel ontwerp en de usability en user experience design zijn belangrijk. De site is responsive en adaptive.

Je test of de community de juiste content kan vinden (siteflow) door middel van logs of analytics. Je zorgt in ieder geval voor een juiste semantiek (HTML 5) in de html/css.

Verder gebruik je zelfgemaakte content of content van een bestaande website over het betreffende onderwerp.

In de onderstaande opsomming vind je de onderdelen van de site. Je mag zelf keuzes maken voor zaken die niet vermeld zijn.

1 Landingpage

Op de landing-page een lijst van items. Je kunt denken aan (nieuws)berichten of bedenk een andere lijst die bij je website past.

Minimaal per item: Titel, datum, tekst en foto.

Maak een bladerfunctie, zodat alleen het laatste x-aantal berichten in beeld is en er naar oudere berichten kan worden gebladerd. Dit heet pagination:

Maak gebruik van een template engine, zoals http://www.smarty.net/ of roll-your-own.

2 Informatiepagina template (minimaal 2 uitwerkingen)

bijvoorbeeld: over ons, contact-informatie, enz.

Minimaal: Titel, datum, tekst, foto, media: video of audio

Minimaal twee verschillende lay-out types. Bijvoorbeeld afbeelding bovenin over de volle breedte en één met de foto links of rechts.

Uitlichten van plaatjes of info door modal-box. (modaal venster)

Maak gebruik van een template engine, zoals http://www.smarty.net/ of roll-your-own.

3 Agenda/Events … Wedstrijdschema, tourschema, expositie-schema

Minimaal een lijst met naam, data en locatie

Denk aan een agenda or reserveringssysteem in Javascript met informatie uit PHP, binnengehaald via AJAX.

4 Zoekfunctie

  • Doorzoek de volledige website
  • Zoekresultaten-pagina met titel en deel
  • Zoeken door middel van autosuggest, autocomplete via Javascript .

5 Overige html-elementen

  • Header, logo / website title, tagline, footer, sidebar (bedenk zelf een functie)
  • Navigation (menu): herkenbare geselecteerde status (responsive!)
  • RSS feed
  • Juridische pagina, zoals disclaimer, ontwikkel er zelf een of kies een bestaande, zoals een melding, waarin vermeld wordt dat het om een school project gaat
  • maak in ieder geval gebruik van flexbox en Sass

6 CMS / Admin gedeelte

Er is een ‘basic’ CMS voor de items (CRUD). Je komt bij de CMS door page=admin of admin achter je URL te plaatsen. Als Admin krijg je ook inzicht in het gebruik van je site.

7 Bonus

Hierboven zijn de verplichte figuren, zoals ze zeggen bij kunstschaatsen. De dingen die we hieronder noemen zijn niet verplicht, maar geven wel extra credit.

Ben je klaar? Dan ga je voor de 10!  met:

  • In het CMS kun je pagina’s updaten, weghalen en koppelen aan het menu, je menu wordt dus flexibel.
  • lazy loading met AJAX in plaats van standaard pagination. Zie als voorbeeld: iedere wordpress-pagina.
  • Suggesties voor zoeken via javascript, zoek suggesties uit je database via AJAX.
    Je houdt eerdere zoektermen bij (ook met AJAX) en gebruikt dit groeiende tabelletje om lijsten op beginletter(s) te genereren met de database. Ook is er een rapportage voor de Admin, natuurlijk.
  • In het CMS kun je paginas / items koppelen aan alternatieven voor deze paginas of items, deze serveer je willekeurig aan je bezoekers (marketing tool: A/B testen).
  • Als Admin krijg je inzicht in je bezoekersgedrag met grafieken en statistieken (implementeer google Analytics, HotJar of schrijf het gewoon zelf, lees over sales-funnels als je wilt weten, waarom je het zelf zou willen doen.)
  • Shopping systeem voor fan-ware. Natuurlijk met de best-selling item als top-product op de landing-page.
  • Reactiemogelijkheden voor de fans.
  • Een bug-ticketing systeem gekoppeld aan mislukte zoekacties, 404, javascript errors en of gewoon een “meld een probleem” knopje.

Producten & Documenten (mijlpalen)

Aspect 1, Ontwerpen

  • b1-k1-w1 Debriefing / Technisch Advies / Schriftelijk Advies

  • b1-k1-w2 Plan van aanpak

  • b1-k1-w3 Functioneel ontwerp.(met ingevuld tijdschema)

  • flowchart,

  • Het F.O. groeit mee gedurende aspect 2 met de inzichten die je opdoet!

Aspect 2, Implementeren / realiseren

  • b1-k1-w3, b1-k1-w4 Technisch ontwerp (o.a. E.R.D)
  • b1-k1-w4 Ontwikkelomgeving inrichting
  • b1-k2-w1/b1-k3-w1 Opgeleverde website en beheer omgeving (CMS)

Aspect 3, Testen/Analyseren

  • b1-k2-w2 Testrapporten (gebruikers- en andere)

  • b1-k3-w1 Optimalisatieplan (dit document groeit mee met je bevindingen)

  • b1-k3-w3 Flow statistieken van sitegebruik  (evaluatie)

Beoordeling

Alle genoemde producten zijn aanwezig.

De producten zijn correct en binnen de deadline ingeleverd.

De website voldoet aan alle bovengenoemde eisen

Extra punten voor de bonus onderdelen.

Betrokken docenten

Jim Dunk: j.dunk@rocmn.nl
Vincent Hooft: v.hooft@rocmn.nl
Jacob Petrovic: j.petrovic@rocmn.nl

Tijd en Deadline!

Voor deze opdracht hebben jullie 9 weken de tijd gebaseerd op online-lesuren en offline-thuisuren.

Week 17 (22-04) Instructie Agile en briefing
Week 20 (13-05) Start Spr 1
Week 21 (20-05) Tussenstand
Week 22 (27-05) Spr review – Start Spr 2
Week 23 (03-06) Tussenstand
Week 24 (10-06) Spr review – Start Spr 3
Week 25 (17-06) Tussenstand
Week 26 (24-06) Spr review – Start Hardening
Week 27 (01-07) Final Demo

De deadline is vrijdag 01 juli 2020, peer review woensdag 24 juni.

Inleverwijze

  • Project op Github (Starten we direct mee!)

  • In het project een README met links naar ALLE documenten/mijlpalen

  • We moeten je voortgang kunnen zien, dus commit veel en vaak in elk geval iedere dag, dat je aan het project werkt.

  • Tekstdocumenten in aparte map /doc/ op Github

  • Plaatjes/Schema’s in SVG formaat mogen gecommit op github (mits klein genoeg)

  • Werk bij grote bestanden als Bitmap-images, animatie of video liever met links naar cloud-diensten als youTube, Google Drive of een bitmap-share naar keuze (DeviantArt, CloudSpot, Flickr, photos.google.com of wat dan ook).

  • Link naar je project op Github via Teams(Direct, ook al staat er alleen nog een readme.md)

  • Controleer of je github openbaar toegankelijk is (of dat je de docenten hebt toegevoegd!).

  • In de README.md op Github ook een link naar een werkende online versie

  • Zie boven voor timing producten / Mijlpalen.

  • In je README.md links naar al je producten, inclusief link naar de functionerende site op een server (cloud of eigen hosting), zie onderaan voor een downloadbare opzet

Let op:

Zorg ervoor dat er geen betaalde software (Bijv Word) of specifiek platform (MAC/WINDOWS) nodig is om je documentatie te bekijken, maak daarom gebruik van algemene, platform onafhankelijke open-source formaten als:

  • SVG (in github)        (vector image bestand, geëxporteerd door bijv draw.io, smartArt, Visio, mindmup, Adobe illustrator etc etc. Het is te editen met open source editor van inkscape.org, online met http://editor.method.ac/ of gewoon met je favoriete code-editor, het is tenslotte gewoon tekst.)

  • RTF (in github)         (rich text file, met iedere text editor te openen en exporteren, heeft mogelijkheden tot opmaak)

  • MD (in github)         (markdown wordt gebruikt in Wikipedia en GitHub en is HET open source hypertext format, bekende markdown editors: http://dillinger.io/ of www.github.com)

OF

  • Bitmap (link in github) Kan het echt niet anders, dan JPG (foto’s) of PNG (schema’s) Maar vrijwel ieder schema is beter op te slaan als SVG!

  • Je mag alle cloudservices gebruiken die een online viewer hebben, zoals AxureShare, Google Docs en Google spreadsheets.

  • Gebruik je Axure, dan accepteren we alleen de link naar axureshare. Geen axure.rp bestand in je github committen!

  • Als je GoogleDRIVE producten gebruikt, zorg dan dat je een openbare link deelt! We moeten het in ieder geval kunnen zien, als we commentaar kunnen achterlaten is dat nog beter.

  • Je mag natuurlijk ook je een cloud service gebruiken, dezelfde regels voor open formaten gelden dan!

Laten we direct beginnen: Readme.md in markdown op GitHub

Als eerste oefening maken we een nieuw project aan, myPeople op jouw GitHub en hierin een README.md in MarkDown. Volgende week  gaan we aan de planning..

Structuur: https://github.com/rocmn-appo/ProjectStarter