Как создать сайт вручную?

МЕТОДИЧЕСКАЯ РАЗРАБОТКА

Темы 22: «Методы создания и сопровождения сайта»

дисциплины «Информатика и ИКТ»

для студентов первого курса СПО

технический профиль

! Сайт (от англ. website: web — «паутина, сеть» и site — «место», буквально «место, сегмент, часть в сети») — совокупность электронных документов (файлов) частного лица или организации в компьютерной сети, объединённых под одним адресом (доменным именем или IP-адресом).

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

Первый в мире сайт info.cern.ch появился в 1990 году. Его создатель, Тим Бернерс-Ли, опубликовал на нём описание новой технологии World Wide Web, основанной на протоколе передачи данных HTTP, системе адресации URL и языке гипертекстовой разметки HTML. Также на сайте, были описаны принципы установки и работы серверов и браузеров. Сайт стал первым в мире интернет-каталогом, так как позже Тим Бернерс-Ли разместил на нём список ссылок на другие сайты.

Все инструменты, необходимые для работы первого сайта, Бернерс-Ли подготовил ещё раньше — в конце 1990 года появились первый гипертекстовый браузер WorldWideWeb с функционалом веб-редактора, первый сервер на базе NeXTcube и первые веб-страницы.

«Отец» веба считал, что гипертекст может служить основой для сетей обмена данными, и ему удалось претворить свою идею в жизнь. Ещё в 1980 году Тим Бернерс-Ли создал гипертекстовое программное обеспечение Enquire, использующее для хранения данных случайные ассоциации. Затем, работая в Европейском центре ядерных исследований в Женеве (CERN), он предложил коллегам публиковать гипертекстовые документы, связанные между собой гиперссылками. Бернерс-Ли продемонстрировал возможность гипертекстового доступа к внутренним поисковику и документам, а также новостным ресурсам Интернета. В результате, в мае 1991 года в CERN был утверждён стандарт WWW.

Тим Бернерс-Ли является «отцом» основополагающих технологий веба — HTTP, URI/URL и HTML, хотя их теоретические основы были заложены ещё раньше. В 1940-х годах Ванневар Буш выдвинул идеи расширения памяти человека с помощью технических устройств, а также индексации накопленной человечеством информации для её быстрого поиска. И Даг Энгельбарт предложили технологию гипертекста — «ветвящегося» текста, предоставляющего читателю разные варианты чтения. Xanadu, так и не законченная гипертекстовая система Нельсона, была предназначена для хранения и поиска текста, в который введены взаимосвязи и «окна». Нельсон мечтал связать перекрёстными ссылками все тексты, созданные человечеством.

В настоящее время Тим Бернерс-Ли возглавляет основанный им Консорциум Всемирной паутины (World Wide Web Consortium), который занимается разработкой и внедрением стандартов Интернета.

Устройство

Страницы сайтов — это файлы с текстом, размеченным на языке HTML. Эти файлы, будучи загруженными посетителем на его компьютер, обрабатываются браузером и выводятся на его средство отображения (монитор, экран КПК, принтер или синтезатор речи). Язык HTML позволяет форматировать текст, различать в нём функциональные элементы, создавать гипертекстовые ссылки (гиперссылки) и вставлять в отображаемую страницу изображения, звукозаписи и другие мультимедийные элементы. Отображение страницы можно изменить добавлением в неё таблицы стилей на языке CSS или сценариев на языке JavaScript.

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

Обзор

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

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

В большинстве случаев в Интернете одному сайту соответствует одно доменное имя. Именно по доменным именам сайты идентифицируются в глобальной сети. Возможны иные варианты: один сайт на нескольких доменах или несколько сайтов под одним доменом. Обычно несколько доменов используют крупные сайты (веб-порталы) чтобы логически отделить разные виды предоставляемых услуг (mail.google.com, news.google.com, maps.google.com). Нередки и случаи выделения отдельных доменов для разных стран или языков. Например, google.ru и google.fr логически являются сайтом Google на разных языках, но технически это разные сайты. Объединение нескольких сайтов под одним доменом характерно для бесплатных хостингов. Иногда для идентификации сайтов в адресе после указания хоста стоит тильда и имя сайта: example.com/~my-site-name/ (ср. с/home).

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

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

Существует также понятие оффлайновая версия сайта — это копия сайта, которая может быть просмотрена на любом компьютере без подключения к компьютерной сети и использования серверного программного обеспечения. Это практично для справочных ресурсов с обширной документацией. Данное понятие особенно было актуально во времени на дорогого или медленного доступа в сеть Интернет. Тогда посетителям некоторых сайтов предлагали скачать всю информацию в виде набора статичных HTML-страниц (по сути, получается как справка в формате CHM). Смысл этой услуги в том, что пользователю будет доступна вся информация сайта, даже если он не подключён к Интернету.

Создание сайта

Процесс создания сайта похож на процесс производства программного обеспечения. Здесь сайт тоже, перед публикацией конечному пользователю, проходит несколько этапов. Программисты изначально создают его на своих рабочих компьютерах. Потом, в зависимости от сложности производства в отдельно взятой компании, эта версия уходит на тестирование. Потом, когда все изъяны выявлены, происходит их исправление или же сайт может быть отправлен дальше: он уходит на демонстрацию заказчику или же главе компании. В любом случае публике или заказчику выдаётся уже финальный продукт предположительно без ошибок (багов). Как видно из данного описания, сайт, как и любое сложное устройство, проходит несколько этапов. В настоящий момент нет унифицированных названий для каждого процесса, но вы можете запомнить некоторые жаргонные обозначения: «продакшн-версия сайта» — версия, которая ушла на сервера конечного пользователя, «девелопмент-версия» крутиться только в среде программистов, а, например, тест-версия, уже в среде тестировщиков.

Особую роль выполняют по разработке и обслуживанию сайта (портала) администраторы (по-другому — админы, согласно интернет-сленгу). Если изготовление формы (оболочки) выполняет группа или очень квалифицированный специалист (программист, веб-дизайнер, системный администратор (согласно интернет-сленгу — сисадмин), координатор, он же администратор проекта), то обслуживание и информационное наполнение подчинено стратегическим задачам и требует часто участия команды участников проекта под управлением админа проекта (сайта, портала). Сейчас наработано много программ и «писалок» в технологии PHP, но это повысило и требования к квалификации участников проекта, в связи с многопрофильностью решаемых задач.

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

Изготовление сайтов как работающих целостных информационных ресурсов и систем — составной процесс, вовлекающий труд различных специалистов. Этот вид деятельности называется веб-разработка. Владельцы будущего сайта (частные лица или организации) разрабатывают сайты своими силами, либо обращаются к специализированным разработчикам (фрилансерам, студиям, бюро, конторам и т. п.). Отношения между заказчиком и исполнителем регулируется с помощью договоров, технических заданий, специальных систем (различных сайтов, выступающих посредником между заказчиком и фрилансерами), либо устной договорённостью. Заказанная работа может представлять собой как полный комплекс создания сайта, вплоть до придумывания названия и регистрации домена, так и расширение сайта, техническую оптимизацию и редизайн. Всё больше разработка и сопровождение сайта (портала) становится мощным сегментом активов предприятий (организаций). Поэтому разработчиков предпочитают штатных или поручают проект вести одному из директоров аппарата управления (коммерческий директор, директор департамента по связям или непосредственно, руководителю проекта с группой штатных специалистов и/или совместителей). Особую роль выполняют «тестеры» конечного продукта. Это ответственная роль в продвижении и оценке проекта, так как стадия разработки для динамического большого проекта никогда не прекращается. Если вы видите сайт невредимым 2-3 года без изменений, то он возможно никому не нужен, то ли пользуется спросом на базисную информацию. Но сопровождение проекта становится не менее ответственным делом.

Разработка дизайна

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

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

Верстка

Верстальщик получает макеты шаблонов в виде простых изображений (например, в формате JPEG или PNG), либо разбитых по слоям (например, в PSD или AI). Его задача — получить из этих графических макетов гипертекстовые веб-страницы с подготовленными для интернета изображениями.

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

Программирование

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

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

Безопасность

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

Наиболее распространённые последствия атаки на сайт:

§ несанкционированное изменение злоумышленниками;

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

Классификация сайтов

По доступности сервисов:

1. Открытые — все сервисы полностью доступны для любых посетителей и пользователей.

2. Полуоткрытые — для доступа необходимо пройти процедуру регистрации (обычно бесплатно).

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

По физическому расположению:

1. Общедоступные сайты сети Интернет.

2. Локальные сайты — доступны только в пределах локальной сети. Это могут быть как корпоративные сайты организаций, так и сайты частных лиц в локальной сети провайдера.

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

1. Интернет-портал - многокомпонентная разветвлённая структура (портал), скомпонованная из функционально самодостаточных сайтов самостоятельных организаций или подразделений корпоративнойструктуры.

2. Информационные ресурсы:

§ Тематический сайт — сайт, предоставляющий специфическую узкотематическую информацию по какой-либо теме.

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

3. Интернет-представительствавладельцев бизнеса(торговля и услуги, не всегда связанные напрямую с Интернетом):

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

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

§ Корпоративный сайт — содержит полную информацию о компании-владельце, услугах/продукции, событиях в жизни компании. Отличается от сайта-визитки и представительского сайта полнотой представленной информации, зачастую содержит различные функциональные инструменты для работы с контентом (поиск и фильтры, календари событий, фотогалереи, корпоративные блоги, форумы). Может быть интегрирован с внутренними информационными системами компании-владельца (КИС, CRM, бухгалтерскими системами). Может содержать закрытые разделы для тех или иных групп пользователей — сотрудников, дилеров, контрагентов и пр.

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

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

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

§ Промо-сайт — сайт о конкретной торговой марке или продукте, на таких сайтах размещается исчерпывающая информация о бренде, различных рекламных акциях (конкурсы, викторины, игры и т. п.).

§ Сайт-квест— Интернет-ресурс, на котором организовано соревнование по разгадыванию последовательности взаимосвязанных логических загадок.

4. Веб-сервис— сайт, созданный для выполнения каких либо задач, либо предоставления услуг в рамках сети WWW:

• Доска объявлений.
• Каталог сайтов — например, Open Directory Project.
• Поисковые сервисы— например, Yahoo!, Google.
• Почтовый сервис.
• Веб-форумы.
• Блоговый сервис.
• Файлообменный Пиринговый сервис — например, Bittorrent.
• Датахостинговый (хранение данных) сервиc — например, Skydrive.
• Датаэдиторинговый (редактирование данных) сервиc — например, Google Docs.
• Фотохостинг — например, Picnik, ImageShack, Panoramio, Photobucket.
• Хранение видео — например, YouTube, Dailymotion.
• Социальные Медиа — например Google Buzz (деятельность сервиса прекращена).

5.Комбинированные веб-сервисы (Социальные сети) — например, Facebook, Twitter.

6.Комбинированные веб-сервисы (Специализированные социальные сети) — например, Flickr.

По технологии отображения:

1. Статические -состоящие из статичных html (htm, dhtml) страниц составляющих единое целое. Пользователю выдаются файлы в том виде, в котором они хранятся на сервере.

2. Динамические -состоящие из динамичных html (htm, dhtml) страниц-шаблонов, информации, скриптов и прочего в виде отдельных файлов. Содержимое генерируется по запросу специальными скриптами (программами) на основе других данных из любого источника

По типам макетов:

1.Фиксированной ширины (англ. rigid fixed) — размеры элементов страницы имеют фиксированное значение, независящее от разрешения, размера, соотношения сторон экрана монитора и размеров окна обозревателя, задаётся в абсолютных значениях — PX (пиксели).

2.Резиновый макет (англ. adaptable fluid) — размеры несущих элементов, значения ширины, задаются относительным значением — % (проценты), страницы отображаются во весь экран монитора по ширине. По сути данный тип макета является частным случаем фиксированного типа макета .

3.Динамично эластичный (англ. dynamically expandable elastic) — размеры большинства элементов, задаются относительными значениями — EM и %. Все относительные пропорции размеров элементов всегда остаются неизменными, независимо от разрешения, размера, соотношения сторон экрана монитора, размеров окна и масштаба окна обозревателя.

Как создать сайт вручную?

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

Страницы - это файлы с расширением .html или .htm. Эти расширения говорят об особом формате файлов, посылаемых браузеру и понимаемых им. Этот формат так и называется - HTML. Страницы пишутся на языке разметки гипертекста HTML (Hyper Text Mark-Up Language).

По сути Web-страницы - это обычные текстовые файлы, но с расширением .html или .htm. Их можно писать в обычном текстовом редакторе. Например, в Блокноте. Word для этого совсем не подходит.

Создание сайтов - это не только программирование; это планирование, проектирование, сбор информации и материалов, исследования рынка и т.д.

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

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

2. Соберите материалы для сайта.Источником информации могут быть другие сайты, книги, журналы и т.д.

3. Создайте несколько страниц.Желательно создавать сайт состоящий из более чем из 30 страниц. В условиях современной конкуренции сайт с меньшим объемом практически не имеет шансов оказаться на верхних позициях в результатах возвращаемых поисковиками.

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

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

6. Раскрутите сайт.

Контрольные вопросы

1. Дайте определение сайту.

2. Как размечаются страницы сайта?

3. Что такое веб-приложение?

4. Что такое веб-сервер?

5. Что такое хостинг?

Домашнее задание:

Угринович Н.Д. «Информатика и ИКТ» Учебник для 10 класса (Профильный уровень), 4-е издание, М., БИНОМ, Лаборатория знаний, ОАО «Московские учебники», 2008 г., Глава 2, § 2.13.

Литература:

1. Н.В. Макарова «Информатика и ИКТ». Учебник 10 класс (Базовый уровень)», ООО «Питер Пресс», ОАО «Московские учебники», 2008 г.

2. Н.В. Макарова «Информатика и ИКТ» Учебник 11 класс (Базовый уровень)», ООО «Питер Пресс», ОАО «Московские учебники», 2008 г

3. Угринович Н.Д. «Информатика и ИКТ» Учебник для 10 класса (Профильный уровень),
4-е издание, М., БИНОМ, Лаборатория знаний, ОАО «Московские учебники», 2008 г.