نوشته های آکادمی دت لرن

کامپایل کردن sass در VS Code

آکادمی دت لرن — Wed, 11 Dec 2019 20:33:07 +0330

برای اینکه ما بتوانیم در VS Code از sass استفاده کنیم و همچنین فایل sass رو به css کامپایل کنیم کافی هست از یک افزونه در VS Code به نام Live Sass Compiler استفاده کنیم در ادامه با من همراه باشید تا به راحتی مراحل کامپایل کردن sass/scss با استفاده از افزونه Live Sass Compiler رو قدم به قدم آموزش بدم. https://www.aparat.com/v/OW25L لینک این ویدیو در سایت دت لرن » نحوه استفاده و پیکر بندی sass در VSCodeبرای کامپایل کردن sass / scss روش های مختلفی وجود داره اما اگه با ویرایشگر VS Code کار میکنم این روش یعنی استفاده از افزونه Live Sass Compiler بهینه تر خواهد بود.لینک » ویدیو روش های کامپایل کردن sassافزونه Live Sass Compilerافزونه Live Sass Compiler یک افزونه برای VS Code است که وظیفه آن کامپایل کردن فایل های sass / scss به فایل css می باشد در این آموزش به چگونگی کامپایل کردن sass به css و همچنین استفاده کردن از فایل کامپایل شده ازsass در یک سند html می پردازیم.قدم اول : دانلود VS Codeدر قدم اول شما بایستی VS Code را دانلود نمایید اگر که ویرایشگر VS Code رو سیستم شما نصب نیست .قدم دوم : اجرا کردن VS Code و نصب افزونه Live Sass Compilerبعد از دانلود و نصب VS Code این نرم افزار را اجرا کنید و به تب افزونه ها طبق شکل زیر بروید.در کادر جستجو عبارت Live Sass Compiler یا live sass را وارد نمایید :و روی گزینه install کلیک نمایید تا این افزونه برای شما نصب شود.تا به اینجای کار ما مراحل نصب رو انجام دادیم بریم ببینیم به چه صورت میتونیم حالا از این افزونه برای کامپایل کردن sass به css استفاده کنیم.قدم سوم : کامپایل کردن sass/scssیک پوشه به نام test ایجاد نمایید و داخل این پوشه یک سند وب به نام index.html بسازید و همچنین یک پوشه به نام app که داخلش یک فایل sass به نام app.scss ایجاد کنید.بعد از ایجاد پوشه ها و فایل های مورد نظر داخل فایل app.scss یک استایل تست برای تگ body بنویسید مثل تصویر زیر :حالا به راحتی بعد از استایل دادن تست به تگ body ، در گوشه پایین سمت راست روی watch sass کلیک نمایید تا فایل شما به app.css کامپایل شود :بعد از کلیک روی watch sass شما مشاهده خواهید کرد که فایل scss به css کامپایل شد و کافی است فایل app.css برای استفاده از فایل کامپایل شده scss آن را در سند html خود قرار دهیم همانند تصویر زیر :و در نهایت خروجی سند html که فایل css آن کامپایل شده فایل scss است رو در مرورگر مشاهده میکنیم :تا اینجا ما تونستیم استایل هامونو از طریق scss بنویسیم و کامپایل کنیم فایل scss رو به css .قدم چهارم : تغییر مسیر فایل های کامپایل شده یا خروجی stylesheet هاشاید این سوال به ذهنتون برسه که چطور میتونم مسیر خروجی فایل های کامپایل شده به css روتغییر بدم مثلا یک پوشه در نظر بگیرم با نام css و فایل هایی که کامپایل میشه رو در این مسیر قرار بدیم .برای این کار باید در VS Code به مسیر زیر :file -> preferences -> settingبروید ، بعد از اینکه وارد پنجره settings شدید کافی هست به ترتیب تب extensions رو باز کنید و روی Live Sass Compiler کلیک کنید و در نهایت روی گزینه Edit in settings.json کلیک نماید طبق شکل زیر:و در پنجره باز شده کافی است یک کد json قرار دهیم که جلوتر این کد رو توضیح خواهم داد :سورس کد json مربوط به live sass :"liveSassCompile.settings.formats": [ // This is Default. // { // "format": "expanded", // "extensionName": ".css", // "savePath": "~/../css/" // }, //Or you can compress your css { "format": "compressed", "extensionName": ".min.css", "savePath": "~/../css/" } ],بعد از ذخیره کرده فایل Settings.json وارد پوشه app میشویم و فایل های app.css.map و app.css را حذف میکنیم .و وارد فایل app.scss میشویم و اگر مجدد روی watch sass کلیک نماییم خواهیم دید که یک پوشه به نام css ایجاد شده و فایل کامپایل شده app.scss در آن قرار گرفته طبق شکل زیر :و مسیری که از این به بعد در سند html برای استفاده از فایل css کامپایل شده خواهیم داشت میشود:css/app.min.cssو حالا میتونید از فایل کامپایل scss در پوشه css استفاده کنیم .توضیح کدهای json که در setting.json استفاده شدبه تصویر زیر که شامل کد های json مربوط به افزونه live sass هست مشاهده بفرمایید :در این کد json ما یک آرایه داریم که داخلش دو آبجکت قرار دارد که هر یک از این آبجکتها شامل ۳ عنصر هستن به نام های زیر که هر یک را بصورت کامل شرح میدهیم :عنصر fotmat = فرمت فایل هایی که ذخیره میشود بصورت فشرده (compressed) باشد یا در حالت توسعه (expanded)عنصر extensionName = اگر format فایل بصورت فشره باشد باید مقدار این key به صورت “min.css” نوشته شود و اگر هم در حال توسعه باشد format باید “css” نوشته شود.عنصر savePath = مسیر خروجی فایل های کامپایل شده و نام پوشه خروجی فایل های stylesheet یا cssبلاک ۱ : بصورت پیش فرض اگر کد آبجکت ۱ که در تصویر بالا مشاهده میکنید را قرار دهیم میسر خروجی فایل های کامپایل شده ما در مسیر css و با فرمت .css کامپایل میشود .بلاک ۲ : اگر کد آبجکت ۲ که در تصویر بالا مشاهده میکنید را قرار دهیم میسر خروجی فایل های کامپایل شده ما در مسیر css و با فرمت min.css . کامپایل میشود .منابع : medium.com و hoshcoding.comلینک این مقاله در دت لرن : http://datlearn.ir/compiling-sass-in-vs-code/

۳ اشتباهی که در هنگام برنامه نویسی متوجه آن نیستید!

آکادمی دت لرن — Sat, 16 Nov 2019 19:33:12 +0330

شاید گاهی اوقات باورهایی رو در ضمیر ناخودآگاهتون پرورش بدید که در آینده شما رو در ادامه مسیر دلسرد کنه و شاید اصلن نتونید به هدف هاتون در زمینه برنامه نویسی برسید ، در این مقاله قصد دارم چند باور اشتباه رو که شاید ، متوجه این باورهای اشتباه نشده باشید صحبت کنم .۱- مشکلات برنامه نویسی فقط برای من زیاد پیش میادشاید در هنگام انجام یک پروژه با باگ های مختلفی رو به رو شده باشید و فکر کنید این باگ ها فقط برای شما پیش میاد و شاید هیچ برنامه نویسی این مشکلات رو نداشته باشه . این باور اشتباهی است چرا که اگر کسی در زمینه برنامه نویسی یا هر مهارتی موفق شده.قطعا یک سری چالش ها و مشکلات رو حل کرده و بدون شک بدون مشکل کسی حرفه ای نشده .راه کارما باید توانایی حل مشکلات رو در خودمون پرورش بدیم ، و این مورد در برنامه نویسی باگ هست و به جای اینکه بگیم این باگ ها فقط برای من پیش میاد به دنبال راه کار حل مشکلات باشیم.نکته جالب اینکه بهترین برنامه نویسان در در مورد حل مشکلات مهارت بالایی دارند .۲ – عجله در یادگیری فریم ورکخیلی از افراد رو میشناسم که عجله دارن با فریم ورک ها کار کنن در صورتی که اگر هدف شما توسعه مهارتتون هست قبل از اینکه به سمت فریم ورک ها برید پایتونو قوی کنید قاعده فریم ورک ها توسعه سریع هست ، در صورتی که ما اگر قصد ورود به یادگیری یک فریم ورک رو داشته باشیم. باید به زبان اصلی فریم ورک تقریبا مسلط شوم و انوقت هست که میتونیم ادعا کنیم حرفه ای شدیم در یک یا چند زبان برنامه نویسی.راه کارپس اصلن عجله نکنید و با یک برنامه ریزی منظم میتونید با درک عمیق فریم ورکی رو شروع به یادگیریش کنید که در این صورت سرعت یادگیری شما به مراتب افزایش پیدا خواهد کرد.۳ – کامل گراییجمله زیر براتون آشنا نیست ؟یا کاری را انجام نمیدهم یا اگر قصد کردم آن را انجام دهم به بهترین نحو ممکن آن را انجام می دهم.اما میخوام بطورمختصر این مسئله خیلی مهم رو شرح بدم !!!کامل گرایی یعنی ما برای انجام یک کار، استانداردهایی را برای خودمان، تیم مان، خانواده مان، شرکتمان و… تعیین کنیم که دستیابی به آن استاندارها و یا رعایت آنها بسیار هزینه بردار، زمانبر و یا آزاردهنده است.برای مثال فرض کنید قصد دارید یک سایت طراحی کنید و در آن مقالات خود را منتشر کنید. فردی که درگیر کامل گرایی باشد، بجای آنکه به دنبال این باشد که هرچه زودتر سایت خود را به هر طریقی که شده راه اندازی کند و آرام آرام آن را بهبود دهد، به دنبال این است که از همان ابتدا یک سایت عالی و با تمام امکانات راه اندازی کند. از آنجایی که همیشه پله بالاتری وجود دارد و برای کمال طلبی انتهایی نمی توان تصور کرد، هیچگاه به مرحله نمی رسد که سایت مورد نظرش را بسازد.یکی از معایب مهم کامل گرایی اهمال کاری هست تا الان چقدر پروژه ها یا کارهایی رو انجام ندادین که با وضع کردن یک سری مراحل سخت هنوز ناتمام مونده و یا هنوز انجام ندادین .راه کارقوی ترین ابزار سوال کردن از خود است ، اگر از خودت سوال بپرسی قطعا پاسخ مناسبی رو بهش میرسی و با کمک تحقیق و برسی میتونی مشکلت رو حل کنی .امیدوارم این مقاله هم برای شما دوست خوبم مفید واقع شده باشه ، منتظر مطالب دیگه ما هم باش.لینک این مقاله در دت لرن

دوستی تقویم با برنامه نویسان

آکادمی دت لرن — Thu, 12 Sep 2019 21:51:14 +0430

برنامه نویس ها هم در دل تقویم جای گرفتندیکی از شغل های برتر دنیا برنامه نویسی است که این شغل با تمام مخاطرات نیازمند ارزش و اعتبار دادن دولت ها می باشد.جالبه که تمامی شغل ها روزی رو در تقویم به نام خودشان ثبت کرده اند ولی تا چندی پیش برنامه نویسان در تقویم قشر محرومی به نظر می آمدند.اما حالا اینبار روی تقویم هجری شمسی ما برنامه نویسان هم نمایان شده ایم و این بسیار فوق العاده است.روز برنامه نویس چه روزی است؟همانطور که در تقویم، بعضی روزها به بزرگداشت اشخاص و شغل های خاص اختصاص داده شده است، یک برگ از تقویم ۳۶۵صفحه ای به روز برنامه نویس اختصاص دارد.روز ۲۵۶ام هر سال (معادل عدد ۱۰۰در مبنای شانزده) به عنوان روز برنامه نویس نام گرفته است. عدد ۲۵۶بالاترین عدد دودویی در بین ۳۶۵ روز سال است که ارزش ویژه ای بین برنامه نویسان دارد، از این رو روز برنامه نویس هم مرتبط با همین عدد می باشد.از جمله دلایل انتخاب عدد ۲۵۶ به عنوان روز برنامه‌نویس: عدد ۲۵۶ بزرگترین توان عدد ۲ کوچکتر از ۳۶۵ که تعداد روزهای یک ساله. در سیستم دودویی کامپیوتری تعداد اعدادی که می‌تونیم در یک بایت جا بدیم ۲۵۶ تاست.داستان ثبت روز برنامه نویساین روز اولین بار در سال ۲۰۰۲ توسط یک شرکت روسی با جمع آوری امضاهایی به دولت روسیه پیشنهاد شد و در نهایت رییس جمهور وقت روسیه در سال ۲۰۰۹ این روز را در تقویم ملی این کشور ثبت کرد. و پس از آن کشورهای آلمان، کانادا، چین، کرواسی، فرانسه، گوآتمالا، هند، بلژیک، استرالیا، نیوزیلند، لهستان، اسلوونی، بریتانیا، و ایالات متحده آمریکا نیز این روز را به عنوان روز برنامه‌نویس به رسمیت شناختند.روز برنامه نویس در ایراندر ایران هم کمپینی برای جمع آوری امضا و در نهایت پیشنهاد به دولت برای ثبت این روز در تقویم ملی ایران راه اندازی شده است.البته روز مورد نظر این کمپین با روز جهانی متفاوت است و ۲۵۶مین روز از سال هجری شمسی در نظر گرفته شده است.ممکن است ما عضو تیم یا شرکتی باشیم که به توسعه نرم‌افزار می پردازد، یک آزادکار و یا یک دانشجو باشیم، اینروز متعلق به همه ماست. ما به کمک هم ۱۰ آذرماه -یعنی ۲۵۶امین روز سال شمسی- را به عنوان روز برنامه نویس جشن میگیریم و آن را در تقویم ملی کشورمان ثبت می‌کنیم.لینک این مقاله در دت لرنمنبع : ویکی پدیا

آشنایی عمیق با Sass

آکادمی دت لرن — Tue, 10 Sep 2019 13:04:52 +0430

کدنویسی بهینه cssدر این مقاله قصد دارم به صورت مختصر آشنایی عمیقی از sass داشته باشیم .برای کدنویسی css به صورت بهینه در حال حاضر بهترین روش استفاده از پیش پردانده sass است .در حقیقت انتخاب روش بهینه یکی از اصول اساسی هر کاری است.همچنین برای کدنویسی اصولی و بهینه css میتوانیم از پیش پردازنده sass استفاده کنید .انگیزه اگر میخواهید با css برنامه نویسی کنید .اگر میخواهید کد کمتر بزنید بیشتر استفاده کنید.اگر میخواهید زمان کمی از دست بدهید بیشتر نتیجه بگیرید.در آخراگر میخواهید از کدنویسی css لذت ببرید با ادامه این مقاله با من همراه باشید.پیش پردانده Sass چیست ؟به صورت خلاصه باید بگویم Sass یک پیش پردازنده برای زبان css است.پیش پردازنده ها به ما کمک می کنند از ویژگی های منحصر به فردی در css استفاده کنیم.ویژگی‌هایی مانند متغیرها ، قواعد تو در تو و موارد مختلف دیگر.هدف استفاده از این موارد این است که بتوانیم روند کدنویسی را ساده‌تر و مؤثرتر کنیم.به زبان ساده تر sassیک مکمل برای زبان CSS هست ولی هرگز در کارآیی CSS تغییری ایجاد نمیکند.اگر شما در css مبتدی هستید پیشنهاد می کنم فعلا از رفتن به سراغ پیش پردازنده ها صرف نظر کنید. برای به کار گیری sass باید درک کاملی از موارد پایه ای css داشته باشید.ساس(sass) یکی از محبوب‌ترین پیش پردازنده های css است اما Sass تنها پیش پردازنده موجود نیست. موارد دیگری نیز مانند Less وStylus وجود دارند.با استفاده از sass می توانید با css برنامه نویسی کنیداگر شما با یک زبان برنامه نویسی واقعی کار کرده باشید حتما اطلاع دارید که در این زبان ها از موارد کاربردی همچون تعریف متغیر ها و توابع استفاده می شود. که می تواند در کد نویسی و سازماندهی کد ها به ما کمک بسیاری بکند. اینجاست که Sass می تواند بیشتر مشکلات و نقطه ضعف های css را برطرف کند.در واقع Sass مکمل زبان css است. با استفاده از Sass می توان متغیر ها را تعریف کرد و حتی از مفاهیمی همچون وراثت در css استفاده نمود. این ویژگی ها می توانند برای یک طراح فوق العاده باشند.پیش پردازنده چیست ؟در علوم رایانه، پیش‌پردازنده، برنامه‌ای را گویند که با پردازش داده‌های ورودی، دادهٔ خروجی‌ای تولید می‌کند.پروسه پردازش Sassفرض کنید در یک کارخانه کفش مراحلی که طی میشود تا یک کفش در انتهای خط تولید داشته باشیم .ورودی = مواد اولیه کفشپردازش = مواد اولیه کفش + متدهای طراحیخروجی = محصول کفشدقیقا پیش پردازنده sass به این صورت کار میکند که ما یک سری دستورات که این دستورات همان کدهای css هست طبق سینتکس sass کدنویسی میکنیم و در نهایت در خروجی به ما کدهای Css تحویل میده .ورودی = کدهای css طبق سینکس sass + ویژگی های sassپردازش = تبدیل فایل Sass به cssخروجی = کد cssقاعده نوشتاری sassدو قاعده نوشتاری برای Sass وجود دارد که هر دو در نهایت خروجی یکسانی را برای ما تولید می‌کنند.فرمت SCSS : استفاده از فایلی که دارای فرمت scss. است و با css هم بسیار سازگار است.فرمت SASS : استفاده از فایلی که دارای فرمت sass. است. این مورد نیز با css سازگار است و سریع‌تر نوشته می‌شود.مقایسه SASS و SCSS :در واقع SCSS نسخه سوم از SASS می باشد.که از نظر قواعدی باهم متفاوت هستند.کد SASS فشرده شده است، که به ساختارهای کلیدی کمتری نیاز دارد.ما به پرانتز و سیمی کالن (نقطه ویرگول) نیازی نداریم.فرورفتگی ها نقش مهمی را ایفا می کنند. از این رو، آن ها برنامه نویسی را استاندارد می کنند .لینک ها : لینک این مقاله در دت لرن آموزش نصب sass

مرداب اطلاعات (برنامه نویسان وب)

آکادمی دت لرن — Sat, 07 Sep 2019 13:15:47 +0430

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

آموزش نصب و راه اندازی sass

آکادمی دت لرن — Tue, 02 Apr 2019 01:02:26 +0430

برای اینکه ما sass رو نصب کنیم و استفاده کنیم در پروژه هامون دو روش وجود داره :روش اول : استفاده از نرم افزار برای نصب و راه اندازی sassروش دوم : استفاده از دستورات خط فرمان برای نصب و راه اندازی sassروش اول : استفاده از نرم افزار برای نصب و راه اندازی sassاگه بخوایم از نرم افزار استفاده کنیم ، لیستی از نرم افزار ها در زیر قرار گرفته که اگه وارد سایت sass در قسمت install بشید این نرم افزار ها به ترتیب زیر هست : CodeKitCompass.appGhostlabHammerKoalaLiveReloadPreprosScout-Appکه در بین این نرم افزار ها و یا اپلیکیشن ها نرم افزار Scout-App رایگان و متن باز هست ، که ما به راحتی میتونیم در پروژه هامون از این نرم افزار قدرتمند کمک بگیرم که قابلیت های ویژه ای داره ، مثل نوتیفیکیشن ها که در زمان مناسب نمایش داده میشه و به راحتی میتونیم فایل های sass رو به css تبدیل یا به اصطلاح کامپایل کنیم.آموزش ویدیوی روش اول نصب و راه اندازی sassروش دوم : استفاده از دستورات خط فرمان برای نصب و راه اندازی sassبرای اینکه ما بتونیم پکیج sass رو با استفاده از دستورات خط فرمان نصب کنیم باید یک بسته مدیریت پکیج در سیستممون داشته باشیم که پیشنهاد سایت sass که در قسمت install هستش node.js رو گفته که نصب کنیم ، برای اجرای دستورات و نصب پکیج sass روی سیستم .بعد از اینکه node.js رو دانلود کردید و مراحل نصبش تموم شد باید مطمئن بشید که npm به همراه node.js نصب شده یا نه ، برای این کار وارد cmd یا محیط خط فرمان بشید و تایپ کنید npm -vو اینتر رو بزنید .اگه npm نصب شده باشه باید ورژن مربوط به node رو نمایش بده که مشخص میشه node و npm به درستی روی سیستمون نصب شده و میتونید هر پکیجی رو که مد نظرتون بود رو با استفاده از npm نصب کنید .بعد اطمینان از، نصب npm نوبت میرسه به نصب پکیج sass ، کافی هست دستور npm install -g sass رو وارد کنید و اینتر رو بزنید تا پکیج مربوط به sass نصب بشه.و برای اینکه اطمینان حاصل بشه که sass یا پکیج sass نصب شده روی سیستممون ، باید دستور sass --version رو در خط فرمان اجرا کنیم که اگه ورژن مربوط به Sass رو برای ما نمایش بده ، به این معنی هست که پکیج sass برای ما به درستی نصب شده و حالا میتونیم در پروژه هامون از sass استفاده کنید .لینک این مقاله در سایت دت لرن آموزش ویدیوی روش دوم نصب و راه اندازی sass

مراحل یادگیری طراحی سایت (قسمت اول)

آکادمی دت لرن — Sat, 05 Jan 2019 22:47:45 +0330

کلیدی ترین و مهم ترین سوالاتی که اول راه برای شروع یادگیری طراحی سایت ممکنه براتون پیش اومده باشه اینکه ، از کجا باید شروع به طراحی سایت کنم ، مسیر طراح سایت شدن چی هست ، آیا مسیر اصولی برای طراح سایت یا طراح رابط کاربری (UI) شدن وجود داره و …اما جواب این سوالات رو چه کسی میتونه به شما بگه و راهنمایتون کنه تا در اوایل راه دلسرد نشین ، و ذهنیت نسبتا کاملی در فرایند تبدیل شدن به طراح سایت رو داشته باشید .مسلما بهترین راهنما کسی هست که این مسیر رو رفته و با پستی بلندی هاش آشنا هست ، اگه سردرگم هستید یا میخواید تازه وارد این حوزه بشید یا اینکه میخواید بصورت اصولی مسیر طراح سایت شدن رو یاد بگیرید در این مقاله با من همراه باشید .در این مقاله قصد دارم ، مسیری که با تجربه چند سالی که در این حوزه کسب کردم رو خدمت شما دوست خوبم به اشتراک بزارم .قدم اول در یادگیری طراحی سایت :در اولین قدم شما باید html و رو به همراه css یادبگیرید .نکته : پس از آشنایی و مقدمات html و css فقط به صورت پروژه محور روند یادگیریتونو ادامه بدید. یکی از مواردی که به شدت به شما کمک میکنه در حین یادگیری html و css باز طراحی کردن بخش های مختلف یک سایت دلخواه هستش .مفهوم باز طراحی به طور کلی مجددا کدنویسی کردن یک بخش که کدنویسی شده.برای مثال شما وارد یک سایتی میشید و مشاهده میکنید که دکمه ی ارسال نظرات این سایت زیبا هست و طراحی خوبی داره ، سریعا برای خودتون پروژه تعریف کنید و همین دکمرو طراحی کنید با استفاده از کدهای این بخش. با همین کار ساده دقت شما پس از ورود به هر سایتی برای بخش های مختلف یک سایت بیشتر میشه . بعضی وقت ها شده یک مقاله رو جستجو کردم وارد سایت شدم یک دفعه یک بخش از سایت توجهم رو به خودش جلب کرده و فاکتورهایی که وجود داشته در طراحیش برام نامفهوم بوده و سریعا با کمک آقای inspect element مرورگر کد های بخش مورد نظرم رو مشاهده کردم و اون رو در قالب یک پروژه ساده انجام دادم و نکات طراحیش رو به خوبی یادگرفتم و مهم اینکه گاها پیش میاد نکاتی در این بخش بوده که ملکه ذهنم شده ، و فقط با انجام این پروژه ساده که برای خودم تعریف کردم و انجامش دادم .پروژه حتما نباید بزرگ باشه ! در فرایند یاد گیری ، گاها یک بخش ساده از سایت میتونه حاوی نکاتی باشه که تاثیر زیادی در رشد و پیشرفت شما در این حوزه میزاره.معرفی سایت codepen :و یک سایت که شاید باهاش آشنا باشین codepen.io هست که در این سایت پروژه های زیادی توسط طراحان و برنامه نویسان مختلف قرار میگیره و میتونید از این سایت هم برای مشاهده طراحی مختلف یک بخش از سایت استفاده کنید . و همچنین کدهای بکار رفته برای این بخش هم داخل صفحه مربوطه قرار میگیره . مزایای باز طراحی کردن و تعریف پروژه های ساده :شما با این کار با طراحی های مختلفی رو به رو میشد و اگر بخشی از یک سایت طراحیش براتون نامفهوم بود سریعا کلیک راست کنید روی صفحه و inspect رو بزنید و کدهای اون بخش رو مشاهده کنید و اگه خواستید فقط همین بخش رو یک سند html به همراه سند css ایجاد کنید طبق نیازتون یا میتونید از ویرایشگر های کد آنلاین هم استفاده کنید برای مثال سایت codesandbox.io همچین در سایت codepen.io هم میتونید پروژه جدید تعریف کنید و بخش مورد نظر رو با نگاه کردن به کدهاش بصورت دستی برای خودتون ایجاد کنید چرا که همین کار باعث خلاقیت میشه .در اولین قسمت این مقاله صرفا پرداختم به قدم اول برای یادگیری طراحی سایت و صرفا تجربیات خودم رو و مورادی که کمک زیادی به من کرده در قالب راهکار بیان کردم .اگه این مقاله براتون مفید بود در قسمت دیدگاه ها پیشنهادات ، سوالات یا دیدگاه خودتون رو برای ما ارسال کنید .لینک این مقاله در سایت دت لرن

مفهوم ابر متن یا Hypertext چیست ؟

آکادمی دت لرن — Sun, 16 Dec 2018 19:05:21 +0330

ساختار وب مبتنی بر ابر متن هستش و زبان نشانه گذاری ابر متن یا html براساس این ساختار شکل گرفته . اما در این مقاله قصد دارم بپردازم به مفهوم ابر متن ، و اینکه ابر متن چی هست ، با یک مثال توضیح میدم این مفهومو .به عکس زیر دقت کنید .یک صفحه از سایت معمولا داری قسمت های مختلفی هست مثل منو ، هدر ، محتوا ، فوتر و ساید بار ها ، در اکثر سایت ها هم این بخش وجود دارند .اما بخش هایی که اشاره کردیم خودشون هم داری جزئیات و عناصر دیگه هستند ، مثلا قسمت هدر یک عنوان یا یک متن کوتاه میتونه داشته باشه و یک دکمه که بعد کلیک وارد یک صفحه خاصی میشه .در واقع همه بخش ها با جزئیاتشون مفهوم ابر متن رو میرسونن و تصاویر و ویدیو های داخل صفحه مورد نظر هم جز مجموعه ابر متن محسوب میشن .و اینکه تصویر و صوت و ویدیو هم شامل ابر متن میشه در واقع شکل توسعه یافته از ابر متن هست البته این شکل توسعه یافته رو به اصطلاح ابر رسانه یا Hypermedia نیز می نامند.یک مورد دیگه هم در مورد مفهوم ابرمتن خدمت شما عرض کنم ، به شکل زیر دقت کنید .یک صفحه سایت که شما مشاهده میکنید در واقع ساختار html اون یک مجموعه ای از متن ها هست ، اگه داخل یک صفحه سایت کلید ترکیبی Ctrl + U رو بزنید شما کدهای اچ تی ام ال رو مشاهده میکنید که در واقع این کد ها ابر متن هستند یعنی مجموعه از متن ها مختلف ، حالا مرورگر با شناسایی تگ های یک صفحه از سایت ، این تگ ها رو به عنوان یک نشانه برای نمایش عنصری مرتبط با اون تگ برای کاربر نمایش میده .منبع : لینک این مقاله در سایت دت لرن

مفهوم زبان نشانه گذاری یا Markup Language

آکادمی دت لرن — Wed, 12 Dec 2018 22:44:30 +0330

میدونید که html مخفف hyper text markup language در این مقاله میخوام در مورد زبان نشانه گذاری صحبت کنم و بفهمیم که زبان نشانه گذاری واقعا چی هست ؟تعریف ساده و کلی در مورد زبان نشانه گذاری :زبانی که با اضافه کردن نشانه هایی به یک سند باعث تمایز بین یک متن ساده میشه . و این نشانه ها در رایانه یا مرورگر باعث درک بهتر از مفهوم ، نشانه هایی که ما تولید کردیم خواهد شد و همین کار باعث عملکرد بهتر پردازش و نمایش اجزا میشه.اما زبان نشانه گذاری که اون رو تعریف کردیم در مرورگر به چه صورت عمل میکند ، اگر شما با html کدنویسی کرده باشید تمام عناصر طبق یک ساختار داخل تگ های متفاوتی هستند و مرورگر وب طبق تگ ها ، که به عنوان نشانه هایی برای شناسایی اجزای یک سند html کدنویسی شده ، این تگ ها را به صورت قابل فهم برای خودش پردازش کرده و ما چیزی که مشاهده میکنیم فقط محتوایی هست که انتظار نمایش اون رو داریم.مثالی در این مورد :ما یک تگ h1 در سند اچ تی ام الیمون قرار میدیم که داخل آن عنوان زیر هست :

یک متن مورد نظر

و بعد از اینکه ما سند اچ تی ام الیمونو با یک مرورگر باز کردیم چیزی که برای ما نمایش داده میشه فقط متن "یک متن مورد نظر " هستش و نشانه ای که باعث شد مرورگر متوجه این ساختار بشه تگ h1 بود . و اینکه فرمت سند ما html هست که در نتیجه خروجی مورد نظر ما نمایش داده میشه .و نکته و مورد آخر اینکه اگه ما یک تگ پاراگراف

همه اضافه کنیم به این سند مرورگر این دو تگ رو متفاوت از هم در نظر میگیره و منحصر بفرد هستش هر تگ در html.لینک این مقاله در سایت دت لرن

عروس بوت استرپ ، سیستم آرگون

آکادمی دت لرن — Mon, 10 Dec 2018 12:55:34 +0330

اگه با bootstrap کار کرده باشید متوجه میشید که این فریم ورک چقدر زیاد بهتون کمک میکنه در طراحی هاتون .اما بعضی موقع ها برای تست کردن کدهای php یا جاوااسکریپت بهتره از این فریم ورک استفاده کنید تا وقتی از شما گرفته نشه برای استایل دهی به ساختار های مورد نیازتون ، مثلا شما میخواید یک فرم ثبت نام برای تست ایجاد کنید و بعد از تست این ساختار ، اون رو روی پروژه اصلیتون پیاده کنید ، اما پیشنهادی که من به شما میکنم اینه که برای تست کردن هم از فریم ورک بوت استرپ استفاده کنید . تا هم کلاس های بوت رو به خاطر بسپارید و همین اینکه بستر تست کدهاتون با واقعیت طراحی نهایتون کمی نزدیک باشه . اما این مورد چه ربطی داشت به argon یا آرگون ، این سیستم همین بوت استرپه فقط با استایل های خوشگل تر .مثلا چند نمونه از کامپوننت های جالب با استایل زیبا : فرم ها : نمونه ای از modal ها : نمونه ای از navbar ها : این اشتباه رو نکنید که argon یه فریم ورک مستقله، بلکه یک ساختار شخصی شده از نظر استایل دهی هستش یا بهتر بگم اختصاصی برای کامپوننت ها و موارد دیگه که جز ضروریات طراحی رابط کاربری .یه مورد دیگه که استایلش جالبه برای Pagination (پیجینیشن) فارسیش درسته پیجینیشن ? نکته جالب اینکه این استایل ها فوق العاده کاربر پسنده و همچنین متن بازه سیستم آرگون .اما این سیستم از چه فریم ورک ها یا کتابخونه هایی استفاده میکنه :یک : Bootstrap 4دو: jQueryسه : noUISliderچهار : Open Sans Font پنج : Stripe Elementsشش : Popper.js هفت : WebGradients راهنمای نصب :اما اینکه نصب این سیستم به چه صورته :کافی به قسمت دانلود سایت برید و فایل سیستم آرگون رو از گیت هاب دانلود کنید .فایل های css مورد نیاز و قرار دادن اون در تگ head فایل nucleo.css و argon.min.css در اسکریپتی که از خود سایت آرگون دانلود کردید قرار دارد .وهمین طور فایل argon.min.js و بعد قرار دادن فایل های js : نکته : شما فایل bootstrap.css رو قرار ندادید داخل تگ head اما با این وجود این سیستم یعنی سیستم آرگون از بوت استرپ هم پشتیبانی میکنه و داخل فایل سی اس اسی که اشاره کردیم کدهای مربوط به بوت استرپ هم وجود داره و شما با خیال راحت همه مواردی که با بوت استرپ انجام می دادید رو در این سیستم هم پیاده کنید .فقط تفاوتش استایل هایی هست که به کامپوننت ها داده شده در مقایسه با بوت استرپ.لینک : وب سایت آرگون لینک این مقاله در دت لرن

تعریف ساده html 5 و css 3

آکادمی دت لرن — Thu, 06 Dec 2018 21:44:51 +0330

یادگیری html و css نقطه شروع ، برای طراح وب شدن است ! اچ تی ام ال 5 (html5) چیست ؟نسخه پنجم HTML جهت تولید محتوای وب است که قابلیت های بسیاری را در خود دارد و از مهمترین آن‎ها می‎توان به ایجاد انیمیشن و پشتیبانی از فناوری‌ های جدید چند ‎رسانه‌ای نام برد. بزرگترین مزیت HTML5 که بار بزرگی را از دوش توسعه‎ دهندگان وب و بهینه ‎سازان وب برداشته است این است که جستجوگر‎ها بویژه گوگل از متن‎ های داخلی انیمیشن‎ ها پشتیبانی می‎کنند و این به معنی استفاده همزمان از نوشته و تصاویر متحرک همراه با صدا و موسیقی است.اچ تی ام ال ۵ تقریباً با مقوله بروزرسانی استانداردهای کدنویسی وب که به منظور فعال سازی وب سایت های گرافیکی غنی که با سطوح بالای تعامل صورت می‌پذیرد در ارتباط است. به عنوان مثال، HTML5 این امکان را به توسعه دهندگان وب می‌دهد تا به کد نویسی مستقیم ویدیو در سایت‌ ها بپردازند، عناصر “کشیدنی و رها کردنی” را در صفحه بگنجانند و گرافیک و تصاویری در وب سایت منتشر کنند که به اعمال کاربر پاسخ می‌ دهند.آموزش پروژه محور html و cssهمچنین در این نسخهٔ جدید روش‌های جدید معرفی شده است تا هماهنگی رایانه‌ها با این نوع HTML کامل‌تر باشد. در این نوع کدنویسی به طراح وب این امکان داده می‌ شود تا بدون نصب پلاگین های اضافی یا استفاده از Flash ، به سایت خود عناصر زیادی را اضافه کنند.سی اس اس 3 (css3) چیست ؟سی اس اس زبان نشانه ‎گذاری تحت وب است که برای توصیف ظاهر یک وب‎ سایت برای مرورگر استفاده می‎ شود. CSS از سه حرف اول کلمات cascading style sheet تشکیل شده است؛ CSS3 در واقع آخرین نسخه CSS است که دارای قابلیت ‎هایی فراتر از دو نسل اول است. CSS3 به خاطر ساختار ماژولارش، به توسعه‎ دهندگان وب این امکان را می ‎دهد که صفحات وب با محتوای غنی که نیاز به کد سبک‎تری دارند، ایجاد کنند. این یعنی ایجاد ظاهری خیال انگیز، واسط‎ های کاربری بهتر و لود سریعتر وب ‎سایت به‏ کمک عملکرد‎ هایی که برای طراحان وب تقریبا غیر ممکن بود تا بتوانند بدون استفاده از jQuery و Photoshop آنها را خلق نمایند. ویژگی هایی نظیر سایه دار کردن متن، منحنی کردن لبه های کادرها، استفاده از چند تصویر پس زمینه به عنوان بک گراند، ایجاد افکت های حرکتی بر روی عناصر صفحه تنها بخشی از قابلیت های منحصر بفرد سی اس اس ۳ است.اگه علاقه به یادگیری حرفه ای html و css دارید .پیشنهاد میشه در دوره رایگان مینی پروژه های واقعی وب دیزاین رو شرکت کنید .لینک صفحه دوره : https://datlearn.ir/tutorial/real-web-design-mini-projects/