PDA

Click to See Complete Forum and Search --> : review my site please

amonteiro
11-23-2005, 04:40 PM
http://www.ajitmonteiro.com
I tried to keep it simple but what do you guys think?
Green-Beast
11-23-2005, 07:11 PM
I like it. It looks very good. Two things that standout are as follows:

1) Please specify a background color on body (replacement CSS below).

body {
margin : 0;
padding : 0;
background : #fff url(bg.gif) repeat-y;
}

And fix this error...
Error: element HR not allowed here; possible cause is an inline element containing a block-level element
...by replacing the span element <span class="lighthr" ><hr></span> with a div, or by removing the span altogther and using this CSS and HTML

hr.lighthr {
border : 1px dotted #c9c9c9;
padding-top : 0;
width : 280px;
}

<hr class="lighthr">

If you do that, then the page will be valid like the CSS is.

Good work.
Mike
dera
11-24-2005, 05:14 AM
its good to keep your code as clean as possible so when you edit it its easy to read

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>Ajit Monteiro</title>
<link rel="STYLESHEET" type="text/css" href="style.css">
<script language="JavaScript" type="text/javascript">
function showArticleMenu(){
var idThis = document.getElementById('articlesMenu');
if (idThis.style.display == 'block'){
idThis.style.display = 'none';
}else{
idThis.style.display = 'block';
}
}

</script>
</head>
<body>
<div id="header">
<div id="headerContent">
<a href="index.html"><img src="ajitmonteiro.gif" alt="" border="0">
</a><br>
<a href="javascript:showArticleMenu()">Articles</a> |
<a href="resume.html">Resume</a>
</div>
</div>
<div id="body">
<div id="leftpadding">
&nbsp;
</div>
<div id="data">
<strong>Welcome to the personal website of Ajit
Monteiro.</strong><br>
<br>
My technical experience lies in design, development and
programming of multi-phase internet and windows
applications.<br>
<br>
I have extensive experience in diverse programs and
programming languages, including the .Net platform in C#
and ASP with integrating third-party programming software
like LLBLGen and NUnit.<br>
<br>
In addition, Other development platforms that I have
experience in include Classic ASP, PHP, J2EE, Visual Basic
and C++. I also have extensive experience with various web
technologies such as HTML, JavaScript, CSS, DHTML, XML
(including WML), Photoshop and Flash. My database-related
expertise include Access, SQL Server and Oracle.<br>
<br>
<br>

<div id="col1">
<strong class="capTitleBlue">ARTICLES</strong>
<strong class="capTitleGray">AND COVERAGE</strong><br>
<br>
<a href="commentspam.asp">How To Stop Comment
Spam</a><br>
<a href="traffic.asp">Increase Website Traffic on a
Small Budget</a><br>
<a href="http://www.quentecafe.com/index.asp?id=810" target="_blank" title="External Link">
<img src="linkout.gif" alt="" border="0">NextFest
Coverage</a><br>
<br>
<span class="lighthr"></span>
<hr>
<br>
<strong class="capTitleBlue">HOW</strong>
<strong class="capTitleGray">TO'S</strong><br>
<br>
<a href="screen1.asp">Home Theater Projector
Screen</a> [<a href="screen1.asp">1</a>,
<a href="screen2.asp">2</a>]<br>
<span class="progress">[WIP]</span>
<a href="frame1.asp">Laptop Touch Screen Picture
Frame</a> [<a href="frame1.asp">1</a>,
<a href="frame2.asp">2</a>]<br>
<br>
<span class="lighthr"></span>
<hr>
<br>
<br>
<strong class="capTitleBlue">PERSONAL</strong>
<strong class="capTitleGray">WEB PROJECTS</strong><br>
<br>
<a href="http://www.quentecafe.com" target="_blank" title="External Link">
<img src="quentesmall.jpg" alt="" border="0"></a><br>
<a href="http://www.quentecafe.com" target="_blank" title="External Link">
<img src="linkout.gif" alt="" border="0">Quente
Cafe</a><br>
<br>
<a href="http://www.trumptoweronline.com" target="_blank" title="External Link">
<img src="trumpsmall.jpg" alt="" border="0"></a><br>
<a href="http://www.trumptoweronline.com" target="_blank" title="External Link">
<img src="linkout.gif" alt="" border="0">Trump Tower
Online</a><br>
<br>
<br>
</div>
<div id="col2">
<strong class="capTitleBlue">CREATED</strong>
<strong class="capTitleGray">WEBSITES</strong><br>
<br>
<a href="http://www.endeavorhealth.com" target="_blank" title="External Link">
<img src="endsmall.jpg" alt="" border="0"></a><br>
<a href="http://www.endeavorhealth.com" target="_blank" title="External Link">
<img src="linkout.gif" alt="" border="0">Endeavor
Health</a><br>
<br>
<a href="http://www.esyndeo.com" target="_blank" title="External Link">
<img src="enssmall.jpg" alt="" border="0"></a><br>
<a href="http://www.esyndeo.com" target="_blank" title="External Link">
<img src="linkout.gif" alt="" border="0">Ensyndeo</a><br>

<br>
<span class="lighthr"></span>
<hr>
<br>
<strong class="capTitleBlue">MANAGED</strong>
<strong class="capTitleGray">WEBSITES</strong><br>
<br>
<a href="http://www.marketplaceindia.com" target="_blank" title="External Link">
<img src="linkout.gif" alt="" border="0">Marketplace
Handwork Of India</a><br>
<a href="http://www.shantifoundationforpeace.com" target="_blank" title="External Link">
<img src="linkout.gif" alt="" border="0">Shanti
Foundation For Peace</a><br>
<br>
<span class="lighthr"></span>
<hr>
<br>
<strong class="capTitleBlue">NEW</strong>
<strong class="capTitleGray">PROJECTS</strong><br>
<br>
<span class="progress">[WIP]</span> Indira Johnson [
<a href="http://www.indirajohnson.com" target="_blank" title="External Link">
<img src="linkout.gif" alt="" border="0">Original</a>
|
<a href="/indira" target="_blank" title="External Link">
<img src="linkout.gif" alt="" border="0">New</a> ]<br>
<span class="progress">[WIP]</span> Samita Basu [
<strike>Original</strike> |
<a href="/samita" target="_blank" title="External Link">
<img src="linkout.gif" alt="" border="0">New</a> ]<br>
</div>
<br>
<br>
<br>
<br>
All links indicated with a
<img src="linkout.gif" alt="" border="0">, link to
external websites<br>
<span class="progress">[WIP]</span> : Work In
Progress<br>
<br>
</div>
</div>
<div id="articlesMenu">
<a href="commentspam.asp">How To Stop Comment Spam</a><br>
<a href="traffic.asp">Increase Website Traffic on a Small
Budget</a><br>
<a href="http://www.quentecafe.com/index.asp?id=810" target="_blank" title="External Link">
<img src="linkout.gif" alt="" border="0">NextFest
Coverage</a><br>
<a href="screen1.asp">How to Make a Home Theater Projector
Screen</a> [<a href="screen1.asp">1</a>,
<a href="screen2.asp">2</a>]<br>
<a href="frame1.asp">Laptop Touch Screen Picture Frame</a>
[<a href="frame1.asp">1</a>, <a href="frame2.asp">2</a>]
</div>
<!-- Start of StatCounter Code -->
<script type="text/javascript" language="javascript">
var sc_project=1012762;
var sc_invisible=1;
var sc_partition=9;
var sc_security="60507f34";
</script>
<script type="text/javascript" language="javascript" src="http://www.statcounter.com/counter/counter.js">

</script>
<noscript><a href="http://www.statcounter.com/" target="_blank"><img src="http://c10.statcounter.com/counter.php?sc_project=1012762&amp;java=0&amp;security=60507f34&amp;invisible=1" alt="hidden hit counter" border="0">
</a></noscript><!-- End of StatCounter Code -->
</body>
</html>



I cleaned up the code for you above. I was wondering why are you using a HTML 4 Doctype? Why don't you go for a XHTML Doctype.
dera
11-24-2005, 05:15 AM
To make your stats code more sematic you can change

<script type="text/javascript" language="javascript" src="http://www.statcounter.com/counter/counter.js">

</script>
<noscript><a href="http://www.statcounter.com/" target="_blank"><img src="http://c10.statcounter.com/counter.php?sc_project=1012762&amp;java=0&amp;security=60507f34&amp;invisible=1" alt="hidden hit counter" border="0">
</a></noscript><!-- End of StatCounter Code -->

to

<!-- Start of StatCounter Code -->
<script type="text/javascript" language="javascript">
var sc_project=1012762;
var sc_invisible=1;
var sc_partition=9;
var sc_security="60507f34";
</script>
<script type="text/javascript" language="javascript" src="http://www.statcounter.com/counter/counter.js">

</script>
<noscript><a href="http://www.statcounter.com/" target="_blank"><img src="http://c10.statcounter.com/counter.php?sc_project=1012762&amp;java=0&amp;security=60507f34&amp;invisible=1" alt="hidden hit counter" style="border:0;">
</a></noscript><!-- End of StatCounter Code -->


-- this post was seperated due to length restrictions
Green-Beast
11-24-2005, 08:07 AM
Actually, remove "language" from the script element and leave only "type" if you really want to do it better, in addition to Dera's other suggestion.

Mike
takmais
11-24-2005, 12:06 PM
I agree its a nice looking site. This may be more of a personal issue but the beveled glow at the top isnt working for me. it screams "amature" to me for some reason. If it had an edge exactly the same width as the rest of the page the way it gradually fades out to the background color then it would look sharp i think. and speaking of the background color, it would be nice if that border with the gradient actually faded into the correct background color of your page. the way it is now, the gradient stops a few shades to dark and thus creates that hard line. open it up in photoshop or soemthign and sample that extreme edge adn find its color, then set the background color to that. or change the gradient so that its last color is the same as the background color. anyway, just my thoughts. nice simple design though.
j
amonteiro
11-28-2005, 11:03 AM
Thank you everyone for taking the time to look at my website. I really appreciate all the feedback. So I made some changes from the advice that was given...

Green-Beast... the body and hr tags have been changed to reflect what you said. The hr's look a llittle different now for some reason but not bad so I'll keep it this way. Also I removed the language attribute

Dera...I'll format the code shortly, probably using Homesite's html codesweeper. But I want to finish all the other details first. I didn't really understand the changes you made to the javascript though. You created some variables but then didn't use them. Were you creating them to use them in the link?

Takmais... I think I did everything you said too. I was trying to make it look like the page was going uder something at the top therefore the bevel. But I agree that it looked a little amateurish, so I toned it down. Also there shouldn't be a hard line in the fade anymore. I couldn't see it because I'm using a laptop lcd.

Thanks again
takmais
11-28-2005, 11:09 AM
i think this looks quite nice now. the sharp edge at the top looks alot better now and the border around the page looks more intentional. nice design.
KDLA
11-28-2005, 11:14 AM
OOHH - nice!

Don't know if you're aware of this, but the sections "created websites," "managed websites," and "new projects" are indented about 100px on my screen. It looks a little odd.

The subheadings are a little confusing - what exactly is a "personal web project?" You might choose to break your work into these categories: Clients and Personal.

Also, make the email link go to a form, rather than opening a blank email message. Not only will it look more professional this way, it'll help you distinguish spam from legitimate email messages. (You can put a specific subject line for the form, and always know that it's a form submission.)

Also, take a minute to find a native English speaker and have them look over your text. Some of the grammar is pretty rough reading.

Good Luck -
KDLA
amonteiro
11-28-2005, 12:29 PM
Wow I didn't realize how it looked in IE. Yeah that indentation isnt suppose to be there and its suppose to be 2 columns. I've taken it down to fix it, will be up shortly.
amonteiro
11-28-2005, 12:49 PM
Ok its back up. Should look the same in firefox and IE now.

The way the headings stand now, none of them are work projects, all personal. I don't feel comfortable using my work projects for legal reasons. Personal projects are ones I've done for fun, the rest are freelanced projects. But I will think about rearranging them into fewer headings.

I have plans for a contact form, still need to code it though.

I am a native english speaker (not a very good one obviously :P) Are there any specific areas that you saw the grammar as bad. The articles should be pretty good but I could see the how to's being rough since they were written in a very informal tone.
Green-Beast
11-28-2005, 01:26 PM
This might help you for a PHP contact form (http://green-beast.com/blog/?page_id=71), perhaps.

Mike
KDLA
11-28-2005, 01:27 PM
Oops - sorry about the "native speaker" thing. For some reason, I thought you were from India, due to the two Indian-named sites under "managed websites."

I like the way you've moved the stuff around on the homepage. Now, most of it appears without scrolling.

As to grammar, you might look around your Quente Cafe site. Here's an example:

Pace have showcased their TV To Go product at the International Broadcast Convention (IBC 2005) in Amsterdam and Lordpercy.com have been roaming the halls.

The PVR / portable media player combo is the markers first venture into handheld consumer devices. Based around MPEG-2 the device is still a bit too large but Pace say they hope to slim it down before it is made available to pay TV operators to use as part of their services in Q1 2006.

Some of the verb tenses don't agree with the subject, and not every sentence makes sense. (I'm a Type-A personality, so I tend to focus on these types of things. ;)) If you plan to put this up for future clients to review, make sure that it's just as professional as your "real" professional sites.

KDLA
amonteiro
11-28-2005, 01:47 PM
Not a problem, although I am Indian, English is my first language (doesn't mean I'm any good at it).

Quente Cafe was a collaboration between many people, so unfortunately I cannot guarantee the English to be of high quality. I would like everything on the ajitmonteiro.com website to be.