INFO 330

Reverse Engineering ActivityIntroduction and Instructions

Steps

1. Dissect the site1. Name the areas2. Analyze the info areas

2. Model the info types from the analysis of info areas

3. Implement the info types in an RDB4. Model and implement the Navigation5. Turn pages into templates

Part 1 Reverse Engineering

Dissected Page

Nav Area

ContentArea

Built page

Data base

Content Area

Nav Area

Page Template

Nav Area

ContentArea

1 2

3

4

5

1. Dissect the Site

A Web site from the usual perspective

All about page design • HTML• CSS• Layout, color, font and image • A focus on Pages

A W

eb p

age

from

our

per

spec

tive

Page

Area 1

Area 2Area 3

Area 4

Area 3.1

A layout of areas

The Page

1.1

Nam

e th

e ar

eas

http://www.dorm-room-biz.com/category/eventsconferences/

Banner1.

1 N

ame

the

area

s

Global Nav

Info area: partial views

Local nav

Ads

Banner1.

1 N

ame

the

area

s

Global Nav

Info Area:Full View

Local nav

Ads

1.2. Analyze the Info Areas

The database

Has info types• Each with some number

of items• They are the site’s

contentHas access structures

• To allow you to ACESS the items

• They are the site’s navigation

An Area from our Perspective

BannerGlobal Nav

Info AreaLocal nav

Ads

The page

1.2.

Ana

lyze

the

Info

Are

asp.date

Entitiesp = postc = comment

Areaso = optionalcv = controlled vocabp = paras onlyrt = rich text

Linkse = externali = internal

c.num

p.titleNavigation (not info)

p.Text (rt)

p.text.link (e)

1.2.

Ana

lyze

the

Info

Are

as

Entitiesp = postc = comment

Areaso = optionalcv = controlled vocabp = paras onlyrt = rich textr = repeats

Linkse = externali = 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)

2. Model the info types from the analysis of info areas

There is lots of room for judgment!

Info

Mod

elPost• title• dateTime• text

Rich Text• image• p

• link(e)

External Link• title• url

Comment• name• date• image• email• site• Text (p)

Screen Dissection Activity

Snopes.com

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

Sub

Area

s- R

umor

Are

a

t.truth(cv)

Controlled vocabulary• True• Mixture• Undetermined• False• Legend

1.1 Name the Areas

1. Go to Snopes.com2. Name the areas in the following pages

1. The home page2. A category page (click on a category in the local

nav)3. A rumor page (click on a rumor on the category

page)

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 )– The Microwaved Pet (http://www.snopes.com/horrors/techno/microwavedpet.asp )– Sources page (http://snopes.com/sources/toogood.htm and 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)

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

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