Практикум

[Vlad]

Есть идея сделать автоматизированный практикум для решения задач по HTML и CSS, чтобы можно было отработать навыки. Решения должны проверяться программой и выдаваться ответ, правильно или нет решена задача. Соответственно и задачи предполагаются достаточно простые, с единственным решением. Но у меня возник ряд вопросов, как это всё сделать красиво, чтобы сохранить баланс. Хотелось бы обсудить некоторые вещи.

1. Нужно ли разделять HTML и CSS или набирать их в одном окне?
2. Делать ли полную проверку синтаксиса HTML или ограничиться заданными правилами?
3. Что делать с префиксами в CSS?
4. Как быть со значениями? red, #f00, #ff0000 - формально одинаковые, но что-то может проверку не пройти.

[sigma77]

Просто сверять html/css код, мне кажется плохой вариант. Если делать, то можно взять за пример codeacademy/htmlacademy. Там в мелких задачах проверяется, если не ошибаюсь куски кода, а в финальных на htmlacademy сверяется картинка с эталонной. Возможно есть где-то и движок под это дело, т.к. сейчас много ресурсов используют похожие подходы.

1. Разделять обязательно нужно, это удобнее, нагляднее и уже привычнее.

2. Явные ошибки можно подсвечивать

3. То что может писаться без префиксов - писать без префиксов. Значения проверять через js, т.е. смотреть что присвоилось элементу.

4. Аналогично п. 4.

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

[Get to heaven]

Тут наверное одних рук не хватит. если делать. Я считаю Влад развитие раздела Практикум на сайте самое то. Вот только что случайно увидел  Как бэ само говорит

 

Edited June 4, 2016 by Get to heaven

[Vlad]

  On 6/4/2016 at 5:32 AM, sigma77 said:

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

Expand  

Мне пока не удалось найти такой движок, если он есть, дайте знать.

Речь идёт о довольно простых задачах, которые имеют одно решение и проверять надо именно код. Мне приходила в голову идея сравнивать картинки, но тут есть другие подводные камни, в первую очередь связанные с текстом. Наверняка на htmlacademy (сам не видел) в финальных задачах обошлись вообще без текста.

  On 6/4/2016 at 5:18 PM, Get to heaven said:

Тут наверное одних рук не хватит. если делать. Я считаю Влад развитие раздела Практикум на сайте самое то. Вот только что случайно увидел  Как бэ само говорит

Expand  

Речь о другом идёт.

[Get to heaven]

  On 6/5/2016 at 2:37 AM, Vlad said:

Речь о другом идёт.

Expand  

ну значит я мудак

[Vlad]

Здесь не кабинет психотерапевта, не надо самобичеванием заниматься.

[Get to heaven]

  On 6/6/2016 at 3:26 AM, Vlad said:

Здесь не кабинет психотерапевта, не надо самобичеванием заниматься.

Expand  

здесь не кабинет психотерапевта. не надо шизофренией маяться

[VeniVidiVici]

Если задачи простейшие,... то для чего нужна проверка? В комментариях довольно много ссылок на готовый код к каждому заданию. Ну или в htmlacademy много чего есть.

[wwt]

Проверка CSS - csslint есть под node.js точно

Проверка js - jslint и jshint опять же под node.js

Проверка HTML - tidy (http://php.net/manual/ru/book.tidy.php)

 

вот ещё набор скриптов для проверок, https://github.com/mikeemoo/SiteChecker/tree/master/plugins/Quality

Тоже используются csslint, phpQuery и т.д. Хотя фик знает может они и не рабочие уже.

 

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

[Vlad]

  On 6/6/2016 at 2:38 PM, VeniVidiVici said:

Если задачи простейшие,... то для чего нужна проверка? В комментариях довольно много ссылок на готовый код к каждому заданию. Ну или в htmlacademy много чего есть.

Expand  

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

@wwt, спасибо, посмотрю. Но проверку хочу сделать на JS, чтобы в браузере всё проверялось, а не на стороне сервера.

[nerv]

  On 6/4/2016 at 2:15 AM, Vlad said:

Нужно ли разделять HTML и CSS или набирать их в одном окне?

Expand  

я думаю что нужно.

1) Т.к. данные практически занятие преимущественно ориентированы на новичков, важно в их сознании закрепить то, что не надо инлайнить стили и без необходимости использовать тег <style>

2) Резделение позволит упростить валидацию решения

  On 6/4/2016 at 2:15 AM, Vlad said:

Делать ли полную проверку синтаксиса HTML или ограничиться заданными правилами?

Expand  

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

  On 6/4/2016 at 2:15 AM, Vlad said:

Что делать с префиксами в CSS?

Expand  

префиксы не существенны. Сущестуют такие вещи как autoprefixer и тп.

  On 6/4/2016 at 2:15 AM, Vlad said:

Как быть со значениями? red, #f00, #ff0000 - формально одинаковые, но что-то может проверку не пройти.

Expand  

проверять суть а не реализацию. Например, все эти значения можно сконвертировать в RGB(A). Вместе с тем можно давать рекомендации.