از طرح اولیه تا برنامه نویسی سایت

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


جزئیات دقیق نقشه کلی وبسایت

در فصل قبل مطابلی راجعبه نحوه ترسیم طرح اولیه فراگرفتید. همانطور که میدانید طرح اولیه درواقع همان نقشه کلی سایت بوده ولی از آنجا که هریک از صفحات نیاز به محتوی یعنی متن و گرافیک دارند، لازم است در این مرحله قدری روی ساختار سایت تامل کنید.
بهطورکلی، ابتدا طرح اولیه مربوط به متن هر صفحه ترسیم و پس از اطلاع یافتن از بازار هدف، اینکه چه چیزهایی باعث تحریک مردم به خرید میشود و همینطور تقاضای بازار، مرحله بعدی یعنی بازنگری در متون و ویرایش آن توسط نویسنده آگهیهای تبلیغاتی (Copywriter) آنلاین آغاز میشود. معمولاً نویسندگان آگهیهای تبلیغاتی آنلاین در زمینه تبلیغات دارای زمینه ذهنی هستند و میتوانند با کمترین لغات مفاهیم پرمعنی بسازند و میدانند چگونه توجه مخاطبان را جلب کنند. آنها میدانند کاربران اینترنتی معمولاً عادت ندارند مطالب موجود در صفحات را مطالعه کنند. بلکه میخواهند هرآنچه میبینند در مدت زمان بسیار کوتاهی بهدست آورند. مرحله بعدی، مدت زمان کوتاهی جهت اجرا میطلبد ولی نکته مهمی دارد.
به محض اینکه نویسنده آگهیهای تبلیغاتی آنلاین، ترفندهای مخصوص به کار خود را به انجام رساند، میتوانید آن را مرور و سپس تائید نمایید. بایستی اطمینان حاصل کنید که تنها شکل کار تغییر یافتهاست، نه مفهوم آن.
در مرحله بعدی بازاریاب اینترنتی محتوای سایت را بازنگری و ویرایش میکند. بازاریاب اینترنتی کسی است که در موتورهای جستجو ومعیارهای ردهبندی آنها و همینطور عوامل موثر بر بالابردن تعداد بینندگان سایت و اخذ اجازه بازاریابی از مشتریان تجربه و تخصص دارد. بازاریاب اینترنتی متون و گرافیک سایت را بازنگری میکند و مجدداً از قرارگرفتن صحیح کلید واژهها در مکان مناسب بهمنظور دستیابی به رتبه بالا در موتورهای جستجو اطمینان حاصل میکند. انتخاب صحیح کلید واژههایی که در عنوان (Title) هریک از صفحات، متون داخل صفحه، Meta Tag : (تگی در سندهای HTML یا XML که به ایجاد کننده صفحه وب امکان میدهد تا اطلاعاتی چون نام مولف، کلمات کلیدی شناسایی، محتوای صفحه و جزئیات توصیفی (مثلاً شیهای غیر متنی موجود در صفحه) را در سند بگنجاند. اطلاعاتی که با این تگها مشخص میشوند به هنگام مشاهده سند با یک مرورگر در صفحه وب ظاهر میشوند اما آنها را نمیتوان در متن XML یا HTML مشاهده نمود. این تگها در سرآیند سند گنجانده میشود و اغلب موتورهای جستجو را در شاخص کردن صفحهها یاری میکنند.) و description، تگهای Alt و تگهای comment به کار میرود نیاز به دانش ئ تخصص دارد.
معمولاً بازاریاب اینترنتی محتوای چنین تگهایی، عناوین صفحه و سرصفحه (header) را دراین مرحله وارد میکند. برخی اوقات بازاریاب اینترنتی، بخشی از گروه سازندگان وب (Web Developer) را تشکیل میدهد و برخی اوقات خود یک فعالیت جداگانه محسوب میشود. توضیحات مربوط به نحوه طراحی سایت برای تاثیرگذاری در موتورهای جستجو در فصل 6 آمدهاست.
همچنین بازاریاب اینترنتی باید مسائلی چون استفاده صحیح از ژنراتورهای بالابردن تعداد بینندگان سایت (به فصل 3 مراجعه کنید)، تکنیکهای مناسب جهت اخذ اجازه بازاریابی (به فصل 5 مراجعه کنید)، و تکنیکهای صحیح بازاریابی ویروسی (به فصل 4 مراجعه کنید) به دقت بررسی و از بکارگیری آنها در سایت اطمینان حاصل کند. لازم است باردیگر تغییرات انجام شده روی سایت را بررسی کرده و مطمئن شوید پیامی که قصد دارید به بازار هدف منتقل کنید، روی سایت بکار رفته است.
در مرحله بعدی مسئله طراحی گرافیک سایت مورد بررسی قرار میگیرد. برخی اوقات گرافیست سایت بخشی از گروه سازندگان سایت را تشکیل میدهد و برخی اوقات خود فعالیت جداگانهای محسوب میشود. گرافیست، زیبای و احساس را به سایت میبخشد و نحوه نمایش مجموعه لینکها (navigation bar)، پسزمینه و قرارگرفتن سایر اجزای سایت را طراحی میکند. گرافیست سایت میداند که باید هویت آفلاین و آنلاین شرکت را در سایت پیاده نماید. باردیگر لازم است طراحی گرافیکی سایت را بازنگری و تایید نمایید.
پساز انجام و تایید تمامی این کارها، وارد مرحله بعدی سایت یعنی برنامهنویسی میشوید.


نکاتی درباره محتوا

اطلاعات مربوط به تماس را در دسترس مشتریان سایت و در تمامی صفحات قراردهید. این اطلاعات شامل نشانی، شماره تلفن یا نمابر و به ویژه نشانی پست الکترونیکی است. درنظر داشتهباشید که مردم باید بتوانند بهراحتی با شما ارتباط برقرارکنند.
از قراردادن عبارت «در دست احداث» (Under Construction) جدداً خودداری نمایید. این عبارت هیچ ارزشی نزد بیننده ندارد. وقتی اطلاعات و مطالب موجود در صفحه کاملاً آماده شد، فایلهای سایت را به اینترنت منتقل کنید. تازمانی که اطلاعات آماده نشد، از بکاربردن این عبارت پرهیز نمایید.
اطلاعات امنیتی: به مشتریان خود درباره امنیت معاملات و مبادلات توضیح دهید. این مسئله زمانی اهمیت پیدا میکند که قرار باشد مشتریان با استفاده از کارت اعتباری اقدام به خرید و سفارش از طریق سایت نمایند.
سیاست خصوصی: به مردم توضیح دهید با اطلاعات شخصی آنها از قبیل نام، آدرس Email و غیره چگونه رفتار خواهدشد. عنوان کردن این مطالب باعث میشود بینندگان سایت هنگام پرکردن فرم و یا ملحق شدن به لیستهای پستی احساس آرامش کنند.
سعی کنید از پسزمینههای مصوت و یا موسیقیهایی که بهطور خودکار پساز بالاآمدن سایت پخش میشوند، کمتر استفاده کنید. برخی از کابران در محل کار خود از اینترنت استفاده میکنند و سایتهایی که همراه با بالاآمدن، موسیقی پخش میکنند، برخلاف میل کارمندان بوده و موجب برهمخوردن آرامش در محیط کار میشود. بینندگان سایت را وادار به گوش دادن موسیقی نکنید بلکه گزینهای پیشروی آنها قراردهید تا بتوانند خود انتخاب نمایند. درغیراینصورت، برای همیشه بینندگان سایت را از دست خواهیدداد.


نکاتی درباره متن

لحن بکار رفته در متن و طراحی گرافیک تاثیر بسزایی در انتقال مفاهیم موردعلاقه در سایت دارد. هنگام تعیین محتوای متنی سایت، این واقعیت را به خاطر داشتهباشید که تعصبات شما ممکن است مانع از قرارگرفتن صحیح اطلاعات را درسایت شود. درحالی که این اطلاعات از نظر شما در درجه دوم اهمیت قراردارند ولی ممکن است برای بینندگان سایت در درجه اول اهمیت قرارداشتهباشد.
بنابراین تمامی متون سایت را مجدداً بررسی کنید تا اطمینان حاصل کنید مطلب مهمی از قلم نیافتادهاست.
سعی کنید متون سایت نیز خلاصه و کوتاه باشد. تقریباً 80درصد از کاربران وب با حجم وسیع اطلاعات مواجه میشوند، بهجای مطالعه، تنها آن را اسکن میکنند. بنابراین، نکات مهم مطالب خود را واضح و روشن بیان کنید و از لیستهای بولتی (Bulleted)، تیتر و خطوط افقی (Horizontal Lines) برای ایجاد فضای خالی در متن استفاده کنید. بکارگیری این عناصر موجب ایجاد علاقه در بینندگان برای مطالعه مطالب سایت میشود.
این درحالی است که اگر بینندگان با حجم وسیع اطلاعات مواجه شوند، در این حجم از اطلاعات غوطهور شده و از مطالعه مطالب خودداری میکنند. پس بهتر است آنقدر مطالب در سایت قرارندهید که بینندگان سایت فقط آن را اسکن کنند.
اندازه متون را آنقدر کوچک درنظر نگیرید که خواندن آن دشوار باشد. و یا آنقدر بزرگ نباشد که زننده بهنظر آید. حروف بزرگ حالتی مثل دا***ن دارند و سعی کنید از آنها کمتر استفاده کنید.


نکاتی درباره رنگ

سعی کنید تصاویری که در سایت بکار میبرسید با تصاویر که در غیر از محیط وب استفاده میشود، هماهنگی داشتهباشند. در استفاده از آرم، رنگهای مورد استفاده شرکت و سایر عناصر مربوط به بازاریابی شرکت نیز هماهنگ عمل کنید.
در انتخاب پسزمینه (Background) و رنگ فونتها دقت کنید. استفاده از پسزمینههای بسیار شلوغ مشکلاتی در خواندن متن بوجود میآورد و تجربه بدی از صفحه درنظر بینندگان باقی میگذارد. فقط برخی از رنگها برروی برخی از پسزمینههای مخصوص به درستی نمایان است. خواندن متنی با رنگ سیاه برروی پسزمینهای با رنگ روشن آسانتر است.
متن سفید بر روی پسزمینه مشکی و متن سیاه بر روی پسزمینه سفید خواناتر است. البته میتوان از رنگهای دیگر نیز بهره جست ولی همانطور که اشاره شد، باید در استفاده از آنها دقت کافی نمود. بدترین حالتی که ممکن است یک سایت وب داشته باشد ناخوانابودن متن موجود در آن به علت استفاده از رنگهای ناهمگون است. بهخاطر داشتهباشید امکان دارد برخی از کاربران بخواهند برخی از صفحات سایت را چاپ کنند و اگر متون بلند و طولانی در کنار پسزمینههای گرافیکی باشند، نطالعه متن هنگام چاپ برای کاربران دشوار خواهدبود. علاوهبراین، سایتهایی که گرافیک آنها قوی است، بسیار کند بارگذاری میشوند. درصورتیکه مجبور به استفاده از متن به همراه گرافیک هستید، اطمینان حاصل کنید که متن در زمینه گرافیکی خوانا باشد.
حتیالمکان از رنگهای پیشگزیده (Default) برای لینکها استفاده کنید. معمولاً متن آبی نشانگر لینکی است که هنوز محتویات آن ملاحظه نشدهاست. ارغوانی، بنفش و یا آبیتیره نیز معمولاً نشاندهنده لینکی است که درون آن ملاحظه شدهاست و قرمز نمایانگر لینک فعال میباشد. باید کاربران بتوانند به آسانی لینکهی موجود در صفحه را از روی رنگ آنها تشخیص دهند. اگر تصمیم گرفتهاید از رنگهایی به غیر از رنگهای پیشگزیده استفاده نمایید، باید لینکهای سایت با فونت، Style و یا زیر خط دارشدن (Underline) متمایز شوند.


نکاتی راجع به مجموعه لینکها (Navigation)

سهولت انتقال به بخشهای مختلف سایت از اهمیت بالایی برخوردار است. سعی کنید در تمامی صفحات نوار پیمایش (Navigation bar) را در مکان مشخصی بگذارید که لینکهای موجود در آن کاربر را به سایر صفحات سایت هدایت کند. انتقال از صفحهای به صفحه دیگر را برای کاربر آسان سازید. از آنجایی که موتورهای جستجو میتوانند هریک از صفحات سایت را فهرستبندی کرده و جستجوگران را به آن صفحه هدایت کنند، لذا صفحه اصلی (Home Page) اولین صفحهای نیست که کاربران از آن دیدن میکنند. هرگز در انتهای صفحات وب بنبست ایجاد نکنید بهطوریکه کاربر پساز رفتن به پایین صفحه مجبور باشد مجدداً به بالای صفحه بازگردد (به دلیل نبودن لینکی در پایین صفحه). وجود مجموعه لینکهای یکنواخت در جاهای مناسب و لینکهای کاربردی از مشخصات مهم سایت است.
بینندگان سایت باید بتوانند به راحتی و تنها با سهبار کلیک کردن به تمامی نقاط سایت بروند. سعی کنید مجموعه لینکهای سایت خود را به روشی که ذکر آن رفت، پیاده کنید. در مورد سایتهای بزرگ (منظور سایتهایی است که دارای هشت الی دهبخش اصلی هستند) بهتر است نقشه سایت تهیه گردد تا بدین وسیله کاربران به تمامی صفحات سایت دسترسی داشتهباشند. نقشههای سایت همچنانکه در شکل 1-2 و 2-2 ملاحظه میکنید، معمولاً فهرست متنی هستند که در آن تمامی صفحات سایت با ذکر عبارتی درباره محتویات آن صفحه نشان داده میشود. نقشه سایت موجب میشود کاربران بدون هیچگونه سردرگمی، به سهولت به اطلاعات موردنیاز خود دست یابند . میتوانید برای نقل و انتقال آسان کاربران در میان صفحات سایت، یکی از لینکهای navigation bar را به نقشه سایت اختصاص دهید.
جستجوی داخلی در سایت، یکی دیگر از ابزارهای اضافی است که میتوانید آن را در صورت تمایل در سایت قرار دهید. بدین وسیله کاربران قادر خواهندبود واژه مورد جستجوی خود را در سایت وارد کرده و نتایج آن را مشاهده نمایند. بهخصوص زمانیکه قرار است محصولات زیادی را مستقیماً در سایت به فروش برسانید و یا سایت دارای اطلاعات و مطالب زیادی است، ابزار جستجو بسیار مورداستفاده قرارمیگیرد. این ابزار سبب میشود کاربران با استفاده از نام محصول و یا کلید واژههای مرتبط با آن، اطلاعات موردنیاز خود را به سرعت جستجو کنند. به عنوان مثال، شرکت اینتل دارای چندین سایت است که محصولات و خدمات خود را در آن عرضه میکند و برای کمک به کاربران در دستیابی به اطلاعات موردنظر، اقدام به پیادهسازی ابزار جستجوی کارآمد در سایت نمودهاست. در طراحی سایت نیز یکنواخت عمل کنید. برای اینکه چشمانداز سایت آراسته و حرفهای بهنظر آید، لازم است تمامی اجزای آن از جمله نوع فونت، header، پاصفحه(footer)، مجموعه لینکها (Navigation Bar)، دکمهها، بولتها (bullets) رنگها و غیره باهم هماهنگی و تناسب داشتهباشند.

گرافیک

فایلهای گرافیکی (که در آنها از رنگها و *****ها متعددی استفاده میشود) به علت حجم بالا موجب کندشدن بارگذاری و در نتیجه منصرف شدن کاربران از بالا آمدن سایت میشود. برای جلوگیری از وقوع چنین حالتی توصیه میشود حجم فایلهای گرافیکی صفحات وب با متن و گرافیک از 50کیلو بایت تجاوز نکند.
برخی از مردم عادت دارند برای جلوگیری از اتلاف وقت، تنظیمات مربوط به گرافیک را در مرورگر خود غیرفعال نگه میدارند، بنابراین بایستی بجای استفاده از گرافیک، تمامی اطلاعات خود را در قالب متن ارائه کنید. بهتر است در تصاویر خود از تگ توضیحی Alt استفاده نمایید. با این کار درصورتی که تصویر گرافیکی موجود در صفحه به هر دلیلی ظاهر نشود، متن نوشته شده در تگ Alt به نمایش درمیآید. کاربرانی که عدم نمایش گرافیک را در مرورگر خود فعال کردهاند، به آسانی و در مدت کوتاهی میتوانند بین صفحات سایت جابجا شوند. علاوهبراین، موتورهای جستجوی معروف، هنگام جستجو در وب، ویژگی Alt را در فهرستبندی خود وارد کرده و آن را ذخیره میکنند. از سویی، بکارگیری کلید واژههای مناسب در متن تگ Alt، موجب بالا رفتن رتبه سایت در موتورهای جستجو شده و در صورت بالا نیامدن تصاویر، متن مندرج در تگ Alt به نمایش درمی آید.
نکته: متن توضیحی همراه تصویر در وبسایت را ویژگی Alt گویند.
درصورتیکه مجاب به استفاده از هرگونه فایلهای گرافیکی، صوتی و یا ویدئویی هستید، در داخل متن اندازه فایل را به بینندگان گوشزد کنید.
حتیالامکان از تصاویر (Thumbnail) استفاده نمایید. وقتی که قراراست در صفحه تصاویر زیادی بکار گرفتهشود (به عنوان مثال در صفحات دارای آلبوم آنلاین عکس) نسخه انگشتی (Thumbnail) هر تصویر را در صفحه قرار دهید به طوریکه کاربران با کلیک بر روی تصویر کوچک، در صفحه جداگانهای نسخه بزرگ آن عکس را مشاهده نمایند. با این کار دیگر کاربران مجبور نخواهندبود برای مشاهده یک عکس بزرگ مدت طولانی منتظر بارگذاری تصویر شوند.
همچنین لازم است هنگام استفاده از نقشه تصویری (Image Map) دقت نمایید. منظور از نقشه تصویری تصاویر گرافیکی بزرگی با hot sport (Hot Sport: نقطهای از Image Map که در آن لینکی به صفحهای دیگر برقرار است.) قابل کلیک است: به عنوان مثال نقشههای تصویری در Navigation کاربرد دارند و معمولاً در گرافیک آنها متنی بکار رفته است. از آنجایی که موتورهای جستجو قادر به تشخیص متون داخل تصویر گرافیکی نیستید.، بنابراین برای معرفی سایت در موتورهای جستجو، شایسته است هنگام استفاده از نقشههای تصویری، از متون مناسب و مرتبط در تگهای Alt استفاده کنید.
اغلب اوقات، تصاویر بزرگی برای Image Map استفاده میشود و کاربران بدون اینکه بدانند کجا باید کلیک کنند تا بتوانند به سایر صفحات سایت بروند، مجبورند منتظر بارگذاری کل تصویر گرافیکی بمانند. میتوانید به جای استفاده از نقشههای تصویری بزرگ، تصاویر بزرگ را به تصاویر کوچکتری تبدیل کنید تا بینندگان سریعتر به موضوع سایت پی میببرند. همچنین سعی کنید همیشه برای کسانی که قابلیت بارگذاری تصاویر را در مرورگر خود غیرفعال کردهاند، از سیستم Navigation متنی بهره گیرید.


نکاتی درباره تصویر

پس از اتمام طراحی سایت، آن را در مرورگرهای متفاوت کنترل کنید. آنچه بینندگان در سایت مشاهده میکنند، به نوع مرورگر نیز بستگی دارد. ممکن است یک سایت در مرورگرهای متفاوت به طرق مختلفی نمایش دادهشود. قبل از انتقال آنلاین سایت، آن را در مشهورترین مرورگرها کنترل کنید، یعنی در مرورگرهای:
Netscape Navigator 7.x
Netscape Navigator 6.x
Netscape Navigator 4.x
Microsoft Internet Explorer 6.x
Microsoft Internet Explorer 5.x
Microsoft Internet Explorer 4.x
America Online 7.x
America Online 6.x
همچنین از نمایش سایت در سیستمهای مکینتاش و PC اطمینان حاصل کنید. هنگام طراحی سایت، اندازه پهنای صفحه مانیتور را نیز درنظر داشتهباشید. سایت را بهگونهای طراحی کنید که بینندگان بدون درنظرگرفتن درجه وضوح (Resolution) مشخصی بتوانند آن را مشاهده نمایند. برخی از کاربرای هنوز سیستم خود را روی 640 پیکسل برای پهنا و 480 پیکسل برای درازا تنظیم میکنند، بنابراین هنگام طراحی سایت این افراد را مدنظر داشتهباشید.
باید وبسایت عاری از هرگونه متن در حال حرکت (Scrolling-Marquee) باشد. خواندن متون در حال حرکت دشوار بوده و همه مرورگرها قادر به نمایش آن نیستید و تنها در Internet Explorer قابل مشاهده است. درصورتیکه متنی دارید که میخواهید مورد توجه قرارگیرد میتوانید آن را با حروف درشت بنویسید.
نکته: Home Page مهمترین صفحه سایت.


سایر نکات

اندازه فایل صفحه Home Page باید 50 کیلوبایت و یا کمتر باشد.مطالعات صورت گرفته نشان میدهند، بینندگان بیش از 15 ثانیه منتظر بارگذاری سایت باقی نمیمانند. زمان بارگذاری سایت را با سرعتهای متفاوت اینترنت آزمایش تا اطمینان یابید زمان بارگذاری آن برای تمامی کاربران منطقی و پذیرفتتنی است.
از لینکهای مرده (dead Links) بر روی سایت پرهیز کنید. لینکهای مرده به صفحهای یا جایی دیگر نمیروند و معمولاً کاربران پساز کلیک برروی آن با پیام خطایی نظیرFound 404-File not از سوی وب سرور مواجه می شوند. به همین جهت لازم است هرازگاهی لینکهای موجود در سایت را از لحاظ درستبودن مقصد بررسی نمایید.