Содержание
уроки или сразу в бой? Создание левой панели
В браузере страница будет по-прежнему пустой, но структуру документа уже можно понять, она готова.
Устанавливаем базовое форматирование
Теперь перейдём к CSS-оформлению, чтобы задать документу начальное оформление.
Откройте style.css
и добавьте туда строки кода, которые встретите ниже.
Убираем отступы и поля на странице по умолчанию:
*
{
margin: 0px;
padding: 0px;
}
Устанавливаем цвета ссылок в зависимости от поведения пользователя (навёл курсор, не навёл, посетил) и убираем подчёркивание у ссылок, над которыми находится указатель мыши:
A:link {
color: #D72020;
}
a:hover {
text-decoration: none;
color: #FF0000;
}
a:visited {
color: #D72020;
}
Настраиваем основное оформление страницы: прописываем фоновый цвет и изображение-подложку (картинке задаём горизонтальное заполнение), устанавливаем цвет, стиль и размер шрифта:
Body {
background: #FFD723 url(images/back_all.
jpg) repeat-x;
font: 13px Tahoma, Verdana, Arial, Helvetica, sans-serif;
color: #333333;
}
Определение блока content:
#content {
margin: 0 auto;
background: #ffffff;
width: 786px;
text-align: left;
}
Вот теперь можно обновить страницу. Она заполнена рисунком-подложкой. Пока единственное видимое изменение, за которое отвечает свойство background
класса body
.
Оформляем горизонтальное меню
Начало есть, и теперь можно приступать к вёрстке уже непосредственно основных блоков.
Начнём, конечно, с шапки. Которая, в свою очередь, состоит из блоков горизонтального меню и логотипа.
Сначала зададим общее оформление обоих элементов шапки: выравнивание текста по левому краю, белый фон и высоту 306px:
#header {
background: #ffffff;
height: 306px;
text-align: left;
}
Так мы получили своего рода пространство шапки: белый прямоугольник, на котором будут располагаться её элементы.
Логично было бы прямо сейчас заняться горизонтальным меню. Так мы и поступим, но только прежде, чем вставлять его в HTML, нужно подготовить правила CSS, иначе смотреться в браузере это будет ужасно.
Внесём первые коррективы: зададим левую границу в 2 пикселя толщиной, ширину и высоту нашего меню, а также повторяющийся по оси X фоновый рисунок:
#menu
{
border-left: 2px solid #ffffff;
width: 779px;
height: 80px;
background: url(images/header_top.gif) repeat-x;
}
Страница в обозревателе тут же преобразится и будет выглядеть так.
Теперь можно добавить и само меню в файл index.html
:
Обновив страницу можно увидеть, что оно действительно появилось.
Только вот вид ссылок оставляет желать лучшего. Установим для них свои правила (выравнивание, ширину, цвет, жирность и т. д.), а ссылкам при наведении зададим смену цвета и вернём убранное по всему шаблону подчёркивание:
#menu a {
float: left;
width: 99px;
height: 46px;
display: block;
text-align: center;
text-decoration: none;
color: #ffffff;
font-weight: bold;
font-size: 14px;
padding-top: 35px;
}
#menu a:hover {
color: #D72020;
text-decoration: underline;
}
Теперь форматирование меню можно сопоставить с PSD-шаблоном.
Обратите внимание, как меняется оформление пункта, если подвести к нему указатель (за это отвечают правила #menu a:hover
).
Настраиваем логотип
Логотип у нас уже есть и лежит в папке, остаётся добавить его на страницу и отформатировать правилами. И то, и другое можно сделать средствами CSS, чем мы и не преминем заняться.
#logo {
background: #ffffff url(images/big_pic.jpg) no-repeat;
width: 738px;
height: 146px;
text-align: left;
padding-top: 80px;
padding-left: 40px;
border-left: 4px solid #ffffff;
}
Логотип вставлен ровно по размеру.
Единственное, чего ему не хватает, так это текста. Вставим недостающее в блок logo
файла index.html
, чтобы получилось:
Слоган сайта
Текст появился, но его тоже нужно оформлять.
Исходя из того, что логотип почти всегда бывает ссылкой, зададим оформление соответствующим классам.
#logo a {
text-decoration: none;
text-transform: lowercase;
font-style: italic;
font-size: 36px;
color: #FFFFFF;
}
#logo h3 a
{
font-size: 24px;
}
Пояснять здесь ничего не нужно, со всеми свойствами вы знакомы ещё из уроков CSS. Однако внешний вид текста изменился, и в целом шапка теперь выглядит даже лучше, чем на PSD-макете.
Верстаем основную часть страницы
Далее настраиваем самый большой блок, на котором будет размещён весь уникальный контент. Он будет занимать 500px и располагаться в правой части сайта. Установим правила позиционирования, оформления заголовков, абзацев и ссылок (обо всех свойствах мы уже говорили в статьях по CSS).
#right
{
float: right;
width: 500px;
padding-right: 10px;
}
#right h5
{
margin: 0;
padding: 0px;
font-size: 12px;
color: #D72020;
}
#right a
{
color: #D72020;
text-decoration: none;
}
#right p {
margin: 0;
padding: 0;
padding-bottom: 10px;
}
#right h3 {
margin: 0;
padding: 0;
padding-top: 10px;
color: #D72020;
}
Так как мы зафиксировали только ширину блока, видимых изменений наблюдаться не будет до тех пор, пока мы не наполним его контентом — высота страницы будет меняться в зависимости от содержимого.
Заполним контейнер right
. Изображения поместим в простую таблицу.
Галерея
Кухни
Контент получил разметку, но ему явно не хватает белого фона, полноценно который появится ещё не скоро.
Создание левой панели
Во время вёрстки, но уже после отрисовки макета, выяснилось, что боковое меню ещё будет иметь подпункты, причём они должны появляться при наведении на главный пункт и исчезать, когда указателя на нём нет.
Ситуации, когда приходится дорабатывать оформление «на ходу», встречаются довольно часто. Расстояние между меню и основным содержимым позволяет нам вставить подпункты, однако интересен фокус с исчезновением и появлением подменю.
В файл CSS впишите следующий код.
#left
{
padding: 10px;
width: 237px;
padding-right: 1em;
}
#left h4
{
width: 225px;
height: 25px;
font-size: 14px;
font-weight: bold;
padding-left: 15px;
padding-top: 15px;
text-transform: uppercase;
color: #ffffff;
background: url(images/title.gif) no-repeat
}
#left ul {
margin: 0;
padding: 10px;
list-style: none;
width: 100px;
font-size: 18px;
}
#left li ul {
position: absolute;
left: 90px;
top: 0;
display: none;
}
#left ul li {
position: relative;
margin-bottom:20px;
}
#left ul li a {
display: block;
text-decoration: none;
color: #ffffcc;
background: #ff9900;
padding: 5px;
border: 1px solid gold;
border-bottom: 0;
}
#left li:hover ul {
display: block;
}
#left li li {
margin-bottom:0px;
width: 150px;
}
#left p
{
padding: 10px;
border-bottom: 1px solid #D72020;
border-left: 1px solid #D72020;
border-right: 1px solid #D72020;
}
Обратите внимание на правила классов ul
и li
— секрет исчезновения меню находится там, раскройте его самостоятельно.
В контейнер left HTML-документа добавим сначала информационный блок без меню.
Информация
Мы предлагаем Вам праздничные скидки. Далее…
Меню
Белый фон распространился ещё ниже по странице.
Теперь самое время вставить в HTML-файл код меню левой панели. Оно, в отличие от верхней навигации, реализовано списками, что можно было заметить ещё из CSS-правил.
- Галерея
- Кухни
- Кровати
- Стенки
- Прихожие
- Шкафы-купе
- Компьютерные столы
- Договор
- Прайс
- Кухни
- Кровати
- Стенки
- Прихожие
- Шкафы-купе
- Компьютерные столы
- Образцы
- Стекло
- ДСП
- Фурнитура
- И т.д.
- Контакты
- Важно
Здравствуйте, меня зовут Александр Зеленин , и я веб-разработчик.
Многократно я слышал мнение, что верстка — удел начинающих frontend’еров. Хотя фактически это важнейшая часть любого (почти) веб-проекта. Это то, что пользователи видят в первую очередь. На текущий момент качественная вёрстка (особенно проектирование блоков) в крупном проекте требует большого количества различных навыков.
В данной статье представляю схему развития верстальщика
[большая по клику]
Само собой, это не всеобъемлющая и единственно верная схема. Есть ещё целая гора связанных навыков, релевантных технологий и так далее. Градация является субъективной.
Хочу сразу добавить, что конкретных ссылок на учебные материалы в статье не будет. Буду рад дополнениям в комментариях.
Чего мы ожидаем?
В первую очередь необходимо понять, чего мы ожидаем от человека на каждом из уровней. Ваши ожидания могут отличаться.
Junior
— знает основные теги, может подправить контент на готовом html сайте, умеет грамотно форматировать текст, без проблем вставит встраиваемый элемент (ролик с ютуба, яндекс карту), ведёт работу через систему контроля версий только для себя (master, 1 контрибьютор). Может сверстать что-то несложное с нуля, и оно даже не поедет (лично у него). В целом не является самостоятельной единицей и требует руководства свыше.
Middle
— более-менее автономная единица (либо полностью автономная для малых и средних проектов). Может хорошо сверстать сайт средних размеров, и он будет корректно отображаться во всех актуальных версиях браузеров. Понимает, как работают шаблонизаторы, и может их использовать (при условии предоставления остального кода). Умеет планировать и документировать свою работу и оценивать сроки. Понимает важность поддержания стиля кода. Понимает, зачем есть грид-системы и css фреймворки. Умеет брать всю необходимую информацию из макетов от дизайнера. Может взаимодействовать с небольшой командой, создавать ветки и пулл-реквесты.
Senior
— может спроектировать систему блоков для крупного проекта. Знает, как избежать повторов и проблемных мест при использовании его кода другими разработчиками. Умеет декомпозировать сложные задачи и грамотно формулировать задачи. Умеет применять минимум одну методологию разработки (например, БЭМ). Может сделать так, чтобы проект открывался максимально быстро. Хорошо понимает несколько популярных шаблонизаторов. Способен написать сборщики и автоматизировать процесс, с этим связанный. Может проводить код ревью и курировать других верстальщиков.
Рассмотрим теперь чуть конкретнее, что включает в себя каждый из блоков на каждом уровне.
Junior
HTML
— знание основных тегов, аттрибутов. Понимание, как его писать в принципе.
Типографика
— умение отформатировать текст. Текст — основа практически любого проекта. Вставка неразрывных пробелов где надо, выделение жирным, курсивом, abbr и так далее. Можно использовать типограф или схожий сервис, но уметь понимать результат.
Семантика
— понимание, что для определённых задач есть определённые теги. Уметь выбрать нужный тег.
Медиа
— какие виды медиа можно встраивать в страницу.
Iframe
— встраивание сторонних виджетов (видео, аудио, карты и т.п.).
Аудио, Видео
— можно отложить изучение, т.к. частично решаются с помощью iframe. Понимать, какие форматы умеет воспроизводить браузер, как оформить плеер и так далее.
Картинки
— какие графические форматы и в каком виде воспринимает браузер. Плюсы и минусы использование тех или иных форматов.
Растр
— jpg, png, gif. Понимать различие форматов и уметь применять что и где надо.
SVG
— можно отложить изучение, т.к. применяется реже, чем хотелось бы. Понимать плюсы, минусы, ограничения и т.п.
Шрифты
— можно отложить изучение. На самом деле довольно сложная тема, и в общем случае я бы советовал начинающим использовать системные шрифты. Уметь подгрузить шрифты, оптимизировать отображение, минимизировать лаг отрисовки с кастомными шрифтами.
Табличная вёрстка
— опционально. Для желающих верстать качественные email-рассылки в будущем.
CSS 1
— шрифты, цвета, выравнивание, размеры.
CSS 2.1
— управление поведением блоков, позиционирование, полноценное оформление.
Селекторы
— простые селекторы на тег, класс, вложенный элемент. Простые псевдоселекторы типа:hover.
Именование
— как называть классы, чтобы не было мучительно больно.
Блочная вёрстка
— разбить картинку на осознанные блоки, воплотить блоки в HTML, оформить с CSS.
Браузеры
— можно отложить изучение. Какие браузеры существуют, в чём их различие.
Инструменты разработчика
— можно отложить изучение. Использовать инструменты браузеров, чтобы разбираться в проблемах отображения.
Текстовые редакторы
— какие текстовые редакторы для разработчиков есть и зачем. SublimeText и Notepad++ приведены для примера, как хорошо мне знакомые. Уметь настраивать в них базовые вещи, такие как отступы, перенос строки и так далее.
Системы контроля версий
— я лично считаю умение их использовать хотя бы индивидуально, лично для себя, очень важным. Понимать, для чего эти системы созданы и какие бывают.
Git
— понимать в общих чертах задачу и принципы самой популярной системы контроля версий.
Github / bitbucket
— уметь использовать одну из популярных площадок для git.
Checkout / commit / push / pull
— базовые операции для личного использования.
Stash
— для временного сохранения ненужных в данный момент данных.
10 работ
— сделать минимум 10 работ в различном дизайне. Можно тестовых, это не важно. Важно, чтобы полноценных в рамках текущих знаний.
Middle
CSS 3
— градации, тени, сглаживание, фильтры, трансформации.
Продвинутые селекторы
— элементы, следующие за опделённым (+), определённый по счёту (nth-child), shadow-dom, before/after и так далее.
Анимации
— опционально. transition и animation. Плавные переходы, анимации. Понимать ограничения и минусы.
Сетки
— зачем существуют, как выстраивать, какие есть готовые решения. Для примера можно посмотреть Flexbox grid или любой другой, который найдёте.
Фреймворки (CSS)
— зачем нужны, как применять. Желательно научиться хорошо использовать минимум один. Очень пригождается для прототипирования. Значительно повышает качество проекта при отсутствии бюджета на дизайн (не уникально, но юзабельно).
CSS препроцессоры
— можно отложить изучение. Оптимизация работы, более красивый и читабельный код. Переменные, миксины и т.п. Поработать с одним или несколькими популярными препроцессорами типа SASS, LESS, Stylus.
Media queries
— можно отложить изучение. Отображение нужных стилей в зависимости от условий (устройство, размер экрана, плотность пикселей, версия для печати и т.п.).
Стиль кода
— понять, для чего есть соглашения по стилям, изучить и начать применять любой (рекомендую от AirBNB).
DRY / KISS / SOLID
— можно отложить изучение. Понять важные принципы разработки, ощутимо упрощающие дальнейшее сопровождение проекта.
OOCSS
— опционально. Понять, что есть объектно-ориентированный css и для чего он. В том или ином виде используется во многих проектах (хоть и без понимания, что это он). В идеале, научиться проектировать. Может отлично зайти для крупных проектов.
Документация
— понять, что и как документировать. Документировать. Можно отложить, но в будущем обязательно изучить разметку markdown.
Планирование
— научиться оценивать сроки по картинке и определять последовательность работ.
Декомпозиция
— можно отложить изучение. Научиться разбивать задачу на подзадачи. Это сложнее, чем кажется:-)
Постановка задач
— можно отложить изучение. Научиться чётко описывать задачи текстом так, чтобы другие разработчики, в том числе с меньшей квалификацией, достаточно однозначно понимали, что необходимо сделать для их выполнения.
Flexbox
— понимание модели, умение применять полноценно.
Вёрстка писем
— опционально. В целом навык не лишний. Понимать особенности почтовых систем, сохранить хороший внешний вид и не упасть в спам (если это не спам).
Полифилы
— разобраться, как использовать самые актуальные возможности разработки, сохраняя обратную совместимость. Понять минусы и плюсы от такого подхода.
Кроссплатформенная вёрстка
— понимать, что нужно делать, чтобы проект хорошо выглядел не только под Windows, Linux и Mac, но и под SmartTV или PS.
Кроссбраузерная вёрстка
— понимать разницу рендера браузеров и заставлять их показывать одинаково. Сайт CanIUse очень помогает в этом.
Мобильная вёрстка
— можно отложить изучение. Понимать, какие ограничения несут в себе мобильные платформы. Использовать лимитированное пространство грамотно.
Оптимизация
— можно отложить изучение. Разобраться в «цене» тех или иных приёмов. Понять, из каких фаз состоит отображение сайта пользователю. — можно отложить изучение. Оптимизации, связанные с размером, кешем, сжатием, объединением ресурсов и т.п.
Отрисовка
— можно отложить изучение. Оптимизации, связанные со скоростью рендера после загрузки.
SEO
— можно отложить изучение. Хотя бы базовое понимание работы поисковых систем. Умение «помочь» поисковой системе разобраться, куда смотреть и что важно.
Шаблонизаторы
— разобраться, каким образом можно переиспользовать код, группировать элементы и компоновать страницы. Очень желательно изучить как серверный рендеринг, так и клиентский. Сюда же входят шаблоны на «чистом» языке (типа простых PHP вставок). Работа «до» (dataflow) шаблонизатора нас не интересует.
PHP
— можно отложить изучение. Разобраться в базовом синтаксисе и уметь внести мелкие правки, связанные с оформлением страницы.
CMS
— можно отложить изучение. Узнать, какие CMS существуют и для чего они были созданы. Научиться писать шаблоны хотя бы для одной (рекомендую WordPress).
Javascript
— можно отложить изучение. Изучить базовый синтаксис, понять, как вешать простейшие обработчики и проводить простую работу с DOM.
jQuery
— можно отложить изучение. Научиться экономить кучу времени для решения довольно типовых задач с использованием плагинов для самой популярной js библиотеки (после vanilla.js, конечно).
NodeJS
— можно отложить изучение. Разобраться, как запустить простейший сервер, раздавать статику и рендерить на стороне сервера. Можно использовать Express или любой другой фреймворк.
Сборка
— опционально. Научиться собирать проект из кучи CSS / HTML файлов в то, что нужно. Рекомендую ознакомиться хотя бы с grunt и gulp, как представителями «разных» лагерей.
IDE
— опционально. Изучить, зачем нужны IDE и как их использовать. Перейти на использование какого-либо IDE для экономии времени. Важно: изучение IDE сравнимо с полноценным изучением языка программирования, и вкладывание большого количества времени в это может не оправдаться. Лично я пользуюсь текстовыми редакторами (и только для ооочень крупных проектов включаю IDE).
Branching
— научиться управлять ветками в git.
Merge
— научиться сливать ветки с разрешением конфликтов.
Fetch / Rebase
— разобраться, зачем они, когда их применять, и начать применять по необходимости.
Графические редакторы
— разобраться, какие бывают, для чего. Чем векторные отличаются от растровых. Важно понимать редактор хотя бы на уровне «чтения» макета от дизайнера. Выбрать правильный шрифт, размер, цвет и т.п. Чтобы не на глаз, а точно. Рекомендую поработать минимум с 1 растровым (Photoshop) и 1 векторным (Figma).
50 работ
— к концу этапа у вас порядка 50 различных работ, демонстрирующих навыки из изученных областей.
Senior
Хоть на схеме и кажется маленькой эта группа, но фактически она самая большая. Т.к. к этому моменту необходимо изучить всё то, что откладывалось.
Адаптивная / Отзывчивая вёрстка
— разобраться в высшей ступени и скомбинировать все полученные до этого знания. Проект должен выглядеть хорошо везде и на всём (в рамках разумного).
Постепенная деградация / Прогрессивное улучшение
— понять, что это и зачем. Использовать.
Gitflow
— уметь объяснить другим разработчикам, как создавать ветки, куда их вливать, как, уметь провести код ревью (вёрстки, само собой, не кода).
БЭМ
— опционально. Разобраться в методологии, позволяющей создавать безлимитно крупные проекты так, чтобы при минимальной синхронизации различные команды могли использовать блоки друг друга. Есть и другие методологии, дающие не худший результат. К этому моменту о них вы так или иначе будете знать и сможете, при желании, изучить.
100 работ
— иметь суммарно сотню работ, демонстрирующих различные полученные навыки. На самом деле, это всё условно. Можно иметь одну работу (состоящую из различных частей) в портфолио, которая уже покажет, что вам ничего не страшно.
Заключение
Фактически многие из этих тем небольшие. Однако держать кучу различных факторов в голове очень сложно. За 15 лет я общался менее чем с десятью верстальщиками (да и вообще программистами), которых отнёс бы к категории Senior (верстальщиков, программистов хороших было сильно больше).
Навскидку – на полноценное изучение и практику только вёрстки с нуля вполне можно затратить год (и более, если уходить в проектирование компонентов).
Надеюсь, тем, кто находится в начале пути, схема подскажет, куда можно ещё двигаться, и что не обязательно сразу (а можно и вообще не двигать в него) бежать в программирование.
Также планирую создать полноценный бесплатный курс с подробным рассмотрением каждой из тем-прямоугольников со схемы. Буду рад предложением, отзывам, пожеланиям и так далее.
Курс, вероятно, будет в формате видеоуроков с полным текстовым и графическим дублированием. Если дело пойдёт, приложу в будущем ссылки в комментарии.
Добавить метки
Адаптивная верстка сайтов — бесплатные, полезные уроки
Язык HTML — это здорово, но подозреваю, что вы взяли эту книгу, чтобы изучить PHP.
Инженер как врач общается с телом, программист как священник — с душой компьютера, а системный администратор как медсестра — поддерживает стабильное состояние.
Болтовня ничего не стоит. Покажите мне код.
Большинство хороших программистов делают свою работу не потому, что ожидают оплаты или признания, а потому что получают удовольствие от программирования.
Мы сделали «Яндекс» с простым намерением продемонстрировать наши революционные технологии.
Все нужно проектировать сверху вниз, за исключением фундамента, с которого нужно начинать.
Если муху с монитора ты сгоняешь мишкой, значит, тебе пора идти домой.
Лучше, чтобы в 100 функциях использовалась одна структура данных, чем в 10 функциях — 10 структур.
Рекурсия — основа программирования, поскольку она сокращает время написания программы.
Моя любимая порода собак — @
Легко сделать что-то переменным. Хитрость в том, чтобы измерять продолжительность постоянства.
Программирование — это неестественный процесс.
Не имейте хороших идей, если не хотите отвечать за них.
Иногда мне кажется, что единственным универсумом в программировании является цикл.
Нельзя научиться программированию с помощью ручного калькулятора, но можно забыть арифметику.
Если мысли не помещаются в голове, заархивируйте их.
Первая заповедь программиста: не знаешь, что делать, делай что-нибудь.
В программировании средняя наработка на отказ постоянно уменьшается.
Трудное детство… Килобайтные игрушки.
Глупцы игнорируют сложность. Прагматики терпят ее. Некоторые моугт избегать ее. Гении ее устраняют.
Подумайте, сколько психических сил потрачено на поиски коренного различия между «алгоритмом» и «программой».
Вебмастера не должны строить свою жизнь вокруг трафика с Яндекса. Это не должно быть вопросом жизни и смерти сайта.
Работу программистов следует оценивать не по их изобретательности и логике, а по полноте анализа каждой ситуации.
Отладка кода вдвое сложнее, чем его написание. Так что если вы пишете код настолько умно, насколько можете, то вы по определению недостаточно сообразительны, чтобы его отлаживать.
Самый страшный вирус всегда сидит перед компьютером.
Если программист в 9-00 утра на работе, значит, он там и ночевал.
PHP — это маленькое зло, созданное некомпетентными новичками, в то время как Perl — это большое и коварное зло, созданное умелыми, но извращёнными профессионалами.
Все, что мы делаем в программировании — это частный случай чего-то более общего, и зачастую мы осознаем это чересчур быстро.
Умные пользуются компьютером, чтобы сберечь время, а дурные, чтобы его потратить.
Если называть Python заменой BASIC, то тогда и трансформер Optimus Prime — это только замена грузовика.
Каждая программа является частью другой программы и редко соответствует ей.
Программы без ошибок можно написать двумя способами, но работает — третий.
Если в вашей процедуре 10 параметров, вероятно, какой-нибудь пропущен.
Прежде чем удалить файл, убедись, что он не твой.
Программирование — это не профессия.
Это образ мышления.
Моя родина там, где мой компьютер.
Компьютер позволяет решать все те проблемы, которые до появления компьютера не существовали.
Умный программист всегда сможет занять компьютер дурной работой.
Обработать ошибку легко: Постарайтесь исправить программу. Удачный запуск тоже легко обработать: Вы решили не ту задачу. Постарайтесь исправить и эту ошибку.
Структурированное программирование потверждает закон исключенного третьего.
Всегда пишите код так, будто сопровождать его будет склонный к насилию психопат, который знает, где вы живете.
Программист – это не человек, это просто новая форма жизни.
Есть два способа создания дизайна программы. Один из них, это сделать его настолько простым, что в нем, очевидно, не будет недостатков. Другой способ — сделать его настолько запутанным, что в нем не будет очевидных недостатков.
Люди считают, что программирование — это наука избранных, но в реальности все наоборот — просто много людей создают программы, которые используют чужие программы, как-будто строя стену из маленьких кирпичиков.
В хорошем дизайне добавление вещи стоит дешевле, чем сама эта вещь.
Как только вы поняли, как писать программу, заставьте сделать это кого-нибудь другого.
Пока компьютер еще не научился самостоятельно мыслить, доверять ему можно.
Адаптивный дизайн и верстка сайта на видеокурсе от Loftblog
Учение — не только свет, по народной пословице, — оно также и свобода. Ничто так не освобождает человека, как знание… Тургенев И. С.
Добро пожаловать на наш видеокурс, посвященный очень актуальной на сегодняшний день теме — адаптивной верстке сайтов. В наш век мобильных устройств, когда практически у каждого человека, находящегося в сознательном возрасте, есть планшет, мобильный телефон и прочие мобильные чудеса современной цивилизации, с помощью которых можно бродить по лабиринтам всемирной паутины, создание сайтов, которые будут одинаково хорошо отображаться на устройствах с различным разрешением экрана, стало необходимостью.
Три кита адаптивного дизайна
На первом вводном видеоуроке мы поговорим о самом понятии адаптивной верстки и дизайна, узнаем, из чего он состоит и что подразумевается под каждой из его частей.
Итак, адаптивный дизайн держится на трех китах: отзывчивом дизайне (Responsive design), Progressive Enhancement и Mobile first.
Отзывчивый дизайн, или Responsive design
Первый раз термин «отзывчивый дизайн» был упомянут Итаном Маркотом в его статье в мае 2010 г. Само это понятие включает в себя три технологии. Первая из них — Fluid grid (гибкая сетка макета), вторая технология — Flexible Media (весь медиа-контент сайта), и последняя из рассматриваемых технологий отзывчивого дизайна — это Media queiries (медиа-запросы). Все они будут подробно разобраны на следующих видеоуроках нашего курса.
Progressive Enhancement и Graceful degradation
Право авторства такого понятия адаптивного дизайна, как Progressive Enhancement принадлежит известному разработчику Арону Густафсону, который впервые ввел этот термин в своей книге. Под Progressive Enhancement подразумевается постепенное улучшение, когда верстка проекта начинается с самого простого к более сложному, современному, чтобы сайт мог корректно отображаться при помощи самого старого, но еще используемого браузера.
Подход к началу верстки проектов — есть главное отличие этой технологии от другой, совершенно противоположной — Graceful degradation (изящная деградация). При такой верстке разработка проектов идет от самого сложного. навороченного к простому.
Mobile first
Последняя технология, входящая в состав адаптивного дизайна — это Mobile first. Под ней понимается первоочередная разработка проектов для мобильных устройств, а затем уже для стационарных.
Таким образом, на видеоуроке вам станет известно, из чего состоит адаптивная верстка. На полученные на этом занятии знания вы будете опираться при просмотре дальнейших видеоуроков.
Приятного всем просмотра! Учитесь с удовольствием! Всегда ваш Loftblog.
Рекомендуемые курсы
Адаптивная верстка сайтов | Введение
Адаптивная верстка сайта — уроки для начинающих. Все чаще читатели блога Вебсовет задают в своих письмах вопросы по адаптивной верстке сайта. Окей! Раз есть вопросы, то вэлкам! Этим постом я открываю новую рубрику на блоге, посвященную исключительно адаптивной верстке сайтов.
Для тех, кто не в танке и впервые слышит об этой новомодной (с 2012 года) фишке, краткое пояснение:
Адаптивная верстка предназначена для автоматической подгонки сайта под различные размеры экранов отображающих устройств: настольных ПК, телевизоров, планшетов, смартфонов и прочих мобильников.
Здесь следует дать одно очень важное разъяснение касательно различных похожих определений в современном веб-дизайне, а именно: адаптивный (adaptive) и отзывчивый (responsive) веб-дизайн. Очень многие ошибочно полагают, что это одно и то же. Но это не так.
Адаптивный (adaptive) vs отзывчивый (responsive)
Во-первых, необходимо различать адаптивный веб-дизайн (adaptive web design) и адаптивную верстку (adaptive layout). Это совершенно разные понятия. Адаптивный веб-дизайн — это глобальный подход к проектированию сайта, тогда как адаптивная верстка — всего лишь частный случай способа верстки для отзывчивого (responsive) веб-дизайна.
Адаптивный и отзывчивый веб-дизайн отличаются как день и ночь. Более того, можно смело утверждать, что отзывчивый веб-дизайн — это малая часть (хотя и вполне самодостаточная) адаптивного веб-дизайна.
Главным отличием в плане верстки является способ написания файла стилей. Отзывчивый предполагает полностью прописывать в файле стилей все возможные варианты размеров используемых устройств просмотра, тогда как адаптивный подгружает лишь те стили, которые необходимы для каждого конкретного типа устройства.
Более того, отзывчивый грузит одинаковое количество деталей сайта как для настольного ПК, так и для мобильника, оптимизируя размеры блоков и их содержимого, а адаптивный может для настолького ПК загрузить весь сайт целиком, а для мобилки лишь часть, что-то удалив, как не сильно важное, чтобы облегчить конструкцию сайта и, соответственно, увеличить скорость загрузки.
Рассусоливать на эту тему больше нет смысла. Достаточно сказать, что на сегодняшний день все-таки большим спросом пользуется именно отзывчивый веб-дизайн, но с адаптивной версткой 🙂 Надеюсь, после такого краткого экскурса вы теперь не будете путаться в понятиях. Для тех, кто хочет более подробно ознакомиться с данной темой, могу посоветовать почитать и статью.
Окей! С определениями разобрались. Продолжим рассказ об адаптивной верстке сайтов, подразумевая, что речь идет об отзывчивом веб-дизайне.
Преимущества адаптивной верстки
Адаптивная верстка сайта имеет в своем арсенале два главных оружия:
1. Все элементы верстки являются «резиновыми» (flexible) — их размеры зависят от размера экрана отображающего устройства.
2. Медиа-запросы (Media Queries) — отдельная часть файла стилей, задающая различные стили в зависимости от размеров экранов отображающих устройств и их расположения в пространстве (portrait или landscape).
Что касается «резиновости», то эта плюшка задается старым добрым способом:
width: 100%;
Кроме того, чтобы сайт не размазывался на слишком больших мониторах, в файле стилей прописывается следующее правило:
#content {
max-width: 1200px;
}
Это если вы не хотите, чтобы ширина сайта превышала 1200 пикселей (на ваше усмотрение). В этом есть определенный сенс. Дело в том, что комфортная ширина читаемого текста не более 10 – 12 слов в строке. Если статья будет растягиваться (например, при просмотре сайта на телевизоре) от края до края, то читать такой текст будет весьма затруднительно.
В адаптивной верстке правилом считается не только применение резиновости для крупных блоков, но и для медийного содержимого: картинок, видео-вставок и пр. Это также легко задается в стилях:
img, embed, video {
max-width: 100%;
}
При уменьшении окна браузера все картинки, видео и прочие элементы будут пропорционально уменьшаться, не вылезая за края родительского блока.
А вот о медиа-запросах мы поговорим подробно в следующий раз. Оставайтесь на связи!
Адаптивная верстка сайтов | Введение
Адаптивная верстка сайтов | Медиа-запросы
Адаптивная верстка сайтов | Сначала мобильные
Автор: Игорь Квентор
www.websovet.com
Адаптивная верстка Bootstrap: уроки и объяснения
Приветствую вас на страницах блога start-luck. Удача начинается здесь. Если вы стремитесь как можно проще создать хороший грамотный сайт, но пока не совсем разбираетесь в программах, всех терминах и коде, то эта статья для вас.
Адаптивная верстка Bootstrap – как это все взаимосвязано? Зачем нужен фреймворк, что это вообще такое, чем он помогает и действительно ли упрощает жизнь. Также я расскажу как использовать программу по максимум не нанося вред будущему проекту, и где найти хорошие уроки. Ну что ж, начнем?
Немного о Bootstrap
Я предполагаю, что не все мои читатели хорошо понимают, что такое фреймворк и уже успели скачать и разобраться во всем самостоятельно. Начну с информации именно для них. Недавно я писал про адаптивную верстку и назвал Bootstrap программой. Сделал я это для упрощения восприятия, хотя фреймворк совсем таковой не является.
Это набор приложений, скриптов или плагинов, если так можно выразиться, которые помогают проще создавать кнопки, специальные формы на сайте, карусели с изображениями, показывать сайт на мобильных или не делать этого и так далее.
Как вы, наверное, уже знаете, для каждого этого действия программист должен придумать и написать код. Если вы пользуетесь Bootstrap, то вам этого делать не обязательно. Вы просто берете готовый шаблон и меняете его по своему желанию. В итоге время на работу сокращается в разы.
Кроме ускорения к приоритетам этого фреймворка можно отнести еще и снижение требований к веб-мастеру. В идеале сайт создает человек, который очень хорошо разбирается в CSS, HTML, JavaScript и может написать все самостоятельно. Если вы работаете с Bootstrap, то знания уже могут быть не столь глубокими. Базового уровня будет вполне достаточно.
Возможности
Посмотреть на что способен Bootstrap 3 вы можете на сайте с русской документацией в разделах css, JavaScript и компоненты. После нажатия на нужную вкладку справа появляется очень удобное меню, которое позволяет перейти в нужное место документа.
На конкретных примерах здесь показано как выглядит часть кода, отвечающая за то или иное действие, а также результат. Вы можете настроить видимость контента для любых мобильных устройств. Разрешения и прочие настройки уже выполнены.
В отличии от блочной верстки, когда вы используете адаптивную, элементы дизайна сайта не закреплены, а плавают. При изменении масштаба те или иные блоки скрываются, съезжают вниз.
Вы можете отключить адаптивность, если это остро необходимо.
В разделе «Компоненты» находится навигационные панели, всплывающие сообщения, меню и многое другое.
Хлебные крошки, формы ввода, заголовки страниц, кнопки, специальные символы, иконки. Опять же, с примерами.
Ну и к Java относятся информеры, вкладки, подсказки и многое другое.
Прежде чем скачивать файлы вам нужно определиться какие элементы вам потребуются, а что совершенно не нужно. Переходите в раздел настройки, ставите галочки, а затем скачиваете. Это необходимо, чтобы не нагружать ваш сайт лишними элементами, которые вы не собираетесь использовать.
Bootstrap – это не программа, а набор файлов, с которым вам будет нужно работать через редактор кода. Это может быть Sublime Text или NotePad++. Чтобы вам было понятнее предлагаю посмотреть видео инструкцию установке и работе с фреймворком.
Видео обзор
Недостатки
Как и у любого инструмента, у Bootstrap есть свои недостатки. Куда без них. Это идеальный фреймворк для стартапа, быстрого создания сайта, но как я уже сказал, без знаний ничего хорошего и правильного у вас не получится.
Очень наглядно это объясняет Антон Федянин из студии Михаила Кетченова в Санкт-Петербурге. Рекомендую посмотреть его выступление на зимней партнерской конференции 1С-Битрикс в 2015 году. Информация актуальна и по сей день вне зависимости от того какой движок вы используете и делаете ли вы это вообще.
Прекрасное выступление, подробно описывающее ответ на вопрос зло или панацея от всех проблем Bootstrap. С наглядными примерами и простыми аналогиями. Все как я люблю. Постоянные читатели это знают.
Этот ролик в очередной раз помог мне подтвердить, насколько же сложно приходится фрилансерам. Антон очень правильно отметил, что мало сверстать 10 проектов, надо еще пару раз получить по щам за неправильные действия. Учиться на своих ошибках можно только в том случае, если кто-то тебе на них указывает.
Понятное дело, что ни один заказчик не укажет вам на неточности кода. Что же делать? Учиться сразу у профессионалов. Собственно сейчас мне бы хотелось дать вам несколько полезных ссылок на уроки по Bootstrap.
Обучение
Рекомендую обратить внимание на курс «Практика от А до Я по Bootstrap». Хотелось бы пару слов сказать об авторе. Андрей Кулай в прошлом являлся преподавателем, что большая редкость для онлайн-курсов, особенно в этой сфере. Это дает ему значительное преимущество. Что ни говорите, а учителей учат 5 лет в институтах не зря. Это большая наука.
В области программирования автор тоже преуспел. 11 лет является техническим директором масштабного проекта и в совершенстве владеет навыками работы с Bootstrap. В течение трех месяцев после приобретения курса вы можете обратиться к нему за помощью и поддержкой, если останутся вопросы или возникнут новые.
Это все хорошо, но основное преимущество курса, конечно же, не в этом. Помимо основного курса вы получаете 6 бонусов, которые необходимы для всестороннего изучения проблемы.
- Учебник по основам HTML.
За 2 часа (8 уроков) изучите те необходимые теги, которые пригодятся в работе.
Языки программирования развиваются и теперь, ставить аудио можно без установки дополнительных плагинов. Этот курс, рассчитанный на 2,5 часа поможет разобраться со всеми современными приемами, которые используются в верстке.
- Учебник по основам CSS.
Курс рассчитан на 10 уроков длительностью в 1,5 часа. Этого будет достаточно, чтобы восполнить пробелы в знаниях или наполнить запас знаний с нуля и до того уровня, который позволит работать над созданием сайта.
- Верстка сайтов для начинающих.
Я бы назвал это скорее практическим занятие, которое позволит применить в деле полученные из двух предыдущих лекций знания. За 1,5 часа вы превратите фотошоп-макет в код, который спокойно будет отображаться в браузере.
- Анатомия прибыльного лендинг пейдж
Никогда и никому еще не мешали дополнительные знания по дизайну. В этом небольшом курсе вам расскажут как нарисовать сайт так, чтобы он продавал быстро, много и часто. Какие элементы использовать и где их размещать, о чем умолчать, а на что сделать основной акцент. Компоновка частей пазла в единую композицию – один из 10 навыков успешного дизайнера.
Сам же курс «Практика от А до Я» длится около 17 часов. За это время вы получаете важные теоретические знания, а затем отрабатываете на практике как использовать те или иные элементы правильно: какие элементы удалить из кода, что понадобится, чтобы сайт работал быстрее, что такое модульная сетка и многое другое.
Ну и еще один бонусный курс, ТОП-4 дополнения для Bootstrap, которые помогут фреймворку работать эффективнее.
Ну вот, кажется, и все. Подписывайтесь на рассылку и узнавайте больше о простых решениях сложных задач и верном подходе при работе с не совсем правильными продуктами.
До новых встреч и удачи.
Адаптивный макет на флексбоксах | WebReference
Медиа-запросы обычно используются в адаптивном дизайне для отображения разных макетов на разных устройствах, в зависимости от размера экрана. Для этого есть причина — некоторые макеты всегда будут выглядеть слишком сплющенными (или полностью разломаются) при просмотре на узких экранах.
Например, вы можете использовать медиа-запросы для отображения первого макета на широких экранах (настольные компьютеры, ноутбуки и др), второго макета на экранах среднего размера (планшеты, большие телефоны) и третьего макета на узких экранах (мобильные телефоны и др.).
Здесь мы возьмём созданный нами ранее макет и добавим к нему медиа-запрос, чтобы он отображался по-другому на небольших устройствах.
<!doctype html>
<title>Пример</title>
<style>
* {
box-sizing: border-box;
}
body {
display: flex;
min-height: 100vh;
flex-direction: column;
margin: 0;
}
#main {
display: flex;
flex: 1;
}
#main > article {
flex: 1;
}
#main > nav,
#main > aside {
flex: 0 0 20vw;
background: beige;
}
#main > nav {
order: -1;
}
header, footer {
background: yellowgreen;
height: 20vh;
}
header, footer, article, nav, aside {
padding: 1em;
}
@media screen and (max-width: 575px) {
#main {
display: block;
}
}
</style>
<body>
<header>Шапка</header>
<div>
<article>Статья</article>
<nav>Навигация</nav>
<aside>Боковая панель</aside>
</div>
<footer>Подвал</footer>
</body>
В этом примере все элементы должны располагаться друг под другом. Если нет, то вы, вероятно, смотрите на широком экране. В этом случае уменьшите размер окна браузера до тех пор, пока не увидите свёрнутый макет.
В любом случае вот что мы добавили в код.
@media screen and (max-width: 575px) {
#main {
display: block;
}
}Всё, что мы здесь сделали, это изменили display: flex на display: block для элемента #main, чтобы его дочерние элементы перестали быть флекс-элементами. Это приводит к тому, что они накладываются друг на друга в исходном порядке.
Но что, если мы не желаем, чтобы элементы отображались в исходном порядке? Если мы хотим, чтобы навигационная панель появилась перед статьей? В этом случае мы можем внести столь же простые изменения.
<!doctype html>
<title>Пример</title>
<style>
* {
box-sizing: border-box;
}
body {
display: flex;
min-height: 100vh;
flex-direction: column;
margin: 0;
}
#main {
display: flex;
flex: 1;
}
#main > article {
flex: 1;
}
#main > nav,
#main > aside {
flex: 0 0 20vw;
background: beige;
}
#main > nav {
order: -1;
}
header, footer {
background: yellowgreen;
height: 20vh;
}
header, footer, article, nav, aside {
padding: 1em;
}
@media screen and (max-width: 575px) {
#main {
flex-direction: column;
}
}
</style>
<body>
<header>Шапка</header>
<div>
<article>Статья</article>
<nav>Навигация</nav>
<aside>Боковая панель</aside>
</div>
<footer>Подвал</footer>
</body>
Вот что мы сделали взамен.
@media screen and (max-width: 575px) {
#main {
flex-direction: column;
}
}Итак, теперь у нас идёт навигационная панель, статья, затем боковая панель. Но заметьте, что навигация и боковая панель располагаются выше, чем в предыдущем примере. Это странно!
На самом деле, так происходит из-за этого фрагмента кода.
#main > nav,
#main > aside {
flex: 0 0 20vw;
background: beige;
}В частности, код flex: 0 0 20vw устанавливает для flex-base значение 20vw, что составляет 20% от ширины области просмотра. Ранее мы применяли это значение для ширины элементов, но теперь, когда значение flex-direction задано как column, оно используется для высоты.
Если мы хотим, чтобы высота была основана на содержимом, то можем изменить это значение на auto или вообще удалить строку.
<!doctype html>
<title>Пример</title>
<style>
* {
box-sizing: border-box;
}
body {
display: flex;
min-height: 100vh;
flex-direction: column;
margin: 0;
}
#main {
display: flex;
flex: 1;
}
#main > article {
flex: 1;
}
#main > nav,
#main > aside {
background: beige;
}
#main > nav {
order: -1;
}
header, footer {
background: yellowgreen;
height: 20vh;
}
header, footer, article, nav, aside {
padding: 1em;
}
@media screen and (max-width: 575px) {
#main {
flex-direction: column;
}
}
</style>
<body>
<header>Шапка</header>
<div>
<article>Статья</article>
<nav>Навигация</nav>
<aside>Боковая панель</aside>
</div>
<footer>Подвал</footer>
</body>
Сначала мобильные
Мы могли бы переключить код так, чтобы наш макет стал «сначала мобильные». Это термин применяется для макетов, которые создаются в основном для мобильных устройств, но включают медиа-запрос, который меняет макет для более крупных устройств. Это противоположно тому, что мы делали выше, где наш макет по умолчанию был для больших устройств, а мы добавили медиа-запрос для маленьких устройств.
Таким образом, мы можем взять приведённый выше пример и изменить его следующим образом.
<!doctype html>
<title>Пример</title>
<style>
* {
box-sizing: border-box;
}
body {
display: flex;
min-height: 100vh;
flex-direction: column;
margin: 0;
}
#main {
display: flex;
flex: 1;
flex-direction: column;
}
#main > article {
flex: 1;
}
#main > nav,
#main > aside {
background: beige;
}
#main > nav {
order: -1;
}
header, footer {
background: yellowgreen;
height: 20vh;
}
header, footer, article, nav, aside {
padding: 1em;
}
@media screen and (min-width: 576px) {
#main {
flex-direction: row;
}
#main > nav,
#main > aside {
flex: 0 0 20vw;
}
}
</style>
<body>
<header>Шапка</header>
<div>
<article>Статья</article>
<nav>Навигация</nav>
<aside>Боковая панель</aside>
</div>
<footer>Подвал</footer>
</body>
Макет по-прежнему выглядит так же (что хорошо), но наш медиа-запрос теперь другой.
@media screen and (min-width: 576px) {
#main {
flex-direction: row;
}
#main > nav,
#main > aside {
flex: 0 0 20vw;
}
}А весь остальной код идёт перед ним.
Обратите внимание, что медиа-запрос на этот раз использует min-width, чтобы соответствовать всем устройствам указанной ширины и больше. В предыдущем примере мы использовали max-width, чтобы соответствовать только устройствам, которые были указанной ширины или меньше.
Итак, мы установили для начального макета значение flex-direction как column, а для больших устройств как row. Мы также вернули обратно flex-basis для больших устройств.
Автор и редакторы
Автор: Йен Диксон
Последнее изменение: 11.03.2020
Редакторы: Влад Мержевич
Создаем адаптивный веб-дизайн с использованием Media Queries
Если Вы еще не имели дела с Media Queries, сейчас самое время создать Ваш первый адаптивный дизайн веб-сайта. В этом уроке мы рассмотрим преобразование дизайна темы WordPress в адаптивную верстку, принимая во внимание исходную сетчатую структуру дизайна. Надеемся, урок окажется вам полезен.
В 2011 году автор урока создал дизайн, запрограммировал и собрал полнофункциональную тему WordPress под названием “Typo”. Этот дизайн хорошо подходит для адаптивной верстки, так что мы будем использовать HTML и CSS как основу, чтобы трансформировать статичную верстку в адаптивную верстку, приспособленную для разных размеров viewport.
Когда размер viewport нашего браузера уменьшен, мы увидим, что наш исходный сайт уродливо обрезан и добавлены горизонтальные полосы прокрутки. Цель адаптивной навигации – подстраиваться к этим различным размерам viewport так, чтобы дизайн оставался читабельным. Смартфоны и планшеты автоматически смаштабируют исходный веб-сайт, чтобы он помещался в их экран, но создание специальной верстки для этих низких разрешений позволит сайту легко читаться без необходимости увеличения изображения.
Первый шаг к созданию нашей адаптивной верстки – запланировать, какие разрешения мы будем обслуживать. Распространенные разрешения включают 320px при вертикальной ориентации смартфонов, 768px при вертикальной ориентации планшетов, 1024px при горизонтальной ориентации планшетов (а также типичное разрешение нетбуков) и разные разрешения мониторов настольных компьютеров. Стоит заметить, что верстка, которая обслуживает только предварительно установленные разрешения, часто называется «адаптивной», хотя по-настоящему «адаптивная» верстка будет построена с использованием ems или процентов, позволяя бесконечный уровень масштабирования.
<link href="mediaqueries.css" rel="stylesheet" />
Теперь мы можем начать с CSS media queries, чтобы добавить адаптивную функциональность нашему дизайну. Мы добавим media queries и дополнительные объявления в отдельный CSS файл, но они могут быть добавлены и к Вашей основной таблице стилей.
<meta name="viewport" content="width=device-width; initial-scale=1.0">
Нам также нужно не допустить, чтобы iPhone автоматически масштабировал вебсайт, чтобы уместить его в свой экран, и этот удобный мета-тег укажет Safari на iPhone настроить ширину устройства на размер его viewport.
@media screen and (max-width: 960px) { }Ширина исходной верстки – 960px, так что любое разрешение ниже этого значения создаст полосы горизонтальной прокрутки и обрежет содержание. Поэтому первая из наших media queries будет нацелена на экраны с разрешением ниже 960px.
@media screen and (max-width: 960px) {
#container, footer {
width: 758px;
}
#content {
margin: 0 20px 0 0;
}
#sidebar {
width: 212px;
}
#sidebar section {
clear: left;
}
#sidebar #search #searchbar {
width: 152px;
}
}Следующее наиболее популярное разрешение ниже 960px – это 768px, обслуживающее вертикальную ориентацию экранов планшетов. Этот дизайн “Typo” построен, используя сетку, так что, чтобы он оставался подходящим для верстки, мы можем просто удалить колонку, чтобы ширина стала 758px. После этого исходная верстка может быть сужена до нужного размера уменьшением отступа в блоке содержимого, и также уменьшением общей ширины боковой панели.
@media screen and (max-width: 758px) {
#container, footer, #sidebar {
width: 524px;
}
header nav {
clear: left; float: none; overflow: hidden;
}
header nav li {
width: auto; margin: 0 25px 0 0;
}
header {
margin: 0 0 44px 0;
}
header h2 {
margin: 0 0 24px 0;
}
#sidebar section {
float: left; clear: none;
}
#sidebar #social {
margin: 0 20px 47px 0;
}
#sidebar #search #searchbar {
width: 464px;
}После этого значение 758px может быть использовано для следующей media query, так что любое разрешение ниже этого размера включит следующую верстку. В этот момент боковая панель слишком узкая для дальнейшего уменьшения, так что вместо этого ее можно спрятать под основное содержимое, когда сетка сужена еще на несколько колонок. Это означает что ширина блока текущей боковой панели может быть увеличена, чтобы заполнить ширину новой верстки и его дочерние элементы перетекут влево, чтобы заполнить дополнительное горизонтальное пространство.
Другие области, такие как заголовок, стали слишком узкими, чтобы содержать лого и пункты меню в ряд, так что элементы навигации изменены, чтобы заполнить ширину верстки на новую строку.
@media screen and (max-width: 524px) {
#container, footer, #sidebar, #content {
width: 292px;
}
#content article h3 {
font-size: 24px;
}
#content .postinfo li {
margin: 0 10px 0 0;
}
#sidebar #social {
margin: 0;
}
#sidebar #search #searchbar {
width: 230px;
}
}Третья и последняя media query в нашей адаптивной верстке будет обслуживать особо низкие разрешения, такие как у смартфонов. Эта конкретна верстка более узкая, чем изначальная ширина содержимого, так что этому блоку так же нужно добавить объявление media query в CSS файл. Особо узкий вид перенес каждую ссылку на сообщение на новую строку, но уменьшение отступа между ними помогает подчинить некоторые перетекания.
Благодаря этим трем наборам media queries верстка нашего веб-сайта теперь достаточна адаптивна, чтобы обслужить распространенные размеры viewport, и поможет читаемости, через создание приспособленной верстки вместо полос прокруток или масштабированного изображения. Посмотрите пример и поменяйте масштаб Вашего браузера, чтобы увидеть адаптивную верстку своими глазами.
Посмотреть пример адаптивной верстки.
Автор урока Chris Spooner.
Перевод — Дежурка.
Смотрите также:
Адаптивная компоновка | raywenderlich.com
Доступна обновленная версия этого курса, созданная для Swift 4, iOS 12, Xcode 10.
Посмотреть последнюю версию
14 декабря 2015 г. · Видеокурс (1 час 17 минут) · Начинающий
Автоматическая компоновка — отличное начало для создания гибких пользовательских интерфейсов, а адаптивная компоновка выведет ваши ограничения на новый уровень! Из этой серии вы узнаете, как использовать классы размеров в конструкторе интерфейсов для поддержки iPhone и iPad разных размеров и обеих ориентаций в одной раскадровке.Вы также рассмотрите некоторые закулисные классы, которые могут помочь вам создавать адаптивные макеты, такие как коллекции признаков и ресурсы изображений.
Узнайте, что описано в нашей серии видеоуроков по Adaptive Layout.
1
Узнайте о классах размеров, основной концепции адаптивного макета, и изучите основы работы с классами размеров в Interface Builder.
2
Узнайте, как настроить положение и размер наших представлений для различных классов размеров, добавляя новые ограничения и удаляя существующие ограничения на основе класса размера.
3
Узнайте, как настроить макет, добавив или удалив представление, чтобы максимально использовать пространство на макете.
4
Узнайте, как Adaptive Layout позволяет вам указывать разные значения для изображений и шрифтов на основе класса размера, чтобы при уменьшении масштаба пользователь все еще мог читать шрифт.
5
Узнайте о коллекциях признаков и средах признаков, классе и протоколе, который вы используете для определения текущего класса размера из кода для дальнейшей настройки ваших макетов.
6
Узнайте о UIAppearance и о том, как использовать прокси-сервер внешнего вида с коллекциями признаков, чтобы настроить внешний вид вещей в вашем приложении по классу размера.
7
Узнайте об адаптивном представлении и о том, как контроллер представления может управлять своим собственным стилем представления во время выполнения на основе текущего набора признаков или любых других условий.
8
Просмотрите то, что вы узнали из нашей серии видеоуроков по Adaptive Layout, и узнайте, какие еще ресурсы вам следует изучить.
9
История версий
iOS 12, Swift 4, Xcode 10
17 мая 2018
iOS 10, Swift 3, Xcode 8
14 февраля 2017 г.
iOS 9, Swift 2, Xcode 7
(Выбрано)
14 декабря 2015 г.
iOS 9, Swift 2, Xcode 7
15 сентября 2015 г.
Авторы
Джерри Бирс
Джерри — соучредитель Five Pack Creative, компании по разработке мобильных приложений, специализирующейся на разработке для iOS.Он работал над …
Инструктор
Автоматическая компоновка — отличное начало для создания гибких пользовательских интерфейсов, а адаптивная компоновка выведет ваши ограничения на новый уровень! Из этой серии вы узнаете, как использовать классы размеров в конструкторе интерфейсов для поддержки iPhone и iPad разных размеров и обеих ориентаций в одной раскадровке. Вы также рассмотрите некоторые закулисные классы, которые могут помочь вам создавать адаптивные макеты, такие как коллекции признаков и ресурсы изображений.
Создание мобильных вариантов с использованием адаптивных макетов
В этом уроке мы рассмотрим, как легко создавать различные варианты взаимодействия для разных типов устройств.
По умолчанию Ceros масштабируется в соответствии с любым устройством, на котором пользователь просматривает контент, но мы также позволяем нашим пользователям адаптировать дизайн своего взаимодействия для настольных компьютеров, планшетов и мобильных устройств.
Когда вы впервые создаете интерфейс, вы всегда будете начинать с настольной версии, которая отображается в окне Global Layout.Обычно вам следует доработать этот первоначальный дизайн, прежде чем переходить к любому из других вариантов, чтобы не дублировать работу.
После того, как вы закончите этот первоначальный дизайн, вы можете создать версию для планшета или мобильную версию для настройки. Что бы вы ни выбрали, вы увидите, что весь размер холста автоматически настраивается в соответствии с размерами планшета или мобильного устройства, однако мы не будем пытаться переформатировать ваши ресурсы. Это оставляет контроль над дизайном в ваших руках.
Имейте в виду, что в некоторых случаях настройка варианта может быть столь же простой, как изменение размера содержимого, а в других случаях вы можете захотеть полностью изменить дизайн — вам решать, что лучше всего подходит для вашей работы.
Чтобы изменить расположение содержимого, сначала выберите все ресурсы и вручную отцентрируйте их на холсте. Оттуда вы можете войти и начать вносить индивидуальные настройки, такие как перемещение текста, повторная укладка элементов и, возможно, даже удаление ненужных разделов. Обратите внимание, что если вы выберете текстовый объект, цвет выделения будет другим. Это связано с тем, что ваш опыт будет автоматически синхронизировать любые изменения текста, сделанные между вариантами, чтобы сэкономить ваше время при редактировании. Это относится только к самим персонажам, поэтому при необходимости вы все равно можете настроить стили шрифтов (вы также можете полностью отключить синхронизацию текста на панели инспектора).
Также важно убедиться, что вы исправляете любые неправильные взаимодействия, которые нарушались при переходе на вариант сенсорного устройства. Вы увидите, что любые горячие точки или объекты, на которых есть взаимодействие «При наведении», будут отмечены красной точкой рядом с ними на панели слоев. Это означает, что это взаимодействие прервано, поскольку вы не сможете навести курсор на сенсорное устройство. Поэтому не забудьте настроить любые взаимодействия при наведении или наведении курсора для создаваемых вами вариантов.
Если у вас есть какие-либо вопросы по созданию варианта для мобильных устройств или планшетов или возникли проблемы с оптимизацией версий, обращайтесь в чат поддержки, и мы будем рады помочь.
Работа с адаптивным макетом Bootstrap 5
Из этого туториала Вы узнаете, как создавать адаптивные веб-сайты с помощью фреймворка Bootstrap.
Что такое адаптивный веб-дизайн
Адаптивный веб-дизайн — это процесс проектирования и создания веб-сайтов, обеспечивающий лучшую доступность и оптимальный опыт просмотра для пользователя за счет его оптимизации для различных устройств.
С растущей тенденцией к появлению смартфонов и планшетов стало почти неизбежным игнорирование оптимизации сайтов для мобильных устройств. Адаптивный веб-дизайн — предпочтительная альтернатива и эффективный способ охватить широкий спектр устройств с гораздо меньшими усилиями.
Адаптивные макеты автоматически подстраиваются под любой размер экрана устройства, будь то настольный компьютер, ноутбук, планшет или мобильный телефон. См. Следующую иллюстрацию.
Создание адаптивного макета с помощью Bootstrap
Благодаря мощной сеточной системе Flexbox для мобильных устройств Bootstrap создание адаптивных и удобных для мобильных устройств веб-сайтов и приложений стало намного проще.
Bootstrap с самого начала отзывчив и удобен для мобильных устройств. Шестиуровневые классы сетки обеспечивают лучший контроль над макетом, а также тем, как он будет отображаться на различных типах устройств, таких как мобильные телефоны, планшеты, ноутбуки и настольные компьютеры, устройства с большим экраном и т. Д.
В следующем примере создается адаптивный макет, который отображается как макет с 4 столбцами на сверхбольших устройствах (область просмотра ≥ 1200 пикселей) и макет с тремя столбцами на больших устройствах (992 пикселей ≤ область просмотра <1200 пикселей), тогда как макет с двумя столбцами на устройствах среднего размера ( 768 пикселей ≤ область просмотра <992 пикселей) и макет в 1 столбец на небольших и сверхмалых устройствах (область просмотра <768 пикселей). Давайте попробуем и посмотрим, как это работает:
Пример адаптивного макета Bootstrap
<ссылка rel = "таблица стилей" href = "css / bootstrap.min.css ">
Научитесь создавать сайты
В современном мире Интернет - самый популярный способ общения с людьми.На tutorialrepublic.com вы познакомитесь с основными технологиями веб-разработки вместе с примерами из реальной жизни, чтобы вы могли создать свой собственный веб-сайт для связи с людьми со всего мира.
HTML
HTML - это стандартный язык разметки для описания структуры веб-страниц.Наши руководства по HTML помогут вам понять основы новейшего языка HTML5, чтобы вы могли создать свой собственный веб-сайт.
CSS
CSS используется для описания представления веб-страниц. CSS может сэкономить много времени и усилий. Наши руководства по CSS помогут вам изучить основы последней версии CSS3, чтобы вы могли контролировать стиль и макет своего веб-сайта.
JavaScript
JavaScript - самый популярный и широко используемый язык сценариев на стороне клиента. Наши учебные пособия по JavaScript предоставят вам подробные сведения о JavaScript, включая функции ES6, чтобы вы могли создавать интерактивные веб-сайты.
Bootstrap
Bootstrap - это мощный интерфейсный фреймворк для более быстрой и простой веб-разработки. Наши учебные пособия по Bootstrap помогут вам изучить все возможности последней версии фреймворка Bootstrap 4, чтобы вы могли легко создавать адаптивные веб-сайты.
PHP
PHP - самый популярный серверный язык сценариев для создания динамических веб-страниц. Наши руководства по PHP помогут вам изучить все возможности новейшего языка сценариев PHP7, чтобы вы могли легко создавать динамические веб-сайты.
SQL
SQL - стандартный язык, предназначенный для управления данными в системе управления реляционными базами данных.Наши учебные пособия по SQL помогут вам изучить основы языка SQL, чтобы вы могли эффективно управлять своими базами данных.
Ссылки
В нашем справочном разделе описаны все стандартные теги HTML5 и свойства CSS3, а также другие полезные ссылки, такие как названия и значения цветов, сущности символов, безопасные веб-шрифты, языковые коды, сообщения HTTP и многое другое.
Часто задаваемые вопросы
Наш раздел часто задаваемых вопросов (FAQ) представляет собой обширную коллекцию часто задаваемых вопросов, которая обеспечивает быстрое и рабочее решение распространенных вопросов и запросов, связанных с веб-дизайном и разработкой, с помощью интерактивной демонстрации.
<нижний колонтитул>
Авторские права и копия; Республика 2021
Совет: Откройте вывод этого примера в новом пустом окне (щелкните ссылку внутри редактора CodeLab) и измените размер экрана, вы увидите, что ориентация полей содержимого изменяется, когда ширина области просмотра пересекает или приближается к определенному пределу (т.е. контрольные точки).
Realizeit для адаптивного обучения | Дистанционное обучение
Что такое адаптивное обучение с помощью Realizeit?
Адаптивный дизайн курса с использованием RealizeIt — это новый способ представления персонализированных, настраиваемых курсов, которые предоставляют студентам принципиально иной опыт, чем в стандартных онлайн или гибридных курсах.
Платформа RealizeIt содержит все учебные материалы, упражнения и формирующие оценки для конкретных учебных единиц.По мере прохождения студентами курса платформа автоматически направляет их к наиболее подходящему содержанию для их текущего уровня понимания. Некоторым студентам будет предложено перейти к следующему уроку или выбору уроков, в то время как другим будет предложено исправить предыдущий материал.
Платформа постоянно изучает поведение и успеваемость каждого студента и предоставляет рекомендации, которые помогут им достичь учебных целей курса.
Преимущества адаптивного обучения
Использование Realizeit Technology
Realizeit интегрируется в журнал успеваемости Moodle и позволяет напрямую связывать курсовую работу с системой единого входа для студентов, которые могут приобрести код доступа в книжном магазине UL.
Разработчики учебных курсов из Управления дистанционного обучения обучены использованию RealizeIt и готовы содействовать внедрению проектов курсов преподавателя в платформу.
Допустимые преподаватели могут получать стипендии через фонды дистанционного обучения департаментов для улучшения онлайн-курса и / или перехода на использование OER.
Начало работы
Шаг 1. Оцените, подходит ли ваш курс.
Курсы, требующие от студентов создания базы знаний или демонстрации навыков, которые можно измерить объективными средствами, являются очень хорошими кандидатами для адаптивного программного обеспечения.
Характеристики включают:
- Текущее или планируемое использование открытых образовательных ресурсов (ООР).
- Количественные оценки.
Курсы, которые в значительной степени зависят от субъективных заданий, такие как форумы, исследовательские проекты, статьи, портфолио и т. Д., Не подходят, поскольку они упускают аспекты перенаправления и исправления в RealizeIt.
Шаг 2. Подать заявку.
Заполните онлайн-заявку и отправьте подписанную форму подтверждения по адресу [email protected].
Обратите внимание: ваша заявка не будет заполнена, пока мы не получим вашу форму одобрения.
Шаг 3. Создайте свой курс в RealizeIt.
Процесс проектирования состоит из трех этапов, которым помогает инструктор.
Этап 1: планирование
- Определение целей обучения курса / модуля
- Определение и согласование модулей и уроков
- Определение предварительных условий
Фаза 2: Разработка
- Предоставление содержания урока
- Создание мероприятий и оценок
- Завершение опций и инструкций по выставлению оценок
Этап 3: Доставка
- Определение сроков для модулей
- Связывание модулей с Moodle
- Обсуждение типичных студенческих проблем
Заинтересованы в создании адаптивного курса с Realizeit? Подать заявку ниже:
Адаптивное обучение: что это такое, каковы его преимущества и как оно работает?
Курсы и сертификация
- Сертификат учебного дизайна (полностью онлайн) .Эта полностью онлайн-программа предназначена для всех, кто разрабатывает и / или преподает онлайн-курс. Узнать больше …
- Программа сертификации ADDIE Instructional Design (полностью онлайн) . Эта полностью онлайн-программа предназначена для лиц, заинтересованных в получении дополнительных сведений о модели ADDIE. Узнать больше …
- Сертификат модели учебного дизайна (полностью онлайн) . Вы изучите традиционные модели учебного дизайна и прогресс подхода дизайна обучения к созданию опыта онлайн-обучения.Узнать больше …
Люди учатся по-разному. Адаптивное обучение было направлено на устранение различий в способностях путем ориентации на методы преподавания. Использование адаптивных моделей, начиная от технологических программ и заканчивая интеллектуальными системами, можно использовать в традиционной учебной среде. Ожидается, что в ближайшем будущем использование этих программ будет расти в геометрической прогрессии.
Для начала необходимо рассмотреть уникальные потребности каждого учащегося и его интересы.Индивидуальные учебные программы в адаптивной модели создают индивидуальную траекторию обучения для каждого ученика. Исследования показали, что студенты более активны, когда могут часто практиковаться. Адаптивные модели обучения также обеспечивают немедленную обратную связь, уменьшая количество бессмысленной утомительной работы для самого инструктора.
См. Также:
Что такое адаптивное обучение?
Учителя работают над использованием технологий в образовании с момента его создания. Адаптивное обучение позволяет адаптировать материал курса к учащемуся, что создает уникальный опыт, недоступный в традиционных классах.Технологические системы адаптивного обучения или системы электронного обучения могут предоставить учащимся немедленную помощь, ресурсы, соответствующие их учебным потребностям, и соответствующую обратную связь, которая может понадобиться учащимся.
Адаптивное обучение обычно происходит на веб-платформе. Программное обеспечение содержит всю важную информацию, относящуюся к классу, и может направлять студентов в их учебном путешествии. Когда студент завершает свою работу на платформе, программное обеспечение может принимать расчетные решения для наилучшего курса действий для студента.Каждое путешествие индивидуально подбирается для ученика с учетом его уникальных потребностей.
Программа содержит все материалы, необходимые для прохождения курса. Каждую концепцию можно разбить на управляемые разделы, и каждая из них упорядочена в соответствии с каждой целью обучения. Платформа очень умная — она может выбрать подходящие уроки для каждого ученика, классифицировать их ответы и предоставить инструктору оценку успеваемости. Оценки можно выставлять по мере их завершения, предлагая немедленную обратную связь с преподавателем и рекомендуя возможные меры вмешательства при необходимости.Это позволяет инструктору подбирать курс для каждого уникального человека, делая его более сложным для одних или менее сложным для других.
Платформа может быть в форме интерфейса, интерактивной программы или учебного потока. Другие возможные формы включают программу контентной или адаптивной фильтрации. Как показывают многочисленные примеры, этот тип модели может охватить самые разные группы студентов.
См. Также: Конструктивистская теория обучения
Как это работает?
Курсы, соответствующие адаптивной модели обучения, создаются на веб-платформе.Вся информация, необходимая для курса, будет найдена на платформе. Для всех учебных задач потребуются задания, оценки и материалы. После того, как студент завершит оценку, программа выберет наиболее подходящий уровень задач для работы. Их по-прежнему будут направлять к наиболее актуальным видам деятельности в зависимости от их результатов. Некоторые ученики могут легко проходить уроки, в то время как другим может потребоваться просмотреть предыдущий материал. По мере того, как студенты продолжают взаимодействовать с платформой, она становится более приспособленной к их потребностям и, следовательно, может выбирать материалы, которые помогут им достичь целей обучения.
Преимущества адаптивного обучения
Хотя адаптивная модель приносит пользу всем типам учащихся, есть одна группа, которая видит наибольшие выгоды: отстающие. Студенты, которые обычно не преуспевают в образовании, достигают своих целей из-за поддерживающего характера программы. Индивидуальные задания и индивидуальный план обучения улучшают успех всех, кто пробует этот стиль обучения.
Исследования продолжают показывать возросшие преимущества таких программ, как адаптивная модель.Студенты чувствовали, что они лучше контролируют свое обучение и демонстрируют большую настойчивость в выполнении программных задач. Они также проявили больше уверенности и, что удивительно, менее нечестно в своей академической работе.
Есть много заявленных преимуществ для студентов, если содержание курса преподается с использованием адаптивной модели обучения:
- Студенты могли выбирать скорость или темп работы.
- Студенты были более мотивированы к завершению своей работы из-за видимых диаграмм успеваемости.
- Они также пользовались поддержкой и объяснениями учителя во время выполнения практических задач.
- Студенты сообщили, что узнали больше, если преподавание преподавалось с использованием адаптивного обучения.
- Они испытали меньше стресса благодаря адаптивному темпу, так как учащиеся должны быть готовы двигаться дальше, прежде чем будут представлены новые концепции.
- Они добились большего общего успеха благодаря своей преданности содержанию. Их учебные навыки также значительно улучшились, так как они смогли контролировать темп и уровень сложности из-за того, что они были самостоятельными и выполнялись точно в срок.
Как показывают эти преимущества, студенты добились больших успехов в адаптивном обучении. Многие заявили, что они не только захотят пройти другой курс, основанный на адаптивной модели, но и порекомендуют его другим.
Исследования продолжали изучать преимущества адаптивного формата наряду с другими индивидуализированными моделями обучения. Эти исследования показали, что:
- Учащиеся чувствуют себя увереннее благодаря предоставленной индивидуальной обратной связи, которая приносит пользу их метапознанию.
- Учащиеся обладают большей автономией в обучении, поскольку индивидуальный план обучения разработан специально для них.
- Учащиеся из числа меньшинств или первого поколения испытали меньший разрыв в успеваемости. См. Также: Инклюзивное обучение
- Предоставлять ресурсы дешевле, в основном за счет обмена открытым контентом в сети, в отличие от учебников, поставляемых издателем.
- Меньше обмана и нечестности; каждый план индивидуален для студента.
- Студенты более вовлечены в обучение и неизменно демонстрируют более высокий уровень усидчивости — зона ближайшего развития Выготского обеспечивает соответствующий уровень сложности для каждого студента.
- По некоторым предметам общий уровень обучения выше.
Предполагается, что сам процесс адаптивного обучения способствует большему общему успеху в определенных дисциплинах. Адаптивная модель позволяет выполнять различные действия и оценки, предоставляет множество возможностей для практики и дает описательную обратную связь от инструктора.Учитель может проводить больше времени с учениками один на один для дальнейшего развития определенных навыков.
Оценки также персонализируются для учащихся в зависимости от их учебных целей. Открытый контент, используемый для адаптивного обучения, обычно предлагает данные непосредственно через веб-приложения. Эти отчеты могут показать, где учащиеся испытывают трудности и каких навыков они достигли. Учителя могут отслеживать успеваемость каждого из своих учеников одним быстрым нажатием кнопки, что позволяет им проводить больше времени с самими учениками.
Какие курсы подходят для адаптивного обучения?
Не каждая дисциплина является идеальным кандидатом для адаптивного обучения. Курсы, которые содержат много субъективных учебных мероприятий, таких как литературные статьи, исследовательские проекты или форумы, не рекомендуются для адаптивной модели. Эти задачи часто основываются на конкретных мнениях и не могут использовать аспект решения проблем учебного программного обеспечения.
В качестве альтернативы, классы, которые сосредоточены на объективных знаниях или навыках, могут получить большую пользу от адаптивной модели обучения.Технологические программы позволяют быстро оценивать знания учащихся и оценивать содержание. Используя полученные ответы, программа может также оценить отношения и связи между самим контентом. Курсы, которые имеют большую часть автоматической оценки, являются идеальными кандидатами для этой модели обучения. Затем они могут использовать несколько субъективных действий, таких как эссе или исследовательский проект, чтобы убедиться, что они используют различные типы оценок.
См. Также: Девять инструкций Ганя
Руководство по программированию контроллера
View для iOS: адаптивная модель
Адаптивная модель
Адаптивный интерфейс — это тот, который максимально использует доступное пространство.Быть адаптивным означает иметь возможность настраивать свой контент так, чтобы он подходил для любого устройства iOS. Адаптивная модель в iOS поддерживает простые, но динамические способы переупорядочивания и изменения размера вашего контента в ответ на изменения. Когда вы используете преимущества этой модели, одно приложение может адаптироваться к совершенно разным размерам экрана (как показано на рис. 12-1) с очень небольшим дополнительным кодом.
Рисунок 12-1 Адаптация к различным устройствам и ориентациям
Важным инструментом для создания адаптивных интерфейсов является Auto Layout.Используя Auto Layout, вы определяете правила (известные как ограничения , ), которые управляют компоновкой представлений вашего контроллера представления. Вы можете создать эти правила визуально в Интерфейсном Разработчике или программно в вашем коде. Когда размер родительского представления изменяется, iOS автоматически изменяет размер и положение остальных ваших представлений в соответствии с указанными вами ограничениями.
Черты характера — еще один важный компонент адаптивной модели. Черты описывают среду, в которой должны работать ваши контроллеры представлений и представления.Черты характера помогают вам принимать высокоуровневые решения относительно вашего интерфейса.
Роль черт
Когда одних ограничений недостаточно для управления макетом, у ваших контроллеров представления есть несколько возможностей для внесения изменений. Контроллеры представлений, представления и несколько других объектов управляют набором признаков , которые определяют текущую среду, связанную с этим объектом. В Табл. 12-1 описаны черты и то, как вы их используете, чтобы повлиять на ваш пользовательский интерфейс.
Черта характера | Примеры | Описание |
|---|---|---|
| | Эта черта передает общую ширину вашего интерфейса.Используйте его, чтобы принимать решения по макету на приблизительном уровне, например, должны ли виды располагаться вертикально, отображаться бок о бок, полностью скрыты или отображаться другими способами. |
| | Эта черта передает общую высоту вашего интерфейса. Если ваш дизайн требует, чтобы весь ваш контент умещался на экране без прокрутки, используйте эту особенность для принятия решений по макету. |
Дисплей | | Эта черта показывает, отображается ли контент на дисплее Retina или на дисплее со стандартным разрешением. Используйте его (при необходимости), чтобы принимать решения о макете на уровне пикселей или выбирать, какую версию изображения отображать. |
| | Эта черта предоставляется для обратной совместимости и передает тип устройства, на котором работает ваше приложение.По возможности избегайте использования этой черты. Для решений макета используйте вместо этого классы горизонтального и вертикального размера. |
Используйте черты характера, чтобы принимать решения о том, как представить свой пользовательский интерфейс. При создании интерфейса в Интерфейсном Разработчике используйте черты характера, чтобы изменить отображаемые представления и изображения, или используйте их для применения различных наборов ограничений. Многие классы UIKit, такие как UIImageAsset , адаптируют информацию, которую они предоставляют, используя указанные вами черты.
Вот несколько советов, которые помогут вам понять, когда использовать разные типы черт:
Используйте классы размеров, чтобы внести грубые изменения в ваш интерфейс. Изменения класса размера — подходящее время для добавления или удаления представлений, добавления или удаления дочерних контроллеров представлений или изменения ограничений макета. Вы также можете ничего не делать и позволить вашему интерфейсу автоматически адаптироваться с использованием существующих ограничений макета.
Никогда не предполагайте, что класс размера соответствует определенной ширине или высоте представления. Классы размеров ваших контроллеров представления могут меняться по многим причинам. Например, контроллер представления контейнера на iPhone может сделать один из своих дочерних элементов горизонтально правильным, чтобы заставить его отображать его содержимое по-другому.
Используйте Интерфейсный Разработчик, чтобы указать различные ограничения макета для каждого класса размера, в зависимости от ситуации. Использование Interface Builder для определения ограничений намного проще, чем добавление и удаление ограничений самостоятельно. Контроллеры представления автоматически обрабатывают изменения класса размера, применяя соответствующие ограничения из своей раскадровки.Для получения информации о настройке ограничений макета для разных классов размеров см. Настройка раскадровки для обработки разных классов размеров.
Избегайте использования идиоматической информации для принятия решений о макете или содержании вашего интерфейса. Приложения, работающие на iPad и iPhone, обычно должны отображать одинаковую информацию и должны использовать классы размеров для принятия решений по макету.
Когда происходят изменения черт и размеров?
Изменения черт характера происходят нечасто, но все же случаются.UIKit обновляет характеристики контроллера представления на основе изменений в базовой среде. Признаки класса размера могут измениться с гораздо большей вероятностью, чем признак масштаба отображения. Черта идиомы должна меняться редко, если вообще когда-либо. Изменения классов размеров происходят по следующим причинам:
Класс вертикального или горизонтального размера окна контроллера представления изменился, обычно из-за поворота устройства.
Изменился класс горизонтального или вертикального размера контроллера представления контейнера.
Класс горизонтального или вертикального размера текущего контроллера представления был явно изменен его контейнером.
Изменения класса размера в иерархии контроллеров представления распространяются на все дочерние контроллеры представления. Объект окна служит корнем этой иерархии, обеспечивая черты класса базового размера для своего корневого контроллера представления. Когда ориентация устройства изменяется с книжной на альбомную, окно обновляет информацию о своем классе размера и распространяет эту информацию вниз по иерархии контроллера представления.Контроллеры представления контейнера могут передавать изменения контроллерам дочернего представления в неизмененном виде или могут переопределять черты каждого дочернего элемента.
В iOS 8 и более поздних версиях исходная точка окна всегда находится в верхнем левом углу, а границы окна меняются при повороте устройства между альбомной и портретной ориентацией. Изменение размера окна распространяется вниз по иерархии контроллера представления вместе с любыми соответствующими изменениями свойств. Для каждого контроллера представления в иерархии UIKit вызывает следующие методы, чтобы сообщить об этих изменениях:
willTransitionToTraitCollection: withTransitionCoordinator:сообщает каждому соответствующему контроллеру представления, что его свойства вот-вот изменятся.viewWillTransitionToSize: withTransitionCoordinator:сообщает каждому соответствующему контроллеру представления, что его размер собирается измениться.traitCollectionDidChange:сообщает каждому соответствующему контроллеру представления, что его свойства теперь изменились.
При обходе иерархии контроллеров представления UIKit сообщает об изменениях контроллеру представления только тогда, когда есть изменение для отчета. Если контроллер представления контейнера переопределяет классы размеров своих дочерних элементов, эти дочерние элементы не уведомляются об изменении класса размера контейнера.Точно так же, если представление контроллера представления имеет фиксированную ширину и высоту, оно не получает уведомлений об изменении размера.
На рис. 12-2 показано, как характеристики контроллера представления и размер представления обновляются, когда на iPhone 6 происходит поворот. При повороте с книжной на альбомную ориентацию класс экрана по вертикали меняется с обычного на компактный. Изменение класса размера и соответствующее изменение размера представления затем распространяются вниз по иерархии контроллера представления. После анимации представления до нового размера UIKit применяет класс размера и изменения размера представления перед вызовом метода traitCollectionDidChange: контроллера представления.
Рисунок 12-2. Обновление свойств и размера представления контроллера представления.
Классы размеров по умолчанию для различных устройств
Каждое устройство iOS имеет набор классов размеров по умолчанию, который можно использовать в качестве руководства при разработке интерфейса. В Таблице 12-2 перечислены классы размеров для устройств как в портретной, так и в альбомной ориентации. Устройства, не указанные в таблице, имеют те же классы размеров, что и устройства с такими же размерами экрана.
Устройство | Портрет | Пейзаж |
|---|---|---|
iPad (все) Ipad мини | Класс вертикального размера: Обычный Горизонтальный размерный класс: Обычный | Класс вертикального размера: Обычный Горизонтальный размерный класс: Обычный |
iPhone 6 Plus | Класс вертикального размера: Обычный Класс размеров по горизонтали: Компактный | Класс вертикального размера: Компактный Горизонтальный размерный класс: Обычный |
Айфон 6 | Класс вертикального размера: Обычный Класс размеров по горизонтали: Компактный | Класс вертикального размера: Компактный Класс размеров по горизонтали: Компактный |
айфон 5с Айфон 5с iPhone 5 | Класс вертикального размера: Обычный Класс размеров по горизонтали: Компактный | Класс вертикального размера: Компактный Класс размеров по горизонтали: Компактный |
Айфон 4С | Класс вертикального размера: Обычный Класс размеров по горизонтали: Компактный | Класс вертикального размера: Компактный Класс размеров по горизонтали: Компактный |
Важно
Никогда не предполагайте, что ваше приложение будет отображаться на устройстве с определенным классом размера.Всегда проверяйте класс размера, найденный в коллекции признаков объекта, когда принимаете решение о том, как настроить этот объект.
Создание пользовательских презентаций
Создание адаптивного интерфейса
© Apple Inc., 2018. Все права защищены.
Условия использования |
Политика конфиденциальности |
Обновлено: 16.09.2015
Урок 10: Адаптивная технология | DO-IT
Академические приспособления для студентов с ограниченными возможностями
Курс дистанционного обучения
ТЕМА: Помещения 10: АДАПТИВНАЯ ТЕХНОЛОГИЯ
==========
НАЗНАЧЕНИЕ
Цель этого урока — повысить вашу осведомленность об использовании АДАПТИВНЫХ ТЕХНОЛОГИЙ в жилых помещениях для учащихся с ограниченными возможностями.
Размышляя о ВАШЕМ собственном курсе при чтении СОДЕРЖАНИЯ, вы получите инструкции по рассмотрению возможных модификаций вашего курса, В частности, связанных с приспособлениями для использования компьютерных лабораторий и веб-страниц. будьте доступны для всех студентов, вы лучше узнаете о возможностях адаптивных ресурсов.
==========
Вопрос, над которым нужно ОБРАТИТЬСЯ при чтении СОДЕРЖАНИЯ
С какими проблемами могут столкнуться ученики с ограниченными возможностями при использовании компьютерных классов в вашем кампусе? Какие приспособления им могут потребоваться?
==========
СОДЕРЖАНИЕ
В последних восьми уроках мы сосредоточились на приспособлениях для учащихся с особыми физическими недостатками или нарушениями.В этом уроке представлены вопросы и предложения по адаптации, связанные с использованием КОМПЬЮТЕРНЫХ ЛАБОРАТОРИЙ, КОМПЬЮТЕРОВ И АДАПТИВНЫХ ТЕХНОЛОГИЙ, а также ВЕБ-СТРАНИЦ.
КОМПЬЮТЕРНЫЕ ЛАБОРАТОРИИ
По мере того, как все больше людей с ограниченными возможностями ищут возможности получения образования, требующего использования компьютера, доступность ВЫЧИСЛИТЕЛЬНЫХ ОБОРУДОВАНИЙ становится еще более важной. Проще говоря, компьютерные классы должны быть доступны для всех пользователей. Учащимся с ограниченными возможностями необходим равный доступ к:
* Зданию / сооружениям
* Персоналу лаборатории
* Физическим помещениям и печатным материалам
* Компьютерам и программному обеспечению
* Электронным ресурсам
Могут ли ваши ученики:
* добраться до объекта и маневрировать в нем?
* получить доступ к материалам и электронным ресурсам?
* использовать оборудование и программное обеспечение?
Хотя ВЫ, как преподаватель, не обязательно несете ответственность за эти учреждения, ваша осведомленность о существующих объектах и их доступности в вашем учебном заведении позволит вам рассмотреть подходящие условия для размещения ваших студентов.
Ниже приведены ОСНОВНЫЕ РЕКОМЕНДАЦИИ по реализации универсального дизайна и повышения доступности для всех пользователей в компьютерной лаборатории. Выполняются ли эти рекомендации в компьютерных лабораториях на территории вашего кампуса?
* Разместите печатные материалы так, чтобы до них мог дотянуться человек в инвалидной коляске.
* Обеспечьте хотя бы одну регулируемую рабочую станцию.
* Обеспечьте защиту клавиш и упоры для запястий.
* Имейте в наличии трекбол, джойстик или другую альтернативу мыши.
* Иметь лабораторные вывески с высокой контрастностью и крупным шрифтом.
* Подготовьте ключевые документы, напечатанные крупным шрифтом или шрифтом Брайля, для людей с нарушениями зрения.
* Иметь программное обеспечение для чтения с экрана и систему вывода речи.
* Иметь программное обеспечение для преобразования Брайля и принтер Брайля для печати для слепых посетителей.
* Иметь в наличии ярлыки с крупным шрифтом, программное обеспечение для увеличения экрана и большой монитор с диагональю не менее 17 дюймов.
* Сделайте заявление в ключевых документах о вашем обязательстве по доступу и процедурах запроса приспособлений для людей с ограниченными возможностями.
* Иметь персонал, знакомый с адаптивными технологиями и обученный вопросам инвалидности.
ПРИМЕЧАНИЕ. Для получения более подробных рекомендаций перейдите на веб-страницу COMPUTER LABS, указанную в разделе «ВЕБ-АДРЕСА ДЛЯ ДОПОЛНИТЕЛЬНОГО ЧТЕНИЯ» в конце этого урока.
КОМПЬЮТЕРЫ — АДАПТИВНАЯ ТЕХНОЛОГИЯ
Компьютеры являются важным инструментом во всех академических исследованиях. Они могут повысить независимость, продуктивность и возможности людей с ограниченными возможностями. Компьютеры могут быть полезны людям с нарушениями зрения, слепоты, речи и слуха, нарушениями обучаемости, а также с нарушениями мобильности и здоровья.Каждое из этих нарушений затрудняет доступ и использование стандартного компьютера и электронных ресурсов. Например, слепой студент не может читать изображение на экране компьютера или стандартные распечатки. Учащийся с травмой спинного мозга может не обладать моторным контролем и ловкостью пальцев, необходимыми для использования стандартной мыши и клавиатуры.
Доступ к компьютерам для учащихся с ограниченными возможностями включает два основных ВОПРОСА: доступ к самим КОМПЬЮТЕРАМ и доступ к электронным РЕСУРСАМ, таким как текстовые редакторы, электронные таблицы и всемирная паутина.
АДАПТИВНАЯ ТЕХНОЛОГИЯ определяется как любой элемент, часть оборудования или программное обеспечение, которое используется для увеличения, поддержания или улучшения функциональных способностей людей с ограниченными возможностями. АДАПТИВНОЕ ОБОРУДОВАНИЕ И ПРОГРАММНОЕ ОБЕСПЕЧЕНИЕ могут облегчить доступ к компьютеру для людей с ограниченными возможностями. Решения могут включать в себя простые, ДОСТУПНЫЕ настройки, такие как использование встроенных устройств доступа на стандартных компьютерах, или они могут потребовать УНИКАЛЬНЫХ комбинаций программного и аппаратного обеспечения, например, необходимых для вывода голоса или шрифта Брайля.
Многие помещения требуют ПРЕДВАРИТЕЛЬНОГО ПЛАНИРОВАНИЯ с участием консультанта по обслуживанию студентов и студентов-инвалидов. Часто в кампусе есть СПЕЦИАЛИСТ по адаптивным технологиям, который может дать рекомендации и настроить специальное программное обеспечение. Хотя маловероятно, что ВЫ, как преподаватель, будете нести прямую ответственность за создание таких приспособлений, полезно ПОНИМАТЬ проблемы доступа к компьютеру, с которыми сталкиваются студенты с ограниченными возможностями, а также аппаратные решения и программное обеспечение для обеспечения доступа к компьютерам и электронным ресурсам.
Ниже приведены примеры РАЗМЕЩЕНИЙ, организованных по ТИПУ НЕВОЗМОЖНОСТИ для ВХОДА, ВЫВОДА и ДОКУМЕНТАЦИИ компьютера.
СЛЕПОТА
Большинство слепых людей могут пользоваться стандартной клавиатурой. Просмотр стандартных экранов и распечатанных документов проблематичен. Специализированные устройства вывода голоса и Брайля могут переводить текст в синтезированный голос и вывод Брайля соответственно. Ниже приведены ПРИМЕРЫ компьютерного ввода, вывода и размещения документации для слепых:
INPUT
* Точки-указатели на клавиатуре для часто используемых клавиш.
ВЫВОД
* Речевой вывод
* Обновляемые дисплеи Брайля, которые позволяют построчно переводить экран в область отображения Брайля
* Тиснители Брайля.
ДОКУМЕНТАЦИЯ
* Тиснители Брайля
* Сканеры с оптическим распознаванием символов, которые могут считывать печатные материалы и сохранять их в электронном виде, где они могут быть прочитаны с помощью речевого вывода или шрифта Брайля.
LOW VISION
Большинство учащихся со слабым зрением могут использовать стандартные клавиатуры. Специальное оборудование или использование встроенных компьютерных функций может помочь изменить отображение на экране и вывод на принтер.Ниже приведены ПРИМЕРЫ компьютерных вводов, выводов и документации для лиц с НИЗКИМ ВИДЕНИЕМ:
INPUT
* Ярлыки с крупным шрифтом и индикаторы исходного ряда.
ВЫХОД
* Большие мониторы и антибликовые экраны
* Программное обеспечение для увеличения экрана
* Регулировка цвета и контрастности
* Системы вывода речи.
ДОКУМЕНТАЦИЯ
* Сканеры с оптическим распознаванием символов
* Версия документации с крупным шрифтом или ASCII.
НАРУШЕНИЯ ОБУЧЕНИЯ
Учащиеся с нарушениями обучаемости обычно не испытывают затруднений с доступом к стандартному компьютерному оборудованию. Доступность специализированного программного обеспечения и технологий предоставила ряд продуктов, подходящих для учебных заведений, которые поддерживают чтение, письмо и организационные навыки. Ниже приведены примеры компьютерных вводов, выводов и документации для лиц с НЕДОСТАТОЧНОСТЬЮ ОБУЧЕНИЯ:
INPUT
* Текстовые процессоры с грамматикой и проверкой орфографии
* Текстовые процессоры с возможностями выделения и выделения текста
* Программное обеспечение для прогнозирования слов
* Программное обеспечение для фонетического правописания, которое может преобразовывать фонетическое написание в правильно написанные слова
* Продукты распознавания речи могут помочь студентам диктовать задания или курсовые работы, а также навигация в Интернете с помощью голосовых команд.
* Программное обеспечение для картирования концепций позволяет визуально представлять идеи и концепции.Это программное обеспечение можно использовать в качестве структуры для начала и систематизации стихов, курсовых работ, резюме, расписаний и компьютерных программ.
ВЫХОД
* Увеличенный экран отображает
* Альтернативные цветовые контрасты
* Речевой вывод
* Системы чтения, включающие OCR и речевой вывод.
ДОКУМЕНТАЦИЯ
* Увеличенные символы
* Речевой вывод.
Нарушения РЕЧИ и СЛУХА
Сами по себе нарушения слуха и речи обычно не мешают доступу к компьютеру.Электронная почта может использоваться для облегчения общения между студентами и преподавателями. Ниже приведены примеры компьютерных средств ввода, вывода и документации для лиц с нарушениями РЕЧИ и СЛУХА:
INPUT
* У учащихся с нарушениями речи или слуха обычно нет проблем с доступом к стандартному компьютеру.
ВЫХОД
* Могут быть предоставлены альтернативы аудиовыходу. Например, компьютер, который использует звуковой сигнал для обозначения ошибки, можно запрограммировать так, чтобы экран мигал, используя параметры операционной системы.
* Коммуникационные устройства могут выступать в качестве замены голоса и служить компенсирующим средством для учащихся, которые не могут общаться устно. Это может позволить им участвовать в обсуждениях и задавать вопросы.
ДОКУМЕНТАЦИЯ
* Люди с нарушениями речи или слуха обычно не испытывают затруднений со стандартными экранами или письменной документацией.
НАРУШЕНИЯ МОБИЛЬНОСТИ и ОРТОПЕДИИ
Важно заверить учащегося, который пользуется инвалидной коляской или который имеет нарушение подвижности, что он может получить доступ к компьютерной рабочей станции.Использование стандартной мыши и клавиатуры для ввода может быть затруднено или невозможно из-за нарушения функции верхних конечностей. Хотя стандартные экранные изображения часто не трудно читать, могут потребоваться модификации программного обеспечения и экрана для облегчения адаптации ввода. Ниже приведены примеры компьютерных вводов, выводов и документации для лиц с МОБИЛЬНОСТЬЮ или ОРТОПЕДИЧЕСКИМИ нарушениями:
INPUT
* Доступные переключатели включения / выключения
* Гибкое позиционирование или установка клавиатур, мониторов и т. Д.
* Программные утилиты, объединяющие несколько или последовательных нажатий клавиш
* Зажимы для рта, ручки для головы или другие указывающие устройства
* Защита клавиш
* Модифицированные клавиатуры (например, расширенные, миниатюрные или одноручные)
* Трекболы или другие устройства ввода обеспечивают альтернатива мыши
* Эмуляция клавиатуры со специализированными переключателями, которые позволяют использовать сканирование или ввод кода Морзе
* Речевой ввод
* Программное обеспечение для предсказания слов.
ВЫХОД
* Речевой вывод
* Для доступа к печатным материалам может потребоваться общая помощь.
ДОКУМЕНТАЦИЯ
* Лица с ограниченными физическими возможностями обычно не испытывают затруднений со стандартными экранами или письменной документацией.
Нарушения ЗДОРОВЬЯ
В целом нарушения здоровья не должны мешать доступу к компьютеру, если только нарушение здоровья не связано с нервно-мышечным или ортопедическим компонентом. В этих случаях вопросы доступа и приспособления будут такими же, как и для людей с ограниченными физическими возможностями. Нарушения здоровья и / или побочные эффекты лекарств могут влиять на другие факторы, такие как выносливость, концентрация и память; таким образом, могут быть полезны приспособления, аналогичные перечисленным для учащихся с ограниченными возможностями обучения.
ПСИХИАТРИЧЕСКИЕ НЕДОСТАТКИ / НАРУШЕНИЯ ПСИХИЧЕСКОГО ЗДОРОВЬЯ
В целом, нарушения психического или психического здоровья не должны мешать доступу к компьютеру. Однако побочные эффекты лекарств могут влиять на другие факторы, такие как выносливость, концентрация и память, которые могут повлиять на обучение. Могут быть полезны приспособления, аналогичные перечисленным для учащихся с ограниченными возможностями ОБУЧЕНИЯ.
ВЕБ-СТРАНИЦЫ
Всемирная паутина быстро стала доминирующим инструментом Интернета, сочетая гипертекст и мультимедиа, чтобы обеспечить сеть образовательных, правительственных и коммерческих ресурсов.Популярность Интернета резко возросла, потому что это мощное и универсальное средство массовой информации. Большая часть его возможностей заключается в том, что он представляет информацию в различных форматах, а также организует эту информацию с помощью гипертекстовых ссылок.
Из-за мультимедийной природы Интернета в сочетании с плохим дизайном некоторых веб-сайтов многие пользователи Интернета не могут использовать весь спектр ресурсов, которые предоставляет этот революционный инструмент. Некоторые посетители:
* Невозможно увидеть графику из-за нарушения зрения
* Не слышно звука из-за нарушения слуха
* Используйте медленные соединения и модемы или старое оборудование, которое не может загружать большие файлы
* Испытывают трудности с навигацией по плохо организованным сайтам с нечеткими направлениями, потому что они обучаются инвалиды, говорят на английском как на втором языке или моложе среднего пользователя.
Человек с нарушением МОБИЛЬНОСТИ, возможно, НЕ сможет использовать мышь и полагается на клавиатуру для просмотра веб-страниц. Некоторые люди используют адаптивные технологии на своем компьютере для доступа в Интернет. Слепой человек может использовать СИСТЕМУ ВЫВОДА РЕЧИ для чтения вслух текста, отображаемого на экране; эта система может состоять из программного обеспечения для чтения с экрана и синтезатора речи. Она НЕ сможет использовать систему вывода Брайля, и, хотя существуют специальные клавиатуры, большинство слепых людей используют стандартные клавиатуры и становятся СЕНСОРНЫМИ ТИПИСТАМИ.
Для создания ресурсов, которые могут использоваться самым широким кругом потенциальных посетителей, а не идеализированным «средним», ДИЗАЙНЕРЫ веб-страниц должны применять принципы «универсального дизайна». Они должны учитывать особые потребности людей с ограниченными возможностями, пожилых людей, людей, для которых английский является вторым языком, а также тех, кто использует устаревшее оборудование и программное обеспечение. Следование принципам УНИВЕРСАЛЬНОГО ДИЗАЙНА при создании веб-ресурса гарантирует, что все пользователи Интернета могут получить доступ к информации на веб-сайте, независимо от их способностей, инвалидности или ограничений их оборудования и программного обеспечения.
Консорциум World Wide Web (W3C) разрабатывает общие протоколы, используемые в Интернете, для обеспечения взаимодействия и содействия универсальному доступу. Как сказал Тим Бернерс-Ли, директор W3C: «Сила Интернета в ее универсальности. Доступ для всех, независимо от инвалидности, является важным аспектом».
Инициатива W3C по обеспечению доступности Интернета (WAI) предложила РЕКОМЕНДАЦИИ для всех авторов Интернета. Следующие предложения основаны на рекомендациях WAI для веб-содержимого. Следуйте этим рекомендациям при разработке и редактировании ваших веб-страниц, чтобы обеспечить их доступность для разнообразной аудитории.
1. Общий дизайн страницы
Создание хорошо организованного веб-сайта помогает посетителям ориентироваться в представленной информации
* Поддерживайте простой, единообразный макет страницы на всем сайте
* Сохраняйте простой фон. Убедитесь, что имеется достаточный контраст.
* Используйте стандартный HTML
* Создайте большие кнопки
* Подписывайте видео и транскрибируйте другой звук
* Сделайте ссылки описательными, чтобы они понимались вне контекста
* Включите примечание о доступности.
2.Графические функции
Слепые люди не могут просматривать графические функции вашего веб-сайта. Многие люди с нарушениями зрения используют программы вывода речи с нестандартными браузерами (такими как pwWebSpeak или Lynx) или графические браузеры с отключенной функцией загрузки изображений. Включите ТЕКСТОВЫЕ АЛЬТЕРНАТИВЫ, чтобы сделать контент в графических функциях доступным.
3. Использование специальных функций
* С осторожностью используйте ТАБЛИЦЫ и КАДРЫ и рассматривайте альтернативы.
* Предоставьте альтернативы для ФОРМ и БАЗ ДАННЫХ.
* Предоставьте альтернативы содержимому в ПРИЛОЖЕНИЯХ и ПЛАГИНАХ.
4. Тестирование веб-страниц
ПРОТЕСТИРУЙТЕ свой веб-сайт с помощью различных веб-браузеров и всегда тестируйте свои страницы хотя бы с одним текстовым браузером. Таким образом, вы увидите свои веб-ресурсы с разных точек зрения пользователей. Также просматривайте РЕСУРСЫ на своем сайте, используя различные компьютерные платформы, размеры мониторов и разрешения экрана. Используйте САЙТ ПРОВЕРКИ ДОСТУПНОСТИ, такой как Bobby, который выполняет диагностику юзабилити на ваших страницах и указывает элементы, которые могут быть недоступны.Тестирование вашего сайта особенно важно, если вы используете программное обеспечение для создания HTML для написания своих страниц, поскольку многие из этих программ не включают автоматически атрибуты ALT и другие специальные возможности. Измените свой HTML, чтобы сделать свой сайт доступным.
ПРИМЕЧАНИЕ. Для получения дополнительных сведений перейдите на веб-страницу ВЕБ-СТРАНИЦ, указанную в разделе «ВЕБ-АДРЕСА ДЛЯ ДОПОЛНИТЕЛЬНОГО ЧТЕНИЯ» в конце этого урока.
==========
РЕЗЮМЕ
Маловероятно, что ВЫ как преподаватель несете прямую ответственность за создание КОМПЬЮТЕРНЫХ ЛАБОРАТОРИЙ или создание приспособлений для АДАПТИВНЫХ ТЕХНОЛОГИЙ.Однако возможно, что вы создадите ВЕБ-СТРАНИЦЫ или уже создали их. Чтобы помочь своим ученикам, важно, чтобы вы ЗНАЛИ о многих проблемах с доступом к компьютеру, с которыми сталкиваются ученики с ограниченными возможностями, а также о аппаратных и программных решениях для обеспечения доступа к компьютерам и электронным ресурсам.
Представленные примеры проблем и приспособлений могут служить справочным материалом, который поможет вам распознать варианты, когда вы встречаетесь со студентом с ограниченными возможностями на существующих курсах, а также на этапах ПЛАНИРОВАНИЯ и ДИЗАЙНА создания нового курса.Включение принципов универсального дизайна в курс с самого начала снижает потребность в дополнительных приспособлениях.
==========
ВОПРОС ДЛЯ ОБСУЖДЕНИЯ
Отправьте группе сообщение электронной почты, ответив на следующий вопрос:
Какие особенности дизайна ваш факультет может использовать при создании нового компьютерного класса, чтобы сделать его доступным для всех студентов?
Ваш адрес электронной почты В строке ТЕМА должно быть указано: Помещения 10: АДАПТИВНАЯ ТЕХНОЛОГИЯ.
==========
ДОПОЛНИТЕЛЬНАЯ ИНФОРМАЦИЯ
Вы можете прочитать ответы на часто задаваемые вопросы, изучить тематические исследования или получить доступ к дополнительным ресурсам для компьютерных лабораторий по адресу:
http://www.washington.edu/doit/Faculty/Strategies/Academic/Computerlabs
для адаптивных технологий по адресу:
http://www.washington.edu/doit/Faculty/Strategies/Academic/Adaptive
и для веб-страниц: http://www.washington.edu/doit/Faculty/Strategies/Academic/Webpages
==========
(c) 2001 DO-IT.Разрешается копировать материалы из этого электронного письма в образовательных некоммерческих целях при условии указания источника. Свяжитесь с DO-IT по телефону: 1-206-685-3648 или [email protected]
.
.