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

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

با اینکه اینجا باید مالیات نسبتا بالایی پرداخت کرد (حدود ۲۵~۳۰٪) که البته بین کشورهای اروپایی شاید خیلی بالا به حساب نیاد، ولی هزینه‌ها نسبت به پولی که بعد از کسر مالیات و ... باقی می‌مونه معقول هستن (غیر از حمل و نقل که اشاره کردم). اگر بخوام چند تا مثال بزنم: قیمت یک وعده غذایی برای کارمندها (تقریبا همه رستوران‌ها ساعات ناهار رو با همین قیمت حساب می‌کنن) ۱۰ یورو هست، هزینه آب آپارتمان هر دو ماه ۱۲ یورو، اجاره خونه ۹۰۰ یورو (خونه‌های مرکز شهر هلسینکی خیلی گرون‌تر هستن)، یک کیلو مرغ ۸ یورو، گوشت خورشتی کیلویی ۳۰ یورو، اینترنت خونه ما تا ۱۰ مگابیت رایگان (۱۰۰ مگابیت ماهی ۱۰ یورو و ۳۵۰ مگابیت ماهی ۲۰ یورو)، یک بار خرید متوسط از سوپرمارکت برای میوه، سبزی، لبنیات و ... حدود ۲۰ تا ۳۰ یورو، بلیط سینما ۱۴ یورو، استفاده از کتابخونه و تمام امکانات داخلش (پرینتر سه بعدی، کتاب‌ها، ابزار و وسایل صنعتی، ... کاملا رایگان)،‌کارت حمل‌ونقل برای یک‌ماه ۹۸ یورو (اتوبوس، مترو، ترم و قایق نامحدود).

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

تعداد ایرانی‌های اینجا برخلاف سوئد که پر از ایرانی هست خیلی زیاد نیست و بیشتر کسایی که هستن یا دانشجو هستن در هلسینکی یا تورکو یا خیلی سال پیش به همراه خونوادشون مهاجرت کردن اینجا. البته وقتی در هلسینکی قدم بزنی در روز حداقل یک بار به ایرانی‌ها برمیخوری که خیلی وقت‌ها هم علاقه‌ای ندارن با آدم حرف بزنن :-) ولی خب دوستان ایرانی خوبی هم اینجا داریم که واقعا گُل هستن.

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

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

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

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

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

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

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

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

خیلی دوست داشت که با شراره ازدواج کنم. هی اصرار کرد که «زود باشین چرا انقدر لفتش می‌دین؟» ما هم دقیقا ۲ روز قبل از اینکه راهی بیمارستان شود عقد کردیم. انگار که خبر داشت قرار است اتفاقی بیفتد که آن‌همه اصرار کرد. اما چه خوب شد که اصرار کرد. در یکی از روزهای بعد از بیمارستان، در حالی که روی تختش داشت از خوردن غذایش لذت می‌برد به پرستارهایش پُز می‌داد که «دستپخت عروس شهلاس دیگه» و چشمانش از خوشحالی می‌درخشید. حالش حسابی خوب شده بود که برگشته بود منزل. در بیمارستان نگران این بود که روز تولدم بیمارستان باشد. می‌پرسید که چند روز مانده؟ آخرش هم برای تولدم برگشت خانه و پیشمان بود. زیباترین تولد عمرم بود. شهلا و عروس شهلا هردو کنارم بودند.

۵۳ روز در ICU با بیماری جنگید و بعد هم که حالش بهتر شد، ۲ هفته برگشت منزل. خوشحال بودم که حالش بهتر شده و من خوشبخت‌ترین مرد روی زمینم. ولی استرس داشتم. هر شب تا صبح تعداد نفس‌هایش را (که گاهی به ونتیلاتور وصل می‌شد) می‌شمردم که یک وقت از ۳۰ نفس در دقیقه بالاتر نرود؛ چون اگر می‌رفت نشانه بدی بود. روز قبل از رفتنش، یکی از پزشک‌های بیمارستان به دیدنش آمد و با خوشحالی به ما گفت که حالش عالی است و جای نگرانی نیست، مامان هم گفت «بزن به تخته». اما صبح روز بعدش رفت. قلبش دست از جنگیدن برداشت. انگار که آرام شده بود. ساعت ۴ صبح بوسیده بودمش و شب بخیر گفته بودم و ساعت ۷ برای همیشه خوابید.

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

حالا من مانده‌ام و شراره و یک زندگیِ بدون «شهلا» پیش رویمان. ولی بدون «شهلا» نیستیم. مادرم در قلب ما، هنوز زنده است.

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

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

ممنونم؛ سالار.

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

ساختار و رنگبندی طرح

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

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

تایپوگرافی

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

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

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

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

طراحی ریسپانسیو

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

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

ویدیو از عملکرد نسخه موبایل

طراحی بدون تصویر و پیکسل پرفکت

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

فشرده‌سازی و حجم پایین فایل‌ها

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

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

برای طراحی یک‌پزشک از HTML5 و CSS3 بدون پشتیبانی مرورگرهای قدیمی استفاده کردم. طرح فقط در اینترنت‌اکسپلورر ۱۰ و بالاتر و مرورگرهای مدرن کار می‌کنه و هیچ کاری برای پشتیبانی مرورگرهای قدیمی انجام ندادم.

برای CSS از Sass با Libsass استفاده کردم که سرعت بالاتری داره. از Libsass با استفاده از ابزار Grunt خروجی می‌گیرم و با استفاده grunt-autoprefixer پیشوندهای وندور رو به سی‌اس‌اس تولید شده اضافه می‌کنم و در نهایت فشرده‌سازی می‌کنم و بالای فایل مشخصاتش رو می‌نویسم. فایل‌های جاواسکریپت رو هم با استفاده از Grunt و پلاگین uglify به هم می‌چسبونم و فشرده‌سازی می‌کنم و بالای فایلشون مشخصاتشون رو می‌نویسم که همشون باهم ۱ فایل بشن فقط. همچنین برای Autoreload کردن، اسپرایت کردن تصاویر به صورت خودکار و ورژنینگ هم از Grunt استفاده می‌کنم.

همونطور که قبلا هم گفتم از اکستنشن کروم IcoMoon به صورت پریمیوم برای تولید آیکن‌فونت‌ها استفاده کردم که کنترل بسیار زیادی رو به من میده برای ساختن و ویرایش آیکن‌هام. آیکن‌هایی که نیاز به طراحی یا ویرایش داشتن رو با استفاده از Sketch طراحی کردم و خروجی SVG گرفتم و وارد IcoMoon کردمشون.

از ادیتور Sublime Text نسخه ۳ هم برای کدنویسی و انجام تمام کارهای مربوط به Git استفاده کردم.

صفحه‌های که من طراحی کردم

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

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

مشکلات فعلی طرح

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

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

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

به دلیل شرایط مختلفی که طی چند ماه گذشته برام پیش اومد، نتونستم که یک جا ثابت بمونم و از اینترنت ADSL ـی که داشتم استفاده کنم و به اجبار روی آوردم به وایمکس. از ۲۰ مرداد تا الان که ۱۱ مهر هست، من در حال استفاده از وایمکس‌های ایرانسل و مبین‌نت بودم. اما انقدر تجربه بدی داشتم که مجبور شدم بخاطرش این مطلب رو بنویسم تا شما هم اگر قصد استفاده از سرویس وایمکس این دو سرویس‌دهنده رو دارید، در تصمیم‌تون تجدید نظر یا تامل کنید.

موقعیت جغرفیایی و سرویس‌های مورد استفاده

من وایمکس ایرانسل و مبین‌نت رو عمدتا در این ۳ نقطه جغرافیایی استفاده کردم: خیابان گاندی، تهران. خیابان بهار جنوبی، تهران. گوهردشت، کرج. سرویس‌های مورد استفاده در هر دو مودم سرویس ۲ مگابیت بر ثانیه حجمی بوده.

هزینه‌های سرویس

• هزینه ماهیانه وایمکس مبین‌نت، ۴۵ هزارتومان به همراه ۵ گیگابایت حجم و ۱۳ هزار تومان برای هر گیگابایت حجم اضافه!
• هزینه ماهیانه وایمکس ایرانسل، ۷۱ هزار تومان به همراه ۱۲ گیگابایت حجم.

من هر دوی این سرویس‌ها رو همزمان شارژ کردم چون بخاطر کیفیت پایین، مجبور هستم متناوبا بین این دو سویچ کنم.

سرعت دانلود

با توجه به اینکه مسئولین این دو سرویس‌دهنده فکر می‌کنن تمام کاربران اینترنت، تنها استفاده‌ای که از اینترنت می‌کنن دانلود غیرقانونی فیلم و نرم‌افزار هست، اگر با دانلود منیجر چیزی رو دانلود کنید سرعت دریافت بین ۵۰ کلوبایت تا ۲۰۰ کیلوبایت بر ثانیه متغیر هست. البته مبین‌نت به ۲۰۰ میرسه ولی ایرانسل در بهترین حالت از ۱۳۰ بالاتر نمی‌ره در حالی که در تئوری باید هر دو ۲۵۶ کیلوبایت بر ثانیه سرعت دانلودشون باشه. ولی اگر بدون دانلود منیجر سعی کنید فایلی رو دانلود کنید، سرعت از ۵ الی ۶ کیلوبایت بر ثانیه بالاتر نمیره.

سرعت آپلود

سرعت آپلود هر دو سرویس در بیشتر مواقع کمتر از ۱۰ کیلوبایت هست و در بهترین حالت به ۴۰ کیلوبایت در ثانیه می‌رسه.

زمان پینگ

مهم‌ترین مشکل این دو سرویس زمان پینگ بالای اون‌ها هست. امروز سرعت پینگ DNS سرور خود ایرانسل ۱۳هزار میلی‌ثانیه بود! در بهترین حالت از ۷۰۰-۸۰۰ میلی‌ثانیه پایین‌تر نمیاد تازه اگر شانس بیاریم و پکت به مقصد برسه و دراپ نشه. پینگ ایرانسل از گوگل:

$:~ sallar$ ping google.com
PING google.com (173.194.35.14): 56 data bytes
...
Request timeout for icmp_seq 11
Request timeout for icmp_seq 12
Request timeout for icmp_seq 13
Request timeout for icmp_seq 14
64 bytes from 173.194.35.14: icmp_seq=12 ttl=47 time=3099.515 ms
Request timeout for icmp_seq 16
Request timeout for icmp_seq 17
Request timeout for icmp_seq 18
64 bytes from 173.194.35.14: icmp_seq=13 ttl=47 time=6724.858 ms
64 bytes from 173.194.35.14: icmp_seq=14 ttl=47 time=5924.321 ms
Request timeout for icmp_seq 21
Request timeout for icmp_seq 22
64 bytes from 173.194.35.14: icmp_seq=15 ttl=47 time=8902.048 ms
Request timeout for icmp_seq 24
64 bytes from 173.194.35.14: icmp_seq=16 ttl=47 time=9144.711 ms
64 bytes from 173.194.35.14: icmp_seq=17 ttl=47 time=9791.023 ms
64 bytes from 173.194.35.14: icmp_seq=18 ttl=47 time=9498.300 ms
64 bytes from 173.194.35.14: icmp_seq=19 ttl=44 time=9589.393 ms

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

پشتیبانی

بدترین چیز در مورد این سرویس‌ها پشتیبانی اون‌ها هست.

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

• مشکل از ف.یلتر شکن هست. (براشون توضیح میدم که استفاده نمی‌کنم و مشکل بدون اون وجود داره)
• مشکل از ویروسه! آنتی‌ویروس نصب کنید (توضیح میدم که سیستم عاملم مک هست و این مشکل روی گوشی و تبلت هم وجود داره)
• مشکل از ویندوز هست (توضیح میدم که از مک استفاده می‌کنم و مشکل روی گوشی و تبلت هم هست)
• مشکل از مرورگرتون هست (توضیح میدم که غیر از کروم با فایرفاکس و سافاری و مرورگرهای موبایل و تبلت هم تست کردم)
• مشکل از اینه که با سیم وصل نکردید (توضیح میدم که اولا لپتاپم امکان اتصال با سیم رو نداره دوما چرا با سیم هم تست کردم مشکل همین بود)
• مشکل از سرورهای خارج کشور هست (توضیح میدم که سرورهای داخل کشور هم مشکل دارن)
• مشکل از دکلی هست که بهش وصل شدید (توضیح میدم با تغییر فرکانس مودم و وصل شدن به دکل‌های دیگه هم این مشکل پابرجاست)
• مشکل از نرم‌افزاری هست که باهاش سرعت دانلود رو تست کردید، با فلان نرم‌افزار تست کنید و مجددا تماس بگیرید (توضیح میدم که من سرعت دانلود برام مهم نیست و سرعت باز شدن صفحات برام اهمیت داره ولی با این حال با تمام نرم‌افزارهای تست سرعت، سرعت رو امتحان کردم)
• مشکلی وجود نداره ولی با این حال ارجاعتون می‌دیم بین ۲۴ تا ۴۸ ساعت آینده همکاران ما باهاتون تماس می‌گیرن (که گاهی ۷ صبح زنگ می‌زنن، ۳-۴ روز بعد)
• مشکلی وجود نداره، لطفا در نظرسنجی ما هم شرکت کنید

وقتی بهشون توضیح میدم که من کاربر عادی نیستم و تمام راه‌های دیباگ که دوستان پیشنهاد می‌کنن رو قبلا بررسی کردم خودم، کاملا حرفم رو نادیده می‌گیرن و دوباره حرفاشون رو (مخصوصا اینکه با سیم وصل کنید بعد تماس بگیرید) رو تکرار می‌کنن. تا حالا حدود ۳۰ بار به پشتیبانی هرکدوم از سرویس دهنده‌ها زنگ زدم ولی تا امروز پیش نیومده که مشکل من رو حل کنن.

سخن آخر

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

پی‌نوشت: حدود ۱۰ بار ریلود کردم این صفحه رو تا بتونم این مطلب رو منتشر کنم. Connection Timeout می‌داد.

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

در این قسمت سالارکست، می‌خوام در مورد طراحی حرف بزنم، اینکه طراحی چی هست و چرا در دنیا اهمیت داره. مدتی پیش کتابی خوندم به اسم The Shape of Design نوشته Frank Chimero که یکی از طراح‌های مورد علاقم هست. فرنک در کتابش در مورد طراحی حرف می‌زنه و خوندنش این جرات رو به من داد که من هم در این پادکست از طراحی بگم؛ بعضی از کلمات رو هم از کتاب اون قرض گرفتم.

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

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

اپیزود دوم رو می‌تونید از ساند‌کلاد گوش بدید یا فایل MP3 رو دانلود کنید.

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

اسم سری پادکست رو گذاشتم سالارکست (SallarCast)، نمیدونم چرا ولی هربار دنبال اسم می‌گردم این اسم میاد تو فکرم! در کل قراره توی سالارکست در مورد طراحی، برنامه‌نویسی و تکنولوژی حرف بزنم چون این‌ها چیزهایی هستن که به شدت برام اهمیت دارن و بیشتر زمانم رو صرف فکر کردن بهشون می‌کنم.

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

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

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

@font-face {
  font-family: 'Yekan';
  src: url('yekan.eot'); /* IE9 Compat Modes */
  src: url('yekan.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
       url('yekan.woff') format('woff'), /* Modern Browsers */
       url('yekan.ttf')  format('truetype'), /* Safari, Android, iOS */
       url('yekan.svg#svgFontName') format('svg'); /* Legacy iOS */
}

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

• پسوند eot: فرمت فونتی که مایکروسافت برای استفاده در وب معرفی کرد و فقط در اینترنت اکسپلورر قابل استفادست.
• پسوند ttf: فرمت فونتی که اپل اواخر دهه ۸۰ میلادی برای استفاده توی PostScript توسعه داد و از اون زمان به عنوان فرمت استاندارد فونت‌ها شناخته شده. بیشتر مرورگرها از این فرمت پشتیبانی می‌کنن غیر از اینترنت اکسپلورر.
• پسوند svg: نوعی از فایل فونت که بر اساس فرمت SVG (تصاویر مقایس‌پذیر) ساخته شده و سافاری در سیستم عامل iOS قبل از نسخه ۵ فقط از این نوع فونت پشتیبانی می‌کرد. در کل پشتیبانی مرورگرها از این فرمت خوب نیست و برای فارسی هم قابل استفاده نیست.
• پسوند woff: فرمت فونتی که موزیلا در سال ۲۰۰۹ برای استفاده در وب توسعه داد و حالا کنسرسیوم وب اون رو به رسمیت می‌شناسه. از این فرمت بیشتر مرورگرهای مدرن و اینترنت اکسپلورر ۹ به بعد پشتیبانی می‌کنن.

فرمت woff:

گلیف‌های تایپ‌فیس در فرمت woff مثل بقیه فرمت‌ها (غیر از SVG) در جدول sfnt ذخیره می‌شن با این دو ویژگی:

1. جدول اطلاعات گلیف توی فرمت woff به صورت فشرده ذخیره می‌شه در نتیجه حجم فایل فونت خیلی پایین میاد. مثلا، قلم میترا سری بی، با فرمت ttf حدود ۶۰ کیلوبایت هست ولی فرمت woff همین قلم بدون افت کیفیت ۳۴ کیلوبایته. این موضوع برای استفاده در وب (برای سریع‌تر و سبک‌تر لود شدن صفحات) خیلی مهمه.
2. در ساختار فایل فونت woff امکان تعریف گلیف‌های خصوصی (private-use) و تعریف اطلاعات metadata و اجازه‌نامه وجود داره. برای همین خیلی از سازنده‌های فونت که نمی‌خوان اجازه استفاده از فرمت‌های ttf/otf ـشون رو در وب بدن، از woff استفاده می‌کنن.

با این توضیحات، اگر اینترنت اکسپلورر ۸ و پایین‌تر، مرورگر پیش‌فرض اندروید نسخه ۴.۳ و پایین‌تر و اپرا مینی براتون اهمیت نداره (که پیشنهاد می‌کنم نداشته باشه)، می‌تونید برای تعریف وب‌فونت در کارتون، فقط از فرمت woff استفاده کنید:

@font-face {
  font-family: 'Yekan';
  src: url('yekan.woff') format('woff');
}

اگر هم مرورگر پیش‌فرض اندروید ۴.۳ و پایین‌تر براتون اهمیت داره می‌تونید فرمت ttf رو هم نگه‌دارید ولی خب پیشنهاد نمی‌کنم. اینطوری هم کدتون ساده‌تر می‌شه هم می‌تونید از وب‌فونت‌های با کیفیت در پروژه‌هاتون استفاده کنید و نگران فرمت‌های مختلف نباشید.

—

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

موفق باشید.

اگر شما هم طراح وب هستید، یا حداقل به تکنولوژی علاقه دارید و اخبار و مقالات مربوط بهش طراحی و توسعه رو در اینترنت دنبال می‌کنید، حتما می‌دونید که این روزها چیزهایی وجود دارن به اسم Trend یا مُد در طراحی.

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

تمام وب‌سایت‌ها شبیه همدیگه شدن!

ترند/سبک‌های کنونی

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

طراحی تخت

همونطور که بالاتر توضیح دادم، طراحی تخت (Flat) به طرح‌هایی گفته می‌شه که چند خاصیت منحصر به فرد دارن (گاهی همه باهم، گاهی جداگانه): عدم استفاده از سایه‌ها و گردینت‌ها، عدم استفاده از گوشه‌های گرد، استفاده از تصاویر ساده/تک‌رنگ و اشکال هندسی به جای تصاویر چندلایه، چند‌بعدی یا چندرنگ، استفاده از تناژ رنگ منحصر به فرد و مات که تقریبا توی تمام طرح‌ها مشابه هستن، استفاده از یه فرم سایه به اسم Long Shadow که در واقع یه سایه طولانی و بزرگنمایی شده در یک جهت هست.

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

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

تصاویر تار

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

بازی با اسکرول در صفحه

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

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

تایپوگرافی متفاوت

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

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

پارالاکس

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

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

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

سایت مدیوم توی هدر مقالات از یه پارالاکس خیلی ملایم استفاده کرده که نشون میده پارالاکس هم در جای مناسب میتونه جذاب باشه.

فریم‌ورک‌ها

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

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

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

یکی از اتفاقات ناراحت‌کننده اخیر این بود که وب‌سایتی به نام DesignModo به تقلید از طراحی Layervault یه فریم‌ورک طرح کرد به اسم Flat UI که روی فریم‌ورک بوت‌استرپ سوار می‌شه و طراح‌های تنبل و ذوق‌زده، به سرعت در تمام طرح‌هاشون از این فریم‌ورک استفاده کردن و بازهم خیلی از وب‌سایت‌ها شبیه هم شدن. حتی اون‌هایی که از خود Flat UI استفاده نکردن، از رنگ‌هاش توی طرح‌هاشون استفاده کردن و وب‌سایت‌هایی که ظاهرشون شبیه بوت‌استرپ نبود، رنگ این فریم‌ورک رو به خودشون گرفتن.

انیمیشن‌های CSS3

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

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

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

فیلم‌های تکرار شونده در پس زمینه

فیلم‌های کوتاه ۱۰ ثانیه‌ای که به جای عکس به عنوان پس‌زمینه در وب‌سایت‌ها استفاده می‌شن، یکی از ترندهای جدید در طراحی هستن. این فیلم‌ها تقریبا بعد از معرفی شدن سرویس Vine در طراحی بکار برده شدن و هنوز هم ازشون استفاده می‌شه.

این یکی از ترندهای جذاب هست، ولی باز هم داره به سرعت داره ازش استفاده سوء میشه، تموم وب‌سایت‌ها دارن پر می‌شن از فیلم‌هایی که همش تکرار می‌شن و مانع تمرکز روی محتوی هستن.

اهمیت طراحی

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

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

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

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

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

حرف آخر

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

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

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

سال ۹۲ رو من می‌تونم تقسیم کنم به دو بخش: شکست‌های بزرگ کاری، پیروزی‌های بزرگ شخصی.

شکست‌ها و موفقیت‌های کاری

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

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

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

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

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

باورم این هست که برای نزدیک شدن به پیروزی، باید شکست‌ها رو پذیرفت.

موفقیت‌های شخصی

امسال برای من سال بزرگ خودشناسی بود. خرداد امسال من مطلبی نوشتم با عنوان It’s not worth it و توی اون مطلب به صورت خلاصه به مشکلاتم اشاره کرده بودم. اون مطلب بهانه‌ای شد برای اینکه شروع کنم به بیشتر شناختن خودم. اینکه چه چیزهایی برام ارزش داره و چه چیزهایی نه، و مرز تواناییم کجا هست و آیا می‌ارزه که خودم رو برای هرچیزی تا لبه مرز ببرم؟ آیا تمام افرادی که براشون وقت و انرژی می‌ذارم ارزش این وقت و انرژی رو دارن و برعکس، آیا به کسایی که باید بیشتر توجه می‌کنم به اندازه کافی توجه می‌کنم و براشون زمان می‌ذارم یا نه؟

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

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

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

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

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

سال نو پیشاپیش مبارک،
سالار.

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

ولی متاسفانه، این آخرین رویداد استارتاپ‌ویکند بود که من شرکت کردم. کسی رو ترغیب به شرکت نکردن نمی‌کنم ولی من دلایل خودم رو دارم:

فایده / ضرر برای مربی‌ها

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

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

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

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

رابطه شرکت‌کننده‌ها و مربی‌ها

تو این قسمت در مورد مربی‌های فنی می‌خوام صحبت کنم نه مربی‌های کسب‌و‌کار. چون مربی‌های کسب‌وکار همیشه بین شرکت‌کننده‌ها از محبوبیت خاصی برخوردارن به دلایلی.

متاسفانه اغلب شرکت‌کننده‌های فنی (گرافیک و برنامه‌نویسی) توی شهرهای بزرگ‌تر مثل تهران، از اعتماد به نفس کاذبی رنج می‌برن و فکر می‌کنن کسی که اومده اونجا مربی شده، اولا اومده کسب اعتبار کنه و دوما توانایی اینو نداره چیزی بهشون یاد بده. برای همین نه سوال می‌پرسن خودشون و نه وقتی ازشون سوال می‌شه در مورد کارشون به درستی و صراحت جواب می‌دن و بیشتر سعی می‌کنن کارشون رو بزرگ‌تر و مهم‌تر از چیزی که هست جلوه بدن. برای مثال، توی همین رویداد آخر، یکی از برنامه‌نویس‌ها گفت: من برنامه‌نویس برتر ایرانم! و تیم دیگه‌ای ادعا می‌کرد که ۳ سال هست روی Augmented Reality کار می‌کنه. سوال اینه که اگر همه حرفه‌ای هستن، چرا رویداد «آموزشی/تجربی» شرکت می‌کنن؟ برای نسکافه‌اش؟

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

اهمیت و ارزش ایده‌ها و پروژه‌ها در آینده

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

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

رویداد آخر

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

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

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

ممنون از اینکه وقت گذاشتید و این مطلب رو مطالعه کردید.
سالار.

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

قانون کپی‌رایت

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

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

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

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

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

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

• من توانایی خرید فلان نرم‌افزار خارجی یا ایرانی رو نداشتم و به شدت لازمش داشتم، پس غیرقانونی دانلود و ازش استفاده کردم.
• من توانایی خرید فلان نرم‌افزار خارجی یا ایرانی رو دارم، ولی مطمئن نیستم که ارزش خرید داشته باشه. اول نسخه غیرقانونیش رو دانلود می‌کنم و اگر پسندیدم، شاید نسخه اصلیش رو بخرم.
• ما در ایران هستیم و بخاطر تحریم، امکان خرید فلان نرم‌افزار، فیلم، موسیقی، فونت و غیره رو نداریم. یا اینکه بخاطر ارزش پولی‌مون، چیزی که ۲۰ دلار می‌ارزه برای ما حدود ۷۰ تومن تموم می‌شه پس نمی‌ارزه که بخریمش.
• من مطمئن نیستم که مهران مدیری قصد داره مثل قهوه تلخ بپیچونه یا نه. اون همه پول دادیم قهوه تلخ رو خریدیم و آخرش ساختش لغو شد، چه دلیلی داره دوباره این همه پول رو بریزیم تو حلقش وقتی باز هم می‌خواد بپیچونه؟
• فلان شرکت ایرانی یا خارجی یا شخص، انقدر پول داره که به پول من نیازی نداره. فرقی نمی‌کنه من بخرم یا نه، پس پولم رو جاهای بهتری خرج کنم. مثلا بدم به کسی که نیاز داره! مثلا چه لزومی داره من ویندوز رو بخرم؟ مایکروسافت خیلی پولداره!
• من برای نرم‌افزاری که آزاد (Open Source) نباشه پول خرج نمی‌کنم و فقط حاضرم وقتی پول بدم که منبع (Source Code) اون برنامه در اختیارم قرار بگیره.
• تمام نرم‌افزارهای جهان باید رایگان باشن! انسان آزاد به دنیا اومده و باید از نرم‌افزارهای آزاد استفاده کنه! (توضیح: بله می‌دونم آزاد و رایگان فرق دارن. لطفا تذکر ندید!)
• شرکت اپل انحصارطلبه!
• تمام سیستم‌عامل‌ها باید رایگان باشن. همینطوری که لینوکس رایگانه پس ویندوز و مک هم باید رایگان باشن. پس اپل و مایکروسافت انحصار طلبن پس ما پول نمی‌دیم!
• من از کجا بدونم فلان خواننده آلبومش ارزش خرید داره یا نه. اگر مسخره بود فقط یه بار گوش دادم چی؟

و خیلی توجیه‌های دیگه که انقدر زیادن که تو این مطلب نمی‌گنجن. البته تمام این توجیه‌ها «کاملا» اشتباه هستن.

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

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

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

—

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

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

قانون کپی‌رایت

اما کپی‌رایت چیه؟ توی مدخل ویکی‌پدیا مربوط به کپی‌رایت (حق تکثیر) این چند خط نوشته شده:

حق نشر، حقّ تکثیر یا کپی رایت (به انگلیسی: Copyright)، مجموعه ای از حقوق انحصاری است که به ناشر یا پدیدآورنده یک اثر اصل و منحصربه فرد تعلق می گیرد و حقوقی از قبیل نشر، تکثیر و الگوبرداری از اثر را شامل می شود. در بیشتر حوزه های قضایی، حق نشر از آغاز پدیدآمدن یک اثر به آن تعلق می گیرد و نیازی به ثبت اثر نیست.

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

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

قانون کپی‌رایت در ایران

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

فرهنگ رعایت قانون کپی‌رایت

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

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

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

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

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

احترام به کپی‌رایت

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

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

—

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

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

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

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

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

هم‌ترازی متون به این شکل صورت می‌گیره که بین کلمات داخل خط فاصله‌های اضافی قرار می‌گیره تا انتهای خط با خط‌های دیگه تو یک راستا قرار بگیرن. برای چاپ معمولا متون با نرم‌افزارهایی مثل Microsoft Word, Pages یا Adobe InDesign آماده می‌شن که امکانات زیادی برای هم‌تراز کردن متن دارن و لازم نیست که حتما فاصله‌های زیادی بین کلمات اضافه بشه که خوندن اون‌ها رو مشکل کنه، و از تکنیک‌هایی مثل Hyphenation (خط تیره گذاری) برای هم‌تراز کردن استفاده می‌کنن که در بیشترشون در وب قابل استفاده نیستن.

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

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

همچنین شما باید به این موضوع دقت کنید که کاربرای شما همیشه بینایی قوی ندارن و ممکن هست افراد کم‌بینا و دارای مشکلات بینایی یا با ناتوانی Dyslexia (خوانش‌پریشی) به وب‌سایت شما مراجعه کنن و سعی کنن مطالبتون رو مطالعه کنن، در این صورت این فضاهای خالی موجود در متن (White Space Rivers) مشکلات زیادی رو برای اون‌ها به وجود میارن. شما به عنوان طراح هیچ کنترلی روی مقدار فضاهای خالی‌ای که بین کلمات اضافه می‌شن ندارید.

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

یک راه‌حل

اگه با توجه به توضیحات بالا، هنوز اصرار بر این داشتید که از هم‌ترازی متون استفاده کنید، بهتر هست که از Hyphenation که بالاتر در موردش توضیح دادم استفاده کنید. بیشتر مرورگرها به طور پیش‌فرض از این قابلیت پشتیبانی نمی‌کنن ولی این قابلیت به CSS3 اضافه شده و انتظار میره که مرورگرها به تدریج اون رو پیاده‌سازی کنن. پشتیبانیش درحال حاضر خیلی ضعیف هست و فقط اینترنت اکسپلورر ۱۰، فایرفاکس ۶ و سافاری ۵.۱ و بالاتر این قابلیت رو پیاده‌سازی کردن.

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

همونطور که می‌بینید انتهای ۳ خط علامت خط تیره (dash) گذاشته شده و کلمات از وسط شکسته شدن و ادامشون رفته به خط بعد. لطفا به این نکته توجه کنید که هیچ‌کدوم از ابزارهای جاواسکریپتی توانایی Hyphenate کردن متون زبان فارسی به درستی رو ندارن. چون توی زبان فارسی برخلاف زبان‌های لاتین، از علامت خط تیره برای هم‌تراز کردن متون استفاده نمی‌شه. چون خط فارسی یک خط پیوسته هست و حروف به همدیگه می‌چسبن، نرم‌افزارهای پردازشگر متن برای هم‌تراز کردن متن از کشیدن حروف «بـــه ایــن صــورت» استفاده می‌کنن که انتهای هر خط با خط‌های دیگه هم‌تراز بشه و این امکان هنوز در وب وجود نداره (یا اگر داره من ازش بی‌اطلاعم). متن زیر از «چهل نامه کوتاه به همسرم - نادر ابراهیمی» انتخاب شده:

در حال حاضر فقط ابزارهای پردازش متنی (که بالاتر توضیح دادم) و گرافیکی (مثل فوتوشاپ) این امکان رو دارن.

—

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

موفق باشید.

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

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

آکوپیو

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

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

زیگ‌زاگ‌لب

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

هفته‌نامه عصرارتباط

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

مشکلات طراحی پیکسلی

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

font: 14px/22px "Helvetica Neue", Arial, sans-serif;

این روش به خودی خود ایرادی نداره، ولی وقتی بخوایم در مورد کاربردپذیری (Usability) و دستیابی‌پذیری (Accessibility) در طراحی و یا طراحی واکنش‌گرا (Responsive Design) حرف بزنیم و تصمیم بگیریم، روش تعیین سایز و ابعاد بر اساس پیکسل مشکلات فراوانی داره.

مشکلات تایپوگرافی

تقریبا تمام مرورگرها به صورت پیشفرض یک فونت و یک اندازه قلم برای تمام صفحات وب تعیین می‌کنند که اگر صفحه‌ای در وب خودش فونت و سایز رو تعیین نکرده باشه، صفحه رو بشه راحت مشاهده کرد. اکثر مرورگرها برای قلم پیش‌فرض فونت Times و سایز ۱۶ پیکسل رو انتخاب می‌کنند و این به صورت یه استاندارد در اومده؛ ولی نکته مهم در این مورد این هست که کاربری که از اون مرورگر استفاده می‌کنه می‌تونه این پیش‌فرض رو تغییر بده. مثلا کسی که مشکل بینایی داره، می‌تونه به تنظیمات مرورگرش رو باز کنه و به جای ۱۶ پیکسل، ۳۲ پیکسل رو انتخاب کنه، در نتیجه این کار، همه چیز روی وب باید ۲ برابر بشه ولی این اتفاق نمی‌افته چون بیشتر جاها، طراح‌های وب بر اساس پیکسل همه چیز رو تعیین کردند.

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

مشکلات اجزای رابط کاربری

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

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

مشکلات طراحی واکنش‌گرا (Responsive)

سومین مشکل عمده در طراحی پیکسلی، نقاط شکست (Break Point) در طراحی واکنش‌گرا هست. همونطور که می‌دونید ما بر اساس ابعاد صفحه‌نمایش‌های مختلف نقاط شکست طرح رو مشخص می‌کنیم. مثلا اینطور در نظر می‌گیریم که اگر عرض صفحه از ۷۶۸ پیکسل کوچک‌تر بود طرح توی تبلت (یا کامپیوترهای کوچیک) نمایش داده می‌شه و اگر از ۳۲۰ پیکسل کمتر بود، وارد محدوده صفحه نمایش موبایل می‌شیم. البته این تخمین‌ها معمولا خیلی وسیع‌تر شکل می‌گیرن مثلا ما می‌خوایم طرح رو به صورت جداگونه برای تبلت‌ها تو حالت افقی یا عمودی بهینه سازی کنیم و غیره.

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

رهایی از پیکسل

قبل از همه چیز می‌خوام در مورد دو واحد em و rem توضیح بدم.

واحد em

وقتی شما سایز متن رو بر اساس پیکسل مشخص می‌کنید، در واقع دارید ابعاد حرف M بزرگ رو بر اساس قلم جاری تعیین می‌کنید. مثلا اگر شما سایز قلم رو ۱۶ پیکسل انتخاب کردید، اندازه M بزرگ ۱۶ پیکسل در ۱۶ پیکسل هست. واحد em به همین موضوع اشاره داره: یک em برابر هست با ابعاد M بزرگ. حالا واحد em از کجا می‌فهمه که این ابعاد چقدر در چقدر هست؟ از عنصر والدش (Parent Element) این اندازه رو به ارث می‌بره. برای مثل این ساختار HTML رو ببینید:

<div class="parent">
    First Text.
    <div class="child">
        Second Text.
    </div>
</div>

و این کد CSS:

.parent{
    font-size: 18px;
}
.child{
    font-size: 1.5em;
}

و این نتیجه کد هست (می‌تونید باهاش بازی کنید):

همونطوری که توی نتیجه مشخص هست، سایز متن عنصر والد ۱۸ پیکسل هست و عنصر مد نظر سایز 1.5em داره. این رابطه به این معنی هست که عنصری که بر اساس em سایز داره، سایزش رو از عنصر والد ینی عنصری که پیکسلی سایز داره دریافت می‌کنه. 1.5em برابر هست با ۲۷ پیکسل (۱.۵ × ۱۸ = ۲۷). هرچقدر عناصر رو تودرتو کنیم، باز هم همین قانون پا بر جاست. حتی اگر عنصر والد هم سایزش بر اساس em باشه. این مثال رو ببینید:

می‌بینید که هر کدوم از متن‌ها سایزش رو از والدش می‌گیره و بر اساس اون محاسبه می‌شه. حالا اگر والد مستقیمش سایز نداشته باشه چی می‌شه؟ از نزدیک‌ترین والدی که سایز داره سایزش رو میگیره و بر اساس اون محسابه می‌شه.

حالا اگر هیچ عنصری در صفحه بر اساس پیکسل سایز نگرفته باشه چی؟ اگر یادتون باشه بالاتر گفتم که اکثر مرورگرها یک سایز پیش‌فرض برای صفحات در نظر می‌گیرن که عموما ۱۶ پیکسل هست. بنابراین ما می‌تونیم تمام عناصر صفحه رو بر اساس em طراحی کنیم. مهم‌تر از همه اون‌ها، سایز قلم اصلی صفحه رو که معمولا روی عنصر body یا html قرار می‌گیره (و بالا مثال پیکسلیش رو دیدید) می‌تونیم بر اساس em انتخاب کنیم:

body{
    font: 1em/1.5 "Helvetica Neue", Arial, sans-serif;
}

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

واحد rem

مشکلی که در مورد واحد em وجود داره اینه که همیشه بر اساس والد مستقیمش محاسبه می‌شه. ینی اگر یه عنصر سایز 1.2em گرفت، دیگه همه عناصر داخل اون عنصر مبناشون این سایز جدید هست، حتی اگر اون‌ها سایزشون 1em باشه، ابعاد M بزرگ رو از مستقیم‌ترین والدشون دریافت می‌کنن. ولی ما همیشه این رو نیاز نداریم و بیشتر مواقع می‌خوایم که سایز بر اساس سایز اصلی صفحه که همون 1em که روی body یا html تعیین کرده بودیم محاسبه بشه.

برای حل این مشکل می‌تونیم از واحد rem (که مخفف root em هست) استفاده کنیم. می‌دونید که root به معنی ریشه هست، بنابراین وقتی بر اساس rem به عنصری سایز می‌دید، سایز اون عنصر بر اساس ریشه‌ای ترین عنصر صفحه محاسبه می‌شه (مثلا body یا html) و از والد مستقیمشون تاثیر نمی‌گیرن. اگر ریشه‌ای‌ترین عنصر صفحه سایز مشخصی نداشته باشه، سایز بر اساس پیش‌فرض مرورگر که قبلا در موردش صحبت کردیم محاسبه می‌شه. برای واحد rem فرقی نمی‌کنه که چقدر توی ساختار عناصر پایین رفته باشیم یا تودرتو باشه، همیشه از ریشه‌ای‌ترین عنصر سایزش رو میگیره و این خیلی توی تایپوگرافی خوب برای وب به ما کمک می‌کنه. برای بازی با این واحد نمونه زیر رو ببینید:

تو این مثال می‌بینید که اون متن Forth Text با وجود اینکه داخل چند تا عنصر دیگه با سایزهای متن مختلف هست ولی چون با rem بهش سایز دادیم، اندازش با اون Normal Text که هیچ سایزی نداره برابره.

حل مشکلات طراحی پیکسلی

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

حل مشکل تایپوگرافی

اگر برای تعیین سایز تمام متن‌هایی که در صفحه وجود دارن از واحدهای em و rem استفاده بشه، دیگه هیچ مشکلی در نمایش صحیح صفحه به وجود نمیاد. توی مثال قبلی که دیدید، چون سایز عنصر html در صفحه 1em تعیین شده و بقیه عناصر داخل صفحه از اون تبعیت می‌کنن، اگر برید تو تنظیمات مرورگرتون و سایز پیش‌فرض رو از ۱۶ پیکسل به ۳۲ پیکسل تغییر بدید، همه چی به درستی بزرگنمایی می‌شه و دقیقا همون اتفاق‌هایی می‌فته که اتنظار داشتید: تمام متن‌ها ۲ برابر می‌شن.

حل مشکل اجزای رابط کاربری

شما می‌تونید از واحدهای em و rem به تنها برای متون داخل صفحه، بلکه برای تمام واحدهایی که توی CSS وجود دارن استفاده کنید. مثلا برای width, height, padding, margin و غیره.

برای مثلا من دکمه‌های زیر رو درست کردم:

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

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

نکته: توجه کنید که تمام خصوصیت‌های CSS که سایزشون بر اساس rem و em تعیین می‌شه، سایزشون رو از خصوصیت font-size عنصر جاری دریافت می‌کنن. برای همین هست که تونستیم فقط با تغییر font-size در مثال بالا حتی padding رو هم زیاد و کم کنیم به صورت خودکار و دیگه نیاز به تعیین دوبارش نباشه.

حل مشکلات طراحی واکنش‌گرا (Responsive)

مشکلی که بالاتر در موردش حرف زدم رو راحت می‌شه با واحد em برطرف کرد. ولی باید قبلش مفهوم طراحی واکنش‌گرا رو توی ذهنتون تغییر بدید:

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

عرض‌هایی که مشخص می‌کنید رو بر اساس پیکسل تعیین نکنید، در عوض از واحد em استفاده کنید. اوایل کار ممکنه این کار براتون سخت باشه برای همین می‌تونید یه عددی رو به عنوان پیش‌فرض صفحه (همون پیش‌فرض مرورگر که ۱۶ پیکسل هست مثلا) در نظر بگیرید و عرض پیکسلی مورد نظرتون رو تقسیم بر اون عدد (مثلا ۱۶) کنید تا مقدار em به دست بیاد. برای مثال صفحه رو کوچیک کنید تا جایی که همه چیز به هم بریزه و اون جا متوقف بشید و ببینید که عرض چقدر هست، مثلا عرض ۵۶۰ پیکسل کمتر صفحه شما شلوغ می‌شه. حالا این عدد رو تقسیم رو ۱۶ کنید، عدد 35em به دست میاد و می‌تونید این رو به عنوان یه نقطه شکست تو طرحتون اضافه کنید. مثلا من تو یکی از طرحای اخیرم ۳ نقطه شکست تعیین کردم: معمولی، متوسط و کوچیک. نتیجه این شد:

/* -- Breakpoint (.bp1)
------------------------------------------------------------- */            
@media only screen and (max-width: 30em) {

}

/* -- Breakpoint 2 (.bp2)
------------------------------------------------------------- */            
@media only screen and (max-width: 48em) {

}

/* -- Breakpoint 3 (.bp3)
------------------------------------------------------------- */            
@media only screen and (max-width: 60em) {

}

حالا داخل این Media Query ها تغییراتی که روی رابط کاربری می‌خوام رو می‌دم. البته بهتر هست که برای طراحی واکنش‌گرا از راه‌حل Mobile First استفاده بشه که شرحش تو این مطلب نمی‌گنجه.

استفاده از em به جای پیکسل چند تا خاصیت داره:

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

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

جمع بندی

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

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

امیدوارم از این مطلب استفاده کرده باشین.
سالار.