آموزش متدولوژی و تکنولوژی طراحی وب ciw (بخش 3)

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

شما ممکن است توانسته باشيد تمامي منابع طراحي در دنيا را براي سايت خود بکار گيريد ولي نتوانسته باشيد که سايتي را ايجاد کنيد که وظايفش را به خوبي انجام دهد ؟ چگونه ؟زماني که کارآيي کاربران و مخاطبين خود را در نظر نگرفتيد ،و اين امر يک حرکت خودجوش نيست و بايد به تمامي نيازهاي کاربران پاسخ داده شود . اين فصل در موردتمامي پارامترهايي که کاربران شما مي خواهند بحث مي کند و به شما نشان مي دهد که چگونه کارآيي سايت خود را آزمايش کنيد .

انتخاب ترکيب رنگ

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

در يک دسته بندي، فقط مکانهايي که در آنجا سايت جسارت دارد که از مدل سياه و سفيد بدون آنکه لطمه اي به کارآيي آن سايت وارد شود استفاده کند. Home Page يا صفحه اول يک وب سايت است . مندرجات اطراف Home Page فراوان هستند و سايت مي تواند اهداف خوبي را براي کاربر تامين کند . اين ترکيبات رنگها در المانهاي ديگر صفحه مثل عکسها و چهار چوب ها مي تواند استفاده شود و باعث ايجاد انگيزه براي جستجو و درخواست اطلاعات براي کاربر گردد.

*تذکر فني :

براي ايجاد ترکيبات مختلف از پيش زمينه و متن،از سايت زير ديدن کنيد:

http://www.hidaho.com/colorcenter/cc.html

گذارهاي رنگ :

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

قلم ها
نظر به اينکه در ايجاد و انتشار وب ساختار آن نيز مانند ديگرتکنولوژيهاي آن به طور مداوم تغيير مي کنند ، دو فونت معمول وجود دارند که در اينترنت از آنها به کرات استفاده مي شود . اولين آن New Roman براي کامپيوترهاي PC است که معادل آن Time بر روي سيستم هاي مکينتاش مي باشد ، فونت دوم ، Arial براي کامپيوترهاي PC و معادل باآن Helvetica بر روي سيستم هاي مکينتاش مي باشد . تکنولوژيهايي نظير دايناميک و فونتهاي تعبيه شده و توکار براي ارائه سريع و انتخاب بهتر ظاهر مي شوند .
به هر جهت اين فونتهاي معمول يک سايت زيبا و جذاب ايجاد مي کنند و يک نمايش خوب را ارائه مي دهند .
و اگر گاهي از آن استفاده کنيد احتمالا متوجه خواهيد شد که فونتهايي که به آنها نگاه مي کنيد از موقعيت خوبي برخوردار هستند . ممکن است به سايتي نگاه کنيد که از فونت ديگري استفاده کرده که چشمان شما را به آساني درگير مي کند زيرا در بسياري از موارد از آن استفاده نمي شود .

محدوديت ها :

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

فن چاپ :

از آنجايي که فونتها از اجزاء لازم هر سايتي محسوب مي شوند فونت و رنگي را انتخاب کنيد که همراه با المانهاي ديگر صفحه بايدبتواند جملات بدون کلام ايجاد کند . خواندن متون زياد مانند چيزهاي ديگري که مي خوانيد فشار زيادي وارد مي کند و خسته کننده مي باشد و باعث منحرف کردن توجه کاربر مي شود. يک فونت انتخابي خوب مي تواند در صفحه خوابيده شود و يا درخشش خود را براي کاربر تنظيم و ايجاد کند .

سايز فونت
سايز فونت نرمال براي بيشتر مرورگرها 3 مي باشد و اندازه هاي ديگر با اين مقدار فرضي اندازه گيري مي شوند . براي مثال اگر بخواهيد سايز فونت را به 5 افزايش دهيد کدي که براي آن به کار مي بريد بصورت فوق است :

به جاي استفاده از

سايز فونت نرمال براي بيشتر مرورگرها 3 مي باشد و اندازه هاي ديگر با اين مقدار فرضي اندازه گيري مي شوند . براي مثال اگر بخواهيد سايز فونت را به 5 افزايش دهيد کدي که براي آن به کار مي بريد بصورت فوق است :

نوع صحيح True Type :

خيلي از فونتهاي شناخته شده به عنوان نوع صحيح هستند به اين معني که آنها مي توانند در هر سايز نقطه اي بدون کم شدن کيفيت کاراکترها ترجمه شوند . True Type يک تکنولوژي ديجيتال است که با کامپيوترهاي Apple توسعه يافته است و امروزه هم با سيستم هاي Apple و هم با سيستم هايMicrosoft استفاده مي شوند . Times new roman و Arial از نوع صحيح هستند .
بعضي از اين فونتها مثل verdena و Georgia نسبتا بيشتر ظاهر مي شوند و به زيبايي ترجمه مي شوند و يک صفحه سنگين و پرمايه ايجاد مي کنند .

جلوگيري از اثرات بصري نامطلوب :

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

خطوط افقي با طول زياد :

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

ملاحضات ديگر :

براي يافتن بهترين فونتي که خواسته هاي شما را به بهترين حالت بر آورد کند نياز به تشخيص دامنه فونت و حدود عبارت براي تغييرات و دگرگوني آن داريد .
بايد همه اين تکنيکها و موارد را به بهترين صورت انجام دهيد . توصيه هاي زير مي تواند در جلوگيري از اشتباهات معمول در هنگام توسعه يک سايت به شما کمک کند .
در نظر داشته باشيد که تمامي فونتهاي مجزا با هم يکي مي شوند و نيز بدانيد که چگونه فونتها به طراحي شما وابسته هستند .
هر فونتي به طور جدا گانه مي تواند تمام منظورات ما را در يک زمان برطرف سازد .
طراحي المانهامثل ( سايز و فاصله خطوط و رنگ پيش زمينه و پس زمينه ، Margin )همه و همه مي توانند در محاسبه و ايجاد يک نتيجه مطلوب کمک مي کنند . متن فونتهاي نسبتا بي اثر مثل Sansserif مي تواند تنوع و دگرگوني عميق در اشکال ساده ميان ترکيبات گوناگون انجام دهد .

فونتهاي مرورگر Netscape
براي مرورگر Netscape در سايت http://www.bitstream.com اشکال کاراکترهايي که در صفحات کاربرد دارند وجود دارد و آنها در يک فايل فشرده (PFR) ذخيره شده اند .
PFR - Portable Font Resource
مي توانيد فايل PFR را به عنوان يک مرجع براي صفحات HTML و اسناد Style sheet خود قرار دهيد . وقتي که صفحه توسط مرورگري مشاهده شد که از اين فايل پشتيباني مي کرد مرورگر فايل PFR را مي خواند و کاراکترها را دوباره ايجاد مي کند . PFR قادر است که کاراکترها را در اسناد اصلي براي همراهي اسناد در هر جايي به کار ببرد . فونتهاي ميکروسافت :

فونتهاي وب اوليه ميکروسافت Open Type ناميده مي شوند سايت http://www.microsoft.com/hypography تلاش مشترکي بين ميکروسافت و Adobe مي باشد . ازنقطه نظر نگاه وب Open Type مانند Truedoc عمل مي کند و کاراکترها را قادر مي سازد که از ميان اسناد در فرم متراکم شده اي عبور کنند .
Open Type پهناي ابتدائي دارد که True Type و Post Script نوع 1 را به عنوان يک قالب منفرد در هم ادغام کرده است .
گر چه True Dec و Open Type تکنولوژيهاي رقابتي با يکديگرهستند ولي آنها قادر خواهند بود که با هم در يک کامپيوتر همجوار باشند و هر فونتي را در صفحه ظاهر کنند به شرط آنکه کاربران آن فونت را بر روي سيستم هاي خود Install کنند . اين قالب اين تعهد را ايجاد مي کند که کاربراني که از مرورگرهاي مختلف استفاده مي کنند هميشه هر دو اين تکنولوژيها را حمايت کنند .
بعضي کاربران مرورگرهاي قديمي دارند . به عنوان يک طراح وب بايد بتوانيد بين تقاضاي خود براي تناسب فونتها و نياز به جلب بيشترين مخاطب ارتباطي برقرار سازيد .
واين حقيقت کوشش بيشتر شما را براي ايجاد يک صفحه با منظر خوب ( مستقل از نوع مرورگري که اين صفحات با آن ديده مي شوند ) را مي طلبد .

فضاي سفيد :

هنگامي که در ابتدا صفحه اي بر روي مرورگر شما بار گذاري ميشود ،علاوه بر آنکه در هر قسمت صفحه با مفاهيمي مواجه ميشويد ،نتايج مندرجات محدودي را که به خوبي و با هماهنگي توزيع شده اند مشاهده مي نماييد.
اولين حس شما از اين نوشته ها چيست ؟ اگر شما بمانند خيلي از کاربران هستيد صفحه اي با توزيع هماهنگ المانهاو مقداري فضاي خالي (که در انجمن توسعه به عنوان فضاي سفيد معروف است) را ترجيح مي دهيد . توجه داشته باشيد که کاربران به خاطر ايجاد صفحه اي با متنهاي زياد و شلوغ از شما قدرداني نخواهند کرد . آنها خيلي سريع صفحه شما را مرور مي کنندو اگر صفحه شما اينچنين بود ممکن است اطلاعات زيادي را از دست بدهند . اين نکته بدان معني نيست که براي کاربران اطلاعات زياد ايجاد نکنيد بلکه به اين مفهوم است که نبايد همه اين اطلاعات را در يک صفحه قرار دهيد . هر صفحه وب بايد حدودا 50 درصد متن کمتري نسبت به يک صفحه مشابه چاپ شده آن داشته باشد .
هر صفحه بايد براي ارائه اجمالي اطلاعات طراحي شود و بايد اتصالاتي براي رسيدن کاربران به جزئيات بيشتر و عميق تر ايجاد شود . همه کاربران يه يک مقدار اطلاعات نياز دارند . به کاربر اين اختيار را بدهيد که خود انتخاب کند که آيا جزئيات رامي خواهد يا نه ؟
و نيز صفحه را به منظور کوتاه کردن آن قسمت نکنيد . مگر آنکه شکستن آن منطقي باشد . هر صفحه بايد مستقل بوده و وابستگي به جايي نداشته باشد .
بعضي از طراحان و انتشار دهندگان وب از جداول و عکسهاي Gif براي اضافه کردن فضا به صفحه استفاده مي کنند . بعد از محاسبه اينکه کاربران چه چيزي را نياز دارند که بدانند مي توانيد صفحه آرايي خود را با استفاده از جداول و حاشيه ها HTML براي قرار دادن موفقيت سند و مندرجات صفحه در فضاهاي خالي شروع کنيد به عبارت ديگر جداول همه آن چيزهايي هستند که شما به آنها نياز داريد .

ساختارها
ساختار صفحه با فايلهاي Gif شفاف :

يک عکس شفاف مي تواند در صفحه به جاي اشغال کردن فضاهاي خالي وارد شود ونيز شما مي توانيد طول و عرض آن را با بکار بردن ويژگيهايي در تگ براي ايجاد ابعاد فضاي در خواستي، کنترل کنيد . براي مثال اگر بخواهيد پاراگرافي وارد کنيد بايد تگ زير را ايجاد کنيد (عکس gif همرنگ با background صفحه است):

با دادن اين مقادير پاراگراف با فاصله 15 pix از سمت چپ شروع مي شود . با همان رويه مي توانيد فضاي بين پاراگراف را با قرار دادن مقادير فوق افزايش دهيد .

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

ساختار صفحه با جداول :

طراحان وب بايدبه خوبي ساختار صفحه را درک کنند و از جداول در ساختار صفحات استفاده کنند . به طور پيش فرض تمامي موارد در HTML از طرف چپ تراز مي شوند . طراحان وب از جداول براي توزيع مندرجات کل صفحه نمايش درمرورگر استفاده مي کنند . ساختار جدول مي توانند با مندرجات پر گردندنيز مي توان براي جداول قاب قرار نداد تا کاربران متوجه وجود جدول در صفحه نگردند. CSS -Cascading Style Sheet مي تواند براي رفع جداول در ساختار HTML ايجاد شوند که متاسفانه همه مرورگرها از آن حمايت نمي کنند و فعلا تا زماني که CSS بصورت استاندارد جهانب در نيامده از جداول به عنوان استاندارد استفاده مي شود .

ساختار صفحه با استفاده از فريم ها :

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

ساختار صفحه با استفاده از تعيين موقعيت :

لايه ها يا المانهاي پشته اي ديگر بصورت عمودي در آمدند و بيشتر مرورگرها از آنها حمايت مي کنند . نا هماهنگي اصلي در لايه گذاري اين است که Netscape Navigator از تگ استفاده مي کند . در صورتيکه Internet Explorer با استانداردهاي W3C ،موقعيت ياب CSS براي تمامي المانها مطابقت مي دهد . بنابراين دو فايل آغاز گر مجزا بايد براي اطمينان از مطلوبيت از عبور پايگاه داده استفاده شود. متاسفانه خيلي از ويراستارهاي HTML به طور اتوماتيک هر 2 ورژن را بصورت کد درآوردند .

سئوالات ابتدائي :

1- مطالعات نشان مي دهد که کاربران زمان زيادي را براي بروز کردن مرورگرهاي خود صرف مي کنند. 2 عامل مهم در کاهش سرعت جابه جايي مرورگر چيست؟
2- آيا طراح سايت بايد در آزمايش کارآيي سايت خود شرکت کند؟چرا؟
3- چه نوع وظايفي بايد با هم در سئوالات آزمايش کارآيي با پرسش ها همراه باشند؟
ببخشید بخش دوم نبود