Syllabus
本課程主要講義 https://iottalk.vip/6
本班各同學網頁的網址
* 🅶vm亞歷克羅斯：程式、跨領域、終身學習，是未來成功關鍵
第十四週習題
好消息 ..
這週也是做一個簡單的靜態網頁就好了..
關於分組報告相關的網頁, 不限制是否與我們課程相關,
必須由組長到 新 e3 規定的討論群內發文寫題目簡介與組員分工 !
就是說, 在你之前網頁基礎上持續擴充你的"網頁",
加入一新的網頁(Web Page),
這個新網頁放你的 /static/topic/ 子目錄下,
但是, 要可以用 你的網址/week14 和 你的網址 /topic 連到該網頁 !
對啦, 就是跟之前的 /week08, /week09, 和 /week10, 以及 /week11, .. 都一樣做法,
在你 Python 的 Web 程式碼內用 return redirect( 真正網址 ) 達成轉址,
只是這次要把 /topic 和 /week14 都轉到同一個網頁 !
|
網頁內容呢 ?
當然要跟你門組想報告的主題相關啊,
你可上網找些和你們組題目相湍的文章來大略摘要, 最好加以整理方便分組報告用,
還有,
當然要放找來文章的連結方便參考 !
題目呢 ?
目前為止只看到兩組貼文 ！？
以下我列一些題目給大家參考, 可直接用, 先搶先贏 (以先在新 E3 貼文為準)
＊ 探討諾基亞手機、Motorola 手機、和黑苺機的沒落。
＊ 探討無名小站由盛轉衰到關站 以及 Pixnet痞客邦苦熬出頭。
＊ 從Google說的興趣可以當飯吃看超級Youtuber
＊ 從 Uber、AirBnB 到共享辦公室的賺錢思維。
＊ 臉書為何打敗了MySpace？
＊ AIoT -- 我們這組對 AI 與 IoT 的認識
＊ 第三波網路新創浪潮
＊ 知識與常識：稀土竟然和電腦以及通信有關
＊ 關於網頁的基本製作, 只要懂基本的八招左右就可以把網頁弄得有模有樣,
請點我們課程綱要 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 ..."這 ＨＴＭＬ 碼放到你網頁內就好了,
最好在該句代表嵌入影片前後各加一個 <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 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...
|
|