This is page 7 of 20. Use http://codebase.md/cloudflare/docs/imgs/%7B%7Bgoto%20or%20doc.goto%20or%20doc.url.path%7D%7D?page={x} to view the full context.
# Directory Structure
```
├── .editorconfig
├── .eslintrc.json
├── .firebaserc
├── .github
│ └── workflows
│ └── semgrep.yml
├── .gitignore
├── .travis.yml
├── assets
│ ├── extra
│ │ └── brand_assets.zip
│ ├── img
│ │ ├── about
│ │ │ ├── case-studies
│ │ │ │ └── bg_lines.png
│ │ │ ├── design-principles
│ │ │ │ ├── bg1.svg
│ │ │ │ ├── bg2.svg
│ │ │ │ ├── design_icon_break.svg
│ │ │ │ ├── design_icon_fast.svg
│ │ │ │ ├── design_icon_future.svg
│ │ │ │ ├── design_icon_layers.svg
│ │ │ │ ├── design_icon_priorities.svg
│ │ │ │ ├── design_icon_ux.svg
│ │ │ │ ├── design_icon_whitelist.svg
│ │ │ │ ├── lines1.svg
│ │ │ │ └── lines2.svg
│ │ │ ├── how-amp-works
│ │ │ │ ├── line_behind.svg
│ │ │ │ └── lines_front.svg
│ │ │ ├── overview
│ │ │ │ ├── bg2.svg
│ │ │ │ ├── herobg.svg
│ │ │ │ ├── herolines1.svg
│ │ │ │ ├── herolines2.svg
│ │ │ │ ├── line4.svg
│ │ │ │ ├── lines3.svg
│ │ │ │ ├── what_phone.png
│ │ │ │ ├── what_phone@1_5x.png
│ │ │ │ └── [email protected]
│ │ │ └── who-use-amp
│ │ │ ├── adtech
│ │ │ │ ├── adtech_icon_customize.svg
│ │ │ │ ├── adtech_icon_intro.svg
│ │ │ │ ├── adtech_icon_reach.svg
│ │ │ │ ├── adtech_icon_revenue.svg
│ │ │ │ ├── indexexchange_logo.png
│ │ │ │ ├── lines.svg
│ │ │ │ ├── sharethrough_logo.png
│ │ │ │ ├── teads_logo.svg
│ │ │ │ └── triplelift_logo.png
│ │ │ ├── advertisers
│ │ │ │ ├── advertiser_phone_wired.png
│ │ │ │ ├── advertiser_phone_wired@1_5x.png
│ │ │ │ ├── [email protected]
│ │ │ │ ├── advertisers_bg.svg
│ │ │ │ ├── advertisers_icon_audience.svg
│ │ │ │ ├── advertisers_icon_everywhere.svg
│ │ │ │ ├── advertisers_icon_intro.svg
│ │ │ │ ├── advertisers_icon_ROI.svg
│ │ │ │ └── advertisers_lines.svg
│ │ │ ├── amp-ads
│ │ │ │ ├── ads_icon.svg
│ │ │ │ ├── cloudflare_logo.png
│ │ │ │ ├── doubleclick_logo.png
│ │ │ │ ├── google_logo.png
│ │ │ │ ├── lines_bottom1.svg
│ │ │ │ ├── lines_bottom2.svg
│ │ │ │ ├── lines.svg
│ │ │ │ ├── roi_icon.svg
│ │ │ │ ├── speed_icon.svg
│ │ │ │ └── triplelift_logo.png
│ │ │ ├── card_developers.png
│ │ │ ├── card_developers.svg
│ │ │ ├── card_smb.png
│ │ │ ├── card_smb.svg
│ │ │ ├── hero_triangle.png
│ │ │ ├── publishers
│ │ │ │ ├── globo_logo.svg
│ │ │ │ ├── nyt_logo.svg
│ │ │ │ ├── publisher_icon_business.svg
│ │ │ │ ├── publisher_icon_fast.svg
│ │ │ │ ├── publisher_icon_intro.svg
│ │ │ │ ├── publisher_icon_simple.svg
│ │ │ │ ├── publisher_phone_cnn.png
│ │ │ │ ├── publisher_phone_cnn@1_5x.png
│ │ │ │ ├── [email protected]
│ │ │ │ ├── wapo_logo.png
│ │ │ │ └── wired_logo.png
│ │ │ ├── who_icon_adtech.svg
│ │ │ ├── who_icon_advertisers.svg
│ │ │ ├── who_icon_publishers.svg
│ │ │ ├── who_lines1.svg
│ │ │ ├── who_lines2.svg
│ │ │ ├── who_phones_hero.png
│ │ │ ├── who_phones_hero@1_5x.png
│ │ │ └── [email protected]
│ │ ├── amp_favicon.png
│ │ ├── amp-conf
│ │ │ └── speakers
│ │ │ ├── alex.jpg
│ │ │ ├── ali.jpg
│ │ │ ├── ardan.jpg
│ │ │ ├── beck.jpg
│ │ │ ├── bez.jpg
│ │ │ ├── chen.jpg
│ │ │ ├── dane.jpg
│ │ │ ├── eric.jpg
│ │ │ ├── gina.jpg
│ │ │ ├── honey.jpg
│ │ │ ├── jeremy.jpg
│ │ │ ├── john.jpg
│ │ │ ├── le.jpg
│ │ │ ├── madison.jpg
│ │ │ ├── malte.jpg
│ │ │ ├── malteandrudy.jpg
│ │ │ ├── mariko.jpg
│ │ │ ├── matthew.jpg
│ │ │ ├── mike.jpg
│ │ │ ├── natalia.jpg
│ │ │ ├── nicole.jpg
│ │ │ ├── paul.jpg
│ │ │ ├── ranna.jpg
│ │ │ ├── richard.jpg
│ │ │ ├── rudy.jpg
│ │ │ ├── sam.jpg
│ │ │ ├── sarah.jpg
│ │ │ ├── sebastian.jpg
│ │ │ ├── senthil.jpg
│ │ │ ├── sriram.jpg
│ │ │ ├── vadim.jpg
│ │ │ ├── vamsee.jpg
│ │ │ ├── will.jpg
│ │ │ └── yamini.jpg
│ │ ├── arrow-blue.svg
│ │ ├── arrow.svg
│ │ ├── background.jpg
│ │ ├── blog-icon.svg
│ │ ├── brand-guidelines.pdf
│ │ ├── case-studies
│ │ │ ├── gizmodo_logo.png
│ │ │ ├── gizmodo_phone1.png
│ │ │ ├── gizmodo_phone1@1_5x.png
│ │ │ ├── [email protected]
│ │ │ ├── gizmodo_phone2.png
│ │ │ ├── gizmodo_phone2@1_5x.png
│ │ │ ├── [email protected]
│ │ │ ├── gizmodo_thumb.jpg
│ │ │ ├── gizmodo.pdf
│ │ │ ├── hearst_framed.png
│ │ │ ├── hearst_framed2.png
│ │ │ ├── hearst_logo.png
│ │ │ ├── hearst_thumb.jpg
│ │ │ ├── hearst.pdf
│ │ │ ├── milestone_home_framed.png
│ │ │ ├── milestone_logo.png
│ │ │ ├── milestone_search_framed.png
│ │ │ ├── milestone_thumb.jpg
│ │ │ ├── milestone.pdf
│ │ │ ├── plista_graphic.png
│ │ │ ├── plista_logo.png
│ │ │ ├── plista_thumb.jpg
│ │ │ ├── plista.pdf
│ │ │ ├── relay_media_logo.png
│ │ │ ├── relay_media_thumb.jpg
│ │ │ ├── relay_media.pdf
│ │ │ ├── relaymedia_phone1.png
│ │ │ ├── relaymedia_phone1@1_5x.png
│ │ │ ├── [email protected]
│ │ │ ├── relaymedia_phone2.png
│ │ │ ├── relaymedia_phone2@1_5x.png
│ │ │ ├── [email protected]
│ │ │ ├── slate_logo.png
│ │ │ ├── slate_phone1.png
│ │ │ ├── slate_phone1@1_5x.png
│ │ │ ├── [email protected]
│ │ │ ├── slate_phone2.png
│ │ │ ├── slate_phone2@1_5x.png
│ │ │ ├── [email protected]
│ │ │ ├── slate_thumb.jpg
│ │ │ ├── slate.pdf
│ │ │ ├── teads_logo.png
│ │ │ ├── teads_logo2.png
│ │ │ ├── teads_phone.png
│ │ │ ├── teads_phone@1_5x.png
│ │ │ ├── [email protected]
│ │ │ ├── teads_thumb.jpg
│ │ │ ├── teads.pdf
│ │ │ ├── terra_framed1.png
│ │ │ ├── terra_framed2.png
│ │ │ ├── terra_logo.png
│ │ │ ├── terra_thumb.jpg
│ │ │ ├── terra.pdf
│ │ │ ├── wapo_logo.png
│ │ │ ├── wapo_thumb.png
│ │ │ ├── wapo.pdf
│ │ │ ├── washingtonpost_phone.png
│ │ │ ├── washingtonpost_phone@1_5x.png
│ │ │ ├── [email protected]
│ │ │ ├── wired_logo.png
│ │ │ ├── wired_phone1.png
│ │ │ ├── wired_phone1@1_5x.png
│ │ │ ├── [email protected]
│ │ │ ├── wired_phone2.png
│ │ │ ├── wired_phone2@1_5x.png
│ │ │ ├── [email protected]
│ │ │ ├── wired_thumb.jpg
│ │ │ └── wired.pdf
│ │ ├── cheveron-down.svg
│ │ ├── close.svg
│ │ ├── comment.png
│ │ ├── docs
│ │ │ ├── icon_important.svg
│ │ │ ├── icon_note.svg
│ │ │ ├── icon_read.svg
│ │ │ ├── icon_tip.svg
│ │ │ ├── responsive_amp_img.png
│ │ │ ├── too_much_css.png
│ │ │ ├── validator_console_imgerror.png
│ │ │ ├── validator_errors.png
│ │ │ ├── validator_extension_imgerror.png
│ │ │ ├── validator_icon_invalid.png
│ │ │ ├── validator_icon_link.png
│ │ │ ├── validator_icon_valid.png
│ │ │ ├── validator_mandatory_error.png
│ │ │ ├── validator_web_ui.png
│ │ │ └── validator_webui_imgerror.png
│ │ ├── enforce-comment.png
│ │ ├── footer
│ │ │ ├── line-left.png
│ │ │ ├── line-right-2.png
│ │ │ └── line-right.png
│ │ ├── github.png
│ │ ├── hamburger.svg
│ │ ├── home
│ │ │ ├── bg_experience.png
│ │ │ ├── home_hero_phone.png
│ │ │ ├── home_hero_phone@1_5x.png
│ │ │ ├── [email protected]
│ │ │ ├── home_icon_flexibility.svg
│ │ │ ├── home_icon_performance.svg
│ │ │ ├── home_phone_ebay.png
│ │ │ ├── home_phone_ebay@1_5x.png
│ │ │ ├── [email protected]
│ │ │ ├── lines2.svg
│ │ │ ├── lines3.svg
│ │ │ ├── shapebg.svg
│ │ │ ├── teads_logo.svg
│ │ │ ├── wapo_logo.png
│ │ │ └── wired_logo.png
│ │ ├── ic_open_in_new_black.svg
│ │ ├── ic_open_in_new_white.svg
│ │ ├── icons
│ │ │ ├── 120.png
│ │ │ ├── 144.png
│ │ │ ├── 152.png
│ │ │ ├── 168.png
│ │ │ ├── 180.png
│ │ │ ├── 192.png
│ │ │ ├── 48.png
│ │ │ ├── 512.png
│ │ │ ├── 72.png
│ │ │ ├── 96.png
│ │ │ └── any.svg
│ │ ├── latest
│ │ │ ├── events
│ │ │ │ ├── event_empty.png
│ │ │ │ ├── event_empty.svg
│ │ │ │ └── event_hero.svg
│ │ │ ├── icon_audience.png
│ │ │ ├── icon_audience.svg
│ │ │ ├── icon_calendar.png
│ │ │ ├── icon_calendar.svg
│ │ │ ├── icon_location.png
│ │ │ ├── icon_location.svg
│ │ │ ├── icon_retweet.png
│ │ │ ├── icon_retweet.svg
│ │ │ ├── icon_twitter.svg
│ │ │ ├── latest_hero.jpg
│ │ │ ├── line_hero_back.svg
│ │ │ └── line_hero_front.svg
│ │ ├── liveblog-pagination.png
│ │ ├── login-button.png
│ │ ├── logo-blue.svg
│ │ ├── logout-button.png
│ │ ├── malte.jpg
│ │ ├── motions
│ │ │ └── amp-lines-motions.png
│ │ ├── nav
│ │ │ ├── back_arrow.png
│ │ │ ├── back_arrow.svg
│ │ │ ├── close.png
│ │ │ ├── close.svg
│ │ │ ├── next_level.png
│ │ │ └── next_level.svg
│ │ ├── partners
│ │ │ ├── adobe_analytics.png
│ │ │ ├── chartbeat.png
│ │ │ ├── comscore.png
│ │ │ ├── ggl_bw.png
│ │ │ ├── ggl.png
│ │ │ ├── li.png
│ │ │ ├── nuzzel.png
│ │ │ ├── parsely.png
│ │ │ ├── pinterest.png
│ │ │ ├── tw.png
│ │ │ └── wp.png
│ │ ├── platforms
│ │ │ ├── chrome.png
│ │ │ ├── criteo.png
│ │ │ ├── edge.png
│ │ │ ├── firefox.png
│ │ │ ├── google.png
│ │ │ ├── inmobi.png
│ │ │ ├── kargo.png
│ │ │ ├── mediavine.png
│ │ │ ├── opera.png
│ │ │ ├── plista.png
│ │ │ ├── safari.png
│ │ │ └── yahoo.png
│ │ ├── publishers
│ │ │ ├── abril.png
│ │ │ ├── asahi.png
│ │ │ ├── atlantic_media.png
│ │ │ ├── bbc_news.png
│ │ │ ├── buzzfeed.png
│ │ │ ├── condenast.png
│ │ │ ├── daily_mail.png
│ │ │ ├── economist.png
│ │ │ ├── editora_globo.png
│ │ │ ├── el_pais.png
│ │ │ ├── fairfax_media.png
│ │ │ ├── folha_de_s.paulo.png
│ │ │ ├── franzfurter_allgemeine.png
│ │ │ ├── ft.png
│ │ │ ├── gannett.png
│ │ │ ├── guardian.png
│ │ │ ├── hearst.png
│ │ │ ├── huffington_post.png
│ │ │ ├── la_stampa.png
│ │ │ ├── les_echos.png
│ │ │ ├── mainichi.png
│ │ │ ├── mashable.png
│ │ │ ├── mcclatchy.png
│ │ │ ├── new_york_times.png
│ │ │ ├── newscorp_australia.png
│ │ │ ├── nine_msn.png
│ │ │ ├── nrc.png
│ │ │ ├── ny_daily_news.png
│ │ │ ├── nypost.png
│ │ │ ├── pearson.png
│ │ │ ├── sankei.png
│ │ │ ├── telegraph.png
│ │ │ ├── time.png
│ │ │ ├── uol.png
│ │ │ ├── us_news.png
│ │ │ ├── vox_media.png
│ │ │ ├── wallstreetjournal.png
│ │ │ ├── washington_post.png
│ │ │ └── zeit_online.png
│ │ ├── quotes
│ │ │ ├── chartbeat.jpg
│ │ │ ├── ebay.jpg
│ │ │ ├── faz.jpg
│ │ │ ├── folha.jpg
│ │ │ ├── google.jpg
│ │ │ ├── guardian.jpg
│ │ │ ├── hearst.jpg
│ │ │ ├── lastampa.jpg
│ │ │ ├── newyorktimes.jpeg
│ │ │ ├── twitter.jpg
│ │ │ └── vox.jpg
│ │ ├── return-parameter.png
│ │ ├── sprite.svg
│ │ ├── symbols
│ │ │ ├── carat-down.svg
│ │ │ ├── carat.svg
│ │ │ ├── caret-right.svg
│ │ │ ├── close.svg
│ │ │ ├── lang-icon.svg
│ │ │ ├── logo-blue-standalone.svg
│ │ │ ├── return.svg
│ │ │ ├── search.svg
│ │ │ ├── share-close.svg
│ │ │ ├── share.svg
│ │ │ ├── template.scss
│ │ │ ├── twitter.svg
│ │ │ ├── video-play.svg
│ │ │ └── wordpress.svg
│ │ └── twitter.png
│ ├── manifest.json
│ ├── sass
│ │ ├── _accordions.scss
│ │ ├── _animated_lines.scss
│ │ ├── _animations.scss
│ │ ├── _bg-triangle.scss
│ │ ├── _callouts.scss
│ │ ├── _cards.scss
│ │ ├── _carousel.scss
│ │ ├── _config.scss
│ │ ├── _content-post.scss
│ │ ├── _content-section.scss
│ │ ├── _content.scss
│ │ ├── _doc-nav.scss
│ │ ├── _footer.scss
│ │ ├── _global.scss
│ │ ├── _grid.scss
│ │ ├── _header.scss
│ │ ├── _inline-toc.scss
│ │ ├── _lang_switcher.scss
│ │ ├── _large-cta.scss
│ │ ├── _lightbox.scss
│ │ ├── _mixins.scss
│ │ ├── _nav.scss
│ │ ├── _points.scss
│ │ ├── _post-item.scss
│ │ ├── _responsive.scss
│ │ ├── _search.scss
│ │ ├── _share.scss
│ │ ├── _sidebar.scss
│ │ ├── _sprite_generated.scss
│ │ ├── _sprite.scss
│ │ ├── _syntax_highlighting.scss
│ │ ├── _tables.scss
│ │ ├── _toc.scss
│ │ ├── about-how.min.scss
│ │ ├── about-overview.min.scss
│ │ ├── about-who-vertical.min.scss
│ │ ├── about-who.min.scss
│ │ ├── blog.min.scss
│ │ ├── case-study.min.scss
│ │ ├── design-principles.min.scss
│ │ ├── docs.min.scss
│ │ ├── home.min.scss
│ │ ├── list.min.scss
│ │ ├── main.min.scss
│ │ ├── pages
│ │ │ ├── _about-how.scss
│ │ │ ├── _about-overview.scss
│ │ │ ├── _about-who-vertical.scss
│ │ │ ├── _about-who.scss
│ │ │ ├── _case-study.scss
│ │ │ ├── _design-principles.scss
│ │ │ ├── _events.scss
│ │ │ ├── _faqs.scss
│ │ │ ├── _home.scss
│ │ │ ├── _latest.scss
│ │ │ ├── _list.scss
│ │ │ ├── _post-detail.scss
│ │ │ ├── _roadmap.scss
│ │ │ ├── _who.scss
│ │ │ └── amp-conf.scss
│ │ └── section.min.scss
│ └── video
│ ├── amp-phone.mp4
│ └── amp-phone.webm
├── content
│ ├── contribute
│ │ └── governance.md
│ ├── docs
│ │ ├── _blueprint.yaml
│ │ ├── blank.html
│ │ ├── build.md
│ │ ├── contribute
│ │ │ ├── _blueprint.yaml
│ │ │ ├── contribute.md
│ │ │ ├── [email protected]
│ │ │ ├── [email protected]
│ │ │ ├── [email protected]
│ │ │ ├── [email protected]
│ │ │ ├── file-a-bug.md
│ │ │ └── github.md
│ │ ├── contribute.md
│ │ ├── get_started
│ │ │ ├── _blueprint.yaml
│ │ │ ├── create
│ │ │ │ ├── _blueprint.yaml
│ │ │ │ ├── basic_markup.md
│ │ │ │ ├── [email protected]
│ │ │ │ ├── [email protected]
│ │ │ │ ├── [email protected]
│ │ │ │ ├── [email protected]
│ │ │ │ ├── [email protected]
│ │ │ │ ├── [email protected]
│ │ │ │ ├── [email protected]
│ │ │ │ ├── [email protected]
│ │ │ │ ├── [email protected]
│ │ │ │ ├── basic_markup@pt_BR.md
│ │ │ │ ├── [email protected]
│ │ │ │ ├── [email protected]
│ │ │ │ ├── [email protected]
│ │ │ │ ├── basic_markup@zh_CN.md
│ │ │ │ ├── include_image.md
│ │ │ │ ├── [email protected]
│ │ │ │ ├── [email protected]
│ │ │ │ ├── [email protected]
│ │ │ │ ├── [email protected]
│ │ │ │ ├── [email protected]
│ │ │ │ ├── [email protected]
│ │ │ │ ├── [email protected]
│ │ │ │ ├── [email protected]
│ │ │ │ ├── [email protected]
│ │ │ │ ├── include_image@pt_BR.md
│ │ │ │ ├── [email protected]
│ │ │ │ ├── [email protected]
│ │ │ │ ├── [email protected]
│ │ │ │ ├── include_image@zh_CN.md
│ │ │ │ ├── prepare_for_discovery.md
│ │ │ │ ├── [email protected]
│ │ │ │ ├── [email protected]
│ │ │ │ ├── [email protected]
│ │ │ │ ├── [email protected]
│ │ │ │ ├── [email protected]
│ │ │ │ ├── [email protected]
│ │ │ │ ├── [email protected]
│ │ │ │ ├── [email protected]
│ │ │ │ ├── [email protected]
│ │ │ │ ├── prepare_for_discovery@pt_BR.md
│ │ │ │ ├── [email protected]
│ │ │ │ ├── [email protected]
│ │ │ │ ├── [email protected]
│ │ │ │ ├── prepare_for_discovery@zh_CN.md
│ │ │ │ ├── presentation_layout.md
│ │ │ │ ├── [email protected]
│ │ │ │ ├── [email protected]
│ │ │ │ ├── [email protected]
│ │ │ │ ├── [email protected]
│ │ │ │ ├── [email protected]
│ │ │ │ ├── [email protected]
│ │ │ │ ├── [email protected]
│ │ │ │ ├── [email protected]
│ │ │ │ ├── [email protected]
│ │ │ │ ├── presentation_layout@pt_BR.md
│ │ │ │ ├── [email protected]
│ │ │ │ ├── [email protected]
│ │ │ │ ├── [email protected]
│ │ │ │ ├── presentation_layout@zh_CN.md
│ │ │ │ ├── preview_and_validate.md
│ │ │ │ ├── [email protected]
│ │ │ │ ├── [email protected]
│ │ │ │ ├── [email protected]
│ │ │ │ ├── [email protected]
│ │ │ │ ├── [email protected]
│ │ │ │ ├── [email protected]
│ │ │ │ ├── [email protected]
│ │ │ │ ├── [email protected]
│ │ │ │ ├── [email protected]
│ │ │ │ ├── preview_and_validate@pt_BR.md
│ │ │ │ ├── [email protected]
│ │ │ │ ├── [email protected]
│ │ │ │ ├── [email protected]
│ │ │ │ ├── preview_and_validate@zh_CN.md
│ │ │ │ ├── publish.md
│ │ │ │ ├── [email protected]
│ │ │ │ ├── [email protected]
│ │ │ │ ├── [email protected]
│ │ │ │ ├── [email protected]
│ │ │ │ ├── [email protected]
│ │ │ │ ├── [email protected]
│ │ │ │ ├── [email protected]
│ │ │ │ ├── [email protected]
│ │ │ │ ├── [email protected]
│ │ │ │ ├── publish@pt_BR.md
│ │ │ │ ├── [email protected]
│ │ │ │ ├── [email protected]
│ │ │ │ ├── [email protected]
│ │ │ │ └── publish@zh_CN.md
│ │ │ ├── create.md
│ │ │ ├── [email protected]
│ │ │ ├── [email protected]
│ │ │ ├── [email protected]
│ │ │ ├── [email protected]
│ │ │ ├── [email protected]
│ │ │ ├── [email protected]
│ │ │ ├── [email protected]
│ │ │ ├── [email protected]
│ │ │ ├── [email protected]
│ │ │ ├── create@pt_BR.md
│ │ │ ├── [email protected]
│ │ │ ├── [email protected]
│ │ │ ├── [email protected]
│ │ │ ├── create@zh_CN.md
│ │ │ ├── live_blog.md
│ │ │ ├── [email protected]
│ │ │ ├── login_requiring
│ │ │ │ ├── _blueprint.yaml
│ │ │ │ ├── add_comment.md
│ │ │ │ ├── [email protected]
│ │ │ │ ├── login.md
│ │ │ │ ├── [email protected]
│ │ │ │ ├── logout.md
│ │ │ │ ├── [email protected]
│ │ │ │ ├── summary.md
│ │ │ │ └── [email protected]
│ │ │ ├── login_requiring.md
│ │ │ └── [email protected]
│ │ ├── getting-started.md
│ │ ├── guides
│ │ │ ├── _blueprint.yaml
│ │ │ ├── author_develop
│ │ │ │ ├── _blueprint.yaml
│ │ │ │ ├── ads_on_amp
│ │ │ │ │ ├── _blueprint.yaml
│ │ │ │ │ ├── ads_getting_started.md
│ │ │ │ │ ├── [email protected]
│ │ │ │ │ ├── ads_tips.md
│ │ │ │ │ └── [email protected]
│ │ │ │ ├── ads_on_amp.md
│ │ │ │ ├── [email protected]
│ │ │ │ ├── amp_replacements.md
│ │ │ │ ├── [email protected]
│ │ │ │ ├── iframes.md
│ │ │ │ ├── [email protected]
│ │ │ │ ├── responsive_amp
│ │ │ │ │ ├── _blueprint.yaml
│ │ │ │ │ ├── art_direction.md
│ │ │ │ │ ├── [email protected]
│ │ │ │ │ ├── control_layout.md
│ │ │ │ │ ├── [email protected]
│ │ │ │ │ ├── [email protected]
│ │ │ │ │ ├── [email protected]
│ │ │ │ │ ├── [email protected]
│ │ │ │ │ ├── [email protected]
│ │ │ │ │ ├── [email protected]
│ │ │ │ │ ├── [email protected]
│ │ │ │ │ ├── [email protected]
│ │ │ │ │ ├── [email protected]
│ │ │ │ │ ├── control_layout@pt_BR.md
│ │ │ │ │ ├── [email protected]
│ │ │ │ │ ├── [email protected]
│ │ │ │ │ ├── [email protected]
│ │ │ │ │ ├── control_layout@zh_CN.md
│ │ │ │ │ ├── custom_fonts.md
│ │ │ │ │ ├── [email protected]
│ │ │ │ │ ├── placeholders.md
│ │ │ │ │ ├── [email protected]
│ │ │ │ │ ├── style_pages.md
│ │ │ │ │ ├── [email protected]
│ │ │ │ │ ├── [email protected]
│ │ │ │ │ ├── [email protected]
│ │ │ │ │ ├── [email protected]
│ │ │ │ │ ├── [email protected]
│ │ │ │ │ ├── [email protected]
│ │ │ │ │ ├── [email protected]
│ │ │ │ │ ├── [email protected]
│ │ │ │ │ ├── [email protected]
│ │ │ │ │ ├── style_pages@pt_BR.md
│ │ │ │ │ ├── [email protected]
│ │ │ │ │ ├── [email protected]
│ │ │ │ │ ├── [email protected]
│ │ │ │ │ └── style_pages@zh_CN.md
│ │ │ │ ├── responsive_amp.md
│ │ │ │ ├── [email protected]
│ │ │ │ ├── [email protected]
│ │ │ │ ├── [email protected]
│ │ │ │ ├── [email protected]
│ │ │ │ ├── [email protected]
│ │ │ │ ├── [email protected]
│ │ │ │ ├── [email protected]
│ │ │ │ ├── [email protected]
│ │ │ │ ├── [email protected]
│ │ │ │ ├── responsive_amp@pt_BR.md
│ │ │ │ ├── [email protected]
│ │ │ │ ├── [email protected]
│ │ │ │ ├── [email protected]
│ │ │ │ ├── responsive_amp@zh_CN.md
│ │ │ │ ├── third_party_components.md
│ │ │ │ ├── [email protected]
│ │ │ │ ├── [email protected]
│ │ │ │ ├── [email protected]
│ │ │ │ ├── [email protected]
│ │ │ │ ├── [email protected]
│ │ │ │ ├── [email protected]
│ │ │ │ ├── [email protected]
│ │ │ │ ├── [email protected]
│ │ │ │ ├── [email protected]
│ │ │ │ ├── third_party_components@pt_BR.md
│ │ │ │ ├── [email protected]
│ │ │ │ ├── [email protected]
│ │ │ │ ├── [email protected]
│ │ │ │ └── third_party_components@zh_CN.md
│ │ │ ├── author_develop.md
│ │ │ ├── debug
│ │ │ │ ├── _blueprint.yaml
│ │ │ │ ├── validate.md
│ │ │ │ ├── [email protected]
│ │ │ │ ├── [email protected]
│ │ │ │ ├── [email protected]
│ │ │ │ ├── [email protected]
│ │ │ │ ├── [email protected]
│ │ │ │ ├── [email protected]
│ │ │ │ ├── [email protected]
│ │ │ │ ├── [email protected]
│ │ │ │ ├── [email protected]
│ │ │ │ ├── validate@pt_BR.md
│ │ │ │ ├── [email protected]
│ │ │ │ ├── [email protected]
│ │ │ │ ├── [email protected]
│ │ │ │ └── validate@zh_CN.md
│ │ │ ├── debug.md
│ │ │ ├── deploy
│ │ │ │ ├── _blueprint.yaml
│ │ │ │ ├── analytics_amp
│ │ │ │ │ ├── _blueprint.yaml
│ │ │ │ │ ├── analytics_basics.md
│ │ │ │ │ ├── [email protected]
│ │ │ │ │ ├── [email protected]
│ │ │ │ │ ├── [email protected]
│ │ │ │ │ ├── [email protected]
│ │ │ │ │ ├── [email protected]
│ │ │ │ │ ├── [email protected]
│ │ │ │ │ ├── [email protected]
│ │ │ │ │ ├── [email protected]
│ │ │ │ │ ├── [email protected]
│ │ │ │ │ ├── analytics_basics@pt_BR.md
│ │ │ │ │ ├── [email protected]
│ │ │ │ │ ├── [email protected]
│ │ │ │ │ ├── [email protected]
│ │ │ │ │ ├── analytics_basics@zh_CN.md
│ │ │ │ │ ├── deep_dive_analytics.md
│ │ │ │ │ ├── [email protected]
│ │ │ │ │ ├── [email protected]
│ │ │ │ │ ├── [email protected]
│ │ │ │ │ ├── [email protected]
│ │ │ │ │ ├── [email protected]
│ │ │ │ │ ├── [email protected]
│ │ │ │ │ ├── [email protected]
│ │ │ │ │ ├── [email protected]
│ │ │ │ │ ├── [email protected]
│ │ │ │ │ ├── deep_dive_analytics@pt_BR.md
│ │ │ │ │ ├── [email protected]
│ │ │ │ │ ├── [email protected]
│ │ │ │ │ ├── [email protected]
│ │ │ │ │ ├── deep_dive_analytics@zh_CN.md
│ │ │ │ │ ├── use_cases.md
│ │ │ │ │ ├── [email protected]
│ │ │ │ │ ├── [email protected]
│ │ │ │ │ ├── [email protected]
│ │ │ │ │ ├── [email protected]
│ │ │ │ │ ├── [email protected]
│ │ │ │ │ ├── [email protected]
│ │ │ │ │ ├── [email protected]
│ │ │ │ │ ├── [email protected]
│ │ │ │ │ ├── [email protected]
│ │ │ │ │ ├── use_cases@pt_BR.md
│ │ │ │ │ ├── [email protected]
│ │ │ │ │ ├── [email protected]
│ │ │ │ │ ├── [email protected]
│ │ │ │ │ └── use_cases@zh_CN.md
│ │ │ │ ├── analytics_amp.md
│ │ │ │ ├── [email protected]
│ │ │ │ ├── [email protected]
│ │ │ │ ├── [email protected]
│ │ │ │ ├── [email protected]
│ │ │ │ ├── [email protected]
│ │ │ │ ├── [email protected]
│ │ │ │ ├── [email protected]
│ │ │ │ ├── [email protected]
│ │ │ │ ├── [email protected]
│ │ │ │ ├── analytics_amp@pt_BR.md
│ │ │ │ ├── [email protected]
│ │ │ │ ├── [email protected]
│ │ │ │ ├── [email protected]
│ │ │ │ ├── analytics_amp@zh_CN.md
│ │ │ │ ├── discovery.md
│ │ │ │ ├── [email protected]
│ │ │ │ ├── [email protected]
│ │ │ │ ├── [email protected]
│ │ │ │ ├── [email protected]
│ │ │ │ ├── [email protected]
│ │ │ │ ├── [email protected]
│ │ │ │ ├── [email protected]
│ │ │ │ ├── [email protected]
│ │ │ │ ├── [email protected]
│ │ │ │ ├── discovery@pt_BR.md
│ │ │ │ ├── [email protected]
│ │ │ │ ├── [email protected]
│ │ │ │ ├── [email protected]
│ │ │ │ ├── discovery@zh_CN.md
│ │ │ │ ├── engagement.md
│ │ │ │ └── [email protected]
│ │ │ ├── deploy.md
│ │ │ └── embed
│ │ │ ├── _blueprint.yaml
│ │ │ └── login-paywalls.md
│ │ ├── guides.md
│ │ ├── reference
│ │ │ ├── _blueprint.yaml
│ │ │ ├── common_attributes.md
│ │ │ ├── components
│ │ │ │ ├── _blueprint.yaml
│ │ │ │ ├── ads-analytics
│ │ │ │ │ └── _blueprint.yaml
│ │ │ │ ├── dynamic-content
│ │ │ │ │ └── _blueprint.yaml
│ │ │ │ ├── layout
│ │ │ │ │ └── _blueprint.yaml
│ │ │ │ ├── media
│ │ │ │ │ └── _blueprint.yaml
│ │ │ │ ├── presentation
│ │ │ │ │ └── _blueprint.yaml
│ │ │ │ └── social
│ │ │ │ └── _blueprint.yaml
│ │ │ ├── components.md
│ │ │ ├── experimental.md
│ │ │ ├── [email protected]
│ │ │ ├── [email protected]
│ │ │ ├── [email protected]
│ │ │ ├── [email protected]
│ │ │ ├── [email protected]
│ │ │ ├── [email protected]
│ │ │ ├── [email protected]
│ │ │ ├── [email protected]
│ │ │ ├── experimental@pt_BR.md
│ │ │ ├── [email protected]
│ │ │ ├── [email protected]
│ │ │ ├── [email protected]
│ │ │ ├── experimental@zh_CN.md
│ │ │ ├── validation_errors.md
│ │ │ ├── [email protected]
│ │ │ ├── [email protected]
│ │ │ ├── [email protected]
│ │ │ ├── [email protected]
│ │ │ ├── [email protected]
│ │ │ ├── [email protected]
│ │ │ ├── [email protected]
│ │ │ ├── [email protected]
│ │ │ ├── validation_errors@pt_BR.md
│ │ │ ├── [email protected]
│ │ │ ├── [email protected]
│ │ │ ├── [email protected]
│ │ │ └── validation_errors@zh_CN.md
│ │ ├── reference.md
│ │ └── tutorials.md
│ ├── includes
│ │ ├── _blueprint.yaml
│ │ ├── amp-conf-2017.yaml
│ │ ├── amp-iframe.md
│ │ ├── blog_feed.yaml
│ │ ├── doc.yaml
│ │ ├── events.yaml
│ │ ├── home.yaml
│ │ ├── html-example.md
│ │ ├── latest.yaml
│ │ ├── list-blog.yaml
│ │ ├── lists.yaml
│ │ ├── menu.yaml
│ │ ├── roadmap.yaml
│ │ └── tweets.yaml
│ ├── latest
│ │ ├── _blueprint.yaml
│ │ ├── blog
│ │ │ ├── _blueprint.yaml
│ │ │ ├── 1056.md
│ │ │ ├── ads-on-the-web-will-get-better-with-amp-heres-how.md
│ │ │ ├── amp-roadmap-update-for-mid-q1-2017.md
│ │ │ ├── amp-up-for-amp-conf-2017.md
│ │ │ ├── grow-your-business-with-ads-on-amp.md
│ │ │ ├── new-default-placeholders-for-ads-in-amp.md
│ │ │ ├── new-industry-benchmarks-for-mobile-page-speed.md
│ │ │ ├── speeding-up-news-apps-with-amp.md
│ │ │ ├── whats-in-an-amp-url.md
│ │ │ └── why-amp-caches-exist.md
│ │ ├── latest.html
│ │ ├── list-blog.html
│ │ ├── list-event.html
│ │ ├── list-past-event.html
│ │ └── roadmap.html
│ ├── learn
│ │ ├── _blueprint.yaml
│ │ ├── about-amp.md
│ │ ├── [email protected]
│ │ ├── [email protected]
│ │ ├── [email protected]
│ │ ├── [email protected]
│ │ ├── [email protected]
│ │ ├── [email protected]
│ │ ├── [email protected]
│ │ ├── [email protected]
│ │ ├── [email protected]
│ │ ├── about-amp@pt_BR.md
│ │ ├── [email protected]
│ │ ├── [email protected]
│ │ ├── [email protected]
│ │ ├── about-amp@zh_CN.md
│ │ ├── about-how.yaml
│ │ ├── [email protected]
│ │ ├── [email protected]
│ │ ├── [email protected]
│ │ ├── [email protected]
│ │ ├── [email protected]
│ │ ├── [email protected]
│ │ ├── [email protected]
│ │ ├── [email protected]
│ │ ├── about-how@pt_BR.yaml
│ │ ├── [email protected]
│ │ ├── [email protected]
│ │ ├── [email protected]
│ │ ├── about-how@zh_CN.yaml
│ │ ├── amp-design-principles.yaml
│ │ ├── browsers.md
│ │ ├── case-studies
│ │ │ ├── _blueprint.yaml
│ │ │ ├── category
│ │ │ │ ├── _blueprint.yaml
│ │ │ │ ├── advertisers.md
│ │ │ │ └── publishers.md
│ │ │ ├── gizmodo.md
│ │ │ ├── hearst.md
│ │ │ ├── milestone.md
│ │ │ ├── plista.md
│ │ │ ├── relay_media.md
│ │ │ ├── slate.md
│ │ │ ├── teads.md
│ │ │ ├── terra.md
│ │ │ ├── washingtonpost.md
│ │ │ └── wired.md
│ │ ├── case-studies.html
│ │ ├── how-amp-works.md
│ │ ├── [email protected]
│ │ ├── [email protected]
│ │ ├── [email protected]
│ │ ├── [email protected]
│ │ ├── [email protected]
│ │ ├── [email protected]
│ │ ├── [email protected]
│ │ ├── [email protected]
│ │ ├── how-amp-works@pt_BR.md
│ │ ├── [email protected]
│ │ ├── [email protected]
│ │ ├── [email protected]
│ │ ├── how-amp-works@zh_CN.md
│ │ ├── metrics.html
│ │ ├── overview.yaml
│ │ ├── [email protected]
│ │ ├── [email protected]
│ │ ├── [email protected]
│ │ ├── [email protected]
│ │ ├── [email protected]
│ │ ├── [email protected]
│ │ ├── [email protected]
│ │ ├── [email protected]
│ │ ├── [email protected]
│ │ ├── overview@pt_BR.yaml
│ │ ├── [email protected]
│ │ ├── [email protected]
│ │ ├── [email protected]
│ │ ├── overview@zh_CN.yaml
│ │ ├── who
│ │ │ ├── _blueprint.yaml
│ │ │ ├── ad-tech-platforms.yaml
│ │ │ ├── advertisers.yaml
│ │ │ ├── amp-ads.yaml
│ │ │ └── publishers.yaml
│ │ └── who-uses-amp.yaml
│ ├── pages
│ │ ├── _blueprint.yaml
│ │ ├── amp-conf-2017
│ │ │ ├── _blueprint.yaml
│ │ │ ├── accessibility.html
│ │ │ └── code-of-conduct.html
│ │ ├── amp-conf-2017.html
│ │ ├── home.html
│ │ ├── how-it-works.html
│ │ └── metrics_chart.html
│ └── support
│ ├── _blueprint.yaml
│ ├── developer
│ │ ├── _blueprint.yaml
│ │ ├── documentation-bug.md
│ │ ├── mailing-list.md
│ │ ├── platform-bug.md
│ │ ├── slack.md
│ │ └── stack-overflow.md
│ ├── developer.md
│ ├── faqs
│ │ ├── _blueprint.yaml
│ │ ├── overview.md
│ │ ├── [email protected]
│ │ ├── [email protected]
│ │ ├── [email protected]
│ │ ├── [email protected]
│ │ ├── [email protected]
│ │ ├── [email protected]
│ │ ├── [email protected]
│ │ ├── [email protected]
│ │ ├── overview@pt_BR.md
│ │ ├── [email protected]
│ │ ├── [email protected]
│ │ ├── [email protected]
│ │ ├── overview@zh_CN.md
│ │ ├── platform-involvement.md
│ │ ├── [email protected]
│ │ ├── [email protected]
│ │ ├── [email protected]
│ │ ├── [email protected]
│ │ ├── [email protected]
│ │ ├── [email protected]
│ │ ├── [email protected]
│ │ ├── [email protected]
│ │ ├── platform-involvement@pt_BR.md
│ │ ├── [email protected]
│ │ ├── [email protected]
│ │ ├── [email protected]
│ │ ├── platform-involvement@zh_CN.md
│ │ ├── publisher-monetization.md
│ │ ├── [email protected]
│ │ ├── [email protected]
│ │ ├── [email protected]
│ │ ├── [email protected]
│ │ ├── [email protected]
│ │ ├── [email protected]
│ │ ├── [email protected]
│ │ ├── [email protected]
│ │ ├── publisher-monetization@pt_BR.md
│ │ ├── [email protected]
│ │ ├── [email protected]
│ │ ├── [email protected]
│ │ ├── publisher-monetization@zh_CN.md
│ │ └── supported-platforms.md
│ ├── faqs.md
│ ├── platform.md
│ ├── support.md
│ ├── vendor
│ │ ├── _blueprint.yaml
│ │ └── amp-certification.md
│ └── vendor.md
├── CONTRIBUTING.md
├── firebase.json
├── gulpfile.js
├── LICENSE
├── npm-shrinkwrap.json
├── package.json
├── podspec.yaml
├── pwa
│ ├── google7199ce9da1ad191b.html
│ ├── pwa.html
│ ├── pwa.js
│ └── service-worker.js
├── README.md
├── scripts
│ ├── component_categories.json
│ ├── import_docs.js
│ ├── import_docs.json
│ ├── update_blog_links.js
│ ├── update_platforms_page.js
│ └── update_tweets.js
├── translations
│ ├── ar
│ │ └── LC_MESSAGES
│ │ └── messages.po
│ ├── de
│ │ └── LC_MESSAGES
│ │ └── messages.po
│ ├── es
│ │ └── LC_MESSAGES
│ │ └── messages.po
│ ├── fr
│ │ └── LC_MESSAGES
│ │ └── messages.po
│ ├── id
│ │ └── LC_MESSAGES
│ │ └── messages.po
│ ├── it
│ │ └── LC_MESSAGES
│ │ └── messages.po
│ ├── ja
│ │ └── LC_MESSAGES
│ │ └── messages.po
│ ├── ko
│ │ └── LC_MESSAGES
│ │ └── messages.po
│ ├── messages.pot
│ ├── pl
│ │ └── LC_MESSAGES
│ │ └── messages.po
│ ├── pt_BR
│ │ └── LC_MESSAGES
│ │ └── messages.po
│ ├── ru
│ │ └── LC_MESSAGES
│ │ └── messages.po
│ ├── th
│ │ └── LC_MESSAGES
│ │ └── messages.po
│ ├── tr
│ │ └── LC_MESSAGES
│ │ └── messages.po
│ └── zh_CN
│ └── LC_MESSAGES
│ └── messages.po
└── views
├── about-casestudies.html
├── about-how.html
├── about-overview.html
├── about-who-vertical.html
├── about-who.html
├── base.html
├── blank.html
├── blog_detail.html
├── case-study.html
├── design-principles.html
├── doc.html
├── grid_page.html
├── list_page.html
├── partials
│ ├── breadcrumb-nav.html
│ ├── doc_nav.html
│ ├── faq-accordion.html
│ ├── footer-cta.html
│ ├── footer.html
│ ├── grid-card.html
│ ├── head.html
│ ├── header.html
│ ├── lang_switcher.html
│ ├── large-cta.html
│ ├── lines.html
│ ├── nav.html
│ ├── points.html
│ ├── post-item.html
│ ├── promo_banner.html
│ ├── search.html
│ ├── share.html
│ ├── sidebar.html
│ └── sub_nav.html
└── section_page.html
```
# Files
--------------------------------------------------------------------------------
/assets/sass/pages/_about-overview.scss:
--------------------------------------------------------------------------------
```scss
.about-overview {
.wrap {
overflow: hidden;
position: relative;
&::after {
background: url(/static/img/about/overview/bg2.svg) bottom left/contain no-repeat;
bottom: 0;
content: '';
height: 68vw;
left: 0;
position: absolute;
width: 90vw;
z-index: -1;
}
}
.about-overview-block {
position: relative;
z-index: 1;
}
.hero {
margin: 100px 0 300px;
position: relative;
padding: 100px 5% 140px 5%;
.images {
position: absolute;
width: 800px;
left: 700px;
top: 30px;
amp-img {
position: absolute;
width: 100%;
}
.triangle {
right: calc((1440px - 100vw)/2);
top: -250px;
}
.line1 {
left: 0;
top: -10px;
width: 583px;
}
.line2 {
left: 75%;
top: -50px;
width: 359px;
}
.phone {
left: -5%;
top: 0px;
transform: rotate(25deg) scale(1.4);
width: 90%;
}
}
.text {
width: 510px;
h1 {
margin-bottom: 50px;
max-width: 500px;
}
}
}
.core {
h2 {
margin: 0 auto;
max-width: 550px;
text-align: center;
}
amp-accordion {
border-top: 2px solid #eaeaea;
margin: 50px auto;
max-width: 800px;
section {
border-bottom: 2px solid #eaeaea;
padding: 20px 0 30px;
&[expanded] {
h4::after {
opacity: 0;
}
}
}
header, .core-content {
padding: 0 40px;
}
header {
background: none;
border: 0;
h4 {
color: $color-ampblue;
position: relative;
&::before, &::after {
background: $gradient-bold;
content: '';
left: -30px;
height: 2px;
position: absolute;
top: 15px;
width: 10px;
}
&::after {
transform: rotate(90deg);
}
}
}
.core-content {
p {
margin: 30px 0;
}
.code {
margin: 0 -30px;
}
a {
font-size: 20px;
text-transform: none;
}
}
}
}
.video {
margin: 200px auto;
max-width: 800px;
padding: 0 30px;
position: relative;
.line1 {
position: absolute;
left: -32%;
top: 9%;
width: 563px;
}
.line2 {
bottom: -10%;
position: absolute;
right: -10%;
width: 254px;
}
}
@include max-screen(1440px) {
.hero {
.triangle {
right: -22px;
}
}
}
@include max-screen($mobile-breakpoint) {
.hero {
display: flex;
flex-direction: column;
margin-bottom: 100px;
padding: 0;
.images {
position: relative;
order: 1;
height: 100vw;
left: auto;
width: 100vw;
top: 30px;
.triangle {
right: 0;
top: -20%;
width: 90%;
}
.line1 {
left: 20%;
top: 10%;
width: 80%;
}
.line2 {
display: none;
}
.phone {
width: 80%;
top: 20%;
left: 10%;
}
}
.text {
margin: 0 auto;
order: 0;
text-align: center;
h1 {
margin: 0 auto 50px;
}
}
}
.core amp-accordion .core-content a {
font-size: 16px;
}
}
@include max-screen($tablet-portrait-breakpoint) {
.wrap {
&::after {
height: 91vw;
bottom: 170px;
width: 120vw;
}
}
.hero {
// padding-top: 480px;
.text {
width: 100%;
h2,
& > p {
width: 100%;
}
}
}
.core amp-accordion {
section {
padding: 10px 0 8px;
}
header {
h4 {
&::before, &::after {
left: -16px;
top: 10px;
}
}
}
header, .core-content {
padding: 0 20px;
.code {
margin: 10px 25px;
}
p {
margin: 10px 0;
}
a {
font-size: 16px;
}
}
}
.video {
margin: 50px auto 100px;
}
}
}
.rtl.about-overview {
.hero {
.images {
right: 700px;
left: auto;
.triangle {
left: calc((1440px - 100vw)/2);
right: auto;
transform: rotate(180deg);
}
}
}
@include max-screen($mobile-breakpoint) {
.hero .images {
right: auto;
.triangle {
left: 0;
}
}
}
}
```
--------------------------------------------------------------------------------
/assets/sass/_syntax_highlighting.scss:
--------------------------------------------------------------------------------
```scss
/**
* Code formatting
*/
pre,
code,
kbd,
samp,
tt{
font-family: $font-family-mono;
font-size: 14px;
background: $color-white;
border: 1px solid #e7f2f9;
border-radius: 3px;
color: $color-black-95;
}
code {
background: #f6fcfd;
font-size: 15px;
padding: 2px 5px;
}
a {
code {
@extend a.underlined;
color: $color-black-95;
white-space: nowrap;
}
&:hover code {
color: #1c79be;
}
}
h1,
h2,
h3,
h4,
h5 {
code {
background: none;
border: 0;
font-size: 0.9em;
}
}
.rtl code {
direction: ltr;
}
/**
* Syntax highlighting styles
*/
pre {
background: #f6fcfd;
border-color: #e7f2f9;
overflow: auto;
tab-size: 2;
word-break: normal;
line-height: 1.4;
padding: 1em;
> code {
white-space: pre;
word-wrap: initial;
display: block;
td {
border: 0;
}
}
}
@include max-screen($mobile-breakpoint) {
.code pre {
margin: 0 -25px;
}
code {
font-size: 13px;
}
table {
a code {
line-height: 2;
white-space: normal;
}
}
}
.highlight {
.hll { background-color: #ffffcc }
.c { color: #0099FF; font-style: italic } /* Comment */
.k { color: #006699; font-weight: bold } /* Keyword */
.o { color: #555555 } /* Operator */
.cm { color: #0099FF; font-style: italic } /* Comment.Multiline */
.cp { color: #009999 } /* Comment.Preproc */
.c1 { color: #0099FF; font-style: italic } /* Comment.Single */
.cs { color: #0099FF; font-weight: bold; font-style: italic } /* Comment.Special */
.gd { background-color: #FFCCCC; border: 1px solid #CC0000 } /* Generic.Deleted */
.ge { font-style: italic } /* Generic.Emph */
.gr { color: #FF0000 } /* Generic.Error */
.gh { color: #003300; font-weight: bold } /* Generic.Heading */
.gi { background-color: #CCFFCC; border: 1px solid #00CC00 } /* Generic.Inserted */
.go { color: #848484; } /* Generic.Output */
.gp { color: #000099; font-weight: bold } /* Generic.Prompt */
.gs { font-weight: bold } /* Generic.Strong */
.gu { color: #003300; font-weight: bold } /* Generic.Subheading */
.gt { color: #99CC66 } /* Generic.Traceback */
.kc { color: #006699; font-weight: bold } /* Keyword.Constant */
.kd { color: #006699; font-weight: bold } /* Keyword.Declaration */
.kn { color: #006699; font-weight: bold } /* Keyword.Namespace */
.kp { color: #006699 } /* Keyword.Pseudo */
.kr { color: #006699; font-weight: bold } /* Keyword.Reserved */
.kt { color: #007788; font-weight: bold } /* Keyword.Type */
.m { color: #FF6600 } /* Literal.Number */
.s { color: #CC3300 } /* Literal.String */
.na { color: #1867a3 } /* Name.Attribute */
.nb { color: #336666 } /* Name.Builtin */
.nc { color: #00AA88; font-weight: bold } /* Name.Class */
.no { color: #336600 } /* Name.Constant */
.nd { color: #9999FF } /* Name.Decorator */
.ni { color: #999999; font-weight: bold } /* Name.Entity */
.ne { color: #CC0000; font-weight: bold } /* Name.Exception */
.nf { color: #CC00FF } /* Name.Function */
.nl { color: #9999FF } /* Name.Label */
.nn { color: #00CCFF; font-weight: bold } /* Name.Namespace */
.nt { color: #1867a3; font-weight: bold } /* Name.Tag */
.nv { color: #003333 } /* Name.Variable */
.ow { color: #000000; font-weight: bold } /* Operator.Word */
.w { color: #bbbbbb } /* Text.Whitespace */
.mf { color: #FF6600 } /* Literal.Number.Float */
.mh { color: #FF6600 } /* Literal.Number.Hex */
.mi { color: #FF6600 } /* Literal.Number.Integer */
.mo { color: #FF6600 } /* Literal.Number.Oct */
.sb { color: #CC3300 } /* Literal.String.Backtick */
.sc { color: #CC3300 } /* Literal.String.Char */
.sd { color: #CC3300; font-style: italic } /* Literal.String.Doc */
.s2 { color: #CC3300 } /* Literal.String.Double */
.se { color: #CC3300; font-weight: bold } /* Literal.String.Escape */
.sh { color: #CC3300 } /* Literal.String.Heredoc */
.si { color: #AA0000 } /* Literal.String.Interpol */
.sx { color: #CC3300 } /* Literal.String.Other */
.sr { color: #33AAAA } /* Literal.String.Regex */
.s1 { color: #CC3300 } /* Literal.String.Single */
.ss { color: #FFCC33 } /* Literal.String.Symbol */
.bp { color: #336666 } /* Name.Builtin.Pseudo */
.vc { color: #003333 } /* Name.Variable.Class */
.vg { color: #003333 } /* Name.Variable.Global */
.vi { color: #003333 } /* Name.Variable.Instance */
.il { color: #FF6600 } /* Literal.Number.Integer.Long */
}
/* Make line numbers unselectable: excludes line numbers from copy-paste user ops */
.highlight .lineno {-webkit-user-select: none;-moz-user-select: none; -o-user-select: none;}
.lineno::-moz-selection {background-color: transparent;} /* Mozilla specific */
.lineno::selection {background-color: transparent;} /* Other major browsers */
```
--------------------------------------------------------------------------------
/content/docs/guides/author_develop/[email protected]:
--------------------------------------------------------------------------------
```markdown
---
$title: Membuat Laman AMP Responsif
toc: true
---
Membuat elemen responsif di AMP sangatlah mudah.
Cukup masukkan `layout=responsive` ke elemen.
[TOC]
## Membuat gambar responsif
Semua sumber daya yang dimuat secara eksternal termasuk gambar,
harus memiliki ukuran dan posisi tertentu
sehingga ketika sumber daya dimuat, laman tidak akan melompat dan dan mengalir balik.
Buat gambar responsif
dengan menentukan lebar dan tinggi,
menyetel tata letak menjadi responsif,
dan mengindikasikan dengan [`srcset`](/docs/guides/responsive/style_pages.html)
aset gambar yang akan digunakan berdasarkan ukuran layar yang bervariasi:
[sourcecode:html]
<amp-img
src="/img/narrow.jpg"
srcset="/img/wide.jpg 640w,
/img/narrow.jpg 320w"
width="1698"
height="2911"
layout="responsive"
alt="an image">
</amp-img>
[/sourcecode]
Elemen `amp-img` ini secara otomatis disesuaikan dengan lebar
elemen kontennya,
dan tingginya secara otomatis disetel ke rasio aspek
yang ditentukan dengan lebar dan tinggi yang diberikan:
<amp-img src="/static/img/docs/responsive_amp_img.png" width="500" height="857"></amp-img>
Lihat juga [amp-img di AMP by Example](https://ampbyexample.com/components/amp-img/).
## Menambahkan gaya ke laman
Tambahkan semua gaya di dalam tag `<style amp-custom>`
di bagian head dokumen.
Misalnya:
[sourcecode:html]
<!doctype html>
<head>
<meta charset="utf-8">
<link rel="canonical" href="hello-world.html" >
<meta name="viewport" content="width=device-width,minimum-scale=1,initial-scale=1">
<style amp-boilerplate>body{-webkit-animation:-amp-start 8s steps(1,end) 0s 1 normal both;-moz-animation:-amp-start 8s steps(1,end) 0s 1 normal both;-ms-animation:-amp-start 8s steps(1,end) 0s 1 normal both;animation:-amp-start 8s steps(1,end) 0s 1 normal both}@-webkit-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@-moz-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@-ms-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@-o-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}</style><noscript><style amp-boilerplate>body{-webkit-animation:none;-moz-animation:none;-ms-animation:none;animation:none}</style></noscript>
<style amp-custom>
/* any custom style goes here. */
body {
background-color: white;
}
amp-img {
border: 5px solid black;
}
amp-img.grey-placeholder {
background-color: grey;
}
</style>
<script async src="https://cdn.ampproject.org/v0.js"></script>
</head>
[/sourcecode]
**Penting:**
Pastikan hanya ada satu tag `<style amp-custom>` di laman,
karena tidak boleh ada lebih dari satu tag di AMP.
Tentukan gaya komponen dengan pemilih elemen atau kelas
menggunakan properti CSS umum. Misalnya:
[sourcecode:html]
<body>
<p>Hello, Kitty.</p>
<amp-img
class="grey-placeholder"
src="https://placekitten.com/g/500/300"
srcset="/img/cat.jpg 640w,
/img/kitten.jpg 320w"
width="500"
height="300"
layout="responsive">
</amp-img>
</body>
[/sourcecode]
**Penting:**
Periksa bahwa gaya yang ditambahkan didukung di AMP;
beberapa gaya tidak untuk alasan performa
(lihat juga [CSS yang Didukung](/docs/guides/responsive/style_pages.html)).
## Ukuran dan posisi elemen
AMP melepaskan tata letak dokumen dari pemuatan sumber daya
sehingga AMP dapat memuat tata letak laman tanpa menunggu sumber daya didownload.
Tentukan ukuran dan posisi semua elemen AMP yang terlihat
dengan memberikan atribut `width` dan `height`.
Atribut ini mengartikan rasio aspek elemen,
yang kemudian dapat disesuaikan dengan penampung.
Setel tata letak menjadi responsif.
Tindakan ini menetapkan ukuran elemen ke lebar elemen penampungnya
dan otomatis mengubah ukuran tingginya ke rasio aspek yang diberikan oleh atribut lebar dan tinggi.
Pelajari lebih lanjut tentang [tata letak yang didukung di AMP](/docs/guides/responsive/control_layout.html).
## Memvalidasi gaya dan tata letak
Gunakan validator AMP untuk menguji
nilai CSS dan tata letak laman.
Validator mengonfirmasi bahwa CSS laman tidak melebihi batas 50.000 byte,
memeriksa gaya yang tidak diizinkan, serta memastikan bahwa tata letak didukung dan diformat dengan benar.
Lihat juga daftar lengkap [Kesalahan gaya dan tata letak](/docs/reference/validation_errors.html#style-and-layout-errors).
Contoh kesalahan di konsol untuk laman dengan CSS yang melebihi batas 50.000 byte:
<amp-img src="/static/img/docs/too_much_css.png" width="1404" height="334" layout="responsive"></amp-img>
Pelajari lebih lanjut tentang cara [memvalidasi laman AMP](/docs/guides/validate.html),
termasuk cara melacak dan memperbaiki kesalahan gaya.
```
--------------------------------------------------------------------------------
/content/learn/[email protected]:
--------------------------------------------------------------------------------
```markdown
---
$title: Qu'est-ce qu'AMP ?
---
[TOC]
<amp-youtube
data-videoid="lBTCB7yLs8Y"
layout="responsive"
width="480" height="270">
</amp-youtube>
AMP est une méthode de création de pages Web pour du contenu statique permettant un rendu rapide.
Dans la pratique, AMP se compose de trois parties :
**AMP HTML** est du HTML comportant certaines restrictions pour assurer des performances fiable,
ainsi que certaines extensions permettant de créer du contenu enrichi plus élaboré qu'avec le HTML de base.
La bibliothèque **AMP JS** garantit un rendu rapide des pages AMP HTML.
Le cache **Google AMP Cache** (en option) fournit les pages AMP HTML.
## AMP HTML
Pour faire simple, AMP HTML est du HTML étendu à l'aide de propriétés AMP personnalisées.
Le fichier AMP HTML le plus simple ressemble à ce qui suit :
[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]
Même si la plupart des balises sur une page AMP HTML sont des balises HTML standard,
certaines sont remplacées par des balises AMP spécifiques (voir également
[Balises HTML dans la spécification AMP](https://github.com/ampproject/amphtml/blob/master/spec/amp-html-format.md)).
Ces éléments personnalisés, appelés composants AMP HTML,
permettent d'implémenter facilement et efficacement des modèles communs.
Par exemple, la balise [`amp-img`](/docs/reference/amp-img.html)
offre une entière prise en charge de `srcset` même dans les navigateurs qui ne sont pas encore compatibles.
Découvrez comment [créer votre première page AMP HTML](/docs/get_started/create.html).
## AMP JS
La [bibliothèque AMP JS](https://github.com/ampproject/amphtml/tree/master/src) implémente
toutes les [meilleures pratiques d'AMP en termes d'efficacité](/docs/get_started/technical_overview.html),
gère le chargement des ressources et contient les balises personnalisées mentionnées ci-dessus,
et ce, pour un rendu rapide de la page.
L'une des plus grandes optimisations est la désynchronisation de tout ce qui provient de ressources externes, de sorte que rien sur la page ne peut bloquer le rendu des différents éléments.
D'autres techniques permettent de gagner en performance : le système de « sandbox » pour tous les iframes, la prédéfinition de la disposition de chaque élément sur la page avant le chargement des ressources et la désactivation des sélecteurs CSS lents.
Pour en savoir plus sur les [optimisations](/docs/get_started/technical_overview.html) et les limitations, [lire la spécification AMP HTML](https://github.com/ampproject/amphtml/blob/master/spec/amp-html-format.md).
## Google AMP Cache
Google AMP Cache est un réseau de distribution de contenus basé sur proxy
qui fournit tous les documents AMP valides.
Il extrait les pages AMP HTML, les stocke en mémoire cache et améliore automatiquement la performance des pages.
Avec Google AMP Cache, le document, tous les fichiers JS et toutes les images se chargent
à partir d'une source, laquelle utilise
[HTTP 2.0](https://http2.github.io/) pour une efficacité optimale.
Ce cache intègre également un
[système de validation](https://github.com/ampproject/amphtml/tree/master/validator)
qui vérifie le bon fonctionnement de la page
et sa non dépendance vis-à-vis de ressources externes.
Le système de validation applique une série d'assertions
pour vérifier que le balisage de la page est conforme à la spécification AMP HTML.
Une autre version du système de validation est intégrée à chaque page AMP. Cette version peut consigner les erreurs de validation directement dans la console du navigateur lors du rendu de la page
pour vous permettre de connaître l'impact des changements de code
complexes sur la performance et l'expérience utilisateur.
En savoir plus sur le [test des pages AMP HTML](/docs/guides/validate.html).
```
--------------------------------------------------------------------------------
/content/docs/guides/author_develop/[email protected]:
--------------------------------------------------------------------------------
```markdown
---
$title: Dołączanie treści innych firm
---
Dowiedz się, jak umieszczać na swoich stronach komponenty innych firm.
[TOC]
## Umieszczanie tweeta
Tweety umieszcza się na stronie
za pomocą elementu [`amp-twitter`](/docs/reference/extended/amp-twitter.html).
Aby umieścić tweet na stronie,
w sekcji `<head>` umieść najpierw taki skrypt:
[sourcecode:html]
<script async custom-element="amp-twitter" src="https://cdn.ampproject.org/v0/amp-twitter-0.1.js"></script>
[/sourcecode]
Obecnie tweety są automatycznie skalowane tak,
by ich proporcje pasowały do podanego rozmiaru.
Może się jednak zdarzyć tak, że nie będą wyglądały
tak ładnie, jak powinny.
Aby wybrać współczynnik proporcji na podstawie szerokości ekranu, ręcznie dostosuj podane wartości dla szerokości i wysokości albo użyj atrybutu media.
Przykładowy element `amp-twitter` ze strony
[twitter.amp](https://github.com/ampproject/amphtml/blob/master/examples/twitter.amp.html):
[sourcecode:html]
<amp-twitter width=390 height=50
layout="responsive"
data-tweetid="638793490521001985">
</amp-twitter>
[/sourcecode]
## Umieszczanie elementu z Instagrama
Posty z Instagrama umieszcza się
na stronie za pomocą elementu [`amp-instagram`](/docs/reference/extended/amp-instagram.html).
Aby na stronie umieścić element z Instagrama,
w sekcji `<head>` umieść najpierw taki skrypt:
[sourcecode:html]
<script async custom-element="amp-instagram" src="https://cdn.ampproject.org/v0/amp-instagram-0.1.js"></script>
[/sourcecode]
Umieść fragment kodu (shortcode) Instagrama skopiowany z adresu URL zdjęcia.
Na przykład w adresie `https://instagram.com/p/fBwFP`
shortcode to `fBwFP`.
Instagram używa także z góry ustalonego współczynnika proporcji dla układów elastycznych, więc wartości szerokości i wysokości powinny być uniwersalne.
[sourcecode:html]
<amp-instagram
data-shortcode="fBwFP"
width="320"
height="392"
layout="responsive">
</amp-instagram>
[/sourcecode]
## Wyświetlanie postów i filmów z Facebooka
Posty i filmy z Facebooka wyświetla się za pomocą elementu [`amp-facebook`](/docs/reference/extended/amp-facebook.html).
W sekcji `<head>` trzeba dodać dodać następujący skrypt:
[sourcecode:html]
<script async custom-element="amp-facebook" src="https://cdn.ampproject.org/v0/amp-facebook-0.1.js"></script>
[/sourcecode]
Przykład – umieszczanie posta:
[sourcecode:html]
<amp-facebook width=486 height=657
layout="responsive"
data-href="https://www.facebook.com/zuck/posts/10102593740125791">
</amp-facebook>
[/sourcecode]
Przykład – umieszczanie filmu:
[sourcecode:html]
<amp-facebook width=552 height=574
layout="responsive"
data-embed-as="video"
data-href="https://www.facebook.com/zuck/videos/10102509264909801/">
</amp-facebook>
[/sourcecode]
## Umieszczanie filmów z YouTube
Filmy z YouTube umieszcza się na stronie
za pomocą elementu [`amp-youtube`](/docs/reference/extended/amp-youtube.html).
W tagu `<head>` trzeba dodać następujący skrypt:
[sourcecode:html]
<script async custom-element="amp-youtube" src="https://cdn.ampproject.org/v0/amp-youtube-0.1.js"></script>
[/sourcecode]
Element `data-videoid` jest obecny w adresie URL każdej strony serwisu YouTube.
Na przykład w adresie https://www.youtube.com/watch?v=Z1q71gFeRqM
ciąg znaków Z1q71gFeRqM to identyfikator filmu.
Za pomocą parametru `layout="responsive"` uzyskasz poprawne układy dla filmów o współczynniku proporcji 16:9:
[sourcecode:html]
<amp-youtube
data-videoid="mGENRKrdoGY"
layout="responsive"
width="480" height="270">
</amp-youtube>
[/sourcecode]
## Wyświetlanie reklam
Reklamy wyświetla się na stronie
za pomocą elementu [`amp-ad`](/docs/reference/amp-ad.html).
Obsługiwane są tylko reklamy wyświetlane za pomocą protokołu HTTPS.
Dokumenty AMP nie zezwalają na umieszczanie w nich reklam korzystających z JavaScriptu.
Zamiast tego technologia AMP ładuje element iframe
z innego źródła (poprzez piaskownicę iframe)
i wykonuje JavaScript reklamy wewnątrz piaskownicy iframe.
Należy określić szerokość i wysokość reklamy oraz rodzaj sieci reklamowej.
Atrybut `type` identyfikuje szablon sieci reklamowej.
Różne rodzaje sieci reklamowych wymagają innych atrybutów `data-*`.
[sourcecode:html]
<amp-ad width=300 height=250
type="example"
data-aax_size="300x250"
data-aax_pubname="test123"
data-aax_src="302">
</amp-ad>
[/sourcecode]
Jeśli sieć reklamowa go obsługuje,
użyj elementu `placeholder`, który
będzie się wyświetlał w przypadku braku reklamy:
[sourcecode:html]
<amp-ad width=300 height=250
type="example"
data-aax_size="300x250"
data-aax_pubname="test123"
data-aax_src="302">
<div placeholder>Have a great day!</div>
</amp-ad>
[/sourcecode]
AMP obsługuje szeroką gamę sieci reklamowych. Zobacz [ich pełną listę](/docs/reference/amp-ad.html#supported-ad-networks).
```
--------------------------------------------------------------------------------
/content/learn/[email protected]:
--------------------------------------------------------------------------------
```markdown
---
$title: Co to jest AMP?
---
[TOC]
<amp-youtube
data-videoid="lBTCB7yLs8Y"
layout="responsive"
width="480" height="270">
</amp-youtube>
AMP to sposób tworzenia szybko renderowanych stron internetowych dla statycznych treści.
W działaniu AMP składa się z trzech części:
**AMP HTML** to kod HTML z pewnymi ograniczeniami zapewniającymi niezawodne działanie
oraz pewnymi rozszerzeniami, które umożliwiają tworzenie zaawansowanych treści wykraczających poza podstawowy kod HTML.
Biblioteka **AMP JS** zapewnia szybkie renderowanie stron AMP HTML.
Strony AMP HTML są opcjonalnie dostarczane z **pamięci podręcznej Google AMP Cache**.
## AMP HTML
AMP HTML to w zasadzie HTML rozszerzony o niestandardowe właściwości AMP.
Najprostszy plik AMP HTML wygląda następująco:
[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]
Chociaż większość znaczników na stronie AMP HTML to zwykłe tagi HTML,
niektóre tagi HTML zostały zastąpione przez tagi właściwe dla AMP (zobacz też
[HTML Tags in the AMP spec](https://github.com/ampproject/amphtml/blob/master/spec/amp-html-format.md) — Tagi HTML w specyfikacji AMP).
Te niestandardowe elementy, nazywane komponentami AMP HTML,
ułatwiają efektywną implementację typowych wzorców.
Na przykład znacznik [`amp-img`](/docs/reference/amp-img.html)
udostępnia pełną obsługę atrybutu `srcset` także w przeglądarkach, które go jeszcze nie obsługują.
Dowiedz się, jak [utworzyć swoją pierwszą stronę AMP HTML](/docs/get_started/create.html).
## AMP JS
[Biblioteka AMP JS](https://github.com/ampproject/amphtml/tree/master/src) implementuje
wszystkie [najlepsze praktyki dotyczące wydajności AMP](/docs/get_started/technical_overview.html),
zarządza ładowaniem zasobów oraz udostępnia niestandardowe znaczniki wspomniane powyżej,
aby zapewnić jak najszybsze renderowanie strony.
Do najistotniejszych optymalizacji należy to, że wszystkie dane pochodzące z zasobów zewnętrznych są przetwarzane asynchronicznie, dzięki czemu żaden element strony nie może blokować renderowania.
Inne techniki zwiększające wydajność obejmują piaskownice dla wszystkich ramek iframe, wstępne obliczanie układu każdego elementu na stronie przed załadowaniem zasobów i wyłączanie powolnych selektorów CSS.
Aby dowiedzieć się więcej nie tylko o [optymalizacjach](/docs/get_started/technical_overview.html), ale także o ograniczeniach, [przeczytaj specyfikację AMP HTML](https://github.com/ampproject/amphtml/blob/master/spec/amp-html-format.md).
## Pamięć podręczna Google AMP Cache
Pamięć podręczna Google AMP Cache to oparta na serwerach proxy sieć dystrybucji treści,
która może dostarczać wszystkie prawidłowe dokumenty AMP.
Pobiera ona strony AMP HTML, buforuje je i automatycznie poprawia wydajność tych stron.
W przypadku korzystania z pamięci podręcznej Google AMP Cache dokument, wszystkie pliki JS i wszystkie obrazy są ładowane
z tego samego źródła, w którym używany jest protokół
[HTTP 2.0](https://http2.github.io/) w celu uzyskania maksymalnej efektywności.
Pamięć podręczna jest wyposażona we wbudowany
[system sprawdzania poprawności](https://github.com/ampproject/amphtml/tree/master/validator),
który potwierdza, że strona będzie działać oraz
że nie zależy ona od zasobów zewnętrznych.
System sprawdzania poprawności uruchamia szereg asercji,
potwierdzając, że znaczniki strony są zgodne ze specyfikacją AMP HTML.
Inna wersja modułu sprawdzania poprawności jest dostarczana w pakiecie z każdą stroną AMP. Ta wersja może rejestrować błędy sprawdzania poprawności bezpośrednio w konsoli przeglądarki podczas renderowanie strony,
co pozwala zobaczyć, w jaki sposób złożone zmiany w kodzie
negatywnie odbijają się na wydajności i wrażeniach użytkowników.
Dowiedz się więcej o [testowaniu swoich stron AMP HTML](/docs/guides/validate.html).
```
--------------------------------------------------------------------------------
/content/learn/case-studies/relay_media.md:
--------------------------------------------------------------------------------
```markdown
---
$order: 5
$title: Relay Media
$date: October 7, 2016
$category: Publishers
$parent: /content/learn/case-studies.html
class: case-study post-detail
components:
- social-share
headline: Relay Media helps publishers get AMP’d
thumb: "case-studies/relay_media_thumb.jpg"
featured: "case-studies/relaymedia_phone1.png"
logo:
src: "case-studies/relay_media_logo.png"
width: 133
height: 15
description: "Relay Media was founded in 2015 with the purpose of converting web content to Accelerated Mobile Pages (AMP) for publishers. The company has placed a big bet on AMP’s long-term importance to the online ecosystem, and is committed to strengthening the format’s foothold on the mobile web."
results:
- stat: 2.5M
description: AMPs made (last 30 days)
- stat: 700ms
description: Page load time
- stat: 10%
description: Increase in session time (The Miami Herald)
- stat: 90%
description: new traffic on AMP (The Daily Dot)
download: "case-studies/relay_media.pdf"
---
<div class="img-right relay">
<amp-img width="989" height="1416" layout="responsive"
srcset="/static/img/case-studies/relaymedia_phone1.png 989w,
/static/img/case-studies/relaymedia_phone1@1_5x.png 653w,
/static/img/case-studies/[email protected] 495w"
src="/static/img/case-studies/relaymedia_phone1.png">
</amp-img>
</div>
Relay Media was founded in 2015 with the purpose of converting web content to Accelerated Mobile Pages (AMP) for publishers. The company has placed a big bet on AMP’s long-term importance to the online ecosystem, and is committed to strengthening the format’s foothold on the mobile web. “Today’s lumbering and overloaded mobile web pages are the legacy of a volume-based advertising marketplace that’s being replaced by one tuned to viewability and engagement” said Barb Palser, Chief Product Officer at Relay Media.
#### Solution
“We’re championing AMP because it’s aligned with consumer and market forces pushing the digital content economy toward performance, measurability and quality user experience. The company has converted content for a number of companies including The Miami Herald, The Daily Dot, and Hearst Television. Relay Media acknowledges that implementing basic AMP HTML is fairly easy, but they strive to do more than that. “AMP needs to be more than fast; it needs to advance a publisher’s digital strategy. It needs to drive engagement and business value by supporting a publisher’s range of content formats, embeds, style and branding elements, navigation, analytics, ads, paywall services and other revenue products,” said Palser. AMP already enables this functionality, and Relay Media helps publishers take full advantage of the format. The company has generated more than 2.5 million AMP pages for publishers in the last 30 days.
<div class="img-left relay img-mobile">
<amp-img width="1200" height="1423" layout="responsive"
srcset="/static/img/case-studies/relaymedia_phone2.png 1200w,
/static/img/case-studies/relaymedia_phone2@1_5x.png 792w,
/static/img/case-studies/[email protected] 600w"
src="/static/img/case-studies/relaymedia_phone2.png">
</amp-img>
</div>
#### Results
<div class="img-left relay img-desktop">
<amp-img width="1200" height="1423" layout="responsive"
srcset="/static/img/case-studies/relaymedia_phone2.png 1200w,
/static/img/case-studies/relaymedia_phone2@1_5x.png 792w,
/static/img/case-studies/[email protected] 600w"
src="/static/img/case-studies/relaymedia_phone2.png">
</amp-img>
</div>
Many of Relay Media’s clients are seeing positive AMP results. The most profound benefit for clients in converting to AMP is the decrease in page load time. Relay Media’s AMP articles load in under 700 milliseconds, compared to 8-12 seconds or more for their standard mobile counterparts.
Derrick Ho, Senior Mobile Manager for McClatchy, which owns the Miami Herald, reported that “mobile search users who read the Miami Herald starting with an AMP article spend 10% more time than those who land on regular mobile pages.” Arsenio Santos, Chief Product Officer at the Daily Dot, worked with Relay Media to create AMP pages for the news site covering internet culture and life on the web. Santos reported that 90% of visitors on their AMP pages are new readers. The team is satisfied with the results, “AMP provides users with a reliable, immediate browsing experience. We strongly recommend it,” said Santos.
As more users shift to mobile, said Palser, “Publishers can and must differentiate themselves by delivering a fast, rewarding user experience which in turn provides a clean environment for advertisers. Everything about AMP supports these principles; we think it’s a great place to start.”
```
--------------------------------------------------------------------------------
/content/docs/get_started/create/[email protected]:
--------------------------------------------------------------------------------
```markdown
---
$title: Créer votre page AMP HTML
---
Le balisage suivant est un bon point de départ, un modèle standard.
Copiez et enregistrez ce qui suit dans un fichier .html.
[sourcecode:html]
<!doctype html>
<html amp lang="en">
<head>
<meta charset="utf-8">
<title>Hello, AMPs</title>
<link rel="canonical" href="http://example.ampproject.org/article-metadata.html" />
<meta name="viewport" content="width=device-width,minimum-scale=1,initial-scale=1">
<script type="application/ld+json">
{
"@context": "http://schema.org",
"@type": "NewsArticle",
"headline": "Open-source framework for publishing content",
"datePublished": "2015-10-07T12:02:41Z",
"image": [
"logo.jpg"
]
}
</script>
<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>
<h1>Welcome to the mobile web</h1>
</body>
</html>
[/sourcecode]
Jusque là, le contenu dans le corps (body) est assez simple. Mais le code supplémentaire dans l'en-tête (head) de la page n'est peut-être pas aussi évident. Décomposons le balisage obligatoire.
## Balisage obligatoire
Les documents AMP HTML DOIVENT :
- Commencer par le type du document `<!doctype html>`.
- Contenir une balise `<html ⚡>` de niveau supérieur (`<html amp>` est également accepté).
- Contenir les balises `<head>` et `<body>` (facultatives dans HTML).
- Contenir une balise `<link rel="canonical" href="$SOME_URL" />` dans l'en-tête qui pointe vers la version HTML standard du document AMP HTML ou vers le document lui-même si aucune version HTML n'existe.
- Contenir une balise `<meta charset="utf-8">` comme premier enfant de la balise head.
- Contenir une balise `<meta name="viewport" content="width=device-width,minimum-scale=1">` dans la balise head. Il est également recommandé d'inclure initial-scale=1.
- Contenir une balise `<script async src="https://cdn.ampproject.org/v0.js"></script>` comme dernier élément de l'en-tête (inclut et charge la bibliothèque AMP JS).
- Contenir ce qui suit dans la balise `<head>` :
`<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>`
## Métadonnées facultatives
En plus des éléments de base, notre exemple inclut une définition Schema.org dans l'en-tête qui n'est pas une condition absolue pour AMP, mais une condition pour distribuer le contenu dans certains emplacements, par exemple, dans la [démonstration du carrousel d'actualités Google Search (essayez-la sur votre téléphone)](https://g.co/ampdemo).
Pour en savoir plus sur toutes les métadonnées nécessaires pour les divers autres emplacements, par exemple Twitter, [consultez nos exemples](https://github.com/ampproject/amphtml/tree/master/examples/metadata-examples). Pour en savoir plus sur AMP dans Google Search, voir [Le meilleur de l'actualité avec AMP](https://developers.google.com/structured-data/carousels/top-stories).
<hr>
Bonne nouvelle ! C'est tout ce dont nous avons besoin pour créer la première page AMP. Bien évidemment, le corps ne contient pas encore grand chose. Dans la prochaine section, nous découvrirons comment ajouter des objets de base (images et éléments AMP personnalisés), comment créer un style pour la page et comment définir une disposition réactive.
<a class="go-button button" href="/fr/docs/get_started/create/include_image.html">Continuer à l'Étape 2</a>
```
--------------------------------------------------------------------------------
/content/docs/guides/author_develop/amp_replacements.md:
--------------------------------------------------------------------------------
```markdown
---
$title: Include Images & Video
$order: 1
toc: true
---
[TOC]
Like on a normal HTML page, AMP allows you to embed **images**, **video** and **audio**
content. Learn what's different about the AMP equivalents and learn how to
include them in your pages.
## Why not `<img>`, `<video>` and `<audio`?
AMP doesn't support the default HTML counterparts to displaying media, like `<img>`.
We provide equivalent components for the following reasons:
* We need to understand layout of the page before assets load, crucial
to [support first-viewport preloading](/learn/how-amp-works/#size-all-resources-statically)
* We need to control network requests to [lazy load and prioritize resources
effectively](/learn/how-amp-works/#prioritize-resource-loading)
{% call callout('Caution', type='caution') %}
While they're not supported, they *will* render, but AMP won't [validate your pages](/docs/guides/validate.html) and you won't get all the benefits AMP provides.
{% endcall %}
## Images
Include an image in your page
using the [`amp-img`](/docs/reference/components/amp-img.html) element, like so:
[sourcecode:html]
<amp-img src="fixed.jpg" width="264" height="96"></amp-img>
[/sourcecode]
In this most basic example, the image will display with the specified fixed
height and width. At minimum, an explicit width and height needs to be set.
#### Displaying images when JavaScript is disabled
As `<amp-img>` relies on JavaScript, if the user chooses to disable scripts, images won't display. In this case, you should provide a fallback to the image using `<img>` and `<noscript>`, like so:
[sourcecode:html]
<amp-img src="fixed.jpg" width="264" height="96">
<noscript>
<img src="fixed.jpg" width="264" height="96" />
</noscript>
</amp-img>
[/sourcecode]
### Advanced layouts
AMP makes it much easier than with standard CSS/HTML to create fully responsive
images. In its most basic form, all you have to do is to add `layout="responsive"`:
[sourcecode:html]
<amp-img src="responsive.jpg" width="527" height="193" layout="responsive">
</amp-img>
[/sourcecode]
{% call callout('Read on', type='success') %}
Learn more about [advanced layout techniques](/docs/guides/responsive/control_layout.html).
{% endcall %}
### Behavior and placeholders
The AMP HTML runtime can effectively manage image resources,
choosing to delay or prioritize resource loading
based on the viewport position, system resources, connection bandwidth, or other factors.
{% call callout('Read on', type='success') %}
Learn how to [provide fallbacks and placeholders for images](/docs/guides/responsive/placeholders.html).
{% endcall %}
## Animated images
The [`amp-anim`](/docs/reference/extended/amp-anim.html) element is very similar to the `amp-img` element,
and provides additional functionality to manage loading and playing of animated images such as GIFs.
[sourcecode:html]
<amp-anim width="400" height="300" src="my-gif.gif">
<amp-img placeholder width="400" height="300" src="my-gif-screencap.jpg">
</amp-img>
</amp-anim>
[/sourcecode]
{% call callout('Note', type='note') %}
Include `<script async custom-element="amp-anim"
src="https://cdn.ampproject.org/v0/amp-anim-0.1.js"></script>` in the head of your page to use this component.
{% endcall %}
## Video
Include a video in your page
using the [`amp-video`](/docs/reference/amp-video.html) element.
Only use this element for direct HTML5 video file embeds.
The element loads the video resource specified by the `src` attribute lazily,
at a time determined by AMP.
Include a placeholder before the video starts, and a fallback,
if the browser doesn't support HTML5 video, for example:
[sourcecode:html]
<amp-video width="400" height="300" src="https://yourhost.com/videos/myvideo.mp4"
poster="myvideo-poster.jpg">
<div fallback>
<p>Your browser doesn’t support HTML5 video</p>
</div>
</amp-video>
[/sourcecode]
## Audio
Include an audio resource in your page,
using the [`amp-audio`](/docs/reference/extended/amp-audio) element.
Only use this element for direct HTML5 audio file embeds.
Like all embedded external resources in an AMP page,
the element loads the audio resource specified by the `src` attribute lazily,
at a time determined by AMP.
Include a placeholder before the audio starts, and a fallback,
if the browser doesn't support HTML5 audio, for example:
[sourcecode:html]
<amp-audio width="400" height="300" src="https://yourhost.com/audios/myaudio.mp3">
<div fallback>
<p>Your browser doesn’t support HTML5 audio</p>
</div>
<source type="audio/mpeg" src="foo.mp3">
<source type="audio/ogg" src="foo.ogg">
</amp-audio>
[/sourcecode]
{% call callout('Note', type='note') %}
Include `<script async custom-element="amp-audio"
src="https://cdn.ampproject.org/v0/amp-audio-0.1.js"></script>` in the head of your page to use this component.
{% endcall %}
```
--------------------------------------------------------------------------------
/content/learn/[email protected]:
--------------------------------------------------------------------------------
```markdown
---
$title: Was ist AMP?
---
[TOC]
<amp-youtube
data-videoid="lBTCB7yLs8Y"
layout="responsive"
width="480" height="270">
</amp-youtube>
AMP ist eine Methode, Webseiten für statische Inhalte zu erstellen, die schnell dargestellt werden.
AMP besteht aus drei Teilen:
**AMP-HTML** ist HTML mit einigen Einschränkungen für eine zuverlässige Leistung und einigen Erweiterungen für die Erstellung ansprechender Inhalte, die über einfaches HTML hinausgehen. Die **AMP-JS-Bibliothek** sorgt dafür, dass AMP-HTML-Seiten schnell aufgebaut werden.
Über den **AMP-Cache von Google** können AMP-HTML-Seiten aus dem Cache bereitgestellt werden.
## AMP-HTML
AMP-HTML ist im Grunde HTML, das um benutzerdefinierte AMP-Eigenschaften erweitert wurde.
Die einfachste Version einer AMP-HTML-Datei sieht so aus:
[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]
Die meisten Tags einer AMP-HTML-Seite sind normale HTML-Tags, einige werden aber durch AMP-spezifische Tags ersetzt. Mehr über HTML-Tags [erfahren Sie auch in der AMP-Spezifikation](https://github.com/ampproject/amphtml/blob/master/spec/amp-html-format.md).
Diese AMP-spezifischen und benutzerdefinierten Elemente, AMP-HTML-Komponenten genannt, ermöglichen eine einfache und effiziente Implementierung von gängigen Mustern.
Das Tag [`amp-img`](/docs/reference/amp-img.html) beispielsweise bietet selbst in Browsern, die dies noch nicht unterstützen, vollständigen `srcset`-Support.
[Lesen Sie hier, wie Sie eine AMP-Seite erstellen.](/docs/get_started/create.html)
## AMP-JS
Die [AMP-JS-Bibliothek](https://github.com/ampproject/amphtml/tree/master/src) hat mehrere Funktionen, die gemeinsam für ein schnelles Rendering Ihrer Seite sorgen: Alle [Best Practices zur AMP-Leistung](/docs/get_started/technical_overview.html) werden implementiert, das Laden von Ressourcen wird verwaltet und die oben erwähnten benutzerdefinierten Tags werden bereitgestellt.
Zu den größten Optimierungen gehört, dass alles, was aus externen Ressourcen stammt, asynchron bereitgestellt wird. So kann kein Seitenelement die Darstellung eines anderen blockieren.
Weitere Technologien für eine verbesserte Leistung sind Sandbox-Verfahren für alle iFrames, die Vorberechnung des Layouts aller Seitenelemente, bevor Ressourcen geladen werden, und die Deaktivierung langsamer CSS-Selektoren.
Weitere Informationen sowohl zu den [Optimierungen](/docs/get_started/technical_overview.html) als auch den Beschränkungen [finden Sie in der AMP-HTML-Spezifikation](https://github.com/ampproject/amphtml/blob/master/spec/amp-html-format.md).
## AMP-Cache von Google
Der [AMP-Cache von Google](https://developers.google.com/amp/cache/) ist ein proxybasiertes Content Delivery Network (CDN) zum Bereitstellen aller gültigen AMP-Dokumente.
AMP-HTML-Seiten werden abgerufen, im Cache gespeichert und die Seitenleistung wird automatisch verbessert.
Bei der Verwendung des AMP-Cache von Google werden das Dokument, alle JS-Dateien und alle Bilder aus derselben Quelle geladen, die [HTTP 2.0](https://http2.github.io/) für maximale Effizienz nutzt.
In den Cache ist außerdem ein [Validierungssystem](https://github.com/ampproject/amphtml/tree/master/validator) integriert, über das bestätigt wird, dass die Seite funktioniert und nicht von externen Ressourcen abhängig ist.
Das Validierungssystem führt eine Reihe von Assertionen aus, um zu prüfen, ob das Markup der Seite die AMP-HTML-Spezifikation erfüllt.
Eine weitere Version des Validierungstools ist Teil jeder AMP-Seite. Diese Version kann Validierungsfehler beim Darstellen der Seite direkt in der Browserkonsole protokollieren. So können Sie sehen, wie komplexe Änderungen in Ihrem Code sich auf die Leistung und Nutzererfahrung auswirken.
[Lesen Sie hier, wie Sie Ihre AMP-HTML-Seiten testen.](/docs/guides/validate.html)
```
--------------------------------------------------------------------------------
/content/docs/guides/author_develop/[email protected]:
--------------------------------------------------------------------------------
```markdown
---
$title: Üçüncü Taraf İçeriği Ekleme
---
Sayfalarınıza üçüncü taraf bileşenlerini nasıl ekleyeceğinizi öğrenin.
[TOC]
## Tweet Yerleştirme
[`amp-twitter`](/docs/reference/extended/amp-twitter.html) öğesini kullanarak bir Twitter Tweet'ini sayfanıza yerleştirebilirsiniz.
Sayfanıza tweet eklemek için öncelikle aşağıdaki komut dosyasını `<head>` bölümüne ekleyin:
[sourcecode:html]
<script async custom-element="amp-twitter" src="https://cdn.ampproject.org/v0/amp-twitter-0.1.js"></script>
[/sourcecode]
Şu anda tweet'ler, sağlanan boyuta sığmaları için otomatik olarak belirli bir oranda ölçeklenmektedir, ancak bu ideal bir görünüm sağlamayabilir.
Sağlanan genişliği ve yüksekliği manuel olarak değiştirebilir veya en boy oranını, ekran genişliğine göre seçmek için medya özniteliğini kullanabilirsiniz.
[twitter.amp örneğindeki](https://github.com/ampproject/amphtml/blob/master/examples/twitter.amp.html) `amp-twitter` örneği:
[sourcecode:html]
<amp-twitter width=390 height=50
layout="responsive"
data-tweetid="638793490521001985">
</amp-twitter>
[/sourcecode]
## Instagram Fotoğrafı Yerleştirme
[`amp-instagram`](/docs/reference/extended/amp-instagram.html) öğesini kullanarak bir Instagram fotoğrafını sayfanıza yerleştirebilirsiniz.
Bir Instagram fotoğrafını sayfanıza eklemek için öncelikle aşağıdaki komut dosyasını `<head>` bölümüne ekleyin:
[sourcecode:html]
<script async custom-element="amp-instagram" src="https://cdn.ampproject.org/v0/amp-instagram-0.1.js"></script>
[/sourcecode]
Instagram fotoğrafı URL'sinde bulunan Instagram kısa veri kodunu ekleyin. Örneğin, `https://instagram.com/p/fBwFP` URL'sindeki `fBwFP`, veri kısa kodudur.
Ayrıca, Instagram duyarlı düzenler için sabit bir en boy oranı kullanır. Bu yüzden, genişlik ve yükseklik değeri evrensel olmalıdır
[sourcecode:html]
<amp-instagram
data-shortcode="fBwFP"
width="320"
height="392"
layout="responsive">
</amp-instagram>
[/sourcecode]
## Facebook yayını veya videosu gösterme
[`amp-facebook`](/docs/reference/extended/amp-facebook.html) öğesini kullanarak bir Facebook yayınını veya videosunu sayfanızda gösterebilirsiniz.
Aşağıdaki komut dosyasını `<head>` bölümüne eklemeniz gerekir:
[sourcecode:html]
<script async custom-element="amp-facebook" src="https://cdn.ampproject.org/v0/amp-facebook-0.1.js"></script>
[/sourcecode]
Örnek - Yayın yerleştirme:
[sourcecode:html]
<amp-facebook width=486 height=657
layout="responsive"
data-href="https://www.facebook.com/zuck/posts/10102593740125791">
</amp-facebook>
[/sourcecode]
Örnek - Video yerleştirme:
[sourcecode:html]
<amp-facebook width=552 height=574
layout="responsive"
data-embed-as="video"
data-href="https://www.facebook.com/zuck/videos/10102509264909801/">
</amp-facebook>
[/sourcecode]
## YouTube videosu ekleme
[`amp-youtube`](/docs/reference/extended/amp-youtube.html) öğesini kullanarak bir YouTube videosunu sayfanıza ekleyebilirsiniz.
Aşağıdaki komut dosyasını `<head>` bölümüne eklemeniz gerekir:
[sourcecode:html]
<script async custom-element="amp-youtube" src="https://cdn.ampproject.org/v0/amp-youtube-0.1.js"></script>
[/sourcecode]
Youtube `data-videoid` kodunu her YouTube video sayfası URL'sinde bulabilirsiniz. Örneğin, https://www.youtube.com/watch?v=Z1q71gFeRqM URL'sinin Z1q71gFeRqM kısmı, video kimliğini belirtmektedir.
16:9 en boy oranlı videolar için doğru düzenleri sağlamak üzere `layout="responsive"` kodunu kullanın:
[sourcecode:html]
<amp-youtube
data-videoid="mGENRKrdoGY"
layout="responsive"
width="480" height="270">
</amp-youtube>
[/sourcecode]
## Reklam gösterme
[`amp-ad`](/docs/reference/amp-ad.html) öğesini kullanarak sayfanızda bir reklam gösterin.
Yalnızca HTTPS aracılığıyla sunulan reklamlar desteklenir.
Reklam ağları tarafından sağlanan JavaScript'in AMP dokümanı içinde çalıştırılmasına izin verilmez.
Bunun yerine, AMP çalışma zamanı farklı bir kaynaktan (iframe korumalı alanı aracılığıyla) bir iframe yükler ve reklam ağının JS'sini o iframe korumalı alanı içinde yürütür.
Reklam genişliği ve yüksekliği ile reklam ağı türünü belirtmeniz gerekir.
`type`, reklam ağının şablonunu tanımlar.
Farklı reklam türleri, farklı `data-*` öznitelikleri gerektirir.
[sourcecode:html]
<amp-ad width=300 height=250
type="example"
data-aax_size="300x250"
data-aax_pubname="test123"
data-aax_src="302">
</amp-ad>
[/sourcecode]
Reklam ağı tarafından destekleniyorsa, kullanılabilir reklam olmadığında gösterilmesi için bir `placeholder` ekleyin:
[sourcecode:html]
<amp-ad width=300 height=250
type="example"
data-aax_size="300x250"
data-aax_pubname="test123"
data-aax_src="302">
<div placeholder>Have a great day!</div>
</amp-ad>
[/sourcecode]
AMP, çok çeşitli reklam ağlarını destekler. [Tam liste için referansa](/docs/reference/amp-ad.html#supported-ad-networks) bakın.
```
--------------------------------------------------------------------------------
/content/docs/get_started/create/[email protected]:
--------------------------------------------------------------------------------
```markdown
---
$title: Tworzenie strony AMP HTML
---
Poniższy znacznik stanowi doskonały punkt wyjścia lub szablon.
Skopiuj go i zapisz w pliku z rozszerzeniem .html.
[sourcecode:html]
<!doctype html>
<html amp lang="en">
<head>
<meta charset="utf-8">
<title>Hello, AMPs</title>
<link rel="canonical" href="http://example.ampproject.org/article-metadata.html" />
<meta name="viewport" content="width=device-width,minimum-scale=1,initial-scale=1">
<script type="application/ld+json">
{
"@context": "http://schema.org",
"@type": "NewsArticle",
"headline": "Open-source framework for publishing content",
"datePublished": "2015-10-07T12:02:41Z",
"image": [
"logo.jpg"
]
}
</script>
<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>
<h1>Welcome to the mobile web</h1>
</body>
</html>
[/sourcecode]
Zawartość sekcji body jest na razie całkiem prosta. Jednak sekcja head strony zawiera wiele dodatkowego kodu, którego znaczenie nie jest od razu oczywiste. Zajmijmy się teraz analizą wymaganych znaczników.
## Wymagane znaczniki
Dokumenty AMP HTML MUSZĄ:
- Zaczynać się od deklaracji doctype `<!doctype html>`.
- Zawierać znacznik `<html ⚡>` najwyższego poziomu (akceptowany jest również znacznik `<html amp>`).
- Zawierać znaczniki `<head>` i `<body>` (w języku HTML są one opcjonalne).
- Zawierać w sekcji head znacznik `<link rel="canonical" href="$SOME_URL" />` wskazujący wersję dokumentu AMP HTML w zwykłym HTML lub ten sam dokument, jeśli taka wersja HTML nie istnieje.
- Zawierać znacznik `<meta charset="utf-8">` jako pierwszy element podrzędny znacznika head.
- Zawierać znacznik `<meta name="viewport" content="width=device-width,minimum-scale=1">` wewnątrz znacznika head. Zalecane jest także dodanie atrybutu initial-scale=1.
- Zawierać znacznik `<script async src="https://cdn.ampproject.org/v0.js"></script>` jako ostatni element w sekcji head (służy do dołączenia i ładowania biblioteki AMP JS).
- Zawierać następujące dane w znaczniku `<head>`:
`<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>`
## Opcjonalne metadane
Oprócz elementów zgodnych z podstawowymi wymaganiami przykład zawiera także definicję Schema.org w sekcji head, która nie jest wymagana przez AMP, ale jest niezbędna, aby treści były rozpowszechniane w niektórych miejscach, na przykład w [demonstracyjnej wersji karuzeli wiadomości aplikacji Szukaj w Google (wypróbuj na swoim telefonie)](https://g.co/ampdemo).
Aby dowiedzieć się więcej o wszystkich metadanych potrzebnych w różnych innych miejscach, np. na Twitterze, [zapoznaj się z przykładami](https://github.com/ampproject/amphtml/tree/master/examples/metadata-examples). Aby poznać w szczególności zastosowanie AMP w aplikacji Szukaj w Google, zobacz [Najlepsze historie z AMP](https://developers.google.com/structured-data/carousels/top-stories).
<hr>
Dobra wiadomość! To wszystko, co potrzebne do utworzenia pierwszej strony AMP, przy czym oczywiście niewiele dzieje się na razie w sekcji body. W następnej części zostanie opisane dodawanie podstawowych elementów, takich jak obrazy, dodawanie niestandardowych elementów AMP, nadawanie stronie stylu i opracowanie przyjaznego w obsłudze układu.
<a class="go-button button" href="/pl/docs/get_started/create/include_image.html">Przejdź do kroku 2</a>
```
--------------------------------------------------------------------------------
/content/learn/[email protected]:
--------------------------------------------------------------------------------
```markdown
---
$title: Che cos’è AMP?
---
[TOC]
<amp-youtube
data-videoid="lBTCB7yLs8Y"
layout="responsive"
width="480" height="270">
</amp-youtube>
AMP è un metodo per creare pagine web di contenuto statico con un rendering veloce.
Il formato AMP in azione è costituito da tre diversi componenti:
**HTML AMP** è il formato HTML con alcuni limiti per garantire l’affidabilità delle performance
e determinate estensioni per creare contenuto con formattazione più ricca rispetto all’HTML di base.
La libreria **AMP JS** assicura il rendering veloce delle pagine HTML AMP.
La **Google AMP Cache** (facoltativa) distribuisce le pagine HTML AMP.
## HTML AMP
HTML AMP è essenzialmente l’HTML esteso con proprietà AMP personalizzate.
La forma più semplice di file AMP HTML si presenta così:
[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]
Benché la maggior parte di tag in una pagina HTML AMP sia costituita da normali tag HTML,
alcuni di essi vengono sostituiti da tag HTML specifici per il formato AMP (vedi anche
[Tag HTML nella specifica AMP](https://github.com/ampproject/amphtml/blob/master/spec/amp-html-format.md)).
Questi elementi personalizzati, denominati componenti HTML AMP,
facilitano l’implementazione di modelli comuni in modo efficiente.
Ad esempio, il tag [`amp-img`](/docs/reference/amp-img.html)
offre il supporto `srcset` completo anche nei browser che ancora non lo supportano.
Scopri come [creare la tua prima pagina HTML AMP](/docs/get_started/create.html).
## AMP JS
La [libreria AMP JS](https://github.com/ampproject/amphtml/tree/master/src) implementa
tutte le [best practice relative alle prestazioni di AMP](/docs/get_started/technical_overview.html),
gestisce il caricamento delle risorse e offre i tag personalizzati indicati sopra,
il tutto per garantire il rendering veloce della pagina.
Tra le principali ottimizzazioni ricordiamo il fatto che rende asincrono tutto ciò che proviene da risorse esterne, pertanto nella pagina non vi sono elementi che ne possano bloccare il rendering.
Altre tecniche di ottimizzazione prestazionale comprendono l’uso della modalità sandbox di tutti gli iframe, il precalcolo del layout di ogni elemento nella pagina prima del caricamento delle risorse e la disabilitazione dei selettori CSS lenti.
Per ulteriori informazioni non solo sulle [ottimizzazioni](/docs/get_started/technical_overview.html) ma anche sui limiti imposti, [leggi la specifica HTML AMP](https://github.com/ampproject/amphtml/blob/master/spec/amp-html-format.md).
## Google AMP Cache
La Google AMP Cache è una rete di distribuzione del contenuto basata su proxy
che consente la pubblicazione di tutti i documenti AMP convalidati.
Recupera le pagine HTML AMP, le memorizza nella cache e ne migliora automaticamente le prestazioni.
Quando si usa la Google AMP Cache, il documento, tutti i file JS e tutte le immagini vengono caricati
dalla stessa fonte che utilizza
[HTTP 2.0](https://http2.github.io/) per ottimizzare l’efficienza.
La cache prevede anche un
[sistema di convalida](https://github.com/ampproject/amphtml/tree/master/validator)
incorporato che conferma l’idoneità della pagina
e il fatto che non dipenda da risorse esterne.
Il sistema di convalida esegue una serie di asserzioni
per confermare che il markup della pagina sia conforme alla specifica HTML AMP.
Un’altra versione dello strumento di convalida viene fornita in dotazione con ogni pagina AMP. Questa versione è in grado di registrare gli errori di convalida direttamente nella console del browser quando viene eseguito il rendering della pagina,
per consentire di vedere in che modo eventuali modifiche complesse del codice
possono ripercuotersi sulle prestazioni e sull’esperienza utente.
Per ulteriori informazioni consulta la sezione sul [testing delle pagine HTML AMP](/docs/guides/validate.html).
```
--------------------------------------------------------------------------------
/content/docs/guides/author_develop/third_party_components@pt_BR.md:
--------------------------------------------------------------------------------
```markdown
---
$title: Incluir conteúdo de terceiros
---
Saiba como incluir componentes de terceiros em suas páginas.
[TOC]
## Incorporar um tweet
Incorpore um tweet na sua página
usando o elemento [`amp-twitter`](/docs/reference/extended/amp-twitter.html).
Para incluir um tweet em sua página,
em primeiro lugar inclua o seguinte script no `<head>`:
[sourcecode:html]
<script async custom-element="amp-twitter" src="https://cdn.ampproject.org/v0/amp-twitter-0.1.js"></script>
[/sourcecode]
Atualmente, os tweets são dimensionados automaticamente de acordo com sua proporção
para se ajustarem ao tamanho fornecido,
mas isso pode gerar uma aparência não muito boa.
Ajuste manualmente a largura e a altura fornecidas ou use o atributo de mídia
para selecionar a proporção com base na largura da tela.
Exemplo de `amp-twitter` a partir do
[exemplo de twitter.amp](https://github.com/ampproject/amphtml/blob/master/examples/twitter.amp.html):
[sourcecode:html]
<amp-twitter width=390 height=50
layout="responsive"
data-tweetid="638793490521001985">
</amp-twitter>
[/sourcecode]
## Incorporar uma imagem do Instagram
Incorpore uma imagem do Instagram em sua página
usando o elemento [`amp-instagram`](/docs/reference/extended/amp-instagram.html).
Para incluir uma imagem do Instagram,
em primeiro lugar inclua o seguinte script no `<head>`:
[sourcecode:html]
<script async custom-element="amp-instagram" src="https://cdn.ampproject.org/v0/amp-instagram-0.1.js"></script>
[/sourcecode]
Inclua o data-shortcode do Instagram encontrado no URL da foto no Instagram.
Por exemplo, em `https://instagram.com/p/fBwFP`,
`fBwFP` é o data-shortcode.
Além disso, o Instagram usa uma proporção fixa para os layouts responsivos,
de modo que os valores de largura e altura são universais.
[sourcecode:html]
<amp-instagram
data-shortcode="fBwFP"
width="320"
height="392"
layout="responsive">
</amp-instagram>
[/sourcecode]
## Exibir postagem ou vídeo do Facebook
Exiba uma postagem ou um vídeo do Facebook na sua página
usando o elemento [`amp-facebook`](/docs/reference/extended/amp-facebook.html).
Você precisa incluir o seguinte script no `<head>`:
[sourcecode:html]
<script async custom-element="amp-facebook" src="https://cdn.ampproject.org/v0/amp-facebook-0.1.js"></script>
[/sourcecode]
Exemplo - Incorporação de uma postagem:
[sourcecode:html]
<amp-facebook width=486 height=657
layout="responsive"
data-href="https://www.facebook.com/zuck/posts/10102593740125791">
</amp-facebook>
[/sourcecode]
Exemplo - Incorporação de um vídeo:
[sourcecode:html]
<amp-facebook width=552 height=574
layout="responsive"
data-embed-as="video"
data-href="https://www.facebook.com/zuck/videos/10102509264909801/">
</amp-facebook>
[/sourcecode]
## Incluir um vídeo do YouTube
Inclua um vídeo do YouTube em sua página
usando o elemento [`amp-youtube`](/docs/reference/extended/amp-youtube.html).
Você precisa incluir o seguinte script no `<head>`:
[sourcecode:html]
<script async custom-element="amp-youtube" src="https://cdn.ampproject.org/v0/amp-youtube-0.1.js"></script>
[/sourcecode]
O `data-videoid` do YouTube pode ser encontrado em qualquer URL de uma página de vídeos do YouTube.
Por exemplo, em https://www.youtube.com/watch?v=Z1q71gFeRqM,
Z1q71gFeRqM é o ID do vídeo.
Use `layout="responsive"` para gerar layouts de forma correta para vídeos com proporção de 16:9.
[sourcecode:html]
<amp-youtube
data-videoid="mGENRKrdoGY"
layout="responsive"
width="480" height="270">
</amp-youtube>
[/sourcecode]
## Exibir um anúncio
Exiba um anúncio em sua página
usando o elemento [`amp-ad`](/docs/reference/amp-ad.html).
Somente anúncios veiculados via HTTPS são compatíveis.
Nenhuma rede de anúncios que forneça JavaScript pode ser executada dentro do documento de AMP.
Em vez disso, o tempo de execução da AMP carrega um iframe de uma
origem diferente (por meio de uma sandbox de iframe)
e executa o JS da rede de anúncios dentro da sandbox desse iframe.
Você precisa especificar a largura e a altura do anúncio e o tipo de rede de anúncios.
O `type` identifica o modelo da rede de anúncios.
Diferentes tipos de anúncios exigem diferentes atributos `data-*`.
[sourcecode:html]
<amp-ad width=300 height=250
type="example"
data-aax_size="300x250"
data-aax_pubname="test123"
data-aax_src="302">
</amp-ad>
[/sourcecode]
Se compatível com a rede de anúncios,
inclua um `placeholder`
para ser mostrado quando nenhum anúncio estiver disponível:
[sourcecode:html]
<amp-ad width=300 height=250
type="example"
data-aax_size="300x250"
data-aax_pubname="test123"
data-aax_src="302">
<div placeholder>Have a great day!</div>
</amp-ad>
[/sourcecode]
A AMP é compatível com uma ampla gama de redes de anúncios. Consulte as [referências para ver a lista completa](/docs/reference/amp-ad.html#supported-ad-networks).
```
--------------------------------------------------------------------------------
/content/learn/[email protected]:
--------------------------------------------------------------------------------
```markdown
---
$title: ¿Qué es AMP?
---
[TOC]
<amp-youtube
data-videoid="lBTCB7yLs8Y"
layout="responsive"
width="480" height="270">
</amp-youtube>
AMP es una manera de compilar páginas web para contenido estático de representación rápida.
AMP en acción consta de tres partes diferentes:
**AMP HTML** es HTML con algunas restricciones para lograr un rendimiento confiable,
y con algunas extensiones para compilar contenido enriquecido más allá del formato HTML básico.
La biblioteca **AMP JS** garantiza la representación rápida de páginas AMP HTML.
El **Google AMP Cache** (opcional) proporciona las páginas AMP HTML.
## AMP HTML
AMP HTML es básicamente contenido HTML ampliado con propiedades AMP personalizadas.
El archivo en AMP HTML más sencillo tiene el siguiente aspecto:
[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]
Si bien la mayoría de las etiquetas en una página AMP HTML son etiquetas HTML comunes,
algunas etiquetas HTML se reemplazan por etiquetas específicas de AMP (consulta también la sección de
[etiquetas HTML en la especificación de AMP](https://github.com/ampproject/amphtml/blob/master/spec/amp-html-format.md)).
Estos elementos personalizados, llamados componentes AMP HTML,
crean patrones comunes que pueden implementarse con buen rendimiento en forma sencilla.
Por ejemplo, la etiqueta [`amp-img`](/docs/reference/amp-img.html)
proporciona soporte completo de `srcset`, incluso en navegadores que todavía no lo admiten.
Obtén más información acerca de cómo [crear tu primera página AMP HTML](/docs/get_started/create.html).
## AMP JS
La [biblioteca AMP JS](https://github.com/ampproject/amphtml/tree/master/src) implementa
todas las [prácticas recomendadas de rendimiento de AMP](/docs/get_started/technical_overview.html),
administra la carga de recursos y te proporciona las etiquetas personalizadas que se mencionan arriba para
garantizar la representación rápida de tu página.
Una de las optimizaciones más importantes es que transforma en asincrónico todo lo que proviene de recursos externos, de modo que ningún elemento de la página pueda bloquear la representación.
Entre otras técnicas de rendimiento se incluyen la disposición de todos los iframes en espacios seguros, el cálculo previo del diseño de cada elemento de la página antes de que se carguen los recursos y la desactivación de selectores de CSS lentos.
Para obtener más información acerca de las [optimizaciones](/docs/get_started/technical_overview.html) y las limitaciones, [lee la especificación de AMP HTML](https://github.com/ampproject/amphtml/blob/master/spec/amp-html-format.md).
## Google AMP Cache
El Google AMP Cache es una red de distribución de contenido basada en proxy
para la entrega de todos los documentos de AMP válidos.
Captura las páginas AMP HTML, las almacena en caché y mejora el rendimiento de estas automáticamente.
Al usar el Google AMP Cache, el documento, todos los archivos de JS y todas las imágenes se cargan
desde el mismo origen que usa
[HTTP 2.0](https://http2.github.io/) para lograr la máxima eficiencia.
El caché también viene con un
[sistema de validación](https://github.com/ampproject/amphtml/tree/master/validator)
integrado que confirma que se garantiza el funcionamiento de la página,
y que esta no depende de recursos externos.
El sistema de validación ejecuta una serie de aserciones
que confirman que el marcado de la página cumple con la especificación de AMP HTML.
Cada página AMP viene con otra versión del validador integrada. Esta versión puede registrar errores de validación directamente en la consola del navegador cuando se representa la página,
lo que te permite ver cómo los cambios complejos en tu código
podrían afectar el rendimiento y la experiencia del usuario.
Obtén más información acerca de [cómo probar tus páginas AMP HTML](/docs/guides/validate.html).
```
--------------------------------------------------------------------------------
/content/docs/get_started/create/[email protected]:
--------------------------------------------------------------------------------
```markdown
---
$title: AMP-HTML-Seite erstellen
---
Das folgende Markup ist eine gute Ausgangsbasis und kann als Standard-Markup verwendet werden.
Kopieren Sie es und speichern Sie es in einer Datei mit der Erweiterung ".html".
[sourcecode:html]
<!doctype html>
<html amp lang="en">
<head>
<meta charset="utf-8">
<title>Hello, AMPs</title>
<link rel="canonical" href="http://example.ampproject.org/article-metadata.html" />
<meta name="viewport" content="width=device-width,minimum-scale=1,initial-scale=1">
<script type="application/ld+json">
{
"@context": "http://schema.org",
"@type": "NewsArticle",
"headline": "Open-source framework for publishing content",
"datePublished": "2015-10-07T12:02:41Z",
"image": [
"logo.jpg"
]
}
</script>
<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>
<h1>Welcome to the mobile web</h1>
</body>
</html>
[/sourcecode]
Der Inhalt im body-Element ist bisher ziemlich einfach. Allerdings ist relativ viel zusätzlicher Code im head-Element enthalten, der etwas genauer erläutert werden sollte. Darum dekonstruieren wir nun das erforderliche Markup.
### Erforderliches Markup
AMP-HTML-Dokumente MÜSSEN:
- mit dem Doctype `<!doctype html>` beginnen.
- ein Top-Level-`<html ⚡>`-Tag enthalten (`<html amp>` wird auch akzeptiert).
- die Tags `<head>` und `body` enthalten (in HTML sind sie optional).
- im head-Element das Tag `<link rel="canonical" href="$SOME_URL" />` enthalten, das auf die reguläre HTML-Version des AMP-HTML-Dokuments oder auf sich selbst verweist, falls keine reguläre HTML-Version existiert.
- ein `<meta charset="utf-8">`-Tag als erstes untergeordnetes Element des head-Tags enthalten.
- das Tag `<meta name="viewport" content="width=device-width,minimum-scale=1">` innerhalb des head-Tags enthalten. Außerdem wird empfohlen, "initial-scale=1" einzufügen.
- das Tag `<script async src="https://cdn.ampproject.org/v0.js"></script>` als letztes Element im head-Tag enthalten. Damit wird die AMP-JS-Bibliothek eingeschlossen und geladen.
<li>Folgendes im `<head>`-Tag enthalten:
`<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>`
## Optionale Metadaten
Neben den Basisanforderungen enthält unser Beispiel auch eine Schema.org-Definition im head-Element. Dies ist zwar keine strikte Anforderung für AMP, ist aber erforderlich, damit Inhalte an verschiedenen Stellen bereitgestellt werden können, zum Beispiel im [Nachrichtenkarussell der Google-Suche (auf dem Smartphone ausprobieren)](https://g.co/ampdemo).
Weitere Informationen zu den Metadaten, die Sie an verschiedenen anderen Stellen wie z. B. Twitter brauchen, [finden Sie in unseren Beispielen](https://github.com/ampproject/amphtml/tree/master/examples/metadata-examples). Mehr über AMP in der Google-Suche erfahren Sie unter [Schlagzeilen mit AMP](https://developers.google.com/structured-data/carousels/top-stories).
<hr>
Gute Neuigkeiten! Das ist alles, was Sie zum Erstellen Ihrer ersten AMP-Seite brauchen. Aber natürlich passiert bisher noch nicht viel im HTML-Body. In den nächsten Schritten erfahren Sie, wie Sie grundlegende Komponenten wie Bilder und benutzerdefinierte AMP-Elemente hinzufügen, Ihre Seite gestalten und ein responsives Layout erstellen.
<a class="go-button button" href="/de/docs/get_started/create/include_image.html">Weiter mit Schritt 2</a>
```
--------------------------------------------------------------------------------
/content/docs/get_started/create/[email protected]:
--------------------------------------------------------------------------------
```markdown
---
$title: Crea la tua pagina HTML AMP
---
Il seguente markup costituisce un discreto punto di inizio o boilerplate.
Copialo e salvalo in un file con estensione .html.
[sourcecode:html]
<!doctype html>
<html amp lang="en">
<head>
<meta charset="utf-8">
<title>Hello, AMPs</title>
<link rel="canonical" href="http://example.ampproject.org/article-metadata.html" />
<meta name="viewport" content="width=device-width,minimum-scale=1,initial-scale=1">
<script type="application/ld+json">
{
"@context": "http://schema.org",
"@type": "NewsArticle",
"headline": "Open-source framework for publishing content",
"datePublished": "2015-10-07T12:02:41Z",
"image": [
"logo.jpg"
]
}
</script>
<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>
<h1>Welcome to the mobile web</h1>
</body>
</html>
[/sourcecode]
Il contenuto del corpo della pagina, fin qui, è piuttosto lineare. Nell’intestazione della pagina però è presente una buona porzione di codice supplementare che potrebbe non risultare immediatamente ovvio. Proviamo a scomporre il markup obbligatorio.
## Markup obbligatorio
I documenti HTML AMP DEVONO:
- Iniziare con il doctype `<!doctype html>`.
- Contenere un tag di primo livello `<html ⚡>` (`<html amp>` è ugualmente accettato).
- Contenere i tag `<head>` e `<body>` (questi sono opzionali in HTML).
- Contenere un tag `<link rel="canonical" href="$SOME_URL" />` all’interno dell’intestazione che faccia riferimento alla normale versione HTML del documento HTML AMP o a sé stesso se non esiste tale versione HTML.
- Contenere un tag `<meta charset="utf-8">` in quanto primo tag secondario del tag dell’intestazione.
- Contenere un tag `<meta name="viewport" content="width=device-width,minimum-scale=1">` all’interno del tag dell’intestazione. Si consiglia anche di includere initial-scale=1.
- Contenere un tag `<script async src="https://cdn.ampproject.org/v0.js"></script>` in quanto ultimo elemento dell’intestazione (ciò comprende e carica la libreria AMP JS).
- Contenere quanto segue nei tag `<head>`:
`<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>`
## Metadati opzionali
Oltre ai requisiti di base, il nostro campione nell’intestazione comprende anche una definizione Schema.org, che non è un requisito essenziale per AMP, ma è un requisito per la distribuzione del contenuto in alcuni luoghi, ad esempio nella [demo del carosello di notizie di Ricerca Google (provala sul tuo telefono)](https://g.co/ampdemo).
Per ulteriori informazioni su tutti i metadati che ti serviranno i svariate altre situazioni, come Twitter, [esamina i nostri campioni](https://github.com/ampproject/amphtml/tree/master/examples/metadata-examples). Per informazioni dettagliate su AMP in Ricerca Google, vai alla sezione [Top Stories con AMP](https://developers.google.com/structured-data/carousels/top-stories).
<hr>
Buone notizie! Questo è tutto ciò che ci serve per creare la nostra prima pagina AMP, ma naturalmente il corpo della pagina non comprende ancora molte informazioni. Nella prossima sezione parleremo di come aggiungere componenti di base come immagini ed elementi AMP personalizzati, di come applicare uno stile alla pagina e di come definire un layout reattivo.
<a class="go-button button" href="/it/docs/get_started/create/include_image.html">Vai al Passaggio 2</a>
```
--------------------------------------------------------------------------------
/content/docs/get_started/create/[email protected]:
--------------------------------------------------------------------------------
```markdown
---
$title: Crea tu página AMP HTML
---
El siguiente marcado es un punto de partida o código estándar aceptable.
Cópialo y guárdalo en un archivo con extensión .html.
[sourcecode:html]
<!doctype html>
<html amp lang="es">
<head>
<meta charset="utf-8">
<script async src="https://cdn.ampproject.org/v0.js"></script>
<title>Hola, AMP</title>
<link rel="canonical" href="http://example.ampproject.org/article-metadata.html" />
<meta name="viewport" content="width=device-width,minimum-scale=1,initial-scale=1">
<script type="application/ld+json">
{
"@context": "http://schema.org",
"@type": "NewsArticle",
"headline": "Open-source framework for publishing content",
"datePublished": "2015-10-07T12:02:41Z",
"image": [
"logo.jpg"
]
}
</script>
<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>
</head>
<body>
<h1>Bienvenido a la web móvil</h1>
</body>
</html>
[/sourcecode]
El contenido del cuerpo, hasta ahora, es bastante sencillo. Sin embargo, hay mucho más código en la etiqueta `<head>` de la página que podría no ser evidente de inmediato. Analicemos el marcado obligatorio.
## Marcado obligatorio
Los documentos AMP HTML DEBEN:
- Comenzar con el tipo de documento `<!doctype html>`.
- Contener la etiqueta `<html ⚡>` en el nivel superior (también se acepta `<html amp>`).
- Contener las etiquetas `<head>` y `<body>` (opcionales en HTML).
- Contener la etiqueta `<meta charset="utf-8">` como el primer hijo de su etiqueta `<head>`.
- Contener la etiqueta `<script async src="https://cdn.ampproject.org/v0.js"></script>` como el segundo hijo de su etiqueta `<head>` (esto incluye y carga la biblioteca AMP JS).
- Contener una etiqueta `<link rel="canonical" href="$SOME_URL" />` en la etiqueta `<head>` orientada a la versión de HTML común del documento de AMP HTML o a sí misma si no existiera dicha versión de HTML.
- Contener una etiqueta `<meta name="viewport" content="width=device-width,minimum-scale=1">` en la etiqueta `<head>`. También se recomienda incluir initial-scale=1.
- Contener lo siguiente en su etiqueta `<head>`:
`<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>`
## Meta datos opcionales
Además de los requisitos básicos, en nuestro ejemplo también se incluye una definición Schema.org en el `<head>`, que no es un requisito estricto para AMP, pero es un requisito para poder distribuir tu contenido en determinados sitios. Por ejemplo, en la [demostración del carrusel de novedades sobre Búsqueda de Google (pruébalo en tu teléfono)](https://g.co/ampdemo).
Para obtener más información acerca de todos los metadatos que necesitarás en muchos otros entornos (por ejemplo, Twitter), [explora nuestros ejemplos](https://github.com/ampproject/amphtml/tree/master/examples/metadata-examples). Para obtener información específica sobre AMP en la Búsqueda de Google, consulta [Historias principales con AMP](https://developers.google.com/structured-data/carousels/top-stories).
<hr>
¡Buenas noticias! Eso es todo lo que necesitamos para crear nuestra primera página AMP, aunque por supuesto aún no hay demasiadas noticias respecto del `<body>`. En la próxima sección, veremos la manera de agregar componentes básicos, como imágenes, elementos de AMP personalizados, de dar estilo a tu página y de definir un diseño responsivo.
<a class="go-button button" href="/es/docs/get_started/create/include_image.html">Continuar con el paso 2</a>
```
--------------------------------------------------------------------------------
/content/docs/guides/author_develop/[email protected]:
--------------------------------------------------------------------------------
```markdown
---
$title: Inclure du contenu tiers
---
Découvrez comment inclure des composants tiers dans vos pages.
[TOC]
## Intégrer un tweet
Intégrez un tweet de Twitter dans votre page à l'aide de l'élément [`amp-twitter`](/docs/reference/extended/amp-twitter.html).
Pour inclure un tweet dans votre page, incluez d'abord le script suivant dans la section `<head>` :
[sourcecode:html]
<script async custom-element="amp-twitter" src="https://cdn.ampproject.org/v0/amp-twitter-0.1.js"></script>
[/sourcecode]
Actuellement, les tweets sont automatiquement redimensionnés en fonction de la taille indiquée, mais ne s'affichent pas forcément de façon idéale.
Modifiez manuellement la largeur et la hauteur fournies ou utilisez l'attribut média pour sélectionner le format en fonction de la largeur de l'écran.
Exemple d'élément `amp-twitter` tiré de [twitter.amp](https://github.com/ampproject/amphtml/blob/master/examples/twitter.amp.html) :
[sourcecode:html]
<amp-twitter width="390" height="50"
layout="responsive"
data-tweetid="638793490521001985">
</amp-twitter>
[/sourcecode]
## Intégrer une publication Instagram
Intégrez une publication Instagram dans votre page à l'aide de l'élément [`amp-instagram`](/docs/reference/extended/amp-instagram.html).
Pour inclure une publication Instagram, incluez d'abord le script suivant dans la section `<head>` :
[sourcecode:html]
<script async custom-element="amp-instagram" src="https://cdn.ampproject.org/v0/amp-instagram-0.1.js"></script>
[/sourcecode]
Incluez le code court d'Instagram figurant dans l'URL de la photo Instagram. Ainsi, dans `https://instagram.com/p/fBwFP`, `fBwFP` est le code court.
De plus, Instagram utilise un format fixe pour les mises en page responsives. Ainsi, les valeurs de largeur et de hauteur doivent être universelles.
[sourcecode:html]
<amp-instagram
data-shortcode="fBwFP"
width="320"
height="392"
layout="responsive">
</amp-instagram>
[/sourcecode]
## Afficher un post ou une vidéo Facebook
Affichez un post ou une vidéo Facebook dans votre page à l'aide de l'élément [`amp-facebook`](/docs/reference/extended/amp-facebook.html).
Vous devez inclure le script suivant dans la section `<head>` :
[sourcecode:html]
<script async custom-element="amp-facebook" src="https://cdn.ampproject.org/v0/amp-facebook-0.1.js"></script>
[/sourcecode]
Exemple d'intégration d'un post :
[sourcecode:html]
<amp-facebook width=486 height=657
layout="responsive"
data-href="https://www.facebook.com/zuck/posts/10102593740125791">
</amp-facebook>
[/sourcecode]
Exemple d'intégration d'une vidéo :
[sourcecode:html]
<amp-facebook width=552 height=574
layout="responsive"
data-embed-as="video"
data-href="https://www.facebook.com/zuck/videos/10102509264909801/">
</amp-facebook>
[/sourcecode]
## Inclure une vidéo YouTube
Incluez une vidéo YouTube dans votre page à l'aide de l'élément [`amp-youtube`](/docs/reference/extended/amp-youtube.html).
Vous devez inclure le script suivant dans la section `<head>` :
[sourcecode:html]
<script async custom-element="amp-youtube" src="https://cdn.ampproject.org/v0/amp-youtube-0.1.js"></script>
[/sourcecode]
L'élément `data-videoid` YouTube figure dans l'URL de chaque page de vidéo YouTube. Ainsi, dans https://www.youtube.com/watch?v=Z1q71gFeRqM, Z1q71gFeRqM représente l'identification vidéo.
Utilisez `layout="responsive"` pour obtenir une mise en page correcte des vidéos au format 16:9 :
[sourcecode:html]
<amp-youtube
data-videoid="mGENRKrdoGY"
layout="responsive"
width="480" height="270">
</amp-youtube>
[/sourcecode]
## Afficher une annonce
Affichez une annonce sur votre page à l'aide de l'élément [`amp-ad`](/docs/reference/amp-ad.html).
Seules les annonces diffusées via le protocole HTTPS sont acceptées.
Aucun code JavaScript fourni par un réseau publicitaire ne peut fonctionner dans un document AMP.
À la place, l'exécution AMP charge un iFrame d'une autre origine (via le bac à sable de l'iFrame) et exécute le JavaScript du réseau publicitaire dans ce bac à sable iFrame.
Vous devez préciser la largeur et la hauteur de l'annonce, et le type de réseau publicitaire.
Le `type` identifie le modèle de réseau publicitaire.
Des types d'annonces différents nécessitent des attributs `data-*` différents.
[sourcecode:html]
<amp-ad width="300" height="250"
type="example"
data-aax_size="300x250"
data-aax_pubname="test123"
data-aax_src="302">
</amp-ad>
[/sourcecode]
Si le réseau publicitaire le permet, incluez un `placeholder` à afficher si aucune annonce n'est disponible :
[sourcecode:html]
<amp-ad width="300" height="250"
type="example"
data-aax_size="300x250"
data-aax_pubname="test123"
data-aax_src="302">
<div placeholder>Have a great day!</div>
</amp-ad>
[/sourcecode]
AMP accepte un large éventail de réseaux publicitaires. [Consultez la liste complète.](/docs/reference/amp-ad.html#supported-ad-networks)
```
--------------------------------------------------------------------------------
/content/docs/guides/author_develop/responsive_amp@pt_BR.md:
--------------------------------------------------------------------------------
```markdown
---
$title: Criar páginas AMP responsivas
toc: true
---
É muito fácil gerar elementos responsivos nas AMP.
Basta incluir `layout=responsive` neles.
[TOC]
## Criar imagens responsivas
Todos os recursos que são carregados externamente, incluindo as imagens,
precisam ter um tamanho e uma posição previamente especificados
para que a página não "pule" nem passe por refluxo.
Crie imagens responsivas
especificando a largura e altura,
ajustando o layout para o modo responsivo
e indicando com [`srcset`](/docs/guides/responsive/style_pages.html)
qual recurso de imagem será usado conforme diferentes tamanhos de tela:
[sourcecode:html]
<amp-img
src="/img/narrow.jpg"
srcset="/img/wide.jpg 640w,
/img/narrow.jpg 320w"
width="1698"
height="2911"
layout="responsive"
alt="an image">
</amp-img>
[/sourcecode]
O elemento `amp-img` ajusta-se automaticamente à largura
do seu elemento contêiner,
e sua altura é automaticamente definida para a proporção
determinada pela largura e altura fornecidas:
<amp-img src="/static/img/docs/responsive_amp_img.png" width="500" height="857" layout="responsive"></amp-img>
Veja também [AMP pelo amp-img de exemplo](https://ampbyexample.com/components/amp-img/).
## Adicionar estilos a uma página
Adicione todos os estilos dentro da tag `<style amp-custom>`
no cabeçalho do documento.
Por exemplo:
[sourcecode:html]
<!doctype html>
<head>
<meta charset="utf-8">
<link rel="canonical" href="hello-world.html" >
<meta name="viewport" content="width=device-width,minimum-scale=1,initial-scale=1">
<style amp-boilerplate>body{-webkit-animation:-amp-start 8s steps(1,end) 0s 1 normal both;-moz-animation:-amp-start 8s steps(1,end) 0s 1 normal both;-ms-animation:-amp-start 8s steps(1,end) 0s 1 normal both;animation:-amp-start 8s steps(1,end) 0s 1 normal both}@-webkit-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@-moz-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@-ms-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@-o-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}</style><noscript><style amp-boilerplate>body{-webkit-animation:none;-moz-animation:none;-ms-animation:none;animation:none}</style></noscript>
<style amp-custom>
/* any custom style goes here. */
body {
background-color: white;
}
amp-img {
border: 5px solid black;
}
amp-img.grey-placeholder {
background-color: grey;
}
</style>
<script async src="https://cdn.ampproject.org/v0.js"></script>
</head>
[/sourcecode]
**Importante:**
Certifique-se de que haja só uma tag `<style amp-custom>` na sua página,
pois a AMP não permite mais de uma delas.
Defina os estilos dos componentes com os seletores de classe ou elemento
usando as propriedades comuns de CSS. Por exemplo:
[sourcecode:html]
<body>
<p>Hello, Kitty.</p>
<amp-img
class="grey-placeholder"
src="https://placekitten.com/g/500/300"
srcset="/img/cat.jpg 640w,
/img/kitten.jpg 320w"
width="500"
height="300"
layout="responsive">
</amp-img>
</body>
[/sourcecode]
**Importante:**
Verifique se seus estilos são compatíveis com AMP.
Alguns estilos não têm suporte por conta do desempenho deles
(veja também [CSS com suporte](/docs/guides/responsive/style_pages.html)).
## Elementos de tamanho e posição
A AMP desacopla o layout do documento do carregamento de recursos
para que ela possa carregar o layout da página sem ter que esperar pelo download dos recursos.
Especifique o tamanho e a posição de todos os elementos visíveis da AMP,
fornecendo um atributo `width` e `height`.
Esses atributos implicam a proporção do elemento,
o que pode ser dimensionado de acordo com o contêiner.
Defina o layout como responsivo.
Isso redimensiona o elemento de acordo com a largura do seu elemento contêiner e redimensiona a sua altura automaticamente de acordo com a proporção determinada pelos atributos de largura e altura.
Saiba mais sobre [layouts compatíveis com AMP](/docs/guides/responsive/control_layout.html).
## Validar seus estilos e layout
Use o validador de AMP para testar
os valores de CSS e layout da sua página.
O validador confere se a CSS da sua página não ultrapassa o limite de 50.000 bytes,
verifica a existência de estilos não permitidos e garante que o layout da página seja compatível e esteja formatado corretamente.
Veja também esta lista completa de [erros de estilo e layout](/docs/reference/validation_errors.html#style-and-layout-errors).
Exemplo de erro no console em uma página com CSS que ultrapassa o limite de 50.000 bytes:
<amp-img src="/static/img/docs/too_much_css.png" width="1404" height="334" layout="responsive"></amp-img>
Saiba mais sobre como [validar suas páginas AMP](/docs/guides/validate.html),
incluindo como rastrear e corrigir erros de estilo.
```
--------------------------------------------------------------------------------
/content/docs/guides/author_develop/[email protected]:
--------------------------------------------------------------------------------
```markdown
---
$title: Duyarlı AMP Sayfaları Oluşturma
toc: true
---
AMP'de duyarlı öğeleri son derece kolay bir şekilde oluşturabilirsiniz. Bunun için öğelere `layout=responsive` kodunu eklemeniz yeterlidir.
[TOC]
## Duyarlı resimler oluşturma
Resimler de dahil olmak üzere harici olarak yüklenen tüm kaynakların belirli bir boyutunun ve konumunun olması gerekir. Böylece, kaynaklar yüklendikçe sayfa atlamaz ve yeniden düzenlenmez.
Duyarlı resimler oluşturmak için genişliği ve yüksekliği belirtin, düzeni duyarlı olarak ayarlayın ve [`srcset`](/docs/guides/responsive/style_pages.html) ile değişen ekran boyutlarına göre kullanılacak resim öğesini belirtin:
[sourcecode:html]
<amp-img
src="/img/narrow.jpg"
srcset="/img/wide.jpg 640w,
/img/narrow.jpg 320w"
width="1698"
height="2911"
layout="responsive"
alt="an image">
</amp-img>
[/sourcecode]
Bu `amp-img` öğesi, kapsayıcı öğesinin genişliğine otomatik olarak sığar ve yüksekliği, belirtilen genişlik ve yüksekliğe göre belirlenen en boy oranına otomatik olarak ayarlanır:
<amp-img src="/static/img/docs/responsive_amp_img.png" width="500" height="857" layout="responsive"></amp-img>
Ayrıca [Örneklerle AMP amp-img](https://ampbyexample.com/components/amp-img/) konusuna bakabilirsiniz.
## Sayfaya stil ekleme
Tüm stilleri, dokümanın head bölümündeki `<style amp-custom>` etiketinin içine ekleyin.
Örneğin:
[sourcecode:html]
<!doctype html>
<head>
<meta charset="utf-8">
<link rel="canonical" href="hello-world.html" >
<meta name="viewport" content="width=device-width,minimum-scale=1,initial-scale=1">
<style amp-boilerplate>body{-webkit-animation:-amp-start 8s steps(1,end) 0s 1 normal both;-moz-animation:-amp-start 8s steps(1,end) 0s 1 normal both;-ms-animation:-amp-start 8s steps(1,end) 0s 1 normal both;animation:-amp-start 8s steps(1,end) 0s 1 normal both}@-webkit-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@-moz-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@-ms-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@-o-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}</style><noscript><style amp-boilerplate>body{-webkit-animation:none;-moz-animation:none;-ms-animation:none;animation:none}</style></noscript>
<style amp-custom>
/* any custom style goes here. */
body {
background-color: white;
}
amp-img {
border: 5px solid black;
}
amp-img.grey-placeholder {
background-color: grey;
}
</style>
<script async src="https://cdn.ampproject.org/v0.js"></script>
</head>
[/sourcecode]
**Önemli:** Sayfanızda yalnızca bir `<style amp-custom>` etiketinin bulunduğundan emin olun; AMP'de bu etiketin birden fazla kullanılmasına izin verilmez.
Ortak CSS özelliklerini kullanarak sınıf veya öğe seçicilerle bileşen stillerini tanımlayın. Örneğin:
[sourcecode:html]
<body>
<p>Hello, Kitty.</p>
<amp-img
class="grey-placeholder"
src="https://placekitten.com/g/500/300"
srcset="/img/cat.jpg 640w,
/img/kitten.jpg 320w"
width="500"
height="300"
layout="responsive">
</amp-img>
</body>
[/sourcecode]
**Önemli:** Stillerinizin AMP'de desteklendiğinden emin olun. Bazı stiller performans nedeniyle desteklenmemektedir (ayrıca bkz. [Desteklenen CSS](/docs/guides/responsive/style_pages.html)).
## Boyut ve konum öğeleri
AMP, doküman düzenini kaynak yüklemesinden ayırır. Böylece AMP, kaynakların indirilmesini beklemeden sayfanın düzenini yükleyebilir.
Bir `width` ve `height` özniteliği sağlayarak tüm görünür AMP öğeleri için boyutu ve konumu belirtin.
Bu öznitelikler, öğenin en boy oranına işaret eder ve daha sonra, kapsayıcıyla ölçeklenebilir.
Düzeni duyarlı değerine ayarlayın.
Bu seçim, öğenin boyutunu kapsayıcı öğesinin genişliğine ayarlar ve yüksekliğini, otomatik olarak genişlik ve yükseklik öznitelikleri tarafından belirtilen en boy oranına göre yeniden boyutlandırır.
[AMP'de desteklenen düzenler](/docs/guides/responsive/control_layout.html) hakkında daha fazla bilgi edinin.
## Stillerinizi ve düzeninizi doğrulama
Sayfanızın CSS ve düzen değerlerini test etmek için AMP doğrulayıcıyı kullanın.
Doğrulayıcı, sayfanızın CSS'sinin 50.000 bayt sınırını aşmadığını doğrular, izin verilmeyen stilleri kontrol eder ve sayfa düzeninin desteklenip doğru bir şekilde biçimlendirildiğinden emin olur.
Ayrıca buradaki [Stil ve düzen hatalarının](/docs/reference/validation_errors.html#style-and-layout-errors) tam listesine de bakabilirsiniz.
50.000 bayt sınırını aşan CSS'ye sahip sayfa için konsolda gösterilen hata örneği:
<amp-img src="/static/img/docs/too_much_css.png" width="1404" height="334" layout="responsive"></amp-img>
Stil hatalarının bulunup düzeltilmesi de dahil olmak üzere [AMP sayfalarınızı nasıl doğrulayacağınız](/docs/guides/validate.html) konusunda daha fazla bilgi edinin.
```
--------------------------------------------------------------------------------
/content/docs/guides/author_develop/[email protected]:
--------------------------------------------------------------------------------
```markdown
---
$title: Includere contenuti di terze parti
---
Scopri come includere componenti di terze parti nelle tue pagine.
[TOC]
## Incorporare un tweet
Incorpora un tweet di Twitter nella pagina utilizzando l'elemento [`amp-twitter`](/docs/reference/extended/amp-twitter.html).
Per includere un tweet nella pagina, inserisci innanzitutto lo script seguente nella sezione `<head>`:
[sourcecode:html]
<script async custom-element="amp-twitter" src="https://cdn.ampproject.org/v0/amp-twitter-0.1.js"></script>
[/sourcecode]
Attualmente i tweet vengono ridimensionati automaticamente e proporzionalmente in base alle dimensioni specificate, ma questo comportamento potrebbe portare a un aspetto non ottimale.
Regola manualmente la larghezza e l'altezza fornite oppure utilizza l'attributo media per selezionare le proporzioni in base alla larghezza dello schermo.
`amp-twitter` di esempio tratto dall'[esempio di twitter.amp](https://github.com/ampproject/amphtml/blob/master/examples/twitter.amp.html):
[sourcecode:html]
<amp-twitter width=390 height=50
layout="responsive"
data-tweetid="638793490521001985">
</amp-twitter>
[/sourcecode]
## Incorporare una foto di Instagram
Incorpora una foto di Instagram nella pagina utilizzando l'elemento [`amp-instagram`](/docs/reference/extended/amp-instagram.html).
Per includere una foto di Instagram, inserisci innanzitutto lo script seguente nella sezione `<head>`:
[sourcecode:html]
<script async custom-element="amp-instagram" src="https://cdn.ampproject.org/v0/amp-instagram-0.1.js"></script>
[/sourcecode]
Includi l'elemento data-shortcode di Instagram indicato nell'URL della foto del servizio. Ad esempio, nell'URL `https://instagram.com/p/fBwFP` l'elemento data-shortcode è `fBwFP`.
Inoltre, Instagram utilizza proporzioni fisse per i layout reattivi, quindi il valore di larghezza e altezza dovrebbe essere universale.
[sourcecode:html]
<amp-instagram
data-shortcode="fBwFP"
width="320"
height="392"
layout="responsive">
</amp-instagram>
[/sourcecode]
## Mostrare post o video di Facebook
Mostra un post o un video di Facebook nella pagina utilizzando l'elemento [`amp-facebook`](/docs/reference/extended/amp-facebook.html).
Devi includere lo script seguente nella sezione `<head>`:
[sourcecode:html]
<script async custom-element="amp-facebook" src="https://cdn.ampproject.org/v0/amp-facebook-0.1.js"></script>
[/sourcecode]
Esempio - Incorporamento di un post:
[sourcecode:html]
<amp-facebook width=486 height=657
layout="responsive"
data-href="https://www.facebook.com/zuck/posts/10102593740125791">
</amp-facebook>
[/sourcecode]
Esempio - Incorporamento di un video:
[sourcecode:html]
<amp-facebook width=552 height=574
layout="responsive"
data-embed-as="video"
data-href="https://www.facebook.com/zuck/videos/10102509264909801/">
</amp-facebook>
[/sourcecode]
## Includere un video di YouTube
Includi un video di YouTube nella pagina utilizzando l'elemento [`amp-youtube`](/docs/reference/extended/amp-youtube.html).
Devi includere lo script seguente nella sezione `<head>`:
[sourcecode:html]
<script async custom-element="amp-youtube" src="https://cdn.ampproject.org/v0/amp-youtube-0.1.js"></script>
[/sourcecode]
Puoi trovare l'elemento `data-videoid` di YouTube nell'URL di ogni pagina video di YouTube.
Ad esempio, nell'URL https://www.youtube.com/watch?v=Z1q71gFeRqM, l'ID video è Z1q71gFeRqM.
Utilizza `layout="responsive"` per ottenere i layout corretti per video con proporzioni 16:9:
[sourcecode:html]
<amp-youtube
data-videoid="mGENRKrdoGY"
layout="responsive"
width="480" height="270">
</amp-youtube>
[/sourcecode]
## Mostrare un annuncio
Mostra un annuncio nella pagina utilizzando l'elemento [`amp-ad`](/docs/reference/amp-ad.html).
Sono supportati soltanto gli annunci pubblicati tramite HTTPS.
All'interno del documento AMP non è possibile eseguire codice JavaScript fornito da reti pubblicitarie.
Il runtime AMP carica un iframe da un'origine diversa (tramite la sandbox iframe) ed esegue il codice JavaScript della rete pubblicitaria all'interno della sandbox iframe.
Devi specificare la larghezza e l'altezza dell'annuncio, oltre al tipo di rete pubblicitaria.
L'attributo `type` identifica il modello della rete pubblicitaria.
Tipi di annunci diversi richiedono attributi `data-*` differenti.
[sourcecode:html]
<amp-ad width=300 height=250
type="example"
data-aax_size="300x250"
data-aax_pubname="test123"
data-aax_src="302">
</amp-ad>
[/sourcecode]
Includi un attributo `placeholder` (se supportato dalla rete pubblicitaria) da mostrare se non ci sono annunci disponibili:
[sourcecode:html]
<amp-ad width=300 height=250
type="example"
data-aax_size="300x250"
data-aax_pubname="test123"
data-aax_src="302">
<div placeholder>Have a great day!</div>
</amp-ad>
[/sourcecode]
AMP supporta una vasta gamma di reti pubblicitarie. Consulta [un elenco completo](/docs/reference/amp-ad.html#supported-ad-networks).
```
--------------------------------------------------------------------------------
/content/docs/guides/author_develop/[email protected]:
--------------------------------------------------------------------------------
```markdown
---
$title: Tworzenie elastycznych stron AMP
toc: true
---
Tworzenie elastycznych elementów AMP jest bardzo łatwe.
Wystarczy dodać do nich parametr `layout=responsive`.
[TOC]
## Tworzenie obrazów elastycznych
Wszystkie źródła wczytywane spoza strony, w tym obrazy, muszą mieć określony rozmiar i pozycję, by podczas ładowania się nie skakały po ekranie i nie zmieniały swojego układu.
Tworzenie obrazów elastycznych odbywa się poprzez określenie ich szerokości i wysokości, włączenie układu elastycznego oraz wskazanie za pomocą parametru [`srcset`](/docs/guides/responsive/style_pages.html), który plik obrazu będzie używany, zależnie od rozmiaru ekranu:
[sourcecode:html]
<amp-img
src="/img/narrow.jpg"
srcset="/img/wide.jpg 640w,
/img/narrow.jpg 320w"
width="1698"
height="2911"
layout="responsive"
alt="an image">
</amp-img>
[/sourcecode]
Ten element `amp-img` automatycznie
dopasowuje się do szerokości kontenera,
a jego wysokość jest ustalana automatycznie za
pomocą współczynnika proporcji określonego szerokością
i wysokością:
<amp-img src="/static/img/docs/responsive_amp_img.png" width="500" height="857" layout="responsive"></amp-img>
Zapoznaj się również z zawartością strony [AMP by Example – amp-img](https://ampbyexample.com/components/amp-img/).
## Dodawanie stylów do strony
Wszystkie style dodaje się w tagu `<style amp-custom>`
w nagłówku dokumentu.
Na przykład:
[sourcecode:html]
<!doctype html>
<head>
<meta charset="utf-8">
<link rel="canonical" href="hello-world.html" >
<meta name="viewport" content="width=device-width,minimum-scale=1,initial-scale=1">
<style amp-boilerplate>body{-webkit-animation:-amp-start 8s steps(1,end) 0s 1 normal both;-moz-animation:-amp-start 8s steps(1,end) 0s 1 normal both;-ms-animation:-amp-start 8s steps(1,end) 0s 1 normal both;animation:-amp-start 8s steps(1,end) 0s 1 normal both}@-webkit-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@-moz-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@-ms-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@-o-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}</style><noscript><style amp-boilerplate>body{-webkit-animation:none;-moz-animation:none;-ms-animation:none;animation:none}</style></noscript>
<style amp-custom>
/* any custom style goes here. */
body {
background-color: white;
}
amp-img {
border: 5px solid black;
}
amp-img.grey-placeholder {
background-color: grey;
}
</style>
<script async src="https://cdn.ampproject.org/v0.js"></script>
</head>
[/sourcecode]
**Ważne:**
upewnij się, że na stronie jest tylko jeden tag `<style amp-custom>`,
bo standard AMP nie pozwala na więcej.
Zdefiniuj style komponentów za pomocą
selektorów klasy lub elementu,
korzystając z typowych właściwości CSS. Na przykład:
[sourcecode:html]
<body>
<p>Hello, Kitty.</p>
<amp-img
class="grey-placeholder"
src="https://placekitten.com/g/500/300"
srcset="/img/cat.jpg 640w,
/img/kitten.jpg 320w"
width="500"
height="300"
layout="responsive">
</amp-img>
</body>
[/sourcecode]
**Ważne:**
sprawdź, czy standard AMP obsługuje style, których chcesz użyć.
Niektóre style nie są dozwolone ze względu na ich wydajność
(sprawdź również [obsługiwane elementy CSS](/docs/guides/responsive/style_pages.html)).
## Dobierz rozmiar i pozycje elementów
Standard AMP rozdziela układ i elementy dokumentu od ładowania zasobów,
by móc wczytać układ strony bez potrzeby czekania na ich pobranie.
Określ rozmiar i pozycję wszystkich widocznych elementów AMP,
dodając atrybuty `width` i `height`.
Te atrybuty opisują współczynnik proporcji obrazu,
który następnie podlega skalowaniu za pomocą kontenera.
Ustaw układ elastyczny.
Dzięki temu rozmiar elementu jest dopasowywany do szerokości kontenera,
a jego wysokość jest automatycznie dopasowywana do współczynnika proporcji określonego za pomocą atrybutów szerokości i wysokości.
Dowiedz się więcej na temat [układów obsługiwanych przez AMP](/docs/guides/responsive/control_layout.html).
## Zweryfikuj style i układ
Za pomocą narzędzia do weryfikacji stron AMP
przetestuj stronę pod kątem poprawności kodu CSS i układu strony.
Narzędzie to potwierdzi, że kod CSS Twojej strony nie
przekracza limitu 50 000 bajtów,
sprawdzi, czy strona nie zawiera niedozwolonych stylów,
oraz dopilnuje, by układ strony był poprawnie obsługiwany
i formatowany.
Sprawdź listę [błędów stylów i układów](/docs/reference/validation_errors.html#style-and-layout-errors).
Przykładowy błąd w konsoli dla strony z kodem CSS przekraczającym 50 000 bajtów:
<amp-img src="/static/img/docs/too_much_css.png" width="1404" height="334" layout="responsive"></amp-img>
Dowiedz się więcej o [weryfikacji stron AMP](/docs/guides/validate.html),
w tym o sposobie wyszukiwania i naprawy błędów stylów.
```
--------------------------------------------------------------------------------
/content/docs/guides/author_develop/[email protected]:
--------------------------------------------------------------------------------
```markdown
---
$title: Incluir contenido de terceros
---
Obtén información sobre cómo incluir componentes de terceros en tus páginas.
[TOC]
## Insertar un tuit
Inserta un tuit de Twitter en tu página
con el elemento <a href="/docs/reference/extended/amp-twitter.html">`amp-twitter`</a>.
Para incluir un tuit en tu página,
incluye en primer lugar la siguiente secuencia de comandos en `<head>`:
[sourcecode:html]
<script async custom-element="amp-twitter" src="https://cdn.ampproject.org/v0/amp-twitter-0.1.js"></script>
[/sourcecode]
Actualmente, los tuits se adaptan de forma automática y proporcional a escala
para encajar en el tamaño indicado, pero es posible que la apariencia resultante no sea la ideal.
Ajusta la anchura y la altura de forma manual o usa el atributo de medios para seleccionar la relación de aspecto en función de la anchura de la pantalla.
Ejemplo de `amp-twitter` del
[ejemplo twitter.amp](https://github.com/ampproject/amphtml/blob/master/examples/twitter.amp.html):
[sourcecode:html]
<amp-twitter width="390" height="50"
layout="responsive"
data-tweetid="638793490521001985">
</amp-twitter>
[/sourcecode]
## Insertar una foto de Instagram
Inserta una foto de Instagram en tu página con el elemento [`amp-instagram`](/docs/reference/extended/amp-instagram.html).
Para incluir una foto de Instagram, en primer lugar incluye la siguiente secuencia de comandos en `<head>`:
[sourcecode:html]
<script async custom-element="amp-instagram" src="https://cdn.ampproject.org/v0/amp-instagram-0.1.js"></script>
[/sourcecode]
Incluye el código abreviado de datos de Instagram que se encuentra en la URL de la foto de Instagram.
Por ejemplo, en `https://instagram.com/p/fBwFP`, el código abreviado de datos es `fBwFP`.
Además, Instagram utiliza una relación de aspecto fija para los diseños adaptables, por lo que los valores de anchura y altura deben ser universales
[sourcecode:html]
<amp-instagram
data-shortcode="fBwFP"
width="320"
height="392"
layout="responsive">
</amp-instagram>
[/sourcecode]
## Mostrar entradas o vídeos de Facebook
Muestra una entrada o un vídeo de Facebook en tu página con el elemento [`amp-facebook`](/docs/reference/extended/amp-facebook.html).
Debes incluir la siguiente secuencia de comandos en `<head>`:
[sourcecode:html]
<script async custom-element="amp-facebook" src="https://cdn.ampproject.org/v0/amp-facebook-0.1.js"></script>
[/sourcecode]
Ejemplo: insertar una entrada:
[sourcecode:html]
<amp-facebook width=486 height=657
layout="responsive"
data-href="https://www.facebook.com/zuck/posts/10102593740125791">
</amp-facebook>
[/sourcecode]
Ejemplo: insertar un vídeo:
[sourcecode:html]
<amp-facebook width=552 height=574
layout="responsive"
data-embed-as="video"
data-href="https://www.facebook.com/zuck/videos/10102509264909801/">
</amp-facebook>
[/sourcecode]
## Insertar un vídeo de YouTube
Inserta un vídeo de YouTube en tu página con el elemento [`amp-youtube`](/docs/reference/extended/amp-youtube.html).
Debes incluir la siguiente secuencia de comandos en `<head>`:
[sourcecode:html]
<script async custom-element="amp-youtube" src="https://cdn.ampproject.org/v0/amp-youtube-0.1.js"></script>
[/sourcecode]
El atributo `data-videoid` de YouTube se puede encontrar en todas las URL de las páginas de vídeo de YouTube.
Por ejemplo, en https://www.youtube.com/watch?v=Z1q71gFeRqM,
el ID de vídeo es Z1q71gFeRqM.
Utiliza `layout="responsive"` para producir diseños correctos para los vídeos con una relación de aspecto de 16:9:
[sourcecode:html]
<amp-youtube
data-videoid="mGENRKrdoGY"
layout="responsive"
width="480" height="270">
</amp-youtube>
[/sourcecode]
## Mostrar un anuncio
Muestra un anuncio en tu página utilizando el elemento [`amp-ad`](/docs/reference/amp-ad.html).
Únicamente son compatibles los anuncios que se publiquen a través de HTTPS.
No se puede ejecutar ningún JavaScript proporcionado por una red publicitaria en el documento de AMP.
En cambio, en tiempo de ejecución de AMP se carga un iframe desde un
origen diferente (a través de la zona de pruebas de iframe)
y se ejecuta el JS de la red publicitaria dentro de esa zona.
Debes especificar la anchura y la altura del anuncio y el tipo de red publicitaria.
El atributo `type` identifica la plantilla de la red publicitaria.
Los diferentes tipos de anuncios requieren diferentes atributos `data-*`.
[sourcecode:html]
<amp-ad width="300" height="250"
type="example"
data-aax_size="300x250"
data-aax_pubname="test123"
data-aax_src="302">
</amp-ad>
[/sourcecode]
Si la red publicitaria lo admite, incluye un `placeholder` para que se muestre si no hay anuncios disponibles:
[sourcecode:html]
<amp-ad width="300" height="250"
type="example"
data-aax_size="300x250"
data-aax_pubname="test123"
data-aax_src="302">
<div placeholder>Have a great day!</div>
</amp-ad>
[/sourcecode]
AMP es compatible con una amplia gama de redes publicitarias. Consulta la [referencia para obtener una lista completa](/docs/reference/amp-ad.html#supported-ad-networks).
```
--------------------------------------------------------------------------------
/content/docs/guides/author_develop/[email protected]:
--------------------------------------------------------------------------------
```markdown
---
$title: Inhalte von Drittanbietern einschließen
---
In diesem Artikel wird beschrieben, wie Sie Drittanbieterkomponenten in Ihre Seiten einschließen können.
[TOC]
## Tweet integrieren
Wenn Sie auf Ihrer Seite einen Twitter-Tweet einbetten möchten, verwenden Sie das Element [`amp-twitter`](/docs/reference/extended/amp-twitter.html).
Fügen Sie dazu zunächst das folgende Skript in den `<head>`-Abschnitt ein:
[sourcecode:html]
<script async custom-element="amp-twitter" src="https://cdn.ampproject.org/v0/amp-twitter-0.1.js"></script>
[/sourcecode]
Derzeit werden Tweets automatisch entsprechend dem verfügbaren Platz skaliert. Die Darstellung ist dabei aber nicht immer optimal.
Passen Sie Breite und Höhe manuell an oder verwenden Sie das media-Attribut, um das Seitenverhältnis entsprechend der Bildschirmbreite festzulegen.
Beispiel für `amp-twitter` aus dem [twitter.amp-Beispiel](https://github.com/ampproject/amphtml/blob/master/examples/twitter.amp.html):
[sourcecode:html]
<amp-twitter width="390" height="50"
layout="responsive"
data-tweetid="638793490521001985">
</amp-twitter>
[/sourcecode]
## Instagram einbetten
Wenn Sie auf Ihrer Seite ein Instagram einbetten möchten, verwenden Sie das Element [`amp-instagram`](/docs/reference/extended/amp-instagram.html).
Fügen Sie dazu zunächst das folgende Skript in den `<head>`-Abschnitt ein:
[sourcecode:html]
<script async custom-element="amp-instagram" src="https://cdn.ampproject.org/v0/amp-instagram-0.1.js"></script>
[/sourcecode]
Schließen Sie den Instagram-Data-Shortcode aus der Instagram-Foto-URL ein. In `https://instagram.com/p/fBwFP` ist z. B. `fBwFP` der Data-Shortcode.
Außerdem wird bei Instagram für responsive Layouts ein festes Seitenverhältnis verwendet. Darum sollten die Werte für Breite und Höhe universell sein.
[sourcecode:html]
<amp-instagram
data-shortcode="fBwFP"
width="320"
height="392"
layout="responsive">
</amp-instagram>
[/sourcecode]
## Beitrag oder Video von Facebook anzeigen
Wenn Sie auf Ihrer Seite einen Beitrag oder ein Video von Facebook anzeigen möchten, verwenden Sie das Element [`amp-facebook`](/docs/reference/extended/amp-facebook.html).
Fügen Sie dazu das folgende Skript dem `<head>`-Abschnitt hinzu:
[sourcecode:html]
<script async custom-element="amp-facebook" src="https://cdn.ampproject.org/v0/amp-facebook-0.1.js"></script>
[/sourcecode]
Beispiel für das Einbetten eines Beitrags:
[sourcecode:html]
<amp-facebook width=486 height=657
layout="responsive"
data-href="https://www.facebook.com/zuck/posts/10102593740125791">
</amp-facebook>
[/sourcecode]
Beispiel für das Einbetten eines Videos:
[sourcecode:html]
<amp-facebook width=552 height=574
layout="responsive"
data-embed-as="video"
data-href="https://www.facebook.com/zuck/videos/10102509264909801/">
</amp-facebook>
[/sourcecode]
## YouTube-Video einschließen
Wenn Sie auf Ihrer Seite ein YouTube-Video einschließen möchten, verwenden Sie das Element [`amp-youtube`](/docs/reference/extended/amp-youtube.html).
Fügen Sie dazu das folgende Skript dem `<head>`-Abschnitt hinzu:
[sourcecode:html]
<script async custom-element="amp-youtube" src="https://cdn.ampproject.org/v0/amp-youtube-0.1.js"></script>
[/sourcecode]
Die YouTube-`data-videoid`-ID ist in jeder Videoseiten-URL von YouTube enthalten. In https://www.youtube.com/watch?v=Z1q71gFeRqM, ist z. B. Z1q71gFeRqM die Video-ID.
Verwenden Sie `layout="responsive"`, um das richtige Layout für Videos mit dem Seitenverhältnis 16:9 zu erhalten:
[sourcecode:html]
<amp-youtube
data-videoid="mGENRKrdoGY"
layout="responsive"
width="480" height="270">
</amp-youtube>
[/sourcecode]
## Werbeanzeige einblenden
Wenn Sie auf Ihrer Seite eine Werbeanzeige einblenden möchten, verwenden Sie das Element [`amp-ad`](/docs/reference/amp-ad.html).
Es werden nur über HTTPS bereitgestellte Werbeanzeigen unterstützt.
Innerhalb des AMP-Dokuments darf kein vom Werbenetzwerk bereitgestellter JavaScript-Code ausgeführt werden.
Stattdessen lädt die AMP-Laufzeit einen iFrame über die iFrame-Sandbox aus einer anderen Quelle und führt den JavaScript-Code des Werbenetzwerks innerhalb dieser iFrame-Sandbox aus.
Sie müssen Breite und Höhe der Werbeanzeige sowie den Typ des Werbenetzwerks angeben.
Mit `type` wird die Vorlage des Werbenetzwerks angegeben.
Unterschiedliche Anzeigentypen erfordern unterschiedliche `data-*`-Attribute.
[sourcecode:html]
<amp-ad width="300" height="250"
type="example"
data-aax_size="300x250"
data-aax_pubname="test123"
data-aax_src="302">
</amp-ad>
[/sourcecode]
Falls das Werbenetzwerk dies unterstützt, schließen Sie ein `placeholder`-Element ein, wenn keine Werbeanzeige verfügbar ist:
[sourcecode:html]
<amp-ad width="300" height="250"
type="example"
data-aax_size="300x250"
data-aax_pubname="test123"
data-aax_src="302">
<div placeholder>Have a great day!</div>
</amp-ad>
[/sourcecode]
AMP unterstützt viele verschiedene Werbenetzwerke. [Eine vollständige Liste finden Sie hier.](/docs/reference/amp-ad.html#supported-ad-networks)
```