aspose file tools*
The moose likes HTML, CSS and JavaScript and the fly likes Patterns? 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 "Patterns?" Watch "Patterns?" New topic
Author

Patterns?

Charles McGuire
Ranch Hand

Joined: Jan 18, 2005
Posts: 99
Hi -

I'm so intrigued by the use of "Patterns" in the title of this book! Many patterns I use in Java can trace their origins back to GoF book where the patterns can apply to several languages.

What are the origins of the patterns discussed in your book? In other words, are they referencing broader patterns that maybe recognized by someone who has not read this book, or does the book identify new pattern (and pattern names) as they apply to JavaScript and CSS?


There's no place like 127.0.0.1
Katrina Owen
Sheriff

Joined: Nov 03, 2006
Posts: 1362
    
  17
Originally posted by Charles McGuire:
...does the book identify new pattern (and pattern names) as they apply to JavaScript and CSS?


That would be HTML and CSS

I'm not sure I can wait the whole week to see if I get to win this book. I'm off to Borders after work!
Charles McGuire
Ranch Hand

Joined: Jan 18, 2005
Posts: 99
Yes, the book looks good, but I think the author(s) are AWOL on this forum.
Michael Beauchamp
Greenhorn

Joined: Mar 03, 2005
Posts: 23
Originally posted by Katrina Owen:


I'm not sure I can wait the whole week to see if I get to win this book. I'm off to Borders after work!


I know how you feel. I have it sitting next to me right now.
Mike Bowers
Author
Ranch Hand

Joined: Oct 08, 2007
Posts: 42
How do CSS and HTML Design Patterns compare to Design Patterns in Object-oriented languages?

CSS and HTML are not object-oriented languages; and, thus, there are no direct corollaries between their design patterns and object-oriented design patterns.

There is a whole school of thought wrapped around "design patterns." In academic circles, a design pattern has four parts: name, problem, solution, and tradeoffs. In other words, a "design pattern" is a process for naming a pattern, describing a problem, showing a generalized solution, and discussing the pros and cons of the solution.

In my book, Pro CSS and HTML Design Patterns, I apply this process to create patterns -- patterns specific to CSS and XHTML. The patterns show how to use XHTML structurally and semantically and how to style and layout XHTML with CSS. All the patterns use best practices, are accessible, and are valid XHTML and CSS.

The name of the book is also a play on words, since the book is about using patterns to help us design web pages.

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.

<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

There is so much more to this topic. If you are the kind of programmer that enjoys Java design patterns, you will love Pro CSS and HTML Design Patterns.
 
I agree. Here's the link: http://aspose.com/file-tools
 
subject: Patterns?