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

این تصور عموم و زیبایی طلبی مشتریان از صفحات وب آنها امری است طبیعی و هر کسی با سفارش طراحی وب سایت خود دوست دارد صفحات زیبایی داشته باشد اما آیا این همه ی چیز است؟!!!

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

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

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

اما در حقیقت وب فارسی موضوع به این سمت بیشتر سوق داده شده است راستی شما تا چه حد با این مسئله موافق هستید؟

نویسنده : almassoft.ir

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

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

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

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

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

در زیر یکسری از نمونه طرحهای دستی یا اسکتچهایی که برای یکسری وب سایت هایی که طراحی کردم رو قرار دادم تا شما رو تا حدی با روند کار آشنا کرده باشم.

سایت پک

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

طرحهایی که در نهایت تایید شدن و در فتوشاپ طراحی شدن را در زیر مشاهده می کنید :

فروشگاههای اینترنتی شارژ موبایل

طرحهای زیر هم مربوط به چند فروشگاه اینترنتی شارژ موبایل هست که متعلق به شرکت رایانمهر می باشد :

طرح فوق به این شکل تبدیل شد : (نمونه این وب سایت در این آدرس قابل مشاهده است)

نمونه ای دیگر :

و طرح تبدیل شده به فتوشاپ : (نمونه این سایت در می توانید در این آدرس ببینید)

فروشگاه شارژ همراه اول

طرحهای زیر مربوط به فروشگاه همراه اول می باشد :

طرحهای فتوشاپی اسکتچهای بالا :

فروشگاه ایرانسل شارژ

طرحهای زیر مربوط به فروشگاه ایرانسل شارژ می باشد :

و طرح کامل شده در فتوشاپ :

امیدوارم این مطلب مورد توجه شما قرار گرفته باشد، موفق باشید…

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

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

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

مطلبی که در زیر مشاهده می کنید مربوط به کنفرانس امسال روز کاربردپذیری در تهران هست که در دانشگاه علم و فرهنگ تهران برگزار شد و من در این کنفرانس رابط کاربری جدید مایکروسافت یعنی مترو را معرفی کردم. مترو نام اینترفیس جدیدی است که مایکروسافت در نرم افزارهای جدید خود به کار خواهد برد، از جمله ویندوزفون7، ویندوز8، دشبورد جدید اکس باکس و … در این مقاله سعی می کنم شما را با ویژگیهای این اینترفیس جدید آشنا کنم.

تاریخچه اینترفیس مترو

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

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

تصویری که در زیر مشاهده می کنید مربوط به سیستم عامل ویندوزموبایل است که سالها مورد استفاده کاربران قرار می گرفت اما در حال حاضر این اینترفیس به دلیل مشکلاتی که ذکر کردم کاربردی نیست !

اینترفیس ویندوزموبایل 7

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

اینترفیس سایر سیستم عاملهای موبایل

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

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

ایده مترو از کجا آمد ؟

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

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

اینترفیس های ویندوزفون 7

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

اینترفیس نهایی ویندوزفون 7

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

ساده و تمیز

در اینترفیس مترو دیگر خبری از دکمه های 3 بعدی و برجسته، انعکاسها، گرادیانتها و … نیست. همه چی ساده و تمیز و در عین حال کاربردی هست. از whitespace ها به خوبی استفاده شده است و تایپوگرافی نقش بسیار برجسته ای دارد.

Infographic در برابر iconographic

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

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

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

ویژگیهای اینترفیس مترو

• تمیز ، سبک ، باز ، سریع
• تایپوگرافی
• متحرک و زنده
• محتوی مهم تر از ظاهر
• قابل اعتماد

تمیز ، سبک ، باز ، سریع

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

تایپوگرافی

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

متحرک و زنده

• توسط حرکت کاربر تشویق به انجام عملی می شود
• به محتوی این امکان را می دهد که کاربردپذیرتر باشد
• به محتوی ارائه شده بعد می دهد
• توسط حرکت کاربر می تواند قسمتهای مختلف سیستم را مشاهده کند

محتوی مهم تر از ظاهر

• کاربر از طریق خود محتوی جذب می شود نه از طریق کارهای گرافیکی اضافه
• از المانهای گرافیکی که به محتوی ربطی ندارند کاسته می شود
• خود محتوی همان رابط کاربری می باشد
• کاربر به راحتی می تواند با خود محتوی ارتباط برقرار کند

قابل اعتماد

• طراحی برنامه های مترو متناسب با کارکردشان باید باشد
• نباید اطلاعاتی را که مربوط به برنامه نیست در آن گنجانده شود
• با کاربران باید رو راست باشد و آنچه را که واقعا می تواند در اختیارشان بگذارد باید ارائه دهد

2 نکته مهم در اینترفیس مترو

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

صفحه ورودی ، صفحه کاربر

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

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

کاشیهای زنده یا همان Live Tile ها اطلاعات مورد نیاز کاربر را به روز می کنند و به او نشان می دهند بدون اینکه نیاز باشد کاربر برنامه ای را اجرا کند و وارد آن بشود تا اطلاعات مورد نیاز خود را بدست آورد.

Live Tile

Live Tile ها در اینترفیس مترو تنها فقط یک آیکان نیستند، آنها علاوه بر نشان دادن آیکان و نام برنامه می توانند اطلاعات مهم درخواستی کاربر را روی صفحه اصلی نشان دهند.

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

هاب در مترو

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

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

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

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

هاب و تک صفحه

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

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

استفاده از رنگ

در اینترفیس مترو رنگ اهمیت ویژه ای دارد، از رنگها برای جذب کردن کاربر ، شخصی سازی تجربه کاربر و اهمیت دادن به مراتب کار استفاده می شود

استفاده از تایپوگرافی

• کلمات برای کاربر باید خوشایند به نظر برسند
• به تناسب، سنگینی و اندازه باید اهمیت داده شود

همانطور که مشاهده می کنید در 3 قسمت مختلف چگونه به اندازه، وزن و تناسب فونت ها دقت شده است.

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

استفاده از حرکت

• از حرکت برای ایجاد اشتیاق در کاربر باید استفاده شود
• توجه به این نکته اهمیت دارد که توازن در استفاده از حرکت خیلی مهم است، استفاده بیش از اندازه از حرکت تاثیر آنرا از بین می برد

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

استفاده آسان

• برای کاربر تجربه ثابت و قابل پیش بینی را باید در نظر گرفت
• آشنا بودن برابر است با سادگی در استفاده

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

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

• آیکانهایی که در منوی برنامه ها استفاده می شود باید ثابت و یکسان باشند
• آیکانها را باید با کاربران مختلف تست و به مفاهیم توجه کرد

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

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

از این به بعد باید شاهد اینترفیس مترو در سایر نرم افزارهای مایکروسافت باشیم، همانطور که در تصاویر زیر مشاهده می کنید اینترفیس مترو در نرم افزار Zune Media Player و نسخه آینده ویندوز و همینطور در دشبورد جدید XBOX قابل مشاهده است.

یکی از محصولات بسیار خوب مایکروسافت که در زمینه برنامه نویسی و توسعه وب سایتهای اینترنتی می باشد محصولی است به نام وب ماتریکس. این محصول تمام نیازهای اولیه شما را برای راه اندازی یک وب سایت چه به صورت استاتیک و چه به صورت داینامیک دارا می باشد.  ویژگی مهم این نرم افزار رایگان بودن آن است. شما با نصب این نرم افزار دیگر نیازی به برنامه هایی همچون xampp و wamp برای راه اندازی سایتهای خود روی لوکال سرور نخواهید داشت چون همراه این نرم افزار یک سرور IIS Express نصب می شود که به راحتی می توانید سایتهای خود را در لوکال اجرا کنید.

از جمله ویژگیهای جالب این نرم افزار این است که شما تنها با چند کلیک ساده می توانید CMS های مورد علاقه خود مانند WordPress, Joomla, Drupal و … را نصب و راه اندازی کنید.

ویژگیهای WebMatrix

چند ویژگی مهم WebMatix به شرح زیر می باشد :

• بسیار کم حجم و سبک می باشد
• به شما امکان کدنویسی زبانهای Asp.net و PHP را می دهد
• به راحتی می توانید با چند کلیک ساده CMS های مورد علاقه خود را نصب کنید
• از HTML5 پشتیبانی می کند
• سرور IIS Express و Sql Server Compact دارد
• PHP و MySql را برای ویندوز نصب و پیکربندی می کند
• ابزارهای بهینه سازی موتورهای جستجو را دارد
• اینترفیس بسیار ساده و راحتی دارد
• به راحتی امکان مشاهده و ویرایش دیتابیس ها را به شما می دهد
• سایت خود را می توانید توسط این نرم افزار به راحتی پابلیش کنید

نحوه نصب و راه اندازی

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

بعد از نصب و اجرای برنامه شما با این صفحه مواجه می شوید :

شما در این صفحه می توانید سایتهایی که از قبل داشتید را اجرا کنید و یا یک سایت جدید ایجاد کنید، اگر وارد قسمت App Gallery شوید میتوانید انواع CMS های موجود را ببینید، یکی از آنها را انتخاب کنید و آنرا به راحتی رو سیستم خود نصب کنید، در این قسمت با همچین صفحه ای مواجه می شوید :

بعد از اینکه CMS خود را انتخاب کردید، برنامه از شما یکسری مشخصات اولیه می خواهد که بعد از وارد کردن آن شروع به دانلود می کند و بعد از چند دقیقه (بسته به حجم CMS) سایت شما آماده بهره برداری خواهد شد.

شما میتوانید با وارد شدن به قسمت Files از منوی سمت چپ، فایلهای سایت خود را ببینید و آنها را ویرایش کنید :

در قسمت دیتابیس هم شما میتوانید محتویات بانک اطلاعاتی خودتان را مشاهده یا ویرایش کنید :

همچنین این نرم افزار دارای قسمتی برای ارسال سایت شما روی سرورتان می باشد که به راحتی با تنظیم چند پارامتر می توانید آنرا روی سرور خود قرار دهید :

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

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

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

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

با ریتوییت جمله در قرعه کشی 250 مگابایت فضا شرکت کنید:داتیس دیزاین، طراحی استاندارد و زیبای وب سایت #datisdesign http://www.datisdesign.com

و یا می توانید در صفحه فیسبوک داتیس دیزاین عضو شوید و تقاضای شرکت در مسابقه را بدهید : http://www.facebook.com/datisdesign

این قرعه کشی در روز 15 آبان ماه انجام خواهد شد !

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

مقدمه

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

یکسری از رفتارهایی که دانستن آن به شما کمک می کند عبارتست از :

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

استفاده از قوانین و عرفها

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

• لوگو و برند شما باید به صفحه اول لینک باشد .
• شعار وب سایت شما در زیر لوگو وبرند شما باید قرار داشته باشد.
• باکس جستجو باید ساده و راحت در دسترس کاربر باشد.
• در بعضی از وب سایتها (مانند وبلاگ) ابزارهای مورد نیاز کاربر باید وجود داشته باشد.

جستجو باید ساده باشد

• همانطور که قبلا هم اشاره شد باکس جستجو باید ساده باشد و در جای مناسبی در سایت قرار گرفته باشد تا کاربر به راحتی بتواند آنرا پیدا کند. این محل معمولا در قسمت بالا و سمت چپ و یا راست سایت (بسته به نوع زبان سایت) قرار دارد.
• باکس جستجو باید از یک input box و یک submit button تشکیل شده باشد. در طراحی همین دو المان هم باید توجه ویژه ای اعمال شود.
• تا جایی که ممکن است از استفاده واژه جستجوی پیشرفته خودداری کنید !

لینکها باید به صورت لینک باشند

• کاربران عادت کرده اند وقتی واژه ای را می بینند که رنگ و استایل آن با متن عادی سایت تفاوت می کند آنرا به عنوان لینک تشخیص دهند. تغییر دادن این ویژگی ممکن است کاربران را دچار سردرگمی کند.
• لینکها در بعضی جاها ممکن است فقط با تغییر رنگ مشخص نشوند و لازم باشد از underline هم استفاده کرد. البته استفاده از این استایل معمولا خوانایی را در زبان فارسی کم می کند.
• سعی کنید از ترکیب رنگهای ثابتی در سایت خود استفاده کنید، اگر از ترکیب رنگهای مختلف برای لینکهای خود استفاده کنید کاربران گمراه می شوند.
• هیچوقت واژه هایی که لینک نیستند را به صورت لینک استایل دهی نکنید !
• برای حالتهای مختلف لینک هم استایل بسازید : hover – active – visited

فرمهای ثبت نام را ساده طراحی کنید

• میتوان به جرات گفت که درصد بسیار زیادی از کاربران از پر کردن فرمهای ثبت نام بیزار هستند.
• همیشه هنگام پردازش فرمها کاربران را از نتیجه کار آگاه سازید.
• اگر در جایی مشکل وجود دارد، آن محل را به آنها نشان دهید و نحوه درست پرکردن فرم را هم به آنها یاد دهید.
• ممکن است افرادی که در حال پرکردن فرم شما هستند آشنایی زیادی با کامپیوتر و اینترنت نداشته باشند، آنها را کمک کنید !

لینک Back to the Top

üیکی از ابزارهایی که طراحان کمتر از آن بهره میبرند لینک back to the top هست، البته این لینک در سایتهایی که محتوی کمی دارد زیاد کاربردی ندارد اما در سایتهایی که متون طولانی دارند و ارتفاع صفحات زیاد است استفاده از این لینک می تواند کاربران را از اسکرول کردنهای طولانی راحت کند.

صفحات Splash

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

لینکها در صفحه فعلی باز شوند

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

• 2 حالت وجود دارد :
  • لینک شما در صفحه فعلی باز می شود ولی کاربر می خواهد در صفحه جدید باز شود.
  • لینک شما در صفحه جدید باز می شود وکاربر دوست ندارد این اتفاق بیفتد.
• در حالت اول کاربر به راحتی با right click روی لینک آنرا می تواند در پنجره جدید باز کند، اما در حالت دوم کاربر نمی تواند آنرا در پنجره فعلی باز کند.
• پس سعی کنید لینکهای خود را در صفحه فعلی باز کنید مگر اینکه دلیل قانع کننده ای برای کارتان داشته باشید.

طراحی ثابت در وب سایت

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

منوی سایت

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

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

• سایز پنجره مرورگر را تغییر ندهید
• اندازه فونت ها را خیلی کوچک در نظر نگیرید
• لینکها باید واضح و روشن باشند که کاربر را به چه مسیری می برند.
• لینکهایی که کار نمی کنند و اصطلاحا dead links هستند را یا درست کنید و یا حذف کنید
• متن سایت خود را بخوانید و اشکالات آنرا برطرف کنید
• کارایی سایت خود را چک کنید
• وب سایت شما باید بدون javascript هم درست کار کند
• همیشه در طراحیتان صفحه 404 error را هم داشته باشید
• برای سایت خود یک stylesheet جدا برای چاپ هم داشته باشید
• قبل از راه اندازی سایت سعی کنید حجم سایت خود را بهینه کنید
• اطلاعات تماس کامل در سایت داشته باشید

اصل TETO

در پایان توجه شما را به این اصل مهم جلب میکنم که همیشه در حال تست باشید، فقط به یکبار تست بسنده نکنید، سایتی موفق تر است که همیشه در حال تست باشد و اشکالات خود را بهبود ببخشد. این اصل به عنوان Test Early Test Often شناخته می شود.

دریافت نسخه PDF

خیلی از کاربران ممکن است از قدرت فایل htaccess آگاهی نداشته باشند. در این پست 17 نکته مفید برای شما خواهیم گفت، بسیاری از آنها می توانند وب سرور شما را در برابر حملات مختلف محافظت کنند و یکسری از آنها قادر هستند که وب سرور شما را در حالت بهینه نگه دارند و کارهای ساده ای مانند redirection را انجام دهند. این نکته را به یاد داشته باشید که باید برای تغییرات در این فایل دانش و آشنایی کافی داشته باشید، در غیر اینصورت از تغییرات در این فایل جدا خودداری نمایید.

موارد عمومی

نکات زیر شامل موارد ساده ای مانند redirection و بهینه سازی وب سرور می باشد :

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

• تنظیم Timezone

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

SetEnv TZ Asia/Tehran

• SEO Friendly

چرا SEO Friendly ? این روزها، همه موتورهای جستجوی مدرن قابلیت شناسایی 301 Permanent Redirect ها را دارند.

Redirect 301 <a href="http://www.datisdesign.com">http://www.datisdesign.com/</a> http://www.datisdesign.com/

• گذشتن از پیغام دانلود

AddType application/octet-stream .pdf
AddType application/octet-stream .zip
AddType application/octet-stream .mov

• Skip WWW

یکی از نکات بهینه سازی برای موتورهای جستجو اطمینان از این نکته است که تنها یک آدرس است که به وب سایت شما اشاره می کند. بنابراین، شما نیاز دارید که همه ترافیک www را به سمت non-www ارجاع دهید و یا بالعکس :

RewriteEngine On RewriteBase / RewriteCond %{HTTP_HOST} ^www.datisdesign.com [NC] RewriteRule ^(.*)$ http://datisdesign.com/$1 [L,R=301]

• صفحه های پیغام خطای سفارشی

برای هر یک از پیغامهای خطا یک صفحه سفارشی درست کنید :

ErrorDocument 401 /error/401.php
ErrorDocument 403 /error/403.php
ErrorDocument 404 /error/404.php
ErrorDocument 500 /error/500.php

• فشرده سازی فایلها

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

# compress text, html, javascript, css, xml:
AddOutputFilterByType DEFLATE text/plain
AddOutputFilterByType DEFLATE text/html
AddOutputFilterByType DEFLATE text/xml
AddOutputFilterByType DEFLATE text/css
AddOutputFilterByType DEFLATE application/xml
AddOutputFilterByType DEFLATE application/xhtml+xml
AddOutputFilterByType DEFLATE application/rss+xml
AddOutputFilterByType DEFLATE application/javascript
AddOutputFilterByType DEFLATE application/x-javascript

• Cache Files

کش کردن فایلها یکی دیگر از روشهای بهینه سازی سرعت لود وب سایت می باشد :

<filesmatch>Header set Cache-Control &quot;max-age=2592000&quot; </filesmatch>

• غیرفعال کردن کش برای یکسری از فایلها

برای بعضی از فایلها هم میتوانید کش را غیرفعال کنید :

# explicitly disable caching for scripts and other dynamic files <filesmatch>Header unset Cache-Control </filesmatch>

موارد امنیتی

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

• Hotlinking Protection

وقتی سایر کاربران از تصاویر سایت شما استفاده می کنند و تصاویر سایت شما را در سایتهای خود قرار می دهند متنفرید ؟ این چند خط کد دست آنها را از سایت شما کوتاه خواهد کرد :

RewriteBase /
RewriteCond %{HTTP_REFERER} !^$
RewriteCond %{HTTP_REFERER} !^http://(www.)?queness.com/.*$ [NC]
RewriteRule .(gif|jpg|swf|flv|png)$ /feed/ [R=302,L]

• جلوگیری از هک

اگر شما می خواهید درجه امنیت وب سایت خود را بالا ببرید، میتوانید این کدها را استفاده کنید تا جلوی هکرها را بگیرید :

RewriteEngine On

# proc/self/environ? no way!
RewriteCond %{QUERY_STRING} proc/self/environ [OR]

# Block out any script trying to set a mosConfig value through the URL
RewriteCond %{QUERY_STRING} mosConfig_[a-zA-Z_]{1,21}(=|\%3D) [OR]

# Block out any script trying to base64_encode crap to send via URL
RewriteCond %{QUERY_STRING} base64_encode.*(.*) [OR]

# Block out any script that includes a <script> tag in URL
RewriteCond %{QUERY_STRING} (<|%3C).*script.*(>|%3E) [NC,OR]

# Block out any script trying to set a PHP GLOBALS variable via URL
RewriteCond %{QUERY_STRING} GLOBALS(=|[|\%[0-9A-Z]{0,2}) [OR]

# Block out any script trying to modify a _REQUEST variable via URL
RewriteCond %{QUERY_STRING} _REQUEST(=|[|\%[0-9A-Z]{0,2})

# Send all blocked request to homepage with 403 Forbidden error!
RewriteRule ^(.*)$ index.php [F,L]

• جلوگیری از دسترسی به فایل htaccess

این کد دسترسی سایر کاربران را به فایل htaccess شما محدود خواهد کرد :

# secure htaccess file
<Files .htaccess>
order allow,deny
deny from all
</Files>

# prevent viewing of a specific file
<Files secretfile.jpg>
 order allow,deny
 deny from all
</Files>

# multiple file types
<FilesMatch ".(htaccess|htpasswd|ini|phps|fla|psd|log|sh)$">
 Order Allow,Deny
 Deny from all
</FilesMatch>

• تغییر نام فایل htaccess

شما می توانید فایل htaccess را هم تغییر نام دهید :

AccessFileName htacc.ess

• غیرفعال کردن دیدن دایرکتوری ها

نمایش دایرکتوری های وب سایت خود را غیر فعال کنید :

# disable directory browsing
Options All -Indexes

# enable directory browsing
Options All +Indexes

• تغییر فایل پیش فرض index

شما می توانید فایل پیش فرض index.html, index.php یا index.htm را تغییر دهید :

DirectoryIndex business.html

• دسترسی کاربران را بسته به دامنه آنها محدود کنید

# block visitors referred from indicated domains
<IfModule mod_rewrite.c>
 RewriteEngine on
 RewriteCond %{HTTP_REFERER} scumbag.com [NC,OR]
 RewriteCond %{HTTP_REFERER} wormhole.com [NC,OR]
 RewriteRule .* - [F]

</ifModule>

• دسترسی کاربران را بسته به User-Agent Header محدود کنید

این روش می تواند در مصرف پهنای باند شما صرفه جویی کند، جلوی بعضی از botها و spider ها را می گیرد :

# block visitors referred from indicated domains
<IfModule mod_rewrite.c>
SetEnvIfNoCase ^User-Agent$ .*(craftbot|download|extract|stripper|sucker|ninja|clshttp|webspider|leacher|collector|grabber|webpictures) HTTP_SAFE_BADBOT
SetEnvIfNoCase ^User-Agent$ .*(libwww-perl|aesop_com_spiderman) HTTP_SAFE_BADBOT
Deny from env=HTTP_SAFE_BADBOT
</ifModule>

• امنیت دایرکتوری ها توسط غیرفعال کردن اجرای اسکریپتها

# secure directory by disabling script execution
AddHandler cgi-script .php .pl .py .jsp .asp .htm .shtml .sh .cgi
Options -ExecCGI

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

منبع

طراحی قالب وب سایت برای سیستم مدیریت محتوی جوملا  به دلیل قابلیتهای بسیار زیاد این CMS همیشه یکی از مسائل مورد علاقه طراحان وب سایت بوده است. شاید برای بعضی طراحی قالب برای این سیستم بسیار راحت و برای بعضی بسیار دردسر ساز باشد. اما همیشه راههایی برای سریع تر و بهینه کردن روند انجام یک کار وجود دارد. از جمله این راهها می توان به فریم ورک ها اشاره کرد که معمولا مسیر را برای کاربران کوتاه تر و شاید ساده تر کنند. این راه برای طراحی و مدیریت قالبهای جوملا هم وجود دارد.

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

چرا به فریم ورک نیاز داریم ؟

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

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

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

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

معرفی فریم ورکهای معروف جوملا

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

مواردی را  که من در جدول بالا مقایسه کرده ام  به این شرح می باشند :

• نوع کاربری،  بعضی فقط به صورت قالب هستند و بعضی به صورت یک فریم ورک کامل
• قیمت هر یک از فریم ورکها
• نحوه پشتیبانی از فریم ورکها توسط تیم سازنده آن
• تعداد module position های قابل استفاده
• حجم فایلهای Javascript و CSS استفاده شده در فریم ورک
• حجم تصاویر استفاده شده در فریم ورک
• قابلیت کار کردن در صورتی که Javascript غیرفعال باشد
• نوع Javascript Library استفاده شده
• استفاده کردن از Javascript کم حجم شده
• خروجی کد به صورت Tableless هست یا نه
• پشتیبانی کردن از زبانهای RTL
• ایرادهای کدنویسی در HTML و CSS
• نمره از نظر بهینه سازی برای موتورهای جستجو

لینک سایتهای فریم ورکهای فوق عبارتند از : Gantry , T3 , Warp , You!Joomla , Rumi , JoomlaBamboo

همانطور که در جدول فوق مشاهده کردید، دو فریم ورک Gantry و T3 نسبت به سایرین در موقعیت بهتری قرار دارند.

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

معرفی فریم ورک Gantry

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

• رایگان
• ساخت قالبهای متنوع
• خروجی HTML بدون Table
• گزینه های متعدد برای ساخت منو، تغییر اندازه فونت، استایلهای مختلف، رنگ بندی و …
• پنل مدیریت نسبتا آسان
• استفاده از گرید سیستم 960.gs
• پشتیبانی از RTL، تغییر راحت تعداد سطر و ستون و …
• پشتیبانی از مرورگرهای مختلف
• خروجی Valid XHTML و Valid CSS
• دارای سیستم AJAX

اما با این حال هر سیستمی دارای یکسری معایب هم ممکن است باشد :

• تعداد زیاد گزینه ها ممکن است سردرگمی ایجاد کند
• بعضی اوقات نیاز به نوشتن دستورات خود Gantry در قالب هست
• ساختن اینترفیس آسان است ولی اگر دقت نشود ممکن است از نظر لود javascript سنگین شود
• در پنل مدیریت جوملا فارسی به هم ریخته نشان داده می شود
• سایز قالب 960 پیکسل در عرض هست و حداکثر 12 ستونی
• متاسفانه آموزش کامل و جامعی برای آن وجود ندارد و فقط قواعد ابتدایی آن توسط سایت آموزش داده شده است

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

در صورتی که نیاز به میزبانی وب دارید، می توانید با داتیس دیزاین تماس بگیرید و پلن مورد نظر خود را سفارش دهید.

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