User:Vtaylor/CIS89D/based on cs77a

reference C S 77A: ADVANCED WEB APPLICATION DEVELOPMENT https://catalog.foothill.edu/course-outlines/C-S-77A/

De Anza logo Credit - Degree Applicable Effective Quarter: Fall 2020

I. Catalog Information

CIS 89D

Web Application Development

4 1/2 Unit(s)

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

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

Design and develop applications that deliver the same features and functions normally associated with desktop applications using technologies like HTML5.

Student Learning Outcomes


 * Create data-driven web applications that work with client or server storage systems.
 * Create web pages using Hypertext Markup Language (HTML), Cascading Style Sheets (CSS), JavaScript, and the Document Object Model (DOM), and demonstrate how they interact together within a web document using techniques that are responsive to differing screen sizes.
 * Create Web applications that deliver similar features and functions previously associated with desktop applications through the use of libraries or frameworks.
 * Read, analyze and explain intermediate level Rich Internet Applications.

Description

Design and develop applications that deliver similar features and functions normally associated with desktop applications using web client and server technologies. Course Objectives

The student will be able to:
 * Understand the history of the web, and use web tags, and Application Programming Interfaces (API).
 * Design, create, and organize HTML documents.
 * Construct basic web forms using HyperText Markup Language (HTML).
 * Embed audio and video in applications.
 * Use web API in web applications.
 * Improve caching and storage for web applications.
 * Use Cascading Style Sheets (CSS) to enhance and style web applications.
 * Use HTML controls in applications.
 * Evaluate client/ middleware/ server development tools.
 * Create data-driven web applications.
 * Discuss and analyze professional ethics and societal power structures.
 * Use responsive web design for differing devices.
 * Use security techniques.

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 Mongo DB    Share your application by uploading it to the cloud with CloudFoundry Get basic tips for writing maintainable code on both the client and server

Course Content
Explore web history, tags, and Application Programming Interfaces (API) History of HyperText Markup Languages (HTML) HTML features Structural, content, and application-focused tags Explore designing, creating, and structuring HTML documents Content models Understanding the outline algorithm The role of div tags Using ID and class attributes DOCTYPE declarations Character encoding Compatibility testing using browsers and mobile devices Structure of basic page, top level elements and interior content Building headers Checking document outlines and ensuring cross browser structure Construct basic forms using HTML HTML form input types Setting form autofocus Using placeholder data Marking required fields Working with number inputs Using date pickers Embed audio and video in applications Adding audio Encoding audio Adding video Encoding video Learn and apply usage of web API in web applications Canvas API overview Adding canvas content Drawing in the canvas environment Drag-and-drop API overview REpresentation State Transfer (REST)ful API and Create, Read, Update, and Delete (CRUD) operations overview Improve caching and storage for web applications Offline applications overview Geolocation API overview Web storage API overview Demonstrate usage of Cascading Style Sheets (CSS) to enhance and style web applications CSS overview Enhancing typography Using @font-face Styling HTML with CSS Using CSS transitions Demonstrate usage of HTML controls in applications Email address input URL input Telephone number input Search field input Datalist form control Slider form control Spinner form control Calendar form control Color form control Evaluate client/ middleware/ server development tools Tradeoff analysis some of the current languages, tools, frameworks, and/or libraries Create data-driven web applications Use client and/or server storage systems Discuss and analyze professional ethics and societal power structures Ethical and societal topics and issues that arise in the news Nuclear war historical effects on internet infrastructure design and implications for web and cloud services Professional ethics codes and laws Ethical implications of computer hardware production, reusing, recycling, and disposal Analyze how software developers contribute to, resist, or otherwise intersect with structures of inequality and hierarchy in societies Societal implications of different types of software producing organizations (such as not for profits, for profits, non-profits, worker cooperatives, customer cooperatives, benefit corporations, B corporations, etc.) Computer related industries and customer capture economic models Unionization in technology companies and organizations Designing web applications with low and sustainable environmental footprints Societal implications of software licenses and terms of service Power of web-based computing to transform society Web application design to support privacy Data ethics and data stewardship Digital Rights Management in web browsers Net Neutrality and the internet as a ubiquitous public utility Societal need and technological support for “Do Not Track” Global Privacy Control Use responsive web design for differing screen sizes CSS media queries Flexible images and media elements Flexible grid Use security techniques SSL/TLS, HTTPS, SSH, SFTP Sessions, cookies, and web storage API Single sign on (such as via OAuth)

React and React Native: A complete hands-on guide to modern web and mobile development with React.js, 3rd Edition

Learning Web App Development: Build Quickly with Proven JavaScript Techniques 1st Edition

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 Mongo DB    Share your application by uploading it to the cloud with CloudFoundry Get basic tips for writing maintainable code on both the client and server

HTML5: Designing Rich Internet Applications (Visualizing the Web) 2nd Edition April 26, 2013

Storing Data with LocalStorage Controlling Geolocation Devices with JavaScript Integrating JavaScript with HTML5 Taking JavaScript to the Next Level with Ajax Using Ajax in Your Work Popular Ajax Libraries Going Mobile with jQuery What You Have Learned Project 5: Working with JavaScript Working with jQuery Developing a Lightbox Image Management Tool Creating the Images Working with JavaScript Stitching It All Together in HTML Controlling Forms with jQuery Inserting a Tabbed Interface to Build on Top of Your Existing jQuery Projects Using Additional Ajax Libraries: Working with Adobe’s Spry Framework Working with Additional Ajax Libraries: Using Yahoo’s YUI Framework Linking to Content Hosted on Different Web Sites

. Node Full stack, ready to go . React A static React builder . SQLite A starter database

. node.js - framework express sails hapi . react . redux . angular . bootstrap . foundation

cdnjs is a free and open-source CDN service - faster and easier to load library files on your websites. https://cdnjs.com/libraries

Lab Content
The following are the general lab topics that must be covered. Any following lab topic may be separated and/or combined with any other lab topic(s).

Semantic web HyperText Markup Language (HTML) documents Basic forms using HTML Web applications Tags and Application Programming Interfaces (API) to build web applications Cascading Style Sheets (CSS) to enhance and style web applications Front end and media technology in web applications Audio and video media 2-D and/or 3-D web API(s) Widgets and/or animation/effects Middleware and server technology Web servers and data servers APIs and controllers Front and back end data storage and modeling for web applications Databases Caching and offline storage Native apps Mobile apps Desktop apps

Labs will typically be structured as follows:
 * Read and run the code that utilizes the associated lab topic(s)
 * Create a web application using the associated lab topic(s)
 * Discuss design and implementation tradeoffs of related techniques and tools

Special Facilities and/or Equipment

1. Access to a computer laboratory with web browsers, web development software, web server and middleware software, and database software. Computer laboratory can be provided as a web-based and/or virtualized online service(s). 2. A website or course management system with an assignment posting component (through which all lab assignments are to be submitted) and a forum component (where students can discuss course material and receive help from the instructor). This applies to all sections, including on-campus (i.e., face-to-face) offerings.

3. When taught via the internet, the college will provide a fully functional and maintained course management system through which the instructor and students can interact.

4. When taught via the internet, students must have currently existing email accounts and ongoing access to computers with internet capabilities.

Method(s) of Evaluation
 * Formative exercises, projects, and quizzes requiring students to write code applying covered technology topics
 * Formative exercises, discussion forums, projects, papers, and/or quizzes regarding covered ethics and societal power topics
 * Final examination requiring students to present projects applying topics covered in the lectures, reading, and programming assignments
 * Evaluation of programming assignments based on correctness, documentation, code quality, and test plan executions

Method(s) of Instruction

Blended instruction including discussion of topics

Online labs (for all sections, including those meeting face-to-face/on campus) consisting of: 1. An assignment webpage located on a college-hosted course management system or other department-approved internet environment. Here, the students will review the specification of each assignment and submit their completed lab work 2. A discussion webpage located on a college-hosted course management system or other department-approved internet environment. Here, students can request assistance from the instructor and interact publicly with other class members 3. Collaborative team projects

When course is taught fully online: 1. Instructor-authored lecture materials, handouts, syllabus, assignments, tests, and other relevant course material will be delivered through a college-hosted course management system or other department-approved internet environment

Representative Text(s) and Other Materials
Purewal, Semmy. Learning Web App Development: Build Quickly with Proven JavaScript Techniques 1st Edition. 2014. ISBN ‎ 9781449370190

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.

Robbins, Jennifer. Learning Web Design, 5th ed.. 2018.

Subramanian, Vasan. Pro Mern Stack: Full Stack Web App Development with Mongo, Express, React, and Node. 2019. Types and/or Examples of Required Reading, Writing, and Outside of Class Assignments

Reading Textbook assigned reading averaging 30 pages per week Reading the supplied handouts and modules averaging 10 pages per week Reading online resources as directed by instructor though links pertinent to software engineering Reading library and reference material directed by instructor through course handouts Writing Writing technical prose documentation that supports and describes the programs that are submitted for grades