Guidelines for Making W3C Compatible Mobile Websites

W3C MobileOk Checker performs tests on a web page to determine its level of mobile-friendliness. http://validator.w3.org/mobile/

This also helps in page speed.
Following are some basic guidelines to make mobile sites W3C compatible.

  • The total size of the page should not be exceeded 20 kilobytes (Primary document, Images, Style sheets)
  • Big pages require a possibly high cost and a long waiting time in many mobile networks. For instance, on many mobile networks, downloading 100KB worth of data takes as long as 1 minute.
  • Scale down images to a reasonable size. Remove images that are not essential to the layout of the page.
  • Make CSS & Javascript external. Eliminate inline CSS & javascript code. It increases page size as well as blocks initial content from loading.
  • <input type=’image’> assumes that the user will click on a specific area of an image, which is not possible on many mobile devices. So don’t use the image input type, try to use another input mechanism like “button”, “submit” or <img> etc…
  • The size of the document’s markup should not exceed 10 kilobytes. Mobile devices have limited screens. Long pages on small screens are confusing, because users can’t see the big picture and feel lost. The 10Kb limit ensures that the page is still usable on devices with small screens. Continue reading

Which PHP CMS You Likes Most?

Best Techniques for Web Page Load Time Optimization

Followings are some best techniques to speed up your websites:

1.    Include CSS in head – always render CSS file in the head section

2.    JavaScript in footer – move JavaScript calls to web page footer.

3.    Avoid inline CSS and JavaScript expressions. It increases html size and http

4.    Avoid duplicate CSS & javascript code. Keep optimized files.

5.    on window.onload

a. Render heavy JavaScript based objects on window.onload event. Like

  • JS widgets
  • Social media sharing buttons scripts

It will help to improve web page content loading time.  Once browser completed rendering of main content then objects written on window onload event will be rendered into background and doesn’t require user to wait for them

Continue reading

Use of Media Queries for Standard Devices

CSS3 provides a way to make CSS conditional to write the CSS as per device resolution.

See following HTML5 compatible CSS to design your mobile websites for various standard devices. It includes iPhone, iPad, smart phones etc…


/* Smartphones (portrait and landscape) ----------- */
@media only screen 
and (min-device-width : 320px) 
and (max-device-width : 480px) {
/* Styles */
}

/* Smartphones (landscape) ----------- */
@media only screen 
and (min-width : 321px) {
/* Styles */
}

/* Smartphones (portrait) ----------- */
@media only screen 
and (max-width : 320px) {
/* Styles */
}

/* iPads (portrait and landscape) ----------- */
@media only screen 
and (min-device-width : 768px) 
and (max-device-width : 1024px) {
/* Styles */
}

/* iPads (landscape) ----------- */
@media only screen 
and (min-device-width : 768px) 
and (max-device-width : 1024px) 
and (orientation : landscape) {
/* Styles */
}

/* iPads (portrait) ----------- */
@media only screen 
and (min-device-width : 768px) 
and (max-device-width : 1024px) 
and (orientation : portrait) {
/* Styles */
}

/* Desktops and laptops ----------- */
@media only screen 
and (min-width : 1224px) {
/* Styles */
}

/* Large screens ----------- */
@media only screen 
and (min-width : 1824px) {
/* Styles */
}

/* iPhone 4 ----------- */
@media
only screen and (-webkit-min-device-pixel-ratio : 1.5),
only screen and (min-device-pixel-ratio : 1.5) {
/* Styles */
}

Reference URL

usort() PHP Function Issue with PHP 5.3

Most of you may be faced this issue, usort() behaves differently in PHP 5.1 & 5.3 versions.

E.g

<?php
class myClass {
  public static function mySortMethod($object1, $object2)
  {
     if ($object1->order == $object2->order) 
    {
         return 0;
    }
    return ($object1->order < $object2->order) ? -1 : 1;
  }
}

usort($arr, 'myClass: mySortMethod');

?>

This would be working fine till PHP 5.1, but in latest version means PHP 5.3 it doesn’t sort properly.

Solution:

Continue reading

HTML5 Canvas – Nice flame/fire effect using particles

Try following HTML script. Shows nice flaming/fire effect using Javascript and CSS.

Javscript:
window.onload = function(){
var canvas = document.getElementById(“canvas”);
var ctx = canvas.getContext(“2d”);

//Make the canvas occupy the full page
var W = window.innerWidth, H = window.innerHeight;
canvas.width = W;
canvas.height = H;

var particles = [];
var mouse = {};

//Lets create some particles now
var particle_count = 100;
for(var i = 0; i < particle_count; i++)
{
particles.push(new particle());
}

//finally some mouse tracking
canvas.addEventListener(‘mousemove’, track_mouse, false);

Continue reading

Custom Carousel with jQuery and Roundabout

Try this:

http://www.joezimjs.com/javascript/how-to-build-a-custom-carousel-with-jquery-and-roundabout/

Demo: http://www.joezimjs.com/demos/roundabout-demo/

Nice article to get jquery roundabout effect.

Also you can modify the UI as you want. There are lots of moving effects functions available into this plugin by which we can change sliding effects.

 

PHP MYSQL Data Pagination

<?php 
if (isset($_GET["page"])) { $page  = $_GET["page"]; } else { $page=1; }; 
$start_from = ($page-1) * 20; 
$sql = "SELECT * FROM students ORDER BY name ASC LIMIT $start_from, 20"; 
$rs_result = mysql_query ($sql,$connection); 
?> 
<table>
<tr><td>Name</td><td>Phone</td></tr>
<?php 
while ($row = mysql_fetch_assoc($rs_result)) { 
?> 
            <tr>
            <td><? echo $row["Name"]; ?></td>
            <td><? echo $row["PhoneNumber"]; ?></td>
            </tr>
<?php 
}; 
?> 
</table>
<?php 
$sql = "SELECT COUNT(Name) FROM students"; 
$rs_result = mysql_query($sql,$connection); 
$row = mysql_fetch_row($rs_result); 
$total_records = $row[0]; 
$total_pages = ceil($total_records / 20); 

for ($i=1; $i<=$total_pages; $i++) { 
            echo "<a href='pagination.php?page=".$i."'>".$i."</a> "; 
}; 
?>

Disable csrf protection in Symfony

Disable LOCAL csrf protection

In order to disable CSRF for just *this* form, inside the form configure() method add following code

$this->disableLocalCSRFProtection();

Disable GLOBAL csrf protection

It might also happen that you want to quickly disable CSRF protection for all forms you have, you can do this using static method disableCSRFProtection() on sfForm.

sfForm::disableCSRFProtection()