En enkel genomgång hur du kan skapa en enkel webbsidesdesign med hjälp av html och grundläggande css. Går igenom från grunden, utgår från att du skriver koden själv. Kräver minimal, men viss förkunskap.
En enkel genomgång hur du kan skapa en enkel webbsidesdesign med hjälp av html och grundläggande css. Går igenom från grunden, utgår från att du skriver koden själv. Kräver minimal, men viss förkunskap.
16. Tim Berners-Lee
• Tidigt 90-tal utvecklades standarderna
• HTML
• HTTP
• Målet var att genom länkar
• Ge möjlighet att få tillgång till
information var som helst
• Möjlighet att dela information
23. Vad består en webbplats av?
JavaScript
CSS
HTML
Innehåll
Interaktivitet
Utformning
Struktur
Innehåll
24. HTML
• Hypertext Markup Language
• Märkspråk
• Används för att ge dokument en struktur – vad är vad?
• HTML byggs upp utav element som märker upp vilken typ av innehåll
som finns på sidan
26. Element?
• Det finns olika element som representerar olika innehåll, t.ex.
rubriker, paragrafer, listor m.m.
• Grundprincipen är att det finns en start- och ett sluttagg. Det innehåll
som finns mellan dessa taggar tilldelas elementets formatiering.
• Kan även ha attribut
27. Ett HTML-dokuments struktur
<!DOCTYPE HTML>
<html>
<head>
<meta charset=utf-8">
<title>Min sida</title>
</head>
<body>
<!-- Här kommer innehåll som visas för användaren ligga -->
</body>
</html>
Element som alltid ingår i ett HTML-dokument:
- <html>, rotelementet
- <head>, dokumenthuvud (info om dokumentet)
- <title>, dokukmentets titel
- <body>, dokumentets innehåll
32. Metadata
• Beskriver vilket innehåll som finns på HTML-sidan
• Det kan vara saker som:
- Sidans titel
- Vilken teckenkodning som används
- Vilket språk sidan är på
- Vilka författare som gjort sidan
- Funktion & utseende på sidan
• Detta skrivs inom <head>-taggen och berör hela dokumentet.
32
33. Grundläggande element för tabeller
• <table> Skapar en tabell
• <caption> Beskrivning/rubrik för tabell
• <tr> tabellrad (table row)
• <th> Rubrik-kolumn (table header)
• <td> Data-kolumn (table data)
• Obs, alla taggarna har start- och slutttagg.
34.
35. … fler möjligheter med tabeller
• Det finns lägen då man inte vill att alla rader/kolumner ska se exakt
lika ut:
• En kolumn som sträcker sig över x antar rader
36.
37. Översikt - olika element i ett formulär
Knapp
Text-fält (stort)
Text-fält
Checkboxar
Radioknappar
Drop-down meny
38. Varför används formulär?
• Ett sätt att skicka data från klienten (webbläsaren) till en server
- Spara data
- Validera data
- Analysera data
50. CSS – Same same but different
• Formgivning åt HTML-dokument
• Typografi
• Layout
• Färger
• Bildhantering m.m.
51. Olika typer av element
• Det finns två huvudtyper av element (finns fler, mer om det sen).
• Block
• Inline
• Block-element visas generellt (utan styling från css) upp över hela
skärmen horisontellt, som ett block
• Inline-element visas generellt (utan styling från css) endast upp där
dess innehåll finns.
52. Olika element
• Block-element för layout:
• Section, article, div m.m.
• Block-element för innehåll
• p, table, ul, h1
• Inline-element
• i, span, strong, b, a, img
53.
54.
55. Hur skriver man CSS?
• Först måste man ange vad som ska stylas (s.k. selektor). T.ex. om
man vill styla alla h1-taggar skriver man ”h1” följt av tecken {}.
Mellan {} skrivs de egenskaper som <h1>-taggarna ska ha. T.ex.
h1{
color: blue;
text-align: center;
}
62. Identifiera element genom id
• I HTML kan man identifiera specifika element genom att ge dem ett unikt id
• Ett id ges genom attributet ”id” samt namnet på id:t
• T.ex. för att ange ett id för en paragraf kan man skriva:
• Eller för att ge en rubrik ett id:
• Eller för att ge en bild ett id:
63. Identifiera element genom klasser
• I HTML kan man identifiera element genom att ge dem en klass
• En klass ges genom attributet ”class” samt namnet på klassen
• T.ex. för att ange en klass för en paragraf kan man skriva:
• Eller för att ge en rubrik ett id:
• Eller för att ge en bild ett id:
64. Att formge element genom att ange klasser i
CSS
• För att referera från CSS till de element som har tilldelat sig en viss klass
skriver man . (punkt) och klassnamnet
• T.ex. för att referera till paragraferna:
Så skriver man i CSS:
• Och för att ge texten i paragraferna med klassen ”blue” blå färg skriver man
i CSS:
67. Arv – flera färger
body{
color:green;
}
p{
color:blue;
}
68. CSS Repetition
• För att referera till ett element skriver man:
• element{egenskap:värde;}
• För att referera till element med en klass skriver man:
• .klassnamn{egenskap:värde;}
• För att referera till ett element med ett id skriver man:
• #id{egenskap:värde;}
71. Positionering
• Visar elementen i den ordning de skrivs i HTML-koden
• Static (standard)
• Relative
• Visar elementen i relation till förälder-elementet eller dokumentet
• Absolute
• Fixed
72. Att lägga element bredvid varandra
• Egenskapen ”float”
• Gör så att man kan placera block-element bredvid varandra
• Float:left; Flyttar elementet till vänster
• Float:right; Flyttar elementet till höger
• Gäller
• postion: static
• position: relative
80. Vad är flexbox?
• Ett sätt att positionera ut element på en webbsida
• Ett alternativ till att använda t.ex. float för att bygga layouter
• Flexbox utgår från att positionerna ut barn-element i en ”container”
på olika sätt.
89. #container align-content
• Används bara vid flera rader
.container { align-content: flex-start | flex-end | center | space-between | space-around | stretch; }
https://css-tricks.com/snippets/css/a-guide-to-flexbox/
97. Dagens föreläsning
• Hur har vi arbetat tidigare?
• Hur brukar man arbeta?
• Praktiska exempel på ramverk
98.
99.
100.
101.
102. De grundläggande tankarna bakom ramverk är
enkla: Samla fungerande kod och gör den
återanvändbar. Passa samtidigt på att presentera
ett enhetligt sätt att skriva kod.
http://computersweden.idg.se/2.2683/1.606077/ramverk-eller-inte-ramverk--det-ar-fragan
103. Fördelar med ramverk
• Utvecklare slipper skriva kod för grundläggande uppgifter själva
• Koden i ett ramverk kan antas vara testad och tämligen felfri
• Det blir enklare att få en struktur för hur kod ska skrivas
• Medlemmar i utvecklarorganisationer och projekt kan enklare
anamma ett enhetligt arbetssätt
104.
105.
106. Dags att kolla in ramverk!
- Bootstrap
https://getbootstrap.com
112. Programmering handlar om att instruera en
maskin eller del av en maskin […] att utföra ett
visst arbete.
113. Vad är JavaScript?
• En teknik för att utveckla interaktiva webbsidor
• Ett programspråk inbäddat i webbläsare
http://en.wikipedia.org/w/index.php?title=File:Unofficial_JavaScript_logo_2.svg&page=1
114. I vilket sammanhang används JavaScript?
JavaScript
CSS
HTML
Innehåll
Interaktivitet
Utformning
Struktur
Innehåll
116. JavaScript - Historik
• Utvecklades av Netscape under mitten av 90-talet
• Har inget med Java att göra – det är ett eget programmeringsspråk
• Microsoft skapade sin egen version av JavaScript – Jscript
• På senare dagar (2005) har ajax blivit en populärt
• Lägger till extra funktionalitet för webben och webbläsare
117. Vad kan man göra med JavaScript?
• I princip vad du vill! (som har med webbsidor att göra)
• Men det används ofta till att skapa interaktiva webbsidor
• Med interaktiv menas: Reagera på användaras handlingar och
modifiera webbsidans innehåll
118. Programspråk
• Programspråk är, till skillnad från t.ex. svenska och engelska, formella
språk
• De ska uttrycka något utan tvetydighet.
• Men programspråk delar vissa likheter med naturliga språk –
vokabulär och grammatik.
• Även uttryck och instruktioner.
119. Instruktion (statement)
• Ett program består av en lista instruktioner
• En instruktion består av minst ett uttryck och avslutas med ett
semikolon ”;”
5;
alert(”Hej och välkommen”);
var birthYear = 2017 – age;
120. Att skapa ett program
• Uppgiftsformulering, vad är det för uppgift som ska lösas?
• Vilka steg behöver utföras för att lösa uppgiften?
• Vilka instruktioner kan användas för att utföra varje delsteg (algoritm)
121. Algoritm
• En beskrivning över hur man löser ett problem. Algoritmen består av
ett antal instruktioner och beskriver i vilken ordning instruktionerna
ska utföras.
http://www.recepten.se/recept/pasta_carbonara.html
124. Inbäddat skript
• HTML-elementet <script> används för att definiera ett JavaScript-
block.
- Jämför detta med att inkludera inbäddad CSS-mall med hjälp av
<style>
• Elementet <script> kan placeras var som helst i HTML-dokumentet,
inte bara i <head>
• JavaScript-koden körs på den plats JavaScript-elementet finns.
128. Definition av användbarhet (1)
• “The extent to which a product can be used by specified users to
achieve specified goals with effectiveness, efficiency, and
satisfaction in a specified context of use” (ISO)
129. Definition av användbarhet (2)
Använd-
barhet
Lätt att lära Effektiv
Ändamåls-
enlig
Fel-
tolerans
Engage-
rande
130. Definition av användbarhet (3)
• Effektivitet
o Rätt funktionalitet
o Stödjer användarens arbetsuppgifter
o Lätt att lära och komma ihåg
• Produktivitet
o Gör sällan fel
o Klarar många arbetsuppgifter
o Snabb
• Nöjda användare
o Kanske rent av kul
o Bra till mods
o Ej ohälsosamt
o Orsakar inte stress
o Orsakar inte arbetsskador
• Säkerhet
o Användarna kan inte ”förstöra” av
misstag
o Man kan ångra sig
132. Användarna – vilka är de?
• Demografisk information
• Vad kan dem?
• Vad kan de lära sig?
• Vad är deras generella bakgrund?
• Vad är deras domän?
