Mgk

Magaka

Digital magazines with your face.

Magaka is opensource , so the little price you can pay is collaboration . The engine is MIT/GPL2 licensed but it doesn't apply to your contents - so give the price you want to your words. But a better Magaka makes better magazines . Yours too.

Your magazine will be readable at home or at worklike Chrome Mozilla Firefox and Safari andon many mobile devices, from tablets to phones. Your only bounds will be the size of the screen.

Magaka uses some old & new web technologies for putting together your magazines, meaning that your readers just need to have a browser onboard to read your stuff, keeping you away from messing with complex SDKs. Nice, huh?

Magaka is a web based solution for producing modern digital magazines and, since is opensource and free , allows you too making a cool and expensive-looking magazine with your face on it. For real.

What's new in 0.2? - A visual tool for defining interactive areas over image-based magazines! You can make your magazine with any software that exports image files as usual but It's a LOT easier to add the HTML overlay with dynamic objects and sensible areas. You can find the boxmaker tool together with other tools. - You can now override the default action when double-tapping on a page and doing something else instead of showing the default GUI. - You can define the maximum number of crossed pages while jumping from a page to another , automatically disabling the pan animation. It makes the browsing experience much more performing. - A new article for the 2UP section by Simone Cicero from Meedabyte. What's new in 0.2.1? - Internet Explorer 9 quick fix. - Better in-app documented boxmaker tool.

The latest version of the sources are on GitHub. It contains bleeding edge and experimental features so, if you feel brave, you can have a look there.

Click here to read The Sample Magazine for iPad without needing a real iPad. This box will open the device tester tool with the rasterized version of the magazine using the same screen size of the iPad. Since the static part of the magazine has been turned into an image, this version gives good result on less HTML5-ready browsers like Internet Explorer and Opera.

Click here to read The Sample Magazine Mini that is a stripped down version of the sample magazine. The mini version is included in the universal version and is shown on devices with smaller displays. This link will open the device tester tool with the iPhone display as preset.

Have a look to the Device Tester , an handy tool shipped with Magaka for checking how your magazine looks on smaller screens. You can browse The Sample Magazine like on the iPad or iPhone from your browser! (Safari is obviously suggested)

Click here for reading the iPad optimized version of The Sample Magazine #0 . It looks like the universal version but the pages have been rasterized for improving browsing speed. While the pages don't auto-adapt to the screen size, they are much more lightweight. I strongly suggest you to use this version for the best browsing experience on iPad.

Click here to read and download offline the issue 0 of The Sample Magazine , a little magazine that shows many of the capabilities of Magaka, like animated and interactive widgets, dynamic layouts, device detection and much more. It also includes some interesting articles about digital print written by a growing number of authors. The universal version includes different versions of the magazine that are shown depending on the display size of your device.

Digital magazines for everyone.

Magaka is an opensource javascript engine that allows to create modern digital magazines using open web technologies.

While most of the digital magazines uses native applications for browsing issues, especially on iPad, a web based solution can offer a very wide compatibility across many devices, such like iPhone and other Apple devices and Android tablets and phones.

The reasons are ideally quite plain:

HTML renderers are really mature layout engines and the Web showed that in many cases, with a bunch of creativity and CSS skills, any type of simple or complex layout is reproductable.

and the Web showed that in many cases, with a bunch of creativity and CSS skills, any type of simple or complex layout is reproductable. CSS3 is getting more and more eye-candy offering nice effects like shadows, rotations, glows and so on. Specialized constructs allows also 3D effects and animations.

offering nice effects like shadows, rotations, glows and so on. Specialized constructs allows also 3D effects and animations. Javascript interpreters are getting stronger and faster allowing very specialized operations, like geolocalization, accelerometer handling, multitouch events and more.

allowing very specialized operations, like geolocalization, accelerometer handling, multitouch events and more. Complete browsers are approaching seriously the mobile market so many of the features of mobile versions of browsers are comparable with desktop browsers. In some cases, the mobile version surpasses in number of features the desktop one.

Magaka is my personal attempt to check this theory - and nothing is better than apply a theory to find out if it is doable. ;)

Magaka is NOT a magazine builder so don't expect any particular GUI for placing text boxes, images and so on. Magaka, instead, will do all the rest.

Magaka includes an HTML based multi-layered layout engine with multiscoped placeholders, gesture based page navigation to mimic the common spread digital magazines, a wide set of tools for helping you on creating thumbnails, rasterizing your magazine (i.e. using images of the static parts of your magazines instead of HTML) and creating new page templates and many other features that you will discover into The Sample Magazine, a little magazine created using Magaka for showing some of the features of the engine.

If you don't know the most obscure uses of HTML you probably will find the Sample Magazine adventure a fun ride. If you're already an HTML/JS guru, you can find in Magaka an already-baked container for your layout and magazine ideas. And since it is possible to separate the layout from the article text, splitting your inner abilities of designer and journalist will be easier than you expect. Obviously, I suggest you to learn a bit of Javascript before starting!

Best of all, the engine is opensource and MIT/GPL2 licensed - keep in mind that, while the engine itself is opensourced, you can apply any kind of license to your own magazines and plugins. So, nothing to pay - the most unvaluable contribution you can give is collaboration. Oh, well. And if you want to donate, don't be afraid. Like all nerds, I need videogames. Lotsa of them.

How it works.

The magazine is started by a pratically empty HTML file that loads Makaga. Then, the magazine data is loaded from a JSON structure. The JSON includes most of the metadata, from the title to the magazine index. More than one version of your magazine can be specified in the structure - the correct one is seleceted in realtime according to a set of rules that evaluates the screen size, orientation and other parameters.

After loading the stylesheets and plugins needed by your magazine, its pages are mounted in realtime enqueueing different HTML files (or just page image files, if you prefer to work with your favourite designing tool).

When the layers are stacked, the placeholders specified in the composite are replaced with different values, ranging from static and/or custom strings, i.e. the issue number, to variable values, like the current page number and device orientation. The navigation part is done by a relatively simple Javascript engine.

While the composing procedure is all here, the interesting part begins when the page is ready and rendered. Pages can be a whole new set of layers from landscape to portrait orientation or just the same page, taking advantage of the HTML layout rules and alignment for creating a liquid layout that is quite common on web pages. A widget engine allows to create dynamic content on the page, offering a parallel set of timers (just like the setTimeout function in javascript) that is automatically started, stopped paused and resumed depending on the page status. For the other features and tricks just have a look to The Sample Magazine for a quite complete showcase.

Even if some layout choices can be cheesy and user-unfriendly, because I'm not a designer (and all we know that programmers are not designers), with The Sample Magazine I'm trying to explain that what you can do with Javascript, CSS and/or HTML, is probably doable inside a page of Magaka based magazine too.

Magaka is scalable for different layout scenarios: HTML pages with placeholders for the texts, layered HTML for common graphic elements like borders, boxes etc. or prerendered pages with dynamic widget in overlay (as often happens on iPad magazines). It is really up to you and your skills.

Magaka is adaptable for many distributions channels too: from stand-alone web pages that acts like a site (including server side dynamic contents) to downloadable magazines, using the offline storage capabilities of HTML5. You can also bundle your magazine on a native app and distribute that on application stores.

Magaka performances are directly dependant on browsers maturity, device speed and - obviously - optimization level of the code. That's why it is really important to collaborate on the sources for a better reading experience. By the way, during the development, I've verified the giant performances leap of Mobile Safari from iOS 3 to iOS 4 on the only tablet I can test for real (my GF's iPad) so it is good to be optimistic :) Keep in mind that performances are incredibly higher on rasterized magazines. If you want to use HTML for putting together your pages, Magaka can help you on rasterize your magazine starting from the HTML version.

Magaka is not The Sample Magazine

The Sample Magazine has been created in order to test, check and show the features of Magaka engine, that is just the director of your magazine pages and animated widgets. That means that its layout, structure and content have been thought to give acceptable results on different screen resolutions, device compatibilities and performances.

Also, as explained in the magazine itself, The Sample Magazine was shaped up as a benchmark, so the pages are text filled, widget crowded and many machine cycle expensive effects have been used, like text and box shadows and rotations. For the same reason the number of images in each page has been reduced as much as possibile, preferring layered DIVs and CSS Sprites techniques.

Probably your magazine will be far more lightweight and well designed since using static images instead of machine calculated effects and using less widgets per page will impact very much on performances. That's why I suggest you to actually read the Sample Magazine to learn what you're really seeing, what is heavy-loading your device and, in many cases, how to avoid slowdowns.

I asked to some friends to provide contents for the magazine (expecially for the 2UP section) so there is something less nerdy and more interesting to find out. Somebody has not answered yet so I'll update the magazine when new articles come up. Want to write something for The Sample Magazine? Mail me your ideas!

Thanks!

The real reason why I decided to try the Magaka way is for making a little gift to my GF Bianca: she is a writer and is writing a Sci-Fi book that will probably never be printed. And, saying the truth, will never be printable. A little teaser of the book is in The Sample Magazine - it is in Italian and is shaping up very nicely. I'll probably use Magaka for the tablet version of her book.

There is a huge number of people (and tools) that I've to thank - all of them has been credited inside The Sample Magazine. But probably I've to thank what helped me when I wasn't coding: Super Meat Boy (phenomenal), Scott Pilgrim vs. The World (Anamanaguchi and Paul Robertson - I'm in heaven), Alan Wake (really understimated), Killzone 2 (bah), Bioshock 2 (after the first one, the follow up was unuseful), Halo 3 ODST (a good plot, at last), Infinity Blade on my GF's iPad (a clever Punch-Out/RPG mix), Space Invaders Infinity Gene on XBOX360 (most original STG ever), Raskulls (Mr. Driller done right©), Claptrap's New Robot Revolution addon for Borderlands (the real ending of the game!). Ended. All of them. Thank you very much!