Tutorial Mengenal AMP HTML

AMP HTML adalah cara untuk membangun halaman web statis dengan kinerja yang handal dan kinerja yang cepat. Ini adalah upaya untuk memperbaiki struktur web, karena banyak web yang lamban diakses, terutama menggunakan mobile/ponsel.

AMP HTML dibangun dengan struktur web yang sudah ada, tapi membatasi CSS, HTML dan JavaScript agar website lebih cepat diakses.

Bagaimana AMP HTML bekerja?


AMP HTML bekerja dengan menambahkan AMP JavaScript library dan tidak merubah struktur utama sebuah web. Struktur web seperti biasa, hanya ditambahkan AMP JS library sehingga mencukupi spek AMP HTML. Kode sederhana dari sebuah web dengan AMP HTML seperti ini :

<!doctype html>
<html ?>
  <head>
    <meta charset="utf-8">
    <link rel="canonical" href="hello-world.html" >
    <meta name="viewport" content="width=device-width,minimum-scale=1,initial-scale=1">
    <style>body {opacity: 0}</style><noscript><style>body {opacity: 1}</style></noscript>
    <script async src="https://cdn.ampproject.org/v0.js"></script>
  </head>
  <body>Hello World!</body>
</html>

Dengan menambahkan AMP JS Library, akan mencakup :
  • AMP JS Library, yang mengelola pemuatan sumber daya eksternal untuk memastikan halaman di render lebih cepat.
  • Sebuah validator AMP yang menyediakan cara bagi pengembang web untuk dengan mudah memvalidasi bahwa kode mereka memenuhi spesifikasi AMP HTML.
  • Beberapa elemen kustom, yang disebut komponen HTML AMP, yang membuat pola umum mudah diimplementasikan.

AMP JS library


AMP JS library sudah menyertakan komponen yang builtin (amp-ad, amp-video, amp-img, amp-pixel) sehingga tidak diperlukan lagi script tambahan, untuk mempercepat render.

AMP Validator


AMP Validator memungkinkan pengembang web untuk dengan mudah mengidentifikasi jika halaman web tidak memenuhi spesifikasi AMP HTML.

Menambahkan kata "#depelopment=1" kedalam URL halaman AMP HTML akan memudahkan pengembang untuk mengetahui kesalahan struktur AMP HTML.

AMP HTML Components


AMP HTML Components adalah serangkaian elemen kustom tambahan atau mengganti fungsi dari elemen HTML5.
  • Menggantikan elemen HTML5 yang speknya tidak diizinkan seperti amp-img dan amp-video.
  • Menerapkan konten pihak ketiga , seperti amp-youtube, amp-ad, dan amp-twitter.
  • Menambahkan desain lain, seperti amp-lightbox dan amp-carousel.
  • Mempermudah teknik pembuatan web, seperti amp-anim, yang memungkinkan pengembang web untuk menampilkan gambar animasi, baik gambar (GIF) atau file video (WebM atau MP4) berdasarkan kompatibilitas browser.

Comments

Post a Comment

Popular posts from this blog

How to use Google Dork ?

How to use Google Dork ? Simple, insert your keyword in Google Dork syntax and insert in the search engine king, Google search box and hit enter. Some of the vital Google Dork terms Site: This parameter is used for searching for things from particular websites. If you search site:yourwebsiteurl.com then Google will display your results only from yourwebsiteurl.com inurl: This parameter filters the result which has keywords in the URL. If you search inurl:Cooking then Google will display only those search results which have the word Cooking in the URL Keywords in quotes: When you search by putting your keywords in quotes (“), Google will display only those pages which exactly matches the keywords you have put in quotes. For e.g. “Painting Classes in California” will display results which include the exact phrase in an article. Google Backlink Dorks most widely used by Expert Digital Marketer. site:.edu inurl:blog site:.edu inurl:forum site:.gov inurl:blog site:.gov inurl...
Read more

Tutorial Cara Penulisan image pada AMP HTML Blogger

Image
amp-img AMP HTML Untuk image, tidak diperlukan JavaScript khusus, sudah cukup dengan JS AMPHTML secara umum. Ada perbedaan cara penulisan image dari biasanya. Kode untuk image: <amp-img src="url-image-disini" width="1080" height="610" layout="responsive" alt="AMP HTML"></amp-img> Layout yang support: fill , fixed , fixed-height , flex-item , nodisplay , responsive Gunakan srcset untuk menentukan gambar sesuai ukuran layar. Kodenya seperti ini <amp-img src="https://ampbyexample.com/img/amp.jpg" srcset="https://ampbyexample.com/img/amp.jpg 1080w, https://ampbyexample.com/img/amp-900.jpg 900w, https://ampbyexample.com/img/amp-800.jpg 800w, https://ampbyexample.com/img/amp-700.jpg 700w, https://ampbyexample.com/img/amp-600.jpg 600w, https://ampbyexample.com/img/amp-500.jpg 500w, https://ampbyexample.com/img/amp-400.jpg 400w, https://ampbyexample.com/img/amp-300.jpg 300w, h...
Read more

Pasang Google Maps Di Blog Versi AMP

Image
Kali ini saya akan meberikan tutorial cara Pasang Google Maps Di Blog AMP , gunakan script di bawah ini untuk memasang map yan anda butuhkan adalah link map anda sendiri kamu bisa mencari alamat rumah kamu di  link berikut sebelum nya lihat contoh link map milik saya  https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d818.5579144661741!2d104.74934867690571!3d-5.322096241436687!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x2e473c0d4cfbc6cb%3A0x4971da07f873a3b6!2sFery+Ferlangga!5e1!3m2!1sen!2s!4v1482861152022 ini adalah link map rumah saya dan sudah terdaftar di google map untuk mencari map alamat anda silakan kunjungi link berikut  https://www.google.co.id/maps/ silakan cari alamat rumah anda dengan mengetikan nama jalan rumah anda jika sudah ketemu masukan link yang terdapat di bar atas ke script berikut ini <amp-iframe width="600" height="400" layout="responsive" sandbox="allow-scri...
Read more