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.
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><metacharset="utf-8"><title>Joy of Pets</title><linkrel="canonical"href="pets.html"><metaname="viewport"content="width=device-width"><styleamp-boilerplate>body{-webkit-animation:-amp-start8ssteps(1,end)0s1normalboth;-moz-animation:-amp-start8ssteps(1,end)0s1normalboth;-ms-animation:-amp-start8ssteps(1,end)0s1normalboth;animation:-amp-start8ssteps(1,end)0s1normalboth}@-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><styleamp-boilerplate>body{-webkit-animation:none;-moz-animation:none;-ms-animation:none;animation:none}</style></noscript><scriptasyncsrc="https://cdn.ampproject.org/v0.js"></script><scriptasynccustom-element="amp-video"src="https://cdn.ampproject.org/v0/amp-video-0.1.js"></script><scriptasynccustom-element="amp-story"src="https://cdn.ampproject.org/v0/amp-story-1.0.js"></script><styleamp-custom>...</style></head><body><!-- Cover page --><amp-storystandalonetitle="Joy of Pets"publisher="AMP tutorials"publisher-logo-src="assets/AMP-Brand-White-Icon.svg"poster-portrait-src="assets/cover.jpg"><amp-story-pageid="cover"><amp-story-grid-layertemplate="fill"><amp-imgsrc="assets/cover.jpg"width="720"height="1280"layout="responsive"></amp-img></amp-story-grid-layer><amp-story-grid-layertemplate="vertical"><h1>The Joy of Pets</h1><p>By AMP Tutorials</p></amp-story-grid-layer></amp-story-page><!-- Page 1 --><amp-story-pageid="page1"><amp-story-grid-layertemplate="vertical"><h1>Cats</h1><amp-imgsrc="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>
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.
Tüm videolar amp-video bileşeni aracılığıyla eklenmelidir.
<amp-videocontrolswidth="640"height="360"layout="responsive"poster="/static/inline-examples/images/kitten-playing.png"><sourcesrc="/static/inline-examples/videos/kitten-playing.webm"type="video/webm"/><sourcesrc="/static/inline-examples/videos/kitten-playing.mp4"type="video/mp4"/><divfallback><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-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-pageauto-advance-after="myvideo">
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-storystandalonesupports-landscapetitle="Joy of Pets"publisher="AMP tutorials"publisher-logo-src="assets/icon.svg"poster-portrait-src="assets/cover.jpg"></amp-story>
We use cookies to understand how you use our site and to improve your experience. By continuing to use our site, you accept our use of cookies and privacy policy.