Redovisningssida

Här kan man läsa hur jag löst uppgifterna 1-5 som är de jag har valt att göra. Man kan läsa hur jag gått till väga, vilka jag jobbat med och förklaring till svårare moment. Övriga källor, så som internet och om jag tagit hjälp av handledning finns omnämnt i den separat inskickade koden på Moodle. I denna ePortfolio finns dessutom det färdiga resultatet av Uppgift 3, 4 och 5 (Psss! Titta uppe bland menyflikarna!) för att inte tala om Uppgift 2 som du surfar runt på just nu! Läs och njut!

Uppgift 1, Objektorientering i Python:

Denna inledande uppgift introducerade mig i objektorientering genom att utöka ett redan befintligt program med en klass. Sedan innan fanns en klass för "punkt" och "cirkel". Klassen Punkt ska ärvas av både klass Cirkel samt den klass jag själv skapade, Klass Rektangel. Den klassen räknar ut arean och omkretsen på en Rektangel. Ett klassdiagram skulle också skapas i samband med denna uppgift, som en övergripande skiss över programmet, vilka klass-, variabelnamn samt metoder som finns i varje klass och hur de relaterar till och verkar med varandra.

I det här fallet ärver både lass Cirkel och Klass Rektangel egenskaper från Klass Punkt utan att ändra på någon av de lokala variablerna. Att variablerna som skapas blir privata märks ut med .__ och på så sätt kan inte klass Cirkel och Rektangel ändra något i Klass Punkt som de ärver ifrån. Pilarna i klassdiagrammet som går både från Klass Cirkel och Klass Rektangel som riktar sig mot Klass Punkt visar att de ärver den senare.

Uppgift 2, HTML5 & CSS3:

Här fick vi återigen leka med HTML, denna gång med "nya" HTML5 och stilsättning i CSS3. Jag skapade då denna ePortfolio där man kan hitta lite information om mig, mitt CV, denna sida med redogörelserna över de uppgifter jag valt att lösa. Inte nog med det, ytterligare tre sidor visar resultatet av Uppgift 3-5.

Användandet av de nya taggarna i HTML5 har varit lärorikt, att varje del av sidan får en tydligare identitet än tidigare då allt mest var en sörja av div- och span-taggar. Att koda i HTML för mig är väldigt logiskt och namnet på de nya taggarna i HTML5 gör det ytterligare lättförståeligt. Strukturen på sidan, var sidomenyn ligger och att jag valt "flikar" som navigering, under headern, föll sig naturligt då min egen privata blogg följer en liknande struktur. Jag valde dock att navigeringen på sidan skulle se annorlunda ut samt designen i övrigt; så som bakgrund, färger och form är helt annorlunda. Färgen lila tycker jag om och ljust grått och olika ljusa lila toner tycker jag passar bra ihop, därav färgvalet. Det blev en väldigt "Emmig" sida på grund av färger men även teckensnittet. Fonten Arial har följt mig länge och det kändes fel att göra ett annat val nu. Sidan är lättnavigerad och läsbarheten är hög på grund av färgernas kontraster mot varandra. Inget som sticker i ögonen eller syns dåligt.

Jag tycker inte denna uppgift var speciellt svår och klurig i och med att vi haft tidigare uppgifter i HTML, att vi tidigare inte använt HTML5 gjorde det hela inte speciellt mycket svårare. Taggarna är mer logiska och CSS3 har infört lite nya funktioner. För att hitta de nya taggarna och andra lösningar på stilsättning i CSS3 har jag surfat mycket på w3schools.com för att få tips och idéer eller bara komma på vad en tagg eller lösningar på stilsättning heter. Sen har det inte varit speciellt krångligt att bygga ihop alla element och få det till en helhet.

Uppgift 3, Telefonnummervalidering:

Denna uppgift innebar att jag fick testa på Javascript och datavalidering. Detta genom att göra ett enkelt formulär i html-filen som anropar funktioner i en extern Javascript-fil. När användaren skriver in ett telefonnummer i "text"-fältet prövas inmatningen om det följer den angivna if-satsen i Javascriptfilen. Är telefonnummret kortare än 8 siffror eller längre än 14 siffror får användaren upp en alert, ett felmeddelande att telefonnummret ska vara längre eller kortare. Användaren får även feedback om telefonnumret är korrekt skrivet - utan bokstäver eller mellanslag.

Denna uppgift gick ganska lätt att lösa med hjälp av föreläsningen och lite av de kunskaperna i Python då if- och else-satser gjorde sig påminda. Surfade även denna gång in på w3schools.com för att få tips och idéer för hur man anger olika villkor beroende vilken inmatning som är korrekt.

Uppgift 4, Canvasspel:

Den här uppgiften löste jag tillsammans med Malin Nyström. Vi fick mycket hjälp av handledningen och en hel del surfande. Vi valde att göra ett spel med två större rutor som vardera ruta innehåller fyra canvaser. Åtta canvaser allt som allt. I den höra stora rutan finns fyra bilder som är felplacerade. För att se bilden korrekt klickar man i de tomma rutorna i den stora vänstra rutan och då åker bilden dit i korrekt utförande. Dock, vi har fått hjälp av handledningen och andra som är kunniga inom området men ingen kan förstå varför bilderna blir förvridna och förvrängda. I den externa koden för denna uppgift (finns på min domän under "Uppgift 4") är canvasernas storlek exakt 198px x 198px. Samma storlek har alla bilder, de är exakt 198px x 198px men ändå så blir bilderna utdragna och ohoppressade. Eftersom spelet funkar och vi inte kunde få hjälp med detta lämnar vi in denna uppgift i det här utförandet.

Här gällde det att vara påhittig och googla en hel del för att få fram vissa inbyggda funktioner, eller bara det att bilden ska visa sig på canvasen och dessutom försvinna när den blivigt klickad till rätt ställe. Det var knepigt när vi stötte på problem som vi inte riktigt förstod eller visste vad vi behövde. Skulle verkligen ha uppskattt en Javascripts föreläsning till för att få lite mer kött på benen.

Uppgift 5, Kortnummervalidering med Luhn-algoritmen:

Den här uppgiften löste jag tillsammans med Louise Abrahamsson. Vi byggde vidare på våra lösningar av Uppgift 3, då formulärets form i html-filen samt att inmatningen skulle följa samma typ av villkor, föll sig det naturligt. Vi fick bygga på både med fler else if-satser för att kortnummerinmatningen ska börja på en 4:a, ha en viss längd samt ej innehålla annat än siffror (här fungerar isNaN fortfarande ypperligt). När koden kommer till else i första if-satsen, följer LUHN-algoritmen genom fyra for- loopar och avslutas med en ny if-sats som testar om variabeln resultat går att dela med 10 utan att få en rest vilket är det sista steget i att avgöra om det är ett korrekt kortnummer eller inte.

Det jag tycker var knepigast här var LHUN-algoritmen som var det vi var tvungna att lösa på ett bra sätt. Det gällde att hålla tungan rätt i munnen och ta ett steg i taget. Vi körde på att inte sätta resultat-variabeln till ett tal istället för en sträng vilket gjorde att vi inte kunde addera som vi skulle. Det fick vi hjälp att lösa på handledningen. Innan dess hade vi testat allt och googlat som galningar. Kanske att nästa år skulle ha litteratur där man kan lära sig mer om javascript? Eller en till föreläsning som jag nämnde ovan. Det är svårt att hitta lösningar och felen när man är helt ny på det. Men det gick tillslut och nu funkar vår validering av kortnummer som den ska!