Tween

علت انتشار چندین و چند باره‌ی پست‌های مربوط به وردپرس‌ام در سیاره وردپرس فارسی چیه؟ تا الان دو سه بار این طور شده.

این جا را بخوانید تا باز در این رابطه با هم صحبت کنیم: http://arstechnica.com/web/news/2009/12/commonjs-effort-sets-javascript-on-path-for-world-domination.ars

یک. یه اسکریپت هست برای پشتیبانی از Border-Radius در همه نسخه های IE. فقط باید این رو به فایل CSSتون اضافه کنید:

.round {
behaviour: url('path/to/border-radius.htc');
}

دستور BEHAVIOUR رو تنها IE پشتیبانی می کنه و الباقی مرورگرها ندید می گیرندش.
نحوه کارش به این صورت هست که فایل استایل تون رو برای دستورات border-radius با هر prefixای که زده باشید بررسی می کنه و این گوشه گردی رو به اون عناصر اضافه می کنه.
از این جا بگیریدش: http://code.google.com/p/curved-corner/

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

.element {
	background:none;
	-ms-filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=#CC000000,endColorstr=#CC000000);
	filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=#CC000000,endColorstr=#CC000000);
	/* #CC000000 is rgba(0,0,0,.80) */
	zoom: 1; /* make sure element has hasLayout */
	position: relative; /* is needed to enable clearType when using filters */
}

ابتدا پس زمینه رو که قبلاً برای مرورگرهای دیگه و با استفاده از RGBA تعریف کردیم رو حذف می کنیم. بعد فیلتر طیف رنگی رو می سازیم. توجه کنید که رنگ های تعریف شده به فرمت هگز و به صورت ARGB هستند.
فیلتر دو بار تعریف شده، یه بار با پیشوند ms که برای مرورگرهای IE8 به بالاست و یه بار بدون پیشوند برای نسخه های ۷ به پایین. اون zoom: 1 هم برای این تعریف شده تا به عنصر خاصیت hasLayout بده. کلاً چیز مهمی نیست.
حالا، استفاده از فیلترها باعث می شه clearType برای اون عناصر غیرفعال بشه، نتیجتاً متون واضح و شفاف نمایش داده نمی شن. برای دوباره فعالیدن این خاصیت باید مقدار position: relative رو به عنصر داد.
واضحه که این دستورات رو باید با تکنیک دلخواه فقط برای IE فعال کرد.
برای تبدیل RGBA به مقدار مشابهش با فرمت هگز و به صورت ARGB، این جا رو ببینید: http://kilianvalkhof.com/2010/css-xhtml/how-to-use-rgba-in-ie/
همین. سخت بود؟!

سه. از شیوه نامه های مخصوص IE که با تکنیک Conditional Comment (توضیحات شرطی) ساخته می شن استفاده نکنید!
اینجا: http://www.phpied.com/conditional-comments-block-downloads/
توضیح داده که تعریف شیوه نامه مخصوص IE حتی وقتی اون شیوه نامه برای اون نسخه از IE نباشه باز هم بارگذاری الباقی صفحه رو بلاک می کنه که باعث کند شدن رندر صفحه می شه. این هم از باگ های عجیب IE.

چهار. برای تست طراحی روی نسخه های مختلف IE، پیشنهاد می کنم IE Collection رو امتحان کنید. همراه این شما IE Developer Toolbar رو هم دریافت می کنید، مشابه افزونه Developer Toolbar در فایرفاکس.

اغلب دستورات اضافه شده مثل Box Shadow، GRBA، Gradients، و… به CSS3، امکان تعیین fallback رو دارند. مثلاً برای RGBA می شه این طور نوشت که:
background: #000000;
background: rgba(0,0,0,0.75);
و مرورگرهایی که از RGBA پشتیبانی می کنند دومی رو استفاده می کنند. اگر نه هم که بود و نبودشون به تجربه کاربری لطمه نمی زنه، مثل border-radius یا box-shadow. خیلی هم خوب. اما زمانی هست که مشتریان شما اصرار دارند طراحی در همه مرورگرها کاملاً یکسان نمایش داده بشه. خب، برای همون مثال RGBA، کد بالا رو به این صورت تغییر می دیم:
background: url(images/tran-black.png) repeat;
background: rgba(0,0,0,0.75);
ولی مشکل این جاست که مرورگرهایی که از RGBA پشتیبانی می کنند هم تصویر معرفی شده رو بارگذاری می کنند (کاملاً مطمئن نیستم البته. باید یه جستجویی انجام بدم.) که این به معنی یه درخواست HTTP اضافه و کاهش سرعت سایت هست.
یه کتابخونه جاوااسکریپتی هست به اسم Modernizr که فقط باید بندازیدش داخل کدتون و بعد کلاس هایی رو به صفحه اضافه می کنه که مشخص می کنه آیا فلان ویژگی پشتیبانی می شه یا نه. این کتابخانه بر اساس feauture detection هست نه User-Agent Sniffing یعنی میاد بررسی می کنه ببینم مثلاً border-radius پشتیبانی می شه یا نه، نه این که بگه الان مرورگرمون IE6 هست بنابراین فلان ویژگی هستش یا نیستش.
خب، حالا باید قبل از selectorتون در CSS، کلاس های مربوطه رو اضافه کنید.
اطلاعات بیشتر در وب سایتش: http://www.modernizr.com/

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

[...] اگر تصور کنید که تاریخ ۴٫۵ میلیارد ساله ی کره زمین در قالب یک روز عادی به صورت فشرده درآورده شده است، در آن صورت حیات خیلی زود یعنی در حدود ساعت ۴ بامداد و با پیدایش نخستین موجودات زنده تک سلولی آغاز می شود اما در طی شانزده ساعت بعدی هیچ گامی به جلو برنمی دارد. تا پیش از ساعت ۸:۳۰ بعد از ظهر یعنی پس از سپری شدن پنج ششم روز، کره زمین چیزی جز یک پوسته ی بی قرار پوشیده از میکروب ها برای نشان دادن به کائنات ندارد. آن گاه، سرانجام نخستین گیاهان دریایی سر بر می آورند و بیست دقیقه ی بعد نخستین ماهیان ژلاتینی و زیای اسرارآمیز ادیاکاران ظاهر می شوند که نخستین بار توسط رجینلد اسپریک در استرالیا مشاهده شدند. در ساعت ۹:۰۴ بعد از ظهر، تریلوبیت ها شناکنان وارد صحنه می شوند، و کم و بیش بلافاصله پس از آن ها موجودات شکل یافته ی شیل برگس از راه می رسند. لحظاتی پیش از ساعت ۱۰ شب، گیاهان آرام آرام جوانه می زنند و سر بر می کشند. به فاصله ی کمی پس از آن و کمتر از دو ساعت مانده به پایان روز، نخستین موجودات خشک زی پدید می آیند.
در پرتو ده و اندی دقیقه هوای لطیف، کره زمین در ساعت ۱۰:۲۴ شب در پوششی از جنگل های بزرگ کربونیفر قرار می گیرد که همه ی زغال سنگ امروزی از پسمانده ی آن است، و نخستین پرندگان بالدار ظاهر می شوند. دایناسورها درست چند لحظه پیش از ساعت ۱۱ شب، تالاپی وارد میدان می شوند و نزدیک به ۴۵ دقیقه میدان داری می کنند. بیست و یک دقیقه مانده به نیمه شب، دایناسورها نابود می شوند و عصر پستانداران از راه می رسد. انسان ها یک دقیقه و هفده ثانیه مانده به نیمه شب ظاهر می شوند. کل تاریخ مدون بشر در این مقیاس، چیزی بیش از چند ثانیه نمی شود و دوره حیات یک انسان تنها شاید از یک لحظه فراتر نرود. در سراسر این روز شدیداً شتاب گرفته، قاره ها به این طرف و آن طرف می لغزند و با چنان سرعتی به یکدیگر کوبیده می شوند که قطعاً از بی محابایی آن ها حکایت دارد. کوه ها اوج می گیرند و همچون یخ آب می شوند، بسترهای اقیانوس شکل می گیرند و دگرگون می شوند، صفحات یخ پیش می روند و پس می نشینند. در سراسر این مدت، تقریباً سه بار در هر دقیقه، در نقطه ای از کره زمین برقی ظاهر می شود که از اصابت شهابی به اندازه شهاب سنگ مانسن یا حتی بزرگ تر از آن خبر می دهد. جای شگفتی است که در محیطی چنان ضربه پذیر و بی قرار، اصولاً چیزی بتواند به هستی خود ادامه دهد. [...]

چالرز بوکوفسکی در روزنوشت اش که با عنوان «ناخدا برای نهار بیرون رفته و ملوانان کشتی را در اختیار گرفته اند» (من متن ترجمه شده رو از این جا گرفتم: http://soodaroo.blogfa.com/post-175.aspx) گفته بود، نمی توانم نویسندگانی را درک کنم که نوشتن را کنار می گذارند. آخر چطور آرام می شوند؟
وضعیت ما هم همین طوره. ما که نویسنده نیستیم ولی همین بلاگ است که ما را سر حال می آورد. بیشتر از همه دوست دارم سلسله مطالب افزونه نویسی برای وردپرس رو ادامه بدم و اون مطالب قبلی رو ویرایش کرده و سر و سامان بدم.
به هر حال، برمی گردم.

استاندارد فعلی برای الحاق فیلم‌های فلش به اسناد HTML، استفاده از جاوااسکریپته. کتابخانه‌های قدرتمندی مثل SWFObject هم برای این منظور توسعه داده شده‌اند. چرا باید با این شیوه فایل فلش رو اضافه کنیم؟ چون علاوه بر این‌که اسناد رو تمیز نگه‌می‌داره امکان ارائه محتوا (مثلا متن یا تصویر جایگزین) هم به کاربر می‌ده (این از نظر accessibility خیلی اهمیت داره چون کاربرانی که از نرم‌افزارهای صفحه‌خوان استفاده می‌کنند قادر به مشاهده فیلم فلش نیستند) تا در صورتی که بازدیدکننده به هر دلیلی به فلش پلیر دسترسی نداشت نمایش داده بشه و یا حتی امکان نصب فلش پلیر رو بهش بده.
این‌ها خیلی خوبه ولی من زیاد با این روش موافق نیستم. چون در صورتی که کاربر فلش پلیر رو داشته باشه (و ۹۹ درصد رایانه‌های جهان فلش پلیر رو نصب شده دارند) ولی جاوااسکریپت غیرفعال باشه باز چیزی نمی‌بینه. (آمار مربوطه رو در این‌جا ببینید.) دوم نیاز به بارگذاری کتابخونه هست. یه درخواست (httprequest) اضافی برای براگذاری کتابخانه لازمه و swfobject، حدود ۱۰ کیلوبایت حجم داره. بعلاوه، زمان پردازش صفحه رو هم بالا می‌بره. این از اون نظر مهمه که مثلا اسکریپت اصلاح فایل‌های PNG در مرورگر IE6 فقط ۵۰۰ میلی ثانیه به زمان پردازش صفحه اضافه می‌کنه ولی تست یاهو نشون داد همین ۵۰۰ میلی ثانیه تعداد بازدیدها از سایت یاهو رو دو درصد کم‌تر کرد. [آمار این تکه آخری رو از حذف گفتم. ممکنه اشتباه باشه.]

اینا رو گفتم که به این برسم که مدتی قبل در بخش Snippetهای سایت CSS-Tricks به این قطعه کد فوق مفید برخوردم که کاملاً valid هست در همه‌های مرورگرها هم به خوبی کار می‌کنه. داشته باشیدش یه جایی دم دست که خیلی به کار می‌خوره.

<object type="application/x-shockwave-flash"
data="your-flash-file.swf"
width="0" height="0">
<param name="movie" value="your-flash-file.swf" />
<param name="quality" value="high"/>
</object>

آیا راه بهتری برای چپاندن فیلم فلش در صفحه وجود داره؟

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

ساخت کروم قابل حمل

ابتدا کروم را از این‌جا دریافت کنید: http://build.chromium.org/buildbot/snapshots/chromium-rel-xp/
فایل را از حالت فشرده خارج کرده و از فایل chrome.exe یک کپی بگیرید تا از آن یک میانبر بسازید.
روی میانبر کلیک راست کرده و گزینه Properties را انتخاب کنید. در کادر مقابل Target عبارت زیر را وارد کنید:
–user-data-dir=Profile
میانبر خود را اجرا کنید. TADA!
همین!

یکی از دوستان در مسابقات SOOK در بخش رم‌های DDR2 مقام اول و در بخش تست ۳DMark01 مقام سوم رو به‌دست آورد. اگرچه هنوز شیرینی‌شو نداده ولی بهش تبریک می‌گم!

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

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

به هر حال، دست به کار شدم و دو تابع جاوااسکریپت نوشتم برای تبدیل نوشته به حروف مورس و برعکس:

[js]
function toMorse(text) {

var text = text.toLowerCase(text),
len = text.length,
morse = [];

for (var i=1; i<=len; i++) {

switch (text.charAt(i-1)) {
case ‘a’ :
morse[i] = ‘.-’;
break;
case ‘b’ :
morse[i] = ‘-…’;
break;
case ‘c’ :
morse[i] = ‘-.-.’;
break;
….
}

}

return morse.join(‘ ‘);

}

function deMorse(morse) {

var letters = morse.split(‘ ‘),
text = ”;

for (var i=1; i<letters.length; i++) {

switch (letters[i].toString()) {

case ‘.-’:
text += ‘a’;
break;
case ‘-…’:
text += ‘b’;
break;
case ‘-.-.’:
text += ‘c’;
break;
….
}

}

return text;

}

[/js]

در تابع toMorse ما رشته رو دریافت می‌کنیم و به ازای هر کاراکتر با دستور switch کد مورس اون حرف رو برمی‌گردونیم. در deMorse هم ما رشته‌ی کد مورس رو می‌گیریم و با متد split رشته رو به آرایه‌ای تبدیل می‌کنیم که هر عضوش برابر با یک کاراکتره. باز هم دستور switch برای هر عضو آرایه و بازگردوندن کاراکتر متناظر اون.

مشاهده دمو

مدخل کد مورس در ویکی‌پدیا فارسی