WEBDESIGN MET HTML5 EN CSS + USABILITY INFORMATIC A KLAS 4 2 018-2019 INHOUD Inleiding... 2 Online cursussen... 2 Verplichte cursussen (geschatte leertijd 3 + 11 = 14 uur):... 3 Optioneel: Extra cursussen voor verdieping/uitbreiding... 3 Praktische Opdracht... 5 Randvoorwaarden... 5 Beoordeling... 6 Inleveren... 6 Logboek voorbeeld... 6 Toets in de toetsweek... 7 Studiewijzer/Planning... 7 1
INLEIDING Het 2 e trimester van informatica in klas 4 staat in het teken van webdesign met HTML5 en CSS, gecombineerd met theorie over de principes van usability (dat is de verzamelterm voor het gebruiksvriendelijk maken van ICT producten zoals websites). In dit document vind je een overzicht hoe dat in zijn werk gaat Globaal gezien voeren we de volgende stappen uit: Online cursus HTML5 & CSS + Usability theorie Toetsweek II HTML5 &CSS + Usability theorie Praktische opdracht Webdesign LESSTOF: ONLINE CURSUSSEN HTML EN CSS Voor het leren van HTML en CSS maken we gebruik van de interactieve cursussen van www.codecademy.com om de belangrijkste html en css kennis op te doen (eventueel aangevuld met enkele verdiepingscursussen). Registreer jezelf op CodeCademy (onthoud je login gegevens goed!) Klik rechtsboven op Catalog : Klik vervolgens linksboven op Web development : 2
Scroll naar beneden voor het cursusoverzicht VERPLICHTE CURSUSSEN (GESCHATTE LEERTIJD 3 + 11 = 14 UUR): De volgende 2 CodeCademy cursussen zijn verplicht en zijn de basisstof die je moet kennen om de PO en de toets te kunnen maken: Maak eerst de HTML cursus en dan de CSS cursus (Codecademy slaat steeds automatisch op waar je gebleven bent). OPTIONEEL: EXTRA CURSUSSEN VOOR VERDIEPING/UITBREIDING Als je klaar bent met de basiscursussen HTML en CSS en je wilt nog wat dieper gaan, raad Wt je een (of beide) van de onderstaande cursussen aan: 3
Bij Responsive design leer je hoe je je design flexibel kunt maken voor verschillende schermformaten (smartphones, tablets, gewone computers,etc.). Als je serieus met webdesign aan de slag wilt (bijvoorbeeld als bijbaan!), is responsive design echt een must. Introduction to jquery leert je de basis van werken met jquery. Dat is een javascript bibliotheek die het mogelijk maakt allerlei interactieve elementen (uitklapmenu s, verschuifbare elementen, etc.) aan je website toe te voegen. LESSTOF: USABILITY THEORIE In januari verdiepen we ons in de theorie achter Usability. Hierbij bestuderen we hoe je de gebruiksvriendelijkheid van een ICT product (zoals een website) kunt waarborgen. We gebruiken hiervoor stof uit de Fundement Online lesmethode. Deze kennis gecombineerd met je HTML/CSS skills stellen je in staat een goede website PO te maken. (zie volgende pagina) 4
PRAKTISCHE OPDRACHT Als je de basiscursussen (en eventueel enkele verdiepingscursussen) hebt afgerond en kennis hebt genomen van de usability principes, ben je klaar om een echte website te gaan bouwen. Hiervoor zijn 2 scenarios: Je hebt een opdrachtgever (bijv. een kennis of familielid) die een site nodig heeft. Je bouwt een site op basis van die opdracht. Je zorgt voor een representatieve en nette layout waarbij je rekening houdt met de wensen van je klant. Houd wel rekening met de hieronder genoemde randvoorwaarden. Als je geen echte opdrachtgever kunt vinden, is je opdracht als volgt: Maak een website voor een fictief bedrijf. Wat het voor bedrijf is mag je zelf bedenken. Voor het bedrijf maak je een logo en nette bedrijfswebsite die aansluit bij de doelgroep van het bedrijf. Zorg voor een mooi modern design met oog voor de gebruiksvriendelijkheid. RANDVOORWAARDEN Je maakt een logboek waarin je je tijdsbesteding noteert (zie onderaan deze pagina). De layout van je pagina s moet je maken met html5 en css. Gebruik divs om de layout te maken. (Wt s youtube tutorial is een goed uitgangspunt als je niet goed weet waar je moet beginnen. Online is ook van alles te vinden) Je site heeft een navigatiemenu met daarin minstens 4 items (dus je site bestaat uit minstens 4 pagina s/onderdelen) Scheid inhoud van opmaak: gebruik html voor de inhoud en indeling, gebruik css voor de opmaak en stijl. Gebruik als het kan 1css file bij de verschillende html files die je maakt. Zo staat alle opmaak op 1 plek en is het makkelijk te wijzigen. Ontwerp de site in een teksteditor (bijvoorbeeld Brackets). Gebruik dus geen Frontpage of Dreamweaver o.i.d. De bedoeling is dat je zelf de html & css code schrijft. Check je code op html 5 validiteit (dit is 1 punt in de beoordeling waard!). Gebruik van geavanceerde technieken zoals JavaScript, jquery, php, etc. is optioneel en kan je bonuspunten opleveren. Als je al goed thuis bent in html/css is dit zeker een goede toevoeging, maar je kunt ook een prima site bouwen zonder. Zorg dat je jezelf iets nieuws leert! De codecademy cursus jquery is bijvoorbeeld erg nuttig voor geavanceerder (interactief) webdesign. Om te laten zien dat je een aantal basis html zaken beheerst, bevat je site in ieder geval de volgende dingen (gebruik css om ze mooi te stylen natuurlijk): o Een nette paginaindeling met gebruik van <div> blokken o Een lijst (ordered of unordered) o Een tabel (bijvoorbeeld met een prijslijst, of openingstijden) o Koppen (minstens <h1> en <h2>) en paragrafen (<p>) 5
BEOORDELING Bij de beoordeling wordt op de volgende punten gelet: Kwaliteit van het design (kleurgebruik, layout, vormgeving, logo, leesbaarheid, gebruiksvriendelijkheid etc.): 3 pnt Techniek (Correcte en overzichtelijke html en css code. Vereiste randvoorwaarden en onderdelen goed in de site opgenomen): 4 pnt Correctheid volgens de W3C website checker : 1 pnt Extra's (bv. extra technieken of een buitengewoon goed design): 2 pnt INLEVEREN Uiterlijke inleverdatum: Zondag 17 maart 2018, 23:59 Lever alle websiteonderdelen in in de openstaande opdracht in Magister (alles bij elkaar in een.zip file): Alle.html bestanden Alle.css bestanden Alle gebruikte afbeeldingen (.jpg,.png, etc..) Eventuele andere gebruikte files (scripts,.js bestanden, etc.) Logboek (.doc of.pdf) LOGBOEK VOORBEELD Datum Activiteit Tijdsinvestering 09-01-2018 Logo ontworpen in Paint.net 0:45 uur 12-01-2018 Wt tutorials gekeken 1:00 uur 13-01-2018 Layout schets op papier gemaakt 0:30 uur 13-01-2018 Basis indeling site gemaakt 2:00 uur 6
TOETS IN DE TOETSWEEK In de toetsweek krijg je een praktische toets op de computer, waarbij je je html en css skills moet toepassen. Nadere info volgt nog STUDIEWIJZER/PLANNING Omdat je in eigen tempo door de Codecademy cursussen heen werkt, is een exacte studiewijzer niet zo zinvol. Verwacht wordt dat je in de les serieus aan de cursussen werkt en er wekelijks nog 0,5 a 1 uur thuis aan werkt Omdat je natuurlijk wel wat richtlijnen nodig hebt komt de planning globaal hier op neer: Tot aan de kerstvakantie: o Codecademy basiscursussen (HTML en CSS) o Tussen de 8 en 12 lessen (afhankelijk van cluster) Januari en februari o Afmaken basiscursus en eventuele verdiepingscursussen o Opdrachtomschrijving PO online Als je minstens de basiscursussen hebt afgemaakt, begin je aan de PO opdracht. Deadline: zondag 17 maart Toetsweek 2 (20 feb 27 feb) o Praktische toets HTML/CSS op de computer 7