Google AMP - Öznitelikler

Bu bölümde, amp-components tarafından kullanılan tüm genel özellikler tartışılacaktır.

Ortak özniteliklerin listesi aşağıdaki gibidir -

  • fallback
  • heights
  • layout
  • media
  • noloading
  • on
  • placeholder
  • sizes
  • genişlik ve yükseklik

geri dönüş özelliği

Fallback özniteliği çoğunlukla, tarayıcı kullanılan öğeyi desteklemediğinde veya dosya yüklemeyle ilgili sorunlar yaşadığında veya kullanılan dosyada hatalar olduğunda kullanılır.

Örneğin, amp-video kullanıyorsunuz ve medya dosyası tarayıcıda sorunlar yaşıyor, bu nedenle bu gibi durumlarda, yedek özniteliğini belirleyebilir ve medya dosyasının oynatılamayacağını veya tarayıcı tarafından desteklenmediğini belirten bir mesaj görüntüleyebiliriz. sayfadaki hata mesajı.

Amp-videoda kullanılan yedek

<amp-video controls
   width = "640"
   height = "360"
   layout = "responsive"
   poster = "images/videoposter.png">
   <source src = "video/bunny.webm" type = "video/webm" />
   <source src = "video/samplevideo.mp4" type = "video/mp4" />
   <div fallback>
      <p>This browser does not support the video element.</p>
   </div> 
</amp-video>

Bir örnek kullanarak işletim sistemi geri dönüşünü anlayalım -

Misal

<!doctype html>
<html amp lang = "en">
   <head>
      <meta charset = "utf-8">
      <script async src = "https://cdn.ampproject.org/v0.js"></script>
      <title>Google AMP - Amp Video</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">
   
      <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 custom-element = "amp-video" 
         src = "https://cdn.ampproject.org/v0/amp-video-0.1.js">
      </script>
   </head>
   <body>
      <h3>Google AMP - Amp Video</h3>
      <amp-video controls
         width = "640"
         height = "360"
         layout = "responsive"
         poster = "images/videoposter.png">
         <source src = "video/bunny.webm"type="video/webm" />
         <source src = "video/samplevideo.mp4"type = "video/mp4" />
         <div fallback>
            <p>This browser does not support the video element.</p>
         </div>
      </amp-video>
   </body>
</html>

Çıktı

Yükseklik Özelliği

Bu özellik, temelde duyarlı bir düzen için desteklenir. Yükseklik özniteliği için bir medya ifadesi kullanabilirsiniz ve bu, öğenin yüksekliğine uygulanır. Yüzde değerlerini de alır, böylece yükseklik, verilen yüzde genişliğine göre hesaplanır.

Misal

<!doctype html>
<html amp lang = "en">
   <head>
      <meta charset = "utf-8">
      <script async src = "https://cdn.ampproject.org/v0.js"></script>
      <title>Google AMP - heights attribute</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">
      
      <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>
         amp-img {
            border: 1px solid black;
            border-radius: 4px;
            padding: 5px;
         }
         h1{font-family: "Segoe UI",Arial,sans-serif;font-weight: 400;margin: 10px 0;}
      </style>
   </head>
   <body>
      <h1>Google AMP - heights attribute</h1>
      <amp-img src = "images/christmas1.jpg"
         width = "320" height = "256"
         heights = "(min-width:500px) 200px, 80%">
      </amp-img>
   </body>
</html>

Çıktı

düzen özelliği

AMP-Layout, google-amp'de bulunan önemli özelliklerden biridir. Amp Layout, sayfa yüklendiğinde herhangi bir titreme veya kaydırma sorununa neden olmadan amp bileşenlerinin düzgün şekilde oluşturulmasını sağlar. Ayrıca, görüntülere yönelik http isteği, veri çağrıları yapılmadan önce sayfa oluşturmayı kontrol eder.

Amp tarafından desteklenen düzen listesi aşağıdaki gibidir -

  • Mevcut değil
  • Container
  • fill
  • fixed
  • fixed-height
  • flex-item
  • intrinsic
  • nodisplay
  • Responsive

Aynı bölümde detaylı olarak öğreneceksiniz. Google AMP − Layout bu öğreticinin.

Gösterildiği gibi bir örnek yardımıyla layout = "responsive" çalışmasını anlayalım -

Misal

<!doctype html>
<html amp lang = "en">
   <head>
      <meta charset = "utf-8">
      <script async src = "https://cdn.ampproject.org/v0.js"></script>
      <title>Google AMP - Image>/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">
      
      <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>
         amp-img {
            border: 1px solid black;
            border-radius: 4px;
            padding: 5px;
         }
         displayitem {
            display: inline-block;
            width: 200px;
            height:200px;
            margin: 5px;
         }
         h1{font-family: "Segoe 
         UI",Arial,sans-serif;font-weight: 400;margin: 10px 0;}
      </style>
   </head>
   <body>
      <h1>Google AMP - Layout = responsive Image Example>/h1>
      <div class = "displayitem">
         <amp-img alt = "Beautiful Flower"
            src = "images/flower.jpg"
            width = "246"
            height = "205"
            layout = "responsive">
         </amp-img>
      </div>
   </body>
</html>

Çıktı

Medya Özniteliği

Bu özellik, amp bileşenlerinin çoğunda kullanılabilir. Bir medya sorgusu alır ve değer eşleşmezse bileşen işlenmez.

Bir örnek yardımıyla medya özniteliğinin işleyişini anlayalım -

Misal

<!doctype html>
<html amp lang = "en">
   <head>
      <meta charset = "utf-8">
      <script async src = "https://cdn.ampproject.org/v0.js"></script>
      <title>Google AMP - Image</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">
      
      <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>
         amp-img {
            border: 1px solid black;
            border-radius: 4px;
            padding: 5px;
         }
         h1{font-family: "Segoe 
         UI",Arial,sans-serif;font-weight: 400;margin: 10px 0;}
      </style>
   </head>
   <body>
      <h1>Google AMP - Media Attribute</h1>
      <div class = "displayitem">
         <amp-img
            media = "(min-width: 600px)"
            src = "images/christmas1.jpg"
            width = "466"
            height = "355"
            layout = "responsive">
         </amp-img>
      </div>
   </body>
</html>

Aşağıda gösterildiği gibi <amp-img> etiketinde media niteliği kullandık -

<amp-img
   media = "(min-width: 600px)"
   src = "images/christmas1.jpg"
   width = "466"
   height = "355"
   layout = "responsive">
</amp-img>

Ekran genişliği 600 pikselden azsa görüntünün görüntülenmeyeceğini unutmayın. Örneği test etmek için Google emülatörü mobil modunu kullanacağız.

Akıllı Telefonda Çıktı

Cihazın genişliği 600 pikselden az olduğu için resmin görünmediğini cihazda kontrol ettik. Bir tableti kontrol edersek, çıktıyı aşağıda gösterildiği gibi alırız -

IPAD üzerinde çıktı

Noloading Attribute

<amp-img>, <amp-video>, <amp-facebook> gibi Amp bileşenleri, gerçek içerik yüklenmeden ve kullanıcıya gösterilmeden önce bir yükleme göstergesi gösterir.

Yükleme göstergesini göstermeyi durdurmak için, noloading özelliğini aşağıdaki gibi kullanabiliriz -

<amp-img src = "images/christmas1.jpg"
   noloading
   height = "300"
   width = "250"
   layout = "responsive">
</amp-img>

Öznitelik Üzerine

On özelliği, olay işlemeye yönelik öğelerde ve amp-bileşenlerindeki eylemlerde kullanılır. Öznitelikte kullanılacak sözdizimi aşağıdaki gibidir -

Sözdizimi -

on = "eventName:elementId[.methodName[(arg1 = value, arg2 = value)]]"

Detaylar geçti on nitelik aşağıdaki gibidir -

  • eventName- Bu, amp-bileşeni için mevcut olan etkinliğin adını alır. Örneğin, formlar için submit-success, submit-error eventNames kullanabiliriz.

  • elementId- Bu, olayın çağrılması gereken öğenin kimliğini alır. Başarı veya hata hakkında bilmek istediğimiz formun kimliği olabilir.

  • methodName - Bu, olay oluşumunda çağrılacak yöntemin adını alır.

  • arg=value - Bu, yönteme iletilen anahtar = değer biçimine sahip bağımsız değişkenleri alır.

Birden çok olayı Açık özniteliğine aşağıdaki gibi geçirmek de mümkündür -

on = "submit-success:lightbox;submit-error:lightbox1"

Note - Birden fazla olay varsa, bunlar on niteliğine aktarılır ve noktalı virgül (;) kullanılarak ayrılır.

Eylemler Özniteliği

Eylemler temelde on niteliğiyle kullanılır ve sözdizimi aşağıdaki gibidir -

on = "tab:elementid.hide;"

Birden çok işlemi aşağıdaki gibi gerçekleştirebiliriz -

on = "tab:elementid.open;tab:elementid.hide;”

Elementid eylemin gerçekleştirileceği öğenin kimliğidir.

Amp, herhangi bir amp bileşeninde kullanılabilen bazı küresel olarak tanımlanmış olay ve eylemlere sahiptir ve bunlar tap events ve eylemler hide, show ve togglevisibility.

Note - Herhangi bir html veya amp bileşeninde gizlemek / göstermek veya togglevisibility kullanmak istiyorsanız, on=”tap:elementid.[hide/show/togglevisibility]”

Yer Tutucu Özelliği

Yer tutucu özelliği, bir giriş öğesi gibi herhangi bir html öğesinde kullanılabilir ve ayrıca bir amp bileşeninde de kullanılabilir. Yer tutucu, sayfada gösterilecek ilk şeydir ve içerik yüklendikten sonra yer tutucu kaldırılır ve görünmez yaptı.

Giriş öğesinde yer tutucu

<input type = "text" id = "date" name = "date" placeholder = "Start Date">

Amp-component üzerindeki yer tutucu

<amp-anim src = "images/loreal.gif" width = "300" height = "250" layout = "responsive">
   <amp-img placeholder src = "images/flower.jpg" 
   layout = "fill">
   </amp-img>
</amp-anim>

Boyutlar Özelliği

Bu, aynı yükseklik özelliği gibi kullanılır. Değer, aşağıda gösterildiği gibi bir ifadedir -

<amp-img src = "amp.png"
   width = "400" height = "300"
   layout = "responsive"
   sizes = "(min-width: 250px) 250px, 100vw">
</amp-img>

Genişlik ve Yükseklik Özellikleri

Hemen hemen tüm html öğelerinde ve amp bileşenlerinde kullanılırlar. Genişlik ve yükseklik, bir amp öğesinin sayfada kapladığı alanı belirtmek için kullanılır.

Misal

<amp-img src = "amp.png"
   width = "400" height = "300"
   layout = "responsive">
</amp-img>
ja/tutorial
es/tutorial
de/tutorial
fr/tutorial
th/tutorial
pt/tutorial
ru/tutorial
vi/tutorial
it/tutorial
ko/tutorial
tr/tutorial
id/tutorial
pl/tutorial
hi/tutorial
japost
espost
depost
frpost
thpost
ptpost
rupost
vipost
itpost
kopost
trpost
idpost
plpost
hipost

© Copyright 2021 - 2024 | All Rights Reserved