Kamis, 10 November 2016

Mengenal AMP Atau Accelerated Mobile Pages HTML

Mengenal AMP Atau Accelerated Mobile Pages HTML - Hallo sobat blogger selamat dapat di blog Ambarawa Cyber Army. Untuk pertemuan kali ini kita membahas tentang dunia Blog yaitu Mengenal AMP Atau Accelereted Mobile Page HTML. Langsung saja kita simak yuk.
Mengenal AMP Atau Accelerated Mobile Pages HTML
Mengenal AMP Atau Accelerated Mobile Pages HTML

Mengenal AMP Atau Accelerated Mobile Pages HTML

Sobat pernah denger gak sih Accelerated Mobile Page? Akhir tahun 2015 Google merilis projek baru yaitu AMP HTML. AMP HTML atau Accelerated Mobile Pages HTML adalah struktur web yang meminimaliris penggunakaan JavaScript, Css, dan HTML. Visi dari AMP HTML adalah agar webmaster bisa merancang halaman web yang loading lebih cepat, tanpa banyak pengarus JS atau lainnya. AMP HTML memprioritaskan utama untuk user Mobile.

Untuk CSS tidak ada perubahan apapun, untuk HTML ada sedikit struktur berbeda dalam penulisannya diantaranya seperti tag IMG atau VIDEO menjadi amp-img dan amp-video.

Untuk render cepat, kita harus menggunakan AMP Javascript Library yang akan merender halaman dan menampilkan video, gambar, iframe dan lainnya dengan asynchronous. Hal yang wajib adanya dalam AMP HTML adalah :

Dimulai dengan <!doctype html>
Menyertakan <html ⚡> atau <html amp>.
Menyertakan <link rel="canonical" href="$SOME_URL" />, pada tag head untuk mengetahui versi AMP HTML.
Menyertakan <meta charset="utf-8">.
Menyertakan <meta name="viewport" content="width=device-width,minimum-scale=1"> pada tag head.
Menyertakan AMP Javascript Library <script async src="https://cdn.ampproject.org/v0.js"></script> pada tag head.
Menyertakan <style>body {opacity: 0}</style><noscript><style>body {opacity: 1}</style></noscript> pada tag head.

Maka contoh HTML adalah seperti di bawah ini. 
<!doctype html>
<html amp lang="en">
  <head>
    <meta charset="utf-8">
    <title>Hello, AMPs</title>
    <link rel="canonical" href="http://example.ampproject.org/article-metadata.html" />
    <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no,minimal-ui">
    <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>
    <style>body {opacity: 0}</style><noscript><style>body {opacity: 1}</style></noscript>
    <script async src="https://cdn.ampproject.org/v0.js"></script>
  </head>
  <body>
    <h1>Welcome to the mobile web</h1>
  </body>
</html>

Hal Yang Perlu Di Perhatikan

Dalam membuat web berbasis AMP HTML, selain hal di atas ada beberapa hal yang harus diperhatikan diantaranya :

Tidak boleh ada dua tag <style>, apabila ada penambahan maka gunakan <style amp-custom>, itupun hanya satu saja yang diizinkan.
Tidak boleh membuat inline CSS seperti <aside class='sidebar' style='margin-top:0;padding:10px'>.
Script harus external dan menggunakan async.
Script tidak diperbolehkan menggunakan attribute type='text/javascript'
Seperti di atas, tidak boleh menggunakan tag img tapi harus amp-img

Itu yang saya ingat, nanti saya tambahkan apabila ada aturan-aturan lain yang belum tertulis.
sekian informasi yang dapat saya berikan untuk sobat blogger sekalian. semoga bermanfaat.
Sumber Referensi Blog Kang Ismet.

0 komentar: