This is page 8 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/get_started/create/basic_markup@pt_BR.md:
--------------------------------------------------------------------------------
```markdown
1 | ---
2 | $title: Criar sua página em AMP HTML
3 | ---
4 |
5 | A marcação a seguir é um ponto de partida ou texto clichê aceitável.
6 | Copie e salve-a em um arquivo de extensão .html.
7 |
8 | [sourcecode:html]
9 | <!doctype html>
10 | <html amp lang="en">
11 | <head>
12 | <meta charset="utf-8">
13 | <title>Hello, AMPs</title>
14 | <link rel="canonical" href="http://example.ampproject.org/article-metadata.html" />
15 | <meta name="viewport" content="width=device-width,minimum-scale=1,initial-scale=1">
16 | <script type="application/ld+json">
17 | {
18 | "@context": "http://schema.org",
19 | "@type": "NewsArticle",
20 | "headline": "Open-source framework for publishing content",
21 | "datePublished": "2015-10-07T12:02:41Z",
22 | "image": [
23 | "logo.jpg"
24 | ]
25 | }
26 | </script>
27 | <style amp-boilerplate>body{-webkit-animation:-amp-start 8s steps(1,end) 0s 1 normal both;-moz-animation:-amp-start 8s steps(1,end) 0s 1 normal both;-ms-animation:-amp-start 8s steps(1,end) 0s 1 normal both;animation:-amp-start 8s steps(1,end) 0s 1 normal both}@-webkit-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@-moz-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@-ms-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@-o-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}</style><noscript><style amp-boilerplate>body{-webkit-animation:none;-moz-animation:none;-ms-animation:none;animation:none}</style></noscript>
28 | <script async src="https://cdn.ampproject.org/v0.js"></script>
29 | </head>
30 | <body>
31 | <h1>Welcome to the mobile web</h1>
32 | </body>
33 | </html>
34 | [/sourcecode]
35 |
36 | O conteúdo do corpo, até agora, é bastante simples. No então, há muito código adicional no cabeçalho da página que pode não ser imediatamente óbvio. Vamos desconstruir a marcação obrigatória.
37 |
38 | ## Marcação obrigatória
39 |
40 | Documentos em AMP HTML DEVEM:
41 |
42 | - Ser iniciados pelo doctype `<!doctype html>`.
43 | - Conter uma tag `<html ⚡>` de nível superior (`<html amp>` também é aceita).
44 | - Conter as tags `<head>` e `<body>` (elas são opcionais em HTML).
45 | - Conter uma tag `<link rel="canonical" href="$SOME_URL" />` dentro do cabeçalho que aponte para a versão em HTML comum do documento em AMP HTML, ou para o próprio documento se a versão em HTML não existir.
46 | - Conter uma tag `<meta charset="utf-8">` como primeira filha da tag do cabeçalho.
47 | - Conter uma tag `<meta name="viewport" content="width=device-width,minimum-scale=1">`dentro da tag do cabeçalho. Também é recomendável incluir initial-scale=1.
48 | - Conter uma tag `<script async src="https://cdn.ampproject.org/v0.js"></script>` como o último elemento do cabeçalho (isso inclui e carrega a biblioteca de AMP JS).
49 | - Conter o seguinte na tag `<head>`:
50 | `<style amp-boilerplate>body{-webkit-animation:-amp-start 8s steps(1,end) 0s 1 normal both;-moz-animation:-amp-start 8s steps(1,end) 0s 1 normal both;-ms-animation:-amp-start 8s steps(1,end) 0s 1 normal both;animation:-amp-start 8s steps(1,end) 0s 1 normal both}@-webkit-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@-moz-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@-ms-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@-o-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}</style><noscript><style amp-boilerplate>body{-webkit-animation:none;-moz-animation:none;-ms-animation:none;animation:none}</style></noscript>`
51 |
52 | ## Metadados opcionais
53 |
54 | Além dos requisitos básicos, nosso exemplo também inclui uma definição de Schema.org no cabeçalho, o que não é um requisito obrigatório para o AMP, mas é necessário para que seu conteúdo seja distribuído para certos lugares, como a [demonstração do carrossel de notícias da Pesquisa do Google (experimente no seu telefone)](https://g.co/ampdemo).
55 |
56 | Para saber mais sobre todos os metadados necessários para outros locais, como o Twitter, [explore nossos exemplos](https://github.com/ampproject/amphtml/tree/master/examples/metadata-examples). Para saber especificamente sobre o AMP na Pesquisa do Google, consulte [Principais histórias com o AMP](https://developers.google.com/structured-data/carousels/top-stories).
57 |
58 | <hr>
59 |
60 | Boa notícia! Isso é tudo de que precisamos para criar nossa primeira página AMP, mas é claro que ainda falta muita coisa no corpo. Na próxima seção, abordaremos como adicionar itens básicos como imagens, elementos AMP personalizados, como compor o estilo da sua página e desenvolver um layout responsivo.
61 |
62 | <a class="go-button button" href="/pt_br/docs/get_started/create/include_image.html">Continuar para a etapa 2</a>
63 |
```
--------------------------------------------------------------------------------
/content/docs/get_started/create/[email protected]:
--------------------------------------------------------------------------------
```markdown
1 | ---
2 | $title: Membuat Halaman AMP HTML
3 | ---
4 |
5 | Markup berikut merupakan titik awal yang sesuai atau boilerplate.
6 | Salin yang berikut ini dan simpanlah ke file dengan ekstensi .html.
7 |
8 | [sourcecode:html]
9 | <!doctype html>
10 | <html amp lang="en">
11 | <head>
12 | <meta charset="utf-8">
13 | <title>Hello, AMPs</title>
14 | <link rel="canonical" href="http://example.ampproject.org/article-metadata.html" />
15 | <meta name="viewport" content="width=device-width,minimum-scale=1,initial-scale=1">
16 | <script type="application/ld+json">
17 | {
18 | "@context": "http://schema.org",
19 | "@type": "NewsArticle",
20 | "headline": "Open-source framework for publishing content",
21 | "datePublished": "2015-10-07T12:02:41Z",
22 | "image": [
23 | "logo.jpg"
24 | ]
25 | }
26 | </script>
27 | <style amp-boilerplate>body{-webkit-animation:-amp-start 8s steps(1,end) 0s 1 normal both;-moz-animation:-amp-start 8s steps(1,end) 0s 1 normal both;-ms-animation:-amp-start 8s steps(1,end) 0s 1 normal both;animation:-amp-start 8s steps(1,end) 0s 1 normal both}@-webkit-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@-moz-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@-ms-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@-o-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}</style><noscript><style amp-boilerplate>body{-webkit-animation:none;-moz-animation:none;-ms-animation:none;animation:none}</style></noscript>
28 | <script async src="https://cdn.ampproject.org/v0.js"></script>
29 | </head>
30 | <body>
31 | <h1>Welcome to the mobile web</h1>
32 | </body>
33 | </html>
34 | [/sourcecode]
35 |
36 | Materi dalam badan teks sejauh ini tidak sulit dipahami. Namun ada banyak kode tambahan dalam kepala halaman yang mungkin tidak langsung bisa dipahami. Mari kita uraikan markup wajib ini:
37 |
38 | ## Markup wajib
39 |
40 | Dokumen AMP HTML HARUS:
41 |
42 | - Mulai dengan tipe dokumen `<!doctype html>`.
43 | - Berisi tag `<html ⚡>` tingkat atas (`<html amp>` juga berterima).
44 | - Berisi tag `<head>` dan `<body>` (Keduanya opsional dalam HTML).
45 | - Berisi tag `<link rel="canonical" href="$SOME_URL" />` dalam bagian kepala yang menunjuk pada versi HTML reguler dari dokumen AMP HTML atau menunjuk pada dirinya sendiri jika tidak ada versi HTML seperti itu.
46 | - Berisi tag `<meta charset="utf-8">` sebagai anak pertama dari tag kepalanya.
47 | - Berisi tag `<meta name="viewport" content="width=device-width,minimum-scale=1">` di dalam tag kepalanya. Juga disarankan untuk menyertakan initial-scale=1.
48 | - Berisi tag `<script async src="https://cdn.ampproject.org/v0.js"></script>` sebagai elemen terakhir dalam kepalanya (ini mencakup dan memuat pustaka AMP JS).
49 | - Berisi yang berikut dalam tag `<head>`-nya:
50 | `<style amp-boilerplate>body{-webkit-animation:-amp-start 8s steps(1,end) 0s 1 normal both;-moz-animation:-amp-start 8s steps(1,end) 0s 1 normal both;-ms-animation:-amp-start 8s steps(1,end) 0s 1 normal both;animation:-amp-start 8s steps(1,end) 0s 1 normal both}@-webkit-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@-moz-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@-ms-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@-o-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}</style><noscript><style amp-boilerplate>body{-webkit-animation:none;-moz-animation:none;-ms-animation:none;animation:none}</style></noscript>`
51 |
52 | ## Meta-data opsional
53 |
54 | Selain persyaratan yang tak mendetail, sampel kami juga menyertakan definisi Schema.org pada bagian kepalanya, yang bukan merupakan persyaratan ketat bagi AMP, namun diwajibkan agar materi Anda didistribusikan di beberapa tempat, misalnya dalam [Demo menu korsel berita Google Penelusuran (cobalah pada ponsel Anda)](https://g.co/ampdemo).
55 |
56 | Untuk mengetahui selengkapnya tentang meta-data yang akan Anda butuhkan di berbagai tempat berbeda, misalnya Twitter, [jelajahilah sampel kami](https://github.com/ampproject/amphtml/tree/master/examples/metadata-examples) Untuk mempelajari secara khusus tentang AMP dalam Google Penelusuran, lihat [Cerita Teratas dengan AMP](https://developers.google.com/structured-data/carousels/top-stories).
57 |
58 | <hr>
59 |
60 | Kabar gembira! Itulah semua yang kita perlukan untuk membuat halaman AMP kita yang pertama, belum banyak yang terjadi di dalam bagian badan. Dalam bagian berikutnya, kita akan membahas mengenai cara menambahkan hal-hal dasar seperti gambar, elemen AMP khusus, cara menggayakan halaman Anda dan mengerjakan layout responsif.
61 |
62 | <a class="go-button button" href="/id/docs/get_started/create/include_image.html">Lanjutkan ke Langkah 2</a>
```
--------------------------------------------------------------------------------
/assets/sass/pages/_about-overview.scss:
--------------------------------------------------------------------------------
```scss
1 | .about-overview {
2 | .wrap {
3 | overflow: hidden;
4 | position: relative;
5 |
6 | &::after {
7 | background: url(/static/img/about/overview/bg2.svg) bottom left/contain no-repeat;
8 | bottom: 0;
9 | content: '';
10 | height: 68vw;
11 | left: 0;
12 | position: absolute;
13 | width: 90vw;
14 | z-index: -1;
15 | }
16 | }
17 |
18 | .about-overview-block {
19 | position: relative;
20 | z-index: 1;
21 | }
22 |
23 | .hero {
24 | margin: 100px 0 300px;
25 | position: relative;
26 | padding: 100px 5% 140px 5%;
27 |
28 | .images {
29 | position: absolute;
30 | width: 800px;
31 | left: 700px;
32 | top: 30px;
33 |
34 | amp-img {
35 | position: absolute;
36 | width: 100%;
37 | }
38 |
39 | .triangle {
40 | right: calc((1440px - 100vw)/2);
41 | top: -250px;
42 | }
43 |
44 | .line1 {
45 | left: 0;
46 | top: -10px;
47 | width: 583px;
48 | }
49 |
50 | .line2 {
51 | left: 75%;
52 | top: -50px;
53 | width: 359px;
54 | }
55 |
56 | .phone {
57 | left: -5%;
58 | top: 0px;
59 | transform: rotate(25deg) scale(1.4);
60 | width: 90%;
61 | }
62 | }
63 |
64 | .text {
65 | width: 510px;
66 |
67 | h1 {
68 | margin-bottom: 50px;
69 | max-width: 500px;
70 | }
71 | }
72 | }
73 |
74 | .core {
75 | h2 {
76 | margin: 0 auto;
77 | max-width: 550px;
78 | text-align: center;
79 | }
80 |
81 | amp-accordion {
82 | border-top: 2px solid #eaeaea;
83 | margin: 50px auto;
84 | max-width: 800px;
85 |
86 | section {
87 | border-bottom: 2px solid #eaeaea;
88 | padding: 20px 0 30px;
89 |
90 | &[expanded] {
91 | h4::after {
92 | opacity: 0;
93 | }
94 | }
95 | }
96 |
97 | header, .core-content {
98 | padding: 0 40px;
99 | }
100 |
101 | header {
102 | background: none;
103 | border: 0;
104 |
105 | h4 {
106 | color: $color-ampblue;
107 | position: relative;
108 |
109 | &::before, &::after {
110 | background: $gradient-bold;
111 | content: '';
112 | left: -30px;
113 | height: 2px;
114 | position: absolute;
115 | top: 15px;
116 | width: 10px;
117 | }
118 |
119 | &::after {
120 | transform: rotate(90deg);
121 | }
122 | }
123 | }
124 |
125 | .core-content {
126 | p {
127 | margin: 30px 0;
128 | }
129 |
130 | .code {
131 | margin: 0 -30px;
132 | }
133 |
134 | a {
135 | font-size: 20px;
136 | text-transform: none;
137 | }
138 | }
139 | }
140 | }
141 |
142 | .video {
143 | margin: 200px auto;
144 | max-width: 800px;
145 | padding: 0 30px;
146 | position: relative;
147 |
148 | .line1 {
149 | position: absolute;
150 | left: -32%;
151 | top: 9%;
152 | width: 563px;
153 | }
154 |
155 | .line2 {
156 | bottom: -10%;
157 | position: absolute;
158 | right: -10%;
159 | width: 254px;
160 | }
161 | }
162 |
163 | @include max-screen(1440px) {
164 | .hero {
165 | .triangle {
166 | right: -22px;
167 | }
168 | }
169 | }
170 |
171 | @include max-screen($mobile-breakpoint) {
172 | .hero {
173 | display: flex;
174 | flex-direction: column;
175 | margin-bottom: 100px;
176 | padding: 0;
177 |
178 | .images {
179 | position: relative;
180 | order: 1;
181 | height: 100vw;
182 | left: auto;
183 | width: 100vw;
184 | top: 30px;
185 |
186 | .triangle {
187 | right: 0;
188 | top: -20%;
189 | width: 90%;
190 | }
191 |
192 | .line1 {
193 | left: 20%;
194 | top: 10%;
195 | width: 80%;
196 | }
197 |
198 | .line2 {
199 | display: none;
200 | }
201 |
202 | .phone {
203 | width: 80%;
204 | top: 20%;
205 | left: 10%;
206 | }
207 | }
208 |
209 | .text {
210 | margin: 0 auto;
211 | order: 0;
212 | text-align: center;
213 |
214 | h1 {
215 | margin: 0 auto 50px;
216 | }
217 | }
218 | }
219 |
220 | .core amp-accordion .core-content a {
221 | font-size: 16px;
222 | }
223 | }
224 |
225 | @include max-screen($tablet-portrait-breakpoint) {
226 | .wrap {
227 | &::after {
228 | height: 91vw;
229 | bottom: 170px;
230 | width: 120vw;
231 | }
232 | }
233 |
234 | .hero {
235 | // padding-top: 480px;
236 | .text {
237 | width: 100%;
238 |
239 | h2,
240 | & > p {
241 | width: 100%;
242 | }
243 | }
244 | }
245 |
246 | .core amp-accordion {
247 | section {
248 | padding: 10px 0 8px;
249 | }
250 |
251 | header {
252 | h4 {
253 | &::before, &::after {
254 | left: -16px;
255 | top: 10px;
256 | }
257 | }
258 | }
259 |
260 | header, .core-content {
261 | padding: 0 20px;
262 |
263 | .code {
264 | margin: 10px 25px;
265 | }
266 |
267 | p {
268 | margin: 10px 0;
269 | }
270 |
271 | a {
272 | font-size: 16px;
273 | }
274 | }
275 | }
276 |
277 | .video {
278 | margin: 50px auto 100px;
279 | }
280 | }
281 | }
282 |
283 | .rtl.about-overview {
284 | .hero {
285 | .images {
286 | right: 700px;
287 | left: auto;
288 |
289 | .triangle {
290 | left: calc((1440px - 100vw)/2);
291 | right: auto;
292 | transform: rotate(180deg);
293 | }
294 | }
295 | }
296 |
297 | @include max-screen($mobile-breakpoint) {
298 | .hero .images {
299 | right: auto;
300 |
301 | .triangle {
302 | left: 0;
303 | }
304 | }
305 | }
306 | }
```
--------------------------------------------------------------------------------
/assets/sass/_syntax_highlighting.scss:
--------------------------------------------------------------------------------
```scss
1 | /**
2 | * Code formatting
3 | */
4 | pre,
5 | code,
6 | kbd,
7 | samp,
8 | tt{
9 | font-family: $font-family-mono;
10 | font-size: 14px;
11 | background: $color-white;
12 | border: 1px solid #e7f2f9;
13 | border-radius: 3px;
14 | color: $color-black-95;
15 | }
16 |
17 | code {
18 | background: #f6fcfd;
19 | font-size: 15px;
20 | padding: 2px 5px;
21 | }
22 |
23 | a {
24 | code {
25 | @extend a.underlined;
26 | color: $color-black-95;
27 | white-space: nowrap;
28 | }
29 |
30 | &:hover code {
31 | color: #1c79be;
32 | }
33 | }
34 |
35 | h1,
36 | h2,
37 | h3,
38 | h4,
39 | h5 {
40 | code {
41 | background: none;
42 | border: 0;
43 | font-size: 0.9em;
44 | }
45 | }
46 |
47 | .rtl code {
48 | direction: ltr;
49 | }
50 |
51 | /**
52 | * Syntax highlighting styles
53 | */
54 | pre {
55 | background: #f6fcfd;
56 | border-color: #e7f2f9;
57 | overflow: auto;
58 | tab-size: 2;
59 | word-break: normal;
60 | line-height: 1.4;
61 | padding: 1em;
62 |
63 | > code {
64 | white-space: pre;
65 | word-wrap: initial;
66 | display: block;
67 |
68 | td {
69 | border: 0;
70 | }
71 |
72 | }
73 | }
74 |
75 | @include max-screen($mobile-breakpoint) {
76 | .code pre {
77 | margin: 0 -25px;
78 | }
79 |
80 | code {
81 | font-size: 13px;
82 | }
83 |
84 | table {
85 | a code {
86 | line-height: 2;
87 | white-space: normal;
88 | }
89 | }
90 | }
91 |
92 | .highlight {
93 | .hll { background-color: #ffffcc }
94 | .c { color: #0099FF; font-style: italic } /* Comment */
95 | .k { color: #006699; font-weight: bold } /* Keyword */
96 | .o { color: #555555 } /* Operator */
97 | .cm { color: #0099FF; font-style: italic } /* Comment.Multiline */
98 | .cp { color: #009999 } /* Comment.Preproc */
99 | .c1 { color: #0099FF; font-style: italic } /* Comment.Single */
100 | .cs { color: #0099FF; font-weight: bold; font-style: italic } /* Comment.Special */
101 | .gd { background-color: #FFCCCC; border: 1px solid #CC0000 } /* Generic.Deleted */
102 | .ge { font-style: italic } /* Generic.Emph */
103 | .gr { color: #FF0000 } /* Generic.Error */
104 | .gh { color: #003300; font-weight: bold } /* Generic.Heading */
105 | .gi { background-color: #CCFFCC; border: 1px solid #00CC00 } /* Generic.Inserted */
106 | .go { color: #848484; } /* Generic.Output */
107 | .gp { color: #000099; font-weight: bold } /* Generic.Prompt */
108 | .gs { font-weight: bold } /* Generic.Strong */
109 | .gu { color: #003300; font-weight: bold } /* Generic.Subheading */
110 | .gt { color: #99CC66 } /* Generic.Traceback */
111 | .kc { color: #006699; font-weight: bold } /* Keyword.Constant */
112 | .kd { color: #006699; font-weight: bold } /* Keyword.Declaration */
113 | .kn { color: #006699; font-weight: bold } /* Keyword.Namespace */
114 | .kp { color: #006699 } /* Keyword.Pseudo */
115 | .kr { color: #006699; font-weight: bold } /* Keyword.Reserved */
116 | .kt { color: #007788; font-weight: bold } /* Keyword.Type */
117 | .m { color: #FF6600 } /* Literal.Number */
118 | .s { color: #CC3300 } /* Literal.String */
119 | .na { color: #1867a3 } /* Name.Attribute */
120 | .nb { color: #336666 } /* Name.Builtin */
121 | .nc { color: #00AA88; font-weight: bold } /* Name.Class */
122 | .no { color: #336600 } /* Name.Constant */
123 | .nd { color: #9999FF } /* Name.Decorator */
124 | .ni { color: #999999; font-weight: bold } /* Name.Entity */
125 | .ne { color: #CC0000; font-weight: bold } /* Name.Exception */
126 | .nf { color: #CC00FF } /* Name.Function */
127 | .nl { color: #9999FF } /* Name.Label */
128 | .nn { color: #00CCFF; font-weight: bold } /* Name.Namespace */
129 | .nt { color: #1867a3; font-weight: bold } /* Name.Tag */
130 | .nv { color: #003333 } /* Name.Variable */
131 | .ow { color: #000000; font-weight: bold } /* Operator.Word */
132 | .w { color: #bbbbbb } /* Text.Whitespace */
133 | .mf { color: #FF6600 } /* Literal.Number.Float */
134 | .mh { color: #FF6600 } /* Literal.Number.Hex */
135 | .mi { color: #FF6600 } /* Literal.Number.Integer */
136 | .mo { color: #FF6600 } /* Literal.Number.Oct */
137 | .sb { color: #CC3300 } /* Literal.String.Backtick */
138 | .sc { color: #CC3300 } /* Literal.String.Char */
139 | .sd { color: #CC3300; font-style: italic } /* Literal.String.Doc */
140 | .s2 { color: #CC3300 } /* Literal.String.Double */
141 | .se { color: #CC3300; font-weight: bold } /* Literal.String.Escape */
142 | .sh { color: #CC3300 } /* Literal.String.Heredoc */
143 | .si { color: #AA0000 } /* Literal.String.Interpol */
144 | .sx { color: #CC3300 } /* Literal.String.Other */
145 | .sr { color: #33AAAA } /* Literal.String.Regex */
146 | .s1 { color: #CC3300 } /* Literal.String.Single */
147 | .ss { color: #FFCC33 } /* Literal.String.Symbol */
148 | .bp { color: #336666 } /* Name.Builtin.Pseudo */
149 | .vc { color: #003333 } /* Name.Variable.Class */
150 | .vg { color: #003333 } /* Name.Variable.Global */
151 | .vi { color: #003333 } /* Name.Variable.Instance */
152 | .il { color: #FF6600 } /* Literal.Number.Integer.Long */
153 | }
154 |
155 | /* Make line numbers unselectable: excludes line numbers from copy-paste user ops */
156 | .highlight .lineno {-webkit-user-select: none;-moz-user-select: none; -o-user-select: none;}
157 | .lineno::-moz-selection {background-color: transparent;} /* Mozilla specific */
158 | .lineno::selection {background-color: transparent;} /* Other major browsers */
159 |
```
--------------------------------------------------------------------------------
/content/docs/guides/author_develop/[email protected]:
--------------------------------------------------------------------------------
```markdown
1 | ---
2 | $title: Membuat Laman AMP Responsif
3 | toc: true
4 | ---
5 |
6 | Membuat elemen responsif di AMP sangatlah mudah.
7 | Cukup masukkan `layout=responsive` ke elemen.
8 |
9 | [TOC]
10 |
11 | ## Membuat gambar responsif
12 |
13 | Semua sumber daya yang dimuat secara eksternal termasuk gambar,
14 | harus memiliki ukuran dan posisi tertentu
15 | sehingga ketika sumber daya dimuat, laman tidak akan melompat dan dan mengalir balik.
16 |
17 | Buat gambar responsif
18 | dengan menentukan lebar dan tinggi,
19 | menyetel tata letak menjadi responsif,
20 | dan mengindikasikan dengan [`srcset`](/docs/guides/responsive/style_pages.html)
21 | aset gambar yang akan digunakan berdasarkan ukuran layar yang bervariasi:
22 |
23 | [sourcecode:html]
24 | <amp-img
25 | src="/img/narrow.jpg"
26 | srcset="/img/wide.jpg 640w,
27 | /img/narrow.jpg 320w"
28 | width="1698"
29 | height="2911"
30 | layout="responsive"
31 | alt="an image">
32 | </amp-img>
33 | [/sourcecode]
34 |
35 | Elemen `amp-img` ini secara otomatis disesuaikan dengan lebar
36 | elemen kontennya,
37 | dan tingginya secara otomatis disetel ke rasio aspek
38 | yang ditentukan dengan lebar dan tinggi yang diberikan:
39 |
40 | <amp-img src="/static/img/docs/responsive_amp_img.png" width="500" height="857"></amp-img>
41 |
42 | Lihat juga [amp-img di AMP by Example](https://ampbyexample.com/components/amp-img/).
43 |
44 | ## Menambahkan gaya ke laman
45 |
46 | Tambahkan semua gaya di dalam tag `<style amp-custom>`
47 | di bagian head dokumen.
48 | Misalnya:
49 |
50 | [sourcecode:html]
51 | <!doctype html>
52 | <head>
53 | <meta charset="utf-8">
54 | <link rel="canonical" href="hello-world.html" >
55 | <meta name="viewport" content="width=device-width,minimum-scale=1,initial-scale=1">
56 | <style amp-boilerplate>body{-webkit-animation:-amp-start 8s steps(1,end) 0s 1 normal both;-moz-animation:-amp-start 8s steps(1,end) 0s 1 normal both;-ms-animation:-amp-start 8s steps(1,end) 0s 1 normal both;animation:-amp-start 8s steps(1,end) 0s 1 normal both}@-webkit-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@-moz-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@-ms-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@-o-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}</style><noscript><style amp-boilerplate>body{-webkit-animation:none;-moz-animation:none;-ms-animation:none;animation:none}</style></noscript>
57 | <style amp-custom>
58 | /* any custom style goes here. */
59 | body {
60 | background-color: white;
61 | }
62 | amp-img {
63 | border: 5px solid black;
64 | }
65 |
66 | amp-img.grey-placeholder {
67 | background-color: grey;
68 | }
69 | </style>
70 | <script async src="https://cdn.ampproject.org/v0.js"></script>
71 | </head>
72 | [/sourcecode]
73 |
74 | **Penting:**
75 | Pastikan hanya ada satu tag `<style amp-custom>` di laman,
76 | karena tidak boleh ada lebih dari satu tag di AMP.
77 |
78 | Tentukan gaya komponen dengan pemilih elemen atau kelas
79 | menggunakan properti CSS umum. Misalnya:
80 |
81 | [sourcecode:html]
82 | <body>
83 | <p>Hello, Kitty.</p>
84 | <amp-img
85 | class="grey-placeholder"
86 | src="https://placekitten.com/g/500/300"
87 | srcset="/img/cat.jpg 640w,
88 | /img/kitten.jpg 320w"
89 | width="500"
90 | height="300"
91 | layout="responsive">
92 | </amp-img>
93 | </body>
94 | [/sourcecode]
95 |
96 | **Penting:**
97 | Periksa bahwa gaya yang ditambahkan didukung di AMP;
98 | beberapa gaya tidak untuk alasan performa
99 | (lihat juga [CSS yang Didukung](/docs/guides/responsive/style_pages.html)).
100 |
101 | ## Ukuran dan posisi elemen
102 |
103 | AMP melepaskan tata letak dokumen dari pemuatan sumber daya
104 | sehingga AMP dapat memuat tata letak laman tanpa menunggu sumber daya didownload.
105 |
106 | Tentukan ukuran dan posisi semua elemen AMP yang terlihat
107 | dengan memberikan atribut `width` dan `height`.
108 | Atribut ini mengartikan rasio aspek elemen,
109 | yang kemudian dapat disesuaikan dengan penampung.
110 |
111 | Setel tata letak menjadi responsif.
112 | Tindakan ini menetapkan ukuran elemen ke lebar elemen penampungnya
113 | dan otomatis mengubah ukuran tingginya ke rasio aspek yang diberikan oleh atribut lebar dan tinggi.
114 |
115 | Pelajari lebih lanjut tentang [tata letak yang didukung di AMP](/docs/guides/responsive/control_layout.html).
116 |
117 | ## Memvalidasi gaya dan tata letak
118 |
119 | Gunakan validator AMP untuk menguji
120 | nilai CSS dan tata letak laman.
121 |
122 | Validator mengonfirmasi bahwa CSS laman tidak melebihi batas 50.000 byte,
123 | memeriksa gaya yang tidak diizinkan, serta memastikan bahwa tata letak didukung dan diformat dengan benar.
124 | Lihat juga daftar lengkap [Kesalahan gaya dan tata letak](/docs/reference/validation_errors.html#style-and-layout-errors).
125 |
126 | Contoh kesalahan di konsol untuk laman dengan CSS yang melebihi batas 50.000 byte:
127 |
128 | <amp-img src="/static/img/docs/too_much_css.png" width="1404" height="334" layout="responsive"></amp-img>
129 |
130 | Pelajari lebih lanjut tentang cara [memvalidasi laman AMP](/docs/guides/validate.html),
131 | termasuk cara melacak dan memperbaiki kesalahan gaya.
132 |
```
--------------------------------------------------------------------------------
/content/learn/[email protected]:
--------------------------------------------------------------------------------
```markdown
1 | ---
2 | $title: Qu'est-ce qu'AMP ?
3 | ---
4 | [TOC]
5 |
6 | <amp-youtube
7 | data-videoid="lBTCB7yLs8Y"
8 | layout="responsive"
9 | width="480" height="270">
10 | </amp-youtube>
11 |
12 | AMP est une méthode de création de pages Web pour du contenu statique permettant un rendu rapide.
13 | Dans la pratique, AMP se compose de trois parties :
14 |
15 | **AMP HTML** est du HTML comportant certaines restrictions pour assurer des performances fiable,
16 | ainsi que certaines extensions permettant de créer du contenu enrichi plus élaboré qu'avec le HTML de base.
17 | La bibliothèque **AMP JS** garantit un rendu rapide des pages AMP HTML.
18 | Le cache **Google AMP Cache** (en option) fournit les pages AMP HTML.
19 |
20 | ## AMP HTML
21 |
22 | Pour faire simple, AMP HTML est du HTML étendu à l'aide de propriétés AMP personnalisées.
23 | Le fichier AMP HTML le plus simple ressemble à ce qui suit :
24 |
25 | [sourcecode:html]
26 | <!doctype html>
27 | <html ⚡>
28 | <head>
29 | <meta charset="utf-8">
30 | <link rel="canonical" href="hello-world.html">
31 | <meta name="viewport" content="width=device-width,minimum-scale=1,initial-scale=1">
32 | <style amp-boilerplate>body{-webkit-animation:-amp-start 8s steps(1,end) 0s 1 normal both;-moz-animation:-amp-start 8s steps(1,end) 0s 1 normal both;-ms-animation:-amp-start 8s steps(1,end) 0s 1 normal both;animation:-amp-start 8s steps(1,end) 0s 1 normal both}@-webkit-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@-moz-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@-ms-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@-o-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}</style><noscript><style amp-boilerplate>body{-webkit-animation:none;-moz-animation:none;-ms-animation:none;animation:none}</style></noscript>
33 | <script async src="https://cdn.ampproject.org/v0.js"></script>
34 | </head>
35 | <body>Hello World!</body>
36 | </html>
37 | [/sourcecode]
38 |
39 | Même si la plupart des balises sur une page AMP HTML sont des balises HTML standard,
40 | certaines sont remplacées par des balises AMP spécifiques (voir également
41 | [Balises HTML dans la spécification AMP](https://github.com/ampproject/amphtml/blob/master/spec/amp-html-format.md)).
42 | Ces éléments personnalisés, appelés composants AMP HTML,
43 | permettent d'implémenter facilement et efficacement des modèles communs.
44 |
45 | Par exemple, la balise [`amp-img`](/docs/reference/amp-img.html)
46 | offre une entière prise en charge de `srcset` même dans les navigateurs qui ne sont pas encore compatibles.
47 | Découvrez comment [créer votre première page AMP HTML](/docs/get_started/create.html).
48 |
49 | ## AMP JS
50 |
51 | La [bibliothèque AMP JS](https://github.com/ampproject/amphtml/tree/master/src) implémente
52 | toutes les [meilleures pratiques d'AMP en termes d'efficacité](/docs/get_started/technical_overview.html),
53 | gère le chargement des ressources et contient les balises personnalisées mentionnées ci-dessus,
54 | et ce, pour un rendu rapide de la page.
55 |
56 | L'une des plus grandes optimisations est la désynchronisation de tout ce qui provient de ressources externes, de sorte que rien sur la page ne peut bloquer le rendu des différents éléments.
57 |
58 | D'autres techniques permettent de gagner en performance : le système de « sandbox » pour tous les iframes, la prédéfinition de la disposition de chaque élément sur la page avant le chargement des ressources et la désactivation des sélecteurs CSS lents.
59 |
60 | Pour en savoir plus sur les [optimisations](/docs/get_started/technical_overview.html) et les limitations, [lire la spécification AMP HTML](https://github.com/ampproject/amphtml/blob/master/spec/amp-html-format.md).
61 |
62 | ## Google AMP Cache
63 |
64 | Google AMP Cache est un réseau de distribution de contenus basé sur proxy
65 | qui fournit tous les documents AMP valides.
66 | Il extrait les pages AMP HTML, les stocke en mémoire cache et améliore automatiquement la performance des pages.
67 | Avec Google AMP Cache, le document, tous les fichiers JS et toutes les images se chargent
68 | à partir d'une source, laquelle utilise
69 | [HTTP 2.0](https://http2.github.io/) pour une efficacité optimale.
70 |
71 | Ce cache intègre également un
72 | [système de validation](https://github.com/ampproject/amphtml/tree/master/validator)
73 | qui vérifie le bon fonctionnement de la page
74 | et sa non dépendance vis-à-vis de ressources externes.
75 | Le système de validation applique une série d'assertions
76 | pour vérifier que le balisage de la page est conforme à la spécification AMP HTML.
77 |
78 | Une autre version du système de validation est intégrée à chaque page AMP. Cette version peut consigner les erreurs de validation directement dans la console du navigateur lors du rendu de la page
79 | pour vous permettre de connaître l'impact des changements de code
80 | complexes sur la performance et l'expérience utilisateur.
81 |
82 | En savoir plus sur le [test des pages AMP HTML](/docs/guides/validate.html).
```
--------------------------------------------------------------------------------
/content/docs/guides/author_develop/[email protected]:
--------------------------------------------------------------------------------
```markdown
1 | ---
2 | $title: Dołączanie treści innych firm
3 | ---
4 |
5 | Dowiedz się, jak umieszczać na swoich stronach komponenty innych firm.
6 |
7 | [TOC]
8 |
9 | ## Umieszczanie tweeta
10 |
11 | Tweety umieszcza się na stronie
12 | za pomocą elementu [`amp-twitter`](/docs/reference/extended/amp-twitter.html).
13 |
14 | Aby umieścić tweet na stronie,
15 | w sekcji `<head>` umieść najpierw taki skrypt:
16 |
17 | [sourcecode:html]
18 | <script async custom-element="amp-twitter" src="https://cdn.ampproject.org/v0/amp-twitter-0.1.js"></script>
19 | [/sourcecode]
20 |
21 | Obecnie tweety są automatycznie skalowane tak,
22 | by ich proporcje pasowały do podanego rozmiaru.
23 | Może się jednak zdarzyć tak, że nie będą wyglądały
24 | tak ładnie, jak powinny.
25 | Aby wybrać współczynnik proporcji na podstawie szerokości ekranu, ręcznie dostosuj podane wartości dla szerokości i wysokości albo użyj atrybutu media.
26 |
27 | Przykładowy element `amp-twitter` ze strony
28 | [twitter.amp](https://github.com/ampproject/amphtml/blob/master/examples/twitter.amp.html):
29 |
30 | [sourcecode:html]
31 | <amp-twitter width=390 height=50
32 | layout="responsive"
33 | data-tweetid="638793490521001985">
34 | </amp-twitter>
35 | [/sourcecode]
36 |
37 | ## Umieszczanie elementu z Instagrama
38 |
39 | Posty z Instagrama umieszcza się
40 | na stronie za pomocą elementu [`amp-instagram`](/docs/reference/extended/amp-instagram.html).
41 |
42 | Aby na stronie umieścić element z Instagrama,
43 | w sekcji `<head>` umieść najpierw taki skrypt:
44 |
45 | [sourcecode:html]
46 | <script async custom-element="amp-instagram" src="https://cdn.ampproject.org/v0/amp-instagram-0.1.js"></script>
47 | [/sourcecode]
48 |
49 | Umieść fragment kodu (shortcode) Instagrama skopiowany z adresu URL zdjęcia.
50 | Na przykład w adresie `https://instagram.com/p/fBwFP`
51 | shortcode to `fBwFP`.
52 | Instagram używa także z góry ustalonego współczynnika proporcji dla układów elastycznych, więc wartości szerokości i wysokości powinny być uniwersalne.
53 |
54 | [sourcecode:html]
55 | <amp-instagram
56 | data-shortcode="fBwFP"
57 | width="320"
58 | height="392"
59 | layout="responsive">
60 | </amp-instagram>
61 | [/sourcecode]
62 |
63 | ## Wyświetlanie postów i filmów z Facebooka
64 |
65 | Posty i filmy z Facebooka wyświetla się za pomocą elementu [`amp-facebook`](/docs/reference/extended/amp-facebook.html).
66 |
67 | W sekcji `<head>` trzeba dodać dodać następujący skrypt:
68 |
69 | [sourcecode:html]
70 | <script async custom-element="amp-facebook" src="https://cdn.ampproject.org/v0/amp-facebook-0.1.js"></script>
71 | [/sourcecode]
72 |
73 | Przykład – umieszczanie posta:
74 |
75 | [sourcecode:html]
76 | <amp-facebook width=486 height=657
77 | layout="responsive"
78 | data-href="https://www.facebook.com/zuck/posts/10102593740125791">
79 | </amp-facebook>
80 | [/sourcecode]
81 |
82 | Przykład – umieszczanie filmu:
83 |
84 | [sourcecode:html]
85 | <amp-facebook width=552 height=574
86 | layout="responsive"
87 | data-embed-as="video"
88 | data-href="https://www.facebook.com/zuck/videos/10102509264909801/">
89 | </amp-facebook>
90 | [/sourcecode]
91 |
92 | ## Umieszczanie filmów z YouTube
93 |
94 | Filmy z YouTube umieszcza się na stronie
95 | za pomocą elementu [`amp-youtube`](/docs/reference/extended/amp-youtube.html).
96 |
97 | W tagu `<head>` trzeba dodać następujący skrypt:
98 |
99 | [sourcecode:html]
100 | <script async custom-element="amp-youtube" src="https://cdn.ampproject.org/v0/amp-youtube-0.1.js"></script>
101 | [/sourcecode]
102 |
103 | Element `data-videoid` jest obecny w adresie URL każdej strony serwisu YouTube.
104 | Na przykład w adresie https://www.youtube.com/watch?v=Z1q71gFeRqM
105 | ciąg znaków Z1q71gFeRqM to identyfikator filmu.
106 |
107 | Za pomocą parametru `layout="responsive"` uzyskasz poprawne układy dla filmów o współczynniku proporcji 16:9:
108 |
109 | [sourcecode:html]
110 | <amp-youtube
111 | data-videoid="mGENRKrdoGY"
112 | layout="responsive"
113 | width="480" height="270">
114 | </amp-youtube>
115 | [/sourcecode]
116 |
117 | ## Wyświetlanie reklam
118 |
119 | Reklamy wyświetla się na stronie
120 | za pomocą elementu [`amp-ad`](/docs/reference/amp-ad.html).
121 | Obsługiwane są tylko reklamy wyświetlane za pomocą protokołu HTTPS.
122 |
123 | Dokumenty AMP nie zezwalają na umieszczanie w nich reklam korzystających z JavaScriptu.
124 | Zamiast tego technologia AMP ładuje element iframe
125 | z innego źródła (poprzez piaskownicę iframe)
126 | i wykonuje JavaScript reklamy wewnątrz piaskownicy iframe.
127 |
128 | Należy określić szerokość i wysokość reklamy oraz rodzaj sieci reklamowej.
129 | Atrybut `type` identyfikuje szablon sieci reklamowej.
130 | Różne rodzaje sieci reklamowych wymagają innych atrybutów `data-*`.
131 |
132 | [sourcecode:html]
133 | <amp-ad width=300 height=250
134 | type="example"
135 | data-aax_size="300x250"
136 | data-aax_pubname="test123"
137 | data-aax_src="302">
138 | </amp-ad>
139 | [/sourcecode]
140 |
141 | Jeśli sieć reklamowa go obsługuje,
142 | użyj elementu `placeholder`, który
143 | będzie się wyświetlał w przypadku braku reklamy:
144 |
145 | [sourcecode:html]
146 | <amp-ad width=300 height=250
147 | type="example"
148 | data-aax_size="300x250"
149 | data-aax_pubname="test123"
150 | data-aax_src="302">
151 | <div placeholder>Have a great day!</div>
152 | </amp-ad>
153 | [/sourcecode]
154 |
155 | AMP obsługuje szeroką gamę sieci reklamowych. Zobacz [ich pełną listę](/docs/reference/amp-ad.html#supported-ad-networks).
156 |
```
--------------------------------------------------------------------------------
/content/learn/[email protected]:
--------------------------------------------------------------------------------
```markdown
1 | ---
2 | $title: Co to jest AMP?
3 | ---
4 | [TOC]
5 |
6 | <amp-youtube
7 | data-videoid="lBTCB7yLs8Y"
8 | layout="responsive"
9 | width="480" height="270">
10 | </amp-youtube>
11 |
12 | AMP to sposób tworzenia szybko renderowanych stron internetowych dla statycznych treści.
13 | W działaniu AMP składa się z trzech części:
14 |
15 | **AMP HTML** to kod HTML z pewnymi ograniczeniami zapewniającymi niezawodne działanie
16 | oraz pewnymi rozszerzeniami, które umożliwiają tworzenie zaawansowanych treści wykraczających poza podstawowy kod HTML.
17 | Biblioteka **AMP JS** zapewnia szybkie renderowanie stron AMP HTML.
18 | Strony AMP HTML są opcjonalnie dostarczane z **pamięci podręcznej Google AMP Cache**.
19 |
20 | ## AMP HTML
21 |
22 | AMP HTML to w zasadzie HTML rozszerzony o niestandardowe właściwości AMP.
23 | Najprostszy plik AMP HTML wygląda następująco:
24 |
25 | [sourcecode:html]
26 | <!doctype html>
27 | <html ⚡>
28 | <head>
29 | <meta charset="utf-8">
30 | <link rel="canonical" href="hello-world.html">
31 | <meta name="viewport" content="width=device-width,minimum-scale=1,initial-scale=1">
32 | <style amp-boilerplate>body{-webkit-animation:-amp-start 8s steps(1,end) 0s 1 normal both;-moz-animation:-amp-start 8s steps(1,end) 0s 1 normal both;-ms-animation:-amp-start 8s steps(1,end) 0s 1 normal both;animation:-amp-start 8s steps(1,end) 0s 1 normal both}@-webkit-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@-moz-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@-ms-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@-o-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}</style><noscript><style amp-boilerplate>body{-webkit-animation:none;-moz-animation:none;-ms-animation:none;animation:none}</style></noscript>
33 | <script async src="https://cdn.ampproject.org/v0.js"></script>
34 | </head>
35 | <body>Hello World!</body>
36 | </html>
37 | [/sourcecode]
38 |
39 | Chociaż większość znaczników na stronie AMP HTML to zwykłe tagi HTML,
40 | niektóre tagi HTML zostały zastąpione przez tagi właściwe dla AMP (zobacz też
41 | [HTML Tags in the AMP spec](https://github.com/ampproject/amphtml/blob/master/spec/amp-html-format.md) — Tagi HTML w specyfikacji AMP).
42 | Te niestandardowe elementy, nazywane komponentami AMP HTML,
43 | ułatwiają efektywną implementację typowych wzorców.
44 |
45 | Na przykład znacznik [`amp-img`](/docs/reference/amp-img.html)
46 | udostępnia pełną obsługę atrybutu `srcset` także w przeglądarkach, które go jeszcze nie obsługują.
47 | Dowiedz się, jak [utworzyć swoją pierwszą stronę AMP HTML](/docs/get_started/create.html).
48 |
49 | ## AMP JS
50 |
51 | [Biblioteka AMP JS](https://github.com/ampproject/amphtml/tree/master/src) implementuje
52 | wszystkie [najlepsze praktyki dotyczące wydajności AMP](/docs/get_started/technical_overview.html),
53 | zarządza ładowaniem zasobów oraz udostępnia niestandardowe znaczniki wspomniane powyżej,
54 | aby zapewnić jak najszybsze renderowanie strony.
55 |
56 | Do najistotniejszych optymalizacji należy to, że wszystkie dane pochodzące z zasobów zewnętrznych są przetwarzane asynchronicznie, dzięki czemu żaden element strony nie może blokować renderowania.
57 |
58 | Inne techniki zwiększające wydajność obejmują piaskownice dla wszystkich ramek iframe, wstępne obliczanie układu każdego elementu na stronie przed załadowaniem zasobów i wyłączanie powolnych selektorów CSS.
59 |
60 | Aby dowiedzieć się więcej nie tylko o [optymalizacjach](/docs/get_started/technical_overview.html), ale także o ograniczeniach, [przeczytaj specyfikację AMP HTML](https://github.com/ampproject/amphtml/blob/master/spec/amp-html-format.md).
61 |
62 | ## Pamięć podręczna Google AMP Cache
63 |
64 | Pamięć podręczna Google AMP Cache to oparta na serwerach proxy sieć dystrybucji treści,
65 | która może dostarczać wszystkie prawidłowe dokumenty AMP.
66 | Pobiera ona strony AMP HTML, buforuje je i automatycznie poprawia wydajność tych stron.
67 | W przypadku korzystania z pamięci podręcznej Google AMP Cache dokument, wszystkie pliki JS i wszystkie obrazy są ładowane
68 | z tego samego źródła, w którym używany jest protokół
69 | [HTTP 2.0](https://http2.github.io/) w celu uzyskania maksymalnej efektywności.
70 |
71 | Pamięć podręczna jest wyposażona we wbudowany
72 | [system sprawdzania poprawności](https://github.com/ampproject/amphtml/tree/master/validator),
73 | który potwierdza, że strona będzie działać oraz
74 | że nie zależy ona od zasobów zewnętrznych.
75 | System sprawdzania poprawności uruchamia szereg asercji,
76 | potwierdzając, że znaczniki strony są zgodne ze specyfikacją AMP HTML.
77 |
78 | Inna wersja modułu sprawdzania poprawności jest dostarczana w pakiecie z każdą stroną AMP. Ta wersja może rejestrować błędy sprawdzania poprawności bezpośrednio w konsoli przeglądarki podczas renderowanie strony,
79 | co pozwala zobaczyć, w jaki sposób złożone zmiany w kodzie
80 | negatywnie odbijają się na wydajności i wrażeniach użytkowników.
81 |
82 | Dowiedz się więcej o [testowaniu swoich stron AMP HTML](/docs/guides/validate.html).
```
--------------------------------------------------------------------------------
/content/learn/case-studies/relay_media.md:
--------------------------------------------------------------------------------
```markdown
1 | ---
2 | $order: 5
3 | $title: Relay Media
4 | $date: October 7, 2016
5 | $category: Publishers
6 | $parent: /content/learn/case-studies.html
7 | class: case-study post-detail
8 |
9 | components:
10 | - social-share
11 |
12 | headline: Relay Media helps publishers get AMP’d
13 | thumb: "case-studies/relay_media_thumb.jpg"
14 | featured: "case-studies/relaymedia_phone1.png"
15 | logo:
16 | src: "case-studies/relay_media_logo.png"
17 | width: 133
18 | height: 15
19 | description: "Relay Media was founded in 2015 with the purpose of converting web content to Accelerated Mobile Pages (AMP) for publishers. The company has placed a big bet on AMP’s long-term importance to the online ecosystem, and is committed to strengthening the format’s foothold on the mobile web."
20 | results:
21 | - stat: 2.5M
22 | description: AMPs made (last 30 days)
23 | - stat: 700ms
24 | description: Page load time
25 | - stat: 10%
26 | description: Increase in session time (The Miami Herald)
27 | - stat: 90%
28 | description: new traffic on AMP (The Daily Dot)
29 | download: "case-studies/relay_media.pdf"
30 | ---
31 |
32 | <div class="img-right relay">
33 | <amp-img width="989" height="1416" layout="responsive"
34 | srcset="/static/img/case-studies/relaymedia_phone1.png 989w,
35 | /static/img/case-studies/relaymedia_phone1@1_5x.png 653w,
36 | /static/img/case-studies/[email protected] 495w"
37 | src="/static/img/case-studies/relaymedia_phone1.png">
38 | </amp-img>
39 | </div>
40 |
41 | Relay Media was founded in 2015 with the purpose of converting web content to Accelerated Mobile Pages (AMP) for publishers. The company has placed a big bet on AMP’s long-term importance to the online ecosystem, and is committed to strengthening the format’s foothold on the mobile web. “Today’s lumbering and overloaded mobile web pages are the legacy of a volume-based advertising marketplace that’s being replaced by one tuned to viewability and engagement” said Barb Palser, Chief Product Officer at Relay Media.
42 |
43 | #### Solution
44 |
45 | “We’re championing AMP because it’s aligned with consumer and market forces pushing the digital content economy toward performance, measurability and quality user experience. The company has converted content for a number of companies including The Miami Herald, The Daily Dot, and Hearst Television. Relay Media acknowledges that implementing basic AMP HTML is fairly easy, but they strive to do more than that. “AMP needs to be more than fast; it needs to advance a publisher’s digital strategy. It needs to drive engagement and business value by supporting a publisher’s range of content formats, embeds, style and branding elements, navigation, analytics, ads, paywall services and other revenue products,” said Palser. AMP already enables this functionality, and Relay Media helps publishers take full advantage of the format. The company has generated more than 2.5 million AMP pages for publishers in the last 30 days.
46 |
47 | <div class="img-left relay img-mobile">
48 | <amp-img width="1200" height="1423" layout="responsive"
49 | srcset="/static/img/case-studies/relaymedia_phone2.png 1200w,
50 | /static/img/case-studies/relaymedia_phone2@1_5x.png 792w,
51 | /static/img/case-studies/[email protected] 600w"
52 | src="/static/img/case-studies/relaymedia_phone2.png">
53 | </amp-img>
54 | </div>
55 |
56 | #### Results
57 |
58 | <div class="img-left relay img-desktop">
59 | <amp-img width="1200" height="1423" layout="responsive"
60 | srcset="/static/img/case-studies/relaymedia_phone2.png 1200w,
61 | /static/img/case-studies/relaymedia_phone2@1_5x.png 792w,
62 | /static/img/case-studies/[email protected] 600w"
63 | src="/static/img/case-studies/relaymedia_phone2.png">
64 | </amp-img>
65 | </div>
66 |
67 | Many of Relay Media’s clients are seeing positive AMP results. The most profound benefit for clients in converting to AMP is the decrease in page load time. Relay Media’s AMP articles load in under 700 milliseconds, compared to 8-12 seconds or more for their standard mobile counterparts.
68 |
69 | Derrick Ho, Senior Mobile Manager for McClatchy, which owns the Miami Herald, reported that “mobile search users who read the Miami Herald starting with an AMP article spend 10% more time than those who land on regular mobile pages.” Arsenio Santos, Chief Product Officer at the Daily Dot, worked with Relay Media to create AMP pages for the news site covering internet culture and life on the web. Santos reported that 90% of visitors on their AMP pages are new readers. The team is satisfied with the results, “AMP provides users with a reliable, immediate browsing experience. We strongly recommend it,” said Santos.
70 |
71 | As more users shift to mobile, said Palser, “Publishers can and must differentiate themselves by delivering a fast, rewarding user experience which in turn provides a clean environment for advertisers. Everything about AMP supports these principles; we think it’s a great place to start.”
72 |
```
--------------------------------------------------------------------------------
/content/docs/get_started/create/[email protected]:
--------------------------------------------------------------------------------
```markdown
1 | ---
2 | $title: Créer votre page AMP HTML
3 | ---
4 |
5 | Le balisage suivant est un bon point de départ, un modèle standard.
6 | Copiez et enregistrez ce qui suit dans un fichier .html.
7 |
8 | [sourcecode:html]
9 | <!doctype html>
10 | <html amp lang="en">
11 | <head>
12 | <meta charset="utf-8">
13 | <title>Hello, AMPs</title>
14 | <link rel="canonical" href="http://example.ampproject.org/article-metadata.html" />
15 | <meta name="viewport" content="width=device-width,minimum-scale=1,initial-scale=1">
16 | <script type="application/ld+json">
17 | {
18 | "@context": "http://schema.org",
19 | "@type": "NewsArticle",
20 | "headline": "Open-source framework for publishing content",
21 | "datePublished": "2015-10-07T12:02:41Z",
22 | "image": [
23 | "logo.jpg"
24 | ]
25 | }
26 | </script>
27 | <style amp-boilerplate>body{-webkit-animation:-amp-start 8s steps(1,end) 0s 1 normal both;-moz-animation:-amp-start 8s steps(1,end) 0s 1 normal both;-ms-animation:-amp-start 8s steps(1,end) 0s 1 normal both;animation:-amp-start 8s steps(1,end) 0s 1 normal both}@-webkit-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@-moz-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@-ms-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@-o-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}</style><noscript><style amp-boilerplate>body{-webkit-animation:none;-moz-animation:none;-ms-animation:none;animation:none}</style></noscript>
28 | <script async src="https://cdn.ampproject.org/v0.js"></script>
29 | </head>
30 | <body>
31 | <h1>Welcome to the mobile web</h1>
32 | </body>
33 | </html>
34 | [/sourcecode]
35 |
36 | Jusque là, le contenu dans le corps (body) est assez simple. Mais le code supplémentaire dans l'en-tête (head) de la page n'est peut-être pas aussi évident. Décomposons le balisage obligatoire.
37 |
38 | ## Balisage obligatoire
39 |
40 | Les documents AMP HTML DOIVENT :
41 |
42 | - Commencer par le type du document `<!doctype html>`.
43 | - Contenir une balise `<html ⚡>` de niveau supérieur (`<html amp>` est également accepté).
44 | - Contenir les balises `<head>` et `<body>` (facultatives dans HTML).
45 | - Contenir une balise `<link rel="canonical" href="$SOME_URL" />` dans l'en-tête qui pointe vers la version HTML standard du document AMP HTML ou vers le document lui-même si aucune version HTML n'existe.
46 | - Contenir une balise `<meta charset="utf-8">` comme premier enfant de la balise head.
47 | - Contenir une balise `<meta name="viewport" content="width=device-width,minimum-scale=1">` dans la balise head. Il est également recommandé d'inclure initial-scale=1.
48 | - Contenir une balise `<script async src="https://cdn.ampproject.org/v0.js"></script>` comme dernier élément de l'en-tête (inclut et charge la bibliothèque AMP JS).
49 | - Contenir ce qui suit dans la balise `<head>` :
50 | `<style amp-boilerplate>body{-webkit-animation:-amp-start 8s steps(1,end) 0s 1 normal both;-moz-animation:-amp-start 8s steps(1,end) 0s 1 normal both;-ms-animation:-amp-start 8s steps(1,end) 0s 1 normal both;animation:-amp-start 8s steps(1,end) 0s 1 normal both}@-webkit-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@-moz-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@-ms-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@-o-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}</style><noscript><style amp-boilerplate>body{-webkit-animation:none;-moz-animation:none;-ms-animation:none;animation:none}</style></noscript>`
51 |
52 | ## Métadonnées facultatives
53 |
54 | En plus des éléments de base, notre exemple inclut une définition Schema.org dans l'en-tête qui n'est pas une condition absolue pour AMP, mais une condition pour distribuer le contenu dans certains emplacements, par exemple, dans la [démonstration du carrousel d'actualités Google Search (essayez-la sur votre téléphone)](https://g.co/ampdemo).
55 |
56 | Pour en savoir plus sur toutes les métadonnées nécessaires pour les divers autres emplacements, par exemple Twitter, [consultez nos exemples](https://github.com/ampproject/amphtml/tree/master/examples/metadata-examples). Pour en savoir plus sur AMP dans Google Search, voir [Le meilleur de l'actualité avec AMP](https://developers.google.com/structured-data/carousels/top-stories).
57 |
58 | <hr>
59 |
60 | Bonne nouvelle ! C'est tout ce dont nous avons besoin pour créer la première page AMP. Bien évidemment, le corps ne contient pas encore grand chose. Dans la prochaine section, nous découvrirons comment ajouter des objets de base (images et éléments AMP personnalisés), comment créer un style pour la page et comment définir une disposition réactive.
61 |
62 | <a class="go-button button" href="/fr/docs/get_started/create/include_image.html">Continuer à l'Étape 2</a>
```
--------------------------------------------------------------------------------
/content/docs/guides/author_develop/amp_replacements.md:
--------------------------------------------------------------------------------
```markdown
1 | ---
2 | $title: Include Images & Video
3 | $order: 1
4 |
5 | toc: true
6 | ---
7 |
8 | [TOC]
9 |
10 | Like on a normal HTML page, AMP allows you to embed **images**, **video** and **audio**
11 | content. Learn what's different about the AMP equivalents and learn how to
12 | include them in your pages.
13 |
14 | ## Why not `<img>`, `<video>` and `<audio`?
15 |
16 | AMP doesn't support the default HTML counterparts to displaying media, like `<img>`.
17 | We provide equivalent components for the following reasons:
18 |
19 | * We need to understand layout of the page before assets load, crucial
20 | to [support first-viewport preloading](/learn/how-amp-works/#size-all-resources-statically)
21 | * We need to control network requests to [lazy load and prioritize resources
22 | effectively](/learn/how-amp-works/#prioritize-resource-loading)
23 |
24 | {% call callout('Caution', type='caution') %}
25 | While they're not supported, they *will* render, but AMP won't [validate your pages](/docs/guides/validate.html) and you won't get all the benefits AMP provides.
26 | {% endcall %}
27 |
28 | ## Images
29 |
30 | Include an image in your page
31 | using the [`amp-img`](/docs/reference/components/amp-img.html) element, like so:
32 |
33 | [sourcecode:html]
34 | <amp-img src="fixed.jpg" width="264" height="96"></amp-img>
35 | [/sourcecode]
36 |
37 | In this most basic example, the image will display with the specified fixed
38 | height and width. At minimum, an explicit width and height needs to be set.
39 |
40 | #### Displaying images when JavaScript is disabled
41 |
42 | As `<amp-img>` relies on JavaScript, if the user chooses to disable scripts, images won't display. In this case, you should provide a fallback to the image using `<img>` and `<noscript>`, like so:
43 |
44 | [sourcecode:html]
45 | <amp-img src="fixed.jpg" width="264" height="96">
46 | <noscript>
47 | <img src="fixed.jpg" width="264" height="96" />
48 | </noscript>
49 | </amp-img>
50 | [/sourcecode]
51 |
52 | ### Advanced layouts
53 |
54 | AMP makes it much easier than with standard CSS/HTML to create fully responsive
55 | images. In its most basic form, all you have to do is to add `layout="responsive"`:
56 |
57 | [sourcecode:html]
58 | <amp-img src="responsive.jpg" width="527" height="193" layout="responsive">
59 | </amp-img>
60 | [/sourcecode]
61 |
62 | {% call callout('Read on', type='success') %}
63 | Learn more about [advanced layout techniques](/docs/guides/responsive/control_layout.html).
64 | {% endcall %}
65 |
66 | ### Behavior and placeholders
67 |
68 | The AMP HTML runtime can effectively manage image resources,
69 | choosing to delay or prioritize resource loading
70 | based on the viewport position, system resources, connection bandwidth, or other factors.
71 |
72 | {% call callout('Read on', type='success') %}
73 | Learn how to [provide fallbacks and placeholders for images](/docs/guides/responsive/placeholders.html).
74 | {% endcall %}
75 |
76 | ## Animated images
77 |
78 | The [`amp-anim`](/docs/reference/extended/amp-anim.html) element is very similar to the `amp-img` element,
79 | and provides additional functionality to manage loading and playing of animated images such as GIFs.
80 |
81 | [sourcecode:html]
82 | <amp-anim width="400" height="300" src="my-gif.gif">
83 | <amp-img placeholder width="400" height="300" src="my-gif-screencap.jpg">
84 | </amp-img>
85 | </amp-anim>
86 | [/sourcecode]
87 |
88 | {% call callout('Note', type='note') %}
89 | Include `<script async custom-element="amp-anim"
90 | src="https://cdn.ampproject.org/v0/amp-anim-0.1.js"></script>` in the head of your page to use this component.
91 | {% endcall %}
92 |
93 | ## Video
94 |
95 | Include a video in your page
96 | using the [`amp-video`](/docs/reference/amp-video.html) element.
97 |
98 | Only use this element for direct HTML5 video file embeds.
99 | The element loads the video resource specified by the `src` attribute lazily,
100 | at a time determined by AMP.
101 |
102 | Include a placeholder before the video starts, and a fallback,
103 | if the browser doesn't support HTML5 video, for example:
104 |
105 | [sourcecode:html]
106 | <amp-video width="400" height="300" src="https://yourhost.com/videos/myvideo.mp4"
107 | poster="myvideo-poster.jpg">
108 | <div fallback>
109 | <p>Your browser doesn’t support HTML5 video</p>
110 | </div>
111 | </amp-video>
112 | [/sourcecode]
113 |
114 | ## Audio
115 |
116 | Include an audio resource in your page,
117 | using the [`amp-audio`](/docs/reference/extended/amp-audio) element.
118 |
119 | Only use this element for direct HTML5 audio file embeds.
120 | Like all embedded external resources in an AMP page,
121 | the element loads the audio resource specified by the `src` attribute lazily,
122 | at a time determined by AMP.
123 |
124 | Include a placeholder before the audio starts, and a fallback,
125 | if the browser doesn't support HTML5 audio, for example:
126 |
127 | [sourcecode:html]
128 | <amp-audio width="400" height="300" src="https://yourhost.com/audios/myaudio.mp3">
129 | <div fallback>
130 | <p>Your browser doesn’t support HTML5 audio</p>
131 | </div>
132 | <source type="audio/mpeg" src="foo.mp3">
133 | <source type="audio/ogg" src="foo.ogg">
134 | </amp-audio>
135 | [/sourcecode]
136 |
137 | {% call callout('Note', type='note') %}
138 | Include `<script async custom-element="amp-audio"
139 | src="https://cdn.ampproject.org/v0/amp-audio-0.1.js"></script>` in the head of your page to use this component.
140 | {% endcall %}
141 |
```
--------------------------------------------------------------------------------
/content/learn/[email protected]:
--------------------------------------------------------------------------------
```markdown
1 | ---
2 | $title: Was ist AMP?
3 | ---
4 |
5 | [TOC]
6 |
7 | <amp-youtube
8 | data-videoid="lBTCB7yLs8Y"
9 | layout="responsive"
10 | width="480" height="270">
11 | </amp-youtube>
12 |
13 | AMP ist eine Methode, Webseiten für statische Inhalte zu erstellen, die schnell dargestellt werden.
14 | AMP besteht aus drei Teilen:
15 |
16 | **AMP-HTML** ist HTML mit einigen Einschränkungen für eine zuverlässige Leistung und einigen Erweiterungen für die Erstellung ansprechender Inhalte, die über einfaches HTML hinausgehen. Die **AMP-JS-Bibliothek** sorgt dafür, dass AMP-HTML-Seiten schnell aufgebaut werden.
17 | Über den **AMP-Cache von Google** können AMP-HTML-Seiten aus dem Cache bereitgestellt werden.
18 |
19 | ## AMP-HTML
20 |
21 | AMP-HTML ist im Grunde HTML, das um benutzerdefinierte AMP-Eigenschaften erweitert wurde.
22 | Die einfachste Version einer AMP-HTML-Datei sieht so aus:
23 |
24 | [sourcecode:html]
25 | <!doctype html>
26 | <html ⚡>
27 | <head>
28 | <meta charset="utf-8">
29 | <link rel="canonical" href="hello-world.html">
30 | <meta name="viewport" content="width=device-width,minimum-scale=1,initial-scale=1">
31 | <style amp-boilerplate>body{-webkit-animation:-amp-start 8s steps(1,end) 0s 1 normal both;-moz-animation:-amp-start 8s steps(1,end) 0s 1 normal both;-ms-animation:-amp-start 8s steps(1,end) 0s 1 normal both;animation:-amp-start 8s steps(1,end) 0s 1 normal both}@-webkit-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@-moz-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@-ms-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@-o-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}</style><noscript><style amp-boilerplate>body{-webkit-animation:none;-moz-animation:none;-ms-animation:none;animation:none}</style></noscript>
32 | <script async src="https://cdn.ampproject.org/v0.js"></script>
33 | </head>
34 | <body>Hello World!</body>
35 | </html>
36 | [/sourcecode]
37 |
38 | Die meisten Tags einer AMP-HTML-Seite sind normale HTML-Tags, einige werden aber durch AMP-spezifische Tags ersetzt. Mehr über HTML-Tags [erfahren Sie auch in der AMP-Spezifikation](https://github.com/ampproject/amphtml/blob/master/spec/amp-html-format.md).
39 | Diese AMP-spezifischen und benutzerdefinierten Elemente, AMP-HTML-Komponenten genannt, ermöglichen eine einfache und effiziente Implementierung von gängigen Mustern.
40 |
41 | Das Tag [`amp-img`](/docs/reference/amp-img.html) beispielsweise bietet selbst in Browsern, die dies noch nicht unterstützen, vollständigen `srcset`-Support.
42 | [Lesen Sie hier, wie Sie eine AMP-Seite erstellen.](/docs/get_started/create.html)
43 |
44 | ## AMP-JS
45 |
46 | Die [AMP-JS-Bibliothek](https://github.com/ampproject/amphtml/tree/master/src) hat mehrere Funktionen, die gemeinsam für ein schnelles Rendering Ihrer Seite sorgen: Alle [Best Practices zur AMP-Leistung](/docs/get_started/technical_overview.html) werden implementiert, das Laden von Ressourcen wird verwaltet und die oben erwähnten benutzerdefinierten Tags werden bereitgestellt.
47 |
48 | Zu den größten Optimierungen gehört, dass alles, was aus externen Ressourcen stammt, asynchron bereitgestellt wird. So kann kein Seitenelement die Darstellung eines anderen blockieren.
49 |
50 | Weitere Technologien für eine verbesserte Leistung sind Sandbox-Verfahren für alle iFrames, die Vorberechnung des Layouts aller Seitenelemente, bevor Ressourcen geladen werden, und die Deaktivierung langsamer CSS-Selektoren.
51 |
52 | Weitere Informationen sowohl zu den [Optimierungen](/docs/get_started/technical_overview.html) als auch den Beschränkungen [finden Sie in der AMP-HTML-Spezifikation](https://github.com/ampproject/amphtml/blob/master/spec/amp-html-format.md).
53 |
54 | ## AMP-Cache von Google
55 |
56 | Der [AMP-Cache von Google](https://developers.google.com/amp/cache/) ist ein proxybasiertes Content Delivery Network (CDN) zum Bereitstellen aller gültigen AMP-Dokumente.
57 | AMP-HTML-Seiten werden abgerufen, im Cache gespeichert und die Seitenleistung wird automatisch verbessert.
58 | Bei der Verwendung des AMP-Cache von Google werden das Dokument, alle JS-Dateien und alle Bilder aus derselben Quelle geladen, die [HTTP 2.0](https://http2.github.io/) für maximale Effizienz nutzt.
59 |
60 | In den Cache ist außerdem ein [Validierungssystem](https://github.com/ampproject/amphtml/tree/master/validator) integriert, über das bestätigt wird, dass die Seite funktioniert und nicht von externen Ressourcen abhängig ist.
61 | Das Validierungssystem führt eine Reihe von Assertionen aus, um zu prüfen, ob das Markup der Seite die AMP-HTML-Spezifikation erfüllt.
62 |
63 | Eine weitere Version des Validierungstools ist Teil jeder AMP-Seite. Diese Version kann Validierungsfehler beim Darstellen der Seite direkt in der Browserkonsole protokollieren. So können Sie sehen, wie komplexe Änderungen in Ihrem Code sich auf die Leistung und Nutzererfahrung auswirken.
64 |
65 | [Lesen Sie hier, wie Sie Ihre AMP-HTML-Seiten testen.](/docs/guides/validate.html)
66 |
```
--------------------------------------------------------------------------------
/content/docs/guides/author_develop/[email protected]:
--------------------------------------------------------------------------------
```markdown
1 | ---
2 | $title: Üçüncü Taraf İçeriği Ekleme
3 | ---
4 |
5 | Sayfalarınıza üçüncü taraf bileşenlerini nasıl ekleyeceğinizi öğrenin.
6 |
7 | [TOC]
8 |
9 | ## Tweet Yerleştirme
10 |
11 | [`amp-twitter`](/docs/reference/extended/amp-twitter.html) öğesini kullanarak bir Twitter Tweet'ini sayfanıza yerleştirebilirsiniz.
12 |
13 | Sayfanıza tweet eklemek için öncelikle aşağıdaki komut dosyasını `<head>` bölümüne ekleyin:
14 |
15 | [sourcecode:html]
16 | <script async custom-element="amp-twitter" src="https://cdn.ampproject.org/v0/amp-twitter-0.1.js"></script>
17 | [/sourcecode]
18 |
19 | Şu anda tweet'ler, sağlanan boyuta sığmaları için otomatik olarak belirli bir oranda ölçeklenmektedir, ancak bu ideal bir görünüm sağlamayabilir.
20 | Sağlanan genişliği ve yüksekliği manuel olarak değiştirebilir veya en boy oranını, ekran genişliğine göre seçmek için medya özniteliğini kullanabilirsiniz.
21 |
22 | [twitter.amp örneğindeki](https://github.com/ampproject/amphtml/blob/master/examples/twitter.amp.html) `amp-twitter` örneği:
23 |
24 | [sourcecode:html]
25 | <amp-twitter width=390 height=50
26 | layout="responsive"
27 | data-tweetid="638793490521001985">
28 | </amp-twitter>
29 | [/sourcecode]
30 |
31 | ## Instagram Fotoğrafı Yerleştirme
32 |
33 | [`amp-instagram`](/docs/reference/extended/amp-instagram.html) öğesini kullanarak bir Instagram fotoğrafını sayfanıza yerleştirebilirsiniz.
34 |
35 | Bir Instagram fotoğrafını sayfanıza eklemek için öncelikle aşağıdaki komut dosyasını `<head>` bölümüne ekleyin:
36 |
37 | [sourcecode:html]
38 | <script async custom-element="amp-instagram" src="https://cdn.ampproject.org/v0/amp-instagram-0.1.js"></script>
39 | [/sourcecode]
40 |
41 | Instagram fotoğrafı URL'sinde bulunan Instagram kısa veri kodunu ekleyin. Örneğin, `https://instagram.com/p/fBwFP` URL'sindeki `fBwFP`, veri kısa kodudur.
42 | Ayrıca, Instagram duyarlı düzenler için sabit bir en boy oranı kullanır. Bu yüzden, genişlik ve yükseklik değeri evrensel olmalıdır
43 |
44 | [sourcecode:html]
45 | <amp-instagram
46 | data-shortcode="fBwFP"
47 | width="320"
48 | height="392"
49 | layout="responsive">
50 | </amp-instagram>
51 | [/sourcecode]
52 |
53 | ## Facebook yayını veya videosu gösterme
54 |
55 | [`amp-facebook`](/docs/reference/extended/amp-facebook.html) öğesini kullanarak bir Facebook yayınını veya videosunu sayfanızda gösterebilirsiniz.
56 |
57 | Aşağıdaki komut dosyasını `<head>` bölümüne eklemeniz gerekir:
58 |
59 | [sourcecode:html]
60 | <script async custom-element="amp-facebook" src="https://cdn.ampproject.org/v0/amp-facebook-0.1.js"></script>
61 | [/sourcecode]
62 |
63 | Örnek - Yayın yerleştirme:
64 |
65 | [sourcecode:html]
66 | <amp-facebook width=486 height=657
67 | layout="responsive"
68 | data-href="https://www.facebook.com/zuck/posts/10102593740125791">
69 | </amp-facebook>
70 | [/sourcecode]
71 |
72 | Örnek - Video yerleştirme:
73 |
74 | [sourcecode:html]
75 | <amp-facebook width=552 height=574
76 | layout="responsive"
77 | data-embed-as="video"
78 | data-href="https://www.facebook.com/zuck/videos/10102509264909801/">
79 | </amp-facebook>
80 | [/sourcecode]
81 |
82 | ## YouTube videosu ekleme
83 |
84 | [`amp-youtube`](/docs/reference/extended/amp-youtube.html) öğesini kullanarak bir YouTube videosunu sayfanıza ekleyebilirsiniz.
85 |
86 | Aşağıdaki komut dosyasını `<head>` bölümüne eklemeniz gerekir:
87 |
88 | [sourcecode:html]
89 | <script async custom-element="amp-youtube" src="https://cdn.ampproject.org/v0/amp-youtube-0.1.js"></script>
90 | [/sourcecode]
91 |
92 | Youtube `data-videoid` kodunu her YouTube video sayfası URL'sinde bulabilirsiniz. Örneğin, https://www.youtube.com/watch?v=Z1q71gFeRqM URL'sinin Z1q71gFeRqM kısmı, video kimliğini belirtmektedir.
93 |
94 | 16:9 en boy oranlı videolar için doğru düzenleri sağlamak üzere `layout="responsive"` kodunu kullanın:
95 |
96 | [sourcecode:html]
97 | <amp-youtube
98 | data-videoid="mGENRKrdoGY"
99 | layout="responsive"
100 | width="480" height="270">
101 | </amp-youtube>
102 | [/sourcecode]
103 |
104 | ## Reklam gösterme
105 |
106 | [`amp-ad`](/docs/reference/amp-ad.html) öğesini kullanarak sayfanızda bir reklam gösterin.
107 | Yalnızca HTTPS aracılığıyla sunulan reklamlar desteklenir.
108 |
109 | Reklam ağları tarafından sağlanan JavaScript'in AMP dokümanı içinde çalıştırılmasına izin verilmez.
110 | Bunun yerine, AMP çalışma zamanı farklı bir kaynaktan (iframe korumalı alanı aracılığıyla) bir iframe yükler ve reklam ağının JS'sini o iframe korumalı alanı içinde yürütür.
111 |
112 | Reklam genişliği ve yüksekliği ile reklam ağı türünü belirtmeniz gerekir.
113 | `type`, reklam ağının şablonunu tanımlar.
114 | Farklı reklam türleri, farklı `data-*` öznitelikleri gerektirir.
115 |
116 | [sourcecode:html]
117 | <amp-ad width=300 height=250
118 | type="example"
119 | data-aax_size="300x250"
120 | data-aax_pubname="test123"
121 | data-aax_src="302">
122 | </amp-ad>
123 | [/sourcecode]
124 |
125 | Reklam ağı tarafından destekleniyorsa, kullanılabilir reklam olmadığında gösterilmesi için bir `placeholder` ekleyin:
126 |
127 | [sourcecode:html]
128 | <amp-ad width=300 height=250
129 | type="example"
130 | data-aax_size="300x250"
131 | data-aax_pubname="test123"
132 | data-aax_src="302">
133 | <div placeholder>Have a great day!</div>
134 | </amp-ad>
135 | [/sourcecode]
136 |
137 | AMP, çok çeşitli reklam ağlarını destekler. [Tam liste için referansa](/docs/reference/amp-ad.html#supported-ad-networks) bakın.
138 |
```
--------------------------------------------------------------------------------
/content/docs/get_started/create/[email protected]:
--------------------------------------------------------------------------------
```markdown
1 | ---
2 | $title: Tworzenie strony AMP HTML
3 | ---
4 |
5 | Poniższy znacznik stanowi doskonały punkt wyjścia lub szablon.
6 | Skopiuj go i zapisz w pliku z rozszerzeniem .html.
7 |
8 | [sourcecode:html]
9 | <!doctype html>
10 | <html amp lang="en">
11 | <head>
12 | <meta charset="utf-8">
13 | <title>Hello, AMPs</title>
14 | <link rel="canonical" href="http://example.ampproject.org/article-metadata.html" />
15 | <meta name="viewport" content="width=device-width,minimum-scale=1,initial-scale=1">
16 | <script type="application/ld+json">
17 | {
18 | "@context": "http://schema.org",
19 | "@type": "NewsArticle",
20 | "headline": "Open-source framework for publishing content",
21 | "datePublished": "2015-10-07T12:02:41Z",
22 | "image": [
23 | "logo.jpg"
24 | ]
25 | }
26 | </script>
27 | <style amp-boilerplate>body{-webkit-animation:-amp-start 8s steps(1,end) 0s 1 normal both;-moz-animation:-amp-start 8s steps(1,end) 0s 1 normal both;-ms-animation:-amp-start 8s steps(1,end) 0s 1 normal both;animation:-amp-start 8s steps(1,end) 0s 1 normal both}@-webkit-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@-moz-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@-ms-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@-o-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}</style><noscript><style amp-boilerplate>body{-webkit-animation:none;-moz-animation:none;-ms-animation:none;animation:none}</style></noscript>
28 | <script async src="https://cdn.ampproject.org/v0.js"></script>
29 | </head>
30 | <body>
31 | <h1>Welcome to the mobile web</h1>
32 | </body>
33 | </html>
34 | [/sourcecode]
35 |
36 | Zawartość sekcji body jest na razie całkiem prosta. Jednak sekcja head strony zawiera wiele dodatkowego kodu, którego znaczenie nie jest od razu oczywiste. Zajmijmy się teraz analizą wymaganych znaczników.
37 |
38 | ## Wymagane znaczniki
39 |
40 | Dokumenty AMP HTML MUSZĄ:
41 |
42 | - Zaczynać się od deklaracji doctype `<!doctype html>`.
43 | - Zawierać znacznik `<html ⚡>` najwyższego poziomu (akceptowany jest również znacznik `<html amp>`).
44 | - Zawierać znaczniki `<head>` i `<body>` (w języku HTML są one opcjonalne).
45 | - Zawierać w sekcji head znacznik `<link rel="canonical" href="$SOME_URL" />` wskazujący wersję dokumentu AMP HTML w zwykłym HTML lub ten sam dokument, jeśli taka wersja HTML nie istnieje.
46 | - Zawierać znacznik `<meta charset="utf-8">` jako pierwszy element podrzędny znacznika head.
47 | - Zawierać znacznik `<meta name="viewport" content="width=device-width,minimum-scale=1">` wewnątrz znacznika head. Zalecane jest także dodanie atrybutu initial-scale=1.
48 | - Zawierać znacznik `<script async src="https://cdn.ampproject.org/v0.js"></script>` jako ostatni element w sekcji head (służy do dołączenia i ładowania biblioteki AMP JS).
49 | - Zawierać następujące dane w znaczniku `<head>`:
50 | `<style amp-boilerplate>body{-webkit-animation:-amp-start 8s steps(1,end) 0s 1 normal both;-moz-animation:-amp-start 8s steps(1,end) 0s 1 normal both;-ms-animation:-amp-start 8s steps(1,end) 0s 1 normal both;animation:-amp-start 8s steps(1,end) 0s 1 normal both}@-webkit-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@-moz-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@-ms-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@-o-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}</style><noscript><style amp-boilerplate>body{-webkit-animation:none;-moz-animation:none;-ms-animation:none;animation:none}</style></noscript>`
51 |
52 | ## Opcjonalne metadane
53 |
54 | Oprócz elementów zgodnych z podstawowymi wymaganiami przykład zawiera także definicję Schema.org w sekcji head, która nie jest wymagana przez AMP, ale jest niezbędna, aby treści były rozpowszechniane w niektórych miejscach, na przykład w [demonstracyjnej wersji karuzeli wiadomości aplikacji Szukaj w Google (wypróbuj na swoim telefonie)](https://g.co/ampdemo).
55 |
56 | Aby dowiedzieć się więcej o wszystkich metadanych potrzebnych w różnych innych miejscach, np. na Twitterze, [zapoznaj się z przykładami](https://github.com/ampproject/amphtml/tree/master/examples/metadata-examples). Aby poznać w szczególności zastosowanie AMP w aplikacji Szukaj w Google, zobacz [Najlepsze historie z AMP](https://developers.google.com/structured-data/carousels/top-stories).
57 |
58 | <hr>
59 |
60 | Dobra wiadomość! To wszystko, co potrzebne do utworzenia pierwszej strony AMP, przy czym oczywiście niewiele dzieje się na razie w sekcji body. W następnej części zostanie opisane dodawanie podstawowych elementów, takich jak obrazy, dodawanie niestandardowych elementów AMP, nadawanie stronie stylu i opracowanie przyjaznego w obsłudze układu.
61 |
62 | <a class="go-button button" href="/pl/docs/get_started/create/include_image.html">Przejdź do kroku 2</a>
```
--------------------------------------------------------------------------------
/content/learn/[email protected]:
--------------------------------------------------------------------------------
```markdown
1 | ---
2 | $title: Che cos’è AMP?
3 | ---
4 | [TOC]
5 |
6 | <amp-youtube
7 | data-videoid="lBTCB7yLs8Y"
8 | layout="responsive"
9 | width="480" height="270">
10 | </amp-youtube>
11 |
12 | AMP è un metodo per creare pagine web di contenuto statico con un rendering veloce.
13 | Il formato AMP in azione è costituito da tre diversi componenti:
14 |
15 | **HTML AMP** è il formato HTML con alcuni limiti per garantire l’affidabilità delle performance
16 | e determinate estensioni per creare contenuto con formattazione più ricca rispetto all’HTML di base.
17 | La libreria **AMP JS** assicura il rendering veloce delle pagine HTML AMP.
18 | La **Google AMP Cache** (facoltativa) distribuisce le pagine HTML AMP.
19 |
20 | ## HTML AMP
21 |
22 | HTML AMP è essenzialmente l’HTML esteso con proprietà AMP personalizzate.
23 | La forma più semplice di file AMP HTML si presenta così:
24 |
25 | [sourcecode:html]
26 | <!doctype html>
27 | <html ⚡>
28 | <head>
29 | <meta charset="utf-8">
30 | <link rel="canonical" href="hello-world.html">
31 | <meta name="viewport" content="width=device-width,minimum-scale=1,initial-scale=1">
32 | <style amp-boilerplate>body{-webkit-animation:-amp-start 8s steps(1,end) 0s 1 normal both;-moz-animation:-amp-start 8s steps(1,end) 0s 1 normal both;-ms-animation:-amp-start 8s steps(1,end) 0s 1 normal both;animation:-amp-start 8s steps(1,end) 0s 1 normal both}@-webkit-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@-moz-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@-ms-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@-o-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}</style><noscript><style amp-boilerplate>body{-webkit-animation:none;-moz-animation:none;-ms-animation:none;animation:none}</style></noscript>
33 | <script async src="https://cdn.ampproject.org/v0.js"></script>
34 | </head>
35 | <body>Hello World!</body>
36 | </html>
37 | [/sourcecode]
38 |
39 | Benché la maggior parte di tag in una pagina HTML AMP sia costituita da normali tag HTML,
40 | alcuni di essi vengono sostituiti da tag HTML specifici per il formato AMP (vedi anche
41 | [Tag HTML nella specifica AMP](https://github.com/ampproject/amphtml/blob/master/spec/amp-html-format.md)).
42 | Questi elementi personalizzati, denominati componenti HTML AMP,
43 | facilitano l’implementazione di modelli comuni in modo efficiente.
44 |
45 | Ad esempio, il tag [`amp-img`](/docs/reference/amp-img.html)
46 | offre il supporto `srcset` completo anche nei browser che ancora non lo supportano.
47 | Scopri come [creare la tua prima pagina HTML AMP](/docs/get_started/create.html).
48 |
49 | ## AMP JS
50 |
51 | La [libreria AMP JS](https://github.com/ampproject/amphtml/tree/master/src) implementa
52 | tutte le [best practice relative alle prestazioni di AMP](/docs/get_started/technical_overview.html),
53 | gestisce il caricamento delle risorse e offre i tag personalizzati indicati sopra,
54 | il tutto per garantire il rendering veloce della pagina.
55 |
56 | Tra le principali ottimizzazioni ricordiamo il fatto che rende asincrono tutto ciò che proviene da risorse esterne, pertanto nella pagina non vi sono elementi che ne possano bloccare il rendering.
57 |
58 | Altre tecniche di ottimizzazione prestazionale comprendono l’uso della modalità sandbox di tutti gli iframe, il precalcolo del layout di ogni elemento nella pagina prima del caricamento delle risorse e la disabilitazione dei selettori CSS lenti.
59 |
60 | Per ulteriori informazioni non solo sulle [ottimizzazioni](/docs/get_started/technical_overview.html) ma anche sui limiti imposti, [leggi la specifica HTML AMP](https://github.com/ampproject/amphtml/blob/master/spec/amp-html-format.md).
61 |
62 | ## Google AMP Cache
63 |
64 | La Google AMP Cache è una rete di distribuzione del contenuto basata su proxy
65 | che consente la pubblicazione di tutti i documenti AMP convalidati.
66 | Recupera le pagine HTML AMP, le memorizza nella cache e ne migliora automaticamente le prestazioni.
67 | Quando si usa la Google AMP Cache, il documento, tutti i file JS e tutte le immagini vengono caricati
68 | dalla stessa fonte che utilizza
69 | [HTTP 2.0](https://http2.github.io/) per ottimizzare l’efficienza.
70 |
71 | La cache prevede anche un
72 | [sistema di convalida](https://github.com/ampproject/amphtml/tree/master/validator)
73 | incorporato che conferma l’idoneità della pagina
74 | e il fatto che non dipenda da risorse esterne.
75 | Il sistema di convalida esegue una serie di asserzioni
76 | per confermare che il markup della pagina sia conforme alla specifica HTML AMP.
77 |
78 | Un’altra versione dello strumento di convalida viene fornita in dotazione con ogni pagina AMP. Questa versione è in grado di registrare gli errori di convalida direttamente nella console del browser quando viene eseguito il rendering della pagina,
79 | per consentire di vedere in che modo eventuali modifiche complesse del codice
80 | possono ripercuotersi sulle prestazioni e sull’esperienza utente.
81 |
82 | Per ulteriori informazioni consulta la sezione sul [testing delle pagine HTML AMP](/docs/guides/validate.html).
```
--------------------------------------------------------------------------------
/content/docs/guides/author_develop/third_party_components@pt_BR.md:
--------------------------------------------------------------------------------
```markdown
1 | ---
2 | $title: Incluir conteúdo de terceiros
3 | ---
4 |
5 | Saiba como incluir componentes de terceiros em suas páginas.
6 |
7 | [TOC]
8 |
9 | ## Incorporar um tweet
10 |
11 | Incorpore um tweet na sua página
12 | usando o elemento [`amp-twitter`](/docs/reference/extended/amp-twitter.html).
13 |
14 | Para incluir um tweet em sua página,
15 | em primeiro lugar inclua o seguinte script no `<head>`:
16 |
17 | [sourcecode:html]
18 | <script async custom-element="amp-twitter" src="https://cdn.ampproject.org/v0/amp-twitter-0.1.js"></script>
19 | [/sourcecode]
20 |
21 | Atualmente, os tweets são dimensionados automaticamente de acordo com sua proporção
22 | para se ajustarem ao tamanho fornecido,
23 | mas isso pode gerar uma aparência não muito boa.
24 | Ajuste manualmente a largura e a altura fornecidas ou use o atributo de mídia
25 | para selecionar a proporção com base na largura da tela.
26 |
27 | Exemplo de `amp-twitter` a partir do
28 | [exemplo de twitter.amp](https://github.com/ampproject/amphtml/blob/master/examples/twitter.amp.html):
29 |
30 | [sourcecode:html]
31 | <amp-twitter width=390 height=50
32 | layout="responsive"
33 | data-tweetid="638793490521001985">
34 | </amp-twitter>
35 | [/sourcecode]
36 |
37 | ## Incorporar uma imagem do Instagram
38 |
39 | Incorpore uma imagem do Instagram em sua página
40 | usando o elemento [`amp-instagram`](/docs/reference/extended/amp-instagram.html).
41 |
42 | Para incluir uma imagem do Instagram,
43 | em primeiro lugar inclua o seguinte script no `<head>`:
44 |
45 | [sourcecode:html]
46 | <script async custom-element="amp-instagram" src="https://cdn.ampproject.org/v0/amp-instagram-0.1.js"></script>
47 | [/sourcecode]
48 |
49 | Inclua o data-shortcode do Instagram encontrado no URL da foto no Instagram.
50 | Por exemplo, em `https://instagram.com/p/fBwFP`,
51 | `fBwFP` é o data-shortcode.
52 | Além disso, o Instagram usa uma proporção fixa para os layouts responsivos,
53 | de modo que os valores de largura e altura são universais.
54 |
55 | [sourcecode:html]
56 | <amp-instagram
57 | data-shortcode="fBwFP"
58 | width="320"
59 | height="392"
60 | layout="responsive">
61 | </amp-instagram>
62 | [/sourcecode]
63 |
64 | ## Exibir postagem ou vídeo do Facebook
65 |
66 | Exiba uma postagem ou um vídeo do Facebook na sua página
67 | usando o elemento [`amp-facebook`](/docs/reference/extended/amp-facebook.html).
68 |
69 | Você precisa incluir o seguinte script no `<head>`:
70 |
71 | [sourcecode:html]
72 | <script async custom-element="amp-facebook" src="https://cdn.ampproject.org/v0/amp-facebook-0.1.js"></script>
73 | [/sourcecode]
74 |
75 | Exemplo - Incorporação de uma postagem:
76 |
77 | [sourcecode:html]
78 | <amp-facebook width=486 height=657
79 | layout="responsive"
80 | data-href="https://www.facebook.com/zuck/posts/10102593740125791">
81 | </amp-facebook>
82 | [/sourcecode]
83 |
84 | Exemplo - Incorporação de um vídeo:
85 |
86 | [sourcecode:html]
87 | <amp-facebook width=552 height=574
88 | layout="responsive"
89 | data-embed-as="video"
90 | data-href="https://www.facebook.com/zuck/videos/10102509264909801/">
91 | </amp-facebook>
92 | [/sourcecode]
93 |
94 | ## Incluir um vídeo do YouTube
95 |
96 | Inclua um vídeo do YouTube em sua página
97 | usando o elemento [`amp-youtube`](/docs/reference/extended/amp-youtube.html).
98 |
99 | Você precisa incluir o seguinte script no `<head>`:
100 |
101 | [sourcecode:html]
102 | <script async custom-element="amp-youtube" src="https://cdn.ampproject.org/v0/amp-youtube-0.1.js"></script>
103 | [/sourcecode]
104 |
105 | O `data-videoid` do YouTube pode ser encontrado em qualquer URL de uma página de vídeos do YouTube.
106 | Por exemplo, em https://www.youtube.com/watch?v=Z1q71gFeRqM,
107 | Z1q71gFeRqM é o ID do vídeo.
108 |
109 | Use `layout="responsive"` para gerar layouts de forma correta para vídeos com proporção de 16:9.
110 |
111 | [sourcecode:html]
112 | <amp-youtube
113 | data-videoid="mGENRKrdoGY"
114 | layout="responsive"
115 | width="480" height="270">
116 | </amp-youtube>
117 | [/sourcecode]
118 |
119 | ## Exibir um anúncio
120 |
121 | Exiba um anúncio em sua página
122 | usando o elemento [`amp-ad`](/docs/reference/amp-ad.html).
123 | Somente anúncios veiculados via HTTPS são compatíveis.
124 |
125 | Nenhuma rede de anúncios que forneça JavaScript pode ser executada dentro do documento de AMP.
126 | Em vez disso, o tempo de execução da AMP carrega um iframe de uma
127 | origem diferente (por meio de uma sandbox de iframe)
128 | e executa o JS da rede de anúncios dentro da sandbox desse iframe.
129 |
130 | Você precisa especificar a largura e a altura do anúncio e o tipo de rede de anúncios.
131 | O `type` identifica o modelo da rede de anúncios.
132 | Diferentes tipos de anúncios exigem diferentes atributos `data-*`.
133 |
134 | [sourcecode:html]
135 | <amp-ad width=300 height=250
136 | type="example"
137 | data-aax_size="300x250"
138 | data-aax_pubname="test123"
139 | data-aax_src="302">
140 | </amp-ad>
141 | [/sourcecode]
142 |
143 | Se compatível com a rede de anúncios,
144 | inclua um `placeholder`
145 | para ser mostrado quando nenhum anúncio estiver disponível:
146 |
147 | [sourcecode:html]
148 | <amp-ad width=300 height=250
149 | type="example"
150 | data-aax_size="300x250"
151 | data-aax_pubname="test123"
152 | data-aax_src="302">
153 | <div placeholder>Have a great day!</div>
154 | </amp-ad>
155 | [/sourcecode]
156 |
157 | A AMP é compatível com uma ampla gama de redes de anúncios. Consulte as [referências para ver a lista completa](/docs/reference/amp-ad.html#supported-ad-networks).
158 |
```
--------------------------------------------------------------------------------
/content/learn/[email protected]:
--------------------------------------------------------------------------------
```markdown
1 | ---
2 | $title: ¿Qué es AMP?
3 | ---
4 | [TOC]
5 |
6 | <amp-youtube
7 | data-videoid="lBTCB7yLs8Y"
8 | layout="responsive"
9 | width="480" height="270">
10 | </amp-youtube>
11 |
12 | AMP es una manera de compilar páginas web para contenido estático de representación rápida.
13 | AMP en acción consta de tres partes diferentes:
14 |
15 | **AMP HTML** es HTML con algunas restricciones para lograr un rendimiento confiable,
16 | y con algunas extensiones para compilar contenido enriquecido más allá del formato HTML básico.
17 | La biblioteca **AMP JS** garantiza la representación rápida de páginas AMP HTML.
18 | El **Google AMP Cache** (opcional) proporciona las páginas AMP HTML.
19 |
20 | ## AMP HTML
21 |
22 | AMP HTML es básicamente contenido HTML ampliado con propiedades AMP personalizadas.
23 | El archivo en AMP HTML más sencillo tiene el siguiente aspecto:
24 |
25 | [sourcecode:html]
26 | <!doctype html>
27 | <html ⚡>
28 | <head>
29 | <meta charset="utf-8">
30 | <link rel="canonical" href="hello-world.html">
31 | <meta name="viewport" content="width=device-width,minimum-scale=1,initial-scale=1">
32 | <style amp-boilerplate>body{-webkit-animation:-amp-start 8s steps(1,end) 0s 1 normal both;-moz-animation:-amp-start 8s steps(1,end) 0s 1 normal both;-ms-animation:-amp-start 8s steps(1,end) 0s 1 normal both;animation:-amp-start 8s steps(1,end) 0s 1 normal both}@-webkit-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@-moz-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@-ms-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@-o-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}</style><noscript><style amp-boilerplate>body{-webkit-animation:none;-moz-animation:none;-ms-animation:none;animation:none}</style></noscript>
33 | <script async src="https://cdn.ampproject.org/v0.js"></script>
34 | </head>
35 | <body>Hello World!</body>
36 | </html>
37 | [/sourcecode]
38 |
39 | Si bien la mayoría de las etiquetas en una página AMP HTML son etiquetas HTML comunes,
40 | algunas etiquetas HTML se reemplazan por etiquetas específicas de AMP (consulta también la sección de
41 | [etiquetas HTML en la especificación de AMP](https://github.com/ampproject/amphtml/blob/master/spec/amp-html-format.md)).
42 | Estos elementos personalizados, llamados componentes AMP HTML,
43 | crean patrones comunes que pueden implementarse con buen rendimiento en forma sencilla.
44 |
45 | Por ejemplo, la etiqueta [`amp-img`](/docs/reference/amp-img.html)
46 | proporciona soporte completo de `srcset`, incluso en navegadores que todavía no lo admiten.
47 | Obtén más información acerca de cómo [crear tu primera página AMP HTML](/docs/get_started/create.html).
48 |
49 | ## AMP JS
50 |
51 | La [biblioteca AMP JS](https://github.com/ampproject/amphtml/tree/master/src) implementa
52 | todas las [prácticas recomendadas de rendimiento de AMP](/docs/get_started/technical_overview.html),
53 | administra la carga de recursos y te proporciona las etiquetas personalizadas que se mencionan arriba para
54 | garantizar la representación rápida de tu página.
55 |
56 | Una de las optimizaciones más importantes es que transforma en asincrónico todo lo que proviene de recursos externos, de modo que ningún elemento de la página pueda bloquear la representación.
57 |
58 | Entre otras técnicas de rendimiento se incluyen la disposición de todos los iframes en espacios seguros, el cálculo previo del diseño de cada elemento de la página antes de que se carguen los recursos y la desactivación de selectores de CSS lentos.
59 |
60 | Para obtener más información acerca de las [optimizaciones](/docs/get_started/technical_overview.html) y las limitaciones, [lee la especificación de AMP HTML](https://github.com/ampproject/amphtml/blob/master/spec/amp-html-format.md).
61 |
62 | ## Google AMP Cache
63 |
64 | El Google AMP Cache es una red de distribución de contenido basada en proxy
65 | para la entrega de todos los documentos de AMP válidos.
66 | Captura las páginas AMP HTML, las almacena en caché y mejora el rendimiento de estas automáticamente.
67 | Al usar el Google AMP Cache, el documento, todos los archivos de JS y todas las imágenes se cargan
68 | desde el mismo origen que usa
69 | [HTTP 2.0](https://http2.github.io/) para lograr la máxima eficiencia.
70 |
71 | El caché también viene con un
72 | [sistema de validación](https://github.com/ampproject/amphtml/tree/master/validator)
73 | integrado que confirma que se garantiza el funcionamiento de la página,
74 | y que esta no depende de recursos externos.
75 | El sistema de validación ejecuta una serie de aserciones
76 | que confirman que el marcado de la página cumple con la especificación de AMP HTML.
77 |
78 | Cada página AMP viene con otra versión del validador integrada. Esta versión puede registrar errores de validación directamente en la consola del navegador cuando se representa la página,
79 | lo que te permite ver cómo los cambios complejos en tu código
80 | podrían afectar el rendimiento y la experiencia del usuario.
81 |
82 | Obtén más información acerca de [cómo probar tus páginas AMP HTML](/docs/guides/validate.html).
```
--------------------------------------------------------------------------------
/content/docs/get_started/create/[email protected]:
--------------------------------------------------------------------------------
```markdown
1 | ---
2 | $title: AMP-HTML-Seite erstellen
3 | ---
4 |
5 | Das folgende Markup ist eine gute Ausgangsbasis und kann als Standard-Markup verwendet werden.
6 | Kopieren Sie es und speichern Sie es in einer Datei mit der Erweiterung ".html".
7 |
8 | [sourcecode:html]
9 | <!doctype html>
10 | <html amp lang="en">
11 | <head>
12 | <meta charset="utf-8">
13 | <title>Hello, AMPs</title>
14 | <link rel="canonical" href="http://example.ampproject.org/article-metadata.html" />
15 | <meta name="viewport" content="width=device-width,minimum-scale=1,initial-scale=1">
16 | <script type="application/ld+json">
17 | {
18 | "@context": "http://schema.org",
19 | "@type": "NewsArticle",
20 | "headline": "Open-source framework for publishing content",
21 | "datePublished": "2015-10-07T12:02:41Z",
22 | "image": [
23 | "logo.jpg"
24 | ]
25 | }
26 | </script>
27 | <style amp-boilerplate>body{-webkit-animation:-amp-start 8s steps(1,end) 0s 1 normal both;-moz-animation:-amp-start 8s steps(1,end) 0s 1 normal both;-ms-animation:-amp-start 8s steps(1,end) 0s 1 normal both;animation:-amp-start 8s steps(1,end) 0s 1 normal both}@-webkit-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@-moz-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@-ms-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@-o-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}</style><noscript><style amp-boilerplate>body{-webkit-animation:none;-moz-animation:none;-ms-animation:none;animation:none}</style></noscript>
28 | <script async src="https://cdn.ampproject.org/v0.js"></script>
29 | </head>
30 | <body>
31 | <h1>Welcome to the mobile web</h1>
32 | </body>
33 | </html>
34 | [/sourcecode]
35 |
36 | Der Inhalt im body-Element ist bisher ziemlich einfach. Allerdings ist relativ viel zusätzlicher Code im head-Element enthalten, der etwas genauer erläutert werden sollte. Darum dekonstruieren wir nun das erforderliche Markup.
37 |
38 | ### Erforderliches Markup
39 |
40 | AMP-HTML-Dokumente MÜSSEN:
41 |
42 | - mit dem Doctype `<!doctype html>` beginnen.
43 | - ein Top-Level-`<html ⚡>`-Tag enthalten (`<html amp>` wird auch akzeptiert).
44 | - die Tags `<head>` und `body` enthalten (in HTML sind sie optional).
45 | - im head-Element das Tag `<link rel="canonical" href="$SOME_URL" />` enthalten, das auf die reguläre HTML-Version des AMP-HTML-Dokuments oder auf sich selbst verweist, falls keine reguläre HTML-Version existiert.
46 | - ein `<meta charset="utf-8">`-Tag als erstes untergeordnetes Element des head-Tags enthalten.
47 | - das Tag `<meta name="viewport" content="width=device-width,minimum-scale=1">` innerhalb des head-Tags enthalten. Außerdem wird empfohlen, "initial-scale=1" einzufügen.
48 | - das Tag `<script async src="https://cdn.ampproject.org/v0.js"></script>` als letztes Element im head-Tag enthalten. Damit wird die AMP-JS-Bibliothek eingeschlossen und geladen.
49 | <li>Folgendes im `<head>`-Tag enthalten:
50 | `<style amp-boilerplate>body{-webkit-animation:-amp-start 8s steps(1,end) 0s 1 normal both;-moz-animation:-amp-start 8s steps(1,end) 0s 1 normal both;-ms-animation:-amp-start 8s steps(1,end) 0s 1 normal both;animation:-amp-start 8s steps(1,end) 0s 1 normal both}@-webkit-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@-moz-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@-ms-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@-o-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}</style><noscript><style amp-boilerplate>body{-webkit-animation:none;-moz-animation:none;-ms-animation:none;animation:none}</style></noscript>`
51 |
52 | ## Optionale Metadaten
53 |
54 | Neben den Basisanforderungen enthält unser Beispiel auch eine Schema.org-Definition im head-Element. Dies ist zwar keine strikte Anforderung für AMP, ist aber erforderlich, damit Inhalte an verschiedenen Stellen bereitgestellt werden können, zum Beispiel im [Nachrichtenkarussell der Google-Suche (auf dem Smartphone ausprobieren)](https://g.co/ampdemo).
55 |
56 | Weitere Informationen zu den Metadaten, die Sie an verschiedenen anderen Stellen wie z. B. Twitter brauchen, [finden Sie in unseren Beispielen](https://github.com/ampproject/amphtml/tree/master/examples/metadata-examples). Mehr über AMP in der Google-Suche erfahren Sie unter [Schlagzeilen mit AMP](https://developers.google.com/structured-data/carousels/top-stories).
57 |
58 | <hr>
59 |
60 | Gute Neuigkeiten! Das ist alles, was Sie zum Erstellen Ihrer ersten AMP-Seite brauchen. Aber natürlich passiert bisher noch nicht viel im HTML-Body. In den nächsten Schritten erfahren Sie, wie Sie grundlegende Komponenten wie Bilder und benutzerdefinierte AMP-Elemente hinzufügen, Ihre Seite gestalten und ein responsives Layout erstellen.
61 |
62 | <a class="go-button button" href="/de/docs/get_started/create/include_image.html">Weiter mit Schritt 2</a>
63 |
```
--------------------------------------------------------------------------------
/content/docs/get_started/create/[email protected]:
--------------------------------------------------------------------------------
```markdown
1 | ---
2 | $title: Crea la tua pagina HTML AMP
3 | ---
4 |
5 | Il seguente markup costituisce un discreto punto di inizio o boilerplate.
6 | Copialo e salvalo in un file con estensione .html.
7 |
8 | [sourcecode:html]
9 | <!doctype html>
10 | <html amp lang="en">
11 | <head>
12 | <meta charset="utf-8">
13 | <title>Hello, AMPs</title>
14 | <link rel="canonical" href="http://example.ampproject.org/article-metadata.html" />
15 | <meta name="viewport" content="width=device-width,minimum-scale=1,initial-scale=1">
16 | <script type="application/ld+json">
17 | {
18 | "@context": "http://schema.org",
19 | "@type": "NewsArticle",
20 | "headline": "Open-source framework for publishing content",
21 | "datePublished": "2015-10-07T12:02:41Z",
22 | "image": [
23 | "logo.jpg"
24 | ]
25 | }
26 | </script>
27 | <style amp-boilerplate>body{-webkit-animation:-amp-start 8s steps(1,end) 0s 1 normal both;-moz-animation:-amp-start 8s steps(1,end) 0s 1 normal both;-ms-animation:-amp-start 8s steps(1,end) 0s 1 normal both;animation:-amp-start 8s steps(1,end) 0s 1 normal both}@-webkit-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@-moz-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@-ms-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@-o-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}</style><noscript><style amp-boilerplate>body{-webkit-animation:none;-moz-animation:none;-ms-animation:none;animation:none}</style></noscript>
28 | <script async src="https://cdn.ampproject.org/v0.js"></script>
29 | </head>
30 | <body>
31 | <h1>Welcome to the mobile web</h1>
32 | </body>
33 | </html>
34 | [/sourcecode]
35 |
36 | Il contenuto del corpo della pagina, fin qui, è piuttosto lineare. Nell’intestazione della pagina però è presente una buona porzione di codice supplementare che potrebbe non risultare immediatamente ovvio. Proviamo a scomporre il markup obbligatorio.
37 |
38 | ## Markup obbligatorio
39 |
40 | I documenti HTML AMP DEVONO:
41 |
42 | - Iniziare con il doctype `<!doctype html>`.
43 | - Contenere un tag di primo livello `<html ⚡>` (`<html amp>` è ugualmente accettato).
44 | - Contenere i tag `<head>` e `<body>` (questi sono opzionali in HTML).
45 | - Contenere un tag `<link rel="canonical" href="$SOME_URL" />` all’interno dell’intestazione che faccia riferimento alla normale versione HTML del documento HTML AMP o a sé stesso se non esiste tale versione HTML.
46 | - Contenere un tag `<meta charset="utf-8">` in quanto primo tag secondario del tag dell’intestazione.
47 | - Contenere un tag `<meta name="viewport" content="width=device-width,minimum-scale=1">` all’interno del tag dell’intestazione. Si consiglia anche di includere initial-scale=1.
48 | - Contenere un tag `<script async src="https://cdn.ampproject.org/v0.js"></script>` in quanto ultimo elemento dell’intestazione (ciò comprende e carica la libreria AMP JS).
49 | - Contenere quanto segue nei tag `<head>`:
50 | `<style amp-boilerplate>body{-webkit-animation:-amp-start 8s steps(1,end) 0s 1 normal both;-moz-animation:-amp-start 8s steps(1,end) 0s 1 normal both;-ms-animation:-amp-start 8s steps(1,end) 0s 1 normal both;animation:-amp-start 8s steps(1,end) 0s 1 normal both}@-webkit-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@-moz-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@-ms-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@-o-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}</style><noscript><style amp-boilerplate>body{-webkit-animation:none;-moz-animation:none;-ms-animation:none;animation:none}</style></noscript>`
51 |
52 | ## Metadati opzionali
53 |
54 | Oltre ai requisiti di base, il nostro campione nell’intestazione comprende anche una definizione Schema.org, che non è un requisito essenziale per AMP, ma è un requisito per la distribuzione del contenuto in alcuni luoghi, ad esempio nella [demo del carosello di notizie di Ricerca Google (provala sul tuo telefono)](https://g.co/ampdemo).
55 |
56 | Per ulteriori informazioni su tutti i metadati che ti serviranno i svariate altre situazioni, come Twitter, [esamina i nostri campioni](https://github.com/ampproject/amphtml/tree/master/examples/metadata-examples). Per informazioni dettagliate su AMP in Ricerca Google, vai alla sezione [Top Stories con AMP](https://developers.google.com/structured-data/carousels/top-stories).
57 |
58 | <hr>
59 |
60 | Buone notizie! Questo è tutto ciò che ci serve per creare la nostra prima pagina AMP, ma naturalmente il corpo della pagina non comprende ancora molte informazioni. Nella prossima sezione parleremo di come aggiungere componenti di base come immagini ed elementi AMP personalizzati, di come applicare uno stile alla pagina e di come definire un layout reattivo.
61 |
62 | <a class="go-button button" href="/it/docs/get_started/create/include_image.html">Vai al Passaggio 2</a>
```
--------------------------------------------------------------------------------
/content/docs/get_started/create/[email protected]:
--------------------------------------------------------------------------------
```markdown
1 | ---
2 | $title: Crea tu página AMP HTML
3 | ---
4 |
5 | El siguiente marcado es un punto de partida o código estándar aceptable.
6 | Cópialo y guárdalo en un archivo con extensión .html.
7 |
8 | [sourcecode:html]
9 | <!doctype html>
10 | <html amp lang="es">
11 | <head>
12 | <meta charset="utf-8">
13 | <script async src="https://cdn.ampproject.org/v0.js"></script>
14 | <title>Hola, AMP</title>
15 | <link rel="canonical" href="http://example.ampproject.org/article-metadata.html" />
16 | <meta name="viewport" content="width=device-width,minimum-scale=1,initial-scale=1">
17 | <script type="application/ld+json">
18 | {
19 | "@context": "http://schema.org",
20 | "@type": "NewsArticle",
21 | "headline": "Open-source framework for publishing content",
22 | "datePublished": "2015-10-07T12:02:41Z",
23 | "image": [
24 | "logo.jpg"
25 | ]
26 | }
27 | </script>
28 | <style amp-boilerplate>body{-webkit-animation:-amp-start 8s steps(1,end) 0s 1 normal both;-moz-animation:-amp-start 8s steps(1,end) 0s 1 normal both;-ms-animation:-amp-start 8s steps(1,end) 0s 1 normal both;animation:-amp-start 8s steps(1,end) 0s 1 normal both}@-webkit-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@-moz-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@-ms-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@-o-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}</style><noscript><style amp-boilerplate>body{-webkit-animation:none;-moz-animation:none;-ms-animation:none;animation:none}</style></noscript>
29 | </head>
30 | <body>
31 | <h1>Bienvenido a la web móvil</h1>
32 | </body>
33 | </html>
34 | [/sourcecode]
35 |
36 | El contenido del cuerpo, hasta ahora, es bastante sencillo. Sin embargo, hay mucho más código en la etiqueta `<head>` de la página que podría no ser evidente de inmediato. Analicemos el marcado obligatorio.
37 |
38 | ## Marcado obligatorio
39 |
40 | Los documentos AMP HTML DEBEN:
41 |
42 | - Comenzar con el tipo de documento `<!doctype html>`.
43 | - Contener la etiqueta `<html ⚡>` en el nivel superior (también se acepta `<html amp>`).
44 | - Contener las etiquetas `<head>` y `<body>` (opcionales en HTML).
45 | - Contener la etiqueta `<meta charset="utf-8">` como el primer hijo de su etiqueta `<head>`.
46 | - Contener la etiqueta `<script async src="https://cdn.ampproject.org/v0.js"></script>` como el segundo hijo de su etiqueta `<head>` (esto incluye y carga la biblioteca AMP JS).
47 | - Contener una etiqueta `<link rel="canonical" href="$SOME_URL" />` en la etiqueta `<head>` orientada a la versión de HTML común del documento de AMP HTML o a sí misma si no existiera dicha versión de HTML.
48 | - Contener una etiqueta `<meta name="viewport" content="width=device-width,minimum-scale=1">` en la etiqueta `<head>`. También se recomienda incluir initial-scale=1.
49 | - Contener lo siguiente en su etiqueta `<head>`:
50 | `<style amp-boilerplate>body{-webkit-animation:-amp-start 8s steps(1,end) 0s 1 normal both;-moz-animation:-amp-start 8s steps(1,end) 0s 1 normal both;-ms-animation:-amp-start 8s steps(1,end) 0s 1 normal both;animation:-amp-start 8s steps(1,end) 0s 1 normal both}@-webkit-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@-moz-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@-ms-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@-o-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}</style><noscript><style amp-boilerplate>body{-webkit-animation:none;-moz-animation:none;-ms-animation:none;animation:none}</style></noscript>`
51 |
52 | ## Meta datos opcionales
53 |
54 | Además de los requisitos básicos, en nuestro ejemplo también se incluye una definición Schema.org en el `<head>`, que no es un requisito estricto para AMP, pero es un requisito para poder distribuir tu contenido en determinados sitios. Por ejemplo, en la [demostración del carrusel de novedades sobre Búsqueda de Google (pruébalo en tu teléfono)](https://g.co/ampdemo).
55 |
56 | Para obtener más información acerca de todos los metadatos que necesitarás en muchos otros entornos (por ejemplo, Twitter), [explora nuestros ejemplos](https://github.com/ampproject/amphtml/tree/master/examples/metadata-examples). Para obtener información específica sobre AMP en la Búsqueda de Google, consulta [Historias principales con AMP](https://developers.google.com/structured-data/carousels/top-stories).
57 |
58 | <hr>
59 |
60 | ¡Buenas noticias! Eso es todo lo que necesitamos para crear nuestra primera página AMP, aunque por supuesto aún no hay demasiadas noticias respecto del `<body>`. En la próxima sección, veremos la manera de agregar componentes básicos, como imágenes, elementos de AMP personalizados, de dar estilo a tu página y de definir un diseño responsivo.
61 |
62 | <a class="go-button button" href="/es/docs/get_started/create/include_image.html">Continuar con el paso 2</a>
```
--------------------------------------------------------------------------------
/content/docs/guides/author_develop/[email protected]:
--------------------------------------------------------------------------------
```markdown
1 | ---
2 | $title: Inclure du contenu tiers
3 | ---
4 |
5 | Découvrez comment inclure des composants tiers dans vos pages.
6 |
7 | [TOC]
8 |
9 | ## Intégrer un tweet
10 |
11 | Intégrez un tweet de Twitter dans votre page à l'aide de l'élément [`amp-twitter`](/docs/reference/extended/amp-twitter.html).
12 |
13 | Pour inclure un tweet dans votre page, incluez d'abord le script suivant dans la section `<head>` :
14 |
15 | [sourcecode:html]
16 | <script async custom-element="amp-twitter" src="https://cdn.ampproject.org/v0/amp-twitter-0.1.js"></script>
17 | [/sourcecode]
18 |
19 | Actuellement, les tweets sont automatiquement redimensionnés en fonction de la taille indiquée, mais ne s'affichent pas forcément de façon idéale.
20 | Modifiez manuellement la largeur et la hauteur fournies ou utilisez l'attribut média pour sélectionner le format en fonction de la largeur de l'écran.
21 |
22 | Exemple d'élément `amp-twitter` tiré de [twitter.amp](https://github.com/ampproject/amphtml/blob/master/examples/twitter.amp.html) :
23 |
24 | [sourcecode:html]
25 | <amp-twitter width="390" height="50"
26 | layout="responsive"
27 | data-tweetid="638793490521001985">
28 | </amp-twitter>
29 | [/sourcecode]
30 |
31 | ## Intégrer une publication Instagram
32 |
33 | Intégrez une publication Instagram dans votre page à l'aide de l'élément [`amp-instagram`](/docs/reference/extended/amp-instagram.html).
34 |
35 | Pour inclure une publication Instagram, incluez d'abord le script suivant dans la section `<head>` :
36 |
37 | [sourcecode:html]
38 | <script async custom-element="amp-instagram" src="https://cdn.ampproject.org/v0/amp-instagram-0.1.js"></script>
39 | [/sourcecode]
40 |
41 | Incluez le code court d'Instagram figurant dans l'URL de la photo Instagram. Ainsi, dans `https://instagram.com/p/fBwFP`, `fBwFP` est le code court.
42 | De plus, Instagram utilise un format fixe pour les mises en page responsives. Ainsi, les valeurs de largeur et de hauteur doivent être universelles.
43 |
44 | [sourcecode:html]
45 | <amp-instagram
46 | data-shortcode="fBwFP"
47 | width="320"
48 | height="392"
49 | layout="responsive">
50 | </amp-instagram>
51 | [/sourcecode]
52 |
53 | ## Afficher un post ou une vidéo Facebook
54 |
55 | Affichez un post ou une vidéo Facebook dans votre page à l'aide de l'élément [`amp-facebook`](/docs/reference/extended/amp-facebook.html).
56 |
57 | Vous devez inclure le script suivant dans la section `<head>` :
58 |
59 | [sourcecode:html]
60 | <script async custom-element="amp-facebook" src="https://cdn.ampproject.org/v0/amp-facebook-0.1.js"></script>
61 | [/sourcecode]
62 |
63 | Exemple d'intégration d'un post :
64 |
65 | [sourcecode:html]
66 | <amp-facebook width=486 height=657
67 | layout="responsive"
68 | data-href="https://www.facebook.com/zuck/posts/10102593740125791">
69 | </amp-facebook>
70 | [/sourcecode]
71 |
72 | Exemple d'intégration d'une vidéo :
73 |
74 | [sourcecode:html]
75 | <amp-facebook width=552 height=574
76 | layout="responsive"
77 | data-embed-as="video"
78 | data-href="https://www.facebook.com/zuck/videos/10102509264909801/">
79 | </amp-facebook>
80 | [/sourcecode]
81 |
82 | ## Inclure une vidéo YouTube
83 |
84 | Incluez une vidéo YouTube dans votre page à l'aide de l'élément [`amp-youtube`](/docs/reference/extended/amp-youtube.html).
85 |
86 | Vous devez inclure le script suivant dans la section `<head>` :
87 |
88 | [sourcecode:html]
89 | <script async custom-element="amp-youtube" src="https://cdn.ampproject.org/v0/amp-youtube-0.1.js"></script>
90 | [/sourcecode]
91 |
92 | L'élément `data-videoid` YouTube figure dans l'URL de chaque page de vidéo YouTube. Ainsi, dans https://www.youtube.com/watch?v=Z1q71gFeRqM, Z1q71gFeRqM représente l'identification vidéo.
93 |
94 | Utilisez `layout="responsive"` pour obtenir une mise en page correcte des vidéos au format 16:9 :
95 |
96 | [sourcecode:html]
97 | <amp-youtube
98 | data-videoid="mGENRKrdoGY"
99 | layout="responsive"
100 | width="480" height="270">
101 | </amp-youtube>
102 | [/sourcecode]
103 |
104 | ## Afficher une annonce
105 |
106 | Affichez une annonce sur votre page à l'aide de l'élément [`amp-ad`](/docs/reference/amp-ad.html).
107 | Seules les annonces diffusées via le protocole HTTPS sont acceptées.
108 |
109 | Aucun code JavaScript fourni par un réseau publicitaire ne peut fonctionner dans un document AMP.
110 | À la place, l'exécution AMP charge un iFrame d'une autre origine (via le bac à sable de l'iFrame) et exécute le JavaScript du réseau publicitaire dans ce bac à sable iFrame.
111 |
112 | Vous devez préciser la largeur et la hauteur de l'annonce, et le type de réseau publicitaire.
113 | Le `type` identifie le modèle de réseau publicitaire.
114 | Des types d'annonces différents nécessitent des attributs `data-*` différents.
115 |
116 | [sourcecode:html]
117 | <amp-ad width="300" height="250"
118 | type="example"
119 | data-aax_size="300x250"
120 | data-aax_pubname="test123"
121 | data-aax_src="302">
122 | </amp-ad>
123 | [/sourcecode]
124 |
125 | Si le réseau publicitaire le permet, incluez un `placeholder` à afficher si aucune annonce n'est disponible :
126 |
127 | [sourcecode:html]
128 | <amp-ad width="300" height="250"
129 | type="example"
130 | data-aax_size="300x250"
131 | data-aax_pubname="test123"
132 | data-aax_src="302">
133 | <div placeholder>Have a great day!</div>
134 | </amp-ad>
135 | [/sourcecode]
136 |
137 | AMP accepte un large éventail de réseaux publicitaires. [Consultez la liste complète.](/docs/reference/amp-ad.html#supported-ad-networks)
138 |
```