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