بحث و گفتگو درباره نوشتن فریمورک جامع سمت کلاینت

سلام دوستان،

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

• گرید بندی 24 ستونه و حرفه ای جهت پوشش اغلب نیازها
• کلاسهای متعدد و پرکاربرد برای راحتی طراح و استفاده کنندگان و جلوگیری از نوشتن css اضافه و اتلاف وقت
• امکان ریسپانسیو سازی بصورت بسیار ساده در کمترین زمان
• درگیری کمتر طراح با کدهای جاوا اسکریپت و جایگزین آن استفاده از class و attribute های دیگر
• دارای نسخه کامل rtl و ltr
• تعویض حالت rtl و ltr فقط با تغییر فایل استایل (بدون نیاز به تغییر کلاس ها و کدهای html و css) برای سایتهای چند زبانه
• اعتبارسنجی حرفه ای و کامل فرم ها
• ادیتور متن سفارشی شده (با استفاده از ادیتور های آماده)
• اسلایدشو حرفه ای (با استفاده از پلاگین های آماده)
• سفارشی شده ی پلاگین های jQueryUI و راحتر نمودن استفاده از آنها
• امکان ساخت سایتهای تک صفحه ای و ریسپانسیو در کمترین زمان
• از مهمترین ویژگی این فریمورک استفاده راحت و بسیار ساده آن خواهد بود
• و ...

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

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

سلام

خیلی خوبه اسمش چیه؟
اسلاید شو هم بذارید
از افکت های زیبای css استفاده کنید
از باتن های متنوع بذارید


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

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

با سلام و ارزوی موفقیت برای شما
چند پیشنهاد براتون دارم :
1 - با یه طراح دیگه کار کنید تا زودتر تموم شه
2 - کاری کنید که کاربر برا خودش در پنجره های بازشونده فرم تماس و درباره ما درست کنه
3 - اسلاید شوهایی استفاده کنید که دارای گرافیک واقعا زیبا باشند

متاسفانه مشکل کار با همکار اینه که همکار حرفه ای یا وجود نداره یا سرشون شلوغه و مشکلات دیگه ...

آقای پورمحمد کمکی از دست من بر میاد ؟
من تا آخر تابستون وقت آزادم بیشتره ... فکر میکنم بتونم روی بعضی جاها که از دستم بر میاد کار کنم ...
پیشنهاد میکنم کد رو بزارید روی محزن GitHub تا هر کس دوست داشت توی توسعه ی اون کمک کنه ...

نقل قول:

---

نوشته شده توسط mohamad_torabi

اگرم کمک خواستید من هم مایل به همکاری یا کمک هستم

---

ههههههههههههههههه

راستی کد های jquery ui رو میتونید خلاصه یا کم حجم کنیذ؟
مثلا برای درگ کردن اون همه کد اضافه رو دیگه نخوایم لود کنیم

نقل قول:

---

نوشته شده توسط دانیال دزفولی نژاد

ههههههههههههههههه

---

این برا چی بود؟

نقل قول:

---

نوشته شده توسط mohamad_torabi

این برا چی بود؟

---

اقا دانیال نه حوصله کل کل دارم نه چیز دیگه ای

شما به دل نگیر :چشمک:

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

نقل قول:

---

نوشته شده توسط alirezaoshz

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

---

مگه شما چند ساله دارید کار میکنید؟؟؟؟؟؟؟؟

1.5 سال هست که هم طراحی گرافیک فتوشاپ ، هم ادوبی فلش و css و html و jquery کار میکنم و اندکی جاوااسکریپت و php هم بلدم !:لبخند:

نقل قول:

---

نوشته شده توسط Jarvis

آقای پورمحمد کمکی از دست من بر میاد ؟
من تا آخر تابستون وقت آزادم بیشتره ... فکر میکنم بتونم روی بعضی جاها که از دستم بر میاد کار کنم ...
پیشنهاد میکنم کد رو بزارید روی محزن GitHub تا هر کس دوست داشت توی توسعه ی اون کمک کنه ...

---

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

نقل قول:

---

نوشته شده توسط دانیال دزفولی نژاد

راستی کد های jquery ui رو میتونید خلاصه یا کم حجم کنیذ؟
مثلا برای درگ کردن اون همه کد اضافه رو دیگه نخوایم لود کنیم

---

اگه امکانش باشه آره میشه خلاصه کرد.

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

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

نقل قول:

---

نوشته شده توسط qartalonline

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

---

آقا محمد در مورد سطح طراحی من که میدونید ....

برای گریدبندی چه نامی برای کلاس ها پیشنهاد میکنید؟ به نظرتون شکل نوشتاری شون چگونه باشه؟
مثلا تو فریمورک بوت استرپ برای هر device یه اسم کوتاه دو حرفی مثل xs - sm - md - lg هستش. و برای ستون بندی بصورت col-xx-xx هستش مثل col-md-6 .

من که برای خودم اینطوری میزنم

gid1 gid2 gid3

یا
gid960 gid800 و...

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

در واقع ما چهار تا رزولیشن داریم.
1. بزرگتر از 1280
2. کمتر از 1280 و بزرگتر از 768
3. کمتر از 768 و بزرگتر از 480
4. کمتر از 480

برای هرکدوم از اینها باید اسم انتخاب بشه.

لطفا ادامه بدین دوستان استفاده کنند

این تاپیک رو ایجاد کردم تا دوستان هم مشارکت کنن و نظراتشون رو بگن.

سعی میکنم نسخه اولیه که دارای امکانات پایه ای هستش رو تا 1 الی 2 ماه قرار بدم.

دمتون گرم

خوب مثلا ما چه نظری بدیم؟
همه ی کارای شما که توپ از اب در میان

نقل قول:

---

نوشته شده توسط qartalonline

این تاپیک رو ایجاد کردم تا دوستان هم مشارکت کنن و نظراتشون رو بگن.

سعی میکنم نسخه اولیه که دارای امکانات پایه ای هستش رو تا 1 الی 2 ماه قرار بدم.

---

موفق باشید

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

یه مثال میزنم.
مثلا یه قابلیتی برای برخی از کلاسهای این فریمورک تعرف شده که وقتی قبل از نام کلاس از کلمه child-is_ استفاده بشه استایل های تعریف شده به اون کلاس برای فرزندهاش اعمال میشه.
مثلا یه کلاسی داریم به نام right که به المنت مورد نظر استایل float: right; رو میده.
فرض کنید میخوایم یه منو بسازیم و به همه آیتم هاش رو float: right; بدیم:
1. یه راهش اینه که بصورت زیر عمل کنیم:

کد HTML:

---

<ul>
    <li class="right"><a href="#">تست</a></li>
    <li class="right"><a href="#">تست</a></li>
    <li class="right"><a href="#">تست</a></li>
    <li class="right"><a href="#">تست</a></li>
</ul>

---

2. راه دیگه اینه که بصورت اختصاصی استایل بدیم بدون استفاده از کلاس های فریمورک بصورت زیر:

کد HTML:

---

<style type="text/css">
    .menu li{
        float: right;
    }
</style>
<ul class="menu">
    <li><a href="#">تست</a></li>
    <li><a href="#">تست</a></li>
    <li><a href="#">تست</a></li>
    <li><a href="#">تست</a></li>
</ul>

---

3. اما راه دیگه که فریمورک پیشنهاد میکنه استفاده از کلاس child-is_right بصورت زیر:

کد HTML:

---

<ul class="child-is_right">
    <li><a href="#">تست</a></li>
    <li><a href="#">تست</a></li>
    <li><a href="#">تست</a></li>
    <li><a href="#">تست</a></li>
</ul>

---

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

سلام
من فایل css پارلا رو پیدا کردم D:

پیشنهاد میکنم نام طراح رو هم ذکر کنید اون بالا

@charset "UTF-8";



/**********************/

/** Parla Freamwork. **/

/**********************/



/**

    class .xs- : Landscape phones and down                  @media (max-width: 480px)

    class .sm- : Landscape phone to portrait tablet         @media (max-width: 768px)

    class .md- : Portrait tablet to landscape and desktop   @media (max-width: 992px) ***default

    class .lg- : Large desktop                              @media (min-width: 1200px)

*/

از کجا؟!!!
من تو پروژه های فعلی که انجام میدم ازش استفاده میکنم.
البته این کدها دائما درحال تغییر هستن. الان تو فایل جدید به شکل زیر هستن.

@charset "UTF-8";



/*****************************/

/** Parla Freamwork.        **/

/** Test version 2014.07.30 **/

/** http://parla.gunash.com **/

/*****************************/





/**

    class .ms- : Portrait tablet to landscape and desktop   @media (max-width: 992px) ***default

    class .ls- : Large desktop                              @media (min-width: 1200px)

    class .ss- : Landscape phone to portrait tablet         @media (max-width: 768px)

    class .xs- : Landscape phones and down                  @media (max-width: 480px)

*/

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

ضمنا اشتهای زیادی برای کد زدن دارم (هر وقت که بخوام!) بنابراین می تونید رو من هم حساب باز کنید...

نقل قول:

---

نوشته شده توسط IamOverlord

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

ضمنا اشتهای زیادی برای کد زدن دارم (هر وقت که بخوام!) بنابراین می تونید رو من هم حساب باز کنید...

---

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

همه ی پست هارو نخوندم بجز پست اول

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

چیزی که در فریم ورک های سمت کلاینت مشکل داره بیشتر حجمشون هست و rtlاشون

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

نکته ی مهمی که خیلی اذیت میکنه توی فریم ورک ها cross browser بودنشون هست

بنظرمن 2 را هست:
1- کلا IE رو حذف کنید و اینجوری دستتون بازتره تا از css3 استفاده کنید

2- IE رو هم مرورگر حساب کنید و جوری بنویسید که توی همه ی مرورگرها با اختلاف کمتری نمایش داده بشه از طرفی کل css3 استفاده نمیشه

البته میشه در این بین از کتابخانه های js که برای css3 در ie در موجود هست استفاده کنید

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

اینارو به اصطلاح compress میکنیم بعضی از قابلیت هاش از کار می افتن

داکیومنت هم مهمه همچنین نام گذاری کلاسها که توی ذهن بمونه

اینا توی پروژه ها بیشتر اذیت میکنن که تو ذهن من بود

موفق باشید

نقل قول:

---

نوشته شده توسط qartalonline

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

---

به نظرم کسی که JS اش فعال نیست اصلا بهتره نیاد اینترنت! :بامزه:
در مورد JS که می تونیم یه کاری کنیم... جوری کدمون رو بنویسیم که اگه دستورات JS اجرا نشدن ظاهر مناسب کار حفظ بشه (بله یه سری قابلیت ها دیگه در دسترس نیست...) اما اگه کدهای ‌JS اجرا شد، شروع کنه به استفاده از امکاناتی که در اختیارش هست و تغییراتی رو ایجاد کنه...
البته باید جوری این کارو کرد که تفاوت فعال بودن یا نبودن JS در ظاهر کار تغییر به خصوصی ایجاد نکنه... فقط در بحث Responsive بودن و یه سری Effect ها و Animation ها و ...
اما به غیر از بحث JS، در مورد CSS Media Queries یه چیزایی شنیدم... می ارزه که امتحان کنیم... می مونه بحث پشتیبانی از این ویژگی در دستگاه های خیلی قدیمی... :متفکر:

حالا یه ایده ای هم که داشتم که احتمالا با این بحث حجم فریمورک منتفی می شه این بود که یه سری ویژگی ها مثل ‌Smooth Typing (شبیه همونی که تو Microsoft Word هست...) و Smooth Scrolling رو به صورت توکار، Widget هاش پشتیبانی کنن...

بلاخره پروژه به کجا رسیده ؟؟؟ میشه یه گزارشی بدید تا ما هم در جریان باشیم؟

پروژه در حال انجام هستش. منتهی چون پیچیدگی های زیادی داره (بخصوص در قسمت js) به همین دلیل طول میکشه.

در مورد پشتیبانی از ie هم، از ie9 و بالاتر پشتیبانی خواهد شد.

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

حدودا 50 درصد فریمورک تکمیل شده.
چون اسم فریمورک روش گذاشته میشه باید قالبیت های مختلفی داشته باشه تا مورد استقبال قرار بگیره. از طرف دیگه پایه اصلی فریمورک با css نوشته شده ولی برخی از امکانات هست که اگه کسی بخواد از اونها استفاده کنه باید فایل جاوا اسکریپت رو ضمیمه کنه. مثل امکانات DropDown یا Accordion یا Modal و ...

نقل قول:

---

نوشته شده توسط qartalonline

حدودا 50 درصد فریمورک تکمیل شده.
چون اسم فریمورک روش گذاشته میشه باید قالبیت های مختلفی داشته باشه تا مورد استقبال قرار بگیره. از طرف دیگه پایه اصلی فریمورک با css نوشته شده ولی برخی از امکانات هست که اگه کسی بخواد از اونها استفاده کنه باید فایل جاوا اسکریپت رو ضمیمه کنه. مثل امکانات DropDown یا Accordion یا Modal و ...

---

میشه یه نسخه ی آزمایشی بذارید؟

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

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

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