Web Design Opdracht 1, week 1 2014-1015 Opdracht 1- week 1 Dit document bevat een beschrijving van de opdracht ‘Webdesign Week 1’ voor de cursus Informatie-uitwisseling van de opleiding Informatiekunde © Christof van Nimwegen & Robbert Jan Beun Opdracht 1: Webdesign, Week 1 Inleiding Het eerste onderdeel van de cursus IUW (week 1 en 2) behandelt het thema “Web”. De hoorcolleges zijn bedoeld voor uitleg, kadrering, achtergronden en verdieping van theorie en principes aangaande het WWW en theorie en technologie die daarbij horen. In vogelvlucht, en in sneltreinvaart zullen we aspecten behandelen die in die specifiek in het kader van IUW belangrijk zijn, en basiskennis die voor jullie als informatiekundige verplichte kost zijn. Parallel aan de hoorcolleges loopt deze 1e opdracht. In dit onderdeel van de cursus gaan we zelf een kleine website bouwen (een basisversie). Een webdeveloper of webdesigner kan, en wil je niet worden in een paar weken, voor de liefhebber is er verdere technische verdieping in het vak Webtechnologie (INFOB2WT). Wat we hier beogen is jullie bekend te maken met de meest basale paradigma’s en bijbehorende technieken voor het WWW. Het is dus geen cursus webdesign. De opdrachten, die je (in aanwezigheid van studentassistenten) tijdens de werkcolleges kunt maken zijn het “hands-on” gedeelte. Hier, en thuis indien je niet alles in de werkgroepen afkrijgt, leer je de basisbeginselen van enkele codeer technieken, te weten HTML5, CSS3, en een weinig PHP en Javascript. In deze 1e twee weken van de cursus die we hiervoor gereserveerd hebben, is er vrij veel werk. Gezien de aard van de materie zullen sommigen van jullie dit heel snel kunnen, maar anderen zullen wat meer tijd nodig hebben. Zorg dat je bijblijft, en aarzel niet de studentassistenten te raadplegen. Na opdracht 1, is er een 2e opdracht omtrent het thema “online trust” welke geïntegreerd zal worden in de website die jullie in deze 1e opdracht gebouwd zullen hebben. Samen zullen deze twee opdrachten 40% van het eindpunt bepalen, naast de 2 deeltoetsen (samen 60%). In de genoemde 40% die de 2 opdrachten samen vormen van het eindpunt, telt opdracht 1 voor 30% mee, en opdracht 2 voor 70%. Omdat het gedeelte Webdesign erg compact en basaal is en niet meer dan 2 weken beslaat is besloten dat jullie niet een geheel boek hiervoor hoeven aan te schaffen. We zullen gebruik maken van een syllabus met oefeningen (voor degenen die nog nooit met HTML gewerkt hebben), en gebruiken we online tutorials. Verder, HTML, CSS, PHP en Javascript is vooral doen en oefenen, en natuurlijk qua erachter komen HOE dingen te doen: Google is your friend. Deze hoorcolleges hebben een hoge informatie dichtheid, en hetzelfde geldt voor de bijbehorende opdrachten/werkcollege. We raden je dan ook stellig aan naar alle hoor/werkcolleges te komen; alle onderwerpen van deze opdracht worden zijn in de hoorcolleges geïntroduceerd. De inlevering van de opdrachten is niet een klassieke inlevering; de opdrachten worden online geplaatst door jullie zelf op je eigen server ruimte, meer hierover in punt 4 op de volgende pagina. De opdracht is in 4 stukken (4 werkcolleges) verdeeld. Twee in week 1, en twee in week 2. Het is een grote cursus, en om de zaken enigermate beheersbaar te houden voor ons, kijken we op vaste momenten of de zaken opgeleverd zijn. Hiervoor staat steeds een deadline genoemd, in rood, onder aan de pagina. Daar mag je er één van “missen”. Als dit overschreden wordt, telt deze opdracht niet mee, en loop je dus een stuk van je eindpunt mis. 1 Week 1 – Werkcollege Webdesign 1/4 (maandag) Dit werkcollege staat in het teken van kennismaking, voorbereiding, teamvorming en oefeningen. In opdracht 1 gaan jullie de onderdelen van een kleine website bouwen. Later in de cursus zal de echte content van de website beetje bij beetje groeien met onderdelen van de “Online Trust” opdracht (opdracht 2). Desalniettemin gaan we de website nu bouwen, de structuur, look & feel bepalen, en wat HTHM5 / CSS3 en scripting toepassen. Als je al een HTML (5) expert bent kun je wat we vragen wellicht snel zelf zonder verdere hulp bouwen. Maar je bent een team, wellicht geldt dit voor de andere “helft” van het team niet. Zoek hier gemeenschappelijk een modus in. Wij refereren in de opdrachten aan enkele online tuturials W3CSchools, deze zitten (hoewel niet geaffilieerd met van het World Wide Web Consortium) dicht bij de bron, zijn gratis en up-to-date. Maar ook ben je vrij om als je dit graag wilt je informatie ergens anders te halen. Let op: Wat gevraagd wordt aan coderen in deze opdracht is ook tentamenstof. Vereisten deze week: 1. Vorm een team De twee opdrachten van deze cursus dien je in een team van twee te maken. Zorg dat je snel een partner vindt en vul dit in op het Googledoc waarnaar gelinkt wordt op: https://wwwsec.cs.uu.nl/cijfers/b1iuw/inschrijf.html 2. Start de procesbeschrijving Per opdracht maken jullie een procesbeschrijving die de hele opdracht door bijhouden. Het beschrijft het proces wat je als team doorloopt (de ondernomen acties, planning of afwijkingen hiervan, wat opgeleverd is. Beschrijf alle genummerde eisen van de opdracht zoals in je proces beschrijving zodanig dat ze gemakkelijk en puntsgewijs hierin terug te vinden zijn. Hier kun je deze template voor gebruiken: http://www.cs.uu.nl/docs/vakken/b1iuw/materiaal/formatprocesbeschrijving-opdracht1.docx. Zet jullie namen erop en sla het op als [studentnummer1][studentnummer2].docx. De procesbeschrijving dient op je webruimte (zie punt 4 te vinden te zijn). 3. Kies je tool Er zijn honderden HTML editors beschikbaar, sommige gratis, anderen niet, en ook een groot aantal online editors. Op de Pc’s in de practicumruimtes staat Dreamweaver als onderdeel van Adobe CS6. Maar je kunt natuurlijk ook gewoon Notepad gebruiken, je moet zelf kijken wat je het handigst vindt. 4. Kies je URL en zoek uit hoe hier files op te zetten De opdrachten dienen online gezet te worden, benaderbaar van “buiten” dus. Om iedereen een uniforme en controleerbare omgeving te kunnen bieden, maken we daarvoor gebruik van de faciliteiten van de faculteit Bètawetenschappen, aangeboden door ICT-Beta. In het bijzonder de persoonlijke opslagruimte en daarbinnen de persoonlijke website, iedere student heeft een stuk (Apache, PHP) server ruimte die van buiten via een URL benaderbaar is. In het document http://www.cs.uu.nl/docs/vakken/b1iuw/materiaal/opzetten-webspace.pdf staat een korte stap-voor-stap beschrijving van hoe je dit kunt doen. Meer informatie ook op: https://ict.science.uu.nl/index.php/Web_site. Elke student kan dit individueel doen, maar het hoeft 2 maar op de serverruimte van één student te staan zodat wij erbij kunnen. Bepaal dus welk URL (van welk teamlid) hiervoor gebruikt gaat worden. Maar je kunt natuurlijk ook bij allebei doen, een persoonlijk stuk server ruimte wat ingericht is en waarvan je weet hoe het werkt, is ook verderop in de opleiding handig. Maak een folder “opdracht1”, zodanig, dat men via het URL dat jullie doorgeven (de folder-root) direct bij de te bouwen website uitkomt. 5. Zet de index.html online Zorg dat er één pagina benaderbaar is door jullie URL in te tikken: de index.html. Zet hier wat minimale tekst (bv. “Hello World”) in zodat we kunnen zien dat er inderdaad iets staat. De procesbeschrijving kan ook in die folder erbij; zet in onderstaand Googledoc ook het volle URL daarheen in hetzelfde Googledoc: https://wwwsec.cs.uu.nl/cijfers/b1iuw/inschrijf.html 6. Oefenen met HTML en CSS Sommigen van jullie zullen al ervaring hebben met het bouwen van websites. De een heeft nog nooit een regel geschreven, de ander freelancet als webdesigner of heeft al een webwinkel gebouwd. Dan kun je dit onderdeel wellicht overslaan. Behoor je nu tot degenen die nog niet, of helemaal geen veel ervaring hebben, dan is het belangrijk zo snel mogelijk met HTML en CSS te gaan oefenen. Hier is wat materiaal: W3Schools (http://www.w3schools.com/html/default.asp en http://www.w3schools.com/css/default.asp De Oefensyllabus met daarin basale practicumoefeningen met HTML en CSS. (http://www.cs.uu.nl/docs/vakken/b1iuw/materiaal/html-css-oefensyllabus.pdf) Mocht er tijd over zijn, dan kan alvast verdergegaan worden met gedeelte voor woensdag (pagina 4). Zorg dat jullie je proces beschrijving uiterlijk dinsdag a.s. (11 november) om 23:59 online staat. Beschrijf nummer 3, 4, 5 en 6 van de genummerde eisen van de opdracht in je proces beschrijving. 3 Week 1 – Werkcollege Webdesign 2/4 (woensdag) Gedurende het vorige werkcollege zijn enkele voorbereidende zaken geregeld. Jullie beginnen met een (nu nog voornamelijk lege) website. Deze als het goed is van buiten af bereikbaar op het stukje server dat je de week ervoor hebt “klaargemaakt”. Onderdeel 6-10 moet je kunnen doen op basis van eerdere kennis of de syllabus van vorige week, of zoek het uit online, bv. bij http://www.w3schools.com/, maar er zijn er nog veel meer. Natuurlijk geldt bij dit alles, en zeker als je tijd over hebt: maak het zo mooi en gebruiksvriendelijk mogelijk! Vereisten deze week: 7. Maak 4 pagina’s voor de website. Zorg dat alle pagina’s een TITLE hebben (zichtbaar in de browser: a. Een openingspagina (index.html). Je mag zelf weten hoe je dit project noemt. De opdracht waarmee de website uiteindelijk gevuld gaat worden gaat over “Online Trust”. Je mag een originele team naam verzinnen, of gewoon iets anders. b. Een 2e pagina waarin jullie jezelf, al dan niet met foto voorstellen als c. Een contactpagina (zie punt 12). d. Nog 1 verdere pagina, dit kan een dummy pagina zijn e. Deze 4 pagina’s moeten “werken” en via menu links (punt 9) te bereiken vinden zijn. 8. Zorg dat al deze pagina’s iets van tekst hebben (desnoods Lorem Ipsum etc.), zodanig dat de headers <h1, h2, h3> en <p> tekst duidelijk te onderscheiden zijn. 9. Deze pagina’s zijn bereikbaar via een consistent (werkend) navigatie menu dat op alle pagina’s hetzelfde is. Deze navigatie mag heel simpel zijn, tekstueel http://www.w3schools.com/css/tryit.asp?filename=trycss_navbar_basic_html (eventueel gestyled met CSS, voor de liefhebber) of met buttons. Zorg dat alle pagina’s via het menu te bereiken zijn. Je mag zelf weten of dit menu verticaal of horizontaal is. Besteed hier pop dit moment niet heel veel aandacht aan; later in de opdrachten gaan jullie het menu “responsive” maken en wordt er door jullie toch nog beter naar gekeken. Zorg dat het duidelijk is DAT het een menu is (door bv. kleur, afmeting, graphics of wat je maar wilt). 10. CSS kan op verschillende plaatsten voorkomen. Het meeste voorrang krijgt het als “inline” style (http://www.w3schools.com/css/tryit.asp?filename=trycss_howto_inline), maar dat verdient niet de voorkeur. Een tweede manier is “internal“, de CSS code in de header te plaatsen (http://www.w3schools.com/css/tryit.asp?filename=trycss_howto_internal). Dat is al eleganter, maar zou nog steeds betekenen dat de CSS op elke losse pagina zou moeten voor komen. De taak hier: Maak minimaal één werkend extern CSS-bestand en maak styles voor p, h1, h2, h3 die duidelijk uit elkaar te houden zijn. Zorg dat deze in een “CSS” directory komt te staan. Zorg dat alle HTML pagina’s gekoppeld aan dit deze CSS gekoppeld zijn. Hoe dat moet kun je op http://www.w3schools.com/css/css_howto.asp of kijk in de oefen syllabus). 4 11. Voeg minimaal één foto toe op een van de pagina’s. Dit kan bv. op de pagina zijn waar je je voorstelt, maar ook ergens anders. Indien je liever geen foto van jezelf toevoegt; alles kan, ook en foto van de universiteit of de stad waar je/jullie woont/wonen, of nog iets anders. Zorg dat deze in een “images” directory komt te staan. Hoe dat moet kun je op http://www.w3schools.com/html/html_images.asp of kijk in de oefen syllabus. 12. Op de contact pagina maak je een “form” (formulier) zoals je die vaak ziet, waarmee je informatie kunt versturen, zoals bv. hieronder (slechts een voorbeeld). Dit gaan we volgende week werkend maken, maar de “form” moet er nu al staan, en moet minimaal twee invulvelden bevatten, te weten “Naam” en “Email”. Je mag natuurlijk ook meer velden maken. Er moet ook een “verstuur” knop er onder of bij staan. Je kunt er een maken, kopiëren, of gewoon de standaard HTML knop gebruiken (<input type="submit" value="Verstuur">). Gebruik je HTML-editor’s functionaliteit als je een HTML editor gebruikt, de kennis die je wellicht al hebt, of als je dit nog niet kunt/weet het tutorial: http://www.w3schools.com/html/html_forms.asp. Maak het zo dat het verplicht is iets in te vullen, niet met javascript validatie of CSS, maar zoek uit welke HTML5 syntax dit voor je doet. 13. Haal alle pagina’s die je tot nu toe hebt gemaakt door een HTML validator (bv. http://www.w3.org/). Zorg dat eventuele fouten in orde komen. Rapporteer de output, en eventuele acties die je erop hebt ondernomen in de proces beschrijving. Zorg dat a. bovenstaande zaken vrijdag a.s. (14 november)om uiterlijk 23:59 online staan. b. beschrijf alle bovenstaande onderdelen van de opdracht in je proces beschrijving zodanig dat ze gemakkelijk terug te vinden zijn. Zorg dat dit ook vrijdag a.s. om 23:59 online staat. 5
© Copyright 2024 ExpyDoc
