آموزش ویژگی ها در گوگل AMP
4 سال پیش
آموزش ویژگی ها در گوگل AMP
در این درس از مجموعه آموزش برنامه نویسی سایت سورس باران، به آموزش ویژگی ها در گوگل AMP خواهیم پرداخت.
در این درس کلیه خصوصیات مشترک مورد استفاده توسط مولفه های AMP مورد بحث قرار خواهد گرفت.
لیست ویژگی ها در گوگل AMP به شرح زیر است –
- fallback
- heights
- layout
- media
- noloading
- on
- placeholder
- sizes
- width and height
ویژگی fallback
از ویژگی fallback بیشتر در مواردی استفاده می شود که مرورگر از عنصر مورد استفاده پشتیبانی نکند یا در بارگیری پرونده یا داشتن اشکال در پرونده استفاده شده مشکلی داشته باشد.
به عنوان مثال، شما از amp-video استفاده می کنید و پرونده رسانه دارای مشکلاتی در مرورگر است بنابراین در چنین مواردی می توانیم به جای نشان دادن، ویژگی fallback را مشخص کنیم و پیامی را نمایش دهیم که فایل رسانه قابل پخش نیست یا توسط مرورگر پشتیبانی نمی شود.
|
1 2 3 4 5 6 7 8 9 10 11 |
<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> |
اجازه دهید ما با استفاده از یک مثال، عملکرد سیستم عامل را درک کنیم –
مثال
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 |
<!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> |
خروجی
ویژگی Heights
این ویژگی اساساً برای طرح پاسخگو پشتیبانی می شود. می توانید از یک عبارت رسانه ای برای ویژگی Heights استفاده کنید و این مربوط به ارتفاع عنصر است. همچنین مقادیر درصد را می گیرد ، بنابراین ارتفاع براساس درصد عرض داده شده محاسبه می شود.
مثال
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 |
<!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> |
خروجی
ویژگی 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” با درک مثالی در زیر که نشان داده شده است،
مثال
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 |
<!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> |
خروجی
ویژگی Media
از این ویژگی می توان در اکثر اجزای AMP استفاده کرد. به یک مدیا کوئری نیاز دارد و اگر این مقدار مطابقت نداشته باشد، جز مولفه ها ارائه نمی شود.
بگذارید با کمک یک مثال ، ویژگی مدیا را درک کنیم –
مثال
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 |
<!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> استفاده کرده ایم –
|
1 2 3 4 5 6 7 |
<amp-img media = "(min-width: 600px)" src = "images/christmas1.jpg" width = "466" height = "355" layout = "responsive"> </amp-img> |
توجه داشته باشید که اگر عرض صفحه کمتر از 600 پیکسل باشد، تصویر نمایش داده نمی شود. ما برای آزمایش نمونه از حالت موبایل شبیه ساز Google استفاده خواهیم کرد.
خروجی در گوشی های هوشمند
ما در دستگاه بررسی کردیم که تصویر قابل مشاهده نیست زیرا عرض دستگاه کمتر از 600 پیکسل است. اگر یک رایانه لوحی را بررسی کنیم ، همانطور که در زیر نشان داده شده است ، خروجی می گیریم –
خروجی در IPAD
ویژگی Noloading
اجزای amp مانند <amp-img> ، <amp-video> ، <amp-facebook> قبل از بارگذاری محتوای واقعی و نمایش دادن به کاربر ، یک نشانگر بارگیری را نشان می دهد.
برای متوقف کردن نشانگر بارگیری، می توانیم از ویژگی noloading به شرح زیر استفاده کنیم –
|
1 2 3 4 5 6 |
<amp-img src = "images/christmas1.jpg" noloading height = "300" width = "250" layout = "responsive"> </amp-img> |
ویژگی on
ویژگی on در عناصر برای مدیریت رویداد و اعمال روی اجزای amp استفاده می شود. نحو مورد استفاده در ویژگی به شرح زیر است –
نحو –
|
1 |
on = "eventName:elementId[.methodName[(arg1 = value, arg2 = value)]]" |
جزئیات منتقل شده به ویژگی on به شرح زیر است –
- eventName – این نام رویدادی است که برای مولفه amp موجود است. به عنوان مثال ، برای فرم ها می توانیم از submit-success, submit-error eventNames. استفاده کنیم.
- elementId – این شناسه عنصری را می گیرد که رویداد باید روی آن فراخوانی شود. این می تواند شناسه شکلی باشد که می خواهیم در مورد موفقیت یا خطا بدانیم.
- MethodName – این نام متدی است که باید در آن رویداد فراخوانی شود.
- arg = value – این آرگومان ها را با key=value مقدار منتقل شده به روش می گیرد.
همچنین امکان انتقال چندین رویداد به ویژگی On به شرح زیر وجود دارد –
|
1 |
on = "submit-success:lightbox;submit-error:lightbox1" |
توجه – اگر چندین رویداد وجود داشته باشد ، آنها به ویژگی on منتقل می شوند و با استفاده از نقطه ویرگول (؛) جدا می شوند.
ویژگی Actions
عملکردها اساساً با ویژگی on استفاده می شوند و نحو به شرح زیر است:
|
1 |
on = "tab:elementid.hide;" |
ما می توانیم چندین عمل را به شرح زیر انجام دهیم –
|
1 |
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 نیز قابل استفاده باشد. متغیر نگهدارنده اولین چیزی است که در صفحه نشان داده می شود و پس از بارگیری محتوا، حافظه محل حذف و نامرئی می شود.
محل نگهدارنده روی عنصر ورودی
|
1 |
<input type = "text" id = "date" name = "date" placeholder = "Start Date"> |
|
1 |
<input type = "text" id = "date" name = "date" placeholder = "Start Date"> |
|
1 2 3 4 5 |
<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
این دقیقاً مانند ویژگی ارتفاع استفاده می شود. مقدار عبارتی است که در زیر نشان داده شده است –
|
1 2 3 4 5 |
<amp-img src = "amp.png" width = "400" height = "300" layout = "responsive" sizes = "(min-width: 250px) 250px, 100vw"> </amp-img> |
ویژگی های عرض و ارتفاع
آنها تقریباً روی همه عناصر html و اجزای آمپ استفاده می شوند. عرض و ارتفاع برای اشاره به فضای یک عنصر Amp در صفحه استفاده می شود.
مثال
|
1 2 3 4 |
<amp-img src = "amp.png" width = "400" height = "300" layout = "responsive"> </amp-img> |
لیست جلسات قبل آموزش گوگل 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
نویسنده مطلب
saber
.svg)
دیدگاه شما