طراحی وب سایت کتابخانه

طراحی وب سایت کتابخانه

۱۹ مطلب با کلمه‌ی کلیدی «وب سایت کتابخانه» ثبت شده است

مطالب این قسمت برای نسخه 3.x جوملا نوشته شده است. 

ساختار پلاگین برای نسخه 1.5 جوملا بسیار انعطاف پذیر و قدرتمند بود. پلاگین ها فقط برای این ساخته نشده اند که رخدادهایی که توسط توسعه ها و برنامه های کاربردی هسته موجود در جوملا راه اندازی شده اند را شناسایی کنند و بر اساس آنها کاری را انجام دهند، بلکه از پلاگین ها می توانیم برای این استفاده کنیم که توسعه هایی که توسط یک شخص ثالث ایجاد شده اند را توسعه پذیر تر و قدرتمند تر کنیم. مهم ترین تغییری که در طراحی پلاگین ها در جوملای 2.5/3.x نسبت به جوملای 1.5 بوجود آمده است، تغییراتی است که در مورد نام رخدادها(events) بوجود آمده است.

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

ایجاد یک فایل نصب (Installation File)

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

<?xml version="1.0" encoding="utf-8"?>
<extension version="3.1" type="plugin" group="search">
	<name>plg_search_categories</name>
	<author>Joomla! Project</author>
	<creationDate>November 2005</creationDate>
	<copyright>Copyright (C) 2005 - 2013 Open Source Matters. All rights reserved.</copyright>
	<license>GNU General Public License version 2 or later; see LICENSE.txt</license>
	<authorEmail>admin@joomla.org</authorEmail>
	<authorUrl>www.joomla.org</authorUrl>
	<version>3.1.0</version>
	<description>PLG_SEARCH_CATEGORIES_XML_DESCRIPTION</description>
	<files>
		<filename plugin="categories">categories.php</filename>
		<filename>index.html</filename>
	</files>
	<languages>
		<language tag="en-GB">en-GB.plg_search_categories.ini</language>
		<language tag="en-GB">en-GB.plg_search_categories.sys.ini</language>
	</languages>
	<config>
		<fields name="params">

			<fieldset name="basic">
				<field name="search_limit" type="text"
					default="50"
					description="JFIELD_PLG_SEARCH_SEARCHLIMIT_DESC"
					label="JFIELD_PLG_SEARCH_SEARCHLIMIT_LABEL"
					size="5"
				/>

				<field name="search_content" type="radio"
					default="0"
					description="JFIELD_PLG_SEARCH_ALL_DESC"
					label="JFIELD_PLG_SEARCH_ALL_LABEL"
				>
					<option value="0">JOFF</option>
					<option value="1">JON</option>
				</field>

				<field name="search_archived" type="radio"
					default="0"
					description="JFIELD_PLG_SEARCH_ARCHIVED_DESC"
					label="JFIELD_PLG_SEARCH_ARCHIVED_LABEL"
				>
					<option value="0">JOFF</option>
					<option value="1">JON</option>
				</field>
			</fieldset>

		</fields>
	</config>
</extension>
  

همانطور که می بینید، ساختار این فایل XML مثل سایر فایل های نصب جوملا (از نوع XML) است. در تگ extension یک ویژگی با نام group وجود دارد که در این فایل با مقدار search مشخص شده است. در داخل تگ filename نیز یک ویژگی با نام plugin وجود دارد که با categories مقدار دهی شده است. این اطلاعات به جوملا می گوید که محتویات این بسته را در داخل کدام پوشه قرار دهد و مشخص می کند که پلاگین مربوط به کدام گروه است.
اگر شما در حال ایجاد یک پلاگین هستید که به رخدادهای هسته موجود در جوملا پاسخ می دهد، باید ویژگی group را بر اساس نام پوشه پلاگین موجود برای نوع رخداد مقدار دهی کنید. مثلا group="authentication" یا group="user".
در مورد مقدار اول، مشخص می کند که پلاگین در گروه authentication قرار دارد و در مورد مقدرا دوم، مشخص می کند که در گروه user قرار دارد.

در واقع اگر در آدرسی که جوملا را نصب کرده اید (بر روی کامپیوتر محلی یا بر روی سروری که جوملا نصب شده است) پوشه plugins را مشاهده کنید، می توانید رخدادهایی که به صورت پیش فرض در جوملا وجود دارند را ببینید:

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

نکته: اگر شما در تگ extension متد method="upgrade" را قرار دهید، این پلاگین بدون اینکه نسخه قبلی حذف شود، نصب خواهد شد. فقط فایل های جدید بر روی تمام فایل های موجود نوشته می شوند، اما فایل های قدیم پاک نمی شوند.

ایجاد یک پلاگین

در جوملا برای نوشتن یک پلاگین از شیوه شی گرا استفاده می شود. برای این کار باید یک زیر کلاس از کلاس JPlugin ایجاد کنیم. کلاس JPlugin یک کلاس پایه است که ویژگی های پایه مربوط به پلاگین ها را پیاده سازی می کند. شما در این کلاس در متدهای خود، به ویژگی های زیر دسترسی دارید:

  • $this->params:
  • پارامترهایی است که از طرف مدیر برای این پلاگین تعریف شده اند.
  • $this->_name:
  • نام پلاگین.
  • $this->_type:
  • گروه (نوع) مربوط به پلاگین.
  • $this->db:
  • شی db (از نسخه 3.1 به بعد)
  • $this->app:
  • شی برنامه کاربردی (application) (از نسخه 3.1 به بعد)

نکته: برای استفاده از $this->db و $this->app، کلاس JPlugin بررسی می کند که آیا این ویژگی وجود داشته باشد و خصوصی (private) نباشد. اگر تمایل دارید اشیاء پیش فرض استفاده شوند، یک نمونه معرفی نشده از ویژگی را در کلاس پلاگین ایجاد کنید (مثلا در همان محیطی که این خط قرار دارد: protected $autoloadLanguage = true; از اینها protected $db; و protected $app; استفاده کنید). این ویژگی ها تا زمانی که آنها را به وضوح ایجاد نکنید، وجود نخواهند داشت.
در مثال زیر، lt;PluginGroup> مشخص کننده گروه (نوع) در پلاگین است، و <PluginName> نام آن را مشخص می کند. یعنی ابتدا plg را می آوریم، سپس نام گروه (نوع) و بعد از آن نام پلاگین. به این نکته توجه داشته باشد که نام های کلاس ها و توابع، در پی اچ پی نسبت به بزرگی و کوچکی حروف حساس هستند.

()
	 {
		/*
		 * Plugin code goes here.
		 * You can access database and application objects and parameters via $this->db,
		 * $this->app and $this->params respectively
		 */
		return true;
	}
}
?>

استفاده از پلاگین ها در داخل کد

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

$dispatcher = JDispatcher::getInstance();
$results = $dispatcher->trigger( '<EventName>', <ParameterArray> );

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

۱ نظر موافقین ۲ مخالفین ۰ ۱۹ مرداد ۹۶ ، ۱۲:۳۰
مهرداد یوسفی فرد

مطالبی که تا این قسمت در مورد جوملا (نسخه 3) ارائه کردم، همگی مربوط به نسخه زبان انگلیسی جوملا بود. اما همه ما به عنوان یک ایرانی فارسی زبان، تمایل داریم محیط کاربری وب سایتمان با زبان فارسی باشد و همچنین محتوای نوشته شده در وب سایت به صورت راست-به-چپ ارائه شود.
برای این کار فقط کافی است نسخه مربوط به زبان فارسی را نصب کنیم تا زبان فارسی در دسترسمان قرار گیرد. بنابراین اولین قدم این است که بسته مربوط به زبان فارسی را از وب سایت جوملا دانلود کنیم. ابتدا وارد ساید جوملا (www.joomla.org) می شویم (من این کار را در روز 4شنبه به تاریخ 28 تیرماه 1396 انجام داده ام). از منوی بالای سایت، قسمت Download & Extend گزینه Language Packages را انتخاب می کنیم. با این کار به صفحه ترجمه های مربوط به جوملا هدایت می شویم. بر اساس نوع نسخه جوملا که بر روی سیستم خود نصب کرده ایم (1.5 یا 2.5 یا 3.x) بر روی یکی از لینک ها کلیک می کنیم. من بر روی کامپیوتر خودم نسخه 3.7 جوملا را نصب کرده ام پس بسته های مربوط به نسخه 3.x را باید انتخاب کنم. بر روی لینک مورد نظرتان کلیک کنید تا وارد صفحه مربوطه شوید. در این صفحه می توانید بسته زبان فارسی (Persian) را پیدا کنید و نسخه مورد نظر خود را دانلود کنید. فایل دانلود شده با فرمت zip است که باید آن را نصب کنیم. فایل را در جایی قرار دهید تا در مرحله بعد آن را نصب کنیم.

حالا وارد محیط مدیریت جوملا می شویم (yoursite-address/administrator). از منوی بالای صفحه، بر روی گزینه Extension کلیک می کنیم و از منوی باز شده گزینه Manage را انتخاب می کنیم. در قسمت های قبلی نیز گفتم که برای نصب توسعه ها باید به این قسمت بیاییم.

چون قبلا فایل زیپ مربوط به زبان را دانلود کرده ایم برای آپلود کردن فایل مورد نظر بر روی دکمه سبز رنگ که نوشته است Or browse for file کلیک می کنیم و فایل زیپ مربوط به زبان را از این قسمت آپلود می کنیم.

 
پس از چند ثانیه با پیغامی روبرو می شوید که به شما می گوید فارسی ساز جوملا به درستی نصب شده است:
حالا وقت آن رسیده که زبان محیط جوملا را به زبان فارسی تبدیل کنیم. برای اینکار از منوی Extensions گزینه Language(s) را انتخاب می کنیم تا وارد محیط مدیریت زبان(ها) شویم.

 
همانطور که در تصویر بالا مشاهده می کنید، حالا که زبان فارسی را نصب کرده ایم، در لیست علاوه بر زبان انگلیسی، زبان فارسی نیز قابل مشاهده است. در این فهرست، زبانی که به عنوان زبان پیش فرض انتخاب شده است در ستون Default با علامت ستاره زرد رنگ مشخص شده.
در قسمت بالا سمت چپ یک منوی پایین افتادنی نیز وجود دارد که به صورت پیش فرض، گزینه Administrator انتخاب شده است. با استفاده از این منو می توانید زبان مربوط به محیط کاربر (Site) یا زبان مربوط به محیط مدیریت (Administrator) را به صورت جداگانه تنظیم کنید. برای اینکه زبان محیط مدیریت را به فارسی تغییر دهیم، می توانیم به راحتی در ردیف مربوط به زبان فارسی در ستون Default بر روی علامت ستاره کم رنگ کلیک کنیم تا زبان فارسی به عنوان زبان پیش فرض محیط مدیریت تعریف شود. یا اینکه می توانیم دکمه رادیویی کنار زبان فارسی را انتخاب کنیم و در قسمت بالا سمت چپ بر روی دکمه Default کلیک نماییم.

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

همانطور که در شکل زیر می بینید، محیط مدیریت به صورت راست به چپ قابل مشاهده است و تمام متون نیز به زبان فارسی ترجمه شده اند:

موافقین ۱ مخالفین ۰ ۲۸ تیر ۹۶ ، ۱۳:۴۸
مهرداد یوسفی فرد

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

همانطور که گفتم جوملا یک سیستم مدیریت محتواست که از قابلیت توسعه پذیری بسیار بالایی برخوردار است؛ یعنی شما خودتان می توانید با مهارت های برنامه نویسی خودتان، توسعه های فراوانی (با رعایت استخوان بندی اصلی ارائه شده توسط جوملا) را تهیه کنید و به قابلیت های این سیستم مدیریت محتوا بیفزایید. کامپوننت ها نیز یکی از توسعه های (Extension) موجود در جوملا هستند. اما کامپوننت مهم ترین واحد عملیاتی در جوملا است. شاید طبق گفته وب سایت جوملا، بتوانیم آنها را به عنوان نرم افزار های کوچک کاربردی (Mini-application) بنامیم. شاید بتوانیم بگوییم که جوملا یک سیستم عامل است و کامپوننت ها به عنوان نرم افزارهای کاربردی دسکتاپی عمل می کنند.
بیشتر کامپوننت ها دو بخش دارند، یکی مربوط به قسمت مدیریت (administrator) و دیگری مربوط به قسمت کاربر (site) سایت. همانطور که می توانید حدس بزنید، قسمت مربوط به طرف کاربر، محتوایی را که کاربر درخواست کرده تا مشاهده کند، نمایش می دهد. اما قسمت مربوط به مدیریت یک رابط کاربری در اختیار مدیر(ان) وب سایت قرار می دهد تا جنبه های مختلف آن کامپوننت را پیکربندی و مدیریت کنند و مسلما این قسمت فقط از طریق قسمت مدیریت قابل دسترسی است.
همانطور که در بالا گفتم، به صورت پیش فرض کامپوننت هایی در جوملا وجود دارد، مثل کامپوننت مربوط به محتوا، فرم های تماس یا لینک های وب.

کامپوننت های جوملا از لحاظ فنی چگونه عمل می کنند؟

با استفاده از چهارچوبی که جوملا در اختیال ما قرار می دهد می توانیم کامپوننت ها را به دو صورت طراحی کنیم: یا با استفاده از مدل مسطح (Flat Model)؛ یا با استفاده از مدل MVC (Model-View-Controller) می توانیم این کار را انجام دهیم.

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

مدل MVC چیست؟

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

منظور از Model چیست؟

model قسمتی از کامپوننت است که داده های مربوط به برنامه را درون خود قرار می دهد. این قسمت، روال های مورد نیاز برای مدیریت و دستکاری داده ها را با روشی منطقی در اختیار ما قرار می دهد و علاوه بر این روال های مورد نیاز برای بازیابی داده ها از مدل را برای ما فراهم می کند. به عبارت کلی، مهم ترین تکنیک دسترسی به داده ها باید در داخل مدل قرار داده شود. با استفاده از این روش، اگر قرار باشد یک برنامه کاربردی از سیستمی که داده ها را به صورت فایلهای معمولی ذخیره می کند به سیستمی منتقل شود که داده ها را در پایگاه اطلاعاتی ذخیره می کند، فقط لازم است قسمت مدل (Model) تغییر کند و نیازی به اعمال تغیرات در قسمت view یا controller نیست.

منظور از VIEW چیست؟

View در یک کامپوننت داده هایی که از model دریافت می شود را به گونه ای ارائه می کند که برای برقراری تعامل مناسب باشند. در مورد یک برنامه کاربردی تحت وب، view باید این داده ها را به صورت یک صفحه اچ تی ام ال ارائه کند تا بتوانیم آنها را در اختیار کاربر قرار دهیم. View داده ها را از model بیرون می کشد (این داده ها هم از طرف controller برای model ارسال شده است) و آنها را در اختیار الگو (Template) هایی قرار می دهد که اطلاعات را در اختیار کاربر قرار خواهند داد. View هیچ تغییراتی را بر روی داده ها انجام نمی دهد، فقط داده هایی را که از model دریافت کرده است نمایش می دهد.

منظور از controller چیست؟

کنترل کننده (Controller) مسوول این است که مشخص کند به درخواست های کاربر باید چه پاسخی داده شود. در مورد یک برنامه کاربردی تحت وب، معمولا درخواست کاربر مشاهده یک صفحه است. کنترل کننده مشخث می کند که کاربر چه درخواستی را ارائه کرده و مدل (Model) مناسب برای دستکاری صحیح اطلاعات مورد درخواست کاربر را فراخوانی می کند و این مدل، داده ها را برای view می فرستد. کنترل کننده، داده ها را در model نمایش نمی دهد، این قسمت فقط روش هایی را که مدل با استفاده از آنها داده ها را آماده می کند راه اندازی می کند؛ و سپس model را به سمت view مناسب برای نمایش داده ها راهنمایی می کند.

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

۰ نظر موافقین ۱ مخالفین ۰ ۲۷ تیر ۹۶ ، ۲۲:۵۱
مهرداد یوسفی فرد

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

/templates/myTemplate

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

/administrator/templates

مثلا اگر ما الگویی را با نام myAdminTemplate بوجود آورده باشیم، این الگو باید در این آدرس قرار گیرد:

/administrator/templates/myAdminTemplate

معمولا ساختار پوشه ها در یک الگوی معمولی جوملا به شکل زیر است:

  • css: تمام فایل های شیوه نامه های آبشاری (css) در این پوشه قرار می گیرند.
  • html: فایلهایی که توسط الگو به جای فایل های از پیش تعیین شده قرار می گیرند (یعنی جایگزین فایل های از پیش تعیین شده می شوند) در داخل این پوشه قرار دارند.
  • images: تمام تصاویری که توسط الگو استفاده می شوند در این پوشه قرار می گیرند.
  • language: فایل های مربوط به زبان های اضافی که توسط الگو استفاده می شوند در این پوشه قرار دارند.
بر اساس میزان پیچیدگی الگویی که در حال مشاهده آن هستید ممکن است یک پوشه دیگر نیز حاوی فایل های جاوااسکریپت وجود داشته باشد:
  • javascript: شامل فایل های جاوااسکریپت است که الگو از آنها استفاده می کند.

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

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

 /public_html/domain-name/template/ 
که معمولا شامل فایلها و پوشه های زیر است:

/css
/html
/images
/javascript
/language
component.php
error.php
favicon.ico
index.php
templateDetails.xml
template_preview.png
template_thumbnail.png 

فایل های موجود در یک الگو

معمولا در یک الگو حداقل فایل های زیر وجود دارند:

  • index.php
  • در این فایل، منطق لازم برای نمایش و محل قرار گیری کامپوننت ها و ماژول ها مشخص می شود.
  • component.php
  • این فایل، منطق لازم برای نمایش صفحه مناسب برای پرینت، لینک مربوط به ارسال ایمیل برای یک دوست و چیزهایی شبیه به این مشخص می شود.
  • error.php
  • شیوه مناسب برای مدیریت کردن خطاهای رخ داده (مثل خطای 404) در این صفحه مشخص می شود.
  • favicon.ico
  • این فایل، آیکون مربوط به الگو است.
  • template.css
  • همانطور که از پسوند (.css) این فایل پیداست، این یک فایل شیوه نامه آبشاری است که جنبه های ظاهری صفحه را مشخص می کنید. در این فایل خصوصیاتی مثل فونت ها، اندازه حاشیه ها، حاشیه های تصاویر، و سایر فرمت دهی های مربوط به ظاهر صفحات مشخص می شوند. البته ممکن است فایل های شیوه نامه آبشاری در داخل پوشه css قرار داشته باشند.
  • templateDetails.xml
  • در داخل این فایل، فراداده هایی (داده در مورد داده) در مورد الگو قرار دارند که این اطلاعات توسط نصب کننده الگو و قسمت مدیریت الگو استفاده می شوند.
  • template_preview.ext
  • منظور از ext فرمت مربوط به تصویر است که این فرمت می تواند .jpg, .png, .gif باشد.
    معمولا یک تصویر با اندازه 600 در 400 پیکسل برای این کار در نظر گرفته می شود. زمانی که کاربر بر روی تصویر بندانگشتی مربوط به الگو کلیک می کند، این تصویر نمایش داده می شود (البته این اتفاق در قسمت Template Manager: Templates رخ می دهد). در این حالت، یک پنجره در سطحی بالاتر از صفحه فعلی باز می شود که پیش نمایشی از الگوی مورد نظر را نشان می دهد تا مدیر بتواند قبل از انتخاب آن الگو، متوجه شود نمایش ظاهری آن الگو چگونه است.
  • template_thumbnail.ext
  • معمولا یک تصویر با اندازه 200 در 150 پیکسل برای این کار در نظر گرفته می شود. هنگامی که در قسمت مدیریت مربوط به الگو ها قرار داریم (Template Manager: Templates) این نمای بند انگشتی در ردیف مربوط به الگو نمایش داده می شود.
۰ نظر موافقین ۱ مخالفین ۰ ۲۶ تیر ۹۶ ، ۰۹:۵۷
مهرداد یوسفی فرد

محتوای این قسمت برای نسخه 3 جوملا نوشته شده است

برای اینکه بتوانیم یک الگوی جدید را در جوملا نصب کنیم، ابتدا باید وارد قسمت مدیریت شویم. برای این کار ابتدا به آدرس مدیریت وب سایت (localhost/joomla3.7/administrator یا بر روی وب: www.my-site.com/administerator/) می رویم.


حالا که وارد قسمت مدیریت شدیم از منوی Extensions گزینه Manage را انتخاب می کنیم.

در این صفحه می توانیم الگو، کامپوننت، ماژول یا یک زبان را نصب کنیم. برای نصب کردن سه راه حل وجود دارد:

  1. بارگذاری کردن یک بسته (Upload package file): یک بسته فایل را از روی کامپیوتر خودمان انتخاب می کنیم و آن را بارگذاری می کنیم تا نصب شود.
  2. نصب کردن از یک پوشه (Install from folder): در این قسمت مسیر را وارد می کنیم که فایل های مورد نظر ما بر روی آن قرار دارند.
  3. دانلود کردن از یک آدرس URL: در این قسمت می توانیم آدرس URL مربوط به توسعه ای که قصد نصب کردن آن را داریم وارد کنیم.

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

چطور مطمئن شویم که یک الگو نصب شده است؟

برای اینکه اطمینان پیدا کنیم الگویی را که در مرحله قبلی نصب کرده ایم به درستی نصب شده است، در قسمت مدیریت توسعه ها، بر روی لینک Manage (در منوی سمت چپ در نسخه انگلیسی جوملا) کلیک می کنیم؛ سپس گزینه Search Tools را انتخاب می کنیم و از منوی Select Type گزینه Template را انتخاب می کنیم. در این قسمت می توانیم تمام الگوهایی را که در قسمت کاربر و مدیر نصب شده اند مشاهده کنیم. الگویی که در مرحله قبل نصب کرده ایم باید در این لیست وجود داشته باشد.



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



۰ نظر موافقین ۱ مخالفین ۰ ۲۵ تیر ۹۶ ، ۱۱:۱۳
مهرداد یوسفی فرد

محتوای این قسمت برای نسخه 3 جوملا نوشته شده است

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


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


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


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


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


یک الگوی جوملا چیست؟

قبل از هرچیز باید مشخص کنیم منظرمان از الگو(Template) در جوملا چیست؟ همانند الگوهای سنتی اچ تی ام ال، الگوهای جوملا مجموعه ای از فایل ها است که ظاهر دیداری سایت را تعیین می کنند (مجموعه ای از فایل های پی اچ پی، css و جاوااسکریپت). در هر الگو –بسته به نوع طراحی آن- تعداد مختلفی از این فایل ها وجود دارد و نوع این فایل ها نیز متفاوت است، اما هدف کلی آنها یکی است. این فایل ها، محل قرارگیری اجزای صفحه را مشخص می کنند و البته بر روی نحوه ارائه محتوا نیز اثر می گذارند.


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


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


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


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


الگوهای جوملا از چه طریق قابل دسترسی هستند


اول از همه بهتر است بدانیم فایل های مربوط به الگوهای جوملا در کدام پوشه از پوشه های محل نصب جوملا قرار دارند. همانطور که در قسمت های قبل گفتم، ما با استفاده از wamp کامپیوتر محلی خود را به یک سرویس دهنده وب تبدیل کردیم و سپس فایل های مربوط به جوملا را بر روی آن قرار دادیم. در کامپیوتر من این فایلها در این آدرس قرار دارند: c:/wamp/www/joomla3.7

همانطور که در پست قبلی هم اشاره کردم می بنید در داخل آدرس ذکر شده در خط بالا، پوشه ها و فایل های متفاوتی وجود دارد. همانطور که می بینید پوشه ای با نام templates وجود دارد؛


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


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



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



همانطور که مشاهده می کنید در داخل این پوشه چندین پوشه و فایل وجود دارد. البته تعداد این پوشه ها و فایل ها بستگی به ساختار طراحی الگو دارد. اما به طور پیش فرض یک پوشه مربوط به فایل های css است ، یک پوشه با نام html و یک پوشه مربوط به فایلهای تصاویر(images). حتما حداقل یک فایل با نام index.php نیز در این پوشه قرار دارد. معمولا فایلی با عنوان templateDetails.xml نیز در داخل پوشه الگو قرار دارد. این فایل xml یک فایل ضروری است، به خاطر اینکه با استفاده از اطلاعات ذکر شده در این فایل، جوملا می تواند الگوی طراحی شده را شناسایی کرده و اطلاعات لازم را در مورد آن به دست آورد. در قسمت های بعدی توضیحات مفصل تری در مورد ساختار پوشه ها و فایل ها ارائه خواهد شد، در این قسمت فقط قصد داریم نگاهی اجمالی به پوشه ها و محتویات درون آنها بیاندازیم.


دسترسی به الگوها از طریق بخش مدیریت


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


c:/wamp/www/joomla3.7/administrator/templates

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


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


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


http://localhost/joomla3.7/administrator/

همانطور که در شکل بالا می بینید باید ابتدا نام کاربری و کلمه عبور مربوط به مدیر سایت را وارد کنید تا وارد صفحه مدیریت شوید

برای دسترسی به صفحه مدیریت الگو ها از منوی extensions گزینه Templates را انتخاب کنید:


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

 

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



در منوی بالای این قسمت از فضای مدیریت، دو فیلتر از نوع منوی پایین افتادنی وجود دارد. یکی از فیلتر ها به ما کمک می کند مشخص کنیم الگوهای فضای کاربر (site) یا الگوهای فضای مدیریت (administrator) را انتخاب کنیم و فیلتر دیگر مربوط به جستجوی است که می توانیم با استفاده از این منوی پایین افتادنی مشخص کنیم که جستجو در کدام یک از الگوها انجام شود.

در منوی بالای این صفحه، چهار گزینه دیگر نیز وجود دارد: Edit, Duplicate, Delete, Options
با استفاده از این گزینه ها می توانیم یک الگو را که انتخاب کرده ایم، ویرایش کنیم، حذف کنیم، یک نمونه دیگر از آن ایجاد کنیم یا به گزینه های مربوط به آن دسترسی داشته باشیم.

۰ نظر موافقین ۱ مخالفین ۰ ۲۳ تیر ۹۶ ، ۱۴:۵۴
مهرداد یوسفی فرد

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

من نسخه 3.7 را بر روی سیستم خودم (به صورت محلی) نصب کرده ام. همانطور که در قسمت نصب جوملا نیز برایتان توضیح دادم، از نرم افزار Wamp Server برای نصب استفاده کرده ام. فایل های مربوط به جوملا در کامپیوتر من در این آدرس قرار دارند (C:\wamp\www\joomla3.7) که با فعال کردن Wamp Server و تایپ آدرس localhost/joomla3.7 در نوار آدرس مرورگر وب می توانم به محتوای این سایت دسترسی داشته باشم.

در حال حاضر در پوشه joomla3.7 تعداد 15 پوشه و 7 فایل وجود دارد. در سیستم مدیریت محتوای جوملا (که از این به بعد به طور مختصر آن را با نام جوملا استفاده خواهم کرد) مثل بسیاری دیگر از سیستم های مدیریت محتوا دو محیط کاری مختلف وجود دارد، یکی برای کاربر و دیگری برای مدیر وب سایت.

همانطور که در پوشه بالا مشاهده می کنید یک پوشه با نام administrator وجود دارد. تمام فایل های مربوط به سمت مدیر (قسمت مدیریت) در داخل این پوشه قرار می گیرند (آدرس دسترسی به قسمت مدیریت به این شکل است: http://localhost/joomla3.7/administrator/index.php). از دیگر پوشه های مهم موجود در دایرکتوری ریشه جوملا، باید به components، images ، modules، plugins، و templates اشاره کنم. به راحتی از نام این پوشه ها می توانیم بفهمیم که محتویات هر کدام از پوشه ها مربوط به چه چیزی است: کامپوننت ها، تصاویر (تصاویری که در داخل مقالات قرار می گیرند، در داخل همین پوشه یا زیرپوشه های آن بارگذاری خواهند شد)، ماژول ها، پلاگین ها، و تمپلیت ها (الگوها) ی مربوط به وب سایت. تا همینجا هم خیلی خوب است که با ساختار کلی پوشه ها آشنا باشیم و بدانیم فایل های هر قسمت از جوملا در داخل کدام پوشه قرار دارد.

در دایرکتوری ریشه جوملا، دو فایل بسیار مهم هم (با پسوند.php) وجود دارد. فایل configuration.php همانطور که از نامش پیداست، مربوط به تنظیمات پیکربندی جوملاست و فایل index.php قلب تپنده جوملاست! با استفاده از فایل index جوملا مشخص می کند که محتویات کدام فایل(ها) باید فراخوانی شود و محتویات صفحه باید چگونه ایجاد شده و نمایش داده شود. همه کارها و پردازش های اصلی، برای تعیین نوع عملی که قرار است اتفاق بیفتد، توسط فایل index.php انجام می شود. فعلا می توانید این دو فایل را بایک ویرایشگر (مثلا notepad یا dremWeaver) باز کنید و محتویاتشان را بدون اینکه تغییری در آنها ایجاد کنید مشاهده نمایید.

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

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

بد نیست به پوشه administrator هم سری بزنیم:

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

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

۲ نظر موافقین ۱ مخالفین ۰ ۲۲ تیر ۹۶ ، ۱۱:۵۹
مهرداد یوسفی فرد
جوملا یک سیستم مدیریت محتوای (CMS) کد منبع باز (Open Source) است که از قضا طرفداران و کاربران فراوانی نیز در دنیا و ایران دارد. به زبان ساده، این سیستم مدیریت محتوا به ما کمک می کند به راحتی و بدون نیاز به داشتن دانش برنامه نویسی وب، بتوانیم وب سایت خود را راه اندازی کنیم.
سیستم مدیریت محتوای جوملا دارای ویژگی های زیادی است که به آنها اشاره خواهد شد، اما مهمترین ویژگی های این سیستم مدیریت محتوا سادگی، قابلیت توسعه پذیری و امنیت آن است.

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

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

ویژگی های اصلی جوملا را می توان به این شکل بیان کرد:
  • امکان استفاده از چندین زبان
  • پشتیبانی مناسب در ابعاد جهانی
  • به راحتی قابل به روز رسانی است
  • امکان مدیریت انواع رسانه ها را در اختیار شما قرار می دهد
  • امکان مدیریت بنرها را در اختیار شما قرار می دهد
  • امکان مدیریت تماس ها را در اختیار شما قرار می دهد
  • قابلیت جستجوی مناسب و هوشمند در محتوا
  • امکان طبقه بندی موضوعی تو در تو
  • امکان تگ گذاری برای محتوا
  • امکان انجام ویرایش در محیط طرف کاربر و نه الزاما در طرف مدیر
  • امکان نسخه گیری از محتوا (content versoning)
  • امکان مدیریت منوها
  • قابلیت توسعه پذیری بسیار بالا (امکان نوشتن کامپوننت ها، ماژول ها و سایر توسعه های مورد نظر)
  • دسترسی به طیف وسیعی از توسعه های از قبل طراحی شده
  • و چندین ویژگی مناسب دیگر که می توانید آنها را به صورت کامل در وب سایت رسمی جوملا (www.joomla.org) مطالعه نمایید.
همانطور که ملاحظه می کنید ویژگی های کلیدی ذکر شده در بالا، می تواند به اندازه کافی شما را برای استفاده از سیستم مدیریت محتوای جوملا مجاب کند. جوملا آنقدر انعطاف پذیر و ایمن است که بعید است نتواند نیازهای اطلاعاتی شما در وب سایت مورد نظرتان را برآورده کند.
۰ نظر موافقین ۱ مخالفین ۰ ۰۸ خرداد ۹۶ ، ۱۳:۳۴
مهرداد یوسفی فرد
در css تعدادی ویژگی وجود دارد که فقط برای کار کردن با عناصر جدول استفاده می شوند. این ویژگی ها کنترل لازم برای چگونگی نمایش داده های جدول را در اختیار ما قرار می دهند.

ویژگی border-spacing

فاصله بین حاشیه های (border) خانه های جدول که در کنار یکدیگر قرار دارند را می توان با استفاده از ویژگی border-spacing تغییر داد؛ این ویژگی برابر با خصوصیت (attribute) cellspacing در اچ تی ام ا ل است. W3C مقدار صفر را به عنوان مقدار پیش فرض برای این ویژگی قرار داده است، اما بیشتر مرورگرها مقدار 2پیکسل را به عنوان مقدار پیش فرض در نظر می گیرند.
border-spacing : inherit | <length> [<length>]
می توانیم برای این ویژگی دو مقدار طولی را مشخص کنیم. از این دو مقدار، عدد اول فضای افقی را تعیین می کند، و عدد دوم فضای عمودی را مشخص می کند.
.spacing {
border-spacing: 5px 10px;
}
border-spacing یک ویژگی مربوط به جدول است، نه ویژگی مربوط به خانه های جدول، بنابراین همانطور که در مثال زیر می بینید این ویژگی به عنصر <table> اعمال می شود:
<table class="spacing">
<caption>جدول من</caption>
<tr>
<td>خانه اول، ردیف اول </td>
<td>خانه دوم، ردیف اول</td>
</tr>
<tr>
<td>خانه اول، ردیف دوم</td>
<td>خانه دوم، ردیف دوم</td>
</tr>
</table>


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

خانه های جدول دارای border و padding هستند، اما margin ندارند؛ به جای آن باید از ویژگی border-spacing استفاده کنیم. padding در مورد خانه های جدول مثل سایر عناصر عمل می کند و مثل خصوصیت cellpadding در اچ تی ام ال است.

ویژگی border-collapse

ویژگی border-collapse مشخص می کند که آیا حاشیه های جدول به یک حاشیه تنها یا جداگانه تبدیل شود.
border-collapse : inherit | separated | collapse
به طور معمول خانه های جدول حاشیه های مربوط به خود را دارند و این حاشیه ها توسط فاصله ای که در ویژگی border-spacing تعیین می شود از هم جدا می شوند. اگر حاشیه ها با مقدار collapse تعیین شده باشند، خانه های جدول حاشیه ها را با یکدیگر به اشتراک می گذارند و هر مقداری که برای border-spacing تعیین شده باشد نادیده گرفته خواهد شد.
table { border-collapse: collapse;}
با اعمال کردن این ویژگی، جدول ذکر شده در مثال بالا به این شکل نمایش داده می شود:


ویژگی caption-side

عنصر <caption> یک برچسب برای جدول ایجاد می کند. با استفاده از ویژگی caption-side می توانیم محل قرارگیری این برچسب را تغییر دهیم.
caption-side : inherit | top | bottom
عنوان معمولا در بالای جدول قرار می گیرد، اما با استفاده از ویژگی caption-side می توانیم مشخص کنیم که برچسب در پایین جدول قرار گیرد. این ویژگی به عنصر <caption> اعمال می شود، اما می توانیم این ویژگی را برای عنصر <table> تنظیم کنیم به خاطر اینکه این ویژگی به ارث برده می شود.
caption { caption-side: bottom; }
ویژگی empty-cell

یک خانه جدول که دارای محتوا نیست به صورت معمول حاشیه و پس زمینه خود را نمایش می دهد. با استفاده از ویژگی empty-cell می توانیم این رفتار را تغییر دهیم.
empty-cell : inherit | show | hide
با تنظیم کردن مقدار این ویژگی با مقدار hide حاشیه و پس زمینه خانه جدول نمایش داده نمی شود. Layout جدول با استفاده از این ویژگی تغییر نمی کند.

ویژگی table-layout

ویژگی table-layout مشخص می کند که آیا عرض خانه های جدول باید ثابت باشند یا انعطاف پذیر. برخلاف سایر ویژگی های مربوط به جدول، ویژگی table-layout خصوصیات خود را از عنصر والد به ارث نمی برد:
table-layout : auto | fixed
مقدار پیش فرض این ویژگی auto است، و به این معنی است که خانه های جدول به صورت خودکار بزرگتر می شوند تا محتوا را در داخل خود جای دهند، حتی اگر عرض این خانه ها بیشتر از عرض تنظیم شده برای آنها باشد. برای اینکه مطمئن شویم عرض خانه جدول ثابت باشد، باید مقدار fixed را برای این ویژگی تعیین کنیم. بنابراین صفحه بندی افقی خانه جدول فقط به عرض تنظیم شده برای جدول بستگی دارد، نه به محتوای خانه های جدول.
/* ثابت نگاه داشتن عرض خانه های جدول */
.fixed { table-layout: fixed; }
یک جدول با صفحه بندی ثابت دارای ارزش افزوده است، به خاطر اینکه به محض اینکه ردیف اول جدول لود می شود مرورگر دقیقا می داند که ابعاد جدول چقدر است و دیگر لازم نیست انرژی بیشتری برای نمایش جدول صرف کند.
۰ نظر موافقین ۱ مخالفین ۰ ۲۶ ارديبهشت ۹۶ ، ۱۳:۰۷
مهرداد یوسفی فرد
در css از ویژگی های list برای عناصر فهرست استفاده می کنیم که این عناصر عبارتند از: <ul>, <ol>, <li>.

ویژگی list-style-type

فهرست ها با استفاده از یک نشانگر که قبل از هر آیتم عنصر فهرست (<li>) نشان داده می شود بوجود می آیند. با استفاده از ویژگی list-style-type می توانیم نوع این نشانگر را تغییر دهیم.

برای یک فهرست مرتب نشده (unordered list - ul) هر آیتم مربوط به فهرست به روش مشابه نشانه گذاری می شود. گلوله های از پیش تعریف شده که در پایین مشاهده می کنید را می توان در فهرست استفاده کرد، و مقدار disc به عنوان مقدار پیش فرض است (یک دایره توپر).
list-style-type : inherit | disc | circle | square | none
در یک فهرست مرتب شده (ordered list - ol) تمام آیتم های فهرست با یک کاراکتر عددی نمایش داده می شوند که این اعداد نشان دهنده ترتیب آیتم ها است. تمام مرورگرهای اصلی وب از انواع عددی ذکر شده در زیر پشتیبانی می کنند، و مقدار decimal به عنوان مقدار پیش فرض است:
list-style-type : inherit | decimal | none | upper-alpha | lower-alpha | 
upper-roman |lower-roman |  
lower-latin | armenian | georgian |
decimal-leading-zero
در مثال زیر یک سبک جدید فهرست را برای دو عنصر فهرست تعریف می کنیم. این امکان وجود دارد که <ul> را به صورت نشانگرهای مرتب شده و <ol> را به صورت نشانگرهای مرتب نشده نمایش دهیم(یعنی برخلاف ماهیت اصلی شان)، اما این کار، مناسب نیست:
ul { list-style-type : square; } /*  */
ol { list-style-type : upper-roman; } /* I, II, III, … */
رنگ نشانگر مشابه رنگ متن عنصر است. این نکته را به خاطر داشته باشید که هر عنصر را می توانیم مجبور کنیم آیتم های فهرست را نمایش دهد، برای این کار باید ویژگی display را با مقدار list-item مقدار دهی کنیم.

ویژگی list-style-image

به عنوان یک جایگزین برای نشانگرهایی که به صورت از قبل تعریف شده برای آیتم های فهرست وجود دارند، می توانیم با استفاده از ویژگی list-style-image از یک تصویر شخصی – مورد علاقه خودمان – به عنوان نشانگر برای آیتم های یک فهرست استفاده کنیم.
list-style-image : inherit | none | url(<url>)
با استفاده از تابع url در داخل css مسیر تصویر مورد نظرمان را مشخص می کنیم:
list-style-image : url(my-bullet.png);
این ویژگی هر نوع نشانگر که با استفاده از ویژگی list-style-type انتخاب شده است را تحت تاثیر قرار می دهد. بنابراین بهتر است برای مواقعی که تصویر تعیین شده برای نشانگر در دسترس نیست یک list-style-type جایگزین تعریف کنیم تا مشکلی پیش نیاید.

ویژگی list-style-position

نشانگر مربوط به فهرست معمولا در خارج از جعبه فهرست قرار می گیرد. ویژگی list-style-position یک جایگزین را در اختیار ما قرار می دهد. با استفاده از این ویژگی می توان نشانگر را در داخل جعبه فهرست قرار داد:
list-style-position : inherit | outside | inside 
انتخاب مقدار outside باعث می شود هر خطی از متن با شروع خط اول تراز شود، در حالیکه مقدار inside باعث می شود خط های متن زیر نشانگر تراز شوند. همچنین مقدار inside باعث می شود از نظر بصری، نشانگر دارای تورفتگی شود.

ویژگی list-style

ویژگی list-style کوتاه شده تمام موارد بالاست. مقادیر مربوط به این ویژگی را می توانیم با هر نوع ترتیبی ذکر کنیم، به خاطر اینکه این مقادیر هیچ نوع ابهامی نسبت به یکدیگر ندارند. البته می توان هر کدام از مقادیر را نیز نادیده گرفت. در این حالت مقدار پیش فرض این ویژگی مورد استفاده قرار می گیرد.
list-style : <list-style-type> | <list-style-image> | <list-style-position>
در مثال زیر نوع (type) و محل (position) مربوط به نشانگر مشخص می شود که این مقادیر به آیتم های فهرست اعمال می شود:
<ul style=”list-style: inside square;”>
<li>مورد اول</li>
<li>مورد دوم</li>
<li>مورد سوم</li>
</ul>
این نکته را در نظر داشته باشید که با استفاده از این ویژگی ها تنها نمی توان نگهدارنده های فهرست شامل ul و ol را سبک دهی کرد بلکه این ویژگی ها یک آیتم مربوط به فهرست را نیز سبک دهی می کنند.

Counters با استفاده از ویژگی های counter-increment و counter-reset می توان عناصر را به صورت خودکار در css شماره دهی کرد. ویژگی counter-reset نام شمارنده را مشخص می کنند. این ویژگی به صورت انتخابی به همراه مقدار اولیه شمارنده می آید که مقدار پیش فرض zero است.
/*ایجاد یک شمارنده با نام chapter */
body{counter-reset: chapter; }
ویژگی counter-increment نام شمارنده را می گیرد و یک عدد اختیاری به آن اضافه می کند. عددی که مشخص می کند با ظاهر شدن عنصر هر دفعه چه مقداری به آن اضافه می شود به صورت پیش فرض عدد 1 است.
/* این دستور شمارنده را در هر <h1> یکی اضافه می کند */
h1:before { counter-increment: chapter; }
مرحله نهایی برای ایجاد یک شمارنده این است که آن را با استفاده از تابع counter() در css نمایش دهیم. نام شمارنده به عنوان ورودی برای این تابع است. در این مثال شماره فصل قبل از عنصر های <h1> نوشته می شود.
/* افزایش دادن مقدار شمارنده و نمایش دادن آن */
h1:before{
content: “chapter “ counter(chapter) “ – “ ;
content-increment: chapter;
}
حالا تابع counter شماره فصل را قبل از <h1> اضافه می کند:
<h1>First</h1><!-- Chapter1 - First -->
<h1>Second</h1><!—Chapter2 - Second -->
<h1>Third</h1><!—Chapter3 - Third -->
ما می توانیم یک شمارنده دیگر را برای شمردن زیرعنوان های <h2> استفاده کنیم. در اینجا این شمارنده را در هر عنصر <h1> صفر می کنیم.
h2:before {
content: counter(chapter) “.” Counter(section) “ “;
counter-increment: section; 
}
h1{
counter-reset: section;
}
در مثال زیر مشاهده می کنید که شمارنده ها چگونه نمایش داده می شوند:
<h1>Head</h1><!--Chapter1 - Head -->
<h2>Sub</h2><!--1.1 Sub -->
<h2>Sub</h2><!--1.2 Sub -->
<h1>Head</h1><!-- Chapter2 - Head -->
<h2>Sub</h2><!--2.1 Sub -->
شمارنده های تودرتو (Nesting counters)

شمارنده های css را می توان تا هر سطحی که تمایل داشتید به صورت تودرتو بنویسید. با استفاده از تابع counters() می توانیم این شمارنده ها را با یکدیگر ترکیب کرده و نمایش دهیم. اولین ورودی تابع، نام شمارنده است و ورودی دوم یک رشته است که مشخص می کنند جداکننده بین اعداد چه چیزی باشد.
ul{ counter-reset: item; }
li:before{
content: counters(item, “ “ ) “ “;
counter-increment: item; 
}
قوانین نوشته شده در بالا به فهرست نامرتبی که در مثال زیر مشاهده می کنید اعمال شده است (توجه کنید که یک نمونه جدید از شمارنده به صورت خودکار برای هر فهرست تودرتو ساخته شده است):
<ul>
<li>item</li><!—1 item -->
<li>item</li><!—2 item -->
<ul>
<li>item</li><!—2.1 item -->
<li>item</li><!—2.2 item -->
</ul>
</ul>
شمارنده ها در تمام مرورگرهای اصلی پشتیبانی می شوند. تمام نسخه های Chrome, Firefox, Safari &Opera و IE8+.
۰ نظر موافقین ۱ مخالفین ۰ ۲۳ ارديبهشت ۹۶ ، ۱۰:۲۵
مهرداد یوسفی فرد