СПИСОК ИСПОЛЬЗОВАННЫХ ИСТОЧНИКОВ
МИНОБРНАУКИ РОССИИ
Федеральное государственное автономное образовательное
учреждение высшего образования
«Южный федеральный университет»
| Направление подготовки 09.03.03 "Прикладная информатика" |
Проект на 1 курсе
Разработка сетевого ресурса
"ИНТЕРФЕЙСЫ И ПЕРЕВОДЧИКИ"
Пояснительная записка
Выполнили студенты 1 курса группы 7
______________________ Кравчук Л.К
подпись
_____________________ Федотова В.С.
подпись
Ростов-на-Дону
2018
СОДЕРЖАНИЕ
ВВЕДЕНИЕ. 3
Характеристика информационного ресурса. 3
Техническая реализация. 4
Вывод о проделанной работе. 10
СПИСОК ИСПОЛЬЗОВАННЫХ ИСТОЧНИКОВ.. 11
ВВЕДЕНИЕ
Цель: создание адаптивного сетевого ресурса для размещения рефератов в удобном для чтения виде.
Процесс:
1. Независимый сбор информации о современных способах создания сетевых ресурсов
2. Анализ и совместный выбор способа для создания адаптивного сайта
3. Создание макета адаптивного сайта
4. Верстка шаблонов для разных страниц и их адаптаций к разным экранам
5. Наполнение шаблонов информацией
6. Тестирование и исправление ошибок.
В работе над проектом участвовали Федотова Виктория и Кравчук Лилия. Все действия осуществлялись совместно или индивидуально, но с дальнейшим объединением и обсуждением полученных результатов.
|
|
|
Характеристика информационного ресурса
Для размещения информации в легком для восприятия виде было принято решение создать страницы двух типов: главную (рисунок 1)и текстовую (рисунок 2).
Рисунок 1 — Главная страница
Рисунок 2 — Текстовая страница
Цель главной страницы— лаконично показать пользователю какую информацию можно найти на текстовых страницах. Поэтому эта станица содержит название сайта, название рефератов и их содержание. Причем каждый заголовок является ссылкой на соответствующий документ или его фрагмент, чтобы обеспечить быстрое перемещение к заинтересовавшей пользователя информации.
Цель текстовой страницы—представить информацию реферата в удобном для восприятия виде. Страницы такого типа содержат:
· Название всего сайта, которое является ссылкой на главную страницу;
· Два меню: первое — ссылки на страницы с каждым из рефератов, второе — навигационное меню по странице, то есть ссылки на фрагменты доклада. Причём меню занимает фиксированное положение на экране, то есть всегда остается в одной области экрана независимо от перемещения по странице, что позволяет облегчить возможность обращения к нему во время нахождения на любом месте страницы;
|
|
|
· Текст реферата, разбитый подзаголовками на разделы;
· Нижний колонтитул с контактной информацией.
Техническая реализация
В настоящее время сайты создаются одним из трёх способов[1]:
1. с помощью конструкторов сайтов;
2. с помощью CMS — систем управления контентом;
3. с помощью языков программирования, то есть HTML и CSS длясоздания разметки и PHP или JavaScript для создания анимация.
Достоинствами конструкторов сайтов является предоставление хостинга, домена самим конструктором после регистрации, удобное и понятное управление, техническая поддержка. К недостаткам конструкторов сайтов можно отнести ограниченное количество бесплатных шаблонов и возможностей без дополнительной платы, существование сайта только на хостинге сервиса без возможности переноса на другой или другоеизвлечение из этой системы [2].
Преимуществами считается отсутствие необходимости обладать каким-либо знаниями в программировании, наличие большого количества бесплатных шаблонов и функций, простое и быстрое создание сайта. Недостатками являютсясложность решения нетипичных задач, не уникальность создаваемого сайта, загруженность кода [3].
|
|
|
Преимуществами создания сайта с помощью языков программирования является уникальность, легкость приспособления под специфические нужды, присутствие в коде только того, что действительно используется, что ускоряет его загрузку. Недостатки — необходимость знание языков программирование, большая затрата времени и сил по сравнению с конструкторами сайтов и CMS [4].
Так как требуется создать сайт, на котором будут размещены рефераты, было принято решение, что наиболее подходящим вариантом будет статический сайт. Он позволит сконцентрировать внимание пользователя на содержании рефератов, а не дополнительных возможностях и анимации. Для подобной задачи вполне рационально использование написание сайта на языке разметки HTML и CSS.
Начальные знания по написанию сайтов с использованием этих языков были получены в первом семестре на занятиях по Основам программирования, так же дополнительно, с помощью сети интернет, были изучены способы применения CSSGrid [5]. Таким образом информационно-сетевой ресурс, а именно статический сайт был создан в NotePad++ с использованием модульной сетки CSS Grid для удобства размещения отдельных элементов сайта на странице.
|
|
|
«Модульная сетка» для веб-сайтов заимствована из полиграфического дизайна. Она улучшает использование сайтов и упрощает их верстку [5].
Модульная сетка, представляет собой разметку единой схемы, расположения всех элементов и блоков на странице. То есть, она накладывается на каркас веб-страницы, тем самым создавая визуальный порядок всех ее элементов.
Сетки бывают простые, сложные, фиксированные, динамические ит.д. До возникновения сеток, использовались нарезки графических элементов с дизайнами страницы, которые компоновались с использованием табличной верстки. В настоящее время в современном дизайне существует возможность разбить страницу по модульной сетке на блоки. Тем самым заранее устанавливаетсяположение блоков для разных разрешений экрана [5].
Существуют различные способы создания модульной сетки. Модульную сетку можно написать как полностью обособленно, так и задействовав готовые библиотеки. Самые популярные Gumby и Bootstrap. Так же с середины 2017 года стал полноценно поддерживаться различными браузерами модуль CSS Grid [5].
Одним из преимуществ CSS Grid является то, что для его работы не нужны особые настройки и подключение сторонних библиотек, так как это полноценный модуль, внедренный в CSS. Исходя из этого, было принято решение использовать его.
Для удобства расположения информации на странице, были использованы Grid контейнеры. Grid контейнер — блочный элемент, занимающий только то пространство, которое необходимо для размещения внутри всех элементов [5].
С помощью свойства grid-template-areas был определен шаблон сетки.Ссылаясь на имена областей, которые задавались с помощью свойства grid-area, было задано их расположение,описанное в сss.
Отдельные объекты страницы помещены в тег <div> с указанием атрибуту classопределенного имени. Элементы разных классов определены как разные блоки, что позволяет сделать схематическую модель сайта, причем разную для экранов с разным разрешением. Например, рисунок 3, рисунок 4,рисунок 5 и рисунок 6.
Рисунок 3— Расположение блоков на больших экранах (в CSSдокументе)
Рисунок 4— Расположение блоков на больших экранах (на сайте)
Рисунок 5 — Расположение блоков на экранах менее 740px (в CSS документе)
Рисунок 6— Расположение блоков на экранах менее 740px (на сайте)
Для названия сайта использован тег <h1>. Для лучшего выделения заголовка в CSS описаны конкретные параметры тега <h1>, такие как размер, шрифт, расположение.
Заголовки докладов помещены в тег <h2>, особые свойства которого тоже описаны в CSS.
Для создания ссылок на странице использован тег <a>с атрибутом href, который задает адрес документа, на который осуществляется переход.
Для быстрого перехода к определенному месту файла в начале новых разделов расставлены "якоря" <a name="1"></a>, а в навигационном меню — ссылки на них: <<a href="#1"></a>.
Для выделения закладки сайта из других закладок на ней размещен логотип ФВТ: <link rel='icon' href='fvt.jpg'>, как показано на рисунке 7.
Рисунок 7—Логотип ФВТ на вкладке
Маркированный список сформирован тегом <ul>, а каждый пункт списка тегом <li>.Для изменения стиля маркера использован атрибут type тега <ul>( type="circle").
Нумерованный список создан с помощью тега <ol>, пункты —<ul>.Код представлен на рисунке 8.
Рисунок 8—Код нумерованного списка
Оформление списка насайте показано на рисунке 9.
Рисунок 9—Нумерованный список
Заголовки разделов в докладе помещеныв тег<h3>. Так же для заголовков использованы такие теги: <em> — курсивное начертание, <b>— жирное начертание текста. Код можно увидеть на рисунке 10, а как это выглядит на сайте на рисунке 11.
Рисунок 10—Пример кода
Рисунок 11—Вид на сайте
Каждый абзац текста находится в теге <p>, в CSS указано смещение красной строкис помощью свойства text-indent. Результат использования тегов показан на рисунке 12.
Рисунок 12—Красная строка
Изображения так же помещены в тег <p> и заданы классом img (class="img") для задания особого расположение изображения на странице, без изменения расположения текста. Оптимальные размеры каждого изображения заданы различными значениями для атрибутов width, height, расположение на странице отрегулировано с помощью значения атрибута align и отступы от текста с помощью vspace и hspace. Пример показан на рисунке 13.
Рисунок 13—Расположение картинок в тексте
Вывод о проделанной работе
Был создансетевой ресурс для размещения информации в удобном для чтения виде.
На первом этапе был произведен сбор информации из различных источников о способах создания сетевых ресурсов. После рассмотрения всех плюсов и минусов того или иного способа, был выбран наиболее подходящий.
Далее был разработан макет адаптивного сайта с помощью модуля CSS Grid. И после описания всех свойств, был достигнут желаемый результат.
Так как в настоящее время существует огромное количество электронных носителей с различными характеристиками и параметрами экранов, было решено создать сайт, который будет адаптивен к различным экранам. Свойства CSSGridпозволяют решить эту задачу.
Наполнение шаблонов информацией было выполнено за счет ранее подготовленных рефератов по предмету «Введение в проектную деятельность».
Тестирование сайта выявило ошибки и недочеты, которые впоследствии были успешно устранены.
СПИСОК ИСПОЛЬЗОВАННЫХ ИСТОЧНИКОВ
Для создания сайта:
1. Способы создания сайта. URL:http://prog-blog.ru/articles/ways-to-create-a-site/(дата обращения 31.03.2018)
2. Плюсы и минусы конструкторов сайтов. URL:https://yura-blog.ru/likbez/plyusy-i-minusy-konstruktorov-sajtov.html(дата обращения 31.03.2018)
3. Плюсы и минусы CMS - движков. URL: https://iq-project.ru/info/prosand-cons-of-cms(дата обращения 31.03.2018)
4. Как сверстать веб-страницу. Часть 1. URL:https://m.habr.com/post/202408/(дата обращения 31.03.2018)
5. Что лучше CSS Grid или Bootstrap. URL: https://dwstroy.ru/video/azbuka-ot-a-do-css/css-grid-bootstrap/ (дата обращения: 22.04.2018)
6. Как быстро спроектировать сайт с помощью CSS Grid. URL : https://m.habrahabr.ru/company/edison/blog/343796/?utm_source=vk.com&utm_medium=social&utm_campaign=%5Bperevod%5D-kak-bystro-sproektirovat-sayt (дата обращения: 22.04.2018)
7. Справочник по html.URL:http://htmlbook.ru/html (дата обращения 29.04.2018)
История графического интерфейса:
1. Эволюция дизайна интерфейсов операционных систем с 1981 по 2009 годы. URL:https://habrahabr.ru/post/54469/ (дата обращения 21.10.2017 19:11)
2. Евгений Патий. 19 ступеней вверх, или История графических пользовательских интерфейсов.URL: http://smoking-room.ru/data/pnp/gui_history/ (дата обращения 22.10.2017 13:39)
3. Операционная система Windows. Общая характеристика. URL:http://bukvi.ru/computer/operacionnaya-sistema-windows-obshhaya-xarakteristika.html (дата обращения 24.10.2017 20:29)
4. Windows 10.URL:https://ru.wikipedia.org/wiki/Windows_10 (дата обращения 24.10.2017 20:31)
Принципы работы программ-переводчиков:
1. Обзор программ и сервисов-переводчиков. URL:http://mirsovetov.ru/a/hi-tech/software/translation-software.html (дата обращения 24.10.17 23.27)
2. Программы переводчики. URL:https://www.kazedu.kz/referat/191455 (дата обращения 24.10.17 23.27)
3. Программы для перевода.URL:http://www.rusdocs.com/obzor-programm-perevodchikov (дата обращения 24.10.17 23.27)
Дата добавления: 2018-08-06; просмотров: 276; Мы поможем в написании вашей работы! |
Мы поможем в написании ваших работ!