Html5 Cross-platform Desktop application - html

I have developed an POS system for a Restaurant in HTML running in Firefox. This is working well, and with some fixes in the about:config file of Firefox I can get it to run relatively smooth (e.g. suppress the print dialogue). However Html does not have full access to printers and scanners the way a native desktop application has.
I'm now looking for a solution that I can develop a native desktop application for Mac and PC but keep what I have, by showing it a sort of "Web View" ( I know this from Objective-C/Xcode programming). The idea is to have the software watch out for links in the HTML code, e.g.
Print Kitchen Recipe
Can anyone give me a hint which language and software development environment I should work with, my current skills are:
Html, PHP, Mysql - Excellent
Objective-C / Xcode - Medium
Javascript - Medium
Thanks a lot for any help

Checkout node.js and its WebKit module. It can run natively packed JavaScript and you can easily write c style extensions to do anything else you need.

Related

HTML5 Application Start

I am going to be creating a fairly large application soon. I want it to be an HTML5 Application, cross platform, and for mobile devices. I also want there to be a Desktop version, and a mobile version.
What tools are there, that will help me to start creating an HTML5 application? I am up for learning any language needed.
Can I use Joomla, as a content management system (since it is an HTML application), since it has module for authentication and other good stuff?
Thank you very much!
If you want to structure an app, there are scaffolding tools such as Yeoman.
If you're looking for a cross platform HTML5 development platform, there is PhoneGap as well as many others.
As for design, look into responsive web design so it works anywhere. You won't get the performance of native applications on mobile devices, but it's getting better all the time.

Firefox OS 'HELLO WORLD' development

i want to develop apps for Firefox-OS but i simply cant understand where to start from. Okay i have firefox Os simulator installed, i got my notepad open, I know html 5, css3, JS, jQuery bla bla bla...I googled but simply couldnt find the tutorial for HELLO WORLD FIREFOX OS app. any help guys. thanks
As far as "Hello World!"-type of beginner-applications concerned, I think fxosstub is as close as it gets. Also as you will most definitely want to work with some of the Open Web API-s, so I'd recommend studying Robert Nyman's Firefox OS Boilerplate App, which itself, is based on the above mentioned fxosstub application, and is a great way to learn a thing or two about the Open Web API-s and about accessing the mobile device hardware through JavaScript API calls in Firefox OS.
Those two articles mentioned both appeared on Mozilla Hacks, mozilla's developer blog, which is treasure trove of - among other things - Firefox OS related articles and resources. Another great place to start would be the Quick start guide in the Developer section of the Firefox Marketplace.
For technical reference you should check out the Mozilla Developer Network - it contains a host of very useful information about Web Applications, Web API-s and general web development, too.
For Firefox OS UI-design samples, resources & best practices you might want to check out the Mozilla Brick Library (a successor to the former Building Firefox OS website) if you want your app to blend in visually with the core applications in Firefox OS.
Also there is a pretty active community at the Mozilla webapps mailing list where you might find lots of helpful chaps, well-versed in the intricacies of Firefox OS, and would gladly help you out whenever you might find yourself stuck during development.
This took me about a minute to find. A step by step guide. More info related to app development for FF OS can be found at their official page
Edit: A video tutorial with the use of the jQuery library.
Here is a BMI calculator webapp that follow Firefox OS build-in apps (Gaia) structure and use Firefox OS build-in styles. Check the demo to see how real hosted webapp looks like on any device.
(For a web platform, you can use whatever you are familiar with, but BMI calculator is a kind of hello world type app though...)
Or here is the webapplate project, which has preconfigured webapp template for hosted or package
reuse. BMI calculator webapp is modified from that.
(Note Firefox OS build-in styles are not cross-browser friendly yet. )
I think the above answers are a bit out of date. I think the fastest/easiest way to start development is to
1) Download Firefox Developer Edition and start it up
2) From Firefox developer edition, launch the WebIDE (click on the little spanner, and choose WebIDE). From there you can create a hello world application.
For more information see the WebIDE documentation

Interface C/C++ library into HTML5 by using any tag

My intention is to make a UI having following features:
Should be able to run/ work on all the OS platform like Windows, Mac & Linux.
Should be able to work with almost all the web browser like IE, Chrome, Firefox, etc.
Should be able to link or interface C/C++ library.
If possible can embed any other tool to link these C & C++ lib.
Actually here, there is no server involved. There is only independent application which has to link C & C++ lib and run on all 3 OS and almost every possible web browser.
Is it possible any how ? Kindly suggest me the most appropriate way to cross this hurdle.
How about using Qt and open your HTML5 pages using qml webView element ? Qt code you can port to almost all the possible platforms, and above it you can run your HTML code.
Should be able to run/ work on all the OS platform like Windows, Mac & Linux.
Qt code can be ported to almost all the platforms.
Should be able to work with almost all the web browser like IE, Chrome, Firefox, etc.
You can use it over the qml's webView element or QtWebkit on almost all platforms.
Should be able to link or interface C/C++ library.
Using Qt's C++ code you will be able to link to other libraries/processes via interprocess communication, if required.
These links might give an insight :
qml WebView element
Using qt with HTML
Choosing your UI weapon - C++ vs. QML vs. HTML5

Any specific tools to development the application using HTML 5

Any specific tools are there to develop the application using html 5?
I had used Aptana studio, I feel it is not fully user friendly tool to write a html 5 application.
http://marakana.com/bookshelf/html5_tutorial/index.html take a look at that for starter points.
This is a great, easy to read tutorial which will almost definitely help you learn HTML5 and CSS - http://net.tutsplus.com/articles/news/30-days-to-learn-html-and-css-a-free-tuts-premium-course/
For debugging, you can use Chromes developer tools (F12 on the keyboard) or the same on Opera & Internet Explorer. For Firefox download "Firebug".
Another "debugging" tool is http://html5.validator.nu/ which will validate your HTML and show any errors.
Notepad++ is a great free app to start developing HTML5 on, you can also use others, for example Aptana is a great IDE. For one with a GUI, I'd advise purchasing Dreamweaver, it is expensive but I say it's the best for learners.

1 HTML5 code to rule them all

We're new to mobile. We have our HTML5 page (w/ PHP) up and running live. We now want to go mobile. Whether it's a native app or mobile web doesn't make a difference in our situation. We just want to have 1 set of code to maintain (with only minor tweaks here or there for different platforms). We've played around somewhat with Titanium & Phonegap but it seems like we have to make a LOT of modifications to our HTML5 code.
When people talk about a "mobile web app" (ie http://techcrunch.com/2011/11/18/financial-times-mobile/) what do they mean? Is it simply loading our HTML5 website from an iphone? If not, what development frameworks should we use? thx!
I don't see much difference between a mobile web app and a web app. Browsers on smartphones are sometimes even better then browsers people use at home...
Things you should really keep in mind are screen sizes and no mouseover effects.
Common used technologies for a mobile web app are:
HTML 5, CSS , JS , jQuery, jQuery Mobile (which was released 1.0 a few days ago!)
Server technologies are pretty much the same.
In order to generate the impression of a native app you could then use Phonegap.
I recommend using the Sencha framework for mobile apps. It makes your HTML5 app look like, and feel like a native app for any phone OS.
You can surely implement a mobile web application by implementing it as a web application. Obviously you have to give special consideration to the targeted mobile devices, and do lots of prototyping & testing. Browsers are really getting better on the mobile devices - so that's something good.
If you can create the experience you want in a web application, then great! As of now many developers find it worthwhile to write applications that directly target mobile devices, while also providing a web application. Once you have multiple kinds of clients, it's a good idea to implement the functionality in your application in a web API, which is accessible to the various clients (web app (browser), iOS app, Android app, etc.).