Web Technologies VU (706.704)
Vedran Sabol
ISDS, TU Graz
Oct 19, 2020
Vedran Sabol (ISDS, TU Graz) Web Technologies Oct 19, 2020 1 / 71 Outline
1 Markup Languages
2 Web Standards Model
3 Introduction to HTML5
4 General Markup Changes
5 Forms Markup Changes
6 Graphics with Canvas
Vedran Sabol (ISDS, TU Graz) Web Technologies Oct 19, 2020 2 / 71 HTML5 - Part I Web Technologies (706.704)
Vedran Sabol
ISDS, TU Graz
Oct 19, 2020
Vedran Sabol (ISDS, TU Graz) HTML5 - Part I Oct 19, 2020 3 / 71 Markup Languages Markup Languages
Markup: additional information, how to interpret the text in a document In all text-processing applications Typically, invisible to the user E.g. in LaTeX: \section{title of section} In HTML:
new paragraph, blabla...
Vedran Sabol (ISDS, TU Graz) HTML5 - Part I Oct 19, 2020 4 / 71 Markup Languages Structure
Structure defined as nested elements Element: tags, attributes, content Tags: start tag + end tag Attributes: inside start tag Content: Text + sub-elements
Vedran Sabol (ISDS, TU Graz) HTML5 - Part I Oct 19, 2020 5 / 71 Markup Languages Generalized/Descriptive Markup
Describe structure of documents only Presentation and/or behavior of documents defined elsewhere Separate content (structure) from presentation and/or behavior This principle has a number of advantages
Vedran Sabol (ISDS, TU Graz) HTML5 - Part I Oct 19, 2020 6 / 71 Markup Languages Advantages
Code efficiency: smaller files by separating content, presentation and behavior Presentation and behavior files stored separately and only once No overhead in markup files, saves network bandwidth Change them at a single place for all markup files Ease of maintenance and consistency in presentation and behavior
Vedran Sabol (ISDS, TU Graz) HTML5 - Part I Oct 19, 2020 7 / 71 Markup Languages Advantages
Device compatibility Easy to apply alternative presentations and behavior, e.g. handheld devices Web crawlers/robots: documents contain only markup and content No information that is hard for robots to crawl and parse
Vedran Sabol (ISDS, TU Graz) HTML5 - Part I Oct 19, 2020 8 / 71 Markup Languages Standardized General Markup Language
SGML: quite old ISO standard ISO8879 (1986) Meta - markup language: define other markup languages with it Does not define the markup, only provide the means to define it Defines the basic syntax How to distinguish content from markup (elements, attributes, entities) Interpration and semantics is defined by the processing application
Vedran Sabol (ISDS, TU Graz) HTML5 - Part I Oct 19, 2020 9 / 71 Markup Languages Standardized General Markup Language
Elements (nested) describe the structure of a document Element is delimited with a start-tag and an end-tag end-tag is not obligatory :-( Attributes describe properties associated with elements Entities: asociate a string with either a unique alias or reserverd words SGML based on ASCII: binary data and special characters coded as entities
Vedran Sabol (ISDS, TU Graz) HTML5 - Part I Oct 19, 2020 10 / 71 Markup Languages Standardized General Markup Language
Document type definition (DTD) file defines the markup Which elements are allowed, required, and how they are nested Which attributes an element may/must have The application understands the markup and knows what to do with it Syntactical check against the basic SGML syntax and the specific DTD syntax Well-formed document (markup-syntax only) vs. valid document (DTD)
Vedran Sabol (ISDS, TU Graz) HTML5 - Part I Oct 19, 2020 11 / 71 Markup Languages Standardized General Markup Language
Problems of SGML: Very complex, specification with 500+ pages In addition to that the DTD Omission of end-tags: hard for parsers
Vedran Sabol (ISDS, TU Graz) HTML5 - Part I Oct 19, 2020 12 / 71 Markup Languages eXtensible Markup Language
XML: a new meta-markup language (does not define tag semantics) Approx. 50 pages specification, easier to use :) Cleaner syntax, easier to write parsers
Vedran Sabol (ISDS, TU Graz) HTML5 - Part I Oct 19, 2020 13 / 71 Markup Languages eXtensible Markup Language
Required: end-tags, quotation marks with attributes, correct nesting If a markup does not have content: empty-tag (e.g.
Vedran Sabol (ISDS, TU Graz) HTML5 - Part I Oct 19, 2020 14 / 71 Markup Languages HyperText Markup Language
The most well-known SGML DTD 1990 Tim Berners-Lee used an SGML DTD Added images, links, and created HTML DTD Original idea: a simple DTD, separation of content, presentation and behavior Application created to understand the HTML DTD: browser!
Vedran Sabol (ISDS, TU Graz) HTML5 - Part I Oct 19, 2020 15 / 71 Markup Languages HyperText Markup Language
Standardisation efforts by Web Consortium W3C: HTML 4.01 W3C recommendation since 1999 Problems creating a standard: “Browser Wars” (Netscape vs. Microsoft) Adding presentation specific tags (font, colors, center ...) Adding different scripting languages for behavior Mixture of presentation, behavior and content
Vedran Sabol (ISDS, TU Graz) HTML5 - Part I Oct 19, 2020 16 / 71 Markup Languages (X)HTML
eXtensible HyperText Markup Language (XHTML) http://www.w3.org/TR/xhtml1/ XHTML is redefinition of HTML in XML HTML 4.01 reformulated as an XML DTD (insted of SGML DTD) Decomposition into a number of modules Module is a set of elements used for the same purpose
Vedran Sabol (ISDS, TU Graz) HTML5 - Part I Oct 19, 2020 17 / 71 Markup Languages (X)HTML
Structure module: body, head, html, title Text module: headings, div, span, etc, Hypertext module: a Table module: table, tr, td, etc. Each module defined with an XML DTD Purpose: create an XHTML dialect by combining needed modules
Vedran Sabol (ISDS, TU Graz) HTML5 - Part I Oct 19, 2020 18 / 71 Markup Languages Markdown
XML criticized for verbosity (and complexity) Markdown language was created in 2004 Very easy to read and write plain text format Text-to-HTML conversion tool converts markdown to structurally valid XHTML or HTML
Vedran Sabol (ISDS, TU Graz) HTML5 - Part I Oct 19, 2020 19 / 71 Web Standards Model Web Standards Model
Web Consortium defines the Web Standards Model (X)HTML: markup Cascading Style Sheets (CSS): presentation/styles Javascript: behavior
Vedran Sabol (ISDS, TU Graz) HTML5 - Part I Oct 19, 2020 20 / 71 Web Standards Model CSS
Better control for formatting and layout of HTML elements Browsers implement default presentation, can be altered by CSS You can influence formats, fonts, colors, text alignment, spacings, positioning ... Specify in an external document - advantages of separating content and presentation Specifications (approved by W3C): CSS1 and CSS2 (completed), CSS3 (in development, divided into modules)
Vedran Sabol (ISDS, TU Graz) HTML5 - Part I Oct 19, 2020 21 / 71 Web Standards Model Javascript
JavaScript (JS) is an interpreted programming language (1995) Formalized in the ECMAScript standard since 1997, latest version is 10 (June 2019) JS embedded in HTML code or using external Javascript files External files: separation of content and behavior Works on the Document Object Model (DOM)
Vedran Sabol (ISDS, TU Graz) HTML5 - Part I Oct 19, 2020 22 / 71 Introduction to HTML5 HTML development
HTML5 is the next major revision of the HTML standard W3C Recommendation (since October 2014) The Web Hypertext Application Technology Working Group (WHATWG) started work on the specification in 2004 The group consisted of industry players - mainly browser vendors XHTML2 group developed further XHTML standard at W3C 2009 W3C stopped the work on XHTML2 and joined HTML Working group
Vedran Sabol (ISDS, TU Graz) HTML5 - Part I Oct 19, 2020 23 / 71 Introduction to HTML5 HTML5 development
Web Hypertext Application Technology Working Group (WHATWG) HTML Living Standard World Wide Web Consortium (W3C) Main international standards organization for WWW HTML5 first draft in 2007 Stable HTML5 Recommendation released in October 2014 5.2 Recommendation in 2017 Development on 5.3, first draft in 2017 W3C authority on HTML and DOM to WHATWG (May 2019) WHATWG’s HTML Living Standard is now authoritative!
Vedran Sabol (ISDS, TU Graz) HTML5 - Part I Oct 19, 2020 24 / 71 Introduction to HTML5 HTML5 Overview
HTML5 is not only hypertext markup language It is a collection of various Web technologies Markup part Presentation part (CSS3) Behavior (Javascript)
Vedran Sabol (ISDS, TU Graz) HTML5 - Part I Oct 19, 2020 25 / 71 Introduction to HTML5 HTML5 Overview
HTML5 introduces new elements reflecting typical usage of websites E.g. replaces generic div and span elements with navigation and footer elements The canvas element for 2D drawing Ability to use inline SVG and MathML in text/html Multimedia elements such as audio and video for media playback Deprecated elements (e.g. font) removed - use CSS instead
Vedran Sabol (ISDS, TU Graz) HTML5 - Part I Oct 19, 2020 26 / 71 Introduction to HTML5 HTML5 Overview
Emphasis on DOM scripting Adjusted and new APIs for DOM scripting Browser history management Offline web applications (cacheing, local storage) Various storage mechanisms: Web SQL, File API, Indexed DB (key-value store) Drag-and-drop support
Vedran Sabol (ISDS, TU Graz) HTML5 - Part I Oct 19, 2020 27 / 71 Introduction to HTML5 HTML5 Overview
Microdata: nesting semantic metadata within content Geolocation API Backgroud threads: Web Workers Full duplex client-server communication: Web Sockets Cross-document messaging mechanisms
Vedran Sabol (ISDS, TU Graz) HTML5 - Part I Oct 19, 2020 28 / 71 General Markup Changes General markup changes
HTML5 is not based on SGML anymore It has one vocabulary but two serializations Html serialization: text/html XML serialization: application/xhtml+xml
Vedran Sabol (ISDS, TU Graz) HTML5 - Part I Oct 19, 2020 29 / 71 General Markup Changes General markup changes
Figure: Source:W3C Blog
Vedran Sabol (ISDS, TU Graz) HTML5 - Part I Oct 19, 2020 30 / 71 General Markup Changes Semantic markup
W3C mined billions of existing Web pages to discover how class and id attributes are used They found regular patterns in how developers describe the elements Layout related and navigation related Decided to include those into HTML5 Semantic elements: describe meaning/purpose (to browsers and developers) Reduces the developers effort
Vedran Sabol (ISDS, TU Graz) HTML5 - Part I Oct 19, 2020 31 / 71 General Markup Changes Semantic markup
Examples of new elements article, section footer, header figcaption, figure nav, aside mark, time
Vedran Sabol (ISDS, TU Graz) HTML5 - Part I Oct 19, 2020 32 / 71 General Markup Changes Semantic markup
Figure: Source:HTML5 Part 1: Semantic Markup and Page Layout
Vedran Sabol (ISDS, TU Graz) HTML5 - Part I Oct 19, 2020 33 / 71 General Markup Changes Semantic markup: Example
HTML CSS
Vedran Sabol (ISDS, TU Graz) HTML5 - Part I Oct 19, 2020 34 / 71 Forms Markup Changes Web forms
Based on the previous developments for the Web forms specification Aim at simplifying development of forms In-browser input validation New elements, input types, input attributes FormData object
Vedran Sabol (ISDS, TU Graz) HTML5 - Part I Oct 19, 2020 35 / 71 Forms Markup Changes New input types
number (floats) range (slider) color (color selector)
Vedran Sabol (ISDS, TU Graz) HTML5 - Part I Oct 19, 2020 36 / 71 Forms Markup Changes New input types
tel (phone number, no checking of validity) search (same as text but the style might be different) url (valid absolute url) email (valid email address(es)) date, time, datetime, month, week, time, datetime-local (date and time with or without timezone) Browser support varies
Vedran Sabol (ISDS, TU Graz) HTML5 - Part I Oct 19, 2020 37 / 71 Forms Markup Changes New elements
autocomplete (controls datalist-based completion) datalist element defines options for auto-completion (used with list input type) output element presents the result of calculation keygen provides a secure way to authenticate users
Vedran Sabol (ISDS, TU Graz) HTML5 - Part I Oct 19, 2020 38 / 71 Forms Markup Changes New attributes
autofocus (focuses on the element when the page is loaded) placeholder (gives users the hint about the data) required (browser-based validation) pattern (validate format against a regular expression) min, max (range validation) Couple of others
Vedran Sabol (ISDS, TU Graz) HTML5 - Part I Oct 19, 2020 39 / 71 Forms Markup Changes Form validation
Native browser-based validation to simplify form development Javascript validation is not needed anymore in many cases Server-based validation is still needed
Vedran Sabol (ISDS, TU Graz) HTML5 - Part I Oct 19, 2020 40 / 71 Forms Markup Changes Forms: Example
HTML CSS
Vedran Sabol (ISDS, TU Graz) HTML5 - Part I Oct 19, 2020 41 / 71 Forms Markup Changes FormData Object
Submit key-value pairs from Javascript using multipart/form-data encoding:
var formData = new FormData(); formData.append("part_num", "123ABC"); formData.append("part_price", 7.95); formData.append("part_image", somefile)
var xhr = new XMLHttpRequest(); xhr.open("POST", "http://some.url/"); xhr.send(formData);
Vedran Sabol (ISDS, TU Graz) HTML5 - Part I Oct 19, 2020 42 / 71 Graphics with Canvas Canvas
Canvas element HTML5 is an easy and powerful way to draw graphics in browser Canvas element has a context into which drawing commands are issued Different canvas contexts possible, usually 2D Drawing using JavaScript
Vedran Sabol (ISDS, TU Graz) HTML5 - Part I Oct 19, 2020 43 / 71 Graphics with Canvas Canvas: the basics
Programing model consists of properties, methods and objects Drawing by invoking methods, using objects and depending on set properties Properties: font, fillStyle, strokeStyle, shadowColor, lineWidth... Methods: fill, stroke, fillRect, fillText, moveTo, lineTo, ArcTo... Objects: CanvasGradient, CanvasPattern, CanvasTextMetrics...
Vedran Sabol (ISDS, TU Graz) HTML5 - Part I Oct 19, 2020 44 / 71 Graphics with Canvas Canvas: the basics
Bitmap rendering API for drawing graphical primitives No geometry state is remembered when shapes are drawn Opposed to SVG: vector-based, stateful rendering (each drawn shape is a DOM object) Canvas provides better performance and full control over rendering Downside: the programmer must take care of all details!
Vedran Sabol (ISDS, TU Graz) HTML5 - Part I Oct 19, 2020 45 / 71 Graphics with Canvas Canvas: the basics
Create canvas in the following way:
Vedran Sabol (ISDS, TU Graz) HTML5 - Part I Oct 19, 2020 46 / 71 Graphics with Canvas Canvas: the basics
fillStyle color for filling shapes strokeStyle color for strokes Colors defined as in CSS fillRect and similarly fill for filling shapes strokeRect and similarly stroke
Vedran Sabol (ISDS, TU Graz) HTML5 - Part I Oct 19, 2020 47 / 71 Graphics with Canvas Canvas: the basics
Draw on canvas using JavaScript:
var canvas = document.getElementById(’basics’); // check for browser support if (canvas && canvas.getContext) { var ctx = canvas.getContext(’2d’); if (ctx) { ctx.fillStyle = ’#f00’; ctx.fillRect(0, 0, 640, 480); } }
Example 1
Vedran Sabol (ISDS, TU Graz) HTML5 - Part I Oct 19, 2020 48 / 71 Graphics with Canvas Canvas: the basics
... ctx.fillStyle = ’#f00’; ctx.strokeStyle = ’#0f0’; ctx.fillRect(0, 0, 640, 480); ctx.clearRect(0, 240, 640, 240); ctx.strokeRect(0, 280, 640, 200); ...
Example 2
Vedran Sabol (ISDS, TU Graz) HTML5 - Part I Oct 19, 2020 49 / 71 Graphics with Canvas Canvas: the basics
You draw arbitrary paths with beginPath Then you move the point with moveTo Draw line with lineTo Invoke fill, stroke or both Close the path with closePath
Vedran Sabol (ISDS, TU Graz) HTML5 - Part I Oct 19, 2020 50 / 71 Graphics with Canvas Canvas: the basics
... ctx.beginPath(); ctx.moveTo(10, 10); ctx.lineTo(100, 10); ctx.lineTo(10, 100); ctx.lineTo(10, 10); ctx.fill(); ctx.stroke(); ctx.closePath(); ...
Example 3
Vedran Sabol (ISDS, TU Graz) HTML5 - Part I Oct 19, 2020 51 / 71 Graphics with Canvas Canvas: the basics
You can draw images with drawImage It is possible to scale and crop image when you draw it
Vedran Sabol (ISDS, TU Graz) HTML5 - Part I Oct 19, 2020 52 / 71 Graphics with Canvas Canvas: the basics
... if (ctx && ctx.drawImage) { var img = new Image(); img.addEventListener(’load’, function () { ctx.drawImage(this, 0, 0); ctx.drawImage(this, 300, 0, 150, 155); }, false); img.src = ’index.png’; } ...
Example 4
Vedran Sabol (ISDS, TU Graz) HTML5 - Part I Oct 19, 2020 53 / 71 Graphics with Canvas Canvas: the basics
You can perform pixel-based manipulation Functions: createImageData, getImageData, putImageData Pixels are held in ImageData which contains width, height, and data Data is an array with width ∗ height ∗ 4 elements for red, green, blue, and alpha (transparency) values
Vedran Sabol (ISDS, TU Graz) HTML5 - Part I Oct 19, 2020 54 / 71 Graphics with Canvas Canvas: the basics
... var pix = imgd.data;
for (var i = 0, n = pix.length; i < n; i += 4) { pix[i+2] = 255; // the blue channel pix[i+3] = 127; // the alpha channel } ctx.putImageData(imgd, x, y); ...
Example 5
Vedran Sabol (ISDS, TU Graz) HTML5 - Part I Oct 19, 2020 55 / 71 Graphics with Canvas Canvas: the basics
... var imgd = ctx.getImageData(x, y, this.width, this.height); var pix = imgd.data;
for (var i = 0, n = pix.length; i < n; i += 4) { pix[i ] = 255 - pix[i ]; // red pix[i+1] = 255 - pix[i+1]; // green pix[i+2] = 255 - pix[i+2]; // blue // i+3 is alpha (the fourth element) }
ctx.putImageData(imgd, x, y);...
Example 6
Vedran Sabol (ISDS, TU Graz) HTML5 - Part I Oct 19, 2020 56 / 71 Graphics with Canvas Canvas: the basics
Text API Context has the following properties font textAlign (horizontal alignment) textBaseline (vertical alignment)
Vedran Sabol (ISDS, TU Graz) HTML5 - Part I Oct 19, 2020 57 / 71 Graphics with Canvas Canvas: the basics
textBaseline
Figure: Source:WHATWG
Vedran Sabol (ISDS, TU Graz) HTML5 - Part I Oct 19, 2020 58 / 71 Graphics with Canvas Canvas: the basics
... ctx.fillStyle = ’#00f’; ctx.font = ’italic 30px sans-serif’; ctx.textBaseline = ’top’; if (ctx.fillText) { ctx.fillText(’MMIS 1’, 0, 0); } ctx.font = ’bold 30px sans-serif’; if (ctx.strokeText) { ctx.strokeText(’MMIS 1’, 0, 50); } ...
Example 7
Vedran Sabol (ISDS, TU Graz) HTML5 - Part I Oct 19, 2020 59 / 71 Graphics with Canvas Canvas: the basics
Shadows shadowColor shadowBlur: how sharp the shadows are shadowOffsetX and shadowOffsetY
Vedran Sabol (ISDS, TU Graz) HTML5 - Part I Oct 19, 2020 60 / 71 Graphics with Canvas Canvas: the basics
... ctx.shadowOffsetX = 5; ctx.shadowOffsetY = 5; ctx.shadowBlur = 4; ctx.shadowColor = ’rgba(255, 0, 0, 0.5)’; ...
Example 8
Vedran Sabol (ISDS, TU Graz) HTML5 - Part I Oct 19, 2020 61 / 71 Graphics with Canvas Canvas: the basics
Color gradient Linear or radial gradient You define color stops in percentage of the whole gradient area
Vedran Sabol (ISDS, TU Graz) HTML5 - Part I Oct 19, 2020 62 / 71 Graphics with Canvas Canvas: the basics
... var gradient = ctx.createLinearGradient(0, 0, 100, 100); gradient.addColorStop(0, ’#f00’); // red gradient.addColorStop(0.5, ’#ff0’); // yellow gradient.addColorStop(1, ’#00f’); // blue ...
Example 9
Vedran Sabol (ISDS, TU Graz) HTML5 - Part I Oct 19, 2020 63 / 71 Graphics with Canvas Canvas: animations
Animations with canvas are easy Start animation loop Update the screen Redraw
Vedran Sabol (ISDS, TU Graz) HTML5 - Part I Oct 19, 2020 64 / 71 Graphics with Canvas Canvas: animations
... function startAnimation(){ interval = setInterval("redraw()", 1000/FPS); }
function redraw() { ctx.clearRect(0, 0, width, height); ... } ...
Example 10
Vedran Sabol (ISDS, TU Graz) HTML5 - Part I Oct 19, 2020 65 / 71 Graphics with Canvas Canvas: controls
Event handling with JavaScript Mouse events Drag and drop Keystroke events
Vedran Sabol (ISDS, TU Graz) HTML5 - Part I Oct 19, 2020 66 / 71 Graphics with Canvas Canvas: controls
... if (canvas && canvas.getContext) { canvas.addEventListener( ’mousemove’, onMouseMoveOnCanvas, false ); canvas.addEventListener( ’mousedown’, onMouseDownOnCanvas, false ); canvas.addEventListener( ’mouseup’, onMouseUpOnCanvas, false ); ctx = canvas.getContext(’2d’); if (ctx) { redraw(); } } ... Example 11 Vedran Sabol (ISDS, TU Graz) HTML5 - Part I Oct 19, 2020 67 / 71 Graphics with Canvas Canvas: controls
... function onMouseDownOnCanvas(evt) { mouse_down = true; }
function onMouseUpOnCanvas(evt) { mouse_down = false; x0 = -1; y0 = -1; } ...
Example 11
Vedran Sabol (ISDS, TU Graz) HTML5 - Part I Oct 19, 2020 68 / 71 Graphics with Canvas Canvas: controls
... function redraw() { ctx.clearRect(0, 0, width, height); ... if (ctx.fillText) { ctx.fillText(’MMIS 1’, x, y); } } ...
Example 11
Vedran Sabol (ISDS, TU Graz) HTML5 - Part I Oct 19, 2020 69 / 71 Graphics with Canvas Canvas: future
Flash competitor, lightweight in comparison Web native development environment (no plug-in) 3D graphics context with WebGL (API based on OpenGL ES 2.0) Canvas (bitmap) vs. SVG (vector) CSS3 transformations and animations (next lecture)
Vedran Sabol (ISDS, TU Graz) HTML5 - Part I Oct 19, 2020 70 / 71 Graphics with Canvas Canvas: examples
PaintWeb Game Engines Canvas Cycle Many more canvas demos available on the Internet HTML5 Canvas demos 9 Mind-Blowing Canvas Demos HTML5 Website Showcase
Vedran Sabol (ISDS, TU Graz) HTML5 - Part I Oct 19, 2020 71 / 71