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 stands for Hypertext Markup Language

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

beginning and closing tags

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>,

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

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

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

2017 18 game notes umass lowell hockey€¦ · 2017-18 game...

umass lowell | umass lowell - capital plan fy19-23 plan...

trinitite – the atomic rock - umass lowell

crumpled paper complete - umass lowell | umass lowell

2020 annual report - umass lowell | umass lowell

nanomanufacturing & medtech research at umass lowell

2014-15 umass lowell hockey record book

umass lowell hockey team prospectus

2010 umass lowell field hockey media guide

umass lowell softball record book

units and significant figures - umass lowell

2011˙ 2012 calendar - umass lowell | umass...

umass lowell | umass lowell - systems technology in … a1...

citiwiki summer workshop day 1: introduction li xu cs, umass...

umass lowell case statement

the innovation effect - umass lowell effect donahue report...

2015 umass lowell volleyball record book

image processing using matlab - umass lowell

umass lowell card 2.16_tcm18-233345.pdf · umass lowell...

request for bid - umass lowell | umass lowell...