I have been browsing the web lately to find a good Web UI kit. I have found some very good ones but they are all in PSD. That is, they are just graphics. I'm not a professional Photoshop user and it seems like the process to get the UI to HTML to work is quite long and painful.
So has anyone done it before? If not, what are the best resources to get me started to slicing a Web UI kit?
jQuery
is a fast and concise JavaScript Library that simplifies HTML document traversing, event handling, animating, and Ajax interactions for rapid web development.
MooTools is a compact, modular, Object-Oriented JavaScript framework designed for the intermediate to advanced JavaScript developer. It allows you to write powerful, flexible, and cross-browser code with its elegant, well documented, and coherent API.
Dojo saves you time, delivers powerful performance, and scales with your development process. It’s the toolkit experienced developers turn to for building superior desktop and mobile web experiences.
The YUI Library is a set of utilities and controls, written with JavaScript and CSS, for building richly interactive web applications using techniques such as DOM scripting, DHTML and AJAX.
Related
I recently got into an interesting debate on native applications vs html5 applications, specifically about performance and battery usage. Disclaimer: I tend to favor HTML.
The other person made the argument that native will always be better on battery because the mobile browser has to parse the dom, css, and javascript. I would tend to agree that JS - even well written JS - can be murder on a mobile battery. But I'm not so sure about dom parsing.
So let's take that part out of the equation - I prefer to take a document, not app based approach, e.g. a web "site" vs a web "application." Take a really simple type of site - a blog. This blog just has bootstrap.css and no javascript. Would a native mobile blog application be better on the battery than chrome?
You might want to read this article on o'reilly regarding battery life vs. computation.
Would a native mobile blog application be better on the battery than chrome?
That depends entirely what you want to achieve. A 'bare' application is generally faster and less demanding that a feature rich application.
I like the flexibility that HTML5/CSS3 offers me when I build user interfaces for the web. These technologies let me create rich website prototypes fairly quickly and, unlike on the desktop, I can skin UI elements such as buttons with ease.
So far I have not been able to replicate this experience on the desktop. Over the course of a couple of years I've worked with Visual C#, Qt (with Qt Creator) and Java Swing, but all require more work for the same design tasks.
Is there a GUI toolkit, possibly combined with an IDE that has UI designing abilities, that can replicate the ease and flexibility of the HTML5/CSS3 experience? Is there perhaps a way to apply CSS-like rules to C#, Qt, Java Swing or other GUIs?
For HTML5 / CSS3 UI Designing i have been using kendoui and twitter bootstrap
WPF (windows presentation foundation) is a possibility. This is new in .net 3.5. It doesn't use HTML5/CSS. But it's the closest thing that comes to mind to what you are describing. I will mention what I know, which honestly is not much.
I know it does NOT use HTML5/CSS, but the technique for structuring an application is similar in that you create your UI using an XML like structure (XAML as they call it). And this separates your UI from backend code similar to how you would structure a website.
Using WPF, you have the ability to utilize the power of directx to give your applications media, a skinnable user interface, 3D animations, and screen transitions, etc. In short, I know it allows you to customize the UI far greater than a typical windows forms application that would be developed using the .net framework.
Here is an example screenshot of a WPF application...
If this is something you haven't researched, I think it would be worth checking out. Hope this is helpful.
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 know very little HTML or web dev, but I would like to write an
HTML5 app with a fairly complex UI. Is there a framework that stands
out among the rest for this type of job? Do I need a framework; or can
I just do everything in straight HTML+CSS+JS? And what about GWT?
Thanks!
As a general HTML5 starting template, Boilerplate is always a good choice.
It will optimize and chain all your scripts and CSS files, as well as your HTML code and images, it also comes with useful tools like Modernizr.
If you are looking for JavaScript libraries, YUI is a very good library when it comes to UI, though maybe a little more complicated than jQuery or jQuery UI at first. I found it better than jQuery UI, and can work together with jQuery anyway.
EDIT
You may also be interested in Ext JS. Looking at the demo it provides, seems really like a powerful library with many ready to use UI widgets. Never used it though, and looks like it only offers a commercial license.
I suggest you to use Html5-boilerplate.
Download from github
Video Tutorials from author :
http://www.youtube.com/watch?v=qyM37XKkmKQ
http://www.youtube.com/watch?v=OXpCB3U_4Ig
GWT is a good way to go for a complex web application, particularly if you're familiar with java but not javascript. GWT now provides support for HTML5 features such as offline storage, canvas, audio, and video, although it's possible to use any HTML5 features whether GWT provides specific Java classes to support them or not (I implemented the offline storage feature in one of my apps before it was part of GWT). Using GWT will mitigate many of the browser compatibility problems you will encounter with straight HTML+CSS+JS. Although you write in Java, it's still important to be familiar with HTML, CSS and JS, since the java is compiled to js.