Osoby które kupowały "Head First Mobile Web", wybierały także:

• Responsive i Bootstrap. Kurs video. Poziom pierwszy. BÅ‚yskawiczne tworzenie responsywnych serwisów WWW 89,00 zÅ‚, (35,60 zÅ‚ -60%)
• Tablice informatyczne. Bootstrap 16,98 zÅ‚, (8,49 zÅ‚ -50%)
• Responsive Web Design. Modernizacja witryny 39,90 zÅ‚, (19,95 zÅ‚ -50%)
• Sass i Compass. Praktyczny przewodnik dla projektantów 49,00 zÅ‚, (24,50 zÅ‚ -50%)
• Responsywne i wydajne projekty internetowe. Szybkie aplikacje dla każdego 34,90 zÅ‚, (17,45 zÅ‚ -50%)

Spis treści

Head First Mobile Web eBook -- spis treści

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