Шаблоны и инструкции

Задача на публикацию

Шаблон задачи по публикации материалов.

Шаблон задачи

Заголовок:

Опубликовать материал.

Текст:

Материал брать отсюда: [ссылка на Y].
Материалы, предоставленные Заказчиком Предоставленные материалы соответствуют требованиям, описанным на https://cetera.ru/faq/all/v-kakom-formate-predostavit-teksty-dlya-sajta/
Требования 
Исполнитель создаёт согласованную структуру веб-ресурса и публикует фактически предоставленные материалы в соответствие со стандартом, опубликованным на https://cetera.ru/forclients/task-templates/publication-content
Опубликовать материалы заказчика из папки — [ссылка на Y] 
На сайт в раздел — [адрес конкретного раздела] 
Комментарии Заказчика, к чему относятся эти материалы: [комментарии]
При публикации строго исполнять стандарт публикации http://cetera.ru/forclients/task-templates/publication-content

В качестве результата предоставить ссылки на опубликованные материалы.

Компонент:

Публикация.

Примеры

Пример 1

Заголовок:

Внести изменения на странице «Мерчендайзинг».

Текст:

Внести следующие изменения на странице — Мерчендайзинг в eCommerce.

  1. Изменить title — Мерчандайзинг интернет магазина | Мерчендайзинг в eCommerce.
  2. В списках проставить точки (сейчас стоят не везде).
  3. В конце добавить форму обратной связи.
  4. Добавить инфографику по смыслу. Выполнить с соблюдением стандартов Cetera.
  5. Картинки берем с ресурса unsplash.com и сжимаем tinypng.com.
  6. При публикации строго исполнять стандарт публикации.
  7. Заполнить мета теги согласно инструкции.

В качестве результата прошу предоставить ссылку на измененную страницу.

Пример 2

Заголовок:

Внести изменения в 2-ух статьях.

Текст:

Для следующих статей внести изменения на страницы:

  1. Параметры колесных дисков (заменить заглавное изображение на горизонтальное, как здесь, например.
  2. Убрать заголовок повторный под изображением.
  3. Размер дисков по марке автомобиля (заменить ссылки в тексте, как во вложенном файле).
  4. При публикации строго исполнять стандарт публикации.
  5. Заполнить мета теги согласно инструкции.

В качестве результата, прошу предоставить ссылку на измененную страницу и скриншоты выполненной работы.

Пример 3

Заголовок:

Опубликовать фотографии на сайте.

Текст:

  • Сайт [ссылка на сайт].
  • Доступы [ссылка на HostingInfo].
  • Прошу опубликовать фотографии всех авторов статей (Во вложении).

Требования к публикации контента

Структура

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

Очистка

  • Для переноса материалов из Word используется вставка их в Dreamweaver MX и выше, любой версии, затем копирование исходного кода из Dreamweaver и вставка кода в режиме редактирования исходного кода в визуальный редактор.
  • Запрещается вставка текста из Word напрямую в визуальный редактор.
  • Если форматирование исходного текста простое (нет списков, нет таблиц…), то допускается замена Dreamweaver Блокнотом Windows или любым другим текстовым редактором.

Адреса страниц

Сайт обязательно должен содержать ЧПУ — человеко понятные URL (для старых сайтов не следует менять урлы).
ЧПУ не должны содержать параметров,?| и.т.п. 
Для разделения слов используется «-».

Русскоязычный сайт

  • В адресе сайта не должно быть кириллицы.
  • Все URL кроме статичных страниц — прописываются транслитом.

Статичные страницы, не участвующие в продвижении, всегда заполняются переводом

Примеры:

  • О компании — company
  • Контакты — contacts
  • доставка — delivery

Англоязычный сайт (прочие сайты не на русском языке)

URLs прописываются на английском языке (перевод).

Абзацы и заголовки

  • Абзацы оформляются строго <p>. Оформление абзацев с использованием <div> или <br> запрещено.
  • В тексте выделяются и создаются при отсутствии заголовки тегами H1, H2, H3 и т.д. Обеспечивается логическая вложенность контента.
  • Отсутствуют html символы во всех заголовках и тэгах страницы.
  • При наличии в тексте однородных абзацев, не являющихся списками (например, «Наши преимущества») с или без заголовками они должны быть оформлены в многоколоночный grid foundation. 2-3 колонки для medium-разрешения, 1 для small. Каждый абзац-блок должен включать заголовок, иконку и текст, если применимо кнопку (но лучше ставить с заголовка). 
  • При наличии в тексте выраженного сообщения (например, «Внимание! Распродажа…»), оно должно быть оформлено как https://foundation.zurb.com/sites/docs/callout.html с выделением его тем или иным цветом в зависимости от сути сообщения. 
  • При наличии в тексте цитаты она должна быть оформлена https://foundation.zurb.com/sites/docs/typography-base.html#blockquotes 
  • При наличии в тексте выделяющихся цифр (например, «Разработано проектов 500») их требуется оформить https://foundation.zurb.com/sites/docs/typography-helpers.html#statistics. Допускается перестроить порядок слов в предложении, чтобы сначала был текст, а потом число. При наличии нескольких чисел их надо расположить рядом по принципу однородных абзацев, пуская сначала крупную цифру, а потом уже текст, что обеспечит отображение чисел на 1 уровне по вертикали. 
  • Первый абзац на странице, если в нём явным образом содержится ключевая мысль текста (а так должно быть), должен быть оформлен как https://foundation.zurb.com/sites/docs/typography-helpers.html#lead-paragraph Допускается оформление таким образом не первого абзаца текста, если главная мысль текста явно смещена. 
  • Если заголовок длинный (особенно, несколько предложений), то к нему должен быть применён стиль https://foundation.zurb.com/sites/docs/typography-base.html#small-header-segments, в основной части должны остаться только самые главные слова, а все длинные тексты заголовка должны быть отнесены в дополнительную часть. 

Ссылки

  • Ссылки на тот же сайт вставляются от корня <a href="/about/" title=""></a>. Вставка с указанием имени домена <a title="" href="http://gardengear.ru/about/"></a> запрещена.
  • Создать как минимум одну текстовую ссылку на товары каталога, услуги или другие материалы этого сайта.
  • Для каждого сайта при дизайне должны быть разработаны графические буллеты как минимум для первого уровня ненумерованных списков. По результатам вашей публикации буллеты должны отображаться. 
  • Для каждого сайта при дизайне должны быть разработаны цветные номера пунктов в нумерованных списках. По результатам вашей публикации буллеты должны отображаться. 
  • При наличии длинного списка (6+ пунктов) список должен быть оформлен в многоколоночный grid foundation. 2-3 колонки для medium-разрешения, 1 для small. 

Изображения

  • Если необходимо изображение для иллюстрирования новости, то в первую очередь оно должно искаться на сайте https://unsplash.com/. Если там не обнаружено — Google.
  • Все изображения вставляются тегом <p><img src="" alt=""></p>. Запрещается вставлять изображения внутри абзаца текста или внутри заголовка с обтеканием изображения текстом.
  • Все изображения на странице должны быть одинаковой ширины. Рекомендуется подбирать изображения такими, чтобы их ширина была не меньше максимальной ширины контентного блока. В противном случае необходимо привести изображения к одному размеру в графическом редакторе или использовать Foundation Grid для задания меньших размеров.
  • Обязательно описание изображения в параметре alt.
  • Если изображений много и подразумевается их увеличение для просмотра, то они вставляются стандартной фотогалерей средствами CMS.
  • Если изображение вставляется с preview и последующим увеличением, то файл preview должен быть сделан отдельным, иметь небольшой размер.
  • Наличие у всех картинок тэга alt="{Описание изображения на картинке}"
  • При вставке нескольких изображений они должны быть нормированы по соотношению сторон путём подрезки. Не допускается устанавливать рядом изображения с разными соотношениями сторон: 4:3, 16:9, 1:1 и т.д. Делать одинаковыми. Допускается вставить в галерею обрезанные preview (рекомендуется 1:1, квадратные), а по клику будут открывать уже изображения с разными соотношениями сторон. 

Таблицы

  • Таблица всегда вставляется без параметров оформления, все параметры заданы заранее в CSS.
  • Если у таблицы есть ряд заголовков (сверху или слева), он оформляется как <tr><th></th></tr>.
  • Внутри <td> допускаются <p> и прочие любые блоки кода.
  • Обязательны теги <table><tr><td>. Все остальные теги либо факультативны, либо не нужны вовсе.
  • Таблицы должны быть оформлены по стандартам Foundation, должно работать выделение строк при наведении, должен быть подключен режим stack для адаптивности. Реализуется как <table class="hover stack"> 

Оформление текста

  • Текст внутри абзаца может быть оформлен как <strong>, <blockquote> (только для цитат) или <em>.
  • Запрещается написание текста ЗАГЛАВНЫМИ буквами или в р а з р я д к у.
  • Запрещается установка между словами или предложениями более 1 пробела. Двойные пробелы прекрасно убираются автозаменой даже Блокнота.
  • Запрещается установка пробела между словом и следующим за ним знаком препинания.
  • Отсутствуют html символы во всех заголовках и тэгах страницы.

Списки

  • Во всех случаях списки должны быть оформлены <ol> или <ul> с <li></li> для каждого элемента.
  • Запрещается сочетать для 1 пункта списка <li> и <hN> или <p>. Список и заголовки являются взаимоисключающими элементами перечисления блоков текста: списки для коротких пунктов, заголовки — для нескольких абзацев и целых глав.

Неразрывные пробелы

  • Рекомендуется устанавливать неразрывные пробелы между: разрядами чисел (1 000 000), числом и названием (1 килограмм), перед тире (сказано — сделано).

Сокращения

  • Запрещены все сокращения.
    • «руб.» — ошибка.
    • «мм» — ошибка.
    • «кг» — ошибка.
    • «шт» — ошибка.
    • «ул.» — ошибка.
    • «кв.» — ошибка.
    • «квартира за 1 миллион рублей» — корректно.
  • Аббревиатуры, разумеется, разрешены. Например, ВОЗ.

Мета-теги

  • Meta name description должен быть заполнен содержательным текстом, характеризующим материал.
  • Отсутствуют html символы во всех заголовках и тэгах страницы.
  • <title>{Обязательно содержит заголовок}{Название компании}{Город}</title>
  • <meta name="description" content="{Развернутое описание (анонс) содержания текста на странице, с содержанием ключевых слов, названия компании, города, призыва к действию, в одно предложение длиной не менее 250 знаков}" />.
  • <h1>{Краткий заголовок текста, содержит ключевые слова, не повторяет title}</h1> .

Видео

  • Если видео c ютуба используем:

    <div class="youtube"><div class="youtube__main" data-embed="K1QICrgxTjA"><div class="youtube__button">&#9654;</div></div></div>

  • Видео должно быть вставлено с помощью https://foundation.zurb.com/sites/docs/responsive-embed.html с учётом корректного соотношения сторон для данного видео. 

Иконки

  • Ко всем сайтам, которые мы разрабатываем или поддерживаем, должна быть подключена библиотека иконок font awesome https://fontawesome.com/icons?d=gallery&m=free . Если вам необходимо вставить в текст или просто на сайт иконку, она должна быть выбрана из этой коллекции и вставлена в основном цвете сайта (обычно цвет логотипа или цвет панели главной навигации или цвет заголовков) или в том цвете, в котором вставлены предыдущие иконки. Иконка вставляется в тексте обычно в размере 7x, без фоновой заливки. Документация по вставке — https://fontawesome.com/how-to-use/svg-with-js 

Типографика

  • Тире —. Дефис «-» — это не тире.
  • Кавычки: « и » Знак дюйма — это не кавычка. Английские названия кавычками не выделяются. Т.е. «Цетера Лабс», но Cetera Labs.
  • Для троеточия обязательно использование ….
  • Для обозначений градуса, копирайта, торгового наименования и торговой марки есть спецсимволы, использование которых обязательно (например, не «с», а ©). Для быстрого ввода типографически корректных символов есть специальная раскладка Бирмана. Используйте её. Аналоги для Mac и Linux.