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

How to use

Laker is a compendium of files, styles and tips for designing digital publications in HTML5. This development guide shall help you solving some of the common problems when designing and building a digital publication with HTML5. It provides you with all information about files, scripts, styles etc. used in Laker. If you have any suggestions, questions or solutions, don’t hesitate to comment!

Laker is built for used in the “Baker ebook framework“.  It basically reads a bunch of HTML files, displays them one after another and wraps them in an iOS-App. Designing pages and adding interactivity is all done in HTML5. That makes it more accessible and cheap to develop, because you do not need any proprietary software.

Laker includes a set of HTML files and styles which are built with the “Less Framework“. It makes designing with multiple columns easy and the automatic resizing to the screen size possible. Preconfigured styles are sorted into “modules”, which a are HTML and Javascript code snippets for achieving a specific content or interactivity.

Laker is a starting point for your digital publication in HTML5. You will need HTML & CSS knowledge to produce a publication.
Now have fun and start building! ;) And be sure to let me know what are you producing with it, so I can showcase it here! Thanks!

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

107 Responses to “How to use”

  1. The idea is good… but you need to fix the pack for kaychain. Your key is setted… You can try to make something like a wizard as Phonegap
    Nunzio

  2. Thanks for pointing that out! Fixed!

  3. it’s perfect now

  4. Kaychain still seems a problem.

  5. Hm, that’s strange, Mesut. Could you clear your cache and download the package again?

    Another solution: In xCode » Right Click on “Target” » “Get Info”. There you can change the Code profile.

  6. Good job thank you

  7. Nice information, i´m going to try it.

    thanks

  8. Awesome job, but i like to see improvements on the desktop version and please fix the problems with IE.

  9. Hey Antonio,

    thanks! ;)
    If you find some solutions for the problems in IE, please let me know! ;)
    I’m busy the next few days, so I won’t have much time to dig in that much!

    florian

  10. I was wondering if would be a good idea use conditional classes or tell the users “Please Stop Using IE – Thousands of designers and developer in the world will be grateful” jajajaja

    I keep looking!

  11. Nice joob ! Just a question: I added ‘dossier 04′ (html, css, image). It’s working. Then I also change the toc.html file (adding my new dossier link) but it doesn’t appear (when I tap 2 times on my ipad….)
    So is it possible to add another dossier?
    Thanks again it’s great !!!!

  12. Hey Kris,
    did you flushed your cache? Sometimes xCode gets confused with all the files… ;)

    Second tip:
    Did you added another DIV for the new page in the TOC? If so, then you have to adjust the width of the iPad-TOC in the stylesheet: nav.css, line: 298.

    Hmm I probably should write a page about the TOC… Will do that!
    Thanks!

  13. This has saved me so much time, thank you! Very good

    Code needed a lot of work though, lots of un-closed tags/CSS rules, duplicate Ids etc. Surprised it it seemed to work with no problems, but it did, spend a few hours cleaning it all up anyway.

    Also.. Its NOT HTML5. It’s all written in XHTML!

    But thank you very much, you have probably saved me a few weeks work!!!

  14. Could you explain me how to properly upload to a server ? or why the Swipe and DoubleTap it´s not working? and Cai is right.

  15. Hey everybody!

    Could you provide more information about the unclosed tags, so I can fix them? Please drop me a mail: florian@lakercompendium.com instead of using the comments (so it doesn’t get messy ;) )

    @Juan: Just upload the files to a webserver. The DoubleTap and the Swipe are features of the xCode-App, not the HTML & CSS Files. So, without the App there is none of these functionalities.

  16. This is amazing. I love globalization! Thanks for making this free!

  17. I have followed the ideas on Baker, Laker, etc. a bit, with the idea to do something like “Interactive photobooks”, i.e. putting photos and videos, possible text inside.
    Intention is for personal use on my device and maybe give it away to “iOS-enabled” friends.
    For this, compiling and publishing an app seems to be “too much” (and you need a Mac and an Apple Dev. account)
    Do you have any ideas on alternatives, e.g. making use of a (local) webserver, or having the info packaged as a file and viewing it in Safari – would that work ?
    With kind regards,
    Erik

  18. Hey eric,
    what exactly do you need? A portfolio? There are some Portfolio-Apps out there, which you can fill with your own images. Maybe thats something…
    http://ipadportfolioapp.com/
    florian

  19. Thanks for the link. Looks nice, but only a first step.
    Actually I would like to go more into the “magazine” style, i.e. I want to define the position of photos (possible more than one on each page), or have a means to zoom into some detail (in fact exchanging the photo) by clicking on “something”.
    Some features are nicely displayed in the “PROJECT” App which has been available for free a while ago.

    Thanks also for the fast answer.
    Erik

  20. that’s all possible with HTML, JS and CSS. You not have to use the Baker Framework when using Laker. But then you have to figure out some way to do the page transitions.

  21. Hi, cool publishing tool.

    Is it possible to maybe use this vr viewer?
    http://krpano.com/iphone/

    jonas

  22. Hey Jonas! Cool Stuff! Could you try it and tell me how it goes? I think it could interfere with the page swiping, so it can’t fill the whole screen… But besides that, it should work!

    Florian

  23. Thanks for sharing this!

    Also..

    > A Mac and xCode (no programming skills required) for exporting the app.

    It’s Xcode, not xCode.

  24. Thanks! Fixed!

  25. Hi,

    Just uploaded the files to my server to view on my iPad. It looks great, my only concern is that the links to Next Dossier link and cover page at the top of the page are not being displayed.

    Is the a fix for this?

    Thanks

  26. Impresionante trabajo! Vamos a ver que somos capaces de hacer para un iPad.

    Saludos

  27. Hey Mitesh,

    Laker is optimized to work in combination with the app on iOS-Devices. You can enable the navigation arrows for IOS-Devices via CSS, but I assume it will not display correctly.
    Other way: Implement some links or arrows at the bottom or top of the document and link them properly.
    cheers

  28. hi florian, just a single question, would be possible to set lets say a first page that will load elements from a server? i mean, could i set information for users to check on dialy basi?, we are looking for implement a campus digital maganize, and we woukd like to display events and news for students be able to check em once they open the app on their iphone/ipad… thanks so much!!

  29. Hey Andrew,

    theoretically yes. I accomplished a dossier where some information is pulled from a server and inserted via javascript. iFrames are not (yet) possible. But this should be the easiest solution.

    cheers,
    florian

  30. Thank you so much!

  31. moin florian,

    sag mal gibts das ganze auch in unserer muttersprache? :)) das wäre der knaller ;)

  32. Hey Michel,
    nope, sorry ;) Aber das hier geschriebene Englisch ist nicht soo schwer ;)

  33. hey!

    really great work!!! congratulations! i’ve been waiting for this for a long time!!
    my question: will there be a kiosk mode in the future? so i can choose from different magazines. that would be really great!

    is there a possibility to store the “book” folder on a webserver?

    thanks for your reply!
    christoph

  34. Hey Christoph,

    we’ll see. Nothing is planned at this moment. Maybe the Baker Guys will implement the feature.

    Good question about the book-folder… Maybe you could modify the xcode project that way… hmmm… Could you try to do that and keep me updated? ;) Thanks!

  35. hey florian!

    thanks for your reply!
    i will try to move the book folder to the web. i hope to be successfully ;) i give you an update as soon as possible!

  36. Hey Florian,
    Could you publish a kind of user guide ?
    I just bought a mac (and download Xcode) but i didn’t manage to export my app.

    Best regards,
    Robin !

    (Ps : Great Job !!)

  37. Hallo,

    is it possible to change/reload the TOC-File on an iPad via a javascript-Function in the content-area?
    Thanks for your help
    Marko

    —–

    Hallo,
    ist es möglich die TOC-Datei auf einem iPad neu zu laden – über eine Javascript-Funktion im oberen Contentbereich? Bin noch Anfänger im Umgang mit dem Framework und habe es vielleicht nur deshalb noch nicht herausgefunden. Vielleicht könntest Du mir auf die Sprünge helfen, mit einem kleinen Tipp.
    Zum Hintergrund: Bin inzwischen so weit, dass ich ein kleines Lokalmagazin erstellt habe samt Kiosk. Aber genau für diesen Kiosk müsste ich je nach ausgewählter Magazinausgabe immer neue, zum Magazin passende Inhaltsverzeichnisse in die Navigation laden. Nur komm ich irgendwie nicht drauf, wie es gehen könnte.
    Danke sagt
    Marko

  38. Hey Marko,
    for all following conversations, please use the github forums of laker. It’s more “discussion” friendly. The Navigation bar is displayed via xcode and (at the moment) can not be altered via Javascript (at least I don’t know a way). Try to post it in the forums, maybe someone else can help! ;)
    florian

  39. Hey Florian, still very cool stuff you do there. It becomes popular even in the philippines. Now then, I really would like to get a step-by-step tutorial from the moment the package is downloaded until all my profiles are included and the things exports properly. Baker and other Xcode files always work perfectly in this, laker makes me go beserk as it somehow overwrites / leaves out my own developer profiles. Now due to the changes to the new Xcode layout I am completely lost. Any thoughts?

  40. Hmm that’s strange… Where or when are these profiles get overwritten?

  41. Hi Florian: It’s a solid publication for iPad. however, How to skip the loading time or speed up the performance between the Dossiers? It’ll be the critical issue.

  42. Hey Joe,
    you can contribute by customizing the App! Would be cool to achieve the things you said! ;)

    cheers,
    florian

  43. How’s the iframe update coming along? ;-)

  44. It works, but I have to test a few more things.

  45. Hi,

    great work, congratulation.

    One Question: I did some pdf-files in the “book”-folder and made some Links to this files in the 03.html-file. But the app doesn’t open it. Xcode says: “Current Page IS NOT delaying loading –> handle clicked link: file:///var/mobile/Applications/158EBAC9-5F9E-5F11-BCE1-blablabla/new.app/book/dokumente/new-file.pdf”

    How can I open PDFs in the app. Thanks everyone for some help.

  46. Hey firstly cool work, secondly can you let me know how to change the loading screen… I assume it is in the RootViewController.h… I basically want to change the bg color to white… regards J

  47. Thanks to Folletto for the following answer to my question:
    On Baker, yes, open the file RootViewController and you’ll see a few configuration constants at the top of the file, two of them control the background: SCROLLVIEW_BGCOLOR and PAGE_NUMBERS_COLOR. :)

  48. Hey froesch, please post the issue in the baker site on github. Thanks!

  49. Is there any way to do simple user interactivity/data collection? For example, a simple travel guide where users would put a check in a box on pages of places they wished to visit and there would be a page at the beginning showing all those places they checked displayed in a list.

  50. Yeah why not. Maybe HTML5 Local storage can do the trick.

  51. does it suport in app purchase, for multipple issues?

  52. Nope, not yet. Check for the Bakerframework, these guys must include it…

  53. Do HTML5 localStorage work and Web SQL work when wrapped inside Baker/Laker?

  54. Could you try it and tell me how it goes? To be honest, I don’t if its going to work.

  55. Thanks, florian. I will dig into HTML5 local storage when I get some extra time and report back.

  56. Any update? When the New 2.0 (iFrames included) will be released?

  57. Hey Joe,
    I’m in contact with the Baker guys to see if a release makes sense before Baker 3.0.

  58. hi,
    great work. Just one question: why don’t support normal websites? In my eyes “responsive website design” should support all devices, which includes normal websites, doesn’t it. It could be a great idea to settle up an normal website or blog as a real magazin. What do you think?

    Cheers. Gerhard

  59. Laker is not about pureley about responsive Web-Design. It’s about creating a digital publication for iPad and iPhone. Development of a website and a publication requires a different approach.

  60. Great work! But one question: If I klick a link in the Laker-Demo Safari starts and Laker ends. If I come back to Laker it starts at the page with the link. It is possible to modify Laker so it starts at start page again?

  61. hmm, I think you need to post that question in the Baker-Forums on Github, because it’s somewhere configured in xcode.

    cheers

  62. Hi I am New to this… My Question is how do I add more Pages or Dossiers…

  63. Great!
    That the same i am looking for!! Thanks!

  64. Great product!

    I’m adding full screen iAds to the project. The ad presents fine but then crashes the app at this line in main.m:

    int retVal = UIApplicationMain(argc, argv, @”UIApplication”, @”BakerAppDelegate”);

    My crash report says:

    -[MagazinePage length]: unrecognized selector sent to instance 0×6835820
    [Switching to process 43540 thread 0x207]
    Current language: auto; currently objective-c

    Any idea what I’m doing wrong and how I can fix it?

    Greatly appreciated!

    Mike

  65. Hallo,
    ist es möglich die TOC-Datei auf einem iPad neu zu laden – über eine Javascript-Funktion im oberen Contentbereich? Bin noch Anfänger im Umgang mit dem Framework und habe es vielleicht nur deshalb noch nicht herausgefunden. Vielleicht könntest Du mir auf die Sprünge helfen, mit einem kleinen Tipp.
    Zum Hintergrund: Bin inzwischen so weit, dass ich ein kleines Lokalmagazin erstellt habe samt Kiosk. Aber genau für diesen Kiosk müsste ich je nach ausgewählter Magazinausgabe immer neue, zum Magazin passende Inhaltsverzeichnisse in die Navigation laden. Nur komm ich irgendwie nicht drauf, wie es gehen könnte.
    Danke sagt
    Marko

    +1

  66. Hmmm, schwierig.. Irgendwie müsste man ja mit der Xcode-Oberfläche kommunizieren… Sorry, weiß nicht wie das ohne Modifikation des Baker-Codes gehen könnte. Aber poste es doch mal in den Github-Foren. Vielleicht hat jemand eine Idee.

  67. Hi Florian,
    I love what you’ve done in pulling all this together. Do you have any suggestions for people like me who don’t really want to go down the Xcode/Apple Developer Programme route, but still want to use your supremely easy to use CSS and Javascript framework.
    At the moment, I can develop sites that work fine, apart from the touch elements) in Chrome/Safari on the laptop, but they lose all the navigation elements in Safari on the iPad, because it’s expecting the Baker components.
    Cheers,
    Mark

  68. Hello,

    I just opened XCode with the Laker.xcode file. Book directory is included on the left side of Xcode. But when I run, I get many error messages, the first one being in the main.m file int retVal = UIApplicationMain(argc, argv, nil, @”BakerAppDelegate”);

    I use the xcode 4.2.1 version software. Have you any clue on what happens ?

    Pierre

  69. sorry. no idea. Is it crucial? Does it run anyways? Try to ask it in the forums. thanks!

  70. I downloaded and try it in Xcode 3.2.6 on OS X 10.6.8 and got this error https://skitch.com/yuchangseng/g4wfc/indexviewcontroller.m-baker-build-results

    Any idea what I did wrong? Thanks.

  71. Please update to xCode 4, that should fix the problems…

  72. Hi Florian, I wish to know if it is possible to change the height of the index? (index.html) Thank you !

  73. Yeah, it should be possible by editing the height in the book.json file.

  74. Great! it works. Thank you !

  75. Hi Florian,

    I’m programming a magazine using your template but i can change the name and icon app. Another question that i wanna make u, is i u know any tutorial to setup correctly the xcode and generate the ipa file to upload to AppStore. Thanks a lot! And great job!
    Marc

  76. Hey there,
    cool! Take a look at the Baker and Laker Forums. Maybe someone already wrote something. Unfortunately, I don’t have any time at the moment to do it myself.
    cheers

  77. Hi there,

    what’s the fantastic screencast software for your video? Great project – thank you!

  78. I used ScreenFlow. Thanks!

  79. Thanks Florian!

  80. Hi, how do I add more Pages or Dossiers thankyou.

  81. Using your example for audio, only Ogg files seem to be playing for me. Mp3 files do not work.

    Maybe there is a trick I am missing somewhere.

    Working from your example page, if I take:

    supplied: “mp3,oga”,

    and change it to:

    supplied: “mp3″,

    Nothing happens.

    Any thoughts?

    Thanks again for the great project.

  82. Hi,Florian.

    I tried your Laker compendim and it worked fine for me until I upgraded to Xcode 4.3 and Baker 3.2. With the new version of Baker, the index bar refused to appear, which I fixed it according to the instruction on the Baker forum. And then I find out that the TOC cannot be scrolled vertically. It used to be able to scroll both horizontally and vertically.

    Any idea how to fix it?

    Greatly appreciated.

  83. Hi there! Really nice job, congrats!

    I am getting the same as Smifull, my TOC just dont show properly in Xcode 4.3. I tried on the device and got the same issue. I see just a little piece of it (like a line) appearing on the right.

  84. Did you specified the height of the toc bar within the book.json file? Otherwise you could try to not use the include via JS in the toc (as I read that the current version of baker does calculate the height automatically and if there is nothing loaded, the height is 0).

  85. Greta work!1 and thank you.. though on my ipad 3 I don’t get navigation or the Table of contents.. I do in the safari browser but not compiled on the ipad?

    Any suggestions.

    thank you

  86. Hi

    I just wondering if anyone has tried using lightbox ?

  87. Try posting it in the github forums! Thanks!

  88. Supported platforms are iPhone and iPad, according to this web site. But using HTML5, CSS and Javascript as a base, shouldn’t it be possible to support many more platforms than that? Android, for example?

  89. Yes, the HTML-Part does support other platforms (to a certain extend), but the wrapper-app (the baker framework) is only available for iOS.

  90. Hi and congratulations for your excelent work.
    I just have one more/last question :
    If I add a page, how can I manage with the __MACOSX\book files ?

    For example : I create want to new page called Contact.html
    Do i have to create a ._Contact.html page in the __MACOSX\book files dossier ?
    And for the content ?
    May I copy/paste/rename the ._Maps.html page and rename it in ._Contact.html and add this name in the json file ?
    Does it works ?

    Thanks for your response !

  91. Forget those files. It’s just Mac-OS-Related files. It’s save to delete them.

  92. Hi Florian,

    I’m trying your fabulous framework with iOS 6 (iPad) and I have a problem.
    I tried it many times and always works on the same way.
    In the screenshot case (http://www.ideai.net/screenshot.png) I’ve only modified the word COVER on index.html to Índice and suddenly you can scroll in Y axis the thumbnail view.
    And second question, to flush de cache, is shift+cmd+K? Sometimes does not work. One time I deleted the book content folder and xCode continue building the complete “magazine”.

    Thanks a lot

  93. hmm strange. Did you flushed all the caches? For me it helped to delete the app from the simulator, then clear all caches and then install it again…

  94. Thanks Florian, I’ll work on it.
    One more and last question… which value I have to edit to move down the thumb view? I modified the toc-list height value but I don’t know how to move down the thumbnail view.
    http://www.ideai.net/screenshot2.png

    Thanks a lot
    Great JOB!

  95. Hm strange.. seems like an xcode-app-cache-bug or sth…

  96. hi florian
    First of all thanks because its a great projecr.
    Y have a problem with the scale, the magazine that i need only have images, and is neccesary that can scale the images for that can see ok in iphone, i read other issues and i know that is a problem to do the zoom with double tap, but i just need to do with scale, CAN YOU PLEASE HELPS ME?

  97. try changing this line:

    to:

  98. I have the same exact problem Marc reported: ToC is scrollable in Y axis. Cleaning cache, deleting app, reinstalling does nothing.
    BTW it also happens with your own NY app with no modifications: a way to to trigger the bug is closing the app (double click ipad button -> long tap on app icon -> click on minus sign) and re-open.

  99. Nice work. Great to see such a amazing program. Will start working on Laker as soon as I get my Mac book.

  100. Do you mind if I quote a couple of your posts as long as
    I provide credit and sources back to your site? My blog is in the exact same niche as yours and my users would truly benefit from a lot of the information you present
    here. Please let me know if this okay with you.

    Thanks a lot!

  101. is there a way to open a URL instead of a dossier when a TOC item is selected?

  102. You mean in some kind of child browser? Did the baker guys implemented that yet? If so, it should be possible.

  103. I actually used a dossier with body on load and opened a URL like that. Worked quite well.
    Couple of questions if you don’t mind.
    I would like to change the CSS of the transition pages and the title bar that drops down when double tapping.
    I went thru all the CSS files and haven’t found anything. Can you point me in the right direction please?
    Thanks

  104. The transitions are managed via Baker and xcode.

    cheers
    florian

  105. Dear floriant,

    thank for sharing your work. i download the template . and open it with Xcode . i have a lots of error when i do a test! would like to have some help if it is possible thanks in advance

  106. Hi Florian,

    I saw your movie of the laker app and it looks real good. For a schoolproject we have to make movies about apps. I would like to make a movie in the same style as you did. Is it possible for you to tell me which program you used to create the movie?

    Looking forward to hear from you.

    Kind Regards,

    Patrick

  107. How to handle the events in Webpages in Baker Framwork.
    like If user tapped the Join button in the webpage… i want to submit form details to database.

Leave a comment, suggestion or question.

You must be logged in to post a comment.