Amp Html Ders-2 Script ve Style
UstaDerslik Soru-Cevap Yararlı Araçlar
arama ikon

bilgi UstaDerslik
Bu uyari kutusudur.
Tamam
Anasayfa
İletişim
Üyeler

Amp Html Ders-2 Script ve Style

profil
cArleone
BEĞEN(0)
BEĞENME(0)
GÖRÜNTÜLENME(687)
RAPOR ET
Amp html'in daha hızlı çalışması için normal javascript kodları kapalıdır.Ama bazı apilerin çalışması için sayfaya javascript kodlarını dahil etmemiz gerekiyor.Örneğin analytics veya adsense gibi.Bunun için bize sayfaya dahil edebildiğimiz bir çok javascript dosyası sunmuşlar.Bunları sayfaya dahil ettiğimizde o kodlar çalışabiliyor.

Şuradan https://github.com/ampproject/amphtml/tree/master/extensions tüm apilere ulaşabilirsiniz.Kullanacağımız apinin dosyasını head tagları arasına dahil ediyoruz.Örneğin analytics için
<script async custom-element="amp-analytics" src="https://cdn.ampproject.org/v0/amp-analytics-0.1.js"></script>

bu şekilde.Daha sonra apinin js kodlarını aşağıdaki taglar
<script type="application/ld+json">

</script>

arsasına yazıyoruz.Facebook,twitter,youtube,jwplayer,izlesene vs bir çok popüler 3 taraf eklentisini destekliyor.


Css kodlarımızı head tagları arsında
 <style amp-custom>

</style>


bu şekilde style tagı açarak yazabiliyoruz.Dikkat etmemiz gereken type="text/css" yazmıyoruz.amp-custom parametresini veriyoruz.

Genel Örnek :
<!doctype html>
<html amp>
<head>
<meta charset="utf-8">
<link rel="canonical" href="urun-1.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>
<script async src="https://cdn.ampproject.org/v0.js"></script>
<script async custom-element="amp-youtube" src="https://cdn.ampproject.org/v0/amp-youtube-0.1.js"></script>

<style amp-custom>
.baslik{width:90%;height:40px;line-height:40px;text-align:center;background:#ddd;margin:25px auto 25px auto;}
</style>
</head>
<body>
<div class="baslik">UstaDerslik</div>
<amp-youtube data-videoid="QwJU9beMU7I" layout="responsive" width="480" height="270"></amp-youtube>
</body>
</html>



Kod
Kalın
Vurgu
Resim
Video
Url
CEVAPLA
Tüm Hakları Saklıdır. ©Arleone 2013-2014 UstaDerslik






Giriş
Şifremi Unuttum...
Şifre Talep
  Kuralları Kabul Ediyorum.
Kaydol