جستجو در تک بوک با گوگل!
468
بازدید
مقدمه
طراحی صفحات ب موضوعی کاملاً سلیقه ای است اینطور به نظر می رسد که بیشتر مردم دقیقاً می دانند که سلیقه شان چه چیزی را می پسندد و چه چیزی را رد می کند .
اما زیبایی و ظاهر یک سایت فقط نیمی از داستان است و اغلب مشکلاتی نظیر قابلیت استفاده مشکلات اجرای فنی ، و صفحاتی که به کندی بارگذرای می شوند نیمه دیگر آن است که من سعی کرده ام آن را در این پروژه بیشتر مورد بررسی قرار دهم
در اینجا هدف آن است مه مباحثی فراتر از رفتار های بصری مورد بحث قرار گیرند ، مواردی که باعث می شوند سایت ها به درستی کار کنند . قابلیت استفاده مطمئناً یکی از این موارد خواهد بود . من تلاش کرده ام تجربیاتی که از ساخت سایت ها در طی چندین سال کسب کرده ام را در اختیار تان بگذارم ، برخی پروژه هایی که کار کرده ام موفقیت آمیز بوده اند و برخی دیگر با شکست روبه رو شده اند و من نه تنها از موفقیتهای ، بلکه از شکستها نیز درس گرفته ام و البته در صنعتی به جوانی طراحی وب ، تجربه بهترین معلم است ، من در این پروژه سعی کرده ام توازنی بین خواسته های طراح و نیاز های کاربر ، شکل ظاهری و عملکرد و منحصر به فرد بودن و انسجام بر قرار کنم ، البته با توجه به آنچه که در رسانه آشفته ای به نام وب قابل اجرا است .
بعد از مطالعه این پروژه بی خوبی درک خواهید کرد که طراحی وب ترکیبی از هنر علم و ، الهام و اجرا ، و در نهایت ناکامی و سربلند است ، شما ممکن است در زمینه طراحی و زیبا سازی سایت تبحر داشته باشید ولی در ز مینه تکنولوژی و یا تحویل سایت با مشکل مواجه باشید . حقیقت آن است که طراحی وب این دو جنبه را با هم احاطه کرده است و سرمایه گذاری در شناخت عمیقتر رسانه و مشکلات فنی در پروژه های آتی سودمند خواهد بود
با این حال هنگامی که این کتاب را می خوانید ممکن است تمام توصیه های ارائه شده از جانب من موافق نباشید و حتی شاید در یابید که بعضی قوانین و توصیه ها از انسجام کافی برخوردار نیستند . اما همانها نیز ممکن است جرقه ای را در ذهن شما باعث شوند و نقطه شروعی برای کشف های تازه به حساب بیایند . بنابراین قبل از آنکه چنین قوانین و توصیه هایی را فراموش کنید بهتر است آنها را بسنجید . طراحان بزرگ ، صرفنظر از رسانه ای که حوزه کاری آنها محسوب می شود ، سعی می کند ابتدا قوانین وضع شده را به خوبی شناخته ، سنجیده و سپس در صورت لزوم تغییر دهند . پیشرفتهای واقعی به ندرت به خاطر نادانی یا خود بینی اتفاق می افتند .
متأسفانه یک فرآیند گام به گام ثابت و تضمین شده جهت ساخت یک سایت وب عالی وجود ندارد . برخی چیز ها واقعاً نیاز به تجربه دارند . ایجاد یک سایت مطلوب و کامل نیازمند ساختن سایت های بی شماری و حتی مرور کردن سایت های ساخته شده است . با این حال می توانم بگویم که اگر شما این پروژه را بخوانید ، حداقل نصف آنچه که برای سا ختن سایت های عالی نیاز دارید را فرا خواهید گرفت . باقی کار به عهده شما و خلاقیت شماست .
باتشکر،
بهنام ناطق
ماهیت وب
بیشتر طراحان وب از نقطه نظر نگاه خود به طراحی وب می پردازند ، آنها علاقمند هستند که خودشان را با استعارات مشخص و با تبلیغات فراوان نشان دهند . به هر جهت اینترنت برای شما ایجاد تجارت و نیز قابلیتی برای ارتباط نزدیک ارائه می دهد .کاربران می‌توانند اطلاعات و محصولاتی را که در خور نیازشان میباشد را پیدا کنند .
در این اینجا شما با انواع ابزارهای طراحی آشنا خواهید شد و به طبیعت آنها نیز پی خواهید برد . اینترنت معمولی‌ترین رسانه واسطه‌ای است که کاربر را آماده می‌سازد که تصمیم بگیرد که چه رسانه‌های انتشاری ، اینترنت یک رسانه تبادلی ( دو طرفه ) تلقی
شود .
اکثراً رسانه‌ها تأثیر گذار هستند و هدف آنها ایجاد علاقه کافی است تا اینکه سرانجام بتواند تبادل مطلوب را انجام دهند .
ماهیت خواندن یک مجله و یا دیدن برنامه‌های تلویزیون ذاتی و بالفطره نیست و معمولاً کار انفردی است . در اصل عمل خواندن مطبوعات یا تماشای برنامه‌های تلویزیونی بالفطره عملی تبادلی نیست و در حقیقت بین عمل خواندن یا تماشای تلویزیون با عمل تبادل تفاوت وجود دارد . تنها تبادل انجام شده در مورد خوانندگان و بینندگان ، گرفتن اطلاعات از طریق خواندن یک کتاب یا مجله یا تماشای برنامه تلویزیون است . ( بصورت یک طرفه )
بنابراین ایجاد اطلاعات جهت رسانه‌های گروهی به راهکارهای متفاوت‌تری نسبت به ایجاد اطلاعات مربوط به اینترنت نیاز دارد .
مشاهدات بی عیب اینترنت مانند ثبت رویداد بر روی مرورگر وب ، دلالت بر درخواست کاربران و واکنش سرور دارد . به عبارت دیگر انجام یک داد و سند و تبادل می باشد .
بعلاوه با این طبیعت ، اینترنت نمی تواند بصورت خطی عمل کند . اگر کاربر تصمیم به انجام داد و ستد و تبادل داشته باشد ، ابتدا باید به سایت راهنمایی و هدایت شود، و سپس برای تجارت در سایت بماند و گردش کند و در پایان دوباره به سایت بازگردد و نیز باید در نظر داشت که کاربر می‌تواند برای انجام داد و ستد در هر لحظه به هر سایت دیگری مراجعه نماید .
هدایت و توسعه وب جاری
پیشرفت وب از چند سال پیش شروع شد اضافه شدن چند رسانه‌ای ها در وب ، دلالت بر پیشرفت وب دارد . این نوع جدید از اطلاعات در حال حاضر در اینترنت قابل دسترس میباشد . محتوای اطلاعات عبوری در اینترنت به عنوان جزء اصلی خیلی از پروژه‌ها و برنامه‌ها محسوب میشود . مزیت عبور اطلاعات در بازتاب اطلاعات و آمار و ارقام میباشد . به این صورت که در زمانی که کاربر آن را در خواست کند از پایگاه داده‌ها عبور میکند و بدست کاربر می‌رسند . اینترنت دومین پیشرفت خود را بعد از ایجاد تجارت الکترونیک در تاریخچه توسعه وب انجام داد . کارمندان شرکتها و صنایع می توانند با این توانایی عبور اطلاعات تجاری خود را از خانه انجار سال و دریافت کنند و نتیجه آن خیلی کارآمدتر و پربارتر از حضور در محیط کاری میباشد . شبکه داخلی شرکت با بکارگیری وب برای فروشندگان بیرونی و شرکای تجاری می‌تواند اطلاعات درخواست شده را سریعتر از بیرون انتقال دهند و سلسله مراتب یک تجارت را به پیش ببرند .
برای مثال شرکت A برای شرکت B کاغذ تولید میکند اگر کمپانی A بخواهد به شرکت B دسترسی پیدا کند این امر با بکارگیری شبکه داخلی شرکت امکانپذیر میباشد . بنابراین شرکت A می‌داند که چه موقع شرکت B به محموله‌ای دیگری نیاز دارد و نیز شرکت A می‌تواند نخستین قدم برای تهیه محموله قبل از درخواست از طرف شرکت B را بردارد .
ابزارها و تکنولوژی
سالها مذاکرات زیادی درباره اینکه چه ابزارهای خاصی در فرآیند گسترش وب استفاده میشود ، وجود داشت . به هر جهت امروزه خیلی از ابزارهای ویرایشگر وب در رده‌های چهارم و پنجم قرار گرفتند .
مذاکرات بیشتر پیرامون آن بود که طراحان وب از کدام ابزارها استفاده کنند نه اینکه صرفاً بخواهند از ا بزاری خاص استفاده کنند . بطور ایده‌آل ترکیب کد های دستی و WYSIWYG بهترین گزینه از نقطه نظر توسعه امروزی است . انجام این عمل ساده زمان زیادی برای توسعه یک سایت HTML با کد نویسی را می‌گیرد . احتیاجات به روز رسانی اطلاعات مستلزم آن است که بین صفحه وب و یک سایت محلی اتحاد و پیوستگی ایجاد شود . امروزه WYSIWYG از استاندارد خارج شده است .
و از Dream Wearer , Front Page استفاده میشود . در آینده می‌توانید تشکیلات خود را به آخرین درجه پیشرفت برسانید و همواره با زمان جلو روید این ابزارهای قدرتمند که در صنعت نیز قابل رقابت هستند در دوره CIW ارائه خواهند شد . این ابزارها با هم هماهنگی خاصی دارند .
رسانه‌های واسط
طراحان وب باید در مورد دیگر تفاوتها و مشکلاتی که در طراحی وب در مقایسه با رسانه‌های دیگر بخصوص چاپ پیش میآید آگاه شوند . در ابتدای زمان طراحی وب ، بسیاری از سایتها بصورت HTML ساده و بصورت بروشورولی باخاصیت وب توزیع می‌شدندو این شیوه باعث شد که کمپانیها خیلی سریع اطلاعات خود را بر روی وب ارسال کنند . بعلاوه وب به عنوان قلمرو جدید بود که نه سندیتی برای آن وجود داشت و نه اطلاعات معتبری برای تأئید اعتبار آن بود .
بیشتر کمپانیها خیلی زود آموختند که ارسال بروشور بر روی وب موثر تر از استفاده از رسانه‌های دیگر نیست . به طور کلی در یک جمله می‌توان گفت صفت چاپ خاصیت خطی دارد یعنی از یک خط به خط دیگر و از یک صفحه به صفحه دیگر . ….
ولی وب یک رسانه خطی نیست و به همین سبب خواص متفاوت‌تری دارد و هنگامی که در داد و ستد از آن به عنوان یک قالب خطی استفاده شود خواص متفاوتی از خود بروز می‌دهد . بیشترین ویژگی متفاوت وب در برقراری ارتباط دو طرفه با کاربران میباشد . صنعت چاپ نمی‌تواند مشاهدات کاربران را بصورت فرم تخصصی در آورد . و در یک جمله دیگر می‌توان گفت رسانه وب می‌تواند امکانات ارتباط دو طرفه را به بهترین صورت انجام دهد و برای کاربر فرم شخصی ایجاد کند . و این پدیده یک ارتباط مستقیم بین تجار و کاربران ( خریداران ) را برقرار میکند . در طی این کتاب شما با ابزارهای زیادی در توسعه صفحات وب آشنا خواهید شد اما توجه داشته باشید که هدف از این پروژه آگاهی شما از امکاناتی است که هر کدام از این ابزارها به شما می‌دهندو این شما هستید که در نهایت تصمیم گیرنده اصلی خواهید بود که کدام ابزار فواید بیشتری برای نظام مند شدن مقاصدتان دارد .
محاسبه مهارتهای HTML خود
در این تمرین شما مهارت HTML خود را با ایجاد یک صفحه ساده محاسبه خواهید کرد . شایان ذکر است که مندرجاتی شما بکار می‌برید می‌تواند متفاوت از مندرجات بکار برده شده در این تمرین باشد .
تمرین ایجاد یک صفحه وب پایه :
در این تمرین شما یک صفحه وب ساده ایجاد خواهید کرد و توانایی HTML خود را محک می‌زنید.
۱ـ از الگوی HTML برای ایجاد قالبهای زیر استفاده کنید .
ـ Table
ـ Hyper Link ( استفاده از پروتکل HTTP )
ـ Font
ـ Image
در این فصل شما با مفاهیم تکنولوژی و ابزارهای مورد استفاده آن و مختصراً‌با مشکلاتی که برای بکارگیری این تکنولوژی استفاده میشود آشنا شدید و در نهایت مهارت HTML خود را محاسبه کردید .
معرفی فصل
کیفیت مندرجات سایت شما و نمایش آن از عوامل موفقیتهای اصلی سایت هستند . یکی از بزرگترین اشتباهاتی که شما در ساخت و تولید و نمایش مندرجات روی وب دارید دخالت دادن استانداردها ، تمرین‌ها و تعهدات رسانه‌های دیگر مثل چاپ میباشد . وب رسانه متفاوت‌تری از بقیه رسانه‌های موجود است و بنابراین استانداردهای متفاوت‌تری برای توسعه آن نسبت به بقیه رسانه‌ها مثل چاپ ویدئو و سایر رسانه‌های سنتی وجود دارد . این فصل به شما خلاصه‌ای از بیشتر ملزوماتی که شما نیاز دارید برای توسعه کار آن آنها را در نظر بگیرید ارائه می‌دهد .
کاربران وب و نکاتی در طراحی سایت
حدس می‌زنید که چه مقدار از متن صفحه وب شما به طور واقعی توسط کاربر خوانده میشود ؟ تمام آن ؟ بیشتر آن ؟ حقیقت آن است که کاربران اغلب هیچ مقداری از آن را نمی‌خوانند . به دنبال این جمله باید گفت که درحدود ۸۰% از مردم فقط در مندرجات سایت پویش می‌کنندو به دنبال نکات و عبارت کلیدی می‌گردند . به طور متوسط ۲۵% کاربرای در خواندن روی مانیتور نسبت به خواندن از روی چاپ آهسته‌تر عمل می کنند . بنابراین ،این واقعیت چگونه بر ساختار صفحه شما اثر می‌گذارد؟ به عنوان یک طراح شما باید صفحه‌ای ایجاد کنید که کاربران بتوانند سریع آن را کاوش کرده و اطلاعات مطالبه کرده را پیدا کنند . بخاطر آورید که یکی از تناقضات در طراحی وب این است که تصور کنید که وب فرم دیگری از رسانه چاپ است . هنگامی که طرح یک صفحه با مندرجات مشابه به یک مجله و یا بروشور ایجاد می‌کنید کاربران به طور مسلم به سایت دیگری خواهد رفت چرا که شما در نظر نگرفتید که ماهیت مطالب بر روی وب باید با دیگر رسانه‌ها به خصوص چاپ متفاوت باشد . هنگامی که کاربران به سایت شما می‌رسند اولین حسی که در آنها ایجاد میشود از ا همیت زیادی برخوردار است . مثلاً ممکن است سایت وب شما که به قصد تجارت ایجاد شده است فقط یک پنجره داشته باشد ولی به هر حال اگر به نظر مشتری غیر جذاب باشد شما مشتری خود را به رقیب خود واگذار کردید . بنابراین اگر بدانید که بازدیدکنندگان فقط سایت شما را مرور می‌کنند متوجه خواهید شد که چرا نباید کاربران رامجبور به خواندن مطالبی کنید که برای آنها جالب نیست . کاربران را راضی نگه دارید و آنچه را که می‌خواهند به آنها عطا کنید ، حتماً آنها به سایت شما باز خواهند گشت . ( قابل ذکر است قواعد بازار یابی در سایتهای تجاری متفاوت تر از دنیای واقعی میباشد )
کاربران نمی‌خواهند که صفحات در هم و نامربوط را ببینند و ازطرفی محتویات و مندرجات سایت نیز ضروری است پس با این وجود ساختار و انتشار آن هر دو با هم از اهمیت برخوردار هستند . معمولاً کاربران سایت شما را برای اطلاعات ویژه‌ای که در مورد جستجو و یا خرید و … می‌خواهند بازدید می‌کنند .
هر چقدر این عمل برای آنها آسانتر باشد ، کارشان را راحت و سریعتر انجام می‌دهند. کاربران وب فقط علاقه‌مند به آنچه که می‌خواهند بیابند هستند . کسانی که در کارهای تجارت خرده و جزئی هستند اعتقاد بر این دارند که مشتری‌ها خود خواه هستند ، ولی آنها می‌دانند که پرداخت صورتحساب است که درهای تجارت را باز نگه می‌دارد و اگر شما این نکته را درک کنید صفحه‌ای بوجود خواهید آورد که ساختار آن اهداف تجارت کاربران را تأمین کند .
سایتی نظیر سایت www.xnn.com را در نظر بگیرید به محض ورود به سایت سریعاً می‌توانید مرور کلی از کل سایت داشته باشید و یا به عبارت دیگر شما می‌توانید کل سایت را با نگاه از یک عبارت به عبارت بعدی مرور کنید و آنچه را که بخواهید خیلی سریع بدست آورید . بنابراین تمایل به دیدن مجدد سایت را دارید . سایت فوق از نمونه سایتهای موفق در جهان میباشد .
واقعیت در طراحی
یک طراح وب باید برای فن‌آوری جدید و اینکه چگونه از ابزارها در طراحی استفاده کند آماده باشد و معمولاً طراحان جدیدترین سخت افزارها و نرم افزارها را به کار می‌گیرند . به هر جهت این انگیزه ایجاد می شود که شما باید صفحات دو طرفه دینامیکی ایجاد کنید که نرم افزارهای جدید و قدیم را حمایت کنند .اکثریت استفاده کنندگان وب به جستجوی طراحی عالی و پیشرفته نیستند و لی استثنائاتی همیشه در این قواعد وجود دارند . به هر جهت یک راهنمای خوب در هنگام طراحی وجود دارد که به قرار زیر است :
۱ـ بیشتر کاربران از مانیتورهای Inch 17 یا کمتر استفاده می کنند .
۲ـ بیشتر کاربران با تنظیم تفکیک‌پذیری ۶۴۰*۴۸۰ کار می‌کنند .
۳ـ بیشتر کاربران دارای مودم‌های با سرعت K56 هستند .
۴ـ اغلب کاربران مرورگرهای وزن ۴ به پایین دارند .
۵ـ تعداد کمی از مردم زمان زیادی را برای بارگذاری فایلها صرف می کنند .
همواره در طراحی وب نکات بالا را در نظر داشته باشید .
ساختار متناسب برای صفحه
طراحی اصلی روزنامه مورد علاقه خود را در نظر بگیرید . در صفحه روی جلد خبر اصلی وجود دارد و بعلاوه متون حاشیه‌ای هم در آن قرار دارد که خبرهای دیگر روزنامه در آن لیست شده است . این قضیه به چه نحوی در خواندن شما تأثیر می‌گذارد ؟ این طرح کلی شما را وادار به خواندن یک خبر در روی صفحه اول نمی‌کند . اگر خلاصه یک خبر که درستی آن را دنبال می‌کنید ببینید در آن شماره صفحه‌ای وجود دارد که از طریق آن می‌توانید وارد کل داستان شوید . یعنی با یک اتصال شما را به کل می رساند . این ساختار اغلب با ساختار یک هرم مقایسه میشود که در نمودار شکل زیر ترسیم شده است . در این مدل در ابتدا خلاصه داستان برای شما ارائه میشود سپس اتصال برای مأخذ و جزئیات آن برای کسانی که علاقه‌مند هستند قرار داده میشود . وب ایده‌آل ترین رسانه برای این نوع انتشار است .
با استفاده از ابر اتصالات می‌توانید کاربران خود را به شرح موضوعات در داستانها ، اخبار و محصولات و سرویسهایی که دارید هدایت کنید و نیز می‌توانید پیش تاریخ و اطلاعات مبسوط و زمان و منابعی را که روزنامه‌ها به دلیل فقدان جا نمی‌توانند ایجاد کنند را بوجود آورید . اگر کاربران بخواهند اطلاعات را به طور کامل بخوانند می‌توانند به سمت جهت تعیین شده هدایت شوند . به عبارت دیگر می‌توانند برای پیگیری قضیه حرکت کنند .
المانهای طرح بندی یک صفحه
قبل از شروع به ساختن صفحه یک دید کلی وساختار کلی از سایت را در نظر بگیرید. شما باید المانهای صفحه و نیز چگونگی فعل و انفعالاتی که آنها با هم دارند را بدانید . از نقطه نگاه بصری باید المانهای انتخابی را در داخل سایت ایجاد کنید که این المانها عبارتند از طرح ، رنگ ،نوع قلم ، تصاویر و چند رسانه‌ای‌ها و … طرح صفحه منوط به آن است که طراح بتواند اطلاعات خود را به کاربر نشان دهد این نوع قالب‌بندی باید برای درک آسانتر اطلاعات باشد مثل اسناد و گزارشها . این نوع ساختار به دسته بندی و ساده کردن ، ویرایش و توزیع و پخش اطلاعات کمک میکند به عنوان یک طرح وب باید ساختار خود را توسعه دهید و در این مرحله تجربیات کاربران می‌تواند برای شما بسیار مفید واقع شود .
موارد زیر را در هنگام طراحی یک صفحه در نظر بگیرید :
۱ـ Frameset اجازه می‌دهد که صفحات چند گانه شما بصورت واحد ظاهر شود.
۲ـ Margin کنترل میکند که مطالب چگونه و با چه فاصله‌ای از کادر مانیتور شروع شوند .
۳ـ Border برای Frame ها و جداول HTML استفاده می شود .
۴ـ رنگ ایجاد یک احساس گیرا و کلی از ساختار سایت و باعث ازدیاد توانایی خواندن میشود .
۵ـ Space جدا کردن المانهای صفحه
۶ـ Navigation برای کنترل کاربران برای حرکت در سایت
۷ـ Rule مندرجات صفحه را به قسمتهای جداگانه و و ابسته قسمت می کند .
۸ـ White Space باعث کم تر ک ردن بی نظمی المانهای صفحه می‌گردد .
۹ـ Table توزیع المانهای صفحه در جاهای مختلف صفحه و شکل دادن اطلاعات در ستونهای مخفی
۱۰ـ Lists به طرح اجازه می‌دهد تا اقلام را سازماندهی کنیم .
۱۱ـ Paragraph گروهی از کاراکترهای متنی در صفحه میباشد .
۱۲ـ Heading level ایجاد سایزهای گوناگون از متن و طراحی و سازماندهی آن.
۱۳ـ Image مورد استفاده در ایجاد جاذبه ابعادی ، اطلاعات ، Navigation
تعیین کنید که سایت شما کدامیک از این عوامل را در بر دارد و شما را در روند توسعه یاری می‌دهد و اگر به این عوامل پرداخته نشود به تدریج منابع و نیروها و زمان خود را از دست خواهید داد .
طرح معمول صفحه
وب سایتها از قالبهای اصلی و پایه برای نمایش اجزاء صفحه استفاده می‌کنند . شما می‌توانید این قالبهای معمول را از خیلی از سایتها ایده بگیرید .برای مثال Navigator معمولاً‌در قسمت چپ بالای صفحه نمایش داده می شود و رنگ این المان اغلب کمی متفاوت تر از رنگ بقیه صفحه است همچنین المان Navigation می‌تواند در پائین یک صفحه نیز قرار گیرد .
متن سیاه بر روی زمینه سفید و نیز قرار گرفتن تبلیغات کمپانی در بالاترین گوشه سمت چپ صفحه نمایش نیز از قالبهای متداول میباشد که اغلب بکار برده میشود . این قالبها و نیز قالبهای دیگر برای تشخیص اینکه از کدام قالب باید استفاده شود در عمل می تواند کمک کند . کاربران هنگامی که سایت شما را بازدید می‌کنند می‌دانند که چه توقعی از آن دارند . در اینجا نمی خواهم بگویم که کاربران باید مندرجات و محصولات سایت شما را بدانند ولی باید اساس و اصول استفاده از سایت شما را بداند و این اصل شامل کاربردهای مختلف Navigation و متون و عکسها می باشد . طرح سایت شما می تواند با جایگزین شده Navigation در قسمتهای مختلف رده‌بندی شود و نیز نوع قالب بندی به طوری زیادی وابسته به محتویات و مندرجاتی است که داخل سایت شما قرار گیرد .
سرعت و سایز صفحات ( اسکرول کردن )
کاربران خواهان سرعت زیاد هستند . شما این خواسته آنها را می توانید با طراحی صفحاتی با سایزهای محدود فایلها می‌توانید تأمین کنید . با ۱۰ ثانیه مکث در سایت ، کاربران از سایت شما بریده خواهد شد و توجه آنها به سایت را از دست خواهید و این نکته بدان معنی است که طراح وب باید از عکسهای مقرون به صرفه استفاده کند و انتخاب فایلها باید با دقت زیادی همراه باشد . بهینه سازی عکسها عامل مهمی در بارگذاری سریعتر آنها است که بعداً به جزئیات آن می‌پردازیم . جدول زیر ماکسیمم سایز صفحه‌ای که برای واکنش درخواست ارتباطات با سرعتهای گوناگون مجاز است .
سایز صفحه به معنای سایز تمام فایلها و المانهای بکار برده شده در صفحه شامل فایلهای HTML و تمامی عناصر تعبیه شده (jpg , gif) می باشد .
توجه داشته باشید که ۱ ثانیه عکس العمل به کاربران این اجازه را می دهد که آنها حس کنند که به طور آزاد و راحت در میان اطلاعات جابه‌جا می‌شوند ولی زمان ۱۰ ثانیه نیاز دارد که به توجه کاربر به سایت پرداخته شود . در اواسط سال ۱۹۹۷ مطالعات نشان می داد که متوسط سایز یک صفحه وب ۴۴ کیلوبایت است یعنی طبق جدول ۵ برابر بیشتر از زمان معمول واکنش برای کاربرانی که از ISDN استفاده می‌کنند . بنابراین بری بیشتر کاربرانی که از پهنای باند متوسط استفاده می‌کنند سرعت بارگذاری بسیار کم خواهد بود . همچنین توجه داشته باشید که kb 44 ، ۳۰ درصد بیشتر از بزرگترین حد سایز برای کاربران استفاده کننده از مودم خواهد بود .
دانستن چنین مطالعاتی شما را به سمت توسعه وب متمایل میکند تا جایی که کامپیوترها و ارتباطات آنها با یکدیگر سریعتر شود . خیلی از وب سایتهایی که منتشر شده صفحات کوچکی هستند که از عکسهای کم مصرف در آن استفاده شده است .
طراحی با دقت و توجه در کیفیت نمایش
توصیه میشود که برای طراحی از درجه تفکیک ۴۸۰*۶۴۰ استفاده کنید تا جایی که بدانید کاربر از Resolution nd دیگری استفاده می کند . با طراحی با این Resolution اطمینان دارید که کاربران برای دیدن تمام صفحه شما از Scroll استفاده می کنند . برای پرهیز از ایجاد اسکرول افقی صفحه را از pix 600 پهن تر نکنید و به خاطر داشته باشید که کاربران فقط سایت شما را مرور می‌کنند و حاضر نیستند که برای دیدن تمام صفحه شما از اسکرول استفاده کنند . کیفیت استاندارد و اصلی ۴۸۰*۶۴۰ می باشد که بیشتر در عمل به کار می‌رود هنگامی که شما با تفکیک ۴۸۰*۶۴۰ طراحی می‌کنید این عدد اثر بیشتری نسبت به درجات تفکیک‌های بالاتر دارد . شکلهای زیر یک وب سایت را در انواع Resolution ها نشان می دهد . با وجود اینکه هنوز همه از مانیتورهای ۴۸۰*۶۴۰ استفاده می‌کنند اما در سالهای اخیر Resolution های بیشتری بوجود آمده‌اند و شما ممکن است که بخواهید تکنولوژی برتر را بدون رها کردن کاربران و با سخت افزار قدیمی برای آنها تأمین کنید . یک راه انجام این عمل طراحی است که بتواند سازگاری خوبی با کاربران داشته باشد . در صورت استفاده از Resolution زیاد کاربران تصمیم به بزرگتر کردن پنجره می‌کنند .
سایتهای www.altavista.com و www.amazon.com و www.cnet.com مثالهای خوبی در این زمینه هستند .
رنگ
المانهای رنگی نقش مهمی را در اصول و نظام ارائه یک سایت دارند . سبک و روش و فرهنگ و آداب شرکتها با ارائه رنگ در سایت و چگونگی هماهنگی و ترکیب آنها با یکدیکر به تصویر کشیده می شود . به عنوان مثال یک وب سایت با رنگ بندی قوی مثل قرمز و صورتی و زردو سبز، برداشت هنری جذابی از ماهیت‌های صنعتی و فرهنگی مثل حالتی از یک نرم افزاری با تکنولوژی بالا یا یک واحد گرافیکی به بیننده ارائه می‌دهد . و از نقطه نظر یک سایت با رنگهای ملایم تری مثل سفید و آبی روشن و یا خاکستری برای محافظه‌کاری و برای ارگانهای سنتی مثل بانک و یاشرکتهای سرمایه‌گذاری به کار برده می شود .
یکی از مسائلی که در توسعه و پیشرفت طراحی سایت با آن مواجه می شوید این است که چگون احساسها را در هنگام انتخاب رنگ برای وب سایت شرکت خود منتقل کنید . کدام رنگها بیشتر مکمل هستند چند رنگ به معرض نمایش گذاشته می شود ؟ آیا شما از خطوط پایه افقی و عمودی استفاده می کنید؟ آیا سایت شما دارای اشکال هندسی مثل چند ضلعی و مربع می باشد ؟ این سئوال و نیز بقیه سئوالات باید برای بهترین مدل به تصویر کشیدن عکس در یک کمپانی برای کاربران مطرح شود .
نمایش رنگ
یک مانیتور کامپیوتر شامل هزاران المان است که پیکسل نامیده می شود . هر پیکسل فقط یک رنگ را در یک زمان نشان می دهد . هنگامی که به یک عکس نگاه می‌کنید شما صدها یا هزاران پیکسل می بینید که هر کدام یک رنگ ویژه دارد و ترکیب آنها باعث ایجاد تصویری می شود که شما می بینید . رنگهایی که وقتی با یکدیگر ترکیب می‌شوند رنگ سفید را می سازند به عنوان یک رنگ افزودنی تلقی می‌گردند . اصل این رنگ شامل رنگهای قرمز و سبز و آبی است که RGB نامیده می شود . مانیتور کامپیوتر رنگهای افزودنی را نشان می دهد . اضافه کردن رنگهای بیشتری به این ترکیب در سیستم RGB باعث جابه‌جایی رنگ به سمت رنگ سفید می شود .
قالبهای رنگ
رنگها با دو قالب عددی استاندارد شده‌اند :
۱ـ درجات قرمز و سبز و آبی (RGB)
۲- هگزا دسیمال
یک طراح برای انجام یک طراحی وب دقیق باید منحصراً از کدهای هگزا دسیمال استفاده کند . ولی به هر جهت برای بحث در مورد اهداف خود هر دو مورد را در نظر می‌گیریم
سیستم RGB و هگزا دسیمال یا هر دو ( با هررنگی که د رمحدوده دید و بینایی قرار دارندو با خواص گوناگون با یکدیگر ترکیب می‌شوند معرفی می شوند . ) قالبهای این رنگها توانایی نمایش ۱۶۷۷۲۲۱۶ رنگ را دارد .
RGB
مقدار RGB در مبنای ۱۰ در رنج عددی ۰ تا ۲۵۵ . در سیستم مبنای ۱۰ از ارقام بین ۰ تا ۹ استفاده می شود . وقتی رقم ۱ در دسترس قرار می‌گیرد مقدار از ۰ به ۱ افزایش می‌یابد وهمینطور R=255,G=255,B=255 بنابراین مقدار RGB برای رنگ سفید R=255,G=255,B=255 که نمایش ماکسیمم درجه قرمز و سبز و آبی است ) می باشد .
مقدار درجه RGB برای رنگ سبز به اینگونه است :
R=0,G=255,B=0
بنابراین مقدار RGB برای رنگ سبز ۰ و ۲۵۵ می باشد که نمایش %۰ برای قرمز و آبی و بیشترین درصد برای رنگ سبز است .
شما می‌توانید رنگ سبز را با کدهای HTML به قرار زیر دنبال کنید :
المانهای رنگی نقش مهمی را دراصول و نظام ارائه یک سایت دارند . سبک و روش و فرهنگ و آداب شرکتها با ارائه رنگ در سایت و چگونگی هماهنگی و ترکیب آنها با یکدیگر به تصویر کشیده میشود .
به عنوان مثال یک وب سایت با رنگ‌بندی قوی مثل قرمز و صورتی و زرد و سبز ، برداشت هنری جذابی از ماهیت‌های صنعتی و فرهنگی مثل حالتی از یک نرم افزاری با تکنولوژی بالا یا یک واحد گرافیکی به بیننده ارائه می‌دهد . و از نقطه نظر یک سایت با رنگهای ملایم‌تری مثل سفید و آبی روشن و یا خاکستری برای محا فظه‌کاری و برای ارگانهای سنتی مثل بانک و یا شرکتهای سرمایه‌گذاری به کار برده می شود . یکی از مسائلی که در توسعه و پیشرفت طراحی سایت با آن مواجه می‌شوید این است که چگونه احساسها را در هنگام انتخاب رنگ برای وب سایت شرکت خود منتقل کنید . کدام رنگها بیشتر مکمل هستند چند رنگ به معرض نمایش گذاشته می شود ؟ آیا شما از خطوط پایه افقی و عمودی استفاده می‌کنید ؟ آیا سایت شما دارای اشکال هندسی مثل چند ضلعی و مربع می باشد ؟ این سئوال و نیز بقیه سئوالات باید برای بهترین مدل به تصویر کشیدن عکس در یک کمپانی برای کاربران مطرح شود .
تذکر فنی
برای کامل کردن سیستم رنگهای RGB و درجات هگزا دسیمال می‌توانید سایت مراجعه کنید این سایت توسط Lynda Weinman از مرکز هنری Ojai Digital ایجاد شده است .
ارقام هگزا دسیمال
درجات ارقام هگزا دسیمال در بازه بین ۰۰ تا FF بصورت زیر است :
عدد در مبنای ۱۰ با همان مقدار به مبنای ۱۶ تبدیل شده و نمایش داده می شود . مقدار ۰۰ هیچ درصدی را نمایش نمی‌دهد و مقدار FF بیشترین درصد مقدار رنگ را نمایش می‌دهد .
رنگ سفید در مبنای ۱۶ به این صورت نشان داده میشود :
این مقادیر بیشترین درصد رنگهای قرمز و سبز و آبی را نشان می‌دهد .
نمایش سبز در مبنای هگزا دسیمال به قرار زیر است :
این مقادیر بیشتری درصد رنگ برای رنگ سبز و هیچ درصدی را برای رنگهای آبی و قرمز نشان نمی‌دهد . برای هر رنگ سبز و آبی و … در مبنای ۲,۱۶ کاراکتر اختصاص داده شده است و با توجه به این میباشد که اساس RGB از ارقامی ما بین ۰ تا ۲۵۵ برای هر مقدار آبی و قرمز و سبز استفاده میکند .نمودار فوق را ملاحظه کنید :
وقتی از مبنای ۱۶ در HTML استفاده می شود در ابتدای آن از علامت # استفاده میشود که لازم نیست اما قسمتی از ویژگی‌های رسمی HTML محسوب میشود . در تک Body برای مثال کد رنگ پیش زمینه آن اگر سبز باشد ، خواهیم داشت :
هشدار
Netscape 4 در قرار دادن در اطراف ویژگی‌ها اشکال می‌گیرد . هنگامی که از مقدار مبنای ۱۶ در قسمت Style ها استفاده می‌کنید را بردارید .
ترکیبات اصلی رنگها
هر مانیتور برای نمایش یک رنگ از ۳ تفنگ الکترونیکی استفاده می کند . هر تفنگ مسئول یک رنگ منفرد است ( قرمز ، سبز، آبی ) ترکیبات گوناگونی از تفنگ‌ها و جریان زیادی از الکترونها یک رنگ را ایجاد می‌کنند. در یک لحظه شخصی با شلیک این تفنگ‌ها رنگ سفید بر روی صفحه تولید می کند . شلیک تفنگهای قرمز و سبز رنگ سبز ایجاد میکند . شلیک تفنگهای سبز و آبی رنگ فیروزه‌ای ایجاد میکند . ترکیب رنگهای قرمز و آبی رنگ سرخابی ایجاد میکند .
نمودار فوق مثالهایی از ترکیبات این رنگها و ارتباط بین آنها است :
طراحی صفحات ب موضوعی کاملاً سلیقه ای است اینطور به نظر می رسد که بیشتر مردم دقیقاً می دانند که سلیقه شان چه چیزی را می پسندد و چه چیزی را رد می کند .
اما زیبایی و ظاهر یک سایت فقط نیمی از داستان است و اغلب مشکلاتی نظیر قابلیت استفاده مشکلات اجرای فنی ، و صفحاتی که به کندی بارگذرای می شوند نیمه دیگر آن است که من سعی کرده ام آن را در این پروژه بیشتر مورد بررسی قرار دهم
در اینجا هدف آن است مه مباحثی فراتر از رفتار های بصری مورد بحث قرار گیرند ، مواردی که باعث می شوند سایت ها به درستی کار کنند . قابلیت استفاده مطمئناً یکی از این موارد خواهد بود . من تلاش کرده ام تجربیاتی که از ساخت سایت ها در طی چندین سال کسب کرده ام را در اختیار تان بگذارم ، برخی پروژه هایی که کار کرده ام موفقیت آمیز بوده اند و برخی دیگر با شکست روبه رو شده اند و من نه تنها از موفقیتهای ، بلکه از شکستها نیز درس گرفته ام و البته در صنعتی به جوانی طراحی وب ، تجربه بهترین معلم است ، من در این پروژه سعی کرده ام توازنی بین خواسته های طراح و نیاز های کاربر ، شکل ظاهری و عملکرد و منحصر به فرد بودن و انسجام بر قرار کنم ، البته با توجه به آنچه که در رسانه آشفته ای به نام وب قابل اجرا است .
بعد از مطالعه این پروژه بی خوبی درک خواهید کرد که طراحی وب ترکیبی از هنر علم و ، الهام و اجرا ، و در نهایت ناکامی و سربلند است ، شما ممکن است در زمینه طراحی و زیبا سازی سایت تبحر داشته باشید ولی در ز مینه تکنولوژی و یا تحویل سایت با مشکل مواجه باشید . حقیقت آن است که طراحی وب این دو جنبه را با هم احاطه کرده است و سرمایه گذاری در شناخت عمیقتر رسانه و مشکلات فنی در پروژه های آتی سودمند خواهد بود
با این حال هنگامی که این کتاب را می خوانید ممکن است تمام توصیه های ارائه شده از جانب من موافق نباشید و حتی شاید در یابید که بعضی قوانین و توصیه ها از انسجام کافی برخوردار نیستند . اما همانها نیز ممکن است جرقه ای را در ذهن شما باعث شوند و نقطه شروعی برای کشف های تازه به حساب بیایند . بنابراین قبل از آنکه چنین قوانین و توصیه هایی را فراموش کنید بهتر است آنها را بسنجید . طراحان بزرگ ، صرفنظر از رسانه ای که حوزه کاری آنها محسوب می شود ، سعی می کند ابتدا قوانین وضع شده را به خوبی شناخته ، سنجیده و سپس در صورت لزوم تغییر دهند . پیشرفتهای واقعی به ندرت به خاطر نادانی یا خود بینی اتفاق می افتند .
متأسفانه یک فرآیند گام به گام ثابت و تضمین شده جهت ساخت یک سایت وب عالی وجود ندارد . برخی چیز ها واقعاً نیاز به تجربه دارند . ایجاد یک سایت مطلوب و کامل نیازمند ساختن سایت های بی شماری و حتی مرور کردن سایت های ساخته شده است . با این حال می توانم بگویم که اگر شما این پروژه را بخوانید ، حداقل نصف آنچه که برای سا ختن سایت های عالی نیاز دارید را فرا خواهید گرفت . باقی کار به عهده شما و خلاقیت شماست .
باتشکر،
بهنام ناطق
ماهیت وب
بیشتر طراحان وب از نقطه نظر نگاه خود به طراحی وب می پردازند ، آنها علاقمند هستند که خودشان را با استعارات مشخص و با تبلیغات فراوان نشان دهند . به هر جهت اینترنت برای شما ایجاد تجارت و نیز قابلیتی برای ارتباط نزدیک ارائه می دهد .کاربران می‌توانند اطلاعات و محصولاتی را که در خور نیازشان میباشد را پیدا کنند .
در این اینجا شما با انواع ابزارهای طراحی آشنا خواهید شد و به طبیعت آنها نیز پی خواهید برد . اینترنت معمولی‌ترین رسانه واسطه‌ای است که کاربر را آماده می‌سازد که تصمیم بگیرد که چه رسانه‌های انتشاری ، اینترنت یک رسانه تبادلی ( دو طرفه ) تلقی
شود .
اکثراً رسانه‌ها تأثیر گذار هستند و هدف آنها ایجاد علاقه کافی است تا اینکه سرانجام بتواند تبادل مطلوب را انجام دهند .
ماهیت خواندن یک مجله و یا دیدن برنامه‌های تلویزیون ذاتی و بالفطره نیست و معمولاً کار انفردی است . در اصل عمل خواندن مطبوعات یا تماشای برنامه‌های تلویزیونی بالفطره عملی تبادلی نیست و در حقیقت بین عمل خواندن یا تماشای تلویزیون با عمل تبادل تفاوت وجود دارد . تنها تبادل انجام شده در مورد خوانندگان و بینندگان ، گرفتن اطلاعات از طریق خواندن یک کتاب یا مجله یا تماشای برنامه تلویزیون است . ( بصورت یک طرفه )
بنابراین ایجاد اطلاعات جهت رسانه‌های گروهی به راهکارهای متفاوت‌تری نسبت به ایجاد اطلاعات مربوط به اینترنت نیاز دارد .
مشاهدات بی عیب اینترنت مانند ثبت رویداد بر روی مرورگر وب ، دلالت بر درخواست کاربران و واکنش سرور دارد . به عبارت دیگر انجام یک داد و سند و تبادل می باشد .
بعلاوه با این طبیعت ، اینترنت نمی تواند بصورت خطی عمل کند . اگر کاربر تصمیم به انجام داد و ستد و تبادل داشته باشد ، ابتدا باید به سایت راهنمایی و هدایت شود، و سپس برای تجارت در سایت بماند و گردش کند و در پایان دوباره به سایت بازگردد و نیز باید در نظر داشت که کاربر می‌تواند برای انجام داد و ستد در هر لحظه به هر سایت دیگری مراجعه نماید .
هدایت و توسعه وب جاری
پیشرفت وب از چند سال پیش شروع شد اضافه شدن چند رسانه‌ای ها در وب ، دلالت بر پیشرفت وب دارد . این نوع جدید از اطلاعات در حال حاضر در اینترنت قابل دسترس میباشد . محتوای اطلاعات عبوری در اینترنت به عنوان جزء اصلی خیلی از پروژه‌ها و برنامه‌ها محسوب میشود . مزیت عبور اطلاعات در بازتاب اطلاعات و آمار و ارقام میباشد . به این صورت که در زمانی که کاربر آن را در خواست کند از پایگاه داده‌ها عبور میکند و بدست کاربر می‌رسند . اینترنت دومین پیشرفت خود را بعد از ایجاد تجارت الکترونیک در تاریخچه توسعه وب انجام داد . کارمندان شرکتها و صنایع می توانند با این توانایی عبور اطلاعات تجاری خود را از خانه انجار سال و دریافت کنند و نتیجه آن خیلی کارآمدتر و پربارتر از حضور در محیط کاری میباشد . شبکه داخلی شرکت با بکارگیری وب برای فروشندگان بیرونی و شرکای تجاری می‌تواند اطلاعات درخواست شده را سریعتر از بیرون انتقال دهند و سلسله مراتب یک تجارت را به پیش ببرند .
برای مثال شرکت A برای شرکت B کاغذ تولید میکند اگر کمپانی A بخواهد به شرکت B دسترسی پیدا کند این امر با بکارگیری شبکه داخلی شرکت امکانپذیر میباشد . بنابراین شرکت A می‌داند که چه موقع شرکت B به محموله‌ای دیگری نیاز دارد و نیز شرکت A می‌تواند نخستین قدم برای تهیه محموله قبل از درخواست از طرف شرکت B را بردارد .
ابزارها و تکنولوژی
سالها مذاکرات زیادی درباره اینکه چه ابزارهای خاصی در فرآیند گسترش وب استفاده میشود ، وجود داشت . به هر جهت امروزه خیلی از ابزارهای ویرایشگر وب در رده‌های چهارم و پنجم قرار گرفتند .
مذاکرات بیشتر پیرامون آن بود که طراحان وب از کدام ابزارها استفاده کنند نه اینکه صرفاً بخواهند از ا بزاری خاص استفاده کنند . بطور ایده‌آل ترکیب کد های دستی و WYSIWYG بهترین گزینه از نقطه نظر توسعه امروزی است . انجام این عمل ساده زمان زیادی برای توسعه یک سایت HTML با کد نویسی را می‌گیرد . احتیاجات به روز رسانی اطلاعات مستلزم آن است که بین صفحه وب و یک سایت محلی اتحاد و پیوستگی ایجاد شود . امروزه WYSIWYG از استاندارد خارج شده است .
و از Dream Wearer , Front Page استفاده میشود . در آینده می‌توانید تشکیلات خود را به آخرین درجه پیشرفت برسانید و همواره با زمان جلو روید این ابزارهای قدرتمند که در صنعت نیز قابل رقابت هستند در دوره CIW ارائه خواهند شد . این ابزارها با هم هماهنگی خاصی دارند .
رسانه‌های واسط
طراحان وب باید در مورد دیگر تفاوتها و مشکلاتی که در طراحی وب در مقایسه با رسانه‌های دیگر بخصوص چاپ پیش میآید آگاه شوند . در ابتدای زمان طراحی وب ، بسیاری از سایتها بصورت HTML ساده و بصورت بروشورولی باخاصیت وب توزیع می‌شدندو این شیوه باعث شد که کمپانیها خیلی سریع اطلاعات خود را بر روی وب ارسال کنند . بعلاوه وب به عنوان قلمرو جدید بود که نه سندیتی برای آن وجود داشت و نه اطلاعات معتبری برای تأئید اعتبار آن بود .
بیشتر کمپانیها خیلی زود آموختند که ارسال بروشور بر روی وب موثر تر از استفاده از رسانه‌های دیگر نیست . به طور کلی در یک جمله می‌توان گفت صفت چاپ خاصیت خطی دارد یعنی از یک خط به خط دیگر و از یک صفحه به صفحه دیگر . ….
ولی وب یک رسانه خطی نیست و به همین سبب خواص متفاوت‌تری دارد و هنگامی که در داد و ستد از آن به عنوان یک قالب خطی استفاده شود خواص متفاوتی از خود بروز می‌دهد . بیشترین ویژگی متفاوت وب در برقراری ارتباط دو طرفه با کاربران میباشد . صنعت چاپ نمی‌تواند مشاهدات کاربران را بصورت فرم تخصصی در آورد . و در یک جمله دیگر می‌توان گفت رسانه وب می‌تواند امکانات ارتباط دو طرفه را به بهترین صورت انجام دهد و برای کاربر فرم شخصی ایجاد کند . و این پدیده یک ارتباط مستقیم بین تجار و کاربران ( خریداران ) را برقرار میکند . در طی این کتاب شما با ابزارهای زیادی در توسعه صفحات وب آشنا خواهید شد اما توجه داشته باشید که هدف از این پروژه آگاهی شما از امکاناتی است که هر کدام از این ابزارها به شما می‌دهندو این شما هستید که در نهایت تصمیم گیرنده اصلی خواهید بود که کدام ابزار فواید بیشتری برای نظام مند شدن مقاصدتان دارد .
محاسبه مهارتهای HTML خود
در این تمرین شما مهارت HTML خود را با ایجاد یک صفحه ساده محاسبه خواهید کرد . شایان ذکر است که مندرجاتی شما بکار می‌برید می‌تواند متفاوت از مندرجات بکار برده شده در این تمرین باشد .
تمرین ایجاد یک صفحه وب پایه :
در این تمرین شما یک صفحه وب ساده ایجاد خواهید کرد و توانایی HTML خود را محک می‌زنید.
۱ـ از الگوی HTML برای ایجاد قالبهای زیر استفاده کنید .
ـ Table
ـ Hyper Link ( استفاده از پروتکل HTTP )
ـ Font
ـ Image
در این فصل شما با مفاهیم تکنولوژی و ابزارهای مورد استفاده آن و مختصراً‌با مشکلاتی که برای بکارگیری این تکنولوژی استفاده میشود آشنا شدید و در نهایت مهارت HTML خود را محاسبه کردید .
معرفی فصل
کیفیت مندرجات سایت شما و نمایش آن از عوامل موفقیتهای اصلی سایت هستند . یکی از بزرگترین اشتباهاتی که شما در ساخت و تولید و نمایش مندرجات روی وب دارید دخالت دادن استانداردها ، تمرین‌ها و تعهدات رسانه‌های دیگر مثل چاپ میباشد . وب رسانه متفاوت‌تری از بقیه رسانه‌های موجود است و بنابراین استانداردهای متفاوت‌تری برای توسعه آن نسبت به بقیه رسانه‌ها مثل چاپ ویدئو و سایر رسانه‌های سنتی وجود دارد . این فصل به شما خلاصه‌ای از بیشتر ملزوماتی که شما نیاز دارید برای توسعه کار آن آنها را در نظر بگیرید ارائه می‌دهد .
کاربران وب و نکاتی در طراحی سایت
حدس می‌زنید که چه مقدار از متن صفحه وب شما به طور واقعی توسط کاربر خوانده میشود ؟ تمام آن ؟ بیشتر آن ؟ حقیقت آن است که کاربران اغلب هیچ مقداری از آن را نمی‌خوانند . به دنبال این جمله باید گفت که درحدود ۸۰% از مردم فقط در مندرجات سایت پویش می‌کنندو به دنبال نکات و عبارت کلیدی می‌گردند . به طور متوسط ۲۵% کاربرای در خواندن روی مانیتور نسبت به خواندن از روی چاپ آهسته‌تر عمل می کنند . بنابراین ،این واقعیت چگونه بر ساختار صفحه شما اثر می‌گذارد؟ به عنوان یک طراح شما باید صفحه‌ای ایجاد کنید که کاربران بتوانند سریع آن را کاوش کرده و اطلاعات مطالبه کرده را پیدا کنند . بخاطر آورید که یکی از تناقضات در طراحی وب این است که تصور کنید که وب فرم دیگری از رسانه چاپ است . هنگامی که طرح یک صفحه با مندرجات مشابه به یک مجله و یا بروشور ایجاد می‌کنید کاربران به طور مسلم به سایت دیگری خواهد رفت چرا که شما در نظر نگرفتید که ماهیت مطالب بر روی وب باید با دیگر رسانه‌ها به خصوص چاپ متفاوت باشد . هنگامی که کاربران به سایت شما می‌رسند اولین حسی که در آنها ایجاد میشود از ا همیت زیادی برخوردار است . مثلاً ممکن است سایت وب شما که به قصد تجارت ایجاد شده است فقط یک پنجره داشته باشد ولی به هر حال اگر به نظر مشتری غیر جذاب باشد شما مشتری خود را به رقیب خود واگذار کردید . بنابراین اگر بدانید که بازدیدکنندگان فقط سایت شما را مرور می‌کنند متوجه خواهید شد که چرا نباید کاربران رامجبور به خواندن مطالبی کنید که برای آنها جالب نیست . کاربران را راضی نگه دارید و آنچه را که می‌خواهند به آنها عطا کنید ، حتماً آنها به سایت شما باز خواهند گشت . ( قابل ذکر است قواعد بازار یابی در سایتهای تجاری متفاوت تر از دنیای واقعی میباشد )
کاربران نمی‌خواهند که صفحات در هم و نامربوط را ببینند و ازطرفی محتویات و مندرجات سایت نیز ضروری است پس با این وجود ساختار و انتشار آن هر دو با هم از اهمیت برخوردار هستند . معمولاً کاربران سایت شما را برای اطلاعات ویژه‌ای که در مورد جستجو و یا خرید و … می‌خواهند بازدید می‌کنند .
هر چقدر این عمل برای آنها آسانتر باشد ، کارشان را راحت و سریعتر انجام می‌دهند. کاربران وب فقط علاقه‌مند به آنچه که می‌خواهند بیابند هستند . کسانی که در کارهای تجارت خرده و جزئی هستند اعتقاد بر این دارند که مشتری‌ها خود خواه هستند ، ولی آنها می‌دانند که پرداخت صورتحساب است که درهای تجارت را باز نگه می‌دارد و اگر شما این نکته را درک کنید صفحه‌ای بوجود خواهید آورد که ساختار آن اهداف تجارت کاربران را تأمین کند .
سایتی نظیر سایت www.xnn.com را در نظر بگیرید به محض ورود به سایت سریعاً می‌توانید مرور کلی از کل سایت داشته باشید و یا به عبارت دیگر شما می‌توانید کل سایت را با نگاه از یک عبارت به عبارت بعدی مرور کنید و آنچه را که بخواهید خیلی سریع بدست آورید . بنابراین تمایل به دیدن مجدد سایت را دارید . سایت فوق از نمونه سایتهای موفق در جهان میباشد .
واقعیت در طراحی
یک طراح وب باید برای فن‌آوری جدید و اینکه چگونه از ابزارها در طراحی استفاده کند آماده باشد و معمولاً طراحان جدیدترین سخت افزارها و نرم افزارها را به کار می‌گیرند . به هر جهت این انگیزه ایجاد می شود که شما باید صفحات دو طرفه دینامیکی ایجاد کنید که نرم افزارهای جدید و قدیم را حمایت کنند .اکثریت استفاده کنندگان وب به جستجوی طراحی عالی و پیشرفته نیستند و لی استثنائاتی همیشه در این قواعد وجود دارند . به هر جهت یک راهنمای خوب در هنگام طراحی وجود دارد که به قرار زیر است :
۱ـ بیشتر کاربران از مانیتورهای Inch 17 یا کمتر استفاده می کنند .
۲ـ بیشتر کاربران با تنظیم تفکیک‌پذیری ۶۴۰*۴۸۰ کار می‌کنند .
۳ـ بیشتر کاربران دارای مودم‌های با سرعت K56 هستند .
۴ـ اغلب کاربران مرورگرهای وزن ۴ به پایین دارند .
۵ـ تعداد کمی از مردم زمان زیادی را برای بارگذاری فایلها صرف می کنند .
همواره در طراحی وب نکات بالا را در نظر داشته باشید .
ساختار متناسب برای صفحه
طراحی اصلی روزنامه مورد علاقه خود را در نظر بگیرید . در صفحه روی جلد خبر اصلی وجود دارد و بعلاوه متون حاشیه‌ای هم در آن قرار دارد که خبرهای دیگر روزنامه در آن لیست شده است . این قضیه به چه نحوی در خواندن شما تأثیر می‌گذارد ؟ این طرح کلی شما را وادار به خواندن یک خبر در روی صفحه اول نمی‌کند . اگر خلاصه یک خبر که درستی آن را دنبال می‌کنید ببینید در آن شماره صفحه‌ای وجود دارد که از طریق آن می‌توانید وارد کل داستان شوید . یعنی با یک اتصال شما را به کل می رساند . این ساختار اغلب با ساختار یک هرم مقایسه میشود که در نمودار شکل زیر ترسیم شده است . در این مدل در ابتدا خلاصه داستان برای شما ارائه میشود سپس اتصال برای مأخذ و جزئیات آن برای کسانی که علاقه‌مند هستند قرار داده میشود . وب ایده‌آل ترین رسانه برای این نوع انتشار است .
با استفاده از ابر اتصالات می‌توانید کاربران خود را به شرح موضوعات در داستانها ، اخبار و محصولات و سرویسهایی که دارید هدایت کنید و نیز می‌توانید پیش تاریخ و اطلاعات مبسوط و زمان و منابعی را که روزنامه‌ها به دلیل فقدان جا نمی‌توانند ایجاد کنند را بوجود آورید . اگر کاربران بخواهند اطلاعات را به طور کامل بخوانند می‌توانند به سمت جهت تعیین شده هدایت شوند . به عبارت دیگر می‌توانند برای پیگیری قضیه حرکت کنند .
المانهای طرح بندی یک صفحه
قبل از شروع به ساختن صفحه یک دید کلی وساختار کلی از سایت را در نظر بگیرید. شما باید المانهای صفحه و نیز چگونگی فعل و انفعالاتی که آنها با هم دارند را بدانید . از نقطه نگاه بصری باید المانهای انتخابی را در داخل سایت ایجاد کنید که این المانها عبارتند از طرح ، رنگ ،نوع قلم ، تصاویر و چند رسانه‌ای‌ها و … طرح صفحه منوط به آن است که طراح بتواند اطلاعات خود را به کاربر نشان دهد این نوع قالب‌بندی باید برای درک آسانتر اطلاعات باشد مثل اسناد و گزارشها . این نوع ساختار به دسته بندی و ساده کردن ، ویرایش و توزیع و پخش اطلاعات کمک میکند به عنوان یک طرح وب باید ساختار خود را توسعه دهید و در این مرحله تجربیات کاربران می‌تواند برای شما بسیار مفید واقع شود .
موارد زیر را در هنگام طراحی یک صفحه در نظر بگیرید :
۱ـ Frameset اجازه می‌دهد که صفحات چند گانه شما بصورت واحد ظاهر شود.
۲ـ Margin کنترل میکند که مطالب چگونه و با چه فاصله‌ای از کادر مانیتور شروع شوند .
۳ـ Border برای Frame ها و جداول HTML استفاده می شود .
۴ـ رنگ ایجاد یک احساس گیرا و کلی از ساختار سایت و باعث ازدیاد توانایی خواندن میشود .
۵ـ Space جدا کردن المانهای صفحه
۶ـ Navigation برای کنترل کاربران برای حرکت در سایت
۷ـ Rule مندرجات صفحه را به قسمتهای جداگانه و و ابسته قسمت می کند .
۸ـ White Space باعث کم تر ک ردن بی نظمی المانهای صفحه می‌گردد .
۹ـ Table توزیع المانهای صفحه در جاهای مختلف صفحه و شکل دادن اطلاعات در ستونهای مخفی
۱۰ـ Lists به طرح اجازه می‌دهد تا اقلام را سازماندهی کنیم .
۱۱ـ Paragraph گروهی از کاراکترهای متنی در صفحه میباشد .
۱۲ـ Heading level ایجاد سایزهای گوناگون از متن و طراحی و سازماندهی آن.
۱۳ـ Image مورد استفاده در ایجاد جاذبه ابعادی ، اطلاعات ، Navigation
تعیین کنید که سایت شما کدامیک از این عوامل را در بر دارد و شما را در روند توسعه یاری می‌دهد و اگر به این عوامل پرداخته نشود به تدریج منابع و نیروها و زمان خود را از دست خواهید داد .
طرح معمول صفحه
وب سایتها از قالبهای اصلی و پایه برای نمایش اجزاء صفحه استفاده می‌کنند . شما می‌توانید این قالبهای معمول را از خیلی از سایتها ایده بگیرید .برای مثال Navigator معمولاً‌در قسمت چپ بالای صفحه نمایش داده می شود و رنگ این المان اغلب کمی متفاوت تر از رنگ بقیه صفحه است همچنین المان Navigation می‌تواند در پائین یک صفحه نیز قرار گیرد .
متن سیاه بر روی زمینه سفید و نیز قرار گرفتن تبلیغات کمپانی در بالاترین گوشه سمت چپ صفحه نمایش نیز از قالبهای متداول میباشد که اغلب بکار برده میشود . این قالبها و نیز قالبهای دیگر برای تشخیص اینکه از کدام قالب باید استفاده شود در عمل می تواند کمک کند . کاربران هنگامی که سایت شما را بازدید می‌کنند می‌دانند که چه توقعی از آن دارند . در اینجا نمی خواهم بگویم که کاربران باید مندرجات و محصولات سایت شما را بدانند ولی باید اساس و اصول استفاده از سایت شما را بداند و این اصل شامل کاربردهای مختلف Navigation و متون و عکسها می باشد . طرح سایت شما می تواند با جایگزین شده Navigation در قسمتهای مختلف رده‌بندی شود و نیز نوع قالب بندی به طوری زیادی وابسته به محتویات و مندرجاتی است که داخل سایت شما قرار گیرد .
سرعت و سایز صفحات ( اسکرول کردن )
کاربران خواهان سرعت زیاد هستند . شما این خواسته آنها را می توانید با طراحی صفحاتی با سایزهای محدود فایلها می‌توانید تأمین کنید . با ۱۰ ثانیه مکث در سایت ، کاربران از سایت شما بریده خواهد شد و توجه آنها به سایت را از دست خواهید و این نکته بدان معنی است که طراح وب باید از عکسهای مقرون به صرفه استفاده کند و انتخاب فایلها باید با دقت زیادی همراه باشد . بهینه سازی عکسها عامل مهمی در بارگذاری سریعتر آنها است که بعداً به جزئیات آن می‌پردازیم . جدول زیر ماکسیمم سایز صفحه‌ای که برای واکنش درخواست ارتباطات با سرعتهای گوناگون مجاز است .
سایز صفحه به معنای سایز تمام فایلها و المانهای بکار برده شده در صفحه شامل فایلهای HTML و تمامی عناصر تعبیه شده (jpg , gif) می باشد .
توجه داشته باشید که ۱ ثانیه عکس العمل به کاربران این اجازه را می دهد که آنها حس کنند که به طور آزاد و راحت در میان اطلاعات جابه‌جا می‌شوند ولی زمان ۱۰ ثانیه نیاز دارد که به توجه کاربر به سایت پرداخته شود . در اواسط سال ۱۹۹۷ مطالعات نشان می داد که متوسط سایز یک صفحه وب ۴۴ کیلوبایت است یعنی طبق جدول ۵ برابر بیشتر از زمان معمول واکنش برای کاربرانی که از ISDN استفاده می‌کنند . بنابراین بری بیشتر کاربرانی که از پهنای باند متوسط استفاده می‌کنند سرعت بارگذاری بسیار کم خواهد بود . همچنین توجه داشته باشید که kb 44 ، ۳۰ درصد بیشتر از بزرگترین حد سایز برای کاربران استفاده کننده از مودم خواهد بود .
دانستن چنین مطالعاتی شما را به سمت توسعه وب متمایل میکند تا جایی که کامپیوترها و ارتباطات آنها با یکدیگر سریعتر شود . خیلی از وب سایتهایی که منتشر شده صفحات کوچکی هستند که از عکسهای کم مصرف در آن استفاده شده است .
طراحی با دقت و توجه در کیفیت نمایش
توصیه میشود که برای طراحی از درجه تفکیک ۴۸۰*۶۴۰ استفاده کنید تا جایی که بدانید کاربر از Resolution nd دیگری استفاده می کند . با طراحی با این Resolution اطمینان دارید که کاربران برای دیدن تمام صفحه شما از Scroll استفاده می کنند . برای پرهیز از ایجاد اسکرول افقی صفحه را از pix 600 پهن تر نکنید و به خاطر داشته باشید که کاربران فقط سایت شما را مرور می‌کنند و حاضر نیستند که برای دیدن تمام صفحه شما از اسکرول استفاده کنند . کیفیت استاندارد و اصلی ۴۸۰*۶۴۰ می باشد که بیشتر در عمل به کار می‌رود هنگامی که شما با تفکیک ۴۸۰*۶۴۰ طراحی می‌کنید این عدد اثر بیشتری نسبت به درجات تفکیک‌های بالاتر دارد . شکلهای زیر یک وب سایت را در انواع Resolution ها نشان می دهد . با وجود اینکه هنوز همه از مانیتورهای ۴۸۰*۶۴۰ استفاده می‌کنند اما در سالهای اخیر Resolution های بیشتری بوجود آمده‌اند و شما ممکن است که بخواهید تکنولوژی برتر را بدون رها کردن کاربران و با سخت افزار قدیمی برای آنها تأمین کنید . یک راه انجام این عمل طراحی است که بتواند سازگاری خوبی با کاربران داشته باشد . در صورت استفاده از Resolution زیاد کاربران تصمیم به بزرگتر کردن پنجره می‌کنند .
سایتهای www.altavista.com و www.amazon.com و www.cnet.com مثالهای خوبی در این زمینه هستند .
رنگ
المانهای رنگی نقش مهمی را در اصول و نظام ارائه یک سایت دارند . سبک و روش و فرهنگ و آداب شرکتها با ارائه رنگ در سایت و چگونگی هماهنگی و ترکیب آنها با یکدیکر به تصویر کشیده می شود . به عنوان مثال یک وب سایت با رنگ بندی قوی مثل قرمز و صورتی و زردو سبز، برداشت هنری جذابی از ماهیت‌های صنعتی و فرهنگی مثل حالتی از یک نرم افزاری با تکنولوژی بالا یا یک واحد گرافیکی به بیننده ارائه می‌دهد . و از نقطه نظر یک سایت با رنگهای ملایم تری مثل سفید و آبی روشن و یا خاکستری برای محافظه‌کاری و برای ارگانهای سنتی مثل بانک و یاشرکتهای سرمایه‌گذاری به کار برده می شود .
یکی از مسائلی که در توسعه و پیشرفت طراحی سایت با آن مواجه می شوید این است که چگون احساسها را در هنگام انتخاب رنگ برای وب سایت شرکت خود منتقل کنید . کدام رنگها بیشتر مکمل هستند چند رنگ به معرض نمایش گذاشته می شود ؟ آیا شما از خطوط پایه افقی و عمودی استفاده می کنید؟ آیا سایت شما دارای اشکال هندسی مثل چند ضلعی و مربع می باشد ؟ این سئوال و نیز بقیه سئوالات باید برای بهترین مدل به تصویر کشیدن عکس در یک کمپانی برای کاربران مطرح شود .
نمایش رنگ
یک مانیتور کامپیوتر شامل هزاران المان است که پیکسل نامیده می شود . هر پیکسل فقط یک رنگ را در یک زمان نشان می دهد . هنگامی که به یک عکس نگاه می‌کنید شما صدها یا هزاران پیکسل می بینید که هر کدام یک رنگ ویژه دارد و ترکیب آنها باعث ایجاد تصویری می شود که شما می بینید . رنگهایی که وقتی با یکدیگر ترکیب می‌شوند رنگ سفید را می سازند به عنوان یک رنگ افزودنی تلقی می‌گردند . اصل این رنگ شامل رنگهای قرمز و سبز و آبی است که RGB نامیده می شود . مانیتور کامپیوتر رنگهای افزودنی را نشان می دهد . اضافه کردن رنگهای بیشتری به این ترکیب در سیستم RGB باعث جابه‌جایی رنگ به سمت رنگ سفید می شود .
قالبهای رنگ
رنگها با دو قالب عددی استاندارد شده‌اند :
۱ـ درجات قرمز و سبز و آبی (RGB)
۲- هگزا دسیمال
یک طراح برای انجام یک طراحی وب دقیق باید منحصراً از کدهای هگزا دسیمال استفاده کند . ولی به هر جهت برای بحث در مورد اهداف خود هر دو مورد را در نظر می‌گیریم
سیستم RGB و هگزا دسیمال یا هر دو ( با هررنگی که د رمحدوده دید و بینایی قرار دارندو با خواص گوناگون با یکدیگر ترکیب می‌شوند معرفی می شوند . ) قالبهای این رنگها توانایی نمایش ۱۶۷۷۲۲۱۶ رنگ را دارد .
RGB
مقدار RGB در مبنای ۱۰ در رنج عددی ۰ تا ۲۵۵ . در سیستم مبنای ۱۰ از ارقام بین ۰ تا ۹ استفاده می شود . وقتی رقم ۱ در دسترس قرار می‌گیرد مقدار از ۰ به ۱ افزایش می‌یابد وهمینطور R=255,G=255,B=255 بنابراین مقدار RGB برای رنگ سفید R=255,G=255,B=255 که نمایش ماکسیمم درجه قرمز و سبز و آبی است ) می باشد .
مقدار درجه RGB برای رنگ سبز به اینگونه است :
R=0,G=255,B=0
بنابراین مقدار RGB برای رنگ سبز ۰ و ۲۵۵ می باشد که نمایش %۰ برای قرمز و آبی و بیشترین درصد برای رنگ سبز است .
شما می‌توانید رنگ سبز را با کدهای HTML به قرار زیر دنبال کنید :
المانهای رنگی نقش مهمی را دراصول و نظام ارائه یک سایت دارند . سبک و روش و فرهنگ و آداب شرکتها با ارائه رنگ در سایت و چگونگی هماهنگی و ترکیب آنها با یکدیگر به تصویر کشیده میشود .
به عنوان مثال یک وب سایت با رنگ‌بندی قوی مثل قرمز و صورتی و زرد و سبز ، برداشت هنری جذابی از ماهیت‌های صنعتی و فرهنگی مثل حالتی از یک نرم افزاری با تکنولوژی بالا یا یک واحد گرافیکی به بیننده ارائه می‌دهد . و از نقطه نظر یک سایت با رنگهای ملایم‌تری مثل سفید و آبی روشن و یا خاکستری برای محا فظه‌کاری و برای ارگانهای سنتی مثل بانک و یا شرکتهای سرمایه‌گذاری به کار برده می شود . یکی از مسائلی که در توسعه و پیشرفت طراحی سایت با آن مواجه می‌شوید این است که چگونه احساسها را در هنگام انتخاب رنگ برای وب سایت شرکت خود منتقل کنید . کدام رنگها بیشتر مکمل هستند چند رنگ به معرض نمایش گذاشته می شود ؟ آیا شما از خطوط پایه افقی و عمودی استفاده می‌کنید ؟ آیا سایت شما دارای اشکال هندسی مثل چند ضلعی و مربع می باشد ؟ این سئوال و نیز بقیه سئوالات باید برای بهترین مدل به تصویر کشیدن عکس در یک کمپانی برای کاربران مطرح شود .
تذکر فنی
برای کامل کردن سیستم رنگهای RGB و درجات هگزا دسیمال می‌توانید سایت مراجعه کنید این سایت توسط Lynda Weinman از مرکز هنری Ojai Digital ایجاد شده است .
ارقام هگزا دسیمال
درجات ارقام هگزا دسیمال در بازه بین ۰۰ تا FF بصورت زیر است :
عدد در مبنای ۱۰ با همان مقدار به مبنای ۱۶ تبدیل شده و نمایش داده می شود . مقدار ۰۰ هیچ درصدی را نمایش نمی‌دهد و مقدار FF بیشترین درصد مقدار رنگ را نمایش می‌دهد .
رنگ سفید در مبنای ۱۶ به این صورت نشان داده میشود :
این مقادیر بیشترین درصد رنگهای قرمز و سبز و آبی را نشان می‌دهد .
نمایش سبز در مبنای هگزا دسیمال به قرار زیر است :
این مقادیر بیشتری درصد رنگ برای رنگ سبز و هیچ درصدی را برای رنگهای آبی و قرمز نشان نمی‌دهد . برای هر رنگ سبز و آبی و … در مبنای ۲,۱۶ کاراکتر اختصاص داده شده است و با توجه به این میباشد که اساس RGB از ارقامی ما بین ۰ تا ۲۵۵ برای هر مقدار آبی و قرمز و سبز استفاده میکند .نمودار فوق را ملاحظه کنید :
وقتی از مبنای ۱۶ در HTML استفاده می شود در ابتدای آن از علامت # استفاده میشود که لازم نیست اما قسمتی از ویژگی‌های رسمی HTML محسوب میشود . در تک Body برای مثال کد رنگ پیش زمینه آن اگر سبز باشد ، خواهیم داشت :
هشدار
Netscape 4 در قرار دادن در اطراف ویژگی‌ها اشکال می‌گیرد . هنگامی که از مقدار مبنای ۱۶ در قسمت Style ها استفاده می‌کنید را بردارید .
ترکیبات اصلی رنگها
هر مانیتور برای نمایش یک رنگ از ۳ تفنگ الکترونیکی استفاده می کند . هر تفنگ مسئول یک رنگ منفرد است ( قرمز ، سبز، آبی ) ترکیبات گوناگونی از تفنگ‌ها و جریان زیادی از الکترونها یک رنگ را ایجاد می‌کنند. در یک لحظه شخصی با شلیک این تفنگ‌ها رنگ سفید بر روی صفحه تولید می کند . شلیک تفنگهای قرمز و سبز رنگ سبز ایجاد میکند . شلیک تفنگهای سبز و آبی رنگ فیروزه‌ای ایجاد میکند . ترکیب رنگهای قرمز و آبی رنگ سرخابی ایجاد میکند .
نمودار فوق مثالهایی از ترکیبات این رنگها و ارتباط بین آنها است :
با وجود آنکه هر مقدار ازRGB و هگزا دسیمال برای یک رنگ خاص استفاده میشود ولی مهم است که به خاطر داشته باشید که فقط ۲۱۶ رنگ با ویندوز و مکینتاش و Internet Explorer , Netscape navigator حمایت می‌شوند. هر۸ بیت مانیتور هر مرورگر ۲۵۶ رنگ را می‌تواند به نمایش بگذارد که تا حدود ۴۰ مورد از این رنگها توسط سیستم عامل استفاده میشود . این ۲۱۶ مقدار حمایت می شوندو بقیه رنگها شدت نورشان افزایش می یابد .
افزایش شدت نور فرآیندی است که مرورگر یک رنگ را به نزدیکترین رنگی که مرورگر قادر به حمایت از آن است تبدیل می کند . وقتی رنگی با کدهای HTML ایجاد شود به رنگ ثابت و یکپارچه تبدیل میشود .
( امیدوار باشید که به رنگ اصلی که شما می خواستید نزدیک باشد ) اگر مرورگر نور رنگی که در یک تصویر نشان داده می شود را با ترکیب ۲ رنگی که نزدیک به یکی از آنهاست زیاد کند توسط مرورگر حمایت نخواهد شد و بصورت لکه نشان داده می شود .
جدول ۳-۲ سیستمی از مقادیر RGB و هگزا دسیمال را که بدون مشکل در مرورگرهای متعدد و بر روی سیستمهای متعدد ترجمه خواهد شد را نشان می‌دهد . ( اگر مقادیر دیگری به غیر از اینها استفاده شود مرورگر نور آن را به نزدیکترین مقدار تخمینی افزایش می‌دهد .
هر کدام از این مقادیر مطابق با مقدارواقعی است . برای مثال استفاده از مقدار ۵۱ در سیستم RGB درست مانند استفاده از مقدار ۳۳ در سیستم هگزا دسیمال است . به عبارت دیگر مقدار RGB (201,51,153) معدل با مقادیر cc3399# در هگزا دسیمال است .
مرورگر ضامن هر ترکیبی از این مقادیر است و بدون تناقض و مشکل در پایگاه داده‌ها مرورگر ترجمه می‌شوند .
ترکیبات هر کدام از رنگهای قرمز و سبز و آبی شدت رنگی که باید نمایش داده شود را محاسبه میکند ،جدول ۲-۴ درصد شدت رنگهایی که توسط مرورگر از کمتر به بیشتر حمایت می‌شوند را نشان می‌دهد .
لیست کامل بالا را می توانید در سایت پیدا کنید .
تذکر
مشکلاتی در ترجمه رنگ برای مانیتورهای bit 16 وجود دارد . به دلایل ریاضی ۲۱۶ رنگی که در مرورگرها حمایت میشود در جدول رنگ این کامپیوترها نشان داده میشود و مرورگرها با استفاده از رنگهای دیگری که به آن رنگها نزدیک است این جابجایی را برای نمایش رنگ و به طور دقیق انجام می دهند . اما مرورگرها جابجایی رنگ را به طرق مختلف ( منوط به اینکه آیا آن رنگ در یک عکس ارائه می شود یا توسط HTML ایجاد می شود) انجام می دهند .
تمرین
کدام ترکیب RGB توسط مرورگر هدایت میشود .
انتخاب ترکیب رنگ
ترکیبات رنگ می تواند مکمل همدیگر باشند و نیز مشاهدات کاربران را آسان کند و به آنها اجاز دهد که هر متنی که در صفحه وجود دارد را بخوانند . بیشتر طراحان عقیده دارند که متن مشکی بر روی زمینه سفید ایده‌آل است . دلیل آن این است که این ترکیب کی گیرائی خاص برای خواندن ارائه می کند و برای کاربران خیلی راحت است زیرا همان متونی که در رسانه‌های دیگر قرار داده می شوند .
قابلیت موقعیت‌ها به شما اجازه می‌دهد که از طرح مشکلی بر روی زمینه سفید است فاده کنید و تا جایی که ممکن باشد نیز ، استفاده میشود . خیلی از سایتها رنگهایی دارند که یک کمپانی خاص را نشان می دهد و یا رنگهای پر زرق و برق دارند و همیشه از الگوی سیاه بر روی مشکی تبعیت نخواهد کرد . دریک دسته بندی ، فقط مکانهایی که در آنجا سایت جسارت دارد که از مدل سیاه وسفید بدون آنکه لطمه‌ای به کارآیی آن سایت وارد شود استفاده کند Home page یا صفحه اول یک وب سایت است .مندرجات اطراف Home page فراوان هستند و سایت می‌تواند اهداف خوبی را برای کاربر تأمین کند . این ترکیبات رنگها در المانهای دیگر صفحه مثل عکسها و چهارچوب‌ها می تواند استفاده شود و باعث ایجاد انگیزه برای جستجو و درخواست اطلاعات برای کاربرد گردد .
تذکر فنی
برای ایجاد ترکیبات مختلفل از پیش‌زمینه و متن، از سایت زیر دیدن کنید :
گذارهای رنگ
گذار رنگها روشی است که در آن همجواری رنگها یا جدایی آنها را بیان میکند . گذارهای رنگ ما بین رنگ متن و پیش زمینه بسیار مهم و قابل توجه است و برای کمک به جدایی قسمتهای مختلف صفحه به کار برده می شود . گذارا هنگامی که با عکس در صفحه ایجاد می شوند مسائل زیادی را بوجود می‌آورند . وقتی که گذارای رنگ هموار (صاف) یا یک عکس ایجاد میشود کاربران نیاز به درجه رنگ بالاتری برای حمایت از آن و نیز به زمان بیشتری برای بارگذاری نیاز دارد .
قلم‌ها
نظر به اینکه در ایجاد و انتشار وب ساختار آن نیز مانند دیگر تکنولوژیهای آن به طور مداوم تغییر می‌کنند، دو فونت معمول وجود دارند که در اینترنت از آنها به کرات استفاده میشود . اولین آن New Roman برای کامپیوترهای PC است که معادل آن Time بر روی سیستمهای مکینتاش میباشد ، فونت دوم ، Arial برای کامپیوترهای pc و معادل با آن Helvetica بر روی سیستمهای مکینتاش می باشد . تکنولوژی‌ایی نظیر داینامیک و فونتهای تعبیه شده و توکار برای ارائه سریع و انتخاب بهتر ظاهر می‌شوند .
به هر جهت این فونتهای معمول یک سایت زیبا و جذاب ایجاد می‌کنند ویک نمایش خوب را ارائه دهند .
و اگر گاهی از آن استفاده کنید احتمالاً متوجه خواهید شد که فونتهایی که به آنها نگاه می‌کنید از موقعیت خوبی برخوردار هستند . ممکن است به سایتی نگاه کنید که از فونت دیگری استفاده کرده که چشمان شما را به آسانی درگیر میکند زیرا در بسیاری از موار د از آن استفاده نمی شود .
محدودیت‌ها
یکی از محدودیت‌هایی که در استفاده از فونت وجود دارد این است که فونتهای انتخابی بادی روی سیستم کاربر نصب گردند تا در مرورگر ترجمه شود و اگر کاربر آن فونت را در سیستم خود نداشته باشد ، مرورگر آن را با فونت پیش فرض سیستم خود ترجمه می کند. .برای pc ها فونت Time New Roman و Times برای مکینتاش . اگر قصد دارید که از فونت دیگری استفاده کنید ،اصل فونت باید برای کاربران در دسترس باشد تا آنها بتوانند فونت را بارگذاری و سپس آن را بر روی سیستم خود نصب کنند و ا ین کار باعث می شود که شما را به تجارب وسرمایه‌گذاری بر روی سایت خود مطمئن میکند .
فن چاپ
از آنجایی که فونتها از اجزاء لازم هر سایتی محسوب می شوند فونت و رنگی را انتخاب کنید که همراه با المانهای دیگر صفحه باید بتواند جملات بدون کلام ایجاد کند . خواندن متون زیاد مانند چیزهای دیگری که می خوانید فشار زیادی وارد می کند و خسته‌کننده می باشد و باعث منحرف کردن توجه کاربر می شود .یک فونت انتخابی خوب می تواند در صفحه خوابیده شود و یا درخشش خود را برای کاربر تنظیم و ایجاد کند .
serifs
کدام ترکیب RGB توسط مرورگر هدایت میشود .
انتخاب ترکیب رنگ
ترکیبات رنگ می تواند مکمل همدیگر باشند و نیز مشاهدات کاربران را آسان کند و به آنها اجاز دهد که هر متنی که در صفحه وجود دارد را بخوانند . بیشتر طراحان عقیده دارند که متن مشکی بر روی زمینه سفید ایده‌آل است . دلیل آن این است که این ترکیب کی گیرائی خاص برای خواندن ارائه می کند و برای کاربران خیلی راحت است زیرا همان متونی که در رسانه‌های دیگر قرار داده می شوند .
قابلیت موقعیت‌ها به شما اجازه می‌دهد که از طرح مشکلی بر روی زمینه سفید است فاده کنید و تا جایی که ممکن باشد نیز ، استفاده میشود . خیلی از سایتها رنگهایی دارند که یک کمپانی خاص را نشان می دهد و یا رنگهای پر زرق و برق دارند و همیشه از الگوی سیاه بر روی مشکی تبعیت نخواهد کرد . دریک دسته بندی ، فقط مکانهایی که در آنجا سایت جسارت دارد که از مدل سیاه وسفید بدون آنکه لطمه‌ای به کارآیی آن سایت وارد شود استفاده کند Home page یا صفحه اول یک وب سایت است .مندرجات اطراف Home page فراوان هستند و سایت می‌تواند اهداف خوبی را برای کاربر تأمین کند . این ترکیبات رنگها در المانهای دیگر صفحه مثل عکسها و چهارچوب‌ها می تواند استفاده شود و باعث ایجاد انگیزه برای جستجو و درخواست اطلاعات برای کاربرد گردد .
تذکر فنی
برای ایجاد ترکیبات مختلفل از پیش‌زمینه و متن، از سایت زیر دیدن کنید :
گذارهای رنگ
گذار رنگها روشی است که در آن همجواری رنگها یا جدایی آنها را بیان میکند . گذارهای رنگ ما بین رنگ متن و پیش زمینه بسیار مهم و قابل توجه است و برای کمک به جدایی قسمتهای مختلف صفحه به کار برده می شود . گذارا هنگامی که با عکس در صفحه ایجاد می شوند مسائل زیادی را بوجود می‌آورند . وقتی که گذارای رنگ هموار (صاف) یا یک عکس ایجاد میشود کاربران نیاز به درجه رنگ بالاتری برای حمایت از آن و نیز به زمان بیشتری برای بارگذاری نیاز دارد .
قلم‌ها
نظر به اینکه در ایجاد و انتشار وب ساختار آن نیز مانند دیگر تکنولوژیهای آن به طور مداوم تغییر می‌کنند، دو فونت معمول وجود دارند که در اینترنت از آنها به کرات استفاده میشود . اولین آن New Roman برای کامپیوترهای PC است که معادل آن Time بر روی سیستمهای مکینتاش میباشد ، فونت دوم ، Arial برای کامپیوترهای pc و معادل با آن Helvetica بر روی سیستمهای مکینتاش می باشد . تکنولوژی‌ایی نظیر داینامیک و فونتهای تعبیه شده و توکار برای ارائه سریع و انتخاب بهتر ظاهر می‌شوند .
به هر جهت این فونتهای معمول یک سایت زیبا و جذاب ایجاد می‌کنند ویک نمایش خوب را ارائه دهند .
و اگر گاهی از آن استفاده کنید احتمالاً متوجه خواهید شد که فونتهایی که به آنها نگاه می‌کنید از موقعیت خوبی برخوردار هستند . ممکن است به سایتی نگاه کنید که از فونت دیگری استفاده کرده که چشمان شما را به آسانی درگیر میکند زیرا در بسیاری از موار د از آن استفاده نمی شود .
محدودیت‌ها
یکی از محدودیت‌هایی که در استفاده از فونت وجود دارد این است که فونتهای انتخابی بادی روی سیستم کاربر نصب گردند تا در مرورگر ترجمه شود و اگر کاربر آن فونت را در سیستم خود نداشته باشد ، مرورگر آن را با فونت پیش فرض سیستم خود ترجمه می کند. .برای pc ها فونت Time New Roman و Times برای مکینتاش . اگر قصد دارید که از فونت دیگری استفاده کنید ،اصل فونت باید برای کاربران در دسترس باشد تا آنها بتوانند فونت را بارگذاری و سپس آن را بر روی سیستم خود نصب کنند و ا ین کار باعث می شود که شما را به تجارب وسرمایه‌گذاری بر روی سایت خود مطمئن میکند .
فن چاپ
از آنجایی که فونتها از اجزاء لازم هر سایتی محسوب می شوند فونت و رنگی را انتخاب کنید که همراه با المانهای دیگر صفحه باید بتواند جملات بدون کلام ایجاد کند . خواندن متون زیاد مانند چیزهای دیگری که می خوانید فشار زیادی وارد می کند و خسته‌کننده می باشد و باعث منحرف کردن توجه کاربر می شود .یک فونت انتخابی خوب می تواند در صفحه خوابیده شود و یا درخشش خود را برای کاربر تنظیم و ایجاد کند .
serifs
زواید آرایشی کوچکی وجود دارند که در انتهای هر کاراکتر اضافه می شوند که در شکل زیر وجود دارند .
در فونت Serif
این زواید به توانایی خواندن شما با هدایت چشمهای کاربر در امتداد هر کاراکتر کمک میکند ولی به هر جهت خواندن این نوع قلم در سایزهای خیلی کوچک یا خیلی بزرگ
( کوچکتر از ۸ نقطه) مشکل میباشد . با این نوع نمایش فونتهای Serif باید بیشتر در بدنه سایت جایگزین شود . شکل ظاهری Serif 4 نوع میباشد :
Sans Serif ( آرایشی )
Sans Serif زوایدی که در انتهای هر کاراکتر در فونت Serif وجود دارد را ندارند شکل زیر را مشاهده کنید :
در نمایش کاراکترها از این زوائدی که در انتهای هر کاراکتر وجود دارد کاسته می شود . فونت Sans Serif باید کاراکتر به کاراکتر خوانده شود توصیه می کنیم که از این فونت برای متون با اندازه کوچکتر از ۸ نقطه و یا اندازه‌های خیلی بزرگ استفاده کنید . معمولاً استفاده از این ۲ نوع فونت با یکدیگر در یک صفحه وب ترکیب خوبی را ایجاد می کند .
باید از مجموعه فونتهایی در سایت استفاده کنید که موافق هم باشند و در تناقض با یکدیگر نباشند . در یک صفحه وب می توانید از مجموعه ای از فونتهای مختلف استفاده کنید ولی باید بدانید که برای نمایش موضوعاتی که در سایت شبیه به هم هستند از فونتهای شبیه بهم استفاده کنید . برای مثال تمامی متنهای Navigation باید دارای فونت شبیه به هم باشند و یا تمامی پاراگرافهای معمولی باید دا رأی فونت نظیر هم باشند ولی بعضی از متون می‌باشند که نیاز به این دارند که با فونت متفاوتی نسبت به بقیه اجزاء صفحه ظاهر شوند مثل اعداد و رویدادها …
از بکارگیری فونتهای بزرگ در صفحه پرهیز کنید چرا که باعث شلوغ شدن صفحه و ایجاد مشکل برای خواندن آن می شود . یک صفحه ایده‌آل ساختار ثابت و با استحکام دارد و برای کاربر دید و منظر خوبی ایجاد می کند . رنگ فونتها نیز باید مستحکم باشد و نیز کاربر بداند که آن متن چه چیزی را می خواهد به نمایش گذارد .
سایز فونت
سایز فونت نرمال برای بیشتر مرورگرها ۳ می باشد واندازه‌های دیگر با این مقدار فرضی اندازه‌گیری می شوند . برای مثال اگر بخواهید سایز فونت را به ۵ افزایش دهید کدی که برای آن به کار می برید بصورت فوق است :
به جای استفاده از
سایز فونت نرمال برای بیشتر مرورگرها ۳ می باشد و اندازه‌های دیگر با این مقدار فرضی اندازه‌گیری می شوند . برای مثال اگر بخواهید سایز فونت را به ۵ افزایش دهید کدی که برای آن به کار می‌برید بصورت فوق است :
نوع صحیح True Type
خیلی از فونتهای شناخته شده به عنوان نوع صحیح هستند به این معنی که آنها می توانند در هر سایز نقطه‌ای بدون کم شدن کیفیت کاراکترها ترجمه شوند . True Type یک تکنولوژی دیجیتال است که با کامپیوترهای Apple توسعه یافته است و امروزه هم با سیستمهای Apple و هم با سیستم های Microsoft استفاده می شوند . Arial , Time new roman از نوع صحیح هستند .
بعضی از این فونتها مثل Georgia , Verdena نسبتاً بیشتر ظاهر می شوند و به زیبایی ترجمه می شوند وی صفحه سنگین و پرمایه ایجاد می‌کنند .
جلوگیری از اثرات بصری نامطلوب
این فرآیند باعث جلوگیری از ناهمواری لبه‌های متن یا نوشته می شود . اغلب از تصاویر برای نمایش کاراکترها ، کلمات و جملات استفاده می شود . این فرآیند کناره‌های متن را بصورت هموار در می‌آورد . با تیره کردن خطوط بین متن و پیش‌زمینه ( پرکردن ناصافی‌های لبه‌های متن ) لبه‌های دندانه‌دار کنار فونت را از بین می‌برد . این گزینه بیشترین اثر خود را در تایپ متن با سایزهای بزرگ ظاهر می کند .یکی از مضرات این فرآیند این است که مقداری رنگ را به تصویر یا نوشته اضافه میکند . مخصوصاً در سایزهای بزرگ ممکن است برای بارگذاری مشکلاتی ایجاد گردد .
خطوط افقی با طول زیاد
برای آسانتر خواندن متن از ایجاد متن‌هایی با خطوط طولانی که در پنجره‌های مرورگر ایجاد می شود پرهیز کنید . خواندن بصورت خط به خط هر بار بازگشت به سمت چپ صفحه در هر زمان ( اگر خطوط داخلی طولانی باشد ) کاری مشکل است . این نکته را متذکر می شویم که خطوط را بصورت پاراگراف ایجاد کنید و بیشتر از ۱۰ تا ۱۲ کلمه برای مرورگرهای معمولی را در یک پاراگراف قرار ندهید . اگر مجبورید که متون زیادی در صفحه داشته باشید دو قالب ستون برای آن ایجاد کنید .
ملاحظات دیگر
برای یافتن بهترین فونتی که خواسته‌های شما را بهترین حالت برآورد کند نیاز به تشخیص دامنه فونت و حدود عبارت برای تغییرات و دگرگونی آن دارید .
باید همه این تکنیکها و موارد را مورد آزمایش قرار دهید . توصیه‌های زیر می تواند در جلوگیری از اشتباهات معمول در هنگام توسعه یک سایت به شما کمک کند .
در نظر داشته باشید که تمامی فونتهای مجزا باهم یکی می شوند و نیز بدانید که چگونه فونتها به طراحی شما وابسته هستند .
هر فونتی به طور جداگانه می تواند تمامی منظورات ما را در یک زمان برطرف سازد . طراحی المانها مثل ( سایز و فاصله خطوط و رنگ پیش زمینه و پس زمینه ، Margin ) همه و همه می‌توانند در محاسبه و ایجاد یک نتیجه مطلوب کمک می‌کنند . متن فونتهای نسبتاً بی اثر مانند Sansserif می‌تواند تنوع و دگرگونی عمیق در اشکال ساده میان ترکیبات گوناگون انجام دهد .
فونتهای مرورگر Netscape
برای مرورگر Netscape در سایت www.bitstream.com اشکال کاراکترهایی که در صفحات کاربر دارند وجود دارد وآنها در یک فایل فشرده (PFR) ذخیره شده‌اند .
می‌توانید فایل PFR را به عنوان یک مرجع برای صفحات HTML و اسناد Style Sheet خود قرار دهید . وقتی که صفحه توسط مرورگری مشاهده شد که از این فایل پشتیبانی می کرد مرورگر فایل PFR را می‌خواند و کاراکترها را دوباره ایجاد می کند . PFR قادر است که کاراکترها را در اسناد اصلی برای همراهی اسناد در هرجایی به کار ببرد
فونتهای میکروسافت
فونتهای وب اولیه میکروسافت Open Type نامیده می شوند سایت تلاش مشترکی بین میکروسافت و Adobe می باشد . از نقطه نظر نگاه وب Open Type مانند Truedoc عمل می کند و کاراکترها را قادر می سازد که از میان اسناد در فرم متراکم شدهای عبور کنند .
open type پهنای ابتدائی دارد که post script , true type نوع ۱ را به عنوان یک قالب منفرد در هم ادغام کرده است .
گر چه Type Open , True Dec تکنولوژیهای رقابتی با یکدیگر هستند ولی آنها قادر خواهند بود ه با هم در یک کامپیوتر همجوار باشند و هر فونتی را در صفحه ظاهر کنند به شرط آنکه کاربران آن فونت را بر روی سیستمهای خود Install کنند . این قالب این تعهد را ایجاد میکند که کاربرانی که از مرورگرهای مختلف استفاده می‌کنند همیشه هر دو این تکنولوژیها را حمایت کنند .
بعضی کاربران مرورگرهای قدیمی دارند . به عنون یک طراح وب باید بتواندی بین تقاضای خود برای تناسب فونتها و نیاز به جلب بیشترین مخاطب ارتباطی برقرار سازد . و این حقیقت کوشش بیشتر شما را برای ایجاد یک صفحه با منظر خوب ( مستقل از نوع مرورگری که این صفحات با آن دیده می‌شوند ) را می‌طلبد .
فضای سفید
هنگامی که در ابتدا صفحه‌ای بر روی مرورگر شما بارگذاری می شود ، علاوه برآنکه در هر قسمت صفحه با مفاهیمی مواجه می‌شوید ، نتایج مندرجات محدودی را که به خوبی و با هماهنگی توزیع شده‌اند مشاهده می‌نمایید . اولین حس شما از این نوشته‌ها چیست ؟ اگر شما بمانند خیلی از کاربران هستید صفحه‌ای باتوزیع هماهنگ المانها و مقداری فضای خالی ( که در انجمن توسعه به عنوان فضای سفید معروف است ) را ترجیح می‌دهید . توجه داشته باشید که کاربران به خاطر ایجاد صفحه‌ای با متنهای زیاد وشلوغ از شما قدردانی نخواهند کرد . آنها خیلی سریع صفحه شما را مرور می کنند و اگر صفحه شما اینچنین بود ممکن است اطلاعات زیادی را ازدست بدهند این نکته بدان معنی نیست که برای کاربران اطلاعات زیاد ایجاد نکنید بلکه به این مفهوم است که نباید همه این اطلاعات را در یک صفحه قرار دهید . هر صفحه وب باید حدوداً ۵۰ درصد متن کمتری نسبت به یک صفحه مشابه چاپ شده آن داشته باشد . هر صفحه باید برای ارائه اجمالی اطلاعات طراحی شود و باید اتصالاتی برای رسیدن کاربران به جزئیات بیشتر و عمیقتر ایجاد شود . همه کاربران به یک مقدار اطلاعات نیاز دارند . به کاربر این اختیار را بدهید که خود انتخاب کند که آیا جزئیات را می خواهد یا نه ؟
و نیز صفحه را به منظور کوتاه کردن آن قسمت نکنید . مگر آنکه شکستن آن منطبق باشد . هر صفحه باید مستقل بوده و و ابستگی به جایی نداشته باشد . بعضی از طراحان و انتشار دهندگان وب از جدوال و عکسهای Gif برای اضافه کردن فضا به صفحه استفاده می‌کنند . بعد از محاسبه اینکه کاربران چه چیزی را نیاز دارند که بدانند می توانید صفحه‌آرایی خود را با استفاده از جداول و حاشیه‌ها HTML برای قرار دادن موفقیت سند و مندرجات صفحه در فضاهای خالی شروع کنید به عبارت دیگر جداول همه آن چیزهایی هستند که شما به آنها نیاز دارید .
ساختارها
ساختار صفحه با فایلهای Gif شفاف
یک عکس شفاف می تواند در صفحه به جای اشغال کردن فضاهای خالی وارد شود و نیز شما می‌توانید طول و عرض آن را با بکار بردن ویژگی های در تگ
بادادن این مقادیر پارگراف با فاصله pix 15 از سمت چپ شروع میشود . باهمان رویه می‌توانید با دادن این مقادیر پاراگراف را با قرار دادن مقادیر فوق افزایش دهید .
عکسهای Gif می‌توانند در صورت نیاز در جداولی برای کنترل سایز ستونها وسطرها در صورت نیاز قرار داده شوند . به خاطر داشته باشید که هدف ما کاهش بی نظمی‌های صفحه ، به این منظور که کاربران را قادر به مرور مطالب و اسناد و نیز انتخاب اتصال دیگر کند ، می باشد .
ساختار صفحه با جداول
طراحان وب باید به خوبی ساختار صفحه را درک کنند و از جداول در ساختار صفحات استفاده کنند . به طور پیش فرض تمامی موارد در HTML از طرف چپ تراز می شوند . طراحان وب از جداول برای توزیع مندرجات کل صفحه نمایش در مرورگر استفاده می کنند . ساختار جدول می توانند با مندرجات پر گردند نیز می توان برای جداول قاب قرار نداد تا کاربران متوجه وجود جدول در صفحه نگردند .
Cascading Style Sheet-CSS می تواند برای رفع جداول در ساختار HTML ایجاد شوند که متأسفانه همه مرورگرها از آن حمایت نمی‌کنند و فعلاً تا زمانی که CSS بصورت استاندارد جهانب در نیامده از جداول به عنوان استاندارد استفاده می وشد .
ساختار صفحه با استفاده از فریم‌ها
فریم ها نیز می توانند برای ساختار صفحات مورد استفاده قرار گیرند با این وجود آنها نقش میانی در Navigation ها را نیز دارند . فریم‌ها می‌توانند در یک سایت استفاده شوند و باید به زودی در بحث روند طرح و برنامه ریزی مطرح شوند . به این خاطر که فریم‌ها به صورت نمایشی در طرح Navigation اثر دارند . فریم ها بر روی عاملهای دیگر سایت نیز اثر می‌گذارند و سایت را به خوبی آرایش می‌کنند .
ساختار صفحه با استفاده از تعیین موقعیت
لایه ها با المانهای پشته‌ای دیگر بصورت عمودی در آمدند و بیشتر مرورگرها از آنها حمایت می‌کنند . تا هماهنگی اصلی در لایه‌گذاری این است که Netscape Navigator از تگ
خلاصه فصل
در این فصل همه المانهایی که باید در یک صفحه وب به کار برده شوند و سپس درباره چگونگی کاربرد آنها بحث کردیم .
در مورد برنامه و قالبهای گرافیکی و المانهایی که ساختار صفحه را می‌سازند و نیز درباره ساختار فونتها و انتخاب آنها نیز بحث شد و همچنین درباره ابن که فضای چیست و فریم‌ها و جداول چگونه در صفحات مورد استفاده قرار می‌گیرند .
مقدمه
شما ممکن است توانسته باشید تمامی منابع طراحی در دنیا را برای سایت خود بکار گیرید ولی نتوانسته باشید که سایتی را ایجاد کنید که وظایفش را به خوبی انجام دهد ؟ چگونه ؟ زمانی که کارآیی کاربران و مخاطبین خود را در نظر نگرفتید ، و این امر یک حرکت خودجوش نیست و باید به تمامی نیازهای کاربران پاسخ داده شود . این فصل در مورد تمامی پارامترهایی که کاربران شما می‌خواهند بحث میکند و به شما نشان می‌دهد که چگونه کارآیی سایت خود را آزمایش کنید .
اهمیت کارآیی مخاطبین ( کاربران )
یک طرح وب باید از علم مخاطبین خود همراه با navigation مطلع باشد . دانستن حساسیت‌های مخاطبین عامل موفقیت سایت است برای مثال اگر شما برای کاربرانی که سیستمهای قدیمی دارند سایت طراحی می کنید و از چند رسانه ای های جدید استفاده می‌کنید ، مخاطبین خود را درک نکردید . درک مخاطبین منوط به آموختن درباره جغرافیای افراد و سن ، تحصیلات ، موقعیت ، درآمد میباشد ،بعلاوه شما نیازمند آن هستید که درباره تکنولوژی که این قشر از کاربران درسیستم‌های خود استفاده می‌کنند بدانید ونیز در نظر داشته باشید که این اطلاعات شامل فاکتورهایی مثل سرعت ، ارتباطات ،مرورگرای با وزنهای مختلف و plug-ins های در دسترس می باشد . هنگامی که شما این فاکتورها را دانستید و درک کردید بهترین نوع حمایت را از کاربران خود را خواهید داشت .
آزمایش کارآیی یک سایت می‌تواند به المانهای ممتازی تقسیم شود که این المانها در طراحی جزء مفاهیم اولیه هستند . این المانها دستورات منحصر به فرد نیستند و همه آنها اهمیت یکسان دارند ، زیرا ترکیب آنها می‌تواند قابلیت‌های کارآیی سایت را محاسبه کند و حذف هر یک باعث کم شدن کارآیی می شود .
کیفیت مندرجات : کیفیت مندرجات ارائه شده در یک سایت ارزش محصولات سایت را ارائه می‌دهد .
Navigation آسان وکاربردی : کاربران باید بتوانند خیلی راحت و آسان و با کوشش کم بوسیله Navigation سایت را بپیمایند و الا به سایت دیگری خواهند رفت .
اطلاعات ساختاری : توجه نکردن به ساختار سایت باعث کم کردن کیفیت مندرجات سایت می شود تأثیر مطلوبی بر روی کاربر ندارد و این نکته بدان معنی است که اطلاعات سایت باید در ساختارهای منطقی سازماندهی شوند .
قابلیت جستجو : همه کاربران در مورد استفاده از یک موتور جستجو شبیه به هم هستند . بنابراین توانایی ایجاد یک موتور جستجوگر بازیابی و هویت مندرجات شما را فراهم می کند .
تکنولوژی نرم افزار
قبل از آزمایش
اولین مرحله از آزمایش کارآیی توسعه سایت مربوط به نقطه پایانی آن یعنی محصولات می باشد . یک آزمایش کارآیی نمی‌تواند ارزیابی دقیقی را ایجاد کند . چه کسی باید این آزمایش را انجام دهد ؟
این آزمایش می تواند با حداقل ۵ آلی ۶ نفر شروع شود آزمایش سایت با اعضاء تیم‌های طراحی دیگر غیر منطقی به نظر می رسد . بعلاوه موضوع تست باید برای کاربران واقعی سایت طرح گردد . برای نمونه شما نباید سایت مربوط به تجارت سهام را باگروه سنی جوانان تست کنید و یا نباید فقط خود را محدود به دلالان سهام کنید . ولی یک تست خوب می تواند شامل همه گروهها باشد . مثلاً در این مثال شما نباید آزمایش خود را برروی کسانی که از تجارت کم می‌دانند یا اصلاً تا بحال تجارت انجام نداده‌اند مطرح کنید . روش دیگر برای انجام آزمایش ایجاد اطلاعات ورودی ارزشمند از مشاغل مختلف است. کاربران باید بتوانند کارآیی سایت را در پایگاه داده سایت ثبت کنند و نیز لیستی از کسانی که در سایت تجارت داشتند فراهم گردد . به هر جهت کاربران اطمینان دارند که شما آنها را به دقت درک کردید و نظرات آنها در دورنمای سایت شما تأثیر داده خواهد شد . اگرسایت‌های داخلی برای یک هدف معین با هم اشتراک داشته باشند یک اینترانت تشکیل می دهند . به هر جهت باید اعضاء آزمایش به جزء کسانی که از مراحل پیشرفت و توسعه جدا شدند را در آزمایش بکار گیرید . مهم‌ترین اهداف گروه نمایش دقیق ،از موقعیت و توانایی سایت شما می باشد . در طی سالهای اخیر و ازدیاد خیل کاربران آزمایشهای کارآئی سایت بدعتی بوده که در طی سالهای اخیر و ازدیاد کاربران آزمایشهای کارائی سایت بدعتی بوده که در طراحی صفحات وبنا نهاده شده است . این قالب متداول که در حال حاضر در وب وجود داد ، مجموعه کلی نظیر یکدسته از انتشارات جداگانه مانند روزنامه‌ها با کتابهایی که هر کدام در یک زمان قابل دسترس باشند را ، در اختیار کاربران قرار می‌دهد . وب به طور کلی پایه و بنیادی برای ارتباط کاربران می باشد و سایتهای شخصی جزو ناچیزی از دنیای وب هستند .
سرعتی که کاربران با آن مرورگرهای خود را به روز می کنند ،به طور مسلم با ازدیاد کاربران بر روی خط اینترنت کاهش می‌یابد . مطالعات نشان می‌دهد که سرعتی که کاربران برای به روز کردن مرورگر از ورژن ۳ به ورژن ۴ صرف می‌کنند بیشتر از برزو کردن مرورگر از ورژن ۲ به ۳ می باشد. بعضی از فاکتورهای زیر در جابجایی آرام مرورگرها لحاظ می شود . بستر کاربران به واسطه کاربران تکنیکی زیردستی که به لحاظ خودشان به اینترنت علاقه‌مند هستند رشد زیادی داشته است . بیشتر کاربران امروزی به جای توجه به نرم‌افزار و تکنولوژی توجه خاصی به مندرجات سایت دارند . بنابراین برای بروز کردن مرورگر خود تمایلی نشان نخواهند داد .
تعداد زیادی از کاربران جدید نمی دانند که چگونه باید مرورگر خود را به روز کنند . بنابراین کار خود را با مرورگری که دارند ادامه می دهند . در قبل اکثراً کاربران اینترنت استاد و خبره بودند ولی امروزه بیشتر کاربران متخصص نیستند و توانایی کمکی در بارگذاری ، نصب و نتظیمات نرم افزار دارند .
در باب اضافه کردن ویژگی‌ها و با توسعه آزمایش و کارآیی و بروز رسانی ، مرورگرهای اخیر اجبار کمتری نسبت به قبل دارند . مرورگرهای اولیه مقدماتی بودند . توسعه‌های نسبی که از یک مرورگر به مرورگر بعدی منتقل می شود نسبتاً قابل توجه بوده و برای بروز رسانی به نفع کاربرهای قدیمی می باشد .
اندازه زمان بارگذاری و بروز رسانی سریع با استفاده از پهنای باند در دسترس توسعه یافته است بنابراین بروز رسانی به خدمات اتصالی پرهزینه تری یا زمان بیشتری احتیاج دارد . مطابق با سایت میکروسافت
Explorer Internet ورژن ۴ در بسیاری از موارد به عنوان مرورگر از Ayvest استفاده شده است .
قابلیت آزمایش
یکی از روشهای ایجاد یک سایت مطلوب ، تست کردن کارآیی آن می باشد . انتشار دهندگان و توسعه دهندگان اشاره‌ای بر این که طراحی سایت آنها وابسته به مخاطبین خواهد بود ندارند . توسعه دهندگان وب از نتایج تولیداتشان آگاهیهای لازم را بدست می آورند و مفهوم سایت را درک می‌کنند . این آگاهی به توسعه دهندگان سایت یک نگاه کلی از واقعیات ارائه می کند . آنها می‌توانند سایت را بپیمایند و اطلاعات را پیدا کنند . زیرا ارتباط نزدیکی با پروژه‌های کاری خود دارند .
کارآیی سایت می‌تواند با کاربرانی که دید و شناختی از سایت ندارند حساب شود . مدیریت یک آزمایش کارآیی با داشتن یک دید علمی از سایت ایجاد میشود .
وظایف کارآیی
در هنگام اجرای آزمایش اعضاء باید برای انجام وظایف واقعی از یکدیگر سئوال کنند . لیستی از وظایف و عملکرد هر قسمت بدون اشاره بر اجرای آنها ایجاد کنید . این سایت خود به کاربران می‌گوید که آنها چه چیزهایی نیاز دارند که بدانند . لازم است که ازشرکت کنندگان هم پرسیده شود که المانهایی را که دوست دارند و نیز مواردی که دوست ندارند را مشخص کنند و رعایت این موارد باعث ایجاد یک سایت کارآمد می گردد . شاید برای طراحان وب شنیدن انتقادات از شرکت کنندگان در آزمایش سخت باشد و آنها را ناخشنود سازد، اما نباید مانع از پیشرفت شود .
نتایج
بعد از اتمام آزمایش مصاحبه‌ای با شرکت‌کنندگان داشته باشید . باید اغلب به آنها در بیان کردن مواردی که از یاد بردند کمک کنید آنها ممکن است فرصت کافی برای نوشتن نیز نداشته باشند . باید سئوالات زیر را از آنها بپرسید . :
۱ـ احساسات اولیه شما بعد از دیدن سایت چه بود ؟
۲ـ عکسهای سایت چه نوع شرکتی را برای شما به تصویر می‌کشد ؟
۳ـ آیا طرح اصلی ساختار سایت را درک کردید ؟
۴ـ عناصر و المانهای عمده سایت را به یاد دارید؟
درخواست نتایج
ممکن است در حین آزمایش بعضی از موارد ناکارآمدی سایتتان نمایان گردد . به عنوان یک طراح ممکن است که اشکلات و انتقاداتی از سایتی که در طراحی آن کوشش داشتید ، گرفته شود . اما حتماً باید نتایج را ضبط و ترتیب اثر دهید . ناراحتی که از انتقاد از شرکت‌کنندگان آزمایش برای شما ایجاد میشود بسیار بهتر از آن خواهد بو که سایتی بدون کارآیی خوب ایجاد کنید و همواره بهتر آن است که حجم زیادی از انتقادات را دریافت کنید ولی به جای آن سایتی با کیفیت خوب ارائه می‌دهید .
تمرین محاسبه کارآیی یک وب سایت
به سایت بروید و داخل سایت را بپیمائید و آسان و در مورد گردش در آن و نحوه ارایه محصولات نظر خود را بیان کنید .
۱ـ این سایت ساختار خوبی دارد و اطلاعات بصورت شفاف در هر صفحه‌ای قرار دارد و لینکهایی نیز برای دسترسی به نواحی دیگر سایت قرار دارد . این لینکها مخصوصاً برای پیمایش راحت و پیدا کردن سریع اطلاعات بنا شده است .
۲ـ به سایت و در میان سایت پیمایش کنید و سعی کنید که آیتمهای ویژه آن را پیدا کنید ( اسم – سایز – رنگ و به جلو )
ساختار این سایت به خوبی سایت قبلی نیست و علت اصلی آن اینست که بیشتر اطلاعات در یک صفحه قرار دارد و ضروری نیست که از یک صفحه به صفحه دیگر بپیمائید بعلاوه سایت دارای گروهی از Navigation های تعریف شده خوب در بالای صفحه برای پیمایش می باشد . لیست لینکها در قسمت چپ صفحه می تواند باعث ایجاد آشفتگی گردد . بعلاوه خیلی از صفحات شامل تعداد زیادی تصویر می باشد که به جای ایجاد شفافیت سردرگمی ایجاد میکند .
۳ـ وارد سایت شوید و در آن سایت پیمایش کنید و سعی کنید که مناطق ویژه مورد علاقه را پیدا کنید .
سایت Yankee بهتری مثال از یک سایت گیرا می باشد . اتصالات Navigation در بالای صفحه و بصورت واضح جایگزین شده است و کاربران فرصت پیمودن را با انتخاب موارد Navigation دارند . اتصال به سایتهای وابسته بوسیله تصاویر سمت چپ امکانپذیر است . ا ین سایت همچنین دارای امکانات Flash برای مرورگرهایی که از آنها حمایت می‌کنند نیز هست و نیز این سایت تجهیزات لازم برای کاربرانی که Plugins ندارند را مهیا میکند .
خلاصه فصل
در این فصل درباره دانش کاربران و اثر کارآیی سایت و نیز درباره فاکتورهای تأثیرپذیر و آزمایش کارآیی و نتیجه آن بحث کردیم .
اهداف
۱ـ توصیف اهمیت Navigation
۲ـ شرح اینکه چگونه مرورگر Navigation را کنترل می کند .
۳ـ توصیف ساختار سایت
۴ـ تعریف قراردادهای مشابه
۵ـ جستجو و کاوش برای یک طرح Navigation
مقدمه
طراحی خوب درباره اینکه اثر مطلوب و گیرایی دارد و مندرجات را به خوبی توصیف میکند . بدون یک برنامه‌ریزی دقیق از اینکه چگونه محتویات سایت را به خوبی به هم اتصال دهید طراحی سایت دچار سردرگمی خواهد شد و با شکست مواجه می شود . کاربران باید بدانند که نقاط مبهم دیگر در کجا قرار دارند و چگونه باید به آنجا بروند و چنانچه هر کدام از این فاکتورها را فراموش کردید کاربران به سایتهای دیگر خواهند رفت .
چرا Navigation مهم است ؟
فرآیند جستجو و کاوش ( سایت پیمائی ) اغلب در قسمت چپ صفحه قرار داده میشود . در ابتدای طراحی یکسایت وب معمولاً با صفحه ای ایجاد می‌کنید و سپس اتصالات دیگر را به صفحه خود اضافه می‌کنید . به هر جهت اگر شما دور اندیشی لازم در مورد اینکه چگونه کاربران در سایت شما گردش می کنند را نداشته باشید ، نتیجه آن سردرگمی در سایت خواهد بود .
Navigation فقط به معنای حرکت از یک مکان به مکان دیگر نیست بلکه Navigation جا به جایی از یک نقطه به نقطه دیگر از یک روش کنترل شده و سنجیده و با منظور معین می باشد. بدون برنامه ریزی هیچگاه به یک پیمایش درست در سایت نخواهید رسید . هنگامی که سوار ماشین می شوید احتمالاً به مغازه و یا سر کار بروید . در ابتدا خود را برای مسافرت آماده می‌کنید و در رسیدن به مقصد سردرگم هستید . ولی کار در مرحله دوم برایتان آسانتر است زیرا به راه و نشانه‌های آن آشنا شدید . حال احتمالاً بدون فکر و اینکه چگونه از اتوبان استفاده کنید سفر را آغاز می‌کنید راحت هستید و احساس سردرگمی ندارید و در هر زمان می دانید که در کجا هستید. حالا به یک مسافرت به شهر جدید فکر کنید . چه احساسی دارید ؟ تردید درباره اینکه شما کجا هستید و چگونه به مقصد هدایت می‌شوید ؟ در ارتباط با همین احساس علامتهای متفاوتهای برای راه مثل چراغهای خیابان و ساخت اتوبانها وجود دارند . کاربران جدید هم در هنگام دیدن سایت شما همین حس را دارند . آنها گردشگر هستند و نمی دانند که هنگامی که به صفحه اول سایت شما رسیدند به کجا باید بروند .
به عنوان یک طراح وب وظیفه شما این است که به جهت آنکه کاربران به راحتی از سایت شما لذت ببرند Navigation ایجاد کنید تا آنها به طور کلی با سایت آشنا شوند و تشخیص دهند که کجا هستند ؟
مطالعه این مسیر به زمان نیاز ندارد و با یک طراحی خوب و با کمک یک کلیک تمامی را شناسانده می شود .
مرورگرها و Navigation
بیشتر معماری مرورگرهای وب با عوامل زیر توسعه داده می شود .
دسترسی به لایه‌های مرورگر وب : شامل پروتکل‌‌هایی برای ارتباط با سایتهای دور ، تنظیم http تا انواع گوناگونی از پروتکلهای سری مثل SSL
لایه‌های Navigation : کاربرانی که در سایت بودند را نگه می دارد و به آنها کمک میکند که کجا بروند و می‌تواند شامل سیستمی باشد که نشان می‌دهد از کدام سرویس کاربران بازدید کردند .
نمایش لایه‌ها : پنجره‌های مرورگر که صفحات درخواست شده کاربران را نشان می‌دهند .
هر مرورگر اجزاء منحصر به فردی دارد که در پیمودن سایت به کاربران کمک میکند . ولی اکثر مرورگرها در موارد زیر با هم اشتراک دارند .
ابزار برگشت به عقب Tool Bar Back Button
ابزار برگشت به جلو Tool Bar Forward Button
میدان آدرس Uniforme Resource Location_ URL Address Filed
تاریخچه مرورگر Browser History
علاقه مندیها Bookmarks Favorites
نوار وضعیت Status Bar
رنگی کردن ابر اتصالات Color Hyper Link
یک تمرین معمولی برای استناد به المانهای Navigation در سایت وجود دارد . بعضی از طراحان در پایان صفحه یک ابر متن برای برگشت ایجاد می‌کنند که کاربر می‌تواند برای برگشت به صفحه اول روی آن کلیک کند .
بقیه تغییرات رنگ اتصالات پیش فرض ممکن است کاربر را دچار سردرگمی در ارتباط با جایی که در آن قرار دارند . بعلاوه این المانها برای کمک به کاربر طراحی شده است . بنابراین باید نسبت به Navigation از اهمیت دوم برخوردار باشد . کاربر نباید مجبور به استفاده ازکلیدBack باشد زیرا ممکن است راه خود را گم کند .
Navigation اولیه و ثانویه
Navigation به طور عادی به ۲ نوع مقدماتی و ثانویه رده‌بندی شده است . Navigation مقدماتی شامل المانهای Navigation است که در بیشتر مکانهای سایت در دسترس هستند . المانهای Navigation ثانوی : که به کاربر اجازه می دهند تا در مکانهای ویژه گردش کنند . برای مثال خیلی از سایتها صفحاتی دارند که اطلاعاتی در مورد یک شرکت را ارائه می‌دهند . این Navigation های نوع دوم ممکن است اتصال درباره ما (About US) باشد . هنگامی که کاربر به صفحه About us (درباره ما ) می‌رسد ممکن است در اینجا اتصال دیگری وجود داشته باشد . برای مثال خیلی از سایتها صفحاتی دارند که اطلاعاتی در مورد یک شرکت را ارائه می دهند . این Navigation های نوع دوم ممکن است اتصال درباره ما (About us) باشد . هنگامی که کاربر به صفحه About us ( درباره ما) می رسد ممکن است در اینجا اتصال دیگری وجود داشته باشد . برای مثال ممکن است در آنجا اتصال برای اطلاعات سرمایه‌گذاری ، مکانهای دیگر و مطبوعات آزاد و … باشد . این اتصالات جزء المانهای Navigation ثانوی هستند . زیرا آنها مربوط به صفحه درباره ما (About us) هستند نه مربوط به صفحات دیگر سایت و بنابراین این اتصالات نمی‌توانند در نواحی دیگر سایت پیدا شوند .
سلسله مراتب Navigation
بیشترین جذابیت گرافیکی وب این است که هر صفحه بر روی هر سایت فقط با یک کلیک ایجاد میشود . این خاصیت محدودیتی که شما در دنیای خطی با آن مواجه بودید را از بین می‌برد . بیشتر فعالیتهای روزانه خود مثل خواندن ، کارکردن و رانندگی در نوع خطی دنبال می شوند . در ابتدا عملی را شروع می‌کنید و مرحله به مرحله ارائه می دهد تا تمام شود ولی این مدل از طراحی کمک میکند که محدودیتهای دنیای خطی از میان برداشته شود .
مکانی که در آنجا کار می‌کنید یک سلسله مراتبی دارد و یک سازمانبندی دینامیکی برای آن تعریف شده است . خانه شما نیز یک سلسله مراتب دارد و والدین در بالاترین جایگاه قرار دارند و بچه‌ها در زیر این لایه قرار دارند . این مفاهیم دقیقاً‌بیان میکند که چگونه قابل سازماندهی و اداره می شوند . وب سایت نیز از مثالهایی که ذکر کردیم متفاومت نیست . در ساختار وب در قسمت بالا ، صفحه خانگی (homepage) قرار دارد و زیر آن صفحات دیگر قرار دارند که طبق مثال قبل این صفحات همان بچه‌ها هستند .
این صفحات بصورت خطی نیستند و شاخه شاخه می‌باشند و با حجم‌های متفاوت رشد کرده و وابسته به مفاهیمی هستند که هر شاخه را هدایت میکند . این ساختار به عنوان ساختار اطلاعات سایت شناخته شده است .
آگاهی از موقعیت
کاربرانی که می‌خواهند از سایت شما اطلاع پیدا کنند لازم است که ساختاز سایت را بدانند و این مسأله باعث میشود که کاربران سرگرم شوندو با سایت بمانند . همیشه باید یک علامتی وجود داشته باشد که کاربران بوسیله آن از موقعیت خود آگاهی پیدا کنند . آگاهی از موقعیت شامل آگاهی از مبداء و یا صفحات دیگری است که وابسته به صفحه ما هستند . خیلی از تکنیکهایی که برای آگاهی کاربران می‌تواند ایجاد شود شامل موارد زیر است :
عنوان – سرفصل
عنوان هر صفحه ایجاد وسیله مؤثر برای دانستن و تعیین موقعیت جایی که در آن قرار دارند . محدودیت استفاده از این روش برای آگاه شدن از موقعیت در این است که در این روش فقط موقعیت مکان جاری نشان داده میشود و موقعیت‌های وابسته ( نظیر صفحات بچه ) طبق مثال قبل را نشان نمی‌دهند .
رنگها
بعضی از سایتها از رنگهایی استفاده می‌کنند که اشاره به موقعیت دارند ( یعنی با بکار بردن درجات رنگ مختلف برای جاهای مختلف ) محدودیت استفاده از رنگها در این است که کاربر باید طرح رنگ را درک کندو سپس برای گردش در سایت بتواند با آن ارتباط برقرار کند. محدودیت دیگر استفاده از رنگها برای کاربرانی می باشد که از لحاظ بینایی دچار مشکل هستند و این استراتژی برای آنها بی‌اثر است .
تصاویر
تصاویر برای آگاهی از موقعیت علامتهای مفیدی ایجاد می‌کنند . به عنوان مثال کلیدهایی که از آنها برای برنامه‌ریز روزانه استفاده می شود را در نظر بگیرید . اغلب یا بیشتر این کلیدها در محدوده دید قرار دارندو هر کلید نامی دارد و کلیدها در هر مکان ظاهر متفاوت دارند . این استراتژی برای آگاهی از موقعیت مؤثر تر است زیرا صفحات مادر و بچه از هر مکانی در محدوده دید قرار می‌گیرند .
cooki
علائمی مثل خطوط اشاره بر مسیر (Navigation) می‌توانند شما را در رسیدن به موقعیت جاری کمک کنند که این علامت برای حرکت کاربران در صفحات چند گانه مفید است .
نقشه سایت
نقشه سایت در اسناد جداگانه در HTML وجود دارند و هر صفحه از سایت می تواند با متون ساده و شرحهای گرافیکی به نمایش گذاشته شود . کاربران می‌توانند از اتصالات نقشه سایت برای رسیدن به صفحات دلخواه استفاده کنند . محدودیتی که در این روش وجود دارد این است که کاربران برای دیدن نقشه سایت مجبور به ترک صفحه جاری هستند .
عمل Navigation ، نمادهای تصویری و نظارتها
سه کلیک برای مدیریت کاربران برای دسترسی به فایلها را به خاطر آورید . کاربران نباید در موقع گردش در سایت برای پیدا کردن اطلاعات درخواستی وسایتها بیشتر از ۳ بار بر روی اتصالات کلیک کنند . این خطوط راهنما برای آگاهی و جستجو در سایتهای وب بسیار مهم است . مسیرهای لنگری مجهول کاربران را دچار سردرگمی کرده و آنها را از بازگشت به سایت نا امید می‌کنند . درنظر بگیرید که آیا چند رسانه‌ای‌ها قالبهایی جهت مسیریابی ایجاد می‌کنند و یا صرفاً اضافی می‌باشند . به عنوان مثال اگر در سایت خود از Navigation Flash استفاده کنید . برای مرورگرهایی که از Flash حمایت نمی‌کنند مشکل ایجاد می‌کنید . یک حس و دید خوب جهت یابی برای کاربران خیلی مهم است . نوار ابزار Navigation باید خیلی ساده و روشن باشد و به درستی درک شود.
آیکونها خیلی عمومی و عامه پسند هستند و بیشتر مردم به آنها آشنا هستند . آیکونها۲ نوع دارند :
برچسب دار ، بدون برچسب ؛
اگر لازم باشد که کاربران حدس بزنند که آیکون آنها را به کجا هدایت میکند این آیکون باید برچسب داشته باشند .
ـ بقیه اجزاء متداول Navigation به قرار زیر است :
۱ـ کلیدها
۲ـ نقشه‌های تصویری و نقاط اشاره‌گر ماوس
۳ـ بردارها
۴ـ جداول
۵ـ جداول Navigation و منوها
۶ـ منو باز شونده
نگاهی به مرورگر
مرورگرها بصورت محدود شدهای از Navigation حمایت می‌کنند . بنابراین برای کمک به کارران در راه و غلبه بر محدودیتهای نرم افزاری با ایجاد Navigation های گسترده صفحه خود را طراحی کنید .
دادن هویت به سایت در تمامی صفحات به منظور اینکه کاربران بدانند در کجا قرار دارند ، ایجاد یک لوگوی پیوسته که اغلب در گوشه سمت چپ صفحه نمایش قرار دارد .
نشانه اختصاصی برای صفحه را به راحتی بسازید . هر صفحه باید بوسیله ابر اتصالات و جستجوگر به سایتهای دیگر متصل شود .
از تگ و کدهای script برای جلوگیری از دسترسی به تاریخچه مرورگر استفاده نکنید .
بعضی از سایتها از تگ meta برای تجدید کردن یک صفحه به منظور جلوگیری از بازگشت کاربران به صفحه‌ای که قبلاً بازدید شده است استفاده می‌کنند .
تأکید بر ساختار و معماری اطلاعات شما
هر صفحه را به گونه‌ای درست کنید که ساختار و المانهای صفحه را نشان دهد وشامل اتصالات دیگری برای مرور کردن صفحات اصلی که در بالاترین نقطه ساختار قرار دارند باشد . این اتصالات نمی‌تواند نام‌های عمومی مثل (Go Top) را داشته باشد اما باید نامی برای اشاره داشته باشند .
تا آنجا که ممکن است رنگ لینکهای پیش فرض را عوض نکنید . با اتصال به صفحات بازدید نشده سایه آبی رنگ ایجاد می وشد . استفاده از رنگهای پیش‌فرض به کاربران کمک میکند که بدانند کدام صفحه را بازدید کردند .
نقشه سایت که شامل ساختار و اطلاعات مهم می باشد.
ساختار سایت ،URL و نام فایلها
مانند شاخه‌های دیگر، وب سایت نیز در فرمهای شاخه‌ای و مرتبه‌ای بنا شده است . این شاخه‌ها قالب اطلاعاتی که مرورگرها برای پیدا کردن (URL) به آنها نیاز دارند ایجاد میکند . نام فایل نقش مهمی را در قسمت آدرس وب بازی میکند . نام فایل بهمراه URL به کمک یکدیگر، برای درک بهتر کاربر از ساختار وب سایت کمک می‌کنند .
ساختار سایت
ساختار یک سایت دقیقاً بیان میکند که چگونه یک سایت در وب سرور ذخیره میشود . می‌توانید به فایلهایی که بر روی سرور وجود دارند فکر کنید . آنها همان عملی را که وقتی در روی PC ها قرار دارند انجام می‌دهند . بر روی یک PC درایو اولیه :C میباشد ، ساختار را با زیر ساختارهای دیگر مانند زیر ادامه دهید . Files program یا My Document Windows و … هر شاخه شما را به زیر شاخه‌های بیشتری هدایت میکند . این نوع نظام‌بندی ساختاری را که به مدیریت سیستم شما کمک میکند ایجاد میکند ، وقتی کاربر آدرس را در قسمت نوار آدرس مرورگر وارد می کند ، مرورگر به آن شاخه‌ها دسترسی پیدا میکند که این مسیر می‌تواند با مسیر C:drive سیستم خود قابل مقایسه باشد و در طرف دیگر آن نامگذ اری فایلها و طریقه گذاشتن آن در سرور تعیین می شود .
وب سرور همچنین فایلها و تصاویر را در شاخه‌هایی که شما ایجاد کردید ذخیره میکند . ساختار فایلها بر روی سرور به شاخه و زیرشاخه‌هایی تقسیم میشود که پیشنهاد میشود محلی برای مدیریت درخواستهای شما باشد . تمامی فایلهایی که بر روی شاخه PC شما قرار دارند را در نظر بگیرید مدیریت این فایلها مشکل به نظر می رسند . وقتی ساختاری توسعه می یابد توجه کنید که هر فولدر در زیرشاخه‌ای وجود دارد و شما می‌توانید در هر زیرشاخه تصاویری را قرار دهید . بهتر است تمرینی برای نگهداری فایلها در زیر شاخه‌ها و نظم بندی ساختار داشته باشید . این ساختار می‌تواند توسعه پیدا کند و فایلهای جدیدی در زیر شاخه‌ها قرار گیرد . از این جهت شما باید از روشهای قابل فهم و معنی‌داری برای ساختار سایت استفاده کنید .
RULS
URL برای محاسبه موقعیت و عمق یک وب سایت استفاده میشود . برای مثال اگر کاربران بخواهند اطلاع پیدا کنند که در کدام قسمت سایت قرار دارند می‌توانند با نگاه کردن به URL آدرس بار این کار را انجام دهند تا بتوانند موقعیت خود را تشخیص دهند . با مثال فوق در نظر بگیرید که یک URL چگونه بر موقعیت جاری اشاره میکند . این روش فقط موقعی کار میکند که شاخه‌ها نام‌های معنی‌دار داشته باشند . دوباره تأکید می‌کنیم که نام فایلها بسیار مهم است و به پیمایش و ساختار سایت کمک می کند .
نام فایلها
نام فایلها می توان به همان اندازه نام شاخه مفید باشد . اگر نام فایل HTML تائیدی بر این نکته باشد که کدام صفحه توسط کاربر بازدید شده است می تواند به فرآین سایت پیمایی کمک کند . برای مثال URL فوق و نام فایل به کاربر دقیقاً می‌گوید که کدام صفحه را بازدید می کند .
قرارداد معمول
Navigation هایی که برای سایت خود انتخاب می‌کنید نباید در سایت منحصر به فرد باشد . این امر می تواند برای سایتهای دیگر نیز مفید باشد . خیلی از المانهای عادی که در وب از آنها استفاده می‌کنید برای کاربران مانوس می شوند و بنابراین معانی از پیش تعریف شده خواهند داشت . بیشتر این المانها بر چسب دارند . برای مثال وقتی کاربر دگمه و کلید بر چسب دار Home page را می‌بیند می‌داند که آن لینک وی را به کجا خواهد برد برای اتصال به صفحه خانگی از Lable هایی مثل نقطه ورود استفاده نکنید . به یاد داشته باشید که کاربران مانند یک گردشگر هستند و شما باید کاری کنید که آنها را راضی نگه دارید و آنها همواره با شما باشند . در ادامه بحث خیلی از Logo ها یا تصاویر نشانه‌دار باید به صفحات خانگی متصل شوند . بقیه برچسب‌های عادی مثل Search یا Find کاربران را برای جستجو به سایتهای دیگر هدایت میکند .
(FAQS,Downloads,News,Sitemap,About Us,US Contact) همگی از برچسب‌های معمول در سایتها هستند . سعی نکنید که از برچسب‌های منحصر به فرد استفاده کنید ، چرا که بهتر آن است که کاربران بتوانند برچسب‌ها را تشخیص دهند تا بتوانند به راحتی در سایت گردش کنند .
Guided Navigation ( راهنمایی Navigation)
از تکنیکهای معمول دیگر برای کمک به کاربران در حین سایت پیمایی راهنمایی آنها است . با ایجاد یک اتصال به نقاط دیگر در واقع برای کاربران خود در وب ورودی برای حرکت به نقاط دیگر ایجاد می‌کنید . این اتصالات باید برای اطلاعات ضروری ایجاد شود و نیز به کاربران اجازه خروج بدهند . به عنوان مثال با خرید بروی اینترنت ( به صورت online ) کاربران برای خرید از میان اطلاعات عبور می کنند و سپس برای دریافت اطلاعات بهایی پرداخت می‌کنند . اگر از تصاویر گرافیکی استفاده می‌کنید باید به نحوی باشند که قابل درک باشند و مخاطبین قادر باشند به راحتی با تشخیص المانهای که قابلیت کلیک شدن را دارند در سایت گردش کنند .
نقشه فعالیت Navigation
Navigation چون بطور محسوسی به نوع تفکر و سلیقه شخصی طراح بر می‌گردد گاهی اوقات می تواند مشکلاتی ایجاد کندو از دیدگاه طراحان کارآیی navigation ها متفاوت هستند .
اگر Navigation یک سایت کاربردی نباشد کاربران از سایت شما خواهند رفت و بالعکس آن اگر Navigation خوب عمل کند کاربران به راحتی از مکانی به مکان دیگر گردش می کنند . Navigation سایت باید آزمایش شود و این مرحله نیاز به برنامه دقیق و حساب شدهای دارد .
موارد زیر را در نظر بگیرید :
ـ محاسبه اهداف و نیازهای کاربران
ـ یادگیری از Navigation هایی که کارآیی خوبی دارند .
ـ رفتن به عمق سایت
ـ ایجاد اتصالات سریع
ـ پیش‌بینی این مسئله که کاربران سلایق و پیش‌زمینه‌های متفاوتی دارند .
پیش‌بینی مقاصد و نیازها
طراحی Navigation برای پیش‌بینی فعالیتهای کاربران سایت و ساختن یک سایت برای حمایت از کاربران می باشد و برای انجام آن باید بدانید که کاربران سایت چه مقاصد و نیازهایی دارند . برای محاسبه اهداف و نیازهای کاربران نیاز به مصاحبه با مردمی که از سایت شما دیدن می‌کنند خواهید داشت . باید زمانی را برای مصاحبه با کاربران و آگاهی از فعالیت روزانه آنها قرار دهید . برای ایجاد یک سایت تجاری با کاربران زیاد وبا استعداد باید درباره اولویت‌هایی که می‌خواهند در سایت داشته باشند پرسش کنید و کوشش کنید که مقاصدی که در پشت درخواستهایشان دارند را نیز درک کنید . راه حل اصلی آن است که برای مشکلات و معماها باید راه حل مطلوبی بدست آید و این مهم فقط با مصاحبه با کاربران سایت بدست میآید .
آموزش از Navigation هایی که کارآئی خوب دارند
این مورد بیشتر از سایتهایی باید آموخته شود که پیمایش در آنها آسان است . المانهای معمولی که در پیمودن یک سایت موفق هستند را در نظر بگیرید . صرفنظر از دیدگاههای که تا به حال استفاده کردید یک Navigation خوب دارای خصوصیات زیر است :
ـ داشتن ظاهری آسان و ساده
ـ پایداری و بقاء
ـ ایجاد اتصالاتی برای بازگشت
ـ نمایش در زمینه
ـ حق انتخاب برای کاربر
ـ ایجاد پیامهای روشن و گیرا
ـ ایجاد برچسب‌های قابل درک و تشخیص
ـ حفظ اهداف اختصاصی سایت
ـ تأمین اهداف کاربران و مراقبت از آنها
تمامی این موارد مهم هستند اما ایجاد اتصال احتمالاً بیشترین اثر را برای کاربر دارد . Navigation ها باید به مردم بگوید که آنها کجا هستند و اگر ممکن باشد بگوید که کجا باید بمانند . کاربران باید قادر باشند که به راحتی اتصالات و موارد با قابلیت کلیک را شناسائی کنند . آنها نیاز دارند که بدانند که آیا خریدی که کردند و جستجویی که انجام دادند و ظایف دیگر با موفقیت آنجام شده است ؟ با ایجاد بازگشت می‌توانید احتیاجات اصلی را برای Navigation تأمین کنید .
رفتن به صفحات عمیقتر ازصفحه خانگی
حتی در سایتهایی که Navigation های ضعیفی دارند گردش از صفحه خانگی به صفحات دیگر درونی سایت بدون مشکل زیادی آسان است . ولی در هر صورت برنامه‌ریزی صفحه خانگی شما یک بخش کوچکی از وظیفه شما در قبال Navigation می باشد .
به هر جهت برنامه‌ریزی خوب برای Home page یکی از کوچکترین کارهایی است که برای ایجاد Navigation خوب و موفق باید رعایت کنید . هر چقدر در فازهای اولیه طراحی جزئیات را بیشتر رعایت کنید کاربران شما بامشکلات کمتری مواجه خواهند شد . بیشتر مشکلات Navigation این است که پارامتری برای رفتن از صفحه خانگی به صفحات دیگر وجود ندارد . این مشکلات منجر به گرفتار کردن و به گل نشستن کاربران در سایت میشود . معمولاً این اتفاقات به دلیل توجه بیش از اندازه به طراحی Navigation در یک جهت خاص روی می‌دهد . در طراحی Navigation تمامی این جزئیات و نیز مواردی که دور از شما می‌باشند و ممکن است برای سایت پیش آیند در نظر گرفته شوند .
ایجاد اتصالات سریع
ساختار صفحه را به طور کلی در نظر بگیرید و کمی وقت را برای ساختن میانبر در سایت صرف بگذارید . بعضی از این میانبرهای معمولی شامل جستجو نقشه سایت و جداول (site map , table , search) هستند . هدف از هر میانبر کمک به کاربران برای پیدا کردن سریع اطلاعات می باشد و شما باید راه میانبر را با این هدف در ذهن خود طراحی کنید . خیلی از المانهای صفحات کاربردی نیستند زیرا یک سری از موارد گمراه کننده را ارائه می‌دهند . مثلاً نقشه سایت زمان زیادی را برای بارگذاری نیاز دارد و یا جداول نیاز به Scroll کردن دارند . راههای میانبر باید ساده ، سریع و قابل درک باشند و نیز باید بدانید که کاربران استعدادها و توانایی‌های متفاوتی دارند . به عنوان مثال نحوه تأثیر علایق شخصی در ایجاد یک Navigation کاربردی را می توان در جستجو کردن و عملکرد افراد در سایتها دانست . بعضی از کاربران دوست دارند تا جایی که ممکن است از پرسه زدن در سایتها خودداری کنندو اطلاعات دقیق خود را در زمان کمی بدست آورند . اما بالعکس کودکان در هنگام جستجوی اطلاعات معمولاً تمایل به گردش در سایت را دارند و وقت بیشتری را صرف می‌کنند . طراحی Navigation مشکل است اما در عین حال کمک به کاربران برای رسیدن به مقاصدشان می باشد . همواره به خاطر داشته باشید که Navigation ها باید به کاربرانی که می‌خواهند در سایت شما به مقاصد خود دست یابند کمک کرده و آنها را هدایت می‌کنند . برای اطلاعات بیشتر مربوط به Navigation ها به آدرس زیر مراجعه کنید .
خلاصه فصل
در این فصل در مورد این که ساختار Navigation درطراحی بسیار مهم است بحث شد . باید ساختار سایت و چگونگی ایجاد آن بر روی سرور را امتحان کنید . در مورد انواع مختلفی از المانها آموختید و یاد گرفتید که چگونه آنها برای آگاهی کاربران ایجاد می‌شوند نیز بحث شد . همچنین در مورد کنترل Navigation مطالعه کردید و دیدید که چگونه می‌توان آنها را گسترش داد و در پایان مروری بر برنامه حمایت یک طرح از Navigation داشتیم .
گرافیکهای وب
اهداف
۱ـ تشریح عملکرد گرافیک در سایت شما
۲ـ تعریف عمق رنگ و قدرت تفکیک‌پذیری
۳ـ ابزارهای ایجاد گرافیک
۴ـ انتخاب قالبهایی برای فایلهای گرافیکی
مفدمه
گرافیکها در عین حال که با عث ایجاد جذابیتهایی در صفحات می شوند به همان میزان می توانند و دامهای پنهانی بر ضد توسعه در وب ایجاد کنند . تنها تعداد محدودی از قالبهای گرافیکی تصاویر وسیله مرور گر ها حمایت می شوند که خود آنها نیز مزایا های خاص خود را دارند یعنی حتی بعضی از قالبهای مفید و مقرون به صرفه نیز ، با محدودیت های جدی مواجه هستند . این امر طراحان وب را به رقابت و مبارزه برای ایجاد تصاویر ی که بطور سریع بارگذاری می شوند وادار می کند در این رقابت ابتدا باید معا نی عمیق از وظایف تصاویر در وب سایت و نیز بهتر جلوه دادن تصاویر در ک شود .
تصاویر
در طراحی سایت تصاویر ارکان اصلی هستند . کاربران انتظار دارند که این عکسها بتوانند مشاهدات خوبی برایشان به ارمغان آورند . همچینن از عکسها برای Navigation و نقشه های تصویری و دگمه های تصویری ( که باعث اتصال به صفحات ویا منابع دیگر می شوند ) استفاده می شود . روی یک سایت یکدست و یکپارچه ساختار LOGO و نماد های تجاری برای شناسایی بسیار مهم هستند .
تصاویر خوب در طراحی باید دارای جذابیت و کار آیی و مهمتر از همه سایز کوچک باشند .
اندازه فایل به طور مستقیم بر زمان بارگذاری تأثیر دارد و ملاحظات اصولی برای توسعه و انتشار وب در این مورد باید رعایت شود . طراحان باید پهنای باندی که برای تصاویر بکار برده شده در صفحه مورد نیاز است را در نظر داشته باشند .
معمولاً کاربران برای دیدن عکس بی صبر و حوصله می شوند . مندرجات صفحات وب با بکارگیری غلط عکسهای و ایجاد زمان بارگذاری طولانی نابود می شوند .
مودم‌ها با سرعت kbps 56 در Dial Up استاندارد به کار برده میشود ولی هنوز هم خیلی از مودها وجود دارند که با سرعت کمتر از آن . مورد استفاده قرار می‌گیرند . اگر سایت به منظور استفاده در اینترانت بر روی شبکه ایجاد شود خیلی از این موانع بر طرف خواهد شد . به یاد داشته باشید که سرور عمومی باشد و می‌تواند نمای سازمان رابرای دنیای بیرون ترسیم کند .ولی اینترانت برای استفاده عمومی باشد و می‌تواند نمای سازمان را برای دنیای بیرون ترسیم کند و لی اینترانت برای مصارف تجاری و به مقصود دسترسی سریع و آسان به منابع و اطلاعات بنا شده است . ا یجاد زرق و برق در اینترانت باعث کاهش بهروری می‌گردد . شما می‌توانید اینترانت را در جهت به عمل و اینترنت را مکانی جهت نمایش و عرضه بحساب آورید . گرافیکها تشریح و توضیحی بر موراد وفعالیتهای سایت و نیز ارائه معانی Navigation در یک سایت وب می باشند .
داده‌های متصور رقمی
همه تصاویر دیجیتالی ویژگی‌های خاص و مهمی را دارند که می توانند در اندازه سایز آن موثر باشند که مقدار کمی از این ویژگی‌ها در این بخش بیان میشود .
پیکسل (pixel)
نقطه کوچکی در تصویر میباشد و در یک جمله شبکه‌ای از بلوکهای ساختمانی برای گرافیکها و تصاویری است که می‌تواند بر روی کامپیوتر نمایش داده شود . پیکسل کوچکترین واحد نمایشی کامپیوتر است .
عمق رنگ
پیکسل به مقدار زیادی اطلاعات رنگی ایجاد میکند . این اطلاعات با بیت اندازه‌گیری می‌شوند . حساب کنید که چگونه هر پیکسل تمامی این رنگها را می‌تواند نشان دهد . برای مثال اطلاعات پیکسل ۴ می‌توانید بیتی در م د Scale Gray تا ۱۶ سایه خاکستری را نشان دهد . هر ۸ بیت از اطلاعات رنگ در هر پیکسل تا ۲۵۶ بیت از اطلاعات رنگ را تولید میکند و به این ترتیب بدیهی است که در درجات بالاتر بیت ( که عمق بیت نیز نامیده می‌شوند ) واقعی بینی رنگی بیشتری را به ارمغان می‌آورد . ضرورت تفکیک پذیری استاندارد صفحه نمایش ۴۸۰*۶۴۰ یا ۷۲ نقطه در اینچ (dpi) میباشد . شما باید المانهای وب را با آهنگ خاص برای کاربران جلو برده و توسعه دهید .
جدول رنگ و الگو
( مجموعه‌ای از رنگهای قابل دسترسی در یک سیستم گرافیکی کامپیوتر ) :
اگر چه ۸ بیت رنگ می‌تواند میلیونها رنگ را نمایش دهد و لی فقط در یک زمان ۲۵۶ رنگ حمایت می‌شوند . سیستم فقط این ۲۵۶ رنگ را در سیستم گرافیکی خود ذخیره
میکند .
تذکر
تفاوت کمی ما بین جعبه رنگ ویندوز میکروسافت و جعبه رنگ مرورگر Netscape Navigator وجود دارد Navigator از ۲۵۶ رنگ حمایت می‌شوند ولی ویندوز از ۲۱۶ رنگ استفاده میکند. هنگامی که یک عکس ۸ بیتی ایجاد می‌کنید از یک بردار و یا یک نرم افزار نمایشی استفاده می‌کنید ، خود برنامه یک جعبه ایجاد میکند که رنگهایی که در عکس موجود می‌باشند درآن جعبه رنگ نیز وجود د ا رد . هنگامی که تصویر اصلی نمایش داده میشود جعبه رنگ برای نمایش رنگ اصلی تنظیم می شود . وقتی که تصاویر متعددی بطور مرتب و یکجا به نمایش می گذارید دچار عدم هماهنگی در تلالو رنگها می‌شوید که این امر درخشش الگو یا عوض شدن جعبه رنگ نامیده میشود . درخشش الگو ، زمانی اتفاق می‌افتد که تفاوتت معنی دار زیادی بین تراکم ( چگالی ) تصویر با جعبه رنگ آن و تراکم ( چگالی ) سیستم با جعبه رنگ آن وجود دارد . برای غلبه بر این محدودیت مرورگر به طور اتوماتیک تکنیکی را بنام افزایش نور تصویر ایجاد میکند .
افزایش شدت نور نمایش
افزایش شدت نور نمایش تخمین تقریبی یا تطبیق رنگها ما بین یک جعبه تصویر و جعبه رنگ سیستم است و رنگهای روی تصاویر با رنگهای سیستم جایگزین می‌شوند . متأسفانه افزایش شدت نور باعث میشود که نمایش عکس را بصورتی که شما نمی‌خواهید عوض کند . تصاویر باید قبل از آنکه در صفحات وب انتشار داده شوند پرنور شوند .
عکسهای با فورمات Bitmap و برداری (Vector)
عکسهای گرافیکی وب به ۲ قالب دسته‌بندی می‌شوند Bitmap و Vector که هر قالب خود زیر شاخه‌هایی نیز دارد .
Bitmap
بیشترین قالب گرافیکی معمول Bitmap میباشد .
عکسهای Bitmap از تأثیر هر رنگ نمایش به طور جداگانه ساخته شده‌اند . هر چقدر که رنگهای ایجاد شده توسط یک عکس بیشتر باشد ، سایز فایل مربوطه به آن عکس بیشتر میشود . وقتی که فایل Bitmap با بزرگنمایی دیده می شود ، فایل Bitmap شبیه به یک سری مربع کوچک میشود که هر یک درجه رنگی دارند که در کل عکس سهم دارد .
Bitmap هنگامی که از نزدیک دیده میشود ظاهری ناصاف دارد اما هنگامی که با فاصله به آنها نگاه می‌کنید بصورت نقطه ، نقطه و شبیه به شکل واقعی و یا بصورت بلوکهای مجزا میباشد .
برای ساختن فایل Bitmap مرورگر موجود به طور هماهنگی در بارگذاری یک عکس با یکدیگر کار می‌کنند . اطلاعات هر پیکسل ذخیره میشود وسپس دوباره در مرورگر برای ایجاد تصویر برگردانده می شود . چون فایلهای Bitmap از تعداد دیسکهای بیشتری برای نمایش استفاده می‌کنند سایز بزرگتری دارند ، فایلهای Bitmap برای عکسها اثر‌های سایه‌دار و لبه‌های هموار یا تیره ایجاد می کنند .
بردار
تصاویر برداری در تفسیر و ترجمه متفاوت‌تر از فایلهای Bitmap می باشند . تصاویربرداری اطلاعات عکس را در دستورالعملهای ریاضی خود ذخیره می‌کنند که
درهنگام نمایش معنی می‌دهند . برای مثال برای ایجاد یک دایره لازم است که مختصات مرکز و شعاع و درجه رنگ را بدانیم . از این اطلاعات و دستورالعملهای ریاضی برای افزایش سایز فایل نیز استفاده میشود . چون مقادیر قابلیت عوض شدن دارند بنابراین افزایش سایز بردار اندازه فایل را زیاد نمی‌کند . امتیاز دیگر تصاویر برداری توانائیهای آنها در به مقیاس گذاشتن راندمان ابزار استفاده شده میباشد و تصاویر برداری مستقل از قدرت تفکیک پذیری می باشند .
برنامه‌های گرافیکی
شما می‌توانید با برنامه‌های گرافیکی تصاویر دیجیتالی ایجاد کنید . اخیراً پیشرفتهای زیادی در نرم افزارها برای ویرایشی کردن عکسها ، رتوش کردن و ارسال آن برای وب ایجاد شده است .
این برنامه‌ها به ۲ گروه زیر تقسیم می‌شوند :
ترسیم بردار ، فایلهای از نوع نقاشی
برنامه‌های ترسیم اشکال گرافیکی برداری :
نرم افزارهای ترسیم بردار مبنا مانند XRes و AdobeIllustrator توصیف کننده نقشه شکل میباشد و می‌توان در آن خطوط نامرئی ایجاد کرد .
اطلاعات عکس در مجموعه‌ای از دستورالعملهای ریاضی ذخیره میشود . در قبل بحث کردیم که تصاویربرداری مستقل از مانیتور هستند به این معنا که تنظیمات مانیتور کامپیوتر بر روی سایز و اندازه تاثیر گذار است و نیز این تصاویر کوچکتر از فایلهای مشابه خود از نوع Paint هستند . تصاویر برداری گرافیکی معمولاً در ابعاد سه بعدی و در محیط‌های زبانهای نمونه‌سازی فرضی VRLM-Vitual Reality Modeling Language مورد استفاده قرار می‌گیرند و معمولاً نمی‌توانند به درستی و به طور واقعی گرایانه جزئیات تصاویر را انتقال دهند و نمایش آنها در صفحه نمایش تا اندازه‌ای آهسته‌تر است و نیز برای دیدن آنها در و ب نیاز به Plug – ins میباشد . به هر جهت تصاویر برداری در صنعت و مصارف علمی کاربرد خیلی خوبی دارند . بعداً به معرفی برنامه‌هایی که از تصاویر برداری حمایت می کنند خواهیم پرداخت .
برنامه‌های نقاشی
برنامه‌های نقاشی از Scan از عکس تا ضبط فریم‌های ویدئویی فایلهای Bitmap ایجاد میکند و یا برای ایجاد کارهای هنری از آنها استفاده میشود . فایلهای Bitmap با جزئیات بیشتری نشان داده می‌شوند . در قبل بحث کردیم که فایل Bitmap با نقطه‌های کوچکی که هر نقطه مطابق با یک پیکسل در صفحه نمایش میباشد طراحی شده است . فایلهای Bitmap در هنگام ضرورت پیکسل به پیکسل ویرایش می‌شوند .
مضرت فایلهای Bitmap در این است که سایز فایلهای اصلی بزرگ هستند . ظاهر فایلهای Bitmap به طور زیادی بر صفحه مانیتور اثر می‌گذارد . هر دو قالب J pg ، Gif از نوع Bitmap هستند . برای ایجاد تصاویر گرافیکی خوب معمولاً از نرم‌افزارهای زیر استفاده میشود :
قالبهای فایل تصویر
تصاویر گرافیکی در قالبهای زیر ظاهر می‌شوند : (Bitmap (BMP قالب TIFF(Tagged Image File
Graphic Interchange Format , (WMF) Windows Meta File (JPEG) Joint Photo (Format) (Gif Express Group Graphic فقط قالبهای Gif و JPG بطور معمول و ذاتی با مرورگرها حمایت می شوندو فورمتهای دیگر با کمک Plug in مشاهده می‌شوند . حمایت ذاتی به این معنا است که مرورگرها نیازی به نرم‌افزار خاص برای نمایش عکس ندارد . هنگام ایجاد یک تصویر وب یک طراح باید یکی از فایلهای jpg یا gif را بر مبنای نوع عکسی که در فرمت دارد انتخاب کند . جدول زیر قالبهای گوناگونی از فایلهای عکس و پسوندهای آن را نشان می‌دهد .
Image File Format
Interchange Format _ Gif Graphic
Gif یک قالب فایل مستقل است که محدود به نمایش ۲۵۶ رنگی می باشد که بطور طبیعی بوسیله Compuserver برای سرویسهای روی خط انتشار داده شده است . Gif برای اکثر طراحان حرفه‌ای وب قالب خوبی میباشد زیرا سایز آنها کوچک هستند . بهم تابیدگی فایلهای Gif بی‌نظیر است و بهتر است که برای فایلهای بزرگ از این نوع قالب استفاده شود . Gif به عنوان یک قالب کم ضرر در نظر گرفته میشود به این معنی که تصویر فشرده میشود در حالی که هیچ اطلاعاتی از دست نمی‌رود . در نتیجه یک فایل Gif نمی‌تواند به اندازه یک فایل Jpg فشرده شود و نیز طراح نمی‌تواند میزان فشردگی را محاسبه کند .
Animated –Gif
در سال ۱۹۸۹ ورژنی از نرم افزار مربوط به فایلهای Gif این امکان را دارد که رشته توالی از عکسها ذخیره شده یک فایل متحرک نمایش دهد . فایلهای Gif می‌توانند انیمیشن‌های کامل و افکتهای ویدئوئی بدون نیاز به Plugins را ایجاد کنند .
فایلهای Gif ممکن است شامل یک عکس ساکن باشد ،توابع متحرک Gif مانند کارتون و … فایلهای Gif ممکن است شامل فرمهای متوالی است که تقریباً‌از Cach مرورگر بارگذاری می شوند و بطور نامحدود تکرار می شوند و با حلقه مجبور به حرکت تقلیدی میشود . یکی از اختیارات Gif های متحرک این است که آنها در درجه بالای تصاویر متحرک قرار دارند آنها وابسته به Client-Pull و Server-Push نیستند . هم Client – Pull و هم Server Push نیاز به فایلی دارند که بتوانند بطوری در پی با تعداد زیادی تغییرات بین کامپیوتر کاربر و کامپیوتر سرور بارگذاری شود .
(Server Push _ Client Pull)
(Server Push _ Pull) ترکیبی از فنون سرویس‌دهنده / سرویس‌گیرنده وب که بصورت انفرادی شامل فشردن سرویس‌دهنده یا کشیدن سرویس‌گیرنده است . در فشردن سرویس‌دهنده ، داده‌ها را در سرویس‌گیرنده بارگذاری میکند . اما ارتباط داده‌ای همچنان باز می‌ماند . این ترکیب به سرویس‌دهنده امکان می‌دهد که در صورت لزوم انتقال داده‌ها را به مرورگر ادامه دهد .در کشیدن سرویس‌گیر نده ، سرویس دهنده داده‌ها را برای سرویس‌گیرنده بارگذاری میکند . اما ارتباط داده‌ای باز باقی نمی‌ماند . سرویس دهنده رهنمود HTML را برای مرورگر ارسال میکند و به آن اعلام میکند که این ارتباط را پس از یک فاصله زمانی مجدداً باز کند . تا داده‌های بیشتری را دریافت کرده یا احتمالاً URL جدیدی را باز کند .
Gif شفاف
امتیازی که فایلهای Gif نسبت به تصاویر JPG دارند این است که طراح می‌تواند یک رنگ از تصاویر Gif طراحی کند که شفاف باشد و این ویژگی باعث رفع محدودیت‌ها در اشکالی مثل مربع یا مثلث میشود . برای مثال یک طراح می‌تواند یک logo دایره‌ای با یک زمینه رنگ شفاف ایجاد کند . بنابراین عکس با اطلاعات شفاف و بصورت دایره ظاهر میشود .
JPEG-Joint Photographic Experts Groop
عکسهای در قالب JPEG از رنگهای بیشتری نسبت به فایلهای Gif برخوردار هستند . اما معمولاً به زمان بارگذاری بیشتری نیز نیاز دارند .
فایلهای JPG شامل اطلاعات ۲۴ بیت رنگی (۱۶٫۷ میلیون رنگ ) می‌باشند و به خوبی در تصاویر یکپارچه گرافیکی و عکسبرداری‌ها ظاهر می‌شوند . باید به خاطر آورید که خیلی از کاربران فقط توانایی نمایش ۸ بیت رنگ را برای خود دارند و در نتیجه در نمایش عکس برای آنها به مقدار قابل ملاحظه‌ای افزایش نور ایجاد میشود . ( پدیده‌ای که قبلاً راجع به آن بحث شد )
فایلهای JPG به طور اتوماتیک فشرده می‌شوند و در هنگام ورود به صفحات وب از حالت فشردگی خارج می شوند . اثرات فشرده‌سازی متفاوت هستند . فشردگی بیشتر تنزل درجه بیشتری در عکس نهایی دارد . JPG را به عنوان یک فایل زیان آور و پراتلاف در نظر می‌گیرند . به این معنی که فشردگی عکس را افزایش می‌دهد . رنگها با قطره چگان از جعبه رنگ عکس برداشته میشود و نتیجه آن تنزل در کیفیت عکس است . برای مثال یک فایل kb 100 می‌تواند kb 10 فشرده شود و به هر جهت این فشردگی کیفیت عکس را کم میکند . یکی از مضرات استفاده از این قالب این است که طراح کنترلی بر چگونگی تبدیل bit 24 به ۲۵۶ رنگ استفاده شده با صفحه نمایش کاربر را ندارد . همچنین تفاوت بارزی در نحوه نمایش این قالب در ۲ مرورگر IE و NetScape وجود دارد بعلاوه نحوه نمایش در PC ها نیز متفاوت‌تر از مکینتاش می باشد . طراح باید قبل از آنکه صفحه خود را به اتمام رسانید بداند که کدام قالب منظور وی را بهتر تأمین میکند و کار خود را در د و مرورگر با سیستم عاملهای مختلف آزمایش کند .
JPEG2000
قالب جدید JPEG به منظور توسعه ویژگی‌های فشردگی فایلهای JPEG استاندارد میباشد همانطور که قبلاً بحث شد قالب اخیر JPEG که اطلاعاتی راجع به تصویری که فشرده شده است در بردار سودمند نیست و این قضیه در نتیجه روزنه‌هایی را در تصویر ایجاد می کند و باعث ایجاد تصویر خالدار می‌گردد . در JPEG 2000 فشرده‌سازی در اثر یک تکنولوژی مواج بوجود میآید که اطلاعات را به گونه‌ای متفاوت ذخیره میکند که تعداد زیادی از تکه‌هایی که در تصاویر فشرده شدهای که از طریق JPEG بوجود آمدند را از بین می‌برد .
Portable Network Graphics-PNG
قالب PNG به عنوان یک قالب جدید برای گرافیکهای وب ظاهر شده است . برای تصاویر وب PNG بهترین ترکیب از ویژگی‌های JPG و GIF را تحت یک قالب واحد دارا میباشد. فایلهای PNG زیادتر هستندو همچنین از شفافیت فایلهای GIF و از عمق رنگی JPG حمایت می‌کنند . فشردگی در فایلهای PNG با استفاده از فیلترهای فشردگی که تا عمق bit 48 حمایت می‌شوند توسعه پیدا کرده است . حمایت مرورگرها از قالب PNG هنوز معمول نشده است . Netscape 4.7 و IE5 با درجات مختلفی از PNG حمایت می‌کنند . به هر جهت کمیته www در ۱۹۹۶ فرمت PNG را پیشنهاد داد ولی فرمت استاندارد شده نیست .
عنوان هر صفحه ایجاد وسیله مؤثر برای دانستن و تعیین موقعیت جایی که در آن قرار دارند . محدودیت استفاده از این روش برای آگاه شدن از موقعیت در این است که در این روش فقط موقعیت مکان جاری نشان داده میشود و موقعیت‌های وابسته ( نظیر صفحات بچه ) طبق مثال قبل را نشان نمی‌دهند .
رنگها
بعضی از سایتها از رنگهایی استفاده می‌کنند که اشاره به موقعیت دارند ( یعنی با بکار بردن درجات رنگ مختلف برای جاهای مختلف ) محدودیت استفاده از رنگها در این است که کاربر باید طرح رنگ را درک کندو سپس برای گردش در سایت بتواند با آن ارتباط برقرار کند. محدودیت دیگر استفاده از رنگها برای کاربرانی می باشد که از لحاظ بینایی دچار مشکل هستند و این استراتژی برای آنها بی‌اثر است .
تصاویر
تصاویر برای آگاهی از موقعیت علامتهای مفیدی ایجاد می‌کنند . به عنوان مثال کلیدهایی که از آنها برای برنامه‌ریز روزانه استفاده می شود را در نظر بگیرید . اغلب یا بیشتر این کلیدها در محدوده دید قرار دارندو هر کلید نامی دارد و کلیدها در هر مکان ظاهر متفاوت دارند . این استراتژی برای آگاهی از موقعیت مؤثر تر است زیرا صفحات مادر و بچه از هر مکانی در محدوده دید قرار می‌گیرند .
cooki
علائمی مثل خطوط اشاره بر مسیر (Navigation) می‌توانند شما را در رسیدن به موقعیت جاری کمک کنند که این علامت برای حرکت کاربران در صفحات چند گانه مفید است .
نقشه سایت
نقشه سایت در اسناد جداگانه در HTML وجود دارند و هر صفحه از سایت می تواند با متون ساده و شرحهای گرافیکی به نمایش گذاشته شود . کاربران می‌توانند از اتصالات نقشه سایت برای رسیدن به صفحات دلخواه استفاده کنند . محدودیتی که در این روش وجود دارد این است که کاربران برای دیدن نقشه سایت مجبور به ترک صفحه جاری هستند .
عمل Navigation ، نمادهای تصویری و نظارتها
سه کلیک برای مدیریت کاربران برای دسترسی به فایلها را به خاطر آورید . کاربران نباید در موقع گردش در سایت برای پیدا کردن اطلاعات درخواستی وسایتها بیشتر از ۳ بار بر روی اتصالات کلیک کنند . این خطوط راهنما برای آگاهی و جستجو در سایتهای وب بسیار مهم است . مسیرهای لنگری مجهول کاربران را دچار سردرگمی کرده و آنها را از بازگشت به سایت نا امید می‌کنند . درنظر بگیرید که آیا چند رسانه‌ای‌ها قالبهایی جهت مسیریابی ایجاد می‌کنند و یا صرفاً اضافی می‌باشند . به عنوان مثال اگر در سایت خود از Navigation Flash استفاده کنید . برای مرورگرهایی که از Flash حمایت نمی‌کنند مشکل ایجاد می‌کنید . یک حس و دید خوب جهت یابی برای کاربران خیلی مهم است . نوار ابزار Navigation باید خیلی ساده و روشن باشد و به درستی درک شود.
آیکونها خیلی عمومی و عامه پسند هستند و بیشتر مردم به آنها آشنا هستند . آیکونها۲ نوع دارند :
برچسب دار ، بدون برچسب ؛
اگر لازم باشد که کاربران حدس بزنند که آیکون آنها را به کجا هدایت میکند این آیکون باید برچسب داشته باشند .
ـ بقیه اجزاء متداول Navigation به قرار زیر است :
۱ـ کلیدها
۲ـ نقشه‌های تصویری و نقاط اشاره‌گر ماوس
۳ـ بردارها
۴ـ جداول
۵ـ جداول Navigation و منوها
۶ـ منو باز شونده
نگاهی به مرورگر
مرورگرها بصورت محدود شدهای از Navigation حمایت می‌کنند . بنابراین برای کمک به کارران در راه و غلبه بر محدودیتهای نرم افزاری با ایجاد Navigation های گسترده صفحه خود را طراحی کنید .
دادن هویت به سایت در تمامی صفحات به منظور اینکه کاربران بدانند در کجا قرار دارند ، ایجاد یک لوگوی پیوسته که اغلب در گوشه سمت چپ صفحه نمایش قرار دارد .
نشانه اختصاصی برای صفحه را به راحتی بسازید . هر صفحه باید بوسیله ابر اتصالات و جستجوگر به سایتهای دیگر متصل شود .
از تگ و کدهای script برای جلوگیری از دسترسی به تاریخچه مرورگر استفاده نکنید .
بعضی از سایتها از تگ meta برای تجدید کردن یک صفحه به منظور جلوگیری از بازگشت کاربران به صفحه‌ای که قبلاً بازدید شده است استفاده می‌کنند .
تأکید بر ساختار و معماری اطلاعات شما
هر صفحه را به گونه‌ای درست کنید که ساختار و المانهای صفحه را نشان دهد وشامل اتصالات دیگری برای مرور کردن صفحات اصلی که در بالاترین نقطه ساختار قرار دارند باشد . این اتصالات نمی‌تواند نام‌های عمومی مثل (Go Top) را داشته باشد اما باید نامی برای اشاره داشته باشند .
تا آنجا که ممکن است رنگ لینکهای پیش فرض را عوض نکنید . با اتصال به صفحات بازدید نشده سایه آبی رنگ ایجاد می وشد . استفاده از رنگهای پیش‌فرض به کاربران کمک میکند که بدانند کدام صفحه را بازدید کردند .
نقشه سایت که شامل ساختار و اطلاعات مهم می باشد.
ساختار سایت ،URL و نام فایلها
مانند شاخه‌های دیگر، وب سایت نیز در فرمهای شاخه‌ای و مرتبه‌ای بنا شده است . این شاخه‌ها قالب اطلاعاتی که مرورگرها برای پیدا کردن (URL) به آنها نیاز دارند ایجاد میکند . نام فایل نقش مهمی را در قسمت آدرس وب بازی میکند . نام فایل بهمراه URL به کمک یکدیگر، برای درک بهتر کاربر از ساختار وب سایت کمک می‌کنند .
ساختار سایت
ساختار یک سایت دقیقاً بیان میکند که چگونه یک سایت در وب سرور ذخیره میشود . می‌توانید به فایلهایی که بر روی سرور وجود دارند فکر کنید . آنها همان عملی را که وقتی در روی PC ها قرار دارند انجام می‌دهند . بر روی یک PC درایو اولیه :C میباشد ، ساختار را با زیر ساختارهای دیگر مانند زیر ادامه دهید . Files program یا My Document Windows و … هر شاخه شما را به زیر شاخه‌های بیشتری هدایت میکند . این نوع نظام‌بندی ساختاری را که به مدیریت سیستم شما کمک میکند ایجاد میکند ، وقتی کاربر آدرس را در قسمت نوار آدرس مرورگر وارد می کند ، مرورگر به آن شاخه‌ها دسترسی پیدا میکند که این مسیر می‌تواند با مسیر C:drive سیستم خود قابل مقایسه باشد و در طرف دیگر آن نامگذ اری فایلها و طریقه گذاشتن آن در سرور تعیین می شود .
وب سرور همچنین فایلها و تصاویر را در شاخه‌هایی که شما ایجاد کردید ذخیره میکند . ساختار فایلها بر روی سرور به شاخه و زیرشاخه‌هایی تقسیم میشود که پیشنهاد میشود محلی برای مدیریت درخواستهای شما باشد . تمامی فایلهایی که بر روی شاخه PC شما قرار دارند را در نظر بگیرید مدیریت این فایلها مشکل به نظر می رسند . وقتی ساختاری توسعه می یابد توجه کنید که هر فولدر در زیرشاخه‌ای وجود دارد و شما می‌توانید در هر زیرشاخه تصاویری را قرار دهید . بهتر است تمرینی برای نگهداری فایلها در زیر شاخه‌ها و نظم بندی ساختار داشته باشید . این ساختار می‌تواند توسعه پیدا کند و فایلهای جدیدی در زیر شاخه‌ها قرار گیرد . از این جهت شما باید از روشهای قابل فهم و معنی‌داری برای ساختار سایت استفاده کنید .
RULS
URL برای محاسبه موقعیت و عمق یک وب سایت استفاده میشود . برای مثال اگر کاربران بخواهند اطلاع پیدا کنند که در کدام قسمت سایت قرار دارند می‌توانند با نگاه کردن به URL آدرس بار این کار را انجام دهند تا بتوانند موقعیت خود را تشخیص دهند . با مثال فوق در نظر بگیرید که یک URL چگونه بر موقعیت جاری اشاره میکند . این روش فقط موقعی کار میکند که شاخه‌ها نام‌های معنی‌دار داشته باشند . دوباره تأکید می‌کنیم که نام فایلها بسیار مهم است و به پیمایش و ساختار سایت کمک می کند .
نام فایلها
نام فایلها می توان به همان اندازه نام شاخه مفید باشد . اگر نام فایل HTML تائیدی بر این نکته باشد که کدام صفحه توسط کاربر بازدید شده است می تواند به فرآین سایت پیمایی کمک کند . برای مثال URL فوق و نام فایل به کاربر دقیقاً می‌گوید که کدام صفحه را بازدید می کند .
قرارداد معمول
Navigation هایی که برای سایت خود انتخاب می‌کنید نباید در سایت منحصر به فرد باشد . این امر می تواند برای سایتهای دیگر نیز مفید باشد . خیلی از المانهای عادی که در وب از آنها استفاده می‌کنید برای کاربران مانوس می شوند و بنابراین معانی از پیش تعریف شده خواهند داشت . بیشتر این المانها بر چسب دارند . برای مثال وقتی کاربر دگمه و کلید بر چسب دار Home page را می‌بیند می‌داند که آن لینک وی را به کجا خواهد برد برای اتصال به صفحه خانگی از Lable هایی مثل نقطه ورود استفاده نکنید . به یاد داشته باشید که کاربران مانند یک گردشگر هستند و شما باید کاری کنید که آنها را راضی نگه دارید و آنها همواره با شما باشند . در ادامه بحث خیلی از Logo ها یا تصاویر نشانه‌دار باید به صفحات خانگی متصل شوند . بقیه برچسب‌های عادی مثل Search یا Find کاربران را برای جستجو به سایتهای دیگر هدایت میکند .
(FAQS,Downloads,News,Sitemap,About Us,US Contact) همگی از برچسب‌های معمول در سایتها هستند . سعی نکنید که از برچسب‌های منحصر به فرد استفاده کنید ، چرا که بهتر آن است که کاربران بتوانند برچسب‌ها را تشخیص دهند تا بتوانند به راحتی در سایت گردش کنند .
Guided Navigation ( راهنمایی Navigation)
از تکنیکهای معمول دیگر برای کمک به کاربران در حین سایت پیمایی راهنمایی آنها است . با ایجاد یک اتصال به نقاط دیگر در واقع برای کاربران خود در وب ورودی برای حرکت به نقاط دیگر ایجاد می‌کنید . این اتصالات باید برای اطلاعات ضروری ایجاد شود و نیز به کاربران اجازه خروج بدهند . به عنوان مثال با خرید بروی اینترنت ( به صورت online ) کاربران برای خرید از میان اطلاعات عبور می کنند و سپس برای دریافت اطلاعات بهایی پرداخت می‌کنند . اگر از تصاویر گرافیکی استفاده می‌کنید باید به نحوی باشند که قابل درک باشند و مخاطبین قادر باشند به راحتی با تشخیص المانهای که قابلیت کلیک شدن را دارند در سایت گردش کنند .
نقشه فعالیت Navigation
Navigation چون بطور محسوسی به نوع تفکر و سلیقه شخصی طراح بر می‌گردد گاهی اوقات می تواند مشکلاتی ایجاد کندو از دیدگاه طراحان کارآیی navigation ها متفاوت هستند .
اگر Navigation یک سایت کاربردی نباشد کاربران از سایت شما خواهند رفت و بالعکس آن اگر Navigation خوب عمل کند کاربران به راحتی از مکانی به مکان دیگر گردش می کنند . Navigation سایت باید آزمایش شود و این مرحله نیاز به برنامه دقیق و حساب شدهای دارد .
موارد زیر را در نظر بگیرید :
ـ محاسبه اهداف و نیازهای کاربران
ـ یادگیری از Navigation هایی که کارآیی خوبی دارند .
ـ رفتن به عمق سایت
ـ ایجاد اتصالات سریع
ـ پیش‌بینی این مسئله که کاربران سلایق و پیش‌زمینه‌های متفاوتی دارند .
پیش‌بینی مقاصد و نیازها
طراحی Navigation برای پیش‌بینی فعالیتهای کاربران سایت و ساختن یک سایت برای حمایت از کاربران می باشد و برای انجام آن باید بدانید که کاربران سایت چه مقاصد و نیازهایی دارند . برای محاسبه اهداف و نیازهای کاربران نیاز به مصاحبه با مردمی که از سایت شما دیدن می‌کنند خواهید داشت . باید زمانی را برای مصاحبه با کاربران و آگاهی از فعالیت روزانه آنها قرار دهید . برای ایجاد یک سایت تجاری با کاربران زیاد وبا استعداد باید درباره اولویت‌هایی که می‌خواهند در سایت داشته باشند پرسش کنید و کوشش کنید که مقاصدی که در پشت درخواستهایشان دارند را نیز درک کنید . راه حل اصلی آن است که برای مشکلات و معماها باید راه حل مطلوبی بدست آید و این مهم فقط با مصاحبه با کاربران سایت بدست میآید .
آموزش از Navigation هایی که کارآئی خوب دارند
این مورد بیشتر از سایتهایی باید آموخته شود که پیمایش در آنها آسان است . المانهای معمولی که در پیمودن یک سایت موفق هستند را در نظر بگیرید . صرفنظر از دیدگاههای که تا به حال استفاده کردید یک Navigation خوب دارای خصوصیات زیر است :
ـ داشتن ظاهری آسان و ساده
ـ پایداری و بقاء
ـ ایجاد اتصالاتی برای بازگشت
ـ نمایش در زمینه
ـ حق انتخاب برای کاربر
ـ ایجاد پیامهای روشن و گیرا
ـ ایجاد برچسب‌های قابل درک و تشخیص
ـ حفظ اهداف اختصاصی سایت
ـ تأمین اهداف کاربران و مراقبت از آنها
تمامی این موارد مهم هستند اما ایجاد اتصال احتمالاً بیشترین اثر را برای کاربر دارد . Navigation ها باید به مردم بگوید که آنها کجا هستند و اگر ممکن باشد بگوید که کجا باید بمانند . کاربران باید قادر باشند که به راحتی اتصالات و موارد با قابلیت کلیک را شناسائی کنند . آنها نیاز دارند که بدانند که آیا خریدی که کردند و جستجویی که انجام دادند و ظایف دیگر با موفقیت آنجام شده است ؟ با ایجاد بازگشت می‌توانید احتیاجات اصلی را برای Navigation تأمین کنید .
رفتن به صفحات عمیقتر ازصفحه خانگی
حتی در سایتهایی که Navigation های ضعیفی دارند گردش از صفحه خانگی به صفحات دیگر درونی سایت بدون مشکل زیادی آسان است . ولی در هر صورت برنامه‌ریزی صفحه خانگی شما یک بخش کوچکی از وظیفه شما در قبال Navigation می باشد .
به هر جهت برنامه‌ریزی خوب برای Home page یکی از کوچکترین کارهایی است که برای ایجاد Navigation خوب و موفق باید رعایت کنید . هر چقدر در فازهای اولیه طراحی جزئیات را بیشتر رعایت کنید کاربران شما بامشکلات کمتری مواجه خواهند شد . بیشتر مشکلات Navigation این است که پارامتری برای رفتن از صفحه خانگی به صفحات دیگر وجود ندارد . این مشکلات منجر به گرفتار کردن و به گل نشستن کاربران در سایت میشود . معمولاً این اتفاقات به دلیل توجه بیش از اندازه به طراحی Navigation در یک جهت خاص روی می‌دهد . در طراحی Navigation تمامی این جزئیات و نیز مواردی که دور از شما می‌باشند و ممکن است برای سایت پیش آیند در نظر گرفته شوند .
ایجاد اتصالات سریع
ساختار صفحه را به طور کلی در نظر بگیرید و کمی وقت را برای ساختن میانبر در سایت صرف بگذارید . بعضی از این میانبرهای معمولی شامل جستجو نقشه سایت و جداول (site map , table , search) هستند . هدف از هر میانبر کمک به کاربران برای پیدا کردن سریع اطلاعات می باشد و شما باید راه میانبر را با این هدف در ذهن خود طراحی کنید . خیلی از المانهای صفحات کاربردی نیستند زیرا یک سری از موارد گمراه کننده را ارائه می‌دهند . مثلاً نقشه سایت زمان زیادی را برای بارگذاری نیاز دارد و یا جداول نیاز به Scroll کردن دارند . راههای میانبر باید ساده ، سریع و قابل درک باشند و نیز باید بدانید که کاربران استعدادها و توانایی‌های متفاوتی دارند . به عنوان مثال نحوه تأثیر علایق شخصی در ایجاد یک Navigation کاربردی را می توان در جستجو کردن و عملکرد افراد در سایتها دانست . بعضی از کاربران دوست دارند تا جایی که ممکن است از پرسه زدن در سایتها خودداری کنندو اطلاعات دقیق خود را در زمان کمی بدست آورند . اما بالعکس کودکان در هنگام جستجوی اطلاعات معمولاً تمایل به گردش در سایت را دارند و وقت بیشتری را صرف می‌کنند . طراحی Navigation مشکل است اما در عین حال کمک به کاربران برای رسیدن به مقاصدشان می باشد . همواره به خاطر داشته باشید که Navigation ها باید به کاربرانی که می‌خواهند در سایت شما به مقاصد خود دست یابند کمک کرده و آنها را هدایت می‌کنند . برای اطلاعات بیشتر مربوط به Navigation ها به آدرس زیر مراجعه کنید .
خلاصه فصل
در این فصل در مورد این که ساختار Navigation درطراحی بسیار مهم است بحث شد . باید ساختار سایت و چگونگی ایجاد آن بر روی سرور را امتحان کنید . در مورد انواع مختلفی از المانها آموختید و یاد گرفتید که چگونه آنها برای آگاهی کاربران ایجاد می‌شوند نیز بحث شد . همچنین در مورد کنترل Navigation مطالعه کردید و دیدید که چگونه می‌توان آنها را گسترش داد و در پایان مروری بر برنامه حمایت یک طرح از Navigation داشتیم .
گرافیکهای وب
اهداف
۱ـ تشریح عملکرد گرافیک در سایت شما
۲ـ تعریف عمق رنگ و قدرت تفکیک‌پذیری
۳ـ ابزارهای ایجاد گرافیک
۴ـ انتخاب قالبهایی برای فایلهای گرافیکی
مفدمه
گرافیکها در عین حال که با عث ایجاد جذابیتهایی در صفحات می شوند به همان میزان می توانند و دامهای پنهانی بر ضد توسعه در وب ایجاد کنند . تنها تعداد محدودی از قالبهای گرافیکی تصاویر وسیله مرور گر ها حمایت می شوند که خود آنها نیز مزایا های خاص خود را دارند یعنی حتی بعضی از قالبهای مفید و مقرون به صرفه نیز ، با محدودیت های جدی مواجه هستند . این امر طراحان وب را به رقابت و مبارزه برای ایجاد تصاویر ی که بطور سریع بارگذاری می شوند وادار می کند در این رقابت ابتدا باید معا نی عمیق از وظایف تصاویر در وب سایت و نیز بهتر جلوه دادن تصاویر در ک شود .
تصاویر
در طراحی سایت تصاویر ارکان اصلی هستند . کاربران انتظار دارند که این عکسها بتوانند مشاهدات خوبی برایشان به ارمغان آورند . همچینن از عکسها برای Navigation و نقشه های تصویری و دگمه های تصویری ( که باعث اتصال به صفحات ویا منابع دیگر می شوند ) استفاده می شود . روی یک سایت یکدست و یکپارچه ساختار LOGO و نماد های تجاری برای شناسایی بسیار مهم هستند .
تصاویر خوب در طراحی باید دارای جذابیت و کار آیی و مهمتر از همه سایز کوچک باشند .
اندازه فایل به طور مستقیم بر زمان بارگذاری تأثیر دارد و ملاحظات اصولی برای توسعه و انتشار وب در این مورد باید رعایت شود . طراحان باید پهنای باندی که برای تصاویر بکار برده شده در صفحه مورد نیاز است را در نظر داشته باشند .
معمولاً کاربران برای دیدن عکس بی صبر و حوصله می شوند . مندرجات صفحات وب با بکارگیری غلط عکسهای و ایجاد زمان بارگذاری طولانی نابود می شوند .
مودم‌ها با سرعت kbps 56 در Dial Up استاندارد به کار برده میشود ولی هنوز هم خیلی از مودها وجود دارند که با سرعت کمتر از آن . مورد استفاده قرار می‌گیرند . اگر سایت به منظور استفاده در اینترانت بر روی شبکه ایجاد شود خیلی از این موانع بر طرف خواهد شد . به یاد داشته باشید که سرور عمومی باشد و می‌تواند نمای سازمان رابرای دنیای بیرون ترسیم کند .ولی اینترانت برای استفاده عمومی باشد و می‌تواند نمای سازمان را برای دنیای بیرون ترسیم کند و لی اینترانت برای مصارف تجاری و به مقصود دسترسی سریع و آسان به منابع و اطلاعات بنا شده است . ا یجاد زرق و برق در اینترانت باعث کاهش بهروری می‌گردد . شما می‌توانید اینترانت را در جهت به عمل و اینترنت را مکانی جهت نمایش و عرضه بحساب آورید . گرافیکها تشریح و توضیحی بر موراد وفعالیتهای سایت و نیز ارائه معانی Navigation در یک سایت وب می باشند .
داده‌های متصور رقمی
همه تصاویر دیجیتالی ویژگی‌های خاص و مهمی را دارند که می توانند در اندازه سایز آن موثر باشند که مقدار کمی از این ویژگی‌ها در این بخش بیان میشود .
پیکسل (pixel)
نقطه کوچکی در تصویر میباشد و در یک جمله شبکه‌ای از بلوکهای ساختمانی برای گرافیکها و تصاویری است که می‌تواند بر روی کامپیوتر نمایش داده شود . پیکسل کوچکترین واحد نمایشی کامپیوتر است .
عمق رنگ
پیکسل به مقدار زیادی اطلاعات رنگی ایجاد میکند . این اطلاعات با بیت اندازه‌گیری می‌شوند . حساب کنید که چگونه هر پیکسل تمامی این رنگها را می‌تواند نشان دهد . برای مثال اطلاعات پیکسل ۴ می‌توانید بیتی در م د Scale Gray تا ۱۶ سایه خاکستری را نشان دهد . هر ۸ بیت از اطلاعات رنگ در هر پیکسل تا ۲۵۶ بیت از اطلاعات رنگ را تولید میکند و به این ترتیب بدیهی است که در درجات بالاتر بیت ( که عمق بیت نیز نامیده می‌شوند ) واقعی بینی رنگی بیشتری را به ارمغان می‌آورد . ضرورت تفکیک پذیری استاندارد صفحه نمایش ۴۸۰*۶۴۰ یا ۷۲ نقطه در اینچ (dpi) میباشد . شما باید المانهای وب را با آهنگ خاص برای کاربران جلو برده و توسعه دهید .
جدول رنگ و الگو
( مجموعه‌ای از رنگهای قابل دسترسی در یک سیستم گرافیکی کامپیوتر ) :
اگر چه ۸ بیت رنگ می‌تواند میلیونها رنگ را نمایش دهد و لی فقط در یک زمان ۲۵۶ رنگ حمایت می‌شوند . سیستم فقط این ۲۵۶ رنگ را در سیستم گرافیکی خود ذخیره
میکند .
تذکر
تفاوت کمی ما بین جعبه رنگ ویندوز میکروسافت و جعبه رنگ مرورگر Netscape Navigator وجود دارد Navigator از ۲۵۶ رنگ حمایت می‌شوند ولی ویندوز از ۲۱۶ رنگ استفاده میکند. هنگامی که یک عکس ۸ بیتی ایجاد می‌کنید از یک بردار و یا یک نرم افزار نمایشی استفاده می‌کنید ، خود برنامه یک جعبه ایجاد میکند که رنگهایی که در عکس موجود می‌باشند درآن جعبه رنگ نیز وجود د ا رد . هنگامی که تصویر اصلی نمایش داده میشود جعبه رنگ برای نمایش رنگ اصلی تنظیم می شود . وقتی که تصاویر متعددی بطور مرتب و یکجا به نمایش می گذارید دچار عدم هماهنگی در تلالو رنگها می‌شوید که این امر درخشش الگو یا عوض شدن جعبه رنگ نامیده میشود . درخشش الگو ، زمانی اتفاق می‌افتد که تفاوتت معنی دار زیادی بین تراکم ( چگالی ) تصویر با جعبه رنگ آن و تراکم ( چگالی ) سیستم با جعبه رنگ آن وجود دارد . برای غلبه بر این محدودیت مرورگر به طور اتوماتیک تکنیکی را بنام افزایش نور تصویر ایجاد میکند .
افزایش شدت نور نمایش
افزایش شدت نور نمایش تخمین تقریبی یا تطبیق رنگها ما بین یک جعبه تصویر و جعبه رنگ سیستم است و رنگهای روی تصاویر با رنگهای سیستم جایگزین می‌شوند . متأسفانه افزایش شدت نور باعث میشود که نمایش عکس را بصورتی که شما نمی‌خواهید عوض کند . تصاویر باید قبل از آنکه در صفحات وب انتشار داده شوند پرنور شوند .
عکسهای با فورمات Bitmap و برداری (Vector)
عکسهای گرافیکی وب به ۲ قالب دسته‌بندی می‌شوند Bitmap و Vector که هر قالب خود زیر شاخه‌هایی نیز دارد .
Bitmap
بیشترین قالب گرافیکی معمول Bitmap میباشد .
عکسهای Bitmap از تأثیر هر رنگ نمایش به طور جداگانه ساخته شده‌اند . هر چقدر که رنگهای ایجاد شده توسط یک عکس بیشتر باشد ، سایز فایل مربوطه به آن عکس بیشتر میشود . وقتی که فایل Bitmap با بزرگنمایی دیده می شود ، فایل Bitmap شبیه به یک سری مربع کوچک میشود که هر یک درجه رنگی دارند که در کل عکس سهم دارد .
Bitmap هنگامی که از نزدیک دیده میشود ظاهری ناصاف دارد اما هنگامی که با فاصله به آنها نگاه می‌کنید بصورت نقطه ، نقطه و شبیه به شکل واقعی و یا بصورت بلوکهای مجزا میباشد .
برای ساختن فایل Bitmap مرورگر موجود به طور هماهنگی در بارگذاری یک عکس با یکدیگر کار می‌کنند . اطلاعات هر پیکسل ذخیره میشود وسپس دوباره در مرورگر برای ایجاد تصویر برگردانده می شود . چون فایلهای Bitmap از تعداد دیسکهای بیشتری برای نمایش استفاده می‌کنند سایز بزرگتری دارند ، فایلهای Bitmap برای عکسها اثر‌های سایه‌دار و لبه‌های هموار یا تیره ایجاد می کنند .
بردار
تصاویر برداری در تفسیر و ترجمه متفاوت‌تر از فایلهای Bitmap می باشند . تصاویربرداری اطلاعات عکس را در دستورالعملهای ریاضی خود ذخیره می‌کنند که
درهنگام نمایش معنی می‌دهند . برای مثال برای ایجاد یک دایره لازم است که مختصات مرکز و شعاع و درجه رنگ را بدانیم . از این اطلاعات و دستورالعملهای ریاضی برای افزایش سایز فایل نیز استفاده میشود . چون مقادیر قابلیت عوض شدن دارند بنابراین افزایش سایز بردار اندازه فایل را زیاد نمی‌کند . امتیاز دیگر تصاویر برداری توانائیهای آنها در به مقیاس گذاشتن راندمان ابزار استفاده شده میباشد و تصاویر برداری مستقل از قدرت تفکیک پذیری می باشند .
برنامه‌های گرافیکی
شما می‌توانید با برنامه‌های گرافیکی تصاویر دیجیتالی ایجاد کنید . اخیراً پیشرفتهای زیادی در نرم افزارها برای ویرایشی کردن عکسها ، رتوش کردن و ارسال آن برای وب ایجاد شده است .
این برنامه‌ها به ۲ گروه زیر تقسیم می‌شوند :
ترسیم بردار ، فایلهای از نوع نقاشی
برنامه‌های ترسیم اشکال گرافیکی برداری :
نرم افزارهای ترسیم بردار مبنا مانند XRes و AdobeIllustrator توصیف کننده نقشه شکل میباشد و می‌توان در آن خطوط نامرئی ایجاد کرد .
اطلاعات عکس در مجموعه‌ای از دستورالعملهای ریاضی ذخیره میشود . در قبل بحث کردیم که تصاویربرداری مستقل از مانیتور هستند به این معنا که تنظیمات مانیتور کامپیوتر بر روی سایز و اندازه تاثیر گذار است و نیز این تصاویر کوچکتر از فایلهای مشابه خود از نوع Paint هستند . تصاویر برداری گرافیکی معمولاً در ابعاد سه بعدی و در محیط‌های زبانهای نمونه‌سازی فرضی VRLM-Vitual Reality Modeling Language مورد استفاده قرار می‌گیرند و معمولاً نمی‌توانند به درستی و به طور واقعی گرایانه جزئیات تصاویر را انتقال دهند و نمایش آنها در صفحه نمایش تا اندازه‌ای آهسته‌تر است و نیز برای دیدن آنها در و ب نیاز به Plug – ins میباشد . به هر جهت تصاویر برداری در صنعت و مصارف علمی کاربرد خیلی خوبی دارند . بعداً به معرفی برنامه‌هایی که از تصاویر برداری حمایت می کنند خواهیم پرداخت .
برنامه‌های نقاشی
برنامه‌های نقاشی از Scan از عکس تا ضبط فریم‌های ویدئویی فایلهای Bitmap ایجاد میکند و یا برای ایجاد کارهای هنری از آنها استفاده میشود . فایلهای Bitmap با جزئیات بیشتری نشان داده می‌شوند . در قبل بحث کردیم که فایل Bitmap با نقطه‌های کوچکی که هر نقطه مطابق با یک پیکسل در صفحه نمایش میباشد طراحی شده است . فایلهای Bitmap در هنگام ضرورت پیکسل به پیکسل ویرایش می‌شوند .
مضرت فایلهای Bitmap در این است که سایز فایلهای اصلی بزرگ هستند . ظاهر فایلهای Bitmap به طور زیادی بر صفحه مانیتور اثر می‌گذارد . هر دو قالب J pg ، Gif از نوع Bitmap هستند . برای ایجاد تصاویر گرافیکی خوب معمولاً از نرم‌افزارهای زیر استفاده میشود :
قالبهای فایل تصویر
تصاویر گرافیکی در قالبهای زیر ظاهر می‌شوند : (Bitmap (BMP قالب TIFF(Tagged Image File
Graphic Interchange Format , (WMF) Windows Meta File (JPEG) Joint Photo (Format) (Gif Express Group Graphic فقط قالبهای Gif و JPG بطور معمول و ذاتی با مرورگرها حمایت می شوندو فورمتهای دیگر با کمک Plug in مشاهده می‌شوند . حمایت ذاتی به این معنا است که مرورگرها نیازی به نرم‌افزار خاص برای نمایش عکس ندارد . هنگام ایجاد یک تصویر وب یک طراح باید یکی از فایلهای jpg یا gif را بر مبنای نوع عکسی که در فرمت دارد انتخاب کند . جدول زیر قالبهای گوناگونی از فایلهای عکس و پسوندهای آن را نشان می‌دهد .
Image File Format
Interchange Format _ Gif Graphic
Gif یک قالب فایل مستقل است که محدود به نمایش ۲۵۶ رنگی می باشد که بطور طبیعی بوسیله Compuserver برای سرویسهای روی خط انتشار داده شده است . Gif برای اکثر طراحان حرفه‌ای وب قالب خوبی میباشد زیرا سایز آنها کوچک هستند . بهم تابیدگی فایلهای Gif بی‌نظیر است و بهتر است که برای فایلهای بزرگ از این نوع قالب استفاده شود . Gif به عنوان یک قالب کم ضرر در نظر گرفته میشود به این معنی که تصویر فشرده میشود در حالی که هیچ اطلاعاتی از دست نمی‌رود . در نتیجه یک فایل Gif نمی‌تواند به اندازه یک فایل Jpg فشرده شود و نیز طراح نمی‌تواند میزان فشردگی را محاسبه کند .
Animated –Gif
در سال ۱۹۸۹ ورژنی از نرم افزار مربوط به فایلهای Gif این امکان را دارد که رشته توالی از عکسها ذخیره شده یک فایل متحرک نمایش دهد . فایلهای Gif می‌توانند انیمیشن‌های کامل و افکتهای ویدئوئی بدون نیاز به Plugins را ایجاد کنند .
فایلهای Gif ممکن است شامل یک عکس ساکن باشد ،توابع متحرک Gif مانند کارتون و … فایلهای Gif ممکن است شامل فرمهای متوالی است که تقریباً‌از Cach مرورگر بارگذاری می شوند و بطور نامحدود تکرار می شوند و با حلقه مجبور به حرکت تقلیدی میشود . یکی از اختیارات Gif های متحرک این است که آنها در درجه بالای تصاویر متحرک قرار دارند آنها وابسته به Client-Pull و Server-Push نیستند . هم Client – Pull و هم Server Push نیاز به فایلی دارند که بتوانند بطوری در پی با تعداد زیادی تغییرات بین کامپیوتر کاربر و کامپیوتر سرور بارگذاری شود .
(Server Push _ Client Pull)
(Server Push _ Pull) ترکیبی از فنون سرویس‌دهنده / سرویس‌گیرنده وب که بصورت انفرادی شامل فشردن سرویس‌دهنده یا کشیدن سرویس‌گیرنده است . در فشردن سرویس‌دهنده ، داده‌ها را در سرویس‌گیرنده بارگذاری میکند . اما ارتباط داده‌ای همچنان باز می‌ماند . این ترکیب به سرویس‌دهنده امکان می‌دهد که در صورت لزوم انتقال داده‌ها را به مرورگر ادامه دهد .در کشیدن سرویس‌گیر نده ، سرویس دهنده داده‌ها را برای سرویس‌گیرنده بارگذاری میکند . اما ارتباط داده‌ای باز باقی نمی‌ماند . سرویس دهنده رهنمود HTML را برای مرورگر ارسال میکند و به آن اعلام میکند که این ارتباط را پس از یک فاصله زمانی مجدداً باز کند . تا داده‌های بیشتری را دریافت کرده یا احتمالاً URL جدیدی را باز کند .
Gif شفاف
امتیازی که فایلهای Gif نسبت به تصاویر JPG دارند این است که طراح می‌تواند یک رنگ از تصاویر Gif طراحی کند که شفاف باشد و این ویژگی باعث رفع محدودیت‌ها در اشکالی مثل مربع یا مثلث میشود . برای مثال یک طراح می‌تواند یک logo دایره‌ای با یک زمینه رنگ شفاف ایجاد کند . بنابراین عکس با اطلاعات شفاف و بصورت دایره ظاهر میشود .
JPEG-Joint Photographic Experts Groop
عکسهای در قالب JPEG از رنگهای بیشتری نسبت به فایلهای Gif برخوردار هستند . اما معمولاً به زمان بارگذاری بیشتری نیز نیاز دارند .
فایلهای JPG شامل اطلاعات ۲۴ بیت رنگی (۱۶٫۷ میلیون رنگ ) می‌باشند و به خوبی در تصاویر یکپارچه گرافیکی و عکسبرداری‌ها ظاهر می‌شوند . باید به خاطر آورید که خیلی از کاربران فقط توانایی نمایش ۸ بیت رنگ را برای خود دارند و در نتیجه در نمایش عکس برای آنها به مقدار قابل ملاحظه‌ای افزایش نور ایجاد میشود . ( پدیده‌ای که قبلاً راجع به آن بحث شد )
فایلهای JPG به طور اتوماتیک فشرده می‌شوند و در هنگام ورود به صفحات وب از حالت فشردگی خارج می شوند . اثرات فشرده‌سازی متفاوت هستند . فشردگی بیشتر تنزل درجه بیشتری در عکس نهایی دارد . JPG را به عنوان یک فایل زیان آور و پراتلاف در نظر می‌گیرند . به این معنی که فشردگی عکس را افزایش می‌دهد . رنگها با قطره چگان از جعبه رنگ عکس برداشته میشود و نتیجه آن تنزل در کیفیت عکس است . برای مثال یک فایل kb 100 می‌تواند kb 10 فشرده شود و به هر جهت این فشردگی کیفیت عکس را کم میکند . یکی از مضرات استفاده از این قالب این است که طراح کنترلی بر چگونگی تبدیل bit 24 به ۲۵۶ رنگ استفاده شده با صفحه نمایش کاربر را ندارد . همچنین تفاوت بارزی در نحوه نمایش این قالب در ۲ مرورگر IE و NetScape وجود دارد بعلاوه نحوه نمایش در PC ها نیز متفاوت‌تر از مکینتاش می باشد . طراح باید قبل از آنکه صفحه خود را به اتمام رسانید بداند که کدام قالب منظور وی را بهتر تأمین میکند و کار خود را در د و مرورگر با سیستم عاملهای مختلف آزمایش کند .
JPEG2000
قالب جدید JPEG به منظور توسعه ویژگی‌های فشردگی فایلهای JPEG استاندارد میباشد همانطور که قبلاً بحث شد قالب اخیر JPEG که اطلاعاتی راجع به تصویری که فشرده شده است در بردار سودمند نیست و این قضیه در نتیجه روزنه‌هایی را در تصویر ایجاد می کند و باعث ایجاد تصویر خالدار می‌گردد . در JPEG 2000 فشرده‌سازی در اثر یک تکنولوژی مواج بوجود میآید که اطلاعات را به گونه‌ای متفاوت ذخیره میکند که تعداد زیادی از تکه‌هایی که در تصاویر فشرده شدهای که از طریق JPEG بوجود آمدند را از بین می‌برد .
Portable Network Graphics-PNG
قالب PNG به عنوان یک قالب جدید برای گرافیکهای وب ظاهر شده است . برای تصاویر وب PNG بهترین ترکیب از ویژگی‌های JPG و GIF را تحت یک قالب واحد دارا میباشد. فایلهای PNG زیادتر هستندو همچنین از شفافیت فایلهای GIF و از عمق رنگی JPG حمایت می‌کنند . فشردگی در فایلهای PNG با استفاده از فیلترهای فشردگی که تا عمق bit 48 حمایت می‌شوند توسعه پیدا کرده است . حمایت مرورگرها از قالب PNG هنوز معمول نشده است . Netscape 4.7 و IE5 با درجات مختلفی از PNG حمایت می‌کنند . به هر جهت کمیته www در ۱۹۹۶ فرمت PNG را پیشنهاد داد ولی فرمت استاندارد شده نیست .
احتمالا این روزها درباره ارزهای دیجیتال مخصوصا بیت‌کوین از گوشه‌وکنار در اخبار رادیو و تلویزیون یا شبکه‌های اجتماعی چیزهایی شنیده‌اید.
۱۰ مکانی که توسط گوگل مپ سانسور شده ۵٫۰۰/۵ (۱۰۰٫۰۰%) ۱ امتیاز اکثر مناطق به علت مسائل امنیتی-سیاسی به صورت سانسور شده در نقشه های گوگل دیده می شوند و به همه این ها باید یک مورد بزرگ یعنی کشور کره شمالی را افزود […]
Twitch برنامه ایست که در آن بازی های ویدیویی دست به دست هم می دهند و با داشتن میلیون ها بیننده و بازی کننده راهی برای تعامل و به اشتراک گذاری محتوای خلاقانه با دیگران ارائه می دهند.
همه‌ی دیسکهای سخت موجود برای پارتیشن بندی از ساختار قالب‌بندی داده‌ای MBR (مخفف Master Boot Record) یا GPT (مخفف GUID Partition Table) استفاده می‌کنند.
در این مطلب به معرفی ۵ ترفند کاربردی و مفید در مرورگر گوگل کروم در سیستم‌عامل اندروید خواهیم پرداخت. با بهره‌گیری از این ترفندها می‌توانید توانایی کار خود با این اپ را افزایش دهید.
درباره تلویزیون های اینترنتی ایران چه میدانید؟ تلویزیون اینترنتی در ایران علاوه بر اینکه قابلیت استفاده از فناوری برای راحتی کاربران را دارد و همه مزایایی را که IPTV ها در خارج از کشور دارا هستند، یکی ویژگی مهم دیگر هم دارد که در […]
ارسال کتاب برای انتشار در سایت
انتشار کتاب شما
درخواست حذف کتاب
درخواست حذف کتاب
- دانلود کتاب اشعار سهراب سپهری برای موبایل - 5,388,118 بازدید
- دانلود کتاب آموزش فتوشاپ بصورت تصویری - 4,795,221 بازدید
- دانلود کتاب آموزش گام به گام بورس - 2,728,278 بازدید
- دانلود کتاب آموزش تصویری پاورپوینت powerpoint 2007 - 1,461,161 بازدید
- دانلود کتاب آموزش مسائل زناشویی – جلد۳ - 1,393,105 بازدید
- دانلود کتاب آموزش ساخت کاردستی - 1,390,059 بازدید
- دانلود کتاب آموزش آشپزی – شیرینی کیک دسر - 1,368,081 بازدید
- دانلود کتاب آموزش روابط زناشویی توسط دکتر مجد - 1,345,565 بازدید
- دانلود کتاب آموزش گرامر زبان انگلیسی - 1,262,355 بازدید
- دانلود کتاب شناخت کامل داروها - 1,168,979 بازدید
- دانلود کتاب آموزش کامل ویندوز ۷ - 1,137,674 بازدید
- دانلود کتاب آموزش اکسل ۲۰۰۷ – Exel 2007 - 1,134,958 بازدید
- دانلود کتاب مفاتیح الجنان - 1,109,670 بازدید
- دانلود کتاب نقشه جهان بصورت کامل - 1,084,728 بازدید
- دانلود کتاب نقشه تهران - 1,043,620 بازدید
-
دانلود کتاب اندروید طعم مرگ
دانلود کتاب اندروید طعم مرگ ۳٫۷۷/۵ (۷۵٫۳۸%) ۱۳ امتیازs ♥ عناوین اصلی کتاب اندروید ” طعم مرگ ” شامل: ♥ فصل اول: حقیقت مرگ ♥ فصل دوم: اقسام مرگ ♥ فصل سوم: احتضار و خصوصیات آن ♥ فصل چهارم: سکرات مرگ ♥ فصل پنجم: ترس […]
-
دانلود کتاب اندروید مهر مهتاب _ کرامات حضرت فاطمه
دانلود کتاب اندروید مهر مهتاب _ کرامات حضرت فاطمه ۳٫۸۰/۵ (۷۶٫۰۰%) ۵ امتیازs سخن مولف : در این کتاب، ابتدا سى کرامت نقل کرده ام سپس در فصل دوم به چند بحث پرداخته ام: «آیا خواب حجّت است؟ چگونه مى شود به خواب اعتماد […]
-
دانلود کتاب اندروید گوهر هفتم : چهل سخن از امام کاظم
دانلود کتاب اندروید گوهر هفتم : چهل سخن از امام کاظم ۴٫۰۹/۵ (۸۱٫۸۲%) ۱۱ امتیازs سخن مولف : ما خود را پیرو اهل بیت علیهم السلام مى دانیم و محبّت آنان را در دل داریم، خدا به آنان مقام عصمت داده است و از […]
-
تأثیر هوش مصنوعی بر آینده کودکانمان
تأثیر هوش مصنوعی بر آینده کودکانمان ۱٫۰۰/۵ (۲۰٫۰۰%) ۱ امتیاز کلسی پایپر، روزنامه نگار امریکایی و از کارکنان سایت “وُکس” است جایی که او برای ستون Future Perfect می‌نویسد که موضوعات مختلفی را از دیدگاه نوع دوستی موثر پوشش می‌دهد. پایپر نگران خطرات فاجعه […]
-
ازدواج هایی که عاقبت خوشی ندارند
ازدواج هایی که عاقبت خوشی ندارند ۵٫۰۰/۵ (۱۰۰٫۰۰%) ۱ امتیاز بسیاری از رابطه‌ها و ازدواج های امروزی به علت برخی ویژگی‌های اخلاقی طرفین و نداشتن شناخت کافی نمی‌تواند موفقیت آمیز باشد.
-
بیشتر با وجدان هستید یا روشن فکر؟
بیشتر با وجدان هستید یا روشن فکر؟ ۲٫۶۷/۵ (۵۳٫۳۳%) ۳ امتیازs شخصیت شما بر هر چیزی، از دوستان‌تان گرفته تا کاندیدی که به او رای می‌دهید تاثیرگذار است؛ اما با این حال خیلی از افراد وقت زیادی را صرف فکر کردن به ویژگی‌های شخصیتی‌شان […]
هو الکاتب
پایگاه اینترنتی دانلود رايگان كتاب تك بوك در ستاد ساماندهي سايتهاي ايراني به ثبت رسيده است و بر طبق قوانین جمهوری اسلامی ایران فعالیت میکند و به هیچ ارگان یا سازمانی وابسته نیست و هر گونه فعالیت غیر اخلاقی و سیاسی در آن ممنوع میباشد.
این پایگاه اینترنتی هیچ مسئولیتی در قبال محتویات کتاب ها و مطالب موجود در سایت نمی پذیرد و محتویات آنها مستقیما به نویسنده آنها مربوط میشود.
در صورت مشاهده کتابی خارج از قوانین در اینجا اعلام کنید تا حذف شود(حتما نام کامل کتاب و دلیل حذف قید شود) ، درخواستهای سلیقه ای رسیدگی نخواهد شد.
در صورتیکه شما نویسنده یا ناشر یکی از کتاب هایی هستید که به اشتباه در این پایگاه اینترنتی قرار داده شده از اینجا تقاضای حذف کتاب کنید تا بسرعت حذف شود.
این پایگاه اینترنتی هیچ مسئولیتی در قبال محتویات کتاب ها و مطالب موجود در سایت نمی پذیرد و محتویات آنها مستقیما به نویسنده آنها مربوط میشود.
در صورت مشاهده کتابی خارج از قوانین در اینجا اعلام کنید تا حذف شود(حتما نام کامل کتاب و دلیل حذف قید شود) ، درخواستهای سلیقه ای رسیدگی نخواهد شد.
در صورتیکه شما نویسنده یا ناشر یکی از کتاب هایی هستید که به اشتباه در این پایگاه اینترنتی قرار داده شده از اینجا تقاضای حذف کتاب کنید تا بسرعت حذف شود.
برچسب ها :
کتاب گویا
کتاب صوتی
دانلود کتاب گویا
رایگان
دانلود کتاب صوتی
download
book
آموزش
کتاب رایگان
فارسي
ebook
pdf
کتاب الکترونیکی
کتاب pdf
دانلود رایگان کتاب
دانلود کتاب
دانلود
رايگان
کتاب
كتاب
تمامی حقوق و مطالب سایت برای تک بوک محفوظ است و هرگونه کپی برداری بدون ذکر منبع ممنوع می باشد.
به نکات زیر توجه کنید