در مطلب قبلی به صورت کلی درباره‌ی شروع برنامه‌نویسی صحبت کردیم. در این مقاله سعی داریم آموزش طراحی وب را شروع کنیم.

طراحی وب چیست؟ طراح وب کیست؟

اولین موضوعی که باید درباره‌ی آن صحبت کنیم این است که تکنولوژی وب چیست؟ و طراحی وب یعنی چه؟

تیم برنرز لی (Tim Berners-Lee) در اوت ۱۹۹۱ با ساخت اولین صفحه‌ی وب، تحول عظیمی در جهان به‌وجود آورد.

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

ابَرمتن (HyperText)

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

Hypertext word cloud concept

به این ترتیب، زبان نشانه‌گذاری ابرمتن (Hyper Text Markup Language) یا همان اچ‌تی‌ام‌ال (HTML) به عنوان مبدأ و شروع طراحی وب شناخته می‌شود. با این وجود باید بدانید که اچ‌تی‌ام‌ال زبان برنامه‌نویسی نیست؛ HTML زبانی برای نشانه‌گذاری ابرمتن است و برای ساختار دادن به اطلاعات و جدا کردن اجزای منطقی یک نوشته (مثل عنوان‌ها، بندها، تصاویر، فهرست‌ها و …) به کار می‌رود.

اضافه شدن گرافیک

با جلو رفتن زمان و افزایش تعداد وبسایت‌ها، نیاز به وجود رنگ و گرافیک پررنگ‌تر شد. این مسئله در نسخه‌های بعدی HTML دیده شد. اما به شدت باعث شلوغ شدن این زبان و سخت شدن کار با آن شد. در نتیجه، تکنولوژی جدیدی به نام CSS (Cascading Style Sheets – شیوه‌نامه‌ی آبشاری) به وجود آمد که وظیفه‌ی آن، طراحی گرافیکی و روح بخشیدن به قالب خشک متن است. پس از ظهور CSS، ویژگی‌های گرافیکی HTML که حالا عضوی اضافه بودند، در نسخه‌ی بعدی حذف شدند.

css & js طراحی وب

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

هر چند این واکنش‌ها به نوعی پویایی برای صفحات وب به حساب می‌آید، اما سایت‌های پویا تعریف دیگری دارند.

ظهور سایت‌های پویا (Dynamic)

تقریبا ۲ سال پس از رونمایی از اولین صفحه‌ی وب با HTML، یعنی در سال ۱۹۹۳، ایده‌ی پویایی صفحات وب به وجود آمد.

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

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

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

ایجاد وبسایت پویا، نیاز به زبان‌های برنامه‌نویسی سمت سرور (Server Side) دارد.

تعدادی از این زبان‌ها عبارت‌اند از: Python، Ruby، Java، ASP.NET ، PHP و Go.

در آینده مطلب کاملی درباره‌ی سرور و کلاینت منتشر خواهیم کرد.

طراحی وب!

به علم و تخصص به کارگیری از تکنولوژی‌های بالا به منظور ایجاد یک وبسایت، علم طراحی وب می‌گویند.

این علم به دو دسته‌ی کلی تقسیم می‌شود: برنامه‌نویسی سمت کاربر (کلاینت) و برنامه‌نویسی سمت سرور؛

که به ترتیب به آن‌ها برنامه‌نویسی فرانت‌اِند (Frontend) و بک‌اِند (Backend) گفته می‌شود.

فرانت‌اند و بک‌اند

منظور از فرانت‌اند، طراحی قسمت‌هایی است که کاربر به طور مستقیم با آن‌ها سروکار داشته و برایش ملموس هستند. بله! درست حدس زدید؛ CSS، HTML و JavaScript.

و اما همان‌طور که واضح به نظر می‌رسد، بک‌اند، به قسمت طراحی سمت سرور و پایگاه داده مربوط می‌شود.

 

این مطلب ادامه دارد …

منتظر ما باشید.