topleft topright
211.png
Про новую панель комментариев
Автор Administrator   
05.04.2012 г.

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

На днях пришла мысль подключить виджеты комментариев от популярных социальных сетей к сайту. В интернете очень даже популярно, многие сайты подключили себе и горя не знают. Прогресс неумолим! А что, очень даже удобно - эдакая единая авторизация личности по всей сети. Многие компании задумывались об этом и раньше, тот же Google объединяет свои сервисы, Ucoz использует общую авторизацию, OpenId опять же. Но соц. сервисы переплюнули все - ну, на данный момент.  Для этого даже опрос подвесил - посмотреть, какая популярнее, что подключать. То есть дело решенное.



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

Первая мысль, которая приходит в голову: искать готовые плагины/модули для системы управления сайтом. У нас это Joomla, если кто следит - популярная open-source CMS. Не стоит удивляться - модули, отчасти реализующие задуманное, для неё были. Не такие, как вы видите у нас сейчас, нет - без изысков, без выбора из многих,  многое бы пришлось допиливать, но были. Были, но для актуальной её версии - сейчас это линейка 2.5. И даже можно было найти под линейку версий 1.7 и, если мучится и взять напильник, то  и 1.5. Тут надо сказать пару слов о Joomlе - чем она прославилась для сообшества, так это злой обратной несовместимостью с прошлыми версиями. Администраторы веб-сайтов её не обновляют, нажав на кнопочку - "установить обновление". Ведь хороший сайт - это сложный системный продукт, с множеством установленных дополнений, исправлений, модулей и вручную дописанного кода - смена ядра для него подобно небольшой ядерной бомбе. На самом деле это общая проблема большого количества софта - тот же Linux, тот же PHP пятой версии. Поверьте легче написать новый сайт с нуля, чем переносить старый - проверено и взято за аксиому людьми причастными. Итак, вариант с модулями отметался. Хотя я пробовал установить парочку, и даже нашел один, который система приняла - но функционал был ужасен. Нет, вариант с модулями для CMS - к черту.

Второй шаг - выпиливание кода вручную. Виджеты для комментариев и вКонтакте и Facebook предлагают установить всем желающим, а все желающие в принципе этим пользуются - нетрудно подключить и скопировать скрипты для любого сайта. Например перед блоком вашей системы комментариев. Это беда, серьезно. Даже сайты ориентированные как учебники по веб-дизайну лепят по нескольку систем комментариев в одну страницу, одну под другой! Вот к примеру, первый попавшийся (хорошая статья, по которой я делал кнопку для иконки конклава с круглыми углами). И я так тоже сделал в первый свой вариант кода. А таких сайтов тысячи. Да, это функционал. Но вспомним, для нас цель помимо этого - выбор, совместимость, красота. Для всего этого нужно чуть больше усилий. Компонент не должен выглядеть как свалка.

Итак, виджеты соц. сетей были зарегестрированы, привязаны к conclave-guild и значит функционал есть. Теперь нужен выбор из нескольких систем комментариев - то есть нужна какая-то реализация работы со вкладками в отдельном блоке. Снова поиск - и выбор вариантов. Вариантов не так много, лучший и простой по моему мнению был с использованием библиотеки jquery (по поиску найдете в первой странице выдачи). Она уже и так была подключена к сайту, осталось только обновить и переписать скрипты. Как всегда, на этапе адаптации обязательно встанет проблема - здесь была проблема с определением классов в CSS для наших блоков - они упорно не желали быть видимыми при переключении вкладок. Нужно было срочно заняться самообразованием в этом вопросе, начинать курить и вспоминать CSS - деваться некуда. Вышло удачно - помимо получения рабочего варианта, узнал как сделать с помощью таблиц стилей округлые края у вкладок с названием соц. сетей (совет - см. border-radius).

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

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



Оптимизация и кроссбраузерность. Созданный код нужно было оптимизировать, объявление скриптов подключить к главной странице, убрать табличную разметку, где она была, и сделать верстку div'ами, таблицы стилей перенести в один файл, убрать хтмл-мусор. На этом - финиш, подумал я - всё же работает и работает хорошо. Но на следующий день всплыла проблема кроссбраузерности - в Chrome иконки на вкладках упорно полезли вниз, чего им никак не позволял уважаемый мной Firefox. Снова в google - оказывается распространённая проблема тега вертикального выравнивания и способы её решения варьировались от крайне диких в выравнивании по таблице, до изящных - одной строкой CSS, что и было выходом. Заработало.

Итог: потрачено два вечера, один на чтение нужной документации и реализацию; другой на оптимизацию и исправление созданного. Результат: в теле этой новости, просьба оценить и протестировать на всех браузерах, операционных системах - как всё работает, не сбита ли верстка, удобно ли. Спасибо за внимание.

  • вКонтакте
  • Facebook
  • Conclave


Комментарии (0)add comment

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

busy
 
След. »
No Flash!
Разработка и поддержка сайта - студия веб-дизайна [ m.ART ]
Joomla Templates by JoomlaShack Joomla Templates