محتوا
- 01. فانوس دریایی
- 02. پلیمر
- 03. APIs Explorer
- 04. بال زدن
- 05. Google GitHub
- 06. عروسک گردان
- 07. جعبه کار
- 08. Codelabs
- 09. ابزار رنگی
- 10. اسپرینت ها را طراحی کنید
- 11. مردم + کتاب راهنمای هوش مصنوعی
- 12. دستیار Google
- 13. بینش PageSpeed
- 14. AMP در Google
- 15. Google DevTools
- 16. طراحی مواد
کار در وب معمولاً به این معنی است که شما به شکلی یا شکلی با Google کار خواهید کرد. و با توجه به اینکه خیابان گوگل کروم از رقابت جلوتر است ، طراحان و توسعه دهندگان باید در مورد چگونگی کار پروژه خود با مرورگر فکر کنند. چگونه به نظر می رسد؟ از چه فناوری هایی پشتیبانی می کند ، چقدر ایمن است و عملکرد آن چگونه است؟
خوشبختانه ، Chrome ابزارهایی را برای اطمینان از بهترین سایت یا برنامه در اختیار شما قرار می دهد. DevTools طراحان و توسعه دهندگان را قادر می سازد تا از یک صفحه وب مطلع شوند: شما می توانید DOM را دستکاری کنید ، CSS را بررسی کنید ، با استفاده از ویرایش مستقیم ، طراحی JavaScript و اشکال زدایی از عملکرد را آزمایش کنید. (در مورد چگونگی استفاده از این ابزارهای وب Google اطلاعات بیشتری در اینجا کسب کنید ، و اگر از ابتدا شروع کرده اید به لیست برترین وب سازان ما نیز مراجعه کنید).
اما Google مواردی فراتر از مرورگر ارائه می دهد. این ابزار و منابع برای کمک به تقریباً همه جنبه های زندگی طراحی و توسعه شما دارد. آیا می خواهید بدانید که چگونه عملکرد را بهبود ببخشید؟ فانوس دریایی برای کمک به اینجا است. آیا می خواهید سایت های موبایل با عملکرد بهتر ایجاد کنید؟ سپس به AMP سلام کنید. آیا به دنبال ساخت PWA های زیبا هستید؟ سپس Flutter ، Material Design و Workbox آماده ورود هستند.
زیبایی استفاده از ابزارها ، منابع ، کتابخانه ها و چارچوب های گوگل این است که شما می دانید آنها با مرورگر Chrome - محبوب ترین مرورگر روی کره زمین کار می کنند. برای یافتن ابزارهای بیشتر ، به جمع بندی ابزارهای طراحی وب ما مراجعه کنید.
01. فانوس دریایی
عملکرد یک عامل کلیدی در موفقیت یک سایت است و Lighthouse ابزار Google برای بهبود کیفیت صفحات وب است (سرویس میزبانی وب مناسب نیز به شما کمک خواهد کرد). بنابراین چگونه از Lighthouse استفاده می کنید و چه کاری می تواند انجام دهد؟ در ساده ترین شکل ، شما می توانید Lighthouse را از تب Audits اجرا کرده و از بین گزینه هایی از جمله دسک تاپ یا موبایل ، علاوه بر تیک های جعبه عملکرد ، قابلیت دسترسی و سئو ، انتخاب کنید تا گزارش نهایی را با پیشرفت های پیشنهادی تهیه کنید.
02. پلیمر
پلیمر به دلیل کار با اجزای وب بسیار مشهور است اما این پروژه در حال حاضر مجموعه خود را گسترش داده است تا مجموعه ای از کتابخانه ها ، ابزارها و استانداردها را در آغوش بگیرد. شامل چه مواردی می شود؟ LitElement ویرایشی است که تعریف اجزای وب را آسان می کند ، در حالی که lit-html یک کتابخانه HTML الگو است که کاربران را قادر می سازد تا الگوهای HTML نسل بعدی را در JS بنویسند. بعلاوه ، شما همچنین یک کیت PWA Starter ، کتابخانه اصلی Polymer و مجموعه ای از اجزای وب را پیدا خواهید کرد.
03. APIs Explorer
Google کتابخانه وسیعی از API در اختیار توسعه دهندگان قرار دارد اما یافتن آنچه شما نیاز دارید کار ساده ای نیست. اینجاست که API های Google برای ارائه یک دست کمک وارد عمل می شوند. یک لیست طولانی وجود دارد که می تواند از طریق آن پیمایش شود ، اما برای دسترسی سریع تر ، یک جعبه جستجو برای فیلتر کردن لیست API وجود دارد. هر ورودی به یک صفحه مرجع با جزئیات بیشتر در مورد نحوه استفاده از API پیوند می یابد.
04. بال زدن
اگر می خواهید از یک پایگاه کد برنامه های خوش ظاهر برای موبایل ، وب و دسک تاپ ایجاد کنید ، Flutter می تواند برای شما مناسب باشد. این سایت اشاره کاملی به کار با Flutter و ساخت آن است. آیا سرنخی از آنچه باید انجام دهید ندارید؟ این اسناد کاربر را از نصب تا ایجاد با کمک بسیاری از نمونه ها و آموزشها هدایت می کند.
05. Google GitHub
همانطور که بیشتر افراد می دانند ، GitHub بستر میزبان / مخزنی برای ذخیره و اشتراک کد و پرونده ها است. و خوشبختانه گوگل با بیش از 260 مخزن جایگاه ویژه خود را در این سیستم عامل دارد. از فیلتر برای کاهش زمان جستجو و نزدیک شدن به مخزنی که می خواهید با آن بازی کنید یا در آن کمک کنید استفاده کنید.
06. عروسک گردان
Puppeteer که در Node ساخته شده است ، یک API سطح بالا ارائه می دهد که شما را قادر می سازد به Chrome بدون سر دسترسی داشته باشید - به طور موثر Chrome بدون UI ، که سپس توسعه دهندگان می توانند از طریق خط فرمان آن را کنترل کنند. بنابراین با Puppeteer چه کاری می توانید انجام دهید؟ چند گزینه برای تولید عکس از صفحه و PDF صفحات ، خودکار ارسال فرم و ایجاد یک محیط آزمایش خودکار در دسترس است.
07. جعبه کار
اگر به دنبال ساخت PWA هستید ، این یک نقطه شروع عالی است. Workbox مجموعه ای از کتابخانه های JavaScript را برای افزودن پشتیبانی آفلاین به برنامه های وب فراهم می کند. مجموعه ای از راهنماهای عمیق نحوه ایجاد و ثبت پرونده کارگر سرویس ، درخواست مسیر ، استفاده از افزونه ها و استفاده از بسته های نرم افزاری با Workbox را نشان می دهد. و همچنین مجموعه ای از استراتژی های caching به عنوان مثال برای بررسی وجود دارد.
08. Codelabs
آیا برای یک محصول Google به راهنمایی عملی نیاز دارید؟ Codelabs "یک تجربه رمزگذاری هدایت شده ، آموزشی و عملی" را ارائه می دهد. این سایت به طور دسته جمعی به دسته ها و رویدادها تقسیم شده است و یافتن خواسته های شما را سریع و آسان می کند. این برنامه شامل Analytics ، Android ، دستیار ، واقعیت افزوده ، Flutter ، G Suite ، Search ، TensorFlow و واقعیت مجازی است. یک گزینه را انتخاب کنید و کد و مسیرهای مورد نیاز برای ساخت برنامه های کوچک را دریافت کنید.
09. ابزار رنگی
Color Tool ابزاری ساده است که به شما امکان می دهد علاوه بر بررسی قابلیت دسترسی ، یک پالت ایجاد کنید ، به اشتراک بگذارید و از آن استفاده کنید. کاربران می توانند یک پالت از پیش تعریف شده از پالت Material را انتخاب کنند. به سادگی یک رنگ را انتخاب کنید و سپس آن را به طرح اصلی رنگ اعمال کنید ، به گزینه ثانویه بروید و دوباره انتخاب کنید. در آخر ، رنگ متن را برای هر دو طرح انتخاب کنید. متناوباً ، برای انتخاب رنگ های خود به حالت سفارشی بروید. سپس به Accessibility بروید تا بررسی کنید همه چیز خوب است قبل از اینکه در آخر ، پالت را صادر کنید.
10. اسپرینت ها را طراحی کنید
Design Sprint Kit برای کسانی است که یاد می گیرند چگونه در مسابقات اسپرینت شرکت کنند یا اجرا کنند. به نظر می رسد همه پایگاه های دانش را شامل می شود ، از اولین افراد گرفته تا مجری های دو سرعت با تجربه. درباره روش کار بیاموزید یا مستقیماً وارد مرحله برنامه ریزی شوید ، از جمله نوشتن مختصر ، جمع آوری داده ها و تحقیقات ، و همچنین اینکه چه کارهایی پس از دو سرعت انجام شود. همچنین شامل مجموعه ای از منابع مانند ابزارها ، الگوها ، دستور العمل ها و گزینه ارائه روش خود می باشد. همچنین ، احتمالاً برای ذخیره و به اشتراک گذاری منابع به مکانی احتیاج دارید ، بنابراین مطمئن شوید انتخاب فضای ذخیره سازی ابری شما دقیق است.
11. مردم + کتاب راهنمای هوش مصنوعی
این راهنما کار ابتکار People + AI Research در Google است و به نظر می رسد به کسانی که مایل به ساخت محصولات هوش مصنوعی انسان محور هستند کمک کند. کتاب راهنمای جامع به شش فصل تقسیم شده است که نیازهای کاربر ، جمع آوری و ارزیابی داده ها ، مدل های ذهنی ، اعتماد ، بازخورد و عدم موفقیت را پوشش می دهد. هر فصل با تمرینات ، کاربرگ و ابزار و منابعی که برای تحقق آن لازم است همراه است.
12. دستیار Google
این پلت فرم توسعه دهنده Google Assistant است که راهنمای نحوه ادغام محتوا و خدمات خود را با Google Assistant ارائه می دهد. این به شما نشان می دهد که چگونه برنامه تلفن همراه خود را گسترش دهید ، مطالب را به روشهای غنی برای جستجو و دستیار ارائه دهید ، چراغ ها را کنترل کنید ، دستگاه های قهوه و سایر دستگاه ها در خانه و تجارب صوتی و بصری را برای بلندگوها ، نمایشگرها و تلفن های هوشمند ایجاد کنید.
13. بینش PageSpeed
PageSpeed Insights محتوای وب را تجزیه و تحلیل می کند و سپس پیشنهاداتی در مورد نحوه بارگیری سریعتر آن ارائه می دهد. به سادگی یک URL اضافه کنید ، دکمه Analyze را بزنید و منتظر اتفاقات جادویی باشید. Docs را بررسی کنید تا بینش بهتری از نحوه کار با PageSpeed API و نحوه شروع استفاده از آن کسب کنید.
14. AMP در Google
AMP ابزار Google برای ایجاد صفحات بارگیری سریع تلفن همراه است که (امیدوارم) به بالای رتبه بندی جستجو برسند. بیاموزید که چگونه سایت های سریع و اولین کاربر ایجاد کنید ، AMP را در محصولات Google ادغام کنید ، از Google AMP Cache برای سریعتر ساختن صفحات AMP استفاده کنید و صفحات AMP را با سایر محصولات Google پول کنید.
15. Google DevTools
هر طراح و توسعه دهنده می داند که Chrome با مجموعه ای از ابزارها که مستقیماً در مرورگر تعبیه شده اند ، می آید. DevTools Chrome برای بازرسی عناصر تشکیل دهنده یک صفحه ، بررسی CSS ، ویرایش صفحات در حال پرواز و موارد دیگر ایده آل است.
تب Elements مقدمه ای برای DevTools است. این کد HTML را نمایش می دهد که صفحه انتخاب شده را تشکیل می دهد. از صفحه انتخاب شده اطلاعاتی در مورد خصوصیات هر div یا برچسب دریافت کنید و ویرایش مستقیم را شروع کنید. این برای آزمایش در طراحی مناسب است. چیدمان را بررسی کنید - خواه از Flexbox استفاده می کنید یا از Grid - و به فونت های مربوطه نگاهی بیندازید و انیمیشن ها را بررسی کنید.
در جای دیگر می توانید CSS را مشاهده و تغییر دهید. زبانه Styles در پانل Elements ، قوانین CSS را که بر روی عنصر انتخاب شده در DOM Tree اعمال می شوند ، لیست می کند. ویژگی ها را خاموش و روشن کنید (یا مقادیر جدیدی اضافه کنید) برای آزمایش طرح ها. این ابزار ایده آل برای اطمینان از عملکرد همه چیز مطابق انتظار قبل از اعمال هرگونه تغییر در طراحی زنده است.
همچنین می توانید JavaScript را اشکال زدایی کنید ، سرعت وب سایت را بهینه کنید و سرعت شبکه را بررسی کنید. در اینجا یک نکته سریع آورده شده است که می توانید برای سرعت بخشیدن سریع به گردش کار خود استفاده کنید. به زبانه Sources بروید ، New Snippet را کلیک کرده و کدهای پرکاربرد را اضافه کنید. قطعه کد را نامگذاری کرده و ذخیره کنید. در صورت نیاز این کار را تکرار کنید. اکنون می توانید این قطعه کد را بجای نوشتن دوباره آن ، بگیرید.
مانند هر مرورگر خوب ، Chrome به طور مداوم در حال پیشرفت است و هر نسخه جدید ویژگی های جدیدی را به ارمغان می آورد. مواردی را که در سیستم عامل وضعیت Chrome اتفاق می افتد پیدا کنید
16. طراحی مواد
توسعه ممکن است به عنوان فرزند موردعلاقه Google تلقی شود اما هر آنچه را که در حال ساخت ، ایجاد یا ساخت آن هستید ، باید خوب به نظر برسد و تجربه ای را در اختیار کاربر قرار دهد که وی را به استفاده از آن سوق دهد. Material جدیدترین مورد اضافه شده به Google پایدار است اما یک سیستم طراحی است که در یک قطعه حیاتی از مجموعه طراحی بالغ شده است.
مانند هر سیستم طراحی خوب ، این مجموعه راهنمای خاص خود را دارد که باید قبل از ورود به موارد جالب توجه ، آنها را بررسی کنید. مروری بر نحوه استفاده از عناصر مختلف ، مضمون سازی Material ، نحوه پیاده سازی یک موضوع و راهنماهای کاربردی از جمله قابلیت دسترسی داشته باشید. در جای دیگر ، بینشی در مورد Material Foundation وجود دارد که شامل زمینه های کلیدی طراحی مانند طرح ، ناوبری ، رنگ ، تایپوگرافی ، صدا ، شمایل نگاری ، حرکت و کنش متقابل است. هر دسته بایدها و نبایدهای خود را نشان می دهد و در چه مواردی باید احتیاط کنید. برای ارائه ایده ای از انتظارات ، بخش Layout بخشهایی در مورد درک طرح ، تراکم پیکسل ، نحوه کار با طرح پاسخگو شامل ستونها ، ناودانها و حاشیه ها ، نقاط شکست ، مناطق UI و روشهای فاصله را ارائه می دهد که نام آنها چند است.
فراتر از بخش Design ، اجزای سازنده وجود دارد که عناصر سازنده فیزیکی مورد نیاز برای ایجاد یک طرح را فراهم می کند. چه چیزی در اینجا گنجانده شده است؟ دکمه ها ، بنرها ، کارت ها ، گفتگوها ، تقسیم کننده ها ، لیست ها ، منوها ، شاخص های پیشرفت ، اسلایدرها ، نوارهای میانبر (اینها پیام کوتاه در مورد فرآیندهای برنامه در پایین صفحه هستند) ، برگه ها ، قسمت های متن و راهنمای ابزار. بدون شک مجموعه ای جامع از م componentsلفه ها است.
و توسعه دهندگان با جزئیات و آموزش نحوه ساخت برای سیستم عامل های مختلف - Android ، iOS ، Web و Flutter - فراموش نشده اند. و سرانجام ، یک صفحه اختصاص داده شده است به تعداد زیادی از منابع برای کمک به تحقق طرح انتخابی شما.
این مقاله در ابتدا در مجله نت منتشر شد. شماره 326 را بخرید.
