Kategori: Webbutveckling01

[7.3 Lagar]

När man skapar en webbsida är det viktigt att följa GDPR för att skydda användarnas personuppgifter. Det innebär att man måste vara transparent med vilken information man samlar in, hur den används och att alltid få samtycke från användarna. Man måste också ha koll på om man kan använda ett verk och i så fall under vilka förhållanden. Det är en bra idé att använda material som är licensierat under Creative Commons, vilket ger möjlighet att använda och dela innehåll på ett lagligt sätt. När det kommer till eget material vill jag att det skyddas och så at jag har fortfarande kontroll over det, Creative Commons är en bra metod. I första versionen av min Landing Page hade jag använt en bild som jag viste inte om jag kunde använda, men när jag uppdaterade sidan för ett par månader sedan tog jag bort den.

[7.4 Tillämpning på egen webbplats]

Utförde stegen:

[7.5 SEO]

Stegen som jag skulle ta:

• Jag skulle optimera webbplatsen först med metabeskrivningar. En kort sammanfattning till exempel för varje sida för mina uppgifter och projekt skulle hjälpa främst personen så att de vet lite om sidan som de ska besöka men också SEO:n och mig eftersom det knuffar min sida högre upp i sökresultaten.
• Sedan om jag har uppdelat min sida i flera sidor med pagination kan jag använda metanyckelord för att göra sidorna mer SEO vänliga.
• H1 taggar är väldigt lätta att använda för rubriker och hjälper med SEO så jag har ingen anledning att inte använda dem.
• Slutligen är det inte bara för SEO men generellt väldigt viktigt att webbplatsen är mobilanpassad. Det hjälper sidan att rankas högre i sökresultaten men också så klart användaren.

_______________________________________________________________________________________

Jag tycker att det är värt att implementera SSL/TLS på Paolos sida för inte nödvändigtvis nuvarande behoven men också långsiktigt. För nu kommer HTTPS protokollet visa till användarna att sidan är säker och sidan kommer att placeras högre upp i sökresultaten, vilket jag tror Paolo skulle vilja. I framtiden vill han kanske implementera ett kontosystem eller betalningsmetoder och då måste personliga uppgifter vara skyddade. Om han har redan använt SSL/TLS är detta inget problem.

_______________________________________________________________________________________

Jag testade min Landing Page med PageSpeed Insights och fick veta at min sida är 90% optimerad med SEO. Det som saknades var en metabeskrivning.

Jag löste det genom att lägga till en metabeskrivning och passade på också att lägga till robots taggen, med index och follow.

Resultatet:

Jag gjorde MarkDown sidan mer responsiv med hjälp av relativa enheter, media queries och Flexbox. Det behövdes bara ett par värden att updatera med relativa enheter, så det var inget strul med det. Jag använde media query för att anpassa sidan till mobila enheter under 800px. Jag anpassade bilden, titlarna och taballen men använde också Flexbox in i media queryn för att ändra ordningen på stycken och bilden så att de ser bättre ut:

https://als071208ap.hemsida.eu/markdownv2/markdownv2.html

MarkDown före:

MarkDown efter:

_______________________________________________________________________________________

För att träna på ramverk använde jag Materialize för att skapa en ny version av min landing page från början. Jag löste de flesta problemen med hjälp av information på deras hemsida och ett par Youtube tutorials. Det var rätt klurigt men det är väldigt effektivt om man blir bra på det. Jag tycker om Materialize och kanske provar något annat ramverk längre fram:

https://als071208ap.hemsida.eu/materialize/materialize.html

Kontroll med wave.webaim.org:

Det verkar som det finns inga fel och bara en varning. Tjänsten säger att man borde inte hoppa mellan heading nivåer, där jag går från h1 till h3. Jag fixade det genom att ändra storleken av listans titel från h3 till h2:

Kontroll med Eiii Page Checker:

Det fanns inga problem enligt WCAG 20 regelverken och jag ändrade inte något mer.

Innan optimeringen:

Bildernas skala förändras inte i websidans kod, och därför tänker jag att den bästa lösningen är att komprimera dem.

Jag använde mig av tinypng och minskade bildernas filstorlek med ungefär en fjärdedel. Här är resultatet:

Det är tydligt att webbläsaren kan ladda bilderna snabbare än innan och jag anser att det var en bra lösning. Det kan finnas flera åtgärder som man kan ta men det här är en rätt effektiv och lätt lösning.

Validering av skogssidan innan komprimering:

Google PageSpeed Insights:

Webpagetest:

Pingdom:

Det verkar som det största problemet är själva layouten av sidan. Kodens struktur kan förbättras och bilderna kan kanske komprimeras också.

Validering av skogssidan på Google PageSpeed Insights efter komprimering:

Det verkar som det största problemet är själva layouten av sidan. Kodens struktur kan förbättras och bilderna kan kanske komprimeras också.

Validering av skogssidan på Google PageSpeed Insights efter komprimering:

Jag använde mig av Compress HTML för att komprimera all kod på en rad., och PageSpeed eftersom den gav tydligaste resultat. Jag provade de andra två komprimeringstjänsterna också men de fungerade inte eftersom skogssidan har intern CSS. Det verkar som komprimeringen hjälpte lite grant med prestandan och laddningstiden är faktiskt lite snabbare.

Smartphone och Tablet i Chrome:

Smartphone och Tablet i Firefox:

Validering av hur mobilanpassad min sida är:

Enligt tjänsten är min sida mobilanpassad, men när man kollar på den är det tydligt at den är inte helt och hållet. Headern och navigeringsfältet fungerar bra men listan har inte skalats ordentligt. En bra sak dock var att jag uppdaterade min landing page innan uppgiften och den blev mer mobilvänlig utan att jag faktiskt gjorde någonting åt det.

Validering av skogssidan:

Skogssidan verkar inte vara lika bra och behöver mer justering än min hemsida.

https://als071208ap.hemsida.eu

https://als071208ap.hemsida.eu/skog/skog_v1.html

Vad jag gjorde:

• Ändrade språket till svenska
• Doctype html flyttad till rad 1
• Tog bort ett par head taggar
• Felstavningar
• Saknades ett div i slutet
• Använde id istället för alt i bilderna, en av bilderna saknade en attribut helt och hållet
• Style behövde vara utanför body
• Sista section var inte stängd
• Sista paragraph låg på fel ställe
• Id istället för attr på den sista
• Tog bort /p från första stycket
• Tog bort en onödig allmän background color

Google

Källa: https://internetmuseum.se/tidslinjen/google-fods-och-forandrar-varlden/

Idag känner alla igen Google, och det är svårt att föreställa sig ett liv utan sökmotorn. De flesta funderingar som man har går det att få ett svar på i några sekunder, men för ungefär två decennier sedan var det dock knappt någon som kände igen företaget. Google grundades av Larry Page och Sergey Brin år 1996 och blev ganska snabbt en succé. Den blev större än den förra populära sökmotorn Altavista på grund av förbättringar som bättre sökresultat, inga reklamer, renare gränssnitt, och till och med ett nytt sätt att lista resultat. Dessa förbättringar behövdes dock också för att uppfylla deras mål om att organisera all världens information och göra den tillgänglig och användbar för alla.

Google idag är så välkänd att man har till och med uppfunnit ett verb för aktionen, att “googla”. Google äger också flera andra stora tjänster som Android och Youtube, vilket verkligen visar hur stor inverkan den har på vårt moderna samhälle.

Android

Källa: https://internetmuseum.se/tidslinjen/android-skapas/

Android grundades av IT-entreprenören Andy Rubin som ett operativsystem för endast kameror, vilket sedan köptes av Google. Målet var att utmana Apple och iOS som hittills hade dominerat den moderna mobiltelefonmarknaden. Första mobiltelefonen med Android släpptes år 2008, och det grundade en ny epok för mobiltelefoner. År 2015 ägdes 78% av marknaden av Android, och de har sedan dess använt operativsystemet för andra enheter och apparater som TV:n, surfplattor och kameror. Android telefoner har verkligen påverkat mobiltelefonens bild både bokstavligen och i tillgängligheten, eftersom det är lättare att anpassa än en iPhone. Plattformens öppna operativsystem har lockat en stor mängd utvecklare och företag att skapa appar och tjänster som ständigt förbättrar systemets erbjudanden. Dessutom har Androids billigare enheter gjort det möjligt för fler människor runt om i världen att ha tillgång till modern teknologi och internet. Jag själv har alltid använt och fortsätter att använda Android enheter och tänker inte ändra mig någon gång snart.

Instagramkravallerna

Källa: https://internetmuseum.se/utstallningar/sociala-medier/instagramkravallerna/

Den 18 december 2012 utbröt kravaller utanför Plusgymnasiet i Göteborg när 400 ungdomar samlades för att konfrontera en misstänkt person bakom ett kränkande Instagramkonto, gbgorroz. Kontot publicerade bilder och förtalade över 200 unga som ”orrar”, ett slangord för slampor, vilket ledde till 90 anmälningar om förtal. Polisen ingrep med stora resurser och arresterade 27 personer. En oskyldig elev pekades ut som ansvarig, men det var faktiskt 2 tonårsflickor, 15 och 16 år gamla, som låg bakom det och som sedan avslöjades av polisen via ip-adressen. De dömdes för grovt förtal år 2013 och fick ungdomstjänst, ungdomsvård, samt att betala 570 000 kronor i skadestånd. Efter händelsen fickGöteborgs rektorer gå en kurs i sociala medier. Detta visar att även maktlösa personer kan orsaka stora skador fritt med hjälp av nätet, och på grund av det anser jag att det är väldigt viktigt att alla oavsett unga eller gamla är välutbildade på internet.

Mobiltelefonen i framtiden

Källa: https://www.tekniskamuseet.se/lar-dig-mer/100-innovationer/mobiltelefonen/

Mobiltelefonens utveckling har gått från stora, oberbara biltelefoner till smartphones. Genombrottet kom på 1980-talet med mobiltelefonsystemet NMT, utvecklat av nordiska televerk, där ett av de drivande företagen var Ericsson. 1991 kom ett system för hela Europa, GSM, vilket möjliggjorde standardisering och snabbare global spridning med hjälp av 3G. Under 1990-talet blev ficktelefoner vanliga, och år 2007 revolutionerade Apples iPhone marknaden med pekskärm och appar, vilket förenade telefon och dator.

Idag är mobiltelefonen central i kommunikation och underhållning, och den fortsätter att utvecklas hastigt. Vi har redan nu större lagringsutrymmen, bättre grafik, och starkare nätverk, samt mer kosmetiska uppgraderingar som Samsungs Z Flip. Det är väldigt svårt att säga hur mobiltelefonen kommer att se ut om 5 år, snarare om 10. Jag tror att storleken kommer att vara ganska stabil, men mjukvaran kommer troligtvis att förändras mer. Flera funktioner som finns till exempel i datorer blir kanske mer tillgängliga och lättare att använda, och mer AI kan inblandas i basfunktionerna. Jag tycker inte riktigt om denna framtid eftersom jag tycker om min integritet, vilket redan försämras på moderna mobiltelefoner, men också bloatware som blir allt mer och mer. Mobilens framtid är väldigt oklar, och den kommer säkert att ha både fördelar och nackdelar.

Jag försökte att komma på ett sätt för att stärka ett lösenord väldigt lätt, och jag tycker att det är en av de bästa metoderna.

Jag använde mig av lösenordet ”pepparkaka” som är väldigt svag, och fick den upp till 100% bara genom att ersätta ”e” med 3, ”a” med 4, och med tre utropstecken. Detta är väldigt lätt att minnas för mig och det förstärker lösenordet utan att göra den helt obegriplig och hur lång som helst.

När det kommer till lösenordshanterare har jag aldrig använt någon, eftersom jag är tveksam om dess säkerhet. Istället har jag ett anteckningsblock gömd i mitt skrivbord där jag har skrivit upp alla mina viktiga lösenord. Jag tycker att det är rätt säkert om man vet att ingen i hushållet försöker leta den, men det är fortfarande kanske inte den bästa lösningen.

Jag installerade Bitwarden och sparade alla mina lösenord som har att göra med skolan och den verkar rätt pålitlig. Den var lätt att sätta upp och jag tycker om att den frågar efter huvudlösenordet alltid efter att man har laddat om sidan eller väntat ett tag. Jag vet inte om jag kommer att överföra alla mina lösenord till Bitwarden, men de som jag har redan lagt upp får stanna där eftersom det är säkrare än Googles lösenordshanterare.

När det kommer till min domän så tycker jag att mina lösenord är rätt bra. Jag har inte bytt ut lösenordet för cPanel, och det beror på att jag anser att den som jag fick i början av kursen är säker. Jag har använt starka lösenord för min WordPress och Filezilla, men har inte laggt upp dem i Bitwarden ännu. Det som jag vill säga är att min lösenordssituation är ganska bra i nuläget men kan förbättras lite grant i framtiden.

https://als071208ap.hemsida.eu

https://als071208ap.hemsida.eu/projekt01/index.html (Finns också i hemsidan)

https://kursolle.se/weuweb01/projekt01.php

https://coolors.co/8693ab-bdd4e7-212227-637074-aab9cf

Validering av kod:

Det var rätt utmanande att bygga denna webbsida. Själva instruktionerna var inte komplicerade, men att få allt att fungera i alla sidor med samma css fil var lite jobbigt. Jag tycker dock ändå att denna var den bästa uppgiften så länge, eftersom man fick några ramar men ganska mycket frihet ändå. Några saker som var kluriga var att få footern fast på botten av varje sida, och det löste jag med position relative. En till sak som jag märkte var att min sidas bredd verkade annorlunda när jag var på hem, tekniker eller projekt. Det hände på grund av webbläsarens scrollbar. Jag behövde använda två css instruktioner, en för att gömma den i chrome och en i firefox. Sedan infogade jag bilderna, och några från pexels var oerhört stora, så jag behövde minska dem med hjälp av https://imageresizer.com/. Till sist kunde inte jag få headern helt rätt, eftersom den verkade okej i liveserver men såg konstig ut när jag faktiskt la upp den, och jag har inte fixat det eftersom jag märkte det ganska sent. Tabellen är inte så bra heller eftersom jag var inte nöjd med min originella idé och blev inte riktigt klar med den. Annars tycker jag att uppgiften var rätt kul och klurig. Det gjorde att jag behöve återvända till bro code’s tutorials för att repetera saker som pagination och flexbox.