Mobile Web Development

Size: px

Start display at page:

Download "Mobile Web Development"

Edwin Bruce
6 years ago
Views:

1 Mobile Web Development By Phil Huhn Northern Software Group Agenda Web-site issues for mobile devices Responsive Design Media Queries Twitter Bootstrap As-is (themes) less variables.less Kendo Mobile Layout Application MVVM Templates jquery Mobile Layout Contact Page JavaScript 1

2 Web-site issues for mobile devices Desktop vs. smartphone Pinching Scrolling Mouse vs. finger Fat finger Wired/Wifi vs. 4G Images Data plans Responsive Design HTML4 & CSS2 Table-less design Faster rendering Media queries Twitter Bootstrap CSS framework 2

3 Responsive Design - Table <table class="sample"> <tr><td colspan="2"> <h1>nsg</h1> </td></tr> <tr> <td><div class="td-nav"> <ul class="nav"> <li><a href="#">home</a></li> <li><a href="#">about</a></li></ul> </td> <td><div class="td-content"> Content </td> </tr> <tr> <td colspan="2"> 2013 NSG, Footer</td> </tr> </table> Responsive Design Table-less <div class="container"> <div class="header"> <h1>nsg</h1> <div class="div-nav"> <ul class="nav"> <li><a href="#">home</a></li> <li><a href="#">about</a></li></ul> <div class="div-content"> Content <div class="footer"> 2013 NSG, Footer 3

div-nav { width: 160px; vertical-align: top; minheight: 300px; float: left; }.

4 Responsive Design - Media Queries <style type="text/css"> body { padding: 0px; margin: 0px; font-family: Tahoma; color: blue; background-color: white; }.container { margin: 0px; padding: 2px; }.header { margin: px 0; }.nav { list-style: none; margin-left: -25px; }.div-nav { width: 160px; vertical-align: top; minheight: 300px; float: left; }.div-content { min-width: 600px; vertical-align: top; min-height: 300px; float: left; }.footer { margin: 10px 0 0px 0; clear: both; (max-width: 480px) {.div-nav { width: 100%; }.div-content{ min-width: 100%; }.nav li { min-height: 40px; font-size: 20px; } } </style> Responsive Design - Bootstrap. 4

5 Responsive Design - Bootstrap <html> <head> <title>bootstrap 101 Template</title>  <link href="public/css/bootstrap.min.css" rel="stylesheet">  <link href="public/css/application.css" rel="stylesheet"> </head> <body> <h1>hello, world!</h1>  <script src="public/js/bootstrap.min.js">  <script src="public/js/application.js"> </body> </html> Responsive Design - Bootstrap - less accordion.less alerts.less bootstrap.less breadcrumbs.less button-groups.less buttons.less carousel.less close.less code.less component-animations.less dropdowns.less forms.less grid.less hero-unit.less labels-badges.less layouts.less media.less mixins.less modals.less navbar.less navs.less pager.less pagination.less popovers.less progress-bars.less reset.less responsive-1200px-min.less responsive-767px-max.less responsive-768px-979px.less responsive-navbar.less responsive-utilities.less responsive.less scaffolding.less sprites.less tables.less thumbnails.less tooltip.less type.less utilities.less variables.less wells.less 5

6 Responsive Design - Bootstrap variables.less // // Variables // // Global values // // Demo // #fdf3e6; // Grays // #555;... Responsive Design - Bootstrap - variables.less // Pagination // #f5f5f5; // Hero unit inherit; inherit; // Form states and alerts // darken(spin(@warningbackground, -10), 3%); 6

7 Responsive Design Bootstrap - less demo lessc.\bootstrap-demo\less\bootstrap.less.\bootstrap-demo\bootstrap_demo.css Responsive Design Bootstrap - Themes Twitter Bootstrap Examples Purchased Themes for Twitter Bootstrap Some free Themes for Twitter Bootstrap Retro (gag) 7

Kendo UI Mobile The Art of Web Development. Kendo - Layout - Includes <!

./content/kendo/kendo.mobile.all.css" rel="stylesheet" /> <link href=".

./content/kendo/kendo.default.min.css" rel="stylesheet" /> <link href=".

8 Kendo UI Mobile The Art of Web Development. Kendo - Layout - Includes <!DOCTYPE html> <html> <head> <title>kendo Mobile Demo</title> <link href="../content/kendo/kendo.mobile.all.css" rel="stylesheet" /> <link href="../content/kendo/kendo.common.min.css" rel="stylesheet" /> <link href="../content/kendo/kendo.default.min.css" rel="stylesheet" /> <link href="../content/kendodemo.css" rel="stylesheet" /> <script src="../scripts/jquery.js"> <script src="../scripts/kendo/kendo.mobile.min.js"> </head> 8

9 Kendo - Layout - Single-page/Multi-views... <body> <div id="home" data-role="view" data-id="default" data-title="demo - Home"> <div data-role="view" id="heading1" data-inset="true" data-title="heading #1"> <div data-role="view" id="heading2" data-inset="true" data-title="heading #2"> <div data-role="view" id="heading3" data-inset="true" data-title="heading #3"> <div data-role="view" id="contactsus" data-inset="true" data-title="contacts"> <div id="about" data-role="view" data-model="aboutviewmodel" datatitle="demo - About"> Kendo - Layout - Layout... <script id="about-template" type="text/x-kendo-template"> <script type="text/javascript"> <section data-role="layout" data-id="defaultlayout"> <header data-role="header"> <div data-role="navbar">nsg - Kendo Demo </header> <footer data-role="footer"> <div data-role="tabstrip"> <a data-icon="home" href="#home">home</a> <a data-icon="contacts" href="#contactsus">contacts</a> <a data-icon="about" href="#about">about</a> <footer> </section> </body> </html> 9

10 Kendo - Application <script type="text/javascript"> var app = new kendo.mobile.application(document.body, { transition: "fade", layout: "defaultlayout" }); Kendo - MVVM <script type="text/javascript"> var officermodel = kendo.data.model.define({ fields: { // data type of the field {Number String Boolean Date} ID: { type: "Number" }, LastName: { type: "String" }, FirstName: { type: "String" }, Title: { type: "String" }, Phone: { type: "String" }, Extension: { type: "String" }, Sequence: { type: "Number" } } }); 10

11 Kendo - MVVM var officersviewmodel = kendo.observable({ officerdatasource: new kendo.data.datasource({ transport: { read: { url: "/Web/Services/Demo.asmx/GetOfficers", datatype: "json", type: "POST", contenttype: "application/json; charset=utf-8" }, }, schema: { model: officermodel, data: "d" } }) }); Kendo - Template <script id="officer-template" type="text/x-kendo-template"> <p> <div class="kd-title" data-bind="text: Title"> <div class="kd-contact"> <span data-bind="text: FirstName"></span> <span data-bind="text: LastName"></span> #if( Phone!= undefined ){ var ph = formatphone( Phone ); # #: ph # #}# </p> 11

Kendo - Template <div data-role="view" id="contactsus" data-model="officersviewmodel" data-inset="true" data-title="contacts Us"> <header data-role="header"> <div

12 Kendo - Template <div data-role="view" id="contactsus" data-model="officersviewmodel" data-inset="true" data-title="contacts Us"> <header data-role="header"> <div data-role="navbar">demo - Contacts Us </header>... <div id="officerlistview" data-role="listview" data-bind="source: officerdatasource" data-template="officer-template"> jquery Mobile jquery. 12

13 jquery Mobile - Layout - Includes & Layout <!DOCTYPE html> <html> <head> <meta name="viewport" content="width=device-width, initial-scale=1"> <title>jquery Mobile Demo</title> <link href="./content/jquery.mobile min.css" rel="stylesheet" /> <link href="./content/jquerydemo.css" rel="stylesheet" /> <script src="../scripts/jquery.js"> <script src="./scripts/jquery.mobile min.js"> </head> <div data-role="page" data-theme="c"> <div data-role="header">... <div data-role="content">... <div data-role="footer" data-position="fixed">...  jquery Mobile - Layout - Layout <div data-role="page" id="heading1" data-theme="c"> <div data-role="header">... <div data-role="content">... <div data-role="footer" data-position="fixed">...  <div data-role="page" id="heading2" data-theme="c"> <div data-role="header">... <div data-role="content">... <div data-role="footer" data-position="fixed">...  <div data-role="page" id="heading3" data-theme="c"> <div data-role="header">... <div data-role="content">... <div data-role="footer" data-position="fixed">...  13

14 jquery Mobile - Layout - Layout <div id="contactpage" data-role="page" data-theme="c"> <div data-role="header">... <div data-role="content">... <div data-role="footer" data-position="fixed">...  <div id="aboutpage" data-role="page" data-theme="c"> <div data-role="header">... <div data-role="content">... <div data-role="footer" data-position="fixed">... <script type="text/javascript">... </body> </html> jquery Mobile - Contact Page <div id="contactpage" data-role="page" data-theme="c"> <div data-role="header" class="jd-header"> jquery Mobile - Contacts Us  <div data-role="content"> <ul id="officerlistview" data-role="listview" data-inset="true"> </ul>  <div data-role="footer" data-position="fixed"> <div data-role="navbar"> <ul> <li><a data-icon="home" href="./index.html">home</a></li> <li><a data-icon="contacts" href="#" class="ui-btn-active">contacts</a></li> <li><a data-icon="about" href="#aboutpage">about</a></li> </ul>   14

15 jquery Mobile - Contact Page - JavaScript <script type="text/javascript"> $(document).on('pagebeforeshow', "#contactpage", function () { $.ajax({ contenttype: "application/json; charset=utf-8", datatype: "json", type: "POST", url: "/Web/Services/Demo.asmx/GetOfficers", error: function (err) { $("#officerlistview").html("error!! " + err); }, success: function (data) { var d = data.d; contactbuildpage(d); return true; } }); // });... jquery Mobile - Contact Page - JavaScript... function contactbuildpage(d) { var tbl = ''; $.each(d, function () { tbl += contactbuilditem(this); }); $('#officerlistview *:not([data-role=list-divider])').remove(); $("#officerlistview").append(tbl).listview('refresh'); return false; } 15

16 jquery Mobile - Contact Page - JavaScript function contactbuilditem(itm) { var ph = ''; if (itm.phone!= undefined) { ph = ' ' + formatphone(itm.phone); } return '<li>' + '<div class="jd-title">' + itm.title + '' + '<div class="jd-contact">' + itm.firstname + ' ' + itm.lastname + ph + '' + '</li>'; } function formatphone(phone) { if (phone == "") return ""; return "(" + phone.substring(0, 3) + ") " + phone.substring(3, 6) + "-" + phone.substring(6); } References Scott Hanselman Media Queries Twitter Bootstrap twitter.github.com/bootstrap/gettingstarted.html {less} Themes for Twitter Bootstrap Tips for implementing responsive designs using Bootstrap by Matthew Adams 16

17 References Kendo UI Mobile Kendo UI Dojo Kendo UI Docs jquery Mobile jquery Mobile: document ready vs page events jquery Mobile, Backbone.js and Require.js 17

Chapter 16 Mobile Web Page

Sungkyunkwan University Chapter 16 Mobile Web Page Prepared by J. Jung and H. Choo Web Programming Copyright 2000-2018 Networking 2000-2012 Networking Laboratory Laboratory 1/26 Native App vs. Mobile Web