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

[email protected]

https://www.andreasjakl.com/

https://twitter.com/andijakl

mailto:[email protected]

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

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


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

Worldwide

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

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

http://www.idc.com/promo/smartphone-market-share/os

WEB TECHNOLOGIES

What drives the Internet?


What is the Web?


What is the Web?


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>


https://www.w3schools.com/tags/

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

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

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><p>Welcome to my website.</p><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"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

Unique: ID Selector


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

Inline Style


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

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

<span>: Formatting words


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

JAVASCRIPT

Interactivity


JavaScript


Structure / Content Style Interactivity / Logic

CSS JavaScript

Exercise: Add Interactivity



<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






</body></html>

new

new

Reference file containing

JavaScript code

script.html






</body></html>

new

new

Button that executes function

when clicked.script.html






</body></html>

new

new

function onButtonClick() {document.getElementById('instructionstext').innerHTML = "Yeah, baby";

}

script.js

script.html






</body></html>

new

new


}

script.js

script.html






</body></html>

new

new


}

script.js

script.html






</body></html>

new

new


}

script.js






</body></html>

new

new

function onButtonClick() {document.getElementById('instructionstext').innerHTML = "Yeah, baby";console.log("Secret message");

}

script.js

new






</body></html>

new

new

function onButtonClick() {document.getElementById('instructionstext').innerHTML = "Yeah, baby";console.log("Secret message");

}

script.js

new






</body></html>

new

new

function onButtonClick() {document.getElementById('instructionstext').innerHTML = "Yeah, baby";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 2017https://insights.stackoverflow.com/survey/2017#technology

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


https://www.telerik.com/download/fiddler-wizard

https://www.wireshark.org/


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

https://support.microsoft.com/en-us/help/22798

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


https://www.udacity.com/course/web-accessibility--ud891

Views on HTML Code

Basics of Web Technologies | 2017 | Andreas Jakl | FH St. PöltenImage by Google, CC BY 3.0

https://developers.google.com/web/fundamentals/accessibility/semantics-builtin/

https://developers.google.com/web/fundamentals/accessibility/semantics-builtin/

Exercise: Focus

▪ Navigate around website

▪ http://udacity.github.io/ud891/lesson2-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/lesson3-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

http://udacity.github.io/ud891/lesson2-focus/01-basic-form/

http://udacity.github.io/ud891/lesson3-semantics-built-in/02-chromevox-lite/

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/


https://www.w3.org/WAI/intro/wcag

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


http://eur-lex.europa.eu/legal-content/EN/TXT/?uri=CELEX:32016L2102#d1e1150-1-1

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>

<imgsrc="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/Accessibility

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

https://en.wikipedia.org/wiki/Accessibility

http://www.seoreviewtools.com/html-headings-checker/

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>

http://heydonworks.com/practical_aria_examples/

http://www.w3.org/WAI/intro/aria

Exercise: Analyze your Website


http://wave.webaim.org/

http://wave.webaim.org/

Color Values


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

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

http://www.vischeck.com/vischeck/vischeckImage.php

Color Contrast: Is it OK?


Large text sampleRegular 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

https://www.w3.org/TR/2008/REC-WCAG20-20081211/#visual-audio-contrast-contrast

Colors: Is the contrast OK?




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

http://juicystudio.com/services/luminositycontrastratio.php#specify

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


https://wordpress.org/

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:\temp\wordpress


https://wordpress.org/about/requirements/

http://wordpress.org/download/

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


https://www.help.gv.at/Portal.Node/hlpd/public/content/172/Seite.1720902.html#Impressum

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!


Software

Basics of Web Technologies