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

Page: http://sls.weco.net/s19-webfund   

Facebook  Group (WECO – Web Fundamentals):  https://www.facebook.com/groups/137944869554367/

SLS Group:  http://sls.weco.net/course/webfund

YouTube Playlist:  http://www.youtube.com/playlist?list=PL7C5F0371E315B7D3

輔仁大學開放式課程 http://ocw.fju.edu.tw/course/view.php?id=117

Collaborative Note:  http://sls.weco.net/CollectiveNote20/WebFund

Grade Enquiries (TronClass): http://www.elearn2.fju.edu.tw/


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: Mon/Tue 10:10a-Noon, Thur 1:40-3:30p, or by appointment

TA: 歐育綺 jilljill860524@weco.net  陳筱雯 anny86023@weco.net  (SF638)

Office Hour of TA: Tue 10:10a - Noon



    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%


TaiwanLIFE 臺灣全民學習平臺  http://taiwanlife.org/admin/tool/mooccourse/allcourses.php?method=0&search=&schoolid=11&categoryid=8&filter=0

MOOCS1 - 穿戴物聯應用與技術入門(2019春季班) 2019/02/25 ~ 2019/04/07   6週=>9週 (2019/04/28)

MOOCS2 - Web/APP 物聯技術(2019春季班) 2019/03/04 ~ 2019/04/7   5週=>8週 (2019/04/28)

MOOCS3 - 智慧物聯雲端技術( 2019春季班) 2019/04/08 ~ 2019/05/26  7週=>9週 (2019/06/16)



https://www.freecodecamp.com/ React (5 hours)  D3 (5 hours) Node.js and Express.js (20 hours)

https://www.codecademy.com/ Learn ReactJS



Laboratory Assignment (Individual):

Lab1: 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.

Lab2: 建立 Github, FreeCodeCamp, Codecademy, TaiwanLife 帳號, 完成 Git tutorial on CodeAcademy,  HTML5 and CSS tutorial on FreeCodeCamp

Lab3: 建立 Personal page on Github : 使用 pure HTML and CSS

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
2/18 Syllabus, SLS, Gartner+Web2.0       HW0 Due
(MOOCS1   主題 2, 單元 0,1)   https://ithelp.ithome.com.tw/articles/10201461
2/25 NW+HTTP ​

(MOOCS1 主題 5, 單元1, 3)    https://ithelp.ithome.com.tw/articles/10202031


3/4 HTML, CSS  (w3schools)               Lab1 Due (HTTP analysis)
(MOOCS2 主題 2, 單元1, 2)   https://ithelp.ithome.com.tw/articles/10202076
3/11 JavaScript, JSON, DOM and event  (完成分組)
Lab2 Due (Git-Codecademy, HTML5/CSS-FreeCodeCamp)
(MOOCS2 主題 2, 單元3, 4)  https://ithelp.ithome.com.tw/articles/10202082
3/17 AJAX (Chap15, w3schools)    Lab3 Due (Personal Page on Github Page)
(MOOCS2 主題 3, 單元1)    https://ithelp.ithome.com.tw/articles/10202084
3/25 HTML5 (slides, w3schools, html5rocks)
(MOOCS2 主題 3, 單元2)    https://ithelp.ithome.com.tw/articles/10202141
4/1 Off  (FJU Spring Break)
4/8 jQuery (slides, w3schools)  Quiz 1,  
Lab4 Due (JSON/AJAX/jQuery-FreeCodeCamp, Github Page)
(MOOCS2 主題 3, 單元3)    https://ithelp.ithome.com.tw/articles/10202141
4/15 Midterm Exam                       Project Proposal (by Team) Due on SLS
4/22 Web APP (Progress Web APP)     Lab5 Due (Progressive Web APP)
(MOOCS2 主題 4)  https://ithelp.ithome.com.tw/articles/10202143
4/29 Web API, OAuth
(MOOCS3 主題 2)   https://ithelp.ithome.com.tw/articles/10202171
5/6 PHP
5/13 SQL/NoSQL/Firebase                 Lab6 Due (PHP-Codecademy)
5/20 XML, DTD (Chap 14, w3schools) Schema, XPath, XSLT (Chap 14)      Lab7/8 Due (PHP+SQL)
5/27 Project Demo and Oral Presentation Quiz 2
6/3 Project Demo and Oral Presentation
6/10 Project Demo and Oral Presentation
6/17 Final Exam                Written Project (by Team) Due on SLS