من سالار کابلی هستم،
توسعه‌دهنده نرم‌افزار در کیاسکد.

متون را در وب Justify نکنید

گاهی دوستان به من می‌گن که چرا متون توی وبلاگم و بقیه کارهام هم‌تراز (Justify) نیستن. من هربار سعی کردم که توضیح بدم دلایم رو برای این‌کار ولی تصمیم گرفتم این‌بار اینجا در موردش به صورت کامل‌تر توضیح بدم.

متون هم‌تراز (Justified Text)

متون هم‌تراز به پاراگراف‌هایی گفته می‌شه که از از سمت راست و چپ حاشیه مشخصی دارن و درواقع طول هرخط در پاراگراف طوری تنظیم می‌شه که انتهای هر خط، با انتهای خطوط دیگه در یک راستا باشن. ازین روش در تایپوگرافی متون چاپی استفاده زیادی می‌شه. مثلا اگر به روزنامه‌ها و کتاب‌های چاپ شده دقت کنید، می‌بینید که تقریبا همه متناشون به این شکل تنظیم شدن. هم‌ترازی متن به خواننده کمک می‌کنه که راحت‌تر متون رو مطالعه کنن و چشمشون خسته نشه و یه حس تقارنی هم القا بشه. متن زیر یک پاراگراف از کتاب The Great Gatsby هست:

The Great Gatsby

 

بیشتر بخوانید

آکوپیو، همایش طراحی واکنش‌گرا و چیزهای دیگر

همایش طراحی واکنش‌گرا

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

البته من تو این همایش یه ارائه در مورد تایپوگرافی در وب داشتم که می‌تونید اسلایدهای ارائه رو به صورت آنلاین ببینید یا با فرمت PDF دریافت کنید.

بیشتر بخوانید

بررسی وب‌سایت‌های سازمانی در ایران / شماره ۴: سایت نماد اعتماد الکترونیکی

رفع ادعا: این یادداشت من، در هفته‌نامه عصرارتباط روز شنبه ۲۳ آذر ۱۳۹۲، در صفحه ۱۰ منتشر شده است. دریافت نسخه PDF این مقاله.

نماد اعتماد الکترونیکی که از طرف وزارت صنعت، معدن و تجارت به درگاه‌های الکترونیکی اهدا می‌شود تا هویت و مشخصات آنها را تایید کند، تقریبا معادل شبنم در دنیای مجازی است. این نماد اعتماد، راه خوبی برای متوقف کردن سوءاستفاده‌کنندگان از فضای اینترنتی است، اما آیا وب‌سایتی که متولی ارایه نماد «اعتماد» الکترونیکی است، خود نباید قابل اعتماد باشد؟

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

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

شیوه انتخاب عکس‌ها و گرافیک‌های مورد استفاده در وب‌سایت بسیار قدیمی است و سایت‌های ۱۰ سال پیش را تداعی می‌کنند. برای مثال در صفحه اصلی پورتال (/Main.aspx) چهار بخش اصلی وجود دارد که برای معرفی هر کدام از آنها یک عکس روی زمینه آبی قرار داده شده است. عکس‌ها آن‌قدر کم‌کیفیت هستند که حتی عرض بخش والد خود را پر نکرده‌اند. رنگ متن بخش‌های معرفی هم سورمه‌ای انتخاب شده که کنتراست لازم را روی پس‌زمینه آبی تیره ندارد و به هیچ‌وجه خوانا نیست.

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

گواهینامه SSL: در راهنمای دریافت نماد آمده است که کاربر خودش باید یک زنجیره گواهی (Certificate) را روی مرورگرش نصب کند تا گواهی SSL وب‌سایت به‌درستی کار کند. این روش ناقض تمام استانداردهای امنیتی در وب است و وب‌سایتی که خودش سنگ «اعتماد» الکترونیکی را به سینه می‌زند، نباید کاربر را وادار به انجام چنین کارهای پرخطری بکند. کاربر غیرمطلع ممکن است فکر کند این یک روش استاندارد است و به وب‌سایت‌های خطرناک هم به همین روش اعتماد کند.

بررسی وب‌سایت‌های سازمانی در ایران / شماره ۱: مشخصات یک وب‌سایت زیبا و کاربردپذیر

رفع ادعا: این یادداشت من، در هفته‌نامه عصرارتباط روز شنبه ۲ آذر ۱۳۹۲، در صفحه ۱۰ منتشر شده است.

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

بیشتر بخوانید

اولین همایش تخصصی طراحی واکنش‌گرا

در طی چند سال اخیر، طراحی واکنش‌گرا (Responsive Web Design) به یکی از بحث‌های داغ و مهم بین طراح‌ها و توسعه‌دهنده‌های وب تبدیل شده و با توجه به رشد مرورگرها و گستردگی پشتیبانی از Media Query ها، این روزها خیلی مهم هست که یه طراح بتونه وب‌سایتی طراحی کنه که در بیشتر دستگاه‌ها و صفحه نمایش‌های موجود، به درستی نمایش داده بشه.

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

RWDConf

این همایش ۱۴ آذر ۹۲ از طرف «مدرسه استانداردهای وب» در تهران برگزار می‌شه و من هم دبیر علمی این همایش هستم. «مدرسه استدانداردهای وب» قرار هست یه مجموعه باشه که در در زمینه آموزش استانداردهای وب و طراحی اون فعالیت کنه و این همایش اولین قدم در این راهه. این مجموعه، با حمایت آکادمی مجید آنلاین و مجید علوی‌زاده عزیز شکل گرفته و من خوشحالم که می‌تونم در آینده قدم‌های بهتری در زمینه آموزش وب بردارم با کمک این دوستان.

بیشتر بخوانید

فایل‌های ارائه SVG و کارگاه‌ Phonegap

توی همایش استانداردهای وب که ۱۸ مهرماه در تهران برگزار شد من یه ارائه در مورد «تصاویر SVG و کاربردهای آن‌ها در وب» داشتم. همچنین بعد ازظهر این همایش، یه کارگاه کوچیک برگزار شد و من در مورد ساخت اپلیکیشن‌های هایبریدی برای تلفن‌های هوشمند با Phonegap توضیحاتی دادم.

همچنین همونطور که قبلا خبر داده بودم، ۲ و ۳ آبان‌ماه من یه کارگاه با همکاری آکادمی مجیدآنلاین در مورد HTML5/CSS3 داشتم که اون هم در طی ۲ روز ۷ ساعته برگزار شد. توی این کارگاه در مورد تغییرات جدید HTML5 و CSS3 و کاربردهای اون‌ها در طراحی و توسعه وب صحبت کردیم و تمرین‌هایی رو انجام دادیم.

اول از همه می‌خوام تشکر کنم از تمام دوستانی که لطف کردند و تشریف آوردن به این کارگاه‌ها و همچنین همایش استانداردهای وب، حضورشون واقعا دلگرم‌کننده و ارزشمند بود، هم برای من و هم برای دوستان دیگه‌ای که تو همایش ارائه داشتن. دوم اینکه من به دوستان قول داده بودم که فایل ارائه SVG و فایل‌های کارگاه‌های PhoneGap رو توی وبلاگ قرار می‌دم که بتونن استفاده کنن از اون‌ها. فایل‌های مربوط به کارگاه HTML5/CSS3 رو بخاطر ماهیت و محتواشون نمی‌تونم فعلا آنلاین منتشر کنم. عذر هم می‌خوام بابت تاخیری که در انتشار این مطلب پیش اومد.

دوستانی که تو کارگاه مجیدآنلاین شرکت کرده بودن می‌تونن با من به آدرس ایمیل sallar.kaboli روی جی‌میل تماس بگیرن تا کارهایی که انجام دادیم رو براشون ارسال کنم.

فیلم از ارائه اس‌وی‌جی: دریافت (۱۲ مگابایت)
فایل‌های اپلیکیشن نمونه در کارگاه Phonegap: دریافت (۱۰ مگابایت)

ممنون و موفق باشید.

رهایی از پیکسل‌ها: طراحی وب و رابط کاربری بدون پیکسل

سالهاست که ما در وب و طراحی وب به پیروی از طراحی گرافیک، از واحدهای پیکسلی برای مشخص کردن ابعاد و اندازه‌ها استفاده می‌کنیم. همونطوری که قبلا در مطلب تصاویر SVG آینده وب هستند گفتم، تکنولوژی داره به سمتی حرکت می‌کنه که توش پیکسل‌ها دائما در حال تغییر هستن. ما سال‌ها از صفحه‌های نمایش با فشردگی ۱ پیکسل استفاده کردیم و بعد با معرفی شدن صفحه‌نمایش رتینا از طرف اپل، این فشردگی به ۲ پیکسل تبدیل شد. به این معنی که تعداد پیکسل‌هایی که در یک اندازه واحد جا می‌گیرن ۲ برابر شد. بعد از صفحه‌نمایش رتینا، شرکت‌های مختلف فشردگی‌های پیکسلی جدید و بالاتری رو معرفی کردند و این مسئله کار رو برای ما طراح‌های وب خیلی سخت کرد؛ چرا که باید طرح‌های ما تو هر دستگاهی با هر سایز صفحه‌نمایش و فشردگی پیکسلی، عالی نمایش داده بشن. (لطفا برای توضیحات بیشتر در این مورد، مقاله‌ای که بالاتر بهش اشاره کردم رو بخونید.)

بیشتر بخوانید

کارگاه آموزش HTML5، CSS3 و تایپوگرافی در وب

دوم و سوم آبان ماه امسال با همکاری آکادمی مجید آنلاین یه کارگاه آموزش HTML5/CSS3 و تایپوگرافی در وب برگزار می‌کنم.

تو این کارگاه ۱۴ ساعته (۲ روز ۷ ساعته) در مورد تغییرات و امکانات جدید HTML5 و CSS3 صحبت می‌کنیم و نحوه استفاده از اون‌ها رو در پروژه‌های واقعی بررسی می‌کنیم. با توجه به علاقه شخصیم به تایپوگرافی، بخشی از این کارگاه رو اختصاص می‌دیم به تایپوگرافی در وب و در مورد تایپوگرافی خوب در زبان فارسی و چگونگی پیاده سازیش در وب بحث می‌کنیم.

کارگاه آموزشی HTML5/CSS3

ظرفیت این کارگاه ۱۲ نفر هست و اگر قبل از ۲۵ مهر ثبت‌نام کنید، شهریه هر نفر ۲۶۰هزار تومان هست. برای اطلاعات بیشتر و مشاهده سرفصل‌های دوره یه سری به صفحه مربوطه تو وب‌سایت آکادمی مجید آنلاین بزنید.

با تشکر از دوستان مجیدآنلاین که این فرصت خوب رو فراهم کردن.
سالار.

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

رفع ادعا: این مقاله ترجمه‌ای از مقاله‌ی خودم به انگلیسی هست که ۲ سپتامبر در Medium منتشر کردم.

Under the Water

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

بیشتر بخوانید

#توییتربازی: چگونه از توییتر استفاده می‌کنم؟

فکر می‌کنم بیشتر اهالی تکنولوژی با توییتر آشنا باشن و اگر به طور روزانه ازش استفاده نکنن حتما گاهی برای دنبال کردن آدم‌ها و شرکت‌های مختلف بهش سر می‌زنن.

Twitter #Farsi

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

تو این نوشته می‌خوام در مورد راه‌هایی که من باهاشون از توییتر استفاده می‌کنم توضیح بدم.

بیشتر بخوانید