Отчет по производственной практике в городе Артеме

К серверным языкам относятся: PHP, ASP, ASPX, Perl, SSI, XML, DHTML, XHTML и другие. Когда пользователь дает запрос на какую-либо страницу (переходит на неё по ссылке или вводит адрес в адресной строке своего браузера), то вызванная страница сначала обрабатывается на сервере, то есть выполняются все программы, связанные со страницей, и только потом возвращается к посетителю по сети в виде файла.

Работа программ уже полностью зависима от сервера, на котором расположен сайт, и от того, какая версия того или иного языка поддерживается. К серверным языкам программирования можно отнести: PHP, Perl, Python, Ruby, любой .NET язык программирования, Java, Groovy.

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

В качестве изучаемых языков, с которыми будет проводиться большая часть работы, были выбраны HTML и CSS.

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

Текстовые документы, содержащие разметку на языке HTML (такие документы традиционно имеют расширение.html или .htm), обрабатываются специальными приложениями, которые отображают документ в его форматированном виде. Такие приложения, называемые «браузерами» или «интернет-обозревателями», обычно предоставляют пользователю удобный интерфейс для запроса веб-страниц, их просмотра (и вывода на иные внешние устройства) и, при необходимости, отправки введённых пользователем данных на сервер. Наиболее популярными на сегодняшний день браузерами являются GoogleChrome, MozillaFirefox, Opera, InternetExplorer и Safari.

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

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

HTML-документы могут быть созданы  при помощи любого текстового  редактора или специализированных HTML-редакторов и конвертеров (например, AdobeDreamWeaver, PSPad). Выбор редактора, который будет использоваться для создания HTML-документов, зависит исключительно от понятия удобства и личных пристрастий программиста.

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

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

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

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

2 Прохождение практики. Разработка  сайта для филиала ВГУЭС»

2.1 Поиск проблемы

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

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

Филиала ВГУЭС

В ходе практики нужно былосоздать сайт визитка для ВГУЭ.

были поставлены следующие задачи:

• провести анализ нынешнего сайта компании и выявить недостатки;
• осовременить дизайн сайта дляВГУЭС используя современные наработки в области веб-программирования.

2.2 Дизайн сайта

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

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

 

Рисунок 1 – Сайт-визитка Филиала ВГУЭС в городе Артеме

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

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

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

В ходе анализа интернет-сайта филиалаВГУЭС были выявлены три основные проблемы:

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

Обновленная версия сайта для ВГУЭС была разработана в соответствии с современными тенденциями в области проектирования веб-ресурсов. Основными отличиями от оригинального сайта являются:

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

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

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

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

2.3 Техническая реализация  сайта

Как и было сказано выше, сайт филиала ВГУЭС успел устареть в техническом плане. Для его обновления и подгонки под современные стандарты было решено использовать инструментарий WebSite X5.

WebSite X5 это программа для создания современных, кросс-браузерных и стандартизованных интерфейсов. Продуманная структура кода HTML, JavaScript и CSS дает возможность создавать множество самых разнообразных элементов интерфейса и сетку сайта.

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

Основные инструменты WebSite x5:

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

Благодаря Bootstrap структура сайта была полностью переработана. В новой версии главная страница поделена на три основные части. Со стороны кода они представляют собой div-контейнеры с назначенным css-классом, который определяет функционал и наполнение самого контейнера.

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

AJAX, или, более длинно, Asynchronous Javascript And Xml - технология для взаимодействия с сервером без перезагрузки страниц.За счет этого уменьшается время отклика и веб-приложение по интерактивности больше напоминает десктоп.

Технология AJAX, как указывает первая буква A в ее названии - асинхронна, т.е браузер, отослав запрос, может делать что угодно, например, показать сообщение 
об ожидании ответа, прокручивать страницу, и т.п. Для обмена данными с сервером используется специальный объект XmlHttpRequest, который умеет отправлять запрос и получать ответ с сервера.

Типичное AJAX-приложение состоит как минимум из двух частей. Первая выполняется в браузере и написана, как правило, на JavaScript, а вторая - находится на сервере и написана, например, на Ruby, Java или PHP. Смысл AJAX - в интерактивности и быстром времени отклика.

Так как подгрузка совершается с помощью ajax-скрипта, это дает несколько преимуществ:

• Экономия трафика, использование AJAX позволяет значительно сократить трафик при работе с веб-приложением благодаря тому, что вместо загрузки всей страницы достаточно загрузить только изменившуюся часть;
• Уменьшение нагрузки на сервер, при правильной реализации, AJAX позволяет снизить нагрузку на сервер в разы. В частности, все страницы сайта чаще всего генерируются по одному шаблону, включая неизменные элементы для генерации которых требуются обращения к разным файлам, время на обработку скриптов (а иногда и запросы к БД) — всё это можно опустить, если заменить полную загрузку страницы генерацией и передачей лишь содержательной части;
• Ускорение реакции интерфейса, поскольку загрузка изменившейся части значительно быстрее, то пользователь видит результат своих действий быстрее и без мерцания страницы (возникающего при полной перезагрузке);