Uppgift 5 - Interaktion med HTML5 och canvas

Denna uppgift ämnade att fördjupa i hur man skapar interaktion med HTML5 och JavaScript, genom att arbeta med Canvas och olika multimediala taggar.

Jag kom snabbt fram till att jag ville skapa en bildvisare med navigering. Jag brainstormade idéer och bestämde mig för att göra ett fotoalbum med mina favoritbilder från min Instagram, och att integrera detta galleri i min ePortfolio. En uppgift i en uppgift - väldigt meta. Jag beslutade att ha 20 bilder i albumet, och att välja ut dessa tog sin lilla tid.

Det första kravet för uppgiften var att lösningen skulle bestå av enbart av webbsidor skapade i samt validerade av HTML5. Jag hade läst W3Schools HTML5-tutorial innan jag påbörjade uppgiften så att jag skulle ha koll, och när jag använde olika funktioner såg jag till, i den mån jag kunde, att de var HTML5-godkända. Avslutningsvis validerade jag i W3C:s validator, och behövde därefter ändra lite här och var för att få hela filen HTML5-giltig.

Krav två var att man använde minst en Canvas-tagg och någon sorts JavaScript. Jag har "ritat"/placerat bilderna i en Canvas, och jag använder JavaScript för att "skapa" bilderna och i huvudfunktionen; att kunna klicka sig igenom fotoalbumet. Jag lärde mig hur man "ritar" en bild på en Canvas med hjälp av W3Schools, vilket för övrigt är en sida jag haft stor nytta av genom hela uppgiften, för både HTML5 och JavaScript.

Det tredje kravet var att lösningen innefattade någon slags interaktion med användaren; genom exempelvis musklick och knapptryckningar. Detta innebar att JavaScript behövde användas. Interaktionen i min lösning är att användaren kan klicka sig framåt och bakåt i fotoalbumet - två funktioner som är möjliga på grund av JavaScript.

Det fjärde och sista kravet var att uppgiften hade ett "vettigt" ändamål. Eftersom jag placerat in fotoalbumet i min ePortfolio tjänar den syftet att den som tittar i portfolion och bläddrar igenom albumet lär känna mig lite bättre!

Här hittar du fotoalbumet!