Website Design & Tools

INXS · May 4th, 2008, 07:29 PM

These types of threads pop up a lot, so, I have decided to inform some of you of what is what in the world of what we call, e-commerce!

Understanding the Web as a Medium

Television is a medium. Print is a medium. Radio is a medium.

The web is also a medium. As an interactive information medium, the beauty of the web is it can do this instantaneously, globally, and to a variety of devices (a.k.a. user agents) like web browsers, iPhones, Nintendo Wiis, as well as assistive technology for the disabled such as screen readers.

Related Reading...

Understanding Web Design - Jeffrey Zeldman - A List Apart

What Makes a Web Page?

There are three standards at work on any given web page.

HTML (Hyper-Text Markup Language)
HTML is a markup language (it's right in the name). To "mark something up" is to give it semantic and structural meaning. Markup is used to show relationships between items of content and describe that content.

When writing HTML don't think about "what do I want this to look like" - think about "what does this mean." This is what people mean by "semantics."
CSS (Cascading Style Sheets)
CSS is a presentational language. It is used to alter the visual (and aural and printed) appearance of a web page. Fonts, colors, borders, padding, margins, layout, positioning - these are all handled by CSS.

People used to use HTML tables to lay out web pages. This practice is out of date and frowned upon by the professional web development community. CSS was introduced in 1996 to provide web designers a way to make their websites look attractive.

Due to browser limitations, it wasn't until the first years of the 21st century when we were able to use it more-or-less as it was intended! In other words, there has been no excuse to use a table-based layout for at least 5 years.
DOM (Document Object Model)
The DOM is a bit more involved and confusing for beginners (and applies to more than just HTML). The DOM provides pathways and hierarchies for scripting languages (JavaScript, usually) to manipulate the structure and content of a document.

If you can imagine an HTML document as a nested tree, then you have an understanding of the DOM. Don't worry too much about it until you understand the first two.

Related Reading...

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

Helpfull Sites:
Test your web design in different browsers - Browsershots
Browsershots makes screenshots of your web design in different browsers. It is a free open-source online service created by Johann C. Rocholl. When you submit your web address, it will be added to the job queue. A number of distributed computers will open your website in their browser. Then they will make screenshots and upload them to the central server here.

— Modern browser bugs explained in detail!
Describes and demonstrates some of the bugs found in web browsers, and to show advanced CSS methods that work across all browsers.

Veerle's blog 2.0 - Webdesign - XHTML CSS | Graphic Design
A personal online journal source for topics ranging from XHTML/CSS to graphic design tips.

COLOURlovers :: Color Trends + Palettes
COLOURlovers™ is a resource that monitors and influences color trends. COLOURlovers gives the people who use color - whether for ad campaigns, product design, or in architectural specification - a place to check out a world of color, compare color palettes, submit news and comments, and read color related articles and interviews.

learn web standards :: css positioning
In this guide we'll learn about how to position elements using CSS, and clear away a lot of the fog that surrounds the idea of a layer.

css Zen Garden: The Beauty in CSS Design
CSS demonstrations of what can be accomplished visually through CSS-based design. Select any style sheet from the list to load it into this page.

css.maxdesign.com.au - CSS resources and tutorials for web designers and web developers
Step by step tutorials on using CSS to create background image lists, rollover lists, nested lists and horizontal lists.

Web Developer's Handbook | CSS, Web Development, Color Tools, SEO, Usability etc.

http://960.gs/
The 960 Grid System is an effort to streamline web development workflow by providing commonly used dimensions, based on a width of 960 pixels. There are two variants: 12 and 16 columns, which can be used separately or in tandem.

notserp007 · May 13th, 2008, 11:49 AM

Great list, I'm going to use those color scheme generators.

Also another great site for web tutorials:
http://www.w3schools.com

Dark_Itachi · July 2nd, 2008, 04:48 PM

Thanks dude

louai · July 13th, 2008, 05:30 PM

Very helpfull thnx you very very

-Sя.נσкєя · July 15th, 2008, 12:08 AM

Very helpful links. Thanks.

~~Dr-Chambers~~ · October 3rd, 2008, 10:30 AM

Nice list!

That unleash the fire graphic design is off the hook...Damn!

INXS · October 12th, 2008, 05:45 PM

updated.

jacqueseries · October 12th, 2008, 10:22 PM

thanks 4 d info!

May 4th, 2008, 07:29 PM	#1
INXS Please, talk to yourself. GSA Staff: Retired SOTW's won: 1 Join Date: Jan 2007 Location: Washington, D.C. Posts: 8,367 My Mood: Thanks: 25 Thanked 7 Times in 6 Posts	Website Design & Tools These types of threads pop up a lot, so, I have decided to inform some of you of what is what in the world of what we call, e-commerce! Understanding the Web as a Medium Television is a medium. Print is a medium. Radio is a medium. The web is also a medium. As an interactive information medium, the beauty of the web is it can do this instantaneously, globally, and to a variety of devices (a.k.a. user agents) like web browsers, iPhones, Nintendo Wiis, as well as assistive technology for the disabled such as screen readers. Related Reading... Understanding Web Design - Jeffrey Zeldman - A List Apart What Makes a Web Page? There are three standards at work on any given web page. HTML (Hyper-Text Markup Language) HTML is a markup language (it's right in the name). To "mark something up" is to give it semantic and structural meaning. Markup is used to show relationships between items of content and describe that content. When writing HTML don't think about "what do I want this to look like" - think about "what does this mean." This is what people mean by "semantics." CSS (Cascading Style Sheets) CSS is a presentational language. It is used to alter the visual (and aural and printed) appearance of a web page. Fonts, colors, borders, padding, margins, layout, positioning - these are all handled by CSS. People used to use HTML tables to lay out web pages. This practice is out of date and frowned upon by the professional web development community. CSS was introduced in 1996 to provide web designers a way to make their websites look attractive. Due to browser limitations, it wasn't until the first years of the 21st century when we were able to use it more-or-less as it was intended! In other words, there has been no excuse to use a table-based layout for at least 5 years. DOM (Document Object Model) The DOM is a bit more involved and confusing for beginners (and applies to more than just HTML). The DOM provides pathways and hierarchies for scripting languages (JavaScript, usually) to manipulate the structure and content of a document. If you can imagine an HTML document as a nested tree, then you have an understanding of the DOM. Don't worry too much about it until you understand the first two. Related Reading... HTML Beginner Tutorial - HTML Dog CSS Beginner Tutorial - HTML Dog Developing with Web Standards - Roger Johansson - 456 Berea Street ---------------------------------- ---------------------------------- Helpfull Sites: Test your web design in different browsers - Browsershots Browsershots makes screenshots of your web design in different browsers. It is a free open-source online service created by Johann C. Rocholl. When you submit your web address, it will be added to the job queue. A number of distributed computers will open your website in their browser. Then they will make screenshots and upload them to the central server here. — Modern browser bugs explained in detail! Describes and demonstrates some of the bugs found in web browsers, and to show advanced CSS methods that work across all browsers. Veerle's blog 2.0 - Webdesign - XHTML CSS \| Graphic Design A personal online journal source for topics ranging from XHTML/CSS to graphic design tips. COLOURlovers :: Color Trends + Palettes COLOURlovers™ is a resource that monitors and influences color trends. COLOURlovers gives the people who use color - whether for ad campaigns, product design, or in architectural specification - a place to check out a world of color, compare color palettes, submit news and comments, and read color related articles and interviews. learn web standards :: css positioning In this guide we'll learn about how to position elements using CSS, and clear away a lot of the fog that surrounds the idea of a layer. css Zen Garden: The Beauty in CSS Design CSS demonstrations of what can be accomplished visually through CSS-based design. Select any style sheet from the list to load it into this page. css.maxdesign.com.au - CSS resources and tutorials for web designers and web developers Step by step tutorials on using CSS to create background image lists, rollover lists, nested lists and horizontal lists. Web Developer's Handbook \| CSS, Web Development, Color Tools, SEO, Usability etc. http://960.gs/ The 960 Grid System is an effort to streamline web development workflow by providing commonly used dimensions, based on a width of 960 pixels. There are two variants: 12 and 16 columns, which can be used separately or in tandem. __________________ As long as people are still having premarital sex with many anonymous partners while at the same time experimenting with mind-expanding drugs in a consequence free environment, I'll be sound as a pound! Last edited by INXS; October 12th, 2008 at 05:44 PM.

May 13th, 2008, 11:49 AM	#2
notserp007 Lurker Join Date: May 2008 Posts: 3 Thanks: 0 Thanked 0 Times in 0 Posts	Great list, I'm going to use those color scheme generators. Also another great site for web tutorials: http://www.w3schools.com __________________ Last edited by notserp007; May 13th, 2008 at 11:51 AM.

July 15th, 2008, 12:08 AM	#5
-Sя.נσкєя Lurker GFX Skill: Novice Join Date: Jul 2008 Posts: 14 Thanks: 0 Thanked 0 Times in 0 Posts	Very helpful links. Thanks. __________________ Sя.נσкєя/-Sя.ĶŁőŵň214

October 12th, 2008, 05:45 PM	#7
INXS Please, talk to yourself. GSA Staff: Retired SOTW's won: 1 Join Date: Jan 2007 Location: Washington, D.C. Posts: 8,367 My Mood: Thanks: 25 Thanked 7 Times in 6 Posts	updated. __________________ As long as people are still having premarital sex with many anonymous partners while at the same time experimenting with mind-expanding drugs in a consequence free environment, I'll be sound as a pound!

Thread Tools
Show Printable Version Email this Page
Display Modes
Linear Mode Switch to Hybrid Mode Switch to Threaded Mode

July 2nd, 2008, 04:48 PM	#3
Dark_Itachi Lurker Join Date: Jun 2008 Posts: 12 Thanks: 0 Thanked 0 Times in 0 Posts	Thanks dude

July 13th, 2008, 05:30 PM	#4
louai Lurker Join Date: Jul 2008 Posts: 13 Thanks: 0 Thanked 0 Times in 0 Posts	Very helpfull thnx you very very

October 3rd, 2008, 10:30 AM	#6
~~Dr-Chambers~~ Banned Join Date: Oct 2008 Posts: 7 Thanks: 0 Thanked 0 Times in 0 Posts	Nice list! That unleash the fire graphic design is off the hook...Damn!

October 12th, 2008, 10:22 PM	#8
jacqueseries Lurker Join Date: Oct 2008 Posts: 10 Thanks: 0 Thanked 0 Times in 0 Posts	thanks 4 d info!

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