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.
Related
I have never understood why some people say making custom css for each browser is a bad thing. To keep my page size down and download times fast it makes perfect sense to me to make a custom css for the major browsers (especially IE in its many different forms), and a general catch all css for everything else.
If you want to send out a bloated, huge, Swiss army knife of the css world, for all situations then go right ahead I'm not going to stop you.
Fast detection of the browser is important when doing this. Loading a JavaScript file to detect the browser seems slow. So I would prefer to use php to detect the browser, and send out the specified css. Or at least a general browser specific css then use the JavaScript to load a more detailed version of the css.
But I've read article after article about why this is a bad thing. The main reason behind each of these articles is because the user agent can be faked. Or there using Firefox but the server thinks they're using IE7 so it sends out the wrong css file.
As a developer/designer of web apps why is this my problem? If you want to use Firefox, but tell my server your using safari or IE*, and get a crappy looking page, why is it my problem?
And don't throw that whole if the user can't see your site right they'll never come back, or some kind of similar argument at me. a normal user isn't going to be doing this. its only going to be the people who know how to do this, and will know whats wrong when my site looks crappy.
This is similar to looking at my site on a old Apple II (I have no clue how), and yelling at me because everything looks green.
So is there a good reason, not a personal preference, why I shouldn't use php to detect the browser and send out customized css files?
I do this mostly for the different versions of IE. It just seems like for some sites, adding the if IE6 and if IE7 parts just double or triple the size of the css file.
Typically when a user intentionally fakes the user agent string, it is because something is not viewable in the user's browser that should be. For example, some sites may restrict users to IE or Firefox, but the user is using Iceweasel on Debian. Iceweasel is just a Firefox renamed for trademarked reasons (there are a few other changes also), so there is no reason that the site should not work.
Realize that this happens because of (bad) browser detection, not despite it. I would say you don't need to be terribly concerned about this issue. Further, if you can just make your site reasonably cross-browser compatible, it won't matter at all. If you really want to use browser-specific CSS, and you don't want to do so all in one CSS file, don't let a fake user agent stop you.
As long as the only thing you're doing is changing style sheets, there is no valid reason as far as I can tell. If you're attempting to deliver custom security measures by browser, then you'll have issues.
Not sure about php but in Rails it is normal and dead simple practice to provide css files and different layouts based on the user agent particularly when considering that your site is just as likely to be accessed by any of the myriad of available mobile devices, never mind writing for the most popular (Currently Firefox) browsers and even writing custom MIME types if need be is also dead simple.
IMO not doing so is pure laziness on the coders part but then not all sites are developed by professional teams of developers with styling gurus at hand. Also in languages other than Rails it might not be so simple. Sorry, I haven't a clue about PHP so this may not be an appropriate reply
In my opinion, starting with normalize.css, and having a base style sheet to start, overriding the base styles as needed usually works along with making sure you set appropriate fallbacks. If you really need it a few media queries, and feature detection can go a long way.
One reason you shouldn't base things off of the browser is because major search engines like Google and Yahoo prohibit displaying different content for different browsers. GoogleBot can detect different CSS and HTML and you may get bad search positioning. Additionally, if you use any advertising services you may be in breach of their contract by displaying varying content.
Sadly my site is a little slow, especially its initialization calls (its another question). On a server, that (or something else) causes a little "blanking" effect, and the browser shows a blank white screen for too long. OK, its just a blink of an eye, but still disturbing.
How can I avoid avoid this?
Maybe you are calling too many (or too big) files in the head. Try calling javascript files (if any) right before closing the body tag. In fact, the browser can't render anything until it finishes dealing with the header, so it may be causing your problem. If you have a lot of css files, mergint into only one file could help too.
This tool could help you a lot with performance issues:
https://github.com/farhadi/SmartOptimizer - I really recommend you to learn it and give it a try.
Try going to this page and putting in your site's URL to see if it can identify any big issues that might be causing the slow-down.
Also, take a look at the techniques mentioned here and make sure your site is using as many of them as possible.
If you have any specific question on how to implement the suggestions from the above links, try searching google, and if you can't find a good answer or still have some questions, ask another question here. :D
It's somewhat extreme for your use case, but you could conceivably have a "loader" page which would be a shell with the header/footer which would only be a few kb; and then in that page use ajax to load the slow page into a div with placeholder text like "The page will be loaded in a moment. Please hold."
Is there any way to disable or encrypt "View Source" for my site so that I can secure my code?
Fero,
Your question doesn't make much sense. The "View Source" is showing the HTML source—if you encrypt that, the user (and the browser) won't be able to read your content anymore.
If you want to protect your PHP source, then there are tools like Zend Guard. It would encrypt your source code and make it hard to reverse engineer.
If you want to protect your JavaScript, you can minify it with, for example, YUI Compressor. It won't prevent the user from using your code since, like the user, the browser needs to be able to read the code somehow, but at least it would make the task more difficult.
If you are more worried about user privacy, you should use SSL to make sure the sensitive information is encrypted when on the wire.
Finally, it is technically possible to encrypt the content of a page and use JavaScript to decrypt it, but since this relies on JavaScript, an experienced user could defeat this in a couple of minutes. Plus all these problems would appear:
Search engines won't be able to index your pages...
Users with JavaScript disabled would see the encrypted page
It could perform really poorly depending the amount of content you have
So I don't advise you to use this solution.
You can't really disable that because eventually the browser will still need to read and parse the source in order to output.
If there is something SO important in your source code, I recommend you hide it on server side.
Even if you encrypt or obfuscate your HTML source, eventually we still can eval and view it. Using Firebug for instance, we can see source code no matter what.
If you are selling PHP software, you can consider Software as a Service (SaaS).
So you want to encrypt your HTML source. You can encrypt it using some javascript tool, but beware that if the user is smart enough, he will always be able to decrypt it doing the same thing that the browser should do: run the javascript and see the generated HTML.
EDIT: See this HTML scrambler as an example on how to encrypt it:
http://www.voormedia.com/en/tools/html-obfuscate-scrambler.php
EDIT2: And .. see this one for how to decrypt it :)
http://www.gooby.ca/decrypt/
Short answer is not, html is an open text format what ever you do if the page renders people will be able to see your source code. You can use javascript to disable the right click which will work on some browsers but any one wanting to use your code will know how to avoid this. You can also have javascrpit emit the html after storing this encoded, this will have bad impacts on development, accessibility, and speed of load. After all that any one with firebug installed will still be able to see you html code.
There is also very really a lot of value in your html, your real ip is in your server code which stays safe and sound on your server.
This is fundamentally impossible. As (almost) everybody has said, the web browser of your user needs to be able to read your html and Javascript, and browsers exist to serve their users -- not you.
What this means is that no matter what you do there is eventually going to be something on a user's machine that looks like:
<html>
<body>
<div id="my secret page layout trick"> ...
</div>
</body>
</html>
because otherwise there is nothing to show the user. If that exists on the client-side, then you have lost control of it. Even if you managed to convince every browser-maker on the planet to not make that available through a "view source" option -- which is, you know, unlikely -- the text will still exist on that user's machine, and somebody will figure out how to get to it. And that will never happen, browsers will always exist to serve their users before all others. (Hopefully)
The same thing is true for all of your Javascript. Let me say it again: nothing that you send to a user is secure or secret from that user. The encryption via Javascript hack is stupid and cannot work in any meaningful sense.
(Well, actually, Flash and Silverlight ship binaries, but I don't think that they're encrypted. So they are at the least irritating to get data out of.)
As others have said, the only way to keep something secret from your users is to not give it to them: put the logic in your server and make sure that it is never sent. For example, all of the code that you write in PHP (or Python/Ruby/Perl/Java/C...) should never be seen by your users. This is e.g. why Google still has a business. What they give you is fundamentally uninteresting compared to what they never send to you. And, because they realize this, they try to make most things that they send you as open as useful as possible. Because it's the infrastructure -- the Terrabyte-huge maps database and pathfinding software, as opposed to the snazzy map that you can click and drag -- that you are trading your privacy for.
Another example: I'm not sure if you remember how many tricks people employed in the early days of the web to try and keep people from saving images to disk. When was the last time you ran across one of those? Know why? Because once data is on your user's machine, she controls it. Not you.
So, in short: if you want to keep something secret from your user, don't give it to her.
You cant. The browser needs the source to render the page. If the user user wishes the user may have the browser show the source. Firefox can also show you the DOM of the page. You can obfuscate the source but not encrypt or lock the user out.
Also why would you want this, it seem like a lame ass thing to do :P
I don't think there is a way to do this. Because if you encrypt how the browser will understand the HTML?
No. The browsers offer no ability for the HTML/javascript to disable that feature (thankfully). Plus even if you could the HTML is still transmitted in plain text ready for a HTTP sniffer to read.
Best you could do would be to somehow obscure the HTML/javascript to make it hard to read. But then debuggers like Firebug and IE 8's debugger will reconstruct it from the DOM making it easy to read,
You can, in fact, disable the right click function. It is useless to do so, however, as most browsers now have built in inspector tools which show the source anyway. Not to mention that other workarounds (such as saving the page, then opening the source, or simply using hotkeys) exist for viewing the html source. Tutorials for disabling the right click function abound across the web, so a quick google search will point you in the right direction if you fell an overwhelming urge to waste your time.
There is no full proof way.
But You can fool many people using simple Hack using below methods:
"window.history.pushState()" and
adding oncontextmenu="return false" in body tag as attribute
Detail here - http://freelancer.usercv.com/blog/28/hide-website-source-code-in-view-source-using-stupid-one-line-chinese-hack-code
You can also use “javascript obfuscation” to further complicate things, but it won’t hide it completely.
“Inspect Element” can reveal everything beyond view-source.
Yes, you can have your whole website being rendered dynamically via javascript which would be encrypted/packed/obfuscated like there is no tomorrow.
I've tried searching everywhere but there's seems to be no implementation available other than having the client use a file (batch/exe of some sort).
You just can't do it. PHP is server side scripting language, maybe you can do that using JavaScript, but I'm not even sure about that.
I know someone implemented such service, but actually he had to use Mozilla browser, which opened, a script (I think it was not JS, maybe perl, c/c++) made a screenshot and uploaded it.
I'm assuming you mean "your" in the general sense. If you mean "how does one take a screenshot...", you generally hit the print screen key. If you're trying to capture your users' browser output, I'd say that it's probably not possible. If it were, the best you could get is the output of what you wrote yourself.
Google Gears might be hackable to do something close, if you can simulate the print screen key press with JS and get the file to save somewhere gears can access.
You can't do that in PHP, as PHP is running on the server, and not the client.
To get screenshots of the browser, you can take a look at, for instance, this list.
If you are look for an automated solution to take screenshot of web pages opened in a browser window, you could also look at this question : How to capture x screen using PHP, shell_exe and scrot and it's answers.
And, finally, and without selecting any particular post, you can try a search on SO ; something like screenshot browser, sorted by relevance, seems to get some interesting posts :-)
Good luck !
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.