امگا ۳ یا امگا ۴، مسئله این است!

قالب دروپال

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

اول باید پاسخ چند سوال رو بدم:
۱- چرا من باید از Omega استفاده کنم؟ چرا zen بهتر نیست؟
پاسخ: قبلا مقاله ای در این زمینه در دروپالیون نوشتیم که بین قالب های پایه دروپال مقایسه ای انجام شده بود. بد نیست اون رو بخونید. اما اگر اون مقاله رو خوندید و هنوز مجاب نشدید، پیشنهاد میکنم خودتون قالب ها رو بررسی کنید.

۲- اصلا چرا باید از یک قالب پایه دروپال استفاده کنم؟ چرا نباید از اول خودم یک قالب طراحی کنم؟
پاسخ: من یک سوال دیگه میپرسم. من زبان PHP رو بلدم چرا باید از فریم ورک symphony استفاده کنم؟ آیا لزومی داره؟ اگر جواب سوال شما اینه که باید از فریم ورک ها استفاده کنم پس جواب شما هم اینه که از قالب های پایه استفاده کنید و برعکس.

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

اگر دوست دارید در مورد امگا۳ بیشتر بدونید و کارتون رو با اون شروع کنید قبلا ۵ سری مقاله در این مورد در دروپالیون نوشته شده که میتونید به اونها یک نگاه بندازید. اول دوم سوم چهارم پنچم

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

  امگا ۳ امگا ۴

Layout

طرح بندی

  • استفاده از 960 گرید سیستم
  • آماده شده با ۴ سایز صفحه نمایشگر
  • یک رابط کابری خوب برای تنظیم کردن layout
  • با استفاده از ماژول Delta و Context میتونید layout های آماده شده رو در بقیه قسمت های سایت استفاده کنید.
  • شما میتوانید سایز صفحات نمایشگرهای متفاوت را در صفحه تنظیمات انجام دهید.
  • یک طرح بندی کاملا سیال
  • سایز صفحات نمایشگر رو فقط آنجایی که نیاز داردی وارد کنید.
  • ساخت طرح بندی ها در page.tpl.php بنابراین دیگر نیازی به ماژول delta نخواهید داشت. با کد نیاز شما رفع میشود.
  • تقسیم بندی CSS ها به ۲ دسته مدیریت و هسته که باعث لود سریع تر فایل های CSS تا ۳۰ درصد میشود.
HTML5 بله بله
SASS نه. اما شما میتوانید در صورت نیاز اون رو اضافه کنید. بله. اما اجباری نیست. شما میتوانید مستقیما فایل های css رو تغییر بدید، گرچه استفاده از SASS پیشنهاد میشود.
SUSY نه. اما شما میتوانید در صورت نیاز اون رو اضافه کنید. بله، اما حتما شما میتوانید از هر گرید سیستمی که دوست دارید استفاده کنید.
Breakpoints نقاط انفصال ( با استفاده از Media Queries ) از طریق تنظیمات قالب قابل تغییر هستند. نقاط انفصال در فایل های Css به وسیله Sussy قابل تغییر هستند. از طریق رابط کاربری نمیتوانید آنها را تغییر دهید.
CSS

۵ فایل CSS اصلی: global, default, narrow, normal و wide. و forms, text, branding و چیزهای دیگر که ممکنه شما اونها رو غیرفعال کرده باشید.

فایل های CSS از ساختار SMSCSS استفاده میکند. اما شما میتوانید هرگونه که دوست دارید فایل های خودتون رو ایجاد کنید.
Polyfill js libraries
  • Formalize.js
  • Media Queries ( یک فایل جاوااسکریپت که به شما اجازه میده بر اساس سایر صفحه نمایش کاربر تصمیمات متفاوتی بگیرید)
  • Equal Heights.js
  • Selectivizr.js
  • CSS3 Media Queries JS
  • Respond.js
  • CSS3 PIE
  • HTML5 shiv
اضافات
  • امکان فعال و غیر فعال کردن فایل های CSS ماژول ها و هسته قالب امگا
  • امکان تنظیم سایز صفحات نمایش
  • Apple touch icons
  • پشتیبانی از Clear type برای ویندوز
  • Handheld friendly ( برای پشتیبانی از موبایل های Blackberry)
  • Mobile Optimized ( برای Pocket PC ها)
  • Viewport (برای موبایل های امروزی )
  • پشتیبانی از Chrome Frame و IE Edge 
توسعه
  • نمایش مکان های بلوک ها
  • Grid overlay
  • کار با دراش بعد از نصب omega tools
  • ایجاد theme registry در هر لود صفحه
  • تجمیع فایل های css و JS در هر لود صفحه
  • تشخیص عرض مرورگر
  • پشتیبانی درونی از LiveReload
  • حالت دموی نواحی
  • نصب تمام ruby gems که نیاز است
  • پشتیبانی عالی و زیاد از دراش
Panels کار با Panels استفاده از طرح بندی ها در رابط کاربری Panels و همچنین ماژول Context
حلاصه Omega با Delta یک روش جالب و شلوغ برای ایجاد طرح بندی های متفاوت است. اما برای انجام بعضی کارها در امگا۳ نیاز به انجام تغییرات در کد خواهید داشت. و ایجاد یک قالب کاملا سیال با امگا ۳ کمی پیچیده است.

این ورژن از امگا کاملا برای طراحان حرفه ای آماده شده است. چون از SASS+SUSSY استفاده میکند. که علاوه بر قدرت، سرعت کار را نیز چندین برابر میکند.امگا۴ امکانات کمی در رابط کاربری به شما میدهد.
اگر شما با کد راحتید این نسخه مال شماست.

به صورت کلی امگا ۴ بیشتر شبیه یک API است.

حاشیه نواحی تو در تو ( در طرح بندی های پیچیده ) بسیار به سختی انجام خواهد شد. برای این منظور بهتر است از panels استفاده کنید. یا این لینک رو ببینید.
 
 

 

خوب اینها که خوندید چیزهایی بود که در صفحه خود سایت امگا نوشته شده بود. جملات و عبارات زیادی در جدول بالا هست که نیاز به بررسی و توضیح داره. اما مسلما نمیشه همه چیزهایی که اینجا هست رو کاملا توضیح داد. مسائلی که شاید دونستنش مهم باشه اینهاست: SASS, Compass, SUSSY

SASS چیست؟ یک زبان برنامه نویسی css است. یعنی یک جورایی یک فریم ورک است. بهتره سایتش رو ببینید. شما کدهای css رو به روش SASS مینویسید و کامپایلر SASS اونها رو به CSS ترجمه میکنه. خوب چه فایده ای داره؟ فایدش اینه که نوشتن کدهای CSS خیلی سریع تر میشه. بعد امکانات زیادی رو به css اضافه میکنه. مثل تعریف متغیر یا تعریف توابع برای استفاده از اونها که به اونها Mixin گفته میشه.

SUSSY چیست؟ یک گرید سیستم (grid system) است. در اصل کارش اینه که شما با استفاده از اون صفحه خودتون رو تقسیم بندی میکنید و جای بلوک ها رو در قالبتون مشخص میکنید. در امگا ۳ از گرید سیستمی به اسم 960 استفاده میشد که در امگا ۴ به صورت پیش فرض از SUSSY استفاده میشه. مسئله اینه که شما طراحی گرید صفحه رو به وسیله زبان SASS انجام میدید. و کامپایلر SASS که از زبان Ruby استفاده میکنه اونها رو به CSS تبدیل میکنه.

Compass چیست؟ یک library برای SASS است. یعنی چی؟ یعنی اینکه شما از Compass استفاده میکنید که بعضی از mixin ها رو خودتون ننویسید. مثلا شما میخواهید در فایل های CSS یک gradiant به یک کلاس بدید. معمولا خودتون اون رو مینویسید و در ضمن باید یادتون باشه که کدهای CSS برای gradiant در مرورگرهای متفاوت فرق میکنه. بنابراین باید این کدها رو برای مرورگرهای متفاوت هم بنویسید. اما با کمک Compass شما فقط کافیه هر جا که میخواهید gradiant بدید mixin مربوط به gradiant رو import کنید و بعد از کامپایل تمام کدهای CSS نوشته میشه. یعنی به جای نوشتن مثلا ۱۵ خط کد CSS شما فقط یک خط کد مینوسید و کدهای استاندارد برای شما ایجاد میشه.
استفاده از Compass سرعت شما رو به شدت افزایش میده. همینطور هم که دیدید برای استفاده از Compass هم باید از SASS استفاده کنید.

هر سه ابزار SASS, SUSSY, Compass با زبان Ruby نوشته شده اند. و در بقیه پروژه ها نیز قابل استفاده هستند. میتونم اینطور بگم ترکیب SASS, SUSSY, Compass و امگا چیزی شبیه twittr Bootstarp خواهد شد. سعی میکنم در مطالبی جداگانه بیشتر در مورد این قابلیت ها توضیح بدم.

خوب دیدیم که استفاده از امکانات بالا چه مزیت های زیادی برای ما ایجاد میکنه. و چرا امگا۴ اینقدر تغییر کرده.

چقدر طولش میدی! خوب بالاخره میخوای بگی از امگا ۴ استفاده کنیم یا امگا۳؟

چرا عصبانی میشید؟ همه اینها مقدمه جواب همین سوال بود. شاید بشه در یک جمله اینطور گفت:
اگر حرفه ای هستید یا میخواهید حرفه ای شوید از امگا۴ استفاده کنید. اگر نمیخواهید درگیر کد شوید و به مفاهیم بالا نیاز ندارید از امگا ۳ استفاده کنید.

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

امیدوارم بتونیم در آینده نزدیک آموزش هایی برای شروع به کار با امگا ۴ در سایت بزاریم. تا اون موقع اگر شما نکته جدیدی در مورد امگا ۴ یاد گرفتید میتونید در نظرات به ما بگید یا اگر دوست دارید یک مقاله بنویسید و در سایت به اسم خودتون منتظر کنید.

تگ های مطلب: 

دیدگاه‌ها

تشکر از مقاله خوبتون

درود منتظر آموزشهای بعدیتون در مورد امگا 4 هستم و تا اونموقع سعی میکنم sass,susy,compass.mixin یاد بگیرم

مرسی ، جالب بود ، می گم مقاله

مرسی ، جالب بود ، می گم مقاله ها رو تی فیس بوک هم بزارید ، اونجا راحت تر میشه متوجه تغییرات شد ;)

سلام علی جان

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

آره ، اونجا دیدمش ، با اینکه

آره ، اونجا دیدمش ، با اینکه لایک کردم ولی نشون نداده ، قضیه همون تنظیمات جدید فیس بوک بود ، مرسی

امگا 3 فعلا

سلام ممنون بابت مقالات خوبت و عشق به دروپال! من هم برای سایتهام از امگا 3 استفاده می کنم که بی نهایت عالی هست.بخصوص برای مشتری های پردرسر که هر روز یه نظر جدید برای تغییرات صفحه اصلی دارند. وقتی دیدم امگا 4 اومده سریع رفتم و نصبش کردم اما چشمتون روز بد نبینه. از زندگی نا امید شدم. اصلا هیچیش شبیه امگا3 نیست. یکی دو روز باهاش سروکله زده دم و بعد هم پاکش کردم. دقیقا با نظر شما موافق هستم . حتما باید قبل ازکار با امگا 4 یه آپدیت اساسی از نظر اطلاعات طراحی وب بشی و گرنه خیلی گیج کننده هست. ممنون بابت مقالات خوبتون. در ضمن قرار بود تاریخ فارسی را برای popup و scheduler درست بشه .الان می شه دانلود کرد؟

موافقم

موافقم الان چندوقته که از ماژول schaduler پشتیبانی انجام میشه اما در مورد popup باید تا ورژن صبر کنید

ممنون بابت مطالب خوبتون؛ بی

ممنون بابت مطالب خوبتون؛ بی صبرانه منتظر بقیه آموزش ساخت قالب با امگا هستیم.....

سلام

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

مشکل در تاریخ و فارسی نویسی

سلام و خسته نباشید اول این که از سایته خوبتون تشکر میکنن خیلی چیزای خوبی ازش یاد گرفتم دوم اینکه من مشکلی داشتم کلن تو متن های انگلیسی و فارسی که با هم هستن مثلن یک نمونش اینه که : ارسال شده توسط admin در تاریخ فلان به این صورت میاد: در admin ارسال شده توسط تاریخ فلان چه راهکاری پیشنهاد میکنید ؟؟

احتمالا مشکل از css ها باید

احتمالا مشکل از css ها باید باشه. به تگ مربوط به نمایش تاریخ direction: rtl; رو اضافه کنید

حل شد

از شما ممنونم مشکلم حل شد حالا یک مشکل دیگه چطوری میشه استایل name هایی که توسط module image cache اضافی شده را تغییر نام دهیم ؟؟ باتشکر از شما

بسیار خوب، مطلب جالبی بود.

بسیار خوب، مطلب جالبی بود. مخصوصا عشقمون دروپال!

توی امگا 4 چرا از less

توی امگا 4 چرا از less استفاده نشده ؟ به جاش از sass استفاده شده. به نظر من less بهتر از sass هست. http://css-tricks.com/sass-vs-less/

به نظرم خیلی مسئله بهتر و

به نظرم خیلی مسئله بهتر و بدتر بودن در میان نیست. این نکته رو توجه کنید که برای نوشتن sass از دو نوع فایل میشه استفاده کرد یکی scss یکی هم sass. که این دو هم با هم تفاوت هایی دارند. تفاوت عمده less و sass اینه که less به node.js نیاز داره و sass به ruby. من البته تجربه زیادی در استفاده از هر کدام از اینها ندارم اما بر اساس چیزهایی که خوندم و همین چند خط کدی که با sass زدم فکر میکنم که تفاوت اونها خیلی عمده نیست. اما چیزی که خیلی مهمه اینه که بسیاری از فریم ورک های گرید سیستم ها و css ها در حال حاضر از ruby استفاده میکنند. به همین دلیل switch کردن بین اونها حتما ساده تره.

مثل همیشه عالی

مثل همیشه عالی

سلام ، لطفا یه آموزشی در مورد

سلام ، لطفا یه آموزشی در مورد کار با اومگا 4 هم بگید ، هر کاری کردم چیزی ازش نفهمیدم :d

چشم علی آقا. تو فکرش هستم که

چشم علی آقا. تو فکرش هستم که یک مطلبی بنویسم.

سپاس فراوان

سپاس فراوان

دیدگاه جدیدی بگذارید

آخرین ارسال ها

محتواهای محبوب

درباره ما

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

تماس با ما

با ما تماس بگیرید.

logo-samandehi