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

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


  • 233 Views
  • Updated On :
  • Presentation posted in: Internet / Web

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

CitiWiki Summer Workshop Day 2: Web Page and Wiki

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


ad
  • Login