آموزش بوت استرپ | آموزش Bootstrap

مقاله،سورس کد،فیلم آموزشی

آموزش بوت استرپ | آموزش Bootstrap

مقاله،سورس کد،فیلم آموزشی

طراح وب سایت به چه کسی گفته می شود؟

جمعه, ۱۹ آذر ۱۳۹۵، ۱۰:۱۳ ب.ظ

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

به ادامه مطلب مراجعه کنید

طراح وب کیست؟

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

توانمندی های یک طراح حرفه ای وب

یک طراح وب حرفه ای باید به یک سری از تکنولوژی ها و نرم افزار ها تسلط داشته باشد که به صورت زیر لیست می شود

  1. Photoshop
  2. Html
  3. Css
  4. Jquery
  5. Responsive Design
  6. Code Editor

نقش فتوشاپ در طراحی وب

شاید اولین سوالی که برای شما پیش بیاد اینه که چقدر باید فتوشاپ بلد باشیم؟ خب مسلما خیلی از افراد با مشاغل مختلف با فتوشاپ کار میکنن.از عکاس بگیر،تا طراح هایی که کارهای چاپی انجام میدن.شما به عنوان یک طراح وب هرچقدر بیشتر مسلط باشید به فتوشاپ،نتیجه کارتون خیلی تمیز تر از آب در میاد.
حالا به عنوان یه طراح چه چیزی رو باید در فتوشاپ طراحی کنید؟با یک مثال این مورد رو توضیح میدم.
فرض کنید یه پروژه قرار هست پیاده سازی بشه.شما در ابتدایی ترین حالت باید نیازهای مشتری رو بفهمین.مثلا یه سایت خبری میخواهیم طراحی کنیم.
این سایت شامل :
  1. منو
  2. اسلایدر
  3. اخبار ویژه
  4. ویدئوها
  5. بخش طنز
  6. اخبار استانی
  7. و غیره..
حالا شما به عنوان طراح باید یه طرح اولیه توی فتوشاپ از چیزی که توی ذهنتون هست طراحی کنید.مثلا یه چیزی مثل تصویر زیر
در مرحله بعدی شما باید اون طرح رو به مشتری نشون بدین که در صورت تایید اون رو به HTML تبدیل کنید که این مرحله به اصلاح تبدیل PSD به HTML گفته میشه.
اما باید به چند نکته توجه کتید.یکی اینکه زیاد به مشتری حق تغییرات ندین وگرنه پوستتون کتده میشه برای اینکه اون پروژه رو تموم کنید.بعضی مشتری ها خیلی وسواس دارن من پیشنهاد میکنم توی قرار داد حتما ذکر کنید که تغییرات بیش از حد شامل هزینه میباشد.
فتوشاپ یه کاربرد دیگه هم داره.اونم طراحی کردن اسلایدر های زیبا و جذاب برای سایته.یه سایت بدون داشتن تصاویر زیبا اصلا خوشگل نیست.خیلی از سایت ها به واسطه عکس های زیبایی که دارن خوشگل به نظر میان.اگر همون وب سایت هارو عکساش رو عوض کنید کلا سایت از این رو به اون رو میشه.از دیگر کاربردهاش میتونیم به بهینه سازی تصاویر و کم کردن حجم اونا توسط فتوشاپ اشاره کنیم.
پس تا اینجا تقریبا فهمیدیم نقش فتوشاپ در طراجی وب تو چیه.

نقش HTML , CSS در طراحی سایت


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

طراحی ریسپانسیو

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

نقش Jquery

خیلی ها میگن اول باید جی کوئری یاد بگیرم یا جاوا اسکریپت؟
jquery کتابخانه ای هست که خودش داره از جاوا اسکریپت استفاده میکنه.یعنی اول و آخر شما از جاوا اسکریپت استفاده میکنید.اما با این تفاوت که یاد گرفتن جی کوئری خیلی خیلی ساده تر هست.جی کوئری با شعار کمتر بنویس بیشتر انجام بده وارد بازار شد.یعنی شما با یک خط کد میتونید یک عنصر HTML رو مخفی و یا ظاهر کنید.در صورتی که همین مورد رو با خود جاوا اسکریپت باید کدهای بیشتری بنویسید.
پس نتیجه میگیریم برای شروع جی کوئری کفایت میکنه و نیازی به یادگیری جاوا اسکریپت نیست.چون به طور کامل نیازهای طراحی رو پوشش میده.البته یه فرق دیگه هم بین جی کوئری و جاوا اسکریپت هست اونم اینه شما وقتی از جی کوئری استفاده میکنید باید فایل اون رو به صفحه متصل کنید که تقریبا یه حجمی حدود 91 کیلو بایت به صفخه وب اضافه میکنه.البته این حجم در قبال امکاناتی که بهتون میده بسیار ناچیزه.

Code Editor 

شما نیاز به یک ویرایشگر متن دارید.خیلی از دوستان فکر میکنن باید حتما برای طراحی سایت از دریم ویور استفاده کنن.متاسفانه این یک باور غلط بین افراد هست که خوب به نظرم از اونجا شروع میشه که آموزشگاه های مختلف میان تبلیغ میکنن آموزش طراحی سایت با دریم ویور و یا غیره.فرقی نداره شما کجا کدهای خودتون رو مینویسید.حتی میتونید در Notepad ویندوز هم کد بنویسید ولی پوستتون کنده میشه.نرم افزارهای زیادیی برای این کار وجود دارند که بر اساس امکانات و سلیقه ی افراد مورد استفاده قرار میگیرن.شما به عنوان یک طراح سایت سعی کنید از ویرایشگر هایی نظیر براکتس و یا Sublime Text آستفاده کنید.
این مواردی که گفتم بسیار سبک هست و در عین سبک بودن و سادگی کارایی بسیار بالایی دارن و پاسخگوی تمام نیاز های شما هستن.


  • موافقین ۰ مخالفین ۰
  • جمعه, ۱۹ آذر ۱۳۹۵، ۱۰:۱۳ ب.ظ
  • سعید کشاورز

نظرات  (۱)

سلام

سپاس فراوان جناب
ارسال نظر آزاد است، اما اگر قبلا در بیان ثبت نام کرده اید می توانید ابتدا وارد شوید.
شما میتوانید از این تگهای html استفاده کنید:
<b> یا <strong>، <em> یا <i>، <u>، <strike> یا <s>، <sup>، <sub>، <blockquote>، <code>، <pre>، <hr>، <br>، <p>، <a href="" title="">، <span style="">، <div align="">
تجدید کد امنیتی