UCSB-SBHS-CS
About UCSB-SBHS-CS
This page documents collaborations between UCSB CS faculty and the SBHS Computer Science Academy on curriculum design and other projects. Current the focus is on development curriculum for the course “Designing Software for the Web”.
Course Description
Designing Software for the Web is intended as a second or third year course in Computer Science, in which students will learn programming, design patterns, data management, scalable cloud computing, and principles of collaborative software development for full stack web application development, including both front-end (browser side) and back-end (server side) code.
Students will demonstrate mastery of these skills by constructing web applications using HTML, CSS, JavaScript for the front-end, and Python for the back end.
The goals of of this course are:
- to develop students’ critical thinking skills via the application of computational thinking practices in solving problems and developing algorithms, in an academically challenging way,
- to develop students’ written and oral communication skills via team-oriented software engineering practices.
- to develop students’ ability to take responsibility for their own learning, by scaffolding them towards independence in learning new skills and technologies
- to develop students’ interest in further study of Computer Science by offering engaging problem solving experiences in a relevant, modern context, i.e. web applications.
Curriculum Design Constraints
- The SBHS school year is divided into four 9-week quarters.
- A curriulum with 12 units should proceed on an average pace of one unit every three weeks.
- Each week provides an opportunity for about 2.5 hours of instruction and 2.5 hours of lab.
- Thus: 7.5 hours of instruction and 7.5 hours of student lab time for each unit.
- Note that students should be able to complete all lab work in class (unlike the expectations for a University course, for example.)
Some ideas
- Sky sometimes uses a “Do Now” exercise during the first few minutes of class.
- This can be helpful… make these if they are educationally valuable.
- Typically “review”:
- We did it yesterday and it was new, let’s get it back in your mind.
- We did it a long time ago, but we need it today, so let’s remind you.
- This is a type of exam question you might get–let’s practice.
- Ok to skip it if its just busy work.
- Lecture in small chunks, divided up by “now apply this”.
- Live coding, alternating with students try it.
- Sometimes its just “work on this project” and teacher walks around and just helps students with
- Exams take the form, typically of quizzes and unit tests (exam at end of each unit).
DSW:
- Mon, Tue: 57 minutes
- Wed OR Thu: 92 minutes
- Fri: 57 minutes
Designing Software for the Web
| unit | name | summary | topics |
|---|---|---|---|
| 1 | Introduction | Brief introduction to each component of web app development | First static Web Page,Adding CSS and JavaScript to static web page,Deploying static HTML pages via github pages,First Python Web App (Hello World, Simple Computations on Form data),Browser/server,URL components,localhost and ports,HTML/CSS/JavaScript,Git/Github basics,Deploying a Flask app on Heroku,Form Data in Flask Apps,Simple computation on form data in a Flask App,HTTP GET/POST for form data. |
| 2 | Python | Crash course in Python for students that have some programming background (e.g. in Scratch, Snap, Processing, Java, Swift, etc.) | Python Read/Eval/Print loop (REPL),Saving and running Python files in IDE provided,Variables,Types: int, float, bool, str, list, dict, object,Functions,Print vs. Return,Control Flow: if, for, while,Iterating over lists,Using iteration to find counts, sums, min and max,Working with Dictionaries,Nested data structures (lists/dictionaries),Errors: syntax, run-time, logic |
| 3 | Tools and Practices, Part 1 | Unit testing in Python, Test-Driven Development, Exceptions, Modules | Python unittest,Python annotations,Background on Python OOP and classes (minimal amount needed to understand use of unittest),tdd red/green/refactor cycle,Exception handling in Python,importing modules,creating user-defined modules,using pip to install modules,Pair programming,Llewellyn Falco's Strong-Style Pair Programming,Mob programming |
| 4 | Web Fundamentals | Deeper introduction to Flask Web Framework, and MVC-based web applications, intro to cloud deployment | Additional Python Web App Practice,Model/View/Controller design pattern,Sessions,Cookies,Templates,Simple use of Bootstrap for common navigation,Simple cloud deployment via Heroku,CSRF vulnerability and how to protect against it,Managing environment variables locally (for CSRF protection secret),Accessing environment variables in Python code,Managing environment variables in Python,Using .gitignore to protect secret values,Setting environment variables in Heroku app |
| 5 | Data, Part 1 | JSON, JSON APIs (read only), Python requests module, access tokens, computing with JSON data | Python requests module,JSON syntax,JSON modules in Python (json.loads() and json.dumps()),Accessing JSON APIs,Access tokens and rate limits,Review of environment variables for storing access tokens,Review of key/values in dictionaries,Review of indexing into lists,Computing functions over nested list/dictionary data structures,Presenting JSON data in a web application via HTML tables and lists |
| 6 | Security | OAuth. Web App vulnerabilities. Sanitizing Inputs, Captchas | Web App Vulnerabilities,Spam prevention,Denial of Service,Code injection,Sanitizing Inputs via Python itsdangerous,CAPTCHAs using FlaskWTF,Authentication and Authorization,OAuth,Role based security |
| 7 | Data, Part 2 | Updating Server Side State | Create/Read/Update/Delete operations,Python code for CRUD operations on NoSQL (MongoDB) databases,Restful APIs,Using Restful APIs that update state (e.g. Google Calendar API) |
| 8 | Projects | Students work on final capstone projects | To be chosen by students |
Designing Software for the Web (Honors)
| unit | name | summary | topics |
|---|---|---|---|
| 1 | Introduction | Brief introduction to each component of web app development | First static Web Page,Adding CSS and JavaScript to static web page,Deploying static HTML pages via github pages,First Python Web App (Hello World, Simple Computations on Form data),Browser/server,URL components,localhost and ports,HTML/CSS/JavaScript,Git/Github basics,Deploying a Flask app on Heroku,Form Data in Flask Apps,Simple computation on form data in a Flask App,HTTP GET/POST for form data. |
| 2 | Python | Crash course in Python for students that have some programming background (e.g. in Scratch, Snap, Processing, Java, Swift, etc.) | Python Read/Eval/Print loop (REPL),Saving and running Python files in IDE provided,Variables,Types: int, float, bool, str, list, dict, object,Functions,Print vs. Return,Control Flow: if, for, while,Iterating over lists,Using iteration to find counts, sums, min and max,Working with Dictionaries,Nested data structures (lists/dictionaries),Errors: syntax, run-time, logic |
| 3 | Tools and Practices, Part 1 | Unit testing in Python, Test-Driven Development, Exceptions, Modules | Python unittest,Python annotations,Background on Python OOP and classes (minimal amount needed to understand use of unittest),tdd red/green/refactor cycle,Exception handling in Python,importing modules,creating user-defined modules,using pip to install modules,Pair programming,Llewellyn Falco's Strong-Style Pair Programming,Mob programming |
| 4 | Web Fundamentals | Deeper introduction to Flask Web Framework, and MVC-based web applications, intro to cloud deployment | Additional Python Web App Practice,Model/View/Controller design pattern,Sessions,Cookies,Templates,Simple use of Bootstrap for common navigation,Simple cloud deployment via Heroku,CSRF vulnerability and how to protect against it,Managing environment variables locally (for CSRF protection secret),Accessing environment variables in Python code,Managing environment variables in Python,Using .gitignore to protect secret values,Setting environment variables in Heroku app |
| 5 | Data, Part 1 | JSON, JSON APIs (read only), Python requests module, access tokens, computing with JSON data | Python requests module,JSON syntax,JSON modules in Python (json.loads() and json.dumps()),Accessing JSON APIs,Access tokens and rate limits,Review of environment variables for storing access tokens,Review of key/values in dictionaries,Review of indexing into lists,Computing functions over nested list/dictionary data structures,Presenting JSON data in a web application via HTML tables and lists |
| 6 | Security | OAuth. Web App vulnerabilities. Sanitizing Inputs, Captchas | Web App Vulnerabilities,Spam prevention,Denial of Service,Code injection,Sanitizing Inputs via Python itsdangerous,CAPTCHAs using FlaskWTF,Authentication and Authorization,OAuth,Role based security |
| 7 | Data, Part 2 | Updating Server Side State | Create/Read/Update/Delete operations,Python code for CRUD operations on NoSQL (MongoDB) databases,Restful APIs,Using Restful APIs that update state (e.g. Google Calendar API) |
| 8 | Front End Design | JavaScript Syntax and Semantics. JQuery, Bootstrap. UI design principles. | JavaScript Syntax and Semantics,TDD in JavaScript via Mocha/Chai,JavaScript debugging via console.log, window.alert, and browser console tools,DOM concepts,JQuery,AJAX,Javascript JSON methods (JSON.parse() and JSON.stringify()),JavaScript Closures,Immediately Invoked Function Expressions (IFFEs),Bootstrap and alternatives,UI design principles,Single Page vs. Multiple Page Apps,Brief overview of Client vs. Server side JavaScript,Brief overview of single-page app frameworks (e.g. Angular.js) |
| 9 | Tools and Practices, Part 2 | More advanced uses of git (branches, merge conflicts), End-to-end integration testing, Continuous integration. | user stories,issues in Github,kanban,github forks,git branch,git fetch,git checkout,git merge,Dealing with merge conflicts,Pull requests,code review |
| 10 | Projects | Students work on final capstone projects | To be chosen by students |
About this website
This site is maintained in this github repo: https://github.com/ucsb-sbhs-cs/ucsb-sbhs-cs.github.io, and is based on Github Pages, Jekyll, and JQuery Mobile. It can be directly edited through the Github web interface, or offline.
Information needed for UC A-G requirements
For EACH unit of the course, please provide:
- A unit title
- A concise 3-5 sentences describing the topics being addressed that demonstrate the critical thinking, depth, and progression of the content covered
- A brief 3-5 sentences summarizing a key assignment from this unit and covering:
- how a student will complete this assignment
- what a student will produce
- what the student will learn
Most importantly, use the unit(s) and key assignment(s) to demonstrate that the course meets the subject-specific course criteria on the A-G Guide
For area g, those are:
Goals of the requirement: The intent of the college-preparatory elective requirement is to encourage prospective UC students to fill out their high school programs with courses taken in grades 9-12 that will meet one or more of the following objectives:
- Strengthen general study skills, particularly analytical reading, expository writing, and oral communications;
- Provide an opportunity to begin work that could lead directly into a major program of study at the University; and
- Experience, at some depth, new areas of academic disciplines that might form the basis for future major or minor studies at the University.
All elective courses must satisfy the following general criteria to meet the area “g” requirement:
- Be academically challenging;
- Involve substantial reading and writing;
- Include problem-solving and laboratory work, as appropriate;
- Show serious attention to analytical thinking, as well as factual content;
- Develop students’ oral and listening skills; and
- Incorporate learning to develop skills and cultivate interest in the academic enterprise.
Courses specifically approved in the “g” subject area include those such as political science, economics, geography, humanities, psychology, sociology, anthropology, journalism, speech or debate, computer science, computer programming and others. In addition, courses that are interdisciplinary in nature, drawing knowledge from two or more fields, are also acceptable.
Approved “g” courses that cannot be categorized in any of the “a-f” areas must provide academically challenging study at the same level of rigor as courses in the “a-f” subject matter fields. These elective courses must have appropriate prerequisites and present material at a sufficient depth to allow students to achieve mastery of fundamental knowledge that prepares them for University work or a future career path.
Topics
- Bootstrap—Cascading Style Sheets: style, layout, fonts, colors, etc. for webpages
- Common Errors: Python—Mistakes that folks often make in Python
- Common Navigation—The way that users find their way around a multiple page website
- CSS—Cascading Style Sheets: style, layout, fonts, colors, etc. for webpages
- Databases—Storage for data related to your webapps that lasts longer than a single session
- Debugging: Webapps—Things to try when you are stuck
- Flask—Python-based server-side web development platform
- Flask: Security—Securing user sessions on Flask
- Flask: Templates—Using Jinja 2 Templates with Flask
- github: creating your account—Creating a github.com account
- github pages—Publishing static content online with github pages
- html—HyperText Markup Language: the language of web pages
- html: head—What belongs in the <head> element
- html: nesting—HTML elements inside one another
- JavaScript—language used for client side web programming, and sometimes server side web programming
- JSON—JavaScript Object Notation--a way of representing data (not just in JavaScript but across many languages)
- MongoDB—A NoSQL database--basically, JSON in the cloud
- MongoDB: MLab—A cloud service for hosting MongoDB databases
- MongoDB: Creating Your Mlab Account—Signing up for an MLab account is trickier that you might think
- OAuth—Delegating username/password authentication to Github, Facebook, Google, etc.
- OAuth: Github Credentials—Creating the GITHUB_CLIENT_ID and GITHUB_CLIENT_SECRET values
- Privacy Concerns—Your privacy, as a student enrolled in this course
- Python—A programming language that is easy to learn and use
- Python: dictionaries—a map from a set of keys to a set of values
- Python: unittest—module for test-driven development in Python
- shebang—About that first line of some python files that looks like this: #!/usr/bin/env python
- Windows—Helpful hints for installing the software for this course on Windows machines
Resources
- Data Sources—Places to find interesting data to use in your webapps
- Python—Resources for learning about Python
Assignments
- First Web Page—Creating a simple HTML web page on github pages
- JSON in Python—Practicing with JSON in Python