- Target Audience (mobile vs. desktop)
- Web site technologies
- Structure & content: HTML / HTML5
- Styling: CSS
- Interactivity & scripting languages: JavaScript
- Behind the Scenes
- Client vs Server
- HTTP and web requests
- IP address & server location
- Accessibility
- Content Management Systems: Wordpress
Real-time Tracking and Monitoring with Cargo Cloud Solutions.pptx
Basics of Web Technologies
1. St. Pölten University of Applied SciencesSt. Pölten University of Applied Sciences
Platzhalter für möglichen
Bildeinsatz
Basics of Web Technologies
Andreas Jakl
WS 2017
Digital Healthcare
FH St. Pölten
Platzhalter für möglichen
Bildeinsatz
2. Andreas Jakl
▪ Focus areas
▪ AR / VR, mobile apps, sensors, interaction
technology, software architecture, open source
developer (NFC, Bluetooth Beacons)
▪ Microsoft MVP (Most Valuable Professional)
▪ mobility.builders community: Mobile Developer
After-Work Events
▪ Previous Experience
▪ Tieto, Start-up (Mopius), Nokia (Finland),
Siemens Mobile (Munich), FH Hagenberg
(Mobile Computing)
Basics of Web Technologies | 2017 | Andreas Jakl | FH St. Pölten
https://www.andreasjakl.com/
@andijakl
andreas.jakl@fhstp.ac.at
3. Contents
▪ Target Audience (mobile vs. desktop)
▪ Web site technologies
▪ Structure & content: HTML / HTML5
▪ Styling: CSS
▪ Interactivity & scripting languages: JavaScript
▪ Behind the Scenes
▪ Client vs Server
▪ HTTP and web requests
▪ IP address & server location
▪ Accessibility
▪ Content Management Systems: Wordpress
Basics of Web Technologies | 2017 | Andreas Jakl | FH St. Pölten
4. TARGET AUDIENCE?
Who is your
Basics of Web Technologies | 2017 | Andreas Jakl | FH St. Pölten
5. Basics of Web Technologies | 2017 | Andreas Jakl | FH St. Pölten
Source: http://gs.statcounter.com/platform-market-share/desktop-mobile-tablet
Austria
6. Basics of Web Technologies | 2017 | Andreas Jakl | FH St. Pölten
Source: http://gs.statcounter.com/platform-market-share/desktop-mobile-tablet
Worldwide
7. Basics of Web Technologies | 2017 | Andreas Jakl | FH St. Pölten Source: IDC, http://www.idc.com/promo/smartphone-market-share/os
9. What is the Web?
Basics of Web Technologies | 2017 | Andreas Jakl | FH St. Pölten
10. What is the Web?
Basics of Web Technologies | 2017 | Andreas Jakl | FH St. Pölten
11. What is the Web?
Basics of Web Technologies | 2017 | Andreas Jakl | FH St. Pölten
12. HTML
▪ Language
▪ Defines structure of web sites
▪ HTML5: Set of technologies
▪ Including styling & more
Basics of Web Technologies | 2017 | Andreas Jakl | FH St. Pölten
W3C’s HTML5 logo
14. Exercise
▪ Create your first web site
▪ Notepad
▪ Recommended: Notepad++
▪ Create file: helloworld.html
▪ Open with browser
Basics of Web Technologies | 2017 | Andreas Jakl | FH St. Pölten
<!DOCTYPE html>
<html lang="en-US">
<body>
<h1>Hello world!</h1>
</body>
</html>
15. Developing for Web
▪ Text editors
▪ Notepad++
▪ IDEs
▪ Visual Studio Code
▪ Free & open source
▪ Windows, Mac, Linux
▪ Web app itself!
▪ Atom
▪ Webstorm
▪ …
Basics of Web Technologies | 2017 | Andreas Jakl | FH St. Pölten
16. HTML 5 Doctype
▪ First line of every HTML file
▪ Informs browser about HTML version used
Basics of Web Technologies | 2017 | Andreas Jakl | FH St. Pölten
<!DOCTYPE html>
17. HTML Tags
▪ Describe structure of document
▪ <tagname>content</tagname>
▪ Normally in pairs
▪ Closing tag = same name as opening, but with forward slash “/”
▪ Tag overview
▪ https://www.w3schools.com/tags/
▪ Page structure: <html>, <head>, <body>
▪ Content structure: <p>, <h1>…<h6>, <a>, <img>, <div>, <span>
▪ Content format: <br>, <strong>, <em>
Basics of Web Technologies | 2017 | Andreas Jakl | FH St. Pölten
18. Root Element
▪ Should specify display language
▪ Especially for screen readers
Basics of Web Technologies | 2017 | Andreas Jakl | FH St. Pölten
<html lang="en">
19. <head> element
▪ Contains metadata about the page
▪ Charset
▪ Page title
▪ (Links to) required files (style, interactivity, etc.)
Basics of Web Technologies | 2017 | Andreas Jakl | FH St. Pölten
20. <body> element
▪ Main page content
▪ Text, images, …
Basics of Web Technologies | 2017 | Andreas Jakl | FH St. Pölten
21. Error Handling
Basics of Web Technologies | 2017 | Andreas Jakl | FH St. Pölten
<html>
</head>
<body>
Hello world!
HTML document with
errors
By default no errors
shown
Nearly all HTML pages have 1+ error.
Thankfully, browsers are very forgiving.
22. Special Characters
Basics of Web Technologies | 2017 | Andreas Jakl | FH St. Pölten
“<“ opens a tag.
What if I need
“<“ in text?
23. Special Characters
Basics of Web Technologies | 2017 | Andreas Jakl | FH St. Pölten
Char Write as
“ "
& &
< <
> >
ä ä
ö ö
ü ü
ß ß
24. Exercise
▪ Create a simple page about yourself
▪ Headline with your name <h1>text</h1>
▪ Your photo <img src=“you.jpg”>
▪ A paragraph with your short bio <p>text</p>
▪ Link to your Linkedin / Xing / Facebook profile <a href=“http://...”>text</a>
Basics of Web Technologies | 2017 | Andreas Jakl | FH St. Pölten
25. Syntax Style Recommendations
▪ Lowercase for elements and attributes
▪ Close elements that contain content
▪ <p>Text</p>
▪ Always use quotes
▪ Consistency – sometimes they are required (declaring multiple classes,
separated by spaces)
▪ Omit trailing slash from elements with no content
▪ <br> instead of <br/>
Basics of Web Technologies | 2017 | Andreas Jakl | FH St. Pölten
26. STYLING
Your first website looks a bit boring, right?
Basics of Web Technologies | 2017 | Andreas Jakl | FH St. Pölten
27. Styling
▪ Cascading Style Sheets (CSS)
▪ Style language
▪ Describes how HTML markup is presented
Basics of Web Technologies | 2017 | Andreas Jakl | FH St. Pölten
Structure / Content Style Visual Output+ =
28. .css files
▪ Definition: directly in .html file
or in external .css file (recommended)
Basics of Web Technologies | 2017 | Andreas Jakl | FH St. Pölten
style.css
index.html
contact.html
29. Styling Structure (Element Selector)
Basics of Web Technologies | 2017 | Andreas Jakl | FH St. Pölten
<!DOCTYPE html>
<html lang="en-US">
<head>
<link href="style.css" rel="stylesheet" type="text/css">
</head>
<body>
<h1>Hello world!</h1>
<p>Welcome to my website.</p>
<p>Have fun!</p>
</body>
</html>
h1 {
color: red;
}
p {
color: blue;
}
style.html
style.css
30. More flexible: Class Selector
Basics of Web Technologies | 2017 | Andreas Jakl | FH St. Pölten
<!DOCTYPE html>
<html lang="en-US">
<head>
<link href="style-class.css"
rel="stylesheet" type="text/css">
</head>
<body>
<h1 class="highlight">Hello world!</h1>
<p>Welcome to my website.</p>
<h2 class="notimportant">Instructions</h2>
<p class="notimportant">Have fun!</p>
</body>
</html>
h1 {
color: red;
}
p {
color: blue;
}
.highlight {
background: yellow;
font-style: italic;
}
.notimportant {
color: gray;
font-size: 10px;
}
style-class.css
style-class.html
31. Overwritten Styles? Inspect!
Basics of Web Technologies | 2017 | Andreas Jakl | FH St. Pölten
Activate Developer Tools (Chrome, Firefox, Edge)
32. Overwritten Styles? Inspect!
Basics of Web Technologies | 2017 | Andreas Jakl | FH St. Pölten
1. Activate Developer Tools (Chrome, Firefox, Edge)
2. Activate element selection mode
3. Select element to inspect
4. Check applied style
Generic blue color of p overwritten
by more specific .notimportant class
33. Overwritten Styles? Inspect!
Basics of Web Technologies | 2017 | Andreas Jakl | FH St. Pölten
1. Activate Developer Tools (Chrome, Firefox, Edge)
2. Activate element selection mode
3. Select element to inspect
4. Check applied style
Generic blue color of p overwritten
by more specific .notimportant class
Live editing of styles
34. Multi-Class
Basics of Web Technologies | 2017 | Andreas Jakl | FH St. Pölten
<!DOCTYPE html>
<html lang="en-US">
<head>
<link href="style-class.css" rel="stylesheet"
type="text/css">
</head>
<body>
<h1 class="highlight">Hello world!</h1>
<p>Welcome to my website.</p>
<h2 class="notimportant">Instructions</h2>
<p class="notimportant highlight">Have fun!</p>
</body>
</html>
35. Unique: ID Selector
Basics of Web Technologies | 2017 | Andreas Jakl | FH St. Pölten
<!DOCTYPE html>
<html lang="en-US">
<head>
<link href="style-id.css"
rel="stylesheet" type="text/css">
</head>
<body>
<h1>Hello world!</h1>
<p>Welcome to my website.</p>
<h2>Instructions</h2>
<p id="instructionstext">Have fun!</p>
</body>
</html>
h1 {
color: red;
}
p {
color: blue;
}
#instructionstext {
color: green;
font-size: 40px;
}
style-id.cssstyle-id.html
36. Unique: ID Selector
Basics of Web Technologies | 2017 | Andreas Jakl | FH St. Pölten
<!DOCTYPE html>
<html lang="en-US">
<head>
<link href="style-id.css"
rel="stylesheet" type="text/css">
</head>
<body>
<h1>Hello world!</h1>
<p>Welcome to my website.</p>
<h2>Instructions</h2>
<p id="instructionstext">Have fun!</p>
</body>
</html>
h1 {
color: red;
}
p {
color: blue;
}
#instructionstext {
color: green;
font-size: 40px;
}
style-id.cssstyle-id.html
37. Inline Style
Basics of Web Technologies | 2017 | Andreas Jakl | FH St. Pölten
<!DOCTYPE html>
<html lang="en-US">
<body>
<h1>Hello world!</h1>
<p>Welcome to my website.</p>
<p style="color: blue;">Have fun!</p>
</body>
</html>
Mostly used by
automatically generated
code.
style-inline.html
39. <div>: Large areas
▪ No default meaning and style
▪ Free-form container / section
▪ Group elements to format them with CSS
▪ Placeable everywhere for layouting web page
Basics of Web Technologies | 2017 | Andreas Jakl | FH St. Pölten
40. <div> Example
Basics of Web Technologies | 2017 | Andreas Jakl | FH St. Pölten
<!DOCTYPE html>
<html lang="en-US">
<head>
<link href="style-div.css"
rel="stylesheet" type="text/css">
</head>
<body>
<h1>Hello world!</h1>
<p>Welcome to my website.</p>
<div style="background-color:yellow; ">
<h1>Footer</h1>
<p>Have fun!</p>
</div>
</body>
</html>
style-div.html
41. <span>: Formatting words
Basics of Web Technologies | 2017 | Andreas Jakl | FH St. Pölten
<!DOCTYPE html>
<html lang="en-US">
<body>
<h1>Hello world!</h1>
<p>Welcome <span>to</span> my <span
style="background-color:
lightskyblue;">website</span>.</p>
</body>
</html>
style-span.html
43. JavaScript
Basics of Web Technologies | 2017 | Andreas Jakl | FH St. Pölten
Structure / Content Style Interactivity / Logic
CSS JavaScript
44. Exercise: Add Interactivity
Basics of Web Technologies | 2017 | Andreas Jakl | FH St. Pölten
<!DOCTYPE html>
<html lang="en-US">
<head>
<meta charset="UTF-8">
<link href="style-id.css" rel="stylesheet" type="text/css">
<script src="script.js"></script>
</head>
<body>
<h1>Hello world!</h1>
<p>Welcome to my website.</p>
<h2>Instructions</h2>
<p id="instructionstext">Have fun!</p>
<button onclick="onButtonClick()">Click me!</button>
</body>
</html>
new
new
Good to have
Return to style-id.html example
script.html
45. Exercise: Add Interactivity
Basics of Web Technologies | 2017 | Andreas Jakl | FH St. Pölten
<!DOCTYPE html>
<html lang="en-US">
<head>
<meta charset="UTF-8">
<link href="style-id.css" rel="stylesheet" type="text/css">
<script src="script.js"></script>
</head>
<body>
<h1>Hello world!</h1>
<p>Welcome to my website.</p>
<h2>Instructions</h2>
<p id="instructionstext">Have fun!</p>
<button onclick="onButtonClick()">Click me!</button>
</body>
</html>
new
new
Reference file containing
JavaScript code
script.html
46. Exercise: Add Interactivity
Basics of Web Technologies | 2017 | Andreas Jakl | FH St. Pölten
<!DOCTYPE html>
<html lang="en-US">
<head>
<meta charset="UTF-8">
<link href="style-id.css" rel="stylesheet" type="text/css">
<script src="script.js"></script>
</head>
<body>
<h1>Hello world!</h1>
<p>Welcome to my website.</p>
<h2>Instructions</h2>
<p id="instructionstext">Have fun!</p>
<button onclick="onButtonClick()">Click me!</button>
</body>
</html>
new
new
Button that executes function
when clicked.
script.html
47. Exercise: Add Interactivity
Basics of Web Technologies | 2017 | Andreas Jakl | FH St. Pölten
<!DOCTYPE html>
<html lang="en-US">
<head>
<meta charset="UTF-8">
<link href="style-id.css" rel="stylesheet" type="text/css">
<script src="script.js"></script>
</head>
<body>
<h1>Hello world!</h1>
<p>Welcome to my website.</p>
<h2>Instructions</h2>
<p id="instructionstext">Have fun!</p>
<button onclick="onButtonClick()">Click me!</button>
</body>
</html>
new
new
function onButtonClick() {
document.getElementById('instructionstext').innerHTML = "Yeah, baby";
}
script.js
script.html
48. Exercise: Add Interactivity
Basics of Web Technologies | 2017 | Andreas Jakl | FH St. Pölten
<!DOCTYPE html>
<html lang="en-US">
<head>
<meta charset="UTF-8">
<link href="style-id.css" rel="stylesheet" type="text/css">
<script src="script.js"></script>
</head>
<body>
<h1>Hello world!</h1>
<p>Welcome to my website.</p>
<h2>Instructions</h2>
<p id="instructionstext">Have fun!</p>
<button onclick="onButtonClick()">Click me!</button>
</body>
</html>
new
new
function onButtonClick() {
document.getElementById('instructionstext').innerHTML = "Yeah, baby";
}
script.js
script.html
49. Exercise: Add Interactivity
Basics of Web Technologies | 2017 | Andreas Jakl | FH St. Pölten
<!DOCTYPE html>
<html lang="en-US">
<head>
<meta charset="UTF-8">
<link href="style-id.css" rel="stylesheet" type="text/css">
<script src="script.js"></script>
</head>
<body>
<h1>Hello world!</h1>
<p>Welcome to my website.</p>
<h2>Instructions</h2>
<p id="instructionstext">Have fun!</p>
<button onclick="onButtonClick()">Click me!</button>
</body>
</html>
new
new
function onButtonClick() {
document.getElementById('instructionstext').innerHTML = "Yeah, baby";
}
script.js
script.html
50. Exercise: Add Interactivity
Basics of Web Technologies | 2017 | Andreas Jakl | FH St. Pölten
<!DOCTYPE html>
<html lang="en-US">
<head>
<meta charset="UTF-8">
<link href="style-id.css" rel="stylesheet" type="text/css">
<script src="script.js"></script>
</head>
<body>
<h1>Hello world!</h1>
<p>Welcome to my website.</p>
<h2>Instructions</h2>
<p id="instructionstext">Have fun!</p>
<button onclick="onButtonClick()">Click me!</button>
</body>
</html>
new
new
function onButtonClick() {
document.getElementById('instructionstext').innerHTML = "Yeah, baby";
}
script.js
51. Exercise: Add Interactivity
Basics of Web Technologies | 2017 | Andreas Jakl | FH St. Pölten
<!DOCTYPE html>
<html lang="en-US">
<head>
<meta charset="UTF-8">
<link href="style-id.css" rel="stylesheet" type="text/css">
<script src="script.js"></script>
</head>
<body>
<h1>Hello world!</h1>
<p>Welcome to my website.</p>
<h2>Instructions</h2>
<p id="instructionstext">Have fun!</p>
<button onclick="onButtonClick()">Click me!</button>
</body>
</html>
new
new
function onButtonClick() {
document.getElementById('instructionstext').innerHTML = "Yeah, baby";
console.log("Secret message");
}
script.js
new
52. Exercise: Add Interactivity
Basics of Web Technologies | 2017 | Andreas Jakl | FH St. Pölten
<!DOCTYPE html>
<html lang="en-US">
<head>
<meta charset="UTF-8">
<link href="style-id.css" rel="stylesheet" type="text/css">
<script src="script.js"></script>
</head>
<body>
<h1>Hello world!</h1>
<p>Welcome to my website.</p>
<h2>Instructions</h2>
<p id="instructionstext">Have fun!</p>
<button onclick="onButtonClick()">Click me!</button>
</body>
</html>
new
new
function onButtonClick() {
document.getElementById('instructionstext').innerHTML = "Yeah, baby";
console.log("Secret message");
}
script.js
new
53. Exercise: Add Interactivity
Basics of Web Technologies | 2017 | Andreas Jakl | FH St. Pölten
<!DOCTYPE html>
<html lang="en-US">
<head>
<meta charset="UTF-8">
<link href="style-id.css" rel="stylesheet" type="text/css">
<script src="script.js"></script>
</head>
<body>
<h1>Hello world!</h1>
<p>Welcome to my website.</p>
<h2>Instructions</h2>
<p id="instructionstext">Have fun!</p>
<button onclick="onButtonClick()">Click me!</button>
</body>
</html>
new
new
function onButtonClick() {
document.getElementById('instructionstext').innerHTML = "Yeah, baby";
console.log("Secret message");
alert("Welcome back!");
}
script.js
new
54. Note
Basics of Web Technologies | 2017 | Andreas Jakl | FH St. Pölten
JavaScript
≠
Java is a Trademark and programming language by Oracle.
It has nothing to do with JavaScript (which is an implementation of ECMAScript)
55. Basics of Web Technologies | 2017 | Andreas Jakl | FH St. Pölten
Most popular programming languages 2017
https://insights.stackoverflow.com/survey/2017#technology
56. Exercise: Examine a Website
▪ Explore a website with the browser debug tools
▪ See what kind of JavaScript is included
Basics of Web Technologies | 2017 | Andreas Jakl | FH St. Pölten
57. BEHIND THE SCENES
Track the Internet – Protocols & More
Basics of Web Technologies | 2017 | Andreas Jakl | FH St. Pölten
58. Server-Side?
Basics of Web Technologies | 2017 | Andreas Jakl | FH St. Pölten
client server
request
response
59. Server-Side?
Basics of Web Technologies | 2017 | Andreas Jakl | FH St. Pölten
client server
request
response
Technology:
Node.js, PHP, ASP.net, Java, …
Technology:
Browser: HTML, CSS, JavaScript
60. Look Behind the Scenes
▪ Free tools to view web traffic
▪ Fiddler: https://www.telerik.com/download/fiddler-wizard
▪ WireShark: https://www.wireshark.org/
▪ Analyze what’s sent and received
▪ What are apps doing behind your back?
▪ Can partly also peek into HTTPS traffic
▪ Identify communication issues in your apps
Basics of Web Technologies | 2017 | Andreas Jakl | FH St. Pölten
61. Basics of Web Technologies | 2017 | Andreas Jakl | FH St. Pölten
Loading
https://www.andreasjakl.com/ in
the browser
62. Basics of Web Technologies | 2017 | Andreas Jakl | FH St. Pölten
Request from client to server
Includes info about browser,
preferred language, etc.
63. Basics of Web Technologies | 2017 | Andreas Jakl | FH St. Pölten
GET request using the HTTP/1.1
protocol
64. Basics of Web Technologies | 2017 | Andreas Jakl | FH St. Pölten
Server response using HTTP/1.1:
200 OK
65. Basics of Web Technologies | 2017 | Andreas Jakl | FH St. Pölten
Server sets a cookie, sends some
info about upcoming content
66. Basics of Web Technologies | 2017 | Andreas Jakl | FH St. Pölten
And finally: the HTML content of
the website!
67. Basics of Web Technologies | 2017 | Andreas Jakl | FH St. Pölten
Afterwards: separate requests to
load images, JavaScript, styles,
etc.
68. Basics of Web Technologies | 2017 | Andreas Jakl | FH St. Pölten
On the server computer, a webserver is handling
all your requests.
Most common: Apache, Microsoft IIS and nginx.
69. Basics of Web Technologies | 2017 | Andreas Jakl | FH St. Pölten
1. Find out IP address of website
2. Look up approx. server location (e.g., iplocation.com)
Where is the server
located?
Usually, you don’t care.
But close by is faster than
over the pond.
70. Exercise
▪ Analyze web requests with Fiddler / WireShark
▪ Successfully load your favorite website
▪ Which web server is running it?
▪ Where is the server located?
▪ What happens if you open a page on the server that doesn’t exist?
▪ What other traffic can you see on your PC / Mac?
Basics of Web Technologies | 2017 | Andreas Jakl | FH St. Pölten
71. ACCESSIBILITY
Everyone should be able to access your website & app!
Basics of Web Technologies | 2017 | Andreas Jakl | FH St. Pölten
72. Accessibility Examples
▪ Color vision deficiency (red/green, yellow/blue)
▪ Visual impairments / low vision
▪ High contrast mode
▪ Magnification
▪ Blind
▪ Screen reader, Braille
▪ Motor / dexterity impairments
▪ Keyboard, voice control, eye tracking
▪ Hearing impairment
▪ Video captions & transcripts
▪ Cognitive impairments
▪ Diverse, but e.g., minimalist design
Basics of Web Technologies | 2017 | Andreas Jakl | FH St. Pölten
5% of population, mainly men
Screen reading in sunlight.
Also comes with age.
Broken wrist? Trackpad broken?
Holding baby in the arm?
Also comes with age!
Watch video in office (Facebook)
Important for
many, many
people!
73. Windows Narrator
▪ Activate Windows 10 Narrator
▪ https://support.microsoft.com/en-us/help/22798
▪ Other popular software: JAWS, Mac: Voice Over (built-in)
▪ Main keys
▪ Caps lock + left/right arrow: move between items
▪ Caps lock + up/down arrow: change Narrator view (items, characters, words, links, headings, …)
▪ Caps lock + Enter: activate selected item
▪ Scan mode: Activate with Caps lock + Space bar
▪ H: Move to next heading. Then press Down Arrow to read contents
▪ D: Next landmark
▪ K: Next Link
Basics of Web Technologies | 2017 | Andreas Jakl | FH St. Pölten
Screen reader examples
https://www.youtube.com/watch?v=QW_dUs9D1oQ
https://www.youtube.com/watch?v=Oo4HoeL6yIE
74. Narrator
Basics of Web Technologies | 2017 | Andreas Jakl | FH St. Pölten
Heading Level 3 Link:
More realistic HoloLens
Spectator View Photos
75. Exercise
▪ Try reading a website with Narrator
▪ Recommended: on Windows, use Edge for better Narrator integration
▪ Check free Web Accessibility course
▪ https://www.udacity.com/course/web-accessibility--ud891
Basics of Web Technologies | 2017 | Andreas Jakl | FH St. Pölten
76. Views on HTML Code
Basics of Web Technologies | 2017 | Andreas Jakl | FH St. Pölten
Image by Google, CC BY 3.0
https://developers.google.com/web/fundamentals/accessibility/semantics-builtin/
77. Exercise: Focus
▪ Navigate around website
▪ http://udacity.github.io/ud891/lesso
n2-focus/01-basic-form/
▪ No mouse control: you can’t cheat
☺
▪ Completed form: simply clears
(no success message)
▪ Next, try using a simulated screen
reader
▪ http://udacity.github.io/ud891/lesso
n3-semantics-built-in/02-
chromevox-lite/
Basics of Web Technologies | 2017 | Andreas Jakl | FH St. Pölten
Specify ticket parameters:
- Round trip
- to Melbourne
- leaving on 12 October 2017 (10/12/2017)
- returning on 23 October 2017 (10/23/2017)
- window seat
- do not want to receive promotional offers
79. Web Content Accessibility
▪ Guidelines and best practices
▪ Four principles
▪ Perceivable
▪ Operable
▪ Understandable
▪ Robust
▪ https://www.w3.org/WAI/intro/wcag
▪ Checklists:
▪ http://webaim.org/standards/wcag/checklist
▪ https://www.w3.org/WAI/WCAG20/quickref/
Basics of Web Technologies | 2017 | Andreas Jakl | FH St. Pölten
80. Legal Requirements
▪ EU
▪ Level AA of WCAG 2.0: Compulsory for public sector websites from
▪ 09/2019 (new websites)
▪ 09/2020 (old websites)
▪ 06/2021 (mobile apps)
▪ http://eur-lex.europa.eu/legal-content/EN/TXT/?uri=CELEX%3A32016L2102#d1e1150-1-1
▪ Austria
▪ 1.1.2016, “Bundes-Behindertengleichstellungsgesetz”
▪ Accessibility in IKT since 1.1.2006
▪ https://www.digitales.oesterreich.gv.at/barrierefreiheit
Basics of Web Technologies | 2017 | Andreas Jakl | FH St. Pölten
81. Labels
Basics of Web Technologies | 2017 | Andreas Jakl | FH St. Pölten
Visible label Text alternative
(invisible)
Checked, “Subscribe
to newsletter”,
Checkbox.
Image, “Surface Dial”
82. Labels
Basics of Web Technologies | 2017 | Andreas Jakl | FH St. Pölten
Checked, “Subscribe
to newsletter”,
Checkbox.
Image, “Surface Dial”
<form>
<input type="checkbox" checked name="subscribe"
id="formsubscribe">
<label for="formsubscribe">Subscribe to
newsletter</label>
<button>Submit</button>
</form>
<img
src="https://www.andreasjakl.com/[...]/SurfaceDial.jpg"
alt="Surface Dial" width="20%" height="20%">
83. Header Structure
▪ Headers are important structure &
navigation info
▪ <h1>…<h6> ordered by importance
▪ Also important for search engines
▪ Check website structure, e.g.:
▪ https://en.wikipedia.org/wiki/Accessi
bility
▪ Analyze headings, e.g., with
http://www.seoreviewtools.com/html
-headings-checker/
Basics of Web Technologies | 2017 | Andreas Jakl | FH St. Pölten
H1: Accessibility
H2: Contents
H2: Legislation[edit]
H2: Assistive technology and adaptive technology[edit]
H2: Employment[edit]
H2: Planning for accessibility[edit]
H2: Transportation[edit]
H2: Housing[edit]
H2: Disability, information technology (IT) and telecommunications[edit]
H2: Education and accessibility for students[edit]
H2: See also[edit]
H2: References[edit]
H2: External links[edit]
H2: Navigation menu
H3: National legislation[edit]
H3: Disability Management (DM)[edit]
H3: Meeting and conference access[edit]
H3: Accessibility instruments[edit]
H3: Potentials of accessibility in planning practice[edit]
H3: Adapted automobiles for persons with disabilities[edit]
84. Link Accessibility
▪ Skimming through page for links with screen reader
Basics of Web Technologies | 2017 | Andreas Jakl | FH St. Pölten
Anti-pattern:
“continue reading”
Better:
give context
Or: only make
title a link
85. Landmarks
▪ New in HTML5
▪ No default style, but easy to add styling with css for specific type
Basics of Web Technologies | 2017 | Andreas Jakl | FH St. Pölten Image from Udacity Web Accessibility course
86. ARIA
▪ Accessible Rich Internet Applications (ARIA)
▪ Additional attributes for HTML elements
▪ Allows finer control
▪ Only modifies accessibility. Not appearance, behavior, …
▪ Custom controls
▪ Live updates (alerts, …)
▪ Add additional help or description text (“Close” for “X” button)
▪ Examples: http://heydonworks.com/practical_aria_examples/
Basics of Web Technologies | 2017 | Andreas Jakl | FH St. Pölten www.w3.org/WAI/intro/aria
<ul class="menubar" role="menubar" aria-label="Navigation Bar" onkeydown="OnMenubarKeydown(event);"
onclick="OnMenubarClick(event);">
<li class="first"><a role="menuitem" href="File.htm">File</a>
<ul role="menu" aria-hidden="true" onkeydown="OnMenuKeydown(event);" onclick="OnMenuClick(event);">
<li><a role="menuitem" onkeydown="subMenuKeydown(event);" href="Open.htm">Open</a></li>
<li><a role="menuitem" onkeydown="subMenuKeydown(event);" href="Save.htm">Save</a></li>
87. Exercise: Analyze your Website
Basics of Web Technologies | 2017 | Andreas Jakl | FH St. Pölten
http://wave.webaim.org/
88. Color Values
Basics of Web Technologies | 2017 | Andreas Jakl | FH St. Pölten
https://www.w3schools.com/colors/colors_converter.asp
89. Color Blindness
Basics of Web Technologies | 2017 | Andreas Jakl | FH St. Pölten
What do these images look like for someone with red/green color deficit? (Deuteranope )
90. Color Blindness
Basics of Web Technologies | 2017 | Andreas Jakl | FH St. Pölten
What do these images look like for someone with red/green color deficit? (Deuteranope )
Simulation: http://www.vischeck.com/vischeck/vischeckImage.php
91. Color Contrast: Is it OK?
Basics of Web Technologies | 2017 | Andreas Jakl | FH St. Pölten
Large text sample
Regular text sample
Large text sample
Regular text sample
Text: rgb(48, 250, 123)
BG: rgb(170, 187, 204)
Text: rgb(255, 51, 153)
BG: rgb(170, 187, 204)
Specification: https://www.w3.org/TR/2008/REC-WCAG20-20081211/#visual-audio-contrast-contrast
92. Colors: Is the contrast OK?
Basics of Web Technologies | 2017 | Andreas Jakl | FH St. Pölten
Large text sample
Regular text sample
Large text sample
Regular text sample
Contrast ratio: 1.41:1
Fail: The luminosity contrast ratio is
insufficient for the chosen colors.
http://juicystudio.com/services/luminositycontrastratio.php#specify
Contrast ratio: 3.30:1
Passed at Level AA for large text
only: If the text is large text (at least
18 point or 14 point bold), the
luminosity contrast ratio is sufficient
for the chosen colors
93. Exercise: Mobile Accessibility
▪ Try navigating a web site with the screen reader!
▪ Android: TalkBack
▪ iOS: VoiceOver
▪ Windows: Narrator
Basics of Web Technologies | 2017 | Andreas Jakl | FH St. Pölten
94. Final Exercise 1
▪ Build a simple website
▪ Describe your hobbies or anything else
▪ At least 2 HTML pages that link to each other
▪ At least 2 different header levels (<h1>, <h2>)
▪ 1 common style sheet (CSS) used by both pages
▪ CSS defines at least 2 styles
▪ Include at least 2 images
▪ Keep accessibility in mind and test with screen reader! (color combinations, page
structure)
Basics of Web Technologies | 2017 | Andreas Jakl | FH St. Pölten
96. Creating Content
▪ Manually writing complete web sites with HTML: too time-consuming
▪ Content Management Systems (CMS)
▪ Write pages, articles, blog, static content
▪ Themes
▪ Plug-Ins (statistics, visual effects, security, …)
▪ Multi-user access
Basics of Web Technologies | 2017 | Andreas Jakl | FH St. Pölten
97. ▪ CMS
▪ Wordpress.org: Open Source for self-hosting
▪ Wordpress.com: Includes hosting, commercial
▪ Free & commercial themes and plug-ins
▪ Stats
▪ 28% of the web is using WordPress (https://wordpress.org/)
▪ Austria: 38% (http://www.cmscrawler.com/country/AT#)
Basics of Web Technologies | 2017 | Andreas Jakl | FH St. Pölten
98. WordPress Installation
1. Check requirements:
▪ https://wordpress.org/about/requirements/
2. Download latest version
▪ http://wordpress.org/download/
3. Extract to local folder on your PC
▪ E.g., C:tempwordpress
Basics of Web Technologies | 2017 | Andreas Jakl | FH St. Pölten
99. Prepare Webspace
▪ Login and delete index.html
Basics of Web Technologies | 2017 | Andreas Jakl | FH St. Pölten
101. Find out Database Name
Basics of Web Technologies | 2017 | Andreas Jakl | FH St. Pölten
!
102. Configuration
Basics of Web Technologies | 2017 | Andreas Jakl | FH St. Pölten
▪ Database name: from
phpmyadmin
▪ Username: from sign-up email
▪ Password: from sign-up email
▪ Database Host: see sign-up
email from host
▪ Table Prefix: wp_ is OK
103. Finalize Installation
▪ Configure your new website!
▪ Choose safe password
▪ Hackers love to hack WordPress
(it’s the most common web system
after all!)
Basics of Web Technologies | 2017 | Andreas Jakl | FH St. Pölten
LOGIN!
104. Exercise
▪ Create your own website
▪ Blog with 2 posts
▪ Add images
▪ Contact page
Basics of Web Technologies | 2017 | Andreas Jakl | FH St. Pölten
105. Imprint
▪ Legally required
▪ https://www.help.gv.at/Portal.Node/hlpd/public/content/172/Seite.1720902.h
tml#Impressum
▪ Differentiates “large” and “small” websites
▪ Small: most personal web sites
▪ Name / company of owner
▪ Business purpose
▪ Place of residence
Basics of Web Technologies | 2017 | Andreas Jakl | FH St. Pölten
106. Exercise
▪ Add imprint to your contact page
▪ Change the theme
▪ Experiment with Plug-Ins. Some recommendations:
▪ Wordfence Security
▪ Yoast SEO
▪ Responsive Lightbox
▪ Jetpack by WordPress.com
▪ Disqus Comment System
▪ Cookie Notice
Basics of Web Technologies | 2017 | Andreas Jakl | FH St. Pölten
107. Final Exercise 2
▪ Setup your own WordPress website
▪ 1 Post (News, blog, …)
▪ 1 Static page with info about you (short bio, photo)
▪ 1 Contact page, including imprint info
▪ Good-looking design
▪ Install & use at least 3 plug-ins
Basics of Web Technologies | 2017 | Andreas Jakl | FH St. Pölten