Andreas Hagström
860214-7533
14 januari 2013
Webbutveckling – 4 Rapport
Skapande av webbplats
Jag började med att skissa lite design och layout på ett pappersark. Så brukar jag jämt göra när jag
skall utforma en ny hemsida från grunden. Det blir lite enklare så på något vis. Efter jag hade skissat
upp några olika layouter på papper lade jag det åt sidan och började fundera mer seriöst på vad
hemsidan skulle innehålla. Jag hade mer eller mindre bestämt mig redan för att denna hemsida skulle
vara tämligen enkel och statisk, men samtidigt försöka få den så pass dynamisk som möjligt med
hjälp av det jag lärt mig under denna kurs gällande CSS3. Jag stod länge i valet och kvalet att
bestämma vad hemsidan skulle innehålla. Jag visste sedan tidigare att jag hade två stycken hemsidor
som var inplanerade att göra. En sida till en klan jag är med i(datorspel) och göra en helt ny hemsida
till min personliga domän.
Valet föll på det senare. Klansidan visade sig skulle bli mycket mer omfattande än detta projekt och
med väldigt mycket dynamisk skripting i PHP för att göra en interaktiv hemsida. Därför valde jag helt
enkelt att göra om min personliga hemsida på min egna domän. Min gamla hemsida var inte mycket
att hänga i julgranen. Det bestod av 3st statiska HTML-sidor skrivna i HTML4.X och troligtvis CSS som
var väldigt, väldigt obsolet. Jag körde all gammal CSS och HTML genom en validerare och brast ut lite
i skratt för mig själv. Det var verkligen på tiden att jag gjorde någonting åt min hemsida.
En nystart hade varit att föredra, men jag har alltid dragit mig för att börja designa om den på nytt
eftersom det är så tidskrävande. Denna kurs projektarbete slog då två flugor i en smäll och jag
raderade helt sonika den gamla sidan och började på denna nya hemsida.
Jag satte mig ned och listade ut vilka funktioner och vilket innehåll den nya hemsidan skulle ha,
kontra de krav som ställdes mot kursens krav. Resultatet blev att jag bestämde att göra ungefär 510st sidor till min hemsida, de allra flesta skulle bli rätt statiska men med undantag för viss PHP-kod
och de nya CSS-elementen som skulle göra hemsidan dynamisk och fungera bra i de flesta
webbläsare.
Min skiss jag bestämde mig för såg ut ungefär såhär;
Andreas Hagström
860214-7533
14 januari 2013
Webbutveckling – 4 Rapport
Jag ville ha en header, eventuellt med en bild/logo. Efter den skulle content komma, dvs där alla data
presenteras. Under content skulle jag placera en footer med lite information om cookies och
liknande. Till höger skulle jag placera navigationen, en meny helt enkelt.
Utformning av webbplats
När jag nu hade det mesta klart för mig i huvudet och delvis på lite pappersskisser satte arbetet
igång. Jag spenderade rätt mycket tid i början med att Googla efter designer uppbyggda enbart på
CSS3 för att få lite tips och inspiration, främst med färgval. Efter jag sedan fått lite inspiration
påbörjades arbetet.
Jag valde att hålla hemsidan så simpel som möjligt gällande färgval, dels för att det är stilrent och
dels för att kunna tillgodose kravet om att färgblinda skulle kunna se hemsidan utan problem.
Färgvalet föll på vit/ljus bakgrund med svart text. Header, footer och menyerna valde jag att
färglägga i en svag grå nyans för att enklare kunna urskilja dessa från resterande del av hemsidan.
Länkfärger satte jag till en blå nyans, både vid använd, oanvänd och hover. Däremot så får länkar en
mer mörk nyans av grått över dom när man gör en mouseover. Detta valde jag för att det känns som
det blir mer lätt att urskilja den texten då, speciellt för en som har problem med färgseendet.
Arbetet med hemsidan fortsatte utan några större komplikationer och de komplikationer som
uppstod behandlar jag i nästa del av rapporten. Någonstans i mitten av arbetet kom jag på att jag
skulle vilja ha några länkar som presenterades tydligt på alla sidor istället för på en enda sida och jag
fick därför lägga till en ny låda under menyn där jag lade in de länkar som skulle med.
Någonstans i samband med detta tog jag även ett nytt beslut att inkludera PHP-koden i
projektarbetet, istället för att bara göra den tillänglig på min egna hemsida. Jag vet inte om detta är
OK, att sidorna har filändelsen .php när momentet omfattar HTML och CSS men det är egentligen
ingen synlig sida som har någon egentlig php-kod, utan det är bara php includes.
Arbetet fortskred och efter några intensiva dagars kodning var hemsidan klar för slutvalidering enligt
W3C’s normer för HTML5 och CSS3.
Andreas Hagström
860214-7533
14 januari 2013
Webbutveckling – 4 Rapport
Problem och reflektioner
Jag stötte inte på några större problem med utveckling av denna hemsida då jag har väldigt mycket
erfarenhet av att skriva både HTML, PHP och CSS.
Det enda stora problemet jag stötte på var att jag skulle presentera information på
”kompabilitet.php” och visste inte hur jag skulle gå tillväga. Jag testade först med tabeller och boxar
men insåg snart att jag inte blev tillfredsställd med resultatet de producerade. Jag testade då att göra
en simpel ul list och planen var då att de få textbitar som var icke-kompatibla skulle presenteras i rött
och de kompatibla skulle presenteras i grönt. Detta misslyckades jag med helt. Tiden som
spenderades med just denna punkt består säkerligen av 10% av den totala tid jag spenderade på att
bygga hemsidan. Det slutade med att jag gav upp på grund av tidspressen och valde att göra de ickekompatibla texterna överstrukna med <del>-kommandot istället. Nu i efterhand ångrar jag mig inte,
detta ser troligtvis mer stilrent ut, men jag är missnöjd med att jag inte lyckades få det som jag ville
ha det från början.
Nästa problem kom vid valideringen av HTML. Närmare bestämt med meta charset definitionen.
Valde jag UTF-8 så fungerade inte svenska tecken, som vanligt. Detta beror på att jag i min .htaccess
har gjort ett aktivt val att köra ISO 8859-1 istället. Detta är ju inte egentligen något problem så länge
webbservern klarar av att matcha den charset man valt kontra det som finns angivet i .htaccess.
Problemet var att valideraren på W3C inte tyckte om att jag valt ISO 8859-1 och gav mig error på den
punkten. Detta löste jag med att välja Windows-1252 som charset och då fungerade svenska tecken
och valideraren gav inget utslag heller.
Detta var i princip de problem jag stötte på, förutom mindre problem som oftast berodde på att jag
glömt någon tagg, eller satt dit en tagg för mycket och så vidare. Det vill säga slarvfel.
I framtiden, om jag bestämmer mig för att expandera hemsidan och lägga till mer innehåll så skulle
jag nog behöva göra en meny istället för två menyer, av både praktiska och estetiska skäl. Annars
känner jag mig rätt nöjd med designen ur detta perspektiv.
Andreas Hagström
860214-7533
14 januari 2013
Webbutveckling – 4 Rapport
Utvecklingsmiljö
Jag har främst använt mig utav Notepad++[1] för att göra själva kodningen. Notepad++ finns till flera
olika plattformar och är ett utmärkt verktyg för att skriva kod i. Det är gratis att ladda hem och
använda och faller under GNU General Public License.
För att ladda upp filer till webbserver har jag använt FileZilla[2] och det är ett vanligt FTP-program.
Det är också gratis och faller under samma licens som Notepad++.
För att testa mina sidor lokalt innan uppladdning har jag kört en lokal webbserver på min workstation
för att det är så pass mycket mer smidigt att dlippa skriva kod, spara och sedan ladda upp för att
testa. Den server jag kör heter Apache[3] och detta är också ett gratis program som har en öppen
källkod och en licens som tillåter alla användare att ladda hem, modifiera, och redistributera
programmet som de själva önskar, det vill säga Copyfree.
Sist och också minst har jag använt mig av en sida som heter Colorfilter[4]. Detta är en sida som
emulerar och visar hur olika hemsidor ser ut för olika typer av färgblindhet. Min hemsida blev bra
oavsett vilken färgblindhet jag valde.
Jag har inte tagit med W3C-valideraren här av uppenbara skäl.
Andreas Hagström
860214-7533
14 januari 2013
Webbutveckling – 4 Rapport
Juridik
Det enda jag har publicerat som inte är mitt eget alster är en av bilderna som jag hittade på mig själv
på Facebook. Jag har dock fått upphovsmannens tillstånd att publicera bilden där.
Allting på min webbplats faller under upphovsrättslagen. Förstår inte riktigt frågan här. Det jag har
skapat själv är ju mina egna verk och får inte stjälas av andra utan mitt medgivande.
För att nämna några exempel på innehåll på min hemsida som faller under upphovsrättslagen kan jag
nämna själva koden och mina bilder som jag fotat själv.
Det finns ingenting på min hemsida som faller under personuppgiftslagen alls. Det enda som finns
där som ens kan kopplas till PUL är text om mig själv, av mig själv. Så det kan ju inte bryta mot PUL.
Vidare har jag en bild på en kompis men det finns ingen mer information om uppgifter av denne
kompis så det kan väl knappast vara något som skulle falla under PUL. Förövrigt kan jag tillägga att
denne person har också medgivit att ha sin bild där.
Angående korrekt information så, ja, mina webbsidor innehåller korrekt information. Det mesta som
finns där är ju som sagt text jag skrivit själv, om mig själv och så vidare. Jag har inte använt några
externa källor eller hämtat in material någonstans. Det enda som skulle kunna falla under denna
kategori är just kompabilitetssidan. Där kan jag inte till 100% säkerställa att informationen är helt rätt
eftersom jag inte har tid eller lust att testa hemsidan mot alla de 26 stycken webbläsarna. Men enligt
skärmdumpar och onlinekompisars egna ord fungerar det som det är tänkt och jag har på så vis
säkerställt informationen även där, åtminstone så pass mycket jag klarar av. Vidare är det inte direkt
någon tvärvetenskap utan mer en fingervisning för att visa att min hemsida klarar av de flesta
webbläsare, även många äldre versioner av IE som egentligen inte skulle klarat av CSS3 i denna
utsträckning.
Sammanfattning
Det har varit ett roligt projekt. Ett projekt som jag trodde skulle bli väldigt tråkigt och jobbigt
eftersom jag skulle bygga om sidan från noll. Även om den är långt ifrån klar i mina ögon så har det
varit roligt och jag ser fram emot att jobba på den lite sporadiskt igen när tid finnes.
Jag har stött på några mindre problem men jag trodde å andra sidan att det skulle vara väldigt många
fler problem än vad som faktiskt uppstod. En an anledningarna till detta kan vara att jag faktiskt satte
mig ned och planerade och skissade på hemsidan innan arbetet påbörjades. När jag annars brukar
göra sidor brukar det vara mer sporadiskt och ”ta det lite som det kommer” och jag tror i ärlighetens
namn att man kör fast mer då.
Som jag nämnt tidigare så kommer jag troligtvis att göra om meny/navigeringen och göra en stor
meny istället för mindre små. Men det får framtiden utvisa och det beror helt och hållet på vad jag
skall mer lägga upp där. Mycket av det som finns på den domänen är andra projekt som mer eller
mindre är privata för en liten grupp människor. Därför behöver det inte läggas till där. Men som sagt,
det får framtiden utvisa. Jag funderar isåfall på någon slags javascript meny men jag är nöjd för
tillfället.
Andreas Hagström
860214-7533
14 januari 2013
Webbutveckling – 4 Rapport
Testutvärdering – opponering
Jag valde att opponera mot Pekka Lillieros [email protected] främst för att han opponerade
mot mig.
URL till hans hemsida är http://studenter.miun.se/~peli9800/moment4/framsida.html
Pekkas målgrupp är troligtvis människor som gillar katter i allmänhet eller är intresserade av att ta
del av hans uppfödning av raskatter.
Syftet och funktionen med hemsidan är att sprida information om de specifierade sorternas katter
och visa bilder på dessa, kanske i syfte att komma igång med en eventuell försäljning?
Jag tycker att navigationen på hemsidan är utmärkt med en meny som flyter högst upp hela tiden är
det svårt att komma vilse. Gör man det ändå har han bifogat en webbplatskarta som möjliggör att
hitta rätt igen.
Jag gillar det Pekka har gjort med bilderna på katterna i stallet. Istället för att öppna de i en _blank
eller _self så räcker det med en mouseover för att bilden skall ploppa upp. Detta system skulle jag
nog valt till min sida istället om jag tänkt på det. Det som däremot inte fungerar fullt ut är alignment
av texten på samma sida. Gör man webbläsaren mindre än ca 1000px i bredd så flyter texten ihop
med bilderna och man kan inte längre läsa texten. Zoomar jag ut eller maximerar webbläsaren så
fungerar det bra igen så problemet är troligtvis att sidan inte är oberoende av besökarens
upplösning.
Vidare fungerar inte den stora knappen med en telefon på under sidan kontakt.html. Ingenting
händer när jag trycker på den, oavsett vilken webbläsare jag testar.
En länk på sidan links.html öppnas i samma ram medans resten kör på _blank. Länken som gäller är
”Kattutställningar”.
Angående synskadade så tror jag hemsidan fungerar för de flesta synskadade utan problem. Vissa
element ser lite roliga ut under de utan färgblindhet men det är fortfarande läsligt och förståeligt så
på den punkten har jag inga invändningar. Förutom möjligtvis bakgrunden. Vet inte o mden kan
uppfattas som störande, svårt att avgöra.
Allt detta jag reflekterat över beter sig likadant i Mozilla Firefox 13.0.1, Google Chrome 22.0.1229.26
och Microsoft Internet Explorer 9.0.8112.
Generellt sätt är jag nöjd med designen och valet för att presentera informationsflödet.
Andreas Hagström
860214-7533
Källor
[1] - http://notepad-plus-plus.org/
[2] - http://filezilla-project.org/
[3] - http://www.apache.org/
[4] - http://colorfilter.wickline.org/
14 januari 2013
Webbutveckling – 4 Rapport
Andreas Hagström
860214-7533
14 januari 2013
Webbutveckling – 4 Rapport
Bilaga – Pekka Lillieros opponering på min hemsida
All text under detta stycke är skrivet av Pekka.
Vilken målgrupp verkar webbplatsen ha?
Den verkar riktad mot någon som känner eller vill lära känna personen som skapat sidan.
Vilket syfte eller funktion verkar webbplatsen ha?
Den informerar om sidans skapare och dennes intressen, med både text och bild.
Hur logisk tycker du att navigeringen på webbplatsen är?
Den är väldigt lättnavigerad, eftersom det hela tiden finns en meny i högra marginalen.
Var det lätt att förstå hur man skulle ta sig fram?
Menyknapparna har logiska självförklarande namn. När man för musen över knapparna ändras
bakgrunden så man förstår var man ska klicka. Däremot visas samma title-namn som själva knappen,
när man hovrar över en menyknapp.
Hur används bilderna på webbplatsen?
Bilderna öppnas i samma webläsarfönster när man klickar på dem. Man måste då backa för att
återvända till webplatsen. Ett sätt kunde vara att ha en länk tillbaka eller öppna bilden i ett nytt
fönster.
Hur skulle en synskadad uppfatta webbplatsen?
Sidan skalar bra när man zoomar med ctrl + och -. Det är tydligt teckensnitt och tydliga
färgkontraster mellan text och bakgrund. Bör fungera även för halvblinda. Copyright-raden längst ner
på sidan ligger snyggt ovanpå, vilket man upptäcker först när man zoomat in och tvingas scrolla.
Eventuellt att det kan skapa problem för synskadade när det blir svart text mot mörk bakgrund.
-
Pekka Lillieros 2013-01-14. Orginaldokument på
https://docs.google.com/a/student.miun.se/file/d/1b_qLq2utFbU31H_UHXq0b1D3LkpiuKAaQQippYsZGrBDCaMORTBoYNb_ToF/edit
