1. INFO 330 Reverse Engineering Activity Introduction and Instructions

2. Steps 1.Dissect the site 1.Name the areas 2.Analyze the info areas 2.Model the info types from the analysis of info areas 3.Implement the info types in an RDB 4.Model and implement the Navigation 5.Turn pages into templates

3. Part 1 Reverse Engineering Dissected Page Nav Are a Content Area Content Area Built page Data base Content Area Nav Area Page Template Nav Area Content Area Content Area 1 1 2 2 3 3 4 4 5 5

4. 1. Dissect the Site

5. A Web site from the usual perspective All about page design HTML CSS Layout, color, font and image A focus on Pages

6. A Web page from our perspective Page Area 1 Area 2 Area 3 Area 4 Area 3.1 A layout of areas

7. The Page 1.1 Name the areas http://www.dor m-room- biz.com/category /eventsconferenc es/

8. Banner 1.1 Name the areas Global Nav Info area: partial views Local nav Ads

9. Banner 1.1 Name the areas Global Nav Info Area: Full View Local nav Ads

10. 1.2. Analyze the Info Areas

11. The database Has info types Each with some number of items They are the site’s content Has access structures To allow you to ACESS the items They are the site’s navigation An Area from our Perspective Banner Global Nav Info Area Local nav Ads The page

12. 1.2. Analyze the Info Areas p.date Entities p = post c = comment Areas o = optional cv = controlled vocab p = paras only rt = rich text Links e = external i = internal Entities p = post c = comment Areas o = optional cv = controlled vocab p = paras only rt = rich text Links e = external i = internal c.num p.title Navigation (not info) p.Text (rt) p.text.link (e)

13. 1.2. Analyze the Info Areas Entities p = post c = comment Areas o = optional cv = controlled vocab p = paras only rt = rich text r = repeats Links e = external i = internal Entities p = post c = comment Areas o = optional cv = controlled vocab p = paras only rt = rich text r = repeats Links e = external i = internal p.title Navigation (not info) c.num c.name c.email c.site c.text c.name c.date c.Text (p) c.image comment (r)

14. 2. Model the info types from the analysis of info areas There is lots of room for judgment!

15. Info Model Post title dateTime text Post title dateTime text Rich Text image p link(e) Rich Text image p link(e) External Link title url External Link title url Comment name date image email site Text (p) Comment name date image email site Text (p)

16. Screen Dissection Activity Snopes.com

17. Controlled Vocabulary A list of phrases (one or more words) Composed by a set process (experts, folksonomy, etc.) That constrains the values that a (field, attribute, element, etc.) can have Different than a data type

18. Sub Areas- Rumor Area t.truth(cv) Controlled vocabulary True Mixture Undetermined False Legend Controlled vocabulary True Mixture Undetermined False Legend

19. 1.1 Name the Areas 1.Go to Snopes.com 2.Name the areas in the following pages 1.The home page 2.A category page (click on a category in the local nav) 3.A rumor page (click on a rumor on the category page)

20. 1.2 Analyze the Info Areas 1.Go to and think about the info areas on these pages – Forever Twinkies (http://www.snopes.com/food/ingredient/twinkies.asp )http://www.snopes.com/food/ingredient/twinkies.asp – The Microwaved Pet (http://www.snopes.com/horrors/techno/microwavedpet.asp )http://www.snopes.com/horrors/techno/microwavedpet.asp – Sources page (http://snopes.com/sources/toogood.htm and http://snopes.com/sources/sources.htm )http://snopes.com/sources/toogood.htm http://snopes.com/sources/sources.htm – Source Types 2.Find entities as follows – The main type of info on the page is an entity – Any areas that repeat are separate entities – Any areas that can be re used in different items (in different pages) are separate entities 3.Name entities. Create a prefix for each entity (for example, the Rumor entity might be “r”) 4.Label each sub area on the page with an entity and name (for example the area that contains the rumor title might be labeled “r.title”) 5.Add qualifiers – Anything that comes from a controlled vocab gets (cv) – Anything that is optional gets (o)

21. 1.2 Analyze the Info Areas Do further analysis on text areas – If the text area is unformatted (i.e. a single unformatted paragraphs) do nothing more – If the text area contains multiple unformatted paragraphs mark the area with (p) – If the text area contains more than just unformatted paragraphs it is “rich.” Mark the area with (rt) Label links (inside or outside text areas) – External (e) – Internal (i) Place boxes very carefully. DO NOT cover non data

22. Make an info model Further analyze the text area – Images – Links – Bullets – Bold, underline, italics, etc. Find and list all controlled vocabularies Distinguish internal from external links