Skip to main content

Posts

Showing posts from 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…

iTunes Error 3014 when attempting iPad restore

Following an unfortunate click of an iPad icon while mounting in iTunes, the software refused to recognise the iPad, no matter what I tried, so offered to place it in recovery mode. (Note: It was, however, still recognised in Xcode.)

After many failed attempts to restore to iOS 5.1.1, I had to accept that this iPad was going iOS 6. But there was a snag, each time I tried to restore it I received an unknown error 3014.

Another post identified this as a connection problem with Apple's servers and directed me to the hosts file which can be found in Finder using Shift + cmd + G then searching /etc/ inside which you'll find the file.

However, before you can edit the file you'll need to add administrator read and write privileges to the hosts file, the etc folder and the private folder it is contained within. By selecting them in Finder and pressing Cmd + I then using the options at the bottom of the dialog box.

Once you are in a position to do so, open the file. Mine looked lik…

My top five sketching superheroes for iPad

1. Procreate Procreate has a super clean and modern interface. It also exports to Dropbox in PSD format (as well as Procreate's own format). Recent updates to include Ultra High Definition 4K cinema format (1714 x 4096 px), and canvas sizes all the way up to 4096 x 4096 px make this an amazing app. For more details on working with Procreate see this blogpost.
2. SketchBook Pro The fluidity, brushes, symbols and saving options (iCloud, email, Dropbox and social media sharing) along with export to Photoshop (PSD) format make this an excellent app. (It has a maximum image size of 2500 x 2500 px but at this size you will be limited to three layers, at 768 x 1024 px eighteen layers are available and between these two sizes there is a varying ratio of size to layers.) 
3. ArtRage This app is great for its realism and often a good place to start for inspiration. There is no option to export to PSD, only ArtRage format and a script format that can be used to increase the overall size of …

Beta testers wanted for book app (iPad)

Update: The app is now live on the App Store, and you can download The Waking Prince here - you can still sign up as a beta tester for new apps and updates. 
If you'd like to join The Story Elves to beta test one of the most exciting book apps for the iPad this year then follow this TestFlight link and feel free to share it with others too. We'd love to have you try out this app and if you have any queries ask below in the comments section.

Anatomy of a Story Elves Book for iPad: An Introduction

A couple of years ago, The Story Elves approached me for advice on eBooks and for information about how to create an iBook. This consultancy, which took place in email and over Skype, led to the first book The Story Elves team were to publish called The Waking Prince. A publication was originally available in the iBookstore as a fixed-layout highly-illustrated book.

Fast-forward to November 2012 and we are soon to witness the launch of The Waking Prince as a fully-featured app. The question is how do these two things differ?

I'm glad you asked, over the coming weeks, leading up to the launch, and those following it I'll be discussing the challenges involved in making this highly illustrated and original book app a reality.

Update: the app is now live on the App Store, you can download The Waking Prince here.

Introduction | Part 1Part 2 | Part 3 | Part 4

First steps in GREP: Finding a word (Part 3)

We can find letters in the same way as we find numbers using ranges, so if we want to find any letter of the alphabet, we use the range a-z, but GREP is case-sensitive and so we need to also search for A-Z so as not to miss proper nouns and words that begin sentences. Like so:

    [A-Za-z]

We enclose in brackets as usual so that we can reuse the search result in our replace dialog box. The plus sign means that we find an infinite number of letters up to the point where we hit something different to whatever is contained within the square brackets, e.g. a comma, space, semi-colon, etc.

    ([A-Za-z]+)

As in previous posts, we could have used {1,} but the plus sign requires less typing and the curly brace method is more useful when you want the first result to return more (or less) than one of the thing you are searching or you want to search up to a set number of them. Now all that is left is to use the result in the replace box:

   This is a word with any number of upper or lower…

Using regular expressions in Textastic (iPad)

In order to use regular expressions in Textastic:

(1) with the document you want to search open tap on the magnifying glass

(2) next tap on the settings cog until you are faced with a series of switches in a popover


(3) switch on "Regular Expressions"
(4) now you can go back and use regular expressions
(5) start by finding a number
  ([0-9])
and replacing with
  Number $1
(6) you'll of course need numerals in your document for this to work
(7) once you've performed the search you'll see a list of found items which you can replace individually or all at the same time, and the found items will also be highlighted in your document

First steps in GREP: Finding a bigger number (Part 2)

Last time we used GREP to search for a number, but if the number was any larger than 9 it would be ignored, or rather found a single digit at a time, so this time we're going to extend this to find all numbers above zero

This is achieved by simply adding {1,} after the closing square bracket of our search query from last time, so that we have:

  ([0-9]{1,})

It tells the app (or program) that we want it to search for one or more of the thing asked for in the square brackets.

If we wrote {2,} this would be asking for two or more, but remember this doesn't mean necessarily 10 and above, because a numeral might be written 01. To search for 10 and above in the scenario where numerals might or might not be written with preceding zeros you'd need to write:

  ([0]{0,}[1-9][0-9]{1,})

which means zero or more zeroes followed by a number between 1 and 9, followed by any number of digits of the value 0 to 9.


Part 1 | Part 2

First steps in GREP: Finding a number (Part 1)

I'm going to start by using TextWrangler as my example program but most of what I'll discuss is transferable to other programs that use GREP (and Regex or Regular Expression) find and replace systems, such as those found in OpenOffice and InDesign. In this brief example we'll look at finding a number between 0 and 9 then adding some text before it.

(1) open TextWrangler (if you don't already have it installed, download and install for free from MacAppStore)
(2) type some text containing numbers in a new document
(3) press Cmd + F
(4) tick the little box at the bottom of the dialog box that reads Grep
(5) in the top box type ([0-9])
(6) in the Replace box type Number \1

The [0-9] means find a number between 0-9 and if you'd written [a-z] it would have meant find a letter between a and z. Enclosing it in brackets means we can use the text in the Replace box by referring to it as \1 and if we'd had two expressions - e.g.  ([0-9])([a-z]) - then \1 would be the res…

The Monarch Butterfly: An Interactive Picture Book (Elizabeth Castro)

As I've already written (see here), the importance of Elizabeth Castro's work to the world of eBook publishing, and in particular iBooks on Apple's iBookstore, cannot be underestimated.

Not only has Liz Castro published "how-to" books on the subject of eBooks but she has also published a book on Barcelona and a work of children's fiction through the iBookstore as well (see here).

The current book is an important book, because it is her first foray into adding interactivity through JavaScript to an ePub book (that is also incidentally fixed layout).

The images are bold and I like the way the little images zoom to cover the page, this is very graceful. I also find quite intriguing the way the text comes second. First, one looks at the images in detail unobstructed by text, perhaps then watches a video before clicking that little yellow arrow with a question mark.

The little yellow arrow with a question mark is unassuming but is one of the most important featu…

Instantiate a view controller using a storyboard identifier in Xcode (update Swift 3: Xcode 8, beta 6)

** Jump to Swift 3 code **

In order to instantiate a view controller using a storyboard identifier in Xcode, you first need to assign a Storyboard ID to your view controller. In order to do this:

(1) select the storyboard file in your project

(2) select the view controller that you would like to instantiate

(3) with the view controller highlighted select the identity inspector in the utilities on the right-hand side of the window

(4) give your view controller a Storyboard ID


(5) now wherever you need to instantiate the view controller you simply write the following code (making sure that the strings you pass to storyboardWithName: and instantiateViewControllerWithIdentifier: match the name of the Storyboard and the Storyboard ID exactly, because Xcode won't catch any errors in these, it will instead crash at runtime)

UIViewController *viewController = [[UIStoryboard storyboardWithName:@"MainStoryboard" bundle:nil] instantiateViewControllerWithIdentifier:@"ViewControl…

Adding a filter to an image in Xcode: CIImage and CIFilter in iOS

This is a quick and simple post to help you in the first steps of using image filters.

(1) create an image view (imageView) and hook it up to the .h file of your view controller using the storyboard for your project

(2) import the Core Image framework into your header file with #import <CoreImage/CoreImage.h> and add the framework to the "Linked Frameworks and Libraries" of your project target

(2) synthesize the image view in your .m file

(3) drag an image (image.jpg) into your project

(4) replace the viewDidLoad code of your view controller with this (reading the green comments as you do so)

- (void)viewDidLoad
{
    [super viewDidLoad];
 // Do any additional setup after loading the view, typically from a nib.

    // Create a path to the image we want to manipulate
    NSString *filePath =
    [[NSBundle mainBundle] pathForResource:@"image" ofType:@"jpg"];
    NSURL *fileNameAndPath = [NSURL fileURLWithPath:filePath];

    // Load the image as a CI…

Installing a new hard drive in your Mac and restoring OS X Mountain Lion from a Time Machine backup

If you are planning to upgrade the size of your hard drive in a Mac running Mountain Lion, then first you'll need to make sure:

(1) Time Machine has backed up your latest files (the whole system, don't exclude the system files or applications)
(2) you've downloaded the OS X Recovery Disk Assistant and installed it onto a thumb drive. To do this: (i) download the OS X Recovery Disk Assistant, (ii) with the thumb drive plugged into your USB port open the .dmg and run the program (don't copy the .dmg or the application to your thumb drive, OS X does all it needs to when you select it as the target). Note: if the drive isn't OS X Extended (journaled) format then you'll need to use Disk Utility to erase the contents and format it before installing the recovery software
(3) when that's all done shut down your Mac, unplug it and put the new drive in
(4) plug the thumb drive in and power it up
(5) plug your Time Machine drive in and select "Restore from Time M…

Who are The Story Elves?

The Story Elves
If you are interested in storybooks and the future of them then you'll enjoy this blog. I'll have more to share in the coming months when the first iPad app that I've been collaborating with The Story Elves on is released. It is called The Waking Prince and we've lavished many hours on getting it just right for readers to enjoy.

Anyone with an iPad in their Christmas stocking, or with one already on their shelf will be able to enjoy this app. It is bookish, innovative and above all a wonderful story for our modern age.
Written by Zoe Roizen Soane each page contains beautiful illustrations by Scott Brundage, and you'll delight in the original elements only possible on an iPad and not yet done before in other apps.

Update: The app is live on the App Store, you can download The Waking Prince here.

He-Man: The Most Powerful Game in the Universe

They say that your past comes back to haunt you but sometimes it just comes back to say hi and remind you of all the things that made your childhood special. I've played the iOS remakes of Alien Breed, Worms, Gridrunner, Spy vs Spy, Gauntlet, Spy Hunter, Pitfall, to name but a few, and now comes something that I never expected but which I devoted many childhood hours to watching on TV. Not to mention playing with the plastic figures and Castle Grayskull. Was there a game at the time? Probably, but I don't remember it.

Does it disappoint? No, of course not, this is Chillingo we're talking about after all. Could it be a bit less easy? Yes. Is Orko's theme the most catchy thing you've heard since that PSY guy? Probably.

Angry Birds Star Wars: Coming Soon

When it comes to casual gaming on mobile devices Angry Birds wrote the book, and now they intend to boldly go where no other casual game has gone before (that's the wrong one isn't it? yep) to a galaxy ... you know the rest.
A game so ubiquitous that Rovio hardly need to introduce the game in their promotional material. They now intended to make Star Wars even cuter than in the Lego games. But for those more interested in books than games, check out Rovio's recent foray into the book app market with their Bad Piggies cookbook.

JavaScript and CSS centred interactivity in iBooks

If you work with ePUB then you'll know the work of Liz Castro, and if you don't then you really should. Her book, EPUB: Straight to the Point and subsequent mini guides will keep you on track for perfection and be your wise guide through the highs and lows of creation. So when she writes a book about JavaScript and CSS interactivity you should be listening carefully.
Interactive mini-guide coming soon. I'll let you know when I've seen a copy.

You can now read a full review of the Monarch Butterfly by Liz Castro on this blog.

Kobo Arc vs Nexus 7 vs Kindle Fire HD vs iPad mini vs NOOK HD (Tech Specs, updated x2)

Here's a breakdown of threefour five prominent 7 inch tablets - centred on content, books and magazines - that have just been released or are just about to be released. I hope that it helps in the important decision of which to buy.
KoboArcNexus 7Kindle Fire HDiPad miniNOOK HDPrice£159 (16 GB), £189 (32 GB)£159 (16 GB), £199 (32 GB), £239 (32GB with HSPA+)£159 (16 GB) or £199 (32 GB)Wi-Fi models: £269 (16 GB), £349 (32 GB), £429 (64 GB); Wi-Fi + Cellular: £369 (16 GB), £449 (32 GB), £529 (64 GB)£159 (8GB), £189 (16GB)Available ColoursBlack and White BlackBlackBlack and White Smoke and SnowConnectivityWiFi 802.11 b/g/n and Micro USBWiFi 802.11 b/g/n, Micro USB, and Bluetooth, NFCDual-band, dual-antenna Wi-Fi (MIMO) b/g/n, Bluetooth, USB 2.0 (micro-B connector), Micro-HDMI (micro-D connector)Wi-Fi model: Lightning connector, Wi-Fi (802.11a/b/g/n; 802.11n on 2.4GHz and 5GHz), Bluetooth 4.0 technology; Wi-Fi + Cellular: Lightning connector, Wi-Fi (802.11a/b/g/n; 802.11n on 2.4GHz and …

Android - Simple User Interface - Activity, Intent, Extension and Extras

Google provides a good tutorial called 'Building a Simple User Interface' for beginning Android development, the first part of which is intuitive and informative. In this post I look at the extension of Google's code to incorporate an activity.

The activity involves sending and displaying the string entered in the text field used in the tutorial, and is split across three files, which are all contained in the src folder of the app:

src->com->example->simpleuserinterface->MainActivity.javasrc->com->example->simpleuserinterface->DisplayMessageActivity.javasrc->com->example->simpleuserinterface->AndroidManifest.xml
And here they are in order with comments added. The first (ActivityMain) is the heart of the app.
package com.example.simpleuserinterface; import android.os.Bundle; import android.app.Activity; import android.content.Intent; import android.view.Menu; import android.view.View; import android.widget.EditText; public class MainActi…

The Secret Life of a CALayer (Part 4): Setting Shadows (Xcode)

This is a very simple update to the previous project. I want this time to add shadows. We do this by amending the viewDidAppear: method from last time, as shown here:


-(void)viewDidAppear:(BOOL)animated {     [superviewDidAppear:animated]; blueLayer = [[CALayeralloc] init]; positionOne = CGRectMake(100, 100, 100, 100); blueLayer.frame = positionOne; blueLayer.backgroundColor = [UIColorblueColor].CGColor; blueLayer.name = @"One"; blueLayer.contents = (id) [UIImageimageNamed:@"plane"].CGImage;     [self.view.layeraddSublayer:blueLayer]; redLayer = [[CALayeralloc] init]; positionTwo= CGRectMake(100, 400, 100, 100); redLayer.frame = positionTwo; redLayer.backgroundColor = [UIColorredColor].CGColor; redLayer.name=@"Two";     [self.view.layeraddSublayer:redLayer]; yellowLayer = [[CALayeralloc] init]; positionThree = CGRectMake(400, 100, 100, 100); yellowLayer.frame = positionThree; yellowLayer.backgroundColor = [UIColoryellowColor].CGColor; yellowLayer.name = @"Three"…

The Secret Life of a CALayer (Part 3): CABasicAnimation (Xcode)

CABasicAnimation is one of five types of animation available to a CALayer, the others being CATransition, CAAnimationGroup, CAPropertyAnimation,  and CAKeyframeAnimation. And we are going to use it in this post to animate the hitTest from the previous post.

To do this we need first to extend the interface of our .m view controller from last time to look like this:


@interfaceHitTestViewController () { CALayer *blueLayer; CALayer *redLayer; CALayer *yellowLayer; CALayer *greenLayer; CGRect positionOne; CGRect positionTwo; CGRect positionThree; CGRect positionFour;

    CALayer *hitLayer; } @end

Next we're going to alter the -viewDidAppear: method:


-(void)viewDidAppear:(BOOL)animated {     [superviewDidAppear:animated]; blueLayer = [[CALayeralloc] init]; positionOne = CGRectMake(100, 100, 100, 100); blueLayer.frame = positionOne; blueLayer.backgroundColor = [UIColorblueColor].CGColor; blueLayer.name = @"One"; blueLayer.contents = (id) [UIImageimageNamed:@"plane"].CGImage;     [se…