As an ongoing effort to make my website as accessible as possible, I’ve decided to make an iPhone friendly version of my website.
While searching through google I discovered iWebkit. iWebkit is a site template that makes creating iPhone websites a breeze. By dropping the files on your server you can create a website by following the included guide.
This will be the first in a series of posts showing you how to create a killer iPhone site using iWebkit.
Part 1: Installation iWebkit can be downloaded from the www.iwebkit.net. I suggest that before you do anything you set up a subdomain for your iPhone site (i.e. iphone.gimpneek.com) this can be done in your control panel for your website and makes it easier for users to remember the url.
Once you have the subdomain set up, open the iWebkit folder and copy the contents of the framework folder into the subdomains root folder. When you view the site you will see an empty iPhone style page. If you don’t see this make sure you have copied all the files into the folder on the server.
You can edit this page by adding the various HTML code to the file. First off we’ll be building an ‘Under Construction’ page. This will let anyone viewing the site that we are still working on it and give them a way to view your normal website.
Editing the template
The body of the page is made up of 3 divs: topbar, content and footer.
Topbar contains everything that will be in the header bar, so things like the page title, any navigation elements etc.
Content is where you’ll be adding your content (duh…). This can contain lists, pictures and paragraphs of text.
Footer contains the made with iWebkit text, though you could add copyright information.
Inside the topbar div add the following code:
div id="title">iPhone /div
div id="leftbutton"> a href="http://www.example.com"> Normal Site /a /div
This will add the page’s title and a button on the left that leads to the non-iPhone version of your site. This can be replaced later with a home button.
In the content div add the following code:
ul class="pageitem"
li class="textbox"> This site is currently under construction, please come back later /li
/ul
This will add a text box to the page. You can split up page content by using different ul and li tags.
You don’t need to change the footer just yet. So at the moment your page is just a static website that says the page is under constuction. In the next post I’ll show you how to add a popup that alerts the user that the website is still under construction and navigates them to your normal website.
I’m currently in the process of making a dark ish song for a friend of mine and I’ve just encountered the Afghanistan Rabab loops, every loop is basically a metal riff, makes me want to start listening to world music
I got dj hero yesterday and though I’m finding the game quite hard on medium it’s still an enjoyable game. More importantly though I’ve managed to hook my ps3 dj hero controller upto my mac and using gamepad companion I’ve been ae to get the turntable controller to work (but it only reacts to the heaviest of pushes) the turntable uses the z axis to work and so has to be programmes to use multiple presses if you want it to do anything in GarageBand. Hopefully there will be an app that uses the controller at some point ( especially if I look at makin one :p). An interested side note is that it registers itself as a guitar hero 5 controller. This could mean that existing guitar hero 5 controller midi drivers may work with the turntable.
As I one day want to become a games programmer I’ve decided to take it upon myself to create some short little games to learn the basics of games mechanics before I step up to programming something worth while.
The first of these games is Pong, a classic and the best way I thought, to start learning games programming techniques. It’s taken me a few days (thanks to work) to finish it and a playable (no sound due to a processing export screw up) version is up and running in my newly made portfolio folder. I had originally had some awesome sound effects along with the game but for some reason I couldn’t export it with the minim intergration (you can download the folder here if you want)
The game is the classic Pong with 3 difficulty modes, the colours pulse from black to white (for fun more than any game play reasons) I have noticed a 1 bug, but its nothing major (when choosing hard it takes the ball one bounce to come upto the correct speed). If you do come across a bug please leave it in the comments.
The source is fully commented if you wish to learn from it. I’ll be uploading the audio file that was supposed to be accompanying the game
I’ve decided to release Vimeo for Wordpress 1.2 without the Visual Editor intergration, this is because to add this intergration I will need to add a hell of a lot more code and I want to clear my Today list in Things….
1.2 is a minor update to 1.1.9 (it basically just sorts out the colour picker) but I’m hoping to release 1.3 next week with the visual editor ‘greatness’
I’m gearing up for the 1.2 release of Vimeo for Wordpress now. There’s a few features I’d like to add before I let it into the wild but this latest release adds comments to the videos ( so you can tell what the embed code actually does), It fixes the issue of the colour picker’s box being at the bottom of the page (though the CSS isn’t quite perfect yet) aswell as a few other things.
As usual I’ll put up a few examples of how it all goes plus some screenshots.
So Here’s the first one:
Using the new commenting system it’s easy to see what your videos are and it’s even easier to select them and delete the code
Here’s the second:
When you add a video in the manual entry box there’s no way of the plugin knowing what the video is so it just gives some default code
Only a quick update that adds the group URL fix (see last post) and adds a nifty little box on the admin page to help with the hex values, expect a follow up release which will add a popup from which you can choose colours from (this is currently being delayed by CSS issues)
When you type in your hex code into the text box in the admin page and click off the text box it will update the colour next to the text box. As I said just now, this is a temporary measure until I can sort out the CSS
I realised that the manual entry box for my Vimeo for Wordpress plugin is lacking a feature. When you view Videos as part of a group you will view a different URL (so that you can see group only comments) this URL wont work well with the current manual entry box as the code at the moment just strips the http://www.vimeo.com/ part of the string. I’m hoping to just take out the numbers from the string (here’s hoping that Vimeo doesn’t allow numbers in group names).
This is a test of the Group URL, working perfectly using inputstring.match(/\d+$/)[0]; which outputs the numbers
This is a test of a Group URL with a number in the Group name using the same function as above, working perfectly
I’m always looking for a great app on my mac that will let me edit this blog in the way I want. I’m currently trying out Blogo, It’s a stylish app made by Brain Juice which is easy to set up, which is good because I’m trying to get Leanna into blogging.
Anyways I’m hoping that Blogo will help me improve my posts
