INFO 330

1. INFO 330 Your Reverse Engineering Project

2. Steps • Choose a site • Dissect the site • Name the areas • Analyze the content • Model the info types from the content • Implement the info types in an RDB • Model and implement the Navigation • Turn pages into templates

3. Specs Overall, follow the model of the reverse engineering work we have done so far. It is worth your while to go back through the slides so far and make sure you have all the stuff in there covered in your own work. • Info types • At least two • At least 10 elements per type • At least 2 controlled vocabularies • Access structures • At least one of each type • A total of at least 6 • Templates • At least one for each full view • Including at least 3 nav areas overall Hand in to the dropbox a single zip or rar file that has all your work in it. • Slides • Data diagrams • Source files for your database (a sql script, database backup, or other file from your design environment • Original and templatized pages with subfolders for media, css and js

4. Deliverable: Screen dissections & Info model • Page deconstruction showing the high-level view: • Info, nav and other areas named and labeled • At least one for the full-view page of both info types • Drill down to the full view of an info item • At least one per info type • Uses the labeling methods you practiced • Do not include other screen areas in the screen shots • Don’t forget to consider entities carefully and include a key in your slides • Info model • Follow the presentation method we practiced • Include controlled vocabs, rich text definitions and link structure

5. Deliverable: Nav structure • Take screen shots of the site areas that show the access structures • Include as little of the screen as possible to still show the navigation • Include any parts of the structure that span across pages (as I did for the snopes hierarchy) • Mark up only the parts of the screens that • Show the attributes of the access structure (that are needed to build navigation) • Show new attributes or entities that were not previously in your info model

6. Deliverable: Data Model • Use whatever data modeling tool you would like as long as it graphically shows • Tables and fields • Relationships with cardinality • Primary and foreign keys • We won’t be concerned with data types for this assignments • Hand in one overall diagram and zoomed in diagrams for • Each info type • Each access structure • Include notes on the diagrams as needed to explain what you did

7. Deliverable: Design decisions As you do this project, jot down a note each time you are confronted with a design choice. Hand in the notes organized as follows • Design decision. What was the decision and what were the possible choices • Choice. What choice did you make and why? The more decisions you log and explain the better but we count the quality much more than quantity

8. Deliverable: Templates For the FULL PAGE that includes a full view of each info type you chose • Download the page and all its css, js and media files so it will display completely locally • Save the downloaded page as <infoType_template>.html • Edit the HTML (not the visual design) line-by-line to replace all data on the page by template commands • Use the commands and methodology you practiced for snopes • Make sure that • Your templatized page displays with all the static HTML and formatting intact. • When we download and unpack your work that all the files needed to display the original and templatized pages are downloaded and in the right places. • You can use your discretion on what to make a function but be sure not to make a function when you could easily code it into the template using the commands we provided

9. Activity: Spec your site

10. Spec your site: instructions • Look around the web till you find a site (or a part of a site that you think will work for this activity) • Fill out the slides that follow • Upload the slides to the dropbox • Note that you need only do a little work in theses slides to show that you understand • No markup • No info model • No data model • No templates

11. <site name> • Site URL: <url> • Info type 1 • Name: <name> • How many are on the site: <rough estimate> • Info type 2 • Name: <name> • How many are on the site: <rough estimate>

12. Full view of info type 1 (name the areas) Paste a full page screen shot here

13. Full view of info type 2 (name the areas) Paste a full page screen shot here

14. Zoom in on an item of type 1 (analyze the info area) Paste a screen shot of just the area with the item here (no surrounding nav, banner or other areas)

15. Zoom in on an item of type 2 (analyze the info area) Paste a screen shot of just the area with the item here (no surrounding nav, banner or other areas)

16. Hierarchy Paste a screen shots of the area or areas that represent this type of navigation (i.e., that indicate this access structure)

17. Index Paste a screen shots of the area or areas that represent this type of navigation (i.e., that indicate this access structure)

18. Association Paste a screen shots of the area or areas that represent this type of navigation (i.e., that indicate this access structure)

19. Sequence Paste a screen shots of the area or areas that represent this type of navigation (i.e., that indicate this access structure)