Ideer och syfte
Min ide med detta projektet var att få till en fin hemsida som var både mobilvänlig och enkel att använda som nådde de krav Paolo hade på sin webbplats. Detta gör jag för att den ska kunna användas på både telefon och dator så att man snabbt och enkelt kan få reda på saker om Paolo och de projekt han har gjort. Hemsidan är till för att folk ska få reda på mer om vad Paolo jobbat och kan. Det är även så att man ska kunna läsa om det projekt och som Paolo har gjort och det som han kan hjälpa till med.
Kraven som måste finnas i detta projekt är att den ska vara mobilvänlig och tydlig och enkel att använda. Sedan så borde den ha ett enkelt och tydligt sätt att navigera mellan sidorna. Jag skulle även vilja att det stället där man har projekten och förklaringarna för de olika teknikerna ska vara snyggare och inte se lika simpelt ut.
Planering
Jag kommer att börja med att med hjälp av Wireframes rita upp ett skiss. Detta kommer jag att göra för att få en känsla av hur slutprojektet kommer att se ut och vara uppbyggt. När jag har gjort denna skiss så kommer jag att gå in på paolos webb och se hur den nu är uppbyggd och vad för saker jag kommer behöva ändra på och hur jag ska kunna förbättra dessa saker. Efter detta ska jag använda mig av ramverk för att få den så mobilvänlig som möjligt. Jag ska även försöka få in något javascript på min paolos webb. När jag har gjort klart min kod så kommer jag utifrån min checklista jag gjorde tidigare i kursen för att kolla de fel som är på min kod och fixa om det är något annat fel.
Genomförande
När jag började jobba så gjorde jag denna skiss på hur jag tänkte att min webbplats skulle se ut och vara uppbyggd.
När jag hade gjort detta så började jag att kolla på den paolos webb jag hade och vad det var jag skulle behöva ändra för att få att den blev mobilvänlig och inte se ut så som den gjorde innan vilket var detta.
När jag hade gjort det så bestämde jag mig för att använda mig av Materialize för att göra den mobilvänlig. När jag gjorde detta så började jag med att ta bort all CSS för att sedan använda Marerialize för att få den att se hyfsat lik ut som den koden jag hade innan sedan la jag till lite CSS för att få den att se hyfsat bra ut men men i början så såg den hyfsat konstig ut. Ett problem jag stötte på var att navbaren såg ut så här till en början.
Detta tog lång tid att fixa och jag stötte på flera nya problem men till slut fick jag det att fungera. När jag väl hade fått den första sidan att vara mobilvänlig så var det nästan bara att kopiera navbaren, foten och headern till de andra sidor och de blev också mobilvänliga. I slutändan fick jag första sidan att se ut så här.
När jag skulle jobba med Tekniker och Projekt så behövde jag fixa mina tabeller för att de såg ut så här och var väldigt platt och fult.
Så jag in och ändrade det så att det var som små fyrkanter och rundade kanter för att den skulle bli snyggare. Sedan gjorde jag även så att när man hovrar över dem så poppar de ut.
Det näst jag fixade var att försöka få in ett Javascript. Detta tog rätt så lång tid då jag stötte på rätt så mycket problem. Jag skulle försöka få in så att när man är i telefonläge man får upp en hamburgermeny med de olika knapparna för att byta sida. Det första problem jag stötte på var att när jag hade lagt in koden såg den ut så här.
Detta problem hade jag länge och jag fattade inte vad det var för fel. Det jag fick göra för att den skulle funka var att ta bort all den koden jag lagt in och sedan lägga tillbaka den igen.
Testning och Kvalitetssäkring
När jag var klar med detta så gick jag igenom min checklista och det första jag gjorde var att validera mina koder och då såg det ut så här.
När jag hade validerat alla koder och sett till att alla blev gröna så kollade jag om min kod var mobilvänlig genom att använda Bing och då gav de dessa resultat.
När jag hade gjort detta så kollade jag upp prestandan och då gav den hyfsat dåligt på just där så jag förminskade bilderna och efter det fick jag detta resultat.
Det sista jag kollade var hur tillgängligheten var och då fick jag detta resultat.
Resultat
Jag blev rätt så nöjd med resultatet. Det jag blev mest nöjd med var nog ändå hur jag fick hamburgare menyn att fungera. Sedan var jag också hyfsat nöjd med hur mina tabeller blev så att de inte såg ut så som de gjorde innan.
Jag tycker att mycket av det jag gjorde gick bra, det var vissa delar som kanske tog lite lång tid att fixa som hamburgare menyn och att få den mobilvänlig från första början. Jag lärde mig att använda Materialize mycket bättre nu när jag arbetade med det under en längre tid och så lärde jag mig även hur man får in ett Javascript i en kod. Efter att jag har gjort detta har jag fått lite av en känsla hur det är att genomföra ett projekt och det tror jag man har användning av när man gör gymnasiearbete.
Länk: https://als081001te.hemsida.eu/Paolo/index.html
Projekt 03
Mål
Det jag ska göra nu är att få Paolos webb till en one pager. Detta göt jag för att allting ska vara samlat på en page istället för flera olika. Projektet är till så att Paolo kan visa upp det han kan och har lärt sig om.
I detta projektet kommer jag göra om den senaste paolos webb så att den blir en one pager. Jag ska göra så att istället för att man byter sida när man trycker på knapparna i navbaren ska man ta sig till den delen man vill komma till. Det viktigaste med detta är att försöka få hela grejen med att ta sig till den delen man vill att funka.
Min webbplats ska vara en one pager som är mobilvänlig.
Den bör ta sig till den delen man vill om man trycker på den i navbaren.
Jag hade även velat att varje page ska ha olika bakgrund så man vet vilken man är på
Planering
Jag tänker göra en skiss som jag ska utgå ifrån. Sedan ska jag planera hur jag har tänkt att jobba på de lektioner jag har. När jag är klar med all planering innan så kommer jag börja koda och få den att funka innan jag gör alla nödvändiga tester.
När det kommer till tid så har jag bara tre lektioner kvar att jobba. Under dessa lektioner har jag tänkt att jag kodar på de två första för att försöka få den att funka och sedan skriver klart, testar och redovisar på den sista. Jag kommer förmodligen också jobba lite utanför skolan om jag känner att jag inte hinner klart.
Min skiss:
Genomförande
När jag började att jobba så var mitt mål att få allting att vara på en sida och så att när jag tryckte på knapparna skulle den ta mig till den delen av sidan. Jag började med att föra över alla koder till en sida och att få allting att funka från början var hyfsat enkelt. När det kommer till min planering gick det rätt mycket snabbare att fixa sidan än vad jag hade tänkt mig så planeringen ändrades snabbt. När jag gjorde denna uppgift fortsatte jag att använda Meterializer då jag tyckte att det är bra och enklast att använda mig av.
Testing och kvalite
Detta blev mina testresultat som innan så var min prestanda väldigt låg men det var inte något jag kan göra åt saken annars så var det inte annat än småfel som jag behövde fixa med det andra.
Problem och lösning
Ett problem jag stötte på var att få navbaren att koppla av varje rubrik så att den skulle hoppa dit jag ville när man tryckte på knapparna. Detta löste jag genom att genom att ge varje rubrik ett ID och sedan sätta ett hashtag med det IDet navbaren där det tidigare varit en länk så att den skulle hoppa dit jag ville.
Ett annat problem jag stötte på var att ändra färg på korten för att fixa detta så satte jag en class med den färgen jag ville ha med hjälp av Meterializer färgerna.
Resultat
Det jag blev mest nöjd med var att jag fick med allt det jag ville ha med. Jag visste först inte om jag skulle hinna ändra bakgrundsfärgerna på korten men jag hann både ändra det och göra så att både om sidan och hemsidan hade ett kort runt sig.
Utvärdering och reflektion
Jag tycker att självaste uppgiften gick bra, det som möjligen kunnat gått lite bättre är att jag inte blev helt nöjd med de färger jag valde på sidan och hur de ser ut tillsammans. Något som jag gjorde denna gången som jag lärde mig av var att göra en planering även fast jag i slutändan inte helt använde mig av den. Detta är något jag tror är bra att ta med sig och använda sig av när man jobbar med gymnasiearbetet så att man vet om man ligger i fas eller inte.