procesbeschrijving. Opdracht 1

Transcriptie

1 Opdracht 1 procesbeschrijving Dit document bevat een beschrijving van het proces van de Webdesign opdracht voor de cursus Informatie-uitwisseling van de opleiding Informatiekunde Team 28 Randell Rasiman & Thomas van der Meer

2 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 We hebben als editor gekozen voor Notepad ++, op aanraden van onze student-assistent. Dit is clean, makkelijk en doet wat het moet doen, dus voor ons de ideale keuze. 4. Beschrijf acties, keuzes We hebben er voor gekozen om op het studentnummer van Thomas van der Meer de website te maken omdat dit zo uitkwam. We hebben via Filezilla de site aangemaakt, de map www toegevoegd en daarin het HTML-document index.html. Hierin hebben we onze header toegevoegd met een link naar de procesbeschrijving. 5. Beschrijf jullie huidige HT ML/CSS kennis niveau. Hebben jullie van het oefenmateriaal gebruik gemaakt? We hebben allebei in een heel klein beetje HTML geschreven in onze middelbareschooltijd. Echter is dit niet tot nauwelijks noemenswaardig voor Thomas, voor Randell geldt hetzelfde. 6. Beschrijf acties, keuzes. Gelukt? Er is alleen gewerkt aan onze eigen website. We hebben allebei geen tuturials gevolgd om extra te oefenen.

3 Week 2 7. Beschrijf acties, keuzes We hebben de indexpagina code 4 keer gekopieerd en van daaruit aan gaan passen. Zo hebben we de title, header en inhoud aangepast van alle verschillende pagina s. We hebben 4 links gemaakt naar elke pagina toe. 8. Beschrijf acties, keuzes We hebben een h1 en een h2 op elke pagina toegevoegd. Daarnaast hebben we de p gevuld op alle pagina s met of relevante informatie voor die pagina, of lorem ipsum. 9. Beschrijf acties, keuzes We hebben opgezocht hoe een menu werkt en aan de hand van de tutorial hebben we het menu gemaakt. Daarna hebben we onze eigen kleuren toegevoegd aan het menu, net zoals een Google Font. 10. Beschrijf acties, keuzes We hebben in het index.css bestand onderscheid gemaakt tussen de h1, h2 en p door verschillende lettertypes, kleuren en groottes. Daarnaast hebben we de textbox een kleurtje gegeven. 11. Beschrijf acties, keuzes We hebben een foto toegevoegd aan de pagina Over Ons. We hebben eerst een directory aangemaakt in de map www Images waarin we vervolgens een foto hebben toegevoegd. Deze foto hebben we met behulp van een tutorial op internet toegevoegd aan de site. 12. Beschrijf acties, keuzes We hebben een form gemaakt onder het kopje contact. Hier kunnen mensen vragen stellen. Ze moeten hun voornaam, achternaam en adres invullen. Er moet een adres ingevuld worden, anders kan het niet verstuurd worden. We hebben het voorbeeld van internet genomen om een form te maken. 13. Beschrijf resultaten, acties We hebben de site door een validator gehaald. Daaruit is gebleken dat we 1 fout hebben, namelijk dat onze site niet gecodeerd is waardoor gevoelige informatie kan worden gevonden door kwaadwillende. Dit laatste punt hebben we opgelost door een utf-8 encodering toe te passen op de tekst.

4 Week Beschrijf acties, keuzes, waar geplaatst Op de dummiepagina hebben we een video geplaatst aan de hand van een html handleiding op internet. Door html5 is het nu heel makkelijk om een video in te voegen in de webpagina. We hebben de video zelf in een map genaamd videos gestopt en een begeleidende tekst toegevoegd. 15. Beschrijf acties, keuzes, waar geplaatst We hebben via de site Awesome Fonts een copyrighticoontje in de footer van de webpagina s gezet. Dit was heel makkelijk door een speciaal gemaakte line van de site in de header te zetten en een line waarin de icon wordt gekozen op de plek aan te roepen. 16. Beschrijf acties, keuzes, waar geplaatst A. We hebben het formulier gebruikt op de contact pagina dat al in een vorige opdracht is gemaakt. Hierbij hebben we een kopie van contactpagina gemaakt genaamd succes.php. Hierin hebben we in het deel waar normaal het formulier staat het php gedeelte gebouwd. Daarin nemen we alle variabelen die zijn ingevuld in het formulier mee naar de succes pagina. Hier wordt dan persoonlijk antwoord gegeven door de naam van de persoon en het adres te herhalen in de tekst met behulp van de get methode van php. B. C. We hebben een stukje van de methode overgenomen van de html oefenpagina waar we onze eigen variabelen hebben gestopt. Nu worden de bestanden geordend op de naam die de mensen invullen op het form. De inhoud van de tekstfile bevat eerst de , gevolgt door de vraag van het desbetreffende persoon. Deze worden opgeslagen in de www map van onze site.

5 Week We hebben een google font gebruikt. Deze hebben we opgezocht op internet en de link in de header gezet. In de index.ccs file hebben we aangegeven dat alles in <P> en in het menu het lettertype krijgt. 19. A. We hebben responsive.html aangemaakt in de map responsive in de map www. In deze map hebben we ook responsive.css gecreëerd. Het antwoord op de vraag bij hoeveel pixels het menu veranderd is 768px, 992px en 1200px. Respectievelijk voor smartphone, tablet en pc. B. We hebben de line overgenomen en gekopieerd in de responsive.html C. We hebben de css inhoud gekopieerd en geplakt in de responsive.css file. D. We hebben een body aangemaakt in de inhoud van de PC. Daar de kleur verandering in aangebracht E. Voor de smartphone hebben we de minimale waarde voor pixels uit de lijst van smartphones genomen. Deze ingevuld als minimale waarde en in de body die we hebben aangemaakt een kleurverandering van de achtergrond gemaakt. De maximale waarde van de smartphone hebben we laten aansluiten op de minimale waarde van tablets zodat er geen wit deel tussenkomt als je width in dat dode gebied zouden liggen. F. Voor tablets hebben we de minimale waarde voor pixels uit de lijst van smartphones genomen. Deze ingevuld als minimale waarde en in de body die we hebben aangemaakt een kleurverandering van de achtergrond gemaakt. De maximale waarde voor tablets hebben we laten aansluiten op de minimale waarde van PC s zodat er geen wit deel tussenkomt als je width in dat dode gebied zou liggen