Процесс производства интернет-магазина

Наполнение сайта

Заголовок

Опубликовать материалы на сайте

Текст

Опубликовать материалы заказчика из папки — [ссылка на Y]
На сайт — [адрес сайта]
Комментарии Заказчика, к чему относятся эти материалы:

[комментарии]

При публикации неукоснительно соблюдать стандарт публикации — https://cetera.ru/ecommerce-development-process/napolnenie/napolnenie-sajta/
В качестве результата предоставить ссылки на опубликованные материалы.

Как мы публикуем

Вручную

Вручную перенесем материалы из электронных документов Microsoft Office-форматов в базу данных сайта. Используем для публикации визуальные редакторы. Не забываем о семантике текста. Очищаем мусорные теги Word. Прописываем мета-поля для поисковых систем сразу.

Импортируем из вашей базы

Автоматически загрузим материалы из вашей базы (Excel, 1C, Dynamics AX, Dynamics NAV, СБиС++ и т.д.). Импортируем разово или настроим постоянный обмен. Используем автоматический импорт для каталогов продукции. Подробно опишем товары уже на сайте. Привяжем изображения по артикулам.

Спарсим с сайтов

Загрузим товары с сайтов ваших поставщиков. Автоматически загрузим в базу данных сайта описания, фотоизображения, цены, отзывы и т.д. Применим наценку в момент импорта. Наложим на фотографии вашу водяную марку. Синонимизируем текстовые материалы для повышения их уникальности.

Наши нормативы

1 материал — 15 минут

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

Импорт данных — 10 дней

Настроим импорт или парсинг данных в течение 10 дней с момента предоставления источника и документации. Установим расписание или предоставим кнопку для запуска.

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

Структура

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

Очистка

  • Для переноса материалов из 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.