CitiWiki Summer Workshop Day 3: A Wiki Framework Li Xu CS, UMass Lowell.

Slides:



Advertisements
Similar presentations
Objective Understand web-based digital media production methods, software, and hardware. Course Weight : 10%
Advertisements

HCI 201 Week 6 Client Side Image Maps Introduction to CSS.
Outline IS400: Development of Business Applications on the Internet Fall 2004 Instructor: Dr. Boris Jukic CSS: Cascading Style Sheets.
XP 1 Working with Cascading Style Sheets Creating a Style for Online Scrapbooks Tutorial 7.
Working with Cascading Style Sheets. 2 Objectives Introducing Cascading Style Sheets Using Inline Styles Using Embedded Styles Using an External Style.
Tutorial 3: Adding and Formatting Text. 2 Objectives Session 3.1 Type text into a page Copy text from a document and paste it into a page Check for spelling.
Microsoft ® Expression ® Web An Introduction to the Your Learning Guide to Expression Web tutorial.
Chapter 11 Cascading Style Sheets: Part I The Web Warrior Guide to Web Design Technologies.
Cascading Style Sheets Part 1 Library and Information Services, University of St Andrews.
XP Tutorial 7New Perspectives on Creating Web Pages with HTML, XHTML, and XML 1 Working with Cascading Style Sheets Creating a Style for Online Scrapbooks.
Creating a Basic Web Page
HTML & CSS.
Using Styles and Style Sheets for Design
Cascading Style Sheets CSS.  Standard defined by the W3C  CSS1 (released 1996) 50 properties  CSS2 (released 1998) 150 properties (positioning)  CSS3.
NetTech Solutions Working with Web Elements Lesson 6.
IT Introduction to Website Development Welcome!
Learning Web Design: Chapter 4. HTML  Hypertext Markup Language (HTML)  Uses tags to tell the browser the start and end of a certain kind of formatting.
1 WDMD 170 – UW Stevens Point WDMD 170 Internet Languages eLesson: CSS Introduction to Style Sheets (NON-audio version) © Dr. David C. Gibbs
PUBLISHING ONLINE Chapter 2. Overview Blogs and wikis are two Web 2.0 tools that allow users to publish content online Blogs function as online journals.
Cascading Style Sheets Tom Osman. Keep the content of a webpage separate from the formatting of the page. Structure (of content)  Headings  Sub headings.
Css. Definition Cascading style sheet (CSS) Cascading Style Sheets (CSS) is a simple mechanism for adding style (e.g. fonts, colors, spacing) to Web documents.
Cascading Style Sheets Orientation Learning Web Design: Chapter 11.
CSS CSS is short for C ascading S tyle S heets. It is a new web page layout method that has been added to HTML to give web developers more control over.
Session 1 SESSION 1 Working with Dreamweaver 8.0.
CitiWiki Summer Workshop Day 1: Introduction Li Xu CS, UMass Lowell.
Web Redesign Project Update September 15, Agenda Recall: Project Scope and requirements Information Architecture Usability Testing Visual Design.
CitiWiki Workshop CitiWiki Summer Workshop Week2 Day 1: Wiki Review and Wikispaces Li Xu CS, UMass Lowell.
© 2011 Delmar, Cengage Learning Chapter 8 Using Styles and Design Style Sheets for Design.
Cascading Style Sheets Part 1. CSS vs HTML HTML: Originally intended to markup structure of a document (,...,,,,,...) CSS Developing technology, CSS1,
XP Tutorial 7New Perspectives on HTML and XHTML, Comprehensive 1 Working with Cascading Style Sheets Tutorial 7.
Css. Definition Cascading style sheet (CSS)  It is a simple mechanism for adding style (e.g. fonts, colors, spacing) to Web documents.
12 Developing a Web Site Section 12.1 Discuss the functions of a Web site Compare and contrast style sheets Apply cascading style sheets (CSS) to a Web.
CPSC 203 Introduction to Computers Lab 33 By Jie Gao.
XP 1 Creating an XML Document Developing an XML Document for the Jazz Warehouse XML Tutorial.
CitiWiki Summer Workshop Day 2: Web Page and Wiki Li Xu CS, UMass Lowell.
DHTML. What is it? Dynamic HTML. Not a standard unlike HTML or Java It is a term applied by both Netscape and Microsoft to a collection of technologies.
Course created by Sarah Phillips BBCD Melbourne BAPDCOM Version 1 – April 2013.
1 © Netskills Quality Internet Training, University of Newcastle Using Style Sheets in Dreamweaver CS © Netskills, Quality Internet Training, University.
XHTML Formatting font with a style declaration. Formatting Font HTML uses the font tag to change size and family of font But… the font tag is being deprecated.
Copyright © 2003 Pearson Education, Inc. Slide 1-1 Created by Cheryl M. Hughes The Web Wizard’s Guide to XHTML by Cheryl M. Hughes.
CNIT 132 – Week 4 Cascading Style Sheets. Introducing Cascading Style Sheets Style sheets are files or forms that describe the layout and appearance of.
HTML A brief introduction HTML1. HTML, what is? HTML is a markup language for describing web documents (web pages). HTML stands for Hyper Text Markup.
CitiWiki Summer Workshop Day 4: Wiki Teaching Project Li Xu CS, UMass Lowell.
Style Sheets. Coding Style Sheets  Style sheets use RULES to create the style  A selector (a tag or user-defined style name)  and then declarations.
Introduction to Programming the WWW I CMSC Summer 2003 Lecture 6.
Understanding Web-Based Digital Media Production Methods, Software, and Hardware Objective
NASRULLAHIBA.  It is time to take your web designing skills to the next level with Cascading Style Sheets (CSS). They are a way to control the look and.
Web Design Terminology Unit 2 STEM. 1. Accessibility – a web page or site that address the users limitations or disabilities 2. Active server page (ASP)
HTML5 and CSS3 Illustrated Unit C: Getting Started with CSS.
COMP 143 Web Development with Adobe Dreamweaver CC.
HTML5 and CSS3 Illustrated Unit B: Getting Started with HTML.
XP Tutorial 7New Perspectives on HTML and XHTML, Comprehensive 1 Working with Cascading Style Sheets Creating a Style for Online Scrapbooks Tutorial 7.
1 Cascading Style Sheet (CSS). 2 Cascading Style Sheets (CSS)  a style defines the appearance of a document element. o E.g., font size, font color etc…
CSS Introductions. Objectives To take control of the appearance of a Web site by creating style sheets. To use a style sheet to give all the pages of.
Cascading Style Sheets Part 1 1 IT 130 – Internet and the Web.
Working with Cascading Style Sheets
Project 1 Introduction to HTML.
Objective % Select and utilize tools to design and develop websites.
Getting Started with CSS
Chapter 1 Introduction to HTML.
Objective % Select and utilize tools to design and develop websites.
Web Programming– UFCFB Lecture 9
HTML A brief introduction HTML.
Objective Understand web-based digital media production methods, software, and hardware. Course Weight : 10%
Tutorial 3 Working with Cascading Style Sheets
Understand basic HTML and CSS terminology, concepts, and basic operations. Objective 3.01.
Web Programming– UFCFB Lecture 9
5.00 Apply procedures to organize content by using Dreamweaver. (22%)
HTML5 and CSS3 Illustrated Unit B: Getting Started with HTML
Presentation transcript:

CitiWiki Summer Workshop Day 3: A Wiki Framework Li Xu CS, UMass Lowell

Day 2 Reflection Q&A Project discussion later today PmWiki Alternative: CitiWiki Workshop

3 Day 3 Agenda Styling web page using CSS Wiki teaching framework End product

CitiWiki Workshop Day 3 Goals Learn to use CSS to style web page Format, layout Learn web and Wiki teaching framework Getting started with end product Use CitiWiki to prototype your project CitiWiki Workshop

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

CitiWiki Workshop Connecting CSS to HTML Embed style in HTML header <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" " My Page p {text-align:right; font-family: Arial, Helvetica, sans-serif;} li {font-weight:bold;}

CitiWiki Workshop Connecting CSS to HTML Link style sheet file to HTML Put style commands in style.css file My Page

CitiWiki Workshop CSS Beauty CSS Zen Garden

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

CitiWiki Workshop Use Web Page Software FrontPage DreamWeaver Check out W3C Standards Specification

CitiWiki Workshop Web and Wiki Teaching Framework Course web page (static) Wiki (dynamic and active learning) Student assignments, projects, resources, students Blog, feedback, discussion, collaboration Day 3 Assignment: how you will build one

CitiWiki Workshop Course Management Course activities embodies the learning process Assignments Projects Discussion, research Give students guidance Teach students good methodology, discipline and strategy Give teacher feedback and assessment instruments Team, group and class-wide collaborative learning

CitiWiki Workshop Participants and Interactions Type IV Type V Type IType II Type III Instructor Individual Student Whole Class

CitiWiki Workshop Current Practice Ad-hoc and vary widely by class and instructor “Free hand”, students on their own, use project handout as bible Milestones: specify intermediate project milestones as checkpoints Regular meetings: limited by instructor and student time commitment, generally not scalable Tools and artifact No tools, students keep their TODO lists Instructor does not have accurate info on students progress

CitiWiki Workshop What Are Missing The participants and interaction model Type IType II Type III Instructor Individual Student Whole Class Type IV Type V Only limited Type IV student-self management Non-real time Type I instructor- student interaction minimal interactive group learning Lack of tool support Lack of formal archivable artifact

CitiWiki Workshop Wiki as Solution A Wiki-based light-weight, simple, flexible, yet powerful course management framework Enable all interactions Support and Capture activities by participant Easy to use and low overhead Allow collective group learning

CitiWiki Workshop Why Wiki Web-based content management and sharing Web server runs Wiki engine Web browser as interface for content access and authoring Simple Markup to create Wiki pages Open, low overhead, flexible online sharing and collaboration

CitiWiki Workshop The Wiki Framework Use Wiki for course management Build a shared Wiki site Both instructor and students create and access pages Instructor create Wiki page to supplement course materials, post general announcements, guide students, give general help Students create Wiki page for homework and project planning and implementation: Wiki log is part of the project Group or class common pages for collective learning Course activities captured and shared through Wiki pages

CitiWiki Workshop Multi-dimensional Interaction Through Wiki Type IV Type V Type IType II Type III Instructor Individual Student Whole Class W W W W

CitiWiki Workshop Wiki Structure Class announcements: section created by instructor, class-wide project announcements and info Common corner: both instructor and students can create and modify pages, serves as shared knowledge MyWiki: student project wiki, organized by students name, the centerpiece of teaching Wiki Wiki Help: Wiki online documentation for handy reference

CitiWiki Workshop User Access Control Fine-grained user access control Users use login name/password to use Wiki Instructor as super user, set site structure, create read-only pages, write student pages Students have sole write control of their own pages, but others can view Common pages shared by all

CitiWiki Workshop Activities Enabled MyWiki: focal point of student project Required and graded for project Wiki page reports detailed info on all phases of project: planning and execution “Harry Portter” as virtual student template TODO Class blog Immediate results Questions and Issues to resolve

CitiWiki Workshop Activities Enabled MyWiki page as self-guide and introduce discipline in learning process Capture real-time snap shot of whole class Precise assessment, targeted feedback and support Peer learning and group learning: Wiki pages are open and shared

CitiWiki Workshop Teaching Practice Use Wiki in a compiler class PmWiki Set up during one afternoon Four project sequence to build a simple compiler for an embedded robot controller Require students to use Wiki extensively in their implementation: write Wiki notes on daily basis

CitiWiki Workshop Wiki Setup Each student get assigned account and own MyWiki section Use “Harry Portter” as sample page to illustrate requirements Use Project blog to gather info on class status and identify problems

CitiWiki Workshop Collective Learning Common corners to share know-hows and project tips Survey how error handling can be done with the given compiler tools

CitiWiki Workshop A Look at the Generic Framework

CitiWiki Workshop Questions: Using Wiki at your site What is your project plan? How is your educational objective can be solved by Wiki? What is your hypothesis related to this activity? How do you plan to assess your project?

CitiWiki Workshop Review of End Product Guidelines Part I Due August 15, 2007 Written description of your project Your framework Wiki page on CitiWiki

CitiWiki Workshop Section A Description How you will use web and Wiki in your project Compare with other possibilities Statement of Expected Outcomes

CitiWiki Workshop Section B The Course Profile The Student Profile Relate to selection of project. Relate to hypothesis. Relate to teaching philosophy. Relate to factors that affect teaching and learning.

CitiWiki Workshop Section C Develop a Plan Timeline Materials needed for development Support or training needed Technical resources needed Preparation of handouts

CitiWiki Workshop Section D Measure the student performance. Link the appropriate assessment to the teaching activity. Collect student feedback. Share outcome with students. Describe plan for addressing poor student performance.

CitiWiki Workshop Appendix Surveys Handouts Collected student feedback Guidelines Rubrics Bibliography

CitiWiki Workshop October, 2007 Collegial Review/Demo Seminar

CitiWiki Workshop End Product Part II October 15, 2007 Combined Part I and II

CitiWiki Workshop Section E Narrative summary of findings Reflections Plans for future

CitiWiki Workshop Appendix All teaching materials related to this section Tools for assessment Bibliography

CitiWiki Workshop End Product Reminders Evaluation

CitiWiki Workshop More Questions to Consider? Does use of web and Wiki enhancement assist students in meeting particular learning objectives? If yes, is this an effective approach to teaching this content? Will it add to the student learning experience? Is this assignment/task at a skill-appropriate level for students? What's involved in the development of the web enhancement? (time, hardware/software, training) And many others…

CitiWiki Workshop End Product Part 1 – Aug. 15 Planning Component A. Statement of Wiki-Enhanced Teaching Activity B. Course/Student Profile C. Plan for Implementation Timeline Teaching Activity & Prep Required Resources D. Plan for Assessment/Feedback Appendix

CitiWiki Workshop End Product – Oct 15, 2007 Complete Project in Final Form Sections A,B,C,D E. Findings & Reflections F. Appendix

Discussion CitiWiki Workshop

Day 3 Assignment Project outline and description on your Wiki blog Create a separate page for your project Prefix with your first name and last name CitiWiki Workshop