Ранее в нашем блоге мы поднимали тему создания качественных веб-интерфейсов, в частности в одном из предыдущих топиков рассматривался вопрос правильного использования анимаций. В сегодняшнем материале речь пойдёт о технологии SVG, принципах работы с этой технологией, её плюсах и минусах. Кроме того, мы поинтересовались у отечественных дизайнеров, применяют ли они SVG, и если нет, то почему.

В нашем блоге мы уже писали о том, что не так с онлайн-курсами, и как это можно исправить. Сегодня мы продолжим тему и расскажем о том, как интерактивные онлайн-курсы по HTML и CSS разрабатываются в HTML Academy.

Кто придумывает курсы

Прежде всего стоит поговорить о том, какими профессиональными навыками должен обладать автор курсов (или члены команды их разработки). Ниже представлена наша версия списка таких качеств:

• Нужно хорошо знать вёрстку (HTML и CSS);
• Разбираться в JavaScript для того, чтобы писать проверки к заданиям и «оживлять» их (тут желателен опыт использования различных «песочниц» вроде Codepen);
• Необходимы также навыки дизайна и умение излагать мысли в письменном виде — задания нужно суметь описать так, чтобы ученики поняли, что от них требуется.

Это интересная работа, которая позволяет ИТ-специалистам использовать свои навыки и постоянно совершенствоваться — в процессе разработки курса по какой-либо теме автор изучает её досконально и сам знакомится со всеми подводными камнями и тонкостями.

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

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

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



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

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

Эта статья является попыткой ответа на старый вопрос для собеседований: «Что же случается, когда вы печатаете в адресной строке google.com и нажимаете Enter?» Мы попробуем разобраться в этом максимально подробно, не пропуская ни одной детали.

Примечание: публикация основана на содержании репозитория What happens when...

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

Мы перенесли перевод в репозиторий GitHub и отправили Pull Request автору материала — оставляйте свои правки к тексту, и вместе мы сможем значительно улучшить его.

На Хабре уже было немало материалов о том, как проводить качество вёрстки веб-проектов (вот отличная статья на эту тему) — как правило, речь в таких топиках идёт о коммерческих сайтах. В ходе развития образовательного проекта HTML Academy мы также столкнулись с необходимостью выработки критериев для оценки работ учеников.

Очевидно, что учить нужно так, чтобы потом люди (не все из которых «технари») могли приходить в компании и работать «правильно» — то есть создавая вёрстку, которая красиво выглядит и не требует больших усилий по поддержке. Процесс создания списка универсальных критериев для оценки занял довольно длительное время и был сопряжён с рядом трудностей. Сегодня мы расскажем о том, что же у нас в итоге получилось.

Мы в HTML Academy постоянно работаем над повышением эффективности наших образовательных программ и курсов (ради этого мы ставим опыты на студентах и внедряем геймификацию).

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

Именно поэтому мы решили создать курс, прохождение которого позволяло бы людям не просто получить базовые знания вёрстки, но стать настоящим (пусть и начинающим) ИТ-специалистом. В сегодняшнем материале мы расскажем о том, что в итоге из всего этого получилось.

Раньше термин «компьютерная грамотность» по своей сути означал умение работать с офисным пакетом, но жизнь не стоит на месте, и теперь всё больше экспертов (и даже звезда НБА Крис Бош) заявляют о том, что крайне важным навыком для широкого круга людей становится умение программировать.

При этом программирование — огромная область знаний, только небольшая часть которой может действительно пригодиться обычному человеку (то есть «не-технарю»). Мы считаем, что основу «новой компьютерной грамотности» должно составить знание вёрстки. В сегодняшнем топике мы рассмотрим примеры того, как изучение веб-технологий может помочь представителям не-технических профессий.

В тот момент, когда начиналась разработка HTML Academy, мы достаточно серьёзно играли в WOW, да и, вообще, были поклонниками игр Blizzard со стажем. Поэтому с игровыми механиками были знакомы достаточно хорошо, хотя сами этого не подозревали. Многие интересные механизмы появились в академии, как нам казалось, сами по себе. Но позже выяснилось, что на самом деле они называются «игровыми механиками», а мы их неосознанно взяли из игровой практики.

В статье про формат обучения в HTML Academy говорилось, что, скорее всего, он даёт более высокое качество обучения, чем другие форматы. В этой статье я расскажу о первых попытках проверки этого предположения.

Я работаю ассистентом в НИУ ИТМО, и осенью 2013 судьба преподнесла настоящий подарок: дисциплину «Информатика» и пять групп студентов-первокурсников. Что в этом такого хорошего? Во-первых, часть лабораторных работ (которые я и вёл) были посвящены HTML и CSS. Во-вторых, первокурсники — это ещё исполнительные, сознательные и ответственные студенты. Но самое главное, что мне достались электронщики, лазерщики и оптики и среди них было очень много абсолютных новичков в вёрстке.

Такой шанс упускать было нельзя. И на конец семестра был запланирован эксперимент (или скорее небольшой опыт), который давно хотелось провести. Суть опыта такова:

В онлайн-образовании доминирующим форматом курсов являются курсероподобные: с краткими видео и текстами, презентациями, тестами, форумами и так далее. Этот формат хорошо подходит для большинства дисциплин.

А где-то в сторонке расположился небольшой островок обучающих ресурсов, работающих в другом формате, который можно назвать «интерактивный онлайновый фаблаб» или более формально — массовые интерактивные онлайн-курсы. Большая часть этих ресурсов предназначена для технарей: там обучают программированию, вёрстке, работе с базами данных и так далее.

В этой статье мы расскажем о том формате обучения, который применяется в HTML Academy. И, конечно, о наших особенностях, методиках и приёмах.

HTML Academy — это интерактивные онлайн-курсы по HTML и CSS. Проект существует уже более года, за который мы создали более 15 курсов, большая часть из которых бесплатна. Всё это время работа велась на чистом энтузиазме, однако, сейчас уже нужно выходить на новый уровень, чтобы делать курсы чаще, круче и полезнее. Для этого есть много путей, и один из них — народное финансирование.

Немного об HTML Academy

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