INF203 - Web Technologies

Pedagogic objectives

The purpose of this course is to familiarize students with the Web development techniques. There are courses on formats and essential tools, graded implementation labs and course of “culture” on the advanced web dev.

At the end of the course, students will:

• have used formats (HTML, CSS, JS) and common tools (node.js, serveur HTTP) of the web in labs
• know the basics of formats and common tools on the web
• understand the complexity of common features: forms, chat, upload, REST APIs
• have been exposed to notions of crawling, web security and trends in rapid development libraries for the web.

Evaluation

Labs include implementation of formats and basic tools, and are almost automatically graded.

A quizz evaluates the learning in “culture” courses. You have to connect to the course on ecampus to have access to the quiz.

Prerequisites

This course was initially built for second year students of Telecom Paris. In the first year of TP, students come with foreknowledge of python and learn OO programming in Java, then C, etc. My JS course teaches elements in comparison with other already known elements from Java & C.

This course is now included in other syllabi where students may be new to programming.

If you are new to programming, here are some resources for you:

• Scrimba JS beginner course in English (actually in American), very practical. This is rated for 2 hours so it is an introduction to make my JS course accessible.
• OpenClassRooms JS beginner course in French and there is an English version available. This is rated for 15 hours so it covers more than half of my JS course. After their part 1, you may try to reconnect with my JS course.

If you find the above resources difficult still, try the OpenClassRooms Introduction to Computers in French, rated for 4 hours, and there is an American version

And then you need some tools on your computer to be able to follow the labs.

Slides

by JC Dufourd, JC Moissinac, C Concolato, P Sennelart: 02/2020

• Introduction:
  • TH1/2: Internet and the Web
• JavaScript:
  • TH3: JavaScript (outside of browsers) (also see Extras)
  • TH7: JavaScript in Browsers
• Formats:
  • TH5/6:HTML, CSS, SVG
• TH9: Server-side technologies, Client-server Architecture
• TH11a: Processing and exchanging data on the Web
• TH11b: Web and Security considerations
• TH13: Frameworks: React+Redux, Bootstrap, Angular…

Access to videos with this local playlist for French and with this other playlist for English

Labs

• Extra: Lab overview, everything you need to know about the labs to make it easier for you
• TH4: JavaScript basics
• TH8: HTML and CSS
• TH10: JavaScript AJAX
• TH12: Simple Server
• TH14: Web Application
• TH15: REST Server
• TH16: Discovery of WebSockets

Automatic grading of the labs is available on this server or by using the file drop zone at the end of each lab text.

Extras

These are subjects that I wanted to provide deeper coverage for:

• Async: Asynchronous code in JS
• Closures: Closures
• Debug: Debugging JS
• OOP: Object oriented programming in JS

The videos are part of this local playlist in French and of this other playlist for English