
AMP: Building Accelerated Mobile Pages
Description
Alles über E-Books | Antworten auf Fragen rund um E-Books, Kopierschutz und Dateiformate finden Sie in unserem Info- & Hilfebereich.
All prices
More details
Other editions
Additional editions

Person
https://mobiforge.com/news-comment/google-amp-coming-to-your-search-results-early-next-year
Content
- Cover
- Copyright
- Credits
- About the Author
- Acknowledgements
- About the Reviewer
- www.Packtpub.com
- Customer Feedback
- Table of Contents
- Preface
- Chapter 1: Ride the Lightning with AMP
- What do AMP pages look like?
- Why now?
- Why performance is important on mobile
- Mobile technology advances won't make websites fast
- Business cases behind AMP
- Web performance - why are web pages slow?
- What exactly is AMP?
- AMP-HTML
- AMP-JS
- AMP Cache
- AMP URLs
- Preparing your web server environment
- AMP Hello World - your first AMP page
- Optional but recommended boilerplate
- Structured metadata and the AMP carousel
- Validating your AMP pages
- What's with the &style amp-boilerplate& code?
- How AMP solves mobile web performance
- Optimizations that make AMP fast
- AMP pre-rendering
- Controversy and criticisms of AMP
- Benefits of AMP
- AMP adoption
- So, do you need AMP?
- Summary
- Chapter 2: Building Your First AMP Page
- Going from HTML to AMP-HTML
- Including the AMP-JS library
- Validating your AMP pages
- Developer tools console
- Online validator
- Command line validation
- Fixing AMP validation errors
- AMP boilerplate validation errors
- Using JavaScript in AMP pages
- Using CSS in AMP pages
- Your first AMP component - &-img&
- Layout in AMP
- HTML tags that aren't allowed in AMP
- Forbidden HTML tags
- HTML tags with AMP-HTML replacements
- HTML tags that are allowed, but with restrictions
- AMP components
- Measuring AMP page performance
- Measuring mobile web performance
- What is "good" web performance?
- Waterfall charts
- WebPagetest.org
- PageSpeed Insights
- Remote debugging with developer tools
- Summary
- Chapter 3: Making an Impression - Layout and Page Design in AMP
- Laying out elements in AMP pages
- The AMP-HTML layout system
- The layout attribute
- Using responsive layout
- Canonical AMP pages
- Art-direction and responsive images
- Using srcset to optimize image loading
- Using the heights and sizes attributes
- Adding a related articles section with thumbnail images
- Using CSS3 flexbox for layout in AMP
- Scaling up for larger screens
- Using flex and media queries for horizontal layout
- Using responsive images and srcset to deliver high quality images on all screen sizes
- Using element media queries to display art-directed images
- Using flex-item layout
- Horizontal flex items
- Vertical flex items
- Full width flex item container
- Flex items with specific proportions
- Mixing flex and non-flex items
- Using placeholders and fallbacks to improve user experience
- Placeholders
- Fallbacks
- Using custom CSS in AMP pages
- Adding custom fonts to AMP pages
- Using custom fonts to improve page design
- Text layout with CSS and HTML
- Text layout with &-fit-text&
- Adding SVG graphics to AMP pages
- Summary
- Chapter 4: Engaging Users with Interactive AMP Components
- Building collapsible content with &-accordion&
- Building an expandable top stories category list
- Styling &-accordion&
- Improving the accordion with an expanded state indicator
- It's accordions all the way down!
- Building navigation menus
- Horizontal navigation menus
- Scrollable horizontal navigation
- Building a navigation menu with &-carousel&
- Adding side navigation with &-sidebar&
- Triggering the sidebar
- Styling the sidebar with CSS
- Adding an SVG hamburger menu button
- A note on accessibility
- Hierarchical navigation menus with &-sidebar& and &-accordion&
- Scaling up
- Implementing tabbed content with &-selector&
- Displaying user notifications
- Using server endpoints to store the dismissal state of user notifications
- The Action and Event model in AMP
- Attaching event handlers with the on attribute
- Events and actions
- Handling multiple events on a single element
- Triggering multiple actions for a single event
- Using actions on any HTML element
- Summary
- Chapter 5: Building Rich Media Pages in AMP
- Showcasing products with &-carousel&
- Building a carousel of products
- Hero promotion with &-carousel& slides
- Autoplaying &-carousel& slides
- Adding call-to-action text to carousel images
- Building a product image gallery
- Product image gallery with thumbnail previews
- Jumping to a specific image with goToSlide()
- Highlighting the selected thumbnail
- Reducing code with &-selector&
- Adding video to AMP pages
- Hosting your own videos with &-video&
- Embedding hosted videos
- Adding audio to AMP pages
- Embedding self-hosted audio with &-audio&
- Embedding third-party hosted audio
- Showcasing your products with &-lightbox&
- Lightboxing product images
- Closing the lightbox
- Using social media in AMP pages
- Promoting products with social media
- Setting default share text
- Improving product SEO with metadata
- Using tabs in product pages
- Summary
- Chapter 6: Making Contact - Forms in AMP
- Using forms in AMP
- Submitting forms in AMP
- A simple newsletter sign-up form
- Submitting XHR AJAX forms in AMP
- Handling XHR responses with &-mustache&
- Creating the server in PHP
- Hiding the form on success
- Custom form validation
- UX improvement - visual feedback on submission
- Building a product search form
- Styling the search form
- The server response - a JSON list of products
- Iterating over JSON data with &-mustache&
- Showing the search status
- Animating the search icon
- A caveat with the submit-success approach
- Implementing a shopping cart in AMP
- Variable substitution in AMP
- Using CLIENT_ID to identify a shopping cart
- Building the shopping cart server
- Handling the shopping cart server response
- Dismissing the cart summary
- Redirecting after form submission
- Summary
- Chapter 7: Dynamic Content and Data-Driven Interaction
- Dynamic content - fetching JSON data on page load
- The &-list& component
- Fetching a list of related products with &-list&
- Using list tags &ul& and &li& with &-list&
- A note on &-list& container size
- Fetching the shopping cart on page load
- Showing the cart contents with &-mustache&
- Sharing a mustache template between &-list& and &-form&
- Removing items from the cart
- Retrieving URL parameters with AMP's variable substitution
- Live content updates with &-live-list&
- Using &-live-list&
- A simple &-live-list& example
- A live Twitter search listing
- Adding a search form to use with &-live-list&
- Why is it more complicated with the AMP Cache?
- Implementing a live leaderboard
- Summary
- Chapter 8: Programming in AMP - amp-bind
- Introducing &-bind&
- State, expressions, and data-binding
- Stateful data in &-bind& with &-state&
- Initializing state with &-state&
- Updating state with AMP.setState()
- Debugging state with AMP.printState()
- Expressions in &-bind&
- Text manipulation expression
- Arithmetic expression
- Branching if...else expression
- Using &-bind&
- Changing text with &-bind&
- Setting default values for AMP state properties
- Changing CSS class with &-bind&
- Removing cart items with &-bind&
- User-triggered updates with &-list& and &-bind&
- Ensuring that &-list& has a unique URL
- Improving search with &-list& and &-bind&
- Sorting, filtering, and updating search results
- Using amp-list to show search results
- Search results JSON response
- Filtering by color, and sorting by price
- Adding search autosuggest
- Improving the product image carousel with &-bind&
- Configuring product options with &-bind&
- Product configuration: basic version
- Choosing options with &-selector& and &-bind&
- Binding selection options to the shopping cart
- Product configuration: advanced version
- Initializing product data with &-state&
- Creating the product carousels
- Adding a size option
- Using &-selector& for image preview thumbnails
- Keeping the thumbnails preview option in sync
- Keeping track of chosen options and price in the cart
- Summary
- Chapter 9: When AMP Is Not Enough - Enter the iframe
- The &-iframe& component
- What about the risk to performance?
- Restrictions on &-iframe&
- Configuring the iframe
- iframe resizing
- Google Maps in AMP
- Getting a Google Maps Embed API key
- Using the Google Maps Embed API
- Fullscreen maps
- Other features of the Google Maps Embed API
- Centering a map on a place name
- Centering a map on a lat/lng location
- Showing directions and routes
- Searching for a location
- Map search with &-form& and server backend
- Map search without server backend
- Geolocating the users device
- Using the Google Maps JavaScript API
- Building the map
- Using the HTML5 Geolocation API
- Serving iframe content from a different domain
- Adding the iframe map content to the AMP page
- Showing a route from the current location
- Disqus comments in AMP
- Configuring Disqus for your site
- Resizing the iframe
- Adding the Disqus &-iframe&
- Building a checkout process with the Payment Request API
- The HTML5 Payment Request API
- Using the Payment Request API with &-iframe&
- Preparing the payment request
- Summary
- Chapter 10: Ads and Analytics in AMP
- Analytics support in AMP
- Pixel tracking with &-pixel&
- Full analytics tracking with &-analytics&
- Configuring &-analytics&
- Requests
- Variables
- Triggers
- Loading configuration remotely
- Transport configuration
- Using amp-analytics with built-in vendors
- Using Google Analytics with &-analytics&
- Click and tap tracking
- Variable substitution in &-analytics&
- Tracking outbound link clicks
- Scroll tracking
- Tracking time on a page with timer triggers
- Tracking social interaction
- Analytics for e-commerce
- Tracking the addition of items to the cart
- Tracking the removal of items from the cart
- Session stitching AMP Cache and original domain
- Session stitching with Google Tag Manager
- Ads in AMP
- The &-ad& component
- Embedding an Adsense ad
- Ad placement
- Ad placeholder
- Ad fallback
- Sticky ads
- Getting creative with ads
- Carousel ads
- Flying carpet ads
- Summary
- Chapter 11: AMP Deployment and Your Web Presence
- Canonical AMP pages
- Progressive Web Apps and AMP
- PWA minimum requirements
- What is a service worker?
- What is a web app manifest?
- Adding a PWA to the home screen
- AMP and PWAs - three approaches
- AMP as PWA
- Installing a service worker with AMP
- Writing a service worker to cache resources
- Injecting JavaScript with a service worker
- AMP to PWA
- Caching PWA assets with a service worker
- Installing a service worker from the AMP Cache
- The service worker iframe installer
- The PWA page
- AMP in PWA
- Loading AMP with Shadow AMP
- Navigating within the PWA
- Navigation and the HTML5 History API
- Serving AMP pages to all mobile visitors
- Using device detection to serve AMP
- AMP and WordPress
- Summary
- Chapter 12: AMP - Where It's At and Where It's Going
- From zero to AMP
- Keeping up with AMP - the AMP roadmap
- Contributing
- AMP - from web pages to web apps
- User-friendliness
- The AMP Cache
- Flexibility
- Criticism of AMP
- AMP Cache URL
- The DNS solution
- AMP lightning badge of trust in search results
- De facto SEO benefits of the AMP carousel
- Summary
- Appendix A: AMP Components
- Ads and analytics
- Dynamic content
- Layout
- Media
- Presentation
- Third-party media
- Appendix B: Actions and Events
- Events
- Actions
- Appendix C: amp-bind Whitelisted Functions
- JavaScript whitelisted functions
- Appendix D: amp-bind Permitted Attribute Bindings
- Index
System requirements
File format: ePUB
Copy protection: Adobe-DRM (Digital Rights Management)
System requirements:
- Computer (Windows; MacOS X; Linux): Install the free reader Adobe Digital Editions prior to download (see eBook Help).
- Tablet/smartphone (Android; iOS): Install the free app Adobe Digital Editions or the app PocketBook before downloading (see eBook Help).
- E-reader: Bookeen, Kobo, Pocketbook, Sony, Tolino and many more (not Kindle).
The file format ePub works well for novels and non-fiction books – i.e., „flowing” text without complex layout. On an e-reader or smartphone, line and page breaks automatically adjust to fit the small displays.
This eBook uses Adobe-DRM, a „hard” copy protection. If the necessary requirements are not met, unfortunately you will not be able to open the eBook. You will therefore need to prepare your reading hardware before downloading.
Please note: We strongly recommend that you authorise using your personal Adobe ID after installation of any reading software.
For more information, see our ebook Help page.
File format: PDF
Copy-Protection: Adobe-DRM (Digital Rights Management)
System requirements:
- Computer (Windows; MacOS X; Linux): Install the free reader Adobe Digital Editions prior to download (see eBook Help).
- Tablet/smartphone (Android; iOS): Install the free app Adobe Digital Editions or the app PocketBook before downloading (see eBook Help).
- E-reader: Bookeen, Kobo, Pocketbook, Sony, Tolino and many more (only limited: Kindle).
The file format PDF always displays a book page identically on any hardware. This makes PDF suitable for complex layouts such as those used in textbooks and reference books (images, tables, columns, footnotes). Unfortunately, on the small screens of e-readers or smartphones, PDFs are rather annoying, requiring too much scrolling.
This eBook uses Adobe-DRM, a „hard” copy protection. If the necessary requirements are not met, unfortunately you will not be able to open the eBook. You will therefore need to prepare your reading hardware before downloading.
Please note: We strongly recommend that you authorise using your personal Adobe ID after installation of any reading software.
For more information, see our eBook Help page.