AdelinaSasa

because you are so priceless...

Thursday

PANASARAN BANGET, APA SIH AMP GOOGLE ITU?

Jika ingin membaca versi bahasa Inggrisnya silahkan kunjungi link: CURIOUS, WHAT IS GOOGLE AMP? - posted by Anissa Auliasari



Umumnya, membaca artikel melaui hape itu lambat, kaku dan bikin frustasi. Namun tentu saja tidak harus selamanya demikian, Proyek AMP (Accelerated Mobile Pages) sebuah proyek terbuka melakukan sebuah terobosan demi mewujudkan impian kita dimana para publisher dapat membuat konten mobile yang optimal dengan kecepatan menampilkan dan memuat konten moble dimana mana, karena sifatnya yang terbuka kita juga diberikan kesempatan untuk berkonstribusi terhadap proyek yang satu ini.

APA SIH BEDANYA HTML KLASIK SAMA AMP?
So pasti beda dong, karena faktanya anda tidak dibenarkan menggunakan secara sembarangan kode Java kecuali untuk modul modul yang telah disediakan oleh AMP Google dan anda tidak dibenarkan menggunakan stylesheet.css kecuali apabila hanya diperuntukan untuk gaya huruf atau font font Google.

Halaman anda adalah PHP, Saya tidak bisa mengujinya secara lokal, jadi bagaimana dong?

Halaman PHP memerlukan setting server lokal seperti WAMP untuk mengunggah item item anda ke sebuah server untuk tujuan melakukan pengujian. Nyatanya bahwa halaman kita adalah PHP tidak berarti menunjukan adanya kode tersebut begitu rumitnya, dan pada faktanya beribu cara dapat kita lakukan untuk membuat hal itu lebih mudah yakni untuk merubah style yang biasanya harus hadir pada tiap barisan kode, tapi membuat suatu perubahan pada kode css bisa jadi saja mimpi buruk bagi anda.


Ada yang bilang tidak ada stylesheet eksternal...tapi kok anda memakai style.css eksternal?

Hal yang separo benar dan separo tidak. Anda camkan baik baik, menambahkan CSS kedalam barisan kode bisa menyebabkan sakit kepala yang berlarut larut, bagi kita sebagai pengguna diharuskan mengedit setiap baris HTML padahal hanya untuk merobah satu bagian dari style saja. Kita perlu sebuah fungsi READ/WRITE daripada PHP (Itulah sebabnya mengapa halaman AMP itu sepenuhnya PHP tetapi basis mereka sebenarnya adalah HTML). Fungsi ini membolehkan kita menggunakan suatu stylsheet eksternal TETAPI sebenarnya itu bukan sepenuhnya eksternal melainkan Internal! Ketika halaman di muat, kode kode CSS ditambahkan kedalam halaman, membuatnya masuk kedalam barisan kode kode dan hal inilah yang menyebabkannya menjadi VALID.

Lalu bagaimana saya mengetahui bahwa halaman AMP saya sudah Valid?

Sangat sederhana. Katakanlah halaman yang anda edit adalah sebuah index.PHP. Maka dari itu link yang anda uji akan terlihat http://awesomebuyer.com/mobile/index.php. Demi untuk mengetahui bahwa halaman telah valid, anda harus menambahkan ini #development=1 di akhir tautan atau link anda, buka konsol dan tekan refresh. Anda akan melihat pesan pada konsol anda yang menyatakan bahwa halaman AMP akan valid jika kodenya benar.
Lebih lanjut kunjungi: https://www.ampproject.org/docs/guides/validate

Apa yang tidak bisa saya gunakan sebagai CSS?

Seperti yang kita telah kita ketahui, AMP sedikit terbatas, tetapi AMP adalah sebuah proyek yang sedang berkembang, jadi tulislah kode kode yang telah diijinkan sekarang, bisa saja berjalan lancar dalam satu atau dua bulan sebelum error datang memusingkan kepala anda lagi, oleh karenanya dianjurkan untuk mengikuti halaman ini: https://www.ampproject.org/docs/guides/responsive/style_pages 
Tetaplah terhubung jika suatu ketika terjadi perubahan lagi

AMP adalah flatform yang sedang bertumbuh kembang, dan pada waktunya menyediakan beberapa kode scripts yang benar benar mengagumkan dan berjalan sangat baik pada produk semisal: https://ampbyexample.com/

CATATAN

1. Pemasangan sebuah script. 
Setelah anda menemukan sebuah script yang anda sukai untuk anda gunakan, maka anda akan mengimpor file JS yang sudah tersedia di bagian kepala daripada item tempat script script tersebut tersedia, hal ini hanya bisa dilakukan menggunakan struktur HTML yang telah tersedia, jika tidak validasi akan gagal.

2. Menggunakan fitur fitur halaman AMP
Seluruh komponen yang kita pakai dapat ditemukan di ampbyexample.com dan lebih jauh di sertai dengan tutorial dan contoh penggunaannya. 
AMP google memiliki cara berbeda dalam menambahkan gambar, anda dapat menemukannya hal tersebut sebagai <amp-img>. Bisa saja kami menjelaskannya akan tetapi jauh lebih mudah apabila anda berkunjung saja untuk mendapatkan contoh di halaman Google AMP  https://www.ampproject.org/docs/guides/responsive/control_layout

Struktur halaman AMP sangat sederhana sebagaimana pada contoh berikut
Header
<header>
      <button class="header-icon-1" on='tap:sidebar.open'><i class="fa fa-navicon"></i></button>
      <a href="index.php" class="header-logo"></a>
      <a href="contact.php" class="header-icon-2"><i class="fa fa-envelope-o"></i></a>
</header>
Header terdiri dari 3 elemen. Sebuah tombol yang mengaktifkan sidebar (harus satu tombol pada setiap setting AMP)
LOGOnya yang dapat anda rubah pada style.css di baris 264.
Ikon terakhir yang kita pilih adalah ikon kontak, akan tetapi anda bisa menambahkan apa saja yang anda inginkan pada pencampuran ini.
Sidebar
<amp-sidebar id="sidebar" layout="nodisplay" side="left">
     <!-- Sidebar Content Here --> 
</amp-sidebar>
Ini adalah basis struktur sidebar 

Sidebar Header 
<div class="sidebar-header">
    <a href="https://www.facebook.com/enabled.labs/"><i class="fa fa-facebook"></i></a>
    <a href="https://twitter.com/iEnabled"><i class="fa fa-twitter"></i></a>
    <a href="tel:+123 456 7890"><i class="fa fa-phone"></i></a>
    <a href="sms:+123 456 7890"><i class="fa fa-comment-o"></i></a>
    <a href="#"><i class="fa fa-times"></i></a>
    <div class="clear"></div>
</div>
Sidebar header terdiri daripada 5 ikon yang terdapat di atas halaman. Ganti semua menurut kebutuhan anda akan tetapi tinggalkan yang teraikhir untuk menutup sidebar

LOGO Sidebar
<a href="#" class="sidebar-logo"></a>
Logo sidebar yang dapat anda ganti pada baris ke 469

Sidebar Divider
<p class="sidebar-divider">Navigation</p>
Pemisah atau separator dengan text anda dapat gunakan untuk membedakan elemen menu

Simple Sidebar Menu Item
<div class="sidebar-menu">
     <a href="index.php" class="sidebar-item"><i class="bg-red-dark fa fa-star-o"></i>Welcome<i class="fa fa-circle"></i></a>
</div>
Kode ini akan membuat sebuah sidebar sederhana daripada sebuah menu item. Tidak ada dropdown, tidak ada efek.

Submenu Sidebar Menu Item
<amp-accordion class="sidebar-menu">
    <section expanded>
    <h4><i class="bg-green-dark fa fa-home"></i>Home<i class="fa fa-angle-down"></i></h4>
    <ul>
        <li class="active-menu"><a href="index.php"><i class="fa fa-angle-right"></i>Classic<i class="fa fa-circle"></i></a></li>
        <li><a href="index-splash.php"><i class="fa fa-angle-right"></i>Splash<i class="fa fa-circle"></i></a></li>
        <li><a href="index-landing.php"><i class="fa fa-angle-right"></i>Landing<i class="fa fa-circle"></i></a></li>
        <li><a href="index-news.php"><i class="fa fa-angle-right"></i>News<i class="fa fa-circle"></i></a></li>
    </ul>
    </section>
</amp-accordion>

Submenu harus di tambahkan didalam struktur yang telah ditunjukan diatas tadi. amp-accordion akan memperbolehkan submenu ditutup dan dibuka. Sementara bagiannya akan menempatkan elemen elemen kode dan menambahkan "perluasan" itu akan membuat menu perluasan atau expanded secara default.
Setiap item didalamnya adalah sederhana - yakni menu item yang telah ditambahkan kedalam daftar elemen

Membuat halaman Paddings

Membuat sebuah lapisan (padding) kiri dan kanan  <div class="content"></div> 
Sebuah kelas kedua adalah sebuah kelas yang dapat menambahkan elemen kode menjadi lebih fleksibel

Mengapa hal ini peneting?
AMP Google adalah tentang bagaimana kita menggunakan kembali elemen elemen dan menggunakan sedikit mungkin style agar kita tetap dapat menjaga ukuran tetap kecil. Maka dari itu kelas kedua untuk warna latar, margin dan border di tujukan agar membuat style sekecil mungkin.

Latar, border dan warna

Anda dapat memilih suatu warna, borderm atau warna latar untuk elemen dengan menambahkan kelas kedua berikut:
bg-teal-light
bg-teal-dark
border-teal-light
border-teal-dark
color-teal-light
color-teal-dark
bg-green-light
bg-green-dark
border-green-light
border-green-dark
color-green-light
color-green-dark
bg-blue-light
bg-blue-dark
border-blue-light
border-blue-dark
color-blue-light
color-blue-dark
bg-magenta-light
bg-magenta-dark
border-magenta-light
border-magenta-dark
color-magenta-light
color-magenta-dark
bg-night-light
bg-night-dark
border-night-light
border-night-dark
color-night-light
color-night-dark
bg-yellow-light
bg-yellow-dark
border-yellow-light
border-yellow-dark
color-yellow-light
color-yellow-dark
bg-orange-light
bg-orange-dark
border-orange-light
border-orange-dark
color-orange-light
color-orange-dark
bg-red-light
bg-red-dark
border-red-light
border-red-dark
color-red-light
color-red-dark
bg-pink-light
bg-pink-dark
border-pink-light
border-pink-dark
color-pink-light
color-pink-dark
bg-gray-light
bg-gray-dark
border-gray-light
border-gray-dark
color-gray-light
color-gray-dark
bg-white
color-white
border-white
bg-black
color-black
border-black

Latarbelakang Media Sosial
facebook-bg
linkedin-bg
twitter-bg
google-bg
whatsapp-bg
pinterest-bg
sms-bg
mail-bg
dribbble-bg
tumblr-bg
reddit-bg
youtube-bg
phone-bg
skype-bg

Warna sosial media:
facebook-color
linkedin-color
twitter-color
google-color
whatsapp-color
pinterest-color
sms-color
mail-color
dribbble-color
tumblr-color
reddit-color
youtube-color
phone-color
skype-color

Opsi Font

Anda juga bisa mengganti parameter font, tipis, lebih kecil, tebal, dan banyak lagi. Tambahkan saja kelas ke elemen huruf dari salah satu pilihandibawah ini:
ultrathin
thin
thiner
boder
bold
ultrabold
capitalize
italic
small-text
center-text
right-text
uppercase
boxed-text

Properti Box
Margin juga bisa dipakai memperbesar elemen tertentu dengan menggunakan kelas kedua:
.container{margin-bottom:30px}
.full-bottom{margin-bottom:25px}
.no-bottom{margin-bottom:0px}
.full-top{margin-top:25px}
.half-bottom{margin-bottom:15px}
.half-top{margin-top:15px}
.quarter-bottom{margin-bottom:15px}
.hidden{display:none}
  
 Tombol

Tombol-tombol
Tombol tombol mudah dipergunakan. Anda tambahkan saja Tombol class dan lalu kelas kedua untuk warna sesuai keinginan anda
<div class="content">
    <a href="#" class="button bg-green-light">Button</a>
    <a href="#" class="button bg-red-light">Button</a>
    <a href="#" class="button bg-blue-light">Button</a>
    <a href="#" class="button bg-teal-light">Button</a>
    <a href="#" class="button bg-magenta-light">Button</a>
    <a href="#" class="button bg-night-light">Button</a>
    <a href="#" class="button bg-orange-light">Button</a>
    <a href="#" class="button bg-gray-dark">Button</a>
    <a href="#" class="button bg-pink-dark">Button</a>
</div>

Icons
Ikon juga gampang di pergunakan. Tersedia sebuah ikon, dan sebuah warna
<div class="content">
    <a href="#" class="icon-round facebook-bg"><i class="fa fa-facebook"></i></a>
    <a href="#" class="icon-round google-bg"><i class="fa fa-google-plus"></i></a>
    <a href="#" class="icon-round twitter-bg"><i class="fa fa-twitter"></i></a>
    <a href="#" class="icon-round pinterest-bg"><i class="fa fa-pinterest"></i></a>
    <a href="#" class="icon-round dribbble-bg"><i class="fa fa-dribbble"></i></a>

    <a href="#" class="icon-square facebook-bg"><i class="fa fa-facebook"></i></a>
    <a href="#" class="icon-square google-bg"><i class="fa fa-google-plus"></i></a>
    <a href="#" class="icon-square twitter-bg"><i class="fa fa-twitter"></i></a>
    <a href="#" class="icon-square pinterest-bg"><i class="fa fa-pinterest"></i></a>
    <a href="#" class="icon-square dribbble-bg"><i class="fa fa-dribbble"></i></a>
</div>
Form kontak 100% telah diuji, dan sepenuhnya valid, maka jika terdapat isu terkait masalah itu ikuti petunjuk:
1. Pastikan halaman anda sudah Valid AMP, jika tidak valid form kontak tidak akan mengirimkan pesan
2. Hubungi provider hosting kontak anda dan minta mereka untuk mensetting PHP untuk ini
<IfModule mod_security.c>
    SecFilterEngine Off
    SecFilterScanPOST Off
</IfModule>
Tanpa setting setting ini form kontak tidak akan mengerimkan pesan untuk anda!
Sumber: enable

15 comments:

Dody Purwanto said...

Waduh, kalau sudah urusan "coding" mumet nih urusannya. Saya mah belum kepikiran untuk memakai AMP, karena template yg sekarang malah lebih bagus saat diakses pake perangkat mobile. Yang penting update terus...dan ngopi yuk? hehehe....

Ivlay Fus said...

Saya juga walau sudah punya AMP satu belum dipakai cuma buat percobaan menunggu sampai masa uji beta sempurna. Masih sama pakai blogger konvensional karena pilihan kustom masih banyak, apalagi yang responsif kadang juga cepat melebihi AMP

Anissa Auliasari said...

Lebih pas pakai wordpress hosting dan custom domain

Risna said...

Wah jadi tersudut nih critanya, amp sendiri dri hp pula 😊

Kang Nata said...

saya juga penasaran tentang AMP GOogle, setelah membaca artikel ini saya mulai dapat pencerahan. :)

Ivlay Fus said...

Tidak, justru kamu sedang melakukan cara ngeblog masa depan!

Ivlay Fus said...

Itu hasil diskusi di forum sama personil enable. Asik

Risna said...

Masa depannya bahasa isarat ya Mz, aslinya gk punya modal hihi

Anissa Auliasari said...

Menurutku walaupun untuk masa sekarang AMP belum sepenuhnya stabil, namun bisa benar itu adalah cara ngeblog dimasa depan. Tapi masa depan itu ditentukan oleh banyak hal di masa kini. Bisa jadi sebuah ide gagal walau pada awalnya nampak begitu menjanjikan seperti AMP. Namun bisa jadi pula merupakan awal daripada sebuah terobosan yang brilian.

Ivlay Fus said...

Tapi klo melihat targetnya adalah perangkat mobile, maka AMP 99% bisa berhasil. Kecuali trend mobile bergeser lagi ke layar lebar namun mudah digululung (elastis, dan ini adalah ide Samsung maka bisa jadi trend mobile akan bergeser mengikuti selera zaman. Karena perubahan semakin cepat dan tidak terduga.

Klo sudah gitu orang bisa kembali ke trend website dan blog konvensional he he he

Anissa Auliasari said...

Hmmm...hmmm...

Dzikri Khasnudin said...

baru saja sedikit paham soal html dan css, udah di kasih amp..next time aja kayanya, hehehe

Teguh 1978 said...

Sepertinya template AMP asik juga, load lebih cepet, sayang blogger belum support, harus edit sebelum publish artikel, saya tetep nungguin template AMP blogger, siapa tahu bulan depan ada di bawah HTML layout blogger hi hi hi ...

Ivlay Fus said...

AMP kalau tidak ada perubahan yang tidak terduga akan menjadi cara dan trend ngeblog di masa depan

Risna said...

Masa depan sih gk tau Mz, bisa nulis hari ini aja udah syukur, efek dpet kiriman pulsa gk tau orangnya sapa 😕