<Frontend />
Графика в вебе
Расстровая графика
-
.jpg
-
.png
-
.gif
-
.webp
-
.avif
Векторная графика
-
.svg
-
.ai
Растр vs Вектор
<img
src="img/cat.jpg"
alt="close up photo of tabby cat"
class="img"
><img>
background-image:
url("../../media/examples/star.png"),
url("../../media/examples/lizard.png");background-image
<img
src="img/cat.jpg"
srcset="img/cat_500.jpg 500w,
img/cat_1000.jpg 1200w,
img/cat_1500.jpg 1900w"
alt="close up photo of tabby cat"
class="srcset_img"
>srcset
srcset
<picture>
<source
type="image/avif"
srcset="img/img.avif"
>
<source
media="(-webkit-device-pixel-ratio: 2) and
(-webkit-min-device-pixel-ratio: 2) and (-webkit-max-device-pixel-ratio: 2.99) ,
(min-resolution: 2dppx) and (max-resolution:2.99dppx)"
srcset="img/cat2_1000.jpg"
>
<source
media="(min-width: 768px) and (max-width: 1499px)"
srcset="img/cat2_1000.jpg"
>
<img
src="img/cat2.jpg"
alt="brown tabby cat on white stairs"
>
</picture><picture>
<!-- Just an image -->
<figure>
<img
src="https://developer.mozilla.org/static/img/favicon144.png"
alt="The beautiful MDN logo.">
</figure>
<!-- Image with a caption -->
<figure>
<img
src="https://developer.mozilla.org/static/img/favicon144.png"
alt="The beautiful MDN logo.">
<figcaption>MDN Logo</figcaption>
</figure><figure>
background: image-set( "../img/cat_1x.jpg" 1x,
"../img/cat_2x.jpg" 2x,
"../img/cat_3x.jpg" 3x);image-set
AVIF
<img
src="img/cat.jpg"
alt="close up photo of tabby cat"
class="img"
loading="lazy"
>loading="lazy"
Кастомный Lazy Loading
Атрибуты width и height
.img {
aspect-ratio: 16 / 9;
}aspect-ratio
Картинки как коробки — что внутри?
Q & A
HTML <form>
Элемент HTML form (<form>) представляет (собой) раздел документа, содержащий интерактивные элементы управления, которые позволяют пользователю отправлять информацию на веб-сервер.
<FORM>
<form method="post">
<label for="POST-name">Name:</label>
<input id="POST-name" type="text" name="name">
<input type="submit" value="Save">
</form>
<form>
<label for="GET-name">Name:</label>
<input id="GET-name" type="text" name="name">
<input type="submit" value="Save">
</form><BUTTON> INSIDE <FORM>
Дефолтные стили форм
<input>
<input type="text" name="text" minlength="8" maxlength="16">
<input type="password" name="password" minlength="8" required>
<input type="email" name="email" pattern=".+@globex.com" size="10" required>
<input type="color" name="color">
<input type="range" name="range" value="0">
<input type="checkbox" name="checkbox" value="checkbox">
<input type="radio" name="radio" value="radio">
<input type="date" name="date"><INPUT TYPE=''TEXT''> VALIDATION
<INPUT TYPE=''EMAIL''> VALIDATION
<INPUT TYPE=''PASSWORD''> VALIDATION
INPUTS ATTRIBUTES
<input type="text">
<input type="email">
<input type="text"
inputmode="email">INPUTS ATTRIBUTES
<input type="tel">
<input type="text"
inputmode="tel">
<input type="number">
<input type="text"
inputmode="numeric">INPUTS ATTRIBUTES
<input type="url">
<input type="text"
inputmode="url">
<input type="url">
<input type="text"
inputmode="url"><SELECT>
<select name="languange"
id="select"
class="select__item"
required>
<option value="english" selected>English</option>
<option value="arabic">Arabic</option>
<option value="kurdish">Kurdish</option>
</select><SELECT> STYLING
<INPUT TYPE=''FILE''>
<input type="file"
class="visually-hidden"
id="file"
name="file"
accept="image/*"
multiple
required><INPUT TYPE=''FILE''> STYLING
<INPUT TYPE=''RADIO''>
<input type="radio" name="radio" value="radio1">
<input type="radio" name="radio" value="radio2">
<input type="radio" name="radio" value="radio3"><INPUT TYPE=''RADIO''> STYLING
<INPUT TYPE=''CHECKBOX''>
<input type="checkbox"
name="input"
id="input1"
value="input1"
class="visually-hidden"
required
><INPUT TYPE=''CHECKBOX''> STYLING
<INPUT TYPE=''RANGE''>
<input type="range"
name="urgent"
min="0"
max="2"
step="1"
value="1"
><INPUT TYPE=''RANGE''> STYLING
<INPUT TYPE=''RANGE''> STYLING
Q & A
Доступность
Доступность
Wai-aria
Главные принципы доступности
Воспринимаемость - люди должны иметь возможность воспринимать контент тем способом, который им доступен
Понятность - контент и интерфейс должны быть понятны всем людям, в том числе и с инвалидностью.
Управляемость - люди должны иметь возможность взаимодействовать с интерфейсом и управлять контентом тем способом, который им доступен.
Надежность - интерфейс должен оставаться доступным при изменении версий продукта или операционной системы.
типы ограничений
Временные
типы ограничений
Длительные
типы ограничений
Врожденные
Нарушение зрения - слепота, близорукость или дальнозоркость, дальтонизм
Нарушение слуха - глухота или тугоухость, звон в ушах
Нарушение моторики - дрожание рук, деформация или отсутствие конечностей.
Проблемы восприятия - дислексия, деменция, депривация сна.
Вспомогательные технологии — общее название технических средств для облегчения повседневной жизни людей с инвалидностью.
Порядок разработки продукта
Дизайн
Программирование
Контент
Используйте нативные HTML элементы, если таких элементов не нашлось то тогда создавайте свои кастомные
Не переопределяйте нативную/встроенную семантику
Все интерактивные элементы должны быть доступны с клавиатуры
Не используйте role="presentation" или aria-hidden="true" для элементов с фокусом
Все интерактивные элементы должни иметь доступоне имя
tabindex
Accordion Example
Breadcrumb Example
Modal Dialog Example
Navigation Menu Button Example
Scrollable Listbox Example
Example of Tabs
Example of Tabs
Полезности
Q & A
Работа с контентом
Overflow Wrap
hyphens
Text Truncation
Optional Scrolling
Min-width
icons in input
Copy of Frontend
By Anton Chyvikov
