Where to start with modern web UI development?

November 12, 2012 12:39 PM

Help me get my Web 2.x (or are we on 3.x now? I've lost track) on. I'm an old-school Web 1.0 developer who wants to kickstart himself into slightly more modern UI and user experience paradigms, and I have a project in mind (of course). The challenge? No expensive tools.

Some background:

Me: I've been doing web stuff since the web came around; I was hand-coding HTML in vi in the mid-90s. I've done a lot of work in perl and Java (including newer frameworks like struts, spring, etc.). I know enough JavaScript to be dangerous, and can usually bash CSS1 into submission. I eat XML for breakfast. I speak SQL and unix fluently. I've done PHP, python, C/C++, and a little of a lot of other things. I can design APIs and databases all day long. In recent history, though, I've spent most of my time in the application security world, so haven't had the opportunity to keep my front-side development skills where I'd like them to be. HTML5 and CSS2 are stuck floating around with IPv6 in my mind, as technologies that exist but nobody really uses. But I know that's not true. I'm conceptually familiar with AJAX and friends, but have only broken AJAXy sites, not implemented my own. Flash is neat, but has always been on the back burner because I don't have tools. (And isn't really what I want for this project, since it doesn't work on iOS.)

Project: I have an idea for a site I'd like to put together, nothing extraordinarily complex - probably a database-driven backend, and, since it's going to be aimed at kids (and their parents), a shiny, shiny front-end. I find that 75% of kid-focused sites out there look like (and usually are) crap that looks like it was written in FrontPage 98. I don't want to be part of that 75%. I'd like to have iOS and Android components, but those would be mostly later parts of the project, the first, initial part would be browser-based. (I want to build this site for my kids first, and later for others.)

Constraints: As I mentioned above - no expensive tools. I can't afford a copy of Flash right now, or a Mac to do iOS native development. I have a laptop I can run Eclipse and friends on. An ideal solution would be something where I could do the bulk of the development remotely, without installing things on a desktop besides PuTTY and Chrome, but I realize that may be too much to hope for. I have a DreamHost account with Apache/PHP/et al, but can spend a few dollars for different hosting if there's something more "modern" that's worthwhile.

It seems like HTML5 is probably the right answer here, but how? There have to be tools for building nice HTML5 interfaces out there - surely they're not all built from scratch? What am I missing? What's the new hotness? Is there a technology for this kind of thing that hasn't crossed my sight yet? Where do I get started building a Web 2.0 UI? Any suggestions of any variety are welcome.

posted by jferg to computers & internet (6 answers total)

Looks like you're experienced enough that I can throw some links at you, and you can run from there.

http://html5please.com/

Javascript: The Good Parts
http://books.google.com/books/about/JavaScript.html?id=PXa2bby0oQ0C
(No free version, unfortunately. Don't consider this book Gospel, you're allowed to disagree with Crockford. But, this is a great place to get started on taking JS seriously as a language.)

Also consider "Secrets of the Javascript Ninja" by Resig. http://jsninja.com/

http://www.json.org/
(The data serialization format that has become the standard for AJAX.)

http://html5boilerplate.com/

http://twitter.github.com/bootstrap/

Oh, and eclipse is a fine tool for writing everything, if you're used to it.

Hope this helps! MeMail me with any specific questions about how to do something.
posted by Citrus at 12:55 PM on November 12, 2012 [1 favorite]

It's really HTML5/CSS3 and Javascript for interactive interfaces. From what I've observed, people don't really use Flash all that much anymore. Even animations are done with Javascript these days.

In addition to learning some HTML5 and CSS3, you can try getting started with some web frameworks. There's lots of CSS frameworks out there and lots of JS stuff for building web applications. I've had friends recommend Foundation by Zurb and Yahoo!'s YUI. Also, JQuery. You can probably find more with a little bit of searching.
posted by retypepassword at 1:02 PM on November 12, 2012

You might be interested in a Javascript framework--something that has a lot of pre-made pieces that you can use or customize rather than reinventing the wheel. Dojo is a free one, EXT is free for open-source software (but not commercial use).
posted by rivenwanderer at 1:03 PM on November 12, 2012

The new buzzwords these days are "responsive design", which could be generalized as a subset of HTML5, and helps make your web-project accessible on smaller screens without changing to much markup (or any markup at all, because everything is done in CSS).

A good place to start your HTML5 (and later responsive)- journey is the section at A List Apart. Start from the bottom up.

There is alos Dive Into HTML5 and HTML5Rocks, which details what exactly is HTML5 and what it can or, in case of some browsers, will be able to do. Speaking of bad browsers, you should have Can I Use open in a tab.
posted by KMB at 1:31 PM on November 12, 2012

Just use a framework like Bootstrap. Theres a bunch of GUI like builders for it like easel.io and jetstrap.
posted by wongcorgi at 1:46 PM on November 12, 2012 [1 favorite]

Thanks, all - this is very helpful; I was aware of some of the JS frameworks out there, but not just how advanced they'd gotten. The YUI Graphics stuff looks like it will help a lot, and tools like easel.io and jetstrap are specifically very useful. I wish I could find something like those tools for YUI, but maybe I just haven't looked hard enough yet.
posted by jferg at 11:06 AM on November 13, 2012