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

8. WEB TECHNOLOGIES What drives the Internet? Basics of Web Technologies | 2017 | Andreas Jakl | FH St. Pölten

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

13. YOUR OWN WEBSITE Creating Basics of Web Technologies | 2017 | Andreas Jakl | FH St. Pölten

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

38. CONTAINERS <div> and <span> Basics of Web Technologies | 2017 | Andreas Jakl | FH St. Pölten

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

42. JAVASCRIPT Interactivity Basics of Web Technologies | 2017 | Andreas Jakl | FH St. Pölten

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

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

78. IMPROVING ACCESSIBILITY What can you do to make it better? Basics of Web Technologies | 2017 | Andreas Jakl | FH St. Pölten

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

95. WORDPRESS Managing Content 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

100. Upload Wordpress 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

108. THANK YOU! Basics of Web Technologies | 2017 | Andreas Jakl | FH St. Pölten

Basics of Web Technologies

You are reading a preview.

Basics of Web Technologies

More Related Content

Similar to Basics of Web Technologies

More from Andreas Jakl

Featured

Related Books

Related Audiobooks