Разработка Web-ориентированной обучающей системы "Компьютерный дизайн"

Характеристика функциональных возможностей обучающей системы. Принципиальная структура и схема работы системы дистанционного обучения. Описание основных средств разработки пользовательского интерфейса. Организация хранения данных и средства СУБД MySQL.

Рубрика Программирование, компьютеры и кибернетика
Вид дипломная работа
Язык русский
Дата добавления 06.05.2017
Размер файла 2,1 M

Отправить свою хорошую работу в базу знаний просто. Используйте форму, расположенную ниже

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

Размещено на http://www.allbest.ru/

Оглавление

Введение

Глава 1. Создание обучающей системы

1.1 Актуальность разработки и цель работы

1.2 Функциональные возможности обучающей системы

1.3 Принципиальная структура и схема работы системы

Глава 2. Программно-языковые средства разрабатываемой системы

2.1 Средства разработки пользовательского интерфейса

2.2 Организация хранения данных и средства СУБД MySQL

2.3 Обработка и передача данных с использованием языка PHP

Глава 3. Разработка ВЕБ-ориентированной системы

3.1 Разработка структуры веб-системы

3.2 Разработка физической модели БД

3.3 Создание интерфейса пользователя

3.4 Организация поиска по данных

3.5 Система регистрации пользователя

3.6 Загрузка фото, видео файлов

3.7 Панель администратора

Заключение

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

обучение дистанционный mysql интерфейс

Введение

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

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

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

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

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

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

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

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

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

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

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

Глава 1. Создание обучающей системы

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

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

Естественно, чтобы выжить в таком мире, необходимо изменить и методику образования.

На данный момент мы стараемся придерживаться старой методики «от преподавателя к ученикам». Раньше этого было достаточно! Но прогресс не стоит на месте, а идет с огромной скоростью. И, естественно, объем информации для обучения также растет. Остается надеяться, что мои преподаватели будут опытны в своем деле.

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

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

У обучающих систем свой ряд преимуществ, такие как:

· Достаточно низкая цена.

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

· Наличие на сайте большого количества людей.

При очном занятии это было бы явным минусом, но в онлайне он оборачивается плюсом. Соседи по классу не толкают вас локтями, не мешают смотреть на экран и не выжигают кислород в помещении. Но они задают вопросы. И чем больше людей находится на сайте, тем больше интересных вопросов (и ответов на них) вы получите. Если вопрос очень объемный, можно получить краткий ответ и ссылку на дополнительный материал. В онлайне это делать гораздо удобнее: не надо переписывать ссылку с экрана, можно просто скопировать ее в командную строку броузера. Это срабатывает еще и потому, что в онлайне модератор может легко пропускать вопросы «детские», кратко ответив на них и не давая втянуть себя в неинтересную дискуссию.

· Возможность в течении обучения повторить пройденный материал.

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

Как заметил один из учащихся: «После третьего просмотра вопросов не остается».

· Нет привязки к расписанию.

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

· Нет привязки к городу проведения занятий.

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

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

· Возможность познакомиться с единомышленниками.

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

Минусы онлайн занятий.

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

· Требуется достаточно хороший канал доступа в интернет.

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

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

Интернет дает огромные возможности для образования:

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

* можно создавать новые возможности для интеллектуального сотрудничества и когнитивного обучения;

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

* появились новые возможности для образования инвалидов, которым теперь доступно обучение в том же объеме и качестве, что и их здоровым сверстникам, посещающим обычные;

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

* Интернет служит уникальным и действенным средством распространения сложных идей и абстрактных концепций.

Благодаря Интернету учащиеся сегодня не ограничены пространственными и временными рамками.

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

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

Есть свои «но» и в роли Интернета в образовании. Если раньше для написания работы, учащиеся искали разные книги в библиотеках, изучали их, выписывали нужную информацию и, лишь собрав необходимый материал, выполняли задание, то сегодня скачать готовую работу по теме можно с помощью одного клика. Часто сдаются даже не переработанные рефераты и курсовые, в лучшем случае из нескольких делается одна работа. Конечно, качество знаний, приобретаемых таким образом, говорит само за себя. Ведь одно дело использовать всемирную паутину для поиска информации в электронном виде вместо обычных изданий, другое - скачать готовую работу, не думая. А ведь еще 20 лет назад все рефераты и курсовые писались от руки, и текст тщательно продумывался. Сегодня такой качественный подход - редкость, проще взять готовое и не думать.

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

1.1 Актуальность разработки и цель работы

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

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

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

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

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

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

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

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

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

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

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

1.2 Функциональные возможности обучающей системы

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

На этом сайте пользователь может найти различные уроки как в текстовом формате с изображениями, так и в видео формате. Таким образом пользователю легко обучиться, пользоваться с программным обеспечением Photo-Shop от компании Adobe. А также сайт содержать различные материалы или ссылки к дополнительным материалом, которые не дается опубликовать в других сайтах. Не всем по карману покупать программу Photo Shop, или иметь достаточно мощного компьютера, но это в наше время мало вероятно, так как существуют пиратские версии программных обеспечений и мощный компьютеры по достаточно низким ценам, но я добавил он-лайн версию программы, на всякие случаи. К тому же когда программа может понадобиться, но ее не установлено в компьютере, вот в таких моментах пользователь может посещать сайты, таких как мой.

On line Photo-Shop

Сервис Фотошоп Онлайн на 60 процентов копирует функциональные возможности популярной программы “Adobe Photoshop” и в своём арсенале также имеет такие инструменты, как карандаш, кисть, ластик, написание текстов, стили (градиенты, изменение размера, контраст, наложение фотоизображений, обводка, прозрачность, тени, свечение), яркость, а также ещё дополнительное множество необходимых и полезных инструментов. С удовольствием экспериментируйте и создавайте неповторимые и интересные фото шедевры, которые многие пользователи с любопытством будут рассматривать и все это на русском языке.

Рис.1.1 Онлайн Photoshop

Видео уроки

Почему же обучающие видео-уроки пользуются столь огромной популярностью у людей? Ответ довольно прост!

Во-первых, видео-уроки - это очень удобно. Процесс обучения может происходить в наиболее подходящей для Вас форме. Вы можете сидеть перед компьютером в комфортной обстановке, при этом Вас никто не будет отвлекать, и просто смотреть и повторять все действия за автором, тем самым приобретая всё новые умения и навыки. Во-вторых, этот способ абсолютно мобилен. Обучение по видео урокам не привязывает Вас к какому-то определённому месту, то есть процесс обучения может происходить в любом месте: дома, в офисе, в кафе и так далее. В-третьих, заплатив за видеокурсы однажды, Вы можете изучать их сколько угодно раз; если Вы вдруг что-либо подзабыли, то можете в любое время обратиться к приобретённым обучающим видео-урокам и заново проработать тот момент, который вызвал затруднения. В-четвёртых, одним из самых главных преимуществ, обучающих видео-уроков является их дешевизна. Вы платите всего один раз, отдав небольшую сумму денег (хочу сказать Вам, что на сегодняшний день такое удовольствие по карману практически каждому). Если, посещая специальные тренинги, Вам придётся отдавать по 500-1000 рублей за одно занятие, и в итоге Вами будет потрачено 10000 рублей и более, то за видеокурс Вам нужно отдать всего от 1 до 3 тысяч рублей (средняя цена примерно 1500-1700 рублей). Разница ощутимая. В-пятых, обучение по видео-урокам происходит пошагово. Авторы стремятся наиболее эффективно и наглядно поделиться своим личным опытом, излагают всё чётко, подробно и последовательно. И как показывает статистика, эффективность от обучения по видео-урокам гораздо выше, нежели посещение платных тренингов и семинаров.

Рис. 1.2 Просмотр видео урока

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

Рис. 1.3 Страница регистрации

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

Рис. 1.4 Личный кабинет пользователя

А функция комментирования работает тогда, когда человек залогинился, а если не зарегистрирован, то форма комментария блокируется.

Рис 1.5 Форма комментария, слева - когда не авторизован, справа - когда авторизован

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

Рис. 1.6 Кнопка добавления урока в список

1.2 Принципиальная структура и схема работы системы

Рис.1.7 Структура работы сайта.

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

Глава 2. Программно-языковые средства разрабатываемой системы

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

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

Клиентские языки

Как следует из названия, программы на клиентских языках обрабатываются на стороне пользователя, как правило, их выполняет браузер. Это и создает главную проблему клиентских языков - результат выполнения программы (скрипта) зависит от браузера пользователя. То есть если пользователь запретил выполнять клиентские программы, то они исполняться не будут, как бы ни желал этого программист. Кроме того, может произойти такое, что в разных браузерах или в разных версиях одного и того же браузера один и тот же скрипт будет выполняться по-разному. С другой стороны, если программист возлагает надежды на серверные программы, то он может упростить их работу и снизить нагрузку на сервер за счет программ, исполняемых на стороне клиента, поскольку они не всегда требуют перезагрузку (генерацию) страницы. Самыми распространенными клиентскими языками программирования являются:

· HTML

· CSS

· JavaScript

Серверные языки

Когда пользователь дает запрос на какую-либо страницу (переходит на неё по ссылке или вводит адрес в адресной строке своего браузера), то вызванная страница сначала обрабатывается на сервере, то есть выполняются все программы, связанные со страницей, и только потом возвращается к посетителю по сети в виде файла. Этот файл может иметь расширения: HTML, PHP, ASP, ASPX, Perl, SSI, XML, DHTML, XHTML.

Работа программ уже полностью зависима от сервера, на котором расположен сайт, и от того, какая версия того или иного языка поддерживается. К серверным языкам программирования можно отнести: PHP, Perl, Python, Ruby, любой .NET язык программирования (технология ASP.NET), Java, Groovy.

Важной стороной работы серверных языков является возможность организации непосредственного взаимодействия с системой управления базами данных (или СУБД) - сервером, на котором упорядоченно хранится информация, которая может быть вызвана в любой момент. Популярными среди систем управления базами данных являются:

· Firebird

· IBM DB2

· Microsoft SQL Server

· MySQL

· Oracle

· Sybase Adaptive Server Enterprise и т.д.

2.1 Средства разработки пользовательского интерфейса

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

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

Проектирование веб интерфейсов VS проектирование интерфейса пользователя: в чем отличие?

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

Разработка пользовательского интерфейса: что это значит? 

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

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

Как осуществляется проектирование интерфейса?

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

Какие бонусы дает правильно спроектированный пользовательский интерфейс? 

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

Какие особенности имеет пользовательский интерфейс? 

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

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

· Дизайн отличается минималистичностью. Цветовая гамма спокойная, яркие цвета не используются. Проектирование осуществляется согласно предпочтениям ЦА.

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

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

· Ненавязчивая айдентика продавца. Для многих покупателей важно, у кого они покупают товар. Безусловно, пользователь должен увидеть логотип и название компании. Но эти вещи имеют второстепенное значение.

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

При разработке я использовал программу Adobe Photoshop.

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

Затем наступает этап разработки макета. На этом этапе активно используют программу Фотошоп. Все страницы сайта должны появиться сначала в виде растровых картинок в полный размер оригинала. Именно на таких макетах прорабатываются все графические решения для сайта. Ведь нужно все чётко спланировать - как будет фон сочетаться с различными состояниями кнопок и меню, и они сами будут выглядеть, какой шрифт будет использоваться для различных текстов, как будет размещаться логотип и другие изображения. И таких "как" на данном этапе очень много. А в Фотошопе очень удобно решать все вопросы, связанные с графикой. Интерфейс программы и возможности за многолетнюю историю развития проработаны так, что сверстать макет, а потом внести в него изменения очень легко. На финишной линии данного этапа появляется большое количество изображений будущего сайта, в которых уже можно увидеть, то что потом будет удивлять посетителей.

Рис. 2.1 Процесс начертания дизайна в программе Photoshop

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

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

Рис. 2.2

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

2.2 Организация хранения данных и средства СУБД MySQL

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

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

В этой таблице данные - это собственно номера телефонов, адреса и ФИО., т.е. строки «Иванов Иван Иванович», «32-43-12» и т.п., а названия столбцов этой таблицы, т.е. строки «ФИО», «Номер телефона» и «Адрес» задают смысл этих данных, их семантику.

Таблица 1. Пример базы данных: телефонная книга.

ФИО

Номер телефона

Адрес

Иванов Иван Иванович

32-43-12

ул. Ленина, 12, 43

Ильин Федор Иванович

32-32-34

пр. Маркса, 32, 45

Теперь представьте, что записей в этой таблице не две, а две тысячи, вы занимаетесь созданием этого справочника и где-то произошла ошибка (например, опечатка в адресе). Видимо, тяжеловато будет найти и исправить эту ошибку вручную. Нужно воспользоваться какими-то средствами автоматизации. Для управления большим количеством данных программисты (не без помощи математиков) придумали системы управления базами данных (СУБД). По сравнению с текстовыми базами данных электронные СУБД имеют огромное число преимуществ, от возможности быстрого поиска информации, взаимосвязи данных между собой до использования этих данных в различных прикладных программах и одновременного доступа к данным нескольких пользователей.

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

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

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

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

Примеры реляционных СУБД: Mysql, PostgreSql. В основу объектной модели положена концепция объектно-ориентированного программирования, в которой данные представляются в виде набора объектов и классов, связанных между собой родственными отношениями, а работа с объектами осуществляется с помощью скрытых (инкапсулированных) в них

методов. Примеры объектных СУБД: Cache, GemStone (от Servio Corporation), ONTOS (ONTOS). В последнее время производители СУБД стремятся соединить два этих подхода и проповедуют объектно-реляционную модель представления данных. Примеры таких СУБД - IBM DB2 for Common Servers, Oracle8.

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

Ключи

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

Первичный ключ (primary key, PK) - минимальный набор полей, уникально идентифицирующий запись в таблице. Значит, первичный ключ - это в первую очередь набор полей таблицы, во-вторых, каждый набор значений этих полей должен определять единственную запись (строку) в таблице и, в-третьих, этот набор полей должен быть минимальным из всех обладающих таким же свойством.

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

Например, в нашей таблице (см. выше) ФИО и адрес позволяют однозначно выделить запись о человеке. Если же говорить в общем, без связи с решаемой задачей, то такие знания не позволяют точно указать на единственного человека, поскольку существуют однофамильцы, живущие в разных городах по одному адресу. Все дело в границах, которые мы сами себе задаем. Если считаем, что знания ФИО, телефона и адреса без указания города для наших целей достаточно, то все замечательно, тогда поля ФИО и адрес могут образовывать первичный ключ. В любом случае проблема создания первичного ключа ложится на плечи того, кто проектирует базу данных (разрабатывает структуру хранения данных). Решением этой проблемы может стать либо выделение характеристик, которые естественным образом определяют запись в таблице (задание так называемого логического, или естественного, PK), либо создание дополнительного поля, предназначенного именно для однозначной идентификации записей в таблице (задание так называемого суррогатного, или искусственного, PK).

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

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

Например, у нас есть три таблицы: содержащая информацию об исторических личностях (Persons), содержащая информацию об их изобретениях (Artifacts) и содержащая изображения как личностей, так и артефактов (Images) (рис 10.1).

Первичным ключом во всех этих таблицах является поле id (идентификатор). В таблице Artifacts есть поле author, в котором записан идентификатор, присвоенный автору изобретения в таблице Persons. Каждое значение этого поля является внешним ключом для первичного ключа таблицы Persons. Кроме того, в таблицах Persons и Artifacts есть поле photo, которое ссылается на изображение в таблице Images. Эти поля также являются внешними ключами для первичного ключа таблицы Images и устанавливают однозначную логическую связь Persons-Images и Artifacts-Images. То есть если значение внешнего ключа photo в таблице личности равно 10, то это значит, что фотография этой личности имеет id=10 в таблице изображений. Таким образом, внешние ключи используются для организации связей между таблицами базы данных (родительскими и дочерними) и для поддержания ограничений ссылочной целостности данных.

Индексирование

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

Для этого (для оптимизации производительности запросов) производят индексирование некоторых полей таблицы. Использовать индексы полезно для быстрого поиска строк с указанным значением одного столбца. Без индекса чтение таблицы осуществляется по всей таблице, начиная с первой записи, пока не будут найдены соответствующие строки. Чем больше таблица, тем больше накладные расходы. Если же таблица содержит индекс по рассматриваемым столбцам, то база данных может быстро определить позицию для поиска в середине файла данных без просмотра всех данных. Это происходит потому, что база данных помещает проиндексированные поля поближе в памяти, так, чтобы можно было побыстрее найти их значения. Для таблицы, содержащей 1000 строк, это будет как минимум в 100 раз быстрее по сравнению с последовательным перебором всех записей. Однако в случае, когда необходим доступ почти ко всем 1000 строкам, быстрее будет последовательное чтение, так как при этом не требуется операций поиска по диску. Так что иногда индексы бывают только помехой. Например, если копируется большой объем данных в таблицу, то лучше не иметь никаких индексов. Однако в некоторых случаях требуется задействовать сразу несколько индексов (например, для обработки запросов к часто используемым таблицам).

Если говорить о Mysql, то там существует три вида индексов: PRIMARY, UNIQUE, и INDEX, а слово ключ (KEY) используется как синоним слова индекс (INDEX). Все индексы хранятся в памяти в виде B-деревьев.

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

UNIQUE - ключ (индекс), задающий поля, которые могут иметь только уникальные значения.

INDEX - обычный индекс (как мы описали выше). В Mysql, кроме того, можно индексировать строковые поля по заданному числу символов от начала строки.

СУБД MySQL

Продолжим разговор о СУБД Mysql. Mysql - это реляционная система управления базами данных. То есть данные в ее базах хранятся в виде логически связанных между собой таблиц, доступ к которым осуществляется с помощью языка запросов SQL. Mysql - свободно распространяемая система, т.е. платить за ее применение не нужно. Кроме того, это достаточно быстрая, надежная и, главное, простая в использовании СУБД, вполне подходящая для не слишком глобальных проектов. Работать с Mysql можно не только в текстовом режиме, но и в графическом. Существует очень популярный визуальный интерфейс (кстати, написанный на PHP) для работы с этой СУБД. Называется он PhpMyAdmin. Этот интерфейс позволяет значительно упростить работу с базами данных в Mysql.

Рис. 2.3 Пользовательский интерфейс PHPMYADMIN

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

2.3 Обработка и передача данных с использованием языка PHP

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

Внутри PHP-скрипта существует несколько способов получения доступа к данным, переданным клиентом по протоколу HTTP. До версии PHP 4.1.0 доступ к таким данным осуществлялся по именам переданных переменных (напомним, что данные передаются в виде пар «имя переменной, символ «=», значение переменной»). Таким образом, если, например, было передано first_name=Nina, то внутри скрипта появлялась переменная $first_name со значением Nina. Если требовалось различать, каким методом были переданы данные, то использовались ассоциативные массивы $HTTP_POST_VARS и $HTTP_GET_VARS, ключами которых являлись имена переданных переменных, а значениями - соответственно значения этих переменных. Таким образом, если пара first_name=Nina передана методом GET, то $HTTP_GET_VARS["first_name"]="Nina". Использовать в программе имена переданных переменных напрямую небезопасно. Поэтому было решено начиная с PHP 4.1.0 задействовать для обращения к переменным, переданным с помощью HTTP-запросов, специальный массив - $_REQUEST. Этот массив содержит данные, переданные методами POST и GET, а также с помощью HTTP cookies. Это суперглобальный ассоциативный массив, т.е. его значения можно получить в любом месте программы, используя в качестве ключа имя соответствующей переменной (элемента формы).

Глава 3. Разработка ВЕБ-ориентированной системы

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

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

3.1 Разработка структуры веб-системы

Чаще всего веб-приложения состоят как минимум из трёх основных компонентов:

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

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

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

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

Рис. 3.1 Структура работы

· Браузер через Интернет отсылает HTTP-запросы веб-серверу

· Веб-сервер вызывает PHP-скрипт, написанный разработчиком веб-приложения

· PHP-скрипт обращается к базе данных, если это нужно

· В результате PHP-скрипт возвращает клиенту веб-страницу, которую и отображает браузер.

Языки программирования для серверной части

Для программирования серверной части веб приложения может использоваться язык PHP, как в описанном примере, но не обязательно он. Для разработки веб-приложений можно использовать практически любые современные языки программирования:

· PHP, Perl

· Ruby

· Java

· С/C++

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

В дальнейшем в ходе освоения веб-технологий будем опираться на язык PHP, поскольку он является самым распространённым и самым простым среди всех перечисленных, а также моя работа написано на этом языке. Конфигурация сервера, включающая себя операционную систему Linux, язык программирования PHP, веб-сервер Apache и СУБД MySQL считается стандартом де-факто для среднестатистического сервера и даже носит название LAMP (от сокращения Linux, Apache, MySQL, PHP).

Язык программирования клиентской части

Основной язык, которым описывается графический интерфейс веб-приложения - это HTML. Этот язык описывает структуру веб-страницы. Художественное оформление веб страниц описывается таблицами стилей - CSS.

Для "оживления" графического интерфейса используются дополнительные технологии: скрипты JavaScript, а также встроенные в веб-страницу компоненты, созданные на Flash, Java или Silverlight. Все эти элементы веб-страницы могут взаимодействовать между собой: программа, написанная на JavaScript и выполняющаяся на веб-странице, может управлять встроенными в страницу компонентами, тем самым реализуя пользовательский интерфейс с богатыми возможностями. Например, в моей работе есть карусель уроков, т.е. это некий контент, который показывает уроки по очереди, это для привлечения людей к сайту.

...

Подобные документы

Работы в архивах красиво оформлены согласно требованиям ВУЗов и содержат рисунки, диаграммы, формулы и т.д.
PPT, PPTX и PDF-файлы представлены только в архивах.
Рекомендуем скачать работу.