آموزش فریم ورک رایگان Helix

[Mahboobe.Maleki 53]

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

[saman etasi 13]

سلام

خانم ملکی فوق العاده هست این کار شما من واقعا از این مهم خوشحال شدم

فقط من یک انتقاد سازنده میکنم قصدم اسپم نیست

امیدوارم به صورت کامل و پیوسته آموزش هاتون تو این تاپیک ببینیم

و جوری نباشه که به صورت نیمه کاره انجام شود.

با تشکر از زحمات شما و دیگر مدیران عزیز انجمن جوملا فروم:auizz3ffy9vla57584x:auizz3ffy9vla57584x:auizz3ffy9vla57584x:25::25::25::1::1::35::35::1::1::1:

[Mahboobe.Maleki 53]

فریم ورک helix، یک فریم ورک متن باز هست که کار باهاش ساده س. با این فریم ورک به سادگی میتونید قالب های جوملایی زیبایی بسازید. از ساده تا پیچیده... همین طور تم های ریسپانسیو ( یا همون واکنش گرا)

برای طراحی قالب با این فریم ورک نیازی به برنامه نویسی ندارید. Google Fonts در هلیکس پشتیبانی میشه. همچنین قابلیت راست به چپ برای زبانهایی مثل فارسی (RTL support). به این معنی که زبان پیش فرض سایت اگه فارسی باشه، قالب بصورت RTL در میاد.

4 نوع منو رو هم پشتیبانی می کنه: mega menu, spilit menu, drop line menu,Moo menu

قابلیت فشرده سازی cssو جاوا اسکرپیت هم بصورت پیش فرض وجود داره که سرعت لود قالب سایت شما رو افزایش میده (CSS and Javascript Compression)

پشتیبانی از css3 هم از دیگر ویژگی های این فریم ورک هست. هلیکس برای css3 از PIE استفاده میکنه (PIE در واقع یه امکان اضافه برای اینترنت اکسپلورر (الان 6 تا 8) هست که به مرورگر امکان اجرای کدهای css3 رو میده)

برای دانلود بسته ی نصبی این فریم ورک به مسیر Downloads برید . اینجا بسته های نصبی برای جوملا 2.5 و 3 موجوده. همین طور یک template خالی و یک پلاگین.

برای شروع بسته ی مخصوص 2.5 رو به همراه پلاگین دانلود کنید.

به زودی کار رو شروع می کنیم ...

ویرایش شده در خرداد 92 توسط Mahboobe.Maleki
اضافه کردن عکس

[Mahboobe.Maleki 53]

خب بعد از اینکه بسته ی نصبی رو برای جوملا 2.5 با حجمی حدود 8 مگابایت دانلود کردید، میرسیم به نصب.

نیازمندی های سیستم برای نصب helix :

1- فریم ورک Helix برای کار به جوملا 1.5 یا 1.6 (1.7و 2.5) نیاز داره.

2- نسخه ی php مورد نیاز که خود سایت سازنده توصیه میکنه نسخه ی PHP 5.2.x و یا بالاتره

3- نسخه ی My Sql مورد نیاز به توصیه سایت سازنده MySQL 4.1 و بالاتر (حداقل نسخه ی 3.23)

شما اگه آخرین نسخه های wamp یا xamp رو نصب کنید این موارد پشتیبانی میشه.

برای نصب 2 حالت کلی هست. اول اینکه شما یه جوملای خام 2.5 نصب کنید و بعد پلاگین و سپس template مربوط به helix رو نصب کنید ...

دوم اینکه از راه ساده تر نصب بسته ی آماده ی helix استفاده کنید (shaper_helix_quickstart_j25)

پس از روش دوم استفاده می کنیم که مثل نصب یه جوملای ساده است:

1- بسته رو در روت www وب سرور خودتون (در اینجا c:\wamp\www\) اکسترکت کنید.(البته extarct نه extract here! )

2- به مرورگر برید و با تایپ آدرس localhost/shaper_helix_quickstart_j25 وارد پروسه ی نصب بشید.از اینجا به بعد توضیح خاصی نداره چون همگی روش نصب جوملا رو بلدیم. اگه کسی از دوستان اینجا رو مشکل داره میتونه به تاپیک آموزش جوملا 2.5 از مبتدی تا پیشرفته اختصاصی انجمن جوملای ایران مراجعه کنه.

همین طور روش نصب روی لوکال به طور کامل در نشانی Install a Quickstart Pack توضیح داده شده. من برای صرفه جویی در وقت از این مرحله صرف نظر کردم.

بعد از نصب، سایت شما بصورت تصویر زیر خواهد بود:

ویرایش شده در خرداد 92 توسط Mahboobe.Maleki
اضافه کردن عکس

[Mahboobe.Maleki 53]

بعد از نصب بسته ی هلیکس، وارد مدیریت جوملا بشید و به مدیریت قالب ها برید. قالب shaper_helix - Default رو باز کنید. پنل مدیریت قالب کلی جزئیات داره:

یک به یک گزینه های این جا رو با هم بررسی می کنیم.

بررسی تب Basic

تنظیمات لوگو:

در تب Basic تنظیمات قالب، بخشی برای تنظیمات لوگو هست مثل تصویر زیر که شما میتونید ابعاد لوگو، و نوعش که text یا تصویر باشه مشخص کنید:

تغییر Layout:

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

1- تغییر استایل :

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

2- تغییر کپی رایت:

تغییر کپی رایت هم همون طور که میبینید به سادگی امکان پذیره.

3- در بخش helix logo هم میتونید تصمیم بگیرید که لوگوی هلیکس نمایش داده بشه یا خیر

بررسی تب Menu

در تب منو، مثل تصویر ، میتونید نوع منو، استایل منو ،عرض منو، نوع انیمیشن باز شدن منو، نمایش یا عدم نمایش تصویر منو و ویژگی های دیگه رو تنظیم کنید:

بررسی تب Fonts

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

در این تب شما میتونید فونت های مربوط به body، header و بخش های دیگه رو مشخص کنید.

ضمن اینکه با ویرایش css های قالب میتونید از فونت های استاندارد فارسی برای وب هم استفاده کنید

تب Menu Assignment

در این تب هم شما میتونید تعیین کنید که قالب به کدوم منوها اختصاص پیدا کنه (مثلا برای فقط منوی اصلی ....)

تب Advanced

در این تب گزینه های دیگه ای رو برای قالب میتونید تنظیم کنید.

مثل زمان کش، فشرده سازی css و js (که توصیه میشه حتما فعال کنید)، فعال کردن Google Analytics ، تعیین RTL یا LTR بودن فونت ها و ....

تب Help & Update

در تب هم، اطلاع رسانی نسخه ای از فریم ورک که استفاده می کنید و جزئیات مربوط به پشتیبانی فریم ورک وجود داره:

برای دیدن تصاویر دیگه میتونید به سایت سازنده Using template features برید (البته من کامل تر اینجا گفتم!)

پ ن : این مطلب ادامه دارد...

ویرایش شده در خرداد 92 توسط Mahboobe.Maleki
توضیحات بیشتر

[mortaza_max 13]

همچنان منتظر آموزشهاتون هستيم. فقط يه پيشنهاد داشتم اگه آموزشتون رو هم به شكل Pdf در آخر آموزشتون پيوست كنين بهتر ميشه بنظرم.

[blazhel 16]

ممنون خانوم ملکی با بات اموزش خوبتون

فقط به نظرم بهتر است در ادامه اموزش جزییات روهم قرار بدین مثل نحوه تنظیم مگا منو و چند مورد دیگه روی این فریم ورک موجوده فکر کنم برای دوستان مفید باشه

[pars2web.ir 10]

چرا مطلب ادامه نداره و چند وقته ادامه آموزش قرار نمیگیره؟

[ابوالفضل طالبی 280]

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

[Mahboobe.Maleki 53]

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

تاپیک آموزش های ویدئویی: فیلم آموزشی طراحی قالب با فریم ورک هلیکس Helix Framework

[Mahboobe.Maleki 53]

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

1- فایل templateDetails.xml رو از داخل پوشه ی قالبتون (که از حالا بهش میگیم YOUR_TEMPLATE) باز کنید. در این مثال، میخوایم استایلی اضافه کنیم که اسمش رو style00 میذاریم:

<field name="style" 
type="list" 
default="style1" 
label="PRESET" 
description="PRESET_DESC">
<option value="style1">Style1</option>
<option value="style2">Style2</option>
<option value="style3">Style3</option>
<option value="style4">Style00</option>
</field>

2- حالا باید فایل css استایل خودمون رو بسازیم. پس فایل Style00.css رو در مسیر YOUR_SITE/templates/YOUR_TEMPLATE/css/styles/ ایجاد می کنیم.

3- برای شروع محتویات فایل style3.css رو در فایل خودمون style00.css کپی می کنیم.

4- خب. تموم شد! فقط کافیه که این استایل رو مطابق میل خودتون تغییرش بدید و ازش لذت ببرید!

[Mahboobe.Maleki 53]

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

در مدیریت قالب، و در تب basic گزینه ی Layout هست که بصورت زیر تنظیم میشه:

Main body width: عرض کامل قالب . این مقدار رو بصورت درصد یا پیکسل میتونید تنظیم کنید . و پیش فرض خودش 960پیکسل هست.

Left Column Width و Right Column Width: این 2 پارامتر پهنای ستون های راست و چپ قالب پیش فرض فریم ورک رو کنترل می کنن. و مقدارشون بر اساس درصد تنظیم میشه که پیش فرض اون هم 22درصد هست

Inset1 Width و Inset2 Width: این 2 پارامتر هم پهنای ستونهای میانی Inset1,2 رو تعیین میکنن و باز مقدارشون بر اساس درصد تعیین میشه.

به تصویر دقت کنید

[ATTACH=CONFIG]4394[/ATTACH][ATTACH=CONFIG]4395[/ATTACH]

[gilar 11]

با تشکر از Mahboobe.Maleki بابت آمورششون

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

[gilar 11]

بچه ها کسی روی این فریم ورک کارنکرده دل وقلوه اش را کشیده باشه بیرون مارا راهنمایی کنه ؟

[aparizi 10]

من یه سایت دارم که بر پایه قالب هلیکس است پیغام آپدیت برای نسخه جدید هلیکس نمایش داده می شود

چطور می توان فقط هلیکس را آپدیت کرد بدون اینکه به سایت و قالب لطمه ای بخورد؟

[darab 10]

پس از فعالسازی قالب ارور زیر نمایش داده میشود

Fatal error: Cannot redeclare class lessc_formatter_compressed in /home3/*****/public_html/plugins/system/helix/core/classes/lessc.inc.php on line 3350

[dara 10]

مر30 از لطفتون من که خیلی استفاده کردم

[aynalserat 17]

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

پس از فعالسازی قالب ارور زیر نمایش داده می شود

Fatal error: Cannot redeclare class lessc_formatter_compressed in /home3/*****/public_html/plugins/system/helix/core/classes/lessc.inc.php on line 3350

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

[مسعود 11]

سلام

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

ragagame.ir

[Mahboobe.Maleki 53]

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

اکسترکت و نصب کردید؟

[kiyan_SAd 13]

سلام دوستان چطور میشه فایل سی اسا اس به فریمورک اضافه کرد که وقتی قالب راست چین هست این فیل رو اجرا کنه همانند فایل template.rtl.css ممنون میشم راهنمایی کنید

[kiyan_SAd 13]

سلام چطور میشه یک فایل سی اس اس به فریمورک اضافه کرد که وقتی قالب به صورت راست چین هست این فایل رو هم اجرا کنه مثل این که وقتی سایت راست چین میشه فایل template.rtl.css رو اجرا میکنه ممنون میشم راهنماییم کنید

[مسعود 11]

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

[kiyan_SAd 13]

سلام چطور میشه یک فایل سی اس اس به فریمورک اضافه کرد که وقتی قالب به صورت راست چین هست این فایل رو هم اجرا کنه مثل این که وقتی سایت راست چین میشه فایل template.rtl.css رو اجرا میکنه ممنون میشم راهنماییم کنید

کسی نبود یک توضیح کوچیک بده

[mmfallah 67]

از کد زیر استفاده کنید

<?php  if($this->direction == 'rtl') : ?>
<link rel="stylesheet" href="<?php echo $this->baseurl ?>/templates/<?php echo $this->template ?>/css/template_rtl.css" type="text/css" />
<?php endif; ?>