Essential html tweaks for accessible themes
Die SlideShare-Präsentation wird heruntergeladen.
×
Hier ansehen
Weitere Verwandte Inhalte
Diashows für Sie (20)
Andere mochten auch (20)
Ähnlich wie Pinned Sites in Internet Explorer 9 (20)
Weitere von Abram John Limpin (8)
Aktuellste (20)
Pinned Sites in Internet Explorer 9
- 1. Pinned Sites + Internet Explorer 9 Integrating Your Site With Windows 7 <ul><li>Abram John Limpin </li></ul><ul><li>http://abramlimpin.com </li></ul>
- 2. Agenda PAGE The Pinned Site Opportunity Who’s Using It Today Building A Pinned Experience
- 3. Web Sites As Applications How does the web become more app like? Immersive Fast Focused Clean Consistent PAGE
- 4. A Real World Pinned Site <ul><li>Demo </li></ul>
- 5. Site Mode Features Jump Lists Customized Jump Lists Thumb Bar Buttons Notifications Browser UI Customizations PAGE
- 6. Behind The Scenes: Site Mode <ul><li>Creates an isolated instance of Internet Explorer </li></ul><ul><li>Generates a unique AppID for a specific URL </li></ul><ul><li>BHOs and other toolbars are not enabled </li></ul><ul><li>Shares the same screen real estate as other Windows applications </li></ul>PAGE
- 7. Enhancing Your Site: The Basics <ul><li>Demo </li></ul>
- 8. The Basics Use meta elements to provide custom details <ul><ul><li><link rel="shortcut icon" href="/favicon.ico" /> </li></ul></ul><ul><li><meta name="application-name" content="Pinned Name" /> </li></ul><ul><li><meta name="msapplication-tooltip" content="Start Site" /> </li></ul><ul><li><meta name="msapplication-starturl" content="http://host/page.htm" /> </li></ul><ul><li><meta name="msapplication-window" content="width=1024;height=768" /> </li></ul><ul><li><meta name="msapplication-navbutton-color" content="#FF3300" /> </li></ul>PAGE
- 9. Enhancing Your Site: Adding Jump Lists <ul><li>Demo </li></ul>
- 10. Adding Jump Lists <ul><ul><li><meta name="msapplication-task" </li></ul></ul><ul><ul><li>content="name=New Message;action-uri=http://host/NewMail.htm; </li></ul></ul><ul><ul><li>icon-uri=http://host/mail.ico"/> </li></ul></ul>PAGE
- 11. Enhancing Your Site: Providing Notifications <ul><li>Demo </li></ul>
- 12. Providing Notifications <ul><li>window.external.msSiteModeSetIconOverlay('http://host/star.ico', </li></ul><ul><li>'Complete'); </li></ul><ul><li>window.external.msSiteModeClearIconOverlay(); </li></ul>PAGE
- 13. Enhancing Your Site: Creating Custom Jump Lists <ul><li>Demo </li></ul>
- 14. Creating Custom Jump Lists <ul><li>window.external.msSiteModeCreateJumplist('Notifications'); </li></ul><ul><li>window.external.msSiteModeAddJumpListItem('Scrum (37 minutes overdue)', </li></ul><ul><li>'http://host/reminders.html', 'http://host/images/bell.ico'); </li></ul><ul><li>window.external.msSiteModeShowJumpList(); </li></ul>PAGE
- 15. Enhancing Your Site: Adding Thumbnail Buttons <ul><li>Demo </li></ul>
- 16. Adding Thumbnail Buttons <ul><li>var but1 = window.external.msSiteModeAddThumbBarButton( </li></ul><ul><li>'http://host/speaker.ico', 'Mute'); </li></ul><ul><li>document.addEventListener('msthumbnailclick', handler, false); </li></ul><ul><li>window.external.msSiteModeShowThumbBar(); </li></ul>PAGE
- 17. Summary PAGE
- 18. Resources <ul><li>Internet Explorer Developer Center </li></ul><ul><ul><li>http://msdn.com/ie </li></ul></ul><ul><li>Pinned Site Guide </li></ul><ul><ul><li>http://msdn.microsoft.com/library/gg131029(VS.85).aspx </li></ul></ul><ul><li>Windows User Experience Interaction Guidelines </li></ul><ul><ul><li>http://msdn.microsoft.com/en-us/library/aa511446.aspx </li></ul></ul><ul><li>Channel 9 Taskbar Related Videos </li></ul><ul><ul><li>http://channel9.msdn.com/tags/Taskbar/ </li></ul></ul><ul><li>Icon Guidelines </li></ul><ul><ul><li>http://msdn.microsoft.com/en-us/library/aa511280.aspx </li></ul></ul><ul><li>Icon Editor </li></ul><ul><ul><li>http://www.xiconeditor.com/ </li></ul></ul>PAGE
- 19. Thank you! <ul><li>Questions </li></ul>
