has anyone built a profile using metro ui css, i need some inspiration for an online management system using metro and not able to come across much online. Thanks.
Not necessarily using the Metro UI CSS however these examples will hopefully provide inspiration that you could use to design your own.
Metro drew on clean typography and geometry - heavy use of the grid system and white-space. As Metro has matured it's moved on from the original designs, however Microsoft have continued to champion those original concepts - check out their guidelines for developing apps, and you might find exploring their products Windows Phone, Xbox One, and the Windows 10 redesign that got leaked - This one in-particular has quite a few ideas for profiles.
I first started reading about Metro from Long Zheng's blog - istartedsomething.com. And through him I discovered Mike Guss. Guss was one of the initial designers of the Metro language. He's recently updated his website and has some great Metro work on there:
http://mike-guss.com/#windows-phone
http://mike-guss.com/#xbox-one-1
Apparently there are quite a few "Metro" front-ends, inspiration found here: https://www.sitepoint.com/metro-bootstraps/
A couple examples here:
https://juliankay.com/development/the-metro-inspired-interface/
And more here:
https://www.google.co.uk/search?q=metro+inspired+user+interface
Related
I am beginning to look at options for cross-platform mobile development. In a couple of places I read that there are some problems with Titanium UI performance, here is a link to one of those (slide 12):
http://www.slideshare.net/bertouttier/crossplatform-tools-for-mobile-application-development
I then went to the Titanium site's App Showcase to download and test some apps to see if I noticed anything. I decided to start with the Khan Academy app since I know that they are pretty tech savvy (or assume so since their founder has 3 degrees from MIT including Comp Sci) and have some money (a few million from Google and Gates).
It only took me about 1 minute to get to a video with captions listed below the video and the first few words of the narration. I went down to the scrolling captions and tested how the gestures felt and couldn't believe that it was barely functional. Sometimes it goes in the wrong direction, sometimes it does nothing, and I cannot access the vertical scroll bar!
So the larger question I am trying to answer is potential not suitable for the Stack Overflow format...., which is: Is this one glitchy UI indicative of problems found in using Titanium in general?
More specific questions are: Why is the caption scrolling at the bottom of these videos so terrible? Is this an issue caused by Titanium? Have other people run into similiar problems with UI widgets in Titanium?
FYI - I am using an iPad 2.
If you are looking for the fastest possible UI performance, going "fully" native is probably the best overall option. Titanium offers you flexibility in that you are writing a single application with smaller changes, if necessary, across multiple platforms. It cuts your development time down significantly since you are able to share code across projects.
My understanding of the UI in Titanium is that they map to native controls on the target platform. So the performance you are seeing are native controls. The background logic of your application, the business rules, are controlled by JavaScript.
I downloaded (from iTunes) and played with the app and didn't see any issues with navigating their app. I am running it on an iPhone 4 with IOS 6. The animation flipping between between tables was responsive and the animations jumped in a predictable way. Perhaps you have a different OS version?
The Khan Academy appears to be a perfect example of an app that should take advantage of cross-platform development like Titanium. Though the app is relatively simple, it gets you access to what you need quickly and simply. This app could then be deployed on all the supported Titanium platforms, likely without any modifications at all.
So GWT best practices encourages one to use some flavour of MVP, which should in theory allow one to write different native views while sharing the presenter business logic.
This seems to be at the heart of the GWT spin off Google project http://code.google.com/p/j2objc/ which converts the non-UI part of your code to Objective-C, allowing you to write the rest natively in Objective-C.
So my question is: If this really hard part of the puzzle is being solved, how hard would it be to include an HTML5 mobile library (like MGWT or Touch4j [Sencha]) into this MVP pipeline to have the best of all worlds?
Having dabbled with http://code.google.com/p/playn/ , this clearly seems to be the blue-print for having a cross-plaftform build system (native android & html5 & java &...), but that project is geared for single screen drawing and event loop for game dynamics and doesn't allow for keyboard input and other typical mobile goodies.
It seems a shame that if so much of the problem has been solved, that it's not possible to go the extra mile. The answer to this question would be the best plan for actioning a solution, including such nigglies as which MVP structure to choose that would ease accommodation of the various widget libraries (GWTP vs MVP 2.1), and if the best approach is to start with the PlayN code base, and start to hack it.. what are the gotchas? Or if another path is chosen, why that one? and why would it be the best??
Thanx a lot. :-)
It is not clear whether your question is - evaluation options for multi-platform app development or mvp.
You can evaluate additional technology which are used with Sencha and GWT
1) mgwt
2) titanium
3) phonegap
You can also reference - Creating a mobile app using Google App Engine and GWT?
Note: PlayN as you mention is more of gaming platform and not suitable for business app.
MVP is definitely doable... and at times you may feel like its a lot of work, but it pays off in the end. Check out the Touch4j Kitchen Sink, which is written using MVP. You can take that down to the device with Cordova if you wish. The code is on GitHub:
https://github.com/emitrom/touch4jks
The repo is actively being worked on (we are updating ourselves to Touch4j 4.0) so it won't run out the gate, but at least you can see and follow the model :-)
Titanium4j is to Appcelerator's Titanium as Touch4j is to Sencha Touch. You may want to check that out as well. Titanium4j and Touch4j rely on GWT.
Cheers.
I have to evaluate Sencha Touch for building native Ipad html5 based apps. I was wondering which version should I start with v1.1 or v2.0?
I bought this book and created a simple html5 app (with Panels, proxies, MVC, toolbars) and integrated it with Java Spring and freemarker templates. All worked perfectly , the book was excellent and the onine documentation was great. This was with version v1.1.
Then Sencha announced that v2 is out with lot of improvements especially in performance. This made me think whether I should start again with 2.0 or just continue building on my prototype with v1.1 and wait till v2.0 gets more mature and has more documentation.
I have been working with Sencha products since Ext2. Throughout all these years I have been rewriting my code numerous time just to adapt to their freaking changing coding pattern.
From the troublesome Class.superclass.method.call() to the new me.callParent(), till the recent adoption of initialize & removal of initComponent in ST2, I would suggest you to go for the newest release since whatever in the past will not be reuse again. Learn the new coding style, don't waste time on the old structure. It won't help you much, considering our web is changing very fast and ST1 and ST2 is pretty disjoint as well.
While 1.1 is good old solid (much like Ext), v2 is much fun to work with with the auto loader.
I built two native Cordova (formerly PhoneGap) apps on iOS lately and the performance is pretty good so far.
IMHO, Sencha Touch 2 is easier to learn and work with. While it was just released as final, there are so many improvements and enhancements to the framework that even with a few bugs here and there I don't see why you wouldn't want to go this route. The documentation is pretty well baked, sporting lots of examples and guides. I think you'll find that you can accomplish quite more with ST2 than ST1. Cheers!
I would go with Sencha Touch 2 all the way. The API is a vast improvement over 1.1 and you are getting much better performance as well, ease of use and improved MVC structure.
Here is an App I recently built using Sencha Touch 2 and was featured in the Sencha touch app gallery: http://www.sencha.com/apps/flosports/
This app was also packaged to native for both iOS and Android using phonegap 1.4.1 and it worked pretty well.
We can’t just leave our customers that are not able to upgrade to windows 8 for a long time in the larch. However there is demand for a “tablet”/”touch” version of our app.
So how can we support both touch with Metro on Windows 8 and our current customers from a single code base?
When WPF come out, after a lot of “Pushing” Microsoft saw since and make it work on Windows XP – has anything like this been talked about for WinRT.
(I am not expecting any solution to work on XP, as XP support is being wound down.)
See Also: Can the ARM version of Windows 8 only run Metro (WinRt) style apps?
The best answer is that you do not want the same application to run on Windows 7 and Windows 8 Metro style. The UI that works best for mouse and keyboards (windows 7) will not work well for a touch-first presentation and visa versa. It is important to re-imagine the UI for the two different worlds.
That said, you have 2 options if you want to share a lot of the code:
1) Write it largely in JavaScript/HTML5. This will let you re-use many of the assets (especially the business logic parts).
2) Write it in (desktop) Silverlight. The Silverlight XAML is closest to Windows XAML. WPF is further away and will require more re-work later.
In either case, you should look at and follow the principles used when writing cross-platform code. Understand the platform dependencies and isolate them behind indirection boundaries. You want to localize all of the code that will have to change. For instance, you don't want calls to the .Net System.IO.File APIs which you know will have to change to Windows.System.Storage calls being scattered throughout your code. Instead, you want it localized in one function that can be modified later.
The only way I can think of is to implement your application in HTML5/CSS3/JS, and avoid using WinRT APIs inasmuch as possible - this may be feasible depending on what, exactly, your app needs to do (e.g. portable 2D graphics is easy with HTML5 canvas).
Then, for Win8, you'll package this as Metro web app. For Win7 and below, you write a simple app that embeds your browser of choice (not IE9, since it doesn't work on XP - so Firefox or Chrome) with all chrome hidden, and loads your HTML5 app inside that embedded browser.
As others have noted, you would not want to have exactly the same application working in Win8 Metro and Win7 / Vista Desktop. If you structure your application properly, using a suitabel design pattern, it is possible to share quite a bit of code between the various version that you would require. For the Win8 version, you will be using WinRT, for Win7 / Vista you have a choice of Silverlight or WPF.
I have published a couple of articles that demonsrate how this can be done, they include quite a bit of code as well:
XAMLFinance – A Cross-platform WPF, Silverlight & WP7 Application - while this article does not cover Win8, it does share code from WPF to Windows Phone 7, which is a very similar problem.
TweetSearch – A Cross platform Metro UI WinRT and Silverlight Application - this article shows how to use the same techniques to share code between WinRT and Silverlight
It is unlikely that we'll see Microsoft push the Metro-style
application framework back to past releases due to the level of
re-architecting that went into Windows 8.
I agree with Zac on this point. It appears Microsoft is definitely pushing both the technology and usability forward with the introduction of Windows 8 (and Windows Runtime).
The Metro UI is a different UI paradigm. If your using the current
Win32 controls (which includes WPF controls), your application will
look really dated in Metro. The only way to fix that is to
re-implement the UI (your View classes in an MVVM design) using Metro
controls. However, C# and majority of the .NET APIs are first class
citizens in this new environment. The rest of your application should
be fine.
As you already have what I assume a rather large application your best solution would be separate your view from your model-viewmodel. Then you can continue to develop both Windows 8 Metro full-screen touch-friendly awesome interfaces and the "classic" window interface (what we have done for the last x number of years). With good separation, design, and an excellent source control solution (i.e. Perforce) you will able to share a lot of the code base.
In addition to the answers given to your recent question on Windows Runtime Bill Wagner (one of the many C# bloggers that I follow) has posted summary on WinRT and managed languages conference sessions; it is an good read and recommended if you have a few minutes. One of the things that his summary clarified (in the FAQ at the end) was that the future of .NET as the branding for the framework we use is going to be replaced with Windows Runtime.
Another piece from Bill's blog post:
Some of the .NET APIs are changing for WinRT. I don’t have an
exhaustive list, and I’m not sure there is one yet. Other APIs are not
exposed via WinRT. (They are still available as .net APIs, just not as
Metro / WinRT APIs.)
It is unlikely that we'll see Microsoft push the Metro-style application framework back to past releases due to the level of re-architecting that went into Windows 8.
Like Pavel said, if you kept your application from using as much of the WinRT libraries as possible, it is possible but then again, you're now building a regular web app.
Is there any guidance available on developing Metro styled silverlight applications? How does one go about designing the UI to match the metro look and feel of WP7. Going by the way windows 8's UI & UX is, I assume the future of how we develop applications for the future versions of the win OS might be changing to look more or less 'metro'.
So what I am asking is, if anyone knows of any resource or has any ideas on how to use the currently available silverlight controls to achieve that look and feel. Is there anything planned to change the controls to match that UX out of the box and more natively?
As you know Metro is not tied to any technology. You can reference WP7 UI guidelines to get some hints; a new version of the guideline is available from Microsoft web site.
For Silverlight 4, you can download themes from Microsoft http://www.microsoft.com/downloads/en/details.aspx?FamilyID=e9da0eb8-f31b-4490-85b8-92c2f807df9e
The Cosmopolitan theme when applied to a Silverlight4 application will give you Metro UI.
You can either apply the theme as-is or have a look in the xaml resource files to see how the theme is designed (brushes, fonts, styles etc)
For good UI (including Metro concepts and Blend) reference, I recommend visiting http://www.riagenic.com/
I hope this helps.
Have you missed this session?
http://channel9.msdn.com/Events/BUILD/BUILD2011/TOOL-790C
It shows step-by-step how a WP7 (~Silverlight) application can be be turned into a Metro-style application. Although it doesn't go into design principles.
Edit: haha, missed to see that this question was asked months ago, sorry.
Infragistics have published a free metro theme for Silverlight.