This is page 15 of 24. Use http://codebase.md/cloudflare/docs/imgs/%7B%7Bg.url(parentDoc.pod_path,%20locale=usedDoc.locale).path%7D%7D?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/[email protected]:
--------------------------------------------------------------------------------
```markdown
1 | ---
2 | $title: Diseños compatibles
3 | ---
4 |
5 | Convierte tus elementos en adaptables
6 | con `layout=responsive`.
7 |
8 | [TOC]
9 |
10 | ## Valores compatibles con el atributo de diseño
11 |
12 | De forma predeterminada,
13 | utiliza diseños adaptables.
14 |
15 | Lista completa de los valores compatibles con el atributo de diseño:
16 |
17 | <table>
18 | <thead>
19 | <tr>
20 | <th class="col-twenty" data-th="Layout type">Tipo de diseño</th>
21 | <th class="col-twenty" data-th="Width/height required">Anchura/altura requerida</th>
22 | <th data-th="Behavior">Comportamiento</th>
23 | </tr>
24 | </thead>
25 | <tbody>
26 | <tr>
27 | <td class="col-twenty" data-th="Layout type">`nodisplay`</td>
28 | <td class="col-twenty" data-th="Description">No</td>
29 | <td data-th="Behavior">El elemento no se muestra. Este diseño se puede aplicar a todos los elementos de AMP. El componente no ocupa espacio en la pantalla, como si su estilo de visualización tuviera como valor "none". Se supone que el elemento puede mostrarse con una acción del usuario, por ejemplo, <a href="/docs/reference/extended/amp-lightbox.html">`amp-lightbox`</a>.</td>
30 | </tr>
31 | <tr>
32 | <td class="col-twenty" data-th="Layout type">`fixed`</td>
33 | <td class="col-twenty" data-th="Description">Sí</td>
34 | <td data-th="Behavior">El elemento tiene una anchura y una altura fijas y no es compatible con la adaptabilidad. Las únicas excepciones son los elementos <a href="/docs/reference/amp-pixel.html">`amp-pixel`</a> y <a href="/docs/reference/extended/amp-audio.html">`amp-audio`</a>.</td>
35 | </tr>
36 | <tr>
37 | <td class="col-twenty" data-th="Layout type">`responsive`</td>
38 | <td class="col-twenty" data-th="Description">Sí</td>
39 | <td data-th="Behavior">El tamaño del elemento depende de la anchura de su elemento contenedor y la altura se modifica de tamaño automáticamente en función de la relación de aspecto determinada por los atributos de anchura y altura. Este diseño funciona muy bien para la mayoría de los elementos de AMP, incluidos <a href="/docs/reference/amp-img.html">`amp-img`</a> y <a href="/docs/reference/amp-video.html">`amp-video`</a>. El espacio disponible depende del elemento principal y también se puede personalizar usando el elemento CSS `max-width`.</td>
40 | </tr>
41 | <tr>
42 | <td class="col-twenty" data-th="Layout type">`fixed-height`</td>
43 | <td class="col-twenty" data-th="Description">Solo altura</td>
44 | <td data-th="Behavior">El elemento toma el espacio disponible, pero no modifica la altura. Este diseño funciona bien para elementos como <a href="/docs/reference/extended/amp-carousel.html">`amp-carousel`</a>, que implica contenido en posición horizontal. El atributo `width` no debe estar presente o debe ser igual a `auto`.</td>
45 | </tr>
46 | <tr>
47 | <td class="col-twenty" data-th="Layout type">`fill`</td>
48 | <td class="col-twenty" data-th="Description">No</td>
49 | <td data-th="Behavior">El elemento toma el espacio disponible, tanto en anchura como en altura. En otras palabras, el diseño de un elemento de relleno coincide con el elemento principal.</td>
50 | </tr>
51 | <tr>
52 | <td class="col-twenty" data-th="Layout type">`container`</td>
53 | <td class="col-twenty" data-th="Description">No</td>
54 | <td data-th="Behavior">El elemento permite que los elementos secundarios definan su tamaño, igual que un HTML `div` normal. Se supone que el componente no tiene un diseño específico propio, sino que simplemente actúa como contenedor. Los elementos secundarios se procesan inmediatamente.</td>
55 | </tr>
56 | </tbody>
57 | </table>
58 |
59 | ### ¿Qué ocurre si la altura y la anchura no están definidas?
60 |
61 | En algunos casos, si los atributos `width` o `height` no están especificados,
62 | el tiempo de ejecución de AMP puede ofrecer estos valores de forma predeterminada del siguiente modo:
63 |
64 | * [`amp-pixel`](/docs/reference/amp-pixel.html): tanto la anchura como la altura tienen 0 como valor predeterminado.
65 | * [`amp-audio`](/docs/reference/extended/amp-audio.html): el navegador infiere la anchura y la altura predeterminadas.
66 |
67 | ### ¿Qué ocurre si el atributo de diseño no está definido?
68 |
69 | El comportamiento de diseño se determina del siguiente modo:
70 |
71 | * Si `height` está presente y `width` está ausente o es igual a `auto`, se asume que el diseño es `fixed-height`.
72 | * Si los atributos `width` o `height` están presentes junto con el atributo `sizes`, se asume que el diseño es `responsive`.
73 | * Si los atributos `width` o `height` están presentes, se asume que el diseño es `fixed`.
74 | * Si `width` y `height` no están presentes, se asume que el diseño es `container`.
75 |
76 | ## Utilizar @media y media
77 |
78 | Utiliza a [`@media`](https://developer.mozilla.org/en-US/docs/Web/CSS/@media) para controlar el aspecto y el comportamiento del diseño de la página del mismo modo que lo harías con cualquier otro sitio web.
79 | Cuando la ventana del navegador cambia de tamaño o de orientación,
80 | las consultas de los medios se vuelven a evaluar y los elementos se ocultan y se muestran en función de los nuevos resultados.
81 |
82 | Obtén más información sobre cómo controlar el diseño con consultas de medios en [Usar consultas de medios en CSS para una mayor adaptabilidad](https://developers.google.com/web/fundamentals/design-and-ui/responsive/fundamentals/use-media-queries?hl=es).
83 |
84 | Una función adicional para el diseño adaptable disponible en AMP es el atributo `media`.
85 | Este atributo se puede utilizar en todos los elementos de AMP;
86 | funciona de forma similar a las consultas de medios en la hoja de estilo global,
87 | pero solamente influye en el elemento específico de una única página.
88 |
89 | Por ejemplo, aquí tenemos dos imágenes con consultas de medios que se excluyen mutuamente.
90 |
91 | [sourcecode:html]
92 | <amp-img
93 | media="(min-width: 650px)"
94 | src="wide.jpg"
95 | width=466
96 | height=355
97 | layout="responsive" >
98 | </amp-img>
99 | [/sourcecode]
100 |
101 | En función de la anchura de la pantalla, se elegirá y procesará una de ellas.
102 |
103 | [sourcecode:html]
104 | <amp-img
105 | media="(max-width: 649px)"
106 | src="narrow.jpg"
107 | width=527
108 | height=193
109 | layout="responsive" >
110 | </amp-img>
111 | [/sourcecode]
112 |
113 | ## Usar los atributos srcset y sizes
114 |
115 | Usa el atributo `srcset` para controlar los recursos de un elemento
116 | en función de las diferentes expresiones de medios.
117 | En particular, úsalo para especificar en todas las etiquetas [`amp-img`](/docs/reference/amp-img.html) qué recursos de imagen se deben utilizar en función de los diferentes tamaños de pantalla.
118 |
119 | En este sencillo ejemplo,
120 | `srcset` especifica qué imagen hay que utilizar en función de la anchura de la pantalla.
121 | El descriptor `w` indica al navegador la anchura
122 | de cada una de las imágenes de la lista:
123 |
124 | [sourcecode:html]
125 | <amp-img
126 | src="wide.jpg"
127 | srcset="wide.jpg" 640w,
128 | "narrow.jpg" 320w >
129 | </amp-img>
130 | [/sourcecode]
131 |
132 | **Nota:** AMP es compatible con el descriptor `w` en todos los navegadores.
133 |
134 | Obtén más información sobre cómo crear imágenes adaptables con `srcset`
135 | en [Using Responsive Images (Now)](http://alistapart.com/article/using-responsive-images-now).
136 |
137 | También puedes utilizar el atributo `sizes` junto con `srcset`.
138 | El atributo `sizes` describe cómo calcular el tamaño del elemento en función de cualquier expresión de medios.
139 | A partir del tamaño del elemento calculado, el agente de usuario selecciona la fuente más pertinente suministrada por el atributo `srcset`.
140 |
141 | Consideremos el siguiente ejemplo:
142 |
143 | [sourcecode:html]
144 | <amp-img
145 | src="wide.jpg"
146 | srcset="wide.jpg" 640w,
147 | "narrow.jpg" 320w
148 | sizes="(min-width: 650px) 50vw, 100vw" >
149 | </amp-img>
150 | [/sourcecode]
151 |
152 | El atributo `sizes` define la anchura del elemento como el 50% del tamaño de la ventana gráfica cuando esta es de 650 píxeles o más.
153 | Por ejemplo, si la ventana gráfica es de 800 píxeles, la anchura del elemento se establece en 400 píxeles.
154 | El navegador selecciona el recurso `srcset` relativo a 400 píxeles,
155 | suponiendo que la proporción de píxeles del dispositivo es 1,
156 | que, en este caso, es `narrow.jpg` (320px).
157 |
158 | **Importante:** Cuando el atributo sizes se especifica junto con la anchura y la altura, el diseño pasa a `responsive` de forma predeterminada.
159 |
160 | Obtén más información sobre las similitudes y las diferencias entre los atributos `sizes` y `srcset` y las consultas de medios en la entrada de blog [Srcset and sizes](https://ericportis.com/posts/2014/srcset-sizes/).
161 |
162 | ## Incluir los atributos placeholder y fallback
163 |
164 | ### placeholder
165 |
166 | El elemento marcado con el atributo `placeholder` actúa como marcador de posición para el elemento AMP superior.
167 | Si se especifica, un elemento `placeholder` debe ser un elemento secundario directo del elemento AMP.
168 |
169 | [sourcecode:html]
170 | <amp-anim src="animated.gif" width=466 height=355 layout="responsive" >
171 | <amp-img placeholder src="preview.png" layout="fill"></amp-img>
172 | </amp-anim>
173 | [/sourcecode]
174 |
175 | De forma predeterminada, el marcador de posición se muestra inmediatamente para el elemento AMP, incluso si no se han descargado o inicializado los recursos del elemento AMP.
176 | Una vez listo, el elemento AMP normalmente oculta su marcador de posición y muestra el contenido.
177 |
178 | **Nota:** El marcador de posición no tiene que ser un elemento AMP; cualquier elemento HTML puede actuar como marcador de posición.
179 |
180 | ### fallback
181 |
182 | Utiliza el atributo `fallback` para indicar el comportamiento de respaldo
183 | de cualquier elemento que no sea compatible con el navegador.
184 | Por ejemplo, utiliza el atributo `fallback` para comunicar al usuario
185 | que el navegador no es compatible con una característica concreta:
186 |
187 | [sourcecode:html]
188 | <amp-video width=400 height=300 src="https://yourhost.com/videos/myvideo.mp4"
189 | poster="myvideo-poster.jpg" >
190 | <div fallback>
191 | <p>Your browser doesn’t support HTML5 video.</p>
192 | </div>
193 | </amp-video>
194 | [/sourcecode]
195 |
196 | El atributo `fallback` se puede establecer en cualquier elemento HTML, no solo en los elementos AMP.
197 | Si se especifica, el elemento `fallback` debe ser un elemento secundario directo del elemento AMP.
198 |
199 | ### noloading
200 |
201 | Muchos elementos AMP están incluidos en la lista blanca para mostrar un "indicador de carga", que es una animación básica que muestra que el elemento aún no se ha cargado completamente.
202 | Los elementos pueden excluirse de este comportamiento añadiendo el atributo `noloading`.
203 |
```
--------------------------------------------------------------------------------
/content/docs/guides/debug/[email protected]:
--------------------------------------------------------------------------------
```markdown
1 | ---
2 | $title: Weryfikacja stron AMP
3 | ---
4 |
5 | Główną zaletą AMP nie jest to, że dzięki niemu strony działają szybciej, tylko to, że tę szybkość uzyskujemy za pomocą standardu, który można *weryfikować*. W ten sposób serwisy takie jak Twitter, Instagram czy wyszukiwarka Google, mogą w coraz bardziej interesujący sposób oferować użytkownikom swoje treści.
6 |
7 | ## Jak mogę sprawdzić, czy moja strona AMP jest prawidłowa?
8 |
9 | Dokument AMP można sprawdzić na kilka sposobów. Każdy z nich da ten sam efekt, możesz więc korzystać z tego, który najbardziej Ci odpowiada.
10 |
11 | Poza przeprowadzeniem weryfikacji AMP warto też upewnić się, czy Twój dokument AMP jest [wykrywalny](/docs/guides/discovery.html) na platformach zewnętrznych.
12 |
13 | ### Developer Console w przeglądarce
14 |
15 | Narzędzie do weryfikacji stron AMP jest dołączane do biblioteki AMP JS, jest więc dostępne na każdej stronie AMP. Aby przeprowadzić weryfikację:
16 |
17 | * Otwórz stronę AMP w przeglądarce.
18 | * Dołącz do adresu URL atrybut „`#development=1`”, na przykład `http://localhost:8000/released.amp.html#development=1`
19 | * Otwórz [konsolę Chrome DevTools](https://developers.google.com/web/tools/chrome-devtools/debug/console/) i sprawdź błędy weryfikacji.
20 |
21 | Błędy Developer Console będą wyglądać mniej więcej tak:
22 |
23 | <amp-img src="/static/img/docs/validator_errors.png" width="713" height="243" alt="Zrzut ekranu narzędzia do weryfikacji stron AMP w konsoli chrome" layout="responsive"></amp-img>
24 |
25 |
26 | ### Interfejs internetowy
27 |
28 | Narzędzia do weryfikacji stron AMP można użyć w postaci interfejsu internetowego
29 | na stronie [validator.ampproject.org](https://validator.ampproject.org/). Interfejs ten pokazuje błędy wyświetlone w tekście obok źródła HTML strony.
30 | Jest to edytor interaktywny: zmiany w źródle html powodują automatyczną, ponowną weryfikację.
31 |
32 | <amp-img src="/static/img/docs/validator_web_ui.png" width="660" height="507" alt="Zrzut ekranu ze strony validator.ampproject.org z przykładami błędów." layout="responsive"></amp-img>
33 |
34 |
35 | ### Rozszerzenie do przeglądarki
36 |
37 | Narzędzie do weryfikacji stron AMP można otworzyć bezpośrednio z przeglądarki za pomocą odpowiedniego rozszerzenia. Podczas przeglądania rozszerzenie automatycznie zweryfikuje każdą odwiedzoną stronę AMP, wyświetlając informacje weryfikacyjne za pomocą kolorowych ikon.
38 |
39 | <table>
40 | <tr>
41 | <td>
42 | <amp-img src="/static/img/docs/validator_icon_invalid.png" width="20" height="20" alt="Czerwona ikona AMP informująca o nieprawidłowym dokumencie AMP." layout="fixed"></amp-img>
43 |
44 | </td>
45 | <td>W przypadku wykrycia błędów na stronach AMP pojawi się czerwona ikona rozszerzenia pokazująca liczbę znalezionych błędów.
46 | </td>
47 | </tr>
48 | <tr>
49 | <td>
50 | <amp-img src="/static/img/docs/validator_icon_valid.png" width="20" height="20" alt="Zielona ikona wskazująca poprawny dokument AMP." layout="fixed"></amp-img>
51 |
52 | </td>
53 | <td>Gdy rozszerzenie nie wykryje błędów na stronie AMP, ikona będzie zielona i wyświetli liczbę ostrzeżeń, jeśli jakieś będą.
54 | </td>
55 | </tr>
56 | <tr>
57 | <td>
58 | <amp-img src="/static/img/docs/validator_icon_link.png" width="20" height="20" alt="Niebieska ikona wskazująca po kliknięciu wariant AMP HTML." layout="fixed"></amp-img>
59 |
60 | </td>
61 | <td>Gdy strona nie jest stroną AMP, ale wyświetla informację o dostępnej wersji AMP, ikona ma postać linku w kolorze niebieskim. Kliknięcie rozszerzenia spowoduje przekierowanie przeglądarki do wersji AMP.
62 | </td>
63 | </tr>
64 | </table>
65 |
66 | Rozszerzenie narzędzia do weryfikacji stron AMP do przeglądarek [Chrome](https://chrome.google.com/webstore/detail/amp-validator/nmoffdblmcmgeicmolmhobpoocbbmknc) i [Opera](https://addons.opera.com/en-gb/extensions/details/amp-validator/).
67 |
68 | ### Narzędzie wiersza poleceń
69 |
70 | Warunkiem wstępnym może być konieczność [zainstalowania w systemie platformy Node.js z menedżerem pakietów `npm`](https://docs.npmjs.com/getting-started/installing-node).
71 |
72 | Aby zainstalować [narzędzie wiersza poleceń weryfikatora stron AMP HTML](https://www.npmjs.com/package/amphtml-validator), wpisz `npm install -g amphtml-validator`.
73 |
74 | A teraz zweryfikujemy istniejącą stronę AMP HTML.
75 |
76 | [sourcecode:console]
77 | $ amphtml-validator https://www.ampproject.org/
78 | https://www.ampproject.org/: PASS
79 | [/sourcecode]
80 |
81 | Jak można się było spodziewać, ta strona zawiera prawidłowy kod AMP HTML. Sprawdźmy zatem stronę z błędami:
82 | [several_errors.html](https://raw.githubusercontent.com/ampproject/amphtml/master/validator/testdata/feature_tests/several_errors.html). Aby uruchomić polecenie `amphtml-validator`, można podać adres URL strony albo ścieżkę do pliku zapisanego lokalnie. Pobierz i zapisz do pliku stronę [several_errors.html](https://raw.githubusercontent.com/ampproject/amphtml/master/validator/testdata/feature_tests/several_errors.html), i uruchom:
83 |
84 | [sourcecode:console]
85 | $ amphtml-validator several_errors.html
86 | several_errors.html:23:2 The attribute 'charset' may not appear in tag 'meta name= and content='.
87 | several_errors.html:26:2 The tag 'script' is disallowed except in specific forms.
88 | several_errors.html:32:2 The mandatory attribute 'height' is missing in tag 'amp-img'. (see https://www.ampproject.org/docs/reference/amp-img.html)
89 | several_errors.html:34:2 The attribute 'width' in tag 'amp-ad' is set to the invalid value '100%'. (see https://www.ampproject.org/docs/reference/amp-ad.html)
90 | ...
91 | [/sourcecode]
92 |
93 | Format komunikatów o błędach składa się z nazwy pliku, linii, kolumny i komunikatu, po którym często następuje link do materiałów o AMP HTML. Niektóre edytory, np. Emacs (poszukaj polecenia kompilacji oraz trybu kompilacji), mogą interpretować ten format i umożliwić Ci przechodzenie bezpośrednio do błędów w pliku oryginalnym.
94 |
95 | Dobrym punktem początkowym w tworzeniu własnej strony AMP jest [minimum_valid_amp.html](https://raw.githubusercontent.com/ampproject/amphtml/master/validator/testdata/feature_tests/minimum_valid_amp.html):
96 |
97 | [sourcecode:console]
98 | $ amphtml-validator minimum_valid_amp.html
99 | minimum_valid_amp.html: PASS
100 | [/sourcecode]
101 |
102 | Narzędzie wiersza polecenia oferuje dodatkowe funkcje, w tym wyłączanie koloru, wydruk składni JSON czy uruchamianie określonej wersji weryfikatora JavaScriptu (domyślnie uruchamiany jest ostatnio opublikowany skrypt).
103 |
104 | [sourcecode:console]
105 | $ amphtml-validator --help
106 |
107 | Usage: index [options] <fileOrUrlOrMinus...>
108 |
109 | Validates the files or urls provided as arguments. If "-" is
110 | specified, reads from stdin instead.
111 |
112 | Options:
113 |
114 | -h, --help output usage information
115 | -V, --version output the version number
116 | --validator_js <fileOrUrl> The Validator Javascript.
117 | Latest published version by default, or
118 | dist/validator_minified.js (built with build.py)
119 | for development.
120 | --format <color|text|json> How to format the output.
121 | "color" displays errors/warnings/success in
122 | red/orange/green.
123 | "text" avoids color (e.g., useful in terminals not
124 | supporting color).
125 | "json" emits json corresponding to the ValidationResult
126 | message in validator.proto.
127 | [/sourcecode]
128 |
129 | ## Co się stanie, jeśli moja strona okaże się nieprawidłowa?
130 |
131 | Narzędzie do weryfikacji stron AMP ułatwia nie tylko tworzenie kodu. Korzystają z niego również platformy takie jak Twitter czy Google, integrujące Twoje strony AMP we własnych treściach i wynikach wyszukiwania. Co więcej, takie platformy zwykle nie żądają stron bezpośrednio z Twojego serwera, tylko korzystają z pamięci podręcznej Google AMP Cache – darmowej usługi przechowującej Twoje strony w pamięci podręcznej – co umożliwia jeszcze szybsze wczytywanie ich w dowolnym miejscu świata.
132 |
133 | Jeśli usługa weryfikacji AMP znajdzie jakąś nieprawidłowość na Twojej stronie, nie zostanie ona wykryta przez witryny firm zewnętrznych i nie będzie przez nie rozpowszechniana. Nie pojawi się również w pamięci podręcznej Google AMP Cache. W takim przypadku nie tylko utracisz korzyści płynące z korzystania z pamięci podręcznej. Prawdopodobnie Twoja strona nie wyświetli się w wielu miejscach. Byłaby to wielka szkoda, dopilnujmy więc, by tak się nie stało.
134 |
135 | ## Jak naprawić błędy wynikające ze sprawdzania poprawności kodu?
136 |
137 | Większość błędów zgłoszonych w ramach weryfikacji można łatwo naprawić. Weźmy na przykład ten tag HTML:
138 |
139 | [sourcecode:html]
140 | <img src="cat.png">
141 | [/sourcecode]
142 |
143 | Generuje on błąd weryfikacji AMP zgłaszany przez narzędzia:
144 |
145 | * Developer Console w przeglądarce
146 | <amp-img alt="Błąd AMP: tag „img” może się pojawiać tylko jako element podrzędny tagu „noscript”.Czy chodziło Ci o „amp-img”?linia 11, kolumna 2" height="30" src="/static/img/docs/validator_console_imgerror.png" width="696" layout="responsive"></amp-img>
147 |
148 | * Interfejs internetowy
149 | <amp-img alt="Błąd AMP: tag „img” może się pojawiać tylko jako element podrzędny tagu „noscript”.Czy chodziło Ci o „amp-img”?linia 11, kolumna 2" height="58" src="/static/img/docs/validator_webui_imgerror.png" width="676" layout="responsive"></amp-img>
150 |
151 | * Rozszerzenie do przeglądarki
152 | <amp-img alt="Błąd AMP: tag „img” może się pojawiać tylko jako element podrzędny tagu „noscript”.Czy chodziło Ci o „amp-img”?linia 11, kolumna 2" height="108" src="/static/img/docs/validator_extension_imgerror.png" width="724" layout="responsive"></amp-img>
153 |
154 | Każde z tych narzędzi podaje kilka informacji:
155 |
156 | 1. Lokalizacja (linia i kolumna) w dokumencie HTML, w której wystąpił
157 | błąd. W niektórych interfejsach tę informację można kliknąć, by ją podświetlić w dokumencie. W tym przypadku problem pojawił się w linii 11, w kolumnie 2</li>
158 | 1. Linia tekstu opisującego błąd. W tym przypadku tekst wskazuje, że
159 | używamy tagu `<img>`, a powinniśmy używać tagu `<amp-img>`.</li>
160 | 1. Link do odpowiedniego dokumentu z informacjami o błędzie. W tym przypadku dokumentacja dotyczy tagu `<amp-img>`. Nie wszystkie błędy generują linki do dokumentacji.
161 |
162 | Czytając uważnie specyfikację, zauważamy, że w kodzie znajduje się tag `<img>` zamiast tagu `<amp-img>`.
163 |
164 | Aby poznać pełną listę potencjalnych błędów, zapoznaj się z [przewodnikiem po błędach weryfikacji AMP](https://www.ampproject.org/docs/reference/validation_errors.html).
165 | Jeśli po dokładnym sprawdzeniu, wciąż masz problem, [zadaj pytanie](http://stackoverflow.com/questions/tagged/amp-html) – postaramy się pomóc.
166 |
```
--------------------------------------------------------------------------------
/content/docs/guides/author_develop/responsive_amp/[email protected]:
--------------------------------------------------------------------------------
```markdown
1 | ---
2 | $title: Mises en page compatibles
3 | ---
4 |
5 | Dans le cas d'éléments, il suffit d'inclure le code `layout=responsive`.
6 |
7 | [TOC]
8 |
9 | ## Valeurs autorisées pour l'attribut de mise en page
10 |
11 | Par défaut, utilisez des mises en page responsives.
12 |
13 | Voici la liste complète des valeurs autorisées pour l'attribut de mise en page :
14 |
15 | <table>
16 | <thead>
17 | <tr>
18 | <th class="col-twenty" data-th="Layout type">Type de mise en page</th>
19 | <th class="col-twenty" data-th="Width/height required">Largeur/hauteur requise</th>
20 | <th data-th="Behavior">Comportement</th>
21 | </tr>
22 | </thead>
23 | <tbody>
24 | <tr>
25 | <td class="col-twenty" data-th="Layout type"><code>nodisplay</code></td>
26 | <td class="col-twenty" data-th="Description">Non</td>
27 | <td data-th="Behavior">Élément non affiché. Cette mise en page peut être appliquée à chaque élément AMP. Le composant n'occupe pas de place à l'écran, comme si son style d'affichage était inexistant. On considère que l'élément peut s'afficher de lui-même en cas d'action de l'utilisateur, par exemple <a href="/docs/reference/extended/amp-lightbox.html"><code>amp-lightbox</code></a>.</td>
28 | </tr>
29 | <tr>
30 | <td class="col-twenty" data-th="Layout type"><code>fixed</code></td>
31 | <td class="col-twenty" data-th="Description">Oui</td>
32 | <td data-th="Behavior">L'élément a une largeur et une hauteur fixes. Il ne s'adapte donc pas. Les seules exceptions sont les éléments <a href="/docs/reference/amp-pixel.html"><code>amp-pixel</code></a> et <a href="/docs/reference/extended/amp-audio.html"><code>amp-audio</code></a>.</td>
33 | </tr>
34 | <tr>
35 | <td class="col-twenty" data-th="Layout type"><code>responsive</code></td>
36 | <td class="col-twenty" data-th="Description">Oui</td>
37 | <td data-th="Behavior">Élément ajusté à la largeur de son élément conteneur. Redimensionnement automatique de la hauteur au format donné par les attributs de largeur et de hauteur. Cette mise en page fonctionne très bien pour la plupart des éléments AMP, y compris <a href="/docs/reference/amp-img.html"><code>amp-img</code></a> et <a href="/docs/reference/amp-video.html"><code>amp-video</code></a>. L'espace disponible dépend de l'élément parent et peut également être personnalisé en utilisant le CSS <code>max-width</code>.</td>
38 | </tr>
39 | <tr>
40 | <td class="col-twenty" data-th="Layout type"><code>fixed-height</code></td>
41 | <td class="col-twenty" data-th="Description">Hauteur seulement</td>
42 | <td data-th="Behavior">L'élément prend l'espace qui lui est offert, mais sa hauteur reste inchangée. Cette mise en page fonctionne bien pour les éléments tels qu'<a href="/docs/reference/extended/amp-carousel.html"><code>amp-carousel</code></a>, impliquant un contenu positionné horizontalement. L'attribut <code>width</code> ne doit pas être présent ou doit être égal à <code>auto</code>.</td>
43 | </tr>
44 | <tr>
45 | <td class="col-twenty" data-th="Layout type"><code>fill</code></td>
46 | <td class="col-twenty" data-th="Description">Non</td>
47 | <td data-th="Behavior">L'élément prend l'espace qui lui est offert, en termes de largeur et de hauteur. En d'autres termes, la mise en page d'un élément de remplissage correspond à son parent.</td>
48 | </tr>
49 | <tr>
50 | <td class="col-twenty" data-th="Layout type"><code>container</code></td>
51 | <td class="col-twenty" data-th="Description">Non</td>
52 | <td data-th="Behavior">L'élément permet à ses enfants de définir sa taille, comme une balise <code>div</code> HTML standard. Le composant n'est pas censé avoir une mise en page propre. Il fonctionne comme un conteneur. Ses enfants sont affichés immédiatement.</td>
53 | </tr>
54 | </tbody>
55 | </table>
56 |
57 | ### Que se passe-t-il si la largeur et la hauteur ne sont pas définies ?
58 |
59 | Parfois, si `width` ou `height` ne sont pas spécifiés, l'exécution AMP peut utiliser les valeurs par défaut suivantes :
60 |
61 | * [`amp-pixel`](/docs/reference/amp-pixel.html): la largeur et la hauteur par défaut sont de 0.
62 | * [`amp-audio`](/docs/reference/extended/amp-audio.html): la largeur et la hauteur par défaut proviennent du navigateur.
63 |
64 | ### Que se passe-t-il si l'attribut de mise en page n'est pas défini ?
65 |
66 | Le comportement de la mise en page est déterminé comme suit :
67 |
68 | * Si `height` est présent et `width` est absent ou égal à `auto`, la mise en page `fixed-height` est utilisée.
69 | * Si les attributs `width` ou `height` sont présents, ainsi que l'attribut `sizes`, la mise en page `responsive` est utilisée.
70 | * Si les attributs `width` ou `height` sont présents, la mise en page `fixed` est utilisée.
71 | * En l'absence de `width` et de `height`, la mise en page `container` est utilisée.
72 |
73 | ## Utiliser les attributs "@media" et "media"
74 |
75 | Utilisez [`@media`](https://developer.mozilla.org/fr-FR/docs/Web/CSS/@media) pour contrôler la mise en page et le comportement de la page, comme sur n'importe quel autre site Web.
76 | Lorsque la fenêtre du navigateur change de taille ou d'orientation, les requêtes média sont réévaluées, et les éléments sont cachés et présentés sur la base des nouveaux résultats.
77 |
78 | Pour en savoir plus sur le contrôle de la mise en page grâce aux requêtes média, consultez [Utiliser des requêtes média CSS à des fins d'adaptabilité](https://developers.google.com/web/fundamentals/design-and-ui/responsive/fundamentals/use-media-queries?hl=fr).
79 |
80 | L'attribut `media` constitue une fonctionnalité supplémentaire de responsive design disponible dans l'AMP.
81 | Cet attribut peut être utilisé avec tous les éléments AMP ; il fonctionne comme les requêtes média de votre feuille de style globale, mais ne concerne qu'un élément spécifique sur une seule page.
82 |
83 | Par exemple, voici deux images avec des requêtes média qui s'excluent mutuellement.
84 |
85 | [sourcecode:html]
86 | <amp-img
87 | media="(min-width: 650px)"
88 | src="wide.jpg"
89 | width=466
90 | height=355
91 | layout="responsive" >
92 | </amp-img>
93 | [/sourcecode]
94 |
95 | En fonction de la largeur de l'écran, l'une ou l'autre sera récupérée et affichée.
96 |
97 | [sourcecode:html]
98 | <amp-img
99 | media="(max-width: 649px)"
100 | src="narrow.jpg"
101 | width=527
102 | height=193
103 | layout="responsive" >
104 | </amp-img>
105 | [/sourcecode]
106 |
107 | ## Utiliser les attributs "srcset" et "sizes"
108 |
109 | Utilisez l'attribut `srcset` pour contrôler les ressources d'un élément en fonction des différentes expressions de médias.
110 | En particulier, utilisez-le pour toutes les balises [`amp-img`](/docs/reference/amp-img.html) pour indiquer les ressources d'images à utiliser en fonction des diverses tailles d'écran.
111 |
112 | Dans cet exemple simple, `srcset` indique l'image à utiliser en fonction de la largeur de l'écran.
113 | Le descripteur `w` indique au navigateur la largeur de chaque image de la liste :
114 |
115 | [sourcecode:html]
116 | <amp-img
117 | src="wide.jpg"
118 | srcset="wide.jpg" 640w,
119 | "narrow.jpg" 320w >
120 | </amp-img>
121 | [/sourcecode]
122 |
123 | **Remarque** : L'AMP accepte le descripteur `w` dans tous les navigateurs.
124 |
125 | Pour en savoir plus sur la création d'images responsives à l'aide de l'attribut `srcset`, lisez [Using Responsive Images (Now)](http://alistapart.com/article/using-responsive-images-now) (Utiliser des images responsives (Maintenant) – en anglais).
126 |
127 | Vous pouvez également utiliser l'attribut `sizes` avec `srcset`.
128 | L'attribut `sizes` décrit comment calculer la taille de l'élément en fonction des expressions de médias.
129 | Sur la base de la taille calculée de l'élément, le user-agent sélectionne la source la plus pertinente fournie par l'attribut `srcset`.
130 |
131 | Prenons l'exemple suivant :
132 |
133 | [sourcecode:html]
134 | <amp-img
135 | src="wide.jpg"
136 | srcset="wide.jpg" 640w,
137 | "narrow.jpg" 320w
138 | sizes="(min-width: 650px) 50vw, 100vw" >
139 | </amp-img>
140 | [/sourcecode]
141 |
142 | L'attribut `sizes` fait en sorte que la largeur de l'élément corresponde à 50 % de la taille de la fenêtre d'affichage quand cette dernière fait au moins 650 pixels.
143 | Par exemple, si la fenêtre d'affichage fait 800 pixels, la largeur de l'élément est définie sur 400 pixels.
144 | Le navigateur sélectionne alors la ressource `srcset` la plus proche de 400 pixels, en supposant que le ratio en pixels de l'appareil est de 1, ce qui donne dans le cas présent `narrow.jpg` (320 pixels).
145 |
146 | **Important** : Lorsque l'attribut "sizes" est spécifié, avec une largeur et une hauteur, la mise en page par défaut est `responsive`.
147 |
148 | Pour en savoir plus sur les attributs `sizes` et `srcset` par rapport aux requêtes média, lisez cet article de blog [Srcset et sizes](https://ericportis.com/posts/2014/srcset-sizes/).
149 |
150 | ## Inclure des espaces réservés et des créations de remplacement
151 |
152 | ### placeholder
153 |
154 | L'élément comportant l'attribut `placeholder` fonctionne comme un espace réservé pour l'élément AMP parent.
155 | L'élément `placeholder`, s'il est indiqué, doit être un enfant direct de l'élément AMP.
156 |
157 | [sourcecode:html]
158 | <amp-anim src="animated.gif" width=466 height=355 layout="responsive" >
159 | <amp-img placeholder src="preview.png" layout="fill"></amp-img>
160 | </amp-anim>
161 | [/sourcecode]
162 |
163 | Par défaut, l'espace réservé est immédiatement affiché pour l'élément AMP, même si les ressources de l'élément AMP n'ont pas été téléchargées ni initialisées.
164 | Une fois prêt, l'élément AMP cache généralement son espace réservé et affiche le contenu.
165 |
166 | **Remarque** : Il n'est pas nécessaire que l'espace réservé soit un élément AMP ; tout élément HTML peut faire office d'espace réservé.
167 |
168 | ### fallback
169 |
170 | Utilisez l'attribut `fallback` pour indiquer le comportement de la création de remplacement pour tout élément non compatible avec le navigateur.
171 | Par exemple, utilisez l'attribut `fallback` pour indiquer à l'utilisateur que le navigateur n'accepte pas une fonctionnalité en particulier :
172 |
173 | [sourcecode:html]
174 | <amp-video width=400 height=300 src="https://yourhost.com/videos/myvideo.mp4"
175 | poster="myvideo-poster.jpg" >
176 | <div fallback>
177 | <p>Your browser doesn’t support HTML5 video.</p>
178 | </div>
179 | </amp-video>
180 | [/sourcecode]
181 |
182 | L'attribut `fallback` peut concerner n'importe quel élément HTML, et pas seulement les éléments AMP.
183 | Le cas échéant, l'élément `fallback` doit être un enfant direct de l'élément AMP.
184 |
185 | ### noloading
186 |
187 | De nombreux éléments AMP peuvent afficher un "indicateur de chargement", animation basique montrant que l'élément n'a pas encore complètement chargé.
188 | Il est possible de désactiver un tel comportement des éléments en ajoutant l'attribut `noloading`.
189 |
```
--------------------------------------------------------------------------------
/content/docs/guides/deploy/analytics_amp/[email protected]:
--------------------------------------------------------------------------------
```markdown
1 | ---
2 | $title: Analytics: Dasar-Dasarnya
3 | toc: true
4 | ---
5 |
6 | Mulailah di sini untuk mempelajari dasar-dasar analisis AMP.
7 |
8 | [TOC]
9 |
10 | ## Menggunakan amp-pixel atau amp-analytics?
11 |
12 | AMP menyediakan dua komponen untuk memenuhi kebutuhan analisis dan pengukuran Anda:
13 | [amp-pixel](/docs/reference/amp-pixel.html) dan
14 | [amp-analytics](/docs/reference/extended/amp-analytics.html).
15 | Kedua opsi ini mengirim data analisis ke titik akhir yang didefinisikan.
16 |
17 | Jika Anda mencari perilaku seperti
18 | [melacak piksel](https://en.wikipedia.org/wiki/Web_beacon#Implementation),
19 | komponen `amp-pixel` menyediakan pelacakan tampilan halaman dasar;
20 | data tampilan halaman dikirim ke URL yang didefinisikan.
21 | Sebagian integrasi dengan vendor bisa memanggil komponen ini,
22 | yang mana dalam hal ini integrasi akan menetapkan titik akhir URL yang tepat.
23 |
24 | Untuk sebagian besar solusi analisis, gunakan `amp-analytics`.
25 | Pelacakan tampilan halaman juga bekerja dalam `amp-analytics`.
26 | Namun Anda juga bisa melacak keterlibatan pengguna dengan segala tipe materi halaman,
27 | termasuk klik pada tautan dan tombol.
28 | Dan Anda bisa mengukur sejauh mana pada halaman pengguna telah menggulir,
29 | entah pengguna itu terlibat dengan media sosial atau tidak, dan lainnya
30 | (lihat
31 | [Mendalami AMP Analytics](/docs/guides/analytics/deep_dive_analytics.html)).
32 |
33 | Sebagai bagian dari pengintegrasian dengan platform,
34 | penyedia telah menawarkan konfigurasi `amp-analytics` yang telah didefinisikan sebelumnya
35 | sehingga mudah menangkap data dan mendorongnya ke alat pelacakan mereka.
36 | Mengakses dokumentasi vendor akses dari
37 | [spesifikasi amp-analytics](/docs/reference/extended/amp-analytics.html).
38 |
39 | Anda sama-sama bisa menggunakan `amp-pixel` maupun `amp-analytics` di halaman Anda.
40 | `amp-pixel` untuk pelacakan tampilan halaman sederhana,
41 | `amp-analytics` untuk semua hal lainnya.
42 | Anda juga bisa menambahkan beberapa bagian dari setiap tag.
43 | Jika Anda bekerja dengan beberapa bagian penyedia analisis,
44 | Anda akan membutuhkan satu tag per solusinya.
45 | Ingatlah bahwa halaman AMP yang lebih simpel akan lebih baik bagi pengguna,
46 | jadi jika Anda tidak memerlukan tag ekstra, jangan gunakan tag tersebut.
47 |
48 | ## Membuat konfigurasi analisis sederhana
49 |
50 | Ketahui cara membuat konfigurasi
51 | [amp-pixel](/docs/reference/amp-pixel.html) dan
52 | [amp-analytics](/docs/reference/extended/amp-analytics.html) sederhana.
53 |
54 | ### Konfigurasi amp-pixel sederhana
55 |
56 | Untuk membuat konfigurasi `amp-pixel` sederhana,
57 | masukkan sesuatu seperti yang berikut ke dalam badan halaman AMP Anda:
58 |
59 | [sourcecode:html]
60 | <amp-pixel src="https://foo.com/pixel?RANDOM"></amp-pixel>
61 | [/sourcecode]
62 |
63 | Dalam contoh ini,
64 | data tampilan halaman dikirim ke URL yang didefinisikan, bersama angka acak.
65 | Variabel `RANDOM` merupakan satu dari banyak
66 | [variabel penggantian dalam platform AMP](https://github.com/ampproject/amphtml/blob/master/spec/amp-var-substitutions.md).
67 | Ketahui selengkapnya tentang
68 | [Penggantian variabel](/docs/guides/analytics/analytics_basics.html#variable-substitution) di sini.
69 |
70 | Komponen [amp-pixel](/docs/reference/amp-pixel.html)
71 | adalah komponen bawaan,
72 | jadi Anda tidak memerlukan deklarasi penyertaan seperti yang biasa dilakukan
73 | untuk perluasan komponen AMP, termasuk `amp-analytics`.
74 | Namun Anda harus menempatkan tag `amp-pixel` sedekat mungkin
75 | dengan awal `<body>`.
76 | Piksel pelacakan hanya akan dipicu ketika tag dengan sendirinya ditampilkan.
77 | Jika `amp-pixel` diposisikan di dekat bagian bawah halaman,
78 | maka ia tidak akan dipicu.
79 |
80 | ### Konfigurasi amp-analytics sederhana
81 |
82 | Untuk membuat konfigurasi
83 | [amp-analytics](/docs/reference/extended/amp-analytics.html) sederhana,
84 | Anda harus terlebih dahulu menyertakan deklarasi `custom-element` ini
85 | dalam `<head>` dari dokumen AMP (lihat juga
86 | [Deklarasi penyertaan komponen](/docs/reference/extended.html#component-inclusion-declaration)):
87 |
88 | [sourcecode:html]
89 | <script async custom-element="amp-analytics" src="https://cdn.ampproject.org/v0/amp-analytics-0.1.js"></script>
90 | [/sourcecode]
91 |
92 | Contoh berikut serupa dengan [contoh `amp-pixel`](/docs/guides/analytics/analytics_basics.html#simple-amp-pixel-configuration).
93 | Setiap kali sebuah halaman terlihat,
94 | kejadian pemicu terjadi, dan
95 | mengirim data penayangan ke URL yang didefinisikan bersama dengan sebuah ID acak:
96 |
97 | [sourcecode:html]
98 | <amp-analytics>
99 | <script type="application/json">
100 | {
101 | "requests": {
102 | "pageview": "https://foo.com/pixel?RANDOM",
103 | },
104 | "triggers": {
105 | "trackPageview": {
106 | "on": "visible",
107 | "request": "pageview"
108 | }
109 | }
110 | }
111 | </script>
112 | </amp-analytics>
113 | [/sourcecode]
114 |
115 | Dalam contoh di atas, kita telah mendefinisikan permintaan yang disebut penayangan sebagai https://foo.com/pixel?RANDOM. Seperti yang telah didiskusikan sebelumnya, RANDOM diganti dengan sebuah angka acak, jadi permintaan itu sebenarnya akan terlihat seperti ini https://foo.com/pixel?0.23479283687235653498734.
116 |
117 | Ketika halaman menjadi terlihat
118 | (sebagaimana yang ditetapkan oleh penggunaan kata kunci pemicu `visible`),
119 | sebuah kejadian terpicu dan permintaan `pageview` dikirim.
120 | Atribut pemicu menentukan kapan permintaan penayangan dipicu.
121 | Ketahui selengkapnya tentang [permintaan dan pemicu](/docs/guides/analytics/deep_dive_analytics.html#requests-triggers--transports).
122 |
123 | ## Penggantian variabel
124 |
125 | Baik komponen [amp-pixel](/docs/reference/amp-pixel.html) maupun
126 | komponen [amp-analytics](/docs/reference/extended/amp-analytics.html) sama-sama
127 | memungkinkan semua penggantian variabel URL standar (lihat
128 | [Penggantian Variabel AMP HTML](https://github.com/ampproject/amphtml/blob/master/spec/amp-var-substitutions.md)).
129 | Dalam contoh berikut,
130 | permintaan tampilan halaman dikirim ke URL,
131 | bersama dengan URL kanonis dokumen AMP saat ini, judulnya, dan
132 | [ID klien](/docs/guides/analytics/analytics_basics.html#user-identification):
133 |
134 | [sourcecode:html]
135 | <amp-pixel src="https://example.com/analytics?url=${canonicalUrl}&title=${title}&clientId=${clientId(site-user-id)}"></amp-pixel>
136 | [/sourcecode]
137 |
138 | Karena kesederhanaannya,
139 | tag `amp-pixel` bisa hanya menyertakan variabel yang didefinisikan oleh platform
140 | atau yang bisa di-parse oleh waktu proses AMP dari halaman AMP.
141 | Dalam contoh di atas,
142 | platform mengisi terlebih dahulu nilai baik untuk
143 | `canonicalURL` maupun `clientId(site-user-id)`.
144 | Tag `amp-analytics` bisa menyertakan variabel yang sama dengan `amp-pixel`,
145 | serta variabel yang didefinisikan secara unik di dalam konfigurasi tag.
146 |
147 | Gunakan format `${varName}` dalam </string> permintaan untuk variabel yang didefinisikan oleh halaman
148 | atau platform.
149 | Tag `amp-analytics` akan mengganti template dengan nilai sebenarnya
150 | pada saat pembentukan permintaan analisis (lihat juga
151 | [Variabel yang didukung dalam amp-analytics](https://github.com/ampproject/amphtml/blob/master/extensions/amp-analytics/analytics-vars.md)).
152 |
153 | Dalam contoh `amp-analytics` berikut,
154 | permintaan tampilan halaman dikirim ke URL,
155 | dengan data tambahan yang diekstrak dari penggantian variabel,
156 | sebagian disediakan oleh platform,
157 | sebagian didefinisikan langsung pada barisnya,
158 | di dalam konfigurasi `amp-analytics`:
159 |
160 | [sourcecode:html]
161 | <amp-analytics>
162 | <script type="application/json">
163 | {
164 | "requests": {
165 | "pageview":"https://example.com/analytics?url=${canonicalUrl}&title=${title}&acct=${account}&clientId=${clientId(site-user-id)}",
166 | },
167 | "vars": {
168 | "account": "ABC123",
169 | },
170 | "triggers": {
171 | "someEvent": {
172 | "on": "visible",
173 | "request": "pageview",
174 | "vars": {
175 | "title": "My homepage",
176 | }
177 | }
178 | }
179 | }
180 | </script>
181 | </amp-analytics>
182 | [/sourcecode]
183 |
184 | Dalam contoh di atas,
185 | variabel, `account` dan `title` didefinisikan
186 | dalam konfigurasi `amp-analytics`.
187 | Variabel `canonicalUrl` dan `clientId` tidak didefinisikan dalam konfigurasi,
188 | sehingga nilai-nilainya diganti oleh platform.
189 |
190 | **Penting:** Penggantian variabel fleksibel;
191 | variabel yang sama bisa Anda definisikan di lokasi berbeda,
192 | dan waktu proses AMP akan mem-parse nilai-nilai dalam urutan prioritas ini
193 | (lihat [Pengurutan penggantian variabel] (/docs/guides/analytics/deep_dive_analytics.html#variable-substitution-ordering)).
194 |
195 | ## Identifikasi pengguna
196 |
197 | Situs web menggunakan cookie untuk menyimpan informasi yang spesifik bagi pengguna dalam browser.
198 | Cookie bisa digunakan untuk memberi tahu bahwa pengguna sebelumnya telah mengunjungi situs.
199 | Dalam AMP,
200 | halaman bisa disajikan baik dari situs web penerbit maupun cache
201 | (seperti Google AMP Cache).
202 | Situs web penerbit dan cache kemungkinan memiliki domain yang berbeda,
203 | Demi alasan keamanan,
204 | browser bisa (dan sering kali akan) membatasi akses ke cookie domain lain
205 | (lihat juga
206 | [Pelacakan pengguna di seluruh asal](https://github.com/ampproject/amphtml/blob/master/extensions/amp-analytics/cross-origin-tracking.md)).
207 |
208 | Secara default,
209 | AMP akan mengelola penyediaan ID klien apakah halaman itu diakses dari situs web asal penerbit maupun melalui cache.
210 | ID klien yang dihasilkan oleh AMP memiliki nilai `"amp-"`
211 | diikuti oleh </string> acak yang dienkodekan `base64` dan tetap sama
212 | untuk pengguna jika pengguna yang sama berkunjung kembali.
213 |
214 | AMP mengelola pembacaan dan penulisan ID klien dalam semua hal.
215 | Ini terutama menonjol dalam hal ketika halaman disajikan
216 | melalui cache atau juga ketika ditampilkan di luar konteks penayangan
217 | dari situs asal penerbit.
218 | Dalam kondisi seperti ini, akses ke cookie situs penerbit tidak tersedia.
219 |
220 | Ketika halaman AMP disajikan dari situs penerbit,
221 | kerangka kerja ID klien yang digunakan AMP bisa diberi tahu mengenai cookie dukungan
222 | yang harus dicari dan digunakan.
223 | Dalam hal ini,
224 | argumen `cid-scope-cookie-fallback-name` dari variabel `clientId`
225 | ditafsirkan sebagai nama cookie.
226 | Pemformatan bisa tampak baik sebagai
227 | `CLIENT_ID(cid-scope-cookie-fallback-name)` maupun
228 | `${clientId(cid-scope-cookie-fallback-name)}`.
229 |
230 | Misalnya:
231 |
232 | [sourcecode:html]
233 | <amp-pixel src="https://foo.com/pixel?cid=CLIENT_ID(site-user-id-cookie-fallback-name)"></amp-pixel>
234 | [/sourcecode]
235 |
236 | Jika AMP menemukan bahwa cookie ini telah diatur,
237 | maka penggantian ID klien akan mengembalikan nilai cookie tersebut.
238 | Jika AMP menemukan bahwa cookie ini tidak diatur,
239 | maka AMP akan menghasilkan nilai dari bentuk `amp-` diikuti
240 | oleh </string> acak yang dienkodekan base64.
241 |
242 | Ketahui selengkapnya tentang penggantian ID klien
243 | termasuk cara menambahkan ID pemberitahuan pengguna opsional, dalam
244 | [Variabel yang didukung dalam analisis AMP](https://github.com/ampproject/amphtml/blob/master/extensions/amp-analytics/analytics-vars.md).
245 |
```
--------------------------------------------------------------------------------
/content/docs/guides/debug/validate@pt_BR.md:
--------------------------------------------------------------------------------
```markdown
1 | ---
2 | $title: Validar páginas AMP
3 | ---
4 |
5 | A principal vantagem da AMP não é apenas tornar as páginas mais rápidas, mas também acelerá-las de uma forma que possa ser *validada*. Assim, alguns terceiros, como Twitter, Instagram ou a Pesquisa Google, recebem a oportunidade de veicular páginas AMP para os leitores de maneiras cada vez mais interessantes.
6 |
7 | ## Como posso verificar se a minha página é uma AMP válida?
8 |
9 | Existem diversas formas para validar um documento AMP. Todas elas terão
10 | o mesmo resultado, então use a que mais se adaptar ao seu
11 | estilo de desenvolvimento.
12 |
13 | Além da validade da AMP, você também pode querer confirmar se seu documento AMP [pode ser detectado](/docs/guides/discovery.html) por plataformas de terceiros.
14 |
15 | ### Console do navegador para desenvolvedores
16 |
17 | O validador de AMP vem com a biblioteca JavaScript AMP para estar disponível em todas as páginas AMP por padrão. Para validar:
18 |
19 | 1. Abra sua página AMP no navegador
20 | 1. Anexe "`#development=1`" ao URL, por exemplo, `http://localhost:8000/released.amp.html#development=1`.
21 | 1. Abra o [console do Chrome DevTools](https://developers.google.com/web/tools/chrome-devtools/debug/console/) e verifique se há erros de validação.
22 |
23 | Os erros do Developer Console serão mostrados assim:
24 |
25 | <amp-img src="/static/img/docs/validator_errors.png" width="713" height="243" alt="Captura de tela de erros no validador de AMP no console do desenvolvedor Google Chrome" layout="responsive"></amp-img>
26 |
27 |
28 | ### Interface da Web
29 |
30 | O validador de AMP pode ser usado como uma interface da Web em
31 | [validator.ampproject.org](https://validator.ampproject.org/). Essa
32 | interface exibe os erros in-line ao lado da fonte HTML da página.
33 | A interface é um editor interativo: alterações na fonte HTML resultam em
34 | revalidação interativa.
35 |
36 | <amp-img src="/static/img/docs/validator_web_ui.png" width="660" height="507" alt="Captura de tela de validator.ampproject.org com exemplos de erro." layout="responsive"></amp-img>
37 |
38 |
39 | ### Extensão do navegador
40 |
41 | O validador de AMP pode ser acessado diretamente na barra de ferramentas do seu navegador por meio de
42 | uma extensão. Enquanto você navega, ele valida automaticamente cada página AMP visitada
43 | e fornece uma indicação visual sobre essa validade por meio de um ícone
44 | colorido.
45 |
46 | <table>
47 | <tr>
48 | <td>
49 | <amp-img src="/static/img/docs/validator_icon_invalid.png" width="20" height="20" alt="Ícone da AMP em vermelho indicando documento de AMP inválido." layout="fixed"></amp-img>
50 |
51 | </td>
52 | <td>Quando houver erros dentro de uma página AMP, o ícone da extensão
53 | ficará vermelho e informará o número de erros encontrados.
54 | </td>
55 | </tr>
56 | <tr>
57 | <td>
58 | <amp-img src="/static/img/docs/validator_icon_valid.png" width="20" height="20" alt="Ícone da AMP em verde indicando documento de AMP válido." layout="fixed"></amp-img>
59 |
60 | </td>
61 | <td>Quando não houver erros dentro de uma página AMP, o ícone ficará
62 | verde e exibirá o número de avisos, no caso de existir algum.
63 | </td>
64 | </tr>
65 | <tr>
66 | <td>
67 | <amp-img src="/static/img/docs/validator_icon_link.png" width="20" height="20" alt="Ícone da AMP em azul indicando variante HTML para AMP, se clicado." layout="fixed"></amp-img>
68 |
69 | </td>
70 | <td>Quando a página não for AMP, mas houver uma versão AMP
71 | disponível, será exibido um ícone azul de link. Além disso, ao clicar na
72 | extensão, o navegador será redirecionado para a versão AMP.
73 | </td>
74 | </tr>
75 | </table>
76 |
77 | Extensão do validador de AMP para
78 | [Google Chrome](https://chrome.google.com/webstore/detail/amp-validator/nmoffdblmcmgeicmolmhobpoocbbmknc) e [Opera](https://addons.opera.com/en-gb/extensions/details/amp-validator/).
79 |
80 | ### Ferramenta de linha de comando
81 |
82 | Como pré-requisito, pode ser necessário instalar o <a href="https://docs.npmjs.com/getting-started/installing-node">Node.js e seu respectivo gerenciador de pacotes
83 | `npm` no seu sistema</a>.
84 |
85 | Para instalar a [ferramenta de linha de comando do validador de HTML para AMP](https://www.npmjs.com/package/amphtml-validator), digite `npm install -g amphtml-validator`.
86 |
87 | Agora, vamos validar uma página HTML para AMP real.
88 |
89 | [sourcecode:console]
90 | $ amphtml-validator https://www.ampproject.org/
91 | https://www.ampproject.org/: PASS
92 | [/sourcecode]
93 |
94 | Não é novidade que esta página tem um HTML para AMP válido. Vamos tentar uma página que não seja válida:
95 | [several_errors.html](https://raw.githubusercontent.com/ampproject/amphtml/master/validator/testdata/feature_tests/several_errors.html). Para executar o comando `amphtml-validator`, você pode fornecer o URL da página ou um nome de arquivo local. Faça download de [several_errors.html](https://raw.githubusercontent.com/ampproject/amphtml/master/validator/testdata/feature_tests/several_errors.html) e salve-o em um arquivo. Em seguida, execute:
96 |
97 | [sourcecode:console]
98 | $ amphtml-validator several_errors.html
99 | several_errors.html:23:2 O atributo 'charset' pode não aparecer na tag 'meta name= and content='.
100 | several_errors.html:26:2 A tag 'script' não é permitida, exceto em formas específicas.
101 | several_errors.html:32:2 O atributo obrigatório 'height' está ausente na tag 'amp-img'. (veja https://www.ampproject.org/docs/reference/amp-img.html)
102 | several_errors.html:34:2 O atributo 'width' na tag 'amp-ad' está definido para o valor inválido '100%'. (veja https://www.ampproject.org/docs/reference/amp-ad.html)
103 | ...
104 | [/sourcecode]
105 |
106 | As mensagens de erro são formadas por nome de arquivo, linha, coluna e uma mensagem,
107 | muitas vezes seguida por um link para a referência HTML da AMP. Alguns editores, incluindo o Emacs
108 | (procure o comando de compilação e o modo de compilação), podem interpretar esse formato e levá-lo
109 | diretamente para os erros no arquivo original.
110 |
111 | Para ter um bom ponto de partida para criar a sua própria página AMP, considere [minimum_valid_amp.html](https://raw.githubusercontent.com/ampproject/amphtml/master/validator/testdata/feature_tests/minimum_valid_amp.html):
112 |
113 | [sourcecode:console]
114 | $ amphtml-validator minimum_valid_amp.html
115 | minimum_valid_amp.html: PASS
116 | [/sourcecode]
117 |
118 | A ferramenta de linha de comando oferece recursos adicionais, incluindo desativação da cor,
119 | impressão da saída JSON ou execução de uma versão específica do
120 | validador JavaScript (por padrão, ele executa o script que foi publicado mais recentemente).
121 |
122 | [sourcecode:console]
123 | $ amphtml-validator --help
124 |
125 | Uso: index [options] <fileOrUrlOrMinus...>
126 |
127 | Valida os arquivos ou URLs fornecidos como argumentos. Se "-" for
128 | especificado, lê a partir de stdin.
129 |
130 | Opções:
131 |
132 | -h, --help informação de uso de saída
133 | -V, --version gera o número da versão
134 | --validator_js <fileOrUrl> O JavaScript do validador.
135 | Versão mais recente publicada por padrão ou
136 | dist/validator_minified.js (criada com build.py)
137 | para desenvolvimento.
138 | --format <color|text|json> Como formatar a saída.
139 | "color" exibe erros/avisos/êxito em
140 | vermelho/laranja/verde.
141 | "text" evita cor (por exemplo, útil para terminais sem
142 | suporte a cor).
143 | "json" emite json correspondente à mensagem ValidationResult
144 | em validator.proto.
145 | [/sourcecode]
146 |
147 | ## O que acontece se a minha página não for válida?
148 |
149 | O validador de AMP não é apenas uma conveniência para você durante o desenvolvimento. Ele também é usado por plataformas como Twitter ou Google, que integram as páginas AMP aos seus conteúdos e resultados de pesquisa. Mais ainda, eles não costumam solicitar as páginas diretamente do seu servidor, mas usam o Google AMP Cache, um serviço gratuito que armazena em cache as suas páginas e as disponibiliza em todo o mundo para que sejam carregadas ainda mais rápido.
150 |
151 | Se o serviço de validação de AMP detectar que há algo de errado com a sua página, ela não será detectada e distribuída por sites de terceiros e não aparecerá no Google AMP Cache. Desse modo, não só você perde os benefícios do cache em termos de velocidade, como corre o risco de não ter a sua página sendo exibida em muitos lugares. Como isso seria uma pena, vamos tomar cuidado para que não aconteça.
152 |
153 | ## Como faço para corrigir os erros de validação?
154 |
155 | A maioria dos erros de validação são fáceis de tratar e corrigir. Veja esta tag HTML:
156 |
157 | [sourcecode:html]
158 | <img src="cat.png">
159 | [/sourcecode]
160 |
161 | Ela gera este erro de validação AMP, apresentado nestas diferentes ferramentas:
162 |
163 | * Console do navegador para desenvolvedores
164 | <amp-img alt="Erro de AMP: a tag 'img' só pode aparecer como descendente da tag 'noscript'. Você quis dizer 'amp-img'? linha 11, coluna 2" height="30" src="/static/img/docs/validator_console_imgerror.png" width="696" layout="responsive"></amp-img>
165 |
166 | * Interface da Web
167 | <amp-img alt="Erro de AMP: a tag 'img' só pode aparecer como descendente da tag 'noscript'. Você quis dizer 'amp-img'? linha 11, coluna 2" height="58" src="/static/img/docs/validator_webui_imgerror.png" width="676" layout="responsive"></amp-img>
168 |
169 | * Extensão do navegador
170 | <amp-img alt="Erro de AMP: a tag 'img' só pode aparecer como descendente da tag 'noscript'. Você quis dizer 'amp-img'? linha 11, coluna 2" height="108" src="/static/img/docs/validator_extension_imgerror.png" width="724" layout="responsive"></amp-img>
171 |
172 | Cada ferramenta fornece várias informações:
173 |
174 | 1. A localização (linha e coluna) no documento HTML onde ocorreu o
175 | erro, que pode receber cliques em algumas interfaces para destacar esse local. Nesse
176 | caso, o problema ocorre na linha 11, coluna 2.
177 | 1. Uma linha de texto que descreve o erro. Nesse caso, o texto indica que
178 | uma tag `<img>` está em uso, quando na verdade a tag `<amp-img>` é que deveria estar sendo usada.
179 | 1. Um link para um documento relevante sobre o erro. Nesse caso, a
180 | documentação da tag `<amp-img>`. Nem todos os erros geram
181 | links de documentação.
182 |
183 | Em uma releitura cuidadosa das especificações, percebemos que estamos usando uma tag `<img>`, quando deveríamos ter usado uma tag `<amp-img>`.
184 |
185 | Para entender melhor a lista completa de possíveis erros,
186 | consulte o [guia de erros de validação de AMP](https://www.ampproject.org/docs/reference/validation_errors.html).
187 | Se a solução não aparecer mesmo após uma avaliação cuidadosa, [faça uma pergunta](http://stackoverflow.com/questions/tagged/amp-html), e nós tentaremos ajudar.
188 |
```
--------------------------------------------------------------------------------
/content/docs/guides/author_develop/responsive_amp/[email protected]:
--------------------------------------------------------------------------------
```markdown
1 | ---
2 | $title: Layout supportati
3 | ---
4 |
5 | Rendi reattivi i tuoi elementi utilizzando `layout=responsive`.
6 |
7 | [TOC]
8 |
9 | ## Valori supportati per l'attributo layout
10 |
11 | Utilizza i layout reattivi per impostazione predefinita.
12 |
13 | Di seguito è riportato l'elenco completo dei valori supportati per l'attributo layout.
14 |
15 | <table>
16 | <thead>
17 | <tr>
18 | <th class="col-twenty" data-th="Layout type">Tipo di layout</th>
19 | <th class="col-twenty" data-th="Width/height required">Larghezza/altezza obbligatorie</th>
20 | <th data-th="Behavior">Comportamento</th>
21 | </tr>
22 | </thead>
23 | <tbody>
24 | <tr>
25 | <td class="col-twenty" data-th="Layout type"><code>nodisplay</code></td>
26 | <td class="col-twenty" data-th="Description">No</td>
27 | <td data-th="Behavior">Elemento non visualizzato. Questo layout può essere applicato a ogni elemento AMP. Il componente non occupa spazio sullo schermo, come non ci fosse alcuno stile di visualizzazione applicato. Si presume che l'elemento possa visualizzarsi automaticamente in seguito all'azione dell'utente, ad esempio <a href="/docs/reference/extended/amp-lightbox.html"><code>amp-lightbox</code></a>.</td>
28 | </tr>
29 | <tr>
30 | <td class="col-twenty" data-th="Layout type"><code>fixed</code></td>
31 | <td class="col-twenty" data-th="Description">Sì</td>
32 | <td data-th="Behavior">L'elemento ha larghezza e altezza fisse; la reattività non è supportata. Le uniche eccezioni sono gli elementi <a href="/docs/reference/amp-pixel.html"><code>amp-pixel</code></a> e <a href="/docs/reference/extended/amp-audio.html"><code>amp-audio</code></a>.</td>
33 | </tr>
34 | <tr>
35 | <td class="col-twenty" data-th="Layout type"><code>responsive</code></td>
36 | <td class="col-twenty" data-th="Description">Sì</td>
37 | <td data-th="Behavior">L'elemento viene adattato alla larghezza del relativo elemento contenitore, mentre la sua altezza viene ridimensionata automaticamente in base alle proporzioni stabilite dagli attributi di larghezza e altezza. Questo layout è adatto per la maggior parte degli elementi AMP, inclusi <a href="/docs/reference/amp-img.html"><code>amp-img</code></a> e <a href="/docs/reference/amp-video.html"><code>amp-video</code></a>. Lo spazio disponibile dipende dall'elemento principale e può anche essere personalizzato utilizzando l'elemento CSS <code>max-width</code>.</td>
38 | </tr>
39 | <tr>
40 | <td class="col-twenty" data-th="Layout type"><code>fixed-height</code></td>
41 | <td class="col-twenty" data-th="Description">Solo l'altezza</td>
42 | <td data-th="Behavior">L'elemento occupa lo spazio a sua disposizione, ma la sua altezza rimane invariata. Questo layout è adatto per elementi quali <a href="/docs/reference/extended/amp-carousel.html"><code>amp-carousel</code></a>, che prevede contenuti in posizione orizzontale. L'attributo <code>width</code> non deve essere presente o deve essere impostato su <code>auto</code>.</td>
43 | </tr>
44 | <tr>
45 | <td class="col-twenty" data-th="Layout type"><code>fill</code></td>
46 | <td class="col-twenty" data-th="Description">No</td>
47 | <td data-th="Behavior">L'elemento occupa lo spazio a sua disposizione, sia in larghezza sia in altezza. In altre parole, il layout di un elemento fill corrisponde a quello dell'elemento principale.</td>
48 | </tr>
49 | <tr>
50 | <td class="col-twenty" data-th="Layout type"><code>container</code></td>
51 | <td class="col-twenty" data-th="Description">No</td>
52 | <td data-th="Behavior">L'elemento consente ai relativi elementi secondari di definire le proprie dimensioni, come un normale elemento <code>div</code> HTML. Il componente in sé non dovrebbe avere un layout specifico, ma funzionare soltanto da contenitore. I relativi elementi secondari vengono visualizzati all'istante.</td>
53 | </tr>
54 | </tbody>
55 | </table>
56 |
57 | ### Che cosa succede se non vengono definite la larghezza e l'altezza?
58 |
59 | Se i valori `width` o `height` non vengono specificati, in alcuni casi il runtime AMP può stabilire i seguente valori predefiniti:
60 |
61 | * [`amp-pixel`](/docs/reference/amp-pixel.html): per larghezza e altezza viene impostato il valore predefinito 0.
62 | * [`amp-audio`](/docs/reference/extended/amp-audio.html): la larghezza e l'altezza predefinite vengono dedotte dal browser.
63 |
64 | ### Che cosa succede se non viene definito l'attributo layout?
65 |
66 | Il comportamento del layout viene stabilito come segue:
67 |
68 | * Se è presente l'attributo `height`, ma l'attributo `width` non è presente o equivale ad `auto`, viene utilizzato il layout `fixed-height`.
69 | * Se sono presenti gli attributi `width` o `height` insieme all'attributo `sizes`, viene utilizzato il layout `responsive`.
70 | * Se sono presenti gli attributi `width` o `height`, viene utilizzato il layout `fixed`.
71 | * Se gli attributi `width` e `height` non sono presenti, viene utilizzato il layout `container`.
72 |
73 | ## Utilizzare la regola @media e l'attributo media
74 |
75 | Utilizza la regola [`@media`](https://developer.mozilla.org/en-US/docs/Web/CSS/@media) per stabilire l'aspetto e il comportamento del layout della pagina, come faresti per qualsiasi altro sito web.
76 | Quando cambiano le dimensioni o l'orientamento della finestra del browser, le query supporti vengono rivalutate, dopodiché gli elementi vengono nascosti e mostrati in base ai nuovi risultati.
77 |
78 | Visita la pagina [Utilizzare query supporti CSS per la reattività](https://developers.google.com/web/fundamentals/design-and-ui/responsive/fundamentals/use-media-queries?hl=it) per avere ulteriori informazioni sul controllo del layout applicando query supporti.
79 |
80 | Una funzione aggiuntiva per il responsive design disponibile in AMP è l'attributo `media`, che può essere utilizzato in ogni elemento AMP. Funziona in modo simile alle query supporti nel foglio di stile globale, ma incide soltanto sull'elemento specifico in una singola pagina.
81 |
82 | Ad esempio, di seguito vengono considerate due immagini con query supporti che si escludono a vicenda.
83 |
84 | [sourcecode:html]
85 | <amp-img
86 | media="(min-width: 650px)"
87 | src="wide.jpg"
88 | width=466
89 | height=355
90 | layout="responsive" >
91 | </amp-img>
92 | [/sourcecode]
93 |
94 | L'immagine da recuperare e visualizzare viene scelta in base alla larghezza dello schermo.
95 |
96 | [sourcecode:html]
97 | <amp-img
98 | media="(max-width: 649px)"
99 | src="narrow.jpg"
100 | width=527
101 | height=193
102 | layout="responsive" >
103 | </amp-img>
104 | [/sourcecode]
105 |
106 | ## Utilizzare gli attributi srcset e sizes
107 |
108 | Utilizza l'attributo `srcset` per stabilire gli asset di un elemento in base alle varie espressioni di supporto.
109 | Utilizzalo in particolare nei tag [`amp-img`](/docs/reference/amp-img.html) per specificare gli asset immagine da utilizzare a seconda delle dimensioni dello schermo.
110 |
111 | In questo semplice esempio, `srcset` specifica l'immagine da utilizzare in base alla larghezza dello schermo.
112 | Il descrittore `w` indica al browser la larghezza di ogni immagine nell'elenco:
113 |
114 | [sourcecode:html]
115 | <amp-img
116 | src="wide.jpg"
117 | srcset="wide.jpg" 640w,
118 | "narrow.jpg" 320w >
119 | </amp-img>
120 | [/sourcecode]
121 |
122 | **Nota.** AMP supporta il descrittore `w` in tutti i browser.
123 |
124 | Leggi ulteriori informazioni sulla creazione di immagini reattive utilizzando `srcset`
125 | nella pagina relativa all'[utilizzo delle immagini reattive](http://alistapart.com/article/using-responsive-images-now).
126 |
127 | Puoi anche utilizzare l'attributo `sizes` insieme all'attributo `srcset`.
128 | L'attributo `sizes` descrive come calcolare le dimensioni dell'elemento in base all'eventuale espressione di supporto.
129 | In base alle dimensioni calcolate dell'elemento, lo user-agent seleziona l'origine più relativa indicata dall'attributo `srcset`.
130 |
131 | Esamina l'esempio seguente:
132 |
133 | [sourcecode:html]
134 | <amp-img
135 | src="wide.jpg"
136 | srcset="wide.jpg" 640w,
137 | "narrow.jpg" 320w
138 | sizes="(min-width: 650px) 50vw, 100vw" >
139 | </amp-img>
140 | [/sourcecode]
141 |
142 | L'attributo `sizes` definisce la larghezza dell'elemento pari al 50% delle dimensioni dell'area visibile, quando quest'ultima è almeno pari a 650 px.
143 | Ad esempio, se l'area visibile è di 800 px, la larghezza dell'elemento viene impostata su 400 px.
144 | Il browser sceglie poi la risorsa `srcset` in base alle dimensioni di 400 px, supponendo che le proporzioni pixel del dispositivo siano pari a 1; in questo caso, quindi, la risorsa è `narrow.jpg` (320 px).
145 |
146 | **Importante.** Se l'attributo sizes viene specificato insieme alla larghezza e all'altezza, il valore predefinito del layout è `responsive`.
147 |
148 | Leggi ulteriori informazioni sulle differenze tra gli attributi `sizes` e `srcset` e le query supporti in questo post del blog [Srcset and sizes](https://ericportis.com/posts/2014/srcset-sizes/).
149 |
150 | ## Includere attributi placeholder e fallback
151 |
152 | ### placeholder
153 |
154 | L'elemento contrassegnato dall'attributo `placeholder` agisce da segnaposto per l'elemento AMP principale.
155 | Se specificato, un elemento `placeholder` deve essere un elemento secondario diretto dell'elemento AMP.
156 |
157 | [sourcecode:html]
158 | <amp-anim src="animated.gif" width=466 height=355 layout="responsive" >
159 | <amp-img placeholder src="preview.png" layout="fill"></amp-img>
160 | </amp-anim>
161 | [/sourcecode]
162 |
163 | Per impostazione predefinita, il segnaposto dell'elemento AMP viene mostrato all'istante, anche se le risorse dell'elemento AMP non sono state scaricate o inizializzate.
164 | Quando è pronto, l'elemento AMP in genere nasconde il relativo segnaposto e mostra i contenuti.
165 |
166 | **Nota.** Il segnaposto non deve necessariamente essere un elemento AMP, ma può essere qualsiasi elemento HTML.
167 |
168 | ### fallback
169 |
170 | Utilizza l'attributo `fallback` per indicare il comportamento di fallback di ogni elemento non supportato dal browser.
171 | Ad esempio, utilizza l'attributo `fallback` per comunicare all'utente che il browser non supporta una determinata funzione:
172 |
173 | [sourcecode:html]
174 | <amp-video width=400 height=300 src="https://yourhost.com/videos/myvideo.mp4"
175 | poster="myvideo-poster.jpg" >
176 | <div fallback>
177 | <p>Your browser doesn’t support HTML5 video.</p>
178 | </div>
179 | </amp-video>
180 | [/sourcecode]
181 |
182 | Per l'attributo `fallback` è possibile impostare qualsiasi elemento HTML, non soltanto elementi AMP.
183 | Se specificato, l'elemento `fallback` deve essere un elemento secondario diretto dell'elemento AMP.
184 |
185 | ### noloading
186 |
187 | Molti elementi AMP sono autorizzati a mostrare un "indicatore di caricamento", che consiste in un'animazione basilare che indica che l'elemento non è stato ancora caricato completamente.
188 | Puoi disattivare questo comportamento per gli elementi aggiungendo l'attributo `noloading`.
189 |
```
--------------------------------------------------------------------------------
/content/docs/guides/author_develop/responsive_amp/[email protected]:
--------------------------------------------------------------------------------
```markdown
1 | ---
2 | $title: Unterstützte Layouts
3 | ---
4 |
5 | Sie können Ihre Elemente responsiv machen, indem Sie `layout` einschließen.
6 |
7 | [TOC]
8 |
9 | ## Unterstützte Werte für layout-Attribut
10 |
11 | Verwenden Sie standardmäßig responsive Layouts.
12 |
13 | Hier eine vollständige Liste der unterstützten Werte für das layout-Attribut:
14 |
15 | <table>
16 | <thead>
17 | <tr>
18 | <th class="col-twenty" data-th="Layout type">Layouttyp</th>
19 | <th class="col-twenty" data-th="Width/height required">Breite/Höhe erforderlich</th>
20 | <th data-th="Behavior">Verhalten</th>
21 | </tr>
22 | </thead>
23 | <tbody>
24 | <tr>
25 | <td class="col-twenty" data-th="Layout type"><code>nodisplay</code></td>
26 | <td class="col-twenty" data-th="Description">Nein</td>
27 | <td data-th="Behavior">Das Element wird nicht angezeigt. Dieses Layout kann auf jedes AMP-Element angewendet werden. Die Komponente beansprucht keinen Platz auf dem Bildschirm, d. h., sie verhält sich, als ob ihr Anzeigestil "none" lauten würde. Es wird angenommen, dass sich das Element bei einer Nutzeraktion selbst anzeigen kann. Beispiel: <a href="/docs/reference/extended/amp-lightbox.html"><code>amp-lightbox</code></a></td>
28 | </tr>
29 | <tr>
30 | <td class="col-twenty" data-th="Layout type"><code>fixed</code></td>
31 | <td class="col-twenty" data-th="Description">Ja</td>
32 | <td data-th="Behavior">Das Element hat eine feste Breite und Höhe und kann nicht als responsiv festgelegt werden. Ausgenommen hiervon sind nur die Elemente <a href="/docs/reference/amp-pixel.html"><code>amp-pixel</code></a> und <a href="/docs/reference/extended/amp-audio.html"><code>amp-audio</code></a>.</td>
33 | </tr>
34 | <tr>
35 | <td class="col-twenty" data-th="Layout type"><code>responsive</code></td>
36 | <td class="col-twenty" data-th="Description">Ja</td>
37 | <td data-th="Behavior">Die Breite des Elements wird an die Breite des Containerelements angepasst. Seine Höhe wird automatisch entsprechend dem Seitenverhältnis festgelegt, das sich aus den width- und height-Attributen ergibt. Dieses Layout funktioniert sehr gut mit den meisten AMP-Elementen einschließlich <a href="/docs/reference/amp-img.html"><code>amp-img</code></a> und <a href="/docs/reference/amp-video.html"><code>amp-video</code></a>. Der verfügbare Platz hängt vom übergeordneten Element ab und kann außerdem mittels <code>max-width</code>-CSS angepasst werden.</td>
38 | </tr>
39 | <tr>
40 | <td class="col-twenty" data-th="Layout type"><code>fixed-height</code></td>
41 | <td class="col-twenty" data-th="Description">Nur Höhe</td>
42 | <td data-th="Behavior">Das Element nimmt den verfügbaren Platz ein, aber die Höhe bleibt unverändert. Dieses Layout eignet sich gut für Elemente wie <a href="/docs/reference/extended/amp-carousel.html"><code>amp-carousel</code></a>, bei dem Inhalt horizontal positioniert wird. Das <code>width</code>-Attribut darf nicht vorkommen oder muss auf <code>auto</code> gesetzt sein.</td>
43 | </tr>
44 | <tr>
45 | <td class="col-twenty" data-th="Layout type"><code>fill</code></td>
46 | <td class="col-twenty" data-th="Description">Nein</td>
47 | <td data-th="Behavior">Das Element nimmt den für Breite und Höhe verfügbaren Platz ein. Das Layout eines fill-Elements stimmt also mit dem seines übergeordneten Elements überein.</td>
48 | </tr>
49 | <tr>
50 | <td class="col-twenty" data-th="Layout type"><code>container</code></td>
51 | <td class="col-twenty" data-th="Description">Nein</td>
52 | <td data-th="Behavior">Die Größe der untergeordneten Elemente des Elements kann wie bei einem normalen HTML-<code>div</code>-Element definiert werden. Es wird angenommen, dass die Komponente selbst kein bestimmtes Layout hat, sondern nur als Container fungiert. Seine untergeordneten Elemente werden sofort gerendert.</td>
53 | </tr>
54 | </tbody>
55 | </table>
56 |
57 | ### Was passiert, wenn Breite und Höhe nicht definiert sind?
58 |
59 | In einigen Fällen, in denen `width` oder `height` nicht angegeben sind, kann die AMP-Laufzeit diese Werte standardmäßig wie folgt festlegen:
60 |
61 | * [`amp-pixel`](/docs/reference/amp-pixel.html): Breite und Höhe erhalten standardmäßig den Wert 0.
62 | * [`amp-audio`](/docs/reference/extended/amp-audio.html): Die Standardwerte für Breite und Höhe werden vom Browser abgeleitet.
63 |
64 | ### Was passiert, wenn das layout-Attribut nicht definiert ist?
65 |
66 | Das Layoutverhalten wird wie folgt bestimmt:
67 |
68 | * Wenn `height` vorhanden ist und `width` fehlt oder auf `auto` gesetzt ist, wird von einem `fixed-height`-Layout ausgegangen.
69 | * Wenn das `width`- oder `height`-Attribut zusammen mit dem `sizes`-Attribut vorkommt, wird ein `responsive`-Layout angenommen.
70 | * Wenn das `width`- oder `height`-Attribut vorhanden ist, wird von einem `fixed`-Layout ausgegangen.
71 | * Wenn `width` und `height` fehlen, wird ein `container`-Layout angenommen.
72 |
73 | ## Verwendung von @media und media
74 |
75 | Mittels [`@media`](https://developer.mozilla.org/en-US/docs/Web/CSS/@media) können Sie wie bei jeder anderen Website festlegen, wie das Seitenformat aussehen und sich verhalten soll.
76 | Wenn sich die Größe oder Ausrichtung des Browserfensters ändert, werden die Medienabfragen neu ausgewertet und die Elemente werden entsprechend den neuen Ergebnissen ausgeblendet oder angezeigt.
77 |
78 | Weitere Informationen zur Steuerung des Layouts durch Anwenden von Medienabfragen finden Sie unter [CSS-Medienabfragen für Responsivität verwenden](https://developers.google.com/web/fundamentals/design-and-ui/responsive/fundamentals/use-media-queries?hl=de).
79 |
80 | Eine zusätzliche Funktion für das in AMP verfügbare Responsive Webdesign ist das `media`-Attribut.
81 | Dieses Attribut kann mit jedem AMP-Element verwendet werden. Es funktioniert ähnlich wie Medienabfragen in Ihrem globalen Stylesheet, wirkt sich aber nur auf einer einzigen Seite auf das konkrete Element aus.
82 |
83 | Im folgenden Beispiel haben wir zwei Bilder mit sich gegenseitig ausschließenden Medienabfragen.
84 |
85 | [sourcecode:html]
86 | <amp-img
87 | media="(min-width: 650px)"
88 | src="wide.jpg"
89 | width=466
90 | height=355
91 | layout="responsive" >
92 | </amp-img>
93 | [/sourcecode]
94 |
95 | In Abhängigkeit von der Bildschirmbreite wird entweder das eine oder das andere Bild abgerufen und gerendert.
96 |
97 | [sourcecode:html]
98 | <amp-img
99 | media="(max-width: 649px)"
100 | src="narrow.jpg"
101 | width=527
102 | height=193
103 | layout="responsive" >
104 | </amp-img>
105 | [/sourcecode]
106 |
107 | ## srcset und sizes verwenden
108 |
109 | Mit dem `srcset`-Attribut können Sie die Assets eines Elements basierend auf unterschiedlichen Medienausdrücken steuern.
110 | Verwenden Sie es insbesondere für alle [`amp-img`](/docs/reference/amp-img.html)-Tags, um anzugeben, welche Bild-Assets je nach Bildschirmgröße verwendet werden sollen.
111 |
112 | In diesem einfachen Beispiel wird mit `srcset` angegeben, welches Bild je nach Bildschirmbreite verwendet werden soll.
113 | Mit dem `w`-Deskriptor wird dem Browser die Breite der einzelnen Bilder in der Liste mitgeteilt:
114 |
115 | [sourcecode:html]
116 | <amp-img
117 | src="wide.jpg"
118 | srcset="wide.jpg" 640w,
119 | "narrow.jpg" 320w >
120 | </amp-img>
121 | [/sourcecode]
122 |
123 | **Hinweis:** AMP unterstützt den `w`-Deskriptor in allen Browsern.
124 |
125 | Weitere Informationen zum Erstellen responsiver Bilder mittels `srcset` finden Sie unter [Using Responsive Images (Now)](http://alistapart.com/article/using-responsive-images-now).
126 |
127 | Sie können auch das `sizes`-Attribut zusammen mit `srcset` verwenden.
128 | Mit dem `sizes`-Attribut wird beschrieben, wie die Elementgröße basierend auf einem Medienausdruck berechnet wird.
129 | Je nach der berechneten Größe des Elements wählt der User-Agent die am besten passende Quelle aus, die vom `srcset`-Attribut bereitgestellt wird.
130 |
131 | Betrachten Sie das folgende Beispiel:
132 |
133 | [sourcecode:html]
134 | <amp-img
135 | src="wide.jpg"
136 | srcset="wide.jpg" 640w,
137 | "narrow.jpg" 320w
138 | sizes="(min-width: 650px) 50vw, 100vw" >
139 | </amp-img>
140 | [/sourcecode]
141 |
142 | Die Breite des Elements wird durch das `sizes`-Attribut als 50 % der Größe des Darstellungsbereichs definiert, wenn dieser 650 px oder mehr beträgt.
143 | Wenn der Darstellungsbereich z. B. 800 px groß ist, wird die Breite des Elements auf 400 px gesetzt.
144 | Der Browser wählt dann die passende `srcset`-Ressource für 400 px aus. Unter der Annahme, dass das Gerätepixelverhältnis 1 beträgt, ist das in diesem Fall `narrow.jpg` (320 px).
145 |
146 | **Wichtig:** Wenn das sizes-Attribut zusammen mit Breite und Höhe angegeben wird, wird das Layout standardmäßig auf `responsive` gesetzt.
147 |
148 | Weitere Informationen zur Verwendung der Attribute `sizes` und `srcset` bei Medienabfragen finden Sie in diesem Blogpost zu [srcset und sizes](https://ericportis.com/posts/2014/srcset-sizes/).
149 |
150 | ## Platzhalter und Fallbacks einschließen
151 |
152 | ### placeholder
153 |
154 | Das mit dem `placeholder`-Attribut gekennzeichnete Element fungiert als Platzhalter für das übergeordnete AMP-Element.
155 | Bei Angabe eines `placeholder`-Elements muss dieses dem AMP-Element direkt untergeordnet sein.
156 |
157 | [sourcecode:html]
158 | <amp-anim src="animated.gif" width=466 height=355 layout="responsive" >
159 | <amp-img placeholder src="preview.png" layout="fill"></amp-img>
160 | </amp-anim>
161 | [/sourcecode]
162 |
163 | Standardmäßig wird der Platzhalter für das AMP-Element sofort angezeigt, auch wenn die Ressourcen des AMP-Elements nicht heruntergeladen oder initialisiert wurden.
164 | Wenn das AMP-Element bereit ist, blendet es in der Regel seinen Platzhalter aus und zeigt den Inhalt an.
165 |
166 | **Hinweis:** Der Platzhalter braucht kein AMP-Element zu sein. Jedes HTML-Element kann als Platzhalter fungieren.
167 |
168 | ### fallback
169 |
170 | Mit dem `fallback`-Attribut können Sie das Fallback-Verhalten für jedes Element festlegen, das vom Browser nicht unterstützt wird.
171 | So können Sie z. B. dem Nutzer mithilfe des `fallback`-Attributs mitteilen, dass eine bestimmte Funktion vom Browser nicht unterstützt wird:
172 |
173 | [sourcecode:html]
174 | <amp-video width=400 height=300 src="https://yourhost.com/videos/myvideo.mp4"
175 | poster="myvideo-poster.jpg" >
176 | <div fallback>
177 | <p>Your browser doesn’t support HTML5 video.</p>
178 | </div>
179 | </amp-video>
180 | [/sourcecode]
181 |
182 | Das `fallback`-Attribut kann für jedes HTML-Element und nicht nur für AMP-Elemente festgelegt werden.
183 | Bei Angabe des `fallback`-Elements muss dieses dem AMP-Element direkt untergeordnet sein.
184 |
185 | ### noloading
186 |
187 | Viele AMP-Elemente wurden auf die weiße Liste für das Einblenden einer "Ladeanzeige" gesetzt. Diese Anzeige ist eine einfache Animation, die darauf hinweist, dass das Element noch nicht vollständig geladen wurde.
188 | Durch Hinzufügen des `noloading`-Attributs kann dieses Verhalten für Elemente deaktiviert werden.
189 |
```
--------------------------------------------------------------------------------
/content/docs/guides/deploy/analytics_amp/analytics_basics@pt_BR.md:
--------------------------------------------------------------------------------
```markdown
1 | ---
2 | $title: Analytics: conceitos básicos
3 | toc: true
4 | ---
5 |
6 | Comece aqui a aprender os conceitos básicos sobre o AMP Analytics.
7 |
8 | [TOC]
9 |
10 | ## Usar amp-pixel ou amp-analytics?
11 |
12 | O AMP oferece dois componentes para atender às suas necessidades de análise e medição:
13 | [amp-pixel](/docs/reference/amp-pixel.html) e
14 | [amp-analytics](/docs/reference/extended/amp-analytics.html).
15 | Ambas as opções enviam dados de análise a um endpoint definido.
16 |
17 | Se você estiver buscando comportamentos como um simples
18 | [pixel de rastreamento](https://en.wikipedia.org/wiki/Web_beacon#Implementation),
19 | o componente `amp-pixel` proporciona um rastreamento de visualização de páginas básico;
20 | os dados de visualização de página são enviados para um URL definido.
21 | Algumas integrações com fornecedor podem necessitar esse componente,
22 | em cujo caso eles especificarão o terminal exato do URL.
23 |
24 | Para a maioria das soluções de análise, utilize `amp-analytics`.
25 | O rastreamento de visualizações de páginas também funciona em `amp-analytics`.
26 | No entanto, você também pode rastrear o envolvimento do usuário com qualquer tipo de conteúdo de página,
27 | incluindo cliques em links e botões.
28 | Além disso, você pode medir até onde o usuário rolou a página,
29 | se ele se interagiu ou não com mídias sociais e muito mais
30 | (consulte
31 | [Informações detalhadas sobre o AMP Analytics](/docs/guides/analytics/deep_dive_analytics.html)).
32 |
33 | Como parte da integração com a plataforma AMP,
34 | provedores ofereceram configurações predefinidas de`amp-analytics`
35 | para que seja mais fácil capturar dados e movê-los para suas ferramentas de rastreamento.
36 | Acesse a documentação para fornecedores da
37 | [especificação do amp-analytics](/docs/reference/extended/amp-analytics.html).
38 |
39 | Você pode usar `amp-pixel` e `amp-analytics` em suas páginas:
40 | `amp-pixel` para rastreamento simples de visualizações de páginas
41 | e `amp-analytics` para todo o resto.
42 | Você também pode adicionar várias instâncias de cada tag disponível.
43 | Se estiver trabalhando com vários provedores de análises,
44 | precisará de uma tag por solução.
45 | Tenha em mente que páginas AMP mais simples são melhores para os usuários,
46 | portanto, se não precisar de tags adicionais, não as use.
47 |
48 | ## Criar uma configuração de análise simples
49 |
50 | Saiba como criar uma configuração simples de
51 | [amp-pixel](/docs/reference/amp-pixel.html) e
52 | [amp-analytics](/docs/reference/extended/amp-analytics.html).
53 |
54 | ### Configuração simples de amp-pixel
55 |
56 | Para criar uma configuração simples de `amp-pixel`,
57 | insira algo parecido com o seguinte no corpo de sua página AMP:
58 |
59 | [sourcecode:html]
60 | <amp-pixel src="https://foo.com/pixel?RANDOM"></amp-pixel>
61 | [/sourcecode]
62 |
63 | Neste exemplo,
64 | os dados de visualização de página são enviados para um URL definido, juntamente com um número aleatório.
65 | A variável `RANDOM` é uma entre muitas
66 | [variáveis de substituição na plataforma AMP](https://github.com/ampproject/amphtml/blob/master/spec/amp-var-substitutions.md).
67 | Saiba mais sobre
68 | [Substituição de variáveis](/docs/guides/analytics/analytics_basics.html#variable-substitution) aqui.
69 |
70 | O componente [amp-pixel](/docs/reference/amp-pixel.html)
71 | é integrado,
72 | de forma que você não precisa de uma declaração de inclusão, como ocorre
73 | com os componentes estendidos do AMP, incluindo `amp-analytics`.
74 | Entretanto, você deve colocar a tag `amp-pixel` o mais perto possível
75 | do começo do seu `<body>`.
76 | O pixel de rastreamento só será acionado quando a própria tag for visualizada.
77 | Se `amp-pixel` estiver posicionado perto da parte inferior da página,
78 | ele pode não ser acionado.
79 |
80 | ### Configuração simples de amp-analytics
81 |
82 | Para criar uma configuração simples de
83 | [amp-analytics](/docs/reference/extended/amp-analytics.html),
84 | você deve primeiro incluir esta declaração `custom-element`
85 | no `<head>` do documento AMP (consulte também
86 | [Declaração de inclusão de componente](/docs/reference/extended.html#component-inclusion-declaration)):
87 |
88 | [sourcecode:html]
89 | <script async custom-element="amp-analytics" src="https://cdn.ampproject.org/v0/amp-analytics-0.1.js"></script>
90 | [/sourcecode]
91 |
92 | O seguinte exemplo é semelhante ao [exemplo do `amp-pixel`](/docs/guides/analytics/analytics_basics.html#simple-amp-pixel-configuration).
93 | Todas as vezes que uma página está visível,
94 | o evento é acionado e
95 | envia os dados de page view para um URL definido, juntamente com uma ID aleatória:
96 |
97 | [sourcecode:html]
98 | <amp-analytics>
99 | <script type="application/json">
100 | {
101 | "requests": {
102 | "pageview": "https://foo.com/pixel?RANDOM",
103 | },
104 | "triggers": {
105 | "trackPageview": {
106 | "on": "visible",
107 | "request": "pageview"
108 | }
109 | }
110 | }
111 | </script>
112 | </amp-analytics>
113 | [/sourcecode]
114 |
115 | No exemplo acima, definimos que uma solicitação chamada page view seria https://foo.com/pixel?RANDOM. Como discutido antes, RANDOM é substituído por um número aleatório, de forma que a solicitação acabe sendo algo parecido com https://foo.com/pixel?0.23479283687235653498734.
116 |
117 | Quando a página se torna visível
118 | (como especificado pelo uso da palavra-chave de acionamento `visible`),
119 | um evento é acionado e a solicitação `pageview` é enviada.
120 | O atributo triggers determina quando a solicitação de page view é acionada.
121 | Saiba mais sobre [solicitações e acionamentos](/docs/guides/analytics/deep_dive_analytics.html#requests-triggers--transports).
122 |
123 | ## Substituição de variáveis
124 |
125 | Tanto o componente [amp-pixel](/docs/reference/amp-pixel.html) quanto
126 | o [amp-analytics](/docs/reference/extended/amp-analytics.html)
127 | permitem todas as substituições de variáveis de URL padrão (consulte
128 | [Substituições de variáveis de AMP HTML](https://github.com/ampproject/amphtml/blob/master/spec/amp-var-substitutions.md)).
129 | No exemplo a seguir,
130 | a solicitação de visualização de página é enviada ao URL
131 | juntamente com o URL canônico do documento atual, seu título e uma
132 | [ID de cliente](/docs/guides/analytics/analytics_basics.html#user-identification):
133 |
134 | [sourcecode:html]
135 | <amp-pixel src="https://example.com/analytics?url=${canonicalUrl}&title=${title}&clientId=${clientId(site-user-id)}"></amp-pixel>
136 | [/sourcecode]
137 |
138 | Devido à sua simplicidade,
139 | a tag `amp-pixel` somente pode incluir variáveis definidas pela plataforma
140 | ou que o tempo de execução do AMP possa analisar a partir da página AMP.
141 | No exemplo acima,
142 | a plataforma preenche os valores do
143 | `canonicalURL` e do `clientId(site-user-id)`.
144 | A tag `amp-analytics` pode incluir as mesmas variáveis que `amp-pixel`,
145 | assim como variáveis definidas de forma exclusiva dentro da configuração da tag.
146 |
147 | Use o formato `${varName}` em uma string de solicitação para uma variável definida por página
148 | ou plataforma.
149 | A tag `amp-analytics` substituirá o modelo por seu valor real
150 | no momento da construção da solicitação de análise (consulte também
151 | [Variáveis permitidas no amp-analytics](https://github.com/ampproject/amphtml/blob/master/extensions/amp-analytics/analytics-vars.md)).
152 |
153 | No seguinte exemplo de `amp-analytics`,
154 | a solicitação de visualização de página é enviada ao URL,
155 | com dados adicionais extraídos de substituições de variáveis,
156 | algumas fornecidas pela plataforma,
157 | algumas definidas em linha,
158 | dentro da configuração de `amp-analytics`:
159 |
160 | [sourcecode:html]
161 | <amp-analytics>
162 | <script type="application/json">
163 | {
164 | "requests": {
165 | "pageview":"https://example.com/analytics?url=${canonicalUrl}&title=${title}&acct=${account}&clientId=${clientId(site-user-id)}",
166 | },
167 | "vars": {
168 | "account": "ABC123",
169 | },
170 | "triggers": {
171 | "someEvent": {
172 | "on": "visible",
173 | "request": "pageview",
174 | "vars": {
175 | "title": "My homepage",
176 | }
177 | }
178 | }
179 | }
180 | </script>
181 | </amp-analytics>
182 | [/sourcecode]
183 |
184 | No exemplo acima,
185 | as variáveis `account` e `title` são definidas
186 | na configuração de `amp-analytics`.
187 | As variáveis `canonicalUrl` e `clientId` não são definidas na configuração,
188 | de forma que seus valores são substituídos pela plataforma.
189 |
190 | **Importante:** a substituição de variáveis é flexível;
191 | você pode ter as mesmas variáveis definidas em diferentes locais,
192 | e o tempo de execução do AMP analisará os valores nessa ordem de precedência
193 | (consulte [Ordem da substituição de variáveis](/docs/guides/analytics/deep_dive_analytics.html#variable-substitution-ordering)).
194 |
195 | ## Identificação do usuário
196 |
197 | Websites usam cookies para armazenar informações específicas de um usuário no navegador.
198 | Os cookies podem ser usados para dizer que um usuário já visitou um site antes.
199 | No AMP,
200 | as páginas podem ser fornecidas pelo website de um editor ou um cache
201 | (como o Google AMP Cache).
202 | O website do editor e o cache provavelmente têm domínios distintos.
203 | Por razões de segurança,
204 | os navegadores podem limitar o acesso aos cookies de outros domínios (e geralmente o fazem)
205 | (consulte também
206 | [Rastrear usuários em diferentes origens](https://github.com/ampproject/amphtml/blob/master/extensions/amp-analytics/cross-origin-tracking.md)).
207 |
208 | Por padrão, o
209 | AMP administrará a provisão de uma ID de cliente, seja a página acessada pelo website original do editor ou por um cache.
210 | A ID de cliente gerada pelo AMP tem o valor `"amp-"`
211 | seguido de uma string codificada aleatória `base64` e permanece a mesma
212 | para o usuário se ele voltar a visitar a página.
213 |
214 | O AMP administra a leitura e gravação da ID de cliente em todos os casos.
215 | Isso é particularmente notável no caso em que uma página é fornecida
216 | através de um cache ou mostrada fora do contexto de visualização
217 | do site original do editor.
218 | Nessa circunstância, o acesso aos cookies do site do editor não está disponível.
219 |
220 | Quando uma página AMP é fornecida a partir do site do editor,
221 | a estrutura da ID de cliente que o AMP usa pode ser instruída a buscar e usar
222 | um cookie de fallback.
223 | Nesse caso,
224 | o argumento `cid-scope-cookie-fallback-name` da variável `clientId`
225 | é interpretado como o nome do cookie.
226 | O formato pode aparecer como
227 | `CLIENT_ID(cid-scope-cookie-fallback-name)` ou como
228 | `${clientId(cid-scope-cookie-fallback-name)}`.
229 |
230 | Por exemplo:
231 |
232 | [sourcecode:html]
233 | <amp-pixel src="https://foo.com/pixel?cid=CLIENT_ID(site-user-id-cookie-fallback-name)"></amp-pixel>
234 | [/sourcecode]
235 |
236 | Se o AMP descobrir que o cookie está definido,
237 | a substituição da ID de cliente retornará o valor do cookie.
238 | Se o AMP descobrir que esse cookie não está definido,
239 | ele gerará um valor do formulário `amp-` seguido
240 | de uma string codificada aleatória base64.
241 |
242 | Saiba mais sobre a substituição da ID de cliente,
243 | incluindo como adicionar uma ID de notificação de usuário adicional em
244 | [Variáveis permitidas no AMP Analytics](https://github.com/ampproject/amphtml/blob/master/extensions/amp-analytics/analytics-vars.md).
245 |
```
--------------------------------------------------------------------------------
/assets/sass/pages/_about-who-vertical.scss:
--------------------------------------------------------------------------------
```scss
1 | body.about-who-vertical {
2 |
3 | .about-who-block {
4 | position: relative;
5 | overflow: hidden;
6 |
7 | &::before, &::after {
8 | background: $gradient-med-faded;
9 | content: '';
10 | display: none;
11 | height: 2000px;
12 | left: 0;
13 | position: absolute;
14 | width: 100%;
15 | transform: skewY(-36deg);
16 | transform-origin: top left;
17 | }
18 |
19 | &::before {
20 | top: -1600px;
21 | }
22 |
23 | &::after {
24 | bottom: -2200px;
25 | display: block;
26 | }
27 |
28 | .small a {
29 | font-size: 16px;
30 | text-transform: none;
31 | }
32 | }
33 |
34 | .container.xl {
35 | position: relative;
36 | z-index: 1;
37 | }
38 |
39 | .hero {
40 | position: relative;
41 | padding: 100px 5% 200px 5%;
42 |
43 | .hero-images {
44 | position: absolute;
45 | left: 1440px;
46 | top: -20px;
47 |
48 | .triangle {
49 | position: absolute;
50 | right: calc((1440px - 100vw)/2);
51 | top: 0;
52 | width: 630px;
53 | }
54 |
55 | .phones {
56 | position: absolute;
57 | right: -150px;
58 | top: 70px;
59 | width: 670px;
60 | }
61 | }
62 |
63 | .label {
64 | @extend %text-label;
65 | }
66 |
67 | .title {
68 | position: relative;
69 | max-width: 700px;
70 | margin-bottom: 50px;
71 | }
72 |
73 | .paragraph {
74 | max-width: 600px;
75 | margin-bottom: 70px;
76 | }
77 |
78 | .icon {
79 | width: 76px;
80 | }
81 |
82 | .example-users {
83 | align-items: center;
84 | display: flex;
85 | flex-direction: row;
86 | flex-wrap: wrap;
87 | justify-content: space-between;
88 | position: relative;
89 | width: 62%;
90 | min-width: 651px;
91 |
92 | .example-user-logo {
93 | flex: 0 0 18%;
94 | position: relative;
95 |
96 | &.nyt {
97 | flex: 0 0 26%;
98 | }
99 |
100 | &.globo {
101 | flex: 0 0 10%;
102 | }
103 |
104 | &.wapo {
105 | flex: 0 0 22%;
106 | }
107 |
108 | &.wired {
109 | flex: 0 0 14%;
110 | }
111 |
112 | &.sharethrough {
113 | flex: 0 0 28%;
114 | top: -14px;
115 | }
116 |
117 | &.triplelift {
118 | flex: 0 0 16%;
119 | }
120 |
121 | &.teads {
122 | flex: 0 0 10%;
123 | }
124 |
125 | &.indexexchange {
126 | top: -8px;
127 | }
128 |
129 | &.google {
130 | flex: 0 0 15%;
131 | }
132 |
133 | &.doubleclick {
134 | flex: 0 0 18%;
135 | }
136 |
137 | &.cloudflare {
138 | flex: 0 0 25%;
139 | top: -8px;
140 | }
141 | }
142 | }
143 | }
144 |
145 | .why-use {
146 | padding: 0 5% 165px 5%;
147 |
148 | h3 {
149 | text-align: center;
150 | margin-bottom: 45px;
151 | }
152 |
153 | .reasons.desktop {
154 | display: flex;
155 | justify-content: space-between;
156 |
157 | .reason {
158 | flex: 0 0 27%;
159 | text-align: center;
160 |
161 | amp-img {
162 | margin: 20px 0 40px;
163 | max-height: 100px;
164 | }
165 |
166 | h4 {
167 | padding-right: 10px;
168 | }
169 | }
170 | }
171 |
172 | .reasons.mobile,
173 | .reasons.tablet {
174 | display: none;
175 | }
176 | }
177 |
178 | .points {
179 | padding-top: 0;
180 |
181 | h3 {
182 | margin: 0 auto 50px;
183 | max-width: 700px;
184 | text-align: center;
185 | }
186 | }
187 |
188 | .case-study {
189 | padding: 0 15.4% 115px 15.4%;
190 |
191 | h3 {
192 | margin-bottom: 45px;
193 | text-align: center;
194 | }
195 |
196 | .desktop .card {
197 | flex: 0 0 calc(50% - 20px);
198 | flex-basis: calc(50% - 20px);
199 | }
200 |
201 | amp-carousel {
202 | display: none;
203 | }
204 | }
205 |
206 | .large-cta {
207 | .button {
208 | font-size: 14px;
209 | text-transform: uppercase;
210 | }
211 | }
212 |
213 | .about-who-block.centered {
214 | &::before {
215 | top: -50px;
216 | }
217 |
218 | .hero {
219 | text-align: center;
220 |
221 | .hero-images {
222 | bottom: 0;
223 | left: 0;
224 | right: 0;
225 | top: 0;
226 |
227 | .lines {
228 | bottom: 10%;
229 | height: 260px;
230 | left: -15%;
231 | position: absolute;
232 | width: 410px;
233 | }
234 | }
235 |
236 | amp-img, .title, .paragraph, .example-users {
237 | margin-left: auto;
238 | margin-right: auto;
239 | max-width: 800px;
240 | }
241 |
242 | .paragraph {
243 | max-width: 700px;
244 | }
245 | }
246 |
247 | .case-study {
248 | position: relative;
249 |
250 | .lines {
251 | height: 260px;
252 | position: absolute;
253 | right: -17%;
254 | top: -35%;
255 | width: 410px;
256 | }
257 | }
258 | }
259 |
260 | .about-who-block.amp-ads {
261 | .hero {
262 | .title {
263 | max-width: 500px;
264 | }
265 |
266 | .hero-images .lines {
267 | bottom: 30%;
268 | z-index: -1;
269 | }
270 | }
271 | }
272 |
273 | .about-who-block.publishers {
274 | .hero-images .triangle {
275 | top: -80px;
276 | }
277 | }
278 |
279 | .about-who-block.advertisers {
280 | &::after {
281 | display: none;
282 | }
283 |
284 | .hero {
285 | padding-left: 60%;
286 | width: 35%
287 | }
288 |
289 | .hero-images {
290 | left: auto;
291 | top: 30px;
292 | bottom: 0;
293 | right: 1440px;
294 | z-index: -1;
295 |
296 | .triangle {
297 | left: calc((1440px - 100vw)/2);
298 | right: auto;
299 | }
300 |
301 | .phones {
302 | left: -230px;
303 | right: auto;
304 | top: -130px;
305 | width: 1100px;
306 | }
307 |
308 | .lines {
309 | height: 619px;
310 | left: 170px;
311 | position: absolute;
312 | top: 20px;
313 | width: 640px;
314 | }
315 | }
316 | }
317 |
318 | &.rtl {
319 | .about-who-block.publishers .hero {
320 | padding: 100px 45% 200px 5%;
321 | }
322 | }
323 |
324 | @include min-max-screen($tablet-portrait-breakpoint, $tablet-breakpoint) {
325 | .tablet-wrapper {
326 | position: relative;
327 | padding: 28px 22px 25px 22px;
328 | background: $color-white;
329 | box-shadow: 0px 3px 20px 0 rgba(0, 0, 0, 0.075);
330 | margin-bottom: 40px;
331 | }
332 |
333 | .why-use {
334 | .reasons.tablet {
335 | display: block;
336 | width: 106%;
337 | position: relative;
338 | left: -3%;
339 |
340 | .card-container {
341 | padding: 0;
342 | justify-content: center;
343 | }
344 |
345 | .card--spacer {
346 | flex: 0 0 46%;
347 | }
348 |
349 | .reason {
350 | padding: 20px;
351 | flex: 0 0 46%;
352 | text-align: center;
353 | display: flex;
354 | flex-direction: column;
355 | justify-content: center;
356 |
357 | h4 {
358 | padding-right: 10px;
359 | }
360 |
361 | p {
362 | display: inline-block;
363 | max-width: 400px;
364 | text-align: left;
365 | text-align: start;
366 | }
367 | }
368 | }
369 |
370 | .reasons.desktop {
371 | display: none;
372 | }
373 | }
374 |
375 | &.rtl {
376 | .why-use .reasons.tablet {
377 | left: auto;
378 | right: -3%;
379 | }
380 | }
381 | }
382 |
383 | @include max-screen($tablet-breakpoint) {
384 | nav.breadcrumb li,
385 | nav.breadcrumb a {
386 | color: $color-white;
387 | }
388 |
389 | .about-who-block {
390 | &::before {
391 | background: $gradient-anglebold;
392 | content: '';
393 | display: block;
394 | height: 600px;
395 | left: 0;
396 | position: absolute;
397 | width: 100%;
398 | top: 0;
399 | transform: skewY(-36deg);
400 | transform-origin: top left;
401 | }
402 | }
403 |
404 | .hero {
405 | padding: 68px 0 40px 0;
406 | text-align: center;
407 |
408 | .title, .paragraph, .example-users {
409 | margin-left: auto;
410 | margin-right: auto;
411 | max-width: 800px;
412 | }
413 |
414 | .icon {
415 | display: none;
416 | }
417 |
418 | .label {
419 | color: $color-white;
420 | }
421 |
422 | .hero-images {
423 | display: none;
424 | }
425 | }
426 |
427 | .why-use, .case-study {
428 | padding: 0 0 50px 0;
429 | }
430 |
431 | .case-study {
432 | .card-container {
433 | padding-left: 0;
434 | padding-right: 0;
435 | justify-content: center;
436 | }
437 |
438 | .lines {
439 | z-index: -1;
440 | }
441 | }
442 |
443 | .reason {
444 | amp-img {
445 | height: 100px;
446 | margin: 10px 0;
447 | min-height: 100px;
448 | }
449 | }
450 |
451 | .about-who-block.advertisers {
452 | .hero {
453 | padding-left: 0;
454 | width: auto;
455 | }
456 | }
457 |
458 | &.rtl {
459 | .about-who-block.publishers .hero {
460 | padding-right: 5%;
461 | }
462 | }
463 | }
464 |
465 | @include max-screen($tablet-portrait-breakpoint) {
466 | .hero {
467 | .title {
468 | color: $color-white;
469 | width: 80%;
470 | margin-bottom: 35px;
471 | }
472 |
473 | .paragraph {
474 | position: relative;
475 | padding: 28px 22px 25px 22px;
476 | background: $color-white;
477 | box-shadow: 0px 3px 20px 0 rgba(0, 0, 0, 0.075);
478 | max-width: 400px;
479 | margin-bottom: 40px;
480 | }
481 | }
482 |
483 | .points {
484 | margin-bottom: 50px;
485 |
486 | h3 {
487 | margin-bottom: 20px;
488 | }
489 | }
490 |
491 | .why-use, .case-study {
492 | padding: 0 0 50px 0;
493 | }
494 |
495 | .case-study {
496 | .desktop {
497 | display: none;
498 | }
499 |
500 | amp-carousel {
501 | display: block;
502 | width: 106%;
503 | position: relative;
504 | left: -3%;
505 |
506 | .card-container {
507 | padding: 0;
508 | justify-content: center;
509 | }
510 |
511 | .card {
512 | flex: 0 0 94%;
513 | }
514 | }
515 | }
516 |
517 | .why-use {
518 | .reasons.mobile {
519 | display: block;
520 | width: 106%;
521 | position: relative;
522 | left: -3%;
523 |
524 | .card-container {
525 | padding: 0;
526 | justify-content: center;
527 | }
528 |
529 | .reason {
530 | padding: 20px;
531 | flex: 0 0 94%;
532 | text-align: center;
533 | display: flex;
534 | flex-direction: column;
535 | justify-content: center;
536 |
537 | h4 {
538 | padding-right: 10px;
539 | }
540 |
541 | p {
542 | display: inline-block;
543 | max-width: 400px;
544 | text-align: left;
545 | text-align: start;
546 | }
547 | }
548 | }
549 |
550 | .reasons.desktop {
551 | display: none;
552 | }
553 | }
554 |
555 | .hero .example-users {
556 | justify-content: space-around;
557 | min-width: 0;
558 | position: relative;
559 | width: 90%;
560 |
561 | .example-user-logo {
562 | margin: 10px 0;
563 |
564 | &.nyt {
565 | flex: 0 0 52%;
566 | left: -3%;
567 | }
568 |
569 | &.globo {
570 | flex: 0 0 20%;
571 | }
572 |
573 | &.wapo {
574 | flex: 0 0 44%;
575 | }
576 |
577 | &.wired {
578 | flex: 0 0 28%;
579 | left: 3%;
580 | }
581 |
582 | &.sharethrough {
583 | flex: 0 0 56%;
584 | left: -10%;
585 | }
586 |
587 | &.triplelift {
588 | flex: 0 0 30%;
589 | left: -10%;
590 | }
591 |
592 | &.teads {
593 | flex: 0 0 20%;
594 | }
595 |
596 | &.indexexchange {
597 | flex: 0 0 41%;
598 | }
599 |
600 | &.google {
601 | flex: 0 0 35%;
602 | }
603 |
604 | &.doubleclick {
605 | flex: 0 0 35%;
606 | left: -10%;
607 | }
608 |
609 | &.cloudflare {
610 | flex: 0 0 40%;
611 | }
612 | }
613 | }
614 |
615 | .about-who-block.centered {
616 | .hero .example-users {
617 | left: 3%;
618 | max-width: 450px;
619 | }
620 | }
621 |
622 | &.rtl {
623 | .why-use .reasons.mobile,
624 | .case-study amp-carousel {
625 | left: auto;
626 | right: -3%;
627 | }
628 | }
629 | }
630 |
631 | @include max-screen($mobile-medium-breakpoint) {
632 | .reason {
633 | amp-img {
634 | height: 50px;
635 | margin: 10px 0;
636 | min-height: 50px;
637 | }
638 | }
639 | }
640 | }
```
--------------------------------------------------------------------------------
/content/learn/[email protected]:
--------------------------------------------------------------------------------
```yaml
1 | hero:
2 | title@: Zwiększanie wydajności przez AMP
3 | subtitle@: |
4 | Połączenie następujących optymalizacji sprawia, że strony AMP są tak szybkie i sprawiają wrażenie, że ładują się natychmiast:
5 | <p>Jeśli wolisz słuchać niż czytać, w następującym filmie szef zespołu AMP Malte Ubl przedstawia przeglądowe informacje podobne do zamieszczonych w kolejnych akapitach.
6 |
7 | points:
8 | pointlist:
9 | - title@: Zezwalaj tylko na skrypty asynchroniczne
10 | description@: |
11 | Język JavaScript ma potężne możliwości,
12 | może zmodyfikować niemal każdy aspekt strony,
13 | ale może także zablokować konstrukcję modelu DOM i opóźnić renderowanie stron
14 | (zobacz też [Dodawanie interaktywności przy użyciu JavaScript](https://developers.google.com/web/fundamentals/performance/critical-rendering-path/adding-interactivity-with-javascript)).
15 | Aby uniemożliwić skryptom JavaScript opóźnianie renderowania stron,
16 | AMP zezwala wyłącznie na asynchroniczne skrypty JavaScript.
17 | <p>Strony AMP nie mogą zawierać żadnego napisanego przez autora skryptu JavaScript.
18 | Zamiast korzystania z języka JavaScript,
19 | interaktywne funkcje stron są obsługiwane w niestandardowych elementach AMP.
20 | Niestandardowe elementy AMP mogą zawierać wewnątrz skrypt JavaScript,
21 | ale zaprojektowano je starannie w taki sposób, aby nie powodowały one pogorszenia wydajności.
22 | <p>Chociaż skrypty JS niezależnych podmiotów są dozwolone w ramkach iframe,
23 | nie mogą one blokować renderowania.
24 | Jeśli na przykład niezależny skrypt JS używa
25 | [fatalnej dla wydajności funkcji API `document.write`](http://www.stevesouders.com/blog/2012/04/10/dont-docwrite-scripts/),
26 | nie blokuje ona renderowania strony głównej.
27 | - title@: Statycznie nadaj rozmiary wszystkim zasobom
28 | description@: |
29 | Zasoby zewnętrzne, takie jak obrazy, reklamy lub ramki iframe muszą informować o swoim rozmiarze w HTML,
30 | dzięki czemu AMP może określić rozmiar i pozycję każdego elementu przed pobraniem zasobów.
31 | AMP ładuje układ strony bez oczekiwania na pobranie jakichkolwiek zasobów.
32 | <p>AMP rozłącza układ dokumentu od układu zasobów.
33 | Tylko jedno żądanie HTTP jest potrzebne do wyrenderowania całego dokumentu
34 | ([i czcionek](#font-triggering-must-be-efficient)).
35 | Ponieważ AMP zoptymalizowano w celu uniknięcia kosztownego przeliczania stylów i układów w przeglądarce,
36 | po załadowaniu zasobu nie ma żadnego ponownego rozmieszczania.
37 | - title@: Nie pozwól, aby mechanizmy rozszerzeń blokowały renderowanie
38 | description@: |
39 | AMP nie pozwala, aby mechanizmy rozszerzeń blokowały renderowanie stron.
40 | AMP obsługuje rozszerzenia dla takich obiektów jak
41 | [ramki lightbox](/docs/reference/extended/amp-lightbox.html),
42 | [umieszczone elementy z Instagrama](/docs/reference/extended/amp-instagram.html),
43 | [tweety](/docs/reference/extended/amp-twitter.html) itp.
44 | Chociaż wymagają one dodatkowych żądań HTTP,
45 | te żądania nie blokują układu strony ani renderowania.
46 | <p>Każda strona korzystająca z niestandardowego skryptu musi poinformować system AMP,
47 | że może ona mieć niestandardowy znacznik.
48 | Na przykład skrypt [`amp-iframe`](/docs/reference/extended/amp-iframe.html)
49 | informuje system, że w dokumencie wystąpi znacznik `amp-iframe`.
50 | AMP tworzy ramkę iframe zanim otrzyma informacje, co się w niej znajdzie:
51 | example: /content/includes/amp-iframe.md
52 | - title@: Usuń wszystkie niezależne skrypty JavaScript ze ścieżki krytycznej
53 | description@: |
54 | Niezależne skrypty JS lubią korzystać z synchronicznego ładowania JS.
55 | Lubią one także korzystać z funkcji `document.write` w celu tworzenia dodatkowych skryptów synchronicznych.
56 | Jeśli na stronie jest na przykład pięć reklam i każda z nich wykonuje trzy synchroniczne operacje wczytywania
57 | z czasem oczekiwania łącza wynoszącym 1 sekundę,
58 | czas ładowania samych tylko skryptów JS wynosi 15 sekund.
59 | <p>Strony AMP umożliwiają korzystanie z niezależnych skryptów JavaScript, ale tylko w izolowanych ramkach iframe.
60 | Wyrzucenie tych skryptów do ramek iframe pozwala wyeliminować blokowanie wykonywania strony głównej.
61 | Nawet jeśli wyzwalają one liczne przeliczenia stylów,
62 | ich niewielkie ramki iframe mają bardzo mały model DOM.
63 | <p>Przeliczenia stylów i układów odpowiadają rozmiarowi modelu DOM,
64 | dlatego przeliczenia ramek iframe są bardzo szybkie w porównaniu
65 | z przeliczaniem stylów i układów na stronie.
66 | - title@: Cały CSS musi być wstawiany i powiązany z rozmiarem
67 | description@: |
68 | CSS blokuje cały rendering, blokuje ładowanie strony i ma tendencję do rozrastania się.
69 | Na stronach AMP HTML dozwolone są tylko style wstawiane.
70 | Pozwala to usnąć jedno, a często wiele żądań HTTP z krytycznej ścieżki renderowania
71 | w porównaniu z większością stron internetowych.
72 | <p>Ponadto wstawiany arkusz stylów ma rozmiar maksymalny 50 kilobajtów.
73 | Chociaż taki rozmiar pozwala na tworzenie bardzo wyrafinowanych stron,
74 | wymaga on również od autora zachowania zasad „higieny CSS”.
75 | - title@: Wyzwalanie czcionek musi być efektywne
76 | id: font-triggering-must-be-efficient
77 | description@: |
78 | Czcionki internetowe są bardzo duże, dlatego
79 | [optymalizacja czcionek internetowych](https://developers.google.com/web/fundamentals/performance/optimizing-content-efficiency/webfont-optimization)
80 | ma kluczowe znaczenie dla wydajności.
81 | Na typowej stronie z kilkoma skryptami synchronicznymi i kilkoma zewnętrznymi arkuszami stylów,
82 | przeglądarka czeka i czeka na rozpoczęcie pobierania tych olbrzymich czcionek, aż to wszystko się wydarzy.
83 | <p>System AMP deklaruje zero żądań HTTP, dopóki nie rozpocznie się pobieranie czcionek.
84 | Jest to możliwe tylko dlatego, że cały kod JS w AMP ma atrybut async
85 | i dozwolone są tylko style wstawiane;
86 | nie ma żądań HTTP blokujących pobieranie czcionek przez przeglądarkę.
87 | - title@: Minimalizuj przeliczanie stylów
88 | description@: |
89 | Podczas każdego pomiaru wyzwalane jest przeliczanie stylów, które jest kosztowne,
90 | ponieważ przeglądarka musi rozmieścić całą stronę.
91 | Na stronach AMP wszystkie odczyty DOM wydarzają się przed wszystkimi zapisami.
92 | Dzięki temu na każdą ramkę przypada maksymalnie jedno przeliczenie stylów.
93 | <p>Dowiedz się więcej o wpływie przeliczeń stylów i układów na
94 | [wydajność renderowania](https://developers.google.com/web/fundamentals/performance/rendering/).
95 | - title@: Uruchamiaj tylko animacje z akceleracją sprzętową GPU
96 | description@: |
97 | Jedyną metodą przyspieszenia animacji jest uruchamianie ich na procesorze graficznym (GPU).
98 | Procesor GPU ma informacje o warstwach, obsługuje wykonywanie operacji na tych warstwach,
99 | może je przenosić, może je wygaszać, ale nie może zaktualizować układu strony;
100 | przekaże to zadanie do przeglądarki, a to nie jest pożądane.
101 | <p>Reguły dla arkuszy stylów CSS powiązanych z animacjami zapewniają możliwość przyspieszania animacji przez procesor GPU.
102 | W szczególności tylko AMP zezwala na animację i przejście dla transformacji i przezroczystości
103 | , dzięki czemu ponowne rozmieszczenie strony nie jest wymagane.
104 | Dowiedz się więcej o
105 | [używaniu transformacji i przezroczystości dla zmian animacji](https://developers.google.com/web/fundamentals/performance/rendering/stick-to-compositor-only-properties-and-manage-layer-count).
106 | - title@: Ustal priorytety ładowania zasobów
107 | description@: |
108 | AMP steruje pobieraniem wszystkich zasobów i ustala priorytety ładowania zasobów,
109 | ładując tylko to, co potrzebne i pobierając z wyprzedzeniem zasoby ładowane z opóźnieniem.
110 | <p>Kiedy AMP pobiera zasoby, optymalizuje operacje pobierania
111 | w taki sposób, aby najważniejsze zasoby były pobierane jako pierwsze.
112 | Obrazy i reklamy są pobierane tylko wtedy, kiedy jest prawdopodobne, że zostaną zobaczone przez użytkownika,
113 | w części strony widocznej na ekranie lub jeśli jest prawdopodobne, że użytkownik szybko przewinie do nich.
114 | <p>AMP pobiera także z wyprzedzeniem zasoby ładowane z opóźnieniem.
115 | Zasoby są ładowane tak późno, jak to możliwe, ale pobierane z wyprzedzeniem tak wcześnie, jak to możliwe.
116 | Dzięki temu strony ładują się bardzo szybko, ale procesor jest używany tylko wtedy,
117 | gdy zasoby są rzeczywiście wyświetlane dla użytkowników.
118 | - title@: Ładuj strony w mgnieniu oka
119 | description@: |
120 | Nowa [funkcja API preconnect](http://www.w3.org/TR/resource-hints/#dfn-preconnect)
121 | jest intensywnie używana w celu zapewnienia maksymalnej możliwej szybkości żądań HTTP w momencie ich wysyłania.
122 | Dzięki temu
123 | strona może zostać wyrenderowana zanim jeszcze użytkownik jawnie zadeklaruje chęć przejścia do niej;
124 | strona może być już dostępna, kiedy użytkownik rzeczywiście wybierze ją,
125 | dzięki czemu ładowanie nastąpi błyskawicznie.
126 | <p>Chociaż renderowanie z wyprzedzeniem można zastosować do wszystkich treści internetowych,
127 | może ono w znacznym stopniu wykorzystać przepustowość i czas procesora. AMP zoptymalizowano z myślą o ograniczeniu tych dwóch czynników. W ramach renderowania z wyprzedzeniem pobierane są tylko zasoby w części strony widocznej na ekranie
128 | i nie obejmuje ono elementów, których wyrenderowanie byłoby kosztowne w aspekcie wykorzystania procesora.
129 | <p>Kiedy dokumenty AMP są renderowane z wyprzedzeniem w celu błyskawicznego ładowania,
130 | faktycznie pobierane są tylko zasoby w części strony widocznej na ekranie.
131 | Podczas renderowania z wyprzedzeniem dokumentów AMP w celu błyskawicznego ładowania
132 | nie są pobierane zasoby, które mogłyby znacząco obciążyć procesor (jak np. ramki iframe niezależnych dostawców).
133 | <p>Dowiedz się więcej,
134 | [dlaczego AMP HTML nie wykorzystuje w pełni skanera wczytywania z wyprzedzeniem](https://medium.com/@cramforce/why-amp-html-does-not-take-full-advantage-of-the-preload-scanner-7e7f788aa94e).
135 | - title@: Pomóż przyspieszyć AMP
136 | description@: |
137 | AMP to projekt Open Source.
138 | Potrzebujemy Twojej pomocy, aby jeszcze bardziej przyspieszyć AMP.
139 | Dowiedz się, [jak dodać własne materiały](/docs/support/contribute.html).
140 |
```