Delau Web — Сайты и веб-разработка
189 subscribers
583 photos
39 links
Всё о веб-разработке: идеи для сайтов, SEO-советы, UX/UI дизайн, тренды и полезные инструменты. Создаём сайты — @DelauWebBot
Download Telegram
💡 Срочное обновление PHP

21 октября в PHP закрыли две ошибки: чужой код на сервере без входа в админку.

Что важно знать

🔹 CMS не спасёт — патч нужен в PHP на хостинге.
🔹 Версии — 8.2.35, 8.3.36, 8.4.27, 8.5.12.
🔹 Своя ветка — с 8.2 на 8.5 переходить не нужно.

📌 Вывод: проверьте обработчик и закройте обе CVE.

Полная статья на сайте

──────────────

💻 Нужна помощь с сайтом?
Разработка, доработки и поддержка. Опишите задачу — обсудим решение, стоимость и сроки.

🌐 WEBFULL.RU · 💬 Написать программисту
🖼 Почему сайт «прыгает», пока загружаются картинки?

Открываете страницу, начинаете читать текст — и вдруг всё содержимое смещается вниз. Кнопка, на которую собирались нажать, оказывается в другом месте.

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

Что происходит технически?

Когда браузер получает HTML, он начинает строить страницу. Если у изображения не указаны размеры, место под него может не резервироваться.

Затем фотография загружается, браузер узнаёт её пропорции и перестраивает расположение элементов.

Это явление называется Layout Shift — сдвиг макета.

📐 Как предотвратить смещение?

Есть несколько технических решений:

• Указывать атрибуты width и height у изображений. Например: <img src="photo.jpg" width="800" height="600">.

• Использовать CSS-свойство aspect-ratio, чтобы браузер заранее знал пропорции блока.

• Для адаптивных изображений задавать max-width: 100% и height: auto, сохраняя правильное соотношение сторон.

• Для динамического контента заранее резервировать пространство под изображения.

💡 Как проверить результат?

В Google Lighthouse есть метрика CLS (Cumulative Layout Shift), которая оценивает визуальную стабильность страницы.

Хорошим считается показатель CLS не выше 0,1.

Важно понимать: даже быстро загружающийся сайт может иметь плохой CLS, если элементы неожиданно меняют положение.

Поэтому оптимизация изображений — это не только сжатие файлов и выбор WebP или AVIF.

Это ещё и правильное резервирование пространства, благодаря которому интерфейс остаётся стабильным с первых мгновений загрузки.
💡 301-редиректы при смене URL

Меняете адреса страниц? Без редиректов трафик утечёт в 404.

Что важно знать

🔹 Сначала карта
Старый → новый, одним списком, до запуска.

🔹 Nginx или .htaccess
Точное правило на адрес, без wildcard.

🔹 Проверка после
Код 301, один переход, финал 200.

📌 Вывод: редиректы ставят до смены структуры, иначе поиск теряет страницы.

Полная статья

──────────────

💻 Нужна помощь с сайтом?
Разработка, доработки и поддержка. Опишите задачу — обсудим решение, стоимость и сроки.

🌐 WEBFULL.RU · 💬 Написать программисту
📍 Страница «Как добраться»: почему одной карты недостаточно

Представьте: клиент записался в клинику, приехал по адресу, но не может найти вход. Навигатор привёл к зданию, а нужная дверь находится со стороны двора. Парковка закрыта шлагбаумом, вывеску не видно.

Формально адрес указан правильно. Но путь клиента до точки ещё не завершён.

🧭 Что должна содержать полезная страница «Как добраться»?

• Точный маршрут. Не только встроенная карта, но и ссылки для открытия адреса в Яндекс Картах и 2ГИС.

• Описание входа. Например: «Вход со стороны улицы Ленина, рядом с аптекой, вторая стеклянная дверь».

• Фотографии ориентиров. Снимок фасада, вывески и входной группы помогает быстрее сориентироваться на месте.

• Информация о парковке. Где оставить автомобиль, платная ли стоянка, есть ли шлагбаум и как получить пропуск.

• Общественный транспорт. Ближайшая остановка, номера маршрутов и примерное время пешком.

• Доступность. Есть ли пандус, лифт, ступени или альтернативный вход.

💡 Важная техническая деталь: адрес и инструкции должны оставаться доступными даже тогда, когда встроенная карта не загрузилась.

Для мобильной версии особенно полезны кнопки «Открыть маршрут» и «Позвонить», а также фотографии входа, которые удобно увеличить.

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

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

Хорошая навигация заканчивается не у здания, а у входа.
💡 Обновление PHP на сервере: как не сломать сайт

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

Что важно знать

🔹 Сначала копия — бэкап и тест на копии, не на живом сайте.
🔹 Плагины — устаревшие расширения ломаются первыми.
🔹 php.ini после — лимиты памяти проверить заново.

📌 Вывод: плановое обновление дешевле восстановления после взлома.

Полная статья на сайте

──────────────

💻 Нужна помощь с сайтом?
Разработка, доработки и поддержка. Опишите задачу — обсудим решение, стоимость и сроки.

🌐 WEBFULL.RU · 💬 Написать программисту
🚗 Кейс: сайт автосервиса, который показывает свободные посты в реальном времени

Представьте ситуацию: водитель замечает проблему с автомобилем и хочет попасть на диагностику сегодня. Он открывает сайт автосервиса, но вместо расписания видит только номер телефона и кнопку «Заказать звонок».

Приходится звонить, ждать ответа и выяснять, есть ли свободное время.

💡 Альтернативный подход — цифровое табло загруженности автосервиса.

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

Например:

• 🔧 Пост №1 — занят до 14:30, замена тормозных дисков.
• Пост №2 — свободен с 12:00, диагностика.
• Пост №3 — занят до 17:00, ремонт подвески.
• Пост №4 — свободен сейчас.

Клиент видит не просто часы работы, а реальную возможность обслужить автомобиль в конкретное время.

Как реализовать такую систему технически?

Основой становится база данных с расписанием постов и заказ-нарядов.

Сайт получает актуальные интервалы через API. При изменении расписания информация обновляется автоматически.

Для синхронизации можно использовать WebSocket или периодические запросы к серверу.

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

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

Такой сайт становится не просто визиткой автосервиса, а инструментом управления загрузкой мастерской.
💡 Битые ссылки: находим и чиним

Старые URL крадут трафик: 404 в индексе, потеря позиций.

Что важно знать

🔹 Сначала карта 404
Лог сервера и Вебмастер покажут, куда ходят люди и боты.

🔹 Редирект, а не заглушка
301 сохраняет вес, пустая 404 его теряет.

🔹 Проверка после правок
Обход URL через две недели.

📌 Вывод: лог 404 — дешёвый источник потерянного трафика.

Читать

──────────────

💻 Нужна помощь с сайтом?
Разработка, доработки и поддержка. Опишите задачу — обсудим решение, стоимость и сроки.

🌐 WEBFULL.RU · 💬 Написать программисту
🎯 Страница услуги или статья в блоге: что лучше работает с готовым клиентом?

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

В поисковой выдаче ему встречаются два материала:

• Статья «Как создаются интернет-магазины: этапы и технологии».
• Страница «Разработка интернет-магазинов: стоимость, сроки и процесс работы».

Оба материала могут быть полезны, но решают разные задачи.

📌 Главное различие — в намерении пользователя.

Статья помогает разобраться в теме. Она отвечает на вопросы «как это устроено?» и «что нужно учитывать?».

Страница услуги работает с другим запросом: «Кто может решить мою задачу и на каких условиях?»

Когда человек готов выбирать подрядчика, ему важнее конкретика:

• Что именно входит в услугу?
• Какие задачи решает исполнитель?
• Как формируется стоимость?
• Сколько времени занимает работа?
• Что потребуется от заказчика?

Если ответы приходится искать среди нескольких статей, путь к решению становится длиннее.

Как это выглядит на практике?

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

Отдельная страница услуги может сразу показать состав работ, ограничения, примеры проектов и порядок сотрудничества.

При этом блог не становится бесполезным. Его задача — объяснять сложные вопросы и помогать людям на этапе изучения темы.

💡 Статья формирует понимание, а страница услуги помогает принять решение.

Поэтому эти форматы лучше рассматривать не как конкурентов, а как инструменты для разных этапов выбора.
💡 Content Security Policy: настройка и защита сайта

Заголовок в конфиге, который закрывает XSS-инжекты и не ломает аналитику.

Что важно знать

🔹 Сначала Report-Only
Собираем отчёты, потом включаем enforce.

🔹 Аналитика
Метрика, GA и пиксели требуют явных источников.

🔹 CMS
WordPress, Bitrix и Laravel — у каждой свои директивы.

📌 Вывод: CSP в связке с SSL и firewall.

Полная статья

──────────────

💻 Нужна помощь с сайтом?
Разработка, доработки и поддержка. Опишите задачу — обсудим решение, стоимость и сроки.

🌐 WEBFULL.RU · 💬 Написать программисту
🧭 Хлебные крошки на сайте: маленький элемент с большой пользой

Представьте: пользователь открыл карточку товара в интернет-магазине через поисковую систему. Он видит описание, характеристики и цену, но не понимает, в каком разделе каталога находится.

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

📌 Как это выглядит на практике?

Главная → Каталог → Электроника → Ноутбуки → MacBook Air

Каждый промежуточный элемент — ссылка, позволяющая перейти на уровень выше.

Вместо возвращения на главную страницу пользователь может сразу открыть категорию «Ноутбуки» и посмотреть другие модели.

Почему это полезно для сайта?

• Ориентация — человек сразу понимает, где находится внутри структуры сайта.

• Удобство — можно быстро перейти в родительский раздел без использования кнопки «Назад».

• SEO — поисковые системы используют структурированные данные BreadcrumbList для понимания иерархии страниц. Иногда такая навигация отображается в поисковой выдаче.

• Мобильная версия — компактная цепочка помогает ориентироваться в многоуровневом каталоге.

⚙️ Важный технический нюанс

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

Например, если человек попал на страницу товара из поиска, навигационная цепочка всё равно должна показывать его место в каталоге.

Для реализации обычно используют HTML-элемент <nav> с атрибутом aria-label, а для поисковых систем добавляют разметку Schema.org.

Хлебные крошки особенно полезны интернет-магазинам, образовательным платформам и сайтам со сложной структурой.