Shaho Toofani - Category : articles

97/30/2008 11:25:58 AM

نمایش صحیح تصاویر شفاف 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)

297/19/2008 9:19:49 AM

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

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

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

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

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

نظر (4)

86/28/2008 10:52:07 AM

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

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

http://dev.mysql.com/downloads

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

ادامه ...

نظر (2)

36/23/2008 4:21:17 PM

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

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

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

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

نظر (1)

206/9/2008 10:05:50 AM

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

SEO Components

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

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

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

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

ادامه ...

نظر (5)

75/27/2008 5:23:12 PM

استیل دهی تگ 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)

165/5/2008 5:25:27 PM

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

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

http://www.php.net/downloads.php

در بخش باینری های ویندوز نسخه Zip را انتخاب کنید.(توجه داشته باشید که نسخه Installer را اشتباهی دانلود نکنید!)

ادامه ...

نظر (4)

104/29/2008 12:18:15 PM

مروری بر UML

زبان مدلسازی یکنواخت (UML) یک زبان مجازی است که موجب می شود افرادی که سیستم های شی گرا را تحلیل و طراحی می کنند سیستم های نرم افزاری را ببینند ، بسازند و مستندسازی کنند و سازمان های تجاری را مدلسازی کنند که از این سیستم ها استفاده می نمایند.
شرکت نرم افزاری RSC و گروه مدیریت شی ، سه نمادگذاری اصلی رسم نمودار شی گرا و جنبه هایی از نمادگذاری های متعدد دیگر را کنار هم قرار داد تا یک زبان مدلسازی استاندارد را ایجاد کند که در صنعت توسعه نرم افزار کارآمد است. UML هنوز در حال تکامل به عنوان یک استاندارد است و نسخه 2.0 آن اخیرا تغییر کرده است.

منشا UML

تکنیک های توسعه نرم افزار شی گرا سه مرحله از تکامل را پشت سر گذاشته است :

1. زبان های برنامه سازی شی گرا ایجاد شدند و مورد استفاده قرار گرفتند.
2. تکنیک های تحلیل و طراحی برای کمک به مدلسازی کسب و کار- تحلیل نیازمندیها و طراحی سیستم های نرم افزاری به وجود آمدند که تعداد این تکنیک ها به سرعت زیاد شده است.
3. UML طراحی شد تا بهترین ویژگیهای تعدادی از تکنیک های تحلیل و طراحی و نمادگذاری ها را ترکیب کند و یک استاندارد صنعتی را بوجود آورد.

ادامه ...