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

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

در سری آموزش های راه اندازی سایت که به صورت دنباله دار و قدم به قدم تهیه خواهد شد، قصد داریم مراحل ۰ تا ۱۰۰ راه اندازی یک سایت را بدون نیاز به برنامه نویسی به شما عزیزان آموزش دهیم.

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

صفحه وب (Web page)

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

وب سایت (Website)

به مجموعه ای از صفحات وب، وب سایت یا سایت(Site) گفته می شود. وب سایت ها می تواند شامل یک صفحه یا ده ها هزار صفحه وب باشند که این مورد به ساختار و هدف یک وب سایت بستگی دارد.

با راه اندازی سایت چه مزایایی بدست می آوریم:

کاهش هزینه ها

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

دسترسی شبانه روزی

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

افزایش مشتری و فروش بیشتر

اکثر کسب و کارها در محدوده جغرافیای خود از محبوبیت بسیار بالایی برخوردار هستند، اما فقط می توانند به مشتریان همان منطقه سرویس های لازم را ارائه دهند. راه اندازی وب سایت به شما این قابلیت را می دهد تا کسب و کارتان در سراسر ایران و جهان قابل دسترسی باشد و از این طریق مشتریان بیشتری را جذب کنید.

آنالیز کاربران

با راه اندازی وب سایت می توانید هرگونه اتفاقی که در سایت تان رخ می دهد را با استفاده از ابزارهای آنالیز جمع آوری و ارزیابی کنید.

به عنوان مثال:

  1. امروز چند نفر به سایت تان مراجعه کردند.
  2. از چه صفحاتی بازدید کردند.
  3. به کدام بخش ها علاقه بیشتری دارند.
  4. چند نفر بر روی تبلیغات کلیک کردند.
  5. و …

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

وبلاگ (Blog)

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

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

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

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

آدرس اینترنتی (URL)

URL یا Uniform Resource Locator برای مشخص کردن آدرس های صفحات وب استفاده می شود. هر URL به یک منبع منحصر به فرد اشاره می کند که این منبع می تواند یک صفحه HTML، یک فایل CSS، یک تصویر و … باشد.

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

فعال سازی HTTPS و SSL

نمونه هایی از آدرس اینترنتی:

https://startuptuts.com

https://www.google.com

https://startuptuts.com/seo-fundation

 

HTML

HyperText Markup Language) HTML) یک زبان نشانه گذاری است که برای ایجاد صفحات وب استفاده می شود، در واقع HTML مجموعه ای از دستورالعمل ها است که مرورگرهای وب قادر به درک و تفسیر آنها هستند.

HTML در سال ۱۹۸۹ توسط تیم برنزلی(Tim Berners-Lee) ایجاد گردید.

عبارت HyperText Markup Language از دو بخش اصلی زیر تشکیل شده است:

HyperText : لینک ها به شما اجازه می دهند تا در بین صفحات وب یا بخش های مختلف یک وب سایت حرکت کنید و یا به سایر سایت ها منتقل شوید، HyperText به اهمیت بالای لینک ها در یک صفحه وب اشاره می کند.

Language Markup : اچ.تی.ام.ال یک زبانه نشانه گذاری است، یعنی می توانید با استفاده از یکسری کلمات کلیدی مشخص که Tag نامیده می شوند، ساختار اولیه و پایه ای صفحات وب را تعریف کنید. با استفاده از تگ ها می توانید جداول، پاراگراف، لینک(پیوند)، تصاویر،… را ایجاد نمائید.

ساختار و طرح اولیه یک صفحه وب توسط تگ های HTML تعریف می شود.

ساختار عناصر HTML به چه صورت است؟

همانطور که در تصویر زیر مشاهده می کنید، دستورالعمل های HTML با یک تگ باز(Opening Tag/Start Tag) شروع می شوند، پس از آن تمام ویژگی های(Attributes) مربوط به آن تگ را مشخص می کنیم. هر ویژگی از دو قسمت نام (Attribute Name) و مقدار (Attribute Value) تشکیل شده است. تگ بسته(Closing Tag/End Tag) نیز انتهای یک المان را مشخص می کند.

ساختار تگ های html

به این نکته توجه داشته باشید که برخی از عناصر HTML دارای تگ بسته نیستند. به عنوان مثال تگ img که برای افزودن تصاویر کاربرد دارد نیازی به Closing Tag ندارد.

ساختار یک صفحه HTML به چه صورت است؟

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

زبان HTML

CSS

CSS مخفف Cascading style sheets می باشد و برای افزودن رنگ و لعاب(تغییرات ظاهری) به صفحات وب استفاده می شود. به کمک کلمات کلیدی و قوائدی که در CSS تعریف شده است می توانید رنگ زمینه، اندازه متن ها، رنگ لینک ها، موقعیت عناصر صفحه و هر آنچه را که مربوط به جلوه های بصری یک صفحه وب می باشد را به راحتی تغییر دهید.

ساختار CSS به چه صورت است؟

تصویر زیر ساختار ساده ای از کدهای CSS را نشان می دهد. نمونه کد زیر اندازه متن تمامی تگ های h1 موجود در صفحه وب را به ۴۵ پیکسل تغییر می دهد.

ساختار CSS

نمونه ای از کدهای CSS:

body {
 font: normal 100% tahoma;
}
a:hover {
 color: #fff;
}

جاوا اسکریپت (JavaScript)

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

با جاوا اسکریپت چه کارهایی را می توانید انجام دهید:

  • پاسخ به اقدامات کاربران در زمان فشردن دکمه های صفحه کلید یا حرکت ماوس
  • ایجاد انیمیشن های پیچیده
  • اعتبار سنجی فرم های ورود اطلاعات
  • تغییر ظاهر(CSS) صفحات وب در شرایط خاص
  • افزودن تگ های HTML در شرایط خاص
  • به روز رسانی سبد خرید در فروشگاه آنلاین
  • و …

در تصویر زیر پس از ورود یک ایمیل نامعتبر توسط کاربر(به جای @ از ! استفاده شده است)، جاوا اسکریپت پیغام نامعتبر بودن آدرس ایمیل را نشان می دهد.

جاوا اسکریپت

تصویر زیر رابطه بین HTML ،CSS و  JS را نشان می دهد:

رابطه بین css html js

پی اچ پی (PHP)

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

به طور خلاصه پی اچ پی:

  • مخفف Hypertext pre-processor می باشد.
  • یک زبان برنامه نویسی سمت سرور است، به این معنا که بر روی سرور اجرا می شود.
  • کدهای این زبان در فایلی با پسوند php. ذخیره می شود.
  • اکثر وب سایت ها و سیستم های مدیریت محتوا به کمک این زبان تولید شده اند.

زبان PHP

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

سیستم مدیریت محتوا یا Content Management System ابزاری است که با شما این امکان را می دهد بدون درگیر شدن در مباحث پیچیده طراحی و توسعه سایت و بدون نیاز به دانش برنامه نویسی سایت تان را در سریع ترین زمان ممکن راه اندازی کنید.

در صورتی که قصد دارید وب سایت تان را بدون استفاده از CMS پیاده سازی کنید، شما یا تیم تان باید:

  • به یک زبان برنامه نویسی مثل PHP و یا فریمورک های مربوطه(مثلا Laravel) مسلط باشید.
  • به HTML، CSS ،JS و فریمورک های مربوطه(مثلا Bootstrap, Jquery) مسلط باشید.
  • با مفاهیم Ajax آشنا باشید.
  • باید بتوانید مباحث مربوط به امنیت وب سایت را پیاده سازی کنید.
  • باید با مفاهیم، دستورات و اصول طراحی پایگاه داده های رابطه ای مانند Mysql آشنا باشید.
  • باید بتوانید قابلیت های پیچیده مورد نیاز یک وب سایت را در نظر گرفته و پیاده سازی کنید.
  • از قدرت تحلیل و آینده نگری برخوردار باشید.
  • و …

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

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

  • وردپرس (WordPress)
  • جوملا (Joomla)
  • دروپال (Drupal)

گزارش زیر درصد استفاده از سیستم های مدیریت محتوا را نشان می دهد، طبق این گزارش وردپرس توانسته است چیزی در حدود ۷۸ درصد از سهم بازار CMS ها را به خودش اختصاص دهد.(گزارش از سایت wappalyzer.com تهیه شده است)

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

پیشنهاد می کنیم مطلب ۱۰ دلیل استفاده از وردپرس برای کسب و کارتان را مطالعه فرمائید.

طراحی واکنش گرا (Responsive Design)

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

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

طراحی رسپانسیو responsive

نظرات و سوالات کاربران

پاسخی بگذارید

نشانی ایمیل شما منتشر نخواهد شد. بخش‌های موردنیاز علامت‌گذاری شده‌اند *