Change by HTML5
Upcoming SlideShare
Loading in...5
×
 

Change by HTML5

on

  • 3,066 views

20110225 名古屋新事業センター「ITベンチャー支援セミナー」で使用したスライド

20110225 名古屋新事業センター「ITベンチャー支援セミナー」で使用したスライド

Statistics

Views

Total Views
3,066
Views on SlideShare
3,061
Embed Views
5

Actions

Likes
1
Downloads
22
Comments
1

2 Embeds 5

http://paper.li 4
http://twitter.com 1

Accessibility

Categories

Upload Details

Uploaded via as Adobe PDF

Usage Rights

© All Rights Reserved

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…
  • j,ai choisi hTML5 TOUT EN ESPERANT QU?IL VA M.AIDER SURTOUT POUR YOUTUBE CAR DES FOIS J.AI UN PROBLEME DE PLUGIN QUI M.EMPECHE LIRE DES VIDEOS
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment

Change by HTML5 Change by HTML5 Presentation Transcript

  • Change by HTML5 Slides @ New-Biz Seminar by Tomoya ASAI (dynamis) Fractal Firefox Background Image: http://r.dynamis.jp/fractalfx
  • Agenda
  • Key point HTML5What "HTML5" is?
  • This specification evolves HTML and its related APIs to ease theauthoring of Web-based applications.
  • It is necessary to evolve HTMLincrementally. The attempt to get the world to switch toXML, ... all at once didnt work. Tim Berners-Lee : http://dig.csail.mit.edu/breadcrumbs/node/166
  • Tim Berners-Lee : http://dig.csail.mit.edu/breadcrumbs/node/166
  • The drag-and-drop API is horrible,but it has one thing going for it: IE6implements it, as do Safari and Firefox. Ian Hickson http://twitter.com/Hixie/status/4075253361
  • Drag & Drop API IE6 Safari Firefox Ian Hickson http://twitter.com/Hixie/status/4075253361
  • HTML5 Markup Forms WebFonts The WebSockets API Canvas 2D Cross-document Messaging WebGL Server-Sent Events SVG XMLHttpRequest Level 2 Event Listener Indexed Database APIDrag & Drop API Offline Events File API Web StorageGeolocation API Web Workers Microformats WebM (VP8) Codec Microdata CSS3 Transitions XPath ECMAScript 5th
  • HTML5 Markup Forms WebFonts The WebSockets API Canvas 2D Cross-document Messaging WebGL Server-Sent Events SVG XMLHttpRequest Level 2 Event Listener Indexed Database APIDrag & Drop API Offline Events File API Web StorageGeolocation API Web Workers Microformats WebM (VP8) Codec WHATWG Microdata CSS3 Transitions Canvas HTML5 XPath ECMAScript 5th
  • Web ( "HTML5") Web Applications 1.0 (CSS)Next Generation of HTML WHATWG - HTML5 CSS Images (Gradients ...) CSS 2D Transforms Microdata ( ) CSS Media QueriesEvents & Messaging ( ) Web FontsWeb ... SVG SMIL device , ping ... MathML WebGL Web Workers Web Storage Indexed Database API Web Sockets Audio Data API
  • WHATWG - HTML5 W3C - HTML5 Semantic Elements Semantic Elements Multimedia Elements Multimedia Elements HTML5 Forms HTML5 Forms Event model & APIs Event model & APIs Offline Events Offline Events Drag & Drop API Drag & Drop API HTML5 Parser HTML5 ParserCanvas 2D Graphics Context HTML Canvas 2D Context Microdata HTML5 Microdata Microdata vocabulariesCross-document messaging HTML5 Web Messaging Channel messaging WHATWG W3C HTML5
  • IE8 IE9
  • StylingMore CSS...
  • Firefox3.5~ http://hacks.mozilla.org/2009/06/text-shadow-spotlight/
  • Firefox3.6~ http://hacks.mozilla.org/2009/11/css-gradients-firefox-36/CSS : http://css-tricks.com/examples/ButtonMaker/
  • Firefox3.6~ http://hacks.mozilla.org/2009/11/css-gradients-firefox-36/
  • http://hacks.mozilla.org/2010/08/mozelement/
  • TypographyFont Control...
  • Firefox3.5~ https://developer.mozilla.org/ja/CSS/@font-face
  • http://decomoji.jp/http://fontsquirrel.com/fontface/generator http://decomoji.jp/
  • : http://people.mozilla.org/~jdaggett/webfontsfuture.pdf
  • http://hacks.mozilla.org/2009/10/font-control-for-designers/
  • AnimationTransisions, SMIL...
  • Firefox 4~ http://24ways.org/2009/going-nuts-with-css-transitions
  • MultimediaAudio, Video...
  • http://www.w3.org/2005/Incubator/audio/
  • http://twitter.com/cherenkov/status/21614170698
  • Firefox <video>VLC Web Browser Plugin: http://www.videolan.org/vlc/download-macosx.html
  • 3D GraphicsWebGL with GPU...
  • http://www.khronos.org/webgl/
  • Firefox 4~ https://developer.mozilla.org/en/WebGL
  • Device SensorHardware Sensors...
  • Firefox3.5~ https://developer.mozilla.org/ja/Using_geolocation
  • Firefox3.6~ http://r.dynamis.jp/oryzeademo
  • Multi DeviceAndroid, iPhone, iPad...
  • http://stuffandnonsense.co.uk/blog/about/hardboiled_css3_media_queries /* iPads (portrait and landscape) ----------- */@media only screen and (min-device-width : 768px) and (max-device-width : 1024px) { /* Styles*/ }/* iPads (landscape) ----------- */@media only screen and (min-device-width : 768px) and (max-device-width : 1024px) and (orientation : landscape) { /* Styles*/ }/* iPads (portrait) ----------- */@media only screen and (min-device-width : 768px) and (max-device-width : 1024px) and (orientation : portrait) { /* Styles */ }/* Desktops and laptops ----------- */@media only screen and (min-width : 1224px) { /* Styles */ }/* Large screens ----------- */@media only screen and (min-width : 1824px) { /* Styles */ }/* iPhone 4 and high pixel ratio devices ----------- */@mediaonly screen and (-webkit-min-device-pixel-ratio : 1.5),only screen and (min-device-pixel-ratio : 1.5) { /* Styles */ } cm
  • PerformanceFaster and Faster...
  • IE8 ( ) IE9pp7 Fx3.6 Safari5 WebKit Chrome 9b Chrome canary Fx4 b10 (crankshaft)2/6 Kraken Benchmark IE8 Win7 MBA-late2010
  • Facebook https://developers.facebook.com/blog/post/460
  • OtherMore and More...
  • http://hacks.mozilla.org/2010/12/websockets-disabled-in-firefox-4/
  • http://r.dynamis.jp/mozhacks
  • ë
  • WHATWG : http://whatwg.org/html5
  • http://caniuse.com/
  • http://caniuse.com/
  • http://acid3.acidtests.org/
  • Modernizr: http://www.modernizr.com/
  • One Point Q&A
  • Theora Firefox 3.5~, WebM Firefox4~
  • Xiph.Org On2 Tech. Google VP3 OggTheora VP4Vorbis VP5 VP6 WebM Ogg VP7 Matroska VP8 VP8 Vorbis Container Video Audio WebM FAQ: http://www.webmproject.org/about/faq/
  • http://shaver.off.net/diary/2010/08/27/free-as-in-smokescreen/ OSS
  • Referencesfor more information...
  • http://hacks.mozilla.org/https://dev.mozilla.jp/hacksmozillaorg/https://developer.mozilla.org/ja/Firefox_4_for_developershttps://developer.mozilla.org/ja/Firefox_3.6_for_developershttp://www.whatwg.org/html5http://developers.whatwg.org/http://w3g.jp/blog/studies/html5report
  • http://www.slideshare.net/myakura/presentationshttp://www.slideshare.net/myakura/microdata-a-primerhttp://people.mozilla.org/~jdaggett/webfontsfuture.pdfhttp://www.slideshare.net/beltzner/firefox-roadmap-2010-0510
  • http://www.whatwg.org/html5http://caniuse.com/http://caniuse.com/#cats=HTML5&statuses=rec,pr,cr,wd,ietfhttp://wiki.whatwg.org/wiki/Implementations_in_Web_browsershttp://www.codedread.com/svg-support.php
  • http://hacks.mozilla.org/http://html5rocks.com/http://developer.apple.com/safaridemos/http://ie.microsoft.com/testdrive/http://twitter.com/paulrouget/ Web
  • http://html5gallery.com/http://www.scribd.com/doc/30964170/Scribd-in-HTML5http://280slides.com/http://www.youtube.com/html5
  • https://gaming.mozillalabs.com/http://www.canvasdemos.com/type/games/http://benfirshman.com/projects/jsnes/http://www.dextrose.com/en/projects/aves-enginehttp://www.kesiev.com/akihabara/ Web
  • http://tools.mozilla.com/http://processingjs.org/http://azarask.in/projects/algorithm-ink/http://code.google.com/p/contextfree/source/browse/trunk/contextfree.jshttp://code.google.com/p/cakejs/
  • ëhttp://raphaeljs.com/http://g.raphaeljs.com/http://graph.tk/http://senchalabs.github.com/philogl/http://d.hatena.ne.jp/uupaa/searchdiary?word=*[uupaa.js] IE Canvas
  • Cappuccino: http://objective-j.org/Sproutcore: http://www.sproutcore.com/JavaScriptMVC: http://javascriptmvc.com/Ample SDK: http://www.amplesdk.com/jQuery Mobile: http://jquerymobile.com/Sencha Touch: http://www.sencha.com/products/touch/jQTouch: http://www.jqtouch.com/ Gianduia
  • http://www.appcelerator.com/products/titanium-mobile-application-development/http://phonegap.com/
  • http://hacks.mozilla.org/category/performance/https://developers.facebook.com/blog/post/460http://dt.deviantart.com/blog/38471599/http://mozilla.jp/blog/entry/5927/
  • http://www.w3.org/TR/css3-fonts/http://code.google.com/webfontshttp://typekit.com/http://decomoji.jp/http://www.fontsquirrel.com/fontface/generator
  • http://www.khronos.org/webgl/http://www.khronos.org/webgl/wiki/Demo_Repositoryhttps://developer.mozilla.org/en/WebGLhttp://www.gatk.net/webgl/http://webos-goodies.jp/archives/getting_started_with_webgl.htmlhttp://learningwebgl.com/cookbook/
  • http://www.w3.org/TR/FileAPI/http://www.w3.org/TR/file-writer-api/http://www.w3.org/TR/geolocation-API/https://wiki.mozilla.org/Audio_Data_APIhttps://developer.mozilla.org/en/DOM/window.onmozorientation
  • http://www.w3.org/Style/CSS/current-workhttps://cvs.khronos.org/svn/repos/registry/trunk/public/webgl/doc/spec/WebGL-spec.htmlhttps://cvs.khronos.org/svn/repos/registry/trunk/public/webgl/doc/spec/TypedArray-spec.htmlhttp://www.whatwg.org/specs/web-apps/current-work/multipage/introduction.html#is-this-html5?