Vlad Posted June 4, 2016 Report Share Posted June 4, 2016 Есть идея сделать автоматизированный практикум для решения задач по HTML и CSS, чтобы можно было отработать навыки. Решения должны проверяться программой и выдаваться ответ, правильно или нет решена задача. Соответственно и задачи предполагаются достаточно простые, с единственным решением. Но у меня возник ряд вопросов, как это всё сделать красиво, чтобы сохранить баланс. Хотелось бы обсудить некоторые вещи. Нужно ли разделять HTML и CSS или набирать их в одном окне? Делать ли полную проверку синтаксиса HTML или ограничиться заданными правилами? Что делать с префиксами в CSS? Как быть со значениями? red, #f00, #ff0000 - формально одинаковые, но что-то может проверку не пройти. Quote Link to comment Share on other sites More sharing options...
sigma77 Posted June 4, 2016 Report Share Posted June 4, 2016 Просто сверять html/css код, мне кажется плохой вариант. Если делать, то можно взять за пример codeacademy/htmlacademy. Там в мелких задачах проверяется, если не ошибаюсь куски кода, а в финальных на htmlacademy сверяется картинка с эталонной. Возможно есть где-то и движок под это дело, т.к. сейчас много ресурсов используют похожие подходы. 1. Разделять обязательно нужно, это удобнее, нагляднее и уже привычнее. 2. Явные ошибки можно подсвечивать 3. То что может писаться без префиксов - писать без префиксов. Значения проверять через js, т.е. смотреть что присвоилось элементу. 4. Аналогично п. 4. Если движков таких в открытом доступе нет, то автоматизировать всё это дело самостоятельно, мне кажется, слишком трудозатратно - очень уж много решений может быть для одной и той же задачи. Quote Link to comment Share on other sites More sharing options...
Get to heaven Posted June 4, 2016 Report Share Posted June 4, 2016 (edited) Тут наверное одних рук не хватит. если делать. Я считаю Влад развитие раздела Практикум на сайте самое то. Вот только что случайно увидел Как бэ само говорит Edited June 4, 2016 by Get to heaven 1 Quote Link to comment Share on other sites More sharing options...
Vlad Posted June 5, 2016 Author Report Share Posted June 5, 2016 21 час назад, sigma77 сказал: Если движков таких в открытом доступе нет, то автоматизировать всё это дело самостоятельно, мне кажется, слишком трудозатратно - очень уж много решений может быть для одной и той же задачи. Мне пока не удалось найти такой движок, если он есть, дайте знать. Речь идёт о довольно простых задачах, которые имеют одно решение и проверять надо именно код. Мне приходила в голову идея сравнивать картинки, но тут есть другие подводные камни, в первую очередь связанные с текстом. Наверняка на htmlacademy (сам не видел) в финальных задачах обошлись вообще без текста. 9 часов назад, Get to heaven сказал: Тут наверное одних рук не хватит. если делать. Я считаю Влад развитие раздела Практикум на сайте самое то. Вот только что случайно увидел Как бэ само говорит Речь о другом идёт. Quote Link to comment Share on other sites More sharing options...
Get to heaven Posted June 5, 2016 Report Share Posted June 5, 2016 18 часов назад, Vlad сказал: Речь о другом идёт. ну значит я мудак Quote Link to comment Share on other sites More sharing options...
Vlad Posted June 6, 2016 Author Report Share Posted June 6, 2016 Здесь не кабинет психотерапевта, не надо самобичеванием заниматься. Quote Link to comment Share on other sites More sharing options...
Get to heaven Posted June 6, 2016 Report Share Posted June 6, 2016 8 часов назад, Vlad сказал: Здесь не кабинет психотерапевта, не надо самобичеванием заниматься. здесь не кабинет психотерапевта. не надо шизофренией маяться Quote Link to comment Share on other sites More sharing options...
VeniVidiVici Posted June 6, 2016 Report Share Posted June 6, 2016 Если задачи простейшие,... то для чего нужна проверка? В комментариях довольно много ссылок на готовый код к каждому заданию. Ну или в htmlacademy много чего есть. Quote Link to comment Share on other sites More sharing options...
wwt Posted June 6, 2016 Report Share Posted June 6, 2016 Проверка 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 и т.д. Хотя фик знает может они и не рабочие уже. То бишь можно разбирать всё, проводить валидацию, собирать данные в массивы и сравнивать с эталонными массивами. Только придется поломать голову как придумать задания которые имеют наименьшее количество правильных ответов, а то погрязнешь в эталонах. Quote Link to comment Share on other sites More sharing options...
Vlad Posted June 7, 2016 Author Report Share Posted June 7, 2016 12 часа назад, VeniVidiVici сказал: Если задачи простейшие,... то для чего нужна проверка? В комментариях довольно много ссылок на готовый код к каждому заданию. Ну или в htmlacademy много чего есть. Проверка нужна, потому что задачи ориентированы на новичков, а они ещё не знают толком, как правильно писать. К тому же многие забывают какие-то обязательные атрибуты добавлять, а проверка подтолкнёт и научит их писать правильно. @wwt, спасибо, посмотрю. Но проверку хочу сделать на JS, чтобы в браузере всё проверялось, а не на стороне сервера. Quote Link to comment Share on other sites More sharing options...
nerv Posted June 12, 2016 Report Share Posted June 12, 2016 В 6/4/2016 в 05:15, Vlad сказал: Нужно ли разделять HTML и CSS или набирать их в одном окне? я думаю что нужно. 1) Т.к. данные практически занятие преимущественно ориентированы на новичков, важно в их сознании закрепить то, что не надо инлайнить стили и без необходимости использовать тег <style> 2) Резделение позволит упростить валидацию решения В 6/4/2016 в 05:15, Vlad сказал: Делать ли полную проверку синтаксиса HTML или ограничиться заданными правилами? в данно случае, на мой взгляд, было бы правильным заюзать какой-нибуь сторонний сервис валидации. С одной стороны это обеспечит должную правильность, с другой избавит от необходимости писать свой валидатор В 6/4/2016 в 05:15, Vlad сказал: Что делать с префиксами в CSS? префиксы не существенны. Сущестуют такие вещи как autoprefixer и тп. В 6/4/2016 в 05:15, Vlad сказал: Как быть со значениями? red, #f00, #ff0000 - формально одинаковые, но что-то может проверку не пройти. проверять суть а не реализацию. Например, все эти значения можно сконвертировать в RGB(A). Вместе с тем можно давать рекомендации. Quote Link to comment Share on other sites More sharing options...
Recommended Posts
Join the conversation
You can post now and register later. If you have an account, sign in now to post with your account.
Note: Your post will require moderator approval before it will be visible.