طراحی سایت - آکادمی دت لرن

آموزش نصب و راه اندازی 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]

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

عروس بوت استرپ ، سیستم آرگون (۲۰۱۸)

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

فرم ها :

modal ها :

navbar ها :

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

یه مورد دیگه که استایلش جالبه برای Pagination ها هستش:

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

اما این سیستم از چه فریم ورک ها یا کتابخونه هایی استفاده میکنه :

[list_group]

Bootstrap 4

jQuery

noUISlider

Open Sans Font

Stripe Elements

Popper.js

WebGradients

[/list_group]

[text_title]راهنمای نصب :[/text_title]

اما اینکه نصب این سیستم به چه صورته :

کافی به قسمت دانلود سایت برید و فایل سیستم آرگون رو از گیت هاب دانلود کنید .

فایل های css مورد نیاز و قرار دادن اون در تگ head

<!-- Fonts -->
<link href="https://fonts.googleapis.com/css?family=Open+Sans:300,400,600,700" rel="stylesheet">

<!-- Icons -->
<link href="/assets/vendor/nucleo/css/nucleo.css" rel="stylesheet">
<link href="/assets/vendor/font-awesome/css/font-awesome.min.css" rel="stylesheet">

<!-- Theme CSS -->
<link type="text/css" href="/assets/css/argon.min.css" rel="stylesheet">

فایل nucleo.css و argon.min.css در اسکریپتی که از خود سایت آرگون دانلود کردید قرار دارد .وهمین طور فایل argon.min.js

و بعد قرار دادن فایل های js :

<!-- Core -->
<script src="/assets/vendor/jquery/jquery.min.js"></script>
<script src="/assets/vendor/popper/popper.min.js"></script>
<script src="/assets/vendor/bootstrap/bootstrap.min.js"></script>

<!-- Theme JS -->
<script src="/assets/js/argon.min.js"></script>

[text_tip]نکته : شما فایل bootstrap.css رو قرار ندادید داخل تگ head اما با این وجود این سیستم یعنی سیستم آرگون از بوت استرپ هم پشتیبانی میکنه و داخل فایل سی اس اسی که اشاره کردیم کدهای مربوط به بوت استرپ هم وجود داره و شما با خیال راحت همه مواردی که با بوت استرپ انجام می دادید رو در این سیستم هم پیاده کنید .[/text_tip]

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

لینک : وب سایت آرگون