Муниципальное общеобразовательное учреждение

«Средняя общеобразовательная школа №6»

города Мурома Владимирской области

Образовательная область:                                 Информационные технологии

Предмет:                                                                              Информатика и ИКТ

ТЕМА ПРОЕКТА

Создание интернет системы обработки и хранения графических файлов

http://picroad.freetzi.com

Исполнитель:

учащийся  10 «А» класса  

Кукин Владислав

Руководители:

Малахова Елена Викторовна, учитель информатики и ИКТ

Муром, 2011 учебный год

1.        Введение        3

2.        Обоснование выбора метода разработки        4

3.        Структура проекта        10

4.        Заключение        19

5.        Список используемых источников, литературы        20

1. Введение

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

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

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

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

Цель работы –  создание удобного и инновационного хостинга изображений для их быстрой публикации в глобальной сети «Интернет».

Объект исследования:  создание ядра системы и графического интерфейса веб-сервиса.

Предмет исследования: бесплатный хостинг изображений, который я назову «PicRoad».

Проблема: как увеличить количество  графики на веб-странице, но при этом уменьшить скорость ее загрузки

Гипотеза: считаю, что за хостингами изображений лежит будущее быстрой и общедоступной глобальной сети.

Достижение цели работы осуществлялось решением следующих основных задач:

1. Создать ядро, отвечающее за «внутреннюю» работу сервиса..
2. Разработать графическую оболочку сервиса.
3. Произвести оптимизацию по определенным критериям.
4. Создать дополнительные универсальные функции управления.
5. Произвести альфа-тестирование сервиса, сравнив качество оптимизации графических файлов.
6. На стадии бета-тестирования запустить сервис в глобальную сеть.

Работа над проектом проводилась в несколько этапов.

На первом этапе формировался принцип работы и функционал сервиса.

Второй этап состоял из разработки основных компонентов системы, необходимых для обработки пользовательской информации

Третий этап был посвящен созданию удобного и легкого в использовании интерфейса сервиса.

На четвертом этапе проводилась тестирование и оптимизация веб-сервиса.

Пятый этап. Публикация в глобальной сети и начало работы.

2.  Обоснование выбора метода разработки

Ни один сервис публикации изображений не может обойтись без серверных скриптов и баз данных, поэтому в начале разработки было создано ядро, которое связало работу необходимых компонентов, а именно, базы данных с пользовательским интерфейсом. Ядро содержит множество функций по обработке запросов и содержимого, предоставленного пользователем, основные сведения о системе. В нем представлено более 600 строк программного кода. Ядро является основным компонентом сервиса, без которого не возможна работа ни одной пользовательской функции. Я назвал его Arizona System Core (в сокращенном варианте - AZSC):

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

В начале этапа был создан шаблон пользовательского интерфейса с помощью HTML,PHP, CSS, Javascript.

HTML

HTML - это стандартный язык, который используется для создания веб-страниц, размещаемых в Интернете. Первоначально в основе HTML лежала одна простая идея. Эта идея состояла в том, чтобы внести в обычные текстовые документы, которые люди читали на экране монитора, просто прокручивая или перелистывая страницы, как в книжке, возможность добавления ссылок, переходя по которым, человек мог сразу перескочить на другую страницу или в другое место текста, если данная ссылка его заинтересовала. Возможность добавления в своём тексте ссылок на другие страницы, в сочетании с появившимся к тому времени механизмом задания адреса для любой страницы, выложенной в сети (который известен как URL) и привела к тому, что начала формироваться взаимосвязанная сеть сайтов, воплотившаяся в тот интернет, который мы имеем сейчас. Первоначальный HTML был очень простым. Помимо возможностей для вставления ссылок в нём существовали средства лишь для простого форматирования текста. Однако стандартные возможности HTML скоро перестали устраивать пользователей сети, и сейчас язык HTML, в сочетании со своими расширениями предоставляет очень большие возможности для красивого и функционального оформления сайтов.

Важным дополнением к языку HTML являются стандарты CSS (каскадных таблиц стилей). Что такое CSS?

CSS

CSS (англ. Cascading Style Sheets — каскадные таблицы стилей) — язык описания внешнего вида документа, написанного с использованием языка разметки. 

Преимущественно используется как средство оформления веб-страниц в формате HTML и XHTML, но может применяться к любым XML-документам, например, к SVG или XUL.

CSS используется создателями веб-страниц для задания цветов, шрифтов, расположения и других аспектов представления документа. Основной целью разработки CSS являлось разделение содержимого (написанного на HTML или другом языке разметки) и представления документа (написанного на CSS). Это разделение может увеличить доступность документа, предоставить большую гибкость и возможность управления его представлением, а также уменьшить сложность и повторяемость в структурном содержимом. Кроме того, CSS позволяет представлять один и тот же документ в различных стилях или методах вывода, таких как экранное представление, печать, чтение голосом (специальным голосовым браузером или программой чтения с экрана), или при выводе устройствами, использующими шрифт Брайля.

PHP

PHP (англ. PHP: Hypertext Preprocessor — «PHP: препроцессор гипертекста», англ. Personal Home Page Tools (устар.) — «Инструменты для создания персональных веб-страниц») — скриптовый язык программирования общего назначения, интенсивно применяемый для разработки веб-приложений. В настоящее время поддерживается подавляющим большинством хостинг-провайдеров и является одним из лидеров среди языков программирования, применяющихся для создания динамических веб-сайтов.

Язык и его интерпретатор разрабатываются группой энтузиастов в рамках проекта с открытым кодом. Проект распространяется под собственной лицензией, несовместимой с GNU GPL.

JavaScript

Наиболее продвинутые языки веб программирования, такие как Javascript, Ajax помогают улучшить работоспособность, с улучшением внешнего вида. Наиболее популярный и широкоиспользуемый - Javascript - язык, разработанный в начале 90-х фирмой Netscape, браузер которой Netscape Navigator в те времена был наиболее популярным средством для просмотра веб-сайтов. Название javascript наводит на мысли о связи с языком java, который также может использоваться в веб-программировании, и, действительно, javascript разрабатывался во многом с опорой на язык Java, но следует всё же помнить, что это совершенно разные языки. Скрипты, написанные на javascript, выполняются на стороне клиента (т. е. на компьютере пользователя), и не просто на стороне клиента, а в самом браузере, поэтому не требуется никаких дополнительных программ, никаких плагинов и т. п., скрипт можно просто вставить в html-код страницы, и он будет выполняться в любом браузере. Javascript - простой и удобный язык, позволяющий легко управлять содержимым веб-страницы, отслеживая самые различные действия пользователя, и реагируя на это.

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

jQuery

 Дополнением к Javascript является библиотека jQuery, которая и используется в нашем справочнике. Основной целью создания jQuery была  возможность закодировать многоразовые куски кода, которые позволят упростить JavaScript и использовать их так, чтобы не беспокоиться о кросс-браузерных вопросах.

Возможности jQuery:

1.  множество визуальных эффектов;
2.  поддержка AJAX-дополнений;
3.  поддержка JavaScript-плагинов.

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

AJAX

 Наиболее современным вариантом являются технологии Ajax.  AJAX (от англ. Asynchronous Javascript and XML — «асинхронный JavaScript и XML») — подход к построению интерактивных пользовательских интерфейсов веб-приложений, заключающийся в «фоновом» обмене данными браузера с веб-сервером. В результате, при обновлении данных, веб-страница не перезагружается полностью и веб-приложения становятся более быстрыми и удобными. Использование AJAX позволяет значительно сократить трафик при работе с веб-приложением благодаря тому, что часто вместо загрузки всей страницы достаточно загрузить только изменившуюся часть, часто довольно небольшую. AJAX позволяет несколько снизить нагрузку на сервер. К примеру, на странице работы с почтой, когда вы отмечаете прочитанные письма, серверу достаточно внести изменения в базу данных и отправить клиентскому скрипту сообщение об успешном выполнении операции без необходимости повторно создавать страницу и передавать её клиенту. Поскольку нужно загрузить только изменившуюся часть, то пользователь видит результат своих действий быстрее.

3. Структура проекта

На первом этапе, после разработки ядра системы, формировался внешний вид сайта. Разработка графических элементов дизайна производилась в специальных программах – графических редакторах, таких как Microsoft Office Picture Manager 2010, Adobe Photoshop, GIMP. Стиль страниц выполнен с использованием Web 2.0^[1]. Шаблон использует CSS версии 3.0, который позволил улучшить визуализацию компонентов.

Ниже представлен внешний вид страницы:

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

Сервис классифицирует пользователей на следующие группы:

1. Пользователи (прошедшие регистрацию и последующую авторизацию);
2. Гости.

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

В процессе разработки была создана навигация, которая включает такие разделы, как:

1. Главная страница [В]^[2]
2. Правила [В]
3. Отзывы [В]
4. Мои картинки [П]
5. Корзина [П, Р]

На главной странице пользователь может загрузить изображение, выбрав необходимые параметры. По своей структуре сервис можно отнести к TwoStages^[3], т.к. полная обработка изображения проходит в два этапа.

Первый этап – загрузка изображения с локального ресурса (на компьютере клиента). Пользователь может «приклеить» водный знак на изображение, руководствуясь гибкими настройками системы: менять положение значка, прозрачность. Также имеется возможность добавить собственный комментарий к файлу.

Второй этап – загрузка изображения с указанного URL адреса в интернете. При этом пользователю предоставляется возможность выбрать степень сжатия изображения или конкретный размер и качество обработанного изображения (только для форматов jpg, jpeg).

Оба канала поддерживают AlphaOpacity^[4] и размер создаваемого превью.

Что же такое превью? Превью (они же миниатюры, thumbnails) – сжатая копия оригинального изображения. Обычно миниатюра содержит информационные надписи. Является незаменимым атрибутом хостинга.

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

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

Рассмотрим основные из них:

1. Прямая ссылка (ссылка на файл изображения оригинального размера);
2. HTML, картинка в тексте (ссылка для вставки изображения в html редактор);
3. HTML, увеличение по клику (ссылка для вставки в html редактор, но уже с превью, при нажатии на который будет показано оригинальное изображение);
4. BBCode, картинка в тексте (ссылка для форума);
5. BBCode, увеличение по клику (ссылка для форума с превью);
6. Просмотр полномасштабного изображения (сслыка на страницу просмотра изображения);

Также сервис предлагает «Highslide совместимый» код, который будет работоспособен только при наличии подключенного модуля галереи Highslide на сайте. Данный плагин позволяет плавно увеличивать изображение от размеров превью до оригинала с использованием красивого эффекта входа.

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

Все загруженные пользователем изображения помещаются на страницу просмотра «Мои картинки». Каждая картинка имеет дополнительные опции, всплывающие при наведении на превью:

Описание опций:

  - просмотр изображения в режиме галереи;

  - просмотр кодов для вставки изображения в иные веб-страницы;

  - удаление в «Корзину» (при активированном модуле «Корзина»), иначе происходит полное удаление изображения с сервиса.

Рассмотрим наиболее интересные модули сервиса PicRoad, такие как «Корзина», «Society» (социальный плагин) и «Отзывы».

Модуль «Корзина»

Данный модуль требует активации со стороны пользователя. По умолчанию «включен».

Для перехода на страницу модуля нужно кликнуть по вкладке «Корзина» в навигационном меню.

Данный плагин предотвращает случайное удаление изображения. Изображение, помещаемое в корзину, перестает отображаться в списке «Мои картинки».

Опции модуля:

«Очистить корзину» - удаляет все файлы из временного хранилища;

«Восстановить отмеченные» - восстанавливает в общий список отмеченные файлы;

«Удалить отмеченные» - удаляет из временного хранилища только отмеченные файлы.

Также «Корзина» оснащена двухранговой системой предупреждений, которая проинформирует пользователя о достижения максимального числа файлов, помещенных во временное хранилище, и предложит очистить его.

Модуль «Society»

Полезный социальный плагин, который представлен не в виде странице, а как набор компонентов, использующихся повсеместно в сервисе. Рассмотрим их.

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

После подтверждения, пользователь появится в Вашем списке друзей:

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

Ещё одной особенностью социального плагина является система отправки изображений. После того, как Вы начнете дружбу хотя бы с одним участником PicRoad, на странице просмотра изображения сервис предложит Вам поделиться изображением с другом и предложит список друзей, которым это изображение ещё не было отправлено.

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

Другой особенностью социального плагина является кнопка «Поделиться» (оригинальное название «Share This») на странице просмотра полноразмерного изображения. Данная опция позволяет быстро опубликовать ссылку на страницу с изображением в таких популярных сервисах, как Facebook, Twitter, Google, Mail.ru, ВКонтакте, LiveJournal и многих других.

Модуль «Отзывы»

Для перехода на страницу модуля, нужно выбрать вкладку «Отзывы» в навигационном меню сервиса.

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

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

На этом этапе разработка основных модулей была временно приостановлена.

Помимо вышеперечисленных плагинов, на хостинге присутствуют и другие, более мелкие, но не менее полезные. Один из них – часовые пояса. Пользователю предлагается выбрать свой часовой пояс для правильного отображения даты загрузки изображения. Стандартный часовой пояс GMT-6. Это обусловлено тем, что сервер сервиса PicRoad находится в Соединенных Штатах Америки в городе Даллас на северо-востоке штата Техас.

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

На этом создание плагинов и модулей было приостановлено, а значит, и завершен третий этап разработки.

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

Тестирование проводилось в два этапа:

α – тестирование;

β – тестирование.

Первый этап заключался в исправлении критических ошибок системы, вызывающих сбои в работе компонентов.

Второй этап предполагал тестирования уровня оптимизации выходных изображений. Результаты проверки представлены ниже:

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

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

Адрес сервиса в интернете: http://picroad.freetzi.com

4. Заключение

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

5. Список используемых источников, литературы

Интернет ресурсы:

1. Википедия - http://ru.wikipedia.org/
2. Центральный  JavaScript-ресурс - http://javascript.ru/
3. Официальный сайт jQuery -  http://jquery.com/
4. Ajax технологии - http://www.abiatec.com/tech/program/ajax
5. Хабрахабр - http://habrahabr.ru/