Dit document bevat een beschrijving van het proces van de ‘Webdesign’ opdracht voor de cursus Informatie-uitwisseling van de opleiding Informatiekunde

Team #71: Bluelephant Marel Huijsmans, Jaber Roeleveldhttp://www.students.science.uu.nl/~3699692/infob1iuw/opdracht1/

Opdrac

ht 1

2014

-20

procesbeschrijving

Procesbeschrijving

Sprint 1

3. Keuze van tools

HTML en CSS maken:Het team wil ‘platte’ tekstverwerkers gebruiken voor zowel HTML, CSS en andere code bestanden. Marel haar voorkeur gaat uit naar Notepad++ en Jaber wil graag Sublime Text 2 gebruiken. Deze programma’s bewerken enkel losse bestanden en zijn daardoor volledig compatible.

Voor het interactief uitproberen van aanpassingen is gekozen gebruik te maken van de Firebug plugin voor de Firefox browser en de ingebouwde ‘inspector’ functie. Tevens is een in-browser preview zoals codepen.io te overwogen.

Bestanden Uitwisselen:Buiten de practicum uren moet er ook doorgewerkt worden, maar studenten kunnen niet bij elkaars persoonlijke web ruimte. Daarom is er besloten in een gedeelde Dropbox map een centrale kopie bij te houden. Deze functioneert tevens als een vorm van versiebeheer.

Validatie: validator.w3.org Voor het valideren van conformiteit HTML jigsaw.w3.org/css-validator/ Voor het valideren van conformiteit CSS browsershots.org Voor het verifiëren van correcte visuele representatie in verschillende

browsers.

4. Inrichting van bestandenBeide teamleden hebben al eerder gebruik gemaakt van hun webspace. Voor dit practicum is besloten dat Jabers webspace de officiële versie host. Bestandsoverdracht vindt plaats via WinSCP. Om zaken op orde te houden is er allereerst een map voor het vak aangemaakt met sub mappen voor de twee opdrachten. Deze drie mappen krijgen allen een eigen index HTML bestand zodat bezoekers niet stranden op een automatische map-index of foutmeldingspagina.

De HTML bestanden van de vier hoofdpagina’s worden in de opdrachtmap geplaatst. Afbeeldingen die direct in de pagina’s worden gebruikt worden in de map images geplaatst. Alle overige afbeeldingen en losse bestanden (zoals deze procesbeschrijving) worden in de map downloads geplaatst. Er is

een aparte css map voor CSS bestanden omdat hier mogelijk meerdere van gebruikt worden. Indien er los Javascript toegevoegd wordt zal dit in een scripts map toevoegen aan de opdracht map. Alle map namen zijn volledig in onderkast, omdat paden hoofdlettergevoelig zijn is een conventie noodzakelijk.

Na afronding van opdracht 1 zal het raamwerk worden gedupliceerd naar de map voor opdracht 2. Hier zal het inhoudelijk doorontwikkeld worden met betrekking tot het onderzoek naar Online Trust. Door gebruik te maken van relatieve hyperlinks zal het overzetten geen problemen opleveren.

5. Initiële pagina’sBeide teamleden hebben al ervaring met (X)HTML 4 en CSS 2.1, tevens interactieve pagina’s gemaakt met Javascript of Javascript-frameworks zoals jQuery.

Om van de leergelegenheid gebruik te maken is kortstondig informatie over HTML5 geraadpleegd bij het maken van de initiële pagina’s. Echter bestaan de pagina’s op dit punt nog steeds uit onopgemaakte tekst, waardoor het aantal zichtbare verschillen tussen HTML 4 en 5 erg klein blijft.

6. OefenenNa het initiële succes met HTML5 is er besloten dit nader te bestuderen. Met name gebruik van de nieuwe semantische elementen zoals nav, header en footer piekt interesse. Vanuit een technisch standpunt zijn deze niet erg verschillend van span en div, toch veranderen de elementen bijvoorbeeld het schrijven van CSS-selectoren. Echter roept dit wel nieuwe vragen op zoals wat een betekenisvolle nesting zou zijn van verschillende elementen.

Het correct nesten bleek uiteindelijk simpel op te lossen. De mens bepaalt wat betekenisvol is, de HTML5 standaard is erg flexibel in wat een valide nesting is. Verschillende prototype pagina’s kwamen ongeschonden door de W3C-validator. Wellicht dat het interessant kan zijn te onderzoeken hoe zoekmachines of toegankelijkheidsvoorzieningen zoals schermlezers omgaan met deze elementen om zo een meest wenselijke structuur vast te leggen.

Hoewel table elementen juist uitermate geschikt zijn voor het representeren van tubulaire data, werd hier vroeger ook misbruik van gemaakt om de hele site layout mee te verzorgen. Niet alle tables zijn slecht, maar veel layout kan nu met CSS opgelost worden. Als oefening hebben we de table opdracht uit de syllabus omgeschreven naar andere HTML elementen met CSS table styles.

Vaak betekenen CSS tables dat elementen zoals table, tr en td allen worden vervangen door div’s (met verschillende klassen). Hierdoor gaat eigenlijk betekenis verloren. Daarom is er geëxperimenteerd met de table styles voor tabellen rijen en cellen op nieuwe semantische HTML5 elementen toe te passen zoals adress of pre en het strong element dat nadruk impliceert. Het blijkt hieruit dat al deze elementen zich gewoon direct als tabelonderdelen kunnen weergeven, een geslaagde test.

Semantiek Opmaak Resultaat

Sprint 2

7. Vier Pagina’sEerst zijn er vier bestandsnamen gekozen. Klikbare tekst in links en titels is minder definitief, maar paden vaststellen is wel handig. De bestandsnamen zijn zo kort en bondig mogelijk gekozen, terwijl de paginatitels uitgebreid zijn. De namen in de navigatiebalk waren lastiger te kiezen, overeenstemming met paginatitels is wenselijk maar de kortere namen staan toch overzichtelijker.

Er is besloten eerst de dummy pagina te maken, en deze verschillende elementen te geven om zo te testen of deze prettig en correct genest zijn. Vervolgens is de pagina aangepast tot de overige 3 pagina’s. Jaber werkte aan pagina skelet met kolom-structuur, Marel aan navigatie en het formulier.

8. Pagina InhoudDe dummy pagina is gevuld met een automatische vultekst van lipsum.com. Koppen, links en nadrukken zijn handmatig toegevoegd om zo veel mogelijk verschillende elementen aan bod te laten komen.

Het pagina-skelet bevat nu een header, navigatiebalk, hoofd inhoudsgebied, optioneel extra inhoudsgebied en een footer. Ook wordt de taal voor de pagina gedefinieerd op het root element, en zal later het stylesheet in de head ingeladen worden.

9. NavigatieDe navigatiebalk was eerst in dummy geïmplementeerd, vervolgens naar alle andere gedupliceerd. We hebben een ongeordende lijst links in het semantische element nav gebruikt.

10. Externe CSSDeze was eenvoudig op te stellen dankzij de dummy pagina. Op dit moment is er enkel behoefte aan een bestand main.css. Het bevat testkleuren om H1, H2 en H3 te differentiëren en regels om inspringede paragrafen te tonen. Het bevat ook stijl regels om navigatielinks horizontaal uit te lijnen, en een poging de hoofd en extra inhoud in twee kolommen weer te geven. (Voor geavanceerdere kolom lay-outs zal de pagina structuur aangepast moeten worden.)

Tot slot zijn er simpele achtergrond kleuren om blokelementen te onderscheiden toegevoegd, niet voor smaakvolle vormgeving.

11. AfbeeldingDit is allereerst uitgeprobeerd met externe afbeelding op dummy pagina. Vervolgens is gekozen dit toe te passen met ons eigen logo op teampagina. In een later stadium wordt dit logo mogelijk een vast onderdeel van de header.

12. ContactformulierHet formulier was eerst apart gemaakt in een tijdelijke pagina, vervolgen samengevoegd met het skelet uit de dummypagina. Het formulier maakt gebruik van de required en placeholder attributen om de gebruiker te helpen bij het correct invullen van het formulier. Ook zijn er labels voor de verschillende invoervelden.

13. ValidatieValideren op het eind is nooit een best plan, vooral wanneer de pagina’s zoveel elementen delen. Daarom is er al gevalideerd op de dummypagina alvorens de header, navigatie en footer naar andere pagina’s te dupliceren. Zo bleek tijdens het valideren van de navigatie al snel dat een anchor was vergeten te sluiten. Ook de inhoud van het formulier was al apart gevalideerd.

Uiteraard moet het eindresultaat nog wel een keer gevalideerd worden wanneer alles samenkomt. Mogelijk zijn sommige gedeeltes per abuis niet goed overgenomen vanuit de dummy pagina waardoor nesting niet klopt. Gelukkig kwamen er geen problemen aan het licht. Ook hebben we het CSS bestand succesvol apart laten valideren.

Er Voor

Zonder CSS

Resultaat met CSS

Sprint 3

14. HTML VideoAls video is gekozen voor een zelfgemaakt toeristen filmpje van de Eiffeltoren, dit is een herkenbaar object. De video is geplaatst op de dummy pagina omdat de gekozen video weinig toevoegt aan een van de 3 pagina’s met inhoud.

Hoewel de HTML voor het video element nog redelijk voor zichzelf sprekend was, was het nog wel een taak om de video in alle ondersteunde (en minder ondersteunde) formaten aan te leveren. Dit is nodig omdat er onenigheid is over de te standaardiseren codex (gelicenceerde technieken en openstandaarden concurreren en presteren verschillend in efficiëntie en beeldkwaliteit). Verschillende browsers ondersteunen verschillende formaten. Daarom hebben we 3 formaten aangeboden, MP4/h.264, webm, en Ogg. Deze worden als 3 sources in het video element aangeboden.

Bij het omzetten naar bepaalde formaten werd wel de beeldinformatie correct getranscodeerd, maar meta informatie zoals de duur van de video werd niet altijd correct overgezet. Verschillende implementaties blijken zeer uiteenlopend om te gaan met dit soort incorrecte gegevens.

Ook het schalen van het HTML video element geeft niet altijd het gewenste resultaat wanneer controls aanstaan. Elke implementatie is vrij deze naar eigen inzicht vorm te geven, hierdoor zijn ze niet allemaal even robuust. Bijvoorbeeld wanneer het video element te klein wordt komen in Firefox controls buiten het element terecht en lijnen niet meer op een logische manier uit.

Bij het testen blijkt dat moderne browsers voor sommige video formaten nog steeds plug-ins inzetten, echter hoeft niet ieder deze te hebben. Zo gedragen browsers met hetzelfde versienummer toch erg verschillend. Een test in browsershots is noodzakelijk voor een duidelijker beeld van out-of-the-box ondersteuning.

15. Iconen Uit WebfontsEr is gekozen voor het gratis font-awesome. Omdat een laag bezoekersaantal wordt verwacht en het eenvoudig uit te pakken is naar de webspace is dit een prettige manier om de site onafhankelijk van een extern content-delivery-network te laten functioneren.

We hebben een icoon geïntroduceerd voor tekstbestand bij de download link van deze procesbeschrijving. Dit is gedaan doormiddel van een leeg span element met de juiste class styles aan te maken. Er werd een leeg i element aangeraden, maar dit leek ons semantisch incorrect omdat dit betekent dat de inhoud benadrukt wordt, wat eigenaardig is voor een leeg element.

Het prettige aan de CSS styling is dat deze de speciale karkater codes in de DOM introduceert via de CSS :before pseudoselector, hierdoor zijn de karakters geen onderdeel van onze eigen HTML code.

16. Contactformulier Verwerken Met PHPEr is gekozen om het script send.php te noemen, het is in dezelfde map als index.html geplaats. Wel is er een aparte schrijfbare map logs aangemaakt waar PHP naar kan schrijven, dit omdat we niet willen dat derden naar de gehele subtree voor opdracht 1 kunnen schrijven. Door in deze logs map een .htaccess te plaatsen die alle HTTP verzoeken weigert, is het ook niet meer mogelijk voor derden om via apache naar deze map te schrijven (bijvoorbeeld met een exotische HTTP-PUT), ook niet naar deze .htaccess zelf.

PHP wordt al ingevoegd voor het eerste HTML, indien er headers verstuurd moeten worden vanuit PHP is dit nog steeds mogelijk. Het eerste wat het PHP script doet is een paginatitel en een stuk feedback in twee variabelen opslaan. Deze worden later versnippert in de HTML ge-echo-t op de relevante plekken. Aanvankelijk bevatten deze variabelen een tekst voor de failure state, het bericht was niet verzonden.

Indien de PHP pagina is opgevraagd via een POST request zal het script meer acties ondernemen, als er een andere request was (zoals een gewone GET) dan blijft de failure state tekst in de variabele en zal op de pagina uitgevoerd worden. Dit is omdat GET requests zich beter lenen voor misbruik (niet dat POST dit geheel zelfstandig uitsluit).

Indien er wel een POST is gemaakt wordt de formulierinhoud in de $_POST superglobal met postdata gezocht. Deze wordt meteen opgeschoont met de functie htmlspecialchars omdat deze later in de pagina en in een email weergegeven gaan worden. Indien er niet opgeschoond zou worden kan een gebruiker willekeurige HTML in een pagina injecteren, en dus ook JavaScript.

Vervolgens worden de 3 verwachte variabele, naam, mail en bericht gecontroleert op bestaan, een oude client kan namelijk nog geen required attribuut ondersteunen. De bezoeker moet van ontbrekende velden adequaat op de hoogte gesteld worden.

Indien de velden correct zijn ingevuld gaat de server over op het mailen.

Tot slot wordt (het proberen van) het versturen van een bericht gelogd in ./logs/send.log. Let op dat deze map is afgeschermd van de buitenwereld. We laten de gebruiker geen bestandsnamen invoeren omdat deze opschonen een niet-triviale zaak is, bijvoorbeeld door directory traversal. Dit hadden wij afgeraffeld kunnen implementeren, maar dit toont naar ons inzien niet extra vaardigheden boven het al kunnen parsen van het mail adres of andere velden. Het is beter om deze opschonen over te laten aan een professioneel framework zoals CodeIgniter of PHPSEC omdat er te veel randgevallen zijn voor twee studenten om in deze tijdsperiode af te dekken.

Een alternatieve logfunctie wordt getoond voor compleetheid.

Gebruikte Log Log met aanpasbare naam voor bestand

[18/Nov/2014:00:03:29]========================Beste Jabo,<br>Bedankt voor het invullen van het formulier. We zullen u binnenkort via u uw adres jaber.spam@gmx.com contacteren.<br>Met vriendelijke groet,<br>Bleulepant<br>U schreef:Termieten en olifanten zijn goede vrienden.[18/Nov/2014:00:04:14]========================Beste marel,<br>Bedankt voor het invullen van het formulier. We zullen u binnenkort via u uw adres marehui@gmail.com contacteren.<br>Met vriendelijke groet,<br>Bleulepant<br>U schreef:pindaaaaaaaaaaaas[18/Nov/2014:00:07:47]========================Beste Jabo,<br>Bedankt voor het invullen van het formulier. We zullen u binnenkort via u uw adres jaber.spam@gmx.com contacteren.<br>Met vriendelijke groet,<br>Bleulepant<br>U schreef:Ons log is super cool.[18/Nov/2014:00:08:31]========================Beste marel,<br>Bedankt voor het invullen van het formulier. We zullen u binnenkort via u uw adres marehui@gmail.com contacteren.<br>Met vriendelijke groet,<br>Bleulepant<br>U schreef:water pwr

Uitvoer

Mogelijk belangrijk in de toekomst is het limiteren van het aantal berichten in een tijdsperiode en het herkennen van geautomatiseerde processen die misbruik maken van het formulier.

Bijvoorbeeld: door naast het log, een timestamp apart opslaan; door een veld toe te voegen wat mensen niet invullen maar bots wel.

Sprint 4Let op: Er is geen vereiste met nummer 17 in de opdrachtbeschrijving.

18. WebfontNa in het algemeen te kijken hoe de CSS @font specificatie in elkaar steekt hebben we op FontSquirrel een leuk webfont uitgekozen: Aierbazzi. De download hiervan was eenvoudig uit te pakken naar de server. Door te linken naar het bijgeleverde stylesheet met de @font uitdrukking en ons oorspronkelijke stylesheet een font-family attribuut te geven voor paragrafen wordt het font nu correct weergegeven in recente browsers op verschillende platformen.

Omdat Aierbazzi misschien niet voor iedereen gemakkelijk leest hebben we een class plantjes toegevoegd, zodat deze later met javascript toegevoegd of verwijderd kan worden. (Jammer genoeg bleek het font ‘Dyslexie’ niet verkrijgbaar in web formaten.) Daarom wordt het font alleen op de dummy pagina getoond.

19. Responsive StylesEr is gekozen om de Bootstrap pagina index.html te noemen zodat de responsive map meteen een pagina toont op de server. Wederom is er gekozen om de CSS bestanden lokaal te hosten gezien het lage verwachte bezoekersaantal en onafhankelijkheid van CDNs. Voor het maken van het navigatiemenu is er voor gekozen om niet W3Schools te raadplegen, maar naar de broncode van verschillende voorbeeld layouts te kijken op de Bootstrap site. De Bootstrap layout verandert het navigatiemenu wanneer de schermbreedte minder dan 768 pixels wordt. Bij deze grens veranderen ook veel marges, kolombreedtes en groottes van paginatitels.

Op onze eigen responsive pagina hebben we ranges voor smartphones, tablets en grote schermen opgenomen (in plaats van 3 specifieke devices). De opdracht is verwarrend omdat de aangeleverde CSS stelt dat tablets in portrait mode moeten, terwijl de opdracht stelt dat er vrij gekozen mag worden in oriëntatie. Voor zekerheid is er gekozen voor portrait mode. Voor telefoons in portrait mode hebben we gekeken naar iPhone 5 tot en met Galaxy Note, deze krijgen een rode achtergrond. Tablets van een Kindle tot Galaxy Tab krijgen een groene achtergrond. In plaats van alle overige schermgroottes op laptops en PCs te stijlen, stijlen we pas vanaf Full HD shermen tot en met Ultra Wide 4K schermen (een soort ‘big picture mode’) deze krijgen een blauwe achtergrond. Ook verandert het navigatiemenu voor bredere schermen.

@media only screenand (min-width : 300px) /* just below iPhone 5, anything lower would be odd*/and (max-width : 449px) /* just above Galaxy Note */{...}

/* Tablet (portrait). Excluding "Phablets" */@media only screenand (min-width : 450px) /* just below Kindle Fire HD7 */and (max-width : 900px) /* just above Galaxy Tab 3 10'' */{...}

/* Laptop/PC. Starts at Full HD, up to Ultra Widescreen HD. Note the intentional gap between Tablet and PC, at these sizes none of the 3 styles should be applied! */@media only screenand (min-width : 1080px)and (max-width : 5120px) /* 4K / ULTRA HD */{...}

Mobiel Groot Scherm

Oefenen met JavascriptDoor jQuery in te laden vanaf het pad wat al was ingericht voor het responsive design kan eenvoudig met toggleClass(“plantjes”) het webfont op de dummy pagina uitgeschakeld en weer ingeschakeld kan worden. Door een HTML button te maken en met jQuery een click handler te registreren kan de gebruiker dit zelf interactief doen.