CC BY
35УДК. 372.853. (075.8)
МЕТОДЫ ПРИМЕНЕНИЕ И АНАЛИЗ В ФОРМИРОВАНИИ WEE-САЙТОВ
Сапарбаев Т., Малик Ж.Б., Таутанова Г. Б.
Кокшетауский университет им. Абая Мырзахметова (г. Кокшетау, Республика Казахстан)
Аннотация. В данной работе было ознакомление с последними тенденциями развития сайта в мире, построение и его новые методы в современной реализации web-сайтов и web-приложении, а также инструкции по оптимизации поисковых систем, включая техническое обслуживание и продвижение, а также другие ключевые этапы разработки.
Ключевые слова: клавишы, разработчик, инструмент, web-сайт, фирма, компания, макет, слой, браузер, дизайнер.
В настоящее время интернет-технологии совершенствуются таким образом, что они имеют сильное влияние на развитие любого вида бизнеса. Для многих фирм, их web-сайт стал источником дополнительного дохода, даже если эти компании напрямую не связаны с цифровыми технологиями. Гораздо удобнее для компаний использовать электронную систему денежных переводов, а также огромное разнообразие рекламы на социальных платформах и обучать своих сотрудников с помощью онлайн конференции и тренингов, экономия время и деньги на их обучение.
На данный момент на предприятии и учреждении нет подобного сайта, который собирал бы на одной странице все необходимые данные, используемые для работы. Поэтому разработанные сайты, на котором для более быстрой и удобной работы, размещены ссылки на часто используемые сайты, а также номера технической поддержки, контактная информация, сведения о предприятии и другая полезная информация. Web-сайты стали неотъемлемой составляющей любого делового бизнеса или учреждения, поэтому для того, чтобы быть конкурентоспособным и иметь успешный бизнес, предприниматель тоже должен быть следить за инновациями. Таким образом, это необходимо для того, чтобы предприниматель мог использовать все возможные способы для достижения поставленной цели: конкурентоспособность компании и повышение ее рентабельности. Для обеспечения того, чтобы сайт был действительно эффективным бизнес-инструментом, нужно действовать точно в соответствии с поставленными целями, которые могут быть разными, т.е. прямые продажи, информация для клиентов, поиск партнеров, реклама и т.д.
В настоящее время во многих литературах рассмотрены весь спектр вопросов по продвижению web - сайтов: подбор ключевых слов, написание оптимальных продающих текстов, увеличение ссылочной популярности и многое другое. Затронуты также и узкоспециальные темы, такие как фильтры поисковых систем, продвижение с региональной спецификой и т.д. Новое издание признанного бестселлера, описывающее как клиентские, так и серверные аспекты web-разработки очень полезно для разработчиков web-сайта «Создаем динамические web -сайты с помощью PHP, MySQL, JavaScript, CSS и HTML5» [1].
На данном сайте будет предусмотрена форма для обратной связи с специалистами информационной технологии. Если на рабочем месте сотрудник обнаружит неисправность, то он может оставить свои данные и описать проблему, свяжутся и по возможности, удалённо исправят проблему. Для создания макета сайта можно использовать программу Adobe Photoshop CC 2018. Adobe Photoshop является одним из лучших графических редакторов, он применяется для изменения и разработки различного вида графики. Для работы есть большое количество инструментов, а также различных функций и эффектов. В программе Adobe Photoshop создаём новый документ. Далее определяем рабочую область для нашего макета. С помощью комбинации клавиш Ctrl+A выбираем весь документ целиком, затем переходим в меню Select> Transform Selection. Сокращаем выделение до нужного количества пикселей в ширину. Это и будет рабочая
область нашего макета. Для того, чтобы мы могли ровно располагать элементы на макете, добавляем направляющие линии к выделенному элементу. Чтобы добавить подсветку в заголовок, мы создаём новый слой, нажав Ctrl+Alt+Shift+N выбираем мягкую кисть диаметром 600 пикселей. Затем устанавливаем для кисти цвет #19535a и просто нажимаем один раз на центр заголовка. Нажимаем клавишу Delete, чтобы удалить выбранную часть и сжимаем его вертикально, нажав Ctrl+T. Нужно убедиться, что выделенное пятно идеально центрировано по отношению к заголовку. Выбираем слои, заголовок и выделяем их, а затем нажимаем "V", чтобы переключиться на инструмент перемещения. На панели параметров и выбираем кнопку «выровнять горизонтальные центры».
Создаём новый слой, рисуем линию выделения в один пиксель с помощью инструмента карандаш. Плавно скрываем края с помощью градиентной маски. Выбираем инструмент градиент и создаём нижеприведенный градиент на панели параметров. Теперь создаём простой шаблон проверки и применяем его к заголовку. Выбираем инструмент карандаш, устанавливаем размер на два пикселя и добавляем две точки, которые касаются друг друга углами. Выключаем фон и выделяем точки. Выбираем "Правка", а затем нажимаем "Определить Шаблон".
Создаем новый слой и помещаем его под слоем выделения. Выбираем область, в которой мы хотим применить шаблон. Нажимаем "Shift+F5", чтобы загрузить диалоговое окно заливки. Выбираем только что созданный шаблон. Добавляем маску слоя к слою шаблона. Берём мягкую кисть и рисуем большой мягкой кистью. Выбираем #ffffff для цвета кисти. Уменьшаем непрозрачность кисти примерно до 60 процентов и наносим наш цвет. Можно будет позже изменить непрозрачность слоя на своё усмотрение. В web-сайт добавим логотип, подсветку, которая остается за логотипом. Возьмём мягкую кисть со светлым оттенком и добавляем пятно. Скачиваем недостающие шрифты, которые будут использоваться при создании сайта.
В Интернете можно найти большое количество привлекательных бесплатных шрифтов.
Добавляем навигационные ссылки. Создаём кнопку навигации, используя инструмент "прямоугольное выделение". Делаем заливку цветом и уменьшаем непрозрачность.
Для просмотра фотографий в увеличенном виде, выбираем область и заполняем выделение тёмными тонами. Помещаем изображения, которые будем использовать. Закрепляем его на базовом слое, который был создан ранее. Теперь добавляем эффект тени к слайдеру. Создаём новый слой, выбираем инструмент "кисть", устанавливаем цвет кисти на #000000 и кликаем 1 раз. Наносим немного гауссовского размытия, чтобы смягчить края. Выделяем нижнюю половину тени и удаляем ее. Перемещаем тень чуть выше ползунка и сжимаем его вертикально. Затем выравниваем его по центру ползунка. Выбираем оба слоя и на панели параметров нажимаем кнопку "выровнять горизонтальные центры". Дублируем тень и поворачиваем ее вертикально. Помещаем её на нижний край ползунка. Создаём кнопки управления, используя инструмент "прямоугольная область". Выбираем цвет и понижаем непрозрачность кнопок до 50%. Открываем "произвольные фигуры" на панели параметров и выбираем стрелку. Добавляем несколько строк текста, текст для приветствия, название и некоторое описание сайта. Также можно создать градиент от светло-серого до белого цвета, для этого нужно создать новый слой под заголовком и применить градиент. Можно создать элементы управления вращением слайдера и применить тень внутри объекта для того, чтобы обозначить активный элемент. Чтобы создать "разделителя контента" выбираем инструмент карандаш и рисуем линию размером 1 пиксель. Выбираем светло-серый цвет и плавно скрываем края с помощью градиентной маски. Добавляем основной контент, наполняем содержанием. Используя сетку, добавляем текст в нужные нам колонки. При использовании модульной сетки страница будет разбита на равные столбцы, которые будут одинаково удалены друг от друга. Добавляем некоторые популярные сервисы, помещаем значки из набора значков функций. Поддерживаем равномерное расстояние между объектами. Создаём кнопку, для этого на новом слое формы нам нужно будет выбрать инструмент "Rounded Rectangle", чтобы нарисовать фигуру. Применяем наложение градиента и обводку к кнопке, копируем кнопку и устанавливаем в нужные места. Затем добавим несколько форм для размещения фотографий и устанавливаем изображения на этих формах. Можно по желанию добавить тень, как делали раньше, а потом поместить ее под формами. Добавляем часть описания
сайта. Можно также добавлять значки для ссылок на социальные сети, создаём форму для арт и форму для обратной связи. Создаем footer, заливаем его одним цветом и добавляем текст. Наконец, добавляем навигацию по нижнему колонтитулу и информацию об авторе разработчика сайта. Можно просмотреть и исправить то, что нас не устраивает.
В Интернете просто огромное количество различных ссылок. Почти все, на что вы нажимаете во время поиска информации в интернете - это ссылка, которая ведет вас на другую страницу внутри web-сайта, который вы посещаете, или на внешний сайт. Ссылки создаются при помощи тега <a>, как и предыдущие, тоже имеет закрывающийся тег </a>, чтобы заставить ссылку работать, нужно будет прописать дополнительные атрибуты [1, стр-50]. Для того, чтобы создать ссылку на официальный сайт, прописать надо следующее: <a href="https://gov4c.kz/ru/">Официальный сайт</а>, где, первая часть атрибута указывает на страницу, которая откроется после нажатия на ссылку. Между тем, вторая часть атрибута содержит текст, который будет отображаться посетителю, чтобы побудить его нажать на эту ссылку. Существуют так называемые якорные теги, которые помогают перемещаться к заданному месту страницы. Также при помощи ссылок, можно переходить к отдельным страницам своего сайта. Для удобства мы можем поместить файлы в одну папку и в атрибутах тега <а>, прописать путь нужной страницы. Для того, чтобы поместить изображение на сайт, будем использовать тег <img>. Тег <img> содержит все необходимое для отображения изображений на сайте. Подобно элементу <a>, <img> также содержит атрибут. Этот атрибут содержит информацию для нашего компьютера относительно источника, высоты, ширины и дополнительного текста изображения. Для вставки изображения на сайт, нужно также указать путь к данному файлу и его расширение. Зачастую используются типы файлов, такие как: формат JPG, .png, .gif и другие.
Альтернативный текст нужен для того, элемент имел описание и была возможность его найти через поисковые сайты, а также как дополнительное описание. Сохраняем изображение нужного нам формата в той же папке, где хранится файл index.html. Тег <img> не имеет закрывающийся тег и записывается следующим образом:
<img src="img/123.jpg" alt-'описание изображения" height="X" width="X">. После того как мы задали путь, добавили описание, нужно указать высоту и ширину нашего изображения в пикселах. После чего сохраняем наш файл, переходим в браузер и обновляем страницу, чтобы просмотреть то, что у нас вышло. Еще один вопрос, который нужно рассмотреть, - это сколько вариантов дать посетителям сразу. Многие меню, которые мы видим в интернете, стараются сделать так, чтобы каждая страница сайта была доступна из одного меню. Именно здесь появляются скрипты и хитрость CSS, так как вы можете сделать меню более управляемым, скрывая определенные части до тех пор, пока пользователи не выберут определенные области сами.
В заключении в данной работы было ознакомление с последними тенденциями развития сайта в мире, построение и его новые методы в современной реализации web-сайтов и web-сайтов приложения, а также инструкции по оптимизации поисковых систем, включая техническое обслуживание и продвижение, а также другие ключевые этапы разработки. Область web-разработки - это не только кодирование и знание тегов и функций, она включает в себя различные виды процессов, такие как создание web-дизайна, программирование на стороне клиента и сервера, разработка и продвижения web-сайта, а также его безопасность и оптимизация. В крупных компаниях для создания сайта имеется ряд специалистов из разных областей, такие как: web-дизайнер, web-разработчик, SEO-консультант [2]. Но каждому будет полезно знать все процедуры по созданию и реализации web-сайта, хороший сайт может принести много пользы предприятию и пользователю
Библиографический список
1. Г Никсон, Р. Создаем динамические веб-сайты с помощью PHP, MySQL, JavaScript, CSS и HTML5 / Р. Никсон. - Москва: Машиностроение, 2016. - 688 c
2. Горяев К. Искусство продвижения сайта. Полный курс SEO от идеи до первых клиентов / К. Горяев. - Вологда: Инфра-инженерия, 2017. -268 с.
3. Грушевская В. Ю. Применение метода цифрового сторителлинга в проектной деятельности учащихся / В. Ю. Грушевская // Педагогическое образование в России. - 2017. - № 6. - С. 38-43.
4. Кажарнович С. SEO на результат. Простые методы продвижения в Интернете / С. Кажарнович. - Санкт-Петербург: Питер, 2017. - 320 с.
5. Ланщикова Г. А. Применение метода сторителлинга в обучении студентов-дизайнеров предпроектному анализу / Г. А. Ланщикова //Вестник Омского государственного педагогического университета. Гуманитарные исследования. - 2017. - № 4 (17). - С. 112-115.
Сапарбаев Тажибай, доктор PhD, заведующий кафедрой Информационной Системы и Информатики, Кокшетауский университет им.Абая Мырзахметова (Республика Казахстан, г. Кокшетау).
Малик Жанибек Бакыитжан улы, магистрант, кафедры Информационной Системы и Информатики, Кокшетауский университет им.Абая Мырзахметова (Республика Казахстан, г. Кокшетау).
Таутанова Гульназ Бегалиевна, магистрант кафедры Информационной Системы и Информатики, Кокшетауский университет им. Абая Мырзахметова (Республика Казахстан, г. Кокшетау).
