citiwiki summer workshop day 2: web page and wiki li xu cs, umass lowell
TRANSCRIPT
![Page 1: CitiWiki Summer Workshop Day 2: Web Page and Wiki Li Xu CS, UMass Lowell](https://reader035.vdocuments.net/reader035/viewer/2022070410/56649f165503460f94c2bc82/html5/thumbnails/1.jpg)
CitiWiki Summer Workshop Day 2: Web Page and Wiki
Li XuCS, UMass Lowell
![Page 2: CitiWiki Summer Workshop Day 2: Web Page and Wiki Li Xu CS, UMass Lowell](https://reader035.vdocuments.net/reader035/viewer/2022070410/56649f165503460f94c2bc82/html5/thumbnails/2.jpg)
Server Workaround
http://www.cs.uml.edu/~xu/citiwiki
CitiWiki Workshop 2007 2
![Page 3: CitiWiki Summer Workshop Day 2: Web Page and Wiki Li Xu CS, UMass Lowell](https://reader035.vdocuments.net/reader035/viewer/2022070410/56649f165503460f94c2bc82/html5/thumbnails/3.jpg)
Day 1 Reflection
Q&A Project
CitiWiki Workshop 2007 3
![Page 4: CitiWiki Summer Workshop Day 2: Web Page and Wiki Li Xu CS, UMass Lowell](https://reader035.vdocuments.net/reader035/viewer/2022070410/56649f165503460f94c2bc82/html5/thumbnails/4.jpg)
CitiWiki Workshop 2007 4
RSS Feed
Thunderbird
![Page 5: CitiWiki Summer Workshop Day 2: Web Page and Wiki Li Xu CS, UMass Lowell](https://reader035.vdocuments.net/reader035/viewer/2022070410/56649f165503460f94c2bc82/html5/thumbnails/5.jpg)
CitiWiki Workshop 2007 5
Day 2 Agenda
Web page authoring HTML, XHTML, XML, CSS Wiki
![Page 6: CitiWiki Summer Workshop Day 2: Web Page and Wiki Li Xu CS, UMass Lowell](https://reader035.vdocuments.net/reader035/viewer/2022070410/56649f165503460f94c2bc82/html5/thumbnails/6.jpg)
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
![Page 7: CitiWiki Summer Workshop Day 2: Web Page and Wiki Li Xu CS, UMass Lowell](https://reader035.vdocuments.net/reader035/viewer/2022070410/56649f165503460f94c2bc82/html5/thumbnails/7.jpg)
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
![Page 8: CitiWiki Summer Workshop Day 2: Web Page and Wiki Li Xu CS, UMass Lowell](https://reader035.vdocuments.net/reader035/viewer/2022070410/56649f165503460f94c2bc82/html5/thumbnails/8.jpg)
CitiWiki Workshop 2007 8
CitiWiki setup
Web site organization Hierachical tree structure
Apache web server Put diretories and HTML pages into
the htdocs directory
![Page 9: CitiWiki Summer Workshop Day 2: Web Page and Wiki Li Xu CS, UMass Lowell](https://reader035.vdocuments.net/reader035/viewer/2022070410/56649f165503460f94c2bc82/html5/thumbnails/9.jpg)
CitiWiki Workshop 2007 9
Page Elements
Title Navigation links Author, date, contact information Content
![Page 10: CitiWiki Summer Workshop Day 2: Web Page and Wiki Li Xu CS, UMass Lowell](https://reader035.vdocuments.net/reader035/viewer/2022070410/56649f165503460f94c2bc82/html5/thumbnails/10.jpg)
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
![Page 11: CitiWiki Summer Workshop Day 2: Web Page and Wiki Li Xu CS, UMass Lowell](https://reader035.vdocuments.net/reader035/viewer/2022070410/56649f165503460f94c2bc82/html5/thumbnails/11.jpg)
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>
![Page 12: CitiWiki Summer Workshop Day 2: Web Page and Wiki Li Xu CS, UMass Lowell](https://reader035.vdocuments.net/reader035/viewer/2022070410/56649f165503460f94c2bc82/html5/thumbnails/12.jpg)
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>
![Page 13: CitiWiki Summer Workshop Day 2: Web Page and Wiki Li Xu CS, UMass Lowell](https://reader035.vdocuments.net/reader035/viewer/2022070410/56649f165503460f94c2bc82/html5/thumbnails/13.jpg)
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>
![Page 14: CitiWiki Summer Workshop Day 2: Web Page and Wiki Li Xu CS, UMass Lowell](https://reader035.vdocuments.net/reader035/viewer/2022070410/56649f165503460f94c2bc82/html5/thumbnails/14.jpg)
CitiWiki Workshop 2007 14
HTML Tags: Lists
Bullet list: <ul>, <li>, </li>, </ul> Numbered list: <ol>, <li>, </li>,
</ol>
![Page 15: CitiWiki Summer Workshop Day 2: Web Page and Wiki Li Xu CS, UMass Lowell](https://reader035.vdocuments.net/reader035/viewer/2022070410/56649f165503460f94c2bc82/html5/thumbnails/15.jpg)
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>
![Page 16: CitiWiki Summer Workshop Day 2: Web Page and Wiki Li Xu CS, UMass Lowell](https://reader035.vdocuments.net/reader035/viewer/2022070410/56649f165503460f94c2bc82/html5/thumbnails/16.jpg)
CitiWiki Workshop 2007 16
HTML Tags: Image
Display image <img> Tag
<img src=“picture.jpg" alt=“Picture description" />
![Page 17: CitiWiki Summer Workshop Day 2: Web Page and Wiki Li Xu CS, UMass Lowell](https://reader035.vdocuments.net/reader035/viewer/2022070410/56649f165503460f94c2bc82/html5/thumbnails/17.jpg)
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>
![Page 18: CitiWiki Summer Workshop Day 2: Web Page and Wiki Li Xu CS, UMass Lowell](https://reader035.vdocuments.net/reader035/viewer/2022070410/56649f165503460f94c2bc82/html5/thumbnails/18.jpg)
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>
![Page 19: CitiWiki Summer Workshop Day 2: Web Page and Wiki Li Xu CS, UMass Lowell](https://reader035.vdocuments.net/reader035/viewer/2022070410/56649f165503460f94c2bc82/html5/thumbnails/19.jpg)
CitiWiki Workshop 2007 19
Web Page Software
Microsoft FrontPage Adobe DreamWeaver
![Page 20: CitiWiki Summer Workshop Day 2: Web Page and Wiki Li Xu CS, UMass Lowell](https://reader035.vdocuments.net/reader035/viewer/2022070410/56649f165503460f94c2bc82/html5/thumbnails/20.jpg)
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
![Page 21: CitiWiki Summer Workshop Day 2: Web Page and Wiki Li Xu CS, UMass Lowell](https://reader035.vdocuments.net/reader035/viewer/2022070410/56649f165503460f94c2bc82/html5/thumbnails/21.jpg)
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
![Page 22: CitiWiki Summer Workshop Day 2: Web Page and Wiki Li Xu CS, UMass Lowell](https://reader035.vdocuments.net/reader035/viewer/2022070410/56649f165503460f94c2bc82/html5/thumbnails/22.jpg)
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)
![Page 23: CitiWiki Summer Workshop Day 2: Web Page and Wiki Li Xu CS, UMass Lowell](https://reader035.vdocuments.net/reader035/viewer/2022070410/56649f165503460f94c2bc82/html5/thumbnails/23.jpg)
CitiWiki Workshop 2007 23
Structural Tags
Heading and paragraph h1, h2, h3, …, p
Div Identifier of elements
![Page 24: CitiWiki Summer Workshop Day 2: Web Page and Wiki Li Xu CS, UMass Lowell](https://reader035.vdocuments.net/reader035/viewer/2022070410/56649f165503460f94c2bc82/html5/thumbnails/24.jpg)
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
![Page 25: CitiWiki Summer Workshop Day 2: Web Page and Wiki Li Xu CS, UMass Lowell](https://reader035.vdocuments.net/reader035/viewer/2022070410/56649f165503460f94c2bc82/html5/thumbnails/25.jpg)
CitiWiki Workshop 2007 25
Cascading
“Outer” element’s style will be inherited by “inner” element, unless specified otherwise
![Page 26: CitiWiki Summer Workshop Day 2: Web Page and Wiki Li Xu CS, UMass Lowell](https://reader035.vdocuments.net/reader035/viewer/2022070410/56649f165503460f94c2bc82/html5/thumbnails/26.jpg)
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>
![Page 27: CitiWiki Summer Workshop Day 2: Web Page and Wiki Li Xu CS, UMass Lowell](https://reader035.vdocuments.net/reader035/viewer/2022070410/56649f165503460f94c2bc82/html5/thumbnails/27.jpg)
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>
![Page 28: CitiWiki Summer Workshop Day 2: Web Page and Wiki Li Xu CS, UMass Lowell](https://reader035.vdocuments.net/reader035/viewer/2022070410/56649f165503460f94c2bc82/html5/thumbnails/28.jpg)
CitiWiki Workshop 2007 28
CSS Beauty
CSS Zen Gardenhttp://www.csszengarden.com/
![Page 29: CitiWiki Summer Workshop Day 2: Web Page and Wiki Li Xu CS, UMass Lowell](https://reader035.vdocuments.net/reader035/viewer/2022070410/56649f165503460f94c2bc82/html5/thumbnails/29.jpg)
CitiWiki Workshop 2007 29
CSS Exercise
Using heading, p, div, list tags Embedding and linking methods CSS layout: CSSEasy.com
![Page 30: CitiWiki Summer Workshop Day 2: Web Page and Wiki Li Xu CS, UMass Lowell](https://reader035.vdocuments.net/reader035/viewer/2022070410/56649f165503460f94c2bc82/html5/thumbnails/30.jpg)
CitiWiki Workshop 2007 30
Use Web Page Software
FrontPage DreamWeaver Check out W3C Standards
Specification
![Page 31: CitiWiki Summer Workshop Day 2: Web Page and Wiki Li Xu CS, UMass Lowell](https://reader035.vdocuments.net/reader035/viewer/2022070410/56649f165503460f94c2bc82/html5/thumbnails/31.jpg)
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
![Page 32: CitiWiki Summer Workshop Day 2: Web Page and Wiki Li Xu CS, UMass Lowell](https://reader035.vdocuments.net/reader035/viewer/2022070410/56649f165503460f94c2bc82/html5/thumbnails/32.jpg)
CitiWiki Workshop 2007 32
Wiki Engine
MediaWiki MoinMoin PmWiki TikiWiki UseModWiki
![Page 33: CitiWiki Summer Workshop Day 2: Web Page and Wiki Li Xu CS, UMass Lowell](https://reader035.vdocuments.net/reader035/viewer/2022070410/56649f165503460f94c2bc82/html5/thumbnails/33.jpg)
CitiWiki Workshop 2007 33
Wiki Commands
Mirrors what you can do in HTML Heading List Table Links Page hierarchy
![Page 34: CitiWiki Summer Workshop Day 2: Web Page and Wiki Li Xu CS, UMass Lowell](https://reader035.vdocuments.net/reader035/viewer/2022070410/56649f165503460f94c2bc82/html5/thumbnails/34.jpg)
CitiWiki Workshop 2007 34
Wiki Commands
Heading P: empty line Line break: \\ h1: !, h2: !!, h3:!!!, …
Indenting: ->, --> Use edit toolbar
![Page 35: CitiWiki Summer Workshop Day 2: Web Page and Wiki Li Xu CS, UMass Lowell](https://reader035.vdocuments.net/reader035/viewer/2022070410/56649f165503460f94c2bc82/html5/thumbnails/35.jpg)
CitiWiki Workshop 2007 35
Wiki Commands
List Ordered list: # Unordered list: * List nesting: ##, **
![Page 36: CitiWiki Summer Workshop Day 2: Web Page and Wiki Li Xu CS, UMass Lowell](https://reader035.vdocuments.net/reader035/viewer/2022070410/56649f165503460f94c2bc82/html5/thumbnails/36.jpg)
CitiWiki Workshop 2007 36
Wiki Commands
Links: [[page name]] [[section/subsection]] [[http://google.com|Google address]] Or bare URL http://google.com
![Page 37: CitiWiki Summer Workshop Day 2: Web Page and Wiki Li Xu CS, UMass Lowell](https://reader035.vdocuments.net/reader035/viewer/2022070410/56649f165503460f94c2bc82/html5/thumbnails/37.jpg)
CitiWiki Workshop 2007 37
Wiki Commands
Formatting Emphasize: quote ’’, ’’’ Color: %red%, %blue%, %green%,
and %color=#CC0033%, %bgcolor% %color=yellow bgcolor=green% text Wiki style
![Page 38: CitiWiki Summer Workshop Day 2: Web Page and Wiki Li Xu CS, UMass Lowell](https://reader035.vdocuments.net/reader035/viewer/2022070410/56649f165503460f94c2bc82/html5/thumbnails/38.jpg)
CitiWiki Workshop 2007 38
Wiki Exercise
![Page 39: CitiWiki Summer Workshop Day 2: Web Page and Wiki Li Xu CS, UMass Lowell](https://reader035.vdocuments.net/reader035/viewer/2022070410/56649f165503460f94c2bc82/html5/thumbnails/39.jpg)
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!
![Page 40: CitiWiki Summer Workshop Day 2: Web Page and Wiki Li Xu CS, UMass Lowell](https://reader035.vdocuments.net/reader035/viewer/2022070410/56649f165503460f94c2bc82/html5/thumbnails/40.jpg)
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?
![Page 41: CitiWiki Summer Workshop Day 2: Web Page and Wiki Li Xu CS, UMass Lowell](https://reader035.vdocuments.net/reader035/viewer/2022070410/56649f165503460f94c2bc82/html5/thumbnails/41.jpg)
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.
![Page 42: CitiWiki Summer Workshop Day 2: Web Page and Wiki Li Xu CS, UMass Lowell](https://reader035.vdocuments.net/reader035/viewer/2022070410/56649f165503460f94c2bc82/html5/thumbnails/42.jpg)
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
![Page 43: CitiWiki Summer Workshop Day 2: Web Page and Wiki Li Xu CS, UMass Lowell](https://reader035.vdocuments.net/reader035/viewer/2022070410/56649f165503460f94c2bc82/html5/thumbnails/43.jpg)
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
![Page 44: CitiWiki Summer Workshop Day 2: Web Page and Wiki Li Xu CS, UMass Lowell](https://reader035.vdocuments.net/reader035/viewer/2022070410/56649f165503460f94c2bc82/html5/thumbnails/44.jpg)
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