طراحی وب – همیرضا

بازی خطوط و یک مجموعهٔ دیدنی

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

خالق این بازی چیز مهمتری هم درست کرده: او یک کتابخانهٔ جاوا اسکریپت برای آسان کردن کار با عناصر گرافیکی برداری ساخته که از فناوریهایی همچون SVG و VML استفاده می‌کند. مهم نیست که برنامه‌نویس وب باشید یا نه، به نظرم اگر سری به سایت این کتابخانه بزنید گالری نمونه‌کارهای قابل انجام با این کتابخانه جذبتان خواهد کرد. به اینجا بروید و روی نمونه‌ها یکی یکی کلیک کنید.

کمیک بلاگ

وبلاگهایی که به جای نوشته در آنها کاریکاتور یا کمیک می‌گذارند این روزها کم نیستند. نمونه‌های فارسیش را هم احتمالاً دیده‌اید مثل هفت یا آقای اوف.

یک نمونهٔ جالب (انگلیسی) از این نوع را چند روز پیش پیدا کردم که به نظرم اگر به اینجور وبلاگها علاقه دارید بد نیست سری به آن بزنید: The Oatmeal. از آنجا که صاحبش -گویا- طراح وب است، مطالبش کم و بیش مزهٔ کامپیوتر و وب می‌دهد. مثلاً این کمیک را با عنوان «چطور می‌شود که یک پروژهٔ طراحی وب، مستقیماً به ته چاه ویل سقوط می‌کند؟» ببینید. کمیکهایی با موضوعات دیگر هم دارد مثل این با عنوان «پانزده نکته دربارهٔ قهوه». اگر فرصت سر زدن به این کمیک‌بلاگ را پیدا کردید به نظرم این کمیک را در مورد خدمات پس از فروش شرکتها حتماً ببینید.

لیستهای مرتب با اعداد فارسی

تگ ol (لیست مرتب) در html در CSS ویرایش ۲ توانایی نمایش اعداد به صورت فارسی را ندارد (از اعداد لاتین، رومی و ارمنی(!) پشتیبانی می‌کند اما اعداد را به صورت عربی یا فارسی نمی‌تواند نشان دهد). استایلهای انواع لیستها را در این استاندارد اینجا می‌توانید ببینید. در استاندارد جدیدتر گویا قرار است پشتیبانی از شکل اعداد فارسی هم اضافه شود.

چند وقتی است استقبالهای شاعران را از هم (حافظ از سعدی، حافظ از سلمان، سلمان ساوجی از سعدی و …) را با توجه به میزان مشابهت کلمات ابیات و همینطور با توجه به وزن و قافیهٔ اشعار استخراج کرده‌ام و در گنجور در دسترس قرار داده‌ام. دیروز به نظرم رسید بد نیست این فهرستها را با کمک تگ ol شماره‌گذاری کنم. اما با توجه به نکته‌ای که در پاراگراف قبل گفتم امکان نمایش درست اعداد در متن فارسی وجود نداشت. جستجویی کردم و به این صفحه رسیدم. نویسندهٔ مطلب به کمک جاوا اسکریپت مشکل را حل کرده. با کمک اسکریپت او، اسکریپت ساده‌ای نوشتم که امکان نمایش اعداد لیستهای مرتب را به صورت فارسی در اختیار می‌گذارد:

ادامه خواندن “لیستهای مرتب با اعداد فارسی”

بسم الله الرحمن الرحیم …

می‌گوید:

«بسم الله الرحمن الرحیم»

هست کلید ِ در ِ گنج ِ حکیم!

این بیت اول مخزن الاسرار نظامی است.

جالب است بدانیم که عبارت «بسم الله الرحمن الرحیم» طبق قواعد عروض (=وزن شعر) فارسی یک جمله‌ی کاملاً موزون است! بر اساس قواعد وزن شعر فارسی (که با طبیعت بیان فارسی سازگاری کامل دارد) یک شاعر می‌تواند در جایی که باید دو حرکت کوتاهِ منتهی به یک هجای بلند به کار ببرد، دو هجای بلند متولی را جایگزین کند. مثلاً می‌تواند به جای «بــِــخـــَـــر َد» کلمه‌ی «بـــِــــخــْـــرَد» را به کار ببرد (در این مورد قبلاً نوشته‌ام). حالا در این جا نظامی از این قاعده بهره گرفته و این آیه‌ی قرآن را بدون نیاز به تغییر و جایگزینی کلمات، در داخل شعر خودش جا داده (وزن این شعر هست : «مفتعلن مفتعلن فاعلن» که طبق این قاعده به جای هر کدام از «مفتَعِلُن ها» می‌شود گذاشت «مفعولن» و وزن «بسم الله الرحمن الرحیم» را به دست آورد یعنی «مفعولن مفعلون فاعلن»).

البته احتمالاً موزون بودن عبارت «بسم الله الرحمن الرحیم» در بیت فوق، خیلی به نظر طبیعی جلوه نمی‌کند و دلیل آن هم این است که فرمولی که در بالا به آن اشاره کردم، برای موزون به نظر رسیدن این عبارت، باید دو بار به آن اعمال می‌شود و خوب جای آن هم در ابتدای عبارت است که خوب «سکته» را ملموس می‌کند. اما در خیلی از شعرها می‌بینیم که این فرمول بدون این که خواننده متوجه بشود بر روی وزن عبارات اعمال می‌شود. اصلاً بر همین اساس است که «رباعی» دارای «دوازده» وزن کاملاً همتراز است و در خیلی از رباعیها این تبدیلها چندین بار روی وزن رباعی اعمال می‌شود.

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

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

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

خلاصه به جهت استفاده‌ی برادران و خواهران اهل اس.کیو.ال، نمونه‌ای از دستوراتی را که مرا در این راه یاری کردند، -بدون توضیح اضافی- در اینجا یادآور می‌شوم به شرط آن که سرورش مای اس.کیو.ال باشد و جدولهایش هم جدولهای وردپرس 😉 (منتش را سر شما گذاشتم ولی واقعیتش برای استفاده‌ی بعدی خودم اینجا می‌آورمشان، آخر من هر چیزی را که اینجا می‌نویسم، بعداً خیلی راحت به یادش می‌آورم و دوباره پیدایش می‌کنم!):
[code lang=”sql”]
UPDATE wp_posts SET post_name=CONCAT(‘sh’,SUBSTRING( post_title, 8, 10 ))
WHERE (post_type = “post”)
AND
(ID IN (
SELECT post_id
FROM wp_post2cat
WHERE category_id =23
)
);
UPDATE wp_posts SET post_title=REPLACE(post_title, “dlths”, “”)
WHERE (post_type = “post”)
AND
(ID IN (
SELECT post_id
FROM wp_post2cat
WHERE category_id =23
)
);
UPDATE wp_posts SET post_author =7 WHERE (
post_type = “post”
) AND (
ID IN (
SELECT post_id
FROM wp_post2cat
WHERE category_id =23
)
);
[/code]

البته در جنگولک بازیهای مربوط به قیافه به یک مشکل عجیب برخوردم و آن این که فهمیدم اینترنت اکسپلورر برای عنصر select (همان کمبوباکس یا لیست بازشوی خودمان) از خاصیت border پشتیبانی نمی‌کند و راه حل سرراست هم ندارد (این هم سندش)! به نظرم رسید بروم و به جای کمبوباکس (برای محدود کردن نتایج جستجو روی شاعر خاص) از یک لیست نامرتب (ul) استفاده کنم [مثل این] و بعد نتایج انتخاب کاربران را با جاوااسکریپت به یک عنصر مخفی select انتقال بدهم. اما خوب! حوصله‌اش را نداشتم 😉 . خلاصه اگر «کاربران محترم اینترنت اکسپلورر» جعبه‌ی بازشوی انتخاب شاعر برای جستجو در اشعار را در این صفحه به شکل فجیعی زشت و نامتناسب مشاهده می‌فرمایند، فرستنده را ملامت نکنند که ایراد از گیرنده است! اگر برایشان مقدور است گیرنده‌ی معقول‌تری ابتیاع فرمایند!

جفری زلدمن

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

جفری زلدمن

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

نمونه ای از ناسازگاری با مرورگرها

در جریان جنگ مرورگرها مشاهده‌ی سایتهای کاملاً ناسازگار با یک مرورگر معمول بود.

داستان زلدمن از جایی شروع شد که او – پس از پشت سر گذاشتن سوابق کاریی همچون گزارشگری برای روزنامه‌ها از جمله روزنامه‌ی معروف واشنگتن پست – در یک شرکت تبلیغاتی به عنوان کارگردان هنری مشغول به کار شد. در سال ۱۹۹۵ و همزمان با جریان جنگ مرورگرها یک مشتری به او مراجعه کرد و از او خواست تا برایش یک سایت اینترنتی طراحی کند. این پروژه به تأسیس شرکت جدیدی از سوی زلدمن انجامید که هپی کاگ نام گرفت. زلدمن در جریان فعالیت شغلی جدیدش متوجه بحران ناسازگاری سایتها با مرورگرهای مختلف شد.

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

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

در سال ۱۹۹۸ زلدمن و همفکرانش پروژه‌ی استانداردهای وب (WaSP) را راه‌اندازی کردند: ائتلافی از طراحان و برنامه‌نویسان وب که تلاش می‌کردند عرضه‌کنندگان مرورگرهای وب (به طور عمده مایکروسافت و نت‌اسکیپ) را وادار کنند تا برای جلوگیری از افزایش هزینه‌های طراحی وب، مرورگرهایشان را با استانداردهای طراحی وب سازگار کنند. پروژه‌ای که سرانجام در اوایل سال ۲۰۰۰ به ثمر نشست و عرضه‌کنندگان عمده‌ی مرورگرها را با خود همراه کرد. در این هنگام زلدمن آماده بود تا به فعالیتهای سابقش برگردد و انرژیش را روی کارهای طراحیش بگذارد. اما در همین هنگام متوجه شد که گروه دیگری وجود دارند که باید مزایای استانداردهای طراحی وب برای آنها جا بیفتند. این گروه خود طراحان وب بودند! مثلاً بعضی از طراحان وب تصور می‌کردند که استانداردهای طراحی وب با حذف هزینه‌هایی که آنها بابت سازگار کردن سایتها با مرورگرهای متفاوت از مشتریان خود می‌گرفتند در واقع باعث ضرر مالی آنها می‌شود! از این رو این دسته از طراحان وب به رعایت این استانداردها چندان راغب نبودند. او از این پس تلاش کرد تا طراحان را راجع به مزایای رعایت این استانداردها برای آنها مطلع سازد و آنها را نیز به تولید سایتهای سازگار با استانداردهای طراحی وب وادارد.

زلدمن نویسنده‌ی توانمندی است. او توانایی خاصی در توضیح مسائل فنی برای افراد غیرفنی دارد. به عنوان نمونه ببینید او چگونه و با چه زبان همه‌کس فهمی ضرورت حذف ناسازگاری بین مرورگرها را روشن می‌کند:

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

امروزه تعداد زیادی از سایتها با استانداردهای طراحی وب سازگار شده‌اند (اینجا را ببینید) و تشکلهای استانداردهای وب به کار خودشان ادامه می‌دهند. اما زلدمن فعالیت چندانی در این زمینه ندارد. او این روزها بیشتر وقت خود را برای مشتریان سرشناس شرکتش -شرکتهای همچون برادران وارنر، مجله‌ی عصر تبلیغات و …- صرف می‌کند.

به عنوان نکات پایانی درباره‌ی زلدمن بد نیست بدانید که او از اولین کسانی بوده که یک سایت شخصی برای خودش راه‌اندازی کرده‌اند (سال ۱۹۹۵، منبع). ضمناً او در یک دوره از زندگیش یک معتاد الکلی بوده تا این که در سال ۱۹۹۳ توانسته این اعتیاد را به طور کامل کنار بگذارد (منبع).

غولهای نرم‌افزاری و استانداردهای طراحی وب

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

چیزی که در طراحی جدید سایت وین‌امپ توجهم را جلب کرد علاوه بر سبکی صفحات به نسبت نگارشهای قبلی آن و استفاده‌ی مناسب از جاواسکریپت و آژاکس در آنها، طراحی ساده، زیبا و در عین حال کاملاً مطابق با استانداردهای طراحی وب آن بود (چک کنید):

وین‌امپ هم‌اکنون تحت مالکیت شرکت AOL است و متعلقات آن (نرم‌افزار، سایت، جامعه‌ی کاربران و …) تحت نظارت این شرکت اداره می‌شود. چیزی که به نظرم جالب آمد رویکرد شرکتهای بزرگ درگیر فناوری اطلاعات به پیروی از استانداردهای وب است. این که غولهای نرم‌افزاری دنیا به استانداردهای وب اهمیت چندانی نمی‌دهند همواره یکی از دغدغه‌های مدافعان این استانداردها بوده است (برای نمونه اینجا را ببینید). اما این سایت و نمونه‌های دیگر نشان دهنده‌ی آن هستند که این روند در حال تغییر است. چند لحظه پیش چک کردم: سایتهای اصلی غولهای نرم‌افزاری آی.بی.ام، ناول کاملاً با استانداردهای W3C همخوان هستند (چک کنید: ناول و آی.بی.ام). سایتهای مایکروسافت و اپل هر چند عاری از خطا نیستند ولی شمای کلی و تعداد کم موارد ناسازگاری نشان دهنده‌ی حرکت به سمت استانداردها از سوی این شرکتهاست و پرتال ام.اس.ان که یکی از متعلقات مایکروسافت است کاملاً با استانداردهای وب تطابق دارد.

رعایت استانداردهای وب در طراحی سایتهای اینترنتی باعث کاهش زمان و هزینه‌ی نگهداری و خطایابی آنها می‌شود و مطمئناً این بهینه‌سازیها و بهره‌وریهای به وجود آمده از این راه، نظر کارشناسان شاغل در غولهای نرم‌افزاری را نیز به خود جلب می‌کند.

استانداردهای طراحی وب (۳)

اولین قسمت این سری را اینجا و قسمت دوم آن را اینجا بخوانید.

(۱)

دوست ندارم گمراهتان کنم! باید این واقعیت را بدانید که رعایت استانداردهای وب تضمین کننده‌ی نمایش یکسان صفحات وب در مرورگرهای مختلف نیست. در واقع میزان پشتیبانی مرورگرهای معمول از استانداردهای طراحی وب متفاوت است. به همین دلیل ممکن است صفحات وبی که از نظر ابزارهای تأیید کننده‌ی استاندارد کنسرسیوم وب (این و این) بدون ایراد تشخیص داده شده‌اند در مرورگری مثل اینترنت اکسپلورر با اشکال نمایش داده شوند.

اولاً چرا اینطور است؟ مگر قرار نبوده تولیدکنندگان مرورگرهای وب استانداردهای طراحی وب را رعایت کنند؟ و ثانیاً با این وجود سایتهای سازگار با استاندارد وب چه برتریی بر سایتهای ناسازگار دارند؟

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

علی‌الحساب این تذکر را -که سازگاری کامل با استاندارد وب دلیلی بر نمایش یکسان صفحه‌ی وب در مرورگرهای مختلف نیست- فقط جهت آن دادم که در مواجهه با استثناها (در مقیاس آماری) خیلی شگفت‌زده نشوید و ایمانتان را از دست ندهید 😉 . وگر نه میزان وقوع این مشکلات کمتر از آن چیزی است که باعث شود نمایش مشابه صفحات استاندارد در مرورگرهای مختلف را از جمله برتریهای رعایت استانداردهای وب ندانیم!

(۲)

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

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

(۳)

استانداردهای طراحی وب تلاش می‌کنند ما را وادار کنند صفحات وب بهتری طراحی کنیم. «بهتر» هم به معنی خواناتر است، هم به معنی دسترسی آسان‌تر و هم به معنی سریع‌تر. برای دستیابی به این اهداف این استانداردها یک سری «پیشنهاد» برای طراحان وب دارند که رعایت آنها حتی از رعایت قوانین فرمولبندی شده‌ی کنسرسیوم وب مهم‌تر است و حتی بسیاری، استانداردهای طراحی وب را با این پیشنهادها (و نه با خطایابهای برخط کنسرسیوم) می‌شناسند!

یکی از مهم‌ترین این پیشنهادها این است که طراح وب باید محتوا را از طراحی صفحه کاملاً جدا کند. به گونه‌ای که بتوان بدون دستکاری در محتوی و تنها با تغییر فایلهای مرتبط با طراحی، نمای صفحات را عوض کرد! یکی از بهترین نمونه‌های پیاده‌سازی شده‌ی این پیشنهاد، مجموعه‌ی جالب CSS Zen Garden است که در آن تنها با تغییر یک فایل CSS طراحی یک صفحه‌ی ثابت گاهی به معنای واقعی کلمه «از زمین تا آسمان» فرق می‌کند.

از دیگر موارد پیشنهادی استانداردهای طراحی وب -که در واقع نتیجه‌ی مستقیم پیشنهاد قبلی است- آن است که از «جدولها» فقط برای «نمایش داده‌های جدولی» استفاده شود و نه برای طراحی ظاهر سایتها. استفاده از جدول (table) برای طرح‌ریزی قالبهای صفحات وب تا همین چند سال پیش با رواج استفاده از نرم‌افزارهایی با اشکالات ساختاری در طراحی همچون مایکروسافت فرانت پیج معمول بود. از مشکلات عمده‌ی استفاده از جداول برای ایجاد نمای صفحات می‌توان به آمیخته شدن متن و محتوای صفحه‌ی وب با طراحی آن و همچنین نمایش کند و پر اشکال این گونه صفحات در مرورگرهای وب اشاره کرد (مرورگرهای قدیمی‌تر برای نمایش درست این گونه صفحات به دلایلی مجبور بودند دو بار صفحه را از میزبان سایت دریافت کنند!).

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

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

ب) این نوشته را به سروش تقدیم می‌کنم!

سعی می‌کنم که ادامه داشته باشد …

برای فهم مطالب این سایت باید چند سال درس خوانده باشید؟!

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

سایت Sitescore به نظرم یکی از بهترین این سایتهاست که قبلاً هم اشاره‌ای به نشانی آن کرده بودم. در هر صورت، مدتی ابزار تحلیل این سایت در دسترس نبود تا این که اخیراً نگارش جدیدتری از آن ارائه شده که قابلیتهای جالبی دارد.

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

اما برای درک مطالب سایت www.cssplay.co.uk -که فعلاً بالاترین نمره‌ی کلی را در بین سایتهای ارزیابی شده دریافت کرده- یازده و خرده‌ای سال تحصیلات مدرسه‌ای کافی است و از این رو این سایت از لحاظ خوانایی وضعش بهتر است:

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

استانداردهای طراحی وب (۲)

انتظار دارم قسمت اول این سری را قبل از مطالعه‌ی این مطلب خوانده باشید.

(۱)

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

اما در زمینه‌ی وب تا حدودی جریان فرق می‌کند. در واقع زبان (؟!) اچ.تی.ام.ال که صفحات وب با ترکیب دستورات آن درست می‌شوند علی‌رغم مشابهتهایی که با زبانهای برنامه‌نویسی دارد یک زبان برنامه‌نویسی به حساب نمی‌آید. اما به هر حال اینجا بازهم: یک سری دستور داریم (البته شاید «دستور» کلمه‌ی درستی نباشد برای آنچه تگ خوانده می‌شود) و یک سکوی اجرا کننده (یک مرورگر) که این دستورات را می‌خواند و به صورت ترکیبی از عناصر متنی و تصویری نمایش می‌دهد.

خوشبختانه اچ.تی.ام.ال سختگیریهای زبانهای برنامه‌نویسی را ندارد: اگر شما دستورات را غلط بنویسید، تگهای باز شده را نبندید یا هر کار خلاف 😉 دیگری بکنید مرورگر در هنگام خواندن متن اچ.تی.ام.ال غلطهای شما را نادیده می‌گیرد یا آنها را با استفاده از الگوریتمهای هوشمندش تصحیح می‌کند.

اما آیا واقعاً این که مرورگر به طور هوشمندانه غلطهای ما را تصحیح کند همیشه خوب است؟: صورت درست یک دستور یا تگ، احتمالاً منحصر به یک یا چند شکل محدود است. اما صورت غلط چطور؟ به چند حالت می‌توان یک دستور را غلط نوشت؟

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

خوب! اگر ما می‌خواهیم صفحات سایتمان را همه‌ی مرورگرها شبیه هم نشان بدهند باید چه کار کنیم؟ احتمالاً بهترین راه حل آن است که دستورات را غلط ننویسیم تا نیاز نباشد مرورگرها در مورد صورت درست دستورات تصمیم‌گیری کنند و به خاطر تصمیمات متفاوتی که می‌گیرند صفحه‌ی ما را متفاوت نشان دهند.

اما یک سؤال: صورت درست دستورات را کجا می‌توانیم بیابیم و چه ابزاری می‌تواند غلطهای ما را بگیرد تا بتوانیم صفحات وب بدون اشکال بسازیم؟

(۲)

تعیین استانداردهای طراحی وب را کنسرسیومی بر عهده گرفته که در آن بیش از ۴۵۰ شرکت معتبر فعال در زمینه‌ی فناوری اطلاعات (از جمله مایکروسافت تولیدکننده‌ی مرورگر اینترنت اکسپلورر) عضویت دارند. مخفف نام این کنسرسیوم می‌شود W3C (کنسرسیوم شبکه جهانی وب). این کنسرسیوم در سایت خود ابزارهایی را برای یافتن ایرادات صفحات وب و کمک به همخوان کردن آنها با استانداردهای وب در اختیار گذاشته است (در این صفحه و همچنین این صفحه می‌توانید اطلاعات بیشتری راجع به این کنسرسیوم و استانداردهای طراحی وب به فارسی بیابید).

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

(۳)

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

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

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

گفته می‌شود رعایت استانداردهای وب یکی از اصول اولیه‌ی فرایند بهینه‌سازی سایتها برای موتورهای جستجو است. این فرایند که به طور خلاصه SEO خوانده می‌شود به سایتها کمک می‌کند تا جایگاه بهتری در موتورهای جستجو بیابند و در هنگام جستجوی واژه‌های متناسب نام آنها زودتر و بالاتر از سایتهای رقیب نمایش داده شود.

شاید ادامه داشته باشد …

استانداردهای طراحی وب (۱)

(۱)

چرا بعضی سایتها را اینترنت اکسپلورر درست نشان می‌دهد و فایرفاکس نه (سؤال انحرافی 😉 : آیا درست آن چیزی است که ما درست می‌بینیمش؟!)؟! چطور می‌شود سایتها را طوری طراحی کرد که در همه‌ی مرورگرها یکسان دیده شود؟ آیا استانداردی در این زمینه وجود دارد؟

(۲)

تا به حال در وبگردیهایتان این آیکونها، تصاویر و متنها را در گوشه و کنار صفحات دیده‌اید؟

لوگوهای همخوانی با استاندارهای وب

می‌دانید اینها چه مفهومی دارند و چرا سازندگان سایتها آنها را -که فکر نمی‌کنم خیلی مشتری‌پسند و چشم نواز باشند- در دید می‌گذارند؟ آیا تا به حال روی آنها کلیک کرده‌اید؟ اگر این کار را کرده‌اید از صفحه‌ای که باز شده چه چیزهایی فهمیده‌اید؟

راستی! من چند روزی می‌شود که یکی از همین علامات غریبه را به گوشه‌ی سمت راست وبلاگم اضافه کردم. اگر کنجکاو شده‌اید ببینید اگر روی این علامت کلیک کنید چه می‌شود همین الان دست به کار شوید و بعد برگردید، بیایید تا بقیه‌اش را برایتان بگویم.

(۳)

فراهم کردن امکاناتی که استفاده‌ی افراد معلول را از خدمات عمومی فراهم بیاورد در خیلی از کشورها الزامی است و افراد معلول در این کشورها می‌توانند از سازمانهایی که این موارد را در پروژه‌های خدماتی خود لحاظ نکرده‌اند شکایت کنند.

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

در سال ۲۰۰۰ میلادی دادگاهی در استرالیا دست‌اندرکاران برگزاری بازیهای المپیک سیدنی را -بر اساس شکایت فردی نابینا- به خاطر نحوه‌ی طراحی سایت اینترنتی این بازیها به پرداخت خسارت محکوم کرد. شاکی از این شکایت داشت که در طراحی سایت اینترنتی این بازیها ملاحظات مربوط به فراهم کردن امکان استفاده‌ی افراد نابینا از سایت لحاظ نشده است (منبع).

نماد عصای سفید

ادامه دارد …