اصطلاحات تخصصی طراحی سایت

22 آبان 1400

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

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

در ادامه اصطلاحات طراحی سایت را برای هریک از این دسته‌ها بررسی می‌کنیم:

 

 

اصطلاحات تخصصی طراحی سایت (بخش توسعه)

 

دامنه (Domain)

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

 

میزبانی یا هاستینگ (Hosting)

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

 

سرور (Server)

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

 

سیستم مدیریت محتوا (CMS)

CMS (Content Management System) بستری است که در آن افرادی که وبسایت را مدیریت می‌کنند، محتوا را ویرایش و منتشر می‌کنند. در یک سیستم مدیریت محتوا، ویراستاران می‌توانند کارهایی مانند افزودن یا به‌روز رسانی محتوای متنی، آپلود تصاویر و ساخت صفحات جدید را انجام دهند. WordPress و Joomla از محبوب‌ترین سیستم‌های مدیریت محتوا هستند.

 

وردپرس (WordPress)

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

 

پلاگین یا افزونه (Plug-in)

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

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

اینها از معروف‌ترین افزونه‌های وردپرس هستند:

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

 

بک اند (Back-end)

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

 

زبان‌های توسعه وبسایت

زبان‌های مختلفی وجود دارد که توسعه‌دهندگان Back-end ممکن است از آنها استفاده کنند؛ از جمله PHP، Rails، ASP، C#، C++، Python و .NET. مشابه زبان‌های واقعی، هر زبان برنامه‌نویسی قوانین نحوی و زبانی خود را دارد.

در ادامه برخی از محبوب‌ترین زبان‌های توسعه را ملاحظه می‌کنید:

  • PHP (Hypertext Preprocessor): PHP یک زبان برنامه‌نویسی سمت سرور است، که برای توسعه وبسایت‌های روان (fluid) و اتصال به پایگاه‌های داده استفاده می‌شود. یک دکمه ورود با فیلدهای آدرس ایمیل و رمز عبور را تصور کنید. هنگامی که این اطلاعات وارد و ارسال می‌شود، PHP آن را به پایگاه داده ارسال و صحت آن را بررسی می‌کند.
  • پایتون (Python): پایتون یک فریم‌ورک (چارچوب نرم‌افزاری) رایگان توسعه وب است که از دهه 1980 وجود دارد. پایتون به دلیل سهولت استفاده و خوانایی بالایی که دارد، مشهور است. مبتدی‌ها اغلب از پایتون به عنوان پله‌ای برای یادگیری سایر ابزارهای توسعه استفاده می‌کنند.
  • جاوا اسکریپت (JavaScript): جاوا اسکریپت یک زبان برنامه‌نویسی پویای فشرده و انعطاف‌پذیر است. JV ویژگی کاربردی بسیار زیادی دارد؛ و با آن می‌توانید تصاویر سه‌بعدی، استریم‌های ویدیویی و … را در وبسایت خود قرار دهید.
  • کاتلین (Kotlin): کاتلین یک زبان برنامه‌نویسی رایگان، منبع‌باز و ایستاست که ابتدا برای ماشین مجازی جاوا و اندروید طراحی شد. این زبان که ویژگی‌های برنامه‌نویسی شی‌گرا و کاربردی را ترکیب می‎کند، با سرعت بیشتری نسبت به جاوا اجرا می‌شود و برای توسعه سمت سرور بسیار مناسب است. چون وضوح و مقیاس‌پذیری بالایی دارد، با کتابخانه‌های جاوا سازگار است و ابزارهای گوناگونی دارد.

 

گواهی SSL/TSL

SSL (Secure Sockets Layer) پروتکلی برای امن نگه داشتن اتصال اینترنتی و محافظت از هر داده حساسی است که بین دو سیستم ارسال می‌شود. این پروتکلی از خواندن و تغییر اطلاعات منتقل شده (از جمله اطلاعات شخصی) توسط مجرم‌ها و هکرها جلوگیری می‌کند.

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

TLS (Transport Layer Security) در واقع یک نسخه به روز شده و ایمن‌تر از SSL است. با این وجود در فضای دیجیتال ما همچنان از گواهی‌های امنیتی به نام SSL یاد می‌کنیم، زیرا اصطلاح رایج‌تری است.

 

شبکه تحویل محتوا یا CDN (Content delivery network)

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

یک CDN به درستی پیکربندی شده می‌تواند به محافظت از وبسایت‌ها در برابر برخی حملات مخرب مانند حملات DDOS هم کمک کند. محبوبیت این شبکه بسیار بالاست؛ و امروزه بیشتر ترافیک وب از طریق CDNها ارائه می‌شود، از جمله ترافیک سایت‌هایی مانند فیسبوک (متا)، نتفلیکس و آمازون.

 

 

آژاکس (AJAX یا Asynchronous JavaScript and XML)

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

 

API (Application Programming Interface)

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

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

 

پایگاه داده (Database)

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

 

کش (Cache)

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

 

پهنای باند (Bandwidth)

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

پهنای باند مقادیر متفاوتی دارد، بنابراین مهم است که مقدار مناسبی را برای کسب‌وکارتان در نظر بگیرید.

 

 

اصطلاحات طراحی سایت (بخش طراحی)

 

CSS (Cascading Style Sheet)

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

css is awesome
css is awesome

HTML (Hypertext Markup Language)

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

 

طرح‌بندی واکنشگرا (Responsive Layout)

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

 

طرح‌بندی استاتیک (Static Layout)

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

 

طراحی رابط کاربری (UI Design)

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

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

 

طراحی تجربه کاربری (UX Design)

کاربر هنگام بازدید از وبسایت شما چه احساسی دارد؟ اگر کار با آن ساده و روان باشد، احتمال بیشتری وجود دارد که در سایت بماند. اما اگر کاربر در سایت گم شود و نداند باید چکار انجام دهد، احساس ناامیدی می‌کند و وبسایت را ترک خواهد کرد.

 

فاوآیکون (Favicon)

فاوآیکون تصویری است که در کنار نام دامنه شما در نوار آدرس مرورگر ظاهر می‌شود. بیشتر کسب‌وکارها برای فاوآیکون از لوگوی خود یا نسخه ساده شده‌ای از آن استفاده می‌کنند.

اشتراک گذاری
Share on whatsapp
Share on telegram
Share on email
Share on linkedin
Share on twitter
مطالب پیشنهادی

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

نشانی ایمیل شما منتشر نخواهد شد.

اشتراک گذاری
Share on whatsapp
Share on telegram
Share on email
Share on linkedin
Share on twitter
مطالب پیشنهادی
Skip to content