|
|
| Глава 1 << | | История интернет и стандарты | |
|---|
| 30 minutes |
Кратко обсуждаются преимущества использования стандартов Web, почему они не общеприняты, как должны были бы быть, и как курс намерен решить эти проблемы. Рассказывается, как структурирован курс, для кого он предназначен.
| - |
| 28 minutes |
Краткий экскурс в историю создания Интернет, World Wide Web (WWW), и "стандартов Web". Рассказывается о "Войнах браузеров", а также появлении, развитии и внедрении стандартов Web
| - |
| 30 minutes |
Cначала кратко рассматривается реальная коммуникация компьютеров с помощью HTTP и TCP/IP, а затем различные языки, которые используются для создания Web-страниц, составляющих Интернет
| - |
| 33 minutes |
Рассматривается чуть углубленней каждый из базовых строительных блоков Web - HTML (или XHTML), CSS и JavaScript. Что они делают, и как эти три составляющие взаимодействуют друг с другом при создании Web-сайта
| - |
| 27 minutes |
Анализируется, все ли браузеры Web на 100% совместимы со стандартами. Все ли разработчики Web правильно используют стандарты Web. Создают ли разработчики Web страницы с помощью стандартов Web, и при этом могут быть уверены, что их дизайн будет поддерживаться везде. Как же в реальности обстоят дела?
| - |
| 36 minutes |
| - |
|
| Глава 2 << | | Информационная архитектура сайта и работа с цветом | |
|---|
| 21 minute |
Рассматриваются начальные этапы планирования Web-сайта, и дисциплина, которую обычно называют Информационная архитектура, или IA (Information Architecture)
| - |
| 28 minutes |
Исследуются различные страницы Web-сайта. Обдумывается, какие на них должны появиться объекты, рассматриваются такие проблемы, как согласованность, юзабилити, и доступность
| - |
| 35 minutes |
Рассмотрены основы цвета и три простые цветовые схемы, помогающие при выборе цвета для сайта. В последующих материалах будет рассказано, как упростить этот выбор цветов
| - |
| 55 minutes |
Что необходимо знать, приступая к созданию каркаса сайта? Что нужно продумать в первую очередь, приступая к разработке сайта? На примере воображаемого сайта автор показывает, как начать делать сайт. Логотип, его влияние на дизайн сайта. Предполагаемая компоновка сайта, ее особенности. Немного слов о рекламе на сайте, как лучше ее разместить. Как осуществить проверку компоновки?
| - |
| 56 minutes |
Основная информация о гарнитурах шрифтов. Определение гарнитуры шрифта для заголовков, подзаголовков и основного текста. Некоторые секреты выравнивания. Советы по подбору различных цветовых комбинаций для Web-сайта. Поэтапное создание макета сайта. Тестирование Web-сайта перед переходом в рабочий режим
| - |
| 30 minutes |
Ограничения полиграфии в Web (ограниченный выбор шрифтов, переносы слов, кернинг). Рекомендации по реализации полиграфии в Web (выбор набора шрифтов, длина строки, высота строки, буквицы, капитель, висящая пунктуация, полиграфически-правильная пунктуация)
| - |
| 36 minutes |
| - |
|
| Глава 3 << | | Основы языка HTML | |
|---|
| 28 minutes |
Лекция знакомит с основами языка HTML - что это такое, что он делает, кратко история его появления, и немного о том, как выглядит структура документа HTML
| - |
| 31 minute |
Рассматривается разметка внутри элемента head. Кратко рассказывается о различных частях этого раздела, и для чего они предназначены, включая doctype, элемент title, ключевые слова и описание. Дается представление о JavaScript и стилях CSS (как внутренних, так и внешних) и о том, что не следует оставлять в head
| - |
| 23 minutes |
Более подробно рассматривается элемент doctype, показаны его функции при проверке кода HTML и порядок выбора doctype для документа. А также, объявление XML
| - |
| 36 minutes |
| - |
|
| Глава 4 << | | Разметка текста, списки, изображения и ссылки | |
|---|
| 22 minutes |
Рассматриваются основы использования HTML для описания значения контента в теле (body) документа. Рассмотрены общие структурные элементы, такие как заголовки и параграфы, вставка цитат и кода; строковый контент, такой как короткие цитаты и визуальное выделение. А также, кратко - устаревший контент представления
| - |
| 40 minutes |
Рассмотрены различные типы списков, доступных в HTML, когда и как их нужно использовать, и как применять некоторые базовые стили
| - |
| 30 minutes |
Разговор о вещах, которые делают дизайн Web привлекательным - об изображениях. О том, как добавлять в Web-документы визуальную информацию доступным образом (чтобы люди с недостатками зрения могли, тем не менее, использовать информацию сайта). А также, как и когда использовать строковые изображения для применения информационных или фоновых изображений при компоновке страницы
| - |
| 37 minutes |
Все о ссылках. О том, как создавать ссылки, которые легко понять и использовать в любой рабочей среде. О том, как ссылки влияют на популярность в поисковых системах. А также, дается несколько советов, как лучше сформулировать ссылки
| - |
| 36 minutes |
| - |
|
| Глава 5 << | | Таблицы и формы | |
|---|
| 30 minutes |
Рассказывается, как правильно использовать таблицы HTML, какие элементы и атрибуты для этого используются. А также, даются некоторые сведения, как с помощью CSS можно улучшить вид таблицы
| - |
| 34 minutes |
Рассмотрены все основные элементы, которые необходимо знать для создания элегантной, доступной формы с помощью HTML
| - |
| 36 minutes |
| - |
|
| Глава 6 << | | Семантические элементы и базовые контейнеры | |
|---|
| 31 minute |
Представлены некоторые из малоизвестных и редко используемых семантических элементов HTML. Рассмотрены разметка программного кода, взаимодействие с компьютерами, цитирование и аббревиатуры, демонстрация сделанных в документах изменений и другие. В конце рассматриваются некоторые предложения по новой дополнительной семантике, сделанные в черновом варианте HTML 5
| - |
| 24 minutes |
Дается объяснение, как и когда применять в HTML элементы span и div, которые не используются для описания контента, но являются базовым механизмом, позволяющим создать специальную структуру или объединить в группы элементы, где не подходит в действительности никакой другой элемент HTML
| - |
| 18 minutes |
| - |
|
| Глава 7 << | | Навигационное меню и валидация HTML | |
|---|
| 58 minutes |
Рассмотрены навигация и меню Web-сайта. Рассказано о различных типах меню, и как создавать их в HTML. Затронута тема юзабилити меню и доступности
| - |
| 36 minutes |
| - |
| 27 minutes |
Как лучше всего начать проверку страниц HTML и гарантировать, что эти страницы будут выводиться правильно в различных браузерах, без каких-либо ошибок? Ответом является валидация (проверка на соответствие правилам). О ней и пойдет речь
| - |
| 18 minutes |
| - |
|
| Глава 8 << | | Доступность | |
|---|
| 1 hour 3 minutes |
Рассмотрены вопросы, что такое доступность, почему это важно, как обеспечить доступность сайтов, и какие существуют рекомендации для создания доступных сайтов
| - |
| 27 minutes |
| - |
| 1 hour 27 minutes |
Рассматриваются подходы к оценке доступности Web, как с точки зрения создания формального соответствия, так и с точки зрения максимизации доступности
| - |
| 18 minutes |
| - |
|
| Глава 9 << | | Каскадные таблицы стилей (CSS) | |
|---|
| 1 hour 1 minute |
Лекция посвящена основам технологии каскадных таблиц стилей (CSS).
| - |
| 36 minutes |
| - |
| 35 minutes |
В лекции рассматриваются две фундаментальные концепции CSS - Наследование и каскадирование.
| - |
| 36 minutes |
| - |
| 58 minutes |
Эта лекция строится на основе полученных ранее в этом курсе знаний, предоставляя подробное руководство по эффективному оформлению текста с помощью CSS.
| - |
| 36 minutes |
| - |
|
| Глава 10 << | | Модель компоновки и фоновые изображения | |
|---|
| 1 hour 5 minutes |
В лекции рассказывается о свойствах CSS, которые управляют компоновкой элементов HTML, включая их границы, поля, и многое другое.
| - |
| 36 minutes |
| - |
| 49 minutes |
В этой лекции рассматриваются основы работы с фоновыми изображениями CSS, включая применение фоновых изображений с помощью CSS, настройка их размещения, укладка их вертикально или горизонтально, и объединение фоновых изображений с помощью спрайтов CSS для улучшения производительности сайта.
| - |
| 36 minutes |
| - |
|
| Глава 11 << | | Списки, ссылки, таблицы | |
|---|
| 53 minutes |
В данной лекции рассматриваются основные приемы оформления списков и ссылок. Показываются основные типы списков: упорядоченные и неупорядоченные, вертикальные и горизонтальные, а также вложенные списки. Рассматриваются состояния ссылок, ожидания пользователей относительно ссылок, оформление ссылок с помощью CSS
| - |
| 36 minutes |
| - |
| 39 minutes |
В данной лекции рассматриваются различные аспекты оформления таблиц. Показывается структура таблицы, оформление отдельных элементов: таблицы в целом, заголовка, отдельных ячеек, границ, фона. Также рассматриваются основные дизайнерские приемы по оформлению таблиц: разметка "зебра", неравные столбцы, неполные и внутренние сетки. В конце лекции показываются две распространенные ошибки, связанные с оформлением таблиц, а также способы их устранения
| - |
| 36 minutes |
| - |
|
| Глава 12 << | | Формы и плавающие элементы | |
|---|
| 1 hour 13 minutes |
Статья о формах HTML познакомила с основами создания и оформления форм. В данной статье будет продолжено рассмотрение форм с того места, где остановилась предыдущая, предоставляя дополнительные подробности об элементах и стилях форм, и о том, как формы используются в реальных современных Web-приложениях
| - |
| 42 minutes |
В данной лекции рассматриваются плавающие элементы и очистка. Объясняется, что это такое и зачем применяется в современном web-дизайне. Детально разъясняется, как браузеры воспроизводят HTML/CSS документы, дается определение понятию "бокс", объясняется, как располагаются различные типы боксов на странице. Рассматриваются контейнерные плавающие элементы и заключение в оболочку, а также способ центрирования плавающего элемента
| - |
| 36 minutes |
| - |
|
| Глава 13 << | | Позиционирование | |
|---|
| 48 minutes |
В данной лекции рассматриваются два вида позиционирования элементов на странице: статическое и относительное. Показываются различия двух методов, а также варианты применения каждого из них. Показывается отличие в компоновке блочных и строковых боксов при статическом позиционировании. Рассматривается вопрос построения много-столбцовой компоновки с помощью относительного позиционирования. Рассматриваются способы решения проблем, возникающих при работе с браузером Internet Explorer
| - |
| 36 minutes |
| - |
| 44 minutes |
В данной лекции рассматривается абсолютное и фиксированное позиционирование, показываются особенности абсолютно позиционированных элементов в контексте потока документа. Рассматриваются вопросы определения позиции, размеров и расположения в третьем измерении абсолютно позиционированных элементов. Рассматривается понятие контекста стека, а также его разновидности: локального контекста стека. Также рассматриваются особенности элементов с фиксированным позиционированием и возможные варианты применения этих элементов
| - |
| 36 minutes |
| - |
|
| Глава 14 << | | Проектирование шаблона сайта | |
|---|
| 1 hour 2 minutes |
В лекции рассказано как с помощью изложенного материала в предыдущих лекциях создать шаблон всего сайта.
| - |
|
| 27 minutes |
Цель приложения состоит в том, чтобы предоставить краткое руководство по размещению Web-сайта в сети
| - |
|
| 27 minutes |
В приложении рассмотрены некоторые, реже используемые, элементы, которые можно добавлять в раздел head документа HTML; они менее важны, но, тем не менее, очень полезны. А также, как объединить несколько документов HTML в большую совокупность из нескольких частей, что такое иконка сайта (favicon) и как ее использовать, и что такое RSS
| - |
|
|
|
|
|
|
|
Этот курс по стандартам Web, состоящий из отдельных лекций, доступен почти любому, кто хочет изучить Web-дизайн на основе стандартов Web с самого начала.