Olivers SIDA

Senaste inläggen

  • Redovisning av M06

    Använda relativa enheter

    Innan jag började arbeta med relativa enheter och dynamisk viewport så var Markdown sidan inte mobilvänlig.

    Problemet är texten blir väldigt liten och att hela skärmytan (viewport) inte används. Det blir svårt att läsa på mindre enheter.

    Efter att ha uppdaterat sidan till att använda en dynamisk viewport och relativa enheter (rem) på fonterna är sidan mobilvänlig.

    Notera att jag fick ändra fontstorleken till 1 rem (16 px) för att den skulle räknas som mobilvänlig. Det som har ändrats är detta:

    min-height: 100dvh;
    font-size: 2rem;

    Jag använder också en media query:

    @media (max-width: 600px) {

        #mdimage {

            max-width: 30%;

            height: auto;

        }

    Detta gör att bilden inte blir för stor.

    Jag fick också justera tabellen då den blev för bred. Detta gjorde jag med word-break: break-word; i table description (td).

    Här finns den validerade HTML och CSS koden:

    Använda ramverk

    Därefter valde jag att göra om skogssidan med ramverket Materialize från Google. Med Materialize finns det mycket färdigt för att använda komponenter som vanligtvis används på en websida såsom nav, hero, footer bland annat. Här används inline CSS, vilket betyder att vi inte använder en separat fil för CSS. Vi kan också få mycket hjälp genom att använda klasser tillsammans med div.

    Först behöver man länka till stylesheet, exempelvis <link rel=”stylesheet” href=”https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/css/materialize.min.css”>.

    Inom <style> i HTML-filen har jag satt olika färger som passar bra med skogstemat. Navigeringsbar och footer har samma färg. Sen har hero, delen under nav en ljusare grön färg. När det gäller texten i navigeringsbar har jag använt funktionen clamp för att sätta en en minimistorlek, en optimal storlek och en maximal storlek. Detta förhindrar texten från att radbryta som det gjorde på min första version. Detta görs med font-size: clamp(1rem, 4vw, 1.5rem); Jag använder denna funktion på flera ställen.

    När det gäller själva uppbyggnaden av sidan så använder man klasser, exempelvis <div class=”nav-wrapper container”> och <div class=”container” style=”margin-top: 2.5rem;”>. Varje rad är sedan indelad i kolumner. Det är 12 kolumner totalt och varje bild tar upp 4 kolumner.

    Fördelen med Materialize tycker jag är att man får ganska mycket hjälp med att bygga upp strukturen på webbsidan och att det blir lättare att hantera var saker ska placeras på skärmen.

    Här är den validerade HTML koden:

  • M07 Uppgift: Lagar

    GDPR, Upphovsrättlagen och CC

    GDPR, Upphovsrättlagen och CC (Creative Commons) är alla viktiga lagar. GDPR för att skydda användares information och alltid ha tillåtelse att göra det ifall sidan behöver det. Upphovsrättlagen skyddar dina verk såsom musik, bilder och mer från att andra ska kunna använda det, primärt i kommerciellt syfte. Creative Commons underlättar att folk ska kunna använda dina verk genom att undvika att behöva kontakta dig. Du kan du licensiera ditt verk via Creative Commons som erbjuder gratis upphovrättslicenser, där du ställer krav på dina verk och hur dom får användas, detta innebär att personen som vill använda ditt verk inte behöver kontakta dig men endast följa villkoren för det du har skapat, till exempel att du inte vill att din bild ska användas i kommerciellt syfte.

    Vad behöver man tänka på när man bygger webbsidor?

    GDPR

    När man bygger webbsidor är det väldigt viktigt att följa GDPR som finns för att skydda användares personuppgifter och säkerställa att personen godkänt att man samlar in information, annars kan man få stora konsekvenser såsom böter, detta är speciellt viktigt ifall du driver företag då bötern kan nå upp till 4% av den globala årsomsättningen. Till exempel bötfälldes Meta år 2023 på en summa av 1,2 miljarder euro, eller 13.5 miljarder SEK.

    Upphovsrättlagen

    Upphovsrättlagen skyddar dig som skapar, och producerar olika saker som bilder, musik och film. När man som webbutvecklare använder material är det väldigt viktigt att säkerställa att man får använda det materialet man hittar genom att fråga skaparen eller följa kraven ifall det är licensierat med Creative Commons. Att bryta mot lagen kan ge böter eller fängelse upp till två år i Sverige.

    CC (Creative Commons)

    Creative commons finns för att underlätta delandet av ditt verk och att det används så som du vill. När man bygger en webbsida och hittar det material som man vill ha kan det ibland vara licensierat under CC, detta innebär att du får endast använda materialet under speciella villkor som skaparen angivit, annars bryter man villkoren vilket innebär att du bryter mot upphovsrättslagen.

    Vad gör jag för säkerställa att jag följer lagarna

    Jag använder oftast aldrig bilder eller annat material och verk på mina webbsidor, skulle jag göra det så kollar jag alltid om får det. Annars använder jag egna bilder, och liknande vilket är det lättaste för att säkerställa att man inte bryter mot upphovsrättslagen.

    Gällande GDPR så är det just nu inget problem då mina webbsidor inte behöver samla in information om folk.

    Har jag brutit mot några av dessa lagar?

    Pågrund av att jag inte använder verk förutom dom bilderna som är del av uppgifterna på kursolle så bryter jag inte mot upphovsrättslagen då jag endast använder det i skoluppgifter och lärosyfte, exempel är Paolos Webb uppgiften där en bilds används som ligger uppe på Pexels, Pexels är helt fritt att använda och man får redigera. Sen är annat material i uppgifterna sånt som man får använda då min lärare har bett oss använda specifika bilder eller typsnitt. Så ser jag inte hur jag kan ha brutit mot varken Upphovsrättslagen eller GDPR.

    Hur vill jag att mitt material ska skyddas?

    Gällande det jag skapar och lägger upp på min wordpress eller projektsidan så kan man använda projekten enligt Kursolle då det är uppgifter och inlämningar som används i lärosyfte hämtat från kursolle. Sen är alla uppgifter med material som jag får från Kursolle som används för att lära ut. Gällande WordPress inläggen så får man gärna kika och så då jag skriver om det jag lär mig och har gjort.

  • Internets historia

    Arpanet

    Det vi kallar internet idag startade med arpanet. Arpanet skapades av amerikanska försvarsmyndigheten ARPA, och iden upptäcktes 1963. Syftet var att bygga ett nätverk för utbyte av mjukvara och forskningsresultat mellan institut som hade finansiell backning av Pentagon. Tidigare krävdes det dedikerade telefonlinjer mellan varje institut för kommunikation. Detta gjorde det känsligt för attacker som kan slå ut nätverket. Därför krävdes ett decentraliserat nätverk som skulle kunna överleva en kärnvapenattack.

    Arpanet lade grunden för dagens internet, det är en av dom mest betydelsefulla uppfinningarna någonsin. Idag kan alla kommunicera oavsett var man befinner sig. Det har gjort information lätt tillgänglig som tidigare krävdes att besöka ett biblotek. Det har även haft en betydelsefull påverkan på andra industrier såsom handel och nöje.

    TCP/IP

    Innan TCP/IP användes främst fasta förbindelser och det fanns många olika protokoll för kommunikation där typiskt varje tillverkare av operativsystem eller nätverksutrustning hade sina egna protokoll. Amerikanerna Vint Cerf och Robert Kahn arbetade med arpanet och i maj 1974 presenterade de TCP/IP som är protokoll som möjliggör att skicka paket mellan datorer. Intelligensen flyttas ut från tele operatören till ändpunkterna. Vint och Robert benämns ofta som internets skapare.

    Internet hade inte blivit framgångsrikt om det inte fanns en standard för att på ett pålitligt sätt kunna skicka paket mellan datorer. Man gick från att ha många olika lösningar till att standardisera på TCP/IP.

    Sökmotorer

    Sökmotorer har funnits sedan början av 90-talet. Där några av de första var Yahoo!, Lycos, AltaVista. I början av 2000-talet blir Google den dominanta sökmotorn. En position de har lyckats behålla sen dess. Ofta genom att teckna avtal med exempelvis Apple, och andra företag så att de blir sökmotorn som används som standard.

    Nuförtiden så integreras alltmer AI i sökmotorer. Nu om man söker på något på Googles sökmotor som exempel, så dyker det upp en sammanfattning gjord av AI där man även har valet att fortsätta en konversation med en Chatt bot. Tidigare har det krävts mer kompetens för att göra bra sökningar, nu kan man enklare med männskligt språk uttrycka vilken information man är intresserad av. Istället för att endast bemötas av länkar så kan man nu få det förklarat och sammanfattat av AI.

    I framtiden så tror jag att besök på hemsidor kommer att minska alltmer då folk inte går inte på hemsidorna längre, men istället tar information från en AI bot. Det kommer göra det svårt för mindre sidor att överleva tror jag. Gällande traditionella sökmotorer i framtiden, så lär dom finnas kvar. Men AI botar, kommer troligen vara det vanligaste då folk inte kommer att orka att söka igenom varje sida.

  • M04 BurgerBase

    In this assignment I was tasked to create a website for a Burger restaurant, while following a full guide on youtube. The CSS was already premade and I didn’t have to create any of it. The HTML had a guide so you couldn’t really mess it up, but I still had alot to learn from it and I also learned how to use some Emmet abbreviation in VS code which makes the boring parts quick and I can instead focus time and energy for more crucial and time consuming things.

    Link to BurgerBase

    Validation CSS & HTML

    Here is the validated CSS

    Here is the validated HTML

    The validation service gave me 4 warnings about not using a header when using the section semantic element. This could be fixed relatively quickly if you change the section element to a div element. But this removes the use of the semantic element and reduces clarity and benefits of semantic elements. Therefore I chose to keep the section element.

    Other than that this assignment was both fun and helped me develop better HTML skills.

  • M03

    The project was beneficial to become better and more used to using CSS. The hardest part was figuring out the borders, margins and the paddings so it looks like the original. If you want to see the project you can by pressing the link M03.

    After I was done with the project i validated my CSS

    And my HTML

    Which was all good, except that it warned that I didn’t specify the language used in the file.

  • Landing Page HTML & CSS

    A few days ago I launched my landing page. HTML and CSS has been pretty straightforward this far, but I don’t know how it will be further into the HTML and CSS journey.

    Validated HTML

    Validated CSS

    So far my landingpage is very simple. So far I only use 2 colors, blue for paragraphs and other text, and green as a background. I’ve made an header with buttons for about, contact and hyperlink to my wordpress.

    Landing page

    It was fun to make a landing page. The only difficulty I encountered was adding a font, and moving the buttons for Home, About, Contact and WordPress to the right.

  • My WordPress Beginner Experience

    Why I choose this theme

    I choose to start out with the Twenty Twentyfive theme, since it looked like a theme that could fit the site. The only thing I have done was changing the color theme and the font. We will see if it stays this way or not.

    What plugings have I installed and why?

    So far I have only installed one plugin which is Akismet. Akismet is an antispam which sounds like a good way to start out because I don’t want to remove a bunch of spam comments manually.

    Edit:

    After some consideration and tips from a friend I have now also installed Smush and Code Block Pro. Smush compresses and converts image formats to WebP or AVIF. Code Block Pro adds syntax highlighting for the website.

    What have I done so far with my page?

    I haven’t done alot other than laying the ground for my website. I did actually make and homepage and a tutorials page dedicated to dirtbikes because it’s my biggest hobby but I am not sure yet if that’s what I want to do. But it would be cool to make tutorials about how to work on your bike and do important maintenance.

    If you want to know more just visit the about page down below

    About