شروع کار با Bootstrap برای تازه‌کارها -۱

بوت‌استرپ (BootStrap) یک فریم ورک CSS و یا به طور کلی مجموعه از کدهای پیشفرض CSS و HTML برای ایجاد صفحه های وب است که در ابتدا به عنوان یک پروژه توسط توییتر انتشار یافت  و هم اکنون به عنوان محبوب ترین فریم ورک قالب بندی در بین طراحان و خصوصا” توسعه دهندگان وب درحال استفاده است.

بوت‌استرپ شامل یکسری کدهای کاربردی و پیش ساخته با استفاده از CSS و JavaScript برای قالب بندی نوشته ها و تایپوگرافی، دکمه ها و فرم ها، تصاویر، تب ها و موارد کاربری  بسیار دیگر می باشد.  قابلیت تقسیم شبکه ای صفحه وب (Grid) و طراحی پاسخگو ( Responsive Design ) توسط این فریم ورک وجود داشته که با این دو امکان مهم طراحی یکپارچه برای کلیه دستگاه های رایانه ای و تلفن های هوشمند و تبلت مهیا شده است.

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

 

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

برای دانلود آخرین نسخه به سایت Getbootstrap.com مراجعه کنید و در همان صفحه اول بر روی دکمه دانلود کلیک کنید.

صفحه نخست سایت Bootsrap

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

bootstrap_css

Bootsrap_js

گام دوم، استفاده و راه اندازی

برای استفاده از بوت استرپ ما نیاز به HTML داریم.

  • در ابتدا یک فایل HTML باید ایجاد کنیم برای این کار و استفاده بهتر از قابلیت های Bootsrap پیشنهاد می کنیم از یک نرم افزار ویرایشگر پیشرفته وب مانند Dreamveawer یا Aptana استفاده کنید.
  • توجه داشته باشید در نسخه جدید Bootsrap توصیه می شود حتما از نسخه HTML5 استفاده کنید ( به Doctype در خط اول توجه کنید ):

001

  • این فایل را به عنوان مثال home.html نام گذاری کردم و در دستکتاپ و در دایرکتوری ای به نام blog ذخیره کردم.
  • اکنون دو دایرکتوری CSS و JS بوت استراپ را نیز کپی و در کنار فایل home.html  یعنی blog قرار می دهم:

002

  • به ویرایشگر وب و فایل home.html بر می گردیم. اکنون این چند خط را ما بین تگ  <head> قرار دهید:
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
 <!-- Bootstrap -->
								<link href="css/bootstrap.min.css" rel="stylesheet" media="screen" />

  • در کد اول قابلیت طراحی پاسخگو را فعال می کنیم و در خط بعدی فایل استایل بوت استرپ را به HTML پیوست می کنیم.
  • اکنون می توانیم از امکانات CSS بوت استرپ استفاده کنیم، بوت استرپ تعداد زیادی کلاس CSS با قالب بندی های متفاوت دارا می باشد تنها کافی است در تگ class شی مربوطه در HTML آن را وارد نمایید. به شکل زیر توجه کنید، مثلا کلاس container عموما برای بخش اصلی سایت مورد استفاده قرار می گیرد و قابلیت پاسخگویی نیز نسبت به تغییر سایز اندازه مرورگر را دارد.
  • bootsrap_container
  • برای مثال برای ایجاد یک صفحه ورود کاربران به بخش مدیریت می توانیم از کدهای زیر استفاده کنیم که شامل دکمه و تعدادی فیلد فرم می باشد:
	
<div class="container"><form class="form-signin well">
<h2>Please sign in</h2>
<input class="input-block-level" type="text" placeholder="Email address" /> <input class="input-block-level" type="password" placeholder="Password" /> <label class="checkbox"> <input type="checkbox" value="remember-me" /> Remember me </label> <button class="btn btn-primary" type="submit"> Sign in </button>

</form></div>
  • به class های HTML دقت کنید، به غیر از form-signin سایرین همه مربوط به بوت استرپ می باشند، بر روی مرورگر فایل html را مشاهده کنید، حتما هم عقیده هستید که ظاهر آن با توجه به اینکه هیچ کد قالب بندی و css استفاده نکردیم قابل قبول است اما نیاز به تغییرات و اصلاحات جزئی  دارد.

login-b

برای شخصی سازی و تغییرات سه راه وجود دارد:

    1. راه اول این است که یک فایل جداگانه CSS ایجاد کنیم و تغییرات مورد نظر خود را روی آن قرار دهیم .
    2. تغییرات را مستقیم در فایل CSS بوت استرپ قرار دهیم و ویرایش کنیم.
    3. اعمال تغییرات به صورت inline در داخل تگ HTML

به نظر بنده راه اول مناسبت تر است و بهتر است تا حد امکان زیاد فایل Bootsrap اصلی را دستکاری نکنیم، مگر اینکه می دانید چه کار می کنید! برای این کار ابتدا در پوشه CSS یک فایل به نام مثلا main.css ایجاد می کنیم و سپس در هدر فایل HTML بعد از خط لینک به bootstrap.min.css یک خط جدید مانند این اضافه می کنیم:

	
		<link href="main.css" rel="stylesheet" />
  • اگر در ویژگی کلاس from دقت کنید یک کلاس form-signin نیز وجود دارد، این کلاس در css بوت استرپ موجود نیست و می توانیم با ستفاده از این ( یا هر نام دلخواه خود) در فایل CSS جدیدی که ایجاد کرده ایم تغییراتی در ظاهر بدهیم، فرم را به وسط صفحه هدایت کردیم و همچنین رنگ های پس زمینه صفحه و کادر فرم را نیز تغییر دادیم.

main.css:

@charset "utf-8";
/* CSS Document */

body{
	background-color:#eee;
}

.form-signin{
	margin:15% auto;
	width:400px;
	float:none;
}
  • می توانید حتی قالب های پیش فرض بوت استرپ را بازنویسی کنید و تغییرات مورد نظر خود را بدهید، مثلا رنگ پس زمینه کلاس well را می توانید با کد زیر تغییر دهید و پر رنگ تر کنید:
.well{
 background-color:#ccc;
}

b_login

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

=== پابان قسمت اول ===

فن‌آوری

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

 

دروغ ۱۳ گوگل ، با حرکات خود جی میل را کنترل کنید !

اگر در جی میل خود وارد شوید در سمت راست و بالا یک پیغام قرمز رنگ مبنی بر امکانات جدید در گوگل تحت عنوان New! Gmail Motion  BETA مشاهده می کنید. با کلیک بر روی آن به صفحه می روید تحت عنوان “یک راه جدید برای ارتباط” که در آنجا به معرفی این تکنولوژی جدید یعنی ارتباط با جهان توسط حرکات بدن و دست پرداخته است.

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

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

 

در پایان هم نظر چند شخصیت برجسته در رابطه با این تکنولوژی را قرار داده!

وقتی دکمه Try Gmail Motion را فشار می دهید تقریبا هیچ اتفاقی نمی افتد و دوباره به صفحه جیمیل خود باز می گردید، البته به احتمال فراوان عده در مقابل وب کم های خود با توجه به آموزش ها گفته شده شروع به تست این تکنولوژی می کنند، به نمونه حرکات فایل آموزشی نگاه کنید و اکنون تصور کنید که عده ای مشغول شده اند D:

به نظر من دروغ ۱۳ جذاب و سر گرم کننده ای بود…

چقدر به حریم خصوصی خود در اینترنت اهمیت می دهید؟


حتما در گشت و گذار در اینترنت در وبسایت های مختلف (غیر ایرانی) به کلمه هایی نظیر،  Privacy policy ،Privacy که عموما در قسمت پایین صفحات وب که به فوتر معروف است برخورد کرده اید؟

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

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

شبکه های اجتماعی و در راس آن فیس بوک بانک اطلاعاتی بسیار بزرگی از اطلاعات خصوصی افراد می باشد که همواره در کانون توجه افراد سوء استفاده کننده قرار دارد. در شبکه های اجتماعی بخش عمده حفظ و کنترل اطلاعات سری و شخصی بر عهده کاربر و تنظیمات اعمال شده توسط خود وی می باشد. کنترل میزان دسترسی افراد تا حد خوبی در فیس بوک قابل تعیین است. اما طبق گفته یک سایت امینیتی در این زمینه نزدیک به ۲۰۰ سایت جستجو دوست ، اطلاعات شخصی ذخیره شده کاربران خود را به هرشخصی که بخواهد می فروشند و ارائه می دهند. (۱)

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

  1. دادن نظر یا کامنت در وبلاگ ها
  2. نمایش و چگونگی آنلاین بودن شما
  3. ارسال اطلاعات شخصی و رزومه به وبسایت های مشاغل
  4. ارتباط مکرر با دوستان در شبکه های اجتماعی

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

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

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

به عنوان مثال طبق گفته خود سایت گوگل، با جستجو کلمه ای مانند Car این موارد از اطلاعات به عنوان لاگ یا رویداد ماه ها در گوگل نگهداری می شوند (۲) :

۱۲۳٫۴۵٫۶۷٫۸۹ – ۲۵/Mar/2003 10:15:32 –
http://www.google.com/search?q=cars –
Firefox 1.0.7; Windows NT 5.1 – 740674ce2123e969

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

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

 

پس به دهکده جهانی اینترنت زیاد اعتماد نکنید.

 

—- پانویس—–

  1. http://www.reputation.com/myprivacy
  2. http://www.google.com/privacy/faq.html