• Save
Attractive HTML5~開発者の視点から~
Upcoming SlideShare
Loading in...5
×
 

Attractive HTML5~開発者の視点から~

on

  • 2,669 views

Mozilla 勉強会@名古屋 ...

Mozilla 勉強会@名古屋

日時: 2010年10月16日(土) 15:00〜18:00
テーマ: 次世代ブラウザと次世代 Web 技術

https://dev.mozilla.jp/events/workshop07/

Statistics

Views

Total Views
2,669
Views on SlideShare
2,667
Embed Views
2

Actions

Likes
2
Downloads
0
Comments
0

1 Embed 2

http://www.verious.com 2

Accessibility

Categories

Upload Details

Uploaded via as Adobe PDF

Usage Rights

CC Attribution License

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment

Attractive HTML5~開発者の視点から~ Attractive HTML5~開発者の視点から~ Presentation Transcript

  • Attractive HTML5 @shoito / HTML5-FIT Mozilla @ 2010/10/16(Sat)
  • / shoito
  • → [4Y]
  • astah/JUDE
  • Flash/Web
  • C/S RIA 1990 2003 Web 1990 / 1980 HTML5
  • • HTML5 API • API • HTML5 •
  • HTML5 API
  • Indexed Database Web workers API Web Storage Geolocation API HTML5 WebSocket File API Web SQL Database ...etc HTML5 API
  • W3C http://www.w3.org/2010/Talks/0117-next-web-plh/nextweb.html Open Web Platform
  • HTML, CSS, JavaScript
  • HTML, CSS, JavaScript
  • <!doctype html>
  • <meta charset=“utf-8”>
  • <script src=“jquery.min.js”></script>
  • <link rel=“stylesheet” href=“main.css” />
  • <!DOCTYPE html PUBLIC “-//W3C/DTD HTML 4.01/EN” “http://www.w3.org/TR/html4/strict.dtd”> <html lang=”ja”> <head> <meta http-equiv=”Content-Type” content=”text/html; charset=utf-8”> <title>Mozilla </title> <link rel="stylesheet" href="main.css" type="text/css" /> <script type="text/javascript" src="jquery.min.js"></script> </head> <body> <p> </p> </body> </html>
  • <?xml version=”1.0” encoding=”utf-8”?> <!DOCTYPE html PUBLIC “-//W3C/DTD XHTML 1.0 Strict//EN” “http:// www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd”> <html xmlns=”http://www.w3c.org/1999/xhtml” lang=”ja”> <head> <meta http-equiv=”Content-Type” content=”text/html; charset=utf-8”> <title>Mozilla </title> <link rel="stylesheet" href="main.css" type="text/css" /> <script type="text/javascript" src="jquery.min.js"></script> </head> <body> <p> </p> </body> </html>
  • <!doctype html> <html lang=”ja”> <head> <meta charset=”utf-8”> <title>Mozilla </title> <link rel="stylesheet" href="main.css" /> <script src="jquery.min.js"></script> </head> <body> <p> </p> </body> </html>
  • <footer> <header> <canvas> <nav> Application Cache <video> <section> <article> <audio> <aside> ...etc <command>
  • <big> <frameset> <applet> <noframes> <font> <center> <frame> <dir> ...etc <tt> <u> <basefont>
  • <header> <section> <header> <nav> <aside> <article> <footer> <footer>
  • XHTML/HTML5
  • HTML5 HTML4
  • <input>
  • <canvas>
  • <video>
  • <audio>
  • data-xxx
  • <ul> <li data-country=”JP”> </li> <li data-country=”US”> </li> .... </ul>
  • Microdata item, itemprop
  • <div item> <p>My name is <span itemprop='name'>shoito</span></p> <p>I am <span itemprop='nationality'>JP</span></p> </div>
  • Device Orientation
  • Application Cache Offline Application
  • Application Cache • <!DOCTYPE html> <html manifest=”hello.manifest”> CACHE MANIFEST hello.html hello.js NETWORK: server.cgi
  • Web Storage API localStorage, sessionStorage KEY : VALUE KEY : VALUE KEY : VALUE
  • Session Storage • • sessionStorage.setItem(“key”, “value”); sessionStorage.removeItem(“key”); sessionStorage.clear();
  • Local Storage • • • localStorage.setItem(“key”, “value”); localStorage.removeItem(“key”); localStorage.clear();
  • Geolocation API
  • Geolocation API • • IP GPS function callback(position) { lat = position.coords.latitude; .... } navigator.geolocation.getCurrentPosition(callback);
  • Web Workers API
  • Web Workers API • JavaScript API • DOM main.js var worker = new Worker(“calc.js”); worker.onmessage = function(event) { alert(event.data); }; worker.postMessage(100); calc.js onmessage = function(event) { var num = event.data.num; for (var i = 0; i < 10000; i++) { num = num + i; } postMessage(num); };
  • File API API
  • WebSocket API
  • WebSocket API • API • HTTP var ws = new WebSocket(“ws://air-life.net/service”); ws.onopen = function() { ws.send(“Hello shoito”); }; ws.onmessage = function(event) { alert(event.data); };
  • + WebSocket API
  • W3C http://www.w3.org/2010/Talks/0117-next-web-plh/nextweb.html Open Web Platform
  • Flash HTML5 …
  • HTML5
  • When can I use...
  • Firefox 4 Beta Technology
  • THE HTML5 TEST
  • Modernizr
  • • Web • • Web • • •
  • @shoito / Mozilla @ 2010/10/16(Sat)
  • HTML5 Flash API as3webstorage as3geolocation Mozilla @ 2010/10/16(Sat)
  • as3webstorage ActionScript3 Web Storage
  • Flash Flash HTML SharedObject 100KB ( ) Web Storage 5MB :
  • ActionScript <-> JavaScript ExternalInterface
  • flash.external.ExternalInterface ActionScript function hoge( ):void (Flash) ExternalInterface ExternalInterface .call(funcJ); .addCallback(“funcA”, hoge); function funcJ( ) { } funcA(); JavaScript (HTML)
  • as3geolocation ActionScript3 Geolocation
  • Web SQL Database Flash + HTML 5: Offline Flash Apps using DataStore API
  • • Flex ActionScript <-> JavaScript • ExternalInterface AS <-> JS XML • AS <-> JS