Slide giới thiệu HTML5 bằng HTML5

Ấn nút để chuyển slide.

Phóng to/Thu nhỏ: Ctrl hoặc Command + +/-

HTML5*

Đưa sự nghiệp phát triển Web lên tầm cao mới

Lịch sử phát triển của công nghệ Web
  • 1991 HTML
  • 1994 HTML 2
  • 1996 CSS 1 + JavaScript
  • 1997 HTML 4
  • 1998 CSS 2
  • 2000 XHTML 1
  • 2002 Tableless Web Design
  • 2005 AJAX
  • 2009 HTML 5
HTML5 ~= HTML + CSS + JS APIs

JS APIs

JS APIs

Bộ chọn lọc mới

Tìm phần tử theo ID và Class

var el = document.getElementById('section1');
el.focus();
 
var els = document.getElementsByTagName('div');
els[0].focus();
 
var els = document.getElementsByClassName('section');
els[0].focus();

Tìm phần tử với CSS (Selectors API)

var els = document.querySelectorAll("ul li:nth-child(odd)");
var els = document.querySelectorAll("table.test > tr > td");
JS APIs

Lưu trữ dữ liệu

 
// use localStorage for persistent storage
// use sessionStorage for per tab storage
textarea.addEventListener('keyup', function () {
  window.localStorage['value'] = area.value;
  window.localStorage['timestamp'] = (new Date()).getTime();
}, false);
textarea.value = window.localStorage['value'];

Giá trị đoạn văn bản sẽ được lưu lại ở trình duyệt (crash-safe)

JS APIs

Cơ sở dữ liệu (CSDL) Web SQL

var db = window.openDatabase("Tên CSDL", "Phiên bản CSDL");
db.transaction(function(tx) {
  tx.executeSql("SELECT * FROM test", [], successCallback, errorCallback);
});

    Bạn có thể xem CSDL từ menu: Developer > Developer Tools > Storage
    (sử dụng Google Chrome)

    JS APIs

    Bộ nhớ đệm

    <html manifest="cache.manifest">
    window.applicationCache.addEventListener('checking', updateCacheStatus, false);
    
    CACHE MANIFEST
     
    # version 1
     
    CACHE:
    /html5/src/refresh.png
    /html5/src/logic.js
    /html5/src/style.css
    /html5/src/background.png
    

    Tắt mạng internet và tải lại trang web!

    JS APIs

    Web Workers

    main.js:
      var worker = new Worker('extra_work.js');
      worker.onmessage = function(event) { alert(event.data); };
     
    extra_work.js:
      self.onmessage = function(event) {
        // Do some work.
        self.postMessage(some_data);
      }
    

    Loading Route...

    Try dragging the map while the complex route is being calculated (you will only be able to do that with Workers!)

    JS APIs

    Web Sockets

    var socket = new WebSocket(location);
    socket.onopen = function(event) {
      socket.postMessage("Hello, WebSocket");
    }
    socket.onmessage = function(event) { alert(event.data); }
    socket.onclose = function(event) { alert("closed"); }
     
    

    Bi-directional, full-duplex communications channels, over a single Transmission Control Protocol (TCP) socket, designed to be implemented in web browsers and web servers.

    JS APIs

    Thông báo

    if (window.webkitNotifications.checkPermission() == 0) {
      // you can pass any url as a parameter
      window.webkitNotifications.createNotification(tweet.picture, tweet.title, 
          tweet.text).show();
    } else {
      window.webkitNotifications.requestPermission();
    }
    

    Chú ý: Nếu bạn muốn hủy bỏ quyền, click lại vào nút trên


    Điền username của bạn trên twitter để hiển thị tweet mới nhất ở dạng thông báo

    JS APIs

    Kéo & thả

    document.addEventListener('dragstart', function(event) {
       event.dataTransfer.setData('text', 'Customized text');
       event.dataTransfer.effectAllowed = 'copy';
    }, false);
    
    1. Chọn ký tự và kéo (các kỹ tự gốc sẽ bị xóa)
    2. Chọn ký tự và kéo tiếp (các ký tự được kéo vào trước đó sẽ bị thay thế)
    Dữ liệu gốc
    Thả vào đây
    JS APIs

    Xác định vị trí

    if (navigator.geolocation) {
      navigator.geolocation.getCurrentPosition(function(position) {
        var lat = position.coords.latitude;
        var lng = position.coords.longitude;
        var options = { position: new google.maps.LatLng(lat, lng) }
        var marker = new google.maps.Marker(options);
        marker.setMap(map);
      });
    }
    

    JS APIs
    • Khả năng lưu trữ ở phía người dùng (Web SQL Database, App Cache, Web Storage)
    • Khả năng trao đổi thông tin (Web Sockets, Worker Workers)
    • Sử dụng các kinh nghiệm dùng Desktop (Thông báo, các API kéo thả)
    • Xác định vị trí

    HTML

    HTML

    Các thẻ HTML có nghĩa

    <body>
      <header>
        <hgroup>
          <h1>Page title</h1>
          <h2>Page subtitle</h2>
        </hgroup>
      </header>
     
      <nav>
       <ul>
         Navigation...
       </ul>
      </nav>
     
      <section>
       <article>
         <header>
           <h1>Title</h1>
         </header>
         <section>
           Content...
         </section>
       </article>
     
       <article>
         <header>
           <h1>Title</h1>
         </header>
         <section>
           Content...
         </section>
       </article>
     
       <article>
         <header>
           <h1>Title</h1>
         </header>
         <section>
           Content...
         </section>
       </article>
      </section>
     
      <aside>
       Top links...
      </aside>
     
      <footer>
       Copyright © 2009.
      </footer>
    </body>
     
                
    HTML

    New link relations

    <link rel="alternate" type="application/rss+xml" href="http://myblog.com/feed" />
    <link rel="icon" href="/favicon.ico" />
    <link rel="pingback" href="http://myblog.com/xmlrpc.php">
    <link rel="prefetch" href="http://myblog.com/main.php">
    ...
     
    <a rel="archives" href="http://myblog.com/archives">old posts</a>
    <a rel="external" href="http://notmysite.com">tutorial</a>
    <a rel="license" href="http://www.apache.org/licenses/LICENSE-2.0">license</a>
    <a rel="nofollow" href="http://notmysite.com/sample">wannabe</a>
    <a rel="tag" href="http://myblog.com/category/games">games posts</a>
    ...
    
    HTML

    Microdata

    <div itemscope itemtype="http://example.org/band">
     <p>My name is <span itemprop="name">Neil</span>.</p>
     <p>My band is called <span itemprop="band">Four Parts Water</span>.</p>
     <p>I am <span itemprop="nationality">British</span>.</p>
    </div>
    
    HTML

    ARIA attributes

    <ul id="tree1"
          role="tree" 
          tabindex="0" 
          aria-labelledby="label_1"
          >
      <li role="treeitem" tabindex="-1" aria-expanded="true">Fruits</li>
      <li role="group">
        <ul>
          <li role="treeitem" tabindex="-1">Oranges</li>
          <li role="treeitem" tabindex="-1">Pineapples</li>
          ...
        </ul>
      </li>
    </ul>
    
    HTML

    Các thành phần mới trong form

    Đã được thực hiện

    Giao diện dành riêng: 
                  
    <input type="range" min="0" max="50" value="0" />  
    <input results="10" type="search" />  
    <input type="text" placeholder="Search inside" />  
     
    Xác nhận khi nhập liệu: 
     
    <style> :invalid { background-color: red; } </style>
    <input type="color" />  
    <input type="number" />  
    <input type="email" />  
    <input type="tel" />  
    ...
    

    Chưa được thực hiện

    <meter>
    <progress>
    <output>
    ...
    
    HTML

    Nhạc + Phim

    <audio src="sound.mp3" controls></audio>
    document.getElementById("audio").muted = false;
     
    <video src="movie.mp4" autoplay controls></video>
    document.getElementById("video").play();
    
    HTML

    Canvas

    <canvas id="canvas" width="838" height="220"></canvas>
     
    <script>
      var canvasContext = 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>
                
    HTML

    Ví dụ về Canvas

    HTML

    Canvas 3D (WebGL)

    <canvas id="canvas" width="838" height="220"></canvas>
     
    <script>
      var gl = document.getElementById("canvas").getContext("experimental-webgl");
      gl.viewport(0, 0, canvas.width, canvas.height);
      ...
    </script>
                
    Ví dụ
    HTML

    SVG trong HTML5

    <html>
      <svg>
        <circle id="myCircle" class="important" cx="50%" cy="50%" r="100" 
            fill="url(#myGradient)"
            onmousedown="alert('hello');"/>
      </svg> 
    </html>
    HTML

    Ví dụ về SVG

    HTML
    • Có nghĩa (Các thẻ mới, Link Relations, Microdata)
    • Accessibility (ARIA roles)
    • Web Forms 2.0 (Input Fields)
    • Multimedia (Audio Tag, Video Tag)
    • Vẽ 2D và 3D (Canvas, WebGL, SVG)

    CSS

    CSS

    Bộ chọn lọc

    Bộ chọn lọc

    .row:nth-child(even) {
      background: #dde;
    }
    .row:nth-child(odd) {
      background: white;
    }
    
    Row 1
    Row 2
    Row 3
    Row 4

    Image-like display

    div {
      display: inline-block;
    }
    

    Chọn theo thuộc tính cụ thể

    input[type="text"] {
      background: #eee;
    }

    Phủ định

    :not(.box) {
      color: #00c; 
    }            
    :not(span) {
      display: block; 
    }  
    

    Một vài cách chọn khác

    h2:first-child { ... }
     
    div.text > div { ... } 
    h2 + header { ... } 
    
    Các bộ lựa chọn của CSS2CSS3.
    CSS

    Hỗ trợ nhiều loại font

    @font-face {
      font-family: 'LeagueGothic';
      src: url(LeagueGothic.otf);
    }
     
    @font-face {
      font-family: 'Droid Sans';
      src: url(Droid_Sans.ttf);
    }
     
    header {
      font-family: 'LeagueGothic';
    }
    LeagueGothic font with no image replacement
    CSS

    Text wrapping

    div {
      text-overflow: ellipsis; 
    }
    A long cold winter delayed the blossoming of the millions of cherry, apricot, peach, and prune plum trees covering hundreds of square miles of the Valley floor. Then, unlike many years, the rains that followed were light and too early to knock the blossoms from their branches.
    A long cold winter delayed the blossoming of the millions of cherry, apricot, peach, and prune plum trees covering hundreds of square miles of the Valley floor. Then, unlike many years, the rains that followed were light and too early to knock the blossoms from their branches.
    A long cold winter delayed the blossoming of the millions of cherry, apricot, peach, and prune plum trees covering hundreds of square miles of the Valley floor. Then, unlike many years, the rains that followed were light and too early to knock the blossoms from their branches.

    Sử dụng thanh slider để thử nghiệm text wrapping

    CSS

    Chia cột

    -webkit-column-count: 2;  
    -webkit-column-rule: 1px solid #bbb;
    -webkit-column-gap: 2em;

    In March 1936, an unusual confluence of forces occurred in Santa Clara County.

    A long cold winter delayed the blossoming of the millions of cherry, apricot, peach, and prune plum trees covering hundreds of square miles of the Valley floor. Then, unlike many years, the rains that followed were light and too early to knock the blossoms from their branches.

    Instead, by the billions, they all burst open at once. Seemingly overnight, the ocean of green that was the Valley turned into a low, soft, dizzyingly perfumed cloud of pink and white. Uncounted bees and yellow jackets, newly born, raced out of their hives and holes, overwhelmed by this impossible banquet.

    Then came the wind.

    It roared off the Pacific Ocean, through the nearly uninhabited passes of the Santa Cruz Mountains and then, flattening out, poured down into the great alluvial plains of the Valley. A tidal bore of warm air, it tore along the columns of trees, ripped the blossoms apart and carried them off in a fluttering flood of petals like foam rolling up a beach.

    This perfumed blizzard hit Stevens Creek Boulevard, a two-lane road with a streetcar line down its center, that was the main road in the West Valley. It froze traffic, as drivers found themselves lost in a soft, muted whiteout. Only the streetcar, its path predetermined, passed on...

    CSS

    Viền chữ

    div {
      -webkit-text-fill-color: black;
      -webkit-text-stroke-color: red;
      -webkit-text-stroke-width: 0.00px;  
    }
    Ví dụ bo viền chữ
    CSS

    Độ trong suốt

      color: rgba(255, 0, 0, 0.75);  
      background: rgba(0, 0, 255, 0.75);  
    
    Independent opacity
    CSS

    Hue/saturation/luminance color model

    color: hsla(
      128,  
      75%,  
      33%,  
      1.00);  
            
    HSL example
    CSS

    Bo tròn góc

      border-radius: 0px;  
    
    Ví dụ
    CSS

    Gradients

    background: -webkit-gradient(linear, left top, left bottom, 
                                 from(#00abeb), to(white), 
                                 color-stop(0.5, white), color-stop(0.5, #66cc00))
    

    background: -webkit-gradient(radial, 430 50, 0, 430 50, 200, from(red), to(#000))
                                                             
    
    CSS

    Đổ bóng

    text-shadow: 
      rgba(64, 64, 64, 0.5) 
      0px  
      0px  
      0px;  
    box-shadow: 
      rgba(0, 0, 128, 0.25) 
      0px  
      0px  
      0px;  
                
    Ví dụ về đổ bóng
    CSS

    Instant Web 2.0 (just add sliders)

    text-shadow: rgba(0, 0, 0, 0.5) 0 0px 0px;  
     
    background: 
      -webkit-gradient(linear, left top, left bottom,  
                       from(rgba(200, 200, 240, 0)), to(rgba(255, 255, 255, 0)));
     
    border-radius: 0px;  
     
    -webkit-box-reflect: below 10px
      -webkit-gradient(linear, left top, left bottom,  
                       from(transparent), to(rgba(255, 255, 255, 0)));
    
    Web 2.0 Logo Creatr
    CSS

    Cải tiến về hình nền

    Kích thước của hình nền

    #logo {
      background: url(logo.gif) center center no-repeat;
      background-size: 
        ; 
    }
    

    Resize me! »

    Áp dụng nhiều hình nền

    div {
      background: url(src/zippy-plus.png) 10px center no-repeat, 
                  url(src/gray_lines_bg.png) 10px center repeat-x;
    }
                
    Ví dụ
    CSS

    Transitions

    #box.left {
      margin-left: 0;
    }
    #box.right {
      margin-left: 1000px;
    }
     
    document.getElementById('box').className = 'left';  
    document.getElementById('box').className = 'right';  
    
    #box {
      -webkit-transition: margin-left 1s ease-in-out;
    }
     
    document.getElementById('box').className = 'left';  
    document.getElementById('box').className = 'right';  
    
    CSS

    Transforms

    Di chuột vào ô dưới:

    -webkit-transform: rotateY(45deg);
    -webkit-transform: scaleX(25deg);
    -webkit-transform: translate3d(0, 0, 90deg);
    -webkit-transform: perspective(500px)
    
    #threed-example {
      -webkit-transform: rotateZ(5deg);
     
      -webkit-transition: -webkit-transform 2s ease-in-out;
    }
    #threed-example:hover {
      -webkit-transform: rotateZ(-5deg);
    }
    

    Ấn phím 3!

    CSS

    Animations

    @-webkit-keyframes pulse {
     from {
       opacity: 0.0;
       font-size: 100%;
     }
     to {
       opacity: 1.0;
       font-size: 200%;
     }
    }
     
    div {
      -webkit-animation-name: pulse;
      -webkit-animation-duration: 2s;
      -webkit-animation-iteration-count: infinite;
      -webkit-animation-timing-function: ease-in-out;
      -webkit-animation-direction: alternate;
    }
    

    *Hãy sử dụng Animations thông minh hơn thẻ blink cũ ;)

    Pulse!
    CSS
    • Typography
    • Visuals
    • Transitions, transforms and animations

    Sử dụng HTML5?

    • Các trình duyệt hiện đại
    • Các trình duyệt di động
    • Chrome extensions/Firefox Jetpack/Safari extensions
    HTML5 ~= HTML + CSS + JS APIs

    HTML5 = Next Generation Features for Modern Web Development