Новая базовая тема оформления: различия между версиями

Материал из Центр поддержки системы бронировании
Перейти к навигации Перейти к поиску
м (Поддержка браузеров)
м
 
(не показано 11 промежуточных версий 3 участников)
Строка 1: Строка 1:
 +
[[Категория:Руководство]]
 +
 
'''Новая базовая тема оформления''' написана с учетом методологии разработки, что делает её более стабильной в эксплуатации.
 
'''Новая базовая тема оформления''' написана с учетом методологии разработки, что делает её более стабильной в эксплуатации.
  
Строка 6: Строка 8:
 
Учтены большинство рекомендаций групп разработки веб-стандартов, а также требования технологий SEO-оптимизации.
 
Учтены большинство рекомендаций групп разработки веб-стандартов, а также требования технологий SEO-оптимизации.
  
За счет технической оптимизации и переработки юзабилити, оптимизирована возможность кастомизации базовой темы клиентом, а также кастомизации и быстрых доработок веб-специалистами Mute Lab, которая не влечет за собой необновляемоcть кастомизированных частей.
+
За счет технической оптимизации и переработки юзабилити оптимизирована возможность кастомизации базовой темы клиентом, а также кастомизации и быстрых доработок веб-специалистами Mute Lab, которая не влечет за собой необновляемоcть кастомизированных частей.
  
 
Упрощена клиентская кастомизация CSS - все делается через визуальные классы, имеющие префиксы, их достаточно легко перебивать, клиентские стили отдельно вынесены вниз.
 
Упрощена клиентская кастомизация CSS - все делается через визуальные классы, имеющие префиксы, их достаточно легко перебивать, клиентские стили отдельно вынесены вниз.
Строка 15: Строка 17:
  
 
== Юзабилити и улучшение дизайна ==
 
== Юзабилити и улучшение дизайна ==
*Все страницы, формы, кнопки, попапы приведены к общему дизайну;  
+
*Все страницы, формы, кнопки, попапы приведены к общему дизайну.  
 
*Улучшены главные части продающих страниц:
 
*Улучшены главные части продающих страниц:
форма и результаты бронирования имеют общие тайтлы, степ-бары, унифицирован внешний вид и расположение кнопок;
+
форма и результаты бронирования имеют общие тайтлы, степ-бары, унифицирован внешний вид и расположение кнопок.
*Унифицированы небронирующие страницы, а также боксы (в особенности, на странице информации о заказе);
+
*Унифицированы небронирующие страницы, а также боксы (в особенности, на странице информации о заказе).
*Проработаны юзабилити формы заполнения данных;
+
*Проработаны юзабилити формы заполнения данных.
*Проработаны юзабилити с запоминанием кук, процес начат на форме поиска авиа, в ближайшем времени будет продолжен на все формы;
+
*Проработаны юзабилити с запоминанием кук, процес начат на форме поиска авиа, в ближайшем времени будет продолжен на все формы.
*Ко всем полям добавляются плейсхолдеры;
+
*Ко всем полям добавляются плейсхолдеры.
*Улучшена валидация, добавили новые правила для многих кейсов;
+
*Разработана новая стилистика и юзабилити работы с постфильтрами.
*Подготовлена платформа для имплементации более удобных автокомплитов и календарей;
+
*Переструктурировано саммари.
*Улучшена локализация;
+
*Изменен вид подробной информации о перелете, который охватывает всю полноту данных (возвратность билета, перелеты по кодшер, тарифы, информация о багаже и многое другое).
*Начата оптимизация иконок под Retina;
+
*Информация по количеству пассажиров приведена к удобному виду.
*Как один из важнейших оптимизационных процессов, в ближайшее время будет закончен переход от реквест стабов к попапам;
+
*Улучшена работа и переработан дизайн матрицы дат.
*Уменьшено количество ошибок,все ошибки отображаются понятно и корректно, оптимизирована скорость обработки 404, улучшено качество отдачи 404;
+
*Добавлен вывод информации о количестве оставшихся мест для каждого перелета.
*Пересмотрен функционал в личном кабинете, проведен первый этап оптимизации работы с фильтрами и очередями;
+
*Улучшена валидация, добавили новые правила для многих кейсов.
 +
*Подготовлена платформа для имплементации более удобных автокомплитов и календарей.
 +
*Улучшена локализация.
 +
*Начата оптимизация иконок под Retina.
 +
*Как один из важнейших оптимизационных процессов, в ближайшее время будет закончен переход от реквест стабов к попапам.
 +
*Уменьшено количество ошибок,все ошибки отображаются понятно и корректно, оптимизирована скорость обработки 404, улучшено качество отдачи 404.
 +
*Пересмотрен функционал в личном кабинете, проведен первый этап оптимизации работы с фильтрами и очередями.
 
*Начата переработка модулей моих пассажиров, профиля пользователя, заявок на модификацию, сообщений. В будущем дизайн этих модулей будет упрощен, но уже сейчас они соответствуют технологическим требованиям.
 
*Начата переработка модулей моих пассажиров, профиля пользователя, заявок на модификацию, сообщений. В будущем дизайн этих модулей будет упрощен, но уже сейчас они соответствуют технологическим требованиям.
 
*Подготовка платформы для поддержки мобильных и тач-устройств.
 
*Подготовка платформы для поддержки мобильных и тач-устройств.
 +
*Модифицирован дизайн таблиц.
  
 
== Техническая часть ==
 
== Техническая часть ==
*Ускорена работа страниц;
+
*Ускорена работа страниц.
*Уменьшено количество разметки;
+
*Уменьшено количество разметки.
*Введена методология разделения абстракцией, а также модели данных от визуальной составляющей и манипуляции с данными;
+
*Введена методология абстракции, модели данных от визуальной составляющей и манипуляции с данными (модель Model-View-Controller максимально примененная к верстке).
*Необходимые данные доступны везде в модели данных;
+
*Разделение: модель / разметка / визуальная CSS / манипуляции Javascript.
*Модель Model-View-Controller максимально примененная к верстке;
+
*Необходимые данные доступны везде в модели данных.
*Разделение: модель / разметка / визуальная CSS / манипуляции Javascript;
+
*Уход от использования инлайнового CSS и в максимально возможной степени, инлайнового Javascript.
*Уход от использования инлайнового CSS и в максимально возможной степени, инлайнового Javascript;
+
*Оптимизирован и склеен CSS, теперь он строится на препроцессорах.
*Оптимизирован и склеен CSS, строится на препроцессорах;
+
*Абстрагированы визуальные классы от классов для манипуляций.
*Абстрагированы визуальные классы от классов для манипуляций;
+
*Оптимизирован нагрузочный трафик при Ajax, все переведено на Json.
*Оптимизирован нагрузочный трафик при Ajax, все корректно переведено на Json;
+
*Оптимизированны скрипты, все скрипты переписанны на последних версиях современных javascript-фреймворков. В дальнейшем, с обновлениям этих фреймворков.
*Оптимизированны скрипты, все скрипты переписанны на последних версиях современных javascript-фреймворков с последующим обновлениям этих фреймворков;
+
*Специфические вещи вынесены как отдельные плагины, что позволяет не конфликтовать с подключаемыми клиентом плагинами.
*Специфические вещи вынесены как отдельные плагины, что позволяет не конфликтовать с подключаемыми клиентом плагинами;
+
*Код максимально приведен в соответсвие со спецификациями.
*Максимально приведены в соответсвие со спецификациями;
+
*Полностью новая библиотека валидации с семантической разметкой правил, которая позволит создавать любые правила и таким образом направлять действия пользователей в любых кейсах.
*Улучшен раздел head;
+
*Внедрен фреймворк работы с куками, который позволяет максимально запоминать данные — как одно из приоритетных направлений развития.
*Полностью новая библиотека валидации с семантической разметкой правил, которая позволит создавать любые правила и таким образом направлять действия пользователей в любых кейсах;
+
*Новые постфильтры, скорость которых возросла в 2-3 раза, более того, они достаточно легко кастомизируются.
*Внедрен фреймворк работы с куками, который позволяет максимально запоминать данные — как одно из приоритетных направлений развития;
+
*Полностью переработана страница авиавыдачи, все три типа группировки результатов на выдаче работают с постфильтрами и максимально быстро.
*Новые постфильтры, скорость которых возросла в 2-3 раза, более того, они достаточно легко кастомизируются;
+
*На страницу авиавыдачи вывели новые данные.
*Полностью переработана страница авиавыдачи, все три типа группировки результатов на выдаче работают с постфильтрами и максимально быстро;
+
*Ввод ограничения на чтение тарифных правил, кроме случаев, если пользователь запрашивает непосредственно их.
*На страницу авиавыдачи вывели новые данные;
+
*Переработан ЛК, как клиентский так и агентсткий, внедрен новый фреймворк работы с таблицей заказов, начали пересматривать системы филтьтров и очередей — в будущем предстоит разширение этого функционала.
*Ввод ограничения на чтение тарифных правил, кроме случаев, если пользователь запрашивает непосредственно их;
+
*Удален весь deprecated функционал.
*Переработан ЛК, как клиентский так и агентсткий, внедрен новый фреймворк работы с таблицей заказов, начали пересматривать системы филтьтров и очередей — в будущем предстоит разширение этого функционала;
+
*Переработана мини-форма: на данный момент она работает со всеми типами маршрутов и дополнительными параметрами без ограничений, т.е. повторяет возможности основной авиационной формы.
*Очищены весь устаревший функционал;
+
*Ускорена и унифицирована матрица дат.
*Переработана мини-форма: на данный момент она работает со всеми типами маршрутов и дополнительными параметрами без ограничений;
+
*Оптимизированы для кастомизации попапы путеводителя, со временем будет совершен полный уход от использования iframe.
*Ускорена и унифицирована матрица дат;
 
*Оптимизированы для кастомизации попапы путеводителя, со временем будет совершен полный уход от использования iframe;
 
 
*Переход к поддержке только современных браузеров, что позволило ускорить работу страниц и уменьшить их вес.
 
*Переход к поддержке только современных браузеров, что позволило ускорить работу страниц и уменьшить их вес.
  
Строка 64: Строка 71:
 
Новая базовая тема позволяет подключать и кастомизировать компоненты просто и быстро.
 
Новая базовая тема позволяет подключать и кастомизировать компоненты просто и быстро.
  
В новую базовую тему входит отельная компонента.
+
Создание клиентских индивидуальных тем оформления на базе новой темы упрощено и ускорено.
 +
Новая тема позволяет создавать индивидуальные темы оформления, в которых меняются только некоторые страницы, без уменьшения функциональности остальных, что позволяет индивидуальным темам оформления обновляться вместе с базовой темой.
 +
Cистема практически полностью абстрагирована от внешних изменений, по причине того, что методология разработки учитывала возможности маштабирования визуального и модели данных.
 +
 
 +
== Поддержка браузеров ==
  
На данный момент работы по ней еще ведутся, но все вышесказанное относится к ней, кроме некоторых неимплементированных вещей - валидации, постфильтров, запоминания в куках.
+
В разработке новой базовой темы оформления был использован подход graceful degradation (http://webdesign.about.com/od/webdesignglossary/g/graceful-degradation.htm), а именно — поддержание работоспособности, а не абсолютной визуальной идентичности во всех версиях всех браузеров.
В ближайшее время это будет реализовано.
+
Для новой темы также применим подход «две последних стабильных версии популярных браузеров». В частности, новая базовая тема полноценна в таких версиях браузеров:
  
Создание клиентских индивидуальных тем оформления на базе новой темы упрощено и ускорено.
+
=== Google Chrome ===
Новая тема позволяет создавать индивидуальные темы оформления, в которых меняются только некоторые страницы, без уменьшения функциональности остальных.
+
Две последние стабильные версии.
В ней также предполагается широкое использование модуля ЦМС, которое также не будет влиять на функциональность системы.
 
Учитывая маштабирование визуального и модели данных, система практически полностью абстрагирована от внешних изменений.
 
В ней используются подходы к маштабированию, потому, например, при увеличении данных, количества пунктов меню и т.д, функциональность не снижается.
 
  
== Поддержка браузеров ==
+
На 04/2013 — 25 и 26.
  
Основная концепция — мы поддерживаем две последние стабильные версии быстрообноляемых браузеров.
+
=== Mozilla Firefox ===
 +
Две последние стабильные версии.
  
'''В частности:'''
+
На 04/2013 — 19 и 20.
  
=== Google Chrome ===
 
Две последние мажорные версии stable build  —
 
 
=== Opera ===
 
=== Opera ===
Две последние мажорные версии stable build  —
+
Две последние стабильные версии.
=== Mozilla Firefox ===
+
 
Две последние мажорные версии stable build  — '''Версии 27, 26'''
+
На 04/2013 12.10 и 12.00.
=== Safari ===
 
Две последние мажорные версии stable build  '''Версии 6 и 5'''
 
  
Версия Safari 5 поддерживается только в режиме сохранения функциональности.
+
Поддержа специфических для Opera проблем — deprecated процесс, в связи с ближайшим переходом браузера на движок Blink, после чего уменьшится цикл обновлений.
  
Причины:
+
=== Safari (OS X) ===
 +
Две последние стабильные версии.
  
Под IOS Safari обновляется автоматически;
+
На 04/2013 5 и 6.
  
  — Safari 5 под Windows признан компанией Apple устаревшим, скачать и установить его официально невозможно.
+
  Поддержка Safari под Windows не оказывается 6 версия не выпускалась под Windows, 5 официально устарела и не доступна для скачивания.
  
 
=== Internet Explorer ===
 
=== Internet Explorer ===
Две последние мажорные версии stable build  '''Версии 10 и 9'''
+
Две последние стабильные версии.
 +
 
 +
На 04/2013 9 и 10.
 +
 
 +
Также учтены все требования для поддержки версии 11 после ее выхода.
 +
 
 +
Internet Explorer 8 поддерживается только в функциональной части, визуальные преимущества не поддерживаются
 +
(например, градиенты, закругление уголков), по причине того, что рендер таких вещей сильно замедляет работу.
 +
Разрабатывать же отдельную версию для корректного отображения в версии браузера, доля которой с каждым днем падает,
 +
не является целесообразным. Мы планируем отказаться от поддержки версии IE 8 в течение года.
  
Также учтены все требования для поддержки версии 11 после ее выхода.
+
Поддержка Internet Explorer 7 и ниже не гарантируется. В ближайшем будущем предусмотрена работа по восстановлению
Internet Explorer 8 поддерживается только в функциональной части, визуальные преимущества не поддерживаются (например, градтиенты, закругление уголков), по причине того, что рендер таких вещей сильно замедляет работу. Разрабатывать же отдельную версию для корректного отображения в версии браузера, доля которой с каждым днем падает, не является целесообразным.
+
работоспособности функционала в версии IE7.  
Мы планируем отказаться от поддержки версии IE 8 в течение года.
 
  
Поддержка Internet Explorer 7 и ниже не гарантируется. В ближайшем будущем предусмотрена работа по восстановлению работоспособности в версии 7.
 
 
=== Другие ===
 
=== Другие ===
Мы поддерживаем браузеры на базе Chromium, но только до момента перехода Chrome и Opera на движок Blink, Chromium будет признан устаревшим.
 
Редкие браузеры на старых версиях WebKit не поддерживаются.
 
=== Мобильные браузеры ===
 
'''Safari IOS для IPhone, Safari IOS для IPad, версии 6, 5.'''
 
  
После выхода Safari IOS 7 поддержка версии 5 прекратится.
+
Мы поддерживаем браузеры на базе Chromium, но только до момента перехода Chrome и Opera на движок Blink. С этого момента, Chromium будет признан устаревшим.
 +
 
 +
Редкие браузеры на WebKit не поддерживаются, в связи с ближайшим уходом основных мейнтейнеров движка на свои разработки.
 +
 
 +
Также, поддерживаются две последние стабильные версии Safari под iOS (iOS6  и iOS5).
  
Под подержкой в мобильных браузерах понимается только гарантию сохранения полной функциональной работоспособности, так как базовая тема все же не является оптимизированной под мобильные устройства.
+
== См. также ==
 +
*[[Тема оформления]]

Текущая версия на 18:40, 6 декабря 2018


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

Общая скорость работы в сравнении с предыдущей базовой темой возросла в 1.5-3 раза.

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

За счет технической оптимизации и переработки юзабилити оптимизирована возможность кастомизации базовой темы клиентом, а также кастомизации и быстрых доработок веб-специалистами Mute Lab, которая не влечет за собой необновляемоcть кастомизированных частей.

Упрощена клиентская кастомизация CSS - все делается через визуальные классы, имеющие префиксы, их достаточно легко перебивать, клиентские стили отдельно вынесены вниз. Использование БЭМ-методологии гарантирует независимость стилей.

В рамках работ над новой темой мы внимательно прислушиваемся ко всех пожеланиям и рекомендациям для упрощения работы с Немо веб-мастерами клиентов.


Юзабилити и улучшение дизайна

  • Все страницы, формы, кнопки, попапы приведены к общему дизайну.
  • Улучшены главные части продающих страниц:

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

  • Унифицированы небронирующие страницы, а также боксы (в особенности, на странице информации о заказе).
  • Проработаны юзабилити формы заполнения данных.
  • Проработаны юзабилити с запоминанием кук, процес начат на форме поиска авиа, в ближайшем времени будет продолжен на все формы.
  • Ко всем полям добавляются плейсхолдеры.
  • Разработана новая стилистика и юзабилити работы с постфильтрами.
  • Переструктурировано саммари.
  • Изменен вид подробной информации о перелете, который охватывает всю полноту данных (возвратность билета, перелеты по кодшер, тарифы, информация о багаже и многое другое).
  • Информация по количеству пассажиров приведена к удобному виду.
  • Улучшена работа и переработан дизайн матрицы дат.
  • Добавлен вывод информации о количестве оставшихся мест для каждого перелета.
  • Улучшена валидация, добавили новые правила для многих кейсов.
  • Подготовлена платформа для имплементации более удобных автокомплитов и календарей.
  • Улучшена локализация.
  • Начата оптимизация иконок под Retina.
  • Как один из важнейших оптимизационных процессов, в ближайшее время будет закончен переход от реквест стабов к попапам.
  • Уменьшено количество ошибок,все ошибки отображаются понятно и корректно, оптимизирована скорость обработки 404, улучшено качество отдачи 404.
  • Пересмотрен функционал в личном кабинете, проведен первый этап оптимизации работы с фильтрами и очередями.
  • Начата переработка модулей моих пассажиров, профиля пользователя, заявок на модификацию, сообщений. В будущем дизайн этих модулей будет упрощен, но уже сейчас они соответствуют технологическим требованиям.
  • Подготовка платформы для поддержки мобильных и тач-устройств.
  • Модифицирован дизайн таблиц.

Техническая часть

  • Ускорена работа страниц.
  • Уменьшено количество разметки.
  • Введена методология абстракции, модели данных от визуальной составляющей и манипуляции с данными (модель Model-View-Controller максимально примененная к верстке).
  • Разделение: модель / разметка / визуальная CSS / манипуляции Javascript.
  • Необходимые данные доступны везде в модели данных.
  • Уход от использования инлайнового CSS и в максимально возможной степени, инлайнового Javascript.
  • Оптимизирован и склеен CSS, теперь он строится на препроцессорах.
  • Абстрагированы визуальные классы от классов для манипуляций.
  • Оптимизирован нагрузочный трафик при Ajax, все переведено на Json.
  • Оптимизированны скрипты, все скрипты переписанны на последних версиях современных javascript-фреймворков. В дальнейшем, с обновлениям этих фреймворков.
  • Специфические вещи вынесены как отдельные плагины, что позволяет не конфликтовать с подключаемыми клиентом плагинами.
  • Код максимально приведен в соответсвие со спецификациями.
  • Полностью новая библиотека валидации с семантической разметкой правил, которая позволит создавать любые правила и таким образом направлять действия пользователей в любых кейсах.
  • Внедрен фреймворк работы с куками, который позволяет максимально запоминать данные — как одно из приоритетных направлений развития.
  • Новые постфильтры, скорость которых возросла в 2-3 раза, более того, они достаточно легко кастомизируются.
  • Полностью переработана страница авиавыдачи, все три типа группировки результатов на выдаче работают с постфильтрами и максимально быстро.
  • На страницу авиавыдачи вывели новые данные.
  • Ввод ограничения на чтение тарифных правил, кроме случаев, если пользователь запрашивает непосредственно их.
  • Переработан ЛК, как клиентский так и агентсткий, внедрен новый фреймворк работы с таблицей заказов, начали пересматривать системы филтьтров и очередей — в будущем предстоит разширение этого функционала.
  • Удален весь deprecated функционал.
  • Переработана мини-форма: на данный момент она работает со всеми типами маршрутов и дополнительными параметрами без ограничений, т.е. повторяет возможности основной авиационной формы.
  • Ускорена и унифицирована матрица дат.
  • Оптимизированы для кастомизации попапы путеводителя, со временем будет совершен полный уход от использования iframe.
  • Переход к поддержке только современных браузеров, что позволило ускорить работу страниц и уменьшить их вес.

Подключение компонент системы и работа с индивидуальными темами оформления

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

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

Поддержка браузеров

В разработке новой базовой темы оформления был использован подход graceful degradation (http://webdesign.about.com/od/webdesignglossary/g/graceful-degradation.htm), а именно — поддержание работоспособности, а не абсолютной визуальной идентичности во всех версиях всех браузеров. Для новой темы также применим подход «две последних стабильных версии популярных браузеров». В частности, новая базовая тема полноценна в таких версиях браузеров:

Google Chrome

Две последние стабильные версии.

На 04/2013 — 25 и 26.

Mozilla Firefox

Две последние стабильные версии.

На 04/2013 — 19 и 20.

Opera

Две последние стабильные версии.

На 04/2013 — 12.10 и 12.00.

Поддержа специфических для Opera проблем — deprecated процесс, в связи с ближайшим переходом браузера на движок Blink, после чего уменьшится цикл обновлений.

Safari (OS X)

Две последние стабильные версии.

На 04/2013 — 5 и 6.

Поддержка Safari под Windows не оказывается — 6 версия не выпускалась под Windows, 5 официально устарела и не доступна для скачивания.

Internet Explorer

Две последние стабильные версии.

На 04/2013 — 9 и 10.

Также учтены все требования для поддержки версии 11 после ее выхода.
Internet Explorer 8 поддерживается только в функциональной части, визуальные преимущества не поддерживаются 
(например, градиенты, закругление уголков), по причине того, что рендер таких вещей сильно замедляет работу. 
Разрабатывать же отдельную версию для корректного отображения в версии браузера, доля которой с каждым днем падает, 
не является целесообразным. Мы планируем отказаться от поддержки версии IE 8 в течение года.
Поддержка Internet Explorer 7 и ниже не гарантируется. В ближайшем будущем предусмотрена работа по восстановлению
работоспособности функционала в версии IE7. 

Другие

Мы поддерживаем браузеры на базе Chromium, но только до момента перехода Chrome и Opera на движок Blink. С этого момента, Chromium будет признан устаревшим.

Редкие браузеры на WebKit не поддерживаются, в связи с ближайшим уходом основных мейнтейнеров движка на свои разработки.

Также, поддерживаются две последние стабильные версии Safari под iOS (iOS6 и iOS5).

См. также