Information Architecture 2 Primary Readings - Designing With Web Standards: Chapters 5-8 Designing With Web Standards Deliverables - Design Critiques due NEXT week - Research Topics discussion & selection XHMTL Layout discussion Class Work: Navigation

Modern Markup Server Side Functionality - PHP - SSI - ASP - Web DB - ODBC - JDBC Levels of Abstraction with Markup Languages - Flexibility - Application-like functionality - Transformable

PHP PHP Hypertext Processor A lightweight scripting language you can embed into markup to: - Pull data from a database - Push data to a database - Dynamically change page format - Dynamically change page content Has replaced cgi for many that need server- side logic Powerful combination with javascript & XML

PHP Example <?php if (!isset($_SERVER['PHP_AUTH_USER'])) { header('WWW-Authenticate: Basic realm="My Realm"'); header('HTTP/ Unauthorized'); echo 'Text to send if user hits Cancel button'; exit; } else { echo " Hello {$_SERVER['PHP_AUTH_USER']}. "; echo " You entered {$_SERVER['PHP_AUTH_PW']} as your password. "; } ?>

XML is your (super) friend No longer worry about presentation, just structure for content. Leave the formatting to CSS. Consistency Advanced tools help compose and check markup - W3C Validator W3C Validator - Cooktop Cooktop - XMetaL XMetaL XML in action is XHTML Works with other XML protocols - SOAP - SMIL - RDF - P3P XML is consistent (and readable)

XHTML “XHTML is XML that acts like HTML in old and new Web browsers and also works as expected in most Internet devices…making it portable, practical, and cost efficient” Zeldman p 149 XHTML Flavors - XHTML XHTML 1.0 Transitional - XHTML 1.1 Strict - XHTML 2.0 (not as backward compatible) Consistency makes most transitions practical Top Ten Reasons to Convert to XHTML (p )

XHTML in Action New languages for the browsers to interpret - You wondered why browser app sizes aren’t getting smaller - Full-fledged programming environment now - Treat it as such DOCTYPE - Different rules for different documents - Document Type Definitions (DTD) - Works with CSS (CSS needs it) - Namespace - Declares using HTML -

XHTML in Action 2 Don’t forget the character set/code page - Lowercase tags InterCaps are troublesome Atrributes - Centering - No blank values - Quote all attribute values Close all tags Use Comments

XHTML and Structure Content determines structure, not presentation Headings, not Fonts Lists Parallel structure - h1 – h2 – h3 - Item, item, item Div - One section (division) of a document/file, not a heading - Attributes are constrained to the section ID - Naming and Internal Labels - Application Use Class - useful for numerous elements Span - overused

Rules of XHTML DOCTYPE & namespace META content Lowercase Quotes for all attributes Assign value to all attributes Close tags (empties too) No double dashes -- < and & Unicode tooUnicode

XHTML by Example Hybrid Layouts (not all that new) The power of CSS (over Javascript, over anything) Using id’s & attributes Does navigation markup have it’s own rules? Over-designing - with standards or not? What’s the most practical way to use structured, standardized markup? - For designing & building a new site? - For updating an old site?

Class Work: Navigation Key Elements? - Top 9 functions Specific Elements? - Per main parent - Related siblings Interface ideas - Navigation Bar - Tabs - Dynamic Interaction Rollovers Pop-ups Help

Class Work: Navigation Review navigation systems - Suggestions? Select elements that are the best - Main page navigation - Other pages navigation Build a template for both kinds Support each navigation style & purpose with user stories

Research Topic Presentations Topics Scheduling What’s in a good presentation? - Overview - Short history - Examples - Guildelines - How to use for IA projects Walk through, check for ideas, look for complimentary sources