Cara Membuat Halaman AMP Dasar dari Awal

() translation by (you can also view the original English article)

Proyek AMP adalah inisiatif open source yang baru diluncurkan yang didukung oleh Google, dengan tujuan membantu membuat situs lebih cepat, terutama bagi yang sangat banyak menggunakan media dan/atau kebutuhan untuk monetisasi. Ini pada dasarnya adalah cara "tanpa repot-repot" untuk meluncurkan metode pengoptimalan yang agak rumit, sebagian besar proses ditangani di belakang layar untuk Anda.

Dalam artikel kami Proyek AMP: Akankah Membuat Situs Anda Lebih Cepat?, kita menjelaskan masuk secara terperinci tentang AMP yang akan berarti bagi Anda dari sudut pandang pengembang, dan memberi Anda beberapa nomor mentah tentang keuntungan kecepatan macam apa yang mungkin atau tidak mungkin diberikan oleh AMP kepada Anda.

Dalam tutorial ini kita akan lebih praktis, dengan panduan langkah demi langkah untuk benar-benar membuat halaman AMP dari awal, menjelaskan bagaimana melakukan beberapa tugas umum dengan cara AMP, dan berbagi beberapa tip saat kita pergi.

Mari kita mulai!

Tambahkan Kode Boilerplate

Menambahkan kode boilerplate standar adalah dimana setiap template AMP dimulai. Ada seperangkat kode yang harus ada di setiap template AMP, atau akan gagal validasi.

Buat file HTML baru bernama index.html dan tambahkan kode berikut ke dalamnya:

<!doctype html>
<html amp lang="en">
  <head>
    <meta charset="utf-8">
    <title>Make an AMP Page</title>
    <link rel="canonical" href="/index.html">
    <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>
    <script async src="https://cdn.ampproject.org/v0.js"></script>
  </head>
  <body>
    <h1>Make an AMP Page</h1>
  </body>
</html>

Anda bisa membaca rincian setiap elemen kode diatas di:

AMP Docs: Mark-up yang diperlukan

Pengaturan pratinjau localhost

Anda dapat (jika Anda memilihnya) melihat pratinjau template AMP yang baru Anda buat dengan membukanya langsung di browser. Namun, selalu ide yang bagus untuk melihat pratinjau pada localhost. Pendekatan ini mensimulasikan host web, sehingga lingkungan dimana Anda melakukan pratinjau template Anda sedekat mungkin dengan lingkungan nyata yang akan digunakan.

Untuk tujuan ini, saya sarankan untuk menggunakan MAMP untuk Windows atau Mac. Jika Anda belum menginstal MAMP, pergi ke situs MAMP dan unduh salinannya.

Setelah Anda menginstal MAMP, temukan folder htdocs-nya. Di Mac Anda biasanya akan menemukannya di /Applications/MAMP/htdocs, dan pada Windows di C:\MAMP\htdocs\.

Di dalamnya, buat folder baru untuk menampung proyek Anda, misalnya myproject. Kemudian pindahkan file index.html yang Anda buat di langkah sebelumnya ke dalam folder.

Jalankan MAMP dan sekarang Anda dapat melihat pratinjau template AMP Anda dengan membuka URL http://localhost:8888/myproject/ di Chrome. Bahkan jika Anda memilih browser lain, gunakan Chrome karena kita akan menggunakan Alat Pengembang Chrome di langkah berikutnya.

Halaman AMP Anda saat ini akan terlihat seperti ini:

Jika Anda membuka URL ini dan tidak berhasil, mungkin saja MAMP berjalan pada nomor port yang berbeda dengan 8888 yang Anda lihat di URL yang diberikan di atas. Untuk mengetahui apakah ini masalahnya, pada antarmuka MAMP klik tombol yang bertuliskan Open WebStart page. Ini akan membawa Anda ke halaman berisi informasi tentang MAMP, dan di URL Anda akan melihat nomor port yang benar untuk digunakan:

Menyalakan Debug

Sebelum kita melangkah lebih jauh, kita ingin menyalakan mode debug milik AMP sehingga jika kita secara tidak sengaja melakukan sesuatu yang tidak lulus validasi, kita akan segera mengetahuinya.

Untuk melakukannya, tambahkan #development=1 ke akhir URL pratinjau Anda, misalnya http://localhost:8888/myproject/#development=1.

Kemudian buka Alat Pengembang Chrome dan masuk ke tab Console, di mana Anda seharusnya melihat pesan Powered by AMP ⚡ HTML... berikut ini:

Saat Anda mengembangkan halaman Anda, jika ada yang tidak lulus validasi AMP Anda akan melihat pesan kesalahan di konsol. Saat ini kita tidak memiliki pesan kesalahan dan malah melihat "AMP validation successful", membiarkan kita mengetahui bahwa semuanya berjalan sebagaimana mestinya.

Metadata JSON Opsional

Seiring dengan kode boilerplate yang sudah Anda tambahkan, Anda memiliki opsi untuk menambahkan beberapa metadata JSON ke bagian head dalam format Schema.org seperti:

<script type="application/ld+json">
  {
    "@context": "http://schema.org",
    "@type": "NewsArticle",
    "headline": "Open-source framework for publishing content",
    "datePublished": "2015-10-07T12:02:41Z",
    "image": [
      "logo.jpg"
    ]
  }
</script>

Ini tidak penting untuk lolos validasi AMP, namun penting agar diambil oleh berbagai tempat seperti Google Search News.

Untuk membaca lebih lanjut tentang metadata ini kunjungi:

Berurusan dengan CSS Inline

Salah satu persyaratan AMP adalah bahwa semua CSS kustom harus ditempatkan sejajar di bagian head, antara tag <style amp-custom>...</style>.

Terlepas dari persyaratan ini, sebenarnya menulis CSS Anda langsung ke bagian head bukanlah alur kerja yang ideal. Yang benar-benar Anda butuhkan adalah dapat menulis CSS Anda dalam stylesheet eksternal, seperti biasanya, kemudian pindahkan CSS tersebut ke tempat yang sesuai di bagian head semua file template situs Anda.

Kami tidak akan membahas langkah demi langkah bagaimana melakukannya di sini, tapi jika Anda ingin tahu bagaimana menggunakan stylesheet eksternal dan masih meloloskan validasi AMP, ikuti langkah-langkahnya di tutorial tip cepat kami Membuat CSS Inline AMP Lebih Mudah Melalui Jade atau PHP sebelum melanjutkan.

Menambahkan Gambar

Setelah Anda memiliki kode penting Anda di tempatnya, mode pengembangan diaktifkan, dan (opsional) manajemen stylesheet eksternal siap digunakan, sekarang kita dapat beralih ke menambahkan beberapa media ke halaman Anda. Kita akan mulai dengan jenis media yang paling umum: gambar.

Di AMP Anda tidak menggunakan tag <img> untuk memuat gambar. Sebagai gantinya Anda menggunakan elemen kustom <amp-img> karena akan menangani optimasi pemuatan di semua gambar di halaman Anda.

Dari sini di dalam tutorial, kita akan bekerja dengan desain template yang ada untuk membantu mempercepat segala sesuatunya. Silakan pergi sekarang dan ambil sendiri salinan template Ceevee gratis oleh StyleShout. Template ini mencakup beberapa gambar yang dapat Anda gunakan untuk mempraktikkan penyisipan ke dokumen AMP Anda.

Dalam folder images template Ceevee Anda akan melihat gambar besar bukit pasir di malam hari. Kita akan mulai dengan menempatkan ini ke dalam template Anda. Salin folder images dan paste ke folder proyek Anda.

Kemudian, tambahkan kode berikut untuk menyisipkan gambar, di atas tag h1 yang sudah ada di HTML:

1	<amp-img src="images/header-background.jpg" width="2264" height="1504" layout="responsive" class="doc_header_bg"></amp-img>

Setiap bentuk media yang dimasukkan ke dalam halaman AMP harus memiliki width dan height awal yang ditetapkan, jadi tidak seperti menggunakan tag img, dengan tag amp-img Anda tidak dapat meninggalkan atribut ini.

Jika Anda tidak yakin persis ukuran gambarnya, tidak apa-apa, asalkan nilai yang Anda masukkan akurat mewakili aspek rasionya. Nilai width dan height dapat dianggap sebagai pengganti, karena AMP dapat menyusun halaman dengan nilai yang Anda berikan dan kemudian melakukan penyesuaian setelah gambar termuat penuh.

Atribut layout inilah yang memungkinkan AMP menyesuaikan tampilan gambar setelah dimuat. Kita telah menetapkan nilainya menjadi responsive, artinya gambar tersebut akan mempertahankan aspek rasio yang berasal dari nilai lebar dan tinggi, namun mengecilkan atau memperluas untuk mengisi kontainernya. Inilah sebabnya mengapa bahkan jika Anda tidak mengetahui ukuran gambar yang sebenarnya, asalkan Anda memiliki aspek rasionya Anda siap untuk melanjutkan.

Simpan dan refresh pratinjau Anda dan Anda seharusnya melihat gambarnya mengisi viewport Anda:

Baca lebih lanjut tentang atribut amp-img dan layout di:

Mendekati Gambar Latar Belakang "Cover"

Elemen umum dalam desain web saat ini adalah penggunaan gambar latar belakang yang mengisi tinggi dan lebar viewport, menciptakan sesuatu dari presentasi entri untuk sebuah halaman. Biasanya dilakukan dengan menggunakan gambar latar belakang dengan CSS background-size: cover; diterapkan untuknya. Namun di situs AMP kita tidak benar-benar ingin membawa gambar latar belakang yang besar melalui CSS karena ini akan memotong optimasi pemuatan sistem.

Sekarang, Anda pasti bisa berargumen bahwa memuat gambar latar belakang yang besar tidak ideal untuk meningkatkan kecepatan pemuatan, dan oleh karena itu Anda mungkin lebih baik meninggalkan gambar besar semuanya.

Namun, jika Anda secara tak terhindarkan harus membuat desain dengan gambar viewport penuh yang besar, Anda masih dapat setidaknya memanfaatkan prioritas pemuatan AMP dengan menambahkannya melalui tag amp-img sebagai pengganti latar belakang. Inilah cara melakukannya, mendekati teknik latar belakang "cover" dalam proses.

Kita akan mengambil gambar yang baru saja Anda sisipkan dan mengubahnya menjadi gambar cover. Pertama, bungkus gambar dengan tag div menggunakan kelas doc_header sehingga Anda memiliki:

1	<div class="doc_header">
2	<amp-img src="images/header-background.jpg" width="2264" height="1504" layout="responsive" class="doc_header_bg"></amp-img>
3	</div>

Kemudian, jika Anda belum melakukannya, tambahkan tag <style amp-custom>...</style> ke bagian head sehingga kita dapat menyertakan beberapa CSS kustom. Di antara tag tersebut tambahkan:

.doc_header {
    height: 100vh;
  background-color: #000;
	overflow: hidden;
	position: relative;
}

Biasanya, alih-alih apa yang Anda lihat di atas, saat membuat gambar cover, desainer akan menetapkan height dari elemen html dan body menjadi 100% dan kemudian juga menetapkan bagian cover mereka sampai height 100%, sehingga memenuhi viewport.

Namun pendekatan ini tidak akan bekerja dengan AMP karena CSS yang memaksakan gaya height: auto !important; pada elemen body, mencegah pengaturan height: 100%; dari bekerja.

Jadi sebaliknya, jika Anda benar-benar membutuhkan sesuatu untuk menjadi ketinggian viewport, Anda dapat menggunakan height: 100vh;, seperti yang telah kita lakukan dengan kelas doc_header kita. Unit vh mewakili "viewport height", dan nilai 100vh setara dengan 100% tinggi viewport.

Jika Anda menyimpan dan me-refresh situs Anda sekarang, Anda melihat bahwa div "doc_header" benar-benar mengisi viewport.

Namun saat ini, gambarnya tidak harus mengisi div "doc_header". Jika viewport lebih tinggi dari pada lebarnya, akan ada area hitam kosong di bawahnya.

Untuk memperbaikinya tambahkan kelas doc_header_bg ke tag amp-img Anda seperti ini:

1	<amp-img src="images/header-background.jpg" width="2264" height="1504" layout="responsive" class="doc_header_bg"></amp-img>

Kemudian tambahkan ke CSS Anda:

1	.doc_header_bg {
2	min-height: 100vh;
3	}

Kode ini akan memastikan bahwa tinggi gambar tidak pernah kurang dari viewport.

Sayangnya, masih akan tergencet pada lebar yang lebih sempit sehingga tidak seelegan tampilannya seperti menggunakan gambar latar belakang. Namun, pendekatan ini sedekat perkiraan yang bisa kita dapatkan saat masih menggunakan elemen amp-img.

Menggunakan Font Web

Sekarang kita akan menambahkan beberapa font web kustom ke dalam template kita. Saat melakukan ini dengan AMP Anda memiliki tiga metode pemuatan yang akan lolos validasi:

Google Fonts melalui asalnya https://fonts.googleapis.com
Fonts.com melalui asalnya https://fast.fonts.net
Untuk hal lainnya: @font-face

Menambahkan Google Fonts

Memuat Google Fonts harus dilakukan melalui elemen link di head, menggunakan URL yang diberikan kepada Anda untuk font yang Anda inginkan di https://www.google.com/fonts.

Untuk template kita, kita akan menggunakan Open Sans dan Libre Baskerville.

Untuk memuat kedua font ini tambahkan kode ini ke bagian head Anda:

1	<link href="https://fonts.googleapis.com/css?family=Open+Sans:300,400,700,400italic\|Libre+Baskerville" rel="stylesheet" type="text/css">

Kita sekarang akan menambahkan beberapa teks ke area sampul situs kita, yang akan kita gunakan pada font web baru kita. Di dalam div "doc_header" yang ada, di bawah gambar, tambahkan div baru dengan kelas doc_header_inner:

1	<div class="doc_header_inner">
2	</div>

Di dalam div itu tambahkan kode berikut:

<h1 class="doc_header_title">Simulate Background Image Cover</h1>

<p class="doc_header_text">This is a basic page created to show you how to work with the <a href="https://ampproject.org/">AMP Project</a>. In this cover section the background image uses AMP loading optimization. The social icons below use AMP compliant custom font loading. Read on to see more ways to use AMP.</p>

<hr>

Sekarang tambahkan berikut ini ke CSS kustom Anda:

body {
  font-family: 'Open Sans', sans-serif;
  font-size: 1rem;
  line-height: 2;
  color: #838C95;
}
.doc_header_inner {
  position: absolute;
  width: 85vw;
  max-width: 64rem;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  padding-bottom: 2rem;
  text-align: center;
}
h1.doc_header_title {
  font: bold 5.625rem/1.1em 'Open Sans', sans-serif;
  color: #fff;
  letter-spacing: -0.125rem;
  margin: 0 auto 1rem auto;
  text-shadow: 0 0.0625rem 0.1875rem rgba(0, 0, 0, .8);
}
@media (max-width: 35rem){
  h1.doc_header_title {
    font-size: 12vw;
  }
}
p.doc_header_text {
  font-family: 'Libre Baskerville';
  line-height: 1.9;
  color: #A8A8A8;
  margin: 0 auto;
  width: 70%;
  text-shadow: 0 0.0625rem 0.125rem rgba(0, 0, 0, .5);
}
.doc_header_text span,
.doc_header_text a {
  color: #fff;
}
.doc_header_inner hr {
  width: 60%;
  margin: 1.125rem auto 1.5rem auto;
  border-color: #2F2D2E;
  border-color: rgba(150, 150, 150, .1);
}

Kode di atas hanya CSS biasa untuk tujuan meletakkan teks yang baru ditambahkan, namun Anda akan melihat bahwa proses penerapan Google Fonts kita dalam template AMP tidak berbeda dari biasanya. Anda menggunakan properti font-family dengan nilai font yang Anda pilih, misalnya font-family: 'Libre Baskerville';

Saat menyimpan dan me-refresh situs Anda, Anda akan melihat kedua Google Fonts sekarang diterapkan pada teks di bagian sampul:

Menambahkan Font Kustom

Selanjutnya kita akan menambahkan font kustom yang tidak tersedia dari Google Fonts atau Fonts.com, dan itu adalah Font Awesome. Seringkali, jika Anda menggunakan Font Awesome, Anda mungkin memuatnya melalui MaxCDN, namun AMP tidak mengizinkan ini karena CDN bukan salah satu dari dua asal font yang disetujui. Dengan demikian, kita akan menangani pemuatan kita sendiri melalui @font-face.

Mengunduh File Font

Untuk memuat font Anda sendiri, Anda harus mengunduh file font terlebih dulu, yang dapat Anda lakukan di https://fortawesome.github.io/Font-Awesome/. Perhatikan Anda hanya membutuhkan "Font Awesome", bukan alat ekstra "Fort Awesome" yang ditawarkan saat mengunduh.

Setelah Anda memiliki file zip Font Awesome yang diunduh, ekstrak dan salin folder fonts yang dikandungnya ke dalam folder proyek Anda.

Pada CSS Anda, tambahkan kode berikut:

/* Font Awesome */
@font-face {
    font-family: 'FontAwesome';
	src: url('fonts/fontawesome-webfont.eot?v=4.0.3');
	src: url('fonts/fontawesome-webfont.eot?#iefix&v=4.0.3') format('embedded-opentype'), url('fonts/fontawesome-webfont.woff?v=4.0.3') format('woff'), url('fonts/fontawesome-webfont.ttf?v=4.0.3') format('truetype'), url('fonts/fontawesome-webfont.svg?v=4.0.3#fontawesomeregular') format('svg');
	font-weight: normal;
	font-style: normal;
}
.fa {
	display: inline-block;
	font-family: FontAwesome;
	font-style: normal;
	font-weight: normal;
	line-height: 1;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
}
.fa-facebook:before {
	content: "\f09a";
}
.fa-twitter:before {
	content: "\f099";
}
.fa-google-plus:before {
	content: "\f0d5";
}
.fa-linkedin:before {
	content: "\f0e1";
}
.fa-instagram:before {
	content: "\f16d";
}
.fa-dribbble:before {
	content: "\f17d";
}
.fa-skype:before {
	content: "\f17e";
}
/* /Font Awesome */

Sebaiknya sisipkan kode di atas di bagian atas CSS kustom Anda untuk membantu menjaga agar tetap teratur. Kode ini dimuat dalam file font kustom kita dan membuat kelas yang dapat digunakan untuk menambahkan font ikon ke sebuah desain–ini adalah standar CSS yang disediakan untuk digunakan oleh Font Awesome.

Kemudian tambahkan juga CSS ini:

.doc_header_social {
    margin: 1.5rem 0;
	padding: 0;
	font-size: 1.875rem;
	text-shadow: 0 0.0625rem 0.125rem rgba(0, 0, 0, .8);
}
.doc_header_social li {
	display: inline-block;
	margin: 0 1rem;
	padding: 0;
}
.doc_header_social li a {
	color: #fff;
}
.doc_header_social li a:hover {
	color: #11ABB0;
}

Tambahan ini menambahkan beberapa gaya khusus untuk template kita yang akan kita gunakan untuk menyiapkan sederet ikon sosial yang terkait.

Tambahkan HTML ini setelah <hr> di dalam div "doc_header_inner":

1	<ul class="doc_header_social">
2	<li><a href="#"><i class="fa fa-facebook"></i></a></li>
3	<li><a href="#"><i class="fa fa-twitter"></i></a></li>
4	<li><a href="#"><i class="fa fa-google-plus"></i></a></li>
5	<li><a href="#"><i class="fa fa-linkedin"></i></a></li>
6	<li><a href="#"><i class="fa fa-instagram"></i></a></li>
7	<li><a href="#"><i class="fa fa-dribbble"></i></a></li>
8	<li><a href="#"><i class="fa fa-skype"></i></a></li>
9	</ul>

Jika Anda me-refresh situs Anda sekarang Anda akan melihat sederet ikon sosial bertenaga @font-face di sepanjang bagian bawah teks yang kita tambahkan sebelumnya:

Mengintegrasikan Elemen `amp-font`

Untuk membantu memastikan pengunjung tidak menemukan situs yang rusak jika font kustom tidak berhasil dimuat, AMP menyediakan elemen amp-font untuk memungkinkan Anda membuat fallback.

Untuk membuat elemen ini bekerja, hal pertama yang perlu Anda lakukan adalah memuat skrip AMP yang mengaktifkannya. Di bagian head Anda, tambahkan kode ini:

1	<script async custom-element="amp-font" src="https://cdn.ampproject.org/v0/amp-font-0.1.js"></script>

Sekarang dengan elemen amp-font siap digunakan, kita bisa menambahkan sebuah kelas ke tag html atau body jika font kita gagal dimuat. Tambahkan kode ini ke bagian bawah template Anda, sebelum tag </body> penutup:

1	<amp-font layout="nodisplay" font-family="FontAwesome" timeout="3000" on-error-add-class="font-awesome-missing"></amp-font>

Mari kita lihat sekilas atribut yang ada di elemen ini. Kita pertama menetapkan layout="nodisplay" yang memastikan elemen itu tidak terlihat.

Selanjutnya, atribut font-family diatur ke FontAwesome, yang memberitahukan AMP bahwa kita ingin melacak pemuatan font yang diberi nama "FontAwesome". Pastikan nilai ini sama persis dengan pengaturan font-family dalam kode CSS @font-face Anda.

timeout atribut diatur ke 3000, yang berarti kita akan mengizinkan hingga tiga detik agar font dimuat sebelum beralih ke fallback. Anda dapat mengubah ini menjadi nilai apa pun yang Anda inginkan.

Akhirnya, kita menetapkan on-error-add-class ke font-awesome-missing. Jika font gagal dimuat setelah tiga detik kelas ini akan ditambahkan ke elemen html atau body. Kita dapat menargetkan kelas ini untuk menciptakan perilaku fallback kita dengan menambahkan kode ini ke CSS kustom kita:

1	.font-awesome-missing .doc_header_social {
2	display:none;
3	}

Jika font gagal dimuat setelah tiga detik CSS di atas akan mengaktifkan dan menyembunyikan seluruh bar ikon social sehingga kita tidak memiliki tampilan yang rusak.

Sekarang coba ganti nama sementara folder font proyek Anda sehingga font gagal dimuat, lalu refresh halaman Anda dan Anda akan melihat area ikon sosial menjadi tersembunyi. Anda juga harus melihat kelas font-awesome-missing ditambahkan ke tag html atau body. Kembalikan folder font ke nama yang benar dan Anda akan melihat ikon font Anda lagi saat refresh.

Baca lebih lanjut tentang elemen amp-font di:

AMP Docs: amp-font

Menambahkan Video YouTube

Selanjutnya, kita akan belajar menambahkan video YouTube dengan cara AMP, tapi pertama-tama kita perlu menambahkan kode pembersihan untuk membuat bagian agar video bisa masuk.

Setelah div "doc_header", ganti tag h1 yang ada dengan HTML ini:

    <div class="video_wrap">
      <div class="standard_width standard_padding">
        <h2>Embed a YouTube Video</h2>
      </div>
    </div>

Kemudian tambahkan ini ke CSS kustom Anda:

.standard_width {
  width: 100%;
  max-width: 75rem;
  margin-left: auto;
  margin-right: auto;
}
.standard_padding {
  box-sizing: border-box;
  padding: 6rem 3rem;
}
.video_wrap {
  background-color: #2B2B2B;
}

Tip: Berurusan dengan box Model di Halaman AMP

Anda mungkin telah memperhatikan CSS di atas yang kita atur dengan box-sizing: border-box; di kelas standard_padding.

Alasan untuk hal ini ada di AMP Anda tidak dapat menggunakan teknik umum termasuk * {box-sizing: border-box}, karena pemilih * dianggap terlalu lapar sumber daya. Dengan demikian Anda harus mengatur box-sizing: border-box; untuk elemen tertentu yang Anda butuhkan, atau hanya menangani padding dan border dengan cara lama–dengan kalkulator atau menghitung jari Anda.

Mengintegrasikan Elemen `amp-youtube`

Setelah bagian disiapkan dan siap untuk konten, kita akan menambahkan video YouTube menggunakan elemen kustom AMP amp-youtube. Dengan menggunakan elemen ini bukannya kode embed YouTube standar, kita dapat memanfaatkan teknik pengoptimalan pemuatan yang serupa dengan amp-img.

Untuk memulai, Anda harus menambahkan JavaScript AMP yang diperlukan untuk mengaktifkan elemen baru. Di bagian head, paste di:

1	<script async custom-element="amp-youtube" src="https://cdn.ampproject.org/v0/amp-youtube-0.1.js"></script>

Sekarang tambahkan HTML berikut di dalam div yang baru saja Anda tambahkan, di bawah tag h2:

1	<amp-youtube data-videoid="mGENRKrdoGY" layout="responsive" width="600" height="270"></amp-youtube>

Untuk menentukan video yang ingin Anda muat, atur ID YouTube-nya pada atribut data-videoid. Selain atribut ini, elemen amp-youtube adalah sama dengan elemen amp-img.

Kita memiliki width dan height masing-masing ke 600 dan 270. Sama seperti gambar, video harus memiliki lebar dan tinggi awal yang ditetapkan.

Kita kemudian menggunakan layout="responsive" sehingga video sesuai dengan ukuran kontainernya, sambil menjaga aspek rasio yang diambil dari pengaturan tinggi dan lebarnya.

Simpan dan refresh situs Anda, dan coba ubah ukuran viewport. Anda akan melihat bahwa video YouTube Anda mengembang atau menyusut agar sesuai, menjaga aspek rasio yang benar saat berjalan.

Baca lebih lanjut tentang elemen amp-youtube di:

AMP Docs: amp-youtube

Menambahkan iframe Berdasarkan Konten

AMP memiliki elemen kustom tambahan untuk memuat konten dari situs tertentu, seperti amp-twitter, amp-instagram dan beberapa lagi. Untuk konten dari situs pihak ketiga yang tidak memiliki elemen AMP khusus mereka sendiri, ada elemen amp-iframe. Kita sekarang akan menggunakan elemen ini untuk memuat Google Map ke halaman kita.

Buat kontainer untuk peta dengan menambahkan kode ini di bawah div "video_wrap" Anda:

1	<div class="standard_width standard_padding">
2	<h2>Use iframe Embedding, e.g. Maps</h2>
3	</div>

Sekarang, seperti elemen amp-font dan amp-youtube, kita perlu memuat skrip AMP yang menggerakkan elemen amp-iframe. Tambahkan ini ke bagian head Anda:

1	<script async custom-element="amp-iframe" src="https://cdn.ampproject.org/v0/amp-iframe-0.1.js"></script>

Selanjutnya, di dalam div baru Anda dan di bawah tag h2, tambahkan kode ini:

<amp-iframe width="1100" height="600" sandbox="allow-scripts allow-same-origin allow-popups allow-popups-to-escape-sandbox" layout="responsive" frameborder="0" src="https://www.google.com/maps/embed/v1/place?key=AIzaSyDG9YXIhKBhqclZizcSzJ0ROiE0qgVfwzI&amp;q=Alameda,%20CA"></amp-iframe>

Muat ulang situs Anda dan Anda akan melihat Google Map sekarang.

Serta mengoptimalkan pemuatan, menggunakan elemen amp-iframe membantu memastikan konten yang dilihat melalui iframe tidak berperilaku dengan cara yang tidak diinginkan, seperti mengeksekusi JavaScript yang mungkin menyebabkan pemuatan yang lambat atau pemicu iklan popup. Atribut sandbox memungkinkan Anda menentukan tingkat kontrol yang Anda gunakan atas konten iframe.

Untuk rincian lengkap tentang amp-iframe dan kontrol "sandbox"-nya, kunjungi:

AMP Docs: amp-iframe

Persiapan Galeri Gambar dengan Lightbox

Salah satu hal yang dapat terasa membatasi saat bekerja dengan AMP adalah aturan bahwa tidak ada JavaScript kustom yang diperbolehkan. Di sisi lain, ada elemen khusus yang disertakan dalam AMP yang bertujuan memberi Anda beberapa fungsi yang mungkin Anda lakukan melalui JavaScript biasa.

Misalnya, alih-alih memuatkan skrip lightbox kustom, Anda dapat menggunakan elemen amp-image-lightbox element. Kita akan membuat galeri foto yang menggunakan elemen ini sekarang.

Mulailah dengan membuat kontainer untuk galeri Anda dengan menambahkan kode ini tepat di atas tag amp-font Anda:

    <div class="portfolio_wrap">
      <div class="standard_width">
        <div class="portfolio_inner clearfix">
          <h2>Create a Gallery with Lightboxes</h2>
        </div>
      </div>
    </div>

Tambahkan ini juga ke CSS kustom Anda:

.portfolio_wrap {
    background-color: #ebeeee;
}
.portfolio_inner {
	padding: 4rem 6rem;
}
.portfolio_item {
	box-sizing: border-box;
	float: left;
	width: 25%;
	text-align: center;
	padding: 0.8rem;
}
.clearfix:before,
.clearfix:after {
	content: " ";
	display: table;
}
.clearfix:after {
	clear: both;
}

Seperti beberapa elemen kustom terakhir kita, kita perlu memuat skrip AMP untuk mengaktifkan elemen amp-image-lightbox. Tambahkan ini ke bagian head Anda:

1	<script async custom-element="amp-image-lightbox" src="https://cdn.ampproject.org/v0/amp-image-lightbox-0.1.js"></script>

Sekarang kita bisa untuk mulai menyiapkan galeri lightbox kita. Mulailah dengan menambahkan kode ini ke dalam div baru Anda, di bawah tag h2:

1	<amp-image-lightbox id="lightbox1" layout="nodisplay"></amp-image-lightbox>

Elemen amp-image-lightbox ini akan membuat tampilan lightbox aktual dengan gambar yang diperbesar di dalamnya. Kita ingin menyembunyikannya sampai pengguna mengklik gambar yang ingin mereka perbesar, jadi kita mengaturnya ke layout="nodisplay".

Catatan: kita telah menetapkan ID elemen ini ke lightbox1.

Untuk menambahkan item ke galeri, tambahkan div ini di bawah elemen amp-image-lightbox:

1	<div class="portfolio_item">
2	</div>

Kemudian di dalamnya tambahkan kode amp-img ini:

1	<amp-img on="tap:lightbox1" role="button" tabindex="0" src="images/portfolio/coffee.jpg" width="215" height="215" layout="responsive"></amp-img>

Untuk sebagian besar, elemen amp-image sama dengan yang kita tambahkan sebelumnya, namun Anda akan melihat penambahan pada on="tap:lightbox1". Ini memberitahu AMP bahwa ketika gambar diketuk/diklik, versi yang lebih besar harus dibuka di lightbox dengan id lightbox1, yaitu elemen amp-image-lightbox yang baru saja kita buat.

Tambahkan tujuh gambar lainnya ke galeri dengan kode ini:

          <div class="portfolio_item">
            <amp-img on="tap:lightbox1" role="button" tabindex="1" src="images/portfolio/console.jpg" width="215" height="215" layout="responsive"></amp-img>
          </div>
          <div class="portfolio_item">
            <amp-img on="tap:lightbox1" role="button" tabindex="2" src="images/portfolio/farmerboy.jpg" width="215" height="215" layout="responsive"></amp-img>
          </div>
          <div class="portfolio_item">
            <amp-img on="tap:lightbox1" role="button" tabindex="3" src="images/portfolio/girl.jpg" width="215" height="215" layout="responsive"></amp-img>
          </div>
          <div class="portfolio_item">
            <amp-img on="tap:lightbox1" role="button" tabindex="4" src="images/portfolio/into-the-light.jpg" width="215" height="215" layout="responsive"></amp-img>
          </div>
          <div class="portfolio_item">
            <amp-img on="tap:lightbox1" role="button" tabindex="5" src="images/portfolio/judah.jpg" width="215" height="215" layout="responsive"></amp-img>
          </div>
          <div class="portfolio_item">
            <amp-img on="tap:lightbox1" role="button" tabindex="6" src="images/portfolio/origami.jpg" width="215" height="215" layout="responsive"></amp-img>
          </div>
          <div class="portfolio_item">
            <amp-img on="tap:lightbox1" role="button" tabindex="7" src="images/portfolio/retrocam.jpg" width="215" height="215" layout="responsive"></amp-img>
          </div>

Bila Anda menyimpan dan me-refresh Anda melihat galeri di halaman Anda yang terlihat seperti ini:

Dan ketika Anda mengklik salah satu gambar Anda melihatnya terbuka di lightbox seperti ini:

Untuk membaca lebih lanjut tentang amp-image-lightbox kunjungani:

AMP Docs: amp-image-lightbox

Merangkum

Anda sekarang memiliki halaman AMP dasar dengan beberapa jenis konten yang paling umum, dan beberapa trik kecil untuk membantu Anda bekerja secara efisien dan sesuai dengan peraturan AMP untuk validasi.

Mari kita rekap poin-poin penting dari apa yang kita bahas:

Selalu mulai dengan kode boilerplate
Menggunakan pratinjau localhost; MAMP direkomendasikan
Aktifkan debug dengan menambahkan #development=1 ke URL pratinjau Anda dan pantau konsol Alat Pengembang Chrome
Sertakan metadata JSON Schema.org jika Anda memilihnya
Tangani CSS inline lebih mudah melalui Quick Tip ini
Gunakan elemen kustom AMP dan bukan elemen HTML default jika tersedia
Bila diperlukan, muat JavaScript AMP tambahan untuk menggerakkan elemen kustom
Muat font kustom dari Google Font, Fonts.com atau via @font-face, dengan menggunakan elemen amp-font untuk membuat fallback
Gunakan elemen kustom bawaan AMP alih-alih JavaScript kustom, misalnya amp-image-lightbox bukannya skrip lightbox

Saya harap ini semua membantu memperjelas proses pembuatan halaman AMP sehingga Anda merasa percaya diri untuk membangun situs nyata dari awal. Sekarang keluarlah dan bersenang-senang membuat situs yang dipercepat oleh AMP!

Template HTML untuk Berlatih

Lihatlah beberapa template halaman arahan ini jika Anda ingin mempraktikkan sesuatu selain yang ada dalam tutorial ini: