Informaticasite van het Lauwers College te Buitenpost                 © R.J. van der Beek
 

Eindproject vwo-6 cursus 2010/2011   

Maak met je groepje een interactieve website. Doe maar alsof jullie een IT-bedrijfje hebben, en beschouw het maar als een promotiewebsite voor jullie bedrijf.
Er moet javascript in voorkomen, en PHP en MySQL. Je laat de java-applets, die je al gemaakt hebt, er op zien. Je maakt een logo en een trucage-foto m.b.v. GIMP.
En je maakt zoveel mogelijk gebruik van CSS. Misschien heb je zelf nog meer ideeën over wat je kunt laten zien op de website.

Je moet eerst plannen maken met je groepje wie wat doet en wanneer, enz.
Dat moet je invoeren in Ganttproject, en dat moet ook worden ingeleverd.

Je website moet aan de volgende voorwaarden voldoen:
  • Bij het opstarten moet er een venster verschijnen dat uit drie gedeelten (m.b.v. frames of m.b.v. tabellen, voor frames zie HTML hoofdstuk 6) bestaat:



  • Langs de linker kantlijn (dat is vak A) een vertikaal menu, waarin uit de opties "LauwersCollege-site" en "Informatica-site" gekozen kunnen worden (URL's: www.lauwerscollege.nl en www.lcinformatica.nl)
  • Rechts daarvan in vak B een menu, waar je dingen uit kunt kiezen.
  • Daar weer rechts van vak C, dat is het "onderwerpvenster", waarin het verhaal verschijnt over wat er in het menu is gekozen (en bij het starten de introductiepagina).

  • Als in het menu in vak B over een link wordt bewogen dan moet de achtergrondkleur van die link veranderen, en als de muis er af gaat moet de oorspronkelijke kleur worden hersteld. Zie daarvoor Javascript 1.7
  • Als een menukeuze in vak B wordt gemaakt dan verschijnt er een nieuwe pagina in vak C, zie daarvoor HTML 6.3

  • Ook als in het menu in vak A over een link wordt bewogen dan moet de achtergrondkleur van die link veranderen, en als de muis er af gaat moet de oorspronkelijke kleur worden hersteld. Die link moet een plaatje zijn, anders kun je de tekst niet vertikaal krijgen. Zie daarvoor Javascript 2.5

  • Als een menukeuze in vak A wordt gemaakt dan verschijnt de LauwersCollege-site of de Informaticasite in een apart venster. Zie daarvoor HTML 6.4

  • Figuren die je gebruikt moet je in gif- of jpg-formaat opslaan.

  • De kleur van de tekst van de links in vak B moet, nadat je al eens op de links geklikt hebt, hetzelfde blijven. Zie daarvoor HTML 8.4 of HTML 5.11 (mb.v. CSS)

  • In het menu in vak B moet je uit de volgende onderdelen kunnen kiezen (en je moet dus ook pagina's daarvoor voor het "onderwerpvenster"maken). Dat zijn de volgende:
    1. de introductiepagina. Daarin wordt o.a. de datum en de tijd vermeld waarop de bezoeker die pagina bekijkt.
      Je moet er voor zorgen dat de tijd, die wordt aangegeven, loopt, dus bijv. 11.30 en een sec. later 11.31 enz.
      Dat kan met behulp van Javascript, zie Javascript 3.9
      Op die pagina vertel je wie jullie zijn, waarom je de pagina maakt, enz. Beschouw de website als een promotiewebsite; bedenk maar iets leuks, je moet je bedrijfje goed promoten.
    2. Ook jullie logo moet op de introductiepagina staan, waarin in ieder geval jullie namen of voorletters in voorkomen. Het moet een animated gif zijn, hoe je dat in Gimp kunt maken lees je in hoofdstuk 3 van Gimp.
    3. Verder maak je een trucagefoto, waarin één van jullie groepje (of meer) opstaat samen met een bekend figuur. Hoe je een trucagefoto uit twee of meer foto's kunt maken lees je in hoofdstuk 6 van Gimp
    4. Er moet een pagina zijn waarop minstens één van de javalogoopgaven, die jullie hebben gemaakt voor de vorige PO, op staat (de map logotekenap3d staat al in jullie map).
      En ook minstens één van de javaopgaven van de vorige PO. Zie daarvoor HTML 10.4 of H18.4.6 (Java)
    5. Verder moet er een formulier opstaan waar drie dingen kunnen worden ingevuld door de bezoeker: de naam, het email-adres van de bezoeker, en het cijfer dat de bezoeker op de site geeft en dat moet een geheel cijfer tussen de 4 en de 9 zijn. Er moet ook een knop met Verzenden op staan. Als daar op geklikt wordt dan moet er gecontroleerd worden of er wel een naam is ingevuld. Als er geen naam is ingevuld dan moet dat in een venstertje getoond worden. Zie daarvoor Javascript 3.7
      Zorg er verder voor dat, als er op Verzenden is geklikt, die gegevens worden opgeslagen in een bestand, dat cijfers.txt heet. Zie daarvoor Hoofdstuk 19.1 (PHP)
    6. Zorg er voor dat er in het menu een keuzemogelijkheid is van: ingevoerde gegevens bekijken.
      Als die keuze gemaakt is, dan moeten alle namen met email-adressen en gegeven cijfers getoond worden. Zie daarvoor ook Hoofdstuk 19.1 (PHP)
    7. Een pagina met drie vragen die betrekking hebben of wat er op de site staat, invoervakken en een button met Controleer. Als er niet binnen 60 sec. op Controleer is geklikt dan moet de introductiepagina weer verschijnen. Zie daarvoor Javascript 3.8
      Als op Controleer wordt geklikt dan worden de antwoorden gecontroleerd, en er wordt gezegd hoeveel antwoorden goed waren.
    8. Maak een filmpje, waarin één van jullie groepje (of meer) in voorkomt. Als hij voor de eerste keer in beeld komt moet zijn naam ook in beeld staan. Verder moet er een foto in het filmpje voor komen. Tussen het videofragment en de foto moet tekst staan. Sla het filmpje op als een mp4-bestand. Hoe je een video kunt bewerken lees je in Videobewerking.
    9. Maak verder nog de volgende MySQL-opdracht, en plaats die ook op je site (de tabellen zijn al voor jullie aangemaakt, met één of meer records).
      opg. 69, 72, of 73 van de PHP-opgaven (Je docent zegt wel welke jij moet maken)

      Hoe je dit moet aanpakken lees je in Hoofdstuk 19.5 (MySQL en PHP)

      Gebruikersnaam, naam van de host, databasenaam en wachtwoord staan in het bestand database.php in de hoofdmap.
      Als je in je php-document opneemt: require("../database.php"); of include("../database.php"); dan bevatten de variabelen $host, $gebruiker, $wachtwoord en $dbnaam automatisch de juiste gegevens.

Beoordeling via STIPP : Structuur, Techniek, Inhoud, Presentatie en Proces.

De site moet uiterlijk de dinsdag van week 13 (27 maart 2012) in één van jullie mappen op lcinformatica.nl staan

Het bestand, gemaakt met Ganttproject, moet uiterlijk 22 december 2011 op TeleTop staan