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)

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.

Anyway, I wanted to see what I can do with transitions and animations in webkit, and I made this :

Css only (well almost) analog clock

Click the Image to see the live demo

Support :

Firefox + Webkit browsers
In firefox I use javascript to move the properties
In Webkit, all the animation and the calculation is in CSS!!
I did cheat however : I used js to determine the current time. Now way to do that in css. I didn’t want to include jquery here, as u can see all the code is pure js, but I had to because it’s dufficult to do browser detection properly with js.

Lessons learned :

• CSS3 is awesome!! Especially the way webkit does it (transitions, animations)
  But it still has a LONG way to go untill we see compability cross browsers
• In Safari and Mobile safari, the arrows were jagged untill I gave the css-shadow, So it seems that giving this property turns on antialiasing somehow. Cool

I’ve decided to learn more about html5, since Google and Apple and a lot of these BIG companies say it’s the future.

I went to http://canvasdemos.com and was amazed that all this can be achieved with canvas tag.

I specifically liked the blowing up video into pieces , check it out, it’s AWESOME.

Sean from craftymind.com has done and amazing proof of concept, you should really check it out. I played with it and then realized, that clicking is the only interactivity there is and it seems that there’s more there. much more.

Here’s what I came up with :

Click on Randomize Pieces to explode the video to pieces and Begin assembling.

demo2 has video courtecy of bigcbuckbunny movie and lots more pieces (use chome)

I’ve decided to try and make something using the drawImage() method for the canvas, and inserting the video feed.

Goals :

• Learn a bit more about <canvas> ,html5 ,  video encoding
• Use tools I know to interact with the new stuff (jquery, css)
• Create something awesome!
• Make it fun

The idea:

The idea was simple, take Sean’s example, and add interactivity, first I was leaning towards making a “pyatnashki” ор fifteenpuzzle puzzle game, only using video, but then I decided it’s cool to leave it as a regular puzzle without constraints.

The actual work:

First I had to use some movie, it had to loop good enough, since as it turned out later, video puzzle isn’t really easy. I’ve used video shot by my uncle I offcourse had to format it properly, well it turns out, right now there are weird ways to input <video> in html, since webkit browsers support h.264 and webM and firefox supports theora codec.

I’ve re-encoded the video to 2 files ( .ogv and .mp4) using this tutorial : http://diveintohtml5.org/video.html

I then had to choose what will I do the actual interactivity with, the canvas itself, or DOM elements. I’ve chosen DOM elements, that maybe slower, but it’s a diferent approach then I’ve seen, plus I already know how to manipulate DOM, and can use that to my advantage.

I’ve created a factory function, that picks up on original video width and height, and takes the number of pieces that I want, and creates the necessary amount of canvas elements.

I then use drawImage each frame of the video, and copy pixels to each canvas according to their location on the matrix.

SEE DEMO HERE

Step one : xHtml markup

I decided to use the most basic structure. 2 wrappers next to each other, one containing the actual tabs, the other the relative content to each tab. Both elements(tabs and content) receive the ‘active’ class when their are in fact active.

<ul id="tabz">
<li class="tab active">Tab1</li>
<li class="tab ">Tab2</li>
<li class="tab ">Tab3</li>
</ul>
<div id="tabz_cont">
<div class="cont active">Content 1</div>
<div class="cont">Content 2</div>
<div class="cont">
<h1>some other content</h1>
Content 1
</div>
</div>

Step two : Css

I used a grid system (http://960.gs) to position and give widths to all the elements, beside that, I used some css3 techniques to beatify my tabs (rounded corners and shadow).
The actual css you use, isn’t important to the work of the tabz.

Step three : JAVASCRIPT

This is the reason why you are reading this, right? here you go:

//Tabz code - apply event to the tabs elements and your done
$('#tabz li').live('click',function(){
_index = $(this).parent().children().index($(this));
$(this).addClass('active').siblings().removeClass('active');
$('.cont').removeClass('active').eq(_index).addClass('active');
});

I select the tabs and assign them a click event listener, with the live() function.

Then I create an _index variable, that will tel me the index of the tab inside it’s parent.

By this _index I can now show the relevant content in the content div(the tabs and their content have to be the same index in their respective containers)

That’s it. Hope you can use this. If you do, don’t forget to comment here and show me your work.

I’s a consept website, in flash, I created some time ago and didn’t finish.

It has a couple if nifty things to play with (draggable birds, media buttons in form of floating balloons,a very unique panoramic background)

And I decided to port this whole thing into JS with MooTools and it’s FX.Scroll function.

So in the next couple of days I will be posting the results here and the code also.

Cheerz