Хорошая практика рациональной разработки и обслуживания CSS

Последнее время спецификации CSS становятся все больше и написание рациональных и поддерживаемых таблиц стилей уже стало немного сложнее, чем раньше. Вот вам обзор лучшей практики, инструментов и подсказок для создания супер чистых, оптимизированных и обслуживаемых CSS-файлов.
Читать далее «Хорошая практика рациональной разработки и обслуживания CSS»

Принципы анимации для веба

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

Кроме того, в продолжение темы сегодняшней публикации на одну неделю будет открыт продвинутый курс академии по CSS-анимациям, который обычно доступен по подписке. Его описание размещено в конце топика. Читать далее «Принципы анимации для веба»

Что такое дочерняя тема в WP?

Дочерние темы в WordPress позволяют вносить изменения в существующие темы, причём таким образом, что подобные изменения не потеряются при обновлении исходной (или родительской) темы. Кроме внешнего вида, дочерние темы позволяют изменять разметку, и даже функционал родительской темы, расширяя её под свои собственные нужны.

Поддержка дочерних тем (child themes) в WordPress появились давно, однако, большинство пользователей всё равно предпочитают вносить изменения в код исходной темы напрямую. Здесь рассказано о том, как работают дочерние темы в WordPress, и почему именно с помощью дочерних тем следует вносить любые изменения в существующие темы.
Читать далее «Что такое дочерняя тема в WP?»

Минимум информационных компетенций для ВУЗовских преподавателей-нетехнарей

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

Цель: Получить минимум информационных компетенций, которые позволят сделать ИКТ органичным и эффективным инструментом педагогической практики преподавателей ВУза

Курс разбит на несколько самостоятельных блоков по принципу от простого к сложному. основное внимание уделяется формированию практических навыков использоания ИКТ.

Блок I (базовый). Основы web-технологий

  1. Что такое и как работает Интернет. Здесь Вы узнаете о том, что такое интернет, что такое протоколы, хост и другие основные термины. Поймёте как происходит взаимодействие между различными точками интернет
  2. Поисковые ресурсы Интернет. Наиболее популярные поисковые ресурсы, а не только Yandex и Google. «Правильный» поиск в Интернет. Здесь мы попробуем применить расширенный язык запросов для повышения эффективности поиска и валидации выдачи. Вы поймете, что ключевые слова в поисковой строке не единственный вариант вашего запроса поисковым системам
  3. Сервисы Google и Yandex для Вас. Наиболее популярные в России компании, которые предоставляют массу бесплатных инструментов, способных повысить эффективность использования ИКТ в педагогической практике, узнаете как сделать расписание и «напоминалки», корпоративную почту, организовать мгновенный опрос своих подопечных и многое другое.
  4. Файло-обменники DropBox, Yandex.диск и другие. Здесь Вы научитесь экономить на флэшках и раздавать свои методички и авторские курсы по всему миру.
  5. Организация персонального виртуального пространства, например, Evernote (Помнить все). Один из облачных органайзеров, который позволяет не только организовать своё время, но и осмысленно серфить в Интернете, собирать материалы для методических пособий и даже писать их с дальнейшей публикацией

Блок II (базовый). Web в образовании сегодня

  1. Единое окно доступа к образовательным ресурсам Министерства образования РФ и этим все сказано.
  2. Открытый образовательный университет ИНТУИТ. Наиболее продвинутый источник образовательного контента и палочка-выручалочка, когда отношение с отдельными студентами не складываются.
  3. Открытые образовательные системы иностранных университетов. Примеры MOOC и чем они помогают современному преподавателю.
  4. Организация взаимодействия со студентами. Социальные сети и их роль в образовательном процессе. Сегодня мы можем знать о студентах гораздо больше, чем это было вчера. Теперь индивидуальный подход стал по-истине индивидуальным без особых временных издержек.

Блок III (базовый). Основы верстки. HTML, CSS

  1. Структура HTML-документа. Простейшие HTML-страницы, разбираемся из каких тегов она состоит и за что эти теги отвечают. Подключаем к странице CSS-стили и JS-скрипты.
  2. Научимся добавлять на простейшую HTML-страницу текстовое содержание и правильно размечать его: абзацы, заголовки, подзаголовки, списки и многое другое. Научимся использовать ссылки, вставлять на страницу изображения.
  3. Таблицы доставляют наибольшее количество проблем новичкам. Здесь мы узнаем из каких тэгов состоит таблица и научимся создавать таблицы с любым количеством строк и столбцов. Попрактикуемся аккуратно оформлять таблицы: задавать рамки, отступы внутри ячеек, фон строк, размеры столбцов, выравнивание текста в ячейках (и всё это с помощью CSS, а не древних атрибутов). Помимо этого мы потренируемся в самом сложном: объединении ячеек.
  4. Вы научитесь создавать простейшие формы, попрактикуетесь использовать текстовые поля, выпадающие списки, поля-галочки, кнопки и другие элементы форм.
  5. Знакомство с CSS. Рассматриваются базовые понятия CSS: селекторы, каскадность, наследование, приоритеты. Вы познакомитесь с некоторыми CSS-свойствами для оформления текста, создания сетки страницы, позиционирования элементов.
  6. Селекторы. Научимся пользоваться простыми и продвинутыми селекторами, псевдоклассами, а также комбинировать их.
  7. Наследование и каскадирование. Наследование, каскадирование, специфичность: что это и как их правильно использовать?
  8. Оформление текста с помощью CSS. Самые распространенные CSS-свойства для оформления текста: жирность, курсив, размер, цвет и многое другое.
  9. Блочная модель документа. Как управлять размерами и расположением элементов, задавать отступы и рамки, а также рассмотрим различные типы элементов и их особенности. Это первый и самый важный шаг к созданию страниц со сложной сеткой и сложных декоративных элементов.
  10. Позиционирование. Вы узнаете о различных режимах позиционирования элементов: относительном, абсолютном, фиксированном. А также попрактикуетесь изменять расположение элементов на странице с помощью CSS-свойств для позиционирования.
  11. Сетки. Понятие потока документа, тонкости свойства float и блочно-строчных элементов, отрабатываются основные приёмы построения сеток.
  12. Фоны. Вы научитесь использовать фоновые изображения и задавать цвета фона. Также мы разберемся с популярными в веб форматами изображений и познакомимся с некоторыми приёмами создания декоративных эффектов.
    1. Большая практическая работа: создаём персональную целевую страницу преподавателя. Подробнее о целевых страницах и посмотреть примеры можно в моих статьях «Landing Page или как опознать кормильца?» и «Смотри как надо делать Landing Page».

      Блок III (продвинутый). Новые возможности HTML5 и CSS3

      1. Знакомство с HTML5. Вы познакомитесь с новыми возможностями HTML5. Вы узнаете, какие новые элементы появились в стандарте и как их правильно использовать, потренируетесь вставлять на страницу аудио и видео, подключать и использовать нестандартные шрифты и векторные изображения.
      2. Формы и HTML5. Вы научитесь создавать продвинутые формы, используя новые возможности HTML5. Мы познакомимся с новыми типами полей для ввода дат, цветов, чисел и адресов сайтов. Также рассмотрим такие возможности как автофокус, подсказки, средства валидации и многие другие.
      3. Игра теней. Вы научитесь создавать тени с помощью CSS. Мы по косточкам разберем свойство box-shadow, научимся использовать множественные тени, а также изучим некоторые продвинутые приёмы работы с тенями.
      4. Селекторы. Часть 2. Рассмотрим много продвинутых селекторов, таких как :nth-last-of-type или :only-child. Также научимся использовать псевдоэлементы, такие как :before и :after.
      5. Селекторы. Часть 3. Мы рассмотрим продвинутые селекторы, умеющие искать элементы по подстрокам в атрибутах, а также огромное количество селекторов для стилизации элементов форм, таких как :required, :optional или :checked.
      6. Линейные градиенты. Вы узнаете, что такое линейные градиенты и как их можно использовать для создания интересных декоративных эффектов. Мы разберём синтаксис функции linear-gradient, некоторые интересные приёмы, попрактикуемся создавать сложные орнаменты с помощью градиентов.
      7. Двумерные трансформации. Будем крутить, наклонять, перемещать, уменьшать и увеличивать объекты, а также взрывать их фаерболами, телепортироваться и использовать телекинез. Ну и, конечно, разберём крутые приёмы использования трансформаций для создания декоративных эффектов.
      8. Оформление текста с помощью CSS. Часть 2. Вы в прямом смысле «наиграетесь со шрифтами», декоративными текстовыми эффектами и тенями, а ещё узнаете, как повысить читабельность текстов с помощью новых CSS-свойств.
      9. Анимация. Рассмотрены основы анимации на CSS. Вам предстоит пройти путь развития цивилизации и покорить космический простор. Вы будете двигать, поворачивать и видоизменять объекты, попутно осваивая приёмы работы анимации в CSS.
      10. Плавные переходы. Вы научитесь плавно менять CSS-свойства, будете создавать красивые и функциональные элементы форм в стиле Material Design и построите мини-викторину об HTML и CSS.
      11. Таблицы на CSS. Вы взглянете на таблицы с другой стороны: научитесь строить их с помощью CSS, исследуете и опробуете на практике редкие табличные свойства.
      12. Рамки и фоны, часть 2. Вы научитесь мастерски управляться с рамками и фонами любых форм и размеров, откроете для себя секреты давно знакомых свойств и примените их на практике.

      Продолжаем большую практическую работу: модернизируем свою персональную целевую страницу в свете новых знаний.

      Блок IV (продвинутый). Дневник преподавателя — основной инструмент ИКТ для взаимодействия со студентами. Немного программирования

      1. Что такое CMS. Типичная архитектура ПО, выбор хостинга. Вы узнаете как за бесплатно получить себе самостоятельную площадку для размещения своего ресурса.
      2. Open Source CMS. Знакомство с WordPress. Вы поймёте, что такое сайт с динамичным контентом и как им управлять. Характеристики и возможности. инструментальные средства для обслуживания своего сайта.
      3. Установка и настройка. Практические навыки конфигурирования движка для достижения своих педагогических целей.
      4. Выбор темы и возможности ее модернизации. Вы научитесь индивидуализировать свой сайт на основе бесплатных популярных шаблонов.
      5. Организация контента. Frontend и Backend. Вы узнаете, что такое таксономия коннтента, познакомитесь со стандартной таксаномией иерархической и горизонтальной классификацией, научитесь создавать свои классификации учебных материалов.
      6. Административная консоль для управления дневником.
      7. Обеспечение функциональности с помощью плагинов. Вы научитесь находить и использовать готовые программные компоненты для решения своих практических задач. Установка и настройка плагинов, возможность их модернизации.
      8. Электронный дневник преподавателя, студентов бакалавриата и магистратуры. Балльно-рейтинговая система. Здесь Вы познакомитесь с современной парадигмой организации учебного процесса с использованием творческого потенциала своих подопечных.

      Основная большую практическая работа. Финал обучение: создание своего персонального электронного дневника и его размещение в интернете. Интеграция дневника с целевой станицей. Немного программирования на PHP.