2018 元智四資迎新網站

前言 #

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

🏠 首頁 #

如果有人 (?) 有仔細觀察我們的報名網站，應該不難發現首頁的架構和其他地方都有極大的差距。

嗯因為那不是我做的，跟我習慣用的框架也不一樣（他用的是 W3 CSS 我習慣的是 Bootstrap ）。

可是今天有東西要修改的時候，大改又太花時間了。所以就只能…一個晚上速成惹。

但還是有學到一些好東西。

🏵️ Font Awesome #

原本做這個網站的人使用了 Font Awesome。基本上就是當你需要任何 icon 的時候不用自己找、自己拉。你只要直接搜尋他們畫好的 icon 然後 import 之後在需要的地方。比方說只要這一行：

<i class="fal fa-user-astronaut"></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 為例，就要在 .htaccess 特別加上

AddType text/calendar ics icz

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

✅ 報名網頁 #

小插曲一下：當初指考放榜隔天，不知道是哪個奇葩公佈了明明還在施工中的網站。於是乎就有小87半夜不睡覺，急著想要報名，結果報名失敗還來密粉專，說沒辦法報名，真是太可愛了(〃∀〃)。

然後呢，在這十萬火急的情況下，我大學術組就在天亮前生出了這麼一個報名網頁，功能我下面一個一個講。

📱 Mobile-First #

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

🔍 防呆 #

這個網頁上的每一格欄位都有防呆，從最簡單的 Regex 到身分證字號驗證。其中最智障的就屬這個身分證字號驗證。

上面說了我們的工時有限，所以我隨便 Google 了一串 code 就貼上去用了，結果點閱最高的那一串 code 居然還有 bug，才報名第 3 個人就出現問題。

這個事件大概給我們兩個啟發：

工時與品質成正相關
胎彎人只能當碼農 (大誤

💡 選項提示 #

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

⬇️ 預設選項自動消失的下拉式選單 #

原本還有一個我自己覺得滿酷的功能，就是下拉式選單在被啟動之後，預設的那一格會自動消失，避免使用者再回去選預設的選項。

但是後來實驗發現，在不同平台的手機上操作時，可能會發生選 4 但是變 3 的問題。而且如果使用者快速的跳過了一堆下拉式選單，那這些選單會自動選取第一格，而且不會被防呆挑出來，很容易在未經確認的情況下誤送錯誤的資料。

所以考量到整體的使用者體驗，這個功能最後被拿掉了。

↕️ 自動調整大小的大型文字輸入框 #

這一格我覺得還蠻可惜的，因為大部分情況下用不到。它看起來只是一般的文字輸入框 (<input type="text">)，但其實我是把他做成 <textarea>，然後再另外套了一個黑魔法：jquery.ns-autogrow，讓他可以隨著內容的多寡自動長高或縮小。

這邊科普一下：根據 Bootstrap Guideline，如果你希望對你的網頁有多一點主控權，那就他X的不要讓使用者可以橫向調整 textarea 的大小。不然有高達 87% 的機率，你的畫面會爆炸。所以不管你網站的framework是什麼，這點都應該特別小心處理。

🪺 彩蛋 #

最重要的來了。

因為每一格都有防呆，所以就算下拉式選單的選項被亂改，我們的防呆也會擋下來，除了飲食習慣這一格。

我們多留了一個隱藏選項：「麥當勞歡樂送」。

原本的打算是，如果有小學員使用了這個選項，我們會真的去訂一份麥當勞回來。

但這個功能後來還是只能留給學術組在課堂中拿來說嘴，真是太可惜了 QQ