Первая страница

Кроссворд для сайта

инструментарий
Онлайн: РИСОВАЛКИ | ИГРЫ | РЕЛАКС программы

Очень многие люди любят тренировать свой мозг с помощью кроссвордов. И не многие умеют их составлять, хотя хотели бы это делать систематически. На помощь таким людям приходят компьютерные программы. Они могут быть как десктопные, так и онлайновые. Результат работы таких программ по-разному может быть использован: – простая распечатка на принтере или в PDF-файл готовой графической схемы кроссворда с заданиями (отдельно ответы); – интерактивное представление кроссворда на интернет-странице для заполнения и проверки посетителями сайта. В данном обзоре представлено три сценария работы над кроссвордом: 1. десктопная программа, 2. онлайн-сервис, 3. javascript-библиотека. Для каждого сценария по одному примеру.

Eclipse Crossword

https://www.eclipsecrossword.com/

Очень компактная и внятная десктопная программа с помощью которой можно "убивать двух зайцев", т.е., делать кроссворд и для печати, и для сайта. Работа в программе строится по принципу мастера, т.е., по шагам. На скриншоте представлен основной шаг – добавление новых слов с их значениями:

Eclipse Crossword

В поле Word набиваете новое слово, в поле Clue даете его значение и нажимаете кнопку [Add word to list]. На этом шаге ваш лист слов со значениями можно сохранить в отдельный файл с тем, чтобы с ним работать при следующем запуске программы. Рекомендую сохранять лист (жми кнопку [Tools]). Формат этого файла очень простой, т.ч., с этим листом вы сможете работать в текстовом редакторе а потом лист загружать в программу Eclipse Crossword.

Небольшой нюанс на этом шаге. Если вы решите посмотреть значение уже набранного слова и двойным кликом перенесете слово из поля Word List в поле Word, то не забудьте нажать потом кнопку [Add word to list] даже если с вашей стороны не было редактирования, иначе слово из списка пропадет.

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

На последнем шаге выбирается выходной формат кроссворда: или в текстовой статичный файл, например, в RTF, или в графику, например, в EPS, или в интерактивный HTML+JS. Меня, как вебмастера, заинтересовал вариант для сайта, который в терминологии программы зовется Interactive with Javascript и находится на закладке Share online. Результат вы можете потестить ниже:

Как с этим кроссвордом работать: нажмите на любую пустую ячейку – будет выделена цветом строка и значение загаданного слова, наберите слово. В конце заполнения всех ячеек нажмите кнопку проверки кроссворда, чтобы узнать результат.
Скачать портабельную бесплатную версию программы вы можете по ССЫЛКЕ. В папке программы для примера присутствуют файлы Cities_list.ewl и Cities_project.ecw - это файлы с листом слов и с проектом.

Crossword Labs

https://crosswordlabs.com/

Простой онлайновый конструктор интерактивных кроссвордов с возможностью встраивания кроссворда на ваш сайт. Нажимаете на [Make a Crossword], задаете имя кроссворду, и составляете контент по шаблону: слово > пробел > значение слова. На каждую пару слово-значение отводится одна строка. Потом нажимаете кнопку [Save & Finish]. Кроссворд опубликован на сервисе и готов к использованию. По кнопке [Share] есть возможность получить код для вставки на свой сайт. Пример кроссворда "Голова":

Кроссворд также можно экспортировать в PDF. Кроссворду можно задавать пароль.
На сервисе уже составлено много различных кроссвордов и можно воспользоваться поиском по названию и словам. Если вы не хотите, чтобы ваш кроссворд был на всеобщем обозрении и искался по поиску на этом сервисе, то надо зарегистрироваться.

Если говорить об онлайн-генераторах кроссвордов, то обращу внимание еще на сайт http://puzzlecup.com/crossword-ru/. На этом сайте применен альтернативный подход к созданию кроссвордов: сначала рисуется геометрия кроссворда, а потом к нему подбираются подходящие по размеру слова из словаря. Своё слово также можно внедрить. Каждому слову пишется опрелеление. После создания кроссворда он публикуется и для него генерится ссылка, которой можно поделиться со всеми. Отредактировать ваш кроссворд также можно по другой сгенеренной ссылке.

Qurossword

https://github.com/jweisbeck/Crossword

Небольшая частная js-библиотека от пользователя jweisbeck на Github.
Поcмотрите файл script.js в его проекте. В нем вы сможете создать свой кроссворд, заменив многомерный массив puzzleData, один элемент которого посвящен одному слову и имеет такую структуру:

{
	clue: "Information technology (abbr.)",
	answer: "it",
	position: 12,
	orientation: "down",
	startx: 1,
	starty: 8
}

где
clue: значение слова
answer: задуманное слово
position: номер слова
orientation: направление чтения слова
startx: координата X для первой буквы слова
starty: координата Н для первой буквы слова

Конечно, чтобы пользоваться данной заготовкой надо иметь готовую схему кроссворда, чего jweisbeck не предоставляет. Но выкрутиться всегда можно. Я, например, для создания схемы использую Crossword Labs, а для конечного вида кроссворда использую решение Qurossword, т.к., оно мне больше подходит по интерфейсу.


Ещё статьи для вебмастеров, расширяющие технологический кругозор:
Памятка начинающему вебмастеру
Спецсимволы HTML - коды около 2000 дизайнерских иконок
Blumentals WeBuilder - удобнейший редактор кода с предпросмотром
WYSIWYG Web Builder - мощный визуальный конструктор сайтов
RocketCake - лаконичный визуальный конструктор сайтов
Pinegrow - стильный визуальны конструктор сайтов
Lunacy - для макетирования интернет-страниц
Hi Slider - программа для создания продвинутых jQuery слайдеров
WOW Slider - программа для создания красивых HTML5 слайдеров
Moodle - практика администратора СДО
MediaWiki - как использовать для ведения и хранения документации
MediaWiki - как скачивать Wiki-страницы в PDF
MediaWiki - как подсвечивать синтаксис программного кода
PowerPoint в HTML5 - обзор софта конвертации
SVG - как сделать анимацию линии (имитацию рисования)
TimelineJS - библиотека для хронологических лент
TurboSite - лаконичный конструктор многостраничных сайтов
HTTP - коротко о протоколе
OpenAPI - спецификация, визуализация, инструментарий
Camtasia Studio = видеоредактор + видеограббер
Инструменты для создания прототипов интернет-страниц: Axure и ProtoShare
Что нужно знать об электронных платежах вебмастеру интернет-магазина
Индекс цитирования сайта - что это?
Новости
От рекламы не скрыться
Как пройти в библиотеку
Детская библиотека
домой | живопись | графика | компьютерная графика | поделки | юные художники | темы | комментарии | перлы
конкурсы | игры | релакс | рисовалки | учиться рисовать | детские карты Москвы | детские стихи | статьи | видео | поиск | обратная связь