CS 2020

CS2020: Web Science, Sytems and Design

Outline

modules from this list may be removed or changed and new modules added as well as the scheduled.

NOTE: When refering to reading it is in the class textbooks (see syllabus).

Week	Due	Module	Materials
1	Jan 15	1 Introduction to Class, SGI DeskTop, UNIX environment (file permissions, path, etc.)	Class Lecture, Welcome from Instructor Introduction Server Account Requirements Unix Tips Setting up your Web Server Account --to serve web pages SSH: (you will do with your* account on puzzle.sci.csueastbay.edu given to you at the start of class in an email sent to you by Richard Uhler)* connecting transfering files changing file permissions
1	Jan 15	2 Introduction to Internet, Networking	Class Lecture, Chapter 1 intro to Internet intro to Networking Questions: www, network 1, network 2
1-2	Jan 15-22	3 Design	Class Lecture, Chapter 5 design lecture Design Concepts design prototyping lecture Design Issues example design lifecycle from Macronimous.com Evaluating a Site Evaluation Checklist from Book Web Interface Design Patterns Accessibility paper on disabled users Videos from Washington.edu/AccessIT: module 1, Color lecture Broswer Safe Colors color blender (for mono/di-chromatic sites) color based on image color schemes color schemes 2 User Interface Guidelines lecture navigation navigation - where you are and search lecture typography lecture More Principles process & patterns lecture patterns 2 lecture MVC Pattern lecture Page Design with Tables Liquid Designs: intro article Liquid Tables opinion1 opinion2 opinion3 ---new browser Zoom...is Liquid dead? example 1 (+/- text zooming?) example 2 (use CSS) example 3 (use CSS) Large Content Site Issues Sample Design Templates (see links) Seperating content from presentation Designing for Legacy Browser Testing Tools: Web Site Testing Tools Performance testing BrowserShots.org From Links- design: Web Style Guide More Usable Sites 6 principles - html writers guild Educational Guidelines Exercise: design evaluation
2	Jan 22	4 Project managment -process issues	Class Lecture, Chapter 10, 13 project managment lecture design steps process & patterns process plan search engine lecture Search Engine Optimization SEO tips Hosting Solutions Authoring Tools SiteMaps Content Management Solutions Applicaton Service Frameworks Testing Tools: Web Site Testing Tools Performance testing BrowserShots.org Keyword suggestion tool (Google)
2	Jan 22	5 X/HTML basics	Class Lecture, Chapter 2 intro URL and Hostnames REVIEW: About WWW browsing, HelperApplications FreeSpeech, powerpoint HTML intro Fonts Video Demonstration of Creating a Basic XHMTML page using only a text editor and a browser. (long download--all good things for those who wait)
2	Jan 22	6 HTML Layout and Media	Class Lecture, chapter4, 8 images and audio lecture more HTML links and tables frames lecture Layout ImageMaps
3	Jan 29	7 Cascading Style Sheets	Class Lecture, CSS part 1 , CSS part 2 lectures CSS Exercise: Search the web for some CSS educational or online tools using CSS. Post a description of it with the URL to Blackboard->DiscussionBoard->CSS Postings-Exercise
3	Jan 29	8 HCI - Human Computer Interface	Class Lecture, intro history requirements HVS + and color spaces models inquiry prototyping speech + heuristic evaluation performance user testing example testing fom Maskery Interesting Sites: usability website Simulate Color blindness web standards for all
3	Jan 29	9 Art for the Web	Class Lecture, Chapter sections 4.2, 4.5, media lecture Icons lecture Image Slicing multimedia what is it? Logos gimp.com -freeware Gimp basics 1, basics 2 (warning: long download ) Adobe tutorials (do dreamweaver and flash basic tutorials) Flash tutorials Flash Tutorial - creating an animated banner Graphics Online Tools: 3D Text Buttons Buttons 2 Buttons 3 Buttons 4 Buttons 5 Animated Images Text Text 2 Banners
4-All	Feb 5-*	10 Tools	Class Lecture, Dreamweaver Online book all Chapters., Flash Online book all chapters Web Authoring: Dreamweaver site setup basic page editing tables templates: creating, using, modifying CSS in DW: what is CSS , layout with div JavaScript and DreamWeaver: pop-up window roll-over images to user created javascript Interactive media, web components: Flash overview Fireworks Logo Banner Flash Animated Banner, Flash button created with DreamWeaver directly Image Editing: Photoshop, Paint, etc. Exercise: DUE Feb 17 Search the web for some Dreamweaver educational or online tools/pluggins. I would like to have some students post on dreamweaver and database (MySQL) materials. Post a description of it with the URL to Blackboard->DiscussionBoard->Dreamweaver Postings-Exercise
5	Feb 12	11 HTML Forms and CGI-BIN	Class Lecture, Chapter 9 forms lecture Forms more CGI more debugging CGI code more free scripts more free scripts Form Processing Services: form buddy simple example using formbuddy demonstration on how to use formbuddy form mailing MyContactForm Response-Matic Exercise: Search the web for some CGI software services (sites that provide use of CGI programs for you --ideally for free). Post a description of it with the URL to Blackboard->DiscussionBoard->CGI Postings-Exercise
6	Feb 19	12 Word Press and Blogging	Class Lecture, Chapter 5 ,9 and 10 of Using WordPress (online book), chapter 5 = setting up account on wordpress.com and setting up a blog chapter 9 = creating content on word press chapter 10 = creating a site (not just a blog) on wordpress.com Exercise: Search the web for some WordPress educational or online tools/pluggins. I would like someone to post on the dreaweaver pluggin for WordPress. Post a description of it with the URL to Blackboard->DiscussionBoard->WordPress Postings-Exercise
7	Feb 26	13 Ecommerce	Class Lecture, Chapter 12 Ecommerce lecture
7	Feb 26	14 Security	Class Lecture, Chapter 12 Network Security Encryption lecture SSL Symmetric Encription , Assymetric Encryption
7	Feb 26	15 JavaScript	Class Lecture, Chapter 14 javascript lecture Intro Standard Output Objects, Functions Event Handeling Conditionals and Loops Form Validation Examples 1 2 3 4 Exercise: Search the web for some JavaScript educational or online tools/frameworks. Post a description of it with the URL to Blackboard->DiscussionBoard->Javascript Postings-Exercise
8	March 4	16 Media and Web Interactivity	Class Lecture, Chapter 11 media and program interactivity intro lecture Sound/Video Animation Options JavaScript (see above module) CGI (see above module)
8	March 4	17 Programming, Dynamic Interactivity	Class Lecture SSI
8	March 4	18 Services, Analytics and Monetization, Performance Tools	Class Lecture and wikis, Chapter 13 YQL Lecture, intro (console) some YQL examples YQL Open Tables Lists (already existing YQL access to web services) Google Maps Lecture Google Maps Source and Explained Example Stylized Maps Google Analytics Lecture Why Google analytics Google's demos Get Google Analytics Demo- how to add web profile to Google Analytics Mozilla Firebug get Firebug from Mozilla My Firebug demo Firebug movie demo Yahoo! YSlow Demo get YSlow from Yahoo! Google and Yahoo! advertising Google Checkout Others Topics to search on: Twitter, Yelp, Amazon, Yahoo! Pipes, and more, Yahoo! YUI
9	March 11	19 Data	Class Lecture, Database, gTerms SQL Oracle Navicat: connect, create table, add data Dreamweaver (without writing code): Adobe tutorial PHP and MySQL: part 1 Step 1: setup a database Step 2: setup a binding / record set(query associated with a table in a database from #1) Step 3: link binding/record set to output into a div tag area of a php web page Example - that does call to Customer table created with Navicat and dumps all the customers in an HTML table. Advanced: Connectivity & Programming Issues see advanced section Videos on youtube: Login Example,
9	March 11	20 Communications	Class Lecture, General - groupware Communicating Mobile Forums Blogs (see wordpress above) Messaging Contact Forms Speech Auctions / Agents
9-all	March 11-*	21 Social Network Programming	Class Lecture Facebook Pages what are they and how to create This Quarter following in this module is NOT REQUIRED ---optional, only if you are interested See course wiki's on blackboard for possibly more information OpenSocial (see blackboard course material for chapters on OpenSocial - staggered release) OpenSocial Technical documentation OpenSocial Getting Started OpenSocial.org Facebook apps and widgets: what and why Facebook App Creation (Java-based): part 1, part 2 Facebook Authentication with Java Facebook anatomy of an app Facebook app lifecycle how to guide KickApps KickApps Widget development for Facebook Page Example 1- instructor's Ilab Facebook Page with tab to my KickApps widget http://www.facebook.com/pages/ILab/129543477109970 (under development) Example 2: Lynne Grewe Teacher Page KickApps Developer Information API info What is a widget Events and Actions Publish It Adding App to Facebook Page more info to follow up on Video Players in KickApps IMPORTANT: how to add kickapps app to facebook page Movie showing some features of Kickapps widget creation MUST view screencasts Widges and Video Players Itemized Info Release Updates (new things with KickApp)
10*	March 18	Project Work	* - work to be distributed throughout quarter as necessary, designated here as 10th week.
		REST OF MATERIAL MAY NOT BE COVERED IN CLASS
A1		Introduction to Perl	Class Lecture About Perl Interpreter First Example Interpreter Options Variables and Arrays Operators Flow of Control
A2		Perl I/O, CGI, System Calls and more	Class Lecture Standard I/O File I/O Perl and CGI Berkley's cgi perl library Subroutines System Calls Parsing Pattern Matching Predefined Names Advanced: Perl and DB Example Code- db Example Code - email Working Example: code example
A3		Video Lectures	Online Videos
A4		.NET	Intro More on NET Framework CLR
A5		Misc.	HTAccess

1

1

1-2

2

2

2

3

3

3

4-All

5

6

7

7

7

8

8

8

9

9

10*

A1

A2

A3

A4

A5