I'm doing some research before I start a project, and I want to know what the best method of going about this project is before I begin. Any help I can get would be much appreciated, and I'd be happy to provide more information if necessary.
Basically, I'll be given a number of extremely high resolution images to display to users. I want to create an interface whereby the user can scroll around the image and zoom in, as well as hover over parts of the picture and receive some information about that specific location. Also, I would really, really like it if I could do it without using Flash in any way, both because I don't like Flash and because it wouldn't work on i-devices.
Here's an example of the zooming capability that I'm looking for, and here's an example of the hover capability that I'm looking for (sorry they're both biblical manuscripts, don't mean to get religious on y'all, these were the best examples I could find!)
Anyway, so far I've found this spiffy script for zooming, but I haven't found anything for hovering yet (another example of what I'm looking for is something like when you tag someone in a picture on Facebook - if you hover over their face, their name pops up). And to make things all the more difficult, I have to figure out how to make them play nice, so zooming in doesn't break the hovering capabilities.
So my questions are...does anyone have any experience with anything like this? Do you have any suggestions for projects (open source is far preferred) that allow for this kind of thing? I'd really appreciate any help you fine people can give me! I'll be publishing my findings and code afterwards.
I think the technology behind Google Maps (and other such technology) would be the way to go. With Google Maps API you can use your own custom tiles instead of the map tiles. You could then set boundaries on the map to stop the user navigating away from your available imagery. Lastly, you can use the API to specify the coordinates for polygons on the "map". These polygons are great as the allow you to have hover/click events which should provide you the functionality you're after.
A good article I found on something similar to what you're after can be found here: http://forevermore.net/articles/photo-zoom/
Hope this provides some direction and sounds like a fun project that you're about to embark on :)
Related
I want to display statistics on my site - we have the figures, but would like to display them in some way that looks prettier than just displaying the numbers.
Has anyone done this before, and do you have any recommendations for software we could use? Obviously open source would be ideal, although we might be willing to pay a small sum - they're not complicated stats though, so something simple would be best.
The mockup done by our designer is based on Google Analytics, but I think that may be a bit more than we need.
Essentially, there are 4 numbers, which change over time, so we would like to plot graphs showing each of them.
Thanks!
If the mockup is based on Google Analytics, than I would reccomend the Google Chart API. Another advantage could be that integrating this API is really easy (you have to load an url where Google makes the plot for you, so no need to install any library on server/homepage).
You could make static, image based plots, and interactive ones also.
I'd start using http://code.google.com/p/flot/ or possibly with http://www.highcharts.com/
I would recommend using jpgraph http://jpgraph.net/ or graphpite http://graphpite.sourceforge.net/
I'm writing a ticket-shop-system atm for reserving tickets for various concerts.
What I have is a php-backend and a webpage that shows a .swf with some actionsscript-3 code in it, to draw in flash some sort of map and make available seats clickable for the end-user.
The problem with this solution is, that there are quite large halls and just making the seats smaller isn't the right solution.
My next idea was to make a google-maps-like interface, so that users can pan and zoom and things like that. But I can't find any information about doing something like this, whether it'll be flash or javascript or something else...
I would appreciate any information regarding this topic!
Thanks in advance!
Google maps allows you to use their system and provide your own custom map too, so you can overlay your seating chart and nothing else. You can read the documentation here.
There's a sample pan-zoom flex application you might find helpful:
Source Code for Pan-Zoom Flex Map.
Hope that's helpful.
Take a look at Seadragon (http://seadragon.com). Might be an interesting way to expose the functionality.
im a pure backend programmer and i find it so difficult to position divs and add css styles.
what are your advices to make this as simple as possible for me?
use dreamweaver? what can it help me with exactly.
i have no idea how to add style to my prototype or handling positionings of divs and elements. some guides? tools? softwares? online scripts?
please all suggestions are welcome! guide me through...im all business logic and none design head.
eg. http://www.workey.se. how do you start with layout, design and all that stuff...
Depends exactly what you need to do, but learning the basics of css is pretty easy, mastering it is far more difficult of course. I'd suggest you just learn CSS and makes sure you get a decent browser add in like firebug so that you can see exactly what is going on. I'm not a fan of dreamweaver personally.
Dreamweaver is a good tool for initial design but I wouldn't recommend it for much more than that. Of course many people use it exclusively.
Why not try some CSS framework like the 960 grid? It can help with positioning elements on the page and leave you to worry about the specific implementation of your design like fonts and colors.
http://960.gs/
If you want simple page layouts something like YUI might help you. It has a large collection of pre-built code for you to use. Particularly the Grid Builder is great for creating multiple sections to populate within pages.
As for tools as long as it has decent syntax highlighting any text editor would be fine. Personally DreamWeaver tries too hard to 'help' and instead gets in the way but then I'm happier just with the raw mark-up.
I agree with some of the posts above, and empathize with the "pixel pushing" difficulties you might encounter when starting out.
I've been creating and recreating HTML layouts for about 5 years now, and after trying YUI, Google Blueprint, several css reset libraries, and my own home-brew layouts, I find YUI's grids, fonts, and resets are the most flexible and useful. Their templates are a little tricky, but only a little.
Here's my answer to a very similar question (in case people would rather not click through to see the answer...if this is spamming or against the rules, please let me know and I will remove the answer)
:
"
All of the above are excellent. Dreamweaver (imho) has the most complete set of features for designing pages (Adobe actually licensed some of the technology from TopStyle a while back to improve their feature set). And it has excellent validation built-in.
Another FREE tool (remember, Dreamweaver will cost you at least a few hundred unless you steal it) is Aptana IDE. It has most code completion options that Dreamweaver has, and similar validation tools.
Aptana and Firebug plugin for Firefox make a pretty good combination. In addition, there are Firebug extensions and other Firefox plugins that are tremendously useful:
Pixel Perfect: allows you to add a semi-transparent background image to line up elements on a page (shows up as extra tab within the Firebug plugin).
Code Burner: adds html & css reference tab to firebug.
ColorZilla (plain FireFOX extension): analyzes your colors and helps you manage them.
MeasureIt (plain FireFOX extension): Helps you measure distances between elements on a page when Firebug isn't enough.
WebDeveloper toolbar: does all sorts of nifty stuff, but I only use it to resize the browser to a specific window size (like 800x600).
"
you should use css templates (a list here)
or download an already made layout (everywhere on the net) and change bits with firebug to see what pleases you. (An example)
Edit : i am 'only code' too, i style my web UIs by hand. But there's a lot of addons for firefox that will greatly help you design your layout. (Here's a list)
Anyone know a good tutorial of how to make the status bar found in the new facebook? the one on the bottom. looks really cool
i was thinking it was written in either ajax or jquery. but not sure.
Here are some useful links/plugins that might help you:
Positioning the footer
Enable drag/drop of things (like applications)
Tooltip (when hover)
And for the interaction with the server (for new events etc.) you might use the AJAX functionality in jQuery:
In order to have it always be in the bottom, that is more of CSS than javascript.
I think you would get better answers if you were more specific. For example, I would want the answer to revolve around as to how the chatroom works on facebook. Is the javascript request being sent every second to check for new messages? or is there another protocol being used in order to have instant messages?
It's not clear what your are looking for: bar's design or it's functionality. If your are speaking about design you should look into css positioning (absolute). If it's about functionality i suppose that there is some kind of ajax javascript which checks every x seconds if there is change of state, and if there is go deeper and find out what to load.
Why not just download the Facebook source code and take a look at how they do it? They open sourced a lot of the stuff they use/created/enhanced.
Soh Tanaka just put out a great step-by-step tutorial on how to re-create the Facebook Status Bar:
Here's another good starting point: http://www.ben-griffiths.com/project/jquery-position-footer/. If I remember correctly it works in FF & IE & Safari
I looked through the jQuery plugins, and Googled the topic for you. All I could find was this which isn't exactly what you want, but it is a good place to start. With some style changes, and a little tweaking it could easily look exactly like the Facebook bar.
Not sure that this is the type of answer you were looking for, but i've been looking for the same thing and this code seems to at least show how it's done.
I'm working on a new project, a web application, where I need to focus the user on a particular task. Therefore I want to eliminate all other "System Generated Noise", like Browser Menus, Buttons, Address Bar, OS Task Bar and so forth. I have seen implementations like Lightbox, but this modal approach is limited to the size of the browser window.
What I want to do is have the same effect but stretched out beyond de browser so it covers the WHOLE screen. Well, at least that is the effect I'm aiming for.
The application is already on its way, it is being developed with PHP5, XHTML and Javascript/AJAX.
Please, if someone can point me in the right direction I'd greatly appreciate it.
this may help you:
http://www.programmersheaven.com/2/FAQ-JavaScript-Maximize-Browser-Window-To-Screen
Don't know if it is possible in the way you are describing without using something like flash or silverlight.
With good reason, there are certain things that remote javascript can't, and just shouldn't be able to do.
Another thing to consider are what happens when people have more than one screen, are you going to obscure whats on them too?
Please don't... drives me (and many other people) nuts when a web site tries to resize the browser window, let alone try to run outside of the browser chrome and cover up my task bar.
Let us know what browser you make that work in, and I'll be sure to either cripple the functionality or uninstall it if I can't.
Silverlight has a full screen mode that you can set after the first page is rendered in the browser.
http://weblogs.asp.net/scottgu/archive/2007/05/17/tip-trick-supporting-full-screen-mode-with-silverlight.aspx
Don't know if that helps with your current stack:
PHP5, XHTML and Javascript/AJAX
Keith
OK, so I've been looking around for other options, or alternate ways I can do this. One solution I found, only works with Firefox 2.0+ or IE6+, is to toggle the browsers Full Screen mode. Maybe even do a little pro Open Source and support only Firefox and urge the user to get that browser...but hell, if I'm telling the user to get stuff why not tell it to go and grab Flash o Silverlight, right??
I think it's a thin line between what is possible, what is wanted, and what is right for the user. I've yet to find what is needed to do this. But I think it's a lot more viable option.
Let us know what browser you make that work in, and I'll be sure to either cripple the functionality or uninstall it if I can't.
Mmm WTF!? Gonna go ahead and asume that was a nice comment gone bad. Not very constructive though.