https://virgool.io/feed/@amirzenoozi72 برنامه نویس Front-End ، علاقه مند به جاوا اسکریپت و پایتون که گاهی وقتا هم طراحی میکنه. fa 2026-06-16 15:44:29 https://files.virgool.io/upload/users/12836/avatar/HWAVRi.jpeg?height=120&width=120 https://virgool.io/@amirzenoozi72 https://virgool.io/@amirzenoozi72/using-githooks-to-manage-your-project-programmatically-fg6rqdjebux9 Git Hooksگیت یه ابزار خیلی قدرتمند واسه کنترل پروژه است که عموما تو پروژهای برنامه‌نویسی ازش استفاده میشه و اگه برنامه‌نویس هستید قطعا باهاش آشنایی دارید. اما وقتی پروژه‌ شما از یه میزان بزرگتر میشه مدیریت مخزن Git پروژه واقعا سخت میشه از Branchهایی با اسم‌های متفاوت بگیر تا Commit های به محتواهای اشتباه یا نامفهوم. اما خب چیکار میشه کرد ؟ تو خیلی از تیم‌ها شاید این مورد مرسوم باشه که اعضای پروژه باهم دیگه توافق میکنن که از یک سری قوانین خاص پیروی کنی و روی همون قوانین با Git کار کنن اما خب ایین مورد هم ایرادات خاص خودش رو داره و خیلی وقتی ممکنه سهوا اشتباهاتی پیش بیاد که باز میتونه تاثیرات منفی روی پروژه Git شما به همراه داشته باشه. من تو این مقاله میخوام چند راه ساده رو به شما نشون بدم که بهتون کمک میکنه به شیوه بهتری پروژه‌های Git رو مدیریت کنید و قوانین خاصی رو به صورت اجباری داخل پروژه قرار بدید پس لطفا در ادامه این مطلب با من همراه باشید.تعریف اولیهاول از همه بیاید با هم ببینم که Git Hook چیه و چجوری قراره به ما کمک کنه تو حل این مشکل. اگخ بخوام به زبان ساده توضیح بدم؛ Git Hook در واقع به رخدادهای مشخصی در Git گفته میشه که به شما این امکان رو میده که برای اون‌ها با استفاده Shell برنامه‌هایی رو تعریف کنید تا پیش یا پس از اتفاق رخداد اول برنامه شما اجرا بشه و ما هم قراره دقیقا از همین قابلیت استفاده کنید. - آیا ما برای هر رخدادی که دلمون بخواد میتونید از Git Hook استفاده کنید ؟ + خب جواب این سوال طبیعتا خیر هست.در ادامه من دوتا از رایج‌ترین Hookها رو به توضیحات کامل و نمونه کد مربوط بهش براتون قرار میدم که بتونید ازش استفاده کنید در صورت نیاز و بعد از اون هم باقی Hookهارو معرفی میکنم و یه مروری روی بقیه با هم انجام میدیمچه زمانی از Pre-Commit استفاده کنیم؟این Hook در واقع زمانی فراخوانی میشه که کاربر دستور git commit رو اجرا میکنه اما پیش از اینکه کاربر متن Commit خودش رو وارد کنه این Script اجرا میشه و اگه برنامه با موفقیت اجرا نشه کاربر قادر به ادامه فرایند Commit نخواهد بود. برای مثال شما میتونید این امکان رو داشته باشید تا پیش از ذخیره تغییرات به عنوان یک Commit تست‌هایی که از قبل نوشتید اجرا بشه و اگر تست‌ها به درستی انجام نشدن از ادامه فرآیند جلوگیری بشه یا حتی تو حالت خیلی ساده مثل کد زیر شما میتونید بررسی کنید که آیا برنچی که داره تغییراتش در اون ثبت میشه از نامگذاری درستی پیروی میکنه یا نه ؟ https://gist.github.com/amirzenoozi/1b688be780cf0429259874dbecc1ba09 چه زمانی از Commit-msg استفاده کنیم؟این Hook دقیقا زمانی اجرا میشه که قراره یک Commit به هر شکلی توسط کاربر برای تغییر اخیر ثبت بشه که عمدتا این Hook توسط دستورهای git commit و git merge فراخوانی میشه اما چه کمکی به شما میکنه؟ خب شما خیلی راحت میتونید با استفاده از این Hook متن پیام خودتون رو بررسی کنید و یک سری قوانین براش تعریف کنید برای مثال این قانون میتونه این باشه که طول commit از یک تعداد کاراکتر بیشتر نباشه یا حتما با یک سری کلمات خاص شروع بشه و یا هر قانونی که خودتون دوست دارید تو پروژه رعایت بشه برای مثال تو قطعه کد زیر من میام بررسی میکنم که آیا متن Commit ثبت شده توسط کاربر از قواعد CommitConvension پیروی میکنه یا خیر ؟ https://gist.github.com/amirzenoozi/ed80483d33e5a71185f1cb3319525cb8 اما Hookها فقط به همین دو موردی که واستون مثال زدم محدود نمیشه و تعداد خیلی بیشتری Hook داریم که به بسته به پروژه و تصمیم‌گیری مدیر پروژه میتونید ازش داخل پروژه‌های خودتون استفاده کنیداما یه نکته رو دقت داشته باشید اونم اینکه موقعی که شما Hookها رو داخل پروژه خودتون قرار میدین بعد از اون لازمه که این امکان رو داشته باشید که اون‌هارو با بقیه اعضای تیم هم به اشتراک بذارید که بتونن ازش استفاده کنن اما به صورت پیشفرض مسیر ذخیره Hookها داخل .git هست و همونطور که میدونید تغییرات این فایل داخل مخزن اصلی Git ذخیره نخواهد شد برای اینکه بتونید Hookها رو به صورت Local داخل پروژه خودتون قرار بدید لازمه که اول از همه اونا رو داخل یه فولدر دیگه مثل .githooks ذخیره کنید و سپس از دستور زیر استفاده کنید:git config core.hooksPath .githooksسایر Hookهای موجود ؟خب همونطور که قبلا هم گفتم Git تعداد زیادی Hook داره که من فقط دوتا اون‌ها رو براتون به صورت کامل و با مثال توضیح دادم به همین دلیل اگه نیاز دارید که با بقیه اون‌ها آشنا بشید و بدونید که چه زمانی باید ازشون استفاده کنید توصیه میکنم حتما مستندات خود گیت رو مطالعه کنید چرا که به صورت خیلی کامل‌تری در مورد هر Hook توضیحات قرارداده و شما میتونید خیلی راحت ازش استفاده کنید. پروفایل گیت‌هاب https://github.com/amirzenoozi مقالات مرتبط https://vrgl.ir/Rgjgx https://vrgl.ir/8fI5Z https://vrgl.ir/kC235 امیرحسین دوزنده امیرحسین دوزنده Sun, 17 Jul 2022 10:47:41 +0430 https://virgool.io/@amirzenoozi72/make-a-mind-blowing-artwork-by-using-ai-and-text-ymh1zyjiknbl GANگرفته از صفحه گیتهاب همونطور که از عنوان این مقاله مشخصه قراره با چندتا کلیک ساده یه اثر هنری تولید کنیم و از قدرتش حیرت زده بشیم. قبل از هر چیزی لازمه این نکته رو توضیح بدم که تو این مقاله به هیچ وجه قرار نیست سراغ مباحث فنی این پروژه بریم و فقط میخوایم خیلی ساده و سریع ازش استفاده کنیم و چندتا اثر هنری برای خودمون تولید کنیم.قدم اول ?خب قبل از هر چیز تنها کاری که لازمه انجام بدید اینه که روی این لینک کلیک کنید و وارد برنامه Colab که یکی از محصولات گوگل محسوب میشه وارد بشید این محیط به شما این امکان رو میده تا قدرت پردازشی بالاتری داشته باشید و بدون نیاز به سخت افزار سنگین مدل‌های هوش مصنوعی رو اجرا کنید. مثل همین یکی که قراره ما اجراش کنیم.راستی اسم این پروژه VQGAN هست که اگه کنجکاو بودید میتونید با این عنوان هم مقالات بیشتری پیدا کنید هم به کدهای اصلی پروژه دسترسی پیدا کنید.قدم بعدی ?الان تنها کاری که لازمه انجام بدید از همون قسمت بالای بالای صفحه روی علامت‌ها کوچیک کنار سطر‌ها که شبیه دکمه Play هستن به ترتیب کلیک کنید و بعد از تمام شدن هر کدوم سراغ قسمت بعدی برید. برای بار اول توصیه میکنم به تنظیماتش دست نزنید تا مطمئن بشید همه قسمت‌ها رو درست و به ترتیب جلو رفتید و چیزی از قلم نیفتاده. به قسمت 5 یعنی Run the Art Generator که برسید میتونید اثر هنری خودتون رو تولید کنید. با شروع این قسمت اولین عکسی که براتون تولید میشه خیلی بهم ریخته است و احتمالا اصن هیچ معنی خاصی نمیده ولی عجله نکنید، یکم صبر کنید اون وقت میبینید عکس‌هایی که در ادامه تولید میکنه به مرور کامل‌تر و با مفهوم‌تر میشن و از اون جالب‌تر به متنی که شما برای این هوش مصنوعی نوشتید نزدیک‌تر میشه عکس نهایی و در نهایت هم میتونید عکس رو برای خودتون ذخیره کنید و ازش لذت ببرید:Fantasy World Matte Painting Trending On Artstationتصویر بالا خروجی همین مدل برای متنی هست که در زیرش نوشتم همونطور که میبینید عکس نهایی بسیار جذاب و براساس متنی هست که به عنوان ورودی به این هوش مصنوعی دادیم. پروفایل گیت‌هاب https://github.com/amirzenoozi مقالات مرتبط و محبوب https://vrgl.ir/Rgjgx https://vrgl.ir/LJ5PD https://vrgl.ir/8fI5Z امیرحسین دوزنده امیرحسین دوزنده Wed, 22 Jun 2022 21:36:10 +0430 https://virgool.io/@amirzenoozi72/how-to-make-an-action-to-add-your-virgool-article-to-github-profile-opeq0ltpzonx GitHub Actions For Virgool Artivlesچند وقتی بود که خیلی دلم میخواست یه دستی به سر و گوش پروفایل گیت‌هاب خودم بکشم و یکم از اون سادگی درش بیارم تا هم خودم با نگاه کردن بهش احساس خوبی بگیرم هم یه رزومه کوچیک باشه از کارایی که کردم یا اطلاعاتی که دلم میخواد اونجا دیده بشه. یکی از همین مواردی که دلم میخواست بتونم تو پروفایل گیت‌هابم نشونش بدم پست‌هایی بود که جاهای مختلف مثل ویرگول یا Medium منتشرش میکردم. اما از اونجایی که اصن نه حوصله آپدیت کردنش بعد از منتشر کردن هر پست رو داشتم و نه حتی وقتش رو واسه همین یه سرچی کردم تا ببینم راه حل مناسبی واسش پیدا میکنم یا نه. ? جستجوبعد از یکم جستجو رسید به یه راه حل باحال که بهم این امکان رو میداد تا Feed وبسایت‌های مختلف رو با استفاده از GitHub Action بگیرم و با استفاده از اون کاری که میخوام رو انجام بدم اما خب فقط همین مورد کفایت نمیکرد من باید یه راه حلی پیدا میکردم که این کار به صورت خودکار با فواصل زمانی مشخص تکرار بشه تا دیگه نیاز نباشه من هر چند وقت یبار خودم دستی این Action رو اجرا کنم واسه همین یکم بیشتر سرچ کردم و متوجه شدم که برای Action هایی که داخل GitHub تعریف میکنیم میتونیم همچین تنظیمی رو ست کنیم تا به صورت خودکار با فواصل زمانی مشخص اجرا بشن اگر با Cron Job آشنایی داشته باشید حتما میدونید در مورد چی صحبت میکنم. حالا بیاید یکم جلوتر بریم و ببینیم دقیقا چه کاری لازم بود تا انجام بدم: ??‍? گیت‌هاب اکشناول از همه این نکته رو بگم که اگه میخواید پروفایل GitHub خودتون رو آپدیت کنید اول از هر کاری باید یه Repository دقیقا با اسم پروفایل خودتون درست کنید. با این کار فایل README.md این Repository به عنوان پروفایل شما به بقیه نشون داده میشه. خب حالا برای شروع لازمه یه نگاه به یکی از Repositoryهای GitHub بندازیم که یه اکشن خیلی خوب به اسم blog-post-workflow برای این مورد نوشته و ما هم قراره از همون استفاده کنیم. اما توی این Action هیچ صحبتی از این نشده که ایا برای پست‌های ویرگول میتونیم ازش استفاده بکنیم اما بیاید بریم جلو تا ببینیم میتونیم ازش استفاده کنیم یا نه. خب برای شروع من اول از پست‌هایی که روی Medium نوشتم شروع میکنم تا اونا رو به پروفایل GitHub خودم اضافه کنم و لینک و عنوان آخرین مقالات رو اونجا نشون بدیم واسه همین من تو Root اصلی پروژه و تو مسیر زیر یه فایل به هر اسمی که دوست داریم درست میکنیم برای مثال من اسم این فایل رو `blog-post-workflow.yml` میذارم که مشخص باشه چه کاری قراره انجام بده: .github/workflows/blog-post-workflow.ymlاما اگه براتون سوالی که محتوای این فایل قراره چی باشه باید بگم میتونید کد زیر رو کامل کپی کنید و توی این فایل قرار بدید: https://gist.github.com/amirzenoozi/ab2a2e635ffe9d2b874a1122a61f036f تنهایی تغییری که باید حتما داخل کد بالا اعمال کنید وارد کردن آدرس پروفایل خودتون به جای پروفایلی هست که من قرار دادم تا Feed های مربوط به پروفایل شما رو بگیره و بهتون نشون بده. اما کد بالا دقیقا چه زمان‌هایی کار میکنه و ما چجوری میتونیم اونو براساس زمان دلخواه خودمون تنظیم کنیم ؟ خب برای جواب به این سوال لازمه که یه دانش خیلی کوچیک درمورد Cron Job ها داشته باشید و بدونید که چجوری میشه تغییرات دلخواه روشون اعلام کرد اما قبل از اون باید بگم که Action بالا هر 24 ساعت یکبار و راس ساعت 19 عصر اجرا میشه و اگه تغییری تو Feed شما به وجود اومده باشه به صورت خودکار فایل README.md که قبلا درموردش صحبت کردیم رو آپدیت میکنه اگر نیاز دارید که این زمان رو تغییر بدید توصیه میکنم حتما یه سر به وبسایت crontab بزنید و ازش برای تغییر این زمان استفاده کنید. اما خب حالا یه نکته‌ای که به وجود میاد اینه که خب دقیقا از کجا متوجه میشه که کدوم بخش از فایل رو باید به‌روزرسانی کنه ؟ جواب این سوال هم با اضافه کردن یک خط کامنت به فایل README.md داده میشه و دیگه خیلی راحت میتونید ازش استفاده کنید و اون هم این دو خط زیر هستن: <!-- BLOG-POST-LIST:START --> Your Posts Will Be Add Here !!! <!-- BLOG-POST-LIST:END -->اگر همه اینکارهارو تا الان انجام دادین باید بهتون تبریک بگم چرا که دیگه از الان بدون نیاز به هیچ کار اضافه‌ای پست‌هایی که داخل وب سایت Medium نوشتین به صورت خودکار به پروفایل شما اضافه میشه و بقیه هم میتونن ببینن.? ویرگولاما خب ما که قرار بود پست‌های ویرگول رو به پروفایل خودمون اضافه کنیم نه Medium رو خب باید بگم که اگه یه نگاه به Feed ویرگول خودتون بندازید متوجه میشید که شباهت خیلی زیادی بین این دوتا هست و تقریبا هر دو از یک ساختار یکسان طبعیت میکنن واسه همین با یکم تغییر کوچیک میتونید همون فایل Action قبلی رو برای ویرگول هم آماده کنیم و برای اینکه درگیر تنظیمات Action نشید من این فایل رو مثل قبلی آماده کردم و میتونید عینا از همین فایل استفاده کنید: https://gist.github.com/amirzenoozi/8286eaf38a1be4f2800bdd38f39179d8 اما در خصوص تغییرات فایل README.md هم باید بگم که اگه به فایل Action دقت کنید متوجه میشید که برای این مورد هم ما یه کامنت جدید تعریف کردیم تا عنوان و لینک مقالات رو بین این دوتا کامنت قرار بده اما برای توضیح بهتر من این زیر قرارشون میدم: <!-- VIRGOOL:START --> Your Posts Will Be Add Here !!! <!-- VIRGOOL:END -->اگر همه این تغییرات رو تا اینجا انجام دادین باید یه تبریک دیگه هم بهتون بگم چون الان پست‌های ویرگول رو هم میتونید توی پروفایل خودتون به بقیه نشون بدید و با انتشار هر پس دیگه نیاز به آپدیت پروفایل به صورت دستی رو نخواهید داشت. در خصوص مسیر هم دقیقا باید این فایل رو کنار فایل قبلی که درست کردیم قرار بدیم تا GitHub فایل رو به عنوان یه Action جدید شناسایی کنه.پروفایل گیت‌هاب https://github.com/amirzenoozi مقالات مرتبط https://coderlife.ir/building-cli-with-python-b25swdkvsg42 https://virgool.io/@amirzenoozi72/the-importance-of-programming-in-our-life-nf2rshlkf55p https://virgool.io/JavaScript8/create-custom-music-player-with-js-and-canvas-m7pohorbu3fr امیرحسین دوزنده امیرحسین دوزنده Fri, 15 Oct 2021 01:46:25 +0330 https://virgool.io/@amirzenoozi72/%D8%B3%D8%A7%D8%AE%D8%AA-%DB%8C%DA%A9-modal-component-%D8%AF%D8%B1-angular-lnlvvqrballk Modal Component in Angularتو این مقاله قراره درباره اینکه چجوری میتونیم یک Component برای Modal درست کنیم و در بخش‌های مختلف App ازش استفاده کنیم صحبت کنیم. قبل از اینکه در مورد چگونگی پیاده‌سازی این Component با هم صحبت کنیم باید بگم که برای داشتن یک Modal در Angular یا هر فریمورک دیگه راه‌های مختلفی وجود داره و ما قراره اینجا یکی از این روش‌ها رو با هم بررسی کنیم.در این روشی که جلوتر با هم خواهیم دید تقریبا شما تو هر بخشی که اراده کنید میتونید تغییر ایجاد کنید و اینجوری میتونید Modal‌های مختلفی در صفحه داشته باشید.طرح مسئلهبرای شروع بیاید با هم بررسی کنیم که دقیقا به چه Modal نیاز داریم و چه ویژگی‌هایی میخوایم داشته باشه پس به این لیست زیر دقت کنید: قابلیت فراخوانی مدال در قسمت‌های مختلف اپلیکیشنامکان اضافه کردن کلاس‌های دلخواه برای مراحل مختلفامکان فراخوانی توابع مختلف در هنگام و باز و بسته شدن Modalهاامکان فراخوانی یک Modal پس از بسته شدن Modal فعلیامکان تغییر Layout مربوط به هر Modal به صورت اختصاصیخب برای شروع کار ابتدا بیاید به وسیله AngularCLI با هم دیگه نیازمندی‌های پروژه رو آماده کنیم پس لطفا این چند خط رو در هر مسیری که علاقه داشتید در خط فرمان اجرا کنید تا فایل‌های مورد نیاز ما ساخته باشه. دستورا ساخت سرویس و کامپوننت با استفاده از AngularCLIاولین خط از دستورات بالا یک فولدر به modal برای ما درست میکنه که داخل اون فایل‌های مربوط به کامپوننت ما قرار داره و خب حداقل حاوی یک فایل با پسوند ts هست که عمده تغییرات ما در این بخش قراره اتفاق بیفته، خط دوم دستورات هم یک فایل سرویس برای ما درست میکنه که قراره به وسیله این فایل تو بخش‌های مختلف اپلیکیشن به Modalها دسترسی داشته باشیم. پیاده سازیبرای شروع من اول سرویس مربوطه رو مینویسم چون داخل Component اصلی ما ازش استفاده کردیم این سرویس یک سرویس خیلی ساده است که فک نمیکنم نیازی به توضیح داشته باشه یک لیست تعریف شده برای همه‌ی Modalها یک تایع برای اضافه کردن، یک تابع برای حذف کردن، یک تابع برای پیدا کردن و باز کردن و در نهایت یک تابع برای پیدا کردن و بستن Modal مورد نظر داریم که در کد زیر میتونید ببینید: https://gist.github.com/amirzenoozi/962d74e8b6aaedf9ec605913a9072c98 بعد این اینکه سرویس مورد نظر رو نوشتیم بریم سراغ Component اصلی و باهم دیگه اون رو هم بررسی و کامل کنیم من در ادامه همین بخش کدمربوط بهش رو قرار میدم ولی خب برای توضیح باید بگم که ما تو این Component ابتدا خود Element اصلی رو انتخاب میکنیم و با اضافه کردن کلاس‌های CSS بهش در بخش‌های مختلف Modal مورد نظرمون رو نشون میدیم توابعی هم که من تعریف کردم یک تابع هست در هنگام Init شدن فراخوانی میشه و وظیفه اضافه کردن Modalمارو به لیست موجود داخل Service برعهده داره و در هنگام Destroy شدن هم تابع دیگه فراخوانی میشه تا Modal مورد نظر رو از لیست حذف کنه علاوه بر اون هم دو تا تابع برای نمایش و پنهان کردن Modal داریم که از همون توابع داخل Service استفاده میکنن و در صورت نیاز میتونید داخل فایل HTML خودتون ازش استفاده کردید به جز اینا یک KeyHandler هم من قرار دادم که وقتی مثلا دکمه Esc کیبورد رو فشار بده Modal مورد نظر بسته بشه. همچنین من هنگام باز شدن Modal ارتفاع صفحه رو هم حساب میکنم که اگه از View خارج شده بود بتونم کلاس مورد نظر خودم رو بهش اضافه کنم. تا توی اون حالت هم مشکلی نداشته باشه. https://gist.github.com/amirzenoozi/eb826fd40a8130a4135d9204724b7ed4 بعد از این بهتره بریم سراغ فایل HTML که من خیلی راحت در نظرش گرفتم و اصلا چیز پیچیده‌ای نداره و در واقع یک خط بیشتر نیست:<ng-content></ng-content>چیزی که من برای ساختاربندی Modal‌در نظر گرفتم به این صورت هست که ما تمام بخش‌ محتوای داخل Modal‌ رو در هنگام ساخت یک مدال بتونیم تغییر بدیم به این صورت دیگه نیازی نیست تا برای مثال شما یک ورودی برای Title داشته باشید و اگر جایی نیاز بود استایل‌های اون رو تغییر بدید مجددا از متغیر‌های اضافی در Component‌ استفاده کنید. اگر با نحوه کلاس گذاری به شیوه BEM در CSS آشنایی داشته باشید خیلی راحتی میتونید با تعریف یک Component در بخش Styleها بدون کدهای اضافی و شلوغ این بخش رو هم مدیریت کنید و هر جایی که نیاز بود کلاس‌های دلخواهتون رو بدون هیچ محدودیتی به Modal اضافه کنید. ما برای نمایش Modal‌در این روش فقط کافیه تا با استفاده از کلاس‌ها در هنگام فراخوانی توابع باز و بسته کردن این بخش رو هم مدیریت کنیم. حرف آخرامیدوارم از این مقاله بتونید استفاده کنید و اگه جایی نیاز به توضیح بیشتر داشتید خیلی خوشحال میشم که برام کامنت بذارید تا در صورت نیاز مقاله رو اصلاح کنم.اگر در زمینه Angular نیاز به آموزش دیگه‌ای دارید یا موضوعی هست که دوست دارید در موردش بنویسم باز هم برام کامنت بذارید هر موضوعی که وقت و دانشم اجازه بده حتما آماده میکنم و باهاتون به اشتراک میذارم. مقالات دیگه که شاید دوست داشته باشید https://virgool.io/DesignersCommunity/komodaa-ui-ux-review-download-new-design-ncjefimpsicq http://vrgl.ir/nqP2c https://virgool.io/JavaScript8/create-custom-music-player-with-js-and-canvas-m7pohorbu3fr امیرحسین دوزنده امیرحسین دوزنده Sun, 29 Mar 2020 15:03:36 +0430 https://virgool.io/coderlife/music-player-with-python-and-tkinter-dmzrg8gtwhlk عکس از سایت RealPythonهمون جور که تو سری مقاله‌های قبلی هم گفتیم اصولا هر کاری یه اسکریپت پایتون داره واسه همین هم امروز تصمیم گرفتم تا با استفاده از پایتون یه موزیک پلیر خیلی خیلیی ساده رو طراحی کنیم تا اینجوری اگه دوست داشتین برای خودتون یه موزیک پلیر جمع و جور بنویسید خدا رو چه دیدن شاید بعدا گسترشش دادین و یه VLC یا PotPlayer از توش دراومد ?حالا برای اینکه بریم سراغ این موزیک پلیر چه چیزایی لازم داریم بالاخره ما که قرار نیست اینجا "چرخ رو از اول اختراع کنیم" قراره فقط از یک سری ابزار که قبلا نوشته شده استفاده کنیم و اون چیزی که مد نظرمون هست رو براساس نیاز خودمون بنوسیم پس من کتابخونه‌هایی رو که تو این مورد ازشون استفاده کردم واستون این زیر لیست میکنم تا اگه ندارید نصب کنید و این مقاله رو تا آخر دنبال کنید: کتابخونه‌های مورد نیازکتابخونه Tkinter برای ساخت رابط گرافیکیکتابخونه Mutagen برای خواندن Tagهای نوشته شده روی فایل‌های صوتیکتابخونه Pillow برای کار با تصاویر کتابخونه PyGame برای کنترل موزیک پلیرسایر کتابخونه‌هایی که‌ استفاده خواهیم کرد نیازی به نصب نداره.فقط یک نکته اگر احیانا کتابخونه Tkinter رو نمیتونید داخل کدهاتون Import کنید حتما موقع نصب Python نصب این کتابخونه رو غیرفعال کردید و گرنه به صورت پیش فرض همراه با Python براتون نصب میشه.صورت مسئلهبرای اینکه بهتر بتونیم برنامه نویسی رو انجام بدیم لازمه که یکبار صورت مسئله رو با هم دوره کنیم و ببینیم به چه چیزی نیاز داریم. خب برای داشتن یه موزیک پلیر ساده ما به یک سری دکمه برای کنترل نیاز داریم که این دکمه‌ها شامل پخش، توقف، افزودن فایل و در صورت نیاز کنترل‌های صدا هستیم بعد از اون برای گرافیک بهتر ما نیاز داریم که بتونیم Tagهای مربوط به فایل‌های صوتی رو بخونیم و از همه مهم‌تر بتونیم Cover مربوط به فایل‌هارو نشون بدیم و در نهایت نیاز به یک لیست داریم که بتونیم فایل‌های صورتی رو بهش اضافه کنیم تا از موزیک پلیر از روی همون به خوندن ادامه بده. پیاده سازی و چالش‌هاتو این اسکریپت بر خلاف موردهای قبلی سعی کردم از Classها برای نوشتن کد استفاده کنم تا هم یه تمرینی برای خودم باشه هم یکم منظم‌تر کد نوشته باشم واسه همین اگه مثل من با کلاس‌ها در پایتون زیاد کار نکردید پس بهتره این تکه کد زیر رو ببینید تا یک دوره کوچولو روی این موضوع باهم داشته باشیم. https://gist.github.com/Winnie-Akoko/0d9e7dabebe0930a1621338dc4e0994f برای مثال در کد بالا ما یک کلاس Document داریم که با استفاده از اون یک فایل رو خوندیم و محتوایاتش رو داخل یک متغیر به اسم myFile ذخیره کردیم و حالا با استفاده از فانکشن‌های داخل کلاس میتونیم اون فایل‌هارو تغییر بدیم یا محتوای داخل فایل رو ببینیم این تکه کد ساده ترین کد برای معرفی کلاس هست. که فک میکنم برای شروع کار با کلاس‌ها کافی باشی فقط نکته دیگه اینکه اگه متغیرهایی رو نیاز دارید که باید تو سایر متدهای کلاس بهش دسترسی باشید لازم هست تا با صورت .self شروع کنید تا بتونید مقدارش تو سایر متدها تغییر بدید. و اما بریم یکم جلوتر و یکم در مورد روند اصلی کار توضیح بدم چون اینجا بنظرم توضیح دادن کدها واقعا کار بیهوده‌ای هست و تا وقتی کد نزنید هر چه قدر که توضیح داده باشه اون تاثیر لازم رو نمیذاره برای همین من روند کار رو توضیح میدم و در نهایت هم کدهایی که نوشتم رو براتون قرار میدم تا اگه دوست داشتین ادامه بدید و تغییراتی که دوس دارید رو روش اعمال کنید. برای شروع ما نیاز داشتیم که یک رابط کاربری داشته باشیم تا از طریق اون بتونیم کارهای لازم رو انجام بدید برای همین از Tkinter استفاده کردیم که خیلی ساده و دم دستی محسوب میشه برای کارهم یک منو به اپلیکیشن اضافه کردیم تا بتونیم از طریق اون فایل به سیستم وارد کنیم یا اصن اپلیکیشن رو ببندیم. بعد از اون دو تا دکمه لازم داشتیم تا بتونیم پخش و توقف موزیک رو کنترل کنیم و برای قشنگی هم یه باکس برای نمایش کاور موزیک که بدونیم چه چیزی در حال پخش هست راستی یه لیست هم لازم داشتیم که صف پخش موزیک‌ها رو نشون بده و از داخل اون بتونیم انتخاب کنیم چه موزیک پخش بشه. اما برای نمایش کاور آهنگ‌ها چندین کتابخونه وجود داره که بتونید ازشون استفاده کنید اما من چیزی که بنظر از همه بهتر بود کتابخونه Mutagen بود که کلاس‌های جالبی برای خوندن این تگ‌ها داشت و خیلی راحت شما میتونستید عکس رو به Pillow Img تبدیل کنید و جای مورد نظر ازش استفاده کنید اما راه حلی که من برای نمایش تونستم بهش برسم این بود که هر بار فایل جاری رو با یک عنوان مشخص ذخیره کنم در مثلا Cover.png بعد همیشه همین فایل رو نشون بدم اما اگه شما بتونید بدون ذخیره فایل اون رو نشون بدید خیلی خوب میشهمن دیگه خب بیشتر از این توضیح نمیدم اگه فک میکنید چیزی رو از قلم انداختم واسم بنویسید تا برانون توضیح بدم یا همین مقاله رو آپدیت کنم. اگه اسکریپت دیگه‌ای هم مد نظرتون هست یا موضوعات دیگه رو میخواید تحت این مجموعا مقالات بخونید بازم برام کامنت بذارید تا در موردشون براتون بنویسم. گیت‌هاب پروژه https://github.com/amirzenoozi/python-music-player مقالات مرتبط http://vrgl.ir/gfGz1 http://vrgl.ir/8fI5Z http://vrgl.ir/LJ5PD امیرحسین دوزنده امیرحسین دوزنده Wed, 18 Dec 2019 14:22:47 +0330 https://virgool.io/DesignersCommunity/komodaa-ui-ux-review-download-new-design-ncjefimpsicq بررسی رابط کاربری کمداکُمُدا یک استارتاپ جدید در حوزه فروش است که جامعه کاربریش رو بیشتر خانم‌ها تشکیل میده این اپلیکیشن به کاربران خودش کمک میکنه تا لباس‌ها (نو یا کار کرده) و همینطور زیورآلات خودشون رو برای فروش دراختیار سایر کاربران قرار بدن در واقع شما میتونید در این اپلیکیشن لباس‌هایی که عملا دیگه استفاده‌ای ازشون نمیکنید رو با قیمت پایین‌تر بفروش برسونید و در عین‌حال که بهتون کمک میکنه تا کمد خودتون رو خلوت‌تر کنید یه درآمد کوچیکی هم میتونه براتون داشته باشه.ماهیت این اپلیکیشن و همینطور نیازی که در کاربران هدف خودش برطرف میکرد باعث شد تا خیلی زود بین جامعه خانم‌ها جای خودش رو باز کنه و خیلی سریع نظر افراد زیادی رو به خودش جلب کنه و با توجه به استارتاپی بودن این اپلیکیشن خیلی منطقی هست که در ابتدای کار با ساده‌ترین امکانات عرضه بشه تا بتونه در کمترین زمان ممکن جامع هدف خودش رو پیدا کنه. این استراتژی به خیلی از استارتاپ‌ها کمک میکنه تا بتونن ریسک پیدا شدن رغیب یا قدیمی شدن ایده اصلی رو به حداقل برسونن.امکانات کُمُدابنظرم کمدا در هنگام پیاده‌سازی بخش‌های زیادی رو از اینستاگرام وام گرفته تا بتونه یه رابط کاربری خیلی آشنا برای کاربرای خودش فراهم کنه به همین دلیل اگه شما از کاربرای اینستاگرام باشید و برای بار اول وارد این اپلیکیشن بشید با یه رابط کاربری خیلی آشنا رو‌به‌رو میشید. برای اینکه بدونید کمدا دقیقا چه امکاناتی داره بهتره به لیست زیر توجه کنید:اضافه کردن محصولات به پروفایلجستجو بین محصولاتجستجو بین اعضاامکان خرید/فروش محصولاتامکان گفتگو با سایر کاربرانUI/UXرابط کاربری کُمُدااز لحاظ رابط کاربری همونطور که قبلا گفتم برای ایجاد یک تجربه کاربری آشنا برخی از بخش‌ها مشابه با اینستاگرام طراحی شده اما خب در برخی دیگر از بخش‌ها هم تفاوت‌هایی وجود داره که در ادامه بخش‌های مختلف رو با هم بررسی میکنیم.در این بررسی گرافیکی ما از گوشی Galaxy S9 استفاده کردیم بنا بر این ممکنه تو سایر گوشی‌ها مشکلات کمتر یا بیشتری رو مشاهده کنید.فرآیند ثبت‌نام در کُمُدااگر شما از کاربران کُمُدا نباشید برای استفاده از اپلیکیشن لازمه که حتما ثبت‌نام انجام بدید اما در طول فرآیند ثبت‌نام با اعمال برخی تغییرات میتونیم به تجربه کاربری بهتری نسبت به الان برسیم. برای شروع بررسی از اولین صفحه اپلیکیشن شروع میکنیم. در این صفحه شما دو دکمه با عنوان‌های "ورود" و "ثبت نام" رو مشاهده میکنید که نمیتونیم اهمیت بیشتری برای هر یک از آن‌ها قائل بشیم چرا که هر کاربری که از اپلیکیشن شما استفاده میکنه و وارد این صفحه میشه میتونه هم کاربری باشه که میخواد وارد بشه و هم کاربری که قصد ثبت‌نام داره اما خب اگه این فرض رو داشته باشیم که بعد از ثبت‌نام کاربران دیگه این صفحه رو نمیبینند و به صورت آماری تعداد افرادی که با این صفحه رو‌به‌رو میشن بیشتر هست میتونیم راه حلی به این شکل داشته باشیم که در ابتدا فرم ثبت‌نام رو به کاربر نشون بدیم و دکمه‌ای با وزن متفاوت برای ورود در نظر بگیرم و دکمه اصلی رو به "ثبت اطلاعات اختصاص بدیم".صفحه ورود و ثبت نامعدم بهینه‌سازی اپلیکیشن با صفحه نمایشوقتی برای اولین بار وارد اپلیکیشن شدم چیزی که تو قسمت NavBar پایین صفحه نظرم رو جلب کرد چسبیدن متن‌ها و آیکن‌های هر یک از آیتم‌های منو بود که بنظر من اومد که این اپلیکیشن با این سایز از صفحه نمایش بهینه نشده. برای درک بهتر میتونید به تصویر زیر که از صفحه‌ی افزودن آیتم اپلیکیشن گرفته شده دقت کنید: فاصله‌ها در نوار پایین صفحههمینطور که در تصویر بالا میبینید میزان فاصله بین آیکن تب مورد نظر و همینطور عنوان تب با کنار بسیار بسیار کمه و بیشترین این تصویر رو کاربر میده که اپلیکیشن برای صفحه نمایش بهینه نشده و یا بر هر دلیلی طراحی، درست نمایش داده نمیشه. تجدید نظر در فاصله‌ها یکی از مواردی بود که ما در طول بررسی و بازطراحی رابط کاربری بهش توجه کردیم.دریافت اطلاعات آماری از کاربران جدیدبعد از اینکه شما فرآیند ثبت‌نام رو در اپلیکیشن کامل کردید با یک صفحه رو‌به‌رو میشید که از شما میخواد تا یک سری اطلاعات آماری از علت استفاده از کُمُدا و ... در اختیار اپلیکیشن قرار بدید تا بتونه سرویس بهتری رو در آینده در اختیارتون قرار بده که بنظرمون بسیار کار جالبی برای یک سرویس تازه مجسوب میشه اینجوری میتونه نیاز سنجی بهتری در زمینه تبلیغات انجام بده و به طور کلی شناخت بهتری از کاربران خودش داشته باشه. اما در این فرآیند جمع‌آوری اطلاعات چندتا نکته وجود داره که در صورت تغییر میتونه تجربه خوش‌آیندتری برای کاربران فراهم کنه که با هم بررسیشون میکنیم:عدم امکان رد شدن از این مرحلهشما بعد از ثبت‌نام به هیچ عنوان و به صورت منطقی راهی برای رد شدن از این مرحله ندارید و در واقع مجبور هستین تا به این سوالات پاسخ بدید در صورتی که در هنگام طراحی میتونستیم با در نظر گرفتن این امکان و در عین حال تغییر وزن دکمه مورد نظر توجه کاربر رو به سمت ادامه پاسخ دادن به سوالات معطوف کنیم.خارج شدن از این بخش بعد از بستن اپلیکیشناگر شما در این مرحله از اپلیکیشن خارج بشید و مجددا اقدام به ورود کنید دیگه امکان انکه به سوالات آماری پاسخ بدید رو ندارید و به ناچار وارد صفحه خانه میشید که میتونید آیتم‌ها و محصولات رو ببینید.طراحی بصری و گرافیکی سوالاتکاربران به صورت کلی ارتباط بیشتری به محتوای تصویری برقرار میکنن بنابراین برای طراحی سوالات بهتر بود تا به جای استفاده از متن تنها از متن به همراهی تصویرسازی‌های کوچیک استفاده بشه تا جذابیت بصری رو در هنگام جواب دادن به سوالات افزایش بده.دسترسی به این بخش در صورت علاقهاگر شما در اون لحظه که برای اولین بار با این سوالات رو‌به‌رو میشید به هر دلیلی حوصله لازم برای پاسخ دادن به سوالات را نداشته باشید دیگر از هیچ طریقی امکانی نمیتوانید وارد این بخش بشید اما چه بهتر که این امکان از طریق منو دسترسی در تمام اپلیکیشن در دسترس باشه تا در صورت علاقه کاربران به سوالات جواب بدن یا در صورت لزوم و در مواقع خاص خود سرویس سوالاتی رو به این بخش اضافه یا ازش کم کنه. عدم یکپارچگی در طراحی دکمه اصلیاپلیکیشن کمدا برای دکمه‌های اصلی از یک رنگ ترکیبی سبز و آبی استفاده کرده که خود این نکته با توجه به طراحی‌های انجام شده در چند وقت اخیر موردی هست که میتونه در اون تجدید نظر بشه و از یک رنگ ثابت برای اون استفاده بشه اما نکته‌ای که در این بخش میخوایم بهش اشاره کنیم یک مورد کلی‌تر هست و اونم استفاده از دو رنگ متفاوت برای متن بر روی این دکمه هست در بیشتر صفحات اصل اپلیکیشن این دکمه به همراه متن "سفید" استفاده شده اما در برخی از بخش مثل سبد خرید از متن "مشکی" بر روی همین دکمه استفاده شده عکس زیر دکمه‌های مورد نظر رو در صفحه سبد خرید نشون میده.آیتم‌های موجود در سبد خریدبخش "ورپریدگان اخیر" در صفحه اصلیجلب اعتماد کاربران همواره یکی از مهم‌ترین مسائل برای استارتاپ‌های فروشگاهی بوده است. چرا که کاربران برای خرید و انجام تراکنش‌های بانکی نیازدارند تا از امینیت سرویس‌ها به طور کامل اطمینان داشته باشند یا مطمئن باشند که پس از پرداخت وجه، کالایی که سفارش داده‌اند را دریافت خواهند کرد خصوصا در اپلیکیشنی شبیه به کُمُدا که کالاهایی موجود در آن توسط خود کاربران عرضه میشود اعتماد یکی از مهم‌ترین مسائل به شمار میرود. اما نکته‌ای که میخواهیم به آن بپردازیم یکی از بخش‌های موجود در اپلیکیشن به نام "ورپریدگان اخیر" میباشد که بنظر ما تنها برای جلب اعتماد کاربران در این صفحه قرار گرفته است، چرا که کالاهایی در این بخش به کاربر نمایش داده می‌شود که قابلیت خرید ندارند و توسط سایر کاربران در این سرویس خریداری شده‌اند.این بخش از صفحه خانه درست است که به عنوان یک ایراد قابل ذکر نیست اما میتوان به روش‌های دیگری حس اعتماد را در کاربران به وجود آورد. برای مثال در طراحی مجدد با پخش کردن محصولات موجود در این بخش بین سایر بخش‌ها به صورت غیر مستقیم به هدفی مشابهی رسیدیم.علاوه‌براین با توجه به اینکه این بخش عملا عملکرد دیگری در صفحه ندارد و در واقع کاربران فقط یک دسته از کالاهایی را در صفحه میبنند که قبلا خریداری شده و دیگر امکان خرید برای آن‌ها فراهم نیست حذف این بخش بنظرما باعث بهبودی تجربه کاربری و دسترسی سریع‌تر به سایر بخش‌ها را فراهم میکند. کالاهای فروخته شده در کمداعلاوه‌براین از نظر طراحی با حذف برچسب "پرید" دیگر هیچ تفاوت بارزی بین کالاهای موجود و کالاهای فروخته شده از نظر ظاهری وجود نخواهد داشت که به نظر ما وجود تفاوت‌های بیشتر در این بخش تجربه کاربری را در خصوص تفکیک کالاهای فروخته شده با کالاهای موجود افزایش میدهد که نتیجتا کاربر سریع‌تر می‌تواند کالایی را برای خرید پیدا کند.آیکن‌های نا‌مناسبدر نوار بالا سمت چپ در صفحه سبد خرید شما با یک آیکن Refresh‌ رو‌به‌رو خواهید شد که اگر برای بار اول بر روی این دکمه کلیک کنید خواهید دید که کل سبد خریدتون خالی میشه و تمام آیتم‌های داخلش حذف میشه. حالا این مورد رو در حالتی تصور کنید که بین این همه آیتم‌های متنوع شما چندین آیتم رو به سختی انتخاب کردید و به صورت اتفاقی یا از سر کنجکاوی تو صفحه خرید بر روی این آیکن کلیک کردید. یا تو یه حالت بدتر ممکنه وقتی شما اینکار رو انجام میدین در همین حین آیتم موردنظر شما توسط شخص دیگه‌ای خریداری بشه. پس انتخاب آیکن‌های مناسب در طراحی اهمیت ویژه‌ای داره و کم‌توجهی بهش میتونه تجربه کاربری بدی رو برای کاربران به همراه داشته باشه.اهمیت انتخاب آیکن مناسبفاکتور نهایی قبل از پرداختپس از انتخاب محصولات زمانی که میخواید نسبت به پرداخت اقدام کنید و فرآیند خرید خودتون رو تکمیل کنید وارد یک صفحه‌ای میشید که یک سری اطلاعات اضافه به شما نشون میده و در واقع بیشتر باعث سردرگمی شما میشه. در زیر هر کدوم رو به صورت مختصر با هم بررسی میکنیم: بنر اصلیدر این صفحه اولین چیزی که شما خواهید دید یک بند با عکسی استاتیکو در عین حال بی‌ربط به هر یک از کالاهایی که برای خرید اقدام کردید.فاکتور نهاییدر این بخش بیشتر کاربرانی که با آن‌ها صحبت کردیم انتظار وجود لیستی از کالاهایی که برای خرید انتخاب کرده‌ بودند را داشتند که متاسفانه در این بخش تنها دو قیمت با عنوان‌های "قیمت آیتم" و "مبلغ پرداخت" وجود دارد که به ترتیب مجموع قیمت آیتم‌های انتخابی و مبلغ قابل پرداخت با احتساب تخفیف و سایر هزینه‌ها می‌باشند. تجدید نظر در طراحی این بخش و بهبود عملکرد و فرآیند یکی از مهم‌ترینی نکاتی بود که در بازطراحی به آن توجه شد. اهمیت و جایگاه دکمه‌ "اعتبار کمدایی"بخش بعدی که در این صفحه قرار دارد بخشی برای وارد کردن "کد تخفیف" و بخشی برای استفاده از "اعتبار کمدایی" است که از نظر ظاهری اهمیت یکسانی را به کاربر القا میکنند و در عین قرارگیری ‌آن‌ها در کنار یکدیگر این مفهوم رو به کاربر القا میکند که ممکن است این در گزینه به یکدگیر مربوط باشن در صورتی که دکمه دوم با توجه ماهیت خود "پرداخت وجه" میبایست در کنار دکمه اصلی صفحه که کاربر را به درگاه بانکی هدایت میکند قرار میگردفت. تا کاربر در هنگام پرداخت بتواند گزینه‌های پیش رو برای پرداخت را بررسی نماید. درگاه پرداختنمایش پیغامی با مضمون تضمین پرداخت در صورت استفاده از درگاه‌ موجود در کمدا بسیار خوب است اما تغییر در نحوه نمایش با توجه به ماهیت هشداری گونه متن میتواند توجه بیشتری را نسبت به الان به خود اختصاص دهد چرا که یادآوری این نکته در هر بار خرید به کاربران خالی از لطف نیست.نظر کاربرانوجود اسلایدری با عنوان نظر کاربران در این بخش با توجه به عدم ارتباط آن به ماهیت کلی صفحه میتوانست در فرآیند باز طراحی مورد توجه قرار بگیرد چرا که اگر وجود این بخش را اعتماد سازی در نظر بگیریم کاربرانی که به این بخش وارد میشوند عموما آیتمی را انتخاب کرده و قصد پرداخت وجه مورد نظر خود را دارند بنابراین اعتماد مورد نظر برای استفاده از سرویس در آنها انجام شده و لازم نیست این اعتماد بار دیگر در این صفحه به آنها یادآوری شود.نام درگاه پرداختانتخاب درگاه پرداخت در فرآیند خرید یکی مواردی است که میتواند احساس اطمینان را به کاربر انتقال دهد که پرداخت وجه از طریق یکی از سرویس‌های شناخته شده در امر پرداخت انجام میشه و در صورت بروز هرگونه خطا قابل پیگیری است و علاوه بر اون کاربر این امکان رو داره تا از بین درگاه‌های موجود درگاهی رو انتخاب کنه که ترجح بیشتری نسبت به اون داره. اما این مورد با توجه به اینکه کمدا از یک درگاه بانکی بیشتر پشتیبانی نمیکنه زیاد مورد اهمیت نیست اما ذکر نام درگاه "زرین پال" باعث میشه تا اطمینان خاطر قبل از کلیک در کاربر ایجاد بش و کاربر با اعتماد بیشتری فرآیند خرید رو تکمیل کنه.جستجواین بخش که به صورت کلی تشابه بسیاری با بخش Explore در اینستاگرام دارد در نگاه اول یک تجربه کاربری آشنا را به کاربران القا میکنن چرا که برخی از کاربرانی که برای تست اپلیکیشن از آنها درخواست کرده بودیم به رسم عادت در اینستاگرام برای مشاهده سریع‌تر تصویر یک محصول، در این بخش با نگه داشتن انگشت بر روی آیتم‌ها انتظار بزرگ شدن تصاویر را داشتند که این مورد در کُمُدا پیشبینی شده بود. اما خب این صفحه با وجود اینکه در نگاه اول احساس استفاده از اینستاگرام را در شما زنده میکند با کمی جستجو متوجه میشوید که برخی از بخش‌ها تفاوت بسیاری با تجربه کاربری اینستاگرام دارد. که در ادامه به صورت مجزا هر یک را بررسی خواهیم کرد:بخش جستجو در کمداجستجوی افرادبرای جستجوی افراد شاید بنظر برسد که جستجوی نام کاربر در نوار جستجو شما را به نتیجه مطلوب میرساند اما باید خاطر نشان کنم که شما در این نوار ابزار تنها میتونید آیتم‌های مختلف رو جستجو کنید و برای پیدا کردن کاربران می‌بایست از بخش زیرین نوار جستجو وارد گزینه "هم سلیقه یابی" بشید و در اونجا نام و نام خانوادگی کاربر مورد نظر خودتون رو جستجو کنید. این گزینه به قدری خارج از انتظار کاربران مورد نظر ما بود که این برخی از آن‌ها در تلاش سوم یا چهارم تونستن وارد این بخش بشن. برندهادر این بخش شما این امکان رو دارید که آیتم‌های موجود در صفحه رو براساس برند مورد نظرتون فیلتر کنید که برای خیلی از کاربران امکان بسیار جذابی رو فراهم میکنه اما نکته‌ای که این بخش رو قابل تامل میکنه اینه که شما در هنگام ثبت یک محصول جدید امکان انتخب برند مورد نظرتون رو ندارید و برند‌ها به صورت دستی و توسط هر کاربر در سیستم ثبت میشه. بنابراین برندی مثل Zara میتونه به روش‌های مختلف برای محصولات مختلف مورد استفاده قرار بگیره برای مثال این برند رو میتونیم حداقل به سه صورت Zara، زارا، ZARA برای محصولات ثبت کنیم که پیچیدگی رو برای کاربران و همین‌طور برنامه‌نویس‌ها به همراه دارد. دوستامدر این بخش شما میتونید محصولاتی رو که دوستاتون در کمدشون قرار دادن رو ببینید که بنظر ما این بخش میتونست ظاهری مشابه به صفحه اصلی جستجو یا حداقل ظاهری نزدکی‌تر به اون داشته باشه در صورت ادقام این بخش با صفحه اصلی جستجو یکی از بخش‌هایی که میتواند کاربر را از هدف اصلی جستجو دور کند کم ‌میشود در نتیجه کاربر راحت‌تر میتواند به هدف اصلی خود برسد. نشان‌ها و افتخارات کاربر در کمدایکی از کارهای بسیار جالبی که کمدا برای کاربران انجام داده تا Interaction کاربران رو با اپلیکیشن بالا ببره استفاده از یک سری مدال یا Badge برای هر کاربر هست که هر کدوم از اون‌ها با توجه به مدت و فعالیت‌هایی که کاربر در سیستم انجام میده، بهش تعلق میگیره. بودن این مورد برای هر کاربر بسیار جذابه چون دوست داره زودتر این مدال‌ها رو در پروفایلش ببینه اما مواردی برای این بخش قابل بهبوده که در زیر اون‎ها رو با هم بررسی میکنیم:چه مدال‌هایی میتونم بگیرمنکته اولی که بنظر ما رسید این بود که خب اصن آیا لیستی وجود داره که کاربرای اپلیکیشن با مراجعه به اون بدون دقیقا هر کدوم از این مدال‌ها تحت چه عنوانی به کاربران تعلق میگیره؟ برای نمونه در یک سرویس مثل StackOverflow که برای کاربران از همین سیستم استفاده میکنه شما در ناحیه کاربری خودتون میتونید لیست این مدال‌ها رو ببینید و برای گرفتن هر کدوم تلاش کنید. مثلا من خودم برای گرفتن مدالی تحت عنوان "ویراستار" دو روز متوالی سعی میکردم تا پست‌هایی که بنظرم نیاز به بهبود داره رو ویرایش کنم. به همین دلیل وجود چنین لیستی از تمام این مدال‌ها در اپلیکیشن احساس میشه. مدال‌هایی که گرفتیم چه معنایی دارناگه بتونیم از نبود لیستی برای تمامی این مدال‌ها چشم پوشی کنیم، دیگه نمیتونیم از این مورد چشم‌پوشی کنیم که مدال‌های گرفته شده توسط هر کاربر به چه علتی بهش داده شده. مثلا اگر مدالی تحت عنوان فروشنده برتر در سیستم وجود داره باید یک توضیح برای اون به کاربر داده بشه که مثلا با فروش بیش از ۵۰ آیتم این مدال به کاربر داده شده است.افزودن آیتمافزودن آیتم در اپلیکیشنی مثل کمدا یکی از مهم‌ترین بخش‌ها محسوب میشه چرا که به کابران اجازه میده تا هر کدوم کالا‌های خودشون رو در حساب کاربریشون منتشر کنن یعنی دقیقا کاری که کُمُدا براش ساخته شده و تجربه کاری مناسب به همراه رابط کاربری جذاب میتونه تو برآورده کردن این هدف با کاربران کمک کنه. ما هم به کمک چندتا از دوستان این بخش رو بررسی کردیم و ازشون خواستیم تا چندین کار رو انجام بدن و مواردی که بنظرشون قابلیت بهبود داشت رو باهامون در میون بذارن که در زیر لیستی از این موارد با هم مرور میکنیم: انتخاب عکسهنگامی که شما وارد بخش "کمد بساز" اپلیکیشن میشید با یک صفحه رو‌به‌رو میشید که از یک متن و یک آیکن در وسط صفحه استفاده کرده اما موردی که بعضا باعث سردرگمی کاربران شده بود عدم مشخص بودن قابلیت کلیک بر روی این بخش است یعنی بعضی از کاربرایی که ازشون درخواست کرده بودیم تا آیتمی رو در حساب کاربری خودشون منتشر کنن اول نمیتونستن پیدا کنن چجوری باید عکس بگیرن و بدتر از اون برخی از کاربران دکمه اصلی پایین صفحه رو به جای دکمه مورد نظر کلیک میکردن.ورودی‌های متندر مرحله بعد شما با تعداد زیادیی فیلد متنی رو‌به‌رو میشید که ازتون میخواد تا اطلاعات تکمیلی برای محصول خودتون وارد کنید. بعضی از فیلدها در پایین خودشون یک شمارنده عددی دارن که تعداد کاراکترهای وارد شده رو نشون میده و معمولا وقتی به شما اجازه وارد کردن کاراکتر بیشتر از تعداد مشخص شده رو نمیدن اما در کمدا این مورد اصلا بررسی نمیشه و بعد از رد شدن از مقدار مشخص شده توسط شمارنده شما همچنان میتونید به تایپ کردن ادامه بدید. مورد بعدی تعداد کاراکترهای مشخص شده است مثلا برای فیلد "عنوان" مقدار ۳ درنظر گرفته شده که این تعداد برای کلمات منطقی بنظر میرسه اما ۳ کاراکتر اصلا منطقی نیست. انتخاب سایز و برندبرای ثبت سایز و برند همونطور که در بالا بهش اشاره کرده هیچ مقادیر از پیش تعریف شده‌ای در سیستم وجود نداره و خب برندی مثل Zara‌ اگه توسط کاربر بخواد برای یک محصول ثبت بشه امکان وارد کردن به چندین روش مختلف رو داره.پس چه بهتر که برای مواردی مثل این از فیلدهای از پیش تعریف شده در سیستم استفاده کنیم تا هنگام فیلتر کردن هم بتونیم ازشون استفاده کنیم. اما خب موردی که هست حتما میگید خب همه‌ی برندهارو که نمیشه در سیستم ثبت کرد و هزاران برند مطرح و غیر مطرح در زمینه لباس وجود داره خب این بخش هم قابل حل هست راه حل اول و در واقع ساده‌ترین راه حذف این بخش هست ? اما خب راه حل بهتر برای این مورد اضافه کردن یک بخش به پروفایل هست که در اون به کاربران اجازه میدیم تا با ثبت برند‌هایی که در مورد لباس میشناسن هم اطلاعات کمدا رو تکمیل‌تر کنن و هم موقع ثبت یک محصول بتونن از امکان انتخاب استفاده کنیم و در صورتی که یک محصول به توضیحات بیشتری نیاز داشت در بخش توضیحات اون مورد توسط کاربر توضیح داده بشه. تعداد فیلدهانکته‌ بعدی که بنظرمون رسید تعداد فیلدها موجود در یک صفحه بود. در هنگام طی کردن فرآیند ثبت یک محصول شما در مرحله اول تنها باید یک فیلد یعنی تعدادی از عکس‌های محصول رو در سیستم وارد کنید اما در مرحله دوم این لیست به یکباره از ۱ به ۹ افزایش پیدا میکنه پس چخ بهتر که با کاهش یا افزایش مراحل به کاربر کمک کنیم تا بتونه تجربه کاربری بهتری در سیستم داشته باشه. بخش مدال‌ها و صفحه اصلی پروفایلپروفایل کاربریبخش پروفایل در هر اپلیکیشنی یکی از مهم‌ترین بخش محسوب میشه چرا که میزان فعالیت کاربران و تعامل اون‌ها با سیستم در این بخش رقم میخوره برای مثال شما وقتی وارد حساب کاربری خودتون میشید میخواد در کمترین زمان ممکن به بخش تنظیمات دسترسی داشته باشید، خریدها قبلی خودتون رو ببینید، وضعیت کیف پولتون رو بررسی کنید و کلا هر کاری که به حساب کاربریتون مربوط میشه به راحت‌ترین شکل ممکن پیدا کنید.اپلیکیشن کمدا هم تا حدودی دسترسی به هر یک از این بخش‌ها رو برای شما راحت کرده و با در نظر گرفتن یک منو با گزینه‌های مختلف در صفحه پروفایل به شما کمک میکنه تا بتونید هر چه سریع‌تر به این بخش‌ها وارد بشید اما خب با کمی بهبود در این بخش دسترسی ما به این صفحات در مقایسه با حالت فعلی راحت‌تر هم خواهد شد.به نظر ما کمدا در صورت الگو برداری از اینستاگرام برای بخش پروفایل علاوه بر فراهم کردن یک رابط کاربری آشنا برای کاربران خودشون، میتونست یک تجربه کاربری کاربری خیلی بهتر رو برای اونها فراهم کنه چرا که کاربر در هر تب میتونستن تنها با یک کلیک بین بخش‌های مختلف جابه‌جا بشه و علاوه‌بر اون در هر یک از تب‌ها اطلاعات مربوط رو به صورت مفصل ببینه اما در طراحی فعلی برای نمونه شما با رفتن به بخش سابقه خرید دیگر امکان دسترسی به بخش آیتم‌ها را نخواهید داشت و تنها با بازگشت به صفحه پروفایل مجددا قادر هستید تا به بخش آیتم‌ها دسترسی داشته باشید.چت و سوالات متداولهمون طور که در ابتدا گفتم یکی از امکانات جالب اپلیکیشن کمدا بخش چت این سرویس هست که به کاربران اجازه میده تا اگر در مورد هر یک از محصولات سوالی داشتن بتونن با فروشنده محصول وارد گفتگو بشن و سوالات خودشون رو به صورت مستقیم از فروشنده کالا بپرسن. نحوه دسترسی به این بخش هم از طریق یک دکمه در بالای صفحات تامین شده اما نکته‌ای که در مورد این بخش وجود دارد اینه که وقتی شما روی اون دکمه کلیک میکنید و وارد صفحه مورد نظر میشید چند گزینه دیگه برای شما در دسترس هست. این گزینه‌ها شامل نظرات ، کمک و پیام‌های کمدا میشه.در بخش نظرات شما این امکان رو دارید که دیدگاه‌هایی که در اپلیکیشن تبادل میکنید رو ببینید و مدیریت کنید.در بخش پیام‌های کمدا شما باید منتظر خبرهای جدید از سمت اپلیکیشن باشید تا اگه یه موقع اپدیت جدید به سیستم اضافه شد یا در بخش قوانین تغییرات رخ داد از این طریق شما رو آگاه کنن. و در نهایت در بخش کمک شما میتونید یک سری سوالات از پیش تعریف شده خصوص بحث مالی خرید و فروش در این اپلیکیشن و همینطور سوالات مرتبط با قرار دادن محصولات رو ببینید. اما از اونجایی که کاربران معمولا دوست دارن با تعداد کلیک کمتر به هدف خودشون برسن ما بهتر دیدم که در با طراحی زیر مجموعه بخش کمک یعنی بخش "سوالات مالی" و "سوالات آیتم" رو هم به صفحه اصلی و در کنار نظرات منتقل کنیم تا کاربرا دسترسی سریع‌تری داشته باشن اما از اونجایی که این بخش از نظر ماهیت کمی با گزینه‌های دیگه متفاوت هستن باید به نحوی از سایر گزینه‌ها جدا میشدن که اون هم در طراحی لحاظ شد. این کار به کاربرایی که ما ازشون خواسته بودیم تا یک فرآیند رو انجام بدن کمک کرد تا سریع‌تر به هدف خودشون برسن و خیلی راحت‌تر بتونن وارد هر یکی از بخش‌های مربوطه بشن.نکته آخراین مقاله تنها به جهت بررسی رابط کاربری اپلیکیشن کُمُدا نوشته شده و یک نسخه از این چندین ماه قبل برای دوستان کمدا ارسال شده تا در صورت تمایل ازش استفاده کنن طراحی‌های انجام شده بر روی این سرویس به صورت جداگانه برای همه در دسترس خواهد بود تا بتونن ازش استفاده کنن. برای دانلود طراحی انجام شده میتونید روی لینک زیر کلیک کنید یا بهم ایمیل بزنید: دانلود طراحیسایر مطالب مرتبط http://vrgl.ir/nqP2c http://vrgl.ir/hsvl6 امیرحسین دوزنده امیرحسین دوزنده Wed, 30 Oct 2019 11:27:20 +0330 https://virgool.io/@amirzenoozi72/some-of-the-favorite-persian-and-english-youtube-channels-fgef0gw4eocz یوتیوباگر اهل دیدن محتوای خوب ویدئویی باشید حتما با یوتیوب آشنایی دارید. یوتیوب یک شبکه اشتراک محتوای ویدیویی هست که تولیدکنندگان محتوا در بخش های مختلف بر روی این شبکه فعالیت میکنن و علاوه بر تولید محتوا از طریق این پلتفرم میتونن کسب درآمد هم داشته باشن البته این بخش کسب درآمدش رو برای تولید کنندگان داخل ایران خیلی جدی نگیرید دلیلش رو هم فک میکنم بتونید حدس بزنید خودتون و لازم به گفتنش نباشه.تولید محتوا برای این رسانه اونقدار هم که فک میکنید کار ساده‌ای نیست چرا که شما باید درک درستی از مخاطب خودتون داشته باشید. بدونید کانالتون قراره پیرامون چه موضوعاتی صحبت کنه و به طور کلی از قبل براش برنامه ریزی کرده باشید حالا ما تو این مقاله میخوایم برخی از حساب‌هایی که محتوایی برنامه ریزی شده در کانالشون قرار میدن رو با هم بررسی کنیم و با هرکدومشون به صورت جداگانه آشنا بشیم.کانال Mahshidtopiaاولین کانالی که میخوام بهتون معرفی کنم، کانال Mahshidtopia است که در واقع یک کانال سبک زندگی هست و در مورد موضوعات مختلف مثل مهاجرت و تجربه‌های زندگی و خیلی موضوعات دیگه که میتونه به درد اکثریت آدما بخوره صحبت میکنه مهشید کانالش رو تازه شروع کرده و در زمانی که این پست منتشر شده فقط 9 تا ویدئو معرفی کرده ولی تو هر کدوم از این ویدئوها در مورد موضوعات مختلفی صحبت کرده در بین این موضوعات میتونید ویدئوهایی در ارتباط با "نحوه درست خرید کردن" یا "تجربه‌های شخصی از تحصیل در اروپا" و ... ببینید. بنظرم اگه دوست دارید تا از تجربه‌های دیگران بیشتر بدونید و اونارو تو زندگی خودتون استفاده کنید حتما یه سر به این کانال بزنید و یه نگاه به ویدئوهاش بندازید. کانال یوتیوب Mahshidtopiaکانال Mahdiye Mahdizadکانال فارسی بعدی که بنظرم میتونه مفید باشه کانال Mahdiye Mahdizad هست که محتوای کانال رو میتونیم به دو بخش تقسیم کنیم مهدیه در ابتدای کانال، ویدئوهای خودرش رو با محتوای زیبایی، سلامت و آرایش تهیه میکرد. اما بعد از مدتی محتوای کانال به سبک زندگی و اشتراک تجربیات تغییر پیدا میکنه راستی باید بگم که ویدئوهای اولیه کانال به زبان ترکی تهیه شده و بعد از تغییر روند محتوا کانال، زبان مربوط به ویدئوها هم به فارسی تغییر پیدا کرده اما همچنان بنظرم جزو کانال‌هایی هست که با توجه به کمبود محتوای فارسی در یوتیوب خیلی خوب میتونید ازش استفاده کنید. از تجربیاتش تو بخش‌های مختلف زندگی خودتون بهره ببرید.کانال Binoshaاگر دنبال یک محتوای خوب و قوی تو موضوعات مختلف تکنولوژی هستید یا اگه دنبال این هستید که از اتفاقات رویدادهای مختلف حوزه تکنولوژی باخبر بشید و بدونید چه اتفاقاتی افتاده، توصیه میکنم حتما کانال Binosha رو در یوتیوب دنبال کنید. تو این کانال ویدئوهایی با موضوعات مختلف مثل بررسی گوشی‌های هوشمند یا بررسی همایش و رویدادهای در حال برگزاری قرار میگیره و تهیه‌کنندگان این کانال به صورت مرتب و منظم در حال تهیه محتوای ویدئویی هستند تا بتونن مخاطب خودشون رو جذب کنن.بهتون توصیه میکنم حتما یه سر به کانالشون بزنید و یه نگاهی به ویدئوهای تهیه شده بندازید. مطمئن باشید که خوشتون میاد.Branding Photoshoot with Sara Rahimiکانال Sara Rahimiسارا رحیمی بر خلاف دو تا کانال اولی که معرف کردم بیشتر در ارتباط به مهارت‌های حوزه پیشرفت شخصی صحبت میکنه و به شما کمک میکنه تا تو جنبه‌های مختلف شخصیتی و کاری تون فارغ از اینکه برای موفقیت چه هدفی دارید پیشرفت کنید. بنابرین اگه دنبال این هستید که جنبه‌های مختلف شخصیت خودتون رو هرچه بیشتر بهبود بدید، بهتون توصیه میکنم که این کانال رو دنبال کنید.کانال زندگی من در ژاپناین کانال نسبت به همه کانال‌هایی که تا الان بهتون معرفی کردم فرق داره. امید زیرک یه جوان 35 ساله است که در ژاپن زندگی میکنه و از تجربیات خودش از زندگی در ژاپن ویدئو تهیه میکنن تو کانالش میتونید ویدئوهایی به موضوعات مختلف مثل آموزش زبان ژاپنی یا ویدئوهای مرتبط با غذاهای ژاپنی رو ببینید. دیدن این مدل ویدئوها در یوتیوب اونم به زبان فارسی چیزی نیست که خیلی راحت بتونید پیدا کنید پس بنظرم حتمال به کانالش یه سر بزنید و ویدئوهاش رو تماشا کنید. کانال Saman Koosha تو این کانال هم میتونید محتوای ویدئویی خوب در ارتباط به سبک زندگی و تجربیات شخصی سمن رو ببینید که با شما به اشتراک میگذاره. محتوایی تهیه شده در این کانال بسیار متنوع هست و بهتون قول میدم حتما میتونید یک ویدئو با موضوع مورد علاقه‌تون رو بین ویدئوهاش پیدا کنید برای مثال برای من ویدئوهایی که مربوط به سفرنامه میشه و ازش با عنوان "ولاگ" بین ویدئوها یاد شده بسیار جذابه و از دیدنشون لذت خواهم برد.کانال Sadaf Beauty صدف که فعالیت خودش رو از اینستاگرام شروع کرده در واقع یکی از اینفلوئنسرهای مطرح در حوزه آرایش و زیبایی محسوب میشه. صدف معمولا به رویدادهای مطرح دنیای آرایش دعوت میشه و با برندهای معروفی هم کار میکنه تو این کانال میتونید ویدئوهایی در دو دسته مختلف "ولاگ" یا به عبارت دیگه اتفاقات روزمره یک سفر رو ببینید و یا از آموزشی‌هایی در ارتباط با آرایش استفاده کنید. این بلاگر اخیرا هم به عنوان یکی از تاثیرگذارترین اینفلوئنسرهای اینستاگرام انتخاب شده که لینک خبرش رو میتونید در زیر ببینید: https://www.vogue.fr/beauty-tips/article/who-are-the-most-influential-beauty-influencers-in-the-world کانال Mia Playesبین همه کانال هایی که بالا معرفی کردم این یکی خیلی با بقیه فرق داره چون اول در مورد Video Game و جالب‌تر از اون تهیه کننده محتوا یه دختره، میا که اسم واقعیش همچنان معلوم نیست یک استریمر بازیه که تو دانشگاه طراحی صنعتی خونده ولی عاشق بازی و همینطور طراحیه، میا به همراه برادرش معمولا ویدئوهای خودش رو تهیه میکنن واسه همین اگه دنبال ویدئوهایی هستین که اوقات فراغت خودتون رو باهاش بگذرونید بهتون توصیه میکنم حتما به کانالش سر بزنید.Asuh's World کانال یوتیوب کانال Asuhs Worldکانال آسو محتوای انگلیسی داره معمولا اما علتی که من اونو تو این فهرست قرار دادم اینه که آسو خودش یک ایرانیه و با همسر غیر ایرانیش همواره در سفر هستن. سبک زندگی‌ اون‌ها بنظرم چیزیه که در بین ایرانی‌ها خیلی کمه و این یکی از دلایلی بود که بنظرم معرفی کردنش خالی از لطف نبود اما دلیل دیگه‌ای که برای معرفی کردنش داشتم این بود که خودم یکی از دنبال کنندگان صفحه اینستاگرامش هستم و همیشه از محتوایی که تولید میکنه به شدت لذت میبرم علاوه بر اون فیلم‌بردارای خیلی خوبی هم هستن که همین میتونه کیفیت ویدئوهاشون رو نسبت به بقیه در جایگاه بالاتری قرار بده. پس حتما به کانالش یه سر بزنید.محتوایی که میبینید در پیشنهادات آینده یوتیوب تاثیر خواهد داشت.حرف آخربه عنوان حرف آخر میخوام بهتون بگم که از اونجایی که یوتیوب پتانسیل بسیار بالایی در تهیه محتوا ارزشمند داره و از طرف کنترل خیلی خوبی روی ویدئوهای منتشر شده اعمال میکنه معرفی کردن کانال‌هایی با محتوای ارزشمند میتونه یک کمک کوچیک به این کانال‌ها باشه تا اونا هم با علاقه بیشتری به سمت تولید ویدئوهای ارزشمند برن. راستی به دنبال کردن این کانال‌ها به یوتیوب اعلام میکنید که به محتوای فارسی علاقه دارید و خب یوتیوب هم در پیشنهادات آینده‌یی که به شما میده این موضوع رو مد نظر قرار میده و میتونید محتواهایی که بیشتر باهاشون راحت هستید رو ببینید. شما هم اگه کانال‌های فارسی دیگه‌ای رو میشناسید که برای تولید محتوای خودشون دارن زحمت میکشن و در عین حال شاید خیلی شناخته شده نباشن برام کامنت بذارید تو اونا رو هم به لیست بالا اضافه کنم و همه بتونیم ازشون حمایت کنیم. امیرحسین دوزنده امیرحسین دوزنده Tue, 20 Aug 2019 10:40:41 +0430 https://virgool.io/@amirzenoozi72/buttons-in-user-experience-i3asrdwf7rlj دکمه‌ها در تجربه کاربریطراحی اپلیکیشن یا صفحات وب در سایزهای موبایل یا به طور کلی‌تر در سایزهای کوچک چالش‌های بیشتری برای طراح به همراه خواهد داشت که ما در این مقاله یک مورد از این چالش‌ها یعنی استفاده از دکمه‌های نوشتاری در طراحی رو مورد بررسی قرار خواهیم داد. از اونجایی که محدوده انگشت کاربر از نشانگر موس بزرگتر هست، قرار گرفتن بر روی اهداف کوچیک مثلا یک دکمه با نوشته SEND‌ میتونه برای کاربر گیچ کننده و حتی اذیت کننده باشه چرا که در این حالت کاربر نمیتونه نشانه‌های بصری از آن چه را که زیر انگشتش در حال اتفاق هست ببینه و خب این برای یک کاربر عادی اصلا چیز خوشایندی نخواهد بود حالا اگه متن دکمه مورد نظر ما هم به اندازه کافی بزرگ باشه برای مثال به جای استفاده از کلمه Send از کلمه‌ی Send Message‌ استفاده کنیم به کاربر خودمون یک نشانه بصری دادیم تا حداقل متوجه بشه که انگشتش بر روی چه محدوده‌ای کلیک کرده اما خب این نشانه همچنان کافی نیست و لازمه که بهبود پیدا کنه.محدوده قرارگیری انگشتدر این تصویر به خوبی مشاهده میکنید که انگشت بر روی دکمه های مختلف چه محدوده‌ای را میپوشاند. هر چه دکمه متنی شما کوچک‌تر باشد بیشتر کاربر را مجبور به دقت می‌کند چرا که کاربر میخواهد مطمئن شود که دکمه درستی را مورد هدف قرار میدهد بنابراین برای رسیدن به هدف می‌بایست انرژی بیشتر را مصرف کنی.به عبارت دیگه شما میتواند با قرار دادن لبه‌هایی برای دکمه خود به کاربر کمک کنید تا راحت‌تر بر روی دکمه مورد نظر کلیک کنید در این حالت دیگر کاربر لازم نیست تا انرژی زیادی را صرف پیدا کردن محدوده دکمه موجود در صفحه نماید. استفاده از حروف بزرگ / کشیده در کلماتاگر درحال طراحی صفحات انگلیسی برای محصولات خود هستید حتما به این نکته توجه کنید که نوشته تمام حروف دکمه به صورت UPPERCASE خوانایی متن شما را به شدت کاهش میدهد پس برای بزرگتر نشان دادن دکمه از این سبک نوشتاری استفاده نکنید چرا که خوانایی متن را کاهش میدهید. این نکته را در الفبای فارسی میتوان به حروف کشیده در متن تشبیه کرد برای مثال قرار دادن متن "ارســـــــــــال" به جای "ارسال" درست است که طول نوشته را بزرگتر میکند و دیگر به صورت کامل زیر انگشت قرار نخواهد گرفت اما به همان اندازه خوانایی متن شما را کاهش خواهد داد. پس چه بهتر که برای جلب توجه کاربر بر روی یک دکمه خاص از روش‌های دیگر استفاده کنیم. این مورد میتواند موجب بروز مشکلاتی برای افرادی که از مشکلات خوانایی رنج میبرند، شود چرا که بسیاری از افراد در هنگام خواند به "شکل" کلمات برای خواندن تمام آن توجه میکنند یعنی اگر شما تمام حروف را به صورت بزرگ برای مثال "SEND" و یا به صورت کشیده یعنی "ارســـــــــــال" بنویسید شکل کلمات را از حالت عادی آن‌ها خارج کرده‌اید و کاربران برای خواندن آنها به تمرکز بیشتری نیاز خواهند داشت.تشخیص دکمه‌های نوشتاریبه طور کلی تنها راه تشخیص دکمه‌های نوشتاری در متن تفاوت رنگ و در بعضی موارد تفاوت اندازه متن متن دکمه می‌باشد به همین علت تشخیص تفاوت میان متن اصلی و دکمه مورد نظر برای کاربران عادی بسیار دشوار خواهد بود حال اگر شما کاربران با مشکلات تشخیص رنگ را نیز در نظر بگیرید دیگر هیچ فاکتوری برای تشخیص دکمه اصلی از متن برای این دسته از کاربران وجود نخواهد داشت.دکمه‌های نوشتاری در کنار متن اصلیحال اگر بخواهیم از یک دکمه ثانویه در طراحی استفاده کنیم چه راهکاری مناسب خواهد بود ؟ همونطور که قبل اشاره کردیم استفاده از دکمه‌های نوشتاری به علت خوانایی پایین مورد پسند کاربران قرار نخواهند گرفت پس اگر میخواهیم از دکمه‌های ثانویه در طراحی استفاده کنیم لازم است تا به شیوه‌ای وزن بین دکمه‌های اصلی و ثانویه را تغییر دهیم تا کاربر متوجه تفاوت میان آن‌ها شود اما در کنار آن می‌بایست خوانایی و قابل استفاده بودن این تمایز را در نظر بگیریمراه حل‌هایی که در این مقاله به آن اشاره خواهیم کرد استفاده از دکمه‌هایی با طراحی زیر خواهد بود: طراحی دکمه ثانویهدر تصویر بالا مشاهده میکنید که طراحی که در وسط قرار دارد به علت نوع استایلی که دارد بسیار کاربردی‌تر از دکمه اولی خواهد بود چرا که با توجه به پس‌زمینه دکمه طراحی شده کاربر احساس خوشایندتری برای کلیک بر روی آن خواهد داشت علاوه‌برآن پس‌زمینه متفاوت به کاربر نشانه‌های بصری بیشتری برای انتخاب دکمه خواهد داد. چه زمانی دکمه‌های نوشتاری معنا دار خواهند بود ؟اما همیشه هم استفاده از دکمه‌های نوشتاری در طراحی بد نیستند در واقع اگر شما در طراحی خود نیاز به یک دکمه با درجه اهمیت پایین داشته باشید یا به اصلاح دکمه شما از درجه ثالث برخوردار باشد میتوانید از دکمه‌های نوشتاری برای این امر استفاده کنید چرا که این دکمه‌های معمولا تعداد کلیک بسیار کمی در صفحه دارند و از درجه اهمیت پایینی هم برخوردار هستن. برای درک بهتر این موضوع به تصویر زیر دقت کنید :عکس از حساب Kedavra در Dribbbleدر مثال بالا فارغ از ایرادات یا نقاط قوت طراحی انجام شده در تصویر سمت چپ با کمی دقت متوجه خواهید شد که در پایین دکمه Login as Chester‌ یک دکمه دیگر نیز قرار دارد که امکان حذف حساب را به کاربر خواهد داد اما از آنجا که میزان اهمیت این دکمه در طراحی بسیار پایین است و از طرفی این دکمه نیاز به جلب توجه زیادی ندارد پس به صورت نوشتاری به طرح اضافه شده تا تنها دسترس‌پذیری کاربر را به این فرآیند برآورده کند. در تصویر سمت راست هم مشاهده میکنید که چون ثبت‌نام به حساب کاربری Facebook از اهمیت چندانی برای طراح برخوردار نبوده است به صورت نوشتاری قرار گرفته تا تنها امکان انجام این عمل وجود داشته باشد.این مورد رو در کارهای برخی از طراحان ایرانی هم میتونید ببینید که با هم یک نمونه‌اش رو بررسی میکنیم: عکس از حساب SanazBidad در Dribbbleدر مثال بالا نیز به علت اینکه دو دکمه "ورود" و "ورود از طریق حساب گوگل" از اهیمت بیشتری برخوردار بوده‌اند دارای نشانه‌های بصری بیشتری نسبت به دکمه "فراموشی رمز عبور" برخوردار هستند از طرفی با توجه به ماهیت این دکمه نیازی به ایجاد نشانه‌های بصری با جلب توجه با این دکمه نمیباشد پس استفاده از دکمه نوشتاری مناسب‌ترین انتخاب بوده است.پس درسته که استفاده از دکمه‌های نوشتاری همیشه ساده‌ترین راه و دم دست ترین راه هستند اما استفاده از آن‌ها در جای نادرست باعث ضربه زدن و طراحی و در نتیجه عدم رضایت کاربر از محصول خواهد بود چرا که کاربر را مجبور به تمرکز بیشتر و جستجو برای پیدا کردن هدف کرده‌ایم. منابع استفاده شده در این مقاله: https://uxmovement.com/mobile/why-text-buttons-hurt-mobile-usability/ https://dribbble.com/SanazBidad https://dribbble.com/Kedavra مطالب مرتبط : https://virgool.io/DesignersCommunity/competitor-analysis-for-ux-designer-ppvpesvm4aay https://virgool.io/@amirzenoozi72/create-new-plugin-for-adobe-xd-hhzbu2bpo9vj امیرحسین دوزنده امیرحسین دوزنده Wed, 14 Aug 2019 10:25:11 +0430 https://virgool.io/@amirzenoozi72/create-new-plugin-for-adobe-xd-hhzbu2bpo9vj عکس از صفحه رسمی Adobe XD‌ در توئیتراگه جزو طراحانی باشید که یکم برنامه نویسی بلد هستن یا برعکس جزو برنامه نویس هایی باشید که یکم طراحی بلد هستن و در عین حال برای کارهای مربوط به طراحی از Adobe XD استفاده میکنن حتما میدونید که این برنامه به صورت رایگان هست و تعدادی هم پلاگین و افزونه برای افزایش راحتی استفادهاز این برنامه نوشته شده.حالا ما تو این مقاله میخوایم یکم به API که شرکت Adobe برای نوشتن افزونه معرفی کرده کار کنیم و یک پلاگین خیلی کوچیک رو با هم بنویسیم و در آخر هم چندتا از افزونه هایی که خودم باهاشون کار میکنم و راضی هستم رو معرفی کنم بهتون تا شما هم ازشون استفاده کنیدمقدمات لازم برای شروعبرای اینکه بتونید یک افزونه برای Adobe XD بنویسید با دو تا مورد نیاز هست :دانش اولیه در مورد برنامه نویسی وب خصوصا Jsیک ویرایشگر مثل Atome یا Sublime یا هر چیزی که خودتون باهاش راحت هستینبعد از اون برای شروع کار لازمه تا به آدرس زیر I/O Console خودتون در وب سایت Adobe‌ برید و پلاگین خودتون رو ثبت کنید برای اینکار هم کافیه وارد اکانت خودتون بشید و در لینک بالا بر روی دکمه Create Plugin کلیک کنید و اسم افزونه خودتون رو وارد کنید. بعد از اون وقتی افزونه رو ساختید به صورت خودکار به صفحه افزونه هدایت میشید که در اونجا میتونید یک پروژه خیلی کوچیک رو که برای افزونه شما تولید شده دانلود کنید. حالا برای استفاده از پروژه‌ای که دانلود کردید در محیط Adobe اگر از سیستم عامل Windows‌استفاده میکنید باید به مسیر زیر برید و پروژه رو در اون قسمت از حالت فشرده خارج کنید :C:\Users\%USERNAME%\AppData\Local\Packages\Adobe.CC.XD_adky2gkssdxte\LocalState\ ام اگه از سیستم Mac استفاده میکنید باید به مسیر زیر برید :~/Library/Application\ Support/Adobe/Adobe\ XD/با اضافه کردن پروژه خودتون در این مسیر و سپس اجرای XD‌ میتونید به بخش Plugins‌ برید و افزونه خودتون رو که اضافه شده مشاهده کنید. اما بهتره یه نگاهی به ساختار اولیه افزونه داشته باشیم تا بدونیم دقیقا به چه شکلی باید عمل کنیم.نگاهی به ساختار اولیهوقتی به پوشه افزونه خودتون دقت کنید در حالت اولیه ما یک فولدر Images‌ داریم که شامل آیکن های مرتبط به افزونه هستن که شما میتونید اون رو با تصویر دلخواه خودتون و در سایزهایی که موجود هستن جایگزین کنید اما علاوه بر این افزونه ما شامل یک فایل main.js و یک فایل manifest.json میشه که فایل اول در واقع فایل اصلی افزونه یا به عبارت دیگه منطق اصلی افزونه شماست و فایل دوم تنها شامل اطلاعات و تنظیمات اصلی خود افزونه میشه. بررسی فایل Manifest.JSON بیاید با هم یک نگاه دقیق‌تر به این فایل داشته باشیم تا بدونیم اگه نیاز به تغییر در این بخش بود دقیقا باید چه کاری انجام بدیم. برای اینکه خوانایی این بخش بیشتر باشه من یک تصویر از محتوای فایل رو در این بخش قرار میدم و جلوی هر خط توضیحات مربوط بهش رو مینویسم و در ادامه بخش‌ها مهم‌تر مثل ایجاد منو و Hotkey رو به صورت مجزا توضیح میدم. فایل Manifest.Json در یک نگاهفایل بالا تقریبا یک فایل کامل با کلیه تنظیمات مربوط به این فایل میباشد که شما میتوانید مقادیر هر فیلد رو با مقادیر دلخواه خود جایگزین نمایید. اما همانطور که در تصویر بالا مشاهده میکنید شما می‌بایست برای هر آپدیتی که برای افزونه خود درنظر میگیرید علاوه برا تغییر نسخه افزون یک سری توضیحات درباره آپدیت جدید نیز به کاربران ارائه کنید تا کاربران از تغییرات احتمالی افزونه شما با خبر شوند.همچنین شما میتوانید برای افزونه خود Hotkey های مختلف تعریف کنید تا عملکردهای مختلف افزونه شما از طریق صفحه‌کلید نیز در دسترس کابران باشد اما باید به این نکته توجه داشته باشید که ممکن است افزونه‌های دیگر نیز از این Hotkeyها در افزونه خود استفاده کرده باشن که در این صورت الویت تخصیص این Hotkey به افزونه‌ای که زودتر توسط کاربر نصب شده باشد خواهد رسید. اما جای نگرانی نیست چرا که افزونه شما به خوبی کار خواهد کرد و این مورد باعث نقص در عملکرد افزونه نخواهد شد. محیط برنامه‌نویسی Adobe XD تقریبا همه برنامه‌نویسا موقع برنامه نویسی برای اینکه نتایج کار خودشون رو ببین از Print‌ استفاده میکنن حالا این مورد در زبون های مختلف دستورات متفاوتی داره اما در زبان جاوا اسکریپت معمولا از Console.log استفاده میکنن اما خب حتما براتون سوال پیش میاد که خب حالا به فرض ما ازش داخل افزونه خودمون استفاده کردیم کجا میتونیم خروجی رو ببینیم ؟ باید بهتون بگم که Adobe XD یه محیط تست و رفع باگ برای افزونه‌های خودش فراخم کرده که از طریق منو زیر خیلی راحت میتونید بهش دسترسی داشته باشید :Plugins > Development > Developer Consoleبا باز کردن این بخش شما میتوانید تمام Log‌های مربوط به افزونه‌های نصب شده روی سیستم خودتون رو مشاهده کنید و درهنگام برنامه‌نویسی ازش برای تست و رفع باگ استفاده کنید. حرف آخرتو این مقاله سعی کردم یه توضیح مختصر درباره شروع نوشت یک افزونه کوچیک برای Adobe XD آشناتون کنم در مقالات بعدی سعی میکنم تا بیشتر وارد بحث برنامه نویسی بشیم و API هایی که برای نوشت یک افزونه در اختیار داریم و باهم بررسی کنیم. اما اگه خودتون علاقه مند هستید هر چه زودتر وارد بخش برنامه‌نویسی بشید و یا به نوشتن یک افزونه فکر میکنید اما نمیدونید از کجا میتونید بیشتر در موردش بخونید من چندتا منبع معرفی میکنم تا ازش استفاده کنید: https://github.com/AdobeXD/plugin-samples https://adobexdplatform.com/plugin-docs/reference/how-to-read.html https://medium.com/adobetech/adobe-xd-plugin-apis-are-here-7d25e39c555b امیرحسین دوزنده امیرحسین دوزنده Fri, 14 Jun 2019 16:33:06 +0430 https://virgool.io/DesignersCommunity/competitor-analysis-for-ux-designer-ppvpesvm4aay Photo by Rawpixel.com from Pexelsبرای شروع یک استارتاپ یا راه اندازی کسب و کار خودتان نیاز دارید تا بتوانید رقبای خود را به صورت کامل مورد ارزیابی قرار داده و نقاط و قوت و ضعف هر یک را شناسایی کنید تا بدین صورت بتوانید میزان ریسک را به حداقل کاهش داده و در موقعیت‌های مختلف تصمیمات مناسب اتخاذ کنید علاوه بر این آنالیز رقبا و محصولات آن‌ها به شما کمک میکند تا بتوانید کاربران خود رو بهتر بشناسید و محصول نهایی را هر چه نزدیک‌تر به خواسته آن‌ها طراحی کنید. ما در این مقاله به چگونگی انجام آنالیز محصول خواهیم پرداخت.اهمیت تحلیل و آنالیز رقبا در چیست ؟به طور کلی برای شروع یک استارتاپ و ارائه یک محصول جدید آنالیز محصولات و رقبا یک نیاز اساسی است چرا که شما با انجام این فرآیند میتوانید با دست گذاشتن بر روی نقاط ضعف رقبای خود و افزودن آن‌ها به نقاط قوت محصول خود نظر مشتریان را به خود جلب کرده و هر چه بیشتر سهم خوپ را از بازار افزایش دهید. این ارزیابی های شما میتواند به بهبود تجربه کاربری در فرآیند استفاده از محصول نیز کمک کند تا مشتریان شما نسبت به رقبا به تجربه کاربری بهتری از محصول نهایی شما استفاده کنند، اهیمت این نکته کوچک را میتوانید در یک نقل قول از Daniel Newman ببینید: اگر شما به داده هایی که نشانگر این است که کجا در مورد تجربه کاربری و تجربه مشتری اشتباه می کنید توجه نداشته باشید، مشتری ازسایت، فروشگاه و اپلیکیشن شما خارج می شود. مسلما موردهای در دسترس زیادی وجود دارند که مشتری می تواند آنها را انتخاب کند. در نتیجه تحلیل رقبا نه تنها به شناسایی نقط ضعف رقبا کمک میکند بلکه به شما این امکان را میدهد تا از این نقاط شعف به نفع خود استفاده کنید. چرا تحلیل رقبا رو در حوزه تجربه کاربری نیز انجام میدهیم ؟برخی از دلایلی که انجام این تحقیقات را در حوزه تجربه کاربری ضرروی میکند به شرح ذیل خواهد بود اما این دلایل ممکن است همه دلایلی نباشید و هر محصول بسته به نوع و رقبای موجود دلایل دیگری نیز برای انجام این تحقیقات در این حوزه داشته باشد :درک کلی از جایگاه محصول شما در بین مشتریان و از همه مهم‌تر بازارافزایش دقت در پروسه طراحی رابط / تجربه کاربریآشنایی با نقاط قوت و ضعف رقبامستند سازی فرآیند طراحی و تولید محصول جهت ایجاد تغییرات در آیندهتمرکز بر روی بازار مد نظر و جامعه هدف شکاف و نیاز بازار انجام فرآیند تحلیل رقبا به طراح تجربه کاربری این امکان را می‌دهد تا با مد نظر قرار دادن نیاز کاربران در محصولات رغیب از آن‌ها به عنوان نقطه قوت در محصول جدید استفاده کند مثلا در یک اپلیکیشن فروشگاهی رقیب، برخی از امکانات ساده که میتواند نظر مشتریان رو جلب کند بنا به دلایل مختلف در نظر گرفته نشده است در این صورت شما با اضافه کردن این موارد به محصول خود میتوانید بخشی از نیاز بازار را برطرف کنید این را در نظر داشته باشید که نیاز سنجی درست هنگام عرضه محصول میتواند دغدغه افراد بسیاری رو برطرف کند و آن‌ها ره یک مشتری برای محصول شما تبدیل کند.ایجاد اشتراک‌های متفاوت براساس نیاز بازار برای محصولتوسعه محصولات یا خدماتشما به عنوان یک طراح تجربه کاربری می‌توانید محصول خود را چندین بار طراحی کنید اما باید دقت داشته باشید که این تکرار میبایست حتما با دلیل منطقی انجام شود. زمان که شما شکاف و نیاز بازار را پیدا کردید، میتوانید براساس تحقیقات که انجا میدهید این نیاز را برطرف و بخشی از کاربران را به محصول خود جذب کنید برای مثال ممکن است شما در تحقیقات خود بر روی یک سیستم پخش موسیقی آنلاین به این نتیجه برسید که تعداد زیادی از مشتریان اولیه محصول دانش‌آموزان هستن که از اشتراک رایگان و محدود محصول رقیب استفاده میکنن اما پس از مدتی و با تمام شدن مدت اشتراک رایگان دیگر از سرویس رقیب استفاده نمیکنند در این حالت شما میتوانید با در نظر گرفتن یک اشتراک ویژه و با قیمت کمتر و امکانات محدودتر برای دانش‌آموزان علاوه برا اشتراک‌های ماهانه و سالانه خود این بخش از متشریان را نیز به سرویس خود جلب کنید. تحلیل رقبا چه پیامد هایی میتواند داشته باشد ؟یکی از خطراتی که تحلیل رقبای بیش از حد میتواند برای محصولات داشته باشد این است میتواند توهم "خوب بودن" را برای شما رقم بزند و در این صورت تلاش شما برای "بهتر ماندن" کاهش پیدا میکند و این همان لحظه‌ای است که ممکن است محصولات جدید برای رقابت با شما ایجاد شوند برای فهم بهتر این موضوع میتوانیم به این نقل قول از James R. Lucas اشاره کنیم : شما می توانید در یک سطح باشید، اگر رقیب بالاتر از شما نباشد. اما این به شما اطلاعات لازم برای نوآوری جدید هدایت نمی کند. اگر شما وقت زیادی را به آنالیز کردن رقبا بپردازید، شما ممکن است فرصت ایجاد یک نوآوری خلاقانه از دست بدهید. شما می توانید نگرش خود را برای ایجاد یک استراتژی که یک دارایی یا مهارتی را ایجاد کند که رقبا ندارند، استفاده کنید. اما این به توانایی شما بستگی دارد، نه در تحلیل رقیب! تحلیل رقبا به کمک SWOT این روش به شما کمک میکند که رقبا خود را از ۴ جنبه متفاوت بررسی کرده و به کمک این بررسی نیاز سنجی تجربه کاربری خود را انجام داده و در نهایت برای ارائه یک محصول بهتر از داده‌هایی که جمع کرده‌اید استفاده کنید. این 4 جنبه به شرح ذیل است:تحلیل رقبا به کمک SWOT نقاط قوت (Strength): ویژگی های کسب و کار یا پروژه که مزیتی نسبت به دیگر رقبا محسوب می شود.نقاط ضعف (Weakness): ویژگی های کسب و کار یا پروژه که نسبت به دیگران یک نکته ی منفی به حساب می آید.فرصت ها (Opportunities): عناصر محیطی که کسب و کار یا پروژه می تواند به نفع خود از آنها بهره برداری کند. تهدید ها (Threats): عناصر محیطی که می تواند برای کسب و کار یا پروژه مشکل ساز باشد. شما با بررسی هر یک از رقبای خود در این 4 حوزه که بالا اشاره شد میتوانید تا حد مطلوبی درک درستی از جایگاه هر رقیب در بازار فعلی بدسته آورده و به کمک این اطلاعات استراتژی خود را برای ارائه محصولات انتخاب کنید. مزایای استفاده از تحلیل SWOTمقرون به صرفه : عدم نیاز به دانش فنی یا آموزش تخصصی به تحلیل‌گرانبحث و ثبادل نظر : باعث بحث و تبادل نظر بین کارمندا و سایر افراد مشترک در محصول میشودگزارش تصویری کلی : نتیجه نهایی میبایست به صورت تصویری و معمولا در یک مربع ارائه گردد بینش عمیق‌تر : با تحلیل رقبا به یک بینش عمیق‌تر درباره هریک دست پیدا خواهید کردادغام اطلاعات : تمام اطلاعات کمی و کیفی میتوانند به صورت یکپارچه در این تحلیل درنظر گرفته شوندمقالاتی که برای نوشتن این مطلب ازشون کمک گرفتم : https://medium.com/the-startup-growth/a-beginners-guide-to-swot-analysis-4ff0e3f9bfd2 https://virgool.io/@Iraj.N/-pl32pd2q8wyi امیرحسین دوزنده امیرحسین دوزنده Fri, 07 Jun 2019 17:53:46 +0430 https://virgool.io/JavaScript8/create-custom-music-player-with-js-and-canvas-m7pohorbu3fr https://virgool.io/@amirzenoozi72/web-scraping-with-python-instagram-bmziopx3iojcstom Music Playerاگه به Sound Cloud سر زده باشید که بعید میدونم تا الان این سایت رو ندیده باشید حتما Player جذابش نظر شما رو هم جلب کرده و اگه یکم حس کنجکاوی بیشتری داشته باشید دوست داشتین که بدونید چه‌جوری میشه یه Player خیلی ساده و تا حدی مشابه باهاش رو پیاده سازی کنید. منم چند وقت واسم سوال بود و خیلی ذهنم رو درگیر کرده بود که چه جوری میتونیم یه Player مشابه باهاش بنویسم. واسه همین شروع کردم به گشتن و گشتن تا اینکه یه سری منابع جالب پیدا کردم که بهمون کمک میکنه تا بتونیم یکم عمیق‌تر با Audio Playerهای تحت وب کار کنیم.کتابخانه JsMediaTagsاین کتابخونه‌ای هست که تقریبا من خیلی دنبالش گشتم تا پیداش کنم و یه امکان خیلیی خیلییی خوب برای Player فراهم میکنه و اونم اینه که میتونه Meta-Tag هایی که روی فایل صوتی مثل نام هنرمند، عنوان، نام آلبوم، پوستر،... قرار گرفته رو بخونه و به صورت یه خروجی JSON در اختیارتون قرار بده تا ازش استفاده کنید اینجوری خیلی راحت شما میتونید فارغ از اینکه کاربر شما از مشخصات فایل صوتی اطلاعی داره یا نه پخش کننده‌ای داشته باشید که خودش به صورت خودکار این اطلاعات رو از داخل فایل استخراج میکنه برای مثال من برای پیاده سازی یکی از طرح‌هایی که تو Dribbble دیده بودم از این کتابخونه استفاده کردم تا طرح رو به یک کد پویا تبدیل کنم. پخش کننده موزیک پیاده شده با JsMediaTags https://github.com/amirzenoozi/music-player ماژول Audio در JS این ماژول که خودش به وسیله تقریبا 99 درصد مروگرها پشتیبانی میشه به شما این امکان رو میده تا به وسیله کدهای جاوا اسکریپت یک کامپوننت AudioPlayer رو به صفحه وب اضافه کنید و با توابع مختلفی که داره اونو مدیریت کنید برای مثال یک Controller مجزا مثل تصویر بالا براش طراحی کنید و به طور کلی یک ظاهر خیلی جذاب‌تر براش بسازید. یک امکان خیلی خوبی که این ماژول به برنامه‌نویسان میده اینه که خیلی راحت میتونن AudioPlayer رو به صفحه اضافه کنن و لازم نیست برای کار کردن باهاش مثل VideoPlayer، تگ مربوطه رو با جاوا اسکریپت به اصلاح Select کنن.ولی اگه داخل صفحه خودتون هم یک تگ Audio داشته باشید بازم با Select کردنش به وسیله جاوا اسکریپت خیلی راحت میتونید به این ماژول دسترسی پیدا کنید و کل پخش کننده رو مدیریت کنید. پس از این بابت لازم نیست نگرانی داشته باشید. ماژول Canvas شما به وسیله این ماژول و البته جاوا اسکریپت میتونید المان های گرافیکی طراحی کنید و علاوه بر اون بهشون انیمیشن بدید و یا هر کار دیگه‌ای که دوست دارید و خب المان های گرافیکی تولید شده با این روش بسیار سبک هستن و پردازش سنگینی رو عموما به سیستم تحمیل نمیکنن لینک زیر نقشه حملات سایبری در نقاط مختلف دنیا رو نشون میده که شرکت KasperSky براساس داده هایی که جمع آوری میکنه اون رو به صورت آنلاین به شما نشون میده. https://cybermap.kaspersky.com/ حالا بریم سراغ یکم کد زدن و ببینیم دقیقا برای اینکه یک پخش کننده صوتی شخصی سازی شده داشته باشیم باید چیکار کنیم:اول از همه برای اینکه بتونیم اطلاعات Tag داخل فایل صوتی رو بخونیم باید از JsMediaTags استفاده کنیم که بالا در موردش توضیح دادم واسه همین مستقیم کد مربوط بهش رو قرار میدم و بعد کد رو توضیح میدم. کد نمونه برای کار با JsMediaTagsjتو کد بالا بعد از اینکه اومدیم Player رو انتخاب کردیم (البته شما میتونید با همون Js بسازید و ادامه بدید) فایل صوتی رو که برای پخش بهش دادیم به کتابخونه پاس میدیم و اونم بعد از پردازش مورد نظر یه Object بهمون میده که تقریبا تمام اطلاعات مورد نظرما داخلش هست و میتونیم ازش استفاده کنیم فقط تنها چالشی که داره نمایش Cover فایل هست که به صورت Base64 داخل Object قرار گرفته و البته به صورت تیکه تیکه شده که خب اینم خیلی راحت با یه Loop کوچیک میتونید بهم بچسبونید و ازش هرجایی که لازمه استفاده کنید.حالا بریم سراغ ساختن یک تگ Audio با استفاده از Js که یه نمونه خیلی ساده اش رو میتونید تو عکس زیر ببینید :Js Audio Playerتوی قطعه کد بالا ما اومدیم یه نگ Audio درست کردیم و به وسیله JQuery اونو به یکی از تگ‌های داخل صفحه اضافه کردیم حالا به وسیله Object که برای Audio داریم خیلی راحت میتونیم تمام بخش‌ها مثل صدا، پخش، توقف، عوض کردن src یا هرکاری دیگه‌ای که میخوایم رو باهاش انجام بدیم. برای اینکه بهتر متوجه بشید که چیکارهایی میتونید با این Object انجام بدید هم میتونید لینکی که در بالا معرفی کرده بودم رو مطالعه کنید و هم میتونید به Console کردنش ببینید چه پارامترهایی داخلش هست و شما به گه مواردی دسترسی دارین. در بخش آخر هم باید بریم سراغ Canvas‌ و به وسیله فایل صوتی که داریم یک سری Waveforms تولید کنیم و موزیک پلیر خودمون رو آماده استفاده کنیم. خب حالا برای شروع به کد زیر دقت کنید:‌Canvas Wave Generatorتو کد بالا بعد از اینکه ما Canvas‌خودمون رو Select‌ کردیم و تنظیمات اولیه اون رو انجام دادیم یه تابع frameLooper رو استفاده میکنیم که این تابع هر ۶۰ms یکبار اجرا میشه و وظیفه اینو داره که Canvas‌رو به روز نگهداره و به اصطلاح در هر ثانیه Wave‌ مربوط به اون ثانیه رو نمایش بده علاوه بر اون شما میتونید با تغییر پارامترهای بالا نتیجه نهایی رو به دلخواه خودتون تغییر بدید. درآخر هم لازمه که یک نکته رو بگم و اونم اینه که من کدها رو به صورت عکس اینجا قرار دادم و اونم دلیلش این بود که کدهایی که من نوشته بودم برای این قسمت به صورت پراکنده استفاده شده بود و شما با کپی کردن کدها نمیتونستید به نتیجه دلخواه برسید و خب وقتی عکس باشه به جای کد زدن خودتون یکبار مینویسد اگه علاقه مند باشید. ??مطالب پیشنهادی: https://virgool.io/@amirzenoozi72/web-scraping-with-python-instagram-bmziopx3iojc https://virgool.io/@amirzenoozi72/building-cli-with-python-b25swdkvsg42 امیرحسین دوزنده امیرحسین دوزنده Fri, 03 May 2019 15:17:07 +0430 https://virgool.io/coderlife/building-cli-with-python-b25swdkvsg42 عکس از RealPythonیکم داشتم بین مقاله‌های مختلف گشت میزدم تا رو یه موضوع جدید و چالشی برای خودم کار کنم و اگه چیز خوبی از آب دراومد اینجا با شما به اشتراک بذارم و بین همین جستجوها رسیدم به CLI که برام جالب بود. واسه همین بعد از یکم جستجو بیشتر دیدم که خب کتابخونه‌های خوبی در ارتباط باهاش برای پایتون نوشته شده تا بتونیم اسکریپت های خودمون رو با استفاده از CLI تو محیط سیستم عامل اجرا کنیم که شاید برای کسایی که به Command-line علاقه دارن تا حدودی جالب باشه. اصن CLI چی هست ؟این واژه که دقیقا میشه مخفف عبارت Command-line interface در واقع به شما کمک میکنه تا جدا از Shell Python اسکریپت مورد نظر خودتون رو با Command-line سیستم عامل اجرا کنید و به خروجی مد نظرتون برسید. حالا فرقش با اجرای معمولی اسکریپت چیه خب باید خدمتتون عرض کنم که شما اگر اسکریپت رو به صورت CLI نوشته باشید موقع اجرای برنامه خیلی راحت میتونید یه سری تنظیمات اولیه در هنگام اجرا تعریف کنید تا برنامه براساس تنظیمات CLI شما اجرا بشه برای مثال کد زیر رو در نظر بگیرید تا براتون توضیحش رو بدم : https://gist.github.com/amirzenoozi/f2047e1e80b5d811c305ab6d2b5c8081 شما اگه کد بالا رو داخل فایلی به اسم cli.py ذخیره کنید و با استفاده از Command-Line سیستم خودتون یکی از دستورهای زیر رو اجرا کنید متوجه میشید که به همین راحتی یک CLI خیلی ساده به وسیله پایتون طراحی کردید و حالا اگه دوست داشته باشید میتونید تو پروژه های خودتون ازش استفاده کنید.دستورات Command-Line برای اجرای کدبا اجرای یکی از دستورهای بالا اسکریپت شما اجرا میشه و عبارت "!Hello, World" روی صفحه به نمایش درمیاد که البته شما با عوض کردن پارامتر "!World" در دستورهای بالا میتونید به هر کی دوست دارید سلام بدید ?. حالا یکم حرفه‌ای تر ادامه بدیم و چندتا از کتابخونه‌های معروف پایتون که برای این کار طراحی شده رو با هم بررسی کنیم و ببینیم هر کدوم به چه نحوه کار میکنن :کتابخانه Clickاین کتابخانه Syntax بسیار راحتی داره و به راحتی از طریق Package Manager پایتون یا همون Pip برای نصب در دسترسه از مزیت‌هاش به موارد زیر میشه اشاره کرد:سازگاری با ویندوز ( برخی از کتابخانه‌ها در محیط ویندوز با محدودیت روبه‌رو هستند).پشتیبانی از قابلیت Help که به شما کمک میکنه تا برای هر Command‌ یک توضیح در نظر بگیرید. پشتیبانی از قبلیت محدودیت گذاری Type بر روی دستورات که به شما کمک میکنه تا کدی تمیزتر داشته باشید.کتابخانه Argparse https://gist.github.com/amirzenoozi/3b404a4ca004e19705f7e76371f898a8 قطعه کد بالا یک تابع جمع ساده است که در ورودی دو عدد رو به صورت پارامتر وارد میکنید و نتیجه جمع دو عدد رو در خروجی دریافت میکنید از مزایای این کتابخانه میتونم به موارد زیراشاره کنم:دستورات Command-Line برای اجرای کدنیاز به نصب این کتابخانه از طریق Pip نیست چون جزو کتابخانه‌های پیش فرض پایتون محسوب میشه.مشابه به کتابخانه قبلی میتونید برای هر ورودی یک Type استاندارد در نظر بگیرید.میتونید برای هر پارامتر یک مقدار Help تعریف کنید تا در صورت نیاز کاربر بتونه از توضیحات شما استفاده کنه.کتابخانه PyInquirerاین کتابخونه یکم حرفه‌ای تر از دوتا کتابخونه قبلی هستش و امکانات بیشتری تحت Command-Line در اختیارتون قرار میده که برای مثال لیست چندتا از راه‌هایی که به شما اجاره میده تا دستوراتتون رو وارد کنید در پایین ذکر میکنم:سوالات Yes / No که اگه از خط فرمان استفاده کنید حتما باهاشون برخورد کردید و به صورت Y\n بیشتر نمایش داده میشنسوالات چند گزینه‌ای که کاربر میتونه از بین موارد لیست شده انتخاب کنه که این خودش چند نوع نحوه نمایش داره که تو Github خیلی بهتر و مفصل‌تر توضیح داده. سولاتی با ورودی متن ساده که مثل همون Input ساده‌ای هست که داخل خود Shell پایتون استفاده میکنید. راستی خیلی راحت میتونید از طریق Pip این کتابخونه رو نصب کنید و ازش استفاده کنید و برای مثال من یک قطعه کد برای سفارش پیتزا ? این زیر قرار میدم که تقریبا همه انواع دستورات این کتابخونه رو پشتیبانی میکنه و البته جزو مثال‌های اصلی مستندات خودش هم هست. https://gist.github.com/amirzenoozi/ad7fe17dfd251c55806651acaa0bd9ab کلام آخربرای پایتون چندین کتابخونه دیگه هم وجود دارد که با یه سرچ ساده میتونید بهشون برسید تو این مقاله فقط من سعی داشتم که اولا نحوه نوشتن یک Cli ساده توسط پایتون رو بررسی کنیم و همینطور یکی از مقالاتی که خودم درباره این موضوع خونده بودم به صورت ترجمه و با کمی تغییر دراختیارتون قرار بدم تا شما هم استفاده کنید. https://codeburst.io/building-beautiful-command-line-interfaces-with-python-26c7e1bb54df امیرحسین دوزنده امیرحسین دوزنده Sun, 21 Apr 2019 22:13:23 +0430 https://virgool.io/@amirzenoozi72/web-scraping-with-python-instagram-bmziopx3iojc عکس از RealPythonموقعی که پست "هرکاری یه اسکریپت پایتون داره - آرشیو فیلم" رو نوشتم اصلا فک نمیکردم که ازش اینقدر استقبال باشه نسبت به سایر پست‌هام واسه همین تصمیمی گرفتم ادامه‌اش بدم و اسکریپت‌های کوچیکی که به صورت روزمره یا برای کارهای کوچیک مینویسم رو باهاتون به اشتراک بذارم تا شما هم ازش استفاده کنید و در صورت نیاز بهبودشون، منم خوشحال میشم اگه تغییری تو کدها میدین از طریق Git بهم اطلاع بدید. از اونجایی که شما هم اطلاع دارین اینستاگرام به هیچ وجه گزینه ای برای دانلود تصویر یا ویدئو پست‌ها نداره واسه همین منم با خودم فکر کردم چرا یکم سربه‌سر اینستاگرام نذاریم واسه همین گفتم چه بهتر که یه اسکریپت بنویسم و با گرفتن لینک اون پست، عکس یا ویدئو مربوط بهش رو دانلود کنم اینجوری دیگه لازم نیست تا بین اون همه تگ‌های HTML بگردم دنبال لینک عکس‌ها و ویدئوهاچالش‌های من چی بود:اینستاگرام جز وب سایت‌هایی هست که از React برای Render گرفتن صفحه استفاده میکنه.هیچ یک از Elementهای تولید شده توسط React در اینستاگرام از ID یا Class ثابت پشتیبانی نمیکنن تا اینجوری جلوی ربات‌هارو بگیرن.هر پست به 3 نوع تقسیم میشه : عکس / ویدئو / گالریاز کجا شروع کردم:تو قدم اول لازم بود تا بتونم به DOM دسترسی داشته باشم واسه همین به کتابخونه‌ای احتیاج داشتم تا بتونه با React یا هر کتابخونه دیگه‌ای که از js برای Render گرفتن استفاده میکنه، کار کنه بعد از یکم جستجو رسیدم به Selenium که حتی توانایی این رو داره تا مرورگر شما رو باز کنه و همه کارهایی که میخواد رو به صورت ویژوال روی مرورگر انجام بده.قدم بعدی پیدا کردن الگو بود که به اجبار باید XPATH استفاده میکنم تا بتونم به Element که میخوام دسترسی داشته باشم.قدم سوم تشخص نوع پست بود که با پیدا کردن الگو هر یکی از مدل تا حدودی میتونستم تشخیص بدم با چه نوع پستی روبه‌رو هستمو اما قدم آخر دانلود اون فایل بود که متاسفانه اینستاگرام به ربات‌ها اجازه‌ی دسترسی و باز کردن آدرس فایل‌ها رو نمیده واسه همین مجبور شدم گولش بزنم و از UserAgent جعلی برای دسترسی به آدرس‌ها استفاده کنم.یک گالری حرفه‌ای:موقعی که داشتم رو بخش گالری کار میکردم تا بتونم فایل‌های این مدل پست هارو هم دانلود کنم یه چیز خیلی ناجوانمردانه دیدم و اونم این بود که تو نسخه وب اگه یک پس شامل 6 عکس باشه در Render اولیه فقط 2 عکس اول داخل DOM قرار داده میشن و باقی عکس‌ها یا ویدئو‌ها با جابه‌جا کردن اسلاید به DOM اضافه میشن و باقی مجدد پاک میشن در واقع در هر لحظه شما تنها با 3 Item دسترسی دارید. که خوشبختانه Selenium این قابلیت رو داره که عملکرد کلیک رو روی دکمه‌ها اعمال کنه پس کافی بود با یه الگوریتمی تو زمان‌های مشخص اسلاید رو جابه‌جا کنم تا به سایر Item ها هم دسترسی داشته باشم.حرف آخر:جدای از اینکه خوشحال میشم اگه با اسکریپت کار کنید و مشکل‌های احتمالیش رو بهم اطلاع بدید جا داره از محمدحسین هم تشکر کنم که تو کامل کردن این اسکریپت بهم کمک کرد. و نکته آخر اینکه اینبار به Alt تصاویر اینستاگرام روی نسخه وب بیشتر دقت کنید قول میدم چیزای جالبی ببینید. ??راستی به گیت‌هاب پروژه هم سر بزنید. https://github.com/amirzenoozi/insta-downloader امیرحسین دوزنده امیرحسین دوزنده Tue, 02 Apr 2019 00:27:08 +0430 https://virgool.io/fboard/the-importance-of-programming-in-our-life-nf2rshlkf55p عکس از RealPythonداستان این مطلب از یه وسواس فکری شروع شد. وسواسی که من تو ذخیره فیلم‌هام داشتم و حتما باید کنار خود فیلم، زیرنویس انگلیسی و یه زیرنویس فارسی و همچنین کل پوسترهای مربوط به فیلم رو هم ذخیره میکردم تازه این وسواس به همینجا ختم نمیشد و حتما باید Icon فولدر مورد نظر هم تغییر میدادم و اونو به شکل یه آیکن استاندارد که داشتم تبدیل میکردم.حالا شاید بپرسید پایتون کجای داستانه ؟ باید خدمتتون عرض کنم که ذخیره کردن 20 تا پوستر برای یک فیلم حقیقتا خسته کننده است حالا شما فک کنید ممکنه در یک روز بخواید بیشتر از یک فیلم رو مرتب کنید و این پروسه رو روی تمام فیلم‌های مورد نظر انجام بدید. واسه همین من اومدم به کمک پایتون یه Web Scraper نوشتم که فقط کافی بود آدرس اون فیلم تو سایت مربوط به پوستر رو بهش بدید تا تمام پوسترهای مورد نظر رو از اون سایت به ترتیب دانلود کنه و اسمی که دوست دارین رو بهش بده. این اسکریپت کوچیک خیلی بهم کمک کرد تا با سرعت بیشتری این مرتب‌سازی رو روی فیلم‌ها انجام بدم حالا من سعی میکنم اینجا تو چندتا پاراگراف بخش‌های مختلف کد رو توضیح بدم تا شما هم یکم بیشتر باهاش آشنا بشید: کد من به صورت معمولی از بخش‌های زیر تشکیل شده:گرفتن لینک فیلم در سایت نمایش پوسترهاجستجوی سایت براساس الگو از قبل تعریف شدهدانلود تمامی پوسترهای موجود در صفحه ذخیره‌سازی فایل‌ها براساس نام فیلممن این مطلب کوچیک رو نوشتم تا بگم ما میتونیم بر برنامه‌نویسی تو خیلی از بخش های زندگیمون استفاده کنیم و فقط کافیه تا با عشق یادش بگیریم، اینجوری شما هر کدوم از کارهای روزمره خودتون رو میتونید به طریقی اتوماتیک و علاوه بر سریع‌تر انجام شدن اون کار شما یه زمان زیادی رو در طول روز و هفته واسه خودتون ذخیره کردید .خب از اونجا که بعضی دوستان گفته بودن خیلی بهتر میشد اگه کدهای اسکریپت رو هم قرار میدادم، واسه همین من کدهای پروژه رو به Git منتقل کردم خوشحال میشم اگه ازش استفاده کنید و نظرتون رو بگید. https://github.com/amirzenoozi/poster-finder امیرحسین دوزنده امیرحسین دوزنده Tue, 26 Mar 2019 20:27:28 +0430 https://virgool.io/@amirzenoozi72/wordpress-elementor-part-2-c2njthorawto Elementor Page Builderفک کنم دیگه وقت این باشه که تا یکم فنی‌تر در ارتباط با این پلاگین با هم صحبت کنیم و من از تجربه اول خودم که نسخه جدید وب سایت پارس‌پک بود توضیح بدم.قبل از اینکه بریم سراغ بخش فنی مربوط به Elementor یکم درمورد خود پروژه توضیح بدم شاید بهتر باشه اینجوری شما هم متوجه چالش‌هایی که موقع پیاده‌سازی تو استودیو داشتیم میشین:اول از هر چیزی طراحی UI/UX نسخه جدید بود که باید علاوه بر ظاهر متفاوتش هویت سازمانی پارس‌پک رو تو خودش حفظ میکرد، خب این بخش به من و بچه های تیم فنی مربوط نبود و جزو چالش های تیم طراحی بود که خانم شاپورزاده و آقای گروسیان زحمتش رو کشیدن. طرح نهایی پارس‌پکبعد از اینکه طراحی‌ها کامل شدن نوبت به پیاده سازی نسخه استاتیک پروژه بود، فارغ از ارتباط‌هایی که صفحات و بخش‌های مختلف باید با دیتابیس یا Elementor میداشت و خب این دیگه جزو چالش‌های تیم فنی بود و باید نسخه پیاده‌سازی شده هم به تمیزی طرح میبود. نسخه استاتیک پروژه رو به صورت تیمی ؛ نیما عمرانی، امیر قدیمی و من پیاده‌سازی کردیم و قدم بعدی اتصال به وردپرس بود.برای اتصالش به وردپرس چون قصد داشتیم از یکی از Page Builderهای وردپرس استفاده کنیم به خاطر مزیت‌های Elementor رفتیم سراغ این پلاگین و خب چون بنا بود کل قالب رو به تنهایی پیاده‌سازی کنم شروع کردم به جستجو درمورد اینکه چه جوری میتونم Widgetهای اختصاصی برای Elementor داشته باشیم.تو جستجوی اولیه خودم رسیدم به اینکه این پلاگین داره خیلی عالی از ویجت‌های خود وردپرس پشتیبانی میکنه و منم که تو نوشتن Custom Widgetهای وردپرس مشکلی نداشتم پس دیگه همه چی حله ? که خب کاملا اشتباه میکردم نه که فک کنید Elementor پشتیبانی نمیکنه‌ها نه. من برای این پروژه به یه سری فیلد احتیاج داشتم که باید حتما از ACF برای مدیریتشون استفاده میکردم و خب Elementor و ACF بودن که با هم هماهنگ نبودن، به این صورت یکی از پیش فرض‌های من یعنی استفاده از ACF به صورت جدی به مشکل خورد.تصمیم گرفتم یکم سرچ کنم شاید کسی به این مشکل خورده باشه و بشه به یه شکلی این مورد رو حل کرد و پس از یکم گشتن دیدم که بلهههه فقط مشکل من نیست و خیلی از آدما به این مشکل خورد و البته یک راه حل براش پیشنهاد داده بودن و اونم اضافه کردن یه قطعه کد به هسته اصلی Elementor بود که من زیاد ازش خوشم نمیومد چون برای به روزرسانی‌های آینده هم ما و هم بچه‌های پارس‌پک رو میتونست دچا مشکل کنه. اینجا بود که بیخیال استفاده از ACF تو قسمت ویجت‌ها شدیم و من دوباره شروع به جستجو کردم. درنهایت رسیدم به یک پلاگین خیلی ساده که برای Elementor نوشته شده بود و تقریبا 5 یا 6 تا ویجت کوچیک اضافه میکرد که خب من به هیچ کدوم از ویجت‌ها احتیاج نداشتم واسه همین تصمیم گرفتم این پلاگین رو تست کنم و ببینم میتونم به چیز بدرد بخوری برسم یا نه و خب نتیجه‌اش برای اولین پروژه خیلی خوب بود برای اینکه من اون پلاگین رو تغییر دادم و تمام ویجت‌هایی که احتیاج داشتم رو روی بستر اون پلاگین نوشتم.حالا دو تا کار کوچیک باید انجام میدادم تا مطمئن شم توی به روزرسانی برای این پلاگین که حالا هیچ شباهتی به پلاگین قبلی نداشت مشکلی پیش نمیاد:اول از همه باید پلاگینی که تغییر داده بودم رو به عنوان Needed Plugin به قالب و وردپرس معرفی میکردم تا نیازی به دانلودش نباشه.دوم باید این پلاگین رو از لیست پلاگین‌هایی که برای به روزرسانی چک میشدن خارج میکردم تا به صورت خودکار روش به روزرسانی انجام نشه و اصلا تو پنل مدیرت هم اعلانی برای نسخه جدید ایجاد نکنه.مورد اول رو که قبلا باهاش کار کرده بودم و پیاده‌سازیش کار سختی نبود و مورد دوم هم با یکم جستجو و کمک از دوستان حل شد و حالا میتونستم مطمین باشم که پلاگینی که نوشتیم فقط به صورت دستی قابل به روزرسانی هست و حالا باید میرفتیم سروقت پیاده سازی ویجت‌هایی که برای قابل جدید پارس‌پک بهش احتیاج داشتیم.بعد از این که این مورد حل شد باید میرفتم سراغ طرح و Componentهایی که باید به یه Widget جدا تبدیل میشدن رو شناسایی میکردم اینجوری لازم نبود برای هر قسمت حتما حتما یک Widget جدا نوشته می‌شد بلکه کافی بود تفاوت‌هایی که داشتن رو پیدا میکردم و یه سری تنظیمات در رابطه به اون تفاوت‌ها ایجاد میکردم تا Sectionهای مشابه قابلیت تبدیل شدن بهم رو داشته باشن. اینجوری یه حجم زیادی از کار کم میشد و ما میتونستیم بهینه‌تر قالب رو بنویسیم.تو قسمت بعد یک نمونه کد از نحوه نوشتن Widget رو قرار میدم و قسمت‌های مختلفش رو براتون شرح میدم. امیرحسین دوزنده امیرحسین دوزنده Sat, 26 Jan 2019 10:59:32 +0330 https://virgool.io/wptips/wordpress-elementor-part-1-pse3pmj8d6wb Elementor Page Builderتو قسمت قبلی یکم با خصوصیات کلی Elementor آشنا شدیم، با خودم گفتم بهتره تو این قسمت یکم فنی‌تر و جزئی‌تر قسمت‌های مختلف این پلاگین رو بررسی کنیم تا بدونیم دقیقا چه کاری میتونه واسمون انجام بده و چه کاری رو نمیتونه. این پلاگین بدون هیچ گونه پلاگین جداگانه به شما یه سری ویجت پایه میده که در زیر میتونید لیستی از همشون رو مشاهده کنید : Inner Section HeadingImageVideoText EditorButtonIconGoogle MapsDividerSpacerStar rating Image box Icon box Image gallery Image carousel Icon list Social icons Accordion Tabs Shortcodeلیست کامل ویجت‌های نسخه رایگان و همینطور ویجت‌های نسخه Pro رو میتونید از طریق این لینک مشاهده کنید.حالا بریم سراغ اینکه Elementor چه امکاناتی در اختیار برنامه‌نویس‌هایی که میخوان ازش استفاده کنن قرار میده. شما نه تنها میتونید کل Layout اون Widget که دارین مینویسین رو مدیریت کنید بلکه خیلی راحت میتونید Styleهاش رو هم مدیریت کنید فقط به شرطی که بدونید چه امکانی رو دراختیار مدیرسایت قرار میدین چون بالاخره ممکنه امکانات زیادی که پیش بینی کردید به یکپارچگی طرح شما صدمه بزنید ( مثلا با دادن یه رنگ جیغ به متن توسط مدیر یا نویسنده وب‌سایت ). میتونید در هر لحظه طرح خودتون رو در سه حالت Mobile, Tablet, Desktop مشاهده کنید تا مطمین باشید طرحتون داره بی‌نقص نمایش داده میشه. همینطور میتونید تنظیمات خودتون رو برای همین 3 حالت شخصی سازی کنید که خب این مورد بیشتر وقتی به کارتون میاد که میخواید Styleها رو ویرایش کنید.می‌تونید بخش‌های مختلف تنظیمات خودتون یعنی Style و Layout رو باز به قسمت‌های مختلف تقسیم بندی کنید تا کاربر در هر لحظه فقط تنظیمات اون موردی رو ببینه که داره ویرایشش میکنه. برای مثال میتونید در قسمت Style یک بخش برای تنظیمات Border داشته باشید مثل رنگ، نوع، ضخامت، ... و یک بخش دیگه برای Background و یکی دیگه برای Typography. اینجوری لازم نیست وقتی داریم Border رو درست میکنیم تنظیمات مربوط به Backgroud رو هم ببینیم.راستی تا یادم نرفته باید بگم که Elementor خودش یه سری ویژگی رو به صورت خودکار به سایت اضافه میکنه برای مثال اگر گزینه نمایش Modal رو در بخش تنظیمات انتخاب کرده باشین بعد از اینکه عکس‌ها رو داخل یه تگ <a> قرار دادین و اون رو به منبع عکس لینک کردید Elementor به صورت خودکار وقتی روی عکس کلیک میشه یه Modal زیبا برای نمایش عکس به کاربر نشون میده. یا اگر برای عکس‌ها مقدار Alt رو وارد کنید Elementor به صورت خودکار یه نوار تیره رنگ که حاوی مقدار Alt می‌باشد برای توضیحات بیشتر در مورد عکس به کاربر نشون میده. مثال:نمونه‌ای از کد لازم برای داشتن ویژگی‌های بالابرای خوندن مقدمه این مطلب میتونید از این لینک استفاده کنید. خوشحال میشم نظراتتون رو در مورد این سری از مطلب‌ها بدونم امیرحسین دوزنده امیرحسین دوزنده Sat, 19 Jan 2019 14:16:03 +0330 https://virgool.io/@amirzenoozi72/wordpress-elementor-part-0-s1ec5gnsauax Elementor Page Builderبعد کلی کلنجار رفتن با خودم که میتونم نویسنده خوبی باشم یا نه بالاخره تصمیم گرفتم تا یه مطلب کوچیک از تجربه خودم رو اینجا با شما به اشتراک بزارم.این مطلب در مورد یکی از Page Builderهای نسبتا جدید ولی قدرتمند روی هسته وردپرس به اسم Elementor هست که به مدیران وب سایت و توسعه دهنده‌های وردپرس کمک میکنه تا بتونن با یکم ذوق و سلیقه صفحات مختلفی برای وب سایت آماده کنن. از مزیت‌هایی که نسبت به سایر پلاگین‌ها تو این زمینه داره میتونم به ویرایشگرش اشاره کنم که واقعا ویرایشگر محشری براش طراحی کردن و همینطور Developer Docs بسیار خوبی براش نوشتن تا هر برنامه‌نویسی بتونه روی این بستر ویجت‌های خودش رو بنویسه و ازش استفاده کنه. ویرایشگر Elementorاز نظر بحث تکنیکی و فنی هم باید بگم که کل پلاگین طبیعتا با PHP نوشته شده و برای نمایش View در ویرایشگر تا جایی که من فهمیدم از BackboneJs استفاده میکنه ولی خب اگه به عنوان برنامه‌نویس دارید به این فکر میکنید که برای کار کردن باهاش باید برید و BackboneJs یاد بگیرید باید بگم که تقریبا تو 90 درصد ویجت‌هایی که براش نوشتم اصلا نیازی به این فریم‌ورک نداشتم و فقط با مطالعه اولیه Js میتونید خیلی راحت باهاش کار کنید و به چیزی که میخواید برسید. اگه برای ویجت‌هایی وب سایت‌هاتون از Custom Widget خود وردپرس استفاده کردید و فک میکنید که برای کار با این پلاگین باید یه هزینه مجدد تبدیل این ویجت‌ها رو داشته باشید باید یه خبر خوب بدم و اونم اینکه این پلاگین به صورت کامل از ویجت‌های خود وردپرس پشتیبانی میکنه و نیازی نیست تو کدهاتون تغییری بدید حتی یک خط. حالا این همه از خوبیاش گفتم یکم هم از معیایبی که به چشمم خورد بگم بهتون :اول اینکه من دوست داشتم بتونم اسکریپت‌های Js که برای سایت دارم مثل اسلایدرها توی محیط ویرایشگر هم کار کنه ولی خب المنتور اجازه لود شدن این قبیل اسکریپت‌ها رو توی محیط ویرایش نمیده (یا حداقل من هنوز نتونستم راهش رو پیدا کنم. ?) ولی همه چی عین ساعت خارج از محیط ویرایش کار میکنه.دوم اینکه من دوست داشتم بتونم داده‌هایی که از سمت دیتابیس میگیرم مثل پست‌ها و ... رو هم کامل تو محیط ویرایش به Admin نشون بدم که البته تو تجربه اولم یکم تو این مورد دانش کافی رو نداشتم ولی خب دفعات بعد خیلی راحت تونستم دیتاها رو تو بخش View که با Js بود بدون فرستادن درخواست مجدد به سرور داشته باشم. سوم اینکه ممکنه یکم DOM هایی که تولید میکنه واستون اذیت کننده باشه که خب باید این نکته رو در نظر بگیرید که این پلاگین General Purpose تهیه شده و باید بتونه برای کسایی که برنامه‌نویس نیستن و میخوان باهاش کار کنن هم ابزار خوبی باشه.مورد آخر هم شاید حدس بزنید و اون هم اینه که اگه ماژول خاصی بخواید باید خودتون دست به کد بشید و واسش بنویسید البته این مورد آخر برای برنامه‌نویس‌ها فک نکنم عیب محسوب بشه.در آخر هم بزارید به این سوال جواب بدم که چرا از قسمت 0 شروع کردم ؟باید خدمتتون عرض کنم که خب چون اولین تجربه من تو ویرگول هست نخواستم زیاد اذیتتون کنم و همینطور هم دوست دارم ببینم واکنش‌ها نسبت به این مقاله چی میشه، آیا انرژی مثبتی ازش میگیرم یا نه ؟البته یه نکته دیگه هم که هست اینه که تو این مطلب فقط یه مقدمه از این پلاگین رو مطرح کردم پس نمیشه بهش گفت قسمت 1 . امیرحسین دوزنده امیرحسین دوزنده Mon, 07 Jan 2019 21:05:00 +0330