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

میپرسید چرا؟ شما شخصا کدوم وبسایت رو بیشتر دوست دارید؟ وبسایتی که همه جاش منظم و مرتب هست یا وبسایتی که خیلی هردمبیل و بی ریخت همه چیزش سوار شده؟! مطمئنا وبسایت مرتب منظم رو.

امروزه، اسکریپتها و CMS هایی مثل وردپرس، نیوک، جوملا و … اومدن که برای ما وبسایت «پویا» (Dynamic) میسازن، و نیاز به PHP و دیتابیس و این جور چیزا دارن، به عبارت بهتر بگم که یک چارچوب آماده هستند برای ساخت وبسایت. خیلی کوتاه بگم، با نصبشون ، یک سری جدول توی دیتابیس ایجاد میشه. مثلا شما عبارت «فلسطین» (تا یادم نرفته، برای مردم فلسطین هم دعا کنید که زیر بمب و موشک هستن) ، میره در دیتابیسی که من به اسم blog درست کردم برای مثال، این عبارت رو سرچ میکنه و در جدولی به اسم wp_posts عبارت فلسطین رو پیدا میکنه و بعد براتون بر میگردونه.

یه سری ابزار هم مثل DocPad و Impress.js و اینا هم هستن که وبسایت «ایستا» (Static) براتون میسازن. این وبسایتها وبسایتهای کلاسیکن و من خیلی دوستشون دارم. ممکنه از لحاظ SEO و … مشکل داشته باشن اما راه برای شناسوندن اون ها به موتور های جست و جو و معروف کردنشون زیاده. هم اسکریپت هایی هست که میشه ران کرد و نتیجه گرفت ازشون و کلی راه دیگه. اما راه سنتی و کلاسیک برای ساخت وبسایت استاتیک، راه دهه ۹۰ میلادی هست، نوشتن وبسایت در یک فایل HTML و چسبوندن اجزا به هم دیگر. البته این راه امروزه هم استفاده میشه اما ما اومدیم تا مدرن ترین شکل ممکن رو کار کنیم.  در این پست، فقط و فقط و فقط قصدم این هست که ساده شدن کارتون با CSS رو به رختون بکشم اون هم بسیار ساده!

هر صفحه HTMLی ، از بخش هایی به اسم Division تشکیل شده که در تگ <div></div> قرار میگیرن. دیویژن در فارسی معنیش میشه «قسمت». در واقع ما با ساخت دیو ها (نه اون دیوی که در شاهنامه و … باهاش طرفیم! خلاصه دیويژن!) بخشهای سایت رو که میخوایم ویژگی های متفاوتی داشته باشن رو از هم دیگه جدا میکنیم. حالا میخوایم یه سری ویژگی بهش بدیم که برامون کار رو آسون کنه :-). اول ، میایم و ویژگی ها رو خودمون براش تعریف میکنیم در خود دیویژن، اول بزارید فرض کنیم میخوایم یک آموزش برنامه نویسی بسازیم و نیاز به این داریم که هم RTL داشته باشیم و هم LTR و چیزای دیگه!

۱. متن فارسی :

متن فارسی باید RTL (راست به چپ) باشه، چون این خاصیت زبان ماست و زبان ما ذاتا راست به چپ هست و نیاز به این خاصیت داریم. فرض هم میکنیم بکگراند این دیویژن زرد هست. پس من میام و یک دیویژن برای فصل نخست باز میکنم!

<div id=”chapter1″ style=”dir:rtl; background:yellow;”>

 

بله! حالا فرض کنیم ۴۵ تا فصل داریم و برای یکی یکی شون بخوایم همچین چیزی بنویسیم! چه شود! باید بنشینیم یکی یکی و استایل بنویسیم! خیلی سخت و وحشتناک!

۲. کدها :

برای کدها هم ما نیاز داریم تا LTR باشه، بکگراندش آبی باشه و نوشته هاش سفید! خب پس دیویژن مورد نظر ما این خواهد شد

<div style=”dir:rtl; background:blue; color:white;>

پس نتیجه اخلاقی ماجرا این میشه که بریم سراغ CSS و استایل بنویسیم و بعدش فراخوانی کنیم! در این پست من براتون CSS رو مینویسم و بعدش میریم سراغ فراخوانیش!

کد CSS را چگونه بنویسیم؟! سادست، یک فایل به اسم style.css روی هاست (یا روی سیستم خودمون ) ایجاد میکنیم. حالا کلاسهای لازم رو مینویسیم ولی قبلش یاد داشته باشیم، برای تگهای عادی که بخوایم ویژگی ایجاد کنیم، بدون نیاز به نقطه اول اسم، کار رو شروع میکنیم ولی برای کلاس ها نیاز به نقطه اول اسم کلاس هست (ر.ک آموزشهای موجود CSS روی اینترنت) :

.chapter { 
 background:yellow;
 dir:rtl; 
 }

این برای کلاس Chapter 🙂 همین رو میتونیم برای کلاس کد هم اجرا کنیم. خب، حالا برای فراخوانیش کافیه از <div class=”chapter”> استفاده کنیم!

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

موفق باشید، خدا قوت 🙂

با سلام.

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

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