در این مصاحبه صوتی یک ساعت و ۱۵ دقیقه‌ای، با مصطفی لامعی در مورد زندگی شخصیم، پروژه‌هام به خصوص ۳۱شب، روند کاریم و دیگر مسائل گپ میزنیم. امیدوارم که مطالبی که عنوان میشن در این پادکست برای شما مفید باشه. میتونید این مصاحبه رو از صفحه آی‌پالس در آی‌کلاب به صورت آنلاین گوش بدید یا فایل صوتی اون رو دانلود کنید.

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

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

سالار

البته توی ایران با توجه به اینکه فروشنده‌های گجت‌ها معمولا بدون توجه به شوق و ذوق مشتری برای باز کردن دستگاه خریداری شده، از چنگ و دندان و اره برقی حتی استفاده میکنن و در طول ۱۰ ثانیه تا فیها خالدون گجت رو آن‌باکس میکنن، یه کم سخت تر هست که ویدیو آنباکسینگ تهیه کرد. ولی این دفعه من موفق شدم The New iPad 4G رو خودم آنباکس کنم و از مراحلش فیلم بگیرم. البته لازم به ذکره که در این ویدیو من به شدت هیجان زدم و اثرات ناشی از اون به خوبی داخل ویدیو پیداست. همچنین یه جاهایی از ویدیو تار شده بخاطر اینکه فوکوس دوربین اونور تر بود، به بزرگی خودتون عفو بفرمایید.

اگر ویدیو رو نمی‌تونید ببینید مستقیم در صفحه ویمئو اون رو مشاهده بفرمایید.
سالار.

جریان ازاین قرار هست که هفته‌نامه همشهری جوان، در شماره ۳۵۵، در بخش آی‌تی‌باز (صفحه ۶۶)، وب‌سایت ۳۱شب که یکی از سرویس‌های ما در گروه ققنوس هست رو در یک ستون معرفی کرده:

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

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

به هرحال تمام ما برای پیشرفت وطنمون تلاش می‌کنیم، غیر از این هست که باید از همدیگه حمایت کنیم؟
سالار.

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

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

تایپوگرافی چیست؟

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

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

بخش بالا از کتاب تایپوگرافی، نوشته فرشید مثقالی

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

تایپ در صفحه نمایش

قبل از پیدایش کامپیوترها، فقط در انتشارات و متون چاپی از مفهوم تایپوگرافی استفاده می‌شد و در این زمینه پیشرفت‌های بسیاری حاصل شده است. دستگاه‌های چاپ پیشرفته پدید آمده‌اند که میتوانند متون را با کیفیت بسیار بالا روی کاغذ چاپ کنند. حتی دستگاه‌های چاپ خانگی هم قادر به چاپ متون با کیفیت مناسب هستند. همانطور که می‌دانید کیفیت متون چاپی بر اساس dpi (نقطه در اینچ) سنجیده می‌شوند و با توجه به کیفیت بالای چاپ دستگاه‌ها، طراح‌های قلم با خیال راحت می‌توانند جزئیات زیبایی را در قلمی که طراحی می‌کنند در نظر بگیرند. اما داستان برای صفحات نمایش کامپیوتر طور دیگری است. کیفیت این صفحات نمایش بر اساس ppi (پیکسل در اینچ) سنجیده میشود و برای صفحات نمایش امروز این مقدار به طور میانگین ۱۰۰پیکسل در اینچ است که در مقایسه با کیفیت چاپ دستگاه‌های پیشرفته نشر، ناچیز و ضعیف به نظر می‌رسد (به استثنای صفحه نمایش آیپد جدید که ۲۶۴ پیکسل در اینچ و آیفون ۴ که ۳۲۶ پیکسل در اینچ کیفیت دارند و چند دستگاه محدود دیگر). برای همین طراح‌های فونت باید قلم‌هایی را که طراحی می‌کنند به صورت اختصاصی برای صفحات نمایش و کامپیوتر طراحی کنند در غیر اینصورت با متونی با گوشه‌های زائد و نمایش غیر جذاب برخورد خواهیم داشت.

تکنولوژی Anti-Aliasing (ضد پلگی)

در پردازش کامپیوتری متون، تکنولوژی Anti-Aliasing یا ضد پلگی مهم‌ترین نقش را برعهده دارد: حذف پله‌های پیکسلی به وجود آمده هنگام نمایش تایپ. این روش با اضافه کردن پیکسل‌های نیمه شفاف (Semi Transparent) در اطراف خطوط و متون یک تایپ، باعث می‌شود که این متون هنگام نمایش در صفحه نمایش کامپیوتر به صورت صاف و یک‌پارچه مشاهده شوند.

اما عناصر مختلفی در تاثیرگذاری این روش دخالت دارند: هینتینگ قلم، رندر Subpixel، سیستم‌عامل ها و غیره…

هینتینگ قلم (Font Hinting)

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

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

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

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

سیستم‌عامل‌های مختلف (ویندوز، مک، لینوکس) با استفاده از تکنیک‌های مختلفی سعی می‌کنند تا نمایش فونت‌ها و متون را در صفحات نمایش بهبود ببخشند. در این مطلب تفاوت نمایش متون در دو سیستم عامل ویندوز و مک را بررسی می‌کنیم.

تکنولوژی مایکروسافت برای نمایش صحیح متون و ضدپله کردن آن‌ها ClearType نام دارد. این تکنولوژی پیکسل‌های حاوی متون را به صورت فشرده در کنار هم روی گرید پیکسلی منظم میکند تا به افزایش کنتراست و نمایش «ترد – Crispy» تر حروف کمک کند. در این تکنولوژی گاهی شکل و ظاهر اصلی حروف تایپ، فدای خوانایی و نمایش بهتر می‌شود و برای طراحی‌های دقیق مناسب نیست. ویندوز اکس‌پی و ویندوز ۷ هردو از تکنولوژی ClearType استفاده می‌کنند، با این تفاوت که در ویندوز اکس‌پی به صورت پیش‌فرض غیرفعال است و فقط از طریق تنظیمات سیستم عامل می‌شود آن‌را فعال کرد، البته نرم‌افزارهایی مثل Microsoft Office به صورت خودکار آن‌را فعال نگه‌میدارند. ولی در ویندوز ۷ این تکنولوژی به صورت پیش‌فرض روشن است و روی تمام متون اعمال می‌شود.

در مقابل، اپل برای این هدف مشترک، از تکنولوژی Quartz 2D استفاده می‌کند. هدف اصلی این تکنولوژی، حفظ شکل حروف و هماهنگی اصلی فونت‌ها در کنار خواناتر کردن و ضدپله کردن متون است. این تکنولوژی برای طراح‌های گرافیک و وب مناسب‌تر است چرا که حروف تایپ به شکل اصلی و واقعی خود نمایش داده خواهند شد و سیستم عامل سعی میکند راه‌های دیگری را برای خواناتر کردن متن اعمال کند. چون این تکنولوژی Anti-Aliasing بیشتری را روی متون اعمال می‌کند، ممکن است خواندن متن‌های طولانی با این تکنولوژی چشم را خسته کند. البته معمولا متن‌های سیستم عامل مک بهتر نمایش داده می‌شوند هم از لحاظ خوانایی هم از لحاظ حفظ شکل ظاهری اصلی حروف، چرا که شرکت اپل هم سیستم‌عامل مک را تولید می‌کند و هم سخت‌افزار مناسب آن‌را، که معمولا کیفیت صفحات نمایش آن بسیار بالاتر از صفحات نمایش معمولی هستند.

به روز رسانی: با توجه به اینکه سیستم عامل لینوکس یک سیستم عامل واحد نیست و توزیع‌های مختلفی تحت نام‌های مختلف از آن منتشر شده است، نمی‌توان به صورت مشخص گفت که از چه تکنولوژی برای خوانا کردن متون استفاده می‌کند. با این وجود، سیستم عامل Ubuntu که یک توزیع از لینوکس است، از فونت‌های OpenType که قابلیت‌های خوبی برای نمایش دارند استفاده میکند، همچنین در تنظیمات این سیستم عامل می‌توان گزینه Sub-pixel Rendering را روشن نمود تا متون کمی واضح تر و صاف‌تر (Smoother) دیده شوند. تصویر زیر نحوه نمایش فونت فارسی نسیم در مرورگر فایرفاکس در سیستم عامل Ubuntu را نشان می‌دهد.

نقش مرورگرها

مرورگرهای پیشرفته امروزی اکثرا تنظیمات و قابلیت‌های Anti-Aliasing سیستم عامل اجرا کننده را به ارث می‌برند. برای مثال در سیستم عامل مک متون در تمام مرورگرها به یک شکل واحد یا نزدیک بهم دیده می‌شوند. البته مرورگر فایرفاکس از نسخه ۳ به بعد تلاش کرده‌است تا بعضی از ضعف‌های رندرینگ سیستم‌عامل را در وب برطرف کند. اما در سیستم عامل ویندوز، متاسفانه مرورگرها در به کارگیری تکنولوژی ClearType تقریبا ناتوان بوده‌اند. برای مثال مرورگر کروم در سیستم عامل مک بهترین نمایش و در سیستم عامل ویندوز بدترین نمایش ممکن را میان مرورگرهای دیگر دارد. متاسفانه ما به عنوان طراح وب، کنترل زیادی روی نحوه نمایش این مرورگرها نداریم. تنها کاری که می‌توانیم بکنیم انتخاب قلم مناسب با طراحی خوب است.

برای مثال در تصویر زیر، تفاوت نمایش سه قلم: نسیم، میترا و یکان در مرورگر کروم در دو سیستم عامل مک ۱۰.۷.۳ و ویندوز ۷ نشان داده شده است.

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

نتیجه گیری

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

منتظر بخش‌های بعدی «تایپوگرافی در وب» باشید.
سالار.

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

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

خیلی از طراح‌ها و برنامه‌نویس‌هایی که در دنیا وجود دارن، مثل من به محصولات اپل برای کارشون علاقه‌مندن. این علاقه میتونه بخاطر چیزهای مختلفی باشه. ولی در درجه اول به خاطر کیفیت طراحی و ساخت این محصولات هست. من به عنوان یه طراح، طبیعیه که از محصولاتی که کیفیت ساخت و طراحی بالایی دارن لذت ببرم. دلیل دیگه‌ای که برای من خیلی مهمه، End-to-End بودن محصولات اپل هست. به این معنی که تمام محصولات اپل به خوبی باهم ارتباط برقرار میکنن. مثلا من برای مدیریت مالی، یه نرم افزار روی مک دارم به نام Money و نسخه تلفن همراهش هم روی آیفونم نصب هست. وقتی خونه نیستم یا در سفرم به راحتی میتونم تراکنش‌های مالی رو توش ثبت کنم و اون به طور خودکار با کلاینت مک‌ش سینک میکنه اطلاعات رو.

‌
همچنین ابزارهایی که برای طراحی و برنامه‌نویسی وجود داره، نرم‌افزارهایی مثلا TextMate, Coda, Transmit, Espresso, PixelMator و …، اینکه هسته‌ی مک یونیکس هست و بیشتر نرم‌افزارهایی که برای یونیکس و لینوکس وجود دارن روی مک هم اجرا میشن و خیلی خصوصیات دیگه باعث شده که مک برای من محیط ایده‌آل باشه برای کارم. طبیعتا وقتی مک انقدر برای من خوب هست و آیفون و بقیه محصولات اپل به این خوبی با مک ارتباط برقرار می‌کنن، من نمیرم که از برند دیگه‌ای برای گوشیم یا تبلتم استفاده کنم. چون زندگی روزمره ما انقدر پر از مشغله‌س که واقعا نگرانی در مورد گجت‌ها و ارتباطشون باهم دیگه و درست عمل کردنشون، یه بار عصبی اضافه به حساب میاد.

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

موفق باشید،
سالار.

شماهم اگر برای طراحی وب، گاهی از فوتوشاپ استفاده می‌کنید، حتما به این مشکل برخوردید که هنگام خروجی گرفتن برای وب (Save for web and devices) نتیجه‌ای که از کار حاصل میشه، با چیزی که در فوتوشاپ روش کار می‌کردید اندکی متفاوت هست و این خیلی بده. تصور کنید که ساعت‌ها وقتتون رو صرف پیدا کردن رنگ‌های مناسب کردید و بخاطر این مشکل، کارتون چیزی که میخواستید نشد.

بعد از کمی گشت و گذار در اینترنت و خرید کتاب Mastering Photoshop for Web Designers به پیشنهاد دوستان، بالاخره راه حل این مشکل رو پیدا کردم که امیدوارم به اشتراک گذاشتنش کمی از دردسرهاتون رو کم کنه.

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

قبل از اینکه راه حل رو بگم، بد نیست که با استاندارد رنگی sRGB IEC61966-2.1 آشنا بشید. این یه استاندارد رنگیه که با توجه به اینکه رنگ‌های خیلی زیادی رو پوشش میده، به عنوان یه استاندارد جهانی تو خیلی از دستگاه‌ها مورد استفاده قرار گرفته. بهتره حتی پروفایل رنگی مونیتورتون رو روی این استاندارد تنظیم کنید (واقع در تنظیمات رنگی سیستم عاملتون).

راه حل

• بعد از باز کردن فایلتون، از منوی Edit گزینه‌ی Color Settings رو انتخاب کنید. داخل قسمت Working Spaces، بخش RGB روی گزیه sRGB IEC61966-2.1 قرار بدید و در نهایت روی OK کلیک کنید.
  ‌
  
  ‌
• حالا رنگ‌هاتون تنظیم شده، ولی برای اینکه بتونید رنگ‌هارو درست همونطور که در مرورگر دیده میشن ببینید، از منوی View، گزینه Proof Setup و در نهایت گزینه Monitor RGB رو فعال کنید. سپس از منوی View گزینه‌ی Proof Colorsرو انتخاب کنید.
  ‌
  ‌
• الان چیزی که در محیط فوتوشاپ میبینید دقیقا همون چیزی هست که در محیط وب‌ خواهید دید. ولی یه مرحله‌ی دیگه هم هست. برای خروجی گرفتن از فایل، از منوی File گزینه Save for Web & Devices رو انتخاب کنید، از بعد از انتخاب نوع تصویر و تنظیمات مربوطه، دقت کنید که دو گزینه Embed Color Profile و Convert to sRGB فعال نباشند. فعال نبودن این دو گزینه خیلی مهمه.
  ‌

توجه کنید که این تنظیمات برای فوتوشاپ در هر دو سیستم عامل ویندوز و مک یکسان هستند.

موفق باشید،
سالار.

اواخر آذر ۹۰، آرش زاد، موسس و سردبیر وبلاگینا، با من در مورد طراحی مجدد وبلاگینا به مناسبت چهارمین سال تولدش تماس گرفت. بعد از توافق قرار شد که اون اطلاعات لازم رو برای من ارسال کنه و من بر اساس اون اطلاعات براش یه Sketch تهیه کنم و توی جلسه‌ی بعدیمون بهش نشون بدم. حاصل تبادل اطلاعاتی که برای اون طرح شد، ۳۶ تا ایمیل شد که توش تمام اطلاعات لازم رو من دریافت کردم.

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

طرح قبلی وبلاگینا

طراحی قبلی وبلاگینا از دی‌ماه ۸۹ تا ۴ فروردین ۹۱ روی وب‌سایت بود. این طرح با وجود اینکه از لحاظ استفاده از HTML5 و CSS3 خیلی خوب بود، ولی با توجه به نیازهای اخیر وبلاگینا به یه مشکلاتی خورده بود و برای همین بچه‌ها میخواستن که وبلاگینا طراحی مجدد بشه. این طرح رو علی جمال‌زاده عزیز، سردبیر رادیو۲۴ طراحی کرده بود.

مشکلات طرح

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

طرح پیشنهادی من

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

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

طرح جدید وبلاگینا

من برخلاف خیلی از طراحای دیگه، هیچوقت نمی‌تونم کل طرح اولیه رو تو فوتوشاپ طراحی کنم و از فوتوشاپ بیشتر برای طراحی عناصر کوچیکتر استفاده می‌کنم. خیلیا با این روش مخالفن ولی خب من اینطوری راحت‌ترم. نحوه طراحی هم داخل ساختار HTML و از بالا به پایین هست. برای مثال، اول از نوار بالایی و هدر و لوگو شروع کردم و بعد به قالب اصلی سایت، بعد سایدبار، باکس‌های سایدبار، فوتر و در نهایت به محتوی رسیدم. اینطوری من می‌تونم در هر قسمت توجه کاملم رو فقط به این بخش بدم. مثلا، طراحی باکس‌های سایدبار و ساختارشون، به همراه طراحی استانداردی برای منوهای این باکس‌ها، حدود ۴ روز وقتم رو گرفت که ۱ روزش فقط برای مشخص کردن تکلیف رنگ پس‌زمینه و سایه‌شون بود. تمام بخش‌های دیگه هم دقیقا به همون صورت طراحی شدن. با توجه به اینکه وبلاگینا برای محتوی مطالب و مقالات نیاز به بخش‌های مختلفی داشت، کل پروسه طراحی ۳ ماه طول کشید و هنوز هم کامل نشده.

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

مشخصات طرح جدید

• تکنولوژی طراحی: CSS3 و HTML5
• فریم‌وورک سی‌اس‌اس: LESS
• فریم‌وورک جاواسکریپت: jQuery
• تطبیق خودکار (Responsiveness) برای: رزولیشن کمتر از ۱۰۲۴، تبلت (به زودی)، تلفن همراه (به زودی)
• سیستم مدیرت محتوی: Movable Type
• پشتیبانی از مرورگرهای قدیمی: اینترنت اکسپلورر ۸ و بالاتر

وبلاگینا در گذشته

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

پایان

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

موفق باشید، سالار.

این طرح برای مرورگرهای پیشرفته آماده سازی شده. برای همین در ایده‌آل‌ترین حالتش باید روی مرورگرهای اینترنت اکسپلورر نسخه ۹ و بالاتر، کروم نسخه ۵ و بالاتر، سافاری نسخه ۴ و بالاتر و فایرفاکس ۶ و بالاتر به درستی نمایش داده بشه. در حال حاضر هم که این طرح به صورت آزمایشی روی وب‌سایت نمایش داده میشه و مشکلات زیادی داره. در این طرح از HTML5 و CSS3 استفاده‌ی زیادی شده، برای همین نباید انتظار داشت روی مرورگرهای قدیمی بدون مشکل نمایش داده بشه. خوشحال میشیم اگر هر نظری یا پیشنهادی (و انتقادی) در مورد طرح دارید به ما اطلاع بدید تا بتونیم همه چی رو بهبود بدیم.

سالار.

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

۱- مشتری‌های دانا!

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

۲- مشتری‌های خوش قلب!

گروه دوم از مشتری‌هایی که واقعا برای من مشکل ساز هستن، اونایی هستن که احساس میکنن دارن به من لطف میکنن. معمولا این مشتری‌ها اینطوری بحث میکنن: «شما این کار رو با این قیمت انجام بده، مطمئن باش بعدش کارهای بیشتری دارم برات و بی‌کار نمی‌مونی، توی درآمد این پروژه هم میتونم ۱۰٪ شریکت کنم.»! خب، واقعیت اینه دوست عزیز، من نه تمایلی به شراکت با شما دارم نه علاقه‌ای به انجام پروژه‌های دیگه برای شما. این دسته از مشتری‌ها باید قبول کنن که یک طراح یا برنامه‌نویس یه پروژه رو بیشتر بخاطر پول نقدی که قرار هست در بیاره قبول می‌کنه نه بخاطر وعده و وعیدهای خیالی، باید متوجه بشن که اگر ایده‌ی پول‌سازی دارن و مطمئنن که در آینده به سوددهی میرسه، برای خودشون نگهش دارن و طراح رو مجبور نکنن که در این راه همراهشون باشه. من برای زندگی به پول نقد نیاز دارم، نه وعده‌ی شراکت در یه موفقیت خیالی، ممنون.

۳- مشتری‌های صبور!

یک حقیت اینه که تمام مشتری‌ها عجله دارن. همه در اسرع وقت به نتیجه‌ی کار نیاز دارن. بارها شده مشتری تا تونسته برای تحویل پروژه به من فشار آورده، و بعد از اینکه بهش تحویل دادم حتی تا چند ماه بعدش وارد پنل مدیریت سایت هم نشده که اطلاعات رو وارد کنه. هرچقدر هم که زمان تحویل دادن پروژه نزدیک تر میشه، این حرف رو مدام تکرار می‌کنن: «عقبیم!». ولی وقتی به پرداخت پول می‌رسه، دیگه عقب نیستن، باید صبر کنیم تا مراحل اداری طی بشه!

۴- مشتری‌های قانع!

«فقط چند تا تغییر کوچیکه، وقتت رو زیاد نمیگیره.» این جمله رو همه‌ی طراحا می‌شنون. همین چند تا تغییر کوچیکه که باعث میشه به کارهای دیگمون نرسیدم و از کار کردن با مشتری نا امید بشیم. تغییراتی که هر کدوم ازونا یک روز و نیم زمان نیاز دارن و از نظر مشتری چند تا کلیک ساده هستن. هیچکس هم نمی‌تونه به این افراد بفهمونه که این چیزهایی که شما بهشون «ساده» میگید برای طراح شما چقدر هزینه‌ی کوتاه مدت و بلند مدت در پی داره.

کلام آخر:

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

این مشکلات راه‌حل خیلی ساده ولی سختی داره: «نه گفتن!». همه‌ی ما باید توانایی گفتن «نه» در قبال مسایلی که برامون خوشایند نیستن رو داشته باشیم. تا زمانی که این توانایی رو کسب نکردیم، مشکلاتمون روز به روز بیشتر و پیچیده‌تر میشه و حل کردنشون انرژی و زمان زیادی می‌بره. پس بیاین یاد بگیریم به این مشتری‌ها و شرکت‌ها، نه بگیم.

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

سالار.

تا اینکه دیروز دیدم که به دلیل بی‌توجهی عزیزانی که مسئول سایت بودند، مقادیر زیادی هرزنامه (حدود ۱۹۲۰ مطلب) وارد سایت شده بود، و باعث شده سایت از حالت اصلی و ارزشی که قبلا داشته خارج بشه. من هم با توجه به اهمیت معنوی که این سایت برام داره، تصمیم گرفتم تا با کمک همکارانم در ققنوس، سایت رو روی دامنه جدیدی برپا کنم و یادبودهای دوستان رو به شیوه مهندسی معکوس به بانک اطلاعات برگردونم. همچنین یه سری تغییرات ظاهری و کاربردی در طرح دادم که امیدوارم استفاده از اون و خوندن یادبودها رو راحت تر بکنه.

می‌تونید ازین به بعد دیوار یادبود رو از آدرس steve.p5x.org مشاهده کنید.
سالار.

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

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

سالار.

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

آرش با موفقیت تونسته، مفاهیم ققنوس، آتش، خلاقیت، افتخار و بی‌نهایت رو دراین لوگو ترکیب کنه و ما خوشحالیم که به این نتیجه‌ی خوب رسیدیم. این یه شروع و روحیه‌ی تازه برای اعضای تیم ققنوسه و ما راهمون رو با ایده‌های بهتر و نوتر، ادامه می‌دیم. طی یک سال اخیر، با وجود تمام مشکلات و موانع، ما موفق شدیم پروژه‌هایی مثل ۳۱شب، کوتاه‌کننده آدرس ققنوس، کارگاه آموزشی HTML5+CSS3 و سایت یادبود استیو جابز رو با موفقیت معرفی کنیم و درحال کار روی پروژه‌های جدیدتری هستیم که در آینده نزدیک معرفی خواهند شد.

از تمام اعضای ققنوس بابت زحماتی که کشیدن تا باهم به اینجا برسیم سپاسگزارم.
سالار.

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

سالار

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

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

سالار.

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

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

اگر بخوام از کلمات خود نویسنده برای توصیف نوع متن استفاده بکنم، متن این کتاب به «زبان رنگین (Colorful Language)» نوشته شده، به این معنی که نقل قول‌ها، حقایق و جمله‌ها همونطور که بودن بدون هیچ تغییری در کتاب آورده شدن و نویسنده هم برای توصیف چیزی از زبان جابز از همون عبارات و واژه ها استفاده کرده. برای همین هنگام خوندن این کتاب باید انتظار دیدن کلمات رکیک رو به طور متداول داشته باشید. جدای از این، بخاطر ماهیت زندگی استیو جابز، این کتاب در بعضی نقاط حالت داستانی بخودش میگیره و البته قصد نویسنده هم همین بوده. شما بعد از تموم شدن هر فصل مشتاقید که بدونید در فصل بعدی چه اتفاقی می‌افته. من وقتی این کتاب رو می‌خوندم، هم خندیدم و هم اشک ریختم. مطمئنم هرکسی که مثل من برای شخصیت استیو جابز ارزش قائل باشه، با خوندن این کتاب نا امید نمی‌شه.

این کتاب رو می‌تونید از سایت آمازون به صورت دیجیتال یا چاپ‌شده (Hardcover) خریداری کنید، این کتاب به عنوان بهترین کتاب سال ۲۰۱۱ از دید آمازون انتخاب شده.

سالار.

نشانی سایت: SkyzzEntertainment.com

البته من این سایت رو فقط توی مکینتاش تست کردم و مطمئن نیستم روی بقیه پلتفورم‌ها درست کار میکنه یا نه.
سالار.

من هم ساعت ۲:۴۰ در مورد گروه ققنوس و پروژه ۳۱شب ارائه دادم، که پادکست ارائه و فایل پی‌دی‌اف اسلایدهارو می‌تونید دریافت کنید. از دوستانی هم که زحمت کشیده بودن و تشریف آورده بودن، تشکر می‌کنم.

دریافت فایل PDF اسلایدها
دریافت پادکست فرمت MP3

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

موفق باشید،
سالار.

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

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

اسم این پوسته Solarized هست و خوشبختانه تقریبا برای تموم ادیتورهای معروف طراحی شده. لیست ادیتورها و صفحه توضیحات رو میتونید ایـــــــنجا ببینید. پیشنهاد من برای ادیتور توی مک، Panic Coda یا MacRabbit Espresso هست که هردوشون به خوبی از فارسی پشتیبانی میکنن. همچنین فونت دلخواه من Letter Gothic Std هست که به صورت پیشفرض توی مک موجوده.

موفق باشید، سالار.

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

نکته: اگر هرنوع پیوندی به اینجا دادید، لطفا اونرو به دامنه جدید تغییر بدید. البته دامنه‌های قبلی همچنان قابل دسترس هستند.
بدرود، سالار.