
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.

