NSI (Numérique et Sciences Informatiques, "Digital Technology and Computer Science") is a computer science specialty in the French high school curriculum. It is taught in Première (year 11, students aged 16-17) and Terminale (year 12, students aged 17-18). This appendix is aimed at teachers following this curriculum, but the proposed progression can easily be adapted to other high school or introductory courses.
This chapter starts by recalling the NSI curriculum (in French). It then discusses a teaching progression based on the chapters of this book and shows how it aligns with the curriculum. Finally, it discusses practical implementation and proposes several projects that can be given to students.
The NSI curriculum is defined for the Première year and for the Terminale year (both documents in French).
As far as web application programming is concerned, the Première curriculum focuses on HTML, the HTTP protocol and the use of JavaScript in the browser. The Terminale curriculum covers databases.
Table 11.1 shows how the chapters of this book map to the two years of the NSI curriculum.
You can see that, for the Première year, the first chapters of this book (1, 2, 4 and 5) as well as chapter 9 match the curriculum. Note that CSS (chapter 3) is not part of the curriculum. For the Terminale year, chapters 6, 7 and 8 cover databases. The advanced concepts of sessions and cookies that we develop in this book are not part of the NSI curriculum.
| Chapter | NSI Première | NSI Terminale |
|---|---|---|
| Chapter 1: Web Page Server | X | |
| Chapter 2: HTML and Web Pages | X | |
| Chapter 3: CSS Style | ||
| Chapter 4: Static and Dynamic Modes | X | |
| Chapter 5: The HTTP Protocol | X | |
| Chapter 6: The Relational Model | X | |
| Chapter 7: Queries | X | |
| Chapter 8: Connecting the Server to the Database | X | |
| Chapter 9: Event Handling in JavaScript | X | |
| Chapter 10: Sessions and User Accounts |
Table 11.1: Mapping between the chapters of this book and the NSI years.
The NSI curriculum for the Première year is made up of eight sections. Among them, the section Human-machine interaction on the Web covers the development of web applications. This section is described as follows (our translation):
When browsing the Web, users interact with their machine through Web pages. The Human-Machine Interface (HMI) relies on handling events associated with graphical elements equipped with algorithmic methods. The understanding of the client-server dialogue already introduced in Seconde (year 10) is consolidated, on simple examples, by identifying the client's requests, the computations and then the server's responses processed by the client. The aim is neither to describe all the available elements exhaustively, nor to develop expertise in the languages used to implement the dialogue, such as PHP or JavaScript.The NSI curriculum specifies four content items for the section Human-machine interaction on the Web. Each item is presented with a list of expected skills and comments. Table 11.2 summarizes these items (our translation).
| Content | Expected skills | Comments |
|---|---|---|
| Modes of interaction between humans and machines. Events | Identify the various graphical components used to interact with a Web application. Identify the events that the functions associated with the various graphical components can handle. | The aim is to examine the HTML code of a page containing graphical components and to distinguish between the description of the graphical components in HTML and their behavior (reaction to events), programmed for example in JavaScript. |
| Interaction with the user in a Web page | Analyze and modify the methods executed when a button of a Web page is clicked. | |
| Client / server interaction. HTTP requests, server responses | Distinguish what is executed on the client or on the server, and in what order. Distinguish what is stored in the client and sent back to the server. Recognize when and why the transmission is encrypted. | The aim is to link with what was seen in Seconde and to explain how parameters can be passed to a site using the HTTP protocol. |
| Web page forms | Analyze how a simple form works. Distinguish parameter passing through POST and GET requests. | Discuss the two types of requests depending on the type of values to transmit and/or their confidentiality. |
Table 11.2: The content of the NSI curriculum for the Première year.
Table 11.3 gives a detailed mapping between the content of the NSI curriculum for the Première year and the chapters of this book.
| NSI content for the Première year | Chapters of the book |
|---|---|
| Modes of interaction between humans and machines. Events. | Chapters 1, 2 and 9 |
| Interaction with the user in a Web page. | Chapters 1, 2 and 9 |
| Client / server interaction. HTTP requests, server responses. | Chapters 1, 4, 5 and 9 |
| Web page forms. | Chapters 1, 2, 4 and 5 |
Table 11.3: Mapping between the chapters of this book and the content of the NSI curriculum for the Première year.
For the teaching progression, we think it is important to start with chapter 1, or at least to show the role played by the web server: responding to browser requests by delivering the requested resources. Chapter 1 also helps students understand the role of URLs and the link between web pages and web resources: a web page is made up of several resources, exactly one of which must be HTML code.
We then find it useful to continue with chapter 2 to present the HTML standard. The goal is to present a subset of HTML tags that is necessary and sufficient to build typical web pages. The notion of DOM tree is also fundamental. Box positioning and painting could be skipped, even though these notions help to understand how a web page is displayed.
Next, although it is possible to start with handling interactions and events on the web browser side, we find it easier to start with the web server. This approach presents the HTTP protocol and the two types of requests (GET and POST), and explains the behavior of the web browser and the web server. We think it is worthwhile to begin by explaining static mode through GET requests. Then, motivated by the need to pass parameters, to present dynamic mode and POST requests. This progression mixes chapters 4 and 5. Note that the detailed structure of HTTP requests and responses can perfectly well be skipped.
Finally, we suggest ending with JavaScript in the web browser. The goal is to show the DOM objects and event handling. Students should be able to see how front-end processing and back-end processing complement each other.
In summary, the teaching progression we propose has five parts:
To fully match the curriculum, the difference between HTTP and HTTPS must be explained (parts 1, 3 and 4). Explain that it is up to the server to require secure communications (today, virtually all servers on the web offer HTTPS exclusively).
As in our book, we suggest using NodeJS to put the knowledge into practice. This Vanilla approach only requires installing NodeJS. An Internet connection is not even necessary.
The review questions and exercises we propose in the chapters of this book can be reused for teaching NSI. The image wall project can also be reused. Here we propose other projects that are easy to adapt to our five-part teaching progression.
The goal of this project is to build a web application for guessing a hidden word. Each turn, the player proposes a letter that should be contained in the word. After five unsuccessful attempts, the player loses.
You can see the result of this project here (in French).
The goal of this project is to build a web application for collaboratively creating an ASCII-art image.
Each user can change one character of an ASCII-art image.
You can see the result of this project here.
The goal of this project is to build a web application for collaboratively creating an image, pixel by pixel.
This project is inspired by Reddit's r/place.
Each user can change one pixel of the image.
You can see the result of this project here.