The Open Web Platform

• Non proprietary & open standards with a huge pool of developers
• File transfer with HTTP
• Markup with HTML5
• Style sheets with CSS
• Scripting with JavaScript
• Expanding range of APIs
• Natural choice for applications on a wide range of devices

The Open Web Platform

Available on desktops, smart phones, tablets, connected TVs, cars, games consoles, ...

HTML5

• Rich Markup
• Support for assistive technology
• Interactive Forms
• Video and Audio
• Rich Graphics
• Dynamic Scripting
• Rich access to device capabilities

Markup

• Extensive range of features
• Structural e.g. article, section, aside, details
• Headings, paragraphs, lists and tables
• Hypertext links and inline emphasis
• Support for the World's languages
• Wide range of UI controls for use with scripting interactive applications

Interactive Forms

• A wide range of controls:
  • single and multi-line text input
  • buttons, checkboxes and radio buttons
  • single and multi-select lists and menus
• HTML5 adds better support for mobile devices
  • date, time and range controls
  • additional types for email addresses, telephone numbers and URLs
  • lists of predefined entries for free text fields
  • declarative validation e.g. with regular expressions

Rich Graphics

• Images with JPEG, PNG and GIF
• no canvas supportScripted graphics with the HTML Canvas
• Declarative graphics with embedded SVG
• Mathematics with embedded MathML ${\left(exp\left(x+3\right)\right)}^{\prime }\frac{{\partial }^3}{\partial x^3}\frac{{\partial }^2}{\partial y^2}\left(x^y+y^x+x^3\right)$

Styling with CSS

• Margins, padding, positioning and more
• Foreground and background colors, textures and gradients
• Rectangular and curved borders and shadows

• Top cube face

  Left cube face

  Right cube face

  Transformations and animations
  • http://www.w3.org/TR/css3-animations/
• Text layout: left to right, right to left, mixed and vertical
  • http://www.w3.org/TR/css3-writing-modes/
• downloadable fonts, and lots more ...

Dynamic Scripting

• JavaScript language
• Event handlers
• Document object model
• Network access: HTTP, Server-sent events and Web Sockets
• Background tasks with Web Workers
• Security and cryptography
• Local storage
• Offline support

Rich access to device capabilities

• Mouse, touch and key press events
• Location, motion, proximity and orientation
• Microphone, camera and ambient light
• Address book and calendar data
• Battery status, Vibration
• Notifications
• Network information
• Others, e.g. NFC and secure elements

Adaptation to the Device

• Devices vary considerably
  • Desktop with large screens, keyboards, mouse/track pads
  • Smart phones and tablets with touch screens
  • Remote controls for connected TVs
  • Cars with speech for hands free operation
• Service-side based on info sent in HTTP requests
• Client-side using CSS media queries
• Client-side using local scripts
• See slides on responsive design for more details