03.01.2014 | Добавил: dmagic | Просмотров: 1884
SMED: быстрая переналадка на Новый Год

Если вы еще не заметили или впервые заглянули на страницы этого ресурса, то сообщаю, что у сайта новый дизайн. Смена шаблона – дело не самое тривиальное, хотя ничего сложного или сверхъестественного не предполагает. Несколько часов работы, если знаешь что делать. Несколько дней, если твоя основная специальность находится за пределами html-верстки и редактирования CSS. Например, в области менеджмента, инженерии или бережливого производства и шести сигм.

    Второй вариант, пожалуйста…

Ваш покорный слуга приобрел новый “костюмчик” для сайта еще 27 декабря и примеряет его по сегодняшний день. Разумеется, с перерывами на установку ёлки, коньяк, здоровый сон и… написание заметок по ходу дела. Однако если вы один из двухсот человек, посетивших наш сайт 31 декабря, то прекрасно знаете, что в старом году он обладал теми же чертами, что и на протяжении последних 5 лет. Тем не менее, с боем курантов карета превратилась в тыкву сайт раз и навсегда поменял свой облик. Разумеется, про куранты получилась гипербола, но во всем остальном соблюдена точность.

Как нам удалось изменить внешний облик сайта, не пропустить Деда Мороза и оливье?

Все просто! Мы применили SMED = Single Minute Exchange of Dies Design.

Шаг 1: определить все операции, которые необходимо произвести во время переналадки.

Вот тут загвоздка. О том, что это нужно сделать, и говорить нечего. О том, насколько это важно, и думать нечего. Но! К моему глубокому сожалению, человеку, никогда не менявшему дизайна сайтов, тяжело представить, какие подводные камни его ждут. Забегая наперед, открою вам секрет: два таких камня мы все же “поймали”.

Итак, я НЕ знаю, что делать во время “переналадки” дизайна сайта. Тем не менее, отлично понимаю, что, не узнав этого, не смогу сократить то время, которое потребуется для переналадки. Что же делать? Что же делать?

    Может, парализовать работу сайта на несколько дней? Внимание-внимание! Сейчас произойдет смена дизайна сайта! Исполняется впервые! Поэтому постойте в сторонке, а мы тут как-нибудь уж сами…

“Смотри инструкцию производителя оборудования”, – скажет любой производственник. “Подготовь инструменты, наведи 5S порядок, проведи обучение”, – добавит он следом. Вот я и решил воспользоваться его советами.

  • Инструкция на руках появилась только с покупкой шаблона – 27.12.2013.
  • Еще до покупки следовал выбор и обсуждение возможных вариантов с редакторами сайта и активными пользователями – 08.12.2013.
  • Элементарное понимание html и CSS… очень элементарное, зато есть.
  • Порядок в файлах, которые следует установить на сайт, наведен их создателем.
  • …вот бы еще тренинг!

Благо, платформа, на которой расположен наш сайт – ucoz – позволяет создавать сайты бесплатно, чем и решено было воспользоваться с целью тренинга. 28 декабря создан пустой сайт со стандартным шаблоном 831 (предыдущий шаблон нашего сайта), поверх которого был “примерен новый костюмчик”.

Главное чтобы, главное чтобы,
Главное, чтобы костюмчик сидел!

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


UPD 04.01.2014: Шаг 2

Что из себя представляет смена дизайна?

На движке нашего сайта замена дизайна означает смену шаблонов модулей. Шаблон – это html-код (фактически, программный код), который говорит вашему браузеру, что делать и как отображать ту или иную страницу сайта. На нашем сайте 16 модулей (до того, как был изменен дизайн, мы использовали 14). Для корректной работы каждого модуля требуется от 1 до 11 шаблонов разной сложности.

Шаблоны меняются очень просто:

  1. загружаем все сопутствующие файлы;
  2. копируем содержимое шаблонов на сайт.

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

Не критично? Действительно не критично. Особенно, если запланировать эти операции на то время суток, в которое на сайте меньше всего читателей. Однако после изменения всех шаблонов необходимо переписывать или дописывать отдельные элементы. Это требуется не потому, что ваши инструменты – шаблоны – не были подготовлены к работе, а потому, что создатель мог не учесть всех особенностей вашего сайта. А их за последние 5 лет накопилось немало.

Некоторые элементы html-верстки лучше допиливать, когда новый дизайн будет установлен на сайт. Тем не менее, ряд операций лучше выполнить еще до установки шаблона. Итак…

Шаг 2: выделить “внешние” и “внутренние” операции переналадки.

Внешние операции переналадки – это все действия, которые могут быть выполнены во время работы оборудования, до переналадки. В контексте “переналадки” дизайна сайта к таким операциям можно отнести выпадающее меню в верхней части сайта.

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

А что на выходе? Полностью обновлены 2 шаблона. Иными словами, 2 инструмента подготовлены для выполнения конкретного типа переналадки, что позволяет сократить саму переналадку до секунд – скопировать/вставить участок кода не составит труда.

Тот же “фокус” был проделан с футером (нижней частью сайта), кнопками соцменю и некоторыми другими элементами дизайна. Все это позволило исключить из переналадки почти 8 часов работы неквалифицированного html-верстальщика. А нервов сколько экономится, когда не по живому режут…

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


UPD 05.01.2014: Шаг 3

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

Шаг 3: превратить “внутренние” операции переналадки во “внешние”.

О том, что такое “внешние” операции переналадки, мы поговорили в предыдущей заметке. Дадим определение “внутренним” операциям:

Внутренние операции переналадки – это все действия, которые выполняют после остановки оборудования – непосредственно во время переналадки. В контексте “переналадки” дизайна сайта к таким операциям можно отнести замену шаблонов модулей, настройку и встраивание информеров в функциональные блоки сайта, подгонку баннеров и графических элементов и многое другое.

Стоп-стоп-стоп! А зачем подгонять баннеры и графические элементы во время смены дизайна, если мы можем это сделать на тестовом сайте, а затем просто скопировать их на сервер, как и многие другие элементы?

Отлично! Одной из операций (а точнее, множества однотипных операций) удалось избежать. Готовим картинки, загружаем на сервер и прописываем в коде шаблонов их адреса. Теперь со сменой шаблона можно забыть про подгонку баннеров и графических элементов.

Что следует сделать с лучшей практикой? Распространить! Давайте превратим внутренние операции по работе с информерами во внешние.

Информеры – это блоки для вывода информации, к примеру, последних публикаций, комментариев, новостей и т.д. Благодаря информерам главная страница сайта теперь приобрела динамичный (обновляемый) вид, а также обзавелась красивым слайдером, который доносит до посетителей сайта самую важную информацию. На нем-то я и остановлюсь подробнее.

В оригинальном коде шаблона на слайдер выводятся последние новости. Новостной модуль на нашем сайте долгое время был деактивирован. Мне неоднократно доводилось экспериментировать с ним, некоторое время он даже работал в режиме календаря событий в сфере бережливого производства и шести сигм, а еще раньше – в 2011 –в качестве отдельного модуля для подготовки участников к первому online-тренингу зеленых поясов. Тем не менее, модуль так и не прижился, и можно было бы не вспоминать о нем, если бы было принято решение выводить на слайдер последние заметки из блога, сообщения форума или публикации из раздела материалов сайта – нашей базы знаний. Чем не повод сломать себе голову этой задачкой еще до смены дизайна?

В результате все же было принято решение активировать модуль новостей и прописать в нем то, что следует вывести на слайдер. Кстати, все это было сделано еще 30 декабря, не заметно для посетителей сайта: одна из внутренних операций “переналадки” дизайна сайта, была превращена во внешнюю операцию путем активации дополнительного модуля. Кроме активации модуля, был создан и прописан (настроен) информер для корректного подтягивания информации в слайдер на главной странице. Эта операция также была выполнена задолго до самой переналадки, а результат валидирован параллельно на пустом сайте. Как только произойдёт замена шаблона, слайдер заработает в штатном режиме.

Voilà! Никаких дополнительных усилий. Хотя остается еще ряд операций, которые потребуется выполнить во время смены дизайна, но об этом уже в следующей заметке…


UPD 06.01.2014: Шаг 4

Вот уже четвертый день подряд я продолжаю рассказывать о том, как был применен подход Сигео Синго – Single Minute Exchange of Dies (англ. Быстрая замена штампов) – к процессу смены дизайна сайта. Пока все свидетельствует о том, что SMED, который изначально был разработан для сокращения переналадки в производственных процессах, может быть применен и перед монитором компьютера. Посмотрим, что будет дальше…

Шаг 4: сократить длительность и оптимизировать последовательность “внутренних” операций переналадки.

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

Раз процесс столь критичен, следует разработать для него инструкцию и держать ее под рукой во время переналадки. В случае смены дизайна сайта инструкция была разработана автором шаблона. Остается дописать в ней некоторые элементы “под себя”, отметить те участки, в которых процесс был изменен, учитывая специфику сайта, и создать в документе разделы для удобной навигации:

Мелочь, а время экономит.

Было бы неплохо сделать еще чек-лист. Я посчитал, что указаний в инструкции и стикеров, которыми я обклеил свой ноутбук, мне хватит. Для операций внутренней переналадки в принципе хватило, а вот для переналадки в целом… Во время некоторых операций внешней переналадки возникли проблемы, но об этом я расскажу в следующей заметке – на последнем шаге SMED…


UPD 07.01.2014: Шаг 5

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

Как я писал ранее, наш сайт обрел новый вид в новогоднюю ночь. Применение SMED позволило осуществить все операции в два счета даже после хороводов вокруг ёлки и некоторого количества коньяка. В результате максимум, что мог ощутить посетитель, – это 10 минут странного отображения сайта. Для сравнения: примерно столько же времени требуется серверу, чтобы выполнить полный бэкап данных. Мне приятно, что в новогоднюю ночь наш сайт оказался полезным для 5 людей, но хотел бы принести им свои извинения за возможные неудобства.

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

Что там дальше по курсу?

Шаг 5: сократить длительность и оптимизировать последовательность “внешних” операций переналадки.

К моей величайшей радости, полная смена дизайна сайта проводится не так часто. Где-то мне встречалась рекомендация проводить это мероприятие не чаще, чем раз в 2 года. Мне предновогодних приключений на 2 года уж точно хватило.

Можно было бы заключить, что этот шаг не применим для такого процесса, как изменение дизайна сайта, однако это не так. Во время переналадки я выписал очень много важных моментов на стикеры, сделал пометки в инструкции, но все же допустил две оплошности. Практически весь первый день года в коде сайта отсутствовал оператор, позволяющий хостингу собирать статистику посещений. Кроме того, из-за различий в браузерах я не сразу обнаружил проблему с выводом материалов через информеры. В результате весь световой день посетители сайта, использующие IE и Chrome, могли наблюдать пустые области, предназначенные для изображений слева от заметок блога и тренинг-уроков. В настоящий момент эта проблема исправлена, однако такие моменты все же следует вынести в чек-лист и валидировать в различных браузерах еще до непосредственной переналадки.

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

Все замечания и мнения по поводу нового дизайна и SMED отлично будут смотреться в поле комментариев ниже. Милости прошу: ругайте и хвалите вдоволь. Нам с вами тут, смею надеяться, еще не одну синюю лошадь встречать ;-)

Лин6Сигм / 03.01.2014 | Просмотров: 1884 | Добавил: dmagic | Всего комментариев: 0 / Теги: бережливое производство, обновления, SMED
ПОХОЖИЕ МАТЕРИАЛЫ


  Добавить комментарий
avatar
SixSigmaOnline.ru © 2009-2020            Хостинг от uWeb