Webteknologi evalueringsopgave Vinter 2011-2012 - Niels Sundstrup

Niels Sundstrup Webteknologi evalueringsopgave Vinter 2011-2012 - Niels Sundstrup Webteknologi - Carl- Henrik Nielsen - Syddansk Universitet, Kolding - Udlevering: 12. januar 2012 Aflevering: 19. januar 2012 Side af 0 12

Indholdsfortegnelse Indholdsfortegnelse... 1 HTML5... 2 Hjemmesidens elementer... 3 Hjemmesidens undersider... 4 Kravspecifikation... 4 Forside... 4 Bryggerier... 4 Arrangementer... 4 Tilmelding... 5 Om os... 5 Kontakt... 5 Hjemmesidens kildekode... 6 eksamen.html... 6 bryggerier.html... 6 arrangementer.html... 7 tilmelding.php... 8 kontakt.html... 11 CSS Cascading Style Sheets... 12 Side 1 af 13

HTML5 HTML5 står for HyperText Markup Language hvor tallet 5 beskriver den version man er nået til nu. HTML5 er stadig i en udviklingsfase, men det vinder frem blandt mange webdesignere verden over fordi det spiller utrolig godt sammen med folks smartphone som er meget udbredt. 1 Et af målene med HTML5 er også at mindske brugen af tredjeparts plug- ins såsom Adobe Flash og Microsoft Silverlight for at nævne nogen af de store. Især Adobe Flash får meget omtale, fordi at Apples browser i deres telefoner ikke understøtter Flash hvilket gør at deres brugere må undvære mange funktionaliteter som Flash normalt udfører. I og med at HTML5 stadig er i sin udviklingsfase bliver der hele tiden tilføjet nye elementer og attributter, mange som forbedrede erstatninger for tidligere elementer. Følgende elementer er blevet tilføjet i HTML5 som et led i at gøre hjemmesiderne mere strømlinede. Det er kun nogen af dem som er beskrevet der er mange flere derude. 2 article- elementet Bruges til at have f.eks. en nyhedsartikel eller blog post. header- elementet Her kan man indsætte alt man normalt ville have i et sidehoved, hvilket er logo og websidens navn og grafisk baggrund. nav- elementet Indeholder oftest en samling links som man bruger til at navigere til andre sider eller undersider. section- elementet Man bruger section til at inddele hjemmesiden hvis man ønsker forskellige baggrunde. aside- elementet Her kan man placere information præcis på samme måde som article- elementet. Positionen af et aside- element er ikke fast. footer- elementet Dette element indeholder det samme som et sidefod. 1 http://da.wikipedia.org/wiki/html5 2 http://www.w3schools.com/html5/html5_new_elements.asp Side 2 af 13

Hjemmesidens elementer Hjemmesiden er lavet ud fra et simpelt princip som ofte går igen på hjemmesider. Øverst har man en menu bar hvorfra man kan navigere videre til undersiderne. Grunden til at man placerer en menu bar oppe foroven på hjemmesiden er at det gør det nemt for brugerne at komme frem og tilbage så man undgår at de farer vild på en underside. Oven over menuen bliver titlen på hjemmesiden vist så man ikke er i tvivl om hvad hjemmesiden handler om. På selve siden har man opdelt de forskellige elementer så der er et stort element til tekst og til selve sidens indhold. De omkringliggende elementer som udgør henholdsvis to reklamer for øl og reklame for arrangementer er lavet i deres eget element hvilket gør at de skiller sig mere ud og man ligger mærke til det. Det nederste element på ens side er selvfølgelig en sidefod hvor man skriver hvem som har lavet hjemmesiden. De forskellige elementer er inddelt med hver sit id hvilket gør at man kan ændre i stylesheetet hvis man ønsker at ændre noget. Vedligeholdelsen af hjemmesiden bliver derved gjort noget nemmere. Fig. 1: Skitse af hjemmeside Side 3 af 13

Hjemmesidens undersider Kravspecifikation Formålet med hjemmesiden for de fynske bryggerier er at gøre det nemmere for øl entusiaster på Fyn som gerne vil deltage i arrangementer men som ikke nødvendigvis kender til alle bryggerier på Fyn. Hjemmesiden giver ud over information også mulighed for at man som besøgende kan tilmelde sig arrangementer som bliver arrangeret af de forskellige bryggerier. I stedet for at man skal til at ringe til bryggeriet kan man tilmelde sig elektronisk. Målgruppen for hjemmesiden er private primært bosiddende i Syddansk Region og som har et behov for at opleve hvordan øl bliver til og hvor mange forskellige smagsvarianter der er. Er man nybegynder hvad angår øl er det også et godt sted at starte. Hjemmesiden er også et projekt i faget webteknologi og skal derfor også indeholde en række elementer som man skal vise at man har kendskab til og kan bruge, så formålet med hjemmesiden er også, at vise at man kan det. Forside På forsiden får man en kort introduktion til hvad hjemmesiden går ud på samt et overblik over nyheder hvis der f.eks. er et arrangement der er aflyst. Bryggerier På siden bryggerier er en samlet liste over de små fynske bryggerier som er med i sammenslutningen. Samtidigt med at man kan se hvilke bryggerier der er tale om kan man også besøge dem fordi der er linket til de enkelte bryggeriers egne hjemmesider. Hvis man har drukket en øl og ikke kan huske hvilket bryggeri den var fra men kan huske logoet er der også indsat logoer for de respektive bryggerier. Arrangementer Arrangementer er som navnet antyder her man finder de arrangementer som bryggerierne laver. For at det holdes overskueligt er de stillet op i en tabel hvor man kan se hvilke tilmeldinger der er åbne og hvilke det er for sent at tilmelde sig. For at give folk en forsmag Side 4 af 13

på hvad det er man kan opleve til arrangementerne er der indsat to videoer som viser hvordan man selv kan komme i gang derhjemme i køkkenet med at brygge sin egen øl. Videoerne skal man selv starte, men man har mulighed for at ændre lydstyrke og pause det. Grunden til at videoerne ikke bare starter når man går ind på siden er at det bliver irriterende for brugerne hvis de allerede har set klippet eller bare hurtigt skal tjekke datoen for et arrangement de har tilmeldt sig. Tilmelding Her kan man tilmelde sig arrangementer. Tilmelding sker ved at man udfylder felterne med sin information og trykker på tilmeld. Efter man har trykket for man en bekræftelse på at man er tilmeldt eller en fejlmeddelelse hvis der var fejl i indtastningen. Man har også mulighed for at se sine tilmeldinger og hvilke andre personer der deltager kan man også se. Hvis der f.eks. er flere fra samme by som skal til et arrangement kan man således aftale fælles transport fordi man kan gå ind og se hvilken by folk kommer fra. Hvis man finder ud af at man pludselig bliver flere som ønsker at deltage kan man gå ind på ret information som gør det muligt at rette informationer om hvor mange man kommer. Det gør at man ikke behøver at kontakte bryggeriet for at ændre, men derimod kan man selv gøre det med det samme. Hvis man bliver forhindret i at deltage kan man også afmelde sig arrangementer. Om os Siden om os indeholder oplysninger om ideen bag de fynske bryggerier og hvorfor og hvornår siden blev til og hvem som står for den daglige vedligeholdelse af hjemmeside og som også står for kontakten til bryggerierne. Kontakt På siden kontakt findes kontaktoplysninger hvis man vil i kontakt med de fynske bryggerier sammenslutningen. Her er telefonnummer, mail og adresse hvis man ønsker at sende et brev. Desuden er der også et billede af huset som sammenslutningen holder til i så man kan se hvordan det ser ud hvis man er i tvivl. Side 5 af 13

Hjemmesidens kildekode eksamen.html Filen eksamen.html er hjemmesidens forside og er grundsten for de andre undersider. Idet man bevæger sig væk fra forsiden vil man opdage at alting beholder sit udseende i store træk. Det er kun det som står inde i <section id= skrift > som gør at forsiden skiller sig ud. skrift er her hvor man kan skrive hvis der skulle være noget som skal vises på forsiden men som ikke skal stå andre steder. Fig. 2: <section id="skrift"> bryggerier.html På bryggerier.html bliver der brugt en <ul> tag til at ordne bryggerierne så de står overskueligt i punktform samt i en liste med <li> tagget. Desuden er der gjort brug af <img> til at indsætte bryggeriernes logoer. Netop <img> giver også mulighed for at bestemme hvor stort billedet skal være da man kan indstille height samt width på billedet. Der er også gjort så man ved at køre musen over logoerne får navnet op på bryggeriet. Dette gøres ved hjælp af title. Fig. 3: <ul>, <il> samt <img> Side 6 af 13

arrangementer.html Siden arrangementer.html indeholder en tabel som er 6 x 8. Nedenfor er vist et udsnit af den kode som bruges til at lave tabellen med. Hver enkel række har fået sit helt eget id, hvilket skyldes at det i nogen tilfælde kan være rart at man kan fremhæve rækker i forbindelse med et arrangement som er tæt på at finde sted. Lig også mærke til at i row1 bliver der brugt attributtet <th> på grund af at det er overskrifter så derfor skal de kunne styles separat i stylesheetet. Resten af tabellen er med <td> fordi der her er tale om rent data. Fig. 4: <table>, <tr> samt <td> Nederst på siden er der brugt <video> tagget til at indsætte to videoer som ligger på serveren. Her kan man ændre om der skal være start/pause knap samt lydindstillinger ved hjælp af controls. På samme måde som med <img> tagget kan man også definere height og width på afspilleren. Selve filen som skal afspilles i afspilleren skal også være et bestemt format for at virke. En liste over understøttede formater i html5 kan findes her. Fig. 5: <video> Side 7 af 13

tilmelding.php Tilmeldingssiden er kodet i php fordi man her har mulighed for at sende data til en database som så lagrer informationen til videre brug. På tilmeldingssiden er der brugt elementet <iframe> som gør at man kan have en hjemmeside inden i en hjemmeside. Det Fig. 6: <iframe> vil sige at man har et vindue som skifter side når man trykker på links inde i vinduet. Som man kan se på figur 6 er iframe relativt enkelt at implementere på ens hjemmeside. Man bestemmer hvilken side som skal vises i vinduet som default og hvor stort vinduet skal være. arrangement_tilmeld.php og arrangement_tilmeld_do.php Fig. 7: <form>, <input> og <?php> Når man tilmelder sig et arrangement bliver man bedt om at udfylde et par text felter. Måden at man får et indtastningsfelt er ved brug af attributtet <input> som man så sender videre til databasen ved hjælp af en.php fil som udfører handlingen. arrangement_tilmeld_do.php sender informationerne videre. Først forbinder den til databasen med brugernavn og adgangskode og derefter sætter den, de data brugeren har indtastet, ind i databasen på de korrekt angivne felter. Brugeren af hjemmesiden ligger ikke mærke til denne proces da den kører i baggrunden og det eneste man som bruger kan se er en besked som bliver udskrevet hvis det er lykkedes at oprette forbindelse til server og gemme data. Side 8 af 13

arrangement_afmeld.php og arrangement_afmeld_do.php Fig. 8: DELETE FROM Når man skal afmelde en bruger skal man hen og skabe forbindelse til databasen igen fordi det er her alle data ligger gemt fra da brugeren tastede det ind. Når man har hentet data ned så brugeren kan se hvilken post det er han vil afmelde markerer han blot den og trykker på afmeld. Det der så sker ( bagved ) er at man i databasen går ind og finder id på den post der er valgt og så sletter alt information som stod under det id. Hvis man ikke vælger nogen post at afmelde kommer der en besked op om at man skal vælge en. arrangement_gennemse.php Når man trykker på Se tilmeldinger kommer man ind på et php dokument som viser en oversigt over alle de personer som har udfyldt felterne og trykket tilmeld i arrangement_tilmeld.php. I princippet henter man informationerne fra databasen og udskriver dem så. Det er lavet så først er når man klikker på en person at det bliver vist. Fig. 9: arrangement_gennemse.php Side 9 af 13

arrangement_ret.php og arrangement_ret_do.php og arrangement_ret_post.php På samme måde som afmeld funktionen skal man oprette forbindelse til databasen som det første. Dernæst skal man hente dataene ind og indsætte dem i de samme felter som man havde da man i sin tid tilmeldte sig. Når dataene er sat ind i felterne er det i princippet bare det samme som da man tilmeldte sig, dog med en lille tvist. I stedet for at lave et nyt id til den bruger bliver det sendt tilbage og gemt under samme id som det havde inden man hentede det ned og rettede i det. Processen når man retter er ret.php - > ret_post.php - > ret_do.php Først har man de poster man har at vælge imellem når man skal rette. Så vælger man en og kommer videre hvor dataene allerede står i felterne. Idet man så trykker på ret data springer den videre og fortæller så om de er blevet ændret/gemt eller der var fejl. Fig. 10: UPDATE Den funktion man specielt skal ligge mærke til er UPDATE som bruges i php koden til at fortælle databasen hvad den skal gøre med det data den modtager. Da man skulle slette var det funktionen DELETE man gav til databasen så den vidste den skulle slette. Når man tilmelder sig gør man brug af funktionen INSERT INTO som så tilføjer noget i databasen. Side 10 af 13

kontakt.html Man kan sige at kontakt siden minder meget om forsiden og <img> attributtet er blevet forklaret tidligere så i stedet vil vi se på den funktion som bliver brugt til at lave linket til Fig. 11: mailto mailadressen. Her kan man se hvordan man laver et link hvor man i stedet for at skrive en adresse til en hjemmeside eller underside skrive mailto foran mailadressen hvilket giver en smart detalje for brugere som skal kontakte ejer af hjemmesiden. Det som den gør er at åbne et nyt vindue med standard mail programmet på brugerens pc hvor modtagerfeltet allerede er udfyldt med mailen som man klikkede på. Det sparer brugeren for en del klik. Side 11 af 13

CSS Cascading Style Sheets Man bruger CSS til at programmere hvordan det man koder i html kommer til at se ud. Man styler sit html dokument. Man kan gøre det på to måder. Den ene måde er hvor man inde i hver enkel fil har en speciel css kode som kun gælder for den enkelte fil. Det giver lidt mere arbejde når man ændrer noget i f.eks. en menu som ofte skal være ens på alle undersiderne. Ved at bruge den anden måde kan man helt undgå at skulle rette i alle ens underfiler hver gang man foretager en ændring i udseendet af hjemmesiden. Den metode jeg beskriver kræver at man opretter et eksternt style sheet som ligger for sig selv og som man giver endelsen.css- Det smarte kommer så her hvor man tilføjer (include) style.css til hver eneste html/php fil man har på sin hjemmeside. Hver gang man ændrer i style.css filen og f.eks. ændrer farve på sin tekst ændrer farven sig på alle de sider som har tilføjet style.css til sig. eksamen.html med indsat eksternt style sheet: For at holde styr på sit stylesheet og de ting som man ændrer kan det være en god idé at gøre brug af kommentarfunktionen som man bruger ved at skrive /* tekst */ som gør at det ikke bliver tolket som kode. Som man kan se I eksemplet på næste side hjælper det en utrolig meget at have kommentarer så man lynhurtigt kan finde det man skal rette i hvis man vil ændre noget. Side 12 af 13

Eksempel taget fra style.css: I stylesheetet er der mange ting man kan ændre på og justere. Hvis man tager udgangspunkt i linje 50 kan man se et udsnit af de meget brugte koder. #topmenu margin: auto [her bestemmer brugerens browser hvor stor margen skal være] background: #1d1d1d [indstiller baggrund, her er baggrunden en farve] height: 40px [indstiller højden af elementet til 40 pixels] width: 1104px [indstiller bredden] text- align: center [centrerer teksten ] padding- top: 8px [gør så der er 8 pixels fri plads omkring elementet i toppen] padding- bottom: 4px [gør så der er fri plads nedenunder] border: 2px solid #0a0a0a [der skal være en 2pixels bred ramme som er farvet] Side 13 af 13