Differences

This shows you the differences between two versions of the page.

Link to this comparison view

it:ad:patterns:it_s_all_hierarchical_after_all [2019/03/24 12:17] (current)
Line 1: Line 1:
 +# IT:​AD:​Patterns:​It'​s all Hierarchical After All #
 +
 +
 +
 +<callout type="​Navigation"​ class="​small">​
 +* [[../​|(UP)]]
 +{{indexmenu>​.#​2|nsort tsort}}
 +
 +
 +</​callout>​
 +
 +
 +## Summary ##
 +
 +All current 2D applications -- whether [[IT/#​WIMP/​]] based, or [[IT/#​CUTE/​]] based, are hierarchical in nature.
 +
 +
 +## Strategy ##
 +
 +
 +In pure html terms (not talking about the abomination of [[IT/#​ASP.WebForms/​]]) that means that a web page is easily laid out as a series of elements within a UL/LI structure. The rest is just judicious use of CSS.
 +
 +To better explain this, consider your average HTML page. It's just:
 +
 +* Head 
 +* Body
 +* Footer
 +
 +Consider your average Header Breadcrumb structure. It's really just a List (eg: `Home/​Student/​Search`) flattened out, so it too fits easily into the hierarchical page structure:
 +
 +* Head 
 +    * Breadcrumbs:​
 +        * *Home*
 +            * *Student*
 +                * *Search*
 +* Body
 +* Footer
 +
 +Consider the menu part. It's just a UL/LI tree in the header as well:
 +
 +* Head 
 +    * Logo
 +    * Menu:
 +        * *Welcome*
 +        * *Students*
 +            * *Search*
 +            * *Add*
 +        * *Help*
 +    * Breadcrumbs:​
 +        * Home
 +            * Student
 +                * Search
 +* Body
 +* Footer
 +
 +The body area is also hiearchical. ​ Classically,​ it's just:
 +
 +* Head 
 +    * Logo
 +    * Menu:
 +        * Welcome
 +        * Students
 +            * Search
 +            * Add
 +        * *Help
 +    * Breadcrumbs:​
 +        * Home
 +            * Student
 +                * Search
 +* Body
 +    * *Top*
 +    * *Middle*
 +        * *Left*
 +        * *Center*
 +        * *Right*
 +    * *Bottom*
 +* Footer
 +    * Copyright
 +    * Legal
 +
 +
 +#### HTML5 
 +
 +Each Framework has it's own conventsions,​ and in HTML5 there are a couple of tags to help break the page down into navigation and content areas.
 +
 +It's a matter of style really whether the whole page should be one big long UL list -- or discrete UL lists within the HTML5 tags. YMMV.
 +