Basics of Web Technologies

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

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

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

TARGET AUDIENCE?
Who is your

Source: http://gs.statcounter.com/platform-market-share/desktop-mobile-tablet
Austria

Source: http://gs.statcounter.com/platform-market-share/desktop-mobile-tablet
Worldwide

Basics of Web Technologies | 2017 | Andreas Jakl | FH St. Pölten Source: IDC, http://www.idc.com/promo/smartphone-market-share/os

WEB TECHNOLOGIES
What drives the Internet?

What is the Web?

HTML
▪ Language
▪ Defines structure of web sites
▪ HTML5: Set of technologies
▪ Including styling & more
W3C’s HTML5 logo

YOUR OWN WEBSITE
Creating

Exercise
▪ Create your first web site
▪ Notepad
▪ Recommended: Notepad++
▪ Create file: helloworld.html
▪ Open with browser
<!DOCTYPE html>
<html lang="en-US">
<body>
<h1>Hello world!</h1>
</body>
</html>

Developing for Web
▪ Text editors
▪ Notepad++
▪ IDEs
▪ Visual Studio Code
▪ Free & open source
▪ Windows, Mac, Linux
▪ Web app itself!
▪ Atom
▪ Webstorm
▪ …

HTML 5 Doctype
▪ First line of every HTML file
▪ Informs browser about HTML version used
<!DOCTYPE html>

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>

Root Element
▪ Should specify display language
▪ Especially for screen readers
<html lang="en">

<head> element
▪ Contains metadata about the page
▪ Charset
▪ Page title
▪ (Links to) required files (style, interactivity, etc.)

<body> element
▪ Main page content
▪ Text, images, …

Error Handling
<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.

Special Characters
“<“ opens a tag.
What if I need
“<“ in text?

Special Characters
Char Write as
“ "
& &
< <
> >
ä ä
ö ö
ü ü
ß ß

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>

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/>

STYLING
Your first website looks a bit boring, right?

Styling
▪ Cascading Style Sheets (CSS)
▪ Style language
▪ Describes how HTML markup is presented
Structure / Content Style Visual Output+ =

.css files
▪ Definition: directly in .html file
or in external .css file (recommended)
style.css
index.html
contact.html

Styling Structure (Element Selector)
<!DOCTYPE html>
<html lang="en-US">
<head>
<link href="style.css" rel="stylesheet" type="text/css">
</head>
<body>
<p>Welcome to my website.</p>
<p>Have fun!</p>
</body>
</html>
h1 {
color: red;
}
p {
color: blue;
}
style.html
style.css

More flexible: Class Selector
<!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>
<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

Overwritten Styles? Inspect!
Activate Developer Tools (Chrome, Firefox, Edge)

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

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

Multi-Class
<!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>
<h2 class="notimportant">Instructions</h2>
<p class="notimportant highlight">Have fun!</p>
</body>
</html>

Unique: ID Selector
<!DOCTYPE html>
<html lang="en-US">
<head>
<link href="style-id.css"
</head>
<body>
<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

Inline Style
<!DOCTYPE html>
<html lang="en-US">
<body>
<p style="color: blue;">Have fun!</p>
</body>
</html>
Mostly used by
automatically generated
code.
style-inline.html

CONTAINERS
<div> and <span>

<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

<div> Example
<!DOCTYPE html>
<html lang="en-US">
<head>
<link href="style-div.css"
</head>
<body>
<div style="background-color:yellow; ">
<h1>Footer</h1>
<p>Have fun!</p>
</div>
</body>
</html>
style-div.html

<span>: Formatting words
<!DOCTYPE html>
<html lang="en-US">
<body>
<p>Welcome <span>to</span> my <span
style="background-color:
lightskyblue;">website</span>.</p>
</body>
</html>
style-span.html

JAVASCRIPT
Interactivity

JavaScript
Structure / Content Style Interactivity / Logic
CSS JavaScript

Exercise: Add Interactivity
<!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>
<button onclick="onButtonClick()">Click me!</button>
</body>
</html>
new
new
Good to have
Return to style-id.html example
script.html

<!DOCTYPE html>
<html lang="en-US">
<head>
</head>
<body>
</body>
</html>
new
new
Reference file containing
JavaScript code
script.html

<!DOCTYPE html>
<html lang="en-US">
<head>
</head>
<body>
</body>
</html>
new
new
Button that executes function
when clicked.
script.html

<!DOCTYPE html>
<html lang="en-US">
<head>
</head>
<body>
</body>
</html>
new
new
function onButtonClick() {
document.getElementById('instructionstext').innerHTML = "Yeah, baby";
}
script.js
script.html

<!DOCTYPE html>
<html lang="en-US">
<head>
</head>
<body>
</body>
</html>
new
new
}
script.js

<!DOCTYPE html>
<html lang="en-US">
<head>
</head>
<body>
</body>
</html>
new
new
console.log("Secret message");
}
script.js
new

<!DOCTYPE html>
<html lang="en-US">
<head>
</head>
<body>
</body>
</html>
new
new
console.log("Secret message");
alert("Welcome back!");
}
script.js
new

Note
JavaScript
≠
Java is a Trademark and programming language by Oracle.
It has nothing to do with JavaScript (which is an implementation of ECMAScript)

Most popular programming languages 2017
https://insights.stackoverflow.com/survey/2017#technology

Exercise: Examine a Website
▪ Explore a website with the browser debug tools
▪ See what kind of JavaScript is included

BEHIND THE SCENES
Track the Internet – Protocols & More

Server-Side?
client server
request
response

Server-Side?
client server
request
response
Technology:
Node.js, PHP, ASP.net, Java, …
Technology:
Browser: HTML, CSS, JavaScript

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

Loading
https://www.andreasjakl.com/ in
the browser

Request from client to server
Includes info about browser,
preferred language, etc.

GET request using the HTTP/1.1
protocol

Server response using HTTP/1.1:
200 OK

Server sets a cookie, sends some
info about upcoming content

And finally: the HTML content of
the website!

Afterwards: separate requests to
load images, JavaScript, styles,
etc.

On the server computer, a webserver is handling
all your requests.
Most common: Apache, Microsoft IIS and nginx.

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.

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?

ACCESSIBILITY
Everyone should be able to access your website & app!

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
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!

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
Screen reader examples
https://www.youtube.com/watch?v=QW_dUs9D1oQ
https://www.youtube.com/watch?v=Oo4HoeL6yIE

Narrator
Heading Level 3 Link:
More realistic HoloLens
Spectator View Photos

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

Views on HTML Code
Image by Google, CC BY 3.0
https://developers.google.com/web/fundamentals/accessibility/semantics-builtin/

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/
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

IMPROVING ACCESSIBILITY
What can you do to make it better?

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/

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

Labels
Visible label Text alternative
(invisible)
Checked, “Subscribe
to newsletter”,
Checkbox.
Image, “Surface Dial”

Labels
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%">

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/
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]

Link Accessibility
▪ Skimming through page for links with screen reader
Anti-pattern:
“continue reading”
Better:
give context
Or: only make
title a link

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

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>

Exercise: Analyze your Website
http://wave.webaim.org/

Color Values
https://www.w3schools.com/colors/colors_converter.asp

Color Blindness
What do these images look like for someone with red/green color deficit? (Deuteranope )

Color Blindness
What do these images look like for someone with red/green color deficit? (Deuteranope )
Simulation: http://www.vischeck.com/vischeck/vischeckImage.php

Color Contrast: Is it OK?
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

Colors: Is the contrast OK?
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

Exercise: Mobile Accessibility
▪ Try navigating a web site with the screen reader!
▪ Android: TalkBack
▪ iOS: VoiceOver
▪ Windows: Narrator

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)

WORDPRESS
Managing Content

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

▪ 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#)

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

Prepare Webspace
▪ Login and delete index.html

Upload Wordpress

Find out Database Name
!

Configuration
▪ 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

Finalize Installation
▪ Configure your new website!
▪ Choose safe password
▪ Hackers love to hack WordPress
(it’s the most common web system
after all!)
LOGIN!

Exercise
▪ Create your own website
▪ Blog with 2 posts
▪ Add images
▪ Contact page

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

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

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

THANK YOU!

Basics of Web Technologies

Recommandé

Recommandé

Contenu connexe

Tendances

Tendances (20)

Similaire à Basics of Web Technologies

Similaire à Basics of Web Technologies (20)

Plus de Andreas Jakl

Plus de Andreas Jakl (20)

Dernier

Dernier (20)

Basics of Web Technologies