I'm looking for a set of CSS or scripts which mimic the UI (only the UI) of default applications on the iPhone/iPad, Blackberry and base Android apps?
I have a client who needs the ability to preview content and form pages on the various OS', but in their desktop browser (Chrome, FF, IE(ugh)). Ofcourse, there are dozens and dozens of standalone emulators, but I cannot find any one who may have created CSS or scripts to mimic how these would look, in the browser - e.g. default button stylings, colours, etc. not the logic of the app, but just the way it could look - with the best example I can find being : http://groupaware.mobi/iphone/#_Windows
Anyone with ideas?
thanks!
For iOS:
http://code.google.com/p/iphone-universal/
and
http://www.peterhintondesign.co.uk/journal/index.php/iphone-css-template/
which is based on the first one.
I'm sorry but until now I have only been able to find templates regarding the Iphone and not the BlackBerry nor Android UI. (I've tried to find them myself before too.)
A great template for CSS (Photoshop CS4 or higher needed) based on the Iphone is:
http://www.teehanlax.com/blog/2010/06/14/iphone-gui-psd-v4/
Also the links by tomwadley, especially the prior link, are also quite useful regarding coding and framework.
There's some answers in this book: http://oreilly.com/catalog/9780596805791/ about creating CSS styles to mimic iOS stuff. Also covers phonegap etc, might be useful.
jQuery Mobile (JQM): http://jquerymobile.com is a framework which does just that. At its simplest, it renders "standard" html elements as native OS elements for platforms like iOS and Android.
You don't have to use the JQM framework, of course; you could simple take what you need from the CSS that JQM employs. Either inspect the css directly or write a simple test page which loads JQM and inspect the CSS in Firebug or Chrome developer console.
Checkout iUI..probably what you are looking for.
http://www.iui-js.org/index.html
For the android, try this implementation of Holo Light and Dark: http://vezquex.com/projects/holo-css/
Related
I was handed a web app that was developed against Chrome and FF and renders beautifully in both of them. The problem is, I now have to make it look nice in IE 9+, and when you view the app in IE it looks awful. So I ask: what can one do (tools to use for troubleshooting, methods, etc.) to get an existing web app rendering correctly in IE 9+?
This is an HTML5 app if that helps.
Can you post a link? What are your main issues on IE9?
Here are some tools/hints to help you get started (but if you post a link or let me know what your actual issues it will be way easier to solve):
Modernizr: (JavaScript library that detects HTML5 and CSS3 features in the user's browser notably so the code can make use of
native features but still readily detect when features are not
present so to handle that, as do workarounds as loading a shim to
emulate the feature, or not using the feature):
http://modernizr.com/
Check your doctype (if you have the wrong kind it can trigger quirks mode which will make it look all kinds of crazy). I usually default to <!DOCTYPE html>
Use something like html5shim to shim newer Html5 functionality into IE.
Also, use something like modern.ie to find some of the low-hanging fruit in an automated manner.
Be sure to run the standard validators as Wesley Murch suggested in his comments.
For an app that was built targeting Html5 from the get-go those should probably hit the bulk of the issues. Beyond that you'll need to identify EXACT issues that you're having such as entire tags that aren't supported or specific CSS that isn't compatible and implement workarounds on a case-by-case basis.
I am new to monotouch and wanted to know if there is a simple way to implement css styling in any of the types of views/viewcontrollers? I have read about WebViews, worked with UIViewControllers, but I want to build an app that is basic styling for now that I can update later with css styling from a design organization. Anyone know anything about this?
iOS 5 has some limited support for global styling. Miguel has a post that explains how to use it in MonoTouch.
Interestingly enough there was a project on Kickstarter.com which ended up getting funded which allows you to use CSS3 to style iOS and soon Android apps. It actaully works really well.
Pixate.com
I have a simple project of a web application for mobile using Emberjs. For the look and feel, I want something equivalent to JQuery Mobile. Is there a way to mix Emberjs and jquery mobile? If so, how?
I have looked at the Travis-ci mobile app and they seem to have only defined a specific css for the mobile version. What is strange is that they also have this file : file that seems to be an attempt to integrate with JQMobile but they don't use it anywhere in the code.
I also have found this article Using Ember.js with jQuery UI but it's about JQuery UI. Can I use the same technique for JQuery Mobile?
Please share your own experience about having a mobile look and feel with Emberjs.
If you know any open source project on GitHub or wherever that uses Emberjs for mobile I will be thankful if you let me know the address.
What Technique do you recommend?
Note: I have make a first attempt to use the 'data-' html5 attributes of jquery mobile within a list generated by a controller but the elements of the view don't have change to a jquery mobile look and feel and I not sure why.
Sorry for my English, it is not my mother tongue.
As stated in the Ember.js wiki there are two projects concerning mobile:
ember-titanium - Titanium Mobile wrapped in Ember (formerly SproutCore-Titanium)
ember-mk - Mobile Kit for ember.js
Maybe they are useful for you.
#luissala created a proof of concept project using Ember with jQuery Mobile. It might get you on the right track:
https://github.com/LuisSala/emberjs-jqm
Have a look at Twitter Bootstrap: http://twitter.github.com/bootstrap/
https://github.com/fohr/blossom
Is in a very premature state, but it seems pretty promising.
It's from the guys who started Sproutcore (I think!), so the syntax is very relevant to EmberJS
Before i start must explain that I'm relatively a noob with less experience in web development. A certain site that I'm developing requires and swipeleft and swiperight functionalities for touch based devices namely iphone, ipad, android phones and tablets. To implement this i was suggested to use jQuery mobile and it sounded good as I'm a fan of jQuery.
However despite all google could give me, I'd request clarification on the following
Does the doctype compulsorily need to be html 5 as it uses
attributes like data-role
My site uses jQuery and jQueryUI heavily and will jQuery mobile
distort the actual design layout implemented.
I can't seperate view layer for mobile and regular traffic.
If jQuery mobile is good for mobile based usage without
affecting normal design and functionality what will be the best
ways
of testing the site for multiple touch based devices (simulators
maybe).
Some details in simple english from this great place would be wonderful...
Thanks in advance!
EDIT
To further dig into my problem will a jQuery plugin for swipe functionality like touchSwipe or wipeTouch help me here.
Also what would best methods to test the functionality from an iPad or an android phone provided I've implemented the plugin with my code. Say some plugin just like IE simulator for firefox that could recognize swipe gesture through mouse drags (Just greedy and desperate)
Thanks again...
If you really want to separate views for desktop/mobile, I've seen recommendations here for http://detectmobilebrowser.com/ but I haven't used it. That provides code for doing it server-side in various languages or in JavaScript.
One of the main purposes of jQuery Mobile is to provide mobile-specific UI; so the styles will definitely conflict in all sorts of ways with your current templates if you try to just throw both stylesheets in there. If you just want to add swipe support on top of your current site then there are probably lots of jQuery plugins that could help with that.
Re: HTML5, From the jQM docs,
A jQuery Mobile site must start with an HTML5 'doctype' to take full
advantage of all of the framework's features. (Older devices with
browsers that don't understand HTML5 will safely ignore the 'doctype'
and various custom attributes.)
JQuery mobile is OK for web apps, but after doing more then on application in JQuery Mobile I would recommend against it for now. There are a lot of phones that do not fully support JQuery Mobile and you will run into issues with many of the methods, and the page layout in general. Most Blackberries, and many HTC phones do not support JQuery Mobile, as well as many other phones.
Detecting if you are on a desktop/mobile is pretty easy. Just look for a user agent on page load, and redirect accordingly. If you want I can give you a few ways to redirect based on user agents.
JQuery Mobile may distort the design that you currently have, if you do not format your page correctly. JQuery Mobile will add a lot of extra css, and working around this may prove to be challenging, especially with other JQuery elements. Dialogs are one example of something that JQuery Mobile will do differently from JQuery
The best way would be to test through emulators. Google Chorme has a Ripple add on that I tend to use, though it is not the most reliable. Because there are so many different phones, sometimes it is just easier to try to test on as many live ones as you can (different versions, platforms, ect may behave drastically different from each other with JQuery Mobile)
I would like to make a browser toolbar like google toolbar for my website. It should be compatible with all popular browsers.
Which language should I use to make it? Is there any examples/guides I could use?
For Firefox, start here: https://developer.mozilla.org/en/Extensions
Internet Explorer, here: http://msdn.microsoft.com/en-us/library/bb250489%28VS.85%29.aspx
You can use Javascript and Xml (XUL) to write Firefox extensions and any language that can generate a COM component implementing the IObjectWithSite interface (VB, C++, C#...) for IE.
IE Examples:
https://web.archive.org/web/1/http://articles.techrepublic%2ecom%2ecom/5100-22_11-5078098.html (VB)
http://www.codeproject.com/kb/cs/attach_bho_with_c_.aspx (C#)
Firefox:
http://www.rietta.com/firefox/Tutorial/overview.html
http://kb.mozillazine.org/Getting_started_with_extension_development
You CANT make a single toolbar that is compatible with both IE and Firefox. You need to create two toolbars.
For IE you need to create a Deskband (http://www.codeproject.com/KB/shell/ietoolbartutorial.aspx), a kind of plugin that interfaces with IE via COM. You need to know C++ and COM to do this.
For Firefox, you need to create a Firefox Extension. https://developer.mozilla.org/en/Extensions is a good place to start. You need to know JavaScript and XUL (XML User Interface Language, what Mozilla uses to create user interfaces)
Browser toolbars are not compatible with other browsers. Some toolbars give you a different download link based on your browser, while others install plugins for each browser they recognize and detect.
But regardless, you will be writing one for each browser you want to support, unless they share a plugin model.
See Corbin's answer for ie and firefox, for safari, get started at:
http://developer.apple.com/documentation/InternetWeb/Conceptual/WebKit_PluginProgTopic/Tasks/WebKitPlugins.html
Have you tried http://www.Conduit.com/ ? It's completely free of charge! I love it. Even the big guys use it.
With regards to your game... Is it available online? Can I play it?