Dominik Helleberg Widgets Wjax

Mobile Webapplikationen mit Widgets
Dominik Helleberg
Vodafone Internet Services

12 November 2009

1 Mobile Webapplikationen mit Widgets Dominik Helleberg 12 November 2009

Client Dev Team

Contact us via http://www.betavine.net/
Follow us on http://twitter.com/Mobilewidgets


Mobile Client Technologien

XHTML
WAP Browser JME Objective C

1999 / 2000 2002 2005 2008


Mobile Client Technologien 2009

2009


App Stores 2009

Nokia Ovi Store
Windows Marketplace

BlackBerry App World
Apple App Store PocketGear
Handmark
Sony E/// PlayNow Android Market
LG App Store
GetJar Samsung App Store
SlideME

Intel Atom Palm App Catalogue

Mobango Java App Store


Widgets to the rescue
based on Web Technologies

> W3C Widget Spec
– preference storage, APIs, view modes, security / signing,
automatic upates, internationalization

> Basierend auf bekannten Webtechnologien
– HTML, CSS, ECMA Script, SVG


Web Technologien

> ermöglichen schnelle und einfache Entwicklung
> sind platformunabhängig
> sind skalierbar
> passen in bestehende Infrastrukturen
> sind optimal zur Frontend und User Interface Entwicklung
> sind auf dem Desktop & mobil verfügbar
> erleben eine schnelle Weiterentwicklung
> bieten umfangreiche Bibliotheken und Tools
> lösen klassische Desktop Applikationen mehr und mehr ab


Hello Widget
index.html

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title>HelloWorld</title>
</head>
<body>
<div style="color:red" >
Hello World!
</div>
</body>
</html>


Hello Widget
config.xml

<widget dockable="false">
<widgetname>HelloWorld</widgetname>
<width>320</width>
<height>240</height>
</widget>


Hello Widget
packaging

index.html

config.xml

.wgt


Mobile Widgets Features
view modes


view modes

config.xml
<widget dockable=“true” | floatable=“true”>

CSS
@media all and (-o-widget-mode:docked)
{
#mainView { display: none }
#dockedView { display: block !important }
}
#dockedView { display: none }

Script
widget.addEventListener('widgetmodechange',
function(){
if(widget.widgetMode == "docked")
{ // }
}, false);


Scalability / portability



Samsung H1 (800x480)

Nokia N97 (640x360)

Samsung M1 (400x240)

Nokia N95 (320x240)



Samsung H1 (267ppi)

Nokia N97 (210ppi)

Nokia 6710 (181ppi)
Nokia N95 (153ppi)

24inch Desktop, Full-HD'ish (94ppi)


body, html
{ font-size: 16px; }

@media all and (min-resolution: 150dpi)
{
body, html { font-size: 20px; }
}

@media all and (min-resolution: 200dpi)
{
body, html { font-size: 25px; }
}


Device APIs?

JIL


Device APIs Location

var wdev = Widget.Device.DeviceStateInfo;

wdev.onPositionRetrieved = function(posInfo)
{
mapUi.update({ latitude : posInfo.latitude,
longitude : posInfo.longitude });
}

wdev.requestPositionInfo("gps");


Device APIs Security?

W3C Digitial Signatures

http://www.w3.org/TR/widgets-digsig/


Mobile Widgets Tools

> Widget Packager

> Widget Emulator

> Desktop debugging

> On-Device-Debugging

> On-the-fly editing


Widgets Landscape 2009

> Vodafone started Widget beta in 9 Ländern
> Zielplatform Symbian S60v3 und S60v5 – 40 devices
> Kostenloser upload über Mobile Widget Platform
> App Shop ermöglicht einfache Installation und Suche
> zur Zeit ca 1500 Widgets online
> Vodafone 360 App Shop gestartet
> Widget Competition „App Star“ gestartet
> T-Mobile startet Widgets im Sommer 2009
> RIM kündigt Widget Rutime an
> Microsoft kündigt Widget Runtime an


What‘s next?

> Mehr devices, mehr Platformen
> Netzwerk APIs
> Device APIs
> Abrechnung von Widgets
> In-widget Micro Payment


Alles gut?

> Verschiedene Spec Versionen
> Funktionalität
> APIs
> 3D Grafik
> Verbreitung
> Tools


Widget Bookmarks

> http://www.jil.org/vodafone/appstar

> http://developer.vodafone.com

> http://widget.vodafone.com

> http://twitter.com/Mobilewidgets


Dominik Helleberg Widgets Wjax

Recomendados

Recomendados

Más contenido relacionado

Destacado

Destacado (17)

Similar a Dominik Helleberg Widgets Wjax

Similar a Dominik Helleberg Widgets Wjax (20)

Más de Dominik Helleberg

Más de Dominik Helleberg (17)

Dominik Helleberg Widgets Wjax