«HTML Academy» – интерактивные онлайн-курсы по изучению вёрстки

Интерфейс сайта HTML Academy
Интерфейс сайта HTML Academy
HTML Academy – это интер­ак­тив­ные онлайн-кур­сы по HTML и CSS, с помо­щью кото­рых любой нови­чок может научить­ся созда­вать веб-интер­фей­сы и рабо­тать с кодом. Мы пого­во­ри­ли с авто­ром про­ек­та Алек­сан­дром Пер­ши­ным.

Е.И.: Рас­ска­жи­те, как появи­лась идея создать такой про­ект?

А.П.: Я пре­по­да­вал в ИТМО – у меня был факуль­та­тив по инфор­ма­ци­он­ным тех­но­ло­ги­ям. Мне ска­за­ли: «Пре­по­да­вай, что хочешь». Я решил, что буду рас­ска­зы­вать на факуль­та­ти­ве про верст­ку. Взял макет, кото­рый был свер­стан когда-то, но был хоро­ший. И вот неко­то­рые ребя­та ока­за­лись хит­ры­ми – они по маке­ту нагуг­ли­ли уже гото­вый сайт и его исполь­зо­ва­ли. Понят­но, что кто-то исполь­зо­вал про­сто как базу, кто-то решил посмот­реть, как оно сде­ла­но, но полу­чи­лось, что сами они ниче­му не научи­лись, пото­му что про­сто попра­ви­ли чужой код.

Как пока­зать гото­вый макет, про­де­мон­стри­ро­вать как он себя ведет, но не откры­вать при этом код? Такая была задум­ка в нача­ле – как пока­зать пове­де­ние сай­та, не пока­зы­вая при этом его код.

Полу­ча­ет­ся так: учил-учил сту­ден­тов, натолк­нул­ся на про­бле­му, при­ду­мал реше­ние, а потом из это­го реше­ния вырос целый про­ект.

Е.И.: А дав­но вы нача­ли зани­мать­ся про­ек­том?

А.П.: В нача­ле 2011 я его при­ду­мал. Тогда я учил­ся в аспи­ран­ту­ре, писал ста­тьи на кон­фе­рен­ции. Уже в кон­це 2011 я нашел тех­но­ло­гии, кото­рые мож­но было исполь­зо­вать, что­бы реа­ли­зо­вать про­ект, и что­бы это не было очень тру­до­ем­ко. Пото­му что еще в нача­ла 2011 было не очень хоро­шо с тех­но­ло­ги­я­ми – не было редак­то­ров кода, не было бра­у­зер­ных движ­ков. Поэто­му я ждал, поти­хонь­ку искал, и вот в кон­це 2011 года нашел их. И уже мож­но было создать пер­вый про­то­тип и начать что-то делать.

С 2012 года, соб­ствен­но, про­ект и начал­ся. Пря­мо с янва­ря.

Е.И.: А какие инстру­мен­ты вы исполь­зо­ва­ли для созда­ния пер­во­го про­то­ти­па?

А.П.: Редак­тор CodeMirror назы­вал­ся, он и сей­час суще­ству­ет. Дви­жок был WebKit, а какая биб­лио­те­ка я сей­час уже не пом­ню. В общем, шту­ка, кото­рая гене­рит из кода кар­тин­ку, нуж­на была.

Е.И.: Вы, полу­ча­ет­ся, зани­ма­лись про­ек­том один?

А.П.: По боль­шей части, да. Т.е. раз­ра­бот­ка, созда­ние кур­сов – я зани­мал­ся этим сам. Мне помо­гал Алек­сей Симо­нен­ко, тех­ни­че­ский дирек­тор Serenity. Я дома что-то делал, в сту­дии что-то делал – Алек­сей мне под­ска­зы­вал и рас­ска­зы­вал, если я чего-то не знал. Еще он смот­рел кур­сы – про­ве­рял кон­тент на адек­ват­ность, что­бы ниче­го не забы­ли и не было ника­ких оши­бок. Т.е. был таким мен­то­ром.

Е.И.: И автор кур­сов – тоже вы?

А.П.: Я, пото­му что было осо­бо неко­му. Была, прав­да, попыт­ка при­влечь к это­му моих сту­ден­тов-долж­ни­ков. Я им ска­зал: «Ребя­та, пиши­те кур­сы, а я вам постав­лю бал­лы». Они кур­сов 10–12 созда­ли, но они полу­чи­лись такие страш­ные и непо­нят­ные, что в ито­ге из них как-то исполь­зо­вать полу­чи­лось толь­ко один, и то я его очень силь­но пере­де­лал.

Е.И.: А у вас не было жела­ния при­влечь в коман­ду раз­ра­бот­чи­ков или людей, кото­рые помог­ли бы с состав­ле­ни­ем кур­сов?

А.П.: Сей­час этим и зани­ма­юсь. День­ги появи­лись, мож­но людей при­вле­кать. Пока про­ект день­ги не зара­ба­ты­вал, смыс­ла не было кого-то при­вле­кать, пото­му что было понят­но, что людям нуж­но пла­тить и пла­тить доста­точ­но хоро­шо. Сей­час уже 2–3 чело­ве­ка есть, с кото­ры­ми я посто­ян­но сотруд­ни­чаю, – они кур­сы дела­ют.

Е.И.: А какое у вас соот­но­ше­ние плат­ных и бес­плат­ных кур­сов?

А.П.: Сей­час 2 плат­ных и 14 бес­плат­ных. У плат­ных кур­сов плат­ность такая, услов­ная, – 100 руб­лей в месяц.

Е.И.: На кого рас­счи­та­ны кур­сы? Кто ваша ауди­то­рия?

А.П.: Школь­ни­ки стар­ших клас­сов, сту­ден­ты тех­ни­че­ских вузов и про­сто те, кому инте­рес­на или нуж­на верст­ка. Когда у нас было 1 500 под­пис­чи­ков, мы про­ве­ли опрос на нашей стра­ни­це Вкон­так­те, и полу­чи­лось, что школь­ни­ков – 10%, сту­ден­тов – 30%, а все осталь­ные – это ни то, ни то. Т.е. 60% – не сту­ден­ты. Я поче­му-то думал, что боль­ше сту­ден­тов будет. Им боль­ше все­го то нуж­но, их застав­ля­ют это учить, вро­де как. А ока­за­лось, что все по-дру­го­му.

Е.И.: Были ли какие-то плат­фор­мы онлайн-обра­зо­ва­ния, на кото­рые вы ори­ен­ти­ро­ва­лись?

А.П.: Да нет, не осо­бо. В кон­це 2011 года появи­лась Codecademy, у них инте­рес­ная меха­ни­ка – они малень­ки­ми шаж­ка­ми все дела­ют. Мне она понра­ви­лась, я частич­но ее при­ме­нил. Но у них была рабо­та с кон­со­лью – ты в кон­со­ли что-то писал. У нас изна­чаль­но интер­фейс был немнож­ко дру­гой. Я делал что-то боль­ше похо­жее на кве­сты в Warcraft – ты что-то дела­ешь, у тебя под­све­чи­ва­ют­ся на экране пунк­ты зада­ний, что ты выпол­нил.

Я осо­бо не смот­рел по сто­ро­нам даже, про­сто делал, что нра­ви­лось. Вот Codecademy, но у них в самом нача­ле дру­гой фор­мат был – толь­ко с кон­со­лью рабо­та. На Coursera был видео­фор­мат, это тоже не наше. Более-менее похо­жи были так назы­ва­е­мые «песоч­ни­цы HTML/CSS», кото­рые тогда ста­ли появ­лять­ся. Напри­мер, JSFiddle – там в онлайне мож­но было писать код, сохра­нять его и смот­реть, что полу­ча­ет­ся. Вот боль­ше я, навер­ное, на эти «песоч­ни­цы» ори­ен­ти­ро­вал­ся, на сам прин­цип – ты пишешь код и он в режи­ме реаль­но­го вре­ме­ни отоб­ра­жа­ет­ся рядом. Но мы к это­му еще доба­ви­ли состав­ля­ю­щую, кото­рая дает зада­ния и про­ве­ря­ет их.

E.И.: А Вы сами когда-нибудь про­хо­ди­ли онлайн-кур­сы?

А.П.: Я в 2003 начал обу­чать­ся, когда таких кур­сов еще не было, Интер­нет-то не у всех был. По книж­кам и по ста­тьям учил­ся.

Е.И.: С каки­ми слож­но­стя­ми Вы столк­ну­лись во вре­мя созда­ния про­ек­та?

А.П.: Вна­ча­ле, конеч­но, были тех­ни­че­ские слож­но­сти – про­сто создать плат­фор­му, кото­рая зара­бо­та­ет и не упа­дет. Если мы дела­ем сер­вис в Интер­не­те – при­дет туда 50 чело­век, и все. Поэто­му были слож­но­сти с тем, как это заста­вить вооб­ще рабо­тать. Вот так это все выгля­де­ло в нача­ле:

Первый вариант интерефейса HTML Academy
Пер­вый вари­ант инте­ре­фей­са HTML Academy

Все это обнов­ля­лось в режи­ме реаль­но­го вре­ме­ни, очень силь­но тор­мо­зи­ло, но зато было инте­рес­но. Потом мы пере­де­ла­ли на суще­ству­ю­щий интер­фейс. С тех пор он и не менял­ся.

Потом еще была про­бле­ма – кур­сы писать. Пото­му что это вещь очень тру­до­ем­кая.

Е.И.: Как вы пла­ни­ру­е­те раз­ви­вать про­ект даль­ше?

А.П.: Вооб­ще, идея гло­баль­ная была, как мета­фо­ра, в том, что мы стро­им кон­вей­ер по под­го­тов­ке вер­сталь­щи­ков. Такой хоро­ший, широ­кий, мощ­ный кон­вей­ер. Потом кон­вей­ер дела­ем шире и гото­вим уже не толь­ко вер­сталь­щи­ков, но и front-end раз­ра­бот­чи­ков, про­грам­ми­стов. В общем, дела­ем кон­вей­ер по под­го­тов­ке тех­на­рей, кото­рый достав­ля­ет нович­ка до спе­ци­а­ли­ста, с каки­ми-то уже нара­бо­тан­ны­ми навы­ка­ми. И не про­сто учим, но и помо­га­ем с тру­до­устрой­ством. Т.е. вот такая гло­баль­ная кон­цеп­ция про­ек­та.

Е.И.: Сей­час вы гото­ви­те вер­сталь­щи­ков с нуля до како­го уров­ня?

А.П.: До уров­ня, когда он уже сме­ло может идти тру­до­устра­и­вать­ся. Я сам мно­го лет вер­сталь­щи­ком рабо­тал и собе­се­до­вал мно­гих. Ино­гда мы вер­сталь­щи­ка иска­ли по пол­го­да. Пото­му что люди при­хо­дят, но базо­вых вещей каких-то не зна­ют и про­бле­мы решать не уме­ют.

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

Сей­час вот после интен­си­ва уро­вень доста­точ­но хоро­ший полу­ча­ет­ся.

Е.И.: Рас­ска­жи­те про интен­сив.

А.П.: Интен­сив – это фор­мат, кото­рый доста­точ­но орга­нич­но вырос из теку­щих кур­сов. Про­сто сей­час, что­бы под­го­то­вить хоро­ше­го спе­ци­а­ли­ста, кур­сов все-таки мало – нуж­но боль­ше кур­сов и боль­ше зада­ний. Это дол­го­сроч­ная пер­спек­ти­ва, мы к ней будем стре­мить­ся, а пока вот запу­сти­ли фор­мат интен­си­ва.

Он отли­ча­ет­ся от кур­сов тем, что име­ет сро­ки нача­ла и кон­ца. Во-вто­рых, там есть тео­рия и есть пре­по­да­ва­тель, кото­рый рас­ска­зы­ва­ет боль­ше, чем есть в малень­ких кусоч­ках тек­ста в кур­сах. В-тре­тьих, все обу­че­ние идет с настав­ни­ком, и это, навер­ное, самая важ­ная состав­ля­ю­щая интен­си­ва. Т.е. на месяц к каж­до­му чело­ве­ку при­креп­ля­ет­ся настав­ник, кото­рый явля­ет­ся опыт­ным вер­сталь­щи­ком. Фор­мат интен­си­ва боль­ше похож на обыч­ный оффлай­но­вый курс, но отли­чие в том, что мы рабо­та­ем пол­но­стью в онлайне.

Гло­баль­ная зада­ча в кон­це интен­си­ва – свер­стать макет хоро­ше­го уров­ня. Маке­ты спе­ци­аль­но зака­зы­ва­ли у дизай­не­ров – они не очень слож­ные, но они не при­ми­тив­ные. Вот к это­му зада­ча интен­си­ва и сво­дит­ся. Выпуск­ни­ком счи­та­ет­ся тот, кто успеш­но все выпол­нил.

Е.И.: Мно­го тех, кто все успеш­но выпол­нил?

А.П.: 36 участ­ни­ков в пер­вом интен­си­ве было, 22 закон­чи­ло.

Е.И.: А в целом по про­ек­ту у вас есть ста­ти­сти­ка – сколь­ко чело­век нача­ли кур­сы, сколь­ко закон­чи­ли?

А.П.: Всю ста­ти­сти­ку на теку­щий момент мож­но посмот­реть на этой стра­нич­ке. Тех, кто начал что-то делать – 12 200, кто хотя бы один курс про­шел – 7 300. Боль­ше 2 000 чело­век выпол­ни­ли 100 зада­ний, это уже доста­точ­но серьез­но. Самые суро­вые, навер­ное, – это те, у кого 20 испы­та­ний. 20 испы­та­ний – это кур­сов 10. Вот таких людей почти 500.

Сей­час, кста­ти, мы гото­вим сов­мест­ный с ИТМО про­ект. Мы запус­ка­ем на их плат­фор­ме свой базо­вый курс. Они свою MOOC-плат­фор­му дела­ют, и один из стар­то­вых кур­сов будет нашим, и ИТМО будет выда­вать сер­ти­фи­ка­ты, про­шед­шим эти кур­сы. Тем, кто про­шел, это в пер­спек­ти­ве будет засчи­ты­вать­ся либо при поступ­ле­нии, либо, если это сту­дент ИТМО, то это может быть засчи­та­но в учеб­ном про­цес­се.

Е.И.: Что вы дума­е­те о буду­щем онлайн-обра­зо­ва­ния?

А.П.: Думаю, что будет все раз­ви­вать­ся, будет боль­ше учить­ся людей. Наде­юсь, что ста­нет все более фор­маль­ным со вре­ме­нем – кур­сы будут в вузах засчи­ты­вать, при­зна­вать онлайн-обра­зо­ва­ние на госу­дар­ствен­ном уровне и дипло­мы выда­вать.

Тут мно­го тон­ко­стей есть, конеч­но. Кто курс про­шел? Кто тест сда­вал? Ты или не ты? Види­мо, будет какая-нибудь гибрид­ная схе­ма, когда ты основ­ную часть обу­че­ния про­хо­дишь онлайн, но в вуз при­ез­жа­ешь сда­вать экза­ме­ны. Т.е. под­твер­ждать, что ты дей­стви­тель­но чему-то научил­ся. Будет чем-то похо­же на заоч­ное обу­че­ние, и я думаю, это будет самым логич­ным, к чему все при­дет. Либо как-то очень хит­ро будут под­твер­ждать в онлайне, напри­мер, собе­се­до­ва­ни­ем по Skype, что­бы не было воз­мож­но­сти как-то отвер­теть­ся и вме­сто себя кого-то под­ста­вить. Вот так.

Интерфейс сайта HTML Academy
Интер­фейс сай­та HTML Academy

Интерфейс сайта HTML Academy
Интер­фейс сай­та HTML Academy