Minggu, 30 Oktober 2016

Home » » Amp Mobile

Amp Mobile

Tidak ada komentar

Membuat Halaman AMP HTML

Amp Mobile

Markup berikut merupakan titik awal yang sesuai atau boilerplate. Salin yang berikut ini dan simpanlah ke file dengan ekstensi .html.

<!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,minimum-scale=1,initial-scale=1">
    <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 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>Welcome to the mobile web</h1>
  </body>
</html>

Materi dalam badan teks sejauh ini tidak sulit dipahami. Namun ada banyak kode tambahan dalam kepala halaman yang mungkin tidak langsung bisa dipahami. Mari kita uraikan markup wajib ini:

 

Markup wajib



Dokumen AMP HTML HARUS:
  • Mulai dengan tipe dokumen <!doctype html>.
  • Berisi tag <html ⚡> tingkat atas (<html amp> juga berterima).
  • Berisi tag <head> dan <body> (Keduanya opsional dalam HTML).
  • Berisi tag <link rel="canonical" href="$SOME_URL" /> dalam bagian kepala yang menunjuk pada versi HTML reguler dari dokumen AMP HTML atau menunjuk pada dirinya sendiri jika tidak ada versi HTML seperti itu.
  • Berisi tag <meta charset="utf-8"> sebagai anak pertama dari tag kepalanya.
  • Berisi tag <meta name="viewport" content="width=device-width,minimum-scale=1"> di dalam tag kepalanya. Juga disarankan untuk menyertakan initial-scale=1.
  • Berisi tag <script async src="https://cdn.ampproject.org/v0.js"></script> sebagai elemen terakhir dalam kepalanya (ini mencakup dan memuat pustaka AMP JS).
  • Berisi yang berikut dalam tag <head>-nya: <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>

 Baca Juga Artikel : 
Mediasi Admob
4 Alasan Untuk Menggunakan Admob
Pentingnya Uji Iklan di App Anda
Bagaimana Membangun Stategi Pertumbuhan App Anda


Meta-data opsional

Selain persyaratan yang tak mendetail, sampel kami juga menyertakan definisi Schema.org pada bagian kepalanya, yang bukan merupakan persyaratan ketat bagi AMP, namun diwajibkan agar materi Anda didistribusikan di beberapa tempat, misalnya dalam Demo menu korsel berita Google Penelusuran (cobalah pada ponselAnda).

Untuk mengetahui selengkapnya tentang meta-data yang akan Anda butuhkan di berbagai tempat berbeda, misalnya Twitter, jelajahilah sampel kami Untuk mempelajari secara khusus tentang AMP dalam Google Penelusuran, lihat Cerita Teratas denganAMP.

Kabar gembira! Itulah semua yang kita perlukan untuk membuat halaman AMP kita yang pertama, belum banyak yang terjadi di dalam bagian badan. Dalam bagian berikutnya, kita akan membahas mengenai cara menambahkan hal-hal dasar seperti gambar, elemen AMP khusus, cara menggayakan halaman Anda dan mengerjakan layout responsif.

Amp Mobile

Menyertakan Gambar


Sebagian besar tag HTML bisa digunakan secara langsung dalam AMP HTML, namun tag tertentu seperti tag <img>, diganti dengan yang setara atau tag AMP HTML khusus yang telah sedikit disempurnakan (dan beberapa tag bermasalah langsung dicekal, lihat Tag HTML dalam spesifikasi).

Untuk mendemonstrasikan seperti apa tampilan markup tambahan ini, berikut kode yang diperlukan untuk menyematkan sebuah gambar ke dalam halaman:

<amp-img src="welcome.jpg" alt="Welcome" height="400" width="800"></amp-img>

Untuk mengetahui alasan kami mengganti tag seperti <img> dengan <amp-img>, dan jumlah ketersediaannya, kunjungi Menyertakan Iframe danMedia.

Memodifikasi Presentasi dan Layout

Memodifikasi presentasi

AMP adalah laman web, setiap penerapan gaya pada halaman dan elemen-elemennya dilakukan menggunakan properti CSS umum. Elemen gaya menggunakan pemilih kelas atau elemen dalam stylesheet sisipan dalam <head> yang disebut dengan <style amp-custom>:

<style amp-custom>
  /* any custom style goes here */
  body {
    background-color: white;
  }
  amp-img {
    background-color: gray;
    border: 1px solid black;
  }
</style>

Setiap halaman AMP hanya bisa memiliki satu sylesheet yang disematkan, dan ada pemilih tertentu yang tidak bisa Anda gunakan. Ketahui semua tentang penggayaan.

Mengontrol layout

AMP mengikuti aturan yang lebih ketat saat melayout elemen pada halaman. Pada halaman HTML biasa, Anda hampir pasti menggunakan CSS secara eksklusif untuk melayout elemen. Namun karena alasan kinerja, AMP mewajibkan semua elemen untuk memiliki set ukuran eksplisit dari get-go.

Ketahui tentang cara AMP merender dan melayout halaman dan cara Anda bisa memodifikasi layout dalam Cara Mengontrol Layout.

Pratinjau dan Validasi

Pratinjau halaman AMP seperti Anda ingin mem-pratinjau situs HTML statis lainnya. Tidak ada langkah pembangunan atau prapemrosesan yang diperlukan. Gunakan salah satu cara berikut:
  • Membukanya secara langsung dalam browser dari sistem file (elemen tertentu mungkin tidak berfungsi karena gagalnya XMLHttpRequests).
  • Menggunakan server web lokal seperti Apache 2 atau Nginx. (Tip: Untuk server web yang cepat, jalankan python -m SimpleHTTPServer.)

Berikutnya, pastikan bahwa halaman AMP Anda benar-benar merupakan halaman AMP yang valid, jika tidak maka halaman tidak akan ditemukan dan didistribusikan oleh platform pihak ketiga seperti Google Penelusuran. Untuk memvalidasi:
  1.  Buka halaman Anda di browser.
  2. Tambahkan "#development=1" ke URL, misalnya, http://localhost:8000/released.amp.html#development=1.
  3. Buka konsol Chrome DevTools dan periksa kesalahan validasi.

Ketahuiselengkapnya mengenai validasi, dan tindakan yang harus Anda lakukan jika menjumpai kesalahan.

Menyiapkan Halaman Anda untuk Pencarian dan Distribusi

Dalam beberapa kasus, Anda mungkin menginginkan versi non-AMP dan AMP dari halaman yang sama, misalnya, artikel berita. Pertimbangkan ini: Jika Google Penelusuran menemukan versi non-AMP dari halaman itu, bagaimana Google Penelusuran mengetahui bahwa ada versi AMP dari halaman itu?


Menautkan halaman dengan <link>

Untuk menyelesaikan masalah ini, kami menambahkan informasi tentang halaman AMP ke halaman non-AMP dan sebaliknya, dalam bentuk tag <link> dalam <head>.

Tambahkan yang berikut ini ke halaman non-AMP:

<link rel="amphtml" href="https://www.example.com/url/to/amp/document.html">

Tambahkan ini ke halaman AMP

<link rel="canonical" href="https://www.example.com/url/to/full/document.html">

Bagaimana jika saya memiliki satu halaman saja?

Jika Anda hanya menautkan satu halaman, dan halaman itu adalah halaman AMP, Anda masih harus menambahkan tautan kanonis ke halaman itu, yang kemudian hanya akan menunjuk pada halaman itu sendiri:

<link rel="canonical" href="https://www.example.com/url/to/amp/document.html">

Langkah-Langkah Terakhir Sebelum Mempublikasikan

Selamat! Anda telah menguji halaman Anda secara lokal dan memperbaiki semua kesalahan validasi, yang berarti halaman AMP pertama Anda siap dikirimkan.

Kenali cara kerja AMP dan semua sifat elemen dengan mencoba-coba navigasi di sebelah kiri, dan dapatkan informasi umum lainnya mengenai berbagai alat yang bisa membantu mempersiapkan produksi materi Anda dengan mengunjungi Memulai AlurKerja Pengembangan Anda. 

 Pastikan untuk tetap terhubung pada Panduan Belajar Admob Dengan Mengikuti Facebook, Twitter, Google+, Rss dan Youtube.
Baca Juga Artikel : 
Share:

0 komentar:

Posting Komentar

Follower Social Media

Translate

Pengikut

  • 8 Pasar Pertumbuhan Bitcoin Tercepat
    Sebagian besar negara melihat volume bitcoin melonjak pada 2016, namun beberapa pasar tumbuh lebih cepat daripada yang lain.  Bitcoin . com...
  • Cara Daftar Admob
    Cara Daftar Admob Selamat datang di Panduan Belajar AdMob ! Untuk menggunakan AdMob, Anda harus mendaftarkan akun Cara Daftar Adm...
  • Apa Itu Admob ??
    PANDUAN BELAJAR ADMOB, APA ITU ADMOB ?? Apa Itu Admob Apa Itu Admob   -   Menurut Sumber   Wikipedia   Indonesia  AdMob  adalah perus...
  • 3 Tips Mudah Membangun Hubungan Audiens
    3 Tips Mudah Untuk Membangun Hubungan Dengan Audiens Anda Menggambar pengunjung baru ke situs Anda, hanya setengah pertempuran. Memi...

Arsip Blog