舉報 
會員
AMP：Building Accelerated Mobile Pages
Thisbookisforexperiencedwebdeveloperswhoareawareoftheimpactofslow-loadingwebpagesonconversionratesanduserengagement,andwhoareseekingtoservecontenttotheirendusersinarichandenticingwayusingtheAcceleratedMobilePagesframework.YoushouldbefamiliarwithHTML5,CSS3,JavaScript,andJSON.
最新章節
- amp-bind Permitted Attribute Bindings
- JavaScript whitelisted functions
- amp-bind Whitelisted Functions
- Actions
- Events
- Actions and Events
品牌：中圖公司
上架時間：2021-07-08 09:20:07
出版社：Packt Publishing
本書數字版權由中圖公司提供，并由其授權上海閱文信息技術有限公司制作發行
- amp-bind Permitted Attribute Bindings 更新時間：2021-07-08 10:05:04
- JavaScript whitelisted functions
- amp-bind Whitelisted Functions
- Actions
- Events
- Actions and Events
- Third-party media
- Presentation
- Media
- Layout
- Dynamic content
- Ads and analytics
- AMP Components
- Summary
- De facto SEO benefits of the AMP carousel
- AMP lightning badge of trust in search results
- The DNS solution
- AMP Cache URL
- Criticism of AMP
- Flexibility
- The AMP Cache
- User-friendliness
- AMP - from web pages to web apps
- Contributing
- Keeping up with AMP - the AMP roadmap
- From zero to AMP
- AMP - Where It's At and Where It's Going
- Summary
- AMP and WordPress
- Using device detection to serve AMP
- Serving AMP pages to all mobile visitors
- Navigation and the HTML5 History API
- Navigating within the PWA
- Loading AMP with Shadow AMP
- AMP in PWA
- The PWA page
- The service worker iframe installer
- Installing a service worker from the AMP Cache
- Caching PWA assets with a service worker
- AMP to PWA
- Injecting JavaScript with a service worker
- Writing a service worker to cache resources
- Installing a service worker with AMP
- AMP as PWA
- AMP and PWAs - three approaches
- Adding a PWA to the home screen
- What is a web app manifest?
- What is a service worker?
- PWA minimum requirements
- Progressive Web Apps and AMP
- Canonical AMP pages
- AMP Deployment and Your Web Presence
- Summary
- Flying carpet ads
- Carousel ads
- Getting creative with ads
- Sticky ads
- Ad fallback
- Ad placeholder
- Ad placement
- Embedding an Adsense ad
- The <amp-ad> component
- Ads in AMP
- Session stitching with Google Tag Manager
- Session stitching AMP Cache and original domain
- Tracking the removal of items from the cart
- Tracking the addition of items to the cart
- Analytics for e-commerce
- Tracking social interaction
- Tracking time on a page with timer triggers
- Scroll tracking
- Tracking outbound link clicks
- Variable substitution in <amp-analytics>
- Click and tap tracking
- Using Google Analytics with <amp-analytics>
- Using amp-analytics with built-in vendors
- Transport configuration
- Loading configuration remotely
- Triggers
- Variables
- Requests
- Configuring <amp-analytics>
- Full analytics tracking with <amp-analytics>
- Pixel tracking with <amp-pixel>
- Analytics support in AMP
- Ads and Analytics in AMP
- Summary
- Preparing the payment request
- Using the Payment Request API with <amp-iframe>
- The HTML5 Payment Request API
- Building a checkout process with the Payment Request API
- Adding the Disqus <amp-iframe>
- Resizing the iframe
- Configuring Disqus for your site
- Disqus comments in AMP
- Showing a route from the current location
- Adding the iframe map content to the AMP page
- Serving iframe content from a different domain
- Using the HTML5 Geolocation API
- Building the map
- Using the Google Maps JavaScript API
- Geolocating the users device
- Map search without server backend
- Map search with <amp-form> and server backend
- Searching for a location
- Showing directions and routes
- Centering a map on a lat/lng location
- Centering a map on a place name
- Other features of the Google Maps Embed API
- Fullscreen maps
- Using the Google Maps Embed API
- Getting a Google Maps Embed API key
- Google Maps in AMP
- iframe resizing
- Configuring the iframe
- Restrictions on <amp-iframe>
- What about the risk to performance?
- The <amp-iframe> component
- When AMP Is Not Enough - Enter the iframe
- Summary
- Keeping track of chosen options and price in the cart
- Keeping the thumbnails preview option in sync
- Using <amp-selector> for image preview thumbnails
- Adding a size option
- Creating the product carousels
- Initializing product data with <amp-state>
- Product configuration: advanced version
- Binding selection options to the shopping cart
- Choosing options with <amp-selector> and <amp-bind>
- Product configuration: basic version
- Configuring product options with <amp-bind>
- Improving the product image carousel with <amp-bind>
- Adding search autosuggest
- Filtering by color and sorting by price
- Search results JSON response
- Using amp-list to show search results
- Sorting filtering and updating search results
- Improving search with <amp-list> and <amp-bind>
- Ensuring that <amp-list> has a unique URL
- User-triggered updates with <amp-list> and <amp-bind>
- Removing cart items with <amp-bind>
- Changing CSS class with <amp-bind>
- Setting default values for AMP state properties
- Changing text with <amp-bind>
- Using <amp-bind>
- Data-binding: linking expressions to element state
- Branching if...else expression
- Arithmetic expression
- Text manipulation expression
- Expressions in <amp-bind>
- Debugging state with AMP.printState()
- Updating state with AMP.setState()
- Initializing state with <amp-state>
- Stateful data in <amp-bind> with <amp-state>
- State expressions and data-binding
- Introducing <amp-bind>
- Programming in AMP - amp-bind
- Summary
- Implementing a live leaderboard
- Why is it more complicated with the AMP Cache?
- Adding a search form to use with <amp-live-list>
- A live Twitter search listing
- A simple <amp-live-list> example
- Using <amp-live-list>
- Live content updates with <amp-live-list>
- Retrieving URL parameters with AMP's variable substitution
- Removing items from the cart
- Sharing a mustache template between <amp-list> and <amp-form>
- Showing the cart contents with <amp-mustache>
- Fetching the shopping cart on page load
- A note on <amp-list> container size
- Using list tags <ul> and <li> with <amp-list>
- Fetching a list of related products with <amp-list>
- The <amp-list> component
- Dynamic content - fetching JSON data on page load
- Dynamic Content and Data-Driven Interaction
- Summary
- Redirecting after form submission
- Dismissing the cart summary
- Handling the shopping cart server response
- Building the shopping cart server
- Using CLIENT_ID to identify a shopping cart
- Variable substitution in AMP
- Implementing a shopping cart in AMP
- A caveat with the submit-success approach
- Animating the search icon
- Showing the search status
- Iterating over JSON data with <amp-mustache>
- The server response - a JSON list of products
- Styling the search form
- Building a product search form
- UX improvement - visual feedback on submission
- Custom form validation
- Hiding the form on success
- Creating the server in PHP
- Handling XHR responses with <amp-mustache>
- Submitting XHR AJAX forms in AMP
- A simple newsletter sign-up form
- Submitting forms in AMP
- Using forms in AMP
- Making Contact - Forms in AMP
- Summary
- Using tabs in product pages
- Improving product SEO with metadata
- Setting default share text
- Promoting products with social media
- Using social media in AMP pages
- Closing the lightbox
- Lightboxing product images
- Showcasing your products with <amp-lightbox>
- Embedding third-party hosted audio
- Embedding self-hosted audio with <amp-audio>
- Adding audio to AMP pages
- Embedding hosted videos
- Hosting your own videos with <amp-video>
- Adding video to AMP pages
- Reducing code with <amp-selector>
- Highlighting the selected thumbnail
- Jumping to a specific image with goToSlide()
- Product image gallery with thumbnail previews
- Building a product image gallery
- Adding call-to-action text to carousel images
- Autoplaying <amp-carousel> slides
- Hero promotion with <amp-carousel> slides
- Building a carousel of products
- Showcasing products with <amp-carousel>
- Building Rich Media Pages in AMP
- Summary
- Using actions on any HTML element
- Triggering multiple actions for a single event
- Handling multiple events on a single element
- Events and actions
- Attaching event handlers with the on attribute
- The Action and Event model in AMP
- Using server endpoints to store the dismissal state of user notifications
- Displaying user notifications
- Implementing tabbed content with <amp-selector>
- Scaling up
- Hierarchical navigation menus with <amp-sidebar> and <amp-accordion>
- A note on accessibility
- Adding an SVG hamburger menu button
- Styling the sidebar with CSS
- Triggering the sidebar
- Adding side navigation with <amp-sidebar>
- Building a navigation menu with <amp-carousel>
- Scrollable horizontal navigation
- Horizontal navigation menus
- Building navigation menus
- It's accordions all the way down!
- Improving the accordion with an expanded state indicator
- Styling <amp-accordion>
- Building an expandable top stories category list
- Building collapsible content with <amp-accordion>
- Engaging Users with Interactive AMP Components
- Summary
- Adding SVG graphics to AMP pages
- Text layout with <amp-fit-text>
- Text layout with CSS and HTML
- Using custom fonts to improve page design
- Adding custom fonts to AMP pages
- Using custom CSS in AMP pages
- Fallbacks
- Placeholders
- Using placeholders and fallbacks to improve user experience
- Mixing flex and non-flex items
- Flex items with specific proportions
- Full width flex item container
- Vertical flex items
- Horizontal flex items
- Using flex-item layout
- Using element media queries to display art-directed images
- Using responsive images and srcset to deliver high quality images on all screen sizes
- Using flex and media queries for horizontal layout
- Scaling up for larger screens
- Using CSS3 flexbox for layout in AMP
- Adding a related articles section with thumbnail images
- Using the heights and sizes attributes
- Using srcset to optimize image loading
- Art-direction and responsive images
- Canonical AMP pages
- Using responsive layout
- The layout attribute
- The AMP-HTML layout system
- Laying out elements in AMP pages
- Making an Impression - Layout and Page Design in AMP
- Summary
- Remote debugging with developer tools
- PageSpeed Insights
- WebPagetest.org
- Waterfall charts
- What is "good" web performance?
- Measuring mobile web performance
- Measuring AMP page performance
- AMP components
- HTML tags that are allowed but with restrictions
- HTML tags with AMP-HTML replacements
- Forbidden HTML tags
- HTML tags that aren't allowed in AMP
- Layout in AMP
- Your first AMP component - <amp-img>
- Using CSS in AMP pages
- Using JavaScript in AMP pages
- AMP boilerplate validation errors
- Fixing AMP validation errors
- Command line validation
- Online validator
- Developer tools console
- Validating your AMP pages
- Including the AMP-JS library
- Going from HTML to AMP-HTML
- Building Your First AMP Page
- Summary
- So do you need AMP?
- AMP adoption
- Benefits of AMP
- Controversy and criticisms of AMP
- AMP pre-rendering
- Optimizations that make AMP fast
- How AMP solves mobile web performance
- What's with the <style amp-boilerplate> code?
- Validating your AMP pages
- Structured metadata and the AMP carousel
- Optional but recommended boilerplate
- AMP Hello World - your first AMP page
- Preparing your web server environment
- AMP URLs
- AMP Cache
- AMP-JS
- AMP-HTML
- What exactly is AMP?
- Web performance - why are web pages slow?
- Business cases behind AMP
- Mobile technology advances won't make websites fast
- Why performance is important on mobile
- Why now?
- What do AMP pages look like?
- Ride the Lightning with AMP
- Questions
- Piracy
- Errata
- Downloading the color images of this book
- Downloading the example code
- Customer support
- Reader feedback
- Conventions
- Who this book is for
- What you need for this book
- What this book covers
- Preface
- Customer Feedback
- Why subscribe?
- www.Packtpub.com
- About the Reviewer
- Acknowledgements
- About the Author
- Credits
- AMP: Building Accelerated Mobile Pages
- Copyright
- Title Page
- coverpage
- coverpage
- Title Page
- Copyright
- AMP: Building Accelerated Mobile Pages
- Credits
- About the Author
- Acknowledgements
- About the Reviewer
- www.Packtpub.com
- Why subscribe?
- Customer Feedback
- Preface
- What this book covers
- What you need for this book
- Who this book is for
- Conventions
- Reader feedback
- Customer support
- Downloading the example code
- Downloading the color images of this book
- Errata
- Piracy
- Questions
- 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
- 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 - <amp-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
- 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 <amp-fit-text>
- Adding SVG graphics to AMP pages
- Summary
- Engaging Users with Interactive AMP Components
- Building collapsible content with <amp-accordion>
- Building an expandable top stories category list
- Styling <amp-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 <amp-carousel>
- Adding side navigation with <amp-sidebar>
- Triggering the sidebar
- Styling the sidebar with CSS
- Adding an SVG hamburger menu button
- A note on accessibility
- Hierarchical navigation menus with <amp-sidebar> and <amp-accordion>
- Scaling up
- Implementing tabbed content with <amp-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
- Building Rich Media Pages in AMP
- Showcasing products with <amp-carousel>
- Building a carousel of products
- Hero promotion with <amp-carousel> slides
- Autoplaying <amp-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 <amp-selector>
- Adding video to AMP pages
- Hosting your own videos with <amp-video>
- Embedding hosted videos
- Adding audio to AMP pages
- Embedding self-hosted audio with <amp-audio>
- Embedding third-party hosted audio
- Showcasing your products with <amp-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
- 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 <amp-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 <amp-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
- Dynamic Content and Data-Driven Interaction
- Dynamic content - fetching JSON data on page load
- The <amp-list> component
- Fetching a list of related products with <amp-list>
- Using list tags <ul> and <li> with <amp-list>
- A note on <amp-list> container size
- Fetching the shopping cart on page load
- Showing the cart contents with <amp-mustache>
- Sharing a mustache template between <amp-list> and <amp-form>
- Removing items from the cart
- Retrieving URL parameters with AMP's variable substitution
- Live content updates with <amp-live-list>
- Using <amp-live-list>
- A simple <amp-live-list> example
- A live Twitter search listing
- Adding a search form to use with <amp-live-list>
- Why is it more complicated with the AMP Cache?
- Implementing a live leaderboard
- Summary
- Programming in AMP - amp-bind
- Introducing <amp-bind>
- State expressions and data-binding
- Stateful data in <amp-bind> with <amp-state>
- Initializing state with <amp-state>
- Updating state with AMP.setState()
- Debugging state with AMP.printState()
- Expressions in <amp-bind>
- Text manipulation expression
- Arithmetic expression
- Branching if...else expression
- Data-binding: linking expressions to element state
- Using <amp-bind>
- Changing text with <amp-bind>
- Setting default values for AMP state properties
- Changing CSS class with <amp-bind>
- Removing cart items with <amp-bind>
- User-triggered updates with <amp-list> and <amp-bind>
- Ensuring that <amp-list> has a unique URL
- Improving search with <amp-list> and <amp-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 <amp-bind>
- Configuring product options with <amp-bind>
- Product configuration: basic version
- Choosing options with <amp-selector> and <amp-bind>
- Binding selection options to the shopping cart
- Product configuration: advanced version
- Initializing product data with <amp-state>
- Creating the product carousels
- Adding a size option
- Using <amp-selector> for image preview thumbnails
- Keeping the thumbnails preview option in sync
- Keeping track of chosen options and price in the cart
- Summary
- When AMP Is Not Enough - Enter the iframe
- The <amp-iframe> component
- What about the risk to performance?
- Restrictions on <amp-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 <amp-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 <amp-iframe>
- Building a checkout process with the Payment Request API
- The HTML5 Payment Request API
- Using the Payment Request API with <amp-iframe>
- Preparing the payment request
- Summary
- Ads and Analytics in AMP
- Analytics support in AMP
- Pixel tracking with <amp-pixel>
- Full analytics tracking with <amp-analytics>
- Configuring <amp-analytics>
- Requests
- Variables
- Triggers
- Loading configuration remotely
- Transport configuration
- Using amp-analytics with built-in vendors
- Using Google Analytics with <amp-analytics>
- Click and tap tracking
- Variable substitution in <amp-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 <amp-ad> component
- Embedding an Adsense ad
- Ad placement
- Ad placeholder
- Ad fallback
- Sticky ads
- Getting creative with ads
- Carousel ads
- Flying carpet ads
- Summary
- 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
- 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
- AMP Components
- Ads and analytics
- Dynamic content
- Layout
- Media
- Presentation
- Third-party media
- Actions and Events
- Events
- Actions
- amp-bind Whitelisted Functions
- JavaScript whitelisted functions
- amp-bind Permitted Attribute Bindings 更新時間：2021-07-08 10:05:04
