CC BY
40
УДК 004.031.4
ИСПОЛЬЗОВАНИЕ СОВРЕМЕННЫХ ТЕХНОЛОГИЙ ВЕРСТКИ В ИЗВЕСТНЫХ СОЦИАЛЬНЫХ СЕТЯХ
М. Р. Киба, А. А. Сорочкина
Донской государственный технический университет, Ростов-на-Дону, Российская Федерация
damsel 91@mail.ru sorochkina.anastasya@mail.ru
В данной статье подробно рассмотрены современные технологии и тенденции в области верстки веб-сайтов. В частности, проведен сравнительный анализ технологий верстки популярных социальных
сетей - «вконтакте» и Facebookмобильных и ПК-версий.Анализ проведен на основе изучения исходного кода страниц социальных сетей Проанализированы предпосылки дальнейшего развития технологий верстки для крупных веб-сайтов и социальных сетей.
UDC004.031.4
THE USE OF MODERN LAYOUT TECHNOLOGIES IN POPULAR SOCIAL NETWORKS
M. R. Kiba, A. A. Sorochkina
Don State Technical University, Rostov-on-Don, Russian Federation
damsel 91@mail.ru sorochkina.anastasya@mail.ru
This article describes modern technologies and trends in the field of layout websites. In particular, the authors have conducted the comparative analysis of layout techniques of popular social networks - "VKontakte" and Facebook of mobile and PC versions. The analysis was conducted by examining the source code of social networks pages. Also the preconditions for further development of layout technologies for large web sites and social networks were analyzed.
Ключевые слова: верстка, социальные сети, Keywords: layout, social nets, adaptability, адаптивность, «вконтакте», facebook. "VKontakte", facebook
Введение. Цитата: «Мы жили в деревнях. А потом в городах. Теперь будем жить в интернете» становится отражением текущей действительности, т.к. спрос на интернет-коммуникации становятся все более и более высоким.
Социальные сети вошли в нашу жизнь, коренным образом преобразовав ее. Если раньше люди общались друг с другом в живую, то сейчас для этого не нужно выходить из дома -ноутбук или смартфон всегда под рукой. Социальные сети — большой технологической прорыв,благодаря которому люди имеют возможность контактировать с друзьями, просматривать новости, смотреть фильмы, слушать музыку, делиться этим с другими пользователями, принимать участие в дискуссиях, создавать группы по интересам, формировать сообщества и т.д. Все эти возможности предоставлены в то же время на одном сайте.
На текущей момент времени, из за большой популярности социальных сетей возникла необходимость в их адаптивности. Это связанно с тем, что все больше людей пользуются мобильным интернетом. В первую очередь, это связано с приходом современных, быстрых и удобных мобильных устройств - телефонов и планшетов. Во-вторых, с общедоступностью мобильного интернета. Поэтому весьма субъективно наметилась тенденция интенсивного роста мобильного трафика, а в связи с этим и острая потребность создания мобильной версии сайта.
Множество пользователей на данный момент предпочитает пользоваться именно мобильным интернетом, помимо привычной версии ПК. Мобильные приложения не всегда удобны, например:
• контент мобильного приложения не будет автоматически обновляться, это надо делать самостоятельно;
• потребность в стабильной поддержке приложения. В таком случае надо отслеживать, чтобы приложение исправно работало на всех устройствах;
• эксплуатация мобильного приложения стоит дороже по сравнению с созданием мобильной версии сайта.
Анализ современных технологий верстки. В силу этих тенденций существует потребность проанализировать текущие технологии, которые используются для верстки популярных социальных сетей.
На данный момент в верстке используются в основном блочные технологии. Совсем недавно большой популярностью пользовались табличные сайты, однако, блочные вытеснили их практически полностью.
Плюсы блочной верстки в сравнение с табличной
• все свойства задаются при помощи стилей, что разгружает HTML код;
• слои можно накладывать друг на друга;
• намного быстрее происходит загрузка страниц. Минусы табличной html верстки:
• таблицы не могут накладываться друг на друга, это создает проблемы при верстке трудных по дизайну страниц;
• большое число таблиц усиливает шанс появления ошибок при верстке, увеличивает размер документов и уменьшает скорость загрузки файлов;
• браузеры рассматривают таблицу как один предмет, из-за чего содержимое таблицы не отображается до тех пор, пока оно целиком не будет загружено на ПК[1].
К современным языкам и технологиям вертски можно отнести: HTML(HyperTextMarkupLanguage) —язык разметки гипертекстовых документов. CSS3 — это новая версия каскадных таблиц стилей СББ.В CSS3 появилась масса новых возможностей, которые в разы упрощают огромное количество задач по сравнению с css. HTTP - этоНурег-TextTransferProtocol протокол передачи гипер-текста, посредством него грузятся почти все веб-сайты
Javascript - это язык программирования, с помощью которого веб-страницам придается интерактивность. С его поддержкой создаются приложения, которые включаются в HTML-код (например, анкеты или формы регистрации, которые заполняются пользователем)[2].
В частности, данные технологии напрямую используются для верстки многих современных сайтов. В число этих сайтов входят не только рядовые сайты-визитки, каталоги, но и интернет-магазины, крупные порталы и даже социальные сети.
Не смотря на огромную загруженность поддерживающих серверов, ежедневные обращения многомиллионной аудитории, социальные сети должны предоставлять быструю, адаптивную информацию в удобном формате. Всего этого можно достичь с помощью современных технологий верстки.
"ВКонтакте" — самая популярная социальная сеть в России.
Мобильная версия Вконтакте отличается комфортом управления с телефона и интересным интерфейсом, созданным специально для мобильной платформы. Чтобы сделать сайт удобным для мобильных пользователей, некоторые веб-специалисты создают отдельные сайты.
Преимущества создания мобильной версии сайта:
• мобильная версия гораздо комфортнее просматривается на разных устройствах, несмотря на разрешение экрана;
• объём памяти,который занимает работа мобильной версии грузится заметно быстрее обычного сайта;
• мобильная версия сайта адаптирована к управлению клавишами технологией тач-скрин;
• несложно ориентироваться: структура навигации и контента обдуманы для задач, осуществляемых мобильными пользователями;
• легко вносить преобразование в мобильные и обычные сайты: Изменения могут касаться только мобильной версии или только обычной версии[4].
Вывод разных HTML и CSS на одном URL. Этот способ создания мобильных сайтов использует кодирование на стороне сервера, чтобы создать CSS и HTML для разных устройств. Следовательно, мобильные пользователи приобретают один комплект кода, в то время как для пользователей компьютеров выводится другой комплект. Это сделано с целью усилить эффективность сайта и лучше всего это работает в тандеме с адаптивной версткой.
Анализ верстки популярных социальных сетей.В мобильной версии «Вконтакте» используется сочетание XHTML и CSS3, оптимизированное для мобильной версии, в то время как для пк версия использует существенно больше HTTP запросов и JavaScript. Навигация также специально продуманна конкретно для мобильных задач.
«ВК»создан при помощи блочной верстки со строчно-блочными элементами. Это означает, что страница делится на много блоков, которые делятся на еще более мелкие конструкции . На этой стадии дерево сначала считывает все элементы и их селекторы,затем располагает их в соответствии с тем, как это указано в таблице стилей.
vk.com
head body
CSS3 htmls JavaScript
m.vk.com
head body
CSS3 xhtml JavaScript
Рис.1 .Схематическая структура используемых технологий верстки в Ук
В коде также присутствуют прификсы для отображения страницы в разных браузерах:
• для 1п1егпе1Бхр1огег 9 требуется указание префикса -шб-;
• для БпеЮх требуется указание префикса -шо2-;
• для Chrome и Safari требуется указание префикса -webkit-;
• для Opera требуется указание префикса -о
Что касается Facebook, то он написан с помощью технологий HTML5.
HTML5 - это свободная платформа, предназначенная для создания веб-приложений использующих аудио, видео, графику, анимацию и многое другое.
Помимо этого для программирования сайта социальной сети Facebookиспользуетсямного Javascript-сценариев, это сказывается на скорости загрузки страницыне в лучшую сторону, страница грузится на порядок медленнее .
Facebook также как «ВК» написан при помощи блочной верстки так как она намного удобнее и функциональнее табличной.
Мобильная версия же сверстана при помощи html4.
HTML 4 расширяет HTML механизмами таблиц стилей, сценариев, фреймов, внедрённых объектов, усовершенствованной поддержкой текста левого и правого направлений, сложными таблицами и улучшениями в формах, увеличением доступности для людей с физическими недо-статками[4].
Facebook.com
head body
CSS3 htmlS
m.Facebook.com
head body
CSS3 html4 JavaScript
Рис.2. Схематическая структура используемых технологий верстки в Facebook
Вывод. На данный момент в современной верстке приветствуется адаптивность. Пользователи, посетившие сайт с телефона, должны увидеть тот же самый контент, который отображается при просмотре сайта на экране обычного компьютера, и при этом не испытывать дополнительных проблем. Применение адаптивного дизайна и верстки позволяет наиболее результативно работать с мобильным трафиком, предоставляя наибольший комфорт использования сайтом.
Также мы пока не можем отказаться полностью от html4 в силу различных факторов, в том числе в силу того, что на данный момент далеко не все браузеры поддерживают 5 версию html, особенно мобильные браузеры.
На сегодняшний день наиболее актуальная версия CSS это CSS3, которая предельно расширена по сравнению с другими версиями. Намного легче икомфортнее стала работа с анимацией - теперь для ее создания удовлетворяют возможности самой CSS3, теперь не нужно работать с
языком JavaScript. Помимо этого, новые технологии предусматривают адаптивность блоков сайта под устройство, с которого совершается заход.
Именно эти современные технологии используются сейчас повсеместно в верстке, чтобы создавать для пользователей адаптивные, интересные, полноценные интернет-магазины, крупные порталы и социальные сети.
Библиографический список
1. Асхатова, Л.И., Развитие языков разметки / Л. И. Асхатова, Г. Э. Раифович, Г. И. Масхутович // APRIORI. Серия: естественные науки. — 2015, №2. — С. 1-5.
2. Мержевич, В. А. Самоучительно по HTML / В. А. Мержевич. — Москва, HTML-BOOK.RU, 2010 — 97 с.
3. Сравнение методов создания мобильной версии сайтов. / Мир компьютерных информационных технологий. — Режим доступа: http://komputer-helps.ru/internet-soft/16193(дата обращения: 25.04.2016)
4. Куропатина, Е.М., Актуальность мобильной версии сайта / Е. М. Куропатина, А. И. Виноградова // Актуальные проблемы авиации и космонавтики — 2014, №10, Т.2
