История веб-разработки полна креативных находок — технологии не всегда успевали за фантазией пользователей. На заре девяностых, чтобы выделиться на фоне конкурентов, веб-разработчики искали творческие решения. Собрали хаки и подходы, которые использовали веб-программисты, чтобы выйти за пределы ограничений HTML.
Гид для тех, кто хочет войти в мир веб-программирования. О том, какие навыки нужны для старта, где найти материалы для обучения и как собрать портфолио, чтобы получить первую работу.
Анимация в веб-дизайне — не для красоты. Это инструмент, который помогает направлять пользователя и выделять ключевые элементы веб-интерфейса. Рассмотрим рабочие техники веб-анимации: от подсветки кнопок до сложных визуальных эффектов.
Возраст веб-ресурса влияет на ранжирование в поисковых системах и доверие пользователей. Представляем краткий гайд, как быстро найти дату создания сайта.
Сколько стоит SEO-продвижение: в локальном поиске, для нишевых сайтов и для проектов с высокой конкуренцией. Разбираем топ-5 стратегий вместе с экспертом SpaceWeb.
Если на сайте что-то пошло не так, в логах можно найти причину и узнать детали происшествия. Расскажем, где искать информацию и как она может быть представлена.
Решение было далеко от идеала: оно нарушало семантическую структуру HTML, ограничивало гибкость верстки и делало сайты менее доступными для пользователей с особыми потребностями. Впрочем, об этом тогда не думали.
Сайты создавали с фиксированными размерами. Они не адаптировались под разные устройства и выглядели некрасиво на экранах с очень маленьким или большим разрешением. С развитием CSS-технологий таблицы уступили место универсальным методам, которые изменили принципы веб-дизайна.
"}},{"type":"header","cover":false,"hidden":false,"anchor":"","data":{"style":"h2","text":"Сделать отступы с помощью картинок"}},{"type":"text","cover":false,"hidden":false,"anchor":"","data":{"text":"
Зачем: чтобы разделять смысловые блоки, отображать контент на странице более структурированно.
Выглядит странно, но тогда наряду с табличной структурой это было едва ли не единственным способом регулировать расположение элементов на странице. Минус решения — об адаптивности верстки речь не шла. Сейчас CSS-свойства margin, padding и gap делают такие манипуляции ненужными.
Анимация была популярна поначалу, но быстро стала восприниматься как некачественный раздражающий элемент. Тег <blink> окончательно ушел в прошлое: его удалили из стандарта HTML5 и отключили в современных версиях браузеров Chrome, Firefox и Edge. Но бегущая строка всё еще поддерживается браузерами из-за обратной совместимости.
На заре веб-разработки браузеры отображали в основном только стандартные шрифты, например Arial, Times New Roman и Verdana. Они были предустановлены на устройствах пользователей.
Разработчики использовали костыли, чтобы добавить разнообразия. Например, заменяли текст графическими изображениями или использовали sIFR (Scalable Inman Flash Replacement) — с помощью Flash вместо текстовых элементов показывали векторные шрифты.
Решения вызывали множество проблем. Одна из них — ухудшение SEO из-за медленной загрузки страниц и невозможности индексировать текст с картинок. Метод sIFR работал только при установке Flash на компьютере пользователя. Проблему решило добавление технологии @font-face в CSS.
"}},{"type":"header","cover":false,"hidden":false,"anchor":"","data":{"style":"h2","text":"Адаптировать сайт для разных браузеров"}},{"type":"text","cover":false,"hidden":false,"anchor":"","data":{"text":"
Зачем: чтобы сайт правильно отображался в разных браузерах.
В эпоху «войн браузеров» в 1997–1999 годы Internet Explorer (IE) от Microsoft и его конкурент Netscape Navigator от компании Netscape Communications Corporation по-разному интерпретировали CSS. Разные версии IE тоже обрабатывали HTML и CSS каждая по-своему. Всё это создавало хаос для разработчиков.
Приходилось использовать специфическое написание селекторов CSS для разных браузеров: например, <_width> понимал Internet Explorer, но игнорировал Netscape.
"}},{"type":"code","cover":false,"hidden":false,"anchor":"","data":{"text":"\n\n\n \n CSS-хак для IE\n \n\n
\n
Этот текст должен быть красным в IE6 и синим в других браузерах.