Maison > interface Web > tutoriel HTML > 北港媽祖也懂 Material Design!手機就能跟著媽祖遶境 Live 齊步走_html/css_WEB-ITnose

北港媽祖也懂 Material Design!手機就能跟著媽祖遶境 Live 齊步走_html/css_WEB-ITnose

WBOY
Libérer: 2016-06-21 08:51:17
original
1042 Les gens l'ont consulté

《TO 導讀》:一個工程師的成就感未必來自於工作,而是能將專業所學投入生活相互呼應,有所貢獻。媽祖繞境在北港人心中不只是民俗活動,而是從小看到大的成長記憶。一位來自北港的工程師便運用所學,為媽祖繞境架設網站,只要透過手機就能參與媽祖遶境盛事。以下是為作者第一人稱描述。

很久沒來版上 PO 文章了 >"

最近忙著幫忙我們家鄉的活動製作網站,基本上我是屬於義務性幫忙、非官方、沒盈利的自主服務 (XD),每一年的製作這個網站我算是不斷自我突破吧 (疑?),從後端、系統、設計、切版、上稿,我嘗試一個人完成!

話題扯遠了,回到正題,這個網站我要分享的是前、後端以及系統部分,

如果內容不 OK 可以跟我講一下喔!

《 笨港迎媽祖 》網站

從設計開始,我參考了 Material Design 的角度去設計版面以及流程,不過當然的,手機與網頁的表現還是會有些許的差異,但是整體我仍然盡量參考規範XD

PHP 這次我就使用了很潮的 php7,跑起來貌似有變快,因為我的爬蟲變快了,所以整體來說算是很滿意,只是有些 function 需要稍做調整,不過大致上都很健康!

JavaScript 這次主力都在 Google Maps API 的運用。因為三年前我將此地圖資訊與廟會遶境路線做了結合,開啟了我對 Google Maps 運用的熱愛,所以今年也是把他當主力,活動當天沒意外的話,我會結合 GPS 線上定位!

CSS 的部分,我則是使用 compass scss 去實作,javascript 的話則是使用 jQuery 以及一些其他的 lib 實作!因為前後端都自己包辦,所以 Framework(CodeIgniter)我做了一些修改,讓這些靜態 css、javascript code 上 production 時候自動的 merge 以及 minify。

在靜態檔案的處理,我利用 S3 強大的空間功能,將網站的圖檔資源、js、css 都上到 S3 以減少 EC2 的 Loading,所以說,S3 上的 js、css 都是已經 minify 的了,而圖片檔若是遇到大檔案,則利用 TinyPNG 去對圖片做壓縮,然後再上傳到 S3,

對了,以上當然是用程式跑的:)

再來則是 HTML,基本上網站前台都是使用大量的文章以及簡介,所以可以做大量的 cache,然後這部分採用 file cache 而已,雖然我有原本打算使用 Redis 去實作,但是我把記憶體留給 MySQL 了..(我沒開 RDS,MySQL 是上在與 Server 同一台的 EC2)

因為有作 output 的 cache,所以我也順便將 HTML minify 囉,因為做 HTML 的 output cache,所以瀏覽人數的紀錄就不能跑 php 做 +1,所以這部分我使用 Ajax 去實作回傳人氣的紀錄!

最後 SEO,以及相關搜尋的設定,robots.txt、Sitemap 不用講,一定會做,這次我還加入了一點點的 schema、Google AMP、JSON-LD 的結構,這些都是去餵 Search Engine 想吃的菜!

其實過程中我學到很多經驗,也嘗試很多架構,這次我使用 AWS 的服務,主要開了一台東京 t2.micro 的 EC2,以及使用 S3 的服務而已,網頁流量,據我看 GA 的即時人數,最高曾經落在 1900 多人,可能有些頁面是使用 S3 吧,所以都撐得住!

這是目前我個人做過最高流量的網站,相對的也是個人里程碑!

以上是我的經驗、心得分享, 回到做網站初衷,我只是個熱愛故鄉的鄉土文化,想為家鄉盡一分力,利用自己的專長技術,支援這個從小的信仰,如此簡單。

文章有點太長,如果看到這裡的朋友,非常感謝您將它看完,如果大家有想要來北港玩的,倒是可以看看網站內容喔!

若是文章不適合再版上討論的話,可以跟我說一下 >"

有問題或疑問的話,非常歡迎各位討論喔:)

(本文發布於 PTT_Soft Job 版,獲作者 吳政賢 授權刊登轉載, 相關作品 , GitHub 資源 ,圖片來源:,未經授權請勿轉載。)

source:php.cn
Déclaration de ce site Web
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn
Tutoriels populaires
Plus>
Derniers téléchargements
Plus>
effets Web
Code source du site Web
Matériel du site Web
Modèle frontal