aspose file tools*
The moose likes HTML, CSS and JavaScript and the fly likes HTML Desgin Patterns & JS Big Moose Saloon
  Search | Java FAQ | Recent Topics | Flagged Topics | Hot Topics | Zero Replies
Register / Login
JavaRanch » Java Forums » Engineering » HTML, CSS and JavaScript
Bookmark "HTML Desgin Patterns & JS" Watch "HTML Desgin Patterns & JS" New topic
Author

HTML Desgin Patterns & JS

Amit Arora
Ranch Hand

Joined: Jun 14, 2007
Posts: 30
Hi

I have never heard about the design patterns in HTML. Will this book provide some information on that?

Will this book provide information on advanced JS. Like how to use it to make your UI more attractive?


Amit Arora<br />SCJP 1.4, SCWCD
Mike Bowers
Author
Ranch Hand

Joined: Oct 08, 2007
Posts: 42
What is "Pro CSS and HTML Design Patterns"?

It is CSS book written for developers. It is full of patterns you can use to code web pages. Each pattern is a building block that you can combine with other patterns to create web pages.

By using these patterns, you will dramatically increase your productivity, your web pages will work reliably in all major browsers, and you will be following the best practices because you will be creating XHTML that is semantic and structural and using CSS to create styles and layouts.

Below is a concrete example of an XHTML/CSS design pattern. It is the Section design pattern and it is the basic building block of all web pages. It is discussed in detail in chapter 13 of my book.

<div class="section TYPE">
<HEADING> content </HEADING>
<BLOCK> content </BLOCK>
</div>

*.section { STYLES }
*.section.TYPE { STYLES }
*.section.TYPE HEADING { STYLES }
*.section.TYPE BLOCK { STYLES }
*.section *.section { STYLES }

Notice that the pattern is pseudo-code for XHMTL and CSS code. HEADING and BLOCK are not XHTML elements but are placeholders for any XHTML heading or block element. TYPE is also not a CSS class, but is a placeholder for a class that specifies a semantically meaningful identifier of the section, such as "introduction", "content", "example", etc. Thus, you can see that a pattern is generalized to work with a variety of XHTML elements and CSS classes.

The CSS code in the pattern is interesting because it shows that CSS does have some "object-oriented" capabilities, such as subclassing and inheritance. These selectors are discussed in detail in Chapter 3.

My book contains concrete examples of each design pattern, such as the following:

<div class="section introduction">
<h2>Introduction</h2)
<p>This paragraph is about the introduction.</p>
</div>

*.section.introduction { padding:10px; }
*.section.introduction p { margin-top:5px; }
*.section.introduction h2 { margin-bottom:10px; }
*.section.introduction { background-color:gold }
*.section.introduction *.section { margin-bottom:0; }

The 300+ examples in my book are posted at my website http://cssdesignpatterns.com
Mike Bowers
Author
Ranch Hand

Joined: Oct 08, 2007
Posts: 42
Does "Pro CSS and HTML Design Patterns" cover JavaScript?

Pro CSS and HTML Design Patterns does not teach JavaScript and it is not about JavaScript, but it does contain a few design patterns that use JavaScript. The purpose of these patterns is to show best practices for using JavaScript to style XHTML using CSS.

One best practice for using JavaScript with CSS is to use JavaScript to modify the class attributes of an element to dynamically change how the element is styled. This is the best way for JavaScript to modify the style of an element: CSS defines the style through a class and JavaScript dynamically assigns classes to elements.

As a complement to the best practice of using JavaScript to modify only the class attributes of elements, my book advocates selecting XHTML elements in JavaScript using the CSS selector syntax. This approach allows you to use the same CSS selectors to select elements in CSS and in JavaScript. Using the same selector syntax makes CSS and JavaScript code more intuitive and more maintainable. You have to read Chapter 17 of my book to see how cool this is.

To select elements in JavaScript using CSS selector syntax, you need a JavaScript library. I provide just such a library in my book. It is modular and extensible, and it makes it easy to dynamically style elements using this technique.

Lastly, I show you in the book how to use JavaScript without inserting a single line of JavaScript into the body of an HTML document! This is really cool stuff and makes for a very clean separation of design (CSS), structure (XHTML), and interaction (JavaScript)!
Bear Bibeault
Author and ninkuma
Marshal

Joined: Jan 10, 2002
Posts: 60063
    
  65

Originally posted by Mike Bowers:
Lastly, I show you in the book how to use JavaScript without inserting a single line of JavaScript into the body of an HTML document!

Indeed -- this is an increasingly popular methodology becoming known as Unobtrusive JavaScript. Libraries such as jQuery strongly recommend adhering to this principle.


[Asking smart questions] [Bear's FrontMan] [About Bear] [Books by Bear]
 
I agree. Here's the link: http://aspose.com/file-tools
 
subject: HTML Desgin Patterns & JS
 
Similar Threads
How good is this book for a java developer?
HTML prototype for an application
Objectives
I'm not sure how to make my javascript compatible with both IE and Netscape
Winners: Pro CSS and HTML Design Patterns