Web Мастерская | Блог

Блог

Web Мастерская

Адаптация сайта под мобильные устройства

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

Зачем нужна адаптация сайта под мобильные устройства?

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

Преимущества адаптивной версии:

Улучшается юзабилити и UX (опыт взаимодействия).
Рост показателя вовлечённости пользователей.
Положительное влияние на ранжирование в поисковиках (Google Mobile-Friendly Update).
Возможность выгодно выделиться среди конкурентов.

Методы адаптации сайта под мобильные устройства

Существует несколько подходов, которые позволяют адаптировать сайт под мобильные устройства:

Резиновая (responsive) верстка
Это...

Жалоба

Как передавать информер на другие сайты

HTML JavaScript PHP

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

С помощью JavaScript и JSONP (JSON with Padding)

Этот метод позволяет обойти политику безопасности браузера (Same Origin Policy), которая препятствует обмену данными между доменами.

Пример:
Информер на сайте (HTML):

<!-- index.html -->
<!DOCTYPE html>
<html lang="ru">
<head>
    <meta charset="UTF-8">
    <title>Инфомер</title>
</head>
<body>
    <div id="infomer"></div>
    <script src="https://example.com/informer.js"></script>
</body>
</html>

Сторонний сайт (informer.js):

// informer.js
(function() {
    var infomerDiv = document.getElementById('infomer');
    var scriptEl = document.createElement('script');
    scriptEl.src =

...

Жалоба

Namespace в JavaScript

JavaScript

В JavaScript нет понятия namespace в классическом понимании, как в языках вроде Java или C#, где namespaces — это особая структура для именования классов и модулей. Однако, есть похожие концепции, которые позволяют организовывать код и предотвращать конфликты имен:

Имена объектов (Object Namespaces)

Это простейший способ создать пространство имен. Вы создаете объект, в котором хранятся все ваши функции и переменные:

var MyApp = {};

MyApp.Utils = {
    add: function(a, b) { return a + b; },
    multiply: function(a, b) { return a * b; }
};

console.log(MyApp.Utils.add(2, 3)); // Output: 5

IIFE (Immediately Invoked Function Expression)

Это анонимная функция, которая исполняется сразу после объявления. Внутри нее можно объявлять приватные переменные и функции, доступные только внутри этой функции:

(function () {
    var privateVar = "I'm private";
    
    window.MyApp = {
        publicMethod: function() {
            console.log(privateVar);
        }

...

Жалоба

Как организовать код в JavaScript

JavaScript

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

Модульность

Одним из самых важных принципов является деление кода на модули. Каждый модуль должен отвечать за отдельную задачу и предоставлять четко определенное API.

CommonJS (require/exports): традиционный подход, используемый в Node.js.
ES Modules (import/export): современная спецификация, поддерживаемая большинством современных браузеров и Node.js.

Пример ES-модулей:

// utils.js
export function add(a, b) {
    return a + b;
}

// main.js
import { add } from './utils.js';
console.log(add(2, 3)); // 5

Namespace (Пространства имен)

Для избежания конфликтов имен в глобальном пространстве можно использовать namespaces:

var myApp = {};

myApp.utils = {
    add: function(a, b) {
        return a + b;
    }
};

console.log(myApp.utils.add(2, 3)); // 5

Блог: Names

...

Жалоба

Перевод rows в пиксели на JS и jQuery

JavaScript Библиотека JS

Представим, что есть такой textarea:

<textarea name="val[text]" rows="12" cols="50" id="text"></textarea>

И необходимо при помощи чистого JavaScript или jQuery получить значение rows="12" и перевести его в пиксели. Как это сделать в этой статье.

Для того чтобы получить значение атрибута rows и конвертировать его в пиксели на jQuery, нужно выполнить несколько шагов:

Получить значение атрибута rows с помощью jQuery.
Преобразовать это значение в пиксели, умножив на среднюю высоту строки.

Пример кода:

<!DOCTYPE html>
<html lang="ru">
<head>
    <meta charset="UTF-8">
    <title>Пример преобразования rows в пиксели</title>
    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
</head>
<body>
    <textarea name="val[text]" rows="12" cols="50" id="text"></textarea>

    <script>
        // Получаем значение атрибута rows
        var rowsCount = parseInt($('#text').attr('rows'));

        // Средняя высота строки обычно принимается равной 20 пикселям
        var

...

Жалоба