This is page 2 of 20. Use http://codebase.md/cloudflare/docs/imgs/todomvc-screenshot-1.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
--------------------------------------------------------------------------------
/content/docs/get_started/create/preview_and_validate.md:
--------------------------------------------------------------------------------
```markdown
---
$title: Preview and Validate
$order: 3
---
Preview the AMP page just as you would preview any other static HTML site. There’s no build step or preprocessing required. Either:
- **Open it directly in the browser from the file system** (certain elements might not work due to XMLHttpRequests failing).
- **Use a local web server like Apache 2 or Nginx**.
*(Tip: For a quick web server, run `python -m SimpleHTTPServer`.)*
Next, make sure that your AMP page **is actually valid AMP**, or it won’t get discovered and distributed by third-party platforms like Google Search. To validate:
1. Open your page in your browser.
1. Add "`#development=1`" to the URL, for example, `http://localhost:8000/released.amp.html#development=1`.
1. Open the [Chrome DevTools console](https://developers.google.com/web/tools/chrome-devtools/debug/console/) and check for validation errors.
[Learn more about validation](/docs/guides/validate.html), and what to do when you get errors.
<a class="go-button button" href="/docs/get_started/create/prepare_for_discovery.html">Continue to Step 5</a>
```
--------------------------------------------------------------------------------
/content/support/faqs/[email protected]:
--------------------------------------------------------------------------------
```markdown
---
$title@: Beteiligung von Plattformen und Technologieunternehmen
cta:
title@: Next FAQ
link_text@: Monetarisierung für Publisher
link_url: /content/support/faqs/publisher-monetization.md
faq:
- title@: Wie können sich Verbraucherplattformen am Projekt Accelerated Mobile Pages beteiligen?
answer@: |
Das Projekt steht allen offen. Die aktuellen Teilnehmer würden sich sehr gern auch mit Verbraucherplattformen über die Initiative austauschen. Der Cache von Google steht allen kostenlos zur Verfügung. Dies schließt auch Verbraucherplattformen ein, die AMP-Inhalte in ihrer Umgebung nutzen wollen. [Kontaktieren Sie uns über GitHub](https://github.com/ampproject/amphtml/issues/new). Wir werden uns dann schnellstmöglich um Ihre Fragen kümmern.
- title@: Wie können sich Werbeunternehmen oder Technologieanbieter an Accelerated Mobile Pages beteiligen?
answer@: |
Bitte lesen Sie die [Richtlinien für Beitragende](https://github.com/ampproject/amphtml/tree/master/3p#ads) und [kontaktieren Sie uns über GitHub](https://github.com/ampproject/amphtml/issues/new).
---
```
--------------------------------------------------------------------------------
/content/includes/html-example.md:
--------------------------------------------------------------------------------
```markdown
[sourcecode:html]
<!doctype html>
<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>
<script async src="https://cdn.ampproject.org/v0.js"></script>
</head>
<body>Hello World!</body>
</html>
[/sourcecode]
```
--------------------------------------------------------------------------------
/assets/sass/_content-post.scss:
--------------------------------------------------------------------------------
```scss
// post content for docs
// Components table
.post-title {
color: $color-ampblue;
margin: 0 75px;
padding: 0 15px;
}
.post-content {
@extend %text-small;
margin: 0 75px;
padding: 0 15px;
a {
text-transform: none;
}
.button {
&:before {
display: none;
}
}
td:first-child a:hover {
text-decoration: none;
}
th.col-twenty,
td.col-twenty {
min-width: 90px;
}
}
@include min-screen($toc-breakpoint) {
.post.has-toc {
.post-title,
.post-content {
margin: 0 190px 0 15px;
}
}
.rtl {
.post.has-toc {
.post-title,
.post-content {
margin: 0 15px 0 190px;
}
}
}
}
@include max-screen($toc-breakpoint) {
.post.has-toc {
.post-title,
.post-content {
margin: 0;
}
}
.rtl {
.post.has-toc {
.post-title,
.post-content {
margin: 0;
}
}
}
}
@include max-screen($tablet-breakpoint) {
.post-title,
.post-content {
margin: 0 15px;
}
}
@include max-screen($mobile-breakpoint) {
.post-title,
.post-content {
margin: 0;
}
}
```
--------------------------------------------------------------------------------
/assets/img/about/design-principles/lines2.svg:
--------------------------------------------------------------------------------
```
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 258.63 200.18"><defs><style>.cls-1,.cls-2{fill:none;stroke-miterlimit:10;stroke-width:9px;}.cls-1{stroke:url(#linear-gradient);}.cls-2{stroke:url(#linear-gradient-2);}</style><linearGradient id="linear-gradient" x1="5059.93" y1="-6711.71" x2="5314.71" y2="-6711.71" gradientTransform="translate(5221.47 -6687.02) rotate(179.22)" gradientUnits="userSpaceOnUse"><stop offset="0" stop-color="#0382ff"/><stop offset="1" stop-color="#0dd0ff"/></linearGradient><linearGradient id="linear-gradient-2" x1="-22509.5" y1="-6753.17" x2="-22307.5" y2="-6753.17" gradientTransform="translate(22657.11 6571.41) rotate(-0.78)" gradientUnits="userSpaceOnUse"><stop offset="0" stop-color="#0dd0ff"/><stop offset="0.5" stop-color="#0dd0ff"/><stop offset="1" stop-color="#fff" stop-opacity="0"/></linearGradient></defs><title>lines2</title><g id="Layer_2" data-name="Layer 2"><g id="Art"><line class="cls-1" x1="2.67" y1="186.07" x2="249.75" y2="3.62"/><line class="cls-2" x1="255.95" y1="52.71" x2="61.15" y2="196.56"/></g></g></svg>
```
--------------------------------------------------------------------------------
/content/support/faqs/[email protected]:
--------------------------------------------------------------------------------
```markdown
---
$title@: Coinvolgimento di piattaforme e aziende tecnologiche
cta:
title@: Next FAQ
link_text@: Monetizzazione per i publisher
link_url: /content/support/faqs/publisher-monetization.md
faq:
- title@: Come fa una piattaforma di consumo a partecipare al progetto Accelerated Mobile Pages?
answer@: |
Il progetto è aperto a tutti e i membri attuali sono entusiasti di relazionarsi con le piattaforme di consumo nell'ambito dell'iniziativa. Google ha messo a disposizione gratuitamente la sua cache per tutti, incluse le piattaforme di consumo che vorrebbero visualizzare i contenuti AMP nel loro ambiente. Contattaci tramite [GitHub](https://github.com/ampproject/amphtml/issues/new) e cercheremo di rispondere alle tue domande nel più breve tempo possibile.
- title@: Come fa un fornitore di servizi pubblicitari o tecnologici a partecipare al progetto Accelerated Mobile Pages?
answer@: |
Leggi le [linee guida per la partecipazione](https://github.com/ampproject/amphtml/tree/master/3p#ads) e contattaci tramite [GitHub](https://github.com/ampproject/amphtml/issues/new).
---
```
--------------------------------------------------------------------------------
/content/pages/metrics_chart.html:
--------------------------------------------------------------------------------
```html
---
$title: Metrics Embed
$path: /metrics_chart.html
$hidden: true
$view: /views/blank.html
---
<html>
<head>
<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
<script type="text/javascript">
google.charts.load('current', {'packages':['corechart']}); // Don't need to specify chart libraries!
google.charts.setOnLoadCallback(drawVisualization);
function drawVisualization() {
var wrapper = new google.visualization.ChartWrapper({
chartType: 'LineChart',
dataSourceUrl: 'https://docs.google.com/spreadsheets/d/1eujM6jDffZpOuwyZqji1Q6fpoEm8VZ5YO61-OMpmmw8/edit?usp=sharing&gid=37439685',
query: 'SELECT A,B,C,D,E,F ORDER BY A',
options: {
'title': 'Page load average across percentiles',
'vAxis': {
format:'#ms'
}
},
containerId: 'vis_div'
});
wrapper.draw()
}
</script>
</head>
<body style="font-family: Arial;border: 0 none;">
<div id="vis_div" style="height: 500px;"></div>
</body>
</html>
```
--------------------------------------------------------------------------------
/assets/img/symbols/video-play.svg:
--------------------------------------------------------------------------------
```
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<svg width="30px" height="30px" viewBox="0 0 30 30" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xmlns:sketch="http://www.bohemiancoding.com/sketch/ns">
<!-- Generator: Sketch 3.5.2 (25235) - http://www.bohemiancoding.com/sketch -->
<title>Group 2</title>
<desc>Created with Sketch.</desc>
<defs></defs>
<g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd" sketch:type="MSPage">
<g id="AMP---3" sketch:type="MSArtboardGroup" transform="translate(-135.000000, -383.000000)">
<g id="Group-2" sketch:type="MSLayerGroup" transform="translate(137.000000, 385.000000)">
<circle id="Oval-5" stroke="#FFFFFF" stroke-width="3" sketch:type="MSShapeGroup" cx="13" cy="13" r="13"></circle>
<path d="M19.1724988,13.1973605 L9.58254916,18.9280578 L9.58254916,7.46666319 L19.1724988,13.1973605 L19.1724988,13.1973605 Z" id="Rectangle-36" fill="#FFFFFF" sketch:type="MSShapeGroup"></path>
</g>
</g>
</g>
</svg>
```
--------------------------------------------------------------------------------
/content/docs/get_started/login_requiring.md:
--------------------------------------------------------------------------------
```markdown
---
$title: Create a login-requiring AMP page
$order: 2
numbered: 1
---
Some user interactions with a page, such as leaving a comment, could be conditioned by a login flow. You can implement a login flow with AMP by using the [amp-access](https://www.ampproject.org/docs/reference/components/amp-access) component combined with the [amp-form](https://www.ampproject.org/docs/reference/components/amp-form) component.
{% call callout('Tip', type='success') %}
To see a sample implementation, visit the [comment section sample](https://ampbyexample.com/samples_templates/comment_section/) at [ampbyexample.com](https://ampbyexample.com).
{% endcall %}
The [comment section sample](https://ampbyexample.com/samples_templates/comment_section/) combines `amp-access` and `amp-form` to create a comment section which is enabled only when an user has logged in. In order to explain how this sample works, let's follow the set of actions that will be performed once you land on the page.
{% include "/views/partials/sub_nav.html" %}
<a class="button go-button" href="/docs/get_started/login_requiring/login.html">Continue to Step 1</a>
```
--------------------------------------------------------------------------------
/content/support/faqs/[email protected]:
--------------------------------------------------------------------------------
```markdown
---
$title@: Participación de plataformas y empresas tecnológicas
cta:
title@: Next FAQ
link_text@: Obtención de ingresos del editor
link_url: /content/support/faqs/publisher-monetization.md
faq:
- title@: ¿Cómo puede una plataforma de consumidores participar en Accelerated Mobile Pages?
answer@: |
El proyecto está abierto a todo el mundo, y los miembros actuales están encantados de colaborar en esta iniciativa con plataformas de usuarios. Google ha abierto su caché para que todo el mundo pueda utilizarla de forma gratuita, incluidas las plataformas de consumidores que quieran mostrar contenido de AMP en su entorno. Ponte en contacto con nosotros a través de [GitHub](https://github.com/ampproject/amphtml/issues/new) y responderemos a tus preguntas lo antes posible.
- title@: ¿Cómo puede un proveedor de tecnología o publicidad participar en Accelerated Mobile Pages?
answer@: |
Consulta las [directrices de contribución](https://github.com/ampproject/amphtml/tree/master/3p#ads) y ponte en contacto con nosotros a través de [GitHub](https://github.com/ampproject/amphtml/issues/new).
---
```
--------------------------------------------------------------------------------
/assets/sass/_inline-toc.scss:
--------------------------------------------------------------------------------
```scss
.inline-toc {
margin: 50px 0;
ul,
ol {
list-style: none;
margin: 0 auto;
text-align: center;
}
li {
display: inline-block;
margin: 0 25px;
}
a {
color: $color-grey-md;
font-size: 20px;
font-weight: 300;
letter-spacing: .56px;
line-height: 28px;
position: relative;
text-transform: none;
&:hover,
&.active {
color: $color-black-95;
&::before {
background: $gradient-med;
bottom: -5px;
content: '';
height: 1px;
left: 0;
position: absolute;
right: 0;
}
}
}
}
@include max-screen($mobile-breakpoint) {
.inline-toc {
margin: 25px 0;
ul,
ol {
border-left: 1px solid $color-brightblue;
text-align: left;
text-align: start;
}
li {
display: block;
line-height: 16px;
margin: 15px 20px;
width: 100%;
}
a {
color: $color-black-95;
font-size: 16px;
line-height: 26px;
}
}
.rtl .inline-toc {
ul, ol {
border-left: 0;
border-right: 1px solid $color-brightblue;
}
}
}
```
--------------------------------------------------------------------------------
/assets/img/about/who-use-amp/amp-ads/lines_bottom1.svg:
--------------------------------------------------------------------------------
```
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 325.31 236.98"><defs><style>.cls-1,.cls-2{fill:none;stroke-miterlimit:10;stroke-width:9px;}.cls-1{stroke:url(#linear-gradient);}.cls-2{stroke:url(#linear-gradient-2);}</style><linearGradient id="linear-gradient" x1="-5.18" y1="10739.49" x2="279.74" y2="10739.49" gradientTransform="matrix(0.99, 0.16, -0.16, 0.99, 1769.69, -10500.97)" gradientUnits="userSpaceOnUse"><stop offset="0" stop-color="#1c79bd"/><stop offset="0.5" stop-color="#0382ff"/><stop offset="1" stop-color="#0dd0ff"/></linearGradient><linearGradient id="linear-gradient-2" x1="8071.64" y1="-13287.35" x2="8286.26" y2="-13287.35" gradientTransform="translate(8302.72 -13171.39) rotate(180)" gradientUnits="userSpaceOnUse"><stop offset="0" stop-color="#fff"/><stop offset="0.5" stop-color="#0dd0ff"/><stop offset="1" stop-color="#0dd0ff"/></linearGradient></defs><title>lines_bottom1</title><g id="Layer_2" data-name="Layer 2"><g id="Art"><line class="cls-1" x1="322.69" y1="3.66" x2="2.62" y2="233.33"/><line class="cls-2" x1="19.09" y1="191.19" x2="228.46" y2="40.72"/></g></g></svg>
```
--------------------------------------------------------------------------------
/content/support/faqs/[email protected]:
--------------------------------------------------------------------------------
```markdown
---
$title@: Participation des plates-formes et des entreprises technologiques
cta:
title@: Next FAQ
link_text@: Monétisation des éditeurs
link_url: /content/support/faqs/publisher-monetization.md
faq:
- title@: Comment une plate-forme pour les consommateurs peut-elle s'impliquer dans le projet AMP ?
answer@: |
Le projet est ouvert à tous. Ses membres actuels sont très enthousiastes à l'idée de collaborer sur cette initiative avec les plates-formes pour les consommateurs. Google ouvre gratuitement son cache à toute personne, y compris les plates-formes pour les consommateurs qui souhaiteraient afficher du contenu AMP dans leur environnement. Vous pouvez nous contacter via [GitHub](https://github.com/ampproject/amphtml/issues/new). Nous répondrons à vos questions le plus rapidement possible.
- title@: Comment un annonceur ou un fournisseur de technologies peut-il participer au projet AMP ?
answer@: |
Veuillez consulter les [consignes en matière de contribution](https://github.com/ampproject/amphtml/tree/master/3p#ads) et nous contacter via [GitHub](https://github.com/ampproject/amphtml/issues/new).
---
```
--------------------------------------------------------------------------------
/content/contribute/governance.md:
--------------------------------------------------------------------------------
```markdown
---
$title: Open Source Governance
$order: 4
---
The AMP Project's chief and primary concern is with the development of AMP HTML, an open-source runtime shared by many producers and consumers of (mostly) static web content. Its governance model thus reflects only the need to steer engineering direction, and not any other activities, which would be out of scope.
Our governance model is as follows:
* There is a single Tech Lead, who will have the final say on all decisions regarding technical direction.
* The Tech Lead directs the Core Committers, whose members include the Tech Lead and those who have been appointed by the Tech Lead as Core Committers.
* In the event the Tech Lead is unable to perform his or her duties, or abdicates, the Core Committers can select a new Tech Lead from amongst themselves.
* In the event there are no Core Committers, Google Inc. will appoint one.
## Core Committers:
* Tech Lead: Malte Ubl (@cramforce)
* Dima Voytenko (@dvoytenko)
* Erwin Mombay (@erwinmombay)
* Justin Ridgewell (@jridgewell)
* Mohammad Khatib (@mkhatib)
* Sriram Krishnan (@sriramkrish85)
* Yuxi Chen (@muxin)
* Yuxuan Zhou (@zhouyx)
```
--------------------------------------------------------------------------------
/views/base.html:
--------------------------------------------------------------------------------
```html
<!DOCTYPE html>
<html ⚡ {% if doc.locale.is_rtl %} dir="rtl" lang="ar"{% else %}lang="{{doc.locale}}"{% endif %}>
{% include "/views/partials/head.html" %}
<body class="{{doc.class}}{% if doc.locale.is_rtl %} rtl{% endif %}">
<amp-analytics type="googleanalytics" id="analytics-ga">
<script type="application/json">
{
"vars": {
"account": "UA-67833617-1"
},
"triggers": {
"trackPageview": {
"on": "visible",
"request": "pageview"
}
}
}
</script>
</amp-analytics>
{% set menu_doc = g.doc('/content/includes/menu.yaml', locale=doc.locale) %}
{% with menu = menu_doc.fields.menu %}
{% include "/views/partials/sidebar.html" %}
{% include "/views/partials/header.html" %}
{% endwith %}
{% macro callout(title, type='note') -%}
<aside class="{{ type }}">
<strong>{{ title }} — </strong>
<span>{{ caller() }}</span>
</aside>
{%- endmacro %}
<div class="wrap">
{% block main %}
<div class="content">
{{doc.html|render|safe}}
{% include "/views/partials/footer.html" %}
</div>
{% endblock %}
</div>
</body>
</html>
```
--------------------------------------------------------------------------------
/assets/img/cheveron-down.svg:
--------------------------------------------------------------------------------
```
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<svg width="12px" height="8px" viewBox="0 0 12 8" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<!-- Generator: Sketch 3.8.3 (29802) - http://www.bohemiancoding.com/sketch -->
<title>open</title>
<desc>Created with Sketch.</desc>
<defs></defs>
<g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
<g id="AMP---Mobile" transform="translate(-330.000000, -1227.000000)">
<g id="Benifits" transform="translate(0.000000, 470.000000)">
<g id="openness" transform="translate(0.000000, 728.000000)">
<g id="open" transform="translate(336.000000, 33.000000) rotate(-180.000000) translate(-336.000000, -33.000000) translate(324.000000, 21.000000)">
<polygon id="Shape" fill="#666666" points="12 8 6 14 7.4 15.4 12 10.8 16.6 15.4 18 14"></polygon>
<rect id="bounds" x="-5.68434189e-14" y="-5.68434189e-14" width="24" height="24"></rect>
</g>
</g>
</g>
</g>
</g>
</svg>
```
--------------------------------------------------------------------------------
/assets/img/close.svg:
--------------------------------------------------------------------------------
```
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<svg width="14px" height="12px" viewBox="0 0 14 12" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xmlns:sketch="http://www.bohemiancoding.com/sketch/ns">
<!-- Generator: Sketch 3.5.2 (25235) - http://www.bohemiancoding.com/sketch -->
<title>Line</title>
<desc>Created with Sketch.</desc>
<defs></defs>
<g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd" sketch:type="MSPage">
<g id="AMP---video---in-line" sketch:type="MSArtboardGroup" transform="translate(-1178.000000, -29.000000)" stroke="#FFFFFF" stroke-linecap="square">
<path d="M1184.26382,35 L1179.36809,30.1042708 L1179,29.7361805 L1179.73618,29 L1180.10427,29.3680903 L1185,34.2638195 L1189.89573,29.3680903 L1190.26382,29 L1191,29.7361805 L1190.63191,30.1042708 L1185.73618,35 L1190.63191,39.8957292 L1191,40.2638195 L1190.26382,41 L1189.89573,40.6319097 L1185,35.7361805 L1180.10427,40.6319097 L1179.73618,41 L1179,40.2638195 L1179.36809,39.8957292 L1184.26382,35 Z" id="Line" sketch:type="MSShapeGroup"></path>
</g>
</g>
</svg>
```
--------------------------------------------------------------------------------
/assets/sass/pages/_about-how.scss:
--------------------------------------------------------------------------------
```scss
.about-how {
.hero {
margin: 100px auto;
max-width: 500px;
text-align: center;
}
.video {
margin: 0 auto;
max-width: 800px;
padding: 0 30px;
position: relative;
z-index: 1;
}
.points {
background: white;
margin: -350px 0 200px;
padding-top: 450px;
&::before, &::after {
content: '';
position: absolute;
}
&::before {
background: url(/static/img/latest/line_hero_back.svg) center/contain no-repeat;
height: 285px;
right: -60px;
top: -110px;
width: 285px;
z-index: 1;
}
&::after {
background: url(/static/img/latest/line_hero_front.svg) center/contain no-repeat;
height: 285px;
right: -80px;
top: -60px;
width: 285px;
z-index: -1;
}
}
@include max-screen($tablet-portrait-breakpoint) {
.wrap {
&::after {
display: none;
}
&::before {
top: -750px;
}
}
.hero {
margin-bottom: 30px;
}
.points {
background: none;
margin: 30px 0;
padding-top: 0;
&::before, &::after {
display: none;
}
}
}
}
```
--------------------------------------------------------------------------------
/assets/img/blog-icon.svg:
--------------------------------------------------------------------------------
```
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<svg width="16px" height="15px" viewBox="0 0 16 15" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xmlns:sketch="http://www.bohemiancoding.com/sketch/ns">
<!-- Generator: Sketch 3.5.2 (25235) - http://www.bohemiancoding.com/sketch -->
<title>Page 1</title>
<desc>Created with Sketch.</desc>
<defs></defs>
<g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd" sketch:type="MSPage">
<g id="AMP---3" sketch:type="MSArtboardGroup" transform="translate(-161.000000, -1403.000000)" fill="#9B9B9B">
<g id="blogGroup-9" sketch:type="MSLayerGroup" transform="translate(138.000000, 1312.000000)">
<g id="Blog-Post" transform="translate(0.000000, 58.000000)" sketch:type="MSShapeGroup">
<path d="M23,35.001 L39,35.001 L39,33 L23,33 L23,35.001 Z M23,39.001 L39,39.001 L39,37.001 L23,37.001 L23,39.001 Z M23,43.001 L39,43.001 L39,41 L23,41 L23,43.001 Z M23,47.001 L33,47.001 L33,45.001 L23,45.001 L23,47.001 Z" id="Page-1"></path>
</g>
</g>
</g>
</g>
</svg>
```
--------------------------------------------------------------------------------
/content/docs/get_started/create/[email protected]:
--------------------------------------------------------------------------------
```markdown
---
$title: Prepara tu página para la detección y la distribución
---
En algunos casos, podrías tener una versión AMP y una versión no AMP de la misma página; por ejemplo, un artículo informativo. Considera lo siguiente: Si la Búsqueda de Google encuentra la versión no AMP de esa página, *¿cómo sabe que existe una versión AMP?*
## Vinculación de páginas con<link>
Para resolver este problema, agregamos información sobre la página AMP a la página no AMP y viceversa en forma de etiquetas `<link>` en el `<head>`.
Agrega lo siguiente a la página no AMP:
[sourcecode:html]
<link rel="amphtml" href="https://www.ejemplo.com/url/al/documento/amp.html">
[/sourcecode]
Y esto a la página AMP
[sourcecode:html]
<link rel="canonical" href="https://www.ejemplo.com/url/al/documento/completo.html">
[/sourcecode]
## ¿Qué sucede si tengo una sola página?
Si solo tienes una página y es AMP, debes agregarle el vínculo canónico. Este luego simplemente apuntará a sí mismo.
[sourcecode:html]
<link rel="canonical" href="https://www.ejemplo.com/url/al/documento/amp.html">
[/sourcecode]
<a class="go-button button" href="/es/docs/get_started/create/publish.html">Continuar con el paso 6</a>
```
--------------------------------------------------------------------------------
/content/docs/get_started/login_requiring/logout.md:
--------------------------------------------------------------------------------
```markdown
---
$title: Logout
$order: 2
---
Similar to the login button, the presence of the logout button is conditionally dependent on the state of the `amp-access` component:
[sourcecode:html]
<button amp-access="loggedIn" amp-access-hide tabindex="0" on="tap:amp-access.login-sign-out" class="button-primary comment-button">Logout</button>
[/sourcecode]
When you click the Logout button, you are directed to the URL that you specified in the `amp-access` JSON configuration, as part of the login object:
[sourcecode:json]
{
"login": {
"sign-in": "https://ampbyexample.com/samples_templates/comment_section/login?rid=READER_ID&url=CANONICAL_URL",
"sign-out": "https://ampbyexample.com/samples_templates/comment_section/logout"
}
}
[/sourcecode]
Similar to the login, when the AMPByExample server receives a logout request, it uses the return URL query parameter automatically added by the AMP library and redirects to it, adding `#success=true`. By this time, you are back on the initial page; the AMPByExample cookie previously created for the login page (called `ABE_LOGGED_IN`) would be cleared at this point.
<a class="go-button button" href="/docs/get_started/login_requiring/summary.html">Continue to Step 4</a>
```
--------------------------------------------------------------------------------
/content/docs/get_started/create/[email protected]:
--------------------------------------------------------------------------------
```markdown
---
$title: Sayfanızı Keşif ve Dağıtım için Hazırlayın
---
Bazı durumlarda, aynı sayfanın hem AMP olmayan hem de AMP sürümüne sahip olmak isteyebilirsiniz; örneğin, bir haber makalesi. Bunu düşünün: Google Arama bu sayfanın AMP olmayan bir sürümünü bulursa, *bir AMP versiyonu olduğunu nasıl anlar*?
## <bağlantılı sayfaları bağlama>
Bu sorunu çözmek için, AMP olmayan sayfaya AMP sayfası ile bilgileri, AMP sayfasına ise AMP olmayan sayfa bilgilerini `<head>` içindeki `<link>` etiketi şeklinde ekleriz.
AMP olmayan sayfaya aşağıdakileri ekleyin:
[sourcecode:html]
<link rel="amphtml" href="https://www.example.com/url/to/amp/document.html">
[/sourcecode]
Ve AMP sayfasına bunu ekleyin
[sourcecode:html]
<link rel="canonical" href="https://www.example.com/url/to/full/document.html">
[/sourcecode]
## Sadece tek bir sayfam varsa ne olur?
Sadece tek bir sayfanız var ve bu sayfa bir AMP sayfasıysa, yine de standart bağlantıyı eklemeniz gerekir, bu bağlantı daha sonra yalnızca kendini gösterecektir:
[sourcecode:html]
<link rel="canonical" href="https://www.example.com/url/to/amp/document.html">
[/sourcecode]
<a class="go-button button" href="/tr/docs/get_started/create/publish.html">Adım 6 ile devam edin</a>
```
--------------------------------------------------------------------------------
/content/docs/get_started/create/prepare_for_discovery@pt_BR.md:
--------------------------------------------------------------------------------
```markdown
---
$title: Preparar sua página para descoberta e distribuição
---
Em alguns casos, você pode querer uma versão não AMP e uma versão AMP da mesma página, por exemplo, no caso de um artigo de notícia. Considere o seguinte: se a Pesquisa do Google encontrar uma versão não AMP dessa página, *como saberá que há uma versão AMP dela*?
## Páginas vinculadas com um link<>
Para solucionar esse problema, adicionamos informações sobre a página AMP na página não AMP e vice-versa, na forma de tags de `<link>` no elemento `<head>`.
Adicione o seguinte à página não AMP:
[sourcecode:html]
<link rel="amphtml" href="https://www.example.com/url/to/amp/document.html">
[/sourcecode]
Adicione isto à página AMP
[sourcecode:html]
<link rel="canonical" href="https://www.example.com/url/to/full/document.html">
[/sourcecode]
## E se eu só tiver uma página?
Se você só tiver uma página, e essa página for AMP, ainda assim deverá adicionar o link canônico a ela, mas ele simplesmente apontará para a própria página:
[sourcecode:html]
<link rel="canonical" href="https://www.example.com/url/to/amp/document.html">
[/sourcecode]
<a class="go-button button" href="/pt_br/docs/get_started/create/publish.html">Continuar para a etapa 6</a>
```
--------------------------------------------------------------------------------
/content/docs/get_started/create/presentation_layout.md:
--------------------------------------------------------------------------------
```markdown
---
$title: Modify Presentation and Layout
$order: 2
---
## Modify the presentation
AMPs are web pages; any styling to the page and its elements is done using common CSS properties. Style elements using class or element selectors in an inline stylesheet in the `<head>`, called `<style amp-custom>`:
[sourcecode:html]
<style amp-custom>
/* any custom style goes here */
body {
background-color: white;
}
amp-img {
background-color: gray;
border: 1px solid black;
}
</style>
[/sourcecode]
Every AMP page can only have a single embedded stylesheet, and there are certain selectors you’re not allowed to use. [Learn all about styling](/docs/guides/responsive/style_pages.html).
## Control the layout
AMP follows stricter rules when laying out elements on the page. On a normal HTML page, you almost exclusively use CSS to lay out elements. But for performance reasons, AMP requires all elements to have an explicit size set from the get-go.
Learn all about how AMP renders and layouts a page and how you can modify the layout in [How to Control Layout](/docs/guides/responsive/control_layout.html).
<a class="button go-button" href="/docs/get_started/create/preview_and_validate.html">Continue to Step 4</a>
```
--------------------------------------------------------------------------------
/assets/sass/_sprite_generated.scss:
--------------------------------------------------------------------------------
```scss
$icons: (
sprite: (width: 99px, height: 74px, svgPath: '/static/img/sprite.svg'),
carat: (width: 15.53px, height: 8.3px, backgroundX: -35.36px, backgroundY: -54.2px),
carat-down: (width: 16px, height: 8.3px, backgroundX: -60px, backgroundY: -43.66px),
caret-right: (width: 6.12px, height: 11.88px, backgroundX: -84px, backgroundY: -14.93px),
close: (width: 15.71px, height: 15.71px, backgroundX: -19.65px, backgroundY: -54.2px),
lang-icon: (width: 24px, height: 24px, backgroundX: -60px, backgroundY: 0px),
logo-blue-standalone: (width: 30px, height: 30px, backgroundX: -30px, backgroundY: 0px),
return: (width: 6.05px, height: 10.71px, backgroundX: -90.12px, backgroundY: -14.93px),
search: (width: 24.6px, height: 24.2px, backgroundX: 0px, backgroundY: -30px),
share: (width: 19.65px, height: 19.04px, backgroundX: 0px, backgroundY: -54.2px),
share-close: (width: 14.93px, height: 14.93px, backgroundX: -84px, backgroundY: 0px),
twitter: (width: 22.93px, height: 19.66px, backgroundX: -60px, backgroundY: -24px),
video-play: (width: 30px, height: 30px, backgroundX: 0px, backgroundY: 0px),
wordpress: (width: 24.03px, height: 24.03px, backgroundX: -24.6px, backgroundY: -30px),
);
```
--------------------------------------------------------------------------------
/content/docs/get_started/create/preview_and_validate@pt_BR.md:
--------------------------------------------------------------------------------
```markdown
---
$title: Visualizar e validar
---
Visualize a página AMP exatamente como visualizaria qualquer outro site HTML estático. Não é necessário uma etapa de compilação ou de pré-processamento. Uma das possibilidades:
- **Abra a página diretamente no navegador a partir do sistema de arquivos** (certos elementos podem não funcionar devido a uma falha de XMLHttpRequests)
- **Use um servidor da Web local, como o Apache 2 ou Nginx**.
*(Dica: Para um servidor da Web rápido, execute `python -m SimpleHTTPServer`.)*
Depois, certifique-se de que sua página AMP** seja realmente válida para AMP**, caso contrário, ela não será descoberta e distribuída por plataformas de terceiros como a Pesquisa do Google. Para validar:
1. Abra sua página no navegador.
1. Adicione "`#development=1`“ ao URL, por exemplo,`http://localhost:8000/released.amp.html#development=1`.
1. Abra o [console Chrome DevTools](https://developers.google.com/web/tools/chrome-devtools/debug/console/) e verifique se há erros de validação.
[Saiba mais sobre validação](/docs/guides/validate.html) e o que fazer quando ocorrerem erros.
<a class="go-button button" href="/pt_br/docs/get_started/create/prepare_for_discovery.html">Continuar para a etapa 5</a>
```
--------------------------------------------------------------------------------
/content/docs/get_started/create/[email protected]:
--------------------------------------------------------------------------------
```markdown
---
$title: Przygotowanie strony do wykrywania i rozpowszechniania
---
Czasami dana strona, na przykład artykuł wiadomości, potrzebna jest w wersji AMP i tradycyjnej. Rozważmy następujący przypadek: Jeśli usługa Szukaj w Google znajdzie wersję tradycyjną tej strony, *skąd będzie wiedziała, że istnieje również wersja AMP tej strony*?
## Powiązanie stron za pomocą elementu <link>
Aby rozwiązać ten problem, do każdej wersji strony dodaliśmy informacje o drugiej wersji, używając znaczników `<link>` w sekcji `<head>`.
Dodaj następujący wpis do strony w wersji tradycyjnej:
[sourcecode:html]
<link rel="amphtml" href="https://www.example.com/url/to/amp/document.html">
[/sourcecode]
A ten do strony AMP:
[sourcecode:html]
<link rel="canonical" href="https://www.example.com/url/to/full/document.html">
[/sourcecode]
## A co, jeśli jest tylko jedna strona?
Jeśli jest tylko jedna wersja strony i jest to wersja AMP, nadal konieczne jest dodanie do niej linku kanonicznego, które w takim wypadku wskaże tę samą stronę:
[sourcecode:html]
<link rel="canonical" href="https://www.example.com/url/to/amp/document.html">
[/sourcecode]
<a class="go-button button" href="/pl/docs/get_started/create/publish.html">Przejdź do kroku 6</a>
```
--------------------------------------------------------------------------------
/content/docs/get_started/create/[email protected]:
--------------------------------------------------------------------------------
```markdown
---
$title: Prévisualiser et valider
---
Prévisualisez la page AMP comme tout autre site HTML statique. Aucune étape de création ni aucun prétraitement ne sont requis. Soit :
- **Ouvrez la page directement dans le navigateur à partir du système de fichiers** (certains éléments peuvent ne pas fonctionner en raison de l'échec de XMLHttpRequests). Soit :
- **Utilisez un serveur Web local, tel qu'Apache 2 ou Nginx**.
*(Conseil: Pour un serveur Web rapide, exécutez `python -m SimpleHTTPServer`.)*
Ensuite, vérifiez que votre page AMP **est une page AMP valide**. Dans le cas contraire, elle ne pourra pas être détectée ni distribuée par des plateforme tierces telles que Google Search. Pour valider :
1. Ouvrez votre page dans votre navigateur.
1. Ajoutez « `#development=1` » à l'URL, par exemple, `http://localhost:8000/released.amp.html#development=1`.
1. Ouvrez la [console Chrome DevTools](https://developers.google.com/web/tools/chrome-devtools/debug/console/) et vérifiez les erreurs de validation.
[En savoir plus sur la validation](/docs/guides/validate.html) et la procédure à suivre en cas d'erreurs.
<a class="go-button button" href="/fr/docs/get_started/create/prepare_for_discovery.html">Continuer à l'Étape 5</a>
```
--------------------------------------------------------------------------------
/content/docs/get_started/create/prepare_for_discovery.md:
--------------------------------------------------------------------------------
```markdown
---
$title: Prepare Your Page for Discovery and Distribution
$order: 4
---
In some cases, you might want to have both a non-AMP and an AMP version of the same page, for example, a news article. Consider this: If Google Search finds the non-AMP version of that page, *how does it know there’s a "paired" AMP version of it*?
## Linking pages with `<link>`
In order to establish that a non-AMP page and an AMP page should be treated as being "paired" together, we add information about the AMP page to the non-AMP page and vice versa, in the form of `<link>` tags in the `<head>`.
Add the following to the non-AMP page:
[sourcecode:html]
<link rel="amphtml" href="https://www.example.com/url/to/amp/document.html">
[/sourcecode]
And this to the AMP page
[sourcecode:html]
<link rel="canonical" href="https://www.example.com/url/to/full/document.html">
[/sourcecode]
## What if I only have one page?
If you only have one page, and that page is an AMP page, you must still add the canonical link to it, which will then simply point to itself:
[sourcecode:html]
<link rel="canonical" href="https://www.example.com/url/to/amp/document.html">
[/sourcecode]
<a class="go-button button" href="/docs/get_started/create/publish.html">Continue to Step 6</a>
```
--------------------------------------------------------------------------------
/views/design-principles.html:
--------------------------------------------------------------------------------
```html
{% extends "/views/base.html" %}
{% set navmarkup %}
{% include "/views/partials/breadcrumb-nav.html" %}
{% endset %}
{% block main %}
{{ navmarkup|safe }}
<div class="container xl">
<div class="title">
<h1>{{_(doc.title)}}</h1>
<p class="subtitle">{{_(doc.subtitle)}}</p>
</div>
<div class="principles">
<div class="principles-col">
{% for principle in doc.principles %}
<div class="principle">
<div class="image">
<amp-img
noloading
width=150
height=150
layout=responsive
src="/static/img/about/design-principles/{{principle.icon}}">
</amp-img>
</div>
<div class="text">
<h3>{{_(principle.title)}}</h3>
<p>{{_(principle.description)|markdown|safe}}</p>
</div>
</div>
{% if loop.index0 == 3 %}
</div>
<div class="principles-col">
{% endif %}
{% endfor %}
</div>
</div>
</div>
{% with cta = doc.cta %}
{% include "/views/partials/footer-cta.html" %}
{% endwith %}
{% include "/views/partials/footer.html" %}
{% endblock %}
```
--------------------------------------------------------------------------------
/content/docs/get_started/create/[email protected]:
--------------------------------------------------------------------------------
```markdown
---
$title: Pratinjau dan Validasi
---
Pratinjau halaman AMP seperti Anda ingin mem-pratinjau situs HTML statis lainnya. Tidak ada langkah pembangunan atau prapemrosesan yang diperlukan. Gunakan salah satu cara berikut:
- **Membukanya secara langsung dalam browser dari sistem file** (elemen tertentu mungkin tidak berfungsi karena gagalnya XMLHttpRequests).
- **Menggunakan server web lokal seperti Apache 2 atau Nginx**.
*(Tip: Untuk server web yang cepat, jalankan `python -m SimpleHTTPServer`.)*
Berikutnya, pastikan bahwa halaman AMP Anda **benar-benar merupakan halaman AMP yang valid**, jika tidak maka halaman tidak akan ditemukan dan didistribusikan oleh platform pihak ketiga seperti Google Penelusuran. Untuk memvalidasi:
1. Buka halaman Anda di browser.
1. Tambahkan "`#development=1`" ke URL, misalnya, `http://localhost:8000/released.amp.html#development=1`.
1. Buka [konsol Chrome DevTools](https://developers.google.com/web/tools/chrome-devtools/debug/console/) dan periksa kesalahan validasi.
[Ketahui selengkapnya mengenai validasi](/docs/guides/validate.html), dan tindakan yang harus Anda lakukan jika menjumpai kesalahan.
<a class="go-button button" href="/id/docs/get_started/create/prepare_for_discovery.html">Lanjutkan ke Langkah 5</a>
```
--------------------------------------------------------------------------------
/content/docs/get_started/create/[email protected]:
--------------------------------------------------------------------------------
```markdown
---
$title: Anteprima e convalida
---
Visualizza l’anteprima della pagina AMP esattamente come faresti con qualsiasi altro sito HTML statico. Non sono necessarie fasi di build o di pre-elaborazione. Puoi scegliere tra:
- **Aprire la pagina direttamente nel browser dal file system** (è possibile che alcuni elementi non funzionino a causa di un errore XMLHttpRequests).
- **Usare un server web locale come Apache 2 o Nginx**.
*(Suggerimento. Per attivare rapidamente un server web esegui il comando `python -m SimpleHTTPServer`.)*
Successivamente assicurati che la pagina AMP **sia effettivamente valida**, in caso contrario non sarà individuata e distribuita da piattaforme di terzi come Ricerca Google. Per la convalida:
1. Apri la pagina nel tuo browser.
1. Aggiungi "`#development=1`" all’URL, ad esempio, `http://localhost:8000/released.amp.html#development=1`.
1. Apri la [Chrome DevTools console](https://developers.google.com/web/tools/chrome-devtools/debug/console/) e verifica se sono presenti errori di convalida.
[Consulta ulteriori informazioni sulla convalida](/docs/guides/validate.html) e scopri cosa fare se vengono rilevati errori.
<a class="go-button button" href="/it/docs/get_started/create/prepare_for_discovery.html">Vai al Passaggio 5</a>
```
--------------------------------------------------------------------------------
/content/docs/get_started/create/[email protected]:
--------------------------------------------------------------------------------
```markdown
---
$title: Preparazione della pagina per il rilevamento e la distribuzione
---
In alcuni casi potresti aver necessità di una versione AMP e non AMP della stessa pagina, ad esempio per un comunicato stampa. Considera quanto segue: Se Ricerca Google trova la versione non AMP di quella pagina, *come fa a sapere che ne esiste anche una versione AMP*?
## Collegamente delle pagine con <link>
Per risolvere questo problema aggiungiamo delle informazioni sulla pagina AMP alla pagina non AMP e viceversa, sotto forma di tag `<link>` in `<head>`.
Aggiungi quanto segue nella pagina non AMP:
[sourcecode:html]
<link rel="amphtml" href="https://www.example.com/url/to/amp/document.html">
[/sourcecode]
Aggiungi questo nella pagina AMP:
[sourcecode:html]
<link rel="canonical" href="https://www.example.com/url/to/full/document.html">
[/sourcecode]
## Cosa succede in caso di pagine in un solo formato?
Se la tua pagina è in un solo formato e stai usando una pagina AMP, devi comunque aggiungervi il link tradizionale, che a questo punto rimanda semplicemente a sé stesso:
[sourcecode:html]
<link rel="canonical" href="https://www.example.com/url/to/amp/document.html">
[/sourcecode]
<a class="go-button button" href="/it/docs/get_started/create/publish.html">Vai al Passaggio 6</a>
```
--------------------------------------------------------------------------------
/content/docs/get_started/create/[email protected]:
--------------------------------------------------------------------------------
```markdown
---
$title: Préparer votre page pour la détection et la distribution
---
Dans certains cas, vous pouvez avoir besoin de deux versions (non-AMP et AMP) de la même page. Par exemple, pour un article d'actualités. Supposons ce qui suit : Si Google Search trouve la version non-AMP de cette page, *comment sait-il qu'il en existe également une version AMP *?
## Relier les pages avec <link>
Pour résoudre ce problème, nous ajoutons des informations sur la page AMP dans la page non-AMP et vice versa, sous forme de balises `<link>` dans `<head>`.
Ajoutez ce qui suit sur la page non-AMP :
[sourcecode:html]
<link rel="amphtml" href="https://www.example.com/url/to/amp/document.html">
[/sourcecode]
Et ce qui suit sur la page AMP
[sourcecode:html]
<link rel="canonical" href="https://www.example.com/url/to/full/document.html">
[/sourcecode]
## Que se passe-t-il si je n'ai qu'une seule page ?
Si vous n'avez qu'une seule page, et que cette page est une page AMP, vous devez tout de même lui ajouter le lien canonique, qui dans ce cas pointe simplement vers elle-même :
[sourcecode:html]
<link rel="canonical" href="https://www.example.com/url/to/amp/document.html">
[/sourcecode]
<a class="go-button button" href="/fr/docs/get_started/create/publish.html">Continuer à l'Étape 6</a>
```
--------------------------------------------------------------------------------
/content/docs/get_started/create/[email protected]:
--------------------------------------------------------------------------------
```markdown
---
$title: Versión preliminar y validación
---
Accede a la versión preliminar de la página AMP como lo harías con cualquier otro sitio HTML estático. No hay pasos de compilación ni procesamientos previos obligatorios. Tienes una de las siguientes opciones:
- **Abrirla directamente en el navegador desde el sistema de archivos** (ciertos elementos podrían no funcionar debido a errores en XMLHttpRequests).
- **Usar un servidor web local como Apache 2 o Nginx**.
*(Sugerencia: Para acceder a un servidor web rápido, ejecuta `python -m SimpleHTTPServer`)*.
A continuación, asegúrate de que tu página AMP **sea válida**; de lo contrario, no podrá detectarse ni distribuirse mediante plataformas de terceros como la Búsqueda de Google. Para la validación:
1. Abre tu página en el navegador.
1. Agrega “`#development=1`” a la URL; por ejemplo, `http://localhost:8000/released.amp.html#development=1`.
1. Abre la [consola DevTools de Chrome](https://developers.google.com/web/tools/chrome-devtools/debug/console/) y busca errores de validación.
[Obtén más información acerca de la validación](/docs/guides/validate.html) y de lo que debes hacer cuando encuentres errores.
<a class="go-button button" href="/es/docs/get_started/create/prepare_for_discovery.html">Continuar con el paso 5</a>
```
--------------------------------------------------------------------------------
/assets/img/icons/any.svg:
--------------------------------------------------------------------------------
```
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<svg width="62px" height="62px" viewBox="0 0 62 62" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<!-- Generator: Sketch 39.1 (31720) - http://www.bohemiancoding.com/sketch -->
<title>AMP-Brand-Blue-Icon</title>
<desc>Created with Sketch.</desc>
<defs></defs>
<g id="amp-logo-internal-site" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
<g id="AMP-Brand-Blue-Icon" fill="#0379C4">
<path d="M41.6288667,28.1614333 L28.6243667,49.8035667 L26.2683667,49.8035667 L28.5975,35.7016667 L21.3838,35.7109667 C21.3838,35.7109667 21.3156,35.7130333 21.2835667,35.7130333 C20.6336,35.7130333 20.1076333,35.1870667 20.1076333,34.5371 C20.1076333,34.2581 20.367,33.7858667 20.367,33.7858667 L33.3291333,12.1695667 L35.7244,12.1799 L33.3363667,26.3035 L40.5872667,26.2942 C40.5872667,26.2942 40.6647667,26.2931667 40.7019667,26.2931667 C41.3519333,26.2931667 41.8779,26.8191333 41.8779,27.4691 C41.8779,27.7326 41.7745667,27.9640667 41.6278333,28.1604 L41.6288667,28.1614333 Z M31,0 C13.8787,0 0,13.8797333 0,31 C0,48.1213 13.8787,62 31,62 C48.1202667,62 62,48.1213 62,31 C62,13.8797333 48.1202667,0 31,0 L31,0 Z" id="Fill-1"></path>
</g>
</g>
</svg>
```
--------------------------------------------------------------------------------
/content/docs/get_started/create/[email protected]:
--------------------------------------------------------------------------------
```markdown
---
$title: Seite für die Auffindbarkeit und Bereitstellung vorbereiten
---
Vielleicht gibt es bei Ihnen in manchen Fällen von der gleichen Seite, zum Beispiel einem Nachrichtenartikel, sowohl eine Nicht-AMP-Version als auch eine AMP-Version. Wenn die Google-Suche nun die Nicht-AMP-Version der Seite findet, *woher weiß sie, dass es auch noch eine AMP-Version gibt?*
## Seiten mit `<link>` verknüpfen
Um dieses Problem zu lösen, fügen wir Informationen zur AMP-Seite auf der Nicht-AMP-Seite ein und umgekehrt. Dies geschieht in Form von `<link>`-Tags im `<head>`-Element.
Fügen Sie Ihrer Nicht-AMP-Seite den folgenden Code hinzu:
[sourcecode:html]
<link rel="amphtml" href="https://www.example.com/url/to/amp/document.html">
[/sourcecode]
Und diesen der AMP-Seite:
[sourcecode:html]
<link rel="canonical" href="https://www.example.com/url/to/full/document.html">
[/sourcecode]
## Was ist, wenn ich nur eine Seite habe?
Wenn Sie nur eine Seite haben und es sich dabei um eine AMP-Seite handelt, müssen Sie trotzdem den kanonischen Link hinzufügen. Dieser verweist dann einfach auf sich selbst:
[sourcecode:html]
<link rel="canonical" href="https://www.example.com/url/to/amp/document.html">
[/sourcecode]
<a class="go-button button" href="/de/docs/get_started/create/publish.html">Weiter mit Schritt 6</a>
```
--------------------------------------------------------------------------------
/content/docs/get_started/create/[email protected]:
--------------------------------------------------------------------------------
```markdown
---
$title: Menyiapkan Halaman Anda untuk Pencarian dan Distribusi
---
Dalam beberapa kasus, Anda mungkin menginginkan versi non-AMP dan AMP dari halaman yang sama, misalnya, artikel berita. Pertimbangkan ini: Jika Google Penelusuran menemukan versi non-AMP dari halaman itu, *bagaimana Google Penelusuran mengetahui bahwa ada versi AMP dari halaman itu*?
## Menautkan halaman dengan <link>
Untuk menyelesaikan masalah ini, kami menambahkan informasi tentang halaman AMP ke halaman non-AMP dan sebaliknya, dalam bentuk tag `<link>` dalam `<head>`.
Tambahkan yang berikut ini ke halaman non-AMP:
[sourcecode:html]
<link rel="amphtml" href="https://www.example.com/url/to/amp/document.html">
[/sourcecode]
Tambahkan ini ke halaman AMP
[sourcecode:html]
<link rel="canonical" href="https://www.example.com/url/to/full/document.html">
[/sourcecode]
## Bagaimana jika saya memiliki satu halaman saja?
Jika Anda hanya menautkan satu halaman, dan halaman itu adalah halaman AMP, Anda masih harus menambahkan tautan kanonis ke halaman itu, yang kemudian hanya akan menunjuk pada halaman itu sendiri:
[sourcecode:html]
<link rel="canonical" href="https://www.example.com/url/to/amp/document.html">
[/sourcecode]
<a class="go-button button" href="/id/docs/get_started/create/publish.html">Lanjutkan ke Langkah 6</a>
```
--------------------------------------------------------------------------------
/content/docs/guides/author_develop/responsive_amp/custom_fonts.md:
--------------------------------------------------------------------------------
```markdown
---
$title: Custom fonts
$order: 5
toc: true
---
[TOC]
AMP pages can’t include external stylesheets, with the exception of custom fonts.
You can embed custom fonts into your page in two ways:
1. Through a `<link>` tag (white-listed font providers only)
2. Via `@font-face` (no restrictions, all fonts allowed)
### 1. Using `<link>`
Use a `<link>` tag (usually in the head of your page), like so:
[sourcecode:html]
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Tangerine">
[/sourcecode]
The following origins are whitelisted and allowed for font serving via link tags:
* Typography.com: **https://cloud.typography.com**
* Fonts.com: **https://fast.fonts.net**
* Google Fonts: **https://fonts.googleapis.com**
* Font Awesome: **https://maxcdn.bootstrapcdn.com**
### 2. Using `@font-face`
Alternatively, you can use [`@font-face`](https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face)
within your AMP stylesheet:
[sourcecode:html]
<style amp-custom>
@font-face {
font-family: "Bitstream Vera Serif Bold";
src: url("https://somedomain.org/VeraSeBd.ttf");
}
body {
font-family: "Bitstream Vera Serif Bold", serif;
}
</style>
[/sourcecode]
{% call callout('Note', type='note') %}
Fonts included via `@font-face` must be fetched
via the HTTP or HTTPS scheme.
{% endcall %}
```
--------------------------------------------------------------------------------
/content/docs/get_started/create/[email protected]:
--------------------------------------------------------------------------------
```markdown
---
$title: Memodifikasi Presentasi dan Layout
---
## Memodifikasi presentasi
AMP adalah laman web, setiap penerapan gaya pada halaman dan elemen-elemennya dilakukan menggunakan properti CSS umum. Elemen gaya menggunakan pemilih kelas atau elemen dalam stylesheet sisipan dalam `<head>` yang disebut dengan `<style amp-custom>`:
[sourcecode:html]
<style amp-custom>
/* any custom style goes here */
body {
background-color: white;
}
amp-img {
background-color: gray;
border: 1px solid black;
}
</style>
[/sourcecode]
Setiap halaman AMP hanya bisa memiliki satu sylesheet yang disematkan, dan ada pemilih tertentu yang tidak bisa Anda gunakan. [Ketahui semua tentang penggayaan](/docs/guides/responsive/style_pages.html).
## Mengontrol layout
AMP mengikuti aturan yang lebih ketat saat melayout elemen pada halaman. Pada halaman HTML biasa, Anda hampir pasti menggunakan CSS secara eksklusif untuk melayout elemen. Namun karena alasan kinerja, AMP mewajibkan semua elemen untuk memiliki set ukuran eksplisit dari get-go.
Ketahui tentang cara AMP merender dan melayout halaman dan cara Anda bisa memodifikasi layout dalam [Cara Mengontrol Layout](/docs/guides/responsive/control_layout.html).
<a class="go-button button" href="/id/docs/get_started/create/preview_and_validate.html">Lanjutkan ke Langkah 4</a>
```
--------------------------------------------------------------------------------
/content/docs/get_started/create/[email protected]:
--------------------------------------------------------------------------------
```markdown
---
$title: In der Vorschau ansehen und validieren
---
Sie können sich Ihre AMP-Seite genau wie jede andere statische HTML-Seite in der Vorschau ansehen. Dazu ist weder ein Build-Schritt noch eine Vorverarbeitung nötig. Sie haben folgende Möglichkeiten:
- **Direkt im Browser über das Dateisystem öffnen.** Bestimmte Elemente funktionieren aufgrund von Fehlern bei XMLHttpRequests eventuell nicht.
- **Lokalen Webserver wie Apache 2 oder Nginx verwenden.**
*Tipp: Einen schnellen Webserver erhalten Sie durch Ausführen von `python -m SimpleHTTPServer`.*
Als Nächstes müssen Sie sich vergewissern, dass **Ihre AMP-Seite gültig ist**, da sie sonst von Drittanbieter-Plattformen wie der Google-Suche nicht gefunden und angezeigt werden kann. So validieren Sie Ihre AMP-Seite:
1. Öffnen Sie die Seite im Browser.
1. Fügen Sie "`#development=1`" an die URL an, also z. B. `http://localhost:8000/released.amp.html#development=1`.
1. Öffnen Sie die [Chrome DevTools-Konsole](https://developers.google.com/web/tools/chrome-devtools/debug/console/) und prüfen Sie, ob Validierungsfehler vorliegen.
</ol>
[Lesen Sie hier mehr über die Validierung](/docs/guides/validate.html) und was Sie bei Fehlern tun können.
<a class="go-button button" href="/de/docs/get_started/create/prepare_for_discovery.html">Weiter mit Schritt 5</a>
```
--------------------------------------------------------------------------------
/content/docs/get_started/create/[email protected]:
--------------------------------------------------------------------------------
```markdown
---
$title: Modificar la presentación y el diseño
---
## Modificar la presentación
Las AMP son páginas web; el diseño de estas y de sus elementos se realiza a través de propiedades CSS comunes. Da estilo a los elementos con selectores de clase o elemento en una hoja de estilo en línea en el `<head>` llamada `<style amp-custom>`:
[sourcecode:html]
<style amp-custom>
/* Cualquier estilo personalizado va aquí */
body {
background-color: white;
}
amp-img {
background-color: gray;
border: 1px solid black;
}
</style>
[/sourcecode]
Las páginas AMP pueden tener solo una hoja de estilo integrada y hay ciertos selectores que no puedes usar. [Aprende todo acerca del estilo](/docs/guides/responsive/style_pages.html).
## Controla el diseño
AMP sigue reglas estrictas al distribuir elementos en la página. En una página HTML normal, CSS se usa casi exclusivamente para distribuir elementos. Sin embargo, por motivos de rendimiento, AMP requiere que todos los elementos tengan un tamaño explícito configurado desde el principio.
Aprende todo acerca de cómo AMP representa y diseña una página y cómo puedes modificar el diseño en [Cómo controlar el diseño](/docs/guides/responsive/control_layout.html).
<a class="go-button button" href="/es/docs/get_started/create/preview_and_validate.html">Continuar con el paso 4</a>
```
--------------------------------------------------------------------------------
/content/docs/get_started/create/[email protected]:
--------------------------------------------------------------------------------
```markdown
---
$title: Podgląd i sprawdzanie poprawności
---
Podgląd strony AMP można wyświetlić tak samo jak w przypadku dowolnej innej statycznej witryny HTML. Nie ma kroku budowania, nie jest też wymagane przetwarzanie wstępne. Można:
- **Otworzyć stronę bezpośrednio w przeglądarce z systemu plików** (niektóre elementy mogą nie działać z powodu niepowodzenia żądań XMLHttpRequest).
- **Użyć lokalnego serwera internetowego takiego jak Apache 2 lub Nginx**.
*(Podpowiedź. Aby użyć prostego serwera internetowego, uruchom `python -m SimpleHTTPServer`).*
Następnie upewnij się, że dana strona AMP **jest rzeczywiście prawidłowym kodem AMP**. W przeciwnym razie strona nie będzie wykrywana i rozpowszechniana przez niezależne platformy takie jak Szukaj w Google. Aby sprawdzić poprawność:
1. Otwórz stronę w przeglądarce.
1. Dodaj parametr „`#development=1`” do adresu URL, na przykład `http://localhost:8000/released.amp.html#development=1`.
1. Otwórz [konsolę DevTools w przeglądarce Chrome](https://developers.google.com/web/tools/chrome-devtools/debug/console/) i sprawdź, czy wystąpiły błędy sprawdzania poprawności.
[Dowiedz się o sprawdzaniu poprawności](/docs/guides/validate.html) i o tym, co robić, gdy wystąpią błędy.
<a class="go-button button" href="/pl/docs/get_started/create/prepare_for_discovery.html">Przejdź do kroku 5</a>
```
--------------------------------------------------------------------------------
/content/docs/reference/components/_blueprint.yaml:
--------------------------------------------------------------------------------
```yaml
$view: /views/doc.html
$path: /docs/reference/components/{base}.html
$localization:
path: /{locale}/docs/reference/components/{base}.html
$title@: AMP components
custom_children:
- title@: Ads & Analytics
href: /content/docs/reference/components/ads-analytics/amp-pixel.md
collection: /content/docs/reference/components/ads-analytics
- title@: Dynamic Content
href: /content/docs/reference/components/dynamic-content/amp-access-laterpay.md
collection: /content/docs/reference/components/dynamic-content
- title@: Layout
href: /content/docs/reference/components/layout/amp-accordion.md
collection: /content/docs/reference/components/layout
- title@: Media
href: /content/docs/reference/components/media/amp-img.md
collection: /content/docs/reference/components/media
- title@: Presentation
href: /content/docs/reference/components/presentation/amp-animation.md
collection: /content/docs/reference/components/presentation
- title@: Social
href: /content/docs/reference/components/social/amp-facebook.md
collection: /content/docs/reference/components/social
navigation:
prev:
section: true
title@: Guides
href: /content/docs/guides/author_develop/responsive_amp.md
next:
subtitle@: Next Reference
title@: AMP HTML Specification
href: /content/docs/reference/spec.md
```
--------------------------------------------------------------------------------
/assets/sass/_toc.scss:
--------------------------------------------------------------------------------
```scss
.toc {
background: $color-white;
box-shadow: 0 3px 20px 0 rgba(0, 0, 0, .075);
box-sizing: border-box;
position: fixed;
right: 0;
top: $header-height;
bottom: 0;
padding: 50px 20px;
overflow: auto;
width: 200px;
&::before {
@extend %text-label;
color: $color-ampblue;
content: 'Contents';
}
ul,
ol {
list-style: none;
margin: 0 auto;
.main .content & {
margin-left: 0;
}
}
li {
margin: 15px 0;
ul {
margin-left: 10px;
.main .content & {
margin-left: 10px;
}
a {
color: $color-grey-md;
}
}
}
a {
@extend %break;
color: $color-black-95;
display: block;
position: relative;
text-transform: none;
&::before {
display: none;
}
&:hover,
&.active {
color: $color-ampblue;
&::before {
background: $gradient-med;
bottom: -5px;
content: '';
height: 1px;
left: 0;
position: absolute;
right: 0;
}
code {
background: transparent;
color: $color-ampblue;
}
}
code {
border: 0;
padding: 0;
&::before {
display: none;
}
}
}
}
.rtl .toc {
left: 0;
right: auto;
}
@include max-screen($toc-breakpoint) {
.toc {
display: none;
}
}
```
--------------------------------------------------------------------------------
/content/docs/get_started/create/presentation_layout@pt_BR.md:
--------------------------------------------------------------------------------
```markdown
---
$title: Modificar a apresentação e o layout
---
## Modificar a apresentação
AMPs são páginas da Web; qualquer estilo adicionado à página e a seus elementos é feito usando propriedades CSS comuns. Adicione estilos aos elementos usando os seletores de classe ou elemento em uma folha de estilo do `<head>`, que se chama `<style amp-custom>`:
[sourcecode:html]
<style amp-custom>
/* any custom style goes here */
body {
background-color: white;
}
amp-img {
background-color: gray;
border: 1px solid black;
}
</style>
[/sourcecode]
Cada página AMP pode ter apenas uma folha de estilo incorporada e há certos seletores que você não tem permissão para usar. [Saiba tudo sobre estilos](/docs/guides/responsive/style_pages.html).
## Controlar o layout
O AMP segue regras mais restritas para o layout dos elementos na página. Em uma página HTML normal, você usa CSS quase que exclusivamente para criar o layout. No entanto, por razões de desempenho, o AMP exige que todos os elementos tenham um conjunto de tamanhos explícito desde o início.
Saiba mais sobre como o AMP renderiza e faz o layout de uma página e como você pode modificá-lo em [Como controlar o layout](/docs/guides/responsive/control_layout.html).
<a class="go-button button" href="/pt_br/docs/get_started/create/preview_and_validate.html">Continuar para a etapa 4</a>
```
--------------------------------------------------------------------------------
/assets/img/about/who-use-amp/amp-ads/lines_bottom2.svg:
--------------------------------------------------------------------------------
```
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 325.31 303.48"><defs><style>.cls-1,.cls-2,.cls-3{fill:none;stroke-miterlimit:10;stroke-width:9px;}.cls-1{stroke:url(#linear-gradient);}.cls-2{stroke:url(#linear-gradient-2);}.cls-3{stroke:url(#linear-gradient-3);}</style><linearGradient id="linear-gradient" x1="31.67" y1="93.91" x2="286.51" y2="93.91" gradientUnits="userSpaceOnUse"><stop offset="0" stop-color="#1c79bd"/><stop offset="0.5" stop-color="#0382ff"/><stop offset="1" stop-color="#0dd0ff"/></linearGradient><linearGradient id="linear-gradient-2" x1="1915.96" y1="-693.94" x2="2200.88" y2="-693.94" gradientTransform="matrix(0.99, 0.16, -0.16, 0.99, -1981.08, 535.75)" xlink:href="#linear-gradient"/><linearGradient id="linear-gradient-3" x1="6833.64" y1="-2889.93" x2="7048.26" y2="-2889.93" gradientTransform="translate(7064.72 -2707.48) rotate(180)" gradientUnits="userSpaceOnUse"><stop offset="0" stop-color="#fff"/><stop offset="0.5" stop-color="#0dd0ff"/><stop offset="1" stop-color="#0dd0ff"/></linearGradient></defs><title>lines_bottom2</title><g id="Layer_2" data-name="Layer 2"><g id="Art"><line class="cls-1" x1="283.87" y1="3.65" x2="34.3" y2="184.18"/><line class="cls-2" x1="322.69" y1="70.15" x2="2.62" y2="299.82"/><line class="cls-3" x1="19.09" y1="257.68" x2="228.46" y2="107.21"/></g></g></svg>
```
--------------------------------------------------------------------------------
/assets/sass/pages/_events.scss:
--------------------------------------------------------------------------------
```scss
.latest-events {
.hero {
padding-bottom: 75px;
text-align: center;
amp-img {
display: inline-block;
margin-bottom: 5px;
}
}
.label {
@extend %text-label;
border-bottom: solid 2px $color-grey-lt;
color: $color-ampblue;
padding-bottom: 25px;
}
.upcoming,
.past {
margin-bottom: 60px;
.post-item {
&:last-of-type {
margin-bottom: 0;
}
}
.no-upcoming {
background: $gradient-med-faded;
margin: 40px 0 80px 0;
padding: 40px 65px 60px 65px;
@include max-screen($tablet-portrait-breakpoint) {
padding: 20px 25px 35px 25px;
}
amp-img {
display: inline-block;
vertical-align: middle;
}
i-amp-sizer {
width: 31px;
}
.empty-label {
color: $color-ampblue;
display: inline-block;
margin-left: .6em;
}
.empty-text a {
font-size: 16px;
font-weight: 300;
line-height: 26px;
padding-bottom: 1px;
text-transform: none;
@include max-screen($mobile-breakpoint) {
font-size: 14px;
}
&::after {
background: $gradient-bold;
bottom: -1px;
content: '';
height: 1px;
left: 0;
position: absolute;
right: 0;
}
}
}
}
}
```
--------------------------------------------------------------------------------
/content/docs/get_started/create/[email protected]:
--------------------------------------------------------------------------------
```markdown
---
$title: Modyfikowanie prezentacji i układu
---
## Modyfikowanie prezentacji
Strony AMP to strony internetowe; nadawanie stylu stronie i jej elementom odbywa się przy użyciu typowych właściwości CSS. Można nadawać elementom styl przy użyciu selektorów klas lub elementów w arkuszu stylów wstawionym w sekcji `<head>` nazywanym `<style amp-custom>`:
[sourcecode:html]
<style amp-custom>
/* any custom style goes here */
body {
background-color: white;
}
amp-img {
background-color: gray;
border: 1px solid black;
}
</style>
[/sourcecode]
Każda strona AMP może mieć tylko jeden umieszczony arkusz stylów, a niektórych selektorów nie można używać. [Dowiedz się więcej o stosowaniu stylów](/docs/guides/responsive/style_pages.html).
## Sterowanie układem
W kwestii rozmieszczania elementów na stronie w AMP obowiązują bardziej rygorystyczne reguły. Na normalnej stronie HTML do rozmieszczania elementów używa się niemal wyłącznie CSS. Jednak ze względu na wydajność AMP wymaga, aby wszystkie elementy miały od początku ustawiony jawny rozmiar.
Wszystkie informacje na temat sposobu renderowania stron AMP i układów strony oraz możliwości modyfikacji układu można znaleźć w części [Jak sterować układem](/docs/guides/responsive/control_layout.html).
<a class="go-button button" href="/pl/docs/get_started/create/preview_and_validate.html">Przejdź do kroku 4</a>
```
--------------------------------------------------------------------------------
/content/docs/get_started/create/[email protected]:
--------------------------------------------------------------------------------
```markdown
---
$title: Stil und Layout anpassen
---
## Stil anpassen
AMPs sind Webseiten, das heißt, der Stil der Seite und ihrer Elemente wird mithilfe allgemeiner CSS-Eigenschaften bearbeitet. Elemente mit Klassen- oder Elementselektoren können Sie in einem Inline-Stylesheet innerhalb des `<head>`-Elements anpassen. Dieses Stylesheet heißt `<style amp-custom>`:
[sourcecode:html]
<style amp-custom>
/* any custom style goes here */
body {
background-color: white;
}
amp-img {
background-color: gray;
border: 1px solid black;
}
</style>
[/sourcecode]
Jede AMP-Seite darf nur über ein einziges eingebettetes Stylesheet verfügen und bestimmte Selektoren dürfen nicht verwendet werden. [Weitere Informationen zu Stylesheets](/docs/guides/responsive/style_pages.html)
## Layout anpassen
Für das Layout von Elementen auf der AMP-Seite gelten strengere Regeln. Auf einer normalen HTML-Seite verwenden Sie für das Layout von Elementen fast ausschließlich CSS. Aus Leistungsgründen müssen jedoch bei AMP alle Elemente von Anfang an eine eindeutige Größe besitzen.
Mehr über das Rendering und Layout von AMP-Seiten und darüber, wie Sie das Layout bearbeiten können, erfahren Sie [im Artikel zu den unterstützten Layouts](/docs/guides/responsive/control_layout.html).
<a class="button go-button" href="/de/docs/get_started/create/preview_and_validate.html">Weiter mit Schritt 4</a>
```
--------------------------------------------------------------------------------
/content/docs/get_started/create/[email protected]:
--------------------------------------------------------------------------------
```markdown
---
$title: Modifica di presentazione e layout
---
## Modifica della presentazione
Le pagine AMP sono pagine web; l’applicazione di stili alla pagina e ai suoi elementi viene effettuata tramite proprietà CSS comuni. Definisci gli stili degli elementi tramite selettori di classi o elementi in un foglio di stile incorporato nel tag `<head>`, denominato `<style amp-custom>`:
[sourcecode:html]
<style amp-custom>
/* any custom style goes here */
body {
background-color: white;
}
amp-img {
background-color: gray;
border: 1px solid black;
}
</style>
[/sourcecode]
Ciascuna pagina AMP può avere solamente un foglio di stile incorporato e l’uso di alcuni selettori non è consentito. [Scopri tutte le informazioni utili sullo stile](/docs/guides/responsive/style_pages.html).
## Controllo del layout
AMP segue regole più severe per il layout degli elementi nella pagina. In una normale pagina HTML, per il layout degli elementi utilizzi quasi esclusivamente CSS. Tuttavia, per questioni legate alle prestazioni, AMP impone in partenza un limite esplicito per tutti gli elementi.
Scopri in che modo viene eseguito il rendering e il layout di una pagina in AMP e come fare per modificare il layout nella sezione [Come controllare il layout](/docs/guides/responsive/control_layout.html).
<a class="go-button button" href="/it/docs/get_started/create/preview_and_validate.html">Vai al Passaggio 4</a>
```
--------------------------------------------------------------------------------
/assets/img/latest/line_hero_back.svg:
--------------------------------------------------------------------------------
```
<?xml version="1.0" encoding="utf-8"?>
<!-- Generator: Adobe Illustrator 21.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0) -->
<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
viewBox="0 0 285 285" style="enable-background:new 0 0 285 285;" xml:space="preserve">
<style type="text/css">
.st0{fill:none;stroke:url(#SVGID_1_);stroke-width:9;stroke-miterlimit:10;}
.st1{fill:none;stroke:url(#SVGID_2_);stroke-width:9;stroke-miterlimit:10;}
</style>
<g>
<g id="Art">
<linearGradient id="SVGID_1_" gradientUnits="userSpaceOnUse" x1="16070.3398" y1="10204.2832" x2="16316.0039" y2="10204.2832" gradientTransform="matrix(-0.99 -0.16 0.16 -0.99 14467.0703 12853.3408)">
<stop offset="0" style="stop-color:#1C79C0"/>
<stop offset="0.5" style="stop-color:#0385FF"/>
<stop offset="1" style="stop-color:#0DD3FF"/>
</linearGradient>
<line class="st0" x1="5" y1="270.8" x2="280" y2="73.5"/>
<linearGradient id="SVGID_2_" gradientUnits="userSpaceOnUse" x1="15744.8291" y1="1614.5452" x2="15907.0361" y2="1614.5452" gradientTransform="matrix(-0.99 -0.16 0.16 -0.99 15538.6807 4201.2803)">
<stop offset="0" style="stop-color:#1C79C0"/>
<stop offset="0.5" style="stop-color:#0385FF"/>
<stop offset="1" style="stop-color:#0DD3FF"/>
</linearGradient>
<line class="st1" x1="89.4" y1="143" x2="268.5" y2="14.5"/>
</g>
</g>
</svg>
```
--------------------------------------------------------------------------------
/assets/img/about/overview/lines3.svg:
--------------------------------------------------------------------------------
```
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 563.21 363.22"><defs><style>.cls-1,.cls-2,.cls-3{fill:none;stroke-miterlimit:10;stroke-width:9px;}.cls-1{stroke:url(#linear-gradient);}.cls-2{stroke:url(#linear-gradient-2);}.cls-3{stroke:url(#linear-gradient-3);}</style><linearGradient id="linear-gradient" x1="-24507.48" y1="2574.68" x2="-24205.25" y2="2574.68" gradientTransform="translate(24822.71 1809.12) rotate(9.97)" gradientUnits="userSpaceOnUse"><stop offset="0" stop-color="#29d2fc"/><stop offset="0.5" stop-color="#1987fa"/><stop offset="1" stop-color="#247bbd"/></linearGradient><linearGradient id="linear-gradient-2" x1="13125.13" y1="15544.69" x2="13399.4" y2="15544.69" gradientTransform="matrix(-1, 0, 0, -1, 13561.86, 15649.68)" xlink:href="#linear-gradient"/><linearGradient id="linear-gradient-3" x1="15653.75" y1="11191.39" x2="15959.72" y2="11191.39" gradientTransform="matrix(0.99, 0.16, -0.16, 0.99, -13627.37, -13352.94)" gradientUnits="userSpaceOnUse"><stop offset="0" stop-color="#29d2fc"/><stop offset="0.5" stop-color="#1987fa"/><stop offset="1" stop-color="#fff"/></linearGradient></defs><title>lines3</title><g id="Layer_2" data-name="Layer 2"><g id="Art"><line class="cls-1" x1="216.04" y1="255.42" x2="560.56" y2="3.63"/><line class="cls-2" x1="141.48" y1="224.24" x2="410.12" y2="26.33"/><line class="cls-3" x1="347.17" y1="107.81" x2="2.66" y2="359.59"/></g></g></svg>
```
--------------------------------------------------------------------------------
/assets/img/about/overview/herolines2.svg:
--------------------------------------------------------------------------------
```
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 358.79 327.39"><defs><style>.cls-1,.cls-2,.cls-3{fill:none;stroke-miterlimit:10;stroke-width:9px;}.cls-1{stroke:url(#linear-gradient);}.cls-2{stroke:url(#linear-gradient-2);}.cls-3{stroke:url(#linear-gradient-3);}</style><linearGradient id="linear-gradient" x1="5081.7" y1="2625.25" x2="5366.62" y2="2625.25" gradientTransform="matrix(0.99, 0.16, -0.16, 0.99, -4541.8, -3306.45)" gradientUnits="userSpaceOnUse"><stop offset="0" stop-color="#fff"/><stop offset="0.5" stop-color="#0dd6ff"/><stop offset="1" stop-color="#0dd6ff"/></linearGradient><linearGradient id="linear-gradient-2" x1="-15754.96" y1="18564.84" x2="-15470.04" y2="18564.84" gradientTransform="matrix(-0.99, -0.16, 0.16, -0.99, -18212.94, 16028.12)" gradientUnits="userSpaceOnUse"><stop offset="0" stop-color="#1c79c3"/><stop offset="0.5" stop-color="#0388ff"/><stop offset="1" stop-color="#0dd6ff"/></linearGradient><linearGradient id="linear-gradient-3" x1="11475.98" y1="4206.83" x2="11690.6" y2="4206.83" gradientTransform="translate(-11446.27 -3927.44) rotate(-0.15)" xlink:href="#linear-gradient"/></defs><title>herolines2</title><g id="Layer_2" data-name="Layer 2"><g id="Art"><line class="cls-1" x1="356.16" y1="3.65" x2="36.72" y2="234.18"/><line class="cls-2" x1="2.63" y1="308.15" x2="322.08" y2="77.62"/><line class="cls-3" x1="252.82" y1="172.71" x2="43.85" y2="323.74"/></g></g></svg>
```
--------------------------------------------------------------------------------
/assets/img/latest/icon_audience.svg:
--------------------------------------------------------------------------------
```
<?xml version="1.0" encoding="utf-8"?>
<!-- Generator: Adobe Illustrator 21.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0) -->
<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
viewBox="0 0 15 15" style="enable-background:new 0 0 15 15;" xml:space="preserve">
<style type="text/css">
.st0{fill:none;stroke:url(#SVGID_1_);stroke-linejoin:round;}
.st1{fill:none;stroke:url(#SVGID_2_);stroke-miterlimit:10;}
</style>
<symbol id="New_Symbol_2" viewBox="-5.5 -5.7 11.1 11.4">
<linearGradient id="SVGID_1_" gradientUnits="userSpaceOnUse" x1="-5.53" y1="2.695" x2="5.53" y2="2.695">
<stop offset="0" style="stop-color:#1C79C4"/>
<stop offset="0.51" style="stop-color:#0389FF"/>
<stop offset="1" style="stop-color:#0DD7FF"/>
</linearGradient>
<path class="st0" d="M5,5.2H-5c0-2.8,2.3-5,5-5S5,2.4,5,5.2z"/>
<linearGradient id="SVGID_2_" gradientUnits="userSpaceOnUse" x1="-3.19" y1="-2.52" x2="3.2" y2="-2.52">
<stop offset="0" style="stop-color:#1C79C4"/>
<stop offset="0.51" style="stop-color:#0389FF"/>
<stop offset="1" style="stop-color:#0DD7FF"/>
</linearGradient>
<circle class="st1" cx="0" cy="-2.5" r="2.7"/>
</symbol>
<title>icon_audience</title>
<g>
<g id="Art">
<use xlink:href="#New_Symbol_2" width="11.1" height="11.4" id="New_Symbol_2-3" x="-5.5" y="-5.7" transform="matrix(1 0 0 1 7.5 7.5)" style="overflow:visible;"/>
</g>
</g>
</svg>
```
--------------------------------------------------------------------------------
/views/partials/nav.html:
--------------------------------------------------------------------------------
```html
{% set usedDoc = usedDoc or doc %}
{% macro render_item(item) -%}
{% set sub_collection = g.collection(item.collection.pod_path + '/' + item.base) %}
{% set open = sub_collection.pod_path in usedDoc.pod_path[:-3] %}
{% if doc == item %}
<li class="current">
<span>{{_(item.title)}}</span>
{% else %}
<li>
<a href="{{item.goto or item.url.path}}"{% if item.goto %} class="external"{% endif %}>{{_(item.title)}}</a>
{% endif %}
{% if open and sub_collection.exists %}
{{ render_children(item, sub_collection.docs(locale=usedDoc.locale)) }}
{% endif %}
</li>
{% endmacro %}
{% macro tag(item) -%}
{{"ol" if item.numbered else "ul"}}
{%- endmacro %}
{% macro render_children(item, docs) -%}
<{{tag(item)}}>
{% for child in docs %}
{{render_item(child)}}
{% endfor %}
</{{tag(item)}}>
{%- endmacro %}
<nav{% if flat %} class="flat"{% endif %}>
{% if flat %}
<ul>
<li>
<h2>{{_(usedDoc.collection.title)}}</h2>
<ul>
{% for item in usedDoc.collection.docs(recursive=false, locale=usedDoc.locale) %}
{{render_item(item)}}
{% endfor %}
</ul>
</li>
</ul>
{% else %}
<ul>
{% for collection in g.collection('docs').collections() %}
<li>
<h2>{{_(collection.title)}}</h2>
<ul>
{% for item in collection.docs(recursive=false, locale=doc.locale) %}
{{render_item(item)}}
{% endfor %}
</ul>
</li>
{% endfor %}
</ul>
{% endif %}
</nav>
```
--------------------------------------------------------------------------------
/content/docs/get_started/create/[email protected]:
--------------------------------------------------------------------------------
```markdown
---
$title: Modifier la présentation et la disposition
---
## Modifier la présentation
Les pages AMP sont des pages Web ; toute application de style sur la page et sur ses éléments est réalisée à l'aide de propriétés CSS communes. Vous pouvez appliquer un style aux éléments à l'aide de sélecteurs de classe ou d'élément dans une feuille de style en ligne au sein de l'en-tête (`<head>`), appelée `<style amp-custom>` :
[sourcecode:html]
<style amp-custom>
/* any custom style goes here */
body {
background-color: white;
}
amp-img {
background-color: gray;
border: 1px solid black;
}
</style>
[/sourcecode]
Chaque page AMP peut intégrer une seule feuille de style uniquement et l'utilisation de certains sélecteurs n'est pas autorisée. [Tout savoir sur les styles](/docs/guides/responsive/style_pages.html).
## Contrôler la disposition
AMP applique des règles strictes en matière de disposition des éléments sur la page. Sur une page HTML standard, vous utilisez presque exclusivement le style CSS pour disposer les éléments. Mais pour des performances optimales, AMP nécessite de définir dès le départ une taille explicite pour tous les éléments.
Découvrez le rendu et la présentation d'une page AMP et comment vous pouvez modifier la disposition dans [Comment contrôler la disposition](/docs/guides/responsive/control_layout.html).
<a class="go-button button" href="/fr/docs/get_started/create/preview_and_validate.html">Continuer à l'Étape 4</a>
```
--------------------------------------------------------------------------------
/assets/img/latest/icon_location.svg:
--------------------------------------------------------------------------------
```
<?xml version="1.0" encoding="utf-8"?>
<!-- Generator: Adobe Illustrator 21.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0) -->
<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
viewBox="0 0 15 15" style="enable-background:new 0 0 15 15;" xml:space="preserve">
<style type="text/css">
.st0{fill:none;stroke:url(#SVGID_1_);stroke-linejoin:round;}
.st1{fill:none;stroke:url(#SVGID_2_);stroke-miterlimit:10;}
</style>
<symbol id="New_Symbol_1" viewBox="-4.4 -6.3 8.8 12.5">
<linearGradient id="SVGID_1_" gradientUnits="userSpaceOnUse" x1="-4.405" y1="0" x2="4.405" y2="0">
<stop offset="0" style="stop-color:#1C79C4"/>
<stop offset="0.51" style="stop-color:#0389FF"/>
<stop offset="1" style="stop-color:#0DD7FF"/>
</linearGradient>
<path class="st0" d="M3.9-1.8C3.9,1.8,0,5.8,0,5.8s-3.9-4.6-3.9-7.6C-3.9-4-2.2-5.8,0-5.8S3.9-4,3.9-1.8z"/>
<linearGradient id="SVGID_2_" gradientUnits="userSpaceOnUse" x1="-1.995" y1="-1.8475" x2="1.995" y2="-1.8475">
<stop offset="0" style="stop-color:#1C79C4"/>
<stop offset="0.51" style="stop-color:#0389FF"/>
<stop offset="1" style="stop-color:#0DD7FF"/>
</linearGradient>
<circle class="st1" cx="0" cy="-1.8" r="1.5"/>
</symbol>
<title>icon_location</title>
<g>
<g id="Art">
<use xlink:href="#New_Symbol_1" width="8.8" height="12.5" x="-4.4" y="-6.3" transform="matrix(1.08 0 0 1.08 7.4874 7.4762)" style="overflow:visible;"/>
</g>
</g>
</svg>
```
--------------------------------------------------------------------------------
/assets/sass/_callouts.scss:
--------------------------------------------------------------------------------
```scss
aside {
background: #eff9fc;
display: block;
font-size: 14px;
line-height: 24px;
margin: 16px 0;
padding: 24px 24px 24px 80px;
position: relative;
strong {
color: $color-brightblue;
text-transform: uppercase;
}
code {
font-size: 13px;
}
&::before {
float: left;
word-wrap: normal;
white-space: nowrap;
margin-left: -36px;
content: '';
height: 70px;
left: 44px;
position: absolute;
top: 50%;
transform: translateY(-50%);
width: 70px;
}
&.note {
&::before {
background: url(/static/img/docs/icon_note.svg) center/cover no-repeat;
}
}
&.caution {
background: #fff6f6;
strong {
color: #ff5252;
}
&::before {
background: url(/static/img/docs/icon_important.svg) center/cover no-repeat;
}
}
&.warning {
background: #fff6f6;
strong {
color: #ff5252;
}
&::before {
background: url(/static/img/docs/icon_important.svg) center/cover no-repeat;
}
}
&.success {
background-color: #f2fff8;
strong {
color: #00e676;
}
&::before {
background: url(/static/img/docs/icon_tip.svg) center/cover no-repeat;
top: 45%;
}
}
&.read {
background-color: #fffcef;
strong {
color: #edc10a;
}
&::before {
background: url(/static/img/docs/icon_read.svg) center/cover no-repeat;
}
}
}
.rtl aside {
padding: 24px 80px 24px 24px;
&::before {
left: auto;
margin: 0 -36px 0 0;
right: 44px;
}
}
```
--------------------------------------------------------------------------------
/assets/img/about/who-use-amp/adtech/lines.svg:
--------------------------------------------------------------------------------
```
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 410.35 259.51"><defs><style>.cls-1{isolation:isolate;}.cls-2{mix-blend-mode:multiply;}.cls-3,.cls-4,.cls-5{fill:none;stroke-miterlimit:10;stroke-width:9px;}.cls-3{stroke:url(#linear-gradient);}.cls-4{stroke:url(#linear-gradient-2);}.cls-5{stroke:url(#linear-gradient-3);}</style><linearGradient id="linear-gradient" x1="6119.59" y1="-6234.66" x2="6412.19" y2="-6234.66" gradientTransform="matrix(-0.99, -0.16, 0.16, -0.99, 7361.51, -4997.55)" gradientUnits="userSpaceOnUse"><stop offset="0" stop-color="#1c79bd"/><stop offset="0.5" stop-color="#0382ff"/><stop offset="1" stop-color="#0dd0ff"/></linearGradient><linearGradient id="linear-gradient-2" x1="13196.37" y1="-11327.94" x2="13357.44" y2="-11327.94" gradientTransform="matrix(0.99, 0.16, -0.16, 0.99, -14769.29, 9126.48)" xlink:href="#linear-gradient"/><linearGradient id="linear-gradient-3" x1="3406.45" y1="5843.93" x2="3584.22" y2="5843.93" gradientTransform="translate(3816.81 5909.58) rotate(180)" gradientUnits="userSpaceOnUse"><stop offset="0" stop-color="#fff" stop-opacity="0"/><stop offset="0.5" stop-color="#0dd0ff"/><stop offset="1" stop-color="#0dd0ff"/></linearGradient></defs><title>lines</title><g class="cls-1"><g id="Layer_2" data-name="Layer 2"><g id="Art"><g class="cls-2"><line class="cls-3" x1="2.62" y1="255.85" x2="331.51" y2="19.85"/><line class="cls-4" x1="258.54" y1="39.06" x2="80.79" y2="166.61"/></g><line class="cls-5" x1="235.22" y1="127.63" x2="407.73" y2="3.65"/></g></g></g></svg>
```
--------------------------------------------------------------------------------
/assets/img/about/who-use-amp/amp-ads/lines.svg:
--------------------------------------------------------------------------------
```
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 410.35 259.51"><defs><style>.cls-1{isolation:isolate;}.cls-2{mix-blend-mode:multiply;}.cls-3,.cls-4,.cls-5{fill:none;stroke-miterlimit:10;stroke-width:9px;}.cls-3{stroke:url(#linear-gradient);}.cls-4{stroke:url(#linear-gradient-2);}.cls-5{stroke:url(#linear-gradient-3);}</style><linearGradient id="linear-gradient" x1="1842.38" y1="1440.65" x2="2134.98" y2="1440.65" gradientTransform="matrix(-0.99, -0.16, 0.16, -0.99, 1895.65, 1882.07)" gradientUnits="userSpaceOnUse"><stop offset="0" stop-color="#1c79bd"/><stop offset="0.5" stop-color="#0382ff"/><stop offset="1" stop-color="#0dd0ff"/></linearGradient><linearGradient id="linear-gradient-2" x1="12569.56" y1="-11677.24" x2="12730.62" y2="-11677.24" gradientTransform="matrix(0.99, 0.16, -0.16, 0.99, -14207.45, 9572.85)" xlink:href="#linear-gradient"/><linearGradient id="linear-gradient-3" x1="-1497.57" y1="13169.93" x2="-1319.8" y2="13169.93" gradientTransform="translate(-1087.21 13235.58) rotate(180)" gradientUnits="userSpaceOnUse"><stop offset="0" stop-color="#fff" stop-opacity="0"/><stop offset="0.5" stop-color="#0dd0ff"/><stop offset="1" stop-color="#0dd0ff"/></linearGradient></defs><title>lines</title><g class="cls-1"><g id="Layer_2" data-name="Layer 2"><g id="Art"><g class="cls-2"><line class="cls-3" x1="2.62" y1="255.85" x2="331.51" y2="19.85"/><line class="cls-4" x1="258.54" y1="39.06" x2="80.79" y2="166.61"/></g><line class="cls-5" x1="235.22" y1="127.63" x2="407.73" y2="3.65"/></g></g></g></svg>
```
--------------------------------------------------------------------------------
/content/latest/list-event.html:
--------------------------------------------------------------------------------
```html
---
$title@: Events
$path: /latest/event/
$parent: /content/latest/latest.html
$localization:
path: /{locale}/latest/event/
class: latest-events
---
{% set events = g.doc('/content/includes/events.yaml', locale=doc.locale) %}
<section class="hero">
<amp-img
noloading
height=100
width=100
src="{{events.hero.hero_icon}}">
</amp-img>
<h1 class="title">{{_(events.hero.title)}}</h1>
</section>
<section class="upcoming">
<div class="label">{{_(events.upcoming.label)}}</div>
{% if events.upcoming_events is sequence %}
{% for post in events.upcoming_events %}
{% with past = false, meta = false %}
{% include "/views/partials/post-item.html" %}
{% endwith %}
{% endfor %}
{% else %}
<div class="no-upcoming">
<amp-img
noloading
height=62
width=62
src="{{events.upcoming.empty_icon}}">
</amp-img>
<h4 class="empty-label">{{_(events.upcoming.empty_title)}}</h4>
<p class="empty-text small underlined">{{_(events.upcoming.empty_text)|safe}}</p>
</div>
{% endif %}
</section>
{% if events.past_events %}
<section class="past">
<div class="label">{{_(events.past.label)}}</div>
{% for post in events.past_events %}
{% if loop.index <= 3 %}
{% with past = true, meta = false %}
{% include "/views/partials/post-item.html" %}
{% endwith %}
{% endif %}
{% endfor %}
<a class="underlined cta" href="{{g.doc('/content/latest/list-past-event.html').url.path}}">{{_(events.past.cta)}}</a>
</section>
{% endif %}
```
--------------------------------------------------------------------------------
/scripts/update_tweets.js:
--------------------------------------------------------------------------------
```javascript
#!/usr/bin/env node
// dependencies
var fs = require('fs');
var moment = require('moment');
// config
var yamlPath = '../content/includes/tweets.yaml';
var count = 5;
// import RSS feed from blog with feed parser
var FeedParser = require('feedparser');
var request = require('request');
// setup feed parser
var req = request('https://queryfeed.net/tw?q=%40amphtml');
var feedparser = new FeedParser();
var body = 'tweets:\n';
req.on('response', function (res) {
var stream = this;
if (res.statusCode != 200) return this.emit('error', new Error('Bad status code'));
stream.pipe(feedparser);
});
feedparser.on('end', function() {
fs.writeFileSync(yamlPath, body);
console.log("Tweets successfully updated.");
});
feedparser.on('readable', function () {
var item;
while (item = this.read()) {
// write into the body for the homepage excerpt file
if (--count >= 0) {
var author = item.title.match(/^\@([^\s]+) (.+)/);
var tweetId = item.link.substr(20).split('/')[2];
body += `
- origin_name: ${ author[2] }
origin_id: ${ author[1] }
origin_href: https://twitter.com/${ author[1] }`;
if (author[1] !== 'AMPhtml') {
body += `
retweet_id: AMPhtml
retweet_href: https://twitter.com/amphtml`;
}
var description = item.description
.replace(/\<img class=\"Emoji[^\>]+alt=\"([^\"]+)\"[^\>]+\>/g, "$1")
.replace(/\n/g, '');
body += `
tweet_id: ${ tweetId }
date_data: ${ moment(item.date).format() }
date: ${ moment(item.date).format("MMMM D, YYYY") }
text: >
${ description }
`;
}
}
});
```
--------------------------------------------------------------------------------
/content/docs/reference/[email protected]:
--------------------------------------------------------------------------------
```markdown
---
$title: Komponen Eksperimental
---
[Komponen eksperimental AMP](https://github.com/ampproject/amphtml/tree/master/tools/experiments)
adalah fitur rilis yang masih belum siap untuk penggunaan luas, jadi komponen ini dilindungi dengan status eksperimental.
Pengembang dan pengguna dapat ikut serta menggunakan fitur ini sebelum dirilis sepenuhnya.
Namun perlu diperhatikan, karena mungkin terdapat bug di dalamnya atau memiliki efek samping yang tidak terduga.
## Ikut serta dalam Saluran Dev AMP
Saluran Konsol Dev AMP adalah cara untuk mengikutsertakan browser menggunakan versi pustaka JS AMP yang lebih baru.
Untuk mengikutsertakan browser dalam Saluran Dev AMP,
buka [laman eksperimental AMP](https://cdn.ampproject.org/experiments.html)
dan aktifkan eksperimen "Saluran Dev AMP".
## Mengaktifkan komponen eksperimental
Untuk konten yang disajikan dari [https://cdn.ampproject.org](https://cdn.ampproject.org),
buka [laman eksperimen AMP](https://cdn.ampproject.org/experiments.html)
dan aktifkan (atau nonaktifkan) komponen eksperimental dengan mengalihkan pengalih ke aktif (atau nonaktif). Ikut serta akan menetapkan cookie di browser yang akan mengaktifkan eksperimen pada semua laman AMP yang disajikan melalui Cache Google AMP.
Untuk konten yang disajikan dari domain lain, eksperimen dapat dialihkan di konsol devtools jika mode pengembangan aktif menggunakan:
[sourcecode:js]
AMP.toggleExperiment('experiment')
[/sourcecode]
File AMP yang menyertakan fitur eksperimental akan gagal saat
[validasi AMP](/docs/guides/validate.html).
Hapus komponen eksperimental ini dari dokumen AMP yang siap produksi.
```
--------------------------------------------------------------------------------
/assets/sass/pages/_who.scss:
--------------------------------------------------------------------------------
```scss
.who {
.content h1 {
text-align: center;
}
.inline-toc {
display: none;
}
amp-accordion > section:last-child {
border-bottom: 0;
}
.who-container {
margin-top: 60px;
}
.item-container {
column-count: 4;
column-gap: $grid-gutters;
list-style: none;
.item {
padding: 5px 0;
-webkit-column-break-inside: avoid;
-moz-column-break-inside: avoid;
-o-column-break-inside: avoid;
-ms-column-break-inside: avoid;
column-break-inside: avoid;
}
}
.browser-container {
display: flex;
justify-content: space-between;
margin: 30px auto;
padding: 0 20px;
text-align: center;
.browser {
flex: 0 1 75px;
margin: 10px;
}
.browser-title {
@extend %text-label;
color: $color-grey-md;
}
}
hr {
border: 0;
border-bottom: 1px solid $color-grey-lt;
border-top: 1px solid $color-grey-lt;
height: 0;
margin: 80px auto;
}
@include max-screen($tablet-portrait-breakpoint) {
.item-container {
column-count: 3;
}
}
@include max-screen($mobile-breakpoint) {
.content h1 {
text-align: left;
}
.inline-toc {
display: block;
}
.who-container,
.browser-container {
margin: 20px 0;
}
.browser-container {
flex-wrap: wrap;
}
hr {
margin: 30px auto;
}
}
@include max-screen($mobile-medium-breakpoint) {
.item-container {
column-count: 2;
}
.browser-container {
&::after {
content: '';
flex: 0 0 75px;
margin: 10px;
visibility: hidden;
}
}
}
}
```
--------------------------------------------------------------------------------
/assets/img/about/design-principles/design_icon_layers.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-3{fill:#fff;stroke-miterlimit:10;}.cls-1,.cls-2,.cls-3{fill-opacity:0.8;}.cls-1{stroke:url(#linear-gradient);}.cls-2{fill:url(#linear-gradient-2);}.cls-3{stroke:url(#linear-gradient-3);}.cls-4{fill:#0dd7ff;opacity:0.7;}</style><linearGradient id="linear-gradient" x1="45.97" y1="92.08" x2="89.99" y2="92.08" gradientUnits="userSpaceOnUse"><stop offset="0" stop-color="#1c79c4"/><stop offset="0.51" stop-color="#0389ff"/><stop offset="1" stop-color="#0dd7ff"/></linearGradient><linearGradient id="linear-gradient-2" x1="47" y1="85.12" x2="89" y2="85.12" xlink:href="#linear-gradient"/><linearGradient id="linear-gradient-3" x1="45.97" y1="77.17" x2="89.99" y2="77.17" xlink:href="#linear-gradient"/></defs><title>design_icon_layers</title><polygon class="cls-1" points="47 92.08 68 80.15 89 92.08 69 104 47 92.08"/><polygon class="cls-2" points="47 85.12 68 73.2 89 85.12 69 97.05 47 85.12"/><polygon class="cls-3" points="47 77.17 68 65.25 89 77.17 69 89.1 47 77.17"/><ellipse class="cls-4" cx="73.02" cy="76.06" rx="1.43" ry="1.44" transform="translate(-11.07 139.67) rotate(-83.27)"/><ellipse class="cls-4" cx="80.69" cy="64.09" rx="1.43" ry="1.44" transform="translate(7.59 136.72) rotate(-83.27)"/><ellipse class="cls-4" cx="86.63" cy="70.41" rx="1.43" ry="1.44" transform="translate(6.55 148.2) rotate(-83.27)"/><ellipse class="cls-4" cx="91.82" cy="63.74" rx="1.43" ry="1.44" transform="translate(17.76 147.46) rotate(-83.27)"/><ellipse class="cls-4" cx="92.44" cy="53.02" rx="1.43" ry="1.44" transform="translate(28.96 138.61) rotate(-83.27)"/></svg>
```
--------------------------------------------------------------------------------
/views/about-casestudies.html:
--------------------------------------------------------------------------------
```html
{% extends "/views/base.html" %}
{% set navmarkup %}
{% include "/views/partials/breadcrumb-nav.html" %}
{% endset %}
{% block main %}
{{ navmarkup|safe }}
<div class="container lg">
<div class="content">
<article class="post">
<span class="post-tag">{{_('Case Studies')}}</span>
<h1 class="post-title">{{ _(doc.titles('page')) or _(doc.title) }}</h1>
<div class="post-content">
<div class="inline-toc">
<ul>
<li>
<a href="{{g.url('/content/learn/case-studies.html', locale=doc.locale).path}}"{% if doc.base == 'case-studies' %} class="active"{% endif %}>All</a>
</li>
{% for item in g.collection('/content/learn/case-studies/category').docs(recursive=false, locale=doc.locale) %}
<li>
<a href="{{item.url.path}}"{% if item.title|slug == doc.base %} class="active"{% endif %}>{{_(item.title)}}</a>
</li>
{% endfor %}
</ul>
</div>
{{doc.html|render|safe}}
<div class="card-container grid case">
{% for item in g.collection('/content/learn/case-studies').docs(recursive=false, locale=doc.locale)|reverse %}
{% if doc.base == 'case-studies' or doc.base == item.category|slug %}
{% with doc = item, isCase = true %}
{% include "/views/partials/grid-card.html" %}
{% endwith %}
{% endif %}
{% endfor %}
</div>
</div>
</article>
</div>
</div>
{% with cta = doc.cta %}
{% include "/views/partials/footer-cta.html" %}
{% endwith %}
{% include "/views/partials/footer.html" %}
{% endblock %}
```
--------------------------------------------------------------------------------
/assets/sass/_mixins.scss:
--------------------------------------------------------------------------------
```scss
@mixin max-screen($max-width) {
@media only screen and (max-width: $max-width) {
@content;
}
}
@mixin min-screen($min-width) {
@media only screen and (min-width: $min-width + 1px) {
@content;
}
}
@mixin min-max-screen($min-width, $max-width) {
@media only screen and (min-width: $min-width + 1px) and (max-width: $max-width) {
@content;
}
}
@mixin retina-screen($density:2) {
@media
only screen and (-webkit-min-device-pixel-ratio: $density),
only screen and (min-device-pixel-ratio: $density),
only screen and (min-resolution: 1dppx * $density) {
@content;
}
}
%no-break {
hyphens: manual;
overflow-wrap: normal;
white-space: nowrap;
word-break: normal;
word-wrap: normal;
}
%break {
// hyphens: auto;
overflow-wrap: break-word;
white-space: normal;
word-break: break-word;
word-wrap: break-word;
}
%text-label {
font-size: 14px;
font-weight: 400;
letter-spacing: .56px;
line-height: 16px;
text-transform: uppercase;
@include max-screen($mobile-breakpoint) {
font-size: 12px;
}
}
%text-base {
font-weight: 300;
text-transform: none;
}
%text-body {
font-size: 20px;
line-height: 28px;
@include max-screen($mobile-breakpoint) {
font-size: 16px;
line-height: 26px;
}
}
%text-small {
color: $color-black-95;
font-size: 16px;
line-height: 26px;
@include max-screen($mobile-breakpoint) {
font-size: 14px;
}
}
%text-smaller {
color: $color-black-95;
font-size: 14px;
line-height: 26px;
}
%text-light {
@extend %text-label;
color: $color-grey-md;
margin-bottom: 15px;
}
%link-inherit {
font-size: inherit;
font-weight: inherit;
letter-spacing: inherit;
line-height: inherit;
text-transform: none;
}
```
--------------------------------------------------------------------------------
/assets/img/about/who-use-amp/who_lines2.svg:
--------------------------------------------------------------------------------
```
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 414.52 409.9"><defs><style>.cls-1,.cls-2,.cls-3,.cls-4{fill:none;stroke-miterlimit:10;stroke-width:9px;}.cls-1{stroke:url(#linear-gradient);}.cls-2{stroke:url(#linear-gradient-2);}.cls-3{stroke:url(#linear-gradient-3);}.cls-4{stroke:url(#linear-gradient-4);}</style><linearGradient id="linear-gradient" x1="-1694.08" y1="126.2" x2="-1447.63" y2="126.2" gradientTransform="translate(1716.9 -203.9) rotate(-9.79)" gradientUnits="userSpaceOnUse"><stop offset="0" stop-color="#0dd0ff"/><stop offset="0.5" stop-color="#0dd0ff"/><stop offset="1" stop-color="#fff"/></linearGradient><linearGradient id="linear-gradient-2" x1="-1655.24" y1="100.74" x2="-1319.16" y2="100.74" gradientTransform="translate(1716.9 -203.9) rotate(-9.79)" gradientUnits="userSpaceOnUse"><stop offset="0" stop-color="#0382ff"/><stop offset="1" stop-color="#0dd0ff"/></linearGradient><linearGradient id="linear-gradient-3" x1="-1775.54" y1="129.19" x2="-1582.81" y2="129.19" xlink:href="#linear-gradient"/><linearGradient id="linear-gradient-4" x1="-1721.52" y1="219.76" x2="-1430.58" y2="219.76" gradientTransform="translate(1716.9 -203.9) rotate(-9.79)" gradientUnits="userSpaceOnUse"><stop offset="0" stop-color="#1c79bd"/><stop offset="0.5" stop-color="#0382ff"/><stop offset="1" stop-color="#0dd0ff"/></linearGradient></defs><title>who_lines2</title><g id="Layer_2" data-name="Layer 2"><g id="Art"><line class="cls-1" x1="294.51" y1="81.78" x2="86.25" y2="293.36"/><line class="cls-2" x1="411.31" y1="3.16" x2="125.67" y2="293.35"/><line class="cls-3" x1="3.21" y1="291.17" x2="165.09" y2="126.71"/><line class="cls-4" x1="324.35" y1="154.54" x2="77.98" y2="406.76"/></g></g></svg>
```
--------------------------------------------------------------------------------
/assets/img/about/who-use-amp/adtech/adtech_icon_intro.svg:
--------------------------------------------------------------------------------
```
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 70.03 61.04"><defs><style>.cls-1,.cls-3,.cls-4,.cls-5,.cls-6{fill:#fff;}.cls-1{fill-opacity:0.7;stroke:url(#linear-gradient);}.cls-1,.cls-2,.cls-3,.cls-4,.cls-5,.cls-6{stroke-miterlimit:10;}.cls-2{fill:none;stroke:url(#linear-gradient-2);}.cls-3{stroke:url(#linear-gradient-3);}.cls-4{stroke:url(#linear-gradient-4);}.cls-5{stroke:url(#linear-gradient-5);}.cls-6{stroke:url(#linear-gradient-6);}</style><linearGradient id="linear-gradient" y1="30.52" x2="36.09" y2="30.52" gradientUnits="userSpaceOnUse"><stop offset="0" stop-color="#1c79c4"/><stop offset="0.51" stop-color="#0389ff"/><stop offset="1" stop-color="#0dd7ff"/></linearGradient><linearGradient id="linear-gradient-2" x1="20.51" y1="44.16" x2="59.53" y2="5.14" xlink:href="#linear-gradient"/><linearGradient id="linear-gradient-3" x1="24.05" y1="27.62" x2="29" y2="22.67" xlink:href="#linear-gradient"/><linearGradient id="linear-gradient-4" x1="11.05" y1="39.62" x2="16" y2="34.67" xlink:href="#linear-gradient"/><linearGradient id="linear-gradient-5" x1="40.05" y1="37.62" x2="45" y2="32.67" xlink:href="#linear-gradient"/><linearGradient id="linear-gradient-6" x1="64.05" y1="14.62" x2="69" y2="9.67" xlink:href="#linear-gradient"/></defs><title>adtech_icon_intro</title><g id="Layer_2" data-name="Layer 2"><g id="Art"><polygon class="cls-1" points="0.68 18.71 35.59 0.82 35.59 42.05 0.5 60.21 0.68 18.71"/><polyline class="cls-2" points="13.53 37.15 26.53 25.15 42.53 35.15 66.53 12.15"/><circle class="cls-3" cx="26.53" cy="25.15" r="3"/><circle class="cls-4" cx="13.53" cy="37.15" r="3"/><circle class="cls-5" cx="42.53" cy="35.15" r="3"/><circle class="cls-6" cx="66.53" cy="12.15" r="3"/></g></g></svg>
```
--------------------------------------------------------------------------------
/content/docs/reference/[email protected]:
--------------------------------------------------------------------------------
```markdown
---
$title: Componenti sperimentali
---
I [componenti sperimentali AMP](https://github.com/ampproject/amphtml/tree/master/tools/experiments) sono funzioni che sono state rilasciate ma che non sono ancora pronte per essere utilizzate pubblicamente, quindi sono protette da uno stato sperimentale.
Gli sviluppatori e gli utenti possono decidere di utilizzare queste funzioni prima che vengano rilasciate completamente, ma devono prestare attenzione perché potrebbero contenere bug o avere effetti collaterali imprevisti.
## Attivare l'AMP Dev Channel
L'AMP Dev Console Channel consente di attivare l'utilizzo di una versione più recente delle librerie JS AMP in un browser.
Per attivare l'AMP Dev Channel nel tuo browser, visita la [pagina degli esperimenti AMP](https://cdn.ampproject.org/experiments.html) e attiva l'esperimento relativo al canale.
## Attivare un componente sperimentale
Per i contenuti pubblicati da [https://cdn.ampproject.org](https://cdn.ampproject.org), visita la [pagina degli esperimenti AMP](https://cdn.ampproject.org/experiments.html) e attiva (o disattiva) qualsiasi componente sperimentale utilizzando la relativa opzione. Quando attivi un componente sperimentale, nel browser viene impostato un cookie che attiverà l'esperimento per tutte le pagine AMP pubblicate tramite la cache AMP di Google.
Per i contenuti pubblicati da qualsiasi altro dominio, è possibile attivare/disattivare gli esperimenti nella console devtools (quando è attiva la modalità sviluppo) utilizzando:
[sourcecode:js]
AMP.toggleExperiment('experiment')
[/sourcecode]
Tutti i file AMP che includono funzioni sperimentali non supereranno la [convalida AMP](/docs/guides/validate.html).
Rimuovi questi componenti sperimentali per i documenti AMP pronti per la produzione.
```
--------------------------------------------------------------------------------
/views/blog_detail.html:
--------------------------------------------------------------------------------
```html
{% extends "/views/base.html" %}
{% block main %}
{% include "/views/partials/breadcrumb-nav.html" %}
<div class="container md">
<div class="content">
<article class="post">
<div class="post-meta">
<a class="post-type" href="{{g.doc('/content/latest/list-' ~ doc.type|lower ~ '.html', locale=doc.locale).url.path}}">{{ doc.type }}</a>
<span class="post-date">{{ doc.date }}</span>
</div>
<h1 class="post-title">{{ doc.title }}</h1>
<div class="post-sheet">
{% include "/views/partials/share.html" %}
<div class="author-meta small">
<div class="author-avatar">
<amp-img
noloading
height=50
width=50
src="{{doc.avatar}}">
</amp-img>
</div>
By <span class="author-name">{{ doc.author }}</span>
<div class="author-role">{{ doc.role }}</div>
</div>
<div class="post-content">
{{doc.html|render|safe}}
</div>
</div>
</article>
</div>
{% if doc.prev() %}
<div class="post-footer list">
<h2>Previous Posts</h2>
<div class="card-container grid case">
{% with post = doc.prev(), past = false, meta = true %}
{% include "/views/partials/post-item.html" %}
{% endwith %}
{% if doc.prev().prev() %}
{% with post = doc.prev().prev(), past = false, meta = true %}
{% include "/views/partials/post-item.html" %}
{% endwith %}
{% endif %}
</div>
</div>
{% endif %}
</div>
</div>
{% include "/views/partials/footer.html" %}
{% endblock %}
```
--------------------------------------------------------------------------------
/content/docs/reference/[email protected]:
--------------------------------------------------------------------------------
```markdown
---
$title: Testkomponenten
---
[AMP-Testkomponenten](https://github.com/ampproject/amphtml/tree/master/tools/experiments) sind veröffentlichte Funktionen, die noch nicht zur allgemeinen Nutzung bereitgestellt wurden. Aus diesem Grund werden sie durch den Teststatus geschützt.
Entwickler und Nutzer können der Nutzung dieser Funktionen zustimmen, um sie auszuprobieren, bevor sie für die Öffentlichkeit freigegeben werden.
Die Nutzer sollten beim Einsatz dieser Komponenten aber Vorsicht walten lassen, weil die Funktionen Fehler enthalten oder unerwartete Nebeneffekte haben können.
## AMP-Dev-Version aktivieren
Mit dem Channel für die AMP-Dev-Version wird dafür gesorgt, dass ein Browser eine aktuellere Version der AMP-JS-Bibliotheken verwendet.
Um den Channel der AMP-Dev-Version für Ihren Browser zu aktivieren, rufen Sie die [Seite für AMP-Tests](https://cdn.ampproject.org/experiments.html) auf und aktivieren Sie den Test "AMP-Dev-Version".
## Testkomponente aktivieren
Inhalte aus [https://cdn.ampproject.org](https://cdn.ampproject.org) finden Sie auf der [Seite für AMP-Tests](https://cdn.ampproject.org/experiments.html). Dort können Sie die einzelnen Testkomponenten aktivieren oder deaktivieren. Durch die Aktivierung wird ein Cookie in Ihrem Browser gesetzt, durch den der Test für alle AMP-Seiten aktiviert wird, die über den AMP-Cache von Google bereitgestellt werden.
Für Inhalte aus anderen Domains können die Tests in der DevTools-Konsole wie folgt aktiviert oder deaktiviert werden, wenn der Entwicklungsmodus aktiviert ist:
[sourcecode:js]
AMP.toggleExperiment('experiment')
[/sourcecode]
Bei AMP-Dateien mit Testfunktionen [schlägt die AMP-Validierung fehl](/docs/guides/validate.html).
Bei produktionsbereiten AMP-Dokumenten müssen die Testkomponenten entfernt werden.
```
--------------------------------------------------------------------------------
/content/docs/reference/experimental@pt_BR.md:
--------------------------------------------------------------------------------
```markdown
---
$title: Componentes experimentais
---
Os [Componentes experimentais das AMP](https://github.com/ampproject/amphtml/tree/master/tools/experiments) são elementos lançados que ainda não estão prontos para uso amplo. Por essa razão, esses componentes são protegidos por um status experimental.
Os desenvolvedores e os usuários podem optar por usar esses recursos antes que eles sejam completamente liberados.
No entanto, eles devem ser usados com cautela, pois podem conter bugs ou produzir efeitos colaterais inesperados.
## Optar pelo Canal Dev AMP
O AMP Dev Console Channel é uma maneira de fazer com que o navegador use uma versão mais recente das bibliotecas de JS AMP.
Para fazer com que seu navegador opte pelo AMP Dev Console Channel, acesse a [página de experimentos de AMP](https://cdn.ampproject.org/experiments.html) e ative o experimento "AMP Dev Console Channel".
## Ativar um componente experimental
Para conteúdo veiculado por [https://cdn.ampproject.org](https://cdn.ampproject.org), acesse a [página de experimentos de AMP](https://cdn.ampproject.org/experiments.html) e ative (ou desative) qualquer componente experimental clicando em "On" (ou "Off"). A ativação de um experimento definirá um cookie no seu navegador que ativará o experimento em todas as páginas AMP veiculadas por meio do cache de AMP do Google.
Para conteúdo veiculado por qualquer outro domínio, os experimentos poderão ser ativados ou desativados no console de ferramentas do desenvolvedor quando o modo de desenvolvimento estiver ativado usando:
[sourcecode:js]
AMP.toggleExperiment('experiment')
[/sourcecode]
Nenhum arquivo das AMP que inclua recursos experimentais passará na [validação de AMP](/docs/guides/validate.html).
Remova os componentes experimentais de documentos de AMP prontos para produção.
```
--------------------------------------------------------------------------------
/content/docs/reference/[email protected]:
--------------------------------------------------------------------------------
```markdown
---
$title: Composants expérimentaux
---
Les [composants expérimentaux AMP](https://github.com/ampproject/amphtml/tree/master/tools/experiments) désignent des nouvelles fonctionnalités qui ne sont pas encore prêtes à être utilisées par le grand public et sont donc encore à l'état expérimental.
Les développeurs et les utilisateurs peuvent choisir de tester ces fonctionnalités avant leur sortie définitive.
Toutefois, ces fonctionnalités doivent être utilisées avec prudence, car elles peuvent contenir des bugs ou avoir des effets secondaires inattendus.
## Activer la version en développement d'AMP
La version en développement d'AMP permet d'activer une nouvelle version des bibliothèques AMP JS dans votre navigateur.
Pour activer cette version, consultez la page [Composants expérimentaux AMP](https://cdn.ampproject.org/experiments.html) et activez le composant "AMP Dev Channel" (version en développement d'AMP).
## Activer un composant expérimental
Pour le contenu diffusé depuis [https://cdn.ampproject.org](https://cdn.ampproject.org), consultez la page [Composants expérimentaux AMP](https://cdn.ampproject.org/experiments.html) et activez (ou désactivez) les composants de votre choix. Lorsque vous activez un composant, un cookie est placé dans votre navigateur. Il active le composant sur toutes les pages AMP diffusées par le biais du cache AMP Google.
Pour le contenu diffusé depuis d'autres domaines, il est possible d'activer les composants expérimentaux dans la console des outils de développement en mode développement à l'aide de :
[sourcecode:js]
AMP.toggleExperiment('experiment')
[/sourcecode]
Tout fichier AMP comprenant des fonctionnalités expérimentales échouera à la [validation AMP](/docs/guides/validate.html).
Supprimez ces composants expérimentaux pour les documents AMP prêts pour la production.
```
--------------------------------------------------------------------------------
/assets/img/about/design-principles/lines1.svg:
--------------------------------------------------------------------------------
```
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 477.07 231.68"><defs><style>.cls-1,.cls-2,.cls-3,.cls-4{fill:none;stroke-miterlimit:10;stroke-width:9px;}.cls-1{stroke:url(#linear-gradient);}.cls-2{stroke:url(#linear-gradient-2);}.cls-3{stroke:url(#linear-gradient-3);}.cls-4{stroke:url(#linear-gradient-4);}</style><linearGradient id="linear-gradient" x1="-18905.04" y1="-12660.22" x2="-18703.04" y2="-12660.22" gradientTransform="translate(19075.12 12478.01) rotate(-0.78)" gradientUnits="userSpaceOnUse"><stop offset="0" stop-color="#0dd0ff"/><stop offset="0.5" stop-color="#0dd0ff"/><stop offset="1" stop-color="#fff" stop-opacity="0"/></linearGradient><linearGradient id="linear-gradient-2" x1="29.51" y1="266" x2="284.3" y2="266" gradientTransform="translate(70.2 -127) rotate(-0.78)" gradientUnits="userSpaceOnUse"><stop offset="0" stop-color="#0382ff"/><stop offset="1" stop-color="#0dd0ff"/></linearGradient><linearGradient id="linear-gradient-3" x1="1739.43" y1="-1557.99" x2="1962.06" y2="-1557.99" gradientTransform="translate(-1710.05 1366.74) rotate(8.56)" gradientUnits="userSpaceOnUse"><stop offset="0" stop-color="#1c79bd"/><stop offset="0.5" stop-color="#0382ff"/><stop offset="1" stop-color="#0dd0ff"/></linearGradient><linearGradient id="linear-gradient-4" x1="-20099.87" y1="-11409.63" x2="-19897.88" y2="-11409.63" gradientTransform="translate(-19954.32 -11028.64) rotate(179.22)" xlink:href="#linear-gradient"/></defs><title>lines1</title><g id="Layer_2" data-name="Layer 2"><g id="Art"><line class="cls-1" x1="197.48" y1="3.62" x2="2.67" y2="147.48"/><line class="cls-2" x1="354.26" y1="45.61" x2="107.18" y2="228.06"/><line class="cls-3" x1="474.46" y1="13.88" x2="229.31" y2="188.98"/><line class="cls-4" x1="100.98" y1="178.98" x2="295.79" y2="35.12"/></g></g></svg>
```
--------------------------------------------------------------------------------
/assets/img/about/who-use-amp/publishers/publisher_icon_intro.svg:
--------------------------------------------------------------------------------
```
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 76.17 60.26"><defs><style>.cls-1{fill:none;stroke:#0389ff;stroke-miterlimit:10;}.cls-1,.cls-2,.cls-3{stroke-linecap:round;}.cls-2,.cls-3{fill:#fff;stroke-linejoin:round;}.cls-2,.cls-3,.cls-5{fill-opacity:0.7;}.cls-2{stroke:url(#linear-gradient);}.cls-3{stroke:url(#linear-gradient-2);}.cls-4{opacity:0.7;fill:url(#linear-gradient-3);}.cls-5{fill:#0dd7ff;}</style><linearGradient id="linear-gradient" x1="4.73" y1="36.01" x2="24.67" y2="36.01" gradientUnits="userSpaceOnUse"><stop offset="0" stop-color="#1c79c4"/><stop offset="0.51" stop-color="#0389ff"/><stop offset="1" stop-color="#0dd7ff"/></linearGradient><linearGradient id="linear-gradient-2" x1="11001.87" y1="26.75" x2="11033.76" y2="26.75" gradientTransform="matrix(-1, 0, 0, 1, 11057.41, 0)" xlink:href="#linear-gradient"/><linearGradient id="linear-gradient-3" x1="27.17" y1="26.02" x2="33.44" y2="9.26" xlink:href="#linear-gradient"/></defs><title>publisher_icon_intro</title><g id="Layer_2" data-name="Layer 2"><g id="Art"><path class="cls-1" d="M.5,24.67,20.65,14.39l-.44-.19a.41.41,0,0,1,0-.74L25.13,11a2.06,2.06,0,0,1,1.75,0l.35.15L47,.82l.41,33.72L27.64,44.82,26.41,44,19,47.7l2.06.82L.91,58.39Z"/><polygon class="cls-2" points="5.23 26.45 24.17 12.26 24.17 46.88 5.23 59.76 5.23 26.45"/><polygon class="cls-3" points="55.03 6.62 24.15 12.26 24.15 46.88 55.03 39.93 55.03 6.62"/><polygon class="cls-4" points="26.89 10.95 32.48 8.12 33.81 8.63 33.81 24.12 31.34 22.2 28.77 27 28.36 11.51 26.89 10.95"/><circle class="cls-5" cx="62.48" cy="26.67" r="1.06"/><circle class="cls-5" cx="67.04" cy="17.23" r="1.06"/><circle class="cls-5" cx="71.91" cy="21.35" r="1.06"/><circle class="cls-5" cx="75.12" cy="16.01" r="1.06"/><circle class="cls-5" cx="74.65" cy="8.09" r="1.06"/></g></g></svg>
```
--------------------------------------------------------------------------------
/assets/sass/_content.scss:
--------------------------------------------------------------------------------
```scss
// page content
.container {
.content {
margin: 0 auto;
min-width: 0;
padding: 100px 0;
transition: all .25s ease;
width: 100%;
word-break: break-word;
/* These are technically the same, but use both */
overflow-wrap: break-word;
word-wrap: break-word;
/* Instead use this non-standard one: */
word-break: break-word;
/* Adds a hyphen where the word breaks, if supported (No Blink) */
// hyphens: auto;
}
}
// docs
.main {
align-items: stretch;
display: flex;
margin-left: 350px;
min-height: 100vh;
h1 {
font-size: 40px;
font-weight: 100;
line-height: 50px;
margin-top: 0;
}
h2 {
border-top: 3px solid $color-grey-lt;
font-size: 30px;
line-height: 40px;
margin-top: 30px;
padding-top: 20px;
}
h3 {
font-size: 24px;
line-height: 32px;
margin-top: 30px;
}
a {
font-size: 16px;
}
aside {
a {
font-size: 14px;
}
}
.content {
flex-grow: 1;
-webkit-flex-grow: 1;
max-width: 1000px;
padding-bottom: 60px;
padding-top: 70px;
ul,
ol {
margin-left: 40px;
}
}
amp-img,
amp-youtube,
amp-iframe {
margin: 1em 0;
}
}
.rtl .main {
margin: 0 350px 0 auto;
.content {
// ul,
// ol {
// margin-left: 0;
// margin-right: 40px;
// }
}
}
@include max-screen($mobile-breakpoint) {
.container {
.content {
max-width: 100%;
padding: 70px 0;
}
}
.main {
flex-direction: column;
margin-left: 0;
h1 {
font-size: 26px;
line-height: 40px;
font-weight: 300;
}
h2 {
font-size: 20px;
line-height: 28px;
}
h3 {
font-size: 18px;
line-height: 26px;
}
a {
font-size: 14px;
}
}
.rtl .main {
margin-right: 0;
}
}
```
--------------------------------------------------------------------------------
/assets/img/home/lines3.svg:
--------------------------------------------------------------------------------
```
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 359.59 377.35"><defs><style>.cls-1,.cls-2,.cls-3,.cls-4{fill:none;stroke-miterlimit:10;stroke-width:9px;}.cls-1{stroke:url(#linear-gradient);}.cls-2{stroke:url(#linear-gradient-2);}.cls-3{stroke:url(#linear-gradient-3);}.cls-4{stroke:url(#linear-gradient-4);}</style><linearGradient id="linear-gradient" x1="7421.99" y1="5159.15" x2="7706.91" y2="5159.15" gradientTransform="matrix(-0.99, -0.16, 0.16, -0.99, 6789.79, 6576.99)" gradientUnits="userSpaceOnUse"><stop offset="0" stop-color="#fff"/><stop offset="0.5" stop-color="#0382ff"/><stop offset="1" stop-color="#0dd0ff"/></linearGradient><linearGradient id="linear-gradient-2" x1="-3638.04" y1="11335.84" x2="-3383.2" y2="11335.84" gradientTransform="translate(3703.99 -11241.92)" gradientUnits="userSpaceOnUse"><stop offset="0" stop-color="#1c79bd"/><stop offset="0.5" stop-color="#0382ff"/><stop offset="1" stop-color="#0dd0ff"/></linearGradient><linearGradient id="linear-gradient-3" x1="-1468.69" y1="11340.8" x2="-1183.76" y2="11340.8" gradientTransform="matrix(0.99, 0.16, -0.16, 0.99, 3345.65, -10790.36)" xlink:href="#linear-gradient-2"/><linearGradient id="linear-gradient-4" x1="13156.86" y1="5654.2" x2="13371.48" y2="5654.2" gradientTransform="translate(13422.22 5836.65) rotate(180)" gradientUnits="userSpaceOnUse"><stop offset="0" stop-color="#fff"/><stop offset="0.5" stop-color="#0dd0ff"/><stop offset="1" stop-color="#0dd0ff"/></linearGradient></defs><title>lines 3</title><g id="Layer_2" data-name="Layer 2"><g id="Art"><line class="cls-1" x1="2.62" y1="373.7" x2="322.69" y2="144.03"/><line class="cls-2" x1="318.16" y1="3.65" x2="68.59" y2="184.18"/><line class="cls-3" x1="356.97" y1="70.15" x2="36.91" y2="299.82"/><line class="cls-4" x1="53.37" y1="257.68" x2="262.74" y2="107.21"/></g></g></svg>
```
--------------------------------------------------------------------------------
/content/docs/reference/[email protected]:
--------------------------------------------------------------------------------
```markdown
---
$title: Componentes experimentales
---
Los [componentes experimentales de AMP](https://github.com/ampproject/amphtml/tree/master/tools/experiments) son funciones que no están listas para usarse de forma generalizada; de ahí que se protejan con el estado de "experimentales".
Los desarrolladores y los usuarios pueden habilitar el uso de estas funciones antes de que se publiquen definitivamente,
pero deben usarlas con precaución, ya que pueden contener errores o efectos secundarios inesperados.
## Habilitar el canal para desarrolladores de AMP
El canal de la consola para desarrolladores de AMP es una forma de habilitar un navegador para que utilice una versión más reciente de las bibliotecas JavaScript de AMP.
Para habilitar tu navegador en el canal para desarrolladores de AMP, ve a la [página de experimentos de AMP](https://cdn.ampproject.org/experiments.html) y activa el experimento "Canal para desarrolladores de AMP".
## Habilitar un componente experimental
En el caso de contenido publicado desde [https://cdn.ampproject.org](https://cdn.ampproject.org), ve a la [página de experimentos de AMP](https://cdn.ampproject.org/experiments.html) y habilita (o inhabilita) los componentes experimentales activándolos (o desactivándolos). Al habilitar esta opción, se definirá una cookie en el navegador que habilitará el experimento en todas las páginas de AMP que se publiquen a través de Google AMP Cache.
En el caso de contenido publicado desde cualquier otro dominio, los experimentos se podrán activar desde la consola DevTools cuando el modo de desarrollo se haya habilitado mediante:
[sourcecode:js]
AMP.toggleExperiment('experiment')
[/sourcecode]
Los archivos de AMP que incluyan funciones experimentales no superarán la [validación de AMP](/docs/guides/validate.html).
Quita estos componentes experimentales de los documentos de AMP listos para la producción.
```
