Статьи

Фев
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—>

Ноя
22nd

Drupal+Ubercart — продажа файлов(электронных товаров)

С точки зрения покупателя


(Уточним: Drupal и его сообщения в этой статье будут на английском, а оплата — через тестовый модуль оплаты кредитной карты. покупатель не имеет аккаунта на сайте и не зарегистрирован)
С точки зрения покупателя процесс покупки файла выглядит так:

  • идём на страницу товара. Жмём «add to cart»(добавить в корзину).
  • Попадаем в корзину. Редактируем количество если надо. Жмём «checkout».
  • Заполняем поля «адрес, телефон, страна» и т.п.
  • Вводим любой номер в поле кредитной карты (сейчас работает тестовый режим — вводи что хочешь), год окончания действия карты ставим как минимум следующий, cvv — какой-нибудь «2222». Вводим комментарии к заказу.
  • Жмём «reviev order». попадаем на одноимённую страницу.
  • Жмём Submit Order. Дальше 2 пути:
  • Пойти в почту — придёт письмо с ссылкой на заказ. Чтобы файл скачать нужно авторизоваться на сайте. Логин и пароль вам пришли в другом письме. Там же есть ссылка, перейдя по которой вы входите в аккаунт без ввода пароля — удобно!
  • Но ленивые в почту не ходят! Ленивые жмут на этой странице ссылку «Login» и входят…..ой! Мы же не завели аккаунт. Но это не беда! Смотрим внимательнее: на этой страничке напечатан ваш логин и пароль. Вводим их. Входим в свой аккаунт.
  • Идёте на вкладку «Files» -> «Downloads» — видите купленный файл. Жмёте на него — он сохраняется на вашем компьютере(в броузере Google Chrome)
  • Теперь вернёмся к альтернативно-почтовому пути. В почте видим письмо «Your order». Открываем. Там текст такой:
    Your order (order# 3) at (Site name) included file download(s). You may access them with the following link(s):

    vidgets_.jpg

    After downloading these files these links will have expired. If you need to download the files again, you can login at (Your site)/user and visit the "My Account" section of the site.

    (перевод: вот ссылка на ваш файл, скачивайте его. Захотите ещё раз скачать — идите на сайт, вводите логин-пароль — в ваших заказах он будет).

Ну вроде всё понятно. И по немецким понятиям оценивается как «быстро и удобно».

С точки зрения администратора сайта

Хотелось бы отметить, что в Drupal всё можно настроить: какое сообщение приходит пользователю, приходит ли, даже порядок полей формы — настраивается.

Раз уж мы использовали тестовую форму, отметим что для админа в заказах есть две кнопки. «Запустить оплату» — и как-бы перевести определённую сумму за заказ. И «Отметить как выполненный» — пользователю приходит сообщение «заказ выполнен», а напротив заказа в админке появляется статус «выполнено». Естественно есть история заказа, и там есть: дата создания заказа, дата и сумма оплаты, заказ завершён.

В drupal возможно кроме скачиваемого файла продавать ещё и диск с ним записанным. Причём они могут идти как 2 товара разных или как один.

Ноя
20th

Продажа загружаемых товаров (WP-e-commerce)

Можно создавать различные варианты продуктов: например книга в бумажном и электронном варианте(в pdf формате). Конечно же электронные надо загрузить на сервер.
Для этого:
Создаём варианты. Жмём ссылку «variant download files», попадаем в
форму загрузки файла для этого варианта товара.

e-shop-downloadable-products
Загружаем, сохраняем — попадаем на страницу главного товара.

Примечание: в WP-e-commerce эта категория товаров требует особого внимания, на форуме автора плагина народ жаловался что не работает.

Источник статьи

Окт
24th

Счётчик от google analytics

После того как сайт начал работать, вы привлекаете на сайт посетителей. Об эффективности акций по привлечению трафика можно судить по графику посещаемости от даты:

График посещаемости

График посещаемости


Созданием этого графика занимается отдельная служба, именуемая в народе «счётчик на сайт». Я рекомендую использовать наиболее популярный в мире сервис Google analytics . (Тото же функционал имеет российский аналог известный как Яндекс директ)

Регистрация

Для регистрации вам необходимо зарегистрироваться в Google analytics.

Переходим на страницу «Управление» нажав на кнопку «Администратор» сверху в меню. Добавляем аккаунт примерно так(на этой картинке — добавляем к существующему):
goo_analitics_add

По регистрации аккаунта вашему сайту присваивается идентификационный номер. А для того чтобы сайт начал отслеживаться сервисом — нужно вписать в него код, его берём например тут:
goo_analitics_kod

Польза


Польза от программы иллюстрируется в её меню:
goo_analitics_menu
Тут жмём «обзор» и созерцаем тот самый график:
График посещаемости

График посещаемости