Екипът на Serpact ™ участва на тазгодишната AMP Roadshow конференция в Мюнхен, организирана от екипа на AMP (Accelerated Mobile Pages)

Екипът на Serpact ™ участва на тазгодишната AMP Roadshow конференция в Мюнхен, организирана от екипа на AMP (Accelerated Mobile Pages), която се проведе на 7 ноември. На събитието присъстваха разработчиците Ben Morse, Paul Bacau и Rudy Gulfi – продуктов мениджър. Конференцията засегна много аспекти на AMP като интерактивност, на какво ниво на развитие е AMP в момента, също и финансиране. Някои от темите бяха: „Удобна за AMP библиотека с уеб страници“, „Подобрена интерактивност на AMP“, „Създаване на AMP“, „Забавни и печеливши AMP“, „Прогресивни AMP страници“.

Ето и една от презентациите, демонстрирана на AMP коференцията:
Промяна във възприятието
Ето някои от по-важните въпроси и техните отговори, които чухме на конференцията:
„Хей, някой спомена дали AMP ми трябва?“
„Разбира се, това е единственият начин да се класирате за carousel на Google, по-добре не пропускайте този допълнителен трафик.“
„Е, тогава трябва ли да променя целия си сайт?“
„Не, това е точно като RSS, просто ги генерирайте върху нормалния си сайт и щракнете върху тях.“
Мрежата – неограничени възможности
Една от основните причини за създаването на AMP е да възстанови предишната слава и да увеличи скоростта на уеб страниците и да направи по-лесна тяхната употреба.
Отнема 19 секунди зареждане на една страница на 3G мрежа и с 1% забавяне се губят общо 7 реализации.
1 MB данни може да струва 5% от месечния оборот. 0,8 MB е средното количество реклама на мобилно устройство.
За индексиране на AMP, тя трябва да бъде маркирана с canonical
<link rel=“amphtml“ href=“https://www….com/page.amp.html„>
AMP подобрява визуализацията както на настолната, така и на мобилната страница. Това се постига чрез използването на няколко предварително генерирани библиотеки със скриптове и стилове, специално пригодени да изглеждат добре, функционални, удобни и респонсив, съдържащи всичко необходимо за бързо и лесно визуализиране на вашите страници.
Google казва, „Фокусирайте се върху потребителя и всичко останало ще дойде от само себе си.“
2. „AMP-библиотека за красиви и респонсив сайтове“
„AMP библиотека за красиви и респонсив уеб страници (също бързи и лесни за използване)“
AMP подобрява дизайна на мобилната версия и води до по-добро красивото десктоп рендиране. В допълнение, той подобрява пагинацията и адаптивния дизайн.
Някои основни факти за AMP:
Не се нуждае от JavaScript и HTML, а само от CSS
Всъщност AMP изобщо не позволява JS, освен собствените си скриптове. HTML се обработва безпроблемно, като се преобразува в необходимия формат при изпращане на страницата. Що се отнася до CSS, трябва да се има предвид, че в допълнение към стандартния, даден ни от проекта, всички CSS стилове, създадени лично от нас, трябва да бъдат описани в персонализиран css таг в хедъра на страницата. Local style елементи не се допускат.
- AMP HTML Library
Конференцията представи някои нови допълнения и ревизии на синтаксиса и функционалността на AMP елементите. По-интересни са:
srcset: Responsive Images using AMP – възможността за създаване на респонсив изображения за десктоп с различна разделителна способност
Media: Media searches за всеки елемент
- Embedding
Начини за ембедване на елементи от някои от социалните мрежи в AMP страници, като YouTube и Twitter, чрез тагове като
<amp-youtube>
<amp-twitter>
- Повече building parts
Други градивни елементи, които вече са стандартизирани и внедрени за обща употреба в AMP библиотеки, като въртележки, видеоклипове, лайтбоксове, странични ленти и други. Ето някои от етикетите, които ги описват:
<amp-carousel>
<amp-accordion>
<amp-timeago>
<amp-lightbox>
<amp-video> (with autoplay)
<amp-sidebar>
<amp-fit-text>
- Use for advanced
<amp-image-lightbox>
<amp-fx-flying-carp>
<amp-fx-flying-carpet>
<amp-animation>
Особено впечатляващо беше представянето на анимации на AMP страници, ето някои ключови точки:
Тънък фон около уеб анимации;
Отлични пикселни анимации, които не могат да се направят с CSS
<amp-animation>
Scroll-bound Animations (в процес на експериментация);
Parallax scrolling
<amp-position-observer>
Parallax 3D Cube Animation
Как да започна да използвам AMP?
Ето някои източници, които ни бяха представени и биха били полезни, ако решите да започнете с AMP:
- AMP Example (www.ampbyexample.com) – AMP from Example: Interactive Platform
- AMP Start (www.ampstart.com) – AMP Start: Sample Programs
Нуждаете се от вдъхновение?
Ако имате нужда от малко вдъхновение, за да направите своите страхотни AMP страници, вижте някои примери по-долу.