jQuery Mobile           Hour 5Building Your First Mobile Site                         about.me/babon
What Youll Learn in Hour 5+ The basic structure of a page+ How to add a header and a footer bar to yourpage+ How to add so...
Structuring the PageStart with your template.htmlSave as mobile_template.html                                about.me/babon
Adding a Header and FooterAdd to mobile_template.html  ● header  ● content  ● footerHints:   data-role="page"         data...
Formatting Text ContentHeader section should contain your H1 tag.Footer section typically contains H3 tag.Add some p tags ...
Adding an ImageAdd a largish image to the content areaAdd style to the head to make image "stretchy"<style type=text/css> ...
Linking to a Second PageCreate a second page.Hints:   data-role="page" id="pageone"         data-role="page" id="pagetwo" ...
Linking to a Second PageCreate text links to navigate between pages.Hints:   data-role="button" href="#pagetwo"         da...
Giulias ExampleLook for the giulia folder on the temp server  jquery_mobile > giuliaTutorials reviewed  jQuery Mobile for ...
Possible DeliverableUsing Giulias site as an example build a sitethat features classmates LinkedIn info.Use tutorials from...
Upcoming SlideShare
Loading in...5
×

jQuery Mobile Hour 5

359

Published on

0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total Views
359
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

Transcript of "jQuery Mobile Hour 5"

  1. 1. jQuery Mobile Hour 5Building Your First Mobile Site about.me/babon
  2. 2. What Youll Learn in Hour 5+ The basic structure of a page+ How to add a header and a footer bar to yourpage+ How to add some simple formatting to yourlayout+ 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 PageStart with your template.htmlSave as mobile_template.html about.me/babon
  4. 4. Adding a Header and FooterAdd to mobile_template.html ● header ● content ● footerHints: data-role="page" data-role="header" data-role="content" data-role="footer" about.me/babon
  5. 5. Formatting Text ContentHeader 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 ImageAdd a largish image to the content areaAdd 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 PageCreate a second page.Hints: data-role="page" id="pageone" data-role="page" id="pagetwo" about.me/babon
  8. 8. Linking to a Second PageCreate text links to navigate between pages.Hints: data-role="button" href="#pagetwo" data-role="button" href="#pageone"Genes busted example. about.me/babon
  9. 9. Giulias ExampleLook for the giulia folder on the temp server jquery_mobile > giuliaTutorials reviewed jQuery Mobile for Absolute Beginners Parts 1, 2, 3, 4 Creating a Website Using jQuery Mobile Part 1 about.me/babon
  10. 10. Possible DeliverableUsing Giulias site as an example build a sitethat features classmates LinkedIn info.Use tutorials from jQuery jAM anddocumentation from jQueryMobile forassistance.Other possibilities ... 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.

×