(Google Earth - Earth) + Post Secret + Newbie = Help Me!

[jsolomon]

Hey everyone,

 

I am looking into this project as a learning experience and in the hope of building something interesting.  I know very little about web design, though have limited experience with HTML, CSS, JavaScript and PHP (very limited).

 

My idea:  The webpage is a blank, white, infinite canvas.  Users can navigate through the canvas via click/drag and zooming.  Users can click anywhere on the canvas and type to add text.  A submit button will appear to confirm their entry.  Every user can see all entries.  Essentially this would be an interesting way to collect and display human thoughts/experiences.

 

My understanding: As far as I can tell, I would need PHP/MySQL to capture and store the text entries.  I would need CSS to lay them out properly, and I would need a shit load of Javascript/AJAX to provide the camera controls.

 

Questions:  This post is my first effort and identifying what exactly this would take.  How would you all structure a website like this?  What languages would I need to learn, what resources could I turn to, etc?

 

Any advice is highly appreciated.

 

Thanks,

Jake

 

 

[roopurt18]

This is one of those ideas that sounds like the dumbest thing ever on paper, but then somehow goes on to become extremely popular out of the sheer novelty factor.

 

Basically you just need to conceptualize your canvas as a box with w x l x h.  Then you store each comment with an associated w, l, h, and the comment itself.

 

Then it's a matter of taking what portion of the cube is visible to the viewer, pulling all of those comments from the DB, and then generating an image with the graphic library.

 

A very interesting idea!

[spikeon]

well, i'd like to throw this in there.

 

do NOT run it off of IMAGES!!!

 

because heres what you'd end up doing, unless you started off making a damn good attempt not too.

 

you'd have it load all of the images, which would tile like this:

 

img img img img img img img img img img img img img img img img img img img

img img img img img img img img img img img img img img img img img img img

img img img img img img img img img img img img img img img img img img img

img img img img img img img img img img img img img img img img img img img

img img img img img img img img img img img img img img img img img img img

 

for infinity.

 

making it KILL everyone's bandwidth for infinity.

 

use some form of javascript that will just move the text arround.

 

 

[roopurt18]

Um...You don't need to tile images for infinity.  This site would run more like a web application so he could define the width and height.  Let's say you want a visible display of 3x3 image tags, or 9.  You want an extra row on each side and top and bottom, so that's a total of 5x5 image tags.  You load the 9 that are initially visible and then load the non-visible ones.  As the user drags images off the screen, you bring in the non-visible ones and then place the ones dragged off on the other side, like a conveyor belt.  This is how most internet mapping applications work AFAIK.

[spikeon]

tru dat,

 

however, wouldn't it just be more practical to, if its all text, just move TEXT, which is signicantly smaller and then people could copy quotes and stuff?

[roopurt18]

however, wouldn't it just be more practical to, if its all text, just move TEXT, which is signicantly smaller and then people could copy quotes and stuff?

 

I agree that overall text will consume much less bandwidth, but assuming a white background and limited colors in the text, all images could be served as gifs to cut down the image bandwidth.

 

The thing that makes this tricky is being able to zoom in and out.  It's hard to say ahead of time which will place more or less load on the server.  But if you try and do too much on the client with JavaScript you're going to kill those users that have slow machines if you're not careful.

 

I'd say it requires experimentation with both methods to determine which is preferred.

[spikeon]

oh, theres zooming?

 

than images....

 

ya...

[jsolomon]

OK OK, sweet start.  Thanks for the help so far. 

 

As far as I see it, here are the first few problems I have to solve and some first guesses to solutions:

 

1. Tracking the user's mouse movements around the page - Can I do this with Javascript?

2. Create some way to accept text when the user clicks - No idea...Can't do this with regular forms, can I?

3. Save the text (or img?) in a DB with positional info - PHP/MySQL, easy stuff.

4. Load the new text entries - PHP/MySQL

5. Position the entries - CSS? What's the best way to dynamically layout a page like this?

 

I'll deal with the dragging/zooming thing later - it seems way too hard.  So, how can I deal with each of these problemos?  What languages, what tools, what strategies do you suggest?

 

Thanks!

 

[roopurt18]

I swear I replied to this earlier today, but I don't see it now.  The short version of my reply was, "You need to learn JavaScript and you need to learn it well."  Forget the zooming aspect of this project and a lot of the complexity disappears.  Most of your issues are then boiled down to rather simple things you can accomplish with JavaScript.

 

If you want to learn from online tutorials, you need to check out anything pertaining to DOM and the Event Models for JavaScript.  It also helps to have a solid understanding of JavaScript itself.

 

Since I have a hard time learning from tutorials (my eyes get tired after working all day), when it was time for me to sharpen my JavaScript skills I picked up Javascript: The Definitive Guide (has a Rhinoceros on the cover) from O'Reilly; I consider that book an essential member of my collection.