CSE104 - Web Programming (2022-2023)
Topic outline
-
-
Web Programming (CSE 104) introduces the languages, tools, and techniques specific to developing web-based applications. This is a hands-on practical course providing practice knowledge to develop your own web-based applications.
At the end of the course, you should have developed a solid understanding of the intricacies of contemporary, dynamic website development, and an insight into the internal workings of the web itself.
-
Course objectives:
- Being able to develop an interactive client-side-based website
- complying to HTML5/CSS3 standard, and JavaScript good practices
- responsive
- without requiring external libraries
- Being introduced to server side programming
- Being able to autonomously find and use information from various documentation on web applications
-
Topics:
- I. HTML, CSS
- II. JavaScript (front-end)
- III. Introduction to server programming (PHP)
-
Course prerequisite: Basic programming experience (ex. Python)
-
General organization: The class will mainly consist of practical computer lab classes mixing tutorials and exercises. A small project will be conducted where you will develop your own website (client side only) following the current good practices.
-
Exams:
- Test 1 [24/02]: HTML/CSS - Lecture Quiz and Webpage reproduction (~30min, 25% course grade)
- Test 2 [14/04]: JavaScript - Interactive webpage reproduction and/or lecture quiz (~30min, 25% course grade)
- Project [11/05]: Your own website on the topics of your choice (50% course grade)
- Test 3 [26/05]: Sever programming - lecture quiz (~10min, bonus/malus).
Note: No final exam, Lab classes tutorials are not graded.
-
Grade correspondence table:
A+ >= 18; A >= 16; A- >= 15; B+ >= 14; B >= 13; B- >= 12; C >= 10; D >= 7; E > 0; F == 0
-
-
-
Links
- Online host: https://cse104.org where you can freely upload your work and projects; and its administrative panel: https://cpanel.cse104.org
(ID to not share outside of this class)- login: cseorg1- password: ebF3612#24WXDo not change the password, this is a shared login system
-
-
-
The class will start in Amphi Cauchy at 8am.
-
1. Lecture HTML/CSS
-
2. Lab Class [HTML/CSS]
=> Link to the exercises on HTML/CSS
- Minimal objective to reach before the next week: Finish all "HTML Introduction"
(starting "CSS Introduction" is encouraged)
-
-
-
Note that the password on the cpanel of cse104.org has been updated. Please do not change yourself the password, this is not an individual account, you are all sharing a unique login/password.
-
Lab Class [8am-10am]
HTML/CSS
Minimal objective to reach before the next week:
- Finish "CSS Introduction"
- Finish "Box Model"
- Have at least started "Class and ID"
-
-
-
Lab Class [8am-9:30am]
HTML/CSS
Minimal objective: Reach "Alignment" before the start of the test -
2- Test on HTML/CSS [~9:30am-10:00am]
The program of the test includes all the content up to "Alignment" (included)
-
Self training from last years lab class exams (about 20-30min):
(note this year will be slightly simpler website)
- [Test 2021/2022] (Video)
- [Test 2019/2020] (difficulty: high)
- [Test 2018/2019] (difficulty: high++ ) -
- The test is 30min long, it contains two elements:
1) A quiz (multiple-choice questions) - The Quiz has 4 questions, it opens at 9:30am, and closes at 9:38am
2) A practical exercise where you have to reproduce a webpage. All you files must be upload on Moodle at 10am.
- Modalities: Use of notes, codes, internet, etc. is allowed. Any communications between you is forbidden.
example of quiz questions:
- Basic class related questions (role of the language, principle of the server, role of basic HTML tags, etc.).- Watch a simple html structure, and indicate the correct css selector for a given element among multiple choices. Understand CSS cascading behavior and priority.
- Indicate the correct layout to set to some elements (type of display, type of position) given an image or a behavior of what we want to obtain.
-
2) Reproduce the behavior of the following webpage:
General rules:
- Create and complete the necessary files (HTML, CSS) to reproduce the example webpage
- At the end of the time, upload on Moodle your HTML and CSS file
- Your webpage should contain valid HTML and CSS code
- You don't have to reproduce the exact size, space, and colors of elements. Approximating them is good enough. However, pay attention to their general display and behaviors and try to copy them precisely.
- You can access the internet, and use your previous exercises. But don't communicate under any forms with anybody (excepted the teachers).
-
Hints/reminder on some useful CSS:
- Set a rounded corner to a box: "border-radius: Npx;" with N to be set
- Create a border around a box: "border: Npx solid Color;" with N/Color to be set
- Align the content in a box: "text-align: left/middle/right;"
- Make a text in bold: "font-weight: bold;"
- The color used in the test will be among: blue, yellow, red, white, black, lightcoral
-
- You can drag & drop your two files (.html and .css) in the file deposit.
Important:
- You need to upload files and the end, you cannot copy/past code.
- The file deposit closes at 10am. Make sure that you upload your result before the end of the time.
- Once uploaded, check that you have uploaded the correct files. You can re-upload files if you have done a mistake as long as the file deposit is open.
- You can use the following "Dummy file deposit" to test beforehand. You can drop whatever file you want there.
-
Note that I have included the CSS style in the HTML (in the tag <style></style>) to be more concise in this solution. But it is a better practice in general to split your HTML and CSS in two separated files.
-
-
-
No class - holidays
-
-
-
2- Lab Class on JavaScript [~9:00am-10am]
-
Objective to reach before the next class: Finish "Event"
-
-
Objective to reach before the next class: "JavaScript as a language"
-
-
Lab Class [8am-10am]
JavaScript
-
-
-
Lab Class [8am-10am]
JavaScript
-
-
-
1. Lab Class [8am-10am]
JavaScript
-
-
-
1. Test on JavaScript (8am-8:50am)
-
- Duration: 50min
- Type: You will have a small webpage to reproduce - in particular you will need to reproduce the behavior of the elements using JavaScript.
- Principle: The link to the test will be available on Moodle. You will need to code 3 files on your computer (html, css, and javascript) and upload them to the test webpage.
- Program: The program of the test covers all JavaScript up to "Animation loop" included. Canvas is not in the program of the test.
- Modalities: Use of notes, code, internet queries is allowed.
All forms of communication and exchange of data are forbidden. You should not communicate together, don't use any chat, don't ask questions to anyone except to your teacher in case of a technical problem (we won't help you to solve the exercise though).
Cheating penalty: If you are caught with any type of communication, code exchange, or ending up with similar codes, your final CSE104 grade will be F in the first session, and your cheating reported to your administration for further processing. Note that the penalty applies in the same way to students who receive but also provide the code. -
Exam JavaScript 2023 - to appear here
-
Hints:
- The css commands: "cursor:pointer" can change the default cursor appearance (see here).
- The opposite of [element].addEventListener(eventName, functionName), is [element].removeEventListener(eventName, functionName) (removing a listener on an element).
- The opposite of [element].classList.add(className) is [element].classList.remove(className). (remove className to the element).
- Math.random() can be used to generate a random number in [0,1[. Math.sqrt(x) returns the square root of a number.
Don't forget that you JS code must start with the line "use strict;". Your HTML and CSS code must remain valid and pass the HTML validator without error. Avoid giving a code that crashes: It is better to provide a code that works, than a code that does theoretically more but actually crashes.
Basic functionality and general behavior provide more points than fine details. Focus on these only if you have done the basic functionality - they are often trickier to implement while providing fewer points.
-
Principle:
The test consists of a game with two main parts.
First part: You manually place an arbitrary number of discs on your window using the mouse click. Each disc has a radius of 20px and inherit the color indicated by the GUI element. The initial color of the GUI element is set to cyan (#00ffff).
Second part: Once the player is ready, he can click on the start button. The spheres then start to move with constant velocity and bounce on the boundary of the window. The cursor of the player is attached to a red disc. During the game, the player must avoid touching the other moving discs. If it does, the game stops indicating "Game Failed" and shows in color the collision.
-
More hints:
A constant velocity motion can be implemented as: p = p + v dt in an animation loop, where p is the position to be moved, v is the velocity (constant), and dt is the constant time step (you can consider dt=1 to simplify your relation).
A 2D velocity vector v=(vx,vy) that has a prescribed magnitude L must satisfy the relation L*L = vx*vx+vy*vy
The bouncing effect along x (resp. y) direction can be obtained by reversing the velocity in x (resp. y) coordinates. (x -> -x, and y -> -y)
-
Grading:
First part (creating colored discs): 12 points
- Creating a new disc at the selected position after a click: 4 points
- Creating this new disc at the correct position: 3 points
- Setting the color of the newly creating disc: 5 points
Second part (animation): 8 points
- An action take place when we click on Start button: 1 point
- The discs are moving in a decent way: 2 points
- The discs bounce on the window limits: 3 points
- A red disc is following the user cursor: 1 point
- Handling the Game Over: 1 point
Bonus/Malus
- Code readability: +2 points if decent code. Up to -2 malus points if very bad/overly-complex code (ex. brute force generic chatGPT).
- Late submission: -1 point
-
2. Project (9:00am - 10am)
-
Make sure to validate your project topic with one of the teacher.
-
-
-
All students doing their project at 8am: please go to rooms 32 & 33
All students doing the second test JavaScript at 8am: please go to the room 31.
(Don't forget the project deadline on May the 9th - you still have a bit of time, but it will come fast !)
-
Project [8am-10am]
-
Test JavaScript 2 [8am-8:45am] (only for students who were absent last week, or who have been contacted to redo a second attempt)
-
The second JavaScript test will start at 8am. Be on time, if you miss its start, you won't be allowed to work on it.
-
General rule:
- This test only concerns students who were absent on April 14th, or who have been contacted for a "second chance". All the other students should be working on their project.
- This second test will be another webpage to reproduce in about 45min. Same rules, program, and criteria as last week (internet queries are allowed; but it is strictly forbidden to communicate, sneak at your neighbor's code, or exchange any type of data - any forbidden behavior or code similarity will lead to a final 0/F grade for your entire CSE104 result).
- Students who were absent last week will get their grades from this test only. You can get a grade between 0 to 20.
- Students who are doing their "second chance" cannot get a grade greater than 14/20 on this second test. If this second test is worst than your first one, you'll keep your first grade.
As in last week's test, you are highly encouraged to:
- Do simple things first. Don't try to do the entire exercise at once. Prefer to have a simple website that does simple things rather than an empty screen with javascript error. You'll accumulate points when you have working behaviors (simple behaviors bring most of the points), not when you write lines of code that do not work.
- Don't try to make chatGPT write your entire code directly - it will probably be overly complex and not working as expected, making you stuck in endless trials and errors. It is ok to get a bit of chatGPT help/hints on subparts, but you should be able to structure your code and move on incrementally with code that you understand.
You can always do the entire exercise based only on instructions that have been seen during the labs + the few hints indicated on Moodle.
-
Hints:
- You may check the function event.stopPropagation(). This function allows avoiding an event to propagate toward its parent.
Exemple of use:
function someActionFunction(event) {
event.stopPropagation(); //ensure that no action function will be called on the parent for the same type of event.
... // rest of the Action function
}
- The CSS outline is similar to the "border" property, but doesn't take additional space in the layout.
-
Description:
- Every time the user clicks 'Add container' button, a blue container appears.
- When the user clicks on a blue container, a smaller yellow container appears inside the blue one.
- When the user clicks on a yellow container, a smaller salmon box appears inside the yellow one.
- When the mouse is over an active blue (resp. yellow) container, its border becomes red.
- The yellow container can hold up to 5x2=10 child red boxes. When a yellow container reaches this maximum number of red boxes, its border becomes green and the child boxes become gray. The yellow container thus becomes "inactive".
- The blue container can hold up to 4x6=24 child yellow containers. When a blue container reaches this maximum number of yellow boxes, its border becomes green. The blue container thus becomes "inactive".
- In this example, the size of each container is the following:
-- blue container: width:40%; height:300px;
-- yellow container: width:20%; height:35px;
-- red box: width:15%; height:10px;
-
-
-
Project [8am-10am]
-
Deadline extension: You can drop your project until Wednesday May the 10th, 20h without penalty.
-
Don't forget to check the information on the project. And don't forget to give your code and your short report.
In particular, please provide a single archive (prefers .zip or .tar.gz) that contains
- Your entire website (including images, etc.). When you have multiple .html file, please name the entry point of your webpage "index.html" so that we know where to start.
- A short report (prefers pdf format) typically 1-3 pages that describes briefly your project and can possibly describe the effects you have set up and your choices to make them (if they are not trivial). (Your report doesn't have to follow a formal structure.) Your report must contain your name(s).
-
-
-
No class - holidays
-
-
-
1- Lecture Server Programming (~8am-8:45am, amphi Gay Lussac)
2- Lab Class [8:45am - 10:00am]
- Tutoriel to install PHP: using Xampp (Windows + other OS), or in command line (Linux or Mac).
-
-
-
Lab Class (server programming)
-
-
-
1. Lab Class (server programming)
-
2. Quiz on server programming
-
This quiz only provides "bonus points" and cannot lower your final grade.
The test is a short quiz, there will be no programming exercise.
It can apply to students physically present.
-
- Duration: 7min
- Type: Short quiz
- Topic: Server lecture content + PHP exercises up to [005] included
-