Приветствую сообщество Telegram Messenger!

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

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

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

Моя точка зрения на мастерство

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

Дело в том, что количество специалистов, умеющих разрабатывать шаблоны сайтов с пониманием всех тонкостей процесса, исчисляется примерно тысячей на каждую крупную страну или регион мира с развитой культурой вебразработки - США, Россия, Китай, Украина, Европа, Индия, Полинезия. Оценка конечно субъективная, тем не менее я вывел её, много лет наблюдая за изготовителями шаблонов для сайта.

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

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

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

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

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

Но вернёмся к проекту

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

Что делаем

За несколько недель обсуждения в режиме живого микрофона мы разработаем с чистого листа бесплатную тему сайта. Её рабочее название пока что TelegramReviewer. Эта тема предназначается всем, кто ищет готовое решение или для независимого блога, или для корпоративного сайта, или для интернет-магазина, или для другого похожего типа сайтов.

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

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

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

Для кого

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

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

К каждому такому "инструменту" обычно уже созданы некие дополнительные функции, чтобы связать один канал информации с другим и обеспечить управляемое вливание потоков в другие. Например, новые записи дружественной стены A и твиты штатного пользователя B автоматически репостить в корпоративный блог C.

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

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

На каких условиях

Исходные коды темы TelegramReviewer будут распространяться под лицензией CreativeCommons BY 4.0, чтобы все могли использовать тему бесплатно для личных или коммерческих целей, перерабатывать её для своих нужд с указанием атрибуции, распространять оригинал или собственную модификацию и так далее.

Вебмастеру При создании темы сайта и возможной дальнейшей доработке какого-нибудь её элемента следует программировать клиентскую (браузерную) логику на чистом Javascript и вёрстку делать на стандартных возможностях HTML5+CSS3, чтобы максимально избавиться от зависимостей.

Для вёрстки серверной бизнес-логики шаблона следует использовать только бесплатную библиотеку ShortCodes Helper (поставляется в виде файла helper.php), так как её краткий синтаксис позволяет записать логику шаблона почти полностью без привязки к конкретной CMS, что может стать полезным при портации темы на другие системы. А при необходимости программировать специфичную серверную логику для взаимодействия с данными или сервером Telegram, её необходимо разместить в специальном файле mod-helper.php шаблона.

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

Для начала замечу насчет организации

• Нет хистори проекта, что сделано, что затем.
• Где исходники? Или демо покажите.

И между прочим, мысли вслух

• Пост 1 это хайп на мастерстве фронтендеров. Ваше личное мнение. Без пруфа столь же истино как мнение господина Дурова о безопасности Телеграм.
• О движке с которогь начинать, пост 2, тоже так себе мнение.
• Пост 3. Телеграм запрещен в России. Может у проекта с рождения нет будущего?

Дмитрий, LocalNet, Стаханов написал: Моя точка зрения на мастерство

Anatoly32, всему своё время. И историю разработки вывесим, и планы, и ссылку на скачивание, и даже ссылку на демонстрационный стенд.

Что касается Телеграма, а нет никакого запрета. Как заявил 24 октября 2019 года агентству ТАСС заместитель главы Министерства по коммуникациям и связи Алексей Волин, пользователям мессенджера Telegram в России ничего не грозит, запрета на пользование нет ни для пользователей, ни для государственных структур.

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

Да и сама идея блокировки выросла ведь из тогдашнего непонимания техническими специалистами Роскомнадзора особенностей работы алгоритма блочного шифрования AES в режиме Infinite Garble Extension.

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

Так вот, возвращая разговор к Telegram, - когда люди общаются в простых чатах, их сообщения передаются в эту сеть, зашифрованные всё тем же алгоритмом AES, но в каком-то более простом режиме, скажем Cipher Block Chaining. Это значит что и у клиента и у сервера сети есть подходящие ключи шифрования, и они действительно могут быть предоставлены спецслужбе.

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

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

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

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

Объясните точнее цель разработки. Был же опыт с темой telegram-wp. Ну разработали, скрестить скрестили. И что?

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

Вы забили что ли на разработку? Полмесяца нет активности.

Сергей, просто ожидаем объявление платформой Telegram официальных результатов конкурса по вёрстке браузерной версии мессенджера. Я говорил об этом конкурсе в начале топика, предполагая, что ситуация прояснится быстро. Однако в судействе что-то затянулось. Так что пока ждём.

А что ждать, когда и так ясно. Предварительные оценки кандидатов показывают обстановку как есть. Организатор объявил бы победителей Javascript contest давно, если выбирать из чего было бы.

Поддерживаю, ждать хз чего худшее занятие

давай дам 200 баксов, Дмитрий ты определись что верстать, какую страницу, кто-то из прогеров пусть начинает а там видно будет

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

Utako, Cellcom / Netvision, Герцлия, Израиль написал: давай дам 200 баксов

Юрий, спасибо! Скину вам номер временной карты Михаила Пачулли (он подписался выше Pachulli84), отправьте ему оплату сразу на карту. Я уже пишу Михаилу задание по вёрстке макета главной страницы.

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

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

Pachulli84, Prima-Yug Service, Таганрог написал: чтож меня в этот не позвал сразу

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

Сверстать главную страницу

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

• корень
• design
  • TelegramReviewer
    • css
    • fonts
    • html
      • abstract
      • email
      • modules
      • sms
    • images
      • demo
      • icons
    • js
    • video

Поясню, чтобы всем было понятно, здесь изображена структура папок как в стандартной Zero (нулевой) теме: стили сайта, шрифты, разметка макетов, картинки оформления, клиентские javascript, оформительские видео - всё размещено в своих папках.

Использовать ShortCodes

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

К тому же есть принципиальное условие: не применять компонентов третьей стороны. Допустим лишь природный Javascript, природный HTML + CSS. Из компонентов допустима только родная библиотека ShortCodes Helper - это расширитель списка коротких тегов, доступных для использования в макетах страниц шаблона.

Обозначу структуру папок шаблона с установленными файлами библиотеки коротких тегов:

• корень
• design
  • TelegramReviewer
    • css
    • fonts
    • html
      • abstract
      • email
      • modules
      • sms
      • helper.php
      • helper-settings.php
      • mod-helper.php
    • images
      • demo
      • icons
    • js
    • video

Здесь первый файл - helper.php, он представляет собой библиотеку из более чем сотни полезных универсальных тегов. Редактировать этот файл нельзя, можно только перезаписать новой версией.

Второй файл - helper-settings.php, содержит частные настройки библиотеки применительно к нашему шаблону. Как правило, этот файл редактируется всего один раз, а в большинстве случаев стандартные настройки файла подходят для вашего проекта и потому не требуют редактирования.

Третий файл - mod-helper.php, это дополнительный список каких-то специфичных тегов, которые имеют смысл только в рамках нашего шаблона. То есть именно в этом файле будут расписаны теги для скрытого взаимодействия с сервером Telegram.

Также напомню порядок обработки файлов библиотеки: helper-settings.php, mod-helper.php, helper.php. Это необходимо для понимания, что в дополнительном списке тегов невозможно переопределить логику одноимённого тега основного списка. Таким образом обеспечена однозначная интерпретация стандартного тега при чтении вебмастером исходного кода макета.

Использовать модульность

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

Вебмастеру следует знать, что при генерации многих страниц выполняются похожие подготовительные действия технического характера, как то: подготовка антиспамовых меток, проверка неучтённых случаев "ошибка 404", подготовка демонстрационных данных, фиксы (исправление) пропущенных SEO данных, информирование менеджера, инициализация страницы, подготовка языков сайта, подготовка OpenGraph сведений о странице, загрузка мультиязычного (полиглотного) словаря, некие технические операции.

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

• корень
• design
  • TelegramReviewer
    • css
    • fonts
    • html
      • abstract
      • email
      • modules
        • antispam.htm
        • check404.htm
        • demo.htm
        • fixes.htm
        • inform.htm
        • init.htm
        • languages.htm
        • open-graph.htm
        • polyglot.htm
        • technical.htm
      • sms
      • helper.php
      • helper-settings.php
      • mod-helper.php
    • images
      • demo
      • icons
    • js
    • video

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

Изменению подвергается лишь модуль languages.htm, если надо определить другой список языков, и модуль polyglot.htm, где пишут переводы строк интерфейса на другие языки. А на одноязычном сайте такие модули вообще удаляют.

Ну а модули вида demo.htm и одноимённая папка в картинках используются только для демонстрационного сайта и могут быть запросто удалены из шаблона.

Макет главной страницы

Снова обозначу рассматриваемые файлы на той же структуре шаблона:

• корень
• design
  • TelegramReviewer
    • css
      • style.css
    • fonts
    • html
      • abstract
      • email
      • modules
        • antispam.htm
        • check404.htm
        • demo.htm
        • demo-home.htm
        • fixes.htm
        • inform.htm
        • init.htm
        • languages.htm
        • open-graph.htm
        • polyglot.htm
        • technical.htm
      • sms
      • catalog.htm
      • helper.php
      • helper-settings.php
      • index.tpl
      • missing_template.htm
      • mod-helper.php
    • images
      • demo
        home-post-1.jpg
      • icons
      • error-404.jpg
      • logo.png
      • no-photo.png
    • js
      • script.js
    • video

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

Заднаие принял

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

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

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

Я внимательно прочел задание "Сверстать главную страницу". Устройство темы мне понятно. Если эти знания о структуре файлов считаете недостаточными для новичка, порекомендуйте что прочесть еще.

Николай, JSC Ufanet, Уфа написал: Как вступить в вашу команду, требования, стек технологий какой надо знать?

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

Серьёзных требований к стеку технологий у меня нет: нативный HTML, CSS, Javascript, иногда AJAX запросы, ну в редких случаях PHP - это для мелких потребностей в шаблоне сайта на серверной стороне. Я знаю по опыту, хорошему вебмастеру хватит только этих техник, чтобы воспроизвести 99% хотелок клиента.

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

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

Здравствуйте всем! Передаю последние новости с сайта Телеграм. Вот исходный пост, ниже - его скриншот и перевод.

Telegram Contests: После многих часов тестирования и ещё больших часов обсуждения мы рады представить результаты первого тура JavaScript Contest. Встречайте победителей!

• 1 место занял один участник и получает награду 10 тысяч
• 2 место разделили 6 участников с наградой по 5 тысяч каждому
• 3 место разделили 8 участников, награда по 3 тысячи
• 4 место разделили 17 участников с наградой по 1 тысяче

Наши подробные комментарии о причине таких мест можно найти на платформе конкурса.

Второй раунд JavaScript Contest начнётся на следующей неделе, оставайтесь на связи!

P.S. Учтите, что только 32 победителя этого тура могут участвовать в следующем туре конкурса.

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

Мессенджер используется как средство быстрой связи с клиентом, не более чем. Отправить с аккаунта магазина короткое "Ваш заказ №23 выслан Почтой Росии, трекинг номер 123000123". Может быть ответить на запрограммированный вопросник каким-то автоматическим сообщением с помощью бота.

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

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

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

Я же дал выше ссылку на тему telegram-wp. Это и есть исходник, только для Wordpress.

Ты посмотрел бы сначала ссылку свою. Telegram-WP это больше 100 Мбайт исходных кодов проекта Telegram Client for Windows Phone созданного в Visiual Studio. А ты увидел приставку из знакомых малолеткам букв и решил не глядя в исходники что это про Wordpress.

Ни для какой CMS еще не написан клиент потому что всем плевать на такую интеграцию.