92008/07/30

نمایش صحیح تصاویر شفاف PNG در اینترنت اکسپلورر نسخه 6

PNG Thumbnail اکثر مرورگرهای مدرن امروزی از جمله فایرفاکس و سافاری تصاویر شفاف با فرمت PNG را بصورت صحیح و بدون مشکل رندر می کنند و نیازی به استفاده از روش های CSS Hacks ندارند، اما تا زمان ارایه Internet Explorer نسخه 7 مرورگرهای نسخه ی پایین تر IE بدرستی تصاویر Transparency PNG را که زمینه آن ها بصورت شفاف و به عبارتی بصورت شیشه ایی هستند را پشتیبانی نمی کنند. ممکن است بپرسید که آیا هنوز کسی از اینترنت اکسپلورر نسخه 6 یا پایین تر استفاده می کند؟ اگر نگاهی به آمار بازدیدکننده های وب سایت تان بیاندازید عده ایی هنوز هستند! بنظر می رسد طراحی Cross-Browser بودن سایت و سنجیدن جوانب مختلف یکی از مشخصه های کار حرفه ایی طراحان وب امروزی می باشد.

روش های مختلفی برای نمایش صحیح تصاویر شفاف PNG در اینترنت اکسپلورر نسخه 6 وجود دارند از جمله اسکریپت IE5.5+ PNG Alpha Fix، اسکریپت SuperSleight و استفاده از روش توضیح داده شده در ntlworld
از زمان انتشار اینترنت اکسپلورر 5.5 خصوصیتی ارایه شد بنام AlphaImageLoader که نوعی filter می باشد که می توان بصورت مستقیم در CSS یا جاوااسکریپت برای تگ های img تعریف کرد ( چه بصورت inline و چه بصورت background ).
یکی از مشکلات اساسی استفاده از این روش آنست که چون خصوصیت filter در CSS بوسیله کنسرسیوم جهانی وب W3C تعریف نشده است در نتیجه هنگام اعتبار سنجی ( Validation ) کد CSS نمی توان آنرا pass کرد و در نتیجه کد CSS معتبر شناخته نمی شود.

برای حل این مشکل می توان از اسکریپتی تحت عنوان Unit PNG Fix استفاده کرد، که از مشخصات بارز آن علاوه بر حل مشکل اعتبار سنجی کد CSS و نمایش صحیح تصویر شفاف PNG می توان به کم حجم بودن (کمتر از یک کیلوبایت)، اعمال به تگ img و خصوصیت background-image، فراخوانی آسان و سریع آن اشاره کرد.

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


<!--[if lt IE 7]>
        <script type="text/javascript" src="unitpngfix.js"/>
<![endif]-->

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

برای آگاهی بیشتر در مورد فرمت PNG می توانید نوشته "فورمت PNG پادشاه فورمت های تصویری در خلق صفحات وب" را مطالعه کنید.

نظر (8)

292008/07/19

چرا استفاده از جدول برای طرح‌بندی صفحات وب احمقانه است

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

Web design : Table vs CSS-Based در اهمیت طراحی وب سایت ها براساس استانداردهای وب و جدا کردن محتویات صفحات از شیوه نمایش آنها و دستیابی ساده تر به جزییات سایت و ... مدتی پیش در همین سایت مطلبی خواندید با عنوان "ده دلیل برای یادگیری و استفاده از استانداردهای وب در طراحی صفحات". این بار یکی از دوستان خوب من به نام سینا قرطاسی مطلبی ارزشمند را تحت عنوان "چرا استفاده از جدول برای طرح‌بندی صفحات وب احمقانه است" را بصورت چندین اسلاید ترجمه و آماده کرده است که می توان در نگاه کلی به عناوین زیر اشاره کرد:

  • چرا استفاده از جدول برای طرح‌بندی صفحات وب احمقانه است؟
  • مرور کلی: اینها به چه درد من می‌خورد؟
  • جدول‌های تودرتو و GIFهای فضانگهدار
  • مشکلات استفاده از جدول
  • راه‌حل: CSS و کد ساختاری
  • یک‌بار بنویسید، هرجایی استفاده کنید، برای همه‌کس
  • طراحی با CSS
  • کد معنایی
  • نوار منو چیست؟
  • مهاجرت از حقه‌های جدولی به استانداردهای وب
  • تجزیه کردن صفحات‌تان
  • تگ‌های نمایشی را با کدهای ساختاری جایگزین کنید

خواندن و بکاربردن این ترجمه روان و کاربردی را به علاقه مندان و طراحان وب توصیه می کنم.

نظر (4)

212008/07/11

Spamming و مقابله با آن توسط Waegis

Spamming این روزها یک بحث داغ است! از Spamهای سنتی email تا spam نظرهای یک وبلاگ، فروم، ویکی و ... که خواسته یا ناخواسته به سراغتان می آیند. نمونه های جدید آنرا همرا با پیشرفت صنعت موبایل شاهدیم و در حال حاضر برای خلاص شدن از شر! آنها راه حل مطلقی وجود ندارد. همچنان که در دنیای زندگی روزانه واقعی آنچه ناخواسته و مزاحم است را نیز می توان اسپم بحساب آورد. [مثل همین چهاربلندگوی مسجد محترم محل ما – که زندگانی صبحگاهی را برهرجنبنده ای در اطراف آن Spam-based کرده است!]. در دنیای مجازی مقابله با spam وارد مرحله ی تازه ایی شده است چنانچه Business های پررونقی شکل گرفته که خدمات و راه حل های مبارزه با آن را اعم از رایگان و غیر رایگان را ارئه می دهند.

spam کامنت ها، تراک بک ها و فرم های تماس و نتایج جستجو را هدف قرار داده است که این علاوه بر آنکه شناسایی و حذف آنها را وقت گیر و سخت کرده، حجم دیتابیس مورد استفاده سایتها را بالا برده و در اکثر موارد بر شکل ظاهری سایت ها هم تاثیر می گذارد. یکی از راه حل های مبارزه با Spam و طبعات آن استفاده از CAPTCHA است، که به تعبیری انداختن توپ از زمین دارنده سایت (صاحب سایت) به زمین شخص بازدید کننده سایت است. اما CAPTCHA علاوه برآنکه باعث هدر رفتن وقت بازدید کننده می شود دارای مشکلات زیادی اعم از Visibility، Readability و Accessibility است که این خود مغایر اصول اساسی استانداردهای طراحی وب نیز هست. از این گذشته راه های زیادی برای دور زدن CAPTCHA توسط اسپمرها دیده شده و استفاده از آنرا نامطمئن کرده است.

راه حل بهتر برای مبارزه با spam در سایت ها استفاده از وب سرویس های ارائه شده برای شناسایی و بعبارتی ف-ی-ل تر آنهاست
کاربران وردپرس احتمالا با سرویس ضد اسپم Aksimet آشنا هستند همچنانکه سرویس های دیگری مانند Typepad برای وبلاگ های مبتنی بر MovableType و Defensio برای پلتفرم Ruby on Rails وجود دارد. در این میان توسعه دهندگان ASP.NET تا چند روز پیش از داشتن یک سرویس اختصاصی برای سایت های مبتنی بر دات نت مایکروسافت بی بهره بودند.

Waegis - The Web Cleaner Waegis – بخوانید وی جِس – یک سرویس ضد اسپم جدید است که توسط کیوان نیری ارائه شده و در حال حاضر نسخه ی بتای آن آماده استفاده است. Waegis در واقع یک API آماده با قابلیت سفارشی سازی برای سیستم های معروف حاضر وبلاگ نویسی اجرا شده توسط پلت فرم دانت نت است و از الگوریتم پیچیده ایی برای شناسایی، حذف و ف-ی-ل تر کردن عناصر ناخواسته بهره می گیرد. بعد از ثبت نام در Waegis و گرفتن یک API Key اختصاصی و خواندن راهنمای آن می توانید به سرعت از شر! Spam های سایت تان رهایی پیدا کنید.

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