Login
Password

Forgot your password?

5 Great Things About Making a HTML5 Magazine

By Edited Nov 13, 2013 0 1

iPad magazine subscriptions to buy are out there in the Amazing iPad eco-sphere. You can go to apps like Zinia which has electronic versions of magazines, same as you can get of the shelf in the local news shops. They tend to be PDF versions, that just completely replicate the magazine, like each page was photographed. It is not a bad way to buy magazines, as often they are the same price as you would have paid to get in the shop or by subscribing online, or even with making a subscription using snail mail. The old fashioned ways are still there, would you believe it?

On the other hand there are magazines that are created especially for electronic reading. Although they may be made using web code, they are different from the content that you see on a web page, because the look of the page is contrived to have a complete look and feel. The pages will have been designed by a proper graphic designer. Text, photos and graphics are positioned exactly on the page and don’t move or flow to accommodate a browser window that could be resizable. Resizable is good sometimes, if you only have a small screen and you don’t want to have to either make designs just for a specific screen size or have the scroll bars on the side and bottom being the only way that you can see the page content.

What is upcoming and exciting are magazines, and perhaps even eBooks that are for specific devices like the iPad. With the iPad becoming so popular it makes sense to have your creative content designed just to be shown on that device. It become financially viable. I suppose a version could be made for the Android tablets, the only problem is that the resolution can be different on the many different Android devices.

Aside Three

Five great things about making a HTML 5 Magazine based on the Aside Magazine demo

Adding movies to the mix

With HTML 5 you can include a movie on a page without having to have a separate movie player and have all the borders and controllers in the way. With the Aside Magazine it looks very neat on the page with a nice large image which fits exactly where and how you want. Then there is a button in the middle of the image, that is well designed and tidy looking for you to tap to get the movie started. The button which says Watch Movie when you first get to the page changes after you have watched it, to be a different button Watch Trailer again. I was impressed with the ease with which, I could have the movie played full screen on the iPad. It looked even better taking up the whole screen.

One thing that might be annoying, is that you have to download the movie each time you play, as the movie is not getting saved as a movie file on the iPad. For the most part, that will not matter too much, as you will only be including short movies in something like a magazine or an eBook for the iPad. Ordinarily you will only watch the movie just one time anyway.

Pictures and the fancy ways to display them

With the old HTML you could use absolute positioning to have an image to sit in an exact position on a page, with HTML 5 there seems to be some added extra functionality. One page of of the Aside Magazine that impressed me, had a background image that had text and other images on top of it. This was on the same page as the movie as well. The best part of this, that really blew my socks off, was the section of the page that has four images layered on top of each other like they were photos strewn on a desk and by touching one of the photos it came to the front and zoomed up to a bigger size. The animation between the first state and the zoomed up state was smooth and really professional looking. Hard to believe that it was done with just HTML code.

There is also an example on a page in the AsideMagazine where you can change the image showing and the accompanying text also changes with it, when you tap on a button. I noticed too that the transition from one image to another is a very short fade from one image to the next, which looks so much more smooth that a straight cut transition. This one you have to tap the button to get the interactivity and swap the pictures, but it could be possible to do a slide show just as easily.

Showing off 3D images

Aside Magazine have a page in the demo that has a wicked looking squirrel, that has been made in a 3D graphics animators application and you can move the image in 360 degrees on the page just by sliding the finger from left to right on the screen. Somehow they have coded it so that the image changes with the movement of your finger to make it look like a proper 360 degree viewing. Still looks very impressive though.

Using Sound In A Magazine For Ipad

There is a page to demonstrate this - You have an image with a link under it, that takes you off to external web pages, if you click on it. Then under that, some text and then a button which is obviously a play button for audio. Hit that button and the music starts playing immediately. On this Aside demo there is no pause button, which would have been useful and it is most likely something that can be done with HTML5 if you want to. When you tap on play the button it changes to be a stop button.

Aside Magazine
Using HTML5 to provide a navigation system through the magazine

There is a page curl image at the bottom left and when you touch this with your finger, the page you are looking at slides to the right and the list of contents is uncovered. It appears like it was waiting underneath the main pages ready for you to use. That by itself is sweet enough as a visual trick, but it is also possible to scroll that list of contents too. Hit any of the items in the list of contents to get to the page you want.

Swiping to the left moves you on a page and you can also scroll down when the page is longer than the visible area showing in the iPad screen. All in all it was a very pleasurable experience to use the demo Aside Magazine. It is a way for publishers of content to get something that looks and works like an application but isn’t one so doesn’t have to go through the Apple App store shenanigans. This could be another way for podcasters to distribute the podcasts. Have the fans go to a web page to get the latest edition which could be a very fancy set of show notes and the podcast could be listened to directly in the HTML5 app.


Advertisement
Advertisement

Comments

Jun 3, 2011 5:16pm
Spondicious
I just stumbled an article and no probs...
Add a new comment - No HTML
You must be logged in and verified to post a comment. Please log in or sign up to comment.

Explore InfoBarrel

Auto Business & Money Entertainment Environment Health History Home & Garden InfoBarrel University Lifestyle Sports Technology Travel & Places
© Copyright 2008 - 2016 by Hinzie Media Inc. Terms of Service Privacy Policy XML Sitemap

Follow IB Entertainment