Güzel, etkileşimli, standart AMP sayfaları

AMP, güvenilir, duyarlı, performansı yüksek web sayfaları oluşturmayı kolaylaştırır. AMP, JavaScript yazmak zorunda kalmadan yaygın site etkileşimleri oluşturmanıza olanak tanır. amp.dev web sitesinde önceden tasarlanmış hızlı başlangıç şablonları bulunur.

Geliştireceğiniz uygulama

Bu codelab'de, AMP'nin birçok özelliğini ve genişletilmiş bileşenlerini içeren, tamamen duyarlı, etkileşimli ve güzel bir AMP sayfası oluşturacaksınız:

  • Uyumlu gezinme
  • Tam sayfa lokomotif kapak resmi
  • Uyumlu görseller
  • Otomatik oynatılan video
  • Instagram gibi yerleştirmeler
  • İşlemler ve seçiciler
  • amp-bind ile veri bağlama
  • amp-fx-collection ve amp-animation ile görsel efektler

Gerekenler

  • Modern bir web tarayıcısı
  • Node.js ve bir metin düzenleyici veya CodePen ya da benzer bir online oyun alanına erişim
  • HTML, CSS, JavaScript ve Google Chrome Geliştirici Araçları ile ilgili temel bilgiler

İçerik yayınlama aracı

AMP sayfamızı yayınlamak için yerel bir HTTP sunucusu çalıştırmak üzere Node.js kullanırız. Nasıl yükleneceğini öğrenmek için Node.js web sitesine bakın.

İçeriği yerel olarak sunmak için kullandığımız araç, Node.js tabanlı bir statik içerik sunucusu olan serve olacaktır. Bu uygulamayı yüklemek için aşağıdaki komutu çalıştırın:

npm install -g serve

amp.dev'den şablon indirin

AMP Şablonları, hızlı ve modern AMP sayfaları oluşturmanıza yardımcı olan hızlı başlangıç AMP şablonlarının ve bileşenlerinin yer aldığı bir depodur.

AMP Şablonları'nı ziyaret edin ve "Yılın En İyi Hayvan Fotoğrafları" şablonu için "Basit Makale" kodunu indirin.

Şablon kodunu çalıştırma

ZIP dosyasının içeriğini ayıklayın.

Dosyaları yerel olarak sunmak için article klasöründe serve komutunu çalıştırın.

Tarayıcınızda http://localhost:5000/templates/article.amp.html adresini ziyaret edin. (Bağlantı noktası, serve sürümüne bağlı olarak 3000 veya farklı bir sayı olabilir. Tam adres için konsolu kontrol edin.)

Biz bu konuyla ilgileniyorken Chrome Geliştirici Araçları'nı açıp Cihaz modunu da açalım.

Şablon kodunu kırpma

Bu aşamada, çoğunlukla işlevsel olan bir AMP sayfasını şifreliyoruz. Ancak bu codelab'in amacı, öğrenmeniz ve alıştırma yapmanızdır.

<body></body> içindeki her şeyi silin.

Şimdi yalnızca birkaç ortak kod içeren boş bir sayfa kaldı:

Bu codelab boyunca bu boş sayfaya birçok bileşen ekleyerek şablonu daha da fazla işlevle kısmen yeniden oluşturacaksınız.

AMP sayfası, ek etiketlere ve güvenilir performans için bazı kısıtlamalara sahip bir HTML sayfasıdır.

AMP sayfasındaki etiketlerin çoğu normal HTML etiketleri olsa da, bazı HTML etiketleri AMP'ye özgü etiketlerle değiştirilir. AMP HTML bileşenleri adı verilen bu özel öğeler, sık kullanılan kalıpların etkili bir şekilde uygulanmasını kolaylaştırır.

En basit AMP HTML dosyası şu şekilde görünür (bazen AMP ortak paneli olarak da adlandırılır):

<!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 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>Hello World!</body>
</html>

Kurulum sırasında oluşturduğunuz boş sayfanın koduna göz atın. Bu ortak metin içeren ve birkaç ek (ve önemli ölçüde küçültülmüş CSS içeren) bir <style amp-custom> etiketi içeren kod bulunur.

AMP, tasarım konusunda bakış açısına sahip değildir ve belirli bir stil grubunu zorunlu kılmaz. Çoğu AMP bileşeni çok temel bir stile sahiptir. Özel CSS'lerini sağlamak için sayfa yazarlarına bırakılır. İşte <style amp-custom> devreye giriyor.

Ancak AMP Şablonları, hızlı bir şekilde zarif AMP sayfaları oluşturmanıza yardımcı olmak için güzel tasarlanmış, tarayıcılar arası ve duyarlı olan kendi kullanışlı CSS stillerini sunar. İndirdiğiniz şablon kodu, <style amp-custom>. içerisinde bu düşünülmüş CSS stillerini içeriyor

Şablondan kaldırdığımız bileşenlerden bazılarını ekleyerek bir gezinme menüsü, sayfa başlığı resmi ve başlık gibi sayfamız için bir kabuk oluşturacağız.

AMP Start kullanıcı arayüzü bileşenleri sayfasından yardım alacağız, ancak uygulama ayrıntılarını derinlemesine inceleyeceğiz. Codelab'deki sonraki adımlar birçok fırsat sağlayacaktır.

Duyarlı gezinme ekleme

https://ampstart.com/components#navi adresine gidin ve RESMİ MENUBAR için sağlanan HTML kodunu kopyalayıp sayfanızın body bölümüne yapıştırın.

AMP Start'ın sağladığı kod, sayfanız için duyarlı gezinme çubuğu uygulamak üzere gerekli HTML ve CSS sınıf yapısını içerir.

Deneyin: Pencerenizin farklı ekran boyutlarına nasıl yanıt verdiğini görmek için yeniden boyutlandırın.

Bu kod, CSS medya sorgularını ve amp-sidebar ile amp-accordion AMP bileşenlerini kullanır.

Lokomotif resim ve başlık ekleme

AMP Start, güzel ve duyarlı kahraman resimleri ile başlıklar için kullanıma hazır snippet'ler de sunar.

https://ampstart.com/components#media adresine gidin ve Fullpage Hero için sağlanan HTML kodunu kopyalayıp <!-- End Navbar --> comment kodundan sonra body. etiketinin hemen altına yapıştırın.

Resmi ve başlığı şimdi güncelleyelim.

Fark edebileceğiniz gibi, kod snippet'inde iki farklı amp-img etiketi vardır. Bunlardan biri daha küçük genişlikler için kullanılır, daha düşük çözünürlüklü bir resme işaret etmelidir. Diğeri ise daha büyük ekranlar içindir. AMP'nin tüm AMP öğelerinde desteklediği media özelliğine göre otomatik olarak geçiş yapılır.

src, width ve height öğelerini farklı resimlerle güncelleyin ve mevcut <figure>...</figure> metnini Pasifik Kuzeybatıdaki En Güzel Yürüyüşler olarak değiştirin.

<figure class="ampstart-image-fullpage-hero m0 relative mb4">
    <amp-img width="600" height="900" layout="responsive" src="https://unsplash.it/600/900?image=1003" media="(max-width: 415px)"></amp-img>
    <amp-img height="1800" layout="fixed-height" src="https://unsplash.it/1200/1800?image=1003" media="(min-width: 416px)"></amp-img>
    <figcaption class="absolute top-0 right-0 bottom-0 left-0">
      <header class="p3">
        <h1 class="ampstart-fullpage-hero-heading mb3">
        <span class="ampstart-fullpage-hero-heading-text">
          Most Beautiful Hikes in the Pacific Northwest
        </span>
      </h1>
        <span class="ampstart-image-credit h4">
        By <a href="#" role="author" class="text-decoration-none">D.F. Roy</a>,<br> January 14, 2017
      </span>
      </header>
      <footer class="absolute left-0 right-0 bottom-0">
        <a class="ampstart-readmore py3 caps line-height-2 text-decoration-none center block h5" href="#content">Read more</a>
      </footer>
    </figcaption>
</figure>

Şimdi sayfaya göz atalım:

Özet

  • Sayfanız için duyarlı gezinme, lokomotif resim ve başlık gibi bir kabuk oluşturdunuz.
  • AMP Şablonları hakkında daha fazla bilgi edindiniz ve hızlı bir şekilde sayfa kabuğunu oluşturmak için AMP Start kullanıcı arayüzü bileşenlerini kullandınız.

Bu bölüm için tamamlanmış kodu şu adreste bulabilirsiniz: http://codepen.io/aghassemi/pen/RpRdzV

Sayfamıza duyarlı resimler, videolar, yerleştirilmiş öğeler ve bazı metinler ekleyeceğiz.

Sayfanın içeriğini barındıracak bir main öğesi ekleyelim. body: listesinin sonuna ekleyeceğiz

<main id="content">

</main>

Başlık ve paragraf ekleme

Aşağıdakileri alana ekleyin: main

<h2 class="px3 pt2 mb2">Photo Gallery</h2>
<p class="ampstart-dropcap mb4 px3">Vivamus viverra augue libero, vitae dapibus lectus accumsan eget. Pellentesque eget ipsum purus. Maecenas leo odio, ornare nec ex id, suscipit porta ipsum. Ut fringilla semper cursus.</p>

AMP yalnızca HTML olduğundan, bu CSS sınıf adları dışında bu kodla ilgili özel bir şey yoktur. px3, mb2 ve ampstart-dropcap nedir? Nereden geliyorlar?

Bu sınıflar AMP HTML'nin bir parçası değildir. AMP Start şablonları, alt düzey bir CSS araç seti sağlamak ve AMP Start'a özel sınıflar eklemek için Basscss'i kullanır.

Bu snippet'te px3 ve mb2, Basscss tarafından tanımlanır ve sırasıyla Dolgu-sol-sağ ve marj-alt ifadelerine karşılık gelir. AMP AMP tarafından sağlanan ampstart-dropcap, bir paragrafın ilk harfini daha büyük hale getirir.

Önceden tanımlanmış bu CSS sınıflarıyla ilgili dokümanları http://basscss.com/ ve https://ampstart.com/components adreslerinde bulabilirsiniz.

Şimdi sayfanın nasıl göründüğüne bakalım:

Resim ekleme

AMP'de duyarlı sayfaları oluşturmak kolaydır. Çoğu durumda, bir AMP bileşenini duyarlı hale getirmek, layout="responsive" özelliği eklemek kadar kolaydır. HTML img etiketine benzer şekilde amp-img, çeşitli görüntü alanı genişlikleri ve piksel yoğunlukları için farklı resimler belirtmek amacıyla srcset özelliğini de destekler.

main için bir amp-img ekleyin:

<amp-img 
  layout="responsive" width="1080" height="720"
  srcset="https://unsplash.it/1080/720?image=1043 1080w, https://unsplash.it/720/480?image=1043 720w" 
  alt="Photo of mountains and trees landscape">
</amp-img>

Bu kodla, layout="responsive" değerini belirtip width ve height. değerlerini sağlayarak duyarlı bir resim oluşturuyoruz.

Duyarlı düzen kullanırken neden genişlik ve yükseklik belirtmem gerekiyor?

Bunun iki nedeni vardır:

  1. AMP, en boy oranını hesaplamak için genişliği ve yüksekliği kullanır ve genişlik üst kapsayıcısına sığacak şekilde değiştiğinde doğru yüksekliği korur.
  2. AMP, kaynaklar yüklenmeden önce iyi bir kullanıcı deneyimi sağlamak (sayfaya atlamadan) ve her öğenin boyutunu ve konumunu belirlemek için tüm öğelerde statik boyutlandırma uygular.

Şimdi sayfaya göz atalım:

Otomatik oynatılan video ekleme

AMP, YouTube ve Vimeo gibi birçok video oynatıcıyı destekler. AMP'nin, amp-video genişletilmiş bileşeni altında HTML5 video öğesinin kendi sürümü vardır. amp-video ve amp-youtube dahil bu video oynatıcılardan bazıları mobil cihazlarda sessiz otomatik oynatmayı da destekler.

amp-img operatörüne benzer şekilde, amp-video de layout="responsive" eklendiğinde duyarlı hale gelebilir

Sayfamıza otomatik oynatılan video ekleyelim.

main: öğesine başka bir paragraf ve aşağıdaki amp-video öğesi ekleyin

<p class="my2 px3">Vivamus viverra augue libero, vitae dapibus lectus accumsan eget. Pellentesque eget ipsum purus. Maecenas leo odio, ornare nec ex id, suscipit porta ipsum. Ut fringilla semper cursus.</p>

<amp-video 
  layout="responsive" width="1280" height="720"
  autoplay controls loop
  src="https://storage.googleapis.com/ampconf-76504.appspot.com/Bullfinch%20-%202797.mp4">
</amp-video>

Gelin bir göz atalım:

Yerleştirme ekleme

AMP, Twitter ve Instagram gibi birçok üçüncü taraf yerleştirmesi için genişletilmiş bileşenlere sahiptir. AMP bileşeni içermeyen yerleştirmeler için her zaman amp-iframe bulunur.

Sayfamıza Instagram yerleştirilmiş bir sayfa ekleyelim.

amp-img ve amp-video öğelerinin aksine amp-instagram, yerleşik bir bileşen değildir. İçe aktarma komut dosyası etiketi, bileşenin kullanılabilmesi için önce AMP sayfasının head öğesine dahil edilmelidir.

Kullandığımız AMP Start ortak metni birkaç içe aktarma komut dosyası etiketi içerir. Bunları head etiketinin başında arayın ve aşağıdaki içe aktarma komut dosyası satırını eklediğinizden emin olun:

<script custom-element="amp-instagram" src="https://cdn.ampproject.org/v0/amp-instagram-0.1.js" async></script>

main: öğesine başka bir paragraf ve aşağıdaki amp-instagram öğesi ekleyin

<p class="my2 px3">Vivamus viverra augue libero, vitae dapibus lectus accumsan eget. Pellentesque eget ipsum purus. Maecenas leo odio, ornare nec ex id, suscipit porta ipsum. Ut fringilla semper cursus.</p>
    
<amp-instagram
   layout="responsive" width="566" height="708"
   data-shortcode="BJ_sPxzAGyg">
</amp-instagram>

Gelin bir göz atalım:

Bu içerik şimdilik büyük olasılıkla yeterli.

Özet

  • AMP'deki duyarlı bileşenler hakkında bilgi edindiniz.
  • Farklı türlerde medya ve metin içeriği eklediniz.

Bu bölüme ait tamamlanmış kodu şu adreste bulabilirsiniz: http://codepen.io/aghassemi/pen/OpXGoa

Şimdiye kadar sayfamız için yalnızca statik içerik oluşturduk. Bu bölümde bant, lightbox ve AMP işlemleri gibi bileşenleri kullanarak etkileşimli bir fotoğraf galerisi oluşturacağız.

AMP özel JavaScript'i desteklemese de, kullanıcı işlemlerini alıp işlemek için çeşitli yapı taşlarını gösterir.

Fotoğraf odaklı AMP sayfamızdaki her resmin sayfada görünmesi, mükemmel bir kullanıcı deneyimi oluşturmaz. Neyse ki, yatay olarak kaydırılabilir fotoğraf slaytları oluşturmak için amp-carousel özelliğini kullanabiliriz.

Öncelikle, amp-carousel için komut dosyası etiketinin head öğesine dahil edildiğinden emin olalım:

<script custom-element="amp-carousel" src="https://cdn.ampproject.org/v0/amp-carousel-0.1.js" async></script>

Şimdi main: türüne, birkaç resim içeren slides türünde duyarlı bir amp-carousel ekleyelim

<p class="my2 px3">Vivamus viverra augue libero, vitae dapibus lectus accumsan eget. Pellentesque eget ipsum purus. Maecenas leo odio, ornare nec ex id, suscipit porta ipsum. Ut fringilla semper cursus.</p>

<amp-carousel 
  layout="responsive" width="1080" height="720"
  type="slides">

    <amp-img src="https://unsplash.it/1080/720?image=1037" layout="fill"></amp-img>
    <amp-img src="https://unsplash.it/1080/720?image=1038" layout="fill"></amp-img>
    <amp-img src="https://unsplash.it/1080/720?image=1039" layout="fill"></amp-img>
    <amp-img src="https://unsplash.it/1080/720?image=1040" layout="fill"></amp-img>
    <amp-img src="https://unsplash.it/1080/720?image=1041" layout="fill"></amp-img>
    <amp-img src="https://unsplash.it/1080/720?image=1042" layout="fill"></amp-img>
    <amp-img src="https://unsplash.it/1080/720?image=1043" layout="fill"></amp-img>
    <amp-img src="https://unsplash.it/1080/720?image=1044" layout="fill"></amp-img>
</amp-carousel>

type="slides", tek seferde yalnızca bir resmin görünür olmasını sağlar ve kullanıcıların bu resimleri kaydırabilmesini sağlar.

Bant içindeki resimler için slaytlar boyutunu her zaman alt öğeyle doldurduğundan genişlik ve yükseklik gerektiren farklı bir düzen belirtilmesine gerek kalmadığından layout="fill" kullanılır.

Haydi deneyelim ve nasıl göründüğüne bakalım:

1,gif

Şimdi bu resimlerin küçük resimleri için yatay kaydırılabilir bir kapsayıcı ekleyelim. <amp-carousel> ürününü yine, type="slides" olmadan ve sabit yükseklikteki düzende kullanacağız.

Önceki amp-carousel öğesinden sonra aşağıdakileri ekleyin.

<amp-carousel layout="fixed-height" height="78" class="mt1">

    <amp-img src="https://unsplash.it/108/72?image=1037" layout="fixed" width="108" height="72"></amp-img>
    <amp-img src="https://unsplash.it/108/72?image=1038" layout="fixed" width="108" height="72"></amp-img>
    <amp-img src="https://unsplash.it/108/72?image=1039" layout="fixed" width="108" height="72"></amp-img>
    <amp-img src="https://unsplash.it/108/72?image=1040" layout="fixed" width="108" height="72"></amp-img>
    <amp-img src="https://unsplash.it/108/72?image=1041" layout="fixed" width="108" height="72"></amp-img>
    <amp-img src="https://unsplash.it/108/72?image=1042" layout="fixed" width="108" height="72"></amp-img>
    <amp-img src="https://unsplash.it/108/72?image=1043" layout="fixed" width="108" height="72"></amp-img>
    <amp-img src="https://unsplash.it/108/72?image=1044" layout="fixed" width="108" height="72"></amp-img>

</amp-carousel>

Küçük resimler için aynı fotoğrafların layout="fixed" ve düşük çözünürlüklü sürümlerini kullandığımızı unutmayın.

Gelin bir göz atalım:

Kullanıcılar bir küçük resme dokunduğunda resmi değiştirin

Bunu yapmak için, tap gibi etkinlikleri slaytı değiştirme gibi işlemlerle ilişkilendirmemiz gerekir.

etkinlik: Bir öğeye etkinlik işleyicileri yüklemek için on özelliğini kullanabiliriz. tap etkinliği ise tüm öğelerde desteklenir.

action: amp-carousel her küçük resim görüntüsünün dokunma etkinliği işleyiciden çağırabileceğimiz bir goToSlide(index=INTEGER) işlemini gösterir.

Etkinliği ve eylemi bildiğimize göre, artık bunları bir araya getirebiliriz.

Öncelikle, küçük resimlerde dokunma etkinliği işleyiciden referans verebilmemiz için slayt bandına id vermemiz gerekiyor.

Slaytlar bandına id özelliği eklemek için mevcut kodunuzu değiştirin (ilki):

<amp-carousel 
  id="imageSlides"
  type="slides"

  ....

Etkinlik işleyiciyi yükleyelim (her küçük resim görüntüsüne on="tap:imageSlides.goToSlide(index=<slideNumber>)"):)

<amp-img on="tap:imageSlides.goToSlide(index=0)" role="button" tabindex="1" layout="fixed" ...
<amp-img on="tap:imageSlides.goToSlide(index=1)" role="button" tabindex="1" layout="fixed" ...
<amp-img on="tap:imageSlides.goToSlide(index=2)" role="button" tabindex="1" layout="fixed" ...
...

Ayrıca erişilebilirlik için tabindex ve ARIA role ayarlamamız gerekiyor.

Hepsi bu. Artık her bir küçük resme dokunduğunuzda, dönen slayttaki karşılık gelen resim gösterilir.

2.gif

Kullanıcı küçük resme dokunduğunda küçük resmi vurgulayın

Bunu yapabilir miyiz? Dokunma etkinliği işleyicilerden çağrılacak bir öğeye ilişkin CSS sınıflarını değiştirecek herhangi bir işlem yok. Seçilen küçük resmi nasıl vurgulayabiliriz?

Kurtardığınız <amp-selector> var!

amp-selector, şu ana kadar kullandığımız bileşenlerden farklıdır. Bu, sayfanın düzenini etkilemediğinden bir sunu bileşeni değildir. Bunun yerine, AMP sayfasının kullanıcının hangi seçeneği sunduğunu bilmesini sağlayan bir yapı taşıdır.

amp-selector oldukça basittir ancak güçlüdür:

  • amp-selector herhangi bir rastgele HTML öğesi veya AMP bileşeni içerebilir.
  • option=<value> özelliği varsa amp-selector öğesinin alt öğesi olabilir.
  • Kullanıcı bir seçenek olan öğeye dokunduğunda amp-selector, bu öğeye bir selected özelliği ekler (ve tek seçim modunda diğer seçenek öğelerinden kaldırır).
  • selected özelliğini bir CSS özelliği seçiciyle hedefleyerek özel CSS'nizdeki seçili öğenin stilini belirleyebilirsiniz.

Şimdi bu görevi yerine getirmemize nasıl yardımcı olabileceğine bakalım.

head için amp-selector komut dosyası etiketini ekleyin:

<script custom-element="amp-selector" src="https://cdn.ampproject.org/v0/amp-selector-0.1.js" async></script>
  1. Küçük resim bandını amp-selector sarmalayın
  2. option=<value> özelliği ekleyerek her küçük resmi seçenek haline getirin.
  3. selected özelliğini ekleyerek ilk küçük resmi varsayılan olarak seçin.
<amp-selector>

  <amp-carousel layout="fixed-height" height="78" class="mt1">

    <amp-img option=0 selected on="tap:imageSlides.goToSlide(index=0)" ...
      
    <amp-img option=1 on="tap:imageSlides.goToSlide(index=1)" ...

    ...

  </amp-carousel>

</amp-selector>

Şimdi, seçilen küçük resmi vurgulamak için stil eklememiz gerekiyor.

AMP Start'tan küçültülmüş CSS ortak öğesinden sonra <style amp-custom> bölümüne şu özel CSS'yi ekleyin:

<style amp-custom>
...

/* low opacity for non-selected thumbnails */
amp-selector amp-img[option] {
  opacity: 0.4;
}

/* normal opacity for the selected thumbnail */
amp-selector amp-img[option][selected] {
  opacity: 1;
}

</style>

Gelin bir göz atalım:

3,gif

İyi görünüyor, ancak bir hata mı fark ettiniz?

Kullanıcı slayt bandını kaydırırsa seçilen küçük resim bunu yansıtacak şekilde güncellenmez. Banttaki geçerli slaytı seçilen küçük resme nasıl bağlayabiliriz?

Sonraki bölümde bunun nasıl yapılacağını öğreneceğiz.

Özet

  • Farklı rulo türleri hakkında bilgi edindiniz.
  • Kullanıcı bir küçük resme dokunduğunda resim rulosundaki görünür slaytı değiştirmek için AMP işlemlerini ve etkinliklerini kullandınız.
  • amp-selector hakkında bilgi edindiniz ve bu aracın ilgi çekici kullanım alanlarını uygulamak için yapı taşı olarak nasıl kullanabileceğinizi öğrendiniz.

Bu bölüme ait tamamlanmış kodu şu adreste bulabilirsiniz: http://codepen.io/aghassemi/pen/gmMJMy

Bu bölümde, önceki bölümden resim galerisinin etkileşimini iyileştirmek için amp-bind'i kullanacağız.

amp-bind nedir?

Temel AMP bileşeni amp-bind, veri bağlama ve ifadelerle özel etkileşim oluşturmanıza olanak tanır.

amp-bind üç temel bölümden oluşur:

  1. Durum
  2. Bağlama
  3. Mutation

Durum, tek bir değerden karmaşık bir veri yapısına kadar her şeyi içeren bir uygulama durumu değişkenidir. Tüm bileşenler, bu paylaşılan değişkeni okuyabilir ve yazabilir.

Bağlama, durumu bir HTML özelliğine veya bir öğenin içeriğine bağlayan bir ifadedir.

Dönüşüm, bazı kullanıcı işlemleri veya etkinliklerinden dolayı durumun değerini değiştirme işlemidir.

amp-bind gücü, bir mutasyon gerçekleştiğinde başlar: Bu duruma bağlı olan tüm bileşenler bilgilendirilir ve kendilerini yeni durumu yansıtacak şekilde güncellerler.

Uygulama şeklini görelim.

Önceden, tam resim slayt bandını küçük resimlerdeki tap etkinliğiyle bağlamak için AMP işlemlerini (örneğin, goToSlide()) ve seçilen küçük resmi vurgulamak için amp-selector kullanıyorduk.

amp-bind veri bağlama yaklaşımını kullanarak bu kodu tamamen nasıl yeniden uygulayabileceğimizi inceleyelim.

Ancak kodlamaya başlamadan önce yaklaşımımızı tasarlayalım:

1. Eyaletimiz nedir?

Bu örnekte, bizim için önemli olan tek değer geçerli slayt numarasının ne olduğu. selectedSlide

2. Bağlamalarımız neler?

selectedSlide değiştiğinde neyin değişmesi gerekiyor?

  • Tam resim bandının görünür slide değeri: 
<amp-carousel [slide]="selectedSlide" ...
  • amp-selector içindeki selected öğenin de değiştirilmesi gerekiyor. Bu işlem, önceki bölümde karşılaştığımız hatayı düzeltecektir.
<amp-selector [selected]="selectedSlide" ...

3. Mutasyonlarımız neler?

selectedSlide adlı cihazın ne zaman değişmesi gerekiyor?

  • Kullanıcı, kaydırma yaparak tam resim rulosunda yeni bir slayta geçtiğinde:
<amp-carousel on="slideChange:AMP.setState({selectedSlide:event.index})" ...
  • Kullanıcı bir küçük resim seçtiğinde:
<amp-selector on="select:AMP.setState({selectedSlide:event.targetOption})" ...

Bir mutasyonu tetiklemek için AMP.setState işlevini kullanalım. Bu sayede, artık küçük resimde sahip olduğumuz on="tap:imageSlides.goToSlide(index=n)" kodunun tamamına ihtiyacımız kalmadı.

Her şeyi bir araya getirelim:

head için amp-bind komut dosyası etiketini ekleyin:

<script custom-element="amp-bind" src="https://cdn.ampproject.org/v0/amp-bind-0.1.js" async></script>

Mevcut galeri kodunu yeni yaklaşımla değiştirin:

<amp-carousel [slide]="selectedSlide" on="slideChange:AMP.setState({selectedSlide:event.index})" type="slides" id="imageSlides" layout="responsive" width="1080" height="720">

  <amp-img src="https://unsplash.it/1080/720?image=1037" layout="fill"></amp-img>
  <amp-img src="https://unsplash.it/1080/720?image=1038" layout="fill"></amp-img>
  <amp-img src="https://unsplash.it/1080/720?image=1039" layout="fill"></amp-img>
  <amp-img src="https://unsplash.it/1080/720?image=1040" layout="fill"></amp-img>
  <amp-img src="https://unsplash.it/1080/720?image=1041" layout="fill"></amp-img>
  <amp-img src="https://unsplash.it/1080/720?image=1042" layout="fill"></amp-img>
  <amp-img src="https://unsplash.it/1080/720?image=1043" layout="fill"></amp-img>
  <amp-img src="https://unsplash.it/1080/720?image=1044" layout="fill"></amp-img>

</amp-carousel>


<amp-selector [selected]="selectedSlide" on="select:AMP.setState({selectedSlide:event.targetOption})">

  <amp-carousel layout="fixed-height" height="78" class="mt1">

    <amp-img option=0 selected src="https://unsplash.it/108/72?image=1037" layout="fixed" width="108" height="72"></amp-img>
    <amp-img option=1 src="https://unsplash.it/108/72?image=1038" layout="fixed" width="108" height="72"></amp-img>
    <amp-img option=2 src="https://unsplash.it/108/72?image=1039" layout="fixed" width="108" height="72"></amp-img>
    <amp-img option=3 src="https://unsplash.it/108/72?image=1040" layout="fixed" width="108" height="72"></amp-img>
    <amp-img option=4 src="https://unsplash.it/108/72?image=1041" layout="fixed" width="108" height="72"></amp-img>
    <amp-img option=5 src="https://unsplash.it/108/72?image=1042" layout="fixed" width="108" height="72"></amp-img>
    <amp-img option=6 src="https://unsplash.it/108/72?image=1043" layout="fixed" width="108" height="72"></amp-img>
    <amp-img option=7 src="https://unsplash.it/108/72?image=1044" layout="fixed" width="108" height="72"></amp-img>

  </amp-carousel>

</amp-selector>

Haydi deneyelim. Bir küçük resme dokunduğunuzda resim slaytları değişir. Resim slaytlarını kaydırdığınızda vurgulanan küçük resim değişir.

4,gif

Galeriye metin ekleme

Mevcut slaytımızda durumu tanımlamak ve değiştirmek için çok sıkı çalıştık. Mevcut slayt sayısına göre diğer bilgi parçalarını güncellemek için artık kolayca ek bağlama sunabiliriz.

Galerimize "resim x/y" metnini ekleyelim:

Aşağıdaki kodu slayt bandı öğesinin üzerine ekleyin:

<div class="px3">Image <span [text]="1*selectedSlide + 1">1</span> of 8</div>

Bu kez, HTML özelliğine bağlamak yerine [text]= kullanarak bir öğenin iç metnine bağlanıyoruz.

Haydi deneyelim:

5,gif

Özet

  • amp-bind hakkında bilgi edindiniz.
  • Resim galerisinin iyileştirilmiş bir sürümünü uygulamak için amp-bind kullandınız.

Bu bölüme ait tamamlanmış kodu şu adreste bulabilirsiniz: http://codepen.io/aghassemi/pen/MpeMdL

Sayfamıza animasyon eklemek için bu bölümde iki yeni özellik kullanacağız.

Başlıka paralaks efekti ekleme

amp-fx-collection, özelliklere sahip herhangi bir öğede kolayca etkinleştirilebilen paralaks gibi önceden tanımlanmış görsel efektler koleksiyonu sağlayan bir uzantıdır.

Paralaks efektiyle, kullanıcı sayfayı kaydırdığında öğe, özelliğe atanan değere bağlı olarak daha hızlı veya daha yavaş kaydırılır.

Paralaks efekti, herhangi bir HTML veya AMP öğesine amp-fx="parallax" data-parallax-factor="<a decimal factor>" özelliği eklenerek etkinleştirilebilir.

  • 1'den büyük bir faktör değeri, kullanıcı sayfayı aşağı kaydırdığında öğenin daha hızlı kaydırılmasını sağlar.
  • 1'den küçük bir faktör değeri, kullanıcı sayfayı aşağı kaydırdığında öğenin daha yavaş kaymasına neden olur.

Sayfa başlığımıza 1,5 faktörlü paralaks ekleyelim ve sayfanın nasıl göründüğüne bakalım.

head için amp-fx-collection komut dosyası etiketini ekleyin:

<script custom-element="amp-fx-collection" src="https://cdn.ampproject.org/v0/amp-fx-collection-0.1.js" async></script>

Şimdi koddaki mevcut başlık başlığını bulun ve buna amp-fx="parallax" and data-parallax-factor="1.5" özelliğini ekleyin:

<header amp-fx="parallax" data-parallax-factor="1.5" class="p3">
  <h1 class="ampstart-fullpage-hero-heading mb3">
    <span class="ampstart-fullpage-hero-heading-text">
      Most Beautiful Hikes in the Pacific Northwest
    </span>
  </h1>
  <span class="ampstart-image-credit h4">
    By <a href="#" role="author" class="text-decoration-none">D.F. Roy</a>,<br> January 14, 2017
  </span>
</header>

Sonuca göz atalım:

6.gif

Başlık, artık sayfanın geri kalanından daha hızlı kaydırılıyor. Havalı!

Sayfaya animasyon ekleme

amp-animation, Web Animations API'sini AMP sayfalarına getiren bir özelliktir.

Bu bölümde, kapak resmi için hafif bir yakınlaştırma efekti oluşturmak üzere amp-animation öğesini kullanacağız.

amp-animation için komut dosyası etiketini head öğesine ekleyin:

<script custom-element="amp-animation" src="https://cdn.ampproject.org/v0/amp-animation-0.1.js" async></script>

Şimdi animasyonumuzu ve geçerli olduğu hedef öğeyi tanımlamamız gerekiyor.

Animasyonlar, üst düzey bir amp-animation etiketinin içinde JSON olarak tanımlanır.

Aşağıdaki kodu sayfanızdaki açılış body etiketinin hemen altına ekleyin.

<amp-animation trigger="visibility" layout="nodisplay">
    <script type="application/json">
      {
        "target": "heroimage",
        "duration": 30000,
        "delay": 0, 
        "fill": "forwards",
        "easing": "ease-out",
        "keyframes": {"transform":  "scale(1.3)"}
      }
      </script>
</amp-animation>

Bu kod, 30 saniyeliğine gecikme olmadan çalışan bir animasyon tanımlar ve resmi% 30 daha büyük olacak şekilde ölçeklendirir.

Animasyon, resim sona erdikten sonra da yakınlaştırmaya devam edebilmesi için yönlendirme fill değerini tanımlıyoruz. target, animasyonun uygulandığı öğenin HTML'sidir id.

Sayfamızdaki lokomotif öğeye id tarafından bir amp-animation ekleyelim.

  1. Kodunuzdaki mevcut lokomotif resmi (layout="fixed-height" ile yüksek çözünürlüklü resim) bulun ve amp-img etiketine id="heroimage" ekleyin.
  2. Kolaylık sağlamak için media="(min-width: 416px)" değerini silin ve diğer düşük çözünürlüklü amp-img kodunu kaldırın. Böylece, şimdilik amp-animation'da birden fazla animasyon ve medya sorgusu ile uğraşmamız gerekmez.
<figure class="ampstart-image-fullpage-hero m0 relative mb4">

    <amp-img id="heroimage" height="1800" layout="fixed-height" src="https://unsplash.it/1200/1800?image=1003"></amp-img>

    <figcaption class="absolute top-0 right-0 bottom-0 left-0">

...

Fark edebileceğiniz gibi, resmin ölçeklendirilmesi taşmanın üst öğesini taşımasına neden olur. Bu nedenle, taşmayı gizleyerek düzeltmemiz gerekiyor.

Mevcut <style amp-custom> kuralının sonuna şu CSS kuralını ekleyin:

.ampstart-image-fullpage-hero {
  overflow: hidden;
}

Haydi deneyelim ve nasıl göründüğüne bakalım:

7,gif

Çok hafif!

Ancak bunu yine de CSS ile yapabilirdim. amp-animation'in amacı nedir?

Bu durumda bu doğrudur, ancak amp-animation yalnızca CSS ile kullanılamayan ek işlevlere olanak tanır. Örneğin, animasyon görünürlüğe göre tetiklenebilir (ve görünürlüğe göre de duraklatılabilir) ya da bir AMP işlemiyle tetiklenebilir. amp-animation ayrıca CSS animasyonlarından daha fazla özellik içeren Web Animasyonları API'sini temel alır. Bu API, özellikle birleştirilebilirlikle alakalıdır.

Özet

  • amp-fx-collection ile paralaks efektleri oluşturmayı öğrendiniz.
  • amp-animation hakkında bilgi edindiniz.

Bu bölüm için tamamlanmış kodu şu adreste bulabilirsiniz: http://codepen.io/aghassemi/pen/OpXKzo

Güzel, etkileşimli bir AMP sayfası oluşturmayı tamamladınız.

Bugünkü başarınızı bir kez daha hatırlayarak kutlayalım.

Bitiş sayfasının bağlantısı: http://s.codepen.io/aghassemi/debug/OpXKzo

... ve son kod: http://codepen.io/aghassemi/pen/OpXKzo

Adsız.gif

Bu codelab için CodePen girişleri koleksiyonuna buradan ulaşabilirsiniz: https://codepen.io/collection/XzKmNB/

Ayrılmadan önce...

Sayfamızın yatay modda tablet gibi diğer form faktörlerinde nasıl göründüğünü kontrol etmeyi unuttuk.

Gelin şunları görelim:

Adsız.gif

Mükemmel!

İyi günler dileriz.

Sırada ne var?

Bu codelab yalnızca AMP'de mümkün olanın yüzeyini çizer. Muhteşem AMP sayfaları oluşturmanıza yardımcı olacak birçok kaynak ve codelab' vardır:

Sorularınız varsa veya sorunlarla karşılaşırsanız lütfen AMP Slack kanalında bizi bulun ya da GitHub'da tartışmalar, hata raporları veya özellik istekleri oluşturun.