Зачастую иконка у любого сервиса или приложения генерируется из логотипа. Это может быть его упрощенная версия, или просто основной символ.

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

Десять лет назад было достаточно лишь favicon.ico — файла в корне вашего сайта, который являлся его иконкой, которая отображалась в случае если добавлялась закладка в браузере. С выходом на рынок мобильных устройств изменился принцип разработки сайтов, и это затронуло также иконки сайта.

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

• для IOS (для закладки и для экрана «Домой»);
• для Windows;
• для Android;

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

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

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

Что такое защита контента сайта

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

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

Отключение контекстного меню и блокировка выделения текста обладают следующими недостатками:

1. реализованы на JavaScript — отключите JS в браузере и вы сможете пользоваться контекстным меню и выделять текст;
2. код страницы все-равно доступен — горячие клавиши Ctrl+Shift+J в Chrome открывает консоль JS, где вы можете перейти на вкладку «Elements» и легко скопировать текст/сохранить изображение;
3. страницу можно сохранить к себе на компьютер со всем ее текстом и картинками Ctrl+S в помощь.

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

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

• запрет доступа — доступ к информации полностью закрыт для сторонних пользователей;
• шифрование — информация находится в открытом доступе, но она зашифрована, например при помощи ключа;
• частичный доступ — пользователи могут ознакомиться только с определенной частью информации.

(если какой-то пункт пропустил — пишите в комментариях)

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

Защита текста на сайте

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

В виду этого, поисковые системы Google и Яндекс пытаются решить проблему определения авторских прав и предлагают по два решения.

Быстрое добавление страниц

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

• Google Search Console;
• Яндекс.Вебмастер;

и вот как это выглядит:

Указание авторства для Google

Поисковая система Google также предлагает подтверждать авторство контента страниц при помощи специальных тегов:

• <meta name=»author» content=»Nikita Spivak«>
• <link rel=»author» href=»https://plus.google.com/u/0/+NikitaSp_ua«/>
• <link rel=»publisher» href=»https://plus.google.com/u/0/+NikitaSp_ua«/>

Бытует мнение что первый тег уже не актуален, но я пока продолжаю его использовать. Author-тег указывает на ссылку страницы автора в Google+, а publisher — это непосредственно страница самого издательства (бизнес-страница), в моем случае, это одна и та же страница.

Добавление оригинальных текстов в Яндекс

Обязательно добавьте свой ресурс в систему Яндекс.Вебмастер и подключите в разделе «Содержимое сайта» сервис «Оригинальные тексты».

Кросспостинг как метод защиты текста

Кросспостинг — умышленное автоматическое, полуавтоматическое или ручное помещение одной и той же статьи, ссылки или темы, в форумы, блоги, либо иной формы сайты или публичные переписки, в том числе и в режиме онлайнового общения (подробнее на Вики).

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

Защита изображений на сайте

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

• некоторые типы водяных знаков можно безболезненно удалить;
• при наложении водяных знаков сохраняется доступность оригиналов;

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

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

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

Например в CMS OpenCart изображения хранятся в корневой папке image, которая содержит два каталога:

• cache;
• data.

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

http://example.com/image/cache/data/catalog/product-300×800.jpg

и обратиться по адресу:

http://example.com/image/data/catalog/product.jpg

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

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

Однако насколько сложно удалить водяной знак с картинки, как защитить свои изображения так, чтобы нельзя было ими пользоваться на других сайтах и в то же время не скрыть самого главного?

Чтобы понять, как создать сложный водяной знак необходимо понять насколько легко удалить водяной знак с изображения. Для этого нам потребуется редактор изображений (Adobe Photoshop, например) и несколько изображений примеров.

Как удалить водяной знак с изображения

Удаление водяного знака с изображения может быть реализовано несколькими способами:

• обрезка изображения;
• с помощью инструментов «Восстанавливающая кисть» (Healing Brush/J) или «Штамп» (Stamp/S);
• с помощью заливки и инструмента «Волшебная палочка» (Magic Wand/W).

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

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

Инструкция по удалению простых водяных знаков

Данная инструкция представлена исключительно в ознакомительных целях и для проверки личных водяных знаков! Не воруйте чужие изображения!

1. Открыть изображение.
2. Выбрать инструмент «Волшебная палочка», установить значение опции «Допуск» в ~50, снять галочку с опции «Смежные пиксели».
3. Если выделяется очень много лишних областей, то поставить галочку на опции «Смежные пиксели», поиграться с опцией «Допуск» (уменьшить значение) и выделять области с зажатой клавишей «Shift».
4. После выделения необходимо увеличить размер выделенной области на 1 пиксель. Для этого необходимо перейти в пункт меню «Выделение» -> «Модификация» -> «Расширить».
5. Установить значение в 1 или более пикселей, в зависимости от желаемого результата.
6. Выполнить заливку выделенной области. Для этого перейти в пункт «Редактирование» -> «Выполнить заливку» или нажать на клавиатуре Shift+F5.
7. Выбрать в открывшемся окне для опции «Использовать» значение «С учетом содержимого» и нажать «Ок».
8. Убрать выделение.

Как подобрать водяной знак на изображение

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

Вот некоторые из рекомендаций по созданию водяного знака:

• размер и положение:
  • покрывает все изображение;
  • изображение замощено водяным знаком;
  • водяной знак расположен в центре изображения;
• водяной знак содержит:
  • сложные элементы (завитушки, пропись);
  • линии через все изображение;
• оформление:
  • используйте разный цвет;
  • разный размер шрифта;
• не скрывает сути картинки.

Также можно посмотреть примеры хороших водяных знаков на фотобанках, где дизайнеры и фотографы продают свои труды. Вот пример хорошего водяного знака:

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

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

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

Почему это важно для заказчика

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

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

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

Кто-то скажет, что все предельно просто, и для проверки качества работы сайта достаточно лишь зайти на него и «поклацать кнопочки», однако я спешу вас разочаровать, и предлагаю ознакомиться с моими предыдущими статьями на тему качества в разработке сайтов:

• Как не стоит создавать сайты;
• Как проверить адаптивный дизайн сайта.

Таким образом, студии и фрилансеры имеют возможность создавать некачественный продукт и зарабатывать на этом деньги. Ввиду специфики моего общения, для разъяснения некоторых моментов я люблю использовать аналогии, и о создании сайта можно говорить как о построении дома. Если строители были нечестны на руку, то и дом простоит не долго, достраивать к нему что-либо будет трудоемко или вообще не возможно, и вешать на стены шкафы тоже не получится — упадут.

Естественно и очевидно, что каждая студия/посредник(и) старается максимально удешевить производство продукта, в нашем случае создание сайта, и единственный способ это сделать — отдать проект на разработку менее опытному и менее профессиональному разработчику. Таким образом, на выходе можем получить не совсем качественный сайт.

Как получить качественный сайт

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

В первую очередь хочется сразу обратить внимание на ценообразование, и если ваш сайт стоит как «ящик водки», то и результат будет соответственным. И дело не в «расходниках» и «себестоимости продукта», а в банальном интересе к проекту. Ведь если человек заинтересован в проекте, он занимается им с придыханием, то и результат будет соответственный. Более того, разработчик может предложить какие-то идеи, пришедшие ему в ходе разработки, по улучшению вашего сайта.

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

Безусловно, «Клиент всегда прав», и имеет право на любые капризы, НО! Во-первых, всему есть границы, во-вторых, задача профессионального исполнителя уберечь заказчика от подобных вещей.

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

Следуя этим простым советам вы можете получить качественный сайт. Ну а если вы уже имеете сайт, то его всегда можно изменить/переделать ;). Если у вас возникли вопросы или предложения по теме данной статьи, можете присылать их на почту через форму обратной связи или написать свое мнение в комментариях.

Как правило, сайты с несколькими яыками — это крупные порталы или небольшие сайты-визитки, направленные на представление информации пользователям нескольких стран. Создание нескольких языковых версий для сайтов местного масштаба (городского, областного, масштаба страны) является абсолютно не обоснованной затратой средств и времени.

Сегодня мы рассмотрим один из вариантов создания мультиязычного сайта при помощи JavaScript библиотеки l20n. Данная библиотека позволяет создать мультиязычный сайт используя всего несколько файлов для локализации и собственно саму библиотеку.

Как локализовать сайт с помощью JavaScript

Для локлизации сайта с помощью JavaScript можно использовать библиотеку l20n. Структура файлов данного фреймворка достаточно проста: файл, который необходимо локализовать с подключенным файлом скрипта l20n.js и папка с локализациями. Данный фреймворк от компании Mozilla распространяется бесплатно, и вы можете с ним ознакомится по ссылке http://l20n.org/.

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

Интегрировать скрипт в вашу страничку достаточно просто:

1. скачайте библиотеку по ссылке выше;
2. подключите его в файле, который необходимо локализовать;
3. разметьте соответствующим образом файл, который необходимо локализовать;
4. создайте файлы локализации.

Вы можете скачать простой пример локализации странички при помощи фреймворка l20n от Mozilla для трех языков: английский, русский, французский. Данный пример покажет вам наглядно как работает данная библиотека. Внимание: вам необходимо запускать демо на сервере/локальном сервере — при обычном открытии файла index.html браузер выдаст ошибку: XMLHttpRequest cannot load file:///YOUR_PATH/www/locales/browser.json. Cross origin requests are only supported for protocol schemes: http, data, chrome, chrome-extension, https, chrome-extension-resource.

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

Положительные и негативные стороны локализации JavaScript

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

Однако, присутствуют и негативные стороны использования JavaScript как средства для локализации вашего сайта, такие как:

1. По умолчанию, разработчики l20n предлагают оставлять теги для подстановки локализованных строк пустыми, что чревато понижением в поисковой выдаче, т.к. робот не видит текста на вашем сайте, т.к. поисковый робот парсит вашу страницу без JavaScript! Этот огромный недостаток можно с легкостью исправить, просто заполнив теги предпочтительным, преобладающим языком на вашем сайте, как это сделано в примере.
2. Поисковая система не сможет проиндексировать разные версии сайта, и будет видеть только одну версию — версию, которую вы указали в предыдущем пункте. Если реализовать локализацию на php, то можно создать для поисковой системы отдельные каталоги с разными локализациями.
3. На мой взгляд такая реализация мультиязычности не подойдет для больших порталов и крупных сайтов, т.к. она достаточно проста и не функциональна. Необходимо будет прописывать текст для каждой странички отдельно, т.е. такая конструкция позволительна исключительно для сайтов, состоящих из нескольких страниц.

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

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

Если раньше для поддержки мобильных устройств владельцам сайтов предлагалось разработать отдельный проект для мобильных устройств, например на поддомене m.example.com, то сегодня все решается благодаря адаптивной верстке, использование которой стало возможно, с внедрением media query (rules) в CSS3.

Данные медиа запросы/правила — это определенный набор стилей, которые написаны специально под мобильное устройство, имеющее определенный размер (разрешение) экрана. Принцип правил следующий: если устройство имеет размер экрана, подходящее под описанные верстальщиком условия, то применяются соответствующие символы.

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

Как же все таки проверить сайт на наличие адаптивной верстки? Все проще чем кажется: достаточно просто изменить размер окна бразуера и проверить как сайт себя поведет. Пример адаптивной верстки вы изображен на анимированном рисунке ниже (для просмотра кликните по изображению).

Как вы можете заметить, сайт подстраивается под любой размер экрана, и минимальной шириной, которую обычно поддерживают устройства — 320 пикселей. Однако, как показывает мой опыт, нередко можно встретить сайт, который подстроен под мобильные устройства, однако при изменении размера окна он не адаптируется до тех пор, пока размер окна не станет размером менее чем размер окна мобильного устройства.

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

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

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

Следующий пример «адаптивности» — сайт вроде адаптивный, но скрол есть, текст вылазит, элементы залазят друг на друга, образуя такую себе кашу (для просмотра кликните по изображению).

Почему нельзя проработать адаптивность для всех размеров? Почему только мобильные, совсем маленькие устройства? (для просмотра кликните по изображению)

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

В ввиду данных обстоятельств, хочу представить вам свеженький плагин для jQuery — Selection Slider, который позволит вам создать слайдшоу, состоящее из нескольких частей и настроить каждую часть отдельно!

Слайдшоу обладает стандартным набором входных параметров:

• время задержки;
• время анимации;
• автопроигрывание;
• пауза при наведении на селектор.

Основной особенностью слайдшоу является безлимитное количество частей (селекторов), которые вы можете создать в рамках одного слайдера. Каждый селектор может быть настроен отдельно, используя параметры «data-название_опции».

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

Если у вас есть предложения и пожелания по улучшению данного плагина — пишите в комментариях, или воспользуйтесь формой обратной связи в разделе «Контакты».

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

Посмотреть jQuery плагин Selection Slider: Demo livepage

Скачать jQuery плагин Selection Slider: selectionSlider

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

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

Методы реализации мультиязычности

Из основных методов создания мультиязычных сайтов выделяют три основных метода:

• создание сайтов на разных доменных именах (site.en, site.ru, site.ua);
• создание сайтов на поддоменах (en.site.com, ru.site.com, ua.site.com);
• создание сайтов в категориях/папках (site.com/en, site.com/ua, site.com/ru).

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

• разные адреса у категорий/страниц (в рамках одного сайта) — т.е. в административной части у вас присутствуют страница/категория каждого языка;
• параметр в адресе, который задает язык для страницы (в рамках одного сайта) — т.е. в административной части присутствуют страницы/категории, для которых есть возможность указать значения полей для разных языков, что является более правильным, нежели пред. вариант, на мой взгляд;
• физические каталоги (в рамках нескольких сайтов) — т.е. создаются папки на сервере и копируется сайт в данные каталоги и каждый из сайтов является независимым.

Вариант создания физических каталогов, может иметь место, в случае если создается простая html-страничка, или же сайт, состоящий из 1-5 страниц без функционала. Однако сегодня, учитывая рост количества интернет-проектов, большее предпочтение отдается полнофункциональным сайтам с административной панелью.

Таким образом, лучшей реализацией мультиязычности, в рамках выбранного метода, является вариант параметра в адресе. Однако, с точки зрения SEO оптимизации «метод категорий» является не самым лучшим, т.к. все версии сайта находятся на одном домене — один ресурс.

Создание языковых версий на поддоменах сайта может быть реализован также двумя способами:

• настройка сервера на обработку поддомена, как языкового параметра (в рамках одного сайта) — т.е. также, как и в «методе категорий», в административной части присутствуют страницы с полями для разных языков;
• копирование сайта в физические папки поддоменов (в рамках нескольких сайтов) — в данном случае каждый сайт является отдельным и независимым друг от друга.

Как вы уже, наверное, догадались, самым удобным вариантом для клиента, и самым правильным является первый вариант — настройка сервера. Однако, опять таки, все зависит от размера проекта и объемов страниц. По финансовым затратам данный метод ничем не отличается от предыдущего.

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

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

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

Вывод

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

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

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

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

Данной статьей я не хочу обидеть ни одного разработчика и не принижать достоинство ни одного из ресурсов. Целью данной статьи является предостережение начинающих разработчиков от распространенных ошибок и «костылей», а также статья несет развлекательный характер.

Создание сайтов: логика или творчество?

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

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

Зачастую клиент не всегда знает чего он хочет, не всегда знает как лучше, ведь разработчик — это вы, вы специалист своего дела, и именно вы должны обосновано предлагать те или иные решения. И я сейчас говорю именно об обоснованных решениях, т.к. некоторые разработчики не хотят или не могут, в силу своей компетентности, решить ту или иную задачу, и убеждают клиента что надо делать так потому что «потому».

Создание сайтов: иди тренируйся на кошках

Естественно специалистами не рождаются — ими становятся. Так и с разработкой сайтов — естественно с первого проекта не приходит понимание и умение правильно создавать сайт. Многие пошли в эту сферу потому что это кажется легким заработком, кому-то это нравится, а кто-то всегда мечтал стать IT-шником.

«Совершенству нет предела», как гласит небезызвестная поговорка, и к практически любому продукту можно придраться, если захотеть. Ваша цель — уменьшить количество «слабых» мест вашего сайта. Конечно выучить эти места сразу сложно, и для этого потребуется время и опыт, однако оно того стоит.

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

Создание сайтов: советы начинающим

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

Из распространенных ошибок, которые встречаются в верстке сайтов — это позиционирование элементов с float. Точнее отображение элементов, которые следуют за элементами, у которых указан float left или right. Старайтесь максимально правильно и точно верстать вашу страницу.

Используйте всевозможные селекторы, слава Богу в век CSS3 есть возможность выбрать все что угодно, дабы упростить верстку и облегчить страничку для загрузки. По возможности, не используйте рисунки для создания рамок, теней, скошенных углов и т.п. ведь есть CSS!

Например для реализации следующего меню можно было использовать либо селектор li + li, и указать border-left, или указать всем элементам li border-right, а последнему через li:last-child задать border-right:0. Не ищите сложных путей, все ведь уже за вас придумано, вы только поищите!

Если вы в своем проекте используете Javascript, то вы можете использовать консоль браузера для отлова ошибок. У вас что-то не работает? Что-то не так работает? Проверьте консоль! Javascript обрабатывается в браузере, и поэтому вы всегда можете отловить все ошибки в коде при помощи консоли. Устраните их, зачем их плодить?

Если вы разрабатываете продукт, основанный на какой-то платформе, в частности для сайтов — это CMS, то придерживайтесь той же структуры, которую задали разработчики платформы! Не нужно плодить папки и кидать файлы куда попало. Ведь пройдет некоторое время и следующий разработчик, или даже вы сами, спустя некоторое время ничего не поймете и не сможете найти как была реализована та или иная функция!

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

Увидев что едет верстка на одной странице на сайте, который дали мне подправить, я обнаружил через инспектор элементов что структура блоков общих несколько изменилась, и я понял что предыдущий разработчик так яростно комментировал строки, что аж сам запутался в своих блоках (div). А вы найдете незакрытый div?

Ведь во многие популярные редакторы текста встроены функции сворачивания блоков/функций, подсветка и многое другое! Пользуйтесь этими функциями чтобы себя лишний раз перепроверить.

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

Как вы думаете что делает эта функция? Да, она должна возвращать массив сопутствующих/похожих товаров. Но для этого нужно же указать связь! И потом по этому параметру и найти эти продукты, а что мы видим? Функция выбирает все товары из этой же категории, которые были просто позже добавлены.

Возможно это и было бы простое решение, если бы товары добавлялись строго по порядку, и после добавления не добавлялись бы еще товары, однако и тут нам автор сего шедевра не дает повода усомниться в своей гениальности — он во втором запросе выбирает все товары которые были добавлены раньше! Таким образом наш «специалист» выбирает все товары из данной категории.

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

От скуки я решил поискать что-то оригинальное в одном из интернет магазинов, и о чудо! Все товары почти подходят под мой запрос! И опять таки верстка.

Конечно, как написано выше, совершенству нет предела, и даже крупные корпорации, такие как Microsoft, умудряются выпускать не совсем качественный продукт, и вот что я увидел после обновления Skype, которое по идее должно исправлять ошибки и повышать производительность:

Вывод

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

Развивайте свои навыки и профессионализм, «тренируйтесь на кошках», и ваши сайты будут качественными и красивыми, чтобы вас советовали, и чтобы хотели получить продукт именно от вас и вашей команды! Удачной разработки!

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

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

Из возможных настроек присутствуют:

• выбор количества уровней (от 1 до 3 уровней категорий);
• вид меню (горизонтальное/вертикальное);
• включить/выключить отображение количества товаров для каждого уровня отдельно;
• включить/выключить отображение изображений для каждого уровня отдельно;

Одной из ключевых особенностей, которые отличают этот модуль от стандартного меню Opencart, кроме наличия всевозможных настроек, является кеширование количества товаров в категории, тем самым снижая нагрузку на базу данных, и сайт загружается намного быстрее!

Как всегда, для ознакомления с интерфейсом модуля представляю вашему вниманию скриншоты тестового магазина:

В архиве стандартная комплектация моих модулей: скриншоты англ. и рус. версии, файлы README англ. и рус. версии, файлы для загрузки на сервер. При загрузке ни один файл не будет перезаписан.

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

Спасибо за доверие, не забываем подписываться и ставить +1, ведь именно благодаря ВАШИМ “лайкам” я вижу что работа не напрасна, а комментарии дают вдохновение на сотворение новых модулей и модификацию имеющихся!

Также буду рад услышать ваши комментарии относительно данного и иных моих модулей, а также предложения по их улучшению, и идеи для написания новых модулей!

Скачать Category_Menu для Opencart: nikita_sp-category_menu