DSW-Unit 1-Introduction

Summary

Brief introduction to each component of web app development

Topics

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

Learning Objectives

• The student will be able to create a simple static web page using HTML
• The student will be able to add CSS styling to a simple static web page
• The student will be able to add a simple Javascript effect to a static web page
• The student will be able to deploy static HTML pages to the web via Github Pages
• The student will be able to implement a simple 'Hello World' style web app in Python using Flask
• The student will be able to correctly identify the roles of the browser and the web server in bringing up a simple web page.
• The student will be able to correctly identify the parts of a URL, including hostname, port, path and query string.
• The student will be able to correctly identify the role of localhost and port numbers in web app development
• The student will be able to work with a github repository to do basic workflow including clone, status, add, commit, push and pull.
• The student will be able to deploy a simple Flask webapp to the cloud computing provider Heroku
• The student will be able to create simple web apps involving echoing data from forms, using GET
• The student will be able to create simple web apps involving simple computation on data from forms, using GET
• The student will be able to create simple web apps involving simple computation on data from forms, using POST
• The student will be able to correctly identify the differences between using GET and POST in webapps.

UC a-g application information

Summary

In this unit, the student learn to identify key components, skills, technologies and terminology that are needed for the rest of the course. These include: the distinction betwen static and dynamic web content, client vs server side technologies, the request/response model of web interaction, and the role each of the following plays in the display of a web page: HTML, CSS, and JavaScript. A small amount of Python code will be covered, but most Python details are deferred to later units. The student will also learn a few hands-on skills for producing both static and dynamic web pages and will produce a few small examples that will serve as starting points for later projects that explore these topics in more depth. Additional topics include learning the components of URLs, the distinction between GET and POST requests, how to handle form data, URL components, localhost and the role of ports, a few basics of using git/github for version control, and deploying content the the web via github pages and via Heroku.

Key Assignment

A key assignment from this unit is the completion of a project that deploys a single static web page that includes HTML, CSS and JavaScript code via github pages, and two dynamic web pages using Python Flask on Heroku. The student will be guided through several examples, and then asked to complete an example on their own with different content. Through the completion of this assignment the student will learn to develop useful skills and cultivate interest in Computer Science.

Activities

• TODO: Fill in activities, labs, homework…