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

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

خوب دیگه بهتره بریم سر اصل مطلب و برای شروع هم بهتره یه مروری روی بخش قبلی داشته باشیم. برای شروع این بخش اول میریم میبینیم چه چیزهایی هنوز راست به چپ نشده و با فارسی سازگار نیست٬ اولین نکته ای که نظر من رو به خودش جلب کرد عنوان سربرگ بود که هنوز راست به چپ نشده بود پس با کمک فایرباگ میرم ببینم عنوان سربرگ به چه ID یا Class یا tag ی مربوط هست که پس از بررسی متوجه میشیم که به #header

(یعنی ID ی با نام header) مربوط هست پس به این صورت اون رو rtl میکنیم #header { direction: rtl; }

اما پس از این که rtl کردیم متوجه میشیم که سربرگ در جای مناسب خودش قرار نگرفته و وقتی علل رو بررسی میکنیم متوجه میشیم که باید مقداری اون رو به سمت چپ هل بدیم و این کار رو میتونیم با استفاده از padding انجام بدیم و از اون جایی که این ID خودش padding داشت padding اون رو به صورت زیر تغییر میدیم و از سمت راست یه مقدار بیشتر هلش میدیم (یعنی عدد مربوط به سمت راست رو بزرگتر میکنیم) تا در جای مناسب قرار بگیرد.

#header {
direction:rtl;
padding:15px 240px 15px 10px;
}

اما شاید بخواهید بیشتر راجع به دستور padding بدونید ؟

padding یه دستوری از css هست که با استفاده از اون میتوانید از اطراف به element مورد نظرتون فاصله بدید که این دستور بسیار شبیه دستور margin هست اما تفاوت اون رو میتونید در شکل زیر مشاهده کنید.

روش استفاده از padding به شکل زیر است:

padding: top right bottom left;

برای مثال:

padding: 2px 3px 1px 4px;

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

جلسه پیش تا سر تغییر فونت ها به فونت Tahoma گفتیم و اما قسمت بعدی قسمت راست به چپ کردن متن‌ها است برای این کار ابتدا می‌بینیم کدام قسمت ها نیاز به راست به چپ شدن داره برای مثال همونطور که در این تصویر مشاهده می‌کنید بدنه‌ی مطالب و بدنه‌ی سایدبار نیاز به راست به چپ شدن داره پس از این که فهمیدیم کدام قسمت ها را باید راست به چپ کنیم با کمک فایرباگ به دنبال تگ٬ کلاس و یا آی‌دی مربوطه میگردیم. که در اینجا آی‌دی بخش مطالب ما content هست پس برای راست به چپ کردن این بخش کد زیر رو به فایل rtl.css اضافه می‌کنیم.

#content { direction: rtl; }

با انجام این کار مشاهده می‌کنیم که متن بخش مطالب به صورت راست به چپ چیده شد. حالا نوبت به ستون کناری هست تا راست به چپ بشه نام آی‌دی این قسمت menu هست حالا عملیات بالا رو برای این آی‌دی هم انجام می‌دیم اما مشاهده می‌کنیم که تنها تیترها راست به چپ شد؟؟ دلیل این کار احتمالا این هست که یک

text-align: left;

در این بدنه وجود دارد که با استفاده از افزونه‌ی فایرباگ در بدنه آی‌دی menu به دنبال این text-align می‌گردیم که پس از مقداری کنکاش متوجه می‌شویم که text-align مورد نظر در آدرس

#menu ul ul

قرار دارد پس٬ کد زیر رو به ادامه کدهای فایل rtl.css اضافه می‌کنیم.

#menu ul ul { text-align: right; }

حالا دیگه متن‌های ما راست به چپ شده و کار ما تقریبا در این قسمت تموم شده و نتیجه کار هم تا اینجای کار به این صورت در اومده و کدهای فایل rtl.css هم باید به صورت زیر باشه تا اینجای کار:

body,p, li, .feedback , #menu ul ul li {
font-family: tahoma;
}
#content, #menu {
direction: rtl;
}
#menu ul ul {
text-align: right;
}

اما شاید تا اینجای کار سوالی برای شما پیش اومده باشه که تفاوت direction و text-align چیه؟ direction در حقیقت کل عصمت اون بخش رو راست به چپ یا چپ به راست میکنه ولی text-align اون قسمت رو فقط سمت راست یا چپ میاره و حتی ممکنه direction ش تفاوت داشته باشه اما برای این که بهتر متوجه بشید یک مثال می‌زنم٬ ممکن تا به حال دیده باشید که دارید یه جایی مثلا یه متنی رو از راست به چپ می‌نویسید و وقتی یک کلمه انگلیسی وسطش می‌نویسید نظم و ترتیب متنتون به هم میخوره و خوندنش مشکل میشه این مشکل به خاطره اینه که اونجا تنها text-align شما راست چین هست و direction تون چپ به راست یا ltr هست.

خوب در آخر امیدوارم که این جلسه هم مثل جلسه های قبل :D براتون مفید بوده باشه و مشقاتون رو هم خوش خط بنویسید که به خوش خطها خوب نمره می‌دم٬ خوب دیگه تا جلسه دیگه برید خونه‌هاتون. ;)

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

استاندارد ما برای فارسی سازی پوسته های وردپرس این هست که فایل های اصلی وردپرس دست کاری نشه البته بیشتر منظورمون فایل استایل یا همون style.css به همین منظور یک فایل rtl.css به فایل های پوسته اضافه میکنیم و عملیات مربوط به راست به چپ سازی و همگن سازی پوسته رو در این فایل انجام می‌دیم پس اولین استاندارد ما اینه که فایل style.css دست نخورده بمونه و بجاش تغییرات در فایل rtl.css انجام بشه.

اگر خاطرتون باشه در آموزش پیش پوسته‌ی کلاسیک رو برای فارسی سازی معرفی کردم اما این پوسته قبلا rtl شده و فایل rtl در اون وجود داره پس ابتدا فایل rtl.css رو حذف میکنیم و یک فایل rtl.css جدید ایجاد میکنیم. حالا اگر پوسته ای که هیچ تغییراتی در آن نداده اید را باز کنید شاید احساس کنید بعضی قسمت های پوسته rtl یا راست به چپ باشد که این به خاطر وجود کد <?php language_attributes(); ?> در خط دوم فایل header.php است که ویژگی‌ها dir="rtl" lang="fa-IR" را به تگ html اضافه میکند که کد “dir=”rtl باعث راست به چپ شدن میشه که برای جلوگیری از این کار این قسمت رو با کد <?php //language_attributes(); ?> تعویض میکنیم و فایل header.php رو ذخیره می‌کنیم.

حالا دیگه میریم سراغ کار اصلیمون البته امیدوارم قبل از شروع ملزومات کار رو هم فراهم کرده باشید؛ در مرحله اول فونت متن ها رو باید تغییر بدیم که برای این کار ابتدا می‌گردیم ببینیم فونت ها از کدوم تگ html فراخوانی شدند که برای این کار از افزونه firebug کمک میگیریم روش کار هم اینجوریه که اول به صورت کلی یعنی از قسمت body شروع میکنیم فونت رو تغییر میدیم بعد میبینیم کجا تغییر کرده٬ کجا تغییر نکرده و اونهایی که تغییر نکرده به کدوم تگ html مربوط میشه. برای پوسته کلاسیک هم ابتدا قسمت body رو به این صورت فونتش رو تغییر میدیم body { font-family: Tahoma; } و در فایل rtl.css ذخیره میکنیم. اما هنوز فونت بعضی از قسمت ها تغییر نکرده برای مثال فونت مطالب و ساید بار که پس از جستجو با فایرباگ به این نتیجه میرسیم که تگ های p , li , body و کلاس feedback و تگ li در آدرس menu ul ul li# فونت هاشون رو به صورت زیر تغییر میدیم: p, li, .feedback , #menu ul ul li { font-family: Tahoma; } خوب حالا دیگه فونت هامون تقریبا با فارسی همگن شده.

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

اونایی که از فایرفاکس استفاده می‌کنند احتمالا تا به حال افزونه‌های زیادی رو برای این مرورگر محبوب نصب و استفاده کردند. مسلما تا به حال هنگام نصب افزونه شاهد یک زمان شمار ۳ ثانیه‌ای بودید که پس از ۳ ثانیه کلید نصب افزونه رو فعال می‌کنه که شاید از نظر بعضی‌ها کاری بیهوده است. امروز می‌خواهم روشی رو بهتون آموزش بدم که بتونید این زمان شمار را کم و زیاد و یا غیر فعال کنید.

ابتدا در قسمت نوار آدرس عبارت about:config را تایپ کرده و دکمه enter را فشار می‌دهید سپس در صفحه ای که ظاهر می‌شود در قسمت filter عبارت security.dialog_enable_delay را تایپ کرده و باز هم enter را می‌فشارید و روی گزینه ای که در پائین صفحه ظاهر می‌شود دوبار کلیک می‌کنید. حالا در پنجره ای که باز می‌شود باید برای این شمارنده مقداردهی کنید که در اینجا هر ۵۰۰ عدد یک ثانیه حساب می‌شود و عدد ۰ این قابلیت را غیر فعال می‌کند برای مثال با وارد کردن عدد ۲۰۰۰ زمان شمار ۳ ثانیه در نظر گرفته می‌شود (عدد ۰ هم شمرده می‌شود).

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

برای این جلسه هم یه مقدمه کوتاه براتون میگم و بعدش هم این جلسه زود تعطیلتون میکنم برید حالشو ببرید ولی قول بدید که یه راست برید خونه. پوسته های وردپرس از تعدادی فایل تشکیل شده اند که این فایل ها هر کدام قسمتی از پوسته شما را تشکیل میدهند برای مثال فایل header.php سربرگ پوسته‌ی شما را تشکیل می‌دهد اما در این فایل های با پسوند php محتوای html و کد های php قرار میگیرد و استایل پوسته‌ی شما در فایل style.css قرار دارد که محتوای این فایل کد های css می‌باشد و بیشتر فعالیت ما روی این فایل است.

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

احتمالا مشاهده کردید که از وقتی که ویندوز رو نصب می‌کنید همیشه یک آیکونی مربوط به مرکز امنیتی ویندوز (security center) که معمولا به صورت یک علامت ضربدر هم هست (تصویر نمونه) در system try شما وجود داره که همیشه یک قسمت اضافی هم بوده. تا به حال با خودتون گفتید که چگونه این آیکون رو حذف کنم؟ حذف کردن این آیکون کار یک دقیقه هم نمیشه فقط کافیه روی این آیکون دو بار کلیک کنید تا صفحه مربوط به اون باز بشه و اون موقع از ستون سمت چپ گزینه “Change the way Security Center alerts me” را انتخاب کنید٬ حالا یک پنجره‌ی جدید برای شما باز میشه که شامل سه گزینه است (تصویر نمونه) که برای حل کردن این مشکل کافی تیک های این سه گزینه رو بردارید و روی دکمه ok کلیک کنید.

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

وسایل لازم: یک عدد مرورگر فایرفاکس + یک عدد افزونه‌ی فایرباگ برای فایرفاکس ٬ یک ویرایشگر متن (مانند: ++ notepad) و اگر بخواهید خودتان راجع به css بدانید کتاب “101 نکته و ترفند برای استفاده از css در طراحی وب” مترجم: امیر عباس عبدالعلی از انتشارات ناقوس.

همونطور که می‌دونید پوسته های وردپرس از تعدادی فایل (index.php , single.php , page.php, sidebar.php , style.css , … ) تشکیل شده اما بیشتر فعالیت ما روی استایل پوسته (style.css) که با پسوند css ذخیره شده است. که محتوای این فایل css دستوراتی از نوع زبان css است که سعی می‌کنیم طی مطالبی برخی دستورات پر کاربرد آن را برایتان شرح دهیم.

نکته: فارسی سازی به روش استاندارد وردپرس فارسی توضیح داده نمی‌شود و در ابتدا به صورت سنتی گفته می‌شود و پس از آن استاندارد سازی به صورت جداگانه شرح داده می‌شود.

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

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

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

دوستان زیادی تقاضای یک آموزش جامع و کلی برای فارسی سازی پوسته‌های وردپرس رو داشتند که متاسفانه به دلیل ذیغ وقت (درست نوشتم؟) نتونستم در جواب این دوستان مطلبی بنویسم چرا که مبحثی طویل و پر شاخ و برگ است. اما یک بار برای همیشه اینجا می‌گویم برای فارسی سازی پوسته‌های وردپرس به دانستن CSS و html نیازمندید و اگر این دو مبحث رو بدانید دیگر مشکلی ندارید. البته امروزه علاقه مندان به وب و وبلاگ اکثرا با html زیاد سر و کله زدند و یه چیزهایی ازش سر در میارن اما می‌مونه css که شاید کمتر کسی باهاش سر و کله زده و به خاطر همینه که تو فارسی سازی یا بهتر بگم هماهنگ سازی پوسته برای فارسی به مشکل بر خوردند. به همین خاطر تصمیم گرفتم یک سری مطالب راجع به آموزش مسائل مقدماتی css بنویسم.

برای شروع فقط یک توضیح کوتاه لفظ قلم راجع به css می‌دم تا بعد:

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

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

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

ابتدا بهتره xampp رو در حالت stop در بیارید و سپس فایل :
[code]%XAMPP%\apache\conf\httpd.conf[/code]
رو با یک ویرایشگر (editor) مانند Notepad اجرا کنید و به دنبال خط زیر بگردید:
[code]#LoadModule rewrite_module modules/mod_rewrite.so [/code]
و علامت # رو از ابتدای این خط پاک کنید و سپس فایل را ذخیره (save) کنید و xampp را اجرا کنید و یا اگر stop نکرده بودید restart کنید.

حالا دیگه کار تمومه شما الان فایل‌هایی با نام .htaccess دارید.ولی خودتون نمی‌تونید ایجاد کنید اون جاهایی که لازم باشه خودش هست (راستش این تیکه ماجرا رو من خودم هم نفهمیدم چی شد فقط می‌دونم کارم راه افتاد).

در ادامه مبحث آموزش‌های مقدماتی طراحی امروز قصد دارم تا توضیحات مختصری راجع به مدل‌های رنگ در photoshop بنویسم:

1. مدل CMYK: برای ارسال کار رنگی جهت چاپ٬ باید مدل تصویر CMYK باشد. در این مدل٬ هر تصویر دارای ۴ کانال رنگی است. C مخفف سایان (آبی فیروزه‌ای)٬ M مخفف ماژانتا (ارغوانی)٬ Y مخفف زرد و K مخفف مشکی است.

2. مدل RGB: هنگامی که می‌خواهیم تصاویری را به محیط اینترنت بفرستیم و یا زمان طراحی وب سایت باید مدل کار RGB باشد که در آن R مخفف قرمز٬ G مخفف سبز و B مخفف آبی است. این مدل حالت نور دارد و رنگ‌ها شفاف هستند. در اکثر مواقع که بخواهیم از فیلتر‌های photoshop استفاده کنیم٬ باید مدل تصویر RGB باشد٬ در غیر این صورت گروهی از فیلتر‌ها غیرفعال می‌شوند.

3. مدل Gray Scale: در این حالت سیستم تصویر به صورت انواع خاکستری است و اگر بخواهیم رنگ‌هایی را از جعبه رنگ انتخاب کنیم٬ خاکستری دیده می‌شوند. برای سیاه و سفید کردن یک عکس رنگی٬ باید از پنجره‌ی image -> mode -> Grayscale را انتخاب کنیم.

4. مدل Indexed color: این مدل جزء حالت‌های رنگی‌ای است که بیشتر در شبکه‌ی اینترنت کاربرد دارد. رنگ‌ها در این حالت به 256 رنگ محدود است. هنگامی که عکس در این مدل است٬ برخی ابزار‌های photoshop روی آن فعال نمی‌شوند. برای اینکه تصویری را به این مدل رگردانیم٬ ابتدا باید مدل آن را به RGB تبدیل کرده٬ سپس از پنجره‌ی image -> mod -> indexed color را انتخاب کنیم.

5. تبدیل به CMYK: هنگامی که عکسی را با دوربین دیجیتال گرفته باشیم و یا تصویری را اسکن کرده‌ایم٬ مدل تصویر RGB است. برای تبدیل مدل RGB به CMYK باید از از پنجره‌ی image -> mode -> CMYK را انتخاب کنیم تا حالت تصویر به ۴ کانال رنگی تبدیل و آماده‌ی ارسال به چاپخانه شود. توجه کنیم که با این تبدیل٬ تا حدودی کیفیت رنگ تصویر تغییر می‌کند.