Development tools - Mobile Web Development

Development tools – Mobile Web Development

In this lesson, we're going to be discussing the Chrome developer tools, which enable you to analyze and debug, your web applications. Peter's, going to tell you more about them. >> Now you may already, be familiar with the dev tools. But, what's really exciting, about them, is that you can now, easily ,use these

Mobile UI and UX Design Tutorial - Section 1: Example of Strong UX UI Design
Mobile device pixels - Mobile Web Development

Mobile device pixels – Mobile Web Development

mobile devices not only have different numbers of actual pixels but they fit very different numbers of pixels into each inch of screen real estate so to get roughly consistent formatting they pass different numbers of layout pixels into the viewport this chart shows the number of physical pixels for each device their device pixel

Pointer events - Mobile Web Development

Pointer events – Mobile Web Development

to rectify this situation Microsoft made a standards proposal that reconciles touch events and mouse events and pen input two into one model called pointer events so you'll notice that pointer events are currently only natively implemented on Internet Explorer and ie mobile for all the other browsers out there you're going to need a

Application cache - Mobile Web Development

Application cache – Mobile Web Development

so the first major component we're going to dive into to help is the html5 application cache this lets you provide a local cache of HTML files CSS JavaScript images any other resources your client web app may use and get the browser to use them even before it tries to hit the network so

Welcome - Mobile Web Development

Welcome – Mobile Web Development

welcome to CS 256 mobile web development we're here to teach you to apply your web development skills to this and to this because as you're probably aware the mobile web is kind of a big deal most statistics project that mobile web usage will soon overtake desktop web usage so you might ask what's

Webcam access - Mobile Web Development

Webcam access – Mobile Web Development

so let's use these features to implement a profile picture taker in our conference app I've included the framework for a camera control in the conference app already you'll need to fill in the interesting bits here first here's the code that gets called when the user starts up the camera and right here you

Min and Max Scale - Mobile Web Development

Min and Max Scale – Mobile Web Development

there are also minimum scale and maximum scale properties to which is a way to limit the extents that the system is allowed to scale the page on the device this seems a little esoteric at first but there is one use that I wanted to mention I don't want you to think that I'm

Differences of mobile web - Mobile Web Development

Differences of mobile web – Mobile Web Development

for example the Google News experience on the desktop shows a lot of information but the mobile experience focuses on just the news stories pushing all the secondary information out of the way you'll learn how to write code that adapts to different screen sizes and also how to make your code work offline you'll

Changing Viewport Settings - Mobile Web Development

Changing Viewport Settings – Mobile Web Development

although typically viewport is only being set on load you can actually play around with the viewport settings in the development tools to tweak it and get it just right if I go into the page and set the viewport meta element contents from the mobile dev tools it will change the page as if