Alot of phone OSes are starting to support W3C widgets, or something very similar.
I am still a little confused about what exactly widgets can do?
All the example widgets I have seen have just a 'index.html' page. Are widgets allowed to have multiple pages they can navigate between?
Also do widgets have any mechanism to run in the background?
Any good online documentation about W3C widget lifecycle? or blackberry widgets?
Widgets can do most things a native mobile application can do when augmented with support for the W3C Device API specs or the WAC profile that includes everything from accelerometers to roaming status.
Without these extensions, Widgets can still use local storage, preferences (a special type of HTML5 storage), app cache and other HTML5 goodies.
W3C Widgets can also package localized content, so one Widget can be deployed for all locales.
Also, there are other types of W3C Widgets implementations - for example desktop (Opera) and for web widgets (Apache Wookie)
This will probably not answer your question, but I can give you an example of an application that was developed for the mobile using W3C widgets. Here is a blog post that describes their use:
http://uxebu.com/blog/2010/02/15/eventninja-a-mobile-cross-platform-app/
Related
I am new to qooxdoo framework I have few questions,
In all the sample QX.Website apps provided there was no QXTheme defined in config.json, is it like themes are used in a different way instead of config.json or how?
Is qooxdoo is like replacement for jquery or will be used together with jquery. Since jquery has lot of plugins available. I am not finding qooxdoo as easy as jquery
3.QX.Desktop is desktop feel like website or it is a desktop application itself, same for qx.mobile too?
I am working on a POC it will be of great help.
QX Website
Is cross-browser library that can help you build lightweight websites.
It main features are DOM selector, BOM and HTML abstraction layers, cross-browser keyboard and pointer events. As well some network abstractions for REST service and web storage. Οther functionality is provided through modules. There is no theming option because theming is done by regular css.
You can see an overview of the modules here.
QX mobile
Is the attempt to enable developers use the same principals as in qx.desktop to create web apps that have that feels likes a native app or you can simply use cordova or something else to ship your application inside any store.
QX Desktop
Is the way to go if you are building a single page application.
It has the feeling of a desktop application but this is only theming and it runs in the browser it doesn't run on desktop.
TIPS
If you want to build a mobile app don't use qx mobile as I don't think is maintained appropriate anymore.
If you would like to have a more modern theme checkout the clean theme from sqville.
If your project have a lot of forms and think to use qookery as it will be easier. (Shameless plug I'm one of the contributors of qookery).
I want to use Ionic Framework for my mobile website.
I wonder that is there any risk for run Ionic Framework on mobile browsers.
I'll only use framework's CSS and JS which includes modals, popups, menus etc.
I built a prototype and I tested it on all versions of iPhone and 2-3 versions of Samsung. I haven't seen any problem on these devices. But I want to learn all risks before I start to real project which includes static pages and quotation steps. I'll use UI router by using HTML5 pushstate.
To learn your opinions, makes me more confident.
Thanks in advance.
Kindest...
There are certain caveats to this:
1. Ionic doesn't have a web server, and its testing server uses UIWebview and will not allow for POST requests.
2. Ionic is more optimized for app that is resident on the device. There are certain capabilities (ngCordova plugins for camera...etc.) that won't be available on mobile web.
Your scenario ("framework's CSS and JS which includes modals, popups, menus etc.") - should be fine, since you're only using functionality within Webview. You'd have to build a custom JS library that would only include presentation layer features.
We plan to create a hosted web app with AngularJS. As UI Framework we found Ionic and Onsen to work well with AngularJS. Both of this frameworks promote that they are made particularly for Hybrid Apps. But us I understand correctly, both frameworks are based on web technologies. So what are the drawbacks when using the suggested UI frameworks for non Hybrid Apps? Is it mainly the Browser support?
Thanks
Well, both Ionic and Onsen are made particularly for Hybrid Mobile Apps. You just won't be able to use it even for tablet apps without customization (If I am wrong, please correct me) just because they target the limited viewport and incorporate phone UX patterns.
Also, they are made with PhoneGap in mind (the apps will be hosted in the WebView component), and addresses some common WebView problems, e.g GPU acceleration for better performance.
If you need just some UI framework for a simple Web App you'd better have a look at Twitter Boostrap or Zurb Foundation. For a complex case you may even consider Sencha instead of Angular.
There is a part of Ionic that expects the Cordova/PhoneGap Device plugin to be installed. It helps with displaying on Android and iOS appropriately, as well as increasing the size of header bars for iOS 7. That wont be an issue for web though, since you'll have the browser's "chrome" taking up that space.
You may loose some of the buttery smoothness in things like page transitions because the template files need to travel over a (often cellular) connection to the internet, but your app will most certainly work if built with Ionic or Onses over the web.
Things changed considerably over last few months.
Both frameworks now support splitview so they can be used for tablet devices. Subjectively Onsen UI has a better support (it is much more configurable), but Ionic is also not bad. This can translate to smaller desktop browsers screens.
You should also consider that Onsen UI has a dedicated desktop browsers support (all web-kit browsers). Ionic framework will also work on desktop browsers, but it was not fully tested or optimized for such environment.
Biggest problem here is that both frameworks were never meant to be used on larger screens. They look oversized and bloated. If you ever worked with jQuery Mobile (on desktop browsers) you will understand this problem.
There is nothing stopping you from doing that - it might even be a smart approach for a mobile first design approach. The advantage is that you could rapidly iterate an idea an then invest in a native or platform specific app depending on user feedback/metrics.
The main drawback would be the user expectations for your UI and application logic which are different for a web page and a native app. For example the back button will be duplicated in the browser and in your header. You could use some platform specific CSS or configurations to hide it. Then there is your application state and user data - will you save it in local storage, session or database? This depends on your app and best judgement.
There will be some browser issues which may not be addressed in the core of Ionic and Onsen because they are not targeted to work with IE6/7 (see angular browser support), for example, but you can resolve those by having a graded browser support policy.
I'm busy building a web page where I'm using HtmlEasy and Silken with Google Closure Templates.
With ASP.NET MVC4 there is a technique of serving a mobile version of a web page by changing the file name to .mobile.. So it is not just the same version served up using a different stylesheet - the contents/data too can be different. This is really great since not everything may be relevant for a person using a mobile device.
Does HtmlEasy and Silken provide the same or similar feature? I can't seem to find anything that'll help.
Ok, when you need to detect any mobile device then its better to make use of a database.
For my own project I'm using 51Degrees Lite. Pass the user-agent to the lib and it'll tell you if the device is mobile or not. Then serve your soy template(s) accordingly.
I would like to add value to my website that I have developed at the moment so that user can check on their mobile phone.
My questions:
Should I make different template for mobile version and full version one?
Like creating mobile.example.com for mobile version?
Does Opera Mini not support JavaScript? I have a mobile phone that has Opera Mini, it seems that JavaScript was not running. Do all Opera Mini not have JavaScript on it?
Does Opera Mini support full W3C standard HTML and CSS? Or do they have a different one?
Is there any emulator to view or test website in different mobile phones? For example: Iphone browser, Blackberry browser, WAP and Opera Mini.
Thank you!!!
Some websites offer an automatic conversion of your existing website. This converted, mobile friendly website can either be hosted at a new domain, or a "mask" can be applied over your existing site. Check out www.webtosmartphone.com, which easily converts basic websites automatically; a quick line of code and your website will be automatically resized and viewable in the most popular smart phones. If it is not converted automatically, you can request for a custom conversion.
It's up to you whether you want to make two different websites for mobile and non-mobile devices. However, if you do so, make sure to have a link from the mobile site to the full site to enable users to switch to it.
Opera Mini does support Javascript which certain restrictions (eg. on asynchronous operations). Be aware that Opera Mini uses a proxy based approach and the JS is executed on Opera's servers which imposes certain restrictions. Plugins like Adobe Flash are not supported.
Basically, Opera Mini supports the same standards as Opera Desktop since they share the same rendering engine (Opera Presto). However, due to device restrictions, some features like CSS rounded corners are not available in Mini. See Opera Mini 5 standards support for more information, but know that meanwhile Opera Mini uses Opera Presto 2.4, the rendering engine used in Opera Desktop 10.53.
For testing websites in Opera Mini, try MicroEmulator which is Open Source and comes with a resizable skin that allows you to emulate different screen sizes.
Hope that helps :)
You should most definitely adapt your output for mobile devices when the content is accessed via a mobile device. Whether you will do it by separating the mobile presentation on a subdomain or a special folder or not is totally irrelevant.
/ 3. Mobile is way more than just Opera Mini. Various mobile device browsers support various degrees of rich content (JavaScript, CSS etc.) You should look into detecting what features are supported by the visitors browser/device and serve the appropriately rich/"poor" content. You should take a look at WURFL and Device Atlas which are two main databases of mobile device useragents which allow you to serve only the content that the useragent can consume.
There are many emulators out there, some better and some worse, that emulate various mobile device browsers. Off the top of my head, the two I've used are Yo Space SmartPhone Emulator (website broken atm) and Mobi TLD's emulator. There are also vendor specific (Nokia, SE) developer tools you should be able to find that emulate the vendor's devices.
Cascading Style Sheets (CSS) are the way to accomplish this. It does mean that you will need to review your site's use of HTML tables, and convert into a CSS based design.
The CSS Zen Garden is an excellent resource for showing what is possible.
A resource to convert your current
site into a mobile device friendly
format is Skweezer.com. Simply enter
your website's URL, and it will
display your website in a
mobile-friendly version by removing
large images, CSS styles and page
elements that will not display
properly. You can use this as a
template, or starting point, for
making a mobile CSS profile for the
site. To provide an alternative CSS
stylesheet for users with mobile
devices, insert the following code in
the head of an HTML document:
<link href="/css/global.css" rel="stylesheet" type="text/css" media="handheld" />
Ref.