این نوشته یک توضیح همراه با مثال در مورد مراحل ساخت یک سایت است. جهت کوتاه‌تر کردن نوشته هر جا کلمه‌ی «سایت» رو بکار میبرم منظورم تنها سایت نبوده و نرم‌افزار تحت وب٬ نرم‌افزار تلفن همراه و حتی نرم‌افزار مخصوص Desktop هم منظورم هستند چون تکنولوژی ساختشون در بیشتر مراحل شبیه به هم است. اول بجای درگیر شدن با نوع تکنولوژی٬ میخوایم به مفهوم ساخت بپردازیم.

steps-to-build-a-web-app infographic

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

تجربه کاربری یا User Experience

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

Good User-experience ≠ Beautiful Interface

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

رابط کاربری یا User Interface

Touch devices UI

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

رابط کاربری همراه با زمان و سلیقه‌ی مردم تغییر میکنه. برای مثال رابط کاربری تلفن‌های همراه قدیمی ظاهری پر زرق و برق و پیچیده داشتند ولی امروز بیشتر طرح ها به تخت یا Flat بودن و مضمون ساده‌گرایی یا مینیمالیسم متمایل شدند. البته دلیلی هم نداره همیشه با سلیقه مردم حرکت کنید٬ میتونید با ارائه طرح‌های ابتکاری شما سلیقه مردم رو تغییر بدید.

windows-phone-10-UI
رابط کاربری ویندوز فون ۱۰

اگر رابط کاربریمون قرار باشه در مرورگرها اجرا بشه٬ طرح دیداری باید تبدیل به صفحه‌ی وب با فرمت HTML بشه. HTML یک فرمت Document استانداردسازی شده مخصوص وب است و دلیل استانداردسازی این فرمت٬ وجود مرورگرهای مختلف هست که صفحه رو به اشکال متفاوتی ممکنه به تصویر دربیارند.

بد نیست بدانیم!

HTML برنامه نیست و به نوشتن HTML برنامه نویسی نمی‌گویند. HTML مخفف Hyper-text markup language ٬ زبان نشانه‌گذاری محتوا است. دلیل وجود نشانه‌گذاری با Tag ها٬ ساختار بخشیدن به محتوای صفحه است تا برای ربات‌های مجازی وب نظیر ربات جستجوی گوگل قابل خواندن باشد. HTML نسخه ۵ یک سری Tag های Semantic که برای این ربات‌ها معنا دار هستند اضافه کرد و بعد پروژه‌ی Schema.org که حاصل همکاری چند غول وب نظیر گوگل٬ مایکروسافت و یاهو بود پا را فراتر گذاشت و با نامگذاری کردن اجزای صفحه با Objects and Properties ٬ محتوا را برای ربات‌ها معنادارتر کرد.

مثال زیر یک تکه کد HTML است که ساختار درختی بودن اون رو نشون میده. (بین HTML و Result جا به جا بشید٬ میبینید.)

 

HTML هیچ ظاهر خاصی از خودش نداره مگر مشخه‌های ظاهری که مرورگرها بصورت پیش‌فرض روی اجزا میگذارند. ما با CSS به صفحه ظاهر میبخشیم و با JavaScript صفحه رو زنده میکنیم یا بهتر بگم٫ به کنش کاربر واکنش نشون میدیم.

 

a webpage without css
صفحه وب بدون CSS
a webpage with css
صفحه وب با CSS

CSS مخفف Cascade style sheets زبان کناری HTML هست و بصورت آبشاری به اجزای HTML خصوصیت میده که این خصوصیت همون ظاهره و اینجا بهش Style میگیم.

مثال زیر همان تکه کد HTML بالا همراه با CSS است.

فراموش نکنیم…

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

 

توسعه یا Development

توسعه یا برنامه نویسی رو میشه در این چهار کلمه تعریف کرد: کدنویسی٬ امتحان٬ عیب‌یابی٬ ارتقا

یک سایت عملیاتی رو در مرورگر کاربر انجام میده و عملیاتی رو هم در کامپیوتر Server ٬ کسی که در زمینه برنامه‌هایی که در مرورگر کاربر اجرا میشن تخصص داره خودش رو توسعه دهنده سمت کاربر میدونه و کسی هم که در زمینه برنامه‌هایی که در کامپیوتر Server اجرا میشن تخصص داره خودش رو توسعه دهنده سمت سرور میدونه.

  • توسعه سمت کاربر یا Front-end development

نوبت به زبان برنامه نویسی JavaScript میرسه. دلیل محبوبیت این زبان٬ وجود موتور مفسر زبان بصورت پیش‌فرض همراه با مرورگرهاست که اجرای برنامه رو در مرورگر کاربر ممکن میکنه.

مثال زیر اولین تکه کد HTML ولی این بار همراه با CSS و JavaScript است.

  • توسعه سمت سرور یا Back-end development

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

How a server works - infographic
تصویر از Ggia

فرض کنید زبان سمت سرور ما PHP است. PHP اینجا یک بسته‌ی نرم‌افزاری هست که در Web server  اجرا میشه. خود Web server هم باز یک نرم‌افزار هست که به درخواست مرورگر کاربر جواب میده. PHP فایل‌های با فرمت .php رو تفسیر میکنه و روی سرور اجرا میکنه. ما هم برنامه مون رو در فایلی با همین فرمت مینویسیم.

البته وقتی میخوایم خیلی ساده قسمت‌های یک صفحه رو خرد کنیم٬ نیازی به پایگاه داده نداریم. اینکار رو میشه هم با زبان سمت سرور و هم با زبان سمت کاربر که JavaScript هست انجام داد. به این زبان در این صورت Template Engine خواهیم گفت. مثلا میشه محتوای قسمت‌های Header, Main content و Footer در تصویر زیر رو که قسمت‌های مختلف یک صفحه وب هستند٬ در فایل‌های جداگانه ذخیره کرد و بعد در یک صفحه دیگر آنها را فراخوانی کرد.

web page sections

مورد دیگری که نیاز به یک زبان سمت سرور داره٬ Data validation یا تأیید اعتبار فرم‌هاست. تأیید اعتبار رو میشه بوسیله JavaScript انجام داد ولی کاربر میتونه JavaScript رو در مرورگرش غیرفعال کنه. پس در مواردی که ما میخوایم هر طور شده تأیید اعتبار انجام بشه٬ نیاز به یک زبان سمت سرور داریم. مثلا سایت ثبت‌نام کنکور از نمونه‌هایی هست که نیاز به تأیید اعتبار اطلاعاتی که کاربران وارد می‌کنند داره.

زبان‌های محبوب سمت سرور موارد زیر هستند:

PHP, Python, Ruby, C Sharp, Java, JavaScript(on node.js platform)

همه‌ی مراحل بالا بسته به نوع کار ممکنه متغییر باشه.


پی‌نوشت

توضیح تصویر اول: ۳ پسر در آلمان غربی هستند که دارند پشت دیوار برلین رو نگاه می‌کنند؛ عکس برداری در سال ۱۹۶۱؛ گرفته شده از boston.com

بازنشر
http://blog.pooriahan.name/wp-content/themes/handmade/functions-shareByEmail.php
● منتشر شده در ۱۳۹۴-۱۱-۰۶
۲ دیدگاه

  1. چهره محمد محمد

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

    ۱۳۹۵-۰۲-۲۹ ساعت ۰۲:۴۵

می‌توانید با عضویت در ماه‌نامه٬
آخرین نوشته‌ها را در صندوق ایمیل خود دریافت کنید