HTML5 and
Medical Applications

Channy Yun

BikeLab, Seoul National University

Rough Timeline of Web Technologies
    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
How to make HTML5 Application?
  • Client-side Database (Web SQL Database, App Cache, Web Storage)
  • Installation Web (Manefest)
  • Desktop experience (Drag and Drop API, Geolocation)
JS APIs

Web Storage

// 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'];

Save text value on the client side (crash-safe)

JS APIs

Web SQL Database

var db = window.openDatabase("Database Name", "Database Version");
db.transaction(function(tx) {
  tx.executeSql("SELECT * FROM test", [], successCallback, errorCallback);
});

    See the generated database: Developer > Developer Tools > Storage

    JS APIs

    Application Cache API

    <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

    Turn off your internet connection and refresh!

    JS APIs

    Drag and drop

    document.addEventListener('dragstart', function(event) {
   event.dataTransfer.setData('text', 'Customized text');
   event.dataTransfer.effectAllowed = 'copy';
}, false);
    2. Select text and drag (original text will be dropped)
    3. Select text and drag (dragged text data will be altered from original)
    Source Data
    Drop Area
    JS

    Geolocation

    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
    • Client Side Storage (Web SQL Database, App Cache, Web Storage)
    • Installable Web (Manefest)
    • Desktop experience (Drag and Drop API)
    • Geolocation

    HTML

    HTML

    New semantic tags

    <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

    New form field types

    Implemented 

    Dedicated UI:
              
<input type='range' min='0' max='50' value='0' /> 
<input results='10' type='search' /> 
<input type='text' placeholder='Search inside' /> 

Input Validation:

<style> :invalid { background-color: red; } </style>
<input type='color' /> 
<input type='number' /> 
<input type='email' /> 
<input type='tel' /> 
etc...

    Not yet 

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

    Audio + Video

    <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

    Canvas example

    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>
    HTML

    SVG in HTML5

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

    SVG example

    HTML
    • Semantics (New tags, Link Relations, Microdata)
    • Accessibility (ARIA roles)
    • Web Forms 2.0 (Input Fields)
    • Multimedia (Audio Tag, Video Tag)
    • 2D and 3D drawing (Canvas, WebGL, SVG)

    CSS

    CSS

    New font support

    @font-face { 
  font-family: 'Junction'; 
  src: url(Junction02.otf); 
}
@font-face { 
  font-family: 'LeagueGothic'; 
  src: url(LeagueGothic.otf); 
}
@font-face { 
  font-family: 'GG250'; 
  src: url(General250.otf); 
}

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.
    Play with the slider on this and further pages!
    CSS

    Columns

    -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

    Text stroke

    div {
  -webkit-text-fill-color: black;
  -webkit-text-stroke-color: red;
  -webkit-text-stroke-width: 0.00px;  
}
    Text stroke example
    CSS

    Opacity

      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

    Rounded corners

      border-radius: 0px;
    Example
    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

    Shadows

    text-shadow: 
  rgba(64, 64, 64, 0.5) 
  0px  
  0px  
  0px;      
box-shadow: 
  rgba(0, 0, 128, 0.25) 
  0px  
  0px  
  0px;
    Shadows example
    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

    Background enhancements

    Background sizing 

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

    Multiple backgrounds 

    div {
  background: url(src/zippy-plus.png) 10px center no-repeat, 
              url(src/gray_lines_bg.png) 10px center repeat-x;
}
    Test
    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

    Hover over me: 
    -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);
}
    Now press 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;
}

    *Please make a better use of it. We don't want a new blink tag ;)

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

    Medical Application: Demo

    • iPhone/iPad Web Application
    • 3D Canvas Examples
    • Gelocation Examples