User:Vtaylor/CIS89D/revision 2023

Web Technology for Developers https://developer.mozilla.org/en-US/docs/Web

mp. "Discuss cutting edge technology and its application to existing website"

qq . API - how do apis fit in

. web-based applications Web App https://developers.google.com/apps-script/guides/web

. xhtml

. Canvas Programming Interface in Rich Internet Applications ? https://developer.mozilla.org/en-US/docs/Web/API/Canvas_API/Tutorial

. caching and storage

. Node.js server script and a web page that connects to it. a popular runtime that lets you run server-side JavaScript

. Fastify framework https://www.fastify.io/ . basic templating with Handlebars.

. RESTful API

. React is a popular UI library for building web apps.

. Vite is a powerful tool for building javascript apps that bundles all of your code and shows immediate changes while you're editing.

. persistent SQLite database. . connect to the database using the server API

De Anza logo Credit - Degree Applicable Effective Quarter: qq

I. Catalog Information

CIS 89D Web-Based Application Development 4 1/2 Unit(s)

Advisory: EWRT 211 and READ 211, or ESL 272 and 273; CIS 89A and/or CIS 89C.

Lec Hrs: 48.00 Lab Hrs: 18.00 Out of Class Hrs: 96.00 Total Student Learning Hrs: 162.00

Description: Design and develop web-based applications (Web Apps) that deliver the features and functions normally associated with desktop applications using development tools and frameworks.

Student Learning Outcome Statements (SLO)
 * Create web-based applications using features in tools like HTML5.
 * Read, analyze and explain intermediate level Web Applications (Web Apps).

II. Course Objectives
 * 1) Discuss cutting edge technologies and application to existing websites.
 * 2) 	Explore history, tags and Application Programming Interfaces (API).
 * 3) 	Explore creating and structuring HTML5 documents.
 * 4) 	Construct basic forms using HyperText Markup Language.
 * 5) 	Embed Audio and Video in applications.


 * 1) qq Learn and apply usage of Canvas Programming Interface in Rich Internet Applications.
 * 2) Improve caching and storage for Web Applications.
 * 3) Demonstrate usage of Cascaded Style Sheets (CSS) to enhance and style Web Applications.
 * 4) Demonstrate usage of HTML5 controls in applications.

III. Essential Student Materials None

IV. Essential College Facilities None

V. Expanded Description: Content and Form
A.	Explore history, tags and Application Programming Interfaces (API).

1.	History of HTML / XHTML / HTML5 2.	HTML5 Features. 3.	Structural, Content and Application-focused Tags B.	Explore creating and structuring HTML5 documents. 1.	Content models.

qq 2.	Understanding the outline algorithm. 3.	The role of div tags. 4.	Using ID and class attributes. 5.	DOCTYPE declarations. 6.	Character encoding. 7.	Compatibility Testing using browsers and Mobile Devices. 8.	Structure of basic page, top level elements and interior content. 9.	Building headers. 10.	Checking document outlines and ensuring cross browser structure. C.	Construct basic forms using HyperText Markup Language. 1.	Input types. 2.	Setting form autofocus. 3.	Using placeholder data. 4.	Marking required fields. 5.	Working with number inputs. 6.	Using date pickers. D.	Embed Audio and Video in applications. 1.	Adding audio. 2.	Encoding audio. 3.	Adding video. 4.	Encoding video.

qq E.	Learn and apply usage of Canvas Programming Interface in Web Applications. 1.	Canvas API overview. 2.	Adding canvas content. 3.	Drawing in the canvas environment.

qq 4.	Drag-and-drop API overview.

qq F.	Improve caching and storage for Web Applications. 1.	Offline applications overview. 2.	Geolocation API overview. 3.	Web storage API overview

G.	Demonstrate usage of Cascaded Style Sheets (CSS) to enhance and style Web Applications. 1.	CSS3 (Cascading Style Sheets) overview. 2.	Enhancing typography with CSS3. 3.	Using @font-face. 4.	Styling HTML5 with CSS3. 5.	Using CSS3 transitions. H.	Demonstrate usage of HTML5 controls in applications. 1.	Email Address Input 2.	URL Input 3.	Telephone Number Input 4.	Search Field Input 5.	Datalist Form Control 6.	Slider Form Control 7.	Spinner Form Control 8.	Calendar Form Control 9.	Color Form Control

VI. Assignments
A.	Required reading from the text. B.	Programs: 8-12 programming homework assignments pertaining to the topics listed in X as Lab Topics, including several of more than 50 lines and several which use 3 or more functions.

VII. Methods of Instruction
 * Lecture including discussion of assigned reading,
 * Demonstration of developing solutions to programming problems,
 * In-class review as test preparation
 * Discussion of solutions to assigned homework, lab assignment projects, and test problems,
 * Collaborative projects,
 * On-line tutorial

VIII. Methods of Evaluating Objectives A.	One or two midterm examinations requiring students to write code applying topics covered in the lectures and reading. B.	Final examination requiring students to write code applying topics covered in the lectures, reading, and programming assignments. C.	Evaluation of programming assignments based on correctness, documentation, code quality, and test plan executions.

IX. Texts and Supporting References
A.	Examples of Primary Texts and References

qq 1.	HTML5, Second Edition: Designing Rich Internet Applications (Visualizing the Web) by Matthew David (Sep 29, 2012) - 0240820762 -- used $6 2023.1.4

2.	Learning Web Design: A Beginner's Guide to HTML, CSS, JavaScript, and Web Graphics by Jennifer Niederst Robbins. 5th Edition (2012), 1449319270

by Semmy Purewal     Publisher ‏ : ‎ O'Reilly Media; 1st edition (April 1, 2014)  ISBN-10 ‏ : ‎ 9781449370190
 * Learning Web App Development: Build Quickly with Proven JavaScript Techniques 1st Edition

B.	Examples of Supporting Texts and References 1.	None

X. Lab Topics A.	Use tags and Application Programming Interfaces to build Web Applications. B.	HTML5 documents. C.	Basic forms using HTML5 D.	Audio and Video in applications.

qq E.	Canvas Programming Interface in Web Applications. F.	Caching and storage for Web Applications. G.	Cascaded Style Sheets (CSS) to enhance and style Web Applications.

Learning Web App Development: Build Quickly with Proven JavaScript Techniques 1st Edition https://www.amazon.com/Learning-Web-App-Development-JavaScript/dp/1449370195 Buy new: $26.52 List Price: $49.99 Details

Grasp the fundamentals of web application development by building a simple database-backed app from scratch, using HTML, JavaScript, and other open source tools. Through hands-on tutorials, this practical guide shows inexperienced web app developers how to create a user interface, write a server, build client-server communication, and use a cloud-based service to deploy the application.

Each chapter includes practice problems, full examples, and mental models of the development workflow. Ideal for a college-level course, this book helps you get started with web app development by providing you with a solid grounding in the process.

Set up a basic workflow with a text editor, version control system, and web browser Structure a user interface with HTML, and include styles with CSS Use JQuery and JavaScript to add interactivity to your application Link the client to the server with AJAX, JavaScript objects, and JSON Learn the basics of server-side programming with Node.js   Store data outside your application with Redis and MongoDB Share your application by uploading it to the cloud with CloudFoundry Get basic tips for writing maintainable code on both client and server

contents - paperback - ? copy

Learning Web Design: A Beginner's Guide to HTML, CSS, JavaScript, and Web Graphics 5th Edition by Jennifer Robbins (Author) https://www.amazon.com/Learning-Web-Design-Beginners-JavaScript-dp-1491960205/dp/1491960205/ref=dp_ob_title_bk 5th edition (June 19, 2018) ISBN-10 ‏ : ‎ 1491960205 29 Used from $26.61 28 New from $37.13 Rent $23.85 List Price: $59.99

Boduch, Adam, and Roy Derks. React and React Native: A Complete Hands-on Guide to Modern Web and Mobile Development with React.js, 3rd ed.. 2020.

Subramanian, Vasan. Pro Mern Stack: Full Stack Web App Development with Mongo, Express, React, and Node. 2019.