Introduction to Building apps With HTML5

by Shehan Tissera

Outline

• Evolution of HTML

• Drawbacks in HTML4 and XHTML

• New features in HTML5

• Cascading Style Sheets

• JavaScript

• JavaScript frameworks and Libraries

• Sample Applications 

HTML - Hypertext Markup Language

• Introduced in 1990

• It evolved over the years with improved set of standards and specifications.

HTML 3.0

• Introduced new features for Netscape Navigator Browser

• Became very popular

• Didn't support on other browsers

  • ​ex: Internet Explorer

• ​Specification was abandoned.

HTML 3.2

• More powerful standards were revolutionized.

• Needed a standardization of HTML.

• World Wide Consortium (W3C) organization was formed.

• W3C maintained the standards.

• Introduced HTML 3.2 in January 1997.

• Fully Supported all the web browsers.

HTML 4.0

• W3C introduces in 1997

• Built for supporting CSS, DHTML and JavaScript

• Simple layouts (Tables)

• Static Elements

• Interactive elements required plug-ins

• Steaming audio or video was unheard of

• No native support

What happened then?

• Nothing changed for a long time.

• YouTube started streaming videos online (Required flash)

• Listening to radio stations / steam music on web

• A lot of new website came up using new technologies and new interactive components.

• All browsers required plug-ins to handle new content

• Plugins consumed more processing power

What happened next?

• Apple IPhone showed up!

• It didn't support Flash player

• Didn't support fancy looking webpages at that time.

What really happened?

• Flash was a closed standard owned by Adobe

• It required lot of processing power

• Drained battery life too quickly

• Apple openly criticized Adobe for this.

• Developers agreed they need an open source standard to build modern websites.

Tadaa! HTML5 was introduced

• First draft - 2008

• Final version - October 2014

• Build with these in mind

  • New features should support HTML, CSS, DOM and JavaScript

  • More markup to replace scripting

  • Must be device oriented (Support Mobiles, Tabs, TVs etc.)

  • Need for external plug-ins to be reduced

  • Better error handing capabilities

  • Better visibility to public (Development Process)

More features of HTML5

Text

• Client side storage and Caching functionality (localStorage)

• Uses Web Worker feature

• New form controls

• Web socket API support

• Canvas for 2D drawings

• New Content specific elements introduced to structure the document

  • Canvas, Article, Nav, Header, Footer, Section, Figure etc.

• Easier to access Location specific data

More features of HTML5

• Biggest change - dedicated <video> <audio> tags for media playback

• Supports common formats to be played "Natively"

• No need of relying on 3rd Party plug-ins

• Audio, Video can be streamed without much processing power

• Saved Battery life

• Supports Vector graphics, can be re-sized without any lose in quality

• Better support for Drag, Drop

CSS - Cascading Style Sheets

• Provide Visual styles

• Rule based language

• Specifies formatting instructions

• Can define layouts and formatting on separate files with .css extension

• Allows rules from other .css files to be merged or edited (Cascading)

Benefits of CSS

• Code re-usability

  • Saves time, Specify rule once, use in many HTML pages

• Less HTML Code

  • Reduce file size of HTML documents

• Device Independence

  • Design to provide same look and feel on all devices

How CSS Work

JavaScript

• Create 2D drawings without any other plug-in

• Web Workers- turbo charge to perform advanced computation

• Invoke any web service for data

• No plug-ins needed to play video

• Allows custom playback controls using JavaScript and HTML

• Uses local storage, No need of browser cookies

• Execute events on user actions

• DOM Manipulation is possible

• Collect browser information of the visitor

Difference between Framework and a Library

• Framework

  • Describes "how" you should present your code.

  • Like code-templates with Helpers, Constructors etc.

  • Solve a specific problem or bring Archtecture in order.

    • Ex: Backbone, requireJS, SocketIO

• Library

  • Offers neat stuff to work with

  • Simplifies your coding expreience

    • Ex: jQuery, Bootstrap, MooTools, YUI

JavaScript Frameworks

• Open source framework by Google

• Enterprise framework

• Used to build complex web applications

• MVC type framework

• Two way data-binding between models and views

• Build Reusable View Components

AngularJS

JavaScript Frameworks

• This year's favorite JavaScript project.

• Open source framework by Facebook

• Used for building User interfaces

• Mostly the V in MVC

• Abstracts the DOM away

• Optimizes Rendering

• Implements one way reactive data flow

ReactJS

JavaScript Frameworks

• Simple framework in one single JavaScript file

• Better for small web apps

• Supports full MVC Framework with routing

• Allows key,value binding

• Connects RESTfull APIs

• State Management

BackboneJS

JavaScript Frameworks

• Focused in programmer productivity

• Also supports MVC

• Includes tempting and view engine Just like Angular, Backbone and React.

• Can extend HTML with your own tags

• Supports routing and Model engine

• Supports RESTfull APIs

EmberJS

JavaScript Frameworks

• Stands for Data Driven Documents

• Perform any data manipulation or visualizations

• Focuses on modem web standards

• Able to apply transformation into DOM or SVG or CSS

• Free from any formats like Flash or Silverlight

D3.js

Thank you!