رفتن به مطلب

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


ارسال های توصیه شده

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

 

مقدمه

به دوره تکنولوژي و متدولوژي طراحي وب خوش آمديد . اين دوره طراحي و صفحه آرايي را و اينکه که چگونه يک سايت را طراحي کنيد را به شما مي آموزدو سپس براي توسعه وپيشرفت بيشتر آن از ابزارهايي نظير Front Page 2000 و Home site Dream Weaver MX و ... استفاده مي کنيد . در طي اين دوره شما با جديدترين ابزارهاي طراحي وب نظير Flashmx و ... آشنا خواهيد شد و نيز با تکنولوژي هايي نظير دايناميک HTML و Style sheet و Java Script و اپلتهاي جاوا ، Plug in و چند رسانه اي آشنا خواهيد شد .

و نيز ابزارهاي طراحي قابل انعطاف و نيز نا سازگاريهايي که بعضي از اين ابزارها با مرورگرهاي جاري دارند را ملاحظه خواهيد کرد . (با ايجاد پروژه اي کليه مراحل گفته شده تست مي شود)

در اين درس شما اداره کردن يک سايت و نيز فرآيندهاي توسعه آن را فرا خواهيد گرفت .

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

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

هر فصل با طرح سئوالاتي به شما براي مرور بر موارد گفته شده وبراي آمادگي در امتحان CIW به شما کمک خواهد کرد .

 

برای یادگیری این دوره ی آموزشی نیاز است کاربران محترم آشنایی با مهارتهای Windows 98-XP ، اینترنت و طراحی صفحات وب داشته باشند .

 

ضمنا نیاز است سیستم شما دارای خصوصیات ذیل باشد :

 

- حداقل سیستم مورد نیاز پنتیوم III

- 64 مگا بایت Ram

- حدود 600 مگا بایت فضای آزاد

اهداف دوره

بعد از گذراندن دوره CIW مهارتهاي زير را پيدا خواهيد کرد :

1- توصيف رابطه نزديک بين تکنولوژي وب و مفاهيم طراحي

2- بيان طرح المانها و انتخاب فونتها و رنگهاي وب سايت

3- توصيف اهميت کارايي سايت براي مخاطبين و توضيح چگونگي برگذاري يک آزمون براي محاسبه کارآيي

4- توصيف اينکه چرا هدايت شدن در سايت مهم است و چگونه مرورگرها آن را کنترل مي کنند .

5- توصيف سلسله مراتب يک وب سايت و تعريف قراردهاي مشابه آن

6- توصيف عملکرد گرافيک ها در سايت شما

7- توصيف توابع و ابزارهاي عکس و انتخاب بهترين قالب گرافيکي

8- جستجوو مطالعه براي اصول طراحي چند رسانه اي و انتخاب بهترين چند رسانه براي سايت

9- توصيف فرآيند توسعه وب

10- نوشتن جملات گويا در سايت و توسعه استراتژي وب و تکنيکهايي براي هدايت از آن

11- توصيف مفهوم کاربردي بودن سايت

12- توصيف فرآيند نقشه هاي فکري و استفاده از آن در ساختار وب

13- اندازه گيري زمان ، عوامل پياده سازي سايت و محاسبه زمان Download (بارگذاري)

 

 

نمايشنامه – اساس يادگيري

 

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

اين تمرين ها براي تکامل عملکرد واقعي تمرين و کمک به شروع تفکر انتفادآميز درباره برنامه هاي عملي استفاده مي شود . به عبارت ديگر اين تمرين ها به گونه اي طراحي شدند که شما در دنياي واقعي نيز بتوانيد از آنها الهام بگيريد .

 

ماهيت وب

 

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

کاربران ميتوانند اطلاعات و محصولاتي را که در خور نيازشان ميباشد را پيدا کنند.

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

اکثراً رسانه ها تاثير گذار هستند و هدف آنها ايجاد علاقه کافي است تا اينکه که سرانجام بتواند تبادل مطلوب راانجام دهند.

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

بنابراين ايجاد اطلاعات جهت رسانه هاي گروهي به راهکارهاي متفاوت تري نسبت به ايجاد اطلاعات مربوط به اينترنت نياز دارد.

مشاهدات بي عيب اينترنت مانند ثبت رويداد بر روي مرورگر وب ،دلالت بر درخواست کاربران و واکنش سرور دارد. به عبارت ديگر انجام يک داد و ستد و تبادل مي باشد.

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

 

هدايت و توسعه وب جاري

 

پيشرفت وب از چند سال پيش شروع شد اضافه شدن چند رسانه اي هادر وب، دلالت بر پيشرفت وب دارد. اين نوع جديد از اطلاعات در حال حاضر در اينترنت قابل دسترس ميباشد. محتواي اطلاعات عبوري در اينترنت به عنوان جزء اصلي خيلي از پروژه ها و برنامه ها محسوب ميشود.

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

اينترنت دومين پيشرفت خود را بعد از ايجاد تجارت الکترونيک در تاريخچه توسعه وب انجام داد.

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

براي مثال شرکت A براي شرکت B کاغذ توليد ميکند اگر کمپاني A بخواهد به شرکت B دسترسي پيدا کند اين امر با بکارگيري شبکه داخلي شرکت امکانپذير ميباشد . بنابراين شرکت A ميداند که چه موقع شرکت B به محموله هاي ديگري نياز دارد و نيز شرکت A ميتواند نخستين قدم براي تهيه محموله قبل از درخواست از طرف شرکت B را بردارد.

 

ابزار ها و تکنولوژي

 

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

و از Dream Wearer , Front Page استفاده ميشود. در آينده ميتوانيد تشکيلات خود را به آخرين درجه پيشرفت برسانيدو همواره با زمان جلو رويد.

اين ابزارهاي قدرتمند که در صنعت نيز قابل رقابت هستند در دوره CIW ارائه خواهند شد. اين ابزارها با هم هماهنگي خاصي دارند.

 

رسانه هاي واسط

 

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

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

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

 

محاسبه مهارتهاي HTML خود

 

در اين تمرين شما مهارت HTML خود را با ايجاد يک صفحه ساده محاسبه خواهيد کرد. شايان ذکر است که مندرجاتي شما بکار ميبريد ميتواند متفاوت از مندرجات بکار برده شده در اين تمرين باشد.

 

تمرين ايجاد يک صفحه وب پايه :

 

در اين تمرين شما يک صفحه وب ساده ايجاد خواهيد کرد و توانايي HTML خود را محک ميزنيد.

1- از الگوي HTML براي ايجاد قالبهاي زير استفاده کنيد.

- Table

- Hyper Link ( استفاده از پروتکل HTTP)

- Font

- Image

در اين فصل شما با مفاهيم تکنولوژي و ابزارهاي مورد استفاده آن و مختصراً با مشکلاتي که براي بکارگيري اين تکنولوژي استفاده ميشود آشنا شديد و در نهايت مهارت HTML خود را محاسبه کرديد.

 

سئوالات :

 

1- در طراحي وب مقصود از ابزارها و تکنولوژي ها چيست؟

2- در مقايسه با رسانه هاي ديگر اينترنت توانايي سازمان دادن به اطلاعات و ارائه نيازهاي اقتصادي کاربران را دارد. مطابق با اين تعريف اينترنت جزء کدام رسانه محسوب ميشود؟

3- به طور مختصر بيان کنيد چرا طبيعت اينترنت ميتواند در مقايسه با رسانه هاي ديگر بصورت داد و ستد باشد؟

4- سه قلمرو رشد و توسعه وب در چند سال اخير چه هستند ؟

 

مهارتهايي که بعد از خواندن اين فصل پيدا خواهيد کرد

1- تعيين هويت يک قالب صفحه وب معمولي

2- تعريف ساختار المانها و کاربردشان

3- استفاده از رنگ براي انتقال فرهنگ و نوع صنعت يک شرکت

4- توصيف رنگ در قالبهاي عددي

5- انتخاب نوع قلم براي وب سايت

6- توصيف اهميت فضاي سفيد

 

قبل از شروع فصل به سئوالات زير پاسخ دهيد :

1- طبق بررسي هاي زيادي که صورت گرفته آيا اکثر کاربر ها واقعاً صفحات وب را ميخوانند؟ توضيح دهيد.

2- سئوال قبل را در نظر بگيريد بيان کنيد که چگونه عادت کردن کاربران بر خواندن کاربران بر ساختار صفحه تاثير گذار مي شود ؟

3- کدام مورد مهمتر است : مندرجات ، ساختار و يا انتشار سايت چرا ؟

4- سرعت تقاضاي کاربران وب : چگونه صفحه خود را با اين تقاضا طراحي مي کنيد ؟

 

منبع فناوري اطلاعات ايران

لینک به دیدگاه

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

 

منبع:

برای مشاهده این محتوا لطفاً ثبت نام کنید یا وارد شوید.

 

کاربران وب و نکاتي در طراحي سايت

حدس مي زنيد که چه مقدار از متن صفحه وب شما به طور واقعي توسط کاربر خوانده مي شود ؟ تمام آن ؟ بيشتر آن ؟ حقيقت آن است که کابران اغلب هيچ مقداري از آن را نمي خوانند .

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

 

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

 

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

(قابل ذکر است قواعد بازار يابي در سايتهاي تجاري متفاوت تر از دنياي واقعي مي باشد)

 

کاربران نمي خواهند که صفحات در هم و نا مربوط را ببينند و از طرفي محتويات و مندرجات سايت نيز ضروري است پس با اين وجود ساختار و انتشار آن هر دو با هم از اهميت برخوردار هستند .

معمولا کاربران سايت شما را براي اطلاعات ويژه اي که در مورد جستجو و يا خريد و ... مي خواهند بازديد مي کنند .

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

 

سايتي نظير سايت

برای مشاهده این محتوا لطفاً ثبت نام کنید یا وارد شوید.
را در نظر بگيريد . به محض ورود به سايت سريعا مي توانيد مرور کلي از کل سايت داشته باشيد و يا به عبارت ديگر شما مي توانيد کل سايت را با نگاه از يک عبارت به عبارت بعدي مرور کنيد و آنچه را که بخواهيد خيلي سريع بدست آوريد . بنابراين تمايل به ديدن مجدد سايت راداريد .سايت فوق از نمونه سايتهاي موفق در جهان مي باشد.

 

واقعيت در طراحي

 

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

 

1- بيشتر کاربران از مانيتورهاي 17 Inch يا کمتر استفاده مي کنند .

2- بيشتر کاربران با تنظيم تفکيک پذيري 480*640 کار مي کنند .

3- بيشتر کاربران داراي مودم هاي با سرعت 56k هستند .

4- اغلب کاربران مرورگرهاي ورژن 4 به پايين دارند .

5- تعداد کمي از مردم زمان زيادي را براي بارگذاري فايلها صرف مي کنند.

 

*همواره در طراحي وب نکات کلي بالا را در نظر داشته باشيد

 

 

المانهاي طرح بندي يک صفحه

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

 

موارد زير را در هنگام طراحي يک صفحه در نظر بگيريد :

 

1- Frameset اجازه مي دهد که صفحات چند گانه شما بصورت واحد ظاهر شود .

2- Margin کنترل مي کند که مطالب چگونه و با چه فاصله اي از کادر مانيتور شروع شوند.

3- Border براي Frame ها و جداول HTML استفاده مي شود.

4- رنگ ايجاد يک احساس گيرا و کلي از ساختار سايت و باعث ازدياد توانايي خواندن ميشود .

5- Space جدا کردن المانهاي صفحه

6- Navigation براي کنترل کاربران براي حرکت در سايت

7- Rule مندرجات صفحه را به قسمتهاي جداگانه و وابسته قسمت مي کند.

8- White Space باعث کم تر کردن بي نظمي المانهاي صفحه مي گردد.

9- Table توزيع المانهاي صفحه در جاهاي مختلف صفحه و شکل دادن اطلاعات در ستونهاي مخفي

10- Lists به طراح اجازه مي دهد تا اقلام را سازماندهي کنيم.

11- Paragraph گروهي از کاراکترهاي متني در صفحه مي باشد.

12- Heading level ايجاد سايزهاي گوناگون از متن و طراحي و سازماندهي آن .

13- Image مورد استفاده در ايجاد جاذبه ابعادي ، اطلاعات ، Navigation

 

تعيين کنيد که سايت شما کداميک از اين عوامل را در بر دارد و شما را در روند توسعه ياري مي دهد و اگر به اين عوامل پرداخته نشود به تدريج منابع و نيرو ها و زمان خود را از دست خواهيد داد.

 

 

طرح معمول صفحه :

 

وب سايتها از قالبهاي اصلي و پايه براي نمايش اجزاء صفحه استفاده مي کنند . شما مي توانيد اين قالبهاي معمول را از خيلي از سايتها ايده بگيريد . براي مثال المان Navigator معمولا در قسمت چپ بالاي صفحه نمايش نشان داده مي شود و رنگ اين المان اغلب کمي متفاوت تر از رنگ بقيه صفحه است همچنين المان Navigation مي تواند در پائين يک صفحه نيز قرار گيرد .

متن سياه بر روي زمينه سفيد و نيز قرار گرفتن تبليغات کمپاني در بالاترين گوشه سمت چپ صفحه نمايش نيز از قالبهاي متداول مي باشد که اغلب بکار برده مي شود .

اين قالبها و نيز قالبهاي ديگربراي تشخيص اينکه از کدام قالب بايد استفاده شود در عمل مي تواند کمک کند.

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

 

سرعت و سايز صفحات(اسکرول کردن)

 

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

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

زمان واکنش 1 ثانیه زمان واکنش 10 ثانیه

modem 2Kb 34Kb

ISDN 8Kb 150Kb

Tl 100Kb 2mb

 

 

سايز صفحه به معناي سايز تمام فايلها و المانهاي بکار برده شده در صفحه شامل فايلهاي HTML و تمامي عناصر تعبيه شده ( jpg , gif ) مي باشد .

توجه داشته باشيد که 1 ثانيه عکس العمل به کاربران اين اجازه را مي دهد که آنها حس کنند که به طور آزاد و راحت در ميان اطلاعات جابه جا مي شوند ولي زمان 10 ثانيه نيازدارد که به توجه کاربر به سايت پرداخته شود . در اواسط سال 1997 مطالعات نشان مي داد که متوسط سايز يک صفحه وب 44 کيلو بايت است يعني طبق جدول 5 برابر بيشتر از زمان معمول واکنش براي کاربراني که از ISDN استفاده مي کنند . بنابراين براي بيشتر کاربراني که از پهناي باند متوسط استفاده مي کنند سرعت بارگذاري بسيار کم خواهد بود . همچنين توجه داشته باشيد که 44 kb ، 30 درصد بيشتر از بزرگترين حد سايز براي کاربران استفاده کننده از مودم خواهد بود .

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

 

طراحي با دقت و توجه در کيفيت نمايش

 

توصيه مي شود که براي طراحي از درجه تفکيک 640*480 استفاده کنيد تا جايي که بدانيد کاربر از Resolution ديگري استفاده مي کند . با طراحي با اين Resolution اطمينان داريد که کاربران براي ديدن تمام صفحه شما از Scroll استفاده مي کنند . براي پرهيز از ايجاد اسکرول افقي صفحه را از 600 pix پهن تر نکنيد و به خاطر داشته باشيد که کاربران فقط سايت شما را مرور مي کنند و حاضر نيستند که براي ديدن تمام صفحه شما از اسکرول استفاده کنند . کيفيت استاندارد و اصلي 640*480 مي باشد که بيشتر در عمل به کار مي رود هنگامي که شما با تفکيک 640*480 طراحي مي کنيد اين عدد اثر بيشتري نسبت به درجات تفکيکهاي بالاتر دارد . شکلهاي زير يک وب سايت را در انواع Resolution ها نشان مي دهد . با وجود اينکه هنوز همه از مانيتورهاي 640*480 استفاده مي کنند اما در سالهاي اخير Resolution هاي بيشتري بوجود آمده اند و شما ممکن است که بخواهيد تکنولوژي برتر را بدون رها کردن کاربران و با سخت افزار قديمي براي آنها تامين کنيد. يک راه انجام اين عمل طراحي است که بتواند سازگاري خوبي با کاربران داشته باشد . در صورت استفاده از Resolution زياد کاربران تصميم به بزرگتر کردن پنجره مي کنند .

سايتهاي

برای مشاهده این محتوا لطفاً ثبت نام کنید یا وارد شوید.
و
برای مشاهده این محتوا لطفاً ثبت نام کنید یا وارد شوید.
و
برای مشاهده این محتوا لطفاً ثبت نام کنید یا وارد شوید.
مثالهاي خوبي در این زمینه هستند .

 

رنگ

 

المانهاي رنگي نقش مهمي را در اصول و نظام ارائه يک سايت دارند . سبک و روش و فرهنگ و آداب شرکتها با ارائه رنگ در سايت و چگونگي هماهنگي و ترکيب آنها با يکديگر به تصوير کشيده مي شود .

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

 

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

 

نمايش رنگ :

يک مانيتور کامپيوتر شامل هزاران المان است که پيکسل ناميده مي شود . هر پيکسل فقط يک رنگ را در يک زمان نشان مي دهد . هنگامي که به يک عکس نگاه مي کنيد شما صدها يا هزاران پيکسل مي بينيد که هر کدام يک رنگ ويژه دارد و ترکيب آنها باعث ايجاد تصويري مي شود که شما مي بينيد . رنگهايي که وقتي با يکديگر ترکيب مي شوند رنگ سفيد را مي سازند به عنوان يک رنگ افزودني تلقي مي گردند . اصل اين رنگ شامل رنگهاي قرمز و سبز و آبي است که RGB ناميده مي شود . مانيتور کامپوتر رنگهاي افزودني را نشان مي دهد . اضافه کردن رنگهاي بيشتري به اين ترکيب در سيستم RGB باعث جابه جايي رنگ به سمت رنگ سفيد مي شود .

 

قالبهاي رنگ :

رنگها با دو قالب عددي استاندارد شده اند :

 

1- درجات قرمز و سبز و آبي (RGB)

2- هگزا دسيمال

 

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

سيستم RGB و هگزا دسيمال يا هر دو ( با هر رنگي که در محدوده ديد و بينايي قرار دارند و با خواص گوناگون با يکديگر ترکيب مي شوند معرفي مي شوند) . قالبهاي اين رنگها توانايي نمايش 16772216 رنگ را دارد .

 

RGB :

 

مقدار RGB در مبناي 10 در رنج عددي 0 تا 255 مي باشد . در سيستم مبناي 10 از ارقام بين 0 تا 9 استفاده مي شود . وقتي رقم 1 در دسترس قرار مي گيرد مقدار از 0 به 1 افزايش مي يابد و همينطور بالا مي رود . با استفاده از قانون RGB رنگ سفيد به شرح زير تعيين مي شود :

R = 255 , G = 255 , B= 255

بنابراين مقدار RGB براي رنگ سفيد B=255 ، G=255 ، R=255 که (نمايش ماکسيمم درجه قرمز و سبز و آبي است ) مي باشد .

مقدار درجه RGB براي رنگ سبز به اينگونه است :

R = 0 , G = 255 , B= 0

بنابراين مقدار RGB براي رنگ سبز 0 و 255 مي باشد که نمايش 0% براي قرمز و آبي و بيشترين درصد براي رنگ سبز است .

شما مي توانيد رنگ سبز را با کدهاي HTML به قرار زير دنبال کنيد :

المانهاي رنگي نقش مهمي را در اصول و نظام ارائه يک سايت دارند . سبک و روش و فرهنگ و آداب شرکتها با ارائه رنگ در سايت و چگونگي هماهنگي و ترکيب آنها با يکديگر به تصوير کشيده مي شود .

 

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

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

 

*تذکر فني :

 

براي کامل کردن سيستم رنگهاي RGB و درجات هگزا دسيمال ميتوانيد سايت

برای مشاهده این محتوا لطفاً ثبت نام کنید یا وارد شوید.
مراجعه کنيداين سايت توسط Lynda Weinman از مرکز هنري Ojai Digital ايجاد شده است .

 

ارقام هگزا دسيمال :

 

درجات ارقام هگزا دسيمال دربازه بين 00 تا FF بصورت زير است :

(1,2,3,4,5,6,7,8,9,A,B,C,D,E,F)

عدد در مبناي 10 با همان مقدار به مبناي 16 تبديل شده و نمايش داده مي شود . مقدار 00 هيچ درصدي را نمايش نمي دهد و مقدار FF بيشترين درصد مقدار رنگ را نمايش مي دهد .

رنگ سفيد در مبناي 16 به اين صورت نشان داده مي شود :

Red= FF , Green = FF , Blue= FF

اين مقادير بيشترين درصد رنگهاي قرمز و سبز و آبي را نشان مي دهد .

نمايش سبز در مبناي هگزا دسيمال به قرار زير است :

Red = 00 , Green = FF , Blue = 00

اين مقادير بيشترين درصد رنگ براي رنگ سبز و هيچ درصدي را براي رنگهاي آبي و قرمز نشان نمي دهد . براي هر رنگ سبز و آبي و ... در مبناي 16 ، 2 کاراکتر اختصاص داده شده است و با توجه به اين مي باشد که اساس RGB از ارقامي مابين 0 تا 255 براي هر مقدار آبي و قرمز و سبز استفاده مي کند. نمودار فوق را ملاحظه کنيد :

Hex Code RGB Color

FF0000 255,0,0 Red

00FF00 0,255,0 Green

0000FF 0,0,255 Blue

FFFFFF 255,255,0 White

000000 0,0,0 Black

 

 

وقتي از مبناي 16 در HTML استفاده مي شود در ابتداي آن از علامت # استفاده مي شود که لازم نيست اما قسمتي از ويژگيهاي رسمي HTML محسوب مي شود . در تگ Body براي مثال کد رنگ پيش زمينه آن اگر سبز باشد ، خواهيم داشت :

:

 

 

 

هشدار :

Netscape 4 در قرار دادن " " در اطراف ويژگيها اشکال مي گيرد .هنگامي که از مقدار مبناي 16 در قسمت Style ها استفاده مي کنيد " " را برداريد .

 

ترکيبات اصلي رنگها

 

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

نمودار زير مثالهايي از ترکيبات اين رنگها و ارتباط ميان آنها است:

 

CIW2.jpg

 

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

 

مرورگر تضمين کننده رنگها :

با وجود آنکه هر مقدار از RGB و هگزا دسيمال براي يک رنگ خاص استفاده مي شود ولي مهم است که به خاطر داشته باشيد که فقط 216 رنگ با ويندوز و مکينتاش و Netscape navigator و Internet Explorer حمايت مي شوند . هر 8 بيت مانيتور هر مرورگر 256 رنگ را مي تواند به نمايش بگذارد که تا حدود 40 مورد ازاين رنگها توسط سيستم عامل استفاده مي شود . اين 216 مقدار حمايت مي شوند و بقيه رنگها شدت نورشان افزايش مي يابد .

افزايش شدت نور فرآيندي است که مرورگر يک رنگ را به نزديکترين رنگي که مرورگر قادر به حمايت از آن است تبديل مي کند . وقتي رنگي با کدهاي HTML ايجاد شود به رنگ ثابت و يکپارچه تبديل مي شود .

(اميدوار باشيد که به رنگ اصلي که شما مي خواستيد نزديک باشد ) اگر مرورگر نور رنگي که در يک تصوير نشان داده مي شود رابا ترکيب 2 رنگي که نزديک به يکي از آنهاست زياد کندتوسط مرورگر حمايت نخواهد شد و بصورت لکه نشان داده مي شود .

جدول 3-2 سيستمي از مقادير RGB و هگزا دسيمال را که بدون مشکل در مرورگرهاي متعدد و بر روي سيستم هاي متعدد ترجمه خواهد شد را نشان مي دهد . ( اگر مقادير ديگري به غير از اينها استفاده شود مرورگر نور آن را به نزديکترين مقدار تخميني افزايش مي دهد .

RGB HEX

0 00

51 33

102 66

153 99

204 CC

255 FF

 

 

هر کدام از اين مقادير مطابق با مقدار واقعي است . براي مثال استفاده از مقدار 51 در سيستم RGB درست مانند استفاده از مقدار 33 در سيستم هگزا دسيمال است . به عبارت ديگر مقدار RGB (201 ، 153 ، 51( معادل با مقادير #3399cc در هگزا دسيمال است.

مرورگر ضامن هر ترکيبي از اين مقادير است و بدون تناقض و مشکل در پايگاه داده ها مرورگر ترجمه مي شوند .

ترکيبات هر کدام از رنگهاي قرمز و سبز و آبي شدت رنگي که بايد نمايش داده شود را محاسبه مي کند . جدول 4-2 در صد شدت رنگهايي که توسط مرورگر از کمتر به بيشتر حمايت مي شوند را نشان مي دهد .

Browser – Safe Color Intensities

 

RGB Intensity in percentage Hex

0 0% 00

51 20% 33

102 40% 66

153 60% 99

204 80% cc

255 100% ff

 

 

ليست کامل بالا را مي توانيد در سايت

برای مشاهده این محتوا لطفاً ثبت نام کنید یا وارد شوید.
پيدا کنيد .

 

تذکر

 

مشکلاتي در ترجمه رنگ براي مانيتورهاي 16 bit وجود دارد . به دلايل رياضي 216 رنگي که در مرورگرها حمايت مي شود در جدول رنگ اين کامپيوترها نشان داده مي شود و مرورگرها با استفاده از رنگهاي ديگري که به آن رنگها نزديک است اين جابجايي را براي نمايش رنگ و به طور دقيق انجام مي دهند . اما مرورگرها جابجايي رنگ را به طرق مختلف ( منوط به اينکه آياآن رنگ در يک عکس ارائه مي شود يا توسط HTML ايجاد مي شود ) انجام مي دهند . براي بحث در مورد جزئيات بيشتر به آدرس زير مراجعه کنيد :

 

برای مشاهده این محتوا لطفاً ثبت نام کنید یا وارد شوید.

 

تمرين ) کدام ترکيب RGB توسط مرورگر هدايت مي شود .

A)003399

B)1B6565

C)66FF33

D) FF6600

لینک به دیدگاه

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

 

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

 

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

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

 

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

 

*تذکر فني :

 

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

 

برای مشاهده این محتوا لطفاً ثبت نام کنید یا وارد شوید.

 

گذارهاي رنگ :

 

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

 

قلم ها

نظر به اينکه در ايجاد و انتشار وب ساختار آن نيز مانند ديگرتکنولوژيهاي آن به طور مداوم تغيير مي کنند ، دو فونت معمول وجود دارند که در اينترنت از آنها به کرات استفاده مي شود . اولين آن 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 در سايت

برای مشاهده این محتوا لطفاً ثبت نام کنید یا وارد شوید.
اشکال کاراکترهايي که در صفحات کاربرد دارند وجود دارد و آنها در يک فايل فشرده (PFR) ذخيره شده اند .

PFR - Portable Font Resource

مي توانيد فايل PFR را به عنوان يک مرجع براي صفحات HTML و اسناد Style sheet خود قرار دهيد . وقتي که صفحه توسط مرورگري مشاهده شد که از اين فايل پشتيباني مي کرد مرورگر فايل PFR را مي خواند و کاراکترها را دوباره ايجاد مي کند . PFR قادر است که کاراکترها را در اسناد اصلي براي همراهي اسناد در هر جايي به کار ببرد . فونتهاي ميکروسافت :

 

فونتهاي وب اوليه ميکروسافت Open Type ناميده مي شوند سايت

برای مشاهده این محتوا لطفاً ثبت نام کنید یا وارد شوید.
تلاش مشترکي بين ميکروسافت و 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 ورژن را بصورت کد درآوردند .

 

 

منبع :

برای مشاهده این محتوا لطفاً ثبت نام کنید یا وارد شوید.

لینک به دیدگاه

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

 

منبع :

برای مشاهده این محتوا لطفاً ثبت نام کنید یا وارد شوید.

 

اهميت کارآيي مخاطبين (كاربران)

يک طراح وب بايد از علم مخاطبين خودهمراه با navigation مطلع باشد. دانستن حساسيت هاي مخاطبين عامل موفقيت سايت است براي مثال اگر شما براي کاربراني که سيستم هاي قديمي دارند سايت طراحي مي کنيد و از چند رسانه اي هاي جديد استفاده مي کنيد ، مخاطبين خود را درک نکرديد . درک مخاطبين منوط به آموختن درباره جغرافياي افراد و سن ، تحصيلات ، موقعيت، درآمدمي باشد، بعلاوه شما نيازمند آن هستيد که درباره تکنولوژي که اين قشر از کاربران در سيستم هاي خود استفاده مي کنند بدانيد و نيز در نظر داشته باشيد که اين اطلاعات شامل فاکتورهايي مثل سرعت ، ارتباطات ، مرورگرهاي با ورژنهاي مختلف و Plug-ins هاي در دسترس مي باشد . هنگامي که شما اين فاکتورها را دانستيدو درک کرديد بهترين نوع حمايت را از کاربران خود را خواهيد داشت .

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

 

کيفيت مندرجات : کيفيت منرجات ارائه شده در يک سايت ارزش محصولات سايت را ارائه مي دهد .

 

● Navigation آسان و کاربردي: کاربران بايد بتوانند خيلي راحت و آسان و با کوشش کم بوسيله Navigation سايت را بپيمايند و الا به سايت ديگري خواهند رفت .

 

●اطلاعات ساختاري : توجه نکردن به ساختارسايت باعث کم کردن کيفيت مندرجات سايت مي شود و تاثير مطلوبي بر روي کاربر ندارد و اين نکته بدان معني است که اطلاعات سايت بايد در ساختارهاي منطقي سازماندهي شوند .

 

● قابليت جستجو : همه کاربران در مورد استفاده از يک موتور جستجو شبيه به هم هستند . بنابراين توانايي ايجاد يک موتور جستجو گر بازيابي و هويت مندرجات شما را فراهم مي کند .

 

 

تکنولوژي نرم افزار

قبل از آزمايش :

اولين مرحله از آزمايش کارآيي توسعه سايت مربوط به نقطه پاياني آن يعني محصولات مي باشد . يک آزمايش کارآيي نمي تواند ارزيابي دقيقي را ايجاد کند . چه کسي بايد اين آزمايش را انجام دهد ؟

اين آزمايش مي تواند با حداقل 5 الي 6 نفر شروع شود آزمايش سايت با اعضاء تيمهاي طراحي ديگر غير منطقي بنظر مي رسد . بعلاوه موضوع تست بايد براي کاربران واقعي سايت طرح گردد .براي نمونه شما نبايد سايت مربوط به تجارت سهام را با گروه سني جوانان تست کنيد و يا نبايد فقط خود را محدود به دلالان سهام کنيد . ولي يک تست خوب مي تواند شامل همه گروهها باشد . مثلا در اين مثال شما نبايد آزمايش خود رابروي کساني که از تجارت کم مي دانند يا اصلاً تا بحال تجارت انجام نداده اند مطرح کنيد.

 

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

 

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

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

 

سرعتي که کاربران با آن مرورگرهاي خود را به روز مي کنند ، به طور مسلم با ازدياد کاربران بر روي خط اينترنت کاهش مي يابد . مطالعات نشان مي دهد که سرعتي که کاربران براي به روز کردن مرورگر از ورژن 3 به ورژن 4 صرف مي کنند بيشتر از بروز کردن مرورگر از ورژن 2 به 3 مي باشد . بعضي از فاکتورهاي زير در جابجايي آرام مرورگرها لحاظ مي شود . بستر کاربران به واسطه کاربران تکنيکي زبر دستي که به لحاظ خودشان به اينترنت علاقه مند هستند رشد زيادي داشته است . بيشتر کاربران امروزي به جاي توجه به نرم افزار و تکنولوژي توجه خاصي به مندرجات سايت دارند . بنابراين براي بروز کردن مرورگر خود تمايلي نشان نمخواهند داد.

 

● تعداد زيادي از کاربران جديد نمي دانند که چگونه بايد مرورگر خود را به روز کنند . بنابراين کار خود را با مرورگري که دارند ادامه مي دهند . در قبل اکثرا کاربران اينترنت استاد و خبره بودند ولي امروزه بيشتر کاربران متخصص نيستند و توانايي کمي در بارگذاري ، نصب و تنظيمات نرم افزار دارند .

 

● در باب اضافه کردن ويژگيها و يا توسعه آزمايش کارآيي و بروز رساني، مرورگرهاي اخير اجبار کمتري نسبت به قبل دارند . مرورگرهاي اوليه مقدماتي بودند . توسعه هاي نسبي که از يک مرورگربه مرورگر بعدي منتقل مي شود نسبتا قابل توجه بوده و براي بروزرساني به نفع کاربرهاي قديمي مي باشد.

 

● اندازه زمان بارگذاري و بروز رساني سريع با استفاده از پهناي باند در دسترس توسعه يافته است بنابراين بروز رساني به خدمات اتصالي پر هزينه تري يا زمان بيشتري احتياج دارد .

مطابق با سايت

برای مشاهده این محتوا لطفاً ثبت نام کنید یا وارد شوید.
Internet Explorer ورژن 4 در بسياري از موارد به عنوان مرورگر از Ayvest استفاده شده است.

 

قابليت آزمايش :

 

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

کارايي سايت مي تواند با کاربراني که ديد و شناختي از سايت ندارند حساب شود. . مديريت يک آزمايش کارآيي با داشتن يک ديد علمي از سايت ايجاد مي شود .

 

 

وظايف کارآيي

در هنگام اجراي آزمايش اعضاء بايد براي انجام وظايف واقعي از يکديگر سئوال کنند .

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

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

 

نتايج :

بعد از اتمام آزمايش مصاحبه اي با شرکت کنندگان داشته باشيد . بايد اغلب به آنها در بيان کردن مواردي که از ياد بردند کمک کنيد آنها ممکن است فرصت کافي براي نوشتن نيز نداشته باشند . بايد سئوالات زير را از آنها بپرسيد :

1- احساسات اوليه شما بعد از ديدن سايت چه بود ؟

2- عکسهاي سايت چه نوع شرکتي را براي شما به تصوير مي کشد ؟

3- آيا طرح اصلي ساختار سايت را درک کرديد ؟

4- عناصر و المانهاي عمده سايت را به ياد داريد ؟

 

درخواست نتايج :

 

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

 

تمرين محاسبه کارآيي يک وب سايت :

 

به سايت

برای مشاهده این محتوا لطفاً ثبت نام کنید یا وارد شوید.
برويد و داخل سايت را بپيمائيد و آسان و در مورد گردش در آن و نحوه ارايه محصولات نظر خود را بيان کنيد.

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

 

2- به سايت

برای مشاهده این محتوا لطفاً ثبت نام کنید یا وارد شوید.
و در ميان سايت پيمايش کنيد و سعي کنيد که آيتمهاي ويژه آن را پيدا کنيد ( اسم – سايز – رنگ و به جلو )

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

 

3- وارد سايت

برای مشاهده این محتوا لطفاً ثبت نام کنید یا وارد شوید.
شويد و در آن سايت پيمايش کنيد و سعي کنيد که مناطق ويژه مورد علاقه را پيدا کنيد .

سايت Yankee بهترين مثال از يک سايت گيرا مي باشد . اتصالات Navigation در بالاي صفحه و بصورت واضح جايگيري شده است و کاربران فرصت پيمودن را با انتخاب موارد Navigation دارند . اتصال به سايتهاي وابسته بوسيله تصاوير سمت چپ امکانپذير است . اين سايت همچنين داراي امکانات Flash براي مرورگرهايي که از آنها حمايت مي کنند نيز هست و نيز اين سايت تجهيزات لازم براي کاربراني که Plugins ندارند را مهيا مي کند .

 

Navigation مفاهيم

اهداف :

 

1- توصيف اهميت Navigation

2- شرح اينکه چگونه مرورگر Navigation را کنترل مي کند .

3- توصيف ساختار سايت

4- تعريف قراردادهاي مشابه

5- جستجوو کاوش براي يک طرح Navigation

 

سئوالات قبل از شروع فصل :

 

1- چرا يک طراح وب بايد در سايت Navigation اضافه کند؟

2- هدف از نوار ابزار در مرورگر چيست ؟

3- هدف از نقشه سايت چيست ؟

4- URL مخفف چه کلماتي است ؟

 

مقدمه :

 

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

 

مهم است Navigation چرا

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

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

بدون برنامه ريزي هيچگاه به يک پيمايش درست در سايت نخواهيد رسيد .

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

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

 

مرورگرها و Navigation :

 

بيشتر معماري مرورگرهاي وب با عوامل زير توسعه داده مي شود .

 

●دسترسي به لايه هاي مرورگر وب : شامل پروتکلهايي براي ارتباط با سايتهاي دور، تنظيم http تا انواع گوناگوني از پروتکلهاي سري مثل SSL

 

● لايه هاي Navigation : کاربراني که در سايت بودند را نگه مي دارد و به آنها کمک مي کند که کجا بروند و مي تواند شامل سيستمي باشد که نشان مي دهد از کدام سرويس کاربران بازديد کردند .

 

● نمايش لايه ها : پنجره هاي مرورگر که صفحات درخواست شده کاربران را نشان مي دهند .

 

هر مرورگر اجزاء منحصر به فردي دارد که در پيمودن سايت به کاربران کمک مي کند . ولي اکثر مرورگرها در موارد زير با هم اشتراک دارند .

ابزار برگشت به عقب Tool Bar Back Button

ابزار برگشت به جلو Tool Bar Forward Button

ميدان آدرس URL Address Field- Uniforme Resource Location

تاريخچه مرورگر Browser History

علاقه منديهاBookmarks or Favorites

نوار وضعيت status Bar

رنگي کردن ابر اتصالات Color Hyper Link

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

- بقيه تغييرات رنگ اتصالات پيش فرض ممکن است کاربر را دچار سردرگمي در ارتباط با جايي که در آن قرار دارند بکند . بعلاوه اين المانها براي کمک به کاربر طراحي شده است . بنابراين بايد نسبت به Navigation از اهميت دوم برخوردار باشد . کاربر نبايد مجبور به استفاده از کليد Back باشد زيرا ممکن است راه خود را گم کند .

 

Navigation اوليه و ثانويه

Navigation به طور عادي به 2 نوع مقدماتي و ثانويه رده بندي شده است . Navigation مقدماتي شامل المانهاي Navigationاست که در بيشتر مکانهاي سايت در دسترس هستند.

المانهاي Navigation ثانوي : که به کاربر اجازه مي دهد تا در مکانهاي ويژه گردش کنند .

براي مثال خيلي از سايتها صفحاتي دارند که اطلاعاتي در مورد يک شرکت راارائه مي دهند .

اين Navigation هاي نوع دوم ممکن است اتصال درباره ما ( About Us) باشد . هنگامي که کاربر به صفحه About us ( درباره ما ) مي رسد ممکن است در اينجا اتصال ديگري وجود داشته باشد . براي مثال ممکن است در آنجا اتصال براي اطلاعات سرمايه گذاري ، مکانهاي ديگر و مطبوعات آزاد و ... باشد . اين اتصالات جزء المانهاي Navigation ثانوي هستند . زيرا آنها مربوط به صفحه درباره ما ( About Us ) هستند نه مربوط به صفحات ديگر سايت و بنابراين اين اتصالات نمي توانند در نواحي ديگر سايت پيدا شوند .

 

سلسله مراتب Navigation :

 

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

 

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

 

اين صفحات بصورت خطي نيستند و شاخه شاخه مي باشند و باحجمهاي متفاوت رشد کرده و وابسته به مفاهيمي هستند که هر شاخه را هدايت مي کند .اين ساختار به عنوان ساختار اطلاعات سايت شناخته شده است .

 

آگاهي از موقعيت :

 

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

 

عنوان - سر فصل

 

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

 

رنگها :

 

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

 

تصاوير :

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

 

Cooki :

علائمي مثل خطوط اشاره بر مسير (Navigation ) مي توانند شما را در رسيدن به موقعيت جاري کمک کنند که اين علامت براي حرکت کاربران در صفحات چند گانه مفيد است .

 

نقشه سايت :

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

 

عمل Navigation ، نمادهاي تصويري و نظارتها

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

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

آيکونها خيلي عمومي و عامه پسند هستند و بيشتر مردم به آنها آشنا هستند . آيکونها 2 نوع دارند :

برچسب دار ، بدون بر چسب ؛

اگر لازم باشد که کاربران حدس بزنند که آيکون آنها را به کجا هدايت مي کند اين آيکون بايد برچسب داشته باشند .

- بقيه اجزاء متداول Navigation به قرار زير است :

1- کليدها

2- نقشه هاي تصويري و نقاط اشاره گر ماوس

3- بردارها

4- جداول

5- جداول Navigation و منوها

6- منو باز شونده

 

 

منبع فناوري اطلاعات ايران

لینک به دیدگاه

به گفتگو بپیوندید

هم اکنون می توانید مطلب خود را ارسال نمایید و بعداً ثبت نام کنید. اگر حساب کاربری دارید، برای ارسال با حساب کاربری خود اکنون وارد شوید .

مهمان
ارسال پاسخ به این موضوع ...

×   شما در حال چسباندن محتوایی با قالب بندی هستید.   حذف قالب بندی

  تنها استفاده از 75 اموجی مجاز می باشد.

×   لینک شما به صورت اتوماتیک جای گذاری شد.   نمایش به صورت لینک

×   محتوای قبلی شما بازگردانی شد.   پاک کردن محتوای ویرایشگر

×   شما مستقیما نمی توانید تصویر خود را قرار دهید. یا آن را اینجا بارگذاری کنید یا از یک URL قرار دهید.

×
×
  • اضافه کردن...