HTML & Browsers
Upcoming SlideShare
Loading in...5
×
 

HTML & Browsers

on

  • 2,979 views

20110319 OSC 2011 Oita で使用したスライド

20110319 OSC 2011 Oita で使用したスライド
http://www.ospn.jp/osc2011-oita/

後半は当日使用しなかった参考資料

Statistics

Views

Total Views
2,979
Views on SlideShare
2,967
Embed Views
12

Actions

Likes
2
Downloads
13
Comments
0

3 Embeds 12

http://s.deeeki.com 6
http://paper.li 5
http://localhost 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…
Post Comment
Edit your comment

HTML & Browsers HTML & Browsers Presentation Transcript

  • "HTML5" & Browsers Slides @ OSC 2011 Oita by Tomoya ASAI (dynamis)
  • 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
  • Web BrowsersBrowsers Evolution...
  • Firefox Input : http://heatmap.mozillalabs.com/
  • Firefox
  • Firefox
  • ...
  • JavaScript (Kraken) JavaScript (SunSpider) JavaScript (V8) jQuery 1.5 next() Map ZoomingTransform (HWACCEL) FishIE Tank (500fish)DOM (absolute div ) Firefox 3.6 Firefox Beta 10 Win7 MBA-late2010
  • IE8 ( ) IE9pp7 Fx3.6 Safari5 WebKit Chrome 9b Chrome canary Fx4 b10 (crankshaft)2/6 Kraken Benchmark IE8 Win7 MBA-late2010
  • ( )
  • ...
  • PC ...
  • "Firefox"
  • Web TechnologiesHTML5 and more...
  • StylingMore CSS...
  • IE9 ...
  • http://hacks.mozilla.org/2010/06/css3-calc/
  • http://hacks.mozilla.org/2010/05/moz-any-selector-grouping/
  • http://hacks.mozilla.org/2010/05/moz-any-selector-grouping/
  • http://hacks.mozilla.org/2010/05/moz-any-selector-grouping/
  • http://hacks.mozilla.org/2010/08/mozelement/
  • http://webkit.org/blog/176/css-canvas-drawing/
  • http://webkit.org/blog/176/css-canvas-drawing/
  • JS mozSetImageElement()
  • http://hacks.mozilla.org/2010/08/mozelement/
  • 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/
  • Firefox3.5~ http://hacks.mozilla.org/2009/06/beautiful-fonts-with-font-face/
  • : http://people.mozilla.org/~jdaggett/webfontsfuture.pdf
  • http://hacks.mozilla.org/2009/10/font-control-for-designers/
  • http://hacks.mozilla.org/2009/10/font-control-for-designers/
  • AnimationCanvas, SMIL...
  • Firefox 4~ http://24ways.org/2009/going-nuts-with-css-transitions
  • http://hacks.mozilla.org/2010/07/firefox4-beta2/
  • SVG Test Suite : http://www.codedread.com/svg-support.php
  • http://people.mozilla.com/~dynamis/demo/smil/
  • MultimediaAudio, Video...
  • http://www.w3.org/2005/Incubator/audio/
  • http://hacks.mozilla.org/2010/08/html5-video-buffered-property-available-in-firefox-4/
  • http://twitter.com/cherenkov/status/21614170698
  • Firefox <video>VLC Web Browser Plugin: http://www.videolan.org/vlc/download-macosx.html
  • autobuffer preload
  •     http://hacks.mozilla.org/2010/08/html5-video-buffered-property-available-in-firefox-4/
  • 3D GraphicsWebGL with GPU...
  • http://www.khronos.org/webgl/
  • Firefox 4~ https://developer.mozilla.org/en/WebGL
  • Device SensorHardware Sensors...
  •   http://hacks.mozilla.org/2009/10/multi-touch/
  • OtherMore and More...
  • http://d.hatena.ne.jp/javascripter/20100404/
  • http://hacks.mozilla.org/2010/08/firefox-4-http-strict-transport-security-force-https/
  • https://developer.mozilla.org/ja/http://r.dynamis.jp/fx4http://r.dynamis.jp/fx3.6
  • http://r.dynamis.jp/mozhacks
  • StylingMore CSS...
  • Firefox3.5~ http://hacks.mozilla.org/2009/06/text-shadow-spotlight/
  • http://www.zachstronaut.com/lab/text-shadow-box/text-shadow-box.html
  • Firefox3.6~ http://hacks.mozilla.org/2009/11/css-gradients-firefox-36/CSS : http://css-tricks.com/examples/ButtonMaker/
  • http://dynamis.jp/demo/css-gradients/
  • Firefox3.6~ http://hacks.mozilla.org/2009/11/css-gradients-firefox-36/
  • http://hacks.mozilla.org/2009/11/css-gradients-firefox-36/
  • Device SensorHardware Sensors...
  • Firefox3.5~ https://developer.mozilla.org/ja/Using_geolocation
  • http://r.dynamis.jp/geolocationdemo
  • 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
  • Interactionfor GUI Applications...
  • photo by californiaAmy http://www.flickr.com/photos/amyandthomas/3865411819/
  •                        Firefox3.6~ https://developer.mozilla.org/en/Using_files_from_web_applications
  • 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
  • http://hacks.mozilla.org/2009/12/uploading-files-with-xmlhttprequest/
  • Firefox.3.6~ https://developer.mozilla.org/en/CSS/pointer-events
  • http://demos.hacks.mozilla.org/openweb/pointer-events/
  • 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?