ORPP logo
Image from Google Jackets

AMP : Engineer Naturally Lean Web Pages and Leverage the Latest Web Platform Features to Dramatically Boost Page Speed.

By: Material type: TextTextPublisher: Birmingham : Packt Publishing, Limited, 2017Copyright date: ©2017Edition: 1st edDescription: 1 online resource (359 pages)Content type:
  • text
Media type:
  • computer
Carrier type:
  • online resource
ISBN:
  • 9781786462190
Subject(s): Genre/Form: Additional physical formats: Print version:: AMP: Building Accelerated Mobile PagesDDC classification:
  • 5.2759999999999998
LOC classification:
  • TK5105.888.O366 2017
Online resources:
Contents:
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 &amp -- lt -- style amp-boilerplate&amp -- gt -- 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 - &amp -- lt -- amp-img&amp -- gt -- -- 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 &amp -- lt -- amp-fit-text&amp -- gt -- -- Adding SVG graphics to AMP pages -- Summary -- Chapter 4: Engaging Users with Interactive AMP Components -- Building collapsible content with &amp -- lt -- amp-accordion&amp -- gt -- -- Building an expandable top stories category list -- Styling &amp -- lt -- amp-accordion&amp -- gt -- -- 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 -- lt -- amp-carousel&amp -- gt -- -- Adding side navigation with &amp -- lt -- amp-sidebar&amp -- gt -- -- Triggering the sidebar -- Styling the sidebar with CSS -- Adding an SVG hamburger menu button -- A note on accessibility -- Hierarchical navigation menus with &amp.
lt -- amp-sidebar&amp -- gt -- and &amp -- lt -- amp-accordion&amp -- gt -- -- Scaling up -- Implementing tabbed content with &amp -- lt -- amp-selector&amp -- gt -- -- 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 &amp -- lt -- amp-carousel&amp -- gt -- -- Building a carousel of products -- Hero promotion with &amp -- lt -- amp-carousel&amp -- gt -- slides -- Autoplaying &amp -- lt -- amp-carousel&amp -- gt -- 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 -- lt -- amp-selector&amp -- gt -- -- Adding video to AMP pages -- Hosting your own videos with &amp -- lt -- amp-video&amp -- gt -- -- Embedding hosted videos -- Adding audio to AMP pages -- Embedding self-hosted audio with &amp -- lt -- amp-audio&amp -- gt -- -- Embedding third-party hosted audio -- Showcasing your products with &amp -- lt -- amp-lightbox&amp -- gt -- -- Lightboxing product images -- Closing the lightbox -- Using social media in AMP pages -- Facebook -- Twitter -- Instagram -- 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 &amp -- lt -- amp-mustache&amp -- gt -- -- 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 -- lt -- amp-mustache&amp -- gt -- -- 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 &amp -- lt -- amp-list&amp -- gt -- component -- Fetching a list of related products with &amp -- lt -- amp-list&amp -- gt -- -- Using list tags &amp -- lt -- ul&amp -- gt -- and &amp -- lt -- li&amp -- gt -- with &amp -- lt -- amp-list&amp -- gt -- -- A note on &amp -- lt -- amp-list&amp -- gt -- container size -- Fetching the shopping cart on page load -- Showing the cart contents with &amp -- lt -- amp-mustache&amp -- gt -- -- Sharing a mustache template between &amp -- lt -- amp-list&amp -- gt -- and &amp -- lt -- amp-form&amp -- gt -- -- Removing items from the cart -- Retrieving URL parameters with AMP's variable substitution -- Live content updates with &amp -- lt -- amp-live-list&amp -- gt -- -- Using &amp -- lt -- amp-live-list&amp -- gt -- -- A simple &amp -- lt -- amp-live-list&amp -- gt -- example -- A live Twitter search listing -- Adding a search form to use with &amp -- lt -- amp-live-list&amp -- gt -- -- Why is it more complicated with the AMP Cache?.
Implementing a live leaderboard -- Summary -- Chapter 8: Programming in AMP - amp-bind -- Introducing &amp -- lt -- amp-bind&amp -- gt -- -- State, expressions, and data-binding -- Stateful data in &amp -- lt -- amp-bind&amp -- gt -- with &amp -- lt -- amp-state&amp -- gt -- -- Initializing state with &amp -- lt -- amp-state&amp -- gt -- -- Updating state with AMP.setState() -- Debugging state with AMP.printState() -- Expressions in &amp -- lt -- amp-bind&amp -- gt -- -- Text manipulation expression -- Arithmetic expression -- Branching if...else expression -- Using &amp -- lt -- amp-bind&amp -- gt -- -- Changing text with &amp -- lt -- amp-bind&amp -- gt -- -- Setting default values for AMP state properties -- Changing CSS class with &amp -- lt -- amp-bind&amp -- gt -- -- Removing cart items with &amp -- lt -- amp-bind&amp -- gt -- -- User-triggered updates with &amp -- lt -- amp-list&amp -- gt -- and &amp -- lt -- amp-bind&amp -- gt -- -- Ensuring that &amp -- lt -- amp-list&amp -- gt -- has a unique URL -- Improving search with &amp -- lt -- amp-list&amp -- gt -- and &amp -- lt -- amp-bind&amp -- gt -- -- 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 -- lt -- amp-bind&amp -- gt -- -- Configuring product options with &amp -- lt -- amp-bind&amp -- gt -- -- Product configuration: basic version -- Choosing options with &amp -- lt -- amp-selector&amp -- gt -- and &amp -- lt -- amp-bind&amp -- gt -- -- Binding selection options to the shopping cart -- Product configuration: advanced version -- Initializing product data with &amp -- lt -- amp-state&amp -- gt -- -- Creating the product carousels -- Adding a size option -- Using &amp -- lt.
amp-selector&amp.
Tags from this library: No tags from this library for this title. Log in to add tags.
Star ratings
    Average rating: 0.0 (0 votes)
No physical items for this record

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 &amp -- lt -- style amp-boilerplate&amp -- gt -- 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 - &amp -- lt -- amp-img&amp -- gt -- -- 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 &amp -- lt -- amp-fit-text&amp -- gt -- -- Adding SVG graphics to AMP pages -- Summary -- Chapter 4: Engaging Users with Interactive AMP Components -- Building collapsible content with &amp -- lt -- amp-accordion&amp -- gt -- -- Building an expandable top stories category list -- Styling &amp -- lt -- amp-accordion&amp -- gt -- -- 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 -- lt -- amp-carousel&amp -- gt -- -- Adding side navigation with &amp -- lt -- amp-sidebar&amp -- gt -- -- Triggering the sidebar -- Styling the sidebar with CSS -- Adding an SVG hamburger menu button -- A note on accessibility -- Hierarchical navigation menus with &amp.

lt -- amp-sidebar&amp -- gt -- and &amp -- lt -- amp-accordion&amp -- gt -- -- Scaling up -- Implementing tabbed content with &amp -- lt -- amp-selector&amp -- gt -- -- 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 &amp -- lt -- amp-carousel&amp -- gt -- -- Building a carousel of products -- Hero promotion with &amp -- lt -- amp-carousel&amp -- gt -- slides -- Autoplaying &amp -- lt -- amp-carousel&amp -- gt -- 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 -- lt -- amp-selector&amp -- gt -- -- Adding video to AMP pages -- Hosting your own videos with &amp -- lt -- amp-video&amp -- gt -- -- Embedding hosted videos -- Adding audio to AMP pages -- Embedding self-hosted audio with &amp -- lt -- amp-audio&amp -- gt -- -- Embedding third-party hosted audio -- Showcasing your products with &amp -- lt -- amp-lightbox&amp -- gt -- -- Lightboxing product images -- Closing the lightbox -- Using social media in AMP pages -- Facebook -- Twitter -- Instagram -- 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 &amp -- lt -- amp-mustache&amp -- gt -- -- 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 -- lt -- amp-mustache&amp -- gt -- -- 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 &amp -- lt -- amp-list&amp -- gt -- component -- Fetching a list of related products with &amp -- lt -- amp-list&amp -- gt -- -- Using list tags &amp -- lt -- ul&amp -- gt -- and &amp -- lt -- li&amp -- gt -- with &amp -- lt -- amp-list&amp -- gt -- -- A note on &amp -- lt -- amp-list&amp -- gt -- container size -- Fetching the shopping cart on page load -- Showing the cart contents with &amp -- lt -- amp-mustache&amp -- gt -- -- Sharing a mustache template between &amp -- lt -- amp-list&amp -- gt -- and &amp -- lt -- amp-form&amp -- gt -- -- Removing items from the cart -- Retrieving URL parameters with AMP's variable substitution -- Live content updates with &amp -- lt -- amp-live-list&amp -- gt -- -- Using &amp -- lt -- amp-live-list&amp -- gt -- -- A simple &amp -- lt -- amp-live-list&amp -- gt -- example -- A live Twitter search listing -- Adding a search form to use with &amp -- lt -- amp-live-list&amp -- gt -- -- Why is it more complicated with the AMP Cache?.

Implementing a live leaderboard -- Summary -- Chapter 8: Programming in AMP - amp-bind -- Introducing &amp -- lt -- amp-bind&amp -- gt -- -- State, expressions, and data-binding -- Stateful data in &amp -- lt -- amp-bind&amp -- gt -- with &amp -- lt -- amp-state&amp -- gt -- -- Initializing state with &amp -- lt -- amp-state&amp -- gt -- -- Updating state with AMP.setState() -- Debugging state with AMP.printState() -- Expressions in &amp -- lt -- amp-bind&amp -- gt -- -- Text manipulation expression -- Arithmetic expression -- Branching if...else expression -- Using &amp -- lt -- amp-bind&amp -- gt -- -- Changing text with &amp -- lt -- amp-bind&amp -- gt -- -- Setting default values for AMP state properties -- Changing CSS class with &amp -- lt -- amp-bind&amp -- gt -- -- Removing cart items with &amp -- lt -- amp-bind&amp -- gt -- -- User-triggered updates with &amp -- lt -- amp-list&amp -- gt -- and &amp -- lt -- amp-bind&amp -- gt -- -- Ensuring that &amp -- lt -- amp-list&amp -- gt -- has a unique URL -- Improving search with &amp -- lt -- amp-list&amp -- gt -- and &amp -- lt -- amp-bind&amp -- gt -- -- 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 -- lt -- amp-bind&amp -- gt -- -- Configuring product options with &amp -- lt -- amp-bind&amp -- gt -- -- Product configuration: basic version -- Choosing options with &amp -- lt -- amp-selector&amp -- gt -- and &amp -- lt -- amp-bind&amp -- gt -- -- Binding selection options to the shopping cart -- Product configuration: advanced version -- Initializing product data with &amp -- lt -- amp-state&amp -- gt -- -- Creating the product carousels -- Adding a size option -- Using &amp -- lt.

amp-selector&amp.

Description based on publisher supplied metadata and other sources.

Electronic reproduction. Ann Arbor, Michigan : ProQuest Ebook Central, 2024. Available via World Wide Web. Access may be limited to ProQuest Ebook Central affiliated libraries.

There are no comments on this title.

to post a comment.

© 2024 Resource Centre. All rights reserved.