دوشنبه , ۲ اسفند ۱۳۹۵
جدیدترین آموزش ها
خانه » آموزش Material Design » آموزش Material Design(برای نخستین بار)

آموزش Material Design(برای نخستین بار)

سلام
چند وقتی بود که ذهنم به شدت درگیر بود که چه طور می تونم Material Design رو به کاربرام آموزش بدم بعد از استقبال خوبی که توی دوره Bootstrap و css دیدم.
به جرأت می تونم بگم که تدریس مسائل روز دنیا برام به شدت لذت بخش تره تا اینکه بخوام صبر کنم تا اون مسئله بهش زمان بخوره بعد درس بدم.
چیزی که توی برنامه نویسی سخته به روز بودن و برنامه نویسی که به روز نکنه خودشه میشه گفت که مرگ دوران حرفه ای اون برنامه نویسه و رسما نمی تونه تو این زمینه رقابت کنه و حرفی برا گفتن داشته باشه.
مطلبی که دارم امروز در موردش حرف می زنم به شدت جدیده شاید عمر یک ساله داشته باشه و گوگل اونو پارسال به همراه اندروید ۵ یا همون L به دنیا معرفی کرد در صورتی که توی کشور ما تازه داره مباحث سمت طراحی فلت مطرح میشه و اونم نه به صورت زیاد و گسترده اما خب من می خواستم شمارو یه پله جلوتر ببرم و با طراحی material آشنا کنم، چیزی که الان داره تو دنیا روش کار میشه
تصمیم داشتم که بیام این مطلب رو درس بدم اما واقعا پرداختن به یک فریم ورک دیگه هم برا خودم کسل کننده بود و هم حس کردم برای شما کسل کننده باشه
از طرف دیگه افرادی که بوت استرپ رو دنبال کردن کلا از برنامه نویسی نا امید میشدن که بعد از اون دوره میومدم و می گفتم که بوت استرپ رو کنار بزارید و سراغ یک فریم ورک روز برید
و خب از طرف دیگه بوت اترپ امتحان خودشو پس داده و فریم ورک قابل اعتمادیه
به کنار از همه این مسائل دوست نداشتم که بخوام در این مورد هزینه جداگانه دریافت کنم.
این شد که به ذهنم خورد که چرا bootstrap و Material Design رو در رو هم قرار بدم.
بوت استرپ به اندازه کافی قوی هست.فقط کافیه که بیام و زیبایی های material رو بهش اضافه کنم.
خب پس شروع کردم به جست و جو و خوندن مطالب مختلف شاید نزدیک به دو هفته تا بلاخره به چیزی که می خواستم رسیدم
اما خبر خوب اینکه من به صورت هدیه اون رو در کنار دوره بوت استرپ بیان کنم و نیاز به پرداخت هیچ هزینه اضافی نیست.
مطلبی که در آینده می خوام بگم شاید اصلا نیاز به زمان زیادی برا یادگیری و آموزشش نباشه اما واقعا براش زمان زیادی گذاشتم تا سادش کردم تا بتونید خیلی سریع و راحت اون رو یاد بگیرید و اگر میخواستید خود Material Design رو یاد بگیرید به شدت وقت گیر بود و کار رو براتون چندین برابر سخت تر می کیرد اما در صورتی که الان شما نیازی نیست چیز جدیدی یاد بگیرید چون ما بوت استرپ رو بلدیم و میخوایم این قدرت رو به بوت استرپمون اضافه کنیم.
اما خب Material Design برای ما چی کار می کنه.میاد و ظاهر بوت استرپ مارو به شدت زیبا تر می کنه مثلا ما تو بوت استرپ ۵ تا رنگ داریم اینجا میاد و ۱۷ تا رنگ فلت فوق العاده رو بهش اضافه می کنه
به دکمه هامون انیمیشن میده و ایکون های ۲۵۰ تایی بوت استرپ رو به هزار تا میرسونه و…..
اما خب این همه گفتیم Material Design و هیچی ازش نگفتیم.بیایم ببینیم اصلا به طور دقیق چی هست.
متریال دیزاین سبکی/زبانی جدید در طراحی است که گوگل در یکی از کنفرانس های خبری خود آن را معرفی کرده است. اگر بخواهیم دقیق تر باشیم در ماه ژوئن ۲۰۱۴
متریال دیزاین بیش از حد به سیستم گرید و انیمشین‌ها اهمیت می‌دهد و عمق و سایه‌ها برای المان‌های طراحی شده بسیار مهم است. شاید بتوان گفت ورژن بروز شده طراحی تخت (Flat Design) باشد اما خیلی زیباتر با انیمییشن‌ها و Transition های بسیار زیبا و در عین حال پیچیده. خود گوگل ادعا دارد که زبان جدید طراحی آنها، الهام گرفته از مرکب و کاغذ است. یکی از طراحان مشهور جهان به نام Matias Durate میگوید همانگونه که اجسام در دنیای واقعی قابل حس هستند و طول و عرض و ارتفاع دارند در این نوع طراحی دیجیتال هم باید همین حس‌ها را منتقل کرد.
اگر بخواهیم در یک جمله بگوییم متریال دیزاین چیست. می‌توانیم بگویم متریال دیزاین نسخه مکتوب، مستند و علمی طراحی تخت (Flat Design) هست. در ابتدا این نوع طراحی محدود به اپلیکیشن‌های موبایلی بود که برای اندروید فراهم شده‌اند و استفاده از آن در محیط وب کمی نامفهوم بود، ولی متریال دیزاین خیلی سریع جای خود را بین طراحان رابط کاربری وب پیدا کرده و میتوان گفت در حال محبوب شدن است.

Material Design

آموزش Material Design

سلام
چند وقتی بود که ذهنم به شدت درگیر بود که چه طور می تونم Material Design رو به کاربرام آموزش بدم بعد از استقبال خوبی که توی دوره Bootstrap و css دیدم.
به جرأت می تونم بگم که تدریس مسائل روز دنیا برام به شدت لذت بخش تره تا اینکه بخوام صبر کنم تا اون مسئله بهش زمان بخوره بعد درس بدم.
چیزی که توی برنامه نویسی سخته به روز بودن و برنامه نویسی که به روز نکنه خودشه میشه گفت که مرگ دوران حرفه ای اون برنامه نویسه و رسما نمی تونه تو این زمینه رقابت کنه و حرفی برا گفتن داشته باشه.
مطلبی که دارم امروز در موردش حرف می زنم به شدت جدیده شاید عمر یک ساله داشته باشه و گوگل اونو پارسال به همراه اندروید ۵ یا همون L به دنیا معرفی کرد در صورتی که توی کشور ما تازه داره مباحث سمت طراحی فلت مطرح میشه و اونم نه به صورت زیاد و گسترده اما من می خواستم شمارو یه پله جلوتر ببرم و با طراحی material آشنا کنم، چیزی که الان داره تو دنیا روش کار میشه.
اما خب واقعا پرداختن به یک فریم ورک دیگه هم برا خودم کسل کننده بود و هم حس کردم برای شما کسل کننده باشه
از طرف دیگه افرادی که بوت استرپ رو دنبال کردن کلا از برنامه نویسی نا امید میشدن اگر بعد از اون دوره میومدم و می گفتم که بوت استرپ رو کنار بزارید و سراغ یک فریم ورک روز برید
و علت دیگه اینکه بوت اترپ امتحان خودشو پس داده و فریم ورک قابل اعتمادیه
به کنار از همه این مسائل دوست نداشتم که بخوام در این مورد هم هزینه جداگانه دریافت کنم.
این شد که به ذهنم خورد که چرا bootstrap و Material Design رو در رو هم قرار بدم.
بوت استرپ به اندازه کافی قوی هست.فقط کافیه که بیام و زیبایی های material رو بهش اضافه کنم.
خب پس شروع کردم به جست و جو و خوندن مطالب مختلف شاید نزدیک به دو هفته تا بلاخره به چیزی که می خواستم رسیدم
اما خبر خوب اینکه من به صورت هدیه اون رو در کنار دوره بوت استرپ بیان کنم و نیاز به پرداخت هیچ هزینه اضافی نیست.
مطلبی که در آینده می خوام بگم شاید اصلا نیاز به زمان زیادی برا یادگیری و آموزشش نباشه اما واقعا براش زمان زیادی گذاشتم تا سادش کردم تا بتونید خیلی سریع و راحت اون رو یاد بگیرید و اگر میخواستید خود Material Design رو یاد بگیرید به شدت وقت گیر بود و کار رو براتون چندین برابر سخت تر می کیرد اما در صورتی که الان شما نیازی نیست چیز جدیدی یاد بگیرید چون ما بوت استرپ رو بلدیم و میخوایم این قدرت رو به بوت استرپمون اضافه کنیم.
اما خب Material Design برای ما چی کار می کنه.میاد و ظاهر بوت استرپ مارو به شدت زیبا تر می کنه مثلا ما تو بوت استرپ ۵ تا رنگ داریم اینجا میاد و ۱۷ تا رنگ فلت فوق العاده رو بهش اضافه می کنه
به دکمه هامون انیمیشن میده و ایکون های ۲۵۰ تایی بوت استرپ رو به هزار تا میرسونه و…..
اما خب این همه گفتیم Material Design و هیچی ازش نگفتیم.بیایم ببینیم اصلا به طور دقیق چی هست.
متریال دیزاین سبکی/زبانی جدید در طراحی است که گوگل در یکی از کنفرانس های خبری خود آن را معرفی کرده است. اگر بخواهیم دقیق تر باشیم در ماه ژوئن ۲۰۱۴
متریال دیزاین بیش از حد به سیستم گرید و انیمشین‌ها اهمیت می‌دهد و عمق و سایه‌ها برای المان‌های طراحی شده بسیار مهم است. شاید بتوان گفت ورژن بروز شده طراحی تخت (Flat Design) باشد اما خیلی زیباتر با انیمییشن‌ها و Transition های بسیار زیبا و در عین حال پیچیده. خود گوگل ادعا دارد که زبان جدید طراحی آنها، الهام گرفته از مرکب و کاغذ است. یکی از طراحان مشهور جهان به نام Matias Durate میگوید همانگونه که اجسام در دنیای واقعی قابل حس هستند و طول و عرض و ارتفاع دارند در این نوع طراحی دیجیتال هم باید همین حس‌ها را منتقل کرد.
اگر بخواهیم در یک جمله بگوییم متریال دیزاین چیست. می‌توانیم بگویم متریال دیزاین نسخه مکتوب، مستند و علمی طراحی تخت (Flat Design) هست. در ابتدا این نوع طراحی محدود به اپلیکیشن‌های موبایلی بود که برای اندروید فراهم شده‌اند و استفاده از آن در محیط وب کمی نامفهوم بود، ولی متریال دیزاین خیلی سریع جای خود را بین طراحان رابط کاربری وب پیدا کرده و میتوان گفت در حال محبوب شدن است.

درباره ی مدیر-محسن پور

من مهیار محسن پور هستم. علاقه شدیدی به طراحی وب مخصوصا به کد نویسی سمت سرور دارم . به زبان های html,css,javascript,jquery,php تسلط دارم. 6 ساله برنامه نویسی می کنم و شروع برنامه نویسیم هم با اسمبلی بوده. به برنامه سازی سیستم علاقه خاصی دارم چون حس میکنم درک بالایی از کامپیوتر به انسان میده. با زبان #C اشنایی دارم و برای یک پروژه دانشگاهی با این زبان قدرتمند بازی طراحی کردم. برای گوشی های دارای سیستم عامل اندروید برنامه طراحی کردم و تا حدودی با برنامه نویسی اندروید هم اشنا هستم. تو حوزه IT و امنیت مدت کوتاهی فعالیت کردم و به نسبت با شبکه اشنا هستم.

همچنین ببینید

فیلم آموزش Bootstrap قسمت ۱۸(tab & tooltip)

سلام در جلسه هجدهم bootstrap وارد مباحث حاوا اسکرپیت در بوت استرپ می شویم و تلاش ...

22 دیدگاه

  1. a
    afshin - رتبه بر اساس تعداد نظرات : خواننده

    تصمیم فوق العاده خوبی گرفتید. ازتون ممنونم
    قطعا با آموزش های جدید و حرفه ای سایتتون خیلی سریع تر رشد میکنه و کاربرها هم خیلی راضی تر خواهند بود.
    فقط یه سوال. قصد دارید تنها استفاده از فایل css متریال دیزاین که برای تم بوت استرپ نوشته شده رو استفاده کنید یا برنامه دیگه ای دارید؟
    منظورم این لینکه https://fezvrasta.github.io/bootstrap-material-design/
    فقط ای کاش این کتابخونه رو اصلا راه نمینداختین چون باعث بد قولیتون شده.
    sass رو که یه هفته پیش گفتید شروع میکنید و روند آموزش بوت استرپ هم کند شده. من منتظرم دوره ها کامل تموم بشه با هم تهیه کنم. ممنون میشم کمی سرعت بدید به آموزش های ویدیویی

    • م
      مدیر-محسن پور - رتبه بر اساس تعداد نظرات : تحلیلگر ویژه

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

  2. ع
    علی - رتبه بر اساس تعداد نظرات : خواننده

    سلام
    من دوره html و css رو به طور کامل نگاه کردم
    واقعا کامل تر از بقیه جاها بود. مشابهش رو هیچ جا ندیدم. در یک کلام تک بود
    اقای محسن پور ، من چرا باید دوره بوت استرپ رو دنبال کنم؟
    مگر همون قواعد نیست که در css مطرح شده?
    من زبان انگلیسی به نسبت قوی ای دارم. ایا فرقی بین دوره شما و چیزی از بوت استرپ ۳ که توی سایت p30downlaod برای دانلود گذاشته هست؟

    • م
      مدیر-محسن پور - رتبه بر اساس تعداد نظرات : تحلیلگر ویژه

      سلام
      دوره بوت استرپ برای این هست که ما ریسپانسیو طراحی کنیم و از ابزار های اون استفاده کنیم تا نخوایم خودمون از اول بشینیم همه چیز رو طراحی کنیم
      طراحی منو در دوره css رو مشاهده کردید؟؟چقدر زمان برد؟
      طراحی یک منو با بوت استرپ ۱۰ ثانیه هم وقت نمیگیره
      علاوه بر اینکه بوت استرپ قدرت طراحی ریسپانسیو قوق العاده ای رو میده
      من واقعا خودم دوره ای که شما میگید رو مشاهده نکردم و اوصولا دوره هایی که سایت های چه فارسی و چه انگلیسی قرار میدن رو مشاهده نمی کنم
      علتشم واضجه
      هیچ چیزی کامل تر از یک رفرنس نمی تونه باشه یا کامل نمی گن یا برای اینکه کامل نشون بدن که دارن می گن مطالب خارج بحث رو میگن
      من خودم از رو رفرنس درس میدم و با توجه به ایده های خودم یک پروژه رو پیاده می کنم
      اما خب شما از هر منبعی بخواید می تونید یاد بگیرید و به هر حال بوت استرپ بوت استرپه دیگه تهش همه دارن یک چیز می گن حالا یکی بیشتر و یکی کمتر
      موفق باشید

      • ع
        علی - رتبه بر اساس تعداد نظرات : خواننده

        ممنون از پاسختون
        متوجه شدم که چرا باید بوت استرپ رو هم دنبال کنم و حتما اینکار رو از طریق اموزش شما انجام میدم
        واقعا من یکی از اموزش های تخصصی شما لذت میبرم چون کاملا حرفه ای و در عین حال شیوا گفته میشه
        ولی خب در مورد اموزش بوت استرپی که توی سایت p30download گذاشته از سایت lynda.com هست و کاملا انگلیسی هست و حدس میزنم یک مرجع ( refrence ) محسوب میشه( اطلاعی ندارم)
        هنوز هم شروعش نکردم . بخاطر همین با شما مشورت کردم

        • م
          مدیر-محسن پور - رتبه بر اساس تعداد نظرات : تحلیلگر ویژه

          متشکرم از شما
          مرجع میشه خود سایت سازنده اون زبان یا فریم ورک اما خب لیندا هم سایت بدی نیست و نمی تونم ردش کنم
          من دوره رو بر اساس دوره هایی که خودم گذاشتم پیش میبرم
          به فرض پیش نیاز بوت استرپ js هم هست اما من js رو پیش نیاز قرار ندادم چون با استفاده از data ها اومدم js رو پوشش دادم تا کاربرام نخوان js رو برای بوت استرپ یاد بگیرن
          یا تو هیچ دوره ای از بوت استرپ material design گفته نشده و من میام تو این دوره این مبحث رو پوشش میدم
          دیگه انتخاب رو به عهده خودتون میذارم که از کجا شروع کنید
          اما خب باز تکرار می کنم که به هر حال آخرش همه دارن یک چیز می گن فقط نوع بیانش متفاوته
          پس شما از هر جایی می تونید شروع کنید
          و مهم اینکه فقط شروع کنید
          موفق باشید

          • ع
            علی - رتبه بر اساس تعداد نظرات : خواننده

            بله دقیقا این نوع اموزش شما به شدت چشم گیر هست
            میخواستم خواهش کنم اموزش های جاوا اسکریپت هم بذارید.
            و یک سوال داشتم
            فرق c و c+ و c++ چی هست؟
            مثلا الان که میخواید لطف کنید اموزشش c++ رو بذارید ، باید c+ رو هم بلد باشم؟
            ممنون

          • م
            مدیر-محسن پور - رتبه بر اساس تعداد نظرات : تحلیلگر ویژه

            آموزش های جاوا اسکریپت در برنامه های من به طور حتمی قرار داده شد
            c+ وجود نداره
            c++ هم پیش نیازش زبان c نیست
            و سختی کار توضیح تفاوت c و c++ هست
            چون تقاوت زیاد دارن بخوام خلاصه و مفید بگم c++ با ابزار بیشتر راحتی بیشتر برای برنامه نویس ها رو فراهم می کنه اما سرعت کمتر پس باهاش بازی طراحی می کنن یا برنامه های سیستم عامل
            c با ابزار کمتر سرعت بیشتر و سطح دسترسی بالاتر به سخت افزار رو برای برنامه نویس ها فراهم می کنه پس باهاس سیستم عامل یا os می نویسن
            c از c++ قدیمی تر و پدر c++ محسوب میشه چون c++ خودش از c گرفته شده
            امیدوارم که به طور خلاصه پاسختون رو دریافت کرده باشید

  3. ع
    علی - رتبه بر اساس تعداد نظرات : خواننده

    ممنون . دقیقا کامل بود
    راستش قصد دارم کمتر صحبت کنم که شما به ارایه اموزش ها بپردازید اما خب سوال هایی ذهنم رو میگیره که فکرکنم برای بقیه هم همین پیش میاد.
    در سایت معتبری داشتم از bootstrap میخوندم
    گفته شد که استفاده از این روش سرعت رو میبره بالا و خلاقیت و تنوع رو میاره پایین و مثلا از header های مشکی و یا بردرهایی به فلان مشخصات و غیره نشون دهنده این هست که از بوت استرپ استفاده شده.
    سوالی که ذهن من رو مشغول کرد این هست که بوت استرپ قابلیت انعطاف مثل چیزی که توی دوره css بررسی میکردیم نداره؟
    ایا سرعت طراحی ، کیفیت رو هم میاره پایین؟

    • م
      مدیر-محسن پور - رتبه بر اساس تعداد نظرات : تحلیلگر ویژه

      من مطمئنم کسی که این مطلب رو نوشته کاملا واضحه که یک خط کد بوت استرپ ننوشته
      بوت استرپ فوق العاده انعطاف پذیره
      من اول دوره گفتم میشه کامل اونو سفارشی یا customize کرد
      یا حتی از اول نوشت
      بعد چیزی که کیفیت رو کاهش بده مطمئن باشید رقیب سر سختش foundation به سرعت اونو کنار میذاره

  4. م
    مرتضی - رتبه بر اساس تعداد نظرات : خواننده

    خواهشا این دوره رو به صورت رایگان برگزار کنید بهش نیاز دارم
    اگه بتونم این رو یاد بگیرم حتما از شرمندگی در میام

  5. h
    hosein - رتبه بر اساس تعداد نظرات : خواننده

    منم سایت رو دنبال میکردم و از اموزش های css استفاده کردم و نهایت تشکر رو دارم ولی قسمت متریال دیزاین رو نمیتونم دانلود کنم؟

  6. م
    مهکامه - رتبه بر اساس تعداد نظرات : خواننده

    با سلام و خسته نباشید
    من دوره bootstrap و Css شما را دنبال کردم بسیار تشکر می کنم از زحمات خوب شما واقعا کامل درس دادید و با دلسوزی فراوان , من برنامه نویس mvc هستم و به جرات می تونم بگم که یک کلاس خصوصی کامل برام بود زیرا در طراحی قالب بسیار مشکل داشتم فقط یک سئوال داشتم در قسمت ۲۱ bootstrap مواردی که مربوط به دانلود فلدر ها است با فایل هایی که شما در فیلم گفتید یکسان نیست به نظر میاد فلدر font و فایل roboto را برداشتند میشه لطفا بگید من چکار کنم مدتی که دنبال این موضوع هستم و موفق نشدم و همین طور وقتی فایلهای که در سایتی که گفتید البتع منهای فونت و roboto را در پروژه می ذارم و دستور $.material.init را در Layout صدا می کنم کار نمی کنه لطفا کمکم کنید خیلی دلم میخواهد از materail استفاده کنم چطور کل فلدرها را پیدا کنم و همین طور میخواستم بدونم materail با کدام مروگر ها مشکل دارد

    • م
      مدیر-محسن پور - رتبه بر اساس تعداد نظرات : تحلیلگر ویژه

      سلام
      متشکرم از شما
      فایل ها رو در بخش کل دوره بوت استرپ قرار دادم
      با همه مرورگر ها سازگاره و اینکه چرا کار نمی کنه باید نگاه کنید تمام فایل ها رو به درستی به پروژتون اضافه کرده باشید

  7. r
    ruhan - رتبه بر اساس تعداد نظرات : تحلیلگر

    سلام دوستان عزیز فایلهای متریال دیزاین را از این آدرس :

    ” جامع ترین و کامل ترین پکیج آموزش bootstrap به زبان فارسی ”

    http://www.amoozesh-sara.ir/%D9%BE%DA%A9%DB%8C%D8%AC-%D8%A2%D9%85%D9%88%D8%B2%D8%B4-bootstrap/

    پایین صفحه ( فایلهای مورد نیاز ) دانلود کنید…

    که ظاهرآ فایل دانلود موجود نیست یا سرور سایت مشکل دارد…

پاسخ دهید

نشانی ایمیل شما منتشر نخواهد شد. بخش‌های موردنیاز علامت‌گذاری شده‌اند *