Web Flashcards
Какие знаешь web-элементы?
Navbar - Панель навигации для переходов между страницами.
Buttons (Кнопки) — элементы, которые позволяют осуществить или подтвердить какое-либо действие на странице.
Спиннер — компонент, предназначенный для создания на веб-проектах загрузочной анимации, которая в основном используется для индикации на сайте не очень длительных по времени процессов, в среднем выполняющихся в пределах 1–4 секунд.
Инпут — поле, позволяющее ввести какое-либо значение.
Dropdown (Раскрывающийся список) — элемент, служащий для отображения списка выбора, из которого пользователь может выбрать одно или несколько значений.
Select - Элемент, служащий для отображения списка выбора, с возможностью поиска по списку.
Search & Placeholder - Поле ввода дает возможность указать значение с помощью клавиатуры, например, выполнить поиск.
Если из названия не очевидно, как заполнять поле, используется плейсхолдер — подсказка, которая отображается внутри поля, пока оно не заполнено. При получении полем фокуса плейсхолдер становится светлее, при вводе первого символа исчезает.
Cards (Карточки) — контейнер содержимого с множеством вариантов, например, карточки товаров, объявлений, блюд и т. д.
Carousel (Карусель) — слайд-шоу для циклического просмотра серии контента.
Tags input (Тэги или баблы) — элемент выбора какого-либо параметра, чаще всего используется в фильтрах.
Progress bars (Индикатор выполнения) — элемент, который позволяет показывать прогресс выполнения определённых задач вроде скачивания или загрузки — в основном всё, что занимает некоторое время.
Slider - Слайдер или ползунок предназначен для ввода данных в указанном диапазоне.
Navigation (Навигационная панель) — элемент, позволяющий перемещаться между элементами страницы.
Pagination (Пагинация) — отображение разбивки на страницы.
Checkbox (Чекбокс) используется для управления параметром с двумя состояниями.
Radio Button Группа радиокнопок используется для выбора одного значения из нескольких.
Hamburger menu (Гамбургер меню) — меню, скрытое от пользователей.
Кебаб-меню (потому что три точки, расположенные вертикально, напоминают люля-кебаб) содержит действия с объектом.
Switches - Переключает состояния. Например, включает или отключает уведомления в настройках.
Tooltip (Тултип) — это подсказка, появляющаяся при наведении на элемент.
Form (Форма) — раздел, позволяющий пользователю вводить информацию для последующей обработки системой.
Modal window (Модальное окно) — это элемент интерфейса, который визуально представляет собой «всплывающее окно», отображающееся над остальной частью страницы. При этом показ окна обычно сопровождают затемнением всей другой части страницы. Это действие позволяет визуально отделить его от остального содержимого страницы, а также показать, что в данный момент только оно одно является активным элементом.
Footer (Подвал сайта) — раздел, где располагаются автор сайта, дата документа, контактная и правовая информация и многое другое.
Какие знаешь браузеры? В чем их отличие?
1) Internet Explorer. Стал использовать движки Trident и Chakra JavaScript. Этот браузер ещё долго будет использоваться для всякого рода систем видеонаблюдения, поскольку имеет, почему-то, популярный в узких кругах API для расширений. В Windows 8 и Windows 8.1 имел особую модификацию движка Trident на базе WinRT для Metro режима.
FireFox. Популярный среди пользователей браузер, который называют основным конкурентом Гугл Хром и Яндекс. Недостатком этой программы считают создание большой нагрузки на систему ПК или ноутбука. Firefox использует движки Gecko и SpiderMonkey для своей работы.
2) Chrome. Созданный специалистами компании Google, этот браузер работает на собственном движке. Оснащен поисковой системой Гугл, и идеально подходит для работы с одноименными сервисами.
3) Opera. После установки приложения пользователь получает целый набор полезных расширений для браузера, который поможет расширить стандартные функции. То есть, не нужно самостоятельно скачивать и устанавливать что-либо. Множество настроек, функций и кнопок - то, что нужно продвинутому пользователю.
4) Safary. Продукт корпорации Apple, который устанавливается вместе с OS X и iOS. Отличительная особенность — используется преимущественно с операционными системами Apple.
Для чего необходимы инструменты разработчика в браузере (Chrome DevTools) и как они помогают в тестировании?
Инструменты разработчика (от англ. “development tools” или сокращённо “DevTools”) - это программы, которые позволяют создавать, тестировать и отлаживать (debug) программное обеспечение.
С помощью DevTools можно:
- Делать снимки экрана при загрузке страницы во вкладке Network
- Найти неиспользуемые CSS и JS в вёрстке
- Сохранение изменений в Chrome при перезагрузке страницы
- Заблокировать определённые запросы
- Сменить геолокацию в DevTools
- Изменить User-Agent в DevTools (версия браузера или ОС)
- Эмуляция android и ios, подключение android при отладке
- Определение JS пути к строке
- Изменение стилей CSS у элементов
- Имитация медленного сетевого соединения
- Настройка столбцов на вкладке Network
- Все о cookies во вкладке applications
С какими вкладками DevTools работал?
Elements - Styles
Network - Headers, Response
Application
В какой вкладке можно найти, какой запрос был отправлен?
Network
Что такое кэш? Зачем его чистить?
Кэш - это память с большей скоростью доступа, предназначенная для ускорения обращения к данным, содержащимся постоянно в памяти с меньшей скоростью доступа.
(это совокупность временных копий файлов программ, а также специально отведенное место их хранения для оперативного доступа)
Чистить кеш необходимо, так как веб-страница может заметно измениться (например, разработчик сайта добавит новый раздел или модуль), поэтому они могут отображаться некорректно из-за того, что браузер продолжит использовать устаревшие данные из кеша. Также кэш нужно периодически чистить, чтобы освободить память на жестком диске, так как он занимает место на накопителе.
Что такое сессия?
Сессия (session) – это некоторый отрезок во времени, в пределах которого веб-приложение может определять все запросы от одного клиента. Когда клиент впервые передает персональные данные в запросе, на сервере создается новая сессия для этого клиента. В период времени жизни сессии все запросы от этого клиента будут однозначно распознаны и связаны с ним.
Зачем нужны cookies?
Сookies (куки) – определенное количество информации, создающееся сервером после того, как пользователь посетил страницу, и которое остается на ПК пользователя как отдельный текстовый документ.
В основном, куки хранят идентификационную информацию, данные о пользователе, о характеристиках и настройках, которые были выбраны в процессе взаимодействия со страницей, а также другие подобные данные, относящиеся к служебным.
Если куки поддерживаются браузером, то при каждом следующем запросе весь объем информации транспортируется от пользователя на сервер.
Как правило, идентификационная информация используется сервером, чтобы:
- Собирать и анализировать статистику;
- Отслеживать прохождение сессии (о значении данного термина поговорим дальше в статье);
- Авторизировать посетителя (при другом раскладе, каждый раз требовалось бы писать логин и пароль);
- Персонализировать выбранные клиентом настройки при всех запросах (к примеру, язык продукта или определенные товары в корзине).
Что такое HTML/CSS/JavaScript?
HTML – это язык разметки страницы (говорит браузеру, какие элементы должны находиться на странице и в каком месте). Например, где находится заголовок, основной текст, ссылки на другие страницы, меню, списки, таблицы и так далее.
CSS – это формальный язык для описания внешнего вида, стилей веб-страниц, отвечает за косметическую сторону, то как должны выглядеть наши элементы на странице.
JavaScript — это язык программирования, который используют для написания frontend - и backend-частей сайтов, а также мобильных приложений.JavaScript используется для того, чтобы делать страницы интерактивными, то есть дать пользователю возможность взаимодействовать с элементами. JavaScript добавляет сайту функциональность и интерактивность.
Что такое AJAX?
AJAX (Asynchronous Javascript and XML) - подход к построению интерактивных пользовательских интерфейсов веб-приложений, заключающийся в «фоновом» обмене данными браузера с веб-сервером.
При использовании AJAX:
Пользователь заходит на веб-страницу и нажимает на какой-нибудь её элемент
Скрипт (на языке JavaScript) определяет, какая информация необходима для обновления страницы
Браузер отправляет соответствующий запрос на сервер
Сервер возвращает только ту часть документа, на которую пришёл запрос
Скрипт вносит изменения с учётом полученной информации (без полной перезагрузки страницы)
Что такое WebSocket?
WebSocket - двунаправленный протокол для связи между клиентом и сервером, позволяющий обмениваться сообщениями в реальном времени. Запросы и ответы приходят без дополнительных запросов, без задержек и сетевой нагрузки.
Какую структуру имеет веб-страница?
Веб-страница состоит из трёх частей:
Информация о версии HTML,
Шапка веб-страницы, в которой содержится техническая информация (<head>),
Тело веб-страницы (<body>).
Как выполнить Debug страницы в браузере?
Debug — это процесс отладки (проверки) кода, когда в процессе его выполнения можно остановиться в обозначенном месте и посмотреть за ходом выполнения. Понять, в каком состоянии находится программа в определенном месте.
1) Включить инструменты разработчика, нажав F12
2) Открыть панель Sources («исходный код»)
3) Кнопка-переключатель откроет вкладку со списком файлов.
4) В Sources, в панели Page, выбрать нужный файл в редакторе кода, кликнуть на номер строки
5) Если ввести debugger в любом месте кода, Chrome DevTools приостановит выполнение кода на этой строке
Как протестировать адаптивную верстку?
1) Открыть DevTools
2) Нажать на кнопку “Toggle device toolbar” или [Ctrl]+[Shift]+[M] одновременно
3) Выбрать нужную модель или подстроить размеры экрана вручную.
Какие виды тестирования можно применить к Web?
Тестирование функциональности;
Тестирование удобства использования;
Тестирование интерфейса;
Тестирование совместимости;
Тестирование производительности и скорости загрузки сайта;
Тестирование безопасности.
