![]() ![]() You can connect to your device wirelessly, and use your browsers normal error console to get helpful messages that will help debug your applications. To learn more, head over the excellent HTML5Rocks article on Developing for Mobile Touch by Boris Smus, and head to the bottom of the page near “Developer Tools” to read more.ĭeveloper tool from Adobe that allows you to use your desktop computer as a debug console for mobile devices. It can be a bit tricky to install, but totally worth it… if you’re having problems installing it, you’ll need to compile it on your own, and in XCode you’ll want to click on “fix errors” and switch the code over to the latest SDK. Tongseng allows developers to use the MacBook pro touch pad as if it were an iPad, transmitting touch events to the browser. In developing Sketch Mobile, a few other projects were indispensable in helping to shave a time in the development process, and make life easier Keeps track of scaling, event bubbling, bounding boxes, and other things manually, in order to make sure things work the same across browsers.2+ finger pinch, and rotate-Customizable, from 2 to 12 fingers.1+ finger tap, taphold, drag, and swipe-Customizable, from 1 to 12 fingers.1 finger click, dblclick, and dbltap-Ghost onclick event shaves off 300ms on response.The primary features of the library includes Event.js is available to you at Github ( ) under the MIT license. I ended up putting together one of the most complete events libraries available-this library is especially relevant if you’re building a HTML5 Canvas application, as it takes into account CSS zooming. Var ratio = Math.min(width, height) * 100 > 0 ĭ = ratio + "%" Īnother hurdle in creating Sketch Mobile was getting the Events working the same across devices, and prototyping missing event features such as gesture support. The only Javascript required for this scalability is the “font-size” on the html/body-everything else uses em’s or %’s to scale from what that “font-size” was set to, looking like this var width = window.innerWidth / 1280 ![]() My favorite resource for creating your custom fonts is IcoMoon ( ), they make generating Icon Fonts a snap! Check it out ? Icon Fonts allow you to create a package consisting of your own custom SVG illustrations, which are embedded with the CSS3 attribute the best part is, this feature is supported by all modern browsers ( ). In order to achieve this resolution independence we had to throw raster images out the window instead we opted to use Icon Fonts along with some fancy CSS3 designed/coded by Daniel Christopher. One of the biggest challenges in this project was creating a design that would work as well on a 30” monitor, as it would on an iPhone display-without programming separate designs for each of them. localStorage-used to keep configuration when user comes back.Icon Fonts-used for all the graphical elements within the application.Gyroscope-controls where the drips go using spray paint tool.CSS3-used to create responsive design, looking the same on mobile devices as on desktop computers.This has long been one of my favorite HTML5 elements ? Canvas-used to create the drawing area and outputs of all the tools pixel/vector based tools.Accelerometer-shake the device to clear the drawing like an Etch-a-Sketch.This is a short rundown of some of the technologies used to create the Sketch Mobile app It was an exciting project to be part of, I hope you enjoy! Sketch Mobile is a drawing app build for mobile browsers taking advantage of technologies such as multi-touch, the accelerometer, and the gyroscope providing a fun & novel environment to express yourself in colorful ways ? Sketch Mobile was commissioned by Google as part of the Mobile Chrome Experiments released at Google I/O show in San Francisco.
0 Comments
Leave a Reply. |
AuthorWrite something about yourself. No need to be fancy, just an overview. ArchivesCategories |