Shaho Toofani

92008/07/30

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

اکثر مرورگرهای مدرن امروزی از جمله فایرفاکس و سافاری تصاویر شفاف با فرمت 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 بستری را در اختیار طراحان گذاشت که بتوانند طرح‌بندی تصاویر و متن را روی آن قرار دهند. استفاده از جدول‌ها که همچنان غالب‌ترین وسیله طراحی صفحات پرزرق‌وبرق وب است، در واقع اکنون با ساختن صفحات اینترنتی بهتر، و با قابلیت دسترسی، انعطاف‌پذیری وعملکرد بالاتر در تعارض قرار گرفته است.

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

چرا استفاده از جدول برای طرح‌بندی صفحات وب احمقانه است؟
مرور کلی: اینها به چه درد من می‌خورد؟
جدول‌های تودرتو و 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 – بخوانید وی جِس – یک سرویس ضد اسپم جدید است که توسط کیوان نیری ارائه شده و در حال حاضر نسخه ی بتای آن آماده استفاده است. Waegis در واقع یک API آماده با قابلیت سفارشی سازی برای سیستم های معروف حاضر وبلاگ نویسی اجرا شده توسط پلت فرم دانت نت است و از الگوریتم پیچیده ایی برای شناسایی، حذف و ف-ی-ل تر کردن عناصر ناخواسته بهره می گیرد. بعد از ثبت نام در Waegis و گرفتن یک API Key اختصاصی و خواندن راهنمای آن می توانید به سرعت از شر! Spam های سایت تان رهایی پیدا کنید.

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

82008/06/28

راهنمای مصور نصب MySQL تحت ویندوز

گام یک برای دانلود آخرین نسخه MySQL به آدرس زیر بروید.

http://dev.mysql.com/downloads

و روی گزینه دانلود نسخه Community Server کلیک کنید. (شکل زیر)

ادامه ...

نظر (2)

32008/06/23

ناهماهنگی مرورگرها در رندر مقادیر پیش فرض CSS و راه حل آن

هر مرورگری عناصر (بخوانید تگ ها) html را براساس الگوریتم پیش فرض موتور خود رندر می کند و این سرآغازی است! بر مشکلی بنام دیده شدن صفحات سایت شما بصورت متفاوت در مرورگرهای مختلف، بعنوان مثال مقادیر padding، margin و border در مرورگرهای مختلف بصورت پیش فرض فرق می کند که این، یکی از مهمترین مشکلاتی خواهد بود برای طراحی یک صفحه – سایت Cross-Browser.

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

نسخه های متفاوتی از reset کردن استایلها وجود دارد اما پیشنهاد می کنم فایل reset، (از Eric Meyer ) را دانلود کرده و در ابتدای فایلهای CSS از آن بهره بگیرید و نتیجه را در مرورگرهای مختلف ببینید.

نظر (1)

202008/06/09

SEO برای طراحان وب

SEO Components

چرا به SEO نیاز دارید؟

1. SEO تنها یک business آنلاین و یک Package اضافی ارائه شده توسط خدمات hosting نیست. برای یک طراح وب و برنامه نویس در دنیای وب، بهینه سازی پروژه تحت وب جهت موتورهای جستجو امری حیاتی است.

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

3. کسب Ranking بالا برای یک سایت فواید زیادی در برخواهد داشت. برای مثال در یک سایت که بطور متوسط در روز 14000 بیننده دارد، براساس آمار 45% تا 60% ترافیک همین سایت بوسیله موتورهای جستجو ایجاد شده است. (پس داشتن Rank بالاتر یعنی شانس قرار گرفتن در صفحات ابتدایی موتورهای جستجو)
چنانچه سایت فاقد ورودیهایی از طریق موتورهای جستجو باشد بسیاری از ویزیتورهای روزانه را از دست خواهد داد. بعبارتی دیگر، ریسک از دست دادن پتانسیل موجود در جهت بدست آوردن تعداد ویزیتور بیشتر.

ادامه ...

نظر (5)

72008/05/27

استیل دهی تگ hr بصورت Cross Browser

معمولا بکار بردن تگ hr در طراحی صفحات وب دردسرهای مختص به خود را داراست از جمله مهمترین آنها نشان دادن شکل و شمایل آن بصورت یکسان است در انواع مرورگرهای وب (Cross Browser) با اِعمال انواع و اقسام عمگرها CSS.

روش زیر یکی از راه های سریع و ساده ایست که می توان برای استیل دهی به یک تگ hr بکار برد. ابتدا تگ hr را در داخل یک تگ div نوشته و یک کلاس مثلا بنام hrDiv به آن نسبت دهید:


<div class=”hrDiv”>
	<hr />
</div>

سپس در CSS کلاس hrDiv خاصیت clear آن را به both ست کنید. این نکته بخاصر آن است که اطمینان حاصل کنیم که div به هیچ عنصر دیگری در طرفین چپ و راست اجازه شناور شدن (float) نمی دهد.

سپس از یک تصویر یک پیکسلی (یک نقطه) بعنوان زمینه برای اِعمال افکت یک خط ممتد در راستای افق برای div استفاده کرده و برای پنهان کردن hr خصوصیت display آن را به hidden ست می کنیم. توجه داشته باشید که با وجود پنهان کردن تگ hr هنوز آن تگ در کد html پابرجاست.


.hrDiv
{
    clear:both;
    height: 1px;
    background: url(images/dot.gif) top left repeat-x;
    margin: 1em 0;
    width:100%;
}
.hrDiv hr
{
    display: none;
}

نظر (3)

52008/05/25

وضعیتتان را مشخص کنید!

برای اطلاع از تیمهای شرکت کننده در یورو 2008 به سایت یوفا بروید.

262008/05/15

کتاب رایگان فتوشاپ

سایت Sitepoint نسخه ی PDF کتاب
The Photoshop Anthology: 101 Web Design Tips, Tricks & Techniques را به مدت 30 روز بصورت رایگان در دسترس قرار داده است.