Skip to main content

Posts

Showing posts from December, 2012

Textastic for iOS is a great way to learn markdown

What is markdown? Markdown is a way of generating HTML with a minimal amount of "markup", which is gaining prominence through its inclusion in a number of apps. For a guide on how to write it see the Daring Fireball site.

What's this all about? What I've done here is to take one of my favourite iOS apps - Textastic - in order to show you how it not only syntax highlights markdown but also previews it inside the app, and allows you to copy the generated HTML as well. All of which I think is great to know for anyone learning markdown. Enjoy.

Markdown syntax highlighting
Markdown preview inside app
Generated HTML copied and pasted into new document
Is that it? Yes, go learn markdown.


Daedalus Touch for EPUB creation on iPad

It imports
Text filesMarkdown files
It exports to
TXTMarkdownRTFPDFEPUBPrint

Who's it for? Daedalus Touch is for people who want to produce text and markdown documents. Writers will appreciate the simplicity and focus, and the ability to generate drafts in EPUB at high-speed without any hassles, as well as extras, such as the ability to search across what the app refers to as "stacks" and "sheets".
What it doesn't do and how to get around this There's no way to add images to an EPUB using Daedalus Touch (only a cover image), so if you are adding rich elements, like photographs, or wishing to edit the CSS or do any RegEx on the files, I'd recommend you open the EPUB in Textastic and unzip then rezip there after editing (see note below). Other limitations you should be aware While the app accepts markdown syntax it doesn't currently have in-app preview for markdown. This means you need to have confidence in your markdown. I also got a bit stuck on …

Adjusting the viewport for iPad in Blogger (dynamic template) and Apple smart app banners: A tale of two meta tags

A viewport is the area of a webpage that a user will see on screen when visiting a website from a mobile device such as an iPhone or an iPad. Apple's thorough documentation describing it can be found here.

I use the blogger dynamic template for my blog with magazine as my default and on iPad apart from a few scrolling peculiarities it works fine. But the other day I turned the device from my usual landscape orientation into portrait and to my horror found the the right side of the web page was cut off.

In order to fix this I first selected "Template" from the left sidebar in blogger, then chose to "Edit HTML" and ignoring the warning I pressed "Proceed".

I then located this line of code:

<meta content='initial-scale=1.0, maximum-scale=1.0, user-scalable=no, width=device-width' name='viewport'/>
and replaced it with this one

<meta content='initial-scale=0.8, maximum-scale=1.0, user-scalable=yes, width=device-width' name…

Anatomy of a Story Elves book for iPad (Part 4): The book and its navigation

Welcome to Part 4 of this blog series celebrating the release of The Waking Prince book app for iPad. This time I continue to look at the centre piece of the app, the Waking Prince storybook, and turn to the navigation.
The aim for the book was to make navigation simple and familiar. Tapping the edges advances the pages in the chosen direction, while dragging and swiping also do what you'd expect from a book app.
A centre tap brings up a visual contents that is easy to scroll back and forth, and to go to one of the pages simply bring it to the centre and tap on the thumbnail. To return to the current page tap on the background.

The art of creating this navigation method was to make it as simple and unfussy as possible, stripping out all the unnecessary decoration; stuff the user doesn't want to see because they just want to move from A to B. At the same time we put the stuff the user does want to see - book content and beautiful illustrations - first and foremost.

To download…

Editing EPUB code in iOS using GoodReader

Note: while it isn't possible to preview the EPUB as a whole in GoodReader if you press one of the inner XHTML files and select "Built-in (many formats)" instead of "TXT Viewer" as your viewer type you will be able to preview each file.


Anatomy of a Story Elves book for iPad (Part 3): The book and its couplets

Welcome to Part 3 of this blog series celebrating the release of The Waking Prince book app for iPad. This time I'll be discussing one of the amazing and original features - the couplet pages - which live inside the centre piece of the app, the Waking Prince storybook.
When you read an illustrated book the text communicates with the pictures. The illustrator brings the words to life visually and perhaps even puts emphasis on a part of the text you'd originally thought inconsequential. Thus, there is an echo that passes between text and image.
The couplet extends this echo further and bounces it off a few more walls by having an additional illustration that talks to the first illustration and thereby to the text as well, taking it on a visual journey beyond what is normally possible in a printed book.
How does this work? Where is this extra illustration? You access the additional artwork very simply by turning the device and allowing it to fade into place. In portrait orientat…

Anatomy of a Story Elves Book for iPad (Part 2): Exporting the Last Character animation from Flash Professional

Following the previous post in which I discussed the parallax menu screens, I wanted to turn now to an area of the app in which video is used.

The Last Character animation is a hugely important part of the book and was created in Flash by the animator (Javier) working closely with the Waking Prince illustrator (Scott). This collaboration resulted in a stunning piece of work and it was up to the programming team to integrate this into the app.

The iPad, as many will be aware, does not support Flash and so the challenge here was to use Adobe's Flash Professional CS6 to export to a file format that could be displayed within the app, and find the settings that would give us the correct balance between file size and quality.

The audio within Flash Professional was set to Event (to prevent the automatic compression that Stream imposed) and we exported with uncompressed stereo audio to the .mov QuickTime format using the H.264 codec. In this way we kept the audio at the highest possible…

Questions, answers and coding jobs: StackOverflow and Coderwall

Coderwall is a site where you share your knowledge through protips and can see who is hiring coders or advertise employment roles in your own team, whereas StackOverflow is a place to ask questions and post answers to coding questions asked by others. There is a career side to StackOverflow but the connection between coding teams and individuals is clearer on Coderwall. It shouldn't, however, be a question of using one or the other for knowledge or employment since both will be useful to you as a coder.

Anatomy of a Story Elves Book for iPad (Part 1): Menu Screens

I'm happy to announce that The Waking Prince is now live on the App Store, and this means it is time to dissect the innards of the iPad app to show you what it's made of in a series of special blog posts. First of all I'll discuss the entry point to the app, the menu screens.

Note: I was App Architect for this project and these are insights from inside the code. If you want to know more catch up with me on twitter @sketchytech

The menu screens were created out of the need for a way into the app, and the idea for the parallax came from wanting the sense of depth that it supplied.

When you use the menu screens what you see is the top layer moving at the speed of the finger drag and each one beneath moving progressively slower. This continues to the bottom layer which is moving slowest of all.

In order to achieve this, each scroll view is narrower than the one above it. And the coder (Joseph) came up with the concept of transition spaces, areas that would be blank in each lay…

Base64 encoding of image files (using Terminal in OS X)

A recent protip on Coderwall inspired me to look further into Base64 encoding, and thanks to this post on StackExchange I learnt all I needed to know to create Base64 files in the OS X terminal app:

Step 1 Open Terminal and type:

openssl
and then hit enter

Step 2 At the OpenSSL prompt type: 
base64 -in /Users/your-username/Desktop/imagetobeconverted.png -out /Users/your-username/Desktop/convertedimage.b64
Note: The file path can be inserted by simply dragging the file to the Terminal app

Step 3 To test the output file in a browser simply open the file in a text editor, append to the beginning
data:image/png;base64,
and copy and paste the text into the URL bar of your browser. You can convert other image files as well, for example TIFF and JPEG, but you will need to change png to the appropriate type, i.e. tif or jpg, and you may well find that instead of loading the image directly into the browser that placing the data in the URL bar will mean that the image is created and downloaded…

Creating an iTunes ipa file for ad hoc distribution in 30 steps (Xcode for iOS)

The first thing you'll need for ad hoc distribution through Xcode is membership to the Apple developer programme and a valid iOS Distribution certificate. To view this certificate you need to:

(1) navigate to the Organizer in Xcode and click on the Devices tab
(2) select the name of your team from the left sidebar

If you don't see any certificates there with green ticks, then you need to go to the iOS Provisioning Portal in the Apple developer site. Once here:

(3) click on Certificates from the left side bar in your web browser and select the Distribution tab within this area
(4) if you have a certificate that isn't valid (most likely because you didn't copy it from another machine into your keychain), then you'll have to either copy the certificate and key to your new machine from the old one or revoke the old certificate and create a new one
(5) if there's no certificate then simply create one
(6) once you have a certificate you should be able to refresh Xco…