wiki:BluePrint/Mobile/Portal

Version 20 (modified by Fran Boon, 12 years ago) ( diff )

--

Mobile Portal

Provide a simple portal for access from devices with low bandwidth/screen sizes/ CPU.

  • should also support Touch events

This acts like the '/m' version of popular websites.

Example:

Theme which works well on both Desktops & Mobiles:

We need to :

  • Detect that a mobile device is being used
  • Provide an optimised screen size & navigation
    • Could use the existing RESTlike CRUD controller's ?format=plain to generate lightweight forms.
  • Work on low-bandwidth/high latency

jQuery Mobile

Detection:

Bandwidth savers:

Use far-future cache expiration headers. This will prevent the browser from having to send a conditional GET request. Try to limit HTML pages to 25.6KB or less if you want them to be cached, since the previous tests showed that this limit—imposed by iOS 3.2 on the iPad—was the lowest HTML resource limit of the devices tested. Keep CSS and JS components under 1MB. Of course, 1MB is enormous and your components should be much smaller than this, but don’t bother splitting a component into separate requests for the sake of cacheability unless its size approaches 1MB. Consider using the HTML5 application cache if it’s important that your components persist in the cache for a long time, or across power cycles.

Mobile Emulators:

Web2Py support

Old:

Detection:

New Web2Py method (developed since we developed ours):

MENU(mobile=True):

Plugin to use jQuery Mobile:

Status

session.s3.mobile boolean is populated by a quick check on the Browser in models/00_settings.py.

session.s3.browser Storage of capabilities is populated by a detailed check on the Browser in models/00_settings.py.

These can be used to direct to appropriate pages - e.g. assess/create goes to assess_short_mobile

the values to be populated in session.s3.browser has to be set in features (an instance of storage) in models/00_settings.py under definition of populate_browser_compatibility() function.

the complete listing of available features detected by pywurfl is as follows. 

features = Storage(

    ajax = [ ajax_manipulate_css, ajax_manipulate_dom, ajax_preferred_geoloc_api, ajax_support_event_listener, ajax_support_events, 
           ajax_support_getelementbyid, ajax_support_inner_html, ajax_support_javascript, ajax_xhr_type] ,

    bearer = [ has_cellular_radio, max_data_rate, sdio, vpn, wifi] ,

    bugs = [ basic_authentication_support, empty_option_value_support, emptyok, post_method_support] ,

    cache = [ time_to_live_support, total_cache_disable_support] ,

    chtml_ui = [ chtml_can_display_images_and_text_on_same_line, chtml_display_accesskey, chtml_displays_image_in_center, chtml_make_phone_call_string, 
               chtml_table_support, emoji, imode_region] ,

    css = [ css_border_image, css_gradient, css_rounded_corners, css_spriting, css_supports_width_as_percentage] ,

    display = [ columns, dual_orientation, max_image_height, max_image_width, physical_screen_height, physical_screen_width, resolution_height, 
              resolution_width, rows] ,

    drm = [ oma_v_1_0_combined_delivery, oma_v_1_0_forwardlock, oma_v_1_0_separate_delivery] ,

    flash_lite = [ fl_browser, fl_screensaver, fl_standalone, fl_sub_lcd, fl_wallpaper, flash_lite_version, full_flash_support] ,

    html_ui = [ canvas_support, handheldfriendly, html_preferred_dtd, image_inlining, mobileoptimized, viewport_initial_scale, viewport_maximum_scale, 
              viewport_minimum_scale, viewport_supported, viewport_userscalable, viewport_width] ,

    image_format = [ bmp, colors, epoc_bmp, gif, gif_animated, greyscale, jpg, png, svgt_1_1, svgt_1_1_plus, tiff, transparent_png_alpha, 
                   transparent_png_index, wbmp] ,

    j2me = [ doja_1_0, doja_1_5, doja_2_0, doja_2_1, doja_2_2, doja_3_0, doja_3_5, doja_4_0, j2me_3dapi, j2me_3gpp, j2me_aac, j2me_amr, j2me_au, 
           j2me_audio_capture_enabled, j2me_bits_per_pixel, j2me_bmp, j2me_bmp3, j2me_btapi, j2me_canvas_height, j2me_canvas_width, 
           j2me_capture_image_formats, j2me_cldc_1_0, j2me_cldc_1_1, j2me_clear_key_code, j2me_datefield_broken, j2me_datefield_no_accepts_null_date, 
           j2me_gif, j2me_gif89a, j2me_h263, j2me_heap_size, j2me_http, j2me_https, j2me_imelody, j2me_jpg, j2me_jtwi, j2me_left_softkey_code, 
           j2me_locapi, j2me_max_jar_size, j2me_max_record_store_size, j2me_middle_softkey_code, j2me_midi, j2me_midp_1_0, j2me_midp_2_0, 
           j2me_mmapi_1_0, j2me_mmapi_1_1, j2me_motorola_lwt, j2me_mp3, j2me_mp4, j2me_mpeg4, j2me_nokia_ui, j2me_photo_capture_enabled, j2me_png, 
           j2me_real8, j2me_realaudio, j2me_realmedia, j2me_realvideo, j2me_return_key_code, j2me_right_softkey_code, j2me_rmf, j2me_screen_height, 
           j2me_screen_width, j2me_select_key_code, j2me_serial, j2me_siemens_color_game, j2me_siemens_extension, j2me_socket, j2me_storage_size, 
           j2me_svgt, j2me_udp, j2me_video_capture_enabled, j2me_wav, j2me_wbmp, j2me_wma, j2me_wmapi_1_0, j2me_wmapi_1_1, j2me_wmapi_2_0, j2me_xmf] ,

    markup = [ html_web_3_2, html_web_4_0, html_wi_imode_compact_generic, html_wi_imode_html_1, html_wi_imode_html_2, html_wi_imode_html_3, 
             html_wi_imode_html_4, html_wi_imode_html_5, html_wi_imode_htmlx_1, html_wi_imode_htmlx_1_1, html_wi_oma_xhtmlmp_1_0, html_wi_w3_xhtmlbasic, 
             multipart_support, preferred_markup, voicexml, wml_1_1, wml_1_2, wml_1_3, xhtml_support_level] ,

    mms = [ built_in_camera, built_in_recorder, mms_3gpp, mms_3gpp2, mms_amr, mms_bmp, mms_evrc, mms_gif_animated, mms_gif_static, mms_jad, mms_jar, 
          mms_jpeg_baseline, mms_jpeg_progressive, mms_max_frame_rate, mms_max_height, mms_max_size, mms_max_width, mms_midi_monophonic, 
          mms_midi_polyphonic, mms_midi_polyphonic_voices, mms_mmf, mms_mp3, mms_mp4, mms_nokia_3dscreensaver, mms_nokia_operatorlogo, 
          mms_nokia_ringingtone, mms_nokia_wallpaper, mms_ota_bitmap, mms_png, mms_qcelp, mms_rmf, mms_spmidi, mms_symbian_install, mms_vcalendar, 
          mms_vcard, mms_video, mms_wav, mms_wbmp, mms_wbxml, mms_wml, mms_wmlc, mms_xmf, receiver, sender] ,

    object_download = [ directdownload_support, downloadfun_support, inline_support, oma_support, picture, picture_bmp, picture_colors, 
                      picture_df_size_limit, picture_directdownload_size_limit, picture_gif, picture_greyscale, picture_inline_size_limit, picture_jpg, 
                      picture_max_height, picture_max_width, picture_oma_size_limit, picture_png, picture_preferred_height, picture_preferred_width, 
                      picture_resize, picture_wbmp, ringtone, ringtone_3gpp, ringtone_aac, ringtone_amr, ringtone_awb, ringtone_compactmidi, 
                      ringtone_df_size_limit, ringtone_digiplug, ringtone_directdownload_size_limit, ringtone_imelody, ringtone_inline_size_limit, 
                      ringtone_midi_monophonic, ringtone_midi_polyphonic, ringtone_mmf, ringtone_mp3, ringtone_oma_size_limit, ringtone_qcelp, 
                      ringtone_rmf, ringtone_spmidi, ringtone_voices, ringtone_wav, ringtone_xmf, screensaver, screensaver_bmp, screensaver_colors, 
                      screensaver_df_size_limit, screensaver_directdownload_size_limit, screensaver_gif, screensaver_greyscale, 
                      screensaver_inline_size_limit, screensaver_jpg, screensaver_max_height, screensaver_max_width, screensaver_oma_size_limit, 
                      screensaver_png, screensaver_preferred_height, screensaver_preferred_width, screensaver_resize, screensaver_wbmp, video, 
                      wallpaper, wallpaper_bmp, wallpaper_colors, wallpaper_df_size_limit, wallpaper_directdownload_size_limit, wallpaper_gif, 
                      wallpaper_greyscale, wallpaper_inline_size_limit, wallpaper_jpg, wallpaper_max_height, wallpaper_max_width, 
                      wallpaper_oma_size_limit, wallpaper_png, wallpaper_preferred_height, wallpaper_preferred_width, wallpaper_resize, wallpaper_tiff, 
                      wallpaper_wbmp] ,

    pdf = [ pdf_support] ,

    playback = [ hinted_progressive_download, playback_3g2, playback_3gpp, playback_acodec_aac, playback_acodec_amr, playback_acodec_qcelp, 
               playback_df_size_limit, playback_directdownload_size_limit, playback_inline_size_limit, playback_mov, playback_mp4, 
               playback_oma_size_limit, playback_real_media, playback_vcodec_h263_0, playback_vcodec_h263_3, playback_vcodec_h264_bp, 
               playback_vcodec_mpeg4_asp, playback_vcodec_mpeg4_sp, playback_wmv, progressive_download] ,

    product_info = [ brand_name, can_assign_phone_number, can_skip_aligned_link_row, device_claims_web_support, device_os, device_os_version, 
                   has_qwerty_keyboard, is_tablet, is_wireless_device, marketing_name, mobile_browser, mobile_browser_version, model_extra_info, 
                   model_name, nokia_edition, nokia_feature_pack, nokia_series, pointing_method, release_date, uaprof, uaprof2, uaprof3, unique, 
                   ununiqueness_handler] ,

    rss = [ rss_support] ,

    security = [ https_support, phone_id_provided] ,

    sms = [ callericon, ems, ems_imelody, ems_odi, ems_upi, ems_variablesizedpictures, ems_version, gprtf, largeoperatorlogo, nokiaring, nokiavcal, 
          nokiavcard, operatorlogo, panasonic, picturemessage, sagem_v1, sagem_v2, sckl_groupgraphic, sckl_operatorlogo, sckl_ringtone, sckl_vcalendar, 
          sckl_vcard, siemens_logo_height, siemens_logo_width, siemens_ota, siemens_screensaver_height, siemens_screensaver_width, sms_enabled,  
          text_imelody] ,

    sound_format = [ aac, amr, au, awb, compactmidi, digiplug, evrc, imelody, midi_monophonic, midi_polyphonic, mld, mmf, mp3, nokia_ringtone, qcelp, 
                   rmf, smf, sp_midi, voices, wav, xmf] ,

    storage = [ max_deck_size, max_length_of_password, max_length_of_username, max_no_of_bookmarks, max_no_of_connection_settings, max_object_size, 
              max_url_length_bookmark, max_url_length_cached_page, max_url_length_homepage, max_url_length_in_requests] ,

    streaming = [ streaming_3g2, streaming_3gpp, streaming_acodec_aac, streaming_acodec_amr, streaming_flv, streaming_mov, streaming_mp4, 
                streaming_preferred_protocol, streaming_real_media, streaming_vcodec_h263_0, streaming_vcodec_h263_3, streaming_vcodec_h264_bp, 
                streaming_vcodec_mpeg4_asp, streaming_vcodec_mpeg4_sp, streaming_video, streaming_video_size_limit, streaming_wmv] ,

    transcoding = [ is_transcoder, transcoder_ua_header] ,

    wap_push = [ ascii_support, connectionless_cache_operation, connectionless_service_indication, connectionless_service_load, 
               connectionoriented_confirmed_cache_operation, connectionoriented_confirmed_service_indication, connectionoriented_confirmed_service_load, 
               connectionoriented_unconfirmed_cache_operation, connectionoriented_unconfirmed_service_indication, 
               connectionoriented_unconfirmed_service_load, expiration_date, iso8859_support, utf8_support, wap_push_support] ,

    wml_ui = [ access_key_support, break_list_of_links_with_br_element_recommended, built_in_back_button_support, card_title_support, 
             deck_prefetch_support, elective_forms_recommended, icons_on_menu_items_support, image_as_link_support, 
             insert_br_element_after_widget_recommended, menu_with_list_of_links_recommended, menu_with_select_element_recommended, numbered_menus, 
             opwv_wml_extensions_support, proportional_font, softkey_support, table_support, times_square_mode_support, wizards_recommended, 
             wml_can_display_images_and_text_on_same_line, wml_displays_image_in_center, wml_make_phone_call_string, wrap_mode_support] ,

    wta = [ nokia_voice_call, wta_misc, wta_pdc, wta_phonebook, wta_voice_call] ,

    xhtml_ui = [ accept_third_party_cookie, cookie_support, opwv_xhtml_extensions_support, xhtml_allows_disabled_form_elements,
               xhtml_autoexpand_select, xhtml_avoid_accesskeys, xhtml_can_embed_video, xhtml_display_accesskey, xhtml_document_title_support,
               xhtml_file_upload, xhtml_format_as_attribute, xhtml_format_as_css_property, xhtml_honors_bgcolor, xhtml_make_phone_call_string,            
               xhtml_marquee_as_css_property, xhtml_nowrap_mode, xhtml_preferred_charset, xhtml_readable_background_color1,
               xhtml_readable_background_color2, xhtml_select_as_dropdown, xhtml_select_as_popup, xhtml_select_as_radiobutton, xhtml_send_mms_string,
               xhtml_send_sms_string, xhtml_support_wml2_namespace, xhtml_supports_css_cell_table_coloring, xhtml_supports_forms_in_table, 
               xhtml_supports_iframe, xhtml_supports_inline_input, xhtml_supports_invisible_text, xhtml_supports_monospace_font, 
               xhtml_supports_table_for_layout, xhtml_table_support, xhtmlmp_preferred_mime_type] 

)
Note: See TracWiki for help on using the wiki.