سلام
بعد از ایجاد
مهمان عزیز شما قادر به مشاهده پیوندهای انجمن مانشت نمیباشید. جهت مشاهده پیوندها ثبت نام کنید.
و بازگو کردن برخی از تجربههای مربوط به وب و در ادامه اون طرح یه سری از سوالات توسط دوستان؛ تصمیم گرفتیم که بیایم و در مورد یادگیری طراحی وب از صفر و با تمام جزئیاتش با هم صحبت کنیم، توجه کنید که این یک تاپیک آموزشی نیست، صرفا یک تاپیک راهنماست، چون ما در پیدا کردن منابع آموزشی چه به زبان فارسی و انگلیسی هیچ مشکلی نداریم و اگه اراده کنیم بهترین منابع آموزشی دو دقیقه بعد تو سیستم ماست!
مطمئنا راهی که من یا بقیه افراد برای رسیدن به این هدف طی کردیم یا میکنیم لزوما با هم یکسان نیست، من هم صرفا با توجه به تجربیات خودم و اون چیزی که از حرکت در این مسیر میدونم اظهار نظر میکنم و البته از دوستانی که در این زمینه تجربه دارن میتونند بیان و راهنماییهای مفید خودشون رو بعد از اینکه این سلسله مطالب تموم شد، ارائه کنند.
بعد از ویرایش: مسیر قرار گرفتن مطالب همون چیزی هست که در اینفوگرافیک "فرآیند طراحی و توسعه وب سایت" در پست دوم همین تاپیک میبینید. خواهشا در راستای به هم نخوردن نظم تاپیک از گذاشتن پستهای غیرمرتبط با بحث فعلی و طرح سوالاتی در زمینه مباحث آتی که باعث سردرگمی کاربران میشه اجتناب کنید و اجازه بدید که بتونیم به کمک هم پیوستگی مطالب رو حفظ کنیم.
اینجا سعی میکنیم با دو رویکرد به این قضیه نگاه کنیم: مسیر کامل و مسیر میانبُر... مطمئنا ما اصل رو بر شیوه اول قرار میدیم و سعی میکنیم که با رویکرد کامل گرایانه جلو بریم و ببینم برای طراحی، کدنویسی و استقرار یک وب سایت چه مفاهیم مقدماتیای رو باید بلد باشیم، در ادامه چه قدمهایی رو باید برداریم و از چه منابع و راهکارهایی برای رسیدن به هدفمون استفاده کنیم.
اما در رویکرد دوم که در حاشیه بهش اشاره میشه، سعی بر اینه که روشهای میانبری رو برای افرادیکه وقت زیادی برای یادگیری ندارند، یا اصلا قصد حرفهای شدن در بحث تولید وب سایت رو ندارند، یا اینکه موقتا تا رسیدن به اون روز میخوان تجربه کار با یک وب سایت کامل رو داشته باشن رو معرفی کنیم که بتونن برای خودشون خیلی سریع مثلا یک وب سایت شخصی یا شرکتی درست کنند یا اینکه بتونن از این مهارتشون برای کسب درآمد تو بازارهای کوچیک تا متوسط استفاده کنند و خیلی رود متوجه میشید که خیلی راحت میتونیم این کار رو انجام بدیم.
در واقع در این رویکرد به بررسی سیستمهای مدیریت محتوای متن باز رایگان، سورس کدهای آماده، المانهای گرافیکی پیش ساخته و شیوه پیدا کردن و استفاده از اونها میپردازیم. توجه کنید که استفاده از رویکرد دوم لزوما به معنای ناآگاهی نیست، همونطور که بزرگترین شرکتهای طراحی وب کشور هم در سرویسهای پشنهادی خودشون به مشتریان از همین دو رویکرد و البته ترکیبی از اونها استفاده میکنند.
گاهی اوقات بودجه در نظر گرفته شده مشتری زیاد نیست یا اینکه زمان در نظر گرفته شده کافی نیست، بنابراین ما نمیتونیم نسبت به دو پروژه در سطوح و با جزئیات مختلف، یک رفتار یکسان رو داشته باشیم.
اصولا فرآیند تولید یک وب سایت رو میتونیم به دو بخش طراحی و توسعه تقسیم بندی کنیم.
معمولا تا جاییکه بشه نیازها رو برطرف کرد، کلیه مراحل طراحی و توسعه وب سایت از مذاکره تا طراحی و کدنویسی و نگهداری میتونه توسط یک نفر صورت بگیره (کاری که عموما
مهمان عزیز شما قادر به مشاهده پیوندهای انجمن مانشت نمیباشید. جهت مشاهده پیوندها ثبت نام کنید.
ها انجام میدن و البته افراد زیادی نیستند که همه این مهارتهارو با حفظ کیفیت لازم یکجا با هم داشته باشن)، ولی اگه بخوایم به صورت اصولی وظایف رو تفکیک کنیم (عموما در شرکتها یا گروههای کاری) میتونیم برای مراحل مختلف این پروسه، مهارتهای جداگانهای رو در نظر بگیریم.
برای مثال نشست اولیه وظیفه یک بازاریاب یا افراد مجرب در حوزه کسب و کار، بررسی نیازها وظیفه فرد یا تیم تجزیه و تحلیل، طراحی ساختار بصری وب سایت توسط گرافیست، برنامه نویسی سمت کاربر یا Client Side توسط طراح وب، برنامه نویسی سمت سرور یا Server Side توسط توسعه دهنده وب و... . در واقع در این شیوه، خروجی کار یک فرد یا یک تیم به فرد یا تیم بعدی میرسه، البته ممکنه همپوشانیهایی هم در وظایف داشته باشیم.
ولی به صورت کلی و بر اساس اون چیزی که رایج شده، فرآیند تولید یک وب سایت به دو بخش طراحی و توسعه تفکیک میشه که قبل از اشاره به این تعاریف بهتره یه مروری بر قسمتهای مختلف یک وب سایت داشته باشیم:
- شمای بصری: شامل اون چیزی که میبینم! مثل عناصر گرافیکی ثابت یا متحرک، رنگها، فونتها، منوها، باکسها و... که در واقع به مجموعهای از این موارد و نحوه ارتباط و چیدمان اونها رابط یا واسط کاربری (User Interface) گفته میشه؛
- محتوا: شامل نوشتار، تصاویر، ویدئو، صوت و... در هر زمینهای؛
- عملکرد: شامل ویژگیهای تعاملی وب سایت با کاربر؛ مثل یک فرم تماس یا Login و همچنین سرویسهای خاص؛
- تجربه کاربری: شاید شنیده باشید یا شاید هم نه، در هر صورت این یک مورد خیلی ملموس و البته برابر برای همه کاربران نیست، چون بیشتر به جنبه رفتاری یک نرم افزار و نگرش، علایق، عواطف و احساسات کاربر برمیگرده، طبق تعریف ویکیپدیا: "تجربهٔ کاربری همان خاطرهای است که با استفاده از یک محصول، سامانه یا سرویس در ذهن کاربر نقش میبندد".
تجربه کاربری خوب باعث میشه اگه من یه بار که اومدم مانشت دوباره به دلایل مختلف برگردم همینجا، چون حتما یه چیزی داشته که منو جذب کرده! اگه من یک گوشی مدل X2015 خریدم، سال بعد هم مدل X2016 رو هم بخرم، ولی یه تجربه کاربری بد باعث میشه که من صد سال سیاه هم پام رو توی اون وب سایت نزارم!
مثل سایتهای اسپم یا یه سایتی که اصلا نمیتونم گزینههای هدف رو پیدا کنم و به چیزی که دنبالشم برسم!
در واقع من نمیتونم به سرویسهای مورد نظر به شکلی مطلوب دسترسی پیدا کنم و کاملا سردرگم شدم! یا سری بعدی اون گوشی رو به خاطر حس بدی که نسبت به رابط کاربری افتضاحش (مثلا سیستم عامل سیمبین!) سری قبلش داشتم رو نخرم! (این یه حسه، شاید یه حس منحصر به فرد که ممکنه برای من اینطوری باشه و برای شما نه ولی غالبا یه حس مشترکه!).
خیالتون رو راحت کنم: ما میتونیم یه وب سایتی رو طراحی کنیم که همه مردم ازش فرار کنند یا نه موندگار بشن و این تجربه لذیذ رو با دیگران هم به اشتراک بزارن! والسلام!
خب بعدا به مسائل مربوط به طراحی رابط کاربری (User Interface Design / UID) و طراحی تجربه کاربری (User Experience Design / UXD or UED) اشاره میکنیم. اما فعلا برگردیم به دنباله بحث اصلی!
طراح وب و توسعه دهنده وب در نگاه اول انگار با هم تفاوتی ندارند، نه؟ ما کلا تو ایران به همه میگیم طراح وب!
از کسی که کلا طراحی نمیکنه و اسم خودش رو میزاره طراح وب تا برنامه نویس... و شاید هم اینجوری فکر میکنیم که لزوما صفر تا صد پروژه رو خودمون باید انجام بدیم! شاید بهتر باشه یه چیزهایی از هر بخشی بدونیم اما خب از دیدگاه جهانی و بصورت کلی این دو با هم متفاوت هستن! از نوع وظایف گرفته تا میزان درآمد؛ در واقع میتونیم
"طراحی وب" رو به مسائل مربوط به طراحی شمای بصری یا رابط کاربری مثل رنگ شناسی، طراحی المانها، چیدمان، اکشنها، ساختار و... که عموما حاصل ترکیبی از خروجی نرم افزارهای گرافیکی مثل فتوشاپ، ایلستریتور و... + کدنویسی سمت کاربر (Client Side) مثل HTML و CSS و Javascript و کتابخانه معروفش jQuery هست مرتبط کنیم.
همچنین میتونیم
"توسعه وب" رو به مسائل مرتبط با عملکرد وب سایت و برنامه نویسی به زبانهایی مثل PHP, ASP.NET, Python و... بانکهای اطلاعاتی نظیر SQL, My SQL و... سیستمهای مدیریت محتوا (Content Management Systems / CMS) معروفی مثل وردپرس، جوملا، دروپال و... و البته مباحث مربوط به بهینه سازی (Search Engine Optimization / SEO)، تامین امنیت، جزئیات فنی پیادهسازی در بستر یک سیستم عامل که مربوط به مسائل سمت سرور (Server Side) هست، تقسیم کنیم که البته جلوتر به همه اینها اشاره میکنیم ولی اینجا لازم بود که حتما مختصرا اسمشون رو بیاریم.
شاید طراح وب نیازی به داشتن دانش عمیق درباره PHP نداشته باشه یا اینکه توسعه دهنده نیازی به دونستن دستورات CSS ولی هر دو نیازمند به دونستن دانشهای پیش زمینه در مواردی مثل مفاهیم مقدماتی، پیادهسازی، دستورات HTML و... هستند. اصلا بیخیال توضیح بیشتر! در ادامه و توی بخش مخصوص به خودش خیلی کامل در مورد همه اینها توضیح داده میشه و هیچ نگرانیای بابت اصطلاحاتی که در بالا به کار رفته وجود نداره!
حالا فعلا اینفوگرافیک زیر رو ببینید:
* این اینفوگرافیک با اعمال اصلاحاتی جزئی بازنشر شده است!
نکته اول: در اینفوگرافیک بالا منظور از فایلهایی با فرمت EPS یا Encapsulated Post Script که برنامه نویسها از اون بدشون میاد! فایلهای تصاویر وکتور یا برداری هستند. جاش اینجا نیست اما به صورت کلی دو نوع فرمت عمده گرافیکی در کامپیوتر داریم: اول: گرافیک پیکسلی با محوریت نرم افزار فتوشاپ و فرمت فایل PSD که با بزرگنمایی تصویر شاهد افت کیفیت هستیم و دوم: گرافیک برداری با محوریت نرم افزارهای Adobe Illustrator و Corel Draw و فرمت فایلهای AI, EPS, CDR و... که با با بزرگنمایی تصویر تا هر اندازهای، به دلیل اعمال محاسبات ریاضیاتی شاهد افت کیفیت نیستیم.
نکته دوم: طبق یک آمار غیر رسمی، از هر صد نفری که تو حوزه وب فعال هستند فقط یک نفرشون توانمندی طراح وب بودن رو داره و اون ۹۹ نفر برنامه نویس هستند. تو ایران این آمار بالاست، واسه همینه که خیلی کم یه سایت درست و حسابی رو میبینیم! و وقتی میبینیم کلی حال میکنیم! توجه کنید که بهترین عملکردها در غالب یک طراحی ضعیف تجربه کاربری خوبی رو برای شما خلق نمیکنند اما بدترین ویژگیهای عملکردی در قالب یک روکش زیبا، در اکثر موارد پذیرفتنیتر هستند! شما اگه یه روزی خواستید طراح وب بشید، لطفا طراح وب خوبی باشید!
و سعی کنید به ارتفای سطح استاندارد محتوایی وب فارسی کمک کنید.
در ادامه: تشریح قدم به قدم فرآیند طراحی و توسعه یک وب سایت؛