CitiWiki Summer Workshop Day 2: Web Page and Wiki
Li XuCS, UMass Lowell
Server Workaround
http://www.cs.uml.edu/~xu/citiwiki
CitiWiki Workshop 2007 2
Day 1 Reflection
Q&A Project
CitiWiki Workshop 2007 3
CitiWiki Workshop 2007 4
RSS Feed
Thunderbird
CitiWiki Workshop 2007 5
Day 2 Agenda
Web page authoring HTML, XHTML, XML, CSS Wiki
CitiWiki Workshop 2007 6
Day 2 Goals
Understand web design and technologies
Learn how to create Web page and Wiki HTML tags Wiki editing commands
Be able to design and build simple web and Wiki pages
CitiWiki Workshop 2007 6
CitiWiki Workshop 2007 7
The Big Picture
Web server Contact your school IT people on how
to publish web pages on the server HTML documents
Create offline Upload to the web server
Web browser
CitiWiki Workshop 2007 8
CitiWiki setup
Web site organization Hierachical tree structure
Apache web server Put diretories and HTML pages into
the htdocs directory
CitiWiki Workshop 2007 9
Page Elements
Title Navigation links Author, date, contact information Content
CitiWiki Workshop 2007 10
HTML
HTML stands for Hypertext Markup Language
Write text with mark-up tags Wrap around text using matching
beginning and closing tags
CitiWiki Workshop 2007 11
HTML
HTML file structure
<HTML><HEAD><TITLE>Your title goes here</TITLE></HEAD><BODY>The body of your document goes here.</BODY></HTML>
CitiWiki Workshop 2007 12
HTML Tags: Headings
Use heading and paragraph tags to organize logical structure
<H1>This is a heading 1</H1><H2>This is a heading 2</H2><H3>This is a heading 3</H3><H4>This is a heading 4</H4><H5>This is a heading 5</H5><H6>This is a heading 6</H6><P>This is a normal text paragraph.</P>
CitiWiki Workshop 2007 13
HTML Tags: Text Formating Alignment
<CENTER>This text is centered.</CENTER> <H1 STYLE=”text-align: right”>This heading is right
aligned.</H1> Appearance
This is <B>bold</B>. This is <I>italic</I>.
Fonts and color <H1><FONT FACE=”Arial”>This is a
heading</FONT></H1> <FONT COLOR=YELLOW>This text is
yellow.</FONT>
CitiWiki Workshop 2007 14
HTML Tags: Lists
Bullet list: <ul>, <li>, </li>, </ul> Numbered list: <ol>, <li>, </li>,
</ol>
CitiWiki Workshop 2007 15
HTML Tags: Links
Create hyperlinks <a> Tag
<a href=”http://www.google.com”> Google</a>
Link within same page <a name=“top”> top of page </a> <a href=“#top”> Go to top </a>
CitiWiki Workshop 2007 16
HTML Tags: Image
Display image <img> Tag
<img src=“picture.jpg" alt=“Picture description" />
CitiWiki Workshop 2007 17
HTML Tags: Tables
Table Table header Table row Table cell
<table width="300" border="1"> <tr> <th>Web Features</th> <th>Love it</th> <th>Hate it</th> </tr> <tr> <td>Tables</td> <td>62%</td> <td>38%</td> </tr> <tr> <td>Style Sheet </td> <td>55%</td> <td>45%</td> </tr></table>
CitiWiki Workshop 2007 18
Using Tables for Layout
Common practice pre 2006<TABLE BORDER=0 CELLSPACING=0 CELLPADDING=0 WIDTH=780><TR><TD BGCOLOR=YELLOW HEIGHT=50 COLSPAN=6><H1>Page Header Area</H1></TD></TR><TR><TD BGCOLOR=SILVER WIDTH=5 HEIGHT=600VALIGN=TOP> </TD><TD BGCOLOR=SILVER WIDTH=150 VALIGN=TOP>SidebarArea</TD><TD BGCOLOR=SILVER WIDTH=5 VALIGN=TOP> </TD><TD BGCOLOR=WHITE WIDTH=20 VALIGN=TOP> </TD><TD BGCOLOR=WHITE WIDTH=590 VALIGN=TOP>Main TextArea</TD><TD BGCOLOR=WHITE WIDTH=10 VALIGN=TOP> </TD></TR></TABLE>
CitiWiki Workshop 2007 19
Web Page Software
Microsoft FrontPage Adobe DreamWeaver
CitiWiki Workshop 2007 20
New Age of Web Design: XHTML, CSS
A Sea Change in last two years XHTML and CSS have arrived Separate content and structure from
styling
CitiWiki Workshop 2007 21
XML, XHTML, CSS XML: Extensible Markup Language
Define new tags. Well-formed. Opening tags matched with
closing tags Validation. Specify semantic rules on tags
and attributes XHTML: Extensible HyperText Markup
Language Reformulation of HTML as XML
CSS: Cascading Style Sheets Separate styling from structural design
CitiWiki Workshop 2007 22
Web Design in XHTML, CSS
XHTML file describes content structure
Separate styling sheet (formatting commands) dictates styling of page
Early adoption suffers from lack of browser support
Has become main stream approach (2006 upward)
CitiWiki Workshop 2007 23
Structural Tags
Heading and paragraph h1, h2, h3, …, p
Div Identifier of elements
CitiWiki Workshop 2007 24
CSS Styling
Style rules in CSS Selector {declaration} Example: p {color: blue; background-
color: white; } XHTML file is a tree structure (tags
are strictly enclosing), root is html Selector consists a path to select
specific elements in HTML page
CitiWiki Workshop 2007 25
Cascading
“Outer” element’s style will be inherited by “inner” element, unless specified otherwise
CitiWiki Workshop 2007 26
Connecting CSS to HTML
Embed style in HTML header
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en"><head><meta http-equiv="content-type" content="text/html; charset=utf-8" /><title>My Page</title><style type="text/css">p {text-align:right; font-family: Arial, Helvetica, sans-serif;}li {font-weight:bold;}</style></head>
CitiWiki Workshop 2007 27
Connecting CSS to HTML
Link style sheet file to HTML Put style commands in style.css file
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en"><head><title>My Page</title><meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" /><link rel="stylesheet" type="text/css" href=“style.css" /></head>
CitiWiki Workshop 2007 28
CSS Beauty
CSS Zen Gardenhttp://www.csszengarden.com/
CitiWiki Workshop 2007 29
CSS Exercise
Using heading, p, div, list tags Embedding and linking methods CSS layout: CSSEasy.com
CitiWiki Workshop 2007 30
Use Web Page Software
FrontPage DreamWeaver Check out W3C Standards
Specification
CitiWiki Workshop 2007 31
Wiki
Web design and web page creation in XHTML, CSS flexible and powerful, but too much overhead Web designer makes living/fortune by
doing just that Wiki: light-weight method to create
web content – just use your browser Profound implications
CitiWiki Workshop 2007 32
Wiki Engine
MediaWiki MoinMoin PmWiki TikiWiki UseModWiki
CitiWiki Workshop 2007 33
Wiki Commands
Mirrors what you can do in HTML Heading List Table Links Page hierarchy
CitiWiki Workshop 2007 34
Wiki Commands
Heading P: empty line Line break: \\ h1: !, h2: !!, h3:!!!, …
Indenting: ->, --> Use edit toolbar
CitiWiki Workshop 2007 35
Wiki Commands
List Ordered list: # Unordered list: * List nesting: ##, **
CitiWiki Workshop 2007 36
Wiki Commands
Links: [[page name]] [[section/subsection]] [[http://google.com|Google address]] Or bare URL http://google.com
CitiWiki Workshop 2007 37
Wiki Commands
Formatting Emphasize: quote ’’, ’’’ Color: %red%, %blue%, %green%,
and %color=#CC0033%, %bgcolor% %color=yellow bgcolor=green% text Wiki style
CitiWiki Workshop 2007 38
Wiki Exercise
CitiWiki Workshop 2007 39
BrainStorm What You Can Do What is your current use of technology?
Online course materials (already developed) Powerpoint Web Resources (e.g., radio broadcasts, simulations) Email, mail lists (questions about HW, Exams/Quizzes) Learning Management System Websites for Case Studies OpenSource software (webservers, PHP, etc.) Google/Yahoo Groups
What impact do you think technology has on student learning in your classroom?
How the discussed web and wiki technology can enhance teaching and learning?
How might technology enhance or detract from student learning? Some simulations are distracting Tech skills may be a limitation for some students, detracting from learning
exp. It has to work and must be available!
CitiWiki Workshop 2007 40
Additional Questions How do you manage large classes? How effective are the current
technology and tools you use? Availability of technology for class use. Communication with IT for
infrastructure need How do we use technology for
Assessment?
CitiWiki Workshop 2007 41
First Draft – Project Plan In order to assist you in planning to incorporate web
and wiki into your course, we need to know more about what you intend to do. On Wednesday, we will discuss the following questions:
What is the nature of the class and rational for incorporating technology?
What is your implementation plan? What is your assessment plan?
Please answer these questions and bring a one or two page summary to our next meeting and put it on your Wiki.
CitiWiki Workshop 2007 42
Day 2 Assignments
Wiki blog your bio and project ideas on CitiWiki
Build a mock up Wiki page for your course or your work
CitiWiki Workshop 2007 43
Day 2 Assignment What technology-enhanced tool do
you plan to incorporate in your class? What is the nature of the class and
rationale for the plan? What is you plan for implementation? What is your plan for assessment?
Write your plan in your Wiki page
CitiWiki Workshop 2007 44
Day 2 Assignment
Optional: download software and set up your own web server and Wiki on Windows Directions on software.html Incorporate wiki for daily use Will go over details on Day 4