Frontend-разработчики в Сигнахах

API Яндекс Карт: Как добавить собственный HTML-контент в балун метки

API Яндекс Карт позволяет создавать интерактивные карты на сайте и интегрировать различный функционал для пользователя. Один из интересных параметров API – это возможность вставить собственный HTML-контент в балун метки. Balloon (балун) в Яндекс-картах - это интерактивное окошко, которое появляется при наведении на метку на карте. Оно содержит дополнительную информацию об объекте, обозначенном этой меткой. В балун могут быть помещены различные данные. Например: - Название, адрес и описание места. - Фотографии или изображения объекта. - Расписание работы, контакты и другие данные организации или заведения. - Цены, отзывы, рейтинги и другие данные, связанные с коммерческой или туристической деятельностью. - Ссылки на сайт объекта, его профили в социальных сетях и другие ресурсы. Также в балун могут быть помещены дополнительные элементы управления, например, кнопки "Проложить маршрут" или "Позвонить". Содержимое балуна задается через свойства геообъекта: balloonContentHeader - заголовок балуна, balloonContentBody - основная часть балуна, balloonContentFooter - нижняя часть балуна. При создании содержимого можно использовать HTML-разметку. В HTML-контенте балуна метки можно использовать большинство стандартных тегов, используемых в HTML-разметке веб-страниц . Некоторые из наиболее распространенных тегов, которые могут использоваться в балуне метки Яндекс Карт: 1.  - для создания блочных элементов. 2.  - для создания абзацев текста. 3.  - для вставки изображений. 4.  - для создания ссылок на другие страницы или ресурсы. 5.  - для создания неупорядоченных списков. 6.  - для создания упорядоченных списков. 7.  - для создания инлайн-элементов. 8.  - - для создания заголовков разного уровня. 9.  - для создания таблиц данных. 10.  - для создания кнопок на балуне. Это только некоторые из доступных тегов. Вы также можете использовать другие теги, которые соответствуют вашим требованиям, чтобы создать наиболее эффективный контент для балуна. Чтобы изменить стиль балуна, используется CSS. Стилизация балуна может помочь в создании индивидуальной и уникальной внешности для вашей карты и контента. В данном примере решила отметить на карте место, где 1 июня 2023г. 100 человек посадили саженцы ели для будущего нашей планеты и я принимала в этом участие. На карту добавлена метка в виде елочки. При клике открывается балун в нем указано название мероприятия, галерея фото, дата события, важная информация, а также ссылка. В целом, балун - это удобный инструмент, который позволяет получить более подробную информацию о месте на карте. ольгаевдокимова #разработка #сайт #разработкасайтов #созданиесайтов #интерфейсы #html #версткасайта #css #javascript

Как создать эффект матового стекла на CSS при помощи свойства backdrop-filter

Это мощное свойство позволяет применять различные эффекты фильтра, такие как размытие и насыщенность, к заднему фону элемента, через который виден контент. В данном примере backdrop-filter: blur(40px); применено к элементу content который располагается в центре страницы. Свойство backdrop-filter: blur(40px); добавляет эффект размытости заднего фона элемента и делает его более прозрачным при помощи указания радиуса размытия в пикселях. Эффект получил широкое распространение в веб-дизайне, так как он позволяет создавать разноплановые и интересные интерфейсы, ориентированные на улучшение пользовательского опыта. Одним из главных преимуществ использования свойства backdrop-filter является его простота в реализации. Для того чтобы создать эффект матового стекла, нужно добавить к нужному элементу свойство - backdrop-filter. Наиболее часто используемое значения backdrop-filter - blur(40px), которое на основе стандартного радиуса размытия создает эффект матового стекла. Эффект матового стекла может быть использован на сайтах для создания эффекта глубины и прозрачности, придающих некоторую фантазию и текстурную поверхность веб-дизайну. Вот несколько примеров использования эффекта матового стекла: * 1. Тематические сайты: Сайты, связанные с модой, красотой, винтажным стилем или ретро, часто используют эффект матового стекла для создания глубокой, текстурированной поверхности, которая придает дополнительный визуальный интерес контенту и оформлению. * 2. Сайты фотографов: Эффект матового стекла может помочь прорисовать более мягкие, пастельные и атмосферные темы на веб-сайтах, где галереи фотографий и изображения рассказывают истории более эмоциональным и тонким образом. * 3. Создание эффекта глубины: При использовании эффекта матового стекла на веб-сайтах, фоновое изображение может просвечивать через прозрачный слой, создавая эффект глубины и многоплановости визуального дизайна. * 4. Формы и элементы: Эффект матового стекла может быть использован слоями для оформления форм и других элементов сайта, что придает мягкость и текстуру дизайну страницы. Для большего эффекта, в пример добавлена анимация. ольгаевдокимова #разработка #сайт #разработкасайтов #созданиесайтов #интерфейсы #html #версткасайта #css #эффект

API Яндекс Карт: как добавить метку с собственным изображением

Кастомизация Яндекс карт позволяет адаптировать их под свои потребности и стилистику веб-сайта или приложения. Метка с собственным изображением на Яндекс Карте используется для обозначения точек интереса, персонализации карты, навигации, рекламы и маркетинга, а также отображения специальных данных или информации на карте. Это позволяет настраивать и дополнять картографическую информацию в соответствии с потребностями и целями пользователя. Для работы с Яндекс картой и ее кастомизацией необходимо подключить API Яндекс Карт. API Яндекс Карт - это инструменты и функции, предоставляемые Яндексом разработчикам, чтобы они могли использовать функциональность Яндекс Карт в своих собственных приложениях или сервисах. API предоставляет различные функции для работы с картами, такие как поиск адресов, отображение маркеров на карте, получение информации о транспортных маршрутах и т.д. Короче говоря, API Яндекс Карт дает возможность разработчикам интегрировать функциональность Яндекс Карт в свои собственные проекты и создавать более интерактивные и информативные картографические приложения. Какие шаги необходимо выполнить, чтобы подключить и настроить Яндекс Карту: Шаг 1: Получите API-ключ Для начала подключения API Яндекс Карт вам потребуется API-ключ. Чтобы получить его, вам необходимо зарегистрироваться в кабинете разработчика Яндекс Карт. API-ключ будет идентифицировать ваше приложение при работе с Яндекс Картами. Шаг 2: Подключите API После получения API-ключа вам нужно подключить API Яндекс Карт к вашему проекту. Для этого вам необходимо вставить код скрипта на страницу вашего сайта или приложения. Обычно это делается с помощью тега . Код скрипта содержит URL-адрес API Яндекс Карт, и ваш API-ключ будет использоваться для аутентификации запросов. Шаг 3: Создайте контейнер для карты После подключения API вам необходимо создать контейнер, в котором будет отображаться карта. Веб-страница должна содержать HTML-элемент, который будет служить контейнером для карты. Обычно это с идентификатором (id="map"), который можно расположить в нужном месте страницы и определить его размеры с помощью CSS. Шаг 4: Создайте карту После создания контейнера вы можете приступить к созданию карты с помощью JavaScript. Для этого вы можете использовать функции и методы, предоставляемые API Яндекс Карт. Например, вы можете создать экземпляр карты, указав контейнер, координаты и параметры отображения. Затем вы можете добавить различные элементы управления, маркеры или другие объекты на карту, чтобы настроить ее в соответствии с вашими потребностями. Подробная документация и примеры кода доступны на сайте API Яндекс Карт. И так, карта создана, а теперь рассмотрим пример когда на карте нам нужна метка с собственным изображением. Для этого в документации находим: «Руководство разработчика» / «Объекты на карте». Здесь описано какие объекты можно добавлять на карту: метки, круги, ломаные, прямоугольники, многоугольники, а также их коллекции. В нашем же случае мы хотим задать собственное изображение для метки. Выбираем и копируем код  из: «Задание собственного изображения для метки». Данный код создает метку на карте с указанными координатами и кастомной иконкой, заданной в виде изображения. Иконка будет иметь заданные размеры и смещение относительно точки метки. Добавим этот код в наш внутри функции init(). Задаем нужные параметры. В моем случае метка будет в центре карты * С координатами: 55.753544, 37.621202 (Москва, Красная площадь) * Без собственного текста, * Изображение в виде сердечка на прозрачном фоне, * Размером 20 на 20 пикселей, * Смещена влево на 5 пикселей и вверх на 15 пикселей, так чтобы "ножка" сердечка была точно над точкой привязки. В результате выполнения этих шагов мы добавили на Яндекс Карту метку с собственным изображением, которая будет отображаться на нужной нам точке карты. Для достижения максимально эффективного результата, необходимо обратить особое внимание на гармонию метки с дизайном сайта. Этот элемент является ключевым для персонализации карты и предоставления пользователям максимально информативного и удобного интерфейса для навигации. ольгаевдокимова #разработка #сайт #разработкасайтов #созданиесайтов #интерфейсы #html #версткасайта #css #саморазвитие

Хобби - способ самовыражения и творчества

Изготовление изделий из эпоксидной смолы с натуральными листьями, мхом и насекомыми - это интересный и креативный способ самовыражения и творчества. Так в 2019 году я увлеклась созданием украшений из эпоксидки. Было так увлекательно и залипательно. На видео кулоны из эпоксидки, все выполнено вручную. Подбор декоративных натуральных материалов, сушка, подготовка к заливке, далее шлифовка и крепление фурнитуры. Для тех кто не знает что это за эпоксидная смола - это материал, который используется для создания различных изделий, таких как украшения, сувениры, предметы интерьера и многое другое. Она имеет прозрачный и гладкий вид, который придает изделиям из эпоксидной смолы элегантный и современный вид. ольгаевдокимова #хобби #увлечения #хендмейд #творчество #общение #саморазвитие #украшения

Топ 10 языков программирования в 2023

Пред вами топ 10 ЯП по данным TIOBE. TIOBE - это индекс, который ежемесячно публикует TIOBE Software, и он используется для измерения популярности языков программирования. Индекс TIOBE основывается на количестве поисковых запросов, связанных с конкретным языком программирования, которые были выполнены в течение месяца в различных поисковых системах. Чем выше индекс, тем более популярен язык программирования. 1.Python - высокоуровневый язык программирования с динамической типизацией. Применяется для разработки веб-приложений, научных вычислений, анализа данных, машинного обучения и других задач. 2.C - высокоуровневый язык программирования, который отличается от других языков высокой скоростью работы и близкой к железу основе. Применяется для разработки операционных систем, драйверов устройств и других приложений. 3.Java - платформонезависимый язык программирования, используется для создания корпоративных приложений, игр и мобильных приложений. 4.C++ - объектно-ориентированный язык программирования, наследник C, отличается от него высоким уровнем абстракции, типизацией и возможностью работы со сборкой мусора. Применяется для разработки игр, драйверов, приложений обработки видео и звука и других приложений. 5.C# - объектно-ориентированный язык программирования, разработанный Microsoft, используется для создания приложений для операционной системы Windows и мобильных устройств на базе Windows. 6.Visual Basic - язык программирования, разработанный Microsoft, используется для создания рабочих инструментов и приложений для операционной системы Windows. 7.JavaScript - язык программирования, который широко используется на стороне клиента для создания интерактивных веб-страниц и на стороне сервера для управления серверными процессами. 8.SQL - язык для работы с реляционными базами данных, применяется для создания запросов к базам данных. 9.PHP - язык программирования, который используется для создания динамических веб-сайтов и приложений. 10.Go - компилируемый язык программирования, созданный Google для создания высокопроизводительных сетевых приложений и веб-сайтов.

Эксперимент: стандартный сайт vs сайт на Тильде

Тильда - популярная платформа, к тому же обещает быстрое и легкое создание сайтов в пару кликов. Естественно, компания решила испытать ее в деле и выяснить, можно ли ускорить запуск новых лендингов (в настоящее время запуск нового лендинга занимает в среднем 5 рабочих дней) без потерь в качестве. Было решено взять один из действующих сайтов, сделать максимально похожую копию на Тильде, проанализировать результаты. Я уже упоминала об этом в посте 6 февраля, а теперь поделюсь результатами эксперимента. Тильда начала проигрывать уже на старте) Ведь пришлось исключить из ТЗ ряд пунктов, т.к. реализовать их на Тильде оказалось либо невозможно, либо возможно, но через такие жуткие костыли, что ни о каком "быстро, просто, в пару кликов" речи бы уже не шло, т.е. платформа потеряла бы главную фишку. Вот что было вычеркнуто из ТЗ: * Переменные для цен и акций; * Всплывающее окно при уходе с предложением посмотреть другие товары компании (с сохранением utm-меток и без передачи веса ссылки); * Всплывающее окно с дополнительной проверкой правильности введенного номера телефона; * Добавление позиций в существующий заказ, если пользователь выберет дополнительные товары после отправки заявки; * Сложный калькулятор с обновлением цен, фотографий, идентификаторов в зависимости от выбора пользователя; * Разные сообщения об отправке заявки в зависимости от времени суток. Закономерно, что с такими упрощениями сайт на Тильде разгромно проиграл стандартному по самым важным показателям - конверсии (ниже в 2 раза) и цене заявки (дороже в 2,5 раза). Сравнение по показателям PageSpeed Insights тоже не в пользу экспериментального сайта. Мобильная версия, скорость загрузки: стандартный сайт - 90/100, сайт на Тильде - 42/100 Десктопная версия, скорость загрузки: стандартный сайт - 100/100, сайт на Тильде - 89/100. По срокам - получились те же 5 рабочих дней. Но если учесть, что сайт на Тильде делал сторонний разработчик с нуля и возникла пара итераций правок, потенциал для ускорения имеется. По большинству показателей, в том числе ключевых, сайт на Тильде оказался хуже, чем действующий сайт. Поэтому в качестве основной платформы Тильду больше не рассматриваем. Для некоторых проектов будем использовать, но большинство сайтов остается на текущем решении.

Я создал модуль статистики по рейсам при помощи chart.js.

Помогла мне не столько сама библиотека, сколько полученные в Хекслете знания. Главный разработчик оценил мой труд и дал хороший отзыв. До этого я часто слышал критику и горькую правду о своей работе, поэтому был рад получить положительный отзыв. Я работал в компании Евротранс, но в октябре этого года меня отправили на обучение в Хекслет. Мои первоначальные знания не позволяли решать сложные задачи, поэтому летом я остался без работы и полностью погрузился в обучение. Учебный процесс начался в июле и должен завершиться к маю 2024 года. У меня оставалось немного денег, а коммунальные услуги и зал требуют оплаты. К тому же нужно было кормить семью, поэтому я преодолел недопонимание по работе и получил задачи: Первая задача заключалась в написании валидации для формы редактирования/добавления пассажира в рейс. Получил фидбэк: "Очень классно получилось! Проверил, работает ли?". На душе стало так тепло 🤧. Вторая задача состояла в создании модуля статистики. Он состоит из двух графиков: первый показывает, кто сел и не сел на автобус, второй - покупки билетов по дате. Получил фидбэк: "Пока что всё сделано отлично! Графики можно разнести по разным файлам". Позже займусь рефакторингом, сейчас нужно высушить глаза 🥹. Я доволен, что смог подтянуть базовые навыки в js. Это помогает мне в работе. Я хочу завершить обучение и стать профессионалом в своём деле. Хочу напомнить, что я прошёл путь от верстальщика на фрилансе до фронтендера. Путь вперед бесконечен.

Как создать анимацию поворота карточки с помощью CSS

Поворот карточки при наведении на нее мышью - это популярная анимация, которую можно создать с помощью CSS. Когда пользователь наводит курсор мыши на карточку, она начинает поворачиваться вокруг оси и отображать свою обратную сторону. Для создания такой анимации можно использовать свойства CSS, transition и transform. Задаем для карточки свойство transition, которое определяет скорость и стиль анимации. Для видимой части карточки задаем свойства transform со значениями perspective(600px) rotateY(0) Для оборотной части карточки задаем свойства transform со значениями perspective(600px) rotateY(-180deg) Свойство transform определяет как карточка будет поворачиваться в 3D-пространстве. Затем создаем псевдокласс :hover, который будет активироваться при наведении на карточку мышью. Таким образом, при наведении курсора мыши на карточку, она будет плавно поворачиваться и отображать свою обратную сторону. Это может быть эффективным способом привлечь внимание пользователя и сделать ваш сайт более интерактивным. яжразработчик ольгаевдокимова сайтподключ кейс разработкасайтаподключ сайт визуал дизайнсайта интерфейсы верстка

Что делать, если сайт долго грузится?

Этот вопрос возникает у многих владельцев интернет-страниц. Особенно важен показатель скорости загрузки для коммерческих сайтов, ведь от этого зависит, захочет ли пользоваться остаться на сайте и совершить целевое действие. Проверить скорость загрузки сайта можно с помощью специальных сервисов и там же узнать, что и как стоит улучшить. Однако я расскажу об основых направлениях работы, с которыми столкнулась в недавних проектах. Итак, первый и самый частый - тяжеловесные фотографии. Тут способов решения вопроса несколько: проверить размер, уменьшить, если есть возможность. Сжать изображение с помощью конвертера. Добавить функцию отложенной загрузки изображений lazyload. Кстати, подобный способ поможет и с видео-файлами, если они обернуты в iframe. Следующая проблема - загрузка больших скриптов. Можно также сжать файлы скриптов через gzip, либо установить параметр асинхронной или отложенной загрузки для таких файлов. Разница в том, что атрибут async позволяет загружать файл параллельно с другими файлами, а атрибут defer в свою очередь откладывает загрузку файла до момента полного отображения верстки и DOM-элементов. Ну и последнее, с чем я столкнулась - это сторонние скрипты. В моем случае это были подключение счетчика метрики и гугл-рекапча. Обычными методами такие скрипты не отложить, т.к. их основа находится на стороне создателя, мы их только подключаем через ссылку. Однако, есть обходной путь для решения проблемы с рекапчей - прописать загрузку скрипта только в случае, если пользователь нажал на поле формы. С какими сложностями в оптимизации скорости загрузки сталкивались вы в своей практике?

Текст с эффектом смены цвета

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