About

Travelogue

Bulletin

Book Shop

Photoblog

Link & Stats

Contact

Home

dodong flores' Travelogue - Decluttered and Redesigned

Saturday, March 8, 2008

Test Post - Manila Harbour Square

Manila Harbour Square
Kodak Z700 / Shutter Speed: 4 sec / F-stop: f/3.4 / ISO Setting: 80 / focal length: 8.6mm / flash: off / mount: tripod (Jan. 27, 2006 8:05pm)

First MIP EB
Kodak Z700 / Shutter Speed: 1/60 sec / F-stop: f/2.8 / ISO Setting: 80 / focal length: 6mm / flash: fired / mount: tripod (Jan. 27, 2006 8:05pm)

T he two photos above actually has no direct references to the title and main content of this entry. Other than reminiscing what was a very interesting and delightful eyeball with MIP members two years ago, I also used these two photos (that, I thankfully found in my archive) for a test post in my new website layout. If you're a frequent visitor of this site, you would notice that I just had undergone a new facelift - this website, that is. From a revised pre-made template that had been my website layout since the dawn of 2004, I had to go through all the pain in designing a layout I can claim my own design - with a fresh hand-coded HTML. It's not that I'm not happy anymore with my previous layout. NO, it's not. In fact, I came to love such layout so deeply as it already became this website's "personality." It was also my design preference, the reason I had to choose and keep it for quite a long time. My idea of redesigning the layout for this website came about when I heard complaints from friends from outside the country who told me they can't view my website. Though there were no details given, I realized there must be something wrong with my layout when being displayed from "outside computer." It was confirmed by a friend based in Korea who told me my website is not loading in her browser. She's using Internet Explorer. I didn't know about it. I'm using Mozilla Firefox. To check it out, I used the Internet Explorer installed in my laptop computer to view my website. It loaded successfully but sluggish. In our office, all the terminals are using Internet Explorer version 7, so I also checked my website from there. The website was loaded successfully in all workstations, but considerably slower as loaded from my laptop using Mozilla Firefox. As if it was not enough, I visited three Internet cafes when I was off from the office. The Internet cafes I visited were using the lower version of Internet Explorer, must probably the same version of Internet Explorer as my friends. To my horror, all three Internet cafes confirmed that my website cannot be viewed with Internet Explorer. When I loaded this website, I was only seeing the header and the yellow background. I could see that a table was partially laid in the screen, so I waited for five minutes. But there was none. In the status bar a "Done" was showing telling me loading of the webpage is done. But it was not. I viewed the source code to check. The source code was not completely downloaded as well. I tried "Refresh" but to no avail. Two more computers confirmed to me the same thing. Pareng Dennis must be right. He also told me in one occassion that my website was loading very slowly in his computer.

That night when I went home, I was really bothered for what I had discovered. I never realized all along, I was using a very unfriendly website layout. While I might say I'm not really an Internet junkie (not just yet), but since I'm sharing my travels, photos, and intimate stories all over the Internet, it isn't just right if only Firefox users can see and feast those postings while others would just be staring with a yellow background. It's just unfair. Everybody should have access to my website. I'm not blaming Dan, the one who made that template. He's a professional web designer and the layout was very good in the beginning. The culprit was simply me. The template underwent so much makeover that it was totally ripped out of its originality (but templates are intended for that purpose, aren't they?).

I was getting busy in the opening of the year 2008 that I wasn't able to update the site with new contents. But I was more concern of any drastic measure that can be done to solve my dilemma. At first, I was considering of cleaning up the source code of the layout, going back to the very basic. But I realized I also fancied a three-column webpage just lately. I was also thinking a black webpage is more appropriate to showcase my photos. Finally, I decided it's time to let go of the old layout and embrace a newer three-column web design. And off I started hand-coding while being conservative about unnecessary spaces, line breaks and hard carriage returns in the source code. The new design costed me three sleepless nights. But I know it was well worth it. There were few minor changes during the testing process. The new design didn't behave well during online display but was addressed to very shortly. When I was already about to implement the new design to my website, I realized it would surely contradict to my previous blog entries. Earlier blog entries were published with independent HTML tags. Those entries surely wouldn't get along with the new layout as compared to this entry. While it may be possible to edit those old entries to conform to the new layout, I think I surely wouldn't do it. I'm just a plain and simple travel photography enthusiast who is having a little time for myself and I wouldn't allow retroactive modification of those old blog entries to compete its share of time with my girlfriend. And my solution is very simple: I won't effect the new layout to entries that were published earlier.

AS far as the HTML hand-coding is concerned, the new design was being worked out to be thoroughly clean as possible as I can make it. But as for the external appearance, I must say the sidebar to the left is still not appealing for my taste. The template was being worked out carefully but hastily, as if I was getting paid for a deadline. Anyhow, it is easier to change such sidebar with a Photoshop to whip. Also, Google Ads to the left and right (both opposite column, top) maybe eyesores, but at least the new design marked a noticeable faster download time as compared to the previous layout. Stat widgets and other bling-bling that occupied most space in the sidebar of the old layout were reassigned to a separate page, the Link page. See my previous layout here for reference.

Comparatively, the old layout is sized to 80kb as compared to the 28kb new one. So, now, you're seeing the external part - I mean, for what you can see now in your computer monitor. Let's see how I worked with the source code.

The source code

I'm sharing you here the HTML source code of the new design.

<!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-ph" lang="en-ph">
<head>
<link rel="shortcut icon" href="/favicon.ico" type="image/x-icon" />
<meta http-equiv="Content-Language" content="en-ph">
<meta name="author" content="dodong flores">
<meta name="email" content="dodongflores@yahoo.com">
<meta http-equiv="Content-Type" content="text/html; charset=windows-1252">
<$BlogMetaData$>

<script type="text/javascript" language="javascript">

<!-- This script and many more are available free online at -->
<!-- The JavaScript Source!! http://javascript.internet.com -->

<!-- Begin
// Set up the image files to be used.
var theImages = new Array() // do not change this
// To add more image files, continue with the
// pattern below, adding to the array.

theImages[0] = '/banner/banner040.JPG'
theImages[1] = '/banner/banner028.JPG'
theImages[2] = '/banner/banner029.JPG'
theImages[3] = '/banner/banner030.JPG'
theImages[4] = '/banner/banner031.JPG'
theImages[5] = '/banner/banner032.JPG'
theImages[6] = '/banner/banner033.JPG'
theImages[7] = '/banner/banner034.JPG'
theImages[8] = '/banner/banner035.JPG'
theImages[9] = '/banner/banner036.JPG'
theImages[10] = '/banner/banner037.JPG'
theImages[11] = '/banner/banner038.JPG'
theImages[12] = '/banner/banner039.JPG'
theImages[13] = '/banner/banner027.JPG'
theImages[14] = '/banner/banner024.JPG'
theImages[15] = '/banner/banner025.JPG'
theImages[16] = '/banner/banner026.JPG'
theImages[17] = '/banner/banner023.JPG'
theImages[18] = '/banner/banner022.JPG'
theImages[19] = '/banner/banner021.JPG'
theImages[20] = '/banner/banner020.JPG'
theImages[21] = '/banner/banner019.JPG'
theImages[22] = '/banner/banner017.JPG'
theImages[23] = '/banner/banner016.JPG'
theImages[24] = '/banner/banner018.JPG'
theImages[25] = '/banner/banner015.JPG'
theImages[26] = '/banner/banner014.JPG'
theImages[27] = '/banner/banner013.JPG'
theImages[28] = '/banner/banner010.JPG'
theImages[29] = '/banner/banner011.JPG'
theImages[30] = '/banner/banner012.JPG'
theImages[31] = '/banner/banner009.JPG'
theImages[32] = '/banner/banner008.JPG'
theImages[33] = '/banner/banner007.JPG'
theImages[34] = '/banner/banner005.JPG'
theImages[35] = '/banner/banner006.JPG'
theImages[36] = '/banner/banner004.JPG'
theImages[37] = '/banner/banner002.JPG'
theImages[38] = '/banner/banner003.JPG'
theImages[39] = '/banner/banner001.JPG'
theImages[40] = '/banner/banner041.JPG'
theImages[41] = '/banner/banner042.JPG'
theImages[42] = '/banner/banner043.JPG'
theImages[43] = '/banner/banner044.JPG'
theImages[44] = '/banner/banner045.JPG'
theImages[45] = '/banner/banner046.JPG'

// do not edit anything below this line

var j = 0
var p = theImages.length;
var preBuffer = new Array()
for (i = 0; i < p; i++){
preBuffer[i] = new Image()
preBuffer[i].src = theImages[i]
}
var whichImage = Math.round(Math.random()*(p-1));
function showImage(){
document.write('<img src="'+theImages[whichImage]+'">');
}

// End -->
</script>


<script language="JavaScript">
// Courtesy of SimplytheBest.net - http://simplythebest.net/scripts/
function Submit()
{
document.myform.submit();
}
function Reset()
{
document.myform.name.value = "";
document.myform.email.value = "";
document.myform.contact_number.value = "";
document.myform.message.value = "";
}
</script>


<title><$BlogPageTitle$></title>
<style>
<!--
<MainOrArchivePage> 
span.fullpost {display:none;}
</MainOrArchivePage>
<ItemPage> 
span.fullpost {display:inline;} 
</ItemPage>
-->
</style>

<script defer="defer" id="snap_preview_anywhere" type="text/javascript" src="http://spa.snap.com/snap_preview_anywhere.js?ap=1&amp;key=98d88f4cd8936879e0f6373ca056e24f&amp;sb=1&amp;th=asphalt&amp;cl=0&amp;si=0&amp;oi=0&amp;domain=travelogue.digitalrebel.ws/"></script>
<script type="text/javascript" src="http://www.haloscan.com/load/dodongflores"> </script>
<script type="text/javascript" src="http://www.thefreedictionary.com/dict.js"></script>

<link href="/style/style.css" rel="stylesheet" type="text/css" media="screen" />
</head>

<body bgcolor="#070707" leftmargin="0" topmargin="0" marginwidth="0" marginheight="0" ondblclick="dictionary()">

<!-- NeoWORX visitor tracker ... DO NOT DELETE if you are using a NeoWORX tool -->
<script language="javascript" src="http://neocounter.neoworx-blog-tools.net/neocounter2/neoworx_tracker.php?user_id=84235&counter_id=84235">
</script>
<!-- NeoWORX visitor tracker ... DO NOT DELETE if you are using a NeoWORX tool -->

<table border="0" cellspacing="0" style="border-collapse: collapse" cellpadding="0">
<tr>
<td id="leftsidebar" valign="top">
<!-- Start Left SideBar -->

<script type="text/javascript"><!--
google_ad_client = "pub-4666122850568088";
/* 200x200, created 3/3/08 */
google_ad_slot = "1792826743";
google_ad_width = 200;
google_ad_height = 200;
//-->
</script>

<script type="text/javascript" src="http://pagead2.googlesyndication.com/pagead/show_ads.js"></script>



<h2 class="sidebar">Check Mail @ digitalrebel.ws</h2>
<form action="https://www.google.com/a/digitalrebel.ws/LoginAction" method="post" name="login">
<input type="hidden" name="at" value="null">
<input type="hidden" name="continue" value="http://mail.google.com/a/digitalrebel.ws/">
<input type="hidden" name="service" value="mail">
<table border="0" cellpadding="0" cellspacing="0" style="border-collapse: collapse">
<tr>
<td width="750" colspan="2">
<img border="0" src="/images/x.gif" width="17" height="13" align="top">Username:</td>
</tr>
<tr>
<td width="750" colspan="2">
<img border="0" src="/images/x.gif" width="17" height="13" align="top"><input type="text" name="userName" size="25" class="text" style="border:1px solid #666666; border-style: solid; border-top-color: #666666; border-left-color: #666666; border-bottom-color: #666666; border-right-color: #666666; background-color:#999999;" onMouseOver="this.focus();" onFocus="this.select();" /></td>
</tr>
<tr>
<td style="color: #444444; font-size: 0%; overflow: hidden;" align="right" dir="ltr" colspan="2"><strong>@digitalrebel.ws</strong></td>
</tr>
<tr>
<td width="750" colspan="2">
<img border="0" src="/images/x.gif" width="17" height="13" align="top">Password:</td>
</tr>
<tr>
<td width="750" colspan="2">
<img border="0" src="/images/x.gif" width="17" height="13" align="top"><input type="password" name="password" size="25" class="text" style="border:1px solid #666666; border-style: solid; border-top-color: #666666; border-left-color: #666666; border-bottom-color: #666666; border-right-color: #666666; background-color:#999999;" onMouseOver="this.focus();" onFocus="this.select();" /></td>
</tr>
<tr>
<td width="47">
<img border="0" src="/images/x.gif" width="17" height="13" align="top">&nbsp;</td>
<td width="703"><input type="checkbox" name="persistent" value="true" id="rem" checked /> Remember me on this <br />computer</td>
</tr>
<tr>
<td width="750" colspan="2">
<img border="0" src="/images/x.gif" width="25" height="13" align="top"><input type="submit" value="Sign In" style="font-family: Arial, Helvetica, sans-serif; font-size: 11px; color: #666666; background-color: #000000;" /></td>
</tr>
</table>
</form><br /><br />


<form action="http://www.google.com/translate" target="_blank">
<script type="text/javascript" language="javascript">
<!--
document.write ("<input name=u value="+location.href+" type=hidden>") ; 
// --></script>
&nbsp;Language translator<br />
&nbsp;<input value="+location.href+" name="u" type="hidden"/><input value="en" name="hl" type="hidden"/><input value="UTF8" name="ie" type="hidden"/><input value="" name="langpair" type="hidden"/><input onclick="this.form.langpair.value=this.value" title="French" value="en|fr" type="image" height="12" src="http://photos1.blogger.com/img/43/1633/320/13539949_e76af75976.jpg" width="17" name="langpair"/> <input onclick="this.form.langpair.value=this.value" title="German" value="en|de" type="image" height="12" src="http://photos1.blogger.com/img/43/1633/320/13539933_041ca1eda2.jpg" width="17" name="langpair"/> <input onclick="this.form.langpair.value=this.value" title="Italian" value="en|it" type="image" height="12" src="http://photos1.blogger.com/img/43/1633/320/13539953_0384ccecf9.jpg" width="17" name="langpair"/> <input onclick="this.form.langpair.value=this.value" title="Portuguese" value="en|pt" type="image" height="12" src="http://photos1.blogger.com/img/43/1633/320/13539966_0d09b410b5.jpg" width="17" name="langpair"/> <input onclick="this.form.langpair.value=this.value" title="Spanish" value="en|es" type="image" height="12" src="http://photos1.blogger.com/img/43/1633/320/13539946_2fabed0dbf.jpg" width="17" name="langpair"/> <input onclick="this.form.langpair.value=this.value" title="Japanese" value="en|ja" type="image" height="12" src="http://photos1.blogger.com/img/43/1633/320/13539955_925e6683c8.jpg" width="17" name="langpair"/> <input onclick="this.form.langpair.value=this.value" title="Korean" value="en|ko" type="image" height="12" src="http://photos1.blogger.com/img/43/1633/320/13539958_3c3b482c95.jpg" width="17" name="langpair"/> <input onclick="this.form.langpair.value=this.value" title="Chinese Simplified" value="en|zh-CN" type="image" height="12" src="http://photos1.blogger.com/img/43/1633/320/14324441_5ca5ce3423.jpg" width="17" name="langpair"/> <input onclick="this.form.langpair.value=this.value" title="Arabic" value="en|ar" type="image" height="12" src="http://photos1.blogger.com/blogger/3709/485/1600/arabic-flag.gif" width="17" name="langpair2"/></form>


&nbsp;&nbsp;<select name="archivemenu" onchange="document.location.href=this.options[this.selectedIndex].value;" style="background-color:#000000; background-image:url(/images/bg1.gif); color:#666666">

<option selected> - Click for blog Archives - </option>

<!--Reverse Sort Archive Menu Blogger Hack created by Glenn Davey from ROVEBERG.COM -->

<script type="text/javascript">

var archives = new Array();

<BloggerArchives>
archives[archives.length] = new Array('<$BlogArchiveURL$>', '<$BlogArchiveName$>');
</BloggerArchives>

for (var i=archives.length-1;i>=0;i--) {
document.write('<option value=\"' + archives[i][0] + '\">' + archives[i][1] + '</option>');
}

</script>
</select>



<h2 class="sidebar"><$I18NPreviousPosts$></h2>
<ul id="recently" type="square">
<BloggerPreviousItems>
<li><a href="<$BlogItemPermalinkURL$>"><$BlogPreviousItemTitle$></a></li>
</BloggerPreviousItems>
<li><a href="http://travelogue.digitalrebel.ws/2007/02/websiteisgone.html">My Old Website Is Gone!</a></li>
</ul>

<MainOrArchivePage>
<h2 class="sidebar"><$I18NArchives$></h2>
<ul type="square">
<BloggerArchives>
<li><a href="<$BlogArchiveURL$>"><$BlogArchiveName$></a></li>
</BloggerArchives>
</ul>
</MainOrArchivePage>


<MainPage>
<h2 class="sidebar">Recent Comments</h2>
<div id="haloscan-recent" class="haloscan-recent">
<ul type="square" class="hsrcontent">
<Blogger>
<BlogItemCommentsEnabled>
<BlogItemComments>

<li class="hsritem"><span class="hsrname"><$BlogCommentAuthor$></span> // 
<a href="<$BlogCommentPermalinkURL$>">
<$BlogCommentDateTime$></a></li>

</BlogItemComments>
</BlogItemCommentsEnabled>
</Blogger>
</ul>
</div>
<script type="text/javascript" src="http://www.haloscan.com/members/recent/dodongflores/"> </script>
</MainPage>

<h2 class="sidebar">Shout iT!</h2>
<object name="boardview" width="200" height="300" data="/shoutit" type="text/html"></object><br /><br />


<!-- BEGIN Travel Photography Webring code --><img src="/images/x.gif" width="6" height="15" /><table><tr><td><table cellpadding="5" border="2"><tr><td colspan="3"><p style="text-align: center; margin: 0">
<a href="http://www.photography-webrings.net/" target="_top" style="color: #666666; font-style:normal; font-variant:normal; font-weight:bold; font-family:arial, helvetica, sans-serif; text-decoration:none">Travel Photography Webring</a></p></td></tr><tr><td><p style="text-align: center; margin: 0">
<a href="http://www.photography-webrings.net/cgi-bin/photorings/next.pl?ringid=travel;siteid=dodongflores" target="_top" style="color: #070707; font-style:normal; font-variant:normal; font-family:arial, helvetica, sans-serif; text-decoration:none">Next</a></p></td><td><p style="text-align: center; margin: 0">
<a href="http://www.photography-webrings.net/cgi-bin/photorings/rand.pl?ringid=travel;siteid=dodongflores" target="_top" style="color: #070707; font-style:normal; font-variant:normal; font-family:arial, helvetica, sans-serif; text-decoration:none">Random</a></p></td><td><p style="text-align: center; margin: 0">
<a href="http://www.photography-webrings.net/cgi-bin/photorings/list.pl?ringid=travel;siteid=dodongflores" target="_top" style="color: #070707; font-style:normal; font-variant:normal; font-family:arial, helvetica, sans-serif; text-decoration:none">List</a></p></td></tr></table></td></tr></table><!-- END Travel Photography Webring code -->

<div align="center"><br /><br /><a target="_blank" href="http://www2.blogger.com/start"><img border="0" src="/images/bloggerbutton8.gif" /></a></div>

<!-- End Left SideBar -->
</td>
<td id="maincolumn" valign="top">

<table border="0" cellspacing="0" style="border-collapse: collapse" cellpadding="0" id="header">
<tr>
<td style="background-image:url('http://images.dodongflores.multiply.com/image/5/photos/43/orig/4/banner029.JPG?et=UlhOTY5AQSz5p2JiFaDVJg')"><script type="text/javascript" language="javascript">

<!-- This script and many more are available free online at -->
<!-- The JavaScript Source!! http://javascript.internet.com -->

<!-- Begin
showImage();
// End -->
</script></td>
</tr>
<tr>
<td class="mainmenu">
<img border="0" src="/images/x.gif" width="10" height="10" align="absmiddle" id="a1" /> <a onMouseOver="a1.src='/images/roundball.gif'" onMouseOut="a1.src='/images/x.gif'" title="Fundamentals" href="/labels/fundamentals.html">Fundamentals</a>
<img border="0" src="/images/x.gif" width="10" height="10" align="absmiddle" id="a2" /> <a onMouseOver="a2.src='/images/roundball.gif'" onMouseOut="a2.src='/images/x.gif'" title="Travelogue" href="/labels/travelogue.html">Travelogue</a>
<img border="0" src="/images/x.gif" width="10" height="10" align="absmiddle" id="a3" /> <a onMouseOver="a3.src='/images/roundball.gif'" onMouseOut="a3.src='/images/x.gif'" title="News &amp;amp; Advisories" href="/labels/news.html">Bulletin</a>
<img border="0" src="/images/x.gif" width="10" height="10" align="absmiddle" id="a4" /> <a onMouseOver="a4.src='/images/roundball.gif'" onMouseOut="a4.src='/images/x.gif'" title="Travel Checklist" href="http://www.gofox.com/tools/traveltools.php?pid=9313085&tool=checklist">Travel Checklist</a>
<img border="0" src="/images/x.gif" width="10" height="10" align="absmiddle" id="a5" /> <a onMouseOver="a5.src='/images/roundball.gif'" onMouseOut="a5.src='/images/x.gif'" href="/labels/photoblogging.html">Photoblog</a>
<img border="0" src="/images/x.gif" width="10" height="10" align="absmiddle" id="a6" /> <a onMouseOver="a6.src='/images/roundball.gif'" onMouseOut="a6.src='/images/x.gif'" title="Link &amp; Stats" href="/2007/12/links.html">Link &amp; Stats</a> 
<img border="0" src="/images/x.gif" width="10" height="10" align="absmiddle" id="a7" /> <a onMouseOver="a7.src='/images/roundball.gif'" onMouseOut="a7.src='/images/x.gif'" title="Home" href="/2008/03/contact.html">Contact</a>
</td>
</tr>
</table>



<!-- Start Main Column -->

<!--#include virtual="/randomqoute.html" -->

<Blogger>

<h1><BlogItemTitle> <BlogItemUrl><a href="<$BlogItemUrl$>" title="external link"></BlogItemUrl> <$BlogItemTitle$> <BlogItemUrl></a></BlogItemUrl> </BlogItemTitle></h1>

<!-- SiteSearch Google -->
<div class="googlesearch">
<form method="get" action="http://www.google.com.ph/custom" target="_top">
<table border="0" bgcolor="#000000">
<tr><td nowrap="nowrap" valign="top" align="left" height="32">
<img border="0" src="/images/x.gif" width="30" height="32"></img>
<a href="http://www.google.com/"><img name="show-img" src="http://www.google.com/logos/Logo_25blk.gif" border="0" alt="Google" align="middle" width="75" height="32"></img></a>
</td>
<td nowrap="nowrap">
<input type="hidden" name="domains" value="travelogue.digitalrebel.ws"></input>
<label for="sbi" style="display: none">Enter your search terms</label>
<input type="text" name="q" size="31" maxlength="255" value="" id="sbi" class="search"></input>
<label for="sbb" style="display: none">Submit search form</label>
<input type="Image" src="/images/searchbutton_black.jpg" align="absmiddle" name="sa" value="Search" id="sbb" />
</td></tr>
<tr>
<td>&nbsp;</td>
<td nowrap="nowrap">
<table>
<tr>
<td>
<input type="radio" name="sitesearch" value="" id="ss0"></input>
<label for="ss0" title="Search the Web">Web</label></td>
<td>
<input type="radio" name="sitesearch" value="travelogue.digitalrebel.ws" checked id="ss1"></input>
<label for="ss1" title="Search travelogue.digitalrebel.ws">dodongflores' Travelogue</label></td>
</tr>
</table>
<input type="hidden" name="client" value="pub-4666122850568088"></input>
<input type="hidden" name="forid" value="1"></input>
<input type="hidden" name="channel" value="7966300115"></input>
<input type="hidden" name="ie" value="ISO-8859-1"></input>
<input type="hidden" name="oe" value="ISO-8859-1"></input>
<input type="hidden" name="safe" value="active"></input>
<input type="hidden" name="cof" value="GALT:#ffffff;GL:1;DIV:#000000;VLC:ffffff;AH:center;BGC:000000;LBGC:000000;ALC:666666;LC:666666;T:666666;GFNT:ffffff;GIMP:ffffff;LH:50;LW:300;L:http://travelogue.digitalrebel.ws//images/custom_search_logo.jpg;S:http://travelogue.digitalrebel.ws/?hl=en;FORID:1"></input>
<input type="hidden" name="hl" value="en"></input>
</td></tr></table>
</form>
</div>
<!-- SiteSearch Google --> 

<BlogDateHeader><h2 class="dateheader"><$BlogDateHeaderDate$></h2></BlogDateHeader>

<$BlogItemBody$> <MainOrArchivePage><p><img border="0" src="/images/x.gif" width="14" height="11" align="absmiddle" id="a8" /> <blink><a onMouseOver="a8.src='/images/arrow-read_entry.gif'" onMouseOut="a8.src='/images/x.gif'" href="<$BlogItemPermalinkURL$>">Read/View full entry here&gt;&gt;&gt;</a></blink></p></MainOrArchivePage>


<div class="ads"><!--#include virtual="/alternate_ad.html" --></div>

<p>posted by <a href="http://images.marexflores.multiply.com/image/5/photos/1/orig/3/105_2850.JPG?et=SVGU1FsQ8W1Hx3pBwQLUbw"><$BlogItemAuthorNickname$></a> @ <$BlogItemDateTime$> | <a href="<$BlogItemPermalinkUrl$>" title="permanent link">Permalink</a> | <BlogItemCommentsEnabled> <a class="comment-link" href="<$BlogItemCommentCreate$>" <$BlogItemCommentFormOnclick$>><$BlogItemCommentCount$> comments</a> from: 
<script type="text/javascript">
if (<$BlogItemCommentCount$> == 0) 
document.write("(nobody commented yet)");
</script> 
<BlogItemComments>
<$BlogCommentAuthor$>, 
</BlogItemComments>
</BlogItemCommentsEnabled> | <$BlogItemControl$>
</p>
<hr />
<!-- comments start here -->
<ItemPage> <BlogItemCommentsEnabled>
<a name="comments" id="comments"></a>
<p><$BlogItemCommentCount$> Comments:</p>
<ol>
<BlogItemComments>
<li id="c<$BlogCommentNumber$>"><a name="c<$BlogCommentNumber$>" id="c<$BlogCommentNumber$>"></a>
At <a href="#c<$BlogCommentNumber$>" title="comment permalink"><$BlogCommentDateTime$></a>, <$BlogCommentAuthor$> said&hellip;<br />
<$BlogCommentBody$> <$BlogCommentDeleteIcon$>
</li>
</BlogItemComments>
</ol>
<p><$BlogItemCreate$> | Please use HaloScan below for commenting if you don't have a Google/Blogger account.</p>


<div class="ads">
<!--BEGIN BE FREE TAG (c) COPYRIGHT 1997-2000 Be Free, Inc All right reserved. -->
<script language="JavaScript" src="http://service.bfast.com/bfast/script?bfmid=37919189&siteid=41454086&bfpage=geeky_gear_horz">
</script><!-- END BE FREE TAG -->
</div>


<p><script type="text/javascript" src="http://www.haloscan.com/comments/dodongflores/<$BlogItemNumber$>/?m=1" /></p>
<p><a href="javascript:HaloScan('<$BlogItemNumber$>');" target="_self"><script type="text/javascript">postCount('<$BlogItemNumber$>'); </script></a> </p> <p><a href="javascript:HaloScanTB('<$BlogItemNumber$>');" target="_self"><script type="text/javascript">postCountTB('<$BlogItemNumber$>'); </script></a> | <img border="0" src="/images/x.gif" width="14" height="11" align="absmiddle" id="a9" /><a onMouseOver="a9.src='/images/arrow-read_entry.gif'" onMouseOut="a9.src='/images/x.gif'" href="<$BlogURL$>">Home</a> </p>
<hr />
</BlogItemCommentsEnabled>
</ItemPage>
<!-- comments end here -->
</Blogger>

<div class="ads">
<script type="text/javascript"><!--
google_ad_client = "pub-4666122850568088";
google_alternate_ad_url = "http://travelogue.digitalrebel.ws/alternate_ad.html";
google_ad_width = 468;
google_ad_height = 60;
google_ad_format = "468x60_as";
google_ad_type = "text_image";
//2007-02-02: TopLevelChannel
google_ad_channel = "5128410418";
google_color_border = "000000";
google_color_bg = "070707";
google_color_link = "ffffff";
google_color_text = "666666";
google_color_url = "ffffff";
//--></script>
<script type="text/javascript"
src="http://pagead2.googlesyndication.com/pagead/show_ads.js">
</script>
</div> 

<!-- End Main Column -->
</td>
<td id="right" valign="top">
<!-- Start Right Sidebar -->

<script type="text/javascript"><!--
google_ad_client = "pub-4666122850568088";
/* 160x600, created 3/3/08 */
google_ad_slot = "7699360290";
google_ad_width = 160;
google_ad_height = 600;
//-->
</script>
<script type="text/javascript"
src="http://pagead2.googlesyndication.com/pagead/show_ads.js">
</script> 

<div id="profile-container">
<h2 class="sidebar">This Site</h2> 
<div class="description"><$BlogDescription$></div> 

<!-- #Start About Me --> 
<div id="profile-container">
<h2 class="sidebar">The Author</h2>
<div class="sidebar">
<a href="<$BlogOwnerProfileUrl$>">
<img src="<$BlogOwnerPhotoUrl$>" /></a>
</div>
<div class="sidebar">
<strong>Name:</strong> <$BlogOwnerFullName$>
</div>
<div class="sidebar">
<$BlogOwnerAboutMe$>
</div>
<div class="sidebar">
See my <strong>Blogger&reg; Profile</strong> <a href="<$BlogOwnerProfileUrl$>">here</a>.
</div>
</div>
<!-- #End About Me -->

<!-- Start of Flickr Badge -->
<br />
<br />
<div align=center>
<style type="text/css">
.zg_div {margin:0px 5px 5px 0px; width:117px;}
.zg_div_inner { color:#666666; text-align:center; font-family:arial, helvetica; font-size:11px;}
.zg_div a, .zg_div a:hover, .zg_div a:visited {color:#666666; background:inherit !important; text-decoration:none !important;}
</style>
<script type="text/javascript">
zg_insert_badge = function() {
var zg_bg_color = 'ffffff';
var zgi_url = 'http://www.flickr.com/apps/badge/badge_iframe.gne?zg_bg_color='+zg_bg_color+'&zg_person_id=94706726%40N00';
document.write('<iframe style="background-color:#'+zg_bg_color+'; border-color:#'+zg_bg_color+'; border:none;" width="113" height="151" frameborder="0" scrolling="no" src="'+zgi_url+'" title="Flickr Badge"><\/iframe>');
if (document.getElementById) document.write('<div id="zg_whatlink"><a href="http://www.flickr.com/badge_new.gne" style="color:#666666;" onclick="zg_toggleWhat(); return false;">what is this?<\/a><\/div>');
}
zg_toggleWhat = function() {
document.getElementById('zg_whatdiv').style.display = (document.getElementById('zg_whatdiv').style.display != 'none') ? 'none' : 'block';
document.getElementById('zg_whatlink').style.display = (document.getElementById('zg_whatdiv').style.display != 'none') ? 'none' : 'block';
return false;
}
</script>
<div align=center class="zg_div"><div class="zg_div_inner"><a href="http://www.flickr.com">www.<strong style="color:#3993ff">flick<span style="color:#ff1c92">r</span></strong>.com</a><br>
<script type="text/javascript">zg_insert_badge();</script>
<div id="zg_whatdiv">This is a Flickr badge showing public photos from <a href="http://www.flickr.com/photos/94706726@N00">dodongflores</a>. Make your own badge <a href="http://www.flickr.com/badge_new.gne">here</a>.</div>
<script type="text/javascript">if (document.getElementById) document.getElementById('zg_whatdiv').style.display = 'none';</script>
</div>
</div>
</div>
<!-- End of Flickr Badge -->


<IMG SRC="http://service.bfast.com/bfast/serve?bfmid=37919189&siteid=41454086&bfpid=H-682A-SL&bfmtype=3" BORDER="0" WIDTH="1" HEIGHT="1" NOSAVE ><A HREF="http://service.bfast.com/bfast/click?bfmid=37919189&siteid=41454086&bfpid=H-682A-SL&bfmtype=3" TARGET="_top"><IMG SRC="http://www.geeks.com/images/100x100/con-h-682a-sl-unit.gif" BORDER="0" ALIGN="center" ALT="Mini Cooler/Warmer Refrierator" ><BR>Mini Cooler/Warmer Refrigerator</A>


<div id="eXTReMe" align="center"><a href="http://extremetracking.com/open?login=300d">
<img src="http://t1.extreme-dm.com/i.gif" style="border: 0;"
height="38" width="41" id="EXim" alt="eXTReMe Tracker" /></a>
<script type="text/javascript"><!--
var EXlogin='300d' // Login
var EXvsrv='s10' // VServer
EXs=screen;EXw=EXs.width;navigator.appName!="Netscape"?
EXb=EXs.colorDepth:EXb=EXs.pixelDepth;
navigator.javaEnabled()==1?EXjv="y":EXjv="n";
EXd=document;EXw?"":EXw="na";EXb?"":EXb="na";
EXd.write("<img src=http://e1.extreme-dm.com",
"/"+EXvsrv+".g?login="+EXlogin+"&amp;",
"jv="+EXjv+"&amp;j=y&amp;srw="+EXw+"&amp;srb="+EXb+"&amp;",
"l="+escape(EXd.referrer)+" height=1 width=1>");//-->
</script><noscript>
<div id="neXTReMe"><img height="1" width="1" alt=""
src="http://e1.extreme-dm.com/s10.g?login=300d&amp;j=n&amp;jv=n" />
</div></noscript></div>


<!-- End Right Sidebar -->
</td>
</tr>
<tr>
<td>&nbsp;</td>
<td class="footer" valign="top"><!--#include virtual="/footer.htm" --></td>
<td>&nbsp;</td>
</tr>
</table>



<table border="0" cellspacing="0" style="border-collapse: collapse" width="560" cellpadding="0" id="pseudo-header" background="/images/x.gif">
<tr>
<td width="144" height="160" valign="top"><a target="_blank" href="http://www.wunderground.com/global/stations/98429.html">
<img src="http://banners.wunderground.com//banner/infoboxtr_both/language/www/global/stations/98429.gif" alt="Click for Manila, Philippines Forecast" border=0 width="144" height="108"></a><br />
Today is <!--#config timefmt="%A %B %d, %Y" --><!--#echo var="DATE_LOCAL" --> </td>
<!-- Google CSE Search Box Begins -->
<form action="http://travelogue.digitalrebel.ws/2006/11/search-engine-result.html" id="searchbox_014121280978418639301:eqxc-i5i2w0">
<td valign="top" align=right">
<input type="hidden" name="cx" value="014121280978418639301:eqxc-i5i2w0" />
<input type="hidden" name="cof" value="FORID:11" />
<img src="/images/x.gif" width="270" height="1" /><input type="text" name="q" class="cse_Local" size="16" maxlength="20" value="search..." onfocus="this.value='';" /> 
<input type="submit" name="sa" value="Go" onclick="if(document.searchbox_014121280978418639301:eqxc-i5i2w0.q.value=='' ||
document.searchbox_014121280978418639301:eqxc-i5i2w0.q.value=='search...'){alert('Please enter something to search for');return false;}" 
style="font-family: Arial, Helvetica, sans-serif; font-size: 11px; color: #666666; background-color: #000000;" />
<div class="blogTitle"><a href="http://travelogue.digitalrebel.ws/?hl=en">...a travelogue &amp; digital rebel Website...</a></div>
</td>
</form>
<script type="text/javascript" src="http://www.google.com/coop/cse/brand?form=searchbox_014121280978418639301%3Aeqxc-i5i2w0&lang=fil"></script>
<!-- Google CSE Search Box Ends -->
</tr>
</table> 



</body>

</html>

The CSS:

a:active { color: #666666; text-decoration: none }
a:visited { color: #666666; text-decoration: none }
a:link { color: #666666; text-decoration: none }
a:hover { text-decoration: overline underline }
body { font-family: Arial, Verdana, Helvetica, Geneva, Swiss, SunSans-Regular; font-size: 10px; scrollbar-face-color: #666666; scrollbar-highlight-color: #000000; scrollbar-3dlight-color: #666666; scrollbar-darkshadow-color: #000000; scrollbar-shadow-color: white;scrollbar-arrow-color: 000000; scrollbar-track-color: #000000 }
a img { border-width:0 }
hr { border: 1px dotted #666666; margin-right: 30px; margin-left: 30px }
td, tr { font-family: Arial; font-size: 11px; color: #666666}
h1 { font-family: Arial; font-size: 13pt; color: #666666; text-transform: uppercase; margin-left:30px; margin-right:30px; margin-top:15px; margin-bottom:10px}
h2 { margin-right: 30px; margin-left: 30px; font-size: 10pt; font-family: Arial; border-bottom:1px dotted #666666; font-weight: bold; padding-left:0; padding-right:0; padding-top:10; padding-bottom:10}
h3 { }
ul, li { margin-right: 7px; margin-left: 12px; padding:0; width: 189; text-align:justify}
p { margin-right: 30px; margin-left: 30px; text-align:justify }
pre { font-family: Courier New; font-size: 9pt; text-align: left; color: #666666; margin-left: 0; margin-right: 0 }
p.introduction .first-letter { font-size : 200%; font-weight : bold; float : left; width : 1em; color : #666666;}
.sidebar h2 { margin-right: 7px; margin-left: 7px; text-align:justify }
.sidebar { margin-right: 7px; margin-left: 7px; text-align:justify }
.blogTitle { font-family: Tahoma; font-size: 14pt; text-decoration: none; text-align: right; margin-right: 3}
.blogTitle a:active { text-decoration: none}
.blogTitle a:visited { text-decoration: none}
.blogTitle a:link { text-decoration: none; text-align}
.blogTitle a:hover { text-decoration: none; color:#000000}
.description { margin-right: 7px; margin-left: 7px; text-align:justify }
.mainmenu { color: #666666; font-family: Arial; text-decoration: none; font-weight: bold; font-size:11px; text-align:center; background:url('../images/bg_button.jpg') }
.dateheader { margin:5px 30px; font-size: 10pt; font-family: Arial; border-bottom:1px dotted #666666; font-weight: bold; padding-left:5; padding-right:5; padding-top:0; padding-bottom:10; text-align:right}
.mainmenu a:link { font-family: Arial; font-size: 11px; text-decoration: none; color: #666666; font-weight: bold }
.mainmenu a:visited { font-family: Arial; font-size: 11px; text-decoration: none; color: #666666; font-weight: bold }
.mainmenu a:hover { font-family: Arial; font-size: 11px; text-decoration: none; color: #000000; font-weight: bold }
.ads {text-align: center}
.footer {font-size: 9px; color: #FFFFFF; text-align: center}
.footer a:active {font-size: 9px; font-family: Arial; color: #FFFFFF; text-decoration: none}
.footer a:visited {font-size: 9px; font-family: Arial; color: #FFFFFF; text-decoration: none}
.footer a:link {font-size: 9px; font-family: Arial; color: #FFFFFF; text-decoration: none}
.footer a:hover {font-variant: small-caps}
.exif {font-size: 9px; color: #666666; text-align: justify}
.text { font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 9px; font-style: normal; color: #000000; text-decoration: none}
.googlecse { position:absolute; top:120px; left:800px; z-index:18}
.cse_Local { font-family: Arial, Helvetica, sans-serif; font-size: 11px; color: #666666; background-color: #000000; width: 100px;}
input.search { width: 222px; height: 15px; border: 1px dashed #ffffff; background: #070707 url('../images/bg2.gif') no-repeat; padding: 3px; color: #616161 }
input.submit { width: 58px; height: 22px; font-weight: bold; border: none; background: #000000; padding: 3px; color: #666666; }
input.button { background: #FFFFF4; color: #808080; border-right: 1px solid #ccc; border-bottom: 1px solid #ccc;}
#pseudo-header { position:absolute; top:0px; left:200px; width:560px; height:160px; z-index:17 }
#mainmenu { background:url('../images/bg_button.jpg') }
#maincolumn { background-color:#000000; width:560px }
#leftsidebar { background-position: 0% 0%; width:200px; padding-left:0; padding-right:0; padding-top:0; background-image:url('../images/bg_leftsidebar.jpg'); background-repeat:repeat; background-attachment:scroll }
#right { background-position: 0% 0%; width:160px; padding-left:0; padding-right:0; padding-top:0 }
#profile-container { background-position: 0% 0%; width:160px; padding-left:0; padding-right:0; padding-top:0 }
#body_table { position: relative; width: 500; text-align: justify; margin-left: 30; margin-right: 30; float:center; left:30 }

For the new layout, I avoided true links within the domain so I can minimize the characters to be used. That way, I won't pile up "unnecessary" characters in the source code.

Even for every blog entries I'm writing and will be written in the future, I see to it I only used minimal HTML tags, so I'm now using a "post template" that is to be controlled by style cascading style sheet. I see to it everything then should conform with the new layout. Please see example below:

<h2>Jet Airways launches Interactive Voice Response based Payment and Ticketing Service</h2>

<p><a href="http://www.asiatraveltips.com/news07/171-JetAirways.shtml" target="_blank">http://www.asiatraveltips.com/news07/171-JetAirways.shtml</a></p>
<p class="introduction"><span class="first-letter">A</span>s part of a customer relationship development programme, India's Jet Airways, has launched an Interactive Voice Response (IVR) based payment and ticketing service.
<p>This innovative service has been launched through Jet Airways 24x7 call centres wherein customers can now book and pay for their E-Tickets over an exclusively customized and secure IVR system. This latest service will allow customers to complete their reservation with their credit cards through a secure gateway and instantly receive their E-tickets via email, subject to certain terms and conditions.
<span class="fullpost">
<p>Owing to its self driven features, the IVR system is capable of handling customers credit card details and processing independently. On confirmation by the customer, the call is transferred to the IVR system, following which the customer has to enter credit card details. Once the verification is complete, the customer will get an automated response and the e-ticket is issued accordingly.
<p>Information exchanged through the IVR system is treated securely and protected by Verisign and Thawte, by using the internationally accepted and industry standard powerful encryption technology. To further enhance credit card data security, credit card details are masked in the PNR / reservation record and are not accessible to the call centre staff.
<p>The IVR system is capable of handling multiple passengers and multiple sectors which can be booked in a single PNR. In the first phase, INR or US$ equivalent INR fares can be booked and ticketed through the IVR system and will be available for all E-ticket eligible sectors within India. This service will be extended for other fares and international sectors in a phased manner and will also allow ticket delivery on cash payment in the future.
<p>Booking and payment through IVR can be made up to two hours prior to the departure time of a flight and ticketing can be done for bookings made at Jet Airways offices in India only. Bookings done by travel agents cannot be used for IVR ticketing.
<p>Tickets purchased through the IVR system can be cancelled and refunded through the call centre. Customers will have to visit the nearest Jet Airways office for any changes that require part refund or additional collections.
<p>As part of another e-ticketing initiative, Jet Airways has also introduced an innovative “Pay Online” service whereby the service allows the passengers to pay for and issue e-ticket against an already created booking. The “Pay Online” service is offered to passengers holding a valid booking created at Jet Airways offices across India only. Transactions can be done in INR equivalent of US$ and this service is also open to passengers wishing to pay online using their credit card. The eligibility criteria and exceptions are similar to those of IVR ticketing.
<p>The IVR payment and ticketing service is available for customers calling the following numbers in India:<br />
022 39893333 - Mumbai<br />
011 39893333 - Delhi<br />
080 39893333 - Bangalore<br />
040 39893333 - Hyderabad<br />
044 39893333 - Chennai<br />
033 39893333 - Kolkata<br />
<p><font color=red>See other recent news regarding</font>: <a target=_blank href=http://www.asiatraveltips.com/cgi-bin/search/search.pl?Terms=Airlines>Airlines</a>, <a target=_blank href=http://www.asiatraveltips.com/cgi-bin/search/search.pl?Terms=%22Jet+Airways%22>Jet Airways</a> 
<br clear="all" />
<div align="right"><a href="http://getfirefox.com/" title="Get Firefox - Take Back the Web"><img src="http://www.mozilla.org/products/firefox/buttons/getfirefox_large.png" border="0" alt="Get Firefox" /></a></div>
</span>

Redesigning a website is a very tedious task. At any rate, mine is almost complete, and this blog entry will confirm whether there are still coding glitches that need to be corrected. Custom web site template is not a joke to get started with. But for those who wanted it easier, there are always free web templates proliferating over the Internet extended by those generous web designers. As for me, a DYI web template is worth the challenge. And this black, three-column template you're seeing now surely will have to stay here a little longer.

Update: June 27, 2009 3:35pm

I'm now able to convert my template from table to div using CSS. I'm still in the process of reassigning widgets. Stay tune for more updates.

HaloScan Comment Form

Labels: photoblogging

published by dodong flores 도동 플로오리스 @ 3:52:00 PM • Permalink • Links to this post • 7 comments from: spirithands, dodong flores, Lawstude, dodong flores, Marex Flores, caryn, dodong flores, •

7 Comments:

At 2:09 PM, March 11, 2008, spirithands said…
Hey Dodong the page loads much quicker and easier to look at. However the text on the left sidebar is difficult to read.
At 7:10 PM, March 11, 2008, dodong flores said…
Hello, Rob. Thank you very much. I agree with you. I still have to change the background in the sidebar. It's a JPG file that can be changed easily. Thanx for the comment.
At 5:37 PM, March 13, 2008, Lawstude said…
it is indeed more reader friendly. i kinda miss the yellow background thou but black is definitely better.
At 8:52 AM, March 14, 2008, dodong flores said…
Hi, Lawstude. Thanx for the appreciation. I also missed the old layout but leaving it behind now is part of the progress...
At 3:58 PM, March 17, 2008, Marex Flores said…
Article printed from SiteProNews: http://www.sitepronews.com
HTML version available at: http://www.sitepronews.com/archives.html

Ten Hints for Better Websites
by Daniel Clarke �Copyright 2004

Here's a checklist of 10 ways to optimize your website for peak
performance:

1. Load Time

It's probably the most important reason people avoid certain
web sites and for sure one of the main reasons for lost sales.

The generally accepted maximum time for a page to load is around
10 seconds. Here is a free service that tells you how long your
web page takes to load:

NETMECHANIC
http://www.netmechanic.com/cobrands/FutureQuest/load_check.htm

Your pages should be no more than about 25Kb in size. To
calculate the size of your web page, highlight the HTML
document, then click on 'File' and 'Properties' and notice
the file size. Then do the same for any graphics you have on
that page. Then add those numbers together to get the size of
that page.

2. Browser Compatibility

You may be surprised at how your web pages are displayed in
different web browsers or different web browser versions. It's
possible that your web pages may not even be visible in some web
browsers. Display differences can be the result of how various
web browsers (Internet Explorer, Netscape, Mosaic), or versions
thereof, interpret HTML code or handle HTML errors, screen
resolution, and the computer platform used.

You need to look at your website through other people's browsers.
I do this regularly and, on occasion, I've been shocked with what
I saw! Try this, it'll help:

ANYBROWSER
http://www.anybrowser.com

3. Browser Safe Colors

The Browser-Safe Palette is the actual palette that Mosaic,
Netscape, and Internet Explorer use within their browsers.
The palettes used by these browsers are slightly different
on Macs and PCs. This palette is based on math, not beauty.

The Browser-Safe Palette only contains 216 colors out of a
possible 256. That is because the remaining 40 colors vary
on Macs and PCs. By eliminating the 40 variable colors, this
palette is optimized for cross-platform use.

Here's a good palette of web safe colors:

WEB-SOURCE SAFE COLORS
http://www.web-source.net/216_color_chart.htm

4. Broken Links

About 4-5% of all links on the Internet are broken. A site that
contains broken links gives a bad impression to visitors and is
a frequent cause of lost visitors. Also, the major Search Engines
and Directories may not list your page if it has broken links or
missing images.

You can check your links with these free link validators:

LINK SCAN
http://www.elsop.com/linkscan/quickcheck.html

NET MECHANIC
http://www.netmechanic.com/maintain.htm

5. Meta Tags

What are meta tags? They are information inserted into the
"head" area of your web pages. Meta tags, for example, can tell
a browser what "character set" to use or whether a web page has
self-rated itself in terms of adult content.

The meta keyword tag is also useful as a way to help your page
come up for synonyms or unusual words that don't appear on the
page itself.

The Keyword Tag should contain about 5 to 10 keywords that
appear on your page. Never include words that do not appear
on that page - in some Search Engines your website will be
penalized for this. Do not repeat the same keyword - this is
called 'keyword stuffing' and is also frowned upon by the
Search Engines.

Separate your keywords with spaces (not commas). This allows
the Search Engines to combine your keywords into phrases, for
people who do 'phrase searching'.

Here are some programs that will generate your Meta Tags for you:

META MEDIC
http://www.northernwebs.com/set/setsimjr.html

MULTI-META-MAKER
http://www.multimeta.com/tools/multimetamaker.html

6. ALT Tags

What are ALT tags and why should I use them? You have a web
site. Your designer did an excellent job and it looks great.
You have plenty of images, including one containing your
business name, logo and slogan.

Though your site may look fine, it's not optimized to score
high with search engines. Since search engines don't index
images, they won't index any text your web site presents in
image format -- in this case the above-mentioned business
name and slogan. To fix this problem, there are ALT tags,
which are basically image descriptions.

Always add ALT tags to your images to make sure search
engines recognize all the content on your site. ALT tags
filled with keywords can also be used to boost your keyword
frequency and help you achieve better rankings.

Note: ALT tags also make your site more accessible to visually
impaired people using text readers. That's because text readers
can't read images, but can detect text in ALT tags.

7. HTML Optimizer

Another way to make your page load faster is to compress (or
optimize) your HTML code. An HTML Optimizer removes all blank
spaces in your HTML code and also removes certain unnecessary
tags.

The result is shorter downloading / uploading time. Pages
will appear in a client's Internet browser in exactly the same
way, but they will be about 20% smaller.

A word of caution: in most HTML Optimizers you will find an
'Options' menu that tells the program to ignore certain parts
of your code. Make sure your Optimizer does not compress embedded
script tags - if they get compressed, the script will usually not
work.

ADVANCED HTML OPTIMIZER
http://www.pcbit.com/htmlopt/?htmlopt

8. HTML Validator

Validating your HTML will help ensure that it displays properly
on all browsers. Most of validator tools read your web pages
directly from your site.

Always check the validity of your HTML. Some Search Engines give
lower rankings to pages that have poor quality HTML (such as
incorrect nesting of elements).

Here are some free online validators:

HTML HELP
http://www.htmlhelp.org/tools/validator/

BOBBY
http://www.cast.org/bobby/

WATSON
http://watson.addy.com/

9. GIF (or JPEG) Cruncher

Shrinking the size of your images is one of the best ways to get
a faster-loading web page. You can usually reduce a GIF or JPEG
image by 40% to 50% without losing any significant definition or
sharpness.

SPINWAVE
http://www.spinwave.com/crunchers.html

10. WIDTH, HEIGHT and BORDER Tags

The WIDTH, HEIGHT and BORDER attributes are essential for each
image that you have on your website. When you hyperlink an
image, always make sure that the BORDER attribute is set to zero
(BORDER=0). If you don't do this, your hyperlinked image will
have an ugly blue border around it.

The WIDTH and HEIGHT attributes allow your page to load faster,
since the browser knows in advance how much space the image
requires. To find out the width and height of any image, just
double click on the image file. This will automatically open
'Microsoft Photo Editor' - your image will appear, with the
width and height of your image (in pixels) displayed on the tool
bar.

================================================================
Daniel Clarke is the webmaster of TorontoBizGuide.ca .He wants
to share with other webmasters how to build a successful online
business. Subscribe for your free Newsletter at:
http://www.torontobizguide.ca
================================================================

http://www.sitepronews.com/archives/2004/jan/28prt.html.
At 12:21 PM, August 13, 2008, caryn said…
hi dodong! i love this shot. i didn't know the police or the coast guard had nice boats like that ;-)
At 1:13 PM, August 14, 2008, dodong flores said…
Hi, Caryn. Yes, they do have :)

Links to this post:

<$BlogBacklinkTitle$>: <$BlogBacklinkSnippet$>
<$I18NPostedByBacklinkAuthor$> @ <$BlogBacklinkDateTime$>

Create a Link | Print this page | Home

: Name: dodong flores 도동 플로오리스; Location:

View: Blogger® Google Amazon.com

This site underwent countless modifications, change of theme, niche attempts, moving from one hosting service from another, moving from free-subdomain to another before finally resting into its own domain since December 2006. [Read more...]

Language translator

Follow Me On Twitter

Check Mail @ digitalrebel.ws

Admin

Button Links