What you need:
– Basic knowledge in HTML and CSS.
– A Mac and Xcode (no programming skills required) for exporting the app.

HTML Structure

Take a look at the code of the “Starter Pack”. For better understanding every element is commented.

Here I’ll explain the basic structure of a dossier HTML file.

The head section

The <head> section includes meta descriptions, the title and javascript & css references.

What you need to know:

  • The content of the <title> tag is displayed on the loading screen of the iOS-App.
  • Every dossier has it’s own stylesheet, which is stored under “styles/dossiers/”. All dossier specific styles are saved in there. Why an extra stylesheet? Because it’s tidy!
  • For information regarding javascript-plugins being used, see “JS-Plugins”.

The main content

The main content consists of three parts:

1) The dossier picture.

Every dossier has it’s own start picture. It is resized automatically depending on screen size and orientation. Please note that some parts of the image will be cropped on different screen sizes. Refer to “Download” for a start picture template. The markup of the start picture looks as following:

<!--Dossier start image-->
<div class="dossier-start-bg">
<!--(if you want to place something on top of the picture, place it here-->
</div><!-- Div dossier-start-bg-->

If you want to place pictures, a headline or other content on top of the picture, just put them between the <div> tags.

Important: Dossier background pictures must always be saved as a “progressive JPEG”. Otherwise they won’t resize on iOS devices.

2) The content area

That’s where you place all your dossier content, like texts, articles, images and so on. Content is always described in small “modules”. A module is almost always enclosed by a “content-element”, which enables the correct margins for each screen size and orientation. Everything that’s inside a “content-element” will be aligned to the grid.

<!--"content-element" ensures, that content is placed within the right margins-->
<div class="content-element">
	<div class="dossier-text-left">
		<p>Some example Text.</p>
	</div><!--Div dossier-text-left-->
</div><!--Div content-element-->

Inside the “content-element” there is a module called “dossier-text-left”. It describes a regular text, which is slightly placed to the left of the page. The text’s width will scale accordingly to different page widths.  For detailed explanation of each module, see section “modules”. The amount “content-elements” and modules on one page is not restricted. A “content-element” can even contain multiple modules (with the exception of the module “slideshow”, which shouldn’t be placed inside a “content-element”).

3) The footer

The footer is stored in an external file called “footer.html”. It can be found in the folder “inc”. The content of footer.html will be included on all pages. You can either customize the footer throughout the whole publication or add additional lines in the dossier files.

Laker is now on github! Please discuss issues, suggestions or tipps in the github forums of Laker. Thanks! ;)

8 Responses to “HTML Structure”

  1. I’m curious about provisions for having different photos for horizontal and vertical formats.

    Since you have different CSS for horizontal and vertical, there should be a way to change the image depending on orientation. I assume there’s a JS trigger somewhere, and I could throw in some JS code to switch all tagged horizontal photos to vertical photos?

    For example, if all vertical version of photos are named, e.g. myphoto-v.jpg, then when the orientation changes, JS dynamically replaces each photo with its vertical version.

    I assume I could drop in jQuery, or something like that, if it isn’t already there.

    Any help appreciated.

    Like others, I’m trying to create a good, solid photo book!

  2. David, you can use different images for different orientations by putting a different background image in under the different media queries in the css file attached to each page. They’re already commented, as ‘portrait’ and ‘landscape’. It works great. Hope that helps.

  3. cool

  4. Are there provisions in Laker/Baker for housing multiple issues within one “container app” with app purchasing of additional issues? We’d like to be able to offer the app for free with some teaser content, then charge for each “full” issue. Thanks so much.

  5. Take a look at the Baker forums. They will it announce there, when the feature is available.

  6. First, it might be helpful to set up a Google Group so we can all discuss solutions and experiences.

    Second, I have added a .png file that is sitting on top of the dossier picture however it is not resizing when I send to an iPhone. Am I adding something to the CSS of each dossier to accomplish this?

    Thanks,

    Michael

  7. I found the answer in the cover .css file.

  8. ok great, there is a git hub forum.

Leave a comment, suggestion or question.

You must be logged in to post a comment.