The Lecturer (1)

1. Dr Steven Halim
2. Office: COM2-03-37
   Office phone: 6516 7361
   Office hour: 10.00am-5.00pm,
   not working on weekend :O
   Email: stevenhalim (gmail)
3. V? strong in programming:
   NUS ACM ICPC head coach (2008-present)
   ACM ICPC Singapore Director (2015, 2018-soon)
   Singapore IOI team leader (2009-present)
   Singapore IOI 2020 Deputy Chairman

The Lecturer (2)

4. Build his first (static) webpage since 2000
5. Currently best known as the owner of VisuAlgo
   (currently over ~3000 hits per day =)
6. Continuously learning various recent web programming techniques

The Lab Teaching Assistants (1)

3/4 lab groups (~15 students/group)
Steven + 1/2 Lab TAs

1. Steven himself
   Lab Group 1, Mon, 10am-12pm

The Lab Teaching Assistants (2)

2. Qua Zi Xian
   Took Steven's CS2010/R, CS3233,
   CS3226, CS4234 (17 MCs so far)
   Lab Group 2, Mon, 12-2pm

The Lab Teaching Assistants (3)

3. Tan Mun Aw
   Took Steven's CP3101B
   Lab Group 3, Mon, 2-4pm
   

Lab Group 4, Mon, 4-6pm is closed

Credits

The course material was first created by Arnold Rosenbloom, a visiting lecturer from University of Toronto, Canada who taught the first edition of CP3101B in NUS on Jan-Apr 2014

CP3101B was the old module code of CS3226

The current set of lecture note has been updated three times in Jan-Apr 2015/2016/and now 2017, thus they are now more up-to-date than the forked Arnold's 2014 version

Why do
web programming
(development)?

1. It is (the) current trend

2. More apps are web-dependent

1. Google (+other search engines),
2. Gmail (+other email servers),
3. Facebook (+other social networks),
4. Amazon (+other e-commerce sites),
5. Dropbox (+other cloud services),
6. Grab/Uber/Go-Jek (+other transportation apps),
7. NUS IVLE and CORS ,
8. ... and this list grows everyday

What is common in no 1-5 of the list above?
Answer

3. Hassle-Free*

*Terms and Conditions apply

1. No installation*
2. Automatic software update*
3. 24/7 availability*

4. It Uses Industry Standards

Some* web programming components have well-established standards, e.g. HTTP, HTML5, CSS3, JS (ECMAScript-262)

5. Many of Them are Free* :)

So how the developers survive?
Answer

Any drawbacks
of web application?

Unfortunately yes :(...

Some of the drawbacks are...

1. Your web application is generally slower

2. The offline counterparts* are still stronger :O

e.g. The functionalities of Google Slides or this reveal.js are still limited compared to the more established Microsoft PowerPoint

3. Web-apps are more prone to various security attacks

DoS, SQL injection, Clickjacking, stolen passwords,
you name it...

4. Harder to guard intellectual property

It is (very) easy* to look at the "source code"
of the (client-side) web applications

For example, if you want to know how to do this kind of web-based presentation (and replicate it), simply right click this page and click 'View page source'

5. Some tasks become harder

For example, currently a web application (e.g. a web-based image editing software) is not allowed to directly access the host's file system for security reasons

Therefore, the user has to explicitly upload their file(s) to the web server to allow the file(s) to be accessible by the web application

Is learning
web programming
easy?

Unfortunately...
There are some challenges...

1. Too many things to learn...

Other than the current standards of HTML5, CSS3, JS, and a few more, there are many other web technologies out there, each with their own strengths and weaknesses, and this number increases daily, especially the rate of 'new frameworks' appearing here and there...

PS: And once someone is 'imprinted' towards a certain framework (a certain technology stack), it will be super hard to try other framework (technology stack)...

2. It is a moving target...

What is "new" today (e.g. HTML5, CSS3, jQuery 3.1.1, Bootstrap 3.3.7, Laravel 5.3) may be outdated as soon* as this course is over...

We need the ability to learn, relearn, unlearn...

3. More things to be considered...

Compared to offline apps, we have to also consider:

1. UI/UX design
2. Scalability (one versus many users)
3. Various web security issues
4. Registering proper domain names
5. Cross/old browser compatibility
6. Etc

4. Hard to master...

Can your web app generates the intended traffic?

Why don't we just
outsource?

Why don't we just outsource?

Answer

Why don't we just
use template?

WordPress, Joomla, WiX, Strikingly, Squarespace, etc

Course Administration

Registration

Via MPE or via CORS
for any :O NUS students who have passed CS1020

Quota: 60 students
It was 57 and 57 in the last two years...
Most likely it is 50 in Sem2 2016/2017

Classes

1. Lectures: Every Tuesday, 10am-12pm @ VCRm
2. There is no tutorial session
3. Lab session: Every Monday, 10am-12pm, 12-2pm, 2-4pm, or 4-6pm @ COM1-B111

Details at CS3226 Lesson Plan

Capstone Project

Details in CS3226 Capstone Project section

The idea is to reserve the last 5 weeks of this course for students to do one medium-sized web programming project in a team setting of 5-6 students with mixed strengths

The capstone projects of CS3226 will be presented to public on the 10th STePS on Wednesday, 12 April 2017 (Week 13)

Textbook?

There is no specific textbook for this course, GIYF*
But you can check these NUS Libraries (or NLB) books:

1. Dynamic Web Programming and HTML5,
   Paul S. Wang
2. Programming the World Wide Web (8th ed),
   Robert W. Sebesta
3. Internet and world wide web : how to program,
   Paul Deitel, Harvey Deitel, Abbey Deitel
4. Various JavaScript, jQuery, or jQuery UI textbooks
5. Maybe PHP and/or MySQL textbooks

Printing this Lecture Note

You don't have to print these lecture notes (now) as I may update some (minor) parts of it on the spot... :O

But if you are an old-school type, see reveal.js documentation for an easy way to print this lecture note :)

It is best to wait until Theoretical Test on Week11
(open book) before you print these notes

Weightage...

The weightage of various course assessments:

1. Capstone project (team): 41%
   (using updated "Google PageRank" algorithm),
2. Theoretical Test: 30%
   (written, individual, test everything, Week11),
3. Lab small deliverables: 6x4 = 24%
   (online, subgroups of 2-3 students per lab group),
4. Lab TA subjective score (individual): 5%
   (integer 0-missing, 1/2-silent, 3-the average, or 4/5-active)

Still Not for this semester :O...

Steven has NOT learned these yet (as of early January 2017):

1. Various JavaScript libraries other than Vanilla JS and jQuery, e.g. Node.js, AngularJS, etc...
2. Various outdated technologies, e.g. Flash, etc...
3. Various Server-side technologies other than PHP, e.g. Node.js, ASP(.NET), JSP, Python, Ruby, etc...
4. Various Database Management systems other than MySQL, e.g. PostgreSQL, NoSQL like MongoDB, etc...
5. Various Web frameworks other than Bootstrap and Laravel, e.g. Ruby on Rails, Django, CodeIgniter, etc...
6. Various Website templates: Wordpress, Joomla, Wix, etc...