NetTalk Central

« previous next »
Pages: [1]

Author Topic: Site adapted for mobile use  (Read 5538 times)

Poul Jensen

  • Full Member
  • ***
  • Posts: 189
    • View Profile
    • Email
Site adapted for mobile use
« on: April 30, 2011, 10:25:45 AM »
Hi,

An example app or demo site customized for mobile use (Android, iPhone) would be nice.
Also any guidelines on how to modify the css for this use would be great.

Cheers,
/Poul
Logged

Wolfgang Orth

  • Sr. Member
  • ****
  • Posts: 251
    • View Profile
    • oData Wolfgang Orth
Re: Site adapted for mobile use
« Reply #1 on: May 01, 2011, 06:09:40 AM »
Poul,
despite the fact that Bruce is not overly happy with this kind of approach, I used the iWebKit http://snippetspace.com/projects/iwebkit/ to make such a mobile website.

http://mobilentws.zapto.org/index.html

I used an older version of iWebKit which looks damned ugly on Desktop browsers like FireFox or IE but okay with Safari or Chrome - because they both use the Apple WebKit-Engine, same as the mobile devices do.

An additional remark: my example still has a bug which neds to be fixed. The FORM has two browses on the tabs. When you then add records at these two browses, the main form is empty when you get back. When you activate the adress-bar of the browser and press enter, the form is then filled correctly again. While pressing the reload-button or F5 force a reload.

This problem has nothing to do with iWebKit. It also happens when its not involved, so blame it on me.

Take a look at that example with a moble phone. Unfortunately you have to use the entire URL to get there, because it is located in a subfolder and Nettalk spits an error if you do not add /index.html. I would like this to be improved in NT6  ::)

hthab
Wolfgang
Logged

Poul Jensen

  • Full Member
  • ***
  • Posts: 189
    • View Profile
    • Email
Re: Site adapted for mobile use
« Reply #2 on: May 02, 2011, 07:43:40 AM »
Hi Wolfgang,

Looks great on my Android !

What particuarly is Bruce unhappy about ?

Is it difficult to implement on a NT server ?

Chher
/Poul
Logged

Wolfgang Orth

  • Sr. Member
  • ****
  • Posts: 251
    • View Profile
    • oData Wolfgang Orth
Re: Site adapted for mobile use
« Reply #3 on: May 02, 2011, 08:10:50 AM »
> What particuarly is Bruce unhappy about ?

As far as I understood Bruce it is about flexibility.

Of course, CSS is gives you allpossibilities, but you still can use CSS while the browses and controls are injected into an existing HTML-skeleton.

> Is it difficult to implement on a NT server ?

One hour - most time takes to find the correct DIVs in the CSS and play with different values.


This is the basic HTML-page skeleton, spiced with the Nettalk-snippets:

<!-- NetWebServer -->

<html>
<head>

<!-- Net:c:Head -->

</head>
<body>

<!-- Net:theNameOfYourProcedure -->

<!-- Net:c:BodyEnd -->

</body>
</html>

Nettalk will now inject its dynamic contents into the static HTML-frame.

You have to adjust the target URLs at the Browse to point to the correct Form (see at "Advanced"-button) and the Save and Cancel at the Form, to return to the Browse-page.

You also want to build your own CSS-file, based on the Nettalk.CSS. Just rename the approriate CSS-classes with a prefix.

Logged

Bruce

  • Global Moderator
  • Hero Member
  • *****
  • Posts: 11193
    • View Profile
Re: Site adapted for mobile use
« Reply #4 on: May 02, 2011, 10:29:06 PM »
Hi Poul,

>> What particularly is Bruce unhappy about?

There are two ways to approach this problem. The first is to do like Wolfgang does, and embed dynamic data onto static pages. The second is to embed static data in dynamic pages. I should stress that there's nothing you can do with the static pages you can't do with dynamic pages.

I prefer the second approach for the following reasons;

a) it's more "future proof". As changes to NetTalk occur the second approach will likely have fewer compatibility problems than the static approach.

b) Embedding small HTML snippets in your app "forces" you to actually read the HTML that your designer is generating. This has a twofold benefit - first it allows you to reduce, and clean, the html (most generated html is horrible) and second you'll become more familiar with HTML as a language. This will ultimately lead to a much cleaner app on your side.

c) there is a fair amount of functionality, specifically around popups, that won't work in static pages without quite a lot of work (on your side).

I understand that the static approach appears to get you going quicker - and in some ways it does, but at the cost of learning and improving as a developer. As you may know I'm keen for people to learn, and "do things right", so perhaps I'm also biased towards the dynamic approach for that reason.

cheers
Bruce
Logged

bshields

  • Sr. Member
  • ****
  • Posts: 392
    • View Profile
    • Inhabit
    • Email
Re: Site adapted for mobile use
« Reply #5 on: May 03, 2011, 04:31:02 PM »
Hi Poul,

We've got an iPhone, iPad, Android app built on Nettalk. You can read about it at http://www.inhabit.com.au/Mobile/Salesperson.html. Click on the screens for a better view of what we've done.

It used iWebKit as a base, but it needed improvement for android and chrome/safari compatability. It will give you an idea of what is possible.

Regards
Bill Shields
Logged

peterH

  • Sr. Member
  • ****
  • Posts: 413
    • View Profile
Re: Site adapted for mobile use
« Reply #6 on: May 06, 2011, 02:44:33 AM »
Hi Bill,

That's very impressive!

May I ask if you've accomplished this by calling different procedures for different platforms or are you having just one procedure and letting iWebKit take care of the formatting and styling etc.?

Peter
Logged

bshields

  • Sr. Member
  • ****
  • Posts: 392
    • View Profile
    • Inhabit
    • Email
Re: Site adapted for mobile use
« Reply #7 on: May 06, 2011, 05:05:56 AM »
Hi Peter,

I have two version of Freedom.

But before I get started its important to point out (disclose) that we dont just use normal NetTalk. I use NetTalk as a server like Apache or IIS. We use lots of Bruces tools and functions, but much of the programming is via NetWebPages (not forms or browsers). Mostly due to the fact that the entire user interface experience and methodology is different (or should be!) on mobile devices. Browses need very smart searching (not locators, think iOS). But, this in no way at all reflects poorly on NetTalk quite the contray, when you use it at this level its totally amazing what you can do. Bandwidth must be completely minimised and when an iPhone/iPad webapp is running from the homepage (not just running from the browser) there is no cookie support and any normal web link (anchor tag) breaks this mode.

Version 1 is only a mobile app (Android, iPhone/iPad, but some people also use it on Chrome or Safari on Macs or PCs). This version reads the useragent field to decide exactly how the formatting will be done. I couldn't use stock iWebKit because its basically just some nice clean HTML5 and CSS3 that helps to simulate iPhone styles.

Other simple tweaks were necessary, we simulate the iPhone date picker on iPhone/iPad, we modded this to make it work on Android (wasn't hard), but on Safari or Chrome we use a jquery date picker.

Version 2 is a normal website application and mobile application at the same time. The system checks the host (URL) and user agent and a number of other factors and decides what version you will see, either the mobile app or the standard app. The standard app is build in pretty standard NetTalk whereas the mobile app is more hand coded.

So to answer your question in short, different procedures because they really don't correspond anyway. NetTalk still pretty much runs the Browse->Form paradigm whereas my iPhone stuff uses Browse->View->Edit paradigm (if you take a close look at the iPhone user interface you'll notice thats mostly how it works).

Regards
Bill
Logged

Wolfgang Orth

  • Sr. Member
  • ****
  • Posts: 251
    • View Profile
    • oData Wolfgang Orth
Re: Site adapted for mobile use
« Reply #8 on: May 06, 2011, 05:45:22 AM »
Bill,

> Browses need very smart searching (not locators, think iOS)

I have no iPhone, so I have no idea about the searching and what is so special about it.

Is it possible to describe in a few lines? thx

BTW: cool app!
Logged

peterH

  • Sr. Member
  • ****
  • Posts: 413
    • View Profile
Re: Site adapted for mobile use
« Reply #9 on: May 06, 2011, 06:34:04 AM »
Bill,
Thanks a lot for sharing. Very inspiring!

Regards
Peter
Logged

bshields

  • Sr. Member
  • ****
  • Posts: 392
    • View Profile
    • Inhabit
    • Email
Re: Site adapted for mobile use
« Reply #10 on: May 07, 2011, 12:57:12 AM »
Hi Wolfgang,

Typically the iPhone will have one little search box at the top of the screen and there isn't room to let them choose what fields it might search on. (we're designing for 320px wide as a minimum - iPhone3).

So we use one search box for all things, so depending upon what they type into that box will depend on what we search for (thats basically the cool and also obvious bit). We almost always do "contains" not "begins with" so it seems smarter to the customer.

So if it "looks" like a phone number we'll search all phone, fax, mobile fields (in Australia its also easy to spot a mobile so we can search specifically for it).

It might look like a email so we'll search that field.

If we are unsure we'll search all important fields (name, address, phones, email, etc, depending upon the database i'm in).

This is where the browse needs to be smart, we'll only show the first (say) 20 results then in typical iPhone style you can ask for more results and it will go get them. We also have a rule that no search can take more than 15 seconds, so if it does, well stop, tell them that it took too long, give them the results we found in that time, and let them ask us to continue (again and again, if necessary - you cant have your program go off for 2 minutes doing a search!).

Its worth mentioning this is only our approach but it mimics much of the nice innovative user interface design of apple.

Regards
Bill
Logged

Wolfgang Orth

  • Sr. Member
  • ****
  • Posts: 251
    • View Profile
    • oData Wolfgang Orth
Re: Site adapted for mobile use
« Reply #11 on: May 07, 2011, 04:20:58 AM »
> Typically the iPhone will have one little search box at the top of the screen

aha - seems as if I need an iphone also just to lern and trap those things ....  and an iPad, and a Xoom, and a Blackberry ... and ... and ... (too bad that this is not good for an excuse <g>)

> So we use one search box for all things, ...

I have begun to add a quite long string to the records where I concatenate all important fields, NAME & ADDRESS & CITY & PHONE & whatever and then do a "Contains"-search.

Thx,
Wolfgang
Logged
Pages: [1]
« previous next »