Exploring the knowledge on Web

Exploring the knowledge on Web; WIDE Meeting December 2014 - Key note session


Transcript

1. These slides are copyright © 2014 Hirotaka Nakajima. Redistribute and disclosure of these slides are not permitted without permissions.
   Keio University logo is licensed by its copyright holder.
   Exploring the knowledge on Web
   WIDE Meeting December 2014 - Key note session

   Hirotaka Nakajima
   Keio University, Graduate School of Media and Governance
   
   https://keybase.io/nunnun
   1
   

   View Slide

2. These slides are copyright © 2014 Hirotaka Nakajima. Redistribute and disclosure of these slides are not permitted without permissions.
   Keio University logo is licensed by its copyright holder.
   2
   November 2011
   http://www.w3.org/html/logo/
   

   View Slide

3. These slides are copyright © 2014 Hirotaka Nakajima. Redistribute and disclosure of these slides are not permitted without permissions.
   Keio University logo is licensed by its copyright holder.
   3
   October 2014
   http://www.w3.org/2014/10/html5-rec.html.en
   

   View Slide

4. These slides are copyright © 2014 Hirotaka Nakajima. Redistribute and disclosure of these slides are not permitted without permissions.
   Keio University logo is licensed by its copyright holder.
   4
   HTML5 Past and Now
   http://www.w3.org/html/logo/
   http://www.w3.org/2014/10/w3c-highlights/
   • Semantics
   
   • Multimedia
   
   • Offline & Storage
   
   • 3D, Graphics &
   Effects
   
   • Device Access
   
   • Performance &
   Integration
   
   • Connectivity
   
   • CSS3
   • Security and Privacy
   
   • Core Web Design and
   Development
   
   • Device Interaction
   
   • Application Lifecycle
   
   • Media and Real-Time
   Communications
   
   • Performance and
   Tuning
   
   • Usability and
   Accessibility
   

   View Slide

5. These slides are copyright © 2014 Hirotaka Nakajima. Redistribute and disclosure of these slides are not permitted without permissions.
   Keio University logo is licensed by its copyright holder.
   Differences
   5
   Unchanged Removed Added
   •Multimedia
   
   •Device
   Interaction
   
   •Performance
   
   •Core Web Design
   
   •Offline
   •Semantics •Security &
   Privacy
   
   •Application
   Lifecycle
   
   •Usability &
   Accessibility
   
   •Realtime
   Communication
   

   View Slide

6. These slides are copyright © 2014 Hirotaka Nakajima. Redistribute and disclosure of these slides are not permitted without permissions.
   Keio University logo is licensed by its copyright holder.
   Multimedia
   6
   Past Now Future
   audio
   video
   Web Audio API
   Video from Big Buck Bunny
   Web Audio API Demo: http://labs.dinahmoe.com/plink/
   iSight indicator on the new MBP photo by Nobuyuki Hayashi available under a Creative Commons Attribution-NonCommercial-
   ShareAlike 2.0 Generic https://flic.kr/p/qJJy5

   •Web MIDI API
   
   •Speech API

   (Recognition)
   Camera API
   •Encrypted Media 

   Extensions
   
   •Media Source 

   Extensions
   

   View Slide

7. These slides are copyright © 2014 Hirotaka Nakajima. Redistribute and disclosure of these slides are not permitted without permissions.
   Keio University logo is licensed by its copyright holder.
   Device Interaction
   7
   Past Now Future
   Location Icon from Google Chrome, Calendar and Message App Icon from Mac OS X Yosemite, Orientation Icon from iOS 8
   Web Intents Image from http://webscripts.softpedia.com/blog/Check-Out-quot-Web-Intents-quot-Working-in-Google-
   Chrome-251331.shtml
   Ambient Sensor Image from http://forums.macrumors.com/showthread.php?t=1409199
   •GeoLocation
   
   •Calendar
   
   •Messaging
   
   •Orientation
   •Network Service 

   Discovery
   
   •Web Intents
   
   •SysApps WG
   
   •Camera API
   •Wake Lock
   
   •Ambient Light
   
   •TCP Socket
   
   •Vehicle
   keepScreenAwake

   = true;
   

   View Slide

8. These slides are copyright © 2014 Hirotaka Nakajima. Redistribute and disclosure of these slides are not permitted without permissions.
   Keio University logo is licensed by its copyright holder.
   Performance
   8
   Past Now Future
   Navigation Timing API Image from http://www.html5rocks.com/en/tutorials/webperformance/basics/
   •Web Worker
   
   •XMLHTTP

   Request2
   •Navigation
   Timing
   
   •Performance
   Timing
   •Beacon API
   

   View Slide

9. These slides are copyright © 2014 Hirotaka Nakajima. Redistribute and disclosure of these slides are not permitted without permissions.
   Keio University logo is licensed by its copyright holder.
   Core Web Design
   9
   Past Now Future
   Standards for Web Applications on Mobile: current state and roadmap: http://www.w3.org/Mobile/mobile-web-app-state/
   •WebGL
   
   •Border-radius
   
   •New input form
   •Responsive UI
   
   •Vertical Text
   •Shadow DOM
   
   •Web
   Components
   •Past: Rich Interface
   
   •Now: Integrated UI both Mobile and Desktop, I18N
   
   •Future: Capsulation of UI
   

   View Slide

10. These slides are copyright © 2014 Hirotaka Nakajima. Redistribute and disclosure of these slides are not permitted without permissions.
    Keio University logo is licensed by its copyright holder.
    Offline
    10
    Past Now Future
    •LocalStorage
    
    •Indexed DB
    
    •File API
    •AppCache
    
    •Offline Events
    •Service Worker
    •Past & Now: Basic feature of offline application
    
    •Future: more advanced & optimised offline features
    

    View Slide

11. These slides are copyright © 2014 Hirotaka Nakajima. Redistribute and disclosure of these slides are not permitted without permissions.
    Keio University logo is licensed by its copyright holder.
    Realtime Communication
    11
    Past Now Future
    •HTTP/1.1
    
    •XHR
    
    •WebSocket
    
    •Server Side
    Event
    •SPDY
    
    •WebRTC
    •http2
    
    •ORTC
    
    •WebRTC Data

    Channel
    
    •Network
    WebSocket
    WebRTC Image from http://www.geek.com/news/chrome-and-firefox-play-nice-in-webrtc-interop-demo-1538511/
    •Past: bidirectional communication with server-client
    
    •Now: bidirectional communication between browser
    
    •Future: local area communication
    

    View Slide

12. These slides are copyright © 2014 Hirotaka Nakajima. Redistribute and disclosure of these slides are not permitted without permissions.
    Keio University logo is licensed by its copyright holder.
    Semantics
    12
    Past Now Future
    •RDFa •Microdata
    
    •schema.org
    
    •LinkedOpenData
    •CSV on the Web
    
    •json-ld
    
    •RDF Data
    Shapes
    •Past: Strict XML
    
    •Now: more realistic, trends on Open Data
    
    •Future: more easier format, json? xml?
    

    View Slide

13. These slides are copyright © 2014 Hirotaka Nakajima. Redistribute and disclosure of these slides are not permitted without permissions.
    Keio University logo is licensed by its copyright holder.
    Security and Privacy
    13
    Past Now Future
    •CSP(Content
    Security Policy)
    •CORS (Cross
    Origin Resource
    Sharing)
    
    •Do-Not-Track
    •Web Crypto
    
    •CSP v2
    
    •https mandatory
    
    •Restrict API on
    cleartext
    •Past: Restrict the origin of resources
    
    •Now: Let application to extend its restriction
    
    •Future: More secure
    

    View Slide

14. These slides are copyright © 2014 Hirotaka Nakajima. Redistribute and disclosure of these slides are not permitted without permissions.
    Keio University logo is licensed by its copyright holder.
    Usability and Accessibility
    14
    Past Now Future
    •WCAG(Web
    Content
    Accessibility
    Guideline)
    •WAI-ARIA
    
    •main element
    
    •SVG
    
    •MathML
    •Indie UI
    
    •Indie Event
    •Past: Only Guideline
    
    •Now: Only modules to provide accessible website
    
    •Future: Easier deployment
    

    View Slide

15. These slides are copyright © 2014 Hirotaka Nakajima. Redistribute and disclosure of these slides are not permitted without permissions.
    Keio University logo is licensed by its copyright holder.
    Future Web
    15
    Past Now Future
    Sensor Image from http://www.clipartsfree.net/svg/776-wireless-sensor-vector.html
    

    View Slide

16. These slides are copyright © 2014 Hirotaka Nakajima. Redistribute and disclosure of these slides are not permitted without permissions.
    Keio University logo is licensed by its copyright holder.
    Rendering
    16
    • Accessibility

    More deployment needed
    
    • One UI, All Devices, Users
    
    • Screen type

    Mobile, PC, Wearable, Signage
    
    • HTML as a only documenting format?
    
    • PDF, Word are dead?
    
    • Spreadsheet, slides?
    
    • Maybe TeX can be replaceable?
    

    View Slide

17. These slides are copyright © 2014 Hirotaka Nakajima. Redistribute and disclosure of these slides are not permitted without permissions.
    Keio University logo is licensed by its copyright holder.
    Runtime
    17
    • Web as an only single application runtime?
    
    • ECMAscript is fastest compare to other scripting
    language
    
    • Client-side: Browser, Server-side: node.js etc
    
    • OS-like features
    
    • Certified API; Bluetooth, TCP Socket
    
    • Just a browser and light kernel
    
    • Chromebook, Firefox OS
    
    • OS is just a under layer of browser?
    JavaScript is a real programming language: http://blog.erratasec.com/2012/09/javascript-is-real-programming-language.html
    

    View Slide

18. These slides are copyright © 2014 Hirotaka Nakajima. Redistribute and disclosure of these slides are not permitted without permissions.
    Keio University logo is licensed by its copyright holder.
    Connectivity
    18
    • http is already dominant protocol on the internet
    
    • Web of Things
    
    • Web = URI?; possibly Restful API
    
    • All the sensors have URI? Domain? Certification?
    
    • P2P again? (because of WebRTC)
    
    • DNS and PKI work well with this model?
    

    View Slide

19. These slides are copyright © 2014 Hirotaka Nakajima. Redistribute and disclosure of these slides are not permitted without permissions.
    Keio University logo is licensed by its copyright holder.
    Security and Privacy
    19
    • HTTPS everywhere
    
    • http2 encryption draft
    
    • TAG Finding on Transitioning the Web to HTTPS
    
    • How to migrate old web? ignore? http-over-tls?
    
    • Code Signing
    
    • Introduced in CSP v2
    
    • App Cache poisoning, safe API usage
    
    • Reliable and safe form
    
    • Still using password?
    

    View Slide

20. These slides are copyright © 2014 Hirotaka Nakajima. Redistribute and disclosure of these slides are not permitted without permissions.
    Keio University logo is licensed by its copyright holder.
    Semantics
    20
    • Open Data = Yes!!
    
    • Linked Open Data ….?
    
    • Open Data and Private Data
    
    • AAA mechanism is needed
    
    • Reliable and safe method to handle big data

    (e.g. sensor data)
    
    • Microdata/formats, Rich Snippet = Yes but that’s all?
    
    • need an evolution like Google’s PageRank
    

    View Slide

21. These slides are copyright © 2014 Hirotaka Nakajima. Redistribute and disclosure of these slides are not permitted without permissions.
    Keio University logo is licensed by its copyright holder.
    Web considered useful
    21
    • W3C says;

    Web for All, Web on Everything
    
    • So many things are undone = lots of research topic!
    

    View Slide