DVD-Storybook Hybrid Webcomic

From Comixpedia

Official icon of the DSHW webcomic standard

A DVD-Storybook-Hybrid Webcomic, or DSHW, is a format of online comic that emphasizes websites with single pages navigating like storybook pages amongst each other yet linking back to a main menu that is stylized similar to a DVD menu. While the format is ideal for photocomics, it is equally ideal for creating machinomics. The term "DSHW" was first coined on Friday, May 23rd of 2008 around 10:50 PM EDT.

[edit] Content

DSHW in its version 1.0 form is a webcomic in which there is one large picture per story page, referred to as that page's "story picture," surrounded by a navigation system and bearing a "caption box" to the right (English orientation), left (Hebrew/Japanese orientation), or bottom (any orientation) of the story picture. Version 2.0 allows users the option to have the text box be part of a semitransparent "glass panel" that floats atop the lowest third of the story picture. The way it would read would be similar to reading subtitles in a film.

Each story page has a "Previous Page" button (except for the very first), a link to the "Main Menu," and a "Next Page" button (except for the very last page or the Credit Roll page.) More advanced stories may contain "Previous Chapter" and "Next Chapter" buttons as part of the navigation structure of a story page. In version 2.0 and onward, the option exists to have the navigation hidden in parts of the image and made visible upon hovering the cursor over it.

In keeping with the DVD design, DSHW's are self-contained stories suited for telling single compilations. They may link to other DSHW's for the creation of story franchises. The Main Menu pages of these types of comics may include a "Play Story" or similar option, a "Chapter Selection" option leading to a chapter selection menu, any number of Special Features-like pages; and may even include contact information for viewers to reach the comic's creator.

Text within the caption box may contain any number of formats of text, depending on the types of paragraphs the writer chooses to use. Usually, a narration interrupted by a dialog transcript is the recommended way to indicate origin of dialog, but other methods exist.

At the end of the normal story pages, the last story page may optionally link to a Credits page that lists everyone whose work was of use to the story's creator. These are usually designed to mimic the rolling credits at the end of a motion picture, with a link at the bottom of the credits that leads to the main menu.

The picture and caption box (or semitransparent glass panel) on each story page are set up to be in the center of the viewing window. There may be a thematic background, if desired, to help draw in the reader in to the universe of the story.

[edit] 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.
   1. This rule applies to use of megaphones as well.
   2. 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. When a man warns his troops over speaker system, this should be italicized. However, a preacher's sermons need not be italicized.
8. The two main formats of text (narration and dialog) should alternate, based on paragraph fields within the "P" opening and closing tags.
   1. 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.
9. 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.

[edit] 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.

[edit] 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 true DSHW sites in production employ it.

[edit] 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 sub-features 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 sub-menu 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. No fully-automatic DSHW sites are currently known to be in production.

[edit] 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. Very few of these have ever been made, but the slideshow principles have been applied to other website formats ever since auto-redirects were invented.

[edit] Software

DSHW's are traditionally designed in (X)HTML, with JavaScript and CSS to assist with design. Story images are almost (but not always) JPEG files, and navigation usually consists of rollover-animated GIF files. Encoding provided, special text characters may opt in the place of images, and be rollover-animated with CSS properties. While more difficult to design, Flash variations of DSHW are possible. However, true DSHW is considered to be that which only uses Flash for embedding and/or streaming video and audio feeds. All page and navigation content should be part of the dynamic XHTML setup.

[edit] Comparison table

[edit] History

A clip of Ciem: The Human Centipede Chapter 19, Page 1, as it appears on the Sims 2 Story Exchange, a predecessor format to the DSHW webcomic.

[edit] Early history of DSHW

The DSHW format's title and overall look are the standard format used by the operator of Dozerfleet Productions for the comics division Dozerfleet Comics. Ancestors to the DSHW format include several earlier variations of webcomic format, but dealt mostly with Sims-based machinomics. Many creators of such machinomics beforehand relied on trying to mimic the look of the family storytelling albums inside copies of The Sims. When The Sims 2 came out in 2004, numerous parties of Sims storytellers took advantage of the Flash-enhanced Sims 2 Exchange on the official Sims 2 website put out by Electronic Arts as a place to publish stories about their Sims.

The Exchange did not please all Sims comic writers, however, as the site indiscriminately published their works of art and fiction alongside tutorials and stories of very low sophistication. This led many of them to publish their works to independent web hosts. One of the earliest Sims machinomics to be hosted outside of the Exchange was the MLEK series Arrendale Heights, a soap opera about an orphan who ends up working at a corporation with plenty of dark secrets to go around.

Arrendale Heights, however, used multiple panels of images and text that wrapped around each other to tell the story. In 2005, the founder of Dozerfleet began experimenting with Sims comics to create a Sims novel called The Battle for Gerosha. Not content with having a wrap-panel layout like Arrendale Heights, the earliest DSHW's were formed. The Dozerfleet founder decided to use a format similar to the one on the Sims 2 Exchange, but different enough to be easily customizable by theme. The new format for webcomic was also supposed to allow for DVD-style navigation.

Inspiration for navigation designs came from the Spider-Man film franchise, and the DVDs released for those films. By 2008, the term "DSHW" was coined as a way to describe the new format with specificity. While the DSHW format was created with Sims machinomics in mind, it is just as useful for machinomics made with screenshots from other games, and for photocomics.

[edit] 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 lowest 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. Experiments with this version may include use of game screenshots in an 800x483 pixel format. Due to automation, DSHW 2.0 comes in three flavors: DSHW-2-A, DSHW-2-M, and DSHW-2-S. The "M" specification is the most common, as "A" and "S" are for slideshows and fancy DVD script impersonation.

What makes version 2 truly unique from version 1 is that the navigation may hide 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.

[edit] Version 3.0

What would make 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.

The planned third version of DSHW comes in two main flavors: Basic and Throwback. Version 3 may resemble a simple port of the technology to the layout of version 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. 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.

[edit] 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.

[edit] 1.0 dimensions

• Small: These images are 300x225 pixels, and are best if viewed on small-screen devices such as an iPhone.

• Moderate: These images are 400x300 pixels. Since 400 x 300 is considered the standard Sims 2 machinomic output size, this format is encouraged for fullscreen-format DSHW sites. Often, the 400x300 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 600x450.

• Moderate Widescreen: These images are in a 500x282-pixel resolution setting. Since this size is not common elsewhere, images may have to be interpolated and/or cropped to achieve this setting.

• Large: Images in 600x450.

[edit] 2.0 dimensions

• Basic Hybridscreen: No DSHW has been made in this definition yet. The specs call for an image that is 600x360. 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 800x483. This is the standard size for the 2.0 format.

• "HD" Hybridscreen: This format allows for images that are 1190x720. Currently, this is not a recommended resolution for most web browsers. Most early 3.0 DSHW's may end up experimenting with this format. It is currently the IMAX of the DSHW webcomic format. This resolution is not recommended for users of The Sims 2 or other 2004-era machinomics-capable games, but may be of interest to users of its sequel and of other games made in 2009 and beyond.

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.

[edit] External links

• Original article at DozerfleetWiki on DSHW format.