.jpg)
Informasi bergerak sangat cepat pada zaman sekarang, berbagai informasi bisa kita dapatkan di internet mulai dari hal receh sampai hal serius pun ada disini. Perangkat handphone menjadi perangkat yang paling banyak digunakan, menurut Hootsuite dan We Are Social trafik web di perangkat mobile pada tahun 2021 naik menjadi 66,9 persen.
Ini menunjukkan kebanyakan orang mengakses web menggunakan perangkat mobile. Dan menurut Google, 53% pengunjung akan meninggalkan website dengan loading time lebih dari 3 detik. whhaaaattt ?
Maka dari itu google mengeluarkan solusi untuk permasalahan ini dengan teknologi yang mereka sebut AMP (Accelerated Mobile Pages) dan google mengklaim bisa menampilkan halaman website kurang dari 1 detik lho.
Tapi AMP bukan diperuntukkan untuk semua website dan hanya bisa digunakan pada halaman yang berisi konten statis, seperti berita atau artikel saja. Jadi, AMP Google ini sangat cocok jika website Anda merupakan website berita atau website artikel.
Starter Code
Untuk permulaan pengenalan AMP, kita bisa memakai code basic untuk halaman AMP
<html amp lang="en">
<head>
<meta charset="utf-8">
<script async src="https://cdn.ampproject.org/v0.js"></script>
<title>Hello, AMPs</title>
<link rel="canonical" href="https://amp.dev/documentation/guides-and-tutorials/start/create/basic_markup/">
<meta name="viewport" content="width=device-width,minimum-scale=1,initial-scale=1">
<style amp-boilerplate>body{-webkit-animation:-amp-start 8s steps(1,end) 0s 1 normal both;-moz-animation:-amp-start 8s steps(1,end) 0s 1 normal both;-ms-animation:-amp-start 8s steps(1,end) 0s 1 normal both;animation:-amp-start 8s steps(1,end) 0s 1 normal both}@-webkit-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@-moz-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@-ms-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@-o-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}</style><noscript><style amp-boilerplate>body{-webkit-animation:none;-moz-animation:none;-ms-animation:none;animation:none}</style></noscript>
</head>
<body>
<h1 id="hello">Hello AMPHTML World!</h1>
</body>
</html>
Notes :
<html amp>
Tag ini menunjukkan bahwa halaman kita menggunakan AMP.
<script async src="https://cdn.ampproject.org/v0.js"></script>
Memasukkan AMP JS Library pada halaman kita.
Memasukkan Gambar
Untuk memasukkan gambar, kita memakai tag yang berbeda dari HTML biasanya.
<amp-img src="https://source.unsplash.com/Ji_G7Bu1MoM/600x400" width="600" height="400" layout="responsive"></amp-img>
Notes :
- Responsive : jika ingin menggunakan ukuran gambar yang responsive.
- Fixed : jika ingin menggunakan ukurang gambar yang fix (tinggi dan lebar).
Menambahkan CSS
Terkadang kita perlu menambahkan beberapa CSS untuk halaman yang kita buat seperti dibawah ini.
<style amp-custom>
h1 {
margin: 1rem;
}
body {
background-color: blue;
}
</style>
Gunakan tag amp-custom untuk menambahkan CSS yang kita butuhkan.
Menambahkan Komponen
Beberapa komponen sudah disediakan oleh AMP, seperti slide menu, carousel, FB comment, image lightbox, JWPlayer, dll. Berikut contoh jika kita memasukkan carousel.
<script async custom-element="amp-base-carousel" src="https://cdn.ampproject.org/v0/amp-base-carousel-0.1.js"></script>
Code diatas untuk memasukkan library amp-carousel.
<amp-base-carousel width="600" height="400" layout="responsive">
<amp-img src="https://source.unsplash.com/Ji_G7Bu1MoM/600x400" width="600" height="400" layout="responsive"></amp-img>
<amp-img src="https://source.unsplash.com/4yCXNMLP9g8/600x400" width="600" height="400" layout="responsive"></amp-img>
</amp-base-carousel>
Memasukkan amp-carousel di halaman HTML.
Action dan Event
<button on="tap:hello.hide">
Goodbye AMPHTML World!
</button>
Notes :
- tap : event ketika user click mouse atau tap screen.
- hello : element id yang akan kita panggil.
- hide : action yang akan di jalankan.
Mungkin itu dulu yang bisa saya bahas tentang AMP (Accelerated Mobile Pages).
