Hello world!
Välkommen till mitt första inlägg som tyvärr var på engelska så jag översatte det, wordpress tycker inte om Sverige </3
Förväntningar av Webbutveckling
Jag vill kunna designa en snygg och tilltalande webbshop som jag kommer att ha nytta av när min grupp ska sälja på entreprenörskapen
Min nya webbsida och utvärdering
Det som fungerade bra var att koda själva html:en eftersom att jag hade erfarenhet om html sedan tidigare, den svårare delen var att skriva CSS:en för att det var något nytt för mig, speciellt svårt att kunna komma ihåg alla parametrar som t.ex “padding”. Det jag skulle kunna ändra är att byta namn från Evas frukt till Rasmus frukt, annars så ser den bra ut. Det roligaste än så länge är nog att koda och följa guider och se hur webbsidan utvecklas, också hur html och CSS samspelar.
Här är webbsidan:
Länk till “Hit & Dit Resor”
Paolos Webb
https://paolo.weridflex.online/
Nu är min tredje webbsida klar, denna webbsida erbjuder support för olika företags webbtjänster.
Jag har lagt fokus på:
- Följa hans lags färger genom sidans tema.
- Se till att all info finns lätt tillgänglig på sidan.
- Hålla mig så nära till hans skiss som möjligt men ändå lägga till extra funktioner
Uppgift: internets historia
1. Googles revolutionerande sökmotor
Året är 1996 och Standforddoktoranderna Larry Page och Sergey Brin utvecklar en revolutionerande algoritm som kan användas för att ranka webbinformation som t.ex webbsidor utifrån olika faktorer, den kallas för PageRank. Utfrån denna algoritm skapar de en sökmotor som nu heter google, en felstavning av enheten googol (10^100). Här kan man besöka den första versionen av Google’s sökmotor som då hostades(vara värd för) på Stanford University. Kort efter sökmotorns uppkomst skapade de ett företag med ett mål att de skulle vara internets samlingspunkt för all information, t.ex videor, bilder och åtkomst till olika webbsidor. För att tjäna så mycket pengar som möjligt så kopplas orden man söker på till reklamannonser, så kallad personaliserad reklam, detta har på senare år kritiserats då vi inte vet vad som egentligen skickas till Google och att man blir tvingad till det. År 2003 lades ordet “googla” till i ordlistan p.g.a deras popularitet. Numera ingår Google i moderbolaget Alphabet och de köpte upp Youtube, världens största videogemenskap och skapar webbläsaren Chrome som används mest av alla webbläsare idag.
Källor:
– https://www.internetmuseum.se/tidslinjen/google-fods-och-forandrar-varlden/ (“Hasta la vista, Altavista – Google lanserar en revolutionerande sökmotor, internetmusem.se”, hämtad: 2020-01-18)
2. World Wide Web skapas, lägger grunden till dagens internet
Före år 1989 fanns det inget system där man lätt kunde ange en webbadress(URL) för att enkelt besöka en sida eller ens en webbläsare som kan tolka sidors innehåll på samma sätt som idag. Men då utvecklade datateknikern Tim Berners-Lee World Wide Web (WWW), han skapade sin första www baserade webbsida på CERN i Schweiz (den går fortfarande att besöka den idag). Han byggde också en webbläsare så att andra kunde komma åt hans www sida. Detta lade också grunden till DNS-systemet (översätter text till IP-adress) som utvecklats enormt efter detta. Hans webbsida var byggd i programmeringsspråket HTML som han också uppfann. År 1993 släpper han och CERN alla WWW´s rättigheter så att alla kan använda och utveckla dem, det är därför internet ser ut som det gör idag med flera miljoner webbsidor och tjänster.
Källor:
– https://www.internetmuseum.se/tidslinjen/www/ (“World wide web skapas – nu kan internet bli en publiksuccé”, internetmusem.se”, hämtad: 2020-01-18)
3. ARPANET gav grunden till dagens nätverkande
År 1969, var ARPANET utvecklat, detta nätverk hade utvecklats av den Amerikanska militären för att kunna binda deras datorer samman, det första meddelandet som skickades var ”LOGIN”(dvs logga in), men efter bokstaven O kraschade mottagande dator så det första ordet som skickades över nätverket var bara LO. Därefter utvecklades flera olika nätverk, framför allt för förbindelser mellan Amerikanska universitet, år 1973 så fanns det ca 40 datorer sammankopplade över internet runt om i USA. Sedan så spred det sig över hela världen och de kopplades sedan ihop för att skapa det som vi nu kallar för internet. Den första anslutningen utanför USA var i Norge, men signalen gick via Tanum i Bohuslän. Idag så lägger detta grunden till i princip alla nätverk i hela världen, allt från ett simpelt hemnätverk till ett avancerat nätverk inne i ett datacenter och allt i mellan.
Källor:
–https://docs.google.com/document/d/1NgxUYwQn5XfeLnStAjbUa8MHO8cdZoodn6g1CVL-uCw/edit?usp=sharing (“Historia om arpanet, taget från ett gammal tal”, docs.google.se”, hämtad: 2020-01-18)
– https://www.internetmuseum.se/tidslinjen/arpanet/ (“Starten på internet heter Arpanet”, internetmusem.se”, hämtad: 2020-01-18)
4(då, nu och framtid). Från The Pirate Bay till The Pirate Bay
I september 2003 skapade den svenske dator-hackern Gottfrid Svartholm fildelningssidan The Pirate Bay, ett tag senare gick Fredrik Neij och Peter Sunde med i projektet. När projektet blev mer omfattande började folk diskutera kring upphovsrätten till t.ex musik och film som lades upp på hemsidan. Olika grupper som t.ex piratbyrån höll demonstationer mot upphovsrätt för att inte upphovsrätten ska hindra människor att ta del av webbinformation. Den teknik som fildelningssidan använder kallas för peer-to-peer och omfattar ett antal datorer som delar på samma data vilket gjorde det möjligt för många miljoner människor att gratis ladda upp och ladda ner vad de ville. Dock att skaparna av filerna, t.ex filmer och musik förlorade intäkter pga att kunder laddade ner gratis istället för att köpa, vissa laddade ner bara för att demontera mot de stränga rättighetslagarna, denna följd orsakade att ett antal filmbolag tvingade Sverige att år 2006 beslagta The Pirate Bays servrar och åtalade sidans 3 förgrundspersoner, de blev fällda till böter och fängelse. Vilket ledde till The Pirate Bays och piratideologins fall, men sidan återuppstod fast med nya anonyma ägare under en mer kommersiell ideologi med servrarna på okänd ort i Moldavien. Så The Pirate Bay lever vidare. I framtiden så skulle jag kunna tänka mig att piratkopieringen och pirate bay kommer att bli mer populära eftersom att de streaming-tjänster som finns idag är så separerade, t.ex Dplay, Tv4Play och Netflix. Om man nu vill ha tillgång till många online-kanaler så måste man betala för varje tjänst, det innebär att människor kommer att ladda ner istället för att betala mer för en till prenumeration på tjänst, t.ex en serie som bara finns på Tv4Play men man har Dplay där den inte finns, då laddar man bara ner den via The Pirate bay.
Källor:
– https://www.internetmuseum.se/tidslinjen/the-pirate-bay-startar/ (“Svenska fildelningssajten The Pirate Bay startas, slås ned och återuppstår”, internetmusem.se”, hämtad: 2020-01-18)
– https://www.svt.se/kultur/piratskeppet-gar-mot-morkare-vatten (“Piratskeppet går mot mörkare vatten”, svt.se”, hämtad: 2020-01-18)
– https://youtu.be/eTOKXCEwo_8 (“Dokumentären TPB AFK: The Pirate Bay Away From Keyboard”, yotube.com”, hämtad: 2020-01-18)
– https://sv.wikipedia.org/wiki/Piratbyr%C3%A5n (“Piratbyrån”, wikipedia.org”, hämtad: 2020-01-18)
Min samlingssida
Min samlingssida är inte i sin slutgiltiga form eftersom att jag håller på med en “version 2” med bättre färgkontraster och en mer modern design rent generellt samt att jag jobbar fullt upp med att tillfredsställa responsiviteten, här är länken:
Paolos webb och responsivitet
Validering, HTML och CSS
Jag anser att inget behöver justeras så länge jag ej kör skript på sidan.
Responsivitet i olika skärmar
*NOTERA: att texten kan verka vara liten, detta händer eftersom bilden är såpas utzoomad att det är svårt att se vad som står, men använder man en skärm i verkligheten så kommer i princip allting se större ut.
*NOTERA: vissa linjer syns ej PGA utzoomning av skärmen/ bilden, linjerna finns fortfarande där.
När det gäller att köra hemsidan i olika webbläsare ser jag ingen mening med då alla tolkar koden samma, min kod är också ganska gammal så alla moderna webbläsare kan tolka den, det enda som skulle kunna vara annorlunda är upplösningen, fast det ser man ju redan i bilderna ovan hur webbsidan anpassar sig.
Jag har heller inte mycket hårddiskutrymme kvar för en till webbläsare.
Sultprojekt i Webbutveckling (C-A)
Projektplan
- Vad handlar din app/sida om och vad vill du få med på den? Den ska innehålla en landningssida och minst tre undersidor.
– Vad är syftet med appen/sidan? (De kan ju vara flera, men utgå från användarens syfte.) Syftet är att ge besökare tillgång till en billig IT-support, denna support kan ges dygnet runt om man betalat för en månadsplan.
– Vilket är användarens mål? (Till exempel att boka den billigaste resan till semesterparadiset.) Användarens mål är att läsa och förstå hur mitt företag fungerar samt att man kan byta mellan “mörkt läge” och “normalt läge” där färgerna blir antingen mörka eller ljusa, den funkar som en landninssida till där man beställer själva tjänsten vilket inte är färdig då jag skriver denna text.
– För vilken målgrupp är den tänkt? Jag hade tänkt mig, äldre personer som inte har så mycket pengar samt jobbande personer på företag som ofta behöver sina fel åtgärdade så fort som möjligt. - Gör en tidsplanering. Det är inte många lektioner kvar, så uppskatta hur lång tid olika moment tar (pkt. 3-4 samt dokumentation och redovisning) och planera för när du ska göra dem. Blir det ont om tid måste du kanske revidera din plan.
1. Att starta upp (1 lektion).
2. Att bygga den (5 lektioner).
3. Att göra övrigt såsom skriva (2 lektioner). - Vilka funktioner och vilken information ska finnas med? Gör en lista.
1. Om mitt företag.
2. Vad vi erbjuder.
3. Snyggt och lockande färgtema.
4. Moderna element såsom runda knappar.
5. En reklamfilm om vår produkt.
7. En landningssida till där man kan köpa den.
8. En snygg kontaktsida där man kan t.ex skicka ett mejl till en an våra medarbetare. - Gör en wireframe per sida för att organisera innehållet. Om du använder draw.io kan du även färglägga direkt. Välj Layout. Om du väljer att designa som en mobilapp i första hand får du helt enkelt krympa bildytan som du kan rita på.
Om du inte färglägger direkt ska du bifoga den visuella designen på något annat sätt; tecknat och färglagt; ritat i Illustrator eller Photoshop etc.
* Jag har inte längre tillgång till Photoshop! Men här är en svartvit bild på min wireframe*
- Hur resonerar du kring GDPR och Upphovsrättslagen i relation till din sida? Får du använda vad du vill från nätet (bilder, koder etc.)? KursOlle har material du kan titta på.
När det gäller GDPR hänvisar jag till den plattform där man köper produkten, alltså inte min hemsida där man inte behöver ange någon information alls, att genomföra en transaktion ingår inte i min hemsida. Jag litar på att de sparar kundernas betalinformation på ett säkert och anonymt sätt.
Jag har som sagt en reklamfilm på min sida som är hämtad från Youtube, alltså jag äger ej videon. Men uppladdaren får ju pengar då den inbäddade videon har annonser, så istället för att stjäla hens verk så ger jag hen mer tittare och därför mer pengar an vanligtvis, men då måste ju ens sida vara ganska relevant. Och mina anställda på kontaktsidan har var sin profilbild som JAG tagit med kamera vilket indikerar att jag äger bilderna. Jag har också en bild på vår produkt som är tagen från en källa som ger mig tillåtelse att distribuera bilden.
Validering
Under utvecklingen av hemsidan så har jag ej tänkt speciellt mycket på att validera min hemsida, när jag väl i slutet gjorde det så såg jag att det fanns en del problem som behövde åtgärdas.
Jag utgår efter kontaktsidan på hemsidan under alla tester!
CSS-validering: När jag körde denna validering så såg jag ej några problem, inget behövde åtgärdas.
HTML-validering (före):
2. Här är ett problem som relaterar till att jag skrivit 3 bindestreck när jag kommenterat min kod vilket orsakar kompatibilitetsproblem med XML 1.0, som jag ska rätta till.
3. Man behöver tydligen inte skriva vilken typ av resurs det är när man länkar till sina JavaScript men jag låter denna vara kvar för att utöka kompatibilitet med fler webbläsare.
4. Samma som 2
5. Samma som 2
6. Här har jag glömt att lägga till en alt attribut på loggan, ska fixas!
7. Här vill man skapa struktur genom att man ser till att man ALLTID har mellanrum mellan sina attributer, ska fixa!
HTML-validering (resultat):
1. Tog bort så att det bara står “IE-Edge” istället för att “chrome=1” var med, chrome behöver inte vara inblandad eftersom att den är såpas avancerad jämfört med Edge.
2.Tog bort den 3:e bindestrecket på alla kommentarer.
3. Låter denna vara kvar!
4. Samma som 2
5. Samma som 2
6. Lagt till en alt attribut som talar om att loggan för mitt företag ska ligga där om den ej laddas in.
7. Gjort mellanrum mellan attributerna.
Googles Mobilvänlighetstest:
Visar att min konkatsida är mobilvänlig eftersom att jag har 2 olika CSS-filer som det byts mellan beroende på vad för upplösning skärmen har, har den under 1000 pixlar på bredden så körs den mobiloptimerade CSS-filen, tvärtom för den dator/ surfplatteanpassade CSS-filen.
Web accessibility evaluation tool:
Är ett verktyg som analyserar en hemsida för att rätta till fel som har med tillgänglighet att göra, t.ex för små kontrastskillnader eller för litet typsnitt.
Före:
Det finns också en del övriga problem såsom att det finns 2 ställen där texten (typsnittet) är för litet som måste åtgärdas om man vill ha sin hemsida så tillgänglig som möjligt. Samt att jag använder en html-tagg som ej är en titel på footern där jag har gjort en titel av en p-tagg istället vilket bryter hemsidans struktur. Det sista felet är att titeln ligger utanför tabellens struktur, vilket bryter mot strukturen.
Men nu har jag sett till att allt på kontaktsidan har en hög kontrast jämfört med varann, länkarna (både i hover och visited lägen) samt en knapp och footer-färgen har jag ändrat så att de har högre kontrast.
Jag har nu istället för det lilla konstiga hörnet nu gjort en så kallad “dropdown menu” då man trycker på knappen så poppar en meny upp som talar om vilket färgläge man vill ha, samt gjort texten i den rutan lite större än tidigare, men som sagt, det är ingen viktigt funktion för hemsidans funktionalitet.
Jag har gjort footer-texten till en heading (h1) istället för en modifierad “p”-tagg så att “possible heading” varningen försvann.
Sist så har jag fixat till felet angående “layout table” där titeln låg utanför tabellen, då använde jag mig av en “table heading”-tagg och lade texten där istället.
Länk till webbsidan:
Link to free e-mail accounts
This website is 100% secure with https, but it’s a self-signed certificate which many browsers interprtes as danger, but its all nice and secure, also follow thie video uploaded in the site on how to signup and login to a e-mail client. Please keep in mind that you never should use passwords that you use on other websites, always try to use a different password. Also you can anly recieve emails for the foreceble future because of SMTP outgoing connection faults, but I also have the domain razzeman.ddns.net which is more developed on that end, this domain is only for testing with my TE4-class.