Opdracht 1 procesbeschrijving 2014-2015 Dit document bevat een beschrijving van het proces van de Webdesign opdracht voor de cursus Informatie-uitwisseling van de opleiding Informatiekunde 72 Jelle Bouwman, Hielke Koopstra http://www.students.science.uu.nl/~4121988/
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. Werkcollege 1 3. Beschrijf keuzes Aangezien een website maken een proces is van trial-and-error hebben wij voor het programma Brackets gekozen. Dit programma geeft een live preview weer in een browser waardoor meteen je doorgevoerde veranderingen worden weergegeven in de site. Hierdoor kan je meteen zien of iets goed werkt of niet, waardoor het proces van coderen sneller zal gaan. 4. Beschrijf acties, keuzes De url die wij gekozen hebben is http://www.students.science.uu.nl/~4121988/ ". Dit is de standaard webspace van de Universiteit Utrecht waarbij het studentnummer van Hielke Koopstra is gebruikt. 5. Beschrijf jullie huidige HT ML/CSS kennis niveau. Hebben jullie van het oefenmateriaal gebruik gemaakt? Zowel Jelle Bouwman als Hielke Koopstra hebben beide een redelijke ervaring met HTML en CSS, dit komt mede door het vak Webdesign van vorig jaar en door verschillende tutorials op internet waaronder via codecademy. 6. Beschrijf acties, keuzes. Gelukt? We zijn vrij rap begonnen aan het opzetten van de site. Tijdens dit proces zijn er geen problemen ondervonden, dit is dus gelukt. Procesbeschrijving hebben we tijdens het opzetten van de site ingevuld.
Werkcollege 2 7. Beschrijf acties, keuzes We hebben een viertal pagina s aangemaakt. Een homepage, een dummypagina, een teampagina en een contactpagina. De vier pagina s zijn aan elkaar gelinkt door middel van een menubalk. 8. Beschrijf acties, keuzes Een typische Lorem Ipsum boodschap is op elke op een zodanige manier verwerkt dat de headers en de teksten duidelijk te onderscheiden zijn. 9. Beschrijf acties, keuzes Een menubalk zoals aangegeven in de opdrachtomschrijving vonden we ietwat minimalistisch en simpel. We hebben daarom het Internet afgestruind om een simpele, doch mooi menu te vinden. Op de site van CSS Menu Maker hebben we een goed voorbeeld gevonden en hebben die dan ook verwerkt in de HTML code van elke pagina, en in de CSS. 10. Beschrijf acties, keuzes Een CSS bestand genaamd style1.css is aangemaakt en gevuld met de nodige CSS. 11. Beschrijf acties, keuzes Op de teampagina About hebben we een tweetal foto s toegevoegd, één voor elk teamlid. De afbeeldingen staan in de directory in een aparte map. 12. Beschrijf resultaten, acties Het formulier is op de contact pagina aangemaakt. We hebben het simpel gehouden en enkel drie tekstvelden ingevoerd voor een naam, een e-mail en een tekstbericht. Het is verplicht om alle drie de velden in te vullen om het formulier in te leveren. 13. Beschrijf resultaten, acties Index.html, dummy.html en contact.html kwamen alle 3 foutloos door de validation service van het W3C, te vinden op validator.w3.org/check. In de about.html file hebben we een error verwerkt die opkwam. Op deze pagina hebben we twee plaatjes staan en in de <img> tag was nog geen alt property gedefinieerd, deze is nu gedefinieerd waardoor alle files geen errors meer bevatten.
Werkcollege 3 14. Beschrijf acties, keuzes, waar geplaatst Via de link die in punt 14 wordt gegeven is het al snel duidelijk hoe je via HTML een video plaatst. Via een video-downloader hebben we het filmpje uit het voorbeeld in onze directory in de submap video verwerkt. Vervolgens hebben we in dummy.html de code toegevoegd die nodig is om het filmpje op de webpagina te krijgen. 15. Beschrijf acties, keuzes, waar geplaatst Fontawesome was bij ons al bekend als custom font dat geïnstalleerd kan worden op je webpagina. Via de website downloaden we de complete fontmap en hebben de complete map ge-unzipped naar onze webruimte. Voor het iconfont hebben, zoals op de website werd aangeraden, de gedownloade map in zijn geheel op de webruimte gezet en in elke HTML pagina een regel code in de <head> tag verwerkt die de pagina verwijzen naar de CSS file binnen die map. Daarbinnen staat alles gedefinieerd dus hoeven we alleen maar op de plekken waar we het font willen hebben een regel code toe te voegen zoals deze: <i class="fa fa-envelope-square "></i> Hierdoor komt er een plaatje van een envelop op de webpagina. Bij de contactpagina en op een aantal andere logische plaatsen hebben we deze icons verwerkt. 16. Beschrijf acties, keuzes, waar geplaatst Op onze contactpagina hebben we gekozen voor 3 soorten input: - Naam(mag voor- en/of achternaam zijn) - E-mail - Een bericht die de bezoeker wilt plaatsen Na het versturen van het bericht krijgt de bezoeker het volgende te zien: Beste naam, Bedankt voor het sturen van het volgende bericht: -------- bericht -------- U ontvangt nu een bevestiging per mail, daarna zullen we u zo spoedig mogelijk via "E-mail" contacteren! Met vriendelijke groet, Team 72
De omzetting van de ingevulde velden op de contact pagina naar een ingevuld bericht op de volgende pagina gaat via de POST-methode: <p class="paragraph"> naam </p> <input type="text" name="naam" required> Hier wordt de naam als input gepakt en door middel van de volgende code in het bericht gezet van de volgende pagina: Beste <?php echo $_POST["naam"];?>, <br><br> Bedankt voor het sturen van het volgende bericht: Het e-mail adres en het bericht worden op dezelfde manier overgezet. De mail wordt opgesteld door middel van de volgende code: $naam = htmlspecialchars($_post['naam']); $email = htmlspecialchars($_post['email']); $bericht = htmlspecialchars($_post['bericht']); 'Beste '.$naam.', Hierbij de bevestiging dat uw contactformulier bij ons is aangekomen op '.$datum.' met het volgende bericht: ------------------------------------ '.$bericht.' ------------------------------------ Wij zullen zo spoedig mogelijk contact met u opnemen! Met vriendelijke groeten, Team 72 '; Naam, e-mail en bericht worden opnieuw gepakt via de POST-methode. $naam en $bericht worden vervolgens in een $message gezet en vervolgens verstuurt met de volgende regel code, waar het e- mail adres van de bezoeker in wordt verwerkt bij $email: mail($email, 'Bevestigingsmail contactformulier', $message, 'From: info@team72.nl'); Het schrijven van de inhoud van de mail naar de server gaat via de FOPEN- en FWRITE-methode waarbij de naam van het bestand en de inhoud van het bestand zijn gepakt van respectievelijk: de naam van de bezoeker en het bericht wat de bezoeker heeft getypt. Dit is ook gedaan door middel van de POST-methode.
Werkcollege 4 18. Gebruik een Webfont Voor onze website hebben wij gekozen voor een handschrift Webfont met de naam Indie Flower. Deze font hebben wij toegepast op de eerste Lorem ipsum alinea van de homepage. Om het font nog wat specialer te maken is er een schaduw omheen geplaatst. Dit is alles is toegepast via een enkele regel in de HTML-code: style=" font-family: 'Indie Flower' ; text-shadow: 4px 4px 4px #aaa;" 19. Oefenen met responsive 1) Aangezien wij al vanaf het begin een responsive menu hebben geïmplementeerd ziet wij geen nut om hiervoor een geheel nieuw html bestand aan te maken. Daarom hebben we besloten om alles van punt 1 van opdracht 19 volledig uit te voeren met de html bestanden die wij al hadden voor onze website. Door in het CSS bestand te kijken kan erachter worden gekomen wanneer het menu verandert: @media screen and (max-width: 768px) Het menu krijgt bij ons dus een ander uiterlijk zodra het scherm kleiner van 768 pixels is. Op dat moment zal het menu inklappen en zullen de menu-opties onder elkaar komen te staan. 2) A - Zowel de pagina responsive.html en responsive.css hebben we aangemaakt en in de zelfde directory gestopt als de rest van de opdracht. B - In de HTML pagina responsive hebben we de meta code toegevoegd binnen het <head> element. C - De code die te vinden was bij de responsive oefening hebben we naar de net gemaakte CSS gekopieerd. D - We hebben de breedte van dit scherm gedefinieerd op 1080 tot 2000 pixels, gebaseerd op de laptop van één van de teamleden, te weten een Dell Inspiron 15R SE. Het scherm wordt in dit geval geel. E - We hebben de breedte van dit scherm gedefinieerd op 1 tot 640 pixels, gebaseerd op de iphone 4S, één van de meest verkochte telefoons van de afgelopen jaren. Het scherm wordt in dit geval rood. F - We hebben de breedte van dit scherm gedefinieerd op 641 tot 768 pixels, gebaseerd op de Apple ipad, één van de meest verkochte tablets van de afgelopen jaren. Het scherm wordt in dit geval blauw.