citiwiki summer workshop day 2 web page and wiki l.
Download
Skip this Video
Loading SlideShow in 5 Seconds..
CitiWiki Summer Workshop Day 2: Web Page and Wiki PowerPoint Presentation
Download Presentation
CitiWiki Summer Workshop Day 2: Web Page and Wiki

Loading in 2 Seconds...

play fullscreen
1 / 44

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


  • 243 Views
  • Uploaded 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
server workaround
Server Workaround
  • http://www.cs.uml.edu/~xu/citiwiki

CitiWiki Workshop 2007

day 1 reflection
Day 1 Reflection
  • Q&A
  • Project

CitiWiki Workshop 2007

rss feed
RSS Feed
  • Thunderbird

CitiWiki Workshop 2007

day 2 agenda
Day 2 Agenda
  • Web page authoring
  • HTML, XHTML, XML, CSS
  • Wiki

CitiWiki Workshop 2007

day 2 goals
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
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
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
Page Elements
  • Title
  • Navigation links
  • Author, date, contact information
  • Content

CitiWiki Workshop 2007

slide10
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
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
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
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
HTML Tags: Lists
  • Bullet list: <ul>, <li>, </li>, </ul>
  • Numbered list: <ol>, <li>, </li>, </ol>

CitiWiki Workshop 2007

html tags links
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
HTML Tags: Image
  • Display image
  • <img> Tag
    • <img src=“picture.jpg" alt=“Picture description" />

CitiWiki Workshop 2007

html tags tables
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
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
Web Page Software
  • Microsoft FrontPage
  • Adobe DreamWeaver

CitiWiki Workshop 2007

new age of web design xhtml css
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
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
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
Structural Tags
  • Heading and paragraph
    • h1, h2, h3, …, p
  • Div
  • Identifier of elements

CitiWiki Workshop 2007

css styling
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
Cascading
  • “Outer” element’s style will be inherited by “inner” element, unless specified otherwise

CitiWiki Workshop 2007

connecting css to html
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
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
CSS Beauty
  • CSS Zen Gardenhttp://www.csszengarden.com/

CitiWiki Workshop 2007

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

CitiWiki Workshop 2007

use web page software
Use Web Page Software
  • FrontPage
  • DreamWeaver
  • Check out W3C Standards Specification

CitiWiki Workshop 2007

slide31
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
Wiki Engine
  • MediaWiki
  • MoinMoin
  • PmWiki
  • TikiWiki
  • UseModWiki

CitiWiki Workshop 2007

wiki commands
Wiki Commands
  • Mirrors what you can do in HTML
    • Heading
    • List
    • Table
    • Links
    • Page hierarchy

CitiWiki Workshop 2007

wiki commands34
Wiki Commands
  • Heading
    • P: empty line
    • Line break: \\
    • h1: !, h2: !!, h3:!!!, …
  • Indenting: ->, -->
  • Use edit toolbar

CitiWiki Workshop 2007

wiki commands35
Wiki Commands
  • List
    • Ordered list: #
    • Unordered list: *
    • List nesting: ##, **

CitiWiki Workshop 2007

wiki commands36
Wiki Commands
  • Links:
    • [[page name]]
    • [[section/subsection]]
    • [[http://google.com|Google address]]
    • Or bare URL http://google.com

CitiWiki Workshop 2007

wiki commands37
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
Wiki Exercise

CitiWiki Workshop 2007

brainstorm what you can do
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
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
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
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
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
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