Web基本原理與技術 Web Fundamentals (FJU-CSIE-Spring 2018)


Class Time: Mon 1:40 – 4 :30p     Location: SF234

Instructor: Dr. Hsing Mei              Office: SF625
Email: mei@csie.fju.edu.tw           Phone: 29053704
Office Hour: Tue/Thur 1:40-4:30p, or by appointment

TA: 胡翔喻 kevinhu@weco.net   陳玟君 ukaze@weco.net   (SF638)
Office Hour of TA: Wed 3:40-5:30p



    The objective of this course is to study the fundamental protocol and development techniques of World Wide Web. This course introduces both browser-side and server-side issues and techniques. It is designed to provide a foundation for subsequent network software courses.


  • Class Participation: 4% + Bonus (共同筆記)
  • Lab Assignment: 36% (6 x 6%) + 2 Bonus Lab
  • Quiz: 10% (2x5%)
  • Term Project: 20%
  • Midterm Exam: 15%
  • Final Exam: 15%


Text Book:

Internet and World Wide Web How to Program, 5th Ed., by Dietel, Dietel & Niieto, Prentice Hall, 2011, ISBN: 978-0131752429.
http://www.deitel.com/Books/InternetWebScripting/InternetWorldWideWebHowtoProgram5e/tabid/3629/Default.aspx (register and download example code)




Laboratory Assignment (Individual):
  • Lab1: 建立 Github, FreeCoideCamp, Codecademy, TaiwanLife 帳號, 完成 Git tutorial on CodeAcademy, HTML5 and CSS tutorial onFreeCodeCamp
  • Lab2: 建立 Personal page on Github : 使用 pure HTML and CSS
  • Lab3: HTTP analysis with Wireshark + Client content analysis with Browser tool/plugins
  1. Use Wireshark to capture HTTP messages, including GET, POST, Set-Cookie, and Cookie header. Your report should contain the target URLs, captured messages, and anything you learned from this lab.
  2. Use Browser tool/plugin to analyze the web page content. Your report should contain the HTML. CSS, Javascript.  Post your lab report on SLS personal blog, and the link on FB course group.
  • Lab4: jQuery Lab, 完成 JSON APIs /Ajax / jQuery tutorial on FreeCodeCamp, 在 Github personal page 上擴增 jQuery 功能
  • Lab5: Google PWA (Progressive Web APP)
  • Lab6: PHP Labs on Codeacademy
  • Lab7: Google/Facebook API
  • Lab8 (Bonus): PHP+SQL/Firebase (Configuration/development)


Term Report (Team of 4):
  1. Design and develop a web-based system with RIA client (with HTML5) and PHP (SQL for bonus).  You are free to choose any application domain.
  2. Written project proposal due midterm exam week on SLS Collaborated Notes.
  3. Team Leader is responsible for ALL post on SLS.
  4. ALL member should participate the final demo and presentation.
  5. Cross Grading
  • Intra-team effort: 70% Team grade, 30% Individual grade
  • Inter-team grade: Due after each demo/oral presentation class



    本課程強調自主學習, 合作學習, 與課程參與.  課程大量使用網路服務, 網路參與內容的發表請注意智慧財產權相關規定, 有關課程使用宅學習Social Learning Space (SLS), 投影片下載, 上課錄影(YouTube), 社交網路(Facebook)等網路應用, 及相關群組/頻道/社群的使用介紹與規範等, 請詳閱第一次上課發下的書面注意事項與 Homework 0. 除非有不可抗拒的原因, 本課程

  1. 第一次上課遲到或未到,  未選課者請勿加選.  已選課而未退選者, 以缺席一次計. 
  2. 考試無補考. 放棄評量配分中任一項 , 學期總成績以不及格計.
  3. 點名遲到或未到, 可看完課程錄影後於宅學習發表心得, 再至 Facebook課程社群補點名, 若出席未及點名次數之1/2, 則期末考扣考, 學期總成績以不及格計.
  4. 課堂中想睡覺者, 請自行出教室清醒, 趴下睡覺者, 以點名缺席計.
  5. 課堂發生任何影響上課秩序行為(e.g. 交談, 電動, ...), 將請短時間站立, 不願站立者, 以點名缺席計.


Lecture Topic and Schedule:
Date Course Content Video
2/26 Syllabus, SLS, HW0 Due


3/05 Off


3/12 HTML, CSS (w3schools)Lab1 Due (Git-CodeAcademy, HTML5/CSS-FreeCodeCamp)​


3/19 JavaScript, JSON, DOM and event (完成分組), Lab2 Due (Personal Page on Github Page)


3/26 Ajax (Chap15, w3schools)


4/02 FJU Off, NW+HTTP (MOOCS 主題 5, 單元1, 3), Lab3 Due (HTTP analysis)


4/09 HTML5  (slides, w3schools, html5rocks)


4/16 jQuery (slides, w3shools)Quiz 1, Lab4 Due (JSON/AJAX/jQuery-FreeCodeCamp, Github Page)


4/23 Midterm Exam, Project Proposal (by Team) Due on SLS​


4/30 Web APP (Progress Web APP), Lab5 Due (Progressive Web APP)​



Web API, OAuth, PHP (Chap 23)


5/14 SQL/NoSQL/Firebase (Chap 22)Lab6 Due (PHP-CodeAcademy)


5/21 XML, DTD (Chap 14, w3schools) Schema, XPath, XSLT (Chap 14)Lab7/8 Due (PHP+SQL)


5/28 Project Demo and Oral Presentation, Quiz 2


6/04 Project Demo and Oral Presentation 


6/11 Project Demo and Oral Presentation


6/18 端午 Off


6/25 Final Exam, Written Project (by Team) Due on SLS