New APIs – Semantic Web – Local Storage

View Github Repository Open presentation in a new window

Steven-xu94

See all presentation from Steven-xu94

New APIs – Semantic Web – Local Storage

0 0

presentation_html5

Co-op presentation at OICR, with reveal.js

On Github Steven-xu94 / presentation_html5

HTML5a step forward

Embrace the new, interactive and better Internet

What is HTML5, exactly?

Press 0

Is HTML5 any good?

  • New APIs
  • Semantic Web
  • Local Storage

New APIs

Interaction to the next level

The old way
The HTML5 Way
Drop files here

New APIs

Better Performance

drawPaper drawCat drawManyCats drawGradient drawRadial

Canvas with heavy graphics: Microsoft Fish IE Tank

Another example: Glacier Works

New APIs

Cross Browser Solution

Code from craftymind.com 
<video width="640" height="480" controls>
   <source src="files/oicr.mp4" type="video/mp4">
   <source src="files/oicr.ogg" type="video/ogg">
   Your browser does not support the video tag
</video>
Browsers will choose which one to download depending on the type

Semantic Web

Technologies now talk: browsers and input tags

  • <input type="email" name="email">
    Email address: 
  • <input type="number" name="lucky" min="1" max="100" required>
    Input your lucky number: 
  • <input type="color" name="favcolor">
    Choose your favorite color: 
  • <input type="date" name="bday">
    Input your birthday:

Semantic Web

Technologies now make sense: sectioning

<div class="section" id="forest-elephants">
   <h1>Forest elephants</h1>
   <p>In this section, we discuss the lesser known forest elephants.</p>
   <div class="subsection" id="forest-habitat">
      <h2>Habitat</h2>
      <p>Forest elephants do not live in trees but among them.</p>
   </div>
   <div class="ads" id="ad1">
      some ads
   </div>
</div>
<section>
   <h1>Forest elephants</h1>    
   <p>In this section, we discuss the lesser known forest elephants. 
   <section>
      <h2>Habitat</h2>  
      <p>Forest elephants do not live in trees but among them.
   </section>
   <aside>
      some ads
   </aside>
</section>

Local Storage

clear

The vision

  • Press down+1, down+2, down+3

Press 4