🔍 Поиск работ

Разработка адаптивной версии веб-портала «Первая Линия»

Работа №141519

Тип работы

Дипломные работы, ВКР

Предмет

журналистика

Объем работы82
Год сдачи2017
Стоимость4270 руб.
ПУБЛИКУЕТСЯ ВПЕРВЫЕ
Просмотрено
157
Не подходит работа?

Узнай цену на написание


Введение………………………………………………………………………...
Глава 1. Характерные особенности функционала и дизайна адаптивных версий веб-портала…
1.1. Информационный веб-портал - определение и сущность…………...
1.2. Решение функциональных задач веб-портала в адаптивном дизайне..
1.3. Принципы оформления при дизайн-проектировании адаптивных версий веб-порталов
Глава 2. Дизайн-проектирование макета адаптивной версии информационного портала «Первая линия» на основе анализа существующих тенденций в веб-среде
2.1. Анализ профильного сегмента среды: зарубежные и отечественные студенческие веб-порталы
2.2. Основные принципы, используемые при макетировании адаптивной версии
2.3. Визуальная концепция и информационная архитектура адаптивной версии информационного портала «Первая линия»………………………….
Заключение…
Список использованной литературы
Приложение


В век информационных технологий в повседневной жизни человека постепенно появляется все больше возможностей, являвшиеся еще несколько десятков лет труднодостижимыми или недоступными вообще. С развитием интернета, а также различных электронных СМИ, информационное пространство стало находиться в режиме обновления нон-стоп.
В настоящее время для получения доступ к актуальным новостям, достаточно открытия браузера и нескольких нажатий мышкой. С увеличением интенсивности ритма жизни человек привыкает к потреблению информации «на ходу». С появлением смартфонов и планшетов ПК и ноутбуки хоть и не исчезают из пользовательского обихода, но требуют больших энерго- и временных затрат для применения. Значительно более простым и быстрым решением становится использование смартфонов с приложениями социальных сетей или мобильными браузерами, обеспечивающими оперативный и практически бесперебойный доступ к новостным порталам и иным информационным ресурсам, нежели стационарные устройства. К тому же, даже при условии существования легких и тонких ноутбуков, они не так удобны в эксплуатации на улице или в общественном транспорте, в отличие от портативных мобильных гаджетов.
Согласно мировой статистике за 2015 год от компании Internet retailer, примерно 60% пользователей используют для выхода в интернет именно смартфоны. По данным Statista Inc на январь 2017 года, более половины все-го трафика (50,3%) приходится на использование мобильными устройствами. Как показывает их исследование, по состоянию на апрель 2017 года, в мире насчитывается около 3394 миллионов уникальных пользователей мобильного интернета. Данные цифры показывают чрезвычайную актуальность обращения к сфере развития портативных электронных устройств с учетом прогнозируемого аналитиками перманентного роста числа их пользователей: «Предполагается, что к 2018 году более 36% мирового населения будет пользоваться смартфонами, в сравнении с 10 процентами в 2011 году». Также, по результатам мировой статистики за 2015 год от компании Internetretailer, примерно 60% пользователей используют для выхода в интернет именно смартфоны.
Расширение аудитории пользователей мобильных устройств стимулирует развитие дизайна как средство визуальной подачи информации, существующее неотделимо от развития девайсов. Веб-дизайн становится одним из самых популярных направлений, имеющих свои особенности и требования. Внимание обращается не только на внешний вид сайта, но и на удобство его эксплуатации. Пользователь сайта должен получать доступ к информации, не затрудняясь в ориентировании в источнике. Основной целью веб-дизайна, касаемо интерфейса и удобства, является эффективность работы с сайтом, удовлетворение от данной работы и максимально высокая скорость достижения поставленной цели.
Возвращаясь к тому, что большинство пользователей сейчас используют портативные гаджеты для выхода в интернет, перед веб-дизайном становится еще одна задача – умение адаптироваться под разные разрешения, ширины и диагонали экрана. Ведь то, что красиво и понятно на широкомасштабном экране компьютера, уже не так уместно выглядит на экране смарт-фона. Для этого отдельно разрабатываются специальные «гибкие» сетки макетов и шрифты.
К сожалению, адаптивный дизайн существует далеко не на всех сайтах, особенно в рунете. Его наличие часто говорит о том, что сайт имеет обширную аудиторию, которая использует современную технику. Это отдельно важно для интернет-магазинов, интернет-СМИ и информационных порталов, так как их аудитория захватывает обширные возрастные группы. Важно сделать сайт удобным для чтения с любого носителя, включая современные гаджеты, которые в большей степени используются молодежью. К сожалению, существующая статистика формирует картину лишь зарубежной ауди-тории пользователей смартфонов, однако по ней также можно формировать примерную картину и для российского поля. Так, в 2016 году 92% молодых людей в возрасте от 18 до 29 лет в США являются обладателями смартфонов, кроме того, свыше 50% всего населения владеют планшетными компьютерами. Таким образом, можно говорить о том, что для студенческого ин-формационного портала адаптивная версия сайта является необходимой.
Цель данной работы - разработка визуальной концепции адаптивной версии современного информационно-образовательного веб-портала.
В работе мы будем рассматривать особенности адаптивных версий веб-порталов на примере информационно-образовательного портала «Первая Линия», который является студенческим СМИ Санкт-Петербургского государственного университета. Портал функционирует более пяти лет и является частью медиахолдинга «Первая Линия», в который входят также ежемесячная газета «Первая Линия» и международный образовательный студенческий телеканал «МОСТ». Аудитория портала – около двух тысяч пользователей в месяц.
Объектом работы выступает адаптивная версия веб-портала, предметом – особенности дизайна адаптивной версии студенческого веб-портала «Первая линия».
В процессе разработки адаптивной версии нами будет обращено внимание на современные подходы веб-дизайна для различных диагоналей экранов, выявлены основные подходы и проанализированы профильные сегменты российской и зарубежной медиасреды.
Таким образом, задачами работы представляются:
• выявить основные факторы адаптации дизайна веб-порталов к представлению на мобильных носителях;
• охарактеризовать современные подходы к дизайну адаптивных версий сетевых медиапроектов;
• изучить особенности дизайна современных версий информационно-образовательных порталов и выявить ключевые решения в их визуальной организации;
• разработать визуальную концепцию и информационную архитектуру адаптивной версии информационно-образовательного портала «Первая Линия».
Практическая значимость исследования состоит в том, что собранная и систематизированная информация позволит нам вывести основные особенности адаптивных версий, а также применить полученные данные в собственном проекте, который может быть внедрен в использование.
Актуальность обусловлена активным ростом использования смартфонов и планшетов для поиска информации и просмотра новостей. Отдельным фактором является рост числа людей, использующих несколько устройств, соответственно им в первую очередь необходимо пользование адаптивной версией для доступности ее на любой диагонали экрана.
В процессе работы для достижения результата нами будут использоваться следующие методы:
• количественный метод;
• метод конструирования;
• метод визуального анализа.
Научно-теоретической базой работы послужили работы: исследования, статьи и книги Я. Нельсона, труды о дизайне в веб-среде известных мировых авторов, таких как Л. Вроблевски, К. Ньюарк, а также российских исследователей Ю. Я. Герчука, О.В. Пикулевского, А.В. Якунина.
В качестве эмпирической базы для анализа профильного сегмента рынка были отобраны российские и зарубежные студенческие веб-порталы, такие как: Политех (новостной веб-портал Санкт-Петербургского политехнического университета Петра Великого), Cherwell (портал Оксвордовского университета), Stanford News (новостной портал Станфордского университета).
Данная работа состоит из введения, двух глав, заключения, списка ис-пользованной литературы и приложений. Первая глава – теоретическая. В главе рассматривается веб-портал как сегмент медиасреды, сущность, процесс, функциональность проектирования адаптивных версий веб-сайтов, а также их особенности визуального оформления. Вторая глава – практическая, представляющая анализ определенных студенческих порталов с целью выявить основные ошибки и ориентиры, а также собственные решения по адаптивному дизайну портала «Первая линия» и подкрепляемая изображениями итоговых разработок. В заключении подводятся выводы, сделанные в ходе исследования и проектирования. В список литературы включены все книги, статьи и интернет-источники, использовавшиеся в ходе исследования. В приложении представлены дополнительные материалы, к которым делается отсылка в тексте работы, позволяющие более глубоко раскрыть выбранную тему, а также скриншоты разработанного адаптивного сайта.


Возникли сложности?

Нужна помощь преподавателя?

Помощь в написании работ!
ДИПЛОМНЫЕ МАГИСТЕРСКИЕ ДИССЕРТАЦИИ
КУРСОВЫЕ СТАТЬИ ВКР

Мировая статистика показывает возрастающую конкуренцию стацио-нарых и мобильных электронных устройств, обеспечивающих использование Интернета. По данным исследовательских компаний, уже на апрель 2017 года мобильным интернетом пользуется более 3,3 миллиардов человек (с учетом населения Земли, составляющего примерно 7,3 миллиарда). Конечно, эта цифра включает обладателей не только смартфонов, но и обычных телефонов с возможностью выхода в интернет, но компания Statista Inc прогнозирует, что к началу будущего года более 36% населения мира будет пользоваться смартфонами. Это определяет актуальность проектирования веб-страниц та-ким образом, чтобы они были удобны для просмотра как на устройствах с большими диагоналями экранов, так и с маленькими.
Анализ теоретических положений, раскрывающих понятие и задач информационного портала, показал, что в сфере средств массовой информации этот веб-формат может являться удобным инструментом для сосредоточения большого количества разнотематической информации на одном ресурсе без эффекта перегрузки и с логичной информационной архитектурой для легкого доступа к разделам. Объединяя этот тезис с вышесказанным, делаем вывод о важности комфортного отображения информационного портала на портативном устройстве с целью сохранения аудитории, заходящей на него со смартфонов или планшетов.
Среди существующих моделей проектирования мобильного представления сайта (адаптивный дизайн, отдельная мобильная версия сайта; RESS (ResponsiveDesign + ServerSide)) нами был сделан выбор с пользу адаптивной версии, являющейся не только наиболее распространенным решением в медиасреде, но и обладающей рядом преимуществ для пользователя: сохранение индивидуального стиля «родительского» сайта, единый URL, соответствие характеристикам экрана используемого в данный конкретный момент устройства.
Взяв за основу в нашей работе функциональный подход и минимализм в веб-дизайне, мы сформировали ряд критериев, по которым проанализировали конкурирующие порталы в профильной среде (студенческие информационно-образовательные порталы), определив основные тенденции и требования, согласно которым нам следует проектировать макет информационно-образовательного портала «Первая линия». Целесообразность создания для него адаптивной версии определена не только следованием развитию трендов в профильной среде, но и результатами опроса, согласно которому более 23 аудитории сайта пользуется им посредством портативных устройств.
При разработке макета мы обратились к 12-колоночной вертикальной сетке как наиболее эффективному и распространенному методу в веб-дизайне и задействовали блочную вёрстку, сохраняя традиции исходного ресурса и принимая во внимание удобство перемещения блоков в зависимости от границ экрана. Формируя расположение рубрикации сайта, мы опирались на различие в диагоналях используемых устройств (как минимум разницу ширины экрана смартфона и планшета), скрывая ее под кнопкой-символом либо наоборот оставляя отображаемой.
В отношении цветового оформления мы стремились к сохранению корпоративного стиля, вследствие чего остановились на трёх цветах (черный, серый и красный), которые, в свою очередь, обеспечивают хорошее зрительное восприятие, сочетая в своей комбинации и контрастность, и отсутствие резко бросающейся в глаза яркости, которая нередко отвлекает от основного текста на иных порталах.
Для того, чтобы версия действительно являлась адаптивной, мы полностью сохрани и двухуровневую архитектуру сайта, поддерживаемую различными элементами навигации, графическое изображение которых является максимально семантически узнаваемым (кнопки «Меню» и «Поиска»). Кроме того, имеется также фиксированная по функционалу и расположению «сквозная ссылка» в виде логотипа портала, позволяющая из любой глубины просмотра вернуться на главную страницу.
В итоге, мы предполагаем возможность дальнейшего развития и апробации проекта адаптивной версии информационно-образовательного портала «Первая линия» с внедрением предложенных дизайн-разработок.



1. Bishop S., Hartman A. Interactive Media Design and Development with Adobe CS6. Delmar Cangage Learning., 2013. — P. 352.
2. Chapko A., Emprich A., Werth D. Prosumerization of mobile service provi-sion: A conceptual approach // Web Portal Design, Implementation, Integra-tion, and Optimization / edited by Jana Polgar and Greg Adamson / Herhey: IGI Global, 2013. — P. 216-229
3. Colpitt F. Minimal Art: The Critical Perspective. Washington: University of Washington Press, 1993. — 284 p.
4. Cyr D., Head M. ,Ivanov A. Perceptions of Mobile Device Website Design: Culture, Gender and Age Comparisons // Web Technologies: Concepts, Me-thodologies, Tools, and Applications: Concepts, Methodologies, Tools, and Applications / edited by A. Tatnall / Hershey, New York, London: Idea Group Inc (IGI), 2009. — P. 245-277.
5. Marzona D. Minimal Art. Berlin: Tashen, 2004. — 96 p.
6. Meyer J. Minimalism: Art and Polemics in the Sixties. Yale University Press 2004. — 340 p.
7. Pernice K.; Whitenton K; Nielsen J. Nielsen Norman Group,How people read on the web : the eyetracking evidence. Fremont, CA : Nielsen Norman Group, 2014. — 355 p.
8. Rosenfeld, Louis, Morville, Peter. Information architecture for the World Wide Web. — O'Reilly & Associates, 2006. — 528 p.
9. Tatnall, Arthur. Encyclopedia of Portal Technologies and Applications. Her-shey, NewYork, London: IdeaGroupInc (IGI), 2007. 1223 p.
10. Большая советская энциклопедия : [в 30 т.] / гл. ред. А. М. Прохоров. — 3-е изд. — М. : Советская энциклопедия, 1969—1978.
11. Васильев И. А. Методы и инструментальные средства построения семантических WEB-порталов: диссертация кандидата технических наук: 05.13.11. Томск, 2005. —190 c.
12. Вроблевски Л. Сначала мобильные! М.: Манн, Иванов и Фербер, 2012.— 176 c.
13. Герчук Ю.Я. История графики и искусства книги. М.: Аспект-Пресс, 2000. — 320 с.
14. Интернет – энциклопедия «Corpcit.ru» // [Электронный источник] URL: http://corpsite.ru/Encyclopedia/Public/Portal.aspx (дата обращения 14.03.2017).
15. Калиновский А.И. Юзабилити - как сделать сайт удобным. М: Новое знание, 2005. — 220 с.
16. Левит С.Я., Гордон А.В., Зверева Г.И. Культурология. Энциклопедия. М.: Росспэн, 2007. Том 1. 1390 с.
17. Маркотт И. Отзывчивый веб-дизайн. СПб.: Питер, 2012. 176 с.
18. Мержевич В. Верстка веб страниц. «Htmlbook.ru»,2011. 378 с.
19. Нильсен Я. Веб-дизайн: книга Якоба Нильсена. СПб.: Символ-Плюс. 2003. — С. 18
20. Нильсон Я., Тахир М. Дизайн Web-страниц. Анализ удобства и простоты использования 50 узлов.Вильямс, 2002. — 496 с.
21. Ньюарк К. Что такое графический дизайн? М.: Астрель, 2005 — 256 с.
22. Пикулевский О.В.Дизайн и культура. Харьков: Гуманитарный центр, 2014 — 316 с.
23. Сырых Ю. А. Современный веб-дизайн. Эпоха Веб 3.0. 2-е изд. – М.: Вильямс; Диалектика, 2013. — 274 с.
24. Якунин А.В. Композиционно-графическая модель веб-сайта как системо-образующий фактор формирования «опыта взаимодействия». // Инновационное развитие: ключевые проблемы и решения. Сборник статей Международной научно-практической конференции. Том 2. Казань, 2015. С. 174-178.
Электронные источники
1. Всероссийский студенческий медиапортал // [Электронный ресурс] URL: http://медиапортал.рф/ (Дата обращения 01.05.2017)
2. Журналист online - веб-портал факультета журналистики МГУ // [Электронный ресурс] URL: http://journonline.msu.ru/
(Дата обращения 01.05.2017)
3. Мегабайт - электронный портал Санкт-Петербургского национального исследовательского университета информационных технологий, меха-ники и оптики // [Электронный ресурс] URL: http://mbradio.ru/
(Дата обращения 01.05.2017)
4. Морошка - молодежный веб-портал Петрозаводского государственного университета // [Электронный ресурс] URL: http://cloudberry10.ru/(Дата обращения 01.05.2017)
5. Политех - новостной веб-портал Санкт-Петербургского политехнического университета Петра Великого // [Электронный ресурс] URL: http://www.spbstu.ru/ (Дата обращения 01.05.2017)
6. Cherwell - портал Оксвордовского университета // [Электронный ресурс] URL: http://www.cherwell.org/ (Дата обращения 01.05.2017)
7. Descriptions of all CSS specifications // [Электронный ресурс] The World Wide Web Consortium / URL: https://www.w3.org/Style/CSS/specs#mediaqueries (Дата обращения 01.05.2017)
8. Global digital population as of April 2017 // [Электронный ресурс] Statista Inc./ URL: https://www.statista.com/statistics/617136/digital-population-worldwide (Дата обращения 14.04.2017)
9. Jake Jeffries.10 Incredible Mobile Marketing Stats 2015. // [Электронный-ресурс] Statista Inc. / URL: http://www.socialmediatoday.com/content/10-incredible-mobile-marketing-stats-2015-infographic (Дата обращения 14.04.2017)
10. Media queries publication history // [Электронный ресурс] The World Wide Web Consortium / URL: https://www.w3.org/standards/history/css3-mediaqueries (Дата обращения 01.05.2017)
11. Mobile Fact Sheet // [Электронный ресурс] Pew Research Center / http://www.pewinternet.org/fact-sheet/mobile/ (Дата обращения 14.04.2017)
12. Nielsen J. Hamburger Menus and Hidden Navigation Hurt UX Metrics [Электронный ресурс] URL: https://www.nngroup.com/articles/hamburger-menus/ (дата обращения 17.04.17)
13. Nielsen J. Usability 101: Introduction to Usability. 2012. // [Электронный ресурс] NielsenNormanGroup / URL: https://www.nngroup.com/articles/usability-101-introduction-to-usability/ (дата обращения: 18.04.2017)
14. Number of smartphone users worldwide from 2014 to 2020 (in billions) // [Электронный ресурс] Statista Inc./ URL: https://www.statista.com/statistics/330695/number-of-smartphone-users-worldwide (Дата обращения 14.04.2017)
15. On line Browsing Platform. Usability of consumer products and products for public use — Part 2: Summative test method. URL: https://www.iso.org/obp/ui/#iso:std:iso:ts:20282:-2:ed-2:v1:en
16. Percentage of all global web pages served to mobile phones from 2009 to 2017 // [Электронный ресурс] Statista Inc. / URL: https://www.statista.com/statistics/241462/global-mobile-phone-website-traffic-share (Дата обращения 14.04.2017)
17. Rivoal F. Media Queries // [Электронный ресурс] The World Wide Web Consortium / URL: https://www.w3.org/TR/css3-mediaqueries/ (Дата обращения 01.05.2017)
18. Share of adults in the United States who owned a smartphone in 2015 and 2016, by age group // [Электронный ресурс] Statista Inc. / URL: https://www.statista.com/statistics/489255/percentage-of-us-smartphone-owners-by-age-group (Дата обращения 14.04.2017)
19. Spectator - портал Колумбийского университета // [Электронный ресурс] URL: http://columbiaspectator.com/ (Дата обращения 01.05.2017)
20. StanfordNews - новостной портал Станфордского университета // [Электронный ресурс] URL: http://news.stanford.edu/ (Дата обращения 01.05.2017)
21.
22. TheHarvardCrimson - портал Гарвардского университета // [Электронный ресурс] URL: http://www.thecrimson.com/ (Дата обращения 01.05.2017)
23. TheHeights - портал Бостонского университета // [Электронный ресурс] URL: http://bcheights.com/ (Дата обращения 01.05.2017)
24. Web Designer Depot. Fight Div-Itis and Class-Itis With the 960 Grid Sys-tem [Электронный ресурс] https://www.webdesignerdepot.com/2010/03/fight-div-itis-and-class-itis-with-the-960-grid-system/ (дата обращения 15.03.17)
25. Адаптивный дизайн. Пособие для разработчиков// [Электронный источник] URL: https://developers.google.com/webmasters/mobile-sites/mobile-seo/responsive-design?hl=ru (дата обращения 14.03.2017).
26. Елманова Н. Web-порталы: классификация и назначение. // [Электронный ресурс] КомпьютерПресс. №6, 2001. / URL: http://compress.ru/article.aspx?id=10932 (Дата обращения 16.04.2017)
27. Мобильная версия сайта или адаптивный дизайн? Пособие для разработчиков// [Электронный источник] URL: https://habrahabr.ru/post/239441/ (дата обращения 14.03.2017).

Работу высылаем на протяжении 30 минут после оплаты.




©2026 Cервис помощи студентам в выполнении работ
.