Последнее время спецификации CSS становятся все больше и написание рациональных и поддерживаемых таблиц стилей уже стало немного сложнее, чем раньше. Вот вам обзор лучшей практики, инструментов и подсказок для создания супер чистых, оптимизированных и обслуживаемых CSS-файлов.
Читать далее «Хорошая практика рациональной разработки и обслуживания CSS»
Метка: CSS
Принципы анимации для веба
Примечание переводчика: Представленный ниже материал содержит значительное количество технических терминов, при переводе которых могут возникнуть неточности. Если вы заметили опечатку, ошибку или неточность перевода — напишите нам, и мы оперативно всё исправим.
Кроме того, в продолжение темы сегодняшней публикации на одну неделю будет открыт продвинутый курс академии
Что такое дочерняя тема в WP?
Дочерние темы в WordPress позволяют вносить изменения в существующие темы, причём таким образом, что подобные изменения не потеряются при обновлении исходной (или родительской) темы. Кроме внешнего вида, дочерние темы позволяют изменять разметку, и даже функционал родительской темы, расширяя её под свои собственные нужны.
Поддержка дочерних тем (child themes) в WordPress появились давно, однако, большинство пользователей всё равно предпочитают вносить изменения в код исходной темы напрямую. Здесь рассказано о том, как работают дочерние темы в WordPress, и почему именно с помощью дочерних тем следует вносить любые изменения в существующие темы.
Читать далее «Что такое дочерняя тема в WP?»
Минимум информационных компетенций для ВУЗовских преподавателей-нетехнарей
Примерная программа курса для преподавателей практиков
Цель: Получить минимум информационных компетенций, которые позволят сделать ИКТએ органичным и эффективным инструментом педагогической практики преподавателей ВУза
Курс разбит на несколько самостоятельных блоков по принципу от простого к сложному. основное внимание уделяется формированию практических навыков использоания ИКТએ.
Блок I (базовый). Основы web-технологий
- Что такое и как работает Интернет. Здесь Вы узнаете о том, что такое интернет, что такое протоколы, хост и другие основные термины. Поймёте как происходит взаимодействие между различными точками интернет
- Поисковые ресурсы Интернет. Наиболее популярные поисковые ресурсы, а не только Yandex и Google. «Правильный» поиск в Интернет. Здесь мы попробуем применить расширенный язык запросов для повышения эффективности поиска и валидации выдачи. Вы поймете, что ключевые слова в поисковой строке не единственный вариант вашего запроса поисковым системам
- Сервисы Google и Yandex для Вас. Наиболее популярные в России компании, которые предоставляют массу бесплатных инструментов, способных повысить эффективность использования ИКТ в педагогической практике, узнаете как сделать расписание и «напоминалки», корпоративную почту, организовать мгновенный опрос своих подопечных и многое другое.
- Файло-обменники DropBox, Yandex.диск и другие. Здесь Вы научитесь экономить на флэшках и раздавать свои методички и авторские курсы по всему миру.
- Организация персонального виртуального пространства, например, Evernote (Помнить все). Один из облачных органайзеров, который позволяет не только организовать своё время, но и осмысленно серфить в Интернете, собирать материалы для методических пособий и даже писать их с дальнейшей публикацией
Блок II (базовый). Web в образовании сегодня
- Единое окно доступа к образовательным ресурсам Министерства образования РФ и этим все сказано.
- Открытый образовательный университет ИНТУИТ. Наиболее продвинутый источник образовательного контента и палочка-выручалочка, когда отношение с отдельными студентами не складываются.
- Открытые образовательные системы иностранных университетов. Примеры MOOC и чем они помогают современному преподавателю.
- Организация взаимодействия со студентами. Социальные сети и их роль в образовательном процессе. Сегодня мы можем знать о студентах гораздо больше, чем это было вчера. Теперь индивидуальный подход стал по-истине индивидуальным без особых временных издержек.
Блок III (базовый). Основы верстки. HTML, CSS
- Структура HTML-документа. Простейшие HTML-страницы, разбираемся из каких тегов она состоит и за что эти теги отвечают. Подключаем к странице CSS-стили и JS-скрипты.
- Научимся добавлять на простейшую HTML-страницу текстовое содержание и правильно размечать его: абзацы, заголовки, подзаголовки, списки и многое другое. Научимся использовать ссылки, вставлять на страницу изображения.
- Таблицы доставляют наибольшее количество проблем новичкам. Здесь мы узнаем из каких тэгов состоит таблица и научимся создавать таблицы с любым количеством строк и столбцов. Попрактикуемся аккуратно оформлять таблицы: задавать рамки, отступы внутри ячеек, фон строк, размеры столбцов, выравнивание текста в ячейках (и всё это с помощью CSS, а не древних атрибутов). Помимо этого мы потренируемся в самом сложном: объединении ячеек.
- Вы научитесь создавать простейшие формы, попрактикуетесь использовать текстовые поля, выпадающие списки, поля-галочки, кнопки и другие элементы форм.
- Знакомство с CSS. Рассматриваются базовые понятия CSS: селекторы, каскадность, наследование, приоритеты. Вы познакомитесь с некоторыми CSS-свойствами для оформления текста, создания сетки страницы, позиционирования элементов.
- Селекторы. Научимся пользоваться простыми и продвинутыми селекторами, псевдоклассами, а также комбинировать их.
- Наследование и каскадирование. Наследование, каскадирование, специфичность: что это и как их правильно использовать?
- Оформление текста с помощью CSS. Самые распространенные CSS-свойства для оформления текста: жирность, курсив, размер, цвет и многое другое.
- Блочная модель документа. Как управлять размерами и расположением элементов, задавать отступы и рамки, а также рассмотрим различные типы элементов и их особенности. Это первый и самый важный шаг к созданию страниц со сложной сеткой и сложных декоративных элементов.
- Позиционирование. Вы узнаете о различных режимах позиционирования элементов: относительном, абсолютном, фиксированном. А также попрактикуетесь изменять расположение элементов на странице с помощью CSS-свойств для позиционирования.
- Сетки. Понятие потока документа, тонкости свойства float и блочно-строчных элементов, отрабатываются основные приёмы построения сеток.
- Фоны. Вы научитесь использовать фоновые изображения и задавать цвета фона. Также мы разберемся с популярными в веб форматами изображений и познакомимся с некоторыми приёмами создания декоративных эффектов.
- Знакомство с HTML5. Вы познакомитесь с новыми возможностями HTML5. Вы узнаете, какие новые элементы появились в стандарте и как их правильно использовать, потренируетесь вставлять на страницу аудио и видео, подключать и использовать нестандартные шрифты и векторные изображения.
- Формы и HTML5. Вы научитесь создавать продвинутые формы, используя новые возможности HTML5. Мы познакомимся с новыми типами полей для ввода дат, цветов, чисел и адресов сайтов. Также рассмотрим такие возможности как автофокус, подсказки, средства валидации и многие другие.
- Игра теней. Вы научитесь создавать тени с помощью CSS. Мы по косточкам разберем свойство box-shadow, научимся использовать множественные тени, а также изучим некоторые продвинутые приёмы работы с тенями.
- Селекторы. Часть 2. Рассмотрим много продвинутых селекторов, таких как :nth-last-of-type или :only-child. Также научимся использовать псевдоэлементы, такие как :before и :after.
- Селекторы. Часть 3. Мы рассмотрим продвинутые селекторы, умеющие искать элементы по подстрокам в атрибутах, а также огромное количество селекторов для стилизации элементов форм, таких как :required, :optional или :checked.
- Линейные градиенты. Вы узнаете, что такое линейные градиенты и как их можно использовать для создания интересных декоративных эффектов. Мы разберём синтаксис функции linear-gradient, некоторые интересные приёмы, попрактикуемся создавать сложные орнаменты с помощью градиентов.
- Двумерные трансформации. Будем крутить, наклонять, перемещать, уменьшать и увеличивать объекты, а также взрывать их фаерболами, телепортироваться и использовать телекинез. Ну и, конечно, разберём крутые приёмы использования трансформаций для создания декоративных эффектов.
- Оформление текста с помощью CSS. Часть 2. Вы в прямом смысле «наиграетесь со шрифтами», декоративными текстовыми эффектами и тенями, а ещё узнаете, как повысить читабельность текстов с помощью новых CSS-свойств.
- Анимация. Рассмотрены основы анимации на CSS. Вам предстоит пройти путь развития цивилизации и покорить космический простор. Вы будете двигать, поворачивать и видоизменять объекты, попутно осваивая приёмы работы анимации в CSS.
- Плавные переходы. Вы научитесь плавно менять CSS-свойства, будете создавать красивые и функциональные элементы форм в стиле Material Design и построите мини-викторину об HTML и CSS.
- Таблицы на CSS. Вы взглянете на таблицы с другой стороны: научитесь строить их с помощью CSS, исследуете и опробуете на практике редкие табличные свойства.
- Рамки и фоны, часть 2. Вы научитесь мастерски управляться с рамками и фонами любых форм и размеров, откроете для себя секреты давно знакомых свойств и примените их на практике.
- Что такое CMS. Типичная архитектура ПО, выбор хостинга. Вы узнаете как за бесплатно получить себе самостоятельную площадку для размещения своего ресурса.
- Open Source CMS. Знакомство с WordPress. Вы поймёте, что такое сайт с динамичным контентом и как им управлять. Характеристики и возможности. инструментальные средства для обслуживания своего сайта.
- Установка и настройка. Практические навыки конфигурирования движка для достижения своих педагогических целей.
- Выбор темы и возможности ее модернизации. Вы научитесь индивидуализировать свой сайт на основе бесплатных популярных шаблонов.
- Организация контента. Frontend и Backend. Вы узнаете, что такое таксономия коннтента, познакомитесь со стандартной таксаномией иерархической и горизонтальной классификацией, научитесь создавать свои классификации учебных материалов.
- Административная консоль для управления дневником.
- Обеспечение функциональности с помощью плагинов. Вы научитесь находить и использовать готовые программные компоненты для решения своих практических задач. Установка и настройка плагинов, возможность их модернизации.
- Электронный дневник преподавателя, студентов бакалавриата и магистратуры. Балльно-рейтинговая система. Здесь Вы познакомитесь с современной парадигмой организации учебного процесса с использованием творческого потенциала своих подопечных.
Большая практическая работа: создаём персональную целевую страницу преподавателя. Подробнее о целевых страницах и посмотреть примеры можно в моих статьях «Landing Page или как опознать кормильца?» и «Смотри как надо делать Landing Page».
Блок III (продвинутый). Новые возможности HTML5 и CSS3
Продолжаем большую практическую работу: модернизируем свою персональную целевую страницу в свете новых знаний.
Блок IV (продвинутый). Дневник преподавателя — основной инструмент ИКТ для взаимодействия со студентами. Немного программирования
Основная большую практическая работа. Финал обучение: создание своего персонального электронного дневника и его размещение в интернете. Интеграция дневника с целевой станицей. Немного программирования на PHP.