Understanding Html and CSS

deathshadow, php.net is where i started too the comments on there are half the manuals

jQuery is a must, but focus on future frameworks like less css, you have no idea how much time you will save writing css

 

NOT... seriously, it's a must NOT, unless you are learning it JUST to realize what a bloated stupid steaming pile of crap it is -- anything useful built with it being the same size or smaller without it, everything else being crap that's either CSS' job or doesn't belong on a website in the first place.

Again, a fat bloated idiotic framework that typically results in MORE being less -- more half-assed pointless CSS that typically would be smaller, cleaner and more functional without that steaming pile of manure.

Both the "frameworks" you just listed? People are DUMBER for them even having existed! Saves time? Saves effort? Makes sites better?

BULL FREAKING ****!!!!!

 

have you even used the less framework ? wtf are you talking about pile of sh7t ?

just because you can use notepad to type your manual commands, that doesn't make you right

lets put your theory to the test

Simple Example

HTML

<header>​

<div class="top">​

<a href="#1">Link 1</a>​

<a href="#2">Link 2</a>​

</div>​

<div class="bottom">​

<a href="#1">Link 1</a>​

<a href="#2">Link 2</a>​

</div>​

</header>​

​

Regular CSS


header {
background:#555;
padding:10px;
margin:0 auto;
width:60%;
}

header a {
padding:0 10px;
}

header .top {
background:#555;
border-bottom:1px solid #888;
display:inline-block;
width:100%;
}

header .top a {
float:right;
margin-right:10px;
background-color:#ccc;
color:white;
}

header .bottom {
background:#555;
border-top:1px solid #fff;
width:100%;
display: inline-block;
}

header .bottom a {
float:left;
margin-left:10px;
background-colorurple;
color:red;
}

Less CSS

header {
@bc(#555);
@p(10);
@w(60%);
@m(0,auto);
a { @p(0,10); }
.top {
@bb(1px solid #888);
@bc(#ccc);
@dib;
@w(100%);
a {
@fr;
@mr(10);
@bc(#ccc);
@c(white);
}
}
.bottom {
@bt(1px solid #fff);
@bc(#555);
@dib;
@w(100%);
a {
@fr;
@ml(10);
@bc(purple);
@c(red);
}
}
}


You tell me what's easier to manage, work with, troubleshoot & write, classic css ?

bull crap, nested CSS is the way to go, I'm not even showing you predefined functions like


.gradient (@origin: left, @start: #ffffff, @stop: #000000) {
background-color: @start;
background-image: -webkit-linear-gradient(@origin, @start, @stop);
background-image: -moz-linear-gradient(@origin, @start, @stop);
background-image: -o-linear-gradient(@origin, @start, @stop);
background-image: -ms-linear-gradient(@origin, @start, @stop);
background-image: linear-gradient(@origin, @start, @stop);
}
now I can do this.
a {
.class1 { .gardient('top', #fff,#444); }
.class2 { .gardient('top', #444,#ccc); }
.class3 { .gardient('top', #eee,#aaa); }
}


while using regular css you will have to write it like

a.class1 {


background-color: #fff;
background-image: -webkit-linear-gradient('top', #fff, #444);
background-image: -moz-linear-gradient('top', #fff, #444);
background-image: -o-linear-gradient('top', #fff, #444);
background-image: -ms-linear-gradient('top', #fff, #444);
background-image: linear-gradient('top', #fff, #444);

}


a.class2 {

background-color: #444;
background-image: -webkit-linear-gradient('top', #444, #ccc);
background-image: -moz-linear-gradient('top', #444, #ccc);
background-image: -o-linear-gradient('top', #444, #ccc);
background-image: -ms-linear-gradient('top', #444, #ccc);
background-image: linear-gradient('top', #444, #ccc);
}


a.class3 {

background-color: #eee;
background-image: -webkit-linear-gradient('top', #eee, #aaa);
background-image: -moz-linear-gradient('top', #eee, #aaa);
background-image: -o-linear-gradient('top', #eee, #aaa);
background-image: -ms-linear-gradient('top', #eee, #aaa);
background-image: linear-gradient('top', #eee, #aaa);

}


Your classic CSS still faster ? I think not

 

Here look at it indented, so easy to find all elements

 

u also set your variables for global usage,

If i'm using red on my website as primary color, and i have different elements throughout the site such as right borders, left borders, background images, font colors, hover colors etc, I'm going to update the color change in 1 area not jump around all my css files making changes. Static css is the past, new objectO css is the future.

 

I am a firm believer that any changes to a website should be for a user's benefit, not to make things better for the webmaster. That's why I am against LESS CSS, because it makes the user's experience slower.

Look at lesscss.org for an example of a slow loading, poor performing site. My site, nonflashgames.com, runs faster with ads than lesscss runs without!

By the way, I'm running Chrome on a 4GB RAM Win7 laptop.

 

Make a stand. Create your own website for you to practice your learning experience about HTML and CSS. You will definitely learn more if you apply what you have got. It is also important to expand your skills and enhance your creativity in developing your site.

 

That CSS version is an artificially inflated mess of garbage -- and the LESS version is so uselessly and pointlessly cryptic it makes a BASH script look good!

Though the markup is no winner either :/ But then I don't believe HTML 5's garbage HEADER tag serves any legitimate purpose. (just like 90% of the markup in the HTML 5 spec, it's pointless code bloat).

But, leaving that markup alone...

header .top {
	background:#555;
	border-bottom:1px solid #888;
	display:inline-block;
	width:100%;
}

header .bottom {
	background:#555;
	border-top:1px solid #fff;
	width:100%;
	display: inline-block;
}

Code (markup):

.top and .bottom are DIV, they are by default auto width expanding. There is NO legitimate reason to be setting these to inline-block; much less 100% width + 1px border makes them larger than their parent which can lead to all sorts of headaches... but worst of all is they share so many properties, why the blue blazes declare them more than once? Declare one, then change the other! Oh, and if the background is the same as the parent, why are you setting a background?!?

header .top,
header .bottom {
	overflow:hidden;
	zoom:1;
}
	
header .top {	
	border-bottom:1px solid #000;
}

header .bottom {
	border-top:1px solid #FFF;
}

Code (markup):

Should be functionally identical in 99% of cases.

Of course the lack of proper float wrapping behavior is another issue I addressed there, I suspect that's what you were abusing inline-block for, which is why that code would result in four different appearances in four different browser engines! Particularly since setting inline-block on DIV means IE is going to make a right mess of things. (since prior to 9 it can't even do that!)

Though really for that styling if I was attempting the same thing...

header {
 background:#555;
 padding:0.7em;
 margin:0 auto;
 width:60%;
}

header a {
	display:inline-block;
	padding:0 0.7em;
	margin-right:0.3em;
	color:#FFF;
	background:#808;
}

header .top {
	text-align:right;
	border-bottom:1px solid #888;
}

header .bottom {
	border-top:1px solid #FFF;
}

header .bottom a {
	margin:0 0 0 0.3em;
	color:#F44;
	background:#A0C;
}

Code (markup):

Which laughably is so close in size to your less version as to make no never mind... (though I'd have to play with the padding's a bit)

But as to the LESS version, you REALLY think that uselessly pointlessly annoyingly cryptic code is an improvement? Maybe I'm weird, but I'd rather have words that mean something than a bunch of endless cryptic two and three letter abbreviations that are the antithesis of clean and clear coding practices. If that means a few more bytes, OH WELL. There's an article on IBM's Linux dev website that I often point people at on the subject of clear comprehensible code:
http://www.ibm.com/developerworks/linux/library/l-clear-code/

I'll never understand why people would actually choose to use classes like "fr" or "gt5xp" or do the same with their variables -- why you'd extend that half-assed idiotic practice to CSS properties is even harder to fathom! It's like people WANT this to be difficult or something; making CSS harder to use than RCA 1802 machine language!

... but this type of fashionable "wah, wah, I don't wanna type" idiocy makes rounds every few years; I've seen these delphic practices be a sick fad in development at least five times over the past three decades; only to be slapped down by the people with enough brain cells to realize it goes far, far past being concise into the land of being abstruse at best, arcane at worst! See nonsense like "Rust" -- the language for people who think C++ is a little to clear and verbose -- which is akin to the Puritans leaving England for Massachusetts because the CoE was a little too warm and fuzzy for their tastes.

Much less that with all that indenting crap thanks to it's adding more brackets make it harder to follow the more properties you inherit from... and even with it you end up scrolling up and down too blasted much to even figure out what the hell element's properties you are looking at.

... and that's before talking the performance hit. (or that some people are dumb enough to try and actually deploy the JS only version)

Of course if people spent more time declaring like properties together, used condensed properties, and didn't "keep throwing endless DIV at things for nothing" they probably wouldn't need "crutches for the halfwits" like LESS, JQUERY, etc, etc... but again why I say there it little excuse for most normal websites to need more than 32k of CSS FOR THE ENTIRE SITE, or for larger systems like forums to need more than 64k of CSS FOR THE ENTIRE FORUMS apart from ineptitude on the part of the developers.

Really if LESS provides any significant improvement, you're probably doing something wrong in the first place with your CSS! It seems to be yet another of these tools designed to let people sleaze out their code any old way, who cares if it's efficient, easy to maintain, easy for someone else to grasp, easy to learn, easy to deploy, or provides any significant real world benefit. It's why I lump it alongside other asshat practices and tools like Dreamweaver, Frontpage, jQuery, OOCSS, YUI, Mootools, Blueprint, Grid960, etc, etc... None of which I have EVER seen used to make a website that was worth a flying purple fish! -- Though I have watched them be used to destroy perfectly good websites that as a user, I no longer visit and am pretty much a guaranteed bounce for.

But to be fair, after some three plus decades you get a little sick of watching people make the same blasted mistakes over and over and over again.

BTW, you don't have to post an image, there are CODE tags on forums for posting code.

 

^^^

LESS 15 Lines of Code

.gradient (@origin: left, @start: #ffffff, @stop: #000000) {
background-color: @start;
background-image: -webkit-linear-gradient(@origin, @start, @stop);
background-image: -moz-linear-gradient(@origin, @start, @stop);
background-image: -o-linear-gradient(@origin, @start, @stop);
background-image: -ms-linear-gradient(@origin, @start, @stop);
background-image: linear-gradient(@origin, @start, @stop);
}
a {
.class1 { .gardient('top', #fff,#444); }
.class2 { .gardient('top', #444,#ccc); }
.class3 { .gardient('top', #eee,#aaa); }
.class4 { .gardient('top', #ee2,#aaa); }
.class5 { .gardient('top', #ee3,#aaa); }
}

Code (markup):

CSS - 40 Lines of Code

a.class1 {
background-color: #fff;
background-image: -webkit-linear-gradient('top', #fff, #444);
background-image: -moz-linear-gradient('top', #fff, #444);
background-image: -o-linear-gradient('top', #fff, #444);
background-image: -ms-linear-gradient('top', #fff, #444);
background-image: linear-gradient('top', #fff, #444);
}
a.class2 {
background-color: #444;
background-image: -webkit-linear-gradient('top', #444, #ccc);
background-image: -moz-linear-gradient('top', #444, #ccc);
background-image: -o-linear-gradient('top', #444, #ccc);
background-image: -ms-linear-gradient('top', #444, #ccc);
background-image: linear-gradient('top', #444, #ccc);
}
a.class3 {
background-color: #eee;
background-image: -webkit-linear-gradient('top', #eee, #aaa);
background-image: -moz-linear-gradient('top', #eee, #aaa);
background-image: -o-linear-gradient('top', #eee, #aaa);
background-image: -ms-linear-gradient('top', #eee, #aaa);
background-image: linear-gradient('top', #eee, #aaa);
}
a.class4 {
background-color: #ee2;
background-image: -webkit-linear-gradient('top', #ee2, #aaa);
background-image: -moz-linear-gradient('top', #ee2, #aaa);
background-image: -o-linear-gradient('top', #ee2, #aaa);
background-image: -ms-linear-gradient('top', #ee2, #aaa);
background-image: linear-gradient('top', #ee2, #aaa);
}
a.class5 {
background-color: #ee3;
background-image: -webkit-linear-gradient('top', #ee3, #aaa);
background-image: -moz-linear-gradient('top', #ee3, #aaa);
background-image: -o-linear-gradient('top', #ee3, #aaa);
background-image: -ms-linear-gradient('top', #ee3, #aaa);
background-image: linear-gradient('top', #ee3, #aaa);
} 

Code (markup):

Do the math, this is just for 5 classes, where a typical site will have 100s if not more.

I think you're just afraid of change, procedural programming worked back in the day too, still works today, yet nobody codes like that anymore ? any idea why ? cause there are more efficient ways of doing things

 

This is becoming a heated debate!

In my opinion LESS css is great for some things, most commonly large development environments, and could be useful for quickly developing applications with dynamic css (color/style switchers, ect.). I would never use a less file coupled with their javascript to render it on the site - but anyone who has actually used LESS should know you can pre-compile them aswell. That's where it can be useful for large development environments when you are still working out design changes.

After that, in my opinion you should always try to minify things as much as possible, both css and js. I'm a realist though, sometimes the size of what you are developing means that an extra 10kb of css files won't make the slightest difference. Use what works for you, everyone has a development style. If you are working with large projects and high-volume traffic, that's when you need to keep everything a light as possible.

A few other comments to add to the discussion:

@cadsii, "I think you're just afraid of change, procedural programming worked back in the day too..." - LESS is not object oriented, you do not instantiate objects. It is still procedural

@deathsahdow, As for jQuery being useless, I think that is way off. There are a ton of great uses and a minified jQuery file is not going to bloat things in the slightest if you're utilizing it. I agree, many of the animations or transitions it was used for in the past can now be more effectively done with css/css3, but when it comes to working with the DOM, it is a brilliantly handy tool that saves a lot of code on larger projects. Writing the same code in plain js vs jquery also takes much longer for many tasks, and the sacrifice in performance is only ever present on the smallest of applications (where it doesn't really matter anyways). I highly respect your approach to keeping everything light because that means accessibility to people world-wide with limited connections, but the reality is many people are only building applications for a market/audience that has high-speed connectivity. Lightweight is great, but not always the first priority.

"None of which I have EVER seen used to make a website that was worth a flying purple fish!" You included jQuery in that list, which I think was a big mistake. To start, any site in wordpress includes a native jQuery file, so let's think - techcrunch? About a million others? I don't have a stat, but I know that you will be surprised if you research the actual percentage of sites on the web utilizing jQuery. It is a very powerful tool which has been extended and supported continuously by thousands of very talented and innovative developers.

Personally, I am excited to play with and learn about new technologies each day and encourage the continual progress of frameworks. Sure, sometimes we explore things that are not necessarily better - but that leads us on a path to finding what really does work. Nothing is learned without exploration. We're learning how to best utilize what we have today in order to build the languages and methods of the future.

Cheers!

 

cheers ! great debate, i guess you use what ever works for you best, everyone has their preferences

nice solid points though

 

Again, loaded example:

-webkit- no longer needed as of Webkit 535, all vendor prefixes will be dropped in Chrome and Opera when Blink is deployed.

-moz- no longer needed as of FF 16.

-o- dropped as of Opera 12

-ms- NEVER existed for linear-gradient, support in IE10 is without prefix, IE9/lower must use 'filter'

If you have enough linear gradients for that cryptic nonsense to make a difference, I don't even want to think about how much CPU and RAM that's sucking down (especially in FF) given how lousy generated backgrounds are on performance... much less if you need more than say... eight of them, there's probably something wrong with your site conceptually. Of course if a site has or needs 'hundreds of classes' there is probably something horiffically or terrifyingly WRONG with it's markup; for example slapping endless DIV and SPAN around things that should be semantic tags -- or just slapping endless pointless presentational classes on everything like the idiotic BULL turdrpess has the unmittigated gall to call a menu. (and shove down your throat separate from the skinning system)

Though yes, I see poorly written half-assed garbage markup like that vomited out by people who have no business even making websites pretty much daily. For people who fail to grasp semantic markup, the cascading part of CSS, separation of presentation from content, responsive layout, and the dozens of other improvements of the past fifteen years, and instead are still writing code in 'transition' from 1997 to 1998 practices, and now just slapping 5's lip-service around the same bloated broken inaccessible code -- those folks MIGHT see some advantage to LESS.

You know, the type of maladroit halfwits who see nothing wrong with code like this:

<li class="menu-item menu-item-type-post_type menu-item-object-page menu-item-5322">

Code (markup):

or worse this level of outright ineptitude:

<div id="wm-ipp" style="display:none; position:relative;padding:0 5px;min-height:70px;min-width:800px; z-index:9000;">
<div id="wm-ipp-inside" style="position:fixed;padding:0!important;margin:0!important;width:97%;min-width:780px;border:5px solid #000;border-top:none;background-image:url(/static/images/toolbar/wm_tb_bk_trns.png);text-align:center;-moz-box-shadow:1px 1px 3px #333;-webkit-box-shadow:1px 1px 3px #333;box-shadow:1px 1px 3px #333;font-size:11px!important;font-family:'Lucida Grande','Arial',sans-serif!important;">
   <table style="border-collapse:collapse;margin:0;padding:0;width:100%;"><tbody><tr>
   <td style="padding:10px;vertical-align:top;min-width:110px;">

Code (markup):

Though such folks would be much more well served by having a rectal extraction performed to separate them from 1997-2001 practices, and actually writing less code to do the same job instead of using some garbage cryptic crutch like LESS to try and have it do the work for them.

Show me change that offers legitimate improvement without pissing away accessibility, deployability and sustainability, I'll be on it like a pig on slop. LESS doesn't provide that any more than anything else I listed.

I'm assuming you're talking in general -- in which case why hasn't PHP moved EVERYTHING to objects? C++ still relies on endless procedures as are most includes. That statement is just ignorant nonsense.

Objects have their uses, so does procedural, it's important to know when to use either -- and I fail to see what that has to do with this discussion, unless you want to drag that train wreck of presentational use of classes and pissing away the entire point of using CSS known as OOCSS into the mix... which while called "object oriented CSS" has nothing to do with real OOP and is more of a "let's justify pre CSS and non-semantic markup practices" sort of rubbish.

Of course, talking about "procedural back in the day" gave me a good chuckle, since I was writing smalltalk and object pascal in the '80's... I'm guessing here, but I have the feeling that <scotty>Laddy, I was writing OOP when you were still in diapers!</scotty> -- or maybe even before you were a twinkle in your father's eye? (Might be a wrong guess, lord knows I get people throwing that one in my face as a guess often enough)

------------------------------------------

Minified, by ITSELF Jquery is HALF my ideal template size -- that's HTML + CSS + SCRIPTS + IMAGES. I see more than 30k TOTAL javacript on a website, 99% of the time the site is inaccessible broken crap I cannot fathom how/why anyone would even want to visit - unless of course it actually qualifies as a true web application.

Of which is likely barely 4k of it's unminified codebase... and encourages scripted crap that to be brutally frank also has no business on a website. Quite literally there's no reason for what it provides for DOM access enhancement to take more than 5k of code done 'properly', without any whitespace stripping idiocy.

But then, in the age of gzipped delivery I consider whitespace stripping to just be another way of sweeping bad code under the rug and pretending there's nothing wrong with it; It's quite literally the opposite of Big-Iron style "charge by the K-Loc" and is just as sleazy a practice in most cases.

... and I call these people... well, I'll omit the rather lengthy string of expletive bile for now.

... and turdpress tops my list of buggy inaccessible broken crap that I'm shocked anyone would be dumb enough to want to use. Jquery has only made it worse.

A site that was an inaccessible wreck BEFORE they added the jquery crap, but at least loaded in a reasonable amount of time and could be compensated for with zoom or user.css -- but in recent years has become such a painfully slow (minute plus firstload) steaming pile of manure thanks to the HUNDREDS of separate javascript files and 1.7 MEGABYTES OF SCRIPTING CRAP that I gave up on visiting them quite some time ago. You know that "any amount of BS users will put up with" for content of value I mentioned? Well, for me there is a line -- and they crossed it for what I'll put up with years ago... -- as evidenced by the 160k to 170k of non-semantic markup to deliver two dozen content images and 18 to 20k of plaintext; anywhere from three to five times as much markup as should be needed on such a simple site. Then they threw endless pointless scripting asshattery at it making it even HARDER to use and painful to wait for, because throwing more code at it is ALWAYS the best answer... RIGHT...

Actually I'm quite aware of it as more and more sites become less and less useful to me as a user, much less as a developer!

See, I consider the people using it to be lazy sleazeball {string of expletives omitted} who have no business making websites in the first blasted place! Anything worth doing in it can usually be done in as little or close to as much code without the library, and anything else is crap that doesn't belong on websites in the first place!

 

BTW, most of the above is just a lather, rinse, repeat of something I wrote a while back:

Scripting:
http://techtalkin.com/Thread-So-what-s-wrong-with-your-website-PART-3

CSS:
http://techtalkin.com/Thread-So-what-s-wrong-with-your-website-PART-4

 

@deathshadow, it's amazing you will spend so much time insulting others and spreading your 'opinion' as if it's the word. You are not always right, get it in your head. If you were you would not be spending the time you do writing up posts no one really reads, and instead be up to your neck with work.

What do you get out of this? Is this marketing to you? Do you think you're helping people? I personally don't care what you think you know, as it won't affect the money in my pocket and the pockets of many business owners who I work with. Simply put, you are a forum bully!

As stated in posts other than this, I agree with some of what you say - but your tone and lack of practical knowledge makes you look not just like an ass, but a total idiot in my opinion. Stop wasting your time bringing down the value of conversations and either find a way to positively contribute or go and do something more productive. Perhaps develop something that actually pays your own bills then maybe people will listen to you. Wouldn't help to work on your attitude either.

Cheers

 

Good Show Krisism.
You are right on point.
This guy is just a Troll.
He has nothing better to do.

 

I would say that 12 years ago, web design was pretty easy (if you didn't mind learning html). Writing your code in html took a long time, but anyone could do it using "note pad," or "simple text." Now web design has become a bit more complex.
With html, you could make a page with text and images, maybe add some forms so that your visitor could type the name and address on your page. Those were the good old days.

In the mid 90's, people started to create applications that would write the code for you. One of the first ones that comes to mind is, "Netscape Gold." With this application, what took you hours to code in html would take about 5 minutes. Netscape Gold would let you drag and drop and you were done.

Netscape Gold was one of the first wysiwygs (pronounced wiz-eee--wig,,,,"what you see is what you get").
Now there are many wysiwygs. Therefore, people that don't know any code can create web pages. Some of the most popular wysiwygs are;

DreamWeaver (MacroMedia, now Adobe)
Go Live (Adobe, I don't see how long it will be around)
Frontpage (MicroSoft) Yuck!

I would say that those are the big three. But these days, almost any application, even word or MicroSoft Publisher will create a web page for you with the click of a button. Of course those applications write terrible code (we'll talk about that later).

The Web Sites of Today


Things have changed greatly since the mid 90's. Now people visit the grocery store, order movie tickets, download movies, sell their cars, watch their stock portfolios and more, all via the internet.

What you see on most web pages cannot get done just using Html. The net has evolved to the point where to develop almost any web page, the developer must be aware of, if not understand, many languages and file formats.
So here is a little summary of what does what.


CSS


In today's web sites, CSS is the thing to know. With CSS you can do some amazing things in your web page. CSS is created to "format" you page. CSS is like having Word in the Html language. You can set point sizes, fonts, and more. I would go more in depth here, but to someone that is totally new to web design, if I gave more examples, then you would have no clue what I'm talking about.

Today, most wysiwygs write CSS for you, as well as your html.



JavaScript


So, we have html for structure, css for formatting the page. But what about interactivity. What if when someone visits your site, you have a picture, and when the user rolls their mouse over the picture, they see a new image that says, "You just won the lottery! Yeahhhhhhhh!."

You can't do this with html, but you can with JavaScript. With javaScript, you can create games, clocks, just about anything. With JavaScript you can use "conditional statements."

This means you can say;
If the mouse rolls over the image over there, then, show the viewer this image here.
If the mouse rolls away from the image, then, show the original image.
If the mouse clicks the image, then, go to CNN's website.
This is interactivity. This is JavaScript.


So there you have it. Html, Css and JavaScript, all working together on one web page.

If you know each of these languages, then you can sit down with "note pad" and just write the code to make a web site. But I would say it would take you a good 3 months of study (constant study) to totally understand the code so that you could use it.

What Wysiwygs Do for you Today.


Today, DreamWeaver, Go Live and even FrontPage will write html, css and javascript for you. As you are in these applications, placing an image here and an image there, the application is writing html, css and javascript for you. Isn't it a beautiful life? Maybe, maybe not.

It's a Wonderful World of Wysiwygs


Well, maybe. The problem is that when you are working in a wysiwyg, at some point, something will go wrong. The application will put the code in the wrong spot and what you spent 4 hours to prepare doesn't work. This is when you might have to go into the code and fix it by hand.
On the other hand, when I'm working on this web site, I usually work in about 5 applications all at the same time. I might do my text in Word, my images in Photoshop, my animations in Flash, my rollovers in Fireworks and to put it all together, then I would be using Dreamweaver. This being the case, I have to copy and paste the code going from one application to the next. If I don't know anything about the code, then I don't know where to copy and paste what,,,,where.

Now don't be worried, this sounds complex and it can be, but I'm just showing you the big picture. Most likely, you won' t (right????).


Viewing Code on Anybody's Web site.


For what it's worth, if you are on anybody's website, to see their code, all you have to do in the browser is go to the "view" drop down window and select "source." Give it a try on this page. If you do that, now you can see all of the code that was used to develop this page.

There's More!


So now you have your webpage all set up. You have articles, pictures, background colors of your page, and now you want people to be able to type in their name and address and put that in a data base.

Ut,,,,Ohhhhhh........More Languages.


When you have the user input information on your site, the items used to take in the information are called "forms." With these forms you have options such as input text boxes (type text), radio buttons, check boxes and drop down selection boxes.

The forms are easy to create in any of the wysiwygs. But registering, recording and transferring the information into a manageable data base is a whole different story.
One of my best friends that is an excellent web developer says, "There is no such thing as a simple form."
Now let me tell you about this guy. He can write html, css, javascript and more, all by hand and,,,,most likely, he could do it while in his sleep.

So why is there no such thing as an easy form. Here we go.

Front End, Middle Ware, Back End.


Here are some terms that you will hear especially if someone is doing a website for you.
Front End. Also known as "client side." When you hear, "Front End," think of yourself, sitting at the computer, looking at the web page, in the browser. The Front end is how the web page looks. It's images, the text and the forms and whatever else you might be seeing.
Some web developers only work on the front end, the client side. This where where you create the appearance of the page.

Back End. Server Side.


When you hear these terms, think of the data base where the information from the forms will be stored. When you hear the term, "server," just think of a computer that stores information. You can make your own computer a server.
To store information in a data base, you need web, data base software. Some of the most popular softwares are MicroSoft's Access, Filemaker (Apple), then there is Oracle, and there are others. Each of these softwares could take a month or so to "master?"

These softwares create little areas in their databases called, "fields." Fields store the addresses, email addresses, phone number, credit card information from the form where your web site visitor typed in the information.
So, you have the front end, you have your database set up on the backend, but there is still more to learn. We don't have a way for the front end to talk to the back end, so, we need Middle Ware.

Middle Ware


Middle Ware languages let the form information on the browser transfer to the appropriate field on the back end, in the data base. Here are some languages that let this happen.
CGI (Common Gateway Interface)
ASP (Active Server Pages)
PHP
Coldfusion(a MacroMedia software that comes bundles with DreamWeaver.
With middle ware software, you write the code that lets the front end talk to the back end.

Let's Summarize


On the Front End you will need;
Html, css, javascript and maybe some Flash.
To get your images ready to go on your pages, you will need some image manipulation software like PhotoShop or Fireworks. And if you want animation, you might want to use some Flash.
On the back end you'll need some data base software.
For Middle Ware, you'll need to understand a language that will let the front end talk to the back end.
Pretty simple ehhhh? What do Ya Think.

There's More.


Once you have your pages ready to go for the world to see, then you'll need three more things.
A domain name. This is a registered name for your site like Disney.com, Nbc.com, Cnn.com, abc.com, espn.com, maryloubob.com. This will cost you somewhere between 5 to 50 dollars depending on where you get it.
A Web Host. This is a place to store all of your web pages on a computer somewhere so that the world can see them.
Finally, you will need a FTP (file transfer protocol) application. What this does is transfers all of your images, pages and forms to the web host so that the world can see them.

Super Summary


Are Ya scared? Did I give you a little bit too much information? Let me say this. I know very few people that know how all of these languages and applications works. Usually web developers will have specialties that they confine themselves to.
Many developers will only do front end work. Others will only work on middle ware and back end. If you understand the front end and need some forms, then many people will pay someone to do the backend work. So don't worry. Whatever you don't understand, there is someone out there that you can pay to create the portion of page development that you don't understand.

In closing let me say this. For every language and application that I have mentioned, there is a 1200 page book at Barnes and Noble that you can buy that will teach you how each one works. This one page document is just a summary.
I personally am a front end guy. I use Dreamweaver, Photoshop, Flash and some video editing software for my pages. I can write html and css from scratch. I understand the concepts behind JavaScript, but I can't write the code. If I need backend work, I pay somebody.

If you are knew to web development I hope this gives you an idea of where to start on your path to enlightenment. If you have questions or comments, then please email me.

I teach html, DreamWeaver, Photoshop, Flash and Fireworks. I do it via web conferencing which means that you can be anywhere on the planet, and you and I can connect live, in real time on the net, and you can start learning.
So best wishes in you internet development lives.

 

Totally Agree !

No use for jQuery, lol get a life go type on notepad with his 25KB responsive text websites that belong in the 90s lol...

Times are changing sites need to be more interactive, jQuery gives you great ability to do that passing Ajax etc

This guy either

A. Needs to get laid because he has too much time on his hands

or

B. Needs to get laid because he has too much time on his hands

 

lol @ never using jQuery.
Even google uses and endorses it.

 

@Krisisim -- Ah yes, cannot argue the methodology being idiotic, so directly attack the individual saying it... *SIGH* - admittedly, I target the entire group of people using said broken, half assed technologies that do nothing but make websites slower, less useful, and harder to maintain, sustain or revise, pissing away anything resembling accessibility -- but nobody wants to hear the truth or have their ineptitude aired for the world to see.

Broken practices that result in inaccessible websites SHOULD be called idiotic, broken, half-assed, and a whole host of other expletives, but no. Let's all be apologists for the folks who sleaze out pages any old way, that will make EVERYTHING better. Let's all slap the rose coloured glasses on each-other's heads, and lead ourselves down the garden path to sing kumbaya around a drum circle. That'll make everything better!

If trying to make better websites and trying to convince others to do the same, if calling a turd a turd, broken methodologies exactly that, and in general trying to stamp out bad, sleazy practices means I'm a "bully" -- then booyah, I'm a bully. Just like Simon Cowell, Gordon Ramsay, Charlie Fratelli or George S. Patton Jr. are/were "bullies". I consider myself in good company!



... and in that way I find the apologists, sleazeballs who don't care if people can actually use their sites, and general laissez-faire attitude far more offensive than an entire truckload of profanity.

Though learning business in the '80's and a period of military service may have coloured my attitude greatly -- but this limp-wristed namby-pamby garbage that seems to be status quo is outright offensive; far more so than anything I've said in this thread so far... but that goes hand in hand with the disgust to the point of nausea I developed for the industry as a whole long before I retired.

-----------------------------------------------------------

@howDoYou, jquery may be hosted on Google code, but that doesn't mean Google is actually using it! What sites/subsections of their stuff are they using jquery on.... Oh wait, NOTHING!!!

Is there jquery here?
https://www.google.com/

Uhm... no... how about here then?
http://mail.google.com

Uhm... no.... what about image search? plus? docs? those are all javascript heavy and there's NO jQuery to be found!!!

It's hosted on Google code, BIG HONKING DEAL! I could wipe my backside, call it code, and upload it to Google Code just like I could sourceforge -- doesn't mean Google endorses or uses it!

Had someone not that long ago say Yahoo uses it too -- which is funny since they have their own bloated garbage called "YUI" why would they use someone else's?!?

@HBK, we know someone is up to date when they repeatedly mention Frontpage or even suggest it's something that should be used to build websites. It was only discontinued by Microsoft a decade ago... Much less advocating WYSIWYGS pretty much means you've got a nasty case of "accessibility, what's that?!?" going on.

But again, GOD FORBID anyone advocate clean clear minimalist code with accessibility, or be passionate about one's craft.

------------------------------------------------------

Fine, go ahead everybody, just sleaze out your 1997 style idiotic inaccessible garbage sites that nobody actually wants to use or even can use -- who cares if you're using hundreds of separate files consuming megabytes of bandwidth in the middle of a bandwidth crunch since nobody is investing in new infrastructure... Who cares about the blind, the infirmed, the rich, the poor, the on the go, the at the desk, they're only a small percent of visitors... .who cares if we ignore this 3%, this 1%, this 1%, this 2% over 200 separate groups to the point we've alienated anyone who would ever want to visit a website. "It's our choice" or "a matter of style", or "our target audience". RIGHT.

Sounds like just more lame excuses to me.

 

Oh, almost forgot:

Just as amazing as the amount of time and expense I've put into helping out others out of the goodness of my heart since I've been retired and on doctors orders not to work.

I'm a old school New England Yankee -- we'll insult you to your face right before we give you the shirt off our backs and a fiver... as opposed to the rest of the world where you smile, tell everyone everything is fine, and walk away without helping. (and having traveled a good deal, that's what I came away with as my impression of RoW)

As to my opinion being "the word" -- My opinion is based on the reason HTML was created by TBL, the reason CSS was created, the reason things were not adopted into HTML 4 STRICT and why many things were obsoleted and deprecated in it (yes, those are two separate things), the actual HTML and CSS specifications, accessibility guidelines like the WCAG, accessibility studies and usability documents joint created by IBM, Apple and Microsoft some two decades ago, an understanding of network traffic, handshaking, caching, and a general understanding that desktop resolution screen is not the only thing HTML and CSS exist to target... and three decades and some change of writing software on everything from hand-assembled 8 bits at a time on toggle switches right up to modern double-entry accounting databases.

What's your's based on? Feel good back-slapping complacency? No offense, but that's what it sounds like.