حدوداً پارسال بود که تصمیم گرفتم یه کتابخونه مبتنی بر css برای ساخت انواع تولتیپ بنویسم. چرا که تو خیلی از پروژه‌ها شاید بهتر باشه برای ساخت فیچری مثل تولتیپ دیگه از کتابخونه‌های جاواسکریپتی استفاده نشه. حاصلش شد پروژه‌ای به اسم Simptip که بنظر خودم با استفبال خوبی همراه شد. چون فکر نمی‌کردم تو خبرنامه و وبلاگ‌هایی مثل codrops ، cssdesignawards و خیلی‌های دیگه معرفی شه؛ دولوپرهای دیگه تو تکمیلش همکاری کنن و ریپو گیتهابش محبوب شه.
من Simptip رو با Sass نوشتم و اگر شما از همین نسخه توی کارهاتون استفاده کنید، دستتون برای کاستومایز کردنش باز هست. اما اگر هم از خروجی css استفاده کردید، به اندازه‌ی کافی منعطف هست که جواب نیازاتون رو بده. من برای Simptip صفحه‌ای برای معرفی و نمایش دمو و داکیومنت آماده کرده‌ام؛ هرچند داکیومنتی که توی گیتهاب هست هم کامله.
امیدوارم این کتابخونه بتونه براتون مفید باشه و خوشحال میشم اگر ازش استفاده کردید، به من اطلاع بدید.
ما تو دوره‌ای به سر می‌بریم که معمولاً طراح‌ها و برنامه‌نویس‌ها سعی میکنند برای سرعت بخشیدن به انجام پروژه‌ها از ابزارهایی ویژه کمک بگیرند. از جمله‌ی این ابزارها برای طراحان وب Sass و Less هستند که میتونند خیلی برای استایل نویسی مفید واقع شن. به کمک این ابزارها ما می‌تونیم توی کدهای سی‌اس‌اس خیلی راحت‌تر ارث‌بری کلاس‌ها رو پیاده کنیم، برای مقادیری مثل رنگ‌ها متغیر تعریف کنیم و توابعی بنویسیم که چندین بار با ورودی‌های مختلف ازشون استفاده کنیم و خیلی چیزهای دیگه. ما تو این مطلب قراره به این بپردازیم که چطور باید کار با Sass و Compass رو شروع کنیم. در واقع چطور باید اون‌ها رو نصب و ازشون استفاده کنیم. پس اگر قصد دارین با Sass شروع به کدنویسی کنید در ادامه مطلب با من همراه باشید.
شاید برای شما هم این سؤال بوجود اومده باشه که برای افزایش سرعت بارگذاری سایت توجه به چه بایدها و نبایدهایی لازم هست. از طرفی کمتر بودن زمان لود سایت یکی از پارامترهای مثبتی هست که موتورهای جستجو به اون توجه میکنند. جدای این مسئله سرعت مناسب برای جابجایی بین صفحات تجربه لذت بخشی برای کاربر به ارمغان میاره. بنابراین چکیده‌ای تهیه کردم که هرچند کامل نیست، اما میتونه مفید واقع شه. پس در ادامه مطلب با من همراه باشید.
اچ‌تی‌ام‌ال۵ و سی‌اس‌اس۳ حاوی قابلیت‌های جدیدی هستند که به هرچه بهتر و زیباتر شدن اپلیکیشن‌های بستر وب کمک میکنه. مقالات و مثال های متعددی برای یادگیری آنها در رفرنس‌های انگلیسی زبان وجود داره که باعث میشه اکثریت طراحان فارسی زبان از فراگیری آنها عقب بمونند و البته به عده‌ای هم کمک میکنه. در این مدت نبود یک منبع آموزشی به زبان فارسی به شدت احساس میشد و حالا جامعه طراحان وب فارسی میتونند از کتابی به زبان فارسی که به تازگی نشر پیدا کرده برای افزایش مهارت‌های خود استفاده کنند.
آقای امیرعباس عبدالعلی که قبلاً کتاب ۱۰۱ نکته و ترفند برای استفاده از سی‌اس‌اس در طراحی وب رو ترجمه و به کمک انتشارات ناقوس منتشر کرده بود، این بار کتاب دیگری در مورد آموزش html5 و css3 ترجمه کرده که با توجه به موفقیت کتاب قبلی و دانش تخصصی ایشون در مورد طراحی وب، مطمئناً این کتاب هم با استقبال روبرو میشه.
آموزش html5 و css3 در قالب پروژه نام کتابی‌ست ۳۶۰ صفحه‌ای که موئلفین آن خانوم الکسیس گلدستین، آقای لوئیس لازاریس و خانوم استلا ویل هستند و امیرعباس عزیز زحمت ترجمه اون رو برعهده داشته. همونطور که از نام این کتاب پیداست، با تأکید بر درگیر شدن بر انجام کار عملی و مثال‌های متعدد، یک پروژه از آغاز تا پایان پیاده سازی میشه؛ ضمناً فایل های پروژه در یک دی‌وی‌دی ضمیمه کتاب هست. البته قبل از خوندن این کتاب، باید با اساس اچ‌تی‌ام‌ال و سی‌اس‌اس آشنا باشید.
این کتاب در حال حاظر در بیست و پنجمین نمایشگاه بین المللی کتاب تهران در غرفه انتشارات ناقوس در دسترس هست. خرید پستی آن هم در سایت ناقوس ممکن هست. برای آشنایی بیشتر با محتوا، نویسندگان و مترجم این اثر و تماس با آنها میتونید به سایت این کتاب مراجعه کنید و همینطور ۵۰ صفحه اول کتاب رو به رایگان دانلود کنید. این یک فرصت عالی برای شروع یک کار عالی هست.
امروزه خیلی از طراح‌های رابط کاربری وب که علاقه به استفاده از ترفندهای نو توی طرح‌هاشون دارند با مشکلی روبرو هستند که هنوز راه حل جامع و کاملاً تضمینی واسش پیدا نشده. این مشکل برمیگرده به عدم انطباق مرورگرهای متفاوت با ویژگی‌های جدیدی که طراحان ازشون استفاده میکنند. حتی این مسئله نه فقط به انواع مرورگرهای وب ختم نمیشه، بلکه کار رو به ورژن های مختلف یک مرورگر هم میرسونه. اگر کمی شفاف‌تر صحبت کنم باید اینطور بگم که خیلی از امثال من دوست دارن توی طرح‌ها از html5 و css3 استفاده کنند، اما بعضی مرورگرها از بعضی ویژگی‌ها پشتیبانی نمیکنند. این باعث میشه یک طرح با کدهای یکسان توی مرورگرهای مختلف و حتی ورژن‌های مختلف به صورت یکسان نمایش پیدا نکنه. با این اوصاف راه حل چیست؟ استفاده از ویژگی‌های قدیمی؟ خیر.
عده‌ای توسعه دهنده‌ها کتابخانه ای با استفاده از زبان جاوااسکریپت نوشتند به نام Modernizr که به ما طراحان این امکان رو میده تا بدونیم کدوم مرورگر از کدوم ویژگی های اچ‌تی‌ام‌ال و سی‌اس‌اس پشتیبانی میکنه و از کدوم‌ها پشتیبانی نمیکنه. به این ترتیب طراح برای هر دو حال کد متناسب رو مینویسه و خیالش جمع هست که اگر مرورگرِ کاربر از ویژگی مورد نظرش پشتیبانی نمیکرد یه کد جایگزین برای پایداری اینترفیس اجرا میشه؛ همین و بس. اما متأسفانه من توی چندتا از مقاله های فارسی که سعی داشتند توضیح و یا تعریفی از این کتابخانه داشته باشند دیدم این حس رو به خواننده منتقل میکنند که با استفاده از Modernizr، مرورگر میتونه html5 و css3 رو پشتیبانی کنه یا قابلیت‌های مورد نیاز رو توی مرورگر شبیه سازی کنه که مطلقاً اینطور نیست. حتی یه جا خوندم این کتابخانه از جی‌کوئری استفاده میکنه در حالی اصلاً اینطور نیست. کار این کتابخونه فقط اینه که مشخص کنه فلان مرورگر از فلان ویژگی پشتیبانی میکنه یا نه. این منه طراح هستم که میگم اگر مرورگر از خاصیت انیمیشن در سی‌اس‌اس پشتیبانی نمیکنه، پس اون انیمیشن رو با جی‌کوئری شبیه سازی میکنم و در غیر این صورت هم از خاصیت انیمیشن به صورت معمول در سی‌اس‌اس استفاده میکنم. همین مسئله باعث میشه اینطور برداشت شه که Modernizr با جی‌کوئری کار میکنه یا امکاناتی رو به مرورگر اضافه میکنه در حالی که اینطور نیست. به عنوان یه مثال دیگه در مواقعی که مرورگر از خاصیت placeholder در اچ‌تی‌ام‌ال پشتیبانی نمیکنه، من از کتابخانه placeholder.js بهره میبرم. بحث کتابخانه‌هایی که باعث میشن مرورگرها خاصیت‌هایی که پشتیبانی نمیکنند رو شبیه سازی کنند اساساً فرق میکنه.
برای استفاده از امکانات این کتابخانه به دو روش میشه استفاده کرد. بهره بردن از جاوااسکریپت و یا استفاده از سی‌اس‌اس. من پیشنهاد میکنم برای اطلاعات بیشتر داکیومنت این کتابخانه رو مطالعه کنید و برای دیدن چند نمونه مثال و اسامی ویژگی‌های قابل پشتیبانی این لینک رو ببینید. لازم میدونم یادآور شم شما میتونید این کتابخانه رو با توجه به نیازهای خودتون دانلود کنید تا حجم کمتری داشته باشه.
من به شخصه موافق این نیستم که طراح ها با استفاده از این کتابخانه ها و یا امثالش سعی کنند راحتی کاربر رو فراهم کنند در حالی که نتیجه این کار چیزی نیست جز عدم توجه کاربر به استفاده از نسخه های به روز انواع مرورگر و البته افزایش حجم صفحات وب. این در حالیه که ما در کشوری زندگی میکنیم که از فقر سرعت اینترنت رنج میبره.
