بسوی دانمارک   -  برنامه نویس وب

بدلایلی که اصلا نمیخوام الان توضیح بدم الان دارم زبان MQL 4 رو یاد میگیرم. اینجا باز سابلایم بدردم خورد. با همون روش نصب پکیج جلو رفتم و در قسمت جستجویی که اومد metaquotes رو که زدم دو پکیج اومدن که هر دو رو نصب کردم. بعدش با تغییر plain text به MQl و نوشتن expertstart  و بعد هم tab ، تمپلیت مورد نظر من ظاهر شد. سپاسگذارم از سابلایم.

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

افزونه یا extension بسیار ضروری livereload رو هم نصب کنین روش. برنامه هم که نصب باشه رو سیستمتون میتونین بصورت زنده تغییرات سایتتون رو مشاهده کنین. من و این همه خوشبختی ....

الان میتونم با جرات بگم که تفریبا این قسمت کار ما فونداسیونش تکمیل شده و باقیش خوندن مستندات Bootstrap هست و یه سری کپی پیست و سلیقه. نوع Buttonها و منوها و کاروسل(همون چرخ فلک) و تول تیپ ها همه و همه بسیار ساده هستن و داکیومنتیشن کاملا گویا و ساده اس. 

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

بزودی باید بریم سمت یادگیری الگو یا pattern معروف MVC  که عبارت است از مدل و ویو و کنترلر. اینی که ما فعلا کار میکنیم ویو هستش. بعد میمونه مدل که میشه دیتابیس که با MySql میریم به سمتش و کنترلر که بعدا بهش میرسیم باز.

توصیه ام اینه که تا این مرحله یه وبسایت خاص خودتون رو طراحی کنین و کلی عکس و غیره اماده کنین و در واقع روی کاغذ یه تصور از وبسایتی که میخواین داشته باشین رو بریزین. البته که ابزارهای خوبی هم برای این کار وجود داره از جمله MindNode Pro که روی مک کار میکنه و نمیدونم روی سیستم عامل های دیگه هست یا نه. و بعدش هم Balsamiq Mockup. اولی برای اینه که تصویری کلی از سایتتون و اسم صفحات و مسیر Navigation اونا داشته باشین. و دومی هم بجهت ساختن prototype که البته در ایران با توجه به مجانی بودن نرم افزارا خیلیا ترجیح میدن از Adobe Fireworks استفاده کنن. به هر حال اون دو ابزاری که اول گفتم بسیار مفیدن برای طرح ریزی نقشه یک سایت قبل از نوشتن حتی یک خط کد. 

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

اگه وبسایت شما از یه مرحله ای پیچیدگیش بیشتر بشه اونوقت تعداد خطوط کد نوشته شده بشدت زیاد میشه و خوب قاعدتا غیر خوانا میشه. بهترین راه اینه که بریم به سمت ماژوله کردن که با استفاده از php میتونیم این کار رو بکنیم. بعنوان مثال برای header یک فایل جداگانه php داخل فولدر components/php/_ ایجاد میکنیم به اسم header.php و در فایل index.php این فایل را include میکنیم.

و از این ببعد همه کارهای header را داخل همین فایل انجام میدهیم و index بشدت خلوت میشه و خوانا.

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

مهمتر از همه چیز اینه که حالا تو این basic template ای که گرفتیم و توی فایل index.php کپی کردیم میخواهیم با استفاده از فریمورک این ستون ها رو ایجاد کنیم. برای اینکه شیوه نامه ها راحت به این فایل دسترسی داشته باشند در قسمت تگ body  یک id=home میذاریم.سپس به راحتی از دو تگ section  و div بصورت متناوب استفاده میکنیم. دقت کنید در آخر هر تگ در داخل کامنت اسم id آن را میاوریم تا به خوانایی کدهایمان اضافه شود.

ساختاری که تا این لحظه ساختیم بسیار منظم و مرتب است و میتونیم از این به بعد هر وبسایت جدیدی که خواستیم بسازیم از این نقطه به بعد شروع به کار کنیم. اینجاست که استفاده از git بعنوان یه برنامه version control حیاتی میشه. از آنجایی که ما Heroku را نصب کردیم لذا یک نسخه از گیت را هم در کامپیوترمان تا این لحظه نصب کردیم . حال با مراجعه به سایت bootstrap  و بخش getting started میتوانیم تمپلیت html موحود را بگیریم و در index.php خود بعنوان نقطه آغاز پیست کنیم.

 حالا میتونیم ترمینال رو باز کنیم و داخل فولدر پروژه بریم. بعد ls -la بزنیم تا ببینیم که git. هم هست و این به معنای این است که git فولدر ما رو تحت کنترل خودش داره. حالا کافیه بنویسیم . git add و بعدش commit که قبلا بش اشاره شد رو اجرا کنیم. حالا میتونیم یک کپی از هر چیزی رو برای نقطه آغاز تمام پروژه های بعدیمون بگیریم.

git branch نشون میده که ما فقط یک شاخه داریم که ستاره جلوش هم نشون میده اکتیو هستش و برای ایجاد یک شاخه جدید مثلا میتونیم بنویسیم git branch bootstrap3template و بعدش با git checkout bootstrap3template  اونو فعال کنیم. و بعد با دستور  get push heroku master این فایل های شاخه master به اپلیکیشن در heroku منتقل میشه. 

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

تلاش بر این خواهد بود که مرورگر کمترین میزان مراجعه برای بارگذاری اسکریپت ها و  شیوه نامه های ما داشته باشد. ابزارهایی وجود دارند که تمامی اسکریپت  ها و شیوه نامه های شما را در یک فایل ادغام میکنند تا مرورگر تنها یکبار و یک فایل را لود کند. در مک نرم افزار CodeKit این کار را انجام میدهد که پولی هم هست ولی نسخه کرکش هم موجوده و خودتون باید پیدا کنید و برای سیستم عامل های دیگر هم باید دنبال ابزاری مشابه باشید مثل ؛

اول 

دوم 

سوم

با اجرای کدکیت و انداختن فولدر اصلی پروژه در آن شما دوکار باید انجام دهید که اندکی با هم تفاوت دارند؛

۱- ادغام شیوه نامه ها که با رحوغ به Tab شیوه نامه ها میبینید که Bootstrap.less فعال است و بقیه خاکستری و غیر فعال که دلیلش این است که همه آن فایل ها در این یک فایل ایمپورت شده اند.  با کلیک روی این فایل کنترل آن را برای خروجی در دست خواهید گرفت. در سمت راست استایل خروجی را به Compressed  تغییر دهید و باکلیک راست روی خود فایل مسیر خروجی آن را به CSS/_ تغییر دهید. و سپس گزینه کامپایل را فشار دهید و اکنون میتوانید با مراجعه به سابلایم ببینید که فایل bootstrap.css در مسیر مورد نظر ایجاد شده است. برای شیوه نامه های خودمان نیز در داخل سابلایم و داخل فولدر less یک فایل باسم mystyles.less_ ایجا میکنیم و سپس با مراجعه به کدکیت و زدن refresh آن را مشاهده میکنیم که با کلیک روی آن در سمت راست تیک Do Not compile directly را بر میداریم و سپس با کلیک راست روی آن مسیر خروجیش را به جایی تغییر میدهیم که قبلا bootstrap.css را آنجا گذاشتیم و از اول اسمش _    را نیز برمیداریم.

 چنانچه در پروژه مان نخواهیم از بعضی از قابلیت های bootstrap استفاده کنیم راهش این است که به bootstrap.less مراجعه کنیم و دستور import راجع به آن را غیرفعال کنیم. 

۲- در مورد جاوا اسکریپت ها بدلیل نبود Import قضیه متفاوت است و تمام فایل ها فعال هستند. بدلیل وابستگی این اسکریپت ها به همدیگر ترتیب استفاده از همه آنها بسیار مهم است که در اینجا این ترتیب ذکر میشود.

// @codekit-prepend "jquery.js"

// @codekit-prepend "affix.js"

// @codekit-prepend "transition.js"

// @codekit-prepend "tooltip.js"

// @codekit-prepend "alert.js"

// @codekit-prepend "button.js"

// @codekit-prepend "carousel.js"

// @codekit-prepend "collapse.js"

// @codekit-prepend "dropdown.js"

// @codekit-prepend "modal.js"

// @codekit-prepend "popover.js"

// @codekit-prepend "scrollspy.js"

// @codekit-prepend "tab.js"

با ایجاد یک فایل جدید به اسم bootstrap.js_در داخل پوشه js مربوط به components   کدهای بالا را در آن کپی میکنیم. یک فایل دیگر به اسم myscrip.js_ در همین مسیر ایجاد میکنیم و سپس با مراجعه به کدکیت و زدن refresh و با برداشتن تیک برای آنها ، اجازه کامپایل مستقیم را به آنها میدهیم. و مسیر خروجی آنها را به فولدر js داخل _ تغییر میدهیم و اسمهای آنها را به myscript و bootstrap تغییر میدهیم. در قسمت Check syntax withگزینه nothing را برای هر دو انتخاب میکنیم و سپس concatenate + minify  را انتخاب میکنیم و سپس کامپایل .

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

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

سرویس Heroku در عوض بسیار ساده و سهل الوصوله. به سایتش مراجعه کنین و ایمیلتون رو بدین بعدش یه ایمیل تاییدیه میاد و با کلیک روی اون باید پسوردتون رو انتخاب کنین. حالا لازمه که Heroku Toolbelt که لینکش تو صفحه میاد رو برای سیستم عاملتون نصب کنین که اینجا فرض من اینه که شما لینوکس یا مک  استفاده میکنین. بعد از نصب اون یک ترمینال باز کنین و بنویسین Heroku login که لازمه بعنوان یوزرنیم ایمیلتون رو بدین و بعد هم پسورد و بعد پیغام میده که Authentication Successful.

شما در واقع الان به سرور Heroku خودتون متصل هستین .

سابلایم رو در ویندوز هم تست کردم مشکل نداره. نسخه ۳ رو گرفتم (نیاز به فیلتر شکن هست وگرنه میگه File Not Found) بعدش نصب که کردم ابتدا Package control  رو از این ادرس گرفتم و اون رو در show console پیست کردم. نصب که شد با ctrl+shift+p زدن و سپس install package رسیدم جایی که package ‌ها رو نشون میداد. اونجا Zen رو نوشتم و اولین پکیجی که اومد رو انتخاب کردم و بعد از اون Emmet ‌رو هم یک بار دیگه از این مسیر نصب کردم و سابلایم را ریستارت کردم.

حالا شما کافیه یک فایل با پسوند html  ایجاد کنید و به قدرت این ادیتور پی ببرید. مثلا بنویسید html>head+body و سپس tab  را فشار دهید. یا .myclass>h1 و سپس tab.

خوش باشید