jsolomon Posted February 20, 2008 Share Posted February 20, 2008 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 Quote Link to comment Share on other sites More sharing options...
roopurt18 Posted February 23, 2008 Share Posted February 23, 2008 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! Quote Link to comment Share on other sites More sharing options...
spikeon Posted February 27, 2008 Share Posted February 27, 2008 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. Quote Link to comment Share on other sites More sharing options...
roopurt18 Posted February 27, 2008 Share Posted February 27, 2008 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. Quote Link to comment Share on other sites More sharing options...
spikeon Posted February 27, 2008 Share Posted February 27, 2008 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? Quote Link to comment Share on other sites More sharing options...
roopurt18 Posted February 27, 2008 Share Posted February 27, 2008 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. Quote Link to comment Share on other sites More sharing options...
spikeon Posted February 28, 2008 Share Posted February 28, 2008 oh, theres zooming? than images.... ya... Quote Link to comment Share on other sites More sharing options...
jsolomon Posted February 29, 2008 Author Share Posted February 29, 2008 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! Quote Link to comment Share on other sites More sharing options...
roopurt18 Posted March 4, 2008 Share Posted March 4, 2008 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. Quote Link to comment Share on other sites More sharing options...
Recommended Posts
Join the conversation
You can post now and register later. If you have an account, sign in now to post with your account.