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

ВВЕДЕНИЕ

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

Задачи преддипломной практики: организация, планирование и проведение исследований, проектно-конструкторских работ в области программного и аппаратного обеспечения систем и сетей; участие в решении задач по эксплуатации компьютерных систем и сетей; подготовка доклада и выступление с ним перед специалистами; сбор и анализ материала в соответствии с указанием о выполнении дипломного проекта (работы).

В рамках стратегии Банк ставит перед собой задачу добиться следующих результатов:

Положение на рынке Казахстана. Банк ставит перед собой задачу по увеличению доли в активах банковской системы до 5%. Для выполнения данной задачи потребуется обеспечить рост активных операций и увеличить долю Банка на рынке кредитования юридических и физических лиц наряду с ростом рыночной доли Банка в привлеченных средствах корпоративных и розничных клиентов. программы webtutor электронный сайт

Финансовые показатели Банка. Рост активов будет также сопровождаться ростом прибыли и показателями эффективности деятельности Банка.

Качественные показатели. Количественный рост показателей бизнеса Банка должен происходить на базе значительных качественных улучшений его работы. В качестве основных целевых ориентиров качественных преобразования для Банка станут:

достижение существенного положительного синергетического эффекта от взаимодействия с группой Сбербанк;

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

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

сильный бренд Банка.

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

Практика продолжалась с 12 января 2015 года по 7 марта 2015 года, то есть 8 недель.

Обязанности к специальности IT специалист

Доработка системы WebTutor:

Разработка 2-3 агентов для автоматической загрузки данных в системы;

Разработка алгоритма поиска заданных условий и реагирования по действиям на эти условия;

Разработка 15 web-шаблонов;

Разработка 10-ти типов уведомлений.

Портфолио проектов.

Базовые знания HTML‚ CSS и начальные навыки верстки.

Знание Photoshop, Illustrator, CorelDraw, Flash (и другие графические программы).

Умение создавать иконки, иллюстрации и баннеры.

Требование к специальности IT специалист

Опыт разработки web-приложений от 3-х лет;

Отличное знание JavaScript, Ajax, xQuery, HTML, CSS.

Придумывание дизайна сайтов, отдельных страниц, e-mail рассылок.

Отрисовка макетов сайтов или отдельных его страниц.

Создание иконок, иллюстраций для сайтов, баннеров



Перечень работ, выполненных в процессе практики

· Ознакомление с техникой безопасности предприятия;

· Изучение программы WebTutor;

· Загрузка и назначение курсов сотрудникам;

· Выгрузка электронных курсов через CourseLab;

· Верстка сайта, создание иконок, иллюстраций для сайтов;

· Отрисовка макета сайта;

· Создание баннеров;



1 ОПИСАНИЕ ОРГАНИЗАЦИИ РАБОТ В ПРОЦЕССЕ ПРОХОЖДЕНИЯ ПРАКТИКИ

В процессе прохождения практики в фирме «ДБ АО Сбербанк» со мной был проведен инструктаж по технике безопасности. Я был ознакомлен со структурой и отделами предприятия, для меня провели экскурсию по зданию предприятия. Мне разъяснили основные направления деятельности предприятия. Руководитель практики так же посвятил меня в мои основные обязанности, ознакомил меня с перечнем задач, которые я должен был освоить в момент прохождения практики. Так же мне был выдан пропуск и талон на парковку предприятия.



2 ОПИСАНИЕ ПРАКТИЧЕСКИХ ЗАДАЧ, РЕШАЕМЫХ СТУДЕНТОМ ВО ВРЕМЯ ПРАКТИКИ

2.1 Изучение программы WebTutor

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

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

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

Портал предоставляет пользователям (сотрудникам компании, партнерам, клиентам) сервисы, зависящие от набора внедренных модулей системы. Примеры сервисов, доступных на портале:

Дистанционное обучение сотрудников с использованием электронных учебных курсов

Проведение тренингов и семинаров в формате вебинаров

Информирование сотрудников об HR-политике компании (новости, статьи, документы)

Тестирование сотрудников

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

Сбор обратной связи - форумы, блоги, опросы, отзывы об обучении

Проведение процедур оценки персонала (по компетенциям, по целям, по KPI)

Поиск и отбор внешних кандидатов в рамках процесса подбора персонала

Выявление талантов, планирование преемственности, внутренний подбор

Формирование электронной библиотеки и базы знаний компании

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

Сотни ведущих компаний России и стран СНГ успешно внедрили и используют систему WebTutor. Общее количество пользователей системы (сотрудников ведущих компаний, использующих порталы, построенные на ее основе) превышает 1 000 000 человек.

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

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

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

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

Персонал и организационная структура

ДИСТАНЦИОННОЕ ОБУЧЕНИЕ

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

Управление порталом

Для автоматизации других видов обучения (очного, смешанного, обучения в формате вебинаров, оффлайн-обучения) дополнительно используют модули:

Учебный центр

Виртуальный класс

Персональный WebTutor

Для формирования комплексной системы управления талантами, автоматизирующей все ключевые HR-процессы (подбор, адаптация, обучение, оценка персонала, развитие карьеры, планирование преемственности), к перечисленным выше модулям добавляют следующие модули:

Подбор персонала

Оценка персонала

Управление талантами и развитие карьеры

Создаваемый учебный портал или HR-портал может быть расширен функционалом модулей:

Электронная библиотека

Управление знаниями

Корпоративный портал

Геймификация

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

Модуль "Тестирование" системы WebTutor позволяет создать базу данных контрольных вопросов и построить на их основе библиотеку тестов. Тесты, разработанные в данном модуле, могут использоваться в других модулях системы WebTutor - в качестве элемента электронного курса, в процессе очного обучения, при подборе персонала, при проведении оценочных мероприятий.

Основные задачи, решаемые модулем:

Создание библиотеки контрольных вопросов различных типов (6 основных типов вопросов)

Формирование тестов на основе библиотеки вопросов (с возможностью случайной выборки, ограничениями по времени и другими параметрами)

Включение тестов в состав электронных курсов

Назначение тестов в качестве самостоятельных оценочных процедур

Детальная аналитика по итогам тестирования

Автоматическое назначение тестов по описанным в системе правилам (например, для новых сотрудников)

Тестирование кандидатов при приеме на работу

Рис. 1 - работа с базой вопросов

Дополнительные функциональные возможности:

Различные варианты формирования набора вопросов для тестов (случайная выборка, выборка с учетом весов)

Многосекционные тесты

Контроль времени ответа на вопрос, тест или секцию, контроль количества попыток сдачи теста

Учет шкал теста и интерпретация результатов по шкалам

Присвоение квалификаций по итогам тестирования

Импорт базы вопросов из Excel

Автоматизация процесса экспертизы вопросов, проверки тестов и вопросов на валидность и надежность (компонент "Тест-Эксперт")

Уведомление по электронной почте при назначении тестов. Настройка текстов и параметров уведомлений

Описание связи между тестами и элементами модели компетенций (знаниями), назначение тестирования по профилю должности

Возможность использования модуля для создания личностных опросников и психологических тестов.

Модуль «Управление знаниями» системы WebTutor предназначен для решения задачи классификации и формализации знаний, накопленных в различных модулях системы WebTutor (документы портала, курсы, вопросы и тесты, обсуждения в форумах и т.п.), облегчения поиска материалов и контроля ознакомления с ними, а также управления взаимодействием с предметными экспертами.

Основные задачи, решаемые модулем:

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

Предоставление пользователям Портала, построенного на основе системы WebTutor, интерфейса для поиска формализованных знаний

Управление процессом ознакомления с знаниями в соответствии с нормативами



Управление процессом взаимодействия с экспертами

Рис. 1 - редактирование классификаторов

Возможности для формализации знаний:

Ведение расширяемого списка иерархических справочников и классификаторов

Привязка любых информационных объектов в системе (курсов, тестов, документов, блогов, обсуждений) к карте знаний (классификаторам)

Просмотр классификаторов на портале в виде иерархических деревьев или в виде интерактивной карты (аналог mind map)

Построение "облака тегов" на основе ключевых слов

Формирование профилей знаний и автоматических ознакомлений с материалами портала на их основе



Рис. 2 - "облако" тэгов на портале

Возможности для управления взаимодействием с экспертами:

Страница эксперта, формирование базы часто задаваемых вопросов

Учет вопросов, заданных экспертам, оценка ответов экспертов, рейтинг экспертов

Формирование базы лучших практик (Best practice) на основе ответов экспертов



Рис. 3 - карта знаний (тематический классификатор) на портале.

Почему ведущие компании внедряют систему WebTutor?

Кто выигрывает от внедрения системы:

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

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

Линейные руководители - система предоставляет дополнительные инструменты для оперативного управления персоналом

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

Сколько времени занимает внедрение системы?

Как правило, внедрение системы занимает от 3 до 6 месяцев. Сроки внедрения существенно зависят от таких факторов как: степень интеграции с ИТ-инфраструктурой заказчика, количество внедряемых модулей, объем требуемых настроек системы. Более подробную информацию можно прочитать в разделе "Внедрение системы"

Где находится система - в сети Интернет или в корпоративной сети?

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

Каких ИТ-специалистов нам придется привлекать? Потребуется ли нам выделенный ИТ-специалист для сопровождения системы?

В зависимости от степени интеграции с ИТ-инфраструктурой, возможно, к проекту на стандии внедрения придется привлекать специалистов по сетям, базам данных, почтовой системе, системе учета персонала и т.п. Более подробную информацию о команде проекта можно прочитать в разделе "Внедрение системы". Мы также рекомендуем привлечь на время внедрения системы координатора от ИТ-подразделения, который поможет организовать взаимодействие между различными ИТ-специалистами заказчика и командой внедрения WebSoft. После внедрения системы выделенный ИТ-специалист для сопровождения системы не требуется. В большинстве случаев систему (вместе с множеством других систем) сопровождает соответствующая служба в ИТ-подразделении компании.

Какой у вас принцип ценообразования? Сколько будет стоить система на 1000 пользователей?

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

Какой сервер нам понадобится на 500 (1000, 2000, ...) одновременно работающих пользователей?

Для того, чтобы можно было оценить требования к аппаратуре, заказчик должен сформулировать свои бизнес-требования к системе. Бизнес-требования должны содержать оценку количества пользователей системы, перечень операций, которые они должны выполнить, а также время, в течение которого будут выполняться эти операции. Пример бизнес-требований: "В течение 1 часа в систему войдут 1000 сотрудников, каждый из которых откроет главную страницу портала, каталог курсов, подаст заявку на обучение и откроет до 30 страниц учебных материалов". Более подробную информацию можно прочитать в разделе "Производительность системы". Например, для реализации приведенного выше бизнес-требования будет достаточно севера под управлением операционной системы Windows 2003 Server, с 3GB оперативной памяти и двумя процессорами Xeon (или одним 2-х ядерным процессором).

Что входит в техническую поддержку системы?

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

Как вы будете обновлять нам версии?

В стандартную техническую поддержку системы входит обновление версий системы. Если у вас действует техническая поддержка, и вы узнали (на клиентском портале или получив от нас рассылку по электронной почте) о новой версии системы, вы можете обратиться в службу технической поддержки и получить ссылку для загрузки дистрибутива новой версии системы через сеть интернет. Установка обновления, как правило, занимает не более 1 часа. При обновлении версии все ранее сделанные настройки и данные сохраняются. Более подробную информацию можно прочитать в разделе "Техническая поддержка".

Сколько новых сотрудников нам нужно нанять (привлечь) для эксплуатации системы?

Это зависит от того, какие модули вы внедряете. При внедрении системы дистанционного обучения вам, скорее всего, потребуется как минимум один специалист, который будет отвечать за разработку и/или внесение в систему новых курсов, публикацию материалов на учебном портале, формирование тестов, назначение обучения, формирование отчетов. Т.к. это новые функции, то вам потребуется новый сотрудник. При автоматизации работы учебного центра в новых специалистах, как правило, необходимости нет (если только учебный центр не создается "с нуля"). До внедрения системы учет скорее всего уже велся - на бумаге или в файлах Excel; те же люди, которые делали это "по старинке", начнут вести учет в системе, только им станет проще и удобнее это делать. Автоматизация процедур оценки, как правило, существенно сокращает трудозатраты на ее администрирование. Так что вполне возможно вам удасться обойтись меньшим количеством персонала при аналогичных или даже больших объемах оценочных процедур.

Можем ли мы интегрировать систему с 1С (Босс-Кадровик, SAP, ...)?

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

Как мы научимся работать с системой?

Все клиенты, приобретающие систему, получают документацию по работе с ней, электронные учебные курсы по администрированию системы, доступ к базе знаний на клиентском портале, а также доступ к вебинарам. Более подробная информация доступна в разделе "Обучение".

Что должны знать и уметь наши сотрудники, чтобы управлять системой?

От прикладных администраторов системы (как правило, это сотрудники HR-подразделений) не требуется никаких специальных навыков, а тем более навыков программирования. Вполне достаточно навыков опытного пользователя компьютера и офисных приложений и желания изучать новые технологии. Желательно, но совсем не обязательно, иметь представление о формате HTML, а также работе с какими-либо графическими редакторами.

Можно ли пользоваться системой в режиме аренды?

Да, возможно. См. раздел "Аренда приложений".

Мы (HR) хотим внедрить систему. Как нам обосновать необходимость в ней перед нашим руководством?

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

2.2 Выгрузка электронных курсов через CourseLab

CourseLab® - это мощное и одновременно простое в использовании средство для создания интерактивных учебных материалов (электронных курсов), предназначенных для использования в сети Интернет, в системах дистанционного обучения, на компакт-диске или любом другом носителе.

Ключевые особенности CourseLab:

создание и редактирование учебного материала в среде WYSIWYG - что Вы видите, то и получите в результате;

CourseLab 2.0 сертифицирован на соответствие стандарту SCORM 2004, уровень соответствия: CP SCORM 2004 Conformant;

не требует от автора знания языка HTML или каких-либо языков программирования;

встроенные средства построения тестов

объектный подход позволяет - как из детских кубиков - строить учебный материал практически любой сложности;

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

встроенные механизмы анимации объектов;

возможность вставки в курсы любого Rich-media содержимого - Macromedia® Flash®, Shockwave®, Java®, видео в различных форматах и т.п.;

простые механизмы вставки и синхронизации звукового сопровождения;

возможность импорта в учебный материал презентаций из формата Microsoft® PowerPoint®;

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

простой встроенный язык описания действий;

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



Рис. 1. Интерфейс редактора CourseLab

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

тесты для оценки кандидатов на должность;

ознакомительные и вводные материалы для новых или перешедших на новую должность сотрудников;

ролевые игры для формирования производственных навыков или навыков продаж;

интерактивные справочники по продуктам и услугам;

демонстрации продуктов, включая имитации программного обеспечения;

путеводители по процедурам, порядку оформления документов;

сертификационные тесты и экзамены;

опросы сотрудников и клиентов;

on-line тренинги;

и многое другое.

При создании CourseLab мы уделяли особое внимание сокращению времени работы над электронным учебным курсом. Следующие особенности CourseLab служат этой цели:

Набор готовых шаблонов модулей

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

Библиотека готовых объектов

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

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

Возможность неоднократного использования объектов

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

Импорт презентаций из Microsoft PowerPoint

Если у Вас уже есть готовые презентации в формате PowerPoint, они могут легко и быстро быть импортированы в учебный модуль. При необходимости можно поправить импортированный материал уже в редакторе CourseLab.

Глобальные установки шрифтов

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

Простая публикация учебных курсов

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

2.3 Верстка сайта, создание иконок, иллюстраций для сайтов

HTML изначально задумывался как язык, которому не нужны средства оформления, такие как цвет, размер, рамки или что-то подобное. Разработанный в Европейском институте физики частиц (CERN), HTML был игрушкой ученых, их, прежде всего, интересовала логика информации, а не её визуальное представление. Тогда ещё не существовало понятия веб-дизайна и вёрстки как таковой, все сайты по своему оформлению были практически однотипными, в стиле, называемом сейчас «академический дизайн». Пример до сих пор можно посмотреть на lib.ru.

Однако пользователи преимущественно думали иначе и, глядя на красивую картинку, отдавали предпочтение именно ей. Разработчики браузера Netscape прекрасно понимали это и вводили в HTML новые теги, улучшающие внешний вид документа. Эти теги не были стандартизированы и работали только в Netscape, что в эпоху повального засилья этого браузера, не имело значения. Доля Netscape составляла более 90% от всех существующих браузеров.

Влияние Netscape оказалось губительным для академического дизайна, фактически похоронив его и оказалось благотворным для становления веб-дизайна. Разработчики сайтов поняли, что дизайн это не просто разноцветный текст и вставленные наобум картинки. Это возможность красочно и эффектно подать материал, придать определённое настроение сайту, заинтересовать посетителя и задержать его на ресурсе. Дизайн стал непосредственным этапом разработки сайта, за которым последовала и вёрстка. Нарисованные в Фотошопе макеты следовало превратить из одной картинки в набор изображений, стилевых и HTML-файлов, способных быстро загружаться по сети, сохраняя при этом особенности дизайна.

Век Netscape  продолжался до тех пор, пока часть рынка браузеров не захватила Microsoft со своим браузером Internet Explorer, что в итоге принесло только головную боль разработчикам сайтов. Разные подходы Netscape и Internet Explorer к отображению сайта, противоречивая поддержка стилей и тегов, большое количество мелких ошибок привело к тому, что сайт приходилось тестировать и отлаживать долгое время.

Устаревшие версии браузеров не в полной мере поддерживали CSS (Cascading Style Sheets, каскадные таблицы стилей), поэтому код представлял собой окрошку из HTML и CSS. Это привело к тому, что для макетов стали применяться таблицы с невидимой границей, на долгое время ставшими стандартом де-факто.

Следующим этапом развития разработки сайтов стало рождение спецификации, которая была названа Cascading Style Sheets Level 2, сокращенно CSS2. Следом появилось обновление Cascading Style Sheets Level 2 Revision 1 (CSS 2.1), которое используется по сей день. Выпуск новых версий браузеров, поддерживающих, пусть и не в полной мере, эту спецификацию, серьёзно облегчил работу над сайтами. В итоге, начал происходить постепенный переход от табличной вёрстки к блочной или, как она ещё называется, вёрстке слоями, в которой расположение элементов на странице и их вид задаётся через стили.

В настоящее время уже можно заявить, что табличная вёрстка в большинстве своём является архаизмом. Тем не менее, существует ещё множество сайтов вроде yandex.ru, artlebedev.ru и других, свёрстанных именно при содействии таблиц. Такой консерватизм связан со следующими обстоятельствами.

Вёрстка слоями сложнее, чем таблицами, поскольку требует от разработчика глубоких знаний спецификации CSS.

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

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

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

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

HTML верстка. Урок 1: Создание "каркаса" страницы

Итак, у нас есть макет страницы (допустим, в формате Photoshop). На рисунке - его уменьшенное изображение. Теперь откройте html-страницу, которую мы должны сверстать из этого макета. Она выглядит абсолютно одинаково в Internet Explorer, Opera и Firefox. Попробуйте свернуть окно до размеров 640х480, а потом развернуть на весь экран. Как видите, вся страница хорошо растягивается, даже формы ввода:) Теперь отключите изображения в вашем браузере - страница осталась вполне читаема.

В уроках, которые вы сейчас читаете, мы подробно рассмотрим технологию такой верстки, чтобы html-страница:

не зависимо от разрешения экрана, браузера (возьмем самые популярные: IE, Firefox, Opera), темы оформления Windows и настроения вебмастера, выглядела бы одинаково - как на макете;

была "читаемой" даже при отключенной графике;

имела легкий, удобный для редактирования html-код;

растягивалась на полную ширину экрана.

Создайте файлы index.html и style.css, в процессе верстки мы постараемся большую часть форматирования вынести в style.css:

размер html-страниц будет меньше;

если вы в будущем захотите отредактировать дизайн сайта, вам не понадобится менять все html-файлы - только style.css.

Наметим "каркас" нашей страницы. Удобно делать его в виде таблицы 100%-й высоты, разделенной на 3 горизонтальные области - Top, Text и Bottom. Top и Bottom имеют фиксированную высоту, а ячейка Text растягивается по высоте на всю оставшуюся часть экрана. Таким образом, даже когда на странице мало или совсем нет текста, Bottom всегда находится там, где ему положено - внизу.

Мы сделаем разметку немного сложнее, т.к. нам нужно, чтобы блоки Search, News, Copyright были равны по ширине. Лучший способ этого добиться - поместить их в ячейки таблицы, расположенные одна над другой.

Вот получившийся html-код (я специально поставила параметр border="1" в теге <table> и написала внутри каждой ячейки ее название, чтобы мы удостоверились, что сделали разметку правильно. Потом все это нужно будет удалить.

index.html

<title></title>

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

<table border="1" class="main">

<tbody>

<tr>

<td class="top" colspan="2">top</td>

</tr>

<tr>

<td class="search">search</td>

<td class="topmenu">topmenu</td>

</tr>

<tr>

<td class="news">news</td>

<td class="text">text</td>

</tr>

<tr>

<td class="copyright">copyright</td>

<td class="bottommenu">bottommenu</td>

</tr>

</tbody>

</table>

style.css

table.main {width: 100%; height: 100%;}

td.top {}

td.search {}

td.topmenu {}

td.news {width: 30%;}

td.text {width: 70%; height: 100%;}

td.copyright {}

td.bottommenu {}

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

1) Чтобы не было промежутков между таблицей и границами экрана, пишем:

html, body {margin:0px; padding:0px;}

2) Чтобы убрать зазоры между ячейками, добавляем в свойства таблицы border-collapse: collapse (это аналог html-параметра cellspacing="0").

table.main {border-collapse: collapse;}

3) Чтобы убрать отступы внутри ячеек, пишем:

td {padding: 0px;}

Также нужно прописать несколько общих параметров, которые будут использоваться по умолчанию:

5) Цвет фона для и элементов форм. Когда фон белый, об этом часто забывают. Тогда у пользователей, установивших какую-нибудь экзотическую тему оформления Windows, некоторые ячейки могут оказаться, например, зелеными :)

6) Когда большая часть текста будет написана одним шрифтом (в нашем случае - Tahoma 11px, черный), имеет смысл указать его сразу для всех ячеек и элементов форм.

7) По умолчанию текст и изображения располагаются (вертикально) в середине ячейки. Обычно удобнее, чтобы они подтягивались к верхнему краю. Для этого нужно указать vertical-align: top для всех ячеек.

body, input, select, textarea {background-color: #ffffff;}

td, input, select, textarea {

font-family: Tahoma;

font-size: 11px;

color: #000000;

vertical-align: top;

}

Создание иконки для сайта:

нахожу подходящую картинку или рисую (редактирую) новую;

открываю её в XnView и изменяю размер изображения до 16х16 пикселей;



?

затем сохраняю как favicon.ico (где «favicon» -- имя иконки, а «.ico» -- расширение).

?

Всё -- иконка для сайта готова.

Нюансы способа:

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

Способ проверялся только в XnView. Он при сохранении перекодирует картинку как надо.

§ 2. Создание иконки для сайта

Собственно, сохранив картинку как favicon.ico, мы и создали иконку для сайта.

§ 3. Как установить иконку на сайт

Копируем наш файл favicon.ico в корневую папку сайта (там, где лежит главная страница сайта) и всё. Браузеры, поисковые системы и прочие программы с сервисами автоматически нашу иконку найдут и отобразят. Главное, чтобы она называлась favicon.ico и лежала в корневой папке сайта.

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

§ 4. Как поменять иконку сайта

Заменить файл favicon.ico, лежащий на хостинге, на свой, созданный способом выше.

§ 5. Зачем оно вообще надо

Что даёт наличие иконки у сайта? Ну, самое важное это то, что сайт получает свой опознавательный знак. В браузере:

В поисковой системе Яндекс (Google иконки сайтов не отображает):

В закладках браузера:



И при отображении в других программах и сервисах, коих большое число.

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

2.4 Отрисовка макета сайта

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

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

Технические моменты

Определение границ сайта

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

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

Макет должен быть пригоден для адаптивной верстки, а при просмотре на мониторах Full HD полезное пространство сайта не должно растягиваться на всю ширину экрана, дабы сохранить читабельность и адекватное восприятие небольших изображений. Таким образом, при ширине монитора больше 1280 пкс, сайт будет сохранять фиксированную ширину полезного пространства, а при меньших разрешениях, полезное пространство будет пропорционально уменьшаться.

Эскиз



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

Целевой аудиторией фирмы являются, преимущественно, мужчины 25-50 лет, занимающиеся поиском поставщиков грунта для своих строительных компаний, поэтому сайт должен выглядеть респектабельно (высокий достаток аудитории), современно и легко (для молодой части аудитории). Мы будем использовать светлые тона для основы и немного темного с оранжевым для контрастности и акцентировании внимания на важных элементах сайта.

Итог: Цветовая схема, основные элементы стиля определены, продолжаем.

Расположение блоков



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

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

В дизайне используем острые углы и простоту форм для большего расположения со стороны респектабельной аудитории.

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

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

Итог: Наш сайт стал чуть сочнее и серьезнее - неплохо.

Поиск решений



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

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

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

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

Итог: Сайту не хватает респектабельности, нужно определяться со стилем.

Поиск решений №2

Небольшая коррекция логотипа и меню. Шапка стала спокойнее.

Коррекция дополнительной навигации. Теперь она не акцентирует на себе столько внимания.

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

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

Итог: Мы, однозначно, приблизились к желаемому результату. Дизайн повзрослел и полегчал.

Главное меню



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

Небольшая коррекция по цвету: переходим от оранжевого к насыщенно рыжему.

Очень важное решение: перенести меню под шапку. Таким образом, мы визуально отделяем меню и делаем на нем больший акцент - это то, что нам было нужно.

Итог: Шапка сайта стала лучше по всем параметрам. Мы, наконец, определились с расположением главного меню.

Двухцветный логотип



Используем второй цвет в логотипе (белый). Это делает его ярче и читабельнее.

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

Итог: Хорошая работа -- логотип стал ярче, а шапка еще лаконичнее.

Доводка главного меню

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

Возвращаем бегущей строке рыжий цвет с острыми углами.

Итог: Главное меню более рационально использует пространство своего блока, что добавляет порядка шапке.

Стиль определен

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

Выравниваем панель поиска с правой границей кнопки «Скачать каталог».

Вместо стрелок в дополнительной навигации мы используем окружности.

Мы также используем надписи на слайдере без отступа слева.

Начинаем подбирать текстуру для фона.

Итог: Удаление полей делает дизайн более техничным и простым. С этого момента можно считать, что мы нащупали стиль будущего сайта и двигаемся в верном направлении.

Скроллер и доставка



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

Продолжаем работу над скроллером. Используем жирные заголовки и бледные описания к ним. Вместо иконок пока используем окружности.

Доставка - важная часть работы фирмы, поэтому не стесняемся уделить этой теме особое внимание. Немного графики, информирующей клиента о быстрой доставке к дому из любой точки России. В дальнейшем мы можем сделать эту графику интерактивной: пользователь указывает пункт доставки (город, район), а сайт выдает примерные сроки.

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

Лента новостей и футер



Прикидываем примерное расположение блока с последними новостями фирмы.

Отрисовываем предположительные границы футера.

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

Доводка ленты новостей



Графика с доставкой становится контрастнее за счет осветленного фона.

По аналогии со слайдером, убираем лишние поля у ленты новостей.

Итог: Теперь верх и низ сайта выполнены в едином стиле.

Слайдер с предложениями

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

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

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

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

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

Под футером оставляем немного пространства для предполагаемого копирайта.

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

Итог: Нижняя половина сайта приобретает законченный вид.

Небольшая коррекция по цвету в сторону еще более насыщенного рыжего.

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

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

Дабы использовать больше свободного пространства шапки - возвращаем туда кнопку скачивания каталога. Добавляем в нее пиктограмму и возможность скачивания в двух форматах на выбор (pdf и doc).

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

Добавляем тематические пиктограммы к скроллеру с ховер-эффектом в оранжевый цвет.

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

Добавляем фотографии к ленте новостей. Используем тонкие стрелки для заголовков. А для просмотра полной ленты отрисовываем рыжую кнопку.

Заполняем футер четырьмя столбцами: контактами, иконками социальных сетей (соответствующих общему стилю), мнениями клиентов о компании, типами грунта и формой обратной связи. Используем пунктирные разделители для более четкого визуального разделения на столбики.?Итог: Главная страница сайта выглядит полностью законченной. Вся основная информация по фирме доступна и легко читается. Нескольких секунд изучения достаточно, что бы понять сферу деятельности фирмы. Дизайн прост и информативен - поставленная задача выполнена!

2.5 Создание баннеров

Шаг 1. Создайте новый документ размером 250 х 250 пикселей и установите разрешение (resolution) до 70 пикселей. Цвет фона для баннера будет такой # f2f2f2.



Шаг 2. Поместите логотип в верхней центральной части баннера



Шаг 3. Напишите слоган под логотипом.

Шаг 4. Нарисуйте прямоугольник  и установите цвет # b90909.

Откройте диалоговое окно Стили слоя (layer styles)и настройте  Тень (Drop shadow). Уменьшите расстояние (distance ) и размер  (size ) на 2px.

Теперь добавьте Наложение градиента (Gradient Overlay) и установите режим смешивания на Умножение  (Multiply) с непрозрачностью 28%.

Добавьте обводку и уменьшите её  размер до 1 пикс. Установите цвет # a31b1b.

Шаг 5. Добавим список рекламных предложений. У нас это будет Tutorials (Уроки), Articles (Статьи), Tips (Советы), Freebies (бесплатно),  Basix (Азы), Videos (Видео), Premuim (Премиум) как показано на рисунке.

Растрируйте текстовые слои и создайте Обтравочную маску (Сreate a clipping mask).

Шаг 6. Теперь поместите привлекательную картинку. В нашем случае мы использовали значок премиум-программы для PSDTUTS, но вы можете использовать все, что подходит вам.



Шаг 7. Добавим ещё нужный текст ниже картинки, которую мы вставили в шаге 6.

Шаг 8. Создайте овальную фигуру  и установите цвет # fdfcfc.



Откройте диалоговое окно Стили слоя (layer styles) и настройте  Тень (Drop shadow). Уменьшите расстояние (distance ) и размер  (size ) на 1px.

Включите и проверьте Внутреннее свечение (Inner glow) и оставьте в настройках  все как есть.



Добавьте Наложение градиента (Gradient Overlay) с Непрозрачностью (Opacity)  6%



Шаг 9. Теперь, когда мы закончили создание всех наших слоёв, мы готовы приступить к работе по анимации. Во-первых, откройте панель анимации  Окно - Анимация (Window> Animation). Я буду использовать панель анимации по Временной шкале (Timeline Animation), а не в Покадровой анимации (frame animation).

Примечание: Эта функция доступна только в Photoshop Extended.

Теперь устанавливаем все слои видимыми, но уменьшаем их непрозрачность до 0%. Фон не трогаем.



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

Прим. переводчика: ключевые кадры можно будет перемещать  мышкой. Так же можно выделить несколько ключевых кадров для перемещения.

?

?

?

?

?

?

?

?

??

?



Шаг 11. Ваша Временная шкала (Timeline Animation),  должна выглядеть примерно так, как ниже.

?

Шаг 12. Ну вот, мы и завершили нашу анимацию. Нажмите кнопку Пуск (Play), чтобы увидеть результат. Вы можете всё подстроить в случае необходимости. Чтобы сохранить ваш баннер, перейдите в меню Файл - Сохранить для веб и устройств (File - Save for Web & Devices). Установите настройки как  на скриншоте ниже и нажмите кнопку Сохранить.

Вот и все! Вот такой баннер у нас получился!



3. ОПИСАНИЕ ДОЛЖНОСТНЫХ ИНСТРУКЦИЙ ПО МЕСТУ ПРОХОЖДЕНИЯ ПРАКТИКИ

3.1 Техника безопасности на предприятии

Общие положения:

К работе на ПЭВМ допускаются лица, изучившие инструкцию по технике безопасности (ТБ) при работе на электрооборудовании, а также прошедшие инструктаж по ОТ на рабочем месте;

ПЭВМ может управлять один оператор, имеющий первую квалификационную группу по ТБ;

ПЭВМ могут обслуживать один инженер-специалист по ВТ и один техник-электромеханик, имеющие квалификационную группу по ТБ не ниже третьей.

До начала работы.

Перед эксплуатацией при отключенном питании необходимо убедиться:

- в наличии и исправности защитного заземления;

- в наличии и соответствии току предохранителей;

- в том, что все токоведущие части закрыты и недоступны для прикосновения.

Во время работы.

- все операции по монтажу и демонтажу ПЭВМ должны производиться при отключенной вилке сетевого кабеля питания;

- при эксплуатации ПЭВМ должны соблюдаться следующие меры безопасности:

- запрещается снимать крышку с источника питания, производить коммутацию, вскрывать корпуса устройств ПЭВМ во включенном состоянии;

- запрещается подключение ПЭВМ к сети переменного тока 220 В при неисправности кабеля сетевого питания;

- запрещается во время работы ПЭВМ замыкать и размыкать разъёмные соединения;

- снятие и установка модулей в ПЭВМ необходимо производить только при отключенном питании;

При ремонтных работах группа должна состоять из двух и более человек с квалификационной группой по электробезопасности не ниже третьей каждый; При ремонтных работах необходимо пользоваться паяльником на 36 В с заземлённым источником; При работах со снятой крышкой (при техническом обслуживании) ПЭВМ должна быть подсоединена к контуру «земля», имеющемуся в

помещении для эксплуатации с помощью медного изолированного провода сечением не менее 15 мм, оканчивающегося несъёмными наконечниками, заземляющий проводник присоединяют к винту защитного заземления расположенному на источнике питания ПЭВМ;

...