jQuery Mobile
Hour 5
Building Your First Mobile Site
about.me/babon
What You'll Learn in Hour 5
+ The basic structure of a page
+ How to add a header and a footer bar to your
page
+ How to a...
Structuring the Page
Start with your template.html
Save as mobile_template.html
about.me/babon
Adding a Header and Footer
Add to mobile_template.html
● header
● content
● footer
Hints: data-role="page"
data-role="head...
Formatting Text Content
Header section should contain your H1 tag.
Footer section typically contains H3 tag.
Add some p ta...
Adding an Image
Add a largish image to the content area
Add style to the head to make image "stretchy"
<style type=text/cs...
Linking to a Second Page
Create a second page.
Hints: data-role="page" id="pageone"
data-role="page" id="pagetwo"
about.me...
Linking to a Second Page
Create text links to navigate between pages.
Hints: data-role="button" href="#pagetwo"
data-role=...
Assignment
Build a three-page site that features
classmates' LinkedIn info.
Use tutorials from jQuery jAM and
documentatio...
Additional Tutorials
Tutorials to be reviewed for homework ...
jQuery Mobile for Absolute Beginners
Parts 1, 2, 3, 4
Getti...
Upcoming SlideShare
Loading in...5
×

jQuery Mobile Hour 5

167

Published on

Published in: Education, Technology, Design
0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

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

No notes for slide

jQuery Mobile Hour 5

  1. 1. jQuery Mobile Hour 5 Building Your First Mobile Site about.me/babon
  2. 2. What You'll Learn in Hour 5 + The basic structure of a page + How to add a header and a footer bar to your page + How to add some simple formatting to your layout + How to attach an image and make it scale + How to use a button to link to another page about.me/babon
  3. 3. Structuring the Page Start with your template.html Save as mobile_template.html about.me/babon
  4. 4. Adding a Header and Footer Add to mobile_template.html ● header ● content ● footer Hints: data-role="page" data-role="header" data-role="content" data-role="footer" about.me/babon
  5. 5. Formatting Text Content Header section should contain your H1 tag. Footer section typically contains H3 tag. Add some p tags to the content. about.me/babon
  6. 6. Adding an Image Add a largish image to the content area Add style to the head to make image "stretchy" <style type=text/css> img { max-width: 100%; } </style> about.me/babon
  7. 7. Linking to a Second Page Create a second page. Hints: data-role="page" id="pageone" data-role="page" id="pagetwo" about.me/babon
  8. 8. Linking to a Second Page Create text links to navigate between pages. Hints: data-role="button" href="#pagetwo" data-role="button" href="#pageone" Gene's busted example. about.me/babon
  9. 9. Assignment Build a three-page site that features classmates' LinkedIn info. Use tutorials from jQuery jAM and documentation from jQueryMobile for assistance. about.me/babon
  10. 10. Additional Tutorials Tutorials to be reviewed for homework ... jQuery Mobile for Absolute Beginners Parts 1, 2, 3, 4 Getting Started with jQuery Mobile Creating a Website Using jQuery Mobile Part 1 about.me/babon
  1. A particular slide catching your eye?

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

×