Fall 2013
Lectures
Lecture No |
Topics/Activities |
Date |
|
1 |
Lecture Note - Overview of the course, Discussion of Systms, Web systems, and other related topics Lecture Note 1; Echo 360 Recorded Lecture 1 (use Google Chrome to view) | 8/27 |
|
2 |
Echo 360
Recorded Lecture 2. OneNote Lecture note 2 Chapter 2 Examples: Fig. 2.1 - First HTML example; Fig. 2.2 - Heading elements; |
8/29 |
| 3 |
Lecture Note 3 Echo 360 Recored Lecture 3 - posted Also See Chapter 1: Programming Langauges for Web Applications in the e-Book "Building Web Applications with HTML," by Prof. Paul Lin Chapter 2 Examples: Fig. 2.3 - Linking to other web pages; Fig. 2.4 - Linking to an e-mail address; Fig. 2.6 - Including images in HTML files; Fig. 2.7 - Images as link anchors; |
9/3 |
| 4 |
Lecture 4
Note; Echo 360 Recorded Lecture posted * Review of HTML Tags, Elements, and Attributes * A quick overview of HTML 5 and the 4.1.1 The html Elements * Also see Chapter 3. HyperText Markup Language Basics in the e-Book Building Web Applications with HTML, by Prof. Paul Lin Chapter 2 Examples: Fig. 2.9 - Inserting special characters; Fig. 2.10 - Unordered list containing hyperlinks; Fig. 2.11 - Nested lists and ordered lists; Fig. 2.12 - Creating basic tables; Fig. 2.13 - Complex HTML tables; Fig. 2.14 - Form with a text field and hidden fields; Fig. 2.15 - Form using a variety of components; Fig. 2.16 - Internal Linking; Fig. 2.17 - Meta elements provide keywords and a description of a page. |
9/5 |
| 5 |
Lecture 5 Note (Topics of discussion:
PDF, html page)
Topics of discussion: Web site & Web portal, Mobile Support, Contact &
Custmer Support, Business Models. Echo 360 Recorded Lecture 5 available. Lecture note on Web System Infrastructure and Protocols (PPT file saved in 2 page PDF format). |
9/10 |
| 6 |
* Continue
Lecture on
Web System Infrastructure and
Protocols (PPT file saved in 2 page PDF format) Lecture Note 6 Chapter 2: Special Characters and Horizontal Rules (page 49) Chapter 3: HTML 5 Part 2 Fig. 3.01 - New HTML5 form input types and attributes; |
9/12 |
| 7 |
Echo 360 Recorded Lectures, Lecturs,
http://dl.ipfw.edu:8081/ess/portal/section/d455e104-4128-4853-93de-60425e5e289f Lecture 7: Topics of Discussion |
9/17 |
| 8 |
Lecture 8:
Topics of Discussion: New Input element type, Auto-completion,
Datalist, Page-structure elements Chapter 3: HTML 5 Part 2 Fig. 3.01 - New HTML5 form input types and attributes; Fig. 3.17 - New HTML5 form autocomplete attributes and datalist element; Fig. 3.18 - New HTML5 section elements; |
9/19 |
| 9 |
W3C CSS Resource Center, HTML & CSS,
http://www.w3.org/standards/webdesign/htmlcss Tutorial for HTML and CSS, http://www.w3.org/2002/03/tutorials.html#webdesign_htmlcss Style Sheets, http://www.w3.org/TR/html4/present/styles.html CSS Validation Service, http://jigsaw.w3.org/css-validator/ Lecture 9: Chapter 4 Cascading Style Sheet, Echo 360 Recording from previous recorded class lecture (2012): ** Discussion of a Web site design Hw 4, due 10/3 ** Chapter 4 Introduction to CSS - Part I Chapter 4 Intro to Cascading Style Sheets (CSS) Part I - HTML Examples Fig. 4.1 Using inline styles (inline.html); |
9/22 |
| 10 |
** Discussed Chapter Examples 4.3 to 4-17 ** Reported HTTP errors while you try to watch recored lectures using Internet Explorer 9; try other browsers such as Google Chrome, etc ** Read an article from Website Magazine: The Biggest Mistakes in Website Design, **Echo 360 Recorded Lecture 10 (from 2012) Fig. 4.3. Embedded style sheets (embedded.html) Fig. 4.6.Inheritance in style sheets (advanced.html); Fig, 4.7. External style sheet (styles.css) Fig. 4.8. Linking an external style sheet (external.html); Fig. 4.9. Absolute positioning of elements (positioning.html) Fig. 4.10. Relative positioning of elements (positioning2.html) Fig. 4.11. Adding background images and indentation (background.html) Fig. 4.12. Element dimensions and text alignment (width.html); Fig. 4.14. Borders of block-level elements (borders.html) Fig. 4.15. Floating elements (floating.html); Fig. 4-16. CSS media types (mediatypes.html) Fig. 4-17. CSS drop-down menu (dropdown.html); Fig. 4.18. pt measurement for text size - Optional user style sheet (user_absolute.html) Fig. 4.19. A user style sheet (userstyles.css); Fig. 4.22. em measurement for text size (user_relative.html) |
9/24 |
| Exam 1 | 10/1 | |
| 11 |
**Echo
360 Recorded Lecture 11 (no audio => please watch the similar
Echo 360 ecording from 2012 Lecture 11 Topics of Discussion Chapter 6 JavaScript: Introduction to Scripting Fig. 6.1 Displaying a line of text, (welcome.html) Fig. 6.2 Printing on the line with separate statements (welcome2.html) Fig. 6.3 Alert dialog displaying multiple lines (welcome3.html) Fig. 6.5 Prompt box used on a elcome screen (wlcome4.html) Fig. 6.7 Adding script (addition.html) Fig. 6.14 Using equality and relational operators (welcome5.html) e-Book "Developing Advanced Web Applications Using JavaScript," by Prof. Paul Lin Ch.1 JavaScript Basics Ch.2 JavaScript Objects and Methods |
10/3 |
| 12 |
**Echo
360 Recorded Lecture 12 (Extreme poor quality => please watch the the
similar
Echo 360 recording from 2012 ) Lecture 12 Topics of Discussion Chapter 7 Examples Fig. 7.7 Counter-controlled repetition to calculate a class average. (average.html) Fig. 7.9 Sentinel-controlled repetition to calculate a class average (average2.html) Fig. 7.11 Examination-results calculation (analysis.html) Fig. 7.14 Preincrementing and postincrementing (increment.html) |
10/8 |
| 13 |
** Echo 360 Recorded Lecture 13 (due to technical issue, no
recording lecture was captured for this meeting; please see the similar
recording from Fall 2012) Lecture 13 Topics of Discussion: Examples of JavaScript using FOR, WHILE, DO .. WHILE; SWITCH, CASE, BREAK; CONTINUE Chapter 8. JavaScript: Control Statements II, and all example, Fig. 8.1 Counter-controlled repetition (WhileCounter.html) Fig. 8.2 Counter-controlled repetition with the for statement (ForCounter.html) Fig. 8.5 Summation with the for repetition structure (Sum.html) Fig. 8.6 Compound interest calculation with a for loop (Interest.html) Fig. 8.7 Using the switch multiple-selection statement (SwitchTest.html) Fig. 8.9 Using the do..while repetition statement (DoWhileTest.html) Fig. 8.11 Using the break statement in a for statement (BreakTest.html) Fig. 8.12 Using the continue statement in a for statement (ContinueTest.html) Chapter 17 Web Servers, ** covering pp. 606-614, introduction to Web servers |
10/10 |
| 14 |
**
Echo
360 Recorded Lecture 14 (It was recorded OK, but was mislabeld as Oct.
10's lecture) Chapter 17 Web Servers, ** covering pp. 606-614, introduction to Web servers Chapter 9. JavaScript: Functions Chapter 9 Examples Fig. 9.2 Programmer-defined function square (SquareInt.html) Fig. 9.3 Programmer-defined maximum function (maximum.html) Fig. 9.4 Random Integers, shifting and scaling (RandomInt.html) Fig. 9.5 Random dice image generation using Math.random (RollDice.html) |
10/17 |
| 15 |
Topics of Discussion,
Oct. 22; *
Echo
360 Recording * XAMPP Apache Port 80 Issues, Hw 6 related * IT Tech News: ** Obama Admits Health Website Flaws, by Louis Radnofsky, Amy Schatz and Christopher Weaver, WSJ, 2013/10/22 ** Health Insurance Market Place, https://www.healthcare.gov/health-insurance-marketplace/ ** SAP Profit Jumps but License Business Struggles, by William Boston, WSJ, 2013/10/22 ** SAP HANA cloud Chapter 9. JavaScript: Functions Reviewed: Fig. 9.5 Random dice image generation using Math.random (RollDice.html) Discussed: Fig. 9.6 example, Scope rules, Recursive functions, Example Fig. 9.12 Fig. 9.6 Rolling 12 dice and displaying frequencies (RollDice.html) Fig. 9.7 Craps game simulation (Craps.html) Fig. 9.8 Web page that displays a video of the basic rules for the dice game Craps (CrapsRules.html) Fig. 9.9 Scoping example (Scoping.html) Fig. 9.12 Factorial calculation with a recursive function (FactorialTest.html) |
10/22 |
| 16 |
Topics of Discussion,
Oct. 24; *
Echo
360 Recording **Standard ECMA -262, ECMAScript Language Specification,5.1 Edition, June 2011, http://www.ecma-international.org/ecma-262/5.1/ **Other Examples and Web References, http://msdn.microsoft.com/en-us/library/ie/89t1khd2(v=vs.94).aspx ** e-Book: Developing Advanced Web Applications using JavaScript, by Paul Lin, http://www.etcs.ipfw.edu/~lin/Presentation/JavaScript/JavaScriptBookIndex.html *****Chapter 2 JavaScript Objects and Methods, http://www.etcs.ipfw.edu/~lin/Presentation/JavaScript/02_JSObjects.html *****Chapter 9. Using JavaScript Arrays, http://www.etcs.ipfw.edu/~lin/Presentation/JavaScript/09_JsArrays.html Chapter 10. Example Program of JavaScript Arrays Fig. 10.3 Web Page for showing the results of initializing arrays (InitArray.html) (uses: InitArray.js, and table stylesheet: tablestyle.css) Fig. 10.4 JavaScript source code - Create two arrays, Initialize their elements and Display (InitArray.js) Fig. 10.5. Web page for showing the results of initializing arrays (InitArray2.html) (also uses InitArray2.js) Fig. 10.6 Initializing arrays with initializer lists (InitArray2.js) |
10/24 |
| 17 |
Topics of Discussion,
Oct. 29; Oct.
29
Note Added Topics ;Echo
360
Recorded Lecture Chapter 10. Example Program of JavaScript Arrays (continue) Fig. 10.13 HTML Document that demonstrates passing arrays and individual array elements to functions (PassArray.html) Fig. 10.14 PassArray.js used by PassArray.html Fig. 10.15 HTML documnet that displays the results of sorting an array (Sort.html); Fig. 10.16 Sort.js used by Sort.html Bubble Sort Example, slied 9-12 (C Program Langauge, Lecture note by Paul Lin, 2011), http://www.etcs.ipfw.edu/~lin/ECET264/2011-F/Lectures/264_Lecture-11_Arrays.pdf Fig. 10.17 HTML document for searching an array with indexOf (serach.html); Fig. 10.18 search.js used by search.html Fig. 10.20 HTML documents showing multidimensional array initialization (InitArray3.html); Fig. 10.21 InitArray3.js used by InitArray3.html Introdduction to Chapter 11. JavaScript Objects: Math Object and Properties |
10/29 |
| 18 |
Topics of Discussion
Oct. 31;
Echo 360 Recorded Lecture Chapter 11. JavaScript Objects: Math, String, Date, Document Objects Fig. 11.4 HTML5 document to demonstrate methods chartAt, chartCodeAt, fromCharCode, toLowercase and toUpperCase (CharacterProcessing.html); **Fig. 11.5 CharacterProcessing.js Fig. 11.6 HTML document to demonstrate methods indexOf and lastIndexOf (SearchingStrings.html); **Fig. 11.7 SearchStrings.js style.css Fig. 11.8 HTML document demonstrating String methods split() and substring() (SplitSubString.html); **Fig. 11.9 SplitAndSubString.js style.css Fig. 11.11 HTML document to demonstrate Date-Object methods (DateTime.html); **Fig. 11.12 DateTime.js style.css |
10/31 |
| 19 |
Topics of Discussion, 11/5; Echo 360 Recorded Lecture ** localStorage object and sessionStorage Example: Fig. 11.17-11.19: Fig. 11.17 Favorite Twiter Searches web application (FavoriteTwitterSearchs.html); **Fig. 11.18 style.css, Fig. 11.19 FavoriteTwitterSearchs.js **JASON (JavaScript Object Notation), References: (1) A Brief Overvew of JSON, http://msdn.microsoft.com/en-us/library/hh923971.aspx (2) http://php.net/manual/en/book.json.php (3) https://developer.mozilla.org/en-US/docs/JSON (4) JSON in Java, http://json.org/java/ ** Document Object Model, DOM5 HTML, http://www.w3.org/TR/2008/WD-html5-20080610/dom.html ** Commands for Display Developer Tools: Microsoft Internet Explor (F12 key), Google Chrome (Windows/Linux: Ctrl + Shift + i), Mozilla Firefox ((Windows/Linux: Ctrl + Shift + i), Safari (Windows/Linux: Ctrl + Shift + i), Programminf Examples: Chapter 12. Document Object Model (DOM): Objects and Collections ** Fig. 12.2 Demonstration of a document's DOM tree (domtree.html); Fig. 12.3 CSS for basic DOM functionality example (style.css) |
11/5 |
| 20 | Exam 2 | 11/7 |
| 21 |
Topics of Discussion
11/12;
Echo 360 Recorded Lecture Programminf Examples: Chapter 12. Document Object Model (DOM): Objects and Collections ** Fig. 12.4 HTML5 document that's used to demonstrate DOM functionality for dynamically adding, removing and selecting elements (dom.html); Fig. 12.5 dom.js style.css ** Fig. 12.13 Using the links collection (collections.html); Fig. 12.12 style.css CSS for collections.html; Fig. 12.14 Script for demonstrate using the links collection (collections.js) ** Fig. 12.15 Dynamic styles (dynamicstyles.html), Fig. 12.16 dynamicstyle.js script to demonstrate dynamic styles; ** Fig 12.18 Dynamic styles used for animation (coverviewer.html); Fig. 12.17 CSS for coverviewer.html (style.css); Fig. 12.19 coverviewer.js Read Unified Modeling Language: |
11/12 |
| 22 |
Topics of Discussion 11/14,
Echo 360 Recording Programming with Perl/CGI (Prof. Lin's e-Book) Chapter 1. Web Servers and CGI/Perl Programming (Windows, Linux) Chapter 2. Perl Programming Environment (Linux Apache Server) |
11/14 |
| 23 |
Topics of Discussion 11/19,
Echo 360 Recording W3C CGI: Common Gateway Interface, www.w3.org/CGI/ Apache Tutorial: Dynamic Contet with CGI, http://httpd.apache.org/docs/2.2/howto/cgi.html Programming with Perl/CGI (Prof. Lin's e-Book) **Chapter 3. CGI Environmental Variables **Chapter 7. Processing and Analyzing Data Chapter 13 JavaScript Event Handling (just briefly touched) Fig. 13.1 Demonstrating the Windows' load event (onload.html) **Fig. 13.2 Script that register window's load event handler and handles the event (load.js, and stylesheet) Fig. 13.3 Simple drawing program (draw.html) ** Fig. 13.4 JavaScript code for the simple drawing program, (draw.js and stylesheet) Fig. 13.6 HTML document to demonstrate mouseover and mouseout. (mouseoverout.html) ** Fig. 13.7 Processing the mouseover and mouseout events. (mouseoverout.js and stylesheet) Fig. 13.8 Demonstrating the focus and blur events. (focusblur.html) ** Fig. 13.9 JavaScript code for Fig.13.8 (focusblur.js and stylesheet) ** Fig. 13.10 Demonstrating the focus and blur events (focusblur.js) Fig. 13.11 Canceling event bubbling (bubbling.html) ** Fig. 13.12 Cancelling event bubbling (bubbling.js) ** Other example submitreset.html and submitreset.js |
11/19 |
| 24 |
Topics of Discussion, 11/21, Echo 360 Recording * XML Basics: **Elements **Vocabularies *** Examples (data exchange, data analysis): *****Xtensible Business Reporting Langauge (XBRL) *****Electronic Business Specification (ebXML) *****Commerce XML (cXML) *****HL7 (Health Level 7 Standard: XML Implementation Technology Specification) *****IHE (Integrating the Healthcare Enterprise), IHE Domains *****CDISC (Clinical Data Interchange Standards Consortium) ***** List of XML Markup Languages *****SAS (A company provides business analytic software & services) **Creating, Viewing and Modeifying ****XML Editors **Processing XML Documents **Validating XML Documents **Formatting and Manipulating XML Documents *References ** W3C: URIs, URLs, and URNs: Clarifications and Recommendations 1.0, 2001 ** XML Validator http://www.xmlvalidation.com ** W3C XML Schema, www.w3c.org/XML/Schema ** W3C XML Schema 2001 (Sept. 2005), http://www.w3.org/2001/XMLSchema ** W3C XML Schema Built-in Types (Oct.28, 2004 Recommendation), www.w3.org/TR/xmlschema-2 Chapter 15. Extensible Markup Language Fig. 15.1 XML that describe a baseball player's information (player.xml) Fig. 15.2 XML used to markup an article (article.xml) Fig. 15.4 Business letter marked up with XML (letter.xml, letter.dtd) |
11/21 |
| 25 |
Topics of Discussion, 11/26,
Echo 360 Recording Prof Lin's e-Book: XML and Enterprise Application Integration * Ch 1. Enterpirse Application Integration - An Overview, http://www.etcs.ipfw.edu/~lin/CECourses/XML_EAI/1_XML-EnetrpApps_files/1_XML-EnetrpApps.html * Ch 3. XML Fundamental , http://www.etcs.ipfw.edu/~lin/CECourses/XML_EAI/3_XML_Fndamental.html * Ch 4. XML Document Type Definition (DTD), http://www.etcs.ipfw.edu/~lin/CECourses/XML_EAI/4_XML_DTD_files/4_XML_DTD.html Chapter 15. Extensible Markup Language Fig. 15.4 Business letter marked up with XML (letter.xml, letter.dtd) Fig. 15.5 XML namespace demonstration (namespace.xml) Fig. 15.6 Default namespace demonstration (defaultnamespace.html) Fig. 15.7 Document Type Definition (DTD) for a business letter (letter.dtd) Fig. 15.8 Error message when validating letter.xml with a missing contact name (letter2.xml , letter.dtd) Fig. 15.9 Schema-valid XML document describing a list of books (book.xml) **Fig. 15.10 XML Schema document for book.xml (book.xsd) |
11/26 |
| 26 |
Chapter 15. Extensible Markup
Language,
Echo 360 Recording
12/3/2013 *XML Schema Part 2: Datatypes Second Edition, W3C Recommendation 2004/10/28, http://www.w3.org/TR/xmlschema-2/ *** Data oriented vs. Document Oriented XML *** XML Schema Requirements *** Type System: Primitive datatypes vs. Derived datatypes; simpleType, complexType **** string, boolean, decimal, float, double, long, double, long, int, short, date, time **** 3. Built-in datatypes (datatype hierarchy) Fig. 15.9 Schema-valid XML document describing a list of books (book.xml) **Fig. 15.10 XML Schema document for book.xml (book.xsd) Fig. 15.13 XML document using the laptop element in computer.xsd (laptop.xml) **Fig. 15.12 XML Schema document defining simple and complex types (computer.xsd) *** XSD Schema Validator, http://www.xmlforasp.net/SchemaValidator.aspx ** Other Markup Languages, www.service-architecture.com/xml/articles/index.html ** Extensuble Stylesheet Language (XSL) and XSL Transformations: XSL-FO (XSL- Format Objects), XPath (XML Path Language), XSLT (XSL Transformations) *XHTML document: XML + Extensible Stylesheet Language (XSL) and XSL Transformation (XSLT processor) http://www.w3.org/1999/XSL/Transform ** XSL Transformations (XSL) Version 1.0 (Nov. 16, 1999), Version 2.0 (Jan. 23, 2007), and working draft Version 3.0 (July 10, 2012) ** Microsoft MSXML - XSLT processor, http://msdn.microsoft.com/en-us/library/ms763742(v=vs.85).aspx ** Xalan 2, Apache Software Foundation, http://xml.apache.org/xalan-j/ Fig. 15.18 XML document that describe various sports (sports.xml); also at http://test.deitel.com/iw3htp5/ch15/Fig15_18-19/sports.xml **Fig. 15.19 XSLT that creates elements and attributes in an HTML5 document (sports.xsl, style.css) Fig. 15.20 XML document containing book information (sorting.xml) **Fig. 15.21 XSL document that transforms sorting.xml into HTML5 (sorting.xsl, style.css) *An example (Example 6) from Prof. Lin, http://www.etcs.ipfw.edu/~lin/CECourses/2_HTML/Lectures/9XML_intro.html: Binding XML data and displays it with an IE web browser Fig. 15.24 Traversing and XML document using the XML DOM (XMLDOMTraversal.html) **Fig. 15.25 JavaScript for traversing an XML document using the XML DOM (XMLDOMTraversal.js, style.css, article.xml ) ** Example testing: http://test.deitel.com/iw3htp5/ch15/Fig15_24-25/XMLDOMTraversal.xml Fig. 15.32 Using XPath to locate nodes in anXML document (xpath.html) **Fig. 15.33 Using XPath to locate nodesin an XML document (xpath.js, style.css) Fig. 15.34 XML document that describes various sports (sports.xml) |
12/3 |
| 27 |
Chapter 16 AJAX-Enabled Rich Internet Applications with XML and JSON
(JavaScript Object Notation);
Echo
360 Recording ** AJAX (Asynchronous JavaScript and XML), JSON (JavaScript Object Notation) ** AJAX Standard Specification References, AJAX supported Web browsers and Mobile Web browsers Fig. 16.5 Asynchronous display content without reloading the page (SwitchContent.html) Fig. 16.8 Image catalog that uses Ajax to request XML data asynchrously (PullImageOntoPage.html) ** Other used XM files: all.xml, simply.xml, howto.xml, dotnet.xml, and javacpp.xml Using JASON Fig. 16.9-16-10 Ajax-enabled address-book application (addressbook.html, addresssbook.js, style.css) http://test.deitel.com/iw3htp5/ch16/fig16_09-10/AddressBook.html Fig. 16.11 Address-book data formatted in JSON (Calendar.html, Calender.js, style.css): http://test.deitel.com/iw3htp5/ch16/fig16_11/Calendar.html |
12/5 |
| 28 |
Topics of Discussion,
Echo 360 Recording Ch 18. Database: SQL, MySQL, LINQ, and Java DB ** Relational Databases ** Databases and SQL References *** SQL, http://en.wikipedia.org/wiki/SQL *** ANSI SQL Standards, http://docs.oracle.com/cd/B13789_01/server.101/b10759/ap_standard_sql001.htm ** MySQL, http://www.mysql.com/ ** Java DB Reference, http://www.oracle.com/technetwork/java/javadb/documentation/index.html ** Oracle Database, http://www.oracle.com/us/products/database/overview/index.html ** IBM DB2, http://www-01.ibm.com/software/data/db2/ ** Microsoft SQL Server, http://www.microsoft.com/sqlserver/en/us/default.aspx ** Microsoft LINQ (Language Integrated Query), http://msdn.microsoft.com/en-us/library/vstudio/bb397926.aspx Previous Presentations **Developing a Web Enabled-Database System: An Academic Proejct, by Paul Lin, Melissa Lin and Aik Mon, ASEE 2002 Annual Conference ** Developing Web-based Database Using Java Technology: A Tutorial, by Paul Lin and Melissa Lin, 2002 IBM International DB2 User Group Conference **Database Driven Rebate Tracking (DDRT), Spring 2012 CPET 491 Senior Design Project Presentation, by Aaron Egbert and Chris Rottinger, Course Instructor Paul Lin, Project Advisor Gary Steffen |
12/10 |
| 29 | Echo 360 Recording: 3:00AM-4:15 PM, Dec. 12, 2013*** Review of the Web Systems Course and Topics of Discussion | 12/12 |