با فریمورک بوت استرپ می توان هرگونه سایتی که در ذهن دارید به سادگی هرچه تمام بسازید. همان طور که نصب این فریم ورک بسیار راحت است، مشاهده نتیجه در آن نیز امری ساده خواهد بود. با اینکه این فریم ورک امکانات و قابلیت های بالایی دارد، اما می توانید در مدت زمان کوتاهی آن را به سادگی یاد بگیرید. در ضمن هرچه بیشتر برای یادگیری این فریم ورک زمان صرف کنید به طبع به ابزارهای بیشتری از آن مسلط خواهید شد.
ما در این مطلب می خواهیم هر چه بیشتر شما را با این فریم ورک و نحوه نصب آن آشنا سازیم تا بتوانید به خوبی با این فریم ورک کار کنید.
آیا ترکیب دو فریم ورک لاراول و بوت استرپ امکان پذیر است؟
در حال حاضر با توجه به توسعه ابزارهای برنامه نویسی قابلیت نصب بوت استرپ در لاراول امکان پذیر شده است. بنابرای ن می توان با بهره گیری از فریم ورک bootstrap بسیاری از کدهای ریسپانسیو را در لاراول استفاده کرد. جهت آشنایی بیشتر با این مسئله باید خدمت شما عرض کنیم که لاراول فریم ورکی بر پایه php است که در واقع برای طراحی Back-end سایت ها استفاده می شود. حال در مقابل بوت استرپ دارای کدهای HTML، CSS و JS است که در واقع برای طراحی Front-end از آن استفاده می شود.
در یک توضیح کوتاه می توان گفت بوت استرپ وظیفه زیبایی و جذابیت یک سایت را بر عهده دارد. در مقابل نیز لاراول وظیفه کنترل منطق یک سایت که در واقع هسته اصلی و پایه و اساس یک سایت است را بر عهده دارد.
همان طور که می دانید یک سایت خوب و مناسب باید علاوه بر بک اند قوی، دارای فرانت اند جذابی باشد تا بتواند نظر مخاطبین را به سرعت جلب کند. به همین دلیل می توان از این دو فریم ورک که در واقع مکمل یکدیگر هستند، در یک پروژه استفاده کرد.
طریقه نصب بوت استرپ
دو روش جهت دانلود بوت استرپ وجود دارد که یکی از آنها دانلوداز سایت اصلی و به صورت چپ چین است. روش دیگر نیز افزودن فایل های cdn از این فریم ورک است که به سادگی قابل استفاده است.
حال بدون در نظر گرفتن شیوه دانلود، در روش cdn باید فایل های ذخیره شده از سایت را که به صورت CSS و جاوا اسکریپت است، به بخش HTML سایت وارد کنید. در این صورت باید فایل های CSS را داخل تگ <head> و فایل های JS را درون تگ <body> قرار دهید.
تفاوت بوت استرپ ۳ و ۴ در چیست؟
بوت استرپ ۴ به روز شده و تغییر یافته بوت استرپ نسخه ۳ بوده و شامل اجزای جدید و کاربرد بیشتری نسبت به نسخه قبل است. علاوه بر آن، این نسخه از سرعت بالاتری نسبت به نسخه پیشین برخوردار است. bootstrap 4 قابلیت پاسخگویی بیشتری داشته و می تواند در مدت زمان کمتر به نیازهای برنامه نویسان پاسخ دهد.
bootstrap 4 از تمامی نسخه های مرورگرها و سیستم عامل ها پشتیبانی می کند و به بیانی دیگر می توان گفت با تمامی مرورگرهای مدرن همخوانی دارد اما از مرورگر سیستم اکسپلورر نسخه ۹ به پایین که بسیار قدیمی هستند پشتیبانی نمی کند. در بوت استرپ ۴ امکان سفارشی سازی به صورت مدرن نیز فراهم شده است. بدین معنا که می توانید برخلاف نسخه قبل از تمامی کدهای فانتزی در این نسخه استفاده کنید و جهت حذف و یا تغییر آن تنها باید یک متغیر را تغییر دهید.
در این بخش در خصوص بوت استرپ و ویژگی های آن گفته شد و توانستید جهت نصب و آموزش Bootstrap با روش های ساده و کاربردی آن به راحتی آشنا شوید.
آشنایی با ویژگی های Bootstrap 4
فریم ورکی که توانست با بهره گیری از عمل ریسپانسیو در تمامی گوشی ها، تبلت و سیستم های دیگر کار کند، بوت استرپ بود. حال نسخه جدید این بوت استرپ که نسخه ۴ نام دارد توانسته است ویژگی های بسیاری را برای این فریم ورک فراهم کند. به گونه ای که استفاده از آن علاوه بر سرعت بخشی بالا، به سادگی هر چه بیشتر فراهم شده و هر برنامه نویسی که با HTML و CSS آشنایی داشته باشد می تواند از این فریم ورک استفاده کند.
علاوه بر ویژگی های گفته شده، برخی از ویژگی های دیگر نسخه ۴ را جهت آشنایی بیشتر در این خصوص برای شما نام می بریم:
- تغییر سایز فونت های این نسخه از ۱۴ پیکسل به ۱۶ پیکسل
- تغییر در واحد اندازه گیری از پیکسل به rem
- امکان بازنویسی پلاگین های جاوا اسکریپت
- تغییر نام برخی از کلاس ها در این نسخه
- حذف پشتیبانی از آیکن ها
- استفاده از کامپوننت های جدید Cards
- حذف پشتیبانی از نسخه های قدیمی مرورگرهایی همچون اینترنت اکسپلورر ۹ به پایین
- پشتیبانی از ویژگی Flexbox
- ارتقا از Less به Sass
- و غیره
حال که با ویژگی های نسخه بوت استرپ ۴ آشنا شدید می توانید به سادگی در خصوص نصب آن اقدام کنید.
استفاده از بوت استرپ ۴ خوب است یا بد؟
برخی از افراد در هنگام نصب بوت استرپ با این سوال مواجه می شوند که نسخه ۴ آن خوب است یا بد؟ آیا یادگیری این فریم ورک کاربردی است یا خیر؟ و کلی سوال دیگر که ممکن است در هنگام نصب این فریم ورک ذهن افراد را درگیر کند.
پیش تر در خصوص این فریم ورک و نحوه نصب بوت استرپ توضیحاتی را خدمت شما ارائه کردیم حال باید خدمت تان عرض کنیم که به کارگیری از این فریم ورک کاملا به نحوه کار و سایتی که قصد طراحی آن را دارید، بستگی دارد و اگر برنامه نویس Front-end هستید می توانید به سادگی از این فریم ورک بهره مند شوید.
سعی کردیم با آموزش نصب بوت استرپ ۴ در آغاز کار با این فریم ورک شما را یاری کنیم چرا که bootstrap می تواند پاسخگوی بسیاری از نیازهای برنامه نویسانی باشد که علاقه مند به سرعت و زیبایی در طراحی سایت آن هم به صورت دلخواه هستند.
محتوای کامل در سایت منبع
Bootstrap چیست؟
Bootstrap مجموعه ای از ابزارهای رایگان برای ایجاد صفحات وب و نرم افزارهای تحت وب است که شامل دستورات HTML، CSS و توابع جاوا اسکریپت جهت تولید و نمایش فرم ها، دکمه ها، تب ها، ستون ها و سایر المان های مورد نیاز طراحی وب می باشد.
Bootstrap در ابتدا توسط مارک اتو و جاکوب تورنتون و در جهت ایجاد یک چارچوب ظاهری مشخص و یکسان در ابزارهای توییتر طراحی و نوشته شد. قبل از شروع این پروژه نمونه های زیادی با همین رویکرد ایجاد شده بود که همگی با سرنوشتی مشابه و عدم استقبال طراحان وب دنیا مواجه شده بودند. به دلیل وجود مشکلات اساسی در نمونه های دیگر، سازنده اصلی توییتر یا همان مارک اتو تصمیم به ساخت یک سیستم داخلی و قدرتمند برای خود با نام Bootstrap گرفت.
در اگوست سال ۲۰۱۱، توییتر Bootstrap را بصورت متن باز و رایگان به عنوان یک فریم ورک طراحی وب سایت در اختیار دیگران قرارداد و در فوریه ۲۰۱۲ به محبوب ترین پروژه در سایت Github تبدیل شده بود.
تاریخچه کلمه Bootstrap چیست؟
جدای از بحث مربوط به طراحی وب و موارد مربوط به آن، عبارت Bootstrap به تنهایی به معنی “خود راه انداز” بوده و کلمه Bootstraping به معنی راه اندازی یک فرآیند بصورت مستقل و بدون استفاده از منابع خارجی می باشد. این عبارت در علم کامپیوتر کمی کوتاهتر شده و با عنوان Booting بکار میرود، که نشان دهنده فرآیند راه اندازی سیستم و واردسازی اطلاعات اولیه نرم افزار در حافظه کامپیوتر می باشد.
کلمه Boot در زبان انگلیسی به معنی پوتین یا چکمه می باشد، برخی از پوتین ها زبانه کوچکی در انتهای خود دارند که هنگام پوشیدن پوتین برای قرارگرفتن بهتر پا در آن استفاده میشود (چیزی شبیه به پاشنه کش) این زبانه با نام Bootstrap شناخته میشود.
معرفی امکانات Bootstrap
این چارچوب یا Framework با تمامی مرورگرهای استاندارد همخوانی داشته و حتی در نسخه های قدیمی تر مانند اینترنت اکسپلورر ۸ نیز ظاهر زیبای خود را حفظ میکند. از نسخه دوم Bootstrap به بعد طراحی واکنشگرا یا رسپانسیو نیز در آن لحاظ شد که موجب نمایش مناسب صفحه در تلفن های هوشمند و تبلت ها میگردد. برای آشنایی بهتر با طراحی واکنشگرا میتوانید به مقاله ای با عنوان طراحی Responsive چیست مراجعه نمایید.
Bootstrap متن باز بوده و در سایت Github برای دانلود رایگان قرارگرفته است. امکان همکاری در این پروژه و شخصی سازی امکانات و ظاهر آن فراهم شده است و تاکنون مستندات مربوط به آن به چندین زبان دنیا ترجمه شده است.
با توجه به راست چین بودن نوشتار فارسی و تفاوت چیدمان مطالب با سایت های انگلیسی نیاز به تغییرات اساسی در کدهای CSS و توابع jQuery احساس میشود که با جستجو در اینترنت سایت Bootstrap فارسی را یافتیم. این سایت علاوه بر تغییر کدهای اولیه مستندات و آموزش های مربوط به Bootstrap را نیز به زبان فارسی ارائه داده است که میتواند برای شروع به کار بسیار مناسب باشد.
Bootstrap به زبان ساده!
شاید هنوز هم با امکانات و توانایی های Bootstrap بخوبی آشنا نشده باشید و یا دقیقا متوجه کاربرد آن نشوید. در این بخش کمی ساده تر امکانات و توانایی های آن را بررسی خواهیم کرد.
بزرگترین مشکل طراحان وب و کدنویسان قدیمی، ایجاد ظاهری زیبا و مناسب است! بله دقیقا مشکل اساسی اینجاست. اصول کدنویسی و ایجاد زیربنا و ساختار مناسب برای یک سایت بسیار مهم و پیچیده است ولی نمایش صحیح خروجی کار و ایجاد یک فضای کاربرپسند نیز اهمیت بسیار بالایی خواهد داشت.
Bootstrap قصد دارد که خلاء میان طراحی و کدنویسی را از میان برداشته و کدنویسان را ترغیب به استفاده از طراحی های پیش فرض و استاندارد نماید. به همین منظور دستورات CSS و توابع jQuery مورد نیاز را برای شما فراهم کرده است تا شما بتوانید با استفاده از دستورات پیش فرض و رعایت اصول متناسب با طراحی Bootstrap زمان راه اندازی یک پروژه را تا حد زیادی کاهش داده و خروجی آن را متناسب با استانداردهای روز دنیا پیش ببرید.
اگر طراحی سایت را به آشپزی تشبیه کنیم، دستورات php همانند مواد اولیه در پخت یک غذا بوده و وظیفه تامین مواد غذایی لازم را برعهده دارد، کدهای HTML همانند دستورالعمل پخت غذا است که خروجی مورد نظر شما را از مواد اولیه ایجاد میکند. دستورات CSS شباهت زیادی به نحوه کشیدن غذا در ظرف و نحوه ارائه آن در سفره دارد! خوشمزه ترین غذای دنیا نیز اگر در ظرف پلاستیکی و بصورت نامناسب سرو شود ممکن نیست که رضایت افراد را جلب کند ولی ارائه مناسب و زیبای یک غذای ساده میتواند اشتهای سخت گیرترین افراد را نیز برانگیزد.
Bootstrap به شما در نحوه ارائه غذا و بهبود نمایش صفحات وب بسیار کمک میکند، مهمتر از هرچیز دیگر سرعت بالای کار با آن است که زمان راه اندازی و اتمام یک پروژه را حتی تا ۸۰ درصد کاهش میدهد.
مشکل Bootstrap چیست؟
پروژه Bootstrap با هدفی مشخص و ایده ای ستودنی راه اندازی شده است و در این مسیر سومین نسخه خود را تجربه میکند. طراحان زیادی از استانداردهای آن بهره میبرند و افراد زیادی استفاده از Bootstrap در طراحی سایت شرکتی یا طراحی فروشگاه اینترنتی را یک مزیت مهم میدانند ولی مشکل اصلی زمانی ایجاد میشود که شما وابستگی زیادی به طراحی اولیه آن داشته باشید.
امروز شاهد سایت های زیادی هستیم که همگی ظاهر نسبتا یکسانی داشته و به راحتی میتوان ردپای Bootstrap را در آن دید. بعنوان مثال رنگ مشکلی هدر سایت، حاشیه های ۱ پیکسلی خاکستری و دکمه های آبی و قرمز با ظاهری مشخص نشان دهنده بکارگیری Bootstrap در یک سایت هستند، در حالیکه با کمی تغییر میتوان ظاهری جدید و متفاوت به هریک از این بخش ها داده و رنگ بندی های دلخواه خود را در آنها ایجاد نمود.
اگر روند استفاده از Bootstrap به همین شکل ادامه پیدا کند ممکن است در آینده تشخیص سایت های اینترنی از یکدیگر کمی دشوار شده و همگی دارای ظاهری یکسان و تکراری گردند. این مسئله به معنی مخالفت ما با این سیستم و امکانات آن نیست بلکه منظور آن است که بیایید تا این امکانات را در راستای بهبود فضای اینترنت بکار گرفته و خلاقیت خود را فراموش نکنیم.
بوت استرپ ۴ تحولی در ستون بندی صفحات
نسخه جدید بوت استرپ ۴ سال بعد از انتشار اولین نسخه آن معرفی شد. مهمترین تغییر در نسخه جدید را میتوان استفاده از Flex در ستون بندی ها دانست. در نسخه ۲ بوت استرپ سایز بندی ستون ها براساس پیکسل انجام میشد که در نسخه ۳ برای انعطاف پذیری بیشتر به درصد تغییر یافت. در نسل چهارم فریم ورک بوت استرپ نیز ستون بندی ها براساس درصد انجام میشود با این تفاوت که شما دیگر محدود به درصد هایی خاص نیستید.
استفاده از Flexbox در بوت استرپ ۴ موجب شده است که شما بتوانید المان ها و ستون هایی طراحی کنید که ابعاد آنها براساس سایر محتوای موجود در صفحه تعیین شود. به عنوان مثال اگر ۳ ستون در یک بخش باشد عرض هر کدام از آنها یک سوم فضا خواهد بود ولی اگر ۴ ستون باشد به صورت اتوماتیک فضایی معادل یک چهارم را اشغال خواهند کرد.
به عبارت دیگر هر المان در یک بخش میتواند سهمی مساوی از فضا را در اختیار بگیرد. البته قابلیت های flex به همین جا ختم نمیشود و شما میتوانید سهم هر المان از فضا را مشخص کرده و فضای باقی مانده را بین سایر المان ها تقسیم کنید. همین تغییر به ظاهر ساده موجب میشود که هنگام طراحی وب سایت آزادی عمل بیشتری داشته باشیم و نحوه نمایش نسخه موبایل را متناسب با سایز صفحه پیش بینی کنیم.
محتوای کامل در سایت منبع
استقبال طراحان وبسایت از فریم ورک Bootstrap طی چند سال اخیر موجب شده است که نام آن برای همه ی کسانی که در حوزه وب فعال هستند آشنا باشد. البته این همه گیر شدن به این معنی نیست که طراحی سایت با Bootstrap برای همه مناسب باشد. قبل از استفاده از بوت استرپ بهتر است معایب و مزایای آن را به خوبی بشناسیم.
برخی از سایت های شناخته شده و پربازدید در دنیا که از فریم ورک Bootstrap در طراحی سایت خود بهره میبرند عبارتند از؛ Paypal, Aliexpress, Shetterstock, Upwork, Netflix.
برای استفاده از بوت استرپ دلایل بیشماری میتوان یافت، برخی از آنها اهمیت بالایی دارند و برخی دیگر ممکن است در کار شما حایز اهمیت نباشند. در این بخش مهمترین دلایل انتخاب Bootstrap را بررسی میکنیم.
۱- ساختار جدول بندی ساده و طراحی ریسپانسیو
فریم ورک بوت استرپ براساس ساختار جدول بندی ۱۲ ستونه نوشته شده است و نحوه نمایش المان های مختلف در موبایل و تبلت به خوبی پیش بینی شده است. با این ساختار گرید بندی شما قادر هستید یک المان را در سایزهای مختلف مدیریت کنید. بعنوان مثال یک باکس محصول میتواند در دسکتاپ یک چهارم فضا را اشغال کند، در تبلت یک دوم و در موبایل تمام عرض صفحه را، حتی میتوانید به راحتی المان های گوناگون را در سایزهای متفاوت پنهان کنید.
ساختار ۱۲ ستونه و طراحی ریسپانسیو را میتوان مهمترین دلیل افراد برا طراحی سایت با Bootstrap دانست. قابلیتی که به تنهایی سرعت راه اندازی یک سایت جدید را تا ۳۰ درصد افزایش میدهد.
۲- پیش بینی المان های مختلف در طراحی سایت
قابلیت های بوت استرپ به ساختار جدول بندی ختم نمیشود و سایر المان های مهم در طراحی سایت نیز مورد توجه توسعه دهندگان Bootstrap بوده است. المان هایی که به راحتی قابل تغییر هستند و شما میتوانید آنها را با طراحی مورد نظر خود به کاربران ارائه دهید.
مهمترین المان های پیش بینی شده توسط این فریم ورک عبارتند از؛ منو، دکمه، منوی آبشاری، فرم ها، اخطارها و پیام ها، نوار پیشرفت و …
۳- افزونه های جاوا اسکریپت
علاوه بر المان های HTML و دستورات CSS پیش بینی های مورد نیاز برای افزونه های Javascript نیز در بوت استرپ انجام شده است. ابزارهایی ساده ولی کارآمد شامل اسلایدر، تب و آکاردئون به شما کمکم میکنند به سرعت المان های Interactive را به سایت خود اضافه کرده و به راحتی محتوای خود را در صفحه مدیریت کنید.
۴- آموزش های دقیق و منابع گسترده
با یک جستجوی ساده در سطح وب متوجه میشوید که آموزش های متنوعی برای آموزش طراحی سایت با Bootstrap تهیه و منتشر شده است. آموزش هایی که به شما کمک میکند جزئیات کار با این فریم ورک را به سرعت بیاموزید. همچنین منابع گسترده ای برای نمونه کدها و قالب های طراحی شده با Bootstrap در دسترس است که نقطه شروعی قابل اتکا برای وبمستران خواهد بود.
این جامعه گسترده و دسترسی به منابع بسیار حتی از امکانات هسته بوت استرپ با اهمیت تر است، زیرا عملا منابعی نامحدود با سلیقه های مختلف را در اختیار شما قرار میدهد.
چرا از Bootstrap در طراحی سایت استفاده نکنیم؟
در بخش قبلی نکات مثبت طراحی سایت با بوت استرپ را بررسی کردیم ولی همیشه هم این فریم ورک انتخاب مناسبی برای پروژه طراحی وب سایت شما نخواهد بود. همچون سایر فریم ورک ها میتوان نکات منفی هم برای آن در نظر گرفت که مهمترین آنها را در این بخش بررسی خواهیم کرد.
۱- بوت استرپ بهترین و بهینه ترین راه نیست
یکی از مهمترین ایرادات بوت استرپ آن است که المان های گوناگون آن همیشه براساس استانداردهای طراحی وب و بهینه سازی نیستند. در نتیجه شما مجبور میشوید از برخی المان ها چشم پوشی کنید یا تغییراتی اساسی در آنها ایجاد کنید.
یکی از مشکلات بوت استرپ استفاده از کلاس بندی های متعدد و بعضا بیش از اندازه است. بعنوان مثال ممکن است برای یک دکمه ساده در صفحه شما مجبور به استفاده از ۴ کلاس مختلف بشوید و همین امر نسبت متن به کد در صفحات شما را کاهش میدهد.
۲- کدهای Bootstrap برای یک طراحی سایت عمومی سنگین است
فریم ورک بوت استرپ در نقطه راه اندازی همراه با ۱۲۶ کیلوبایت css و ۲۹ کیلوبایت javascript خواهد بود. اگر شما از font-awesome نیز استفاده کنید این عدد خیلی بیشتر خواهد شد. این اعداد زمانی آزاردهنده است که بدانید بیشتر کدها برای المان ها و شرایطی نوشته شده است که ممکن است هرگز در پروژه شما استفاده نشوند.
به این اعداد باید کدنویسی های انجام شده برای طراحی های اختصاصی و تهیه خروجی متناسب با طرح اولیه را نیز اضافه کنیم. در نتیجه سایت شما نمایش درستی در موبایل و تبلت خواهد داشت ولی تعداد زیادی از کاربران به دلیل سرعت پایین ممکن است سایت شما را ترک کنند.
۳- Bootstrap خلاقیت را از شما میگیرد
طراحی سایت به دو بخش اصلی تقسیم میشود که عبارتند از طراحی و کدنویسی، برای ایجاد یک خروجی ایده آل باید هردو به خوبی کار خود را انجام داده و البته هماهنگ با یکدیگر باشند. زمانی که طراح شما محدود به طراحی سایت با Bootstrap باشد ناخودآگاه از خلاقیت خود می کاهد تا المان های سایت متناسب با امکانات این فریم ورک باشد.
بسیاری از وبمستران معتقدند که طراحی سایت با Bootstrap موجب شده سایت های بسیاری در اینترنت شبیه به یکدیگر و در نتیجه کسل کننده باشند. ایرادی که تا حد بسیار زیادی وارد است.
استفاده از بوت استرپ نباید موجب از بین رفتن خلاقیت شما شود، هدف استفاده از آن افزایش سرعت کدنویسی است ولی این موضوع نباید موجب تغییر در طراحی های شما شود.
از بوت استرپ استفاده کنیم یا نه؟
تمام مواردی که برای نکات مثبت و منفی طراحی سایت با Bootstrap ذکر کردیم ممکن است برای شما کم اهمیت یا پر اهمیت باشند. پیشنهاد ما آن است که قبل از بکارگیری، این ابزار را به خوبی بشناسیم.
اگر تازه کار هستید یا خیلی حرفه ای بوت استرپ بهترین انتخاب برای شماست!
- برای تازه کارها، بوت استرپ المان های HTML بسیاری را پیش بینی کرده و طراحی ریسپانسیو را بسیار ساده کرده است. به آنها کمک میکند سریع و قابل اعتماد باشند.
- برای حرفه ای هم برخورداری از یک فریم ورک محترم و شناخته شده میتواند نقطه قوت محسوب گردد. حرفه ای ها به راحتی نکات منفی طراحی وب با بوت استرپ را رفع میکنند و از ویژگی های مثبت آن بهره میبرند.
تجربیات خود از بوت استرپ، ویژگی ها و محدودیت های آنها را با ما در میان بگذارید. استفاده از این فریم ورک تاثیر مثبتی در کار شما داشته یا مشکلاتی پیش بینی نشده را فراهم آورده است؟
برای آپلود فایل روی سایت با استفاده از FileZilla (فایل زیلا) چیزی که من احتیاج دارم یک فضای میزبانی هاست هست، username و password ای رو میخوام وخود نرم افزارفایل زیلا رو بهش احتیاج دارم. من وب سایتی رو که برای این آموزش انتخاب کردم توی این (domain (best-test.ir هست.
همان طور که میبینید چیزی هم الان آپلود نیست روش
به cpanel دسترسی خواهیم داشت به صفحه login اش که من میتونم بیام login کنم داخل cpanel این وب سایت.
قطعا یک یوزر نیم و پسوردی رو باید داشته باشم که اون رو وارد میکنم. زمانی که login میکنم داخل فضای cpanel وارد میشیم
من میتونم بیام از اینجا و فایل منیجر کارهام رو انجام بدم و فایل هام رو آپلود بکنم (بدون استفاده از Filezilla)
اجازه بدید من یک نمونه قالب رو اینجا آپلود بکنم چون همونطور که دیدین من اطلاعاتی رو روی این وب سایت ندارم، سریع این کار رو انجام میدم و میام اون فایل زیپی که مورد نظر خودم هست رو آپلود میکنم.
زمانی که آپلود میشه نیاز هست که من این صفحه رو extract اش بکنم برگردم و از حالت زیپ این فایل هارو خارج بکنم.
توی آموزش کنترل پنل (cpanel) هم توضیح دادم دوستان، حتما حواستون باشه که Rar نباشه فایلی رو که دارید آپلود میکنید و حتما فایلتون زیپ باشه که روی سرور به راحتی قابلیت extract کردن وجود داشته باشه و بتونیم این کار رو روی سرور انجام بدیم.
حالا فایلمون آپلود شده بر میگردیم و داخل Home، داخل public_html این رو extract میکنیم
اشتباهی که اینجا وجود داره توی یک فولدر دیگه ای هستن من باید اینها رو باید move شون کنم داخل public_html
و الان بریم صفحه وب سایتمون رو ببینیم. یک وب سایت الان اینجا آپلود شده و اینجا قرار گرفته که من به طور مثال می خوام اینجا Edit رو انجام بدم
ببین دوست من، من هر بار نمیتونم بیام اینجا
و login بکنم داخل این cpanel ام از لحاظ امنیتی هم خیلی خوب نیست.
من اگر بخوام مثلا این فایل index رو تغییر بدم و حالا ما فعلا سراغ تایتل بریم صرفا، اینجا میتونم بیام و کلیک راست بکنم و مثلا code edit رو داشته باشم و edit بکنم
توی این فضا
و اون نرم افزاری که من میخوام نیست. به طور مثال من میخوام با brackets این کار رو انجام بدم، بهترین راه اینه که من وصل شم به سرور و از طریق اون سرور این کار رو انجام بدم
اجازه بدید من از cpanel خارج بشم. کار آپلودمون رو انجام دادیم، میایم سراغ نرم افزار FileZilla که این نرم افزار رو میتونید از P30download یا هر رفرنس دیگه ای که شما به صورت امن ازش نرم افزار دانلود میکنید استفاده بکنید.
حتما حواستون باشه که این ورژن باشه چون FileZilla ورژن سرور هم داره و نرم افزار FTP اش رو ما میخواهیم
ببینید دوستان FTP یعنی چی؟
اگر شما دنبال این نرم افزار هستید، cute ftp برای آپلود و دانلود سرعتش از FileZilla بیشتره اما برای Edit پیشنهادی که برای شما دارم FileZilla هستش. اجازه بدید من cute ftp رو هم به شما معرفی بکنم، این رو هم میتونید از اینجا دانلودش بکنید.
خب ما دانلود کردیم FileZilla رو و روی سیستممون نصبش کردیم. من اینجا فایل زیلا رو بازش میکنم و شما رو با فضاش آشنا میکنم
ببینید اینجا و توی این بخش من میتونم مدیریت بکنم هاست هایی رو که دارم و وب سایت هایی که دارم لازم نیست که هر بار بیام برم توی cpanel شون
از اینجا میتونم یه دونه سایت جدید تعریف بکنم
New Site رو که بزنم اینجا آدرس سایتم رو باید وارد بکنم به port هم فعلا کاری ندارم
آدرس سایت رو میزنیم best-test.ir
اینجا Logon Type رو میگذاریم روی Normal
username و password رو که داریم باید اینجا قرار بدیم. من اینجا یوزرنیم و پسوردم رو اینجا copy ،paste میکنم و connect رو میزنم
دقت کنید من Encryption رو فعلا روی FTP over tls قرار دادم. Connoct رو میزنم، اگر دیدید که کانکشنتون برقرارنشد دوباره برمیگردین توی این تنظیم ها و Encryption رو میگذاریم روی only use plain FTP و connoct رو میزنیم
ما توی هر دو حالتش تونستیم به سرور وصل بشیم. میبینید که فایل های سرورم اینجا قرار گرفته همشون، حتی اون فایل زیپ هم که من آپلودش کردم اینجا قرار گرفت
من میخوام index رو Edit کنم برای اینکه من کنترل بکنم که این با چه نرم افزاریه. اصلا هدفمون اینه که بیایم توی نرم افزاری که مد نظرمون هست این رو Edit بکنیم. برای اینکه کنترل بکنم باید بیام توی Edit و setting
توی این قسمت Filetype و اینجا با این فرمت htm میزنم html ‘داخل’ میام آدرس فایل exe رو قرار میدم. میام و از توی program files ام میام سراغ Brackets میگردم یا حالا هر نرم افزار دیگه ای که شما مد نظرتون هست.
این آدرس من میشه
میایم اینجا و این رو مینویسیم یک بک اسلش میگذاریم و اسم فایل exe ام رو باید اینجا بنویسم و ok رو میزنیم
من کلیک راست که میکنم یک گزینه View/Edit دارم
وقتی این رو باز میکنم خودش میاره توی اون نرم افزاری که من ست کردم. کارم رو انجام میدم اینجا مثلا میزنم Title new web. Save اش که میکنم ،ببینید توی FileZilla به من میگه میخوای توی سرورت هم آپلود بشه و Edit بشه؟میگم بله و اگر بیام عنوان صفحه رو رفرش بکنم new web title رو میبینم.
هر تغییر دیگه ای هم اینجا انجام بدم میتونم ببینمش.به طور مثال من inspect میکنم اینجا
و اینجا به این نتیجه میرسم که توی خط bootstrap.css:3050 ام float:left برای li هام
من اینجا آدرسش رو هم میتونم داشته باشم
خب خیلی راحت میایم اینجا میگیم css ،bootstrap.css ،view/edit میکنم.
من css هم رو باید این کار رو براش انجام بدم دیگه. میایم توی Edit و دوباره filetype یه دونه دیگه ام از این کپی میکنم خط بعد و میگیم css دوباره با همین نرم افزار این اتفاق واسش بیفته
View/Edit اش میکنم
بیاره توی brackets، توی براوزرم بیام لاین ۳۰۵۰ برمیگردیم توی brackets کنترل g 3050 میگه float:left هست.
دقت بکنید صفحه اصلی الان سمت چپه چون این وب سایت انگلیسی بوده و یکسری ازcss هاش تغییر نکرده
میایم و اینجا ۳۰۵۰، float رو right می کنیم. حالا ممکنه یکسری چیزها به هم بریزه چون برای فارسی سازی باید یه مقدار کارهای دیگه ام انجام بدیم
من Edit میکنم، f5 رو هم میزنم هیچ اتفاقی نمی افته چرا؟ چون من اینجا رو FileZilla رو save نکردم
و دوباره میام از ctrl و f5 استفاده میکنم و میبینم که این صفحه اصلی جاش عوض میشه و میبینیم که ترتیب ها تغییر میکنند.
به همین راحتی من میتونم دسترسی داشته باشم به فایل های مختلفی که روی سرورم قرار داره و Editهای مورد نظرم رو انجام بدم و بتونم فایل رو آپلود و دانلود کنم. به همین ترتیب شما میتونید از اینجا چندین و چند تا وب سایت داشته باشید.
اینجا هم میتونیم اسمش رو تغییر بدیم که بدونیم وقتی وب سایت هامون زیاد میشن به راحتی داشته باشیمشون.
ادامه مقاله در سایت منبع
فیچر هایی که اگه خودمون بخواهیم بسازیمشون و کدش رو صفر تا صد بزنیم ممکنه زمان زیادی رو از ما بگیره و یا ساختنشون برای ما سخت باشه. یک توضیح کوتاهم درباره ی فریم ورک بگم ،کلا فریم ورک های این چنینی دارای یک سری کلاس و توابعی هستند که از پیش تعریف شدند .ما فقط میایم ازین کلاس ها و توابع در کدمون در جایی که لازم باشه استفاده میکنیم .مثلا برای ساخت منوی Drop-Down دیگه لازم نیست اون همه کد رو در فایل css مون بنویسیم و فقط کافیه از کلاس مربوط به اون فریم ورک در کد html مون استفاده کنیم.
بوت استرپ تنها فریم ورکی نیست که ما داریم. فریم ورک های مختلفی مثل Foundation ،montage ،less ،w3 ،pure و کلا فریم ورک زیاد داریم در این زمینه ولی بوت استرپ محبوب ترینشون هست توی این کار و در بازار ایران هم جایگاه خوبی داره.
بوت استرپ چیه؟
یکی دیگر از ویژگی های بوت استرپ، ویژگی ریسپانسیو بودنشه که از یک سیستم ۱۲ ستون برای این کار استفاده میکنه و با توجه به سایز دستگاهمون تنظیم میشه و کارهای ریسپانسیو رو برای ما خیلی راحت کرده.
متد mobile first یعنی اینکه بیایم طراحی سایتمون رو از سایز موبایل شروع کنیم و بعد میریم سراغ سایز های بزرگتر.
طبق این تصویر میبینید که توی ریسپانسیو طراحی سایت از سایز بزرگ شروع میشه مثل لپ تاپ و این چیزها و بعد میریم سراغ سایز های کوچیک مثل تبلت و موبایل.ولی درمتد یا طراحی mobile first میایم طراحی مون رو از موبایل و سایز کوچیک شروع میکنیم و محتویات رو به صورت linear یا خط به خط قرار میدیم و بعد میریم سراغ سایز های بزرگتر.
فریمورک بوت استرپ موبایل فرندلی است!
و اینکه بوت استرپ موبایل فرندلی است و میدونه سایتی رو که ما میخواهیم طراحی کنیم با بوت استرپ موبایل فرندلی هستش و کار ما رو راحت کرده در این زمینه و اینکه حتما به باگ هایی بر خوردید توی طراحی سایتتون که مثلا یک چیزی رو میسازید در کروم یا فایرفاکس به درستی کار میکنه ولی مثلا میاید تو اپرا میبینید اصلا کار نمیکنه ولی بوت استرپ توی دستگاه های مختلفی روی سایت ها و مرورگر های مختلفی تست شده و شما دغدغه این کار رو ندارید و زمان زیادی رو برای شما صرفه جویی میکنه .و همون طور که میدونید بوت استرپ از html ،cssو javascript برای طراحی button ها یا مثلا تب ها ستون ها ،فرم ها یا سایر المان هایی که داریم توی طراحی وب استفاده میکنه و در ورژن های less و sass هم قابل دسترسی هست و کاملا هم قابل کاستومایز کردن هستش و میتونید فقط از بخش هایی که مورد نیاز و سلیقه ما هست استفاده کنید.
اصلا بوت استرپ رو کجاها باید استفاده بکنیم
بوت استرپ خیلی برای پروژه های کوچیک مناسبه پروژه هایی که به فیچر های زیادی احتیاج دارن مثل Drop-Down ،nav bar،carosel ولی خودمون نمیخوایم این ها رو بسازیم .بوت استرپ میاد ۸۰ درصد این فیچر ها رو برای ما فراهم میکنه و بسیار مناسب هست برای این کار .
برای کسانی که کارشون functionality سایت هست و نمیخوان وقتشون رو صرف طراحی سایت بکنند،چون که طراحی سایتشون در رابطه دیزاینر تیمشونه فقط میخوان تمرکز کنن روی functionality تیم خب باید یک پیکر بندی و یک اسکلت بندی از سایتشون داشته باشند. برای این افراد هم بسیار مناسبه بوت استرپ و همون طور که گفتیم برای پروژه های کوچیک مناسبه ولی دلیل نمیشه که برای پروژه های بزرگ نتونیم از بوت استرپ استفاده بکنیم.
چون که ما هر سایتی که میسازیم مسلمه یه چند تا فیچر مشترک داره مثلا مثل carosel ،Drop-Down،اینها مشترک هستند در بیشتر پروژه های ما و ما میتونیم دیگه صفر تا صد کدشون رو نزنیم و از بوت استرپ استفاده کنیم.
ما میتونیم به دو شیوه بوت استرپ رو نصب کنیم یکی به صورت بیسیک هستش که خودش دو نوع داره استفاده از CDN Bootstrap هستش که CDN مخفف Content Delivery Network هستش و به این معناست که یک سری لایبرری ها مثل همین بوت استرپ میانhost میشن و ما با استفاده از یک لینک به اونها دسترسی پیدا میکنیم و یک ویژگی خوبی که CDN ها دارند اینه که مثلا من میام از یک سایتی که از CDN مربوط به بوت استرپ استفاده کرده الان ویزیت میکنم و بعدش میرم توی یک سایت دیگه اون هم از CDN بوت استرپ استفاده کرده ولی در سایت دوم مرورگر من دیگه فایل رو request نمی کنه و میاد از همون نسخه cache شده اون لایبرری استفاده میکنه و سایت رو لود میکنه و باعث میشه سایت در زمان سریعتری لود بشه و بسیار خوبه و میتونیم فایل ها رو به صورت دستی دانلود کنیم و در پروژه مربوط به کارمون بیاریم.
به صورت Advance هم برای کاربر های حرفه ای هستش میتونن از Less و Sass استفاده کنند.
ادامه مطلب
طراحی اولیه وب سایت شما
طراحی وبسایت شما بسته به اینکه چه هدفی را از ایجاد یک سایت دنبال می کنید می تواند متفاوت باشد، اما به هر حال شما باید یک سری اصول اولیه را برای طراحی وب سایت های خودتان در نظر بگیرید. من این اصول را در اینجا به صورت لیست وار آورده ام اما ترجیح می دهم هر کدام از آن ها را در مقاله های جداگانه آموزش طراحی سایت به صورت مفصل تری توضیح دهم:
وبسایت های خودتان را خلاقانه ایجاد کنید.
تئوری رنگ ها را در طراحی وب سایت یاد بگیرد.
جهات عمودی را در طراحی لحاظ کنید.
مطمئن شوید که کاربران شما را دنبال می کنند، پس یک داستان بگویید.
نظریه ژستالت را بشناسید و آن را در طرح های خودتان لحاظ کنید.
طراحی z را در درک کنید و آن را در وب سایت خودتان به کار ببرید.
قاب بندی و چگونگی استفاده از آن در طراحی را یاد بگیرید.
کدنویسی اولین وب سایت شما
وقتی شما اصول اولیه کدنویسی با HTML و CSS را فرا گرفتید، کم کم می توانید از طراحی صفحات ساکن به سمت طراحی صفحات زنده مهاجرت کنید. صفحاتی که روح دارند و نفس می کشند. توصیه می کنم مقاله زیر را مطالعه کنید تا با یک مثال عملی، چنین رویکردی برای شما روشن تر شود
ابزارهای حرفه ای برای طراحی وب سایت
شما احتمالا برای شروع یادگیری طراحی وب سایت و کدنویسی، می توانید از ویرایشگرهای متن ساده استفاده کنید، اما اگر بخواهید این کار را به صورت جدی تری انجام دهید، قطعا نیاز به ابزارهای حرفه ای تری خواهید داشت. من در اینجا چند نمونه از معروف ترین و محبو ب ترین این ابزارها را به شما معرفی می کنم:
Photoshop
بدون شک فتوشاپ یکی از کلیدی ترین ابزارهای طراحی وب در سالیان اخیر بوده است. مسلما این مقاله گنچایش آموزش فتوشاپ را ندارد اما اگر بخواهید کمی بیشتر با این ابزار آشنا شوید، توصیه می کنم، نگاهی به مقالات زیر داشته باشید
توشاپ برای طراحان وب
طراحی صفحه soon coming با فتوشاپ
Emmet
ایمت یک ابزار فوق العاده برای کدنویسی است، به طوریکه وقتی با آن آشنا شوید و به استفاده کردن از آن عادت کنید، از این که چطور قبل از آن کد میزدید، تعجب خواهید کرد. مقاله زیر را در مورد کاربر ایمت در ایجاد یک سایت بوت استرپی مطالعه کنید:
چگونه با ایمت در چند دقیقه بوت استرپ بسازید؟
Reflow
اگر می خواهید یک وب سایت واکنش گرا داشته باشید، هرگز استفاده از نرم افزار ریفلو را فراموش نکنید. این ابزار به شما کمک می کند تا طرح بندی مناسب را برای سایتتان ایجاد کنید به نحوی که روی تمام سیستم های هوشمند اعم از کامپیوترهای شخصی تا گوشی های موبایل، سایت شما به بهترین شکل مشاهده شود. برای آشنایی بیشتر با این ابزار می توانید مقاله زیر را دنبال کنید:
مقدمه ای بر طراحی قالب واکنش گرا با Edge Reflow
ابزارهای تولید قاب
تعداد زیادی نرم افزار برای قاب بندی وب سایت وجود دارد. شما با یک جستجوی ساده در اینترنت می تواند تعداد زیادی از آن ها را بیابید. برای این منظور کافیست تا عبارت ‘ tools wireframing ‘ را گوگل کنید.
طراحی وب سایت واکنش گرا
شاید تا یک دهه قبل، تگ جدول همه آنچه را که برای طراحی یک وب سایت نیاز بود در اختیار طراحان قرار می داد. اما با ظهور گوشی های هوشمند، لزوم طراحی سایت با قالب های واکنش گرا بیشتر احساس شد، جرات می توانم ادعا کنم امروزه هیچ طراح عاقلی از جدول های HTML برای طراحی سایت استفاده نمی کند.
مقالات زیر رهنمودهایی را به شما ارائه می دهند که دیدگاه بهتری نسبت به طراحی واکنش گرا پیدا کنید. توصیه می کنم از مطالعه آن ها غافل نشوید:
طراحی وب با رویکرد واکنش گرایی
اصول طراحی شبکه ای برای ایجاد قالب های واکنش گرا
یک مثال عملی از طراحی ساده و واکنش گرا
استفاده از سیستم های مدیریت محتوا
امروزه تقریبا بیشتر طراحان وب قبول کرده اند که باید برای طراحی یک وب سایت کارامد از سیستم های مدیریت محتوا استفاده کنند. با جستجوی عبارت ‘ cms for web designers’ می توانید لیستی از نرم افزارهای مدیریت محتوا را پیدا کنید. شاید بتوان گفت از این میان، سه نرم افزار وردپرس، جوملا و دروپال ، از محبوبیت بیشتری برخوردارند که آموزش وردپرس بین علاقه مندان به شدت محبوب است.
و در ادامه…
اگر مطالب بالا را دنبال کرده باشید احتمالا تا الان به درک مناسبی از طراحی وب سایت رسیده باشید، اما هنوز نیاز به یک سری مطالب تکمیلی دارید تا بتوانید طراحی کامل تری را انجام دهید. من در اینجا فقط لغات کلیدی این مطالب را عنوان می کنم، مسلما هر کدام از این اسامی می تواند موضوع مقالات جداگانه ای باشند. لغاتی مثل: Bootstrap، Foundation، Pure، Jeet، سئو،Typography، UX و…
شاید با دیدن تعداد زیاد این لغات کمی نگران شده باشید اما این قول را به شما می دهم که اگر مطالب این سایت را دنبال کنید، تا چند وقت دیگر همه این اسامی را مثل اسامی فرزندان خودتان دوست خواهید داشت. چرا که نه!
محتوای کامل در سایت منبع