Home1
Web Designer Resources Tue Dec 15, 2009 10:54 am
Russel
Moderator
Posts : 825
Points : 50
Age : 34
Location : Philippines
Browser :
The information listed below is collected from other members who do web designs and web development on a daily basis. I take no credit for what I am sharing, but the information presented below is invaluable. The links at the bottom are from my personal collection.
Its great information for the novice designer, to the professional.
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.
What Makes a Web Page?
A webpage consists of three things.
* HTML (Structure)
* CSS (Design)
* PHP, MySQL, ASP, JS (Site Behavior)
Related Reading...
Understanding Web Design - Jeffrey Zeldman - A List Apart
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.
Behavioral Scripts and Languages
Javascript
PHP
MySQL
ASP
Related Reading...
HTML Beginner Tutorial - HTML Dog
CSS Beginner Tutorial - HTML Dog
Developing with Web Standards - Roger Johansson - 456 Berea Street
----------------------------------------
----------------------------------------
Resources to bookmark
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.
/* Position Is Everything */
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.
CSS Standards & 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 Max Designs: 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.
The 960 Grid System
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.
Set My Browser Size
A nifty online tool for setting your browser size while doing Web design
Lorem Ipsum Generator
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.
Nifty Corners
Tutorials on creating rounded corners without images.
All credits to Google. I have only compiled the important research.
Regards,
Russel
Its great information for the novice designer, to the professional.
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.
What Makes a Web Page?
A webpage consists of three things.
* HTML (Structure)
* CSS (Design)
* PHP, MySQL, ASP, JS (Site Behavior)
Related Reading...
Understanding Web Design - Jeffrey Zeldman - A List Apart
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.
Behavioral Scripts and Languages
Javascript
PHP
MySQL
ASP
Related Reading...
HTML Beginner Tutorial - HTML Dog
CSS Beginner Tutorial - HTML Dog
Developing with Web Standards - Roger Johansson - 456 Berea Street
----------------------------------------
----------------------------------------
Resources to bookmark
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.
/* Position Is Everything */
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.CSS Standards & 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 Max Designs: 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.
The 960 Grid System
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.
Set My Browser Size
A nifty online tool for setting your browser size while doing Web design
Lorem Ipsum Generator
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.
Nifty Corners
Tutorials on creating rounded corners without images.
All credits to Google. I have only compiled the important research.
Regards,
Russel
