Ditutorial kali WriteCode akan menulis cara Convert HTML ke AMP (Accelerated Mobile Pages Project), Sebelum masuk ke pembahasan saya akan mejelaskan sedikit tentang AMP Project adalah inisiatif sumber terbuka yang bertujuan untuk membuat web lebih baik bagi semua kalangan. Proyek ini memungkinkan pembuatan situs dan iklan dengan performa tinggi, cepat, dan konsisten di berbagai perangkat dan platform distribusi. Untuk di Blog AMP ini lebih sulit untuk terapkan karena anda harus membuat kodingan kedalam blog anda, tapi untuk yang menggunakan wordpress lebih mudah untuk dipasang karena ada plugin yang digunakan untuk membuat halaman AMP ini. Kembali ke pembahasan awal disini saya akan berbagi cara Convert HTML ke AMP, syarat untuk membuat halaman AMP seperti dibawah ini :
1.Pengetahuan dasar tentang HTML, CSS, dan JavaScript
2.Browser pilihan Anda yang bisa memeriksa konsol JavaScript
3.Editor teks pilihan Anda
Membangun halaman HTML biasa
Untuk Kode HTML nya bisa anda copas dibawah ini :
<!doctype html>
<html lang="en">
<head>
<title>News Article</title>
<link href="base.css" rel="stylesheet" />
<script type="text/javascript" src="base.js"></script>
</head>
<body>
<header>
News Site
</header>
<article>
<h1>Article Name</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam egestas tortor sapien, non tristique ligula accumsan eu.</p>
</article>
<img src="mountains.jpg">
</body>
</html>
Diatas adalah kode HTML yang belum dalam bentuk AMP, apa saja yang harus dilakukan untuk menjadikan kode HTML diatas menjadi halam AMP bisa anda lihat perubahanya di kode HTML dibawah ini :Pertama anda harus menambahkan baris ini ke bagian bawah tag <head> :
<script async src="https://cdn.ampproject.org/v0.js"></script>Biasanya halaman yang sudah dalam bentuk AMP memiliki tanda Petir seperti dibawah ini :
<!doctype html>
<html ⚡ lang="en">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width,minimum-scale=1,initial-scale=1">
<link rel="canonical" href="/article.html">
<link rel="shortcut icon" href="amp_favicon.png">
<title>News Article</title>
<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>
<style amp-custom>
body {
width: auto;
margin: 0;
padding: 0;
}
header {
background: Tomato;
color: white;
font-size: 2em;
text-align: center;
}
h1 {
margin: 0;
padding: 0.5em;
background: white;
box-shadow: 0px 3px 5px grey;
}
p {
padding: 0.5em;
margin: 0.5em;
}
</style>
<script async src="https://cdn.ampproject.org/v0.js"></script>
</head>
<body>
<header>
News Site
</header>
<article>
<h1>Article Name</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam egestas tortor sapien, non tristique ligula accumsan eu.</p>
<amp-img src="mountains.jpg" layout="responsive" width="266" height="150"></amp-img>
</article>
</body>
</html>
Perhatikan dengan teliti perbedaannya kedua kode HTML diatas. Untuk uji coba halaman yang sudah dipasang AMP anda dapat menambahkan #develoment=1 atau seperti dibawah ini :http://localhost:8000/article.amp.html#development=1Diatas adalah tutorial singkat cara Convert HTML ke AMP, silakan dipelajari dan dikembangkan.
Posting Komentar
Posting Komentar