citiwiki summer workshop day 2: web page and wiki li xu cs, umass lowell

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



RSS Feed

Thunderbird


Day 2 Agenda

Web page authoring HTML, XHTML, XML, CSS Wiki


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



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 setup

Web site organization Hierachical tree structure

Apache web server Put diretories and HTML pages into

the htdocs directory


Page Elements

Title Navigation links Author, date, contact information Content


HTML

HTML stands for Hypertext Markup Language

Write text with mark-up tags Wrap around text using matching

beginning and closing tags


HTML

HTML file structure

<HTML><HEAD><TITLE>Your title goes here</TITLE></HEAD><BODY>The body of your document goes here.</BODY></HTML>


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>


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>


HTML Tags: Lists

Bullet list: <ul>, <li>, </li>, </ul> Numbered list: <ol>, <li>, </li>,

</ol>


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>


HTML Tags: Image

Display image <img> Tag

<img src=“picture.jpg" alt=“Picture description" />


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>


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>&nbsp</TD><TD BGCOLOR=SILVER WIDTH=150 VALIGN=TOP>SidebarArea</TD><TD BGCOLOR=SILVER WIDTH=5 VALIGN=TOP>&nbsp</TD><TD BGCOLOR=WHITE WIDTH=20 VALIGN=TOP>&nbsp</TD><TD BGCOLOR=WHITE WIDTH=590 VALIGN=TOP>Main TextArea</TD><TD BGCOLOR=WHITE WIDTH=10 VALIGN=TOP>&nbsp</TD></TR></TABLE>


Web Page Software

Microsoft FrontPage Adobe DreamWeaver


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


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


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)


Structural Tags

Heading and paragraph h1, h2, h3, …, p

Div Identifier of elements


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


Cascading

“Outer” element’s style will be inherited by “inner” element, unless specified otherwise


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>


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>


CSS Beauty

CSS Zen Gardenhttp://www.csszengarden.com/


CSS Exercise

Using heading, p, div, list tags Embedding and linking methods CSS layout: CSSEasy.com


Use Web Page Software

FrontPage DreamWeaver Check out W3C Standards

Specification


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


Wiki Engine

MediaWiki MoinMoin PmWiki TikiWiki UseModWiki


Wiki Commands

Mirrors what you can do in HTML Heading List Table Links Page hierarchy


Wiki Commands

Heading P: empty line Line break: \\ h1: !, h2: !!, h3:!!!, …

Indenting: ->, --> Use edit toolbar


Wiki Commands

List Ordered list: # Unordered list: * List nesting: ##, **


Wiki Commands

Links: [[page name]] [[section/subsection]] [[http://google.com|Google address]] Or bare URL http://google.com


Wiki Commands

Formatting Emphasize: quote ’’, ’’’ Color: %red%, %blue%, %green%,

and %color=#CC0033%, %bgcolor% %color=yellow bgcolor=green% text Wiki style


Wiki Exercise


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!


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?


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.


Day 2 Assignments

Wiki blog your bio and project ideas on CitiWiki

Build a mock up Wiki page for your course or your work


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


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

citiwiki summer workshop day 2: web page and wiki li xu cs, umass lowell

Documents