四資迎新網站技術文

細數那些你看不到的細節

Tomy Hsieh
Sep 1, 2018 · 6 min read

前言

學術組應該可以說是我最早加入的一個組
其實也比較符合我原本給我自己定位的角色
後來因為純學術太無聊 結果搞到莫名其妙把學術跟活動全部喇在一起的部分
我就不贅述了
但其實這也是有考量的
下面會再各個提到


首頁

如果有人 (?) 有仔細觀察我們的報名網站
應該不難發現 首頁的架構和其他地方都有極大的差距
嗯 因為那不是我做的 跟我習慣用的framework也不一樣
(他用的是W3 CSS 我習慣的是Bootstrap)
可是今天有東西要修改的時候 大改又太花時間了
所以就…… 只好一個晚上速成了xDDDDDD
學完才發現 這framework真的是他媽在瞎七八亂搞
還好我從一開始沒跳錯坑

但還是有學到一些好東西
原本做這個網站的人使用了font awesome
基本上就是當你需要任何icon的時候不用自己找 自己拉
你只要直接搜尋他們畫好的icon 然後import之後在需要的地方
比方說只要這一行

<i class="fal fa-user-astronaut" style="color: #339af0;"></i>

噠啦 你就得到了這麼一個可愛的小太空人xDDDD
可是如果在同一行裡面插入超過一個icon
中間可能會出現短橫線 這個到現在還是令我匪夷所思
但看在這是免費的份上 我就不計較了

行事曆的按鈕

在眾多我後續加入的功能中
最酷的功能大概就是這個了
先講簡單的
Google行事曆基本上就是按照parameter打的超長open links
(電腦開網頁 手機如果有app開app 沒app開網頁)

http://www.google.com/calendar/event?
action=TEMPLATE&amp;
dates=20180820/20180824&amp;
text=四資迎新 - 《無限資戰》&amp;
location=元智大學, 320台灣桃園市中壢區遠東路135號&amp;
details=報名費用:3900元
繳費截止日:8/18(六)
集合入宿時間 :
早上9:30 ~ 下午01:00
@男女二宿舍一樓廣場
https://fb.me/YZUCICamp2018

最後這坨東西通通URL Encode之後丟`<a>`的`href`
最終成品成長這樣

真正麻煩的是Mac/iOS手機的行事曆
首先 你得要自己先用Mac的行事曆建立這個行程
輸出成ics檔 然後放到server變成一個可以下載的檔案
重點來了 關於這個 下載的部分嘛
iOS Safari會阻擋未宣告MIME的檔案被開啟
所以以apache server為例 就要在`.htaccess`特別加上

AddType text/calendar ics icz

這樣當server接收到使用者request的時候
會檢查到這個request正在嘗試下載一個附檔為ics的檔案
然後在response header裡自動加上`text/calendar`的MIME
Safari才會放行打開這個檔案


報名網頁

小插曲一下
當初指考放榜隔天
不知道是哪個奇葩 公佈了明明還在施工中的網站
於是乎就有小87半夜不睡覺 急著想要報名
結果報名失敗還來密粉專
說沒辦法報名 真是太可愛了(〃∀〃)
然後呢 在這十萬火急的情況下
我大學術組就在天亮前生出了這麼一個報名網頁
功能我下面一個一個講

Mobile-First Responsive Web Page

這個網頁呢 根據學術組精密的估算
大概會有87%的使用者透過手機造訪這個網頁
所以我們使用了Bootstrap的framework
讓畫面在不管哪一種平台的手機上看起來都很舒服
大家可以試試看在電腦上開報名的網頁
當瀏覽器視窗的寬度逐漸減少的時候
不同的欄位會自動調整成適合當下狀況的排版
也會儘量確保使用者使用手機報名時
能獲得跟用電腦報名一樣舒服的體驗

防呆

這個網頁上的每一格欄位都有防呆
從最簡單的RegExp到身分證字號驗證
其中最智障的就是這個身分證字號驗證
上面說了 我們的工時有限
於是我就隨便google了一串code就貼上去用了
結果他馬的 google搜尋點閱最高的那一串code居然還有bug
才報名第3個人就出現問題
難怪台灣人只能當碼農 (誤

選項提示

我們在各選項下面加了提示
比方說學號查詢、衣服尺寸表
話說這個衣服尺寸表嘛 雖然modal box看起來很高級
但其實是Bootstrap內建的components
幾乎不用什麼特別設定就可以用了

預設選項自動消失的select

原本還有一個我自己覺得滿酷的功能
就是select在被啟動之後
預設的那一格會自動消失
避免使用者再回去選預設的選項
但是後來實驗發現 在不同平台的手機上操作時
可能會發生選4但是變3的問題
而且如果使用者快速的跳過了一堆select欄位
那這些select會自動選取第一格 而且不會被防呆挑出來
很容易在未經確認的情況下誤送錯誤的資料
所以考量到整體的使用者體驗 這個功能最後被拿掉了

自動調整大小的textarea

然後還有最下方的其他訊息
這一格我覺得還蠻可惜的
因為大部分情況下用不到
它看起來只是一般的text input
但其實我是把他做成textarea
然後再另外套了一個黑魔法:jquery.ns-autogrow
讓他可以隨著內容的多寡自動長高或縮小
這邊科普一下
根據bootstrap guideline
如果你希望對你的網頁有多一點主控權
那就他X的不要讓使用者可以橫向調整textarea的大小
不然有高達87%的機率 你的畫面會爆炸
所以不管你網站的framework是什麼
這點都應該特別小心處理

最重要的部分:彩蛋

最重要的來了 因為每一格都有防呆
所以就算select的option被改value
我們的防呆也會擋下來
除了 飲食習慣這一格
我們多留了一個隱藏選項:
「麥當勞歡樂送」
原本的打算是 如果有小學員使用了這個選項
我們會真的去訂一份麥當勞回來
但這個功能後來還是只能留給學術組在課堂中拿來說嘴
真是太可惜了

    Tomy Hsieh

    Written by

    YZU Sophomore: fork me on GitHub @tomy0000000

    Welcome to a place where words matter. On Medium, smart voices and original ideas take center stage - with no ads in sight. Watch
    Follow all the topics you care about, and we’ll deliver the best stories for you to your homepage and inbox. Explore
    Get unlimited access to the best stories on Medium — and support writers while you’re at it. Just $5/month. Upgrade