İçindekiler

Web Hikayesi teknik ayrıntıları

Important: this documentation is not applicable to your currently selected format websites!

Bu kılavuz, AMP ile başarılı bir şekilde Web Hikayeleri oluşturmak için bilmeniz gereken tüm teknik ayrıntıları ve en iyi uygulamaları açıklamaktadır.

AMP Uyumlu

Web Hikayesi, teknik olarak AMP ile oluşturulmuş tek bir web sayfasıdır ve AMP spesifikasyonlarına uygundur:

Belge tipiyle <!doctype html> başlar.
Üst seviye <html ⚡> veya<html amp> etiketi içerir.
<head> ve <body> etiketleri içerir.
<head> etiketinin ilk alt öğesi olarak bir <meta charset="utf-8"> içerir.
<head> etiketlerinin içinde bir <script async src="https://cdn.ampproject.org/v0.js"></script> etiketi içerir. En iyi uygulama olarak, betiği olabildiğince erken <head> içine eklemelisiniz.
Href, Web Hikayesi URL'sini işaret edecek şekilde <head> içinde bir <link rel="canonical" href="page/url"> etiketi içerir.
<head> etiketi içinde <meta name="viewport" content="width=device-width"> etiketi içerir. Ayrıca initial-scale=1 eklemek de önerilir.
<head> etiketinde AMP ortak metni kodunu içerir.

Bir AMP web sayfası ile AMP ile oluşturulmuş bir Web Hikayesi arasındaki fark, amp-story bileşenidir. <body> belgesinin doğrudan alt öğesidir ve standalone özniteliğini içermelidir. Tüm Web Hikayesi sayfaları, katmanları ve öğeleri <amp-story> etiketleri içinde tanımlanmıştır.

<!DOCTYPE html>
<html ⚡>
  <head>
    <meta charset="utf-8" />
    <title>Joy of Pets</title>
    <link rel="canonical" href="pets.html" />
    <meta name="viewport" content="width=device-width" />
    <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>
    <script
      async
      custom-element="amp-video"
      src="https://cdn.ampproject.org/v0/amp-video-0.1.js"
    ></script>
    <script
      async
      custom-element="amp-story"
      src="https://cdn.ampproject.org/v0/amp-story-1.0.js"
    ></script>
    <style amp-custom>
      ...;
    </style>
  </head>
  <body>
    <!-- Cover page -->
    <amp-story
      standalone
      title="Joy of Pets"
      publisher="AMP tutorials"
      publisher-logo-src="assets/AMP-Brand-White-Icon.svg"
      poster-portrait-src="assets/cover.jpg"
    >
      <amp-story-page id="cover">
        <amp-story-grid-layer template="fill">
          <amp-img
            src="assets/cover.jpg"
            width="720"
            height="1280"
            layout="responsive"
          >
          </amp-img>
        </amp-story-grid-layer>
        <amp-story-grid-layer template="vertical">
          <h1>The Joy of Pets</h1>
          <p>By AMP Tutorials</p>
        </amp-story-grid-layer>
      </amp-story-page>

      <!-- Page 1 -->
      <amp-story-page id="page1">
        <amp-story-grid-layer template="vertical">
          <h1>Cats</h1>
          <amp-img
            src="assets/cat.jpg"
            width="720"
            height="1280"
            layout="responsive"
          >
          </amp-img>
          <q
            >Dogs come when they're called. Cats take a message and get back to
            you. --Mary Bly</q
          >
        </amp-story-grid-layer>
      </amp-story-page>
      ...
    </amp-story>
  </body>
</html>

İlk Web Hikayenizi Oluşturun öğreticisini izleyin ve daha fazla bilgi edinmek için amp-story referans belgelerini okuyun.

Üst düzey performans ve kullanıcı deneyimi

Kullanıcılar, Web Hikayelerini düşük ağ bağlantısına sahip alanlarda veya daha eski cihazlarda görüntülüyor olabilir. Buradaki en iyi uygulamaları izleyerek deneyimlerinden keyif aldıklarından emin olun.

Arka plan rengi

Her Web Hikayesi sayfası için bir arka plan rengi belirleyin. Arka plan rengine sahip olmak, kullanıcının koşulları, görüntüleri veya video varlıklarını indirmelerini engellediğinde iyi bir geri dönüş sağlar. Sayfanın amaçlanan arka plan varlığının baskın rengini temsil eden bir renk seçin veya tüm hikaye sayfaları için tutarlı bir renk teması kullanın. Arka plan renginin okunabilirlik açısından metinden farklı olduğundan emin olun.

Web Hikayesi belgesinin başlığında veya bileşeninde satır içi olarak <style amp-custom> etiketleri içindeki sayfalar için arka plan rengini tanımlayın.

Öğeleri katmanlara ayırma

Sistem başlığı, sessize alma ve paylaşma simgeleri gibi kontroller içerir. Bu başlık, arka plan görüntüsü ve videodan daha yüksek bir z-endeksinde görünür. Bu simgelerin hiçbir önemli bilgiyi kapsanmadığından emin olun.

En boy oranı

Web Hikayesi varlıklarını 9:16 en boy oranında tasarlayın. Sayfa yüksekliği ve genişliği tarayıcılar ve cihazlar arasında değişiklik gösterdiğinden, temel içeriği sayfa kenarlarına yakın yerleştirmeyin.

Poster resimleri

Bir video indirilirken kullanıcıya bir poster görüntüsü gösterilir. Sorunsuz bir geçişe izin vermek için poster görüntüsü videoyu temsil etmelidir. poster özelliğini amp-video öğenize ekleyerek ve bunu resim konumuna yönlendirerek bir poster resmi belirtin.

<amp-video autoplay loop
  width="720" height="1280" layout="responsive"
  poster="images/kitten-playing.png">
  <source src="videos/kitten-playing.mp4"
    type="video/mp4" />
</amp-video>

Video

Tüm videolar amp-video bileşeni aracılığıyla eklenmelidir.

<amp-video controls
  width="640"
  height="360"
  layout="responsive"
  poster="/static/inline-examples/images/kitten-playing.png">
  <source src="/static/inline-examples/videos/kitten-playing.webm"
    type="video/webm" />
  <source src="/static/inline-examples/videos/kitten-playing.mp4"
    type="video/mp4" />
  <div fallback>
    <p>This browser does not support the video element.</p>
  </div>
</amp-video>

Çözünürlük ve kalite

Aşağıdaki önerilen optimizasyonlar için kaliteyi ayarlamak için videoları kodlayın:

MP4	-crf 23
WEBM	-b:v 1M

HLS segmentlerini 10 saniyenin altında tutmaya çalışın.

Biçim ve boyut

Optimum performans için videoları 4MB'den küçük tutun. Büyük videoları birden çok sayfaya bölmeyi düşünün.

Yalnızca tek bir video biçimi sağlayabiliyorsanız, MP4 sağlayın. Mümkün olduğunda, HLS videoyu kullanın ve tarayıcı uyumluluğu için yedek olarak MP4'ü belirtin. Aşağıdaki video codec bileşenini kullanın:

MP4, HLS ve DASH	H.264
WEBM	VP9

ve src belirtme

src özelliği üzerinden video kaynağını belirtmek için <amp-video> bileşeni içindeki <source> alt öğelerini kullanın. <source> öğesini kullanmak, video türünü belirtmenize ve yedek video kaynakları eklemenize olanak tanır. MIME türünü belirtmek için type özniteliğini kullanmalısınız. HLS videoları için application/x-mpegurl veya application/vnd.apple.mpegurl kullanın. Diğer tüm video türleri için, video/ MIME önekini kullanın ve ”video/mp4” gibi bir video biçimini izleyin.

<amp-video
  id="video-page1"
  autoplay
  loop
  layout="fill"
  poster="https://example.com/media/poster.jpg"
>
  <source
    src="https://amp-example.com/media/movie.m3u8"
    type="application/vnd.apple.mpegurl"
  />
  <source src="https://amp-example.com/media/movie.mp4" type="video/mp4" />
</amp-video>

Videolardan sonra otomatik ilerleme

Amp-story-page tarafından gösterilen auto-advance-after özelliği, bir hikaye sayfasının kullanıcı dokunmadan ilerleyip ilerlemeyeceğini ve ne zaman ilerlemesi gerektiğini belirtir. Bir videodan sonra ilerlemek için özelliği video kimliğine yönlendirin.

<amp-story-page auto-advance-after="myvideo"></amp-story-page>

Masaüstü deneyimi

Web Hikayesi biçimi, isteğe bağlı bir masaüstü deneyimini destekler. Bu, masaüstü deneyimini sürükleyici bir tam çerçeve moduna dönüştürerek varsayılan üç dikey panel deneyiminin yerini alır ve mobil kullanıcıların cihazları yatay olarak tuttuklarında bunları görüntülemelerine olanak tanır.

supports-landscape özelliğini <amp-story> bileşenine ekleyerek masaüstü desteğini etkinleştirin.

<amp-story
  standalone
  supports-landscape
  title="Joy of Pets"
  publisher="AMP tutorials"
  publisher-logo-src="assets/icon.svg"
  poster-portrait-src="assets/cover.jpg"
>
</amp-story>

Written by @CrystalOnScript

{{#initial}}Önemli Bileşenler{{/initial}}{{^initial}}Bileşenler{{/initial}}

{{#initial}}<{{title}}>{{/initial}}{{^initial}}{{title}}{{/initial}}

{{#initial}}Popüler Makaleler{{/initial}}{{^initial}}Sonuçlar{{/initial}}

{{title}}

;(

Arama sonuçlarını yüklemeye çalışırken…

¯\_(ツ)_/¯

Hiçbir sonuç bulunamadı.