Simon White

Animated Full Stack Agile Multimedia

Web Development for Media Projects

An agile approach to developing media-heavy, graphics-rich, animated multimedia that runs in standard Web browsers. Deploy a server immediately, don’t compromise content or accessibility, and use standardized coding for low maintenance overhead.

Example Product

Braindozer is an example of multimedia created with this approach.

The Braindozer car is a blacked-out seventies Mustang that has been hot-rodded with a gigantic engine and hood scoop that protrudes through a hole in the hood of the car and extends well past the height of the car’s roof. The car is parked in a hero pose that shows us the front and left side. A label on the fuel cap informs the driver that the engine runs on four-twenty only, but the Braindozer car is a zero emission vehicle because the exhaust is routed into a holding tank in the trunk when driving, or into the cabin when parked. The LED running lights come on and flash a decorative pattern as the engine fires. We see a giant spark through the front grille and the rotors on the front of the protruding engine align themselves and then spin furiously in tandem, their kinetic energy causing the car to bounce joyously on its high-performance shocks. The LED headlights light up, glowing pale green to cut through the fog coming off of San Francisco Bay. When the audio player is activated by choosing a song, an antenna telescopes out of the rear of the car so that music can be obtained from the Braindozer server via wireless networking, and a callout appears above the car that shows us the audio player interface from inside the car. The audio player has old-school analog dashboard gauges with pointers that move to inform us when songs are loading and playing and describe their meters and tempos. As a song loads, the loading meter sweeps across its gauge. When songs are playing, the playing meter crawls across its gauge to describe the full length of the song. The car’s running lights also flash random decorative patterns as songs load. When the music begins, the car’s wheels begin to vibrate and we see that they are audio speakers, their cones moving a little or a lot based on the ever-changing amplitude of the audio playback. When the audio levels peak, the car bounces up and down on its shocks like it’s dancing. As the engine continues to run, it starts to glow yellow-orange through the front grille, and the cabin starts to fill with ethereal green light and smoke. Over time, the engine glows hotter and hotter until the front grille and the hole in the hood glow bright red. Desperate for oxygen, the hood scoop on the top of the engine opens up its 3 air intakes and we see the red glow of the engine escaping there, too. The green light in the cabin gets brighter and the cabin smoke gets thicker. Now you’re riding with Braindozer.

Architecture

Start with an empty Web server, layer on ISO media, required front-end and server-side code, and 2 layers of optional front-end code.

Layer Technology Required Function
5 JavaScript ES5 DOM Scripting no application characteristics like interactivity, media playback, audio mixing, database requests
4 CSS level 3 + SVG no defines animations, 2D/3D transforms, fills, strokes, typography, more
3 HTML with inline SVG and PHP yes builds a graphics-rich client DOM from server databases
2 AppleScript Mac Automation Scripting no connects media workflow output to the server so that audio, video, and photo files are published from custom menus within content-authoring tools like Photoshop or iTunes
1 UNIX httpd yes server box
conceptual layers of Web multimedia technology

Guidelines

Build from layer 1 up to layer 5 while always maintaining a functioning app that everyone on the team can always refer to during the entirety of the project.

Layer 1

Layer 1 is the Empty Server. The blank page of WorldWideWeb.

At the end of layer 1, the Braindozer multimedia Web application shows in a Web browser as an empty server index.
Layer 1: the blank page

Layer 2

Establish live content workflows that output media files directly to the server so that content creators can easily make and remake media files throughout the project.

At the end of layer 2, the Braindozer multimedia Web application shows in a Web browser as a server index of ISO audio files along with JSON databases of the audio metadata.
Layer 2: minimalist jukebox of ISO media

Layer 3

Build a multimedia Web app that doesn’t require CSS or JavaScript so that it is easily viewable by humans using any kind of Web browser including screen readers, and easily digestable for robots such as Googlebot, so that the basic content is always available to everyone under all circumstances.

At the end of layer 3, the Braindozer multimedia Web application shows in a Web browser as a plain, unstyled page with inline vector graphic, inline text content, and hyperlinks to ISO audio files.
Layer 3: naked view of the basic content

Layer 4

Progressively-enhance an already-functional multimedia Web app with CSS level 3 + SVG. Add colors, typography, responsive layouts, multiple-resolution images, fills, strokes, transforms, and so on to enhance usability.

At the end of layer 4, the Braindozer multimedia Web application shows in a Web browser as a styled page, with colors and typography and layout and buttons that hyperlink to ISO audio files.
Layer 4: responsive styling and layouts

Layer 5

Progressively-enhance an already-functional multimedia Web app into animated multimedia with JavaScript. Add 2D/3D animated transforms, inline interactivity and media playback, access to databases, and whatever else your imagination comes up with.

At the end of layer 5, the Braindozer multimedia Web application shows in a Web browser with 2D/3D animated transforms, animated color fills, animated buttons that activate an interactive Web Audio player with audio metadata and animated audio visualizers.
Layer 5: blossom into animated multimedia

Iterate

Continue to iterate on your multimedia layer by layer or improve the entire stack as a whole, as required.

Launch

At some point, declare your multimedia ready to “launch” and market it through advertising and social media and so on.

Live

Continue to maintain or iterate on your post-launch multimedia according to project needs and goals.

Author

Simon White

Last updated .


Keywords: artist, animator, designer-developer, agile, agile-developer, agile-development, full-stack, developer, coder, graphic-artist, web-animator, illustrator, adobe-illustrator, photoshop, adobe-photoshop, vector-graphics, raster-graphics, pixel-graphics, bitmap-graphics, wacom, mac, macintosh, apple-mac, unix, animation, artwork, code, digital-pen, digital-pencil, digital-ink, hand-drawn, hand-coded, handmade, interactive, html, svg, animated-svg, html5, css3, es5, unobtrusive-javascript, dom-scripting, responsive-animations, responsive-layouts, w3c, iso, audio, classlist, cssanimations, csstransforms, csstransitions, eventlistener, inlinesvg, json, opacity, preserve3d, queryselector, requestanimationframe, rgba, webaudio, xhrresponsetypejson.