Разработка информационного веб-сайта (на примере ПАО "Росбанк")

Размещено на http://www.allbest.ru/

Размещено на http://www.allbest.ru/

Колледж Алтайского государственного университета

Отделение экономики и информационных технологий

Отчет

по производственной практике (преддипломной)

РАЗРАБОТКА ИНФОРМАЦИОННОГО ВЕБ-САЙТА (НА ПРИМЕРЕ ПАО «РОСБАНК»)

Найдич В.В.

Барнаул 2019



СОДЕРЖАНИЕ

ВВЕДЕНИЕ

1. ТЕОРЕТИЧЕСКИЕ ОСНОВЫ ПРОЕКТИРОВАНИЯ ВЕБ-САЙТА ДЛЯ ОРГАНИЗАЦИИ ПАО “РОСБАНК"

1.1 Основные направления деятельности ПАО "Росбанк"

1.2 Особенности использования современных информационных технологий в автоматизации деятельности организаций ПАО “Росбанк”

1.3 Особенности создания сайта для организации ПАО “Росбанк”

2. ПРОЕКТИРОВАНИЕ И РЕАЛИЗАЦИЯ веб-сайта для предприятия ПАО “РОСБАНК”

2.1 Анализ требований для сайта ПАО “Росбанк”

2.2 Практическая часть создания сайта для ПАО “Росбанк”

2.3 Тестирование

ЗАКЛЮЧЕНИЕ

СПИСОК ИСПОЛЬЗОВАННЫХ ИСТОЧНИКОВ И ЛИТЕРАТУРЫ

ПРИЛОЖЕНИЯ



ВВЕДЕНИЕ

Преддипломная практика проходила с 20 апреля по 17 мая 2019 года в банковской организации ПАО «Росбанк».

Офис расположен в республике Тува, г. Кызыл, ул. Малахова 21

Разработка информационного сайта проходила в техническом отделе ПАО «Росбанк». На сегодняшний день существуют несколько этапов разработки веб-сайта:

? Проектирование сайта (Сбор необходимых данных и требований. Проектирование интерфейса);

? Разработка креативной концепции сайта;

? Создание дизайн-концепции сайта;

? Проектирование макетов страниц;

? Создание FLASH-элементов и мультимедиа;

? Вёрстка страниц;

? Программирование (разработка функциональных инструментов)

? Оптимизация и размещение материалов сайта;

? Тестирование и внесение корректировок;

? Публикация проекта на хостинге;

? Обслуживание работающего сайта или его программной основы.

В зависимости от текущей задачи, какие-то из этапов могут отсутствовать.

Сайт, или веб-сайт -- одна или несколько логически связанных между собой веб-страниц; также место расположения контента сервера. Обычно сайт в Интернете представляет собой массив связанных данных, имеющий уникальный адрес и воспринимаемый пользователем как единое целое. Веб-сайты называются так, потому что доступ к ним происходит по протоколу HTTP.

Веб-сайт, как система электронных документов (файлов данных и кода) может принадлежать частному лицу или организации и быть доступным в компьютерной сети под общим доменным именем и IP-адресом или локально на одном компьютере. В статье журнала «Хозяйство и право» также было высказано мнение, что каждый сайт имеет своё название, которое при этом не следует путать с доменным именем. С точки зрения авторского права сайт является составным произведением, соответственно название сайта подлежит охране наряду с названиями всех прочих произведений.

Информационный сайт - ресурс, на котором опубликованы инфоматериалы определенной тематики, предназначенные для ознакомления с ними посетителей

Инфосайт может решать разные задачи. Например, общественная организация может использовать такой ресурс для размещения информации о деятельности объединения. Коммерческая компания может вести свой личный блог и рассказывать о своей деятельности. Его тематика должна отвечать тому, чем вы занимаетесь.

Целью практики является создание информационного сайта для банковской организации ПАО «РОСБАНК», который позволит клиентам просматривать перечень услуг, предлагаемых банком. Так же клиент сможет оформить заявку на рассмотрение прямо на сайте.

Предметом производственной практики является автоматизация работы банковской организации, то есть снять с сотрудников банка часть обязанностей и сделать ее автоматической.

Для достижения цели были выявлены следующие задачи:

? проанализировать существующие сайты банков

? изучить структуру ПАО «РОСБАНК

? провести анализ и определить функциональные страницы сайта

? разработать техническое задание для будущего сайта

? Оформление отчета.

? спроектировать внешнюю и внутреннюю структуру сайта

? разработать дизайн интерфейса

? создать программную реализацию сайта

? провести тестирование



1. ТЕОРЕТИЧЕСКИЕ ОСНОВЫ ПРОЕКТИРОВАНИЯ ВЕБ-САЙТА ДЛЯ ОРГАНИЗАЦИИ ПАО “РОСБАНК”

1.1 Основные направления деятельности ПАО "Росбанк"

ПАО «РОСБАНК» - Банковская организация занимающаяся в первую очередь выдачей кредитов, ипотек, так же инвестированием в малое и крупное предпринимательство

Главными целями деятельности банковской организации являются:

- обеспечение эффективного и бесперебойного функционирования системы расчетов;

- защита и обеспечение устойчивости рубля, в том числе его покупательной способности и курса по отношению к иностранным валютам;

- Клиент, который хочет взять кредит на ту или иную покупку обращается к банковской системе, которая в свою очередь смотрит кредитную историю и оценивает платежеспособность заемщика, так же рассматриваются цели взятия суды. Далее, убедившись в выше указанных пунктах, работник банка составляет контракт, который устраивает обе стороны. (рисунок 1)

ПАО “Росбанк” имеет большое количество постоянных клиентов поскольку предоставляет полный спектр банковских услуг. является одним из самых больших банковских организаций.

ПАО “Росбанк” находится 21 год на рынке банковских организаций. В предприятии работают высококвалифицированные специалисты (Администратор, Работник по кредитам, Специалист по инвестированию и т.д.) и качественно выполняют свою работу.

Так же у организации имеется большая клиентская база, которая распространяется по всей России и даже за рубежом.

Одной из причин высокой популярности предприятия ПАО “Росбанк” является грамотная реклама и поиск клиентов.

ПАО “Росбанк” работают разные сотрудники, в зависимости от их специализации:

1) Администратор. Занимается обеспечением работы по эффективному информационно-справочному обслуживанию посетителей и клиентов, созданию для них комфортных условий при посещении банка. Консультация посетителей по вопросам наличия имеющихся услуг, путей решения возникших у них проблем. Принятие мер по предотвращению и ликвидации конфликтных ситуаций.

Рассмотрение претензий и нареканий, связанных с неудовлетворительным обслуживанием посетителей и клиентов и проведение соответствующих организационно-технических, административных мероприятий по их устранению. Осуществление контроля за рациональным оформлением помещений, обновлением и состоянием рекламы в помещениях и на здании. Информирование руководства фирмы, организации об имеющихся недостатках в работе с клиентами, посетителями, и о необходимых мерах по устранению имеющихся недостатков, поднятию имиджа фирмы, организации.

2) Специалист по кредитованию. Его основной задачей является работа с клиентами. Он следит за кредитной историей. Доходами и расходами клиента, таким образом вычисляет максимально возможную сумму суды, процент и сроки возврата.

3) Специалист по инвестированию обеспечивает компанию и клиентов прогнозами на рынке экономических валют. Производит анализ рыночной системы. Озвучивает самые высоко рентабельные возможности вложения денежных сумм. Выявляет возможные причины потери денег. Обеспечивает банковскую организацию клиентской предпринимательской базой.

4) Работник отдела маркетинга. Маркетингом считается любая активность компании или фирмы с целью создания продукции и её дальнейшего сбыта. Основными задачами можно считать сбор и анализ необходимой информации для составления портрета целевой аудитории, поиск УТП, изучение приверженности и ожиданий потенциальных покупателей. Кроме этого, маркетинг помогает понять, какое место предприятие занимает среди прочих компаний данной отрасли.

5) Обслуживающий персонаж, в обслуживающий персонал входят: уборщики, частная охрана. Каждый из них занимается четко отделенной именно ему работой.

Рисунок 1.Взаимосвязи банковской структуры РФ.

Структурой любой организации являются фиксированные взаимосвязи, которые существуют между подразделениями и работниками организации. Ее можно понимать, как установленную схему взаимодействия и координации технологических элементов и персонала. Схема любой организации показывает состав отделов, секторов и других линейных и функциональных единиц.

На эффективность деятельности организации влияют:

? реальные взаимосвязи между людьми и их работой, отражаемые в схемах организационных структур и должностных обязанностях;

? политика руководства и методы, воздействующие на поведение персонала;

? полномочия и функции работников организации на различных уровнях управления (низшем, среднем и высшем).

Рациональная структура организации предполагает комбинацию указанных трех факторов, обеспечивающую высокий уровень эффективности производства.

Структура управления определяется составляющими ее звеньями и иерархическими ступенями управления. Структура должна обеспечивать единство устойчивых связей между ее составляющими и надежное функционирование системы в целом.

Иерархический тип строительной сети:

? принцип иерархичности уровней управления, при котором каждый нижестоящий уровень контролируется вышестоящим и подчиняется ему;

? вытекающий из него принцип соответствия полномочий и ответственности работников управления месту в иерархии;

? принцип разделения труда на отдельные функции и специализации работников по выполняемым функциям; принцип формализации и стандартизации деятельности, обеспечивающий однородность выполнения работниками своих обязанностей и скоординированность различных задач;

? вытекающий из него принцип обезличенности выполнения работниками своих функций;

? принцип квалификационного отбора, в соответствии с которым прием и увольнение с работы производится в строгом соответствии с квалификационными требованиями.

Рисунок 2.Иерархический тип банковских организаций.

1.2 Особенности использования современных информационных технологий в автоматизации деятельности организаций ПАО “Росбанк”

Информатика и информационные технологии очень важны в жизни современного общества. Научно-технический прогресс идёт в ногу с жизнью каждого человека. Строительная сфера также тесно связана с информатикой. Информационные технологии в банковской системе применяются почти в любой области. На данный момент очень трудно представить наше общество, наше окружение без информационных технологий. Именно поэтому предмет «информационные технологии в банковской сфере» очень важен для будущих специализированных строителей.

Банковские технологии неразрывно связаны с информационными технологиями, которые обеспечивают комплексную автоматизацию бизнеса. Современные банковские технологии как инструмент поддержки и развития банковского бизнеса создаются на базе ряда основополагающих принципов:

? модульный принцип построения, позволяющий легко конфигурировать системы под конкретный заказ с последующим наращиванием;

? открытость технологий, способных взаимодействовать с различными внешними системами, обеспечивать выбор программно-технической платформы и переносимость ее на другие аппаратные средства;

? гибкость настройки модулей банковской системы и адаптация их к потребностям и условиям конкретного банка;

? масштабируемость, предусматривающая расширение и усложнение функциональных модулей системы по мере развития бизнес-процессов.

? многопользовательский доступ к данным в реальном времени и реализация функций в едином информационном пространстве;

? моделирование банка и его бизнес-процессов, возможность алгоритмических настроек бизнес-процессов;

? непрерывное развитие и совершенствование системы на основе ее реинжиниринга бизнес-процессов.

В популярной в настоящее время технологии можно выделить три основных направления развития: система «Клиент-банк», интернет-банкинг и мобильный банкинг.

С помощью системы «Клиент-банк» клиенты банка могут совершать различные операции из дома или из офиса: управление счетом, получение информации о состоянии счетов и другой банковской информации, проведение платежей и оплата услуг с расчетных и других счетов и с пластиковых карт, а также проведение других операций.

Мобильный банкинг - получение банковских услуг непосредственно с помощью мобильного телефона или ноутбука при использовании технологии беспроводного доступа. Такая технология позволяет передавать информацию интернет-сайтов на мобильные телефоны с функцией выхода в Интернет. Эта система предоставляет еще большую свободу доступа. Среди потребителей банковских услуг при помощи мобильного телефона первое место занимают Скандинавские страны, и, по оценкам экспертов, в ближайшем будущем более 40 % клиентов перейдут на мобильное обслуживание своих счетов.

Наиболее перспективным направлением развития банковских информационных технологий является интернет-банкинг. Развитие систем дистанционного обслуживания привело к созданию различных по объему и формам предоставления банковских услуг систем: «Интернет--Банк», «Интернет--Клиент», домашний банк, телебанк, мобильный банк или

WАP- сервис. С помощью этих систем выполняются практически любые, кроме кассового обслуживания, требования клиентов банка. Не только на Западе, но и в России все больше участников фондового рынка (банков и брокерских компаний) осваивают новое перспективное направление развития брокерских услуг, заключающееся в предоставлении физическим лицам доступа к российским и международным валютным и фондовым рынкам (интернет-трейдинг).

? ((промежуток времени.))

Для поддержания общей конкурентоспособности в банках разрабатывают новые модели анализа факторов риска, уровня инвестиционной привлекательности проектов. Содержание банковских технологий рассматривают как совокупность действий, обеспечивающих организацию сервисного обслуживания, соответствующего запросам клиента, поддержание конкурентоспособности заведения. Виды:

информационные (документарные, операционные, объектные);

визуализационные (видеосвязь с клиентом);

коммуникационные (IP-телефония);

электронные (интернет-банкинг, системы приема платежей).

Применение дистанционного обслуживания, позволяющего осуществлять практически любые операции, способствует дополнительному укреплению позиций структуры.Современные модели кредитно-финансовой деятельности банков - комплексные решения, оптимизирующие работу структур, улучшающие качество сервиса. Анализ развития банковских технологий в России позволяет выделить направления, где позитивная динамика наиболее очевидна:

1. дистанционное обслуживание;

2. карточные продукты;

3. компьютерные программные комплексы.

Услуги дистанционного обслуживания «банк-клиент» для юридических лиц оказывают 76% российских коммерческих заведений. Корпоративное ДО предоставляет 31% учреждений. Для физических лиц показатель составляет 87%. Наибольшие темпы развития карточных продуктов аналитики отмечают в сегменте зарплатных дебетовых карт. 92% россиян используют подобные услуги. Кредитные карточки имеет каждый третий.

информационный веб сайт банковский

1.3 Особенности создания сайта для организации ПАО “Росбанк”

Анализ действующего информационного портала банка «Росбанк», позволяет сделать вывод, что четко регламентированных требований, указывающих на то, каким должен быть сайт организации ПАО “Росбанк” нет. Однако, после изучения большинства сайтов банковских организаций, можно выявить основные особенности и требования, которых необходимо придерживаться при создании и реализации подобных сайтов.

Банковская индустрия развивается очень интенсивно, поэтому создание банковских сайтов - требует особого подхода, чтобы успешно конкурировать на рынке. Банковские компании активно развиваются, и чтобы привлечь максимум клиентов из интернета, увеличить обороты и достигнуть максимальных результатов работы, нужно создать эффективный сайт.

Для этого нужно выразительно продемонстрировать своим потенциальным клиентам свои конкурентные преимущества.

Важна не только привлекательная цена, но и гарантированное качество. Клиенты обращают внимание не только на объем клиентской базы, сейчас ищут профессионалов, которые могут привлекать клиентов из индивидуального предпринимательства. Это позволит повысить экономическое положение России.

Когда потенциальный клиент в первый раз попадает на ваш сайт, в первую очередь, скорее всего он оценивает:

? Отвечает ли информация на странице сайта его поисковому запросу;

? Присутствует ли информация о ценах на услуги;

? Есть ли возможность бесплатно проконсультироваться по своим вопросам.

? Какие клиенты рекомендует вашу компанию;

? Есть ли все необходимые сертификаты.

На основании этой информации потенциальные клиенты принимают решение искать другую организацию или обратиться в вашу банковскую компанию. Если решение принято в вашу пользу, далее вступает в действие профессионализм вашего менеджера.

Создание сайта банковской компании предполагает дополнительный канал коммуникации и отличную возможность контактировать с большим числом потенциальных клиентов, которые ищут эти услуги через интернет. В связи с этим очень важно наглядно показать следующую информацию:

? «обратная связь». Обратная связь является одним из самых важных элементов построения сайта для данной организации. Клиент будет иметь возможность узнать, не достающую ему, информацию, касаемо любой банковской услуги.

? «Бизнесу». Наличие на сайте данного раздела позволит юридическим лицам просматривать услуги, которые созданы именно для них.

? «Отзывы о сотрудничестве». Чаще всего банковские компании взаимодействуют не только с частными заказчиками, но и с крупными организациями - юридическими лицами. Для демонстрации уровня профессионализма весьма желательно в разделе «Отзывы» разместить скриншоты с логотипом и печатью от тех подрядчиков, с которыми состоялось успешное сотрудничество.

? «Описание услуг банковского инвестирования». В этом разделе желательно разместить тексты с описание основных направлений деятельности, но самое главное необходимо подчеркнуть в чем заключается ваше выгодное отличие от конкурентов.



2. ПРОЕКТИРОВАНИЕ И РЕАЛИЗАЦИЯ веб-сайта для предприятия ПАО “РОСБАНК”

2.1 Анализ требований для сайта ПАО “Росбанк”

Разработка сайта и управление им на сегодняшний день для большинства предприятий становится насущной необходимостью. На сегодня сайт выступает как средство коммуникации и привлечения целевой аудитории.

Разработку сайта можно рассматривать как источник получения прибыли и увеличения дохода. Зачастую сайт исполняет функцию Интернет-магазина либо же содержит подробные сведения, как приобрести тот или иной продукт предприятия. Также большое количество бизнес сайтов содержит информацию о самой продукции, мотивируя покупку, заказ.

Реклама в печатных изданиях не способна в полной мере осветить деятельность предприятия, информация в рекламных буклетах и брошюрах быстро теряет актуальность. В этом ключе разработка сайта открывает мир новых возможностей и способов достижения бизнес целей посредством невероятно обширного арсенала рекламных средств и стратегий. Разработать сайт означает показать свою современность и актуальность. Разработать сайт -- для предприятия значит «быть на уровне», быть конкурентоспособным, ведь в любом деле применение инновационных технологий влияет на образ и оценку предприятия. Именно поэтому, разработка сайта сегодня является довольно актуальной и востребованной услугой.

Постановка задачи:

В преддипломной практике поставлена задача: разработать web-сайт ПАО “Росбанк” для использования в среде интернет. Для этого:

1) Разработать структуру сайта, карту сайта;

2) Использовать язык разметки гипертекста html, css, php;

3) Web-сайт должен поддерживать графические вставки, анимацию;

4) Заполнить разделы сайта актуальной информацией.

Разработанный web-сайт должен обладать следующими особенностями:

1) Понятной и простой структурой для работы пользователей;

2) Содержать актуальную информацию;

3) Иметь удобный для пользователя интерфейс с рядом сервисов.

Рисунок 3.Обязанности отделов.

В соответствии с особенностями создания сайтов для банковских организаций, рассмотренными в первой главе и основными направлениями деятельности ПАО “Росбанк” можно выделить ряд основных требований к разрабатываемому сайту.

С функциональной точки зрения, ключевым требованием является возможность просмотра различных банковских услуг а так же возможность оформить выбранный продукт

С точки зрения структуры разрабатываемого сайта, основным требованием являлось создание максимально структурированной навигации по сайту»



2.2 Практическая часть создания сайта для ПАО “Росбанк”

Первым этапом является проектирование и разработка сайта. Данный этап предполагает проектирование сайта, разработку дизайна главной и второстепенных страниц, создание сайта, в соответствии с указанными требованиями. Далее идет этап верстки и программирования, где е непосредственно реализуется сайт. Он включает в себя верстку шаблонов страниц, при необходимости программирование, реализацию структуры сайта и типовое заполнение страниц. По завершению сразу осуществляется тестирование и исправление ошибок, если таковые имели место быть, а также публикация сайта в сети. Последний этап отличается составом работ, в зависимости от первоначально поставленной задачи. В проектах создания сайта под заказ предполагается формирование пакета сопроводительной документации, о результатах проделанной работы и других документов лицу, которое будет сопровождать сайт после его внедрения. В случае если формирование проектной документации не предполагается, заключительный этап включает доработку и исправление допущенных ошибок, тестирование его основного функционала, заливку контента, на основе реальных данных, также размещение сайта на хостинговом сервере и оптимизацию под поисковые запросы. После успешного размещения на сервере сайт тестируется еще раз для устранения ошибок, связанных с особенностями размещения.

В соответствии с поставленным планом, производились работы по реализации сайта для ПАО “Росбанк”

Как показывает практика, главная цель сайта банковской организации - клиент должен увидеть, что ему могут предоставить необходимую услугу в сфере банковских услуг, увидеть качество оказываемых услуг на примере сравнения с конкурентами, и узнать ориентировочную ценовую политику фирмы.

Создание сайта началось с построения структуры сайта. Структура представляет собой наличие необходимых разделов и страниц, таких как «Частным коиентам», «Бизнесу», «финансовым институтам», «обратная связь». Спроектированная структура соответствует предъявленным требованиям и имеет все необходимые разделы и страницы, выявленные на этапе анализа требований к сайтам строительных организаций.

Для создания сайта используются теги: Теги<html>,<head>,<body>.

При помощи тегов форматирования текста, изменяется текст: жирным, подчеркнутым, размер, цвет.

Пара тегов <html></html> показывает браузеру, что данный документ является html - документом. Между ними располагается все содержимое всей странички. В том числе и пары тегов<head>,<body>.

Содержимое тега <head> содержит служебную информацию для браузера, и поисковых систем, и не отображается на странице, за исключением тега <title>. Тег <body> предназначен для хранения основного содержимого страницы сайта, которое будет отображаться в окне браузера.

Рисунок 4.Код шапки сайта

Содержимое тега <title> это оглавление страницы. Его содержимое отображается на вкладке браузера. Это очень важный тег, так как именно он говорит поисковым системам, чему посвящена страница сайта. Таким образом, для того, чтобы страница попала в выдачу поисковой системы по определенному запросу, этот запрос должен присутствовать в теге <title>.

Дале создавались страницы сайта. Первой была спроектирована страница «Главная». Шапка сайта представляет собой схематичное изображение заголовка, с расположенным на нем названия предприятия, почтой и номеру являющимися контактной информацией.

Переход по разделам сайта отображается словами, отображающими общую информацию, которую хранит раздел, становятся активными при наведении мыши на нужный элемент. Шапка отображается по умолчанию и на других страницах, сверху от контента сайта.

Рисунок 5.Страница «Главная» и шапка сайта

Страница «О нас» предлагает клиентам ознакомиться с услугами предприятия. Также содержит информацию о работниках. Там же клиент может увидеть отзывы других людей о качестве работы организации.

HTML предлагает шесть текстовых заголовков разного уровня, которые показывают относительную важность секции, расположенной после заголовка. Так, тег <h1> представляет собой наиболее важный заголовок первого уровня, а тег <h6> служит для обозначения заголовка шестого уровня и является наименее значительным. По умолчанию, заголовок первого уровня отображается самым крупным шрифтом жирного начертания, заголовки последующего уровня по размеру меньше. Теги <h1>...<h6> относятся к блочным элементам, они всегда начинаются с новой строки, а после них другие элементы отображаются на следующей строке. Кроме того, перед заголовком и после него добавляется пустое пространство.

Тег <p> определяет абзац (параграф) текста. Если закрывающего тега нет, считается, что конец абзаца совпадает с началом следующего блочного элемента.

Тег <p> является блочным элементом, поэтому текст всегда начинается с новой строки, абзацы идущие друг за другом разделяются между собой отбивкой (так называется пустое пространство между ними).

Тег <span> предназначен для определения строчных элементов документа. В отличие от блочных элементов, таких как <table>, <p> или <div>, с помощью тега <span> можно выделить часть информации внутри других тегов и установить для нее свой стиль. Например, внутри абзаца (тега <p>) можно изменить цвет и размер первой буквы, если добавить начальный и конечный тег <span> и определить для него стиль текста. Чтобы не описывать каждый раз стиль внутри тега, можно выделить стиль во внешнюю таблицу стилей, а для тега добавить атрибут class или id с именем селектора.

Рисунок 6.Часть кода информации в разделе «обратная связь»

Рисунок 7.Информация в разделе «обратная связь»

При проектировании сайта важным моментом было создание страницы « «Частным клиентам», подобная страница может продемонстрировать услуги, оказываемые частным лицам

Вставить изображение позволяет одинарный тег <img>. Браузер помещает изображение в том месте веб-страницы, где встретит тег <img>. Данный тег поместит на веб-страницу изображение, хранящееся в файле image.jpg, который находится в одной и той же папке с веб-страницей. Адрес картинки указывается в атрибуте src. Так вот, атрибут src обязательный атрибут, который служит для указания адреса файла с изображением. Атрибут тега, который задает его параметры. Каждый атрибут имеет имя, после которого идет знак =, и далее идет его значение, взятое в кавычки.

Утилиты отступов, которые работают на всех брейкпойнтах - от xs до xl - не имеют аббревиатуры брейкпойнта в названии. Это сделано потому, что те классы применяются, начиная с min-width: 0 и выше, и т.о. не привязаны к медиа-запросам. Названия остающихся брейкпойнтов, однако, содержит в себе аббревиатуры брейкпойнтов.

Классы названы по формату {property}{sides}-{size} для xs и {property}{sides}-{breakpoint}-{size} для sm, md, lg и xl.

Где свойство - это одно из:

· m - для классов, которые задают margin

· p - для классов, которые задают padding

Где свойство - это одно из:

· t - для классов, которые задают margin-top или padding-top

· b - для классов, которые задают margin-bottom или padding-bottom

· l - для классов, которые задают margin-left или padding-left

· r - для классов, которые задают margin-right или padding-right

· x - для классов, которые задают и *-left и *-right

· y - для классов, которые задают и *-top и *-bottom

· blank - для классов, которые задают margin или padding для всех 4-х сторон элемента

Где размер - это один из:

· 0 - для классов, которые удаляют margin или padding назначая его равны 0

· 1 - (по умолчанию) для классов, которые устанавливают margin или padding к значению, равному $spacer *.25

· 2 - (по умолчанию) для классов, которые устанавливают margin или padding к значению, равному $spacer *.5

· 3 - (по умолчанию) для классов, которые устанавливают margin или padding к значению, равному $spacer

· 4 - (по умолчанию) для классов, которые устанавливают margin или padding к значению, равному $spacer * 1.5

· 5 - (по умолчанию) для классов, которые устанавливают margin или padding к значению, равному $spacer * 3

· auto - для классов, которые устанавливают margin как auto

Рисунок 9.Код как добавлять изображения



Рисунок 10.Рекомендации

На странице «Контакты» указана вся необходимая информация о том, как связаться с главой предприятия, заказать ремонт или постройку, определить время и место для встречи, и договора о начале работ.

Рисунок 11.Контактная информация

При использовании связанных стилей описание селекторов и их значений располагается в отдельном файле, как правило, с расширением css, а для связывания документа с этим файлом применяется тег <link>. Данный тег помещается в контейнер <head>.

Рисунок 12.Пример подключения связанных стилей

Значение атрибута тега <link> -- rel остаётся неизменным независимо от кода, как приведено в данном примере. Значение href задаёт путь к CSS-файлу, он может быть задан как относительно, так и абсолютно.

Содержимое файла mysite.css подключаемого посредством тега <link> приведено в рис.12

Рисунок 13.Пример файла со стилем

Внутренний или встроенный стиль является по существу расширением для одиночного тега, используемого на текущей веб-странице. Для определения стиля используется атрибут style, а его значением выступает набор стилевых правил

Рисунок 14.Пример использования внутреннего стиля

На рисунке 14 стиль тега <p> задаётся с помощью атрибута style, в котором через точку с запятой перечисляются стилевые свойства

Все описанные методы использования CSS могут применяться как самостоятельно, так и в сочетании друг с другом. В этом случае необходимо помнить об их иерархии. Первым имеет приоритет внутренний стиль, затем глобальный стиль и в последнюю очередь связанный стиль. На рисунке 15 применяется сразу два метода добавления стиля в документ.

Рисунок 15.Пример сочетания разных методов

После завершения работ по разработке ключевых страниц сайта, осуществлялось полное заполнение контента, на реальных данных и тестирование его основного функционала.

2.3 Тестирование

Тестирование сайта включало в себя проверку идентичного просмотра в различных браузерах. По причине того, что сайт в настоящее время представлен на локальном сервере, то протестировать его через специальные сервисы не предоставлялось возможным. Проверка осуществлялась вручную на использование основных браузеров, таких как Google Chrome, Mozilla Firefox, Internet Explorer, Opera, Yandex.

При тестировании в популярных браузерах, все страницы сайта отображались идентично. После размещения сайта на хостинг, предполагается полное тестирование сайта с помощью различных сервисов, таких как онлайн сервис Browsershots. Данный веб-сервис, делает скриншоты отображения сайта в разных операционных системах и браузерах.

Тестирование основного функционала сайта прошло успешно и готовый сайт был одобрен дипломным руководителем. После публикации сайта, директором ПАО «Росбанк» будет назначен ответственный сотрудник, которого при необходимости будет координировать информационный отдел ПАО «Росбанк.». Данный сотрудник будет нести ответственного за пополнение сайта актуальной информацией, изменения данных.

Таким образом, в данной главе была реализована практическая часть работы, которая предполагала выявление целей, задач и требований к сайту в соответствии с осуществляемой им деятельностью, составление плана работ по реализации сайта и его создание с использованием выбранной системы управления контентом.



ЗАКЛЮЧЕНИЕ

В настоящее время информационные системы являются неотъемлемой частью любой организации, особенно это касается банковской сферы.

В ходе выполнения преддипломной практики я рассмотрел аспекты использования современных информационных систем в банковских организациях, а в частности в организации ПАО «РОСБАНК». Выявил не обходимые требования к созданию интернет портала для организации, а именно: структура навигационного меня, структура страниц, дизайн сайта. После чего был разработан сайт с помощью выбранной системы управления контентом.

Структура сайта полностью соответствуют заявленным требованиям организации, а так же отлично подходит под банковскую структуру.

Основной функционал сайта протестирован и размещен на хостинге. После публикации сайта банк назначит сотрудника, который будет отвечать за функциональность сайта и отсутствие технических ошибок.

Основываясь на вышеизложенных фактах я могу утверждать, что задачи преддипломной практики успешно выполнены и поставленная цель исследования достигнута.



СПИСОК ИСПОЛЬЗОВАННЫХ ИСТОЧНИКОВ И ЛИТЕРАТУРЫ

1. Бурцева Е.В. Информационные системы: Учебное пособие / Е.В. Бурцева, И.П. Рак, А.В. Селезнев, А.В. Терехов, В.Н. Чернышов. - Тамбов: Изд-во ТГТУ, 2011. - 128 с.

2. Венедюхин А.А. Создание сайтов / А.А. Венедюхин. - М.: Издательство Эксмо, 2017. - 54 с.

3. Грачев А.В. Создаем свой сайт на WordPress / А.В. Грачев. - СПб.: Питер, 2012. - 288 с.

4. Евсеев Д.А. Web-дизайн в примерах и задачах / Д.А. Евсеев, В.В. Трофимов.- М.: КноРус, 2012. - 272 с.

5. Кирсанов Д.И. Веб-дизайн / - М.: Символ-Плюс, 2015. - 376 с.

6. КиселевС.В. Веб-дизайн / С.В Киселев, С.В. Алексахин, А.В. Остроух. - М.: Академия, 2012. - 64 с.

7. Кузнецов М.В. PHP. Практика создания Web-сайтов, 2 изд./ М.В. Кузнецов. - СПб.: БХВ-Петербург, 2012. - 1264 с.

8. Румянцева Е.Л. Информационные технологии; Учебное пособие / Е.Л Румянцева, В.В. Слюсарь. - М.: Издательство Наука, 2015. - 256 с.

9. Севостьянов И.О. Поисковая оптимизация. Практическое руководство по продвижению сайта в Интернете / И.О. Севостьянов. - СПб.: Издательский Дом, 2016. - 272 с.

10. Спека М.В. Создание Web-сайтов. Самоучитель / М.В. Спека. - СПб.: Диалектика, 2012. - 277 с.

11. Титоренко Г.А. Информационные технологии управления / Г.А. Титоренко. - М.: ЮНИТИ-ДАНА, 2013. - 120 с.

12. Уильямс Б.Г. WordPress для профессионалов. Разработка и дизайн сайтов/ Б.Г. Уильямс, Д.П. Дэмстра, Х.С. Стэрн. - М.: Питер, 2014. - 200 с.

13. Федорова Г.С. Информационные системы / Г.С. Федорова. - М.: Издательство Академия, 2014. - 153 с.



ПРИЛОЖЕНИЕ 1

Код страницы «Главная»

<!DOCTYPE html>

<html>

<head>

<title>РОСБАНК</title>

<meta name="viewport" content="width=device-width, initial-scale=1">

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

<meta name="keywords" content="Planeto Responsive web template, Bootstrap Web Templates, Flat Web Templates, Andriod Compatible web template,

Smartphone Compatible web template, free webdesigns for Nokia, Samsung, LG, SonyErricsson, Motorola web design" />

<script type="application/x-javascript"> addEventListener("load", function() { setTimeout(hideURLbar, 0); }, false); function hideURLbar(){ window.scrollTo(0,1); } </script>

<link href="css/bootstrap.css" rel='stylesheet' type='text/css' />

<link href="css/style.css" rel='stylesheet' type='text/css' />

<script src="js/jquery-1.11.0.min.js"></script>

<link href='http://fonts.googleapis.com/css?family=Dosis:200,300,400,500,600,700,800' rel='stylesheet' type='text/css'>

<link href='http://fonts.googleapis.com/css?family=Open+Sans:300italic,400italic,600italic,700italic,800italic,400,300,600,700,800' rel='stylesheet' type='text/css'>

<link href='http://fonts.googleapis.com/css?family=Dancing+Script:400,700' rel='stylesheet' type='text/css'>

<!---- start-smoth-scrolling---->

<script type="text/javascript" src="js/move-top.js"></script>

<script type="text/javascript" src="js/easing.js"></script>

<script type="text/javascript">

jQuery(document).ready(function($) {

$(".scroll").click(function(event){

event.preventDefault();

$('html,body').animate({scrollTop:$(this.hash).offset().top},1000);

});

});

</script>

<!--start-smoth-scrolling-->

</head>

<body>

<!--start-banner-->

<div class="banner" id="home">

<div class="header">

<div class="logo">

<a href="index.html"><img src="images/logo.png" alt=""></a>

</div>

<div class="navigation">

<span class="menu"></span>

<ul class="navig">

<li><a href="index.html" class="active">частным клиентам</a></li><span><img src="images/clk.png" alt="" /></span>

<li><a href="about-us.html">бизнесу</a></li><span><img src="images/clk.png" alt="" /></span>

<li><a href="services.html">финансовым институтам</a></li><span><img src="images/clk.png" alt="" /></span>

<li><a href="404.html">о банке</a></li><span><img src="images/clk.png" alt="" /></span>

<li><a href="carrers.html">проекты</a></li><span><img src="images/clk.png" alt="" /></span>

<li><a href="contact.html">Контакты</a></li>

</ul>

</div>

<div class="clearfix"></div>

</div>

<div class="banner-main">

<div class="container">

<div class="banner-top">

<h1></h1>

<div class="banner-top-btm">

<div class="col-md-6 bnr-left">

<img src="images/icn-1.png" alt="" />

</div>

<div class="col-md-6 bnr-right">

<img src="images/icn-2.png" alt="" />

</div>

<div class="clearfix"></div>

</div>

</div>

<div class="clearfix"> </div>

</div>

</div>

</div>

</div>

</div>

<!-- script-for-menu -->

<script>

$("span.menu").click(function(){

$(" ul.navig").slideToggle("slow", function(){

});

});

</script>

<!-- script-for-menu -->

<!--Slider-Starts-Here-->

<script src="js/responsiveslides.min.js"></script>

<script>

// You can also use "$(window).load(function() {"

$(function () {

// Slideshow 4

$("#slider4").responsiveSlides({

auto: true,

pager: true,

nav: false,

speed: 500,

namespace: "callbacks",

before: function () {

$('.events').append("<li>before event fired.</li>");

},

after: function () {

$('.events').append("<li>after event fired.</li>");

}

});

});

</script>

<!--End-slider-script-->

<!--end-banner-->

<!--start-idea-->

<div class="idea">

<div class="container">

<div class="idea-main">

<div class="idea-top">

<div class="col-md-5 idea-left id-left">

<img src="images/велосипед.png" alt="" />

</div>

<div class="col-md-7 idea-right id-right">

<h3>Скидка 20% в велопрокате "велобайк" с картой МИР Росбанк</h3>

<p></p>

<div class="i-btn">

<a href="yandex.ru">ПОДРОБНЕЕ</a>

</div>

</div>

<div class="clearfix"></div>

</div>

<div class="idea-top">

<div class="col-md-7 idea-right id-one-left">

<h3>WE HAVE IDEAS FOR EVERYONE</h3>

<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce scelerisque nibh et neque faucibus suscipit. Sed auctor ipsum ut tellus faucibus tincidunt. Curabitur non quam facilisis, rhoncus ligula ac, pellentesque augue ipsum.</p>

<div class="i-btn">

<a href="services.html">LEARN MORE</a>

</div>

</div>

<div class="col-md-5 idea-left id-one-right">

<img src="images/idea-2.png" alt="" />

</div>

<div class="clearfix"></div>

</div>

</div>

</div>

</div>

<!--end-idea-->

<!--start-number-->

<div class="number">

<div class="container">

<div class="number-main">

<h3>Наша статистика на январь 2019 года</h3>

</div>

<div class="number-bottom">

<ul>

<li>

<h4>467</h4>

<p>млрд. руб. кредитных портфелей </p>

</li>

<li>

<span class="one"><img src="images/clk.png" alt="" /></span>

<h4>1.1</h4>

<p>трлн. руб чистых активов</p>

</li>

<li>

<span class="two"><img src="images/clk.png" alt="" /></span>

<h4>17,5</h4>

<p>млн. человек уже с нами</p>

</li>

<li>

<span class="tre"><img src="images/clk.png" alt="" /></span>

<h4>10</h4>

<p>Мы в 10-ке банков России</p>

</li>

</ul>

</div>

</div>

</div>

<!--end-number-->

<!--start-partner-->

<div class="partner">

<div class="container">

<div class="partner-top">

<h3>Нас рекомендуют клиенты</h3>

<p>Наши основные преимущества</p>

</div>

<div class="partner-bottom">

<div id="top" class="callbacks_container">

<ul class="rslides" id="slider5">

<li>

<div class="part-one">

<div class="col-md-4 partner-left">

<img src="images/prt-1.png" alt="" />

<div class="part">

<p>“Один из 3-х наиболее рекомендуемых банков для юридических лиц”</p>

<label>Один из 3-х наиболее рекомендуемых банков для юридических лиц</label>

</div>

</div>

<div class="col-md-4 partner-left prt-1">

<img src="images/prt-2.png" alt="" />

<div class="part">

<p>“95% клиентов обращаются в Росбанк, чтобы ежедневно управлять финансами”</p>

<label>95% клиентов обращаются в Росбанк, чтобы ежедневно управлять финансами</label>

</div>

</div>

<div class="col-md-4 partner-left prt-1">

<img src="images/prt-3.png" alt="" />

<div class="part">

<p>“Комфортные условия обслуживания”</p>

<label>Комфортные условия обслуживания</label>

</div>

</div>

<div class="clearfix"></div>

</div>

<div class="part-one">

<div class="col-md-4 partner-left">

<img src="images/prt-4.png" alt="" />

<div class="part">

<p>“Мобильное приложение для бизнеса”</p>

<label>Мобильное приложение для бизнеса</label>

</div>

</div>

<div class="col-md-4 partner-left">

<img src="images/prt-5.png" alt="" />

<div class="part">

<p>“Резервирование расчетного счета онлайн”</p>

<label>Резервирование расчетного счета онлайн</label>

</div>

</div>

<div class="col-md-4 partner-left">

<img src="images/prt-6.png" alt="" />

<div class="part">

<p>“Проверка контрагентов”</p>

<label>Проверка контрагентов</label>

</div>

</div>

<div class="clearfix"></div>

</div>

</li>

<li>

<div class="part-one">

<div class="col-md-4 partner-left prt-1">

<img src="images/prt-2.png" alt="" />

<div class="part">

<p>“Один из 3-х наиболее рекомендуемых банков для юридических лиц”</p>

<label>Один из 3-х наиболее рекомендуемых банков для юридических лиц</label>

</div>

</div>

<div class="col-md-4 partner-left prt-1">

<img src="images/prt-2.png" alt="" />

<div class="part">

<p>“95% клиентов обращаются в Росбанк, чтобы ежедневно управлять финансами”</p>

<label>95% клиентов обращаются в Росбанк, чтобы ежедневно управлять финансами</label>

</div>

</div>

<div class="col-md-4 partner-left prt-1">

<img src="images/prt-3.png" alt="" />

<div class="part">

<p>“Комфортные условия обслуживания”</p>

<label>Комфортные условия обслуживания</label>

</div>

</div>

<div class="clearfix"></div>

</div>

<div class="part-one">

<div class="col-md-4 partner-left">

<img src="images/prt-4.png" alt="" />

<div class="part">

<p>“Мобильное приложение для бизнеса”</p>

<label>Мобильное приложение для бизнеса</label>

</div>

</div>

<div class="col-md-4 partner-left">

<img src="images/prt-5.png" alt="" />

<div class="part">

<p>“Резервирование расчетного счета онлайн”</p>

<label>Резервирование расчетного счета онлайн</label>

</div>

</div>

<div class="col-md-4 partner-left">

<img src="images/prt-6.png" alt="" />

<div class="part">

<p>“Проверка контрагентов”</p>

<label>Проверка контрагентов</label>

</div>

</div>

<div class="clearfix"></div>

</div>

</li>

</ul>

</div>

<div class="clearfix"> </div>

</div>

</div>

</div>

<!--end-partner-->

<!--Slider-Starts-Here-->

<!--start-footer-->

<div class="footer">

<div class="container">

<div class="footer-main">

<div class="contact">

<div class="col-md-8 contact-left">

<a href="index.html"><img src="images/logo-2.png" alt="" /></a>

<p>РОСБАНК - будущее за вами!</p>

</div>

<div class="col-md-4 contact-right">

<h3>Мы с вами.</h3>

<p>8 800 770 75 00</p>

<p><a href="mailto: Rosbank@gmail.com ">Rosbank@gmail.com</a></p>

</div>

<div class="clearfix"></div>

</div>

<div class="footer-bottom">

<div class="col-md-4 footer-left">

<ul>

<li><a href="#"><span class="fb"> </span></a></li>

<li><a href="#"><span class="twit"> </span></a></li>

<li><a href="#"><span class="sky"> </span></a></li>

</ul>

</div>

<div class="col-md-4 footer-middle">

</div>

<div class="col-md-4 footer-right">

<p><a href="#home" class="scroll">TO THE TOP</a></p>

</div>

<div class="col-md-4 footer-right">

<p><a href="#home" class="scroll">TO THE TOP</a></p>

</div>

<div class="clearfix"></div>

</div>

</div>

</div>

</div>

<!--end-footer-->

</body>

</html>



ПРИЛОЖЕНИЕ 2

Код страницы «О нас»

<!--A Design by W3layouts

<!DOCTYPE html>

<html>

<head>

<title>Росбанк</title>

<meta name="viewport" content="width=device-width, initial-scale=1">

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

<meta name="keywords" content="

" />

<script type="application/x-javascript"> addEventListener("load", function() { setTimeout(hideURLbar, 0); }, false); function hideURLbar(){ window.scrollTo(0,1); } </script>

<link href="css/bootstrap.css" rel='stylesheet' type='text/css' />

<link href="css/style.css" rel='stylesheet' type='text/css' />

<script src="js/jquery-1.11.0.min.js"></script>

<link href='http://fonts.googleapis.com/css?family=Dosis:200,300,400,500,600,700,800' rel='stylesheet' type='text/css'>

<link href='http://fonts.googleapis.com/css?family=Open+Sans:300italic,400italic,600italic,700italic,800italic,400,300,600,700,800' rel='stylesheet' type='text/css'>

<link href='http://fonts.googleapis.com/css?family=Dancing+Script:400,700' rel='stylesheet' type='text/css'>

<!---- start-smoth-scrolling---->

<script type="text/javascript" src="js/move-top.js"></script>

<script type="text/javascript" src="js/easing.js"></script>

<script type="text/javascript">

jQuery(document).ready(function($) {

$(".scroll").click(function(event){

event.preventDefault();

$('html,body').animate({scrollTop:$(this.hash).offset().top},1000);

});

});

</script>

<!--start-smoth-scrolling-->

</head>

<body>

<!--start-banner-->

<div class="banner banner1" id="home">

<div class="header">

<div class="logo">

<a href="index.html"><img src="images/logo.png" alt=""></a>

</div>

<div class="navigation">

<span class="menu"></span>

<ul class="navig">

<li><a href="index.html" class="active">частным клиентам</a></li><span><img src="images/clk.png" alt="" /></span>

<li><a href="about-us.html">бизнесу</a></li><span><img src="images/clk.png" alt="" /></span>

<li><a href="services.html">финансовым институтам</a></li><span><img src="images/clk.png" alt="" /></span>

<li><a href="404.html">о банке</a></li><span><img src="images/clk.png" alt="" /></span>

<li><a href="carrers.html">CARRERS</a></li><span><img src="images/clk.png" alt="" /></span>

<li><a href="contact.html">Контакты</a></li>

</ul>

</div>

<div class="clearfix"></div>

</div>

<div class="banner-main">

<div class="container">

<div class="banner-top bnr-top">

<h1></h1>

</div>

</div>

</div>

</div>

<!-- script-for-menu -->

<script>

$("span.menu").click(function(){

$(" ul.navig").slideToggle("slow", function(){

});

});

</script>

<div class="stop">

<div class="container">

<div class="stop-top">

<h3>Мы ответим на ваше письмо в течении 15 минут.</h3>

</div>

<div class="stop-bottom">

<div class="col-md-4 stop-left">

<div class="address">

<h4>ГЛАВНЫЙ офис</h4>

<p>г. Москва<span>ул. Маши Порываевой</span>д.34</p>

</div>

<div class="email">

<h4>EMAIL</h4>

<p><a href="mailto:example@email.com">Rosbank@gmail.com</a></p>

</div>

<div class="phone">

<h4>Круглосоточная служба поддержки</h4>

<p>8 800 200 54 34</p>

</div>

</div>

<div class="col-md-8 stop-left">

<h4>Заполните не обходимые поля</h4>

<div class="stop-btm">

<input type="text" value="Имя" onfocus="this.value = '';" onblur="if (this.value == '') {this.value = 'Name';}" />

...