Web Мастерская
Контакт

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

Сообщество Web Мастеров. Тут собрано всё, чтобы написать свой первый сайт, запустить его в Интернет и поддерживать его в течении всей его работы.
Поиск блогов...

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

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

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


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

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


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

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


  1. HTML-код: Создайте HTML-разметку для вашего виджета. Например, это может быть форма подписки, кнопка покупки или информативный блок.
  2. CSS-стилизация: Оп
...

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

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 =
...

Карусель фотографий

CSS HTML JavaScript Библиотека JS
Для одной своей идеи, использовал карусель фотографий, взятую из интернета и переписанную под себя. Выложу, как было у меня. Карусель использует библиотеку jQuery, так что придется подключать её, хотя, переписать на чистый JavaScript не составит особого труда.

jQuery:
Выделить
var carouselID = 1, change = 8000;

function carouselStart() {
	if ($('div[data-carousel="carousel"]').length < 1) {
		return false;
	};

	$('div[data-carousel="carousel"]').each(function() {
		$(this).removeAttr('data-carousel').attr('id', 'carousel_' + carouselID);
		carousel('#carousel_' + carouselID);
		carouselID++;
	});
};

$(() => {
	carouselStart();
	window.setInterval(carouselStart, 3000);
});

function carousel(carouselID) {
	var $slr, $sls, interval, $selectors, $btns, currentIndex, nextIndex;
	var cycle = index => {
		var $currentSlide, $nextSlide, $currentSelector, $nextSelector;
		nextIndex        = index !== undefined ? index : nextIndex;
		$currentSlide    =
...

Псевдокласс :hover в атрибуте style (CSS | HTML | JS)

CSS HTML JavaScript
Появилась задача изменить стиль элемента при наведении курсора и вернуть прежний стиль, когда курсор увели. Для решения этой задачи существует псевдокласс :hover, при помощи, которого можно решить задачу, но дело в том, что стиль элемента находится в атрибуте style элемента, например:
Выделить
<span style="color: #CCCCCC;">Текст</span>

В него же необходимо вставить :hover, но делать этого конечно нельзя. Необходимо искать другой вариант решения, а вариантом вполне может быть - использование атрибутов событий: onMouseOver и onMouseOut:
  • onMouseOver - Выполняется, при наведении курсора.
  • onMouseOut - Выполняется, при выходи курсора за пределы элемента.

Делаем так:
Выделить
<span style="color: #CCCCCC;" 
    onMouseOver="this.style.color = '#999999';"
    onMouseOut="this.style.color = '#CCCCCC';">
        Текст
</span>

Готово. Задача решена, теперь цвет текста меняется при наведении курсора и возвращается в прежний цвет, когда курсор убегает....

PHP: Цикл в две колонки | В два столбика

CSS HTML PHP
Работая над одним приложением, потребовалось перечислить элементы массива в две колонки (Столбика):



Для решения этой задачи, у меня было два варианта. Первый:
Выделить
		<?php foreach ($characteristics as $characteristic): ?>
		<div class="feature">
			<?php echo $this->lang()->phrase($characteristic['name']); ?>: <strong><?php echo $characteristic['info']; ?></strong>
		</div>
		<?php endforeach; ?>

И CSS к шаблону:
Выделить
.feature {
	display: inline-block;
	width: 48%;
}

И второй:
Выделить
		<?php foreach ($characteristics as $key => $characteristic): ?>
		<?php if ($key % 2): ?>
		<div style="float: right;">
		<?php else: ?>
		<div style="float: left;">
		<?php endif; ?>
			<?php echo $this->lang()->phrase($characteristic['name']); ?>: <strong><?php echo $characteristic['info']; ?></strong>
		</div>
		<?php endforeach; ?>

Я выбрал первый вариант. Он мне показался лучшем, чем второй....
Реклама