AMP Nedir?
AMP Nedir?
Amp, Hızlandırılmış Mobil Sayfalar (Accelerated Mobile Pages) olarak ifade edilir.
AMP özellikle mobil cihazlarda hızlı bir şekilde web sayfalarının açılması için geliştirilen bir yöntemidir. Ve Google tarafından desteklenmektedir.
Amp'nin kendine bir çok katı kuralları vardır. Bu nedenle basit tasarımlar yapılması gerekmektedir.
Örnek Amp Yapısı
<!doctype html>
<html⚡>
<head>
<meta charset="utf-8">
<script async src="https://cdn.ampproject.org/v0.js"></script>
<title>Hello AMP world</title>
<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>
</head>
<body>
<h1>Hello AMP World!</h1>
</body>
</html>
Amp hakkında daha fazla bilgi için: https://www.ampproject.org/ adresini ziyaret edebilirsiniz.
Amp örnekleri için: https://ampbyexample.com/ adresini ziyaret edebilirsiniz.
Amp işleminin örnekleri için: Chrome Amp Validator adresini ziyaret edebilirsiniz.
Brunsia Web - Amp Yapısı
1. Şablon (İçeriğin çevresi, veya dış iskelet yapısı)
2. Sayfa
3. Yazı (Makale) olarak ayrılmışlardır.
Bu içerik türlerine göre amp türleri yer almaktadır.
1. Şablon için; Kapalı veya Elle Değiştir
2. Sayfa için; Kapalı veya Elle Değiştir
3. Yazı için; Kapalı, Otomatik Değiştir veya Elle Değiştir
Amp Türü: Kapalı
Eğer kapalı modu seçilir ise amp çalışmaz ve normal bir site görünümü elde edilir.
Kullanım alanları;
1. Form yapıları
2. Ödeme sayfaları
3. Js gerektiren sayfalar
4. Etkin tasarım gerektiren sayfalarda kapatılır.
Amp Türü: Otomatik Değiştir
Eğer otomatik modu seçilir ise amp builderdaki html etiketlerini analiz ederek bir tasarım çıkartır.
Ancak bu tasarım pek etkin olmayabilir. Bu neden sadece yazılarda izin vermiştir.
Not: Başlık, Metin ve Görsel'e yönelik html etiketleri alınır. Bu nedenle diğer elementlerin bir geçerliliği kalmaz. Bu nedenle içeriği önce otomatik olarak kaydedin. Daha sonra elle düzeltmeler yapabilirsiniz.
Amp Türü: Elle Değiştir
Burada css ve içerik tasarımı yapmanız gerekmektedir. Ve size bir bir kural engeller karşılar.
Bu kurallardan bazıları şunlardır
1. amp- veya i-amp ile başlayan class isimleri veremezsiniz.
2. Genişlik, yükseklik ve layout kavramları çok önemlidir. Ve bunları deneme yanılma ile yapabilirsiniz.
3. Js dosyaları çalıştıramazsınız.
4. <div style="color:#f00">...</div> şeklinde iç stil (inline-style) veremezsiniz.
5. display:block !important gibi bir class yazamazsınız. Çünkü important diye bir kavram yoktur.
Yaptığınız tasarımın uygun olup olmadığın chome amp validation veya https://validator.ampproject.org/ adresinden öğrenebilirsiniz.
Not: Eğer yönetici modundaysanız. Gizle butonuna basıp kontrol etmeyi unutmayın.
© Copyright 2017 - Her hakkı saklıdır.