Education
Углубленное изучение HTML 5 и CSS 3
Подцель к основной цели Web-Developer на зарплату от 80 000 рублей комментировать лучше там.
План обучения стыбзен с курса http://proglive.ru/courses/html5
- Размечать страницу при помощи новых семантических тегов HTML5: header, footer, aside, nav и других;
- Использовать новые поля ввода для создания автоматически валидируемых форм без JavaScript;
- Создавать восхитительные сайты используя новые возможности CSS3;
- Использовать тени, скругленные углы блоков без использования изображений;
- Создавать текстовые эффекты: вдавленный текст, неоновое свечение, эффект огня;
- Использовать на своих сайтах нестандартные загружаемые шрифты
- Создавать страницы, одинаково хорошо выглядящие на устройствах с разным разрешением экрана при помощи медиазапросов;
- Определять поддерживаются ли возможности HTML5/CSS3 в браузере пользователя с помощью библиотеки Modernizr;
- Создавать быстрые и современные сайты на основе шаблона HTML5 Boilerplate и css-фреймворка Twitter Bootstrap;
- Рисовать на холсте: создавать статическую 2d-графику и анимацию;
- Использовать встроенные возможности браузера для воспроизведения аудио и видео на веб-страницах;
- Определять местоположение пользователя при помощи средств геолокации.
-
Теория HTML5
Ссылки который могут пригодиться:
http://dev.opera.com/articles/new-structural-elements-in-html5/
- Что такое HTML5?
- Краткая история HTML
- Новая идеология HTML5
- Отличия HTML5 от HTML4.01 и XHTML1.x
- Новые теги и атрибуты
- Устаревшие теги
- Новые семантические элементы HTML5
- Основная структура документа
- Обзор новых тегов HTML5, таких как <section>, <article>, <header>, <footer> и <nav> и др.
- Смысл появления новых элементов и примеры использования
- Поддержка новых тегов в устаревших браузерах
- Новые возможности для создания форм
- Новые типы ввода данных: search, email, url, tel, range, number, datetime и др.
- Новые атрибуты полей ввода: autofocus, placeholder, reqired, autocpmlete и др.
- Валидация данных форм на стороне клиента
- Обратная совместимость с устаревшими браузерами
-
Теория CSS 3
Основы верстки
- Боксы — основная экранная единица
- Строчные и блочные боксы
- Поток и расположение элементов
- Позиционирование: абсолютное и относительное
- Схлопывание границ (margin collapsing)
- Выступ за границы родительского элемента
- Верска плавающими (float) блоками
- Очистка float
- Приоритет селекторов CSS (специфичность)
- Анимация CSS
- Введение в CSS3
- Что такое CSS3?
- Что нового в CSS3?
- Преимущества CSS3
- Новые подходы к разработке: прогрессивное усовершенствование и постепенная деградация
- Можем ли мы использовать CSS3 уже сегодня?
Границы
- Cоздание загругленных углов у блоков, тени под боксом, использование изображений в качестве рамки блока
- Текстовые эффекты
- Добавление тени к тексту
- Текстовые эффекты: свечение, вдавленный текст, винтажный текст, эффект огня и др.
- Автоматический перенос длинных слов в блоке
- 5. Работа с цветом
- Форматы цвета
- RGBA, HSLA и прозрачность
- Удобство использования формата HSLA
Градиенты
- Заливка градиентом
- Использование полупрозрачных градиентных заливок для создания эффекта блика
- Генераторы градиентов
- Фон
- Новые методы работы с фоном блока
- Использование нескольких изображений для создания фона
- Шрифты
- Использование подгружаемых шрифтов в браузерах
- Обзор библиотек открытых шрифтов
- Многоколоночность
- Простое создание многоколоночной раскладки текста на странице
- . Интерфейс пользователя
- Новые функции для управления интерфейсом пользователя
- Селекторы, комбинаторы и псевдо-классы
- Новые методы доступа к элементам без использования классов и идентификаторов
2D-преобразования
- Преобразования элементов на плоскости: перемещение, масштабирование, вращение и растягивание
- 3D-преобразования
- Трехмерные преобразования элементов
- Переходы
- Эффекты плавного перехода от одного стиля к другому без использования Flash и JavaScript
- Анимация
- Создание анимации на веб-странице с помощью CSS3
-
Современные инструменты веб-разработчика
Медиа запросы (Media Queries)
- Понимание media queries
- Адаптивный и мобильный дизайн средствами CSS3
- Modernizr
- JavaScript-библиотека для проверки поддержки возможностей HTML5 и CSS3 в браузере
- HTML5 Boilerplate
- Высокопрофессиональный и надежный набор HTML/CSS/JS шаблонов для разработки веб-сайтов и веб-приложений
-
Emmet кодинг
http://habrahabr.ru/post/175747/ - Упроститель кодига
-
Less и Bootstrap
- 1. LESS
- Динамический язык стилевой разметки. Удобный инструмент для построения больших CSS файлов
- 2. Twitter Bootstrap
- Обзор возможностей Twitter Bootstrap
- Twitter Bootstrap как прекрасный пример современного кроссбраузерного CSS-фреймворка
- Быстрое создание современных веб-интерфейсов с помощью Twitter Bootstrap
-
Canvas и Video
Элемент Canvas (Холст)
- Что такое холст?
- Координаты холста
- Рисование изображений в реальном времени
- Методы создания изображений в реальном времени: пути, обводка, заливка, преобразования, кривые, градиенты, тени
- Анимация на холсте
- Поддержка спецификации HTML 5 Canvas браузерами
- 2. Видео и аудио
- Плюсы и минусы в использовании элементов video и audio
- Поддержка видео и аудио форматов браузерами
- Атрибуты элементов video/audio
- Управление воспроизведением
-
Новые возможности HTML5
Новые атрибуты HTML5
- contentEditable, data-*, tabindex, hidden и др.
- 2. Хранение данных
- Web Storage — мощная, хорошо поддерживаемая замена файлам cookie
- 3. Автономные приложения
- Создание веб-приложений работающих без постоянного подключения к интернету
- 4. Геолокация
- Встроенные возможности определения местоположения пользователя
- 5. Сообщения (Web Messaging)
- Обмен сообщениями между окнами
- 6. Фоновые вычисления (Web Workers)
- Создание отдельных потоков для нагруженных вычислений
- 7. Сокеты (Web Sockets)
- Создание прямого соединения между сервером и клиентом для обмена данными в реальном времени
-
Sass & Compass
Don't miss new posts!
Subscribe for the Goal and follow through to its completion
