• Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Be the first to comment
No Downloads

Views

Total Views
3,278
On Slideshare
0
From Embeds
0
Number of Embeds
4

Actions

Shares
Downloads
139
Comments
0
Likes
4

Embeds 0

No embeds

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
    No notes for slide

Transcript

  • 1. Future of WWW
  • 2. What is HTML5?
    HTML5 is a language for structuring and presenting content for the World Wide Web, a core technology of the Internet. It is the latest revision of the HTML standard (originally created in 1990) and currently remains under development.
    HTML5 ~= HTML + CSS + JS
  • 3. AIM
    Its core aims have been to
    Improve the language with support for the latest multimedia.
    Easily readable by humans
    Consistently understood by computers and devices (web browsers, parsers etc.).
  • 4. Semantics & Markup
    Existing
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html lang="en" dir="ltr" xmlns="http://www.w3.org/1999/xhtml">
    HTML 5
    <!DOCTYPE html>
    That’s it. Just 15 characters. It’s so easy.
  • 5. Semantics & Markup
  • 6. New Input
  • 7. New Input in Phone
  • 8. Offline / Storage
    Web Storage
    Web SQL Database
    Application Cache
  • 9. Web Storage
    Save text value on the client side
    Example
    window.localStorage.setItem('value', “Test Value”);
    Retrieve
    window.localStorage.getItem('value');
  • 10. Web SQL Database
    Store information in client side in SQL database structure
    Example
    vardb = window.openDatabase("DBName", "1.0", "description", 5*1024*1024); //Create Database 5MB
    db.transaction(function (tx) {  tx.executeSql('CREATE TABLE foo (id unique, text)');}); // Create a Table
    db.transaction(function (tx) {   tx.executeSql('INSERT INTO foo (id, text) VALUES (1, “Whoa!")');}); // Insert vlaue
    tx.executeSql('SELECT * FROM foo', [], function (tx, results) {  varlen = results.rows.length, i;  for (i = 0; i < len; i++) {    alert(results.rows.item(i).text);  }}); // Fetching data
  • 11. Application Cache
    Cache your application in browser so it can run without internet
    Put in your HTML file
    <html manifest="cache.appcache">
    cache.appcache:
    CACHE MANIFEST# version 1.0.0CACHE:/html5/src/logic.js/html5/src/style.css/html5/src/background.pngNETWORK:*
  • 12. WebSocket
    Full-duplex, bi-directional communication over the Web: Both the server and client can send data at any time, or even at the same time. Only the data itself is sent, without the overhead of HTTP headers, dramatically reducing band width.
    Example:
    var socket = new WebSocket('ws://html5rocks.websocket.org/echo');
    socket.onopen = function(event) {
    socket.send('Hello, WebSocket');
    };
    socket.onmessage = function(event) { alert(event.data); }
    socket.onclose = function(event) { alert('closed'); }
  • 13. Geolocation
    You can get user latitude and longitude from user browser (computer, phone).
    User needs to give permission to share location.
    Example:
    if (navigator.geolocation) {
    navigator.geolocation.getCurrentPosition(function(position) {
    varlatLng = new google.maps.LatLng(
    position.coords.latitude, position.coords.longitude);
    var marker = new google.maps.Marker({position: latLng, map: map});
    map.setCenter(latLng);
    }, errorHandler);
    }
  • 14. Graphics / Multimedia
    Audio + Video
    Canvas 2D
    Canvas 3D (WebGL)
    Inline SVG
  • 15. Audio + Video
    Audio Example:
    <audio id="audio" src="sound.mp3" controls></audio>document.getElementById("audio").muted = false;
    Video Example:
    <video id="video" src="movie.webm" autoplay controls></video>document.getElementById("video").play();
  • 16. Canvas 2D
    <canvas id="canvas" width="838" height="220"></canvas><script>  varcanvasContext = document.getElementById("canvas").getContext("2d");  canvasContext.fillRect(250, 25, 150, 100);  canvasContext.beginPath();  canvasContext.arc(450, 110, 100, Math.PI * 1/2, Math.PI * 3/2);  canvasContext.lineWidth = 15;  canvasContext.lineCap = 'round';  canvasContext.strokeStyle = 'rgba(255, 127, 0, 0.5)';  canvasContext.stroke();</script>
  • 17. Canvas 3D (WebGL)
    WebGL is a Web-based Graphics Library.
    It extends the capability of the JavaScript programming language to allow it to generate interactive 3D graphics within any compatible web browser.
  • 18. Inline SVG
    Scalable Vector Graphics (SVG) is a family of specifications of an XML-based file format for describing two-dimensional vector graphics, both static and dynamic (i.e. interactive or animated).
    <html>  <svg>    <circle id="myCircle" class="important" cx="50%" cy="50%" r="100"         fill="url(#myGradient)"        onmousedown="alert('hello');"/>  </svg></html>
  • 19. Other Features
    History API
    Element.classList
    New Selectors
    Device Orientation
    FileSystemAPIs
    Desktop Drag-Out
    Desktop Drag-In (File API)
    Native Drag & Drop
    Notifications
    Speech Input
    Form validation
  • 20. CSS 3
    Hue/saturation/luminance color
    Rounded corners
    Gradients
    Shadows
    Reflection
    Background enhancements
    Transitions
    Animations
    And Lot
    Selectors
    Image-like display
    Specific attributes
    Negation
    More specific targeting
    Web fonts
    Text wrapping
    Columns
    Text stroke
    Opacity
    *For demo go to http://slides.html5rocks.com/#css3-title
  • 21. Working with HTML5
    How to detect if your browser support a HTML5 component?
    You can check using JS
    function supports_canvas() {
    return !!document.createElement('canvas').getContext;
    }
  • 22. Modernizr
    Modernizr is an open source, MIT-licensed JavaScript library that detects support for many HTML5 & CSS3 features (http://www.modernizr.com/).
    Put this script in head tag
    <script src="modernizr.min.js"></script>
    Example testing canvas capability using modernizr
    if (Modernizr.canvas) {
    // let's draw some shapes!
    }
    else {
    // no native canvas support available :(
    }
  • 23. Download the slides
    You can go to this following link and download this slide.
    http://thirdeye.ibtgames.com/
  • 24. References
    http://en.wikipedia.org/wiki/HTML5
    http://diveintohtml5.org/
    http://slides.html5rocks.com
    http://diveintohtml5.org/peeks-pokes-and-pointers.html
  • 25. Who am I?
    MirzaAsif
    mirza.asif@bluebd.com
    CTO & Co-Founder of
    Infrablue Technology Ltd
    IBTGames Ltd
    PibLabs Ltd
  • 26. Question