Amp Stories Nedir? Nas?l Kullan?l?r?

Amp Storeis ana gorsel

Amp Stories Nedir? Nas?l Kullan?l?r?

AMP Stories ?zelli?i, 2016 y?l?nda i?erikleri g?rsel a??dan zengin hikayeler olarak sunmak i?in Google taraf?ndan mobil odakl? olarak olu?turuldu. H?z konusunun her ge?en gün daha fazla ?nem arz etti?i günümüzde AMP zaten büyük bir geli?me olarak kar??m?za ??km??t?.

Halihaz?rda Google, AMP’nin e-ticaret uygulamas?n?n milyonlarca dolarl?k ek sat??a ve baz? i?letmeler i?in d?nü?üm oranlar?nda% 20 art??a yol a?t???n? duyurdu. (kaynak)
Bu ba?ar?n?n yan?t? olarak Google, yenilik?i AMP ?zellikleri sa?lamaya devam ediyor. AMP?Stories?de bunlardan biri olarak kar??m?za ??k?yor.

E?er AMP?geli?tirmelerini gereksiz g?rüyorsan?z yan?l?yorsunuz. Google taraf?ndan desteklenen verilere g?re, AMP kullan?lmayan sayfalara oranla AMP uygulanan sayfalar?n e-ticaret d?nü?üm de?erinin %20 daha fazla oldu?u kan?tlanm??t?r. Detayl? bilgilere Moz’un buradaki makalesinden ula?abilirsiniz. Yani sonu? olarak ne kadar iyi bir i?eri?iniz olursa olsun, onu kullan?c?ya yeterince h?zl? sunamad???n?z takdirde ?al??malar?n?z?n bir ?nemi kalmayabilir.

H?z, hayat?m?zda her ge?en gün daha ?nemli bir hale gelmeye devam ederken ve AMP geli?tirmeleri bu u?urda epeyce i?imizi kolayla?t?r?rken ge?ti?imiz y?l gündeme gelen AMP?stories’i anlamaya vakit ay?rmazsan?z ?ok ?ey kaybedece?inizi s?yleyebilirim. Bu makalede neden AMP?stories’i g?rmezden gelmemeniz gerekti?ini anlatmaya ?al??aca??m ama ?ncelikle hep birlikte AMP?Stories’in ne oldu?u ve ne anlama geldi?ine bakal?m.

AMP Stories Nedir?

Google’?n AMP Stories ?zelli?i t?pk? ?nstagram’da oldu?u gibi kullan?c?lara mobil web sitelerinde i?erik yaratabilme olana?? verir. Bu yenilik Snapchat, Instagram veya Facebook’un ?ok daha ?nceden yapt??? bir ?eye benziyor olsa da , ?ncekilerden ?ok daha belirgin bir avantaja sahip. Bu avantaj dünyan?n en ?ok kullan?lan arama motoru taraf?ndan destekleniyor olmas? elbette.

AMP?ile i?erik, inan?lmaz derecede h?zl? bir ?ekilde yüklenir. Bu ?zellik ile kullan?c?lar?n, uygulamalardan ?ok web sitelerinde vakit ge?irmeleri sa?lanabilir. Kullan?c?lar, AMP?stories?sayesinde klasik arama sonu? sayfas? yerine kayd?r?labilir storylerin oldu?u zengin bir sayfa ile kar??lanacaklar. B?ylece h?zl? tüketilebilir i?erik sayesinde webde daha fazla vakirt ge?irmi? olacaklar.

amp-stories-bigbang-digital

?imdiye kadar CNN, The Washington Post ve Mic gibi ?irketler AMP?partneri olmu? durumda ve dolay?s?yla story ?zelli?ini de aktif bir ?ekilde kullan?yorlar.

Amp Storeis

I??k h?z?nda yüklenmesinin yan? s?ra AMP?storiesler aynen haberlerin veya makalelerin payla??ld??? gibi payla??labilir ?zelli?e de sahip.

AMP Storiesler Nas?l ?al???r?

Bir?o?umuzun bildi?i gibi web sitelerin elini yüzünü düzeltmek i?in javascript olduk?a s?k kullan?l?yor. Ancak bu web makyaj uzman?, ayn? zamanda sayfalar?n loading ve rendering süre?lerini olduk?a yava?lat?yor. Dolay?s?yla asl?nda sayfa h?z?m?z?n performans?n?n dü?mesini istemiyorsak js kullanmaktan mümkün oldu?unca ka??nmal?y?z. (Bunu zaten biliyoruz asl?nda):)

AMP sadece asynchronous JavaScript’in bir web sayfas?nda ?al??mas?na izin verir. Bu da javascript kodunun web sitenizde yer alan herhangi bir kodu engellemeyece?i anlam?na gelir.

Amp Storeis 2

Web masterlar taraf?ndan yaz?lan js’lerin AMP?storieslerde kullan?lmalar?na izin verilmez. ?nteraktif sayfalar sadece custom AMP?elementleri kullan?larak olu?turulabilir.

Custom elementler JavaScript’ten olu?abilir, ancak bir sayfan?n genel performans? üzerinde herhangi bir k?s?tlamaya neden olmad?klar?ndan emin olmak i?in ?zel olarak tasarlanm?? olmalar? gerekir.

ü?ünü Parti javascript’e AMP sayfalar? olu?turulurken izin verilir ancak sayfa rendering i?lemini bloke etmeyecek bir yap?da kurgulanmas? gerekir. AMP?ayr?ca uzant? mekanizmalar?n?n kullan?m?na da izin vermez. A?a??da bir ?rne?ini g?rebilirsiniz
Amp Storeis 3

AMP Stories ?zelliklerine Giri?

Geleneksel AMP?sayfalar? büyük oranda i?erikten olu?maktayd? ancak yeni geli?tirilmi? formatta videolar animasyonlar veya g?rseller kullan?c?ya en iyi deneyimi ya?atmak i?in sunuluyor.

AMP?stories ?ok derin teknik bilgi gerektirmeden hem masaüstü hem de mobil i?in ücretsiz olarak uygulanabilmektedir.

AMP Stories nas?l uygulan?r?

?lk AMP Stories? olu?turmadan ?nce AMP ‘nin tüm bile?enleri konusunda gerekli donan?ma sahip olmal?s?n?z.

  • Her story tekil bir sayfa üzerine yap?land?r?l?r.
  • Her sayfa html kodlar?n?n birle?imlerinden olu?an katmanlar(layers) ve AMP?elementlerinden olu?ur.
  • Koda eklendi?inde bile?enler, a?a??daki gibi g?rünür,

Story = AMP?-story
Page = AMP?-story-page
Layers = AMP?-story-grid-layer

Sayfaya ekledi?inizde ise a?a??daki gibi g?rünür;amp-stories-bigbang-digital-4
Story bile?eni tüm AMP story’nizi, sayfa bile?eni ise story’nizin i?inde yer alan her bir sayfay? i?erir.

Katmanlar bile?eni, sayfada bulunan ??elerin tümünü i?erir.

Google AMP?stories ?rnekleri

Tercih etti?i herhangi bir zamanda, Google’?n geleneksel sayfalar yerine, web sayfalar?n?n AMP sürümlerine, daha fazla link verece?i olduk?a ?ng?rülebilir bir ?eydir.

Bu nedenle, her AMP partnerleri, bu hizmetin ?zelliklerinin gü?lü yanlar?n? g?z ?nünde bulundurarak kullan?yorlar asl?nda.

En yayg?n olarak bilinen AMP partnerleri, webdeki en büyük ama?lar? kullan?c?lar?na h?zl? ve etkili bir ?ekilde bilgi vermek olan haber kurulu?lar?ndan olu?uyor.

Amp Storeis 5

Amp Stories Olu?turmaya Nas?l Ba?layabilirim?

Art?k AMP stories’in ne oldu?unu nerelerde kullan?ld???n? ve bu geli?tirmeden elde edebilece?iniz kazan?lar? biliyorsunuz.

Peki sayfalar?n?z? AMP’ye nas?l ge?irirsiniz?

1- Kodu indirin

Google’?n, i?eri?inizin AMP?versiyonunu alabilmesi i?in sayfan?z?n kodunu de?i?tirmeniz gerekmektedir. Orjinal sayfan?z AMP?canonical kodu olarak kabul edilen a?a??daki kodu i?ermelidir,

E?er ihtiyac?n?z olan tüm AMP?kodlar?na eri?mek istiyorsan?z amp-wp GitHub page linkini t?klay?n ve dowland zip butonundan kodu indirin.

Amp Storeis 6
E?er wordpress kullan?yorsan?z bu kodu herhangi bir eklenti ekler gibi wordpress sitenize yükleyebilirsiniz.

Di?er yandan a?a??daki kodu do?rudan buradan indirebilir ve .html uzant?l? dosyan?za kaydedebilirsiniz.

Amp Storeis 7

2- Taslak sayfay? ?al??t?r?n

Taslak sayfan?z? test etmek i?in dosyan?za bir sunucudan ula?man?z gerekir. Test etmenize yard?mc? olmak i?in ge?ici lokal web server kullanabilirsiniz. Bunun i?in,
? “Web Server for Chrome” Google Chrome app
? Apache
? A local HTTP Python server
? Nginx

AMP?, daha güvenli bir yap? i?in kesinlikle https kullanman?z? ?neriyor.

Yerel web server?n?z? ayarlad?ktan sonra taslak i?eri?inize a?a??daki url yap?s? ile giri? sa?layabilirsiniz,
http://localhost:8000/article.html.

E?er her ?ey yolunda g?rünüyorsa devam edin ve bir cover page olu?turun.

3- Kapak sayfas? (cover page) olu?turun

Kapak sayfan?z tag ile temsil edilir. Bir storyde o story i?in ayr? ekranlar? i?eren birden fazla bile?ene sahip olabilirsiniz. Ancak se?ti?iniz biri kapak resmi olarak i?lev g?rür.
Bir kapak sayfas? olu?turmak i?in ilk sayfan?za benzersiz bir ?D atay?n,

<amp-story standalone>

<amp-story-page id=”cover”>

</amp-story-page>

</amp-story>

Bu kod sayfan?z i?in bir kabuk g?revi g?rür ancak ge?erli k?lmak i?in en az bir katman (layer) belirtmeniz gerekir.

Amp Storeis 8
AMP’deki katmanlar grafiklerdeki katmanlara benzer ?ekilde ?al???r. Birbiri üzerine y???lm?? farkl? ??elerden olu?ur. Yukar?daki ?rnekte Birinci katman kapak foto?raf? g?revi g?ren g?rüntüyü ikinci katman ise story’nin ba?l???n? ve sat?r?n? i?erir.

Birinci katman? olu?turmak i?in elementini elementine ekleyin. G?rüntünün bütün ekran? doldurmas?n? istiyorsan?z amp-story-grid-layer etiketine template=”fill” ?zelli?ini ekleyin.

Katman?n i?ine bir cover.jpg dosyas? i?in elementini ekleyin ve layout=”responsive” tagini ekleyerek tasla??n responsive ?al??t???na emin olun.

Yukar?daki ad?mlar takip edildi?inde ilk katman a?a??daki gibi g?rünür,

Amp Storeis 9
?kinci bir katman eklemek i?in fill template yerine vertical ?ablonu kullan?n. Buradan ?ablona ula?abilirsiniz.

Amp Storeis 10
Kapak sayfan?z? tamamlad?ktan sonra daha fazla sayfa ekleyebilirsiniz.

4- Daha Fazla Sayfa Ekleyin

Daha fazla sayfa ekleme i?lemi taslak sayfa veya cover sayfa eklemeye benzer süre?leri i?erir.
Kulland???n?z kod, se?ti?iniz template’e ba?l? olacakt?r. Vertical template’e sahip bir katmana i?erik eklemek i?in a?a??daki elementlere benzer ?eyler eklemelisiniz

– Ba?l?k i?eren bir
– < h1 >etiketi
– Responsive amp-img
– Metninizin tümünü i?eren q ??esi

Yeni sayfan?z a?a??daki gibi g?rünmeli,

Amp Storeis 11
Hikayenizi geli?tirmek i?in animasyon elementleri de ekleyebilirsiniz.

5- Animasyon Elementleri Ekleyin:

Storynizi daha ilgi ?ekici bir hale getirmek i?in ba?l??? sayfaya dü?er bi?imde verebilir, metni d?ndürebilir, soldurabilir ya da ba?ka herhangi bir efekt ekleyebilirsiniz. AMP??u an a?a??daki haz?r ayarlanm?? animasyon ??elerini i?eriyor,

Amp Storeis 12

Bir elemente bir animasyon eklemek istiyorsan?z animate-in=”animationpresetcodehere” kodunu eklemeniz yeterli olacakt?r. ?rne?in darbe animasyonu kullanmak i?in kodunuz a?a??daki gibi g?rünebilir,

amp-story-page id=”page3″>

Pulse this text into the page

Animasyon ??eleri eklendikten sonra bookend olu?turmaya haz?rs?n?z.

6- Bookend olu?turun

Bookend, hikayenizi tamamlayan son ekrand?r ilgili linklerinizi veya sosyal medya payla??m linklerinizi eklemek i?in bu ekran? kullanabilirsiniz.
AMP stories elementlerinize bookend-config-src niteli?i ekleyin ve ard?ndan bookend.json dosyas?na y?nlendirin.

Tamamlad???n?zda a?a??daki gibi bir ekran olu?mal?d?r;

amp-stories-bigbang-digital-13

Son olarak AMP?Html inizi do?rulamaya haz?rs?n?z.

7- AMP html do?rulama

AMP?Sayfan?z? do?rulaman?n bir?ok yolu vard?r ?rne?in chrome dev tools kullanabilirsiniz.
— sayfan?z? bir taray?c?da a??n
— url inize # development =1 ekleyin
— chrome dev tolls console b?lümünü a??n ve Herhangi bir do?rulama hatas? var m? diye kontrol edin.

Amp Storeis 14
Ba?ka bir do?rulama y?ntemi olarak AMP?validator chrome uzant?s?n? da kullanabilirsiniz.

Amp Storeis 15

Her iki ara?ta AMP kodunuzla ilgili herhangi bir sorun varsa bunu g?sterecek ve onarmak i?in size ipu?lar? verecektir.

Yazar: Dilan Eser

Twitter Icon?linkedin-icon-256-933473553

 

No Comments

Sorry, the comment form is closed at this time.

秋霞电影网午夜鲁丝片