This is page 7 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/learn/about-amp.md:
--------------------------------------------------------------------------------
```markdown
1 | ---
2 | $title: What Is AMP?
3 | $order: 0
4 | $hidden: true
5 | components:
6 | - youtube
7 | ---
8 | [TOC]
9 |
10 | <amp-youtube
11 | data-videoid="lBTCB7yLs8Y"
12 | layout="responsive"
13 | width="480" height="270">
14 | </amp-youtube>
15 |
16 | AMP is a way to build web pages for static content that render fast.
17 | AMP in action consists of three different parts:
18 |
19 | **AMP HTML** is HTML with some restrictions for reliable performance
20 | and some extensions for building rich content beyond basic HTML.
21 | The **AMP JS** library ensures the fast rendering of AMP HTML pages.
22 | The **Google AMP Cache** can be used to serve cached AMP HTML pages.
23 |
24 | ## AMP HTML
25 |
26 | AMP HTML is basically HTML extended with custom AMP properties.
27 | The simplest AMP HTML file looks like this:
28 |
29 | [sourcecode:html]
30 | <!doctype html>
31 | <html ⚡>
32 | <head>
33 | <meta charset="utf-8">
34 | <link rel="canonical" href="hello-world.html">
35 | <meta name="viewport" content="width=device-width,minimum-scale=1,initial-scale=1">
36 | <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>
37 | <script async src="https://cdn.ampproject.org/v0.js"></script>
38 | </head>
39 | <body>Hello World!</body>
40 | </html>
41 | [/sourcecode]
42 |
43 | Though most tags in an AMP HTML page are regular HTML tags,
44 | some HTML tags are replaced with AMP-specific tags (see also
45 | [HTML Tags in the AMP spec](https://github.com/ampproject/amphtml/blob/master/spec/amp-html-format.md)).
46 | These custom elements, called AMP HTML components,
47 | make common patterns easy to implement in a performant way.
48 |
49 | For example, the [`amp-img`](/docs/reference/amp-img.html) tag
50 | provides full `srcset` support even in browsers that don’t support it yet.
51 | Learn how to [create your first AMP HTML page](/docs/get_started/create.html).
52 |
53 | ## AMP JS
54 |
55 | The [AMP JS library](https://github.com/ampproject/amphtml/tree/master/src) implements
56 | all of [AMP's best performance practices](/docs/get_started/technical_overview.html),
57 | manages resource loading and gives you the custom tags mentioned above,
58 | all to ensure a fast rendering of your page.
59 |
60 | Among the biggest optimizations is the fact that it makes everything that comes from external resources asynchronous, so nothing in the page can block anything from rendering.
61 |
62 | Other performance techniques include the sandboxing of all iframes, the pre-calculation of the layout of every element on page before resources are loaded and the disabling of slow CSS selectors.
63 |
64 | To learn more about not just the [optimizations](/docs/get_started/technical_overview.html) but the limitations, [read the AMP HTML specification](https://github.com/ampproject/amphtml/blob/master/spec/amp-html-format.md).
65 |
66 | ## Google AMP Cache
67 |
68 | The [Google AMP Cache](https://developers.google.com/amp/cache/) is a proxy-based content delivery network
69 | for delivering all valid AMP documents.
70 | It fetches AMP HTML pages, caches them, and improves page performance automatically.
71 | When using the Google AMP Cache, the document, all JS files and all images load
72 | from the same origin that is using
73 | [HTTP 2.0](https://http2.github.io/) for maximum efficiency.
74 |
75 | The cache also comes with a built-in
76 | [validation system](https://github.com/ampproject/amphtml/tree/master/validator)
77 | which confirms that the page is guaranteed to work,
78 | and that it doesn't depend on external resources.
79 | The validation system runs a series of assertions
80 | confirming the page’s markup meets the AMP HTML specification.
81 |
82 | Another version of the validator comes bundled with every AMP page. This version can log validation errors directly to the browser’s console when the page is rendered,
83 | allowing you to see how complex changes in your code
84 | might impact performance and user experience.
85 |
86 | Learn more about [testing your AMP HTML pages](/docs/guides/validate.html).
87 |
```
--------------------------------------------------------------------------------
/content/learn/case-studies/gizmodo.md:
--------------------------------------------------------------------------------
```markdown
1 | ---
2 | $order: 1
3 | $title: Gizmodo
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: AMP makes Gizmodo 3x faster on mobile
13 | thumb: "case-studies/gizmodo_thumb.jpg"
14 | results:
15 | - stat: 100k
16 | description: AMP page visits daily
17 | - stat: 3x
18 | description: Faster page load time
19 | - stat: 50%
20 | description: Increase in impressions
21 | logo:
22 | src: "case-studies/gizmodo_logo.png"
23 | width: 142
24 | height: 21
25 | download: "case-studies/gizmodo.pdf"
26 | ---
27 |
28 | <div class="img-right gizmodo">
29 | <amp-img width="1439" height="1876" layout="responsive"
30 | srcset="/static/img/case-studies/gizmodo_phone1.png 1439w,
31 | /static/img/case-studies/gizmodo_phone1@1_5x.png 950w,
32 | /static/img/case-studies/[email protected] 720w"
33 | src="/static/img/case-studies/gizmodo_phone1.png">
34 | </amp-img>
35 | </div>
36 |
37 | User experience has always been a major focus at Gizmodo, the popular design, technology, and science fiction blog. With over half of traffic coming to their mobile website, keeping the site clear and fast is key to keeping readers on mobile devices engaged with their content.
38 |
39 | Over the past two years Gizmodo has implemented a number of optimizations to improve page load times, such as removing unnecessary scripts, setting a fallback font for web fonts and lazy loading below-the-fold site components. Yet, the team still felt like more could be done to improve performance for their mobile users. Josh Laurito, Head of Data and Analytics, highlighted their main challenge:
40 |
41 | > “We delivered the same (large) JavaScript & CSS payloads to users on mobile and desktop, making it difficult to improve one experience without degrading the other.”
42 |
43 | With the launch of AMP, Gizmodo saw an opportunity to address this obstacle.
44 |
45 | #### Solution
46 |
47 | Gizmodo implemented AMP in May of 2016 and is now publishing AMP pages for 100% their posts, as well as creating AMP versions of previous work. Gizmodo has been early to test and adopt new AMP features. They are among the first to publish reader comments and conversations and run A/B tests on AMP articles. Ali Philippides, product lead for the implementation of AMP, said the most pleasant surprise has been the flexibility of the format:
48 |
49 | > “We were very impressed with how many features we could translate from our mobile experience. We were able to implement a navigation menu, social sharing toolbar, and a newsletter subscription module, which kept the user experience consistent between our sites and our AMP articles.”
50 | >
51 | > Ali Philippides, product lead for the implmentation of AMP
52 |
53 |
54 | <div class="img-left gizmodo img-mobile">
55 | <amp-img width="1200" height="1423" layout="responsive"
56 | srcset="/static/img/case-studies/gizmodo_phone2.png 1200w,
57 | /static/img/case-studies/gizmodo_phone2@1_5x.png 792w,
58 | /static/img/case-studies/[email protected] 600w"
59 | src="/static/img/case-studies/gizmodo_phone2.png">
60 | </amp-img>
61 | </div>
62 |
63 | #### Results
64 |
65 | <div class="img-left gizmodo img-desktop">
66 | <amp-img width="1200" height="1423" layout="responsive"
67 | srcset="/static/img/case-studies/gizmodo_phone2.png 1200w,
68 | /static/img/case-studies/gizmodo_phone2@1_5x.png 792w,
69 | /static/img/case-studies/[email protected] 600w"
70 | src="/static/img/case-studies/gizmodo_phone2.png">
71 | </amp-img>
72 | </div>
73 |
74 | As of September Gizmodo has published over 24,000 AMP pages and is receiving 100k visits to those pages daily. AMP has been highly successful in making Gizmodo’s mobile pages fast -- page load time for AMP is 3x faster than the regular mobile site. AMP has even helped Gizmodo attract new readers. Over 80% of Gizmodo’s traffic from AMP pages is new traffic, compared to under 50% of all mobile sessions. Gizmodo has also seen a 50% increase in impressions per pageview on AMP.
75 |
76 | Gizmodo is looking forward to seeing how the AMP format evolves over time. Laurito said “we would like to work with the AMP community to expand support for reader log-in and commenting, more high-impact ad units, and broader capacity to recommend stories to our readers.” Overall, implementing AMP has made a meaningful difference to Gizmodo’s mobile experience.
77 |
78 | > “AMP has been an overwhelmingly positive experience for Gizmodo”
79 | >
80 | > JOSH LAURITO, Head of Data and Analytics
81 |
```
--------------------------------------------------------------------------------
/views/partials/head.html:
--------------------------------------------------------------------------------
```html
1 | <head>
2 | <meta charset="utf-8">
3 | <meta name="viewport" content="width=device-width,minimum-scale=1,initial-scale=1">
4 | <meta content="IE=Edge" http-equiv="X-UA-Compatible">
5 | <meta property="og:description" content="{% if doc.description %}{{doc.description}} – {% endif %}Accelerated Mobile Pages Project">
6 | <meta name="description" content="{% if doc.description %}{{doc.description}} – {% endif %}Accelerated Mobile Pages Project">
7 | <meta name="amp-experiments-opt-in" content="visibility-v2">
8 |
9 | <title>{% if doc.title %}{{doc.title}} – {% endif %}Accelerated Mobile Pages Project</title>
10 | <link rel="shortcut icon" href="/static/img/amp_favicon.png?v=3">
11 | <link rel="canonical" href="https://www.ampproject.org{{doc.url.path}}">
12 |
13 | <link rel="manifest" href="/static/manifest.json">
14 | <meta name="apple-mobile-web-app-capable" content="yes">
15 | <link rel="apple-touch-icon" sizes="120x120" href="/static/img/icons/120.png">
16 | <link rel="apple-touch-icon" sizes="152x152" href="/static/img/icons/152.png">
17 | <link rel="apple-touch-icon" sizes="167x167" href="/static/img/icons/167.png">
18 | <link rel="apple-touch-icon" sizes="180x180" href="/static/img/icons/180.png">
19 |
20 | <link href="https://fonts.googleapis.com/css?family=Roboto:100,300,400" rel="stylesheet">
21 |
22 | <script async src="https://cdn.ampproject.org/v0.js"></script>
23 | <script async custom-element="amp-sidebar" src="https://cdn.ampproject.org/v0/amp-sidebar-0.1.js"></script>
24 | <script async custom-element="amp-accordion" src="https://cdn.ampproject.org/v0/amp-accordion-0.1.js"></script>
25 | <script async custom-element="amp-analytics" src="https://cdn.ampproject.org/v0/amp-analytics-0.1.js"></script>
26 | <script async custom-element="amp-install-serviceworker" src="https://cdn.ampproject.org/v0/amp-install-serviceworker-0.1.js"></script>
27 | <script async custom-element="amp-form" src="https://cdn.ampproject.org/v0/amp-form-0.1.js"></script>
28 |
29 | {% if doc.components %}
30 | {% for component in doc.components %}
31 | <script async custom-element="amp-{{component}}" src="https://cdn.ampproject.org/v0/amp-{{component}}-0.1.js"></script>
32 | {% endfor %}
33 | {% endif %}
34 |
35 | <style amp-custom>
36 | {% if doc.view == '/views/doc.html' %}
37 | {% include "/assets/css/docs.min.css" %}
38 | {% elif doc.view == '/views/section_page.html' or doc.view == '/views/grid_page.html' %}
39 | {% include "/assets/css/section.min.css" %}
40 | {% elif doc.view == '/views/case-study.html' or doc.view == '/views/about-casestudies.html' %}
41 | {% include "/assets/css/case-study.min.css" %}
42 | {% elif doc.view == '/views/list_page.html' or doc.url.path.endswith('/latest/') %}
43 | {% include "/assets/css/list.min.css" %}
44 | {% elif doc.view == '/views/blog_detail.html' or doc.url.path.endswith('/roadmap/') %}
45 | {% include "/assets/css/blog.min.css" %}
46 | {% elif doc.pod_path == '/content/pages/home.html' %}
47 | {% include "/assets/css/home.min.css" %}
48 | {% elif doc.view == '/views/about-overview.html' %}
49 | {% include "/assets/css/about-overview.min.css" %}
50 | {% elif doc.view == '/views/about-how.html' %}
51 | {% include "/assets/css/about-how.min.css" %}
52 | {% elif doc.view == '/views/about-who.html' %}
53 | {% include "/assets/css/about-who.min.css" %}
54 | {% elif doc.view == '/views/about-who-vertical.html' %}
55 | {% include "/assets/css/about-who-vertical.min.css" %}
56 | {% elif doc.view == '/views/design-principles.html' %}
57 | {% include "/assets/css/design-principles.min.css" %}
58 | {% else %}
59 | {% include "/assets/css/main.min.css" %}
60 | {% endif %}
61 | {% if doc.stylesheet %}
62 | {% include "/assets/css/" ~ doc.stylesheet %}
63 | {% endif %}
64 | </style>
65 |
66 | <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>
67 |
68 | </head>
69 |
```
--------------------------------------------------------------------------------
/content/pages/amp-conf-2017/code-of-conduct.html:
--------------------------------------------------------------------------------
```html
1 | ---
2 | $title: AMP Conf 2017 - Code of Conduct
3 | noglobalnote: 1
4 | class: amp-conf
5 | stylesheet: pages/amp-conf.css
6 | ---
7 |
8 | {% set conf = g.doc('/content/includes/amp-conf-2017.yaml', locale=doc.locale) %}
9 |
10 | <section class="code-of-conduct amp-conf-section">
11 |
12 | <div class="wrapper">
13 |
14 | <h3>AMP Conf Community Guidelines and Anti-Harassment Policy</h3>
15 |
16 | <p>The AMP Project is dedicated to providing a harassment-free and inclusive event experience for everyone regardless of gender identity and expression, sexual orientation, disabilities, neurodiversity, physical appearance, body size, ethnicity, nationality, race, age, religion, or other protected category. We do not tolerate harassment of event participants in any form. Google takes violations of our policy seriously and will respond appropriately.</p>
17 |
18 | <p>All participants of the AMP Conf must abide by the following policy:</p>
19 |
20 | <ol>
21 | <li><strong>Be excellent to each other.</strong> Treat everyone with respect. Participate while acknowledging that everyone deserves to be here — and each of us has the right to enjoy our experience without fear of harassment, discrimination, or condescension, whether blatant or via micro-aggressions. Jokes shouldn’t demean others. Consider what you are saying and how it would feel if it were said to or about you.</li>
22 | <li><strong>Speak up if you see or hear something.</strong> Harassment is not tolerated, and you are empowered to politely engage when you or others are disrespected. The person making you feel uncomfortable may not be aware of what they are doing, and politely bringing their behavior to their attention is encouraged.</li>
23 | <li><strong>Practice saying "Yes and" to each other.</strong> It’s a theatre improv technique to build on each other’s ideas. We all benefit when we create together.</li>
24 | </ol>
25 |
26 | <p>We have a <strong>ZERO TOLERANCE POLICY</strong> for harassment of any kind, including but not limited to:</p>
27 |
28 | <ul>
29 | <li>Stalking/following</li>
30 | <li>Deliberate intimidation</li>
31 | <li>Harassing photography or recording</li>
32 | <li>Sustained disruption of talks or other events</li>
33 | <li>Offensive verbal language</li>
34 | <li>Verbal language that reinforces social structures of domination</li>
35 | <li>Sexual imagery and language in public spaces</li>
36 | <li>Inappropriate physical contact</li>
37 | <li>Unwelcome sexual or physical attention</li>
38 | </ul>
39 |
40 | <p><strong>In relation to, but not limited to:</strong></p>
41 |
42 | <ul>
43 | <li>Neurodiversity</li>
44 | <li>Race</li>
45 | <li>Color</li>
46 | <li>National origin</li>
47 | <li>Gender identity</li>
48 | <li>Gender expression</li>
49 | <li>Sexual orientation</li>
50 | <li>Age</li>
51 | <li>Body size</li>
52 | <li>Disabilities</li>
53 | <li>Appearance</li>
54 | <li>Religion</li>
55 | <li>Pregnancy</li>
56 | </ul>
57 |
58 | <p>Participants asked to stop any harassing behavior are expected to comply immediately. Our zero tolerance policy means that we will look into and review every allegation of violation of our Event Community Guidelines and Anti-Harassment Policy and respond appropriately. We empower and encourage you to report any behavior that makes you or others feel uncomfortable by finding a AMP Conf staff member wearing a event shirt with the AMP Logo or by emailing <a href="mailto:[email protected]">[email protected]</a>.</p>
59 |
60 | <p>Event staff will be happy to help participants contact hotel/venue security or local law enforcement, provide escorts, or otherwise assist those experiencing discomfort or harassment to feel safe for the duration of the event. We value your attendance.</p>
61 |
62 | <p>This policy extends to talks, forums, workshops, codelabs, social media, parties, hallway conversations, all attendees, partners, sponsors, volunteers, event staff, etc. You catch our drift. AMP Conf reserves the right to refuse admittance to, or remove any person from, any AMP Project-hosted event (including future AMP-related events) at any time in its sole discretion. This includes, but is not limited to, attendees behaving in a disorderly manner or failing to comply with this policy, and the terms and conditions herein. If a participant engages in harassing or uncomfortable behavior, the conference organizers may take any action they deem appropriate, including warning or expelling the offender from the conference with no refund.</p>
63 |
64 | </div>
65 |
66 | </section>
67 |
```
--------------------------------------------------------------------------------
/assets/img/latest/events/event_empty.svg:
--------------------------------------------------------------------------------
```
1 | <?xml version="1.0" encoding="utf-8"?>
2 | <!-- Generator: Adobe Illustrator 21.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0) -->
3 | <svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
4 | viewBox="0 0 30.4 30.3" style="enable-background:new 0 0 30.4 30.3;" xml:space="preserve">
5 | <style type="text/css">
6 | .st0{fill:none;stroke:#0DD6FF;stroke-linecap:round;stroke-miterlimit:10;}
7 | .st1{fill:#FFFFFF;fill-opacity:0.8;stroke:url(#SVGID_1_);stroke-miterlimit:10;}
8 | .st2{opacity:0.7;fill:#FFFFFF;enable-background:new ;}
9 | .st3{fill:none;stroke:url(#SVGID_2_);stroke-miterlimit:10;}
10 | .st4{fill:#FFFFFF;fill-opacity:0.7;stroke:url(#SVGID_3_);stroke-miterlimit:10;}
11 | .st5{fill:none;stroke:url(#SVGID_4_);stroke-linejoin:round;}
12 | .st6{fill:none;stroke:url(#SVGID_5_);stroke-miterlimit:10;}
13 | .st7{fill:none;stroke:url(#SVGID_6_);stroke-miterlimit:10;}
14 | .st8{fill:none;stroke:url(#SVGID_7_);stroke-miterlimit:10;}
15 | </style>
16 | <symbol id="New_Symbol_11" viewBox="-15.2 -15.2 30.4 30.3">
17 | <path class="st0" d="M-2.9-13.3c0.2-0.8,1-1.3,1.8-1.3l0,0"/>
18 |
19 | <linearGradient id="SVGID_1_" gradientUnits="userSpaceOnUse" x1="-117.8209" y1="-390.0036" x2="-87.8603" y2="-390.0036" gradientTransform="matrix(0.9987 -4.377932e-02 4.377932e-02 0.9987 118.9413 385.8035)">
20 | <stop offset="0" style="stop-color:#1C79C4"/>
21 | <stop offset="0.51" style="stop-color:#0389FF"/>
22 | <stop offset="1" style="stop-color:#0DD6FF"/>
23 | </linearGradient>
24 | <rect x="-14.7" y="-13.1" class="st1" width="27.7" height="27.7"/>
25 | <g>
26 | <polygon class="st2" points="-11.2,-11.4 12.4,-14.2 14.7,5.4 10.9,9.8 -8.4,12.1 "/>
27 |
28 | <linearGradient id="SVGID_2_" gradientUnits="userSpaceOnUse" x1="17912.207" y1="-3859.0457" x2="17936.8926" y2="-3859.0457" gradientTransform="matrix(-0.9927 0.1175 -0.1175 -0.9927 17343.0781 -5938.2319)">
29 | <stop offset="0" style="stop-color:#1C79C4"/>
30 | <stop offset="0.51" style="stop-color:#0389FF"/>
31 | <stop offset="1" style="stop-color:#0DD6FF"/>
32 | </linearGradient>
33 | <polygon class="st3" points="-11.2,-11.4 12.4,-14.2 14.7,5.4 10.9,9.8 -8.4,12.1 "/>
34 | </g>
35 |
36 | <linearGradient id="SVGID_3_" gradientUnits="userSpaceOnUse" x1="237806.6875" y1="-3859.0457" x2="238415.9219" y2="-3859.0457" gradientTransform="matrix(-0.9927 0.1175 -0.1175 -0.9927 17343.0781 -5938.2319)">
37 | <stop offset="0" style="stop-color:#1C79C4"/>
38 | <stop offset="1" style="stop-color:#0389FF"/>
39 | </linearGradient>
40 | <polygon class="st4" points="-11.2,-11.4 12.4,-14.2 14.7,5.4 10.9,9.8 -8.4,12.1 "/>
41 | <path class="st0" d="M-1.1-14.7c1,0,1.9,0.8,1.9,1.9c0,0,0,0,0,0V-8c0,1-0.9,1.9-1.9,1.9l0,0C-2.1-6.2-3-7-3-8v-2.3"/>
42 |
43 | <linearGradient id="SVGID_4_" gradientUnits="userSpaceOnUse" x1="7.1352" y1="10.3734" x2="12.5252" y2="10.3734" gradientTransform="matrix(0.9997 0 0 0.9997 2.6577 -2.7925)">
44 | <stop offset="0" style="stop-color:#1C79C4"/>
45 | <stop offset="1" style="stop-color:#0389FF"/>
46 | </linearGradient>
47 | <polygon class="st5" points="14.7,5.4 10.3,6 10.9,9.8 "/>
48 |
49 | <linearGradient id="SVGID_5_" gradientUnits="userSpaceOnUse" x1="-229.7166" y1="-1025.5111" x2="-215.224" y2="-1025.5111" gradientTransform="matrix(0.9933 -0.113 0.113 0.9933 337.8704 990.6819)">
50 | <stop offset="0" style="stop-color:#1C79C4"/>
51 | <stop offset="0.51" style="stop-color:#0389FF"/>
52 | <stop offset="1" style="stop-color:#0DD6FF"/>
53 | </linearGradient>
54 | <line class="st6" x1="-6.2" y1="-2" x2="8.2" y2="-3.6"/>
55 |
56 | <linearGradient id="SVGID_6_" gradientUnits="userSpaceOnUse" x1="-229.4899" y1="-1018.8405" x2="-215.3983" y2="-1018.8405" gradientTransform="matrix(0.9933 -0.113 0.113 0.9933 337.8704 990.6819)">
57 | <stop offset="0" style="stop-color:#1C79C4"/>
58 | <stop offset="0.51" style="stop-color:#0389FF"/>
59 | <stop offset="1" style="stop-color:#0DD6FF"/>
60 | </linearGradient>
61 | <line class="st7" x1="-5.2" y1="4.6" x2="8.8" y2="3"/>
62 |
63 | <linearGradient id="SVGID_7_" gradientUnits="userSpaceOnUse" x1="-229.6047" y1="-1022.1609" x2="-218.101" y2="-1022.1609" gradientTransform="matrix(0.9933 -0.113 0.113 0.9933 337.8704 990.6819)">
64 | <stop offset="0" style="stop-color:#1C79C4"/>
65 | <stop offset="0.51" style="stop-color:#0389FF"/>
66 | <stop offset="1" style="stop-color:#0DD6FF"/>
67 | </linearGradient>
68 | <line class="st8" x1="-5.7" y1="1.3" x2="5.7" y2="0.1"/>
69 | </symbol>
70 | <g id="Layer_2">
71 | <g id="Art">
72 |
73 | <use xlink:href="#New_Symbol_11" width="30.4" height="30.3" x="-15.2" y="-15.2" transform="matrix(1 0 0 1 15.205 15.165)" style="overflow:visible;"/>
74 | </g>
75 | </g>
76 | </svg>
77 |
```
--------------------------------------------------------------------------------
/content/docs/guides/author_develop/third_party_components.md:
--------------------------------------------------------------------------------
```markdown
1 | ---
2 | $title: Include Third-Party Content
3 | $order: 3
4 | toc: true
5 | ---
6 | [TOC]
7 |
8 |
9 | Learn how to include third-party components in your pages.
10 |
11 | ## Embed a Tweet
12 |
13 | Embed a Twitter Tweet in your page
14 | using the [`amp-twitter`](/docs/reference/extended/amp-twitter.html) element.
15 |
16 | To include a tweet in your page,
17 | first include the following script in the `<head>`:
18 |
19 | [sourcecode:html]
20 | <script async custom-element="amp-twitter"
21 | src="https://cdn.ampproject.org/v0/amp-twitter-0.1.js"></script>
22 | [/sourcecode]
23 |
24 | Currently tweets are automatically proportionally scaled
25 | to fit the provided size,
26 | but this may yield less than ideal appearance.
27 | Manually tweak the provided width and height or use the media attribute
28 | to select the aspect ratio based on screen width.
29 |
30 | Example `amp-twitter` from the
31 | [twitter.amp example](https://github.com/ampproject/amphtml/blob/master/examples/twitter.amp.html):
32 |
33 | [sourcecode:html]
34 | <amp-twitter width="390" height="50"
35 | layout="responsive"
36 | data-tweetid="638793490521001985">
37 | </amp-twitter>
38 | [/sourcecode]
39 |
40 | ## Embed an Instagram
41 |
42 | Embed an Instagram in your page
43 | using the [`amp-instagram`](/docs/reference/extended/amp-instagram.html) element.
44 |
45 | To include an Instagram,
46 | first include the following script in the `<head>`:
47 |
48 | [sourcecode:html]
49 | <script async custom-element="amp-instagram"
50 | src="https://cdn.ampproject.org/v0/amp-instagram-0.1.js"></script>
51 | [/sourcecode]
52 |
53 | Include the Instagram data-shortcode found in the Instagram photo URL.
54 | For example, in `https://instagram.com/p/fBwFP`,
55 | `fBwFP` is the data-shortcode.
56 | Also, Instagram uses a fixed aspect ratio for responsive layouts,
57 | so the value for width and height should be universal
58 |
59 | [sourcecode:html]
60 | <amp-instagram
61 | data-shortcode="fBwFP"
62 | width="320"
63 | height="392"
64 | layout="responsive">
65 | </amp-instagram>
66 | [/sourcecode]
67 |
68 | ## Display Facebook post or video
69 |
70 | Display a Facebook post or video in your page
71 | using the [`amp-facebook`](/docs/reference/extended/amp-facebook.html) element.
72 |
73 | You must include the following script in the `<head>`:
74 |
75 | [sourcecode:html]
76 | <script async custom-element="amp-facebook"
77 | src="https://cdn.ampproject.org/v0/amp-facebook-0.1.js"></script>
78 | [/sourcecode]
79 |
80 | Example - Embedding a post:
81 |
82 | [sourcecode:html]
83 | <amp-facebook width="486" height="657"
84 | layout="responsive"
85 | data-href="https://www.facebook.com/zuck/posts/10102593740125791">
86 | </amp-facebook>
87 | [/sourcecode]
88 |
89 | Example - Embedding a video:
90 |
91 | [sourcecode:html]
92 | <amp-facebook width="552" height="574"
93 | layout="responsive"
94 | data-embed-as="video"
95 | data-href="https://www.facebook.com/zuck/videos/10102509264909801/">
96 | </amp-facebook>
97 | [/sourcecode]
98 |
99 | ## Include a YouTube video
100 |
101 | Include a YouTube video in your page
102 | using the [`amp-youtube`](/docs/reference/extended/amp-youtube.html) element.
103 |
104 | You must include the following script in the `<head>`:
105 |
106 | [sourcecode:html]
107 | <script async custom-element="amp-youtube"
108 | src="https://cdn.ampproject.org/v0/amp-youtube-0.1.js"></script>
109 | [/sourcecode]
110 |
111 | The Youtube `data-videoid` can be found in every Youtube video page URL.
112 | For example, in https://www.youtube.com/watch?v=Z1q71gFeRqM,
113 | Z1q71gFeRqM is the video id.
114 |
115 | Use `layout="responsive"` to yield correct layouts for 16:9 aspect ratio videos:
116 |
117 | [sourcecode:html]
118 | <amp-youtube
119 | data-videoid="mGENRKrdoGY"
120 | layout="responsive"
121 | width="480" height="270">
122 | </amp-youtube>
123 | [/sourcecode]
124 |
125 | ## Display an ad
126 |
127 | Display an ad in your page
128 | using the [`amp-ad`](/docs/reference/amp-ad.html) element.
129 | Only ads served via HTTPS are supported.
130 |
131 | No ad network provided JavaScript is allowed to run inside the AMP document.
132 | Instead the AMP runtime loads an iframe from a
133 | different origin (via iframe sandbox)
134 | and executes the ad network’s JS inside that iframe sandbox.
135 |
136 | You must specify the ad width and height, and the ad network type.
137 | The `type` identifies the ad network's template.
138 | Different ad types require different `data-*` attributes.
139 |
140 | [sourcecode:html]
141 | <amp-ad width="300" height="250"
142 | type="example"
143 | data-aax_size="300x250"
144 | data-aax_pubname="test123"
145 | data-aax_src="302">
146 | </amp-ad>
147 | [/sourcecode]
148 |
149 | If supported by the ad network,
150 | include a `placeholder`
151 | to be shown if no ad is available:
152 |
153 | [sourcecode:html]
154 | <amp-ad width="300" height="250"
155 | type="example"
156 | data-aax_size="300x250"
157 | data-aax_pubname="test123"
158 | data-aax_src="302">
159 | <div placeholder>Have a great day!</div>
160 | </amp-ad>
161 | [/sourcecode]
162 |
163 | AMP supports a wide range of ad networks. See [reference for a full list](/docs/reference/amp-ad.html#supported-ad-networks).
164 |
```
--------------------------------------------------------------------------------
/views/partials/doc_nav.html:
--------------------------------------------------------------------------------
```html
1 | {% set usedDoc = usedDoc or doc %}
2 |
3 | {% if usedDoc.collection and usedDoc.collection.parent.build_root %}
4 | {% set secondaryCollection = usedDoc.collection %}
5 | {% set navCollection = usedDoc.collection %}
6 | {% elif usedDoc.collection.parent and usedDoc.collection.parent.parent.build_root %}
7 | {% set secondaryCollection = usedDoc.collection.parent %}
8 | {% set navCollection = usedDoc.collection %}
9 | {% elif usedDoc.collection.parent.parent and usedDoc.collection.parent.parent.parent.build_root %}
10 | {% set secondaryCollection = usedDoc.collection.parent.parent %}
11 | {% set navCollection = usedDoc.collection.parent %}
12 | {% endif %}
13 |
14 | {% macro render_item(item, class) -%}
15 | {% set sub_collection = g.collection(item.collection.pod_path + '/' + item.base) %}
16 | {% set custom_children = item.collection.custom_children %}
17 | {% set open = sub_collection.pod_path in usedDoc.pod_path[:-3] %}
18 | <li class="{{class}} {% if sub_collection.exists %}expandable{% endif %}">
19 | <h5 class="{% if doc == item %}current{% endif %} section-name {% if open %}open{% endif %} section-name">
20 | <a href="{% if item.goto_internal %} {{g.doc(item.goto_internal, locale=usedDoc.locale).url.path}} {% else %} {{item.goto or item.url.path}} {% endif %}"{% if item.goto %} class="external"{% endif %}>{{_(item.title)}}</a>
21 | </h5>
22 | {% if open and sub_collection.exists%}
23 | {% if sub_collection.custom_children %}
24 | {{ render_custom_children(item, sub_collection.custom_children) }}
25 | {% else %}
26 | {{ render_children(item, sub_collection.docs(locale=usedDoc.locale)) }}
27 | {% endif %}
28 | {% endif %}
29 | </li>
30 | {% endmacro %}
31 |
32 | {% macro render_item_custom(item_custom, class) -%}
33 | {% set item = g.doc(item_custom.href) %}
34 | {% set sub_collection = g.collection(item_custom.collection) %}
35 | {% set open = sub_collection.pod_path in usedDoc.pod_path[:-3] %}
36 | <li class="{{class}} {% if sub_collection.exists %}expandable{% endif %}">
37 | <h5 class="{% if doc == item %}current{% endif %} section-name {% if open %}open{% endif %} section-name">
38 | <a href="{% if item.goto_internal %} {{g.doc(item.goto_internal, locale=usedDoc.locale).url.path}} {% else %} {{item.goto or item.url.path}} {% endif %}"{% if item.goto %} class="external"{% endif %}>{{_(item_custom.title)}}</a>
39 | </h5>
40 | {% if open and sub_collection.exists %}
41 | {% if sub_collection.custom_children %}
42 | {{ render_custom_children(item, sub_collection.custom_children) }}
43 | {% else %}
44 | {{ render_children(item, sub_collection.docs(locale=usedDoc.locale)) }}
45 | {% endif %}
46 | {% endif %}
47 | </li>
48 | {% endmacro %}
49 |
50 | {% macro tag(item) -%}
51 | {{"ol" if item.numbered else "ul"}}
52 | {%- endmacro %}
53 |
54 | {% macro render_children(item, docs) -%}
55 | <{{tag(item)}}>
56 | {% for child in docs %}
57 | {{render_item(child, "sub-level")}}
58 | {% endfor %}
59 | </{{tag(item)}}>
60 | {%- endmacro %}
61 |
62 | {% macro render_custom_children(item, custom_children) -%}
63 | <{{tag(item)}}>
64 | {% for child in custom_children %}
65 | {{render_item_custom(child, "sub-level")}}
66 | {% endfor %}
67 | </{{tag(item)}}>
68 | {%- endmacro %}
69 |
70 | <nav class="doc-sidebar">
71 | {% if secondaryCollection %}
72 | <div class="current-header">
73 | <h1 class="title">
74 | {{_(secondaryCollection.title)}}
75 | </h1>
76 | </div>
77 |
78 | <div class="current-sections">
79 | <ul>
80 | <li>
81 | <ul>
82 | {% for item in secondaryCollection.docs(recursive=false, locale=doc.locale) %}
83 | {{render_item(item, "top-level")}}
84 | {% endfor %}
85 | </ul>
86 | </li>
87 | </ul>
88 | </div>
89 |
90 | <div class="navigation">
91 | {% if secondaryCollection.navigation %}
92 | <a href="{{g.doc(secondaryCollection.navigation.prev.href, locale=doc.locale).url.path}}" class="previous {% if secondaryCollection.navigation.prev.section %} section {% endif %}">
93 | <div class="navigation-label">
94 | <div class="subtitle light">{{_(secondaryCollection.navigation.prev.subtitle)}}</div>
95 | <div class="title">{{_(secondaryCollection.navigation.prev.title)}}</div>
96 | </div>
97 | </a>
98 | <a href="{{g.doc(secondaryCollection.navigation.next.href, locale=doc.locale).url.path}}" class="next {% if secondaryCollection.navigation.next.section %} section {% endif %}">
99 | <div class="navigation-label">
100 | <div class="subtitle light">{{_(secondaryCollection.navigation.next.subtitle)}}</div>
101 | <div class="title">{{_(secondaryCollection.navigation.next.title)}}</div>
102 | </div>
103 | </a>
104 | </div>
105 | {% endif %}
106 | {% endif %}
107 | </nav>
108 |
```
--------------------------------------------------------------------------------
/content/docs/guides/deploy/[email protected]:
--------------------------------------------------------------------------------
```markdown
1 | ---
2 | $title: Rendre votre page visible
3 | ---
4 | [TOC]
5 |
6 | Il peut arriver que vous souhaitiez avoir une version AMP et standard d'une même page, par exemple pour un article d'actualités. Posez-vous la question suivante : si la recherche Google trouve la version standard de cette page, comment savoir qu'il existe une version AMP de cette dernière ?
7 |
8 | ### Lier des pages avec `<link>`
9 |
10 | Afin de résoudre ce problème, nous ajoutons des informations sur la page AMP dans la page standard et vice versa, sous la forme de balises `<link>` dans la section `<head>`.
11 |
12 | Ajoutez ce qui suit à la page standard :
13 |
14 | [sourcecode:html]
15 | <link rel="amphtml" href="https://www.example.com/url/to/amp/document.html">
16 | [/sourcecode]
17 |
18 | Et ceci à la page AMP :
19 |
20 | [sourcecode:html]
21 | <link rel="canonical" href="https://www.example.com/url/to/full/document.html">
22 | [/sourcecode]
23 |
24 | ### Que faire si je n'ai qu'une seule page ?
25 |
26 | Si vous n'avez qu'une seule page et qu'il s'agit d'une page AMP, vous devez tout de même y ajouter le lien canonique, qui redirigera alors simplement vers lui-même :
27 |
28 | [sourcecode:html]
29 | <link rel="canonical" href="https://www.example.com/url/to/amp/document.html">
30 | [/sourcecode]
31 |
32 | ## Intégrer des plates-formes tierces grâce à des métadonnées supplémentaires
33 |
34 | Parfois, un site tiers (qui intègre votre page AMP ou comprend des liens vers cette dernière) ne peut se contenter de savoir que votre page est une page AMP. Il lui faut plus d'informations. Les questions qu'une plate-forme peut poser sur votre page sont par exemple "S'agit-il d'un article d'actualités ?", "Ou d'une vidéo ?" ou encore "Est-ce possible d'obtenir une capture d'écran et une courte description du contenu ?".
35 |
36 | Cela n'est pas seulement valable pour les pages AMP, mais pour toutes les pages Web. Pour certaines plates-formes, ces métadonnées sont facultatives. Pour d'autres, elles sont obligatoires, ce qui signifie qu'elles **n'afficheront pas de liens vers votre contenu si vous n'incluez pas les bonnes métadonnées**. Assurez-vous d'inclure les métadonnées adéquates pour les plates-formes sur lesquelles vous souhaitez voir s'afficher votre contenu.
37 |
38 | ### Utiliser Schema.org pour la plupart des moteurs de recherche
39 |
40 | [Schema.org](http://schema.org/) offre des vocabulaires ouverts permettant d'ajouter des métadonnées à toutes sortes de choses. Dans le cas de l'AMP, les propriétés adaptées au contexte comprennent le type de contenu spécifique (par exemple, "article d'actualités"), le titre, la date de publication et des images de prévisualisation associées.
41 |
42 | Exemple :
43 |
44 | [sourcecode:html]
45 | <script type="application/ld+json">
46 | {
47 | "@context": "http://schema.org",
48 | "@type": "NewsArticle",
49 | "mainEntityOfPage": "http://cdn.ampproject.org/article-metadata.html",
50 | "headline": "Lorem Ipsum",
51 | "datePublished": "1907-05-05T12:02:41Z",
52 | "dateModified": "1907-05-05T12:02:41Z",
53 | "description": "The Catiline Orations continue to beguile engineers and designers alike -- but can it stand the test of time?",
54 | "author": {
55 | "@type": "Person",
56 | "name": "Jordan M Adler"
57 | },
58 | "publisher": {
59 | "@type": "Organization",
60 | "name": "Google",
61 | "logo": {
62 | "@type": "ImageObject",
63 | "url": "http://cdn.ampproject.org/logo.jpg",
64 | "width": 600,
65 | "height": 60
66 | }
67 | },
68 | "image": {
69 | "@type": "ImageObject",
70 | "url": "http://cdn.ampproject.org/leader.jpg",
71 | "height": 2000,
72 | "width": 800
73 | }
74 | }
75 | </script>
76 | [/sourcecode]
77 |
78 | Vous trouverez plus d'exemples dans le [dossier d'exemples ampproject](https://github.com/ampproject/amphtml/tree/master/examples/metadata-examples), y compris la syntaxe alternative pour l'attribut HTML.
79 |
80 | Remarque : Cette définition de Schema.org est nécessaire pour que votre contenu puisse s'afficher dans la démonstration du [carrousel d'actualités de la recherche Google (essai sur mobile)](https://g.co/ampdemo).
81 | Consultez également [Le meilleur de l'actualité avec AMP](https://developers.google.com/structured-data/carousels/top-stories) et l'[outil de test des données structurées](https://developers.google.com/structured-data/testing-tool/).
82 |
83 | ### Autres métadonnées pour encore plus de plates-formes
84 |
85 | Consultez le guide [Social Discovery (Visibilité sur les réseaux sociaux)](https://developers.google.com/web/fundamentals/discovery-and-monetization/social-discovery/) sur le site Web Fundamentals (Principes fondamentaux du Web – en anglais) pour vous renseigner sur les différentes façons de préparer la visibilité et la diffusion de votre contenu.
86 |
```
--------------------------------------------------------------------------------
/content/latest/blog/amp-up-for-amp-conf-2017.md:
--------------------------------------------------------------------------------
```markdown
1 | ---
2 | class: post-blog post-detail
3 | type: Blog
4 | $title: Amp up for AMP Conf 2017
5 | id: amp-up-for-amp-conf-2017
6 | author: Paul Bakaus
7 | role: AMP Developer Advocate, Google
8 | origin: "https://amphtml.wordpress.com/2017/01/23/amp-up-for-amp-conf-2017/amp/"
9 | excerpt: "I can’t believe it’s already been over a year since we started our quest for faster, friendlier web pages. Now that we’re out of the honeymoon phase, the AMP team is taking a hard look at where we are today, what’s to come, and the direction of the AMP ecosystem. It’s easy to blaze ahead […]"
10 | avatar: https://www.gravatar.com/avatar/9a2d68554d8d1655a3fb3e2a50aee909
11 | date_data: 2017-01-23T15:07:07-08:00
12 | $date: January 23, 2017
13 | $parent: /content/latest/list-blog.html
14 |
15 | components:
16 | - social-share
17 | ---
18 |
19 | <div class="amp-wp-article-content">
20 | <p><span style="font-weight:400;">I can’t believe it’s already been over a year since we started our quest for faster, friendlier web pages. Now that we’re out of the honeymoon phase, the AMP team is taking a hard look at where we are today, what’s to come, and the direction of the AMP ecosystem.</span></p>
21 | <p><span style="font-weight:400;">It’s easy to blaze ahead with the development of new features, but it’s infinitely harder to create a healthy, breathing ecosystem. To do so, we want to continue to involve all of you – the AMP community – in figuring out the right path together. How better to kickstart things than to meet up?</span></p>
22 | <p><span style="font-weight:400;">With that, it’s my great pleasure to invite you to our first-ever </span><a href="https://www.ampproject.org/amp-conf-2017"><span style="font-weight:400;">AMP Conf</span></a><span style="font-weight:400;">. First, the basics:</span></p>
23 | <ul>
24 | <li style="font-weight:400;"><span style="font-weight:400;">March 7th and 8th</span></li>
25 | <li style="font-weight:400;"><span style="font-weight:400;">At the Tribeca 360 space in New York </span></li>
26 | <li style="font-weight:400;"><span style="font-weight:400;">Live-streamed around the world</span></li>
27 | <li style="font-weight:400;"><span style="font-weight:400;">Two full days of talks and panels</span></li>
28 | <li style="font-weight:400;"><span style="font-weight:400;">Targeted at web developers & designers</span></li>
29 | </ul>
30 | <p><span style="font-weight:400;">Whether you’re interested in or already building AMP pages, building a platform to display AMP content, or want to contribute to AMP itself (yes please!), we want you to participate. </span><a href="https://events.withgoogle.com/amp-conf-2017/registrations/new"><span style="font-weight:400;">Request a seat</span></a><span style="font-weight:400;"> to in person, or join via the live stream on YouTube. </span></p>
31 | <p><span style="font-weight:400;">Not only will the AMP team talk about new, exciting features and components – more than half of all talks and panels will be from you, members of the AMP ecosystem. We’ll discuss:</span></p>
32 | <ul>
33 | <li style="font-weight:400;"><span style="font-weight:400;">The challenges and wins of running AMP in production</span></li>
34 | <li style="font-weight:400;"><span style="font-weight:400;">How to create better, beautiful and interactive AMP pages</span></li>
35 | <li style="font-weight:400;"><span style="font-weight:400;">How your AMP pages are distributed across platforms</span></li>
36 | <li style="font-weight:400;">How to monetize AMP pages and the innovation happening around ads in AMP</li>
37 | <li style="font-weight:400;"><span style="font-weight:400;">How you can contribute to AMP</span></li>
38 | </ul>
39 | <p><span style="font-weight:400;">We’ll follow up with a more detailed conference schedule by the end of January, and if you have any questions not covered in the </span><a href="https://www.ampproject.org/amp-conf-2017#faq"><span style="font-weight:400;">FAQ</span></a><span style="font-weight:400;">, reach out to </span><a href="https://twitter.com/pbakaus"><span style="font-weight:400;">me</span></a><span style="font-weight:400;"> (or <a href="mailto:[email protected]" target="_blank">[email protected]</a>) anytime.</span></p>
40 | <p><span style="font-weight:400;">See you soon!</span></p>
41 | <p></p><br /> <a rel="nofollow" href="http://feeds.wordpress.com/1.0/gocomments/amphtml.wordpress.com/927/"><img alt="" border="0" src="http://feeds.wordpress.com/1.0/comments/amphtml.wordpress.com/927/" /></a> <img alt="" border="0" src="https://pixel.wp.com/b.gif?host=amphtml.wordpress.com&blog=102788268&post=927&subd=amphtml&ref=&feed=1" width="1" height="1" />
42 | </div>
43 |
44 |
```
--------------------------------------------------------------------------------
/content/learn/case-studies/slate.md:
--------------------------------------------------------------------------------
```markdown
1 | ---
2 | $order: 3
3 | $title: Slate
4 | $date: October 7, 2016
5 | $category: Publishers
6 | $parent: /content/learn/case-studies.html
7 | class: case-study post-detail case-study--slate
8 |
9 | components:
10 | - social-share
11 |
12 | headline: Slate gets efficient with AMP
13 | thumb: "case-studies/slate_thumb.jpg"
14 | featured: "case-studies/slate_phone1.png"
15 | description: "Slate.com, the current affairs magazine covering news, politics, technology, and culture, began publishing Accelerated Mobile Pages (AMP) at the beginning of this year. Slate consistently strives to create a great overall user experience and the decision to implement AMP was a straightforward one."
16 | results:
17 | - stat: 44%
18 | description: Increase in monthly unique visitors
19 | - stat: 73%
20 | description: Increase in visits per monthly unique visitor
21 | - stat: ~$85k
22 | description: Saved in development resources/yr
23 | logo:
24 | src: "case-studies/slate_logo.png"
25 | width: 80
26 | height: 34
27 | download: "case-studies/slate.pdf"
28 | ---
29 |
30 | <div class="img-left slate">
31 | <amp-img width="1200" height="1423" layout="responsive"
32 | srcset="/static/img/case-studies/slate_phone1.png 1200w,
33 | /static/img/case-studies/slate_phone1@1_5x.png 792w,
34 | /static/img/case-studies/[email protected] 600w"
35 | src="/static/img/case-studies/slate_phone1.png">
36 | </amp-img>
37 | </div>
38 |
39 | Slate.com, the current affairs magazine covering news, politics, technology, and culture, began publishing Accelerated Mobile Pages (AMP) at the beginning of this year. Slate consistently strives to create a great overall user experience and the decision to implement AMP was a straightforward one.
40 |
41 | #### Solution
42 |
43 | > “We saw AMP as a way to improve how mobile users experience Slate”
44 |
45 | “We saw AMP as a way to improve how mobile users experience Slate, since the initial implementations by other publishers showed how fast the experience actually was. It was also encouraging that Google was collaborating with multiple publishers to build AMP -- that signaled an investment by the publishing community to ensure the success of the format,” said Chris Schieffer, Senior Product Manager at Slate.com. The online magazine created AMP pages for 60% of its content and is ramping up to 100% later this month.
46 |
47 | <div class="img-right slate img-mobile">
48 | <amp-img width="1079" height="1407" layout="responsive"
49 | srcset="/static/img/case-studies/slate_phone2.png 1079w,
50 | /static/img/case-studies/slate_phone2@1_5x.png 712w,
51 | /static/img/case-studies/[email protected] 540w"
52 | src="/static/img/case-studies/slate_phone2.png">
53 | </amp-img>
54 | </div>
55 |
56 | #### Results
57 |
58 | <div class="img-right slate img-desktop">
59 | <amp-img width="1079" height="1407" layout="responsive"
60 | srcset="/static/img/case-studies/slate_phone2.png 1079w,
61 | /static/img/case-studies/slate_phone2@1_5x.png 712w,
62 | /static/img/case-studies/[email protected] 540w"
63 | src="/static/img/case-studies/slate_phone2.png">
64 | </amp-img>
65 | </div>
66 |
67 | The Slate team has been impressed by traffic and engagement metrics on AMP pages since implementation. They have seen a 44% increase in monthly unique visitors from Google searches and a 73% increase in visits per monthly unique user.
68 |
69 | Slate runs a lean team and immediately recognized the efficiency that AMP brought to its tech stack. The team decided to utilize AMP in more of its products and is currently working with their AMP pages to build their new Android app.
70 |
71 | > “AMP provided us with a way to rebuild our Android app without contracting work.”
72 |
73 | “AMP provided us with a way to rebuild our Android app without contracting work. Not only is it fast but it provides solid monetization opportunities. As a relatively small team, we have to be smart about where we invest technically, and we knew that we could get good value and efficiency by reusing our AMP work by further integrating it into our products,” said Schieffer. Slate estimates that they have saved $85k/year in development resources by reusing AMP docs for the Android app.
74 |
75 | Looking to the future, Slate is excited to further monetize AMP content by experimenting with AMP for Ads. They would also
76 | like to offer the AMP experience through SlateCustom, the publisher’s in-house agency that creates branded content experiences. Schieffer said that “AMP feels like a natural extension of those multi-platform campaigns.” Overall, the team stands behind
77 | the decision to implement; “AMP felt and still feels to be in line with our goals as a brand: innovative, smart, and user-first,”
78 | said Schieffer.
79 |
```
--------------------------------------------------------------------------------
/assets/sass/_global.scss:
--------------------------------------------------------------------------------
```scss
1 | // Reset some basic elements
2 | html, body, blockquote, pre, hr,
3 | dl, dd, ol, ul, figure {
4 | margin: 0;
5 | padding: 0;
6 | }
7 |
8 | html,
9 | body {
10 | box-sizing: border-box;
11 | overflow-x: hidden;
12 | }
13 |
14 | body {
15 | @extend %text-base;
16 | @extend %text-body;
17 | color: $color-black;
18 | font-family: $font-family;
19 | padding-top: $header-height;
20 |
21 | @include max-screen($mobile-breakpoint) {
22 | padding-top: 120px;
23 | }
24 | }
25 |
26 | img {
27 | border: 0;
28 | max-width: 100%;
29 | }
30 |
31 | // Headings
32 | h1,
33 | h2,
34 | h3,
35 | h4,
36 | h5 {
37 | color: $color-black;
38 | font-weight: 300;
39 | margin: 0.25em 0;
40 | }
41 |
42 | h1,
43 | h2.h1 {
44 | font-size: 50px;
45 | font-weight: 100;
46 | line-height: 65px;
47 |
48 | @include max-screen($mobile-breakpoint) {
49 | font-size: 35px;
50 | line-height: 44px;
51 | }
52 | }
53 |
54 | h2 {
55 | font-size: 40px;
56 | line-height: 50px;
57 | font-weight: 100;
58 |
59 | @include max-screen($mobile-breakpoint) {
60 | font-size: 26px;
61 | line-height: 40px;
62 | font-weight: 300;
63 | }
64 | }
65 |
66 | h3 {
67 | font-size: 30px;
68 | line-height: 40px;
69 |
70 | @include max-screen($mobile-breakpoint) {
71 | font-size: 20px;
72 | line-height: 28px;
73 | }
74 | }
75 |
76 | h4 {
77 | font-size: 24px;
78 | line-height: 32px;
79 |
80 | @include max-screen($mobile-breakpoint) {
81 | font-size: 18px;
82 | line-height: 26px;
83 | }
84 | }
85 |
86 | // Links
87 | a {
88 | @extend %text-label;
89 | color: $color-ampblue;
90 | position: relative;
91 | text-decoration: none;
92 |
93 | &.underlined {
94 | @extend %no-break;
95 |
96 | &::before {
97 | background: $gradient-med;
98 | bottom: -3px;
99 | content: '';
100 | left: 0;
101 | height: 1px;
102 | position: absolute;
103 | right: 0;
104 | }
105 |
106 | &.cta {
107 | overflow: hidden;
108 |
109 | &::before {
110 | bottom: -5px;
111 | height: 2px;
112 | }
113 |
114 | &:hover {
115 | &::before {
116 | animation: 0.5s 1 cta-line;
117 | }
118 | }
119 | }
120 | }
121 |
122 | @include max-screen($mobile-breakpoint) {
123 | font-size: 14px;
124 | }
125 | }
126 |
127 | .small {
128 | @extend %text-small;
129 | }
130 |
131 | .smaller {
132 | @extend %text-smaller;
133 | }
134 |
135 | .light {
136 | @extend %text-light;
137 | }
138 |
139 | .button {
140 | background-color: $color-brightblue;
141 | display: inline-block;
142 | color: $color-white;
143 | padding: 15px 20px;
144 | position: relative;
145 | transition: background-color 0.3s;
146 |
147 | span {
148 | position: relative;
149 | z-index: 1;
150 | }
151 |
152 | &::before {
153 | background: $gradient-med;
154 | bottom: -2px;
155 | content: '';
156 | left: 0;
157 | height: 2px;
158 | position: absolute;
159 | right: 0;
160 | }
161 |
162 | &::after {
163 | background: $gradient-anglemed;
164 | content: '';
165 | z-index: -1;
166 | position: absolute;
167 | top: 0;
168 | left: 0;
169 | right: 0;
170 | bottom: 0;
171 | }
172 |
173 | &:hover {
174 | background-color: transparent;
175 |
176 | .arrow {
177 | transform: translateX(3px);
178 | }
179 | }
180 |
181 | &.light {
182 | background: $color-white;
183 | color: $color-ampblue;
184 |
185 | &::after {
186 | background: linear-gradient($gradient-angle, #5ADAFD, #51B9FD);
187 | opacity: 0;
188 | transition: opacity 0.3s;
189 | z-index: 0;
190 | }
191 |
192 | &:hover {
193 | color: $color-white;
194 |
195 | &::after {
196 | opacity: 1;
197 | }
198 | }
199 | }
200 |
201 | .arrow {
202 | border-top: 5px solid transparent;
203 | border-bottom: 5px solid transparent;
204 | border-left: 7px solid white;
205 | display: inline-block;
206 | height: 0;
207 | margin-left: 8px;
208 | transition: transform 0.3s;
209 | width: 0;
210 | }
211 | }
212 |
213 | .rtl .button {
214 | .arrow {
215 | margin: 0 8px 0 0;
216 | transform: rotate(180deg);
217 | }
218 |
219 | &:hover {
220 | .arrow {
221 | transform: rotate(180deg) translateX(3px);
222 | }
223 | }
224 | }
225 |
226 | // Blockquotes
227 | blockquote {
228 | color: $color-darkgrey;
229 | border-left: 4px solid $color-lightgrey;
230 | padding-left: 15px;
231 | font-size: 18px;
232 | letter-spacing: -1px;
233 | font-style: italic;
234 | > :last-child {
235 | margin-bottom: 0;
236 | }
237 | }
238 |
239 | .rtl blockquote {
240 | border-left: 0;
241 | border-right: 4px solid $color-lightgrey;
242 | padding-left: 0;
243 | padding-right: 15px;
244 | }
245 |
246 | p {
247 | &:last-child {
248 | margin-bottom: 0;
249 | }
250 | }
251 |
252 | figure {
253 | -webkit-margin-before: 0;
254 | -webkit-margin-after: 0;
255 | -webkit-margin-start: 0;
256 | -webkit-margin-end: 0;
257 | }
258 |
259 | amp-youtube, amp-vimeo {
260 | box-shadow: 0px 3px 20px 0 rgba(0, 0, 0, 0.1);
261 | }
262 |
263 | .rtl figure {
264 | direction: ltr;
265 | }
266 |
267 | .container {
268 | box-sizing: border-box;
269 | margin: 0 auto;
270 | max-width: $container-size;
271 | padding: 0 $grid-margin;
272 |
273 | &.sm {
274 | max-width: 800px;
275 | }
276 |
277 | &.md {
278 | max-width: 925px;
279 | }
280 |
281 | &.lg {
282 | max-width: 1200px;
283 | }
284 |
285 | &.xl {
286 | max-width: 1440px;
287 | }
288 | }
289 |
290 | .text-label {
291 | @extend %text-label;
292 | }
293 |
294 | .wrap {
295 | margin: 0 auto;
296 | }
297 |
298 | // for jumplink target x-offset
299 | // will fail if target has: bg color,
300 | // repeating bg img, padding- or border-top
301 | :target::before {
302 | content: '';
303 | display: block;
304 | height: 110px;
305 | margin-top: -110px;
306 | visibility: hidden;
307 |
308 | @include max-screen($mobile-breakpoint) {
309 | height: 70px;
310 | margin-top: -70px;
311 | }
312 | }
313 |
```
--------------------------------------------------------------------------------
/assets/img/home/lines2.svg:
--------------------------------------------------------------------------------
```
1 | <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 781.36 953.64"><defs><style>.cls-1,.cls-10,.cls-11,.cls-12,.cls-2,.cls-3,.cls-4,.cls-5,.cls-6,.cls-7,.cls-8,.cls-9{fill:none;stroke-miterlimit:10;stroke-width:9px;}.cls-1{stroke:url(#linear-gradient);}.cls-2{stroke:url(#linear-gradient-2);}.cls-3{stroke:url(#linear-gradient-3);}.cls-4{stroke:url(#linear-gradient-4);}.cls-5{stroke:url(#linear-gradient-5);}.cls-6{stroke:url(#linear-gradient-6);}.cls-7{stroke:url(#linear-gradient-7);}.cls-8{stroke:url(#linear-gradient-8);}.cls-9{stroke:url(#linear-gradient-9);}.cls-10{stroke:url(#linear-gradient-10);}.cls-11{stroke:url(#linear-gradient-11);}.cls-12{stroke:url(#linear-gradient-12);}</style><linearGradient id="linear-gradient" x1="413.41" y1="343.76" x2="715.64" y2="343.76" gradientUnits="userSpaceOnUse"><stop offset="0" stop-color="#1c79bd"/><stop offset="0.5" stop-color="#0382ff"/><stop offset="1" stop-color="#0dd0ff"/></linearGradient><linearGradient id="linear-gradient-2" x1="6276.85" y1="15522.7" x2="6530.21" y2="15481.04" gradientTransform="translate(6764.31 16046.83) rotate(179.28)" xlink:href="#linear-gradient"/><linearGradient id="linear-gradient-3" x1="380.34" y1="228.98" x2="602.45" y2="228.98" gradientUnits="userSpaceOnUse"><stop offset="0" stop-color="#0dd0ff"/><stop offset="0.5" stop-color="#0382ff"/><stop offset="1" stop-color="#fff"/></linearGradient><linearGradient id="linear-gradient-4" x1="103.19" y1="511.93" x2="340.04" y2="511.93" xlink:href="#linear-gradient"/><linearGradient id="linear-gradient-5" x1="3475.53" y1="16683.94" x2="3749.8" y2="16683.94" gradientTransform="translate(6701.59 16464.77) rotate(169.95)" gradientUnits="userSpaceOnUse"><stop offset="0" stop-color="#0dd0ff"/><stop offset="0.5" stop-color="#0382ff"/><stop offset="1" stop-color="#1c79bd"/></linearGradient><linearGradient id="linear-gradient-6" x1="3137.18" y1="16941.45" x2="3411.45" y2="16941.45" gradientTransform="translate(6701.59 16464.77) rotate(169.95)" xlink:href="#linear-gradient"/><linearGradient id="linear-gradient-7" x1="3474.66" y1="16559.54" x2="3824.87" y2="16559.54" gradientTransform="translate(6701.59 16464.77) rotate(169.95)" gradientUnits="userSpaceOnUse"><stop offset="0" stop-color="#0382ff"/><stop offset="1" stop-color="#0dd0ff"/></linearGradient><linearGradient id="linear-gradient-8" x1="6268.89" y1="15336.37" x2="6574.87" y2="15336.37" gradientTransform="translate(6764.31 16046.83) rotate(179.28)" xlink:href="#linear-gradient-3"/><linearGradient id="linear-gradient-9" x1="5781.86" y1="15927.33" x2="6162.87" y2="15927.33" gradientTransform="translate(6764.31 16046.83) rotate(179.28)" gradientUnits="userSpaceOnUse"><stop offset="0" stop-color="#0382ff"/><stop offset="0.5" stop-color="#0dd0ff"/><stop offset="1" stop-color="#fff"/></linearGradient><linearGradient id="linear-gradient-10" x1="5868.29" y1="15674.93" x2="6174.27" y2="15674.93" gradientTransform="translate(6764.31 16046.83) rotate(179.28)" xlink:href="#linear-gradient"/><linearGradient id="linear-gradient-11" x1="3544.55" y1="16695.17" x2="3745.31" y2="16695.17" gradientTransform="translate(6701.59 16464.77) rotate(169.95)" gradientUnits="userSpaceOnUse"><stop offset="0" stop-color="#0dd0ff"/><stop offset="0.5" stop-color="#0dd0ff"/><stop offset="1" stop-color="#fff"/></linearGradient><linearGradient id="linear-gradient-12" x1="3138.56" y1="16835.4" x2="3339.32" y2="16835.4" gradientTransform="translate(6701.59 16464.77) rotate(169.95)" gradientUnits="userSpaceOnUse"><stop offset="0" stop-color="#fff"/><stop offset="0.5" stop-color="#0dd0ff"/><stop offset="1" stop-color="#0dd0ff"/></linearGradient></defs><title>lines 2</title><g id="Layer_2" data-name="Layer 2"><g id="Art"><line class="cls-1" x1="416.65" y1="497.56" x2="712.4" y2="189.96"/><line class="cls-2" x1="59.58" y1="738.4" x2="275.2" y2="514.13"/><line class="cls-3" x1="383.58" y1="341.11" x2="599.2" y2="116.84"/><line class="cls-4" x1="106.45" y1="632.64" x2="336.78" y2="391.22"/><line class="cls-5" x1="116.55" y1="788.46" x2="346.88" y2="547.04"/><line class="cls-6" x1="404.74" y1="475.82" x2="635.08" y2="234.41"/><line class="cls-7" x1="69.03" y1="950.52" x2="364.78" y2="642.91"/><line class="cls-8" x1="3.24" y1="945.79" x2="298.99" y2="638.18"/><line class="cls-9" x1="408.29" y1="387.78" x2="778.11" y2="3.12"/><line class="cls-10" x1="399.57" y1="602.24" x2="695.32" y2="294.63"/><line class="cls-11" x1="281.79" y1="575.16" x2="114.18" y2="749.49"/><line class="cls-12" x1="489.46" y1="540.53" x2="657.06" y2="366.2"/></g></g></svg>
```
--------------------------------------------------------------------------------
/content/learn/case-studies/hearst.md:
--------------------------------------------------------------------------------
```markdown
1 | ---
2 | $order: 7
3 | $title: Hearst
4 | $date: January 24, 2017
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: Hearst integrates key partner and product solutions on AMP
13 | thumb: "case-studies/hearst_thumb.jpg"
14 | featured: "case-studies/hearst_framed.png"
15 | results:
16 | - stat: 29%
17 | description: Increase in viewability
18 | - stat: 45%
19 | description: Increase in CTR on Ads
20 | - stat: +1M
21 | description: AMP pages published
22 | logo:
23 | src: "case-studies/hearst_logo.png"
24 | width: 60
25 | height: 14
26 | download: "case-studies/hearst.pdf"
27 | ---
28 |
29 | <div class="img-right">
30 | <amp-img width="800" height="1371" layout="responsive" src="/static/img/case-studies/hearst_framed.png"></amp-img>
31 | </div>
32 |
33 | Hearst is one of the world’s largest media and information companies with household name brands including Elle, Cosmopolitan, Esquire, and more. With 70% of global traffic on mobile devices, Hearst recognizes the need to deliver fast and compelling user experiences across all screens. “We saw AMP as a perfect way to make mobile experiences as enjoyable as possible for users with fast-loading content and rich features,” said Phil Wiser, Chief Technology Officer.
34 |
35 | However, Hearst knew that they could not deliver a fast user experience at the expense of their business model. Before making the move to implement AMP, they needed to ensure that their ability to monetize, optimize, and track performance of their revenue streams would not be sacrificed.
36 |
37 | ## Approach
38 |
39 | With more than 70 ad tech providers, 28 analytics providers, and 13 different video players now supporting AMP, the AMP Project's ecosystem enabled Hearst to provide their users with a quality mobile web experience while maintaining their technology partnerships across all of their AMP pages. “The fast-growing AMP ecosystem supported all the key advertising and analytics requirements to run our business,” said Wiser. “Since most of our vendors - companies like Adobe, Chartbeat, Moat, AdX, Outbrain, and Taboola support AMP, it was easy for us to implement. AMP met Hearst’s business needs by enabling us to integrate our partner and product solutions,” said Wiser.
40 |
41 | > “The fast-growing AMP ecosystem supported all the key advertising and analytics requirements to run our business”
42 |
43 | With full vendor support available, the Hearst engineering teams found it easy to launch and scale AMP within a few weeks. They first built an HTML template to support their content. Once the groundwork was laid, all of their 70+ sites could take that template codebase and adjust the styling, ads and analytics configurations with almost no incremental development work between properties.
44 |
45 | The Hearst team recommends this process as a best practice -- start with an AMP article template that covers a majority of published pages and iterate from there. The AMP framework provides a large degree of flexibility that enables publishers like Hearst to customize their AMP pages to reflect all of their brands’ unique look and feel.
46 |
47 | ## Results
48 |
49 | <div class="img-left">
50 | <amp-img width="800" height="1371" layout="responsive" src="/static/img/case-studies/hearst_framed2.png"></amp-img>
51 | </div>
52 |
53 | Hearst has published over 1 million AMP pages across Hearst Magazines, Hearst Newspapers, and Hearst Television. Across all properties they have seen strong results -- 29% better ad viewability in AMP compared to non-AMP pages with a 45% increase in ad CTR.
54 |
55 | Results are more pronounced when looking at AMP’s impact in individual business units. Hearst Newspapers has seen 237% higher ad CTR on AMP pages and achieved an 83% reduction in total page load time. Chron.com has experienced higher engagement after AMP implementation, with 2x as many return visitors on AMP as on mobile.
56 |
57 | In Hearst Magazines, AMP pages now account for 10% of total unique pageviews on Elle.com. In a page speed test, Elle found that the average page load time on an AMP article was 12 seconds faster than the average page load time of its mobile counterpart.
58 |
59 | Total unique pageviews grew by 25% since implementation of AMP across Hearst Television. They have measured an 89% improvement in page speed load times on their articles.
60 |
61 | Looking ahead, the Hearst team would like to work with the open source AMP Project to develop support for more content types like quizzes, ratings, 360 video, and shop modules. “We’re constantly looking for creative new ways to engage our audiences with unique, compelling content and bringing those experiences to the AMP platform is a key part of our product roadmap on mobile,” said Wiser.
62 |
```
--------------------------------------------------------------------------------
/content/learn/[email protected]:
--------------------------------------------------------------------------------
```markdown
1 | ---
2 | $title: Apa yang dimaksud dengan 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 merupakan cara untuk membangun laman web untuk materi statis yang merender dengan cepat.
13 | Tindakan AMP terdiri dari tiga bagian berbeda:
14 |
15 | **AMP HTML** adalah HTML dengan beberapa pembatasan untuk kinerja yang bisa diandalkan
16 | dan beberapa ekstensi untuk membangun materi kaya yang melampaui HTML dasar.
17 | Pustaka **AMP JS** memastikan perenderan halaman AMP HTML yang cepat.
18 | **Google AMP Cache** (secara opsional) menghasilkan halaman AMP HTML.
19 |
20 | ## AMP HTML
21 |
22 | AMP HTML pada dasarnya adalah HTML yang diperluas dengan properti AMP khusus.
23 | File AMP HTML paling sederhana tampak seperti ini:
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 | Meski sebagian besar tag dalam halaman AMP HTML adalah tag HTML reguler,
40 | sebagian tag HTML digantikan dengan tag spesifik AMP (lihat juga
41 | [Tag HTML dalam spesifikasi AMP](https://github.com/ampproject/amphtml/blob/master/spec/amp-html-format.md)).
42 | Elemen khusus ini disebut sebagai komponen AMP HTML,
43 | membuat pola-pola umum menjadi mudah diimplementasikan berdasarkan kinerja.
44 |
45 | Misalnya, tag [`amp-img`](/docs/reference/amp-img.html)
46 | menyediakan dukungan `srcset` lengkap meski dalam browser yang belum mendukungnya.
47 | Pelajari cara [membuat halaman AMP HTML pertama Anda](/docs/get_started/create.html).
48 |
49 | ## AMP JS
50 |
51 | [Pustaka AMP JS](https://github.com/ampproject/amphtml/tree/master/src) mengimplementasikan
52 | semua [praktik kinerja terbaik AMP](/docs/get_started/technical_overview.html),
53 | mengelola pemuatan sumber daya dan memberi Anda tag khusus seperti yang disebut di atas,
54 | yang semuanya memastikan perenderan halaman Anda dengan cepat.
55 |
56 | Di antara optimalisasi terbesar adalah fakta bahwa hal tersebut memastikan semua yang berasal dari sumber daya eksternal menjadi asinkron, sehingga tidak ada satu pun yang bisa menghalangi perenderan di halaman.
57 |
58 | Teknik kinerja lainnya meliputi dilakukannya sandbox semua iframe, perhitungan awal layout setiap elemen pada halaman sebelum sumber daya dimuat dan menonaktifkan pemilih CSS yang lambat.
59 |
60 | Untuk mengetahui selengkapnya tentang tidak hanya [optimalisasi](/docs/get_started/technical_overview.html) namun juga pembatasannya, [baca spesifikasi AMP HTML](https://github.com/ampproject/amphtml/blob/master/spec/amp-html-format.md).
61 |
62 | ## Google AMP Cache
63 |
64 | Google AMP Cache adalah jaringan penyajian materi berbasis proxy
65 | untuk menyajikan semua dokumen AMP yang valid.
66 | Jaringan ini mengambil halaman AMP HTML, menempatkannya dalam cache, dan memperbaiki halaman kinerja secara otomatis.
67 | Ketika menggunakan Google AMP Cache, semua file JS dan semua gambar yang dimuat
68 | dari asal yang sama yang menggunakan
69 | [HTTP 2.0](https://http2.github.io/) untuk efisiensi maksimum.
70 |
71 | Cache ini juga disertai dengan
72 | [sistem validasi](https://github.com/ampproject/amphtml/tree/master/validator)
73 | bawaan yang memastikan bahwa halaman dijamin bekerja,
74 | dan halaman tidak bergantung pada sumber daya eksternal.
75 | Sistem validasi ini menjalankan serangkaian pernyataan
76 | yang mengonfirmasi terpenuhinya markup halaman sesuai dengan spesifikasi AMP HTML.
77 |
78 | Versi validator lainnya hadir dalam bentuk dibundel dengan setiap halaman AMP. Versi ini bisa mencatat kesalahan validasi secara langsung ke konsol browser ketika halaman dirender,
79 | sehingga Anda bisa melihat bagaimana perubahan kompleks dalam kode Anda
80 | mungkin berdampak pada kinerja dan pengalaman pengguna.
81 |
82 | Ketahui selengkapnya tentang [menguji halaman AMP HTML](/docs/guides/validate.html).
```
--------------------------------------------------------------------------------
/content/docs/guides/author_develop/[email protected]:
--------------------------------------------------------------------------------
```markdown
1 | ---
2 | $title: Menyertakan Konten Pihak Ketiga
3 | ---
4 |
5 | Pelajari cara menyertakan komponen pihak ketiga di laman.
6 |
7 | [TOC]
8 |
9 | ## Menyematkan Tweet
10 |
11 | Sematkan Tweet Twitter di laman
12 | menggunakan elemen [`amp-twitter`](/docs/reference/extended/amp-twitter.html).
13 |
14 | Untuk menyertakan tweet di laman,
15 | sertakan dahulu skrip berikut di `<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 | Tweet saat ini otomatis diskalakan secara proporsional
22 | agar sesuai dengan ukuran yang disediakan,
23 | namun tindakan ini dapat menghasilkan tampilan yang kurang ideal.
24 | Sesuaikan lebar dan tinggi yang diberikan secara manual atau gunakan atribut media
25 | untuk memilih rasio aspek berdasarkan lebar layar.
26 |
27 | Misalnya `amp-twitter` dari
28 | [contoh 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 | ## Menyematkan Instagram
38 |
39 | Sematkan Instagram di laman
40 | menggunakan elemen [`amp-instagram`](/docs/reference/extended/amp-instagram.html)
41 |
42 | Untuk menyertakan Instagram,
43 | sertakan dahulu skrip berikut di `<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 | Sertakan data-shortcode Instagram yang ditemukan di URL foto Instagram.
50 | Misalnya, pada `https://instagram.com/p/fBwFP`,
51 | `fBwFP` adalah data-shortcode-nya.
52 | Instagram juga menggunakan rasio aspek tetap untuk tata letak responsif,
53 | sehingga nilai lebar dan tinggi harus universal
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 | ## Menampilkan pos atau video Facebook
65 |
66 | Tampilkan pos atau video Facebook di laman
67 | menggunakan elemen [`amp-facebook`](/docs/reference/extended/amp-facebook.html).
68 |
69 | Anda harus menyertakan skrip berikut di `<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 | Contoh - Menyematkan pos:
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 | Contoh - Menyematkan video:
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 | ## Menyertakan video youtube
95 |
96 | Sertakan video youtube di laman
97 | menggunakan elemen [`amp-youtube`](/docs/reference/extended/amp-youtube.html).
98 |
99 | Anda harus menyertakan skrip berikut di `<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 | `data-videoid` Youtube dapat ditemukan di setiap URL laman video Youtube.
106 | Misalnya, pada https://www.youtube.com/watch?v=Z1q71gFeRqM,
107 | Z1q71gFeRqM adalah ID videonya.
108 |
109 | Gunakan `layout="responsive"` guna menghasilkan tata letak yang benar untuk video dengan rasio aspek 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 | ## Menampilkan iklan
120 |
121 | Tampilkan iklan di laman
122 | menggunakan elemen [`amp-ad`](/docs/reference/amp-ad.html).
123 | Hanya iklan yang ditayangkan melalui HTTPS yang didukung.
124 |
125 | Tidak ada JavaScript yang disediakan jaringan iklan yang diizinkan untuk berjalan di dalam dokumen AMP.
126 | Sebagai gantinya, waktu proses AMP memuat iframe dari
127 | asal yang berbeda (melalui kotak pasir iframe)
128 | dan menjalankan JavaScript jaringan iklan dalam kotak pasir iframe tersebut.
129 |
130 | Anda harus menentukan lebar, tinggi, dan jenis jaringan iklan.
131 | `type` mengidentifikasi template jaringan iklan.
132 | Jenis iklan yang berbeda membutuhkan atribut `data-*` yang berbeda.
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 | Jika didukung oleh jaringan iklan,
144 | sertakan `placeholder`
145 | untuk ditampilkan jika tidak ada iklan yang tersedia:
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 | AMP mendukung berbagai jaringan iklan. Lihat [referensi daftar lengkap](/docs/reference/amp-ad.html#supported-ad-networks).
158 |
```
--------------------------------------------------------------------------------
/scripts/update_blog_links.js:
--------------------------------------------------------------------------------
```javascript
1 | #!/usr/bin/env node
2 |
3 | // dependencies
4 | var fs = require('fs');
5 | var moment = require('moment');
6 |
7 | // config
8 | var homepageYamlPath = '../content/includes/blog_feed.yaml';
9 | var blogSectionYamlPath = '../content/includes/list-blog.yaml';
10 | var blogPostDirectory = '../content/latest/blog/';
11 | var homepageCount = 3;
12 | var blogSectionCount = 5;
13 | var authorGravatarHashes = {
14 | 'Paul Bakaus': '9a2d68554d8d1655a3fb3e2a50aee909'
15 | };
16 |
17 | // import yaml files
18 | var yaml = fs.readFileSync(homepageYamlPath, { encoding: 'utf8' });
19 | var header = yaml.split('blog:\n')[0];
20 | var homepageBody = 'blog:\n';
21 | var blogSectionBody = 'blogs:\n';
22 |
23 | // import RSS feed from blog with feed parser
24 | var FeedParser = require('feedparser');
25 | var request = require('request');
26 |
27 | // setup feed parser
28 | var req = request('https://amphtml.wordpress.com/feed/');
29 | var feedparser = new FeedParser();
30 |
31 | req.on('response', function (res) {
32 | var stream = this;
33 | if (res.statusCode != 200) return this.emit('error', new Error('Bad status code'));
34 | stream.pipe(feedparser);
35 | });
36 |
37 | feedparser.on('end', function() {
38 | fs.writeFileSync(homepageYamlPath, header + homepageBody);
39 | fs.writeFileSync(blogSectionYamlPath, blogSectionBody);
40 | console.log("Blog posts successfully updated.");
41 | });
42 |
43 | function writeBlogPage(item, id, author, role, description, avatar) {
44 |
45 | var body = item.description
46 | .replace(/\<[A-z]+\>Posted by([^\<]+)\<\/[A-z]+\>/, "")
47 | // Replace spans that make text bold to <strong> tags
48 | .replace(/<span style="font-weight:400;">(((?!<\/span>)[\s\S])*)<\/span>/g, "<strong>$1</strong>")
49 | // Replace spans that add underlines to <u> tags
50 | .replace(/<span style="text-decoration:underline;">(((?!<\/span>)[\s\S])*)<\/span>/g, "<u>$1</u>")
51 | // Convert centered p's to <center> tags
52 | .replace(/<p style="text-align:center;">(((?!<\/p>)[\s\S])*)<\/p>/g, "<center>$1</center>")
53 | // Replace Wordpress-style images with their AMP equivalents (don't try this at home)
54 | .replace(
55 | /<img[^>]+data-orig-size="([\d]+),([\d]+)"[^>]+class="([^"]+)"[^>]+src="([^"]+)"[^>]+srcset="([^"]+)[^>]+sizes="([^"]+)"[^>]+\/>/g,
56 | "<div class=\"wp-image $3\"><amp-img layout='responsive' width=\"$1\" height=\"$2\" src=\"$4\" srcset=\"$5\" sizes=\"$6\"></amp-img>"
57 | )
58 | // Replace Wordpress-style gifs with their AMP equivalents (don't try this at home)
59 | .replace(
60 | /<img[^>]+[^>]+class="([^"]+)"[^>]+src="([^"]+)"[^>]+width="([\d]+)"[^>]+height="([\d]+)"[^>]+\/>/g,
61 | "<div class=\"wp-image $1\"><amp-img layout='fixed' width=\"$3\" height=\"$4\" src=\"$2\"></amp-img>"
62 | )
63 | // Replace other style tags we didn't catch and hope for the best..
64 | .replace(/style="[^"]+"/g, "")
65 | // Remove the tracking meta at the bottom of the page
66 | .split('<a rel="nofollow"')[0];
67 |
68 | var body = `---
69 | class: post-blog post-detail
70 | type: Blog
71 | $title: ${ item.title }
72 | id: ${ id }
73 | author: ${ author }
74 | role: ${ role }
75 | origin: "${ item.link }amp/"
76 | excerpt: "${ description }"
77 | avatar: ${ avatar }
78 | date_data: ${ moment(item.date).format() }
79 | $date: ${ moment(item.date).format("MMMM D, YYYY") }
80 | $parent: /content/latest/list-blog.html
81 |
82 | components:
83 | - social-share
84 | ---
85 |
86 | <div class="amp-wp-article-content">
87 | ${ body }
88 | </div>
89 |
90 | `;
91 |
92 | fs.writeFileSync(blogPostDirectory + id + '.md', body);
93 |
94 | }
95 |
96 | feedparser.on('readable', function () {
97 | var item;
98 | while (item = this.read()) {
99 |
100 | // write into the body for the homepage excerpt file
101 | if (--homepageCount >= 0) {
102 | homepageBody += `
103 | - article:
104 | title: "${ item.title }"
105 | href: "${ item.link }amp/"
106 | date: "${ moment(item.date).format("MMMM D, YYYY") }"
107 | `;
108 | }
109 |
110 | // write into the body for the blog listing page
111 | if (--blogSectionCount >= 0) {
112 |
113 | var description = item['rss:description']['#'].split("<img")[0];
114 | var id = item.link.substr(0, item.link.length - 1).split('/').pop();
115 |
116 | var author = item.author;
117 | var role = '';
118 | var authorInBody = item.description.match(/\>Posted by ([^,]+),([^\<]+)/);
119 | if (authorInBody) {
120 | author = authorInBody[1];
121 | role = authorInBody[2];
122 | }
123 |
124 | var avatar = authorGravatarHashes[author] ? 'https://www.gravatar.com/avatar/' + authorGravatarHashes[author] : item.enclosures[0].url;
125 |
126 | blogSectionBody += `
127 | - type: Blog
128 | title: "${ item.title }"
129 | id: ${ id }
130 | author: ${ author }
131 | role: ${ role }
132 | origin: "${ item.link }amp/"
133 | excerpt: "${ description }"
134 | avatar: ${ avatar }
135 | datedata: ${ moment(item.date).format() }
136 | date: "${ moment(item.date).format("MMMM D, YYYY") }"
137 | `;
138 |
139 | // write into its own individual file
140 | writeBlogPage(item, id, author, role, description, avatar);
141 |
142 | }
143 |
144 |
145 |
146 | }
147 | });
```
--------------------------------------------------------------------------------
/assets/img/about/who-use-amp/amp-ads/speed_icon.svg:
--------------------------------------------------------------------------------
```
1 | <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 90.08 103.33"><defs><style>.cls-1,.cls-6,.cls-8{fill:#fff;}.cls-1{fill-opacity:0.7;stroke:url(#linear-gradient);}.cls-1,.cls-10,.cls-11,.cls-12,.cls-13,.cls-14,.cls-15,.cls-16,.cls-17,.cls-2,.cls-3,.cls-4,.cls-6,.cls-8,.cls-9{stroke-miterlimit:10;}.cls-10,.cls-11,.cls-12,.cls-13,.cls-14,.cls-15,.cls-16,.cls-17,.cls-2,.cls-3,.cls-4,.cls-9{fill:none;}.cls-2{stroke:url(#linear-gradient-2);}.cls-3{stroke:url(#linear-gradient-3);}.cls-10,.cls-11,.cls-12,.cls-13,.cls-14,.cls-15,.cls-16,.cls-17,.cls-4,.cls-9{stroke-linecap:round;}.cls-4{stroke:url(#linear-gradient-4);}.cls-5{fill:#0dd7ff;opacity:0.7;}.cls-6{fill-opacity:0.9;stroke:url(#linear-gradient-5);}.cls-7{fill:url(#linear-gradient-6);}.cls-8{stroke:url(#linear-gradient-7);}.cls-9{stroke:#008cfc;}.cls-10{stroke:#00b8fe;}.cls-11{stroke:#009fff;}.cls-12{stroke:#00c3fe;}.cls-13{stroke:#00cffc;}.cls-14{stroke:#0083df;}.cls-15{stroke:#0088eb;}.cls-16{stroke:#0080d3;}.cls-17{stroke:#007fd0;}</style><linearGradient id="linear-gradient" x1="32.85" y1="56.67" x2="65.06" y2="56.67" gradientTransform="translate(-3.94 1.46) rotate(0.13)" gradientUnits="userSpaceOnUse"><stop offset="0" stop-color="#1c79c4"/><stop offset="0.51" stop-color="#0389ff"/><stop offset="1" stop-color="#0dd7ff"/></linearGradient><linearGradient id="linear-gradient-2" x1="36.12" y1="54.72" x2="61.65" y2="54.72" xlink:href="#linear-gradient"/><linearGradient id="linear-gradient-3" x1="29.96" y1="55.88" x2="65.05" y2="55.88" xlink:href="#linear-gradient"/><linearGradient id="linear-gradient-4" x1="47.03" y1="83.12" x2="53.32" y2="83.12" xlink:href="#linear-gradient"/><linearGradient id="linear-gradient-5" x1="-928.87" y1="-2033.57" x2="-878.93" y2="-2033.57" gradientTransform="matrix(0.79, -0.45, 0.1, 1.21, 972.44, 2094.48)" gradientUnits="userSpaceOnUse"><stop offset="0" stop-color="#1c79c4"/><stop offset="0.51" stop-color="#0389ff"/><stop offset="1" stop-color="#7ad5fc"/></linearGradient><linearGradient id="linear-gradient-6" x1="58.58" y1="53.86" x2="71.54" y2="46.53" gradientTransform="matrix(1, 0, 0, 1, 0, 0)" xlink:href="#linear-gradient-5"/><linearGradient id="linear-gradient-7" x1="-906.58" y1="-2021.33" x2="-900.34" y2="-2021.33" xlink:href="#linear-gradient-5"/></defs><title>speed_icon</title><g id="Layer_2" data-name="Layer 2"><g id="Layer_1-2" data-name="Layer 1"><polygon class="cls-1" points="29.5 34.6 60.58 18.76 60.44 81.63 29.2 97.7 29.5 34.6"/><polygon class="cls-2" points="33.2 37.51 57.15 25.09 56.8 75.05 32.51 87.49 33.2 37.51"/><polyline class="cls-3" points="60.85 18.46 57.82 16.94 26.63 33.34 26.31 96.27 28.99 98.09"/><line class="cls-4" x1="43.41" y1="86.06" x2="48.7" y2="83.31"/><circle class="cls-5" cx="88.93" cy="1.15" r="1.15" transform="translate(0.06 4.56) rotate(-2.94)"/><circle class="cls-5" cx="84.48" cy="11.73" r="1.15" transform="translate(-0.49 4.34) rotate(-2.94)"/><circle class="cls-5" cx="78.92" cy="7.5" r="1.15" transform="translate(-0.28 4.05) rotate(-2.94)"/><circle class="cls-5" cx="75.71" cy="13.51" r="1.15" transform="translate(-0.59 3.9) rotate(-2.94)"/><circle class="cls-5" cx="76.67" cy="22.14" r="1.15" transform="translate(-1.03 3.96) rotate(-2.94)"/><circle class="cls-5" cx="1.15" cy="102.17" r="1.15" transform="translate(-5.23 0.19) rotate(-2.94)"/><circle class="cls-5" cx="5.61" cy="91.59" r="1.15" transform="translate(-4.68 0.41) rotate(-2.94)"/><circle class="cls-5" cx="11.16" cy="95.83" r="1.15" transform="translate(-4.89 0.7) rotate(-2.94)"/><circle class="cls-5" cx="14.37" cy="89.81" r="1.15" transform="translate(-4.58 0.85) rotate(-2.94)"/><circle class="cls-5" cx="13.42" cy="81.18" r="1.15" transform="translate(-4.14 0.79) rotate(-2.94)"/><path class="cls-6" d="M80.73,46.69C79.42,30.36,69.69,22,59,28.09S40.66,52.29,42,68.62Z"/><path class="cls-7" d="M61.61,56.14,63,57.3l6.09-15a.18.18,0,0,0-.32-.16l-8.5,14.68"/><path class="cls-8" d="M63.77,56.28c-.14-1.75-1.18-2.64-2.33-2s-2,2.59-1.82,4.34,1.18,2.64,2.33,2S63.91,58,63.77,56.28Z"/><line class="cls-9" x1="58.64" y1="28.29" x2="58.89" y2="31.46"/><line class="cls-10" x1="71.64" y1="28.38" x2="70.35" y2="30.56"/><line class="cls-11" x1="65.21" y1="26.26" x2="65.03" y2="29.6"/><line class="cls-12" x1="75.66" y1="31.85" x2="74.09" y2="33.72"/><line class="cls-13" x1="78.39" y1="36.39" x2="76.54" y2="38.62"/><line class="cls-14" x1="47.98" y1="40.32" x2="49.63" y2="41.73"/><line class="cls-15" x1="52.56" y1="33.78" x2="53.84" y2="35.61"/><line class="cls-16" x1="44.23" y1="49.29" x2="46.09" y2="50.12"/><line class="cls-17" x1="42.57" y1="57.2" x2="44.6" y2="57.23"/></g></g></svg>
```
--------------------------------------------------------------------------------
/content/docs/get_started/create/basic_markup.md:
--------------------------------------------------------------------------------
```markdown
1 | ---
2 | $title: Create Your AMP HTML Page
3 | $order: 0
4 | $parent: /content/docs/get_started/create.md
5 | ---
6 |
7 | The following markup is a decent starting point or boilerplate.
8 | Copy this and save it to a file with a .html extension.
9 |
10 | [sourcecode:html]
11 | <!doctype html>
12 | <html amp lang="en">
13 | <head>
14 | <meta charset="utf-8">
15 | <script async src="https://cdn.ampproject.org/v0.js"></script>
16 | <title>Hello, AMPs</title>
17 | <link rel="canonical" href="http://example.ampproject.org/article-metadata.html" />
18 | <meta name="viewport" content="width=device-width,minimum-scale=1,initial-scale=1">
19 | <script type="application/ld+json">
20 | {
21 | "@context": "http://schema.org",
22 | "@type": "NewsArticle",
23 | "headline": "Open-source framework for publishing content",
24 | "datePublished": "2015-10-07T12:02:41Z",
25 | "image": [
26 | "logo.jpg"
27 | ]
28 | }
29 | </script>
30 | <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>
31 | </head>
32 | <body>
33 | <h1>Welcome to the mobile web</h1>
34 | </body>
35 | </html>
36 | [/sourcecode]
37 |
38 | The content in the body, so far, is pretty straightforward. But there’s a lot of additional code in the head of the page that might not be immediately obvious. Let’s deconstruct the required mark-up.
39 |
40 | ## Required mark-up
41 |
42 | AMP HTML documents MUST:
43 |
44 | - Start with the doctype `<!doctype html>`.
45 | - Contain a top-level `<html ⚡>` tag (`<html amp>` is accepted as well).
46 | - Contain `<head>` and `<body>` tags (They are optional in HTML).
47 | - Contain a `<meta charset="utf-8">` tag as the first child of their `<head>` tag.
48 | - Contain a `<script async src="https://cdn.ampproject.org/v0.js"></script>` tag as the second child of their `<head>` tag (this includes and loads the AMP JS library).
49 | - Contain a `<link rel="canonical" href="$SOME_URL" />` tag inside their `<head>` tag that points to the regular HTML version of the AMP HTML document or to itself if no such HTML version exists.
50 | - Contain a `<meta name="viewport" content="width=device-width,minimum-scale=1">` tag inside their `<head>` tag. It's also recommended to include initial-scale=1.
51 | - Contain the following in their `<head>` tag:
52 | `<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>`
53 |
54 | ## Optional meta-data
55 |
56 | In addition to the bare requirements, our sample also includes a Schema.org definition in the head, which isn’t a strict requirement for AMP, but is a requirement to get your content distributed in certain places, for instance in the [Google Search news carousel demo (try on your phone)](https://g.co/ampdemo).
57 |
58 | To learn more about all the meta-data you’ll need in various other places, i.e. Twitter, [explore our samples](https://github.com/ampproject/amphtml/tree/master/examples/metadata-examples). To learn specifically about AMP in Google Search, see [Top Stories with AMP](https://developers.google.com/structured-data/carousels/top-stories).
59 |
60 | <hr>
61 |
62 | Good news! That’s all we need to create our first AMP page, but of course, there’s not a lot going on in the body yet. In the next section, we’ll cover how to add basics like images, custom AMP elements, how to style your page and work out a responsive layout.
63 |
64 | <a class="go-button button" href="/docs/get_started/create/include_image.html">Continue to Step 2</a>
65 |
```
--------------------------------------------------------------------------------
/content/docs/get_started/create/[email protected]:
--------------------------------------------------------------------------------
```markdown
1 | ---
2 | $title: AMP HTML Sayfanızı Oluşturun
3 | ---
4 |
5 | Aşağıdaki işaretleme uygun bir başlangıç noktası veya standart metindir.
6 | Bunu kopyalayın veya .html uzantılı bir dosyaya kaydedin.
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 | Buraya kadarki gövde içeriği oldukça anlaşılırdır. Ancak sayfanın başında hemen anlaşılır olmayan birçok ek kod bulunmaktadır. İstenen işaretlemeyi yapılarına ayırıp analiz edelim.
37 |
38 | ## İstenen işaretleme
39 |
40 | AMP HTML belgeleri şu özelliklere sahip olmalıdır:
41 |
42 | - Belge tipiyle `<!doctype html>` başlamalıdır.
43 | - Üst seviye bir `<html ⚡>` etiketi içermelidir (`<html amp>` de kabul edilir).
44 | - `<head>` ve `<body>` etiketleri içermelidir (HTML›de isteğe bağlıdır).
45 | - Başında AMP HTML belgesinin düzenli HTML sürümünü ya da böyle bir HTML versiyonu mevcut değilse kendisini gösteren bir `<link rel="canonical" href="$SOME_URL" />` etiketi içerir.
46 | - Baş etiketin ilk ürünü olarak `<meta charset="utf-8">` etiketini içerir.
47 | - Baş etiketin içerisinde bir `<meta name="viewport" content="width=device-width,minimum-scale=1">` etiketi içerir. initial-scale=1›in de eklenmesi önerilir.
48 | - Başında en son öge olarak`<script async src="https://cdn.ampproject.org/v0.js"></script>` etiketini içerir (Buna AMP JS kitaplığı da eklenip yüklenir).
49 | - `<head>` etiketinde aşağıdakileri içerir:
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 | ## Opsiyonel meta-veri
53 |
54 | Açık gerekliliklerin yanı sıra, verdiğimiz örnekte baştaki Schema.org tanımı da yer alır; bu AMP için katı bir gereklilik değildir, ancak içeriğinizin belli yerlere dağıtılması için, örneğin [Google Arama haberler karusel demosuna (telefonunuzda deneyin)](https://g.co/ampdemo) bir gerekliliktir.
55 |
56 | Twitter vb. diğer çeşitli yerlerde ihtiyacını olan tüm meta-veriler hakkında daha fazla bilgi için, [örneklerimizi inceleyin](https://github.com/ampproject/amphtml/tree/master/examples/metadata-examples). Spesifik olarak Google Arama›daki AMP hakkında öğrenmek için, bkz. [En İyi AMP Hikayeleri](https://developers.google.com/structured-data/carousels/top-stories).
57 |
58 | <hr>
59 |
60 | İyi haber! İlk AMP sayfamızı oluşturmak için gerekli olan tek şey bu, fakat tabii ki gövdede devam eden daha birçok şey var. Bir sonraki bölümde görüntü, özel AMP ögeleri gibi temel unsurların nasıl ekleneceğini, sayfanızın nasıl biçimlendirileceğini ve nasıl etkileşimli bir düzen geliştirileceği üzerinde duracağız.
61 |
62 | <a class="go-button button" href="/tr/docs/get_started/create/include_image.html">Adım 2 ile devam edin</a>
```
--------------------------------------------------------------------------------
/content/learn/about-amp@pt_BR.md:
--------------------------------------------------------------------------------
```markdown
1 | ---
2 | $title: O que é o 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 | O AMP é uma maneira de criar páginas da Web para conteúdo estático com renderização rápida.
13 | O AMP em ação consiste em três partes diferentes:
14 |
15 | **AMP HTML** é o HTML com algumas restrições para um desempenho confiável
16 | e algumas extensões para a criar conteúdo avançado além do HTML básico.
17 | A biblioteca de **AMP JS** assegura a renderização rápida de páginas em AMP HTML.
18 | O **Google AMP Cache** entrega (opcionalmente) as páginas em AMP HTML.
19 |
20 | ## AMP HTML
21 |
22 | O AMP HTML é basicamente o HTML ampliado com propriedades de AMP personalizadas.
23 | O arquivo AMP HTML mais simples tem esta aparência:
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 | Embora a maioria das tags em uma página em AMP HTML sejam tags normais de HTML,
40 | algumas são substituídas por tags específicas do AMP (consulte também
41 | [Tags HTML na especificação do AMP](https://github.com/ampproject/amphtml/blob/master/spec/amp-html-format.md)).
42 | Esses elementos personalizados, chamados de componentes AMP HTML,
43 | facilitam a implementação de padrões comuns, resultando em um bom desempenho.
44 |
45 | Por exemplo, a tag [`amp-img`](/docs/reference/amp-img.html)
46 | proporciona suporte total a `srcset` mesmo em navegadores que ainda não são compatíveis com esse recurso.
47 | Saiba como [criar sua primeira página em AMP HTML](/docs/get_started/create.html).
48 |
49 | ## AMP JS
50 |
51 | A [biblioteca de AMP JS](https://github.com/ampproject/amphtml/tree/master/src) implementa
52 | todas as [melhores práticas de desempenho do AMP](/docs/get_started/technical_overview.html),
53 | administra o carregamento de recursos e oferece as tags personalizadas mencionadas acima,
54 | tudo para assegurar a renderização rápida de sua página.
55 |
56 | Uma das principais otimizações é o fato de que ela torna assíncrono tudo o que vem de recursos externos, de modo que nenhum elemento da página possa bloquear a renderização de outros elementos.
57 |
58 | Entre outras técnicas de desempenho está incluída a criação de uma sandbox para todos os iframes, o cálculo prévio do layout de cada elemento da página antes que os recursos sejam carregados e a desativação de seletores CSS lentos.
59 |
60 | Para saber mais não só sobre as [otimizações](/docs/get_started/technical_overview.html) mas também as limitações, [leia a especificação do AMP HTML](https://github.com/ampproject/amphtml/blob/master/spec/amp-html-format.md).
61 |
62 | ## Google AMP Cache
63 |
64 | O Google AMP Cache é uma rede de entrega de conteúdo baseado em proxy
65 | para todos os documentos AMP válidos.
66 | Ele recupera todas as páginas em AMP HTML, as armazena em cache e melhora o seu desempenho automaticamente.
67 | Ao usar o Google AMP Cache, o documento, todos os arquivos JS e todas as imagens são carregadas
68 | a partir da mesma origem que está usando
69 | [HTTP 2.0](https://http2.github.io/) para obter a máxima eficiência.
70 |
71 | O cache também vem com um
72 | [sistema de validação](https://github.com/ampproject/amphtml/tree/master/validator)
73 | integrado que confirma a garantia de funcionamento da página
74 | e sua não dependência de recursos externos.
75 | O sistema de validação executa uma série de declarações
76 | que confirmam que a marcação da página atende às especificações do AMP HTML.
77 |
78 | Outra versão do validador é fornecida em conjunto com todas as páginas AMP. Essa versão pode registrar erros de validação diretamente no console do navegador quando a página é renderizada,
79 | permitindo que você veja como alterações complexas em seu código
80 | podem afetar o desempenho e a experiência do usuário.
81 |
82 | Saiba mais sobre [como testar suas páginas em AMP HTML](/docs/guides/validate.html).
```
--------------------------------------------------------------------------------
/assets/img/latest/icon_calendar.svg:
--------------------------------------------------------------------------------
```
1 | <?xml version="1.0" encoding="utf-8"?>
2 | <!-- Generator: Adobe Illustrator 21.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0) -->
3 | <svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
4 | viewBox="0 0 15 15" style="enable-background:new 0 0 15 15;" xml:space="preserve">
5 | <style type="text/css">
6 | .st0{fill:none;stroke:url(#SVGID_1_);stroke-miterlimit:10;}
7 | .st1{fill:url(#SVGID_2_);}
8 | .st2{opacity:0.1;}
9 | .st3{fill:url(#SVGID_3_);}
10 | .st4{fill:url(#SVGID_4_);}
11 | .st5{fill:url(#SVGID_5_);}
12 | .st6{fill:url(#SVGID_6_);}
13 | .st7{fill:url(#SVGID_7_);}
14 | .st8{fill:url(#SVGID_8_);}
15 | .st9{fill:url(#SVGID_9_);}
16 | .st10{fill:url(#SVGID_10_);}
17 | .st11{fill:none;stroke:url(#SVGID_11_);stroke-miterlimit:10;}
18 | </style>
19 | <symbol id="New_Symbol" viewBox="-6.1 -6.1 12.1 12.1">
20 | <linearGradient id="SVGID_1_" gradientUnits="userSpaceOnUse" x1="-6.06" y1="0" x2="6.06" y2="0">
21 | <stop offset="0" style="stop-color:#1C79C4"/>
22 | <stop offset="0.51" style="stop-color:#0389FF"/>
23 | <stop offset="1" style="stop-color:#0DD7FF"/>
24 | </linearGradient>
25 | <rect x="-5.6" y="-5.6" class="st0" width="11.1" height="11.1"/>
26 | <linearGradient id="SVGID_2_" gradientUnits="userSpaceOnUse" x1="-2.91" y1="1.36" x2="-1.77" y2="1.36">
27 | <stop offset="0" style="stop-color:#1C79C4"/>
28 | <stop offset="0.51" style="stop-color:#0389FF"/>
29 | <stop offset="1" style="stop-color:#0DD7FF"/>
30 | </linearGradient>
31 | <circle class="st1" cx="-2.3" cy="1.4" r="0.6"/>
32 | <g class="st2">
33 | <linearGradient id="SVGID_3_" gradientUnits="userSpaceOnUse" x1="-2.91" y1="-1.06" x2="-1.77" y2="-1.06">
34 | <stop offset="0" style="stop-color:#1C79C4"/>
35 | <stop offset="0.51" style="stop-color:#0389FF"/>
36 | <stop offset="1" style="stop-color:#0DD7FF"/>
37 | </linearGradient>
38 | <circle class="st3" cx="-2.3" cy="-1.1" r="0.6"/>
39 | <linearGradient id="SVGID_4_" gradientUnits="userSpaceOnUse" x1="-0.57" y1="-1.06" x2="0.57" y2="-1.06">
40 | <stop offset="0" style="stop-color:#1C79C4"/>
41 | <stop offset="0.51" style="stop-color:#0389FF"/>
42 | <stop offset="1" style="stop-color:#0DD7FF"/>
43 | </linearGradient>
44 | <circle class="st4" cx="0" cy="-1.1" r="0.6"/>
45 | <linearGradient id="SVGID_5_" gradientUnits="userSpaceOnUse" x1="1.77" y1="-1.06" x2="2.91" y2="-1.06">
46 | <stop offset="0" style="stop-color:#1C79C4"/>
47 | <stop offset="0.51" style="stop-color:#0389FF"/>
48 | <stop offset="1" style="stop-color:#0DD7FF"/>
49 | </linearGradient>
50 | <circle class="st5" cx="2.3" cy="-1.1" r="0.6"/>
51 | <linearGradient id="SVGID_6_" gradientUnits="userSpaceOnUse" x1="-0.57" y1="1.36" x2="0.57" y2="1.36">
52 | <stop offset="0" style="stop-color:#1C79C4"/>
53 | <stop offset="0.51" style="stop-color:#0389FF"/>
54 | <stop offset="1" style="stop-color:#0DD7FF"/>
55 | </linearGradient>
56 | <circle class="st6" cx="0" cy="1.4" r="0.6"/>
57 | <linearGradient id="SVGID_7_" gradientUnits="userSpaceOnUse" x1="1.77" y1="1.36" x2="2.91" y2="1.36">
58 | <stop offset="0" style="stop-color:#1C79C4"/>
59 | <stop offset="0.51" style="stop-color:#0389FF"/>
60 | <stop offset="1" style="stop-color:#0DD7FF"/>
61 | </linearGradient>
62 | <circle class="st7" cx="2.3" cy="1.4" r="0.6"/>
63 | <linearGradient id="SVGID_8_" gradientUnits="userSpaceOnUse" x1="-2.91" y1="3.79" x2="-1.77" y2="3.79">
64 | <stop offset="0" style="stop-color:#1C79C4"/>
65 | <stop offset="0.51" style="stop-color:#0389FF"/>
66 | <stop offset="1" style="stop-color:#0DD7FF"/>
67 | </linearGradient>
68 | <circle class="st8" cx="-2.3" cy="3.8" r="0.6"/>
69 | <linearGradient id="SVGID_9_" gradientUnits="userSpaceOnUse" x1="-0.57" y1="3.79" x2="0.57" y2="3.79">
70 | <stop offset="0" style="stop-color:#1C79C4"/>
71 | <stop offset="0.51" style="stop-color:#0389FF"/>
72 | <stop offset="1" style="stop-color:#0DD7FF"/>
73 | </linearGradient>
74 | <circle class="st9" cx="0" cy="3.8" r="0.6"/>
75 | <linearGradient id="SVGID_10_" gradientUnits="userSpaceOnUse" x1="1.77" y1="3.79" x2="2.91" y2="3.79">
76 | <stop offset="0" style="stop-color:#1C79C4"/>
77 | <stop offset="0.51" style="stop-color:#0389FF"/>
78 | <stop offset="1" style="stop-color:#0DD7FF"/>
79 | </linearGradient>
80 | <circle class="st10" cx="2.3" cy="3.8" r="0.6"/>
81 | </g>
82 | <linearGradient id="SVGID_11_" gradientUnits="userSpaceOnUse" x1="-5.56" y1="-3.2" x2="5.56" y2="-3.2">
83 | <stop offset="0" style="stop-color:#1C79C4"/>
84 | <stop offset="0.51" style="stop-color:#0389FF"/>
85 | <stop offset="1" style="stop-color:#0DD7FF"/>
86 | </linearGradient>
87 | <line class="st11" x1="-5.6" y1="-3.2" x2="5.6" y2="-3.2"/>
88 | </symbol>
89 | <title>icon_calendar</title>
90 | <g>
91 | <g id="Art">
92 |
93 | <use xlink:href="#New_Symbol" width="12.1" height="12.1" id="New_Symbol-3" x="-6.1" y="-6.1" transform="matrix(1 0 0 1 7.5 7.5)" style="overflow:visible;"/>
94 | </g>
95 | </g>
96 | </svg>
97 |
```
--------------------------------------------------------------------------------
/content/includes/tweets.yaml:
--------------------------------------------------------------------------------
```yaml
1 | tweets:
2 |
3 | - origin_name: AMP Project
4 | origin_id: AMPhtml
5 | origin_href: https://twitter.com/AMPhtml
6 | tweet_id: 819614235210620928
7 | date_data: 2017-01-12T10:37:16-08:00
8 | date: January 12, 2017
9 | text: >
10 | <p class="TweetTextSize TweetTextSize--26px js-tweet-text tweet-text" lang="en" data-aria-label-part="0">The first-ever AMP Conf is in NYC, March 7/8 ⚡ Join us in person or on livestream to learn about the future of AMP. <a href="https://t.co/LbJxgLabVn" rel="nofollow noopener" dir="ltr" data-expanded-url="https://www.ampproject.org/amp-conf-2017" class="twitter-timeline-link" target="_blank" title="https://www.ampproject.org/amp-conf-2017"><span class="tco-ellipsis"></span><span class="invisible">https://www.</span><span class="js-display-url">ampproject.org/amp-conf-2017</span><span class="invisible"></span><span class="tco-ellipsis"><span class="invisible"> </span></span></a></p>
11 |
12 | - origin_name: Malte Ubl
13 | origin_id: cramforce
14 | origin_href: https://twitter.com/cramforce
15 | retweet_id: AMPhtml
16 | retweet_href: https://twitter.com/amphtml
17 | tweet_id: 836751856768430080
18 | date_data: 2017-02-28T17:36:03-08:00
19 | date: February 28, 2017
20 | text: >
21 | <p class="TweetTextSize TweetTextSize--16px js-tweet-text tweet-text" lang="en" data-aria-label-part="0">The level of contributions to the <a href="https://twitter.com/AMPhtml" class="twitter-atreply pretty-link js-nav" dir="ltr" data-mentioned-user-id="3450662892"><s>@</s><b>AMPhtml</b></a> open source project is just mind blowing. Thank y’all. RIP my inbox.<a href="https://t.co/e3CTsLbjDV" class="twitter-timeline-link u-hidden" data-pre-embedded="true" dir="ltr">pic.twitter.com/e3CTsLbjDV</a></p>
22 |
23 | - origin_name: AMP Project
24 | origin_id: AMPhtml
25 | origin_href: https://twitter.com/AMPhtml
26 | tweet_id: 836699227665403904
27 | date_data: 2017-02-28T14:06:55-08:00
28 | date: February 28, 2017
29 | text: >
30 | <p class="TweetTextSize TweetTextSize--26px js-tweet-text tweet-text" lang="en" data-aria-label-part="0">Page load time matters. Check out the latest research on how faster pages are more engaging:<a href="https://t.co/RTqG3UK5Zj" rel="nofollow noopener" dir="ltr" data-expanded-url="https://amphtml.wordpress.com/2017/02/28/new-industry-benchmarks-for-mobile-page-speed/amp/" class="twitter-timeline-link u-hidden" target="_blank" title="https://amphtml.wordpress.com/2017/02/28/new-industry-benchmarks-for-mobile-page-speed/amp/"><span class="tco-ellipsis"></span><span class="invisible">https://</span><span class="js-display-url">amphtml.wordpress.com/2017/02/28/new</span><span class="invisible">-industry-benchmarks-for-mobile-page-speed/amp/</span><span class="tco-ellipsis"><span class="invisible"> </span>…</span></a></p>
31 |
32 | - origin_name: AMP Project
33 | origin_id: AMPhtml
34 | origin_href: https://twitter.com/AMPhtml
35 | tweet_id: 836299445046235136
36 | date_data: 2017-02-27T11:38:20-08:00
37 | date: February 27, 2017
38 | text: >
39 | <p class="TweetTextSize TweetTextSize--16px js-tweet-text tweet-text" lang="en" data-aria-label-part="0">Hearst integrated 10+ adtech partners on their AMP pages and saw a 45% increase in CTR. Here's how:<a href="https://t.co/YOPzMSfWMd" rel="nofollow noopener" dir="ltr" data-expanded-url="https://amphtml.wordpress.com/2017/02/27/grow-your-business-with-ads-on-amp/amp/" class="twitter-timeline-link u-hidden" target="_blank" title="https://amphtml.wordpress.com/2017/02/27/grow-your-business-with-ads-on-amp/amp/"><span class="tco-ellipsis"></span><span class="invisible">https://</span><span class="js-display-url">amphtml.wordpress.com/2017/02/27/gro</span><span class="invisible">w-your-business-with-ads-on-amp/amp/</span><span class="tco-ellipsis"><span class="invisible"> </span>…</span></a></p>
40 |
41 | - origin_name: AMP Project
42 | origin_id: AMPhtml
43 | origin_href: https://twitter.com/AMPhtml
44 | tweet_id: 835189726646657024
45 | date_data: 2017-02-24T10:08:42-08:00
46 | date: February 24, 2017
47 | text: >
48 | <p class="TweetTextSize TweetTextSize--16px js-tweet-text tweet-text" lang="en" data-aria-label-part="4">Not really a company, but we just shipped in with 500 💰. Thanks for all the hard work and see you in Berlin! ❤️<a href="https://t.co/DtieMchT8E" rel="nofollow noopener" dir="ltr" data-expanded-url="https://twitter.com/jsconfeu/status/835122974831280132" class="twitter-timeline-link u-hidden" target="_blank" title="https://twitter.com/jsconfeu/status/835122974831280132"><span class="tco-ellipsis"></span><span class="invisible">https://</span><span class="js-display-url">twitter.com/jsconfeu/statu</span><span class="invisible">s/835122974831280132</span><span class="tco-ellipsis"><span class="invisible"> </span>…</span></a></p>
49 |
```