WB1130 – Instructie website maken1 IntroductieIn de WB1130 Ontwerpopdracht is aangegeven dat de resultaten van ontwerpopdracht worden gedocumenteerd in een een-pagina project-website. Het gaat daarbij om het documenteren van:

1. de ontworpen de mechanische grijper – het eindresultaat --2. het ontwerpproces, de toegepaste methodes en de gemaakte ontwerpkeuzes– het

totstandkomingsprocess --

in een overzichte site. Het is niet zo: wie de mooiste en meest geavanceerde website heeft, die scoort het best. Maar aan de andere kant: reviewers vellen een oordeel op basis van de website en gaan niet alle grijpers zelf uitproberen. Dus je site moet wel een goed en compleet beeld geven van de teamprestatie.

Het is niet de bedoeling van WB1130 om heel veel tijd te besteden aan de technische complicaties van een website. Er zijn twee trajecten voor het maken van een site, waaruit je kunt kiezen:

1. Er is een template beschikbaar voor een website die je zelf kunt aanpassen voor jouw project;2. Je weet hoe je een site ontwerpt en bouwt en kiest zelf je tools daarvoor, bv. WordPress.

De website gaat draaien op een web server van de TUDelft. In deze Instructie wordt aangegeven hoe je zo’n site klaarmaakt en wat er wordt verwacht t.a.v. de inhoud van de site.

2 De TU Delft web serverWe beginnen met de omgeving waarin de site gaat draaien: de TU Deflt web server. Besef dat je website via deze server voor lange tijd door de hele wereld gezien kan worden. Denk dus goed na wat je daarop plaatst en let op met:

‘studentikoze’ uitingen; Idem foto’s; Verwijzingen naar je eigen rol en bijdrage;

De TU Delft is (als web server eigenaar/beheerder) zelf ook verantwoordelijk voor een aantal aspecten, onder andere op grond van de bepalingen in de Wet Bescherming Persoonsgegevens (Wbp). Als uitvloeisel daarvan mogen er geen studienummers op de site worden vermeld. Het weren van dit belangrijke koppel-gegeven is vooral ook in het belang van je eigen privacy en cyber security.

Naast inhoudelijke zijn ook technische aspecten van belang. Die worden hier niet allemaal in detail besproken. Het belangrijkst is dat er een index.html bestand (of equivalent) moet zijn dat door de server kan worden geladen en dat de toegang verschaft tot je site. Verderop wordt uitgelegd wat dat inhoudt en hoe dat moet.

Release 1.0.4 pg. 1/8

3 Het klaarmaken van de siteHTML is, simpel gezegd, een opmaaktaal voor websites. Een website maken is dus eigenlijk niets anders dan een HTML-bestand maken dat in de server kan worden geladen en getoond in een browser. In dat HTML-bestand beschrijf je zowel de opmaak (de structuur) van de website, als de tekstinhoud. Een HTML-bestand kan met een simpele editor als WordPad of NotePad worden gemaakt. Dat bestand maak je klaar (in ons geval) in een folder die alleen voor jouw team is bestemd. Ieder team krijgt zijn eigen folder (zie BlackBoard). De folder staat op de netwerkschijf Student Group Data (J:)/3me/projects/project/2016/ . Je kunt er dus niet zomaar met je eigen laptop naar toe (die kent immers die netwerkschijf niet), maar wellicht moet je eerst even achter een studenten-PC plaatsnemen.

De server weet ook waar die folder te vinden is en zoekt dan in de folder van jullie team naar de index.html file. Die wordt automatisch geladen als iemand in de browser naar jouw website navigeert.

4 De website templateDe template is een HTML-bestand als hierboven beschreven, waarmee al een volledge website wordt geimplementeerd, met wat voorbeeld-tekst. Jij kunt je dan concentreren op het aanpassen van de tekst. De opmaak e.d. (de structuur) zit al in het template en kan zo worden over genomen. De template website die is ontwikkeld kan op vrijwel alle platforms worden bekeken (mobiel, laptop, desktop ...). Er zitten een paar extra bestanden bij om zelf wat mee te experimenteren tijdens het maken van je site. Zo kun je snel van start, ook als je nog niks van HTML weet.

Voor wie dat interessant vindt: de template is gebaseerd op HTML5-plus-CSS3. Dat is de jongste HTML standaard1 die inmiddels door nagenoeg alle browsers op alle platforms wordt ondersteund. De kopjes, de teksten, de tabellen, de plaatjes e.d. die in de template zijn opgenomen, kun je gemakkelijk zelf aanpassen. Je kunt de stijlen in de template laten zoals die zijn, maar als je wilt kun je alles aanpassen. Je hoeft in feite maar één bestand te ‘editen’ en de plaatjes integraal te vervangen door de meegeleverde plaatjes-bestanden te overschrijven met jouw plaatjes.

4.1 De template bekijkenAls je gebruik wil maken van de template, of eerst eens naar de template wil kijken, ga dan naar de folder van jouw team en doe dan dit (we nemen even wb112 als voorbeeld):

1. Pak de compressed folder website-templ-104.zip die je aantreft in de folder van je team, uit; zet alle uit te pakken bestanden in je team folder Student Group Data (J:)/3me/projects/project/2016/wb112. Bewaar website-templ-104.zip als backup, mocht het helemaal mis gaan;

2. Dubbel-klik op het bestand project-site-template.html zodat het in je browser zichtbaar wordt;3. Bekijk ook de andere bestanden, met name het bestanden header.jpg , groep-icon.png en

groep-foto.jpg, en check het template in de browser om te zien of je deze foto’s terug kunt vinden in je browser.

4.2 Het aanpassen even uitproberenAls je heel simpel wilt beginnen met aanpassen, dubbel-klik dan eerst op SimpleHTML.html en bekijk het resultaat in je browser. Open SimpleHTML.html daarnaast in een tekst editor zoals WordPad of

1 Zie: https://www.w3.org/standards/

Release 1.0.4 pg. 2/8

NotePad om te zien hoe het is gemaakt. Experimenteer wat met de teksten en vervang bv <h1> en </h1> eens door resp. <h3> en </h3>. Vergeet niet de wijzigingen op te slaan en pas daarna je browser te refreshen.

4.3 Aan de slag met je siteOm nu echt van start te gaan met je eigen site, volg je deze stappen:

1. Kopieer het bestand project-site-template.html en hernoem dat in index.html. Vanaf nu ga je index.html bewerken;

2. Open het bestand index.html met een editor (dus niet dubbel klikken maar rechts-klikken en dan Openen-met ... bv. WordPad);

3. Als eerste stap doe je dit:a. Zoek-en-vervang in index.html de tekst wb112 door wb01, of welk groepsnummer je

groep ook maar heeft;b. Zoek een geschikte foto als opening (banner) voor je site en plaats die in je website

folder. Hernoem het huidige bestand header.jpg in header.jpg.org en hernoem dan jouw foto vervolgens in header.jpg;

c. Sla alle wijzigingen in index.html op en open dan het gewijzigde bestand in je browser. Je ziet nu overal jouw groepsnummer waar wb112 stond en je ziet nu jouw header foto als opening van de site (wel eerst refreshen; soms moet je zelfs even de site opnieuw laden in een nieuw tabblad of de hele browser opnieuw starten om jouw header foto te zien);

d. In de meeste browsers zit een optie om de source van de pagina te bekijken (meestal via rechter muisknop; Firefox: View Page Source). Doe dit en stel vast dat je wijzigingen van net inderdaad zijn geladen;

e. Zo gaan we ook de rest van de inhoud aanpassen. Als je een belangrijke tussenversie hebt, bewaar dan die versie als backup. Dan hoef je niet helemaal overnieuw te beginnen als er iets fout gaat.

4. Verder aanpassen van je project-website:a. Als je een hoofdstuk of paragraaf wilt tussenvoegen, gebruik dan een simpele copy-

paste: zoek een voorbeeld, kopieer dat in zijn geheel (met kopje en al) en paste dat waar je het hebben wilt. Als er ergens een id staat, pas dat dan aan, als volgt:

<h1 id=”Hoofstuk_1”>Hoofdstuk 1: Opdracht</h1>

Wordt bijvoorbeeld:

<h1 id=”Hoofdstuk_2”>Hoofdstuk 2: De Aanpak</h1>

Id’s zijn handig voor verwijzingen. Bijvoorbeeld vanuit het menu; zie de aanwijzigingen in de template en probeer het uit. Zorg wel dat id’s uniek zijn.

Let op: <h1> is voor hoofdstukken (of secties), <h2> is het niveau daaronder (en niet voor Hoofdstuk 2 ), <h3> is weer een niveau lager, etc. Je hoeft niet zoals bij Word moeilijk te doen; als je van een hoofdstuk een paragraaf wilt maken dan maak je van een <h1> een <h2> en ook van de aflsuitende </h1> een </h2>.

5. Externe verwijzingen:

Release 1.0.4 pg. 3/8

a. Een van de meest lastige dingen in HTML is een externe verwijzing maken, bv naar de website van een sponsor, of van een leverancier. Dat gebeurt:

1. met verwijzing in de vorm van een tekst (naam bv), of: nog moeilijker;2. in de vorm van een plaatje waar je op kunt klikken.

Wat je wilt is dat als iemand op de tekst klikt (1) of op het plaatje klikt (2), de browser de externe verwijzing opent. Dat werkt in HTML via een <a href=”... een hyperlink reference ...”>een tekst of een plaatje</a>. Voorbeeld:

1. <a href=”http://3me.tudelft.nl”>de site van 3ME</a> (je ziet nu: ‘de site van 3ME’ in je tekst staan, als verwijzing, en als je daar dan op klikt, kom je op de site van 3ME)

2. <a href=”http://3me.tudelft.nl”><img src=”3ME.jpg”></a> (je ziet nu een plaatje van 3ME dat in een extern bestand 3ME.jpg staat en verwijst naar de 3ME site)

In het template staan van zowel (1) als (2) voorbeelden.

b. Wat met plaatjes kan, kan ook met een video. Gebruik een afbeelding die de video moet voorstellen om een hyperlink naar de video zelf in je site op te nemen (dat is dus methode 2). Zie de template voor een voorbeeld.

4.4 Test je siteBekijk je site in verschillende browsers (Safari, Edge, Firefox, Internet Explorer, Opera enz. zoveel als je kunt. Niet alleen op je laptop maar ook op je mobiel. Er is altijd wel iets dat niet direct lukt. Een aantal typische voorbeelden:

De fonts (het lettertype) is helemaal anders! In het template worden niet alle fonts gespecificeerd. Het is goed gebruik om zoveel mogelijk open te laten voor de gebruiker. Als in je browser dus een ander default font is ingesteld, dan ziet het er inderdaad anders uit. Ga naar de browser opties en probeer een aantal andere fonts uit.

De indeling van de site is heel anders omdat alles er veel kleiner (groter) uitziet! Schaal de site dan totdat de grootte ongeveer is wat jij had ingesteld en beoordeel dan de site opnieuw. In- en uitzomen (schalen) is meestal een kwestie van CTRL + muiswieltje.

De banner foto in de opening van de site ziet er niet uit! Dat is vaak het geval als je bv een 400 x 200 pixel plaatje laat zien, over de volle breedte, op bv. een 1280 pixel breed display. Neem dus een plaatje met meer pixels (net zoveel pixels als het grootste scherm is een goede regel).

De hyperlinks (de externe verwijzigingen) hebben een totaal ander uiterlijk dan op mijn computer! Dan heb je waarschijnlijk geen stijl-instructies gegeven in het CSS-gedeelte van je HTML bestand, voor dit element, en dan wordt dus weer de instelling van de browser van dat moment genomen. Dat kan met alles gebeuren waarvoor je geen (volledige) stijl-voorschriften hebt gespecificeerd. Je kunt kiezen om dat alsnog te doen of over te laten aan de gebruiker zelf.

Het aantal kolommen op de site is veel minder (meer) dan op mijn computer! Dat kan het geval zijn als er minder (meer) ruimte is op het platform waarop je test; bv op je mobiel is er wellicht maar ruimte voor één kolom. Probeer je mobiel maar eens een kwartslag te draaien (landscape), of de inhoud van de site te verkleinen door uit te zoomen. Normaal past de inhoud zich ‘vanzelf’ aan aan de beschikbare ruimte (breedte) die wordt geboden.

Release 1.0.4 pg. 4/8

De video wil niet afspelen! Waarschijnlijk is er geen codec om je video af te spelen, of de MIME-type associatie is niet goed ingesteld. Om dit soort technische problemen te voorkomen is het het makkelijkst is om de video te uploaden naar YouTube, een link naar je video in je tekst te copy-pasten en hem dan in YouTube af te spelen.

5 De WordPress aanpakVeel studenten zijn vertrouwd met WordPress. WordPress is een complete software omgeving (een content management system), waarin je HTML kunt schrijven, stijlen en complete themes kunt aanpassen en direct kunt zien wat het effect is. WordPress heeft panklare webonderdelen, zoals bv een blog, of een news feed. Het eindresultaat kun je in zijn geheel publiceren op de server. WordPress kunt je op je eigen computer installeren, maar ook online gebruiken via wordpress.com (zie onder).

Afbeelding 1: online WordPress platform; maak een account aan en creeer de project-website met WordPress. Je publisht daarna op de TUDelft website.

Als aanleveren of verwijzen moeilijkheden oplevert, overleg dan even met je de site beheerder of met de projectonderwijs coordinator.

6 Plaatjes maken van je grijperPlaatjes maken kan het gemakkelijkst als volgt:

1. Zorg dat je plaatje te zien is op je computer;2. Maak een schermafdruk en paste die in PowerPoint of een ander programma;3. Bewerk de afbeelding in PowerPoint;4. Exporteer (Save As) de slide met de afbeelding als plaatje (PNG of JPG zijn prima formaten voor

het web; liever geen GIF meer);5. Dat plaatje gebruikt je nu om extern aan te refereren vanuit je HTML bestand.

Release 1.0.4 pg. 5/8

7 Videos maken van je grijperEen video maken gaat het gemakkelijkst met je eigen mobieltje. Maak de video niet te lang en te groot. Verschillende formaten kunnen worden getoond, maar of dat altijd goed gaat hangt af van de omgeving waarin de video moet worden getoond. De veiligste en gemakkelijkste werkwijze is als volgt:

1. Maak je video(s) klaar op je eigen computer2. Upload ze naar bv YouTube3. Copy de URL van je video en gebruik die in de externe referentie naar je video.

De template bevat een voorbeeld-video met referentie zoals als hierboven beschreven.

8 HTML editorsIn plaats van WordPad of NotePad kun je ook een speciale HTML-editor gebruiken. Voorbeelden daarvan zijn BlueFish, Notepad++ of Sublime Text3.

Release 1.0.4 pg. 6/8

Afbeelding 2: Het document SimpleHTML.html in BlueFish. Merk op dat de HTML tags worden gekleurd en bij elkaar horende tags worden opgelicht. Je kunt veelal zelf deze ‘syntax coloring, aanpassen. Een editor als deze is niet ingewikkeld dan bv WordPad, maar controleert wel direct of U geen fouten maakt.

Release 1.0.4 pg. 7/8

Afbeelding 3: Het document SimpleHTML.html in Notepad++.

9 JavascriptEen site die op deze wijze wordt gemaakt, is in feite een statische website. Met javascript kan al iets meer worden geprogrammeerd of: ge-script. De template bevat een stukje Javascript om te laten zien waar dat komt in het HTML-bestand. We gaan hier niet nader in op Javascript. Als je weet hoe je daarmee verder kunt, is het beschikbaar. Heb je geen idee wat je met Javascript moet, laat het dan met rust en negeer het.

Release 1.0.4 pg. 8/8