This post its a part of a series about creating an app with node.js and express for Facebook... this time for mobile browsers
Version en español
Desktop version:
Part 10
Now that we have our beta version of nomination, lets create the mobile version so the mobile users can see it and we will help us later for pass this to phonegap
In this case we will use jquery-mobile (jqm) to create our mobile layouts
Our initial mockup is something like this:
Index
Dashboard
Good, lets create our layout with jade, first lets upload everything we need to work with jquery-mobile to our project, upload the css, js and the images to our public folder in the project, dont forget to update the css to point where the images are in your setup...
Lets start with the "layoutm.jade" that describes the layout for mobile, this file goes into views
!!! 5
//if lt IE 7
| <html class="no-js ie6 oldie" lang="en">
//if IE 7
| <html class="no-js ie7 oldie" lang="en">
//if IE 8
| <html class="no-js ie8 oldie" lang="en">
//if gte IE 9
| <html class="no-js" lang="en">
head
meta(charset='utf-8')
meta(http-equiv="X-UA-Compatible",content="IE=edge,chrome=1")
title= t('app.name')
meta(name='description', content='Nomination')
meta(name='author', content='mrpix')
meta(name="viewport", content="width=device-width, initial-scale=1")
link(rel="shortcut icon", href="/images/favicon.ico")
link(rel="apple-touch-icon", href="/images/apple-touch-icon.png")
// CSS
link(rel="stylesheet", href="/stylesheets/jqm.css", type="text/css")
- if (type === 'dashboard')
link(rel="stylesheet", href="/stylesheets/dashboard.css", type="text/css")
- else
link(rel="stylesheet", href="/stylesheets/index.css", type="text/css")
script(src="//ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js")
script
window.jQuery \|\| document.write("<script src='/javascripts/lib/jquery-1.7.1.min.js'>\\x3C/script>")
script(src="/javascripts/lib/jqm.js")
body
!= body
script(defer, src='i18next/i18next.js', type='text/javascript')
- if (type === 'dashboard')
script(defer, src="/javascripts/mscript.js")
script
var _gaq = _gaq || [];
_gaq.push(['_setAccount', 'UA-XXXXXXXX-X']);
_gaq.push(['_trackPageview']);
(function() {
var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
})();
|
Here we are loading the css and the js for mobile, i18next and our functionality with mscript.js and at the end the google analytics partOK, lets create the index mobile version in "indexm.jade" also in views folder
- var login = "/login";
- if (invited)
- login = "/login?invited="+invited;
div(data-role="page", data-theme="d")
div(data-role="header", data-theme="b")
h1= t('app.name')
div(data-role="content")
table.att_table
thead
tr
th= t('index.features')
tbody
tr
td= t('index.feature1')
tr
td= t('index.feature2')
tr
td= t('index.feature3')
tr
td= t('index.feature4')
tr
td= t('index.feature5')
a(href="#{login}", rel="external")
img(src="/images/cwf.png")
- if (error)
.error #{t(error)}
img(src="/images/ipn.png", width="90px")
div(data-role="footer", data-theme="b")
h4 © Ivan Torres -MrPix
Line 1-3: check for any invited user
4: Create our page with the 'data-role="page"' attribute, with this we tell jqm that this div its a page container with the theme "d"
5-6: The hader div will have the title and "b" theme, the header style in jqm will put the title in the center and as a bar at the top of the page
8-29: the content of the page is defined with `data-role="content"`, in this case its just a table with the lsit of features and our login with facebook btn
30-31: page footer just have the copyright announcement and its rendered with "b" theme, applied with `data-role="footer"`
Sweet, lets update our route manager to test for mobile and if we have a mobile visitor send it to our new layout, lets update "roues/index.js"
Lets load our new module create in our past post, remember to install it with "npm install node-bowser" or update the package.json and do "npm install -d", problems with this let me know in the comments...
Load the module in line 5 and add a variable
bowser = require('node-bowser'),
bt;
In our main route lets use the module to decide with views we need to show
bt = new bowser(req);
if (bt.isMobile() || bt.isTablet()){
res.render('indexm',
{
error : req.param('error'),
type: 'index',
invited: req.param('invited'),
layout: 'layoutm'
}
);
}else{
res.render('index',
{
error : req.param('error'),
type: 'index',
invited: req.param('invited')
}
);
}
If its mobile or tablet we will show the mobile version if not our regular desktop version
Its enough for now, later posts we will add pages and functionality
Fork the code in github:
Greetings
No comments:
Post a Comment