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

Transcriptie

1 Dit document bevat een beschrijving van het proces van de Webdesign opdracht voor de cursus Informatie-uitwisseling van de opleiding Informatiekunde [64] [Arthur Hemmer ] [Mehul Mistry ] [

2

3 Procesbeschrijving Beschrijf bij alle genummerde items (ze corresponderen met items in de web design opdracht) wat jullie hebben gedaan, gemaakte keuzes, acties, en eventuele problemen en indien van toepassing andere opmerkingen. Week 1 3. Beschrijf keuzes Wat betreft de tools zijn wij van plan om er diverse te gebruiken. Zo is Dreamweaver van Adobe een erg handig programma om websites te bouwen, maar zullen wij af en toe ook gebruik maken van kleinere editors zoals Sublime Text of Notepad om kleinere, snellere veranderingen te maken. 4. Beschrijf acties, keuzes De URL die we gaan gebruiken is: de webserver ruimte van Arthur. 5. Beschrijf jullie huidige HTML/CSS kennis niveau. Hebben jullie van het oefenmateriaal gebruik gemaakt? Arthur: Mijn ervaring en kennis op het gebied van HTML en CSS is niet erg groot. Vroeger heb ik wel eens een persoonlijke site gemaakt en het een en ander gesleuteld aan WordPress thema s maar daar blijft het dan ook bij. Wel heb ik veel inzicht in computersystemen en ben ik bekend met software architectuur. Ik heb geen gebruik gemaakt van het oefenmateriaal. Mehul: Ik had nog geen ervaring met het werken met HTML en CSS. Om mijn kennisniveau wat op te schroeven heb ik het oefenmateriaal dat bij de opdracht stond doorgenomen en gemaakt. Dit ging goed. 6. Beschrijf acties, keuzes. Gelukt? Alleen voor Mehul was het nodig om te oefenen aangezien hij nog geen ervaring had met het werken van HTML en CSS. De oefeningen zijn goed gelukt, dus Mehul is nu ook klaar voor de echte opdracht.

4 Week 2 7. Beschrijf acties, keuzes Voor onze website hebben wij de volgende pagina s gemaakt: index, wie?, contact en dummy. Dit uiteraard aan de hand van de gegevens uit de opdracht. Bij contact hebben wij een leuk plaatje neergezet om de pagina wat op te vrolijken. 8. Beschrijf acties, keuzes Op iedere pagina hebben wij het een en ander geplaatst. Op de index pagina een Lorem Ipsum tekst; op de wie? pagina iets over onszelf; op de contact pagina een formulier en op de Dummy pagina een simpele header. 9. Beschrijf acties, keuzes In het menu hebben wij niet teveel tijd gestoken. We hebben ervoor gekozen om een table te maken en daar de links in te zetten zodat deze dan even ver uit elkaar op de pagina zouden verschijnen. 10. Beschrijf acties, keuzes We hebben een extern CSS bestand gemaakt genaamd stylesheet en deze in een submap genaamd CSS geplaatst. Dit bestand bevat slechts kleine veranderingen aan de stijlen van de headers, de body en de p(aragraph). 11. Beschrijf acties, keuzes We hebben besloten om een willekeurige afbeelding te plaatsen op het Wie? scherm. Deze afbeelding bevindt zich tevens in een submap genaamd images. 12. Beschrijf resultaten, acties De contactpagina hebben wij gemaakt met behulp van de gegeven website. Naast de twee input velden en de verstuur knop hebben wij voor de message een textarea gebruikt zodat de gebruiker zonder moeite een langer bericht kan typen. Voor de voor- en achternaam hebben wij dit niet gedaan omdat dat vaak niet nodig is.

5 13. Beschrijf resultaten, acties Na het maken van alle pagina s hebben wij ze allemaal door een HTML validator gehaald. Daar kwam bij iedere pagina dezelfde 9 fouten uit. Hieronder staat een screenshot van de fouten. Een groot deel van de fouten gingen over het feit dat er te veel attributes stonden in de table tag terwijl deze makkelijke verwerkt zouden kunnen worden met css. De andere fouten zaten in dezelfde categorie dus hebben we ook op dezelfde manier gefixt. Als laatste hebben we de aangegeven fout bij de pre tag opgelost door deze tag helemaal weg te halen. Daarnaast stond aangegeven dat de align attribute op de table moest worden verplaatst naar de CSS. Wij hebben niet kunnen vinden hoe dit moest dus hebben wij het zo gelaten.

6 Week Beschrijf acties, keuzes, waar geplaatst Voor het filmpje hebben wij gekozen om een filmpje van YouTube te halen van vallende penguins. Dit omdat het een erg grappig filmpje is en zoals omschreven op de pagina Wie? heeft Mehul af en toe last van fases met enorme penguinobsessies. 15. Beschrijf acties, keuzes, waar geplaatst Voor het implementeren van de font icons op de website hebben wij de map van de gegeven site gedownload en in onze CSS map gezet. Vervolgens hebben wij de voorbeeldcode van de site gebruikt om het font te implementeren. Voor ieder menu item hebben wij een representatief icoontje proberen te vinden. 16. Beschrijf acties, keuzes, waar geplaatst a. De php pagina wordt correct opgeroepen b. Er wordt een gestuurd naar opgegeven adres (soms in spamfolder) c. Er wordt een nieuw bestand met de opgegeven naam en gemaakt

7 Week Onze website is gemaakt met het webfont San Francisco (door Apple), meerdere stijlen van dit font zijn in onze site te vinden Het beeld verandert bij 750 pixels. De pagina is te vinden op de url: De pagina is te vinden op de url: LG FLATERON (PC scherm): 1663px of groter dan is het veld lichtblauw Ipad: px het scherm is geel Iphone 5: px het scherm is grijs De default kleur van het scherm is cyaan blauw, deze kleur krijgt de gebruiker te zien als zijn scherm buiten de gekozen schermgroottes valt.