Anasayfa » seyyar » Bilmeniz Gereken 10 Önemli Hızlandırılmış Mobil Sayfa (AMP) Bileşeni
Bilmeniz Gereken 10 Önemli Hızlandırılmış Mobil Sayfa (AMP) Bileşeni
Hızlandırılmış Mobil Sayfalar veya AMP Google’ın girişimi mobil web'i daha hızlı hale getirin. Bu amaca ulaşmak için, AMP standartları HTML, CSS ve JavaScript’i nasıl kullanabileceğinizi Dış kaynakların yüklenmesini yönetir, resimler, videolar ve reklamlar gibi kendi çalışma zamanı aracılığıyla.
Bu sizi gerektirir kullanılamaz Herhangi bir özel (yazar tarafından yazılmış veya üçüncü taraf) JavaScript veya AMP belgelerinizdeki resimler ve videolar gibi kaynakla ilgili HTML öğeleri.
AMP, kullanıcıların ihtiyaçları ile en iyi performans uygulamaları arasındaki boşluğu kapatmak için; belirli bileşenler yapabilirsin dışlanan bu öğelerin yerine kullanın.
AMP Bileşenleri belirli HTML etiketleri. Normal HTML etiketlerine benzer davranırlar: açılış ve kapanış etiketlerine, niteliklerine sahiptirler ve çoğu CSS ile stillendirilebilir. Kolayca tanınabilirler, çünkü her zaman ile başla amper- önek.
İki tür AMP Bileşeni vardır: gömme ve Genişletilmiş Bileşenler.
Dahili AMP Bileşenleri
Dahili ins AMP'nin JavaScript çalışma zamanına dahil edilmiştir, bu nedenle bunları ayrı ayrı dahil etmeniz gerekmez.
1. amper-img
değiştirir etiket AMP HTML belgelerinde. Eklemeniz gerekir src ve alt Tıpkı normal çalıştığınız zamanki gibi eleman.
ayrıca diğer iki gerekli özelliğe sahiptir: belirtin Genişlik ve yükseklik Öznitellikler tamsayı piksel değerlerinde, bu AMP çalışma zamanının mizanpajı önceden hesaplamak.
Eğer istersen görüntüyü duyarlı hale getirme, ekle düzen = "duyarlı" bağlıyor. düzen nitelik düzeni kontrol eder AMP belgelerinde ve herhangi bir AMP Bileşenine eklenebilir (AMP Düzen Sistemi hakkında daha fazla bilgi edinin).
Ayrıca kullanabilirsiniz srcset özniteliği etiketlemek farklı görüntüler belirt farklı görünümler ve piksel yoğunlukları için. AMP olmayan görüntülerle aynı şekilde çalışır.
2. amp-video
için kullanılabilir HTML videolarını doğrudan gömün AMP HTML belgelerinde. Değiştirir AMP dosyalarında. etiket tembel yükler videoları performansı optimize etmek için.
Videonun kaynağı HTTPS protokolü ile sunulmalıdır. Eklemek için gerekli Genişlik ve yükseklik öznitelikleri, tıpkı bileşen.
etiketi gibi birçok isteğe bağlı özellik vardır. otomatik oynatma ve afiş HTML5 videonuzun görüntülenme biçiminde ince ayar yapmak için belirleyebileceğiniz.
mp4, webm, ogg ve HTML5 tarafından desteklenen tüm diğer biçimleri destekler
İstersen ayrıca yapabilirsin. geri dönüş videoları ekle HTML5 videoları desteklemeyen tarayıcıları olan kullanıcılar için geri çekil özellik ve HTML etiketi.
Reklam ağınız tarafından sağlanan komut dosyalarını kendiniz çalıştıramazsınız. Bunun yerine, AMP çalışma zamanı, verilen ağın JavaScript'ini sanal alan içinde yürütür. Sen yalnızca hangi şebekeyi kullandığınızı belirtmeniz gerekir, ve verilerinizi ekleyin.
bileşen gerektirir reklamın boyutlarını ekleyin kullanmak Genişlik ve yükseklik Öznitellikler.
İle kullandığınız reklam ağını tanımlayabilirsiniz. tip bağlıyor. Desteklenen reklam ağlarının listesine bakın.
Her reklam ağının kendi veri-* ayrıca eklemeniz gereken öznitelikleri. Hangisine ihtiyacınız olduğunu görmek için yukarıdaki listede reklam ağınızı tıklayın..
takma adıdır , Belgeler, bunun yerine kullanılabileceğinden başka bir şey söylemez. olduğu zaman anlamsal olarak daha doğru. Google, zamanla reklamlarla ilgili AMP bileşenlerini geliştirmeyi vaat ettiğinde, bu gelecekte değişebilir.
4. amper-piksel
İle , yapabilirsin bir izleme pikseli ekle AMP HTML belgelerinize sayfa görüntülemelerini say. Gerekli olan tek bir özniteliği vardır src İhtiyacınız olan özellik izleme pikseline ait URL'yi belirtin.
etiket izin verir standart URL ikameleri, bu yapabileceğin anlamına gelir rastgele bir URL değeri üret Her gösterimi izlemek için.
Bu bileşeni kullanmak istiyorsanız, AMP'nin URL Değiştirme Rehberine bakın. Stil veremeyeceğinizi unutmayın. bileşen.
Genişletilmiş AMP Bileşenleri
Genişletilmiş AMP bileşenleri olarak JavaScript çalışma zamanının bir parçası değil, sen her zaman onları almanız gerekir içinde AMP sayfasını kullanmak istediğiniz bölümü.
Not: bileşen sürümleri gelecekte değişebilir, bu nedenle mevcut sürümü kontrol et belgelerde.
5. amp-işitsel
değiştirir HTML5 etiketi ve mümkün kılar HTML5 ses dosyalarını doğrudan gömme AMP sayfalarında.
Kullanmak için belirtmeniz gerekir. src, Genişlik ve yükseklik özellikleri ve ayrıca isteğe bağlı üç özellik ekleyebilirsiniz: otomatik oynatma, döngü ve sessiz.
Aynı zamanda iyi bir fikir olabilir geri dönüş ses dosyaları ekle HTML5'i desteklemeyen tarayıcılara sahip kullanıcılar için. Bunu kullanarak yapabilirsiniz. geri çekil özellik ve sadece yukarıda belirtilenlerde olduğu gibi bileşen.
AMP bileşeni, aynı ses formatlarını destekler. HTML5 etiketi.
Tarayıcınız HTML5 sesi desteklemiyor.
Kullanmak , aşağıdaki betiği AMP belgenizin bir kısmı:
6. amper-iframe
iframe görüntüler AMP belgelerinde. normal HTML iframe'lerinden daha güvenli olması için yapılmıştır. Bu yüzden onlar varsayılan olarak korumalı alan.
İle ilgili bazı kurallar var. doğrulamayı geçmek için takip etmelisin.
Belirtmeniz gerekir Genişlik, yükseklik, ve kum havuzu Öznitellikler. kum havuzu öznitelik varsayılan olarak boştur, ancak bunu yapmak için farklı değerler verebilirsiniz. iframe davranışını değiştir, Örneğinsandbox = "allow-komut"iframe'in JavaScript çalıştırmasına izin verir. Standart iframe'lerin niteliklerini de kullanabilirsiniz.
Boyutları tarafından önceden tanımlanmış Genişlik ve yükseklik öznitelikleri, çalışma zamanında yeniden boyutlandırmak için bir yol var. Kullanmak için bileşenine aşağıdaki komut dosyasını AMP sayfanıza ekleyin:
7. amper-akordeon
Akordeonlar Mobil tasarımda, yerden tasarruf sağladıkları halde, içeriği hala erişilebilir bir şekilde görüntüleyen sık kullanılan bir UI deseni oluşturur.. mümkün kılar hızlıca akordeon ekleyin AMP sayfalarına.
Akordeon bölümleri HTML5 etiketi ve olması gerekir doğrudan çocuklar arasında etiket.
Her bölüm iki doğrudan çocuğu olmalı:
başlık için bir
içerik için bir tane (içerik ayrıca bir resim olabilir)
Kullan genişletilmiş Varsayılan olarak genişletmek istediğiniz herhangi bir bölümdeki özellik.
Bölüm 1
Bölüm 1'in İçeriği
Bölüm 2
2. Bölümün İçeriği
Bölüm 3
Section 3 için resim
Kullanmak için AMP belgenizdeki bileşen için aşağıdaki komut dosyasını ekleyin:
8. amper-ışık kutusu
bir lightbox ekler Mobil Sayfalarda farklı öğelere (çoğu durumda görüntüler).
Kullanıcı elemanla etkileşime girdiğinde, örneğin üzerine dokunduğunda, ışık kutusu tüm görüntü alanını genişletir ve doldurur. Gerek bir düğme veya başka bir kontrol ekle kullanıcının üzerine dokunabileceği.
Bunu not et amper-ışık kutusu sadece görüntü yok düzen.
Kullanmak için bileşeni, aşağıdaki kodla almanız gerekir:
9. amper-atlıkarınca
Atlıkarıncalar mobil tasarımda sıklıkla kullanıldıkları gibi kullanılırlar. sayısız benzer eleman göster (en sık görüntüler) yatay eksen boyunca. AMP sonuçları ayrıca Google Arama’da atlıkarınca biçiminde sunulur.
bileşen sitenize atlıkarınca eklemenizi sağlar. doğrudan çocuklar arasında bileşen olarak kabul edilecektir atlıkarınca öğeleri. Atlıkarınca ölçülerini, Genişlik ve yükseklik Öznitellikler.
İsteğe bağlı kullanabilirsiniz tip belirleme özelliği atlıkarınca öğeleri nasıl gösterileceğini. Eğer tip öznitelik alır "Carousel" değer, öğeler gösterilecek sürekli bir şerit olarak (Bu varsayılan) "Slaytlar" değer öğeleri gösterecektir slayt biçiminde.
etiketi aynı zamanda sonucu ayarlamanıza yardımcı olabilecek başka isteğe bağlı özelliklere de sahiptir..
Aşağıdaki örnekte, atlıkarınca ve tüm öğelerinin aynı olduğuna dikkat edin. aynısını kullan Genişlik ve yükseklik değerler.
bileşen aşağıdaki betiğin eklenmesini gerektirir:
10. amper-analiz
için kullanılabilir analitik verileri topla AMP sayfalarında. Şu anda, dört tür izleme etkinliğini destekler, ancak bu gelecekte değişebilir:
Sayfa görünümü
Çapa Tıklamaları
kronometre
Kaydırma
Kullanmak , gerek JSON yapılandırma nesnesi ekleyin içinde
Aşağıdaki betiği almanız için AMP HTML sayfanızın bileşen:
Son sözler
Bu yazıda, tüm dahili AMP bileşenlerine ve bunların bazılarına bir göz attık. Hızlandırılmış Mobil Sayfalar hala yeni olduğundan, gelecekte pek çok şey değişebilir, bu nedenle belgelere Github veya resmi AMP sitesinde göz atmaya değer.
Bu AMP bileşenleri açık kaynak olduğundan, geliştirmeye bile katkıda bulunabilirsiniz. kendi bileşeninizi yaratmak. Tam bir AMP sayfasının farklı bileşenlerle nasıl göründüğünü görmek istiyorsanız, Github’daki bu birkaç örneği inceleyebilirsiniz..
