Web Мастерская

Блог :: 14.04.2024 05:04:40 pm

Практически каждый, кто хотел заработать на своем сайте, стремился заполучить возможность отображать на страницах своего сайта рекламные блоки AdSense. Ведь это по настоящему самая оплачиваемая реклама. Помню, бывали клики, за которые платили по 1,7 баксов. Сейчас реклама не отображается на территории РФ, по известным всем причинам. Кто-то это переживает, будто расстался со своим любимым человеком. Ладно, давайте не будем о грустном, а лучше повспоминаем, как это было! А было это похоже на то, что Google хотел загнать всех Вебмастеров под каблук.

У данной рекламной сети было огромное количество требований, нарушив, хоть одно из них, можно было получить по шапке. Самое страшное - это быть пойманным за клики по своей рекламе, за что немедленно выдавался пожизненный бан, а заработанные деньги, якобы, возвращались рекламодателям. Этого бана боялись, как огня, абсолютно все. При чем, не важно, кто кликал по твоей рекламе, ты сам или, какой-то школьник из Оренбурга, которого ты даже не знаешь. Вебмастер получив бан за скликивание рекламы, тут же летел на форум поддержки AdSense и писал тысячу сообщений, о том, что он не нарушал правил, что это не он. Ну, кто в это поверит? С тобой даже разговаривать не будут, разве что нахамят. А, ну да, могут сказать, что ты в любом случае виноват сам, если кликал ты, то знал во что залазишь, а если кликал не ты, то вина твоя, что не доглядел, что кто-то тебя скликивает. Подозрительная активность, так сказать. Удобная фишка для тех кому ты не...

Развернуть

Практически каждый, кто хотел заработать на своем сайте, стремился заполучить возможность отображать на страницах своего сайта рекламные блоки AdSense. Ведь это по настоящему самая оплачиваемая реклама. Помню, бывали клики, за которые платили по 1,7 баксов. Сейчас реклама не отображается на территории РФ, по известным всем причинам. Кто-то это переживает, будто расстался со своим любимым человеком. Ладно, давайте не будем о грустном, а лучше повспоминаем, как это было! А было это похоже на то, что Google хотел загнать всех Вебмастеров под каблук.

У данной рекламной сети было огромное количество требований, нарушив, хоть одно из них, можно было получить по шапке. Самое страшное - это быть пойманным за клики по своей рекламе, за что немедленно выдавался пожизненный бан, а заработанные деньги, якобы, возвращались рекламодателям. Этого бана боялись, как огня, абсолютно все. При чем, не важно, кто кликал по твоей рекламе, ты сам или, какой-то школьник из Оренбурга, которого ты даже не знаешь. Вебмастер получив бан за скликивание рекламы, тут же летел на форум поддержки AdSense и писал тысячу сообщений, о том, что он не нарушал правил, что это не он. Ну, кто в это поверит? С тобой даже разговаривать не будут, разве что нахамят. А, ну да, могут сказать, что ты в любом случае виноват сам, если кликал ты, то знал во что залазишь, а если кликал не ты, то вина твоя, что не доглядел, что кто-то тебя скликивает. Подозрительная активность, так сказать. Удобная фишка для тех кому ты не понравился, зашли на твой сайт, понажимали на рекламу, и привет тебе, горячий.

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

Бывало, что реклама переставала отображаться, без всякого бана. В дальнейшем выяснялось, что на странице, где находится рекламный блок, было написано стоп-слово. А так как мы сайт делали ИСКЛЮЧИТЕЛЬНО для AdSense, то и контент подгоняем под него. Исправляем стоп-слово, на синоним, возможно придется исправить несколько предложений, возможно и смысл текста, но да ладно, главное вернуть показы объявлений. После чего, долгая переписка на форуме поддержки рекламной сети, с которого выходишь, как оплеванный, объявления восстановились. Самое прикольное то, что у тебя реклама не отображается за одно слово, а у какого-то Васи, реклама во всех цветах, среди порнографии и прочих нарушений.

Форум поддержки AdSense - это место, где собрались, так сказать, ~~высшие умы~~, чтобы показывать Вебмастерам, какие они все тупые, что и дня не проживут, без их знаний. Все они смотрят с высока. И вместо того, чтобы помочь правильным ответом, тыкают правилами рекламной сети. Ну, других ответов, от ~~знатоков~~ я не видел.

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

В общем, такое мое воспоминание о рекламной сети AdSense. С ним я немного зарабатывал, но, когда его не стало, я понял, что все делал не для людей, а для того, чтобы только отображалась реклама.

Жалоба

2

Блог :: 12.12.2025 06:57:55 am

CSS: Как отменить float: left / right;

Чтобы отменить свойство float: left / right; в CSS, можно использовать несколько способов.

Использовать float: none;

Самый простой способ — это явно указать float: none; для элемента, чтобы отменить его плавающее положение:

ВыделитьCSS

.element {
    float: none;
}

Использовать clear: both;

Свойство clear позволяет отменить влияние плавающих элементов. Если вы хотите, чтобы следующий элемент не обтекал плавающий элемент, используйте clear: both;:

ВыделитьCSS

.element {
    clear: both;
}

Использовать overflow: hidden; или overflow: auto;

Если вы хотите отменить плавание для родительского элемента, можно использовать overflow: hidden; или overflow: auto;. Это заставит родительский элемент обрезать плавающие элементы и не позволять им выходить за его пределы:

ВыделитьCSS

.parent-element {
    overflow: hidden;
}

Использовать display: block; или display: inline-block;

Если вы хотите отменить плавание и вернуть элемент к нормальному потоку документа, можно использовать display: block; или display: inline-block;:

ВыделитьCSS

.element {
    display: block;
}

Пример

ВыделитьHTML

<!DOCTYPE html>
<html lang="ru">
<head>
    <meta charset="UTF-8">
    <title>Отмена float</title>
    <style>
        .float-left {
            float: left;
            width: 100px;
            height: 100px;
            background-color: lightblue;
            margin: 10px;
        }

        .no-float {
            float: none;
            background-color: lightcoral;
        }

...

Развернуть

Чтобы отменить свойство float: left / right; в CSS, можно использовать несколько способов.

Использовать float: none;

Самый простой способ — это явно указать float: none; для элемента, чтобы отменить его плавающее положение:

ВыделитьCSS

.element {
    float: none;
}

Использовать clear: both;

Свойство clear позволяет отменить влияние плавающих элементов. Если вы хотите, чтобы следующий элемент не обтекал плавающий элемент, используйте clear: both;:

ВыделитьCSS

.element {
    clear: both;
}

Использовать overflow: hidden; или overflow: auto;

Если вы хотите отменить плавание для родительского элемента, можно использовать overflow: hidden; или overflow: auto;. Это заставит родительский элемент обрезать плавающие элементы и не позволять им выходить за его пределы:

ВыделитьCSS

.parent-element {
    overflow: hidden;
}

Использовать display: block; или display: inline-block;

Если вы хотите отменить плавание и вернуть элемент к нормальному потоку документа, можно использовать display: block; или display: inline-block;:

ВыделитьCSS

.element {
    display: block;
}

Пример

ВыделитьHTML

<!DOCTYPE html>
<html lang="ru">
<head>
    <meta charset="UTF-8">
    <title>Отмена float</title>
    <style>
        .float-left {
            float: left;
            width: 100px;
            height: 100px;
            background-color: lightblue;
            margin: 10px;
        }

        .no-float {
            float: none;
            background-color: lightcoral;
        }
    </style>
</head>
<body>
    <div class="float-left">Плавающий элемент</div>
    <div class="no-float">Отменённый плавающий элемент</div>
</body>
</html>

Итог: Чтобы отменить float: left / right;, используйте float: none; или другие методы, такие как clear, overflow или display. Это позволит вернуть элемент в нормальный поток документа и отменить его плавающее положение.

Жалоба

Блог :: 10.12.2025 07:43:04 am

Манипуляция SVG с помощью JavaScript

Scalable Vector Graphics (SVG) — это формат векторной графики, широко используемый в веб-разработке. Одним из мощных инструментов для работы с SVG является JavaScript, который позволяет динамически изменять атрибуты, стили и поведение SVG-элементов.

В этой статье мы рассмотрим основные приемы манипуляции SVG с помощью JavaScript.

Доступ к SVG-элементам

Для того чтобы манипулировать SVG-элементами, нужно сначала получить доступ к ним с помощью JavaScript. Вот несколько способов:

Получение элемента по ID:

ВыделитьJavaScript

let svgCircle = document.getElementById('myCircle');

Получение элементов по классу:

ВыделитьJavaScript

let circles = document.getElementsByClassName('circle');

Получение всех элементов SVG:

ВыделитьJavaScript

let svgElements = document.querySelectorAll('svg *');

Изменение атрибутов SVG

Один из самых частых способов манипуляции SVG — это изменение атрибутов элементов. Вот несколько примеров:

Изменение цвета заливки и обводки:

ВыделитьJavaScript

let circle = document.getElementById('myCircle');
circle.setAttribute('fill', 'blue');
circle.setAttribute('stroke', 'red');
circle.setAttribute('stroke-width', '2');

Изменение размеров и положения:

ВыделитьJavaScript

let rectangle = document.getElementById('myRectangle');
rectangle.setAttribute('width', '100');
rectangle.setAttribute('height', '50');
rectangle.setAttribute('x', '50');
rectangle.setAttribute('y', '50');

Изменение пути (path):

ВыделитьJavaScript

let path =

...

Развернуть

Жалоба

Блог :: 10.12.2025 07:20:05 am

Простые и эффективные техники анимации SVG с GSAP

GreenSock Animation Platform (GSAP) — это мощная библиотека для создания качественной анимации в веб-пространстве. Вместе с SVG GSAP позволяет создавать потрясающе выглядящие и интерактивные элементы. В этой статье мы рассмотрим простые и эффективные техники, которые помогут оживить SVG с помощью GSAP.

Введение в GSAP и SVG

Что такое GSAP?
GSAP — это высокопроизводительная библиотека для анимации, позволяющая анимировать практически любые CSS-свойства и DOM-элементы. В отличие от CSS-анимации, GSAP предлагает больший контроль и лёгкость управления.

Как подключить GSAP?
Подключить GSAP можно через CDN:

ВыделитьHTML

<script src="https://cdn.jsdelivr.net/npm/gsap@3/dist/gsap.min.js"></script>

Простые техники анимации SVG с GSAP

Анимация движения (Motion Path)
GSAP позволяет анимировать путь (motion path) по траектории, заданной в SVG. Это особенно полезно для создания плавных перемещений объектов:

ВыделитьHTML

<svg viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg">
    <path d="M10,10 Q50,90 90,10" id="motion-path" />
    <circle cx="10" cy="10" r="5" fill="red" id="ball" />
</svg>

ВыделитьJavaScript

gsap.to("#ball", {
    duration: 2,
    motionPath: "#motion-path",
    repeat: -1,
    yoyo: true
});

Масштабирование и вращения
Можно легко анимировать масштаб и угол поворота элементов SVG:

ВыделитьHTML

<svg viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg">
    <rect x="20" y="20" width="60" height="60" fill="blue" id="square" />
</svg>

ВыделитьJavaScript

gsap.fro

...

Развернуть

Жалоба

Блог :: 09.12.2025 06:58:16 pm

Практическое руководство по SVG в CSS

Scalable Vector Graphics (SVG) — это технология векторной графики, широко используемая в веб-дизайне для создания иконок, логотипов, диаграмм и анимации. SVG идеально интегрируются с CSS, что позволяет динамически манипулировать их формой, цветом и анимацией.

В этом руководстве мы рассмотрим, как использовать SVG в CSS, и поговорим о базовых приемах работы с SVG.

Основы SVG и CSS

Что такое SVG? SVG — это XML-формат, который описывает графику в виде вектора. В отличие от растровых изображений (JPEG, PNG), SVG можно масштабировать без потери качества, что делает его идеальным для веб-интерфейсов.

Интеграция SVG в HTML и CSS
SVG можно подключить тремя основными способами:

1. Прямо в HTML:

ВыделитьHTML

<svg viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg">
    <circle cx="50" cy="50" r="40" fill="blue" />
</svg>

2. Импорт через CSS:

ВыделитьCSS

.icon {
    background-image: url('icon.svg');
    width: 50px;
    height: 50px;
}

3. Вставка через <object> или <iframe>:

ВыделитьHTML

<object type="image/svg+xml" data="icon.svg" width="50" height="50"></object>

Управление SVG через CSS

1. Цвет и заливка
Цвет заливки и обводки можно изменить через CSS:

ВыделитьCSS

.circle {
    fill: red; /* Заливка */
    stroke: blue; /* Обводка */
    stroke-width: 2; /* Толщина обводки */
}

2. Трансформация и анимация
SVG легко поддается трансформации и анимации с помощью CSS:

ВыделитьCSS

.rotate-icon {
    animation: rotate 2s infinite linear;
}

@keyframes rotate {
    from {

...

Развернуть

Scalable Vector Graphics (SVG) — это технология векторной графики, широко используемая в веб-дизайне для создания иконок, логотипов, диаграмм и анимации. SVG идеально интегрируются с CSS, что позволяет динамически манипулировать их формой, цветом и анимацией.

В этом руководстве мы рассмотрим, как использовать SVG в CSS, и поговорим о базовых приемах работы с SVG.

Основы SVG и CSS

Что такое SVG? SVG — это XML-формат, который описывает графику в виде вектора. В отличие от растровых изображений (JPEG, PNG), SVG можно масштабировать без потери качества, что делает его идеальным для веб-интерфейсов.

Интеграция SVG в HTML и CSS
SVG можно подключить тремя основными способами:

1. Прямо в HTML:

ВыделитьHTML

<svg viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg">
    <circle cx="50" cy="50" r="40" fill="blue" />
</svg>

2. Импорт через CSS:

ВыделитьCSS

.icon {
    background-image: url('icon.svg');
    width: 50px;
    height: 50px;
}

3. Вставка через <object> или <iframe>:

ВыделитьHTML

<object type="image/svg+xml" data="icon.svg" width="50" height="50"></object>

Управление SVG через CSS

1. Цвет и заливка
Цвет заливки и обводки можно изменить через CSS:

ВыделитьCSS

.circle {
    fill: red; /* Заливка */
    stroke: blue; /* Обводка */
    stroke-width: 2; /* Толщина обводки */
}

2. Трансформация и анимация
SVG легко поддается трансформации и анимации с помощью CSS:

ВыделитьCSS

.rotate-icon {
    animation: rotate 2s infinite linear;
}

@keyframes rotate {
    from { transform: rotate(0deg); }
    to { transform: rotate(360deg); }
}

3. Адаптация размеров
Масштабирование SVG можно производить с помощью CSS:

ВыделитьCSS

.resize-icon {
    width: 100px;
    height: 100px;
}

Примеры использования SVG в CSS

Пример 1: Иконка с анимацией

ВыделитьHTML

<svg class="loading-icon" viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg">
    <circle cx="50" cy="50" r="40" fill="#cccccc" />
</svg>

ВыделитьCSS

.loading-icon circle {
    animation: pulse 1s infinite alternate;
}

@keyframes pulse {
    from { fill: #cccccc; }
    to { fill: #ff0000; }
}

Пример 2: Градиентная заливка

ВыделитьHTML

<svg class="gradient-circle" viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg">
    <defs>
        <linearGradient id="grad1" x1="0%" y1="0%" x2="100%" y2="0%">
            <stop offset="0%" stop-color="red" />
            <stop offset="100%" stop-color="blue" />
        </linearGradient>
    </defs>
    <circle cx="50" cy="50" r="40" fill="url(#grad1)" />
</svg>

Заключение

SVG — это невероятно мощный инструмент для веб-дизайна, который тесно интегрируется с CSS. Благодаря поддержке векторной графики и возможностей CSS, SVG позволяет создавать адаптивные, масштабируемые и интерактивные элементы интерфейса.

Освоив эти базовые техники, ты сможешь эффективно использовать SVG в своих проектах и создавать профессиональные и функциональные веб-компоненты.

Блог: CSS переменные в SVG

Жалоба

Заметка :: 09.12.2025 03:36:11 pm

SWeb: С 29 декабря 2025 года цены на домены и SSL-сертификаты изменятся в связи с увеличением НДС.

С 1 января НДС в России увеличивается до 22%. Мы корректируем цены, чтобы компенсировать рост налоговой нагрузки и продолжать предоставлять качественный сервис.

Что делать:
Продлите домены и SSL в декабре — сохраните текущие цены на год.

Жалоба

Опрос :: 09.12.2025 07:41:55 am

Стоит ли делать сайт обо всём на свете?

Что вы думаете о создании сайта, который охватывает множество тем и сфер жизни? Хотели бы вы посещать портал, где можно найти информацию по любым вопросам, или предпочитаете специализированные ресурсы?

Выберите один из вариантов ответа:

ДА, это отличная идея: Хочу иметь доступ к большому объему информации на одном ресурсе. Удобно, когда не нужно искать информацию по разным сайтам.
Не уверен(а): С одной стороны, удобно, что всё собрано в одном месте, но боюсь, что качество контента пострадает.
НЕТ, лучше специализированные сайты: Предпочитаю сайты, которые специализируются на определенной теме. Там проще найти нужную информацию и глубже изучить вопрос.
По-другому: Нужен гибрид специализированных и общих сайтов. Ресурс, который объединяет разные тематики, но с качественным и глубоким контентом.

Поделитесь в комментариях: напишите, почему вы проголосовали именно так и какие ресурсы посещаете чаще всего!

Статистика доступна после голосования Публичный опрос

Жалоба

1

09.12.2025 09:13:47 am

Создавать сайт не имеющего конкретной темы - это отличная идея:
1. У человека могут быть множество хобби, и о всех он хочет рассказывать.
2. Человек просто хочет работать над своим сайтом, но с тематикой ни как не может определиться. В процессе работы сразу с несколькими темами, человек может выбрать, что ему ближе. Ну, или продолжать говорить обо всём сразу.

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

Жалоба

0

Блог :: 08.12.2025 07:40:50 am

CSS Flexbox: Руководство для начинающих

CSS Flexbox — это мощный инструмент для создания гибких и адаптивных макетов. Flexbox позволяет легко управлять расположением элементов, их выравниванием и распределением свободного пространства.

В этой статье мы познакомимся с основами Flexbox и научимся решать типичные задачи с его помощью.

Часть 1: Основы Flexbox

Что такое Flexbox?
Flexbox — это модуль CSS, разработанный для облегчения создания гибких и адаптивных макетов. Он основан на концепции гибких контейнеров и элементов, которые могут динамически перераспределять пространство между собой.

Основные понятия Flexbox:

Flex Container: родительский элемент, который управляет расположением дочерних элементов.
Flex Items: дочерние элементы, которые располагаются внутри контейнера.

Как создать Flexbox?
Чтобы превратить элемент в Flexbox-контейнер, нужно добавить свойство:

ВыделитьCSS

.container {
    display: flex;
}

Теперь все дочерние элементы контейнера станут flex-элементами.

Часть 2: Основные свойства Flexbox

1. Направление и ось

flex-direction: задает направление, вдоль которого располагаются элементы.

Возможные значения:

row (по умолчанию): элементы располагаются горизонтально слева направо.
column: элементы располагаются вертикально сверху вниз.
row-reverse: элементы располагаются горизонтально справа налево.
column-reverse: элементы располагаются вертикально снизу вверх.

Пример:

ВыделитьCSS

.container {
    display: flex;
    flex-direction: row; /* горизонтальное расположение */
}

2. Выравнивание элементов

justify-content

...

Развернуть

Жалоба

Блог :: 08.12.2025 06:43:44 am

CSS: Как заставить текст вписываться в одну строку

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

white-space: nowrap; — запрещает перенос текста на новую строку.
overflow: hidden; — скрывает текст, выходящий за пределы блока.
text-overflow: ellipsis; — добавляет многоточие (…) в конце текста, если он не помещается.

Эти свойства работают совместно, чтобы добиться желаемого эффекта.

Пример

ВыделитьCSS

.text-container {
    width: 200px; /* Ограничиваем ширину блока */
    white-space: nowrap; /* Запрещаем перенос текста */
    overflow: hidden; /* Скрываем текст, выходящий за пределы */
    text-overflow: ellipsis; /* Добавляем многоточие */
}

ВыделитьHTML

<div class="text-container">
    Очень длинный текст, который не поместится в одну строку и должен обрываться многоточием.
</div>

Как это работает

white-space: nowrap; — запрещает тексту переноситься на новую строку, что позволяет нам видеть весь текст в одну строку.
overflow: hidden; — скрывает часть текста, выходящую за пределы блока.
text-overflow: ellipsis; — добавляет многоточие (…) в конце строки, если текст не помещается.

Важные моменты

Для корректной работы этих свойств необходимо задать фиксированную ширину блоку.
Без свойства overflow: hidden; многоточие не появится.
Многоточие добавляется только в конце последней строки, если текст не помещается.

Используя комбинации трёх свойств...

Развернуть

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

white-space: nowrap; — запрещает перенос текста на новую строку.
overflow: hidden; — скрывает текст, выходящий за пределы блока.
text-overflow: ellipsis; — добавляет многоточие (…) в конце текста, если он не помещается.

Эти свойства работают совместно, чтобы добиться желаемого эффекта.

Пример

ВыделитьCSS

.text-container {
    width: 200px; /* Ограничиваем ширину блока */
    white-space: nowrap; /* Запрещаем перенос текста */
    overflow: hidden; /* Скрываем текст, выходящий за пределы */
    text-overflow: ellipsis; /* Добавляем многоточие */
}

ВыделитьHTML

<div class="text-container">
    Очень длинный текст, который не поместится в одну строку и должен обрываться многоточием.
</div>

Как это работает

white-space: nowrap; — запрещает тексту переноситься на новую строку, что позволяет нам видеть весь текст в одну строку.
overflow: hidden; — скрывает часть текста, выходящую за пределы блока.
text-overflow: ellipsis; — добавляет многоточие (…) в конце строки, если текст не помещается.

Важные моменты

Для корректной работы этих свойств необходимо задать фиксированную ширину блоку.
Без свойства overflow: hidden; многоточие не появится.
Многоточие добавляется только в конце последней строки, если текст не помещается.

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

Жалоба

Блог :: 03.12.2025 07:15:27 am

Как хранить данные в виде массива в Базе Данных

Хранение данных в виде массива в базе данных — распространённая практика, особенно когда приходится работать с разнородными или динамическими данными. Однако традиционные реляционные базы данных (например, MySQL) не поддерживают хранение массивов напрямую. Рассмотрим лучшие практики хранения и обработки таких данных.

Варианты хранения массивов в базе данных

Тип данных JSON: Начиная с версии MySQL 5.7 появился тип данных JSON, позволяющий хранить массивы и объекты в виде JSON-строки. Это наиболее удобное и современное решение.
Сериялизация: Можно сериализовать массив с помощью PHP-функций serialize() или json_encode() и сохранить результат в виде строки в поле типа TEXT или BLOB.
Нормализация: Нормализация данных подразумевает создание отдельной таблицы для хранения элементов массива. Это идеальный подход с точки зрения дизайна базы данных, но иногда неудобен в эксплуатации.

Пример использования JSON

Допустим, у тебя есть таблица users с полем settings типа JSON:

ВыделитьSQL

CREATE TABLE users (
    id INT AUTO_INCREMENT PRIMARY KEY,
    name VARCHAR(255),
    settings JSON
);

INSERT INTO users (name, settings) VALUES ('Алексей', '{"theme": "dark", "notifications": ["email", "sms"]}');

Обработка данных

Для работы с JSON-полями в MySQL доступны специализированные функции, такие как JSON_EXTRACT(), JSON_CONTAINS() и другие.

Пример:

ВыделитьPHP

<?php
// Получаем данные из базы
$stmt = $pdo->query("SELECT settings FROM users WHERE name='Алексей'");
$row =

...

Развернуть

Хранение данных в виде массива в базе данных — распространённая практика, особенно когда приходится работать с разнородными или динамическими данными. Однако традиционные реляционные базы данных (например, MySQL) не поддерживают хранение массивов напрямую. Рассмотрим лучшие практики хранения и обработки таких данных.

Варианты хранения массивов в базе данных

Тип данных JSON: Начиная с версии MySQL 5.7 появился тип данных JSON, позволяющий хранить массивы и объекты в виде JSON-строки. Это наиболее удобное и современное решение.
Сериялизация: Можно сериализовать массив с помощью PHP-функций serialize() или json_encode() и сохранить результат в виде строки в поле типа TEXT или BLOB.
Нормализация: Нормализация данных подразумевает создание отдельной таблицы для хранения элементов массива. Это идеальный подход с точки зрения дизайна базы данных, но иногда неудобен в эксплуатации.

Пример использования JSON

Допустим, у тебя есть таблица users с полем settings типа JSON:

ВыделитьSQL

CREATE TABLE users (
    id INT AUTO_INCREMENT PRIMARY KEY,
    name VARCHAR(255),
    settings JSON
);

INSERT INTO users (name, settings) VALUES ('Алексей', '{"theme": "dark", "notifications": ["email", "sms"]}');

Обработка данных

Для работы с JSON-полями в MySQL доступны специализированные функции, такие как JSON_EXTRACT(), JSON_CONTAINS() и другие.

Пример:

ВыделитьPHP

<?php
// Получаем данные из базы
$stmt = $pdo->query("SELECT settings FROM users WHERE name='Алексей'");
$row = $stmt->fetch(PDO::FETCH_ASSOC);

// Преобразуем JSON в массив
$settings = json_decode($row['settings'], true);

// Выводим данные
echo $settings['theme']; // dark
print_r($settings['notifications']); // Array ( [0] => email [1] => sms )
?>

Совет по использованию JSON

Индексация: Поля типа JSON не подлежат индексации напрямую. Если планируется интенсивный поиск по JSON-данным, рассмотрите возможность выделения ключевых данных в отдельные поля.
Совместимость: JSON-поддержка доступна только в последних версиях MySQL (5.7 и новее).

Итог: Теперь у тебя есть полное представление о том, как хранить и обрабатывать данные в виде массива в базе данных. Главное помнить, что современные базы данных предлагают удобные инструменты для работы с JSON, делая этот подход оптимальным для большинства задач.

Жалоба

Блог :: 26.11.2025 07:23:03 am

Как предоставить сторонним сайтам доступ к вашим файлам для получения информации

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

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

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

Как это сделать?

Использование API: Создайте RESTful API, который предоставляет доступ к информации в формате JSON или XML. Сторонние сайты могут отправлять запросы и получать данные.
Файлы для скачивания: Поставьте файлы в общедоступную директорию или создайте защищённый доступ с помощью авторизации.
RSS-каналы: Предоставьте RSS-канал с актуальными данными, чтобы сторонние сайты могли автоматически получать обновления.
CDN (Content Delivery Network): Разместите файлы на CDN для быстрого и надежного доступа из любой точки мира.

Пример создания API для предоставления информации

Допустим, вы хотите предоставить доступ к списку товаров на своём сайте. Вот как это можно сделать:

1. Создание API:

ВыделитьPHP

<?php
// Файл api/products.php

// Подключение к базе данных
$mysqli = new mysqli("localhost", "user", "password", "database");

// Получение данных
$sql = "SELECT * FROM products";
$result =

...

Развернуть

Жалоба

Блог :: 25.11.2025 07:26:30 am

Как создать виджет для встраивания в сторонние сайты

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

Что такое виджет?

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

Какие задачи решает виджет?

Предоставление дополнительного функционала на сайтах партнёров.
Увеличение узнаваемости бренда и привлечение трафика.
Возможность монетизации (например, реклама или платные услуги).

Как создать виджет?

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

Пример создания виджета

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

ВыделитьHTML

<div id="event-widget">

...

Развернуть

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

Что такое виджет?

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

Какие задачи решает виджет?

Предоставление дополнительного функционала на сайтах партнёров.
Увеличение узнаваемости бренда и привлечение трафика.
Возможность монетизации (например, реклама или платные услуги).

Как создать виджет?

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

Пример создания виджета

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

ВыделитьHTML

<div id="event-widget">
    <h2>Ближайшие мероприятия:</h2>
    <ul id="events-list"></ul>
</div>

ВыделитьCSS

#event-widget {
    border: 1px solid #ccc;
    padding: 10px;
    width: 300px;
}

#events-list li {
    margin-bottom: 5px;
}

ВыделитьJavaScript

document.addEventListener('DOMContentLoaded', function() {
    const events = [
        { date: '2023-10-15', title: 'Встреча разработчиков' },
        { date: '2023-10-20', title: 'Семинар по маркетингу' }
    ];

    const eventsList = document.getElementById('events-list');

    events.forEach(event => {
        const li = document.createElement('li');
        li.textContent = `${event.date}: ${event.title}`;
        eventsList.appendChild(li);
    });
});

Предоставление кода для встраивания
Создайте простую страницу с примером внедрения виджета:

ВыделитьHTML

<!DOCTYPE html>
<html lang="ru">
<head>
    <meta charset="UTF-8">
    <title>Виджеты для сайтов</title>
    <!-- Подключаем стили -->
    <link rel="stylesheet" href="widget.css">
</head>
<body>
    <!-- HTML-код виджета -->
    <div id="event-widget">
        <h2>Ближайшие мероприятия:</h2>
        <ul id="events-list"></ul>
    </div>

    <!-- Подключаем JavaScript -->
    <script src="widget.js"></script>
</body>
</html>

Советы по созданию виджетов

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

Заключение

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

Жалоба

Блог :: 10.11.2025 06:09:07 pm

Пути: Основы, примеры практики

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

Что такое пути?

Пути позволяют указывать расположение файлов и папок относительно текущего файла или корневой папки проекта. Они могут быть относительными или абсолютными.

Основные понятия

1. Относительные пути
Относительные пути указывают расположение файла относительно текущего файла. Они начинаются с точки (./) или двойной точки (../).

./: Указывает на текущую папку.
../: Указывает на родительскую папку.

2. Абсолютные пути
Абсолютные пути указывают расположение файла относительно корневой папки проекта. Они начинаются с слэша (/).

/: Указывает на корневую папку проекта.

Пример использования путей

Пример структуры папок и файлов:

Выделить

project/
├── index.html
├── main.js
├── getter.js
└── modules/
    └── row.js

Пример использования относительных путей:

Выделить

import { getterTranslation } from './getter.js';
import { rowFunction } from './modules/row.js';

Объяснение:

./getter.js: Указывает на файл getter.js, который находится в той же папке, что и текущий файл.
./modules/row.js: Указывает на файл row.js, который находится в папке modules, которая находится в той же папке, что и текущий файл.

Пример использования абсолютных путей:

Выделить

import { getterTranslation } from '/getter.js';

Объяснение:

/getter.js: Указывает на файл getter.js, который находится в

...

Развернуть

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

Что такое пути?

Пути позволяют указывать расположение файлов и папок относительно текущего файла или корневой папки проекта. Они могут быть относительными или абсолютными.

Основные понятия

1. Относительные пути
Относительные пути указывают расположение файла относительно текущего файла. Они начинаются с точки (./) или двойной точки (../).

./: Указывает на текущую папку.
../: Указывает на родительскую папку.

2. Абсолютные пути
Абсолютные пути указывают расположение файла относительно корневой папки проекта. Они начинаются с слэша (/).

/: Указывает на корневую папку проекта.

Пример использования путей

Пример структуры папок и файлов:

Выделить

project/
├── index.html
├── main.js
├── getter.js
└── modules/
    └── row.js

Пример использования относительных путей:

Выделить

import { getterTranslation } from './getter.js';
import { rowFunction } from './modules/row.js';

Объяснение:

./getter.js: Указывает на файл getter.js, который находится в той же папке, что и текущий файл.
./modules/row.js: Указывает на файл row.js, который находится в папке modules, которая находится в той же папке, что и текущий файл.

Пример использования абсолютных путей:

Выделить

import { getterTranslation } from '/getter.js';

Объяснение:

/getter.js: Указывает на файл getter.js, который находится в корневой папке проекта.

Как использовать пути в HTML?

Подключай файлы с модулями к HTML странице с помощью тега <script> с атрибутом type="module".

Выделить

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <button id="myButton">Нажми меня</button>

    <script type="module" src="main.js"></script>
</body>
</html>

Как избежать ошибок при использовании путей?

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

Итог: Пути позволяют указывать расположение файлов и папок относительно текущего файла или корневой папки проекта. Они могут быть относительными или абсолютными. Это упрощает разработку и поддержку больших проектов.

Жалоба

Блог :: 10.11.2025 12:25:20 pm

JavaScript: Модули

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

Что такое модули в JavaScript?

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

Основные понятия

1. Импортирование и экспортирование

import: Используется для импорта функций и переменных из других файлов.
export: Используется для экспорта функций и переменных, чтобы сделать их доступными для других файлов.

2. Модульный подход

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

Пример использования модулей

Файл module1.js:

Выделить

// Экспорт функции
export function module1Function() {
    console.log('Функция из module1.js вызвана');
}

Файл module2.js:

Выделить

// Импорт функции из module1.js
import { module1Function } from './module1.js';

// Экспорт функции
export function module2Function() {
    module1Function(); // Вызов функции из module1.js
    console.log('Функция из module2.js вызвана');
}

Файл main.js:

Выделить

// Импорт функций из module1.js и module2.js
import { module1Function } from './module1.js';
import { module2Function } from './module2.js';

// Функция, которая использует

...

Развернуть

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

Что такое модули в JavaScript?

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

Основные понятия

1. Импортирование и экспортирование

import: Используется для импорта функций и переменных из других файлов.
export: Используется для экспорта функций и переменных, чтобы сделать их доступными для других файлов.

2. Модульный подход

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

Пример использования модулей

Файл module1.js:

Выделить

// Экспорт функции
export function module1Function() {
    console.log('Функция из module1.js вызвана');
}

Файл module2.js:

Выделить

// Импорт функции из module1.js
import { module1Function } from './module1.js';

// Экспорт функции
export function module2Function() {
    module1Function(); // Вызов функции из module1.js
    console.log('Функция из module2.js вызвана');
}

Файл main.js:

Выделить

// Импорт функций из module1.js и module2.js
import { module1Function } from './module1.js';
import { module2Function } from './module2.js';

// Функция, которая использует module1Function и module2Function
function mainFunction() {
    module1Function(); // Вызов функции из module1.js
    module2Function(); // Вызов функции из module2.js
    console.log('Функция mainFunction вызвана');
}

// Вызов mainFunction при загрузке страницы
document.addEventListener('DOMContentLoaded', mainFunction);

Как импортировать несколько функций из одного файла?

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

Выделить

import {
    module1Function,
    anotherFunction,
    thirdFunction
} from './module1.js';

Как избежать циклических зависимостей?

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

Как использовать модули в HTML?

Подключай файлы с модулями к HTML странице с помощью тега <script> с атрибутом type="module":

Выделить

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <button id="myButton">Нажми меня</button>

    <script type="module" src="main.js"></script>
</body>
</html>

Как вызвать функцию из другого файла?

Чтобы вызвать функцию из другого файла, нужно импортировать её с помощью оператора import:

Выделить

import { module1Function } from './module1.js';

document.getElementById('myButton').addEventListener('click', function() {
    module1Function(); // Вызов функции из module1.js
});

Как использовать глобальные переменные?

Если функция из главного файла должна быть доступна в импортированном файле, можно использовать глобальные переменные или объект window:

Выделить

window.mainFunction = function() {
    console.log('Функция из главного файла вызвана');
};

Как избежать ошибок при использовании модулей?

Подъём (Hoisting): Функции и переменные, объявленные с помощью var, function и let, поднимаются (hoisting) в верхнюю часть своего контекста выполнения. Это означает, что функция может быть вызвана до её объявления, если она объявлена с помощью синтаксиса function declaration.
Модульный подход: Экспортируй функции из одного файла и импортируй их в другом. Это более современный и безопасный подход.
Использование window: Присвой функцию свойству объекта window, чтобы сделать её глобальной.

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

Жалоба

Блог :: 08.11.2025 05:12:29 pm

Работа с фоном в CSS: Как правильно масштабировать и центрировать изображения

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

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

Основные свойства для работы с фоном

1. background-image
Это свойство задает изображение, которое будет использоваться в качестве фона:

Выделить

background-image: url('path/to/your/image.jpg');

2. background-size
Это свойство управляет размером фонового изображения. Есть два основных значения:

cover: Масштабирует изображение так, чтобы оно полностью покрывало контейнер, обрезая при необходимости.
contain: Масштабирует изображение так, чтобы оно полностью помещалось в контейнер, оставляя пустые области по краям.

Пример использования:

Выделить

background-size: cover; /* Полное покрытие контейнера */
background-size: contain; /* Полное помещение в контейнер */

3. background-position
Это свойство позволяет центрировать фон по горизонтали и вертикали:

Выделить

background-position: center; /* Центрируем фон */

4. background-repeat
Это свойство управляет повторением фона:

Выделить

background-repeat: no-repeat; /* Фон не повторяется */

Пример использования

Допустим, у нас есть контейнер с идентификатором #display, и мы хотим, чтобы фон всегда был виден по центру и покрывал весь контейнер:

Выделить

#display {

...

Развернуть

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

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

Основные свойства для работы с фоном

1. background-image
Это свойство задает изображение, которое будет использоваться в качестве фона:

Выделить

background-image: url('path/to/your/image.jpg');

2. background-size
Это свойство управляет размером фонового изображения. Есть два основных значения:

cover: Масштабирует изображение так, чтобы оно полностью покрывало контейнер, обрезая при необходимости.
contain: Масштабирует изображение так, чтобы оно полностью помещалось в контейнер, оставляя пустые области по краям.

Пример использования:

Выделить

background-size: cover; /* Полное покрытие контейнера */
background-size: contain; /* Полное помещение в контейнер */

3. background-position
Это свойство позволяет центрировать фон по горизонтали и вертикали:

Выделить

background-position: center; /* Центрируем фон */

4. background-repeat
Это свойство управляет повторением фона:

Выделить

background-repeat: no-repeat; /* Фон не повторяется */

Пример использования

Допустим, у нас есть контейнер с идентификатором #display, и мы хотим, чтобы фон всегда был виден по центру и покрывал весь контейнер:

Выделить

#display {
    background-image: url('path/to/your/image.jpg');
    background-size: cover; /* Масштабируем фон, чтобы он покрывал весь контейнер */
    background-position: center; /* Центрируем фон по горизонтали и вертикали */
    background-repeat: no-repeat; /* Фон не повторяется */
    height: 100vh; /* Высота на всю высоту экрана */
    width: 100%; /* Ширина на всю ширину экрана */
}

Если же важно, чтобы изображение было видно полностью, можно использовать contain:

Выделить

#display {
    background-image: url('path/to/your/image.jpg');
    background-size: contain; /* Масштабируем фон, чтобы он полностью помещался в контейнер */
    background-position: center; /* Центрируем фон по горизонтали и вертикали */
    background-repeat: no-repeat; /* Фон не повторяется */
    height: 100vh; /* Высота на всю высоту экрана */
    width: 100%; /* Ширина на всю ширину экрана */
}

Выбор между cover и contain

cover: Лучше использовать, если важно, чтобы фон полностью покрывал контейнер, даже если это приведет к обрезке.
contain: Лучше использовать, если важно, чтобы изображение было видно полностью, даже если это приведет к появлению пустых областей.

Выбирай в зависимости от того, что важнее для твоего дизайна.

Заключение

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

Блог: Чем отличается background-image: url() от background: url()?

Жалоба

Использовать float: none;

Использовать clear: both;

Использовать overflow: hidden; или overflow: auto;

Использовать display: block; или display: inline-block;

Пример

Использовать float: none;

Использовать clear: both;

Использовать overflow: hidden; или overflow: auto;

Использовать display: block; или display: inline-block;

Пример

Доступ к SVG-элементам

Изменение атрибутов SVG

Доступ к SVG-элементам

Изменение атрибутов SVG

Анимация SVG с помощью JavaScript

Реактивные SVG-элементы

Заключение

Введение в GSAP и SVG

Простые техники анимации SVG с GSAP

Введение в GSAP и SVG

Простые техники анимации SVG с GSAP

Практические примеры

Заключение

Основы SVG и CSS

Управление SVG через CSS

Основы SVG и CSS

Управление SVG через CSS

Примеры использования SVG в CSS

Заключение

Часть 1: Основы Flexbox

Часть 2: Основные свойства Flexbox

Часть 1: Основы Flexbox

Часть 2: Основные свойства Flexbox

Часть 3: Практические примеры

Заключение

Пример

Как это работает

Важные моменты

Пример

Как это работает

Важные моменты

Варианты хранения массивов в базе данных

Пример использования JSON

Обработка данных

Варианты хранения массивов в базе данных

Пример использования JSON

Обработка данных

Совет по использованию JSON

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

Как это сделать?

Пример создания API для предоставления информации

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

Как это сделать?

Пример создания API для предоставления информации

Пример предоставления файлов для скачивания

Советы по предоставлению доступа

Заключение

Что такое виджет?

Какие задачи решает виджет?

Как создать виджет?

Пример создания виджета

Что такое виджет?

Какие задачи решает виджет?

Как создать виджет?

Пример создания виджета

Советы по созданию виджетов

Заключение

Что такое пути?

Основные понятия

Пример использования путей

Что такое пути?

Основные понятия

Пример использования путей

Как использовать пути в HTML?

Как избежать ошибок при использовании путей?

Что такое модули в JavaScript?

Основные понятия

Пример использования модулей

Что такое модули в JavaScript?

Основные понятия