پس میخوای طراحی رابط کاربری رو اصولی یاد بگیری؟ جای کاملا درستی اومدی! توی این صفحه، مسیر پر پیچ و خم این حوزه رو برات هموار کردیم و بدون دغدغه کافیه که دنبالش کنی تا انشاءالله با تلاش و پشتکار، در انتهای مسیر به حدی برسی که بتونی یک Front-end Developer خوب بشی
مسیری که در اینجا براتون چیندیم، حاصل تجربیات چندساله در حوزه آموزش هست و با مهندسی کامل و دید شبکه ای و سیستمی چینده شده. شما در این مسیر از نقطه صفر شروع می کنید و در نهایت به حدی می رسید که بتونید در بازار حرفی برای گفتن داشته باشید.
شیوه آموزشی ما به این صورت هست که در اوایل مسیر سعی می کنیم در سریع ترین زمان ممکن کاری کنیم که خروجی زحمات تون رو ببینید و شوق ادامه کار در شما ایجاد بشه و بعد آروم آروم وارد مباحث تخصصی تر میشیم. هر از چندگاهی هم به صورت جاروبی، مطالب کلیدی در گام های مختلف به صورت مختصر اشاره میشن تا مطمئن بشیم که با پایه ای قوی و مستحکم رشد میکنید. برای توضیحات بیشتر ویدئوی این بخش رو ببینید...
در این دوره آموزشی، به صورت مختصر و مفید، ارتباط بین اجزای یک سایت و تکنولوژی هایی که برای راه اندازی وب سایت استفاده می شود را توضیح می دهیم. پس از این دوره شما کدنویسی یاد نمی گیرید! ، فقط کمی دید نسبت به روال طراحی سایت پیدا می کنید که این دید برای یادگیری زبان ها برنامه نویسی و تکنولوژی های مورد نیاز می تواند کمک حال تان باشد تا با آگاهی بیشتری به سمت یادگیری تکنولوژی ها بروید.
در این دوره آموزشی فوق العاده ضروری قصد داریم شما را با دو مفهوم بسیار پایه ای و مهم از دنیای اینترنت آشنا کنیم در ابتدا به بررسی مفاهیم دیتاسنتر، سرور، isp ، DNS ، هاست و دامنه (Domain) پرداخته و سپس یاد میگیریم که چطور دامنه رایگان، ir، و بین الملل ثبت کنیم و از کجا هاست تهیه کنیم. در نهایت نیز نگاهی کلی به کنترل پنل هاست خواهیم داشت و اولین حضور خودمان در اینترنت را اعلام خواهیم کرد!
در این دوره اورژانسی، با مفهوم FTP آشنا می شیم و با استفاده از نرم افزار File Zilla اقدام به آپلود و دانلود فایل های وب سایت مون می کنیم و بدین ترتیب دیگه نیازی به کار با کنترل پنل هاست نخواهیم داشت و سرعت کار بالا خواهد رفت…
همونطور که میدونید، ما در وی لرن به صورت سیستمیک به آموزش نگاه میکنیم و مخاطب اصلیمون رو کسی فرض میکنیم که میخواد در نهایت پا به پای ما، طراحی وب رو یاد بگیره. برای رسیدن به این هدف، بایستی که گام به گام جلو بریم و یکی از اون گام های پایه، دقیقا همین دوره هست.
ما در این دوره قصد داریم با تکنولوژی مدرن HTML5 آشنا بشیم و المان ها و صفت هایی که در این زبان ایجاد شده اند را بررسی کنیم. همچنین به بررسی المان ها و صفت هایی که در HTML4 وجود داشتند و HTML5 حذف شده خواهیم پرداخت.
در این دوره آموزشی 12 قسمتی ما وارد دنیای CSS3 خواهیم شد و در 12 قسمت مباحث CSS3 را بررسی میکنیم. مهم ترین ویژگی این دوره آموزشی کاربردی بودن آنن است ، بدین صورت که در پایان هر بخش یک پروژه کاربردی در مورد همان بحث خواهیم داشت. همچنین در بخش 10 یک اسلایدر 3D را با توجه به اندوخته هایی که طی 9 قسمت کسب کردیم ایجاد میکنیم. پس از پایان 12 قسمت نیز پروژه نهایی را پیاده سازی و طراحی میکنیم.
یکی از مسائلی که به شدت بر روی سرعت بارگزاری سایت ها اثر می گذارد بحث حجم و سایز عکس ها می باشد . بدیهی است که هر چقدر حجم عکس های استفاده شده در سایت کمتر باشد سرعت لود شدن سایت نیز بالاتر می رود. اما مسئله لود شدن سایت صرفا به کاربران محدود نمی شود قطعا این پارامتر برای موتورهای جستجو نیز موضوع جذابی می باشد و طبیعتا در رتبه بندی های خود این پارامتر را نیز مورد توجه قرار می دهند
در این دوره آموزشی یاد میگیریم که چطور یک وب سایت تک صفحه ای ریسپانسیو (Landing Page Responsive) طراحی کنیم. در این دوره آموزشی ما یک طرح تک صفجه ای شامل بخش خدمات – گالری – تماس با ما – مشتریان و … را طراحی میکنیم و همچنین از کتابخانه هایی همچون Colorbox , Carousel Slider , ResponsiveSlides , MsScrollbar , Font-Awesome , Wow Animate و … برای طراحی وب سایت Landing Page نیز استفاده خواهیم کرد.
در زمینه برنامه نویسی و کار با کدها، ابزارهایی فراهم شده اند که می توانند به کار برنامه نویس سرعت و بخشیده و کار او را درباره کدهای معمول و عمومی کمتر کنند. Emmet یکی از ابزارهای پرکاربرد در زمینه طراحی وب سایت ها بشمار می رود که با فراهم نمودن یک زبان میانبر و در عین حال رعایت استانداردها برای نوشتن کدهای HTML, XML و CSS مورد استفاده قرار می گیرد.
در این دوره آموزشی به مباحث فریم ورک بوت استرپ (Bootstrap) به طور کامل خواهیم پرداخت و بعد از بررسی تمام مباحث فریم ورک از جمله اسکریپت ها - المان ها (شامل جداول - فرم ها - تایپوگرافی - تولتیپ - لایت باکس - تب ها و ...) به طراحی دو تم Landing Page و Magazine میپردازیم.
ما میخیوایم یک فریم ورک محبوب دیگه رو هم براتون معرفی کنیم . بعد از فریم ورک bootstrap ، محبوب ترین فریم ورک بین طراحان رابط کاربری ، uikit framework هست.اگر تا حالا با بوت استرپ کار کرده باشین ، به راحتی میتونین با uikit هم ارتباط برقرار کنین . اگر هم تا حالا کار نکردین کمی براتون توضیح میدیم تا یک دید کلی نسبت به فریمورک UIkit بدست بیارین
یکی از بزرگترین مشکل هایی که پیرامون ریسپانسیو ساختن وب سایت وجود دارد , ساخت جدول ذر این نوع وب سایت ها میباشد . جداولی که دارای تعداد ستون های زیادی هستند , در موبایل به دلیل پهنای کم , بسیار جمع شده و به صورت ناخوانایی در می آیند . در این درس اورژانسی به طراحی یه جدول ریسپانسیو میپردازیم…;):)
در این دوره آموزش ویدئویی یاد میگیریم که چطور صفحات نمونه کار شکیل با قابلیت فیلتر بر اساس دسته و همچنین مرتب سازی المان ها ایجاد کنیم تا کاربران و مشتریان مون در میان انبوهی از نمونه کارها و یا محصولات ما گم نشوند! (برای آشنایی بیشتر، جلسه اول را مشاهده نمائید. )
استفاده از مقیاس اندازه گیری پیکسل ۳ مشکل دارد که باعث شد طراحان وب به سراغ واحد های جدید تر یعنی EM و REM بروند. مشکل اول : تایپوگرافی مشکل دوم : اشکال در طراحی اجزای رابط کاربری مشکل سوم : زمان طراحی رسپانسیو را بالا می برد
در خدمت تون هستیم با یک دوره خاص که به صورت تخصصی بر روی طراحی فرم ها در HTML می پردازد. مخاطبین این دوره، عزیزانی هستند که CSS یاد دارن و حالا میخوان فرم های شکیل و جونداری طراحی کنن و نیازمند ایده هستن. در این دوره، چهار پروژه مختلف پیاده سازی میشه تا سوالات و ابهامات شما در طراحی فرم ها برطرف بشه.
در این دوره کوتاه یاد میگیریم که چطور پنل کاستومایز سمت فرانت برای کاربر ایجاد کنیم تا هرطور که تمایل داشت، ظاهر رو شخصی سازی کنه این شخصی سازی شامل قابلیت انتخاب فونت و رنگ بندی و هرنوع استایل دیگری خواهد بود. همچنین در نهایت یاد میگیریم که چطور انتخاب کاربر را در کوکی ذخیره کنیم تا در صفحات جدید هم کاستومایزش اعمال شود.
به دوره آموزشی ساخت صفحه 404 خوش آمدید ، به بهانه ساخت صفحه 404 می خوایم با ترفندهای CSS یا CSS Tricks آشنا بشیم. ما صفحه ای فانتزی با HTML،CSS و کمی jQuery پیاده خواهیم کرد. دمو زیر رو ببینید
Sass مخفف Syntactically Awesome Style Sheets هست و پیش پردازنده CSS یا CSS Preprocessor Language به حساب میاد. Sass صرفا مربوط به زمان کدنویسی هست و وقتی کارمون تموم شد بهمون خروجی CSS میده لذا قرار نیست روی سرور آپلودش کنیم. روش کار به این صورت هست که Sass رو نصب می کنید و بعد به زبان اون کدنویسی می کنید و نهایتا کدهای CSS شسته رفته تحویل میگیرید! به همین راحتی!!! اولش ممکنه عجیب غریب باشه اما وقتی باهاش کار کنین، یکی از گم شده هاتون در حوزه تخصصی تون رو پیدا خواهید کرد و کلی باهاش دوست خواهید شد!
این دوره بنا به درخواست یکی از دانشجویان عزیز وی لرن تهیه شده است و شامل موارد بسیار کاربردی و مهم از ابزارهای Devoloper tools مرورگر کروم می باشد . البته باید توجه داشته باشید ، مواردی که شما در این دوره می آموزید صرفا منحصر به کروم نمی باشد و بسیاری از این مباحث با بخش Inspect element مرورگر فایرفاکس نیز مشترک می باشد .
برنامه نویسان وب علاقه دارند که تنها به کدنویسی بپردازند و کارهای جانبی اون مثل کامپایل ، Unit Test ، Linting و . . . را به عهده دیگری بسپارند . یکی از فریم ورک های بسیار جذاب JavaScript فریم ورک GRUNT میباشد که بسیاری از کارهای طراحی وب و برنامه نویسی را به صورت اتوماتیک انجام میدهد.
این دوره اسمش عجیب غریبه! (بخونید سی اس اسیز). در این دوره قراره مباحث مختلف مرتبط با طراحی رابط کاربری رو عنوان کنیم و بیشتر به مواردی که در حد و اندازه دوره جدا نباشن، خواهیم پرداخت… پس این دوره انتها نداره و هر از چند گاهی بهش سر بزنید، از نکات ریز و درشت، ساده و پیچیده در اینجا یافت خواهد شد