Тема 5.1: Основы веб-дизайна.

1. Создание веб-сайта. Публикация веб-сайта на сервере бесплатного хостинга.

2. Технологии веб 2.0. Вики-технологии. Понятия веб-журналов (блогов), социальных сетей.

3. Приложение. Основные теги и атрибуты языка HTML.

1.

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

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

• WYSIWYG-редакторы — («What You See Is What You Get» — «Что видишь, то и получишь») — визуальные редакторы. Наиболее популярными визуаль­ными редакторами сегодня являются Micromedia Dream Weaver и Microsoft FrontPage.

• HTML-редакторы — программные средства, позволяющие создавать код стра­ницы вручную. При работе в таком редакторе требуется знать язык разметки гипертекста HTML. Простейшим HTML-редактором является стандартное приложение операционной системы Windows Блокнот. Работа вручную позволяет создавать более универсальные, более качественные и более разнообразные документы.

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

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

Если у вас нет собственного Web-сервера с выделенным доменным именем, вы можете разместить свой сайт у одного из провайдеров, предлагающих услуги по созданию на собственном сайте пользовательских Web-страниц (Web Presence Providers), еще это называется «хостингом» (hosting). То есть, хостинг – это предоставление места под ваш сайт, хостинговой компанией, владеющей сервером (или серверами), которые круглосуточно подключены к Интернету. Услуги хостинга бывают бесплатные (обычно за счет установки на ваши странички рекламы, своей или спонсоров), условно-бесплатные ( хостинг предостaвляется на некоторых условиях ) и просто платный хостинг с разнообразным качеством услуг

Для загрузки файлов сайта на сервер можно использовать файловый менеджер (команду загрузить) из раздела управление сайтом на сервере, на котором Вы размещаете сайт. Сначала с помощью файлового менеджера создайте на сервере папку, в которую будете помещать файлы или выберите готовую папку на сервере. Загрузить файлы на сервер можно и с помощью браузера (Internet Explorer) по протоколу ftp, например ftp://ftp.lessons-tva.info/. Далее появится диалоговое окно с запросом ввести пароль, после ввода пароля и нажатия кнопки "ОК" в окне просмотра будут отображены все Ваши папки на сервере. Далее откройте папку, где будут размещены файлы сайта и скопируйте их туда одним из методов. Адрес FTP-сервера указывается в персональных данных, которые вы получите после регистрации на сервере. Чтобы соединение по FTP-протоколу происходило быстрее необходимо предварительно войти в свой аккаунт по протоколу http.

Но лучше всего для загрузки файлов использовать Total Commander. Для этого в меню "СЕТЬ" выбрать команду "Новое FTP - соединение" и в появившемся диалоговом окне "Соединиться" ввести FTP-адрес (например, ftp://ftp.lessons-tva.info/). Затем по запросу ввести пароль и на одной из панелей появятся папки, расположенные на сервере, в одну из них необходимо поместить (скопировать) файлы.

Далее Вы присвойте имя этому соединению и сохраните его. Это имя будет помещено в опцию "Соединиться с FTP-сервером" в меню "СЕТЬ". При повторном соединении (например, при обновлении страничек) Вы выбираете это имя, далее на запрос вводите пароль и соединяетесь с директорией, в которой находятся странички и файлы Вашего сайта. После размещения сайта на хостинге необходимо зарегистрироваться в поисковых системах и тематических каталогах Yahoo, Rambler, Апорт и т.п. и осуществить раскрутку сайта.

Некоторые бесплатные хостинги Украины
сервис "Ayola"		Сервис "Ayola" в полной мере отвечает своему слогану "Простой хостинг". В Украине "Ayola" - оптимальный бесплатный хостер.
сервис "EoMy"		Сегодня "EoMy" достаточно популярен среди украинских пользователей.

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

1. Определите тему сайта. Рабо­тая над темой сайта, хорошо продумайте его информационное содержание.

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

3 . Создайте папку для хранения файлов сайта, в которой собе­рите необходимый текстовый и графический материал (необходимо оптимизиро­вать объем и количество графических файлов, предназначенных для размещения на страницах вашего сайта). Не используйте символы русского алфавита в именах тех файлов, которые вы включаете в состав веб-узла, так как многие операционные системы серверов сети Интернет работают только с англоязычными именами.

4. Определите программное средство для создания сайта (например: Блокнот, Microsoft FrontPage 2003 и др.).

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

6. Выполните содержательное наполнение созданных макетов веб-страниц.

7. Протестируйте созданный сайт в наиболее распространенных браузерах (на­пример: Internet Explorer, Netscape Navigator).

8. Устраните выявленные при тестировании неточности и ошибки.

9. Опубликуйте сайт в Интернете.

10. Зарегистрируйте сайт в популярных поисковых системах.

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

2.

Часто упоминаемое словосочетание Web 2.0 является причиной разночтений. Что же представляет из себя Web 2.0: этап развития всемирной паутины, новая технология или просто модное словосочетание? Первым, кто употребил словосочетание Web 2.0, стало издательство O'Reilly Media, специализирующееся на информационных технологиях. Произошло это в 2004 году. Немного позже глава издательства Тимоти О'Рейлли сформулировал часть принципов Web 2.0. За прошедшее время сфера Web 2.0 расширилась, вытесняя традиционные Web-сервисы, получившие название Web 1.0. Web 2.0 не является технологией или каким-то особым стилем Web-дизайна. Для определения сути подходит определение Web 2.0 как комплексного подхода к организации, реализации и поддержке Web-ресурсов.

Технологии Web 2.0 прочно укрепились в нашей повседневной жизни, как средства коммуникации (социальные сети: Facebook, Twitter, Вконтакте), быстрого поиска нужной информации, средства «коллективного авторства» (Wiki, блоги). Рассмотрим наиболее известные «проявления» Web 2.0, с которыми, так или иначе, встречался каждый пользователь Интернета.

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

Первая Wiki-среда была спроектирована Уордом Каннингеном (Ward Cunningham) в 1995 году с целью упрощения совместного создания и ведения программной документации. Разработанная среда позволяла любому посетителю сайта управлять его информационным наполнением.

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

Основные идеи, реализуемые Wiki-технологией:

• возможность редактирования Wiki-статей определенным кругом пользователей;

• хранение всех версий Wiki -статей с момента их создания;

• быстрая и простая генерация гиперссылок между документами, а также поддержка целостности гиперссылок;

• простота языка Wiki-разметки

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

Образовательные Wiki-ресурсы
Wiki-ресурс	Режим доступа	Описание
Википедия	http://wikipedia.org/	Онлайн-энциклопедия, написанная самими пользователями. Каждый посетитель сайта энциклопедии может внести свой вклад: подправить статью, добавить или удалить информацию
Летописи	http://letopisi.ru/	Образовательный проект с международным участием
КМ-Wiki	http://wiki.km-school.ru/	Образовательный портал, посвященный использованию образовательной информационной системы «КМ-Школа» в образовательном учреждении.
wiki.vspu.ru	http://wiki.vspu.ru/	Портал образовательных ресурсов студентов и учителей.
Викизнание	http://www.wikiznanie.ru/ru-wz/index.php/Викизнание	Проект по созданию большой, полной, современной, бесплатной, максимально свободно распространяемой гипертекстовой электронной энциклопедии

Блоги (интерактивные сетевые дневники) представляют собой один из самых ярких примеров использования принципов Web 2.0. Блог (англ. blog, от web log — интернет-журнал событий, интернет-дневник, онлайн-дневник) — веб-сайт, основное содержимое которого — регулярно добавляемые записи (посты), содержащие текст, изображения или мультимедиа. Для блогов характерны недлинные записи вре́менной значимости, отсортированные в обратном хронологическом порядке (последняя запись сверху). Отличия блога от традиционного дневника обусловливаются средой: блоги обычно публичны и предполагают сторонних читателей, которые могут вступить в публичную полемику с автором (в комментарии к блогозаписи или своих блогах).

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

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

По авторскому составу блоги могут быть личными, групповыми (корпоративными, клубными), общественными (открытыми). По содержанию — тематическими или общими. По размещению — сетевыми (на службе блогов) и автономными (на самостоятельной системе управления содержимым и самостоятельном хостинге). Наиболее популярными сервисами ведения блогов являются «Livejournal, «Блоги@Mail.ru», «Liveinternet».

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

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

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

Связь осуществляется посредством веб-сервиса внутренней почты или мгновенного обмена сообщениями.

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

Победное шествие по Интернету социальные сети начали в 1995 году с американского портала Classmates.com («Одноклассники» являются его русским аналогом).

1. Мой мир. Мой мир@mail.ru — русскоязычная социальная сеть, соединяющая на странице пользователя действия на основных порталах Mail.ru.

2. ВКонтакте — социальная сеть, российский аналог сервиса Facebook.

3. Одноклассники. Одноклассники.ru — социальная сеть, используемая для поиска одноклассников, однокурсников, бывших выпускников и общения с ними.

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

Однако Web 2.0 имеет и несомненные плюсы. В обычных сервисах (в сервисах Web 1.0, как теперь принято говорить) пользователь, по своей сути, является пассивным потребителем услуг. Подход, построенный на базе концепции Web 2.0, подразумевает более активную деятельность пользователей, ориентированную на участие в создании контента ресурса. В процессе развития сервиса учитывается опыт и мнение пользователей данного сервиса. Это делает Web 2.0 ресурсы значительно более интерактивными, давая пользователям свободу самовыражения.

1. Назовите этапы, необходимые для размещения собственных материалов в Интернете.

2. Какие программы используют для создания веб-сайтов? Назовите их типы.

3. Что называют хостингом? Какой он бывает:

4. Как можно опубликовать сайт на сервере? (1) с помощью каких программ; 2) как это сделать?)

5. Перечислите технологические этапы создания сайта.

6. Что понимают под технологиями Web 2.0? Приведите примеры проявления этой технологии в Мнтернет.

7. Что такое Wiki-технологии? Назовите основные Wiki-ресурсы.

8. Что такое блог? Опишите его основные особенности. Приведите примеры блогов.

9. Что такое социальная сеть? Приведите примеры распространённых социальных сетей.

10. Каковы отрицательные и положительные стороны технологии Web 2.0?

3. Приложение. Основные теги и атрибуты языка HTML.