1 / 44

CitiWiki Summer Workshop Day 2: Web Page and Wiki

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.

LionelDale
Télécharger la présentation

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. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

E N D

Presentation Transcript

  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

  3. Day 1 Reflection • Q&A • Project CitiWiki Workshop 2007

  4. RSS Feed • Thunderbird CitiWiki Workshop 2007

  5. Day 2 Agenda • Web page authoring • HTML, XHTML, XML, CSS • Wiki CitiWiki Workshop 2007

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

  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 CitiWiki Workshop 2007

  8. CitiWiki setup • Web site organization • Hierachical tree structure • Apache web server • Put diretories and HTML pages into the htdocs directory CitiWiki Workshop 2007

  9. Page Elements • Title • Navigation links • Author, date, contact information • Content 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 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> 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> 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> CitiWiki Workshop 2007

  14. HTML Tags: Lists • Bullet list: <ul>, <li>, </li>, </ul> • Numbered list: <ol>, <li>, </li>, </ol> 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> CitiWiki Workshop 2007

  16. HTML Tags: Image • Display image • <img> Tag • <img src=“picture.jpg" alt=“Picture description" /> CitiWiki Workshop 2007

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

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

  19. Web Page Software • Microsoft FrontPage • Adobe DreamWeaver 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 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 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) CitiWiki Workshop 2007

  23. Structural Tags • Heading and paragraph • h1, h2, h3, …, p • Div • Identifier of elements 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 CitiWiki Workshop 2007

  25. Cascading • “Outer” element’s style will be inherited by “inner” element, unless specified otherwise 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> 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> CitiWiki Workshop 2007

  28. CSS Beauty • CSS Zen Gardenhttp://www.csszengarden.com/ CitiWiki Workshop 2007

  29. CSS Exercise • Using heading, p, div, list tags • Embedding and linking methods • CSS layout: CSSEasy.com CitiWiki Workshop 2007

  30. Use Web Page Software • FrontPage • DreamWeaver • Check out W3C Standards Specification 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 CitiWiki Workshop 2007

  32. Wiki Engine • MediaWiki • MoinMoin • PmWiki • TikiWiki • UseModWiki CitiWiki Workshop 2007

  33. Wiki Commands • Mirrors what you can do in HTML • Heading • List • Table • Links • Page hierarchy CitiWiki Workshop 2007

  34. Wiki Commands • Heading • P: empty line • Line break: \\ • h1: !, h2: !!, h3:!!!, … • Indenting: ->, --> • Use edit toolbar CitiWiki Workshop 2007

  35. Wiki Commands • List • Ordered list: # • Unordered list: * • List nesting: ##, ** CitiWiki Workshop 2007

  36. Wiki Commands • Links: • [[page name]] • [[section/subsection]] • [[http://google.com|Google address]] • Or bare URL http://google.com CitiWiki Workshop 2007

  37. Wiki Commands • Formatting • Emphasize: quote ’’, ’’’ • Color: %red%, %blue%, %green%, and %color=#CC0033%, %bgcolor% • %color=yellow bgcolor=green% text • Wiki style CitiWiki Workshop 2007

  38. Wiki Exercise 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! 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? 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. 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 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 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 CitiWiki Workshop 2007

More Related