Your SlideShare is downloading. ×
0
!"#$%&'()"*&$+",(-".$"+$-/0(",(-

!"1&(2('.!./$'"-)"-(+$3$




                            !""#$%%&&&'()*+,-'+./%#!.".0%01...
what's in store?

1) the mobile web story
2) ota.bemoko.com deconstruction
3) lots of HTML, CSS, Javascript
$4(&"567"$*"
1($10(",$%08"
90!80)"2%-2./.%.("
.:(/&";<",(-"*$&"
+$-/0(",(-
=67"$*"1($10("!&("!0&(!8)"
!>>(22/'9".:(",(-"$'".:(/&"
1:$'(2




                       !""#$%%&&&'()*+,-'+./%#!.".0%52)<...
/
     .:!.">:$$2(2",:('"
     !'8",:(&(".$">$''(>.




!"#$%&'()&*+,&*-'()
/
     .:!.">:$$2(2",:('"
     !'8",:(&(".$">$''(>.




!"#$%&'()&*+,&*-'()


#+&./#0*)%
/
     .:!.">:$$2(2",:('"
     !'8",:(&(".$">$''(>.




!"#$%&'()&*+,&*-'()


#+&./#0*)%


!"%/%0%/&)"%1&2%)&#+3.#/%,
;<",/.:"!"2+!00"2>&(('
+$-/0(":!2"+$&("$11$&.%'/./(2".:!'")$%"+/9:.".:/'3
+$-/0(":!2"+$&("$11$&.%'/./(2".:!'")$%"+/9:.".:/'3


!0,!)2",/.:")$%"!'8"!0,!)2"$'
3'$,2"(?!>.0)",:(&("/."/2
-%/0."/'"8/9/...
+$-/0(":!2"+$&("$11$&.%'/./(2".:!'")$%"+/9:.".:/'3


!0,!)2",/.:")$%"!'8"!0,!)2"$'
3'$,2"(?!>.0)",:(&("/."/2
-%/0."/'"8/9/...
2.&('9.:".:&$%9:"8/4(&2/.)




!""#$%%&&&'()*+,-'+./%#!.".0%124"2@)44%99>>>A9?A
8(2/9'"
*$&"
+$-/0(A


.&)"!'8"
2B%((C("
!"0!&9("
;<"2/.("
$'.$"!"
2+!00"
2>&(('
.:(",(-"3/00(8"+)"1:$'(
/."!02$"3/00(8"+)"*/&2."/+1&(22/$'2D"%2(&"(?1(&/('>("!'8"+)"1!./('>(



                          ...
.$"-(".:/2",!)E

             $97!$%($5(;,>9!%<(7$(7#&(5,--("G()!7&()#$,-.(/(%&&.(7$(.$(>$2&4

                   !>1<&)(....
A Mobile Challenge
                              The Multiple Dimensions of Capabilities
                                 ...
site       content        context   UI   tweakers




 User Interface (UI) ... one of
 the five building blocks of
 bemoko ...
UI inheritance



content

                  iPhone   320px   basic
... store page fragments in the UI folders you want to target



content         iPhone                     320px         ...
... iPhone connects



content        iPhone            320px          basic

                        header              ...
... bemoko UI fallback algorithm assembles optimal page



content        iPhone                   320px                  ...
... optimal fragments assembled a 320px wide smartphone



content        iPhone                     320px                ...
... and tuned for small screen



content         iPhone                     320px                   basic

              ...
... all mobiles delivered beautiful pages



content         iPhone                     320px                          bas...
mobile web is ...
                    Web
   Apps             Sites



          Widgets
Tweakers
Site       Context            Content              UI

         Device   Identity    User    Content
            ...
personalised schedule
public voting




    ota.bemoko.com
OTA 2009 mobile web site


@
ota.bemoko.com
Search youtube for "bemoko" for
video of site on iPhone
... enough slides

   Let's do some dev
 HTML, CSS & JavaScript
DEV   TEST
HTML                            Simulate
CSS                              Firefox
                             ...
browser compatibility tests


@
test.bemoko.com
a  journey  from  web  to  mobile  web

a  presentation  by  bemoko




                                 http://www.flickr...
Upcoming SlideShare
Loading in...5
×

Ota

430

Published on

Published in: Technology, News & Politics
0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total Views
430
On Slideshare
0
From Embeds
0
Number of Embeds
0
Actions
Shares
0
Downloads
10
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

Transcript of "Ota"

  1. 1. !"#$%&'()"*&$+",(-".$"+$-/0(",(- !"1&(2('.!./$'"-)"-(+$3$ !""#$%%&&&'()*+,-'+./%#!.".0%01-23*45%67879:;:;
  2. 2. what's in store? 1) the mobile web story 2) ota.bemoko.com deconstruction 3) lots of HTML, CSS, Javascript
  3. 3. $4(&"567"$*" 1($10(",$%08" 90!80)"2%-2./.%.(" .:(/&";<",(-"*$&" +$-/0(",(-
  4. 4. =67"$*"1($10("!&("!0&(!8)" !>>(22/'9".:(",(-"$'".:(/&" 1:$'(2 !""#$%%&&&'()*+,-'+./%#!.".0%52)<5.04%;=>7?:;
  5. 5. / .:!.">:$$2(2",:('" !'8",:(&(".$">$''(>. !"#$%&'()&*+,&*-'()
  6. 6. / .:!.">:$$2(2",:('" !'8",:(&(".$">$''(>. !"#$%&'()&*+,&*-'() #+&./#0*)%
  7. 7. / .:!.">:$$2(2",:('" !'8",:(&(".$">$''(>. !"#$%&'()&*+,&*-'() #+&./#0*)% !"%/%0%/&)"%1&2%)&#+3.#/%,
  8. 8. ;<",/.:"!"2+!00"2>&(('
  9. 9. +$-/0(":!2"+$&("$11$&.%'/./(2".:!'")$%"+/9:.".:/'3
  10. 10. +$-/0(":!2"+$&("$11$&.%'/./(2".:!'")$%"+/9:.".:/'3 !0,!)2",/.:")$%"!'8"!0,!)2"$' 3'$,2"(?!>.0)",:(&("/."/2 -%/0."/'"8/9/.!0">!+(&! >!'"10!)"&/>:"+(8/! /'.(&'(."!>>(22 !'8"$*">$%&2(" .(0(1:$'(@
  11. 11. +$-/0(":!2"+$&("$11$&.%'/./(2".:!'")$%"+/9:.".:/'3 !0,!)2",/.:")$%"!'8"!0,!)2"$' 3'$,2"(?!>.0)",:(&("/."/2 -%/0."/'"8/9/.!0">!+(&! >!'"10!)"&/>:"+(8/! /'.(&'(."!>>(22 !'8"$*">$%&2(" .(0(1:$'(@ )$%&",(-2/.(2 +$-/0/2(".:(+@
  12. 12. 2.&('9.:".:&$%9:"8/4(&2/.) !""#$%%&&&'()*+,-'+./%#!.".0%124"2@)44%99>>>A9?A
  13. 13. 8(2/9'" *$&" +$-/0(A .&)"!'8" 2B%((C(" !"0!&9(" ;<"2/.(" $'.$"!" 2+!00" 2>&(('
  14. 14. .:(",(-"3/00(8"+)"1:$'( /."!02$"3/00(8"+)"*/&2."/+1&(22/$'2D"%2(&"(?1(&/('>("!'8"+)"1!./('>( !"#$%&'()$(*#+()#$,-.(/(012&3 )$>&*#&2&(#&2&(!)(1(-$<!%(8,77$%@ *#+3(+$,(:%$*(*#$(/(1>? )71273 !5(/()6,!%7(#12.'(7#!)(!)(1()7$2&( -$017$24(8,7(),2&-+(7#&(9#$%&(:%$*)( *#&2&(!7(!)( ;,)7(<!=&(>&(7#&(0-$)&)7( )7$2&?( #&2&4 7#!)(*#$-&(91<&(*1)($=&2(ABC(DE'( )$(>1%+(-!%:)'(&=&%(!5(/(0$,-.( !7( 2&1.(7#&>'(#$*(>1%+(.$(/(2&1--+( %&&.(*#&%($,7@1%.@18$,73
  15. 15. .$"-(".:/2",!)E $97!$%($5(;,>9!%<(7$(7#&(5,--("G()!7&()#$,-.(/(%&&.(7$(.$(>$2&4 !>1<&)(.&-!=&2&.(7#&(0$22&07()!F&(5$2(>+( )02&&%'()1=!%<(>&(7!>&(1%.(>$%&+4 <2&17'(7#&(91<&(!)($97!>!)&.(7$(71:&(5,--(1.=1%71<&( $5(7#!)(&H9&%)!=&(9#$%&(/(;,)7(8$,<#7 0$%7&%7(9&2)$%1-!)&.(5$2(>&(*!7#$,7( 1):!%<(>&(7$(-$<!% &1)+(7$(92&))(8,77$%)( 9&25&07(5$2(,)&($%(1(7$,0#)02&&% 9#$%&(-!:&(7#!)
  16. 16. A Mobile Challenge The Multiple Dimensions of Capabilities size medium large Capabilities css CSS Size CSS Blackberry 8200 Blackberry 8800 JavaScript AJAX css enabled css enabled As the number of targetted Media capabilities increases, the complexity of UI management can Vendor iPhone no css exponentially increase without an appropriate scalable UI development Forms Blackberry 8200 Blackberry 8800 approach. default default Copyright bemoko 2009
  17. 17. site content context UI tweakers User Interface (UI) ... one of the five building blocks of bemoko mobile web development
  18. 18. UI inheritance content iPhone 320px basic
  19. 19. ... store page fragments in the UI folders you want to target content iPhone 320px basic header header menu menu body UIs page fragments
  20. 20. ... iPhone connects content iPhone 320px basic header header menu menu body device UIs iPhone page fragments
  21. 21. ... bemoko UI fallback algorithm assembles optimal page content iPhone 320px basic header header menu menu body header menu body page device UIs iPhone page fragments
  22. 22. ... optimal fragments assembled a 320px wide smartphone content iPhone 320px basic header header menu menu body header header menu menu body body page device UIs iPhone 320px page fragments
  23. 23. ... and tuned for small screen content iPhone 320px basic header header menu menu body header header header menu menu menu body body body page device UIs iPhone 320px 120px page fragments
  24. 24. ... all mobiles delivered beautiful pages content iPhone 320px basic header header menu menu body header header header header header header menu menu menu menu menu menu body Easy, flexible and body body body body body unconstrained mobile optimisation with bemoko. page device UIs iPhone 320px iPhone 320px 240px 120px page fragments
  25. 25. mobile web is ... Web Apps Sites Widgets
  26. 26. Tweakers Site Context Content UI Device Identity User Content Profile Plugins Location CMS UI Design Parent Site Rich e.g. iPhone app Inherit High Basic
  27. 27. personalised schedule public voting ota.bemoko.com
  28. 28. OTA 2009 mobile web site @ ota.bemoko.com Search youtube for "bemoko" for video of site on iPhone
  29. 29. ... enough slides Let's do some dev HTML, CSS & JavaScript
  30. 30. DEV TEST HTML Simulate CSS Firefox Safari JavaScript Geolocation Emulate AJAX iPhone SDK jQuery Android SDK jQtouch Blackberry Simulator Nokia RDA Widgets Tweakers Webtest Site inheritance Real Devices
  31. 31. browser compatibility tests @ test.bemoko.com
  32. 32. a  journey  from  web  to  mobile  web a  presentation  by  bemoko http://www.flickr.com/photos/sgrazied/230319696
  1. A particular slide catching your eye?

    Clipping is a handy way to collect important slides you want to go back to later.

×