Понятие и классификация web-технологий
Развитие современной компьютерной техники и внедрение новейших технологий положили начало нового направления жизни на Земле. За довольно короткий промежуток времени развития микроэлектроники и кибернетики произошло много изменений.
Прогрессивное развитие техники вызвало появление новых программных продуктов. С каждым годом внедряется все большее и большее количество языков программирования. Все они ориентированы, прежде всего, на целевую аудиторию.
Развиваются не только компьютеры, но и сети. Если еще несколько десятков лет назад Интернет представлял собой небольшую частную сеть, то теперь это гигантская система взаимосвязанных компьютеров, без которой, возможно, мы не сможем представить себе жизнь.
Интернет -- это не только "прохладный бассейн", в котором так комфортно чувствуют себя весьма "перегревшиеся" люди, но и место, где можно "потрогать" практически любую горячую тему, не опасаясь при этом обжечься .
Web-технология полностью перевернула представления о работе с информацией, да и с компьютером вообще. Оказалось, что традиционные параметры развития вычислительной техники - производительность, пропускная способность, емкость запоминающих устройств - не учитывали главного "узкого места" системы - интерфейса с человеком. Устаревший механизм взаимодействия человека с информационной системой сдерживал внедрение новых технологий и уменьшал выгоду от их применения. И только когда интерфейс между человеком и компьютером был упрощен до естественности восприятия обычным человеком, последовал беспрецедентный взрыв интереса к возможностям вычислительной техники.
Информация, доступная пользователям Internet, располагается на компьютерах (Web-серверах), на которых установлено специальное программное обеспечение. Значительная часть этой информации организована в виде Web-сайтов. Каждый из них имеет свое имя (адрес) в Internet. Web-сайт - это информация, представленная в определенном виде, которая располагается на Web-сервере и имеет свое имя. Для просмотра Web-сайтов на компьютере пользователя используются специальные программы, которые называются браузерами. Наиболее распространенными браузерами в настоящее время являются Internet Explorer и Netscape Navigator. Взависимости от того, какое имя сайта мы зададим в строке "Адрес", браузер будет загружать в свое окно соответствующую информацию.
Web-сайт состоит из связанных между собой Web-страниц. Web-страница представляет собой текстовый файл с расширением *.htm, который содержит текстовую информацию и специальные команды - HTML-коды, определяющие в каком виде эта информация будет отображаться в окне браузера. Вся графическая, аудио и видео информация непосредственно в Web-страницу не входит и представляет собой отдельные файлы (рисунок 1 Приложение А) .
Современные web-приложения -- это, в основном, порталы, предоставляющие услуги, которыми нельзя воспользоваться откуда-либо еще, Одно из неудобств подобных сервисов -- сложность обмена информацией между компаниями. В частности, даже контактную и другую личную информацию приходится на каждом таком сайте вводить заново.
В настоящее время с точки зрения назначения различают три основных типа порталов:
Публичные, или горизонтальные, порталы (называемые иногда мегапорталами), такие как Yahoo, Lycos, Excite, Rambler. Такие порталы нередко являются результатом развития поисковых систем. Предназначены они для самой широкой аудитории, что отражается на содержании предоставляемой ими информации и услуг. Как правило, эта информация носит общий характер, равно как и предоставляемые услуги (электронная почта, новостные рассылки и так далее).
Вертикальные порталы. Этот вид порталов предназначен для специфических видов рынка и обслуживает аудиторию, пользующуюся услугами этого рынка или работающую на нем. Примерами таких порталов могут служить, например, туристические агентства, предоставляющие услуги по бронированию мест в гостиницах, заказу и доставке билетов, доступу к картам и сведениям об автомобильных маршрутах, либо порталы типа B2B (business-to-business), позволяющие своим клиентам реализовывать совместные бизнес-операции (например, выбирать поставщиков и осуществлять закупку товаров, проводить аукционы).
Корпоративные порталы предназначены для сотрудников, клиентов и партнеров одного предприятия. Пользователи такого портала получают доступ к предназначенным им сервисам и приложениям в зависимости от их роли и персонального профиля.
Другие наиболее распространённые web-приложения:
Региональные Интернет-порталы, универсальные по своему направлению, но ограниченные географией заинтересованных посетителей (e1);
Поисковые системы -- это Интернет-порталы, которые предназначены для того, чтобы предоставить их посетителю возможность найти сайты, на которых встречаются заданные слова или целые фразы (metabot);
Каталог -- это коллекция ссылок на сайты. Зачем же нужны каталоги, если есть поиск? Очень часто мы не знаем точно, что нам нужно, не можем это сформулировать парой слов (mail);
Электронные доски объявлений - являются местом в Интернет, где практически любой желающий может оставить информацию ознакомительного, пригласительного или рекламного характера;
Форумы -- это специальные сайты или разделы на сайтах, предназначенные для того, чтобы посетители, оставляя свои сообщения, обменивались мнениями;
Чаты - являются еще одним местом для общения в Интернет, только его назначение не обмен мнениями на какую-то тему, а просто времяпрепровождение;
Файлы для скачивания;
Фотогалереи;
Элементы статистики;
Хранение в интернете различной информации;
Серверы почтовых рассылок, они предлагают услуги по доставке информации широкому кругу читателей (subscribe);
Интернет-магазины и аукционы (ozon, molotok).
Требования к Web-приложениям
Отправной точкой в web-проекте является анализ целей сайта и функций, которые будут предложены пользователю.
Вторым этапом будет построение информационной архитектуры сайта.
После того как будут известны все материалы сайта и его структура, можно перейти к дизайну навигации и самих страниц .
Карта сайта
Необходимо разместить хорошо различимую ссылку на карту сайта на каждой странице. Страница с отображением карты по размеру не должна превышать двух страниц на экране пользователя. Используется два вида карт статические и динамические. Наиболее эффективно использование карты со статическим отображением информационной архитектуры, так как динамический вид приводит пользователя ещё в большую запутанность. Карта создана для того, что бы лучше сориентировать пользователя, поэтому на карте необходимо отображать не только текущее положение пользователя на сайте, но и те разделы, которые он уже посещал.
Главная страница
Главная страница сайта компании - это лицо сайта, обращённое ко всей сети (рисунок 2 Приложение Б). На главной странице чётко прописываются цели компании, при этом каждый элемент дизайна должен позволять пользователю ещё лучше разобраться в сайте и определиться с последовательностью действий для решения своих задач.
Именно с главной страницы большинство пользователей начинает путешествие по сайту. При этом наш сайт должен быть сделан так, чтобы люди, пришедшие на сайт по глубокой ссылке, чувствовали себя комфортно. Для этого необходимо на каждой странице сайта разместить:
название компании или логотип в левом верхнем левом углу
индивидуальный слоган для сайта, состоящий из одного предложения
Нельзя предполагать, что пользователь попал на данную страницу, преодолев весь путь от начала до конца. Вполне возможно, что он не видел той информации, которую мы указали на страницах верхнего уровня иерархии. При глубоких ссылках мы должны сориентировать пользователя по месту, сообщить ему, где он сейчас находится на сайте, указав на странице цепочечную ссылку. Если есть необходимость, чтобы какая-то страница не индексировалась в поисковиках, необходимо в элементе "HEAD" ввести .
В разделе "О нас" необходимо представить основные сведения о компании:
состав верхнего управляющего звена (с библиографическим списком и фотографиями);
контактная информация;
философия организации (видение бизнеса, связи с обществом, стремления);
основные исторические вехи;
Пространное объяснение в верхней части страницы "О нас" помогает пользователю лучше понять то, что содержится в глубинах, этого раздала.
Текст должен быть легко читаемым, как молодыми, так и престарелыми пользователями, поэтому нам потребуется указывать размер шрифта в относительных единицах, а не в абсолютных, так как размер должны выбирать сами пользователи. При этом текст должен полностью умещаться на странице, что бы ни раздражать использованием горизонтальной прокрутки страниц сайта.
Пользователи редко читают web-страницы слово за словом. При первом просмотре выискивает факты и игнорирует детали, но найдя интересующий материал, может зайти и глубже. Примерная схема просмотра страницы выглядит так: первая строчка по горизонтали просматривается полностью, следующая просматривается не на всю глубину и с каждой последующей строкой выхватывание информации сокращается всё больше.
Поэтому пользователи часто просматривают только верхнюю часть статьи. И лишь самые заинтересованные читатели промотают страницу, и лишь эти немногие поймут историю статьи во всех деталях. Поэтому важно применять "принцип перевёрнутых пирамид", который состоит в том, что статья начинается с "вывода", после идёт сообщение о самой важной информации, а в конце даётся подоплёка события.
Для того, что бы страницы было удобно просматривать, мы будем использовать:
выделение ключевых слов;
грамотно составленные заголовки;
списки с маркерами;
один абзац на одну идею (пользователи пропустят все остальные идеи, если их не привлекут основные слова абзаца);
стиль перевёрнутой пирамиды (где статья начинается с заключения);
меньшее количество слов, чем в обычной статье;
минимум мало понятных терминов;
указание даты создания сообщения (что бы знать на сколько, оно актуально на данный момент);
контекстную информацию атрибута " ALT".
электронные заголовки часто выводятся вне контекста:
в списке статей на сайте;
в заголовках сообщений электронной почты;
в результатах поиска;
в закладках браузера.
При этом пользователи не должны обладать какими-то сверхзнаниями, что бы понять наш заголовок, если они будут пропускать текст под заголовками. По этой причине текст заголовка должен быть самостоятельной порцией информации, позволяющей понять его в отсутствие остальной части контента. При написании заголовка необходимо использовать нейтральный язык, и не применять: игры слов, "навороченности", "завлекалочек", прописных букв (так как создаётся впечатление, что мы кричим на пользователя)
Пользователи предпочитают содержательные заголовки. Чем короче микроконтент, тем легче его просматривать. Необходимо исключить использование одного и того же слова в начале каждой статьи и названия страницы, так как при использовании одновременно нескольких таких статей, будет трудно на панели или закладках выбрать необходимую статью.
При просьбе предоставить нам адрес электронной почты, необходимо сказать, здесь и сейчас, что именно пользователь будет получать, и как часто будете нарушать спокойствие его почтового ящика. Ссылки mailto должны быть использованы так, чтобы можно было точно понять, что перед нами почтовый адрес. Не размещать ссылки почты на именах, так как щелчок по имени должен вести на его биографию. При общении по электронной почте нет причин пользоваться конкретным именем одного из работников, если только пользователь не установил с ним личные отношения (письма от неизвестных людей чаще всего попадают в корзину).
Что бы поднять доверие к сайту необходимо использовать качественные графические изображения. При этом не стоит использовать большие изображения, по умолчанию. Желательно использовать эскизы, а при необходимости увеличивать их на столько, на сколько пожелает пользователь. Эскизы должны содержать всю основную информацию об изображении. На сайте правильнее будет использовать фотографии реальных работников и клиентов, а не фотомоделей с ослепительной голливудской улыбкой. Так же необходимо использовать хороший стиль письма и исходящие гипертекстовые ссылки на другие сайты. Не нужно использовать "рекламную воду", так как она несёт дополнительную эмоциональную нагрузку, и пользователям приходится тратить время на отсеивание гипербол от реальных фактов.
Привязанность
Классический путь увеличения привязанности к сайту - это публикация свежих материалов с определённой регулярностью (от ежедневных до ежемесячных). Для желающих необходимо организовать рассылки свежего материала. Почти 100% из тех, кто подписался, будут периодически заходить и на сам сайт, пока автор будет напоминать им о себе.
Дизайн сайта должен приспосабливаться к людям. Одним из вариантов такого приспособления служит профайл, но его заполнение требует терпения, из-за этого его заполняют устоявшиеся посетители сайта. Поэтому для отслеживания пользователей лучше применять "cookie", в файл которого заносится вся необходимая информация, а не нудную процедуру регистрации. Если всё же необходимо для безопасной работы регистрация, то не стоит создавать слишком строгие формы для ввода. Если есть возможность использовать автозаполнение и автоматически устанавливать курсор в первом поле формы.
Не стоит создавать формы для поиска по Internet, если пользователю будет необходимо, он воспользуется специальной поисковой системой.
Ссылки должны быть предсказуемы, пользователь должен знать, что произойдёт, если он нажмет на ссылку. Ясно указывать, что является ссылкой: если это текст пусть он будет цветным или подчёркнутым. Не скрывать различия между посещёнными и не посещёнными ссылками. Создавать ссылки с расчётом того что поисковые системы являются самыми важными посетителями, а они глухи и слепы по отношению к высоким технологиям. Оформить теги "title" так, чтобы они хорошо смотрелись в поисковых системах и закладках, поэтому начинать ссылки необходимо с ключевого слова.
Не допускать появления ломаных ссылок, так как другие сайты и поисковые системы не будут в этом случае на нас ссылаться.
При навигации по сайту предоставить пользователю самому, выбирать, как необходимо открывать страницы либо во всплывающих окнах, либо как-то иначе.
В WEB-е пользователи не обращают внимания ни на что, кроме своей цели, и реклама, которая отвлекает их от достижения цели, ими попросту игнорируется. Если наша реклама появится раньше, чем пользователь найдёт интересующий его материал, то, скорее всего она будет закрыта. И когда он выполнит свою основную задачу, и готов будет присмотреться к рекламе, он её попросту уже не увидит так как закрыл всплывающее окно. Поэтому никогда не стоит отвлекать пользователя от своей цели.
Когда пользователь набирает слова запроса на поисковом сервере, рекламные объявления которые выйдут в списке результатов запроса, будут непосредственно связаны с тем, что нужно человеку. И поэтому он читает эти объявления и щёлкает по ссылкам. Такая реклама стоит гораздо дешевле, чем распространение рекламных листовок.
Итак, секрет успеха в том, что бы совместить рекламу с целями пользователей.
отсутствие кнопки "Закрыть";
четко указывать, что произойдёт по щелчку по ней;
даёт дополнительную информацию о себе без надобности покидать текущую страницу.
Проведение оценочных работ
Для проведения оценочной работы необходимо привлечь от трёх до пяти участников. Каждый из них производит работу индивидуально. После чего их результаты сравниваются и приводятся к единому выводу. Тест проводится в два этапа:
- 1) понимание работы интерфейса;
- 2) концентрация внимания на определённых элементах.
Необходимо отдельное упоминание каждой проблемы, что бы ни повторять её в дальнейшем.
Сегодня речь пойдет о книге Сэмми Пьюривал Основы разработки веб-приложений» (ссылка на сайт издательства «Питер»), на английском она имеет название «Learning Web App Development »(ссылка на amazon.com). Тот счастливый случай, когда книга на русском стоит дешевле чем в оригинале 300 рублей против почти 20$ за электронную версию.
Однако, книги мы берем и читаем обычно не из-за того что они дешево или дорого стоят, а из-за того что они могут принести нам хоть какую-то пользу. Книга позиционируется как пособие для новичков, которые не имели дела с разработкой. В ней поэтапно описывается весь процесс создания приложений, плюс задания. Используются технологии как HTML, CSS, JavaScript, Express, Redis, Sublime text 3, git, MongoDB, Vagrant, Oracle VM VirtualBox, cloud foundry, а так же используются API twitter. Все это умещается на 272 листах, вместе с обложкой. Впечатляющий результат. Ниже можно почитать обо всем более подробно.
Автор на момент написания уже проработал около 10 лет преподавателем компьютерных дисциплин и фрилансером-консультантом JavaScript. Люди обычно начинают создавать что-то свое, когда не могут найти подходящее у других людей, так вышло и с этой книгой. Она создана под влиянием времени о том, как должна выглядеть современная веб-разработка. Возможно, этот курс подойдет не всем. Еще Сэмми Пьюривал честен и говорит, что эта книга не сделает из вас программистов, и скорее всего после прохождения курса вас никто не позовет на работу. Это так, но большое начинается с малого.
Книгу стоит читать активно, усевшись рядом с компьютером. Автор старается делать невозможное и показывает рецепты для Windows / Linux / MacOS, хотя некоторые рецепты за это время могут не работать, а веб-интерфейсы сайтов изменились, надо отдать должное, что он проделал огромный труд. Весь путь начинается с подготовки: с установки текстового редактора и браузера. От себя отмечу, что все делал в FireFox и не испытывал проблем, в одной из глав будет запуск «опасного кода», и вот firefox в отличии от google chrome может запускать его без всяких параметров. В целом первая глава не должна составить особых трудностей.
Во второй главе начинается рассказ о современном HTML, который можно использовать для создания статичных веб страниц, да и что кривить душой, это по-прежнему основа веб приложений. Может материал и не очень обширный, но даже если вы никогда не имели с ним дело, то даст общие понятия. А закрепить умения можно в многочисленных интернет курсах. Я например использовал codecademy ( и ссылка на курс learn HTML). Плюс со второй главы начинается простое использование git.
Третья глава открывает возможности CSS форматирования. Сами каскадные таблицы стилей сделали html файлы проще и чище, а еще их можно гораздо быстрее изменять и получать отличный результат. Для тех кому показалось мало этой главы могут попробовать он-лайн курс, а так же фреймворки для CSS, такие как Twitter Bootstrap и Zurb’s Foundation.
В четвертой главе автор знакомит нас с JavaScript и его библиотекой jQuery, однако более глубокие знания по этому языку можно почерпнуть либо в курсе, либо например в книге «Выразительный JavaScript» (без регистрации и смс, бесплатная книга на хабре). Можно по-разному относиться к JS, но на сегодняшний день это один из тех языков, который надо хоть немного знать для работы в вебе.
В пятой главе идет речь о JSON, AJAX и помимо всего прочего создается интересное приложение, для поиска картинок на Flickr.
В шестой главе нужно запастись терпением и силами, предстоит настроить виртуальную машину и окружение внутри неё. Со время выхода книги некоторые вещи изменились и тут пришлось знатно повозиться. Однако можно арендовать какой-нибудь веб сервер и выполнить задачу еще и там, самостоятельно настроив окружение. Здесь же очень пригодилась шпаргалка по пакетному менеджеру npm (ссылка на хабр). Здесь же может понадобиться учетная запись для твиттера, которая захочет ваш телефонный номер. Делать или не делать, решать вам.
В седьмой главе идет речь о базах данных Redis и MongoDB, с одной стороны хорошее изложение, с другой стороны, кажется, что чего-то не хватает. В качестве дополнения одна из рекомендуемых книг «7 баз данных за 7 недель» Эрика Редмонда и Джима Уилсона, её сложность заключается в том, что не прочитав и не сделав предыдущую главу не стоит переходить к следующей, а еще там нет сведений об установке и настройке баз данных. Что само по себе является проблемой. Есть еще MongoDB университет, но нужно запастись терпением, чтобы ждать пока будут приходить новые задания. Может для кого-то это хороший вариант, решать вам.
NET
имеет специальное расширение " .aspx
".Порядок работы ASP
. NET
выглядит следующим образом:
- Когда веб-браузер запрашивает файл ASP.NET, веб-сервер IIS перенаправляет запрос модулю ASP.NET на сервере.
- Модуль ASP.NET читает файл построчно и выполняет, коды сценариев, содержащиеся в файле.
- Веб-браузеру возвращается обратно файл ASP.NET, но уже в виде обычного HTML документа.
Любая страница ASP
. NET
представлена классом, производным от класса System.Web.UI
, который определяет свойства, методы и события, общие для всех страниц, предназначенных для обработки средой ASP
. NET
Наиболее важные свойства этого объекта приведены в таблице ниже:
Свойство
|
Описание
|
---|
Application
|
Возвращает объект HttpApplicationState
|
Cache
|
Возвращает объект Cache
, в котором хранятся данные приложения, в т.ч. и самой страницы
|
IsPostBack
|
Возвращает значение, определяющее, была ли страница загружена клиентом впервый раз, или загружена повторно в ответ на запрос клиента
|
Request
|
Возвращает объект HttpRequest
, используемый для получения информации о входящем запросе HTTP
|
Response
|
Возвращает объект HttpResponse
, используемые для формирования ответа сервера клиенту
|
Server
|
Возвращает объект HttpServerUtility
|
Session
|
Возвращает объект System.Web.SessionState.HttpSessionState
, с помощью которого получается информация о текущем сеансе HTTP
|
Такое построение проекта позволяет хранить отдельно код представления
для генерации HTML
кода (в файле *.aspx
) от программной логики
(в файле *.aspx.cs
), что во многих случаях существенно упрощает разработку сложных веб-приложений.
Порядок выполнения лабораторной работы
Для работы с примерами, приводимыми в данной лабораторной работе, потребуется установка среды разработки Microsoft Visual Studio
2005+ и веб-сервера IIS
5+ ( Internet
Information
Server
).
После завершения создания проекта, он будет содержать файлы Default.aspx
, Default.aspx.cs
и Default.asp.designer.cs
.
Первый из них будет содержать примерно следующий код:
<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="
Default.aspx.cs" Inherits="ASPNETHello._Default" %>
Untitled Page
Из этого кода видно, что, во-первых, для создания кода HTML
, возвращаемого браузеру, будет использован язык C
# (см. атрибут
Language
). Во-вторых, код C
# содержится в отдельном файле, который будет выполняться на веб-сервере (см. атрибут
CodeBehind
). И, наконец, атрибут
Inherits
указывает на имя класса
, определенного в CodeBehind
.
Важным новшеством в ASP
. NET
является атрибут
runat="server"
, размещенный в тэге