Slooooww....

problema · #1 05-15-2007, 07:40 AM

I'm no webdesigner, I know that much, lol.

Well, I've made myself a personal webpage and gave it a shot at php and css, seem that they're likely the way to go, and was actually pleased with the result, but the thing is, the page seems to be quite, well, slow.

I'm posting the link and code for the page and css sheet, if anybody can tell me what am I doing wrong (even if it does not concern the apointed subject, I'd like to get random pointers that can help me improve my programing/designing logics), I'd largely apreciate that... and if you live in Japan I'll buy you a beer! =]

Ok, here goes:

Link to the page

==index.php==

Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html lang="en">
<head>
<title></title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<link rel="stylesheet" type="text/css" href="style.css" />
</head>
<body>


<div id="main">

	<img src="bg.jpg">

	<div id="links">

		<a href="http://www.gimp.org" target="_blank"><img src="gimp-button.gif "class="button5"></a>
		<a href="http://www.gimp.com.br" target="_blank"><img src="gbr-button.gif "class="button6"></a>
		<a href="http://www.deviantart.com" target="_blank"><img src="da-button.gif "class="button7"></a>

	</div>

	<div id="menu">
		<img src="button_profile.gif "class="button1" onClick="document.getElementById('holder').style.visibility='visible';document.getElementById('profile').style.visibility='visible';document.getElementById('textos').style.visibility='hidden';document.getElementById('galeria').style.visibility='hidden';">
		<img src="button_textos.gif" class="button2" onClick="document.getElementById('holder').style.visibility='visible';document.getElementById('profile').style.visibility='hidden';document.getElementById('textos').style.visibility='visible';document.getElementById('galeria').style.visibility='hidden';">
		<img src="button_galeria.gif" class="button3" onClick="document.getElementById('holder').style.visibility='visible';document.getElementById('profile').style.visibility='hidden';document.getElementById('textos').style.visibility='hidden';document.getElementById('galeria').style.visibility='visible';">
		<img src="button_clear.gif" class="button4" onClick="document.getElementById('holder').style.visibility='hidden';document.getElementById('profile').style.visibility='hidden';document.getElementById('textos').style.visibility='hidden';document.getElementById('galeria').style.visibility='hidden';">
	</div>

	<div id="holder">

		<div id="profile">

			<h3> ego</h3>
			<p>
			As características que me definem são marido, pai e filho. Nessa ordem.<br>
			- "Propriedade de Molina. Transgressores serão alvejados."<br>
			- Tenho quatro filhos. Amo à todos como se não houvesse amanhã.<br>
			- Amo meus pais. Amo O Pai. Amén.<br>
			<br>
			Poeta de poucas palavras. Poucas cores na minha paleta. A arte, pra mim, não é um estilo de vida, é uma válvula de escape.<br>
			<br>
			Vivo no Japão; o melhor e o pior lugar pra se viver. Quem sabe um dia eu volte...<br>
			<br>
			Eis seu anfitrião. Aproveitem sua estada.<br>
			<br>
			<br>
			<br>
			<i>Alea Jacta Est</i>
			</p>

		</div>


		<div id="textos" style="overflow:scroll;">

			<?php

				$dirt="./texts/BR/";
				$dht=opendir($dirt);
				while(false!==($filenamet=readdir($dht))){
					if(substr($filenamet,-4)==".txt"){
					$filearrayt[]=$filenamet;
					}
				}
				$totalp=count($filearrayt);

				$diri="./texts/US/";
				$dhi=opendir($diri);
				while(false!==($filenamet=readdir($dhi))){
					if(substr($filenamet,-4)==".txt"){
					$filearrayt[]=$filenamet;
					}
				}
				$totalt=count($filearrayt);
				$diru=$dirt;

				// BEGINS LAYOUT
				echo "<font face='verdana,arial' size='4' color='black'><b>memorandum</b></font>";
				echo "<hr noshade color='black'>";
				echo "<br><font face='verdana,arial' size='2' color='black'><b>Português</b></font>";
				echo "<hr noshade color='black'>";
				echo "<p>";
				echo "<ul>";

				// SHOW LIST
				for($it=0;$it<$totalt;$it++){
					$textot=$filearrayt[$it];
					$nome1t=explode(".",$textot);
					$nomet=$nome1t[0];
					echo "<li><a href=\"index.php\" onClick='window.open(\"displaytext.php?texto=$nomet&diru=$diru\",\"imagempop\",\"resizable=yes,toolbar=no,status=no,scrollbars=1\");return false;'>$nomet</a>";
					if($it==$totalp-1){
						echo "</ul><br><font face='verdana,arial' size='2' color='black'><b>Inglês</b></font>";
						echo "<hr noshade color='black'><ul>";
						$diru=$diri;
					}
				}

				echo "</ul>";
				echo "</p>";
				echo "<hr noshade color='black'>";
				echo "<p class='align1'><font face='verdana,arial' size='1'>Total de textos: ".$totalt."</p>";


				?>

		</div>


		<div id="galeria" style="overflow:scroll;">

			<?php

				$dir="./gallery/";
				$thumbs="gallery/thumbs/";
				$dh=opendir($dir);
				$colunas=4;
				$imagens=9999;
				$self="index.php";
				$pag=1;

				while(false!==($filename=readdir($dh))){
					if(substr($filename,-4)==".jpg"){
					$filearray[]=$filename;
					}
				}

				// NUMERIC VARIABLES
				$totfim=$pag*$imagens;
				$inicio=$totfim-$imagens;
				$total=count($filearray);
				$totalpag=ceil($total/$imagens);
				$ni2=ceil($imagens*$pag);

				if($totfim>$total){
					$totfim=$total;
				}

				// BEGINS LAYOUT TABLE
				echo "<table align='center' cellspacing='1' height='330' border='0' width='350'>\n";
				echo "<tr><td valign='bottom' height='20'><font face='verdana,arial' size='4' color='black'><b>porticus</b></font></td></tr>";
				echo "<tr><td height='1' bgcolor='#000000'></td></tr>";
				echo "<tr><td height='150' valign='top' align='center'>";
				echo "<table border='0' cellspacing='5'><tr>\n";

				// SHOW IMAGE COLUMNS
					$break=0;
				for($i=$inicio;$i<$totfim;$i++){
					$imagem=$filearray[$i];
					$nome1=explode(".",$imagem);
					$nome=$nome1[0];

					echo "<td align='center' valign='top'>";
					echo "<table cellspacing='0'><tr><td align='center'><a href=\"index.php\" onClick='window.open(\"display.php?imagem=$imagem&pop=1\",\"imagempop\",\"resizable=yes,toolbar=no,status=no,scrollbars=1\");return false;'><img src='$thumbs$imagem' width='50' height='50' style='border:1px solid #000000;'>";
					echo "</td></tr><tr><td align='center'><font face='verdana,arial' size='1'>".$nome."</font></td></tr></table>";
					echo "</td>\n";
					$break++;
					if($break==$colunas){
					echo "</tr><tr>\n";
					$break=0;
				}
				}

				echo "</tr></table>";
				echo "</td></tr>\n";
				echo "<tr><td height='1' bgcolor='#000000'></td></tr>";
				echo "<tr><td align='center' height='30' valign='bottom'>";
				echo "<font face='verdana,arial' size='1'>Total de imagens: ".$total;
				echo "</td></tr></table>";

				?>
		</div>

</div>

<br><br><br><br><br><br><br>

</body>
</html>

==style.css==

Code:

html, body
{
	margin: 0px;
	padding: 0;
	width: 100%;
	height: 100%;
	background: #FFFF;
	font-family: verdana, sans-serif;
	font-size: 11px;
	color: #000000;
}

table
{
	font-family: verdana, sans-serif;
	font-size: 11px;
	color: #000000;
}

p
{
	margin: 0px;
	padding: 1px;
	text-align: justify;
}

.align1
{
	text-align: center;
}

ul
{
	margin: 0px;
	padding: 0;
	list-style-type: none;
}

ul li
{
	margin: 0px;
	padding-left: 17px;
	background: url(bullet.gif) no-repeat top left;
}

hr
{
	color: #000000;
	width: 350px;
}

a:link, a:visited
{
	text-decoration: none;
	font-size: 11px;
	color: black;
}

a:hover
{
	font-size: 11px;
	font-weight: bold;
	text-decoration: underline;
}

a:active
{
	text-decoration: none;
	font-weight: bold;
	color: black;
}

#main
{
	margin-left: auto;
	margin-right: auto;
	width: 950px;
	height: 100%;
	position: relative;
	
}

#menu
{
	width: 125px;
	height: 183px;
	position: absolute;
	top: 375px;
	left: 782px;
}

#holder
{
	visibility: hidden;
	width: 475px;
	height: 337px;
	position: absolute;
	background: url(content_bg.png);
	top: 240px;
	left: 138px;
}

#profile
{
	width: 375px;
	height: 317px;
	position: absolute;
	top: 10px;
	left: 50px;
}

#textos
{
	width: 375px;
	height: 317px;
	position: absolute;
	top: 10px;
	left: 50px;
}

#galeria
{
	width: 375px;
	height: 317px;
	position: absolute;
	top: 10px;
	left: 50px;
}

#links
{
	width: 261px;
	height: 15px;
	position: absolute;
	top: 50px;
	left: 485px;
}

h2.head
{
	margin: 5px 0 2px 0;
	font-family: verdana, sans-serif;
	font-size: 11px;
	color: #FFF;
	letter-spacing: 1px;
	text-transform: uppercase;
	text-align: center;
}

h3.head
{
	margin: 10px 0;
	border-bottom: 1px dotted #D3E0ED;
	padding: 0 0 2px 19px;
	font-family: verdana, sans-serif;
	font-size: 12px;
	color: #FFF;
	letter-spacing: 1px;
	background: url(hbullet.gif) no-repeat 2px 1px;
}

.button1
{
	position: absolute;
	top: 0px;
	left: 0px;
	cursor: crosshair;
}

.button2
{
	position: absolute;
	top: 43px;
	left: 0px;
	cursor: crosshair;
}

.button3
{
	position: absolute;
	top: 86px;
	left: 0px;
	cursor: crosshair;
}

.button4
{
	position: absolute;
	top: 148px;
	left: 0px;
	cursor: crosshair;
}

.button5
{
	position: absolute;
	top: 0px;
	left: 0px;
	border: 0px;
	cursor: ne-resize;
}

.button6
{
	position: absolute;
	top: 0px;
	left: 90px;
	border: 0px;
	cursor: n-resize;
}

.button7
{
	position: absolute;
	top: 0px;
	left: 181px;
	border: 0px;
	cursor: se-resize;
}

Thanks in advance for anyone willing to help.

bokeh · #2 05-15-2007, 09:54 AM

Quote:

Originally Posted by problema

anybody can tell me what am I doing wrong

58 requests for a start.

problema · #3 05-15-2007, 10:03 AM

Quote:

Originally Posted by bokeh

58 requests for a start.

First off, thanks for replying.

I am really not a professional, emphasis on "really", and I am not sure as to what you're refering to. Could you give me a hint? =] And perhaps a tip as to how can I repair that.

Thanks again.

PS: Oh and actually tried to "keep it simple"... lol.

rbudj · #4 05-15-2007, 10:06 AM

Lots of validation errors on your page. Check validation on your CSS and HTML.

problema · #5 05-15-2007, 11:08 AM

Ok, the css file is validated and the php is almost there. There were a couple hundred errs...lol, but they were mostly nonsense I'd say, when I've finished correcting them, though, the w3schools validator started to give me an error concerning the Character Encoding. It says it can't find Character Encoding AND Doctype defitinitions within the document, but as you can see on the first post of the topic they are there indeed. I tried to copy/paste these lines from the help pages of w3schools (though they were exactly the same as mine) and their validator still won't have it.

What do I do? Please. This is such a dead end...

And about those "58 requests", anybody care to shed some light?

PS: Btw, I've changed my charset to utf-8 for it appears to be more acceptable. This is how it look now:

Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title></title>
<link rel="stylesheet" type="text/css" href="style.css" />
</head>

problema · #6 05-15-2007, 11:15 AM

Now that is just great. Now that I have validated it (almost) the page is no longer visible, it is a blank sheet on the black-book of n00b designers...... omg!

bokeh · #7 05-15-2007, 11:22 AM

First, use an HTML DOCTYPE not XHTML (unless you have some special reason) and make it a strict one.

58 requests: that means your homepage is a composite of 58 files (most of which are large images). Try to keep your pages below 10 requests and 40 kilobytes.

Thread Tools	Search this Thread
Show Printable Version Email this Page	Search this Thread: Advanced Search
Display Modes	Rate This Thread
Linear Mode Switch to Hybrid Mode Switch to Threaded Mode	Rate This Thread:

Currently Active Users Viewing This Thread: 1 (0 members and 1 guests)