Academic Catalog

C S 77A: ADVANCED WEB APPLICATION DEVELOPMENT

Foothill College Course Outline of Record

Foothill College Course Outline of Record
Heading Value
Effective Term: Summer 2024
Units: 4.5
Hours: 4 lecture, 2 laboratory per week (72 total per quarter)
Advisory: C S 22A, C S 30A, C S 40A, and GID 55.
Degree & Credit Status: Degree-Applicable Credit Course
Foothill GE: Non-GE
Transferable: CSU
Grade Type: Letter Grade (Request for Pass/No Pass)
Repeatability: Not Repeatable

Student Learning Outcomes

  • Ethically create data-driven web applications that work with client or server storage systems.
  • Ethically create web pages using modern versions of 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.
  • Ethically create rich Web applications that deliver similar features and functions previously associated with desktop applications through the use of modern libraries or frameworks.

Description

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

Course Objectives

The student will be able to:

  1. Understand the history of the web, and use web tags and Application Programming Interfaces (API).
  2. Design, create, and organize modern HTML documents.
  3. Construct basic web forms using HyperText Markup Language (HTML).
  4. Embed audio and video in applications.
  5. Use web API in rich internet applications.
  6. Improve caching and storage for rich internet applications.
  7. Use Cascading Style Sheets (CSS) to enhance and style rich internet applications.
  8. Use modern HTML controls in applications.
  9. Evaluate client/middleware/server development tools.
  10. Create data-driven web applications.
  11. Discuss and analyze professional ethics and societal power structures.
  12. Use responsive web design for differing screen sizes.
  13. Use security techniques.
  14. Apply SOLID programming principles.

Course Content

  1. Explore web history, tags, and Application Programming Interfaces (API)
    1. History of HyperText Markup Languages (HTML)
    2. Modern HTML features
    3. Structural, content, and application-focused tags
  2. Explore designing, creating, and structuring modern HTML documents
    1. Content models
    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
  3. Construct basic forms using HTML
    1. Modern input types
    2. Setting form autofocus
    3. Using placeholder data
    4. Marking required fields
    5. Working with number inputs
    6. Using date pickers
  4. Embed audio and video in applications
    1. Adding audio
    2. Encoding audio
    3. Adding video
    4. Encoding video
  5. Learn and apply usage of web API in rich internet applications
    1. Canvas API overview
    2. Adding canvas content
    3. Drawing in the canvas environment
    4. Drag-and-drop API overview
    5. REpresentation State Transfer (REST)ful API and Create, Read, Update, and Delete (CRUD) operations overview
  6. Improve caching and storage for rich internet applications
    1. Offline applications overview
    2. Geolocation API overview
    3. Web storage API overview
  7. Demonstrate usage of Cascading Style Sheets (CSS) to enhance and style rich internet applications
    1. Modern CSS overview
    2. Enhancing typography
    3. Using @font-face
    4. Styling modern HTML with modern CSS
    5. Using CSS transitions
  8. Demonstrate usage of modern HTML 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
  9. Evaluate client/middleware/server development tools
    1. Tradeoff analysis some of the current languages, tools, frameworks, and/or libraries
  10. Create data-driven web applications
    1. Use client and/or server storage systems
  11. Discuss and analyze professional ethics and societal power structures
    1. Ethical and societal topics and issues that arise in the news
    2. Nuclear war historical effects on internet infrastructure design and implications for web and cloud services
    3. Professional ethics codes and laws
    4. Ethical implications of computer hardware production, reusing, recycling, and disposal
    5. Analyze how software developers contribute to, resist, or otherwise intersect with structures of inequality and hierarchy in societies
    6. 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.)
    7. Computer related industries and customer capture economic models
    8. Unionization in technology companies and organizations
    9. Designing web applications with low and sustainable environmental footprints
    10. Societal implications of software licenses and terms of service
    11. Power of web-based computing to transform society
    12. Web application design to support privacy
    13. Data ethics and data stewardship
    14. Digital Rights Management in web browsers
    15. Net Neutrality and the internet as a ubiquitous public utility
    16. Societal need and technological support for "Do Not Track" Global Privacy Control
  12. Use responsive web design for differing screen sizes
    1. CSS media queries
    2. Flexible images and media elements
    3. Flexible grid
  13. Use security techniques
    1. SSL/TLS, HTTPS, SSH, SFTP
    2. Sessions, cookies, and web storage API
    3. Single sign on (such as via OAuth)
  14. Apply the SOLID programming principles:
    1. Single-responsibility principle
    2. Open-closed principle
    3. Liskov substitution principle
    4. Interface segregation principle
    5. Dependency inversion principle

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).

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

Labs will typically be structured as follows:

  1. Read and run the code that utilizes the associated lab topic(s)
  2. Create a web application using the associated lab topic(s)
  3. 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

Methods of Evaluation may include but are not limited to the following:

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

Methods of Instruction may include but are not limited to the following:

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

Benjamin, Ruha. Race After Technology: Abolitionist Tools for the New Jim Code. 2019.

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

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

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

Discipline(s)

Computer Science