آموزش ویژگی ها در گوگل AMP

erfan molaei
3 سال پیش
آموزش ویژگی ها در گوگل AMP

آموزش ویژگی ها در گوگل AMP

در این درس از مجموعه آموزش برنامه نویسی سایت سورس باران، به آموزش ویژگی ها در گوگل AMP خواهیم پرداخت.
در این درس کلیه خصوصیات مشترک مورد استفاده توسط مولفه های AMP مورد بحث قرار خواهد گرفت.
لیست ویژگی ها در گوگل AMP به شرح زیر است –
  • fallback
  • heights
  • layout
  • media
  • noloading
  • on
  • placeholder
  • sizes
  • width and height

ویژگی fallback

از ویژگی fallback بیشتر در مواردی استفاده می شود که مرورگر از عنصر مورد استفاده پشتیبانی نکند یا در بارگیری پرونده یا داشتن اشکال در پرونده استفاده شده مشکلی داشته باشد.
به عنوان مثال، شما از amp-video استفاده می کنید و پرونده رسانه دارای مشکلاتی در مرورگر است بنابراین در چنین مواردی می توانیم به جای نشان دادن، ویژگی fallback را مشخص کنیم و پیامی را نمایش دهیم که فایل رسانه قابل پخش نیست یا توسط مرورگر پشتیبانی نمی شود.
<amp-video controls
   width = "640"
   height = "360"
   layout = "responsive"
   poster = "images/videoposter.png">
   <source src = "video/bunny.webm" type = "video/webm" />
   <source src = "video/samplevideo.mp4" type = "video/mp4" />
   <div fallback>
      <p>This browser does not support the video element.</p>
   </div> 
</amp-video>

 

اجازه دهید ما با استفاده از یک مثال، عملکرد سیستم عامل را درک کنیم –

مثال

<!doctype html>
<html amp lang = "en">
   <head>
      <meta charset = "utf-8">
      <script async src = "https://cdn.ampproject.org/v0.js"></script>
      <title>Google AMP - Amp Video</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">
   
      <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 custom-element = "amp-video" 
         src = "https://cdn.ampproject.org/v0/amp-video-0.1.js">
      </script>
   </head>
   <body>
      <h3>Google AMP - Amp Video</h3>
      <amp-video controls
         width = "640"
         height = "360"
         layout = "responsive"
         poster = "images/videoposter.png">
         <source src = "video/bunny.webm"type="video/webm" />
         <source src = "video/samplevideo.mp4"type = "video/mp4" />
         <div fallback>
            <p>This browser does not support the video element.</p>
         </div>
      </amp-video>
   </body>
</html>

 

خروجی

Fallback Attribute

ویژگی Heights

این ویژگی اساساً برای طرح پاسخگو پشتیبانی می شود. می توانید از یک عبارت رسانه ای برای ویژگی Heights استفاده کنید و این مربوط به ارتفاع عنصر است. همچنین مقادیر درصد را می گیرد ، بنابراین ارتفاع براساس درصد عرض داده شده محاسبه می شود.

مثال

 
<!doctype html>
<html amp lang = "en">
   <head>
      <meta charset = "utf-8">
      <script async src = "https://cdn.ampproject.org/v0.js"></script>
      <title>Google AMP - heights attribute</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">
      
      <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>
      
      <style amp-custom>
         amp-img {
            border: 1px solid black;
            border-radius: 4px;
            padding: 5px;
         }
         h1{font-family: "Segoe UI",Arial,sans-serif;font-weight: 400;margin: 10px 0;}
      </style>
   </head>
   <body>
      <h1>Google AMP - heights attribute</h1>
      <amp-img src = "images/christmas1.jpg"
         width = "320" height = "256"
         heights = "(min-width:500px) 200px, 80%">
      </amp-img>
   </body>
</html>

 

خروجی

 

Heights Attribute

 

ویژگی Layout

AMP-Layout یکی از ویژگی های مهم موجود در google-amp است. Amp Layout اطمینان حاصل می کند که هنگام بارگیری صفحه، بدون ایجاد سوسو زدن یا مشکل پیمایش، اجزای amp به درستی ارائه می شوند. همچنین قبل از انجام سایر منابع از راه دور مانند درخواست http برای تصاویر، برقراری تماس داده ای، رندر صفحه را بررسی می کند.
لیست طرح پشتیبانی شده توسط amp به شرح زیر است –
  • Not Present
  • Container
  • fill
  • fixed
  • fixed-height
  • flex-item
  • intrinsic
  • nodisplay
  • Responsive
در مورد Google AMP – طرح بندی این آموزش به طور مفصل درباره همین موضوع خواهید آموخت.
نحوه کارکرد layout= ”responsive” با درک مثالی در زیر که نشان داده شده است،

مثال

<!doctype html>
<html amp lang = "en">
   <head>
      <meta charset = "utf-8">
      <script async src = "https://cdn.ampproject.org/v0.js"></script>
      <title>Google AMP - Image>/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">
      
      <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>
      
      <style amp-custom>
         amp-img {
            border: 1px solid black;
            border-radius: 4px;
            padding: 5px;
         }
         displayitem {
            display: inline-block;
            width: 200px;
            height:200px;
            margin: 5px;
         }
         h1{font-family: "Segoe 
         UI",Arial,sans-serif;font-weight: 400;margin: 10px 0;}
      </style>
   </head>
   <body>
      <h1>Google AMP - Layout = responsive Image Example>/h1>
      <div class = "displayitem">
         <amp-img alt = "Beautiful Flower"
            src = "images/flower.jpg"
            width = "246"
            height = "205"
            layout = "responsive">
         </amp-img>
      </div>
   </body>
</html>

 

خروجی

آموزش ویژگی ها در گوگل AMP

ویژگی Media

از این ویژگی می توان در اکثر اجزای AMP استفاده کرد. به یک مدیا کوئری نیاز دارد و اگر این مقدار مطابقت نداشته باشد، جز مولفه ها ارائه نمی شود.
بگذارید با کمک یک مثال ،  ویژگی مدیا را درک کنیم –

مثال

<!doctype html>
<html amp lang = "en">
   <head>
      <meta charset = "utf-8">
      <script async src = "https://cdn.ampproject.org/v0.js"></script>
      <title>Google AMP - Image</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">
      
      <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>
      <style amp-custom>
         amp-img {
            border: 1px solid black;
            border-radius: 4px;
            padding: 5px;
         }
         h1{font-family: "Segoe 
         UI",Arial,sans-serif;font-weight: 400;margin: 10px 0;}
      </style>
   </head>
   <body>
      <h1>Google AMP - Media Attribute</h1>
      <div class = "displayitem">
         <amp-img
            media = "(min-width: 600px)"
            src = "images/christmas1.jpg"
            width = "466"
            height = "355"
            layout = "responsive">
         </amp-img>
      </div>
   </body>
</html>

 

همانطور که در زیر نشان داده شده است، از ویژگی media بر روی تگ <amp-img> استفاده کرده ایم –
<amp-img
   media = "(min-width: 600px)"
   src = "images/christmas1.jpg"
   width = "466"
   height = "355"
   layout = "responsive">
</amp-img>

 

توجه داشته باشید که اگر عرض صفحه کمتر از ۶۰۰ پیکسل باشد، تصویر نمایش داده نمی شود. ما برای آزمایش نمونه از حالت موبایل شبیه ساز Google استفاده خواهیم کرد.

خروجی در گوشی های هوشمند

آموزش ویژگی ها در گوگل AMP
ما در دستگاه بررسی کردیم که تصویر قابل مشاهده نیست زیرا عرض دستگاه کمتر از ۶۰۰ پیکسل است. اگر یک رایانه لوحی را بررسی کنیم ، همانطور که در زیر نشان داده شده است ، خروجی می گیریم –

خروجی در IPAD

آموزش ویژگی ها در گوگل AMP

ویژگی Noloading

اجزای amp مانند <amp-img> ، <amp-video> ، <amp-facebook> قبل از بارگذاری محتوای واقعی و نمایش دادن به کاربر ، یک نشانگر بارگیری را نشان می دهد.
برای متوقف کردن نشانگر بارگیری، می توانیم از ویژگی noloading به شرح زیر استفاده کنیم –
<amp-img src = "images/christmas1.jpg"
   noloading
   height = "300"
   width = "250"
   layout = "responsive">
</amp-img>

 

ویژگی on

ویژگی on در عناصر برای مدیریت رویداد و اعمال روی اجزای amp استفاده می شود. نحو مورد استفاده در ویژگی به شرح زیر است –
نحو –
on = "eventName:elementId[.methodName[(arg1 = value, arg2 = value)]]"

 

جزئیات منتقل شده به ویژگی on به شرح زیر است –

 

  • eventName – این نام رویدادی است که برای مولفه amp موجود است. به عنوان مثال ، برای فرم ها می توانیم از submit-success, submit-error eventNames. استفاده کنیم.
  • elementId – این شناسه عنصری را می گیرد که رویداد باید روی آن فراخوانی شود. این می تواند شناسه شکلی باشد که می خواهیم در مورد موفقیت یا خطا بدانیم.
  • MethodName – این نام متدی است که باید در آن رویداد فراخوانی شود.
  • arg = value – این آرگومان ها را با key=value مقدار منتقل شده به روش می گیرد.
همچنین امکان انتقال چندین رویداد به ویژگی On به شرح زیر وجود دارد –
on = "submit-success:lightbox;submit-error:lightbox1"

 

توجه – اگر چندین رویداد وجود داشته باشد ، آنها به ویژگی on منتقل می شوند و با استفاده از نقطه ویرگول (؛) جدا می شوند.

ویژگی Actions

عملکردها اساساً با ویژگی on استفاده می شوند و نحو به شرح زیر است:
on = "tab:elementid.hide;"

 

ما می توانیم چندین عمل را به شرح زیر انجام دهیم –
on = "tab:elementid.open;tab:elementid.hide;”

 

Elementid شناسه عنصری است که قرار است عمل بر روی آن انجام شود.
Amp دارای برخی از رویدادها و اقدامات تعریف شده در سطح جهانی است که می تواند در هر مولفه amp استفاده شود و آنها tap events هستند و اقدامات hide, show و togglevisibility. تغییر هستند.
توجه – اگر می خواهید قابلیت نمایش در هر مولفه html یا amp را پنهان کنید یا نشان دهید ، می توانید از = “tap: elementid. [hide / show / togglevisibility]” استفاده کنید

ویژگی placeholder

ویژگی placeholder می تواند روی هر عنصر html مانند عنصر ورودی و همچنین در amp-component نیز قابل استفاده باشد. متغیر نگهدارنده اولین چیزی است که در صفحه نشان داده می شود و پس از بارگیری محتوا، حافظه محل حذف و نامرئی می شود.
محل نگهدارنده روی عنصر ورودی
<input type = "text" id = "date" name = "date" placeholder = "Start Date">

 

<input type = "text" id = "date" name = "date" placeholder = "Start Date">

 

<amp-anim src = "images/loreal.gif" width = "300" height = "250" layout = "responsive">
   <amp-img placeholder src = "images/flower.jpg" 
   layout = "fill">
   </amp-img>
</amp-anim>

 

ویژگی های Size

این دقیقاً مانند ویژگی ارتفاع استفاده می شود. مقدار عبارتی است که در زیر نشان داده شده است –
<amp-img src = "amp.png"
   width = "400" height = "300"
   layout = "responsive"
   sizes = "(min-width: 250px) 250px, 100vw">
</amp-img>

 

ویژگی های عرض و ارتفاع

آنها تقریباً روی همه عناصر html و اجزای آمپ استفاده می شوند. عرض و ارتفاع برای اشاره به فضای یک عنصر Amp در صفحه استفاده می شود.

مثال

<amp-img src = "amp.png"
   width = "400" height = "300"
   layout = "responsive">
</amp-img>

 

منبع.

 

لیست جلسات قبل آموزش گوگل AMP

  1. آموزش گوگل AMP
  2. بررسی اجمالی گوگل AMP
  3. مقدمه گوگل AMP
  4. آموزش تصاویر در گوگل AMP
  5. آموزش فرم در گوگل AMP
  6.  آموزش Iframes در گوگل AMP
  7. آموزش ویدیو در گوگل AMP
  8. آموزش دکمه در گوگل AMP
  9. آموزش Timeago در گوگل AMP
  10. آموزش Mathml در گوگل AMP
  11. آموزش تگ Fit Text در گوگل AMP
  12. آموزش شمارش معکوس تاریخ در گوگل AMP
  13. آموزش انتخاب کننده تاریخ در گوگل AMP
  14. آموزش استوری در گوگل AMP
  15. آموزش انتخاب کننده در گوگل AMP
  16. آموزش لینک در گوگل AMP
  17. آموزش فونت در گوگل AMP
  18. آموزش لیست در گوگل AMP
  19. آموزش اعلان کاربر در گوگل AMP
  20. آموزش next page در گوگل AMP
  21. آموزش ویژگی ها در گوگل AMP
  22. آموزش استایل ها و CSS سفارشی در گوگل AMP
  23. آموزش کلاس های CSS پویا در گوگل AMP
  24. آموزش اکشن ها و رویدادها در گوگل AMP
  25. آموزش انیمیشن در گوگل AMP
  26. آموزش اتصال داده در گوگل AMP
  27. آموزش طرح بندی در گوگل AMP
  28. آموزش تبلیغات در گوگل AMP
  29. آموزش تجزیه و تحلیل در گوگل AMP
  30. آموزش ویجت های اجتماعی در گوگل AMP
  31. آموزش نحو در گوگل AMP
  32. آموزش اعتبار سنجی در گوگل AMP
  33. آموزش اجزا جاوا اسکریپت در گوگل AMP
0
0
برچسب ها :
نویسنده مطلب erfan molaei

دیدگاه شما

بدون دیدگاه