社團介紹卡片
YC
YC
嗨嗨,願以照片攝下生活,一場人生中的旅行,從此展開。

去年前任訓育組長參考了南一中的社團列表網頁,一方面可以讓家長更了解學校的社團型態以及學生活動,一方面(我自己補的)也可以讓同學們更了解學校的社團有哪些以及各社舉辦的活動。

去年選社宣傳狀況

為什麼這麼說呢?校內生不是通常會比爸媽還更懂學校有哪些社團嗎?嘖,經過我一年的觀察,事實並非如此,像去年新生訓練中,會有社團學長姊到班上宣班(或私下拉學弟妹也有),藉此推廣宣傳知名度,但來宣傳的社團遠不及總社團數,可能抱持著沒什麼好宣傳的想法就沒積極宣傳了。

儘管如此,學在在開學後選社前,會舉辦社團博覽會,而去年選社與社團博覽會是同時進行,訓育組發下一張組員表給社長,一般同學看到喜歡有興趣的社團前去詢問,如果還有空位直接登記就入社了,但有些熱門社團會因為活動規劃,對社員限制一些條件,例如僅招收一年級、要面試(態度、熱忱度等等等),最後面試通過的同學在社博當天直接登記,拒收當天有興趣但沒去面試的同學。

去年社團博覽會暨選社現況 #三民攝影 @smpc_111th

而前述做法很容易發生宣傳力不足狀況,有去看過展覽一定會知道,沒興趣可能避而遠之(有試吃我才去),比較不容易注意到較冷門社團,第一眼工通常會先被熱門的社團搶走吸引走,較冷門社團就會哀嚎自己快要廢社、沒人來、只能收到來混的海鷗社員,這大概是歷年來經營的痛處與詬病。

今年改善做法

在文章開頭也有提到今年計畫由學生會仿效南一中架設社團介紹網頁,而我在一面前就已經有聽會長提到這項計畫,而先做出網站,在一面時繳交的自傳內置進去,順利當上學生會幹部後,繼續完善這社團介紹網站,初期在正式當上幹部前,這想法只是草案(參考用),初期網站十分簡陋,只有表格列出所有社團而已,但隨著最近社團逐漸開始宣傳,就想說趕快來把資料線上化完善,打一個社團形象化網站的想法去做好這件事。

初期社團探索網 十分簡陋,只有表格撐場

卡片製作

而接近開學,各社開始動起來,加上最近師大附中校網更新計畫,新版校網的社團介紹卡片真的很吸引人o((>ω< ))o,就參考卡片式的設計,實作在社團介紹上。

卡片式設計

而卡片滑動的技術,使用 owl.carousel.js 製作,將社團資料整理成 JSON 格式,再使用 PHP foreach 迴圈將所有社團資料導出成卡片就完成了!

隨著社團資料越來越多,版面也越來越長(尤其是在手機壓縮版面下,要滑很久才能找到特定社團),沒有準確的分類制度也不是辦法,不過幸好當初在蒐集各社資料時,已經有請各社分類自己 的社團性質,分成學術類、藝文類、運動類、康樂類、服務類五大項,這時在 foreach 就可以更下功夫,指定只要輸出 xx類 的社團就好,當然你 JSON 要先有分類。

最後實做出來長這樣,做出一排按鈕連結供大家進行條件篩選用。

點選類別就可進行篩選