1 / 23

INFO 330

INFO 330. Reverse Engineering Activity Introduction and Instructions. Steps. 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.

vernon
Download Presentation

INFO 330

An Image/Link below is provided (as is) to download presentation Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

E N D

Presentation Transcript

  1. INFO 330 Reverse Engineering Activity Introduction and Instructions

  2. Steps • 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. What is a template? A program to display info types and access structures wrapped in static text and formatting

  4. A template in Word

  5. A template in PowerPoint

  6. A Template in Wordpress

  7. A Web Page template Banner Global Nav Info area: partial views Ads Local nav

  8. A Web area template c.num Navigation (not info) p.title c.name c.image c.date c.Text (p) comment (r) c.name c.email c.site c.text

  9. Web templates vs. CSS • Same • Look and feel • Layout • Different

  10. Templates have • Logic • Conditionals • Loops • Etc. • Commands • Fetch from DB • Put here • Formatting • HTML • CSS • JS If rumor.hasAd = True Select url, hotText from Ad Insert Insert <a href=“” class=“mylink” onMouseOver=“makeBig(this)"”></a>

  11. A page template (HTML Tables)

  12. A page template (HTML Divs)

  13. Page template Calls sub templateCalls in item info or nav logic and info

  14. Key Concept: xsl:call-template You call a template when you need it

  15. Templates called from divs

  16. Summary

  17. Template LOGICAL DESIGN c.num Navigation (not info) p.title c.name c.image c.date c.Text (p) comment (r) c.name c.email c.site c.text

  18. Template PHYSICAL design

  19. Before

  20. After

  21. Template markup activity • Download complete copies of the pages we specify • Make sure they run completely locally • For each page • Leave the banner and global nav as is • Find all parts of the page that come form the database • Replace those parts with the markup rules we specify • Be sure not to replace any formatting or layout HTML EXCEPT • Inside text fields • Where there are repeating parts • e.g., in a bullet list of soures, you need markup only one source an put that markup inside a {%%beginRepeat for each ______ … endRepeat%%} • Feel free to finesse a little (if snopes does something inconsistently that you would like to normalize)

  22. Template Markup Rules • For “gets” {%%table.field%%} inside the appropriate HTML • For general logic {%%functionName%%}. Make names that are obvious • For repeating blocks use • {%%beginRepeat for each ______ • HTML and commands • endRepeat%%} • For optional stuff • {%%beginIftable.field=value • HTML and commands • endIf%%}

  23. Pages to do • http://www.snopes.com/sources/vanhitch.htm • http://www.snopes.com/horrors/techno/microwavedpet.asp

More Related