Webbprogrammering och interaktivitet Introduktion, HTML5, CSS & Selenium
TDP013
Anders Fröberg (
anders.froberg@liu.se)
Institutionen för Datavetenskap (IDA)
Kursens nyckelpersoner
!2
Examinator: Anders Fröberg Kursansvarig: Anders Fröberg
Kursssistenter: Mattias och Tore
Kontakta mig (anders.froberg@liu.se) gällande frågor om kursen.
Kontakta kursassistent för hjälp kring laborationerna.
Kursens design
!3
I högskoleförordningen står det under mål för kandidatexamina bland annat att:
För kandidatexamen skall studenten - visa förmåga att söka, samla, värdera och kritiskt tolka relevant information i en problemställning samt att kritiskt diskutera företeelser, frågeställningar och situationer, - Högskoleförordningen (1993:100)
•
Kursen är byggd på ett sätt som lägger stor vikt vid att ge
studenterna möjlighet att själva söka efter den information som behövs för att lösa de innefattande laborationerna.
•
Föreläsningarna är tänkta att introducera ämnena och hjälpa
studenterna att komma igång med sin informationssökning.
Kursens litteratur
!4
•
Det finns ingen officiell tryckt litteratur till kursen.
•
Varje föreläsning redovisar för dess referenser på kurshemsidan.
•
Tänk på examina-målet!
visa förmåga att söka, samla, värdera och kritiskt tolka relevant information i en
problemställning samt att kritiskt diskutera företeelser, frågeställningar och situationer
Kursens kunskapsfilosofi
Kursens innehåll
!5
•
Kursen behandlar webbteknik med fokus på programmering av webbapplikationer.
•
Kursen består av ett antal programmeringsuppgifter (laborationer) som behandlar viktiga teknikdelar som HTML5, CSS, JavaScript för klient och server
(node.js+express) samt MongoDB.
•
Ett större programmeringsprojekt genomförs slutligen.
Kursen bygger i stor grad på egen programmering.
•
Examination sker genom muntlig demonstration och presentation av funktion och kod.
•
Etik inom mjukvarutveckling
Kursens examination
!6
•
Laborationer och projekt görs i par och registreras i webreg i
vanlig ordning. Instruktionerna för varje laboration visar tydligt vilka kurs-, program- och examensmål laborationen är tänkt att
examinera.
•
För godkänt i kursen skall laborationerna genomföras, men
graderat betyg avgörs av projektet. Mer info på kurshemsidan.
Kursens tekniska innehåll
!7
•
Klientsida (dvs det användaren ser och som körs i webbläsaren)
•
HTML, CSS, JavaScript ->HTML5
•
Serversida (dvs det som körs på en datorn någonstans som innehåller all information som skall visas)
•
Node.js+Express.js (JavaScript) och MongoDB (databas)
•
Förutom detta kommer vi titta på olika verktyg för att
testa klient och serversida.
Varför utvecklar vi webbapplikationer?
Skrivbords applikation
Outlook 2003 släpps Användare köper och
installerar.
Outlook 2007 släpps Nu krävs ny marknadsföring och skeppning av produkter
till butiker
Användare behåller det gamla office paketet, tycker
inte det behöver
uppdateras, eller vet kanske inte ens om att man kan
uppdatera.
Mr Gates
Mr Gates
Varför utvecklar vi webbapplikationer?
Skrivbords applikation Webbapplikation
Outlook 2003 släpps Användare köper och
installerar.
Outlook 2007 släpps Nu krävs ny marknadsföring och skeppning av produkter
till butiker
Användare behåller det gamla office paketet, tycker
inte det behöver
uppdateras, eller vet kanske inte ens om att man kan
uppdatera.
Mr Gates
Mr Gates
Office 365 lanseras Användare skapar konto på
nätet och betalar en liten summa varje månad.
Nya uppdateringar görs av sidan
Nästa gång användaren loggar in syns dessa nya
ändringar
Användare får direkt tillgång till nya uppdateringar utan
att man behöver marknadsföra dessa till existerande kunder eller
skeppa till butiker.
Inkomsterna är kontinuerliga varje månad, så länge
kunderna är nöjda.
Mr Nadella
Mr Nadella
Varför använder vi webbapplikationer ?
• Inga installationer (om datorn har en webbläsare).
• Om man sitter hemma hos någon eller på
internetcafé spelar ingen roll, så länge man har en webbläsare och internet.
• Samma filer på alla datorer man loggar in från.
• Kan logga in från hela världen och t ex läsa sin mejl.
En av de bästa saker med Facebook är att personer kan använda det på t ex semestern eller jobbet, från vilken dator som helst.
Tänk om Facebook varit en skrivbords
applikation som skulle installeras på datorn, hade företaget blivit värderat till $50
miljarder dollar under 2011 ?
Server
Kapitel 1 Lorem ipsum dolor sit amet, consectetur adipiscing elit. Avsnitt 1 Vestibulum venenatis, velit sed cursus ultricies, sem nisi fringilla erat.
1. Hämtar ett rent text dokument, användaren kan läsa med viss svårighet.
Server
Kapitel 1 Lorem ipsum dolor sit amet, consectetur adipiscing elit. Avsnitt 1 Vestibulum venenatis, velit sed cursus ultricies, sem nisi fringilla erat.
1. Hämtar ett rent text dokument, användaren kan läsa med viss svårighet.
<h1>Kapitel 1</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. </p>
<h2>Avsnitt 1</h2>
<p>Vestibulum venenatis, velit sed cursus ultricies, sem nisi fringilla erat.</p>
2. Hämtar ett HTML dokument, hjälper inte användaren att läsa, blir bara värre.
Server
Kapitel 1 Lorem ipsum dolor sit amet, consectetur adipiscing elit. Avsnitt 1 Vestibulum venenatis, velit sed cursus ultricies, sem nisi fringilla erat.
1. Hämtar ett rent text dokument, användaren kan läsa med viss svårighet.
<h1>Kapitel 1</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. </p>
<h2>Avsnitt 1</h2>
<p>Vestibulum venenatis, velit sed cursus ultricies, sem nisi fringilla erat.</p>
2. Hämtar ett HTML dokument, hjälper inte användaren att läsa, blir bara värre.
Kapitel 1
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Avsnitt 1
Vestibulum venenatis, velit sed cursus ultricies, sem nisi fringilla erat.
3. Om vi låter vår webbläsare få ta hand om HTML dokumentet, så visar den upp ett läsbart och indelat dokument.
Det finns många webbläsare på marknaden, och de är inte alla lika.
Därför kan man ibland bli lite förvånad över hur ens webbplats ser ut på olika webbläsare.
Eftersom webbläsare kan rendera HTML lite olika är det viktigt att
testa sin webbplats på flera läsare under utvecklingens gång.
HTML
Syntax and structure
HTML5
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Document 1</title>
</head>
<body>
<p>The first and only paragraph.</p>
</body>
</html>
HTML5
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Document 1</title>
</head>
<body>
<p>The first and only paragraph.</p>
</body>
</html>
⁃ Elements start + end
attributes + values content
⁃ Elements can be nested, but may not overlap.
Tag syntax
⁃ Docyment type
<!doctype html>
⁃ Non-closing tag
<tag>
⁃ Start and end tag
<tag>content</tag>
⁃ Non-closing tag with an attribute+value
<tag attribute="value">
⁃ Start and end tag with attribute+value
<tag attribute="value">content</tag>
DOM tree - family relationships
Syntax
⁃ Whitespace (tab, space, return) is not significant. Still, you should keep your code tidy.
⁃ Character case does not matter, but use lower case letters for tags
HTML defines structure
⁃ semantic use
for search engines
⁃ organizational use
prepare for css styles prepare for interaction
Comments
⁃ Make comments to disable parts of your HTML code or to annotate your code
<!-- This is a comment -->
Headings
<h1>Heading 1</h1>
<h2>Heading 2</h2>
<h3>Heading 3</h3>
<h4>Heading 4</h4>
<h5>Heading 5</h5>
<h6>Heading 6</h6>
Paragrphs
<p>paragraph 1</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim
veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
<p>paragraph 3</p>
<p>paragraph 4</p>
Links
<a href="url">Link text</a>
Images
<img src="url">
Structural elements
Structural elements
⁃ A block of something <div> </div>
⁃ An inline element <span> </span>
Semantic elements in HTML5
<header>
<nav>
<section>
<article>
<aside>
<figcaption>
<figure>
<footer>
http://www.w3.org/TR/html5/
Validering av HTML kod
• http://validator.w3.org
• Korrekt skriven HTML kod gör att webbläsaren inte behöver gissa hur den skall tolka koden
• Detta leder till att din webbplats har större chans att se ut som du tänkt dig i alla webbläsare
• I laborationsserien skall koden valideras som HTML5
• Om du har fel, rätta ett i taget tills du får ”grönt”
CSS
https://developer.mozilla.org/en-US/docs/Web/CSS http://www.w3schools.com/css/default.asp
CSS (Cascading Style Sheets)
⁃ CSS specifies
1.visual style 2.layout
⁃ HTML elements inherit CSS properties from their ancestors
e.g. the value of the font-family property for the body element is inherited by the p element.
Aspects of style
⁃ colors and borders, e.g.
background color/image borders around elements
⁃ typography, e.g.
font, font size line height
⁃ size of elements
Aspects of layout
⁃ Interaction between elements (e.g. what happens when two elements want to use the same space)
⁃ Size of elements
⁃ Positioning of elements
The style sheet
⁃ Plain text file
⁃ A collection of style specifications
⁃ A HTML document can link to one or more stylesheets
⁃ Style specifications are evaluated in serial from the top.
⁃ Later specifications can overrule previous specifications.
declaration block
Syntax
selector
value
declaration
p { color:red; font-size:16px; }
property
Syntax
/* This is a comment */
body {
font-family: Times, Serif;
font-size: 16px;
padding: 0px 0px 0px 0px;
} h1 {
font-family: Helvetica, Sans-Serif;
font-size: 32px;
}
Some CSS length units
⁃ Reference:
https://developer.mozilla.org/en-US/docs/Web/CSS/length
⁃ px
pixels on screen
note: a CSS pixel is not the same as a screen pixel see
http://inamidst.com/stuff/notes/csspx
⁃ em
1em = inherited font-size, 2em = double inherited font-size
⁃ rem
1rem = font-size of root element
⁃ pt
point, 1pt = 1/72 inch
Some CSS length units
⁃ %
percent of inherited size
⁃ vw
1vw = 1% of width of the viewport's initial containing block (i.e. the
<html> block in most cases)
⁃ vh
1vh = 1% of height of the viewport's initial containing block (i.e. the
<html> block in most cases)
⁃ vmin
1vmin = 1% of the smallest viewport unit, either vh or vw
⁃ vmax
1vmax = 1% of the largest viewport unit, either vh or vw
HTML + CSS
⁃ Text files
⁃ CSS can be written in the same file, but we will use an external file.
⁃ Link HTML and CSS using the link tag in the header
page.html & style.css
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>A document</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<h1>The Heading</h1>
<p>The paragraph</p>
<body>
</html>
body {
font-family: Times, Serif;
font-size: 16px;
padding: 0px 0px 0px 0px;
} h1 {
font-family: Helvetica, Sans-Serif;
font-size: 32px;
}
Filepaths in HTML and CSS
⁃ Unless otherwise specified, all filepaths are relative to the current file.
⁃ / means the root of the web site, i.e. for
https://www-und.ida.liu.se/~yourliuid/index.html the root is
https://www-und.ida.liu.se/
⁃ ../ means go up one directory
Examples of properties
Some style properties HTML elements
⁃ font-size: size of font
⁃ font-family: name of font
⁃ line-height: height of linne
⁃ width: width of element
⁃ height: height of element
⁃ margin: distance to next element
⁃ padding: distance to element content
⁃ color: font color
⁃ background-color: background color of element
⁃ border: border style of element
Basic CSS
https://jsfiddle.net/bgfvdo18
A selection of
selectors
Selecting your selector
⁃ Targeting a group of elements
"select all paragraphs and list items"
⁃ Targeting adjacent siblings
"select all paragraphs that directly follow a heading"
⁃ Targeting descendants
"select any image that is inside a <article>"
⁃ Targeting children
"select all first level list items in unordered lists with the class 'toc'"
https://developer.mozilla.org/en-US/docs/Learn/CSS/Introduction_to_CSS/Selectors http://www.w3.org/TR/selectors/
Select a group of elements
/* Target all h1, h2 and h3 element */
h1, h2, h3 {
border: 2px solid #000;
}
Descendant combinator
/* Select all li element that are nested within a nav element. */
nav li {
color: #F00;
}
Child combinator
/* Target all p elements that are children of a div */
div > p {
border: 2px solid #000;
}
Adjacent sibling combinator
/* Target all p elements that are on the same level as a h1 and follow a h1 */
h1 + p {
font-weight: bold;
}
Pseudo selectors
⁃ :hover
Select elements that the mouse is hovering above e.g. a:hover
⁃ :visited
Select elements (i.e. links) that have been visited e.g. a:visited
CSS Reset
CSS Resets
⁃ Browsers come with default stylesheets.
⁃ Some default styles differ between browsers.
⁃ CSS Reset: CSS that sets the style of these properties to known values ~ common baseline style.
⁃ Eric Meyer's CSS reset from 2011
https://meyerweb.com/eric/tools/css/reset/reset.css
⁃ Normalize.css
http://nicolasgallagher.com/about-normalize-css/
⁃ Reboot, Resets, and Reasoning
https://css-tricks.com/reboot-resets-reasoning/
Classes and id:s
What is a class? When should I use it?
⁃ Elements can be assigned one or more classes
⁃ More than one element can be assigned the same class.
⁃ Use classes for recurring components of your web page.
⁃ The prefix . (dot) is used to in front of class names in CSS selectors.
⁃ HTML start tag examples:
<div class="box">, <div class="box green-bg">
⁃ CSS selector examples:
.box, div.box, div.box.green-bg, green-bg
Example of using multiple classes
.wrapper { width: 960px;
}
.green-bg {
background-color: green;
}
.yellow-bg {
background-color: yellow;
}
.blue-fg { color: blue;
}
.box {
border: 1px solid purple;
width: 100px;
height: 100px;
}
<div class="wrapper">
<div class="green-bg box">Box 1</div>
<div class="green-yellow box">Box 2</div>
<div class="box blue-fg">Box 3</div>
<!-- If multiple classes conflict, the order of their specification in the CSS file governs priority -->
<div class="green-bg yellow-bg box">Box 4</div>
</div>
Multiple classes
https://jsfiddle.net/he3x2yLw/1/
What is an id? When should I use it?
⁃ Elements can be assigned an id
⁃ An id can only be assigned to a single element in a HTML document.
⁃ Use ids for unique elements on your page that you want to target for a specific style.
⁃ The prefix # (octothorpe, hash sign, pound sign) is used in front of id:s in CSS selectors.
⁃ HTML start tag examples:
<div id="footer">, <h1 id="main-heading">
⁃ CSS selector examples:
#footer, div#footer, h1#main-heading, #main-heading
Selectors using classes and ids
.infobox {
font-family: Helvetica, Arial, Sans-Serif;
font-size: 0.9em;
background-color: #999;
color: #000;
border: 2px solid black;
}
#menu {
background-color: #000;
color: #FFF;
}
Colors and borders
Specifying color: RGB
⁃ Red, Green, Blue - Additive color model
⁃ Values from 0-255 (decimal) or 0-F or 00-FF (hex)
⁃ Black
rgb(0, 0, 0) or #000 or #000000
⁃ White
rgb(255, 255, 255) or #FFF or #FFFFFF
⁃ Purple
rgb(128, 0, 255) or #8000FF
Specifying color: named colors
⁃ CSS Level 1: black, silver, gray, white, maroon, red, purple, fuchsia, green, lime, olive, yellow, navy, blue, teal, aqua
⁃ CSS Level 2 (Revision 1): + orange
⁃ CSS Color Module Level 3: + aliceblue, antiquewhite, aquamarine, azure, beige, bisque, blanchedalmond, blueviolet, brown, burlywood, cadetblue, chartreuse, chocolate, coral, cornflowerblue, cornsilk, crimson, cyan (synonym of aqua), darkblue, darkcyan, darkgoldenrod, darkgray, darkgreen, darkgrey, darkkhaki, darkmagenta, darkolivegreen, darkorange, darkorchid, darkred, darksalmon, darkseagreen, darkslateblue, darkslategray, darkslategrey, darkturquoise, darkviolet, deeppink, deepskyblue, dimgray, dimgrey,
dodgerblue, firebrick, floralwhite, forestgreen, gainsboro, ghostwhite, gold, goldenrod, greenyellow, grey, honeydew, hotpink, indianred, indigo, ivory, khaki, lavender, lavenderblush, lawngreen, lemonchiffon, lightblue, lightcoral, lightcyan, lightgoldenrodyellow, lightgray, lightgreen, lightgrey, lightpink, lightsalmon, lightseagreen, lightskyblue, lightslategray, lightslategrey, lightsteelblue, lightyellow, limegreen, linen, magenta, (synonym of fuchsia), mediumaquamarine, mediumblue, mediumorchid, mediumpurple, mediumseagreen, mediumslateblue, mediumspringgreen, mediumturquoise, mediumvioletred, midnightblue, mintcream, mistyrose, moccasin, navajowhite, oldlace, olivedrab, orangered, orchid, palegoldenrod, palegreen, paleturquoise, palevioletred, papayawhip, peachpuff, peru, pink, plum, powderblue, rosybrown, royalblue, saddlebrown, salmon, sandybrown, seagreen, seashell, sienna, skyblue, slateblue, slategray, slategrey, snow, springgreen, steelblue, tan, thistle, tomato, turquoise, violet, wheat, whitesmoke, yellowgreen
⁃ CSS Color Module Level 4: + rebeccapurple
Color Inspiration
⁃ Adobe Color CC
https://color.adobe.com/explore/
⁃ material design palette
https://www.materialpalette.com/
⁃ paletton
http://paletton.com
background-color, color
h1 {
color: #fff;
background-color: #075488;
}
CSS Borders
⁃ Certain elements can have a border
⁃ A border has the following properties:
width style color
CSS Borders
⁃ Shorthand declaration
border: <width> <style> <color>
⁃ Specific properties
border-style, border-width, border-color
border-top, border-right, border-bottom, border-left border-top-style, border-top-color … etc
The CSS Box & Layout Model
https://developer.mozilla.org/en-US/docs/Learn/CSS/Introduction_to_CSS/Box_model http://learnlayout.com/toc.html
Layout models in CSS
⁃ Normal flow + positioning
display: block | inline | inline-block
⁃ Flexbox
display: flex
⁃ Grid layout
display: grid
⁃ Floats
float: left | right
⁃ Table layout
⁃ Multiple-column layout
What should you use/learn?
⁃ In CSS each element
exists inside a layout context
provides a layout context for the elements in contains
⁃ Even though you create a layout using flex or grid, the contents of your flex/grid will have a normal flow.
⁃ Therefore, master normal flow + positioning + floats before learning flex/grid etc.
⁃ Flexbox and grid layout can be very useful but cannot solve everything.
Normal flow
⁃ Elements can be set to be displayed in different contexts.
⁃ Contexts for normal flow:
block inline
inline-block
⁃ The inline context is “in line with text” with the generic inline element being <span>
⁃ The block context is “outside text” with the generic block element being <div>. A block element occupies an area from left to right.
⁃ The inline-block context is a block in line with text.
The display property
/* The formatting context is set using the display property */
.infobox {
display: block;
}
.question {
display: inline;
}
The CSS box model (block context)
Specifying an elements padding
⁃ padding: <north>, <east>, <south>, <west>
⁃ padding-top: <value>;
⁃ padding-right: <value>;
⁃ padding-bottom: <value>;
⁃ padding-left: <value>;
Specifying an elements margin
⁃ margin: <north>, <east>, <south>, <west>
⁃ margin-top: <value>;
⁃ margin-right: <value>;
⁃ margin-bottom: <value>;
⁃ margin-left: <value>;
Positioning
https://developer.mozilla.org/en-US/docs/Learn/CSS/CSS_layout/Positioning http://learnlayout.com/position.html
Four Five positioning models
⁃ position: static
⁃ position: relative
⁃ position: fixed
⁃ position: absolute
⁃ position: sticky
⁃ z-index: <number>
