国产av日韩一区二区三区精品,成人性爱视频在线观看,国产,欧美,日韩,一区,www.成色av久久成人,2222eeee成人天堂

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

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

Jun 21, 2016 am 08:51 AM

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

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

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

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

如果內(nèi)容不 OK 可以跟我講一下喔!

《 笨港迎媽祖 》網(wǎng)站

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

(本文發(fā)布於 PTT_Soft Job 版,獲作者 吳政賢 授權(quán)刊登轉(zhuǎn)載, 相關作品 , GitHub 資源 ,圖片來源:,未經(jīng)授權(quán)請勿轉(zhuǎn)載。)

Kenyataan Laman Web ini
Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn

Alat AI Hot

Undress AI Tool

Undress AI Tool

Gambar buka pakaian secara percuma

Undresser.AI Undress

Undresser.AI Undress

Apl berkuasa AI untuk mencipta foto bogel yang realistik

AI Clothes Remover

AI Clothes Remover

Alat AI dalam talian untuk mengeluarkan pakaian daripada foto.

Clothoff.io

Clothoff.io

Penyingkiran pakaian AI

Video Face Swap

Video Face Swap

Tukar muka dalam mana-mana video dengan mudah menggunakan alat tukar muka AI percuma kami!

Alat panas

Notepad++7.3.1

Notepad++7.3.1

Editor kod yang mudah digunakan dan percuma

SublimeText3 versi Cina

SublimeText3 versi Cina

Versi Cina, sangat mudah digunakan

Hantar Studio 13.0.1

Hantar Studio 13.0.1

Persekitaran pembangunan bersepadu PHP yang berkuasa

Dreamweaver CS6

Dreamweaver CS6

Alat pembangunan web visual

SublimeText3 versi Mac

SublimeText3 versi Mac

Perisian penyuntingan kod peringkat Tuhan (SublimeText3)

Bagaimanakah saya tetap up-to-date dengan piawaian HTML dan amalan terbaik terkini? Bagaimanakah saya tetap up-to-date dengan piawaian HTML dan amalan terbaik terkini? Jun 20, 2025 am 08:33 AM

Kunci untuk bersaing dengan piawaian HTML dan amalan terbaik adalah dengan sengaja dan bukannya mengikutinya secara membuta tuli. Pertama, ikuti ringkasan atau kemas kini log sumber rasmi seperti WHATWG dan W3C, memahami tag baru (seperti) dan atribut, dan menggunakannya sebagai rujukan untuk menyelesaikan masalah yang sukar; Kedua, melanggan surat berita pembangunan web yang dipercayai dan blog, menghabiskan 10-15 minit seminggu untuk melayari kemas kini, memberi tumpuan kepada kes penggunaan sebenar dan bukan hanya mengumpul artikel; Kedua, gunakan alat pemaju dan linter seperti htmlhint untuk mengoptimumkan struktur kod melalui maklum balas segera; Akhirnya, berinteraksi dengan komuniti pemaju, berkongsi pengalaman dan mempelajari kemahiran praktikal orang lain, untuk terus meningkatkan kemahiran HTML.

Bagaimanakah saya menggunakan elemen  untuk mewakili kandungan utama dokumen? Bagaimanakah saya menggunakan elemen untuk mewakili kandungan utama dokumen? Jun 19, 2025 pm 11:09 PM

Alasan untuk menggunakan tag adalah untuk memperbaiki struktur semantik dan kebolehcapaian laman web, memudahkan pembaca skrin dan enjin carian untuk memahami kandungan halaman, dan membolehkan pengguna dengan cepat melompat ke kandungan teras. Berikut adalah perkara utama: 1. Setiap halaman harus mengandungi hanya satu elemen; 2. Ia tidak boleh memasukkan kandungan yang diulangi di seluruh halaman (seperti sidebars atau footers); 3. Ia boleh digunakan bersempena dengan sifat Aria untuk meningkatkan kebolehcapaian. Biasanya terletak selepas dan sebelum ini, ia digunakan untuk membungkus kandungan halaman yang unik, seperti artikel, bentuk atau butiran produk, dan harus dielakkan, atau masuk; Untuk meningkatkan kebolehcapaian, ARIA-Labeledby atau Aria-label boleh digunakan untuk mengenal pasti bahagian-bahagian dengan jelas.

Bagaimana saya membuat dokumen HTML asas? Bagaimana saya membuat dokumen HTML asas? Jun 19, 2025 pm 11:01 PM

Untuk membuat dokumen HTML asas, anda perlu memahami struktur asasnya dan menulis kod dalam format standard. 1. Gunakan jenis dokumen pengisytiharan pada mulanya; 2. Gunakan tag untuk membungkus keseluruhan kandungan; 3. Termasuk dan dua bahagian utama di dalamnya, yang digunakan untuk menyimpan metadata seperti tajuk, pautan lembaran gaya, dan lain-lain, dan termasuk kandungan pengguna yang kelihatan seperti tajuk, perenggan, gambar dan pautan; 4. Simpan fail dalam format .html dan buka kesan tontonan dalam penyemak imbas; 5. Kemudian anda secara beransur -ansur boleh menambah lebih banyak elemen untuk memperkayakan kandungan halaman. Ikuti langkah -langkah ini untuk membina laman web asas dengan cepat.

Bagaimanakah saya membuat kotak semak dalam html menggunakan elemen ? Bagaimanakah saya membuat kotak semak dalam html menggunakan elemen ? Jun 19, 2025 pm 11:41 PM

Untuk membuat kotak semak HTML, gunakan atribut Jenis untuk menetapkan elemen kotak semak. 1. Struktur asas termasuk tag ID, nama dan label untuk memastikan bahawa teks mengklik boleh menukar pilihan; 2. Kotak semak yang berkaitan dengan pelbagai hendaklah menggunakan nama yang sama tetapi nilai yang berbeza, dan bungkusnya dengan Fieldset untuk meningkatkan kebolehcapaian; 3. Sembunyikan kawalan asli apabila menyesuaikan gaya dan gunakan CSS untuk mereka bentuk elemen alternatif sambil mengekalkan fungsi lengkap; 4. Pastikan ketersediaan, label pasangan, sokongan navigasi papan kekunci, dan elakkan bergantung pada hanya arahan visual. Langkah -langkah di atas dapat membantu pemaju dengan betul melaksanakan komponen kotak semak yang mempunyai fungsi dan estetika.

Bagaimana saya meminimumkan saiz fail html? Bagaimana saya meminimumkan saiz fail html? Jun 24, 2025 am 12:53 AM

Untuk mengurangkan saiz fail HTML, anda perlu membersihkan kod berlebihan, memampatkan kandungan, dan mengoptimumkan struktur. 1. Padam tag yang tidak digunakan, komen dan kosong tambahan untuk mengurangkan jumlah; 2. Pindahkan CSS dan JavaScript dalam fail luaran dan menggabungkan pelbagai skrip atau blok gaya; 3. Memudahkan sintaks label tanpa menjejaskan parsing, seperti menghilangkan tag tertutup pilihan atau menggunakan atribut pendek; 4. Selepas pembersihan, aktifkan teknologi pemampatan sisi pelayan seperti GZIP atau Brotli untuk mengurangkan jumlah penghantaran. Langkah -langkah ini dapat meningkatkan prestasi pemuatan halaman tanpa mengorbankan fungsi.

Bagaimanakah saya menggunakan elemen  untuk mewakili footer dokumen atau seksyen? Bagaimanakah saya menggunakan elemen untuk mewakili footer dokumen atau seksyen? Jun 25, 2025 am 12:57 AM

Ia adalah tag semantik yang digunakan dalam HTML5 untuk menentukan bahagian bawah halaman atau blok kandungan, biasanya termasuk maklumat hak cipta, maklumat hubungan atau pautan navigasi; Ia boleh diletakkan di bahagian bawah halaman atau bersarang, dan sebagainya. Tag sebagai akhir blok; Apabila menggunakannya, anda harus memberi perhatian untuk mengelakkan penyalahgunaan berulang dan kandungan yang tidak relevan.

Bagaimanakah HTML berkembang dari masa ke masa, dan apakah tonggak utama dalam sejarahnya? Bagaimanakah HTML berkembang dari masa ke masa, dan apakah tonggak utama dalam sejarahnya? Jun 24, 2025 am 12:54 AM

HtmlHasevolvElvEltanthantlantlantlantlylantelscreationTomeetTheGrowingDemandsofwebdeveloPerersandUsers

Bagaimanakah saya membenamkan video dalam html menggunakan elemen ? Bagaimanakah saya membenamkan video dalam html menggunakan elemen ? Jun 20, 2025 am 10:09 AM

Untuk membenamkan video dalam HTML, gunakan tag dan tentukan sumber video dan atribut. 1. Gunakan atribut atau elemen SRC untuk menentukan laluan video dan format; 2. Tambah atribut asas seperti kawalan, lebar, ketinggian; 3. Untuk bersesuaian dengan penyemak imbas yang berbeza, anda boleh menyenaraikan MP4, WebM, OGG dan format lain; 4. Gunakan kawalan, autoplay, disenyapkan, gelung, pramuat dan atribut lain untuk mengawal tingkah laku main balik; 5. Gunakan CSS untuk merealisasikan susun atur responsif untuk memastikan ia disesuaikan dengan skrin yang berbeza. Kombinasi struktur dan atribut yang betul dapat memastikan paparan yang baik dan sokongan fungsi video.

See all articles