Фев
15th

Между-школьная олимпиада, страна Катар, город-столица Доха

16.02.2014 Таки была проведена олимпиада между школами столицы страны Катар — городом Доха(персидский залив). В Катаре мальчики учатся в школе для мальчиков, а девочки — в школе для девочек.

katar

Олимпиада проводилась в системе, которую я написал совместно с египтянином Тарек из Каира. Моя задача была сделать серверную часть приложения (на PHP+mySQL), а Тарек делал клиентскую часть приложения на Flash.
Вот панель входа в систему для школьников:
login_page

Как вы успели заметить, язык — арабский. Но для кодировки UTF-8 это не проблема, он в ней присутствует вместе со всеми другими языками. А вот в кодировке windows-1251 его, естественно, нет.

Я даже выучил арабскую буквы А,С (как русские) и Б — это рога быка

Главная проблема была — написание с права налево. Это просто беда. Если выставить направление текста с права налево, то точка поставленная после предложения оказывается перед последним словом. Поэтому клиентскую часть вначале я писал. С ошибками. А потом её писал египтянин Тарек, который на арабском не только пишет но и думает.

Зато я писал админку этой олимпиады (на Английском). Она запускает тест и получает результаты его от клиентской программы, записывает их в базу данных. Особенностью олимпиады является то, что уровней — 5, каждый уровень каждый ученик может запустить только один раз. Для этого для каждого запуска теста ученик получает уникальную пару логин-пароль. Которая может быть использована единожды. К началу олимпиады ведущий генерирует сотни случайных паролей нажатием одной кнопки, которая ко всем введённым в базу данных логинам добавляет пароли на все 5 уровней:

После проведения теста ведущий просматривает результаты из админ-панели.
В ней есть настройки «какие тесты показывать»: завершённые/не завершённые, удалённые/не удалённые, за какой период:

admin_settings

По этим настройкам формируется отчёт.

При формировании отчёта формируется .pdf — файл — копия(средствами php). Которую можно скачать нажав на соответствующую кнопку.Вот он.

А это такой же отчёт на экране в броузере:

admin_pan

Немножко географии

Если верить гуглу, то город Доха находится на берегу моря:
qatar(чёрненькое — жилые районы, синенькое — море).
А дачное строительство в Катаре не развито — поэтому за городом пустыня, со спутника похожая на лунную поверхность:
after_city Власть дачи не раздаёт осознанно, чтобы катарцы не добывали на даче газ, нефть и соль.

Фев
15th

HTML в «контенте» страницы

Термины:

«Контент»(content) переводится как «содержимое». Контент страницы вы вводите в админке на странице «Админ меню->Страницы->Добавить новую» в текстовое поле по центру экрана.
statia-html

«тэг»(tag) переводится как «ветка». HTML документ это ствол дерева. На стволе есть ветки, у которых есть ветки, у которых есть ветки. Вложенность веток не ограничена

«атрибут»(attribute) в HTML означает свойство тэга. имя атрибута(свойства) и его значение пишут как в арифметике, через равно: width = "100" что означает ширина = 100.

атрибут "class", "id" — это свойство тега, определяющее его внешний вид. Если наш тег имеет атрибут class="my_class", то его вид будет такой, каким мы его определим в .CSS-файле

HTML просто и доходчиво

Если выбрана вкладка «текст» то в содержимое страницы можно вставлять HTML-код. Зачем он нужен? HTML (от англ. HyperText Markup Language — «язык гипертекстовой разметки»;) позволяет разметить(сверстать, правильно расположить) элементы вашего содержания: текст и картинки. Для этого в текст вручную вставляются невидимые для посетителя сайта символы(которые называются «тэг»). Если вы работали в программе «Word», то знаете что там тоже есть невидимые символы, например: переноса строки и разрыва страницы(эти символы разные у HTML и Word). Разберём наиболее полезные тэги языка HTML.

Тэг <BR> — означает "перенос строки" (в Word вставляется по нажатию «Enter» или «Ввод». Но в отличие от HTML, Word после такого переноса создаёт новый параграф.). Как вы заметили, BR заключено в треугольные скобки, которые делают его невидимым. BR — сокращение от Break — разрыв.

Тэг <p>текст параграфа</p> — означает "Параграф" — отдельный по смыслу участок текста. Отделяется от остального текста путём добавления снизу пустой строки(как правило). Естественно(из школьного курса) этот и следующий участок текста начинается с новой строки. Обратите внимание: есть открывающий <p> и закрывающий невидимый тег </p>, а между ними — видимый текст параграфа. Как параграф сделать в Word — только что рассматривали.

Тэг <div>текст блока</div> — означает "блок" — отдельный прямоугольник на странице. В Word можно добиться того же эффекта если создать таблицу из одной ячейки и поместить в неё текст или картинку. По умолчанию, его ширина — на всю страницу, высота -по высоте текста.
Сегодня с помощью этого элемента производится 90% вёрстки страницы. Поэтому, если вы увидите тэг div знайте, что с его помощью можно:

  • Создать прямоугольную область любого размера
  • Разместить её в любом месте на экране
  • Задать ей тень, рамку любого цвета
  • Расположить в ней текст, изображение
  • Задать фон одноцветный или с градиентом

Тэг < *** >текст блока</ *** > — вместо *** может быть любое слово(без пробелов в нём) — означает "блок" — это тоже блок.

Тэг <img src="http://example.com/img.jpg" alt="Здесь должна быть моя картинка " title="Это моя картинка" width="200" height="100" > — означает "показать картинку, расположенную по ссылке http://example.com/img.jpg, шириной 200 точек высотой 100 точек, при наведении на неё курсора мыши подписать: "Это моя картинка" а если её нет по адресу http://example.com/img.jpg, то вместо неё написать "Здесь должна быть моя картинка &quot ". Заметим, что если атрибуты width и height не указаны, то картинка будет показана в натуральную величину

Тэг <a ΗREF= "http://example.com/page.html" title="По нажатию перейти на страницу page">Видимый текст</a> — означает что слова «Видимый текст» теперь ссылка, по нажатию на неё вы отправитесь на страницу "http://example.com/page.html". При наведении курсора мыши на ссылку подписать: "По нажатию перейти на страницу page"
Стоит заметить, что вместо "Видимый текст " может быть картинка, блок или даже всё содержание страницы вместе с блоками, картинками, параграфами

Высший пилотаж

выравнивание текста по центру производится тегами <center>Текст по центру</center>. Получаем:

Текст по центру.

Заголовки — это такой параграф. только вместо «p» у него буква "H1", "H2", "H3". <H1>Текст заголовка 1</H1> — это самый главный, самый толстый заголовок, он на странице должен быть один.

<H2>Текст заголовка 1</H2> -чем больше цифра тем меньше заголовок. Как правило, заголовка меньше 4..5 — не бывает на странице.

Списки — прямо как в Word — с пунктиками 1) 2) 3) или с точечками вместо них.Рассмотрим тип списка с точечками. пишем:<ul></ul> — это тэг «ненумерованный список», в нём создаём тэги элемента списка <li>Текст элемента 1</li><li>Текст элемента 2</li>. А теперь соединяем их:<ul><li>Текст элемента 1</li><li>Текст элемента 2</li></ul>. Получаем:

  • Текст элемента 1
  • Текст элемента 2

Кнопочки оформления текста в WordPress

Эти кнопочки мы уже сегодня видели.
statia-html

Кнопочка «B» — BOLD(жирный). Вставляет тег <strong>жирный текст</strong> — получаем жирный текст

Кнопочка «i» — italic(курсив). Вставляет тег <em>выделенный текст</em> — получаем курсив

Кнопочка «link» — link(ссылка). Вставляет тег <a>это ссылка</a> — с ним мы уже знакомы

Кнопочка «img» — image(картинка). Вставляет тег <img> — с ним тоже знакомы

Кнопочка «ul» , «ol» , «li» — «ненумерованный список», «нумерованный список», «элемент списка» — тоже разбирали.

Кнопочка «b-quote» — blockquote(цитата). Это значит что вы где-то спёрли текст, вставили на свой сайт и боитесь, что вас обвинять в плагиате. Поэтому используете теги <blockquote>краденный текст</em> — получаем

Так выделяется цитата

Кнопочка «code» — код(например код на языке С# или Паскаль). Вставляет тег <code>код программы</code> — получаем код программы

Кнопочка «more» — читать далее. Это не тэг. Это невидимый текст (комментарий называется). Если он есть то текст статьи в рубрике отображается до этого знака, а полный текст — только в тексте статьи. Вставляет <!—more—>

Фев
13th

Стандартная блочная тема + возможно мааленький магазин


Фев
13th

Хороший магазин


Фев
12th

Сайт школы английского

Прямо скажем, дизайн нестандартный. В качестве меню — кнопки-картинки в содержании.
(В настоящее время сайт не работает)