Head First Mobile Web

Table of contents

1. Head First Mobile Web
2. Dedication
3. Advance Praise for Head First Mobile Web
4. Praise for other Head First books
5.  
6. How to use this Book: Intro
   1. Who is this book for?
      1. Who should probably back away from this book?
   2. We know what you’re thinking
   3. And we know what your brain is thinking
   4. Metacognition: thinking about thinking
      1. Here’s what WE did
      2. Here’s what YOU can do to bend your brain into submission
      3. Read me
      4. Software requirements
   5. The technical review team
   6. Acknowledgments
   7. Safari® Books Online
7. 1. Getting Started on the Mobile Web: Responsive Web Design
   1. Get on the mobile bandwagon
      1. The time is now
   2. Something odd happened on the way to the pub
   3. If mobile phone web browsers are so great...
      1. ...shouldn’t this just work?
   4. What’s so different about the mobile web?
   5. Responsive Web Design
      1. The recipe for Responsive Web Design
   6. An example of a responsively designed site
   7. Different CSS in different places
      1. Media types, meet media features
   8. CSS media queries
      1. CSS: How different is different?
   9. The current structure of the Splendid Walrus site
   10. Analyze the current CSS
   11. What needs to change?
       1. For mobile, we need to go from this...
   12. Identify the CSS that needs to change
   13. Steps to creating the mobile-specific CSS
   14. Ta-da! Mobile-specific CSS
   15. The rest of our structural CSS
       1. Shared structural CSS
       2. Our desktop structural CSS
       3. What’s next?
   16. Put it together
       1. One last thing...
   17. What’s wrong with a fixed-width layout, anyway?
       1. The layout doesn’t adapt to other window sizes
   18. How is fluid better?
       1. The layout adapts as the window changes size
       2. Go fluid
   19. The fluid formula
       1. A closer look
   20. Continue your fluid conversion
       1. Our updated CSS rule
   21. Context switching
   22. What’s wrong with this picture?
   23. Fluid images
       1. A sad farewell...
   24. Are we there yet?
       1. Spiff up the mobile CSS
       2. Details, details
       3. Set up flexible fonts
       4. Fix the YouTube video
   25. Remember to be responsible
   26. That’s a responsive site!
   27. Responsive design is also a state of mind
8. 2. Responsible Responsiveness: Mobile-first Responsive Web Design
   1. Just when you thought it was time to celebrate...
   2. Is there really a problem? How do we know?
   3. Waitress, will you take my order please?
      1. Can I get a proxy to set up my proxy?
   4. What to do when things aren’t blazing fast
   5. Don’t let its looks fool you, that’s a BIG page
   6. There’s gold in ’em HAR hills
   7. 10,000-feet view: Show statistics
   8. Find the drags on page speed
   9. Where did that Google Maps JavaScript come from?
      1. One line to download them all
      2. Mike hid the map with CSS
   10. What’s with the big pictures?
       1. Fluid images are huge images
   11. It looks mobile friendly, but it isn’t
   12. Mobile-first Responsive Web Design
   13. What is progressive enhancement?
       1. Benefits of mobile-first design
       2. Let’s turn this web page around
   14. The current structure of the On Tap Now page
   15. Am I on a new page or not?
   16. Fix the content floats
   17. Mobile-first media queries
       1. Put your CSS house in order
   18. Surprise! The page is broken in Internet Explorer
       1. Internet Explorer’s escape hatch: conditional comments
   19. Use conditional comments with a media query
   20. How are we doing?
       1. Play taps for the header image
       2. Going old school with image optimization
   21. One src to rule them all
       1. A responsive image server to the rescue
   22. How Sencha.io Src works
       1. No great solutions for <img> tags
       2. One final tweak: optimized beer label images
   23. That’s a blazing-fast mobile web page
   24. Zoom, zoom, pow...
       1. Zoom in on the viewport <meta> tag
   25. The right to zoom?
   26. Turn zooming back on
       1. Back to our regularly scheduled project
   27. Add the map back using JavaScript
       1. On second thought, a map would be useful
   28. Add a link to the map
   29. Build a pseudo-media query in JavaScript
       1. Remove the commented-out iframe code
   30. Add the JavaScript to the On Tap Now page
   31. These widgets aren’t responsive
   32. Move iframe attributes to CSS equivalents
       1. Match styles to attributes
   33. Remove attributes from the JavaScript
   34. No one should have trouble finding the pub now
   35. The map overlap is back
   36. Let the content be your guide
   37. Time to bend and stretch that browser
       1. Install the bookmarklet in your browser
       2. Optional: Install an extension
   38. Breakpoints to the rescue
       1. Shrink the humongous beer labels
       2. Going to one column sooner
   39. Our mobile-first responsive design is complete
9. 3. A Separate Mobile Website: Facing less-than-awesome circumstances
   1. Creature Comforts has agents in the field
   2. How can agents get and share the info they need?
      1. An increasing need for mobile web
   3. Send mobile users to a mobile-optimized website
   4. Sniff out mobile users
   5. Getting to know user agents
      1. User-agent archaeology
   6. User agents: spawn of Satan?
      1. What browsers are these?
   7. Straight talk: Most major sites have a separate mobile website
      1. Some things seem more natural on the server side...
      2. ...and the User-Agent header is our best clue
   8. When what you really want to do is (re-)direct
      1. Get ye to the script
   9. Take a peek at the script
   10. How does the script work?
       1. Make sure your working environment is seaworthy
   11. Make a mobile mockup
       1. A few tweaks to the mobile redirect script
   12. Special delivery...of complicating factors
       1. Opera Mini, huh?
   13. Not all phones are smartphones...not by a sight
       1. How many phones does India have, anyway?
       2. And, hey, feature phones aren’t all that bad
   14. Let’s keep it basic: Meet XHTML-MP
   15. Why would we want to use that old thing?
   16. Keep your nose clean with XHTML-MP
   17. By the way, scrolling sucks
       1. ...thank goodness for access keys
   18. One last curveball
   19. Access keys in action
       1. Get some validation
       2. So, are we good to go?
   20. What went wrong?
   21. Fix the errors
   22. Mobile-savvy CSS
       1. Sounds simple in theory
   23. Hmmm...something is missing
       1. Where’d the numbers go?
       2. Bye bye, buttons
   24. The button look is sorely missed!
   25. Great success!
10. 4. Deciding Whom to Support: What devices should we support?
    1. How do you know where to draw the line?
    2. Step away from the keyboard for a second
       1. What’s this line we need to draw?
    3. Things you don’t support vs. those you can’t support
       1. Don’t be a meanie about it
    4. Ask questions about your project
    5. Ingredients for your magic mobile potion
    6. Draw from your cupboard of tools and data
    7. How do I know my customers have the right stuff?
11. 5. Device Databases and Classes: Get with the group
    1. A panic button for freaked-out students
    2. The button is for mobile phones only
       1. But how do we know someone is on a mobile phone?
    3. Mobile device data sources to the rescue
    4. Meet WURFL
    5. WURFL and its capabilities
       1. There’s more than one flavor of WURFL
       2. We’ll be using the PHP API
    6. WURFL: Clever API code
       1. A tree of devices and their families
       2. It’s time to install WURFL on your computer
    7. We can build an explore page, too
       1. Steps for building our explore page
    8. An explore page: Setting up our environment
       1. Directory structure for the explore page
    9. A good start!
       1. But we can make it better
    10. A quick one-two punch to improve our explore page
    11. Put capabilities to work
    12. Use WURFL to help differentiate content
        1. Steps to success
    13. Ask WURFL the right questions
    14. Initialize the device and get the info ready
    15. Is this thing mobile?
    16. Danger, Will Robinson!
        1. Now, use that value
    17. Make the page a bit smarter with WURFL
        1. Making phone calls with links
    18. The panic button: For phones only
        1. First, let’s get the values
        2. Now, let’s evaluate them
    19. Herding devices
        1. Sort once, then go
    20. Device classes
        1. The picture just got a lot bigger
    21. Expanding a lucrative part of AcedIt!’s business
        1. An early look at what it has in mind
    22. Evaluate the home page wearing mobile-tinted glasses
        1. Combining device data with logical grouping
    23. Group requirements into multiple mobile flavors
        1. A fuller mobile experience
        2. A simplified experience for simpler phones
    24. Rounding out our device classes
        1. Oh, by the way, tablets
        2. Where to draw the line
        3. Our device class lineup
    25. Let’s get this show on the road
        1. But, first...
        2. And we’re off!
    26. Get acquainted with the matching function
    27. What’s going on in that switch statement?
        1. Some examples
    28. Use the matching function to test capabilities
    29. The home stretch
    30. Well, let’s see...how’d it go?
        1. Looks like something went a bit wrong
        2. Filling in the gaps
    31. Fill in the gaps in the device class tests
    32. Make something actually happen with device classes
        1. We’ll treat unsupported devices similarly to desktop browsers...for now, at least
    33. Always tread with care and come prepared
        1. WURFL’s “generic” is pretty generic
        2. So what?
    34. We need a bigger safety net
        1. Accidental success is not good enough
    35. A stitch in time
12. 6. Build a Mobile Web App Using a Framework: The Tartanator
    1. HTML5...app...what do these words even mean?
       1. HTML5 is a specific thing...
       2. ...but it has come to represent more
       3. ...and what, exactly, is a web app?
    2. How “traditional” websites typically behave
    3. How applike websites often behave
    4. A Tartans Unlimited mobile HTML5 web app
    5. The master plan for phase 1 of the Tartanator
       1. ...or you could use a mobile web framework
    6. Why use mobile web app frameworks?
    7. Our choice for the Tartanator: jQuery Mobile
    8. Build a basic page with jQuery Mobile
       1. Start basic
       2. Include jQuery mobile code components
    9. Mark up the rest of the page
    10. And we’re off!
    11. The HTML5 data-* attribute
        1. Build more of the Tartanator
        2. Make it a jQuery Mobile list
    12. Our list: Better, but not quite there
    13. Link to multiple pages with jQuery Mobile
        1. The meat of the Tartanator: The tartans themselves
    14. Get to work on tartans.html
        1. We’ve given you a head start on the list
    15. Take the list from blah to better
    16. Drop in the rest of the tartans
    17. Filter and organize a list
        1. Our tartan list is nicer now
    18. It’s time to show the early Tartanator work to Ewan
        1. Tricks to make it feel more like an app
    19. Make Tartanator feel more applike: to-dos
    20. Add a footer toolbar
        1. Construct a navbar
        2. Put buttons in the navbar
    21. Make the toolbar snazzy
    22. Finalize the structure
    23. Make the header sticky, too
    24. Time to make that tartan-building form
        1. Tartans: patterns like recipes
    25. Follow the tartan recipe
    26. Translate tartan patterns to a form
    27. Build an HTML5 form
        1. Form structure
    28. It’s time to add some basic fields
        1. Give jQuery Mobile hints about the fields
    29. Lists within lists let the users add colors
    30. Color-size ingredient pairs: The color select field
    31. Color-size field pairs: The size field
    32. Link to the form
        1. ...and give users a way back
13. 7. Mobile Web Apps in the Real World: Super mobile web apps
    1. It looks nice...
       1. It talks the talk...
       2. ...but it needs to walk the walk
    2. Mobile apps in the real world
       1. To-dos: custom user tartan pattern implementation
    3. Ready, set, enhance!
       1. We did the right thing
       2. Now let’s enhance
    4. Make a better form
       1. A custom widget for the color select field
    5. A widget to manage the list of colors and sizes
       1. Take it for a spin
    6. A peek under the hood
    7. So, that’s the frontend enhancement...
    8. ...and now for the backend
       1. A quick tour of tartan generation
    9. The two sides of generate.php
       1. Requested with AJAX
       2. Form posted directly
    10. One last thing!
        1. Two out of three is a great start
        2. But we’re not done yet
    11. Offline is important
        1. Make it manifest
    12. A basic recipe to create a cache manifest
        1. The deceptively simple syntax of a cache manifest
        2. Unfortunately, the devil is in the details
    13. Dev tools to the rescue
    14. Serve the manifest as the correct content-type
    15. Victory is (finally) ours
        1. It’s time for some location-aware searchable events
    16. How geolocation works
    17. How to ask W3C-compliant browsers where they are
        1. Handling the info getCurrentPosition gives us
    18. Start in on the Find Events page: The baseline
    19. Let’s integrate geolocation
    20. Nothing found
14. 8. Build Hybrid Mobile Apps with PhoneGap: Tartan Hunt: Going native
    1. Opportunity knocks again
    2. How do hybrid apps work?
    3. Bridge the web-native gap with PhoneGap
       1. PhoneGap Build
       2. Is your development environment ready to go?
    4. Get acquainted with PhoneGap Build
    5. How will the app work?
    6. Keep track of discovered tartans
       1. How we’ll get from here to there
    7. Anatomy of the Tartan Hunt project
       1. We’re already almost organized for PhoneGap Build
    8. Download your apps
    9. Choose your adventure
       1. Install on an emulator
       2. Install on a real device
       3. Ready, aim, fire!
       4. Hey, what about BlackBerry?
       5. Nice work, hotshot!
       6. Store which tartans users have found
    10. Who’s seen what? Store found tartans
        1. What makes localStorage so special?
    11. What can localStorage do for us?
        1. Meet the getter and the setter
    12. Check out what a browser supports
        1. But wait...the story isn’t over yet
    13. Use a function to show which tartans are found
    14. The toggle and toggleClass methods
        1. Let’s look at that code chunk again
    15. You found a tartan, eh? Prove it!
        1. There’s an API for that
        2. Unleash the power of PhoneGap
    16. Rope in PhoneGap to take pictures
    17. PhoneGap is almost ready for its close-up
    18. Now we’re ready for the mediaCapture API
    19. How will we handle the success?
        1. And what if it goes wrong?
    20. It always looks a bit different in real life
    21. It’s just a bit anonymous
        1. Really stuck?
    22. We nailed it!
15. 9. How to Be Future Friendly: Make (some) sense of the chaos
    1. Now what?
       1. It’s complicated
    2. Time to dispel our collective illusions of control
    3. A future-friendly manifesto
    4. If you can’t be future proof, be future friendly
       1. There are no silver bullets
    5. App today, web page tomorrow
       1. Remove PhoneGap references
    6. It’s a long journey: Here are some guideposts
    7. Look toward the future
16. A. Leftovers: The top six things (we didn’t cover)
    1. #1. Testing on mobile devices
    2. #2. Remote debugging
       1. WEb INspector REmote (weinre)
       2. How weinre works
       3. Running your weinre server
       4. Explore the weinre inspector
    3. #3. Determine which browsers support what
       1. Lists of which browsers support what
       2. Test what your browser supports
       3. Or do both at the same time...
    4. #4. Device APIs
       1. What are device APIs?
       2. Standards set by DAP and WAC
       3. These sound great. Why aren’t they in the book?
    5. #5. Application stores and distribution
       1. Reality check: most apps lose money
       2. Everyone and his brother has a store...
       3. ...and now web apps are joining in as well
       4. Some nonexpert advice
    6. #6. RESS: REsponsive design + Server-Side components
       1. Future of RESS
17. B. Set Up Your Web Server Environment: Gotta start somewhere
    1. What we need from you
    2. Only available locally
    3. Windows and Linux: Install and configure XAMPP
       1. Download the web server package software
       2. Windows folks, you’re up
    4. Get going with XAMPP
       1. Linux users, here’s your stuff
       2. There’s a ton more information online
    5. Mac folks: It’s MAMP time
       1. Kind of like falling off a log
    6. Make sure you dock at the right port
       1. On a Mac...
       2. ...and on Windows and Linux
    7. Access your web server
       1. Get at the root of it
    8. phpInfo, please!
18. C. Install WURFL: Sniffing out devices
    1. Who’s got the brains?
       1. Download the API
    2. And who’s got the brawn?
    3. Getting the two to work together
    4. A bit of filesystem housekeeping
    5. Take note!
       1. WURFL PHP API code path
       2. Resources path
       3. Case closed!
19. D. Install the Android SDK and Tools: Take care of the environment
    1. Let’s download the Android SDK
       1. Steps to a happy Android SDK environment
    2. Get the right tools for the job
       1. Install platforms and tools
    3. Hit the Install button and go make some coffee
    4. Do virtual devices dream of electric sheep?
    5. Create a new virtual device
    6. Let ’er rip!
    7. Apps on, apps off
       1. To install
       2. To uninstall
       3. PATH-finding
    8. Find the right PATH
       1. Mac people
       2. Windows people
       3. Whew! You did it!
20. Index
21. About the Authors
22. Copyright