1 Week 1 1/4 3. Beschrijf keuzes: Wij hebben gekozen voor Dreamweaver omdat een van ons dit al op zijn/haar laptop had staan. Ook weten we hoe we dit ...
Week 1 1/4 3. Beschrijf keuzes: Wij hebben gekozen voor Dreamweaver omdat een van ons dit al op zijn/haar laptop had staan. Ook weten we hoe we dit programma moeten gebruiken en kan bijvoorbeeld notepad++ niet gedownload worden op de mac van Camilla. 4. Beschrijf acties, keuzes: Wij hebben er voor gekozen om onze opdracht op de serverruimte van 5490707 op te slaan. Dit om overlap te voorkomen. Wij hebben FileZilla gedownload als ftp-‐ programma. Wij hebben binnen de www map een opdracht 1 map aangemaakt waar wij onze opdracht in zullen zetten. 5. Beschrijf jullie huidige HT ML/CSS kennis niveau. Hebben jullie van het oefenmateriaal gebruik gemaakt? Wij hebben onze index pagina aangemaakt zonder hulp van het oefenmateriaal 6. Beschrijf acties, keuzes. Gelukt? Wij hebben alle twee een geringe ervaring met het coderen in html en css. Wij hebben de oefensyllabus doorgelezen en de informatie is ons bekend. We hebben onze html en css kennis opgefrist met het oefenen op www.codecademy.com
Week 1 2/4 7. Maak 4 pagina’s voor de website. Zorg dat alle pagina’s een TITLE hebben (zichtbaar in de browser): a. Een openingspagina (index.html). Je mag zelf weten hoe je dit project noemt. De opdracht waarmee de website uiteindelijk gevuld gaat worden gaat over “Online Trust”. Je mag een originele team naam verzinnen, of gewoon iets anders. Gedaan. b. Een 2e pagina waarin jullie jezelf, al dan niet met foto voorstellen als. Gedaan. Gebruik gemaakt van dropdown navigationbar. c. Een contactpagina (zie punt 12). Gedaan. Contact form al werkend proberen te maken met behulp van php. d. Nog 1 verdere pagina, dit kan een dummy pagina zijn. Gedaan. e. Deze 4 pagina’s moeten “werken” en via menu links (punt 9) te bereiken vinden zijn. Gedaan.
8. Zorg dat al deze pagina’s iets van tekst hebben (desnoods Lorem Ipsum etc.), zodanig dat de headers en
tekst duidelijk te onderscheiden zijn. Gedaan. Boven aan de pagina staat tekst in
. Op elke pagina staat een
header met webfont, gevolgd door een
. 9. Deze pagina’s zijn bereikbaar via een consistent (werkend) navigatie menu dat op alle pagina’s hetzelfde is. Deze navigatie mag heel simpel zijn, tekstueel http://www.w3schools.com/css/tryit.asp?filename=trycss_navbar_basic_ht ml (eventueel gestyled met CSS, voor de liefhebber) of met buttons. Zorg dat alle pagina’s via het menu te bereiken zijn. Je mag zelf weten of dit menu verticaal of horizontaal is. Besteed hier pop dit moment niet heel veel aandacht aan; later in de opdrachten gaan jullie het menu “responsive” maken en wordt er door jullie toch nog beter naar gekeken. Zorg dat het duidelijk is DAT het een menu is (door bv. kleur, afmeting, graphics of wat je maar wilt). Gedaan. Er voor gekozen de kleur aan te passen als de muis over een vlak binnen het menu gaat. Onze about heeft een dropdown functie en er is voor gezord dat er alleen naar een volgende pagina gelinked wordt door op tim/camilla te klikken. Op ‘about’ zelf klikken heeft geen effect. 10. CSS kan op verschillende plaatsten voorkomen. Het meeste voorrang krijgt het als “inline” style (http://www.w3schools.com/css/tryit.asp?filename=trycss_howto_inline), maar dat verdient niet de voorkeur. Een tweede manier is “internal“, de CSS code in de header te plaatsen (http://www.w3schools.com/css/tryit.asp?filename=trycss_howto_internal). Dat is al eleganter, maar zou nog steeds betekenen dat de CSS op elke losse pagina zou moeten voor komen. De taak hier: Maak minimaal één werkend extern CSS-‐bestand en maak styles voor p, h1, h2, h3 die duidelijk uit elkaar te houden zijn. Zorg dat deze in een “CSS” directory komt te staan. Zorg dat alle HTML pagina’s gekoppeld aan dit deze CSS gekoppeld zijn. Hoe dat moet kun je op (http://www.w3schools.com/css/css_howto.asp) of kijk in de oefen syllabus. Gedaan. Wij hebben voor een extern css bestand gekozen. 11. Voeg minimaal één foto toe op een van de pagina’s. Dit kan bv. op de
pagina zijn waar je je voorstelt, maar ook ergens anders. Indien je liever geen foto van jezelf toevoegt; alles kan, ook en foto van de universiteit of de stad waar je/jullie woont/wonen, of nog iets anders. Zorg dat deze in een “images” directory komt te staan. Hoe dat moet kun je op http://www.w3schools.com/html/html_images.asp of kijk in de oefen syllabus. Gedaan. Boven de menubalk staat ons plaatje, op elke pagina. 12. Op de contact pagina maak je een “form” (formulier) zoals je die vaak ziet, waarmee je informatie kunt versturen, zoals bv. hieronder (slechts een voorbeeld). Dit gaan we volgende week werkend maken, maar de “form” moet er nu al staan, en moet minimaal twee invulvelden bevatten, te weten “Naam” en “Email”. Je mag natuurlijk ook meer velden maken. Er moet ook een “verstuur” knop er onder of bij staan. Je kunt er een maken, kopiëren, of gewoon de standaard HTML knop gebruiken (). Gebruik je HTML-‐editor’s functionaliteit als je een HTML editor gebruikt, de kennis die je wellicht al hebt, of als je dit nog niet kunt/weet het tutorial: http://www.w3schools.com/html/html_forms.asp. Maak het zo dat het verplicht is iets in te vullen, niet met javascript validatie of CSS, maar zoek uit welke HTML5 syntax dit voor je doet. Gedaan. Functie werkt nog niet, maar hoeft voor nu ook nog niet te werken. 13. Haal alle pagina’s die je tot nu toe hebt gemaakt door een HTML validator (bv. http://www.w3.org/). Zorg dat eventuele fouten in orde komen. Rapporteer de output, en eventuele acties die je erop hebt ondernomen in de proces beschrijving. Output html validator 1. Line 4, Column 59: end tag for "link" omitted, but OMITTAG NO was specified Acties: We hadden als end tag alleen een > staan en we hebben dit veranderd naar />. 2. Line 11, Column 26: character "&" is the first character of a delimiter but occurred as data
Tim Evers (5537010) & Camilla van Wijk (5490707)
Acties: Hier is volgens mij niks mis mee omdat het gewoon goed wordt weergeven en tekst is. 3. Line 12, Column 87: end tag for "img" omitted, but OMITTAG NO was
specified ...rc="informatieuitwisseling2.jpg" alt="informatie uitwisseling" class="center" > Acties: We hadden als end tag alleen een > staan en we hebben dit veranderd naar />. 4. Line 18, Column 23: an attribute value must be a literal unless it contains only name characters ABOUT Acties: Dit is niet echt een probleem omdat het menu van about zo werkt. 5. Line 30, Column 76: there is no attribute "margin-‐left" Opdracht week 1 Acties: Waren de “15px” vergeten tussen haakjes te zetten
Week 2 3/4 14. Plaats een video: Gedaan. Wij hebben de youtube video gedownload als mp4, en vervolgens toe gevoegd aan de about_camilla.html pagina. 15. Gebruik een Icon font: Gedaan. We linken naar de css op onze server. 16. basisoefeningen met PHP en je forms werkend maken a) de PHP pagina toont een bevestigingstekst in de trant van: Beste [naam], Bedankt voor het invullen van het formulier. We zullen u binnenkort via u uw [e-‐mail] contacteren. Met vriendelijke groet, Team Gedaan. b) Er wordt een e-‐mail ter bevestiging naar de gebruiker gestuurd. Dit gebeurt NIET via een email client zoals Outlook of Thunderbird, maar via de PHP mailserver. Zoek hier http://www.w3schools.com/php/func_mail_mail.asp uit hoe je dit kunt doen (de server waar je toegang hebt doet dit automatisch, zolang je code juist is). Zorg dat: -‐ er een bevestiging naar het e-‐mailadres wat doorgegeven is word gestuurd
-‐ de tekst van de email is in de trant van die in “a)”. De [naam] en [e-‐mail] moeten wederom datgene zijn wat net via de form is doorgestuurd. Gedaan. c) Wat er ingevuld is in de formvelden [e-‐mail] en [naam] wordt gebruikt in een textfile die op jullie server ruimte weggeschreven (als ware het een database). Kijk op http://www.w3schools.com/php/php_file_create.asp hoe je dit kunt doen en bestudeer dit goed. In dit voorbeeld van w3schools wordt een variabele weggeschreven ($txt), die uiteindelijk toch weer verwijst naar een statische string ("John Doe\n"), en de bestandsnaam die het krijgt is ook een statische string (newfile.txt). Dit willen we hier niet, we willen het iets interessanter maken. We willen net als in onderdeel “a)” dat de ingevulde form-‐velden [e-‐mail] en [naam] beiden gebruikt worden. Bestand creëren Zoals je in het voorbeeld ziet, wordt er om een bestand te creëren en te openen het commando fopen(x,y) gebruikt. Binnen de haakjes definieert men wat de bestandsnaam wordt (x), en wat voor type schrijven/lezen er moet plaatsvinden (y). Gebruik hier “w” als waarde voor (y), net als in het 1e voorbeeld op de w3schools pagina. Voor (x), wordt in het w3schools voorbeeld “test.txt” gebruikt. Dit gaan wij anders doen. Zorg dat nu dat de bestandsnaam de [naam] wordt, die via de form doorgegeven is, met de extensie “txt. Dit kan ook hier door net als in “a)” gebruikt te maken van “$_POST[naam-‐van-‐de variabele-‐die-‐is-‐meegestuurd]. Zoek uit hoe dit moet. Dus als de ingevulde naam in de contactpagina “Henk” zou zijn, wordt de bestandsnaam dus “Henk.txt”. Komma’s, punten, en alle soorten haakjes luisteren nogal nauw in PHP. Om de extensie “.txt” mee te geven aan je variabele, kun je (net voor de komma, meteen achter je naam-‐variabele) gebruiken. Data schrijven Het schrijven van de data zelf gebeurt met het fwrite(x,y) commando. Dit commando heeft altijd 2 variabelen tussen de haakjes. Voor de komma wordt gedefinieerd naar welk bestamd geschreven dient te worden (gebruik daarvoor net als in het w3school-‐voorbeeld een variabele die “fopen”
aanroept). Achter de komma wordt gedefinieerd wat er geschreven wordt, de tekst. Zorg dat dit het verstuurde e-‐mailadres is (wederom met $_POST[]), in plaats van een statische string. Als dit goed werkt zouden jullie, de bouwers, moeten kunnen zien dat de tekst-‐files op de server verschijnen en daarin lezen wat een bezoeker heeft ingevuld op de server (dat is met de mail-‐stuur actie in bovenstaand punt niet het geval, die wordt via de mailserver gestuurd zonder dat jullie verder in kunnen kijken. Het lukt ons niet de verzonden berichten in een document op te slaan. Wij hebben onze poging uitgecomment aangezien dit alleen maar ons mailsysteem in de war maakte.
