نویسنده: Russ Weakley 2004/Aguest/13

یک وب سایت استاندارد تنها یک وب سایت بدون جدول نیست

معنی استانداردهای وب می تواند برای اشخاص مختلف متفاوت باشد . برای عده ای به معنی طراحی بدون جدول 'table-free' و برای عده ای دیگر داشتن یک کد بدون خطا ( کدهای valid در HTML و یا CSS ) معنی می دهد در حالی که خیلی وسیع تر از این موارد است . سایتی که استاندارد می باشد می بایست در تمامی موارد ( HTML و XHTML و XML و CSS و XSLT و DOM و MathML و SVG و غیره ) استاندارد باشد و بهترین روش های پیاده سازی ( کد با ارزش ـ Valid و کد قابل دسترس و کد صحیح معنایی و آدرس URL های کار پسند و غیره ) را دنبال کند .
به عبارت دیگر ، یک سایت استاندارد به طور ایده آل می بایست کم حجم ، تمیز و بر اساس CSS ، دسترس پذیر ، کارامد و بهینه برای موتورهای جستجو باشد .

درباره چک لیست

این یک چک لیست است که شاید بتوان به آن مواردی اضافه کرد خیلی مهم است که بدانید که این چک لیست را حتما نباید برای همه وب سایت هایی که ساخته اید ، بکار ببرید این تنها یک راهنمای ساده است که می توانید استفاده کنید.

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

چک لیست :

1.1 ـ کیفیت کد

  • 1.آیا DocType مناسبی برای صفحه انتخاب شده است
  • 2.آیا سایت از نشانه زبان ( Character Set ) استفاده کرده است ؟
  • 3.آیا سایت در ساختار HTML با ارزش و بدون خطا است ؟
  • 4.آیا ساختار CSS سایت معتبر و بدون خطا ( Valid CSS ) است ؟
  • 5.آیا سایت از هک های CSS استفاده کرده است ؟
  • 6.آیا از کلاس ( Class ) و شناسه ( id ) غیر ضروری در سایت استفاده شده است ؟
  • 7.آیا ساختار مناسبی در کد استفاده شده است ؟
  • 8.آیا سایت دارای لینک های شکسته است ؟
  • 9.نحوه اجرا شدن صفحه در شرایط سرعت و حجم صفحات چگونه خواهد بود ؟
  • 10.آیا سایت خطای جاوا اسکریپت دارد ؟

2 ـ میزان جدایی بین محتوا و نحوه نمایش

  • 1. آیا در سایت تنها از CSS برای نحوه نمایش و ظاهر استفاده کردید به طور مثال رنگ فونت و غیره
  • 2.آیا برای نمایش تصاویر زینتی که برای زیبایی سایت است از CSS استفاده کرده اید ؟ و آیا آنها در XHTML شما دیده می شوند ؟

3 ـ دسترس پذیر بودن برای کاربران

  • 1.آیا از 'alt' برای تمام تصاویری که نیاز به توصیف دارند استفاده شده است ؟
  • 2.آیا برای سایز متون خود از واحد نسبی استفاده می کنید و یا واحد مطلق ؟
  • 3.اگر سایز فونت افزایش پیدا کند آیا خللی در ظاهر سایت ایجاد می شود?
  • 4.آیا سایت از منوهای قابل پریدن ( Skip menu ) استفاده می کند .
  • 5.آیا سایت از فرم های قابل دسترس استفاده می کند ؟
  • 6.آیا سایت از جدول های قابل دسترس استفاده می کند ؟
  • 7.آیا از رنگ کافی برای روشنایی و غلظت استفاده شده است ؟
  • 8.آیا تنها از رنگ برای نمایش اطلاعات اساسی استفاده شده است ؟
  • 9.آیا پاسخدهی منوی های افتادنی ( Drop down ) برای کاربر با تاخیر همراه است ؟ ( در حرکت کاربر تاخیر ایجاد می کند )
  • 10.آیا لینک ها حالت توصیفی دارند ؟

4 ـ دسترس پذیر بودن برای دستگاهها

  • 1.آیا ازآیا وب سایت در مرورگرهای مدرن و قدیمی به طور قابل قبول کار می کند ؟
  • 2.آیا محتوای وب سایت در حالت CSS خاموش قابل دسترس است ؟
  • 3.آیا محتوای وب سایت در حالت تصویر ( image ) خاموش قابل دسترس است ؟
  • 4.آیا وب سایت در مرورگرهای متنی مانند lynx کار می کند؟
  • 5.آیا وب سایت در زمان گرفتن پرینت خوب کار می کند ؟
  • 6.آیا وب سایت در وسایل دستی مانند موبایل خوب کار می کند ؟
  • 7. آیا سایت شما شامل جزئیات mefadate می شود ؟
  • 8.آیا سایت شما در سایز های متفاوت پنجره مرورگر خوب کار می کند ؟

5 ـ اصول کاربرد پذیری

  • 1.آیا سلسله مراتب بصری واضحی برای سایت وجود دارد ؟
  • 2.آیا تیترهای صفحه به سادگی قابل تشخیص هستند ؟
  • 3.آیا منوی سایت ساده و قابل فهم است ؟
  • 4.آیا منوی سایت دارای ثبات است ؟
  • 5.آیا سایت از زبان مناسب و پایداری استفاده کرده است ؟
  • 6.آیا سایت دارای نقشه سایت و صفحه تماس با ما است ؟ آیا دسترسی به آن ها آسان است؟
  • 7. برای سایت های بزرگ آیا نوار جستجو در نظر گرفته شده است ؟
  • 8. آیا در همه صفحات شما لینک به صفحه اول سایت ها وجود دارد ؟
  • 9.آیا لینک ها خط زیر ( under line ) دارد ؟
  • 10.آیا لینک های دیده شده به طور واضح قابل تشخیص هستند ؟

6 ـ مدیریت سایت

  • 1.آیا وب سایت صفی خطای 404 که با معنی و کمک کننده باشند و در تمامی سایت کار کند را دارد ؟
  • 2. آیا وب سایت از آدرس های ( URLS ) کاربر پسند استفاده می کند ؟
  • 3.آیا آدرس های شما بدون www هم کار می کند ؟
  • 4.آیا سایت favicon دارد ؟

1. کیفیت کد

1.1 آیا Doctype مناسبی برای صفحه انتخاب شده است ؟

Doctype که مختصر ( document type declaration ) می باشد به اعتبار سنج ورژن (X)HTML که استفاده کرده اید را اطلاع می دهد و می بایست در بالاترین نقطه در تمامی صفحات شما جای گیرد . Doctype یک جزء کلیدی است برای سازگاری صفحات و نشانه گذاری است و mark up و CSS شما بدون آن معتبر ( Valid ) نخواهد شد .
سایت خود را با doc type صحیحی معین نمایید

بیشتر

1.2 آیا سایت از نشانه زبان ( Character set ) استفاده کرده است ؟

اگر مرورگر نتواند نحوه رمز گذاری کاراکترهای صفحات وب را تشخیص دهد کاربر ممکن است متون را ناخوانا را ببیند این اطلاعات به ویژه در نگهداری و گسترش سایت های چند زبانه بسیار مهم است و اعلان نحوه رمز گذاری کاراکترها برای تمامی سندها م یبایست انجام گیرد از جمله XHTML / HTML و CSS
خودآموز : نحوه رمز گذاری و نشاندن کاراکترها در XHTML و HTML و CSS

بیشتر

1.3 آیا سایت در ساختار (X)HTML با ارزش و بدون خطاست ؟

کدهای معتبر ( valid ) سریعتر و بهتر از کدهای غیر معتبر ( invalid ) رندر و یا ترجمه می شود . مرورگرها بیشتر و بیشتر با این استانداردها هم گام می شوند . همین مورد به طور فزاینده ای باعث خواهد شد که کدهای HTML استاندارد و معتبر ( valid ) باشد .
کد معتبر ( valid ) چیست ؟

بیشتر

1.4 آیا ساختار CSS سایت معتبر و بدون خطا ( valid CSS ) است ؟

شما نیاز دارید تا عدم وجود خطا در هر دو سند (X)HTML و CSS خود مطمئن شوید چون در هر کدام اشتباه کنید یک ظاهر سر هم بندی شده ای خواهید داشت .
کمک ! CSS من کار نمی کند

بیشتر

1.5 آیا سایت از هک های CSS استفاده کرده است ؟

هک پایین ترین و بدترین انتخاب شخصی شماست از مقدار دانشی که برای یک راه حل دارید و برای بدست اوردن یک طرح خاص می بایست تلاش کنید .
هک های استاندارد ؟

بیشتر

1.6 آیا از کلاس ( class ) و شناسه ( id ) غیر ضروری در سایت استفاده شده است ؟

من متوجه شدم که توسعه دهندگان وب بیشتر سعی دارند که مهارت CSS خودشان را ارتقاء دهند در حالی که در XHTML ضعیف هستند . ساختار HTML به طور خاص تمایل دارد عاری از کلاس ها و شناسه های غیر ضروری باشد . نتیجه آن یک HTML خام و بی معنی است و یک CSS بزرگ است .
تکنیک های زبان نشانه



1.7 آیا ساختار مناسبی در ساختار کد استفاده شده است ؟

زبان نشانه گذاری صحیح و با معنا ( Semantically correct mark up ) از هر المانی برای هدف خاصی استفاده می کند . یک ساختار خوب HTML برای تمامی عامل های کاربری مانند مرورگرها بدون CSS ، مرورگرهای متنی و موتورهای جستجو و غیره با معنی باشد .
زبان نشانه صحیح و با معنی

بیشتر

1.8 آیا سایت دارای لینک های شکسته است ؟

لینک های شکسته می توانند کاربران را نا امید کنند و آن ها را به سمت بیرون از سایت هدایت کنند . همچنین باعث خواهد شد که متوترهای جستجو نوانند به صورت مناسبی سایت شما را اسکن نمایند .

بیشتر

شرایط اجرا شدن صفحه در شرایط سرعت و حجم صفحات چگونه خواهد بود ؟

من را منتظر نگذار . . . این پیغامی است که کاربران به ما می دهند . حتی در پهنای باند کم که کاربران از تحمل لود با سرعت کم بی قرارند .

بیشتر

1.10 آیا سایت خطای جاوا اسکریپتی دارد ؟

اینترنت اکسپلور اجازه راه اندازی یک خطا یاب در پنجره ای مجزا برای تشخیص باگ های جاوا اسکریپت در سایت شما را می دهد . در '' internet option '' در تب ' Advanced ' و Disable script debugging را غیر فعال نمایید .
نویسنده ( خطایابی با فایر فاکس و ابزارهای آن بسیار ساده تر است )



2. میزان جدایی ما بین محتوا و نحوه نمایش

1.2 آیا در سایت تئها از CSS برای نحوه نمایش و ظاهر استاده کرده اید به طور مثال ( رنگ فونت و غیره ) ؟

برای ظاهر و کنترل نحوه نمایش سایت باید از استایل CSS استفاده کرد

بیشتر

2.2 آیا برای نمایش تصاویر زینتی که برای زیبایی سایت است از CSS استفاده کرده اید ؟ و آیا آن ها در HTML شما دیده می شود ؟

هدف توسعه دهندگان وب سایت این است که تمامی موارد نمایش و ظاهر سایت را از کد HTML آن جدا کنند.

چرا CSS در محتوایی جدا برای نمایش استفاده می شود ؟


3. دسترس پذیری برای کاربران

3.1 آیا از ' alt ' برای تمام تصاویری که نیاز به توصیف دارند استفاده شده است ؟ برای هر عنصر غیر متنی می بایست باید یک متن جای گزین در نظر گرفته شود .
راهنمای دسترس پذیری محتوای سایت 1.1 check point



3.2 آیا برای سایز متون خود از واحد نسبی استفاده می کنید یا واحد مطلق ؟ در زبان نشانه گذاری و استایل های خود از واحد نسبی به جای واحد مطلق استفاده کنید . راهنمای دسترس پذیری محتوای سایر 3.4 check point

لینک های شکسته می توانند کاربران را نا امید کنند و آن ها را به سمت بیرون از سایت هدایت کنند . همچنین باعث خواهد شد که متوترهای جستجو نوانند به صورت مناسبی سایت شما را اسکن نمایند .

بیشتر

سایز نوشت افزایش پیدا کند آیا خللی در ظاهر سایت ایجاد می شود ؟

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



3.4 آیا سایت از منوی های قابل پریدن ( skip menu ) استفاده می کند

روشی باید فراهم شود که به کاربر اجازه دهد تا از لینک های تکراری منو صرف نظر کند ( رد شود ) .
Section 508



3.5 آیا سایت از فرم های قابل دسترس استفاده کرده است ؟

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

بیشتر

3.6 آیا سایت از جدول قابل دسترسی استفاده می کند ؟

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

بیشتر

3.7 آیا از رنگ کافی برای روشنایی و غلظت استفاده شده است ؟

مطمئن شوید که ترکیب رنگ بک گراند و پیش نما ( foreground ) کنتراست کافی را تامین می کنند حتی برای کسانی که کور رنگی دارند .
راهنمای دسترس پذیری محتوای سایت 2.2 check point

بیشتر

3.8 آیا تنها از رنگ برای نمایش اطلاعات اساسی استفاده شده است ؟

مطمئن شوید که اطلاعاتی که بوسیله رنگ انتقال داده می شود بدون رنگ هم در دسترس هستند برای مثال محتوای صفحه راهنمای دسترس پذیری محتوای وب 2.1 check point سه نوع ناکارایی رنگ داریم Deuteranope ( رنگ قرمز / سبز ) ، Protanope ( نوع دیگری از قرمز / سبز ) و Trianope ( آبی / زرد )

بیشتر

3.9 آیا پاسخدهی منوی افتادنی ( Drop down ) برای کاربر با تاخیر همراه است ؟
کاربران با مهارت حرکت کمتر در میان منو ، ممکن است منوی کشویی افتادنی (Drop down ) را بسیار سخت پیدا کنند



3.10 آیا لینک ها حالت توصیفی دارند ؟

متن لینک باید به اندازه کافی با معنی باشد تا زمانی که ان را می خواهیم کلیک کنیم متوجه شویم لینک در چه موردی است . همچنین محتوای لینک می بایست محتصر و مفید باشد .
راهنمای دسترس پذیری محتوای سایت 3.1 check point



4. دسترس پذیر بودن برای دستگاهها

4.1 آیا وب سایت در مرورگرهای مدرن و قدیمی به طور قابل قبول کار می کند ؟

قبل از شروع طرح های و لایه های CSS خود ، باید تصمیم بگیرید کدام مرورگرها را باید پشتیبانی کند و در کدام سطح انتظار پشتیبانی دارید .
راهنمای دسترس پذیری محتوای سایت 3.1 check point



4.2 آیا محتوای وب سایت در حالت CSS خاموش قابل دسترسی است ؟
بسیاری از بازدیدکنندگان شما یا با مرورگرهای CSS خاموش وب سایت را می بینند و یا مرور گرهایی که CSS ساپورت نمی کنند محتوا می بایست برای این بازدید کنندگان در دسترس باشد .


4.3 آیا محتوای وب سایت در حالت تصویر خاموش قابل دسترس است ؟

بسیاری از بازدید کنندگان سایت از جمله آن هایی که سرعت اینترنت پایینی دارند و در حالت تصویر خاموش سایت را بازدید می کنند می بایست محتوا برای ایشان قابل دسترس باشد .
راهنمای دسترس پذیری محتوای سایت 3.1 check point



4.4 آیا وب سایت در مرورگرهای متنی کار می کند ( مانند lynx )
این ترکیب تصویر خاموش و CSS خاموش است . مرورگرهای متنی ساختار خوب محتوا وابسته است .

بیشتر

4.5 آیا وب سایت در زمان گرفتن پرینت خوب کار می کند ؟

شما برای هر صفحه XHTML می تواند یک استایل برای پرینت داشته باشید بدون این که به ساختار صفحه دست بزنید .
راهنمای دسترس پذیری محتوای سایت 3.1 check point

بیشتر

4.6 آیا وب سایت در وسایل دستی مانند موبایل خوب کار می کند ؟
پشتیبانی از دستگاه های دستی مانند موبایل و انتخاب نوع مدیا بسیار سخت است . به هر حال بعضی طرح ها در دستگاههای دستی بهتر کار می کنند . پشتیبانی از دستگاههای دستی بنا به بیننده هدف بسیار مهم است .



4.7 آیا سایت شما شامل جزئیات metadate می شود ؟

metadate اطلاعات قابل فهم برای ماشین است که در وب استفاده می شود .
http://www.d.umn.edu/itss/support/Training/Online/webdesign/css.html#print


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



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



5. اصول کاربرد پذیری

1.5 آیا سلسله مراتب بصری واضحی برای سایت وجود دارد ؟

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



5.2 آیا تیترهای صفحه به سادگی قابل تشخیص هستند ؟

از المان هدر برای رساندن ساختار سند خود مطابق مشخصات سند استفاده کنید .
راهنمای دسترس پذیری محتوای سایت 3.5 check point



5.3 آیا منوی سایت ساده و قابل فهم است ؟

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



5.4 آیا منوی سایت دارای ثبات است ؟

اگر ظاهر و نحوه نمایش ثابتی برای همه صفحات سایت در نظر گرفته اید بیننده راحت تر بین صفحات حرکت می کند و اطلاعات دلخواه را پیدا می کند .
منوی راهبردی ـ Juicy studios



5.5 آیا سایت از زبان مناسب و پایداری استفاده کرده است ؟

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



5.6 آیا سایت دارای نقشه سایت و صفحه تماس با ما است ؟ آیا دسترسی به آن آسان است ؟

اکثر نقشه سایت ها در دسترسی به چند مرحله از محتوای سایت ( صفحات تو در تو ) ناتوان هستند . در تست های کاربرد پذیری اکثراً کاربر از نقشه سایت صرف نظر می کند و یا آن را پیدا نمی کند . پیچیدگی آن هم مشکلی است که نباید اتفاق بیافتد نقشه سایت باید شبیه نقشه باشد و نباید مشکلی در حرکت در آن باشد .
کاربرد پذیری نقشه سایت

بیشتر

5.7 برای سایت های بزرگ آیا نوار جستجو در نظر گرفته شده است ؟
تا زمانی که ابزار جستجو در سایت های کوچک لازم نیست بسیاری از مردم از آن در سایت های کوچک استفاده نمی کنند کاربران بیشتر از منوی راهبری سایت استفاده می کنند .



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



5.9 آیا لینک خط زیر ( underline ) دارد ؟

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



5.10 آیا لینک های دیده شده به طور واضح قابل تشخیص هستند ؟

بسیار مهم است که بدانیم کدام صفحات در دفعات گذشته در سایت دیده شده است
تغییر رنگ لینک های دیده شده



6- مدیریت سایت

6.1 آیا وب سایت صفحه خطای 404 که با معنی و کمک کننده باشد و در تمامی سایت کار کند را دارد ؟

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



6.2 آیا وب سایت از آدرس های ( URL ) کاربر پسند استفاده می کنند ؟

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

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

بیشتر

6.3 آیا آدرس های شما بدون www کار می کند ؟
باید به بازدید کنندگان این انتخاب را بدهید که آدرس سایت شما را با و بدون www تایپ کنند و اگر بدون www به سایت شما نرسند نه برای شما سودمند است و نه برای کاربرانتان .



6.4 آیا سایت favicon دارد ؟

Favicon یک تصویر کوچک با رزولوشن های متفاوتی است که نمایانگر حرفه ای بودن سایت است . favicon به وب مسترها اجازه ترویج بیشتر سایتشان را می دهد و خلق یک ظاهر سفارشی درون مرورگرهای بازدید کنندگان
favicon.com


قطعا favicon خیلی حیاتی نیست ولی به هر حال اگر نباشد ولی آدرس دهی شده باشد ممکن است یک خطای 404 در سرور اتفاق بیافتد . در مرورگرهای مانند IE زمانی که سایت بوک مارک می شود از سرور روی مرورگر می نشیند .
همان طوری که داشتن favicon می تواند خطای 404 را از بین ببرد برای فایل robots.txt هم ممکن است این اتفاق بیافتد .