Gizlilik Politikam Güncellendi. Bkz:Gizlilik Politikası




29 Kas 2017

AMP, Google tarafından geliştirilen bir proje olduğunu daha önce ki yazımda bahsetmiştim. Bu yazımda ise bir  AMP Sayfası Nasıl Oluşturulur ? AMP Yazım Kuralları Nedir ? sorularına cevap bulacağız ve ilk amp sayfamızı hep beraber oluşturmuş olacağız.

AMP Nedir ? Nasıl Çalışır ?

Daha önce ki yazım olan AMP Nedir ? Nasıl Çalışır ? ‘da AMP’nin ne olduğunu, nasıl çalıştığını anlatmıştım. AMP, HTML5’in geliştirilmesiyle beraber ortaya çıkmış bir şey, HTML diline benzer bir yazım şekli olsa da HTML’den kendisini ayıran ve kendisine has bir yazım kuralları mevcut. Bu yazım kurallarına uyulmadığı müddetçe standart bir html sayfası oluşturmuş olursunuz, amp sayfası değil.

Gelin ilk önce AMP Yazım Kuralları Nedir ? sorusuna cevap bulalım.

AMP Yazım Kuralları Nedir ?

Aşağıda ki tablodan bir amp sayfası için gerekli olan kodları bulabilir ve bu kodların kullanım amaçlarını öğrenebilirsiniz. Tabloda yer alan kurallar amp için temel kurallardır. Daha spesifik sayfalar için başka kuralları da mevcuttur. Detaylı bilgiyi amp projesinin sayfasından öğrenebilirsiniz. [Detaylı bilgi]

 

 Kural Kural Açıklaması
Sayfanın en başında  <!doctype html>  etiketi mutlaka olmalıdır.Standart bir html etiketinde olduğu gibi amp sayfalarımız için de bu etiketin kullanılması zorunludur.
Üst kısımda bulunması gereken bir diğer etiketimiz ise <html ⚡>bunun yerine <html amp> etiketi de kullanılabilir.Bu aşamada kullanılan ⚡ işareti ilgili sayfanın bir AMP sayfası olduğunu gösterir. Bunun yerine direkt amp yazarakta bunu sağlayabilirsiniz.
<meta name="viewport" content="width=device-width,minimum-scale=1"> Bu kodu yine <head> etiketinden sonra eklenmektedir.Ayrıca bu koda opsiyonel olarak initial-scale=1 parametresi de eklenebilir.Bu etiket HTML5 ile gelmiş bir meta etikettir. Sayfanın mobil cihazlara duyarlı (responsive) olduğunu belirtir.
İçerik kısmı için <head> ve <body> etiketleri kullanılabilir.Bu etiketler opsiyoneldir ve standart html etiketlerindendir.
<meta charset="utf-8"> Bu etiketi de <head> tagı içerisinde kullanılmalıdır.Bu etiket sayfamızın kodlama dilini gösterir. Standart html etiketlerinden birisidir.
Bu kod  <script async src="https://cdn.ampproject.org/v0.js"></script> yine  <head> tagı içerisinde kullanılmalıdır.AMP için gerekli olan ve kullanılması zorunlu olan JavaScript kütüphanesidir ve bu dosyayı sayfanız dahil etmeniz gerekir.
<link rel="canonical" href="site_adresiniz_ampsiz"> Bu kodu da yine <head> etiketi içerisinde kullanmalısınız.Bu kod ile Google’ye bulunduğu sayfanın AMP’siz adresinin olduğunu gösterir. Yani orijinal adresi belirtmenizi sağlar.

AMP’nin yazım kuralları aşağı – yukarı HTML5 gibi desek yanlış olmaz. HTML5’in yazım kurallarından tek farkı ikinci kuralda yer alan <html ⚡>  ya da <html amp> bu kod olsa gerek. Onun dışında kalan her şey standart bir html5 sayfasında olan etiketlerden ibaret. Fakat yazım kuralları sadece bunlardan ibaret değil. Bunlar bir AMP sayfasında olmazsa olmaz yazım kuralları ve etiketlerdir.

AMP sayfanızda mutlaka olması gereken bir CSS kod satırı mevcut. Bu kod satırını satır içi yazmanız gerekmektedir. Harici bir CSS dosyasıyla eklemeniz yazım yanlışı yapmanızı sağlar ve AMP sayfanız geçersiz olacaktır. AMP sayfalarınızda kullanmanız gereken en temel CSS kodu;

<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>

 

Bu kod üzerinde çok fazla oynama yapmayın derim, ben kurcaladım çokta fayda sağlamıyor. Sadece verilen değerlerde ufak oynamalar yapabiliyorsunuz. Ekstra bir kod eklemeniz veyahut çıkartmanız tüm yapının bozulmasına sebep oluyor.

Yukarıda ki CSS kodunu yine <head> etiketi içerisinde kullanılmaktadır.

 Bir AMP Sayfası Nasıl Oluşturulur ?

Aşağıda ki kodu kopyalayıp, bir index.html dosyasına yapıştırarak bir amp sayfası oluşturabilirsiniz. Kodların içerisinde kullandığımız bir çok şeyi yukarıda yazım kuralları kısmında açıkladım.

<!doctype html>
<html amp lang="tr">
  <head>
    <meta charset="utf-8">
    <script async src="https://cdn.ampproject.org/v0.js"></script>
    <title>AMP Sayfasına Hoşgeldiniz</title>
    <link rel="canonical" href="http://example.ampproject.org/article-metadata.html">
    <meta name="viewport" content="width=device-width,minimum-scale=1,initial-scale=1">
    <script type="application/ld+json">
      {
        "@context": "http://schema.org",
        "@type": "NewsArticle",
        "headline": "Open-source framework for publishing content",
        "datePublished": "2015-10-07T12:02:41Z",
        "image": [
          "logo.jpg"
        ]
      }
    </script>
    <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>Hızlandırılmış mobil sayfaya hoşgeldiniz!</h1>
  </body>
</html>

 

Birçoğunuz bu standart,düz html kodlaması bi’ fark göremedim dediğini duyar gibiyim. Fark birazdan başlayacak 🙂

Bir AMP Sayfasına Resim Nasıl Eklenir ?

Normalde biz html kodlamasında basit şekilde şu kodu kullanıyoruz;

<img src="resmin_adresi" alt="ilk resim" width="90" height="90" title="İlk Resim">

Bu kodu aynen AMP sayfanıza yerleştirdiğiniz de resim gözükecektir. Ancak sayfanız AMP sayfası olmaktan çıkacaktır. Çünkü; AMP’de bu şekilde resim gösterim bir nevi yasaktır, kural dışıdır. Bu kodlama yerine AMP’nin yazım kurallarına göre kullanmanız gerekiyor. Oda şöyle;

<amp-img src="ilk-resim.jpg" alt="İlk Resim" height="400" width="800"></amp-img>

<amp-img> kodu dikkatinizi çekmiştir. AMP daha düzenli bir kodlama yapabilmek ve mobil internet tarayıcılarının sayfanın içerisinde ki yapıyı daha kolay anlayabilmesi ve işleyebilmesi adına bir çok şey için bu tarz gruplandırmalar yapmıştır. Resimler için bu etiketi kullanıyoruz. Peki, diğer etiketler nedir ?

Özel CSS Kodlaması Nasıl Yapacağım ?

AMP’de harici bir css dosyası kullanamıyorsunuz. Yazdığınız tüm css kodları satır içi yani inline olarak yazılmadır. Ancak bununda belli bir sınırı var. Satır içi yazacağınız CSS kodununda belli bir limiti mevcut, bu limiti aşarsanız hata alırsınız.

Kendize ait CSS kodlarını yazmak istiyorsanız bunu <style amp-custom> etiketi ile yapabiliyorsunuz. Örneğin;

<style amp-custom>
 /* Özel css kodlarınızın hepsi burada bulunmalı,buraya yazmalısınız */
  body {
    background-color: white;
  }
  amp-img {
    background-color: gray;
    border: 1px solid black;
  }
</style>

Bu etiket yine <head> içinde olmalıdır aksi takdirde hata almaktasınız.

AMP Olmayan Sayfamı AMP’li Sayfama Nasıl Yönlendirebilirim ?

AMP olmayan bir sayfanızın AMP’li versiyonunu hazırladınız ve AMP’nin istediği gibi kodlama yapıp hazırladınız. AMP olmayan sayfanız AMP’li sayfaya nasıl yönlendireceksiniz ? Bunu yapabilmek için aşağıda ki amp’li olmayan sayfanızın <head>  etiketi içerisine ekleyiniz.

<link rel="amphtml" href="https://site_adresiniz/ampli-sayfaniz.html">

Aynı şekilde AMP’li bir sayfanızı amp’siz sayfaya yönlendirmek için de standart html etiketi olan canonical etiketini kullanacaksınız.

<link rel="canonical" href="https://site_adresiniz.com/ampsiz-sayfa.html">

Ancak bu kodlar sadece arama motorlarının botları için geçerlidir. Kullanıcılar için yönlendirme yapmak için .htaccess kullanarak yönlendirme yapmanız gerekebilir.

Tüm bunlar basit bir AMP sayfası oluşturmak için yeterlidir. Bu rehber niteliğinde ki yazı ile sizde kendinize özel amp sayfaları oluşturabilir ve İnternet sitenizi hızlandırılmış mobil sayfalar ile güçlendirip, kullanıcılarınıza iyi bir deneyim sunabilirsiniz. Bir sonra ki yazımda AMP’i WordPress üzerinde nasıl kullanacağımızı, eklenti ayarlarını nasıl yapacağımızla ile ilgili detaylı bir rehber yazı hazırlayacağım.

Şimdilik, hoşcakalın.


Bu Yazımı Beğendiysen Sosyal Medya Hesaplarında Paylaşarak Bana Destek Olabilirsin!
 Google Plusda Paylaş


 Yazar: Hüseyin Körbalta Hakkında

Blog yazarı, Arayüz geliştiricisi ve Arkaplan geliştiricisi olmak için çalışmalar yapıyor.

 Websitesi
Takip Et:


 Kimler Neler Demiş?

avatar
  Abone Ol  
Bildir

istanbul escortescort istanbulistanbul escort

Bu eser Creative Commons Atıf-GayriTicari-Türetilemez 4.0 Uluslararası Lisansı ile lisanslanmıştır.
Bu lisansın kapsamı dışındaki izinler Kullanım Koşulları adresinde mevcut olabilir.

 Sponsor Bağlantılar:Arıcılık Malzemeleri