دوره فشرده آموزش طراحی تجربه کاربری : درس ۱۵

دوره فشرده آموزش طراحی تجربه کاربری : درس ۱۵

از نوشته های من در uxbook.org

ماموریت من در ارائه این ۳۱ درس این است که ، طراحان (یا طراحان مشتاق) بیشتری در طراحی تجربه کاربری شروع به کار کنند. بهترین مکان برای شروع یادگیری هر چیز از ابتدای آن است.

@JoelMarsh


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

تنش بصری یا visual  tension مفهومی است که اگرچه بسیار ابتدایی به نظر می رسد اما استفاده از آن در طراحی به دلیل عملکرد مغز انسان در تمایل به یافتن الگوهای غیرواقعی، می تواند نتایج شگفت آوری به همراه داشته باشد.

تنش خطی (Line Tension)

تصویر اول را به خاطر دارید؟ هشت اردک در یک صف، در این تصویر ما هشت اردک مجزا را نمی بینیم، بلکه یک صف را می بینیم، این پدیده، تنش خطی نام دارد، مشاهده یک خط (صف) یا مسیر، در حالی که چنین چیزی وجود ندارد. مطابق این پدیده، چشمان ما یک مسیر را دنبال می کند تا به انتهای آن برسد، و استفاده از این موضوع می تواند بی نهایت در طراحی سودمند باشد، چرا که اگر در قسمتی از این مسیر یک فضای خالی ایجاد شود، آن قسمت بسیار مورد توجه قرار خواهد گرفت.

تنش کناره ها (Edge Tension)

اگر از تنش خطی بیش از یکبار استفاده شود، نتیجه آن به وجود آمدن شکلی خیالی در ذهن کاربر خواهد بود. در تصویر دوم، اردک ها به گونه ای چیده شده اند که به نظر می رسد در لبه های یک مربع قرار گرفته اند، این چیدمان می تواند به صورت ۱۲ اردک، یا چهار گروه سه تایی از اردک ها در نظر گرفته شود، اما ذهن ما ترجیح می دهد که یک مربع را در این تصویر ببیند؛ در این ساختار می توان با قرار دادن یک آیتم در میان شکل ساخته شده یا فضای خالی روی اضلاع آن، تمرکز کاربر را به آن آیتم جلب نمود.

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

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

منبع : http://thehipperelement.com

لینک مطلب در uxbook.org

Continue Reading

آشنایی با کاربرد اَتریبیوت download در زبان HTML

آشنایی با کاربرد اَتریبیوت download در زبان HTML

از نوشته های من در سکان آکادمی

آشنایی با کاربرد اَتریبیوت download در زبان HTML

شاید هنگام مقایسهٔ HTML5 با نسخه‌های پیشین در ابتدا عناوینی نظیر Storage ،History و Web Workers API مطرح شوند، اما مواردی نظیر اَتریبیوت download نیز در این نسخه وجود دارند که استفاده از آن‌ می‌تواند بسیار کاربردی و سودمند باشد. در واقع، هدف اصلیِ استفاده از این اَتریبیوت جلوگیری از نمایش یک فایل (به عنوان مثال PDF) در صفحهٔ مروگر و ایجاد اطمینان از دانلود شدن آن روی سیستم کاربر است.همان‌طور که می دانید، در بسیاری از مرورگرهای امروزی فایل‌هایی نظیر تصویر، پی‌دی‌اف و غیره در صفحهٔ مروگر نشان داده می‌شوند، اما در گاهی اوقات لازم است تا فایل مورد نظر حتماً دانلود شده و روی سیستم کاربر ذخیره شود که در این صورت یکی از راحت‌ترین سولوشن‌ها، استفاده از اَتریبیوت download در تگ <a> است:

<a href="/images/my-image.jpg" download>

یکی دیگر از ویژگی‌های اَتریبیوت download امکان تغییر نام فایل هنگام دانلود آن توسط مرورگر است که در این حالت دیگر اهمیتی ندارد که فایل مورد نظر شما با چه نامی روی سرور ذخیره شده باشد بلکه به سادگی می‌توان نام فایل را با در نظر گرفتن یک مقدار برای این اَتریبیوت تغییر داد. برای مثال، در تگ زیر نام فایل به result.jpg تغییر پیدا خواهد کرد:

<a href="/images/my-image.jpg" download="result.jpg">

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

لینک مطلب در سکان آکادمی

Continue Reading

دوره فشرده آموزش طراحی تجربه کاربری : درس ۳، معرفی ۵ عنصر اصلی در طراحی تجربه کاربری

از نوشته های من در uxbook.org

ماموریت من در ارائه این ۳۱ درس این است که ، طراحان (یا طراحان مشتاق) بیشتری در طراحی تجربه کاربری شروع به کار کنند. بهترین مکان برای شروع یادگیری هر چیز از ابتدای آن است.

@JoelMarsh


 

۵ عنصر اصلی UX 
روانشناسی ، کاربردپذیری ، طراحی ، کپی ­رایتینگ ، تحلیل

 

اگرچه تجربه کاربری فرآیندی است که خود شامل تعداد زیادی از موارد مستقل و وابسته به یکدیگر می­شود، اما می­توان از بین آن­ها پنج مورد را به عنوان اصلی ترین ارکان پایه­های تجربه­کاربری در نظر گرفت:

  • روانشناسی (Psychology)
  • کاربردپذیری (Usability)
  • طراحی (Design)
  • کپی ­رایتینگ (Copywriting)
  • تحلیل (Analysis)

بدیهی است که معرفی کامل هر یک از عناوین مطرح شده، نیازمند محتوایی مجزا و دقیق است که در آن تمامی جزییات مربوطه نیز مدنظر قرار بگیرند، اما با این وجود در این مطلب سعی می­شود تا با ارایه توضیحاتی کاربردی و سودمند درباره پنج عنصر اصلی تجربه­کاربری با آن­ها بیشتر آشنا شویم:

 

  1. روانشاسی

کاربران دارای سلایق و دیدگاه­های متفاوتی هستند و هیچ الزامی وجود ندارد که طراحی مورد تایید شما از نظر مخاطب نیز قابل قبول باشد، بدین ترتیب ارزیابی دقیق مخاطب نهایی و درک نیازمندی­های وی پیش از شروع پروژه، می­تواند مطمئن­ترین راهکار برای کاهش ریسک­های مربوط به طراحی و استفاده بهینه از منابع مالی و زمان باشد.

پیشنهاد می­شود در راستای موارد مطرح شده، عملکرد کاربر در صفحات مورد نظر در قالب پرسش­های زیر و پاسخ­های آن­ها به دقت مدنظر قرار بگیرند:

  • انگیزه کاربر از حضور در این صفحه چیست؟
  • کاربر تحت تاثیر چه مواردی قرار خواهد گرفت و کدام بخش از احساسات وی بیشتر تحریک می­شوند ؟
  • کاربر برای دستیابی به هدف مورد نظر خود چه کارهایی باید انجام دهد؟
  • در صورت تکرار فرآیندهای ارایه شده، چه عادتی به وجود خواهد آمد؟
  • پس از کلیک کردن چه انتظاراتی باید برآورده شود؟
  • آیا به کاربران اطلاعاتی ارایه می­شود که تا کنون از آن آگاهی نداشته­اند؟
  • آیا این مسیری است که آن­ها مجدد طی خواهند کرد؟ به چه دلیل؟ چندبار؟
  • شما نیازهای کاربر را مدنظر قرار داده­­اید یا دیدگاه خودتان را؟
  • چه پاداشی برای رفتار مناسب ارایه می­شود؟

 

  1. کاربردپذیری

اگر موارد مربوط به روانشناسی را به ذهن ناخودآگاه کاربر مربوط بدانیم، در مقابل مفهایم کاربردپذیری بسیار به فعالیت ­های آگاهانه وابسته است، به عنوان مثال پیچیدگی بیش از حد یک فرآیند، موردی است که به آسانی توسط کاربر درک می شود. (البته این ویژگی در برخی موارد نظیر سناریوهای طراحی شده در مراحل یک بازی متفاوت است، چرا که در این شرایط، پیچیدگی بیشتر لذت بیشتری را برای مخاطبِ بازی به همراه می­آورد.) به طور کلی باید مسیر پیش روی کاربر تا حد امکان ساده و صریح طراحی شود و کمترین وابستگی به سایر بخش­ها در آن وجود داشته باشد.

پیشنهاد می­شود درباره اصول کاربردپذیری پرسش­های زیر و پاسخ­های آن­ها به دقت مدنظر قرار بگیرند:

  • آیا می­توان فرآیند را به گونه­ای طراحی کرد که نیاز کمتری به ثبت داده­ها توسط کاربر در آن باشد؟
  • آیا می­توان تا حد امکان از ایجاد خطا توسط کاربر جلوگیری نمود؟
  • آیا مسیر در ساده­ترین حالت ممکن طراحی شده است یا برای طی کردن آن نیازمند اندکی ذکاوت هستیم؟
  • آیا طراحی به گونه ای است که یافتن هدف موردنظر آسان می باشد، و نادیده گرفتن آن سخت به نظرمی رسد و یا به صورتی است که به صورت ناخود آگاه به دنبال آن باشیم؟
  • آیا طراحی همراه با دیدگاه کاربر است یا در تقابل با آن؟
  • آیا تمامی مواردی که کاربر باید بداند به او ارایه شده است؟
  • آیا انجام فرآیند به سادگی سایر فعالیت­های روزانه است؟
  • آیا در طراحی نیازمندی­ها و منطق کاربران مورد توجه بوده است یا سلیقه طراح؟
  • آیا بدون خواندن راهنما هم می­توان از موارد ارایه شده استفاده نمود؟

 

  1. طراحی

در طراحی تجربه کابری، مفهوم کلمه «طراحی» با آنچه سایر طراحان انجام می­دهند متفاوت است، در تجربه کاربری، مقصود از طراحی، چگونگی کارکرد یک فرآیند و طی کردن مسیر مورد نظر توسط کاربر است که می­توان به دقت آن را مورد ارزیابی قرار داد، از این رو طراحی تجربه­کاربری با مفهوم طراحی در گرافیک بسیار متفاوت است.

برای ارزیابی مفهوم طراحی در تجربه­کاربری، پیشنهاد می­شود پرسش­های زیر و پاسخ­های آن­ها به دقت مدنظر قرار بگیرند:

  • آیا طرح ارایه شده مورد پسند کاربران است و به سرعت به آن اعتماد می­کنند؟
  • آیا کاربر بدون نیاز به ارایه توضیحات تکمیلی متوجه هدف اصلی می­شود؟
  • آیا کاربر متوجه تمایز خدمات ارایه شده با سایر برندهای مشابه می­شود؟
  • آیا طراحی به گونه­ای است که نگاه و توجه کاربر به قسمت موردنظر طراح جلب شود؟
  • آیا رنگ­ها، اشکال هندسی، تصاویر و سایر موارد مورد استفاده به گونه­ای هستند که کاربر را برای دسترسی به موضوع مورد نظر همراهی کنند و جزییات بیشتری را به وی ارایه نمایند؟
  • آیا مواردی که قابلیت کلیک بر روی آن­ها وجود دارد از نظر ظاهری با سایر اجزای خنثی صفحه متفاوت هستند؟

 

  1. کپی ­رایتینگ

تفاوت بسیاری در نحوه نگارش متن برای معرفی یک برند (کپی رایتینگ تجاری) و ارایه متنی متناسب با اصول تجربه کاربری وجود دارد، در مورد اول ساختار متن به گونه­ای است که در آن تصویری مطلوب از سازمان برای مخاطب ترسیم می­شود اما در تجربه­کاربری باید موارد ارایه شده تا حد امکان ساده و صریح بیان شوند، برای آشنایی بیشتر با این موضوع پیشنهاد می­شود پرسش­های زیر و پاسخ­های آن­ها به دقت مدنظر قرار بگیرند:

  • آیا تمامی موارد ارایه شده مربوط به نیازمندی­های کاربر است؟
  • آیا مسیر به گونه­ای طراحی شده است که کاربر پروسه مد نظر را تا پایان تکمیل نماید؟ آیا اهداف کارفرما هم برآورده می­شود؟
  • آیا قسمتی از متن که بیشتر مورد تاکید است از نظر رنگ و اندازه با سایر قسمت­ها متفاوت است؟
  • آیا متن ارایه شده اطلاعات جدیدی به کاربر می­دهد یا تنها تکرار مفاهیم گذشته برای وی است؟
  • آیا متن نوشته شده صریح، ساده و کاربردی است؟

 

  1. تحلیل

آنالیز و تحلیل داده­ها یکی از مواردی است که متاسفانه اکثر افراد فعال در زمینه تجربه­کاربری تسلط کافی بر آن ندارند؛ این بخش یکی از مهمترین ارکان تجربه­کاربری بوده که نه تنها موجب افزایش ارزشمندی مباحث UX می شود، بلکه از وجوه تمایز آن با سایر رویکردهای طراحی نیز به حساب می­آید، از این رو توجه هرچه بیشتر به مباحث مطرح شده در این مرحله می­تواند تضمین کننده میزان موفقیت نهایی پروژه نیز باشد.

در ادامه پیشنهاد می­شود پرسش­های زیر و پاسخ­های آن­ها به دقت مدنظر قرار بگیرند:

  • شما از داده­های موجود برای کشف حقایق جدید استفاده می­کنید یا برای اثبات دیدگاه خود؟
  • شما به دنبال حقایق تاثیرگذار هستید یا دیدگاه­های منفعل؟
  • آیا پیش از تصمیم­گیری نهایی به جمع آوری نظرات مخاطبین پرداخته­اید؟
  • آیا می­دانید کاربران با توجه به چه مواردی تصمیم­گیری می­کنند؟
  • آیا تنها به دنبال داده­های کمی هستید یا کیفیت داده­ها نیز مورد توجه است؟
  • آیا ملاک­های ارزیابی مورد استفاده شده به طور صحیح انتخاب شده­اند؟
  • آیا به دنبال نظرات مخالف و نتایج نامناسب نیز هستید؟
  • چگونه نتایج حاصل از آنالیز داده­ها به شما کمک می­کند؟

 

منبع : http://thehipperelement.com

 

لینک مطلب در uxbook.org

Continue Reading

۷ فاکتور تاثیرگذار در UX

7 فاکتور تاثیرگذار در UX

از نوشته های من در ویرگول

اگرچه هنوز برای بسیاری از صاحبان کسب­ و­کار اهمیت تجربه ­کاربری در شکست یا پیروزی یک مجموعه مشخص نشده است، و بسیاری، تعاریف UX و Usability رو به جای یکدیگر استفاده می­کنند، اما در این مطلب قصد دارم ۷ پارامتری که به گفته Peter Morville می­ شه با اون­ ها UX رو توصیف کرد را به صورت مختصر و مفید معرفی کنم.

Peter Morville یکی از بنیان­گذاران مفاهیم معماری اطلاعات و تجربه ­کاربری است و تاکنون کتاب­های پرفروش بسیاری را در زمینه UX تالیف کرده است، وی همچنین مشاور بسیاری از شرکت­ های بزرگ موسوم به Fortune 500 نیز می­باشد.)

هفت فاکتور تاثیرگذار در UX
هفت فاکتور تاثیرگذار در UX

قبل از هرچیزی یک تعریف ساده از usability داشته باشیم:

Usability which describes to some extent how easy a product is to use

کاربردپذیری به توصیف این موضوع می­ پردازد که استفاده از یک محصول به چه میزان ساده و آسان است.

با توجه به این تعریف، اگرچه usability رو می­ شه یکی از اولین قدم ­های UX دونست، اما UX شامل مفاهیم بسیار گسترده ­تری است که در ادامه با اون ­ها آشنا می­ شیم.

ادامه مطلب…

Continue Reading

Geany: یک ادیتور چُست و چابک

Geany: یک ادیتور چُست و چابک

از نوشته های من در سکان آکادمی

Geany (با تلفظ Genie) یک تکست ادیتور کم‌حجم و سریع است که از تولکیت +GTK با امکانات بیسیک یک IDE استفاده می‌کند. کمترین وابستگی به پکیج‌های جانبی از جمله مهمترین نکاتی است که در دیزاین این ادیتور به آن توجه شده است؛ بدین صورت که Geany می‌تواند در کوتاه‌ترین زمان ممکن و با فراهم‌ کردن محیطی برای نوشتن و اجرای سریع کدها،‌ پاسخگوی نیازهای دولوپرها باشد.

همان‌طور که اشاره شد، سعی شده است حجم کم و سرعت بالا، دو ویژگی بارز این IDE باشند؛ به همین دلیل، Geany کمترین وابستگی را به مواردی نظیر KDE یا GNOME دارد و تنها به لایبرری‌های GTK2 در زمان اجرا نیاز خواهد داشت.

برخی از مهمترین خصوصیات Geany
– هایلایت کردن سینتکس
– کامل کردن خودکار کدهای نوشته شده
– بستن خودکار تگ‌های HTML و XML
– کد نَویگِیشن
– بیلد کردن سیستم برای کامپایل و اجرای کدها
– مدیریت آسان پروژه‌ها
– پشتیبانی از پلاگین‌های جانبی برای افزایش قابلیت‌ها

همچنین لازم به ذکر است که Geany از بسیاری فایل‌تایپ‌های رایج پشتیبانی می‌کند که برخی از مهم‌ترین آن‌ها عبارتند از C ،C# ،C++ ،Clojure ،Fortran ،Go ،HTML ،Java ،Javascript ،Matlab ،PHP و Python.

ادامه مطلب در سکان آکادمی

Continue Reading

Konva.js: لایبرری جاوااسکریپتی برای خلق جلوه‌های گرافیکی دوبُعدی

Konva.js: لایبرری جاوااسکریپتی برای خلق جلوه‌های گرافیکی دوبُعدی

از نوشته های من در سکان آکادمی

Konva یک لایبرری بر پایهٔ Canvas در HTML5 است که با استفاده از آن می‌توان جلوه‌های گرافیکی دوبُعدی را به سادگی در اپلیکیشن‌های موبایل و همچنین نسخه‌های دسکتاپ اجرا کرد.

ایجاد جلوه‌های بصری جذاب‌تر در صفحات وب نظیر استفاده از ترنزیشن‌ها، انیمیشن، اسکیل شدن آبجکت‌ها، قابلیت درگ‌ & دراپ و غیره همگی مواردی هستند که در صورت تسلط دولوپر به CSS و JS قابل پیاده‌سازی هستند اما با استفاده از فریمورکی نظیر Konva، می‌توان موارد این‌چنینی را با سرعت بیشتر و البته با کدهایی کمتر و مهمتر از آن، ساده‌تر اجرا کرد.

روش استفاده از Konva
برای استفاده از Konva تنها کافی است تا مشابه بسیاری دیگر از لایبرری‌های رایج مثل جی‌کوئری و بوت‌استرپ، فایل حاوی کدهای این فریمورک را از CDN آن در قسمت هِد صفحهٔ خود لود کرده و سپس کدهای مورد نیاز را فراخوانی کنید.

در منطق به کار رفته این فریمورک همه چیز از Konva.Stage آغاز می‌شود؛ این بخش می‌تواند دارای زیر شاخه‌های فراوانی با عنوان Konva.Layer باشد که در نهایت هر Layer (لایه) نیز دارای اَشکال مجزا و گروه‌هایی متشکل از آبجکت‌ها و آیتم‌ها است که در صفحه نشان داده می‌شوند.

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

لازم به ذکر است که هر Layer در Konva دارای دو رندرر است که عبارتند از Scene Renderer برای ایجاد مواردی که در صفحه نمایش داده می شوند (کاربر می‌تواند آن‌ها را مشاهده کند) و Hit Graph Renderer که نتایج اجرای آن به صورت مستقیم و پیش‌فرض در صفحه قابل‌رؤیت نیستند و هدف از آن‌ها بررسی رویدادهایی است که در صفحه‌‌ٔ وب اتفاق می‌افتند (البته در زمانی بسیار کوتاه و با کارایی بسیار بالا).

ادامه مطلب در سکان آکادمی

Continue Reading

انتشار نسخهٔ ۳٫۰ کد ادیتور Sublime

انتشار نسخهٔ 3.0 کد ادیتور Sublime

از نوشته های من در سکان آکادمی

بدون شک Sublime Text یکی از محبوبترین ادیتورهای کدنویسی در بین دولوپرهای حرفه‌ای است و چندی پیش شاهد عرضهٔ نسخهٔ ۳ از این نرم‌افزار محبوب بودیم و در این مطلب به بررسی ویژگی‌های جدید نسخهٔ ۳٫۰ سابلایم خواهیم پرداخت.

تغییراتی که در نخستین نگاه توجه را به خود جلب می‌کنند بیشتر مربوط به ظاهر این نرم‌افزار هستند و مواردی نظیر: آیکان جدید، تم‌های رنگی متفاوت، حرکت نرم‌تر اسکرول صفحه و … را شامل می‌شود اما این در حالی است که به طور کلی نسخهٔ ۳ به نسبت ورژن بتا ارائه شده در سپاتمبر ۲۰۱۶ و همچنین نسخهٔ ۲، از سرعت بالاتری در پردازش اطلاعات و کدهای نوشته شده برخوردار است. همچنین افزایش دقت در بررسی غلط‌های تایپی و تغییر رنگ سینتکس‌، به دولوپرها کمک می‌کند تا میزان خطاهای مربوط به زمان کدنویسی را به میزان قابل‌توجهی کاهش دهند.

Sublime Text 3.0 برای ۳ سیستم‌عامل لینوکس، مک و ویندوز ارائه شده است؛ در نسخهٔ لینوکس ریپازیتوری‌های apt ،yum ،pacman و سلکشن X11 متناسب با آپدیت‌ها به‌روزرسانی خواهند شد. در نسخهٔ مربوط به سیستم‌عامل مک، علاوه بر تغییرات ظاهری، پشتیبانی از قسمت تاچ‌بار، امکان تغییر رنگ عنوان پنجره و بهبود کارایی و هماهنگی با مرورگر از جمله مواردی هستند که تجربه بهتری را برای کاربر فراهم می‌کنند. در سیستم‌عامل ویندوز نیز پشتیبانی از فرمان‌های تاچ، بهبود عملکرد اسکرول صفحه در حالت تاچ، تشخیص سریع‌تر و دقیق‌تر تغییرات انجام شده از جمله تغییرات نسخه ۳٫۰ به نسبت نسخه‌های پیشین است.

همچنین لازم به ذکر است که لایسنس این نرم‌افزار برای کاربرانی که آن را از فوریه ۲۰۱۳ به بعد خریداری کرده‌اند در نسخهٔ ۳٫۰ نیز معتبر خواهد بود.

ادامه مطلب در سکان آکادمی

Continue Reading

Visual Inspector ابزاری مناسب برای توسعه دهندگان وب

Visual Inspector ابزاری مناسب برای توسعه دهندگان وب

از نوشته های من در کلیک

رسانه کلیک – در این مطلب به معرفی یک افزونه گوگل کروم برای بررسی و ایجاد تغییرات آنلاین در صفحات وب، به سادگی و بدون نیاز به استفاده نرم افزارهای پیچیده می پردازیم.
یکی از بخش های موجود در مرورگرهای اینترنتی که هر دولوپری برای طراحی صفحات وب از آن استفاده می کند، قسمت Developer tools یا جعبه ابزار توسعه دهندگان وب است. این قسمت در بیشتر مروگر ها با استفاده از کلید F12 در پایین صفحه نمایشگر ظاهر می شود و شامل سربرگ ها و امکانات متفاوتی می باشد. امکان تغییر دادن مواردی مثل رنگ نوشته ها، فونت ها، اندازه گیری فاصله بین آیتم های موجود در صفحه و حتی تغییر برخی از کلمات به صورت آنلاین و بدون نیاز به تغییر کدهای اصلی صفحه از جمله مواردی هستند که موجب می شود تا DevTools به ویژه در بین دولوپرهای فرانت اند بسیار محبوب و پراستفاده باشد.
طبق تحقیقات انجام شده امروزه گوگل کروم محبوبترین مرورگر اینترنتی است و توانسته است به مرورگر پیش فرض بسیاری از کاربران تبدیل شود، در نتیجه بازار تولید افزونه های جانبی کروم نیز بسیار داغ بوده و Visual Inspector یکی از محبوترین افزونه ها به عنوان مکملی مناسب برای امکانات پیش فرض DevTools در بین دولوپرهاست.
Visual Inspector یکی از محصولات جدید مجموعه canvasflip از کشور هند است که تاکنون در زمینه تولید اپلیکیشن های مربوط به آنالیز تجربه کاربری فعالیت داشته است.
پس از نصب این افرونه آیکن آبی رنگ آن در قسمت بالا و سمت راست گوگل کروم اضافه می شود، نمایش کد تمامی رنگ های استفاده شده در صفحه به صورت یک لیست واحد در سربرگ COLORS و همچنین جدا کردن تمامی تصاویر موجود در سربرگ ASSETS از جمله ویژگی های این افزونه است که درکنار ارایه امکانات مشابه DevTools آن را بسیار کاربردی می کند.
به گفته Vipul Mishra هم بنیان گذار Canvas Flip از جمله دلایل تولید چنین افزونه هایی آن هم به صورت رایگان افزایش میزان تجربه کاربری در ابزارهای مورد استفاده توسط دولوپرها است، وی همچنین اضافه کرد در نسخه های بعدی این افزونه که تحت یکی از لیسانس های اپن سورس ارایه خواهد شد، امکان ذخیره تغییرات ایجاد شده در دو حالت لوکال و کلود در کنار قابلیت هایی نظیر A/B testing ، ذخیره CSS، و همچنین انجام فعالیت به صورت مشترک بین افراد نیز برای کاربران وجود خواهد داشت.

ادامه مطلب در click.ir

Continue Reading

۷ محیط تست کد برای دولوپرهای فرانت‌­اند

7 محیط تست کد برای دولوپرهای فرانت‌­اند

وب‌سایت‌های زیادی وجود دارند که دولوپرهای فرانت‌اند می‌توانند کدهای خود را در آن‌ها تست کنند و یا به‌صورت آنلاین به اشتراک می‌گذارند که در این مقاله به معرفی و بررسی ۷ مورد از پرطرفدارین Code Playground در این زمینه خواهیم پرداخت.

اگرچه وب‌سایت‌های بسیاری وجود دارند که این امکانات را در اختیار دولوپرها قرار می‌دهند اما ویژگی‌هایی وجود دارد که باعث می‌شود برخی از آن‌ها توجه کاربران را بیشتر به خود جلب نمایند که برخی از مهم‌ترین این ویژگی‌ها عبارتند از:
– رنگ‌بندی کدهای HTML ،CSS و JavaScript
– پنجره‌ای برای نمایش نتیجهٔ اجرای کدها (البته بدون نیاز به رفرش کردن صفحه)
– پشتیبانی از تکنولوژی‌های جدید کدنویسی مثل HAML ،LESS ،SASS و Stylus CSS
– ارائهٔ لایبرری‌های معمول جاوااسکریپت
– ابزارهای ارزیابی سورس‌کد
– به‌اشتراک‌گذاری صفحات با یوآر‌الهای کوتاه
– تغییر ساختار سورس‌کد
– رایگان بودن امکانات
– محیطی مناسب برای نمایش توانایی و مهارت شما در کدنویسی

و مهم‌تر از همه این‌که شما نیازی به اجرای نرم‌افزارهای معمول توسعهٔ نرم‌افزار ندارید و همه‌چیز به‌سرعت و سادگی انجام می‌شود؛ در ادامه به معرفی ۷ وب‌سایت محبوب به اشتراک گذاری کد که معمولاً تحت‌عنوان Code Playground شناخته می‌شوند می‌پردازیم:

خواندن ادامه مطالب در sokanacademy.com

Continue Reading