any web dev's around... (first real web project) tips, tricks, advice

[i8igmac]

I plan on devoting Lots of time on building a webserver. im looking for tips and advice...

i will first start with vurtualbox and a default install of ubuntu server edition (what os you recomend? anything already configured out of the box? i like deb)

My first step i feel is to make a home page as it will be the template for the rest of the way.

user registration, i have found some secure examples online

multiple device screen size friendly... any advice?

as a web dev what is your routine for starting a new site? do you use a framework?

[cooper]

Step 1: Figure out what you want it to end up as. The goal here is to have a vision to work towards. Don't go into too much specifics yet.

Step 2: Determine the first 3 phases of things you must do, given where you stand right now, to reach your goal. The first of these must be so rigidly specific it's outright obvious when you've completed a phase. The others can be more lenient, but still make them as specific as you can.

Step 3: Get to work on completing the first of your 3 phases.

Step 4: Prove that you did, in fact, complete that phase. Test your work. See that it does what you expect it to do. Don't accept "close enough" - you're building a house and the rest of your house will be built upon this.

Step 5: Go back to step 2.

This is a continuous process. The concept is called "divide and conquer" and the process is the waterfall method.

As things stand, you're already starting out shaky. You're thinking about people logging into your website even though you haven't yet decided on the OS the thing'll be running under.

Your thinking should be something like this:

Vision - I want a website where registered users can do [WHATEVER].

Phase 1 - Get a machine to run everything on. Proof of completion - I can see the BIOS of the machine as it starts up.

Phase 2 - Install an OS that I'm sufficiently familiar with and that is capable of running a webserver. I will harden this OS to the point where only the webservice and [specific services] are accessible. Proof of completion - NMap says only those ports are open.

Phase 3 - Find out which webserver is capable of hosting the software you intend to run on it and install that webserver with whatever extensions needed to run your software. Harden the webserver. Proof of completion - "Hello world" in whatever piece of software you want to create your website in being produced by the server. Metasploit or similar program can't find any problems with the installed server.

Phase 4 - Make your website produce the front page in some way that tickles your fancy. Check out how long this takes you and assume any other page you create will take just as long. Proof of completion - Looking at that page in a browser (better still: multiple browsers) and liking what you see.

Before you finish with phase 3 you shouldn't even be considering the concept of frameworks. What language were you intending to use for your website anyways?

[i8igmac]

php, mysql, ruby (for a small game function)

[cooper]

Why, why and why?

In that order. ;)

[i8igmac]

just as example, lets say the idea is a checkers game you play with friends for gold...

php will take user input send this data to the game.ruby, the game will respond with resaults back to php and also log statistics to mysql.

mysql, i will need to fabricate a board to play on for activity logs (my brain hits a brick wall with mysql) i feel i must start with the database.

[cooper]

You can run a website on Ruby, why php?

You can run a checkers game on php, why Ruby?

You can store data in a ton of ways. Why a database? Do you need to query it with SQL? There are a million database flavors, 90% of those are FOSS. Why MySQL?

Do note, I'm not challenging the choices you're making, I'm trying to (make you as much as me) understand why you made the choices you've made.

[i8igmac]

checkers is just as example, i will have to check out some ruby web stuff... i figured that stats displayed will come from /users logged/game history/game moves/gold won/etc...

i could bypass the use of a database, instead i could use encrypted text files, this would be quicker for me... but im afriad this will be a mistake...

file_name_user_bob.stats

is_logged_in=true

stats=1234

gold=100

games played=50

etc=some otherstuff

if i could use ruby 100% of the time would be convenent but maybe a mistake? (im confertable with ruby) (php is possable) (mysql clueless)

[Sebkinne]

If you are comfortable in Ruby, do it in Ruby. You have no real need for php.

I do suggest using a database to store your stats though. This is faster and more structured that using files - especially encrypted files.

Best regards,

Sebkinne

[cooper]

I will have to check out some ruby web stuff...

Start at this page and perhapse also look at this page. Get a good feel of which of them suit your fancy and provide the things you already know you need. Ignore the stuff you think you might eventually need as by the time you need it someone might've added it and if nobody did you should be capable of adding the functionality yourself.

i figured that stats displayed will come from /users logged/game history/game moves/gold won/etc...

So you've decided you want to retain stats. Don't worry about what those stats are for now. It doesn't really matter at this stage and knowing it might steer your decisionmaking in a specific direction for all the wrong reasons.

It's interesting that you seem to consider the user registry 'staple' even though it's something you're going to have to provide in some way aswell.

So what is your goal: create a website/service that does something relevant or learn how to create a website/service capable of doing something relevant?

The difference being that with the former you want to make a choice as quickly as possible and stick by it even when you've decided that that previous choice was probably a mistake but it's not worth fixing it anymore (cost/benefit) whereas with the latter you'll probably want to give each option a go to see how they fare, possibly making the same webserver/-service multiple types using them to really get a proper understanding of what makes everything tick so you can make an informed decision.

i could bypass the use of a database, instead i could use encrypted text files, this would be quicker for me... but im afriad this will be a mistake...

Being security-minded means the knee-jerk reaction to everything is to encrypt it and that will somehow solve all problems in the universe. "To a man with a hammer, everything looks like a nail". What are you protecting against? I'm assuming you're worried that someone hacks your server and modifies the file. Encryption might make the modification harder, but encryption requires a key. Since your box is rooted, how will you protect the key?

If you properly compartimentalise the functionality of your program, having your storage encrypted or not is going to make no difference whatsoever. So my suggestion would be to simply not worry about that at this stage of your project.

if i could use ruby 100% of the time would be convenent but maybe a mistake? (im confertable with ruby) (php is possable) (mysql clueless)

Your intention is to create a webserver/-service that is going to talk to the outside world. If you're not comfortable with the language you're going to create this in, you have no business making this webservice. Doing so would constitute reckless endangerment of your machine and the information people provide it. So your options are to pick a language you're already comfortable with, or learning a language untill you are sufficiently comfortable with it.

Being clueless about something is great! It means there's a new and fascinating world of skill and knowledge out there for you to feast upon. Being clueless about MySQL I'll interpret as being clueless about SQL. If you want to get into this, I would actually advice against MySQL and in fact recommend PostgreSQL. For a decent and actually rather unbiased comparison between the two, I would suggest reading this page. My reason for recommending PGSQL over MySQL is the fact that PostgreSQL is more standards-compliant and is ACID compliant. Being ACID compliant in a database is effectively the difference between a tool and a toy.

Find an online SQL tutorial that works for you to come to grips with the language, then look into something called the Boyce Codd Normal Form. It's a process that helps you create a database schema (which tables you need, what their key columns will be and what relations there are between the tables) from a description of your requirements.

[i8igmac]

So. At this point I'm drawing my home page on a chalkboard... the placement of each button will not be a easy task.

Just as example picture a checkers board has 64 square buttons in a digital world... for my game I need 150 buttons placed on the screen, square's and rectangles with no real pattern...

any idias to help simplify this task? Maybe a gui?

[cooper]

Can you specify it in rows and columns, or maybe post a picture of the chalkboard rendering.

[i8igmac]

For a quick picture. This is not exact amount of butons...

I would like to overlay these buttons as semi Transparent

A image could be placed behind these buttons...

at first each button will be hello world by example..

any snippets come to mind that I could play with? Or maybe software?

I do appreciate your comments...

[cooper]

Hrmmm.. Tricky.

The background image is done via CSS I'm sure Google can provide you with TONS of examples.

For the mostly solid grid I'm thinking table. The parts larger than 1 cell would use the colspan and rowspan directives. The one on the bottom-left with a small button set within will probably have to be a div with a second div inside that floats to the bottom-right corner.

The 4 buttons at the top can probably best be placed on a single row and use a large value for margin and/or padding to achieve the spacing.

It's all just HTML so far, but what is your target screen's minimum dimensions for this? If we were to say standard HD screens which will inconvenience some PCs but those are mostly old ones, then there's 1920x1080 pixels on the screen and at least horizontally you should have all of them save, say, 15 for a potential scrollbar. So you have 1065 of actual pixels horizontally. You drew what amounts to 15 squares assuming you really do want the rightmost column of the 3 that extend down to only be 3 squares wide even though the other 2 are 4 squares wide. So, 15 squares. That means each square can be 71 pixels wide before you run out of space. Will that suffice? 71 pixels isn't a lot I can assure you. That avatar icon of mine next to this post is 54 pixels to put it in perspective.

If someone were to view this design on a mobile like, say, an iPhone 4 (*SPIT*) the resolution is 640x960 so if the screen was rotated for maximum width (you can use HTML5's media queries to discover screen width) we're down to 64 pixels or 42 pixels in the upright position. What you can do is to either give mobile users the finger and let them scroll both vertically and horizontally, or you can make a second design with mobile in mind and switch between the two based on the detected screen width - it's what this forum does (although it might detect a mobile based on something other than the screen size, but it'll be described near the media thing).

One thing to note is that frameworks will give you prefab implementation but, if they're created properly, NOT (or very, very little in terms of) design. And that's what you're now working on.

[i8igmac]

Your explanation on pixels was a big help. I know what to aim for now...

So. If I have a basic table 900x300px... can I place a transparent table of exact size directly over the first table? This second table will have 10 times the ammount of cells for precise clicking locations(hi world from cell x.y)

[cooper]

If you use a form input element of type image, clicking on the image will submit the form and include the exact coordinate you clicked on.

When there are a few shapes on the image that are clickable, use an image map (image tag containing map tags containing area tags that define a clickable shape).