WebVisions 2012 in review: Part two

Thursday, May 17, 2012

WebVisions 2012 This is a continuation of WebVisions 2012 in review: Part one.

On Wednesday through Friday, May 16-18, I attended the WebVisions 2012 conference at the Oregon Convention Center in Portland. Below is a quick overview of all sessions I attended on Thursday, with links. See Twitter updates using #wvpdx.

Correspondent from the Future – Baratunde Thurston of The Onion
(9:15 am to 10:00 am | session details)

In this technology and future-oriented talk, Baratunde, host of Popular Science’s Future Of on Science Channel, goes behind the scenes of his television show as well as his digital strategy work at The Onion and other companies to give a deeper analysis of the issues raised in his exploration of the future. From self-driving cars to creepy Japanese robots to a real, functioning orgasmatron, Baratunde will share anecdotes, images and a thoughtful, provocative and humorous analysis of what the future might hold.

How to Not Be a JavaScript Hack – Phillip Kerman
(10:15 am to 11:00 am | session details)

The good news is browsers have seen phenomenal performance gains in their ability to render JavaScript. But the demand for sophisticated applications has also grown. Match this with the fact mobile devices are inherently slow and you will quickly see why streamlined code is important. Not only do developers need to squeeze every drop of JavaScript performance possible, but more importantly, they need to avoid pitfalls that can cause applications to come to a screeching halt and crash.

This session covers: basics of JavaScript (like avoiding variable collision and memory leaks); best practices for good performance (including simple caching, closures vs. global functions, as well as comparison of different object-oriented patterns); and, when to use CSS transitions instead of JavaScript.

  • Twitter: @phillip
  • JavaScript and jsFiddle resources and code samples: tinyurl.com/javascripthack
  • Overview:
    • scope
    • hoisting: if a function is declared (vs. an expression), the function gets hoisted to the top; so, list all local variables at the top
    • closures
    • immediately invoked functions
    • expressions (IIFE)
    • modules
    • namespaces
  • Understand why JavaScript libraries/frameworks like jQuery and xjs are advantageous
  • Learning
  • Tooling
    • editor for JS: Komodo Edit (free), WebStorm ($49+)
    • JSLint (code quality tool, remove errors/”lint” from your program)
    • browser dev tools
    • jsFiddle
    • case for unit testing (because JS gets interpreted at runtime, generating lots of test cases are essential
  • console.log() vs. alert()
  • JavaScript garbage collector: delete pieces of memory that are no longer in use

The Web’s Third Decade – Faruk AteÅŸ
(11:15 am to 12:00 pm | session details)

Our medium has entered its third decade of existence, and is ready for some growing up. Our definitions and understanding of the web are rapidly getting out of date, as, too, are our practices for building on it. It is time to re-evaluate where things are and, more importantly, where they are going.

Faruk AteÅŸ will teach tools and techniques for a more modern view on the web, the world’s greatest platform for content delivery as well as function. Learn how the past is improperly preparing us for the present and the future, negatively affecting our work—and what you can do to free yourself from these information shackles.

  • Twitter: @KuraFire
  • The Third Decade: 2012-2022
  • A History of the Web
    • 1991-2001 – Dark Ages of “Web Design”
    • 2001-2011 – Early stirrings of modern civilization
    • 2012 – Cold War shenanigans (with browser vendor prefixes)
  • In April 2012, Opera announced that it’s going to implement the -webkit alias: “Opera Mobile Emulator build with experimental WebKit prefix support“
  • Historically: we already have a user-agent clusterfuck (with numerous web browsers based on different engines posing as each other)
    • “Internet Explorer wants to be identified as Netscape 4; Konqueror and WebKit want to be identified as Firefox; Chrome wants to be identified as Safari.” Source: “History of the user-agent string“
  • Developers or browser vendors to blame?
  • Good developer tools: LESS, Sass with Compass. They are CSS preprocessors
  • Responsive images: img srcset syntax vs. picture proposal

CSS3 OpenType: The New Web Typography – Thomas Phinney
(1:30 pm to 2:15 pm | session details)

Web typography is changing dramatically thanks to browser support for @font-face and server-based fonts. Web designers now have thousands of font choices where they once had just a dozen. But beyond @font-face, CSS 3 introduces myriad new OpenType typographic controls, bringing a level of typographic precision to web design previously seen only in print.

Covered in this presentation:

  • how @font-face server-based web fonts work, and what options they replace
  • choices for enabling @font-face, from self-hosting to web font services
  • both font-independent and OpenType features, and how to tell which web fonts support which OpenType features.
  • see these features in action on web pages, from workhorse everyday typography to the surprising and bizarre, via fonts created by Phinney and friends
  • other CSS 3 typographic features such as kerning and hyphenation
  • state and near future of advanced typography support in browsers
  • “correct” typographic use of all these new features

Additional notes:

  • Twitter: @ThomasPhinney
  • For about 20 years, web design has been shackled to a few common fonts
  • Many font formats required, but converging on WOFF (web open font format)
  • Self-hosting vs. web font services
  • @font-face CSS tag > font-family
  • CSS3 and OpenType fonts:
  • Text module: Hyphenation, Grid-based layout, various wrap options, handing punctuation, multiple columns
  • Fonts Module: kerning and ligatures (turn on optimized legibility in CSS in Firefox), full OpenType features and alternates
  • Ligatures: multiple letters colliding: f-i collision – use standard ligatures all the time – happens via alternate glyphs (built into many fonts)
  • Tabular lining, proportional lining, proportional oldstyle, tabular oldstyle
  • Stylistic sets for levels of swashiness (swashes)
  • Contextual alternates of glyphs plus ligatures
  • Firefox OpenType font feature support: mzl.la/ff4-ot

Hulk Smash the Web! How the Web and Digital Technology are Reshaping Visual Effects – Jeff White
(2:30 pm to 3:15 pm | session details)

Computer graphics in visual effects is a relatively young industry in relation to film making, although it is an ever changing industry. In recent years, digital technology and the web have brought significant changes into all aspects of film production.

Jeff will detail how digital capture drove the creation of the Hulk, Ironman and a virtual New York City for Marvel’s the Avengers. He’ll cover the steps ILM took to create the newest Hulk including working with Mark Ruffalo to bring his likeness and performance into a CG character.

In addition, he’ll talk about the impact of the web at each step of visual effects production and how it’s rapidly changing the way visual effects work is done.

Building Mobile Applications with Web Standards – Kevin Hoyt
(3:30 pm to 4:15 pm | session details)

If you are building for iOS, the you use Objective C and Xcode. If you are building for Android, then you might use Java and Eclipse. And if you are building for BlackBerry, you will find yet a different Java. But all these devices have a modern browser capable of leveraging many of the emerging web standards. So why not use that browser to build applications that you can deploy in the various application stores? Welcome to PhoneGap.

In this session, join Adobe Evangelist, Kevin Hoyt on a tour of how to get started building mobile applications with web standards using PhoneGap. We will start by setting up the workflows for both iOS and Android. From there we will build and deploy our first application to each. After that it is off to the races with native device API integration including accelerometer, compass, audio recording, camera and photo gallery access, and more.

  • Twitter: @krhoyt
  • Presentation (PDF): goo.gl/MjdmI
  • Demo: kevinhoyt.com/webvisions/punchy/
  • Web standards: WHR 2, HTML 5, FileReader (for reading local files)
  • Resolutions and screen densities pose a challenge in the mobile space (e.g., too big on an iPhone 3, but too small on an iPhone 4)
  • On mobile/tablet devices, mouse events become touch events (check if “ontouchstart” exists in document; if so, it’s a touch-enabled device)
  • Use CSS3 media queries to rearrange/resize design elements to account for fat fingers (vs. a mouse pointer on desktops)
  • Rotation/orientation events using built-in accelerometers are great for making cool mobile-specific features. But simulators don’t support rotation events, so you have to test it on actual mobile devices
  • PhoneGap: uses a chromeless web browser running inside a baseline native application container that loads your HTML, CSS, and JavaScript for testing for mobile devices. PhoneGap is part of the open source Apache Cordova project
  • The ideal scenario, or ultimate goal, is that PhoneGap becomes obsolete

Sex and SciFi – Nathan Shedroff, Chris Noessel
(4:30 pm to 5:15 pm | session details)

Could there ever be a better trifecta than Science Fiction, Technology (OK, Interaction Design), and Sex?! While it may be more common for sex to be used to titillate rather than inform or inspire scifi audiences, sex is a big part of our lives and a major form of interaction. Films like Logan’s Run, Total Recall, THX-1138, Sleeper, Barbarella, and Firefly, as well as television programs like Star Trek: Voyager and Futurama offer lessons to designers that are both specific to the domain and generalizable to the field of interaction design.

As part of their ongoing analysis of interfaces in science fiction, Make It So, the authors will share and discuss a collection of video clips depicting visions of sex-related technologies in mainstream science fiction and their relation to real world technologies from state-of-the-art “sexplorers.” Discussion will address the questions these scenes—and what their presence in the larger film or television show—raise.

  • How have sex interfaces been portrayed in mainstream science fiction?
  • What can we generalize from these examples about interface design?
  • What can we generalize from these examples about Hollywood?
  • Which are examples of “good” scifi sexual interfaces?
  • What criteria should we use when evaluating fictional interfaces?
  • What counts as sexual technology?
  • What expectations have been raised by scifi around technology and sex?
  • What fears have been raised by scifi around technology and sex?
  • How has science fiction extended existing sexual paradigms?
  • How have actual sexual technologies been affected by science fiction?

Additional notes:

  • Make It So (Sexy): This talk is based on the last chapter of their forthcoming book
  • Three areas of exploration: matchmaking, augmented mediated coupling, sex with technology
  • Sex-tech breaks sci-fi narratives when sci-fi is exploring something other than sex. In sci-fi movies, sex derails the narrative; sex needs to be treated as a shallow titillation instead of a satisfying, meaningful experience.
  • Sex-tech and sci-fi are on divergent paths. Technology breaks sex for most people. But design and sci-fi are more compatible and mutually beneficial. In the real world, unlike in sci-fi plots, sex is a core goal and meaningful force of human existence.

Continue to WebVisions 2012 in review: Part three »

Similar posts that may be of interest: