Html5 workshop part 1

-Saurabh Bhatia, CEO – Safew Labs- Ritesh Ambastha, CEO – iWillStudy.com Session 1 on 17th Feb 2012, NIRMA University

Hello Participants!HTML5 is The NewHTML Standard!

What is HTML5? HTML5 will be the new standard for HTML. The previous version of HTML, HTML 4.01, came in 1999. HTML5 is still a work in progress. However, the major browsers support many of the new HTML5 elements and APIs.

How Did HTML5 Get Started? HTML5 is a cooperation between the W3C and the WHATWG. W3C - World Wide Web Consortium WHATWG - Web Hypertext Application Technology Working Group

Chronicle May 1994 HTML+ Released , first version to be used by WWW July 1994 HTML2 Released , first standard doctype defined November 1994 Netscape comes to Life, WWW consortium formed March 1995 HTML 3 Released November 1997 HTML Version 3.2 released November 1998 HTML4, the longest Running version Released April 2010 HTML5 enters mainstream , to be in active development till 2014

Some rules for HTML5 New features should be based on HTML, CSS, DOM, and JavaScript Reduce the need for external plugins (like Flash) Better error handling More markup to replace scripting HTML5 should be device independent The development process should be visible to the public

Minimum HTML5 Document

HTML5 New Features The <canvas> element for 2D drawing The <video> and <audio> elements for media playback Support for local storage New content-specific elements, like <article>,<footer>, <header>, <nav>, <sect ion> New form controls, like calendar, date, time, email, url, search

Lets start with some basic concepts!

HTML5 - Multimedia & Graphics!Lets be honest, everyone likes lasers, 3D effects, and explosions. Lets Explore!

Do wonders with HTML5 With HTML5, the browser has become a full-fledged platform for games, animation, movies—anything graphical. Lighting and shadows, reflections, and rich textures result in realistic compositions. 3D CSS, vector graphics (canvas and SVG), and WebGL turbocharge web apps with amazing 3D graphics and special effects. Rich audio APIs and low-latency networking of WebSockets—together with the graphical APIs and technologies.

HTML5 - Offline And Storage!Offline web?! Not an oxymoron anymore. Lets Explore!

Disconnected? No issues at all ! HTML5 APIs that let you create apps that work even when they’re not connected. Application cache, localStorage, sessionStorage, IndexedDB, File System and online and offline events enable apps to “amphibiously” work with or without online connection. Users can even download large files (greater than 1 GB) in full or in part for later offline viewing.. Rich audio APIs and low-latency networking of WebSockets—together with the graphical APIs and technologies.

HTML5 Features - Offline HTML5 and related specs introduce a number of features to make offline web apps a reality: application cache localStorage web SQL & indexed database online/offline events

HTML5 Features - Storage When web developers think of storing anything about the user, they immediately think of uploading to the server. Make your app work when the user is offline Its a performance booster Its an easier programming model, with no server infrastructure required

Offline Technologies: Web Storage: simply provides a key-value mapping, e.g. localStorage["name"] = username;. Web SQL Database: gives you all the power - and effort - of a structured SQL relational database. Indexed Database: is somewhere in between Web Storage and Web SQL Database. File Access: s an API for reading file content in JavaScript.

PERFORMANCEFaster, Higher, Stronger!

Performance: Interesting! HTML5 enables web apps to be more responsive Offline APIs are not just for storing files locally, they can also improve performance. You can cache pages that users are likely to click. Web Workers - lets you run multiple processes in the background. Open-sourced JavaScript interpreter for Google Chrome—runs faster than Python.

Performance - ThemesStore Locally Data stored on the client is quicker to access than data stored on the server.Process in the background Anything that doesnt help the user see a response to their action should be performed in the background.Minimize connections Each connection requires work for setup and teardown.Decrease bandwidth Less bandwidth means a faster response.

EASIER DEVELOPMENT...Because we’d rather play games than rewrite that app for yet another device.

Easier Development Code Portability  Enter HTML5. It simplifies your development cycle by letting you use the same technology stack across multiple platforms and devices. Single Sourcing-ish  With HTML5, you can have a single technology stack that you fine-tune for different browsers. You don’t have to rewrite things from scratch, port anything, or maintain entirely separate code bases for each device you support. Approachability  HTML5 technologies—JavaScript, CSS, and HTML—are easier to learn for some developers.

BROAD REACH No other platform can match the user base of HTML5. Connect with users wherever they are by creating HTML5 apps that can be deployed across multiple platforms and a wide range of devices. Whether you are running an enterprise, creating games, or developing personal apps HTML5 is broadly supported on all modern desktop browsers and major mobile devices

SECURITYYes, you are safe! No more pirates :)

Security Better Security Design for HTML5 APIs. More Secure Browsers  Sandboxing  Multi-Process Architecture  Developments in HTTP  Security Policies Safer Web Apps

LOWER COSTS

LOWER COSTS AND EASIERMAINTENANCE Lower Overhead  While desktop apps must be installed separately on each computer, web apps are just one click away. Better User Experience.  Users are assured that their apps are always up to date. Device Agnosticism.  Users can just open the browser on another device and instantly access core apps and critical data. Enterprise Solution.  Having one code base for multiple devices, the ease of simultaneous deployment and upgrade, simplified data migration and backup make HTML5 an excellent platform for businesses.

LOCAL FILE ACCESSThe internet and the local file system, together at last!

Local File Access SANDBOXING - Web apps can create, read, navigate, and write to a sandboxed section of the users local file system. HTML5 provides very powerful APIs to interact with binary data and a users local file system. HTML5 is broadly supported on all modern desktop browsers and major mobile devices

 PRESENTATION  Ooh! Shiny!

Presentation You can create visual enhancements like rounded corners, gradients, and shadows. Presentation can all be done with only CSS3 and not a single lick of JavaScript CSS3 Transformations allow you to apply rotations, scales, skews and translations to any DOM element with simple styles. Applying 3D transforms is simple too.

Thank YouKeep in Touch:www.facebook.com/iwillstudyJoin our Study-Group:http://www.iwillstudy.com/group/html5

Html5 workshop part 1

by iWillStudy.com on Feb 17, 2012

Accessibility

Categories

Upload Details

Usage Rights

Statistics

Html5 workshop part 1 Presentation Transcript