This is page 8 of 20. Use http://codebase.md/cloudflare/docs/imgs/todomvc-screenshot-3.png?page={x} to view the full context.
# Directory Structure
```
├── .editorconfig
├── .eslintrc.json
├── .firebaserc
├── .github
│ └── workflows
│ └── semgrep.yml
├── .gitignore
├── .travis.yml
├── assets
│ ├── extra
│ │ └── brand_assets.zip
│ ├── img
│ │ ├── about
│ │ │ ├── case-studies
│ │ │ │ └── bg_lines.png
│ │ │ ├── design-principles
│ │ │ │ ├── bg1.svg
│ │ │ │ ├── bg2.svg
│ │ │ │ ├── design_icon_break.svg
│ │ │ │ ├── design_icon_fast.svg
│ │ │ │ ├── design_icon_future.svg
│ │ │ │ ├── design_icon_layers.svg
│ │ │ │ ├── design_icon_priorities.svg
│ │ │ │ ├── design_icon_ux.svg
│ │ │ │ ├── design_icon_whitelist.svg
│ │ │ │ ├── lines1.svg
│ │ │ │ └── lines2.svg
│ │ │ ├── how-amp-works
│ │ │ │ ├── line_behind.svg
│ │ │ │ └── lines_front.svg
│ │ │ ├── overview
│ │ │ │ ├── bg2.svg
│ │ │ │ ├── herobg.svg
│ │ │ │ ├── herolines1.svg
│ │ │ │ ├── herolines2.svg
│ │ │ │ ├── line4.svg
│ │ │ │ ├── lines3.svg
│ │ │ │ ├── what_phone.png
│ │ │ │ ├── what_phone@1_5x.png
│ │ │ │ └── [email protected]
│ │ │ └── who-use-amp
│ │ │ ├── adtech
│ │ │ │ ├── adtech_icon_customize.svg
│ │ │ │ ├── adtech_icon_intro.svg
│ │ │ │ ├── adtech_icon_reach.svg
│ │ │ │ ├── adtech_icon_revenue.svg
│ │ │ │ ├── indexexchange_logo.png
│ │ │ │ ├── lines.svg
│ │ │ │ ├── sharethrough_logo.png
│ │ │ │ ├── teads_logo.svg
│ │ │ │ └── triplelift_logo.png
│ │ │ ├── advertisers
│ │ │ │ ├── advertiser_phone_wired.png
│ │ │ │ ├── advertiser_phone_wired@1_5x.png
│ │ │ │ ├── [email protected]
│ │ │ │ ├── advertisers_bg.svg
│ │ │ │ ├── advertisers_icon_audience.svg
│ │ │ │ ├── advertisers_icon_everywhere.svg
│ │ │ │ ├── advertisers_icon_intro.svg
│ │ │ │ ├── advertisers_icon_ROI.svg
│ │ │ │ └── advertisers_lines.svg
│ │ │ ├── amp-ads
│ │ │ │ ├── ads_icon.svg
│ │ │ │ ├── cloudflare_logo.png
│ │ │ │ ├── doubleclick_logo.png
│ │ │ │ ├── google_logo.png
│ │ │ │ ├── lines_bottom1.svg
│ │ │ │ ├── lines_bottom2.svg
│ │ │ │ ├── lines.svg
│ │ │ │ ├── roi_icon.svg
│ │ │ │ ├── speed_icon.svg
│ │ │ │ └── triplelift_logo.png
│ │ │ ├── card_developers.png
│ │ │ ├── card_developers.svg
│ │ │ ├── card_smb.png
│ │ │ ├── card_smb.svg
│ │ │ ├── hero_triangle.png
│ │ │ ├── publishers
│ │ │ │ ├── globo_logo.svg
│ │ │ │ ├── nyt_logo.svg
│ │ │ │ ├── publisher_icon_business.svg
│ │ │ │ ├── publisher_icon_fast.svg
│ │ │ │ ├── publisher_icon_intro.svg
│ │ │ │ ├── publisher_icon_simple.svg
│ │ │ │ ├── publisher_phone_cnn.png
│ │ │ │ ├── publisher_phone_cnn@1_5x.png
│ │ │ │ ├── [email protected]
│ │ │ │ ├── wapo_logo.png
│ │ │ │ └── wired_logo.png
│ │ │ ├── who_icon_adtech.svg
│ │ │ ├── who_icon_advertisers.svg
│ │ │ ├── who_icon_publishers.svg
│ │ │ ├── who_lines1.svg
│ │ │ ├── who_lines2.svg
│ │ │ ├── who_phones_hero.png
│ │ │ ├── who_phones_hero@1_5x.png
│ │ │ └── [email protected]
│ │ ├── amp_favicon.png
│ │ ├── amp-conf
│ │ │ └── speakers
│ │ │ ├── alex.jpg
│ │ │ ├── ali.jpg
│ │ │ ├── ardan.jpg
│ │ │ ├── beck.jpg
│ │ │ ├── bez.jpg
│ │ │ ├── chen.jpg
│ │ │ ├── dane.jpg
│ │ │ ├── eric.jpg
│ │ │ ├── gina.jpg
│ │ │ ├── honey.jpg
│ │ │ ├── jeremy.jpg
│ │ │ ├── john.jpg
│ │ │ ├── le.jpg
│ │ │ ├── madison.jpg
│ │ │ ├── malte.jpg
│ │ │ ├── malteandrudy.jpg
│ │ │ ├── mariko.jpg
│ │ │ ├── matthew.jpg
│ │ │ ├── mike.jpg
│ │ │ ├── natalia.jpg
│ │ │ ├── nicole.jpg
│ │ │ ├── paul.jpg
│ │ │ ├── ranna.jpg
│ │ │ ├── richard.jpg
│ │ │ ├── rudy.jpg
│ │ │ ├── sam.jpg
│ │ │ ├── sarah.jpg
│ │ │ ├── sebastian.jpg
│ │ │ ├── senthil.jpg
│ │ │ ├── sriram.jpg
│ │ │ ├── vadim.jpg
│ │ │ ├── vamsee.jpg
│ │ │ ├── will.jpg
│ │ │ └── yamini.jpg
│ │ ├── arrow-blue.svg
│ │ ├── arrow.svg
│ │ ├── background.jpg
│ │ ├── blog-icon.svg
│ │ ├── brand-guidelines.pdf
│ │ ├── case-studies
│ │ │ ├── gizmodo_logo.png
│ │ │ ├── gizmodo_phone1.png
│ │ │ ├── gizmodo_phone1@1_5x.png
│ │ │ ├── [email protected]
│ │ │ ├── gizmodo_phone2.png
│ │ │ ├── gizmodo_phone2@1_5x.png
│ │ │ ├── [email protected]
│ │ │ ├── gizmodo_thumb.jpg
│ │ │ ├── gizmodo.pdf
│ │ │ ├── hearst_framed.png
│ │ │ ├── hearst_framed2.png
│ │ │ ├── hearst_logo.png
│ │ │ ├── hearst_thumb.jpg
│ │ │ ├── hearst.pdf
│ │ │ ├── milestone_home_framed.png
│ │ │ ├── milestone_logo.png
│ │ │ ├── milestone_search_framed.png
│ │ │ ├── milestone_thumb.jpg
│ │ │ ├── milestone.pdf
│ │ │ ├── plista_graphic.png
│ │ │ ├── plista_logo.png
│ │ │ ├── plista_thumb.jpg
│ │ │ ├── plista.pdf
│ │ │ ├── relay_media_logo.png
│ │ │ ├── relay_media_thumb.jpg
│ │ │ ├── relay_media.pdf
│ │ │ ├── relaymedia_phone1.png
│ │ │ ├── relaymedia_phone1@1_5x.png
│ │ │ ├── [email protected]
│ │ │ ├── relaymedia_phone2.png
│ │ │ ├── relaymedia_phone2@1_5x.png
│ │ │ ├── [email protected]
│ │ │ ├── slate_logo.png
│ │ │ ├── slate_phone1.png
│ │ │ ├── slate_phone1@1_5x.png
│ │ │ ├── [email protected]
│ │ │ ├── slate_phone2.png
│ │ │ ├── slate_phone2@1_5x.png
│ │ │ ├── [email protected]
│ │ │ ├── slate_thumb.jpg
│ │ │ ├── slate.pdf
│ │ │ ├── teads_logo.png
│ │ │ ├── teads_logo2.png
│ │ │ ├── teads_phone.png
│ │ │ ├── teads_phone@1_5x.png
│ │ │ ├── [email protected]
│ │ │ ├── teads_thumb.jpg
│ │ │ ├── teads.pdf
│ │ │ ├── terra_framed1.png
│ │ │ ├── terra_framed2.png
│ │ │ ├── terra_logo.png
│ │ │ ├── terra_thumb.jpg
│ │ │ ├── terra.pdf
│ │ │ ├── wapo_logo.png
│ │ │ ├── wapo_thumb.png
│ │ │ ├── wapo.pdf
│ │ │ ├── washingtonpost_phone.png
│ │ │ ├── washingtonpost_phone@1_5x.png
│ │ │ ├── [email protected]
│ │ │ ├── wired_logo.png
│ │ │ ├── wired_phone1.png
│ │ │ ├── wired_phone1@1_5x.png
│ │ │ ├── [email protected]
│ │ │ ├── wired_phone2.png
│ │ │ ├── wired_phone2@1_5x.png
│ │ │ ├── [email protected]
│ │ │ ├── wired_thumb.jpg
│ │ │ └── wired.pdf
│ │ ├── cheveron-down.svg
│ │ ├── close.svg
│ │ ├── comment.png
│ │ ├── docs
│ │ │ ├── icon_important.svg
│ │ │ ├── icon_note.svg
│ │ │ ├── icon_read.svg
│ │ │ ├── icon_tip.svg
│ │ │ ├── responsive_amp_img.png
│ │ │ ├── too_much_css.png
│ │ │ ├── validator_console_imgerror.png
│ │ │ ├── validator_errors.png
│ │ │ ├── validator_extension_imgerror.png
│ │ │ ├── validator_icon_invalid.png
│ │ │ ├── validator_icon_link.png
│ │ │ ├── validator_icon_valid.png
│ │ │ ├── validator_mandatory_error.png
│ │ │ ├── validator_web_ui.png
│ │ │ └── validator_webui_imgerror.png
│ │ ├── enforce-comment.png
│ │ ├── footer
│ │ │ ├── line-left.png
│ │ │ ├── line-right-2.png
│ │ │ └── line-right.png
│ │ ├── github.png
│ │ ├── hamburger.svg
│ │ ├── home
│ │ │ ├── bg_experience.png
│ │ │ ├── home_hero_phone.png
│ │ │ ├── home_hero_phone@1_5x.png
│ │ │ ├── [email protected]
│ │ │ ├── home_icon_flexibility.svg
│ │ │ ├── home_icon_performance.svg
│ │ │ ├── home_phone_ebay.png
│ │ │ ├── home_phone_ebay@1_5x.png
│ │ │ ├── [email protected]
│ │ │ ├── lines2.svg
│ │ │ ├── lines3.svg
│ │ │ ├── shapebg.svg
│ │ │ ├── teads_logo.svg
│ │ │ ├── wapo_logo.png
│ │ │ └── wired_logo.png
│ │ ├── ic_open_in_new_black.svg
│ │ ├── ic_open_in_new_white.svg
│ │ ├── icons
│ │ │ ├── 120.png
│ │ │ ├── 144.png
│ │ │ ├── 152.png
│ │ │ ├── 168.png
│ │ │ ├── 180.png
│ │ │ ├── 192.png
│ │ │ ├── 48.png
│ │ │ ├── 512.png
│ │ │ ├── 72.png
│ │ │ ├── 96.png
│ │ │ └── any.svg
│ │ ├── latest
│ │ │ ├── events
│ │ │ │ ├── event_empty.png
│ │ │ │ ├── event_empty.svg
│ │ │ │ └── event_hero.svg
│ │ │ ├── icon_audience.png
│ │ │ ├── icon_audience.svg
│ │ │ ├── icon_calendar.png
│ │ │ ├── icon_calendar.svg
│ │ │ ├── icon_location.png
│ │ │ ├── icon_location.svg
│ │ │ ├── icon_retweet.png
│ │ │ ├── icon_retweet.svg
│ │ │ ├── icon_twitter.svg
│ │ │ ├── latest_hero.jpg
│ │ │ ├── line_hero_back.svg
│ │ │ └── line_hero_front.svg
│ │ ├── liveblog-pagination.png
│ │ ├── login-button.png
│ │ ├── logo-blue.svg
│ │ ├── logout-button.png
│ │ ├── malte.jpg
│ │ ├── motions
│ │ │ └── amp-lines-motions.png
│ │ ├── nav
│ │ │ ├── back_arrow.png
│ │ │ ├── back_arrow.svg
│ │ │ ├── close.png
│ │ │ ├── close.svg
│ │ │ ├── next_level.png
│ │ │ └── next_level.svg
│ │ ├── partners
│ │ │ ├── adobe_analytics.png
│ │ │ ├── chartbeat.png
│ │ │ ├── comscore.png
│ │ │ ├── ggl_bw.png
│ │ │ ├── ggl.png
│ │ │ ├── li.png
│ │ │ ├── nuzzel.png
│ │ │ ├── parsely.png
│ │ │ ├── pinterest.png
│ │ │ ├── tw.png
│ │ │ └── wp.png
│ │ ├── platforms
│ │ │ ├── chrome.png
│ │ │ ├── criteo.png
│ │ │ ├── edge.png
│ │ │ ├── firefox.png
│ │ │ ├── google.png
│ │ │ ├── inmobi.png
│ │ │ ├── kargo.png
│ │ │ ├── mediavine.png
│ │ │ ├── opera.png
│ │ │ ├── plista.png
│ │ │ ├── safari.png
│ │ │ └── yahoo.png
│ │ ├── publishers
│ │ │ ├── abril.png
│ │ │ ├── asahi.png
│ │ │ ├── atlantic_media.png
│ │ │ ├── bbc_news.png
│ │ │ ├── buzzfeed.png
│ │ │ ├── condenast.png
│ │ │ ├── daily_mail.png
│ │ │ ├── economist.png
│ │ │ ├── editora_globo.png
│ │ │ ├── el_pais.png
│ │ │ ├── fairfax_media.png
│ │ │ ├── folha_de_s.paulo.png
│ │ │ ├── franzfurter_allgemeine.png
│ │ │ ├── ft.png
│ │ │ ├── gannett.png
│ │ │ ├── guardian.png
│ │ │ ├── hearst.png
│ │ │ ├── huffington_post.png
│ │ │ ├── la_stampa.png
│ │ │ ├── les_echos.png
│ │ │ ├── mainichi.png
│ │ │ ├── mashable.png
│ │ │ ├── mcclatchy.png
│ │ │ ├── new_york_times.png
│ │ │ ├── newscorp_australia.png
│ │ │ ├── nine_msn.png
│ │ │ ├── nrc.png
│ │ │ ├── ny_daily_news.png
│ │ │ ├── nypost.png
│ │ │ ├── pearson.png
│ │ │ ├── sankei.png
│ │ │ ├── telegraph.png
│ │ │ ├── time.png
│ │ │ ├── uol.png
│ │ │ ├── us_news.png
│ │ │ ├── vox_media.png
│ │ │ ├── wallstreetjournal.png
│ │ │ ├── washington_post.png
│ │ │ └── zeit_online.png
│ │ ├── quotes
│ │ │ ├── chartbeat.jpg
│ │ │ ├── ebay.jpg
│ │ │ ├── faz.jpg
│ │ │ ├── folha.jpg
│ │ │ ├── google.jpg
│ │ │ ├── guardian.jpg
│ │ │ ├── hearst.jpg
│ │ │ ├── lastampa.jpg
│ │ │ ├── newyorktimes.jpeg
│ │ │ ├── twitter.jpg
│ │ │ └── vox.jpg
│ │ ├── return-parameter.png
│ │ ├── sprite.svg
│ │ ├── symbols
│ │ │ ├── carat-down.svg
│ │ │ ├── carat.svg
│ │ │ ├── caret-right.svg
│ │ │ ├── close.svg
│ │ │ ├── lang-icon.svg
│ │ │ ├── logo-blue-standalone.svg
│ │ │ ├── return.svg
│ │ │ ├── search.svg
│ │ │ ├── share-close.svg
│ │ │ ├── share.svg
│ │ │ ├── template.scss
│ │ │ ├── twitter.svg
│ │ │ ├── video-play.svg
│ │ │ └── wordpress.svg
│ │ └── twitter.png
│ ├── manifest.json
│ ├── sass
│ │ ├── _accordions.scss
│ │ ├── _animated_lines.scss
│ │ ├── _animations.scss
│ │ ├── _bg-triangle.scss
│ │ ├── _callouts.scss
│ │ ├── _cards.scss
│ │ ├── _carousel.scss
│ │ ├── _config.scss
│ │ ├── _content-post.scss
│ │ ├── _content-section.scss
│ │ ├── _content.scss
│ │ ├── _doc-nav.scss
│ │ ├── _footer.scss
│ │ ├── _global.scss
│ │ ├── _grid.scss
│ │ ├── _header.scss
│ │ ├── _inline-toc.scss
│ │ ├── _lang_switcher.scss
│ │ ├── _large-cta.scss
│ │ ├── _lightbox.scss
│ │ ├── _mixins.scss
│ │ ├── _nav.scss
│ │ ├── _points.scss
│ │ ├── _post-item.scss
│ │ ├── _responsive.scss
│ │ ├── _search.scss
│ │ ├── _share.scss
│ │ ├── _sidebar.scss
│ │ ├── _sprite_generated.scss
│ │ ├── _sprite.scss
│ │ ├── _syntax_highlighting.scss
│ │ ├── _tables.scss
│ │ ├── _toc.scss
│ │ ├── about-how.min.scss
│ │ ├── about-overview.min.scss
│ │ ├── about-who-vertical.min.scss
│ │ ├── about-who.min.scss
│ │ ├── blog.min.scss
│ │ ├── case-study.min.scss
│ │ ├── design-principles.min.scss
│ │ ├── docs.min.scss
│ │ ├── home.min.scss
│ │ ├── list.min.scss
│ │ ├── main.min.scss
│ │ ├── pages
│ │ │ ├── _about-how.scss
│ │ │ ├── _about-overview.scss
│ │ │ ├── _about-who-vertical.scss
│ │ │ ├── _about-who.scss
│ │ │ ├── _case-study.scss
│ │ │ ├── _design-principles.scss
│ │ │ ├── _events.scss
│ │ │ ├── _faqs.scss
│ │ │ ├── _home.scss
│ │ │ ├── _latest.scss
│ │ │ ├── _list.scss
│ │ │ ├── _post-detail.scss
│ │ │ ├── _roadmap.scss
│ │ │ ├── _who.scss
│ │ │ └── amp-conf.scss
│ │ └── section.min.scss
│ └── video
│ ├── amp-phone.mp4
│ └── amp-phone.webm
├── content
│ ├── contribute
│ │ └── governance.md
│ ├── docs
│ │ ├── _blueprint.yaml
│ │ ├── blank.html
│ │ ├── build.md
│ │ ├── contribute
│ │ │ ├── _blueprint.yaml
│ │ │ ├── contribute.md
│ │ │ ├── [email protected]
│ │ │ ├── [email protected]
│ │ │ ├── [email protected]
│ │ │ ├── [email protected]
│ │ │ ├── file-a-bug.md
│ │ │ └── github.md
│ │ ├── contribute.md
│ │ ├── get_started
│ │ │ ├── _blueprint.yaml
│ │ │ ├── create
│ │ │ │ ├── _blueprint.yaml
│ │ │ │ ├── basic_markup.md
│ │ │ │ ├── [email protected]
│ │ │ │ ├── [email protected]
│ │ │ │ ├── [email protected]
│ │ │ │ ├── [email protected]
│ │ │ │ ├── [email protected]
│ │ │ │ ├── [email protected]
│ │ │ │ ├── [email protected]
│ │ │ │ ├── [email protected]
│ │ │ │ ├── [email protected]
│ │ │ │ ├── basic_markup@pt_BR.md
│ │ │ │ ├── [email protected]
│ │ │ │ ├── [email protected]
│ │ │ │ ├── [email protected]
│ │ │ │ ├── basic_markup@zh_CN.md
│ │ │ │ ├── include_image.md
│ │ │ │ ├── [email protected]
│ │ │ │ ├── [email protected]
│ │ │ │ ├── [email protected]
│ │ │ │ ├── [email protected]
│ │ │ │ ├── [email protected]
│ │ │ │ ├── [email protected]
│ │ │ │ ├── [email protected]
│ │ │ │ ├── [email protected]
│ │ │ │ ├── [email protected]
│ │ │ │ ├── include_image@pt_BR.md
│ │ │ │ ├── [email protected]
│ │ │ │ ├── [email protected]
│ │ │ │ ├── [email protected]
│ │ │ │ ├── include_image@zh_CN.md
│ │ │ │ ├── prepare_for_discovery.md
│ │ │ │ ├── [email protected]
│ │ │ │ ├── [email protected]
│ │ │ │ ├── [email protected]
│ │ │ │ ├── [email protected]
│ │ │ │ ├── [email protected]
│ │ │ │ ├── [email protected]
│ │ │ │ ├── [email protected]
│ │ │ │ ├── [email protected]
│ │ │ │ ├── [email protected]
│ │ │ │ ├── prepare_for_discovery@pt_BR.md
│ │ │ │ ├── [email protected]
│ │ │ │ ├── [email protected]
│ │ │ │ ├── [email protected]
│ │ │ │ ├── prepare_for_discovery@zh_CN.md
│ │ │ │ ├── presentation_layout.md
│ │ │ │ ├── [email protected]
│ │ │ │ ├── [email protected]
│ │ │ │ ├── [email protected]
│ │ │ │ ├── [email protected]
│ │ │ │ ├── [email protected]
│ │ │ │ ├── [email protected]
│ │ │ │ ├── [email protected]
│ │ │ │ ├── [email protected]
│ │ │ │ ├── [email protected]
│ │ │ │ ├── presentation_layout@pt_BR.md
│ │ │ │ ├── [email protected]
│ │ │ │ ├── [email protected]
│ │ │ │ ├── [email protected]
│ │ │ │ ├── presentation_layout@zh_CN.md
│ │ │ │ ├── preview_and_validate.md
│ │ │ │ ├── [email protected]
│ │ │ │ ├── [email protected]
│ │ │ │ ├── [email protected]
│ │ │ │ ├── [email protected]
│ │ │ │ ├── [email protected]
│ │ │ │ ├── [email protected]
│ │ │ │ ├── [email protected]
│ │ │ │ ├── [email protected]
│ │ │ │ ├── [email protected]
│ │ │ │ ├── preview_and_validate@pt_BR.md
│ │ │ │ ├── [email protected]
│ │ │ │ ├── [email protected]
│ │ │ │ ├── [email protected]
│ │ │ │ ├── preview_and_validate@zh_CN.md
│ │ │ │ ├── publish.md
│ │ │ │ ├── [email protected]
│ │ │ │ ├── [email protected]
│ │ │ │ ├── [email protected]
│ │ │ │ ├── [email protected]
│ │ │ │ ├── [email protected]
│ │ │ │ ├── [email protected]
│ │ │ │ ├── [email protected]
│ │ │ │ ├── [email protected]
│ │ │ │ ├── [email protected]
│ │ │ │ ├── publish@pt_BR.md
│ │ │ │ ├── [email protected]
│ │ │ │ ├── [email protected]
│ │ │ │ ├── [email protected]
│ │ │ │ └── publish@zh_CN.md
│ │ │ ├── create.md
│ │ │ ├── [email protected]
│ │ │ ├── [email protected]
│ │ │ ├── [email protected]
│ │ │ ├── [email protected]
│ │ │ ├── [email protected]
│ │ │ ├── [email protected]
│ │ │ ├── [email protected]
│ │ │ ├── [email protected]
│ │ │ ├── [email protected]
│ │ │ ├── create@pt_BR.md
│ │ │ ├── [email protected]
│ │ │ ├── [email protected]
│ │ │ ├── [email protected]
│ │ │ ├── create@zh_CN.md
│ │ │ ├── live_blog.md
│ │ │ ├── [email protected]
│ │ │ ├── login_requiring
│ │ │ │ ├── _blueprint.yaml
│ │ │ │ ├── add_comment.md
│ │ │ │ ├── [email protected]
│ │ │ │ ├── login.md
│ │ │ │ ├── [email protected]
│ │ │ │ ├── logout.md
│ │ │ │ ├── [email protected]
│ │ │ │ ├── summary.md
│ │ │ │ └── [email protected]
│ │ │ ├── login_requiring.md
│ │ │ └── [email protected]
│ │ ├── getting-started.md
│ │ ├── guides
│ │ │ ├── _blueprint.yaml
│ │ │ ├── author_develop
│ │ │ │ ├── _blueprint.yaml
│ │ │ │ ├── ads_on_amp
│ │ │ │ │ ├── _blueprint.yaml
│ │ │ │ │ ├── ads_getting_started.md
│ │ │ │ │ ├── [email protected]
│ │ │ │ │ ├── ads_tips.md
│ │ │ │ │ └── [email protected]
│ │ │ │ ├── ads_on_amp.md
│ │ │ │ ├── [email protected]
│ │ │ │ ├── amp_replacements.md
│ │ │ │ ├── [email protected]
│ │ │ │ ├── iframes.md
│ │ │ │ ├── [email protected]
│ │ │ │ ├── responsive_amp
│ │ │ │ │ ├── _blueprint.yaml
│ │ │ │ │ ├── art_direction.md
│ │ │ │ │ ├── [email protected]
│ │ │ │ │ ├── control_layout.md
│ │ │ │ │ ├── [email protected]
│ │ │ │ │ ├── [email protected]
│ │ │ │ │ ├── [email protected]
│ │ │ │ │ ├── [email protected]
│ │ │ │ │ ├── [email protected]
│ │ │ │ │ ├── [email protected]
│ │ │ │ │ ├── [email protected]
│ │ │ │ │ ├── [email protected]
│ │ │ │ │ ├── [email protected]
│ │ │ │ │ ├── control_layout@pt_BR.md
│ │ │ │ │ ├── [email protected]
│ │ │ │ │ ├── [email protected]
│ │ │ │ │ ├── [email protected]
│ │ │ │ │ ├── control_layout@zh_CN.md
│ │ │ │ │ ├── custom_fonts.md
│ │ │ │ │ ├── [email protected]
│ │ │ │ │ ├── placeholders.md
│ │ │ │ │ ├── [email protected]
│ │ │ │ │ ├── style_pages.md
│ │ │ │ │ ├── [email protected]
│ │ │ │ │ ├── [email protected]
│ │ │ │ │ ├── [email protected]
│ │ │ │ │ ├── [email protected]
│ │ │ │ │ ├── [email protected]
│ │ │ │ │ ├── [email protected]
│ │ │ │ │ ├── [email protected]
│ │ │ │ │ ├── [email protected]
│ │ │ │ │ ├── [email protected]
│ │ │ │ │ ├── style_pages@pt_BR.md
│ │ │ │ │ ├── [email protected]
│ │ │ │ │ ├── [email protected]
│ │ │ │ │ ├── [email protected]
│ │ │ │ │ └── style_pages@zh_CN.md
│ │ │ │ ├── responsive_amp.md
│ │ │ │ ├── [email protected]
│ │ │ │ ├── [email protected]
│ │ │ │ ├── [email protected]
│ │ │ │ ├── [email protected]
│ │ │ │ ├── [email protected]
│ │ │ │ ├── [email protected]
│ │ │ │ ├── [email protected]
│ │ │ │ ├── [email protected]
│ │ │ │ ├── [email protected]
│ │ │ │ ├── responsive_amp@pt_BR.md
│ │ │ │ ├── [email protected]
│ │ │ │ ├── [email protected]
│ │ │ │ ├── [email protected]
│ │ │ │ ├── responsive_amp@zh_CN.md
│ │ │ │ ├── third_party_components.md
│ │ │ │ ├── [email protected]
│ │ │ │ ├── [email protected]
│ │ │ │ ├── [email protected]
│ │ │ │ ├── [email protected]
│ │ │ │ ├── [email protected]
│ │ │ │ ├── [email protected]
│ │ │ │ ├── [email protected]
│ │ │ │ ├── [email protected]
│ │ │ │ ├── [email protected]
│ │ │ │ ├── third_party_components@pt_BR.md
│ │ │ │ ├── [email protected]
│ │ │ │ ├── [email protected]
│ │ │ │ ├── [email protected]
│ │ │ │ └── third_party_components@zh_CN.md
│ │ │ ├── author_develop.md
│ │ │ ├── debug
│ │ │ │ ├── _blueprint.yaml
│ │ │ │ ├── validate.md
│ │ │ │ ├── [email protected]
│ │ │ │ ├── [email protected]
│ │ │ │ ├── [email protected]
│ │ │ │ ├── [email protected]
│ │ │ │ ├── [email protected]
│ │ │ │ ├── [email protected]
│ │ │ │ ├── [email protected]
│ │ │ │ ├── [email protected]
│ │ │ │ ├── [email protected]
│ │ │ │ ├── validate@pt_BR.md
│ │ │ │ ├── [email protected]
│ │ │ │ ├── [email protected]
│ │ │ │ ├── [email protected]
│ │ │ │ └── validate@zh_CN.md
│ │ │ ├── debug.md
│ │ │ ├── deploy
│ │ │ │ ├── _blueprint.yaml
│ │ │ │ ├── analytics_amp
│ │ │ │ │ ├── _blueprint.yaml
│ │ │ │ │ ├── analytics_basics.md
│ │ │ │ │ ├── [email protected]
│ │ │ │ │ ├── [email protected]
│ │ │ │ │ ├── [email protected]
│ │ │ │ │ ├── [email protected]
│ │ │ │ │ ├── [email protected]
│ │ │ │ │ ├── [email protected]
│ │ │ │ │ ├── [email protected]
│ │ │ │ │ ├── [email protected]
│ │ │ │ │ ├── [email protected]
│ │ │ │ │ ├── analytics_basics@pt_BR.md
│ │ │ │ │ ├── [email protected]
│ │ │ │ │ ├── [email protected]
│ │ │ │ │ ├── [email protected]
│ │ │ │ │ ├── analytics_basics@zh_CN.md
│ │ │ │ │ ├── deep_dive_analytics.md
│ │ │ │ │ ├── [email protected]
│ │ │ │ │ ├── [email protected]
│ │ │ │ │ ├── [email protected]
│ │ │ │ │ ├── [email protected]
│ │ │ │ │ ├── [email protected]
│ │ │ │ │ ├── [email protected]
│ │ │ │ │ ├── [email protected]
│ │ │ │ │ ├── [email protected]
│ │ │ │ │ ├── [email protected]
│ │ │ │ │ ├── deep_dive_analytics@pt_BR.md
│ │ │ │ │ ├── [email protected]
│ │ │ │ │ ├── [email protected]
│ │ │ │ │ ├── [email protected]
│ │ │ │ │ ├── deep_dive_analytics@zh_CN.md
│ │ │ │ │ ├── use_cases.md
│ │ │ │ │ ├── [email protected]
│ │ │ │ │ ├── [email protected]
│ │ │ │ │ ├── [email protected]
│ │ │ │ │ ├── [email protected]
│ │ │ │ │ ├── [email protected]
│ │ │ │ │ ├── [email protected]
│ │ │ │ │ ├── [email protected]
│ │ │ │ │ ├── [email protected]
│ │ │ │ │ ├── [email protected]
│ │ │ │ │ ├── use_cases@pt_BR.md
│ │ │ │ │ ├── [email protected]
│ │ │ │ │ ├── [email protected]
│ │ │ │ │ ├── [email protected]
│ │ │ │ │ └── use_cases@zh_CN.md
│ │ │ │ ├── analytics_amp.md
│ │ │ │ ├── [email protected]
│ │ │ │ ├── [email protected]
│ │ │ │ ├── [email protected]
│ │ │ │ ├── [email protected]
│ │ │ │ ├── [email protected]
│ │ │ │ ├── [email protected]
│ │ │ │ ├── [email protected]
│ │ │ │ ├── [email protected]
│ │ │ │ ├── [email protected]
│ │ │ │ ├── analytics_amp@pt_BR.md
│ │ │ │ ├── [email protected]
│ │ │ │ ├── [email protected]
│ │ │ │ ├── [email protected]
│ │ │ │ ├── analytics_amp@zh_CN.md
│ │ │ │ ├── discovery.md
│ │ │ │ ├── [email protected]
│ │ │ │ ├── [email protected]
│ │ │ │ ├── [email protected]
│ │ │ │ ├── [email protected]
│ │ │ │ ├── [email protected]
│ │ │ │ ├── [email protected]
│ │ │ │ ├── [email protected]
│ │ │ │ ├── [email protected]
│ │ │ │ ├── [email protected]
│ │ │ │ ├── discovery@pt_BR.md
│ │ │ │ ├── [email protected]
│ │ │ │ ├── [email protected]
│ │ │ │ ├── [email protected]
│ │ │ │ ├── discovery@zh_CN.md
│ │ │ │ ├── engagement.md
│ │ │ │ └── [email protected]
│ │ │ ├── deploy.md
│ │ │ └── embed
│ │ │ ├── _blueprint.yaml
│ │ │ └── login-paywalls.md
│ │ ├── guides.md
│ │ ├── reference
│ │ │ ├── _blueprint.yaml
│ │ │ ├── common_attributes.md
│ │ │ ├── components
│ │ │ │ ├── _blueprint.yaml
│ │ │ │ ├── ads-analytics
│ │ │ │ │ └── _blueprint.yaml
│ │ │ │ ├── dynamic-content
│ │ │ │ │ └── _blueprint.yaml
│ │ │ │ ├── layout
│ │ │ │ │ └── _blueprint.yaml
│ │ │ │ ├── media
│ │ │ │ │ └── _blueprint.yaml
│ │ │ │ ├── presentation
│ │ │ │ │ └── _blueprint.yaml
│ │ │ │ └── social
│ │ │ │ └── _blueprint.yaml
│ │ │ ├── components.md
│ │ │ ├── experimental.md
│ │ │ ├── [email protected]
│ │ │ ├── [email protected]
│ │ │ ├── [email protected]
│ │ │ ├── [email protected]
│ │ │ ├── [email protected]
│ │ │ ├── [email protected]
│ │ │ ├── [email protected]
│ │ │ ├── [email protected]
│ │ │ ├── experimental@pt_BR.md
│ │ │ ├── [email protected]
│ │ │ ├── [email protected]
│ │ │ ├── [email protected]
│ │ │ ├── experimental@zh_CN.md
│ │ │ ├── validation_errors.md
│ │ │ ├── [email protected]
│ │ │ ├── [email protected]
│ │ │ ├── [email protected]
│ │ │ ├── [email protected]
│ │ │ ├── [email protected]
│ │ │ ├── [email protected]
│ │ │ ├── [email protected]
│ │ │ ├── [email protected]
│ │ │ ├── validation_errors@pt_BR.md
│ │ │ ├── [email protected]
│ │ │ ├── [email protected]
│ │ │ ├── [email protected]
│ │ │ └── validation_errors@zh_CN.md
│ │ ├── reference.md
│ │ └── tutorials.md
│ ├── includes
│ │ ├── _blueprint.yaml
│ │ ├── amp-conf-2017.yaml
│ │ ├── amp-iframe.md
│ │ ├── blog_feed.yaml
│ │ ├── doc.yaml
│ │ ├── events.yaml
│ │ ├── home.yaml
│ │ ├── html-example.md
│ │ ├── latest.yaml
│ │ ├── list-blog.yaml
│ │ ├── lists.yaml
│ │ ├── menu.yaml
│ │ ├── roadmap.yaml
│ │ └── tweets.yaml
│ ├── latest
│ │ ├── _blueprint.yaml
│ │ ├── blog
│ │ │ ├── _blueprint.yaml
│ │ │ ├── 1056.md
│ │ │ ├── ads-on-the-web-will-get-better-with-amp-heres-how.md
│ │ │ ├── amp-roadmap-update-for-mid-q1-2017.md
│ │ │ ├── amp-up-for-amp-conf-2017.md
│ │ │ ├── grow-your-business-with-ads-on-amp.md
│ │ │ ├── new-default-placeholders-for-ads-in-amp.md
│ │ │ ├── new-industry-benchmarks-for-mobile-page-speed.md
│ │ │ ├── speeding-up-news-apps-with-amp.md
│ │ │ ├── whats-in-an-amp-url.md
│ │ │ └── why-amp-caches-exist.md
│ │ ├── latest.html
│ │ ├── list-blog.html
│ │ ├── list-event.html
│ │ ├── list-past-event.html
│ │ └── roadmap.html
│ ├── learn
│ │ ├── _blueprint.yaml
│ │ ├── about-amp.md
│ │ ├── [email protected]
│ │ ├── [email protected]
│ │ ├── [email protected]
│ │ ├── [email protected]
│ │ ├── [email protected]
│ │ ├── [email protected]
│ │ ├── [email protected]
│ │ ├── [email protected]
│ │ ├── [email protected]
│ │ ├── about-amp@pt_BR.md
│ │ ├── [email protected]
│ │ ├── [email protected]
│ │ ├── [email protected]
│ │ ├── about-amp@zh_CN.md
│ │ ├── about-how.yaml
│ │ ├── [email protected]
│ │ ├── [email protected]
│ │ ├── [email protected]
│ │ ├── [email protected]
│ │ ├── [email protected]
│ │ ├── [email protected]
│ │ ├── [email protected]
│ │ ├── [email protected]
│ │ ├── about-how@pt_BR.yaml
│ │ ├── [email protected]
│ │ ├── [email protected]
│ │ ├── [email protected]
│ │ ├── about-how@zh_CN.yaml
│ │ ├── amp-design-principles.yaml
│ │ ├── browsers.md
│ │ ├── case-studies
│ │ │ ├── _blueprint.yaml
│ │ │ ├── category
│ │ │ │ ├── _blueprint.yaml
│ │ │ │ ├── advertisers.md
│ │ │ │ └── publishers.md
│ │ │ ├── gizmodo.md
│ │ │ ├── hearst.md
│ │ │ ├── milestone.md
│ │ │ ├── plista.md
│ │ │ ├── relay_media.md
│ │ │ ├── slate.md
│ │ │ ├── teads.md
│ │ │ ├── terra.md
│ │ │ ├── washingtonpost.md
│ │ │ └── wired.md
│ │ ├── case-studies.html
│ │ ├── how-amp-works.md
│ │ ├── [email protected]
│ │ ├── [email protected]
│ │ ├── [email protected]
│ │ ├── [email protected]
│ │ ├── [email protected]
│ │ ├── [email protected]
│ │ ├── [email protected]
│ │ ├── [email protected]
│ │ ├── how-amp-works@pt_BR.md
│ │ ├── [email protected]
│ │ ├── [email protected]
│ │ ├── [email protected]
│ │ ├── how-amp-works@zh_CN.md
│ │ ├── metrics.html
│ │ ├── overview.yaml
│ │ ├── [email protected]
│ │ ├── [email protected]
│ │ ├── [email protected]
│ │ ├── [email protected]
│ │ ├── [email protected]
│ │ ├── [email protected]
│ │ ├── [email protected]
│ │ ├── [email protected]
│ │ ├── [email protected]
│ │ ├── overview@pt_BR.yaml
│ │ ├── [email protected]
│ │ ├── [email protected]
│ │ ├── [email protected]
│ │ ├── overview@zh_CN.yaml
│ │ ├── who
│ │ │ ├── _blueprint.yaml
│ │ │ ├── ad-tech-platforms.yaml
│ │ │ ├── advertisers.yaml
│ │ │ ├── amp-ads.yaml
│ │ │ └── publishers.yaml
│ │ └── who-uses-amp.yaml
│ ├── pages
│ │ ├── _blueprint.yaml
│ │ ├── amp-conf-2017
│ │ │ ├── _blueprint.yaml
│ │ │ ├── accessibility.html
│ │ │ └── code-of-conduct.html
│ │ ├── amp-conf-2017.html
│ │ ├── home.html
│ │ ├── how-it-works.html
│ │ └── metrics_chart.html
│ └── support
│ ├── _blueprint.yaml
│ ├── developer
│ │ ├── _blueprint.yaml
│ │ ├── documentation-bug.md
│ │ ├── mailing-list.md
│ │ ├── platform-bug.md
│ │ ├── slack.md
│ │ └── stack-overflow.md
│ ├── developer.md
│ ├── faqs
│ │ ├── _blueprint.yaml
│ │ ├── overview.md
│ │ ├── [email protected]
│ │ ├── [email protected]
│ │ ├── [email protected]
│ │ ├── [email protected]
│ │ ├── [email protected]
│ │ ├── [email protected]
│ │ ├── [email protected]
│ │ ├── [email protected]
│ │ ├── overview@pt_BR.md
│ │ ├── [email protected]
│ │ ├── [email protected]
│ │ ├── [email protected]
│ │ ├── overview@zh_CN.md
│ │ ├── platform-involvement.md
│ │ ├── [email protected]
│ │ ├── [email protected]
│ │ ├── [email protected]
│ │ ├── [email protected]
│ │ ├── [email protected]
│ │ ├── [email protected]
│ │ ├── [email protected]
│ │ ├── [email protected]
│ │ ├── platform-involvement@pt_BR.md
│ │ ├── [email protected]
│ │ ├── [email protected]
│ │ ├── [email protected]
│ │ ├── platform-involvement@zh_CN.md
│ │ ├── publisher-monetization.md
│ │ ├── [email protected]
│ │ ├── [email protected]
│ │ ├── [email protected]
│ │ ├── [email protected]
│ │ ├── [email protected]
│ │ ├── [email protected]
│ │ ├── [email protected]
│ │ ├── [email protected]
│ │ ├── publisher-monetization@pt_BR.md
│ │ ├── [email protected]
│ │ ├── [email protected]
│ │ ├── [email protected]
│ │ ├── publisher-monetization@zh_CN.md
│ │ └── supported-platforms.md
│ ├── faqs.md
│ ├── platform.md
│ ├── support.md
│ ├── vendor
│ │ ├── _blueprint.yaml
│ │ └── amp-certification.md
│ └── vendor.md
├── CONTRIBUTING.md
├── firebase.json
├── gulpfile.js
├── LICENSE
├── npm-shrinkwrap.json
├── package.json
├── podspec.yaml
├── pwa
│ ├── google7199ce9da1ad191b.html
│ ├── pwa.html
│ ├── pwa.js
│ └── service-worker.js
├── README.md
├── scripts
│ ├── component_categories.json
│ ├── import_docs.js
│ ├── import_docs.json
│ ├── update_blog_links.js
│ ├── update_platforms_page.js
│ └── update_tweets.js
├── translations
│ ├── ar
│ │ └── LC_MESSAGES
│ │ └── messages.po
│ ├── de
│ │ └── LC_MESSAGES
│ │ └── messages.po
│ ├── es
│ │ └── LC_MESSAGES
│ │ └── messages.po
│ ├── fr
│ │ └── LC_MESSAGES
│ │ └── messages.po
│ ├── id
│ │ └── LC_MESSAGES
│ │ └── messages.po
│ ├── it
│ │ └── LC_MESSAGES
│ │ └── messages.po
│ ├── ja
│ │ └── LC_MESSAGES
│ │ └── messages.po
│ ├── ko
│ │ └── LC_MESSAGES
│ │ └── messages.po
│ ├── messages.pot
│ ├── pl
│ │ └── LC_MESSAGES
│ │ └── messages.po
│ ├── pt_BR
│ │ └── LC_MESSAGES
│ │ └── messages.po
│ ├── ru
│ │ └── LC_MESSAGES
│ │ └── messages.po
│ ├── th
│ │ └── LC_MESSAGES
│ │ └── messages.po
│ ├── tr
│ │ └── LC_MESSAGES
│ │ └── messages.po
│ └── zh_CN
│ └── LC_MESSAGES
│ └── messages.po
└── views
├── about-casestudies.html
├── about-how.html
├── about-overview.html
├── about-who-vertical.html
├── about-who.html
├── base.html
├── blank.html
├── blog_detail.html
├── case-study.html
├── design-principles.html
├── doc.html
├── grid_page.html
├── list_page.html
├── partials
│ ├── breadcrumb-nav.html
│ ├── doc_nav.html
│ ├── faq-accordion.html
│ ├── footer-cta.html
│ ├── footer.html
│ ├── grid-card.html
│ ├── head.html
│ ├── header.html
│ ├── lang_switcher.html
│ ├── large-cta.html
│ ├── lines.html
│ ├── nav.html
│ ├── points.html
│ ├── post-item.html
│ ├── promo_banner.html
│ ├── search.html
│ ├── share.html
│ ├── sidebar.html
│ └── sub_nav.html
└── section_page.html
```
# Files
--------------------------------------------------------------------------------
/assets/sass/pages/_latest.scss:
--------------------------------------------------------------------------------
```scss
.latest {
.hero,
.hero .img-wrap {
position: relative;
}
.hero {
box-shadow: 0 3px 10px 0 rgba(0, 0, 0, .15);
.lines,
.text {
left: 0;
position: absolute;
top: 0;
}
.lines {
transform: translate(-14.54%, -18.18%);
width: 22.91%
}
.text {
padding: 80px 11.35%;
right: 0;
.title {
max-width: 300px;
}
}
}
.feeds {
background: $color-white;
box-sizing: border-box;
display: flex;
justify-content: space-between;
margin: 0 auto;
padding: 80px 4.86%;
position: relative;
top: -160px;
width: 90%;
.text {
display: none;
}
.posts {
width: 48.9%;
.posts-label {
margin-bottom: 64px;
position: relative;
&::after {
background: $gradient-bold;
bottom: -35px;
content: '';
height: 3px;
left: 0;
position: absolute;
width: 47px;
}
}
}
.post-item {
padding: 36px 0;
&:last-of-type {
margin-bottom: 30px;
}
&.tweet {
a,
.retweet {
text-transform: none;
}
.origin-name,
.origin-id,
.retweet,
.retweet amp-img {
display: inline-block;
}
.origin-name,
.origin-id,
.retweet amp-img {
margin-right: 5px;
}
.retweet i-amp-sizer {
width: 16px;
}
.tweet-text {
margin: 20px 0;
a {
font-size: inherit;
font-weight: inherit;
line-height: inherit;
}
s {
text-decoration: none;
}
b {
font-weight: 300;
}
.invisible {
font-size: 0;
line-height: 0;
display: inline-block;
width: 0;
}
.tco-ellipsis + .invisible {
width: 4px;
}
}
.Emoji {
max-width: 18px;
}
}
}
.label,
.post-meta {
@extend %text-label;
}
.label {
color: $color-ampblue;
margin-bottom: 15px;
}
.post-meta {
color: $color-grey-md;
.time {
&::before {
content: '|';
margin-left: .8em;
margin-right: 1.1em;
}
}
}
.post-title {
h4 {
margin: 10px 0;
}
}
.post-excerpt {
margin: 0;
}
.event-meta {
margin: 6px 0 8px 0;
}
.twitter {
padding-top: .7em;
width: 36.41%;
.twitter-icon {
display: inline-block;
position: relative;
amp-img {
left: -25px;
position: absolute;
top: -22px;
}
i-amp-sizer {
width: 45px;
}
}
.main-account {
display: inline-block;
margin-bottom: 36px;
text-transform: none;
}
.mobile-feed {
display: none;
}
}
&::before {
background: $gradient-bold;
content: '';
height: 3px;
left: 0;
position: absolute;
right: 0;
top: -3px;
}
}
&.rtl {
.feeds .posts .posts-label::after {
left: auto;
right: 0;
}
}
@include max-screen($tablet-breakpoint + 320px) {
.hero {
.text {
padding: 80px 5.35%;
}
}
.feeds {
padding: 60px 4.86%;
}
}
@include max-screen($mobile-breakpoint) {
.wrap {
.container,
.content {
padding: 0;
}
}
.hero .img-wrap .lines,
.hero .text,
.twitter .desktop-feed {
display: none;
}
.feeds .text,
.feeds .twitter .mobile-feed {
display: block;
}
.feeds {
flex-wrap: wrap;
justify-content: center;
padding: 40px 0;
top: -11vw;
.text {
margin-bottom: 30px;
width: 82.36%;
}
.posts {
margin-bottom: 36px;
width: 82.36%;
.posts-label {
margin-bottom: 25px;
&::after {
bottom: -25px;
}
}
.post-item {
padding: 24px 0;
&:last-of-type {
margin-bottom: 20px;
}
}
}
.twitter {
width: 82.36%;
.twitter-account,
.twitter-label {
margin-bottom: 10px;
text-align: center;
}
.main-account {
margin-bottom: 20px;
}
.tweet {
display: flex;
flex-basis: 100%;
flex-direction: column;
justify-content: space-around;
margin: 0;
max-width: 100%;
overflow: hidden;
padding: 26px;
}
}
}
}
@include max-screen($mobile-medium-breakpoint) {
.feeds {
.posts,
.twitter {
width: 100%;
}
.twitter {
.mobile-feed {
left: -8%;
position: relative;
width: 116%;
}
}
}
}
}
```
--------------------------------------------------------------------------------
/assets/img/about/who-use-amp/who_icon_publishers.svg:
--------------------------------------------------------------------------------
```
<svg id="Layer_1" data-name="Layer 1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 150 150"><defs><style>.cls-1,.cls-13,.cls-14,.cls-15,.cls-16,.cls-17{fill:none;}.cls-1{stroke:#0389ff;}.cls-1,.cls-10,.cls-11,.cls-12,.cls-13,.cls-14,.cls-15,.cls-16,.cls-17,.cls-2,.cls-3,.cls-4,.cls-5,.cls-8,.cls-9{stroke-linecap:round;}.cls-1,.cls-2,.cls-3,.cls-4,.cls-5{stroke-miterlimit:10;}.cls-10,.cls-11,.cls-12,.cls-2,.cls-3,.cls-4,.cls-5,.cls-8,.cls-9{fill:#fff;}.cls-2,.cls-3,.cls-4,.cls-5{fill-opacity:0.7;}.cls-2{stroke:url(#linear-gradient);}.cls-3{stroke:url(#linear-gradient-2);}.cls-4{stroke:url(#linear-gradient-3);}.cls-5{stroke:url(#linear-gradient-4);}.cls-6,.cls-7{opacity:0.7;}.cls-6{fill:url(#linear-gradient-5);}.cls-7{fill:url(#linear-gradient-6);}.cls-10,.cls-11,.cls-12,.cls-13,.cls-14,.cls-15,.cls-16,.cls-17,.cls-8,.cls-9{stroke-linejoin:round;}.cls-8{stroke:url(#linear-gradient-7);}.cls-9{stroke:url(#linear-gradient-8);}.cls-10{stroke:url(#linear-gradient-9);}.cls-11{stroke:url(#linear-gradient-10);}.cls-12{stroke:url(#linear-gradient-11);}.cls-13{stroke:url(#linear-gradient-12);}.cls-14{stroke:url(#linear-gradient-13);}.cls-15{stroke:url(#linear-gradient-14);}.cls-16{stroke:url(#linear-gradient-15);}.cls-17{stroke:url(#linear-gradient-16);}</style><linearGradient id="linear-gradient" x1="20.87" y1="83.67" x2="63.23" y2="83.67" gradientUnits="userSpaceOnUse"><stop offset="0" stop-color="#1c79c4"/><stop offset="0.51" stop-color="#0389ff"/><stop offset="1" stop-color="#0dd4ff"/></linearGradient><linearGradient id="linear-gradient-2" x1="25.64" y1="84.98" x2="63.23" y2="84.98" xlink:href="#linear-gradient"/><linearGradient id="linear-gradient-3" x1="34.38" y1="86.29" x2="63.23" y2="86.29" xlink:href="#linear-gradient"/><linearGradient id="linear-gradient-4" x1="6980.83" y1="62.88" x2="7030.87" y2="62.88" gradientTransform="matrix(-1, 0, 0, 1, 7093.06, 0)" xlink:href="#linear-gradient"/><linearGradient id="linear-gradient-5" x1="68.56" y1="65.8" x2="80.62" y2="33.54" xlink:href="#linear-gradient"/><linearGradient id="linear-gradient-6" x1="73.16" y1="38.57" x2="76.14" y2="30.6" xlink:href="#linear-gradient"/><linearGradient id="linear-gradient-7" x1="79.27" y1="89.66" x2="133.5" y2="89.66" xlink:href="#linear-gradient"/><linearGradient id="linear-gradient-8" x1="83.25" y1="89.66" x2="128.47" y2="89.66" xlink:href="#linear-gradient"/><linearGradient id="linear-gradient-9" x1="86.35" y1="89.65" x2="133.5" y2="89.65" xlink:href="#linear-gradient"/><linearGradient id="linear-gradient-10" x1="116.08" y1="75.81" x2="128.47" y2="75.81" xlink:href="#linear-gradient"/><linearGradient id="linear-gradient-11" x1="90.13" y1="81.48" x2="113.11" y2="81.48" xlink:href="#linear-gradient"/><linearGradient id="linear-gradient-12" x1="90.53" y1="86.1" x2="113.77" y2="86.1" xlink:href="#linear-gradient"/><linearGradient id="linear-gradient-13" x1="90.53" y1="96.31" x2="113.38" y2="96.31" xlink:href="#linear-gradient"/><linearGradient id="linear-gradient-14" x1="90.53" y1="95.98" x2="128.74" y2="95.98" xlink:href="#linear-gradient"/><linearGradient id="linear-gradient-15" x1="90.53" y1="99.41" x2="128.74" y2="99.41" xlink:href="#linear-gradient"/><linearGradient id="linear-gradient-16" x1="90.53" y1="108.84" x2="119.2" y2="108.84" xlink:href="#linear-gradient"/></defs><title>who_icon_publishers</title><path class="cls-1" d="M17,63.19,55.93,43.42,55.09,43a.79.79,0,0,1,0-1.43l9.53-4.74A4,4,0,0,1,68,36.8l.67.3,38.14-19.77.79,64.85L69.44,101.95l-2.38-1.58-14.3,7.12,4,1.58L17.8,128Z"/><polygon class="cls-2" points="21.37 63.98 62.73 39.33 62.73 105.9 21.37 128.05 21.37 63.98"/><polygon class="cls-3" points="26.14 66.62 62.73 39.33 62.73 105.9 26.14 130.68 26.14 66.62"/><polygon class="cls-4" points="34.88 69.26 62.73 39.33 62.73 105.9 34.88 133.32 34.88 69.26"/><polygon class="cls-5" points="111.73 19.82 62.69 39.33 62.69 105.9 111.73 83.89 111.73 19.82"/><polygon class="cls-6" points="67.97 36.8 78.78 31.36 81.36 32.35 81.36 62.14 76.59 58.45 71.63 67.67 70.83 37.88 67.97 36.8"/><polygon class="cls-7" points="81.36 32.35 70.74 37.84 67.97 36.76 78.92 31.27 81.36 32.35"/><path class="cls-8" d="M86.92,122.08l43.14-21.85a4.74,4.74,0,0,0,2.6-4.34L133,57.23,88,81.48l.22,37.9q0,.22,0,.44c-.37,4.36-7,3.93-7-.44l-1.4-39.22,44.49-23.73.79,5"/><polygon class="cls-9" points="127.97 56.57 83.75 80.56 83.75 122.74 127.97 98.75 127.97 56.57"/><path class="cls-10" d="M86.92,122.08l41.91-21.21a7.54,7.54,0,0,0,3-2.18,7.5,7.5,0,0,0,.9-4.27l.3-37.18L88,81.46q-.14,9.7-.08,19.4,0,4.77.12,9.54c.07,3.9.93,8.11-1.21,11.64"/><polygon class="cls-11" points="127.97 79.37 116.58 85.17 116.58 72.26 127.97 66.46 127.97 79.37"/><polygon class="cls-12" points="112.61 77.53 90.63 88.6 90.63 85.44 112.61 74.36 112.61 77.53"/><line class="cls-13" x1="91.03" y1="91.63" x2="113.27" y2="80.56"/><line class="cls-14" x1="91.03" y1="101.91" x2="112.88" y2="90.71"/><line class="cls-15" x1="91.03" y1="105.34" x2="128.24" y2="86.62"/><line class="cls-16" x1="91.03" y1="108.77" x2="128.24" y2="90.05"/><line class="cls-17" x1="91.03" y1="115.62" x2="118.7" y2="102.05"/></svg>
```
--------------------------------------------------------------------------------
/content/docs/guides/author_develop/[email protected]:
--------------------------------------------------------------------------------
```markdown
---
$title: Crear páginas de AMP adaptables
toc: true
---
Crear elementos de AMP adaptables es realmente fácil.
Solo hay que introducir `layout=responsive` en ellos.
[TOC]
## Crear imágenes adaptables
Todos los recursos cargados externamente, incluidas las imágenes,
deben tener un tamaño y una posición específicos
para que cuando los recursos carguen la página, esta no salte y reinicie el flujo.
Para crear imágenes adaptables, especifica la anchura y la altura, establece el diseño como adaptable e indica, mediante <a href="/es/docs/guides/responsive/style_pages.html">`srcset`</a>, cuál es el elemento de imagen que se debe utilizar en función de los diferentes tamaños de pantalla:
[sourcecode:html]
<amp-img
src="/img/narrow.jpg"
srcset="/img/wide.jpg 640w,
/img/narrow.jpg 320w"
width="1698"
height="2911"
layout="responsive"
alt="an image">
</amp-img>
[/sourcecode]
Este elemento `amp-img` ajusta automáticamente la anchura de su elemento contenedor, y su altura se ajusta automáticamente a la relación de aspecto determinada por la anchura y la altura dadas:
<amp-img src="/static/img/docs/responsive_amp_img.png" width="500" height="857"></amp-img>
Consulta también la información sobre el componente [amp-img en AMP by Example](https://ampbyexample.com/components/amp-img/).
## Añadir estilos a una página
Añade todos los estilos dentro de la etiqueta `<style amp-custom>`
en el encabezado del documento.
Por ejemplo:
[sourcecode:html]
<!doctype html>
<head>
<meta charset="utf-8">
<link rel="canonical" href="hello-world.html" >
<meta name="viewport" content="width=device-width,minimum-scale=1,initial-scale=1">
<style amp-boilerplate>body{-webkit-animation:-amp-start 8s steps(1,end) 0s 1 normal both;-moz-animation:-amp-start 8s steps(1,end) 0s 1 normal both;-ms-animation:-amp-start 8s steps(1,end) 0s 1 normal both;animation:-amp-start 8s steps(1,end) 0s 1 normal both}@-webkit-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@-moz-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@-ms-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@-o-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}</style><noscript><style amp-boilerplate>body{-webkit-animation:none;-moz-animation:none;-ms-animation:none;animation:none}</style></noscript>
<style amp-custom>
/* any custom style goes here. */
body {
background-color: white;
}
amp-img {
border: 5px solid black;
}
amp-img.grey-placeholder {
background-color: grey;
}
</style>
<script async src="https://cdn.ampproject.org/v0.js"></script>
</head>
[/sourcecode]
**Importante:**
Asegúrate de que solo hay una etiqueta `<style amp-custom>` en la página,
ya que en AMP solo se admite la presencia de una.
Define los estilos de los componentes con selectores de clase o de elemento
usando propiedades comunes de CSS. Por ejemplo:
[sourcecode:html]
<body>
<p>Hello, Kitty.</p>
<amp-img
class="grey-placeholder"
src="https://placekitten.com/g/500/300"
srcset="/img/cat.jpg 640w,
/img/kitten.jpg 320w"
width="500"
height="300"
layout="responsive">
</amp-img>
</body>
[/sourcecode]
**Importante:**
Comprueba que los estilos estén admitidos en AMP, ya que
algunos estilos no lo están por cuestiones de rendimiento
(consulta también [CSS compatibles](/es/docs/guides/responsive/style_pages.html)).
## Elementos de tamaño y posición
AMP desacopla el diseño del documento de la carga de recursos para que AMP pueda cargar el diseño de la página sin tener que esperar a las descargas de los recursos.
Especifica el tamaño y la posición de todos los elementos visibles de AMP,
proporcionando los atributos `width` y `height`.
Estos atributos implican la relación de aspecto del elemento,
que se puede escalar con el contenedor.
Establece el diseño como adaptable.
Esto ajusta el tamaño del elemento a la anchura del elemento contenedor
y cambia la altura automáticamente a la relación de aspecto determinada por los atributos de anchura y altura.
Obtén más información acerca de [los diseños compatibles con AMP](/es/docs/guides/responsive/control_layout.html).
## Valida tus estilos y diseños
Usa el validador de AMP para comprobar
los valores de diseño y CCS de tu página.
El validador confirma que el CSS de la página no exceda el límite de 50.000 bytes,
comprueba que no haya estilos no permitidos y garantiza que el diseño de la página sea compatible y el formato sea correcto.
Consulta también esta lista completa de [errores de estilo y diseño](/es/docs/reference/validation_errors.html#style-and-layout-errors).
Ejemplo de error en la consola de una página con CSS que excede el límite de 50.000 bytes:
<amp-img src="/static/img/docs/too_much_css.png" width="1404" height="334" layout="responsive"></amp-img>
Obtén más información acerca de cómo [validar las páginas de AMP](/es/docs/guides/validate.html),
incluida la forma de localizar los errores de estilo y solucionarlos.
```
--------------------------------------------------------------------------------
/content/docs/guides/author_develop/[email protected]:
--------------------------------------------------------------------------------
```markdown
---
$title: Responsive AMP-Seiten erstellen
toc: true
---
In AMP können Sie ganz leicht responsive Elemente erstellen, indem Sie einfach `layout=responsive` in sie einfügen.
[TOC]
## Responsive Bilder erstellen
Für alle extern geladenen Ressourcen, einschließlich Bildern, müssen Größe und Position angegeben werden, damit die Seite beim Laden der Ressourcen ohne Springen und Layoutänderung angezeigt wird.
Wenn Sie responsive Bilder erstellen, geben Sie Breite und Höhe an, legen Sie das Layout als responsiv fest und geben Sie mittels [`srcset`](/docs/guides/responsive/style_pages.html) an, welches Bild-Asset je nach Bildschirmgröße verwendet werden soll:
[sourcecode:html]
<amp-img
src="/img/narrow.jpg"
srcset="/img/wide.jpg 640w,
/img/narrow.jpg 320w"
width="1698"
height="2911"
layout="responsive"
alt="an image">
</amp-img>
[/sourcecode]
Dieses `amp-img`-Element passt die Breite seines Containerelements automatisch an. Die Höhe wird automatisch entsprechend dem Seitenverhältnis festgelegt, das sich aus den gegebenen Werten für Breite und Höhe ergibt:
<amp-img src="/static/img/docs/responsive_amp_img.png" width="500" height="857">
</amp-img>
Weitere Informationen finden Sie unter ["amp-img" bei AMP by Example](https://ampbyexample.com/components/amp-img/).
## Seite mit Stilen versehen
Fügen Sie alle Stile im `<style amp-custom>`-Tag im head-Abschnitt des Dokuments hinzu.
Beispiel:
[sourcecode:html]
<!doctype html>
<head>
<meta charset="utf-8">
<link rel="canonical" href="hello-world.html" >
<meta name="viewport" content="width=device-width,minimum-scale=1,initial-scale=1">
<style amp-boilerplate>body{-webkit-animation:-amp-start 8s steps(1,end) 0s 1 normal both;-moz-animation:-amp-start 8s steps(1,end) 0s 1 normal both;-ms-animation:-amp-start 8s steps(1,end) 0s 1 normal both;animation:-amp-start 8s steps(1,end) 0s 1 normal both}@-webkit-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@-moz-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@-ms-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@-o-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}</style><noscript><style amp-boilerplate>body{-webkit-animation:none;-moz-animation:none;-ms-animation:none;animation:none}</style></noscript>
<style amp-custom>
/* any custom style goes here. */
body {
background-color: white;
}
amp-img {
border: 5px solid black;
}
amp-img.grey-placeholder {
background-color: grey;
}
</style>
<script async src="https://cdn.ampproject.org/v0.js"></script>
</head>
[/sourcecode]
**Wichtig:** Achten Sie darauf, dass Ihre Seite nur ein `<style amp-custom>`-Tag enthält. Mehr ist in AMP nicht zulässig.
Definieren Sie Komponentenstile mit class- oder element-Selektoren unter Verwendung gebräuchlicher CSS-Eigenschaften. Beispiel:
[sourcecode:html]
<body>
<p>Hello, Kitty.</p>
<amp-img
class="grey-placeholder"
src="https://placekitten.com/g/500/300"
srcset="/img/cat.jpg 640w,
/img/kitten.jpg 320w"
width="500"
height="300"
layout="responsive">
</amp-img>
</body>
[/sourcecode]
**Wichtig:** Prüfen Sie, ob Ihre Stile in AMP unterstützt werden. Bei einigen Stilen ist dies aus Leistungsgründen nicht der Fall. Weitere Informationen finden Sie unter [Unterstützte CSS-Stile](/docs/guides/responsive/style_pages.html).
## Größe und Position von Elementen festlegen
AMP entkoppelt das Dokumentlayout vom Laden der Ressourcen, damit AMP das Layout der Seite laden kann, ohne auf Ressourcendownloads warten zu müssen.
Geben Sie mithilfe der Attribute `width` und `height` Größe und Position aller sichtbaren AMP-Elemente an.
Aus diesen Attributen ergibt sich das Seitenverhältnis des Elements, das dann mit dem Container skaliert werden kann.
Legen Sie das Layout als responsiv fest.
Dadurch wird die Breite des Elements an die Breite des Containerelements angepasst. Seine Höhe wird automatisch entsprechend dem Seitenverhältnis festgelegt, dass sich aus den width- und height-Attributen ergibt.
Weitere Informationen finden Sie unter [Unterstützte Layouts in AMP](/docs/guides/responsive/control_layout.html).
## Stile und Layout überprüfen
Mit dem AMP-Validierungstool können Sie die CSS- und Layoutwerte Ihrer Seite testen.
Das Validierungstool bestätigt, dass der CSS-Code Ihrer Seite nicht die Beschränkung von 50.000 Byte überschreitet, sucht nach unzulässigen Stilen und prüft, ob das Layout der Seite unterstützt wird und korrekt formatiert ist.
[Hier finden Sie die vollständige Liste der Stil- und Layoutfehler.](/docs/reference/validation_errors.html#style-and-layout-errors)
Beispiel für einen Fehler in der Konsole bei einer Seite mit CSS-Code, der die Beschränkung von 50.000 Byte überschreitet:
<amp-img src="/static/img/docs/too_much_css.png" width="1404" height="334" layout="responsive"></amp-img>
[Hier finden Sie weitere Informationen zum Überprüfen von AMP-Seiten](/docs/guides/validate.html), einschließlich des Auffindens und Behebens von Stilfehlern.
```
--------------------------------------------------------------------------------
/content/docs/guides/author_develop/[email protected]:
--------------------------------------------------------------------------------
```markdown
---
$title: Créer des pages AMP responsives
toc: true
---
Dans le cas d'éléments AMP, c'est facile, il suffit de leur ajouter le code `layout=responsive`.
[TOC]
## Créer des images responsives
Toutes les ressources chargées en externe, y compris les images, doivent avoir une taille et un emplacement précis. Ainsi, au fil de leur chargement, la page ne saute pas et est redisposée de manière dynamique.
Créez des images responsives en indiquant leur largeur et leur hauteur, en définissant la mise en page comme responsive et en indiquant, au moyen de [`srcset`](/docs/guides/responsive/style_pages.html), quelle ressource d'image utiliser en fonction des différentes tailles d'écran :
[sourcecode:html]
<amp-img
src="/img/narrow.jpg"
srcset="/img/wide.jpg 640w,
/img/narrow.jpg 320w"
width="1698"
height="2911"
layout="responsive"
alt="an image">
</amp-img>
[/sourcecode]
Cet élément `amp-img` s'adapte automatiquement à la largeur de son élément conteneur, et sa hauteur est définie automatiquement sur le format déterminé par la largeur et la hauteur données :
<amp-img src="/static/img/docs/responsive_amp_img.png" width="500" height="857"></amp-img>
Voir aussi [amp-img sur AMP by Example](https://ampbyexample.com/components/amp-img/).
## Ajouter des styles à une page
Ajoutez tous les styles à l'intérieur de la balise `<style amp-custom>` dans l'en-tête du document.
Par exemple :
[sourcecode:html]
<!doctype html>
<head>
<meta charset="utf-8">
<link rel="canonical" href="hello-world.html" >
<meta name="viewport" content="width=device-width,minimum-scale=1,initial-scale=1">
<style amp-boilerplate>body{-webkit-animation:-amp-start 8s steps(1,end) 0s 1 normal both;-moz-animation:-amp-start 8s steps(1,end) 0s 1 normal both;-ms-animation:-amp-start 8s steps(1,end) 0s 1 normal both;animation:-amp-start 8s steps(1,end) 0s 1 normal both}@-webkit-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@-moz-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@-ms-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@-o-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}</style><noscript><style amp-boilerplate>body{-webkit-animation:none;-moz-animation:none;-ms-animation:none;animation:none}</style></noscript>
<style amp-custom>
/* any custom style goes here. */
body {
background-color: white;
}
amp-img {
border: 5px solid black;
}
amp-img.grey-placeholder {
background-color: grey;
}
</style>
<script async src="https://cdn.ampproject.org/v0.js"></script>
</head>
[/sourcecode]
**Important** : Assurez-vous de n'avoir qu'une seule balise `<style amp-custom>` sur votre page, car il n'est pas autorisé d'en utiliser davantage dans les pages AMP.
Définissez des styles de composants avec des sélecteurs de classe ou d'élément en utilisant des propriétés CSS courantes. Par exemple :
[sourcecode:html]
<body>
<p>Hello, Kitty.</p>
<amp-img
class="grey-placeholder"
src="https://placekitten.com/g/500/300"
srcset="/img/cat.jpg 640w,
/img/kitten.jpg 320w"
width="500"
height="300"
layout="responsive">
</amp-img>
</body>
[/sourcecode]
**Important** : Assurez-vous que vos styles sont compatibles avec les pages AMP ; certains ne le sont pas pour des raisons de performance (voir aussi [CSS compatibles](/docs/guides/responsive/style_pages.html)).
## Éléments de taille et d'emplacement
Les pages AMP dissocient la mise en page du document du chargement des ressources. Ainsi, la mise en page de la page peut être chargée sans avoir à attendre le téléchargement des ressources.
Indiquez la taille et l'emplacement de tous les éléments AMP visibles en fournissant un attribut `width` et un attribut `height`.
Ces attributs définissent le format de l'élément, qui peut être mis à l'échelle du conteneur.
Définissez la mise en page comme responsive.
Cela ajuste la taille de l'élément à la largeur de son élément conteneur, et redimensionne automatiquement sa hauteur au format donné par les attributs de largeur et de hauteur.
Renseignez-vous sur les [mises en page compatibles avec les pages AMP](/docs/guides/responsive/control_layout.html).
## Valider vos styles et votre mise en page
Utilisez le validateur AMP pour tester les valeurs du CSS et de la mise en page de votre page.
Le validateur confirme que le CSS de votre page n'excède pas la limite de 50 000 octets, vérifie qu'il ne contient pas de styles interdits et s'assure de la compatibilité de la mise en page de votre page ainsi que de son bon formatage.
Consultez aussi la liste complète des [erreurs de style et de mise en page](/docs/reference/validation_errors.html#style-and-layout-errors).
Exemple d'erreur dans la console pour une page avec un CSS qui dépasse la limite de 50 000 octets :
<amp-img src="/static/img/docs/too_much_css.png" width="1404" height="334" layout="responsive"></amp-img>
Apprenez-en davantage sur la façon de [valider vos pages AMP](/docs/guides/validate.html), y compris comment détecter les erreurs de style et les corriger.
```
--------------------------------------------------------------------------------
/content/docs/guides/author_develop/[email protected]:
--------------------------------------------------------------------------------
```markdown
---
$title: Creare pagine AMP reattive
toc: true
---
È facilissimo creare elementi reattivi in AMP. È sufficiente inserire `layout=responsive`.
[TOC]
## Creare immagini reattive
Tutte le risorse caricate esternamente, incluse le immagini, devono avere posizione e dimensioni specifiche in modo che, quando vengono caricate, la pagina non salti e non si adatti dinamicamente.
Per creare immagini reattive, specifica la larghezza e l'altezza, imposta il layout reattivo e utilizza [`srcset`](/docs/guides/responsive/style_pages.html) per indicare quale asset di immagine utilizzare in base alle dimensioni dello schermo:
[sourcecode:html]
<amp-img
src="/img/narrow.jpg"
srcset="/img/wide.jpg 640w,
/img/narrow.jpg 320w"
width="1698"
height="2911"
layout="responsive"
alt="an image">
</amp-img>
[/sourcecode]
Questo elemento `amp-img` si adatta automaticamente alla larghezza del relativo elemento contenitore, mentre la sua altezza viene impostata automaticamente in base alle proporzioni stabilite secondo la larghezza e l'altezza indicate:
<amp-img src="/static/img/docs/responsive_amp_img.png" width="500" height="857" layout="responsive"></amp-img>
Visita anche la pagina [amp-img del sito AMP by Example](https://ampbyexample.com/components/amp-img/).
## Aggiungere stili a una pagina
Aggiungi tutti gli stili all'interno del tag `<style amp-custom>` nella sezione head del documento.
Ad esempio:
[sourcecode:html]
<!doctype html>
<head>
<meta charset="utf-8">
<link rel="canonical" href="hello-world.html" >
<meta name="viewport" content="width=device-width,minimum-scale=1,initial-scale=1">
<style amp-boilerplate>body{-webkit-animation:-amp-start 8s steps(1,end) 0s 1 normal both;-moz-animation:-amp-start 8s steps(1,end) 0s 1 normal both;-ms-animation:-amp-start 8s steps(1,end) 0s 1 normal both;animation:-amp-start 8s steps(1,end) 0s 1 normal both}@-webkit-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@-moz-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@-ms-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@-o-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}</style><noscript><style amp-boilerplate>body{-webkit-animation:none;-moz-animation:none;-ms-animation:none;animation:none}</style></noscript>
<style amp-custom>
/* any custom style goes here. */
body {
background-color: white;
}
amp-img {
border: 5px solid black;
}
amp-img.grey-placeholder {
background-color: grey;
}
</style>
<script async src="https://cdn.ampproject.org/v0.js"></script>
</head>
[/sourcecode]
**Importante.** Assicurati che sia presente un solo tag `<style amp-custom>` nella pagina, perché nel formato AMP non sono consentiti più tag di questo tipo.
Definisci gli stili dei componenti con i selettori di classe o di elemento utilizzando le proprietà CSS comuni. Ad esempio:
[sourcecode:html]
<body>
<p>Hello, Kitty.</p>
<amp-img
class="grey-placeholder"
src="https://placekitten.com/g/500/300"
srcset="/img/cat.jpg 640w,
/img/kitten.jpg 320w"
width="500"
height="300"
layout="responsive">
</amp-img>
</body>
[/sourcecode]
**Importante.** Verifica che gli stili siano supportati nel formato AMP perché alcuni non sono supportati per motivi di rendimento (leggi anche la pagina [Stili CSS supportati](/docs/guides/responsive/style_pages.html)).
## Specificare le dimensioni e la posizione degli elementi
AMP separa il layout del documento dal caricamento delle risorse in modo da poter caricare il layout della pagina senza dover aspettare che vengano scaricate le risorse.
Specifica le dimensioni e la posizione di tutti gli elementi AMP visibili utilizzando gli attributi `width` e `height`.
Questi attributi connotano le proporzioni dell'elemento, che potrà ridimensionarsi in base al contenitore.
Imposta il layout reattivo.
In questo modo l'elemento si adatta alla larghezza del relativo elemento contenitore, mentre la sua altezza viene ridimensionata automaticamente in base alle proporzioni stabilite dagli attributi di larghezza e altezza.
Leggi ulteriori informazioni sui [layout supportati in AMP](/docs/guides/responsive/control_layout.html).
## Convalidare stili e layout
Utilizza lo strumento di convalida AMP per testare i valori CSS e di layout della tua pagina.
Lo strumento di convalida verifica che gli elementi CSS della pagina non superino il limite di 50.000 byte, controlla se ci sono stili non consentiti e si assicura che il layout della pagina sia supportato e formattato correttamente.
Consulta anche questo elenco completo di [errori di stile e layout](/docs/reference/validation_errors.html#style-and-layout-errors).
Esempio di errore nella console relativo a una pagina i cui elementi CSS superano il limite di 50.000 byte:
<amp-img src="/static/img/docs/too_much_css.png" width="1404" height="334" layout="responsive"></amp-img>
Leggi ulteriori informazioni su come [convalidare le tue pagine AMP](/docs/guides/validate.html), incluse informazioni su come trovare gli errori di stile e risolverli.
```
--------------------------------------------------------------------------------
/content/includes/events.yaml:
--------------------------------------------------------------------------------
```yaml
hero:
title@: Don't miss AMP Events
hero_icon: /static/img/latest/events/event_hero.svg
upcoming:
label@: Upcoming Events
empty_icon: /static/img/latest/events/event_empty.svg
empty_title@: Stay Tuned!
empty_text@: There are no upcomming events at this time. We host events throughout the year including our annual AMP Conference. Follow us on <a href="" target="_blank">Facebook</a> or <a href="https://twitter.com/amphtml" target="_blank">Twitter</a> for the latest news and event listings.
past:
label@: Past Events
cta@: More Past Events
upcoming_events:
- type: Event
title: Mobile + Web Devcon
href: https://followup.cc/l/10384552/061a51652dd99cea3c8b861d6f50c6c0/http%3A%2F%2Fmobilewebdevconference.com%2F
excerpt: "AMP + Progressive Web Apps: Start fast, stay engaged - Chen Shay"
date: March 3, 2017
event_time: 20170303/20170304
event_time_text: Mar. 3
location: San Francisco
participant: Developers
- type: Event
title: Online Marketing Rockstars
href: https://followup.cc/l/10384552/228814a55de50a6100b8c2c174df9eb6/http%3A%2F%2Fwww.onlinemarketingrockstars.de%2Ffestival%2Fen%2Fconference%2F
excerpt: A Faster Mobile Web - Malte Ubl
date: March 2, 2017
event_time: 20170302/20170304
event_time_text: Mar. 2 to Mar. 3
location: Hamburg
participant: Developers
- type: Event
title: AMP Conf
href: https://www.ampproject.org/amp-conf-2017
excerpt: 14 Talks. 5 Panels. Live-streamed.
date: March 7, 2017
event_time: 20170307/20170309
event_time_text: Mar. 7 to Mar. 8
location: New York City
participant: Developers
- type: Event
title: Mobile Innovation Summit
href: https://followup.cc/l/10384552/38e93950f02bcb8a3fcea3829d5e4ab6/https%3A%2F%2Ftheinnovationenterprise.com%2Fsummits%2Fmobile-innovation-summit-new-york-2017
excerpt: "The Accelerated Mobile Pages (AMP) Project: What lies ahead? - Adam Greenberg"
date: March 21, 2017
event_time: 20170321/20170323
event_time_text: Mar. 21 to Mar. 22
location: New York City
participant: Developers
# past_events:
# - type: Event
# title: Teads1 brings AMP’d mobile video inventory to premium publishers
# href: https://amphtml.wordpress.com/2016/12/02/teads-brings-ampd-mobile-video-inventory-to-premium-publishers/amp/
# excerpt: We’ve just published updates to the AMP Roadmap. You can find it on the AMP Project website, and read a summary across...
# date: October 25, 2016
# event_time: 20160604T050000Z/20160604T060000Z
# event_time_text: Jun.4 at 8:00PM
# location: San Francisco
# participant: Developers
# - type: Event
# title: Teads2 brings AMP’d mobile video inventory to premium publishers
# href: https://amphtml.wordpress.com/2016/12/02/teads-brings-ampd-mobile-video-inventory-to-premium-publishers/amp/
# excerpt: We’ve just published updates to the AMP Roadmap. You can find it on the AMP Project website, and read a summary across...
# date: October 25, 2016
# event_time: 20160604T050000Z/20160604T060000Z
# event_time_text: Jun.4 at 8:00PM
# location: San Francisco
# participant: Developers
# - type: Event
# title: Teads3 brings AMP’d mobile video inventory to premium publishers
# href: https://amphtml.wordpress.com/2016/12/02/teads-brings-ampd-mobile-video-inventory-to-premium-publishers/amp/
# excerpt: We’ve just published updates to the AMP Roadmap. You can find it on the AMP Project website, and read a summary across...
# date: October 25, 2016
# event_time: 20160604T050000Z/20160604T060000Z
# event_time_text: Jun.4 at 8:00PM
# location: San Francisco
# participant: Developers
# - type: Event
# title: Teads4 brings AMP’d mobile video inventory to premium publishers
# href: https://amphtml.wordpress.com/2016/12/02/teads-brings-ampd-mobile-video-inventory-to-premium-publishers/amp/
# excerpt: We’ve just published updates to the AMP Roadmap. You can find it on the AMP Project website, and read a summary across...
# date: October 25, 2016
# event_time: 20160604T050000Z/20160604T060000Z
# event_time_text: Jun.4 at 8:00PM
# location: San Francisco
# participant: Developers
# - type: Event
# title: Teads5 brings AMP’d mobile video inventory to premium publishers
# href: https://amphtml.wordpress.com/2016/12/02/teads-brings-ampd-mobile-video-inventory-to-premium-publishers/amp/
# excerpt: We’ve just published updates to the AMP Roadmap. You can find it on the AMP Project website, and read a summary across...
# date: October 25, 2016
# event_time: 20160604T050000Z/20160604T060000Z
# event_time_text: Jun.4 at 8:00PM
# location: San Francisco
# participant: Developers
# - type: Event
# title: Teads6 brings AMP’d mobile video inventory to premium publishers
# href: https://amphtml.wordpress.com/2016/12/02/teads-brings-ampd-mobile-video-inventory-to-premium-publishers/amp/
# excerpt: We’ve just published updates to the AMP Roadmap. You can find it on the AMP Project website, and read a summary across...
# date: October 25, 2016
# event_time: 20160604T050000Z/20160604T060000Z
# event_time_text: Jun.4 at 8:00PM
# location: San Francisco
# participant: Developers
```
--------------------------------------------------------------------------------
/content/learn/case-studies/teads.md:
--------------------------------------------------------------------------------
```markdown
---
$order: 6
$title: Teads
$date: Dec 2, 2016
$category: Advertisers
$parent: /content/learn/case-studies.html
class: case-study post-detail
components:
- social-share
- vimeo
headline: Teads brings AMP'd mobile video inventory to nearly 100 publishers
thumb: "case-studies/teads_thumb.jpg"
featured: "case-studies/teads_media_framed.png"
results:
- stat: 15%
description: Increase in average completion rates
- stat: 200%
description: Increase in average clickthrough rate
- stat: 18%
description: Increase in available inventory
logo:
src: "case-studies/teads_logo2.png"
width: 64
height: 40
download: "case-studies/teads.pdf"
---
#### Historically, demand for digital video has [far outstripped](https://www.emarketer.com/Article/Mobile-Video-Advertisers-Demand-More-Inventory/1013575) online publishers’ limited supply of premium in-stream video inventory. So in 2011, French startup Teads designed [a new type of video](http://teads.tv/inread-outstream#livedemo) ad that appears natively inside editorial articles, without requiring existing video content.
> “We invented outstream video formats, which turn premium editorial content into new video ad inventory that can be monetized at scale.”
>
> ERIC SHIH, global senior vice president of business development
<div class="img-right teads img-mobile">
<amp-img width="840" height="1400" layout="responsive"
srcset="/static/img/case-studies/teads_phone.png 881w,
/static/img/case-studies/teads_phone@1_5x.png 581w,
/static/img/case-studies/[email protected] 441w"
src="/static/img/case-studies/teads_phone.png">
</amp-img>
</div>
#### Achieving a better user experience, together
<div class="img-right teads img-desktop">
<amp-img width="840" height="1400" layout="responsive"
srcset="/static/img/case-studies/teads_phone.png 881w,
/static/img/case-studies/teads_phone@1_5x.png 581w,
/static/img/case-studies/[email protected] 441w"
src="/static/img/case-studies/teads_phone.png">
</amp-img>
</div>
Four years later, as a global company reaching 1.2 billion unique users across hundreds of leading websites, Teads signed on as one of the first advertising partners to join the AMP Project when it launched as an open source initiative to build a better, faster mobile web for everybody.
> “Our products are very much aligned with the AMP Project’s mission to provide the best user experience across platforms. We believe that ads should be fast-loading, non-intrusive, skippable, and complement the surrounding content. They’re also optimized for mobile first, since most media consumption – including 70% of our publisher traffic – is now on mobile.”
>
> ERIC SHIH, global senior vice president of business development
The Teads team worked closely with the AMP Project’s leads, sharing their unique expertise in outstream video. They also adjusted their ad format, which was originally designed to expand into view as the user scrolled down the page and collapse away after the video ended. Because this functionality caused paragraphs to shift on the screen, it diverged from the AMP Project’s design principles. The AMP’d version of the ad would always be open, keeping the page layout consistent and creating a more seamless user experience.
Results have been so positive that Teads rolled out the change to non-AMP’d pages as well. “We have since modified the behavior of our formats outside of the AMP HTML environment – on desktop, mobile web, and in-app – to be consistent with AMP HTML,” Mr. Shih says.
#### Clearing clutter, encouraging engagement
In the months since Teads built support for its native video ads to be served on AMP’d pages, nearly 100 of its premium publishers have also joined the AMP Project, including Trinity Mirror, The Telegraph, L’Express, Ouest-France, Público, Rodale, Mashable and The McClatchy Company.
> “AMP HTML delivers our most optimal mobile browsing experience. Being able to marry this with native video advertising allows us to not only make revenue from the fastest-growing area of digital but to do so whilst respecting our users.”
>
> Amir Malik, programmatic director for Trinity Mirror
<div class="post-video">
<amp-vimeo
data-videoid="163543060"
layout="responsive"
width="16" height="9"></amp-vimeo>
</div>
Across Teads’ publisher portfolio, video ads perform significantly better on AMP’d pages than on the traditional mobile web, Mr. Shih notes. “The completion rate is 15% higher, and clickthrough rates have increased by 200%,” he explains. “When there are fewer, less intrusive ads and a cleaner environment, it lends itself to more engagement.”
Shih also points out that Teads’ video ads appear 18% more frequently on AMP’d pages than on non-optimized mobile pages, creating even more inventory for publishers. He attributes the uptick to faster load times and minimal ad clutter.
One partner seeing success is French publisher L’Express, with AMP’d pages representing 15% of L’Express’ mobile inventory. “The AMP Project allows us to monetize our premium content with elegant native video advertising solutions such as Teads that respect our readers,” says Sophie Gohier, head of digital for L’Express. “Therefore, we believe that the revenue will grow significantly in the next quarters."
```
--------------------------------------------------------------------------------
/content/docs/get_started/live_blog.md:
--------------------------------------------------------------------------------
```markdown
---
$title: Create a Live Blog
$order: 3
---
Live blogs are web pages that are updated frequently throughout an on-going event, such as the Super Bowl.
A live blog can be implemented in AMP via the `amp-live-list` component using the LiveBlogPosting markup. To see a sample implementation that you can use as a starting point, visit the [live blog sample](https://www.ampbyexample.com/samples_templates/live_blog/) at [ampbyexample.com](https://www.ampbyexample.com).
This tutorial offers a short overview of the `amp-live-list` component and focuses on some implementation details like pagination and deep linking, all using the live blog sample as an example.
## Amp-live-list overview
The `amp-live-list` component regularly polls the host document for updated content and updates the end user's browser as new items become available. This means that every time a new blog post needs to be added, the host document should be updated by the CMS to include the update in both the body and the metadata section.
This is how an initial blog could look like:
[sourcecode:html]
<amp-live-list id="my-live-list" data-poll-interval="15000" data-max-items-per-page="5">
<button update on="tap:my-live-list.update">You have updates!</button>
<div items></div>
</amp-live-list>
[/sourcecode]
The `data-poll-interval` attribute allows you to specify how often polls should occur; if the host document is updated, the update should be available to the user after the next time interval.
Every time a new item is added to the host document, the `<button update on="tap:my-live-list.update">` element shows a button which, when clicked, will trigger the page to show the latest posts.
Live blogs could grow making the page too long, the `data-max-items-per-page` attribute allows you to specify how many items can be added to the live blog page. If the number of items after an update exceed `data-max-items-per-page`, the oldest updates exceeding this number will be removed. For instance, if the page currently has 9 items, `data-max-items-per-page` is set to 10, and 3 new items arrive in the latest update, the two oldest items will be removed from the page with the latest update.
`amp-live-list` requires all the posts to be children of the tag `<div items></div>`. By referring to each post as an item, every item should have an unique `id` and a `data-sort-time`.
## Live Blog implementation details
Now that you’re familiar with the `amp-live-list` component, let’s figure out how to implement a more complex live blog. Read on to learn more about how to implement pagination, and how deep linking is going to work.
##Pagination
Long blogs could use pagination to improve performance by limiting the number of blog items to display on a page. To implement pagination, add the `<div pagination></div>` element within the `amp-live-list` component, then insert any markup you need for pagination (for example, a page number or a link to the next and previous page).
When using pagination, the simple code we used earlier becomes:
[sourcecode:html]
<amp-live-list id="my-live-list" data-poll-interval="15000" data-max-items-per-page="5">
<button update on="tap:my-live-list.update">You have updates!</button>
<div items></div>
<div pagination>
<nav>
<ul>
<li>1</li>
<li>Next</li>
</ul>
</nav>
</div>
</amp-live-list>
[/sourcecode]
It’s your responsibility to populate the navigation items correctly by updating the hosted page. For example, in the [live blog sample](https://www.ampbyexample.com/samples_templates/live_blog/) we render the page via a server-side template and we use a query parameter to specify what the first blog item of the page should be. We limit the size of the page to 5 items, so if the server has generated more than 5 items, when a user lands on the main page it should show the Next element in the navigation area.
<amp-img src="/static/img/liveblog-pagination.png" alt="Live blog pagination" height="526" width="300"></amp-img>
After the size of blog posts has exceeded the maximum number of items specified by `data-max-items-per-page`, the older blog items are displayed in the “Next” pages, for example on page 2. Given that the `amp-live-list` polls the server at intervals to see if there is any change in the items, there's no need to poll the server if the user isn't on the first page.
You can add the disabled attribute to the hosted page to prevent the polling mechanism. In the live blog sample, we perform this behavior in a server-side template; when the requested page is not the first one, we add the disabled attribute to the amp-live-list component.
## Deeplinking
When you publish a blog post, it’s important to be able to deep link to the post to enable features like sharing. With `amp-live-list`, deep linking is possible by simply using the id of the blog item. For example, [https://ampbyexample.com/samples_templates/live_blog/preview/#post3](https://ampbyexample.com/samples_templates/live_blog/preview/#post3) allows you to navigate directly to the blog post with id “post3”.
In the [live blog sample](https://www.ampbyexample.com/samples_templates/live_blog/) we are using a technique based on a cookie to generate fresh content (see More on the Live Blog sample section for more details on that), so if it’s the first time you are landing on the page, the post with id “post3” might not be available, in that case we redirect to the first post.
```
--------------------------------------------------------------------------------
/assets/img/about/who-use-amp/publishers/nyt_logo.svg:
--------------------------------------------------------------------------------
```
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 153 20.14"><defs><style>.cls-1{fill:#1a1a1a;}</style></defs><title>nyt_logo</title><g id="Layer_2" data-name="Layer 2"><g id="Art"><path class="cls-1" d="M11.48,2.06C11.48.42,9.94-.05,8.65,0V.26c.77,0,1.37.28,1.37.79,0,.36-.26.81-1,.81a11.63,11.63,0,0,1-2.75-.67A9.85,9.85,0,0,0,3.37.5,2.75,2.75,0,0,0,.51,3.19,1.89,1.89,0,0,0,1.8,5l.12-.2A.87.87,0,0,1,1.45,4a1,1,0,0,1,1.15-.93,13.35,13.35,0,0,1,3,.71,24.73,24.73,0,0,0,3,.69V7l-1.27,1v.1L8.69,9.29v3.54a4.13,4.13,0,0,1-2.06.48A4.15,4.15,0,0,1,3.37,12l3.41-1.64V4.66L2.59,6.52a5,5,0,0,1,2.2-2.38l-.06-.2A6.28,6.28,0,0,0,0,9.71a5.84,5.84,0,0,0,5.84,5.86,5.33,5.33,0,0,0,5.46-5.42l-.2,0A5.75,5.75,0,0,1,9,12.73V9.29l1.35-1.07,0-.12L9,7V4.46a2.4,2.4,0,0,0,2.51-2.4ZM4.26,11.27l-1,.49a5,5,0,0,1-1-3.17,5.78,5.78,0,0,1,.24-1.78L4.28,6l0,5.23Zm8.81,1.84L12,13.94l.14.16.53-.38,1.86,1.7L17,13.76l-.12-.18-.65.42-.81-.81V7.49l.67-.5L17.5,8.14v5c0,3.15-.69,3.66-2.12,4.18v.22c2.36.1,4.47-.69,4.47-4.73V7.43l.75-.59-.14-.18-.65.51-2-1.76L15.4,7.19V.34h-.18l-2.95,2V2.5a1.19,1.19,0,0,1,.79,1.29v9.32Zm15.2-.89-2,1.58-2.12-1.66v-1l3.94-2.63V8.4l-2-3-4.3,2.3v5.46l-.85.65.14.18.77-.61,2.81,2,3.76-3-.16-.22Zm-4.16-1.37V6.78l.14-.1,1.82,2.87-2,1.31ZM44.19,1.31A2.34,2.34,0,0,0,44,.54h-.2c-.26.69-.57,1.07-1.39,1.07A2.22,2.22,0,0,1,40.88.86s-2.38,2.75-2.38,2.75l.2.18L39.38,3a2.8,2.8,0,0,0,2,.79v6.93L36.55,2.3A2.64,2.64,0,0,0,34.37.72a2.53,2.53,0,0,0-2.36,3h.24c.06-.51.32-1.07.89-1.07a1.45,1.45,0,0,1,1.09.83V6.22c-1.5,0-2.49.69-2.49,1.92A1.85,1.85,0,0,0,33.1,10l0-.18a.76.76,0,0,1-.28-.57c0-.46.34-.75,1-.75a2.68,2.68,0,0,1,.44,0V12.1c-1.76,0-3.13,1-3.13,2.65s1.37,2.34,2.79,2.26l0-.2c-.89-.1-1.37-.51-1.37-1.09a1.06,1.06,0,0,1,1.17-1.09,2.34,2.34,0,0,1,1.68.89l2.4-2.67-.2-.18-.61.69a4.11,4.11,0,0,0-2.47-1.27V3.77l6.71,11.7h.48V3.81a2.56,2.56,0,0,0,2.49-2.49Zm6,10.91-2,1.58L46,12.14v-1L50,8.52V8.4l-2-3-4.3,2.3v5.46l-.85.65L43,14l.77-.61,2.81,2,3.76-3-.16-.22ZM46,10.85V6.78l.14-.1L48,9.55l-2,1.31ZM63.81,6.3l-.61.46L61.61,5.41,59.77,7.07l.75.71v6.28l-2-1.29V7.67l.65-.46-1.94-1.8-1.8,1.66.75.71v6l-.26.16-1.76-1.25v-5c0-1.15-.55-1.48-1.29-1.94S52,5,52,4.44s.48-.75.71-.89a.75.75,0,0,1,0-.2,2.59,2.59,0,0,0-2.44,2.28A1.89,1.89,0,0,0,51,7.21a1.92,1.92,0,0,1,.79,1.46v4.81l-.89.69.14.18.81-.63,2.2,1.72L56.15,14l2.3,1.41,4.42-2.57V7.29l1.09-.79-.14-.2ZM79.23,1.73l-.83.75L76.54.86l-2.71,2V1h-.28l.06,13.48c-.28,0-1-.2-1.6-.3L71.95,2.9a2,2,0,0,0-2.08-2,2.42,2.42,0,0,0-2.51,2.34h.24c.08-.49.34-.93.83-.93s1,.32,1,1.43V7c-1.52.06-2.4.91-2.4,2a1.53,1.53,0,0,0,1.37,1.7l0-.2a.6.6,0,0,1-.44-.57c0-.47.46-.67,1.09-.67h.3v5.15a2.38,2.38,0,0,0-1.76,2.32,2.5,2.5,0,0,0,2.73,2.44,13.91,13.91,0,0,0,3.19-.44,15.85,15.85,0,0,1,2.38-.38c.63,0,.91.3.91.75a.79.79,0,0,1-.59.89l0,.2a2.3,2.3,0,0,0,2.16-2.3c0-1.27-1.21-2-2.55-2a17.29,17.29,0,0,0-3.09.46,16,16,0,0,1-2.67.38c-.57,0-1.29-.28-1.29-1s.57-1.25,2-1.25a11.82,11.82,0,0,1,2.59.34,13.88,13.88,0,0,0,2.77.5c1.21,0,2.3-.44,2.3-2.2V2.74l1-.83-.18-.18ZM75.83,6.85a1.39,1.39,0,0,1-1,.48,1.52,1.52,0,0,1-1-.48V3.15l.85-.57,1.15,1V6.85Zm0,2.47a1.44,1.44,0,0,0-1-.42,1.65,1.65,0,0,0-1,.42V7.15a1.66,1.66,0,0,0,1,.44,1.45,1.45,0,0,0,1-.44V9.33Zm0,3.88a1.28,1.28,0,0,1-1.33,1.33c-.14,0-.53,0-.67,0V9.63a1.56,1.56,0,0,1,1-.46,1.5,1.5,0,0,1,1,.46v3.58Zm11.36-5.9L84.5,5.39l-4,2.32v5.42l-.83.67.12.18.65-.53,2.67,2,4.12-2.51V7.31Zm-4.42,5.25V6.62l2.1,1.5v5.94l-2.1-1.5ZM95.13,5.61s-.16,0-.16,0a1.19,1.19,0,0,1-.73.34,1.31,1.31,0,0,1-.93-.45h-.16L91.74,7,90.3,5.49l-2.46,1.7.12.2L88.62,7l.85.91v5.25l-1.11.83.14.16.53-.38,2,1.7,2.59-1.72-.12-.18-.73.44-1-.87V7.25a2.15,2.15,0,0,0,1.49.85c1.11,0,1.72-1.23,1.84-2.49Zm10,8-2.83,1.86-3.84-5.8,2.71-4.22.18,0a2.18,2.18,0,0,0,1.39.65,1.46,1.46,0,0,0,1.21-.65s.16,0,.16,0A2.54,2.54,0,0,1,102,8a2.89,2.89,0,0,1-1.74-.67l-.26.38,4.16,6.16.83-.51.12.2ZM96,13.11l-1.11.83.14.16.53-.38,1.86,1.7,2.49-1.66-.14-.18-.63.42-.81-.81V.34h-.18l-3,2v.18A1.17,1.17,0,0,1,96,3.79v9.32Zm22.95-11c0-1.64-1.54-2.12-2.83-2.06V.26c.77,0,1.37.28,1.37.79,0,.36-.26.81-1,.81a11.63,11.63,0,0,1-2.75-.67A9.85,9.85,0,0,0,110.81.5,2.75,2.75,0,0,0,108,3.19,1.89,1.89,0,0,0,109.25,5l.12-.2a.87.87,0,0,1-.48-.81A1,1,0,0,1,110,3.05a13.35,13.35,0,0,1,3,.71,24.73,24.73,0,0,0,3,.69V7l-1.27,1v.1l1.27,1.11v3.54a4.69,4.69,0,0,1-5.33-.85l3.41-1.64V4.66L110,6.52a5,5,0,0,1,2.2-2.38l-.06-.2a6.28,6.28,0,0,0-4.73,5.76,5.84,5.84,0,0,0,5.84,5.86,5.33,5.33,0,0,0,5.46-5.42l-.2,0a5.75,5.75,0,0,1-2.14,2.61V9.29l1.35-1.07,0-.12L116.41,7V4.46a2.4,2.4,0,0,0,2.51-2.4Zm-7.23,9.21-1,.49a5,5,0,0,1-1-3.17A5.78,5.78,0,0,1,110,6.82L111.72,6l0,5.23Zm10.08-10-.12,0L120,2.68V2.8l1.41,1.58h.14L123.2,3l0-.1-1.41-1.6Zm2.53,12.3-.63.42-.81-.81V7.45l.79-.59-.16-.2-.61.47-1.45-1.72-2.38,1.66.14.22.59-.4.73.91v5.39l-1.07.81.12.16.55-.4L122,15.43l2.49-1.66-.14-.18Zm13.86-.1-.59.4-.89-.81V7.43l.85-.63-.14-.18-.73.55-1.9-1.76-2.46,1.74-1.88-1.74L128,7.13l-1.48-1.72-2.38,1.66.12.22.59-.4.81.89v5.39l-.65.65,1.9,1.6,1.84-1.66-.75-.71V7.43l.71-.48L130,8.14v5l-.63.65,1.92,1.6,1.8-1.66-.75-.71V7.39L133,7l1.37,1.17v4.95l-.55.57,1.94,1.76,2.55-1.74-.12-.2Zm7.23-1.27-2,1.58-2.12-1.66v-1l3.94-2.63V8.4l-2-3-4.3,2.3v5.64l2.87,2.08,3.76-3-.16-.22Zm-4.16-1.37V6.78l.14-.1,1.82,2.87-2,1.31ZM153,10.08l-1.6-1.21a4.22,4.22,0,0,0,1.48-3c0-.12,0-.34,0-.53h-.2a1.12,1.12,0,0,1-1.13.81A2,2,0,0,1,150,5.33l-3.74,2v3l1.39,1.09c-1.41,1.25-1.66,2.12-1.66,2.75a1.68,1.68,0,0,0,1.09,1.7l.1-.18a.7.7,0,0,1-.34-.63c0-.28.34-.67,1-.67a2.07,2.07,0,0,1,1.56.85s3.6-2.16,3.6-2.16V10.08Zm-.89-2.49a10.22,10.22,0,0,1-2.55,2.52l-.91-.71v-3a2.46,2.46,0,0,0,3.46,1.15Zm-1.47,6.61a2.71,2.71,0,0,0-2.38-1.6,2.93,2.93,0,0,0-1.56.4,9.28,9.28,0,0,1,2.91-2.67l1,.79V14.2Z"/></g></g></svg>
```
--------------------------------------------------------------------------------
/content/latest/blog/amp-roadmap-update-for-mid-q1-2017.md:
--------------------------------------------------------------------------------
```markdown
---
class: post-blog post-detail
type: Blog
$title: AMP Roadmap Update for Mid-Q1 2017
id: amp-roadmap-update-for-mid-q1-2017
author: Eric Lindley
role: Product Manager, AMP Project
origin: "https://amphtml.wordpress.com/2017/02/18/amp-roadmap-update-for-mid-q1-2017/amp/"
excerpt: "We’ve updated the AMP Roadmap with the details on progress during the first quarter of 2017, and you can read below for some of the highlights. Format Interactivity is a major focus for us this quarter as we build out the AMP format’s capabilities. amp-bind is a binding protocol that introduces lower-level methods for building […]"
avatar: http://0.gravatar.com/avatar/0342fb9db5636638e886dff44d5ec94c?s=96&d=identicon&r=G
date_data: 2017-02-17T16:09:17-08:00
$date: February 17, 2017
$parent: /content/latest/list-blog.html
components:
- social-share
---
<div class="amp-wp-article-content">
<p><strong>We’ve updated the </strong><a href="https://www.ampproject.org/roadmap/"><strong>AMP Roadmap</strong></a><strong> with the details on progress during the first quarter of 2017, and you can read below for some of the highlights.</strong></p>
<h2><strong>Format</strong></h2>
<p><strong>Interactivity is a major focus for us this quarter as we build out the AMP format’s capabilities. </strong><a href="https://www.ampproject.org/docs/reference/components/amp-bind">amp-bind</a> <a href="https://github.com/ampproject/amphtml/blob/f33b581021772c5ef1513620398db6d6b3446d91/extensions/amp-bind/amp-bind.md"><strong>i</strong></a><strong>s a binding protocol that introduces lower-level methods for building interactive experiences. We’ve also launched two new features that enhance interactivity in their own right. </strong><a href="https://www.ampproject.org/pl/docs/reference/components/amp-selector"><strong>amp-selector</strong></a><strong> makes it easy to use image thumbnails as form inputs, and </strong><a href="https://github.com/ampproject/amphtml/blob/master/extensions/amp-carousel/amp-carousel.md#advancing-amp-carouseltypeslides-to-a-specific-slide"><strong>the goToSlide method</strong></a><strong> supports new interactivity for amp-carousel, including </strong><a href="https://ampbyexample.com/advanced/image_galleries_with_amp-carousel/#image-galleries-with-previews"><strong>galleries linked with image previews</strong></a><strong>.</strong></p>
<p><strong>Another large focus is </strong><a href="https://github.com/ampproject/amphtml/issues/2851"><strong>AMP Start</strong></a><strong>, a set of quick-start code snippets that developers can copy and paste to quickly create and customize valid AMPs.</strong></p>
<h2><strong>Ads</strong></h2>
<p><strong>We introduced usability features with ads served to AMP pages. This includes an improvement to the </strong><a href="https://amphtml.wordpress.com/2017/02/02/new-default-placeholders-for-ads-in-amp/"><strong>default ad loading experience</strong></a><strong> where AMP will, by default, clearly indicate the location of ads and add a subtle indicator when the ad is loading. Through this launch, we hope to eliminate the experience of seeing large blank spaces before a slow loading ad has loaded. We’ve also made some </strong><a href="https://github.com/ampproject/amphtml/issues/5432"><strong>UX improvements to sticky ads</strong></a><strong> that are gradually rolling out.</strong></p>
<p><strong>We’ve worked with Cloudflare and TripleLift to create and deliver AMP ads (ad creatives made in AMP format) that are </strong><a href="https://amphtml.wordpress.com/2017/01/30/ads-on-the-web-will-get-better-with-amp-heres-how/"><strong>safe, beautiful and performant ads</strong></a><strong>. This paves the path for any ad network wanting to serve their own AMP ads to the publisher directly.</strong></p>
<h2><strong>Analytics</strong></h2>
<p><strong>Soon you will be able to programmatically substitute values, including the Client ID, into </strong><a href="https://github.com/ampproject/amphtml/blob/master/spec/amp-var-substitutions.md#overview"><strong>links (anchor tags)</strong></a><strong> and </strong><a href="https://www.ampproject.org/docs/reference/components/amp-form#variable-substitutions"><strong>form inputs</strong></a><strong>. We expect this to make it possible to build add-to-shopping cart flows, and to make scenarios involving multi-page flows and analytics data collection work better.</strong></p>
<p><strong>We’ve been thinking about ways to improve and extend amp-analytics infrastructure. We’re designing a way for extensions to </strong><a href="https://github.com/ampproject/amphtml/issues/6417"><strong>take advantage of amp-analytics to report data to extension authors</strong></a><strong>. This will provide extension authors with greater visibility into how their extensions are performing so they can spot issues and optimize behavior. We’re also close to completing an improvement to amp-analytics’s </strong><a href="https://github.com/ampproject/amphtml/issues/5697"><strong>visibility features to use Intersection Observer</strong></a><strong>.</strong></p>
<p><strong>Finally, in order to help AMP page developers understand the kinds of errors or issues that their users are encountering, we’re planning to introduce an </strong><a href="https://github.com/ampproject/amphtml/issues/6415"><strong>analytics trigger that will send error events</strong></a><strong>. </strong></p>
<p><strong>* * *</strong></p>
<p><strong>Thanks to the AMP development community for your work and feedback. As always, please </strong><a href="https://groups.google.com/forum/#!forum/amphtml-discuss"><strong>let us know</strong></a><strong> if you have any issues or feature requests.</strong></p>
<p></p><br />
</div>
```
--------------------------------------------------------------------------------
/content/support/faqs/[email protected]:
--------------------------------------------------------------------------------
```markdown
---
$title@: Ringkasan Accelerated Mobile Pages
cta:
title@: Next FAQ
link_text@: Keterlibatan Platform dan Perusahaan Teknologi
link_url: /content/support/faqs/platform-involvement.md
faq:
- title@: Apa itu proyek Accelerated Mobile Pages?
answer@: |
Proyek Accelerated Mobile Pages (“AMP”) adalah inisiatif sumber terbuka yang merupakan hasil diskusi penerbit dan perusahaan teknologi tentang kebutuhan untuk meningkatkan seluruh ekosistem konten seluler untuk semua orang -- penerbit, platform pelanggan, pembuat, dan pengguna.
Saat ini, harapannya adalah konten tersebut harus dimuat dengan sangat cepat dan mudah dijelajahi. Kenyataannya, konten tersebut memerlukan beberapa detik untuk dimuat, atau, karena pengguna meninggalkan laman yang lambat untuk dimuat, konten tidak pernah dimuat penuh. Accelerated Mobile Pages adalah laman web yang dirancang untuk dimuat hampir secara instan -- sebuah langkah untuk membuat web seluler menjadi lebih baik.
- title@: Apa manfaat Accelerated Mobile Pages?
answer@: |
Kecepatan sangatlah penting dan dimuat secara instan adalah idealnya. Penelitian menunjukkan bahwa rasio pentalan yang lebih tinggi terkait dengan laman web yang dimuat lebih lambat. Menggunakan format AMP akan membuatnya jauh lebih menarik bagi pengguna untuk melihat dan terlibat dengan lebih banyak konten. Tetapi ini bukan hanya tentang kecepatan dan kinerja. Kami juga ingin mempromosikan distribusi yang disempurnakan sehingga penerbit dapat mengambil keuntungan dari potensi web terbuka agar konten mereka muncul di mana saja dengan cepat -- pada platform dan aplikasi -- yang dapat menghasilkan lebih banyak pendapatan lewat iklan dan langganan.
- title@: Bagaimana Accelerated Mobile Pages bekerja?
answer@: |
Accelerated Mobile Pages sama seperti laman HTML lainnya, tetapi dengan fungsi teknis diizinkan yang terbatas yang ditetapkan dan diatur oleh spek AMP sumber terbuka. Sama seperti semua laman web, Accelerated Mobile Pages akan akan dimuat di browser modern atau webview aplikasi apa pun.
File AMP memanfaatkan berbagai pendekatan teknis dan arsitektur yang memprioritaskan kecepatan untuk memberikan pengalaman yang lebih cepat bagi pengguna. Pengembang AMP dapat menggunakan pustaka komponen web yang kaya dan berkembang yang menawarkan kemampuan untuk menyematkan multimedia seperti video dan pos sosial, menampilkan iklan, atau mengumpulkan analisis. Tujuannya bukan untuk menyeragamkan tampilan dan nuansa konten, tetapi untuk membangun inti teknis yang lebih umum di antara laman yang mempercepat waktu muat.
Selain itu, file AMP dapat disimpan dalam cloud untuk mengurangi waktu muat konten bagi pengguna perangkat seluler. Dengan menggunakan format AMP, pembuat konten membuat konten dalam file AMP yang dapat disimpan dalam cache oleh pihak ketiga. Pada jenis framework ini, penerbit terus mengontrol konten mereka, tetapi platform dapat menyimpan dalam cache atau mencerminkan konten dengan mudah untuk kecepatan penayangan yang optimal bagi pengguna. Google memberikan cache yang dapat digunakan gratis oleh siapa pun, dan semua AMP akan disimpan dalam cache oleh [Cache AMP Google](https://developers.google.com/amp/cache/). Perusahaan lain juga dapat membuat cache AMP mereka sendiri.
Singkatnya, tujuannya adalah kombinasi fungsi teknis terbatas dengan sistem distribusi yang dibuat dengan penyimpanan dalam cache akan menghasilkan laman yang kinerjanya lebih baik, dan meningkatkan pengembangan audiens untuk penerbit.
- title@: Mengapa Proyek Accelerated Mobile Pages Project melakukan pendekatan sumber terbuka?
answer@: |
Perusahaan yang terlibat dalam proyek ingin membuat web seluler bekerja lebih baik untuk semua -- tidak hanya pada satu platform, satu perusahaan teknologi, atau sekumpulan penerbit. Membuat proyek sumber terbuka memungkinkan orang-orang untuk berkontribusi dan berbagi ide-ide dan kode mereka untuk mempercepat web seluler. Kami masih berada di awal perjalanan ini dan berharap perusahaan teknologi dan penerbit lainnya bergabung bersama kami.
- title@: Siapa yang dapat menggunakan Accelerated Mobile Pages?
answer@: |
Proyek ini terbuka untuk semua pemeran dalam ekosistem - penerbit, pelanggan platform, dan pembuat. Untuk mengetahui perusahaan dan situs apa saja yang menggunakan AMP, kunjungi [laman Siapa](/who).
- title@: Apa konsekuensi penggunaan Accelerated Mobile Pages?
answer@: |
Dengan menggunakan format AMP, pembuat konten membuat konten dalam file AMP yang dapat dirayapi, diindeks & ditampilkan (tunduk pada protokol pengecualian robot), dan disimpan dalam cache oleh pihak ketiga.
- title@: Jenis konten apa yang dapat berfungsi paling baik menggunakan Accelerated Mobile Pages?
answer@: |
Tujuan proyek ini adalah untuk semua konten yang diterbitkan, dari berita hingga video dan dari blog hingga fotografi dan GIF, agar berfungsi menggunakan Accelerated Mobile Pages.
- title@: Sebagai penerbit, apakah memerlukan lebih banyak usaha untuk membuat konten saya berfungsi pada Accelerated Mobile Pages?
answer@: |
Singkatnya, tidak banyak. Karena “HTML AMP” secara keseluruhan dibuat dari teknologi web yang sudah ada, proses pengembangannya mencerminkan bahwa penerbit sudah menggunakannya saat ini. Penerbit dapat membiasakan diri dengan spesifikasi HTML AMP di GitHub. Bagi mereka yang terbiasa dengan proses saat ini, kami tidak mengharapkan kurva pembelajaran yang signifikan.
- title@: Bagaimana cara penerbit mengubah konten menjadi HTML AMP?
answer@: |
Penerbit dan penyedia Sistem Manajemen Konten (CMS) dapat mengembangkan integrasi dengan CMS mereka untuk membuat konten AMP. Automattic sudah menerbitkan [plugin AMP WordPress](https://wordpress.org/plugins/amp/) dan kami berharap semua sistem manajemen konten akan menambah dukungan untuk laman HTML AMP.
---
```
--------------------------------------------------------------------------------
/content/latest/latest.html:
--------------------------------------------------------------------------------
```html
---
$title@: The Latest News
$titles:
breadcrumb@: The Latest
$path: /{base}/
$view: /views/base.html
$localization:
path: /{locale}/{base}/
class: latest
components:
- carousel
---
{% set latest = g.doc('/content/includes/latest.yaml', locale=doc.locale) %}
{% set blog_list = g.doc('/content/includes/list-blog.yaml', locale=doc.locale) %}
{% set events_list = g.doc('/content/includes/events.yaml', locale=doc.locale) %}
{% set tweets = g.doc('/content/includes/tweets.yaml', locale=doc.locale) %}
{% include "/views/partials/breadcrumb-nav.html" %}
<div class="container lg">
<div class="content">
<section class="hero">
<div class="img-wrap">
<div class="lines lines-back">
<amp-img
noloading
height=571
width=571
layout=responsive
src="{{latest.hero.lines_back_img}}">
</amp-img>
</div>
<div class="hero-image-background">
<amp-img
noloading
height=977
width=2106
layout=responsive
src="{{latest.hero.hero_img}}">
</amp-img>
</div>
<div class="lines lines-front">
<amp-img
noloading
height=571
width=571
layout=responsive
src="{{latest.hero.lines_front_img}}">
</amp-img>
</div>
<div class="text">
<div class="label">{{_(latest.hero.sub_title)}}</div>
<h1 class="title">{{_(latest.hero.title)}}</h1>
</div>
</div>
</section>
<div class="feeds">
<div class="text">
<div class="label">{{_(latest.hero.sub_title)}}</div>
<h1 class="title">{{_(latest.hero.title)}}</h1>
<!-- <ul class="inline-toc">
<li><a href="{{g.url('/content/pages/list-event.html', locale=doc.locale).path}}">{{_(latest.feed.category_event)}}</a></li>
<li><a href="{{g.url('/content/pages/roadmap.html', locale=doc.locale).path}}">{{_(latest.feed.category_roadmap)}}</a></li>
<li><a href="{{g.url('/content/pages/list-blog.html', locale=doc.locale).path}}">{{_(latest.feed.category_blog)}}</a></li>
</ul> -->
</div>
<section class="posts">
<h2 class="posts-label">{{_(latest.feed.title)}}</h2>
{% for post in events_list.upcoming_events %}
{% if loop.index <= 2 %}
{% with past = false, meta = true %}
{% include "/views/partials/post-item.html" %}
{% endwith %}
{% endif %}
{% endfor %}
{% for post in blog_list.blogs %}
{% if loop.index <= 3 %}
{% with past = false, meta = true %}
{% include "/views/partials/post-item.html" %}
{% endwith %}
{% endif %}
{% endfor %}
<a href="{{g.doc(latest.feed.more_posts_href, locale=doc.locale).url.path}}" class="feed-cta underlined cta">{{_(latest.feed.more_posts)}}</a>
</section>
<section class="twitter">
<h4 class="twitter-label">{{_(latest.twitter.title)}}</h4>
<div class="twitter-account">
<div class="twitter-icon">
<amp-img
noloading
height=35
width=45
src="{{latest.twitter.icon_twitter}}">
</amp-img>
</div>
<a class="main-account" href={{latest.twitter.account_href}}>@{{latest.twitter.account_id}}</a>
</div>
<div class="desktop-feed">
{% for tweet in tweets.tweets %}
<div class="post-item tweet">
<div class="post-meta">
<span class="origin-name">{{tweet.origin_name}}</span>
<a class="origin-id" href="{{tweet.origin_href}}">@{{tweet.origin_id}}</a>
{% if tweet.retweet_id %}
<span class="retweet">
<amp-img
noloading
height=10
width=16
src="{{latest.twitter.icon_retweet}}">
</amp-img>
by
<a class="retweet-id" href="{{tweet.retweet_href}}">@{{tweet.retweet_id}}</a>
</span>
{% endif %}
</div>
<p class="post-excerpt">{{tweet.text|safe}}</p>
<div class="post-meta time">{{tweet.date}}</div>
</div>
{% endfor %}
<a class="feed-cta underlined cta" href="{{latest.twitter.follow_href}}" target="_blank">{{_(latest.twitter.follow_cta)}}</a>
</div>
<div class="mobile-feed">
<amp-carousel class="latest-carousel"
height="350"
layout="flex-item"
type="slides">
{% for tweet in tweets.tweets %}
<div class="card-container">
<div class="post-item tweet card">
<div class="post-meta">
<span class="origin-name">{{tweet.origin_name}}</span>
<a class="origin-id" href="{{tweet.origin_href}}">@{{tweet.origin_id}}</a>
{% if tweet.retweet_id %}
<span class="retweet">
<amp-img
noloading
height=10
width=16
src="{{latest.twitter.icon_retweet}}">
</amp-img>
by
<a class="retweet-id" href="{{tweet.retweet_href}}">@{{tweet.retweet_id}}</a>
</span>
{% endif %}
</div>
<p class="post-excerpt">{{tweet.text|safe}}</p>
<div class="post-meta time">{{tweet.date}}</div>
</div>
</div>
{% endfor %}
</amp-carousel>
</div>
</section>
</div>
</div>
</div>
```
--------------------------------------------------------------------------------
/assets/img/about/who-use-amp/card_smb.svg:
--------------------------------------------------------------------------------
```
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="142.12" height="91.32" viewBox="0 0 142.12 91.32">
<defs>
<linearGradient id="linear-gradient" x1="37.32" y1="71.82" x2="113.57" y2="71.82" gradientUnits="userSpaceOnUse">
<stop offset="0" stop-color="#1c79c4"/>
<stop offset="0.51" stop-color="#0389ff"/>
<stop offset="1" stop-color="#0dd4ff"/>
</linearGradient>
<linearGradient id="linear-gradient-2" y1="59.13" x2="43.93" y2="59.13" gradientUnits="userSpaceOnUse">
<stop offset="0" stop-color="#1c79c4"/>
<stop offset="0.51" stop-color="#0389ff"/>
<stop offset="1" stop-color="#0dd4ff"/>
</linearGradient>
<linearGradient id="linear-gradient-3" x1="36.17" y1="62.56" x2="114.68" y2="62.56" xlink:href="#linear-gradient"/>
<linearGradient id="linear-gradient-4" x1="42.37" y1="26" x2="115.43" y2="26" xlink:href="#linear-gradient-2"/>
<linearGradient id="linear-gradient-5" x1="42.78" y1="46.13" x2="114.65" y2="46.13" xlink:href="#linear-gradient-2"/>
<linearGradient id="linear-gradient-6" x1="70.74" y1="70.65" x2="70.74" y2="44.51" xlink:href="#linear-gradient-2"/>
<linearGradient id="linear-gradient-7" x1="88" y1="49.97" x2="97.78" y2="49.97" gradientUnits="userSpaceOnUse">
<stop offset="0" stop-color="#1c79c4"/>
<stop offset="1" stop-color="#0389ff"/>
</linearGradient>
<linearGradient id="linear-gradient-8" x1="100.15" y1="39.07" x2="109.93" y2="39.07" xlink:href="#linear-gradient-2"/>
<linearGradient id="linear-gradient-9" x1="75.18" y1="52.14" x2="84.28" y2="52.14" xlink:href="#linear-gradient-2"/>
<linearGradient id="linear-gradient-10" x1="41.54" y1="36.69" x2="73.03" y2="36.69" xlink:href="#linear-gradient-2"/>
<linearGradient id="linear-gradient-11" x1="102.52" y1="6.7" x2="120.79" y2="6.7" xlink:href="#linear-gradient-2"/>
<linearGradient id="linear-gradient-12" x1="41.5" y1="24.46" x2="120.03" y2="24.46" xlink:href="#linear-gradient-2"/>
<linearGradient id="linear-gradient-13" x1="74.74" y1="45.39" x2="93.42" y2="-11.98" xlink:href="#linear-gradient-2"/>
<linearGradient id="linear-gradient-14" x1="70.72" y1="59.18" x2="114.39" y2="59.18" xlink:href="#linear-gradient-2"/>
</defs>
<title>Asset 15</title>
<g id="Layer_2" data-name="Layer 2">
<g id="Art">
<g>
<g>
<circle cx="25.14" cy="51.64" r="0.97" style="fill: #0dd4ff;opacity: 0.7000000000000001"/>
<circle cx="29.32" cy="42.98" r="0.97" style="fill: #0dd4ff;opacity: 0.7000000000000001"/>
<circle cx="33.78" cy="46.76" r="0.97" style="fill: #0dd4ff;opacity: 0.7000000000000001"/>
<circle cx="36.72" cy="41.87" r="0.97" style="fill: #0dd4ff;opacity: 0.7000000000000001"/>
<circle cx="36.3" cy="34.61" r="0.97" style="fill: #0dd4ff;opacity: 0.7000000000000001"/>
</g>
<g>
<circle cx="121.53" cy="40.31" r="0.97" transform="translate(11.11 105.13) rotate(-48.76)" style="fill: #0dd4ff;opacity: 0.7000000000000001"/>
<circle cx="130.38" cy="36.55" r="0.97" transform="translate(16.95 110.51) rotate(-48.76)" style="fill: #0dd4ff;opacity: 0.7000000000000001"/>
<circle cx="131.25" cy="42.34" r="0.97" transform="translate(12.9 113.13) rotate(-48.76)" style="fill: #0dd4ff;opacity: 0.7000000000000001"/>
<circle cx="136.69" cy="40.6" r="0.97" transform="translate(16.06 116.63) rotate(-48.76)" style="fill: #0dd4ff;opacity: 0.7000000000000001"/>
<circle cx="141.15" cy="34.85" r="0.97" transform="translate(21.9 118.03) rotate(-48.76)" style="fill: #0dd4ff;opacity: 0.7000000000000001"/>
</g>
<g>
<polygon points="37.32 77.88 87.07 52.86 113.57 66.29 64.91 90.77 37.32 77.88" style="fill-opacity: 0.7000000000000001;stroke: #fff;stroke-miterlimit: 10;fill: url(#linear-gradient)"/>
<line x1="43.7" y1="47.7" x2="0.23" y2="70.57" style="fill: #fff;stroke-miterlimit: 10;stroke: url(#linear-gradient-2)"/>
<polygon points="37.32 68.63 87.07 43.61 113.57 57.04 64.91 81.51 37.32 68.63" style="fill: #fff;fill-opacity: 0.7000000000000001;stroke-miterlimit: 10;stroke: url(#linear-gradient-3)"/>
<polygon points="43.51 30.9 87.61 7.49 114.3 21.1 70.19 44.51 43.51 30.9" style="fill: none;stroke-miterlimit: 10;stroke-width: 1.05020245701054px;stroke: url(#linear-gradient-4)"/>
<polyline points="114.16 21.04 114.16 47.78 70.69 70.65 43.28 57.04 43.28 31.17" style="fill: #fff;stroke-miterlimit: 10;stroke: url(#linear-gradient-5)"/>
<line x1="70.74" y1="44.51" x2="70.74" y2="70.65" style="fill: none;stroke-miterlimit: 10;stroke-width: 0.806659519672394px;stroke: url(#linear-gradient-6)"/>
<polyline points="88.5 61.54 88.5 43.56 97.28 39.2 97.28 56.82" style="fill: none;stroke-miterlimit: 10;stroke: url(#linear-gradient-7)"/>
<polygon points="109.43 41.79 109.43 31.99 100.66 36.35 100.66 46.15 109.43 41.79" style="fill: none;stroke-miterlimit: 10;stroke: url(#linear-gradient-8)"/>
<polygon points="83.78 54.86 83.78 45.06 75.68 49.41 75.68 59.22 83.78 54.86" style="fill: none;stroke-miterlimit: 10;stroke: url(#linear-gradient-9)"/>
<polyline points="42.18 24.67 42.05 33.26 72.81 48.27" style="fill: #fff;stroke-miterlimit: 10;stroke: url(#linear-gradient-10)"/>
<line x1="120.57" y1="2.14" x2="102.75" y2="11.25" style="fill: #fff;stroke-miterlimit: 10;stroke: url(#linear-gradient-11)"/>
<polygon points="42.42 24.73 88.7 0.59 119.11 24.19 72.82 48.33 42.42 24.73" style="fill: #fff;stroke-miterlimit: 10;stroke: url(#linear-gradient-12)"/>
<path d="M106.38,30.44,77.62,6.61l5.74-3,28.46,24.14Zm-7.45,3.9L70.36,10.41l-5.62,2.9L93.52,37.18ZM86,41.12,57.37,17l-5.69,3L80.54,44Z" style="opacity: 0.9;fill: url(#linear-gradient-13)"/>
<line x1="70.95" y1="70.57" x2="114.15" y2="47.78" style="fill: #fff;stroke-miterlimit: 10;stroke: url(#linear-gradient-14)"/>
</g>
</g>
</g>
</g>
</svg>
```
--------------------------------------------------------------------------------
/assets/img/sprite.svg:
--------------------------------------------------------------------------------
```
<?xml version="1.0" encoding="utf-8"?><svg width="99" height="74" viewBox="0 0 99 74" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"><svg data-name="Layer 1" width="15.53" height="8.3" viewBox="0 0 15.53 8.3" id="carat" x="35.36" y="54.2"><title>carat</title><path fill="none" stroke="#1c79be" stroke-miterlimit="10" stroke-width=".75" d="M15.27 8.03L7.62.53.27 8.03" data-name="Layer 1-2"/></svg><svg id="carat-down" viewBox="0 0 16 8.3" width="16" height="8.3" x="60" y="43.66"><style>.bst0{fill:none;stroke:#000333;stroke-width:.75;stroke-miterlimit:10}</style><title>carat</title><g id="bLayer_2"><path class="bst0" d="M.3.5L7.9 8 15.3.5" id="bLayer_1-2"/></g></svg><svg viewBox="0 0 6.12 11.88" width="6.12" height="11.88" id="caret-right" x="84" y="14.93"><defs><style>.ccls-1{fill:none;stroke:#464646;stroke-miterlimit:10;opacity:.3}</style></defs><title>Asset 1</title><g id="cLayer_2" data-name="Layer 2"><path class="ccls-1" d="M.37 11.55l5.08-5.61L.37.34" id="cLayer_1-2" data-name="Layer 1"/></g></svg><svg width="15.71" height="15.71" viewBox="0 0 15.71 15.71" id="close" x="19.65" y="54.2"><defs><symbol id="da" data-name="New Symbol 1" viewBox="0 0 15.71 15.71"><path fill="none" stroke="#ccc" stroke-miterlimit="10" d="M15.35.35l-15 15M.43.43l14.85 14.85"/></symbol></defs><use width="15.71" height="15.71" xlink:href="#da" data-name="Layer 2"/></svg><svg height="24" viewBox="0 0 24 24" width="24" id="lang-icon" x="60"><path d="M0 0h24v24H0z" fill="none"/><path d="M11.99 2C6.47 2 2 6.48 2 12s4.47 10 9.99 10C17.52 22 22 17.52 22 12S17.52 2 11.99 2zm6.93 6h-2.95a15.65 15.65 0 0 0-1.38-3.56A8.03 8.03 0 0 1 18.92 8zM12 4.04c.83 1.2 1.48 2.53 1.91 3.96h-3.82c.43-1.43 1.08-2.76 1.91-3.96zM4.26 14C4.1 13.36 4 12.69 4 12s.1-1.36.26-2h3.38c-.08.66-.14 1.32-.14 2 0 .68.06 1.34.14 2H4.26zm.82 2h2.95c.32 1.25.78 2.45 1.38 3.56A7.987 7.987 0 0 1 5.08 16zm2.95-8H5.08a7.987 7.987 0 0 1 4.33-3.56A15.65 15.65 0 0 0 8.03 8zM12 19.96c-.83-1.2-1.48-2.53-1.91-3.96h3.82c-.43 1.43-1.08 2.76-1.91 3.96zM14.34 14H9.66c-.09-.66-.16-1.32-.16-2 0-.68.07-1.35.16-2h4.68c.09.65.16 1.32.16 2 0 .68-.07 1.34-.16 2zm.25 5.56c.6-1.11 1.06-2.31 1.38-3.56h2.95a8.03 8.03 0 0 1-4.33 3.56zM16.36 14c.08-.66.14-1.32.14-2 0-.68-.06-1.34-.14-2h3.38c.16.64.26 1.31.26 2s-.1 1.36-.26 2h-3.38z"/></svg><svg width="30" height="30" viewBox="0 0 30 30" id="logo-blue-standalone" x="30"><title>Slice 1</title><path d="M20.004 13.627l-6.25 10.47h-1.13l1.118-6.823-3.466.005h-.05a.568.568 0 0 1-.564-.57c0-.134.125-.363.125-.363l6.228-10.46 1.15.006-1.146 6.833 3.483-.004h.055c.312 0 .566.255.566.57a.56.56 0 0 1-.12.334zM14.896 0C6.67 0 0 6.716 0 15c0 8.285 6.67 15 14.896 15 8.228 0 14.896-6.715 14.896-15 0-8.284-6.668-15-14.896-15z" fill="#0379C4" fill-rule="evenodd"/></svg><svg width="6.05" height="10.71" viewBox="0 0 6.05 10.71" id="return" x="90.12" y="14.93"><path fill="none" stroke="#ccc" stroke-miterlimit="10" d="M5.7.35L.71 5.44l4.99 4.91" data-name="Layer 1"/></svg><svg id="search" viewBox="0 0 24.6 24.2" width="24.6" height="24.2" y="30"><style>.hst0{fill:none;stroke:#4d4d4d;stroke-miterlimit:10}</style><title>icon_search</title><ellipse transform="rotate(-45.001 13.451 10.816)" class="hst0" cx="13.5" cy="10.8" rx="5.8" ry="5.8"/><path class="hst0" d="M3.6 20.4l5.6-5.6"/></svg><svg width="19.65" height="19.04" viewBox="0 0 19.65 19.04" id="share" y="54.2"><title>Asset 14</title><path d="M10.88 3.64V1.87.36c0-.12.06-.33.12-.34a.49.49 0 0 1 .38.11Q13.56 2 15.72 4l3.68 3.21c.34.3.34.35 0 .64l-7.86 7a1 1 0 0 1-.22.19.45.45 0 0 1-.31 0 .32.32 0 0 1-.13-.25V12.2v-.88a12.28 12.28 0 0 0-1.5.08 11.24 11.24 0 0 0-8.1 5.6 15 15 0 0 0-.75 1.69 1.75 1.75 0 0 0-.06.18c0 .14-.11.24-.28.22S0 18.9 0 18.75c0-.56 0-1.12.06-1.68a19.72 19.72 0 0 1 1.07-5.49A12.52 12.52 0 0 1 4.89 6a9.83 9.83 0 0 1 5.85-2.35z" fill="#fff" data-name="Layer 2"/></svg><svg viewBox="0 0 14.93 14.93" width="14.93" height="14.93" id="share-close" x="84"><defs><style>.jcls-1{fill:none;stroke:#fff;stroke-miterlimit:10;stroke-width:1.32px}</style></defs><title>close</title><g id="jLayer_2" data-name="Layer 2"><g id="jLayer_1-2" data-name="Layer 1"><path class="jcls-1" d="M.47.47l14 14M14.47.47l-14 14"/></g></g></svg><svg viewBox="0 0 22.93 19.66" width="22.93" height="19.66" id="twitter" x="60" y="24"><defs><style>.kcls-1{fill:#ccc;fill-rule:evenodd}</style></defs><title>Asset 5</title><g id="kLayer_2" data-name="Layer 2"><path class="kcls-1" d="M20.23 3.11A4.93 4.93 0 0 0 22.3.36a9.13 9.13 0 0 1-3 1.2A4.58 4.58 0 0 0 15.88 0a4.84 4.84 0 0 0-4.7 5 5.19 5.19 0 0 0 .12 1.13A13.14 13.14 0 0 1 1.6.91 5.16 5.16 0 0 0 1 3.4a5 5 0 0 0 2.05 4.13 4.54 4.54 0 0 1-2.13-.62V7a4.9 4.9 0 0 0 3.78 4.84 4.38 4.38 0 0 1-1.24.16 4.43 4.43 0 0 1-.88-.09A4.75 4.75 0 0 0 7 15.37a9.13 9.13 0 0 1-5.88 2.13A8.88 8.88 0 0 1 0 17.43a12.83 12.83 0 0 0 7.21 2.23c8.66 0 13.39-7.56 13.39-14.12V4.9a9.84 9.84 0 0 0 2.35-2.57 9 9 0 0 1-2.7.78zm0 0" id="kLayer_1-2" data-name="Layer 1"/></g></svg><svg width="30" height="30" viewBox="0 0 30 30" id="video-play"><title>Group 2</title><g transform="translate(2 2)" fill="none" fill-rule="evenodd"><circle stroke="#FFF" stroke-width="3" cx="13" cy="13" r="13"/><path d="M19.172 13.197l-9.59 5.731V7.467l9.59 5.73z" fill="#FFF"/></g></svg><svg viewBox="0 0 24.03 24.03" width="24.03" height="24.03" id="wordpress" x="24.6" y="30"><defs><style>.mcls-1{fill:#ccc;fill-rule:evenodd}</style></defs><title>Asset 2</title><g id="mLayer_2" data-name="Layer 2"><path class="mcls-1" d="M22.55 6.25a8.91 8.91 0 0 1 .08 1.24 11.33 11.33 0 0 1-.92 4.3L18.06 22.4a12 12 0 0 0 4.5-16.15zm-10.32 6.82L8.62 23.54a12 12 0 0 0 7.38-.2 1 1 0 0 1-.09-.16l-3.68-10.11zm7.9-1.66a6.33 6.33 0 0 0-1-3.31A5.62 5.62 0 0 1 18 5.28a2.08 2.08 0 0 1 2-2.13h.15A12 12 0 0 0 2 5.42h.77C4 5.43 6 5.28 6 5.28a.5.5 0 0 1 .07 1s-.65.08-1.37.11l4.3 13 2.63-7.88-1.85-5.13c-.65 0-1.26-.11-1.26-.11a.5.5 0 0 1 .08-1s2 .15 3.16.15S15 5.28 15 5.28a.5.5 0 0 1 .07 1s-.65.08-1.37.11l4.3 12.9 1.2-4a11.23 11.23 0 0 0 .91-3.88zM0 12a12 12 0 0 0 6.77 10.82L1 7.12A11.94 11.94 0 0 0 0 12zm0 0" id="mLayer_1-2" data-name="Layer 1"/></g></svg></svg>
```
--------------------------------------------------------------------------------
/content/docs/guides/deploy/analytics_amp/use_cases.md:
--------------------------------------------------------------------------------
```markdown
---
$title: Use Cases
$order: 2
toc: true
---
[TOC]
This guide provides a set of common use cases for tracking user engagement:
Want to add a use case?
[Let us know.](https://github.com/ampproject/docs/issues/new)
You can also contribute your own use cases;
see [How to Contribute](https://www.ampproject.org/docs/support/contribute.html).
## Tracking page views
Learn how to track page views using `amp-pixel` and `amp-analytics`.
### Using amp-pixel
Send pageview data to a specified URL using
[amp-pixel](/docs/reference/amp-pixel.html):
[sourcecode:html]
<amp-pixel src="https://foo.com/pixel?"></amp-pixel>
[/sourcecode]
### Using amp-analytics - no vendor
Send pageview data to a specified URL using
[amp-analytics](/docs/reference/extended/amp-analytics.html):
[sourcecode:html]
<amp-analytics>
<script type="application/json">
{
"requests": {
"pageview": "https://example.com/analytics?url=${canonicalUrl}&title=${title}&acct=${account}"
},
"vars": {
"account": "ABC123"
},
"triggers": {
"trackPageview": {
"on": "visible",
"request": "pageview"
}
}
}
</script>
</amp-analytics>
[/sourcecode]
### Using amp-analytics - googleanalytics
Send pageview data to Google Analytics
(see also [Page tracking in Google Analytics](https://developers.google.com/analytics/devguides/collection/amp-analytics/#page_tracking)):
[sourcecode:html]
<amp-analytics type="googleanalytics" id="analytics1">
<script type="application/json">
{
"vars": {
"account": "UA-XXXXX-Y" // Replace with your property ID.
},
"triggers": {
"trackPageview": { // Trigger names can be any string. trackPageview is not a required name.
"on": "visible",
"request": "pageview"
}
}
}
</script>
</amp-analytics>
[/sourcecode]
## Tracking page clicks
Learn how to track page clicks using
[amp-analytics](/docs/reference/extended/amp-analytics.html),
sending event data to a specified URL, and to
[Google Analytics](https://developers.google.com/analytics/devguides/collection/amp-analytics/).
### Sending data to specified URL
The following example uses the `selector` attribute to send a `click` event
to the specified URL everytime a user clicks on a link (`<a href>`):
[sourcecode:html]
<amp-analytics>
<script type="application/json">
{
"requests": {
"event": "https://example.com/analytics?eid=${eventId}&elab=${eventLabel}&acct=${account}"
},
"vars": {
"account": "ABC123"
},
"triggers": {
"trackAnchorClicks": {
"on": "click",
"selector": "a",
"request": "event",
"vars": {
"eventId": "42",
"eventLabel": "clicked on a link"
}
}
}
}
</script>
</amp-analytics>
[/sourcecode]
### Sending data to Google Analytics
The following example uses the `selector` attribute of the `trigger`
to send a `click` event to Google Analytics when a particular element is clicked
(see also
[AMP event tracking in Google Analytics](https://developers.google.com/analytics/devguides/collection/amp-analytics/#event_tracking)):
[sourcecode:html]
<amp-analytics type="googleanalytics" id="analytics3">
<script type="application/json">
{
"vars": {
"account": "UA-XXXXX-Y" // Replace with your property ID.
},
"triggers": {
"trackClickOnHeader" : {
"on": "click",
"selector": "#header",
"request": "event",
"vars": {
"eventCategory": "ui-components",
"eventAction": "header-click"
}
}
}
}
</script>
</amp-analytics>
[/sourcecode]
## Tracking scrolling
Track page scrolling using [amp-analytics](/docs/reference/extended/amp-analytics.html).
The following example uses the `scrollspec` attribute to send a `scroll` event
to the specified URL when page is scrolled vertically by 25%, 50% and 90%.
The event also fires when the page is horizontally scrolled
to 90% of `scroll` width:
[sourcecode:html]
<amp-analytics>
<script type="application/json">
{
"requests": {
"event": "https://example.com/analytics?eid=${eventId}&elab=${eventLabel}&acct=${account}"
},
"vars": {
"account": "ABC123"
},
"triggers": {
"scrollPings": {
"on": "scroll",
"scrollSpec": {
"verticalBoundaries": [25, 50, 90],
"horizontalBoundaries": [90]
}
}
}
}
</script>
</amp-analytics>
[/sourcecode]
## Tracking social interactions
Learn how to track social interactions using
[amp-analytics](/docs/reference/extended/amp-analytics.html),
sending event data to a specified URL, and to
[Google Analytics](https://developers.google.com/analytics/devguides/collection/amp-analytics/).
### Sending data to specified URL
The following example uses the `selector` attribute to send a `click` event
to the specified URL everytime a user clicks on a tweet (`#tweet-link`):
[sourcecode:html]
<amp-analytics>
<script type="application/json">
{
"requests": {
"event": "https://example.com/analytics?eid=${eventId}&elab=${eventLabel}&acct=${account}"
},
"vars": {
"account": "ABC123"
},
"triggers": {
"trackClickOnTwitterLink": {
"on": "click",
"selector": "#tweet-link",
"request": "event",
"vars": {
"eventId": "43",
"eventLabel": "clicked on a tweet link"
}
}
}
}
</script>
</amp-analytics>
[/sourcecode]
### Sending data to Google Analytics
The following example uses the `selector` attribute of the `trigger`
to send an event when a particular social button is clicked
(see also
[AMP social interactions tracking in Google Analytics](https://developers.google.com/analytics/devguides/collection/amp-analytics/#social_interactions)):
[sourcecode:html]
<amp-analytics type="googleanalytics" id="analytics4">
<script type="application/json">
{
"vars": {
"account": "UA-XXXXX-Y" // Replace with your property ID.
},
"triggers": {
"trackClickOnTwitterLink" : {
"on": "click",
"selector": "#tweet-link",
"request": "social",
"vars": {
"socialNetwork": "twitter",
"socialAction": "tweet",
"socialTarget": "https://www.examplepetstore.com"
}
}
}
}
</script>
</amp-analytics>
[/sourcecode]
```
--------------------------------------------------------------------------------
/content/support/faqs/overview@pt_BR.md:
--------------------------------------------------------------------------------
```markdown
---
$title@: Visão geral das Accelerated Mobile Pages
cta:
title@: Next FAQ
link_text@: Envolvimento de empresas de tecnologia e plataformas
link_url: /content/support/faqs/platform-involvement.md
faq:
- title@: O que é o projeto das Accelerated Mobile Pages?
answer@: |
O projeto das Accelerated Mobile Pages (AMP) é uma iniciativa de código aberto que surgiu de discussões entre editores e empresas de tecnologia sobre a necessidade de melhorar todo o ecossistema de conteúdo para dispositivos móveis para editores, plataformas de consumidor, criadores e usuários.
Hoje, a expectativa é de que o conteúdo seja carregado muito rápido e que seja fácil de explorar. A realidade é que o carregamento pode demorar vários segundos ou, se o usuário abandona a página lenta, não chega a ser concluído. As Accelerated Mobile Pages são páginas da Web desenvolvidas para carregar quase instantaneamente. Elas são um passo importante na criação de uma Web para dispositivos móveis melhor para todos.
- title@: Quais são os benefícios das Accelerated Mobile Pages?
answer@: |
A velocidade é importante, e ser instantâneo é o ideal. Pesquisas mostraram que taxas de rejeições mais elevadas estão associadas a páginas da Web de carregamento mais lento. O uso do formato AMP fará com que seja muito mais atrativo para os usuários consumir e interagir com mais conteúdo. No entanto, isso não se trata somente de velocidade e desempenho. Queremos também promover uma distribuição aprimorada para que os editores possam tirar proveito do potencial da Web aberta de modo que o conteúdo deles apareça em qualquer lugar rapidamente, em todas as plataformas e aplicativos. Isso pode levar a uma receita maior por meio de anúncios e assinaturas.
- title@: Como as Accelerated Mobile Pages funcionam?
answer@: |
As Accelerated Mobile Pages são como qualquer outra página HTML. No entanto, elas têm um conjunto limitado de funcionalidades técnicas permitidas que são definidas e governadas pelas especificações de AMP de código aberto. Assim como todas as páginas da Web, as Accelerated Mobile Pages carregarão em qualquer navegador moderno ou WebView de aplicativo.
Os arquivos AMP usam diversas abordagens técnicas e arquitetônicas que priorizam a velocidade a fim de proporcionar uma experiência mais rápida aos usuários. Os desenvolvedores de AMP podem usar uma biblioteca rica e crescente de componentes da Web que oferecem a capacidade de incorporar objetos de rich media, como vídeos e postagens sociais, exibir publicidade ou coletar dados para análises. O objetivo não é homogeneizar a aparência do conteúdo, mas sim construir um núcleo comum mais técnico entre as páginas de modo a acelerar os tempos de carregamento.
Além disso, os arquivos das AMP podem ser armazenados em cache na nuvem a fim de reduzir o tempo que o conteúdo leva para chegar ao dispositivo móvel do usuário. Ao usar o formato AMP, os criadores disponibilizam o conteúdo dos arquivos das AMP para ser armazenado em cache por terceiros. Nesse tipo de estrutura, os editores continuam controlando o conteúdo, mas as plataformas podem facilmente armazenar em cache ou espelhar o conteúdo para oferecer a velocidade ideal aos usuários. O Google forneceu um cache que pode ser usado por qualquer pessoa sem custos, e todas as AMPs serão armazenadas pelo [cache de AMP do Google](https://developers.google.com/amp/cache/). Outras empresas também podem desenvolver seu próprio cache de AMP.
Em resumo, o objetivo é que a combinação de uma funcionalidade técnica limitada com um sistema de distribuição desenvolvido com base no armazenamento em cache leve a páginas com melhor desempenho e maior desenvolvimento de público para os editores.
- title@: Por que o projeto das Accelerated Mobile Pages tem uma abordagem de código aberto?
answer@: |
As empresas envolvidas no projeto querem fazer com que a Web para dispositivos móveis funcione melhor para todos, não somente para uma plataforma, um conjunto de tecnologias ou de editores. O uso de código aberto nesse projeto permite que as pessoas contribuam e compartilhem suas ideias e códigos para tornar a Web para dispositivos móveis mais rápida. Estamos somente no início dessa jornada e esperamos que outros editores e empresas de tecnologia se juntem a nós.
- title@: Quem pode usar as Accelerated Mobile Pages?
answer@: |
O projeto está aberto a todos os envolvidos no ecossistema: editores, plataformas de consumidores e criadores. Para ter uma ideia de quem são algumas das empresas e sites que usam as AMP, acesse a [página "Quem"](/who).
- title@: Quais são as consequências do uso das Accelerated Mobile Pages?
answer@: |
Ao usar o formato AMP, os criadores disponibilizam o conteúdo em arquivos das AMP para ser rastreado, indexado, exibido (sujeito ao protocolo de exclusão de robots) e armazenado em cache por terceiros.
- title@: Que tipo de conteúdo funciona melhor com as Accelerated Mobile Pages?
answer@: |
O objetivo é que todo o conteúdo publicado (de notícias a vídeos, passando por blogs, fotos e GIFs) funcione com as Accelerated Mobile Pages.
- title@: Como editor, é mais trabalhoso fazer com que o meu conteúdo funcione com as Accelerated Mobile Pages?
answer@: |
No geral, não muito. Como o "HTML das AMP" é construído inteiramente a partir de tecnologias da Web existentes, o processo de desenvolvimento espelha o que os editores já usam hoje. Os editores podem familiarizar-se com as especificações do HTML das AMP no GitHub. Para aqueles acostumados com o processo atual, não esperamos uma curva de aprendizagem significativa.
- title@: Como um editor pode criar conteúdo em HTML das AMP?
answer@: |
Os editores e fornecedores de sistema de gerenciamento de conteúdo (CMS, na sigla em inglês) podem desenvolver uma integração com o CMS deles para gerar conteúdo AMP. A Automattic já publicou um [plugin de AMP para WordPress](https://wordpress.org/plugins/amp/), e esperamos que todos os sistemas de gerenciamento de conteúdo adicionem a compatibilidade com páginas HTML das AMP.
---
```
--------------------------------------------------------------------------------
/assets/sass/_grid.scss:
--------------------------------------------------------------------------------
```scss
/*
* Skeleton V2.0.4
* Copyright 2014, Dave Gamache
* www.getskeleton.com
* Free to use under the MIT license.
* http://www.opensource.org/licenses/mit-license.php
* 12/29/2014
*/
/* Grid
–––––––––––––––––––––––––––––––––––––––––––––––––– */
.column,
.columns {
width: 100%;
float: left;
box-sizing: border-box;
&.contained {
img {
max-width: 100%;
}
}
}
.row.table {
@media (min-width: $mobile-breakpoint) {
& > .columns {
display: table-cell;
float: none;
vertical-align: middle;
&:nth-child(2) {
padding-left: 4%;
}
}
}
}
.row:after,
.u-cf {
content: "";
display: table;
clear: both; }
/* For devices larger than $mobile-breakpoint */
@media (min-width: $mobile-breakpoint) {
.column,
.columns {
margin-left: 4%; }
.column:first-child,
.columns:first-child {
margin-left: 0; }
.reversed {
.column,
.columns {
margin-left: 0; }
.column:first-child,
.columns:first-child {
float: right;
margin-left: 4%; }
}
.one.column,
.one.columns { width: 4.66666666667%; }
.two.columns { width: 13.3333333333%; }
.three.columns { width: 22%; }
.four.columns { width: 30.6666666667%; }
.five.columns { width: 39.3333333333%; }
.six.columns { width: 48%; }
.seven.columns { width: 56.6666666667%; }
.eight.columns { width: 65.3333333333%; }
.nine.columns { width: 74.0%; }
.ten.columns { width: 82.6666666667%; }
.eleven.columns { width: 91.3333333333%; }
.twelve.columns { width: 100%; margin-left: 0; }
.one-third.column { width: 30.6666666667%; }
.two-thirds.column { width: 65.3333333333%; }
.one-half.column { width: 48%; }
/* Offsets */
.offset-by-one.column,
.offset-by-one.columns { margin-left: 8.66666666667%; }
.offset-by-two.column,
.offset-by-two.columns { margin-left: 17.3333333333%; }
.offset-by-three.column,
.offset-by-three.columns { margin-left: 26%; }
.offset-by-four.column,
.offset-by-four.columns { margin-left: 34.6666666667%; }
.offset-by-five.column,
.offset-by-five.columns { margin-left: 43.3333333333%; }
.offset-by-six.column,
.offset-by-six.columns { margin-left: 52%; }
.offset-by-seven.column,
.offset-by-seven.columns { margin-left: 60.6666666667%; }
.offset-by-eight.column,
.offset-by-eight.columns { margin-left: 69.3333333333%; }
.offset-by-nine.column,
.offset-by-nine.columns { margin-left: 78.0%; }
.offset-by-ten.column,
.offset-by-ten.columns { margin-left: 86.6666666667%; }
.offset-by-eleven.column,
.offset-by-eleven.columns { margin-left: 95.3333333333%; }
.offset-by-one-third.column,
.offset-by-one-third.columns { margin-left: 34.6666666667%; }
.offset-by-two-thirds.column,
.offset-by-two-thirds.columns { margin-left: 69.3333333333%; }
.offset-by-one-half.column,
.offset-by-one-half.columns { margin-left: 52%; }
}
/* For devices larger than $mobile-breakpoint */
@media (max-width: $mobile-breakpoint) {
.row.row-sm {
.column,
.columns {
margin-left: 4%; }
.column:first-child,
.columns:first-child {
margin-left: 0; }
.one.column,
.one.columns { width: 4.66666666667%; }
.two.columns { width: 13.3333333333%; }
.three.columns { width: 22%; }
.four.columns { width: 30.6666666667%; }
.five.columns { width: 39.3333333333%; }
.six.columns { width: 48%; }
.seven.columns { width: 56.6666666667%; }
.eight.columns { width: 65.3333333333%; }
.nine.columns { width: 74.0%; }
.ten.columns { width: 82.6666666667%; }
.eleven.columns { width: 91.3333333333%; }
.twelve.columns { width: 100%; margin-left: 0; }
.one-third.column { width: 30.6666666667%; }
.two-thirds.column { width: 65.3333333333%; }
.one-half.column { width: 48%; }
/* Offsets */
.offset-by-one.column,
.offset-by-one.columns { margin-left: 8.66666666667%; }
.offset-by-two.column,
.offset-by-two.columns { margin-left: 17.3333333333%; }
.offset-by-three.column,
.offset-by-three.columns { margin-left: 26%; }
.offset-by-four.column,
.offset-by-four.columns { margin-left: 34.6666666667%; }
.offset-by-five.column,
.offset-by-five.columns { margin-left: 43.3333333333%; }
.offset-by-six.column,
.offset-by-six.columns { margin-left: 52%; }
.offset-by-seven.column,
.offset-by-seven.columns { margin-left: 60.6666666667%; }
.offset-by-eight.column,
.offset-by-eight.columns { margin-left: 69.3333333333%; }
.offset-by-nine.column,
.offset-by-nine.columns { margin-left: 78.0%; }
.offset-by-ten.column,
.offset-by-ten.columns { margin-left: 86.6666666667%; }
.offset-by-eleven.column,
.offset-by-eleven.columns { margin-left: 95.3333333333%; }
.offset-by-one-third.column,
.offset-by-one-third.columns { margin-left: 34.6666666667%; }
.offset-by-two-thirds.column,
.offset-by-two-thirds.columns { margin-left: 69.3333333333%; }
.offset-by-one-half.column,
.offset-by-one-half.columns { margin-left: 52%; }
}
}
//Bootstrap import for quote section
.col-sx-4, .col-md-2{
position: relative;
min-height: 1px;
padding-right: 15px;
padding-left: 15px;
float:left;
}
.col-xs-4 {
width: 33.33333333%;
}
@media (min-width: 992px) {
.col-md-2 {
width: 16.66666667%;
}
}
```
--------------------------------------------------------------------------------
/content/support/faqs/[email protected]:
--------------------------------------------------------------------------------
```markdown
---
$title@: Présentation des pages Accelerated Mobile Pages
cta:
title@: Next FAQ
link_text@: Participation des plates-formes et des entreprises technologiques
link_url: /content/support/faqs/platform-involvement.md
faq:
- title@: En quoi consiste le projet Accelerated Mobile Pages ?
answer@: |
Le projet Accelerated Mobile Pages (AMP) est une initiative Open Source née de discussions entre des éditeurs et des entreprises technologiques évoquant la nécessité d'améliorer l'ensemble de l'écosystème du contenu mobile pour tous : éditeurs, plates-formes pour les consommateurs, créateurs et mobinautes.
Aujourd'hui, les gens veulent un contenu qui se charge ultra-rapidement et soit facile à explorer. Dans les faits, plusieurs secondes sont souvent nécessaires au chargement d'un contenu, si tant est que le mobinaute accepte de rester sur une page lente. Les pages Accelerated Mobile Pages sont des pages Web conçues pour un chargement presque instantané. Elles ont pour objectif d'améliorer l'Internet mobile pour tous.
- title@: Quels sont les avantages des pages Accelerated Mobile Pages ?
answer@: |
La vitesse compte, l'instantané fait rêver. D'après les études réalisées à ce sujet, les taux de rebond sont plus élevés pour les pages Web au chargement plus lent. Grâce au format AMP, les mobinautes seront plus enclins à consommer et auront envie de consulter davantage de contenu. Mais la vitesse et les performances ne sont pas les seuls critères. Nous souhaitons également améliorer la diffusion, afin que les éditeurs puissent tirer parti du potentiel du Web ouvert avec un contenu qui s'affiche partout rapidement, sur les plates-formes et les applications. À la clé ? Plus de revenus grâce aux annonces et aux abonnements.
- title@: Comment fonctionnent les pages Accelerated Mobile Pages ?
answer@: |
Les pages Accelerated Mobile Pages sont des pages HTML qui contiennent un ensemble limité de fonctionnalités techniques autorisées, définies et régies par la spécification AMP Open Source. À l'instar de toutes les pages Web, les pages Accelerated Mobile Pages se chargent dans tout navigateur récent et dans tout affichage Web d'application.
Les fichiers AMP s'appuient sur diverses approches techniques et architecturales qui privilégient la vitesse pour offrir une expérience plus rapide aux mobinautes. Les développeurs AMP peuvent utiliser une bibliothèque de plus en plus fournie de composants Web qui offrent la possibilité d'intégrer des objets rich media, tels que des vidéos et des posts sur les réseaux sociaux, d'afficher des annonces ou de recueillir des statistiques. Le but n'est pas d'homogénéiser l'aspect du contenu, mais plutôt de construire un noyau technique plus commun entre les pages pour accélérer les temps de chargement.
En outre, les fichiers AMP peuvent être mis en cache dans le cloud afin que le contenu soit plus rapidement disponible sur les appareils mobiles. En utilisant le format AMP, les créateurs permettent aussi à des tiers de mettre en cache le contenu des fichiers AMP. Dans ce type d'infrastructure, les éditeurs continuent de contrôler leur contenu, mais les plates-formes peuvent facilement mettre en cache le contenu ou créer un contenu miroir pour le proposer aux mobinautes en un temps record. Le [cache AMP Google](https://developers.google.com/amp/cache/) peut être utilisé pour toutes les pages AMP, par n'importe qui et gratuitement. Les entreprises peuvent aussi développer leur propre cache AMP.
En résumé, la combinaison de fonctionnalités techniques limitées avec un système de diffusion basé sur la mise en cache doit permettre de créer des pages plus performantes et d'offrir un public plus large aux éditeurs.
- title@: Pourquoi choisir une approche Open Source pour le projet Accelerated Mobile Pages ?
answer@: |
Les entreprises impliquées dans le projet veulent améliorer universellement le fonctionnement du Web pour mobile, et pas uniquement pour une plate-forme, un ensemble de technologies ou un groupe d'éditeurs spécifiques. En choisissant une approche Open Source, les gens peuvent partager leurs idées et leur code afin de rendre le Web pour mobile plus rapide. Nous ne sommes qu'au début de cette aventure, et nous nous réjouissons de la contribution future d'autres éditeurs et entreprises technologiques.
- title@: Qui peut utiliser les pages Accelerated Mobile Pages ?
answer@: |
Le projet est ouvert à tous les acteurs de l'écosystème : éditeurs, plates-formes pour les consommateurs et créateurs. Pour connaître certains des sites et des entreprises qui utilisent les pages AMP, consultez la page [Qui](/who).
- title@: Quelles sont les conséquences de l'utilisation de pages Accelerated Mobile Pages ?
answer@: |
En utilisant le format AMP, les créateurs permettent l'exploration, l'indexation et l'affichage (soumis au protocole d'exclusion des robots) du contenu des fichiers AMP, ainsi que sa mise en cache par des tiers.
- title@: Quel type de contenu fonctionne le mieux avec les pages Accelerated Mobile Pages ?
answer@: |
L'objectif est que l'ensemble du contenu publié, des actualités aux vidéos, en passant par les blogs, les photos et les GIF, fonctionne à l'aide de pages Accelerated Mobile Pages.
- title@: En tant qu'éditeur, le fait de créer des pages Accelerated Mobile Pages implique-t-il plus de travail ?
answer@: |
Pas vraiment. L'AMP HTML ne reposant sur aucune nouvelle technologie Web, le processus de développement reflète ce que les éditeurs utilisent déjà aujourd'hui. Les éditeurs peuvent se familiariser avec les spécifications AMP HTML sur GitHub. Les personnes maîtrisant déjà le processus actuel ne découvriront pas grand-chose de plus.
- title@: Comment un éditeur peut-il convertir du contenu en AMP HTML ?
answer@: |
Les éditeurs et fournisseurs de systèmes de gestion de contenu (CMS) peuvent développer une intégration avec leur CMS pour générer du contenu AMP. Automattic a déjà publié un [plug-in AMP pour WordPress](https://wordpress.org/plugins/amp/) et nous espérons que tous les systèmes de gestion de contenu finiront par accepter les pages AMP HTML.
---
```
