-
Публикаций
1099 -
Зарегистрирован
-
Посещение
-
Победитель дней
51 -
Отзывы
100%
Тип контента
Профили
Форумы
Загрузки
Магазин
Инструкции
Весь контент L2Banners
-
View this tutorial Кастомный виджет googleTranslate для сайта Меня часто просят сделать на сайте гугл переводчик и в качестве примера ставят выбор языка "Как у Rampage". Выглядит он вот так: Я сразу же заметил ряд недостатков в скрипте рампейджа и вообще в методе который был взят за его основу, поэтому при первой же возможности занялся написанием своего решения. Прочитав документацию и покопавшись в сети, я увидел, что многие вопросы связанные с кастомизацией остаются без ответов, в лучшем случае предлагаются решения похожие на скрипт рампейджа, но более упрощенные. Так уж сложилось, что я как раз искал тему для моей первой статьи на habr.com и судя по всему с темой я не прогадал. Статью практически сразу опубликовали и я получил полноправный аккаунт. Эта тема будет полезна всем верстальщикам и фронтенд разработчикам форума поэтому я размещаю её здесь. Перед тем как преступить к написанию данной статьи, я решил посетить страницу где генерируется Google Translate Widget, чтобы узнать о возможных изменениях и увидел данное сообщение: Не сложно догадаться какой браузер имеет ввиду Google, но речь не об этом. Самое главное, что плагин все также остается рабочим и мы можем им пользоваться. Кроме того, за неимением возможности генерировать виджет, данная тема становиться еще более актуальной, ведь потребность в машинном переводе никуда не исчезла, а Google Translate, на мой взгляд, один из самых мощных инструментов для этого. Как будет выглядеть наш пример: Для корректной работы нашего кастомного виджета необходимо подключить файлы: <link rel="stylesheet" href="css/style.css"> <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-cookie/1.4.1/jquery.cookie.min.js"></script> <script src="js/google-translate.js"></script> <script src="//translate.google.com/translate_a/element.js?cb=TranslateInit"></script> Содержимое style.css: body { margin: 0; padding: 0; } .page { display: flex; min-height: 100vh; } /* Фиксируем позицию body, которую меняет панель гугла*/ .page_fix { top: 0 !important; position: static !important; } /* Прячем панель гугла */ .skiptranslate { display: none !important; } /* language */ .language { position: fixed; left: 10px; top: 50%; transform: translateY(-50%); display: flex; flex-direction: column; } .language__img { margin: 2px; cursor: pointer; opacity: .5; } .language__img:hover, .language__img_active { opacity: 1; } /* content */ .content { text-align: center; margin: auto; } Используемые флаги: Разметка кастомного виджета: <div class="language"> <img src="images/lang/lang__ru.png" alt="ru" data-google-lang="ru" class="language__img"> <img src="images/lang/lang__en.png" alt="en" data-google-lang="en" class="language__img"> <img src="images/lang/lang__de.png" alt="de" data-google-lang="de" class="language__img"> <img src="images/lang/lang__fr.png" alt="fr" data-google-lang="fr" class="language__img"> <img src="images/lang/lang__pt.png" alt="pt" data-google-lang="pt" class="language__img"> </div> Содержимое google-translate.js: const googleTranslateConfig = { lang: "ru", }; function TranslateInit() { let code = TranslateGetCode(); // Находим флаг с выбранным языком для перевода и добавляем к нему активный класс $('[data-google-lang="' + code + '"]').addClass('language__img_active'); if (code == googleTranslateConfig.lang) { // Если язык по умолчанию, совпадает с языком на который переводим // То очищаем куки TranslateClearCookie(); } // Инициализируем виджет с языком по умолчанию new google.translate.TranslateElement({ pageLanguage: googleTranslateConfig.lang, }); // Вешаем событие клик на флаги $('[data-google-lang]').click(function () { TranslateSetCookie($(this).attr("data-google-lang")) // Перезагружаем страницу window.location.reload(); }); } function TranslateGetCode() { // Если куки нет, то передаем дефолтный язык let lang = ($.cookie('googtrans') != undefined && $.cookie('googtrans') != "null") ? $.cookie('googtrans') : googleTranslateConfig.lang; return lang.substr(-2); } function TranslateClearCookie() { $.cookie('googtrans', null); $.cookie("googtrans", null, { domain: "." + document.domain, }); } function TranslateSetCookie(code) { // Записываем куки /язык_который_переводим/язык_на_который_переводим $.cookie('googtrans', "/auto/" + code); $.cookie("googtrans", "/auto/" + code, { domain: "." + document.domain, }); } При смене языка добавляется куки с ключом googtrans и значением вида /ru/en /ru — это язык который переводим /en — это язык на который переводим Это стандартное поведение, поэтому я им и воспользовался для кастомизации виджета. Кликая по флажкам необходимых языков, из атрибута data-google-lang в куки записываются соответствующие значение вида /auto/выбранный_язык. Затем происходит перезагрузка и auto заменяется на язык записанный отдельно в конфиг: const googleTranslateConfig = { lang: "ru", }; Это сделано для того, чтобы мы не привязывались к одному языку. Если к примеру сайт переведен на 2 языка, русский и английски, то мы можем передать текущий язык в конфиг и правильно обработать его. Все доступные языки и их код стандарта ISO-639-1 можно найти тут. Функции добавления и очисти куки я вынес отдельно, чтобы была возможность провести дополнительные проверки и вызвать в других местах. Важный момент, куки необходимо менять для основного домена и всех поддоменов. Теперь, имея контроль над нашим виджетом, мы можем без проблем реализовывать более сложные дизайны: Репозиторий с проектом на GitHub Cсылка на оригинал статьи Author L2Banners Category Инструкции Отправлено 02/04/19 02:29
-
Меня часто просят сделать на сайте гугл переводчик и в качестве примера ставят выбор языка "Как у Rampage". Выглядит он вот так: Я сразу же заметил ряд недостатков в скрипте рампейджа и вообще в методе который был взят за его основу, поэтому при первой же возможности занялся написанием своего решения. Прочитав документацию и покопавшись в сети, я увидел, что многие вопросы связанные с кастомизацией остаются без ответов, в лучшем случае предлагаются решения похожие на скрипт рампейджа, но более упрощенные. Так уж сложилось, что я как раз искал тему для моей первой статьи на habr.com и судя по всему с темой я не прогадал. Статью практически сразу опубликовали и я получил полноправный аккаунт. Эта тема будет полезна всем верстальщикам и фронтенд разработчикам форума поэтому я размещаю её здесь. Перед тем как преступить к написанию данной статьи, я решил посетить страницу где генерируется Google Translate Widget, чтобы узнать о возможных изменениях и увидел данное сообщение: Получить доступ к переводчику сайтов больше нельзя. Это никак не отразится на тех, кто уже установил соответствующий плагин. Советуем пользователям переводить веб-страницы с помощью браузеров, имеющих встроенную функцию перевода. Не сложно догадаться какой браузер имеет ввиду Google, но речь не об этом. Самое главное, что плагин все также остается рабочим и мы можем им пользоваться. Кроме того, за неимением возможности генерировать виджет, данная тема становиться еще более актуальной, ведь потребность в машинном переводе никуда не исчезла, а Google Translate, на мой взгляд, один из самых мощных инструментов для этого. Как будет выглядеть наш пример: Для корректной работы нашего кастомного виджета необходимо подключить файлы: <link rel="stylesheet" href="css/style.css"> <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-cookie/1.4.1/jquery.cookie.min.js"></script> <script src="js/google-translate.js"></script> <script src="//translate.google.com/translate_a/element.js?cb=TranslateInit"></script> Содержимое style.css: body { margin: 0; padding: 0; } .page { display: flex; min-height: 100vh; } /* Фиксируем позицию body, которую меняет панель гугла*/ .page_fix { top: 0 !important; position: static !important; } /* Прячем панель гугла */ .skiptranslate { display: none !important; } /* language */ .language { position: fixed; left: 10px; top: 50%; transform: translateY(-50%); display: flex; flex-direction: column; } .language__img { margin: 2px; cursor: pointer; opacity: .5; } .language__img:hover, .language__img_active { opacity: 1; } /* content */ .content { text-align: center; margin: auto; } Используемые флаги: Разметка кастомного виджета: <div class="language"> <img src="images/lang/lang__ru.png" alt="ru" data-google-lang="ru" class="language__img"> <img src="images/lang/lang__en.png" alt="en" data-google-lang="en" class="language__img"> <img src="images/lang/lang__de.png" alt="de" data-google-lang="de" class="language__img"> <img src="images/lang/lang__fr.png" alt="fr" data-google-lang="fr" class="language__img"> <img src="images/lang/lang__pt.png" alt="pt" data-google-lang="pt" class="language__img"> </div> Содержимое google-translate.js: const googleTranslateConfig = { lang: "ru", }; function TranslateInit() { let code = TranslateGetCode(); // Находим флаг с выбранным языком для перевода и добавляем к нему активный класс $('[data-google-lang="' + code + '"]').addClass('language__img_active'); if (code == googleTranslateConfig.lang) { // Если язык по умолчанию, совпадает с языком на который переводим // То очищаем куки TranslateClearCookie(); } // Инициализируем виджет с языком по умолчанию new google.translate.TranslateElement({ pageLanguage: googleTranslateConfig.lang, }); // Вешаем событие клик на флаги $('[data-google-lang]').click(function () { TranslateSetCookie($(this).attr("data-google-lang")) // Перезагружаем страницу window.location.reload(); }); } function TranslateGetCode() { // Если куки нет, то передаем дефолтный язык let lang = ($.cookie('googtrans') != undefined && $.cookie('googtrans') != "null") ? $.cookie('googtrans') : googleTranslateConfig.lang; return lang.substr(-2); } function TranslateClearCookie() { $.cookie('googtrans', null); $.cookie("googtrans", null, { domain: "." + document.domain, }); } function TranslateSetCookie(code) { // Записываем куки /язык_который_переводим/язык_на_который_переводим $.cookie('googtrans', "/auto/" + code); $.cookie("googtrans", "/auto/" + code, { domain: "." + document.domain, }); } При смене языка добавляется куки с ключом googtrans и значением вида /ru/en /ru — это язык который переводим /en — это язык на который переводим Это стандартное поведение, поэтому я им и воспользовался для кастомизации виджета. Кликая по флажкам необходимых языков, из атрибута data-google-lang в куки записываются соответствующие значение вида /auto/выбранный_язык. Затем происходит перезагрузка и auto заменяется на язык записанный отдельно в конфиг: const googleTranslateConfig = { lang: "ru", }; Это сделано для того, чтобы мы не привязывались к одному языку. Если к примеру сайт переведен на 2 языка, русский и английски, то мы можем передать текущий язык в конфиг и правильно обработать его. Все доступные языки и их код стандарта ISO-639-1 можно найти тут. Функции добавления и очисти куки я вынес отдельно, чтобы была возможность провести дополнительные проверки и вызвать в других местах. Важный момент, куки необходимо менять для основного домена и всех поддоменов. Теперь, имея контроль над нашим виджетом, мы можем без проблем реализовывать более сложные дизайны: Репозиторий с проектом на GitHub Cсылка на оригинал статьи
-
К средине февраля выйдет вторая версия Best-Anons с обновленным шаблоном и множеством полезных функций. Так же возможна адаптация под ваш дизайн.
-
В адресной строке поменять step 7 на step 8 и нажать enter, пользователь может не создаться тогда при входе нужно без логина и пароля попробовать зайти. Еще как вариант другой бразуер попробовать ну и убедиться что версия пхп соответствует само собой.
-
Цена не менялась с ноября 2018, никому не понятно почему у вас так бомбит при упоминании группы
-
Обновлена информация по статистике: Охват в сутки в среднем 8000 Средняя посещаемость ~1200 уникальных посетителей в день на 8000 просмотров При среднем количестве уников в месяц более 23000 (около 5500 в неделю)
-
Среднестатистический российский хакер является молодым человеком в возрасте от 30 до 35 лет. При этом он не представляет собой компьютерного гения, рассказал официальный представитель Генпрокуратуры РФ Александр Куренной. «Вопреки расхожему мнению, это не гениальный хакер» , – рассказал Куренной на интернет-канале Генпрокуратуры «Эфир». По его словам, нередко кибермошенники даже не имеют технического образования. Взламывать чужие смартфоны и компьютеры им позволяют программы, которые они не пишут, а «каким-то образом получают». В настоящее время киберпреступления являются больше техническим видом преступности, чем интеллектуальным, рассказал представитель Генпрокуратуры. За 9 месяцев с начала 2018 года в России было совершено более 140 тысяч преступлений с использованием информационно-коммуникационных технологий. Из них удалось расследовать более 35 тысяч, подытожил спикер ведомства.
-
Сейчас читаю ECMAScript 6 для разработчиков очень познавательно, понравились достаточно понятные сравнения со старыми методами решения задач, короткие и лаконичные примеры. Подойдет тем кто уже не плохо знаком с js так как подача материала в сравнении и новичкам по сути не с чем сравнивать. Информацию вы конечно получите, но вряд ли осознаете в полной мере. Книга не большая, но подробная. Советую почитать.
-
В группе так же периодически появляется уникальный видео контент, который не дает подписчикам заскучать:
-
Лучший анонс по самой выгодной цене: https://best-anons.ru/ Имеется стандартный шаблон: https://best-anons.ru/ А так же 2 модификации: http://l2hop.best-anons.ru/ и http://l2oops.best-anons.ru/ Кроме того по вашему дизайну можно создать уникальный шаблон и функционал, пример: https://la2on.com/ А так же на данный момент уже протестирована на рабочем анонсе мультиязычность и может быть реализована в вашем проекте.
- 3 ответа
-
- 1
-
-
Один из стажеров Google во время обучения случайно нажал не на ту кнопку и разместил в интернете тестовую рекламу желтого прямоугольника, а после поместил ее на онлайн-аукцион по цене в десять раз выше нормы, сообщает газета Financial Times. По данным издания, Google обучал несколько стажеров пользоваться электронной системой размещения рекламы. Один из студентов по ошибке опубликовал в сети тестовую рекламу, а после этого разместил заказ на онлайн-аукционе, где установил цену за рекламу в $25 за каждую тысячу просмотров объявления, что в десять раз превышает нормальную стоимость. Ошибку заметили только через 45 минут, для онлайн-аукционов это «целая жизнь», пишет газета. За это время рекламу разместили у себя различные сайты и мобильные приложения. В результате Google понес убытки. Компания подтвердила изданию информацию об ошибке стажера, отказавшись назвать сумму ущерба. По данным газеты, ошибка обошлась Google примерно в $10 млн.
-
Хорошая идея! После НГ выйдет новая версия Best-Anons обязательно добавлю такую метку
-
Если на sw13 то вот: ,если на чем-то другом, то нужно уточнить на чем
-
Вся прелесть во внутренностях, они не рипаются.. ну а написать функционал заново, выйдет дороже чем купить готовое... Анонс уже обкатан и в скором времени выйдет новая версия с еще большим функционалом
-
Статистика с того времени увеличилась как минимум в 2 раза. Кроме того, узнайте какие цены в других группах и какой трафик, а потом меня упрекайте.
-
Обновлена информация по статистике и актуальной цене.
-
Я уже несколько раз объяснил, что ты собрал не всю информацию, чтобы делать такие выводы и тем более называть в данной ситуации кого-то обманщиками Я принимаю участие в жизни проекта и видя несправедливость готов вступиться за него. Я редко ввязываюсь в дискуссии и споры, но увы это не тот случай.
-
Это не мои проблемы, сеошники сами разберутся
-
С тобой все понятно. у тебя нет цели докопаться до правды. Там есть даты... Объясню немного, для тех кого ты хочешь ввести в заблуждение в первом посте: А теперь посмотрим на переходы по рекламе, на которых как бы есть дата: Что мы видим? Это реальные переходы по рекламе,и это только с одного ресурса. О какой накрутке речь? Статистика которую же предоставляешь ты, не имеет никакой информации, кроме поисковиков, а откуда взяться трафику из поиска, если сайт был запущен недавно? Ты просто играешь цифрами выставляя желаемое за действительное. И то что ты продолжаешь противоречить фактам говорит только о том, что твоя цель совсем другая. Ты сам себе портишь репутацию. В первую очередь я за истину. И по-моему тут уже все поняли, что ты не прав, кроме тебя.
-
Может потому что люди вносят свой вклад развитие проекта, а ты просто пытаешься обмануть всех скриншотом, который не отражает всей реальности. Тебе даже статистику предоставили по рекламе, которая вполне сопоставима со статистикой на сайте, а ты все равно ссылаешься на поисковики с левого сервиса..
-
Отличное обновление в вк: Иногда комментарии не менее важны и интересны, чем сама публикация. Именно в обсуждениях посоветуют, что посмотреть в новом городе, напишут ободряющие слова, помогут в борьбе с прокрастинацией, да и просто отменно пошутят. Сегодня мы делаем общение под записями ещё более увлекательным и комфортным — и добавляем ветки комментариев. Обсуждайте любые темы и легко контролируйте ход беседы. Теперь когда Вы отвечаете на комментарий, Ваш ответ появляется прямо под ним, создавая отдельную цепочку. Вы с лёгкостью сможете следить за развитием беседы, реагировать на отдельные реплики и не пропустите интересные мысли, получая уведомления о новых комментариях в той ветке, к которой присоединились. Если Вы занимаетесь творчеством или предоставляете техническую помощь, то можете с лёгкостью устраивать в комментариях сессии вопросов и ответов для поклонников и клиентов, как это делают Земфира, Жанна Бадоева, Virtus.pro, футболисты сборной России по футболу и другие. С ветками обсуждений делать это ещё удобнее. Все ответы в каждой цепочке будут отсортированы от старого к новому. Никаких неприятных сюрпризов: если удалят комментарий, с которого началась отдельная ветка, исчезнет только он, а вся дальнейшая беседа сохранится. Новый интерфейс комментариев уже доступен в веб-версии ВКонтакте и свежих версиях приложения для iOS и Android. Если Вы ещё не обновили приложение, то пока будете видеть все комментарии в прежнем виде. Вскоре новые возможности будут также доступны в мобильной версии ВКонтакте. Не стесняйтесь делиться мнением, оставляйте отзывы авторам об их творчестве и вдохновляйте других. Одним касанием ставьте отметки «Нравится» тем репликам, которые Вас впечатлили. Как и прежде, к любому своему комментарию Вы можете добавить фото, видео или музыку, внося разнообразие в обсуждения. Мы продолжаем улучшать сервисы, чтобы Ваше общение в пабликах и на личных страницах оставалось комфортным и организованным — с друзьями, коллегами и даже с незнакомыми людьми. К примеру, Вы обязательно заметите в ленте публикацию с оживлёнными обсуждениями — благодаря умным алгоритмам она поднимется выше других записей. Участвуйте в беседе, не покидая ленту и не отрываясь от чтения новостей. Нам важно, чтобы Вы всегда чувствовали себя уютно и в комментариях к своим публикациям. Мы предоставляем различные настройки приватности, чтобы Вы сами решали, кто может видеть и комментировать материалы на Вашей странице. Источник: https://vk.com/@team-comment-threads
-
Плохой сеошник скажет все что нагуглит, в этом я не сомневаюсь... А еще любой сеошник скажет, что сайт который у них стабильно покупает рекламу, быстро продвигается в поиске при любых раскладах... А где доказательства накрутки, если весь трафик идет через рекламу на разных площадках, гугл, яндекс, соц сети и другие ресуры, а ты предоставил скрины чего? какого-то вброса?
-
Это даже читать смешно. "От роботов не спастись, обманишь робота будешь жить на Каррибах".. Есть элементарные вещи, которые нужно делать для сайта, если ты о них не знаешь или не понимаешь как что работает, чего воспринимать это в штыки?
-
Твоя некомпетентность в данном вопросе заведет данную дискуссию в тупик, да и никто не будет делится своими секретами. Если ты не способен обмануть робота, то это твои проблемы. продолжай в том же духе...
-
А вот это уже клевета, и на форуме есть правила на этот счет. То что трафик значительно больше я знаю точно, со мной делятся статистикой, так как я так же заинтересован в успехе анонса который разрабатывал...