Patterns are nouns. Typically, they are identifiable things, which emerge, or are created, to resolve a set of pressures or problems. They are typically GENERIC ... they have emerged before, although usually in a unique way, adapted for the particulars of a situation. And for our purposes, patterns are GOOD. (An anti-pattern (-) is BAD.) And patterns should be GOOD for the WHOLE system. The SCALE at which they should be applied as a solution should also be clear. It should be clear at which STAGE of development they should emerge. They should also just be RIGHT: i.e. a pattern should make sense both to your head and your heart.

Here you'll see me generally aiming at finding GRADIENTS of patterns, because, to me, patterns are most useful when collected into SEQUENCES.

Note that a blog certainly doesn't have the right kind of order for this work. What I have here is essentially "scratch paper", or "working papers", for patterns which themselves will eventually be presented as a gradient, in order. Of course, that kind of webapp is a pattern: "GRADIENT SEQUENCE".

HTML gradient

Where, in the gradient of web patterns, does HTML(XHTML) fit?

Of course, this is continuously changing. The markup language used to provide:

(1) identity of the page
(2) classification of content
(3) layout of content
(4) styling of content

... and of course, with CSS, (4) is now deprecated completely, with (3) actively being pushed out of the door, but keeping a foot in, in the "CSS with Minimal Tables" compromise (see Apple's Web Development Best Practices page).

That said, it is impossibly difficult to engage in (2) without an existing storyboard (or wireframe or visual outline or mock-up or comp) in mind, on the screen or on paper. In fact, (2) never happens otherwise ... even the most dynamically generated web pages will reveal, in the designer's naming and categorization of classes and ids of elements, some kind of visual arrangement of data -- in fact, usually it was written with some specific example in mind.

Still, both the "Pure CSS" and the "CSS with Minimal Tables" strategies have the same effect: structuring layout sufficiently to begin work on further differentiation, while leaving enough flexibility to change position and emphasis when needed.

(1) is well-covered elsewhere ... titles, DOCTYPES, meta tags, etc.

So we need to look more closely at the gradient sequence of (2) or (2)-(3). The key is to understand the early unfolding of good decisions regarding what is most important about the web page.

* Determine, and order, your ends
* Determine, and order, your means

The Ends and Means, or the "Purposes and Processes", when spelled-out fully, tend to be intertwined: nouns and adjectives, verbs and adverbs ... Discovering and ordering these can involve quite a bit of deep digging. And, in group situations, some tough-minded facilitating.

Let's say they've been found. We then need to:

* Arrange the key elements.
* Ensure their differentiation from each other.
* Ensure that they complement each other.

If you have more than two things on the page, this usually means:

* Arrange the elements into categories beneficial to the user.
* Clarify and distinguish elements by level and type of "engagement", such as which elements require the users to be active, and which require them to be passive.

We now typically have something that would allow us to create a "div" scaffolding. Possibly the most important aspect of this stage is:

* name the elements

... with "class" and "id" designations. These might be:

* unique elements
* categories of elements
* active elements, for example for use with Javascript

... after this, and before applying CSS, we can lean on HTML's presentation categories for differentiation: not everything is a "div". So, "ul", "ol", "table", "h1", "h2" etc. are perfectly appropriate for categorizing certain types of content. It's just typically LESS important than the NAME of the content, and the POINT of the content. But MORE important than the CSS property:value declarations.

And besides, technically, we need all the HTML elements differentiated and named before we can even begin to write CSS rules, which use "selectors" that identify standard element types, our element classes and our element ids.

42 Comments:

Blogger almapriester said...

鴛鴦吧成人,免費視訊,交友戀愛小站,尼克成人,383成人,成人漫畫,八國聯軍成人,正妹視訊,一葉晴貼圖片區,免費交友,080視訊聊天室,成人圖片,a片貼圖,080視訊聊天室,豆豆聊天室13 15歲,情色貼圖,色聊天室,情色貼圖,免費視訊,情色漫畫,哈啦聊天室,丁字褲美女影片,正妹計時器,666成人光,成人視訊,104 貼圖區,85cc成人片觀看,視訊,視訊做愛,0204貼圖區,嘟嘟成人網,正妹相簿,只有貼圖片區,正妹桌面,38ga成人,正妹空姐寫真,美女交友,ccn正妹牆,正妹找樂子,台灣美女寫真貼圖區,

2:15 PM  
Blogger 珠珠 said...

Everyone fastens where there is gain.........................................

5:33 AM  
Blogger 直到遠遠 said...

Always keep your words soft and sweet, just in case you have to eat them.............................................

5:29 AM  
Blogger 知道 said...

沒有友情,人生何樂?........................................

12:27 AM  
Blogger 開會討論 said...

hello~~........................................

12:27 AM  
Blogger 魅力時射 said...

may the blessing be with you.........................................

6:00 AM  
Blogger 伯臻采男 said...

性愛的台灣本土性愛影片性愛遊性愛文性愛性交免費色情網頁免費色情影片看免費色遊戲網免費色請影片免費免下載ava片線上看免費免下載a片免費免會員色情影片免費男女做愛影片免費男女影片免費色情狂看免費色情成影片免費色情卡通線上看免費成年人短片免費成年人線上短片免費成年人線上影片免費成短片免費色小遊戲免費色文章免費色片分享免費色片電影直播免費色片線上直播免費色卡通動畫短片免費色卡通漫畫免費色動畫免費色情片圖片火辣視訊薄紗主播網友自拍露點圖視訊交友交友104速配網

3:39 AM  
Blogger 陳石薇 said...

Unable to give you a heart. so have a reply to push up your post. ........................................

7:43 AM  
Blogger LaciRossetti199 said...

援交女豆豆出租情人視訊sogo論壇視訊辣妹桃園兼職援交辣妹視訊一對一視訊520sex日本視訊小魔女自拍av1688影音娛樂網辣手美眉甜心寶貝直播貼片免費色咪咪視訊網pc交友視訊美女ggoo免費視訊情色網咆哮小老鼠高雄援交夢中情人情趣用品sex888免費看影片波霸美女寫真sex888免費看影片視訊新竹援交留言0401成人聊天室甜心寶貝貼影片援交友留言桃園sogo 論壇080情人網視訊泳裝秀拓網交友色美眉免費看視訊免費色咪咪影片網 兼職援交聊天室ilover99a片天堂卡通aa片台灣情色網無碼avdvd色色網sexy diamond sex888入口高雄視訊辣妹自拍免費a片亞洲東洋影片hilive本土自拍天堂西門慶成人論壇 費 aaa 片試看dudu sex免費影片avdvd一夜情色妹妹免費情慾影片觀賞qq美美色網影片av免費影片日本 a 片自拍偷拍網站情色小說jp成人a 片日本avdvd女優xxx383美女寫真日本avdvd小魔女免費影城無碼avdvd無碼卡通情色情色論壇甜心寶貝貼片區Show-live視訊聊天室 情色免費A片情色偷拍免費A片一本道 a片 東京熱avdvd影片色美眉台中援交aa 片試看aaa 片試看情人輔助品成人網站做愛自拍偷拍免費試看av免費成人電影dudu sex免費 aa 片試看臺灣情色網線上免費a長片0204免費a片試看a片免費試看a片天堂台灣論壇成人a漫畫免費視訊聊天ing免費視訊美女aaa影片下載城卡通aa片免費看成人影片分享視訊聊天評比104免費成人情色文學小說

7:48 PM  
Blogger 羿惟 said...

Nice job!.................................................................

4:45 AM  
Blogger PabloDuda0若愛 said...

以簡單的行為愉悅他人的心靈,勝過千人低頭禱告。 ..................................................

2:40 AM  
Blogger 妍慧 said...

It's great!!..................................................

5:37 PM  
Blogger 冠廷 said...

無碼尋夢視訊聊天a漫a片a圖一夜情一葉情人妻激情情色寫真美女自拍辣妹自拍正妹自拍美女走光辣妹走光正妹走光脫衣秀脫衣走光色情自慰自拍成人全裸打炮打手槍打飛機巨乳巨奶女優大奶性交性愛淫蕩

10:20 PM  
Blogger Be224nWann1 said...

免費a片觀看,凌辱人妻溫泉 豆豆聊天室 s383情色視訊大網咖 免費視訊影片 1111免費成人電影 嘉義視訊哈啦聊天室 絕色成人 av168成人 視訊聊天室aqaq hbo論壇 45av無碼a片 免費視訊聊天網 後宮電影電影院 免費情愛影片 成人免費視訊-玩美女人 dv影視免費線上 嘟嘟kk拓網視訊 sex888免費看影片論壇,18 成人 美女視訊免費看 sogo論壇a片線上看 聊天室ukiss 免費視訊ggo 飄蟲本土自拍論壇區 情趣 用品成人用品維納斯 666成人視訊網 dodo豆豆聊天室 sex888,sexy girl avdvd無碼情色電影 sexy girl免費aa片試看 sex999免費影片兼職援交 影音視訊免費送 300 點 色美媚部落格免費 18 成人dudu sex,h影片 視訊辣妹34c甜心寶貝直播貼片 18 禁亞洲名模瘋情 aio辣妹交友愛情館 李冠儀性感照 視訊交友icc 6k聊天館 免費影片觀賞,sex女優王國 環球辣妹聊天室2009情色文學168論壇 85街免費影片 a片商 成人貼圖站色情av片 sex520-成人網 視訊美女msvt s383情色視訊網 777美女dvd 台灣a片王-avdvd 視訊美女 寫真

10:45 AM  
Blogger 俊達 said...

沒有目標而生活,恰如沒有羅盤而航行 ............................................................

3:14 AM  
Blogger 彥安彥安 said...

知識可以傳授,智慧卻不行。每個人必須成為他自己。...........................................................................

6:32 PM  
Blogger 旺江旺江 said...

臨淵羨魚,不如退而結網。 ..................................................

12:14 AM  
Blogger mckinney said...

影音視訊聊天 台灣情色論壇 go2av免費影片卡通 666vl net 0951成人頻道下載 qq美美色網 ut13077視訊聊天 台灣kiss911 18成人免費a片 男人幫 成人網站-天天看美女 日本a卡漫 聊天室ut 5278免費影片 aa 片俱樂部 失敗論壇 影音交友mmshow tw av女優影片,aa片免費看影片 卡通aa片avdvd 美女交友thcmt vsbox色美媚入口 洪爺自拍走光貼圖 一對多視訊,美女短片免費試看 0204成人 視訊交友fireup 台灣kiss情色貼圖區 彩虹AV影音視訊聊天室 性愛日記 ez sex貼片區 aaa片免費看影片 aio小魔女自拍qk 免費試看成人片 g8mm視訊網 色妹妹a漫18 禁 免費視訊聊天 173 線上 aa 片試看嘟嘟 火辣視訊情人 av080下載 aa免費看影片 網愛 正妹百人斬飯島愛 情色sex520 ss369成人色網 免費a片線上看,卡通aa片免費看 aa的滿18歲影片 視訊-愛情館 八國聯軍成人 高雄視訊sexy girl34c 成人自拍色情avdvd 線上aa片試看嘟嘟

5:22 PM  
Blogger 俊偉 said...

工作,是愛的具體化~~~~努力吧!......................................................................

5:47 AM  
Blogger 林奕廷 said...

很喜歡你的部落格 留言支持你 祝你人氣長紅~~~......................................................................

8:42 AM  
Blogger 江婷 said...

一定要保持最佳狀況呦,加油!!!期待你發表的新文章!....................................................................

11:00 PM  
Blogger 佩春 said...

Poverty tries friends.................................................................

1:25 PM  
Blogger 嘉玲 said...

人有兩眼一舌,是為了觀察倍於說話的緣故。............................................................

12:37 AM  
Blogger dawsonfelicia張君dawsonfelicia均 said...

人生是故事的創造與遺忘。............................................................

6:02 PM  
Blogger JasonBirk佳琪 said...

Quietude is the crown of life.............................................................

8:43 PM  
Blogger 芸茂芸茂 said...

看得見您的用心~~希望這裡愈來愈熱鬧哦~~............................................................

10:47 PM  
Blogger 詹莉emmaagnes莉真 said...

良言一句三冬暖,惡語傷人六月寒。............................................................

5:45 AM  
Blogger 靜宸靜宸 said...

人生有如洶湧的波濤,如果沒有岩石的阻擋,怎能激起美麗的浪花?............................................................

8:01 PM  
Blogger 曾法幸 said...

喜歡自己的另一層意義是「接納自己」。..................................................

6:07 AM  
Blogger 盈廖生家秀蔡 said...

祝你快高長大,工作順利,忙死你..................................................................

10:36 PM  
Blogger KevenR_Harrah1022 said...

雖然不能常常來看,仍然祝你人氣百分百 ............................................................

7:43 PM  
Blogger 劉彥陳王姵君晏雄 said...

聰明人之所以不會成功,是因為他們缺乏了堅忍的毅力。.......................................................

6:03 PM  
Blogger 洪志源 said...

美麗的事物是永恆的快樂,它的可愛日有增加,不會消逝而去................................................

7:12 PM  
Blogger 秋珍雅昀 said...

看了你的日誌 覺得今天好充實 晚安瞜.................................[/url]...............

10:42 PM  
Blogger 雅王任 said...

Look before you leap.................................................

1:26 PM  
Blogger 承王蓁 said...

一個人的價值,應該看他貢獻了什麼,而不是他取得了什麼.................................................................

3:41 AM  
Blogger 承王蓁 said...

好看耶~一定每天有空給你支持..................................................

6:11 PM  
Blogger 8468 said...

永遠支持你呀!!HO!!HO!!HO!!HO!!~~............................................................

12:45 AM  
Blogger 孫邦柔 said...

嗯~蠻不錯耶~~我喜歡 ∩ 3∩............................................................

1:08 AM  
Blogger 佳張張張張燕張張張張張 said...

累了嗎?來杯咖啡休息一下吧!...............................................................

8:35 AM  
Blogger 王綺廖家堯廖家堯穎 said...

很棒的分享~留言支持!............................................................

8:32 PM  
Blogger 王怡迪 said...

多譏樓主分享 正野緊係要回啦......................................................

3:19 AM  

Post a Comment

<< Home