Under projektet har jag lärt mig ganska mycket, speciellt att utnyttja verktyg för att förbättra sidan inom olika delar såsom prestanda, bild prestanda och tillgänglighet.
Jag har lärt mig mer om semantisk HTML, CSS och litegrann av Javascript. Jag har lärt mig hur viktigt det är med en bra planering och struktur för lite större projekt för att bli klar med saker i tid, samt att uppnå allt man vill i sidan.
Jag har märkt att om man vill göra snygga sidor så blir de rätt så många rader CSS vilket tar riktig lång tid och är svårt.
Jag kommer att använda ett verktyg från wave.webaim.org för att testa tillgängligheten på sidan.
Tillgänglighet index.html (hem)
Alert pågrund av att sidans huvudinnehåll har en Kontakta mig knapp som leder till om sidan samtidigt som det finns en länk till om sidan i navbar.
Tillgänglighet tekniker.html
Liknande fel som förra. Problemet är att sidans namn i navbaren är en länk till hem sidan (landing page) samtidigt som hem länken finns i navbaren.
Tillgänglighet projekt.html
Samma problem som i tekniker html
Tillgänglighet om.html
Problemet ligger i formulärets rubrik och kontakt uppgifter som har en grå färg med för lite kontrast till bakgrunden som kan upplevas mer svårläst för personer med nedsatt syn. Jag ändrade färgen från #64748B till #4A5568. Efter jag bytt ut färgerna så blev det 10/10 i AIM Score.
På detta inlägget testar jag prestandan på p02 innan jag har optimerat den.
Prestanda index.html (hem)
Prestandan är väldigt bra för att inte ha blivit optimerad
Prestanda tekniker.html
Väldigt bra här också trots flera bilder
Prestanda projekt.html
Väldigt bra här också
Prestanda på om.html (om sida)
100 i prestanda, finns inte direkt något att göra bättre.
Storlek på bilder innan optimering
Bilderna är redan ganska små, troligen varför laddtiden är så bra. Dock går nog det att minska storleken på burgerbase bilden då den är lika stor som 5-10 andra bilder.
I detta inlägget ska jag validera HTML och även CSS koden för att visa att den är korrekt uppbyggd. För HTML använder jag validator.w3.org och för CSS jigsaw.w3.org
Validering index.html
Validering gav inga varningar eller fel på index.html
Validering av tekniker.html
Allt funkade rätt här också.
Validering av projekt.html
Som tur är allt rätt här med.
Validering av om.html
Sista HTML filen validerar korrekt, vidare till CSS filen.
constnavLinks=document.querySelectorAll('nav ul li a');constcurrentPage=window.location.pathname.split('/').pop() ||'index.html';navLinks.forEach((link)=>{constlinkPage=link.getAttribute('href').split('/').pop();if (linkPage===currentPage) {link.classList.add('active');}});
Med denna kod matchar jag på alla list element i navbar. Javascriptet kollar vilken sida som är aktiv och jämför med länkarna i navbar. När den får en träff sätter den class=”active” i den html kod som den läser in för sidan man är på. Detta är ett skalbart alternativ till att sätta klassen på varje HTML fil.
När används det? Det används när sidan läses in.
Hur påverkas användaren? Det blir lättare att se vilken sida man befinner sig på.
Här ställer jag in att alla element har noll i marginal och 0 i padding från början. Detta gör att det blir lättare att sätta eller beräkna marginaler och padding istället för att behöva ta hänsyn till vad webbläsaren gör. Jag använder border-box vilket förenklar att bestämma storleken på element jämfört med content-box som är standard. Där måste man ta hänsyn till padding och border. Jag har också pseudo elementen ::before och ::after för att framtidssäkra om jag behöver använda dom i framtiden. Dessa kan exempelvis användas för att skapa grafiska effekter.
Här sätter jag namn på olika färger jag vill använda för att det ska bli lättare att använda färgerna på olika ställen istället för att skriva hexkoden varje gång. Det blir också tydligare vilken färg jag använder. Jag använder pseudo klassen :root som innehåller alla andra element. Därför kan jag använda variablerna i resten av filen.
Här kommer nästa del:
html { font-size: 62.5%;}
I font-size sätter jag värdet 62.5% i hela HTML filen, detta gör att 1rem är lika med 10px, istället för 16px. 16 * 62.5% = 10. Detta gör att det blir lättare att sätta storlekar med rem och förstå vad det blir i pixlar.
Här ställer jag in några saker som gäller för hela bodyn, först så väljer jag vilken font som ska vara standard på sidan, då undviker jag att behöva ställa in fonten varje gång jag har använt ett nytt element. Sedan väljer jag standard storleken på all text inom bodyn, alltså storleken som den håller ifall jag inte ändrar något. I detta fall 1.6 rem som blir 16 pixlar. Efter det så väljer jag bakgrundsfärg på allt inom bodyn, det är en av färgerna som jag har bestämt. Sedan bestämmer jag textfärgen vilket är en av dom variablerna jag bestämde. Sist så har jag satt line-height på 1.7, detta är avståndet mellan raderna av text, jag har ökat den för att öka läsbarheten.
Nästa del:
a { color: inherit; text-decoration: none;}
Webbläsare gör länkar blå som standard, color: inherit gör att färgen på en länk matchar omgivningen. text-decoration: none tar bort understrecket på en länk.
Nästa del:
img { display: block; max-width: 100%;}
Display: block; tar bort utrymmet under bilden. Max-width: 100%; gör att bilden inte kan bli större än boxen.
Nästa del:
h1,h2,h3 { font-weight: 500; line-height: 1.2;}
Ställer in tjockleken på texten, så 500 är lite tjockare än 400 som är standard men inte helt bold. Line height 1.2 sätter bara utrymmet mellan två rader. Eftersom en rubrik är kort så funkar 1.2 utmärkt, istället för 1.7 som är på vanlig text.
Position: fixed; gör att navbaren förblir synlig även om man skrollar längre ner. top:0; gör att navbaren hamnar helt längst upp, samma sak gäller left: 0; men att den istället hamnar längst åt vänster där navbaren börjar. Width: 100%; gör att navbaren använder hela viewporten. Height: 60px; gör ju att navbarens höjd håller 60px. z-index: 100; detta gör att navbaren alltid förblir längst upp på sidan istället för att innehållet renderas över navbaren. Sen under z-index så väljer jag en navy dark blå färg. Display: flex; gör att länkarna till dom olika sidorna stackas brevid varandra istället för att dom hamnar under varandra. align-items: center; gör att länkarna/knapparna centreras vertikalt i navbaren. justify-content: space-between; gör att loggan hamnar längst åt vänster och att länkarna trycks iväg mot höger sida på navbaren. Padding: 0 4rem; nollan gör att det är 0 padding vertikalt eftersom redan har centrerat elementen med align-items, 4rem gör att det blir 40 pixlar padding på vänster och höger sida.
Nav logo:
nav a.logo { color: var(--white); font-size: 1.7rem; font-weight: 500;}
Här anger jag färg, storlek och tjocklek.
Nästa del:
nav ul { list-style: none; display: flex; gap: 0.4rem;}
list-style gör att det inte blir någon punkt eller siffror på listan i navbaren. Det är 4 pixlar mellan dom olika list elementen.
Nästa del:
nav ul a { color: var(--blue-ghost); font-size: 1.4rem; padding: 0.6rem 1.2rem; border-radius: 5px; transition: background 0.18s, color 0.18s;}
Vi har padding: 0.6rem 1.2rem;, detta är för att skapa distans mellan länkarna i navbaren, för att göra det lättare att klicka på dom speciellt på mobila enheter, så det blir 6 pixlar vertikalt och 12 pixlar padding vänster och höger. Border-radius gör att kanterna blir runda på länkarna. transition element gör att när musen är över en länk så ändras färgen på länken på 0.18 sekunder istället för direkt vilket ger en snyggare övergång.
Nästa del:
nav ul a:hover,nav ul a.active { background: var(--blue); color: var(--white);}
Ändrar färgen på länkarna i navbaren när muspekaren står över länken samt visar vilken sida som man är på.
Bakgrundsfärgen är inte den samma över hela bannern, det är en linjär övergång mellan olika blå färger vilket skapar en snyggare sida som blir lite roligare. Text-align gör att texten centreras i bannern. Färgen är satt vit enligt min standard. Padding är 100 pixlar top, 20 pixlar vänster/höger och 50 pixlar längst ner.
.banner är den delen av sidan som är precis under navbaren men som inte innehåller huvudinnehållet:
Här justerar vi minsta storleken för huvudinnehållet på sidan (hero min-height) och padding som är 80 pixlar top, 20pixlar vänster/höger, och 60 pixlar ner.
Sätter maxbredd av texten under huvudinnehållet till max 52rem eller 520 pixlar, detta gör att texten radbryter oftare och inte blir en jättelång text sidleds som i den första versionen av Paolos webb. Opacity sätter genomskinligheten på texten.
Längst upp anges höjd och bredd. Under sätter jag radien på bordern till 50% av boxen vilket gör att bilden ser ut som en cirkel. object-fit: cover; gör att att bilden passar i cirkel bordern och att allt som hamnar utanför klipps bort. Border: gör att det skapas en vit ring runt bilden med 30% genomskinlighet.
.btn eller button, längst upp anger jag att display: inline-block;, det gör att de element som ska se ut som knappar hamnar i linje med texten. Knapparna har en vit border men ingen bakgrund vilket gör att knappen blir transparent. Jag använder igen transition för att skapa en animation.
.btn:hover gör att jag kan bestämma vad som händer med elementet när muspekaren står över knappen, i detta fall blir bakgrunden vit med en genomskinlighet på 15%.
.content är huvudinnehållet på sidan inom maintaggen med max bredd 96rem vilket är 960 pixlar, marginal 0 över och auto på höger och vänster sida. Padding 60 pixlar över och 40 pixlar vänster/höger sida.
Här skapar jag en grid som används för att gruppera korten. Den skapar kolumner som är minst 280 pixlar men som kan växa om utrymmet behöver fyllas. Med auto-fit skapar den så många kolumner som får plats. Det är 24px mellanrum mellan korten.
Här applicerar jag stilen på korten. Overflow:hidden; gör så korten inte hamnar utanför den runda ramen. När musen hålls över ett kort ändras färgen på ramen.
Här appliceras stilen för tabellen som används för Paolos kontaktuppgifter. Border-collapse: collapse; används för att det inte ska bli dubbla linjer där cellerna möts. All text omvandlas till versaler med text-transform: uppercase;. Länkar färgas blått och färgen på länkarna ändras när muspekaren står över med hjälp av hover.
Här appliceras stilen på labels i kontaktformuläret. Jag har satt en maxbredd för att det inte ska bli för brett. Jag använder också display: block så att texten hamnar ovanför fältet där man fyller i text.
Här appliceras stilen på textfälten in formuläret. Input: focus och text-area: focus används för att visa användaren vilket fält som är aktivt. Jag använder button[type=”submit”] för att applicera en stil på knappen. Färgen på knappen ändras när man håller musen över den.
Här appliceras stilen för footern. Jag har en media query som används för skärmar 600px eller lägre för att justera storlekar och padding. Den justerar också så att det blir färre kolumner i card-grid.
Här kommer jag att beskriva viktiga delar av HTML koden exempelvis hur jag har gjort sidan anpassad för responsiv design, tillgänglighet och prestanda.
Den här raden justerar viewport, den synliga ytan, till den bredd som enhetens skärm kan hantera. Den sätter också zoomnivån till 100%, vilket förhindrar att sidan laddas in inzoomad eller utzoomad.
Här läser jag in en bra font till sidan, men endast dom storlekana jag tänker använda till sidan, detta är för att minska datan som behövs laddas in när man öppnar sidan vilket gör att den får en snabbare laddtid.
Här skapas navigeringsbar, genom att skapa en lista som jag sedan applicerar en stil på i CSS. Jag använder mig av aria-label, för en bättre tillgänglighet, aria-label läser upp Huvudnavigation vilket gör det lättare för personer med nedsatt syn att navigera. Det är dock inget som visas på sidan. Det finns också en länk till första sidan uppe till vänster på sidan om man trycker på sidans namn.
I nästa del är huvudinnehållet på sidan:
<sectionclass="banner hero"aria-label="Introduktion"><pclass="eyebrow">Webbutveckling & design</p><h1>Paolos webbtjänst</h1><pclass="sub"> Välkommen till Paolos webbtjänst. Jag har på kort tid lärt mig en mängd webbtekniker och är nu redo att hjälpa dig att få ett bra hem på nätet. Tveka inte att höra av er till mig så kan vi diskutera hur jag kan bygga rätt lösning för just dig eller ditt företag.</p><ahref="om.html"class="btn">Kontakta mig</a><imgsrc="img/paolo.jpeg"alt="Paolo"></section>
Jag använder section taggar för att gruppera innehållet. Klassen heter banner hero som är en term som används inom design, för huvudinnehållet. Det finns också en klass som heter eyebrow, som är texten ovanför hero klassen. Texten ligger under klassen sub. Rubriken är Paolos webbtjänst inom h1 tag, som man endast borde använda 1 gång per sida. Texten kontakta mig har en klass som heter btn, för att det ska ske ut som en knapp btn (button).’
Det sista på sidan är att ladda in javascripten:
<scriptsrc="app.js"></script>
Tekniker html
Följande kod är värt att gå igenom:
<mainclass="content"><divclass="card-grid"><articleclass="card"><imgsrc="img/html.png"alt="HTML5 logotyp"><divclass="card-body"><h2>HTML5</h2><p> HTML5 är grunden i de webbsidor som jag skapar men jag behärskar också HTML4.01 om du tycker att utvecklingen går för fort. HTML är ett märkspråk som utgör själva ramen för webbsidorna som jag sedan med hjälp av andra tekniker formaterar så att de ser ut som vi vill.</p></div></article></div></main>
Först har jag en klass som heter content, den används för att centrera innehållet och lägga till marginaler på sidan om texten. Denna klass används på flera sidor.
Det finns också en div klass som heter card-grid. Denna används för att skapa struktur för att visa teknikerna som kort. Sedan kommer själva korten, som tillhör klassen card. Notera också att jag använder taggen article för att ha rätt semantisk html. Inom card har vi klassen card-body, som innehåller en h2 heading, samt huvudinnehållet i en paragraph.
Om html
På denna sidor har jag kontaktuppgifter i en tabell enligt nedan:
I koden så används table body (tbody), table row (tr), table header (th), och table data (td). Här används inga speciella klasser då det ändå är lätt att formatera den eftersom jag bara har en tabell. Länkarna öppnas i ett nytt fönster eftersom target=”_blank”. Den sätter också noreferrer för att inte ge sidan som öppnas information om vilken sida användaren kom ifrån.
Sen kommer det ett formulär:
<sectionaria-labelledby="form-heading"><h2id="form-heading">Skicka ett meddelande</h2><formaction="#"method="post"><labelfor="name">Namn</label><inputid="name"type="text"name="name"placeholder="Ditt namn"autocomplete="name"><labelfor="email">E-post</label><inputid="email"type="email"name="email"placeholder="din@epost.se"autocomplete="email"><labelfor="subject">Ämne</label><inputid="subject"type="text"name="subject"placeholder="Vad handlar det om?"><labelfor="message">Meddelande</label><textareaid="message"name="message"placeholder="Berätta mer..."></textarea><buttontype="submit">Skicka meddelande</button></form></section>
Just nu är form action # vilket innebär att informationen inte skickas någonstans. Varje fält har en label, detta gör att fältet som man är inne på highlightas. Jag använder också placeholder, för att visa vad det är man ska fylla i fältet. Sen har vi autocomplete=”name”, detta säger till webbläsaren att den förväntar sig ett fullt namn, detta gör att webbläsaren kan autofylla namnet efter tidigare formulär som man har skrivit in sitt namn. Det finns också en textarea där man ska skriva i sitt meddelande. Slutligen har vi knappen för att skicka in formuläret, som hetter button med type submit.
I projekt 02, ska vi använda en liknande struktur och färgschema som i projekt 01. Jag har valt att ändra färgerna lite för att skapa bättre kontrast för tillgänglighet, samtidigt som det gör den lite snyggare. Jag har också flyttat menyn till höger sida, och valt ett annat typsnitt. Bilden nedan visar hur jag tänker mig sidan ska se ut
Jag kommer att använda samma filer som tidigare, men med nytt innehåll. Det har också tillkommit en fil för hantering av javascript.
Syftet med detta projekt är att vidareutveckla den existerande webbsidan med nya tekniker som jag har lärt mig. Detta kommer att visa potentiella kunder att Paolo kan erbjuda ytterligare tjänster.
Målgruppen är småföretag och föreningar som behöver hjälp med enklare former av webbsidor.
Den nya sidans struktur kommer se ut enligt wireframe nedan.
Genom att klicka på länkarna i nav bar kan man navigera till olika delar av sidan. Sidan kommer ha samma sidor som tidigare:
hem – introsida och bild
tekniker – exempel på tekniker som Paolo arbetat med
projekt – projekt som Paolo arbetat med
om – kontaktuppgifter till Paolo
För att hinna leverera på avsatt tid kommer tiden fördelas på följande:
