I don't want to use flash because it won't allow me to dynamically modify (add, remove) the pictures through my application so I thought about javascript (JQuery Plugins). but the problem is visitors can save the pictures and I don't want that to happen! .. so any ideas ?
Edit
I really appreciate your help and honesty but is JavaScript to have a dynamic modifiable SlideShow for my websites ? .. I don't care about screenshots, what's important is the original picture that I think will be downloaded to the visitor temp files!
The best you can do is a mild deterrent. I've written an HTML5 slideshow used by many. It offers right-click warning to those using it, but it is best referred to as a warning rather than a protection.
First off, if a browser can display an image, any viewer can get them too - no matter what you do - that's just the way the web works. If you really need them protected, then you need to use a significant semi-transparent watermark that touches important parts of the image or limit the viewing only to people who you trust.
If you're interested in a mild deterrent that can still be bypassed quickly by anyone who understands how a browser works, but might slow down non-sophisticated users, then you can implement a couple forms of click protection that make it harder to right-click save your images. Right click protection works best when the actual image you are displaying is not the top level image. This can be done by displaying a transparent image over the top of your slides. This will not be seen, but if a viewer succeeds in getting to a right-click-save menu, all they will succeed in saving is the empty transparent image on top. You can literally use a 1x1 transparent gif image which is tiny and then scale it up to the size of your image to cover it. It will not be seen, but it will defeat right-click save.
It is also common to also put in some javascript that attempts to intercept the right-click operation to prevent that, though this protection is blocked by more and more browsers now (like Firefox 4+) and is far from foolproof. It should not be relied upon.
In the end, these extra steps are only a mild deterrent and will only work with non-sophisticated viewers who aren't very determined. Because, even with the maximum protection in place, one can still look at the media list in the browser and see all the image URLs in the web page or look at the source or DOM or network trace of the web page to see what the URL is of the images that are being displayed. Once the URLs are known, the images can be saved easily. The danger of this kind of protection is that content owners believe it's real protection and they put images at risk that they shouldn't (without good watermarks on them). But, if you fully understand what you're getting (and not getting), you can do it.
It is impossible to Really protect them. If the user can see the image, then the user's browser has downloaded it. So the user has the image on their computer and can do anything they want with it.
There are lots of ways of making it harder for the user though. Disabling right clicking is one way.
If you really need to hide them badly you could use the data uri scheme too, but it really won't stop someone who really wants to get it:
http://en.wikipedia.org/wiki/Data_URI_scheme
You will not be able to protect your images unless you use a watermark which not what you're looking for as I understand you.
You need to remember that the user will always have his printscreen button and many tools that can do the job and that you can't control anyway
Break up your images into pieces, or possibly even embed them in larger junk images. Then use CSS to display the multiple overlapping divs with appropriate background styles to position the pieces where they need to be so to the user they look like one image, kinda like how google maps looks like one large image but is actually made up of many small ones. The user won't know the difference, but if they try to save them locally they'll just get one piece at a time.
Of course, that only works until they realize they can do a print-screen, but it's something. :-)
It is impossible to completely protect your images.
Seriously, if the user can see it in their browser they can save it to their computer.
You are fighting a losing battle here.
Even if you watermark your images, a good graphics program can countact that.
The best thing to do is only display small, low quality images that people wouldn't want to keep anyway.
Related
I do have a C# application that calculates storage space in terms of boxes, for some products which itself consist of several parts.
The calculation includes suggestions on how many single parts to put into one box, taking in account volume and weight of the part. The overall result states the number of boxes needed for a given quantity of products.
As of now I am putting the results into a database and then copy it into an Excel file. Furthermore I am creating some charts to better visualize the numbers.
I am not satisfied with this solution. I do however have no idea, on how to programmatically produce a printing output. I am familiar with standard printing in C#, but woking with various sized tables and charts there just seems wrong and an awful lot of work to me.
I have to admit I am lacking some experience in this field, therefore I would be pleased to hear from you on this matter.
The short answer is, it is going to take a good amount of work. I think the most important step towards coming up with a solution is stepping back and realizing everything that needs to be printed and how you would handle it if you were a printer (sounds weird, I know!).
You're going to want to write your own DocumentPaginator and draw elements for each page in the overriden DocumentPaginator.GetPage method. The DocumentPaginator is what the printer uses to print documents, so it calls the GetPage method and you can send it a DocumentPage with user controls drawn on it. You also have to be able to do things like calculate how many pages to print, so keep that in mind.
Since they are different sizes you have a couple options that I can think of:
Only draw (scale) the tables/charts to be the width of the maximum size of the page being printed
Draw 1 visual per page (I would suggest keeping them all landscape or all portrait oriented to keep it simpler for now)
Basically if you're going to use the PrintDialog's dialog for the user to select the printer and printer preferences, it'll save you some work. If you don't want to show a dialog, then you will need to become fimiliar with PrintDialog, PrintQueue, XpsDocumentWriter, PrintTicket, PrinterCapabilities, PrintServer, and DocumentPaginator.
Note: If you allow a users to print 1 control across multiple pages, realize that providing "half drawn" controls and/or printing both "vertically" and "horizontally" adds another degree of complexity.
I have a desktop app build using .net. I want it to support multilanguages. I am able to do that using resources. Issue is what should I do for images which have text? Should I include all images for separate languages? If so then this will make it difficult and also will increase its size.
I just read that in Android there is "9 patch image", isn't there something similar?
I wish to add background image, and write text on top of that. This background image should resize without change in quality of the image automatically to the size of text in that language.
I couldn't think of any way to avoid separate images with WinForms. WPF, no problem. Web app, no problem. I played around with both text and image on a Button control, but that does not scale fully. I tried using a label over a PIctureBox, but it is impossible to achieve transparency with a Label control. I also tried this using a WebBrowser control--such a thing could possibly work, but would take some further research and would probably change your deployment dramatically (since you would need to make the localization available from some http server).
So I think there is no easy way to do this--I could find nothing easier than maintaining the images separately.
In one of my projects, i had text displayed on top of images. Since the site was multilingual, so no text was part of the images. Instead text was displayed on top of the images, using css properties for absolute position. This had to be tested in all browsers, with multiple languages, as the text size varies in each language, this might break the UI. so enough space has to be provided for text considering all supported languages
I am currently designing a portfolio website with wordpress. The idea is that it's going to be all in one page, and use js to scroll up and down.
After coding the whole thing in fixed width, I thought of the responsive design. I started reading and I think I got the idea. Before doing anything else I am going back to photoshop and re-editing the design for mobile - to quickly see what I want for mobile (almost mobile first, at least on photoshop, kind of ignoring what I already have)
In my current design I display my work examples in slideshow. I am using this plugin http://css-tricks.com/3412-anythingslider-jquery-plugin/. my first instinct is to remove these slideshows when for mobile and use only one image for one each work. is that good idea?
Also I seen some responsive design tutorials which use the same images for all resolutions and then scale them down with css. Should I have different (sized) images for mobile? for example
#media screen and (max-device-width: 480px) {
.img {
background:url(site-small.jpg)
}
}
#media screen and (max-device-width: 600px) {
.img {
background:url(site-large.jpg)
}
}
As I said my portfolio site is all in one page, and I use the jquery ScrollTo() feature to get this effect on navigation http://two24studios.com/. For mobile version, should I remove that or not?
I have some decorative images which simply look impressive and adds very little more to the interaction, would it be better if I remove them when screen gets smaller. And on this note (though I didn't look into it yet) if I what to remove some content when on small screen, do I only use display:none or is there a way to prevent the content from loading for no reason.
I am using one embedded font for the design, is it ok to keep that for the mobile version or is there any restriction on that, such as do mobile browsers support #font-face embedding.
And the very final thing, I am planing to create a new page within wordpress, and call it something like "playground" which would have a list of demos on html5, CSS3 and the like just to show off my skills. should I include that in the mobile version or not. As I think a mobile user can't really take advantage of that?
I hope you can help me with any of these uncertainties that I have
Mobile users have more limited bandwidth and slower connection speeds. That's something you want to keep in mind when considering how quickly the page will load as that can greatly impact user experience.
I would avoid using the slideshow for mobile -- or at least doing a slideshow that uses smaller images appropriate to the screen size. You don't need to download an image that's 720px wide when you're on a 360px wide screen, for example.
Scroll to will probably work fine. One consideration you may want to take is to use touch events rather than click events if you're using JavaScript for the "scrollTo" functionality. (A presentation on touch events.)
As for your playground page, that will depend entirely which demos you're planning to put there. I'd test out your examples on mobile to see if they make sense and function properly there; if they do, then display them. If not, either improve them to work on mobile or don't show them on mobile.
We are currently trying to improve our usability in our intranet web app. One of our goals is to declutter certain pages which have large Grids on them. To do this, we have started putting commonly used actions (like Delete, Reset To Zero, Mark As Complete, etc.) in the grids as functions.
My initial idea was to find and use icons (i.e. Delete = a big red x, Reset = an arrow curving around itself, Mark As Complete a checkmark, etc.) to represent these tasks. Some of my coworkers agree with me; they say the icons make the tool look more professional. Others, however, say that icons obscure their intended function, and simple text such as Delete would be more appropriate.
Assuming that we will include a tooltip description of the function regardless of the type we choose (icons or text), which one is more usable? Can we use icons for some actions and text for others, or will that hurt usability?
Using icons for some functions and text for others probably isn't very consistent (unless you follow established idioms such as toolbars and menus, which are both places for commands, even though one is for icons, the other one for labels – doesn't mean that it's a good idiom, though).
To quote from Jef Raskin's The Humane Interface:
In every study that considered the question, icons were demonstrated to be more difficult to understand than were labels, especially at first viewing, which contradicts one of the most frequently cited reasons for using icons, namely, comprehensibility for beginners. GUIs often present us with windows full of identical icons, each with a label. The icons are small and numerous, and there are dozens of different icons. The limited conditions under which icons are effective do not obtain in present computer systems.
Although it is true that tiny icons can take less screen space than labels, you have to ask: At what cost? The smaller a button, the longer it takes to operate it, and the more difficult it is to find; also, it is difficult to make a small icon distinctive. Another small point: Icons take more time to create than do words.
and
Mayhew [1] cites a number of research studies on the use of icons. Unfortunately, most of the studies did not compare labels to icons. But from these and other studies, we can conclude that icons are most effective when there are at most a dozen of them and when at most a dozen are seen at one time. In addition, it is essential that they
Are visually distinct
Do a good job of representing the appropriate concept
Are presented at a reasonably large size, typically larger than a text label would be
[1] Mayhew, Deborah. Principles and Guidelines in Software User Interface Design (Englewood Cliffs, NJ.: Prentice-Hall, 1992).
I'd agree with Raskin on this point that in many cases icons really obscure the meaning of concepts and commands and you need additional text anyway to explain them. Aza Raskin's article The End of an Icon is a good read on this as well.
I'm a big fan of icons. Heck, the textarea I'm typing this answer into right now has nothing but icons on top of it. You've got to be a moron not to know that a big dark B means bold... I think if your icon is self explanatory (like a big red X for delete etc) then that's for sure the way to go. It also makes it easier for the user to find the right action.
I would use icons seen in Windows applications like Microsoft Word and Excel. Most users a familiar with these and their meaning/functionality.
Also; usability proceeds "the professional look". It sounds to me like your application needs to be functional and not a design masterpiece. Therefore your main concern is to have your interface communicate its functionality as clear as possible, so tap into your users knowledge--again; chances are that your users are using Word and Excel on a regular basis.
To top things off; make use of the alt and title properties on image elements:
<img
src="..."
alt="Click this button to delete X"
title="Click this button to delete X" />
I've seen both implementations work with great success. It really depends more on your target audience. Interestingly enough, there are a group of folks where I work that still expect to see text type buttons/links for their actions, so I've tailored those particular apps accordingly. Just provide both options initially and see which one the user base is more comfortable with.
If you can get away with it, can you make your icons large enough that you can embed the text of each action within it? Say a large red X with a small "Delete" text right below it, embedded into the image? I find that that will often suit both groups accordingly.
Icons save space (and with tooltip can be quite usable by beginners), but mixing icons and text would not be a good idea, requiring user effort to "switch". Why not, instead, put "rare" actions into a section of the page that's normally "folded shut" and only opens up when clicked? This saves even more space and clutter, after all.
If it's an obscure function, then icons would probably hurt usability. However, I think pretty much everyone has accepted and understand delete, refresh, etc. As long as you have the tooltips to fall back on, you should be fine.
We always use text in our company, we used to have a product with icons, and got many complains from the clients, for some reason, those icon made the user make wrong operations, especially when they were doing many things at the same time, for example, talking on the phone and entering data.
Personally, I think if the operation is very simple, then icon is fine, but if there are several tasks listed together, it maybe confusing.
Here's what I'm looking to do:
I have an image, let's say of a room. This is going to be a static image.
I want the user to be able to do the following:
1. add a set of images, like a chair, desk, etc.
2. move items which are already on the image.
3. edit text attached to an image.
I need this image to be stored on the server, as well, so other users can see the updates.
Any ideas? TIA.
Edit
I want to basically have a google maps type interface, where instead of being read only, users can add / edit / move items from a given set. So, for example, I want to let them pick up a "chair" image and slide it onto the image of the room wherever the chair actually is. I've seen bits and pieces done in JQuery, but havevn't found a good example. Hope that makes sense.
Edit2
Found something along the lines of what I was looking for. In case anyone else needs to do something like this, I'm looking at OpenLayers, which mimics GoogleMaps in a JS Framework.
You could do this by using the transparent png hack on IE and native support of 24 bit pngs by most modern browsers. Store positions in database. Store pngs on the server.
You could implement this making use of the canvas element, but browser support is inconsistent.
as Kane pointed out in the comments you're better off doing this in something like Flash (not Silverlight as, again, it isn't supported by all major browsers)