Download presentation
Presentation is loading. Please wait.
1
CitiWiki Summer Workshop Day 2: Web Page and Wiki Li Xu CS, UMass Lowell
2
Server Workaround http://www.cs.uml.edu/~xu/citiwiki CitiWiki Workshop 2007 2
3
Day 1 Reflection Q&A Project CitiWiki Workshop 2007 3
4
4 RSS Feed Thunderbird
5
CitiWiki Workshop 2007 5 Day 2 Agenda Web page authoring HTML, XHTML, XML, CSS Wiki
6
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
7
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
8
CitiWiki Workshop 2007 8 CitiWiki setup Web site organization Hierachical tree structure Apache web server Put diretories and HTML pages into the htdocs directory
9
CitiWiki Workshop 2007 9 Page Elements Title Navigation links Author, date, contact information Content
10
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
11
CitiWiki Workshop 2007 11 HTML HTML file structure Your title goes here The body of your document goes here.
12
CitiWiki Workshop 2007 12 HTML Tags: Headings Use heading and paragraph tags to organize logical structure This is a heading 1 This is a heading 2 This is a heading 3 This is a heading 4 This is a heading 5 This is a heading 6 This is a normal text paragraph.
13
CitiWiki Workshop 2007 13 HTML Tags: Text Formating Alignment This text is centered. This heading is right aligned. Appearance This is bold. This is italic. Fonts and color This is a heading This text is yellow.
14
CitiWiki Workshop 2007 14 HTML Tags: Lists Bullet list:,,, Numbered list:,,,
15
CitiWiki Workshop 2007 15 HTML Tags: Links Create hyperlinks Tag Google Link within same page top of page Go to top
16
CitiWiki Workshop 2007 16 HTML Tags: Image Display image Tag
17
CitiWiki Workshop 2007 17 HTML Tags: Tables Table Table header Table row Table cell Web Features Love it Hate it Tables 62% 38% Style Sheet 55% 45%
18
CitiWiki Workshop 2007 18 Using Tables for Layout Common practice pre 2006 Page Header Area <TD BGCOLOR=SILVER WIDTH=5 HEIGHT=600 VALIGN=TOP>  Sidebar Area   Main Text Area  
19
CitiWiki Workshop 2007 19 Web Page Software Microsoft FrontPage Adobe DreamWeaver
20
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
21
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
22
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)
23
CitiWiki Workshop 2007 23 Structural Tags Heading and paragraph h1, h2, h3, …, p Div Identifier of elements
24
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
25
CitiWiki Workshop 2007 25 Cascading “Outer” element’s style will be inherited by “inner” element, unless specified otherwise
26
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"> My Page p {text-align:right; font-family: Arial, Helvetica, sans-serif;} li {font-weight:bold;}
27
CitiWiki Workshop 2007 27 Connecting CSS to HTML Link style sheet file to HTML Put style commands in style.css file My Page
28
CitiWiki Workshop 2007 28 CSS Beauty CSS Zen Garden http://www.csszengarden.com/ http://www.csszengarden.com/
29
CitiWiki Workshop 2007 29 CSS Exercise Using heading, p, div, list tags Embedding and linking methods CSS layout: CSSEasy.com
30
CitiWiki Workshop 2007 30 Use Web Page Software FrontPage DreamWeaver Check out W3C Standards Specification
31
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
32
CitiWiki Workshop 2007 32 Wiki Engine MediaWiki MoinMoin PmWiki TikiWiki UseModWiki
33
CitiWiki Workshop 2007 33 Wiki Commands Mirrors what you can do in HTML Heading List Table Links Page hierarchy
34
CitiWiki Workshop 2007 34 Wiki Commands Heading P: empty line Line break: \\ h1: !, h2: !!, h3:!!!, … Indenting: ->, --> Use edit toolbar
35
CitiWiki Workshop 2007 35 Wiki Commands List Ordered list: # Unordered list: * List nesting: ##, **
36
CitiWiki Workshop 2007 36 Wiki Commands Links: [[page name]] [[section/subsection]] [[http://google.com|Google address]] Or bare URL http://google.com
![CitiWiki Workshop Wiki Commands Links: [[page name]] [[section/subsection]] [[ address]] Or bare URL](http://images.slideplayer.com./26/8358012/slides/slide_36.jpg "CitiWiki Workshop Wiki Commands Links: [[page name]] [[section/subsection]] [[ address]] Or bare URL")
37
CitiWiki Workshop 2007 37 Wiki Commands Formatting Emphasize: quote ’’, ’’’ Color: %red%, %blue%, %green%, and %color=#CC0033%, %bgcolor% %color=yellow bgcolor=green% text Wiki style
38
CitiWiki Workshop 2007 38 Wiki Exercise
39
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!
40
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?
41
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.
42
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
43
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
44
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
Similar presentations
