Lisa, the Simpson!
January 07, 2009, 18:54 *
Welcome, Guest. Please login or register.

Login with username, password and session length
 Add Site
 
   Home   Galleries Library Help Login Register  
Lisa, the Simpson! > Discussions > Lisa's Friends > Topic: Tips for Website Creators
Pages: 1 2 [All]
« previous next »
  Print  
Author Topic: Tips for Website Creators  (Read 3061 times)
Dagdamor
Lisahugger
Administrator
*
Offline Offline

Gender: Male
Posts: 2673


WWW
« on: December 24, 2006, 05:02 »
In this topic I'm going to post simple tips and tricks that can be useful for people maintaining their own sites. Smile Hopefully you'll find something new and interesting here.

Okay, here's trick #1: GZIP Compression

GZIP is a fairly new standard for sending data from server to client (i.e. from a website to your browser). It works like a typical archiver: before sending a page, it compresses it, sends a compressed version to your browser, then browser decompresses and shows it. This feature doesn't affect the page contents in any way, only makes the load 4-5 times faster and saves some traffic. For that people who still use dial-up (like me Wink), it's a great feature - if your favorite sites support it, of course.

If you have a PHP-powered website, and want to enable GZIP on it, it's an easy thing to do. Just download the attached file, unpack it (there should be one script inside, gzip.php) and upload that script to your site's root folder. After that, open the index.php file, and in the very beginning of it, add the short line:

<?php include "gzip.php"; ?>

That's all. The script automatically detects if the visitor's browser supports GZIP, or not. You don't have to change anything else in your scripts, just make sure there is no text or spaces/newlines before the line you added.
* gzip.zip (0.56 KB - downloaded 61 times.)
Logged
When the power of love overcomes the love of power, the world will know peace. - Jimi Hendrix
Suusje
The Saxophonist
Hero Member
*
Offline Offline

Gender: Male
Posts: 578


WWW
« Reply #1 on: December 24, 2006, 07:27 »
Thanks for the tip, but doesn't ob_gzhandler do the same with less code? Or am I missing something here? Tongue

Edit:
I just tested it and it does do the same with less code...

Benchmarks! Lisa

I used a file that's 9,45 KB big when it's not compressed to test this.

Uncompressed: 9,45 KB (9.679 bytes)
Dag's Gzip script: 2,6 KB (2.665 bytes)
ob_gzhandler: 2,42 KB (2.483 bytes)
Dag's Gzip script with maximum compression: 2,41 KB (2.472 bytes)

This doesn't show a big difference between Dag's script and ob_gzhandler, now does it? I should test this with a bigger file. Tongue

Uncompressed: 105,83 KB (108.374 bytes)
Dag's Gzip script: 25,74 KB (26.353 bytes)
ob_gzhandler: 22,98 KB (23.535 bytes)
Dag's Gzip script with maximum compression: 22,98 KB (23.535 bytes)

There's still no big difference, although the gap between compressed and uncompressed is huge. I would suggest using Dag's script, because it probably causes less serverload than ob_gzhandler and the difference between filesizes is too small to actually make a huge impact on loading times. Smile
Logged
KANG *to Marge*: You look lovely this evening. Have you decreased in mass?

[ The Grabpics Thread | Cutest Lisa Moments ]
Dagdamor
Lisahugger
Administrator
*
Offline Offline

Gender: Male
Posts: 2673


WWW
« Reply #2 on: December 24, 2006, 13:09 »
Suusje
Wow, thanks for the nice research Smile but the reason I prefer using this custom handler instead of PHP's internal one is different. "ob_gzhandler" works well, but it doesn't send a "Content-Length" header, which sometimes causes scripts to work buggy. SMF itself uses ob_gzhandler to compress the output, and at my work, all SMF-powered forums make their pages to hang for several seconds during load. Sad A very annoying issue, maybe it happens because of wrongly configured proxy server on our side - I'm not sure, but the missing "Content-Length" header is definitely the source of this problem. The script attached above sends this header properly, I tested it on different servers and in different browsers, and it works just fine. LTS also uses the patched version. Wink
Logged
When the power of love overcomes the love of power, the world will know peace. - Jimi Hendrix
Suusje
The Saxophonist
Hero Member
*
Offline Offline

Gender: Male
Posts: 578


WWW
« Reply #3 on: December 24, 2006, 13:29 »
Well yeah, that would be a very good reason for not using ob_gzhandler.

I also found out that your script and ob_gzhandler use different methods of compressing files. Your script compresses the file while the page is being parsed and ob_gzhandler first parses the page entirely and than compresses it. This might explain the 'lag' you're experiencing when using ob_gzhandler.

Lisa: ... Well, yes. Ofcourse. *looks confused* Lisa
Logged
KANG *to Marge*: You look lovely this evening. Have you decreased in mass?

[ The Grabpics Thread | Cutest Lisa Moments ]
Suusje
The Saxophonist
Hero Member
*
Offline Offline

Gender: Male
Posts: 578


WWW
« Reply #4 on: January 10, 2007, 21:50 »
So... Do you have any more tips for us, Dag? Or maybe someone else has some tips he/she would like to share? Lisa
Logged
KANG *to Marge*: You look lovely this evening. Have you decreased in mass?

[ The Grabpics Thread | Cutest Lisa Moments ]
Dagdamor
Lisahugger
Administrator
*
Offline Offline

Gender: Male
Posts: 2673


WWW
« Reply #5 on: January 12, 2007, 16:28 »
Sorry, no new tips right now... Wink
I'll try to pick up something this weekend. *takes a deep breath, digs into his "to do" pile*
Logged
When the power of love overcomes the love of power, the world will know peace. - Jimi Hendrix
Dagdamor
Lisahugger
Administrator
*
Offline Offline

Gender: Male
Posts: 2673


WWW
« Reply #6 on: January 14, 2007, 14:37 »
Tip #2: Your Site's "Favorites" Icon

If you want to create a small icon for your site that will be displayed in your visitors' bookmarks, in their browsers' windows tabs, in the search engines' results etc, it's quite a simple thing to do. Just create a 16x16 image you'd like to see as an icon for your site, and save it on your computer in any valid format (PNG, GIF or JPG). The image can be either 256 color or Truecolor. Of course 256 colors should be enough for an image that size. Wink

The current standards demand that the site's icon should be saved in Windows ICO format, called "favicon.ico" and located in your site's root folder, i.e. www.yoursite.com/favicon.ico. Unfortunately, all common graphic editors (Paint, Photoshop) don't support ICO format. Fortunately, there are online services which do Smile This site is one of them. Just upload your image to it, and you will be able to download a small ZIP archive that contains your site's icon and even some more useful stuff. Unpack it, upload the "favicon.ico" file to your site, and you're there!

If you want to obey RFC a little bit more, you can also add the following block of code to your site's contents:

Code:
<link rel="shortcut icon" href="favicon.ico" />

It should be placed in the site header, i.e. between <head> and </head> tags.
Logged
When the power of love overcomes the love of power, the world will know peace. - Jimi Hendrix
Gazmanafc
SMF Customiser
Hero Member
*
Offline Offline

Gender: Male
Posts: 1106


There can be only one Snake and one Big Boss
WWW
« Reply #7 on: January 14, 2007, 16:13 »
You could just add the .ico extension when saving. Tongue (I did that and it worked like the charm) Tongue
Logged
Andreas
Hero Member
*
Offline Offline

Gender: Male
Posts: 524


WWW
« Reply #8 on: January 14, 2007, 17:06 »
You can also use IrfanView to convert your pic into ICO.
Logged
Andreas
Suusje
The Saxophonist
Hero Member
*
Offline Offline

Gender: Male
Posts: 578


WWW
« Reply #9 on: January 14, 2007, 17:57 »
Someone should create a favicon for LTS Lisa
Logged
KANG *to Marge*: You look lovely this evening. Have you decreased in mass?

[ The Grabpics Thread | Cutest Lisa Moments ]
Dagdamor
Lisahugger
Administrator
*
Offline Offline

Gender: Male
Posts: 2673


WWW
« Reply #10 on: January 14, 2007, 19:09 »
Suusje
Quote
Someone should create a favicon for LTS Lisa

Done and done! Smile
Logged
When the power of love overcomes the love of power, the world will know peace. - Jimi Hendrix
Andreas
Hero Member
*
Offline Offline

Gender: Male
Posts: 524


WWW
« Reply #11 on: January 14, 2007, 19:39 »
Very cute - thanks!  Lisa
Logged
Andreas
Suusje
The Saxophonist
Hero Member
*
Offline Offline

Gender: Male
Posts: 578


WWW
« Reply #12 on: January 14, 2007, 20:30 »
It looks great! Wink
Logged
KANG *to Marge*: You look lovely this evening. Have you decreased in mass?

[ The Grabpics Thread | Cutest Lisa Moments ]
janglewolf
Sr. Member
*
Offline Offline

Gender: Male
Posts: 296
« Reply #13 on: January 14, 2007, 20:41 »
Heh!   When I saw your first post on this earlier today I was going to ask if there were plans for a favicon for this forum but you were just too quick for me Serge!
It looks nice - really brightens up my bookmarks!
Logged
Dagdamor
Lisahugger
Administrator
*
Offline Offline

Gender: Male
Posts: 2673


WWW
« Reply #14 on: April 27, 2007, 08:20 »
Tip #3: Alpha Transparency

Internet Explorer, at least its versions below 7, doesn't support alpha transparency. For example, this PNG image will be displayed incorrectly (on a gray background instead of smooth edges) if you use IE5 or IE6:



So you can't use images with alpha transparency on your sites, since IE is very popular. Sad There are workarounds, but they are either complex (i.e. surrounding all images with extra tags in your HTML), or don't work very nice (make images visually twitching). Here is another solution that is easy to use. Just add the following code into your HTML:

Code:
<script type="text/javascript">
function transparent(im) {
  if(!im.transparented && (/\.png/.test(im.src))) {
    im.transparented=1;
    var picture=im.src;
    var w=im.width;
    var h=im.height;
    im.src="spacer.gif";
    im.style.filter="progid:DXImageTransform.Microsoft.AlphaImageLoader(enabled=true,sizingMethod='scale',src='"+picture+"');";
    im.width=w;
    im.height=h;
  }
  return "transparent";
}
</script>

<style type="text/css">
* html img { background:expression(transparent(this)); }
</style>

and it should work. This method affects only Internet Explorer and only versions below 7.

Disadvantages/Peculiarities:
- It affects only images, i.e. <img> tags. No backgrounds with alpha transparency.
- It requires an empty 1x1 GIF image ("spacer.gif") uploaded on your site.
- It requires Javascript to be turned on to work.
Logged
When the power of love overcomes the love of power, the world will know peace. - Jimi Hendrix
Suusje
The Saxophonist
Hero Member
*
Offline Offline

Gender: Male
Posts: 578


WWW
« Reply #15 on: April 27, 2007, 10:29 »
And this is the version that does work for backgrounds, but not for img-tags:

Code:
<script language="javascript">
if (navigator.platform == "Win32" && navigator.appName == "Microsoft Internet Explorer" && window.attachEvent) {
window.attachEvent("onload", alphaBackgrounds);
}

function alphaBackgrounds(){
var rslt = navigator.appVersion.match(/MSIE (\d+\.\d+)/, '');
var itsAllGood = (rslt != null && Number(rslt[1]) >= 5.5);
for (i=0; i<document.all.length; i++){
var bg = document.all[i].currentStyle.backgroundImage;
if (itsAllGood && bg){
if (bg.match(/\.png/i) != null){
var mypng = bg.substring(5,bg.length-2);
document.all[i].style.filter = "progid:DXImageTransform.Microsoft.AlphaImageLoader(src='"+mypng+"', sizingMethod='scale')";
document.all[i].style.backgroundImage = "url('/assets/images/x.gif')";
}
}
}
}
</script>

I wouldn't advise to use this, because IE still manages to screw up the colors with this workaround. This is very noticable when you mix png's with other filetypes or HTML backgroundcolors.  Confused
Logged
KANG *to Marge*: You look lovely this evening. Have you decreased in mass?

[ The Grabpics Thread | Cutest Lisa Moments ]
SimpReal
Mood Swinger
Administrator
*
Offline Offline

Gender: Male
Posts: 1432


Solving the Equation
WWW
« Reply #16 on: April 27, 2007, 12:46 »
I will have to try with IE7 once i'm home. Smile
Logged
Did he open up his eyes?
Did he try to touch my hand,
Or is my mind playing tricks on me?
Do you think he hears us cry?
Does he understand
We are here, by his side...
Dagdamor
Lisahugger
Administrator
*
Offline Offline

Gender: Male
Posts: 2673


WWW
« Reply #17 on: April 27, 2007, 14:37 »
Suusje
I agree about that... believe or not, Opera also screws up PNG colors. I wonder how that's possible - Photoshop shows one color while browser shows another one! This is really annoying... and usually restricts PNG usage to foreground art only, i.e. no connection to HTML colors or others kinds of design. Still, PNG can be very convenient because of its transparency abilities. Frames around photos, icons, foreground design elements etc Smile
Logged
When the power of love overcomes the love of power, the world will know peace. - Jimi Hendrix
Suusje
The Saxophonist
Hero Member
*
Offline Offline

Gender: Male
Posts: 578


WWW
« Reply #18 on: April 27, 2007, 17:50 »
Dagdamor
That's too bad, because PNG is quite a powerful format for making lay-outs for websites. But if every browser dsplays it differently, it's just not useful for that.
Logged
KANG *to Marge*: You look lovely this evening. Have you decreased in mass?

[ The Grabpics Thread | Cutest Lisa Moments ]
SimpReal
Mood Swinger
Administrator
*
Offline Offline

Gender: Male
Posts: 1432


Solving the Equation
WWW
« Reply #19 on: April 27, 2007, 18:22 »
Its just like CSS. Every browser has its own method of understanding it... :\ Which sucks.

Btw, i confirm that with IE7 there is no problem with the alpha transparency.
Logged
Did he open up his eyes?
Did he try to touch my hand,
Or is my mind playing tricks on me?
Do you think he hears us cry?
Does he understand
We are here, by his side...
Pages: 1 2 [All]
  Print  
Lisa, the Simpson! > Discussions > Lisa's Friends > Topic: Tips for Website Creators
 « previous next »
 
Jump to:  

Powered by SMF 1.1.7 | SMF © 2006-2008, Simple Machines LLC