داخل این آموزش قصد داریم یاد بگیریم که چه طور با اسفاده از این تجربه کاربری خوب، از سربرگ مرورگر به عنوان یک رسانه برای نشون دادن اطلاعیه ها استفاده کنیم. میتونید دمو این آموزش رو ببنید تا اون چیزی که قراره یاد بگیریم رو بهتر درک کنید.
با استفاده از Document Title
var count = 0;
document.title
) میرسیم. برای اینکه مقدار عنوان سربرگ جاری رو همیشه و به راحتی داشته باشیم اون رو در یک متغییر به اسم title
می ریزیم، به شکل ریز :var title = document.title;
function changeTitle() {
count++;
var newTitle = '(' + count + ') ' + title;
document.title = newTitle;
}
++
جاوا اسکریپت استفاده کردم. برای این از ++
استفاده کردم چون باعث میشه مقدار متغییر count
ما در هر بار اجرا تابع یک (1
) واحد افزایش پیدا کنه. ما برای متغییر خودمون مقدار اولیه 0 رو در نظر گرفتیم و حالا اگر یک بار تابع اجرا بشه مقداری اون عدد 1
خواهد بود. از اون جایی که ما به یک API برای به دست آوردن تعداد واقعی اطلاعیه ها دسترسی نداریم، از اپراتور ++
برای شبیه سازی افزایش تعداد عدد اطلاعیه ها استفاده کردیم. changeTitle()
رو اجرا کنه : function newUpdate() {
update = setInterval(changeTitle, 2000);
}
var docBody = document.getElementById('site-body');
docBody.onload = newUpdate;
changeTitle()
به طور منظم در فاصله زمانی مشخصی تکرار میشه. در ادامه هم کدی رو نوشتیم که تا صفحه بارگذاری شد تابع رو اجرا کنه. ( )
برای تعداد اطلایه ها از [ ]
یا { }
هم استفاده کنید، کافیه یه تغییرات کوچیک در تابع changeTitle()
ایجاد کنید.با استفاده از فاوآیکون
حالا در روش دوم یاد میگیریم فاوآیکون رو تغییر بدیم (مثل برنامه تحت وب Trello). برای این کار ما به دو تا فاوآیکون نیاز دایم، اولی در حالت عادی که خبری از هیچ اطلاعیه ای نیست و دومی برای وقتی که اطلاعیه جدید برای کاربر اومده.
برای این کار لازمه تا اول فاوآیکون اولیه (در حالت عادی بدون اطلاعیه) را به سند (صفحه وب) خدمون لینک کنیم.
<link id="favicon" rel="icon" href="img/favicon.gif?v3"/>
حالا مسیر فاوآیکون جدید رو در یک متغییر جاوا اسکریپت قرار میدیم.
var iconNew = 'img/favicon-dot.gif';دقیقا مثل روش اول ما دو تا تابع ایجاد میکنیم:
function changeFavicon() {تابع اول،
document.getElementById('favicon').href = iconNew;
}
function newUpdate() {
update = setInterval(changeFavicon, 3000);
setTimeout(function() {
clearInterval( update );
}, 3100);
}
var docBody = document.getElementById('site-body');
docBody.onload = newUpdate;
changeFavicon()
فاوآیکن اولیه رو با فاوآیکونی که یک نقطه قزمز (نشان) داره جایگزین میکنه. تابع دوم، newUpdate()
کنترول میکند تا تابع اول دریک زمان مشخص انجام بشه. روش دوم از روش اول سخت تر نبود; درسته ؟ در واقع این روش از تغییر رشته درون سربرگ مرورگر که در روش اولن امجام دادیم خیلی ساده تر بود. به علاوه، شما میتوانید با خلاقیت بیشتری فاوآیکون دوم را طراحی کنید. به طور مثال شما میتونید فاوآیکون دوم رو با یک نقطه قرمز چشمک زن قرار بدین(در این مورد یکم باید دقت کنید) یا اصلا ممکنه تمام رنگ فاوآیکون و آیکون رو تغییر بدین.
توجه : مرورگر گوگل کروم (Chrome) از فاوآیکون های انیمشینی GIF پشتیبانی نمیکنه.
با استفاده از Favico.js
به عنوان آخرین روش، میخوایم از یک کتابخونه جاوا اسکریپت که به اون Favico.js میگن و توسط Miroslav Magda نوشته شده، استفاده کنیم. این کتابخونه ویژگی های زیادی رو به ما میده که حتی میشه براش مطلب جدا داخل وبلاگ درست کرد. یکی از ویژگی هایی جالب این کتابخونه که قصد بررسی اون رو داریم، نشون دادن عدد اطلاعیه ها همراه علامت در فاوآیکون هست (میشه گفت ترکیبی از دو روش بالا).
برای شروع، با استفاده از جاوا اسکریپت ما شئ Favico
را تعریف میکنیم که شامل رنگ پس زمینه، نوع انیمیشن، رنگ متن و موقعیت نشان در فاوآیکون باشه.
var favicon = new Favico({
position :'up',
animation :'popFade',
bgColor :'#dd2c00',
textColor :'#fff0e2'
});
حالا چندتا تابع می نویسیم که شئ ما رو اجرا کنه و درنهایت اون نشان دلخواهی رو میخواییم برامون در فاوآیکون اجرا کنه.
var num = 0;
function generateNum() {
num++;
return num;
}
function showFaviconBadge() {
var num = generateNum();
favicon.badge(num);
}
function newUpdate() {
update = setInterval(showFaviconBadge, 2000);
}
var docBody = document.getElementById('site-body');
docBody.onload = newUpdate;
این کد تا حدودی شبیه به همون روش اولی بود که انجام دادیم. اول با ایجاد یک تابع اون اعداد فرضی رو که میخواستیم در نشان (همراه فاوآیکون) نوشن بدیم رو شبیه سازی کردیم. در تابع دوم که همون showFaviconBadge()
باشه، اعداد رو در نشان و نشان رو در کنار فاوآیکون قرار دایدم. تابع آخر که newUpdate()
باشه، میاد و در زمان مشخصی تابع دوم رو اجرا میکنه تا بتونیم دریافت اطلاعیه ها رو شبیه سازی کنیم. خط آخر هم ناگفته پیداست که تابع newUpdate()
رو به محض بارگذاری صفحه اجرا میکنه.
در نهایت
داخل این آموزش، یاد گرفتیم که چه طور از سربرگ مرورگر به عنوان یک رسانه برای اطلاع دادن به کاربر استفاده کنیم. ما روش های مختلفی که در وبسایت های محبوب مثل تویتر، فیس بوک و برنامه تحت وب Trello استفاده شدن رو با یه سری محدویت ها بازسازی کردیم.
باز هم ممکنه شما دوست داشته باشید یک سری تغییرات اعمال کنید که این روش ها با برنامه تحت وب شما سازگار تر بشه ولی در نهایت این مثال ها یک شورع خوب بودن و امیدوارم ازشون لذت برده باشد.
ترجمه آزاد از وبسیات tutsplus.com