SXSW Interactive is an amazing conference that’s better than a crystal ball or palm reader to find out what’s coming in the future. For example, I just attended a session by Adobe where the presenter displayed recent, new and future technologies to improve the user experience for your visitors. Below are my bullet point notes for your learning pleasure:

Presenter: CJ Gammon, Adobe
SXSW Description:
The web has become a rich creative platform. It’s so ubiquitous that it’s hard to imagine any game changer not being a part of the web. We’re reaching a point where ideas we could only dream of in the past from interactive film to global multiplayer 3D gaming can become a reality, all living inside of your browser. In this session we will explore inspiring examples of how the web can be used to create rich media experiences and what new possibilities may be available in the future. Sponsored by Adobe.

  • Create the best presentation layer for content
  • History: Documents, Flash, Mobile, HTML5
  • Recommendations: try caniuse.com for browser compatibility
  • New features coming to CSS
    • Clip paths to find transparent portions of content, adjusts visible areas
    • Masks: use image + content to define result, and can animate background
    • Blend modes: mix and interpolate areas of content, replacing opacity
    • Mix blend modes: blends with other layers, creates rich visual effect
    • Filters: Apply method and value, been around awhile and in iOS, can stack and combine filters

SXSW Adobe SVG

  • SVG content for user interfaces or other
    • Raphael.js – good for backwards compatibility
    • D3.js
    • Snap.js – focused on modern SVG usage
    • Example: sequenced animation for banner ad
    • Example: animation on mouse overs
  • 2D Canvas – creates dynamic user experiences
    • Easel.js – flash like API for working with canvas
    • Processing.js
    • Pixi.js – high performance 2D Canvas

SXSW Adobe Food Network

  • Dynamic masks
    • CSS Canvas Drawing in WebKit
    • Used on Food Network site for cupcakes site that they’re working on for an animated dissolve to inside pages
    • Site also allows voice navigation so chefs don’t have to touch the screen
  • WebGL
    • Shaders: two flavored are vertex shaders and fragment shaders (colors)
    • Three.js
    • Babylon.js for gaming
    • Pixi.js for faster performance
    • Potential for motion graphics in your browser, another level of interactivity
    • Shader transitions – integrating WebGL on websites
  • Video
    • Such as rich full screen backgrounds
    • Examples: http://cloudsovercuba.com/
    • Alpha Video – combine video with content more seamlessly
  • Video Games
    • Sprite Sheet – applied to web by offsetting the background texture
    • Parallax for rich layered background
  • Semantics
    • The markup and text within our documents, as used by search engines
    • Document + fixed canvas
    • Not constrained to vertical scrolling, can go 3D also!
    • WEBRTC – web real time communication right in your browser
    • Example: his MECH RTC game where his webcam appears on the mech warrior

Check out HTML.ADOBE.COM to see what they’re working on