Специалист | HTML и CSS. Уровень 2. Кроссбраузерная верстка, основы юзабилити, HTML5 и CSS3 (2014) PCRec [H.264]

Специалист | HTML и CSS. Уровень 2. Кроссбраузерная верстка, основы юзабилити, HTML5 и CSS3 (2014) PCRec

Автор (режиссер): Специалист
Жанр: Web - дизайн
Продолжительность: 24:00:00
Качество видео: PCRec
Видеокодек: AVC/H.264
Битрейт видео: ~15fps 69kbps
Размер кадра: 912x672
Аудиокодек: AAC
Битрейт аудио: 44100Hz stereo 64kbps

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

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

Курс предназначен для веб-мастеров, начинающих верстальщиков, редакторов кода, веб-дизайнеров, веб-программистов, оптимизаторов.

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

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

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

Стандарты W3C. Документация.
DOCTYPE.
Стандарт Unicode. Кодировки Unicode. Поддержка Unicode в различных браузерах.
Протокол HTTP.

Модуль 2. Элементы и атрибуты HTML5 и структурастраницы

Секции, выноски, статьи, навигационные, «шапка», «подвал».
Элементы форм и их атрибуты.

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

Инструментарий разработчика:, FTP-клиенты, текстовые редакторы, графические редакторы, вспомогательные программы. Web Developer, Mozilla
Firebug, Zen Coding/Emmet, IE WebDeveloper.
Составление и анализ требований к вёрстке веб-страниц . Проектирование макетов. Тестирование веб-страниц: просмотр в различных браузерах,
проверка валидатором, просмотр при различной ширине окна браузера и
различных размерах шрифта. Контроль качества веб страниц.

Практическая работа: построение структуры страницы с использованиемвспомогательных программ.

Модуль 4. Селекторы в HTML5

Селекторы перешедшие из HTML4/xHTML.
Псевдоклассы/псевдоэлементы. Контекстные селекторы. Новые селекторы в HTML.
Ролловеры, спрайты.

Практическаяработа: использование специфических селекторов при версткестраницы.

Модуль 5. Введение в построение удобных дляиспользования сайтов (usability) и доступность (accessibility) сайтов

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

Семинар: Учет удобства использования сайтов

Модуль 6. Продвинутые технологии HTML и CSS

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

Практическаяработа: использование на практике CSS-свойствпозиционирования, отображения и др.

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

Условные комментарии.
Скрипты для поддержки селекторов и изменения поведения старых браузеров.
Программы эмуляторы старых версий IE.
Фильтры.

Практическаяработа: использование кроссбраузерной верстки

Модуль 8. Использование свойств CSS2 и CSS3

Градиенты, анимация, трансформация (2D и 3D), переходы
Медиа-запросы (построение мобильных версий сайтов, адаптивная верстка)
@font-face (веб-шрифты), текстовые эффекты,
Многоколоночная верстка,
Работа с фоном (+градиенты)
Закругление углов, модель Flex-блоков.
Определение технологий, поддерживаемых браузером.

Практическаяработа: построение выпадающего меню средствами HTML5 и CSS3

Модуль 9. Верстка макета

Принципы нарезки макета из psd-файла.
Выбор размеров и вариантов верстки.
Верстка.

Практическаяработа: нарезка макета страницы
Практическаяработа: верстка страницы по заданному макету.

Модуль 10. Типовые решения

CSS-фреймворки.
Динамический CSS (на примере LESS).
Шаблоны CMS
Решения на JavaScript.

Общее
Полное имя : 1_1.mp4
Формат : MPEG-4
Профиль формата : Base Media / Version 2
Идентификатор кодека : mp42
Размер файла : 60,0 Мбайт
Режим общего битрейта : Переменный
Общий поток : 138 Кбит/сек

Видео
Идентификатор : 1
Формат : AVC
Формат/Информация : Advanced Video Codec
Профиль формата : High@L3.1
Параметр CABAC формата : Да
Параметр ReFrames формата : 4 кадра
Идентификатор кодека : avc1
Идентификатор кодека/Информация : Advanced Video Coding
Продолжительность : 1 ч. 0 м.
Продолжительность оригинала : 1 ч. 0 м.
Битрейт : 70,0 Кбит/сек
Ширина : 912 пикселей
Высота : 672 пикселя
Соотношение сторон : 4:3
Режим частоты кадров : Переменный
Частота кадров : 15,000 кадров/сек
Минимальная частота кадров : 15,000 кадров/сек
Максимальная частота кадров : 15,003 кадров/сек
Цветовое пространство : YUV
Субдискретизация насыщенности : 4:2:0
Битовая глубина : 8 бит
Тип развёртки : Прогрессивная
Бит/(Пиксели*Кадры) : 0.008
Размер потока : 30,3 Мбайт (51%)
Размер потока оригинала : 30,3 Мбайт (51%)
Библиотека кодирования : x264 core 125 r2200 999b753
Настройки программы : cabac=1 / ref=3 / deblock=1:0:0 / analyse=0x3:0x113 / me=hex / subme=7 / psy=1 / psy_rd=1.00:0.00 / mixed_ref=1 / me_range=16 / chroma_me=1 / trellis=1 / 8x8dct=1 / cqm=0 / deadzone=21,11 / fast_pskip=1 / chroma_qp_offset=-2 / threads=6 / lookahead_threads=1 / sliced_threads=0 / nr=0 / decimate=1 / interlaced=0 / bluray_compat=0 / constrained_intra=0 / bframes=3 / b_pyramid=2 / b_adapt=1 / b_bias=0 / direct=1 / weightb=1 / open_gop=0 / weightp=2 / keyint=250 / keyint_min=15 / scenecut=40 / intra_refresh=0 / rc_lookahead=40 / rc=2pass / mbtree=1 / bitrate=70 / ratetol=1.0 / qcomp=0.60 / qpmin=0 / qpmax=69 / qpstep=4 / cplxblur=20.0 / qblur=0.5 / ip_ratio=1.40 / aq=1:1.00
Язык : English
mdhd_Duration : 3634130

Аудио
Идентификатор : 2
Формат : AAC
Формат/Информация : Advanced Audio Codec
Профиль формата : LC
Идентификатор кодека : 40
Продолжительность : 1 ч. 0 м.
Вид битрейта : Переменный
Битрейт : 64,0 Кбит/сек
Каналы : 2 канала
Расположение каналов : Front: L R
Частота : 44,1 КГц
Метод сжатия : С потерями
Размер потока : 27,7 Мбайт (46%)
Язык : English

Время раздачи: Ежедневно с 15:00 до 21:00

Попробуй еще пройти курс "HTML Academy | Интенсив по профессиональной верстке сайтов (2014) PCRec"

allob писал(а):

Попробуй еще пройти курс "HTML Academy | Интенсив по профессиональной верстке сайтов (2014) PCRec"

спасибо, уже качаю

просмотрел этот курс, честно говоря вообще не понравился, думаю кроме Специалиста мало что еще будет интересно смотреть, а вот книжечку по разметке и стилям я бы прочел, что то из современного, не знаю просто от какого автора лучше

Ух, судя по отзывам, то лучше старый курс посомтреть.. Вопрос к тем кто посмотрел оба курса: чего нет в старом курсе, что есть в этом? И что вообще не хватаетв нынешнее время в старом курсе и где и чем это лучше восполнить?

Старый курс от Евгения Петрова более подробный и лучше структурирован, то есть всё рассказывается последовательно без перескакивания по темам. Примеры здесь используются те же что в старом курсе. В старом курсе у Петрова даже больше примеров было.

В старом курсе не было про Zen Coding/Emmet и Динамический CSS (на примере LESS) не рассматривался. Про LESS мало что говорится можно сказать обзорно.
Ещё Тарасов немного рассматривает свойства CSS 3 для анимации transition, animation, но кратко.

было бы круто увидеть 3 уровень .

victor om писал(а):

было бы круто увидеть 3 уровень .

Да, согласен, было бы замечательно...

Автору однозначно спасибо за этот материал!

Инкогнито ,а вот интересно ,от куда вы берете эти видео курсы?Это запись вебинара?Помойму это запрещено делать ... Или нет?

Что-то я не нашёл модуль 10((((((((((((

evolution10121987 писал(а):

Что-то я не нашёл модуль 10((((((((((((

Видимо, автор не успел. Либо прочитал его раньше:

razzib писал(а):

Посмотрел 2 курс от Тарасова и поделюсь своим впечатлением:
- препод много извиняется, часто отходит от темы, много воды, так что пришлось смотреть материал на перемотке
- излагаемый материал не соответствует порядку в плане курса (ахтунг и скачки по разным темам разных глав: то там, то сям - в результате каша)
- 60-70% материала пересекается, а то и повторяется из 1 курса от Борисова 2014г (который, кстати более доходчиво некоторые моменты рассказывает)
- не очень советую новичкам уповать на этот курс, по крайней мере от Тарасова, т.к быстрее и лучше некоторые темы освоите самостоятельно по книгам или статьям в инете, а тут исчерпывающей инфы не получите, да еще и гораздо больше времени потратите..

санек1211212212 писал(а):

2 день 3и4 урок кто будет пользоваться этим less кто не знает в notepad++ есть вкладка "синтаксис" в которой для файла "styles.less" поставить синтаксис css и тогда будет подсвечиваться все и будет спокойно работать emmet. странно что препод этого не знает :подмигивание:

victor om писал(а):

было бы круто увидеть 3 уровень .

на разных складчинах уже давно присутствует, а кто же в нашем клубе сделает подарок?

Как минимум 70% курса было рассказано в 1 уровне, а тут просто повторяется. Совсем немного новой информации и много лишних разговоров.

выскажу своё мнение, вдруг кому будет интересно - лучше смотрите уровень 2 от Евгения Петрова от 2011 года. Тарасов не дает практически никакой новой полезной информации, да и как лектор он отвратителен. посмотрел половину курса и понял, что вообще ничего нового практически не узнал, стал смотреть Петрова - небо и земля. а про то, как Тарасов постоянно тупит и не может что нибудь сделать, делает с десятой попытки, я вообще молчу

zergas2009 писал(а):

выскажу своё мнение, вдруг кому будет интересно - лучше смотрите уровень 2 от Евгения Петрова от 2011 года. Тарасов не дает практически никакой новой полезной информации, да и как лектор он отвратителен. посмотрел половину курса и понял, что вообще ничего нового практически не узнал, стал смотреть Петрова - небо и земля. а про то, как Тарасов постоянно тупит и не может что нибудь сделать, делает с десятой попытки, я вообще молчу

+1 полностью с этим соглашусь!

Сам курс, откровенно говоря - полная хрень, по крайней мере с товарищем Тарасовым.
На одной из лекций, когда рассматривали, как все-таки сделать "прижатый футер" на странице, товарищ Тарасов, сказал, что, цитирую: "ЗАБЫЛ".
У меня слов нет. Нельзя же заниматься преподаванием, если сам очень плаваешь...
Очень много времени он уделяет таким просто нереально бесполезным вещам, например, jsscrollpanе, условные комментарии, баги IE lt 8, Faulx Columns.

Начинающим я бы не рекомендовал это смотреть, дабы не засорять себе голову ненужным мусором, как например, вырезание скругленных уголков для старых IE...