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

پلتفرم (Platform)

پلتفرم در واقع بستری است که برنامه های نرم افزاری نوشته شده برای یک وسیله در آن قابل اجرا و استفاده است، این بستر هم شامل ملزومات سخت افزاری (مانند نوع سیستم و CPU) و هم شامل ملزومات نرم افزاری (مانند سیستم عامل) است، به طور مثال برنامه های کاربردی و بازی هایی که همه روزه با آنها سر و کار داریم بدون وجود دستگاه هایی مانند کامپیوترهای شخصی (PC)، تلفن های همراه، لپ تاپ ها، کنسول های بازی و... عملا قابل استفاده نیستند (سخت افزار) و از طرفی هر برنامه ای در یک سیستم عامل خاص (و یا حتی تحت نسخه خاص) قابل اجرا است (نرم افزار) که در مجموع به آنها پلتفرم می گوییم، مانند پلتفرم ویندوز xp 64 bit، پلتفرم ویندوز 8، پلتفرم ویندوز موبایل، پلتفرم لینوکس، پلتفرم آندروید، پلتفرم جاوا، پلتفرم PC، پلتفرم XBOX و...، یا در حوزه وب در حال حاضر برنامه های نوشته شده به زبان ASP.NET نیاز به سرور با سیستم عامل به فرض ویندوز 2008 دارند (پلتفرم ویندوز سرور 2008)، با دقت در عبارت متوجه می شویم که یک پلتفرم در واقع معرف ملزومات سخت افزاری (سرور) و همچنین ملزومات نرم افزاری (سیستم عامل ویندوز سرور 2008) مورد نیاز برای اجرای یک برنامه کاربردی (ASP.NET) است، همچنین ممکن است به نسخه ویژه یک نرم افزار نیز اشاره شده باشد (نسخه 2008)، یا در مورد PHP می توان به پلتفرم لینوکس سرور یا ویندوز سرور اشاره کرد که در واقع به معنی سروری است که روی آن سیستم عامل لینوکس یا ویندوز نصب و فعال باشد و لذا به طور خلاصه می گوییم PHP با پلتفرم لینوکس سرور یا ویندوز سرور قابل اجرا و سازگار است.

فریم ورک (Framework)

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

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

سایت یا به طور صحیح تر وبسایت (website) به فضایی بر روی شبکه جهانی وب یا (World Wide Web) اطلاق می شود که می تواند بسته به اهداف و پدیدآورندگان، به صورت شخصی، اداری، شرکتی، سازمانی و... ایجاد شده باشد، یک وبسایت امروزی معمولا مجموعه ای از صفحات مرتبط با خروجی کدهای HTML یا XHTML است که می تواند دربرگیرنده متن، تصویر، صدا، ویدئو و... باشد، این صفحات توسط ابزارهایی استاندارد مانند مرورگرهای وب، قابل خواندن و استفاده هستند، تفاوت عمده یک سایت با عناوین مشابه مانند وبلاگ و صفحات شخصی، در این است که وبسایت ها معمولا تحت دامنه مستقل و بر روی میزبان (سرور) خریداری شده قرار می گیرند که امکانات کاملتری در اختیار مدیر نسبت به وبلاگ قرار می دهد، در صورتی که امکانات وبلاگ معمولا در چارچوب سرویس دهنده تعریف می شود؛ از نظر فنی صفحات وب تحت پروتکلی به نام HTTP یا Hypertext Transfer Protocol به هم مرتبط هستند (و به نوعی یک شبکه جهانی را تشکیل می دهند)، نوع دیگری از این ارتباط نیز در بستر پروتکل امن HTTPS یا Hypertext Transfer Protocol Secure صورت می گیرد؛ به لحاظ تاریخی شبکه جهانی وب یا (World Wide Web) در سال 1990 میلادی توسط یکی از فیزیک دانان سازمان تحقیقات هسته ای اروپا (European Organization for Nuclear Research یا CERN) به نام Tim Berners-Lee ابداع شد و در 1993 استفاده از آن برای عموم، آزاد گردید، البته در ابتدا هنوز پروتکل HTTP و کدهای HTML وجود نداشت و از این شبکه بیشتر برای نقل و انتقال فایل ها و نامه های الکترونیک به صورت متن فرمت بندی نشده یا plain text استفاده می شد.

CMS یا Content Management System به سیستم های مدیریت محتوای سایت های وب اطلاق می شود که به کمک آنها، کار ایجاد و مدیریت وبسایت ها تا حدود زیادی آسان و سریع می گردد، از CMS برای ایجاد سایت، ارسال و مدیریت مطالب، دریافت نظرات کاربران، ایجاد صفحات جانبی و... استفاده می شود، امکانات و انواع CMS های وب بسیار متفاوت و متنوع هستند و معمولا تحت دو زبان پرکاربرد PHP و ASP نوشته می شوند، یک مدیر سایت برای انتخاب یک CMS مناسب باید حتما اهداف و شرایط خود را در نظر بگیرد و شناخت کاملی از سیستمی که می خواهد از آن استفاده کند داشته باشد، تقریبا تمام CMS ها دارای نقاط ضعف و قوت منحصر به فردی هستند، لذا انتخاب مناسب ترین گزینه، باید با دقت انجام شود، از جمله رایج ترین عناوین سیستم های مدیریت محتوای متن باز یا Open Source می توان جوملا (Joomla)، مامبو (Mambo)، وُردپرس (Wordpress)، ام تی (Movable Type)، نیوک (PHP Nuke)، دروپال (Drupal) و... را نام برد.

دامنه یا Domain عناوین اختصاصی آدرس های وب هستند که به منظور تسهیل دسترسی و مدیریت نشانی سایت ها و صفحات وب ایجاد گردیده اند، هر domain با یک DNS یا Domain Name System مدیریت می شود که تعیین کننده میزبان و IP یا Internet Protocol آن است، جالب است که عناوین دامنه ها بیشتر برای انسان ها یا همان کاربران حقیقی مهم است، اما برای مرورگرها و در کل از لحاظ فنی، آدرس یک دامنه با یک IP مشخص مربوط به DNS آن تعریف می شود، یعنی وقتی یک دامین را درخواست می کنید، مرورگر به دنبال IP آن می گردد نه عنوان آن، آدرس دسترسی به یک دامنه معمولا با www یا بدون آن شروع شده و به پسوندهایی مثل com، org، net، ir و... ختم می شود، در انتخاب نام یک دامنه چند نکته اهمیت زیادی دارد، از جمله کوتاه بودن، مفهوم داشتن، راحتی در نوشتن و خواندن نام دامنه. با ثبت یک دامنه مالکیت آن برای دوره ای (مثلا یک ساله یا پنج ساله) به شما تعلق می گیرد و هیچ فرد دیگری نمی تواند عین آن را ثبت کند، با انقضای دوره نیز می توانید مجددا دامنه خود را تمدید نمائید و تا هر زمان این کار را تکرار کنید و مالکیت آن را خود داشته باشید؛ به لحاظ تاریخی استفاده از دامنه ها ی وب  توسط آژانس تحقیقات پیشرفته در زمینه شبکه ARPANET  یا (Advanced Research Projects Agency Network) در سال 1983 میلادی بنیانگذاری شد.

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

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

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

کنترل پنل به محیطی گفته می شود که در آن می توانید امکانات مربوط به سایت خود را مدیریت کنید، سرورهای مختلف معمولا از برنامه های متفاوتی بدین منظور استفاده می کنند، مثلا برنامه Cpanel در سرور لینوکس بیشترین طرفدار را دارد، برخی نیز از Directadmin استفاده می کنند، در سرور های ویندوز نیز معمولا از Parallels Plesk یا کنترل پنل Parallels Helm استفاده می کنند؛ دقت داشته باشید، بیش از اینکه به نام کنترل پنل توجه کنید، به سرویس های ارائه شده توسط هاست خود دقت کنید، همیشه قبل از انتخاب یک کنترل پنل، سعی کنید با پیش نمایشی از آن کار کنید تا با چند و چون آن آشنا شوید.

اصطلاح نام سرور یا DNS که به آن کارگذار دامنه نیز می گویند، یکی از حساس ترین مسائل برای یک سایت محسوب می شود، DNS یا Domain Name System در واقع اسامی تخصیص داده شده برای کامپیوترها (سرورها) در بستر شبکه اینترنت هستند که باعث شناسایی و تبدیل (resolve) عنوان نام سرور به IP اختصاصی آن می شود، به این صورت وقتی به یک دامنه مراجعه می شود، در واقع به IP مربوط به DNS سرور آن رجوع شده است، در واقع این سیستم شباهت زیادی به کد تلفن کشورها، کد شهرستان و شماره تماس اختصاصی افراد دارد، با این تفاوت که در اینجا دامنه هایی متشکل از حروف و اعداد به نام سرور و سپس به IP سرورها تبدیل شده و بر این اساس سایت های مختلف از هم شناسایی و تفکیک می شوند، یک تفاوت عمده دیگر در این است که آدرس IP سرور می تواند بدون تغییر عنوان DNS آن، تغییر کند، مثلا DNS فرضی ns1.example.com ممکن است مدتی IP خاصی داشته باشد و سپس به شماره دیگری تغییر کند، بدون اینکه تاثیری در نام آن و روند کاری سایت های زیر مجموعه داشته باشد؛ اعمال تغییرات بر روی DNS دامنه سایت، معمولا از طریق کنترل پنل هایی توسط شرکت های مجاز برای ثبت دامنه، ارائه می شود.

سرور لینوکس به سروری با سیستم عامل مبتنی بر لینوکس (Linux) گفته می شود، همانطور که می دانیم لینوکس یکی از معرف ترین سیستم عامل های متن باز یا open source است که در زمینه سرورهای وب، گزینه بسیار مناسبی برای برنامه های مدیریت سایت، مخصوصا به زبان PHP محسوب می شود و از نرم افزارهای Apache HTTP Server، SSH server و... به خوبی پشتیبانی می کند،  نگهداری و هزینه سرور های مبتنی بر لینوکس معمولا به صرفه تر از سرورهای ویندوز بوده و از سرعت و کیفیت بسیار خوبی نیز برخوردار است (البته به شرطی که توسط شرکت معتبری نگهداری و پشتیبانی شود)؛ اگر از سیستم های مدیریت محتوا مبتنی بر PHP استفاده می کنید، یا قصد دارید سیستم مدیریت سایتتان را به PHP برنامه نویسی کنید، توصیه می کنیم حتما از سرور لینوکس برای میزبانی آن استفاده کنید.

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

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

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

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

htaccess در واقع فایلی متنی (اما بدون پسوند) است که در سرور های مختلف (مخصوصا سرور Apache) برای کنترل عملکردهای آن مورد استفاده قرار می گیرد، این فایل در ریشه سایت یا بین فولدرهای آن به صورت htaccess. (بدون فرمت) وجود دارد (اگر این فایل در سرور شما نیست، می توانید آن را ایجاد کنید) و درون آن دستوراتی خاص به صورت متنی و حروف با قاعده نوشته می شود، به دلیل اینکه فایل  htaccess به صورت مجزا از تنظیمات اصلی سرور است و برای سایتهای مختلف می تواند متفاوت باشد، امروزه از آن به وفور، مخصوصا در سرورهای اشتراکی، برای دوباره نویسی لینک های داینامیک به استاتیک (Rewriting)، کنترل دایرکتوری ها با کلمه عبور (Authorization)، تنظیم اطلاعات مربوط به یونیکد صفحات، مسدود کردن IP، تنظیم و سفارشی کردن صفحات خطا  و ... استفاده می شود؛ در مقابل فایل دیگری به نام httpd.conf وجود دارد که به طور مستقیم و یکپارچه تنظیمات سرور را مدیریت می کند.

در کنار فایل htaccess که تنظیمات سرور را مدیریت می کند، در سیستم های مبتنی بر PHP معمولا در سرورها می توان از فایل دیگری به نام php.ini برای کنترل رفتارها و امکانات مربوط به مفسر PHP استفاده کرد، البته این مسئله تا حدود زیادی مخصوصا در سرور های اشتراکی، به اختیارات تعریف شده توسط مدیران هاست برمی گردد، از php.ini می توان به فرض برای غیر فعال یا فعال کردن برخی ویژگی ها در PHP استفاده کرد و تنظیمات پیش فرض را تغییر داد.

پایگاه داده یا دیتابیس (Database) به محل نگهداری اطلاعات معمولا به صورت داینامیک گفته می شود، به فرض در یک سیستم مدیریت محتوا، وقتی مطلبی را ارسال می کنید، این مطلب در فیلد های خاصی که درون دیتابیس با عناوین مشخص تعریف شده، ذخیره می گردد تا در هنگام لزوم از اطلاعات آن استفاده شود، در واقع شیوه و ساختار دیتابیس ها شباهت زیادی به دنیای واقعی و به فرض قفسه های یک کتابخانه دارد، در حال حاضر بیشتر سایت ها از این شیوه استفاده می کنند و تقریبا مدیریت یک وبسایت بزرگ بدون استفاده از پایگاه داده غیر قابل تصور است، تنها سایتهای کوچک با صفحات استاتیک و ثابت، آن هم به تعداد کم، بی نیاز از دیتابیس هستند و در سایر موارد بهترین گزینه، استفاده از آن است، دیتابیس ها انواع و کارکردهای مختلف دارند ولی در کل بسیار به هم شبیه هستند، از جمله مهم ترین سیستم های مدیریت پایگاه داده می توان Oracle، Microsoft SQL Server، MySQL و SQLite را نام برد، البته امروزه از MySQL برای برنامه نویسی با PHP و از Microsoft SQL Server برای برنامه نویسی با ASP بیشتر استفاده می شود؛ آموختن اصول کار با پایگاه داده در صورت آشنایی شما با یکی از زبان های برنامه نویسی سمت سرور، کار چندان سختی نیست و تا حدود زیادی می توان طی مدتی کوتاه، بسیاری از مطالب را فرا گرفت.

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

ddos یا distributed denial of service attack به نوعی حمله و ایجاد اختلال در سرورهای وب گفته می شود که طی آن، معمولا در یک زمان واحد، تعداد زیادی درخواست به یک سرور ارسال می شود و این عمل موجب مختل شدن و نهایتا از کار افتادن آن سرور می شود، ddos یکی از رایج ترین شیوه های ایجاد اختلال برای سرورها در وب است که البته بسته به میزان قدرت مهاجم، قابلیت های نرم افزاری و سخت افزاری سرور، آسیب پذیری نیز در برابر آن متفاوت است، حمله های ddos ممکن است خیلی کوتاه یا در مقابل اگر از آنها جلوگیری نشود، خیلی به طول انجامند و در این مدت سایت شما به کندی بارگذاری شده یا به کل down شود.

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

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

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

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

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

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

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

ساخت منوی آبشاری (عمودی) با تگ ul li و css

در مطالب قبلی از بخش آموزش های کاربردی، با نحوه ساخت چند نوع منوی متفاوت مبتنی بر css و تگ های ul و li آشنا شدیم، همچنین به ضرورت استفاده از تگ های استاندارد ایجاد کننده لیست در html و اهمیت آنها برای موتورهای جستجو و نیز بالابردن قابلیت کاربری (accessibility) صفحه وب، اشاره کردیم، این بار در ادامه آموزش ها، می خواهیم با نحوه طراحی و ایجاد منوی آبشاری یا عمودی (vertical) با تگ ul li و استفاده صرف از css آشنا شویم، از نقاط قوت این منو سازگاری با زبان فارسی و نمایش یکسان در مرورگرهای مختلف و در عین حال سبک و کم حجم بودن آن است، البته ناگفته نماند که تمام امکانات این منو در مرورگر اینترنت اکسپلورر نسخه 6 قابل استفاده نیست.

ایجاد چارچوب کار با html و تگ ul li

قبل از هر چیز، طبق روال باید چارچوب منوهای خود را با استفاده از تگ های ساخت لیست در html یعنی دو تگ ul و li شکل دهیم، در این رابطه به صورت مفصل در آموزش مقدماتی css گفته ایم.


کد html منو با استفاده از تگ ul و li:

توضیح:
- اگر کد بالا را در صفحه ای با فرمت html ذخیره و آن را اجراء کنید، خواهید دید که منوها به صورت خام، دسته بندی شده و زیر مجموعه ای مرتب شده اند.
- برای چینش منوها از بالاترین سطح به منوهای زیر مجموعه، از قابلیت لیست های آشیانه ای یا تو در تو استفاده کرده ایم، نحوه چینش دقیق تگ های ul و li به این صورت، یکی از قسمت های اصلی ساخت لیست منوها است، به صورت ساده ساختار منوی بالا به شکل زیر است:

با درک صحیح این ساختار به ظاهر پیچیده، می توان به هر تعداد منوهای تو در تو ایجاد نمود.

همان طور که می دانیم، کد های html به تنهایی، قدرت چندانی در ایجاد قابلیت های تعاملی ندارند، لذا با استفاده از css و تنظیم ویژگی های display، position و... رفتار مورد انتظارمان را به تگ ها نسبت می دهیم، این کار را در استایل زیر انجام داده ایم.

توضیح:

- position و display دو ویژگی کلیدی هستند که در عملکرد منو، نقش مستقیم بازی می کنند، تغییر مقادیر پیش فرض آنها، می تواند در نحوه نمایش صحیح عناصر تاثیر بگذارد.

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

یا به طور مثال اگر به انتهای استایل دقت کنید، قسمت li:hover .vertical-sub-level .vertical-sub-level در حالتی که ماوس را روی منوی سطح بالا می بریم، باعث محو شدن منوی زیرمجموعه سطح دوم می شود.

- قسمت هایی که با یک علامت زیر خط (underline) و ستاره در ابتدای آنها تعریف شده اند، هک css مخصوص مرورگر اینترنت اکسپلورر است تا خاصیت های منو به درستی نمایش داده شوند (علامت _ هک برای اینترنت اکسپلورر نسخه 6 و علامت * هک برای اینترنت اکسپلورر نسخه 7 است).

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

یکی از مواردی که در استفاده از این نوع منوها و امکانات تعاملی در وب باید به آن توجه نمود، قابلیت سازگاری با مرورگرهای متفاوت است، اشکال عمده برنامه هایی که تحت عنوان ساخت منو استفاده می شوند نیز همین مسئله است که اکثر منوهای آماده آنها تنها در چند مرورگر به درستی نشان داده می شود یا اینکه برای کارکرد صحیح به حجم زیادی از فایل های جانبی نیازمندند، اما در مورد این منو، تلاش زیادی کرده ایم که بدون استفاده از فایل ها و اسکریپت های جانبی، آن را تقریبا با تمام مرورگرهای استاندارد موجود سازگار کنیم، لذا در عین سادگی و سبکی، قابلیت کاربردی آن تقریبا در تمام مرورگرها (Firefox, Opera, Internet Explorer +6, Google Chrome و...) یکسان است، منتها در مورد مشکل همیشگی طراحان وب یعنی مرورگر اینترنت اکسپلورر نسخه منسوخ 6، به دلیل پشتیبانی نشدن قابلیت hover برای تگ li، زیر مجموعه های این منو در این نسخه از اینترنت اکسپلورر به درستی نشان داده نخواهد شد، لذا بهترین گزینه در چنین شرایطی، به اصطلاح ایمپورت استایل خاص برای این مرورگر است یا اینکه به بازدیدکننده خود که از این مرورگر قدیمی و آسیب پذیر استفاده می کند، پیامی مبنی بر پشتیبانی نشدن امکانات سایت توسط مرورگر او نشان دهیم، به طور مثال با دستور شرطی زیر می توان این کار را انجام داد:

کد نهایی منوی عمودی با css و تگ ul li و همچنین پیش نمایش آنلاین آن را جهت تست و بررسی در زیر قرار داده ایم که می توانید از آن استفاده کنید.

همانطور که می دانیم، امروزه از کدها و استایل های css علاوه بر کاربرد های معمول و روزمره، برای خلق جلوه های خاص در بستر وب، استفاده های زیادی می شود، یکی از این جلوه ها که محبوبیت زیادی نیز بین طراحان وب دارد، خلق منوهای کشویی (بازشونده) یا به اصطلاح drop down مبتنی بر تگ های ul li و css است، به این صورت که لیستی از منوها با قابلیت داشتن زیر مجموعه که تنها هنگام بردن ماوس روی آنها، ظاهر می شوند و با خارج کردن ماوس، مجددا به طور خودکار محو می شوند؛ نوع پیشرفته تر این منوها با جاوا اسکریپت یا جی کئوری (jQuery) نیز وجود دارد که البته یک قاعده نانوشته در وب می گوید هر چه قدر ظرافت و جلوه های ویژه کار افزایش یابد، به همان نسبت از سازگاری کم می شود، به هر صورت در این آموزش می خواهیم با نحوه ساخت منوهای کشویی یا به عبارتی بازشونده، مبتنی بر تگ ul li و css آشنا شویم.

اینکه چرا باید برای ساختن منوهای بازشونده از تگ ul li استفاده کنیم به این علت است که در درجه اول این نوع منوها از لحاظ موتورهای جستجو به راحتی قابل فهم و ایندکس شدن هستند که به اصطلاح به آنها Search Engine Friendly گویند، از طرفی برای کاربرانی که به هر دلیل از استایل css نمی توانند استفاده کنند (screen readers)، وجود منوهای مبتنی بر تگ های ul li باعث می شود که علی رغم غیر فعال بودن استایل css، همچنان منوها به صورت دسته بندی شده و زیرمجموعه ای قابل روئیت و استفاده باشند؛ دلیل دیگر نیز می تواند اصولی تر بودن کدنویسی باشد، در html مبحثی تحت عنوان semantic یا معنایی وجود دارد که به طور خلاصه مفهوم آن، استفاده ی به جا از تگ ها است، مثلا برای ایجاد لیستی از آیتم ها، تگ ul li کاربرد دارد و نباید از موارد مشابه که فلسفه ای متفاوت دارند، استفاده شود.

ابتدا قبل از پرداختن به کدنویسی css، چارچوب کار و منوهای خود را مبتنی بر ul li در html به صورت زیر می نویسیم، البته کد زیر صرفا جهت نمونه آورده شده است و شما می توانید با توجه به نیاز خودتان آن را ویرایش کنید.

توضیح:

- به نحوه قرار گرفتن منوها، به صورت تگ های ul li در حالت تو در تو دقت کنید.

- همانطور که ملاحظه می کنید، ابتدا یک بلاک با آی دی فرضی main-menu ساخته ایم که درون خود یک تگ ul اصلی با زیرمجموعه هایی به صورت li ul li دارد.

- در تگ های ul سطح دو، از کلاس sub-menu استفاده کرده ایم که در ادامه نحوه تنظیم ویژگی های آن را خواهیم دید.

پس از اینکه اسکلت بندی کار را ساختیم، نوبت به تعریف کلاس و آی دی css می رسد، همانطور که ملاحظه می کنید، در کد بالا یک آی دی و یک کلاس به کار رفته است (آی دی main-menu و کلاس sub-menu)، لذا قسمت عمده کار ما، تنظیم این دو عنصر خواهد بود، در استایل زیر این کار را انجام داده ایم و علاوه بر دو عنصر نام برده، موارد عمومی مثل فونت صفحه، رنگ و حالت لینک ها و... را نیز تنظیم کرده ایم:

توضیح:

- مقادیر مربوط به body و a به صورت کلی، ویژگی های صفحه را تعریف می کنند.

- مقادیر position در آی دی main-menu باید به صورت relative یا نسبی تعیین شود.

- در قسمت main-menu li به این جهت از float و مقادیر right استفاده کرده ایم که منو ها در کنار هم در یک سطح و از راست به چپ قرار بگیرند.

- به نحوه تعریف استایل برای تگ های زیرمجموعه ای در کد بالا دقت کنید، مثلا تعریف به صورت main-menu li ul a بر روی عنصر ul که خود زیر مجموعه li است و li نیز داخل بلاک div با آی دی main-menu قرار دارد، در حالت لینک، اثر گذار است.

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

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

- قسمت مربوط به clear و مقادیر both برای قرار گرفتن صحیح منو، داخل بلاک main-menu لازم است.

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

با استفاده از خاصیت display و مقادیر none و block می توان منوی کشویی را توسعه داده و به هر تعداد منوی زیر مجموعه ایجاد کرد، به طور مثال با افزودن ویژگی های css زیر به استایل منو، این کار را برای ایجاد منوهای زیر مجموعه سطح دوم انجام می دهیم.

توضیح:

خاصیت display با مقادیر none در تکه کد اول، برای حالتی است که تگ li اول در حالت فعال است (یعنی کاربر ماوس را روی یکی از منوهای اصلی می برد)، لذا تگ ul در دو سطح پائین تر از li (یعنی همان ul که منوی زیرمجموعه سطح دوl را در خود دارد) باید مخفی باشد.

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

در زیر کد نهایی منو  را می توانید ملاحظه کنید.

تنظیمات css مخصوص مرورگر اینترنت اکسپلورر

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

چرا باید تنظیمات مخصوص مرورگر اینترنت اکسپلورر را انجام دهیم؟

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

معمول ترین و متداول ترین روش استفاده از پیام های شرطی یا (Conditional Comments) است (که در ادامه به طور مفصل خواهیم گفت)، شیوه های دیگری تحت عنوان هک (با هک سایت فرق دارد!) یا CSS Hacks نیز وجود دارند که در واقع به معنی استفاده از علائم مخصوص در تعریف کدهای css و قابل پردازش توسط ورژن های خاصی از مرورگر اینترنت اکسپلورر است.

نحوه تنظیم استایل css مخصوص مرورگر اینترنت اکسپلورر

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

دستورات یا پیام های شرطی در مرورگر اینترنت اکسپلورر

دستورات شرطی در اکسپلورر با علائم خاصی تعریف می شوند:

توضیح:
- حالت معمول ایجاد یک پیام در صفحات html استفاده از <-- !--> است، همانطور که می بینید این شرط ها نیز مبتنی بر همین قاعده هستند.
- این دستور به مرورگر اکسپلورر می گوید که باید از مقادیر موجود در آن استفاده کند (در واقع مقادیر موجود در این شرط، تنها برای اینترنت اکسپلورر قابل استفاده است و سایر مرورگرها با آن مثل یک پیام معمولی برخورد می کنند)، جالب است که بدانید درون این شرط می توان هر عبارت یا کدی قرار داد و فقط محدود به ایمپورت استایل css نیست، مثلا می توان به کاربر پیام داد که مرورگر او قدیمی است و باید از مرورگر دیگری استفاده کند و...
- این پیام های شرطی باید بعد از استایل اصلی و پیش فرض (که مخصوص تمام مرورگرها است) ترجیحا در قسمت هِدر و بین تگ های head قرار گیرند.

تنظیمات مخصوص ورژن های مختلف و معنی آنها

در زیر لیستی تقریبا کامل از تنظیمات استایل css مخصوص ورژن های مختلف مرورگر اینترنت اکسپلورر به همراه معنی عبارات آن آمده است.

ایمپورت استایل مخصوص اینترنت اکسپلورر (تمام ورژن ها)

توضیح:
- if به معنی اگر و IE مخفف اینترنت اکسپلورر (Internet Explorer) است.

ایمپورت استایل مخصوص اینترنت اکسپلورر ورژن 6

ایمپورت استایل مخصوص اینترنت اکسپلورر ورژن 9

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

هک با عبارت html+*

در این روش یک آی دی یا کلاس را دو بار به صورت عادی و با  html+*  ایجاد می کنند، به عنوان مثال کد زیر دو ویژگی متفاوت برای یک آی دی تعریف می کند، قسمتی که html+* در ابتدای آن قرار دارد، تنها در مرورگر IE 7 پردازش می شود.

روش هک زیر خط یا underline که عنوان صحیح تر آن underscore است برای هک نسخه های مختلف اینترنت اکسپلورر مخصوصا نسخه 6 کاربرد دارد، در این روش در همان آی دی یا کلاس، ویژگی مورد نظر را با یک زیرخط در ابتدای آن تعریف می کنند.

این روش هک هم برای مرورگر اینترنت اکسپلورر ورژن 7 به پائین به کار می رود، که در آن برای عناصر خاص اکسپلورر یک ستاره در ابتدای آنها قرار می دهند.

این شیوه هک هم برای مرورگر اینترنت اکسپلورر ورژن 9 یا 8 و پائین تر به کار می رود، در این روش برای ویژگی خاص اکسپلورر، عبارت 9\ را به آخر آن اضافه می کنند.

حذف اسکرول افقی (horizontal scroll) با css

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

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

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

همانطور که با css می توان ویژگی های مربوط به پهنای اِلمان مورد نظر را تعریف کرد، می توان با خاصیت های آن، اسکرول ناخواسته را نیز حذف کرد، به طور معمول برای از بین بردن اسکرول (عمودی) از ویژگی overflow به صورت زیر استفاده می شود.

این کد را می توانید در یک کلاس تعریف کنید و آن کلاس را به بلاک یا تگ body (برای از بین بردن اسکرول در کل صفحه) نسبت دهید.

مشکل ناسازگاری overflow-x در برخی از مرورگرهای قدیمی

در برخی از نسخه های مرورگر فایرفاکس ممکن است خاصیت overflow-x به درستی عمل نکند، هرچند بیشتر کاربران از ورژن های به روزتر استفاده می کنند، اما جهت اطلاعات بیشتر، برای این نوع مرورگرها کد بالا را با افزودن مقادیر moz-scrollbars-vertical کامل می کنیم.

حذف اسکرول بار برای textarea

در فرم های html برای عنصر textarea نیز روشی که در بالا توضیح دادیم کاربرد دارد، اما با خاصیت های html نیز می توان اسکرول افقی textarea را در فرمها از بین برد، برای این منظور از wrap و مقدار virtual استفاده کنید.

ایجاد بلاک و تصویر شفاف (transparent) با استفاده از css3

امروزه در طراحی صفحات وب، استفاده از تصاویر شفاف و یا به اصطلاح transparent امری مرسوم است، به طور مثال ممکن است طراحان قالب وبلاگ ها یا سایت ها، در طراحی پس زمینه مطالب، آن را کمی شفاف کنند تا تصویری که در زیر بلاک مطلب قرار دارد به صورت نیمه شفاف دیده شود، استفاده از این تکنیک پیش تر با تصاویر png ممکن بود، اما مشکل همیشگی یعنی مرورگر غیر استاندارد و ضعیف اینترنت اکسپلورر (IE) قادر به نمایش این تصاویر با زمینه شفاف نبود، لذا طراحان وب به فکر جایگزینی برای این تکنیک برآمدند و از جاوا اسکریپت و بعدها css بدین منظور استفاده کردند، در این مطلب قصد داریم نحوه ایجاد تصاویر و بلاک های div شفاف را با css آموزش دهیم.
عنصر استانداردی که در css3 برای ایجاد لایه های شفاف تعریف شده، opacity نام دارد که به معنی تاری و کدری است، البته برای مرورگرهای قدیمی تر که از css3 پشتیبانی نمی کنند باید از مقادیر دیگری تحت عنوان ms-filter، filter، moz-opacity و khtml-opacity استفاده کنیم.

ایجاد بلاک و تصور شفاف با عنصر opacity در css3:

کد زیر مثال استاندارد css3 برای ایجاد بلاک یا تصویر شفاف است، عنصر مربوط به filter برای سازگاری با مرورگر اینترنت اکسپلورر 8 و مابعد آن است.

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

توضیح:

- خط اول کد (width: 100%) برای ورژن های قدیمی مرورگر اکسپلورر (5، 6 و 7) نیاز است (به جای آن می توانید از مقادیر zoom: 1 استفاده کنید).

- مقادیر ms-filter و filter برای ایجاد حالت شفافیت در اینترنت اکسپلورر کاربرد دارد.

- moz-opacity و khtml-opacity برای ورژن های قدیمی مرورگر فایرفاکس (Firefox) و سافاری (Safari) است.

- opacity نیز خاصیتی استاندارد در css3 است.

- مقادیر شفافیت برای مرورگر اکسپلورر به صورت اعدادی بین 0 تا 100 و برای سایر مرورگرها و حالت استاندارد css3، عددی بین 0 تا 1 است.

- به کار بردن این کلاس ممکن است از نظر سیستم های اعتبار سنجی که هنوز خود را با ویژگی های css3 تطبیق نداده اند، موجب نامعتبر تلقی شدن کد css گردد که البته چندان جدی نیست.

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

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

برای حذف حاشیه بین بلاک div  و تگ body کافی است مقادیر margin و padding را برابر صفر قرار دهیم:

توضیح:
- در مثال بالا بلاکی با کلاس فرضی block را بین تگ body ایجاد کرده ایم که حاشیه آن صفر است و برای body نیز از مقادیر margin و padding صفر استفاده کرده ایم.

نحوه تنظیم یک بلاک در وسط صفحه با استفاده از css

تنظیم بلاک ها در سمت چپ یا راست صفحه به کمک عنصر float و مقادیر left,right به آسانی ممکن است، اما مشکل بیشتر کاربران تنظیم یک بلاک div در وسط صفحه است که در تمام مرورگرها نیز یکسان باشد، در مثال زیر این کار را برای لایه ای با کلاس block انجام داده ایم:


توضیح:
- همانطور که در کد ملاحظه می کنید، ما از margin-left و margin-right با مقادیر auto استفاده کرده ایم، با این کار مرورگر بلاک مربوطه را در وسط صفحه تنظیم می کند.
- علاوه بر این شما می توانید با مقادیر margin: 0 auto نیز یک بلاک را در وسط صفحه تنظیم کنید.

ایجاد منوهای زیبا برای سایت یا وبلاگ با استفاده از تکنیک CSS

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

ایجاد منوهای اینتراکتیو با فتوشاپ و css

ابتدا یک تصویر با اندازه ارتفاع 120 پیکسل (که از دو نیمه ی 60 پیکسلی تشکیل شده)، در برنامه های گرافیکی مانند فتوشاپ ایجاد می کنیم، از آنجایی که برای ایجاد منوهای اینتراکتیو، از عنصر کلیدی background-position با مقادیر متفاوت در حالت عادی و hover استفاده خواهیم کرد، لذا تصویر ما باید در دو قسمت خود، دارای دو ویژگی متفاوت باشد، تا هنگامی که در حالت فعال قرار می گیرد، متمایز به نظر برسد.

توضیح:

- خاصیت display با مقادیر inline-block و همچنین float:right کمک می کنند تا لینک های ما در یک ردیف قرار گیرند.

- حالت menu a یعنی موقعیتی که آی دی menu در حالت لینک قرار دارد.

- حالت menu a:hover به معنی حالتی است که لینک آی دی menu در حالت فعال قرار می گیرد.

- ul و li عناصر ایجاد لیست در صفحات وب هستند و از لحاظ موتورهای جستجو و علم سئو، شیوه ای مناسب برای ساخت منوها محسوب می شوند.

- تغییر تصاویر در حالت عادی و فعال با قابلیت background-position و مقادیر آن صورت می گیرد.