Горячее
Лучшее
Свежее
Подписки
Сообщества
Блоги
Эксперты
Войти
Забыли пароль?
или продолжите с
Создать аккаунт
Я хочу получать рассылки с лучшими постами за неделю
или
Восстановление пароля
Восстановление пароля
Получить код в Telegram
Войти с Яндекс ID Войти через VK ID
Создавая аккаунт, я соглашаюсь с правилами Пикабу и даю согласие на обработку персональных данных.
ПромокодыРаботаКурсыРекламаИгрыПополнение Steam
Пикабу Игры +1000 бесплатных онлайн игр
Игра «История одной фермы» - увлекательное и бросающее вызов вашим серым клеточкам приключение, от которого невозможно оторваться!

История одной фермы - маджонг

Маджонг, Казуальные, Приключения

Играть

Топ прошлой недели

  • Oskanov Oskanov 8 постов
  • alekseyJHL alekseyJHL 6 постов
  • XpyMy XpyMy 1 пост
Посмотреть весь топ

Лучшие посты недели

Рассылка Пикабу: отправляем самые рейтинговые материалы за 7 дней 🔥

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

Спасибо, что подписались!
Пожалуйста, проверьте почту 😊

Новости Пикабу Помощь Кодекс Пикабу Реклама О компании
Команда Пикабу Награды Контакты О проекте Зал славы
Промокоды Скидки Работа Курсы Блоги
Купоны Biggeek Купоны AliExpress Купоны М.Видео Купоны YandexTravel Купоны Lamoda
Мобильное приложение

Web

С этим тегом используют

IT Программирование Web-программирование Сайт Веб-разработка Дизайн Javascript Все
963 поста сначала свежее
38
itstorytelling
itstorytelling
1 день назад
Наука | Научпоп

08.06.1955 - День рождения Тима Бернерса-Ли [вехи_истории]⁠⁠

👨‍🦰 Сэр Тимоти Джон Бернерс-Ли — британский учёный и инженер, подаривший миру World Wide Web — систему, которая изменила способ, как человечество хранит, находит и передаёт информацию.

08.06.1955 - День рождения Тима Бернерса-Ли [вехи_истории] Ученые, Наука, Технологии, Научпоп, Интернет, Web, Web-программирование, История IT, Информатика, Информация, Исследования, Развитие, Заработок в интернете, Сети, W3c, Тим бернерс-ли, Видео, RUTUBE, YouTube (ссылка), Длиннопост

🗓 08.06.1955 - День рождения Тима Бернерса-Ли [вехи_истории]

💡 В конце 1980-х, работая в Европейском центре ядерных исследований (CERN), Тим столкнулся с проблемой обмена информацией между учёными, работающими на разных компьютерах и системах. В 1989 году он предложил решение — проект под названием “Mesh”, который вскоре стал World Wide Web. Он включал три ключевых технологии:
👉 HTML — язык разметки гипертекста
👉 URI/URL — универсальные адреса ресурсов
👉 HTTP — протокол передачи данных

🔓 Тим Бернерс-Ли сознательно не запатентовал своё изобретение и настоял, чтобы оно было открытым и бесплатным для всех. Это решение стало основополагающим для стремительного роста Интернета в 1990-е.

👨‍🔬 Он продолжил развивать Web как руководитель W3C — консорциума, отвечающего за стандарты Интернета. Позже он запустил проект Solid, цель которого — вернуть контроль над личными данными пользователям.

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

📱 Именно благодаря его труду мы имеем доступ к сайтам, соцсетям, онлайн-играм, цифровым библиотекам и бесконечному числу других сервисов.

📼 Подробную историю о создании интернета мы рассказывали в видео:
Кто придумал ИНТЕРНЕТ?
YouTube | RuTube

👇👇Наш канал на других площадках👇👇
YouTube | RuTube | Telegram | Pikabu
=====================================

Показать полностью 1 1
Ученые Наука Технологии Научпоп Интернет Web Web-программирование История IT Информатика Информация Исследования Развитие Заработок в интернете Сети W3c Тим бернерс-ли Видео RUTUBE YouTube (ссылка) Длиннопост
10
2
itstorytelling
itstorytelling
9 дней назад
Информатика • Алексей Гладков

31.05 - Дeнь вeб-дизaйнepa [вехи_истории]⁠⁠

31.05 - Дeнь вeб-дизaйнepa [вехи_истории] Тренд, Дизайнер, Программа, Разработка, Ux, Ux-дизайн, Ui, Дизайн, Web, Веб-дизайн, Веб-разработка, Научпоп, Информатика, Сайт, Технологии, YouTube (ссылка)

🗓 31.05 - Дeнь вeб-дизaйнepa [вехи_истории]

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

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

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

👩‍💻 Поздравляем всех причастных! Пусть ваши творчества всегда будут не только красивыми, но и удобными)

👇👇Наш канал на других площадках👇👇
YouTube | RuTube | Telegram | Pikabu
=====================================

Показать полностью
Тренд Дизайнер Программа Разработка Ux Ux-дизайн Ui Дизайн Web Веб-дизайн Веб-разработка Научпоп Информатика Сайт Технологии YouTube (ссылка)
0
3
itstorytelling
itstorytelling
12 дней назад
Информатика • Алексей Гладков

28.05 - День оптимизатора Рунета [вехи_истории]⁠⁠

28.05 - День оптимизатора Рунета [вехи_истории] Сайт, IT, Тренд, Технологии, Дизайнер, Web, Веб-дизайн, Веб-разработка, Научпоп, Информатика, Красота, Ux, Ux-дизайн, Ui, Видео, RUTUBE

🗓 28.05 - День оптимизатора Рунета [вехи_истории]

🔍Это неофициальный профессиональный праздник всех, кто помогает сайтам быть замеченными в поиске.

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

📜 Почему 28 мая? Считается, что в этот день в 2001 году началась активная фаза развития поискового продвижения в Рунете, а сама дата закрепилась в профессиональной среде как символ зарождения отечественного SEO.

👏 Поздравляем всех, кто «ведёт в топ» — вы делаете интернет чище, быстрее и доступнее!

📼 А знаете ли вы, кто придумал этот ваш интернет?)
Кто придумал ИНТЕРНЕТ?
YouTube | RuTube

👇👇Наш канал на других площадках👇👇
YouTube | RuTube | Telegram | Pikabu
=====================================

Показать полностью 1
[моё] Сайт IT Тренд Технологии Дизайнер Web Веб-дизайн Веб-разработка Научпоп Информатика Красота Ux Ux-дизайн Ui Видео RUTUBE
9
5
Eye.Providence
Eye.Providence
Не топовый автор
Серия Почему нельзя шутить на работе
13 дней назад

На работе нельзя шутить 4⁠⁠

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

И вот что, это всегда было как выстрел себе в ногу.

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

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

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

Недели 2 я упарывался на работе, днями... Ночами... Надо было мне залезть в БД. Открываю воркбенч в пятницу вечером...

На работе нельзя шутить 4 Личный опыт, IT, IT юмор, Программирование, Программист, Web, Мат, Длиннопост

Меня ничего не смутило, вылезает табличка

На работе нельзя шутить 4 Личный опыт, IT, IT юмор, Программирование, Программист, Web, Мат, Длиннопост

Ну конечно же я мышкой выбираю пункт 2

Сижу такой. Сижу. И тут до меня доходит, что я сделал. До сих пор не знаю зачем и каким образом... Ебанулся.

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

Объясняю что случилось - я очистил в базе данных таблицу. В которой была связка пользователя и его устройств. Те информация, что у пользователя василия например есть устройство с серийником 123, оно называется "Лошадь муренка", иконка на карте в виде сердечка, мобильный номер ответственного пастуха 8-888-083-**-**.....

Пользователей в системе около касаря - тех кто реально пользуются сервисом. У одного пользователя как правила одно устройство, но есть несколько сотен пользователей у который сотни устройств и несколько пользователей с ~1к устройств. Эта жопа.

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

Всем отделом пытались найти выход из ситуации. Бекапов нет.

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

Люди же реально добавляли эти вот все устройства, руками, проходя все процедуры добавления. Это так то много труда...
Охуели все. А больше наверное исполнители клиентов наших и я. Ну и мой куратор наверное.

Хз как меня после такого залета не выперли.

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

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

Показать полностью 2
[моё] Личный опыт IT IT юмор Программирование Программист Web Мат Длиннопост
6
434
Eye.Providence
Eye.Providence
Не топовый автор
Серия Почему нельзя шутить на работе
14 дней назад

На работе нельзя шутить 3⁠⁠

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

И вот что, это всегда было как выстрел себе в ногу.

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

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

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

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

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

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

Заканчивая универ, я был тем самым чуваком, которому пишут если что то нужно сделать, тот самый чувак которого всем рекомендуют. Так что закончив универ, у меня было много мелкой работы фриланса, чем я был занят первые полгода после учебы. Из всего этого выделялся более менее крупный проект. Старт ап, сервис поиска дешёвых продуктов в магазинах. По сути карта, на карте магазины, каталог товаров. Админка ко всему этому. Я там на говнякал бек на чистом php. Морду jquery. Боль. Не суть.

Мне не нравился такой ритм жизни фрилансера. То кинут на деньги, то не кинут, то на жалость надавят. Сидишь дома. Домашние смотрят как на бездельника. Какие то дни правда усердно пашешь. Какие то прокрастинируешь. Так я 1к часов в кс го накатал. Ну типа просыпаешься, все на работе, пока пожрал, поссал, все пришли, отвлекают. Потом пытаешься работать, какие то созвоны. Потом кс. Вот сейчас последнюю катку. Теперь точно последнюю. Все проснулись. Ушли. Так пару часиков поработал и по кругу. Ну примерно как то так. Какие то месяца очень денежные, какие то лапу сосешь. Гребанные качели 70к, 0к, 5к, 150к и тд. Так еще и общения копец как не хватает. Уезжал в город, брал ноут и работал из какой то кафешки, что б крыша не поехала.

В пизду думаю. Сделал резюмеху. Выложил.

Ну меня сразу и позвали на собес в ту, мою первую компанию. Увидели карту с точками - ну всё, типа нам надо примерно то же самое. Пришел на собес, поговорили о жизни, с моим будущим куратором и ген диром. Ген дир, по-доброму посмеялся над моей фразой "Хочу в коллектив".

Ген дир: "Вот проект обсудили, сделаешь?"

Я: "Сделаю".

ГД: "За сколько"

Я: "За 2 недели".

ГД: "Выходи завтра на работу".

За 2 недели я это все сделал. Охуел. Но сделал. Не плохая бд получилось, mysql. Бек на голом php, один класс XD(Ну не понимал я как это вот ООП делать, а хотелось). Фронт все так же на jquery. Вот, чтоб было хоть чуть чуть понятно, о масштабе пиздеца... На фронте нажимают кнопочку, ajax запрос на бек, бек возвращает кусок js кода, который уже хуярится в невидимую div ку, где собственно и исполняется..... if в if а в нем свитч кейс а в нем еще if....

В код слава богам, никто не смотрел. Но все это работало и всем нравилось. Спустя две недели, когда все получали аванс, я получил первую зп, целую зп(а я проработал всего две недели). Оказалось, мне подняли зп почти X2. Меня это прям воодушевило на будущие подвиги.

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

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

Утром пришел на работу, стояла коробка с маком=)

Все исправил. Исправил все замечания дизайнера. Новая проблема. Шрифты на мониторах не видно, на маке видно. Дизайнер поправил. Не важно. Сдал проект.

Приходили новые хотелки на будущие релизы. Работали дорабатывали. Меня дико бесил тот их зелёный основной цвет. Каждый день я на него смотрел и меня блювать тянуло, а нужно было еще и сервис этот допиливать. И тогда я сделал несколько цветовых схем которые переключались по нажатиям горячих клавиш. У меня была золотая/цыганская тема, розовая, черная/брутальная. Получилось очень здорово. Заказчик подглядел у меня на компе как выглядит и задался вопросом, что это, я объяснил. Ему понравилось. Пришлось мне допиливать нормально эту фичу для заказчика=)

Я вынес урок - не делай лишнего, иначе работы прибавиться.

Наша, компания захотела такой же сервис себе. Начали делать клон. Я был начинающий программист и мне было как то неловко просить сервак, арендовал сам. Было неловко просить денег на домен и взял бесплатный домен *.tk. Там и наделали супер пупер крутую версию сервиса для своей компании. Вот раздали доступы клиентом. С пол года все пользуются. Домен я продлеваю, когда надо. Бац. Клиент пишет. Захожу по выданному адресу на презентации, а там веб кам. Оказалось что эти домены могут так просто взять и отобрать регистратор =(

Так я пришел к тому что нельзя пользоваться доменами tk и прочими бесплатными. И для компании аренда сервака копейки и домен, купить не проблема. А под каждый новый сервис можно делать поддомен =)))

PS. Вот эти вот клоны сервисов которые я наделал(про которые писал в этом посте). Внутри выглядели отвратительно. Разобраться в исходниках мог только я. Но они были написаны одним мной, джуном, очень быстро, очень дешево. Работают по сей день, меня уже там много лет нет. Все работает и не падает. На момент ухода из компании, там было несколько сотен тысяч устройств и около косаря активных пользователей. А сервак на котором это все крутится что то типа 2 гига оперативы и 1 проц. Ну какой то минимальный. Можно меня пидорасить за то что я такое говно клепал - но оно работает и с удовольствием этим пользуются. Я вижу что у конкурентов сервисы работают хуже, а мои решения и фичи, они повторяют. Реально можно делать проекты без полноценной команды - пм, тимлил, тестировщик, аналитик, маркетолог, таролог, астролог и тд. Можно делать в одного. НО у этого всего будут последствия и минусы. И иногда очень очень болезненные. Возможно я еще о них попишу в этой рубрике.

Показать полностью
[моё] Личный опыт IT IT юмор Программист Фриланс Программирование Web Мат Текст Длиннопост Говнокодинг
75
0
Eye.Providence
Eye.Providence
18 дней назад
Серия Почему нельзя шутить на работе

На работе нельзя шутить⁠⁠

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

И вот что, это всегда было как выстрел себе в ногу.

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

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

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

Настал момент накидать тестовой информации, что б вообще понять работает нет и то это что хотелось или нет.

Ну я накидал шуточного текста, накидал шуточных картинок. В решении указал, вам понадобятся "устройство 1", "Платформа Z", "Что то там", "Горе ребята". На горе ребята, я конечно же поставил ссылку на сайт реальных партнеров/заказчиков компании. Ну че, получилось смешно. Все работает. Тим лиду показал - оценил юмор, отделом посмеялись. Забыли.

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

После этой истории я всегда, делаю хотя бы базовую авторизацию =)

[моё] Программирование Юмор Web IT юмор Программист Сайт Истории из жизни Мат Текст IT
7
1
design.all
18 дней назад

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

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

Эра мобильности как триггер новых UX-подходов

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

Базовые UX-принципы для мобильных интерфейсов

1. Приоритет минимализма
Упрощение визуального поля помогает пользователю сосредоточиться на целевом действии. Критичны:

  • упрощённая иерархия;

  • один сценарий на экран;

  • кликабельные зоны от 44px и выше.

2. Прозрачная навигация
Фокус на предсказуемости: привычные жесты, фиксированное нижнее меню, логика “назад/вперёд” без когнитивной нагрузки. Пользователь не должен думать, как взаимодействовать — он должен просто действовать.

3. Учет сенсорного ввода
Устройства управляются пальцем, не курсором. Это требует:

  • увеличенного интервала между элементами;

  • мгновенной отклика;

  • понятной обратной связи при взаимодействии (анимация, цвет, вибрация).

Новые технологии → Новые интерфейсные паттерны

Развитие 5G, AR и нейросетей меняет подход к проектированию.

  • AI позволяет динамически адаптировать интерфейс под поведение пользователя;

  • AR интеграции расширяют возможности вовлечения и создают spatial-опыт;

  • IoT требует создания интерфейсов, чувствительных к контексту окружения.

Практическое внедрение: от прототипа к запуску

Эффективный мобильный UI — результат цикла итераций:

  • низкоуровневое прототипирование (wireframes) в Figma или Axure;

  • пользовательские тесты в Maze или PlaybookUX;

  • анализ поведения через тепловые карты, scroll-depth и retention;

  • A/B-тестирование ключевых UI-флоу перед масштабированием.

Доступность и масштабируемость

Хороший интерфейс работает одинаково хорошо:

  • в условиях слабого интернета;

  • на экранах от 320 до 1280 пикселей;

  • для пользователей с ограниченными возможностями.

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

UX как фактор доверия

Интерфейс не просто точка контакта, он отражает надёжность сервиса:

  • предсказуемая работа с разрешениями;

  • интеграция с биометрией и двухфакторной аутентификацией;

  • внятные паттерны при ошибках (empty states, recovery, confirmation flow).

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

#dfa #design-for-all #webdisign #интерфейс

Оптимизация интерфейсов для мобильных устройств с учетом особенностей небольших экранов и сенсорного ввода Дизайн, Web
Показать полностью 1
Дизайн Web
3
2
mars.frontier
mars.frontier
28 дней назад

Как мы делали мини-игру про ровер на Марсе внутри Telegram WebApp⁠⁠

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

1/3

🚀 С чего всё началось?

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

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

Но само собой, что бот - не предел мечтаний, нужно было пилить полноценный мини-апп.

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

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

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

  • Пользователь заходил и видел карту Марса.

  • Никакого взаимодействия — только “глянуть”.

🎮 А потом захотелось интерактивности

Следующим шагом стало добавление изометрии — чтобы выглядело как псевдо-3D. Самое интересное, что даже не потребовалось изменять текстуры. Серьезно :) Они по-прежнему те же самые, квадратные, 64 х 64. И не используется никакой 3д - движок.

вот краткое и понятное объяснение, как строится изометрическая карта из квадратных тайлов:


🧠 Основная идея:

Каждый квадратный тайл поворачивается на 45° и масштабируется по вертикали, чтобы получился ромб (изометрическая проекция). Вместо привычной сетки (x, y) мы рассчитываем экранные координаты (left, top) по формуле:


📐 Формулы для отображения:

При размере одного тайла T:

  • W = T * sqrt(2) — изометрическая ширина (диагональ квадрата).

  • H = W / 2 — изометрическая высота (высота ромба).

  • WX2 = W / 2, HX2 = H / 2 — половинки для смещения от центра.

Переход от логических координат (dx, dy) к пиксельным:

isoX = (dx - dy) * WX2 + centerX; isoY = (dx + dy) * HX2 + centerY;


🧩 Что это даёт:

  • (dx - dy) — смещает тайл по горизонтали.

  • (dx + dy) — смещает тайл по вертикали.

  • centerX, centerY — центр экрана, чтобы карта строилась относительно игрока.


🎯 В результате:

  • Из обычной квадратной сетки (x, y) формируется ромбовидная карта, где видны и горизонтальные, и вертикальные соседние тайлы.

  • Центральная клетка (текущий игрок) — всегда по центру, а остальные располагаются вокруг.

    Ну а дальше уже дело техники - придумали алгоритм перемещения в 8 направлениях: вверх, вниз, влево, вправо, плюс диагонали.

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

    Задали запреты на воду, скалы и занятую клетку, чтобы не было “читов”.

🔐 Само собой - авторизация

Чтобы пользователь не “прыгал” по чужим роверам и участкам, мы внедрили Telegram WebApp InitData (это такая строка с хешем, которую фронт передает нам в бэк, а мы - уже на сервере телеграм с токеном бота валидируем подпись. Если сошлась - то пользователь зашел к нам через телегу. Если нет - скорее всего он просто открыл веб-страницу как сайт, или что-то пытается поломать, подделать :)

Если кратко:

  • Telegram сам отдаёт токен с подписью.

  • Мы проверяем подпись на бэке по HMAC SHA256.

  • Получаем ID пользователя, сохраняем его в сессии.

Теперь всё честно: ровер – только твой, кристаллы – только твои.

🪐 Стало красивее: добавили кристаллы и рамки

Потом появились:

  • Кристаллы на клетках — можно собирать.

  • Подсветка клеток: белая рамка — твоя, красная — чужая.

  • Имена владельцев, чтобы было видно, кто что захватил.

    В планах: Покупка участков за кристаллы. Это было в текстовом боте. И ползая по карте, даже видны купленные тобой (белым) и оппонентами (красным) участки.

⚡️ Оптимизация и загрузка ассетов

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

  • Добавили прелоадер, который подгружает PNG-шки перед игрой.

  • Сделали показ спиннера на любом действии (движение, загрузка).

  • Кэшируем тайлы и обновляем только при движении.

🤖 Как выглядит сейчас

Игрок:

  • Заходит в Telegram Mini App.

  • Авторизуется за доли секунды.

  • Видит изометрическую карту с ровером, кристаллами, участками, рекламными баннерами.

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

А мы — всё это рисуем прямо в DOM.
Никаких Canvas, WebGL, или тяжелых движков. Только HTML, CSS и немного магии на JS.


💬 Если интересно — покажу, как это выглядит вживую.
Тестить можно тут. А если зайдёт — добавим NFT, фермы и квесты на выживание 😄

Показать полностью 3
[моё] Gamedev Разработка Программирование Telegram Javascript Python Unity Frontend Backend Web Web-программирование Ton HTML CSS Верстка Длиннопост
9
Посты не найдены
О Нас
О Пикабу
Контакты
Реклама
Сообщить об ошибке
Сообщить о нарушении законодательства
Отзывы и предложения
Новости Пикабу
RSS
Информация
Помощь
Кодекс Пикабу
Награды
Команда Пикабу
Бан-лист
Конфиденциальность
Правила соцсети
О рекомендациях
Наши проекты
Блоги
Работа
Промокоды
Игры
Скидки
Курсы
Зал славы
Mobile
Мобильное приложение
Партнёры
Промокоды Biggeek
Промокоды Маркет Деливери
Промокоды Яндекс Путешествия
Промокоды М.Видео
Промокоды в Ленте Онлайн
Промокоды Тефаль
Промокоды Сбермаркет
Промокоды Спортмастер
Постила
Футбол сегодня
На информационном ресурсе Pikabu.ru применяются рекомендательные технологии