Tween

استاندارد فعلی برای الحاق فیلم‌های فلش به اسناد 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 برای هر عضو آرایه و بازگردوندن کاراکتر متناظر اون.

مشاهده دمو

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

دارم به لیست نرم‌افزارها و تکنولوژی‌هایی نگاه می‌کنم که دارم سعی می‌کنم یاد بگیرمشون:
Adobe ColdFusion
Adobe Flex
Adobe AIR
همه‌ش ادوبی شد؟ آخه من عاشق ادوبی‌ام!
HTML5 & CSS3
Microformat: درباره این بعداً بیشتر می‌نویسم.
ARIA: یا همون Accessible Rich Internet Application، ایضا این نیز توضیحات بیشتر بعدا.
جوملا و دروپال: با جوملا قبلا سایت راه‌اندازی کردم منتهی در کار با جوملا حرفه‌ای نیستم. درباره دروپال هم که کلاً تعطیلم. گفته شده که دروپال Content Management System نیست و Content Management Framework هست. باید حتماً سلام‌علیکی خدمتش داشته باشم.
دات نت مایکروسافت: عقیده‌ی غالب اینه که هم درآمد دات‌نتی بیشتره و هم بازار کارش (در ایران منظورمه). ولی فکر می‌کنم بی‌خیال این بشم چون وقت و انرژی زیادی می‌خواد تا مهارت کافی در برنامه‌نویسی دات‌نت به دست بیارم.

قبل از ورود به طراحی وب، مشغول کاوش «شبکه»های رایانه‌ای، مباحث امنیت و مدیریت سیستم‌ها بودم. فکر می‌کردم شبکه مبحث‌ایه که هرچی در موردش مطالعه می‌کنی باز هم کمه. باید اقرار کنم وب هم مثل همون و شاید بدتره. “روزانه” در حال تغییره.

ضرب‌المثلی داریم که به زبون بومی می‌گه: «چَش اَتِرسِه، دس کار اَکُد» یعنی فرد با دیدن حجم کاری که باید انجام بده می‌ترسه ولی بعد که انجامش می‌ده می‌بینه چیز سختی هم نبوده. تا ببینیم چه شود.

مدتی قبل ایده‌ای داشتم برای ساخت برنامه‌ای برای نگه‌داری snippetها (قطعه کدهای قابل استفاده مجدد) و تصمیم گرفتم از AIR برای برنامه‌نویسیش استفاده کنم. ایر امکان استفاده از پایگاه داده‌ای SQLite رو می‌ده، یه دیتابیس کم‌حجم که قابل انتقال به همراه برنامه نیز هست. حالا، مرجع مورد استفاده من AIRforJSDevPocketGuide بود (در سایت ادوبی پیدا می‌شه) که احتمالاً قدیمیه چون کدهای مربوط به اتصال به دیتابیس حتی وقتی از روی مرجع عینا کپی می‌کردم نیز فایده‌ای نداشت و اتصالی برقرار نمی‌شد. تا این‌که مقاله jQuery and AIR – Moving from web page to application در سایت insideRIA رو دیدم. در این مقاله سعی شده یه بازی مبتنی بر جاوااسکریپت و با کمک AIR ساخته بشه. روش اتصال به دیتابیس طبق توضیحات این مقاله مقداری متفاوت هست:
دیتابیس رو در ابتدای شروع برنامه کپی می‌کنیم به App Storage folder (که هر نرم‌افزار مبتنی بر AIR یه دونه برای نیازهاش داره) و بعد از کپی کردن به اون‌جا به پایگاه داده وصل می‌شیم:

[js]
//I handle copying the db from local to storage dir
var installTo = air.File.applicationStorageDirectory
var installToFile = installTo.resolvePath("words.db")
if(!installToFile.exists) {
air.trace("Copying db file to "+installToFile.nativePath)
var installFromLoc = air.File.applicationDirectory
var installFromFile = installFromLoc.resolvePath("database/words.db")
air.trace("from "+installFromFile.nativePath)
try {
installFromFile.copyTo(installToFile,true)
} catch(error) {
//Total Failure…
alert(error.message+’\n’+error.details)
air.NativeApplication.nativeApplication.exit()
return
}
}

//connect to db
try {
dbcon = new air.SQLConnection()
var dbFile = air.File.applicationStorageDirectory.resolvePath("words.db")
dbcon.open(dbFile)
} catch(error) {
//Total Failure…
alert(error.message+’\n’+error.details)
air.NativeApplication.nativeApplication.exit()
return
}
[/js]
قطعه کد از همون مقاله بالا آورده شده.

مشکل اتصال حل شد، ولی من دیگه قصد تکمیل برنامه رو ندارم!
می‌تونید پیش‌نمایش اولیه اینترفیس رو ببینید:

مشاهده دمو :: توجه کنید که در دمو فقط سه گزینه اولی شامل محتوا هستند.

لطفاً مشترک http://feeds.feedburner.com/tweener شوید!

اهمیت داشتن URLهای تمیز نیازی به توضیح نداره، علاوه بر این‌که کاربران راحت‌تر اون‌ها رو به‌خاطر می‌سپارن و اهمیتش از نظر SEO، مشکلات آدرس‌های پویا رو ندارند.

در پیاده‌سازی پروژه جدیدم از PHP خشک و خالی برای راه‌اندازی وب‌سایت استفاده کردم، بنابراین نیاز به راهی داشتم تا آدرس‌ها رو تمیز کنم. دو قطعه کد htaccess فوق‌العاده پیدا کردم ولی متاسفانه منبع‌شون رو یادداشت نکردم.

RewriteEngine On
RewriteCond %{REQUEST_FILENAME} !-f
RewriteCond %{REQUEST_FILENAME} !-d
RewriteRule ^(.*)$ $1.php [L,QSA]

این، آدرس‌های مشابه domain/about.php رو به domain/about تبدیل می‌کنه.
و،

RewriteEngine On
RewriteCond %{REQUEST_FILENAME} !-f
RewriteCond %{REQUEST_FILENAME} !-d
RewriteRule ^(.*)$ index.php?q=$1 [L,QSA]

آدرس‌های domain/index.php?q=about رو به domain/about

چطور استفاده کنم؟

در ریشه وب‌سایت یک فایل با نام .htaccess بسازید و این‌ها رو توشون کپی کنید یا اگه این فایل موجود بود این‌ها رو به اول فایل اضافه کنید.

ابتدا یه عذرخواهی بکنم از سالار عزیز، این نوشته به درخواست ایشون نوشته شد، منتهی خیلی دیر! نمی‌دونم چرا تازگی‌ها خیلی بدقول شدم…

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

خوب، الان باید به فکر یه ساختار منطقی برای ارائه محتوا باشید. مثلاً این:

[html]
<div class="widget">
<h3>پیوندها</h3>
<ul>
<li><a href="#">Tween</a></li>
<li><a href="#">Tween</a></li>
<li><a href="#">Tween</a></li>
<li><a href="#">Tween</a></li>
<li><a href="#">Tween</a></li>
</ul>
</div>
[/html]

تصویر روبان‌مون رو به عنوان پس‌زمینه h3 معرفی می‌کنیم. تکنیک اینه که به h3مون position:relative بدیم. position:absolute و position:fixed عنصر رو از ساختار فعلی سند (جریان سند = documnt flow) خارج می‌کنن ولی با position:relative عنصر هنوز در همون موقعیت فعلیش می‌مونه و می‌تونیم شی رو نسبت به موقعیت فعلیش به میزان دلخواه جابه‌جا کنیم. این جابه‌جایی رو با top, right, bottom, left تعریف می‌کنیم. پس به‌جز تعریف‌های آرایشی، برای به‌دست آوردن این جلوه به تعریف‌های زیر نیاز داریم:

[css]
h3 {
width: 200px; /* به میزان دلخواه */
position: relative; /* مورد نیاز */
left: -30px; /* یعنی شی رو به میزان سی پیکسل به سمت چپ بکش */
background: url(images/ribbon.png) no-repeat; /* تصویر روبان */
}
[/css]

این width رو باید به اندازه (طول جعبه + اندازه‌ای که می‌خوایم از دو طرفه بیرون بزنه) باید تعریف کنیم. دقت کنید که در css بالا ما مقدار right رو تعریف نکردیم. اگه می‌خوایم از سمت راست هم بیرون بزنه باید مقدار width رو زیاد کنیم و نباید right رو تعریف کنیم (از لحاظ منطقی هم این‌کار معنایی نداره). اگه هم مقدار right و هم مقدار left رو تعریف کنیم مرورگر اگه در سند چپ به راست باشیم مقدار left و اگه سند راست به چپ باشه مقدار right رو استفاده می‌کنه و اون یکی رو در نظر نمی‌گیره. اگه هر دو مقدار top و bottom تعریف شده باشه مرورگر همیشه مقدار top رو استفاده می‌کنه.

درباره تفاوت انواع positionها این‌جا رو بخونید: http://css-tricks.com/absolute-relative-fixed-positioining-how-do-they-differ/

یه استفاده معمول از position:relative برای تعریف position:absolute نسبت به یه عنصر دیگه‌ست. توضیحات بیشتر رو در این‌جا ببینید: http://css-tricks.com/absolute-positioning-inside-relative-positioning/

برای طراحی یک وب‌سایت سرگرمی، عبارت joke رو در Google Images جستجو کردم تا به عکسی با عنوان Ill Never Get It رسیدم. ایده‌ی اولیه، ساخت قالبی است که بشود افقی پیمایشش کرد. منتهی این تصویر باید به پایین پنجره مرورگر می‌چسبید (پایین صفحه مرورگر صخره و بالا، آسمان). تکنیک‌ استفاده شده به این صورت هست:

[html]
<div id="wrapper">

<div id="content">
<div class="content first">
</div>
<div class="content">
</div>
<div class="content">
</div>
<div class="content last">
</div>
</div> <!– #content –>

</div><!– #wrapper –>
[/html]

و شیوه‌نامه:

[css]
#wrapper {
position: absolute;
right: 0; bottom: 0;
height: 767px; width: 100%;
}

#content {
background: url(images/bg.png) repeat-x right center;
width: 4000px; height: 767px;
text-align: justify;
color: #d1c9a9;
}
[/css]

#wrapper با position:absolute و bottom:0 به پایین صفحه می‌چسبونیم. با width:100% طولش رو به اندازه عرض پنجره مرورگر تنظیم می‌کنیم. درون این یه div دیگه با شناسه #content هست. طول این با width: 4000px به اندازه مورد نیاز تنظیم شده و اون تصویر اولیه به عنوان تصویر پس‌زمینه به این یکی داده می‌شه. الان هم به پایین صفحه چسبیده و هم می‌شه افقی پیمایش کرد. این شیوه در هر سه مرورگر Opera, FF, IE بدون مشکل کار می‌کنه، در کروم (من از نسخه ۰٫۴ استفاده می‌کنم، شاید در نسخه‌های جدید اصلاح شده باشه) اگه تگ html خاصیت dir=rtl داشته باشه (یعنی سند راست به چپ باشه) خود نوار پیمایش حذف می‌شه ولی اگه چپ به راست باشه این مشکل وجود نداره.
من در این‌جا برای تنظیم مکان جعبه‌هایی که قراره محتوا رو نگه‌دارند (.content) از float استفاده کردم ولی می‌شه مکان اون‌ها رو با position:absolute و یا relative در مکان دلخواه قرار داد.

مشاهده دمو - دریافت فایل