04 - developing a mobile web site
DESCRIPTION
Desenvolver em MoblileTRANSCRIPT
![Page 1: 04 - Developing a Mobile Web Site](https://reader035.vdocuments.mx/reader035/viewer/2022062407/55cf8f5d550346703b9ba257/html5/thumbnails/1.jpg)
Microsoft Virtual Academy
David Catuhe | Principal Program ManagerEtienne Margraff | Technical Evangelist
How to debug a website using IE F12 tools
![Page 2: 04 - Developing a Mobile Web Site](https://reader035.vdocuments.mx/reader035/viewer/2022062407/55cf8f5d550346703b9ba257/html5/thumbnails/2.jpg)
Course Topics
How to debug a website using IE F12 tools
01 | Working with web standards02 | Debugging with the console and the debugger windows
03 | Optimizing your page04 | Developing a mobile web site
05 | Testing on all browsers
![Page 3: 04 - Developing a Mobile Web Site](https://reader035.vdocuments.mx/reader035/viewer/2022062407/55cf8f5d550346703b9ba257/html5/thumbnails/3.jpg)
Setting Expectations
• Target Audience–Web developers
• Suggested Prerequisites/Supporting Material– Internet Explorer 11
![Page 4: 04 - Developing a Mobile Web Site](https://reader035.vdocuments.mx/reader035/viewer/2022062407/55cf8f5d550346703b9ba257/html5/thumbnails/4.jpg)
Click to edit Master subtitle style
Microsoft Virtual Academy
04 | Developing a mobile web site
David Catuhe | Principal Program ManagerEtienne Margraff | Technical Evangelist
![Page 5: 04 - Developing a Mobile Web Site](https://reader035.vdocuments.mx/reader035/viewer/2022062407/55cf8f5d550346703b9ba257/html5/thumbnails/5.jpg)
Module Overview
• Using Visual Studio
• Tools
• Challenges with mobile websites
![Page 6: 04 - Developing a Mobile Web Site](https://reader035.vdocuments.mx/reader035/viewer/2022062407/55cf8f5d550346703b9ba257/html5/thumbnails/6.jpg)
Developing a mobile web site
Using Visual Studio
![Page 7: 04 - Developing a Mobile Web Site](https://reader035.vdocuments.mx/reader035/viewer/2022062407/55cf8f5d550346703b9ba257/html5/thumbnails/7.jpg)
Debugging in Visual Studio
• Download the Visual Studio installer
• Be sure to check Windows Phone SDK
![Page 8: 04 - Developing a Mobile Web Site](https://reader035.vdocuments.mx/reader035/viewer/2022062407/55cf8f5d550346703b9ba257/html5/thumbnails/8.jpg)
Debugging in Visual Studio
• Turn on the Standard toolbar
• The Debug menu will now have Windows Phone as an option
![Page 9: 04 - Developing a Mobile Web Site](https://reader035.vdocuments.mx/reader035/viewer/2022062407/55cf8f5d550346703b9ba257/html5/thumbnails/9.jpg)
Debugging in Visual Studio
• You can now debug your site in the emulator
![Page 10: 04 - Developing a Mobile Web Site](https://reader035.vdocuments.mx/reader035/viewer/2022062407/55cf8f5d550346703b9ba257/html5/thumbnails/10.jpg)
Developing a mobile web site
Demo
![Page 11: 04 - Developing a Mobile Web Site](https://reader035.vdocuments.mx/reader035/viewer/2022062407/55cf8f5d550346703b9ba257/html5/thumbnails/11.jpg)
Developing a mobile web site
Tools
![Page 12: 04 - Developing a Mobile Web Site](https://reader035.vdocuments.mx/reader035/viewer/2022062407/55cf8f5d550346703b9ba257/html5/thumbnails/12.jpg)
Install Web Essentials Plugin
• Tools -> Extensions and Updates
![Page 13: 04 - Developing a Mobile Web Site](https://reader035.vdocuments.mx/reader035/viewer/2022062407/55cf8f5d550346703b9ba257/html5/thumbnails/13.jpg)
Enable BrowserLink Dashboard
• Click the Enable option in the toolbar
• Open the Dashboard
![Page 14: 04 - Developing a Mobile Web Site](https://reader035.vdocuments.mx/reader035/viewer/2022062407/55cf8f5d550346703b9ba257/html5/thumbnails/14.jpg)
BrowserLink
• Design, Inspect mode allows you to choose an element and pull it up in VS
![Page 15: 04 - Developing a Mobile Web Site](https://reader035.vdocuments.mx/reader035/viewer/2022062407/55cf8f5d550346703b9ba257/html5/thumbnails/15.jpg)
BrowserLink
![Page 16: 04 - Developing a Mobile Web Site](https://reader035.vdocuments.mx/reader035/viewer/2022062407/55cf8f5d550346703b9ba257/html5/thumbnails/16.jpg)
BrowserLink
• Might need this if working with a static HTML file <system.webServer>
<handlers>
<add name="Browser Link for HTML" path="*.html" verb="*"
type="System.Web.StaticFileHandler, System.Web, Version=4.0.0.0, Culture=neutral, PublicKeyToken=b03f5f7f11d50a3a"
resourceType="File" preCondition="integratedMode" />
</handlers>
</system.webServer>
![Page 17: 04 - Developing a Mobile Web Site](https://reader035.vdocuments.mx/reader035/viewer/2022062407/55cf8f5d550346703b9ba257/html5/thumbnails/17.jpg)
Developing a mobile web site
Demo
![Page 18: 04 - Developing a Mobile Web Site](https://reader035.vdocuments.mx/reader035/viewer/2022062407/55cf8f5d550346703b9ba257/html5/thumbnails/18.jpg)
Developing a mobile web site
Challenges with mobile websites
![Page 19: 04 - Developing a Mobile Web Site](https://reader035.vdocuments.mx/reader035/viewer/2022062407/55cf8f5d550346703b9ba257/html5/thumbnails/19.jpg)
Mobile Should Just Work
• A priority for the web to just work anywhere
• DO NOT USE browser detection
• Stop targeting webkit prefixes and focus on standards
• Mobile IE automatically maps webkit prefixes to the appropriate standard
• Support both mouse AND touch
![Page 20: 04 - Developing a Mobile Web Site](https://reader035.vdocuments.mx/reader035/viewer/2022062407/55cf8f5d550346703b9ba257/html5/thumbnails/20.jpg)
Multi-input Devices
• We use to be able to rely on a single pointing device: the mouse
• But now users have multiple input devices!– Surface Pro: touch screen, but also possibly a mouse and
stylus!
• This is the impetus for "pointer" events– allows handling of any input type with proper data using a
single API
![Page 21: 04 - Developing a Mobile Web Site](https://reader035.vdocuments.mx/reader035/viewer/2022062407/55cf8f5d550346703b9ba257/html5/thumbnails/21.jpg)
Mouse vs Touch vs Pointer
• In the past, we attached to mouse events like "click" and mouseover
• Then browsers added touch events for capacitive screens– These included things like touchstart and touchmove– Comabinable to simulate things as tap and swipe events
• Now we have pointer events to unify both concepts– Uses abstract terms to cover mouse, finger, stylus, etc.
21
![Page 22: 04 - Developing a Mobile Web Site](https://reader035.vdocuments.mx/reader035/viewer/2022062407/55cf8f5d550346703b9ba257/html5/thumbnails/22.jpg)
Touch and Hover
• Without a mouse: cursor, hovering doesn't really exist
• Most browsers will add the :hover and :active CSS pseudoclasses to elements that receive a touchstart event
• In IE this only is true only while the finger is down(some other browsers hold the pseludocass until the next tap)
![Page 23: 04 - Developing a Mobile Web Site](https://reader035.vdocuments.mx/reader035/viewer/2022062407/55cf8f5d550346703b9ba257/html5/thumbnails/23.jpg)
Touch and Hover
<style>
img ~ .caption {
display: none;
}
img:hover ~ .caption {
display: block;
}
/* END
</style>
<img src="chart.png">
<p class="caption">This chart has many lines...</p>
Note : The caption text above will display when the user taps on the image
![Page 24: 04 - Developing a Mobile Web Site](https://reader035.vdocuments.mx/reader035/viewer/2022062407/55cf8f5d550346703b9ba257/html5/thumbnails/24.jpg)
Pointer Events
• Intended to abstract any input to a single set of events
• Default browser action and data can vary depending on input type
• Currently only fully supported in IE 10+– IE 10 requires the ms vendor prefix to use–W3C candidate recommendation
![Page 25: 04 - Developing a Mobile Web Site](https://reader035.vdocuments.mx/reader035/viewer/2022062407/55cf8f5d550346703b9ba257/html5/thumbnails/25.jpg)
Pointer Events
• Pointer events – generally mimic existing mouse events– are fired from any pointing input device (stylus or finger):
• We also get the pointercancel event (same as touchcancel)
mousedownmouseentermousemove
mouseup
=> pointerdown=> pointerenter=> pointermove=> pointerup
![Page 26: 04 - Developing a Mobile Web Site](https://reader035.vdocuments.mx/reader035/viewer/2022062407/55cf8f5d550346703b9ba257/html5/thumbnails/26.jpg)
Handling Pointer Events
• Pointer events are handled just like any other:
someElement.addEventListener("pointerdown", function (evt) {
// handle just like you might a "mousedown" event,
// but you can inspect evt.pointerType to tailor actions to input type
});
![Page 27: 04 - Developing a Mobile Web Site](https://reader035.vdocuments.mx/reader035/viewer/2022062407/55cf8f5d550346703b9ba257/html5/thumbnails/27.jpg)
Using Hand.js
• This is a polyfill for the pointer events specification
• It allows a developer to handle pointer events across most browsers
• No need to handle –mousexxx and touchxxx events for other browsers – pointerxxx for IE
![Page 28: 04 - Developing a Mobile Web Site](https://reader035.vdocuments.mx/reader035/viewer/2022062407/55cf8f5d550346703b9ba257/html5/thumbnails/28.jpg)
Using Hand.js
• Using the library is simple, include the library JS file and use pointer events:
<script src="hand.minified-1.2.1.js"></script>...<script> someElement.addEventListener("pointerdown", function (evt) { //works in all major browsers! });</script>
![Page 29: 04 - Developing a Mobile Web Site](https://reader035.vdocuments.mx/reader035/viewer/2022062407/55cf8f5d550346703b9ba257/html5/thumbnails/29.jpg)
Using Hand.js
• Note that various event object properties will be filled in with defaults– If the browser does not provide information on tilt, for
example, it will be zero (0)
• Additionally, the pointerType will simply be set to mouse for non-supported browsers
• Lastly, setting the pointer capture element is not supported (polyfilled)
![Page 30: 04 - Developing a Mobile Web Site](https://reader035.vdocuments.mx/reader035/viewer/2022062407/55cf8f5d550346703b9ba257/html5/thumbnails/30.jpg)
Developing a mobile web site
Demo
![Page 31: 04 - Developing a Mobile Web Site](https://reader035.vdocuments.mx/reader035/viewer/2022062407/55cf8f5d550346703b9ba257/html5/thumbnails/31.jpg)
©2014 Microsoft Corporation. All rights reserved. Microsoft, Windows, Office, Azure, System Center, Dynamics and other product names are or may be registered trademarks and/or trademarks in the U.S. and/or other countries. The information herein is for informational purposes only and represents the current view of Microsoft Corporation as of the date of this presentation. Because Microsoft must respond to changing market conditions, it should not be interpreted to be a commitment on the part of Microsoft, and Microsoft cannot guarantee the accuracy of any information provided after the date of this presentation. MICROSOFT MAKES NO WARRANTIES, EXPRESS, IMPLIED OR STATUTORY, AS TO THE INFORMATION IN THIS PRESENTATION.