Разработка анимированного меню

 

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

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

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

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

Для создания анимации с работающими ссылками есть всего три способа:

- используя Adobe Flash;

- средствами CSS;

- с помощью тега canvas в HTML5 и javascript.

Компания Adobe официально отказалась от поддержки flash-плагинов для мобильных устройств. Поскольку целевая аудитория нашего сайта активно пользуется мобильными устройствами для выхода в интернет, было решено отказаться от первого способа реализации.

На данный момент CSS 3D эффекты, входящие в стандарт CSS3, поддерживаются только в движке web-kit(браузеры SafariиGoogleChrome). Компания Mozilla объявила о собственной реализации 3D эффектов в браузере MozillaFirefox. Не смотря на то, что такие браузеры,как Opera иInternetExplorerCSS3 не поддерживают, было решено остановиться именно на втором способе реализации, поскольку планируется поддержка 3D эффектов в браузерах на аппаратном уровне. Использование же третьего способа реализации потребует затраты больших вычислительных мощностей.

WebKit — свободный движок для отображения веб-страниц, разработанный на основе кода библиотек KHTML и KJS.

Исходный код открыт на условиях LGPL, то есть любой из компонентов или все компоненты сразу, в неизменном или измененном виде, можно использовать в проектах любого назначения (в том числе, коммерческих) с одним условием: библиотеки или их производные должны быть опубликованы с открытым исходным кодом на условиях лицензии LGPL. WebKit входит в состав «публичных» фреймворков (динамических библиотек особой структуры), поставляющихся с каждой копией Mac OS X с июня 2003 года.На данный момент осуществляет наиболее полную поддержку HTML в соответствии с рекомендациями W3C.

Приложения, использующие WebKit

- Safari — веб-браузер для Mac OS X и Windows

- iCab — веб-браузер для Mac OS X

- Chromium — браузер с открытым исходным кодом

- GoogleChrome — веб-браузер компании Google, созданный на базе проекта Chromium

- CoolNovo — веб-браузер компании MapleStudios, расширяющий возможности GoogleChrome.

- SRWareIron — веб-браузер компании SRWare, выпущенный в связи с тем, что GoogleChrome отправляет компании Google сведения о пользователе.

- Рамблер Нихром — веб-браузер Рамблера.

- Яндекс Интернет — веб-браузер Яндекса.

- Интернет@mail.ru — веб-браузер Mail.ru (ранее Хром@mail.ru).

- Мобильные платформы для смартфонов и интернет-планшетов:

- AppleiOS — платформа для мобильных смартфонов и интернет-планшетов

- GoogleAndroid — платформа для смартфонов и интернет-планшетов

- HP webOS — платформа для смартфонов и интернет-планшетов

- SamsungBada — платформа для смартфонов

- Epiphany — веб-браузер для среды рабочего стола GNOME

- AdobeIntegratedRuntime (AIR) — платформо-независимая среда для запуска приложений

- Arora — веб-браузер, основанный на Qt 4

- BoltBrowser — веб-браузер на java для мобильных устройств

- Iris Browser — веб-браузердляWindows Mobile

- Dolphin — стандартный браузер в ОС Bada

- Konqueror — основанный на KHTML и WebKit веб-браузер и файловый менеджер, входящий в состав KDE 4

- Maxthon 3 — веб-браузер для Windows с возможностью переключения движка на Trident.

- Midori — веб-браузер, основанный на Gtk. Планируется включение в состав среды рабочего стола Xfce.

- NokiaSeries 60 browser — веб-браузер для мобильных телефонов Nokia S60

- OmniWeb — веб-браузер для Mac OS X

- QtWeb — веб-браузер для Windows, основанный на Qt

- rekonq — веб-браузер, основанный на NokiaQtDemoBrowser

- RockMelt — социальный браузер, поддерживающий синхронизацию с Facebook и Twitter

- Shiira — веб-браузер для Mac OS X

- Surf — простой веб-браузер

- Swift — веб-браузер для Windows

- Adium — IM клиент для Mac OS X

- qutIM — кроссплатформенный IM клиент

- Vacuum-IM — кроссплатформенный Jabber клиент, написанный на Qt

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

- Steam — сервис цифровой дистрибуции компании Valve стал использовать движок WebKit вместо MS Trident, что позволило значительно увеличить производительность и улучшить безопасность работы, а также портировать программу на Mac OS X.

- Yahoo! Messenger — программа мгновенного обмена сообщениями, WebKit используется для отрисовки сообщений

- Luakit — минималистичный веб-браузер, напоминающий Firefoxсо включенным расширением Vimperator.

Использованные средства CSS

-webkit-perspective:

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

-webkit-perspective-origin:

Сначала нам нужно сообщит браузеру, что мы работаем с 3D пространством. Используем свойство perspective родительского элемента. Величина значения свойства perspective определяет, сколько пикселей формирует 3D объект. Маленькое значение сделает невыразительным 3D эффект.

-webkit-transition:

Применять свойство transition можно к фону, цвету, длине, размеру шрифта. В основном это свойства, задающие цвет или свойства, которые могут быть выражены в единицах длины (px, em, ex) или в процентах. Также использовать transition можно с любыми селекторами.

-webkit-transform 2s;

Используется для различных видов перемещения.

translateZ(100px);

Перемещает объект в глубь по оси z на определённое расстояние.

@-webkit-keyframesspin {

from { -webkit-transform: rotateY(0); }

to { -webkit-transform: rotateY(-360deg); }

-webkit-transform: scale3d(1.2, 1.2, 1.2) rotateX(90deg) translateZ(100px);

Параметр scale(n) или scale(x,y) отвечает за масштабирование объекта, т.е. это даёт возможность либо увеличивать, либо уменьшать объект непосредственно в рамках HTML. Объект будет менять размер в зависимости от значения n/x,y, где ось X — ширина, а Y — высота.Для того чтобы повернуть объект против часовой стрелки, применяется отрицательное значение для rotate(ndeg).

Разработка логотипа сайта

 

3.3.1.

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

 

Про создание в Ps

 

3.3.2.

Head-imageсайта турнира юных математиков состоит из трёх изображений: логотип сайта без названия турнира,

 

Создание макета сайта в Wp

Из аналитики

Установка

Знаменитая «установка за 5 минут» сводится к тому, что после скачивания пакет нужно разархивировать и поместить в нужную директорию на сервер. Потом обратиться к этой директории из браузера и ответить на несколько вопросов. Подробнее этот процесс описан в Кодексе.

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

Необходимые вещи

Перед началом установки Вам потребуется узнать несколько вещей.

Это нужно знать

Вам нужен доступ к вашему сайту, его директориям и программное обеспечение для процесса установки. Это:

• Доступ к Вашему сайту (shell или FTP)
• Текстовый редактор
• FTP-клиент (если Вы устанавливаете WordPress на удаленный сервер)
• Браузер, которым Вы пользуетесь.

Это нужно сделать

Начните установку с:

1. Проверки Вашего сервера на соответствие минимальным требованиям WordPress.

2. Получения последней версии WordPress.

3. Распаковки полученного файла в папку на вашем компьютере.

4. Распечатки этой страницы, чтобы иметь ее под рукой во время установки.

Знаменитая 5-минутная установка

Ниже представлены краткие инструкций, для тех, кто уже знаком с процессом установки различных веб-приложений. Более подробные инструкции далее.

1. Скачайте и распакуйте дистрибутив WordPress, если вы этого еще не сделали.

2. Создайте базу данных для WordPress на вашем веб-сервере, чтобы ваш пользователь MySQL имел все права для доступа и внесения изменений в нее.

3. Переименуйте файл wp-config-sample.php файл в wp-config.php.

4. Откройте wp-config.php в вашем любимом текстовом редакторе и впишите в него настройки подключения к базе данных.

5. Разместите файлы WordPress на вашем веб-сервере:

o Если вы хотите установить WordPress в корень вашего сайта (например, http://example.com/), перенесите все содержимое предварительно распакованного дистрибутива WordPress в корневую папку веб-сервера.

o Если вы хотите установить WordPress в отдельную папку на вашем веб-сервере (например, http://example.com/blog/), переименуйте папку wordpress придав ей название папки, в которую вы хотите установить систему и перенесите её на веб-сервер. Например, если вы хотите установить WordPress в папку "blog" на веб-сервере, тогда вам необходимо переименовать папку "wordpress" в "blog" и перенести ее в корень веб-сервера.

Совет: Если скорость вашего соединения с интернетом по протоколу FTP мала, советуем вам прочитать статью о том, как правильно выгрузить файлы на сервер в данном случае: Шаг 1: Загрузка и распаковка.

Перейдите по ссылке wp-admin/install.phpиспользуя ваш любимый веб-браузер.

o Если вы установили WordPress в корень веб-сервера, перейдите по ссылке: http://example.com/wp-admin/install.php

o Если вы установили WordPress в собственно созданную вами папку на веб-сервере, например, blog, тогда перейдите по ссылке: http://example.com/blog/wp-admin/install.php

Вот и все! Если вы сделали все правильно - установка WordPress должна была увенчаться успехом.

Установка в деталях