I denna uppgiften gjorde jag mitt första formulär med <form action =”output.php” method=”post”>. Här gjorde jag ett enkelt formulär med namn, efternamn, födelsedatum och mer. Detta skickas sedan till output.php där jag skriver ut informationen med echo $_POST[”]; för varje individuell sak jag vill skriva ut.
M03U02
Denna uppgiften gjordes i en fil, det svåra med denna uppgiften tyckte jag var att förstå vad jag skulle placera PHP koden i filen. Jag använde isset för att kolla om användarnamn var satt, och ifall användaren valt att döda sessionen. Jag har från och med här börjat lite med milligram CSS så det inte ser lika tråkigt ut, ser inte perfekt ut men bättre än inget CSS alls.
M03U03
Denna uppgift bygger på den tidigare men nu tar kakor sin infart. Kakan lagrar namnet genom att konstant kolla ifall ett namn är satt, ifall det är satt så lagras det som en kaka. Sen när det gäller att döda kakan så trodde jag att man kunde göra ungefär såsom med sessions, men jag fick lära mig att det inte direkt fanns någon direkt sätt att döda en kaka. Därför gjorde jag så att jag använde mig av en isset, som kollar om användaren tryckt på knappen för att döda kakan, ifall användaren gjort det så satt jag: time() – 3600. Detta gjorde att kakan gick ut och försvann.
M02 gav mig den första inblicken i PHP, hur det kan användas och till vad. Jag fortsätter att lära mig nytt. Men i M02 har jag fått lära mig lite av det mest grundläggande såsom echo, konkatenering, variabler, enkla if else satser, switch, hur jag skriver ut allt på en gång med var_export, array och mer.
Generellt har det gått ganska bra att lära sig grunderna i PHP, det är mycket liknande python när det gäller if else satser. Jag hann inte göra alla övningar med försökte göra så mycket som möjligt och känner att jag har lärt mig en del.
Finns vissa mindre saker i PHP som behöver sätta sig bättre, t.ex. att växla mellan att skriva strängar och variabler.
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.
