طراحی وب سایت یک شرکت تولید تجهیزات آزمایشگاهی

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

مقدمه

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

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

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

• 1) دسترسی آسان و امکان جستجو:

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

• 2) به روز بودن اطلاعات:

در حالیکه وارد کردن تغییرات در متن کتابچه ها یا کاتالوگها معمولاً در دوره‌های یکساله انجام گرفته است، انجام این کار می‌تواند در فواصل زمانی بسیار کوتاه حتی در چند دقیقه از طریق مدیر وب سایت صورت بگیرد.

• 3) ارتباط سریع و آسان و کم هزینه:

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

• 4) پردازش اطلاعات:

این امکان وجود دارد که اطلاعات مربوط به هر مشتری به طور آن لاین (Online) دریافت گردیده و به طور خودکار در سرور پردازش شده و نتیجه آن سریعاً در اختیار مشتری قرار داده شود.

اینکه یک وب سایت تا چه اندازه بتواند مفید واقع شود به عوامل مختلفی بستگی دارد، از جمله:

• کیفیت طراحی وب سایت
• کارایی سرویس دهنده (Server) ای که صفحات وب و فایلهای مربوطه روی آن قرار داده می‌شود.
• پهنای باند سرویس دهنده
• سرعت و کیفیت ارتباط اینترنتی کاربر

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

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

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

مروری بر اینترنت و وب

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

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

شبکه تارعنکبوتی جهانی – وب

وب مدتها پس از اینترنت پا به عرصه وجود گذاشت. کاربرد اولیه اینترنت برای تبادل اطلاعات و پست الکترونیکی بود. وب در سالهای 1989 الی 1991 توسط دانشمندی بنام تیم برنزلی در سوئیس متولد شد. انگیزه ایجاد این استاندارد  این بود که اطلاعاتی که افراد نیاز دارند در سندها و فایلهایی در کامپیوترهای مختلف ذخیره شده است.

شمای فیزیکی اینترنت

اینترنت شبکه‌ای است که کامپیوتر های بهم پیوسته؛ اینترنت یک چیز مستقل نیست که دیگران کامپیوتر هایشان را به آن متصل کنند. بلکه اینترنت خود حاصل بهم پیوستن این کامپیوتر هاست. در واقع وقتی به کامپیوترهای یک ارائه کننده خدمات اینترنت (Service Provider ISP Internet) متصل می‌شود، کامپیوتر شما هم جزئی از اینترنت می‌شود.

زبان علامت گذاری ابرمتن (HTML)

HTML زبان وب است. که با وجود مفصل بودن بسیار ساده است. متنی که در فایل HTML ای وجود دارد را می‌توان به 2 مقوله کلی تقسیم کرد.

مضمون (یا محوی) عبارتست از چیزی که کاربران می‌بینند و می‌خوانند.

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

پروتکل های اینترنت

به طور کلی پروتکل (Protocolo) قراردادیست برای انجام یک کار. در این مرحله به بعضی از پروتکل های مهم در مورد اینترنت اشاره می‌کنیم.

• TCP/IP

Tcp/ip ، که مخفف پروتکل کنترل انتقال/ پروتکل اینترنت است، یکی از پروتکل های معروف اینترنت است. این پروتکل ترکیبی است از دو پروتکل مستقل که به دلیل ارتباط تنگاتنگ آنها در ایجاد یک ستون فقرات برای اینترنت معمولاً یک جا مورد استفاده قرار می‌گیرند. پروتکل IP مسئول مکانیزم آدرس دهی و قطعه قطعه کردن داده‌هاست و TCP وسیله ای است برای اطمینان از رسیدن داده‌ها به مقصد و مکانیزم تصحیح خطا.

• HTTP

پروتکل انتقال ابرمتن وب است. چرا که پروتکل انتقال اسنا HTML روی اینترنت است. نکته در اینجاست که پروتکل HTTP در واقع بعنوان لایه‌ای روی TCP/IP عمل می‌کند. پروتکل HTTP یک پروتکل بدون حالت؛ یعنی اینکه در حین یک انتقال HTTP هیچ تماس مستقیم بین کامپیوتر میزبان و مشتری وجود ندارد. HTTP یک برهم کنش تقاضا/ پاسخ است.

• FTP

پروتکل انتقال فایل (File Transfer Protocol) کاری فراتر از نامش انجام می‌دهد. انتقال فایل بین کامپیوترهای متصل به اینترنت بر عهده این پروتکل است، ضمن اینکه خدمات زیر را نیز انجام می دهد:

1. تهیه لیستی از فایلهای موجود در کامپیوتر میزبان
2. حذف،‌ تغییر نام و جابجا کردن فایلها در کامپیوتر میزبان
3. جستجوی دایرکتوریهای کامپیوتر میزبان
4. ایجاد یا حذف دایرکتوری روی کامپیوتر میزبان

• Usenet

این پروتکل برای ارسال پیام به گروههای خبری مورد استفاده قرار می‌گیرد.در این پروتکل مخاطب پیام نه یک گیرنده خاص بلکه یک گروه خبری (news group) است.

• Telnet

این پروتکل برای ورود به کامپیوترهای دیگر و کار با آنهاست.

• Gopher

این پروتکل شبیه WWW است ولی با محبوبیت وب دیگر کمتر از آن استفاده می‌شود. با استفاده از این پروتکل، کامپیوتر مشتری می‌تواند از اطلاعات درون یک میزبان Gopher استفاده کند. تفاوت Gopher و وب در نحوه طبقه‌بندی اطلاعات آنهاست. به مجموعه اطلاعاتی که از طریق این پروتکل قابل دستیابی است،‌ فضای گوفر (Gopherspace) گفته می‌شود.

• Archie

این پروتکل وسیله‌ای است برای یافتن فایلها روی یک میزبان FTP و بویژه برای یافتن کپی فایلها بسیار مناسب. هر میزبان Archie، توسط ارتباط بی‌نام با میزبانهای FTP، همواره پایگاه داده خود را به روز نگه‌ می‌دارد.

• Chat و  Talk

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

برخی نکات تجربی که می‌تواند کیفیت طراحی وب سایت را ارتقاء دهد:

• 1- استفاده از جداول

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

• 2- کد encoding UTF-8

در صورتی که از فونت‌های فارسی در سایت استفاده گردد باید encoding صفحه بصورتی تعریف شود (UTF-8) که حروف در کامپیوتر کاربر بدرستی نمایش داده شود. در غیر اینصورت حروف فارسی، بصورت علامت نامربوط در می‌آید.

• 3- نوع کاربر احتمالی

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

• 4- تبلیغات

تبلیغاتی که در سایت قرار داده می‌شود، باید شکل اطلاع رسانی داشته باشد بطوری که باعث خستگی کاربر نگردیده و کاربر را علاقمند به مرور آن کند.

• 5- فونت های زیبا

درصورتیکه جهت زیباتر ساختن صفحات از فونت‌ها یا قلم‌های خاص استفاده می‌کنیم. بهتر است با استفاده از یک نرم‌افزار تصویری نوشته‌ها بصورت تصویر ذخیره و در سایت قرار داده شود! زیرا ممکن است این فونت‌ها در کامپیوتر کاربر نصب نشده باشد.

• 6- غنی بودن سایت

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

• 7- انتخاب سرویس دهنده

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

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

• 8- به روز بودن سایت update

اطلاعات مهم ارائه شده در سایت، مثلاً قیمت کالا باید در کوتاهترین زمان ممکن بروز گردد. همچنین پیوندهای ارائه شده در سایت باید بطور مرتب بازنگر می‌شود.

• پیشگفتار
• چکیده
• مقدمه

فصل اول

• مروری بر اینترنت وب
• اجزای تشکیل دهنده اینترنت
• Applicatio server
• 3-1- شبکه تار عنکبوتی جهانی- وب
• 3-2- شمای فیزیکی اینترنت
• 3-3- زبان علامت‌گذاری ابرمتن HTML
• 3-4- کاوشگرها
• 3-5- پروتکلهای اینترنت
• 3-6- آدرسهای اینترنت
• 3-7- وب دینامیک

فصل دوم

• HTML چیست؟
• محتوای فایل HTML
• ساختار یک فایل HTML

• 3-1- برچسب HTML
• 3-2- پاراگرافها (Paragraphs)
• 3-3- لیستها (Lists)
• 3-4- توضیحات (Comments)
• 3-5- پیوندها (LINKS)
  • اتصال به مستندات روی وب
• 4-1- اتصال به مکانهای خاص در داخل مستندات
  • تشریح بیشتر یک URL
• 5-1- انواع URL
  • فرمت بندی متن با HTML
• 6-1- استیل منطقی
• 6-2- استیل فیزیکی
• 6-3- تنظیم متن
• 6-4- فونت و اندازه فونت
• 5-6- استفاده از تصاویر، رنگها و زمینه
• 6-5-1- تصاویر در وب
• 6-5-2- تصاویر داخلی در HTML
• 6-6- تنظیم متن و تصویر
• 6-6-1- تنظیم فضای اطراف تصویر
• 6-6-2- استفاده از تصاویر خارجی
• 6-6-3- ایجاد جایگزین برای تصاویر
• 6-6-4- تغییر ابعاد و مقیاس تصویر
• 6-6-5- کادر تصویر Image Border
• 6-6-6- پیش نمایش تصویر
• 6-6-7- استفاده از رنگ
• 6-6-8- زمینه‌های تصویری
• 6-7- نگاشت تصویر (Image Maps)
• 6-7-1- مشخصه USEMP
• 6-8- فرمها
• 6-8-1- اجزای فرم در مرورگر و سرویس دهنده
  • مختصری در مورد نرم افزار فرانت پیج (Pront page)

فصل سوم

• نکات تجربی برای ارتقاء کیفیت طراحی وب سایت
• کدهای HTML صفحات سایت
• ضمیمه
• Source cod
• منابع مورد استفاده