Szczegóły techniczne relacji internetowych
Important: this documentation is not applicable to your currently selected format websites!
Ten przewodnik wyjaśnia wszystkie szczegóły techniczne i najlepsze praktyki, które należy znać, aby z powodzeniem tworzyć relacje internetowe za pomocą AMP.
Prawidłowy AMP
Relacja internetowa to pod względem technicznym pojedyncza strona utworzona przy użyciu AMP i zgodna ze specyfikacją AMP:
- Zaczyna się od deklaracji
. - Zawiera znacznik najwyższego poziomu
albo. - Zawiera znaczniki
i. - Zawiera znacznik
w sekcji. Zgodnie z najlepszą praktyką należy dodać skrypt jak najwcześniej w sekcji. - Zawiera znacznik
w sekcji, z odsyłaczem href wskazującym adres URL relacji internetowej. - Zawiera znacznik
w sekcji. Zalecane jest dodanie również właściwości initial-scale=1. - Zawiera kod standardowy AMP w sekcji
.
Różnica między stroną internetową AMP a relacją internetową utworzoną przy użyciu AMP to składnik amp-story. Jest jedynym bezpośrednim elementem podrzędnym sekcji dokumentu i musi zawierać atrybut standalone. Wszystkie strony, warstwy i elementy relacji internetowej są definiowane w znacznikach
<html ⚡>
<head>
<meta charset="utf-8" />
<title>Joy of Petstitle>
<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>
<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 Petsh1>
<p>By AMP Tutorialsp>
amp-story-grid-layer>
amp-story-page>
<amp-story-page id="page1">
<amp-story-grid-layer template="vertical">
<h1>Catsh1>
<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 Blyq
>
amp-story-grid-layer>
amp-story-page>
...
amp-story>
body>
html>
Więcej informacji zawiera samouczek tworzenia pierwszej relacji internetowej i dokumentacja składnika amp-story .
Szczytowa wydajność i komfort użytkowania
Użytkownicy mogą wyświetlać relacje internetowe w miejscach o słabym połączeniu sieciowym lub na starszych urządzeniach. Zapewnij im wystarczający komfort, stosując się do tych najlepszych praktyk.
Kolor tła
Określ kolor tła każdej strony relacji internetowej. Określenie koloru tła zapewni wyświetlenie dobrego zasobu rezerwowego, jeśli warunki użytkownika uniemożliwią pobranie zasobów obrazów lub wideo. Wybierz kolor, który jest reprezentatywny dla dominującego koloru planowanego zasobu tła strony lub użyj spójnego motywu kolorystycznego na wszystkich stronach relacji. Upewnij się, że kolor tła jest inny niż tekst, aby zapewnić czytelność.
Definiuj kolor tła stron w znacznikach