כיצד לתת למשתמשים ב – IE9 חווית משתמש טובה יותר בעזרת Pin Site.
הקדמה:
בהרצאה שלי ב – SDP על IE9, HTML5, CSS3 דברתי על התכונות החדשות של הדפדפן, בפוסט זה נראה חלק מהתכונות המעניינות של הדפדפן.
כמשתמשים במערכת ההפעלה Windows 7 אנחנו יודעים שאפשר לנעוץ אפליקציות ב – Task Bar וליהנות ממגוון אופציות כמו Jump List בלחיצה ימנית על האפליקציה.
בנוסף יש לנו את ה – Thumbnail ולפעמים יש בו לחצנים - לדוגמא
ניתן להפעיל פונקציונליות על אפליקציה מבלי לפתוח אותה, בפוסט זה נראה כיצד ניתן לעשות את כל הדברים האלו ב – IE9 לאתרים.
לינקים:
באתר של מייקרוסופט יש דוקומנטציה מלאה לנושא עם הרבה דוגמאות קוד.
מימוש של חלק מהנושאים המדוברים כאן יש באתר "ערוץ מכללת סלע"
נושאים:
- Pin Site
- Jump List
- Thumbnail
- Notifications
Pin Site
כדי לאפשר לאתר שלנו להינעץ בתוך ה – task bar צריך להוסיף מספר תגי meta שיגדירו מה לעשות, שאר הדפדפנים פשוט יתעלמו מאותם תגים, לדוגמא:
<meta name="application-name" content="SDP 2011" />
<meta name="msapplication-tooltip" content="Sela Developer Practice 2011" />
<meta name="msapplication-window" content="width=1024;height=768" />
<meta name="msapplication-navbutton-color" content="#FF3300" />
התג הראשון מגדיר את השם לאתר שלנו, התג שלאחריו מגדיר tool tip, התג שלאחריו מגדיר את גודל החלון שיפתח בזמן לחיצה ב – task bar, והתג האחרון מאפשר לשנות את צבע לחצני הניווט בדפדפן כדי שלמשתמש תהיה חוויה שהוא נמצא בתוך האתר שלנו.
בנוסף יש גם תג בשם msapplication-starturl שמאפשר לנו להגדיר את ה – url שלחיצה על הלינק ב – task bar יפתח (כברירת מחדל הוא פותח את הדף שממנו נעצו אותו ב – task bar)
Static Jump List
כדי להוסיף Jump List סטטי לאתר (יראו אותם בלחיצה ימנית על האתר) שוב נשתמש במספר תגי meta
<meta name="msapplication-task" content="name=SCC Home Page;
action-uri=http://scc.sela.co.il;
icon-uri=../scc.ico" />
<meta name="msapplication-task" content="name=Sela Home Page;
action-uri=http://www.sela.co.il/;
icon-uri=../sela.ico" />
<meta name="msapplication-task-separator" content="Sela Pages" />
<meta name="msapplication-task" content="name=Shlomo Goldberg Blog;
action-uri=http://blogs.microsoft.co.il/blogs/shlomo/;
icon-uri=../favicon.ico" />
אפשר לראות שימוש בתג msapplication-task שמקבל כפרמטר את הטקסט להיכן זה יפנה ותמונה, בנוסף אפשר גם להגדיר מפרידים בין tasks. בסופו של תהליך זה יראה כך:
Dynamic Jump List
לפעמים נרצה לאפשר Jump List יותר דינמי ולשנות את התוכן של ה – Tasks לפי כל מיני פרמטרים (סוג המשתמש, מידע עדכני, ועוד), כדי לעשות זאת נצטרך להשתמש במתודות הבאות. (כל המתודות שייכות ל – window.external)
// Determines whether the current page was launched as a pinned site.
msIsSiteMode()
// Deletes the Jump List.
msSiteModeClearJumpList()
// Creates a new group of items on the Jump List.
msSiteModeCreateJumpList(title)
// Adds a new entry to the Jump List of a taskbar button.
msSiteModeAddJumpListItem(name, url, icon)
// Shows updates to the list of items in a Jump List.
msSiteModeShowJumplist()
ראשית תמיד חייבים לבדוק האם msIsSiteMode (האם האתר נעוץ) ורק אז ניתן להפעיל את שאר הפונקציות, אפשר להוסיף עד עשרים אבל בפועל יראו רק עשרה.
Thumbnail
כדי לאפשר למשתמש להוסיף לחצנים בתוך חלון ה – preview ב – windows 7 במידה והאתר נעוץ ב – task bar נצטרך להשתמש במספר פונקציות שמיד נכיר.
כמה נקודות לפני.
אפשר להוסיף עד שבעה לחצנים (גודל חלון ה – preview נקבע לפי מספר הלחצנים).
אחרי שקראנו למתודה שתפקידה להגיד "הצג את הלחצנים" אי אפשר להוסיף עוד לחצנים.
הלחצנים חיים ב – context של הטאב, בהתבסס על הסעיף הקודם, אם בעמוד הראשון יצרנו שלושה לחצנים אי אפשר בעמוד הנוכחי (באותו טאב) להוסיף עוד לחצן וחייבים לייצר את אותם לחצנים בדיוק כמו שיצרנו אותם בעמוד הקודם.
ניתן להסתיר לחצנים, ניתן להגדיר ללחצנים מצב disabled, ניתן לשנות את התמונה של הלחצן (כדי לאפשר מצב של לחצן כפול – כמו mute, unmute)
הנה המתודות שנצטרך להשתמש בהם.
// Determines whether the current page was launched as a pinned site.
msIsSiteMode()
// Adds a button to the Thumbnail Toolbar.
btnId = msSiteModeAddThumbBarButton(icon, tool tip)
// Defines an alternate icon image and tooltip for the specified button.
styleId = msSiteModeAddButtonStyle(btnId, icon, tool tip)
// Enables the Thumbnail Toolbar in the thumbnail preview of a pinned site.
msSiteModeShowThumbBar()
// Occurs when a user clicks a button in a Thumbnail Toolbar.
msthumbnailclick
// Changes the state of a Thumbnail Toolbar button.
msSiteModeUpdateThumbBarButton(btnId, enable, visible)
// Changes the icon image and tooltip of a Thumbnail Toolbar button.
msSiteModeShowButtonStyle(btnId, styleId)
כרגיל בהתחלה נבדוק האם אנחנו נמצאים במצב של pin, לאחר מכן נוכל להשתמש בפונקציה של add כדי להוסיף לחצנים נוספים (עד 7) כשכל קריאה תחזיר מספר כלשהו המייצג את הלחצן (יש לשמור את המספר במשתנה גלובלי כלשהו כדי שנוכל להבחין לאחר מכן על איזה לחצן המשתמש לחץ).
נוכל להוסיף ללחצן style (המאפשר לנו להגדיר לחצנים עם מצב החלפה – כמו play, pause)
בסוף התהליך נשתמש ב – show כדי להציג את כל הלחצנים.
ניתן להירשם לאירוע msthumbailclick המקבל כפרמטר בין היתר גם את מספר הלחצן.
if (typeof (onThumbnailButtonClicked) == "function") {
if (document.addEventListener) {
document.addEventListener('msthumbnailclick', onThumbnailButtonClicked, false);
}
else if (document.attachEvent) {
document.attachEvent('onmsthumbnailclick', onThumbnailButtonClicked);
}
}
function onThumbnailButtonClicked(btn) {
if (btn.buttonID == btnMute) {
}
}
נוכל להשתמש בפונקציה update כדי להציג או להסתיר לחצנים.
ונוכל להשתמש בפונקציה showButtonStyle כדי לשנות את התמונה של הלחצן.
Notifications
ישנם שני סוגי התראות שנוכל לתת למשתמש שמשהו קורה באתר שלנו (בזמן שהאתר נעוץ), האחד בעזרת icons והשני בעזרת הבהוב.
בעזרת הבהוב זה מאוד פשוט, במידה והאתר נעוץ וממוזער ומשהו קורה באתר ואנחנו רוצים למשוך את תשומת לבו של המשתמש, נוכל לקרוא לפונקציה msSiteModeActivate שתגרום לכך שהאתר יתחיל להבהב למשך עשרים שניות.
במידה ונרצה משהו יותר חכם, נוכל להשתמש בפונקציה msSiteModeSetIconOverlay(Icon, Description) שתוסיף על ה – icon בשורת המשימות icon אחר, בסוף התהליך נוכל להשתמש בפונקציה msSiteModeClearIconOverlay כדי להחזיר אותו למצב רגיל.