$30 off During Our Annual Pro Sale. View Details »

Exploring the knowledge on Web

Exploring the knowledge on Web

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


Hirotaka Nakajima

December 11, 2014
Tweet

More Decks by Hirotaka Nakajima

Other Decks in Technology

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