Ask HN: Guide/Tutorial for designing a WebUI from scratch?

[aagnihot]

I am C/C++ programmer (system programming background), and was experimenting with Web Application development in my spare time (using Perl). Is there any Web UI development tutorial which you guys refer (or have referred in past), which teaches Web UI development ground-up?? Like making custom buttons, making custom menus, customizing backgrounds, screen resolution handling, in short everything...

[gstar]

This doesn't exactly answer your question, but you could take the contrarian approach and spend time learning Cappuccino, which abstracts a lot of the archaic and difficult web UI principles away.

Web UI is difficult to define (there is no standard, but there are a bunch of competing standards) - and from a RAD perspective it's behind where the desktop was 10 years ago.

You may also get some benefit from looking into web frameworks such as Catalyst (if you know Perl), or Django or Rails (for Python and Ruby respectively). Examples for those frameworks really are very good walkthrus of creating a webapp.

[mahmud]

He said "from scratch", and Cappuccino will not teach him anything about the web, but about how Cappuccino sees the web or thinks it aught to be.

Catalyst, Django and Rails will only teach you about themselves and how they do things. A cleaner and quicker approach to the web, its protocols and standards, would be by creating a modern app using CGI and struggling with it every step of the way.

[bhousel]

Check http://www.smashingmagazine.com for all things design related. They have a lot of articles, tools, and tutorials for this sort of thing..

[Chirag]

If you you want to write HTMl code from the scratch. Go to http://projectdeploy.org/ and download complete Skeleton structure based on your requirements.Then head over to http://speckyboy.com/ this has the best set of Tutorials and Showcases. Programming for web is fairly very simple.

[larryfreeman]

I think the best tutorial/framework book for building a web app from scratch is Agile Development with Rails by David Heinemeier Hansson.

If you have a Java background, you should also look into Lift/Scala. The Lift web site is found here: http://liftweb.net/

There's an O'Reilly book on Scala which looks like a solid reference.

[natemartin]

Well, do you know the basics? HTML and CSS? Pretty much all the custom buttons, menus, etc you see are just clever HTML and CSS, with some well placed images.

Are you asking how to design a button in, say, a graphics program? Or are you asking how to turn an anchor into a fancy looking button using CSS?

[pbhjpbhj]

What he said - menu's and buttons are just links and lists of links with styles applied.

If you're doing fuller apps you might want to look at Yahoo's YUI?

[towndrunk]

May I suggest looking at dojo http://www.dojotoolkit.org/.

It provides prestyled controls with some themeing built in. You will still need to know some html and css but you can get calendars, dialogs, tabs, accordions etc very easily.

[mahmud]

It's all done with html, css and javascript. Web UI development is all bag of tricks; the big frameworks try to unify these disparate tools and techniques under one API .. but it's not always clean.

Worse than UI is data management. Data model, layout, access, searchability, performance, distribution of the underlying system and its scalability, etc.

Worse than both is session management.

There is no one HOWTO for this. You will need to get a few books on CSS, clean HTML design, and a decent javascript library. JQuery is trivial to learn and its jquery-UI library will abstract a good chunk of the difficulty, but you still have to understand how everything works underneath.

If you don't get the web, you might be better off playing with HTTP as a protocol. Writing a screen-scrapper for various sites and dealing with cookies, hidden forms, authentication and similar, using Perl LWP, will teach you more about HTTP than any book, though you can keep HTTP The Definitive Guide nearby.

You will need to grok HTML, get the oreilly HTML the Definitive Guide as well.

CSS? CSS The Difinitive Guide.

JavaScript? Get the Rhino book, JavaScript the Definitive Guide .. see a pattern yet?

The definitive guides on HTTP, HTML, CSS and JavaScript are the heavy tomes you will need on your desk(top). Nearly every other publication on the subject if frivolous and trendy. Those books are the meat; they're essentially guides to the specs themselves. You're C and C++ programmer, you will appreciate this stuff.

After that, get every book you can find on CSS. Buttons, menus are made with CSS and images. Buttons could be made with the <button> tag, but not always, there are also image buttons, along with "standard" button built into HTML forms (i.e. submit and reset.) Menus are made with lists, tabbed menus could be made with pure HTML but they are a pain, so some people use javascript for that.

The most important thing you will need to understand is the DOM. The DOM is what ties HTML, CSS and JavaScript together. The Rhino book actually covers all this ground.

Sessions tie a few loose ends together; you will learn a lot about POST and GET methods of HTTP trying to implement a shopping cart, for example. How do you persist user's shopping cart? does state stay on the server or does it go on the client side? Do you use cookie, session-side variable, do you rewrite URLs to encode the cart contents or do you put them in a hidden form input client side?

You wont be jumping into buttons and menus straight away; not if you want to understand everything. Play with web crawlers, learn to tweak websites with GreaseMonkye, get Firebug and have it open while you read the books, get the Tamper Data plugin for firefox and see what is being sent and back forth, get the YSlow plugin, etc. These tools will not help you learn all this stuff, but they allow you to peek into websites and show you how things are done. I use ColorZilla to copy nice color schemes from websites. The Firebug element inspector will highlight any screen element and show you how it's been coded in HTML, you can also inspect the CSS design and the javascript that makes it all alive. I learned most of this stuff by reverse engineering.

Welcome to hell my friend, it's gonna be fun.

[pasbesoin]

Disclaimer: I have no relationship with O'Reilly. Further, I'm not myself signed up for Safari. (I have a lot of dead trees laying around.) But my recollection of comments made about it is that the overall weight of them has been positive.

Quite a few of the books mentioned are available via O'Reilly's "Safari" subscription service. It's not "cheap", but if you don't mind reading on screen, it can provide immediate access to these volumes as a group for considerably less than buying them all at once (new / latest edition, at least).

Then again, if you have access to a well stocked library or colleagues' bookshelves, better yet.

My concern with this approach, overall, is that the volume of information may be overwhelming/discouraging.

[tom_b]

Thanks . . . I think.

As someone more used to playing in the enterprise backend software space, I figured that combining html, css, and javascript was the hell required to really get into web dev. Plus adding in the "you're either have taste or not" issue for UI design makes professional web dev sound like so much fun.

You mention using a "decent javascript library." Is this the first step these days? I've gone back and forth whether to go from "first principles" vs just grabbing jQuery and having at it.

[aagnihot]

Thanks a lot!! That really helped getting me some direction...I will be start learning HTML, CSS and then the JS!!