Browsing articles in "Blog"

New IOS 6 iTabbar CSS

Oct 13, 2012   //   by itabbar   //   Blog  //  No Comments

I did a new iTabbar CSS who look like the new IOS 6 tab bar desing

iTabbar IOS6

iTabbar IOS6

Test it live

Create a real Native app with iTabbar

Oct 12, 2012   //   by itabbar   //   Blog  //  No Comments

Today i wanted to create a real native app with Phonegap

iTabbar on IOS

iTabbar fullscreen on IOS

After looking for all download sdk files from all device to create a native app for all devices and trying to make it work is a pain. If you want to compile for ios you need a Mac. But i find a easy way to create a Native app, PhoneGap build.

I read a lot about it in the last few days and i wanted a fast easy way to create a real Native app. I found that you can compile your app in the cloud with adobe PhoneGap build. You can create a real Native app out of your web app in minutes for almost all devices.

On the build PhoneGap web page, ask for a new Adobe id because sign in with Github didn’t work for me. To test it, i started with the Phonegap-start kit. Here the doc on Build Phonegap. I forked the project to my Github page and process it in Phonegap build page. By the way, i just find a new software to manage your Github account and project. Thank’s Github i waited a year to have this kind of software i wanted to easly manage your project. (Read how to manage your Github project to go to the next step)

After setting all thing for my test app, i clicked the build button and in 2 minutes i add 6 Native apps from the PhoneGap start kit. In build PhoneGap, they give you the QR Code to get a link to download your new app, i scanned it from my Android phone and download it the my device, open the app and wow, it work right away.

Now i wanted to test it with my iTabbar web app. (iTabbar on GithubRead about iTabbar and download it) I open my iTabbar files from my computer and copied all files and folders to the ‘www’ folder where Github sync my repo files, usualy in Window -> User -> my documents-> Github-> and for this project in the phonegap-start folder.

I renamed my demo.html file to index.html. After that i commit the new files and sync all files and new folders to Github with the Github window software.

Here on Github, a basic iTabbar for PhoneGap-start on Github (it may only be a very basic version that i have to update)

Now just return to the Build PhoneGap web page and click the Update code and rebuild button, It will compile all your new project from the new Github files.

iTabbar Phonegap Native App qr code

Download Android iTabbar Native App

I scanned the QR code to download my lattest version on my Android phone, at first the update didn’t work well, i don’t know if it was because i dindn’t click the Update code button from Build Phonegap, i did just click Rebuild all. I uninstalled the app from my Android phone, clicked the Update code on Build PhoneGap page, it automatically Rebuild after clicking Update code. Scanned the QRcode again, download the app, install it and open the app and…… Yeah! it’s worked Youhou, i was so happy snif…

At first, building a app from a webapp with Phonegap with all these sdk softwares to download for all devices, setting and compiling discourage me to create a real app, but with the Build Phonegap tools it’s so fast and easy that i give it a try and make a real app in minutes. With the right tools, iTabbar, javascript, html5, css3, jQtouch, iscroll, jQmobile and the next one i will try for a next project jQmobi (More on jQmobi latter). Your can create a real Native app in no time.

iTabbar update – Mobile web application

Mar 21, 2012   //   by itabbar   //   Blog  //  13 Comments

Some importants update was done on iTabbar and the script in general.

  • Now iTabbar hide address bar on IOS (iPhone/iPod/iPad) and Android on browser navigation.
  • Fix the fixed tabbar position to bottom when address bar is hided.
  • New add to home popup in 10 language to encourage users to add your web app to home screen.
  • Some new css in apple.css to show differents content.

iTabbar in Safari

it’s not easy to hide the address bar on Android and harder when your web app support history navigation. Android want to show the address bar and with some actions and setTimeout you can hide it. But every time you load another page or div via ajax with a new hash, the address bar will show and you have to hide it again.

For hidding the address bar i found this excellent script who work well for Android and IOS but doesn’t work if you are using ajax navigation.

I added some code to it to force Android to hide the adress bar when a new hash in the url is called. (fullscreen.js) and another version standalone who may work without jQtouch and need jQuery or Zepto (fullscreen-standalone.js)

 

 

 

Add to home from Cubiq.org

A new pop up to invite users to add your web app to their iPhone home screen.This great script come from cubiq.org, the same guy who make iScroll.

 

 

 

 

When user add the web app to home screen on iPhone, iPod and iPad, everything is fullscreen and really look like a native IOS application.

iTabbar fullscreen

iTabbar full screen after beeing added on home screen

 

iTabbar on iPhone Home screen

 

 

 

 

 

 

 

 

iTabbar website almost ready

Feb 23, 2012   //   by itabbar   //   Blog  //  No Comments

Working on iTabbar was a personal project to develop native app look and feel. I am a creator and have many applications ideas but i’m not a premium developer and i’m not interested in C++ and complex coding.

When i saw that it was possible to create app with HTML5, CSS3 and javascript, i tough that i may create something, but the solutions there’s lack of many features, don’t work well everywhere and doesn’t look like i want. I found jQtouch who was really great but i wanted the fixed bottom and header bar like reall apps. Then i found iScroll, it look promising and i tryed to create my own bottom tab bar and wanted it to look like native app look and feel.

I create create my own bottom bar and called it iTabbar. I want now to make it better and share it with everyone and if people like it and want to contribute and make iTabbar better and more versatile, make it work with other project like jQuerymobil or any others mobile app projects.

Here a iPhone/Android emulator i created for fun and testing mobile web app. (inspired from testiphone)
With the right option, you can see the real mobile page from any website. This emulator fake a iphone user agent and this way, we can see the real mobile page from the url website you enter.

The nexts posts will be about iTabbar and other mobile web app creation subject.

Blog Categories

Categories