This is page 9 of 24. Use http://codebase.md/cloudflare/docs/imgs/todomvc-screenshot-3.png?lines=true&page={x} to view the full context.
# Directory Structure
```
├── .editorconfig
├── .eslintrc.json
├── .firebaserc
├── .github
│ └── workflows
│ └── semgrep.yml
├── .gitignore
├── .travis.yml
├── assets
│ ├── extra
│ │ └── brand_assets.zip
│ ├── img
│ │ ├── about
│ │ │ ├── case-studies
│ │ │ │ └── bg_lines.png
│ │ │ ├── design-principles
│ │ │ │ ├── bg1.svg
│ │ │ │ ├── bg2.svg
│ │ │ │ ├── design_icon_break.svg
│ │ │ │ ├── design_icon_fast.svg
│ │ │ │ ├── design_icon_future.svg
│ │ │ │ ├── design_icon_layers.svg
│ │ │ │ ├── design_icon_priorities.svg
│ │ │ │ ├── design_icon_ux.svg
│ │ │ │ ├── design_icon_whitelist.svg
│ │ │ │ ├── lines1.svg
│ │ │ │ └── lines2.svg
│ │ │ ├── how-amp-works
│ │ │ │ ├── line_behind.svg
│ │ │ │ └── lines_front.svg
│ │ │ ├── overview
│ │ │ │ ├── bg2.svg
│ │ │ │ ├── herobg.svg
│ │ │ │ ├── herolines1.svg
│ │ │ │ ├── herolines2.svg
│ │ │ │ ├── line4.svg
│ │ │ │ ├── lines3.svg
│ │ │ │ ├── what_phone.png
│ │ │ │ ├── what_phone@1_5x.png
│ │ │ │ └── [email protected]
│ │ │ └── who-use-amp
│ │ │ ├── adtech
│ │ │ │ ├── adtech_icon_customize.svg
│ │ │ │ ├── adtech_icon_intro.svg
│ │ │ │ ├── adtech_icon_reach.svg
│ │ │ │ ├── adtech_icon_revenue.svg
│ │ │ │ ├── indexexchange_logo.png
│ │ │ │ ├── lines.svg
│ │ │ │ ├── sharethrough_logo.png
│ │ │ │ ├── teads_logo.svg
│ │ │ │ └── triplelift_logo.png
│ │ │ ├── advertisers
│ │ │ │ ├── advertiser_phone_wired.png
│ │ │ │ ├── advertiser_phone_wired@1_5x.png
│ │ │ │ ├── [email protected]
│ │ │ │ ├── advertisers_bg.svg
│ │ │ │ ├── advertisers_icon_audience.svg
│ │ │ │ ├── advertisers_icon_everywhere.svg
│ │ │ │ ├── advertisers_icon_intro.svg
│ │ │ │ ├── advertisers_icon_ROI.svg
│ │ │ │ └── advertisers_lines.svg
│ │ │ ├── amp-ads
│ │ │ │ ├── ads_icon.svg
│ │ │ │ ├── cloudflare_logo.png
│ │ │ │ ├── doubleclick_logo.png
│ │ │ │ ├── google_logo.png
│ │ │ │ ├── lines_bottom1.svg
│ │ │ │ ├── lines_bottom2.svg
│ │ │ │ ├── lines.svg
│ │ │ │ ├── roi_icon.svg
│ │ │ │ ├── speed_icon.svg
│ │ │ │ └── triplelift_logo.png
│ │ │ ├── card_developers.png
│ │ │ ├── card_developers.svg
│ │ │ ├── card_smb.png
│ │ │ ├── card_smb.svg
│ │ │ ├── hero_triangle.png
│ │ │ ├── publishers
│ │ │ │ ├── globo_logo.svg
│ │ │ │ ├── nyt_logo.svg
│ │ │ │ ├── publisher_icon_business.svg
│ │ │ │ ├── publisher_icon_fast.svg
│ │ │ │ ├── publisher_icon_intro.svg
│ │ │ │ ├── publisher_icon_simple.svg
│ │ │ │ ├── publisher_phone_cnn.png
│ │ │ │ ├── publisher_phone_cnn@1_5x.png
│ │ │ │ ├── [email protected]
│ │ │ │ ├── wapo_logo.png
│ │ │ │ └── wired_logo.png
│ │ │ ├── who_icon_adtech.svg
│ │ │ ├── who_icon_advertisers.svg
│ │ │ ├── who_icon_publishers.svg
│ │ │ ├── who_lines1.svg
│ │ │ ├── who_lines2.svg
│ │ │ ├── who_phones_hero.png
│ │ │ ├── who_phones_hero@1_5x.png
│ │ │ └── [email protected]
│ │ ├── amp_favicon.png
│ │ ├── amp-conf
│ │ │ └── speakers
│ │ │ ├── alex.jpg
│ │ │ ├── ali.jpg
│ │ │ ├── ardan.jpg
│ │ │ ├── beck.jpg
│ │ │ ├── bez.jpg
│ │ │ ├── chen.jpg
│ │ │ ├── dane.jpg
│ │ │ ├── eric.jpg
│ │ │ ├── gina.jpg
│ │ │ ├── honey.jpg
│ │ │ ├── jeremy.jpg
│ │ │ ├── john.jpg
│ │ │ ├── le.jpg
│ │ │ ├── madison.jpg
│ │ │ ├── malte.jpg
│ │ │ ├── malteandrudy.jpg
│ │ │ ├── mariko.jpg
│ │ │ ├── matthew.jpg
│ │ │ ├── mike.jpg
│ │ │ ├── natalia.jpg
│ │ │ ├── nicole.jpg
│ │ │ ├── paul.jpg
│ │ │ ├── ranna.jpg
│ │ │ ├── richard.jpg
│ │ │ ├── rudy.jpg
│ │ │ ├── sam.jpg
│ │ │ ├── sarah.jpg
│ │ │ ├── sebastian.jpg
│ │ │ ├── senthil.jpg
│ │ │ ├── sriram.jpg
│ │ │ ├── vadim.jpg
│ │ │ ├── vamsee.jpg
│ │ │ ├── will.jpg
│ │ │ └── yamini.jpg
│ │ ├── arrow-blue.svg
│ │ ├── arrow.svg
│ │ ├── background.jpg
│ │ ├── blog-icon.svg
│ │ ├── brand-guidelines.pdf
│ │ ├── case-studies
│ │ │ ├── gizmodo_logo.png
│ │ │ ├── gizmodo_phone1.png
│ │ │ ├── gizmodo_phone1@1_5x.png
│ │ │ ├── [email protected]
│ │ │ ├── gizmodo_phone2.png
│ │ │ ├── gizmodo_phone2@1_5x.png
│ │ │ ├── [email protected]
│ │ │ ├── gizmodo_thumb.jpg
│ │ │ ├── gizmodo.pdf
│ │ │ ├── hearst_framed.png
│ │ │ ├── hearst_framed2.png
│ │ │ ├── hearst_logo.png
│ │ │ ├── hearst_thumb.jpg
│ │ │ ├── hearst.pdf
│ │ │ ├── milestone_home_framed.png
│ │ │ ├── milestone_logo.png
│ │ │ ├── milestone_search_framed.png
│ │ │ ├── milestone_thumb.jpg
│ │ │ ├── milestone.pdf
│ │ │ ├── plista_graphic.png
│ │ │ ├── plista_logo.png
│ │ │ ├── plista_thumb.jpg
│ │ │ ├── plista.pdf
│ │ │ ├── relay_media_logo.png
│ │ │ ├── relay_media_thumb.jpg
│ │ │ ├── relay_media.pdf
│ │ │ ├── relaymedia_phone1.png
│ │ │ ├── relaymedia_phone1@1_5x.png
│ │ │ ├── [email protected]
│ │ │ ├── relaymedia_phone2.png
│ │ │ ├── relaymedia_phone2@1_5x.png
│ │ │ ├── [email protected]
│ │ │ ├── slate_logo.png
│ │ │ ├── slate_phone1.png
│ │ │ ├── slate_phone1@1_5x.png
│ │ │ ├── [email protected]
│ │ │ ├── slate_phone2.png
│ │ │ ├── slate_phone2@1_5x.png
│ │ │ ├── [email protected]
│ │ │ ├── slate_thumb.jpg
│ │ │ ├── slate.pdf
│ │ │ ├── teads_logo.png
│ │ │ ├── teads_logo2.png
│ │ │ ├── teads_phone.png
│ │ │ ├── teads_phone@1_5x.png
│ │ │ ├── [email protected]
│ │ │ ├── teads_thumb.jpg
│ │ │ ├── teads.pdf
│ │ │ ├── terra_framed1.png
│ │ │ ├── terra_framed2.png
│ │ │ ├── terra_logo.png
│ │ │ ├── terra_thumb.jpg
│ │ │ ├── terra.pdf
│ │ │ ├── wapo_logo.png
│ │ │ ├── wapo_thumb.png
│ │ │ ├── wapo.pdf
│ │ │ ├── washingtonpost_phone.png
│ │ │ ├── washingtonpost_phone@1_5x.png
│ │ │ ├── [email protected]
│ │ │ ├── wired_logo.png
│ │ │ ├── wired_phone1.png
│ │ │ ├── wired_phone1@1_5x.png
│ │ │ ├── [email protected]
│ │ │ ├── wired_phone2.png
│ │ │ ├── wired_phone2@1_5x.png
│ │ │ ├── [email protected]
│ │ │ ├── wired_thumb.jpg
│ │ │ └── wired.pdf
│ │ ├── cheveron-down.svg
│ │ ├── close.svg
│ │ ├── comment.png
│ │ ├── docs
│ │ │ ├── icon_important.svg
│ │ │ ├── icon_note.svg
│ │ │ ├── icon_read.svg
│ │ │ ├── icon_tip.svg
│ │ │ ├── responsive_amp_img.png
│ │ │ ├── too_much_css.png
│ │ │ ├── validator_console_imgerror.png
│ │ │ ├── validator_errors.png
│ │ │ ├── validator_extension_imgerror.png
│ │ │ ├── validator_icon_invalid.png
│ │ │ ├── validator_icon_link.png
│ │ │ ├── validator_icon_valid.png
│ │ │ ├── validator_mandatory_error.png
│ │ │ ├── validator_web_ui.png
│ │ │ └── validator_webui_imgerror.png
│ │ ├── enforce-comment.png
│ │ ├── footer
│ │ │ ├── line-left.png
│ │ │ ├── line-right-2.png
│ │ │ └── line-right.png
│ │ ├── github.png
│ │ ├── hamburger.svg
│ │ ├── home
│ │ │ ├── bg_experience.png
│ │ │ ├── home_hero_phone.png
│ │ │ ├── home_hero_phone@1_5x.png
│ │ │ ├── [email protected]
│ │ │ ├── home_icon_flexibility.svg
│ │ │ ├── home_icon_performance.svg
│ │ │ ├── home_phone_ebay.png
│ │ │ ├── home_phone_ebay@1_5x.png
│ │ │ ├── [email protected]
│ │ │ ├── lines2.svg
│ │ │ ├── lines3.svg
│ │ │ ├── shapebg.svg
│ │ │ ├── teads_logo.svg
│ │ │ ├── wapo_logo.png
│ │ │ └── wired_logo.png
│ │ ├── ic_open_in_new_black.svg
│ │ ├── ic_open_in_new_white.svg
│ │ ├── icons
│ │ │ ├── 120.png
│ │ │ ├── 144.png
│ │ │ ├── 152.png
│ │ │ ├── 168.png
│ │ │ ├── 180.png
│ │ │ ├── 192.png
│ │ │ ├── 48.png
│ │ │ ├── 512.png
│ │ │ ├── 72.png
│ │ │ ├── 96.png
│ │ │ └── any.svg
│ │ ├── latest
│ │ │ ├── events
│ │ │ │ ├── event_empty.png
│ │ │ │ ├── event_empty.svg
│ │ │ │ └── event_hero.svg
│ │ │ ├── icon_audience.png
│ │ │ ├── icon_audience.svg
│ │ │ ├── icon_calendar.png
│ │ │ ├── icon_calendar.svg
│ │ │ ├── icon_location.png
│ │ │ ├── icon_location.svg
│ │ │ ├── icon_retweet.png
│ │ │ ├── icon_retweet.svg
│ │ │ ├── icon_twitter.svg
│ │ │ ├── latest_hero.jpg
│ │ │ ├── line_hero_back.svg
│ │ │ └── line_hero_front.svg
│ │ ├── liveblog-pagination.png
│ │ ├── login-button.png
│ │ ├── logo-blue.svg
│ │ ├── logout-button.png
│ │ ├── malte.jpg
│ │ ├── motions
│ │ │ └── amp-lines-motions.png
│ │ ├── nav
│ │ │ ├── back_arrow.png
│ │ │ ├── back_arrow.svg
│ │ │ ├── close.png
│ │ │ ├── close.svg
│ │ │ ├── next_level.png
│ │ │ └── next_level.svg
│ │ ├── partners
│ │ │ ├── adobe_analytics.png
│ │ │ ├── chartbeat.png
│ │ │ ├── comscore.png
│ │ │ ├── ggl_bw.png
│ │ │ ├── ggl.png
│ │ │ ├── li.png
│ │ │ ├── nuzzel.png
│ │ │ ├── parsely.png
│ │ │ ├── pinterest.png
│ │ │ ├── tw.png
│ │ │ └── wp.png
│ │ ├── platforms
│ │ │ ├── chrome.png
│ │ │ ├── criteo.png
│ │ │ ├── edge.png
│ │ │ ├── firefox.png
│ │ │ ├── google.png
│ │ │ ├── inmobi.png
│ │ │ ├── kargo.png
│ │ │ ├── mediavine.png
│ │ │ ├── opera.png
│ │ │ ├── plista.png
│ │ │ ├── safari.png
│ │ │ └── yahoo.png
│ │ ├── publishers
│ │ │ ├── abril.png
│ │ │ ├── asahi.png
│ │ │ ├── atlantic_media.png
│ │ │ ├── bbc_news.png
│ │ │ ├── buzzfeed.png
│ │ │ ├── condenast.png
│ │ │ ├── daily_mail.png
│ │ │ ├── economist.png
│ │ │ ├── editora_globo.png
│ │ │ ├── el_pais.png
│ │ │ ├── fairfax_media.png
│ │ │ ├── folha_de_s.paulo.png
│ │ │ ├── franzfurter_allgemeine.png
│ │ │ ├── ft.png
│ │ │ ├── gannett.png
│ │ │ ├── guardian.png
│ │ │ ├── hearst.png
│ │ │ ├── huffington_post.png
│ │ │ ├── la_stampa.png
│ │ │ ├── les_echos.png
│ │ │ ├── mainichi.png
│ │ │ ├── mashable.png
│ │ │ ├── mcclatchy.png
│ │ │ ├── new_york_times.png
│ │ │ ├── newscorp_australia.png
│ │ │ ├── nine_msn.png
│ │ │ ├── nrc.png
│ │ │ ├── ny_daily_news.png
│ │ │ ├── nypost.png
│ │ │ ├── pearson.png
│ │ │ ├── sankei.png
│ │ │ ├── telegraph.png
│ │ │ ├── time.png
│ │ │ ├── uol.png
│ │ │ ├── us_news.png
│ │ │ ├── vox_media.png
│ │ │ ├── wallstreetjournal.png
│ │ │ ├── washington_post.png
│ │ │ └── zeit_online.png
│ │ ├── quotes
│ │ │ ├── chartbeat.jpg
│ │ │ ├── ebay.jpg
│ │ │ ├── faz.jpg
│ │ │ ├── folha.jpg
│ │ │ ├── google.jpg
│ │ │ ├── guardian.jpg
│ │ │ ├── hearst.jpg
│ │ │ ├── lastampa.jpg
│ │ │ ├── newyorktimes.jpeg
│ │ │ ├── twitter.jpg
│ │ │ └── vox.jpg
│ │ ├── return-parameter.png
│ │ ├── sprite.svg
│ │ ├── symbols
│ │ │ ├── carat-down.svg
│ │ │ ├── carat.svg
│ │ │ ├── caret-right.svg
│ │ │ ├── close.svg
│ │ │ ├── lang-icon.svg
│ │ │ ├── logo-blue-standalone.svg
│ │ │ ├── return.svg
│ │ │ ├── search.svg
│ │ │ ├── share-close.svg
│ │ │ ├── share.svg
│ │ │ ├── template.scss
│ │ │ ├── twitter.svg
│ │ │ ├── video-play.svg
│ │ │ └── wordpress.svg
│ │ └── twitter.png
│ ├── manifest.json
│ ├── sass
│ │ ├── _accordions.scss
│ │ ├── _animated_lines.scss
│ │ ├── _animations.scss
│ │ ├── _bg-triangle.scss
│ │ ├── _callouts.scss
│ │ ├── _cards.scss
│ │ ├── _carousel.scss
│ │ ├── _config.scss
│ │ ├── _content-post.scss
│ │ ├── _content-section.scss
│ │ ├── _content.scss
│ │ ├── _doc-nav.scss
│ │ ├── _footer.scss
│ │ ├── _global.scss
│ │ ├── _grid.scss
│ │ ├── _header.scss
│ │ ├── _inline-toc.scss
│ │ ├── _lang_switcher.scss
│ │ ├── _large-cta.scss
│ │ ├── _lightbox.scss
│ │ ├── _mixins.scss
│ │ ├── _nav.scss
│ │ ├── _points.scss
│ │ ├── _post-item.scss
│ │ ├── _responsive.scss
│ │ ├── _search.scss
│ │ ├── _share.scss
│ │ ├── _sidebar.scss
│ │ ├── _sprite_generated.scss
│ │ ├── _sprite.scss
│ │ ├── _syntax_highlighting.scss
│ │ ├── _tables.scss
│ │ ├── _toc.scss
│ │ ├── about-how.min.scss
│ │ ├── about-overview.min.scss
│ │ ├── about-who-vertical.min.scss
│ │ ├── about-who.min.scss
│ │ ├── blog.min.scss
│ │ ├── case-study.min.scss
│ │ ├── design-principles.min.scss
│ │ ├── docs.min.scss
│ │ ├── home.min.scss
│ │ ├── list.min.scss
│ │ ├── main.min.scss
│ │ ├── pages
│ │ │ ├── _about-how.scss
│ │ │ ├── _about-overview.scss
│ │ │ ├── _about-who-vertical.scss
│ │ │ ├── _about-who.scss
│ │ │ ├── _case-study.scss
│ │ │ ├── _design-principles.scss
│ │ │ ├── _events.scss
│ │ │ ├── _faqs.scss
│ │ │ ├── _home.scss
│ │ │ ├── _latest.scss
│ │ │ ├── _list.scss
│ │ │ ├── _post-detail.scss
│ │ │ ├── _roadmap.scss
│ │ │ ├── _who.scss
│ │ │ └── amp-conf.scss
│ │ └── section.min.scss
│ └── video
│ ├── amp-phone.mp4
│ └── amp-phone.webm
├── content
│ ├── contribute
│ │ └── governance.md
│ ├── docs
│ │ ├── _blueprint.yaml
│ │ ├── blank.html
│ │ ├── build.md
│ │ ├── contribute
│ │ │ ├── _blueprint.yaml
│ │ │ ├── contribute.md
│ │ │ ├── [email protected]
│ │ │ ├── [email protected]
│ │ │ ├── [email protected]
│ │ │ ├── [email protected]
│ │ │ ├── file-a-bug.md
│ │ │ └── github.md
│ │ ├── contribute.md
│ │ ├── get_started
│ │ │ ├── _blueprint.yaml
│ │ │ ├── create
│ │ │ │ ├── _blueprint.yaml
│ │ │ │ ├── basic_markup.md
│ │ │ │ ├── [email protected]
│ │ │ │ ├── [email protected]
│ │ │ │ ├── [email protected]
│ │ │ │ ├── [email protected]
│ │ │ │ ├── [email protected]
│ │ │ │ ├── [email protected]
│ │ │ │ ├── [email protected]
│ │ │ │ ├── [email protected]
│ │ │ │ ├── [email protected]
│ │ │ │ ├── basic_markup@pt_BR.md
│ │ │ │ ├── [email protected]
│ │ │ │ ├── [email protected]
│ │ │ │ ├── [email protected]
│ │ │ │ ├── basic_markup@zh_CN.md
│ │ │ │ ├── include_image.md
│ │ │ │ ├── [email protected]
│ │ │ │ ├── [email protected]
│ │ │ │ ├── [email protected]
│ │ │ │ ├── [email protected]
│ │ │ │ ├── [email protected]
│ │ │ │ ├── [email protected]
│ │ │ │ ├── [email protected]
│ │ │ │ ├── [email protected]
│ │ │ │ ├── [email protected]
│ │ │ │ ├── include_image@pt_BR.md
│ │ │ │ ├── [email protected]
│ │ │ │ ├── [email protected]
│ │ │ │ ├── [email protected]
│ │ │ │ ├── include_image@zh_CN.md
│ │ │ │ ├── prepare_for_discovery.md
│ │ │ │ ├── [email protected]
│ │ │ │ ├── [email protected]
│ │ │ │ ├── [email protected]
│ │ │ │ ├── [email protected]
│ │ │ │ ├── [email protected]
│ │ │ │ ├── [email protected]
│ │ │ │ ├── [email protected]
│ │ │ │ ├── [email protected]
│ │ │ │ ├── [email protected]
│ │ │ │ ├── prepare_for_discovery@pt_BR.md
│ │ │ │ ├── [email protected]
│ │ │ │ ├── [email protected]
│ │ │ │ ├── [email protected]
│ │ │ │ ├── prepare_for_discovery@zh_CN.md
│ │ │ │ ├── presentation_layout.md
│ │ │ │ ├── [email protected]
│ │ │ │ ├── [email protected]
│ │ │ │ ├── [email protected]
│ │ │ │ ├── [email protected]
│ │ │ │ ├── [email protected]
│ │ │ │ ├── [email protected]
│ │ │ │ ├── [email protected]
│ │ │ │ ├── [email protected]
│ │ │ │ ├── [email protected]
│ │ │ │ ├── presentation_layout@pt_BR.md
│ │ │ │ ├── [email protected]
│ │ │ │ ├── [email protected]
│ │ │ │ ├── [email protected]
│ │ │ │ ├── presentation_layout@zh_CN.md
│ │ │ │ ├── preview_and_validate.md
│ │ │ │ ├── [email protected]
│ │ │ │ ├── [email protected]
│ │ │ │ ├── [email protected]
│ │ │ │ ├── [email protected]
│ │ │ │ ├── [email protected]
│ │ │ │ ├── [email protected]
│ │ │ │ ├── [email protected]
│ │ │ │ ├── [email protected]
│ │ │ │ ├── [email protected]
│ │ │ │ ├── preview_and_validate@pt_BR.md
│ │ │ │ ├── [email protected]
│ │ │ │ ├── [email protected]
│ │ │ │ ├── [email protected]
│ │ │ │ ├── preview_and_validate@zh_CN.md
│ │ │ │ ├── publish.md
│ │ │ │ ├── [email protected]
│ │ │ │ ├── [email protected]
│ │ │ │ ├── [email protected]
│ │ │ │ ├── [email protected]
│ │ │ │ ├── [email protected]
│ │ │ │ ├── [email protected]
│ │ │ │ ├── [email protected]
│ │ │ │ ├── [email protected]
│ │ │ │ ├── [email protected]
│ │ │ │ ├── publish@pt_BR.md
│ │ │ │ ├── [email protected]
│ │ │ │ ├── [email protected]
│ │ │ │ ├── [email protected]
│ │ │ │ └── publish@zh_CN.md
│ │ │ ├── create.md
│ │ │ ├── [email protected]
│ │ │ ├── [email protected]
│ │ │ ├── [email protected]
│ │ │ ├── [email protected]
│ │ │ ├── [email protected]
│ │ │ ├── [email protected]
│ │ │ ├── [email protected]
│ │ │ ├── [email protected]
│ │ │ ├── [email protected]
│ │ │ ├── create@pt_BR.md
│ │ │ ├── [email protected]
│ │ │ ├── [email protected]
│ │ │ ├── [email protected]
│ │ │ ├── create@zh_CN.md
│ │ │ ├── live_blog.md
│ │ │ ├── [email protected]
│ │ │ ├── login_requiring
│ │ │ │ ├── _blueprint.yaml
│ │ │ │ ├── add_comment.md
│ │ │ │ ├── [email protected]
│ │ │ │ ├── login.md
│ │ │ │ ├── [email protected]
│ │ │ │ ├── logout.md
│ │ │ │ ├── [email protected]
│ │ │ │ ├── summary.md
│ │ │ │ └── [email protected]
│ │ │ ├── login_requiring.md
│ │ │ └── [email protected]
│ │ ├── getting-started.md
│ │ ├── guides
│ │ │ ├── _blueprint.yaml
│ │ │ ├── author_develop
│ │ │ │ ├── _blueprint.yaml
│ │ │ │ ├── ads_on_amp
│ │ │ │ │ ├── _blueprint.yaml
│ │ │ │ │ ├── ads_getting_started.md
│ │ │ │ │ ├── [email protected]
│ │ │ │ │ ├── ads_tips.md
│ │ │ │ │ └── [email protected]
│ │ │ │ ├── ads_on_amp.md
│ │ │ │ ├── [email protected]
│ │ │ │ ├── amp_replacements.md
│ │ │ │ ├── [email protected]
│ │ │ │ ├── iframes.md
│ │ │ │ ├── [email protected]
│ │ │ │ ├── responsive_amp
│ │ │ │ │ ├── _blueprint.yaml
│ │ │ │ │ ├── art_direction.md
│ │ │ │ │ ├── [email protected]
│ │ │ │ │ ├── control_layout.md
│ │ │ │ │ ├── [email protected]
│ │ │ │ │ ├── [email protected]
│ │ │ │ │ ├── [email protected]
│ │ │ │ │ ├── [email protected]
│ │ │ │ │ ├── [email protected]
│ │ │ │ │ ├── [email protected]
│ │ │ │ │ ├── [email protected]
│ │ │ │ │ ├── [email protected]
│ │ │ │ │ ├── [email protected]
│ │ │ │ │ ├── control_layout@pt_BR.md
│ │ │ │ │ ├── [email protected]
│ │ │ │ │ ├── [email protected]
│ │ │ │ │ ├── [email protected]
│ │ │ │ │ ├── control_layout@zh_CN.md
│ │ │ │ │ ├── custom_fonts.md
│ │ │ │ │ ├── [email protected]
│ │ │ │ │ ├── placeholders.md
│ │ │ │ │ ├── [email protected]
│ │ │ │ │ ├── style_pages.md
│ │ │ │ │ ├── [email protected]
│ │ │ │ │ ├── [email protected]
│ │ │ │ │ ├── [email protected]
│ │ │ │ │ ├── [email protected]
│ │ │ │ │ ├── [email protected]
│ │ │ │ │ ├── [email protected]
│ │ │ │ │ ├── [email protected]
│ │ │ │ │ ├── [email protected]
│ │ │ │ │ ├── [email protected]
│ │ │ │ │ ├── style_pages@pt_BR.md
│ │ │ │ │ ├── [email protected]
│ │ │ │ │ ├── [email protected]
│ │ │ │ │ ├── [email protected]
│ │ │ │ │ └── style_pages@zh_CN.md
│ │ │ │ ├── responsive_amp.md
│ │ │ │ ├── [email protected]
│ │ │ │ ├── [email protected]
│ │ │ │ ├── [email protected]
│ │ │ │ ├── [email protected]
│ │ │ │ ├── [email protected]
│ │ │ │ ├── [email protected]
│ │ │ │ ├── [email protected]
│ │ │ │ ├── [email protected]
│ │ │ │ ├── [email protected]
│ │ │ │ ├── responsive_amp@pt_BR.md
│ │ │ │ ├── [email protected]
│ │ │ │ ├── [email protected]
│ │ │ │ ├── [email protected]
│ │ │ │ ├── responsive_amp@zh_CN.md
│ │ │ │ ├── third_party_components.md
│ │ │ │ ├── [email protected]
│ │ │ │ ├── [email protected]
│ │ │ │ ├── [email protected]
│ │ │ │ ├── [email protected]
│ │ │ │ ├── [email protected]
│ │ │ │ ├── [email protected]
│ │ │ │ ├── [email protected]
│ │ │ │ ├── [email protected]
│ │ │ │ ├── [email protected]
│ │ │ │ ├── third_party_components@pt_BR.md
│ │ │ │ ├── [email protected]
│ │ │ │ ├── [email protected]
│ │ │ │ ├── [email protected]
│ │ │ │ └── third_party_components@zh_CN.md
│ │ │ ├── author_develop.md
│ │ │ ├── debug
│ │ │ │ ├── _blueprint.yaml
│ │ │ │ ├── validate.md
│ │ │ │ ├── [email protected]
│ │ │ │ ├── [email protected]
│ │ │ │ ├── [email protected]
│ │ │ │ ├── [email protected]
│ │ │ │ ├── [email protected]
│ │ │ │ ├── [email protected]
│ │ │ │ ├── [email protected]
│ │ │ │ ├── [email protected]
│ │ │ │ ├── [email protected]
│ │ │ │ ├── validate@pt_BR.md
│ │ │ │ ├── [email protected]
│ │ │ │ ├── [email protected]
│ │ │ │ ├── [email protected]
│ │ │ │ └── validate@zh_CN.md
│ │ │ ├── debug.md
│ │ │ ├── deploy
│ │ │ │ ├── _blueprint.yaml
│ │ │ │ ├── analytics_amp
│ │ │ │ │ ├── _blueprint.yaml
│ │ │ │ │ ├── analytics_basics.md
│ │ │ │ │ ├── [email protected]
│ │ │ │ │ ├── [email protected]
│ │ │ │ │ ├── [email protected]
│ │ │ │ │ ├── [email protected]
│ │ │ │ │ ├── [email protected]
│ │ │ │ │ ├── [email protected]
│ │ │ │ │ ├── [email protected]
│ │ │ │ │ ├── [email protected]
│ │ │ │ │ ├── [email protected]
│ │ │ │ │ ├── analytics_basics@pt_BR.md
│ │ │ │ │ ├── [email protected]
│ │ │ │ │ ├── [email protected]
│ │ │ │ │ ├── [email protected]
│ │ │ │ │ ├── analytics_basics@zh_CN.md
│ │ │ │ │ ├── deep_dive_analytics.md
│ │ │ │ │ ├── [email protected]
│ │ │ │ │ ├── [email protected]
│ │ │ │ │ ├── [email protected]
│ │ │ │ │ ├── [email protected]
│ │ │ │ │ ├── [email protected]
│ │ │ │ │ ├── [email protected]
│ │ │ │ │ ├── [email protected]
│ │ │ │ │ ├── [email protected]
│ │ │ │ │ ├── [email protected]
│ │ │ │ │ ├── deep_dive_analytics@pt_BR.md
│ │ │ │ │ ├── [email protected]
│ │ │ │ │ ├── [email protected]
│ │ │ │ │ ├── [email protected]
│ │ │ │ │ ├── deep_dive_analytics@zh_CN.md
│ │ │ │ │ ├── use_cases.md
│ │ │ │ │ ├── [email protected]
│ │ │ │ │ ├── [email protected]
│ │ │ │ │ ├── [email protected]
│ │ │ │ │ ├── [email protected]
│ │ │ │ │ ├── [email protected]
│ │ │ │ │ ├── [email protected]
│ │ │ │ │ ├── [email protected]
│ │ │ │ │ ├── [email protected]
│ │ │ │ │ ├── [email protected]
│ │ │ │ │ ├── use_cases@pt_BR.md
│ │ │ │ │ ├── [email protected]
│ │ │ │ │ ├── [email protected]
│ │ │ │ │ ├── [email protected]
│ │ │ │ │ └── use_cases@zh_CN.md
│ │ │ │ ├── analytics_amp.md
│ │ │ │ ├── [email protected]
│ │ │ │ ├── [email protected]
│ │ │ │ ├── [email protected]
│ │ │ │ ├── [email protected]
│ │ │ │ ├── [email protected]
│ │ │ │ ├── [email protected]
│ │ │ │ ├── [email protected]
│ │ │ │ ├── [email protected]
│ │ │ │ ├── [email protected]
│ │ │ │ ├── analytics_amp@pt_BR.md
│ │ │ │ ├── [email protected]
│ │ │ │ ├── [email protected]
│ │ │ │ ├── [email protected]
│ │ │ │ ├── analytics_amp@zh_CN.md
│ │ │ │ ├── discovery.md
│ │ │ │ ├── [email protected]
│ │ │ │ ├── [email protected]
│ │ │ │ ├── [email protected]
│ │ │ │ ├── [email protected]
│ │ │ │ ├── [email protected]
│ │ │ │ ├── [email protected]
│ │ │ │ ├── [email protected]
│ │ │ │ ├── [email protected]
│ │ │ │ ├── [email protected]
│ │ │ │ ├── discovery@pt_BR.md
│ │ │ │ ├── [email protected]
│ │ │ │ ├── [email protected]
│ │ │ │ ├── [email protected]
│ │ │ │ ├── discovery@zh_CN.md
│ │ │ │ ├── engagement.md
│ │ │ │ └── [email protected]
│ │ │ ├── deploy.md
│ │ │ └── embed
│ │ │ ├── _blueprint.yaml
│ │ │ └── login-paywalls.md
│ │ ├── guides.md
│ │ ├── reference
│ │ │ ├── _blueprint.yaml
│ │ │ ├── common_attributes.md
│ │ │ ├── components
│ │ │ │ ├── _blueprint.yaml
│ │ │ │ ├── ads-analytics
│ │ │ │ │ └── _blueprint.yaml
│ │ │ │ ├── dynamic-content
│ │ │ │ │ └── _blueprint.yaml
│ │ │ │ ├── layout
│ │ │ │ │ └── _blueprint.yaml
│ │ │ │ ├── media
│ │ │ │ │ └── _blueprint.yaml
│ │ │ │ ├── presentation
│ │ │ │ │ └── _blueprint.yaml
│ │ │ │ └── social
│ │ │ │ └── _blueprint.yaml
│ │ │ ├── components.md
│ │ │ ├── experimental.md
│ │ │ ├── [email protected]
│ │ │ ├── [email protected]
│ │ │ ├── [email protected]
│ │ │ ├── [email protected]
│ │ │ ├── [email protected]
│ │ │ ├── [email protected]
│ │ │ ├── [email protected]
│ │ │ ├── [email protected]
│ │ │ ├── experimental@pt_BR.md
│ │ │ ├── [email protected]
│ │ │ ├── [email protected]
│ │ │ ├── [email protected]
│ │ │ ├── experimental@zh_CN.md
│ │ │ ├── validation_errors.md
│ │ │ ├── [email protected]
│ │ │ ├── [email protected]
│ │ │ ├── [email protected]
│ │ │ ├── [email protected]
│ │ │ ├── [email protected]
│ │ │ ├── [email protected]
│ │ │ ├── [email protected]
│ │ │ ├── [email protected]
│ │ │ ├── validation_errors@pt_BR.md
│ │ │ ├── [email protected]
│ │ │ ├── [email protected]
│ │ │ ├── [email protected]
│ │ │ └── validation_errors@zh_CN.md
│ │ ├── reference.md
│ │ └── tutorials.md
│ ├── includes
│ │ ├── _blueprint.yaml
│ │ ├── amp-conf-2017.yaml
│ │ ├── amp-iframe.md
│ │ ├── blog_feed.yaml
│ │ ├── doc.yaml
│ │ ├── events.yaml
│ │ ├── home.yaml
│ │ ├── html-example.md
│ │ ├── latest.yaml
│ │ ├── list-blog.yaml
│ │ ├── lists.yaml
│ │ ├── menu.yaml
│ │ ├── roadmap.yaml
│ │ └── tweets.yaml
│ ├── latest
│ │ ├── _blueprint.yaml
│ │ ├── blog
│ │ │ ├── _blueprint.yaml
│ │ │ ├── 1056.md
│ │ │ ├── ads-on-the-web-will-get-better-with-amp-heres-how.md
│ │ │ ├── amp-roadmap-update-for-mid-q1-2017.md
│ │ │ ├── amp-up-for-amp-conf-2017.md
│ │ │ ├── grow-your-business-with-ads-on-amp.md
│ │ │ ├── new-default-placeholders-for-ads-in-amp.md
│ │ │ ├── new-industry-benchmarks-for-mobile-page-speed.md
│ │ │ ├── speeding-up-news-apps-with-amp.md
│ │ │ ├── whats-in-an-amp-url.md
│ │ │ └── why-amp-caches-exist.md
│ │ ├── latest.html
│ │ ├── list-blog.html
│ │ ├── list-event.html
│ │ ├── list-past-event.html
│ │ └── roadmap.html
│ ├── learn
│ │ ├── _blueprint.yaml
│ │ ├── about-amp.md
│ │ ├── [email protected]
│ │ ├── [email protected]
│ │ ├── [email protected]
│ │ ├── [email protected]
│ │ ├── [email protected]
│ │ ├── [email protected]
│ │ ├── [email protected]
│ │ ├── [email protected]
│ │ ├── [email protected]
│ │ ├── about-amp@pt_BR.md
│ │ ├── [email protected]
│ │ ├── [email protected]
│ │ ├── [email protected]
│ │ ├── about-amp@zh_CN.md
│ │ ├── about-how.yaml
│ │ ├── [email protected]
│ │ ├── [email protected]
│ │ ├── [email protected]
│ │ ├── [email protected]
│ │ ├── [email protected]
│ │ ├── [email protected]
│ │ ├── [email protected]
│ │ ├── [email protected]
│ │ ├── about-how@pt_BR.yaml
│ │ ├── [email protected]
│ │ ├── [email protected]
│ │ ├── [email protected]
│ │ ├── about-how@zh_CN.yaml
│ │ ├── amp-design-principles.yaml
│ │ ├── browsers.md
│ │ ├── case-studies
│ │ │ ├── _blueprint.yaml
│ │ │ ├── category
│ │ │ │ ├── _blueprint.yaml
│ │ │ │ ├── advertisers.md
│ │ │ │ └── publishers.md
│ │ │ ├── gizmodo.md
│ │ │ ├── hearst.md
│ │ │ ├── milestone.md
│ │ │ ├── plista.md
│ │ │ ├── relay_media.md
│ │ │ ├── slate.md
│ │ │ ├── teads.md
│ │ │ ├── terra.md
│ │ │ ├── washingtonpost.md
│ │ │ └── wired.md
│ │ ├── case-studies.html
│ │ ├── how-amp-works.md
│ │ ├── [email protected]
│ │ ├── [email protected]
│ │ ├── [email protected]
│ │ ├── [email protected]
│ │ ├── [email protected]
│ │ ├── [email protected]
│ │ ├── [email protected]
│ │ ├── [email protected]
│ │ ├── how-amp-works@pt_BR.md
│ │ ├── [email protected]
│ │ ├── [email protected]
│ │ ├── [email protected]
│ │ ├── how-amp-works@zh_CN.md
│ │ ├── metrics.html
│ │ ├── overview.yaml
│ │ ├── [email protected]
│ │ ├── [email protected]
│ │ ├── [email protected]
│ │ ├── [email protected]
│ │ ├── [email protected]
│ │ ├── [email protected]
│ │ ├── [email protected]
│ │ ├── [email protected]
│ │ ├── [email protected]
│ │ ├── overview@pt_BR.yaml
│ │ ├── [email protected]
│ │ ├── [email protected]
│ │ ├── [email protected]
│ │ ├── overview@zh_CN.yaml
│ │ ├── who
│ │ │ ├── _blueprint.yaml
│ │ │ ├── ad-tech-platforms.yaml
│ │ │ ├── advertisers.yaml
│ │ │ ├── amp-ads.yaml
│ │ │ └── publishers.yaml
│ │ └── who-uses-amp.yaml
│ ├── pages
│ │ ├── _blueprint.yaml
│ │ ├── amp-conf-2017
│ │ │ ├── _blueprint.yaml
│ │ │ ├── accessibility.html
│ │ │ └── code-of-conduct.html
│ │ ├── amp-conf-2017.html
│ │ ├── home.html
│ │ ├── how-it-works.html
│ │ └── metrics_chart.html
│ └── support
│ ├── _blueprint.yaml
│ ├── developer
│ │ ├── _blueprint.yaml
│ │ ├── documentation-bug.md
│ │ ├── mailing-list.md
│ │ ├── platform-bug.md
│ │ ├── slack.md
│ │ └── stack-overflow.md
│ ├── developer.md
│ ├── faqs
│ │ ├── _blueprint.yaml
│ │ ├── overview.md
│ │ ├── [email protected]
│ │ ├── [email protected]
│ │ ├── [email protected]
│ │ ├── [email protected]
│ │ ├── [email protected]
│ │ ├── [email protected]
│ │ ├── [email protected]
│ │ ├── [email protected]
│ │ ├── overview@pt_BR.md
│ │ ├── [email protected]
│ │ ├── [email protected]
│ │ ├── [email protected]
│ │ ├── overview@zh_CN.md
│ │ ├── platform-involvement.md
│ │ ├── [email protected]
│ │ ├── [email protected]
│ │ ├── [email protected]
│ │ ├── [email protected]
│ │ ├── [email protected]
│ │ ├── [email protected]
│ │ ├── [email protected]
│ │ ├── [email protected]
│ │ ├── platform-involvement@pt_BR.md
│ │ ├── [email protected]
│ │ ├── [email protected]
│ │ ├── [email protected]
│ │ ├── platform-involvement@zh_CN.md
│ │ ├── publisher-monetization.md
│ │ ├── [email protected]
│ │ ├── [email protected]
│ │ ├── [email protected]
│ │ ├── [email protected]
│ │ ├── [email protected]
│ │ ├── [email protected]
│ │ ├── [email protected]
│ │ ├── [email protected]
│ │ ├── publisher-monetization@pt_BR.md
│ │ ├── [email protected]
│ │ ├── [email protected]
│ │ ├── [email protected]
│ │ ├── publisher-monetization@zh_CN.md
│ │ └── supported-platforms.md
│ ├── faqs.md
│ ├── platform.md
│ ├── support.md
│ ├── vendor
│ │ ├── _blueprint.yaml
│ │ └── amp-certification.md
│ └── vendor.md
├── CONTRIBUTING.md
├── firebase.json
├── gulpfile.js
├── LICENSE
├── npm-shrinkwrap.json
├── package.json
├── podspec.yaml
├── pwa
│ ├── google7199ce9da1ad191b.html
│ ├── pwa.html
│ ├── pwa.js
│ └── service-worker.js
├── README.md
├── scripts
│ ├── component_categories.json
│ ├── import_docs.js
│ ├── import_docs.json
│ ├── update_blog_links.js
│ ├── update_platforms_page.js
│ └── update_tweets.js
├── translations
│ ├── ar
│ │ └── LC_MESSAGES
│ │ └── messages.po
│ ├── de
│ │ └── LC_MESSAGES
│ │ └── messages.po
│ ├── es
│ │ └── LC_MESSAGES
│ │ └── messages.po
│ ├── fr
│ │ └── LC_MESSAGES
│ │ └── messages.po
│ ├── id
│ │ └── LC_MESSAGES
│ │ └── messages.po
│ ├── it
│ │ └── LC_MESSAGES
│ │ └── messages.po
│ ├── ja
│ │ └── LC_MESSAGES
│ │ └── messages.po
│ ├── ko
│ │ └── LC_MESSAGES
│ │ └── messages.po
│ ├── messages.pot
│ ├── pl
│ │ └── LC_MESSAGES
│ │ └── messages.po
│ ├── pt_BR
│ │ └── LC_MESSAGES
│ │ └── messages.po
│ ├── ru
│ │ └── LC_MESSAGES
│ │ └── messages.po
│ ├── th
│ │ └── LC_MESSAGES
│ │ └── messages.po
│ ├── tr
│ │ └── LC_MESSAGES
│ │ └── messages.po
│ └── zh_CN
│ └── LC_MESSAGES
│ └── messages.po
└── views
├── about-casestudies.html
├── about-how.html
├── about-overview.html
├── about-who-vertical.html
├── about-who.html
├── base.html
├── blank.html
├── blog_detail.html
├── case-study.html
├── design-principles.html
├── doc.html
├── grid_page.html
├── list_page.html
├── partials
│ ├── breadcrumb-nav.html
│ ├── doc_nav.html
│ ├── faq-accordion.html
│ ├── footer-cta.html
│ ├── footer.html
│ ├── grid-card.html
│ ├── head.html
│ ├── header.html
│ ├── lang_switcher.html
│ ├── large-cta.html
│ ├── lines.html
│ ├── nav.html
│ ├── points.html
│ ├── post-item.html
│ ├── promo_banner.html
│ ├── search.html
│ ├── share.html
│ ├── sidebar.html
│ └── sub_nav.html
└── section_page.html
```
# Files
--------------------------------------------------------------------------------
/content/docs/guides/author_develop/responsive_amp@pt_BR.md:
--------------------------------------------------------------------------------
```markdown
1 | ---
2 | $title: Criar páginas AMP responsivas
3 | toc: true
4 | ---
5 |
6 | É muito fácil gerar elementos responsivos nas AMP.
7 | Basta incluir `layout=responsive` neles.
8 |
9 | [TOC]
10 |
11 | ## Criar imagens responsivas
12 |
13 | Todos os recursos que são carregados externamente, incluindo as imagens,
14 | precisam ter um tamanho e uma posição previamente especificados
15 | para que a página não "pule" nem passe por refluxo.
16 |
17 | Crie imagens responsivas
18 | especificando a largura e altura,
19 | ajustando o layout para o modo responsivo
20 | e indicando com [`srcset`](/docs/guides/responsive/style_pages.html)
21 | qual recurso de imagem será usado conforme diferentes tamanhos de tela:
22 |
23 | [sourcecode:html]
24 | <amp-img
25 | src="/img/narrow.jpg"
26 | srcset="/img/wide.jpg 640w,
27 | /img/narrow.jpg 320w"
28 | width="1698"
29 | height="2911"
30 | layout="responsive"
31 | alt="an image">
32 | </amp-img>
33 | [/sourcecode]
34 |
35 | O elemento `amp-img` ajusta-se automaticamente à largura
36 | do seu elemento contêiner,
37 | e sua altura é automaticamente definida para a proporção
38 | determinada pela largura e altura fornecidas:
39 |
40 | <amp-img src="/static/img/docs/responsive_amp_img.png" width="500" height="857" layout="responsive"></amp-img>
41 |
42 | Veja também [AMP pelo amp-img de exemplo](https://ampbyexample.com/components/amp-img/).
43 |
44 | ## Adicionar estilos a uma página
45 |
46 | Adicione todos os estilos dentro da tag `<style amp-custom>`
47 | no cabeçalho do documento.
48 | Por exemplo:
49 |
50 | [sourcecode:html]
51 | <!doctype html>
52 | <head>
53 | <meta charset="utf-8">
54 | <link rel="canonical" href="hello-world.html" >
55 | <meta name="viewport" content="width=device-width,minimum-scale=1,initial-scale=1">
56 | <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>
57 | <style amp-custom>
58 | /* any custom style goes here. */
59 | body {
60 | background-color: white;
61 | }
62 | amp-img {
63 | border: 5px solid black;
64 | }
65 |
66 | amp-img.grey-placeholder {
67 | background-color: grey;
68 | }
69 | </style>
70 | <script async src="https://cdn.ampproject.org/v0.js"></script>
71 | </head>
72 | [/sourcecode]
73 |
74 | **Importante:**
75 | Certifique-se de que haja só uma tag `<style amp-custom>` na sua página,
76 | pois a AMP não permite mais de uma delas.
77 |
78 | Defina os estilos dos componentes com os seletores de classe ou elemento
79 | usando as propriedades comuns de CSS. Por exemplo:
80 |
81 | [sourcecode:html]
82 | <body>
83 | <p>Hello, Kitty.</p>
84 | <amp-img
85 | class="grey-placeholder"
86 | src="https://placekitten.com/g/500/300"
87 | srcset="/img/cat.jpg 640w,
88 | /img/kitten.jpg 320w"
89 | width="500"
90 | height="300"
91 | layout="responsive">
92 | </amp-img>
93 | </body>
94 | [/sourcecode]
95 |
96 | **Importante:**
97 | Verifique se seus estilos são compatíveis com AMP.
98 | Alguns estilos não têm suporte por conta do desempenho deles
99 | (veja também [CSS com suporte](/docs/guides/responsive/style_pages.html)).
100 |
101 | ## Elementos de tamanho e posição
102 |
103 | A AMP desacopla o layout do documento do carregamento de recursos
104 | para que ela possa carregar o layout da página sem ter que esperar pelo download dos recursos.
105 |
106 | Especifique o tamanho e a posição de todos os elementos visíveis da AMP,
107 | fornecendo um atributo `width` e `height`.
108 | Esses atributos implicam a proporção do elemento,
109 | o que pode ser dimensionado de acordo com o contêiner.
110 |
111 | Defina o layout como responsivo.
112 | 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.
113 |
114 | Saiba mais sobre [layouts compatíveis com AMP](/docs/guides/responsive/control_layout.html).
115 |
116 | ## Validar seus estilos e layout
117 |
118 | Use o validador de AMP para testar
119 | os valores de CSS e layout da sua página.
120 |
121 | O validador confere se a CSS da sua página não ultrapassa o limite de 50.000 bytes,
122 | verifica a existência de estilos não permitidos e garante que o layout da página seja compatível e esteja formatado corretamente.
123 | Veja também esta lista completa de [erros de estilo e layout](/docs/reference/validation_errors.html#style-and-layout-errors).
124 |
125 | Exemplo de erro no console em uma página com CSS que ultrapassa o limite de 50.000 bytes:
126 |
127 | <amp-img src="/static/img/docs/too_much_css.png" width="1404" height="334" layout="responsive"></amp-img>
128 |
129 | Saiba mais sobre como [validar suas páginas AMP](/docs/guides/validate.html),
130 | incluindo como rastrear e corrigir erros de estilo.
131 |
```
--------------------------------------------------------------------------------
/content/docs/guides/author_develop/[email protected]:
--------------------------------------------------------------------------------
```markdown
1 | ---
2 | $title: Duyarlı AMP Sayfaları Oluşturma
3 | toc: true
4 | ---
5 |
6 | AMP'de duyarlı öğeleri son derece kolay bir şekilde oluşturabilirsiniz. Bunun için öğelere `layout=responsive` kodunu eklemeniz yeterlidir.
7 |
8 | [TOC]
9 |
10 | ## Duyarlı resimler oluşturma
11 |
12 | 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.
13 |
14 | 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:
15 |
16 | [sourcecode:html]
17 | <amp-img
18 | src="/img/narrow.jpg"
19 | srcset="/img/wide.jpg 640w,
20 | /img/narrow.jpg 320w"
21 | width="1698"
22 | height="2911"
23 | layout="responsive"
24 | alt="an image">
25 | </amp-img>
26 | [/sourcecode]
27 |
28 | 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:
29 |
30 | <amp-img src="/static/img/docs/responsive_amp_img.png" width="500" height="857" layout="responsive"></amp-img>
31 |
32 | Ayrıca [Örneklerle AMP amp-img](https://ampbyexample.com/components/amp-img/) konusuna bakabilirsiniz.
33 |
34 | ## Sayfaya stil ekleme
35 |
36 | Tüm stilleri, dokümanın head bölümündeki `<style amp-custom>` etiketinin içine ekleyin.
37 | Örneğin:
38 |
39 | [sourcecode:html]
40 | <!doctype html>
41 | <head>
42 | <meta charset="utf-8">
43 | <link rel="canonical" href="hello-world.html" >
44 | <meta name="viewport" content="width=device-width,minimum-scale=1,initial-scale=1">
45 | <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>
46 | <style amp-custom>
47 | /* any custom style goes here. */
48 | body {
49 | background-color: white;
50 | }
51 | amp-img {
52 | border: 5px solid black;
53 | }
54 |
55 | amp-img.grey-placeholder {
56 | background-color: grey;
57 | }
58 | </style>
59 | <script async src="https://cdn.ampproject.org/v0.js"></script>
60 | </head>
61 | [/sourcecode]
62 |
63 | **Ö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.
64 |
65 | Ortak CSS özelliklerini kullanarak sınıf veya öğe seçicilerle bileşen stillerini tanımlayın. Örneğin:
66 |
67 | [sourcecode:html]
68 | <body>
69 | <p>Hello, Kitty.</p>
70 | <amp-img
71 | class="grey-placeholder"
72 | src="https://placekitten.com/g/500/300"
73 | srcset="/img/cat.jpg 640w,
74 | /img/kitten.jpg 320w"
75 | width="500"
76 | height="300"
77 | layout="responsive">
78 | </amp-img>
79 | </body>
80 | [/sourcecode]
81 |
82 | **Önemli:** Stillerinizin AMP'de desteklendiğinden emin olun. Bazı stiller performans nedeniyle desteklenmemektedir (ayrıca bkz. [Desteklenen CSS](/docs/guides/responsive/style_pages.html)).
83 |
84 | ## Boyut ve konum öğeleri
85 |
86 | AMP, doküman düzenini kaynak yüklemesinden ayırır. Böylece AMP, kaynakların indirilmesini beklemeden sayfanın düzenini yükleyebilir.
87 |
88 | Bir `width` ve `height` özniteliği sağlayarak tüm görünür AMP öğeleri için boyutu ve konumu belirtin.
89 | Bu öznitelikler, öğenin en boy oranına işaret eder ve daha sonra, kapsayıcıyla ölçeklenebilir.
90 |
91 | Düzeni duyarlı değerine ayarlayın.
92 | 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.
93 |
94 | [AMP'de desteklenen düzenler](/docs/guides/responsive/control_layout.html) hakkında daha fazla bilgi edinin.
95 |
96 | ## Stillerinizi ve düzeninizi doğrulama
97 |
98 | Sayfanızın CSS ve düzen değerlerini test etmek için AMP doğrulayıcıyı kullanın.
99 |
100 | 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.
101 | Ayrıca buradaki [Stil ve düzen hatalarının](/docs/reference/validation_errors.html#style-and-layout-errors) tam listesine de bakabilirsiniz.
102 |
103 | 50.000 bayt sınırını aşan CSS'ye sahip sayfa için konsolda gösterilen hata örneği:
104 |
105 | <amp-img src="/static/img/docs/too_much_css.png" width="1404" height="334" layout="responsive"></amp-img>
106 |
107 | 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.
108 |
```
--------------------------------------------------------------------------------
/content/docs/guides/author_develop/[email protected]:
--------------------------------------------------------------------------------
```markdown
1 | ---
2 | $title: Includere contenuti di terze parti
3 | ---
4 |
5 | Scopri come includere componenti di terze parti nelle tue pagine.
6 |
7 | [TOC]
8 |
9 | ## Incorporare un tweet
10 |
11 | Incorpora un tweet di Twitter nella pagina utilizzando l'elemento [`amp-twitter`](/docs/reference/extended/amp-twitter.html).
12 |
13 | Per includere un tweet nella pagina, inserisci innanzitutto lo script seguente nella sezione `<head>`:
14 |
15 | [sourcecode:html]
16 | <script async custom-element="amp-twitter" src="https://cdn.ampproject.org/v0/amp-twitter-0.1.js"></script>
17 | [/sourcecode]
18 |
19 | Attualmente i tweet vengono ridimensionati automaticamente e proporzionalmente in base alle dimensioni specificate, ma questo comportamento potrebbe portare a un aspetto non ottimale.
20 | Regola manualmente la larghezza e l'altezza fornite oppure utilizza l'attributo media per selezionare le proporzioni in base alla larghezza dello schermo.
21 |
22 | `amp-twitter` di esempio tratto dall'[esempio di twitter.amp](https://github.com/ampproject/amphtml/blob/master/examples/twitter.amp.html):
23 |
24 | [sourcecode:html]
25 | <amp-twitter width=390 height=50
26 | layout="responsive"
27 | data-tweetid="638793490521001985">
28 | </amp-twitter>
29 | [/sourcecode]
30 |
31 | ## Incorporare una foto di Instagram
32 |
33 | Incorpora una foto di Instagram nella pagina utilizzando l'elemento [`amp-instagram`](/docs/reference/extended/amp-instagram.html).
34 |
35 | Per includere una foto di Instagram, inserisci innanzitutto lo script seguente nella sezione `<head>`:
36 |
37 | [sourcecode:html]
38 | <script async custom-element="amp-instagram" src="https://cdn.ampproject.org/v0/amp-instagram-0.1.js"></script>
39 | [/sourcecode]
40 |
41 | 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`.
42 | Inoltre, Instagram utilizza proporzioni fisse per i layout reattivi, quindi il valore di larghezza e altezza dovrebbe essere universale.
43 |
44 | [sourcecode:html]
45 | <amp-instagram
46 | data-shortcode="fBwFP"
47 | width="320"
48 | height="392"
49 | layout="responsive">
50 | </amp-instagram>
51 | [/sourcecode]
52 |
53 | ## Mostrare post o video di Facebook
54 |
55 | Mostra un post o un video di Facebook nella pagina utilizzando l'elemento [`amp-facebook`](/docs/reference/extended/amp-facebook.html).
56 |
57 | Devi includere lo script seguente nella sezione `<head>`:
58 |
59 | [sourcecode:html]
60 | <script async custom-element="amp-facebook" src="https://cdn.ampproject.org/v0/amp-facebook-0.1.js"></script>
61 | [/sourcecode]
62 |
63 | Esempio - Incorporamento di un post:
64 |
65 | [sourcecode:html]
66 | <amp-facebook width=486 height=657
67 | layout="responsive"
68 | data-href="https://www.facebook.com/zuck/posts/10102593740125791">
69 | </amp-facebook>
70 | [/sourcecode]
71 |
72 | Esempio - Incorporamento di un video:
73 |
74 | [sourcecode:html]
75 | <amp-facebook width=552 height=574
76 | layout="responsive"
77 | data-embed-as="video"
78 | data-href="https://www.facebook.com/zuck/videos/10102509264909801/">
79 | </amp-facebook>
80 | [/sourcecode]
81 |
82 | ## Includere un video di YouTube
83 |
84 | Includi un video di YouTube nella pagina utilizzando l'elemento [`amp-youtube`](/docs/reference/extended/amp-youtube.html).
85 |
86 | Devi includere lo script seguente nella sezione `<head>`:
87 |
88 | [sourcecode:html]
89 | <script async custom-element="amp-youtube" src="https://cdn.ampproject.org/v0/amp-youtube-0.1.js"></script>
90 | [/sourcecode]
91 |
92 | Puoi trovare l'elemento `data-videoid` di YouTube nell'URL di ogni pagina video di YouTube.
93 | Ad esempio, nell'URL https://www.youtube.com/watch?v=Z1q71gFeRqM, l'ID video è Z1q71gFeRqM.
94 |
95 | Utilizza `layout="responsive"` per ottenere i layout corretti per video con proporzioni 16:9:
96 |
97 | [sourcecode:html]
98 | <amp-youtube
99 | data-videoid="mGENRKrdoGY"
100 | layout="responsive"
101 | width="480" height="270">
102 | </amp-youtube>
103 | [/sourcecode]
104 |
105 | ## Mostrare un annuncio
106 |
107 | Mostra un annuncio nella pagina utilizzando l'elemento [`amp-ad`](/docs/reference/amp-ad.html).
108 | Sono supportati soltanto gli annunci pubblicati tramite HTTPS.
109 |
110 | All'interno del documento AMP non è possibile eseguire codice JavaScript fornito da reti pubblicitarie.
111 | 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.
112 |
113 | Devi specificare la larghezza e l'altezza dell'annuncio, oltre al tipo di rete pubblicitaria.
114 | L'attributo `type` identifica il modello della rete pubblicitaria.
115 | Tipi di annunci diversi richiedono attributi `data-*` differenti.
116 |
117 | [sourcecode:html]
118 | <amp-ad width=300 height=250
119 | type="example"
120 | data-aax_size="300x250"
121 | data-aax_pubname="test123"
122 | data-aax_src="302">
123 | </amp-ad>
124 | [/sourcecode]
125 |
126 | Includi un attributo `placeholder` (se supportato dalla rete pubblicitaria) da mostrare se non ci sono annunci disponibili:
127 |
128 | [sourcecode:html]
129 | <amp-ad width=300 height=250
130 | type="example"
131 | data-aax_size="300x250"
132 | data-aax_pubname="test123"
133 | data-aax_src="302">
134 | <div placeholder>Have a great day!</div>
135 | </amp-ad>
136 | [/sourcecode]
137 |
138 | AMP supporta una vasta gamma di reti pubblicitarie. Consulta [un elenco completo](/docs/reference/amp-ad.html#supported-ad-networks).
139 |
```
--------------------------------------------------------------------------------
/content/docs/guides/author_develop/[email protected]:
--------------------------------------------------------------------------------
```markdown
1 | ---
2 | $title: Tworzenie elastycznych stron AMP
3 | toc: true
4 | ---
5 |
6 | Tworzenie elastycznych elementów AMP jest bardzo łatwe.
7 | Wystarczy dodać do nich parametr `layout=responsive`.
8 |
9 | [TOC]
10 |
11 | ## Tworzenie obrazów elastycznych
12 |
13 | 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.
14 |
15 | 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:
16 |
17 | [sourcecode:html]
18 | <amp-img
19 | src="/img/narrow.jpg"
20 | srcset="/img/wide.jpg 640w,
21 | /img/narrow.jpg 320w"
22 | width="1698"
23 | height="2911"
24 | layout="responsive"
25 | alt="an image">
26 | </amp-img>
27 | [/sourcecode]
28 |
29 | Ten element `amp-img` automatycznie
30 | dopasowuje się do szerokości kontenera,
31 | a jego wysokość jest ustalana automatycznie za
32 | pomocą współczynnika proporcji określonego szerokością
33 | i wysokością:
34 |
35 | <amp-img src="/static/img/docs/responsive_amp_img.png" width="500" height="857" layout="responsive"></amp-img>
36 |
37 | Zapoznaj się również z zawartością strony [AMP by Example – amp-img](https://ampbyexample.com/components/amp-img/).
38 |
39 | ## Dodawanie stylów do strony
40 |
41 | Wszystkie style dodaje się w tagu `<style amp-custom>`
42 | w nagłówku dokumentu.
43 | Na przykład:
44 |
45 | [sourcecode:html]
46 | <!doctype html>
47 | <head>
48 | <meta charset="utf-8">
49 | <link rel="canonical" href="hello-world.html" >
50 | <meta name="viewport" content="width=device-width,minimum-scale=1,initial-scale=1">
51 | <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>
52 | <style amp-custom>
53 | /* any custom style goes here. */
54 | body {
55 | background-color: white;
56 | }
57 | amp-img {
58 | border: 5px solid black;
59 | }
60 |
61 | amp-img.grey-placeholder {
62 | background-color: grey;
63 | }
64 | </style>
65 | <script async src="https://cdn.ampproject.org/v0.js"></script>
66 | </head>
67 | [/sourcecode]
68 |
69 | **Ważne:**
70 | upewnij się, że na stronie jest tylko jeden tag `<style amp-custom>`,
71 | bo standard AMP nie pozwala na więcej.
72 |
73 | Zdefiniuj style komponentów za pomocą
74 | selektorów klasy lub elementu,
75 | korzystając z typowych właściwości CSS. Na przykład:
76 |
77 | [sourcecode:html]
78 | <body>
79 | <p>Hello, Kitty.</p>
80 | <amp-img
81 | class="grey-placeholder"
82 | src="https://placekitten.com/g/500/300"
83 | srcset="/img/cat.jpg 640w,
84 | /img/kitten.jpg 320w"
85 | width="500"
86 | height="300"
87 | layout="responsive">
88 | </amp-img>
89 | </body>
90 | [/sourcecode]
91 |
92 | **Ważne:**
93 | sprawdź, czy standard AMP obsługuje style, których chcesz użyć.
94 | Niektóre style nie są dozwolone ze względu na ich wydajność
95 | (sprawdź również [obsługiwane elementy CSS](/docs/guides/responsive/style_pages.html)).
96 |
97 | ## Dobierz rozmiar i pozycje elementów
98 |
99 | Standard AMP rozdziela układ i elementy dokumentu od ładowania zasobów,
100 | by móc wczytać układ strony bez potrzeby czekania na ich pobranie.
101 |
102 | Określ rozmiar i pozycję wszystkich widocznych elementów AMP,
103 | dodając atrybuty `width` i `height`.
104 | Te atrybuty opisują współczynnik proporcji obrazu,
105 | który następnie podlega skalowaniu za pomocą kontenera.
106 |
107 | Ustaw układ elastyczny.
108 | Dzięki temu rozmiar elementu jest dopasowywany do szerokości kontenera,
109 | a jego wysokość jest automatycznie dopasowywana do współczynnika proporcji określonego za pomocą atrybutów szerokości i wysokości.
110 |
111 | Dowiedz się więcej na temat [układów obsługiwanych przez AMP](/docs/guides/responsive/control_layout.html).
112 |
113 | ## Zweryfikuj style i układ
114 |
115 | Za pomocą narzędzia do weryfikacji stron AMP
116 | przetestuj stronę pod kątem poprawności kodu CSS i układu strony.
117 |
118 | Narzędzie to potwierdzi, że kod CSS Twojej strony nie
119 | przekracza limitu 50 000 bajtów,
120 | sprawdzi, czy strona nie zawiera niedozwolonych stylów,
121 | oraz dopilnuje, by układ strony był poprawnie obsługiwany
122 | i formatowany.
123 | Sprawdź listę [błędów stylów i układów](/docs/reference/validation_errors.html#style-and-layout-errors).
124 |
125 | Przykładowy błąd w konsoli dla strony z kodem CSS przekraczającym 50 000 bajtów:
126 |
127 | <amp-img src="/static/img/docs/too_much_css.png" width="1404" height="334" layout="responsive"></amp-img>
128 |
129 | Dowiedz się więcej o [weryfikacji stron AMP](/docs/guides/validate.html),
130 | w tym o sposobie wyszukiwania i naprawy błędów stylów.
131 |
```
--------------------------------------------------------------------------------
/content/docs/guides/author_develop/[email protected]:
--------------------------------------------------------------------------------
```markdown
1 | ---
2 | $title: Incluir contenido de terceros
3 | ---
4 |
5 | Obtén información sobre cómo incluir componentes de terceros en tus páginas.
6 |
7 | [TOC]
8 |
9 | ## Insertar un tuit
10 |
11 | Inserta un tuit de Twitter en tu página
12 | con el elemento <a href="/docs/reference/extended/amp-twitter.html">`amp-twitter`</a>.
13 |
14 | Para incluir un tuit en tu página,
15 | incluye en primer lugar la siguiente secuencia de comandos en `<head>`:
16 |
17 | [sourcecode:html]
18 | <script async custom-element="amp-twitter" src="https://cdn.ampproject.org/v0/amp-twitter-0.1.js"></script>
19 | [/sourcecode]
20 |
21 | Actualmente, los tuits se adaptan de forma automática y proporcional a escala
22 | para encajar en el tamaño indicado, pero es posible que la apariencia resultante no sea la ideal.
23 | 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.
24 |
25 | Ejemplo de `amp-twitter` del
26 | [ejemplo twitter.amp](https://github.com/ampproject/amphtml/blob/master/examples/twitter.amp.html):
27 |
28 | [sourcecode:html]
29 | <amp-twitter width="390" height="50"
30 | layout="responsive"
31 | data-tweetid="638793490521001985">
32 | </amp-twitter>
33 | [/sourcecode]
34 |
35 | ## Insertar una foto de Instagram
36 |
37 | Inserta una foto de Instagram en tu página con el elemento [`amp-instagram`](/docs/reference/extended/amp-instagram.html).
38 |
39 | Para incluir una foto de Instagram, en primer lugar incluye la siguiente secuencia de comandos en `<head>`:
40 |
41 | [sourcecode:html]
42 | <script async custom-element="amp-instagram" src="https://cdn.ampproject.org/v0/amp-instagram-0.1.js"></script>
43 | [/sourcecode]
44 |
45 | Incluye el código abreviado de datos de Instagram que se encuentra en la URL de la foto de Instagram.
46 | Por ejemplo, en `https://instagram.com/p/fBwFP`, el código abreviado de datos es `fBwFP`.
47 | 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
48 |
49 | [sourcecode:html]
50 | <amp-instagram
51 | data-shortcode="fBwFP"
52 | width="320"
53 | height="392"
54 | layout="responsive">
55 | </amp-instagram>
56 | [/sourcecode]
57 |
58 | ## Mostrar entradas o vídeos de Facebook
59 |
60 | Muestra una entrada o un vídeo de Facebook en tu página con el elemento [`amp-facebook`](/docs/reference/extended/amp-facebook.html).
61 |
62 | Debes incluir la siguiente secuencia de comandos en `<head>`:
63 |
64 | [sourcecode:html]
65 | <script async custom-element="amp-facebook" src="https://cdn.ampproject.org/v0/amp-facebook-0.1.js"></script>
66 | [/sourcecode]
67 |
68 | Ejemplo: insertar una entrada:
69 |
70 | [sourcecode:html]
71 | <amp-facebook width=486 height=657
72 | layout="responsive"
73 | data-href="https://www.facebook.com/zuck/posts/10102593740125791">
74 | </amp-facebook>
75 | [/sourcecode]
76 |
77 | Ejemplo: insertar un vídeo:
78 |
79 | [sourcecode:html]
80 | <amp-facebook width=552 height=574
81 | layout="responsive"
82 | data-embed-as="video"
83 | data-href="https://www.facebook.com/zuck/videos/10102509264909801/">
84 | </amp-facebook>
85 | [/sourcecode]
86 |
87 | ## Insertar un vídeo de YouTube
88 |
89 | Inserta un vídeo de YouTube en tu página con el elemento [`amp-youtube`](/docs/reference/extended/amp-youtube.html).
90 |
91 | Debes incluir la siguiente secuencia de comandos en `<head>`:
92 |
93 | [sourcecode:html]
94 | <script async custom-element="amp-youtube" src="https://cdn.ampproject.org/v0/amp-youtube-0.1.js"></script>
95 | [/sourcecode]
96 |
97 | El atributo `data-videoid` de YouTube se puede encontrar en todas las URL de las páginas de vídeo de YouTube.
98 | Por ejemplo, en https://www.youtube.com/watch?v=Z1q71gFeRqM,
99 | el ID de vídeo es Z1q71gFeRqM.
100 |
101 | Utiliza `layout="responsive"` para producir diseños correctos para los vídeos con una relación de aspecto de 16:9:
102 |
103 | [sourcecode:html]
104 | <amp-youtube
105 | data-videoid="mGENRKrdoGY"
106 | layout="responsive"
107 | width="480" height="270">
108 | </amp-youtube>
109 | [/sourcecode]
110 |
111 | ## Mostrar un anuncio
112 |
113 | Muestra un anuncio en tu página utilizando el elemento [`amp-ad`](/docs/reference/amp-ad.html).
114 | Únicamente son compatibles los anuncios que se publiquen a través de HTTPS.
115 |
116 | No se puede ejecutar ningún JavaScript proporcionado por una red publicitaria en el documento de AMP.
117 | En cambio, en tiempo de ejecución de AMP se carga un iframe desde un
118 | origen diferente (a través de la zona de pruebas de iframe)
119 | y se ejecuta el JS de la red publicitaria dentro de esa zona.
120 |
121 | Debes especificar la anchura y la altura del anuncio y el tipo de red publicitaria.
122 | El atributo `type` identifica la plantilla de la red publicitaria.
123 | Los diferentes tipos de anuncios requieren diferentes atributos `data-*`.
124 |
125 | [sourcecode:html]
126 | <amp-ad width="300" height="250"
127 | type="example"
128 | data-aax_size="300x250"
129 | data-aax_pubname="test123"
130 | data-aax_src="302">
131 | </amp-ad>
132 | [/sourcecode]
133 |
134 | Si la red publicitaria lo admite, incluye un `placeholder` para que se muestre si no hay anuncios disponibles:
135 |
136 | [sourcecode:html]
137 | <amp-ad width="300" height="250"
138 | type="example"
139 | data-aax_size="300x250"
140 | data-aax_pubname="test123"
141 | data-aax_src="302">
142 | <div placeholder>Have a great day!</div>
143 | </amp-ad>
144 | [/sourcecode]
145 |
146 | 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).
147 |
```
--------------------------------------------------------------------------------
/content/docs/guides/author_develop/[email protected]:
--------------------------------------------------------------------------------
```markdown
1 | ---
2 | $title: Inhalte von Drittanbietern einschließen
3 | ---
4 |
5 | In diesem Artikel wird beschrieben, wie Sie Drittanbieterkomponenten in Ihre Seiten einschließen können.
6 |
7 | [TOC]
8 |
9 | ## Tweet integrieren
10 |
11 | Wenn Sie auf Ihrer Seite einen Twitter-Tweet einbetten möchten, verwenden Sie das Element [`amp-twitter`](/docs/reference/extended/amp-twitter.html).
12 |
13 | Fügen Sie dazu zunächst das folgende Skript in den `<head>`-Abschnitt ein:
14 |
15 | [sourcecode:html]
16 | <script async custom-element="amp-twitter" src="https://cdn.ampproject.org/v0/amp-twitter-0.1.js"></script>
17 | [/sourcecode]
18 |
19 | Derzeit werden Tweets automatisch entsprechend dem verfügbaren Platz skaliert. Die Darstellung ist dabei aber nicht immer optimal.
20 | Passen Sie Breite und Höhe manuell an oder verwenden Sie das media-Attribut, um das Seitenverhältnis entsprechend der Bildschirmbreite festzulegen.
21 |
22 | Beispiel für `amp-twitter` aus dem [twitter.amp-Beispiel](https://github.com/ampproject/amphtml/blob/master/examples/twitter.amp.html):
23 |
24 | [sourcecode:html]
25 | <amp-twitter width="390" height="50"
26 | layout="responsive"
27 | data-tweetid="638793490521001985">
28 | </amp-twitter>
29 | [/sourcecode]
30 |
31 | ## Instagram einbetten
32 |
33 | Wenn Sie auf Ihrer Seite ein Instagram einbetten möchten, verwenden Sie das Element [`amp-instagram`](/docs/reference/extended/amp-instagram.html).
34 |
35 | Fügen Sie dazu zunächst das folgende Skript in den `<head>`-Abschnitt ein:
36 |
37 | [sourcecode:html]
38 | <script async custom-element="amp-instagram" src="https://cdn.ampproject.org/v0/amp-instagram-0.1.js"></script>
39 | [/sourcecode]
40 |
41 | 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.
42 | 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.
43 |
44 | [sourcecode:html]
45 | <amp-instagram
46 | data-shortcode="fBwFP"
47 | width="320"
48 | height="392"
49 | layout="responsive">
50 | </amp-instagram>
51 | [/sourcecode]
52 |
53 | ## Beitrag oder Video von Facebook anzeigen
54 |
55 | 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).
56 |
57 | Fügen Sie dazu das folgende Skript dem `<head>`-Abschnitt hinzu:
58 |
59 | [sourcecode:html]
60 | <script async custom-element="amp-facebook" src="https://cdn.ampproject.org/v0/amp-facebook-0.1.js"></script>
61 | [/sourcecode]
62 |
63 | Beispiel für das Einbetten eines Beitrags:
64 |
65 | [sourcecode:html]
66 | <amp-facebook width=486 height=657
67 | layout="responsive"
68 | data-href="https://www.facebook.com/zuck/posts/10102593740125791">
69 | </amp-facebook>
70 | [/sourcecode]
71 |
72 | Beispiel für das Einbetten eines Videos:
73 |
74 | [sourcecode:html]
75 | <amp-facebook width=552 height=574
76 | layout="responsive"
77 | data-embed-as="video"
78 | data-href="https://www.facebook.com/zuck/videos/10102509264909801/">
79 | </amp-facebook>
80 | [/sourcecode]
81 |
82 | ## YouTube-Video einschließen
83 |
84 | Wenn Sie auf Ihrer Seite ein YouTube-Video einschließen möchten, verwenden Sie das Element [`amp-youtube`](/docs/reference/extended/amp-youtube.html).
85 |
86 | Fügen Sie dazu das folgende Skript dem `<head>`-Abschnitt hinzu:
87 |
88 | [sourcecode:html]
89 | <script async custom-element="amp-youtube" src="https://cdn.ampproject.org/v0/amp-youtube-0.1.js"></script>
90 | [/sourcecode]
91 |
92 | 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.
93 |
94 | Verwenden Sie `layout="responsive"`, um das richtige Layout für Videos mit dem Seitenverhältnis 16:9 zu erhalten:
95 |
96 | [sourcecode:html]
97 | <amp-youtube
98 | data-videoid="mGENRKrdoGY"
99 | layout="responsive"
100 | width="480" height="270">
101 | </amp-youtube>
102 | [/sourcecode]
103 |
104 | ## Werbeanzeige einblenden
105 |
106 | Wenn Sie auf Ihrer Seite eine Werbeanzeige einblenden möchten, verwenden Sie das Element [`amp-ad`](/docs/reference/amp-ad.html).
107 | Es werden nur über HTTPS bereitgestellte Werbeanzeigen unterstützt.
108 |
109 | Innerhalb des AMP-Dokuments darf kein vom Werbenetzwerk bereitgestellter JavaScript-Code ausgeführt werden.
110 | 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.
111 |
112 | Sie müssen Breite und Höhe der Werbeanzeige sowie den Typ des Werbenetzwerks angeben.
113 | Mit `type` wird die Vorlage des Werbenetzwerks angegeben.
114 | Unterschiedliche Anzeigentypen erfordern unterschiedliche `data-*`-Attribute.
115 |
116 | [sourcecode:html]
117 | <amp-ad width="300" height="250"
118 | type="example"
119 | data-aax_size="300x250"
120 | data-aax_pubname="test123"
121 | data-aax_src="302">
122 | </amp-ad>
123 | [/sourcecode]
124 |
125 | Falls das Werbenetzwerk dies unterstützt, schließen Sie ein `placeholder`-Element ein, wenn keine Werbeanzeige verfügbar ist:
126 |
127 | [sourcecode:html]
128 | <amp-ad width="300" height="250"
129 | type="example"
130 | data-aax_size="300x250"
131 | data-aax_pubname="test123"
132 | data-aax_src="302">
133 | <div placeholder>Have a great day!</div>
134 | </amp-ad>
135 | [/sourcecode]
136 |
137 | AMP unterstützt viele verschiedene Werbenetzwerke. [Eine vollständige Liste finden Sie hier.](/docs/reference/amp-ad.html#supported-ad-networks)
138 |
```
--------------------------------------------------------------------------------
/assets/sass/pages/_latest.scss:
--------------------------------------------------------------------------------
```scss
1 | .latest {
2 | .hero,
3 | .hero .img-wrap {
4 | position: relative;
5 | }
6 |
7 | .hero {
8 | box-shadow: 0 3px 10px 0 rgba(0, 0, 0, .15);
9 |
10 | .lines,
11 | .text {
12 | left: 0;
13 | position: absolute;
14 | top: 0;
15 | }
16 |
17 | .lines {
18 | transform: translate(-14.54%, -18.18%);
19 | width: 22.91%
20 | }
21 |
22 | .text {
23 | padding: 80px 11.35%;
24 | right: 0;
25 |
26 | .title {
27 | max-width: 300px;
28 | }
29 | }
30 | }
31 |
32 | .feeds {
33 | background: $color-white;
34 | box-sizing: border-box;
35 | display: flex;
36 | justify-content: space-between;
37 | margin: 0 auto;
38 | padding: 80px 4.86%;
39 | position: relative;
40 | top: -160px;
41 | width: 90%;
42 |
43 | .text {
44 | display: none;
45 | }
46 |
47 | .posts {
48 | width: 48.9%;
49 |
50 | .posts-label {
51 | margin-bottom: 64px;
52 | position: relative;
53 |
54 | &::after {
55 | background: $gradient-bold;
56 | bottom: -35px;
57 | content: '';
58 | height: 3px;
59 | left: 0;
60 | position: absolute;
61 | width: 47px;
62 | }
63 | }
64 | }
65 |
66 | .post-item {
67 | padding: 36px 0;
68 |
69 | &:last-of-type {
70 | margin-bottom: 30px;
71 | }
72 |
73 | &.tweet {
74 |
75 | a,
76 | .retweet {
77 | text-transform: none;
78 | }
79 |
80 | .origin-name,
81 | .origin-id,
82 | .retweet,
83 | .retweet amp-img {
84 | display: inline-block;
85 | }
86 |
87 | .origin-name,
88 | .origin-id,
89 | .retweet amp-img {
90 | margin-right: 5px;
91 | }
92 |
93 | .retweet i-amp-sizer {
94 | width: 16px;
95 | }
96 |
97 | .tweet-text {
98 | margin: 20px 0;
99 |
100 | a {
101 | font-size: inherit;
102 | font-weight: inherit;
103 | line-height: inherit;
104 | }
105 |
106 | s {
107 | text-decoration: none;
108 | }
109 |
110 | b {
111 | font-weight: 300;
112 | }
113 |
114 | .invisible {
115 | font-size: 0;
116 | line-height: 0;
117 | display: inline-block;
118 | width: 0;
119 | }
120 |
121 | .tco-ellipsis + .invisible {
122 | width: 4px;
123 | }
124 | }
125 | .Emoji {
126 | max-width: 18px;
127 | }
128 | }
129 | }
130 |
131 | .label,
132 | .post-meta {
133 | @extend %text-label;
134 | }
135 |
136 | .label {
137 | color: $color-ampblue;
138 | margin-bottom: 15px;
139 | }
140 |
141 | .post-meta {
142 | color: $color-grey-md;
143 |
144 | .time {
145 | &::before {
146 | content: '|';
147 | margin-left: .8em;
148 | margin-right: 1.1em;
149 | }
150 | }
151 | }
152 |
153 | .post-title {
154 | h4 {
155 | margin: 10px 0;
156 | }
157 | }
158 |
159 | .post-excerpt {
160 | margin: 0;
161 | }
162 |
163 | .event-meta {
164 | margin: 6px 0 8px 0;
165 | }
166 |
167 | .twitter {
168 | padding-top: .7em;
169 | width: 36.41%;
170 |
171 | .twitter-icon {
172 | display: inline-block;
173 | position: relative;
174 |
175 | amp-img {
176 | left: -25px;
177 | position: absolute;
178 | top: -22px;
179 | }
180 |
181 | i-amp-sizer {
182 | width: 45px;
183 | }
184 | }
185 |
186 | .main-account {
187 | display: inline-block;
188 | margin-bottom: 36px;
189 | text-transform: none;
190 | }
191 |
192 | .mobile-feed {
193 | display: none;
194 | }
195 | }
196 |
197 | &::before {
198 | background: $gradient-bold;
199 | content: '';
200 | height: 3px;
201 | left: 0;
202 | position: absolute;
203 | right: 0;
204 | top: -3px;
205 | }
206 | }
207 |
208 | &.rtl {
209 | .feeds .posts .posts-label::after {
210 | left: auto;
211 | right: 0;
212 | }
213 | }
214 |
215 | @include max-screen($tablet-breakpoint + 320px) {
216 | .hero {
217 | .text {
218 | padding: 80px 5.35%;
219 | }
220 | }
221 |
222 | .feeds {
223 | padding: 60px 4.86%;
224 | }
225 | }
226 |
227 | @include max-screen($mobile-breakpoint) {
228 | .wrap {
229 | .container,
230 | .content {
231 | padding: 0;
232 | }
233 | }
234 |
235 | .hero .img-wrap .lines,
236 | .hero .text,
237 | .twitter .desktop-feed {
238 | display: none;
239 | }
240 |
241 | .feeds .text,
242 | .feeds .twitter .mobile-feed {
243 | display: block;
244 | }
245 |
246 | .feeds {
247 | flex-wrap: wrap;
248 | justify-content: center;
249 | padding: 40px 0;
250 | top: -11vw;
251 |
252 | .text {
253 | margin-bottom: 30px;
254 | width: 82.36%;
255 | }
256 |
257 | .posts {
258 | margin-bottom: 36px;
259 | width: 82.36%;
260 |
261 | .posts-label {
262 | margin-bottom: 25px;
263 |
264 | &::after {
265 | bottom: -25px;
266 | }
267 | }
268 |
269 | .post-item {
270 | padding: 24px 0;
271 |
272 | &:last-of-type {
273 | margin-bottom: 20px;
274 | }
275 | }
276 | }
277 |
278 | .twitter {
279 | width: 82.36%;
280 |
281 | .twitter-account,
282 | .twitter-label {
283 | margin-bottom: 10px;
284 | text-align: center;
285 | }
286 |
287 | .main-account {
288 | margin-bottom: 20px;
289 | }
290 |
291 | .tweet {
292 | display: flex;
293 | flex-basis: 100%;
294 | flex-direction: column;
295 | justify-content: space-around;
296 | margin: 0;
297 | max-width: 100%;
298 | overflow: hidden;
299 | padding: 26px;
300 | }
301 | }
302 | }
303 | }
304 |
305 | @include max-screen($mobile-medium-breakpoint) {
306 | .feeds {
307 | .posts,
308 | .twitter {
309 | width: 100%;
310 | }
311 |
312 | .twitter {
313 | .mobile-feed {
314 | left: -8%;
315 | position: relative;
316 | width: 116%;
317 | }
318 | }
319 | }
320 | }
321 | }
322 |
```
--------------------------------------------------------------------------------
/assets/img/about/who-use-amp/who_icon_publishers.svg:
--------------------------------------------------------------------------------
```
1 | <svg id="Layer_1" data-name="Layer 1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 150 150"><defs><style>.cls-1,.cls-13,.cls-14,.cls-15,.cls-16,.cls-17{fill:none;}.cls-1{stroke:#0389ff;}.cls-1,.cls-10,.cls-11,.cls-12,.cls-13,.cls-14,.cls-15,.cls-16,.cls-17,.cls-2,.cls-3,.cls-4,.cls-5,.cls-8,.cls-9{stroke-linecap:round;}.cls-1,.cls-2,.cls-3,.cls-4,.cls-5{stroke-miterlimit:10;}.cls-10,.cls-11,.cls-12,.cls-2,.cls-3,.cls-4,.cls-5,.cls-8,.cls-9{fill:#fff;}.cls-2,.cls-3,.cls-4,.cls-5{fill-opacity:0.7;}.cls-2{stroke:url(#linear-gradient);}.cls-3{stroke:url(#linear-gradient-2);}.cls-4{stroke:url(#linear-gradient-3);}.cls-5{stroke:url(#linear-gradient-4);}.cls-6,.cls-7{opacity:0.7;}.cls-6{fill:url(#linear-gradient-5);}.cls-7{fill:url(#linear-gradient-6);}.cls-10,.cls-11,.cls-12,.cls-13,.cls-14,.cls-15,.cls-16,.cls-17,.cls-8,.cls-9{stroke-linejoin:round;}.cls-8{stroke:url(#linear-gradient-7);}.cls-9{stroke:url(#linear-gradient-8);}.cls-10{stroke:url(#linear-gradient-9);}.cls-11{stroke:url(#linear-gradient-10);}.cls-12{stroke:url(#linear-gradient-11);}.cls-13{stroke:url(#linear-gradient-12);}.cls-14{stroke:url(#linear-gradient-13);}.cls-15{stroke:url(#linear-gradient-14);}.cls-16{stroke:url(#linear-gradient-15);}.cls-17{stroke:url(#linear-gradient-16);}</style><linearGradient id="linear-gradient" x1="20.87" y1="83.67" x2="63.23" y2="83.67" gradientUnits="userSpaceOnUse"><stop offset="0" stop-color="#1c79c4"/><stop offset="0.51" stop-color="#0389ff"/><stop offset="1" stop-color="#0dd4ff"/></linearGradient><linearGradient id="linear-gradient-2" x1="25.64" y1="84.98" x2="63.23" y2="84.98" xlink:href="#linear-gradient"/><linearGradient id="linear-gradient-3" x1="34.38" y1="86.29" x2="63.23" y2="86.29" xlink:href="#linear-gradient"/><linearGradient id="linear-gradient-4" x1="6980.83" y1="62.88" x2="7030.87" y2="62.88" gradientTransform="matrix(-1, 0, 0, 1, 7093.06, 0)" xlink:href="#linear-gradient"/><linearGradient id="linear-gradient-5" x1="68.56" y1="65.8" x2="80.62" y2="33.54" xlink:href="#linear-gradient"/><linearGradient id="linear-gradient-6" x1="73.16" y1="38.57" x2="76.14" y2="30.6" xlink:href="#linear-gradient"/><linearGradient id="linear-gradient-7" x1="79.27" y1="89.66" x2="133.5" y2="89.66" xlink:href="#linear-gradient"/><linearGradient id="linear-gradient-8" x1="83.25" y1="89.66" x2="128.47" y2="89.66" xlink:href="#linear-gradient"/><linearGradient id="linear-gradient-9" x1="86.35" y1="89.65" x2="133.5" y2="89.65" xlink:href="#linear-gradient"/><linearGradient id="linear-gradient-10" x1="116.08" y1="75.81" x2="128.47" y2="75.81" xlink:href="#linear-gradient"/><linearGradient id="linear-gradient-11" x1="90.13" y1="81.48" x2="113.11" y2="81.48" xlink:href="#linear-gradient"/><linearGradient id="linear-gradient-12" x1="90.53" y1="86.1" x2="113.77" y2="86.1" xlink:href="#linear-gradient"/><linearGradient id="linear-gradient-13" x1="90.53" y1="96.31" x2="113.38" y2="96.31" xlink:href="#linear-gradient"/><linearGradient id="linear-gradient-14" x1="90.53" y1="95.98" x2="128.74" y2="95.98" xlink:href="#linear-gradient"/><linearGradient id="linear-gradient-15" x1="90.53" y1="99.41" x2="128.74" y2="99.41" xlink:href="#linear-gradient"/><linearGradient id="linear-gradient-16" x1="90.53" y1="108.84" x2="119.2" y2="108.84" xlink:href="#linear-gradient"/></defs><title>who_icon_publishers</title><path class="cls-1" d="M17,63.19,55.93,43.42,55.09,43a.79.79,0,0,1,0-1.43l9.53-4.74A4,4,0,0,1,68,36.8l.67.3,38.14-19.77.79,64.85L69.44,101.95l-2.38-1.58-14.3,7.12,4,1.58L17.8,128Z"/><polygon class="cls-2" points="21.37 63.98 62.73 39.33 62.73 105.9 21.37 128.05 21.37 63.98"/><polygon class="cls-3" points="26.14 66.62 62.73 39.33 62.73 105.9 26.14 130.68 26.14 66.62"/><polygon class="cls-4" points="34.88 69.26 62.73 39.33 62.73 105.9 34.88 133.32 34.88 69.26"/><polygon class="cls-5" points="111.73 19.82 62.69 39.33 62.69 105.9 111.73 83.89 111.73 19.82"/><polygon class="cls-6" points="67.97 36.8 78.78 31.36 81.36 32.35 81.36 62.14 76.59 58.45 71.63 67.67 70.83 37.88 67.97 36.8"/><polygon class="cls-7" points="81.36 32.35 70.74 37.84 67.97 36.76 78.92 31.27 81.36 32.35"/><path class="cls-8" d="M86.92,122.08l43.14-21.85a4.74,4.74,0,0,0,2.6-4.34L133,57.23,88,81.48l.22,37.9q0,.22,0,.44c-.37,4.36-7,3.93-7-.44l-1.4-39.22,44.49-23.73.79,5"/><polygon class="cls-9" points="127.97 56.57 83.75 80.56 83.75 122.74 127.97 98.75 127.97 56.57"/><path class="cls-10" d="M86.92,122.08l41.91-21.21a7.54,7.54,0,0,0,3-2.18,7.5,7.5,0,0,0,.9-4.27l.3-37.18L88,81.46q-.14,9.7-.08,19.4,0,4.77.12,9.54c.07,3.9.93,8.11-1.21,11.64"/><polygon class="cls-11" points="127.97 79.37 116.58 85.17 116.58 72.26 127.97 66.46 127.97 79.37"/><polygon class="cls-12" points="112.61 77.53 90.63 88.6 90.63 85.44 112.61 74.36 112.61 77.53"/><line class="cls-13" x1="91.03" y1="91.63" x2="113.27" y2="80.56"/><line class="cls-14" x1="91.03" y1="101.91" x2="112.88" y2="90.71"/><line class="cls-15" x1="91.03" y1="105.34" x2="128.24" y2="86.62"/><line class="cls-16" x1="91.03" y1="108.77" x2="128.24" y2="90.05"/><line class="cls-17" x1="91.03" y1="115.62" x2="118.7" y2="102.05"/></svg>
```
--------------------------------------------------------------------------------
/content/docs/guides/author_develop/[email protected]:
--------------------------------------------------------------------------------
```markdown
1 | ---
2 | $title: Crear páginas de AMP adaptables
3 | toc: true
4 | ---
5 |
6 | Crear elementos de AMP adaptables es realmente fácil.
7 | Solo hay que introducir `layout=responsive` en ellos.
8 |
9 | [TOC]
10 |
11 | ## Crear imágenes adaptables
12 |
13 | Todos los recursos cargados externamente, incluidas las imágenes,
14 | deben tener un tamaño y una posición específicos
15 | para que cuando los recursos carguen la página, esta no salte y reinicie el flujo.
16 |
17 | Para crear imágenes adaptables, especifica la anchura y la altura, establece el diseño como adaptable e indica, mediante <a href="/es/docs/guides/responsive/style_pages.html">`srcset`</a>, cuál es el elemento de imagen que se debe utilizar en función de los diferentes tamaños de pantalla:
18 |
19 | [sourcecode:html]
20 | <amp-img
21 | src="/img/narrow.jpg"
22 | srcset="/img/wide.jpg 640w,
23 | /img/narrow.jpg 320w"
24 | width="1698"
25 | height="2911"
26 | layout="responsive"
27 | alt="an image">
28 | </amp-img>
29 | [/sourcecode]
30 |
31 | Este elemento `amp-img` ajusta automáticamente la anchura de su elemento contenedor, y su altura se ajusta automáticamente a la relación de aspecto determinada por la anchura y la altura dadas:
32 |
33 | <amp-img src="/static/img/docs/responsive_amp_img.png" width="500" height="857"></amp-img>
34 |
35 | Consulta también la información sobre el componente [amp-img en AMP by Example](https://ampbyexample.com/components/amp-img/).
36 |
37 | ## Añadir estilos a una página
38 |
39 | Añade todos los estilos dentro de la etiqueta `<style amp-custom>`
40 | en el encabezado del documento.
41 | Por ejemplo:
42 |
43 | [sourcecode:html]
44 | <!doctype html>
45 | <head>
46 | <meta charset="utf-8">
47 | <link rel="canonical" href="hello-world.html" >
48 | <meta name="viewport" content="width=device-width,minimum-scale=1,initial-scale=1">
49 | <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>
50 | <style amp-custom>
51 | /* any custom style goes here. */
52 | body {
53 | background-color: white;
54 | }
55 | amp-img {
56 | border: 5px solid black;
57 | }
58 |
59 | amp-img.grey-placeholder {
60 | background-color: grey;
61 | }
62 | </style>
63 | <script async src="https://cdn.ampproject.org/v0.js"></script>
64 | </head>
65 | [/sourcecode]
66 |
67 | **Importante:**
68 | Asegúrate de que solo hay una etiqueta `<style amp-custom>` en la página,
69 | ya que en AMP solo se admite la presencia de una.
70 |
71 | Define los estilos de los componentes con selectores de clase o de elemento
72 | usando propiedades comunes de CSS. Por ejemplo:
73 |
74 | [sourcecode:html]
75 | <body>
76 | <p>Hello, Kitty.</p>
77 | <amp-img
78 | class="grey-placeholder"
79 | src="https://placekitten.com/g/500/300"
80 | srcset="/img/cat.jpg 640w,
81 | /img/kitten.jpg 320w"
82 | width="500"
83 | height="300"
84 | layout="responsive">
85 | </amp-img>
86 | </body>
87 | [/sourcecode]
88 |
89 | **Importante:**
90 | Comprueba que los estilos estén admitidos en AMP, ya que
91 | algunos estilos no lo están por cuestiones de rendimiento
92 | (consulta también [CSS compatibles](/es/docs/guides/responsive/style_pages.html)).
93 |
94 | ## Elementos de tamaño y posición
95 |
96 | AMP desacopla el diseño del documento de la carga de recursos para que AMP pueda cargar el diseño de la página sin tener que esperar a las descargas de los recursos.
97 |
98 | Especifica el tamaño y la posición de todos los elementos visibles de AMP,
99 | proporcionando los atributos `width` y `height`.
100 | Estos atributos implican la relación de aspecto del elemento,
101 | que se puede escalar con el contenedor.
102 |
103 | Establece el diseño como adaptable.
104 | Esto ajusta el tamaño del elemento a la anchura del elemento contenedor
105 | y cambia la altura automáticamente a la relación de aspecto determinada por los atributos de anchura y altura.
106 |
107 | Obtén más información acerca de [los diseños compatibles con AMP](/es/docs/guides/responsive/control_layout.html).
108 |
109 | ## Valida tus estilos y diseños
110 |
111 | Usa el validador de AMP para comprobar
112 | los valores de diseño y CCS de tu página.
113 |
114 | El validador confirma que el CSS de la página no exceda el límite de 50.000 bytes,
115 | comprueba que no haya estilos no permitidos y garantiza que el diseño de la página sea compatible y el formato sea correcto.
116 | Consulta también esta lista completa de [errores de estilo y diseño](/es/docs/reference/validation_errors.html#style-and-layout-errors).
117 |
118 | Ejemplo de error en la consola de una página con CSS que excede el límite de 50.000 bytes:
119 |
120 | <amp-img src="/static/img/docs/too_much_css.png" width="1404" height="334" layout="responsive"></amp-img>
121 |
122 | Obtén más información acerca de cómo [validar las páginas de AMP](/es/docs/guides/validate.html),
123 | incluida la forma de localizar los errores de estilo y solucionarlos.
124 |
```
--------------------------------------------------------------------------------
/content/docs/guides/author_develop/[email protected]:
--------------------------------------------------------------------------------
```markdown
1 | ---
2 | $title: Responsive AMP-Seiten erstellen
3 | toc: true
4 | ---
5 |
6 | In AMP können Sie ganz leicht responsive Elemente erstellen, indem Sie einfach `layout=responsive` in sie einfügen.
7 |
8 | [TOC]
9 |
10 | ## Responsive Bilder erstellen
11 |
12 | Für alle extern geladenen Ressourcen, einschließlich Bildern, müssen Größe und Position angegeben werden, damit die Seite beim Laden der Ressourcen ohne Springen und Layoutänderung angezeigt wird.
13 |
14 | Wenn Sie responsive Bilder erstellen, geben Sie Breite und Höhe an, legen Sie das Layout als responsiv fest und geben Sie mittels [`srcset`](/docs/guides/responsive/style_pages.html) an, welches Bild-Asset je nach Bildschirmgröße verwendet werden soll:
15 |
16 | [sourcecode:html]
17 | <amp-img
18 | src="/img/narrow.jpg"
19 | srcset="/img/wide.jpg 640w,
20 | /img/narrow.jpg 320w"
21 | width="1698"
22 | height="2911"
23 | layout="responsive"
24 | alt="an image">
25 | </amp-img>
26 | [/sourcecode]
27 |
28 | Dieses `amp-img`-Element passt die Breite seines Containerelements automatisch an. Die Höhe wird automatisch entsprechend dem Seitenverhältnis festgelegt, das sich aus den gegebenen Werten für Breite und Höhe ergibt:
29 |
30 | <amp-img src="/static/img/docs/responsive_amp_img.png" width="500" height="857">
31 | </amp-img>
32 |
33 | Weitere Informationen finden Sie unter ["amp-img" bei AMP by Example](https://ampbyexample.com/components/amp-img/).
34 |
35 | ## Seite mit Stilen versehen
36 |
37 | Fügen Sie alle Stile im `<style amp-custom>`-Tag im head-Abschnitt des Dokuments hinzu.
38 | Beispiel:
39 |
40 | [sourcecode:html]
41 | <!doctype html>
42 | <head>
43 | <meta charset="utf-8">
44 | <link rel="canonical" href="hello-world.html" >
45 | <meta name="viewport" content="width=device-width,minimum-scale=1,initial-scale=1">
46 | <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>
47 | <style amp-custom>
48 | /* any custom style goes here. */
49 | body {
50 | background-color: white;
51 | }
52 | amp-img {
53 | border: 5px solid black;
54 | }
55 |
56 | amp-img.grey-placeholder {
57 | background-color: grey;
58 | }
59 | </style>
60 | <script async src="https://cdn.ampproject.org/v0.js"></script>
61 | </head>
62 | [/sourcecode]
63 |
64 | **Wichtig:** Achten Sie darauf, dass Ihre Seite nur ein `<style amp-custom>`-Tag enthält. Mehr ist in AMP nicht zulässig.
65 |
66 | Definieren Sie Komponentenstile mit class- oder element-Selektoren unter Verwendung gebräuchlicher CSS-Eigenschaften. Beispiel:
67 |
68 | [sourcecode:html]
69 | <body>
70 | <p>Hello, Kitty.</p>
71 | <amp-img
72 | class="grey-placeholder"
73 | src="https://placekitten.com/g/500/300"
74 | srcset="/img/cat.jpg 640w,
75 | /img/kitten.jpg 320w"
76 | width="500"
77 | height="300"
78 | layout="responsive">
79 | </amp-img>
80 | </body>
81 | [/sourcecode]
82 |
83 | **Wichtig:** Prüfen Sie, ob Ihre Stile in AMP unterstützt werden. Bei einigen Stilen ist dies aus Leistungsgründen nicht der Fall. Weitere Informationen finden Sie unter [Unterstützte CSS-Stile](/docs/guides/responsive/style_pages.html).
84 |
85 | ## Größe und Position von Elementen festlegen
86 |
87 | AMP entkoppelt das Dokumentlayout vom Laden der Ressourcen, damit AMP das Layout der Seite laden kann, ohne auf Ressourcendownloads warten zu müssen.
88 |
89 | Geben Sie mithilfe der Attribute `width` und `height` Größe und Position aller sichtbaren AMP-Elemente an.
90 | Aus diesen Attributen ergibt sich das Seitenverhältnis des Elements, das dann mit dem Container skaliert werden kann.
91 |
92 | Legen Sie das Layout als responsiv fest.
93 | Dadurch wird die Breite des Elements an die Breite des Containerelements angepasst. Seine Höhe wird automatisch entsprechend dem Seitenverhältnis festgelegt, dass sich aus den width- und height-Attributen ergibt.
94 |
95 | Weitere Informationen finden Sie unter [Unterstützte Layouts in AMP](/docs/guides/responsive/control_layout.html).
96 |
97 | ## Stile und Layout überprüfen
98 |
99 | Mit dem AMP-Validierungstool können Sie die CSS- und Layoutwerte Ihrer Seite testen.
100 |
101 | Das Validierungstool bestätigt, dass der CSS-Code Ihrer Seite nicht die Beschränkung von 50.000 Byte überschreitet, sucht nach unzulässigen Stilen und prüft, ob das Layout der Seite unterstützt wird und korrekt formatiert ist.
102 | [Hier finden Sie die vollständige Liste der Stil- und Layoutfehler.](/docs/reference/validation_errors.html#style-and-layout-errors)
103 |
104 | Beispiel für einen Fehler in der Konsole bei einer Seite mit CSS-Code, der die Beschränkung von 50.000 Byte überschreitet:
105 |
106 | <amp-img src="/static/img/docs/too_much_css.png" width="1404" height="334" layout="responsive"></amp-img>
107 |
108 | [Hier finden Sie weitere Informationen zum Überprüfen von AMP-Seiten](/docs/guides/validate.html), einschließlich des Auffindens und Behebens von Stilfehlern.
109 |
```
--------------------------------------------------------------------------------
/content/docs/guides/author_develop/[email protected]:
--------------------------------------------------------------------------------
```markdown
1 | ---
2 | $title: Créer des pages AMP responsives
3 | toc: true
4 | ---
5 |
6 | Dans le cas d'éléments AMP, c'est facile, il suffit de leur ajouter le code `layout=responsive`.
7 |
8 | [TOC]
9 |
10 | ## Créer des images responsives
11 |
12 | Toutes les ressources chargées en externe, y compris les images, doivent avoir une taille et un emplacement précis. Ainsi, au fil de leur chargement, la page ne saute pas et est redisposée de manière dynamique.
13 |
14 | Créez des images responsives en indiquant leur largeur et leur hauteur, en définissant la mise en page comme responsive et en indiquant, au moyen de [`srcset`](/docs/guides/responsive/style_pages.html), quelle ressource d'image utiliser en fonction des différentes tailles d'écran :
15 |
16 | [sourcecode:html]
17 | <amp-img
18 | src="/img/narrow.jpg"
19 | srcset="/img/wide.jpg 640w,
20 | /img/narrow.jpg 320w"
21 | width="1698"
22 | height="2911"
23 | layout="responsive"
24 | alt="an image">
25 | </amp-img>
26 | [/sourcecode]
27 |
28 | Cet élément `amp-img` s'adapte automatiquement à la largeur de son élément conteneur, et sa hauteur est définie automatiquement sur le format déterminé par la largeur et la hauteur données :
29 |
30 | <amp-img src="/static/img/docs/responsive_amp_img.png" width="500" height="857"></amp-img>
31 |
32 | Voir aussi [amp-img sur AMP by Example](https://ampbyexample.com/components/amp-img/).
33 |
34 | ## Ajouter des styles à une page
35 |
36 | Ajoutez tous les styles à l'intérieur de la balise `<style amp-custom>` dans l'en-tête du document.
37 | Par exemple :
38 |
39 | [sourcecode:html]
40 | <!doctype html>
41 | <head>
42 | <meta charset="utf-8">
43 | <link rel="canonical" href="hello-world.html" >
44 | <meta name="viewport" content="width=device-width,minimum-scale=1,initial-scale=1">
45 | <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>
46 | <style amp-custom>
47 | /* any custom style goes here. */
48 | body {
49 | background-color: white;
50 | }
51 | amp-img {
52 | border: 5px solid black;
53 | }
54 |
55 | amp-img.grey-placeholder {
56 | background-color: grey;
57 | }
58 | </style>
59 | <script async src="https://cdn.ampproject.org/v0.js"></script>
60 | </head>
61 | [/sourcecode]
62 |
63 | **Important** : Assurez-vous de n'avoir qu'une seule balise `<style amp-custom>` sur votre page, car il n'est pas autorisé d'en utiliser davantage dans les pages AMP.
64 |
65 | Définissez des styles de composants avec des sélecteurs de classe ou d'élément en utilisant des propriétés CSS courantes. Par exemple :
66 |
67 | [sourcecode:html]
68 | <body>
69 | <p>Hello, Kitty.</p>
70 | <amp-img
71 | class="grey-placeholder"
72 | src="https://placekitten.com/g/500/300"
73 | srcset="/img/cat.jpg 640w,
74 | /img/kitten.jpg 320w"
75 | width="500"
76 | height="300"
77 | layout="responsive">
78 | </amp-img>
79 | </body>
80 | [/sourcecode]
81 |
82 | **Important** : Assurez-vous que vos styles sont compatibles avec les pages AMP ; certains ne le sont pas pour des raisons de performance (voir aussi [CSS compatibles](/docs/guides/responsive/style_pages.html)).
83 |
84 | ## Éléments de taille et d'emplacement
85 |
86 | Les pages AMP dissocient la mise en page du document du chargement des ressources. Ainsi, la mise en page de la page peut être chargée sans avoir à attendre le téléchargement des ressources.
87 |
88 | Indiquez la taille et l'emplacement de tous les éléments AMP visibles en fournissant un attribut `width` et un attribut `height`.
89 | Ces attributs définissent le format de l'élément, qui peut être mis à l'échelle du conteneur.
90 |
91 | Définissez la mise en page comme responsive.
92 | Cela ajuste la taille de l'élément à la largeur de son élément conteneur, et redimensionne automatiquement sa hauteur au format donné par les attributs de largeur et de hauteur.
93 |
94 | Renseignez-vous sur les [mises en page compatibles avec les pages AMP](/docs/guides/responsive/control_layout.html).
95 |
96 | ## Valider vos styles et votre mise en page
97 |
98 | Utilisez le validateur AMP pour tester les valeurs du CSS et de la mise en page de votre page.
99 |
100 | Le validateur confirme que le CSS de votre page n'excède pas la limite de 50 000 octets, vérifie qu'il ne contient pas de styles interdits et s'assure de la compatibilité de la mise en page de votre page ainsi que de son bon formatage.
101 | Consultez aussi la liste complète des [erreurs de style et de mise en page](/docs/reference/validation_errors.html#style-and-layout-errors).
102 |
103 | Exemple d'erreur dans la console pour une page avec un CSS qui dépasse la limite de 50 000 octets :
104 |
105 | <amp-img src="/static/img/docs/too_much_css.png" width="1404" height="334" layout="responsive"></amp-img>
106 |
107 | Apprenez-en davantage sur la façon de [valider vos pages AMP](/docs/guides/validate.html), y compris comment détecter les erreurs de style et les corriger.
108 |
```
--------------------------------------------------------------------------------
/content/docs/guides/author_develop/[email protected]:
--------------------------------------------------------------------------------
```markdown
1 | ---
2 | $title: Creare pagine AMP reattive
3 | toc: true
4 | ---
5 |
6 | È facilissimo creare elementi reattivi in AMP. È sufficiente inserire `layout=responsive`.
7 |
8 | [TOC]
9 |
10 | ## Creare immagini reattive
11 |
12 | Tutte le risorse caricate esternamente, incluse le immagini, devono avere posizione e dimensioni specifiche in modo che, quando vengono caricate, la pagina non salti e non si adatti dinamicamente.
13 |
14 | Per creare immagini reattive, specifica la larghezza e l'altezza, imposta il layout reattivo e utilizza [`srcset`](/docs/guides/responsive/style_pages.html) per indicare quale asset di immagine utilizzare in base alle dimensioni dello schermo:
15 |
16 | [sourcecode:html]
17 | <amp-img
18 | src="/img/narrow.jpg"
19 | srcset="/img/wide.jpg 640w,
20 | /img/narrow.jpg 320w"
21 | width="1698"
22 | height="2911"
23 | layout="responsive"
24 | alt="an image">
25 | </amp-img>
26 | [/sourcecode]
27 |
28 | Questo elemento `amp-img` si adatta automaticamente alla larghezza del relativo elemento contenitore, mentre la sua altezza viene impostata automaticamente in base alle proporzioni stabilite secondo la larghezza e l'altezza indicate:
29 |
30 | <amp-img src="/static/img/docs/responsive_amp_img.png" width="500" height="857" layout="responsive"></amp-img>
31 |
32 | Visita anche la pagina [amp-img del sito AMP by Example](https://ampbyexample.com/components/amp-img/).
33 |
34 | ## Aggiungere stili a una pagina
35 |
36 | Aggiungi tutti gli stili all'interno del tag `<style amp-custom>` nella sezione head del documento.
37 | Ad esempio:
38 |
39 | [sourcecode:html]
40 | <!doctype html>
41 | <head>
42 | <meta charset="utf-8">
43 | <link rel="canonical" href="hello-world.html" >
44 | <meta name="viewport" content="width=device-width,minimum-scale=1,initial-scale=1">
45 | <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>
46 | <style amp-custom>
47 | /* any custom style goes here. */
48 | body {
49 | background-color: white;
50 | }
51 | amp-img {
52 | border: 5px solid black;
53 | }
54 |
55 | amp-img.grey-placeholder {
56 | background-color: grey;
57 | }
58 | </style>
59 | <script async src="https://cdn.ampproject.org/v0.js"></script>
60 | </head>
61 | [/sourcecode]
62 |
63 | **Importante.** Assicurati che sia presente un solo tag `<style amp-custom>` nella pagina, perché nel formato AMP non sono consentiti più tag di questo tipo.
64 |
65 | Definisci gli stili dei componenti con i selettori di classe o di elemento utilizzando le proprietà CSS comuni. Ad esempio:
66 |
67 | [sourcecode:html]
68 | <body>
69 | <p>Hello, Kitty.</p>
70 | <amp-img
71 | class="grey-placeholder"
72 | src="https://placekitten.com/g/500/300"
73 | srcset="/img/cat.jpg 640w,
74 | /img/kitten.jpg 320w"
75 | width="500"
76 | height="300"
77 | layout="responsive">
78 | </amp-img>
79 | </body>
80 | [/sourcecode]
81 |
82 | **Importante.** Verifica che gli stili siano supportati nel formato AMP perché alcuni non sono supportati per motivi di rendimento (leggi anche la pagina [Stili CSS supportati](/docs/guides/responsive/style_pages.html)).
83 |
84 | ## Specificare le dimensioni e la posizione degli elementi
85 |
86 | AMP separa il layout del documento dal caricamento delle risorse in modo da poter caricare il layout della pagina senza dover aspettare che vengano scaricate le risorse.
87 |
88 | Specifica le dimensioni e la posizione di tutti gli elementi AMP visibili utilizzando gli attributi `width` e `height`.
89 | Questi attributi connotano le proporzioni dell'elemento, che potrà ridimensionarsi in base al contenitore.
90 |
91 | Imposta il layout reattivo.
92 | In questo modo l'elemento si adatta alla larghezza del relativo elemento contenitore, mentre la sua altezza viene ridimensionata automaticamente in base alle proporzioni stabilite dagli attributi di larghezza e altezza.
93 |
94 | Leggi ulteriori informazioni sui [layout supportati in AMP](/docs/guides/responsive/control_layout.html).
95 |
96 | ## Convalidare stili e layout
97 |
98 | Utilizza lo strumento di convalida AMP per testare i valori CSS e di layout della tua pagina.
99 |
100 | Lo strumento di convalida verifica che gli elementi CSS della pagina non superino il limite di 50.000 byte, controlla se ci sono stili non consentiti e si assicura che il layout della pagina sia supportato e formattato correttamente.
101 | Consulta anche questo elenco completo di [errori di stile e layout](/docs/reference/validation_errors.html#style-and-layout-errors).
102 |
103 | Esempio di errore nella console relativo a una pagina i cui elementi CSS superano il limite di 50.000 byte:
104 |
105 | <amp-img src="/static/img/docs/too_much_css.png" width="1404" height="334" layout="responsive"></amp-img>
106 |
107 | Leggi ulteriori informazioni su come [convalidare le tue pagine AMP](/docs/guides/validate.html), incluse informazioni su come trovare gli errori di stile e risolverli.
108 |
```
--------------------------------------------------------------------------------
/content/includes/events.yaml:
--------------------------------------------------------------------------------
```yaml
1 | hero:
2 | title@: Don't miss AMP Events
3 | hero_icon: /static/img/latest/events/event_hero.svg
4 |
5 | upcoming:
6 | label@: Upcoming Events
7 | empty_icon: /static/img/latest/events/event_empty.svg
8 | empty_title@: Stay Tuned!
9 | empty_text@: There are no upcomming events at this time. We host events throughout the year including our annual AMP Conference. Follow us on <a href="" target="_blank">Facebook</a> or <a href="https://twitter.com/amphtml" target="_blank">Twitter</a> for the latest news and event listings.
10 |
11 | past:
12 | label@: Past Events
13 | cta@: More Past Events
14 |
15 | upcoming_events:
16 | - type: Event
17 | title: Mobile + Web Devcon
18 | href: https://followup.cc/l/10384552/061a51652dd99cea3c8b861d6f50c6c0/http%3A%2F%2Fmobilewebdevconference.com%2F
19 | excerpt: "AMP + Progressive Web Apps: Start fast, stay engaged - Chen Shay"
20 | date: March 3, 2017
21 | event_time: 20170303/20170304
22 | event_time_text: Mar. 3
23 | location: San Francisco
24 | participant: Developers
25 | - type: Event
26 | title: Online Marketing Rockstars
27 | href: https://followup.cc/l/10384552/228814a55de50a6100b8c2c174df9eb6/http%3A%2F%2Fwww.onlinemarketingrockstars.de%2Ffestival%2Fen%2Fconference%2F
28 | excerpt: A Faster Mobile Web - Malte Ubl
29 | date: March 2, 2017
30 | event_time: 20170302/20170304
31 | event_time_text: Mar. 2 to Mar. 3
32 | location: Hamburg
33 | participant: Developers
34 | - type: Event
35 | title: AMP Conf
36 | href: https://www.ampproject.org/amp-conf-2017
37 | excerpt: 14 Talks. 5 Panels. Live-streamed.
38 | date: March 7, 2017
39 | event_time: 20170307/20170309
40 | event_time_text: Mar. 7 to Mar. 8
41 | location: New York City
42 | participant: Developers
43 | - type: Event
44 | title: Mobile Innovation Summit
45 | href: https://followup.cc/l/10384552/38e93950f02bcb8a3fcea3829d5e4ab6/https%3A%2F%2Ftheinnovationenterprise.com%2Fsummits%2Fmobile-innovation-summit-new-york-2017
46 | excerpt: "The Accelerated Mobile Pages (AMP) Project: What lies ahead? - Adam Greenberg"
47 | date: March 21, 2017
48 | event_time: 20170321/20170323
49 | event_time_text: Mar. 21 to Mar. 22
50 | location: New York City
51 | participant: Developers
52 |
53 | # past_events:
54 | # - type: Event
55 | # title: Teads1 brings AMP’d mobile video inventory to premium publishers
56 | # href: https://amphtml.wordpress.com/2016/12/02/teads-brings-ampd-mobile-video-inventory-to-premium-publishers/amp/
57 | # excerpt: We’ve just published updates to the AMP Roadmap. You can find it on the AMP Project website, and read a summary across...
58 | # date: October 25, 2016
59 | # event_time: 20160604T050000Z/20160604T060000Z
60 | # event_time_text: Jun.4 at 8:00PM
61 | # location: San Francisco
62 | # participant: Developers
63 | # - type: Event
64 | # title: Teads2 brings AMP’d mobile video inventory to premium publishers
65 | # href: https://amphtml.wordpress.com/2016/12/02/teads-brings-ampd-mobile-video-inventory-to-premium-publishers/amp/
66 | # excerpt: We’ve just published updates to the AMP Roadmap. You can find it on the AMP Project website, and read a summary across...
67 | # date: October 25, 2016
68 | # event_time: 20160604T050000Z/20160604T060000Z
69 | # event_time_text: Jun.4 at 8:00PM
70 | # location: San Francisco
71 | # participant: Developers
72 | # - type: Event
73 | # title: Teads3 brings AMP’d mobile video inventory to premium publishers
74 | # href: https://amphtml.wordpress.com/2016/12/02/teads-brings-ampd-mobile-video-inventory-to-premium-publishers/amp/
75 | # excerpt: We’ve just published updates to the AMP Roadmap. You can find it on the AMP Project website, and read a summary across...
76 | # date: October 25, 2016
77 | # event_time: 20160604T050000Z/20160604T060000Z
78 | # event_time_text: Jun.4 at 8:00PM
79 | # location: San Francisco
80 | # participant: Developers
81 | # - type: Event
82 | # title: Teads4 brings AMP’d mobile video inventory to premium publishers
83 | # href: https://amphtml.wordpress.com/2016/12/02/teads-brings-ampd-mobile-video-inventory-to-premium-publishers/amp/
84 | # excerpt: We’ve just published updates to the AMP Roadmap. You can find it on the AMP Project website, and read a summary across...
85 | # date: October 25, 2016
86 | # event_time: 20160604T050000Z/20160604T060000Z
87 | # event_time_text: Jun.4 at 8:00PM
88 | # location: San Francisco
89 | # participant: Developers
90 | # - type: Event
91 | # title: Teads5 brings AMP’d mobile video inventory to premium publishers
92 | # href: https://amphtml.wordpress.com/2016/12/02/teads-brings-ampd-mobile-video-inventory-to-premium-publishers/amp/
93 | # excerpt: We’ve just published updates to the AMP Roadmap. You can find it on the AMP Project website, and read a summary across...
94 | # date: October 25, 2016
95 | # event_time: 20160604T050000Z/20160604T060000Z
96 | # event_time_text: Jun.4 at 8:00PM
97 | # location: San Francisco
98 | # participant: Developers
99 | # - type: Event
100 | # title: Teads6 brings AMP’d mobile video inventory to premium publishers
101 | # href: https://amphtml.wordpress.com/2016/12/02/teads-brings-ampd-mobile-video-inventory-to-premium-publishers/amp/
102 | # excerpt: We’ve just published updates to the AMP Roadmap. You can find it on the AMP Project website, and read a summary across...
103 | # date: October 25, 2016
104 | # event_time: 20160604T050000Z/20160604T060000Z
105 | # event_time_text: Jun.4 at 8:00PM
106 | # location: San Francisco
107 | # participant: Developers
```
--------------------------------------------------------------------------------
/content/learn/case-studies/teads.md:
--------------------------------------------------------------------------------
```markdown
1 | ---
2 | $order: 6
3 | $title: Teads
4 | $date: Dec 2, 2016
5 | $category: Advertisers
6 | $parent: /content/learn/case-studies.html
7 | class: case-study post-detail
8 |
9 | components:
10 | - social-share
11 | - vimeo
12 |
13 | headline: Teads brings AMP'd mobile video inventory to nearly 100 publishers
14 | thumb: "case-studies/teads_thumb.jpg"
15 | featured: "case-studies/teads_media_framed.png"
16 | results:
17 | - stat: 15%
18 | description: Increase in average completion rates
19 | - stat: 200%
20 | description: Increase in average clickthrough rate
21 | - stat: 18%
22 | description: Increase in available inventory
23 | logo:
24 | src: "case-studies/teads_logo2.png"
25 | width: 64
26 | height: 40
27 | download: "case-studies/teads.pdf"
28 | ---
29 |
30 | #### Historically, demand for digital video has [far outstripped](https://www.emarketer.com/Article/Mobile-Video-Advertisers-Demand-More-Inventory/1013575) online publishers’ limited supply of premium in-stream video inventory. So in 2011, French startup Teads designed [a new type of video](http://teads.tv/inread-outstream#livedemo) ad that appears natively inside editorial articles, without requiring existing video content.
31 |
32 | > “We invented outstream video formats, which turn premium editorial content into new video ad inventory that can be monetized at scale.”
33 | >
34 | > ERIC SHIH, global senior vice president of business development
35 |
36 |
37 | <div class="img-right teads img-mobile">
38 | <amp-img width="840" height="1400" layout="responsive"
39 | srcset="/static/img/case-studies/teads_phone.png 881w,
40 | /static/img/case-studies/teads_phone@1_5x.png 581w,
41 | /static/img/case-studies/[email protected] 441w"
42 | src="/static/img/case-studies/teads_phone.png">
43 | </amp-img>
44 | </div>
45 |
46 |
47 | #### Achieving a better user experience, together
48 |
49 | <div class="img-right teads img-desktop">
50 | <amp-img width="840" height="1400" layout="responsive"
51 | srcset="/static/img/case-studies/teads_phone.png 881w,
52 | /static/img/case-studies/teads_phone@1_5x.png 581w,
53 | /static/img/case-studies/[email protected] 441w"
54 | src="/static/img/case-studies/teads_phone.png">
55 | </amp-img>
56 | </div>
57 |
58 | Four years later, as a global company reaching 1.2 billion unique users across hundreds of leading websites, Teads signed on as one of the first advertising partners to join the AMP Project when it launched as an open source initiative to build a better, faster mobile web for everybody.
59 |
60 | > “Our products are very much aligned with the AMP Project’s mission to provide the best user experience across platforms. We believe that ads should be fast-loading, non-intrusive, skippable, and complement the surrounding content. They’re also optimized for mobile first, since most media consumption – including 70% of our publisher traffic – is now on mobile.”
61 | >
62 | > ERIC SHIH, global senior vice president of business development
63 |
64 | The Teads team worked closely with the AMP Project’s leads, sharing their unique expertise in outstream video. They also adjusted their ad format, which was originally designed to expand into view as the user scrolled down the page and collapse away after the video ended. Because this functionality caused paragraphs to shift on the screen, it diverged from the AMP Project’s design principles. The AMP’d version of the ad would always be open, keeping the page layout consistent and creating a more seamless user experience.
65 |
66 | Results have been so positive that Teads rolled out the change to non-AMP’d pages as well. “We have since modified the behavior of our formats outside of the AMP HTML environment – on desktop, mobile web, and in-app – to be consistent with AMP HTML,” Mr. Shih says.
67 |
68 | #### Clearing clutter, encouraging engagement
69 |
70 | In the months since Teads built support for its native video ads to be served on AMP’d pages, nearly 100 of its premium publishers have also joined the AMP Project, including Trinity Mirror, The Telegraph, L’Express, Ouest-France, Público, Rodale, Mashable and The McClatchy Company.
71 |
72 | > “AMP HTML delivers our most optimal mobile browsing experience. Being able to marry this with native video advertising allows us to not only make revenue from the fastest-growing area of digital but to do so whilst respecting our users.”
73 | >
74 | > Amir Malik, programmatic director for Trinity Mirror
75 |
76 | <div class="post-video">
77 | <amp-vimeo
78 | data-videoid="163543060"
79 | layout="responsive"
80 | width="16" height="9"></amp-vimeo>
81 | </div>
82 |
83 | Across Teads’ publisher portfolio, video ads perform significantly better on AMP’d pages than on the traditional mobile web, Mr. Shih notes. “The completion rate is 15% higher, and clickthrough rates have increased by 200%,” he explains. “When there are fewer, less intrusive ads and a cleaner environment, it lends itself to more engagement.”
84 |
85 | Shih also points out that Teads’ video ads appear 18% more frequently on AMP’d pages than on non-optimized mobile pages, creating even more inventory for publishers. He attributes the uptick to faster load times and minimal ad clutter.
86 |
87 | One partner seeing success is French publisher L’Express, with AMP’d pages representing 15% of L’Express’ mobile inventory. “The AMP Project allows us to monetize our premium content with elegant native video advertising solutions such as Teads that respect our readers,” says Sophie Gohier, head of digital for L’Express. “Therefore, we believe that the revenue will grow significantly in the next quarters."
88 |
```
--------------------------------------------------------------------------------
/content/docs/get_started/live_blog.md:
--------------------------------------------------------------------------------
```markdown
1 | ---
2 | $title: Create a Live Blog
3 | $order: 3
4 | ---
5 | Live blogs are web pages that are updated frequently throughout an on-going event, such as the Super Bowl.
6 |
7 | A live blog can be implemented in AMP via the `amp-live-list` component using the LiveBlogPosting markup. To see a sample implementation that you can use as a starting point, visit the [live blog sample](https://www.ampbyexample.com/samples_templates/live_blog/) at [ampbyexample.com](https://www.ampbyexample.com).
8 |
9 | This tutorial offers a short overview of the `amp-live-list` component and focuses on some implementation details like pagination and deep linking, all using the live blog sample as an example.
10 |
11 | ## Amp-live-list overview
12 |
13 | The `amp-live-list` component regularly polls the host document for updated content and updates the end user's browser as new items become available. This means that every time a new blog post needs to be added, the host document should be updated by the CMS to include the update in both the body and the metadata section.
14 |
15 | This is how an initial blog could look like:
16 |
17 | [sourcecode:html]
18 | <amp-live-list id="my-live-list" data-poll-interval="15000" data-max-items-per-page="5">
19 | <button update on="tap:my-live-list.update">You have updates!</button>
20 | <div items></div>
21 | </amp-live-list>
22 | [/sourcecode]
23 |
24 | The `data-poll-interval` attribute allows you to specify how often polls should occur; if the host document is updated, the update should be available to the user after the next time interval.
25 |
26 | Every time a new item is added to the host document, the `<button update on="tap:my-live-list.update">` element shows a button which, when clicked, will trigger the page to show the latest posts.
27 |
28 | Live blogs could grow making the page too long, the `data-max-items-per-page` attribute allows you to specify how many items can be added to the live blog page. If the number of items after an update exceed `data-max-items-per-page`, the oldest updates exceeding this number will be removed. For instance, if the page currently has 9 items, `data-max-items-per-page` is set to 10, and 3 new items arrive in the latest update, the two oldest items will be removed from the page with the latest update.
29 |
30 | `amp-live-list` requires all the posts to be children of the tag `<div items></div>`. By referring to each post as an item, every item should have an unique `id` and a `data-sort-time`.
31 |
32 | ## Live Blog implementation details
33 |
34 | Now that you’re familiar with the `amp-live-list` component, let’s figure out how to implement a more complex live blog. Read on to learn more about how to implement pagination, and how deep linking is going to work.
35 |
36 | ##Pagination
37 |
38 | Long blogs could use pagination to improve performance by limiting the number of blog items to display on a page. To implement pagination, add the `<div pagination></div>` element within the `amp-live-list` component, then insert any markup you need for pagination (for example, a page number or a link to the next and previous page).
39 |
40 | When using pagination, the simple code we used earlier becomes:
41 |
42 | [sourcecode:html]
43 | <amp-live-list id="my-live-list" data-poll-interval="15000" data-max-items-per-page="5">
44 | <button update on="tap:my-live-list.update">You have updates!</button>
45 | <div items></div>
46 | <div pagination>
47 | <nav>
48 | <ul>
49 | <li>1</li>
50 | <li>Next</li>
51 | </ul>
52 | </nav>
53 | </div>
54 | </amp-live-list>
55 | [/sourcecode]
56 |
57 | It’s your responsibility to populate the navigation items correctly by updating the hosted page. For example, in the [live blog sample](https://www.ampbyexample.com/samples_templates/live_blog/) we render the page via a server-side template and we use a query parameter to specify what the first blog item of the page should be. We limit the size of the page to 5 items, so if the server has generated more than 5 items, when a user lands on the main page it should show the Next element in the navigation area.
58 |
59 | <amp-img src="/static/img/liveblog-pagination.png" alt="Live blog pagination" height="526" width="300"></amp-img>
60 |
61 | After the size of blog posts has exceeded the maximum number of items specified by `data-max-items-per-page`, the older blog items are displayed in the “Next” pages, for example on page 2. Given that the `amp-live-list` polls the server at intervals to see if there is any change in the items, there's no need to poll the server if the user isn't on the first page.
62 |
63 | You can add the disabled attribute to the hosted page to prevent the polling mechanism. In the live blog sample, we perform this behavior in a server-side template; when the requested page is not the first one, we add the disabled attribute to the amp-live-list component.
64 |
65 | ## Deeplinking
66 |
67 | When you publish a blog post, it’s important to be able to deep link to the post to enable features like sharing. With `amp-live-list`, deep linking is possible by simply using the id of the blog item. For example, [https://ampbyexample.com/samples_templates/live_blog/preview/#post3](https://ampbyexample.com/samples_templates/live_blog/preview/#post3) allows you to navigate directly to the blog post with id “post3”.
68 |
69 | In the [live blog sample](https://www.ampbyexample.com/samples_templates/live_blog/) we are using a technique based on a cookie to generate fresh content (see More on the Live Blog sample section for more details on that), so if it’s the first time you are landing on the page, the post with id “post3” might not be available, in that case we redirect to the first post.
```
--------------------------------------------------------------------------------
/assets/img/about/who-use-amp/publishers/nyt_logo.svg:
--------------------------------------------------------------------------------
```
1 | <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 153 20.14"><defs><style>.cls-1{fill:#1a1a1a;}</style></defs><title>nyt_logo</title><g id="Layer_2" data-name="Layer 2"><g id="Art"><path class="cls-1" d="M11.48,2.06C11.48.42,9.94-.05,8.65,0V.26c.77,0,1.37.28,1.37.79,0,.36-.26.81-1,.81a11.63,11.63,0,0,1-2.75-.67A9.85,9.85,0,0,0,3.37.5,2.75,2.75,0,0,0,.51,3.19,1.89,1.89,0,0,0,1.8,5l.12-.2A.87.87,0,0,1,1.45,4a1,1,0,0,1,1.15-.93,13.35,13.35,0,0,1,3,.71,24.73,24.73,0,0,0,3,.69V7l-1.27,1v.1L8.69,9.29v3.54a4.13,4.13,0,0,1-2.06.48A4.15,4.15,0,0,1,3.37,12l3.41-1.64V4.66L2.59,6.52a5,5,0,0,1,2.2-2.38l-.06-.2A6.28,6.28,0,0,0,0,9.71a5.84,5.84,0,0,0,5.84,5.86,5.33,5.33,0,0,0,5.46-5.42l-.2,0A5.75,5.75,0,0,1,9,12.73V9.29l1.35-1.07,0-.12L9,7V4.46a2.4,2.4,0,0,0,2.51-2.4ZM4.26,11.27l-1,.49a5,5,0,0,1-1-3.17,5.78,5.78,0,0,1,.24-1.78L4.28,6l0,5.23Zm8.81,1.84L12,13.94l.14.16.53-.38,1.86,1.7L17,13.76l-.12-.18-.65.42-.81-.81V7.49l.67-.5L17.5,8.14v5c0,3.15-.69,3.66-2.12,4.18v.22c2.36.1,4.47-.69,4.47-4.73V7.43l.75-.59-.14-.18-.65.51-2-1.76L15.4,7.19V.34h-.18l-2.95,2V2.5a1.19,1.19,0,0,1,.79,1.29v9.32Zm15.2-.89-2,1.58-2.12-1.66v-1l3.94-2.63V8.4l-2-3-4.3,2.3v5.46l-.85.65.14.18.77-.61,2.81,2,3.76-3-.16-.22Zm-4.16-1.37V6.78l.14-.1,1.82,2.87-2,1.31ZM44.19,1.31A2.34,2.34,0,0,0,44,.54h-.2c-.26.69-.57,1.07-1.39,1.07A2.22,2.22,0,0,1,40.88.86s-2.38,2.75-2.38,2.75l.2.18L39.38,3a2.8,2.8,0,0,0,2,.79v6.93L36.55,2.3A2.64,2.64,0,0,0,34.37.72a2.53,2.53,0,0,0-2.36,3h.24c.06-.51.32-1.07.89-1.07a1.45,1.45,0,0,1,1.09.83V6.22c-1.5,0-2.49.69-2.49,1.92A1.85,1.85,0,0,0,33.1,10l0-.18a.76.76,0,0,1-.28-.57c0-.46.34-.75,1-.75a2.68,2.68,0,0,1,.44,0V12.1c-1.76,0-3.13,1-3.13,2.65s1.37,2.34,2.79,2.26l0-.2c-.89-.1-1.37-.51-1.37-1.09a1.06,1.06,0,0,1,1.17-1.09,2.34,2.34,0,0,1,1.68.89l2.4-2.67-.2-.18-.61.69a4.11,4.11,0,0,0-2.47-1.27V3.77l6.71,11.7h.48V3.81a2.56,2.56,0,0,0,2.49-2.49Zm6,10.91-2,1.58L46,12.14v-1L50,8.52V8.4l-2-3-4.3,2.3v5.46l-.85.65L43,14l.77-.61,2.81,2,3.76-3-.16-.22ZM46,10.85V6.78l.14-.1L48,9.55l-2,1.31ZM63.81,6.3l-.61.46L61.61,5.41,59.77,7.07l.75.71v6.28l-2-1.29V7.67l.65-.46-1.94-1.8-1.8,1.66.75.71v6l-.26.16-1.76-1.25v-5c0-1.15-.55-1.48-1.29-1.94S52,5,52,4.44s.48-.75.71-.89a.75.75,0,0,1,0-.2,2.59,2.59,0,0,0-2.44,2.28A1.89,1.89,0,0,0,51,7.21a1.92,1.92,0,0,1,.79,1.46v4.81l-.89.69.14.18.81-.63,2.2,1.72L56.15,14l2.3,1.41,4.42-2.57V7.29l1.09-.79-.14-.2ZM79.23,1.73l-.83.75L76.54.86l-2.71,2V1h-.28l.06,13.48c-.28,0-1-.2-1.6-.3L71.95,2.9a2,2,0,0,0-2.08-2,2.42,2.42,0,0,0-2.51,2.34h.24c.08-.49.34-.93.83-.93s1,.32,1,1.43V7c-1.52.06-2.4.91-2.4,2a1.53,1.53,0,0,0,1.37,1.7l0-.2a.6.6,0,0,1-.44-.57c0-.47.46-.67,1.09-.67h.3v5.15a2.38,2.38,0,0,0-1.76,2.32,2.5,2.5,0,0,0,2.73,2.44,13.91,13.91,0,0,0,3.19-.44,15.85,15.85,0,0,1,2.38-.38c.63,0,.91.3.91.75a.79.79,0,0,1-.59.89l0,.2a2.3,2.3,0,0,0,2.16-2.3c0-1.27-1.21-2-2.55-2a17.29,17.29,0,0,0-3.09.46,16,16,0,0,1-2.67.38c-.57,0-1.29-.28-1.29-1s.57-1.25,2-1.25a11.82,11.82,0,0,1,2.59.34,13.88,13.88,0,0,0,2.77.5c1.21,0,2.3-.44,2.3-2.2V2.74l1-.83-.18-.18ZM75.83,6.85a1.39,1.39,0,0,1-1,.48,1.52,1.52,0,0,1-1-.48V3.15l.85-.57,1.15,1V6.85Zm0,2.47a1.44,1.44,0,0,0-1-.42,1.65,1.65,0,0,0-1,.42V7.15a1.66,1.66,0,0,0,1,.44,1.45,1.45,0,0,0,1-.44V9.33Zm0,3.88a1.28,1.28,0,0,1-1.33,1.33c-.14,0-.53,0-.67,0V9.63a1.56,1.56,0,0,1,1-.46,1.5,1.5,0,0,1,1,.46v3.58Zm11.36-5.9L84.5,5.39l-4,2.32v5.42l-.83.67.12.18.65-.53,2.67,2,4.12-2.51V7.31Zm-4.42,5.25V6.62l2.1,1.5v5.94l-2.1-1.5ZM95.13,5.61s-.16,0-.16,0a1.19,1.19,0,0,1-.73.34,1.31,1.31,0,0,1-.93-.45h-.16L91.74,7,90.3,5.49l-2.46,1.7.12.2L88.62,7l.85.91v5.25l-1.11.83.14.16.53-.38,2,1.7,2.59-1.72-.12-.18-.73.44-1-.87V7.25a2.15,2.15,0,0,0,1.49.85c1.11,0,1.72-1.23,1.84-2.49Zm10,8-2.83,1.86-3.84-5.8,2.71-4.22.18,0a2.18,2.18,0,0,0,1.39.65,1.46,1.46,0,0,0,1.21-.65s.16,0,.16,0A2.54,2.54,0,0,1,102,8a2.89,2.89,0,0,1-1.74-.67l-.26.38,4.16,6.16.83-.51.12.2ZM96,13.11l-1.11.83.14.16.53-.38,1.86,1.7,2.49-1.66-.14-.18-.63.42-.81-.81V.34h-.18l-3,2v.18A1.17,1.17,0,0,1,96,3.79v9.32Zm22.95-11c0-1.64-1.54-2.12-2.83-2.06V.26c.77,0,1.37.28,1.37.79,0,.36-.26.81-1,.81a11.63,11.63,0,0,1-2.75-.67A9.85,9.85,0,0,0,110.81.5,2.75,2.75,0,0,0,108,3.19,1.89,1.89,0,0,0,109.25,5l.12-.2a.87.87,0,0,1-.48-.81A1,1,0,0,1,110,3.05a13.35,13.35,0,0,1,3,.71,24.73,24.73,0,0,0,3,.69V7l-1.27,1v.1l1.27,1.11v3.54a4.69,4.69,0,0,1-5.33-.85l3.41-1.64V4.66L110,6.52a5,5,0,0,1,2.2-2.38l-.06-.2a6.28,6.28,0,0,0-4.73,5.76,5.84,5.84,0,0,0,5.84,5.86,5.33,5.33,0,0,0,5.46-5.42l-.2,0a5.75,5.75,0,0,1-2.14,2.61V9.29l1.35-1.07,0-.12L116.41,7V4.46a2.4,2.4,0,0,0,2.51-2.4Zm-7.23,9.21-1,.49a5,5,0,0,1-1-3.17A5.78,5.78,0,0,1,110,6.82L111.72,6l0,5.23Zm10.08-10-.12,0L120,2.68V2.8l1.41,1.58h.14L123.2,3l0-.1-1.41-1.6Zm2.53,12.3-.63.42-.81-.81V7.45l.79-.59-.16-.2-.61.47-1.45-1.72-2.38,1.66.14.22.59-.4.73.91v5.39l-1.07.81.12.16.55-.4L122,15.43l2.49-1.66-.14-.18Zm13.86-.1-.59.4-.89-.81V7.43l.85-.63-.14-.18-.73.55-1.9-1.76-2.46,1.74-1.88-1.74L128,7.13l-1.48-1.72-2.38,1.66.12.22.59-.4.81.89v5.39l-.65.65,1.9,1.6,1.84-1.66-.75-.71V7.43l.71-.48L130,8.14v5l-.63.65,1.92,1.6,1.8-1.66-.75-.71V7.39L133,7l1.37,1.17v4.95l-.55.57,1.94,1.76,2.55-1.74-.12-.2Zm7.23-1.27-2,1.58-2.12-1.66v-1l3.94-2.63V8.4l-2-3-4.3,2.3v5.64l2.87,2.08,3.76-3-.16-.22Zm-4.16-1.37V6.78l.14-.1,1.82,2.87-2,1.31ZM153,10.08l-1.6-1.21a4.22,4.22,0,0,0,1.48-3c0-.12,0-.34,0-.53h-.2a1.12,1.12,0,0,1-1.13.81A2,2,0,0,1,150,5.33l-3.74,2v3l1.39,1.09c-1.41,1.25-1.66,2.12-1.66,2.75a1.68,1.68,0,0,0,1.09,1.7l.1-.18a.7.7,0,0,1-.34-.63c0-.28.34-.67,1-.67a2.07,2.07,0,0,1,1.56.85s3.6-2.16,3.6-2.16V10.08Zm-.89-2.49a10.22,10.22,0,0,1-2.55,2.52l-.91-.71v-3a2.46,2.46,0,0,0,3.46,1.15Zm-1.47,6.61a2.71,2.71,0,0,0-2.38-1.6,2.93,2.93,0,0,0-1.56.4,9.28,9.28,0,0,1,2.91-2.67l1,.79V14.2Z"/></g></g></svg>
```
--------------------------------------------------------------------------------
/content/latest/blog/amp-roadmap-update-for-mid-q1-2017.md:
--------------------------------------------------------------------------------
```markdown
1 | ---
2 | class: post-blog post-detail
3 | type: Blog
4 | $title: AMP Roadmap Update for Mid-Q1 2017
5 | id: amp-roadmap-update-for-mid-q1-2017
6 | author: Eric Lindley
7 | role: Product Manager, AMP Project
8 | origin: "https://amphtml.wordpress.com/2017/02/18/amp-roadmap-update-for-mid-q1-2017/amp/"
9 | excerpt: "We’ve updated the AMP Roadmap with the details on progress during the first quarter of 2017, and you can read below for some of the highlights. Format Interactivity is a major focus for us this quarter as we build out the AMP format’s capabilities. amp-bind is a binding protocol that introduces lower-level methods for building […]"
10 | avatar: http://0.gravatar.com/avatar/0342fb9db5636638e886dff44d5ec94c?s=96&d=identicon&r=G
11 | date_data: 2017-02-17T16:09:17-08:00
12 | $date: February 17, 2017
13 | $parent: /content/latest/list-blog.html
14 |
15 | components:
16 | - social-share
17 | ---
18 |
19 | <div class="amp-wp-article-content">
20 | <p><strong>We’ve updated the </strong><a href="https://www.ampproject.org/roadmap/"><strong>AMP Roadmap</strong></a><strong> with the details on progress during the first quarter of 2017, and you can read below for some of the highlights.</strong></p>
21 | <h2><strong>Format</strong></h2>
22 | <p><strong>Interactivity is a major focus for us this quarter as we build out the AMP format’s capabilities. </strong><a href="https://www.ampproject.org/docs/reference/components/amp-bind">amp-bind</a> <a href="https://github.com/ampproject/amphtml/blob/f33b581021772c5ef1513620398db6d6b3446d91/extensions/amp-bind/amp-bind.md"><strong>i</strong></a><strong>s a binding protocol that introduces lower-level methods for building interactive experiences. We’ve also launched two new features that enhance interactivity in their own right. </strong><a href="https://www.ampproject.org/pl/docs/reference/components/amp-selector"><strong>amp-selector</strong></a><strong> makes it easy to use image thumbnails as form inputs, and </strong><a href="https://github.com/ampproject/amphtml/blob/master/extensions/amp-carousel/amp-carousel.md#advancing-amp-carouseltypeslides-to-a-specific-slide"><strong>the goToSlide method</strong></a><strong> supports new interactivity for amp-carousel, including </strong><a href="https://ampbyexample.com/advanced/image_galleries_with_amp-carousel/#image-galleries-with-previews"><strong>galleries linked with image previews</strong></a><strong>.</strong></p>
23 | <p><strong>Another large focus is </strong><a href="https://github.com/ampproject/amphtml/issues/2851"><strong>AMP Start</strong></a><strong>, a set of quick-start code snippets that developers can copy and paste to quickly create and customize valid AMPs.</strong></p>
24 | <h2><strong>Ads</strong></h2>
25 | <p><strong>We introduced usability features with ads served to AMP pages. This includes an improvement to the </strong><a href="https://amphtml.wordpress.com/2017/02/02/new-default-placeholders-for-ads-in-amp/"><strong>default ad loading experience</strong></a><strong> where AMP will, by default, clearly indicate the location of ads and add a subtle indicator when the ad is loading. Through this launch, we hope to eliminate the experience of seeing large blank spaces before a slow loading ad has loaded. We’ve also made some </strong><a href="https://github.com/ampproject/amphtml/issues/5432"><strong>UX improvements to sticky ads</strong></a><strong> that are gradually rolling out.</strong></p>
26 | <p><strong>We’ve worked with Cloudflare and TripleLift to create and deliver AMP ads (ad creatives made in AMP format) that are </strong><a href="https://amphtml.wordpress.com/2017/01/30/ads-on-the-web-will-get-better-with-amp-heres-how/"><strong>safe, beautiful and performant ads</strong></a><strong>. This paves the path for any ad network wanting to serve their own AMP ads to the publisher directly.</strong></p>
27 | <h2><strong>Analytics</strong></h2>
28 | <p><strong>Soon you will be able to programmatically substitute values, including the Client ID, into </strong><a href="https://github.com/ampproject/amphtml/blob/master/spec/amp-var-substitutions.md#overview"><strong>links (anchor tags)</strong></a><strong> and </strong><a href="https://www.ampproject.org/docs/reference/components/amp-form#variable-substitutions"><strong>form inputs</strong></a><strong>. We expect this to make it possible to build add-to-shopping cart flows, and to make scenarios involving multi-page flows and analytics data collection work better.</strong></p>
29 | <p><strong>We’ve been thinking about ways to improve and extend amp-analytics infrastructure. We’re designing a way for extensions to </strong><a href="https://github.com/ampproject/amphtml/issues/6417"><strong>take advantage of amp-analytics to report data to extension authors</strong></a><strong>. This will provide extension authors with greater visibility into how their extensions are performing so they can spot issues and optimize behavior. We’re also close to completing an improvement to amp-analytics’s </strong><a href="https://github.com/ampproject/amphtml/issues/5697"><strong>visibility features to use Intersection Observer</strong></a><strong>.</strong></p>
30 | <p><strong>Finally, in order to help AMP page developers understand the kinds of errors or issues that their users are encountering, we’re planning to introduce an </strong><a href="https://github.com/ampproject/amphtml/issues/6415"><strong>analytics trigger that will send error events</strong></a><strong>. </strong></p>
31 | <p><strong>* * *</strong></p>
32 | <p><strong>Thanks to the AMP development community for your work and feedback. As always, please </strong><a href="https://groups.google.com/forum/#!forum/amphtml-discuss"><strong>let us know</strong></a><strong> if you have any issues or feature requests.</strong></p>
33 | <p></p><br />
34 | </div>
35 |
36 |
```
--------------------------------------------------------------------------------
/content/support/faqs/[email protected]:
--------------------------------------------------------------------------------
```markdown
1 | ---
2 | $title@: Ringkasan Accelerated Mobile Pages
3 |
4 | cta:
5 | title@: Next FAQ
6 | link_text@: Keterlibatan Platform dan Perusahaan Teknologi
7 | link_url: /content/support/faqs/platform-involvement.md
8 |
9 | faq:
10 | - title@: Apa itu proyek Accelerated Mobile Pages?
11 | answer@: |
12 | Proyek Accelerated Mobile Pages (“AMP”) adalah inisiatif sumber terbuka yang merupakan hasil diskusi penerbit dan perusahaan teknologi tentang kebutuhan untuk meningkatkan seluruh ekosistem konten seluler untuk semua orang -- penerbit, platform pelanggan, pembuat, dan pengguna.
13 |
14 | Saat ini, harapannya adalah konten tersebut harus dimuat dengan sangat cepat dan mudah dijelajahi. Kenyataannya, konten tersebut memerlukan beberapa detik untuk dimuat, atau, karena pengguna meninggalkan laman yang lambat untuk dimuat, konten tidak pernah dimuat penuh. Accelerated Mobile Pages adalah laman web yang dirancang untuk dimuat hampir secara instan -- sebuah langkah untuk membuat web seluler menjadi lebih baik.
15 | - title@: Apa manfaat Accelerated Mobile Pages?
16 | answer@: |
17 | Kecepatan sangatlah penting dan dimuat secara instan adalah idealnya. Penelitian menunjukkan bahwa rasio pentalan yang lebih tinggi terkait dengan laman web yang dimuat lebih lambat. Menggunakan format AMP akan membuatnya jauh lebih menarik bagi pengguna untuk melihat dan terlibat dengan lebih banyak konten. Tetapi ini bukan hanya tentang kecepatan dan kinerja. Kami juga ingin mempromosikan distribusi yang disempurnakan sehingga penerbit dapat mengambil keuntungan dari potensi web terbuka agar konten mereka muncul di mana saja dengan cepat -- pada platform dan aplikasi -- yang dapat menghasilkan lebih banyak pendapatan lewat iklan dan langganan.
18 | - title@: Bagaimana Accelerated Mobile Pages bekerja?
19 | answer@: |
20 | Accelerated Mobile Pages sama seperti laman HTML lainnya, tetapi dengan fungsi teknis diizinkan yang terbatas yang ditetapkan dan diatur oleh spek AMP sumber terbuka. Sama seperti semua laman web, Accelerated Mobile Pages akan akan dimuat di browser modern atau webview aplikasi apa pun.
21 |
22 | File AMP memanfaatkan berbagai pendekatan teknis dan arsitektur yang memprioritaskan kecepatan untuk memberikan pengalaman yang lebih cepat bagi pengguna. Pengembang AMP dapat menggunakan pustaka komponen web yang kaya dan berkembang yang menawarkan kemampuan untuk menyematkan multimedia seperti video dan pos sosial, menampilkan iklan, atau mengumpulkan analisis. Tujuannya bukan untuk menyeragamkan tampilan dan nuansa konten, tetapi untuk membangun inti teknis yang lebih umum di antara laman yang mempercepat waktu muat.
23 |
24 | Selain itu, file AMP dapat disimpan dalam cloud untuk mengurangi waktu muat konten bagi pengguna perangkat seluler. Dengan menggunakan format AMP, pembuat konten membuat konten dalam file AMP yang dapat disimpan dalam cache oleh pihak ketiga. Pada jenis framework ini, penerbit terus mengontrol konten mereka, tetapi platform dapat menyimpan dalam cache atau mencerminkan konten dengan mudah untuk kecepatan penayangan yang optimal bagi pengguna. Google memberikan cache yang dapat digunakan gratis oleh siapa pun, dan semua AMP akan disimpan dalam cache oleh [Cache AMP Google](https://developers.google.com/amp/cache/). Perusahaan lain juga dapat membuat cache AMP mereka sendiri.
25 |
26 | Singkatnya, tujuannya adalah kombinasi fungsi teknis terbatas dengan sistem distribusi yang dibuat dengan penyimpanan dalam cache akan menghasilkan laman yang kinerjanya lebih baik, dan meningkatkan pengembangan audiens untuk penerbit.
27 | - title@: Mengapa Proyek Accelerated Mobile Pages Project melakukan pendekatan sumber terbuka?
28 | answer@: |
29 | Perusahaan yang terlibat dalam proyek ingin membuat web seluler bekerja lebih baik untuk semua -- tidak hanya pada satu platform, satu perusahaan teknologi, atau sekumpulan penerbit. Membuat proyek sumber terbuka memungkinkan orang-orang untuk berkontribusi dan berbagi ide-ide dan kode mereka untuk mempercepat web seluler. Kami masih berada di awal perjalanan ini dan berharap perusahaan teknologi dan penerbit lainnya bergabung bersama kami.
30 | - title@: Siapa yang dapat menggunakan Accelerated Mobile Pages?
31 | answer@: |
32 | Proyek ini terbuka untuk semua pemeran dalam ekosistem - penerbit, pelanggan platform, dan pembuat. Untuk mengetahui perusahaan dan situs apa saja yang menggunakan AMP, kunjungi [laman Siapa](/who).
33 | - title@: Apa konsekuensi penggunaan Accelerated Mobile Pages?
34 | answer@: |
35 | Dengan menggunakan format AMP, pembuat konten membuat konten dalam file AMP yang dapat dirayapi, diindeks & ditampilkan (tunduk pada protokol pengecualian robot), dan disimpan dalam cache oleh pihak ketiga.
36 | - title@: Jenis konten apa yang dapat berfungsi paling baik menggunakan Accelerated Mobile Pages?
37 | answer@: |
38 | Tujuan proyek ini adalah untuk semua konten yang diterbitkan, dari berita hingga video dan dari blog hingga fotografi dan GIF, agar berfungsi menggunakan Accelerated Mobile Pages.
39 | - title@: Sebagai penerbit, apakah memerlukan lebih banyak usaha untuk membuat konten saya berfungsi pada Accelerated Mobile Pages?
40 | answer@: |
41 | Singkatnya, tidak banyak. Karena “HTML AMP” secara keseluruhan dibuat dari teknologi web yang sudah ada, proses pengembangannya mencerminkan bahwa penerbit sudah menggunakannya saat ini. Penerbit dapat membiasakan diri dengan spesifikasi HTML AMP di GitHub. Bagi mereka yang terbiasa dengan proses saat ini, kami tidak mengharapkan kurva pembelajaran yang signifikan.
42 | - title@: Bagaimana cara penerbit mengubah konten menjadi HTML AMP?
43 | answer@: |
44 | Penerbit dan penyedia Sistem Manajemen Konten (CMS) dapat mengembangkan integrasi dengan CMS mereka untuk membuat konten AMP. Automattic sudah menerbitkan [plugin AMP WordPress](https://wordpress.org/plugins/amp/) dan kami berharap semua sistem manajemen konten akan menambah dukungan untuk laman HTML AMP.
45 | ---
46 |
```
