1. INFO 330 Wireframes and Templating

2. How to analyze a Web site Sites have Site-level layout and look Pages. Pages have – Page-level layout look – Page areas. Areas have Layout and look Content – Branding – Info items – Navigation – Functionality

3. The Page A Page

4. Page areas Header Nav Item The Page

5. The item area has a view of an item of info Narrative full view Photo full view Photo partial view

6. Indexes Hierarchies The Nav area contains navigation

7. Wireframes abstract and standardize page design Content Banner Footer Local nav Global nav

8. Templates implement wireframes Standardizing the look & feel and layout of The site frame (unchanging over the whole site) Site sections Page types Page areas – Info items – Navigation

9. A very simple wireframe Item area goes here Banner goes here Nav area goes here

10. This layout in HTML Tables

11. This layout in HTML Divs

12. This layout in templates (XSLT)

13. You can’t (and don’t want to) avoid templates In Web authoring systems Dreamweaver Flash FrontPage Nvu In Server Systems Active Server PagesActive Server Pages (ASP) eRuby ColdFusion Markup LanguageColdFusion Markup Language (CFM) JavaServer PagesJavaServer Pages (JSP) Active Perl PHP OpenACS In Browser Systems Closure Templates EJS Jenner jQote2 jTemplates Mjt.Template Mustache Pure Tempo JSON templates http://en.wikipedia.org/wiki/Web_template_system

14. Templates assume structure Layout structure – Sites  Sections  Pages  Areas Content structure – Info types: structured info – Info items: instances that obey the structure Access Structure – Represented in the database – Rendered as standard widgets

15. The essence of templating What is the same? Put it in the template – Layout – Styling – Labeling What is different? Fill it into the template – Values under the labels – Parameters for functions – Layout, styling, and labeling variations

16. Let’s do some http://jobview.monster.co m/Information-Architect- Mobile-Job-Houston-TX- 109130859.aspx

17. Global Nav Preferred path A Job Preferred B Preferred C Functions Possible paths

18. Company Name Overview Duties Requirements 1 Requirements 2 Job title

19. Prep for your Wireframe design Show hierarchical nav Include top search terms Where do you get these from? Include inbound links (previous page and associated pages) Don’t just copy, CREATE! Include outbound links (preferred paths and possible paths) Flag functions, but don’t worry about them

20. Item Area Representing nav and items Jobs - Day labor - Part time - Full time - Career Training - Courses - Workshops - Counseling Preparation - Searching - Applying - Interviewing |Job Seekers | Employees | Claimants| Logo Site title and affiliations Contact and copyright info local Nav Global Nav

21. Want a challenge? Propose a faceted classification rather than a hierarchy

22. Company Name Overview Duties Requirements 1 Requirements 2 Job title Job Summary Company Location Industries Job Type Education level Career level Job code About the Job Summary Essential Duties/ Responsibilities Education Experience