Jaider .Net

www.lenovo.com

Optimize WordPress – Part 2

February 15th, 2012 | by | technology

Feb
15

loadsinStatic

Continuing improving WordPress speed.

The Third recommendation is about the hosting.

I had some performance issues caused by my windows hosting account and now that I switched back to Linux and I gain a lot of speed.

The Fourth Recommendation is to Use Static pages rather than Dynamic pages.

WordPress always create a dynamic page when you request for a page that cause several process such as merge parts of the pages (header, sidebar, navigation, footer, menu, widgets, etc), access to the database and read the content and other stuff, redering PHP converting to readable content HTML Markup.  To proof my point, I opened a Dynamic website: http://www.jaider.net/archives/405-neko-the-cat-html5-css3-animation/ and based on its source code, I created a static version http://www.jaider.net/neko.html (This is faster)

But the question is how do I generate all static pages from my existing blog???  I recommend to use a plugin named  WP Static HTML Output Plugin | Version 1.0.4 | By Leon Stafford

http://leonstafford.com/wordpress-static-html-output-plugin/

After Install the Plugin, go to Tools>WP Static HTML Output and Generate the Site… please wait…

 

Later you will see a result like this. The final result is a ZIP file that contains all the static web pages for posts, pages, categories, etc…

 

I submit then to another domain (http://www.webxup.net/) and I check agains the original website (http://www.jaider.net/) with a Loads.In that tells me how fast a webpage loads in a real browser from over 50 locations worldwide. Here the result, judge yourself

 

That reduce the speed more than half.

The downside of this is that probably the dynamic features (Comments, Posts, etc)… you will have to generate the site any time that you approve comments or edit or create a new post/category in order to see it in the static page. and we need to figure it out how to get comments form.

Better idea is just generate the posts and the category and other stuff will be handling dynamically. In this case, Would be easier configuring permalink like /posts/%post_id%-%postname%/ and from the generated ZIP file, extract only the posts folder and put  there your wordpress website and in the future just override it. NOTE: Static/Physical location has priority over the wordpress dynamic url. In this case, If the static page is not found then it will generate it dynamically.

After I merge no totally static no totally dynamic, just I explain before partial upload: I got this result.

Jaider.net loads in 4.2 seconds

Final Recommendations:

Stay away from plugins than make your web get slow down.

Try our Hyper Cache http://wordpress.org/extend/plugins/hyper-cache/ - I never tested it

My best wishes.

1 Comment »

Leave a Comment

 
 

Optimize WordPress – Part 1

February 11th, 2012 | by | technology

Feb
11

If you see that your WordPress website is slow down, be aware that this cause serious damages to your positioning on the Internet. For sure, the users will abandon the page before is loaded or may wait to the end and get a error page with a message like: “Fatal error: Maximum execution time of 30 seconds…”.

There are many techniques, but I’m going to give you the ones that I tested and works for me.

The first one is about the Permalinks.

The reason why the permalink use by default ?p=id is because is the fastest way to render the links. But as you know that this is not a user friendly and also is not SEO practice. Don’t used %postname% alone because it cause too much processing to wordpress… instead used alternative two (day and name) or three (month and name) or custom: id and name (/%post_id%/%postname%/ or /%post_id%-%postname%/) or more better using static name in front of id/name such as: post or archives and later in step 4 you will see all the posts in the folder. The important here is that the url is unique, user friendly and SEO, and not how long it is.

Also you may need a Permalink Migration Plugin to avoid breaks your Links (if they are already indexed or reference by other websites). http://www.deanlee.cn/wordpress/permalinks-migration-plugin/

 

The second optimization is about loading medias files using sub-domains.

Normally when you submit a media (image/video/doc), it is placed in the default Uploads folder. The goal is change the url from http://www.jaider.net/wp-content/uploads/ to http://upload.jaider.net/

So we need to change this logic with the fallowing PHP code.

Note: change jaider.net for your website name.

Open the File: wp-includes/functions.php

Add New Function:

function replace_upload_url($url){
	$old_uploads_url = array("http://www.jaider.net/wp-content/uploads", "http://jaider.net/wp-content/uploads");
	return str_replace($old_uploads_url, "http://uploads.jaider.net", $url);
}

Edit this function: wp_upload_dir() that return an object with different upload paths as you see in the documentation, but only we need to update are url and baseurl properties.

before this line:

$uploads = apply_filters( 'upload_dir', array( 'path' => $dir, 'url' => $url, 'subdir' => $subdir, 'basedir' => $bdir, 'baseurl' => $burl, 'error' => false ) );

adding this code:

$burl = replace_upload_url($burl);
$url = replace_upload_url($url);

Second thing we have to do is to change the previous posts with that old url (Database changes). The trick here is create a Sub-Domain (I called Uploads) that point to the same Uploads Folder. The Sub-Domain should be Mapped to “/[YOUR_WEBSITE_FOLDER]/wp-content/uploads/”

DB Changes: SQL query to update the old url.

Note: Make sure to backup the database first.

UPDATE wp_posts SET post_content=(
REPLACE (post_content,
'http://www.jaider.net/wp-content/uploads/',
'http://uploads.jaider.net/'));
UPDATE wp_posts SET post_content=(
REPLACE (post_content,
'http://jaider.net/wp-content/uploads/',
'http://uploads.jaider.net/'));

Note: We also can update the database field ‘guid‘ for the attachments but is not necessary.

Continue with Part 2…

 

1 Comment »

Leave a Comment

 
 

Neko The Cat: HTML5 + CSS3 Animation

February 9th, 2012 | by | programming & web development

Feb
09

I created this post thinking back in my first programming class about animation using Java. At that time, I was using JAVA Applet technology. The project was to reproduce Neko program that was a nice cat in its basic activities: running, yawn, scratching, sleeping and more run. I think that program was originally from Japan and it’s really fun.

CSS3 introduced keyframes, a new feature for transitions, transforms and animation. The use is very easy just split the time frame in percents (0% to 100%) and define for each percent a particular style. And finally you will need to set the duration and loop time. Then, what happens is the browser rendering provider will try to create intermediate frames to produce a nice animation on the fly. For instance, if your animation start with color yellow and the final color is red, then the rendering provider will create the other colors in between, such as orange. Or if your initial position is 0 and the final position is 100 then the rendering provider will positioning the object from 0 to 100 and you will see the object moving.

My first attempt creating Neko was not success because I tried to change the background image from one frame to another, and the reason why this doesn’t seem working is because the rendering provider doesn’t know how to create this intermediate images. For instance if you initial image is a curve and the final image is a line you may expect the rendering provider provide intermediate frames showing how the draw is stretching while time pass by. But here is the thing, I don’t think the rendering provider is advanced enough to do it, instead is just shutdown the use of background image.

When I see a coke-cane example, immediately I though to animate Neko by using similar approach. As the label in the coke where just show part of the image and while the rest is hide; I join all Neko images in one large image and just display one at the time and hide the rest. In my animation, I normally repeat the frame twice. The first one is used to show the initial state and the second to keep it before it changed (in this case, I avoid the transitions and transforms). The duplicate frame normally ending with .99%. The CSS3 keyframes is not current supported by IE9, and we need special keyframes for IE10 (@-ms-keyframes / -ms-animation), Firefox/Mozilla (@-moz-keyframes / -moz-animation), Chrome, and Safari (@-webkit-keyframes / -webkit-animation).


Note: This example does not work in Internet Explorer and Opera.

@keyframes mymove
	{
	0%  {left:0px; background-position: 0 0; }
	1.99%  {left:0px; background-position: 0 0; }
	2% {left:10px; background-position: -32 0;}
	3.99% {left:10px; background-position: -32 0;}
	4% {left:20px; background-position: 0 0; }
	5.99% {left:20px; background-position: 0 0; }
	6% {left:30px; background-position: -32 0;}
	7.99% {left:30px; background-position: -32 0;}
	8% {left:40px; background-position: 0 0;}
	9.99% {left:40px; background-position: 0 0;}
	10% {left:50px; background-position: -32 0;}
	11.99% {left:50px; background-position: -32 0;}
	12% {left:60px; background-position: 0 0; }
	13.99% {left:60px; background-position: 0 0; }
	14% {left:70px; background-position: -32 0;}
	15.99% {left:70px; background-position: -32 0;}
	16% {left:80px; background-position: 0 0;}
	17.99% {left:80px; background-position: 0 0;}
	18% {left:90px; background-position: -32 0;}
	19.99% {left:90px; background-position: -32 0;}	

	20% {left:100px; background-position: -64 0;}
	27.99% {left:100px; background-position: -64 0;}	

	28% {left:100px; background-position: -96 0;}
	31.99% {left:100px; background-position: -96 0;}	

	32% {left:100px; background-position: -128 0;}
	33.99% {left:100px; background-position: -128 0;}
	34% {left:100px; background-position: -160 0;}
	35.99% {left:100px; background-position: -160 0;}
	36% {left:100px; background-position: -128 0;}
	37.99% {left:100px; background-position: -128 0;}
	38% {left:100px; background-position: -160 0;}
	39.99% {left:100px; background-position: -160 0;}
	40% {left:100px; background-position: -128 0;}
	41.99% {left:100px; background-position: -128 0;}
	42% {left:100px; background-position: -160 0;}
	43.99% {left:100px; background-position: -160 0;}

	44% {left:100px; background-position: -192 0;}
	45.99% {left:100px; background-position: -192 0;}
	46% {left:100px; background-position: -224 0;}
	47.99% {left:100px; background-position: -224 0;}
	48% {left:100px; background-position: -192 0;}
	49.99% {left:100px; background-position: -192 0;}
	50% {left:100px; background-position: -224 0;}
	51.99% {left:100px; background-position: -224 0;}
	52% {left:100px; background-position: -192 0;}
	53.99% {left:100px; background-position: -192 0;}
	54% {left:100px; background-position: -224 0;}
	55.99% {left:100px; background-position: -224 0;}	

	56% {left:100px; background-position: -256 0;}
	61.99% {left:100px; background-position: -256 0;}	

	62%  {left:110px; background-position: 0 0; }
	63.99%  {left:110px; background-position: 0 0; }
	64% {left:120px; background-position: -32 0;}
	65.99% {left:120px; background-position: -32 0;}
	66% {left:130px; background-position: 0 0; }
	67.99% {left:130px; background-position: 0 0; }
	68% {left:140px; background-position: -32 0;}
	69.99% {left:140px; background-position: -32 0;}
	70% {left:150px; background-position: 0 0;}
	71.99% {left:150px; background-position: 0 0;}
	72% {left:160px; background-position: -32 0;}
	73.99% {left:160px; background-position: -32 0;}
	74% {left:170px; background-position: 0 0; }
	75.99% {left:170px; background-position: 0 0; }
	76% {left:180px; background-position: -32 0;}
	77.99% {left:180px; background-position: -32 0;}
	78% {left:190px; background-position: 0 0;}
	79.99% {left:190px; background-position: 0 0;}
	80% {left:200px; background-position: -32 0;}
	81.99% {left:200px; background-position: -32 0;}
	82% {left:210px; background-position: 0 0;}
	83.99% {left:210px; background-position: 0 0;}
	84% {left:220px; background-position: -32 0;}
	85.99% {left:220px; background-position: -32 0;}

	86% {left:220px; width:32px; background-position: -64 0;}
	99.99% {left:220px; background-position: -64 0;}	

	100% {left: 220px; width:0px;}
	}

Source:
CSS3 Animations http://blogs.msdn.com/b/davrous/archive/2011/12/06/introduction-to-css3-animations.aspx

http://www.w3.org/TR/css3-animations/

Try it yourself http://www.w3schools.com/cssref/tryit.asp?filename=trycss3_keyframes4
Neko http://www.csse.uwa.edu.au/~peterj/javalin/tut4-l9.html

http://www.sorcon.com/java/JAVA12.html

http://www.seas.gwu.edu/~rhyspj/fall06cs143/lab11/lab111.html

Coke Cane http://www.romancortes.com/blog/pure-css-coke-can/

1 Comment »

Leave a Comment

 
 

RSS Feed from Picasa Album

January 28th, 2012 | by | programming & web development

Jan
28

I decide to use Picasa to get my pictures through RSS. The following PHP code generates a HTML markups with IMG Tags. The $feed variable contains my User ID and Album ID that is given by Picasa when you set the album’s privacy to Public.

function grey_picasa_stream($nr=9 ) {
    $feed = "https://picasaweb.google.com/data/feed/base/user/103900444418818987225/albumid/5702133232086465745";
    $return = "";
    $xml = simplexml_load_file($feed)
                or die ("Unable to load XML file");

    $i = 0;
    foreach( $xml->entry as $row ) {
        if( $i<$nr ) {
            $src = $row->content['src'];
            $link = $src;
	    foreach($row->link as $rLink ){
		if($rLink['rel'] == 'alternate'){
	            $link = $rLink['href'];
		    break;
		}
	    }
            $return .= "<a href='{$link}' title='{$row->title}'><img src='{$src}' alt='{$row->title}' /></a>\n";
        } else break;

        $i++;
    }
    return $return;
}

The XML Feed look like this:

<?xml version='1.0' encoding='UTF-8'?>
<feed xmlns='http://www.w3.org/2005/Atom' xmlns:gphoto='http://schemas.google.com/photos/2007' xmlns:media='http://search.yahoo.com/mrss/' xmlns:openSearch='http://a9.com/-/spec/opensearchrss/1.0/'>
<id>https://picasaweb.google.com/data/feed/base/user/103900444418818987225/albumid/5702133232086465745</id>
<!-- Others XML Elements -->
<entry>
<id>https://picasaweb.google.com/data/entry/base/user/103900444418818987225/albumid/5702133232086465745/photoid/5702133230611890402?hl=en_US</id>
<published>2012-01-27T02:29:10.000Z</published>
<updated>2012-01-27T02:37:46.171Z</updated>
<category scheme='http://schemas.google.com/g/2005#kind' term='http://schemas.google.com/photos/2007#photo'/>
<title type='text'>Understanding the Microsoft Shift on Silverlight and HTML5</title>
<summary type='html'>&lt;table&gt;&lt;tr&gt;&lt;td style="padding: 0 5px"&gt;&lt;a href="https://picasaweb.google.com/103900444418818987225/JaiderNet#5702133230611890402"&gt;&lt;img style="border:1px solid #5C7FB9" src="https://lh3.googleusercontent.com/-DGycNeDm2gg/TyIL9kiSgOI/AAAAAAAAAAk/WE0XBR5ivS0/s288/evolution-windows-html_xaml%25255B2%25255D.jpg" alt="evolution-windows-html_xaml[2].jpg"/&gt;&lt;/a&gt;&lt;/td&gt;&lt;td valign="top"&gt;&lt;font color="#6B6B6B"&gt;Date: &lt;/font&gt;&lt;font color="#333333"&gt;Jan 27, 2012 2:29 AM&lt;/font&gt;&lt;br/&gt;&lt;font color=\"#6B6B6B\"&gt;Number of Comments on Photo:&lt;/font&gt;&lt;font color=\"#333333\"&gt;0&lt;/font&gt;&lt;br/&gt;&lt;p&gt;&lt;a href="https://picasaweb.google.com/103900444418818987225/JaiderNet#5702133230611890402"&gt;&lt;font color="#3964C2"&gt;View Photo&lt;/font&gt;&lt;/a&gt;&lt;/p&gt;&lt;/td&gt;&lt;/tr&gt;&lt;/table&gt;</summary>
<content type='image/jpeg' src='https://lh3.googleusercontent.com/-DGycNeDm2gg/TyIL9kiSgOI/AAAAAAAAAAk/WE0XBR5ivS0/evolution-windows-html_xaml%25255B2%25255D.jpg'/>
<link rel='http://schemas.google.com/g/2005#feed' type='application/atom+xml' href='https://picasaweb.google.com/data/feed/base/user/103900444418818987225/albumid/5702133232086465745/photoid/5702133230611890402?hl=en_US'/>
<link rel='alternate' type='text/html' href='https://picasaweb.google.com/103900444418818987225/JaiderNet#5702133230611890402'/>
<link rel='http://schemas.google.com/photos/2007#canonical' type='text/html' href='https://picasaweb.google.com/lh/photo/rYXhSpW6l7w1-T5s9aJX6NMTjNZETYmyPJy0liipFm0'/>
<link rel='self' type='application/atom+xml' href='https://picasaweb.google.com/data/entry/base/user/103900444418818987225/albumid/5702133232086465745/photoid/5702133230611890402?hl=en_US'/>
<link rel='http://schemas.google.com/photos/2007#report' type='text/html' href='https://picasaweb.google.com/lh/reportAbuse?uname=103900444418818987225&amp;aid=5702133232086465745&amp;iid=5702133230611890402'/>
<media:group>
<!-- Media Children -->
</media:group>
</entry>
<entry>
<!-- Others Entries -->
</feed>

No Comments »

Leave a Comment

 
 

How to Internationalize your Eclipse Plug-In

December 6th, 2011 | by | technology

Dec
06

There is two interesting articles here:
1. How to Internationalize your Eclipse Plug-In
2. How to Test Your Internationalized Eclipse Plug-In

There is one question after you read all: How to switch language? You have the option to use or not Eclipse’s string externalization mechanism (Source>Externalize Strings…>first check-box). This solution is a modification of the traditional externalization mechanism.

Modified Message.java

public class Messages {
	public static final String BUNDLE_NAME = "myplugin.nl.messages"; //$NON-NLS-1$
	public static ResourceBundle RESOURCE_BUNDLE = ResourceBundle.getBundle(BUNDLE_NAME);

	public static String getString(String key) {
		try {
			return RESOURCE_BUNDLE.getString(key);
		} catch (MissingResourceException e) {
			return '!' + key + '!';
		}
	}

}

Update Locate

public static void updateLocale(Locale NewLocale) {
	myplugin.nl.Messages.RESOURCE_BUNDLE =
		ResourceBundle.getBundle(myplugin.nl.Messages.BUNDLE_NAME, NewLocale);
}

Implementation

myclass.updateLocale(new Locale("es"));//Locale.ENGLISH

No Comments »

Leave a Comment

 
 

Older Posts