Что такое код swfsprite >add


Содержание

Что такое спрайт

CSS и спрайты. Для чего нужны, какие бывают и как пользоваться спрайтами. Научитесь ставить координаты для составных элементов спрайта и выводить.

Современный веб одним из приоритетов ставит скорость и оптимизацию сайтов.

Так одним из методов оптимизации является использование на сайте изображений называемых спрайтами.

Что такое спрайт, когда, зачем и как их используют, я постараюсь вам объяснить в этой записи.

Спрайт это

Спрайт — это одно изображение, которое объединяет в себе два и более изображений.

Основная идея использование спрайтов — это сократить количество запросов к серверу, тем самым уменьшив время загрузки страницы сайта. А уже при помощи CSS можно вывести любой фрагмент из спрайта в нужном нам месте. При этом размер у объединённого изображения (у спрайта) будет меньше, чем сумма размеров исходных картинок.

Если мы рассмотрим спрайт который я привёл выше в качестве примера, то он состоит из 60-ти иконок. Всего одним запросом спрайт загружается в браузер вместо 60-ти (если загружать каждую иконку по отдельности), а при помощи CSS мы можем вывести любую из иконок входящую в спрайт в нужном нам месте, при чём можем выводит одну и ту же иконку много раз.

Использование спрайтов

Думаю всем понятно, что веб-страница содержащая много изображений, будет загружаться долго, генерируя при этом много запросов к серверу. Использование спрайтов уменьшает количество запросов серверу, в результате снижая время загрузки страницы сайта и сокращая потребляемый пользователем трафик.

Спрайты можно использовать в самых разных местах, но наиболее распространённые случаи когда через спрайт выводят иконки для пунктов меню, разные кнопки и соцсети. Так же спрайты можно использовать в анимациях, играх и ещё много где.

Как пример на этом сайте можно посмотреть форум, где иконки разделов форума это и есть кусочки одного изображения спрайта.

Как работают спрайты

Спрайты работают напрямую через CSS.

Чтобы вывести изображение из спрайта, нужно задать к элементу в HTML class и в CSS задать этому классу стили.

Обязательные для спрайтов стили CSS :

background: url() — задаём путь к изображению (спрайту)

background-position — координаты выводимого фрагмента из спрайта

width и height — задаём размер (ширину и высоту) выводимого фрагмента

Пример вывода иконок из спрайта

Я возьму спрайт который был выше в примере и сделаю из него меню. Чтобы не липить шестьдесят пунктов меню, возьму пять пунктов, иконки которых будут из разных участков спрайта.

Итак, создаём меню у которого HTML следующего вида:

Получится следующий результат:

Теперь добавим к каждому из пунктов класc. В примере я специально назову класс длинным названием demoSpIcon, чтобы у меня в основных стилях сайта такое название больше никогда не вылезло, вы же можете называть классы как вам удобно:

Для заданного класса demoSpIcon пропишем CSS стили, где:

  • сразу к имени класса добавим псевдокласс ::before
  • бекграундом зададим ссылку на спрайт который выложен выше как примером
  • размер я подобрал в консоле браузера, он равен 38px в длину и ширину

Как видно, возле пунктов появилась иконка, но у всех одна и не соответствует названию пунктов меню.

Всё дело в том, что из спрайта был взят фрагмент с нулевыми координатами и поэтому вывелась первая верхняя иконка.

Так как в спрайте все иконки из набора одинаковые по размеру, мы прописали через CSS для класса demoSpIcon те стили, которые будут повторятся для каждой иконки.

Теперь через пробел добавим к каждому пункту по классу с индивидуальным названием, к которым зададим координаты на спрайте:

и добавим стили с соответствующими координатами иконок:

Как видим теперь возле пунктов отображаются нужные иконки из спрайта.

Дальше можем делать всё что захотим. Например, чтобы теперь сделать из нашего вертикального меню горизонтальное, мы к тегу ul добавим класс horizont и в CSS пропишем для него стили.

Получится следующий HTML макет:

А стили CSS теперь будут выглядеть так:

Как видим — получилось горизонтальное меню с иконками.

Единственное что я упустил — это ссылки на пунктах меню. Я их не ставил чтобы они не мешали. Чтобы добавить ссылки, переделываем конструкцию на пунктах меню вот так:

Координаты спрайта

Координаты спрайта подбираются через консоль браузера. Для этого наводим курсор мышки на пункт меню где нужно определить координаты и жмём правую кнопку мышки.

В меню выбираем Исследовать элемент (браузер мазила) или Просмотреть код (в гугл-хром).

В консоле в поле HTML-кода выделяем псевдокласс ::before после чего в поле со стилями видим наш CSS класс отвечающий за вывод координат (background-position). Подбираем координаты — выделяем координату и стрелками вверх/вниз на клавиатуре ищем нашу иконку.

Обратите внимание что для спрайтов принято брать минусовые значения координат. После того как координаты нашли, копируем и вставляем их в CSS

Анимация из спрайта

Так же спрайты используют для анимации.

Например возьмём вот такую картинку-спрайт, которая состоит из шести фрагментов

Теперь в HTML вставим div с айдишником marsch

и пропишем следующие CSS стили:

То в результате получим вот такого идущего человечка:

SKSpriteNode не отвечает, чтобы установить цвет & blendModeFactor (SpriteKit & Swift)

Я знаю, что есть несколько других сообщений об этом, но моем случае своего рода специфический, я не видел этого еще нет.

У меня в моей игре шаровидного спрайта, что всякий раз, когда я нажимаю на него, я хотел бы добавить colorised версии тот же спрайт, но с эффектом FadeIn и FADEOUT.

Отправляясь дать вам пример кода:


Теперь, до этого момента . Я не могу даже видеть touchEffect спрайт colorised (если я ставлю альфа-1), но один и тот же цвет исходного спрайта. Почему это?

В touchesBegan я сделать что-то вроде этого:

Я также использовал его в различных сценариях в моей же самой игре, и это сработало. Не знаю, почему это уникальный случай не делает. Любой намек? Если вам нужно больше примеров кода, дайте мне знать, не является копией пасты моего текущего кода Тхо, я просто набрал его из моей памяти, так что вы можете увидеть ошибку опечатка там. Но код очень похож.

(И мой спрайт не темный или черный)

Я отправляю это в ответ, потому что он слишком велик для комментариев, и я могу разместить код здесь, если это будет необходимо.

Я просто перечитать свою вещь , как в 3 раза более, Вы смешивание с белым, каким цветом вы ожидаете получить? если вы смешиваете синий и белый, вы получите синий, если вы смешиваете фиолетовый и синий, вы получите синий. Если вы смешиваете синий и серый, вы получите более темный синий. Это все процентное умножение. Я не верю , что вы получаете режим смешивания , чтобы выбрать из с цветами. Как это работает он принимает цвет каждого пикселя, и на пиксель, разбивает его на R , G , B , то он принимает цвет, и разрывы , что вверх в RGB (назовём его CR CG CB ). Математика становится ( R * CR , G * CG , B * CB ) на уровень на пиксель.

Вы делаете ( R * 1 , G * 1 , B * 1 ) , который ( R , G , B )

Если вы хотите раскрасить свой спрайт, то вам нужно ваш спрайт быть серым масштаб изображением, а также использовать цвет только тогда, когда вы хотите, чтобы они остались, что цвет (В некоторой степени, потому что смешивание будет по-прежнему применяться к ним, вы должны выяснить, математика, как вы хотите, чтобы смешать)

Илон Маск рекомендует:  Как определить версию ie

SWFSprite::add

(PHP 5 SWFSprite::add — Добавляет объект в спрайт

Описание

Эта функция является ЭКСПЕРИМЕНТАЛЬНОЙ. Поведение этой функции, ее имя и относящаяся к ней документация могут измениться в последующих версиях PHP без уведомления. Используйте эту функцию на свой страх и риск.

Функция swfsprite::add() добавляет объект swfshape() , swfbutton() , swftext() , swfaction() или swfsprite() .

Для отображаемых типов ( swfshape() , swfbutton() , swftext() , swfaction() или swfsprite() ), функция возвращает дескриптор объекта в списке отображения.

Возвращаемые значения

Эта функция не возвращает значения после выполнения.

Как подключить svg спрайт в файл в html и css

Есть сгенерированый svg спрайт — sprite.svg c symbol :

Если вставлять прямо в html , то все подключается отлично —

Но если подключать из файла (т.е. когда sprite.svg лежит в images) , то не отображается:

Почему не отображается иконка и как подключить в стили css иконку из спрайта?

2 ответа 2

Как правило решение проблем с отображением иконок из спрайта можно разделить на три части:

  1. Код иконок и спрайта, — так как вы их не включили в вопрос, трудно сказать что-то определенное. Надеюсь вы добавите коды хотя-бы одной иконки и части спрайта.
  2. Подключение файла спрайта.
  3. Подключение внешней таблицы стилей и стилизация самих иконок.

Подключение файла спрайта

При подключении файла спрайта через тег и background-image внешняя таблица стилей не будет работать, поэтому лучше подключать через тег

Сам файл спрайта необходимо разместить в одной папке с Index file особенно браузер Chrome чувствителен к этому. При вызове отдельной иконки из файла спрайта добавьте еще namespace SVG и внутреннюю таблицу стилей svg

Может это излишне для некоторых браузеров, но вы же наверное хотите кроссбраузерное решение.

Тег добавления файла спрайта в HTML необходимо разместить в листинге выше вызовов иконок, лучше в хедере. Это понятно, иконки должны загрузиться до вызова их в конкретном месте странички.

Подключение внешней таблицы стилей

В шапке файла спрайта необходимо добавить путь до внешней таблицы стилей

SWFSprite::add — Adds an object to a sprite

(PHP 5 SWFSprite::add — Adds an object to a sprite

Описание

Эта функция является ЭКСПЕРИМЕНТАЛЬНОЙ. Поведение этой функции, ее имя и относящаяся к ней документация могут измениться в последующих версиях PHP без уведомления. Используйте эту функцию на свой страх и риск.

swfsprite::add() adds a swfshape() , a swfbutton() , a swftext() , a swfaction() or a swfsprite() object.

For displayable types ( swfshape() , swfbutton() , swftext() , swfaction() or swfsprite() ), this returns a handle to the object in a display list.

Возвращаемые значения

Эта функция не возвращает значения после выполнения.

SVG-спрайты

Спрайт, в контексте веб-разработки, чаще всего, — один большой файл с графикой, получившийся в результате «сшития» нескольких маленьких графических файлов (иконок, элементов оформления). Это нужно для экономии количества запросов к серверу: меньше запросов — сайт работает и загружается быстрее. Сшивать в спрайт можно и растровую, и векторную графику.

Я расскажу о своём любимом способе работы с векторными спрайтами.

Работа с SVG (введение)

Не буду расхваливать SVG, причин его невероятной крутизны много и они неоднократно описаны. Поддержка начинается с IE9.

Источником векторных иконок (помимо дизайнеров) служат icomoon.io, flaticon.com, freepik.com/free-vectors и им подобные. Нарисовать самому можно в Adobe Illustrator или в Inkscape. Поскольку это обычный текстовой формат, редактировать его можно в текстовом редакторе.

Редакторы очень любят вставлять в код SVG-файлов служебную информацию, увеличивая вес файлов. Оптимизировать можно или он-лайн на jakearchibald.github.io/svgomg, или задачей для какого-либо таск раннера (см. ниже).

И да, SVG лучше иконочных шрифтов, ибо даёт больше возможностей и не является костылём).

У меня есть репозиторий со сводом рекомендаций для дизайнеров по работе с векторной графикой. Наиболее важные из них, актуальные для подготовки SVG-файлов к «сшивке» их в спрайт:

  • Артборд подогнан по габариту фигуры или все однотипные артборды подогнаны под единый размер.
  • Всё, что может быть слито в единую форму, слито.
  • Убраны лишние объекты.
  • Проведено сжатие.

SVG-спрайты

В подавляющем большинстве случаев, я использую такие спрайты для иконок. Мой любимый вариант основан на переиспользовании ( symbol и use ):

  1. Собираем один общий svg-файл со множеством symbol (элементы спрайта), имеющих свои id . У тега svg задаём style=»display:none» . Смотреть пример.
  2. Вставляем полученный спрайт в разметку страницы. (Я предпочитаю делать это с помощью javascript и localStorage, об этом ниже.)
  3. В разметке используем ссылки на symbol при помощи use . Смотреть пример.


Достоинства метода:

  • чистый, читабельный код,
  • управление с уровня CSS страницы (в том числе, fill=»currentColor» ),
  • кеширование в localStorage (спрайт загружается только единожды),
  • доступность (можно добавить title ).

Недостатки метода:

  • управление с уровня CSS не полное: сложно управлять отдельными частями символа (имеющими свои CSS-классы), если он вставлен несколько раз,
  • работает только с сервера (локального/удалённого — не важно), ибо использует localStorage.

Как собирать

Увы, в отличие от растровых спрайтов, он-лайн инструментов для сборки SVG-спрайта я не нашел (плохо искал?). Помимо ручной сборки (не-не-не-не, Девид Блейн, нет!) предложить могу только сборку с помощью Grunt/Gulp.

Вот репозиторий, собранный мной из своего старого стартового. В нём оставлена автоматизация, ответственная за сборку SVG-спрайта, сжатие javascript, запуск локального сервера и автообновление. После вызова команды grunt в консоли, автомат соберёт спрайт, сожмёт javascript (нужен для работы с localStorage), запустит локальный сервер и откроет в браузере index.html .

Для сжатия SVG использован imagemin (вот прекрасный аналог), для сборки спрайта использован grunt-svgstore. Уверен, что найти аналогичные задачи для Gulp не составит большого труда.

Как вставить спрайт в разметку

Способов много. Поскольку полученный спрайт — строка текста, вставить её на страницу можно, как минимум, с уровня серверного программирования и с уровня автоматизации фронтенда.

Я для себя выбрал способ с javascript и localStorage, т.к. это не вызывает зависимостей ни от чего, кроме включенного javascript на стороне клиента: поддержка localStorage очень хорошая. Именно этот способ и используется в демонстрационном репозитории. Есть, впрочем, небольшая оговорка: localStorage имеет ограничение в 5 Мбайт на домен.

Способ описан в недавней статье Osvaldas Valutis и состоит в следующем: при срабатывании javascript происходит проверка: спрайт уже записан в localStorage? Если да, он берется оттуда и вставляется на страницу. Если нет, файл скачивается, записывается в localStorage и потом вставляется на страницу.

Скрипт снабжён переменной revision , позволяющей контролировать кеширование спрайта. Если она изменится, спрайт будет перезагружен с сервера даже в том случае, если уже есть в localStorage.

Привожу листинг кода с комментариями:

В сжатом виде этот скрипт имеет очень небольшой размер.

Заключение

Если не нужен контроль с уровня CSS страницы, возможно лучшим решением будет вставлять небольшие (до 10 Кбайт) иконки прямо в CSS-файл, кодируя их в base64. В LESS даже встроенная функция для этого есть.

© Николай Громов. Внутренняя Монголия, вечность, лето.

Как подключить svg спрайт в файл в html и css

Есть сгенерированый svg спрайт — sprite.svg c symbol :

Если вставлять прямо в html , то все подключается отлично —

Но если подключать из файла (т.е. когда sprite.svg лежит в images) , то не отображается:

Почему не отображается иконка и как подключить в стили css иконку из спрайта?

Как правило решение проблем с отображением иконок из спрайта можно разделить на три части:

  1. Код иконок и спрайта , — так как вы их не включили в вопрос, трудно сказать что-то определенное. Надеюсь вы добавите коды хотя-бы одной иконки и части спрайта.
  2. Подключение файла спрайта.
  3. Подключение внешней таблицы стилей и стилизация самих иконок.

Подключение файла спрайта

При подключении файла спрайта через тег и background-image внешняя таблица стилей не будет работать, поэтому лучше подключать через тег

Сам файл спрайта необходимо разместить в одной папке с Index file особенно браузер Chrome чувствителен к этому. При вызове отдельной иконки из файла спрайта добавьте еще namespace SVG и внутреннюю таблицу стилей svg

Может это излишне для некоторых браузеров, но вы же наверное хотите кроссбраузерное решение.

Тег добавления файла спрайта в HTML необходимо разместить в листинге выше вызовов иконок, лучше в хедере. Это понятно, иконки должны загрузиться до вызова их в конкретном месте странички.

Подключение внешней таблицы стилей

В шапке файла спрайта необходимо добавить путь до внешней таблицы стилей

Глаза боятся, а руки делают. Подключаем AMP страницы на сайт

Я вырастил грибыыы … А нее, стопэ! :) Я подключил AMP страницы, и это оказалось не так уж и сложно! Пришлось повозиться, но уже есть что рассказать, и чем поделиться.

А началось все с того, что в Google-аналитике мне перестал давать покоя пункт «Ускоренные мобильные страницы (AMP)». Вроде бы вот он раздел, мне не мешает, но почему там пусто? Почитал мельком информацию, посмотрел видео, подумал, что вещь вроде бы неплохая, но работы много, и отложил подключение. Но пустой раздел в аналитике покоя не давал, не давал, не давал (привет, Баден-Баден!).

Итак, что такое AMP и зачем оно нужно?

AMP (Accelerated Mobile Pages) – переводится с английского как ускоренные страницы для мобильных устройств. Иными словами, HTML-код таких страниц отличается от общепринятого, и оптимизирован для отображения на мобильных устройствах.

Поначалу мне было непонятно, зачем это нужно, если есть такие фреймворки для адаптивной верстки, как Bootstrap? Например, на моем сайте используется как раз такой фрейморк, и страницы хорошо отображаются как на компьютерах, так и на смартфонах и планшетах, смысл городить еще что то? Но всё оказалось сложнее (с)

Когда вы создаете страницу, сделанную по технологии AMP, вы фактически создаете некоторый автономный продукт, который забирает Google, и в дальнейшем держит на своих серверах. Когда человеку в поиске попадается ваша такая страница, она отдается с ближайшего сервера в том виде, в котором Google забрал её в последний раз. Это как лепить садовых гномов и отдавать их в супермаркет на реализацию.

Человек прямо в поиске увидит картинку/логотип вашей статьи, заголовок, часть текста, а если заинтересуется, то и все содержимое вашей страницы будет ему отображено в считанные секунды, и всё это без захода на ваш сайт! В принципе, ситуация Win-Win, как говорится – мне не надо отдавать лишние деньги за ресурсы хостинга, пользователю не нужно ждать, пока страница сформируется, загрузится и отрисуется. Да, предвосхищаю ваш самый главный вопрос – на такие страницы можно вставлять как рекламу, так и счетчики посещаемости.

Как сделать AMP страницу и какие тонкости и риски просто необходимо учесть.

Как уже говорилось, AMP страницы должны соответствовать определенному стандарту, и на них накладываются определенные ограничения. Стандарт описан на английском языке на официальном сайте проекта — https://www.ampproject.org, но я проведу вас через примеры с сайта и опишу всё, что узнал, на русском.

Итак, «обыкновенная» AMP страница, выглядит, по мнению авторов, вот так:

Специально вставляю картинку, что бы апеллировать к номерам строк (слева). Сам HTML вы можете взять с официального сайта по этой ссылке.


Итак, вы видите структуру документа. В 6й строке вы должны вставить свой заголовок, а строку 23 заменить содержимым своей статьи (вместе с картинками и прочим), и подбить служебные поля. Если вы все сделаете правильно, создание AMP страницы будет окончено, и вам останется только скормить её в Google.

Но вот с этим «сделать всё правильно» как раз начинается самая тонкая работа :)

Не забудьте научить ПС не считать AMP страницу и оригинал дублями.

У меня теперь есть два вида записей блога – обычная страница, и, теперь, AMP, с одинаковым содержимым. Для себя я наметил, что отличаться они будут вставкой дополнительного текста «blog_amp» в URL (адрес) страницы.

Так, например, обычная статья имеет адрес «https://bablofil.ru/kak-torgovat-na-birje/», а её аналог – «https://bablofil.ru/blog_amp/kak-torgovat-na-birje/». Если хотите, откройте обе в браузере – и обе откройте с мобильного телефона, сравните. И сразу да – AMP может выглядеть намного красивее, не так как у меня, но я еще до этого доберусь ;)

Так вот, есть у меня теперь две разные страницы с одинаковым содержанием. Они немного отличаются по внешнему виду, но статья то одна и та же! С точки зрения Яндекса – это дубль страницы, и раньше это расстреливали пессемизировали страницу в поиске.

Для решения такой проблемы предусморены специальные заголовки в разделе «head» как основной страницы, так и её AMP-собрата (строка 7 на рисунке выше).

На «ускоренной» странице вы ссылаетесь на главную, указывая параметр rel=”canonical” и href=”адрес основной страницы”

rel= «canonical» href= «http://main_page.html» />

А на главной указываете ссылку на «ускоренную», указывая параметр rel=”amphtml” и href=”адрес страницы AMP”.

rel= «amphtml» href= «https://www.example.com/url/to/amp/document.html» >

Продолжая свой пример, у меня на странице https://bablofil.ru/kak-torgovat-na-birje/ указан путь к её amp-версии

, а на amp-версии указан путь к оригиналу

Тут у меня указаны относительные пути, без полного указания https://bablofil.ru/. , и по заверениям гугла, тут это допускается. Но в некоторых других частях документа придется использовать полный путь, так что вам, может быть, будет удобнее использовать полный URL везде.

Этих заголовков, говорят Яндекс с Гуглом, должно хватить, что бы всё было хорошо.. Но мы то живем в реальном мире! Поэтому многие мастера вносят в robots.txt строки, запрещающие индексацию amp страниц для Яндекса. В моём случае, можно было бы внести в robots.txt строку вида Disallow: /*blog_amp*, но я этого не делаю, потому что мне интересно, как Яндекс себя поведет. Такой вот мини-эксперимент.

Приведите содержимое статей в соответствие с ограничениями

Звучит как что-то абстрактное, но, на самом деле, все очень предметно. Некоторые WYSIWYG редакторы (те штуки, в которых вы набираете текст в админке, где можно выделять жирным, ставить заголовки и всё такое) любят вставлять всякое лишнее в тело статей. Например, мой редактор вставляет в загружаемые картинки атрибут style=”height:400px; width: 600px”, а так же иногда вставляет атрибут style в теги span и div.

Но это не поддерживается AMP, и гугл при проверке такой страницы будет ругаться и не хотеть её добавлять. Так же не поддерживается тег img – его надо заменять на тег amp-img.

Что сделал я в такой ситуации – несколько шагов, они больше программные. У меня сайт сделан на языке программирования Python, но те же самые техники вполнеможно приспособить и для PHP, особенно для таких движков как WordPress и Drupal.

Изображения и прочее.

Изображения должны быть указаны в тегах amp-img, и обязательно иметь следующие атрибуты:

layoutresponsive» (для адаптивного масштабирования)
w > height=”400” – любое целое число в пикселях.

Да-да, изображение будет масштабироваться, а пропорции будут браться из отношения width к height. Все эти поля обязательны, и, если вы их не укажете, изображения показываться не будут, и тем более Google не будет работать с этой страницей.

У себя я решил вопрос относительно просто: перед тем, как построить и скинуть в кэш amp страницу, отрабатывает автозамена – все вхождения на , и все вхождения style=”любой текст” просто вырезаются из всех тэгов – все равно они не работают на amp.

Код простой, выглядит вот так:

article — в моем случае, всё содержимое статьи. При использовании PHP надо будет заменить article.replace на str_replace и, возможно, переставить аргументы местами, а re.sub заменить на preg_replace.

Так же очень важным для меня стал вопрос, где брать исходные данные по изображениям – длину и высоту. Тут мне повезло, хотя, думаю, и у вас похожая история. В общем, когда я вставляю картинку в текст, код выглядит таким образом:

Внутри кавычек в аттрибутах alt, class, src и style текст каждый раз меняется, но их позиция всегда остается неизменной. Таким образом, мне нужно из поля style взять цифры (в этом примере, 53 и 553), и подставить их же в эту же строку, но как отдельные атрибуты. Строка после этого будет выглядеть вот так:

Потом, как я уже писал выше, для amp страниц style=”…” полностью срежется, а теги заменятся, и итоговый код для изображения на ускоренной странице будет выглядеть так:

А само решение делается в одну строку кода:

Опять же, в PHP re.sub надо будет заменить на preg_replace и, возможно, поменять аргументы местами.

Это регулярное выражение находит в html-коде статьи текст, похожий на

После того, как я внес эти изменения – подгонка изображений под стандарт и вырезание style=’…’ из тэгов, больше с текстом статей я не работал – текст стал валиден, осталось дооформить страницу.

Свои стили

Текст-то может и стал валиден, но пропали стили – подключать внешний CSS в AMP страницу нельзя, и в теги прописывать через style тоже нельзя. Выход – внедрять CSS в head страницы, но в строго отведенном месте — в теге style amp-custom. Вот как выглядит это у меня в шаблоне страницы.

Этот тэг должен присутствовать только один раз на всю страницу, дублировать нельзя, все стили прописываем в нём. Более того, подозреваю, что есть ограничения на размер содержимого, да и лишние пробелы надо убрать и переводы строк, но в процессе разработки я этого не делал.

Проставьте правильное описание страницы

Помните тот рисунок в начале статьи, где от разработчиков показывался пример правильной AMP страницы? Так вот, с точки зрения Google он НЕ правильный, пока вы не пропишете все нужные поля в описание script type=»application/ld+json» .

Вот как выглядит это у меня.

В фигурных скобках указаны мои переменные, которые подтягиваются из базы, свои для каждого отдельного поста. HTML-код для копирования вы можете взять с официального сайта.

Пара замечаний по заполнению: Для изображений тут не подходят относительные пути – всё надо вбивать полностью, и важны размеры. Вот эти поля: width:600 и height: 60, а так же height:2000 и width: 800 я взял полностью из примера. Я пытался подогнать их под себя – но потерпел поражение. Google ругался то на высоту, то на ширину, а через поиск нашел только то, что размеры могут быть любыми. В общем, оставил их пока как есть, если появится новая информация, сообщу. И да, если у вас есть такая информация, поделитесь, пожалуйста, в комментариях.

А, и еще на предмет поля mainEntityOfPage – по описанию, это поле должно указывать на товар, который вы описываете, или на персону, или на организацию и так далее. Про статьи ничего не сказано, но, раз уж это поле обязательно для Google, я в нём указал путь к такой же, но не ускоренной странице (канонической). Прав я или нет – время покажет. Но гуглу понравилось, вроде ;)

Добавьте меню

Тут я сделал сайд-бар, но, возможно, потом сделаю что-то более симпатичное. Оказывается, такие вещи предусмотрены стандартом, и добавлять их не сложно.

Делай раз – указал скрипт в разделе head – он для всех одинаковый

Делай два – добавил кнопку, при нажатии на которую будет показываться сайдбар

Делай три – добавил сам сайт-бар

Тут надо отметить, что аттрибуты role и tabindex обязательны для Google, так что вписал их – на официальном сайте про это упоминания я не нашел.

В общем-то всё, сайд бар открывается при нажатии на кнопку-гамбургер, и закрывается при нажатии на строку «Закрыть меню». Выглядит не так круто, как хотелось бы, но это дорабатывается стилями.

Добавьте рекламу

Тут принцип тот же – добавляем в head нужный скрипт:

И добавляем сам рекламный блок в тэге

Тут такой же принцип, как и с изображениями – реклама будет адаптивно подстраиваться, но в нужных пропорциях. Пример выше использует рекламу AdSense, данные для полей data-ad-client и data-ad-slot вы можете получить в консоли Google AdSense при создании баннера.


Добавьте аналитику

Пусть AMP страницы хранятся и не у вас, а на серверах иностранной корпорации, вам же все равно нужно знать, что с ними происходит – кто их просматривает, как находит и так далее. Ну и с этим ничего сложного, принцип вы, наверное, уже уловили:

Добавляем скрипт в head:

Добавляем код для счетчиков:

Вот их можно вставлять сколько угодно — по крайней мере, у меня указаны оба этих блока. Желтым цветом выделены идентификаторы, которые вы должны заменить на свои – код для Google вы можете получить в Google Analytics, код для Яндекса – в Яндекс.Метрике.

Добавьте что-нибудь еще

Я обязательно добавлю, только чуть позже, комментарии, красивую прокрутку изображений, интерактивные графики на свои страницы.. Как только с этим разберусь :)

А так есть хороший сайт, где собраны примеры всяких фишек и их реализации https://ampbyexample.com/ – с примерами кодов, с визуализацией и прочим – просто скрольте страницу вниз, смотрите примеры, и самые вкусные утаскивайте себе в копилки.

Вместо заключения

После того, как я сделал AMP страницы, на все статьи моего блога автоматически проставляется ссылка на AMP аналоги. Но я решил, что лишним не будет так же добавить эти страницы в sitemap.xml – и добавил.

Кроме того, когда я тестировал и подгонял AMP код, я пользовался проверкой от Google (ссылка выше), и там, при проверке, есть кнопка «Добавить страницу» — и я нажимал добавить для трех страниц.

Эти три страницы действительно, добавились на следующий день, но ругаются на ошибки, которые я уже давно исправил. Т.е. я сначала нажал добавить, потом полез что-то исправлять, где то совершил ошибку, исправил, а потом страницы добавились с замечаниями.

Так что теперь я просто жду, когда Google их сам найдет, а так же мне интересно, что будет делать с ними Яндекс после обнаружения. Если будет информация – сообщу.

One more step

Please complete the security check to access zismo.biz

Why do I have to complete a CAPTCHA?

Completing the CAPTCHA proves you are a human and gives you temporary access to the web property.

What can I do to prevent this in the future?

If you are on a personal connection, like at home, you can run an anti-virus scan on your device to make sure it is not infected with malware.

If you are at an office or shared network, you can ask the network administrator to run a scan across the network looking for misconfigured or infected devices.

Another way to prevent getting this page in the future is to use Privacy Pass. You may need to download version 2.0 now from the Chrome Web Store.

Cloudflare Ray ID: 53525b478cce90bd • Your IP : 188.64.174.135 • Performance & security by Cloudflare

CSS-спрайты

CSS-спрайт – способ объединить много изображений в одно, чтобы:

  1. Сократить количество обращений к серверу.
  2. Загрузить несколько изображений сразу, включая те, которые понадобятся в будущем.
  3. Если у изображений сходная палитра, то объединённое изображение будет меньше по размеру, чем совокупность исходных картинок.

Рассмотрим, как это работает, на примере дерева:

Сейчас «плюс», «минус» и «статья» – три отдельных изображения. Объединим их в спрайт.

Шаг 1. Использовать background

Первый шаг к объединению изображений в «спрайт» – показывать их через background ., а не через тег IMG .

В данном случае он уже сделан. Стиль для дерева:

Шаг 2. Объединить изображения

Составим из нескольких изображений одно icons.gif , расположив их, например, по вертикали.

Из , и получится одна картинка:

Шаг 3. Показать часть спрайта в «окошке»

А теперь самое забавное. Размер DIV для иконки – жёстко фиксирован:

Это значит, что если поставить в качестве background объединённую картинку, то вся она не поместится, будет видна только верхняя часть:

Если бы высота иконки была больше, например, 16×48 , как в примере ниже, то было бы видно и остальное:

…Но так как там всего 16px , то помещается только одно изображение.

Шаг 4. Сдвинуть спрайт

Сдвиг фона background-position позволяет выбирать, какую именно часть спрайта видно.

В спрайте icons.gif изображения объединены так, что сдвиг на 16px покажет следующую иконку:

  • В спрайт могут объединяться изображения разных размеров, т.е. сдвиг может быть любым.
  • Сдвигать можно и по горизонтали и по вертикали.

Отступы

Обычно отступы делаются margin/padding , но иногда их бывает удобно предусмотреть в спрайте.

Тогда если элемент немного больше, чем размер изображения, то в «окошке» не появится лишнего.

Пример спрайта с отступами:

Иконка RSS находится в нём на координатах (90px, 40px) :

Это значит, что чтобы показать эту иконку, нужно сместить фон:

При этом в левом-верхнем углу фона как раз и будет эта иконка:

Элемент, в котором находится иконка (в рамке), больше по размеру, чем картинка.

Если бы в спрайте не было отступов, то в такое большое «окошко» наверняка влезли бы другие иконки.

Итого

Решение лучше всего принимать, исходя из принципов семантической вёрстки.

Задайте вопрос – что здесь делает изображение? Является ли оно самостоятельным элементом страницы (фотография, аватар посетителя), или же оформляет что-либо (иконка узла дерева)?

Элемент IMG следует использовать в первом случае, а для оформления у нас есть CSS.

  1. Сократить количество обращений к серверу.
  2. Загрузить несколько изображений сразу, включая те, которые понадобятся в будущем.
  3. Если у изображений сходная палитра, то объединённое изображение будет меньше по размеру, чем совокупность исходных картинок.

Если фоновое изображение нужно повторять по горизонтали или вертикали, то спрайты тоже подойдут – изображения в них нужно располагать в этом случае так, чтобы при повторении не были видны соседи, т.е., соответственно, вертикально или горизонтально, но не «решёткой».

Далее мы встретимся со спрайтами при создании интерфейсов, чтобы кнопка при наведении меняла своё изображение. Один спрайт будет содержать все состояния кнопки, а переключение внешнего вида – осуществляться при помощи сдвига background-position .

Для автоматизированной сборки спрайтов используются специальные инструменты, например SmartSprites.

Илон Маск рекомендует:  Что такое код loadbitmap
Понравилась статья? Поделиться с друзьями:
Кодинг, CSS и SQL