Wolfgang.Schmidetzki.Net

Fotos und mehr ...

WebApps for iPads

Is it really necessary to develop native apps in objective C and go through the app-store procedure to publish it? I was interested to learn how difficult it would be to develop a web-app that feels like a native app on an iPad.

And here is my first result: My blog in a special iPad layout (of cause best viewed with an iPad, but it works also - mostly - in desktop Safari and FireFox).

That's what it looks like (click on an images to enlarge it):

img_0006-190.png img_0008-190.png img_0007-190.png

This layout works completely without JavaScript. And it does not contain any layout graphics. It's just CSS3.
The WebApp has a fixed header and footer and a scrollable content and navigation area. Just like most typical iPad Apps.

Navigation changes when you switch from portrait to landscape.
In landscape mode you see a left hand navigation. In portrait mode you get a navigation button on the top and the navigation is shown as a popup when you click this button.
In addition I moved the normal "sidebar" of my blog to another popup on the right.

Note:
If you open this special site layout in desktop Safari or FireFox you can simulate landscape and portrait mode by resizing the browser window: If the width of the window is smaller that its height, the layout switches to portrait mode.

No JavaScript

Well - that's not completely true. As I mentioned in my last post, mobile safari is not able to scroll in div's with overflow=auto|scroll|hidden. I use a small piece of script to emulate the scrolling. But the layout itself - including the popup areas - don't use any script.

Here is how it works:

Different CSS for portrait an landscape

Just use the following code in the HTML head:

<link rel="stylesheet" media="all" href="basic.css">
<link rel="stylesheet" media="all and (orientation:portrait)" href="portrait.css">

The second stylesheet will only be used if the ipad is in portrait mode.
If your left hand navigation is contained in a <div id="nav">...</div> the basic.css has #nav{display:block} while protrait.css says #nav{display:none}. That's it.

Popup's without JavaScript

To show one of the popup's I could use a simple onclick-script on the buttons to show/hide the corresponding popup-area. In addition you need a script for an window-click to hide the popup.

However I used a method that works without such a script.
Here is the code:

<button onclick="this.focus()">Navigation
   <div id="nav">...</div>
</button>

The navigation div is contained inside the button HTML code.

I used the following simple CSS to enable the popup:

#nav{display:none}
button:hover #nav{display:block}

Because the button does not get the "hover" automatically on click  (and I have no idea why this is the case) I do this manually by adding onclick="this.focus()".

(UPDATE: changed CSS code from :focus to :hover because we get problems with links inside the popup otherwise)

No Grafics

CSS3 has excellent features to create gradients and I used them for the header and footer as well as for the popup's. Even the small arrow in the popup's is done in CSS by "transforming" a <div> using -webkit-transform: rotate(45deg).

Native Apps vs. WebApps?

There are plenty of apps in the app store that simply can't be implemented in a browser.

On the other hand there are also many apps in the app store that could easily be implemented just using CSS/JavaScript and running in the iPad browser. All RSS readers I have seen so far are examples for this.
The advantages: no installation, no individual updates and Apple will not review your app.

Bitte geben Sie hier Ihren Kommentar ein:

Verwende Markdown Syntax

Twitter

Powered By

  • OpenWGA Blogs 2.3.2 Build 128
    Running on:
    OpenWGA Server 7.0.14 Maintenance Release (Build 641)
    www.openwga.com