Series 40 web apps are easy to build, and they make great information and entertainment apps that use frequently-updated content from the Internet. Using web development skills and tools, templates and information available from Nokia Developer, you can create an app in as little as one hour, start to finish. In this webinar, Michael from Futurice will show you how. Michael suggests that you download and install Nokia Web Tools 1.5 before the webinar to get the most out of the session. That's the toolset he will be using in the presentation. You don't need to have it installed to learn a lot, but you'll learn more if you have it handy.
1. Series 40 Developer TrainingBuild a Series 40 Web App in One HourMichael Samarin, Ph.DDirector,Developer Training and EvangelismFuturice Oy+358 40 518 18 email@example.com @MichaelSamarin
2. What Are Series 40 Web Apps W3C Widget specification (http://www.w3.org/TR/widgets/) says: Widgets are client-side applications that are authored using Web standards, but whose content can also be embedded into Web documents. Series 40 Web Apps are based on the W3C Widget specification Authored using a set of development tools provided by Nokia Targeted to be run on Series 40 mobile devices Using browser engine Nokia Browser for Series 40 (alternative name Nokia Proxy Browser, former Ovi Proxy Browser), which is pre-installed on all latest Series 40 devices and available as download for older devices.
3. What Are Series 40 Web Apps In total, there are 32 devices that support Nokia Browser (Series 40 5th Edition, Feature Pack 1 and up). http://www.developer.nokia.com/Devices/Device_specification s/?page=2&filter1=series40webapps Core use cases: Connected data-driven applications Social networking, RSS readers, trivia games,
4. Web Apps Are Not Web Pages Although developed using web standards, web apps are not the same as traditional web pages Appear and behave like standalone applications Located in application grid like regular applications A custom fit for a small-screen mobile device Package can contain local content like graphics, data samples, scripts
5. Tools for Series40 Web Apps Nokia Web Tools 1.5 Eclipse Based (Aptana Studio) web development environment Customized by Nokia for Series 40 Web apps Includes templates, libraries, code snippets, simulator, debugger, deployment options unique to Series 40 Web Apps development Bluetooth Launcher 1.5 for on- device deployment
9. MWL is limited, however covers the most common use cases that can be run on the client side: Running simple CSS transitions/animations Mobile Web Handling gestures (swipe,Library - MWL long press) Inserting new nodes to DOM Implemented natively by the Nokia Browser Client
10. Mobile Web Library - MWL CSS Manipulation Timers Misc addClass timer setInputValue removeClass stopTimer insertHTML toggleClass replaceChild switchClass scrollTo iterateClass loadURL setGroupTarget setGroupNext show hide toggle In addition to these, MWL also provides functions for registering listeners for synthetic events (gestures) and navigation keys addSwipeLeftListener(), addLongPressListener(), addNavLeftListener(), addNavUpListener(),
12. Animations and Transitions Certain properties can be animated locally on the client side: Elements width, height, margin-left and margin-top Or a combination of these Consequently, there are a few design patterns that are especially recommended Accordion Carousel Tabs
13. Animations and Transitions These have certain common advantages/properties Based on the principle of concealing/revealing content Client-local, animated transitions can be easily added When used correctly, unnecessary round trips to the Nokia Browser Proxy server are almost automatically avoided!
14. Animating Height & Width
15. Animating Margins or or
16. Important Notes on Animations Local Preview, Cloud Preview and an actual device will all work slightly differently, so dont rely overly on the simulator. GIF animations dont work in the simulator but DO on the device. Be careful with GIF, because of high CPU usage Contrary to regular browser scripting, animations on the Client are blocking Only a single element can be animated at one time for performance reasons
17. CSS Transitions The Mobile Web Library allows you to run CSS transitions on the client side No round trip to Nokia Browser Proxy server needed! Devices not supporting animated transitions automatically fall back to discrete property changes Use cases for transitions: Accordion expanding Going to a details view by clicking on a list item Search box appearing/disappearing Slide shows Current limitations: Properties you can animate: width, height, margin-left, margin-top Only top-level CSS classes can be used with MWL in animations
18. AnimatedPageChangeSample How it worksPage #1 Page #1 Page #2 Page #1 Page #2Page #2Default positioning Then we wrap both We move Page #2for the 2 pages (the pages in a container up by how high Pagedashed line is the element (red), which #1 is, and to theviewport of the we can move right by how widephone) sideways with an Page #1 is, so we get animation them side-by-side
19. Video Training https://projects.developer.nokia.com/videotraining5/2/201 192
22. Qualify for a Asha 303 Attend the webinar session. You name has to be on the attendee list. 1 entry per name Send an email firstname.lastname@example.org to register your name Subject Asha 303 for May 3rd web app webinar State the intended application you are going to write and estimate publishing date Publish your Series 40 web app to Nokia Store and pass QA. Send an email email@example.com with the name and link of your app in Nokia Store Publishing date has to be between May 3rd and July 1st