網頁設計的發展/檢視自己的設計/有沒有/走在時代的尖端

簡單的設計 : 純文字模式
於 1990/12/20 誕生，1991/8/6 對外開放

Flash - 互動網頁的始祖 // 幾乎沒在用 //
用於製作網站動畫
但 隨著 HTML5 、CSS 、Javascript 技術的成熟，且 Flash 非開放資源,占用系統大量資源,並具有網安漏洞問題，Flash 逐漸淡出市場 。

表格切版 - 高相容性編排方式
Firefox瀏覽器的相容性問題 ，而表格的相容性相對瀏覽器是好的，且易於製作。
版面的切版及編排仰賴於 table。
But，Only 在表格內的可以編排，表格外則管不到。

div + CSS + JS - 丸子三兄弟 突破版面界線
<div> 是 html 的標籤元素，取代表格切版
搭配 CSS 讓版面嚇嚇叫 。打破 版面界線的限制。
[分享]

RWD 響應式網頁設計
當電腦不再是 唯一上網工具，而手機用戶也越來越多，人手一機。
各大行銷網站如何吸引消費者目光，進而點進去瀏覽購物，網站的操作 是否順暢，能否提升訂單，而發展出RWD。
HTML5 - 全新技術
添加新語法，以符合當代網頁瀏覽需求，ex: <vidwo> <audio>

初次見面

與 網頁設計的美麗邂逅於還沒入學CS前的某一天。
而 入學前，學校就會寄新生包裹來，有一些 建議書單，或是學習網站。
而那年暑假，就開啟找書，逛網站學習的充實之旅。依稀記得 有借一本 厚厚的Java 書，其實那時的我，看都看不懂...
阿逛網站 w3scool 這個網站的學習資源充足詳細 。適合初學者，也適合老手查語法時用。終於有我會的 :開一個 記事本，寫個 Hello World ! ，存成 .html 檔，這就是我的第一個網頁啦 ~~~
雖然很簡單 ，但那時的我好開心 ，可謂 簡單的美好。
對應於網路設計的發展，非常 old style ...，但總是先從基礎開始，之後就會架輕就熟。

其實阿其實 還有更簡易的方式 可以開啟第一次的程式設計(跟網頁有關喔)
Step1 : 開發(執行)平台
打開 Browser 按一下 F12

欸嘿! 就是那麼容易，不用額外存檔，不用安裝什麼IDE。
Step2 : 輸入/輸出
其實不管是什麼程式語言，一開始要碰的 的functions 就跟 輸入輸出有關。
沒有輸入輸出 ，其實就不知道發生什麼事... 所以也常用來 除Bugs 。
這裡 使用 prompt + alert 。
prompt : Input
alert : Output


輸入完 名字後，按下確認，輸入的名字就會再 prompt() 下一行呈現

會跳出視窗顯示 alert 填入的字串

alert + prompt

alert("加總結果為：" + (+prompt("被加數:") + +prompt("加數:")))

[解析]

再稍微改一下 : (把+去掉)

alert("加總結果為：" + (prompt("被加數:") + prompt("加數:")))

result :

小彩蛋

console 除了可以來寫程式，除Bug，還可以 藏驚喜!!!
click me: v2.0

Inspired by

阿滴全科補習班

「活」的網站 之定時(每1秒)限制次數(500次)刷新網頁

為什麼網站要更新
如何自動刷新網頁 (BJ4)

import time
from selenium import webdriver

driver = webdriver.Firefox()
driver.get('https://ithelp.ithome.com.tw/2020ironman?sc=nav')

time.sleep(3)
count = 500
while True:
    if count == 0:
        break
    driver.refresh()
    time.sleep(1)
    count = count - 1
    number = 500 - count  
    print('刷新頁面次數: ',number)
driver.close()

Related Work

**做一個白駭客 不做個黑駭客 別耍壞**
網站安全漏洞 可在 F12 or 檢視網頁原始碼 找得到 // 根目錄搜索

• 登入的帳密
• 驗證碼
• 憑證

使用這個方式 (Open F12 and Check Something)， 除了可以看出可能的漏洞，也可以檢視自己的網站有沒有安全

爬蟲 鎖定target資料
做個 好crawler 不要癱瘓target網站，不然有可能被鎖IP