QR-код – это очень распространенная техника кодирования информации в виде изображений. Он очень часто используется в физических магазинах для идентификации товаров, подобно тому, как используется штрих-код. Эта библиотека позволяет сканировать QR-код в веб-приложениях с помощью веб-камеры или камеры на смартфонах. Это простая библиотека размером 52 Кб, написанная на чистом js. В 2015 году я написал библиотеку для сканирования QR-кодов на основе HTML5 в качестве расширения jQuery. Недавно я заметил, что на моем проекте на Github и демонстрационной странице наблюдается постоянный трафик. Когда я углубился в суть происходящего, мне стало стыдно за плохой дизайн и устаревшую поддержку последних HTML API вокруг Camera. Недавно я исправил некоторые проблемы и подверг рефакторингу библиотеку javascript, которая теперь не зависит от jQuery и поддерживает API на основе Promise. В этой статье я объясню, как использовать новую версию библиотеки, некоторые изменения и их причины, а также существующие проблемы и планы по их устранению. Если говорить громко, то основными… Читать далее »
Как создать фиксированный заголовок при прокрутке Для удобства работы с сайтом часто разработчики используют фиксированную шапку сайта. Как сделать липки заголовок? достаточно просто, рассмотрим на примере: Шаг 1) добавить HTML: Пример <div class=»header» id=»myHeader»> <h2>My Header</h2> </div> Шаг 2) добавить CSS: Пример /* Style the header */ .header { padding: 10px 16px; background: #555; color: #f1f1f1; }/* Page content */ .content { padding: 16px; } /* The sticky class is added to the header with JS when it reaches its scroll position */ .sticky { position: fixed; top: 0; width: 100% } /* Add some top padding to the page content to prevent sudden quick movement (as the header gets a new position at the top of the page (position:fixed and top:0) */ .sticky + .content { padding-top: 102px; } Шаг 3) добавить JavaScript: Пример // When the user scrolls the page, execute myFunction window.onscroll = function() {myFunction()};// Get the header var header = document.getElementById(«myHeader»); // Get the offset position of the navbar var sticky = header.offsetTop; //… Читать далее »
С каждым годом стремительно растет количество интернет-пользователей, использующих мобильные платформы. И чтобы не потерять своего клиента, необходимо предоставить посетителю возможность позвонить прямо сейчас. Современные мобильные браузеры могут автоматически делать номер телефона на сайте кликабельным, но это работает не всегда (из-за разных написаний номера телефона). Наверное, многие из вас сталкивались с такой ситуацией, когда, заказывая какой-либо товар в интернет-магазине, приходилось уточнять некоторые вопросы по телефону. И для этого приходилось записывать номер телефона магазина на листочек / телефон друга, потом снова набирать в свой телефон, и только после этих манипуляций удавалось позвонить. А если телефон поддержки вдруг оказывался недоступен, приходилось всё это проделывать заново. Именно для того, чтобы решить эту проблему, был разработан способ, который отвечает на вопрос «Как правильно указывать номер телефона на сайте». Давайте разберемся, как разместить телефон на сайте и сделать его кликабельным. Сделать номер телефона кликабельным можно с помощью обыкновенной ссылки, но со специальным адресом: <a href=»tel:+799999999″>+7(999)-99-99-99</a> Или:… Читать далее »
Реклама — нужная вещь для любого сайта. Только стоимость инструментов для рекламы бывает выше дохода от нее. Вот тогда многие начинают мудрить, чтоб хоть немного сэкономить. Для таких «мудреных» мы и поведаем, как сделать баннер. Что такое баннеры Под баннером в интернете подразумевается прямоугольное рекламное изображение со статическим или динамическим (анимированным) содержимым. Баннер может включать в себя как текст, так и графический рисунок. Баннер, как правило, снабжен ссылкой, активирующейся после щелчка по нему кнопкой мыши. Новейшим этапом развития рекламы являются видео баннеры. Их содержимое проигрывается внутри баннера после наведения на него курсора, щелчка мышкой или загрузки страницы. Современный рост эффективности баннерной рекламы связан с использованием контекстного таргетинга. При этом на баннерах сайта рекламируют только те товары и услуги, которые «созвучны» с тематикой ресурса. Хорошо бы узнать, как можно сделать баннер для сайта. Но для начала нужно разобраться с существующими типами создание баннеров для сайта. Различают следующие их типы: Статические баннеры… Читать далее »
Таймер для сайта от e-timer Таймер для сайта — модуль от e-timer.ru — является бесплатным генератором таймера отсчета даты для сайта вашего сайта, который можно настроить онлайн. Подобные таймеры используют на сайтах в случае, если требуется необходимость показать посетителям сколько осталось времени до конца акции, начала мероприятия или окончания праздника. Таймеры обратного отсчета достаточно давно стали неотъемлемой частью Landing Page и «продающих сайтов». Таймер заставляет аудиторию действовать с определенной целью, загнать во временные рамки, создав эффект срочности и/или что-то типа дефицита товара. Но поиск и настройка подобных модулей может занимать достаточно много времени. На данном сервисе процесс подключение таймера упроститься до пары шагов: Вам потребуется установить дату или установить автоматический перезапуск; Настроить стилизацию таймера; Разместите полученный код на своем сайте.
Название Символ ASCII Спец. Табулятор 	 Перевод строки 
 Возврат каретки 
 Пробел   Восклицательный знак ! ! Двойная кавычка « " " Знак решетка # # Доллар $ $ Процент % % Амперсанд & & & Одинарная кавычка ‘ ' Скобка левая круглая ( ( Скобка правая круглая ) ) Звездочка * * Плюс + + Запятая , , Минус — - Точка . . Правый слэш / / Цифры 0-9 0-9 Двоеточие : : Точка с запятой ; ; Меньше < < Равно = = Больше > > Знак вопроса ? ? Знак собачка @ @ Прописные буквы A-Z A-Z Скобка квадратная левая [ [ Левый слэш \ Скобка квадратная правая ] ] Степень ^ ^ Знак подчеркивания _ _ Гравис ` ` Строчные буквы a-z a-z Фигурная скобка левая { { Вертикальная черта | | Фигурная скобка правая } } Тильда ~ ~ ˜ не определён … Читать далее »
Специальные символы HTML символ html-код десятичный код описание   неразрывный пробел     узкий пробел (еn-шириной в букву n)     широкий пробел (em-шириной в букву m) – – – узкое тире (en-тире) — — — широкое тире (em -тире) ­ ­ мягкий перенос а́ ́ ударение, ставится после «ударной» буквы © © © копирайт ® ® ® знак зарегистрированной торговой марки ™ ™ ™ знак торговой марки º º º копье Марса ª ª ª зеркало Венеры ‰ ‰ ‰ промилле π π π пи (используйте Times New Roman) ¦ ¦ ¦ вертикальный пунктир § § § параграф ° ° ° градус µ µ µ знак «микро» ¶ ¶ ¶ знак абзаца … … … многоточие ‾ ‾ ‾ надчеркивание ´ ´ ´ знак ударения № № знак номера 🔍 Лупа (наклонённая влево) 🔎 Лупа (наклонённая вправо) ☎ ☎ Телефон 💾 Дискета 🛠 Молоток и гаечный ключ, настройка… Читать далее »
В чем же особенности свойства height в процентах ? Из практики свойство height, если указать его в процентах, покажет высоту относительно родительского блока. Но на самом деле не все так красиво и просто. Естественно для произвольного div элемента height в процентом соотношении работать не будет! Сейчас наша цель – получить вёрстку такого вида: При этом блок в которой находиться левая стрелка должен быть отдельным элементом внутри контейнера. Данный способ удобен для дальнейшей работы с JS, чтобы принимать на нём клики мыши. То есть, HTML-код требуется примерно такой: <div class=»container»> <div class=»arrow»> <!— стрелка влево при помощи CSS, ширина фиксирована —> </div> <div class=»content»> …Текст… </div> </div> Как же это реализовать? Есть много разных вариантов, но, вероятнее всего, вы решились сдвинуть .arrow влево, при помощи функции float:left (учитывая то что он фиксированной ширины) и увеличить высоту до 100%, чтобы он занимал всё свободное пространство по вертикали. Но и тут есть свой подвох. Смотрим то, что будет происходить… Читать далее »
Как осуществить определение мобильных устройств? В наше время нам доступно большое множество различных мобильных браузеров и поэтому не будет лишним оптимизировать сайт и для мобилок. Но чтобы это сделать нам следует определить каким устройством пользуется человек открывший сайт. Существует несколько методов для этого которые мы и рассмотрим: 1. PHP User Agent При открытии браузером вашей страницы, он посылает данные о себе, включая post data, реферера, а также user agent. В данный момент можно проверить совместимость user agent по списку известных мобильных user agent, тем саммым перенаправить данного пользователя на другую, совместимую с его устройством страницу, или присвоить тот или иной CSS. Сам код очень прост, пример его: <?php //Список известных мобильных агентов $moiles = array(«iPhone»,»iPod»); foreach( $moiles as $moile ) { if( preg_match( «#».$moile.»#i», $_SERVER[‘HTTP_USER_AGENT’] ) ) { //Хорошо, это мобильный браузер, давайте перенаправить его! header(‘Location:https://moile.site.ru/’); exit(); } } ?> Данный код очень удобный, так как можно отключить текст, чтобы пользователи,… Читать далее »
