Recently I finished reading Designing with Progressive Enhancement by the Filament Group. In the book they talk about providing two levels of support based on testing browser features. If the browser passes the tests it gets the enhanced experience which is built on top of the basic. If the browser fails, it just gets the basic experience. On paper this makes perfect sense and really drives home that this is how websites should be built.
After I finished the book I looked at enhance.js which is a script they go over in the book that tests browser features (https://github.com/filamentgroup/EnhanceJS and the new version since the book https://github.com/filamentgroup/enhance). In the script, there isn't a way to test for specific css features like I expected. Sure, you're able to test for box-model support, but what if my layout relies on display: table? Is there anyone testing for features like this? Is it even practical to do so?
Modernizr is a popular library that provides similar capability testing. There is a wide selection of pre-built tests for it that can be selected on the download page, including one to test for display: table (css-displaytable in the Non-core detects section). They also host a collection of polyfills that can help make up for some of the missing features you might want to use.
I want to develop a desktop application/widget, and would love to use a web technology stack. so I can...
Reuse existing skills
Run on multiple platforms (OsX, Windows)
Update application code without having the user upgrade (part/all of the code gets downloaded from the web)
Running in a browser is probably the best option, but one thing that is getting in the way is the browser's chrome (frame, tabs menus etc.) and background, as I want to create a transparent application (e.g. a semi-transparent, round clock that would display on top of other apps).
I'm thinking that a custom version of a browser (chrome or firefox) is probably the answer. All I would need to do is have a shortcut like:
...\chrome.exe -transparent -no_chrome ...\mywidget.html
Seems to me like a fairly obvious need, so before I consider forking chromium, I'm thinking there must be something like this already.
I know there's http://awesomium.com/ ($2,900 license cost), but it is an overkill as I don't need to embed a browser into a desktop app, API and all, and the cost is prohibitively high for a low-cost, limited distribution app.
There is also http://mozillalabs.com/chromeless/ but it doesn't seem actively maintained.
In addition, for both options, the installation overhead is huge (installing a full-fledged browser for the sake of running a widget).
Any suggestions? (please not Adobe Air - I want to use a standard web tech stack)
Take a look at this discussion for several options
http://news.ycombinator.com/item?id=2829126
-FT
In most desktop web applications I've ever worked on you need a server-side web framework. The server-side web framework (Struts, Spring MVC, etc) has some kind of controller for processing requests and then a templating engine (Velocity, JSP, etc) for generating dynamic content.
Now I am starting to work on mobile web applications and all the discussions I see revolve around selecting a UI framework (jQuery Mobile, jQTouch, Sencha Touch, etc) but I don't see any discussion of what is happening on the server-side to actually process HTTP requests or to generate the HTML, CSS, and JavaScript.
Does this mean that most mobile web applications do not use a server-side web framework... meaning the server serves static content, the majority of the interactive behavior is coded in JavaScript, and the only server-side code is REST services that the JavaScript client loads?
If I wanted to use a server-side web framework would that be a bad idea? What problems would I face? Does anyone have a recommendation on web framework that would be a productive platform and not "get in the way" of mobile UI frameworks like jQuery mobile?
NOTE: The developers I work with mostly come from enterprise Java backgrounds, however, I wouldn't limit it to only Java-based web framoworks. There are other frameworks out there that have roots in Java that could be considered (Grails, Lift, etc).
A good question for sure and I will answer it this way. The current trend is to build a lot of interactivity into the front end. There are several reasons for this. Some do it because it's the new thing to do, others do it because they're trying to replicate the desktop experience. In the end, there is only one goal for any given web project and that is to create Best and Most Sustainable User Experience.
That being said, there would be server side technologies to avoid and that would be any of that generate the front end for you but are not using jQuery. Over 45% of all websites today use jQuery and if you select something else, you will be instantly at odds with the prevailing mobile frameworks. (GWT, IceFaces, I'm looking at you).
Probably the safest and most flexible way to go would either be using a Spring based implementation or Prime Faces. Spring Mobile is worth looking at. Prime Faces actually implements jQuery Mobile and is theme-able using Theme Roller.
In general, it really doesn't matter what backend framework (if any) that you use so long as you're pushing good markup. The browser doesn't care and the only thing that user's care about is a good experience. So, pick whatever will make your devs happy for the backend so long as it doesn't get in the way.
As for front end frameworks, yes, their popularity is increasing because they do tend to standardize some of the best practices in mobile. There are many many comparisons of jQuery Mobile vs Sencha vs jQTouch. I'll leave you to figure which is best for your project but would certainly use either jQuery Mobile or Sencha because the community of support around these is massive and you're less likely to look like the many shabby, home-grown mobile sites that tried to do it from scratch when they didn't have the experience to pull it off. It's just sad. My personal recommendation is jQuery Mobile because it's covers such a wide range of devices and (provided you stick to the standard page-by-page model) will degrade gracefully for even the crappiest of feature phones and still be functional but look amazing on smartphones.
To your question of just using a RESTful design with JavaScript loading everything and managing state. There are many that are doing that and it's certainly a snappy experience but you'll be instantly limiting who can use it to people who's mobile browsers support good JavaScript. You'll be looking at only supporting iOS, Android 2.2+, BlackBerry 6+, and Windows Phone 7+. All others will likely have significant difficulty viewing your site. Carefully consider your audience before moving to an implementation like that. If your site wont work without JavaScript and your primary clients are in the corporate world... what happens when the latest Black Hat conference exposes a weakness in the company phones and out of conservative risk mitigation (paranoia), they push a security policy to everyone's phones that disables JavaScript. This kind of thing happens all the time. So, consider your audience.
Take a look to ItsNat, ItsNat invites you to think in client JavaScript but coding in Java and executed in server generating the same JS code to the client.
The difference with GWT is, Java W3C DOM code is executed in server and JS is automatically generated, meanwhile GWT is executed in client, server data must transported to client.
I want to start building hybrid HTML5 mobile apps; build the core functionalities via HTML5, then wrap this with a native layer for iOs, Android, BB..etc
After some research: I found I need to be familiar with plenty of technologies, namely: HTML5, JS, CSS3. Other technologies/frameworks I was advised to be familiar with: JQuery for Mobile, Sencha touch, Node.JS, Backbone.JS, PhoneGap..etc
Till now I just know the basics of HTML5, JS & CSS.
My question is:
Is there a "single" place (Book/Tutorial/Screen casts) where I can find a walkthrough Tutorial that deals with some of these technologies and guide me to building hybrid HTML5 apps (Maybe on iOs for example)..
I would want to learn the mentioned technologies among these, yet I am pretty keen on learning them in the context of building a hybrid mobile app and not on separate basis. I much prefer learning by doing real work (The app in the Tutorial/Book/Screen cast here) rather than learning each technology on its own.
Much appreciate your answers.
Omar
OK, let me expand my original answer:
HTML is short for hypertext markup language.
It is used to specify how to display STATIC content via the HTTP protocol, vulgo web.
HTML5 is version 5 of the HTML language specification, and is a RECOMMENDATION to a standard, but not really a standard by itsself.
CSS is used to apply advanced STATIC formatting to STATIC text/images, such as alternating background colors for even/odd rows in a table, text-flow, text-direction, size, boldness, font etc..
To make static content DYNAMIC, you need JavaScript.
JavaScript is a scripting language, that runs in the webbrowser of a vistor (client) to the website. Theoretically, it is meant to behave the same on each browser, but in reality, Microsoft used unfair competition and intentionally crippled the JavaScript implementation in it's browser (Internet Explorer), by diverging from the ECMA standard, and by implementing proprietary features, to stifle competition (Netscape) and make it impossible to develop compelling web applications, for example online office software.
JavaScript, the client-side programming language, is complemented by PHP/ASP.NET/JSP, which are programming languages & frameworks that run on the server, and are there to dynamically create static pages, for example by filling in data from a database, and to process and save user input, such as orders, payment, emails, feedback, etc, and to process input from HTML forms (input masks).
JQuery is a JavaScript framework.
That mainly means, it's a library of JavaScript functions that were designed to provide often-needed functions that do the same on each browser, effectively bypassing the anticompetitive practises of software vendors such as Microsoft and Apple.
It also provides basic functionality for event handling, graphics and AJAX (asynchronous JavaScript and XML), and functions for serializing/deserializing JSON (JavaScript object notation).
JQuery for Mobile is a version of JQuery optimized for mobile devices, such as Android or the iAnything. So are Sencha touch, Node.JS, Backbone.JS, etc.
The difference between HTML 5 / and HTML4/XHTML is mainly that HTML5 provides a so-called "unified" way to embed audio video. Which is not necessarely true, because each browser supports different audio and video formats, and there is NOT ONE audio & video format that is universally supported across all browsers.
HTML 5 also provides the very useful WebSockets, which basically allow you to make client-server applications on the web. Since this would enable compelling web applications and office applications that would be on par with Microsoft Office, Microsoft hasn't implemented WebSockets in the standard browser. It's available as separate plugin, which basically nobody bothers to download, which means one cannot use web sockets anytime soon if the web application should work with internet explorer. Additionally, HTML5 is only implemented by IE9+, and not by IE8. IE9 however is only available for operating systems newer than windows XP (vista, 7, 8). Which means one cannot install IE9 on Windows XP (35 percent of current windows installations, Windows makes up 85 percent of the desktop market).
To embed web applications on mobile phones, you need to embed your applications in a embedded WebBrowser. For Android, the interface to the embedded browser is called WebView, and you need to learn the Java programming language to use it. For Apple, I have no idea whether they have such a thing at all, but I'd suppose they have, though it's probably going to be more complicated, since that's Objective C, and not Java. Since I have neither a iPhone nor an Apple computer, I cannot tell you anything about it, except that it's crap because it doesn't support Flash, and that it costs 10 times more than what it's worth..
Screencasts, you'll probably find on youtube, if there are any.
Again, google search will provide you with the necessary answers if you have a specific question.
My question is: Is there a "single" place (Book/Tutorial/Screen casts)
where I can find a walkthrough Tutorial that deals with some of these
technologies and guide me to building hybrid HTML5 apps (Maybe on iOs
for example)..
Yes, http://www.google.com/ncr
You know, it has a wonderful search box for just about any problem...
Other good pages:
http://www.w3schools.com/html5/default.asp
http://www.w3schools.com/js/
http://docs.jquery.com/Tutorials
Here is an update on this question, as building hybrid apps have come a long way in three years.
I would start with looking into Phonegap, or the Adobe owned version called Cordova. This is a very popular route in quickly developing and distributing hybrid cross platform mobile apps. So popular in fact many other frameworks are built around the Cordova framework to give it a more native feel, such as
Ionic - this is by far the most popular, it's open source (free) and my favorite as I find the quickest and easiest to work with. In addition they have great documentation and great pre-builds. It's command line interface framework that works combines the Cordova, Bower (a package/plugin manager), Grunt and Angular JS frameworks into one powerful and quick CLI. If you are unaware of these frameworks they're definitely worth looking up if you're looking into building web or hybrid apps.
Mobile Angular UI - is an HTML 5 framework which uses bootstrap 3 and AngularJS to create interactive mobile apps.
Titanium - is a "complete" solution for creating hybrid mobile apps with all you need in one place with there downloadable program Titanium studio
Telerik - a website based program similar to Ionic and titanium for rapid development
Those are great places to start. If you don't already have a subscription to Lynda.com I would highly suggested it. The subscription is roughly $25 a month depending on your location. They have hundreds online video courses that can run a few hours long and are very great I giving you a good scope and how-to do many projects and understanding many frameworks. teamtreehouse.com is another great tutorial tool they have a lot smaller selection of videos better more in depth and hands-on and will work with many other frameworks with in the project.
You want to learn how to develop a hybrid app that works with multiple platforms such as android, iOS, Windows, etc. This means you need to learn PhoneGap and Cordova(preferred). These are almost the same, one really is part of the other.
Google both phonegap and cordova, install the packages (requires a little bash command line knowledge). It is relatively quick and easy to get the example HelloWorld app in both Phonegap and Cordova.
After that? well, you will have to learn HTML, CSS, javascript at minimum for the web side of a hybrid application. The native side (Android, iOS, etc.) will require learning Android Studio/java for android, or Xcode/swift for iOS.
Everything you want to learn is either on youtube.com for free, or Udemy, Udacity, Lynda. Some sites you will have to pay for, but its WORTH IT.
I have a couple of concerns, I'm busy building a normal .mobi site for a client, so basically how I understand this is keep it simply since most phones do not support JavaScript and have a small screen etc. So I build a mobi site using only content and basic links. Now my question is how do mobi widgets work on a mobile site? I've googled and could not find a answer? Is this possible at all? Since these small sites are meant for normal entry level phones and not smartphones?
.mobi is a domain suffix generally used to identify that the content is specific to mobile devices. It doesn't imply any association with Widgets.
Mobile widgets are generally specific to operating systems, and their definition varies across mobile OS's. Nokia Web Runtime Widgets for example use the webbrowser and provide access to device specific API, but it is native to S60 and needs to be installed on the device. Not what you or your client want here I think.
You have couple of options for developing mobile web sites. Have a look at the answer I gave here. It may help point you in the right direction. Search also for questions related to DeviceAtlas, who also provide similar API to WURFL.
Worth also taking a look at this answer.