Twitter Bootstrap — фронтенд‑фреймворк
Клиентский html-, css- и js‑фреймворк, использование которого позволяет существенно ускорить разработку клиентской части сайта или веб‑приложения. Из основных возможностей — динамический дизайн по сетке, типографика, множество компонентов (веб-формы, таблицы, навигационные элементы, кнопки и прочие контролы), javascript-плагины (выпадающие меню, слайдеры, оповещения и прочее)...
Twitter Bootstrap — набор инструментов для создания сайтов и веб‑приложений, основанный на современных наработках в CSS и HTML. Он включает в себя HTML и CSS шаблоны оформления для многих компонентов веб‑интерфейсов и JavaScript расширения, которые позволяют достаточно просто создавать интерактивные и динамичные интерфейсы.
Основные компоненты Bootstrap:
- Сетки и Шаблоны — заранее заданные размеры колонок, которые можно сразу же использовать, поддерживает фиксированный и резиновый шаблон документа, а также отзывчивый (адаптивный) дизайн.
- Типографика — средства для описания стилей и размеров шрифтов, определение некоторых классов для шрифтов.
- Таблицы — средства оформления таблиц, вплоть до добавления функциональности сортировки.
- Формы — средства для оформления не только форм, но и некоторых событий происходящих с ними.
- Навигация — средства оформления для вкладок, постраничной навигации, обычных и выпадающих меню.
- Алерты, Модальные окна — средства для оформления оповещений, диалоговых окон, подсказок и всплывающих окон.
Тематические статьи
Язык разметки HTML, таблицы стилей CSS и язык программирования JavaScript
Графические интерфейсы современных сайтов и веб‑приложений разрабатываются с использованием всего трёх языков — HTML, CSS, JavaScript.
Содержание каждой страницы сайта определяется HTML‑разметкой, внешний вид — содержанием таблицы стилей CSS, а интерактивность интерфейса — скриптами JavaScript. Кроме HTML, CSS и JS в современной фронтэнд‑разработке никаких других языков не используется.
Чек-лист проверки фронтенда
По данному списку можно проверить фронтенд сайта или веб‑приложения для выявления и последующего исправления ошибок или недочётов.
GIT — система управления версиями
GIT — распределённая система управления версиями, созданная Линусом Торвальдсом для управления разработкой ядра Linux и в настоящее время получившая очень широкое распространение в среде разработчиков программного обеспечения.
JPEG и PNG — в чём разница форматов?
JPEG и PNG — это два основных формата для изображений, которые используются на сайтах. В некоторых случаях лучше использовать JPEG, а в некоторых — PNG.
Неверный выбор формата обычно приводит к кратному возрастанию размера изображения и, следовательно, к долгой загрузке изображений на медленном интернет‑канале (мобильный интернет, например).
Сжатие изображений с потерями и без потерь
Сжатие изображений — это один из способов ускорения загрузки сайта. Сделать изображения более «легкими» можно как уменьшив их физический размер в пикселях, так и путём оптимизации параметров сохранения.
На «широких» каналах размер изображений на сайте на скорость загрузки сайта влияет не очень сильно, но для пользователей, просматривающих сайт через мобильный интернет (EDGE или 3G), большие изображения могут быть проблемой. На посещаемых сайтах также могут быть сложности с загрузкой канала сервера — неоптимизированные изображения могут существенно сказываться на объёме трафика (это проблема, если он платный) или просто «забивать» канал.
Адаптивные изображения
Изображения на сайтах могут адаптироваться как под разрешение экрана устройства для корректного отображения на мобильных устройствах, так и под экраны с высоким DPI для более детализированного отображения.
Есть несколько вариантов реализации адаптивных изображений, отличаются они по сложности реализации, кроссбраузерностью и по создаваемой нагрузке на интернет‑соединение. Рассмотрим самые распространённые.
БЭМ и независимые блоки
Вёрстка независимыми блоками — это методология, которая была сформулирована Виталием Харисовым из компании Яндекс. Впоследствии эта методология была расширена и получила название БЭМ (Блок-Элемент-Модификатор). Собственно БЭМ нужен для упрощения командной разработки, для унификации интерфейсов и для более активного повторного использования программного кода.
Браузерное или клиентское кеширование
Кэширование статических ресурсов (картинок, скриптов, стилей) и неизменяющихся страниц на стороне браузера может сэкономить время загрузки страниц, если пользователь посещает сайт многократно или при посещении просматривает несколько страниц, которые используют одинаковые ресурсы.
Ajax-навигация Turboliks & Wiselinks
Увеличить отзывчивость интерфейса и снизить нагрузку на сервер можно при помощи Ajax‑навигации: если не перезагружать страницу целиком, а обновлять только содержание или отдельные фрагменты, то скорость работы сайта или приложения существенно возрастёт.
History API и HASH‑навигация на Ajax‑сайтах
Загрузка контента при помощи Ajax и навигация, построенная на этой схеме, позволяют значительно повысить отзывчивость интерфейса разрабатываемого сайта или веб‑приложения. Однако такой подход заставляет решать проблемы, связанные с отображением адреса в браузере.