File APIs for Java Developers
Manipulate DOC, XLS, PPT, PDF and many others from your application.
http://aspose.com/file-tools
The moose likes HTML, CSS and JavaScript and the fly likes Pro CSS and HTML Design 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 "Pro CSS and HTML Design Patterns" Watch "Pro CSS and HTML Design Patterns" New topic
Author

Pro CSS and HTML Design Patterns

Raghavan Muthu
Ranch Hand

Joined: Apr 20, 2006
Posts: 3344

Hello Michael,

I am aware of the term 'Design Patterns' and used it in Java perspective.

To what extent the Design Patterns in HTML sense is covered here?

What kinda patterns are generally required and in use for a good, efficient design in HTML? I have not come across some patterns in web designing.

Thank you.


Everything has got its own deadline including one's EGO!
[CodeBarn] [Java Concepts-easily] [Corey's articles] [SCJP-SUN] [Servlet Examples] [Java Beginners FAQ] [Sun-Java Tutorials] [Java Coding Guidelines]
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?

This is a great question.

CSS and HTML are not object-oriented languages; and, thus, there are no direct corollaries between their 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. 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>

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.
Raghavan Muthu
Ranch Hand

Joined: Apr 20, 2006
Posts: 3344

Thank you so much for the kind and detailed reply Michael. So sweet of you.


... 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.


Is it somehow to have a generalized template across all pages so that it will afford a single point of change and consistency across all the pages? Looks like to me so.


..The CSS code in the pattern is interesting because it shows that CSS does have some "object-oriented" capabilities, such as subclassing and inheritance.


Yes, i am aware of it based on my little experience on few CSS stuff.


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


Thank you. I could get a small glimpse of it. I am sure the complete book has a lot information in store for people like me.


...If you are the kind of programmer that enjoys Java design patterns, you will love Pro CSS and HTML Design Patterns.


Yes, you are right. I love applying some patterns to an extent possible to as to have a minimal work towards any enhancement.

Once again, a big thanks to you for having replied in detail Michael.
 
I agree. Here's the link: http://aspose.com/file-tools
 
subject: Pro CSS and HTML Design Patterns