info 330 wireframes and templating. how to analyze a web site sites have site-level layout and look...
TRANSCRIPT
![Page 1: INFO 330 Wireframes and Templating. How to analyze a Web site Sites have Site-level layout and look Pages. Pages have – Page-level layout look – Page](https://reader035.vdocuments.us/reader035/viewer/2022070403/56649f315503460f94c4c723/html5/thumbnails/1.jpg)
INFO 330 Wireframes and Templating
![Page 2: INFO 330 Wireframes and Templating. How to analyze a Web site Sites have Site-level layout and look Pages. Pages have – Page-level layout look – Page](https://reader035.vdocuments.us/reader035/viewer/2022070403/56649f315503460f94c4c723/html5/thumbnails/2.jpg)
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
![Page 3: INFO 330 Wireframes and Templating. How to analyze a Web site Sites have Site-level layout and look Pages. Pages have – Page-level layout look – Page](https://reader035.vdocuments.us/reader035/viewer/2022070403/56649f315503460f94c4c723/html5/thumbnails/3.jpg)
The Page
A Page
![Page 4: INFO 330 Wireframes and Templating. How to analyze a Web site Sites have Site-level layout and look Pages. Pages have – Page-level layout look – Page](https://reader035.vdocuments.us/reader035/viewer/2022070403/56649f315503460f94c4c723/html5/thumbnails/4.jpg)
Page areas
Header
Nav ItemThe Page
![Page 5: INFO 330 Wireframes and Templating. How to analyze a Web site Sites have Site-level layout and look Pages. Pages have – Page-level layout look – Page](https://reader035.vdocuments.us/reader035/viewer/2022070403/56649f315503460f94c4c723/html5/thumbnails/5.jpg)
The
item
are
a ha
s a
view
of a
n ite
m o
f inf
oNarrative full
view
Photo full view
Photo partial view
![Page 6: INFO 330 Wireframes and Templating. How to analyze a Web site Sites have Site-level layout and look Pages. Pages have – Page-level layout look – Page](https://reader035.vdocuments.us/reader035/viewer/2022070403/56649f315503460f94c4c723/html5/thumbnails/6.jpg)
IndexesHierarchies
The
Nav
are
a co
ntai
ns n
avig
ation
![Page 7: INFO 330 Wireframes and Templating. How to analyze a Web site Sites have Site-level layout and look Pages. Pages have – Page-level layout look – Page](https://reader035.vdocuments.us/reader035/viewer/2022070403/56649f315503460f94c4c723/html5/thumbnails/7.jpg)
Wireframes abstract and standardize page design
Content
Banner
Footer
Local nav
Global nav
![Page 8: INFO 330 Wireframes and Templating. How to analyze a Web site Sites have Site-level layout and look Pages. Pages have – Page-level layout look – Page](https://reader035.vdocuments.us/reader035/viewer/2022070403/56649f315503460f94c4c723/html5/thumbnails/8.jpg)
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
![Page 9: INFO 330 Wireframes and Templating. How to analyze a Web site Sites have Site-level layout and look Pages. Pages have – Page-level layout look – Page](https://reader035.vdocuments.us/reader035/viewer/2022070403/56649f315503460f94c4c723/html5/thumbnails/9.jpg)
A very simple wireframe
Item area goes here
Banner goes here
Nav area goes here
![Page 10: INFO 330 Wireframes and Templating. How to analyze a Web site Sites have Site-level layout and look Pages. Pages have – Page-level layout look – Page](https://reader035.vdocuments.us/reader035/viewer/2022070403/56649f315503460f94c4c723/html5/thumbnails/10.jpg)
This layout in HTML Tables
![Page 11: INFO 330 Wireframes and Templating. How to analyze a Web site Sites have Site-level layout and look Pages. Pages have – Page-level layout look – Page](https://reader035.vdocuments.us/reader035/viewer/2022070403/56649f315503460f94c4c723/html5/thumbnails/11.jpg)
This layout in HTML Divs
![Page 12: INFO 330 Wireframes and Templating. How to analyze a Web site Sites have Site-level layout and look Pages. Pages have – Page-level layout look – Page](https://reader035.vdocuments.us/reader035/viewer/2022070403/56649f315503460f94c4c723/html5/thumbnails/12.jpg)
This layout in templates (XSLT)
![Page 13: INFO 330 Wireframes and Templating. How to analyze a Web site Sites have Site-level layout and look Pages. Pages have – Page-level layout look – Page](https://reader035.vdocuments.us/reader035/viewer/2022070403/56649f315503460f94c4c723/html5/thumbnails/13.jpg)
You can’t (and don’t want to) avoid templatesIn Web authoring
systems
Dreamweaver
Flash
FrontPage
Nvu
In Server SystemsActive Server Pages (ASP)eRubyColdFusion Markup Language (CFM)JavaServer Pages (JSP)Active PerlPHPOpenACS
In Browser SystemsClosure TemplatesEJSJennerjQote2jTemplatesMjt.TemplateMustachePureTempo JSON templates
http://en.wikipedia.org/wiki/Web_template_system
![Page 14: INFO 330 Wireframes and Templating. How to analyze a Web site Sites have Site-level layout and look Pages. Pages have – Page-level layout look – Page](https://reader035.vdocuments.us/reader035/viewer/2022070403/56649f315503460f94c4c723/html5/thumbnails/14.jpg)
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
![Page 15: INFO 330 Wireframes and Templating. How to analyze a Web site Sites have Site-level layout and look Pages. Pages have – Page-level layout look – Page](https://reader035.vdocuments.us/reader035/viewer/2022070403/56649f315503460f94c4c723/html5/thumbnails/15.jpg)
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
![Page 16: INFO 330 Wireframes and Templating. How to analyze a Web site Sites have Site-level layout and look Pages. Pages have – Page-level layout look – Page](https://reader035.vdocuments.us/reader035/viewer/2022070403/56649f315503460f94c4c723/html5/thumbnails/16.jpg)
Let’s do some
http://jobview.monster.com
/Information-Architect-Mobile-Job-Houston-TX-109130859.aspx
![Page 17: INFO 330 Wireframes and Templating. How to analyze a Web site Sites have Site-level layout and look Pages. Pages have – Page-level layout look – Page](https://reader035.vdocuments.us/reader035/viewer/2022070403/56649f315503460f94c4c723/html5/thumbnails/17.jpg)
Global NavPreferred path A
Job
Preferred B
Preferred C
Functions
Possible paths
![Page 18: INFO 330 Wireframes and Templating. How to analyze a Web site Sites have Site-level layout and look Pages. Pages have – Page-level layout look – Page](https://reader035.vdocuments.us/reader035/viewer/2022070403/56649f315503460f94c4c723/html5/thumbnails/18.jpg)
Company Name
Overview
Duties
Requirements 1
Requirements 2
Job title
![Page 19: INFO 330 Wireframes and Templating. How to analyze a Web site Sites have Site-level layout and look Pages. Pages have – Page-level layout look – Page](https://reader035.vdocuments.us/reader035/viewer/2022070403/56649f315503460f94c4c723/html5/thumbnails/19.jpg)
Prep for your Wireframe designShow hierarchical nav
Include top search termsWhere 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
![Page 20: INFO 330 Wireframes and Templating. How to analyze a Web site Sites have Site-level layout and look Pages. Pages have – Page-level layout look – Page](https://reader035.vdocuments.us/reader035/viewer/2022070403/56649f315503460f94c4c723/html5/thumbnails/20.jpg)
Item Area
Representing nav and items
Jobs - Day labor - Part time - Full time - CareerTraining - Courses - Workshops - CounselingPreparation - Searching - Applying - Interviewing
|Job Seekers | Employees | Claimants|
Logo Site title and affiliations
Contact and copyright info
localNav
Global Nav
![Page 21: INFO 330 Wireframes and Templating. How to analyze a Web site Sites have Site-level layout and look Pages. Pages have – Page-level layout look – Page](https://reader035.vdocuments.us/reader035/viewer/2022070403/56649f315503460f94c4c723/html5/thumbnails/21.jpg)
Want a challenge?
• Propose a faceted classification rather than a hierarchy
![Page 22: INFO 330 Wireframes and Templating. How to analyze a Web site Sites have Site-level layout and look Pages. Pages have – Page-level layout look – Page](https://reader035.vdocuments.us/reader035/viewer/2022070403/56649f315503460f94c4c723/html5/thumbnails/22.jpg)
Company Name
Overview
Duties
Requirements 1
Requirements 2
Job titleJob Summary
Company
Location
Industries
Job Type
Education level
Career level
Job code
About the Job
Summary
Essential Duties/ Responsibilities
Education
Experience