How should I create a web interface for my application?

Question

First, a little background: I have written a little application in python with SQLAlchemy, which is roughly an improved RSS reader: it selects links that should interest the user, and shows them to him. I already have a very simple command-line interface, and I envision a variety of interfaces: web, instant-messaging, desktop...

For now I'd like to create a simple web interface, but I have absolutely zero experience in the matter (appart from making a simple php forum 5 or 6 years ago...). So I'm comming here for advice on where to start:

1. Is there a good tutorial on HTML/CSS/Javascript focused on making a website look good simply? I know about w3schools, but it's a terrible tutorial IMHO, since it teaches you about HTML/CSS but doesn't show you how to use them.
2. Should I use a javascript library? Which one?
3. Should I use a web framework? I'm guessing either not or a very lightweight one, since I already have an application core with a database and SQLAlchemy, and I don't want to drop it.
4. Any other advice?

Thanks!

Answer 1

HTML, CSS and JS Book: DHTML and CSS for the World Wide Web

Javascript Library: JQuery

Web Framework: Not sure, DJango?

Other Advice: Learn to write HTML, CSS, and JS in a a simple text editor with syntax highlighting. Complex IDE's are cool, but for this stuff, they will make you learn slower.

Answer 2

I recommend that you use some kind of web framework, it will make things a lot easier. Since you already know Python you should look into Django framework. It seems that you can use SQLAlchemy with Django, see djange-sqlalchemy project.

I recommend using JQuery framework/library for Javascript stuff. It greatly simplifies coding and takes care of most web browser incompabilities.

This CSS tutorial seems to give you the basics.

I would start by reading the Django tutorial and start trying things out. I wouldn't worry too much about HTML stuff, you should be able to pick up enough from Django tutorial. Make your site first functional with HTML, Django and SQLAlchemy. Only then start worring about Javascript. Who knows, maybe you do not need Javascript at all?

Do not try make your site work and look good at the same time. When you are making your site work, use simple and ugly HTML pages. When you are making you web site look good, work only with static HTML pages and CSS files. It is easier to combine the two in the end.

Answer 3

Web applications are not simple.

HTML and CSS: Head First HTML is probably a good starting point. The Head First series are usually excellent tutorials. As Josh said, write your pages by hand.

Javascript: you don't need this to get started. Maybe in a later version. When you have a better idea what you'll need Javascript for, you'll be better equipped to pick a library that suits your needs.

Web framework: You should probably start with Django. That's the opposite of a "very lightweight" framework, but in this context "lightweight" requires more expertise to make something polished. So it's a good idea to aim for "feature rich and well supported" instead.

Answer 4

It's an interestingly common mistake: all of the above answers provide technological advise on what's the best technology to do ... what exactly? You should work the other way around.

I think that if you want your application to be successful, you have to make sure it enables its users to get the most out of it in the most natural way to them.

Therefore, i suggest you first "storyline" how things should happen from a user's perspective. Use paper and pen, or more sophisticated wireframing tools such as balsamiq mockups.

So, first lay out what the experience should be, and this will tell you which technology will be the best choice to enable that experience.

Oh, and don't forget to read this.

Answer 5

Here is another option, I feel it's worth mentioning before making any decision.

As web framework I would advise web2py, it is very easy to setup and yet powerful. Here is a document showing the differences between Django, web2py and some others. It is somewhat old but will give you a good overview.

Since you have legacy code, if you really want to keep it there is a fair compatibility between the two although you should double-check. The easiest would be to adapt your code, of course, the differences aren't so big. But that's your call :-)

Regarding the Javascript library, probably jQuery.

Answer 6

Just like everyone else here, I'll chime in with "Use my favorite framework, because it's what I use...."

I would start with small goals for a web interface. Get something simple up and running that to make sure you understand how things work.

Write an app that responds to the following url and returns something.

http://localhost:8000/my%5Flinks

Once you understand the little bit of machinery it takes to make that possible, what is handed to you as far as information about the request, and what you need to produce to return to the caller, it should be come clear how to fill in the blanks to get from your existing application to data thrown at the web browser.

Learn WSGI for no other reason than most of the libraries that will help you build a web application utilize this to some degree.

One of the links from the above page that I found extremely beneficial in understanding how all this works. was Ian Bickings article "A Do-it Yourself Framework"

Once you get a grasp of that stuff, you may find that dealing with WSGI at such a low level is maybe a little too cumbersome. That's when you'll probably want something like WebOb
which is just one of several ways people have come up with for abstracting away the low level details of the request/response cycle into some convenient objects. In a sense encompassing the HTTP protocol without trying to make it make sense to someone who doesn't want to know what HTTP is.

Depending on the complexity of your application you may decide that handling a request, looking at the path and dispatching off to one of many functions is a drag you'd rather not deal with. This is where everyone's favorite framework starts to be beneficial. And I would suspect that you would know enough by this point to better assess the frameworks that are out there and determine which fits your needs and goals.

Lots prefer django, maybe you will too. Others prefer Turbogears, and or Pylons, maybe bfg, maybe grok, maybe zope, maybe plone. But no one here knows what you want your application to do.

Answer 7

The best introduction you could follow is the opera web standards curriculum. Some of the information will be too basic - but a full understanding of all the topics covered will give you a very good grounding.

http://www.opera.com/company/education/curriculum/

Alternatively team up with someone who specialises in front-end development.