МОДЕРНІЗАЦІЯ ВЕРСТКИ САЙТУ ШЛЯХОМ ВИКОРИСТАННЯ МЕТОДУ АДАПТИВНИХ СІТОК
DOI:
https://doi.org/10.26906/SUNZ.2019.2.099Ключові слова:
верстка, адаптивна сітка, HTML, CSS, 960 Grid System, Grid Layout, флекс-бокси, Бернерс-Лі, фронт-енд, фреймворки, адаптаціяАнотація
Предметом нашого дослідження є вивчення методу швидкої верстки сайту за допомогою адаптивної сітки. У статті представлені матеріали щодо опису структури та переваг використання адаптивної сітки в сучасній верстці сайтів, а також розглянуто переваги застосування технології сіток при адаптуванні сайтів до мобільних платформ. В роботі показано необхідність та ефективність використання нових систем при розробці веб-сайту. В якості інноваційної системи авторами запропоновано адаптивні сітки, так звані “флекс-бокси”. Які підтримуються всіма браузерами і викликають професійний інтерес у великої кількості розробників. Результати – авторами сформовано перелік переваг та недоліків методу використання сіток, наведено рекомендації та аргументи щодо використання принципу “флекс-боксів” на практиці. Розглянуто загальну структуру побудови сіток на прикладі наочного макету, підкреслено роль сіток в дизайні сайтів, а також представлено код для відповідної реалізації. Авторами показано новизну, актуальність, ефективність використання системи сіток та потужність потенціалу “флекс-боксів”. Одним із акцентів роботи є те, що система сіток має високу ступінь мобільності і може бути використана повторно в нових проектах. Висновок – у роботі запропоновано метод верстки сайту на базі адаптивних сіток дозволяє користувачеві підвищити швидкість технології верстки сайту, спростити розробку окремих елементів макету сайту, надати HTML коду більш логічного, зрозумілого вигляду, покращити дизайн сайту, використати можливість адаптування сайту під різні платформи. Авторами в роботі наведено приклади коду сайту для відповідної реалізації.Завантаження
Посилання
Сетки без заморочек. – Режим доступу до ресурсу: https://habr.com/ru/post/149816/.
История создания сайтов - с чего все начиналось. – Режим доступу до ресурсу: https://nischenko.ru/poleznopochitat/istoriya-sozdaniya-sajtov-s-chego-vse-nachinalos.html.
Ічанська Н.В., Моргун Р. Ю. Система керування контентом як основа для створення інтернет-ресурсів // Тези 12 міжн. НТК “ПРОБЛЕМИ ІНФОРМАТИЗАЦІЇ”, 12 – 13 грудня 2018 року, Київ, ДУТ, 2018. – С. 79-80.
Ічанська Н.В., Моргун Р.Ю. ОСОБЛИВОСТІ ВИКОРИСТАННЯ СУЧАСНИХ ВЕБ-ТЕХНОЛОГІЙ ПРИ РОЗРОБЦІ ТУРИСТИЧНОГО САЙТУ // Електронні та мехатронні системи: теорія, інновації, практика: збірник наукових праць за матеріалами IV Міжнародної науково-практичної конференції, 20-21 листопада, 2018 р. / Полтавський національний технічний університет імені Юрія Кондратюка. Полтава: ПолтНТУ, 2018. – с. 43-45.
Ichanska N., Gritsenko A., Shefer V. Development of software service for sale of vehicles // Системи управління, навігації та зв’язку.. – Полтава: ПНТУ, 2018. – Т. 4 (50). – С. 105-108. – doi: https://doi.org/10.26906/SUNZ.2018.4.105 .
Ichanska N.V., Podoshvelev Yu.G., Smitskiy O., Rybachenko K. A quality selection of software to build a service of electronic equipment sales. - Системи управління, навігації та зв’язку. – Полтава : ПолтНТУ, 2018.– № 3 (49). – С. 111-116.
Шефер О. В., Пугач М. В., Скрильник О. М. Алгоритм ідентифікації нелінійних технічних систем за виміряними даними // Вісник Кременчуцького державного політехнічного університету. – Кременчук: КДПУ, 2005. Вип. 3 (32). – С. 203-206.
CSS-фреймворк википедия. – Режим доступу до ресурсу: https://ru.wikipedia.org/wiki/CSS-фреймворк .
PSD макеты для вёрстки сайтов. – Режим доступу до ресурсу: https://tpverstak.ru/psd-mockups/.
10. 960 Grid System - это очень просто. – Режим доступу до ресурсу: https://www.internet-technologies.ru/articles/960- grid-system-eto-ochen-prosto.html .
Гибкие сетки в CSS. – Режим доступу до ресурсу: https://idg.net.ua/blog/uchebnik-css/razmetka-css/adaptivnyjdizajn/gibkie-setki .
Кедлек Т. Адаптивный дизайн. Делаем сайты для любых устройств. ‒ 2013 ‒ С. 39-42.