آکادمی دت لرن - آموزش طراحی و برنامه نویسی وب

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

برای اینکه ما بتوانیم در VS Code از sass استفاده کنیم و از عملیات تبدیل sass به css بهره ببریم و همچنین فایل sass رو به css کامپایل کنیم کافی هست از یک افزونه در VS Code به نام Live Sass Compiler استفاده کنیم در ادامه با من همراه باشید تا به راحتی مراحل کامپایل کردن sass/scss با استفاده از افزونه Live Sass Compiler رو قدم به قدم آموزش بدم.

برای کامپایل کردن sass / scss روش های مختلفی وجود داره اما اگه با ویرایشگر VS Code کار میکنم این روش یعنی استفاده از افزونه Live Sass Compiler بهینه تر خواهد بود.

افزونه 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 -> settings

بروید ، بعد از اینکه وارد پنجره 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

۲۵/۰۸/۱۳۹۸۱۷/۱۲/۱۴۰۰

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

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

۱- مشکلات برنامه نویسی فقط برای من زیاد پیش میاد

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

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

راه کار

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

نکته جالب اینکه بهترین برنامه نویسان در مورد حل مشکلات مهارت بالایی دارند .

۲ – عجله در یادگیری فریم ورک

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

راه کار

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

۳ – کامل گرایی

جمله زیر براتون آشنا نیست ؟
یا کاری را انجام نمیدهم یا اگر قصد کردم آن را انجام دهم به بهترین نحو ممکن آن را انجام می دهم.

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

راه کار

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

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

۲۱/۰۶/۱۳۹۸۲۲/۰۶/۱۴۰۱

روز جهانی برنامه نویسان

برنامه نویس ها هم در دل تقویم جای گرفتند

یکی از شغل های برتر دنیا برنامه نویسی است که این شغل با تمام مخاطرات نیازمند ارزش و اعتبار دادن دولت ها می باشد.

جالبه که تمامی شغل ها روزی رو در تقویم به نام خودشان ثبت کرده اند ولی تا چندی پیش برنامه نویسان در تقویم قشر محرومی به نظر می آمدند.

اما حالا اینبار روی تقویم هجری شمسی ما برنامه نویسان هم نمایان شده ایم و این بسیار فوق العاده است.

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

همانطور که در تقویم، بعضی روزها به بزرگداشت اشخاص و شغل های خاص اختصاص داده شده است، یک برگ از تقویم ۳۶۵صفحه ای به روز برنامه نویس اختصاص دارد.

روز ۲۵۶ام هر سال (معادل عدد ۱۰۰در مبنای شانزده) به عنوان روز برنامه نویس نام گرفته است. عدد ۲۵۶بالاترین عدد دودویی در بین ۳۶۵ روز سال است که ارزش ویژه ای بین برنامه نویسان دارد، از این رو روز برنامه نویس هم مرتبط با همین عدد می باشد.

از جمله دلایل انتخاب عدد ۲۵۶ به عنوان روز برنامه‌نویس:

عدد ۲۵۶ بزرگترین توان عدد ۲ کوچکتر از ۳۶۵ که تعداد روزهای یک ساله.

در سیستم دودویی کامپیوتری تعداد اعدادی که می‌تونیم در یک بایت جا بدیم ۲۵۶ تاست.

داستان ثبت روز برنامه نویس

این روز اولین بار در سال ۲۰۰۲ توسط یک شرکت روسی با جمع آوری امضاهایی به دولت روسیه پیشنهاد شد و در نهایت رییس جمهور وقت روسیه در سال ۲۰۰۹ این روز را در تقویم ملی این کشور ثبت کرد.

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

روز برنامه نویس در ایران

در ایران هم کمپینی برای جمع آوری امضا و در نهایت پیشنهاد به دولت برای ثبت این روز در تقویم ملی ایران راه اندازی شده است.البته روز مورد نظر این کمپین با روز جهانی متفاوت است و ۲۵۶مین روز از سال هجری شمسی در نظر گرفته شده است.

ممکن است ما عضو تیم یا شرکتی باشیم که به توسعه نرم‌افزار می پردازد، یک آزادکار و یا یک دانشجو باشیم، اینروز متعلق به همه ماست.

منبع : ویکی پدیا

۱۸/۰۶/۱۳۹۸۱۷/۱۲/۱۴۰۰

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

کدنویسی بهینه css

در این مقاله قصد دارم به صورت مختصر آشنایی عمیقی از sass داشته باشیم .

برای کدنویسی css به صورت بهینه در حال حاضر بهترین روش استفاده از پیش پردانده sass است .

در حقیقت انتخاب روش بهینه یکی از اصول اساسی هر کاری است.

همچنین برای کدنویسی اصولی و بهینه css میتوانیم از پیش پردازنده sass استفاده کنید .

انگیزه

اگر میخواهید با css برنامه نویسی کنید .
اگر میخواهید کد کمتر بزنید بیشتر استفاده کنید.
اگر میخواهید زمان کمی از دست بدهید بیشتر نتیجه بگیرید.
در آخر
اگر میخواهید از کدنویسی css لذت ببرید با ادامه این مقاله با من همراه باشید.[/text_quote]

پیش پردانده 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 در VS Code

۱۴/۰۶/۱۳۹۸۲۰/۱۲/۱۴۰۰

مرداب اطلاعات

آیا تا به حال اطلاعاتی که دارید رو به عمل تبدیل کردید ؟

خیلی وقت ها پیش میاد که از خودمون میپرسیم که فلان کتاب ، ویدیوی آموزشی ، کلاس ، سمینار ، وبینار و … دانشی رو کسب کردیم اما آیا نتیجه خاصی در روند پیشرفت ما داشته یا خیر ؟

آیا مشکل از منابع اطلاعات بوده یا خودم ؟

آیا دلایلی وجود داره که نتونستم به نتیجه مطلوبم برسم؟

و کلی سوالات دیگر …

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

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

۸ دلیل مهم برای تبدیل علم به عمل :

انباشت نکردن اطلاعات

تعیین هدف

نگرش مثبت

اجرای اطلاعات کسب شده

حفظ انگیزه

پیگیری و تمرین مدوام

سوال از خود ؟ چطور میتونم این محتوا رو به عمل تبدیل کنم.

یاداشت برداری و نوشتن

انباشت نکردن اطلاعات

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

تعیین هدف

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

نگرش مثبت

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

اجرای اطلاعات کسب شده

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

حفظ انگیزه

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

برای این که در مسیر باقی بمونیم نیاز به یک انرژی درونی داریم به نام انگیزه که برای حفظ انگیزه راهکار های زیادی وجود داره که ما رو میتونه در مسیر نگه داره تا به مقصد برسیم در زیر ۵ استراتژی وجود داره که به ما کمک میکنه برای حفظ انگیزه .

به فکر تقویت روحیه باشید

هدف های قبلی را فراموش نکنید

از دیگران کمک بگیرید

کتاب بخوانید

در کنار برنامه کاری،تفریح مورد علاقه خود را نیز بگنجانید

پیگیری و تمرین مدوام

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

سوال از خود ؟ چطور میتونم این محتوا رو به عمل تبدیل کنم.

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

یاداشت برداری و نوشتن

یکی از کلیدی ترین بخش از دلایل تبدیل علم به عمل نوشتن هست ، که بخشی از نوشتن میتونه به مکتوب کردن هدف هامون باشه و یا دلایلی که شروع کردیم برای مثال خواندن کتاب یا مشاهده ویدیوی آموزشی .

امیدوارم که اطلاعاتتون رو به عمل تبدیل کنید و با این کار و این ذهنیت که اقدامات ما هستن که زندگی ما رو تشکیل میدن .

۱۰/۰۱/۱۳۹۸۲۶/۱۲/۱۴۰۰

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

۲ روش نصب و استفاده از Sass

برای اینکه ما sass رو نصب کنیم و استفاده کنیم در پروژه هامون دو روش وجود داره :

روش اول : استفاده از نرم افزار برای نصب و راه اندازی sass

روش دوم : استفاده از دستورات خط فرمان برای نصب و راه اندازی sass

روش اول : استفاده از نرم افزار برای نصب و راه اندازی sass

اگه بخوایم از نرم افزار استفاده کنیم لیستی از نرم افزار ها در زیر قرار گرفته که اگه وارد سایت sass در قسمت install بشید این نرم افزار ها به ترتیب زیر هست :

که در بین این نرم افزار ها و یا اپلیکیشن ها نرم افزار Scout-App رایگان و متن باز هست ، که ما به راحتی میتونیم در پروژه هامون از این نرم افزار قدرتمند کمک بگیرم که قابلیت های ویژه ای داره ، مثل نوتیفیکیشن ها که در زمان مناسب نمایش داده میشه و به راحتی میتونیم فایل های sass رو به css تبدیل یا به اصطلاح کامپایل کنیم.

روش دوم : استفاده از دستورات خط فرمان برای نصب و راه اندازی 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 در VS Code

اگه قصد دارید در Vscode نصب کنید sass رو این مقاله رو هم حتما ببینید ، ” کامپایل کردن sass در VS Code “.

پیشنهاد ویژه

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

۱۵/۱۰/۱۳۹۷۲۲/۱۱/۱۳۹۸

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

چطور طراحی سایت رو شروع کنم ؟!!

کلیدی ترین و مهم ترین سوالاتی که اول راه برای شروع یادگیری طراحی سایت ممکنه براتون پیش اومده باشه اینکه ، از کجا باید شروع به طراحی سایت کنم ، مسیر طراح سایت شدن چی هست ، آیا مسیر اصولی برای طراح سایت یا طراح رابط کاربری (UI) شدن وجود داره و برنامه نویسی وب رو چطور شروع کنم اصلن مراحل یادگیری طراحی سایت چطور متوجه بشم.

راهکار اصولی

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

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

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

در اولین قدم شما باید html و رو به همراه css یادبگیرید .

[text_tip]نکته : پس از آشنایی و مقدمات html و css فقط به صورت پروژه محور روند یادگیریتونو ادامه بدید. [/text_tip]

یکی از مواردی که به شدت به شما کمک میکنه در حین یادگیری html و css باز طراحی کردن بخش های مختلف یک سایت دلخواه هستش .

[text_quote]مفهوم باز طراحی به طور کلی مجددا کدنویسی کردن یک بخش که کدنویسی شده.[/text_quote]

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

فعال شدن سیستم رأس در طراحی سایت و افزایش دقت

با همین کار ساده دقت شما پس از ورود به هر سایتی برای بخش های مختلف یک سایت بیشتر میشه . بعضی وقت ها شده یک مقاله رو جستجو کردم وارد سایت شدم یک دفعه یک بخش از سایت توجهم رو به خودش جلب کرده و فاکتورهایی که وجود داشته در طراحیش برام نامفهوم بوده و سریعا با کمک آقای inspect element مرورگر کد های بخش مورد نظرم رو مشاهده کردم و اون رو در قالب یک پروژه ساده انجام دادم و نکات طراحیش رو به خوبی یادگرفتم و مهم اینکه گاها پیش میاد نکاتی در این بخش بوده که ملکه ذهنم شده ، و فقط با انجام این پروژه ساده که برای خودم تعریف کردم و انجامش دادم .

پروژه حتما نباید بزرگ باشه !

در فرایند یاد گیری ، گاها یک بخش ساده از سایت میتونه حاوی نکاتی باشه که تاثیر زیادی در رشد و پیشرفت شما در این حوزه میزاره.

معرفی سایت codepen

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

مزایای باز طراحی کردن و تعریف پروژه های ساده

شما با این کار با طراحی های مختلفی رو به رو میشد و اگر بخشی از یک سایت طراحیش براتون نامفهوم بود سریعا کلیک راست کنید روی صفحه و inspect رو بزنید و کدهای اون بخش رو مشاهده کنید و اگه خواستید فقط همین بخش رو یک سند html به همراه سند css ایجاد کنید طبق نیازتون یا میتونید از ویرایشگر های کد آنلاین هم استفاده کنید برای مثال سایت codesandbox.io همچین در سایت codepen.io هم میتونید پروژه جدید تعریف کنید و بخش مورد نظر رو با نگاه کردن به کدهاش بصورت دستی برای خودتون ایجاد کنید چرا که همین کار باعث خلاقیت میشه .

سخن پایانی

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

امیدوارم این مقاله براتون مفید بوده باشه در صورت تمایل در قسمت دیدگاه ها پیشنهادات ، سوالات یا دیدگاه خودتون رو برای ما ارسال کنید .

پیشنهاد ویژه :

[text_tip]اگه علاقه مند هستید بصورت حرفه ای HTML و CSS رو یادبگیرید در دوره رایگان html5 به همراه css3 شرکت کنید.[/text_tip]

۲۵/۰۹/۱۳۹۷۲۰/۱۲/۱۴۰۰

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

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

به عکس زیر دقت کنید .

ساختار یک سند وب

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

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

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

و اینکه تصویر و صوت و ویدیو هم شامل ابر متن میشه در واقع شکل توسعه یافته از ابر متن هست البته این شکل توسعه یافته رو به اصطلاح ابر رسانه یا Hypermedia نیز می نامند.

یک مورد دیگه هم در مورد مفهوم ابرمتن خدمت شما عرض کنم ، به شکل زیر دقت کنید .

تگ ها یا نشانه ها

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