انجمنصفحه اولجستجوی انجمن

[Milestone]

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

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

بعد از ویرایش: مسیر قرار گرفتن مطالب همون چیزی هست که در اینفوگرافیک "فرآیند طراحی و توسعه وب سایت" در پست دوم همین تاپیک می‌بینید. خواهشا در راستای به هم نخوردن نظم تاپیک از گذاشتن پست‌های غیرمرتبط با بحث فعلی و طرح سوالاتی در زمینه مباحث آتی که باعث سردرگمی کاربران می‌شه اجتناب کنید و اجازه بدید که بتونیم به کمک هم پیوستگی مطالب رو حفظ کنیم.

اینجا سعی می‌کنیم با دو رویکرد به این قضیه نگاه کنیم: مسیر کامل و مسیر میان‌بُر... مطمئنا ما اصل رو بر شیوه اول قرار می‌دیم و سعی می‌کنیم که با رویکرد کامل گرایانه جلو بریم و ببینم برای طراحی، کدنویسی و استقرار یک وب سایت چه مفاهیم مقدماتی‌ای رو باید بلد باشیم، در ادامه چه قدم‌هایی رو باید برداریم و از چه منابع و راهکارهایی برای رسیدن به هدفمون استفاده کنیم.

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

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

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

برای مثال نشست اولیه وظیفه یک بازاریاب یا افراد مجرب در حوزه کسب و کار، بررسی نیازها وظیفه فرد یا تیم تجزیه و تحلیل، طراحی ساختار بصری وب سایت توسط گرافیست، برنامه نویسی سمت کاربر یا 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 و... که با با بزرگنمایی تصویر تا هر اندازه‌ای، به دلیل اعمال محاسبات ریاضیاتی شاهد افت کیفیت نیستیم.

نکته دوم: طبق یک آمار غیر رسمی، از هر صد نفری که تو حوزه وب فعال هستند فقط یک نفرشون توانمندی طراح وب بودن رو داره و اون ۹۹ نفر برنامه نویس هستند. تو ایران این آمار بالاست، واسه همینه که خیلی کم یه سایت درست و حسابی رو می‌بینیم! و وقتی می‌بینیم کلی حال می‌کنیم! توجه کنید که بهترین عملکردها در غالب یک طراحی ضعیف تجربه کاربری خوبی رو برای شما خلق نمی‌کنند اما بدترین ویژگی‌های عملکردی در قالب یک روکش زیبا، در اکثر موارد پذیرفتنی‌تر هستند! شما اگه یه روزی خواستید طراح وب بشید، لطفا طراح وب خوبی باشید! و سعی کنید به ارتفای سطح استاندارد محتوایی وب فارسی کمک کنید.

در ادامه: تشریح قدم به قدم فرآیند طراحی و توسعه یک وب سایت؛

[Milestone]

سلام
قبل از هرچیز یک نکته: یکی از دوستان جایی فرمودند در تهیه این محتوا از منبع خاصی استفاده می‌کنید؟ در جواب عرض می‌کنم که مشخصا خیر و کلیه محتوای نوشتاری و تصویری درج شده در کلیه پست‌ها منحصرا و واژه به واژه برای "انجمن مانشت" نگارش می‌شه و مثلا همین متن بالا تا ساعت شش صبح امروز در یک بازه ۱۲ ساعته کار نوشتنش طول کشیده و اگر روزی حتی یک واژه یا یک تصویر خاص به صورت مشخص از یک وب سایت ایرانی یا خارجی نقل قول شد، در راستای حفظ حقوق ناشر اولیه و رعایت
مهمان عزیز شما قادر به مشاهده پیوندهای انجمن مانشت نمی‌باشید. جهت مشاهده پیوندها ثبت نام کنید.
، "قطعا" این موارد با ذکر منبع و احتمالا ارجاع به اون مسیر خواهد بود.

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

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

همونطور که در تصویر بالا می‌بینید، قبل از شروع فاز تجزیه و تحلیل که در اونجا با عنوان بررسی نیازها و تحقیق و بررسی ازش یاد شده فازی با عنوان "نشست اولیه" رو داریم، نشست اولیه همون جلسه‌ای هست که بعد از دریافت سفارش و موفقیت آمیز بودن پروسه بازاریابی با حضور مشتری (کارفرما) و طراح وب یا مسئول بازاریابی اون شخص یا شرکت برگزار می‌شه و شامل بحث‌هایی در مورد کلیات آغاز تا پایان پروسه طراحی وب، موارد درخواستی، شرح کسب و کار، توافقات مالی، پر کردن پرسشنامه و احتمالا عقد قرارداد هست که من قبل‌تر در قالب
مهمان عزیز شما قادر به مشاهده پیوندهای انجمن مانشت نمی‌باشید. جهت مشاهده پیوندها ثبت نام کنید.
و
مهمان عزیز شما قادر به مشاهده پیوندهای انجمن مانشت نمی‌باشید. جهت مشاهده پیوندها ثبت نام کنید.
و
مهمان عزیز شما قادر به مشاهده پیوندهای انجمن مانشت نمی‌باشید. جهت مشاهده پیوندها ثبت نام کنید.
و
مهمان عزیز شما قادر به مشاهده پیوندهای انجمن مانشت نمی‌باشید. جهت مشاهده پیوندها ثبت نام کنید.
و
مهمان عزیز شما قادر به مشاهده پیوندهای انجمن مانشت نمی‌باشید. جهت مشاهده پیوندها ثبت نام کنید.
در مانشت تا حد ممکن به کلیات این موارد اشاره داشتم.

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

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

چرا خوب تو گوگل بالا نمیاد یا ایندکس نشده صفحاتش؟ چرا ظاهر خوبی نداره؟ و به صورت کلی چرا به هیچ دردی نمی‌خوره؟ شاید حتی بریم دنبال اینکه مالک این وب سایت کیه؟ (از طریق دنبال کردن مشخصات ثبت کننده دامنه و هاست و...) و اینکه طراح و توسعه دهنده‌اش چه افرادی هستند؟ (حقیقی یا حقوقی).

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

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

--------------------------------------------------

در صورت علاقه‌مندی:
دوره ویدئویی آموزش اصول مهندسی نرم افزار - Software Engineering Essentials

مهمان عزیز شما قادر به مشاهده پیوندهای انجمن مانشت نمی‌باشید. جهت مشاهده پیوندها ثبت نام کنید.

--------------------------------------------------

نقاشی‌های خیابونی و روی دیوارها رو دیدید تاحالا؟ یا نه! پرده نویس‌ها رو که حتما دیدید چیکار می‌کنند قبل از رنگ آمیزی؟ نقشه‌های راه‌سازی یا نمای داخلی که میان و با یک مداد طرح یا نوشته اصلی رو روی اون سطح رسم می‌کنند تا به یک ذهنیت درست و در واقع یک نقشه راه مناسب دست پیدا کنند و بعد و در مراحل بعدی به جزئیات بصری برسند. مدل فرآیندی "نمونه سازی" تو درس مهندسی نرم افزار رو که یادتونه حتما؟ ما هم باید این کار رو البته به شکلی ساده‌تر و رویکری نسبتا متفاوت انجام بدیم، البته اگه به رعایت اصول و مبانی معتقد باشیم! در طراحی وب از این عمل با عنوان نمونه سازی یا Prototyping یا Sketch یا طرح دستی یاد می‌کنیم.

صفحه پنجم
مهمان عزیز شما قادر به مشاهده پیوندهای انجمن مانشت نمی‌باشید. جهت مشاهده پیوندها ثبت نام کنید.
رو ببینید! این بخشی هست که برای یه طرح سریع دستی جلوی کارفرما در نظر گرفته شده تا مثلا ساختار اصلی یک وب سایت مثلا قسمت فوقانی (Header)، بدنه (Body)، قسمت انتهایی (Footer) و احتمالا منو و زیرمنوهای آبشاری، باکس‌های کناری و... رو فقط بصورت کلی و سیاه و سفید رسم کنیم، تا هم خودمون به یک ذهنیت نسبی از اون چیزی که مشتری می‌خواد برسیم و مهم‌تر اینکه مشتری یه تصویر ذهنی پیدا کنه! چرا که به قول آقای دکتر روحانی رانکوهی در کتاب "شیوه ارائه مطالب علمی و فنی" یه تصویر برابر هزاران واژه حرف واسه گفتن داره!

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

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

تبدیل پرتوتایپ دستی به نسخه کامپیوتری:
ما اون طرح دستی رو به این نیت طراحی کردیم که در مرحله بعدی بریم و در نرم افزاری مثل فتوشاپ طرح نهایی قالب به صورت کامل و رنگی طراحی کنیم. حالا این وسط یکی میاد و می‌گه من دوست دارم این طرح دستی رو به شکل شیک‌تر و تمیزتری طراحی کنم و حتی بتونم از این حالت استاتیک درش بیارم و به صورت واکنشی طراحی‌ش کنم (لزومی هم در انجام این کار نیست)، مثلا روی یک دکمه کلیک کردم رنگش عوض بشه و این حرف‌ها!

خب ما کجاها می‌تونیم این کار رو تو کامپیوتر انجام بدیم؟ ساده‌ترین راهش نرم افزار Paint بود! یا نرم افزارهای طراحی وب به صورت بصری مثل Adobe Dreamweaver و Adobe Fireworks و... یا نرم افزارهای گرافیکی مثل Adobe Photoshop, Adobe Illustrator یا اصلا نرم افزار Visio تو مجموعه آفیس خودمون! خب، اینا همه نوعی ابزار هستند و جز مورد اول ابزارهای خوبی هم هستند اتفاقا! اما این وسط یک نرم افزار خوب و تخصصی برای انجام این کار داریم به نام Axure که ابزار خوبی رو در اختیار شما قرار می‌ده و می‌تونید استفاده خوبی ازش داشته باشید!

--------------------------------------------------

دانلود نرم افزار Axure RP Pro v.7.0.0.3173

مهمان عزیز شما قادر به مشاهده پیوندهای انجمن مانشت نمی‌باشید. جهت مشاهده پیوندها ثبت نام کنید.


آموزش نرم افزار Axure در قالب چهار فایل ویدئویی و به زبان فارسی

مهمان عزیز شما قادر به مشاهده پیوندهای انجمن مانشت نمی‌باشید. جهت مشاهده پیوندها ثبت نام کنید.


مهمان عزیز شما قادر به مشاهده پیوندهای انجمن مانشت نمی‌باشید. جهت مشاهده پیوندها ثبت نام کنید.


مهمان عزیز شما قادر به مشاهده پیوندهای انجمن مانشت نمی‌باشید. جهت مشاهده پیوندها ثبت نام کنید.


مهمان عزیز شما قادر به مشاهده پیوندهای انجمن مانشت نمی‌باشید. جهت مشاهده پیوندها ثبت نام کنید.

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

مهمان عزیز شما قادر به مشاهده پیوندهای انجمن مانشت نمی‌باشید. جهت مشاهده پیوندها ثبت نام کنید.

--------------------------------------------------

در ادامه: طراحی قالب گرافیکی یک وب سایت و هویت یک‌پارچه بصری؛

[Milestone]

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

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

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

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

نکته یک: هر چیزی که تاحالا گفته شده و از این به بعد هم گفته می‌شه با فرض اینه که شما می‌خواید همه این چیزها (کل مراحل فرآیند طراحی و توسعه یک وب سایت) رو بصورت کامل یاد بگیرید و اینکه در آینده در کدوم یک از این زمینه‌ها، یا چند تاشون یا اصلا همه‌شون بخواید فعالیت کنید رو خودتون مشخص می‌کنید.

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

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

شاید بتونیم از Adobe Photoshop و Adobe Illustrator به عنوان مطرح‌ترین نرم افزارهای تولید فایل‌های گرافیکی (به ترتیب مرتبط به
مهمان عزیز شما قادر به مشاهده پیوندهای انجمن مانشت نمی‌باشید. جهت مشاهده پیوندها ثبت نام کنید.
و
مهمان عزیز شما قادر به مشاهده پیوندهای انجمن مانشت نمی‌باشید. جهت مشاهده پیوندها ثبت نام کنید.
/ ارجاع به ویکی پدیا) یاد کنیم. شما تو هر نرم افزار گرافیکی‌ای که دلتون خواست می‌تونید قالب مد نظر رو طراحی کنید، از همین دو تا نرم افزار معروف تا
مهمان عزیز شما قادر به مشاهده پیوندهای انجمن مانشت نمی‌باشید. جهت مشاهده پیوندها ثبت نام کنید.
برای دوستان لینوکسی یا علاقه‌مند به سیستم متن باز. اما عموما به خاطر قدرت و امکانات فوق العاده زیاد از نرم افزار Adobe Photoshop برای طراحی قالب گرافیکی وب سایت استفاده می‌کنیم و در اکثر منابع آموزشی هم همین نرم افزار رو مبنا قرار خواهیم داد، پس لازمه که یه کلیاتی رو از فتوشاپ بدونیم.

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

حالا این وسط ممکنه یکی یاد بگیره که بیاد و چشم خودش رو هم آبی کنه یا اینکه موهاش رو پُر پشت کنه و بزاره تو پروفایل یکی از این شبکه‌های اجتماعی ملعون بلاد کفر! این چیزا دیگه به بحث ما مربوط نیست!!!

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

ما صرفا می‌خوایم به یک ذهنیت و طرح نهایی گرافیکی خودمون برسیم و تو مراحل بعدی که در آینده بهش می‌رسیم این قالب گرافیکی رو به کدهای HTML و CSS و... تبدیل کنیم. مثلا اگه ما یه رنگ زمینه خاکستری در فتوشاپ داریم دیگه اون رو به صورت عکس تبدیل نمی‌کنیم و بیاریم تو وب آدرس دهی کنیم! نه، ما میایم و توسط دستورات CSS اون رنگ رو به کد تبدیل می‌کنیم.

حالا ممکنه از این قالب یه چیزهایی رو هم تو سایت اصلی استفاده کنیم، مثلا همین لوگوی مانشت، همین تصویر زمینه Header برگ‌های پاییز، یا پترن‌های خیلی ریز سمت راست و چپ قالب اصلی که اگه دقت کنید این یه تصویر خیلی کوچیکه که به صورت افقی و عمودی (کاشی فرم) تکرار شده و حالت فلفلی یا کاغذ دیواری به خودش گرفته، اینا که چیزی نیستند و چند تا تصویر کوچیک و کم حجم هستند که توی همه جا تکرار شدند.

البته بعدا متوجه می‌شیم که می‌تونیم بیایم و با استفاده از تکنیک استاندارد SVG یا Scalable Vector Graphics (گرافیک برداری) تا حد زیادی این مشکل بارگزاری و البته افت کیفیت تصاویر پیکسلی وب (عمدتا با فرمت‌های JPG, PNG) به علت بزرگنمایی در صفحات نمایشی مثل سمینارها، سینماهای خانگی و... رو حل کنیم.

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

خروجی ما معمولا چنین چیزی هست.
دقت کنید که این یک خروجی تمام استاتیک و غیرواکنشی هست، مثلا اون منوی آبشاری رو که اون بالا می‌بینید به این معنی نیست که وقتی تو فتوشاپ موس رو بردیم روش اون باز بشه، نه! منظور اینه که قراره در کدنویسی کاری کنیم که این طرح در بیاد. نکته: بعد از اعمال یه سری اصلاحات و حذف نام‌ها، فایل لایه باز فتوشاپ زیر رو برای دانلود و آشنایی شما در همین مکان قرار می‌دم.

--------------------------------------------------

دانلود نرم افزار Adobe Photoshop CC 2014 v15.2.1 x86/x64

مهمان عزیز شما قادر به مشاهده پیوندهای انجمن مانشت نمی‌باشید. جهت مشاهده پیوندها ثبت نام کنید.


کتاب طراحی امور گرافیکی با رایانه آموزش و پرورش و به زبان فارسی

مهمان عزیز شما قادر به مشاهده پیوندهای انجمن مانشت نمی‌باشید. جهت مشاهده پیوندها ثبت نام کنید.

ویدئوهای آموزشی فتوشاپ از وب سایت مکتب خونه و با رویکرد پروژه محور و به زبان فارسی

مهمان عزیز شما قادر به مشاهده پیوندهای انجمن مانشت نمی‌باشید. جهت مشاهده پیوندها ثبت نام کنید.

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

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

فتوشاپر
مهمان عزیز شما قادر به مشاهده پیوندهای انجمن مانشت نمی‌باشید. جهت مشاهده پیوندها ثبت نام کنید.

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


توصیه: منبع زیاد داریم که لازم به ذکر نیست. اما توصیه من اینه که گزینه اول یعنی کتاب آموزش و پرورش رو حتما دانلود کنید، چون با مفاهیم مربوط به هنرهای تجسمی، پرسپکتیو، عناصر بصری، تعادل، تقارن (چه چیز مهمیه این تقارن!)، رنگ آمیزی و... شروع و به آموزش فتوشاپ ختم می‌شه که جهت بالا بردن دانش طراحی خوندنش حتما توصیه می‌شه؛ ضمنا توجه کنید کا ما نیاز کمی به فتوشاپ داریم، پس خودتون رو درگیرش نکنید! یک فتوشاپیست لزوما یک گرافیست نیست!

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

--------------------------------------------------

در ادامه: مسیر یادگیری و معرفی منابع آموزشی طراحی قالب وب سایت در فتوشاپ؛

[Milestone]

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

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

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

--------------------------------------------------

آموزش ویدئویی صفر تا صد طراحی قالب وب سایت در نرم افزار فتوشاپ و به زبان فارسی (با سه کیفیت)

مهمان عزیز شما قادر به مشاهده پیوندهای انجمن مانشت نمی‌باشید. جهت مشاهده پیوندها ثبت نام کنید.


حتما دانلود کنید، نهایتا قالب شما به شکل زیر در میاد. به زودی لینک دانلود ویدئوهای خوب مرتبط رو در زیر همین لینک درج می‌کنم.

کتاب الکترونیکی طراحی قالب وب سایت در نرم افزار فتوشاپ / مدل یک

مهمان عزیز شما قادر به مشاهده پیوندهای انجمن مانشت نمی‌باشید. جهت مشاهده پیوندها ثبت نام کنید.

کتاب الکترونیکی طراحی قالب وب سایت در نرم افزار فتوشاپ / مدل دو

مهمان عزیز شما قادر به مشاهده پیوندهای انجمن مانشت نمی‌باشید. جهت مشاهده پیوندها ثبت نام کنید.

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

مهمان عزیز شما قادر به مشاهده پیوندهای انجمن مانشت نمی‌باشید. جهت مشاهده پیوندها ثبت نام کنید.

کتاب الکترونیکی طراحی قالب وب سایت در نرم افزار فتوشاپ / مدل چهار

مهمان عزیز شما قادر به مشاهده پیوندهای انجمن مانشت نمی‌باشید. جهت مشاهده پیوندها ثبت نام کنید.

تعدادی آموزش آنلاین فارسی:


مهمان عزیز شما قادر به مشاهده پیوندهای انجمن مانشت نمی‌باشید. جهت مشاهده پیوندها ثبت نام کنید.


مهمان عزیز شما قادر به مشاهده پیوندهای انجمن مانشت نمی‌باشید. جهت مشاهده پیوندها ثبت نام کنید.


مهمان عزیز شما قادر به مشاهده پیوندهای انجمن مانشت نمی‌باشید. جهت مشاهده پیوندها ثبت نام کنید.


مهمان عزیز شما قادر به مشاهده پیوندهای انجمن مانشت نمی‌باشید. جهت مشاهده پیوندها ثبت نام کنید.


مهمان عزیز شما قادر به مشاهده پیوندهای انجمن مانشت نمی‌باشید. جهت مشاهده پیوندها ثبت نام کنید.



مهمان عزیز شما قادر به مشاهده پیوندهای انجمن مانشت نمی‌باشید. جهت مشاهده پیوندها ثبت نام کنید.


مهمان عزیز شما قادر به مشاهده پیوندهای انجمن مانشت نمی‌باشید. جهت مشاهده پیوندها ثبت نام کنید.


مهمان عزیز شما قادر به مشاهده پیوندهای انجمن مانشت نمی‌باشید. جهت مشاهده پیوندها ثبت نام کنید.


مهمان عزیز شما قادر به مشاهده پیوندهای انجمن مانشت نمی‌باشید. جهت مشاهده پیوندها ثبت نام کنید.


مهمان عزیز شما قادر به مشاهده پیوندهای انجمن مانشت نمی‌باشید. جهت مشاهده پیوندها ثبت نام کنید.



مهمان عزیز شما قادر به مشاهده پیوندهای انجمن مانشت نمی‌باشید. جهت مشاهده پیوندها ثبت نام کنید.


مهمان عزیز شما قادر به مشاهده پیوندهای انجمن مانشت نمی‌باشید. جهت مشاهده پیوندها ثبت نام کنید.


مهمان عزیز شما قادر به مشاهده پیوندهای انجمن مانشت نمی‌باشید. جهت مشاهده پیوندها ثبت نام کنید.


مهمان عزیز شما قادر به مشاهده پیوندهای انجمن مانشت نمی‌باشید. جهت مشاهده پیوندها ثبت نام کنید.


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

--------------------------------------------------

در ادامه: مفاهیم طراحی تجربه کاربری (UXD)، طراحی رابط کاربری (UID)، کاربردپذیری (Usability) و...؛

[Milestone]

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

معروف‌ترین وب سایت‌های داخلی دانلود ابزار و فایل‌های آماده گرافیکی:

رضا گرافیک
مهمان عزیز شما قادر به مشاهده پیوندهای انجمن مانشت نمی‌باشید. جهت مشاهده پیوندها ثبت نام کنید.

گرافیران
مهمان عزیز شما قادر به مشاهده پیوندهای انجمن مانشت نمی‌باشید. جهت مشاهده پیوندها ثبت نام کنید.

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

تک تمپ
مهمان عزیز شما قادر به مشاهده پیوندهای انجمن مانشت نمی‌باشید. جهت مشاهده پیوندها ثبت نام کنید.

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

تربچه!
مهمان عزیز شما قادر به مشاهده پیوندهای انجمن مانشت نمی‌باشید. جهت مشاهده پیوندها ثبت نام کنید.


--------------------------------------------------

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

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

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

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

اما با توجه به اینکه الان تقریبا هر صنعتی از حالت انحصاری خارج شده و مطمئنا ما هم تنها طراحان وب تو دنیا نیستیم، اینکه بتونیم یه حس و تجربه خوب در کاربران رو ایجاد کنیم یه امتیاز بزرگه! اینکه بتونیم نگهش داریم! اینکه بتونیم محیط خوبی رو براش فراهم کنیم که دیگه نره سراغ بقیه! در واقع ریزش مخاطب نداشته باشیم، چون اگه کاربر حس کنه راحت نیست می‌ره و پشت سرش رو هم نگاه نمی‌کنه! واسه همینه که میایم و از مفهومی به اسم تجربه کاربری استفاده می‌کنیم. طبق تعریف ویکی‌پدیا: "تجربهٔ کاربری همان خاطره‌ای است که با استفاده از یک محصول، سامانه یا سرویس در ذهن کاربر نقش می‌بندد".

تو طراحی تجربه کاربری سعی می‌شه، تعامل خوبی با کاربر برقرار بشه > طراحی تعاملی یا Interaction Design ، تو طراحی تجربه کاربری سعی می‌شه، رابط دیداری خوبی برای کاربر فراهم بشه > طراحی رابط کاربری یا User Interface Design ، تو طراحی تجربه کاربری سعی می‌شه به شیوه‌ای موثر بتونیم امکانات مختلف رو در دسترس کاربران قرار بدیم که باعث افزایش بهره وری و کارایی بشه > کاربرد پذیری یا Usability ؛

تو طراحی تجربه کاربری یکی از اهداف اینه که سیستمی برای کاربر فراهم بشه که بتونه خیلی راحت درکش کنه و بدون نیاز به منابع جانبی از امکاناتش استفاده کنه > قابلیت دسترسی یا Accessibility ، تو طراحی تجربه کاربری سعی می‌شه تا اطلاعات نوعی طبقه بندی بشه تا دسترسی بهش برای کاربر به سهولت امکان‌پذیر باشه > معماری اطلاعات یا Information Architecture و... که ما در اینجا فقط به مبحث رابط کاربری جهت اهمیتش و وابستگی مستقیمش به این تاپیک اشاره می‌کنیم و بقیه رو به مطالعه منابع مربوط ارجاع می‌دیم.

--------------------------------------------------

دوره های آموزشی ویدئویی اصول تجربه کاربری - User experience (UX) Tutorial Series

مهمان عزیز شما قادر به مشاهده پیوندهای انجمن مانشت نمی‌باشید. جهت مشاهده پیوندها ثبت نام کنید.

کتاب The Elements of User Experience از Josse James Garrett

مهمان عزیز شما قادر به مشاهده پیوندهای انجمن مانشت نمی‌باشید. جهت مشاهده پیوندها ثبت نام کنید.

--------------------------------------------------

طراحی رابط کاربری (User Interface Design) به عنوان یک بحث عام نرم افراری به حساب میاد که تو همه زمینه‌های طراحی تعاملی (Interactive Design) از موبایل، چندرسانه‌ای، کاربردی، تحت شبکه و وب تا نمایشگر یخچال، خودرو و ساعت‌های دیجیتال دارای کاربرد هست.

تو دنیای نرم افزار به طراح رابط کاربری عموما Visual Designer گفته می‌شه و حیطه وظایفش از کار با ابزارها و تکنولوژی‌های بصری برنامه‌های کاربردی (مثل WPF یا Windows Presentation Foundation مایکروسافت و Swing جاوا)، نرم افزارهای طراحی واسط App های موبایل، کدنویسی سمت کاربر (مثل HTML و CSS و Javascript) در وب تا علوم میان رشته‌ای مثل گرافیک، علوم شناختی و مدیریت امتداد پیدا می‌کنه؛

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

چرا که گرافیست در قالب یک رشته هنری تو همون حوزه استاتیک خودش باقی می‌مونه اما طراح رابط کاربری در قالب یک رشته علمی، وظیفه مدیریت کنش‌های تعاملی رو هم بر عهده داره؛ وظایفی که اون رو وارد حوزه کدنویسی و مدیریت رویدادها می‌کنه؛

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

یا اون نوارهای پیشرفت بر حسب درصد توی فرآیند نصب یک نرم افزار یا حتی در یک مفهوم سطح پایین، صدای اون خانومی که وقتی شب‌ها با شاتل یا پارس آنلاین و... تماس می‌گیرید هر ۳۰ ثانیه اعلام می‌کنه" "شما نفر n اُم در صف انتظار هستید!" این‌ها اصلا کارهای سختی نیستند! ولی در اکثر موارد به شکل دلنشینی آستانه صبر شما رو بالا می‌برند و بدون اینکه شما رو درگیر مسائل درونی سیستم مثل حافظه و پردازنده و یا بار ترافیکی کنند، سادگی رو براتون به ارمغان میارن؛

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

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

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

--------------------------------------------------

کتاب Design For Software از Erik Klimczak

مهمان عزیز شما قادر به مشاهده پیوندهای انجمن مانشت نمی‌باشید. جهت مشاهده پیوندها ثبت نام کنید.

کتاب Designing Web Interfaces از Theresa Neil و Bill Scott

مهمان عزیز شما قادر به مشاهده پیوندهای انجمن مانشت نمی‌باشید. جهت مشاهده پیوندها ثبت نام کنید.

کتاب Microinteractions یا ریز تعامل‌ها از Dan Saffer

مهمان عزیز شما قادر به مشاهده پیوندهای انجمن مانشت نمی‌باشید. جهت مشاهده پیوندها ثبت نام کنید.

کتاب رنگ‌ها از مسیب استوار

مهمان عزیز شما قادر به مشاهده پیوندهای انجمن مانشت نمی‌باشید. جهت مشاهده پیوندها ثبت نام کنید.

منابع آموزشی ویدئویی اجرای رابط کاربری

دوره های آموزشی طراحی عناصر رابط کاربری صفحات وب در فتوشاپ - UI Design for the Web Tutorial Series

مهمان عزیز شما قادر به مشاهده پیوندهای انجمن مانشت نمی‌باشید. جهت مشاهده پیوندها ثبت نام کنید.

دوره آموزشی طراحی و توسعه رابط کاربری به سبک تخت - Flat UI Design and Development

مهمان عزیز شما قادر به مشاهده پیوندهای انجمن مانشت نمی‌باشید. جهت مشاهده پیوندها ثبت نام کنید.

--------------------------------------------------

در ادامه: آغاز فرآیند اصلی طراحی وب و کدنویسی سمت کاربر؛

[Milestone]

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

بیشتر آموزش‌های موجود در اینترنت و یا کتاب‌های چاپ شده موجود در بازار از همین فاز (از اینجا به بعد) شروع به آموزش می‌کنند و مستقیما وارد حوزه کدنویسی HTML و CSS و... می‌شن، هدف ما اما این بود که با اضافه کردن اصول اولیه، تا حد قابل قبولی این راهنما رو قاعده‌مندتر کنیم و از دیدگاه مهندسی به مسیر نگاه کنیم.

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

کدنویسی سمت کاربر (Client Side) / استاتیک (Static)
چیزی که عمدتا "طراحان وب" روی اون متمرکز هستند. در این مرحله ما بیشتر به طراحی User Interface و مشخصا نحوه تعامل وب سایت با کاربر می‌پردازیم، در واقع قراره اون قالب گرافیکی خودمون رو تبدیل به کد کنیم. یعنی وب سایت ما صرفا با کاربر طرفه و هدف نهایی هم اینه که یک سری محتوا رو بهش نشون بده، در واقع مفسر کدهای سمت کاربر ما مرورگری هست که داریم اون وب سایت رو باهاش مشاهده می‌کنیم.

در یک مثال کوچیک وقتی در زبان نشانه گذاری HTML تو تگ Title می نویسیم: "Manesht Forum" این مرورگر هست که این قطعه کد رو تفسیر می‌کنه و نهایتا نام اون Tab در بالای مرورگر شما به این اسم تغییر پیدا می‌کنه. پس می‌بینیم که هیچ نیازی به سرور نیست. در واقع تو Client Side که اصلا ما بانک اطلاعاتی نداریم که بخوایم تراکنشی مابین بانک و سرور داشته باشیم، بنابراین چیزهایی مثل Register یا Login هم نداریم.

ما تو کدنویسی سمت کاربر با چیزهایی مثل زبان نشانه گذاری HTML و در دنباله‌اش XHTML ، زبان نشانه گذاری XML ، شیوه نامه CSS ، زبان برنامه نویسی Javascript ، کتاب‌خانه jQuery به عنوان محبوب‌ترین کتاب‌خانه Javascript و معماری Ajax و تکنولوژی‌های مرتبط با اون سر و کار داریم که مجموعه این موارد برای ساختار یا قالب‌بندی صفحات، تبادل داده‌ها، نمایش استایل‌ها (رنگ‌ها، فونت‌ها و...)، ایجاد تعامل، پویایی و مدیریت اون‌ها بین اشیاء به کار برده می‌شن که در پست بعدی به تفکیک در موردشون صحبت می‌کنیم.

کدنویسی سمت سرور (Server Side) / داینامیک (Dynamic)
چیزی که عمدتا "توسعه دهندگان وب" روی اون متمرکز هستند. در سمت کاربر صحبت ما سر "طراحی و کدنویسی" صفحات وب بود، ولی در سمت سرور ما در مورد "برنامه نویسی" صفحات یا سرویس‌های وب صحبت می‌کنیم، جایی که صحبت سر کار با داده‌هاست، چیزی که کاربر عموما متوجه اون نمی‌شه! چرا که کلیه عملیات مثل تراکنش‌های مربوط به بانک اطلاعاتی در پشت صحنه انجام می‌شه و صرفا یک پاسخ به عنوان خروجی به سمت کاربر برمی‌گرده، در واقع مفسر کدهای ما در اینجا خود سرور هست.

در یک مثال کوچیک منظور اینه که وقتی شما میاید و فرم کنکور دکتری ۹۵ رو در سایت سازمان سنجش پر می‌کنید و روی دکمه ارسال کلیک می‌کنید، اطلاعات مربوط که در سمت کاربر یا مرورگر شما قرار داره، بدون اینکه شما چیزی رو ببینید توسط یک زبان سمت سرور مثل PHP به بانک اطلاعاتی سازمان سنجش فرستاده می‌شه و چیزی که شما می‌بینید صرفا یکی دو تا جمله‌ست که مثلا: ثبت نام شما با موفقیت انجام شد! کد رهگیری: CNF80055DNF8BCNF ؛

ما تو برنامه نویسی سمت سرور با زبان‌های برنامه نویسی مختلفی مثل PHP و ASP.NET به عنوان دو زبان اصلی و در ادامه زبان‌های دیگه‌ای مثل JSP جاوا، Python و Ruby و CSharp.Net و VB.Net و Perl و... به همراه الگوهای برنامه نویسی مواجه هستیم. از طرف دیگه بانک‌های اطلاعاتی مثل MySql و SQL و NoSql و تکنولوژی‌های دسترسی به داده رو داریم. از طرف دیگه بحث سیستم‌های مدیریت محتوای متن باز مثل وردپرس، جوملا، دروپال و... رو داریم. از طرف دیگه مباحث بهینه سازی برای موتورهای جستجوگر (SEO)، مباحث افزایش کارایی، امنیت، احراز هویت، فشرده سازی، رمزنگاری و... رو هم به عنوان مباحث پیش‌رفته داریم.

نکته: یه طراح لازمه که همه یا بخش عمده‌ای از موارد معرفی شده در حوزه Client Side رو بدونه، چون همگی به هم مرتبط هستند. اما یه توسعه دهنده لزومی نداره که هم PHP رو یاد بگیره هم ASP.NET و هم SQL و هم NoSql و... در واقع اونجا ما یه دو یا چندراهی داریم که تو مرحله پنجم که در مورد Server Side هست، کاملا بهش می‌پردازیم.

از این به بعد می‌شه سه رویکرد رو در زمینه یادگیری داشت:

- یادگیری All in One
- یادگیری گام به گام با منابع مختلف
- یادگیری ترکیبی

در رویکرد اول به منابعی اشاره می‌کنیم که کل مباحث رو به صورت فشرده (از مباخث سمت کاربر تا سمت سرور) در یک کتاب یا ویدئوی آموزشی ذکر می‌کنند و در واقع یک مسیر خوب رو پیش روی ما قرار می‌دن که بدونیم داریم چیکار می‌کنیم و باید با چه ابزارها و... کار کنیم. در رویکرد دوم برای هر دوره آموزشی مثل HTML و CSS چند منبع جداگانه معرفی می‌شه که افرادی که مثلا می‌دونند قبلا یه مهارتی رو دارندف از کجا باید شروع کنند. تو رویکرد سوم (پیشنهادی) افرادی که منابع All in One زو مطالعه کردند می‌تونن بیان و با استفاده منابع معرفی شده توی رویکرد دوم، مهارت‌های خودشون رو تو اون حوزه خاص توسعه بدن؛

نکته: در این پست سعی می‌شه تا یه سری از منابع خیلی خوب در زمینه یادگیری All in One معرفی بشه و در ادامه تاپیک در مورد تک تک منابع صحبت می‌کنیم. قرار نیست شما همه این منابع رو بخونید، پیشنهاد اینه که یه منبع اصلی و یک منبع مکمل یا اصلا هرجور که دوست دارید! ضمنا هر کاری هم که می‌کنید، از هر جایی که می‌خونید هر خطی که می‌خونید رو باید تمرین کنید! روی تخت خواب نه! روی کاغذ نه!! روی خود سیستم! باید حتما حتما حتما با موس طراحی کنید و با کی‌برد کد بزنید! این تنها راهشه! وگرنه به درد نمی‌خوره، وگرنه فراموشی دیر نیست...

--------------------------------------------------

دوره آموزشی ویدئویی برنامه نویسی مبتنی بر وب، محمد صالحه، دانشگاه صنعتی شریف

مهمان عزیز شما قادر به مشاهده پیوندهای انجمن مانشت نمی‌باشید. جهت مشاهده پیوندها ثبت نام کنید.


توضیح: برای کسی که می‌خواد شروع کنه این دوره آموزشی خیلی خوبه! همه چیز از صفر شروع می‌شه و منابع و ابزارهای مورد استفاده در موردشون بحث می‌شه و از هر چیزی تقریبا یکی دو جلسه روش کار انجام می‌شه و تمرین و... که مسیر رو خیلی خوب بهتون نشون می‌ده و بهترین منبع ویدئویی فارسی "قابل دانلود" که فعلا می‌شه معرفی کرد به نظر من همین هست.

نقل قول از مکتب خونه: در درس برنامه‌نویسی وب سعی شده با یک دید کاربردی، مفاهیم، روش ها، استاندارد‌ها و تکنولوژی‌های موجود در زمینه‌ی برنامه نویسی وب معرفی شده و آموزش داده شود. در ابتدای درس مفاهیم مقدماتی وب و استاندارد‌های HTML، CSS و زبان Java Script معرفی می‌شوند. در ادامه درس در کنار آموزش الگوهای برنامه نویسی وب و معماری‌های برنامه نویسی Enterprise، زبان PHP آموزش داده می‌شود. در ادامه معرفی کوتاهی از مفهوم پایگاه داده‌های رابطه‌ای و زبان SQL گفته شده و سپس مفاهیم پیشرفته‌تر در زمینه‌ی برنامه‌نویسی وب به همراه فریم‌ورک Symfony2 ارایه می‌شود.

کتاب طراحی صفحات وب آموزش و پرورش در سه جلد از سطح مقدماتی تا پیشرفته

مهمان عزیز شما قادر به مشاهده پیوندهای انجمن مانشت نمی‌باشید. جهت مشاهده پیوندها ثبت نام کنید.


توضیح: از اونجا که این کتاب‌ها برای دانش آموزان دبیرستان تالیف می‌شن، پس خوندن اون‌ها برای رده‌های تحصیلی بالاتر خیلی ساده‌ست و خوبی اون‌ها هم اینه که تقریبا به تمامی مطالب اون چارچوب اون هم به زبان اشاره می‌کنن. توی این مجموعه مطالبی در زمینه: مفاهیم مقدماتی، اصول طراحی صفحات وب، ساخت المان‌ها، طرح بندی و قالب بندی توسط HTML و CSS ، کار با نرم افزار Dreamweaver ، تعریف وب سایت، کار با محتوا، جمع آوری محتوا با فرم‌ها، کار با Javascript و اشیاء، تولید صفحات پویا، کار با پایگاه داده MySql ، کار با Apache و PHP ، برقراری ارتباط با کاربر، ارزیابی صفحات وب و... رو می‌خونیم.

کتاب Web Design All-in-One For Dummies از Sue Jenkins

مهمان عزیز شما قادر به مشاهده پیوندهای انجمن مانشت نمی‌باشید. جهت مشاهده پیوندها ثبت نام کنید.


توضیح: انتشارات For Dummies در جهان به تولید کتاب‌های غیر پیچیده و به زبان خیلی ساده معروفه. تو این کتاب ۶۹۱ صفحه‌ای می‌تونیم در مورد مباحثی مثل: مفاهیم مقدماتی، طرح یک نقشه، ابزارها، طراحی گرافیک، سازماندهی المان‌ها و محتوا، مباحث سمت سرور، استانداردهای تولید صفحات وب، تست و ارزیابی، اعتبارسنجی، ثبت دامنه و فضای میزبانی، انتشار صفحات وب، بهینه سازی صفحات برای موتورهای جستجوگر و... رو بخونیم و تمرین کنیم.

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

مهمان عزیز شما قادر به مشاهده پیوندهای انجمن مانشت نمی‌باشید. جهت مشاهده پیوندها ثبت نام کنید.


توضیح: این شاید بهترین وب سایتی باشه که می‌شه داخلش به صورت آنلاین از Client Side شروع کرد و خوند و حتی همون داخل تمرین کرد و به Server Side رفت و در انتها به پیاده‌سازی رسید. فقط کافیه از منوی سمت چپ روی اولین موضوع مثلا HTML کلیک کنید تا به بخش اختصاصی اون برید و بعد کل مراحل رو از بالای صفحه اجرا کنید و بیاین پایین و بعد صفحه بعد و... تا کل اون بخش رو به پایان برسونید و بعد همین روال برای CSS و... ؛ خیلی خلاصه، مفید و کاربردی همه چیز رو گفته و در کل خیلی خوبه!

--------------------------------------------------

در ادامه: تشریح کامل برنامه نویسی سمت کاربر (مرحله چهار) و معرفی منابع به صورت جزء به جزء؛

[Milestone]

سلام
من فکر می‌کنم منابع قبلی واسه شروع و تسلط بر کلیات خیلی خوبن! اون ویدئوهای شریف رو می‌شه زود تموم کردم (پیشنهاد می‌کنم) و وب سایت W3School رو هم همیشه به عنوان یه مرجع کمکی همراه داشت و بهش رجوع کرد. خب حالا طبق رویکرد دوم بریم سر تک تک منابع؛ اینجا واسه هر مبحث یک کتاب فارسی برای یادگیری و یک کتاب تمرینی هم از انتشارات Sitepoint معرفی می‌کنم، چون واقعا خیلی خوب، خوندنی و کاربردیه کتاب‌هاش؛

ما تو همه این زمینه‌های وب کلی منبع نوشتاری و ویدئویی خوب داریم که اختلاف زیادی هم با هم ندارن و لازم نیست تو انتخابشون وسواس داشته باشیم، فقط کافیه شروع کنیم! وگرنه کلی کتاب زبان اصلی خوب از انتشارات دیگه مثل OReilly و Wrox و Packt و Apress و Wiley و... رو در دسترس داریم. فقط کافیه یه کم که راه افتادیم و دیدیم چی به چیه، تو Google جستجو کنیم. مثلا کتاب HTML داریم مخصوص توسعه Game ، مخصوص App های موبایل و... . اینارو بعدا خودتون دنبالش می‌رید و راحت می‌تونید پیداشون کنید، فعلا فقط به اصل کار می‌پردازیم.

گام اول: زبان نشانه گذاری HTML / HyperText Markup Language
این زبان در کنار CSS هستهٔ فناوری ساخت صفحه‌های وب هستند. HTML زبان توصیف ساختار صفحه‌های وب است. زبانی‌است برای نشانه‌گذاری ابرمتن که برای تدوین قالب و طراحی صفحه‌های وب به کار می‌برند. دستورعمل‌های این زبان، برچسب (Tag) نام دارند که محتوای یک صفحهٔ وب، با آن‌ها، نشانه‌گذاری شده و بدین‌ترتیب، نحوهٔ نمایش آن صفحه برای مرورگرهای وب، توصیف می‌شود.
مهمان عزیز شما قادر به مشاهده پیوندهای انجمن مانشت نمی‌باشید. جهت مشاهده پیوندها ثبت نام کنید.

کتاب مرجع آموزش HTML و XHTML از احمد بادپی

مهمان عزیز شما قادر به مشاهده پیوندهای انجمن مانشت نمی‌باشید. جهت مشاهده پیوندها ثبت نام کنید.

کتاب Build Your Own Website The Right Way Using HTML & CSS از Ian Lloyd

مهمان عزیز شما قادر به مشاهده پیوندهای انجمن مانشت نمی‌باشید. جهت مشاهده پیوندها ثبت نام کنید.

--------------------------------------------------

گام دوم: شیوه نامه CSS / Cascading Style Sheets
این شیوه نامه در کنار HTML هستهٔ فناوری ساخت صفحه‌های وب هستند. CSS روشی ساده برای نمایش چیدمان و جلوه‌های تصویری (مانند نوع قلم، رنگ و اندازه‌ها) بر صفحه‌های وب است. شیوه‌نامهٔ آبشاری از جنس زبان‌های نشانه‌گذاری، با ساختار متن سادهٔ رایانه هستند و درون هرکدام، دستورهایی آبشار مانند و پی‌درپی، برای چگونگی نمایش هر صفحه وب افزوده می‌شود.
مهمان عزیز شما قادر به مشاهده پیوندهای انجمن مانشت نمی‌باشید. جهت مشاهده پیوندها ثبت نام کنید.

کتاب آموزش کاربردی CSS از فردوس رسولی

مهمان عزیز شما قادر به مشاهده پیوندهای انجمن مانشت نمی‌باشید. جهت مشاهده پیوندها ثبت نام کنید.

کتاب The CSS3 Anthology از Rachel Andrew

مهمان عزیز شما قادر به مشاهده پیوندهای انجمن مانشت نمی‌باشید. جهت مشاهده پیوندها ثبت نام کنید.

--------------------------------------------------

گام سوم: زبان برنامه نویسی Javascript
جاوااسکریپت زبان برنامه نویسی اسکریپت مبتی بر اشیاء است. علیرغم اشتباه عمومی، زبان جاوا اسکریت با زبان جاوا ارتباطی ندارد. این زبان می‌تواند هم به صورت ساخت یافته و هم به صورت شی گرا مورد استفاده قرار گیرد. در این زبان اشیاء با اضافه شدن متدها و خصوصیات پویا به اشیاء خالی ساخته می‌شوند. کاربرد گسترده این زبان در سایت‌ها و صفحات اینترنی می‌باشد و به کمک این زبان می‌توان به اشیاء داخل صفحات HTML دسترسی پیدا کرد و آنها را تغییر داد. به همین علت برای پویا نمایی در سمت کاربر، از این زبان استفاده می‌شود.
مهمان عزیز شما قادر به مشاهده پیوندهای انجمن مانشت نمی‌باشید. جهت مشاهده پیوندها ثبت نام کنید.

کتاب آموزش کاربردی Javascript از احمد بادپی

مهمان عزیز شما قادر به مشاهده پیوندهای انجمن مانشت نمی‌باشید. جهت مشاهده پیوندها ثبت نام کنید.

کتاب Simply JavaScript از Kevin Yank و Cameron Adams

مهمان عزیز شما قادر به مشاهده پیوندهای انجمن مانشت نمی‌باشید. جهت مشاهده پیوندها ثبت نام کنید.

--------------------------------------------------

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

کتاب مرجع کامل jQuery از هیمن حسین پناه و آرمان فیضی

مهمان عزیز شما قادر به مشاهده پیوندهای انجمن مانشت نمی‌باشید. جهت مشاهده پیوندها ثبت نام کنید.

کتاب jQuery: Novice to Ninja از Earle Castledine و Craig Sharkie

مهمان عزیز شما قادر به مشاهده پیوندهای انجمن مانشت نمی‌باشید. جهت مشاهده پیوندها ثبت نام کنید.

--------------------------------------------------

گام پنجم: تثبیت مهارت‌ها در قالب پروژه
بعد از یادگیری HTML و CSS می‌تونیم ادعا کنیم که می‌تونیم یک قالب گرافیکی که قبلا برامون طراحی کردند یا خودمون طراحی کردیم رو به این کدها تبدیل کنیم. برای این کار حداقل چیزهایی که نیازه یادگیری نرم افزاری گرافیکی مثل فتوشاپ و HTML و CSS و یه مقداری Javascript هست که ما الان بلدیم! پس با انجام پروژه‌های مشابه می‌تونیم به تسلط خوبی برسیم. چون باید زیاد تمرین کنیم، زیاد منبع معرفی می‌شه؛ البته منابع خوب؛

منبع اول: آموزش ویدئویی طراحی وب از صفر (ساخت قالب فتوشاپ + تبدیل به کدهای HTML و CSS و Javascript) از رابین وب

مهمان عزیز شما قادر به مشاهده پیوندهای انجمن مانشت نمی‌باشید. جهت مشاهده پیوندها ثبت نام کنید.


نکته: این ویدئوهای آموزشی احتمالا کامل‌ترین منبع آموزش تصویری و فارسی تبدیل قالب فتوشاپ به صفحات وب باشن، فقط توجه کنید که این آموزش با عنوان "طراحی قالب وردپرس" نام گذاری شده و این مهم نیست. چرا که فاز اول طراحی قالب همه سیستم‌ها ابتدا از فتوشاپ و HTML و CSS و Javascript به عنوان موارد Client Side گذر می‌کنه و بعدش برای Server Side تصمیم گرفته می‌شه باید چیکار کرد که مثلا این آموزش از یه جایی به بعد و تموم کردن فاز Client Side رفته سمت سیستم وردپرس؛ پس فقط اولش مهم هست. طرح وب سایت کار شده هم به صورت زیر خواهد بود.

منبع دوم: کتاب آموزش HTML5 و CSS3 در قالب پروژه از Alexis Goldstein و Louis Lazaris و Estelle Weyl

مهمان عزیز شما قادر به مشاهده پیوندهای انجمن مانشت نمی‌باشید. جهت مشاهده پیوندها ثبت نام کنید.

ضمنا تو این کتاب به فارسی هم ترجمه شده و بخشی از اون رو می‌تونید از
مهمان عزیز شما قادر به مشاهده پیوندهای انجمن مانشت نمی‌باشید. جهت مشاهده پیوندها ثبت نام کنید.
دانلود کنید و ببینید چطوریه! هدف نهایی پروژه مطرح شده در این کتاب طراحی یک وب سایت به
مهمان عزیز شما قادر به مشاهده پیوندهای انجمن مانشت نمی‌باشید. جهت مشاهده پیوندها ثبت نام کنید.
هست، ضمنا صفحه اختصاصی این کتاب در سایت مترجم رو می‌تونید در
مهمان عزیز شما قادر به مشاهده پیوندهای انجمن مانشت نمی‌باشید. جهت مشاهده پیوندها ثبت نام کنید.
ببینید. من ترجمه این کتاب رو دارم، نسبت به بقیه کتاب‌های مرتبطی که دیدم، خوب ترجمه شده و خیلی کاربردیه؛ تو این کتاب هدف اینه که با یک تیر بشه دو نشون رو زد! هم بتونیم یه پلی بزنیم از HTML4 و CSS2 به HTML5 و CSS3 و هم یک پروژه در این قالب انجام بدیم.

منبع سوم: کتاب آموزش تبدیل قالب فتوشاپ به صفحات وب از Jeffrey Way + فایل‌های کامل تمرینات و خروجی نهایی وب سایت

مهمان عزیز شما قادر به مشاهده پیوندهای انجمن مانشت نمی‌باشید. جهت مشاهده پیوندها ثبت نام کنید.

در این دوره آموزشی خروجی نهایی پروژه به شکل زیر خواهد بود:

منبع چهارم: کتاب خودآموز طراحی وب به صورت عملی (تبدیل قالب فتوشاپ به صفحات وب) از حامد تکمیل

مهمان عزیز شما قادر به مشاهده پیوندهای انجمن مانشت نمی‌باشید. جهت مشاهده پیوندها ثبت نام کنید.

منبع پنجم: آموزش طراحی وب سایت در فتوشاپ و تبدیل آن به صفحات وب از TutsPlus

مهمان عزیز شما قادر به مشاهده پیوندهای انجمن مانشت نمی‌باشید. جهت مشاهده پیوندها ثبت نام کنید.


منبع ششم: آموزش طراحی وب سایت تجاری و تبدیل قالب فتوشاپ به صفحات وب از TutsPlus

مهمان عزیز شما قادر به مشاهده پیوندهای انجمن مانشت نمی‌باشید. جهت مشاهده پیوندها ثبت نام کنید.


--------------------------------------------------

در ادامه: زبان نشانه گذاری XML و معماری Ajax

[ehsansjs]

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

[Milestone]

(۱۲ فروردین ۱۳۹۴ ۰۷:۴۸ ب.ظ)ehsansjs نوشته شده توسط:  به نظرتون من اگه بخام واسه شروع کار یه سایت شخصی را بندازم که هم واسه خودم مشتری جذب کنم هم نمونه کارم بشه مثلا درباره چی باشه؟ یعنی محتوا چی باشه آیا به صورت استاتیک باشه یا داینامیک؟ به قول خودتو نمیخام یه نفر که اومد تو سایت پشیمون بشه یه وخ!
ممنون

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

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

اما در مورد وب سایت‌های استاتیک و داینامیک؛
خوب شد به این مورد اشاره کردید. بهتره به عنوان یک نکته آموزشی بهش اشاره کنیم. وب سایت‌های استاتیک یعنی چی؟ عموما یعنی ما سمت Client Side موندیم و نرفتیم سمت Server Side و بانک اطلاعاتی، یعنی مثل مانشت کنترل پنل و حساب کاربری نداریم که خیلی راحت تو این ویرایش‌گر یه چیزی بنویسم و روی "ارسال پاسخ" کلیک کنم و دو ثانیه بعد شما ببینید! مانشت یه وب سایت داینامیکه که یه CMS برای سطوح مختلف کاربرهاش از ساده تا مدیران مختلف با دسترسی‌های مختلف ایجاد کرده و مَنِ کاربر بدون نیاز به دونستن دانش کدنویسی از مانشت استفاده می‌کنم.

یه وب سایت استاتیک یا ایستا شامل یه سری فایل کد مربوط به HTML و CSS و Javascript به همراه نوشته و فایل‌های پیوست (تصویر، ویدئو و...) هست که توسط اون کدها فراخوانی و آدرس‌دهی می‌شن (مثلا می‌گیم آدرس این عکس اینجاست و اون فایل PDF هم اونجاست!) که همه این‌ها رو در قالب یک پکیج روی یه فضای میزبانی قرار می‌دیم و معمولا وب سایت‌هایی رو اینجوری پیاده می‌کنیم که نیازی به به روزآوری نداشته باشند! مثلا سالی یکی دو بار اونم یه تغییر تو شماره تماس و دو تا تصویر... در واقع وب سایت‌های استاتیک برای به روز آوری طراحی نمی‌شن! یک بار برای همیشه و اون هم توسط کسی که به کد آشناست.

مثلا اگه بخوام تو تا پاراگراف و چهار تا عکس وارد وب سایت کنم دیگه ویرایشگری مثل مانشت رو ندارم! (عموما) پس باید بیام صفحه HTML مربوط رو باز کنم و دو باز از تگ <P> واسه پاراگراف‌هام و چهار بار از تگ <IMG> واسه تصاویرم استفاده کنم! بعد بلند شم برم فایل CSS رو باز کنم و به این‌ها استایل بدم که مثلا فونت نوشته من رو بزار Nazanin یا گوشه‌های تصاویر من رو سایه بنداز! یا احتمالا برم یه سری هم به فایل پیوست شده Javascript هم بزنم و یه کدی هم بهش اضافه کنم که مثلا وقتی یکی روی تصویرم کلیک راست کرد و خواست کپی کنه اون رو یه پیغام بهش بده که آقا! Copyright داره تصویر! و مشابه همین موارد؛

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

الان دیگه تقریبا این شیوه طراحی استاتیک داره می‌ره تو آرشیو! (جز موارد خاص که صرفا نیاز به چند صفحه اطلاعاتی یا کاتالوگ اینترنتی ثابت داریم و نیاز به به روزآوری نیست)، در واقع نیازها تغییر کرده! تقریبا همه صاحبان وب سایت‌ها خواهان این هستند که خودشون بتونن بدون وابستگی به شخص طراح یا برنامه نویس، مطالب رو به روزآوری کنند! پس لازمه این کار داشتن یک وب سایت داینامیکه که طرف خودش یه سطح دسترسی داشته باشه واسه ورود محتوا به وب سایت، اون هم یک محیط فارسی ویژوال، ساده و زیبا که توش احساس سردرگمی نکنه و همه چیز واسش واضح باشه؛

مثل وب سایت‌های خبری که در حد ثانیه خبر بارگذاری می‌کنند و اپراتورهای ساده و غیرفنی زیادی همزمان دارن با این سیستم کار می‌کنند، یا ورود تعدادی زیاد از رکوردها در وب سایت آژانس‌های املاک، یا ورود محصولات در وب سایت فروشگاه لوازم خانگی و... این‌ها قطعا نیاز به یک وب سایت داینامیک یا پویا دارند.

[Milestone]

سلام
در ادامه پست قبل‌تر دو تا مبحث مهم و پیش‌رفته‌تر به اسم زبان نشانه‌گذاری XML و تکنولوژی Ajax رو داریم که به نوعی هم مرتبط با بخش Client Side و هم بخش Server Side و به نوعی بینابینی هستن، واسه همین این وسط بهش اشاره می‌کنیم. حالا این ابتدا خوندن این موارد برای ادامه مسیر الزامی نیست! بعدا خودمون می‌فهمیم که کی و کجا باید به کار بگیریم این‌ها رو؛

زبان نشانه گذاری XML / Extensible Markup Language
XML یک زبان استاندارد برای ذخیره‌سازی، توصیف، بیان و انتقال داده‌ها و در دنباله اون اطلاعات و دانش هست، مثل HTML شامل یک سری از تگ‌هاست و ساختارش هم تقریبا باهاش مشابه هست اما کاربردش متفاوته، یک نمونه‌ش اینه که ما تو HTML و یا XHTML از تگ‌هایی با عنوان پیش‌فرض (از پیش تعریف شده) مثل <Body> و <B> استفاده می‌کنیم ولی تو XML این خود ما هستیم که تگ‌ها رو نام‌گذاری می‌کنیم.

برای مثال اگه ما یک Desktop Application و یک Web Application با دو زبان برنامه نویسی ، ساختار و پایگاه داده مجزا داشته باشیم و حالا قصد داشته باشیم داده‌های یکی از این بانک‌ها رو به بانک دیگه منتقل کنیم (تبادل داده بین دو سیستم ناهمسان)، می‌تونیم توسط زبان XML بیایم و با تعریف یک چارچوب واسط این کار رو انجام بدیم. فید خبرخوان یا RSS و چند زبانه کردن یک وب سایت دو نمونه دیگه از کاربردهای XML در وب هستند.

کتاب آموزشی XML از Elizabeth Castro ترجمه مهندس افروز کاشف الحق و دکتر علی یونسی + فایل‌های تمرینی

مهمان عزیز شما قادر به مشاهده پیوندهای انجمن مانشت نمی‌باشید. جهت مشاهده پیوندها ثبت نام کنید.

--------------------------------------------------

تکنولوژی Ajax / Asynchronous JavaScript And XML
وقتی وب پایه گذاری شد قرار بود صرفا با صفحات وب کار داشته باشیم (یعنی نمایش محتوا)، اما بعدتر سرویس‌های وب هم به وجود اومد. در واقع سرویس به این معنی که ما یک نرم افزار رو که مثلا روی سیستم عامل خودمون داریم رو بتونیم در بستر وب (Web Application) و فارغ از سیستم عامل (چند سکویی) و فارغ از سخت افزار اجرا کنیم. ما می‌دونیم که سرعت و واکنش نرم افزارهای غیروابسته به وب (Desktop Application) در پردازش و نمایش داده‌ها بالاست، انقدر بالا که ما گاهی متوجه‌ش هم نمی‌شیم، اما تو وب چی؟

این جالبه که مثلا ما بیایم تو یک وب سایت روی یک دکمه برای محاسبه خیلی ساده ۲+۲ کلیک کنیم و بعد یک بار کل صفحه Refresh بشه که مثلا می‌خواد یه جواب ۴ به عنوان خروجی رو برگردونه؟ این زمان پاسخ طولانی، بدجور تو ذوق کاربر می‌زنه! با سرعت اینترنت ما که دیگه فاجعه‌ست!

اما راه حل چیه؟ راه حل اِیجَکسِ (بعضی‌ها به اشتباه می‌گن آژاکس! اون باشگاه آژاکس آمستردامه نه تکنولوژی اِیجَکسِ! ). حالا Ajax چیکار می‌کنه؟ Ajax میاد کاری می‌کنه که وقتی روی دکمه "اضافه به سبد خرید" تو فروشگاه کلیک کردیم بدون Refresh صفحه کالا بره تو سبد خرید و شمارنده روی یک قرار بگیره؛ در واقع به جای اینکه کل صفحه ما Load بشه فقط همون بخش در پشت صحنه (پس زمینه) Load می‌شه! این یعنی چی؟ یعنی بدون Load صفحه توسط Ajax توانایی ارسال و دریافت اطلاعات به سرور رو داریم!

یا مثلا یه فرمی رو پر می‌کنیم و Sent می‌کنیم و بدون Refresh صفحه پیام میاد که پیام شما ارسال شد! نمونه خیلی واضح اون رو هم می‌تونید تو سرویس ایمیل Yahoo و Hotmail و Gmail ببینید که راحت می‌تونید ایمیل‌هاتون رو چک کنید یا روی نقشه‌های Google اسکرول کنید.

به سرواژه‌های واژه Ajax دقت کنید: Asynchronous JavaScript And Xml
یعنی توش هم Javascript داریم هم XML و...، پس یه چیز جدید نیست، ولی ترکیب این موارد یه تکنولوژی یا معماری جدید به نام Ajax رو به وجود آوره؛ کار Javascript تو این تکنولوژی اینه که امور مربوط به Client Side رو بر عهده داره، مثل ارسال درخواست کاربر به Server و پردارش نتایج دریافتی از اون و کار XML هم فراهم آوردن زمینه و چارچوبی برای انتقال داده و اطلاعات بین Client و Server هست.

کتاب اصول تکنیک Ajax از جابر صادقی

مهمان عزیز شما قادر به مشاهده پیوندهای انجمن مانشت نمی‌باشید. جهت مشاهده پیوندها ثبت نام کنید.

کتاب شروع برنامه نویسی Ajax از محمدهادی قومنجانی و محمد توکلی هشجین

مهمان عزیز شما قادر به مشاهده پیوندهای انجمن مانشت نمی‌باشید. جهت مشاهده پیوندها ثبت نام کنید.

--------------------------------------------------

در ادامه: برنامه نویسی سمت سرور / زبان‌ها، بانک‌های اطلاعاتی و...

[ehsansjs]

خیلی ممنون راجع به توضیح کاملتون(شما توی سایت خیالی دکوراسیون داخلی تونستید خودتونم معرفی کنید؟یعنی فقط نقش نمونه کارو داشت یا خودش جذب مشتری هم میکرد؟)
لطفا راجع به cms هم مختصر توضیح بدید چرا میگن نقطه ضعفهایی داره مثلا امنیتش کمه؟
آیا استفاده از cmsآماده میتونه نشون دهنده ضعف برنامه نویس باشه؟

[amir.monfared1369]

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

---

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

[amir.monfared1369]

(۱۴ فروردین ۱۳۹۴ ۰۲:۱۱ ق.ظ)ehsansjs نوشته شده توسط:  خیلی ممنون راجع به توضیح کاملتون(شما توی سایت خیالی دکوراسیون داخلی تونستید خودتونم معرفی کنید؟یعنی فقط نقش نمونه کارو داشت یا خودش جذب مشتری هم میکرد؟)
لطفا راجع به cms هم مختصر توضیح بدید چرا میگن نقطه ضعفهایی داره مثلا امنیتش کمه؟
آیا استفاده از cmsآماده میتونه نشون دهنده ضعف برنامه نویس باشه؟

از دوستان عزیز Milestone و ehsansjs عذر خواهی می کنم که تو مطلبشون دخالت می کنم.
فکر می کنم استفاده از wcms های آماده مثل joomla , wordpress , liferay, .... مزایا و معایب خودش رو داره و دلیل بر ضعف در برنامه نویسی نیست. به نظرم هر طراح وبی باید لااقل به یکی از این wcms ها تسلط داشته باشه.
برای تشبیه مثلا همه با برنامه هلو آشنا هستن که در حسابداری استفاده می شه. همون طور که هممون می دونیم برای بعضی کارها استفاده از هلو به جای نوشتن یک برنامه جدید بهتره و در بعضی موارد برعکس. جریان wcms ها هم درست مانند اونه.
باید اول ببینیم هدف چیه بعد روش طراحی که مبتنی بر استفاده از wcms هست یا نه رو انتخاب کنیم. البته وقتی از یک wcms استفاده می کنیم دستمون بسته میشه و نمی تونیم هر مدل دوست داریم برنامه نویسی کنیم اما در مقابل ماژول های آماده و سرعت عمل بالا برای پیاده سازی رو برای ما به ارمغان میاره.
بازم از اینکه فضولی کردم عذر می خوام.

[Milestone]

(۱۴ فروردین ۱۳۹۴ ۰۲:۱۱ ق.ظ)ehsansjs نوشته شده توسط:  شما توی سایت خیالی دکوراسیون داخلی تونستید خودتونم معرفی کنید؟یعنی فقط نقش نمونه کارو داشت یا خودش جذب مشتری هم میکرد؟

شما حق دارید در پایین (Footer) اون نمونه کار امضای خودتون رو قرار بدید، مثلا: "طراحی و اجرا: گروه برنامه نویسی احسان جی اس اس" که بعد لینک می‌خوره به وب سایت رسمی گروه یا شرکت شما؛ این خودش یک راه برای جذب مشتری هست، مخصوصا اگه اون وب سایت رو خوب طراحی کرده باشید.

(۱۴ فروردین ۱۳۹۴ ۰۲:۱۱ ق.ظ)ehsansjs نوشته شده توسط:  لطفا راجع به cms هم مختصر توضیح بدید چرا میگن نقطه ضعفهایی داره مثلا امنیتش کمه؟
آیا استفاده از cmsآماده میتونه نشون دهنده ضعف برنامه نویس باشه؟

در ادامه صحبت‌های آقای amir.monfared1369 باید بگم: بله! دقیقا؛ استفاده از سیستم‌های متن باز هیچ ربطی به ضعف برنامه نویس نداره و انتخاب یا عدم انتخابش بسته به هدف و کاربرد مد نظر ماست. ممکنه شما طبق سطح نیازهای اون پروژه صلاح بدونید استفاده کنید و ممکنه هم ندونید.

شاید بهتر باشه دید خودمون رو راجب به سیستم‌های Open Source یا متن باز کمی بیشتر وسعت بدیم.
می‌دونیم که سیستم عامل لینوکس دارای توزیع‌ها یا نسخه‌های زیادی از آزاد و رایگان تا تجاری هست که همزمان توی کل دنیا توسط افراد حقیقی و حقوقی در حال توسعه بودند و هستند، از Fedora و Slax تا Kubuntu و Ubuntu و... توی ایران هم که تولید نسخه بومی این سیستم عامل با نام‌هایی مثل شبدیکس و پارسیکس و... به همت نهادهایی مثل دانشگاه صنعتی شریف آغاز شد. اما آیا از صفر صفر؟ به هیچ وجه؛

در واقع ما در سیستم‌های متن باز مثل توزیع‌های لینوکس و یا CMS ها چیزی به اسم Kernel یا هسته داریم که فرض کنید شامل صدها هزار خط کد به یه زبان مثل C باشه و دارای یک معماری خاص؛ این‌ها تحت مجوزهایی در اختیار ماست، ما می‌تونیم این‌ها رو دریافت کنیم و حالا یا به همون شکل ازش استفاده کنیم یا اینکه فارسی‌سازی و بومی‌سازی‌شون کنیم و یا اینکه امکانات و توانمندی‌هاش رو در سطح بین المللی توسعه بدیم. در واقع این نسخه‌ها حاصل سال‌ها تلاش توسعه دهنگان این سیستم‌ها در سراسر دنیاست و شامل انبوهی از تجربیات اون افراد و شرکت‌ها؛

حالا، سوال اینجاست: آیا این بده که ما در قالب یک تیم توسعه بیایم و از هسته متن باز یکی از نسخه‌های این سیستم عامل به عنوان یک مبنا برای توسعه سیستم عامل مد نظر خودمون استفاده کنیم؟ با این فرض که این سیستم اولیه کاملا بستر لازم رو برای پیاده سازی موارد مد نظر ما فراهم می‌کنه؟ آیا این یه ضعفه؟

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

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

(۱۴ فروردین ۱۳۹۴ ۱۲:۳۶ ب.ظ)amir.monfared1369 نوشته شده توسط:  از همون اول دنبال منابع زیاد و مختلف باشین موفقیت تون کم رنگ میشه.

موافقم؛
اینجا هم سعی شده منابع زیادی معرفی نشه و واسه هر مبحث دو منبع فارسی و انگلیسی؛ و این موارد هم با توجه به سطح مخاطبین عنوان می‌شه که حداقل کارشناس هستند و خودشون می‌دونند که نباید دور خودشون رو از منابع مختلف پر کنند و با آگاهی حرکت کنند. ضمن اینکه این فرض رو هم قرار ندادیم که همه مخاطبین صفر هستند، اینکه تعدادی از افراد قبلا با مقدماتی مثل HTML و یا کلا Client Side آشنا بودن و حالا قصد دارن از یه جایی به بعد دوباره وارد مسیر بشن، یا اینکه راه‌های میان‌بُر رو بررسی کنیم. واسه افرادی که هیچ آشنایی‌ای ندارن به قول شما وب سایتی مثل W3School منبع خیلی خوبیه و حتما توصیه می‌شه؛

(۱۴ فروردین ۱۳۹۴ ۱۲:۳۶ ب.ظ)amir.monfared1369 نوشته شده توسط:  کتاب مطالب بیشتری رو داره اما چون ما زبان مادریمون انگلیسی نیست خوندن کتاب بعد از چند روز حوصلمون رو سر میبره. من نظرم اینه که ویدیو ببینیم بهتره چون به دلیل اکتیو بودن موضوع حوصلمون سر نمیره.

مخالفم؛
همه این منابع (چه فارسی و انگلیسی) با این فرض معرفی شدن که ما رشتمون کامپیوتره و انگلیسی زبان اصلی رشته ماست، اگه فکر می‌کنیم که خوندن چند صفحه کتاب زبان اصلی ممکنه حوصله‌مون رو سر ببره باید این قضیه رو همین الان حلش کنیم و یه تصمیم جدی بگیریم نه اینکه دوباره برگردیم سر کتاب‌های فارسی (برگشت به عقب)؛ سرعت ترجمه کتاب‌های انگلیسی به فارسی در حال حاضر خیلی افتضاحه! تازه اگه یه ترجمه خوب گیر بیاد، مثلا چقدر مطلب فارسی حتی به صورت موردی یا چند صفحه از کتاب در مورد SASS و Compass داریم؟ ولی در عوض کتاب زبان اصلی داریم فقط واسه این موارد؛ اینکه کی بخوان ترجمه بشن معلوم نیست، یعنی اگه بخوایم هم قدم با زبان فارسی حرکت کنیم، بین خودمون و تکنولوژی یک فاصله زمانی چند ساله برقرار می‌کنیم.

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

[amir.monfared1369]

(۱۴ فروردین ۱۳۹۴ ۰۴:۱۳ ب.ظ)Milestone نوشته شده توسط:  موافقم؛
اینجا هم سعی شده منابع زیادی معرفی نشه و واسه هر مبحث دو منبع فارسی و انگلیسی؛ و این موارد هم با توجه به سطح مخاطبین عنوان می‌شه که حداقل کارشناس هستند و خودشون می‌دونند که نباید دور خودشون رو از منابع مختلف پر کنند و با آگاهی حرکت کنند. ضمن اینکه این فرض رو هم قرار ندادیم که همه مخاطبین صفر هستند، اینکه تعدادی از افراد قبلا با مقدماتی مثل HTML و یا کلا Client Side آشنا بودن و حالا قصد دارن از یه جایی به بعد دوباره وارد مسیر بشن، یا اینکه راه‌های میان‌بُر رو بررسی کنیم. واسه افرادی که هیچ آشنایی‌ای ندارن به قول شما وب سایتی مثل W3School منبع خیلی خوبیه و حتما توصیه می‌شه؛

(۱۴ فروردین ۱۳۹۴ ۱۲:۳۶ ب.ظ)amir.monfared1369 نوشته شده توسط:  کتاب مطالب بیشتری رو داره اما چون ما زبان مادریمون انگلیسی نیست خوندن کتاب بعد از چند روز حوصلمون رو سر میبره. من نظرم اینه که ویدیو ببینیم بهتره چون به دلیل اکتیو بودن موضوع حوصلمون سر نمیره.

مخالفم؛
همه این منابع (چه فارسی و انگلیسی) با این فرض معرفی شدن که ما رشتمون کامپیوتره و انگلیسی زبان اصلی رشته ماست، اگه فکر می‌کنیم که خوندن چند صفحه کتاب زبان اصلی ممکنه حوصله‌مون رو سر ببره باید این قضیه رو همین الان حلش کنیم و یه تصمیم جدی بگیریم نه اینکه دوباره برگردیم سر کتاب‌های فارسی (برگشت به عقب)؛ سرعت ترجمه کتاب‌های انگلیسی به فارسی در حال حاضر خیلی افتضاحه! تازه اگه یه ترجمه خوب گیر بیاد، مثلا چقدر مطلب فارسی حتی به صورت موردی یا چند صفحه از کتاب در مورد SASS و Compass داریم؟ ولی در عوض کتاب زبان اصلی داریم فقط واسه این موارد؛ اینکه کی بخوان ترجمه بشن معلوم نیست، یعنی اگه بخوایم هم قدم با زبان فارسی حرکت کنیم، بین خودمون و تکنولوژی یک فاصله زمانی چند ساله برقرار می‌کنیم.

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

من هم گفتم یک کتاب از یه دوره ویدیو آموزش بیشتری داره. اما من گفتم حوصله خوندن کتاب اونم به زبان انگلیسی رو همه ندارن حالا شاید جامعه آماری که من دیدم همه مهندسای خوبی نبودن اون رو نمی دونم
اتفاقا چون سرعت تغیرات تو وب بیشتر من گفتم رفرنس خوندن همون اول کار یکم کار اشتباهیه.
من آدمیم که برای ccna جفت کتابای cisco رو کامل خوندم و کسی درباره شبکه ازم سوال کنه می گم فقط رفرنس بخونین اما وقتی تو طراحی سایت کتابای انتشارات Apress رو گذاشتم جلوم که واسه هر کدوم باید حدود ۸۰۰ الی ۱۰۰۰ صفحه می خوندم (در ابتدا شروع کردم به خوندن از روشون) دیدم به به خوندن اینا کار من نیست تا این تموم شه PHP از صحنه برنامه نویسی حذف شده.
ولی وقتی php رو یاد گرفتم چون دیدم یه جاهایی لنگ می زنم کتاب PHP اون انتشارات رو تونستم تو سرعت خیلی زیادی بخونم.
بحث من اینه اگر سراغ خوندن ریفرنس برین با سرعت کمی جلو میرین و و توجه بشه که تو طراحی سایت چون بیشتر مطالب متن باز هستن سرعت عمل از دایره داشته های علمی مهمتره شما اصول رو بلد باشین می تونین همه مشکلات و کمبود ها رو از اینترنت پیدا کنین( همه چیز رو بلد باشین به انگلیسی سرچ کنین مشکلی براتون پیش نمیاد) واسه همین گفتم اول آغاز به خوندن هر اسکریپت یا زبانی نیاز به خوندن ریفرنس نیست.
بعد هم تو انتخاب ریفرنس باید دقت بشه یا متعلق به انتشارات معروفی باشه یا توصیه شده توسط طراحان اون زبان باشه مثل اینکه تو سایت jquery کتاب های مناسب رو معرفی کرده.
قهرمان دو المپیک اول تونست راه بره بعد بدو. من هم میگم اول با ویدو و خوندن سایت w3schools یه چیزایی دستمون بیاد یه دو پروژه انجام بدیم برای خودمون تا تجربه کسب کنیم بعد دنبال خوندن رفرنس باشم.
البته باز میگم اینا تجارب من هست و نمی گم که تجارب من از شما بهتره فقط خواستم به بچه ها بگم آسون بگیرن موضوع رو .