Syllabus
   本課程主要講義 https://iottalk.vip/6     本班各同學網頁的網址
  * 🅶vm亞歷克羅斯:程式、跨領域、終身學習,是未來成功關鍵
第十三週習題
好消息 .. 慶祝剛過完的母親節, 這週也做一個簡單的靜態網頁就好了..
      關於遊戲的網頁, Games 相關都可,
不必限定 PyGame (Python 寫的 Games):-)
就是說, 在你之前網頁基礎上持續擴充你的"網頁",
加入一新的網頁(Web Page), 這個新網頁放你的 /static/game/ 子目錄下,
但是, 要可以用 你的網址/week13 和 你的網址 /game 連到該網頁 !

對啦, 就是跟之前的 /week08, /week09, 和 /week10, 以及 /week11 都一樣做法,
在你 Python 的 Web 程式碼內用 return redirect( 真正網址 ) 達成轉址,
只是這次要把 /game 和 /week13 都轉到同一個網頁 !

網頁內容呢 ?
也是很簡單啊,
既然網頁內容就是要和遊戲有關, 你可上網找些經驗文或教學文來拼拼湊湊, 當然也是最好是整理一些變成自己寫的文章(不用很多字:-)
或者也可以寫一些自己玩過遊戲的心得(任何遊戲都可)
還有, 也要加入一些連結, 也可以加入圖片, 影片等都可以 !
例如, 以下是教你如何從零開始寫出一個 Python 的遊戲"利用 PyGame 寫 Python 遊戲", 裡面最後有連結到寫好的原始碼 !

說明:
      把該教學網頁最後的連結(連到 Github)的原始碼抓回後,
      解壓縮, 然後進入目錄內執行 python alien_invasion.py
* 如果它說缺什麼套件, 就用 pip install 缺的套件 把該套件抓回安裝即可
* 如果權限不足, 可依據指示最後加 --user 或改用系統管理員執行你的 CMD
      然後再做 pip install 就沒問題了 !




* 關於網頁的基本製作, 只要懂基本的八招左右就可以把網頁弄得有模有樣,
    請點我們課程綱要 iottalk.vip/600 第一週最後一列開頭"簡單網頁設計教學"稍微看看就會了 !
* 建議在看課程綱要(/600)網頁時, 點滑鼠右鍵選"檢視網頁原始碼"看看就可學到基本招式 !!
* 如果你想用工具, 最佳選擇當然是 Adobe 的 DreamWeaver 網頁製作軟體, 進階的也要看這+PHP
    在www.cg.com.tw 教學網頁內有些連結似乎已經沒效, 關於 DreamWeaver 官方教學可以點這
* 另一種簡單做法是利用線上的 HTML 編輯器, 這在我們主要講義 iottalk.vip/6裡面,
    敲 CTRL_F 然後搜尋 HTML, 應該第四次出現 HTML 的地方有提供一個很好用的連結 !


這是我專為不認真的同學寫的歌詞 ! 奇怪的是對每一屆同學都適用 :-)
      我以為我會哭 .. 但是我沒有 .. 我只是呆呆望著我的分數 ..
      想著你給分的殘酷 .. 這何嘗不是一種領悟 !?

改編自辛曉琪唱的"領悟", 總是希望太混的同學在某些時間點可以有一點點"領悟" !
詞曲原作是知名音樂人李宗盛, 他自己也有唱 ! (還是辛曉琪唱的好聽)
不過我覺得他最佳作品應該是和林憶蓮合唱的《當愛已成往事》
可是點閱率卻遠遠落後共匪"冷漠"(和楊小曼)唱的《我愛你勝過你愛我》(八年一千多萬次 vs. 三年四千多萬次)
"冷漠"在2016年演唱《 沒有你陪伴真的好孤單 》獲得十大金曲獎 。
不過, 似乎"夢然"唱的版本比較受歡迎(兩年八千多萬次), 很多人不知道其實這首歌原唱是"冷漠" !
最厲害的則是共匪"大壯"的《我們不一樣》(一年多就破億次) 只有田馥甄的《小幸運》可以跟它比。
點這看其他我以前上傳的影片 :-)
Q: 如何把 youtube 的影片嵌入到網頁內呢?
A:
很簡單啊, 當你在看 youtube 影片時, 點影片右下方的 "分享",
      這時會彈出一個小窗, 如果你只是要複製網址去給 <a href="...用, 點"複製"即可;
      如果要像上面影片這樣, 點 "嵌入", 這時會彈出另一小窗, 點"複製"即可!
      然後把複製到的"<iframe ..."這  HTML 碼放到你網頁內就好了,
      最好在該句代表嵌入影片前後各加一個 <br> 代表換列(換行),
      還有, 建議在影片下方寫一些說明 !
      對了, 不論是複製網址還是複製嵌入影片網頁碼, 都可以勾選指定影片要從幾秒處開始播放 !
      再次提醒, 看網頁時可以按滑鼠右鍵選"檢視網頁原始碼" 偷看別人網頁內容 !
以下是 2019/04/19 上課過程 ...
還原現場 .. ( 04/19 上課過程 )
  ( 可以按滑鼠右鍵檢視網頁原始碼看看網頁內容 )
注意, 用 <font size=8 或 比 8 大的都被看作 7, 如要更大的字必須用 CSS 例如 In Line CSS 的 style="font-size:88px;" 取代 font 的 size= 參數 !
本週的練習題請用之前最後版的網頁(例如 w6.py)來修改, 可以改為 w9.py 或自己喜歡的名稱 !
這次要增加三個網頁, 放在 /static 之下, 但要用轉址方式變方便使用,
注意這裡說的 /static 其實是在我們 Web Root 目錄(這次上課我們用 ggyy 目錄做 Web Root)之下;
在 /static 目錄之下的各子目錄名稱可以自取, 為了方便解說,
以下我在 /static 之下建立三個子目錄: 08, money, 和 wk10 用來放這三個網頁 :
 1.) /week08   轉址到 /static/08/index.html
  說明: 這網頁要放與第八週上課主題有關, 就是和辦公室用的軟體相關的,
    你可以看看 Syllabus 內第八週的各項目, 選一些當 Keyword 搜尋別人寫的教學網頁來整理成自己的網頁!

 2.) /week09   轉址到 /static/money/index.html
  說明: 這網頁要放與第九週上課主題有關, 就是和利用 Google 來賺錢有關的,
    你可以看看 Syllabus 內第九週的各項目, 選一些當 Keyword 搜尋別人寫的教學網頁來整理成自己的網頁!

 3.) /week10   轉址到 /static/wk10/index.html
  說明: 這網頁要放與第十週上課主題有關, 就是和 Web 應用以及網路有關的,
    你可以看看 Syllabus 內第十週的各項目, 選一些當 Keyword 搜尋別人寫的教學網頁來整理成自己的網頁!

以下是上課操作Demo 本週要做的習題之大略過程:
(1)開啟一個 CMD 命令視窗, 建立一個目錄 ggyy 當作網站根目錄 (Web Root)
(2)進入(cd)該 ggyy 目錄, 在 ggyy 目錄內建立 templates 和 static 子目錄備用;
    以前只用到 templates 子目錄, 這次主要是要用到 static 子目錄 !
(3)參考 w3.py 建立一個檔案 w9.py (注意, 做習題則要用你上次的版本來改)
    (上課為了方便, 我只複製 w3.py 內一部份來用)
C:\User\user>mkdir ggyy
C:\User\user>cd ggyy
C:\User\user\ggyy>mkdir templates
C:\User\user\ggyy>mkdir static
C:\User\user\ggyy>copy  con  w9.py                    
from flask import Flask
from flask import render_template
app = Flask(__name__)

@app.route("/")
def webRoot( ):
   return '<font color=Red size=7>Hello World!      這是網站喔 !'

if __name__ == "__main__":
   app.run( '0.0.0.0' , port=33888)   # <== 注意這改用 33888 喔!
^Z           # <== 注意這是敲 CTRL_Z  表示 w9.py 到此結束
C:\User\user\ggyy>python  w9.py                    
(4)執行 python w9.py 後出現錯誤, 說發現說有怪字, 那表示我們檔案的編碼不是 UTF-8
怎辦?
很簡單, 用記事本(notepad) 開啟 w9.py 然後另存新檔, 選擇編碼 UTF-8 存檔即可 !
  (注意看是否存回原檔案喔! 因有時它會改存到 文件(Documents)資料夾內 !!!)
(5)利用 notepad 把 w9.py 的編碼改為 UTF-8 之後, 重新執行 python w9.py
    又說有錯誤 !? 仔細看發現事說缺了 flask
太簡單了, 阿就立馬用 pip install 把 flask 安裝進去囉 ..
C:\User\user\ggyy>pip install flask 
 . . .  (出現安裝 Flask 的信息)
 . . .
. . . C:\User\user\ggyy>python w9.py
(6)可以了ㄟ 
    趕快開瀏覽器打入 127.0.0.1:3388
  奇怪 !? 怎說沒網頁 !?
  仔細看, 靠餐ㄟ.. 發現要打 33888 才對啦
趕快重新打入 127.0.0.1:33888

喔 ! Yeah ! 有網頁了ㄟ !
(7)接下來, 修改 w9.py, 先加入給 /week08 用的:
@app.route("/week08")
@app.route("/week08/")       # 理論上後面有 / 和沒 / 該一樣, 但 Flask 似乎有 Bug
def webPage_08( ):
   return redirect "/static/08/index.html"

### 注意要加入在 w9.py 中間, 不要加到最後喔 !
(8)到 CMD 命令窗敲 CTRL_C 砍死 python 併重新執行 python w9.py
又出現錯誤, 說 return redirect 那句有錯 !?
(9)上網問 Google, 查詢 python + flask + redirect 找範例
發現原來我們少了刮號 ( ), 趕快修改並存檔重新執行
   return redirect("/static/08/index.html")
(10)重新執行 python w9.py 發現又有錯, 說不認識 redirect
這也簡單, 要在 w9.py 檔案內很前面處加入以下這句即可:
from flask import redirect
(11)改好 w9.py 後重新執行 python w9.py
喔 ! Yeah ! 成功執行了,趕快測試網頁 !
(12)先測原先的網頁, 用瀏覽器打入 127.0.0.1
奇怪, 怎沒出現網頁 !?
  仔細看, 發現漏掉了 :33888 啦 ! 重新打入 127.0.0.1:33888
果然好了, 又出現網頁了, 接著來測試 /week08
(13)改打入 127.0.0.1:33888/week08
出現 404 錯誤說找不到網頁ㄟ !?   這是因為我們還沒建立檔案 /static/08/index.html
    注意瀏覽器的網址列, 有沒發現變了 !?
    變成
127.0.0.1:33888/static/08/index.html

    所以, 知道 redirect 的功用了吧, 就是轉址啦 ! 幹嘛要轉址 !?
    廢話, 當然是讓使用者不必打那麼長的網址啊 !

(14)趕快在 ggyy/static/08/ 這子目錄下建立一個網頁 index.html 即可,
    要注意, 檔案編碼也要選 UTF-8
你可以把 w9.py 複製到 static/08/index.html 然後再修改其內容,
因為剛剛 w9.py 已經改為 UTF-8, 複製過去當然還是 UTF-8
先把該 static/08/index.html 內容改為簡單如下:
<html>
<font color=red style="font-size:68px;">這是 Week08 
關於辦公室軟體
</font>
<hr style="border-top: 2px solid blue;">
<font color=blue size=6>
<a target=_blank href="http://www.nthu.edu.tw">點這會連到清華大學</a>
</font>
<br>
<img src="abc.jpg">

(15)把 ggyy/static/08/index.html 存檔之後, 回到網頁 127.0.0.1:33888/week08
  按 F5 刷新網頁
喔 ! Yeah ! 有網頁了ㄟ  !
但怎網頁中有個怪怪的圖 !?

因為在 ggyy/static/08/ 子目錄下沒有 abc.jpg 啊 !?
到網路上用 google 找一張林志玲的圖片另存新檔選擇存到該子目錄且黨名指定 abc.jpg
再測試看看, 真的有林志玲了喔 !
*好了, 其他 /week09 和 /week10 也可以依樣畫葫蘆做出來 !
      只是要注意, 三個網頁要各自與該週上課主題相關 !
      原則上就自己蒐尋相關網頁來略作整理成自己的網頁,
      在自己的網頁內必要時讓讀者可以點了連過去原先你找來參考的網頁看更詳細內容 !
*至於網頁相關語法, 其實只要懂大約七句左右就很夠用了,
    請 點這裡看 簡單網頁設計教學 by tsaiwn@cs.nctu.edu.tw(在 Syllabus 的第一週就給過了)
  (先仔細看過該簡單教學, 其他的就偶爾用滑鼠右鍵點選檢視網頁原始碼 偷看別人網頁 !)
  或是在我們主要講義內也列了很多可學習網頁製作的連結

Q: 如果希望網址列打 /money 和 打 /week09 有相同效果那要如何改 w9.py ?
    就是說, 希望 127.0.0.1:33888/money 和 打 127.0.0.1:33888/week09 相同 !
  Hint: 很簡單, 只要加入一列喔 ! (若考慮最後可能打斜線 / 則再多加入一列 !)


Google 有 GMail, GoogleDrive, Googol Doc, 到底還有哪些服務 ?
G Suite @交大 Suite 讀音
👍 GmailGoogle CalendarGoogle 雲端硬碟Google form表單:報名表問卷調查..  Keep Evernote 愛上keep
      以及可多人共同編輯的Google 文件(Word)、Google試算表(Excel)、Google簡報..

      Google+ (這有人用嗎??)
👍 縮址的Goo.GL(到2019/03/30)ReURL.cc(這項不是 Google 的)
👍 keep iOS   keep Android
 
G Suite vs Gmail Comparison Chart

國立交通大學G Suite 及 o365 帳號申請系統

您的身分為: 教職員

您的G Suite帳號為 tsaiwn@nctu.edu.tw

您的o365帳號為 tsaiwn@o365.nctu.edu.tw

Google G Suite Login       MicroSoft MS o365 Login
The Benefits of G Suite...

🙎 👦 本班各同學網頁的網址(開新窗)

🌐 本課程主要講義 https://iottalk.vip/6 (蓋掉此頁)
    e3new 新 E3 ;   NCTU Portal 交大入口網站            

週六和週日也可以使用 iottalk.club

* 🅶vm亞歷克羅斯:程式、跨領域、終身學習,是未來成功關鍵