Materialize چیست و چه کاربردی دارد؟

Materialize چیست؟ یک کتابخانه مؤلفه UI است که با CSS، JavaScript و HTML ایجادشده است. متریالیزه کردن اجزای رابط کاربری در ایجاد صفحات وب و برنامه‌های کاربردی جذاب، سازگار و کاربردی، ضمن رعایت اصول طراحی وب مدرن مانند قابلیت حمل مرورگر، استقلال دستگاه و تخریب زیبا، کمک می‌کند. این به ایجاد وب‌سایت‌های سریع‌تر، زیبا و پاسخگو کمک می‌کند و از Material Design Google  الهام گرفته‌شده است. در این مقاله به طور کامل با عنوان متریالایز و اصول شروع به کار و ابزارهای آن آشنا می‌شویم

Material Design چیست؟

Material Design یک زبان طراحی است که برای ایجاد یک زبان بصری برای کاربران که اصول کلاسیک طراحی خوب را با نوآوری و امکان فناوری و علم ترکیب می‌کند، به چالش می‌کشد. سایر زبان‌های طراحی رقابتی عبارت‌اند از: طراحی مسطح، طراحی مترو، طراحی واقع‌گرایانه و غیره.

متریال با اصول رنگ‌آمیزی، اشکال، الگوها، بافت‌ها یا چیدمان‌ها متفاوت است اما برای فهمیدن اینکه Materialize چیست اهمیت دارد. متریال تنها زبان طراحی است که به عناصر حرکت و عمق می‌بخشد. در Material Design ، تمام آیتم‌ها لازم است که دارای عمق z مخصوصی باشند که مشخص می‌کند که آیتم تا چه میزان بالا یا نزدیک به صفحه باشد.

آموزش طراحی وب با فریمورک materialize

بررسی ماهیت موضوع

برای پاسخ به سؤال Materialize چیست باید بگوییم که از فلسفه طراحی مدرن توسط Material Design Google استفاده می‌کند. هدف آن ایجاد یکنواختی در رابط کاربری Google در همه سیستم‌عامل‌های ممکن است. تمرکز اصلی این فلسفه بر نحوه تعامل و رفتار بصری عناصر UI است.

چارچوب کتابخانه‌ای است که شامل  HTML، CSS  (نوشته‌شده در Sass) و JS است، بهترین شیوه‌ها را برای طراحی، قابلیت حمل مرورگر و پاسخگویی ترکیب می‌کند. بسیار سبک است و 29kb  دارد و دارای ویژگی‌های آسان برای استفاده، متن‌های روان، اختلاف منظر، موارد قابل‌حمل و سایر ویژگی‌های ضروری است.

آموزش رایگان  css و html

ازآنجاکه متریالایز پیاده‌سازی واقعی Material Design است، عناصر از حرکت و عمق استفاده می‌کنند. همه انیمیشن‌ها و انتقال‌ها صاف و مرتب هستند و به‌گونه‌ای رفتار می‌کنند که استفاده بهینه از صفحه را فراهم می‌کنند.

مرور کلی دانسته‌ها

برای بررسی کلی سؤال Materialize چیست باید تکرار کنیم که یک کتابخانه مؤلفه UI است که با  CSS، JavaScript  و HTML ایجادشده است. استفاده از اجزای UI قابل به‌کارگیری دوباره در طراحی صفحات اینترنتی کارایی زیادی دارد. این مورد، به تجربه برنامه‌های وب جالب، سازگار و پرکاربرد و در عین رعایت اصول طراحی وب مدرن مانند قابلیت حمل مرورگر، استقلال دستگاه و تخریب دلپذیر کمک می‌کند.

آموزش رایگان جاوااسکریپت

برخی از ویژگی‌های بارز آن به شرح زیر است:

• طراحی پاسخگو داخلی.
• CSS استاندارد با حداقل جای پا.
• نسخه‌های جدید کنترل‌های رابط کاربری معمول مانند دکمه‌ها، کادرهای تأیید و زمینه‌های متن متناسب با مفاهیم طراحی مواد.
• ویژگی‌های پیشرفته و تخصصی مانند کارت‌ها، برگه‌ها، نوارها و غیره.
• استفاده رایگان و باز به کتابخانه جاوا اسکریپت jQuery برای عملکرد صحیح.
• مرورگر متقابل و می‌تواند برای ایجاد اجزای وب قابل‌استفاده مجدد استفاده شود.

متریالایز دارای طراحی ریسپانسیو داخلی است تا وب‌سایت ایجادشده با استفاده از متریالایز خود را مطابق اندازه سیستم دوباره طراحی کند. کلاس‌های متریالایز به‌گونه‌ای ایجادشده‌اند که وب‌سایت می‌تواند با هراندازه صفحه‌نمایش متناسب باشد. وب‌سایت‌هایی که با استفاده از متریالایز ایجادشده‌اند کاملاً با رایانه شخصی، رایانه لوحی و دستگاه‌های تلفن همراه سازگار هستند.

متریالایز با طراحی بسیار مینیمال و مسطح است. این باتوجه‌به این واقعیت طراحی‌شده است که افزودن قوانین جدید CSS بسیار آسان‌تر از بازنویسی قوانین CSS موجود است. از سایه‌ها و رنگ‌های پررنگ پشتیبانی می‌کند. رنگ‌ها و سایه‌ها در سیستم‌عامل‌ها و دستگاه‌های مختلف یکنواخت باقی می‌مانند و مهم‌تر از همه، استفاده از آن کاملاً رایگان است.

مزایا و کاربردها

برای پی‌بردن به این که به‌راستی Materialize   چیست باید خوبی‌ها و بدی‌های آن را هم بشناسیم. Materialize برای کاربران Material Design ایدئال است، همچنین ریسپانسیو است و با همه مرورگرهای مدرن، ازجمله Internet Explorer 10+ کار می‌کند.

• بهبود سرعت: به‌عنوان یک چارچوب، شما نباید برنامه‌نویسی را از ابتدا شروع کنید. اجزای سفارشی داخلی برای شما آماده است تا بتوانید کل مراحل را سفارشی کرده و سرعت دهید تا به‌راحتی مهلت‌های خود را رعایت کنید. درواقع، متریالایز را می‌توان برای چندین پروژه بدون نیاز به نوشتن CSS پیاده‌سازی کرد.
• تجربه روان: شما به‌عنوان یک توسعه‌دهنده می‌توانید در حین کار با فریم‌ورک تجربه‌ای بسیار روان داشته باشید زیرا انتقال‌ها و انیمیشن‌های بهتری را ارائه می‌دهد که بازخورد بیشتری به کاربران می‌دهد.
• پاسخگو بودن: متریالایز نیز ریسپانسیو است، بااین‌حال دارای پالت رنگ گسترده‌ای از رنگ‌های اصلی است. به شما امکان می‌دهد تعداد زیادی رنگ را انتخاب کنید. ریسپانسیو در سراسر سیستم‌عامل‌ها، تجربه کاربری بهتری ارائه می‌دهد.
• پشتیبانی از اندروید: متریالایز همچنین بهترین مرور ممکن را در سیستم‌عامل‌های Android ارائه می‌دهد.
• افزونه‌ها: برای بهبود تجربه کاربر می‌توانید از افزونه‌های متعدد رایگان برای گفتگو، بازشو، سقوط، اختلاف منظر و قابلیت‌های بیشتر استفاده کنید. علاوه بر این، چارچوب به کاربران نهایی اجازه می‌دهد تا رابط‌های بسیار تعاملی ایجاد کنند.
• نگاه تازه‌تر: قابلیت‌های داخلی به وب‌سایت‌های مبتنی بر متریالایز منحصربه‌فرد است. آن‌ها تازه‌تر و جذاب‌تر به نظر می‌رسند.

معایب و ایرادات

از جمله معایب متریالایز می‌توان به موارد زیر اشاره کرد.

• با مرورگرهای قدیمی سازگار نیست: متریالایز با همه مرورگرهای مدرن سازگار است، بااین‌حال، با موارد قدیمی‌تر از Internet Explorer 10+ کار نمی‌کند.
• جامعه کوچک‌تر: به‌عنوان یک کتابخانه نسبتاً جدید، Materialize ID  هنوز برای جمع‌آوری تعداد زیادی از توسعه‌دهندگان و ایجاد مستندات دقیق برای کمک به توسعه‌دهندگان جدید به چارچوب عادت نکرده است.
• محدودیت‌ها: بر اساس اصول خاصی از طراحی متریال، در مورد نحوه رفتار و ظاهر عناصر UI بسیار معتبر باشد.
• فایل‌های CSS بزرگ: فایل‌های CSS در این حوزه سنگین و از نظر اندازه بسیار بزرگ هستند.

Materialize چیست و چگونه از آن استفاده کنیم؟

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

قبل از ادامه این آموزش، باید درک اولیه‌ای از HTML، CSS، JavaScript، Document Object Model (DOM) و هر ویرایشگر متن داشته باشید. علاوه بر این، اگر بدانید برنامه‌های تحت وب چگونه کار می‌کنند، به شما کمک می‌کند. دو روش برای استفاده از متریالایز وجود دارد.

نصب محلی: می‌توانید فایل‌های materialize.min.css و materialize.min.js را در دستگاه محلی خود بارگیری کرده و در کد HTML خود قرار دهید.

نسخه مبتنی بر CDN: می‌توانید فایل‌های گفته شده را مستقیماً از شبکه تحویل محتوا (CDN) در کد HTML خود قرار دهید.

نصب محلی

برای بارگیری آخرین نسخه موجود، به آدرس https://materializecss.com/getting-started.html بروید. سپس، فایل نام‌برده بارگیری شده را در فهرست وب‌سایت خود قرار دهید، به‌عنوان‌مثال materialize.min.css در /css

مثال:

فایل css و js را به‌صورت زیر در فایل HTML خود قرار دهید.

نتیجه زیر را به همراه خواهد داشت. این نتیجه عام‌ترین حالت نمایش برای شروع کار است و به یک نماد جهانی در این حوزه تبدیل شده است. این جمله از نظر فنی اتفاق خاصی نیست اما برای همه کسانی که کار خود را به‌تازگی آغاز کرده‌اند هیجان‌انگیز به نظر می‌رسد.

نسخه مبتنی بر CDN

می‌توانید فایل‌های موردنیاز را مستقیماً از شبکه تحویل محتوا (CDN) در کد HTML خود قرار دهید. cdnjs.cloudflare.com محتوا را برای آخرین نسخه ارائه می‌دهد. ما در طول این آموزش از نسخه cdnjs.cloudflare.com CDN کتابخانه استفاده می‌کنیم.

نتیجه زیر را به همراه خواهد داشت. این مورد همان نشانه قبلی است که توضیحات مرتبط با آن را پیش‌تر برایتان گفتیم. در ادامه راه باید انسجام و دقت به خرج دهید و از یادگیری و تجربه مطالب جدید به‌هیچ‌وجه نترسید.

شروع کار و انجام امور

به‌راستی Materialize چیست و چگونه با آن کارهای خود را انجام دهیم؟ یک چارچوب پیش‌فرض پاسخگو مدرن است که بر اساس Material Design طراحی‌شده است.

Material Design یک‌زبان طراحی است که توسط گوگل توسعه‌یافته است. این یک طراحی با افزایش استفاده از طرح‌بندی‌های مبتنی بر شبکه، انیمیشن‌ها و انتقال‌های پاسخگو، پد و جلوه‌های عمقی مانند نور و سایه است.

در این آموزش، می‌دانید که چگونه چارچوب متریالایز را آغاز کنید و چگونه از اجزای متریالایز با نمونه‌های زنده جاسازی‌شده با استفاده از CodePen استفاده کنید

معرفی

برای شروع استفاده و پی‌بردن به Materialize چیست، تنها کاری که باید انجام دهید این است که فایل‌های CSS و JS را از Official Materialize Page بارگیری کنید.

پس از بارگیری، فایل‌ها را در پوشه‌ای که وب‌سایت شما در آن قرار دارد، استخراج کنید. دایرکتوری شما چیزی شبیه به این خواهد بود.

فایل index.html را در پوشه اصلی و style.css را در زیر پوشه css ایجاد کنید. مثال زیر نحوه واردکردن به صفحه وب شما را نشان می‌دهد. قبل از واردکردن materialize.js، jQuery را وارد کنید.

رنگ‌های متریال

به پالت رنگ متریالایز نگاهی بیندازید. هر یک از این رنگ‌ها با یک کلاس رنگ پایه و یک کلاس اختیاری روشن یا تیره تعریف می‌شود. برای اعمال رنگ پس‌زمینه، فقط نام رنگ و روشن/تاریکی را به‌عنوان یک کلاس به عنصر اضافه کنید برای اعمال یک رنگ متن، فقط -text را به کلاس رنگ اضافه کنید، همان‌طور که در مثال CodePen زیر نشان‌داده‌شده است.

و نتیجه به‌صورت زیر است. در تمامی گام‌ها به‌صورت مرتب نتیجه را چک کنید تا از صحت عملکرد خود مطمئن شوید. علاوه‌برآن دیدن نتایج کار هم‌زمان باعث ایجاد حس خوشایند برای ادامه دادن خواهد شد و اشتیاق شما را افزایش می‌دهد.

شبکه

کلاس Container به شما کمک می‌کند تا محتوای صفحه خود را در مرکز قرار داده و در آن قرار دهید. ما از ظرف برای درج محتوای بدن خود استفاده می‌کنیم. نگاهی به جاسازی CodePen زیر بیندازید تا سریع نحوه عملکرد شبکه را درک کنید. شبکه استاندارد دارای 12 ستون است.

صرف‌نظر از اندازه مرورگر، هر یک از این ستون‌ها همیشه دارای عرض مساوی خواهند بود. برای جبران، کافی است offset-s2 را به کلاسی که s نشان‌دهنده پیشوند کلاس صفحه است (کوچک s=، متوسط m=، بزرگ l=) اضافه کنید و عدد بعد تعداد ستون‌هایی است که می‌خواهید با آن‌ها جبران شود.

هم‌ترازی

با افزودن کلاس valign-wrapper به محفظه‌ای که مواردی را که می‌خواهید به‌صورت عمودی تراز کنید به‌راحتی می‌توانید همه چیز را به طور عمودی متمرکز کنید. کلاس‌های.left-align،right-align و.center-align برای تراز کردن متن به چپ، راست و مرکز به کار می‌رود.

جلوه سایه

جلوه سایه با افزودن یک کلاس = ”z-deep-1” به یک تگ HTML اعمال می‌شود. شما می‌توانید با افزودن کلاس‌هایی مانند (‘z-depth-2’, ‘z-depth-3’, ‘z-depth-4’, ‘z-depth-5‘) عمق را بیشتر افزایش دهید.

دکمه‌ها

3 نوع دکمه اصلی در Material Design وجود دارد. دکمه برجسته یک دکمه استاندارد است که نشان‌دهنده اقدامات است و به دنبال عمق بخشیدن به یک صفحه عمدتاً مسطح است. دکمه حرکت دایره‌ای شناور برای عملکردهای بسیار مهم در نظر گرفته‌شده است. دکمه‌های تخت معمولاً در عناصری استفاده می‌شوند که قبلاً دارای عمق مانند کارت یا مودال هستند.

کارت‌ها

کارت‌ها ابزار مناسبی برای نمایش محتوا هستند که از انواع مختلف اشیا تشکیل شده است. آن‌ها همچنین برای ارائه اشیاء مشابه که اندازه یا اقدامات پشتیبانی شده آن‌ها می‌تواند به میزان قابل‌توجهی متفاوت باشد، مناسب هستند، مانند عکس‌هایی با شرح طول متغیر.

دکمه جمع‌شدن

وقتی نوار شما تغییر اندازه داد، خواهید دید که پیوندهای سمت راست به منوی نمادین تبدیل می‌شوند.

این کتابخانه کلاس‌های مختلف CSS را برای اعمال انواع مختلف پیشرفت‌های بصری و رفتاری از پیش تعیین شده برای نمایش انواع مختلف فراهم می‌کند.

منوی کشویی Navbar

برای افزودن منوی کشویی navbar، ساختار کشویی UI را به صفحه اضافه کنید. سپس، یک عنصر برای فعال‌کردن منوی کشویی اضافه کنید. اطمینان حاصل کنید که شناسه ساختار کشویی را به ویژگی فعال‌کننده داده از ماشه کشویی وارد کنید. کتابخانه موردبحث کلاس CSS کشویی را فراهم می‌کند تا یک عنصر UI را به‌صورت کشویی بسازد و شناسه عنصر UI را به ویژگی فعال‌کننده داده‌های دکمه یا عنصر لنگر اضافه کند.

پیش بارگیری

پیش بارگیری Materialize چیست؟ کلاس‌های مختلف CSS را برای اعمال انواع مختلف پیشرفت‌های بصری و رفتاری از پیش تعیین شده برای نمایش انواع مختلف پیش بارگیری یا نوارهای پیشرفت فراهم می‌کند.

رسانه

متریالایز چندین کلاس دارد تا عکس‌ها و فیلم‌ها را در اندازه‌های مختلف پاسخگو کند.

responsive-img: باعث می‌شود تصویر بر اساس اندازه صفحه تغییر اندازه دهد.

video-container: برای ظروف ریسپانسیو که دارای فیلم‌های جاسازی شده هستند.

responsive-video: HTML5 را ریسپانسیو می‌کند.

کلاس‌های کاربردی

این عنوان دارای چندین کلاس مفید است که برای نیازهای طراحی روزانه مفید است.

کلاس‌های کاربردی رنگ: به‌عنوان‌مثال red ،green ، grey و غیره.

کلاس‌های کاربردی تراز: به‌عنوان‌مثال valign-wrapper ، left-align ، right-align ، center-align.

کلاس‌های مفید پنهان کردن محتوا بر اساس اندازه دستگاه: برای مثال hide ، hide-on-small-only، hide-on-med-only، hide-on-med-and-down، hide-on-med.

کلاس‌های قالب‌بندی ابزار: برای مثال، بریده شده، قابل حرکت و غیره

کلام آخر

مهم‌ترین بحث در این مقاله پاسخ به سؤال Materialize چیست بود. باتوجه‌به توضیحات داده شده، متریالایز یک چارچوب پاسخگو مدرن و مبتنی بر Material Design است"؛ بنابراین این تنها یکی از چارچوب‌های CSS مانند Bootstrap ، Foundation و غیره است. تفاوت بین Materialize ، Bootstrap و Foundation در این است که موضوع اول بر اساس زبان Material Design Google طراحی‌شده است. در واقع همان جایی که بوت استرپ و پایه به ترتیب بر اساس زبان طراحی موبایل اول و زبان طراحی تخت است.

متریالایز برای برنامه‌های تلفن همراه مناسب است. این برنامه دارای انیمیشن‌های روان، انتقال و ظاهر زیبا و عملکردهای عملکردی است. از جنبه منفی، برای مبتدیان ایدئال نیست زیرا نسبتاً جدید است و از مزایای یک جامعه بزرگ و مستندات برخوردار نیست. همچنین با مرورگر قدیمی سازگار نیست و نظر خاص خود را در مورد ظاهر و رفتار عناصر UI دارد.