快轉到主要內容

2018 元智四資迎新網站

細數那些你看不到的細節

·
2018 四資迎新主視覺

前言 #

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

🏠 首頁 #

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

嗯 因為那不是我做的,跟我習慣用的框架也不一樣(他用的是 W3 CSS 我習慣的是 Bootstrap )。

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

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

🏵️ Font Awesome #

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

<i class="fal fa-user-astronaut"></i>

Astronaut user by Font Awesome

噠啦 你就得到了這麼一個可愛的小太空人 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 個人就出現問題。

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

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

💡 選項提示 #

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

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

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

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

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

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

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

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

🪺 彩蛋 #

最重要的來了。

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

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

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

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