Web Development for Multimedia 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.
Braindozer is an example of multimedia created with this approach.
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.
|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|
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 is the Empty Server. The blank page of WorldWideWeb.
- create a new virtual development server instance and install your development template or allow the server to auto-generate an index at first
- create a domain name for the server and share the link with everyone who is involved with the development and production of the multimedia so that everyone is literally on the same page at all times
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.
- load the server with media like it is a jukebox, organizing it as simply as possible to simplify hyperlinks and mirroring to a Content Delivery Network
- audio video content can be managed in iTunes for Mac and published to the server along with generated code such as JSON metadata using a custom AppleScript menu command
- photos can be published by dropping them onto an AppleScript application that uses Photoshop to generate Web-ready versions to the right specification, then puts them onto the server along with generated code such as an HTML index
- a simple custom AppleScript menu command for Photoshop or Illustrator can export the current image to the right place on the server, in the right format, in one step
- publish ISO media (MPEG-4 and JPEG) for universal playback with minimal hardware impact and for compatibility with content workflows
- write HTML with inline SVG to add graphics and inline PHP to add server-side commands
- try to use just one PHP file so that everyone can read all of the HTML and SVG in one place, and so that developers can read all of the PHP in one place
- use queries to create pages and a hyperlink design if making more than one page
- optionally incorporate media content from layer 2 by hyperlinking to the media files themselves so they can later be progressively-enhanced into media players and slideshows
- draw SVG with a vector graphics tool and a pen in order to save considerable time and produce much better work output compared to any other method
- name vector groups and vector objects with id-safe names because you are essentially drawing HTML
- define your SVG viewport by drawing a rectangle at the bottom of the layer stack that is the same size as the artboard/canvas in your vector graphics tool so that your exported SVG code is written relative to the viewport and is simpler and easier-to-manage (you can remove or hide this rectangle after export)
- merge your exported SVG document with your HTML document and treat the svg tags like any other HTML tags
- connect your server to other servers like Facebook or YouTube or Bandcamp as required
- write and validate your HTML5 strictly to W3C specification so that it can be maintained by pretty much anyone who can read the specification or the many articles documenting the specification, reducing your documentation overhead and future maintenance burden
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.
- try to use just one CSS file so that everyone can read all of the CSS in one place
- create a layout for the smallest phone and then enhance that layout for multiple larger screens with media queries
- write and validate your CSS level 3 + SVG strictly to W3C specification so that it can be maintained by pretty much anyone who can read the specification or the many articles documenting the specification, reducing your documentation overhead and future maintenance burden
- enhance hyperlinks to ISO media into slideshows and media players that root the user in the current page instead of sending them out to the media file
- dynamically apply or remove CSS level 3 + SVG classes to create interactivity or animations or advance the story
- when your script is going to modify the screen, use requestAnimationFrame as much as you can in order to synchronize the changes with the animation clock and get smoother, more-reliable animations with less resource use
Continue to iterate on your multimedia layer by layer or improve the entire stack as a whole, as required.
At some point, declare your multimedia ready to “launch” and market it through advertising and social media and so on.
Continue to maintain or iterate on your post-launch multimedia according to project needs and goals.
Last updated .