AMP + WP = błyskawiczny związek?
•
0 gefällt mir•1,169 views
Prelekcja wygłoszona podczas WordUp Kraków, 6.11.2015. Accelerated Mobile Pages to krok w stronę wygodniejszej konsumpcji i monetyzacji treści na urządzeniach przenośnych. Jak ma się to do WordPressa?
Empfohlen
Empfohlen
Weitere ähnliche Inhalte
Andere mochten auch
Andere mochten auch (18)
AMP + WP = błyskawiczny związek?
- 1. #jesień2015 pawlisiak.com pawlisiak AMP + WP błyskawiczny związek?
- 3. #jesień2015 pawlisiak.com pawlisiak ACCELERATED MOBILE PAGES Projekt pozwalający na błyskawiczne wczytywanie prostych stron tekstowych, na urządzeniach mobilnych. https://www.ampproject.org/
- 4. #jesień2015 pawlisiak.com pawlisiak ACCELERATED MOBILE PAGES Kod pseudoHTML, okrojony z funkcjonalności do minimum. AMP nie wspiera JS* AMP kocha CSS! AMP wymusza stosowanie dobrych praktyk.
- 5. #jesień2015 pawlisiak.com pawlisiak ACCELERATED MOBILE PAGES Lekka biblioteka JS, zawierająca całą magię, podstawowe komponenty i walidator. <amp-img> <amp-video> https://github.com/ampproject/ amphtml/tree/master/builtins <amp-pixel> <amp-ad>
- 6. #jesień2015 pawlisiak.com pawlisiak <!doctype html> <html ⚡> <head> <meta charset="utf-8"> <link rel="canonical" href="hello-world.html"> <meta name="viewport" content="width=device-width,minimum-scale=1,initial-scale=1"> <style>body { opacity: 0 }</style> <noscript><style>body { opacity: 1 }</style></noscript> <script async src="https://cdn.ampproject.org/v0.js"></script> </head> <body> Hello World! </body> </html>
- 7. #jesień2015 pawlisiak.com pawlisiak <!doctype html> <html ⚡> <head> <meta charset="utf-8"> <link rel="canonical" href="hello-world.html"> <meta name="viewport" content="width=device-width,minimum-scale=1,initial-scale=1"> <style>body { opacity: 0 }</style> <noscript><style>body { opacity: 1 }</style></noscript> <script async src="https://cdn.ampproject.org/v0.js"></script> </head> <body> Hello World! </body> </html> OPCJONALNIE <HTML AMP>
- 8. #jesień2015 pawlisiak.com pawlisiak <!doctype html> <html ⚡> <head> <meta charset="utf-8"> <link rel="canonical" href="hello-world.html"> <meta name="viewport" content="width=device-width,minimum-scale=1,initial-scale=1"> <style>body { opacity: 0 }</style> <noscript><style>body { opacity: 1 }</style></noscript> <script async src="https://cdn.ampproject.org/v0.js"></script> </head> <body> Hello World! </body> </html> LINK DO PEŁNEJ WERSJI ARTYKUŁU (NIE AMP HTML)
- 9. #jesień2015 pawlisiak.com pawlisiak <!doctype html> <html ⚡> <head> <meta charset="utf-8"> <link rel="canonical" href="hello-world.html"> <meta name="viewport" content="width=device-width,minimum-scale=1,initial-scale=1"> <style>body { opacity: 0 }</style> <noscript><style>body { opacity: 1 }</style></noscript> <script async src="https://cdn.ampproject.org/v0.js"></script> </head> <body> Hello World! </body> </html> STRONA NIE WYŚWIETLI SIĘ DOPÓKI BIBLIOTEKA NIE ZOSTANIE WCZYTANA W CAŁOŚCI
- 10. #jesień2015 pawlisiak.com pawlisiak <!doctype html> <html ⚡> <head> <meta charset="utf-8"> <link rel="canonical" href="hello-world.html"> <meta name="viewport" content="width=device-width,minimum-scale=1,initial-scale=1"> <style>body { opacity: 0 }</style> <noscript><style>body { opacity: 1 }</style></noscript> <script async src="https://cdn.ampproject.org/v0.js"></script> </head> <body> Hello World! </body> </html> ZACIĄGAMY BIBLIOTEKĘ AMP Z CDN
- 11. #jesień2015 pawlisiak.com pawlisiak PO CO? Fajnie, ale…
- 12. #jesień2015 pawlisiak.com pawlisiak PO CO AMP? 58 procent użytkowników wyłącza strony ładujące się powyżej 10 sekund. HTML AMP zwiększa wydajność strony nawet o 85 procent.
- 13. #jesień2015 pawlisiak.com pawlisiak PO CO AMP? Strona jest IDEALNIE dostosowana do odwiedzania jej z urządzeń mobilnych. Jednocześnie rozwiązania mobilne są PROSTE w implementacji.
- 14. #jesień2015 pawlisiak.com pawlisiak PO CO AMP? Dostosowanie FORMATÓW REKLAMOWYCH na responsywnych stronach jest problematyczne. AMP HTML umożliwia wrzucenie reklamy za pomocą JEDNEGO TAGA.
- 16. #jesień2015 pawlisiak.com pawlisiak CO WIĘCEJ? Dodatkowe komponenty AMP ładowane z zewnętrznych JS. <amp-carousel> <amp-lightbox> <amp-iframe> https://github.com/ampproject/ amphtml/tree/master/extensions <amp-anim> <amp-audio> <amp-instagram>
- 17. #jesień2015 pawlisiak.com pawlisiak CO WIĘCEJ? Cachowanie mediów w chmurze Google. W przyszłości, opcjonalnie, również w innych.
- 18. #jesień2015 pawlisiak.com pawlisiak CO WIĘCEJ? Cachowanie mediów w chmurze Google. W przyszłości, opcjonalnie, również w innych. Łatwe debugowanie kodu AMP HTML. https://github.com/ampproject/ amphtml#the-amp-validator
- 20. #jesień2015 pawlisiak.com pawlisiak AMP + WP ? WordPress.com zapowiedział natywne wdrożenie AMP Oficjalny plugin AMP w wersji 0.1 https://wordpress.org/plugins/amp/ https://github.com/Automattic/amp-wp https://vip.wordpress.com/ 2015/10/07/mobile-web/
- 21. #jesień2015 pawlisiak.com pawlisiak AMP + WP ! PROJEKT _AWP
- 22. #jesień2015 pawlisiak.com pawlisiak PROJEKT _AWP W C H W I L I O B E C N E J Skórka do WordPressa napisana w AMP HTML. Domyślne tagi HTML zamieniane na AMP HTML. Shortcode do wstawiania reklamy. Bardzo wczesna faza projektu. https://github.com/pawlisiak/_awp
- 23. #jesień2015 pawlisiak.com pawlisiak PROJEKT _AWP W P R Z Y S Z Ł O Ś C I Projekt rozdzielony na skórkę i wtyczki (do dodatkowych komponentów). Personalizacja skórki. Dodatkowa wtyczka do podmiany domyślnej skórki na _awp (na telefonach).
- 24. #jesień2015 pawlisiak.com pawlisiak DOŁĄCZ DO PROJEKTU Projekt jest otwarty i chętnie łyknie trochę commitów! https://github.com/pawlisiak/_awp