رفتن به نوشته‌ها

دسته: طراحی تحت وب

آموزش طراحی وب – جلسه اول – پیشنیازها

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

نکته: دو تعریف جداگانه یعنی طراحی تحت وب و برنامه نویسی تحت وب وجود دارد؛ برخی این دو مقوله را با هم اشتباه گرفته و یا هردو را یکی می دانند! اما باید تفاوت بین این دو را ابتدا درک کرد.

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

برخلاف طراحی وب (Web Design) که ظاهر (Frontend) یک نرم افزار تحت وب را تشکیل می دهد و در تعاریف به آن اشاره شد، برنامه نویسی وب (Web Programming) به منظور ایجاد تعامل و اجرای فرامین کاربر و همچنین ذخیره سازی داده در پایگاه داده و در سطح بالاتر به منظور ساخت یک نرم افزار تحت وب همچون سیستم های مدیریت محتوا نظیر وردپرس، جوملا و… است. زبان های برنامه نویسی تحت وب شامل php, asp.net, java, c++,c و… و همچنین فریمورک های مشتق شده از آنها می باشد. در برنامه نویسی به نوعی باطن یا هسته یک نرم افزار نوشته می شود و از همین جا می توان تفاوت بین این دو تعریف را درک کرد.

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

تجربه کاربری چیست

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

رابط کاربری چیست

User Interface که به اختصار UI نامیده می شود؛ به معنی رابط کاربری است. UI برخلاف UX مسئول پیاده سازی مسیری است که طراح تجربه کاربری ایجاد نموده است. به نوعی وظیفه طراح رابط کاربری، ایجاد طرح گرافیکی به بهترین نحو است.

انواع صفحات وب

  • وبسایت ایستا

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

  • وبسایت پویا

صفحه (dynamic) صفحه ای است که برای تعامل با کاربر غیر از استفاده از HTML و CSS از زبان های برنامه نویسی مانند PHP, ASP و.. برای ذخیره سازی اطلاعات و ساخت یک سیستم مدیریت محتوا استفاده می کند. به همین سبب اگر فردی اطلاعات لازم در مورد کار با زبان های تحت وب را نداشته باشد به راحتی می تواند از پیشخوان (Panel) که برای سایت طراحی شده صفحه خود را بسازد، مطلب بنویسد و یا ظاهر سایت را از طریق تنظیمات تعبیه شده تغییر دهد.

چه زمانی از وبسایت ایستا یا پویا استفاده می شود؟

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

وبسایت های پویا را می توان به وسیله سیستم های مدیریت محتوا (CMS) ی رایگان همچون وردپرس، جوملا، دروپال و… راه اندازی کرد. و یا با پرداخت هزینه سیستم شخصی مورد نظر خود را بسازید.

نرم افزارهای کدنویسی

نکته: نرم افزارهای مختلفی برای کدنویسی وجود دارد که میتوان با توجه به امکانات، زیبایی، کارایی و… یکی را انتخاب کرد.

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

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

طراحی وب چیست

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

طراحی وب چیست

ایجاد ظاهر وبسایت (نرم‌افزار تحت وب) با بهره گیری از طراحی گرافیک که معمولا پیاده سازی آن در نرم افزارهای طراحی انجام می‌پذیرد؛ و به وسیله زبان های طراحی تحت وب یعنی HTML, CSS به فرمتی برای اجرا در مرورگر تبدیل می شود.

در تعریف بالا چند نکته مشخص شد:

  1. طراحی وب، ظاهر یک نرم‌افزار تحت وب است.
  2. طراحی وب، زبان های مخصوص به خود را دارد.
  3. طراحی وب، دو مرحله اصلی دارد.

۱- طراحی وب، ظاهر نرم‌افزار تحت وب است

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

۲- طراحی وب، زبان های مخصوص به خود را دارد

برای یادگیری طراحی تحت وب باید زبان های مخصوص به آن را فرا گرفت. زیرا در محیط کدنویسی ایجاد می شوند. این زبان ها HTML, CSS ,JavaScript می باشند.

۳- طراحی وب، دو مرحله اصلی دارد

  • مرحله اول: طراحی گرافیک:

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

  • مرحله دوم: کدنویسی:

در این مرحله استفاده از کدنویسی برای تبدیل طرح گرافیکی به فرمت مورد نظر برای اجرا در مرورگر الزامی است.

اچ تی ام ال چیست

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

سی اس اس چیست

Cascading Style Sheet که به اختصار CSS نامیده می شود؛ به معنی برگه سبک آبشاری است. زبانی است که بصورت مستقل برای سبک دهی و ایجاد جلوه های مختلف بر روی عناصر موجود در HTML مورد استفاده قرار می گیرد. در واقع CSS کار زیباسازی را در طراحی وب برعهده دارد.

جاوااسکریپت چیست

JavaScript که به اختصار JS نامیده می شود؛ زبانی شبه برنامه نویسی است که پویاسازی یک وبسایت را با استفاده از تغییر در عناصر بر عهده می گیرد. به این دلیل آن را یک زبان شبه برنامه نویسی می نامند چون این زبان در سمت کاربر و در مرورگر قابلیت اجرا داشته و نیازی به پایگاه داده برای ذخیره سازی، یا یک سرور برای اجرا ندارد.

نرم افزارهای شبیه ساز برای تبدیل رایانه شخصی به سرور

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