Jump to content

New to Website Devl.


Recommended Posts

Yeah, I know it's a strange request but...

I've been trying to learn this stuff with a dual-purpose in mind -

1 - Create my very-own

2 - Learn-to-earn (need a j.o.b.)

I'm not asking for any specific assistance... YET! What I'm asking now is for anyone that has the time to take a look at the "page" (self-contained except for images and "links") and indicate stoopid misteaks, potential redundancies (I've already found a few and fixed), or outright "yada-yada will bite ya if ya change whooptie-doo".

I do however have a problem "dynamically resizing Column2/Column3" so that Column2 is wider and Column3 is narrower (I think prob is in the Style in the HEAD). (I guess this one is a specific request).

Rather than putting the code as Attach or a CodeBox, just go to the WebSite (whenever it's up) and "get the source". No Cookies etc. just in-Code Styles and Links.

http://martin-enterprises-ltd.no-ip.org/index.php.

Mostly up 9am-7pm EDT. (also feeble attempt at learn PHP, CSS, JS)

Take your time, no biggie. Been at it for (believe it or not) a week just to get this far. If there's no takers, I'll figure things out eventually (figured out this much).

Link to comment
Share on other sites


Learn to earn might be a problem for you like it was for me when I was unemployed. At that time, I had a solid 10 years of web development under my belt, however none of it was with a company, aka something on my resume. Many job interviewers told me that it didn't matter what I knew because I didn't do it at a job. Maybe you'll luck out!

OK I shall look at your site and tell you what I see. I am going to post my response FIRST and code sample afterwards.

1. You are using an OLD program. There are multiple problems with this. First, it makes it easy for you, you do not have the ability to look at straight code (this is important if you get hired at a company because they probably won't use the same app as you or its hand coded) and know exactly how it works out. Yes some coding is easier to understand than others. Starting out, I would recommend doing things from hand rather than using an app. However, if you do want to use an app, make sure you try to use CodeView and also not an app (such as the one you are using) which adds a bunch of "garbage" (imo) code:

<META content="Microsoft FrontPage 5.0" name=GENERATOR>

2. Commenting your code is a good practice to get into, especially if you want to do it in a job. A standard practice for website development is to use three different servers. The first is "test" which you test out everything, even if it isn't related to your project or just trying out ideas. The second is the dev server. It is where you test your final design and the dev server is basically a clone of the "production" server, except that it SHOULD include the commenting on the code. The production server (the website that is accessable to the outside world) should not have the comments. Not only is commenting a security concern, it is extra lines of code that the server needs to process. This may not mean anything at first but once you start getting some major/recurring traffic going it COULD become a problem. Also, I can tell that you got code from some sample on a website. If your prospective employer were to see this, they would know you didn't do it yourself. While this may not be a problem (some people actually reward resourcefulness) it may come back to bite you:

<!--  -->
<!-- Image note: JPG appears to be the smallest -->
<!-- Comment note: Inline only works after a COLON (end of parameter) -->
<!-- (may be wrong - works in TR def, but not on a CSS-style line) -->

3. Make sure you validate your code. Obviously, FrontPage is going to try its best to use standard coding practices. Even so, your page code has errors! HTML 4 Transitional is OK if you want a standard that accepts errors, shortcuts or that browsers will fix your errors for them. I use XHTML strict, because I must follow certain rules about coding the pages (do not use my website for this example, as it is not comforming however my redesign will be) and also makes me learn exactly how I should be using my code.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<!-- "http://www.w3.org/TR/1998/REC-html40-19980424/loose.dtd" -->

Validator: http://validator.w3.org

4. Check your CSS. You have your CSS embedded in your page. You should have it set to use a separate file. This will allow you to make formatting changes on a large website without having to make code changes to every page. You only get to use 1 file. Also be aware of using CSS code that is not cross-browser compatible. For example, I used Firefox to look at your site, but your scrollbar related CSS will only work in Internet Explorer.

.pageScroll {
scrollbar-base-color: ;
scrollbar-face-color: ;
scrollbar-arrow-color: ;
scrollbar-3dlight-color: ;
scrollbar-highlight-color: ;
scrollbar-shadow-color: ;
scrollbar-darkshadow-color: ;
}

Validator: http://jigsaw.w3.org/css-validator/

5. Blinking text is the bane of Netscape's involvement in the early web browser world. PLEASE DO NOT USE IT, EVER. Then again, if it was Flash with blinking text, I'm sure people wouldn't mind... :D

6. Tables are for tabular data only! Do not use tables for layout purposes. Use DIVs and CSS for layout.

I am not going to say that I am a web design master myself! Everyone has their opinions, so I hope mine help you. I can give you some examples of my own. My current website was developed in 2005 as a fully operable CMS. It used to have the ability to create accounts, log in and had a new script that read from a forum. Most of that functionality was removed because the server it used to be on went SOL. I have recently uploaded my old website (it was designed for IE6) because the content on it was helpful to those in the other community I was in. I had decided to NOT fix any code on it because it was way too much work. I am now currently developing a new website design that will use PHP, CSS, AJAX, (maybe) Flash, MySQL. I am also not doing image work this time, as I am having a design professional create website layout graphics. It might be a long time until I can put my new website up.

Do not hurt me if I broke some of the rules I stated above in my existing website! Here it is, you can view the code if you like. Note that I am actually using some PHP functions that obviously you cannot see in the browser's source view:

http://tripredacus.net/index.php

Here is my site in development. It says PHP but it has no PHP in it currently. I am using this "beta.php" as my test server. My dev server is at work (it is not possible to link to it) which has my most updated code:

http://tripredacus.net/hist/beta.php

Let me know if you have any questions. You will also find this website to be a good place to ask questions... its kinda like MSFN but just for programming.

http://forums.devshed.com/

^_^

Link to comment
Share on other sites

I have to agree with Tripredacus on pretty much everything he said.

Many job interviewers told me that it didn't matter what I knew because I didn't do it at a job.

And it's somewhat understandable too. Knowing what you're doing (writing markup) is one thing, but knowing how the business works overall, being able to work on a deadline, with client requests, etc is another. Very much like knowing the basics of Photoshop by itself wouldn't get me graphic design contracts, I also have to know how the business expects me to work, deal with their "design by committee" policies, be committed to deliver within tight deadlines, etc (and obviously be able to deliver quality results too, and on a budget)

As a beginner, you have to focus on the markup and how the various techs in use work. You want to be able to build a site using something as plain as notepad (or something a little nicer like notepad++). Using frontpage (doubly so for older version) is usually frowned upon (looks n00b-ish, and frontpage has the long standing reputation of producing absolute crap). Once you are good at that, then you can look into something like Dreamweaver (not so much for the WYSIWYG editor, but transferring files and what not)

Now, down to the page content itself.

Although a lot of pages are still served as HTML4 these days, most of the markup is usually written like XHTML requires it. That means tags in lowercase (e.g. not <BODY> but rather <body>), properly nesting tags (you seem to have been pretty good for that), closing all your tags properly (i.e. any tag that doesn't look like <sometag></sometag> looks like <sometag /> and NOT <sometag> -- see your <meta> tags for instance).

Setting style in markup is a last resort. You want to keep content (markup) and style (using CSS) separated. And setting part of it in markup & part of it (on the same element no less) in 2 different places is even worse. You don't really want to use <BODY bgColor=white> or <TD width="268" align=center>. Also, CSS-wise, you don't really want to split your CSS in a dozen different blocks like that, and it would normally be served in another file (an include) so it gets cached and pages load faster.

Also, this might be (mostly) compliant HTML4, but that's a really old standard, and how it's used has changed a LOT over the years. Again, not just the "using CSS for style" part, but that also means using paragraphs (<p></p) instead of a million <br /> tags like people did back in 1995. The other thing that has changed since then is that we don't use tables for layout anymore (it's meant for tabular data, NOT layout). See this. A good understanding of CSS and the box object model is all you need. Good knowledge of CSS is not optional (if I was looking at a portfolio, I'd look closely at how you defined your fonts and such; it's a pretty good indicator of skill). There's a lot of "tricks" you have to learn too, like using nested lists (styled in specific ways) for site navigation and the like. Comments should hardly ever appear in markup. Most comments are either stripped off, or most often written in server-side code (not in the HTML markup).

You used a doctype, well done (a lot of sites still don't get this right these days, it's aggravating!). However, you also want to specify a character encoding, like UTF-8 for instance.

You also have to test your sites using most browsers (recent versions of IE, Firefox, Safari and Chrome ideally). Following standards should make it work pretty good across most, save for the older IE versions.

Once you are done with all that (that's perpaps 5% of the job), then there is plenty more to learn. You want to learn the basics of javascript (and ideally some popular libraries like jQuery). You want to learn to use the document object model (DOM) with javascript. And you will have to learn one or more server-side technologies (e.g. PHP or ASP.NET) as sites nowadays aren't static HTML like that anymore (the markup is generated by the code running on the server). And to do this, you will have to pull your data from somewhere which usually means from a database, so you will have to learn the basics of SQL too (although not knowing enough can be fairly dangerous and expose to to being hacked)

Basic image processing knowledge is a must. Your picture (Me_half-stax_ACSmiddletown.jpg) isn't cropped or sized properly, unless you really wanted scrollbars in both directions. Cropping, resizing, setting transparency, saving an optimized version for the web is the strict minimum.

Then after all that, there are many other things that can get you the job (or vice-versa) over another guy, like knowing Flash/ActionScript. Of course, previous experience and a nice portfolio helps getting the job.

It takes a good while to become pretty good at all of this, and there will always be something else "new" to learn. The technologies used are always evolving. You can't just learn and be set for life. Like a lot of technology-related careers, you have to be fairly committed to be able to stay current.

Link to comment
Share on other sites

Frontpage 2002 (aka Frontpage 5.0, what it appears you are using) is 8 years old, and designs it's code for browsers from that era. That means Netscape (yes that Netscape, before it became Mozilla) 7.x, IE5.x and 6.x, and even Opera 6.x were the "mainstream" browsers at that time. If you think you need a tool to help you design sites, you would be better off with a product like Expression Web or DreamWeaver - however, learning how to do it by hand is really the best way to learn (from your mistakes), and also if you're learning to earn, you will likely need to know how to do it by hand anyway.

Link to comment
Share on other sites

Gee, guys! I consider all of you "top dogs", so thx for the comments.

However,

1 - I initially used FP; it stinks and have been using Notepad++ (forgot to yank FP line)

2 - Having said that, I've been "revamping" by hand to understand it

3 - Yep, the tables are an exercise (like nesting, borders, scrolling BigPic, etc)

4 - As you may have seen I have PHP installed

5 - I have MySQL (not yet installed) and VS.NET (yet to "use" it)

6 - Aware of the separate CSS; just easier to embed temporarily (and the comments)

7 - re BigPic - I have a resized (with CS2; still learning this) that I started with; again, just an experiment with Table-in-Table + Scrolling.

8 - I have yet to find a straightforward "guide" (I have PHP+MySQL Bible) other than W3Schools and W3, both of which are great reference with samples. I have noted that "manuals" for other-than-MainFrame (e.g. IBM) stink; everything "back then" was at my fingertips and well documented. WWW stuff is not (IMO comparatively speaking).

9 - Having no good "guide" I have been collecting info and samples trying to get for any given "item" the "defaults" and plugging them in (where? at w3.org? convoluted IMO)

At the time, I consider my "default website" my Devl/Test and fully intend to fire up a separate webserver/machine. That's why you see all those comments (my references). In my MainFrame day, I had a library of samples (that I created) for each and every type of code imaginable in ASM (including Macros), COBOL, RPG, Fortran, PL-I, CICS, SQL+VSAM+BDAM+ISAM+severalDbases (per language), yada-yada. Someone got one heckuva "gimme" when I was let go (shoulda retrained). I already have some other "junk sample" files in a separate folder (working and non-working).

So... here I am trying to learn HTML, PHP, JS, CSS, SQL, and all the other yada-yada. I appreciate your comments; already noted before I started this topic. (Avoiding IFRAME's; have to go back and locate any Deprecated stuff as well and modify accordingly.)

BTW, I realize "blinky" shouldn't be there; it was a "fun thing" (yes, I know other methods that I have yet to get to). Also, have been "testing" in both IE6 (yet to upgrade to IE7/8) and FF (idiosyncracies have been a real pain).

"Learn-to-earn"... may be lucky on this. Wife is now house-cleaning a lady that does "at-home sales via web" and her hubby does web development at home via "call-back contracts" (he has no formal training either). Haven't yet contacted him (this is why)...

(The resizing-table problem... any ideas? Is it in the "table style-class"? No straight forward guides explaining details... I sure miss having a bookshelf full of complete guides/references A-Z.)

(Forgot to say - I have another "website tool"; I prefer to use the god-awful stuff generated from FP as a starting point and clean all the crap afterwards by hand until I feel I can shed myself. Why install another "do it for me" space-consumer?)

Whew!!! Thanx, guys. Nice to know big-guns took time out. Will look at the links you provided (more sampling). I believe I'm safe in assuming that I should avoid any type of code that won't work on Linux and/or Apache (may want to cross over as a server).

Final useless note - MySpace and FaceBook; loaded with DIV's and really crappy code (IMO). Obviously intentional to make it almost indecipherable.

edit - errr, PHP doesn't give an option to "break" lines within (AFAICT) so I resorted to using just "BR" (yep, there's a PHP line there). Even using "P" I don't really care for as it's purpose seems more Paragraph-oriented ("P", obviously); useless IMO as there's less control. Tried it - nope, didn't like it...

big edit 2 - Thank you CoffeeFiend - the link gave a nice tutorial. Indicates I'm right and wrong at the same time (the direction). Hmmm... rewrite time!

Edited by submix8c
Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
  • Recently Browsing   0 members

    • No registered users viewing this page.
×
×
  • Create New...