Webbutveckling 1 Introduktion Examinering I Webbutveckling 1 kommer

Webbutveckling 1 <Introduktion>

Examinering • I Webbutveckling 1 kommer ni att examineras på 3 vis, • ett delprov – skriftligt. Torsdag 28 april 10: 00. • ett slutprov – skriftligt. Tisdag 10 maj 10: 00. • ett fristående arbete – skapa en webbplats, deadline måndag 9 maj 08: 00. • Godkänt på alla tre krävs för att erhålla ett godkänt betyg i kursen. 2021 -10 -30

Textredigerare • Sublime Text 3 • Notepad++ • Notepad 2 • Stöd för UTF-8 format. • Visar radnummer. • Stöd för syntax hilight. • Använd inte Anteckningar, Word eller Dreamweaver! 2021 -10 -30

Webbläsare / Browser • Kod kan tolkas olika av olika Browsers. • Viktigt att testköra sin kod i olika Browsers. • Minimum 3 stycken Browsers. • Desto fler, desto bättre. • http: //browsershots. org/ 2021 -10 -30

FTP-klient • FTP = File Transfer Protocol, layer 5 på OSI-modellen. • FTP-program, program som överför filer mellan lokal dator och server. • FTP kan inte visa eller köra filer, enbart föra över filer. • Flash. FXP. • File. Zilla. 2021 -10 -30

Webbserver • Servern där era webbsidor lagras. • FTP-program för att föra över filerna. • Sidan kan då nås av alla som har din URL. • https: //www. 000 webhost. com/ - Gratis • https: //www. one. com/sv/ - 15 kr / månad 2021 -10 -30

Domäner & sökvägar • En webbservers URL kan vara krånglig att hitta till. • http: //46. 30. 212/customers/3/6/4/prome. org//httpd. www/index. php • Det kan därför vara bra att hyra en domän och förkorta din URL. • http: //prome. org/index. php 2021 -10 -30

Webbteknik. nu • Kurslitteraturens upphovsmakares webbplats speciellt framtagen till denna kurs och kursen Webbserverprogrammering. • Innehåller mycket matnyttigt innehåll, bland annat videos, tutorials, flashcards, länkar, övningsfiler osv. • Du måste ha boken för att registrera ett konto där. 2021 -10 -30

W 3 Schools • En komplett steg-för-steg guide för att lära sig diverse märkspråk. • WYSIWYG-editor som uppdateras i realtid. • Gratis. • http: //www. w 3 schools. com/html/default. asp 2021 -10 -30

Google som resurs • Google går alldeles utmärkt att använda som resurs. • HTML-kodning är oerhört populärt. • Det går inte att lära sig alla taggar utantill. • Använd diskussionsforum och andra resurser! 2021 -10 -30

Processen HTML till webbsida • HTML skrivs i lämplig texteditor. • Filen laddas upp via FTP-protokollet till webbserver. • Besökare surfar in via angiven URL. • Webbläsare tolkar filen och returnerar värdet. • Betraktare(du) tolkar innehållet, informationen. 2021 -10 -30

Webbplatser & anonymitet • Domäner registreras alltid i ditt namn. • Det går dock att vara anonym. • Detta innebär att en extern part står som ägare och ditt namn visas ej. • http: //whois. domaintools. com/prome. org • Varför registrera en domän anonymt? 2021 -10 -30

XAMPP • Programvarupaket som bland annat innehåller Apache och My. SQL. • Apache är en webbserver och du kan nu skapa html-filer och lägga dessa under htdocs. • Öppna sedan webbläsare och skriv in localhost. • Mappen htdocs kommer att vara din webroot-mapp. Här kan du enkelt testköra filer innan publicering på annat webbutrymme. 2021 -10 -30

Webbutveckling 1 <Kapitel 1, 2 & 3>

2021 -10 -30

Standarder • HTML skall följa rådande standarder, för att, • Se likadana ut oavsett webbläsare. • Se likadana ut oavsett OS. • Se likadana ut oavsett system(PC, telefon, surfplatta osv). • Fungera snarlikt oavsett användarens förutsättningar(talsyntes och färgblind). • Dagens standarder för HTML och CSS skall följa W 3 C. 2021 -10 -30

Validering • En validering av kod skall göras för att se om den uppfyller gällande standarder. • Detta bör göras tidigt i projektet och fortlöpa med jämna mellanrum. • Ingen sida skall släppas för allmänheten utan en godkänd validering. • Validering hjälper dig också att felsöka din kod. • https: //validator. nu/ • https: //validator. w 3. org/ • https: //jigsaw. w 3. org/css-validator/ 2021 -10 -30

2021 -10 -30

Manuell kontroll • Inget kan ersätta manuella kontroller! • Automatisk validering garanterar en grundnivå och hjälper mot slarvfel och stavfel men kan inte testa allting. • En automatisk validering kan se om du har ställt in ett height-värde till din bild, men kan inte se vad värdet säger, om det är rimligt eller ej. 2021 -10 -30

2021 -10 -30

Namn & sökvägar • Startsidan skall rimligtvis döpas till ”index. filändelse”. • De flesta servrar är konfigurerade att läsa. php först och sedan. html. • Existerar inte index. php läser servern nästa fil i turordningen, index. html. • Filsystemet på en webbserver skiljer sig från det du är van med från Windows. • Två vanliga sökvägar till de publika HTML-filerna brukar vara, • /public_html • /var/www/html 2021 -10 -30

Cache • Kopia av senast använda data – fungerar på samma vis som cache inom hårdvara. • Vitsen är att webbläsaren inte skall behöva ladda in alla tyngre filer varje gång du besöker en sida. • Webbläsaren sparar, beroende på inställningar, exempelvis bilder på datorn och laddar dom lokalt från hårddisken vid nästa besök. • Detta gäller såklart bara för filer som inte har förändrats sedan senaste besöket. • Det blir således färre beräkningar, exekveringar och servers belastning blir mindre. 2021 -10 -30

Statiska & dynamiska sidor • En statisk sida körs från webbservern och visas i webbläsaren. • Besökare kan således inte ändra innehållet alls – envägskommunikation. • Fördelen är att det går såklart snabbare. • HTML • En dynamisk sida skapas när de efterfrågas. Ett program på servern hämtar data från textfiler, databaser, formulärfält osv. och exekverar dessa. Det färdiga resultatet visas sedan i din webbläsare. • Besökare kan kommunicera med servern och göra förändringar i datan – tvåvägskommunikation. • PHP, Java. Script, ASP 2021 -10 -30

En bra webbplats • Skall utformas så att, • Koden är luftig och inte för tight. • Indragen är konsekventa. • Namn på olika klasser, ID och variabler skall ha konsekventa namn. • Det skall vara mycket god kommentering av koden. • Extern CSS-fil. • Validerad utan större anmärkningar. • Webbplatsen skall se bra ut oberoende av system eller webbläsare. 2021 -10 -30

En dålig webbplats • Innehåller • Ramar(frames). • Tabeller för skapande av layout. • För grötig kod utan luftiga mellanrum. • Inline CSS. • Media som användaren inte kan styra över(ljud, bild, reklam, popups osv). 2021 -10 -30

HTML vs CSS • HTML – Hyper. Text Markup Language • Styr dokumentets struktur och innehåll. • CSS – Cascading Style Sheets • Styr dokumentets layout och design. 2021 -10 -30

HTML-terminologi • En vanlig HTML-tagg, <a href> brukar skrivas som följande, • Hela denna kodsnutt utgör ett element. • Man brukar dela upp elementen i mindre delar, 2021 -10 -30

CSS-terminologi • Snarlikt gäller det även för CSS, 2021 -10 -30

Några vanliga HTML-taggar 2021 -10 -30 • <html> • <p> • <head> • <a> • <body> • <img> • <meta> • <div> • <title> • <style> • <h 1> •

Kommentering i HTML • Kommentering för HTML ser ut som följande,  • Man skall alltid skriva kommentarer till sin kod, oavsett kodspråk och nivå. • Detta görs för att enklare felsöka, utveckla och underhålla koden. • Kommentering kan också användas för att temporärt dölja element. 2021 -10 -30

2021 -10 -30

URL • Uniform Resource Locator, delas upp i 6 delar, • Protokoll • Domän • Sökväg • Resursnamn • Query string • Fragment identifier https: //prome. org/DVD-filmer/index. php? q=Action#List Protkoll(schema): https Auktoritet(domän): prome. org Sökväg: /DVD-filmer/ Resursnamn: index. php Query string: q=Action Fragment identifier: #List 2021 -10 -30

URL forts. • Testa själv, öppna webbläsaren och skriv in följande tecken och tryck på enter, (Byt ut mot ditt eget namn) • facebook. com/search/top/? q=DITTNAMN • google. se/search? q=DITTNAMN&lang=sv • google. se/search? q=FÖRNAMN+EFTERNAMN&lang=sv? num=100? newwindow=1 2021 -10 -30

Relativa och absoluta sökvägar • En absolut sökväg beskriver den exakta sökvägen till filen. • En relativ sökväg beskriver sökvägen till filen utifrån vilken mapp man är i. • Absolut sökväg • <a href=”http: //www. domän. se/kattdjur/tigrar/sibiriska_tigern. html">Sibiriska tigern</a> • Relativ sökväg • <a href="tigrar/sibiriska_tigern. html">Sibiriska tigern</a> 2021 -10 -30

Webbutveckling 1 <Kapitel 7 & 8>

HTML historik • Webbens pappa, Tim Berner-Lee. • Idén fick han 1989 och publicerade en artikel om det. • Den första webbservern och webbläsaren släppte han 1990. • HTML 1. 0* släpptes samtidigt 1990. • Vid slutet av 1995 släpptes HTML 2. 0. • Det fann ingen egentlig standard för HTML förens vid v. 3. 2 då W 3 C hade skapats och fått upp någorlunda riktlinjer. 2021 -10 -30

W 3 C • World Wide Web Consortium. • Grundat av Tim Berner-Lee 1994. • Består av ledande industrier, forsknings- och utvecklingsinstitut, standardiseringsorgan och regeringar. • Deras arbete omfattar utveckling av tekniska protokoll, standarder och programvaror för webben. • Syftet är att ha ett öppet samarbete för att leda Internet till dess fulla potential. 2021 -10 -30

Innan grafiska webbläsare • När webbens uppfanns var webbläsarna inte grafiska. • Webbläsarna hade inget GUI(Graphical User Interface). • Webbläsarna var baserad enbart på text - Text-based User Interface. 2021 -10 -30

2021 -10 -30

Grafiska webbläsare & NN • 1993 lanserades den första grafiska webbläsaren, Mosaic, och webben fick sitt publika genombrott. • 1994 släppte företaget Netscape sin webbläsare, Netscape Navigator. • NN fungerade bättre än Mosaic och tog över merparten av marknaden. • NN utvidgade HTML och deklarerade att i framtiden skulle det inte behövas ett operativsystem överhuvudtaget, utan det skulle räcka med NN. 2021 -10 -30

Microsoft ger sig in i leken • Netscape var det enda grafiska alternativet och totaltdominerade marknaden, tills. . • Microsoft kände sig hotade av Netscapes påstående om att operativsystem skulle bli överflödiga och 1995 släpptes Windows 95 med Internet Explorer inbyggt. • NN hade ingen chans mot IE, som följde med som standard till operativsystemet och bokstavligt talat körde över alla konkurrenter. • Några nykomlingar och nyversioner utvecklades på slutet av 90 -talet men ingen kunde riktigt komma ikapp IE. • Links, Gzilla, Opera, Omni. Web, Slip. Knot, Konqueror, Safari, Mozilla, IE for Mac, AOL Browser, är några exempel på webbläsare som uppkom i skuggan av Microsoft. 2021 -10 -30

Trivial fakta • IE 6. 0 släpptes 2001 och anses av de flesta vara IE-dödaren. • Brist på säkerhet och anpassning till rådande webbstandarder gjorde att allt fler bytte webbläsare. • IE 6. 0 har fått många utmärkelser, däribland, ”worst tech product of all time”. • IE fortsatte ändå att vara störst ända fram till 2012(!). • Varför? 2021 -10 -30

De mest använda webbläsarna idag 2021 -10 -30 Chrome IE Firefox Safari Opera 2016 68. 4 % 6. 2 % 18. 8 % 3. 7 % 1. 4 % 2015 61. 9 % 7. 8 % 23. 4 % 3. 8 % 1. 6 % 2014 55. 7 % 10. 2 % 26. 9 % 3. 9 % 1. 8 % 2013 48. 4 % 14. 3 % 30. 2 % 4. 2 % 1. 9 % 2012 35. 3 % 20. 1 % 37. 2 % 4. 3 % 2. 4 %

CSS historik • CSS slog igenom på allvar i slutet av 1996 vid skapandet av HTML 4. 0. • De flesta tillägg som skapats för HTML sedan 1992 var för att styra utseendet. • Vitsen med CSS var att urskilja innehåll från design och med HTML 4. 0 uppmuntrades utvecklaren att använda CSS. • Idag bör alla webbsidors design styras med CSS. • Varför? 2021 -10 -30

De tre versionerna av CSS • För att särskilja HTML från CSS skapade man tre versioner av CSS, • Strict(strikt) – denna versionen förbjuder användande av attribut och element vars syfte är presentation. • Transitional – markerar ovan nämnda attribut och element som nedvärderande men tillåter dom. Tanken här var att underlätta övergången från äldre kod. • Frameset – tillät allt i transitional och även frames(ramar) • Idag går åsikterna isär, men vill du vara på den säkra sidan, använd strikt. 2021 -10 -30

Den stora övergången • Mellan åren 1997/1998 -2000 var det fortfarande OK att använda HTML 4 frameset. • Mellan åren 2000 -2010 var det OK att använda HTML 4 strikt. • Vid övergången till HTML 5 mellan åren 2012 -2014 förändrades detta och när HTML 5 utkom fanns det inte längre några goda skäl att använda en 15 år gammal standard. • Trots detta, är mer än hälften av alla webbsidor idag fortfarande skrivna i HTML 4. • Varför? 2021 -10 -30

Kortfattat om XML • XML är ett annat språk som bygger på samma principer som HTML, med taggar, attribut och innehåll. • XML har mycket mer strikta regler och har en så kallad drakonisk hantering, vilket innebär att om ett fel upptäcks i koden så slutar användaragenten att tolka dokumentet. • Några skillnader är, • • 2021 -10 -30 XML gör skillnad på versaler och gemener. XML tillåter inga tomma element, utan avslutar då taggen. XML måste ha en avslutande tag. XML kräver korrekt nästling.

XML - Exempel • <Message>This is incorrect</message> • <message>This is correct</message> • • • <b><i>This text is bold and italic</b></i> • <b><i>This text is bold and italic</i></b> 2021 -10 -30

Kortfattat om XHTML • XHTML är en blandning mellan XML och HTML och innebar i praktiken att XML: s tolkningsregler gäller men att taggar, attribut och element kan hämtas från HTML. • Detta system utvecklades av Microsoft, till deras program MS Visual Studio. • XHTML slog aldrig igenom då det egentligen inte behövdes och var snarare ett sätt för Microsoft att försöka begränsa marknaden. 2021 -10 -30

2021 -10 -30

HTML 5 • HTML 5 är ett resultat av ett samarbete mellan W 3 C och Mozilla, Apple och Opera, då de tre senare var övertygade om att XHTML 2. 0 inte skulle slå igenom. • Detta var ett öppet projekt där webbdesigners från hela världen fick delta i utvecklingen och vid 2007 lyckades man övertyga W 3 C om att hänga med på detta projekt och överge XHTML 2. 0. • De bildade en gemensam arbetsgrupp och i slutet av 2010 presenterade de ett nytt begrepp, HTML 5. • HTML 5 blev färdigutvecklat och klart i oktober 2014. 2021 -10 -30

HTML 5 vs HTML 4 • Bara några av de enorma skillnaderna, • Förenklad doctype-användning • Många nya semantiska taggar • En hel del osemantiska och överflödiga taggar har försvunnit • Många nya taggar för hantering av media. Det ger ett bra stöd och gör HTML 5 till en fullgod utmanare till Flash, Java och öppnar helt nya dörrar för att utveckla mediapplikationer direkt på webbsidan. • Se gärna http: //browserquest. mozilla. org/ 2021 -10 -30

Webbutveckling 1 <Kapitel 4 & 5>

Uppgifter • Gör uppgifterna från kapitel 4 och 5, med stort fokus på 4. 2 och Läxhjälpen. 2021 -10 -30

Webbutveckling 1 <Kapitel 9, 10 & 11>

Webbsäkra färger • Förr kunde många datorer bara visa 256 färger. • Av dessa var 216 gemensamma mellan Unix, Mac och Windows. • Dessa 216 färger kallades webbsäkra färger för att de fungerade för alla. • Så är det inte idag – Webbsäkra färger är ett utdaterat begrepp. • http: //websafecolor. awardspace. com/ • Moderna datorer stödjer minst 16, 7 miljoner färger. 2021 -10 -30

Att ange färger • Hexadecimala färger - #228 B 22. • Namngivna färger - Forest. Green. • RGB() och RGBA() - (34, 139, 34, 1). • HSL() och HSLA() - (120° 61% 34%). 2021 -10 -30

Hexadecimala färger • Skrivs på ett hexadecimalt sätt med ett spann från 000000(svart) till FFFFFF(vit). • Skall skrivas med ett nummertecken, exempelvis #000000. • Delas upp i 3 par siffror från 0 -F, exempelvis röd är FF 0000. • Kan visa cirka 16, 5 miljoner färgkombinationer. 2021 -10 -30

Namngivna färger • Sedan CSS 2 kan vi istället välja att skriva med namngivna färger. • Exempelvis Red, som då har den hexadecimala koden FF 0000. • Det finns cirka 140 namngivna färger i dagsläget. • Det blir såklart enklare att komma ihåg. • Måste finnas specificerade i webbläsare. Det krävs alltså att webbläsare följer denna standard annars kommer inte färgen att visas korrekt. • Du kan inte använda lika många nyanser. 2021 -10 -30

RGBA • RGBA anges hexadecimalt med hjälp av RGB-färgmodellen • RGBA lägger till alpha-kanalen, som specifierar färgens genomskinlighet 2021 -10 -30

2021 -10 -30

HSLA • HSLA anges hexadecimalt med hjälp av HSL-färgmodellen. • HSLA lägger till alpha-kanalen, som specificerar färgens genomskinlighet. • H = Hue(nyans) – den faktiska färgen. • S =Saturation(mättnad) – färgens klarhet. • L = Lightness(ljushet) – färgtonen. 2021 -10 -30

2021 -10 -30

Bildformat för webben • JPEG - Använder destruktiv komprimering. 24 bits färguppsättning(16, 5 miljoner färgvariatoner). • PNG – Icke-destruktiv komprimering. 32 -bits färguppsättning(4, 3 miljarder färgvariationer). • GIF - Bitmapsformat, reducerar totalt antal färger. Kan animeras. • Web. M – Ersätter GIF. Bibehåller all data. Teknisk sätt en videofil. Har nativt stöd i alla webbläsare. • SVG – Vektorgrafik som skapas i webbläsaren. Kan köras som talsyntes. 2021 -10 -30

GIF vs Web. M • Totalt antal färger GIF – 256. • Totalt antal färger Web. M – I teorin obegränsad*. • Filstorlek GIF – 6. 3 MB. • Filstorlek Web. M - 311 k. B. • Animeringsmöjligheter GIF – Bara från bilder. • Animeringsmöjligheter Web. M – Bilder, filmer, flash, texter med mera. 2021 -10 -30

SVG • Scalable Vector Graphics. • Vektorgrafik-format för tvådimensionella bilder, stödjer animationer. • SVG-bilder och deras egenskaper definieras i XML-textfiler. SVG-bilder kan därför skapas och redigeras med vilken textredigerare som helst. • En SVG-bild kan skapas i ett ritprogram och sedan kan egenskaper för denna anges i XML. 2021 -10 -30

SVG exempel 2021 -10 -30

Uppgifter • http: //webbteknik. nu/userpage/video/wu-lb-11/ • Läs kapitlen. • Gör övningarna till kapitel 11. 2021 -10 -30

Webbutveckling 1 <Kapitel 12, 13 & 15>

Listor och tabeller • De två vanligaste sätten att strukturera information. • Skall nyttjas försiktigt – Din webbsida skall inte designas med listor eller tabeller. • Rätt använt kan de vara väldigt användbara. 2021 -10 -30

Olika typer av listor • <UL> - Unordered list. • <OL> - Ordered list. • <DL> - Description list / Definition list. 2021 -10 -30

UL 2021 -10 -30

UL med style 2021 -10 -30

OL 2021 -10 -30

OL med type 2021 -10 -30

OL 2021 -10 -30

Nästlad varierad lista 2021 -10 -30

DL 2021 -10 -30

Tabeller 2021 -10 -30

Tabelldesign 2021 -10 -30

Mobil Webb • Varför anpassa din webbplats för mobila besökare? • ”Att inte finnas på nätet, med en mobilanpassad sajt, är som att ha stängt en tisdag. Du tappar en mängd potentiella kunder, som aldrig kommer att hitta dig om du inte finns där de letar. ” - Google Europas vice VD Matt Britton 2021 -10 -30

Två strategier av mobilanpassning • Liteversion • Många utevecklare och företag menar på att mobilsurfning är ’on the go’ och därför bör mobilanpassningen vara en liteversion av den riktiga webbplatsen. • Fullversion • Statistiken talar emot detta. Att använda mobilen som primär enhet för surfning blir alltmer vanligt. • Varför skall då besökaren inte få se fullversionen? 2021 -10 -30

Att få ett val – vilka konsekvenser? • Många webbplatser idag erbjuder besökaren att bli förflyttad till en mobilanpassad sida. • Besökaren kan då inte veta om den mobilanpassade sidan innehåller all information som standardsidan innehåller. • Besökaren kan bli kluven och riskerar att missa information. • Företaget riskerar misskommunikation vilket kan leda till dålig PR eller sämre försäljning. 2021 -10 -30

Allt åt alla • Besökare med mobila enheter vill och behöver kunna läsa din hemsidas innehåll också. Behandla dem inte som andra klassens användare bara för de kanske aldrig eller sällan använder den stationära datorn. • All information skall vara tillgängligt för mobila enheter. • Designen och bakomliggande kod kan, och bör, anpassa för mobila enheter. • Stora filer bör krympas. 2021 -10 -30

2021 -10 -30

@Media • För att skapa flera ’versioner’ av din webbplats använder du enklast @media; 2021 -10 -30

Uppgifter • Skapa några egna listor. • Läs kapitlen och gör övningarna i arbetsboken. • Valfritt; • Se dessa videos, Formulärkontroll, Principen för kontaktformuläret, Kontaktformulärets HTML och CSS-kod & Kontaktformuläret med PHP. • Uppgift 13 A, 13 B och extrauppgiften. 2021 -10 -30

Webbutveckling 1 <Kapitel 16, 17 & 18>

Uppgifter • Läs kapitel 16, 17 & 18, med extra fokus på kapitel 18. Svara på frågorna i arbetsboken. • Träna inför delprovet. Provet kommer att fokusera på de teoretiska momenten. Inga kodexempel förekommer i detta prov. • Torsdag 28 april kl 09: 30: Information om ert examinerande arbete. • Torsdag 28 april kl 10: 00 -13: 00: Provskrivning. 2021 -10 -30

Andreas Hagström IT-lärare Folkuniversitetet Gävle Drottninggatan 10 803 20 Gävle Tel: 026 -12 86 80 andreas. hagstrom@folkuniversitetet. se