مقدمه گوگل AMP
مقدمه گوگل AMP
در این درس از مجموعه آموزش برنامه نویسی سایت سورس باران، به مقدمه گوگل AMP خواهیم پرداخت.
Google Accelerated Mobile Pages ( گوگل AMP) پروژه جدید منبع باز گوگل است که مخصوصاً برای ساخت صفحات وب سبک با استفاده از amp html طراحی شده است. هدف اصلی این پروژه اطمینان از عملکرد خوب کد AMP و بارگیری سریع آن بر روی همه دستگاه های ممکن مانند تلفن های هوشمند و تبلت ها است.
AMP فقط پسوند HTML استاندارد است. تعداد کمی از تگ های HTML تغییر کرده اند و AMP محدودیت استفاده از آنها را اضافه کرده است. در این درس، ما تگ های html تغییر یافته و محدودیت های اعمال شده بر روی آنها را لیست می کنیم. تگ هایی که با بارگیری منابع خارجی سروکار دارند ، به عنوان مثال تصاویر ، css ، js ، ارسال فرم ها ، فیلم ، صدا و غیره ، تغییر می کنند.
همچنین بسیاری از ویژگی های جدید به amp اضافه شده است، به عنوان مثال amp-date-picker ، amp-facebook ، amp-ad ، amp-analytics ، amp-ad ، amp-lightbox و موارد دیگر که می توانند به طور مستقیم در صفحات HTML استفاده شوند. بقیه را که برای نمایش در نظر گرفته شده است همانطور که هست استفاده می شود.
هنگامی که هر چیزی را در جستجوی گوگل در تلفن همراه خود جستجو می کنید ، صفحه نمایشی که در چرخ فلک گوگل در بالا دیده می شود بیشتر صفحه های آمپ است همانطور که در زیر نشان داده شده است –
وقتی روی صفحه AMP کلیک می کنید ، URL که در نوار آدرس دریافت می کنید به شرح زیر است –
https://www.google.co.in/amp/s/m.timesofindia.com/sports/cricket/india-in-australia/to-hell-with-the-nets-boys-need-rest-ravi-shastri/amp_articleshow/67022458.cms
URL مستقیماً از طرف ناشر ارسال نمی شود ، اما گوگل آن را به نسخه خود در سرور گوگل نشان می دهد که نسخه cached است و در مقایسه با صفحه غیر آمپر به ارائه سریعتر محتوا کمک می کند. این فقط در دستگاه ها یا در حالت شبیه ساز Google اتفاق می افتد.
یک مثال برای صفحه AMP در زیر نشان داده شده است –
<!doctype html>
<html amp>
<head>
<meta charset = "utf-8">
<title>Amp Sample Page</title>
<link rel = "canonical" href = "./regular-html-version.html">
<meta name = "viewport" content = "width = device-width,
minimum-scale = 1,initial-scale = 1">
<style amp-custom>
h1 {color: red}
</style>
<script type = application/json>{
"vars": {
"uid": "23870",
"domain": "dummyurl.com",
"sections": "us",
"authors": "Hello World"
}
}
</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>
<script async src = "https://cdn.ampproject.org/v0.js"></script>
</head>
<body>
<h1>Amp Sample Page</h1>
<p>
<amp-img src = "imgurl.jpg" width = "300" height = "300"
layout = "responsive"></amp-img>
</p>
<amp-ad width = "300" height = "250" type = "doubleclick"
data-slot = "/4119129/no-ad">
<div fallback>
<p style = "color:green;font-size:25px;">No ads to Serve!</p>
</div>
</amp-ad>
</body>
</html>
بایدها و نبایدها در یک صفحه AMP
بگذارید برخی از بایدها و نبایدهایی را که یک برنامه نویس باید در صفحه AMP دنبال کند، درک کنیم.
تگ های اجباری
برخی از تگ های اجباری وجود دارد که باید در صفحه آمپ قرار داده شود ، در زیر آورده شده است –
ما باید مطمئن شویم که AMP یا ⚡ به برچسب html اضافه شده است که در زیر نشان داده شده است –
<html amp> OR <html ⚡>
تگ <head> و <body> باید به صفحه html اضافه شوند.
متا تگ های اجباری زیر باید در بخش سر صفحه اضافه شوند. در غیر این صورت برای اعتبارسنجی آمپ ناموفق خواهد بود
<meta charset = "utf-8"> <meta name = "viewport" content = "width=device-width, minimum-scale = 1, initial-scale = 1">
لینک rel = “canonical” برای افزودن به داخل تگ head
<link rel = "canonical" href = "./regular-html-version.html">
<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 با amp-boilerplate
<noscript>
<style amp-boilerplate>
body{
-webkit-animation:none;
-moz-animation:none;
-ms-animation:none;
animation:none
}
</style>
</noscript>
تگ اسکریپت amp با async بسیار مهم است که در زیر نشان داده شده است –
<script async src = "https://cdn.ampproject.org/v0.js"> </script>
در صورتی که می خواهید CSS سفارشی به صفحه اضافه کنید، لطفاً در اینجا یادداشت کنید ، ما نمی توانیم صفحات amp با استایل خارجی را فراخوانی کنیم. برای افزودن CSS سفارشی ، همه CSS شما باید همانطور که نشان داده شده است ، به اینجا بروید –
<style amp-custom> //all your styles here </style>
تگ استایل باید ویژگی amp-custom به آن اضافه شود.
اسکریپت برای اجزای AMP
توجه داشته باشید که اسکریپت های دارای src و type = “text / javascript” در صفحه amp کاملاً مجاز نیستند. فقط تگ های اسکریپت که async و مربوط به اجزای amp هستند اجازه دارند در بخش head اضافه شوند.
در این بخش چند اسکریپت استفاده شده برای اجزای amp به شرح زیر آورده شده است –
amp-ad
<script async custom-element = "amp-ad" src = "https://cdn.ampproject.org/v0/amp-ad-0.1.js"> </script>
amp-iframe
<script async custom-element = "amp-iframe" src = "https://cdn.ampproject.org/v0/amp-iframe-0.1.js"> </script>
توجه داشته باشید که اسکریپت دارای ویژگی async و custom-element با نام جز component amp است که بارگیری می شود. Amp تگ های اسکریپت را بر اساس ویژگی async و عنصر سفارشی تأیید می کند و اجازه نمی دهد اسکریپت دیگری دانلود شود. این نوع = application / json را می گیرد که ما در پرونده نمونه اضافه کرده ایم همانطور که در زیر نشان داده شده است
<type = application/json>
{
"vars": {
"uid": "23870",
"domain": "dummyurl.com",
"sections": "us",
"authors": "Hello World"
}
}
</script>
در صورت لزوم، از اسکریپت فوق می توان با سایر مولفه های Amp استفاده کرد ، به عنوان مثال برای تجزیه و تحلیل Amp
تگ های HTML
تاکنون تگ های اجباری مورد نیاز در صفحه Amp را مشاهده کرده ایم. اکنون ما در مورد عناصر HTML مجاز و غیر مجاز و محدودیت های اعمال شده در مورد آنها بحث خواهیم کرد.
در اینجا لیستی از تگ های HTML مجاز است / مجاز نیست –
- img
این تگ با amp-img جایگزین می شود. استفاده از برچسب img مستقیم در صفحه AMP مجاز نیست
- video
با amp-video جایگزین شده است
- audio
با amp-audio جایگزین شده است
- iframe
جایگزین شده با amp-iframe
- object
مجاز نیست
- embed
مجاز نیست
- form
می تواند به عنوان <form> استفاده شود. ما باید اسکریپت را برای کار با فرم در صفحه AMP اضافه کنیم.
مثال –
Allowed.<input[type = image]>, <input[type = button]>, <input[type = password]>, <input[type = file]> are not allowed
- <fieldset>
مجاز
- <label>
مجاز
- P, div, header,footer,section
مجاز
- button
مجاز
- a
تگ <a> با شرایط زیر مجاز است ، href نباید با javascript شروع شود. در صورت وجود مقدار ویژگی هدف باید blank_ باشد.
- svg
مجاز نیست
- meta
مجاز
- Link
مجاز. اما اجازه بارگذاری صفحه سبک خارجی را نمی دهد.
- style
مجاز. لازم است ویژگی آمپر-دیگ بخار یا amp-custom داشته باشد.
- base
مجاز نیست
- noscript
مجاز است
نظرات
نظرات html مشروط مجاز نیست. به عنوان مثال –
<!--[if Chrome]> This browser is chrome (any version) <![endif]-->
رویدادهای HTML
رویدادهایی که ما در صفحات html مانند onclick و onmouseover استفاده می کنیم در یک صفحه AMP مجاز نیستند.
ما می توانیم از رویدادها به شرح زیر استفاده کنیم –
on = "eventName:elementId[.methodName[(arg1 = value, arg2 = value)]]"
در اینجا مثالی از رویداد مورد استفاده در عنصر ورودی وجود دارد –
<input id = "txtname" placeholder = "Type here"
on = "inputthrottled:
AMP.setState({name: event.value})">
رویداد مورد استفاده ورودی است.
کلاس ها
شما نمی توانید کلاسهایی با پیشوندهایی مانند -amp- یا i-amp- در صفحات خود داشته باشید. علاوه بر این ، شما می توانید از نام کلاس طبق نیاز خود استفاده کنید.
شناسه ها
نمی توانید شناسه های عناصر html خود را با پیشوند -amp یا i-amp- داشته باشید. علاوه بر این ، شما می توانید از عناصر html خود به عنوان مورد نیاز خود استفاده کنید.
پیوندها
داشتن جاوا اسکریپت به href در صفحات amp مجاز نیست.
مثال
<a href = "javascript:callfunc();">click me</a>
شیوه نامه ها
صفحه های استایل خارجی در صفحه AMP مجاز نیستند. می توان استایل های مورد نیاز صفحه داخل را اضافه کرد –
<style amp-custom> //all your styles here </style>
تگ استایل باید ویژگی amp-custom به آن اضافه شود.
rules-@
دستورالعمل های زیر @ در شیت استایل مجاز است –
- font-face, @keyframes, @media, @page, @supports.@import@ مجاز نخواهد بود. پشتیبانی از همان در آینده اضافه خواهد شد.
- keyframes@ مجاز است در داخل <style amp-custom> استفاده شود. اگر تعداد keyframes زیاد باشد ، ایجاد تگ <style amp-keyframes> خوب است و این تگ را در انتهای سند amp فراخوانی می کنید.
- نام کلاس ها، شناسه ها، نام تگ ها و ویژگی ها نباید با -amp- و i-amp پیشوند قرار بگیرند زیرا آنها در کد amp استفاده می شوند که اگر در هنگام اجرا در صفحه نیز تعریف شود ، می تواند باعث ایجاد تضاد شود.
- ویژگی مهم در داخل یک ظاهر طراحی مجاز نیست زیرا آمپ می خواهد هر زمان که لازم باشد اندازه عنصر را کنترل کند.
فونت های سفارشی
شیت استایل برای فونت های سفارشی در صفحات AMP مجاز است.
مثال
<link rel = "stylesheet" href = "https://fonts.googleapis.com/css?family=Tangerine">
قلم ها از مبدا زیر در لیست سفید قرار دارند که می توانند در داخل صفحات AMP استفاده شوند.
- Fonts.com – https://fast.fonts.net
- Google Fonts – https://fonts.googleapis.com
- قلم عالی – https://maxcdn.bootstrapcdn.com
- Typekit – https://use.typekit.net/kitId.css (متناسب با آن تعویض kitId)
توجه – فونت های سفارشی font-face@ در صفحات AMP مجاز هستند.
مثال
@font-face {
font-family: myFirstFont;
src: url(dummyfont.woff);
}
زمان اجرا AMP
با دانلود فایل AMP، محیط کار با AMP تصمیم می گیرد –
<script async src = "https://cdn.ampproject.org/v0.js"> </script>
پرونده اصلی از دانلود منابع خارجی مراقبت می کند، اولویت بندی زمان بارگیری آنها را تعیین می کند و همچنین هنگامی که development=#1 به URL amp اضافه می شود به اعتبار سند amp کمک می کند.
مثال
http://localhost:8080/googleamp/amppage.html#development=1
URL فوق هنگام اجرا در مرورگر، خطاها را در صورت عدم موفقیت در اعتبار سنجی لیست می کند یا پیام معتبر اعتبار سنجی را در صورت عدم وجود خطا نمایش می دهد.
اجزای AMP
اجزای amp آنها اساساً برای کنترل بارگذاری منبع به روشی کارآمد استفاده می شوند. این همچنین شامل اجزایی برای مراقبت از انیمیشن، نمایش داده ها، نمایش تبلیغات، ویجت های اجتماعی و غیره است.
۲ نوع مولفه در AMP وجود دارد.
- توکار
- خارجی
توجه – <amp-img> یک جز توکار است و در صورت اضافه شدن پرونده هسته amp js در دسترس است. اجزای خارجی مانند <amp-ad> ، <amp-facebook> ، <amp-video> و بسیاری دیگر نیاز به پرونده js مربوطه مربوط به م componentلفه برای اضافه شدن دارند.
ویژگی های مشترک
ویژگی هایی مانند عرض ، ارتفاع ، طرح ، محل نگهدارنده و بازپرداخت تقریباً برای تمام اجزای AMP موجود در دسترس خواهد بود. این ویژگی ها برای تصمیم گیری در مورد نمایش م componentلفه در صفحه AMP برای هر جز component AMP بسیار مهم هستند.
تمام ویژگی های ذکر شده برای AMP با جزئیات در فصل های بعدی این آموزش بیان شده است.
توجه داشته باشید که تمام مثالهای موجود در این آموزش برای دستگاهها آزمایش شده و از حالت شبیه ساز Google Mobile استفاده می شود. بگذارید اکنون با جزئیات در این مورد بیاموزیم.
شبیه ساز موبایل گوگل
برای استفاده از شبیه ساز تلفن همراه گوگل، مرورگر Chrome را باز کنید ، کلیک راست کرده و کنسول برنامه نویس را مانند تصویر زیر باز کنید –
همانطور که در بالا نشان داده شده است، می توانیم ابزار توسعه دهنده Chrome را مشاهده کنیم. پیوندی را که می خواهید در مرورگر آزمایش کنید، بزنید. مشاهده کنید که صفحه در حالت Desktop نمایش داده می شود.
برای دریافت صفحه فوق برای آزمایش دستگاهها، مانند نشان داده شده در زیر روی نوار ابزار تغییر وضعیت کلیک کنید –
همچنین می توانید از کلید میانبر Ctrl + shift + M استفاده کنید. این حالت دسک تاپ را به حالت دستگاه تغییر می دهد همانطور که در زیر نشان داده شده است –
لیستی از دستگاه ها را می توان به صورت زیر مشاهده کرد –
می توانید دستگاهی را که می خواهید صفحه را آزمایش کنید انتخاب کنید. لطفاً توجه داشته باشید که تمام صفحات این آموزشها همانطور که در بالا نشان داده شده است در شبیه ساز Google Mobile آزمایش شده اند. همین ویژگی برای مرورگرهای اخیر Firefox و Internet Explorer نیز موجود است.
لیست جلسات قبل آموزش گوگل AMP
- آموزش گوگل AMP
- بررسی اجمالی گوگل AMP
- مقدمه گوگل AMP
- آموزش تصاویر در گوگل AMP
- آموزش فرم در گوگل AMP
- آموزش Iframes در گوگل AMP
- آموزش ویدیو در گوگل AMP
- آموزش دکمه در گوگل AMP
- آموزش Timeago در گوگل AMP
- آموزش Mathml در گوگل AMP
- آموزش تگ Fit Text در گوگل AMP
- آموزش شمارش معکوس تاریخ در گوگل AMP
- آموزش انتخاب کننده تاریخ در گوگل AMP
- آموزش استوری در گوگل AMP
- آموزش انتخاب کننده در گوگل AMP
- آموزش لینک در گوگل AMP
- آموزش فونت در گوگل AMP
- آموزش لیست در گوگل AMP
- آموزش اعلان کاربر در گوگل AMP
- آموزش next page در گوگل AMP
- آموزش ویژگی ها در گوگل AMP
- آموزش استایل ها و CSS سفارشی در گوگل AMP
- آموزش کلاس های CSS پویا در گوگل AMP
- آموزش اکشن ها و رویدادها در گوگل AMP
- آموزش انیمیشن در گوگل AMP
- آموزش اتصال داده در گوگل AMP
- آموزش طرح بندی در گوگل AMP
- آموزش تبلیغات در گوگل AMP
- آموزش تجزیه و تحلیل در گوگل AMP
- آموزش ویجت های اجتماعی در گوگل AMP
- آموزش نحو در گوگل AMP
- آموزش اعتبار سنجی در گوگل AMP
- آموزش اجزا جاوا اسکریپت در گوگل AMP
.svg)
دیدگاه شما