choppingblock.com, portfolio

chopshopstore.com

Take exceptionally talented creative professionals.

• Teach them how to work digitally.
• Teach them how to build for & communicate online.

• Great, how much time to we have?
• A week, a day? oh, 45 minutes...

What does "doing more" mean to this guy?

• Better design (motion, animation, interactivity).

Like any other medium.

• Let's start with the basic principles...

Next Gen Browsers

• Google Chrome, Firefox, Safari, Opera, (IE?)

Technologies

• Core: HTML5, CSS3, Javascript
• Plugins: Flash, Java, Silverlight (Netflix), Unity3d

Mobile

• iOS, Android, Windows Mobile

• More resiliency (performance, speed, stability)
• Cross-platform functionality (web standards)

• Core technology within all "Next Gen" browsers.
• Plugins provide additional technology.

• WebKit is an open source web browser engine.
• Embraces HTML5, successful on mobile platforms.

• Smaller, weaker hardware, battery operated.
• Conflicting business models.

iOS (Apple)

• No flash in browser, but Flash based (AIR) apps

Android 2.2+ (Google)

• Runs Flash Flash Player 11, AIR 3 link

BlackBerry (RIM)

• Should (will?) support Flash Player 11, AIR 3 link

Windows Phone 7 (Microsoft)

• In collaboration link

Desktop - 94.57% of Web Traffic

Mobile - 5.437% of Web Traffic

• Barely any standards.
• Great typography -> images of words.
• Limited animation & interactivity.
• SLOW JavaScript.

• Cross platform, cross browser.
• Any typeface.
• Unparalleled animation, interactivity, sound...
• The web kinda stepped forward. (old gabocorp)

Set The Bar

• Interactivity
• Animation
• Video*

Introduced a Generation of Visual People To:

• Scripting/programming (ActionScript)
• Interactive Storytelling

Resonated With the Design Community

• Seemed to doing what JavaScript was always supposed to have done.
• Visual, Object Oriented, relatively fast*.
• Exceptionally approachable - fun even.
• Well documented (in comparison)*

Mesmerized us:

• Jared at levitated.net, Manny at uncontrol.com
• Yugo at yugop.com, Eric at natzke.com
• Seb at sebleedelisle.com, Keith at bit-101.com

Hype Framework

• The Hype Flash Framework

• BBC CBeebies Big and Small House
• The Johnny Cash Project crowd-sourced music video.
• Bill Harvey Music by sofake.
• Vector Park and Feed The Head
• MoMA What is A Print by us.
• TMBG No Album by us.

iOS Apps:

• Machinarium for iPad (is awesome)
• Vectorpark.com iOS games.

• Next generation browsers.
• CSS (for designers) happened, and then CSS3.
• JavaScript got FAST*
• Mobile adoption is fueling HTML5 growth.

• Lost World's Fairs*
• HTML5 Twitter Canvas Experiment
• 20 Things I Learned About Browsers and the Web
  Wow that's neat, how did they do that?
• Shape Type, the letter shaping game
• Baroque.me: Bach Cello Suites No. 1
• Anything at creativejs.com

3d:

• Keep watching mrdoob.com
• ROME: 3 Dreams of Black an interactive film.

“Ok great, how do I
start making stuff?”

Dreamweaver has a lot going for it*.

TextMate is a force for greatness.

• As of today, there are no all in one solutions (apps) that reliably the same kind of experience for HTML5, that Flash Professional does for Flash.
• HTML is a fast moving target.
• We can draw or animate (it's markup), but a text editor has no boundaries*.

Are There Any Contenders? Yes:

• Adobe Edge Motion and Interaction Design
• Sencha Animator
• Tumult Hype
• Adobe Muse (code name)

• If you can read.
• If you can copy & paste.
• You can do this.

• Great example at (requires chrome)
  slides.html5rocks.com/#video-audio

Yup, you just copy and paste:

<video src="movie.webm" poster="movie.jpg" controls>
	This is fallback content to display if the browser
	does not support the video element.
</video>

Multiple Sources (better compatibility).

<video poster="movie.jpg" controls>
	<source src='movie.webm' type='video/webm; codecs="vp8.0, vorbis"'/>
	<source src='movie.ogv' type='video/ogg; codecs="theora, vorbis"'/>
	<source src='movie.mp4' type='video/mp4; codecs="avc1.4D401E, mp4a.40.2"'/>
	<p>This is fallback content</p>
</video>

• More info at wikipedia.org/wiki/HTML5_video

• My favorite teaching example is
  Shadowbox.js

You want to add something like this to your site:

All you have to do is:

1. Download the javascript, place in HTML folder.
2. Connect it to your HTML file.
3. Add the following to any HTML image link:

   <a href="myimage.jpg" rel="shadowbox">My Image</a>

Sample File: View, ShadowboxJsDemo.zip

• Great example at (requires chrome)
  slides.html5rocks.com/#canvas-2d

Hey, That's Visual:

// make
for ( var i=0; i<n; i++ ) {
	c.fillStyle = "hsla("+ 10*i +", 100%, 50%, 1)"; 
	c.fillRect( (barWidth + spacing)* i , 0,barWidth,barHeight);
};

• Ai->Canvas plug-in exports Adobe Illustrator to HTML5 Canvas. It's Awesome.

Sample File: View, AiToCanvasProject.zip

Easel.js is modeled after the Flash DisplayList

• Zoe AIR app, swf animations to sprite sheets.
• Pretty quick on a mobile.

Paper.js is modeled after Scriptographer for Ai

• Fantastic demos and tutorials.

Processing.js is modeled after the Processing language

Other Handy Canvas Stuff:

• Great game sprite sheet tutorial with EaselJS.
• Awesome canvas loader animations.
• Meet Seb Lee-Delisle, and his files.

Lettering.js is a force for good

• Has lots of great examples.

Kerning.js is inspired by Lettering.js

Using JavaScript to emulate parallax:

• Jparallax is a handy jQuery plugin.
• It's a great subtle effect - GitHub 404.
• Then there is the Nike Better World project. how?
• And the Volkswagen Beetle Scroll.

Image 1 Image 2 Image 3 Image 4

Richard Bradshaw's CSS3 Tutorials!

• Using CSS3 Transitions, Transforms and Animation
• Simple, robust, hardware accelerated (Webkit).
• The sliding transforms shown above.

Joe Lambert's CSS3 & JavaScript Transitions Link

“This is what the web was supposed to be.”

Modernizr feature detection framework.

jQuery simplifies browser anomalies.

This Presentation will be posted online at:

• http://choppingblock.com/presentations
• It contains all the links and notes you need.

Questions, comments or more info:

• Matthew Richmond - twitter
• choppingblock.com
• portfolio.choppingblock.com
• blog.choppingblock.com
• chopshopstore.com