I want to exclude the jQuery Mobile JS library from my header when a phone does not have "A grade" support as listed by jQuery Mobile (http://jquerymobile.com/gbs/). I find that on old Blackberry phones (that support JS) the jQM framework grinds these phones to a snails speed.
As an example these guys do a good job at serving up the jQuery Mobile library and associated styles depending on the mobile browser support: demo.livebookings.biz
How can I implement a similar server-side approach so that I can choose when to include JS files (e.g. jQM framework) and any CSS files as per the mobile browser support.
Thanks
The jQM functionality is Client Side, More on this here:
http://jquerymobile.com/demos/1.0/docs/api/globalconfig.html
gradeA function that returns a boolean, default: a function returning the value of $.support.mediaquery
Any support conditions
that must be met in order to proceed.
For Server Side you would need something like
http://code.google.com/p/mobileesp/
http://wurfl.sourceforge.net/
I've used Mobile ESP before and have had great results with it. It's also easy to extend/customize
http://code.google.com/p/mobileesp/source/browse/PHP/mdetect.php
You have to do this by using the browsers user agent, but as there are so many its hard to do by your self (and keep it upto date), WURFL is a library that does all the hard work for you, works out the phone model and gives you the phones capabilities.
Using this you can find out whether the phone has certain features within the browsers and depending on what you call "A-grade" you can use JS libraries or not.
They have a pretty horrible website but the detailed library and PHP to read & cache it is all given to you.
You can do this client-side by feature detection using the jQuery $.support() method:
<script src="jquery-1.6.4.js"></script>
<script>
//check to see if media queries are supported (this is how the jQuery Mobile framework detects "grade A" browsers), $.support.mediaquery returns true or false
if ($.support.mediaquery) {
//if support is found then load the jQuery Mobile JS file
$.getScript('jquery.mobile-1.0.js');
}
</script>
http://api.jquery.com/jquery.support
http://api.jquery.com/jquery.getscript
Related
I am working on a mobile website (m.website.com) and I am wondering if there is a need to differentiate between different operating systems or mobile browsers?
For example, I am using a mobile detecting PHP class from https://github.com/serbanghita/Mobile-Detect and there are functions like isIOS() and isAndroid() or isChrome() and isSafari() as well as a general isMobile().
So the question is do I have to have different sets of webpages to accommodate different OS/browsers? Or all I have to do is to have a single set which falls under from the isMobile() function that all mobile OS/browsers will understand?
You do not need different pages to target different OS/Browsers per se ... but that is only half the answer. Because the OS/Browsers have their own quirks, you have to code your pages in such a way that you code is compatible with "most" browsers/OS. An exercise known as cross browser compatible coding. If you do not do such coding, e.g. by picking up some specific features/bugs/non standard implementation of one particular OS/browser then your page might break in some other browsers.
Most 'modern' browsers are HTML standard compatible. The cross browser compat guidelines are mostly about sticking with HTML standard; that is if you are NOT targeting something like IE6.
Web has many articles on cross browser dev guidelines. e.g. see http://www.htmlbasictutor.ca/cross-browser-compatible.htm
Normally it's enough to use isMobile and create one template for all mobile devices.
You need isIOS, etc only, if you want to create different user experiences or use os dependent javascript functions/libraries. An example would be creating an mobile app, which looks like an native app and is available for iOS/Android/etc..
I want to make a script that's crawling a website and it should return the locations of all the banners showed on that page.
The locations of banners are most of the time from known domains. But banners are not in the HTML as an easy image or swf-file. Most of the times a Javascript is used to show the banner.
So if a .swf-file or image-file is loaded from a banner-domain, it should return that url.
Is that possible to do? And how could I do that roughly?
Best would be if it can also returns the landing page of that ad. How to solve that?
You could use selenium to open the pages in a real browser and then access the DOM.
PhantomJS might also be worth a look - it's a headless version of WebKit (the engine behind Chrome, Safari, etc.).
However, none of those solutions are pure php - if that's a requirement, you'll probably have to write your own JavaScript engine in PHP (which is nothing I'd ask my worst enemy to do ;))
In order to get the output of the JavaScript you will need a JavaScript engine (such as Google's V8 Engine). The V8 engine is written in C++ but there are some resources that tell you embed the V8 engine into PHP.
With that said, you have to study the output "by hand" and determine exactly what can be scraped and how to identify it. Once you've identified some common syntax for the advertisement banners, then you can write a script to extract the banner and the landing page which is referenced.
None of this is easy work, but if you have an example of an ad you'd like to collect then I can give you more advice.
How do we check to see if the browser browsing a webpage is CSS3 capable. I know how to check for which browser is coming in using PHP but how do we check specifically that the browser supports CSS3.
Any ideas,
Marvellous
PHP (and I imagine any other server-side technology) has no idea about a browser's CSS capabilities. However on the client side, you can use Modernizr and handle rendering of your page based on the guides it gives you about what CSS3 properties a browser supports.
No browser supports all of CSS 3. Many browsers support bits of CSS 3.
You can detect some CSS 3 features with Modernizr, but that uses client side scripting.
CSS3 is not 'one' feature that you can detect. Browsers implement parts of it one after another. So, for example, IE 9 implements parts of CSS3 like box-shadow, but does not support some other things.
What you could do is make a list of browsers that support a given CSS3 feature and test the user agent. If you do this, http://caniuse.com/ may be a good help.
But I dont recommend this. The best way to check certain features will be client-side, for example with Modernizr.
Edit: If you need to provide a fallback, do it client-side too. Modernizr optionally includes a library named yepnope, with which you can easily load files if the browser doesnt support something. This could look like this:
yepnope({
test : Modernizr.csstransitions,
nope : ['jquery.js', 'transitions-fallback.js']
});
This code snippet would test for csstransitions and if they are not available, it would load jQuery and the transitions fallback js file.
You can't do a blanket check because of the patchy support of CSS3 and the variances between browsers. See here: How to check a certain CSS capability in a browser using JavaScript?
I'd recommend you to use Modernzir - http://www.modernizr.com/
There is some web tools that can check how your browser is css3 compatible:
Selector test
Acid3
Modernizr
And there is a lot more...
Using PHP's get_browser function you can do
$cssversion = get_browser(null, true)['cssversion'];
This will tell you the highest version the browser supports but as others have stated browser do not support every attribute within a version.
Have a script that using jquery validation. Tested on 2 Blackberry's and neither worked properly.
http://andrewpeller.com/contest/indexTest.html
1st one - Blackberry Bold
Email validation would not work even with valid email such as test#hotmail.com
2nd one
Form would not submit at all.
Any suggestions as to how to get this to work? Will jquery even work on the blackberry?
thanks
You will probably need to accommodate users with JavaScript turned off when aiming at mobile devices.
Your form seems to be designed so that it can't be submitted without Javascript turned on. You would have to change this to make it work on non-JS browsers. Make sure you have some kind of server side validation for the fields.
The default Blackberry browser is very limited in JavaScript. I would not expect jQuery to work well in its default browser.
However, I suggest to try using Opera Mini for the Blackberry. It handles JavaScript much better. I managed to run a few web applications using ExtJS 2.x (jQuery adapter) in Opera Mini on various Blackberry models, without problems.
If you are going to deploy this web page to the public, I suggest using plain XHTML/CSS and do server-side form validation.
I don't know what BlackBerry you have but besides Opera Mini you should also look at the new Bolt Browser it is really nice.
Now with that being said. As a mobile developer for many, many years I always encourage developers and clients to develop their mobile sites without the requirement for JS, whenever possible.
Double check your BlackBerry browser options - some devices have Javascript turned off by default.
Bolt browser is not supported now. Actually jQuery validation works on bb5 but breaks onfocus, onblur events. On bb6 it works fine.
Suppose I have developed one web portal in PHP/MySQL. I want to make it work in mobile also. What is the easiest way to do this?
Can we use PHP with any mobile based mark up languages like WML or XHTML i.e. as we can use PHP with HTML in web applications used to view in normal web browsers?
PHP has nothing to do directly with the platform you want to display your app on. PHP is just the tool to deliver the kind of markup you need for your page to be displayed on whatever platform you want. It's up to your own knowledge and creativity to render markup which suits your needs. So in other words, yes of course you can send WML, XML, XHTML, you name it to the client!
The client doesn't know anything about PHP anyways (PHP 'exists' only on the server side), the client doesn't understand PHP and doesn't need to. It understands XHTML or any other markup and that's what you have to deliver! What tool you use to do that is completely up to you. PHP is one option.
So all you need to know is for what platform/client you want to render your content and what kind of markup this platform understands and then deliver the right markup to the right platform/client including the respective CSS, js, etc.
What your app does:
detect what client is requesting your site
see if you're able to send the appropriate markup
send this markup or if not available some default or similar markup
Pseudo-code for each page, (or just the template page, if you have that)
<?php if(mobile()): ?>
Mobile HTML and PHP
<?php else: ?>
Desktop HTML and PHP
<?php endif; ?>
I use this.
Depends on what you understand under the term "mobile". Basically it would just mean to adapt your portal displayed data and css to the smaller display sizes and make as ZOMFG said an if statement to output your source accordingly. If you want to enable WAP browsing you have to output your data in the Wireless markup language.
PHP is just a tool which generates some markup language (or anything else, actually, which might not be markup-oriented at all) that is understood by the client -- the browser.
Your PHP code will have to be able to generate two kind of different outputs :
a "full ouput" (likely HTML), which you already have, for computer web browsers
a "light ouput" (maye VML, maybe HTML too but without some heavy stuff), for mobile-based browsers.
The task you'll have to deal with is to differenciate between mobile and non-mobile users ; this might be done by user-agent sniffing, for instance, or detecting what the client requested.
A nice thing to do could be to use a special domain-name for users of mobile platforms ; something like mobile.example.com ; for instance, so they can bookmark it and directly access the "mobile-version" of your site -- can be useful if your detection doesn't work well ^^
If you are targetting advanced-mobile-machines (like iPhone) which have a not too bad browser, you might want to send them "rich" HTML pages ; just test your pages to verify they fit on the small screen of theses machines ; and, maybe you'll want to send less data (like not display some sidebars, or have a smaller menu, ... )
BTW, what kind of platform do you mean by "mobile" ? Those old phones with small screens, or more power-users-oriented phones, like iPhone / Android / stuff like that ?
This could make quite a difference, actually, as the more recent ones have nice functionnalities that the oldest didn't have ^^
In any case, one important thing to remember :
you will spend some time making the site work on these devices
you will have to spend more time maintaining it !
Which means : do something simple, and, as much as possible, use the same PHP code for both mobile and non-mobile version of the site : the less code you duplicate, the less code you'll have to maintain !
Hope these few ideas (not really well sorted, I admit) will help...
Have fun !
Already the mobile browsers support almost full XTHML, Javascript, Flash.
My recommandations are:
have a light css for the mobile
version
restrict some heavy functionalities
validate your code
optimize, optimize, optimize, although this works even for the full version.