آموزش CSS (فصل اول)

استایل (CSS) چیست؟

زبان HTML برای ایجاد یک سیستم کد سازی جهانی به وجود آمد تا بوسیله آن بتوان صفحات وب را بدون توجه به نوع کامپیوتر طراحی کرد. خاصیت مهم HTML قالب بندی ساختاری می‌باشد ولی متاسفانه به طراحان قابلیت کنترل در همه زوایای صفحه را نمی‌دهد. برای قالب بندی و ایجاد افکت های بیشتر از CSS استفاده می‌کنیم.
در واقع CSS این امکان را ایجاد می‌کند تا طراح بتواند چندین مشخصه در طراحی صفحه را به یکباره تعیین کند بعنوان مثال خصوصیات تمامی تگهای h1 موجود در صفحه اعم از اندازه، فونت و رنگ را مشخص نماید. و یا مشخصات ظاهری چندین صفحه را در یک فایل CSS تعیین نماید.
CSS مخفف کلمه Cascading Style Sheets میباشند.
نسخه های مختلف CSS به شرح زیر می‌باشد:

1- CSS1
2- CSS2
3- CSS3
4- CSS-P

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

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

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

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

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

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

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

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

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

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

در یک دسته بندی، فقط مکانهایی که در آنجا سایت جسارت دارد که از مدل سیاه و سفید بدون آنکه لطمه ای به کارآیی آن سایت وارد شود استفاده کند. 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 افزایش دهید کدی که برای آن به کار می برید بصورت فوق است :
< Font Size=2 >
به جای استفاده از
< Font Size=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 شفاف :

یک عکس شفاف می تواند در صفحه به جای اشغال کردن فضاهای خالی وارد شود ونیز شما می توانید طول و عرض آن را با بکار بردن ویژگیهایی در تگ < Image > برای ایجاد ابعاد فضای در خواستی، کنترل کنید . برای مثال اگر بخواهید پاراگرافی وارد کنید باید تگ زیر را ایجاد کنید (عکس gif همرنگ با background صفحه است):
< Img Src="transparent.gif" height=2 width=15" >
با دادن این مقادیر پاراگراف با فاصله 15 pix از سمت چپ شروع می شود . با همان رویه می توانید فضای بین پاراگراف را با قرار دادن مقادیر فوق افزایش دهید .
< Img Src="transparent.gif" height=20 width=2" >
عکسهای Gif می توانند در صورت نیاز در جداول برای کنترل سایز ستونها و سطرها در صورت نیاز قرار داده شوند . به خاطر داشته باشید که هدف ما کاهش بی نظمی های صفحه ، به این منظور که کاربران را قادر به مرور مطالب و اسناد و نیز انتخاب اتصال دیگر کند ، می باشد .

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

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

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

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

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

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

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

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

مقدمه :

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

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

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

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

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

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

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

سایتی نظیر سایت http://www.cnn.com/ را در نظر بگیرید . به محض ورود به سایت سریعا می توانید مرور کلی از کل سایت داشته باشید و یا به عبارت دیگر شما می توانید کل سایت را با نگاه از یک عبارت به عبارت بعدی مرور کنید و آنچه را که بخواهید خیلی سریع بدست آورید . بنابراین تمایل به دیدن مجدد سایت رادارید .سایت فوق از نمونه سایتهای موفق در جهان می باشد.

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

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

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 زیاد کاربران تصمیم به بزرگتر کردن پنجره می کنند .
سایتهای http://www.altavista.com/ و http://www.amazon.com/ و http://www.cnet.com/ مثالهای خوبی در این زمینه هستند .

رنگ

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

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

نمایش رنگ :

یک مانیتور کامپیوتر شامل هزاران المان است که پیکسل نامیده می شود . هر پیکسل فقط یک رنگ را در یک زمان نشان می دهد . هنگامی که به یک عکس نگاه می کنید شما صدها یا هزاران پیکسل می بینید که هر کدام یک رنگ ویژه دارد و ترکیب آنها باعث ایجاد تصویری می شود که شما می بینید . رنگهایی که وقتی با یکدیگر ترکیب می شوند رنگ سفید را می سازند به عنوان یک رنگ افزودنی تلقی می گردند . اصل این رنگ شامل رنگهای قرمز و سبز و آبی است که 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 به قرار زیر دنبال کنید :
< Body bgcolor=" 0,255,0 " > المانهای رنگی نقش مهمی را در اصول و نظام ارائه یک سایت دارند . سبک و روش و فرهنگ و آداب شرکتها با ارائه رنگ در سایت و چگونگی هماهنگی و ترکیب آنها با یکدیگر به تصویر کشیده می شود .

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

*تذکر فنی :

برای کامل کردن سیستم رنگهای RGB و درجات هگزا دسیمال میتوانید سایت http://www.lynda.com/hexb.html مراجعه کنیداین سایت توسط 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 برای مثال کد رنگ پیش زمینه آن اگر سبز باشد ، خواهیم داشت :
< body bgcolor="#00FF00" > :
< body bgcolor="#00FF00" >



هشدار :

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

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

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




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

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

با وجود آنکه هر مقدار از 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


لیست کامل بالا را می توانید در سایت http://www.lynda.com/hexh.html پیدا کنید .

تذکر

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

http://hotwired.lycos.com/webminkey/00/37/index.html

تمرین ) کدام ترکیب RGB توسط مرورگر هدایت می شود .
A)003399
B)1B6565
C)66FF33
D) FF6600

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

منبع : www.iritn.com

مقدمه

به دوره تکنولوژی و متدولوژی طراحی وب خوش آمدید . این دوره طراحی و صفحه آرایی را و اینکه که چگونه یک سایت را طراحی کنید را به شما می آموزدو سپس برای توسعه وپیشرفت بیشتر آن از ابزارهایی نظیر 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- سرعت تقاضای کاربران وب : چگونه صفحه خود را با این تقاضا طراحی می کنید ؟