CSS Sprites

The first time I saw these two words on Best Practices for Speeding Up Your Website, I asked myself, "How come does Sprite relate to CSS?"

I found the definition of it:


CSS Sprites are the preferred method for reducing the number of image requests. Combine your background images into a single image and use the CSS background-image and background-position properties to display the desired image segment

I didn't really understand immediately what it means.
I'm really amazed when I understand it. This is genius way to reducing image requests.

Basically, it's like this. For example, you want to make an "on-off" effect of your image. So when you drag your mouse over, the image link goes "on", and "off" if you drag your mouse off the image. Without sprites, usually we have to make 2 images = 1 "on" image + 1 "off" image. So, the way it works is that "when you drag your mouse over, the browser loads the "on" image, and when you drag your mouse off the image, the browser loads the "off" image.

On the other hand, when using sprites, you just need 1 image, which is a combination between "on" and "off" images (which are drawn side-by-side). So, the way it works: the browser have already loaded the image ("on" and "off" combined in 1 image file) when it loads the page, but the CSS only shows the "off" image (using background-position properties). When you drag the mouse over the image link, the position is changed to the "on" image position.

If you don't understand my explanation (hehehehe...) or you want to see the examples and more details, go to these sites:
http://css-tricks.com/css-sprites/
http://www.thewebsqueeze.com/web-design-articles/an-introduction-to-css-sprites.html

Read More

YSlow (Speeding Up Your Website)

When I was searching on Google how to strip unused CSS codes, I found the Best Practices for Speeding Up Your Website. Go to the link I've given to read further details about how to tweak your website :D

There are 35 best practices that can be done for boosting your website, but, you don't have to worry of how you're gonna apply these practices, because Yahoo have created a tool called YSlow which is a Firefox add-on integrated with the Firebug web development tool, so you need to install Firebug first before YSlow. Below image shows the result page of YSlow.

It is a great tool to review your website performance. However, for those who use free web hosting, you're not allowed to modify the settings of the server. Hence, you might not get the best result when using YSlow.

Read More

Technologies Choice For My Learning Contract

Basically, my technologies choice for my learning contract can be categorized as:
Front-end technologies: XHTML, CSS, Javascript, jQuery 1.4.
Back-end technologies: PHP, MySQL.
Web Server: Apache

Since this week's subject material is about server side technologies, let's take a look on what PHP is.


PHP (recursive acronym for PHP: Hypertext Preprocessor) is a widely-used open source general-purpose scripting language that is especially suited for web development and can be embedded into HTML.

What distinguishes PHP from something like client-side JavaScript is that the code is executed on the server, generating HTML which is then sent to the client. The client would receive the results of running that script, but would not know what the underlying code was. You can even configure your web server to process all your HTML files with PHP, and then there's really no way that users can tell what you have up your sleeve.

The best things in using PHP are that it is extremely simple for a newcomer, but offers many advanced features for a professional programmer.

There are three main areas where PHP scripts are used.

1. Server-side scripting. This is the most traditional and main target field for PHP. You need three things to make this work. The PHP parser (CGI or server module), a web server and a web browser. You need to run the web server, with a connected PHP installation. You can access the PHP program output with a web browser, viewing the PHP page through the server. All these can run on your home machine if you are just experimenting with PHP programming.

2. Command line scripting. You can make a PHP script to run it without any server or browser. You only need the PHP parser to use it this way. This type of usage is ideal for scripts regularly executed using cron (on *nix or Linux) or Task Scheduler (on Windows). These scripts can also be used for simple text processing tasks.

3. Writing desktop applications. PHP is probably not the very best language to create a desktop application with a graphical user interface, but if you know PHP very well, and would like to use some advanced PHP features in your client-side applications you can also use PHP-GTK to write such programs. You also have the ability to write cross-platform applications this way. PHP-GTK is an extension to PHP, not available in the main distribution.

Reference(s):
http://www.php.net
http://en.wikipedia.org/wiki/PHP

Read More

Week 4 Practical Exercise

Week 4 materials are about server-side technologies, which focus on PHP.

For the exercise, we're gonna use date function on PHP. If you want to see the documentation without going online, just download the documentation here

Don't hesitate to click Read More.

Date function
string date ( string $format [, int $timestamp ] )

Returns a string formatted according to the given format string using the given integer timestamp or the current time if no timestamp is given. In other words, timestamp is optional and defaults to the value of time().

Original file week4prac.php

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
 "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
 <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>

 <title>Week 4 Practical</title>
 
</head>

<body>
<?php
echo "The date is: ";
echo date("d m Y H:i:s");

?>

</body>
</html>

The output for the code above: The date is: 24 08 2010 13:29:35

To get 'Monday 15th of August 2005 03:12:46 PM' as the output <-- (not the exact date) Change line 15 to

echo date("l jS \of F Y h:i:s A");

For the question of what sort of online database administration system is provided by my webhost (which is 000webhost.com), it is PhpMyAdmin.

Read More

Week 3 Practical Exercise

This blog post was made to point the interesting parts of the exercises given on week 3.
To see fullpost, don't hesitate to click "Read More" :D


Exercise 1
- What's the difference between <strong> and <b> ?
=> Doing this exercise makes me know the answer


Use the <strong> and <em> tags when the content of your page requires that certain words or phrases be stressed. Use them sparingly or your page, much as you would use exclamation points ( ! ! ! ). If you are only highlighting words for a visual effect to assist in navigation use the <b> and <i> tags (http://www.think-ink.net/html/bold.htm).

One way of working out what is semantically most appropriate is to imagine what a screen reader would do. It will read a <b> tag in a normal voice, but it will emphasise a <strong> tag with a "bigger" voice. So now we know what each tag means. (http://www.webmasterworld.com/forum21/9181.htm)


Exercise 3
I've actually installed Web Developer add-ons years ago but never use it. I've just realized that it's REALLY a great tool.

– CSS > View Style Information. This is like an "Inspect Element" in Chrome.
- CSS > Edit CSS. This menu will let you edit the CSS on-the-fly.
- Information > Display Block size. This menu will let you know dimensions (block size) for div, form, etc
- Tools > Validate CSS. A shortcut to validate your CSS code using the W3C CSS validation service.
- Tools > Display page validation. Another cool feature that automatically validates your html code. If you change your HTML on-the fly using web-developer, it will validate your code straightaway after you finish editing.


I skipped exercise 2 & 4 because it's fairly easy. For exercise 4, I think it's a good exercise that shows how to modifying DOM using raw Javascript (without framework). However, if it's easier to use jQuery to accessing harder structured DOM.

Read More

Check out my Learning Proposal

Click here to see my draft learning proposal.

Read More

Fix failed 000webhost.com validation

If you're failed to validate your 000webhost.com, it is probably because of the generated analytic code that is used "to monitor if account active or not. Analytics code is also used to build stats and visitors report for your website. By disabling analytics code you will also loose an ability to get stats for your website."

To fix it,
1. Go to http://members.000webhost.com/analytics.php
2. Enter your domain (ex. test.site90.net)
3. Enter your ftp password.
4. Don't forget to choose "Disable Code" below "Manage Analytic" dropdown.

Read More

Blogger W3C Validation Fail

OMG !!! I'm surprised when I validate my blog.

137 errors and 20 warning(s). Insane.

Referring to Vikas Gupta's blog (bloggingtips), Blogger have had this problem since they still used XHTML for the templates. Even though, it has smaller number than before (probably because now they use HTML5), but I think the number is still huge.

I've tested some Wordpress websites and they have less errors. Click the links below to see the result yourself:
http://validator.w3.org/check?verbose=1&uri=http://www.kombitz.com/
http://validator.w3.org/check?verbose=1&uri=/http://notdrowning.wordpress.com/
http://validator.w3.org/check?verbose=1&uri=http://bestblog.wordpress.com/

There are some steps to fix invalid xhtml template that are suggested on Kaylan-City's blog.

The website also points out some problems that can only be fixed by Google team such as Blog's Search Result String '&max-results=20' Error and Navbar's Validation Error

So, what's the solution? Migrate to Wordpress ?

References:
http://kalyan-city.blogspot.com/2008/08/w3c-validating-blogger-xhtml-template.html
http://www.bloggingtips.com/2010/03/21/official-google-blogs-and-blogger-are-full-of-validation-errors/
http://blog.tomw.net.au/2010/05/removing-validation-errors-from-google.html

Read More

Modify the code tag

Basically, I've been using <code> tag for links, descriptions, etc. <pre> tag (just added recently) is used for the programming code :D

For this blog, I use this css code below for my <code> tag:

code{
color: black;
padding: 4px 10px 0px 40px;
line-height:20px;
/*--Background of lined paper--*/
background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjhPHoLcc0a8-N-kODqjcmvJ97OlshJFoz-Fx_bJV5qEye9odIn86IhQImVDC7j4-0wrctLM1033a4qkSRVahsoXp9jxmq68y4LDDskfgLxB5RaOH2RwJsJHYv8mKIks_8Nl5AIpJIa9TYG/) repeat-y left top;
white-space: no-wrap;
display: block; /* -- this make the background wraps the text correctly */
}

Read More

Added "Read More" (again)

Reference: http://bloggerstop.net/2008/10/blogger-help-add-read-more-link-to-your.html

Click Read More to see the steps

Steps to follow:
1. Log into the Blogger.com account
2. Go to "Layout" section
3. Back up your current template, by downloading it.
4. Now click on "Expand Widget Templates"
5. Now find this code - ]]>
6. Just AFTER that code add these lines

<style>
<b:if cond='data:blog.pageType == "item"'>
span.fullpost {display:inline;}
<b:else/>
span.fullpost {display:none;}
</b:if>
</style>

7. Now again find this code :
8. And just after this, add these code lines:

<!--READ-MORE-STARTS--><b:if cond='data:blog.pageType != "item"'>
<a expr:href='data:post.url'>Read More!</a>
</b:if><!--READ-MORE-STOPS-->

If you want to shift the "Read More!" text to the extreme-right side, use this code:

<!--READ-MORE-STARTS--><b:if cond='data:blog.pageType != "item"'>
<a expr:href='data:post.url'><div style="text-align: right;">Read More !</div></a>
</b:if><!--READ-MORE-STOPS-->

9. Now save the template.

Read More

Syntax Highlighter (+Demo)

I've added Syntax Highlighter for some programming codes. Go to http://alexgorbatchev.com/SyntaxHighlighter/ to get the latest version.

Reference: http://blog.cartercole.com/2009/10/awesome-syntax-highlighting-made-easy.html

Demo:

public class HelloBlogger {
public static void main(String [] args) {
System.out.println("Hello Blogger!!");
}
}

Yeepee, it's working. Latest version removes the clipboard Flash.


Steps to install it:

1. Paste this code just before the </head> tag. Remove the languages you don't want to use :

<link href='http://alexgorbatchev.com/pub/sh/current/styles/shCore.css' rel='stylesheet' type='text/css'/> 
<link href='http://alexgorbatchev.com/pub/sh/current/styles/shThemeDefault.css' rel='stylesheet' type='text/css'/> 
<script src='http://alexgorbatchev.com/pub/sh/current/scripts/shCore.js' type='text/javascript'></script> 
<script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushCpp.js' type='text/javascript'></script> 
<script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushCSharp.js' type='text/javascript'></script> 
<script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushCss.js' type='text/javascript'></script> 
<script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushJava.js' type='text/javascript'></script> 
<script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushJScript.js' type='text/javascript'></script> 
<script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushPhp.js' type='text/javascript'></script> 
<script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushPython.js' type='text/javascript'></script> 
<script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushRuby.js' type='text/javascript'></script> 
<script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushSql.js' type='text/javascript'></script> 
<script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushVb.js' type='text/javascript'></script> 
<script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushXml.js' type='text/javascript'></script> 
<script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushPerl.js' type='text/javascript'></script> 
<script language='javascript'> 
SyntaxHighlighter.config.bloggerMode = true;
SyntaxHighlighter.config.clipboardSwf = 'http://alexgorbatchev.com/pub/sh/current/scripts/clipboard.swf';
SyntaxHighlighter.all();
</script>

2. Now you are all done to start posting source codes. You can either use the <pre> to enclose your source-codes, attribute and class="brush:java" for your java source.

Read More

Cleaning up my blog.

After several months, I visit my blog to clean it up (no more ads, new template). Why? Because, there will be more visitors to come to visit my blog ( I have faith on it ) :D I need to impress them ^^

Question: Why a new label/category appears?
Answer: This blog will also be used for one of assessment criteria for Digital Media Technologies subject. I want to make sure that it looks tidy and clean.

Because of the new template I use, I need to fix the "Read More" and <code> tag problems because they got deleted (darn it).

So, this post is a border and a beginning of my last semester at UTS :D

Read More