DVD-Storybook Hybrid Webcomic format



A DVD-Storybook-Hybrid Webcomic, or DSHW, is a special format of online comic, the term being coined by the founder of Dozerfleet on Friday, May 23rd of 2008 around 10:50 PM EDT.

DSHW vs. Traditional
Most traditional webcomics are hand-drawn art that is scanned and then uploaded to the web, with a new scan in a series being added every week. The web shorts and epic one-piece tales that the Dozerfleet founder became interested in creating back in 2005 did not owe themselves well to this format. Inspiration for the DSHW format came from two sources: DVD menus and the Sims 2 Exchange's storytelling pages.

Early DSHW
As stated above, the DSHW format was first inspired by The Sims 2 Story Exchange. That system is pejoratively dubbed "DSHW 0.1," since it has some features in common with the DSHW format but is not true DSHW for the following reasons:


 * While all three versions (0.05 [The Sims 1], 0.1 [The Sims 2], and 0.2 [The Sims 3]) have the basic functionality for storytelling and carry the 3.0 standard of value switching as a replacement for actual HTML navigation, none of the Exchanges have DVD-like menus.
 * Stories on the Exchanges do not possess the option for multiple chapter navigation within a story. Instead, chapters must be published as separate stories.
 * The absence of a DVD-like Main Menu and lack of DVD-like menus for sub-features to a story defeat the purpose of the DSHW 1.0 standard.
 * Cursors cannot be customized.
 * Resolutions beyond 600 x 450 are not yet realized, making comparison with versions of true DSHW beyond 1.0 difficult.
 * No option for rolling credits pages for any Exchange story.
 * No navigation automation options, though page value transition effects are possible and cross-browser-compatible.
 * Use of Flash for technology other than video embedding/streaming

Version 1.0
The first site to be considered for use in the true DSHW format was Gored By Them Things, but the first actual implementation of DSHW version 1.0 was in the 2005 version of The Battle for Gerosha. Other works, such as When Bikes Argue and its sequel, were also made in this format; as were all three of the 2005 versions of the Ciem Trilogy. A slightly-improved version of the format was used for the 2007-2008 version of Ciem.

In 2005, the short-lived "Don't Lose Hope" was an ealy attempt at a semi-automatic transmission system that turned the DSHW into a slideshow. This would give way to the later automation formats specified below. Not all DSHW 1.0-made machinomics had elaborate rolling credits pages; though longer works in later versions are expected to have one.

Version 2.0
The second edition of the DSHW format takes more after the format's influence from The Sims 2 Story Exchange, and was first devised in late August of 2008. While automation is as rare for this version as its predecessor, several changes were made to prepare it for the creation of version 3.0. The first new invention for the format is the use of DIV tables instead of actual TABLE tags in the HTML. This allows for more correct design principle specifications to be made to the story.

Another improvement is in the sizes allowed for images. Instead of an embedded IMG tag on a page to plant an image, the image is the background of a space on the page. Each page has a "glass panel" text box with a semitransparent "glass" plating and opaque text that scrolls on top of it. The panel floats atop the lower one-third of the box upon which the story page image serves as a background, and allows for the image and text to work together like a film clip with subtitles. The result is that images may be significantly more photo-realistic and of a higher resolution while still allowing room for text. Also, the image and text do not dramatically compete for page real estate as they did before. Images in this format, due to the demands of the text box, are in a 1.68 ("5:3," actually 4.97:3) aspect ratio, as opposed to the 16:9 and 4:3 aspect ratios that are typical in version 1.0. Ciem 2 experiments with this by using story images in an 800 x 483 @72ppi format.

Due to automation, DSHW 2.0 comes in three flavors: DSHW-2-A, DSHW-2-M, and DSHW-2-S. The "M" specification would be the most common, as "A" and "S" are for slideshows and fancy DVD script impersonation.

Finally, what makes version 2 truly unique from version 1 is that the navigation hides inside the story image. This further reduces page real estate requirements. Instead, the navigation reveals itself as soon as the cursor is hovered over the region specified for it. Once the cursor hovers away from the navigation arrow's region, it vanishes behind the image. The main menu link behaves in an identical way, so that the reader may be more immersed in the world of the story and less distracted by the navigation.

Version 2.5
With XML and the 3.0 database still a ways away from being developed, DSHW 2.5 is a major revision of DSHW 2.0's code structure, designed to allow for heavy acceptance of CSS3 coding standards and for the possibility of users updating from XHTML 1.0 Transitional DTDs to the emerging HTML5 standard.

New in 2.5 are functions for creating gradient backgrounds, as well as support for much larger image formats. A CSS-drawn film frame, while imperfect in its alignment, replaces the background image film frames that were standard since version 1. Navigation mages are now coded to be invisible until hovered over, as opposed to having to create two images to represent the same navigation option. In turn, this frees up the Spotlight Javascript feature for instances when switching between two images proves absolutely necessary.

Version 3.0
The planned third version of DSHW comes in two main flavors: Basic and Throwback. Specified along with automation options, there are a total of six children that make up the third generation of this format: DSHW-3-BA, DSHW-3-BS, DSHW-3-BM, DSHW-3-TA, DSHW-3-TS, and DSHW-3-TM. The BM and TM versions would be the most common, since the automation in BA and TA are for very special occasions where full DVD script behavior is desired. The BS and TS would also be rare as those semi-automatic versions are only beneficial for short slideshow DSHWs.

What makes version 3 unique is that unlike the previous two versions, there are no actual HTML pages for the Story Page to link to. The navigation simply exchanges virtual page values from a database as commanded by JavaScript. The Chapter Selection Page activates the Story Page and based on the chapter selected, inserts those values. Version 3 may resemble a simple port of the technology to the layout of 2 (Basic) or it may apply it to version 1's layout (Throwback.) Therefore, only the Main Menu, Story Page, and Chapter Selection Menu, and Extra Features pages are actual HTML files. Everything else is either specified in JavaScript or in a value database.

Version 4.0
The theoretical Version 4.0 of DSHW would allow the reader the option to either read with or without the aid of a computer voice reader. Automated flavors would have the computer voice read the story and not offer a text box for manual reading.

As the DSHW format grows more complex, software would ideally be developed to make creation of such sites easy for novice site creators.

Structure
The web stories are hybrids of a DVD's structure with that of a children's storybook.


 * A host of several DSHW sites would exist as a main site. All the individual DSHW stories are sub-sites.
 * The sub-sites for each story consist of a main menu similar to a DVD menu but using Javascript and CSS to function.

Divisions
The Main Menu links to every subdivision of the story's site, which usually consists of the following options:


 * Play Story
 * About
 * Select a Chapter
 * Contact Author, etc.

Style guidelines

 * 1) Each Story, Behind the Scenes, About, and Contact page should have at least one link back to the Main Menu.
 * 2) Story pages should have navigation arrows leading to each other and to other chapters.
 * 3) There should normally be only one story picture to a page, followed by a scrolling caption field of relevant story text or dialog.  This caption field may either be segregated from the story image (1-A, 1-M, 1-S, 3-TA, 3-TM, 3-TS) or floating on top of it (2-A, 2-M, 2S, 3-BA, 3-BM, 3-BS.)
 * 4) The normal story text (narration) is written in (usually third-person) novel format.
 * 5) Active dialog between two or more characters is written similar to radio transcript copy or playwright script.
 * 6) If a character is writing something in a diary (to allow acceptable breaches of the fourth wall,) then conversation between that character and the diary (the reader's avatar) is italicized.  The name of the character is centered and placed above the italicized text of their writing.
 * 7) If a character is communicating dialog to another through an electronic medium (TV screen, cell phone, radio, etc.) then the dialog is italicized.
 * 8) This rule applies to use of megaphones as well.
 * 9) Microphones need not be italicized, unless the microphone's amplified sound is then transfered through an electronic medium.  In other words, a live broadcast of a presidential speech should be italicized, but a minister delivering a sermon in his home church need not be italicized; assuming the event is live and the story's point-of-view during the moment of the sermon is of characters present at the location of the live event.
 * 10) Example: When Arfaas believes Musaran to have lost control, he warns his troops over speaker systems.  This should be italicized.  However, none of Wilbur Brocklyn's sermons in Ciem 1 need to be italicized.
 * 11) The two main formats of text (narration and dialog) should alternate, based on paragraph fields within the &lt;p&gt; and &lt;/p&gt; tags.
 * 12) Paragraph types are determined by the P tag class names they are assigned in the HTML, as defined in the site's CSS.  Commonly, "dat" for "data" may designate narration as can "n." For dialog, "dia" or "q" for "quote" is acceptable.
 * 13) Speakers in dialogue paragraphs should have their names boldfaced and underlined.  This can be done with B and U tags, but should ideally be done by placing them inside of an "sp" or "speaker" class of SPAN tag.

Automation
DSHW sites may have different "transmissions" built into them, based on the site (and designer's) needs. These automation standards define how the site navigates in relation to the desires of the reader/user. The three types of automation in a DSHW are Fully-Manual (M,) Semi-Automatic (S,) and Fully-Automatic (A.) Currently, the defined manual standards are 1-M, 2-M, 3-BM, and 3-TM. The current-known semi-automatic standards are 1-S, 2-S, 3-BS, and 3-TS. The automatic standards, likewise, are 1-A, 2-A, 3-BA, and 3-TA.

Manual navigation
The most common form of navigation for a DSHW is the fully-manual system. Under this system, nothing happens on any page unless it is called for by the user. Text only scrolls when the user tells it to scroll. Pages only navigate when told; and there is no limit to how long a page may be displayed before another page takes its place. The DSHW format was founded using this standard, and most Dozerfleet DSHW sites in production employ it.

Automatic navigation
In the fully-automatic standard, the site behaves like a DVD more closely. The Main Menu will allow the user up to three minutes to choose an option before defaulting to the "Play Story" option. If another option is chosen, then that option will lead to other menus. Those menus lead to subfeatures whose text scrolls in a marquee field upward at a predefined pace. Once each piece's text is finished scrolling in its marquee field, then the page refreshes back to the submenu from which it was selected. The user may then select another feature or return to the Main Menu.

If the Play Story option plays, then story pages will navigate according to how long their text feeds take to marquee. It is assumed that the reader will be able to keep up with the pacing of the marquee field. Ideally, the automation may be paused at any time by hitting the "Stop" button on the browser. Navigation arrows will allow the user to manually shift direction in spite the navigation being automated.

META tags will be used to instigate the automation process, and will ideally work in all standard browsers. Dozerfleet currently has no fully-automatic DSHW sites in production.

Semi-automatic navigation
Similar to fully-automatic navigation, the semi-automatic standard applies the automation to the story pages only. All other parts of the site are free of timers and operate on a fully-manual standard. The "Don't Lose Hope" faux-video slideshow was the first semi-automatic DSHW to be produced by Dozerfleet, and is the only one currently known to exist.

Story picture dimensions
The different formats of DSHW encourage different image sizes for their use. Below is a list of image dimensions by format, and a history of their use.

1.0 dimensions

 * Small: These images are 300 x 225 @72ppi, and are best if viewed on small-screen devices such as an iPhone. The 2005 version of The Battle for Gerosha was made in this format.  The remake is expected to be a much-larger format.


 * Moderate: These images are 400 x 300 @72ppi. Both the 2005 and 2006 attempts at Ciem were made with this standard.  Since 400 x 300 is considered the standard Sims 2 machinomic output size, this format is encouraged for fullscreen-format DSHW sites.  Often, the 400 x 300 size is to be expected on The Sims 2 Story Exchange.  It is a standard size for photos taken with the in-game storytelling camera.  The game's "large" setting is usually 600 x 450.


 * Moderate Widescreen: Also known as "Dozerfleet Widescreen," these images are in a 500 x 282 @72ppi resolution setting.

Note: Ciem was remade in 2007 using this size. Since the first story was made with snapshots taken inside the game instead of with the PrintScreen button, shots were originally shot by the game in a near-1280 x 720 frame that was upgraded automatically by the camera to a near-1280 x 1024 frame. The game then reduced the footage of its forced-fullscreen image to 600 x 450. The 600 x 450 images were then edited in Photoshop for effects and color correction and were cropped to 500 x 282. Since Ciem 1 was completed all future shots are designated to be the job of the PrintScreen button. As a result, shots are now deflated in size from 1280 x 720 to 500 x 282 or cropped, depending on needs. Aspect ratio conflicts no longer come into play for this form.


 * Large: Images in Sims 2 game's default "large" camera size of 600 x 450 @72ppi.  So far, no DSHW by Dozerfleet has been produced in this format.

2.0 dimensions

 * Basic Hybridscreen: No DSHW has been made in this definition yet. The specs call for an image that is 600 x 360 @72ppi. The lowest third of the image, at 120 pixels in height, would be the area for the text panel. This is the smallest legal size for DSHW 2.0, given that text is encouraged to be in larger font sizes than in 1.0.


 * Large Hybridscreen: This format allows for images that are 800 x 483 @72ppi. This is the standard size for the 2.0 format and the official size of Ciem 2.


 * "HD" Hybridscreen: This format allows for images that are 1190 x 720 @72ppi. Currently, this is not a recommended resolution for most web browsers. Most early 3.0 DSHW's will may experiment with this format. It is currently the IMAX of the DSHW webcomic format. This resolution is not recommended for users of The Sims 2, but may be of interest to users of its sequel.

3.0 dimensions
Until version 3.0 can be implemented, its sizes remain theoretical. However, a practical resolution size should be equivalent to the largest sizes offered in version 2.0. Version 4.0, likewise, would be a story image in true high definition. The key difference between 3.0 and 4.0 is the optional inclusion of sound.