Yamoos Blogg

Författare: yamooskibidi17

  • Projektplan – Projekt 03 – Skolis

    Projektbeskrivning

    Jag vill skapa en responsiv och användarvänlig webbsida som visar ett skolschema. Sidan har en tydlig struktur med header, main och footer, samt en sidomeny där användaren kan välja att visa schema för klass, sal eller lärare. Schemat kan visas som dagsvy eller veckovy. För att öka användarupplevelsen ska sidan innehålla en enkel JavaScript-funktion, exempelvis för att byta vy mellan dag och vecka utan att ladda om sidan.

    Mål och syfte

    • Bygga en responsiv webbsida med modern HTML5 och CSS.
    • Implementera en sidomeny för val av schema (klass, sal, lärare).
    • Visa ett enkelt, färgkodat schema med veckodagar och tider.
    • Använda JavaScript för att byta mellan dagsvy och veckovy dynamiskt.
    • Säkerställa god prestanda och användarvänlighet på olika enheter.
    • Ha validerad html och CSS kod

    Målgrupp

    Primärt elever och skolpersonal, men projektet är främst en teknisk övning för att visa webbutvecklingskunskaper.

    Krav

    • Header: Sidans titel.
    • Sidomeny: Val mellan klass, sal och lärare; dropdown för specifikt val; knappar för dagsvy och veckovy.
    • Schema: Visas i ett rutnät med veckodagar och tider, färgkodade rutor.
    • Responsiv design: Sidomenyn anpassar sig efter skärmstorlek.
    • JavaScript: Dynamiskt byte mellan dagsvy och veckovy utan omladdning.
    • Semantisk, välstrukturerad HTML5.
    • Användning av CSS Grid och Flexbox.
    • Responsiv design via media queries.
    • Optimerad prestanda och enkel kod.

    Design och teknik

    • HTML5
    • CSS: Grid för schemarutnät, flexbox för sidomeny och layout, media queries för responsivitet.
    • JavaScript

    Tidsplan (2 veckor)

    Vecka 1:

    • Planering och strukturering av sidan
    • Grundläggande HTML och sidomeny
    • Skapa schemarutnät och styling
    • Skapa schemarutnät och styling

    Vecka 2:

    • Testning och justeringar
    • Dokumentation och förberedelse för inlämning

    MIN SKISS

  • Projekt 02 – Resultat och reflektion

    RESULTAT

    På prestanda testet i PageSpeed Insights fick jag resultatet 94 mobilt på den nya versionen av Paolos webbtjänst. Sidan har en mer modernare look med en enkel font som gör att sidan ser mer professionellt ut. Jag har lagt till mer innehåll och ändrat på CSS så att kontrasten blir bättre vilket leder till bättre tillgänglighet. Har fixat några fel i HTML och CSS koden och lagt till en yttligare Java script funktion.

    UTVÄRDERING OCH REFLEKTION

    Denna uppgift har gått bra då det var baserat på projekt 01 och jag hade redan gjort saker i förväg såsom att komprimera bilder vilket hjälpte till att få högre prestanda. Eftersom jag redan hade gjort den gamla uppgiften responsiv så var det inte mycket ändringar mer än att jag ändrade CSS så att designen på sidan blev mer modern och såg bättre ut.

    Den enda utmaning som fanns i detta projekt var att förbättra media quieries då jag inte är van vid det och hellre föredrar flexbox då jag upplever det som enklast.

    Det jag framför allt tar med mig från denna uppgift är vikten av responsiv design och tillgänglighet. Jag har lärt mig hur detaljer som kontraster, typsnitt och kodstruktur påverkar både användarupplevelsen och hur en sida presterar på olika enheter.

  • Projekt Plan – Projekt 02  

    Syfte

    Syftet med detta projekt är att förbättra Paolos Webbtjänst. Syftet för Paolos sida är att locka in kunder som är mindre företag eller föreningar och behöver hjälp med enklare sidor. Jag ska hjälpa Paolo förbättra hans sida genom att använda de tekniker jag lärt mig under kursens gång. 

    Krav

    • Bildoptimering
    • Responsiv design
    • Validerad HTML och CSS (inga fel)
    • Alt – texter

    Mål

    • Inte ha några valideringsfel (HTML och CSS)
    • Bra prestanda
    • Mer modern och tilltalande design
    • Bättre struktur i koden
    • Vara tillgänglig för alla användare

    Alternativt (om det finns tid)

    • Animeringar (javascript
    • SEO

    Tidsplan

    Vecka 1:
    Utföra tester på den befintliga webbplatsen, inklusive mobilanpassning, prestanda, tillgänglighet och kodvalidering.

    Vecka 2:
    Åtgärda identifierade fel i koden, lägga till alt-taggar för bilder samt förbättra designen och strukturen i HTML och CSS.

    Vecka 3:
    Implementera en enkel JavaScript-funktion, göra sista finjusteringar, genomföra nya tester och slutföra dokumentationen. Publicera webbplatsen på hemsidan och skriva reflektion på WordPress.

    DOKUMENTATION

    Det första jag gjorde var att validera alla koder på projekt01, både html och css. Jag fick inga fel och därefter testade jag prestanda, mobilvänlighet, användarvänlighet och tillgänglighet och redan då hade jag goda resultat. 

    Även om jag hade goda resultat redan så har jag valt att ändra i koden så att den nya paolos webb skiljer sig från original sidan. Har också ändrat CSS så nya färger har förekommit och har också använt en ny font. 

    Ändringar

    • Ändrat färg och lagt till skuggor och ljus accentfärg för mer kontrast
    • lagt till en ny java script funktion 
    • Bytte ut fonten från permanent marker till montserrat
    • Responsiv förbättring – Anpassat i layouten för mindre skärmar och gjort små förändringar i media queries för bättre anpassning till mobilskärm.
    • Lagt till sociala medier ikoner på ompaolo.html sidan.

    TESTER

    Mobilvänlighet

    Jag hade redan gjort projekt 01 mobilvänligt men testade även efter alla ändringar jag gjort i projekt 02 då jag lagt till små förbättringar i media queries och det blev bättre än projekt 01. Jag använde mig av bing testet och amiresponsive.

    Prestanda

    Jag testade prestanda testet på PageSpeed Insights och fick 95 mobilt och 99 dator vilket visar att sidan håller måttet även efter att jag ändrat och lagt till mer saken. Det kan bero på att jag redan hade exempelvis komprimerat och gjort om bildens format i projekt 01. Har även använt flexbox och media queries.

    Validering:

    Jag har använt mig av W3Cs validatorer för både HTML och CSS. Jag hittade några små fel. Hade inte alt texter på alla bilder så lade till det och fixade SEO fel. 

    Tillgänglighet: 

    Efter att ha validerat min kod upptäcke jag lite SEO fel och även att jag missat några alt texter så jag fixade det. Ändrade färgarna i css för bättre kontrast.