Специалист | HTML и CSS. Уровень 2. Кроссбраузерная верстка и основы юзабилити [2010] PCRec

Автор (режиссер): Специалист
Название: HTML и CSS. Уровень 2. Кроссбраузерная верстка и основы юзабилити [2010] PCRec
Год выпуска: 2010
Жанр: Web - дизайн
Качество видео: PCRec
Продолжительность: 21:05:03
Видеокодек: WMV3
Битрейт видео: ~528 Kbps, 29.97fps
Размер кадра: 1280 x 960
Аудиокодек: WMA
Битрейт аудио: 48.0 Kbps, 1 channel, 44100 Hz

Описание:
HTML и CSS — основные языки, с помощью которых разрабатываются веб-страницы. Формально HTML и CSS являются разными языками, но применяются в тесной связи друг с другом и на практике составляют единый комплекс технологий. Этот учебный курс даст вам представление о современных технологиях HTML и CSS, которые совместимы со стандартами Консорциума W3C и поддерживаются в браузерах, распространённых на сегодняшний день.

Рассматриваются продвинутые технологии вёрстки веб-страниц и специальные эффекты, в том числе с использованием абсолютного и относительного позиционирования, переполнения и обрезки блоков, внедрённых объектов, изображений в CSS. Также рассматриваются вопросы профессиональной разработки кода: настройка инструментов разработки, организация технического процесса, разработка технических требований, проектирование макетов, тестирование и контроль качества веб-страниц.

Курс предназначен для веб-мастеров, начинающих верстальщиков, редакторов кода, веб-дизайнеров, веб-программистов, оптимизаторов.
Цель курса: Изучить современные технологии HTML (XHTML) и CSS на профессиональном уровне.

По окончании курса Вы будете уметь:

Cамостоятельно выбирать программные средства разработки в соответствии со своими задачами
Грамотно проектировать веб-страницы и эффективно организовывать разработку кода
Разрабатывать код HTML и CSS в соответствии со стандартами Консорциума W3C
Создавать веб-страницы в соответствии с основными принципами практичности (usability) и доступности (accessibility) для пользователей
Разрабатывать веб-страницы, совместимые с распространёнными браузерами: Internet Explorer 6 и выше, Firefox, Opera 7 и выше
Верстать веб-страницы с применением современных технологий HTML и CSS: бестабличная и комбинированная вёрстка, абсолютное и относительное позиционирование, переполнение и обрезка блоков, внедрение внешних объектов, изображения в CSS
Оптимизировать веб-страницы для печати и для просмотра на наладонных устройствах
Тестировать веб-страницы, выполнять контроль качества

Внимание: Это перекодированная эта раздача. Теперь для просмотра видео не требуется дополнительно устанавливать видеокодек G2M3 и размер стал значительно меньше.

Модуль 1. Веб-стандарты и их поддержка в программных продуктах

Консорциум W3C и его роль в развитии веб-технологий. Деятельность Консорциума W3C по стандартизации языков HTML (XHTML) и CSS.
Как пользоваться документацией Консорциума W3C. Спецификации HTML 4.01, XHTML 1.0, CSS 2.1.
Какие источники информации про HTML (XHTML) и CSS заслуживают доверия. Справочная информация о поддержке стандартов на официальных сайтах популярных браузеров.
Определение типа документа (DTD). Пролог документа HTML (XHTML) и объявление типа документа (DOCTYPE). Объявление XML (XML declaration).
Переключение DOCTYPE в браузере Internet Explorer. Режим стандартов (standards-compliant mode) и режим совместимости (compatibility mode). Примеры полезных эффектов, доступных только в режиме стандартов: оформление элемента html, горизонтальное центрирование таблиц, внутренние отступы (padding) для изображений и др.
Переключение DOCTYPE в браузере Firefox и родственных браузерах. Режим полной поддержки стандартов (full standards mode), частичной поддержки стандартов (almost standards mode), режим уловок (quirks mode). Переключение DOCTYPE в браузере Opera.
Стандарт Unicode. Кодировки Unicode. Поддержка Unicode в различных браузерах.

Модуль 2. Эффективное использование инструментов разработки веб-страниц

Инструментарий разработчика: настройки операционной системы, файловый менеджер, клиент FTP, текстовый редактор, графический редактор, среды разработки сайтов, вспомогательные программы. Как установить и настроить программные средства, чтобы они эффективно взаимодействовали друг с другом.
Эффективная работа с текстовым редактором. Грамотное использование клавиатуры при работе с кодом HTML и CSS. Свойства текстового редактора: нумерация строк, работа с различными кодировками, синтаксическая подсветка, выделение специальных символов, сочетания клавиш, шаблоны, макросы, автоматизация действий и др.
Настройка клиента FTP для удобной синхронизации файлов на локальном компьютере и на веб сервере. Технология SSH, синхронизация с помощью rsync.
Стиль кодирования. Комментарии. Полезные приёмы разработки и комментирования кода, принципы присвоения имён файлам и компонентам кода. Организация рабочего пространства для продуктивной работы.
Панель инструментов IE Developer Toolbar. Использование IE Developer Toolbar для анализа веб страниц и управления некоторыми свойствами браузера. Панель инструментов Web Developer для Firefox и родственных браузеров.
Составление и анализ технических требований к вёрстке веб-страниц. Проектирование макетов. Тестирование веб-страниц: просмотр в различных браузерах, проверка валидатором, просмотр при различной ширине окна браузера и различных размерах шрифта. Контроль качества веб страниц, технические критерии качества.

Модуль 3. Эргономика, практичность и удобство использования сайта (usability) и доступность (accessibility) сайтов

Практичность (usability) сайтов. Цели и задачи пользователей. Общие принципы разработки интерфейсов в применении к сайтам. Псхологические аспекты взаимодействия пользователя с сайтом. Тестирование практичности.
Доступность (accessibility) сайтов. Обзор различных технических устройств для просмотра сайтов. Технические аспекты взаимодействия пользователя с сайтом. Ограниченные возможности пользователей.

Модуль 4. Совместимость веб-страниц с различными браузерами

Какие браузеры распространены сейчас и будут распространены в ближайшем будущем. Как загрузить, установить и настроить эти браузеры, чтобы тестировать в них веб-страницы.
Основные особенности популярных браузеров. Важные различия между IE 6 и IE 7. Характерные свойства Firefox (и родственных браузеров) и Opera.
Неполная поддержка стандартов Консорциума W3C в современных браузерах. Характерные примеры кода, который поддерживается в одних браузерах и не поддерживается в других: фуригана (ruby annotation), значения свойства display в CSS, псевдоклассы :before и :after, автоматическая нумерация и др.
Характерные примеры кода, который по-разному обрабатывается в разных браузерах: атрибуты alt и title, оформление перечней, оформление форм, псевдокласс :hover и др.
Распространённые ошибки в браузерах. "Классические" ошибки в IE 6: "гильотина", "pekaboo" и др. Ошибки в Firefox и родственных браузерах: неполная поддержка элементов col и colgroup, оформление элемента caption, неправильное подчёркивание ссылок и др. Ошибки в Opera: неполная поддержка Unicode, неправильное подчёркивание ссылок и др.
Способы сокрытия кода от отдельных браузеров ("фильтры"). "Трюки" со сложными селекторами для IE (с учётом особенностей IE 7). Условные комментарии (conditional comments). Примеры разработки "кросс-браузерного" кода с использованием неполной поддержки стандартов, ошибок и "фильтров".

Модуль 5. Продвинутые технологии HTML (XHTML) и CSS

Относительное и абсолютное позиционирование. Поведение дочерних элементов при позиционировании. Порядок наложения: свойство z-index. Примеры позиционирования: наложение блоков, закрепление "подвала" внизу страницы. Обрезка блока: свойство clip. Фиксированное позиционирование и в каких браузерах оно поддерживается.
Переполнение блока: свойство overflow. Особенности поддержки overflow в разных браузерах. Создание "фреймообразной" вёрстки с использованием overflow. Расширения IE: свойства overflow-x и overflow-y.
Внедрение внешних ресурсов: элемент object. Внедрение файлов HTML, создание "фреймообразной" вёрстки с использованием object. Внедрение роликов Flash в соответствии со стандартами Консорциума W3C. Внедрение векторной графики (SVG); предоставление альтернативного растрового изображения браузерам, которые не поддерживают этот формат.
Улучшение доступности форм. Элемент label. Атрибуты tabindex и accesskey. Особенности оформления форм средствами CSS.
Пиктограмма сайта (favicon). Формат ICO. Особенности поддержки пиктограммы в различных браузерах.
Особенности печати в различных браузерах. Разработка таблиц стилей для печати (print) и портативных устройств (handheld). Альтернативные таблицы стилей.
Использование элемента link для браузерной навигации. Поддержка браузерной навигации в различных браузерах.

Модуль 6. Специальные эффекты в HTML (XHTML) и CSS

Расширенные средства работы с текстом. Использование специальных знаков: ударения, переносы, неразрывные пробелы и дефисы. Свойство white-space.
Оформление текста в CSS. Промежуточная насыщенность (значение 600 для свойства font weight). Свойство text-transform. Свойства line-height и vertical-align. Оформление буквиц.
Особенности блочной модели в CSS. Использование отрицательных значений margin. Свойства min-width, min-height, max-width, max-height: их практическое применение и поддержка в браузерах.
"Фоновые" изображения в CSS. Характерные эффекты изображений в CSS: узоры и орнаменты, "масштабируемые" растровые изображения, красивые рамки, "подсветка" гиперссылок (rollover) и др. Сочетание изображений в CSS с элементом img, рамками и цветом фона CSS.
Особенности формата PNG. Эффектные примеры использования полупрозрачности (альфа-канала) в PNG (для IE 7, Firefox, Opera). Как обеспечить альтернативное изображение для IE 6.
Перспективы дальнейшего развития HTML (XHTML) и CSS. Стандарт CSS 3, примеры его частичной поддержки в существующих браузерах. Общее представление о XHTML 2.0. Дальнейшее существование HTML (XHTML) и CSS в контексте общего развития Интернета и веб-технологий.

Скриншоты:

Время раздачи: 24/7 - круглосуточно

Ребят, тетрадка так и не появилась ни у кого с рабочим макетом?

raulvodov писал(а):

Ребят, тетрадка так и не появилась ни у кого с рабочим макетом?

Могу скинуть на почту итоговую верстку

app06 писал(а):

raulvodov писал(а):

Ребят, тетрадка так и не появилась ни у кого с рабочим макетом?

Могу скинуть на почту итоговую верстку

скинул в личку почту, спасибо большое

Скинте, тетрадку плиз=)) Этот курс Евгения Петрова? И первый курс его есть где ?

Maksimiliano Teodorri писал(а):

Этот курс Евгения Петрова? И первый курс его есть где ?

Есть: Специалист | HTML и CSS. Уровень 1. Создание сайтов по стандартам W3C и переход на HTML 5 и СSS 3 (WMV3) [2011] PCRec

Отличный комментарий на данный курс попался в сети:

Просмотр доступен только для зарегистрированных пользователей

Скиньте кто может доп материалы к курсу плиз!! По ссылке что вверху на доп материалы не получается скачать
!!!

alpha8422 писал(а):

Доп. мат. - http://rghost.ru/39167769

Grazie mille!!!
Админ закачай заново допы!

Так нигде и не нашел, есть у кого просто psd макет с последнего урока, а повторять всё на видео за преподом это тупо

Прошёл 1ый курс по HTML и SCC от Борисова, также посмотрел 4 курса Евгения Попова по html, css, создания сайта с нуля и от Евгения Петрова ещё 1-ый курс, но не до конца, так как предпоследнее видео было коротким 2-3 мин и было бы последнее уже смотреть не интересно. Теперь решил смотреть второй курс от Евгения Петрова и параллельно буду практиковаться ещё на PSD шаблонах или сам себе придумывать какие нибудь задания и т.п. Не стал смотреть самый новый второй курс уж слишком много плохих отзывов на него. У меня вопрос подскажите, что из того курса стоит посмотреть выборочно? Я имею в виду то, что не вошло в этот курс, чтоб не смотреть его весь.

Пожалуйста, закачайте заново Допы к раздаче...
Петров - препод, таких 1 на тысячи...

Курс, бесспорно, очень хороший.

Но есть несколько моментов, которые серьезно уменьшают полезность данного курса. Перечислю их исходя из реалий 2016 года.

1. Курс откровенно старый, ведь с момента его выхода прошло уже шесть лет (скоро будет семь лет). Для отрасли веб-разработки это целая вечность! Потому, это один из главных его минусов.

2. В курсе намешано много лишней информации. К примеру, те же старые браузеры IE6, IE7, IE8 - сейчас данный вопрос уже неактуален вообще. Или отдельные вопросы верстки уголков для кнопки, лектор в курсе верстает отдельными картинками каждый уголок, но это уже вообще устаревший подход. Существует одно единственное правило в CSS3, которое без труда решает эту задачу для верстальщика (мультифон изображений). То есть, в курсе используются откровенно устаревшие методики и подходы к верстке. Не спорю, что на тот момент (2010 год выхода курса), это было в самом тренде, но сейчас технологии верстки уже давным давно ушли далеко вперед.

3. Лектор - очень специфичен. К нему необходимо привыкнуть, поскольку он очень много знает, но порой сложно уловить ход его мыслей. К примеру, по сравнению с первым уровнем от этого же лектора, данный курс намного сложнее для восприятия, сложнее понимать что говорит лектор. Чего я никак не заметил в его первом уровне. Там было все очень хорошо в плане понимания. Не знаю, почему так... Возможно материал там подавался более в размеренном темпе, нежели чем в этом курсе.

4. Тем не менее, всё равно я похвалю напоследок лектора данного курса - Евгения Петрова - человек действительно старался донести что-то до своих слушателей, выкладывался на все сто процентов, не жалел себя на лекциях. Один этот момент достоин большого уважения! Спасибо ему огромное, жаль, что он уже не ведет курсы в специалисте. Даже на платной основе можно было бы к нему сходить послушать новый курс, который был бы актуален реалиям 2016 года.

Удачи всем в обучении!

Спасибо.