Орден За веру в жизнь, команде 31337 Орден Чемпион, команде 31337 Орден За веру в жизнь, команде A.S.P. Орден Чемпион, команде A.S.P. Орден Чемпион, команде A.S.P. Орден Чемпион, команде 31337. Орден Мега мозг, домену vladimir.en.cx. Орден Чемпион, команде N.R.G. Орден III степени, команде A.S.P. Орден III степени, команде RealTeam.
EN в Twitter EN В Контакте EN в Facebook
Предстоящие игры:
(#417) "-1-"
командная игра,
21.11.2025 / 20:00:00
Игра: Схватка
Автор: Gav31337
Участие: 2 200 руб.
Планета Земля // Россия // Владимир // Публикации
RSS 2.0
Домен: http://vladimir.en.cx/ (владелец домена: Gav31337) Показать аватары
Модераторы форума: Gav31337, crux
На страницу: 
1  2  3  4

Создание и оформление заданий

Версия для печати
Автор: Организатор air  
Опубликована: 22 августа 2007 г.
Публикация прочитана: 1 515 633 раза



&nbsp
Основные темы публикации:




ОБЩАЯ ИНФОРМАЦИЯ



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

В играх типа «Мозговой штурм» хорошей традицией стало сообщать игрокам ответ на предыдущий уровень и давать паузу в 30-60 секунд, чтобы это осмыслить. Это реализуется так: В тексте второго уровня вы сообщаете ответ и комментарии на задание первого, а само задание второго уровня приходит в первой подсказке через минуту. В длительных виртуальных играх можно сделать паузу в 5 минут посередине игры, это пойдёт только на пользу игрокам.

При оформлении заданий обязательно указывайте форму и пример ответа, это обезопасит игроков от ввода правильного ответа в другом виде, падеже, склонении и т.д.

     ПРИМЕР:
     

Исключением может быть вопрос, в котором форма ответа и является частью загадки.

[вверх]



ТEKCT



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

Вид текста:

     Пример: Обычный текст

Обычный текст


     Пример: Выделенный текст

<b>Выделенный текст</b>


     Пример: Наклонённый текст

<i>Наклонённый текст</i>


     Пример: Подчёркнутый текст

<u>Подчёркнутый текст</u>


     Пример: Зачёркнутый текст

<s>Зачёркнутый текст</s>


     Пример: Мигающий текст

<blink>Мигающий текст</blink>


     Пример: Выделенный, наклонённый, подчёркнутый текст

<b><i><u>Выделенный, наклонённый, подчёркнутый текст</u></i></b>



Размер шрифта можно указать так:

     Пример: Шрифт немного больше стандартного

<big>Шрифт немного больше стандартного</big>


     Пример: Шрифт немного меньше стандартного

<small>Шрифт немного меньше стандартного</small>


     Пример: Заданный размер шрифта

<font style="font-size: 16px;">Заданный размер шрифта</font>



Цвет шрифта выбирается так:

     Пример: Красный цвет

<font color="red">Красный цвета</font>


     Пример: Золотой цвет

<font color="gold">Золотой цвет</font>


     Можно указывать код цета, список основных цветов тут: http://en.wikipedia.org/wiki/Web_colors

     Пример: Цвет LawnGreen

<font color="#7CFC00">Цвет LawnGreen</font>



Дополнительные функции:

Размещение текста по центру экрана.
<center>
Размещение текста по центру экрана.</center>


     Пример: Горизонтальная черта (параметр size указывает толщину черты)


<hr size=2>




     Пример: Бегущая строка

<marquee direction="left" scrollamount="2" width="200">Бегущая строка</marquee>


     Пример:      Строка1
     Строка2

<marquee direction="up" scrollamount="2" height="15">Строка1<br>Строка2</marquee>



     Подробнее о возможностях тэга MARQUEE смотрите тут: http://www.htmlbook.ru/html/marquee.html



[вверх]


КАРТИНКИ



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

  • Картинки не должны быть очень большими и занимать много места, ведь многие загружают их играя с dial-up модема или КПК. Максимальное разрешение для картинок в тексте задания 800 х 600 точек. Если вам в тексте задания нужно использовать много картинок или несколько больших – то лучше выдать их отдельными ссылками.
  • Имена файлов не должны быть простыми, ведь игроки могут подобрать их по ходу игры. Не забывайте следить за этим. Вот пример плохих имён для файлов с картинками: dom.jpg, znak.gif, shema.png, lev2.jpg, building1.jpg и т.д.


    Загрузка картинок на сайт.

    В текст задания можно вставлять ссылки на уже существующие на других сайтах картинки, а можно закачать свои прямо в игровой движок, и потом использовать их в тексте задания, делается это в меню Управлние Заданиями в Панели Администратора. Аналогочным способом можно закачать на сайт и файлы других форматов (SWF, MP3 и др.)





    Картинка автоматичсеки помещается в папку с игрой вида: http://example.en.cx/data/games/3340/ где 3340 – уникальный номер вашей игры.

    Когда картинка добавлена, её имя появляется в списке «Файлы для игры». Вы можете кликнуть на имени картинки, и она откроется в новом окне. Сохраните прямую ссылку на эту картинку – и потом вставьте её в текст уровня с помощью тега <img>.
    Вот пример прямой сслыки на загруженную картинку: http://example.en.cx/data/games/3340/korona.jpg


    Вставка картинок в текст задания.

         Пример: Ссылка на большую картинку. "Следующий уровень в США. Здесь вы получите дальнешие указания."
    <a href="http://cdn.endata.cx/images/personal/3/ny.jpg" target="_blank">Здесь</a> вы получите дальнешие указания.

         Пример: Просто вставка картинки.
         
    <img src="http://cdn.endata.cx/data/games/3340/korona.jpg" border="0" />

         Пример: Вставка картинки по центру экрана.
    <div align="center"><img src="http://cdn.endata.cx/data/games/3340/korona.jpg" border="0" /></div>

         Пример: Вставка картинки c сылкой на другую картинку (или страницу).
         
    <a href="http://cdn.endata.cx/data/games/3340/magazin.jpg" target="_blank"><img src="http://cdn.endata.cx/data/games/3340/korona.jpg" border="0" /></a>



         Пример: Анимированная GIF картинка (смайлик) вставлена в бегущую строку.     
    <marquee direction="right" scrollamount="2" width="800"><img src="http://kolobok.us/smiles/personal/pooh_go.gif" border="0" /></marquee>




    [вверх]


    МЕДИАФАЙЛЫ



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

    Встраивание звуковых файлов:

    Встроить midi-файл в текст задания можно следующим кодом:
    <embed src="http://cdn.endata.cx/data/games/2597/melodiy.mid" type="audio/x-midi" hidden="true" autostart="true" loop="true"></embed>

    Новый и более удобный способ вставки медиафайлов - тэг Audio
    Встроить mp3 и WMA файлы в текст задания можно так:
    <audio src="http://cdn.endata.cx/data/events/ensound2007/en.sound2007.1.mp3"></audio>


    или так (если ваш браузер не имеет plug-in для проигрывания mp3):

    <OBJECT id="MediaPlayer" WIDTH=320 HEIGHT=42 classid="CLSID:22D6F312-B0F6-11D0-94AB-0080C74C7E95" standby="Loading..." type="application/x-oleobject"><PARAM name="FileName" value="http://cdn.endata.cx/data/events/ensound2007/en.sound2007.1.mp3"><PARAM name="AutoStart" value="0">
    <EMBED type="application/x-mplayer2" src="http://cdn.endata.cx/data/events/ensound2007/en.sound2007.1.mp3" name="MediaPlayer" autostart="0" WIDTH=320 HEIGHT=42></EMBED></OBJECT>


    Вместо "http://en.cx/data/events/ensound2007/en.sound2007.1.mp3", подставляете имя своего файла (латиницей).
    Если необходимо автоматически запускать звуковой файл, параметр autostart="0", замените на autostart="1" или autostart="true"

    Пример:




    Встраивание видео файлов:

    Встроить в текст задания видео-сюжет из www.rutube.ru можно при помощи кода, который можно увидеть
    в самом файле на www.rutube.ru.
    Пример:



    <embed src="http://video.rutube.ru/9aa027b20b344cb140386b867554cd84" type="application/x-shockwave-flash" wmode="window" width="400" height="353" allowfullscreen="true" flashvars="uid=806578"/>



    Встраивание Flash-анимации (SWF файлов):

    Пример: Карта района г.Минска сделана на Flash. Вы можете закачать на сайт свой SWF файл и поменять сслыку в коде на него.

    <object classid="clsid:d27cdb6e-ae6d-11cf-96b8-444553540000" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=7,0,0,0" width="600" height="480" id="map3" align="middle"><param name="movie" value="http://cdn.endata.cx/images/personal/3/map3.swf"/><param name="quality" value="high" />
    <embed src="http://cdn.endata.cx/images/personal/3/map3.swf" quality="high" width="600" height="480" name="map3" align="middle" allowscriptaccess="sameDomain" type="application/x-shockwave-flash" pluginspage="http://www.macromedia.com/go/getflashplayer" /></object>


    Подробнее о возможностях тэга EMBED смотрите тут: http://www.htmlbook.ru/html/embed.html


    [вверх]


<<< Свернуть публикацию
Майор
Мальчик
(
N21
)
Аттестат
[ 08.02.2008 22:32:37 (UTC +3), nn.en.cx ]  

Может не отрою Америку, но всё же расскажу как мы оформляем игры

<span class="h14 gold up bold">описание игры</span>
<span class="h12 white">текст описания игры</span>

т.е. я постоянно использую конструкцию с тэгом <span>, в классе которого легко менять разные параметры шрифта

например:

параметр
h8 , h10, h12 , h14, h16, h18, h20, h24 - задаёт размер букв

white, cream, gold, green, red - задаёт нужный цвет шрифта

bold, italic - задаёт стиль шрифта

up - делает все буквы заглавными

там еще много таких параметров, надо в CSSе смотреть их все, но это основные.
таким образом, запомнив эту нехитрую конструкцию - вы всегда сможете красиво оформить вашу игру



-------------------------------------------------------

Круто, раньше приходилось лазить по справочным сайтам, чтобы теги вспомнить, или с других страниц воровать (исходный код), а сейчас можно пользоваться статьей как справочником.. :) Спасибо!
Лейтенант
(
)
Аттестат
[ 08.02.2008 22:34:26 (UTC +3), miami.en.cx ]  
большое пасибо за инфу.... пойду зубрить....
Подполковник
Мальчик
(
)
Аттестат
[ 09.02.2008 0:21:44 (UTC +3), game.en.cx ]  
Спасибо air.
Капитан
Мальчик
 korn
(
)
Орден II степени
Аттестат
[ 09.02.2008 0:25:17 (UTC +3), vitebsk_old.en.cx ]  
http://www.spravkaweb.ru/main - курите. там всё просто. даже новичок разберётся
Майор
Мальчик
Орден II степени
Аттестат
[ 09.02.2008 1:47:33 (UTC +3), pnz.en.cx ]  
Зачёт!:)

air, еще про флешки забыл упомянуть... народ тоже частенько путаецо.
Старший лейтенант
Мальчик
(
)
Золотой Орден I степени
Аттестат
[ 09.02.2008 13:06:36 (UTC +3), kogalym.en.cx ]  
МЕГА РЕСПЕКТ!!! Отличная публикация!!!
Капитан
Мальчик
Аттестат
[ 09.02.2008 13:31:34 (UTC +3), kirov.en.cx ]  
+ 500!!!!!!
Такую инфу хоть рядом с "главная" "EN-игры" размещай, например как "Руководство авторам"
Сержант
(
)
[ 09.02.2008 19:36:52 (UTC +3), tbilisi.en.cx ]  
BIg 10x !!!! o4en vajnaya infa !!!! kak raz nedavno vstal vopros kak vnedryat" video i audio roliki v zadanie!!!
eta statya ochen pomogla lichno mne !!!!! VIROJAIU OGROMNUIU BLAGODARNOST ZA PREDOSTAVLENIY MATERIAL !!!))))
Сержант
(
)
[ 09.02.2008 19:38:56 (UTC +3), tbilisi.en.cx ]  
BILO BI INTERESNO UZNAT KAK MOJNO ZALIT V ZADANIE NEBOLSHUIU GRAFICHESKUIU PROGRAMMU PO TIPU FLASH IGRI ? KTO NIBUD PODSKAJET TAKOE REALNO ?
Подполковник
Мальчик
(
 Золотой Орден I степени
)
Аттестат
[ 09.02.2008 20:41:33 (UTC +3), cx.en.cx ]  
D-GREY, не совсем понятно о чем ты..
есть еще ява-апплеты, можно их вставлять прямо в страницу, но с внедрением флаша они практически исчезли из употребления, так что уточни, о какой "графической программе" ты говоришь.

От себя скажу:
Встраивание мп3 в страницу посредством embed - дурной тон. На ноутбуке у нас в машине, например, звук по дефолту отключен, чтобы лишний раз батарею не тратить.
Если видишь в задании ссылку на мп3, то скачиваешь его и запускаешь, предварительно включив звук. А о звучащем где-то на фоне можно вообще не узнать, если в тексте задания не указано. К тому же это не будет работать на Opera mini и wap-версии сайта.

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

Самый идеальный вариант, когда нужно добавить звук - ссылка на mp3/wav файл. А из этого руководства я бы данные пункты про embed убрал, ибо некие неумные авторы вполне могут до конца не догнать, о чем речь, и "встроят" десятиметровую песню в страницу... нафиг нам, игрокам, это нужно?
Капитан
Девочка
(
)
Аттестат
[ 09.02.2008 23:44:20 (UTC +3), spb.en.cx ]  
спасиб!!!!!!!!!
Лейтенант
Мальчик
[ 10.02.2008 13:59:06 (UTC +3), nn.en.cx ]  
Мне не нравится что руководство по оформлению заданий оформлено с таким существенным недостатком, что текст занимает по ширине более 1280 px.
у меня страница никак не умещается целиком по ширине.
Лейтенант
Мальчик
[ 10.02.2008 14:00:30 (UTC +3), nn.en.cx ]  
А про встраивание звука - тоже плохо. У меня при каждом обновлении ЭТОЙ страницы он играется заново. Это значит, что я буду вынужден слушать его каждый раз, вбивая код. А если рядом несколько ноутов? :)
Лейтенант
Мальчик
[ 10.02.2008 14:08:56 (UTC +3), nn.en.cx ]  
Зачем нужны все эти мигающие и бегущие строки? ИМХО этому не место в подобном руководстве. Плюс несколько спорных утверждений (например про 5 мин паузу между заданиями МШ) может дезынформировать начинающих авторов.

Вместо руководства по цветам и проч лучше б сразу к стилям приучили (class="white" и др).
Майор
Мальчик
(
N21
)
Аттестат
[ 10.02.2008 15:51:49 (UTC +3), nn.en.cx ]  
Лаплас сцука умный.. :) Но дело говорит...
Хотя, Жень, сделал бы сам хотяб одну виртуалку, и не надо отмазываться что времени нет. Или "чукча не читатель, чукча писатель"?

Жень, а все эти цвета и прочие навроты нужны только для оформления анонса игр... Никто в игре ими пользоваться не собирается.....
Ван Страатен: Жень, а все эти цвета и прочие навроты нужны только для оформления анонса игр... Никто в игре ими пользоваться не собирается.....


да??? вы в этом так уверены??? вынуждена вас разочеровать! В тексте задания цвета тоже некоторые используют!

А на счет публикации - спасибо огромное!!!
Рядовой
 im
Аттестат
[ 10.02.2008 20:40:05 (UTC +3), en.cx ]  
по поводу медиа-плеера. там стоит параметр autostart=FALSE но у меня почему-то при загрузке страницы сразу проигрывается звук.
Капитан
Мальчик
(
)
Орден II степени
Аттестат
[ 10.02.2008 22:57:17 (UTC +3), surgut.en.cx ]  
im: по поводу медиа-плеера. там стоит параметр autostart=FALSE но у меня почему-то при загрузке страницы сразу проигрывается звук.

Это вообще жесть среди ночи говорит этот дядя Игра изменившая наш город при хорошенькой громкости! И будит всех кто уже спал!
Младший сержант
(
)
[ 11.02.2008 1:41:06 (UTC +3), omsk.en.cx ]  
Круто;-) Ничего нового не написано, но я раньше такие вещи в блокнотике песал, а теперь можно просто скопировать себе и юзать по мере надобности. Ссылка по любому в избранное
P.S. очень хорошо, что большинство используемых тэгофф теперь собрано в кучу
Майор
Мальчик
(
 Орден III степениОрден III степени
)
Аттестат
[ 11.02.2008 9:30:41 (UTC +3), pnz.en.cx ]  
Огромная просьба написать как отключить автостарт в медиа файле. Чтоб он начинал играть только после нажатия кнопки Play.
На страницу: 
1  2  3  4
25.04.2024 16:02:43
(UTC +3)

www.en.cx
EncounterTM Ltd.
2004-2024 ©