Citiwiki summer workshop day 2 web page and wiki
Download
1 / 44

CitiWiki Summer Workshop Day 2: Web Page and Wiki - PowerPoint PPT Presentation


  • 241 Views
  • Updated On :

CitiWiki Summer Workshop Day 2: Web Page and Wiki. Li Xu CS, UMass Lowell. Server Workaround. http://www.cs.uml.edu/~xu/citiwiki. Day 1 Reflection. Q&A Project. RSS Feed. Thunderbird. Day 2 Agenda. Web page authoring HTML, XHTML, XML, CSS Wiki. Day 2 Goals. 6.

loader
I am the owner, or an agent authorized to act on behalf of the owner, of the copyrighted work described.
capcha
Download Presentation

PowerPoint Slideshow about 'CitiWiki Summer Workshop Day 2: Web Page and Wiki' - LionelDale


An Image/Link below is provided (as is) to download presentation

Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author.While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server.


- - - - - - - - - - - - - - - - - - - - - - - - - - E N D - - - - - - - - - - - - - - - - - - - - - - - - - -
Presentation Transcript
Citiwiki summer workshop day 2 web page and wiki l.jpg

CitiWiki Summer Workshop Day 2: Web Page and Wiki

Li Xu

CS, UMass Lowell


Server workaround l.jpg
Server Workaround

  • http://www.cs.uml.edu/~xu/citiwiki

CitiWiki Workshop 2007


Day 1 reflection l.jpg
Day 1 Reflection

  • Q&A

  • Project

CitiWiki Workshop 2007


Rss feed l.jpg
RSS Feed

  • Thunderbird

CitiWiki Workshop 2007


Day 2 agenda l.jpg
Day 2 Agenda

  • Web page authoring

  • HTML, XHTML, XML, CSS

  • Wiki

CitiWiki Workshop 2007


Day 2 goals l.jpg
Day 2 Goals

6

CitiWiki Workshop 2007

  • 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


The big picture l.jpg
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


Citiwiki setup l.jpg
CitiWiki setup

  • Web site organization

    • Hierachical tree structure

  • Apache web server

    • Put diretories and HTML pages into the htdocs directory

CitiWiki Workshop 2007


Page elements l.jpg
Page Elements

  • Title

  • Navigation links

  • Author, date, contact information

  • Content

CitiWiki Workshop 2007


Slide10 l.jpg
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


Slide11 l.jpg
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


Html tags headings l.jpg
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


Html tags text formating l.jpg
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


Html tags lists l.jpg
HTML Tags: Lists

  • Bullet list: <ul>, <li>, </li>, </ul>

  • Numbered list: <ol>, <li>, </li>, </ol>

CitiWiki Workshop 2007


Html tags links l.jpg
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


Html tags image l.jpg
HTML Tags: Image

  • Display image

  • <img> Tag

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

CitiWiki Workshop 2007


Html tags tables l.jpg
HTML Tags: Tables

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

  • Table

  • Table header

  • Table row

  • Table cell

CitiWiki Workshop 2007


Using tables for layout l.jpg
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=600

VALIGN=TOP>&nbsp</TD>

<TD BGCOLOR=SILVER WIDTH=150 VALIGN=TOP>Sidebar

Area</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 Text

Area</TD>

<TD BGCOLOR=WHITE WIDTH=10 VALIGN=TOP>&nbsp</TD>

</TR>

</TABLE>

CitiWiki Workshop 2007


Web page software l.jpg
Web Page Software

  • Microsoft FrontPage

  • Adobe DreamWeaver

CitiWiki Workshop 2007


New age of web design xhtml css l.jpg
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


Xml xhtml css l.jpg
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


Web design in xhtml css l.jpg
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


Structural tags l.jpg
Structural Tags

  • Heading and paragraph

    • h1, h2, h3, …, p

  • Div

  • Identifier of elements

CitiWiki Workshop 2007


Css styling l.jpg
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


Cascading l.jpg
Cascading

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

CitiWiki Workshop 2007


Connecting css to html l.jpg
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


Connecting css to html27 l.jpg
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


Css beauty l.jpg
CSS Beauty

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

CitiWiki Workshop 2007


Css exercise l.jpg
CSS Exercise

  • Using heading, p, div, list tags

  • Embedding and linking methods

  • CSS layout: CSSEasy.com

CitiWiki Workshop 2007


Use web page software l.jpg
Use Web Page Software

  • FrontPage

  • DreamWeaver

  • Check out W3C Standards Specification

CitiWiki Workshop 2007


Slide31 l.jpg
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


Wiki engine l.jpg
Wiki Engine

  • MediaWiki

  • MoinMoin

  • PmWiki

  • TikiWiki

  • UseModWiki

CitiWiki Workshop 2007


Wiki commands l.jpg
Wiki Commands

  • Mirrors what you can do in HTML

    • Heading

    • List

    • Table

    • Links

    • Page hierarchy

CitiWiki Workshop 2007


Wiki commands34 l.jpg
Wiki Commands

  • Heading

    • P: empty line

    • Line break: \\

    • h1: !, h2: !!, h3:!!!, …

  • Indenting: ->, -->

  • Use edit toolbar

CitiWiki Workshop 2007


Wiki commands35 l.jpg
Wiki Commands

  • List

    • Ordered list: #

    • Unordered list: *

    • List nesting: ##, **

CitiWiki Workshop 2007


Wiki commands36 l.jpg
Wiki Commands

  • Links:

    • [[page name]]

    • [[section/subsection]]

    • [[http://google.com|Google address]]

    • Or bare URL http://google.com

CitiWiki Workshop 2007


Wiki commands37 l.jpg
Wiki Commands

  • Formatting

    • Emphasize: quote ’’, ’’’

    • Color: %red%, %blue%, %green%, and %color=#CC0033%, %bgcolor%

    • %color=yellow bgcolor=green% text

    • Wiki style

CitiWiki Workshop 2007


Wiki exercise l.jpg
Wiki Exercise

CitiWiki Workshop 2007


Brainstorm what you can do l.jpg
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


Additional questions l.jpg
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


First draft project plan l.jpg
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


Day 2 assignments l.jpg
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


Day 2 assignment l.jpg
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


Day 2 assignment44 l.jpg
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 Workshop 2007