iPad simulator in HTML and JS

Written by Alex Wolkov

Posted

Let me tell you what a crazy week it’s been regarding my iPad Simulator

A little background

I’ve thought about creating the iPad simulator shortly after I bought my iPad. I was fascinated by the UI and wanted to see if I can recreate it.

This isn’t the first online simulator I’ve built, before this, was a Nokia n97 simulator, also built with JS + CSS  (http://nokian97.co.il)

I’ve uploaded the iPad simulator a while ago, started playing with it, adding apps  (google maps, safari, photos etc’) , and I was getting 5 hits daily (most of them me from work)

iPad Simulator with html + css + javascript (jQuery)

Forrst

I joined Forrst and decided to share it with the forrsters , and I got amazing feedback. And people there told me they want to hack on it, so I’ve released the code on github.

W3c Israel

Some weeks after, I went to a W3C Israel meeting on web app development and after a short hackaton (results of which you can see  here and fork on github ) I’ve showed the guys there the iPad simulator among other things. They told me I have to publish it somewhere. I’ve sent an email to [email protected] and went to sleep.

Morning After

I wake up, and I see that someone mentioned me on twitter (I’m @altryne) and he talked about my iPad simulator. I went and checked google analytics and I was amazed to see that while I was sleeping more then 2000 unique hits arrived at my site.

Twitter

Turns out my site was a hit on twitter, with guys like Dylan Schiemann (@dylans), Jesse Newhart (@JesseNewhart),Dion Almaer (@dalmaer),Cameron Moll (@cameronmoll) and a lot more – thanx a lot guys :) I’m glad you like it.

Websites and blogs

Like I said, I never expected this kind of embrace by the community, and I certainly was surprised to see my link in the guardian tech blog and on Developer.Yahoo.com tech blog and I was proud.

Also I was featured on habrahabr.ru , techweb.com.cn, Ycombinator, macmagazine.com.br and event 1 youtube video!

What’s next?

Well I read all the comments I could find, including the trolling and I have a ton of stuff to do.

One thing I was thinking about, is showing a web demo of some iPad applications, and ask developers to provides those demo’s, because screenshots are too static :)

If your’e an iPad app developer and want to see your app in the simulator, contact me : alex [at]  alexw.me

I’m also gonna finish my photos app and it’s gonna be awesome! Stay tuned.


←  Older Comments
 →
  • Oli

    nicht ausgereift

  • Oli

    nicht ausgereift

  • http://www.facebook.com/rudiahlers Rudi Ahlers

    Hi, 

    Would it be possible for you to add the Mail client to your emulator? I need to make some training videos and don’t own an iPad. Your emulator is the only one I got that works

  • Anonymous

    hmmm nope, i’m not currently working on it, in addition, there’s no way I know of of building a full web mail client without some serverside…

  • Fsalapong

    Would be nice to have the Settings feature emulated. Overall, nice simulator! Keep up the great work

  • R2D2

    This iPad simulator is great, the thing is missing in option to scroll with the mouse when pages are to width for the screen.

  • Thedarkzero

    i tried the simulater it’s awesome! you need to add more to it though. a little more work, and it would be awesome!

    i know it’s near impossible, but having the app store on there would be to good to be true.

  • http://bcmoney-mobiletv.com/ BCmoney

    Perfect example why we can do everything that expensive devices can do, and more, using a much simpler web technology stack… HTML5/CSS3/JS2/LAMP 4TW!

    Still need something to render and view it though, but the core capabilities that devices need is decreasing everyday, pretty soon a few chips and any projection screen or monitor will be all we need!!!

  • Caroline Elisa

    Nice! Just one thing…

    As the iPad displays scaled webpages fine, I wanted to use the following to exclude the iPad from displaying the mobile version of my site. I’m fairly certain the code is legit, as when I replace ‘ipad’ with ‘iphone’, it works on my iphone…

    add_action( ‘wp_head’, ‘my_mobile_meta’, 11 );function my_mobile_meta() { if ( !preg_match( ‘/ipad/i’, $_SERVER[‘HTTP_USER_AGENT’] ) ) {  echo ”; }}

    Will this sort of code eventually work on your simulator?

  • Lawrence Null

    Hi I downloaded this from github and tried installing it on 2 different servers. The main page loads as does the springboard, but when I click an app it says page not found. Do I need to change the root address somewhere? I’ve searched but cannot find it. Any help on this would be greatly appreciated. 

  • Lucian

    I wonder how do I add a new app(page) and how do I add a header and a footer ? hope i get a solution :) nice script !

  • psikeyken

    vk.com

  • Micael

    Can I please use your source? (non commercial)

  • altryne

    yup, it’s all hosted on github, and the link is in the post :)

  • http://www.facebook.com/jonathan.winney.1 Jonathan Winney

    Hi, I just stumbled across your fab iPad simulator and have tried adding some apps of my own.
    I’ve added an iframe with a swf file in it – in which works great. The only problem I have is: how can I make it so the ‘app’ is destroyed when clicking the home button? I don’t want the swf file to continue in the background. Many thanks

  • Mr D

    I can’t scroll down webpages on the safari app. What am I doing wrong?

←  Older Comments
 →