I'm currently doing a god awkward job for a client in which they own a domain but can't move the DNS due to them currently using the MX. Anyways, their wanting a website built and pointed to that domain. Unfortunately the service doesn't have any webspace and only allows me to forward towards to another host as a redirect. Which either brings who the host address is so that's not an option or within a frame, which breaks all the media queries for the site and doesn't allow mobile view. Frame doesn't response to viewport. Also masking doesn't appear to respond with the current host so that's out the question too.
I'm currently using bootstrap so using serverside mobile detection isn't a quick option.
So I'm wondering how the best course of action is. The site is already fully designed, so I'm really looking for a way to get frames to detect viewport and allow media queries to work.
Related
Is there a way to alert a user if he accesses my webpage on his mobile device ?
The reason for this is because this particular webpage is not coded in a way to be looked at on a mobile device (at least not yet)
So, if any would access the webpage on his mobile a pop-up will appear saying something like: "This webpage is currently not supported by mobile devices".
Would this be hard to do ?
Yes it is possible, you need mobile detection script, have a look at following project on github. I have used it myself for similar requirements. This solution is for PHP (you haven't mention which technologies you been using).
https://github.com/serbanghita/Mobile-Detect
You can easily do this with Javascript as well, just google for Javascript Device Detection and you'll find enough. Another possibility is using CSS Media Queries; create a pop up, set it to display: none, and in your query make it visible again.
we have website with slideshow control which display a set of images. Client requested to "protect" them from downloading. I know about simple ways to do this:
Disable right click
Put transparent overlay on top of the real image
Use CSS background
Use canvas
Watermarking
etc...
all of these are only for "casual" users - those ones who are not aware of Dev Tools in chrome.
Are there other ways to "protect" images? The only approach I could think of is to develop custom flash (or silverlight) plugin which will send image ID to the webserver and receive "encoded" byte stream - and decode it and display it. Am I over-complicating this? are there other ways to prevent image download?
if flash plugin + webservice approach is the right way to go - are there any ready-to-go solutions, or I should develop everything from scratch?
Thank you.
THere's no way to protect your image against being downloaded. Your users have to download it to view it. Your proprietary player will fail too if someone uses screen capture tools.
EDIT:
The best thing you can to is to make the reuse (I assume you don't want your visitors to use it elsewhere?) of the image as difficult as possible. Watermarks might be a good start to deter some people because they don't have the resource and expertise to de-watermark. Or you can embed steganography as a proof of origin so you can sue them afterward. Again, it's all about trade off between cost to do this and benefit from this.
It's impossible to prevent people from downloading your images. But, I want to offer another perspective -- you can create images that people like to view and play with but don't necessarily want to download.
Here's an example:
xkcd: Click and Drag
If the images have an intrinsic value that the client wants to protect, yet has to allow potential purchasers to view prior to purchase, then you need to minimize the value of the pre-purchase image. Only displaying thumbnails, adding visible watermarks, and otherwise distorting the image in ways that humans can easily see past, but will still see are usual here.
Then there is the issue of protecting the post-purchase images. Invisible watermarking (one example here, another here) can allow the customer to purchase and use the image as you allow, but if the image appears somewhere, used in an inappropriate manner, you can use the ID embedded invisibly (to a human) to identify just which customer violated the Terms of Use. These watermarks may even survive a degree of image manipulation and even digital photography of the image on a monitor.
If any user of the site has to be able to view the full, un-devalued image, you could add an unique ID linked to their IP address to the image as it is delivered to the slideshow control, so that each user receives a unique "copy", and you can trace misuse of an image to an IP address (and date, as many users have dynamic IPs, but ISPs keep records of IP assignments over time) for potential prosecution.
I have been working with cocos2d-iPhone, cocos2d-x, and cocos2d-html5 for quite some time. I wanted to ask if it is okay to build a website with cocos2d-html5. I want to do it because I want the website look interactive, animated, and scroll around like a game. We can do this with javascript, but is it possible to write it in cocos3d-html5? What are the drawbacks of doing this? And is there any existing website that is built on cocos2d?
Thank you for the help.
As i figured out, you cannot make a cocos2d-html based website as it is for making web apps for web sites. Although a web app can cover up the whole screen but there are a large number of issues assigned to creating such a situation. The internet users are used to using the refresh and back buttons on the web browser as well as opening in the new tab, nothing of these options would work in a cocos2d-html based web app as the navigation would be all done within the application and in no way can the button in the browser respond in the appropriate manner.
I will be spending the next several weeks transitioning content for my webpage into a mobile version AND a tablet version. I have a few questions to this affect:
What is the accepted way to send users to their correct site, depending on the device/browser they are using? (i.e. do we check in PHP for some kind of browser type or something)? I've looked into nice CSS grids that display great on all devices/resolutions - but at this time I'm not ready to make that full switch - so I'm looking to just have a reduced-version of my current site (whether it's via redirection or something else).
How do we account for hover/mouseover effects in the mobile and tablet space?
Thanks all.
Update:
I did find this for #1: http://code.google.com/p/php-mobile-detect - looks like it's perfect actually.
You should redirect the user based on the user agent, in PHP you can use $_SERVER['HTTP_USER_AGENT']. Using server side detection is by far the most reliable way to redirect someone. In the future you may consider using a responsive style sheet to change the way your layout is displayed (based on screen size, in a sense is more reliable for future devices)
Touch devices do not have a hover state, that doesn't mean you can't do it with some Javascript onTouch events but it's either on or off when you touch something like an anchor
I'm looking for a way to distinguish which browser is used and then change properties of the DIV's background.
Right now I'm using a picture as a DIV's background and it has to have a fixed width and height. However, when the site is viewed from a mobile browser ( iOS, Android, etc..) I would like to use a simple color as a background and make it flexible in terms of the width and the height.
So.. I guess my question is if there is any good approach for distinguishing which browser is used and then changing DIV's propertied depending on the browser.
Thanks.
Michal
There's two ways to do it, one as Terrik said using Javascript and do it on the client-side, you could use this jQuery plugin to add a class into the body to do it: https://github.com/leopic/Simple-jQuery-UA-Spoofing
The other is actually doing on the server side, check the headers of the page in the request and change your content before the page even loads, for instance in PHP http://php.net/manual/en/function.get-browser.php
My recommendation is, don't do either, develop your page to be responsive and accomodate to different widths/resolutions and not browsers: http://www.alistapart.com/articles/responsive-web-design/
You could use CSS media queries
This needs to be done using client side, not server side. (i.e. JavaScript not PHP)
If you want to know more about it than just how to do it, go through this site: https://developer.mozilla.org/En/Browser_Detection_and_Cross_Browser_Support
If you just want some sample code and a quick explanation, I've used this before:
http://www.quirksmode.org/js/detect.html
Once you detect that, you can set up an if statement to determine which divs to display.
Well, there are several approach to do that.
AS Terrik said, you can use client side code to dynamic change the page but this is not necessary the best approach.
A mobile page is not only a background color change. It also can be a layout change. I suggest you to use the MVC pattern : same model, same controller but one view by "browser" (device seems to be a better term in your case). When the user thirst visit your site, send the device used to your server and display the good view (via a redirection). Don't forget to save the user agent in the user session to avoid this redirection process for next pages.
I suggest you to look at GWT, which is a powerful framework when you need multi device capabilities.