Content Management Systems Week 14 LBSC 671 Creating Information Infrastructures

Content Management Systems
Week 14
LBSC 671
Creating Information Infrastructures
Putting the Pieces Together
Web Server
Browser
Database
HTML
CGI
HTML
SQL Query
Results
Why Database-Generated Pages?
• Remote access to a database
– Client does not need the database software
• Serve rapidly changing information
– e.g., Airline reservation systems
• Provide multiple “access points”
– By subject, by date, by author, …
• Record user responses in the database
Why Content Management Systems?
• Separation of content and appearance
• Separation of roles
• Standardization of common “design patterns”
–
–
–
–
–
Login and password recovery
Headlines and drill-down
Site map
Search
Shopping cart
Content Management Systems
• WordPress
– http://wordpress.org
• Joomla
– http://www.joomla.org
• Drupal
– https://drupal.org
Roles
•
•
•
•
•
•
•
Information architecture design
Task assignment
Content generation and modification
Approval for “publication”
Publication
Error correction
Tracking task progress
Content Management System Structure
• Database stores the content
– And access control data and parameters
• Server scripting controls the user experience
– PHP readss database, generates HTML
• (X)HTML conveys the user experience
• User-side scripting enhances interactivity
– JavaScript may be used for form validation
Business Interaction
Design
rules
Interface
Design
Client Hardware
Web Browser
Client-side Programming
Interchange Language
Server-side Programming
(PC)
(IE, Firefox)
(JavaScript)
(HTML, XML)
(PHP)
Database
(MySQL)
Server Hardware
(PC, Unix)
“Site Blueprint”
Main
Homepage
Teaching
Research
Other
Activities
LBSC 690
Ph.D.
Students
IR
Colloquium
INFM 718R
Publications
TREC
Doctoral
Seminar
Projects
Grid Layouts
Navigation Bar
Navigation Bar
Content
Content
Navigation Bar
Content
Related Links
Navigation Bar
Content
Grid Layout: NY Times
Grid Layout: NY Times
Navigation
Banner Ad
Another Ad
Content
Popular
Articles
Grid Layout: ebay
Grid Layout: ebay
Navigation
Banner Ad
Navigation
Related
Search Results
Grid Layout: Amazon
Grid Layout: Amazon
Navigation
Navigation
Related
Search Results
Some Layout Guidelines
• Contrast: make different things different
– to bring out dominant elements
– to create dynamism
• Repetition: reuse design throughout the interface
– to achieve consistency
• Alignment: visually connect elements
– to create flow
• Proximity: make effective use of spacing
– to group related and separate unrelated elements
Joomla Structure
• Front end
– The Web site
• Back end
– Where the Web site is defined
Joomla Components
• Web sites are made up of rectangular pieces
– Called “modules”
• Two basic types of modules:
– Displaying content (e.g., articles)
– Interaction (e.g., login)
• Templates define where modules can be put
– Templates define abstract “positions”
– Joomla maps positions to layout in ways
appropriate to the device
Joomla Features
• Menus control navigation
– Menu items control where you can go
• Categories group things (i.e., entities)
– University courses, Apollo missions, Meetups, …
• Extensions allow you to add new capabilities
– JCE Editor, Image rotator, Google maps, …
Joomla Hosting
• Your own computer
– Useful as a way to try things out
– Not easily accessable to others
• Demo account (for 30 days) at joomla.org
– You can pay to keep it past 30 days
• Web hosting service
– Longer life, more support, or less cost
– More complex to set up
Joomla First Steps
• System->Control Panel
– Gets to the back-end home
• Install the Joomla Content Editor (JCE)
• Learn how to insert content
– Images, text without formatting
• Learn how to set up menu items
• Learn how to control layout
Ajax Applications
• Google Maps
– http://maps.google.com
• Google Suggest
– http://www.google.com/webhp?complete=1&hl=en
• Sajax Tables
– http://labs.revision10.com/?p=5
• Sajax
– http://www.modernmethod.com/sajax/
Navigation Patterns
• Drive to content
• Drive to advertisement
• Move up a level
• Move to next in sequence
• Jump to related
Before You Go
On a sheet of paper, answer the following
(ungraded) question (no names, please):
What was the muddiest point in
this semester?