PANASARAN BANGET, APA SIH AMP GOOGLE ITU?

Jika ingin membaca versi bahasa Inggrisnya silahkan kunjungi link: CURIOUS, WHAT IS GOOGLE AMP? - posted by Anissa Auliasari

Umumnya, membaca artikel melaui hape itu lambat, kaku dan bikin frustasi. Namun tentu saja tidak harus selamanya demikian, Proyek AMP (Accelerated Mobile Pages) sebuah proyek terbuka melakukan sebuah terobosan demi mewujudkan impian kita dimana para publisher dapat membuat konten mobile yang optimal dengan kecepatan menampilkan dan memuat konten moble dimana mana, karena sifatnya yang terbuka kita juga diberikan kesempatan untuk berkonstribusi terhadap proyek yang satu ini. Baca juga:

MANA SEBENARNYA YANG LEBIH BAIK:⚡BLOG AMP VERSUS 📲BLOG MOBILE KLASIK?

APA SIH BEDANYA HTML KLASIK SAMA AMP?

So pasti beda dong, karena faktanya anda tidak dibenarkan menggunakan secara sembarangan kode Java kecuali untuk modul modul yang telah disediakan oleh AMP Google dan anda tidak dibenarkan menggunakan stylesheet.css kecuali apabila hanya diperuntukan untuk gaya huruf atau font font Google.

Halaman anda adalah PHP, Saya tidak bisa mengujinya secara lokal, jadi bagaimana dong?

Halaman PHP memerlukan setting server lokal seperti WAMP untuk mengunggah item item anda ke sebuah server untuk tujuan melakukan pengujian. Nyatanya bahwa halaman kita adalah PHP tidak berarti menunjukan adanya kode tersebut begitu rumitnya, dan pada faktanya beribu cara dapat kita lakukan untuk membuat hal itu lebih mudah yakni untuk merubah style yang biasanya harus hadir pada tiap barisan kode, tapi membuat suatu perubahan pada kode css bisa jadi saja mimpi buruk bagi anda.

Ada yang bilang tidak ada stylesheet eksternal...tapi kok anda memakai style.css eksternal?

Hal yang separo benar dan separo tidak. Anda camkan baik baik, menambahkan CSS kedalam barisan kode bisa menyebabkan sakit kepala yang berlarut larut, bagi kita sebagai pengguna diharuskan mengedit setiap baris HTML padahal hanya untuk merobah satu bagian dari style saja. Kita perlu sebuah fungsi READ/WRITE daripada PHP (Itulah sebabnya mengapa halaman AMP itu sepenuhnya PHP tetapi basis mereka sebenarnya adalah HTML). Fungsi ini membolehkan kita menggunakan suatu stylsheet eksternal TETAPI sebenarnya itu bukan sepenuhnya eksternal melainkan Internal! Ketika halaman di muat, kode kode CSS ditambahkan kedalam halaman, membuatnya masuk kedalam barisan kode kode dan hal inilah yang menyebabkannya menjadi VALID.

Lalu bagaimana saya mengetahui bahwa halaman AMP saya sudah Valid?

Sangat sederhana. Katakanlah halaman yang anda edit adalah sebuah index.PHP. Maka dari itu link yang anda uji akan terlihat http://awesomebuyer.com/mobile/index.php. Demi untuk mengetahui bahwa halaman telah valid, anda harus menambahkan ini #development=1 di akhir tautan atau link anda, buka konsol dan tekan refresh. Anda akan melihat pesan pada konsol anda yang menyatakan bahwa halaman AMP akan valid jika kodenya benar.

Lebih lanjut kunjungi: https://www.ampproject.org/docs/guides/validate

Apa yang tidak bisa saya gunakan sebagai CSS?

Seperti yang kita telah kita ketahui, AMP sedikit terbatas, tetapi AMP adalah sebuah proyek yang sedang berkembang, jadi tulislah kode kode yang telah diijinkan sekarang, bisa saja berjalan lancar dalam satu atau dua bulan sebelum error datang memusingkan kepala anda lagi, oleh karenanya dianjurkan untuk mengikuti halaman ini: https://www.ampproject.org/docs/guides/responsive/style_pages

Tetaplah terhubung jika suatu ketika terjadi perubahan lagi

AMP adalah flatform yang sedang bertumbuh kembang, dan pada waktunya menyediakan beberapa kode scripts yang benar benar mengagumkan dan berjalan sangat baik pada produk semisal: https://ampbyexample.com/

CATATAN

1. Pemasangan sebuah script.

Setelah anda menemukan sebuah script yang anda sukai untuk anda gunakan, maka anda akan mengimpor file JS yang sudah tersedia di bagian kepala daripada item tempat script script tersebut tersedia, hal ini hanya bisa dilakukan menggunakan struktur HTML yang telah tersedia, jika tidak validasi akan gagal.

2. Menggunakan fitur fitur halaman AMP

Seluruh komponen yang kita pakai dapat ditemukan di ampbyexample.com dan lebih jauh di sertai dengan tutorial dan contoh penggunaannya.

AMP google memiliki cara berbeda dalam menambahkan gambar, anda dapat menemukannya hal tersebut sebagai <amp-img>. Bisa saja kami menjelaskannya akan tetapi jauh lebih mudah apabila anda berkunjung saja untuk mendapatkan contoh di halaman Google AMP  https://www.ampproject.org/docs/guides/responsive/control_layout

Struktur halaman AMP sangat sederhana sebagaimana pada contoh berikut

Header

Header terdiri dari 3 elemen. Sebuah tombol yang mengaktifkan sidebar (harus satu tombol pada setiap setting AMP)

LOGOnya yang dapat anda rubah pada style.css di baris 264.

Ikon terakhir yang kita pilih adalah ikon kontak, akan tetapi anda bisa menambahkan apa saja yang anda inginkan pada pencampuran ini.

Sidebar

Ini adalah basis struktur sidebar

Sidebar Header Sidebar header terdiri daripada 5 ikon yang terdapat di atas halaman. Ganti semua menurut kebutuhan anda akan tetapi tinggalkan yang teraikhir untuk menutup sidebar

LOGO Sidebar Logo sidebar yang dapat anda ganti pada baris ke 469

Sidebar Divider

Pemisah atau separator dengan text anda dapat gunakan untuk membedakan elemen menu

Simple Sidebar Menu Item Kode ini akan membuat sebuah sidebar sederhana daripada sebuah menu item. Tidak ada dropdown, tidak ada efek.

Submenu Sidebar Menu Item

Submenu harus di tambahkan didalam struktur yang telah ditunjukan diatas tadi. amp-accordion akan memperbolehkan submenu ditutup dan dibuka. Sementara bagiannya akan menempatkan elemen elemen kode dan menambahkan "perluasan" itu akan membuat menu perluasan atau expanded secara default.

Setiap item didalamnya adalah sederhana - yakni menu item yang telah ditambahkan kedalam daftar elemen

Membuat halaman Paddings

Membuat sebuah lapisan (padding) kiri dan kanan  <div class="content"></div>

Sebuah kelas kedua adalah sebuah kelas yang dapat menambahkan elemen kode menjadi lebih fleksibel

Mengapa hal ini peneting?

AMP Google adalah tentang bagaimana kita menggunakan kembali elemen elemen dan menggunakan sedikit mungkin style agar kita tetap dapat menjaga ukuran tetap kecil. Maka dari itu kelas kedua untuk warna latar, margin dan border di tujukan agar membuat style sekecil mungkin.

Latar, border dan warna

Anda dapat memilih suatu warna, borderm atau warna latar untuk elemen dengan menambahkan kelas kedua berikut:

bg-teal-light

bg-teal-dark

border-teal-light

border-teal-dark

color-teal-light

color-teal-dark

bg-green-light

bg-green-dark

border-green-light

border-green-dark

color-green-light

color-green-dark

bg-blue-light

bg-blue-dark

border-blue-light

border-blue-dark

color-blue-light

color-blue-dark

bg-magenta-light

bg-magenta-dark

border-magenta-light

border-magenta-dark

color-magenta-light

color-magenta-dark

bg-night-light

bg-night-dark

border-night-light

border-night-dark

color-night-light

color-night-dark

bg-yellow-light

bg-yellow-dark

border-yellow-light

border-yellow-dark

color-yellow-light

color-yellow-dark

bg-orange-light

bg-orange-dark

border-orange-light

border-orange-dark

color-orange-light

color-orange-dark

bg-red-light

bg-red-dark

border-red-light

border-red-dark

color-red-light

color-red-dark

bg-pink-light

bg-pink-dark

border-pink-light

border-pink-dark

color-pink-light

color-pink-dark

bg-gray-light

bg-gray-dark

border-gray-light

border-gray-dark

color-gray-light

color-gray-dark

bg-white

color-white

border-white

bg-black

color-black

border-black

Latarbelakang Media Sosial

facebook-bg

linkedin-bg

twitter-bg

google-bg

whatsapp-bg

pinterest-bg

sms-bg

mail-bg

dribbble-bg

tumblr-bg

reddit-bg

youtube-bg

phone-bg

skype-bg

Warna sosial media:

facebook-color

linkedin-color

twitter-color

google-color

whatsapp-color

pinterest-color

sms-color

mail-color

dribbble-color

tumblr-color

reddit-color

youtube-color

phone-color

skype-color

Opsi Font

Anda juga bisa mengganti parameter font, tipis, lebih kecil, tebal, dan banyak lagi. Tambahkan saja kelas ke elemen huruf dari salah satu pilihandibawah ini:

ultrathin

thin

thiner

boder

bold

ultrabold

capitalize

italic

small-text

center-text

right-text

uppercase

boxed-text

Properti Box

Margin juga bisa dipakai memperbesar elemen tertentu dengan menggunakan kelas kedua:

.container{margin-bottom:30px}

.full-bottom{margin-bottom:25px}

.no-bottom{margin-bottom:0px}

.full-top{margin-top:25px}

.half-bottom{margin-bottom:15px}

.half-top{margin-top:15px}

.quarter-bottom{margin-bottom:15px}

.hidden{display:none}

 Tombol

Tombol-tombol

Tombol tombol mudah dipergunakan. Anda tambahkan saja Tombol class dan lalu kelas kedua untuk warna sesuai keinginan anda

Icons

Ikon juga gampang di pergunakan. Tersedia sebuah ikon, dan sebuah warna

Form kontak 100% telah diuji, dan sepenuhnya valid, maka jika terdapat isu terkait masalah itu ikuti petunjuk:

1. Pastikan halaman anda sudah Valid AMP, jika tidak valid form kontak tidak akan mengirimkan pesan

2. Hubungi provider hosting kontak anda dan minta mereka untuk mensetting PHP untuk ini Tanpa setting setting ini form kontak tidak akan mengerimkan pesan untuk anda!

Sumber: enable

Share :