RSS Feed   Twitter

iPad simulator in HTML and JS

January 10th, 2011 Altryne

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 ajaxians@ajaxian.com 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.


Posted in Personal, Playing with stuff Tags: , , , , , , ,
«
»
You can leave a response, or trackback from your own site.
← Older Comments
Newer Comments →
  • Anonymous

    do your apps have web-app equivalents? if so you can contact me at alex at alexw.me
    If your apps are native apps, this simulator won’t run them as this is just a web simulator :)

  • Anonymous

    Sorry for the super late reply, but it seems as though u have problems with your host rather then my code.
    Did you just download the site, or did u fork me on github?

  • Ifeatu

    Unfortunately they are native. This is a great utility anyway though…good job!

  • clara :)

     amazing! 

  • Praveen Verma

    Hi Alex,

    This is great! Thanks for creating this neat online simulator. I have developed an ipad app and want to test it on your iPad. Please guide how to go about it.

    Thanks,
    Praveen Verma
    praveenkvma@hotmail.com

  • Anonymous

    Hey Praveen!
    Thanx!
    You basically need to do a html5 version of your app so you can insert it in the simulator and then contact me so I can put it in there

  • Anonymous

    Rocks! This is real real cool!! It is just what I am looking for!

  • Anonymous

    Rocks! This is real real cool!! It is just what I am looking for!

  • Anonymous

    Rocks! This is real real cool!! And it is just what I am looking for! Thanks a million for this great job!

  • Anonymous

    Rocks! This is real real cool!! And it is just what I am looking for! Thanks a million for this great job!

  • Anonymous

    Me 2, trying to build a application based on this simulator.
    Apps in this simulator will be shown in iframe, sure that they are web pages, however it is better that do not show the scroll bars in the iframe, I am considering that when mouse moving from buttom to top, the page can scrolling down. Is this possible? Thanks in advance for this dumb question and THANKS AGAIN FOR THIS SPECTACULAR JOB!

  • Prof_chai

    Can i get code is it

  • Anonymous
  • Prof_chai

    Thaks a lots

  • http://twitter.com/ReginaMalloy Regina Malloy

    this is great!

  • http://twitter.com/ReginaMalloy Regina Malloy

    this is great!

  • http://twitter.com/ReginaMalloy Regina Malloy

    this is great!

  • http://twitter.com/ReginaMalloy Regina Malloy

    This is great work! Using it to test my first wordpress website using the wpTouch plugin. Keep up the good work!

  • Anonymous

    Thanx Regina,
    Please keep in mind that this is an UNRELIABLE test, as I only fake the user string, and this is not really an ipad simulation. 
    Mobile Safari  results may differ

  • Anony Mouse

    I know I’m extremely late, but I found something similar to an app market for your simulator: http://openappmkt.com and http://zeewe.com... would be nice if you had those and downloadable apps, etc.

  • Anony Mouse

    I know I’m extremely late, but I found something similar to an app market for your simulator: http://openappmkt.com and http://zeewe.com... would be nice if you had those and downloadable apps, etc.

  • Anony Mouse

    downloadable as in downloadable web apps, not native apps…

  • Anony Mouse

    also, google maps has a mobile version (html5) nothing like the ipad version, but still google maps…

  • Anony Mouse

    downloadable as in downloadable web apps, not native apps…

  • Anony Mouse

    also, google maps has a mobile version (html5) nothing like the ipad version, but still google maps…

  • Anonymous

    The one in openappmkt.com is this exact one :) they kinda stole it

  • oli

    You can Kaokik Desing Z ?

  • oli

    Where is the bottom part of the iPad

  • oli

    Rde the iMovie app w [I program with JavaScript

  • oli

    Rde the iMovie app w [I program with JavaScript

  • oli

    Rde the iMovie app w [I program with JavaScript

  • oli

    You need a fixed memory slot for The App Notes

  • oli

    You need a fixed memory slot for The App Notes

  • oli

    You need a fixed memory slot for The App Notes

  • Anonymous

    As much needs to be done!

  • Anonymous

    In Safari you can not scroollen

  • ScrappyLuv

    I really love your iPad simulator and it has helped me with some testing.  I was wondering if you could tell me why the follow URL does not show using Safari inside your simulator: (test.salesforce.com)  

    When I enter the URL above a new page is opened and leaves your simulator page instead of opening the page inside your simulator.

  • Bestlove1018

    hello! I want ask a question to  you.
    you are list  the work item . and one of items is
    Moving Screens left and right with “spring” effect.
    what is the “spring” effect mean?

  • Anonymous

    It means the page is bouncing back when overscolled

  • Anonymous

    it seems they have an iframe protection.

  • Gzsgcs

    great app I have ever seen

  • Julianaqp

    hi, I wonder if there is any way I could play the games (apps for Ipad)  I’ve  downloaded from itunes and installed on my MAC? I’m a big fan of board games and there are some great apps for Ipad, but it’s seems like i’ve got to have an Ipad in order to play them! Thanks a lot
    juliana quintero

  • wd

    I tried a site on your simulator and on my ipad .. they look different. Works on the ipad, but your simulator breaks the display.
    Not very accurate, methinks.
    nice though.

  • Shihafath

    Very good  iPad simulator, I really enjoyed , thanks

    I was wondering if you could tell
    me how rotate function works ( is there any keys ? , short cuts ?) . 
    cz I want
    to test my web application using Safari inside your simulator

  • OMG

    posting with this ipad simulator

  • http://www.facebook.com/people/Ashish-Ranjan/100000079116811 Ashish Ranjan

    facebook doesn’t work!!!!!!

  • http://www.brandimation.com Robert

    Alex, this is really cool, but I can’t hit my website through the Safari browser within the simulator… I investigated and I believe there’s a poisoned nameserver out there for my domain. Could you please let me know what nameservers this simulator is hitting?

  • Anonymous

    hey Ive been making something similar for my site, but this looks way better. Where in the code do I add new iframe apps that would render like the safari app? Im not real good with PHP

  • Oli

    nicht ausgereift

  • Oli

    nicht ausgereift

← Older Comments
Newer Comments →
Twitter Delicious Facebook Digg Stumbleupon Favorites More