Reading mashable last night and being a new iPhone 4 owner I found one of their latest posts most useful!

Using your iPhone keypad while typing tap and hold the '.?123' button, then slide your finger to the required key and let go! Instant update without having to tap to switch screens!

I found this incredibly useful with punctuation, tapping away for my message then sliding my finger for a comma, job done!

* So much so this has all been typed from my iphone :)

mashable.com

Where to begin??

I recently received the company ipad to stack full of goodies and other little treats for presentations and events.

I have to say… wow! This little thing is a great device for showcasing and presenting work on. The screens incredibly crisp and picks up on every detail within the design.

Any way I'm not writing a ipad review here…

I'm writing to talk about my nightmare with integrating video into a publication to use within ibooks.

I'll firstly explain that I'm a creative designer with a long history of building front end development for websites too and that I'm pretty new to this ipad business!

Coming from the creative side of things I first fired up indesign cs4 and went to work with a case study, looked great, exported as a pdf and dropped it on the ipad using itunes. Took no time at all to transfer, quick swipe of my finger and a tap to load up the ibooks app. There and behold my pdf in all its glory! Tapped to open the pdf up to view the contents, simple easy to use dragging left and right to switch pages and using the multitouch pinching to zoom in and out.

Using indesign was a simple and effective way of getting PDF's onto the ipad in exactly the way you exported them as. The only gripe are the covers, my PDF was all landscape therefore creating a very small landscape book cover. The only way round this was to rotate the cover of the book or redesign the cover as portrait.

So how do I add video into this PDF?
Simple answer is you cant. (Adobe, Apple, sort your life out and make it happen!)

Hours and hours of hunting high and low on the web and reading various forums and blogs I came up with nothing, I tried absolutely everything. The only viewer that allows you to view video within PDF's is adobe's own acrobat reader which isn't available on the ipad. The apple ipad uses it's own rendering system therefore not allowing videos to be displayed. Within adobes acrobat reader the video is prompted with a potential security risk dialog which you have to trust to view. This might be another factor in apple leaving video out of PDF's, plus that acrobat uses quicktime.mov and flash.flv files to render the video is another issue that we all know about (flash support).

So how did I get video into the ibooks app?
Using html5 of course!!

This stage took me a while to get to, hours of exporting files and building files from indesign to realise that indesign doesn't attach the video on export no matter what you try.

So closing indesign and opening up TextEdit was the next step, yes I was going to create an ebook from scratch.

Epub files are nothing but a compressed wrapper holding the ebook together, within this epub file you'll find all the chapters, images, css and contents. Change the .epub filetype to .zip then extract the zip file to view all the contents.

I created my chapter using dreamweaver with html5 video keeping the code incredibly simple. Updated the opf and ncx with the chapters details. Converted the folder back to an epub by compressing and changing the filetype again. Dragged and dropped this over to the ipad using itunes, quick swipe of the finger and tap brought up the ibooks app. There it is!! The epub book I created, tapped it to view the contents… fail… either I got prompted with an unknown error or that was there was only text no video?

Why's this? It's all correct, or isn't it? Going over all my code again, trying multiple versions till everything was streamlined and perfect but still no video or unknown errors.

It turned out to be the smallest, most overlooked thing I could of possibly imagined. The Mac compression of the folder back to a zip then epub file, the mac threw in all sorts of code and files like '.DS_Store' which the epub just went mental over.

I came across this little gem online ePub Zip 1.0.2.app.zip [mobileread] dragging and dropping my folder onto this applescript removed the dirt from the epub file allowing it to run on the ipad.

Another transfer to the ipad, swipe, tap, loading…

I couldn't believe it, finally working video within the epub ibooks application. It looked amazing, the video looked stunning using full screen.

I hope this shed some light on creating publications for ibooks on the ipad, I'll go into detail on my next post about all the files needed to hand create your own epub publication.


Robski

This weekend is the street fighter tournament! Grab your favourite controllers, your favourite sticks and get button bashing!!
I'll be taking my camera to document the days events, who know's I might even compete! I'll definately be giving the casual gamers a run for their money!

Click here to read more about it!

Here's this weeks links:

http://www.myinkblog.com/2009/05/16/a-showcase-of-popular-web-design-trends/

http://www.smashingmagazine.com/2009/05/21/web-design-industry-jargon-glossary-and-resources

If Street Fighter 2 was released in 1981 - http://vimeo.com/4504861

It's about that time to share a few Friday links with you all!

Maximize the use of hovers

15 Excellent jquery navigation techniques and solutions

20 Excellent javascript navigation techniques and examples

Simplifying website usability the 3 step approach

While working on a few websites this week I came across two really useful techniques.

Two Column Float Variable Widths

The first was a simple two column layout using float left on both div's without any width set. This proved a bit of a challenge for both div's wanted to sit underneath eachother or the second column would wrap under neath the first div.

Our solution was to use float left on the first div with the second div set with no float but but using display:table instead. This worked perfectly for firefox and other browsers apart from IE... For IE we just had to add the float:left property in a conditional css hack i.e. * html #div { float:left }. This allowed us to achive two columns with flexible widths, see the image below.

Backslash IE hack

The second little niffty css hack I came across was similar to the underscore IE hack i.e. _height:100px;

Using two backslashes (//) instead of the underscore works across all IE's.
IE ignores the two backslashes as where all other browsers see this as comments. Genius!!

Cranfield School of Management makes a nice little apperance on one of the top design/developer blogs Smashing Magazine.

The Sub-Navigation for Cranfield consists of a rollover cookie trail which allows users more control over exploring the site, this enhances the user experience and quickens the web journey from point a to b. Smashing Magazine has picked up on our little cookie trail and placed Cranfield under 'Breadcrumbs with Sub-Navigation'.

Thanks Smashing Magazine for including us in your posts and to all of the hard work Creative Jar put in to create this stunning site.

Peace ^_^

The creative room has undergone a few changes in the past few weeks, as you may of noticed from the smell of paint and white spirit!
The creative team have worked hard to achieve a room we're all proud of, well we can't be letting the technical team have a better room than us can we?

Retro games are still up there amongst the best titles in the world.
There has been a mini debate amongst the kids in the office about the top 5 retro games.

We came up with the following:

1st: Mario
2nd: Streets of Rage
3rd: Street Fighter
4th: Donkey Kong
5th: Pac Man

We all can't help picking up an old gameboy / nes / snes / n64 / dreamcast / c64 / amiga / atari / megadrive / master system (yea theres many!) and playing it till our thumbs turn raw red!

I still think the old PC games are up there!! Doom, Wolfenstein, Half-Life etc!!
Feeling brave and fancy challenging us? ;)

I was going through my rss feeds from Smashing Magazine, being one of the creatives I thought that "Strategic Design: 6 steps for building successful websites" would be a good read. While reading through the post I came across something familiar! Carbonica! Nicely slotted in under "3. Determine your brand image", amazing!

It's really great to see something we've all worked so hard on popup on great sites like Smashing Magazine!

Thanks to everyone who has worked hard on this project and a big thanks to Smashing Magazine for using Carbonica.