Дипломная работа
По теме: «Методика обучениятехнологии web 2.0 на примере создания школьногосайта спортивной тематики»
Содержание
Введение
Глава 1. Теоретические основы создания школьного сайта
1.1 Основные понятия объектно-ориентированной модели данных
1.2Психолого-педагогические особенности преподавания web-технологий в школе
Глава 2. Создание школьного сайта с использованием технологииweb 2.0
2.1 Проектирование сайта. Настройка рабочей среды
2.2Учетные записи и личные страницы пользователей. Реализациясредств web 2.0
2.3 Визуальная стилистика web-приложения. Методика преподавания языковыхстандартов разметки гипертекста в школе
Заключение
Библиография
Приложения
Приложение 1
Приложение 2
Приложение 3
Приложение 4
Введение
В современном обществе, свозросшей необходимостью автоматизации любых производственных процессов иповышения эффективности работы с большими объемами информации, неуклонновозрастает степень компьютеризации различных систем. Система образования неявляется исключением. Базовым свойством информации является ее доступность,возможность удовлетворения информационных потребностей максимального количествасубъектов в режиме реального времени. Информационной системой, способнойвыполнять данные функции, является web-сайт. Соответственно, наша дипломная работа посвящена исследованиюпроцесса создания школьного сайта, который, по мере своего развития, сможетстать средством решения ряда образовательных задач.
Важным является поискответа на вопрос: может ли школьный сайт полноценно создаваться лишь усилиямисамой школы. Во-первых, администрация, учителя и учащиеся школы являютсясубъектами внутри школы, поэтому не всегда могут отражать представляемуюсистему во всей полноте информационных запросов ее потенциальных пользователей.При таком подходе к созданию сайта, зачастую не будут учитываться информационныезапросы родителей или работников районного и городского отделов образования, несможет быть реализовано координированное профессиональное взаимодействиеучителей-предметников, работающих в различных школах. Кроме того, немаловажнымявляется также «отключенность» от участия в работе сайта творческих учителейшколы, активных учеников, которые по тем или иным причинам не работают вконтакте с группой создателей сайта.
Такой сайт будет решатьлишь проблемы, локализованные рамками самой школы, сможет быть в лучшем случаевизитной карточкой отдельно взятого учреждения. Однако, создание сайта, какрезультата взаимодействия лишь учеников и учителей-предметников, являетсязадачей не столь тривиальной, какой она кажется на первый взгляд. Более сложными важным нам видится второй пункт – формирование личностной заинтересованностиучащихся.
Если школьный сайт будетносить лишь презентационный характер и, соответственно, обновляться нерегулярно малой группой людей, то его создание, несомненно, не вызовет большогоэнтузиазма у учащихся.
Чтобы мотивироватьучеников на создание школьного сайта, необходимо обеспечить возможностьнаполнения сайта информацией учащимися в режиме он-лайн.
Подобная возможность осуществимаблагодаря технологии web2.0. Значение этого термина до сих пор является предметом многочисленных споров,поэтому не существует единой трактовки данного понятия. Выделим основныепризнаки информационных ресурсов, относящихся к web 2.0.:
1) полнота и простота взаимодействияпользователя с контентом, широта возможностей взаимодействия без регистрации.
2) социализация, сообщество для общенияи совместных действий. Однако наравне с коллективизмом действий сообществатакже должна присутствовать индивидуализация, то есть возможность созданияличной, индивидуальной зоны (загрузка файлов, создание своих страниц, блогов).
3) контент создается самимипользователями, роль модераторов здесь минимальна.
4) тэги (метки), присвоение ключевыхслов любому виду файлов, по которым впоследствии легче осуществить поиск(присваиваются пользователями).
5) простота и доступность, все действияпо работе со средой ясны и прописаны по шагам для удобства пользователя.
Несмотря на то, что школаявляется сложной социальной структурой, школьные сайты, в большинстве своем,подобными функциями не наделяются, поэтому носят презентационный характер. Паруслов нужно сказать о средствах, которые обеспечат возможность создания такогосайта.
Кроме языков HTML/XHTML, CSSнам понадобятся: во-первых, языки PHP и JavaScript, позволяющие создавать динамическиевеб-страницы; во-вторых, средства создания баз данных (MySQL) для хранения учетных записей и записейпользователей. Изучение языков серверных сценариев и MySQL в школьную программу не входит, что осложняетсоздание сайта средствами web2.0., однако даже поверхностное знакомство с ними позволит не только научитьшкольников создавать относительно простые информационные системы, но иоблегчить их понимание таких разделов ИКТ, как программирование, базы данных игипертекстовое представление информации.
Актуальностьдипломногоисследования заключается в противоречиимежду необходимостью активного вовлечения учащихся в процесс конструирования иведения школьного сайта и отсутствием у школьников представления о соответствующихэтому процессу технологиях.
Цель исследования – создать школьный сайт, которыйбудет иметь возможность совместного наполнения информацией субъектами учебногопроцесса в режиме реального времени.
Проблемаисследования– организация работы учащихся надшкольным сайтом таким образом, чтобы были реализованы не только образовательныезадачи, но и личностные потребности учащихся.
Объектомисследованияявляется процесс создания школьного сайта.
Предметомисследованияявляется изучение и использование на практике технологий web 2.0. при создании сайта школы.
Гипотезаисследования – еслив процессе создания школьного сайта использовать технологии web 2.0., то дальнейшее изменение иобновление данного сайта сможет осуществляться как администрацией, так ишкольниками, при этом удовлетворять информационные потребности обеих сторон.
Задачи исследования:
1) провести анализпсихолого-педагогической, научно-методической, учебно-дидактической,технической литературы;
2) определить методические принципыпостроения этапов работы над сайтом;
3) осуществить опытно-экспериментальнуюпроверку выдвинутой гипотезы.
Методы исследования — анализ психолого-педагогической,научно-методической, учебно-дидактической литературы, учебников и учебныхпособий, посвященных созданию web-технологиями преподаванию их в школе; практическая работа.
Структура дипломнойработы:
Введение
Глава 1. Теоретическиеосновы создания школьного сайта
1.1 Психолого-педагогическиеособенности преподавания web-технологийв школе
2.1 Технология web 2.0. Средства создания динамических web-страниц.
Глава 2. Созданиешкольного сайта с использованием технологий web 2.0.
§2.1 Проектирование сайта. Настройкарабочей среды.
2.2 Учетные записи и личныестраницы пользователей. Реализация средств web 2.0
2.3 Визуальная стилистикаweb-приложения
Заключение
Литература
Приложения
методика создание сайттехнология web
Глава 1. Теоретические основысоздания школьного сайта
1.1 Психолого-педагогическиеособенности преподавания web-технологий в школе
Образовательныйпотенциал раскрывается не только в том, что Интернет является источникомобразовательной информации, но и в том, что выступает как средство, инструментдля ее поиска, переработки, представления. Овладение знаниями и умениями виспользовании современных интерактивных информационных технологий Интернет(работа на компьютере, освоение программ, необходимых для поиска и переработкиинформации, общения и самовыражения, медиаобразовательные умения — находить,готовить, передавать, принимать и перерабатывать информацию, развитие критическогомышления, умения понимать скрытый смысл того или иного сообщения) необходимодля решения познавательных, деловых, производственных, образовательных и другихзадач. Работа с информацией и средствами становится главным содержаниемпрофессиональной деятельности в информационном обществе, необходимымкомпонентом информационной культуры, ведущая роль в формировании которойотводится преподавателю. Работа на занятии должна предусматривать наличиеобратной связи. Обратная связь может обеспечиваться контролем со стороны учителяили самоконтролем учащихся. Чтобы достичь эффективности восприятия учительдолжен употреблять слова, соответствующие той модели мира, которая пока имеетсяу учащихся. Кроме того, надо уделять внимание тому, чтобы учащиеся правильноназывали все, что изучают на занятиях. Именно это формирует культуру речи, азначит — и культуру восприятия, информационную культуру. Интернет предоставляетучащимся возможность свободного перемещения по информационному пространству идает определенную свободу выбора действий по поиску и обработке и представлениюинформации. Это, в свою очередь, является положительной мотивацией кинтерактивному взаимодействию с информацией. Индивидуальный подход такженеобходим в связи с тем, что Сеть стирает все границы – не только территориальныеи языковые, но и возрастные.
Мыпредставляем медиаобразовательные умения, показывающие готовность школьника кдальнейшей работе с информацией в Интернете и жизни в высокотехнологическомобществе:
· умение пользоваться компьютером, информационными ресурсамиСети, программными средствами (IE, OE и т.д.);
· пользоваться поисковыми системами и каталогами;
· целенаправленно находить нужную информацию;
· понимание адресной направленности информации, критическоеосмысление ее, формирование и обоснование альтернативных взглядов,интерпретация информации;
· умения сохранять и использовать информацию в повседневнойжизни,
· перерабатывать и представлять информацию.
Есличеловек обладает всеми перечисленными выше умениями, то он работает в Сети осознанно,а не спонтанно, полнее раскрывая образовательный потенциал Интернета. В такомслучае медиаобразование сталкивается с новыми видами проблем, связанных сработой в Сети и гипертекстовыми средами обучения и выступает как один изспособов индивидуальной информационной защиты. Подростки, так или иначе, будутвстречаться в Сети с информацией совершенно различного характера, какпозитивной, так и негативной. Если подростки достаточно подготовлены, чтобысамим разобраться, если они обладают медиаобразовательными умениями, то онимогут сами защитить себя от темной стороны Интернета. Овладев необходимымиинтеллектуальными умениями, они смогут перейти на осознанный, пользовательскийэтап работы в Сети. Он характеризуется высокой мотивацией поиска, интерпретациии представления информации. Для него характерно целенаправленное использованиекомпьютерной Сети и ее информационных ресурсов в соответствии собразовательными целями и задачами.
Направленияиспользования сети Интернет подростками на пользовательском этапе следующие:
· общее развитие;
· поиск учебной информации;
· учебно-образовательные проекты, общение;
· самостоятельное представление информации;
· поиск нужных компьютерных программ;
· выбор дальнейшего образования, профориентация.
Наданном этапе продолжает развиваться критическое мышление, учащиеся начинаютболее грамотно интерпретировать информацию, выделяя среди большого объеманаиболее полезную и нужную для общего образования человека, подростки стараютсянаполнить интересным познавательным содержанием свои страницы. Стираетсяязыковой барьер, развиваются коммуникативные умения, появляется мотивация дляболее тщательного изучения языка, межкультурного и межнациональноговзаимодействия с людьми из разных концов земного шара. Наблюдается выход изинформационного “кокона” — подростки чаще начинают интересоваться проблемамисоциального плана.
Чтобыпостроить обучение, эффективно реализующее названные выше задачи, нужносформировать мотивацию у школьников, что в последнее время видится задачей нестоль тривиальной. Можно выделить следующие причины спада школьной мотивации:
1. У подростковнаблюдается «гормональный взрыв» и нечетко сформировано чувство будущего;
2. Отношение ученика кучителю;
3. Отношение учителя кученику;
4. Личная значимостьпредмета.
5. Умственное развитиеученика.
6. Продуктивность учебнойдеятельности.
7. Непонимание целиобучения
В психологии известно,что развитие мотивов учения идет двумя путями:
1. Через усвоениеучащимися общественного смысла учения;
2. Через самудеятельность учения школьника, которая должна чем-то заинтересовать его.
На первом пути главнаязадача учителя состоит в том, чтобы, с одной стороны, донести до сознанияребенка те мотивы, которые общественно незначимы, но имеют достаточно высокийуровень действительности. Примером может служить желание получать хорошиеоценки. Учащимся необходимо помочь осознать объективную связь оценки с уровнемзнаний и умений. И, таким образом, постепенно подойти к мотивации, связанной сжеланием иметь высокий уровень знаний и умений. Это, в свою очередь, должноосознаваться детьми как необходимое условие их успешной, полезной обществудеятельности. С другой стороны, необходимо повысить действенность мотивов,которые осознаются как важные, но реально на их поведение не влияют. В психологииизвестно достаточно много конкретных условий, вызывающих интерес школьника кучебной деятельности. Рассмотрим некоторые из них.
1. Способ раскрытияучебного материала. Обычно предмет предстает перед учеником какпоследовательность частных явлений. Каждое из известных явлений учительобъясняет, дает готовый способ действия с ним. Ребенку ничего не остается, какзапомнить все это и действовать показанным способом. При таком раскрытиипредмета есть большая опасность потери интереса к нему. Наоборот, когдаизучение предмета идет через раскрытие ребенку сущности, лежащей в основе всехчастных явлений, то, опираясь на эту сущность, ученик сам получает частныеявления, учебная деятельность приобретает для него творческий характер, и темсамым вызывает у него интерес к изучению предмета. При этом мотивироватьположительное отношение к изучению данного предмета может как его содержание,так и метод работы с ним. В последнем случае имеет место мотивация процессомучения.
2. Организация работы надпредметом малыми группами. Принцип набора учащихся при комплектовании малыхгрупп имеет большое мотивационное значение. Если детей с нейтральной мотивациейк предмету объединить с детьми, которые не любят данный предмет, то послесовместной работы первые существенно повышают свой интерес к этому предмету.Если же включить учеников с нейтральным отношением к данному предмету в группулюбящих данный предмет, то отношение у первых не меняется.
3. Отношение междумотивом и целью. Цель, поставленная учителем, должна стать целью ученика. Дляпревращения цели в мотивы-цели большое значение имеет осознание учеником своихуспехов, продвижение вперед.
4. Проблемность обучения.На каждом из этапов урока необходимо использовать проблемные мотивации,задания. Если учитель делает это, то обычно мотивации учащихся находятся надостаточно высоком уровне. Важно отметить, что по содержанию она являетсяпознавательной, т.е. внутренней.
Содержание обучения. Основа содержания обучения – базовые(инвариантные) знания. В обязательном порядке в содержание обучения входятобобщенные методы работы с этими базовыми знаниями. Процесс обучения такой, чторебенок усваивает знания через их применение, коллективные формы работы.Особенно важно сочетание сотрудничества с учителем, и с учащимся. Все вместе взятоеи приводит к формированию у детей познавательной мотивации. Если же замеченоснижение учебной мотивации, то необходимо установить причины снижения учебноймотивации. А после проводится коррекционная работа. Коррекционная работа должнабыть направлена на ликвидацию причины, приведшей к низкому уровню мотивации.Если это не умение учиться, то коррекция должна начинаться с выявления слабыхзвеньев. Поскольку в эти умения входят как общие, так и специфические знанияумения, то необходимо проверить и те, и другие. Для ликвидации слабых звеньевнеобходимо провести их поэтапную разработку. При этом обучение должно бытьиндивидуальным, с включением учителя в процесс действий, заданий сзанимательным сюжетом. В процессе учитель должен отмечать успехи школьника,показывать его продвижении вперед. Делать это надо очень осторожно. Еслиучитель похвалит ученика за решение простой задачи, которая никакого труда длянего не составила, то это может обидеть его. Для ученика это выступит какнизкая оценка учителя его возможностей. Наоборот если учитель отметит успехипри решении сложной задачи, — это вселит в него дух уверенности. Приобретениеучеником необходимых средств учения позволит ему понять материал, успешновыполнить задание. Это приводит к удовлетворению от выполненной работы. Уученика появляется желание еще раз пережить успех на этом этапе работы. Важныдля ученика нестандартные задания. Так, например, при коррекции математическихумений можно предложить составить небольшой задачник. Ученик должен оформить обложку,написать свою фамилию как автора книги, а потом придумать задачисоответствующего вида. Учитель оказывает необходимую помощь. Задачи,составленные учеником, можно использовать при работе с классом. Как правило,такая работа учителя позволяет изменить отношение ученика к предмету, и кучению в целом. Разумеется, мотивация не всегда будет внутренней. Ноположительное отношение к предмету обязательно появится.
В заключение отметим, чтов ряде случаев необходимо использовать игровую деятельность для формирования уучеников недостающих средств учения. Такой метод применяется тогда, когда уребенка учение еще не стало ведущей деятельностью, не приобрело личностногосмысла. Игра помогает подготовить ребенка к учению. Постепенно учениеприобретает личностный смысл, начинает вызывать положительное отношение к себе,что является показателем положительных мотивов выполнения этой деятельности.Общий смысл формирования состоит в том, что учителя желательно переводитьучащихся с уровней отрицательного и безразличного отношения к учению к зрелымформам положительного отношения к учению — действенному осознанному иответственному. Воспитанию положительной мотивации учения способствуют общаяатмосфера в школе, классе; участие ученика в коллективистических формах организацииразных видов деятельности; отношения сотрудничества учителя и учащегося, помощьучителя не в виде прямого вмешательства в выполнение задания, а в виде советов;привлечение учителем школьников к оценочной деятельности и формирование у нихадекватной самооценки. Кроме того, формирование мотивации способствуютзанимательное изложение, необычная форма преподавания материала, вызывающаяудивление у учащихся; эмоциональность речи учителя; познавательные игры,ситуация спора и дискуссии; анализ жизненных ситуаций; умелое применениеучителем поощрения и порицания. Особое значение здесь приобретает укреплениевсех сторон умения школьника учиться, обеспечивающее усвоение всех видов знанийи их применение в новых условиях, самостоятельное выполнение им учебных действийи самоконтроля, самостоятельный переход от одного этапа учебной работы кдругой, включение учащихся в совместную учебную деятельность.
Работа учителя, прямонаправленная на упрочнение и развитие мотивационной сферы, включает в себяследующие виды воздействий:
ü актуализация уже сложившейся ушкольника ранее мотивационных установок, которые надо не разрушать, а укреплятьи поддержать;
ü создание условий для появления новыхмотивационных установок (новых мотивов, целей) и появление у них новых качеств(устойчивости, осознанности, действенности и др.);
ü коррекция дефектных мотивационныхустановок;
ü изменение внутреннего отношенияребенка как к наличному уровню своих возможностей, так и к перспективе ихразвития.
Формирование включаетнесколько блоков – работу с мотивами, целями, эмоциями, учебно-познавательнойдеятельностью школьников. Внутри каждого из блоков проводится работа поактуализации и коррекции прежних мотивов, стимуляция новых мотивов и появлениюу них новых качеств. Особым видом работы по формированию у учащихся адекватногоуровня притязаний и самооценки является обдуманное поощрение их учителем. Длямотивации школьника более важной, чем оценка учителя оказывается скрытая вотметке информация о его возможностях. Оценка учителя повышает мотивацию, еслиона относится не к способностям ученика в целом, а к тем усилиям, которыеприлагает ученик при выполнении задания. Другим правилом выставления отметкиучителем для поощрения мотивации является такой прием, когда он сравниваетуспехи не с успехами других учеников, а с его прежними результатами. Следующаягруппа заданий на устойчивость целей, на их действенность, настойчивость иупорство в их реализации. Так удержания цели способствует задание навозобновление учебной деятельности после помех и препятствий. Укреплениюнастойчивости школьника при достижении цели способствует упражнения на решениесверхтрудных задач без обратной связи в ходе решения. Активность и гибкостьцелеполагания стимулируют упражнения на постановку близких и далеких целей, немедленноеи отсроченное их выполнение. Чтобы упражнения на мотивы и цели моглииспользоваться школьниками в реальных условиях жизни, желательно, чтобы онибыли связанны с учебным материалом или с ситуациями жизни коллектива.
Формирование мотивациисовместной учебной деятельности. Рассматривая особенности проявления и развития у школьниковмотивов учения, нельзя не затронуть некоторые вопросы, связанные сформированием у них мотивации совместной учебной деятельности. Если движущейсилой учебной деятельности школьника является желание, стремление овладетькаким-либо учебным материалом или способом его добывания, то мы анализируемуровень сформированности познавательных и учебно-познавательных мотивов. Вколлективной же учебной работе акценты несколько меняются. Здесь ученикаинтересует возможность так организовать свое взаимодействие с партнером(взрослым или сверстником), чтобы овладение материалом, знаниями, умениямипроизошло наиболее эффективно. При совместной учебной деятельности ребенокучится сопоставлять, сравнивать, наконец, оспаривать другую точку зрения,доказывать свою правоту. Такие споры со взрослым, с учителем практическиисключены: в силу его опыта и позиции взрослый, тем более педагог всегда прав,и ребенок покорно, часто неосознанно принимает его точку зрения. Положение жесверстников одинакового. Поэтому ребенок готов спорить с товарищем, ибоизначально считает себя правым. Ребенок осознает, что есть другой путь решения,другой способ действия, что и товарищ может быть прав. Умение сопоставлятьразные точки зрения в процессе выполнения учебных заданий, умение как бы«встать на позицию другого человека» ведет к возникновению важнейшегоновообразования. Оно способствует зарождению, развитию и становлению мотивасотрудничества. Рекомендации по формированию мотивации совместной учебнойдеятельности школьников.
1. Прежде всего, учителюнеобходимо создать ситуацию для возникновения у учащихся общего положительногоотношения к коллективным формам работы. Включение в урок обсуждения, например,результатов работы, распределение совместных действий по функциям(взаимопроверка, взаимооценка) могут заинтересовать детей, обеспечить ихвнимательное, заинтересованное отношение к коллективным формам учебной работы.У старших школьников начинает повышаться престиж знаний. Мотивировать их ксовместному выполнению заданий может, например, осознание возможности оказать иполучить помощь, обменяться информацией.
2. Большое значение дляформирования мотивации совместной учебной работы имеет состав группы. Оченьважно внимательно отнестись к его подбору.
а) При подборе группынеобходимо учитывать желание детей работать именно друг с другом, но кромежелания детей работать вместе необходимо учитывать и то, какие цели могутпреследовать дети, какие мотивы будут руководить при включении в совместнуюработу.
б) При подборе группынеобходимо учитывать соотношения их возможностей и их представлений об этом.Взаимодействие в группах, где объединены дети, осознающие разницу своихвозможностей, возникает в том случае, если более сильные учащиеся прежде всегохотят помочь более слабому, научить его и средство для этого видят в совместнойработе, а слабый обязательно хочет научится и действовать на равных с сильным.
в) При подборе группынеобходимо также учитывать индивидуальные особенности учащихся: уровень ихзнаний, темп работы интересы и т.п.
3. Особое значение дляформирования мотивации совместной деятельности имеет правильный подбор заданийи форм коллективной работы. Учитель не должен предлагать детям непосильнуювместе для них работу. Потому что, не получив удовлетворения от совместноговыполнения задания, дети надолго могут сохранить негативное отношение кколлективным формам работы.
4. Для формированиямотивации совместной учебной работы большое значение имеет то, какое место вработе группы занимает учитель. Он должен осуществлять руководство работы детейучить их способам взаимодействия и в то же время не быть диктатором.
Формировать и развиватьмотивацию – значит не заложить готовые мотивы и цели в голову учащегося (это моглобы привести к манипулированию другим человеком), а поставить его в такиеусловия и ситуации развертывания активности, где бы желательные мотивы и целискладывались и развивались бы с учетом прошлого опыта, индивидуальности,внутренних устремлений самого ученика.
В подростковом возрастевозможно осознание своей учебной деятельности, ее мотивов, задач, способов исредств. К концу подросткового возраста наблюдается устойчивое доминированиекакого-либо мотива. Подростку доступны самостоятельная постановка не толькоодной цели, но и последовательности нескольких целей, причем не только вучебной работе, но во внеклассных видах деятельности. Подросток овладеваетумением ставить гибкие цели, закладывается умение ставить и перспективные цели,связанные с приближающимся этапом социального и профессиональногосамоопределения. В старшем школьном возникает потребность и возможностьсовершенствования своей учебной деятельности, что проявляется в стремлении ксамообразованию, выходу за пределы школьной программы. В старшем школьномвозрасте широкие познавательные мотивы укрепляются за счет того, что интерес кзнаниям затрагивает закономерности учебного предмета и основы наук. Мотивысамообразовательной деятельности связываются с более далекими целями,жизненными перспективами выбора профессии. Развитие целеполагания выражается втом, что старшеклассник при постановки системы целей учится исходить из плановсвоего индивидуального самоопределения. Возрастает умение оценитьреалистичность своих целей.
Наосновании вышесказанного можно сделать вывод, что использование Web—технологиидля учащихся является прекрасной мотивацией изучения предмета, по следующимпричинам:
1. Создание веб-приложений позволяет реализовать свои творческиепотребности
2. Поскольку подобные работы делаются коллективно, созданиешкольного веб-сайта положительно влияет на формирование совместнойдеятельности.
3. Создание сайта – процесс, который требует не толькосовместных, но и самостоятельных действий, что может явиться для многихучащихся достаточной мотивацией. В данном случае учитель выполнять рольконсультанта.
Крометого, «незаметно для себя» учащиеся осваивают использование современныхинформационных технологии, то есть готовятся жить в информационном обществе,которое, по-видимому, станет следующим этапом в развитии цивилизации вообще.
1.2 Технология web2.0. Обзор средств создания динамическихweb-сайтов
Историясовременного Интернета началась в США в 60-х годах. В то время объединениеотдельных компьютеров в сети имело целью наладить посредничество в научной коммуникациимежду исследовательскими центрами и университетами. Можно 4 условных этапатехнологического развития Интернета: 1-й Этап: Возникновение файловых архивов –информационных источников (60 гг. ХХ века).
2-йэтап: Формирование связанной информационной паутины, построенной на принципах гипертекста.Термин «гипертекст» был введён Тедом Нельсоном в 1965 году и предполагал возможностьветвления текста и связывания фрагментов в единое целое, благодаря системе ссылок.Средствами доступа к информации стали специальные программы – браузеры, обеспечивавшиедоступ к большому количеству информации, контроль над которой оставался завладельцами серверов, формирующих гипертекстовую паутину (начало 90-х гг. ХХвека).
3-йэтап: Появление расширенных коммуникационных сервисов, позволяющих осуществитькак приватное межличностное взаимодействие, так и групповые формы взаимодействия.В случае группового взаимодействия появляются дополнительные коллективныеэффекты, связанные с накоплением знаний, мнений и опыта, представленного вобсуждениях (конец 90-х гг. – начало XXI века).
4-йэтап: Существенный сдвиг в развитии Интернет произошёл с появлением группы сервисовоснованных на активном участии пользователей в формировании контента. Основноевнимание здесь уделяется организации взаимодействия между пользователямисервиса в виде публичного обмена информационными ресурсами, взаимногооценивания и маркировки содержания. Эти сервисы получили название «социальныхсервисов» и составили основу современной концепции развития сети Интернет,которая получила название Web 2.0. Основным источником информации в Web 2.0являются обычные пользователи, каждый из которых может принять участие в развитиисети
Появлениеи распространение Интернета наглядно продемонстрировало, что информация сама посебе бессмысленна, ее вокруг слишком много. Важны знания, полученные врезультате переработки информации, прошедшие этап личностного присвоения. Дляличной и профессиональной социализации человека необходимы новые методы работыс информацией: за единицу времени необходимо получить информационный максимум,иначе можно «утонуть» в этом «море». Вырастает новое поколение людей, которыеиспользуют Интернет на новом уровне – как пространство обитания. Эти людиродились, когда Интернет уже существовал, они воспринимают его как естественноекачество жизни – и они привыкли быть в сети. Новое поколение обращается сфотографиями, видео и звуками так же, как и с текстом. При этом они способныработать со множеством источников одновременно. Социальные изменения конца ХХвека привели к тому, что людей не может устроить монологическая модельинформационной передачи. Полифонизм информационных источников, существующийсегодня (книга, СМИ, масс-медиа, Интернет, и школа – всего лишь один изисточников) отменяет авторитет единственной точки зрения. Человек находится вполе постоянного информационного выбора, вырабатывает внутренние механизмыпринятия — отрицания информационных раздражителей [7]. Термин Web 2.0 (или Веб2.0) 3 года назад не существовал, а сегодня поисковая система Google выдает 9670 000 млн. ссылок на документы, Яндекс 10 млн. страниц, а mail.ru находит228,783 сайтов и документов: 9,966,692, где упоминается понятие Web 2.0.Словосочетание Веб 2.0 не является научным термином. Определим отличие веб 2.0от веб 1.0
Веб1. Сайт и его содержание создает автор, владелец ресурса. Пользователь имеет возможностьлишь быть потребителем контента, возможность участия пользователя в егосоздании жестко ограничена, причем пользовательская активность будет иметьболее низкий статус, чем активность автора сайта. Сайт для пользователявыступает в качестве информационного источника.
Веб2. Изначально сайт представляет собой не сборник содержания, которое может заинтересоватьпосетителя, а некое пространство, где пользователь имеет возможность проявитьсобственную активность: загрузить фотографии или видеоролики, опубликовать своюстатью, разместить свои анкетные данные. То есть Веб 2.0 — сайт, не являясьизначально коллекцией контента, постепенно – за счет пользовательскойактивности – становится интересен и значим. В противоположность Веб 1-сайту,Веб 2.0-сайт может быть охарактеризован как площадка, инструмент, которыйпользователь может использовать для своих нужд. Появление названия Веб 2.0принято связывать со статьёй «Tim O’Reilly — What Is Web 2.0» от 30 сентября2005 года, впервые опубликованной на русском языке в журнале «Компьютерра» (№№37 (609) и 38 (610) от 14 и 19 октября 2005 года соответственно) и затемвыложенной под заголовком «Что такое Веб 2.0»веб-сайтом «Компьютерра online». Вэтой статье Тим О’Рейли увязал появление большого числа сайтов, объединённыхнекоторыми общими принципами, с общей тенденцией развития интернет-сообщества,и назвал это явление Веб 2.0, в противовес «старому» Веб 1.0
Web 2.0 (определение ТимаО’Рейли) — методика проектирования систем, которые путём учета сетевыхвзаимодействий, становятся тем лучше, чем больше людей ими пользуются.Особенностью веб 2.0. является принцип привлечения пользователей к наполнению имногократной выверке контента. Определение Тима О’Рейли нуждается в уточнении.Говоря «становятся лучше» имеют в виду скорее «становятсяполнее», то есть речь, как правило, идёт о наполнении информацией, однаковопросы её надёжности, достоверности, объективности не рассматриваются. Web 2.0— это сервисы, которые позволяют пользователям совместно работать и размещать всети текстовую и медиа информацию.
WEB 1.0 сформировался в90-е годы во многом хаотично и имел главный качественный скачок – переход отпростого размещения документов виде файлов к созданию сайтов на основепрограммного обеспечения и баз данных. Уникальные решения и развитие винтернете возможны в трёх областях:
· Программирование ДизайнКонтент
WEB 2.0 имеет прямуюсвязь между новыми программными решениями, дизайном и контентом. Благодарятехнологиям WEB 2.0, как заказчик и разработчик сайта, так и пользователь,оптимизируют свои ресурсы. Системы управления сайтами web 2.0 интегрированы сменеджерами задач, а сами менеджеры задач точно подогнаны под спецификуweb-строительства, в отличие от стандартных средств автоматизации управленияпроцессами. Способы внесения и представления информации на сайте направлены наодно – экономизацию ресурсов. Системы автоматизации ручного труда интегрируютинтеллектуальные решения в общую систему сайта, позволяя один раз потратитьсяна программирование сложных модулей и потом бесконечно пользоваться заложеннойв них «крупинке человеческого интеллекта». В итоге WEB 2.0 стал стандартомкачества интернета, как когда-то набор управленческих рекомендаций системыдокументооборота, сложившись с процессуальной методологией, вырос до Системыуправления качеством. Предметно WEB 2.0 выражается:
1. Функциональный визуал
2. Технологически и/или геометрическинеобратимо раздёленный интерфейс по контент-блокам и блокам управленияконтентом
3. Особая организация представленияданных:
· объектно-ориентированный интерфейс(кнопки, закладки не как рядовые ссылки, а как особые функциональные объекты,на которые можно назначать различные действия) управляемая выборка и выводданных на странице по многим параметрам, выбираемым пользователем
· размещение большого количестваинформации на одной странице
· перезагрузка только той частистраницы, которая изменяется
· вывод разнотипной информации в одномокне.
Выделим основные признакии характеристики, которыми должен обладать, что бы его можно было отнести кВеб.2.0:
Первый признак — это полнота и простотавзаимодействия пользователя с контентом, широта возможностей взаимодействия безрегистрации. Второй признак – социализация, сообщество дляобщения, совместных действий. Однако наравне с коллективизмом действийсообщества также должна присутствовать индивидуализация, то есть возможностьсоздания личной, индивидуальной зоны (загрузка файлов, создание своих страниц,блогов). Третий признак — бесплатная среда. Четвертыйпризнак — самостроительство, т.е. контент создается самимипользователями, роль модераторов здесь минимальна. Пятый признак— тэги (метки), присвоение ключевых слов любому виду файлов, по которымвпоследствии легче осуществить поиск (присваиваются пользователями). Шестойпризнак — простота и доступность, все действия по работе со средой ясныи прописаны по шагам для удобства пользователя.
Седьмой признак — кроссбраузерность, поддержка всемибраузерами.
Технологии в построенииполноценного Веб 2.0 сервиса используются самые разные и в самых разнообразныхсочетаниях. Чаще всего на сегодняшний день используется такое сочетание AJAX +FLASH + XML + исполняемые серверные языки. Принадлежность проекта к идеологиивеб 2.0 автоматически запрашивает на ресурсе возможность rss импорта,многофункциональный, и в то же время удобный интерфейс доступа к данным.
Технологии в приложенияхWeb 2.0 – это комбинация технологий, включающая веб-службы, Ajax,веб-синдикации RSS. Ниже рассмотрим данные технологии более подробно.
AJAX (от англ. Asynchronous JavaScriptand XML — «асинхронный JavaScript и XML») — это подход к построениюинтерактивных пользовательских интерфейсов веб-приложений. Впервые термин AJAX был публично использован 18 февраля2005 года в статье Джесси Джеймса Гарретта (Jesse James Garrett) «Новый подход к веб-приложениям»[3]. Гарреттпридумал термин, когда ему пришлось как-то назвать новый набор технологий,предлагаемый им клиенту.
При использовании AJAXвеб-страница не перезагружается полностью в ответ на каждое действиепользователя. Вместо этого с веб-сервера догружаются только нужные пользователюданные. В отличие от традиционного веб-приложения, здесь обработкой данныхзанимается не только сервер, но и AJAX-движок, который определяет, какие данныемогут быть обработаны непосредственно локальным клиентом, а за какими придетсяобращаться к серверу. Интеллектуальное распределение нагрузки, во-первых,сокращает поток данных между клиентом и сервером, что ведет к большей скоростиустановившегося режима работы приложения, поскольку обновляется не страницацеликом, а только те части документа, которые потребовали загрузки новыхданных. Более того, AJAX-программу можно написать таким образом, что она сможетв определенной степени предугадывать запросы пользователя и заблаговременноподгружать из Сети необходимые данные. AJAX работает со всеми современнымибраузерами без установки дополнительных плагинов.
Современные браузеры. В прошлом, разработчикам JavaScriptприходилось справляться с многочисленными несовместимостями между Netscape,Internet Explorer и другими браузерами. В некоторых случаях даже различныеверсии одного браузера были несовместимы. Хотя некоторые из этихнесовместимостей по-прежнему существуют, большинство интранет-приложений обычнотребуют Internet Explorer 5.5 и выше и/или Firefox 1.0 и выше, где большинствоэтих ранее существовавших проблем с несовместимостью были решены. Недавно былтакже образован открытый промышленный консорциум, OpenAjax, который должензаниматься проблемами несовместимости в Ajax, как и другими связанными с Ajaxвопросами.
Инструментарии Ajax. Впрошлом, большинству разработчиков, которые хотели работать с Ajax, приходилосьначинать практически с нуля, выполняя большое количество рутинных операций,которые теперь могут выполнять инструментарии Ajax. Инструментарии обеспечиваютразличные встроенные JavaScript-основанные элементы управленияпользовательского интерфейса (виджеты), чтобы облегчить разработчикам созданиеоснованных на Ajax интерфейсов. Инструментарии также обычно предоставляют болеевысокий уровень абстракции, скрывая от разработчика вышеупомянутуюнесовместимость браузеров.
На основании написанноговыше можно выделит следующие преимущества и недостатки технологии AJAX.
Преимуществатехнологии:
1) Экономия трафика
2) Использование AJAX позволяет значительно сократитьтрафик при работе с веб-приложением благодаря тому, что часто вместо загрузкивсей страницы достаточно загрузить только изменившуюся часть, часто довольнонебольшую.
3) Уменьшение нагрузки насервер
4) AJAX позволяет несколько снизить нагрузкуна сервер. К примеру, на странице работы с почтой, когда вы отмечаетепрочитанные письма, серверу достаточно внести изменения в базу данных иотправить клиентскому скрипту сообщение об успешном выполнении операции безнеобходимости повторно создавать страницу и передавать её клиенту.
5) Ускорение реакцииинтерфейса
6) Поскольку нужнозагрузить только изменившуюся часть, то пользователь видит результат своихдействий быстрее.
Недостатки технологии:
1) Отсутствие интеграциисо стандартными инструментами браузера
2) Динамическисоздаваемые страницы не регистрируются браузером в истории посещения страниц,поэтому не работает кнопка «Назад», предоставляющая пользователям возможностьвернуться к просмотренным ранее страницам, но существуют скрипты, которые могутрешить эту проблему.
3) Другой недостатокизменения содержимого страницы при постоянном URL заключается в невозможностисохранения закладки на желаемый материал. Частично решить эти проблемы можно спомощью динамического изменения идентификатора фрагмента (части URL после #),что позволяют многие браузеры.
4) Динамическизагружаемое содержимое недоступно поисковикам (если не проверять запрос,обычный он или XMLHttpRequest)
5) Поисковые машины немогут выполнять JavaScript, поэтому разработчики должны позаботиться обальтернативных способах доступа к содержимому сайта.
6) Старые методы учётастатистики сайтов становятся неактуальными
7) Многие сервисыстатистики ведут учёт просмотров новых страниц сайта. Для сайтов, страницыкоторых широко используют AJAX, такая статистика теряет актуальность.
RSS (Really Simple Syndication) —семейство XML-форматов, предназначенных для описания лент новостей, анонсовстатей, изменений в блогах и т. п. Информация из различных источников,представленная в формате RSS, может быть собрана, обработана и представленапользователю в удобном для него виде специальными программами-агрегаторами.
Если AJAX реализовалновый уровень пользовательского интерфейса, то технология RSS изменила способыполучения сетевого контента. Можно сказать, что благодаря RSS данные сталинезависимыми от конкретного сайта, на котором были впервые опубликованы. Спомощью этой технологии можно транслировать практически любой материал,разделив его на отдельные части-выпуски. И что немаловажно, последующий сборинформации с RSS-каналов происходит в автоматическом режиме. Технология RSSтакже совершила небольшую революцию в деле наполнения «домашних страниц».Теперь возможно быстрое создание персонализированного сетевого инструмента,получающего контент с отобранных пользователем RSS-каналов. Такая страницарадикально отличается от традиционного «хоумпейджа» эпохи Web 1.0.
История RSS трудна и извилиста.Первые шаги RSS связаны с Netscape Communications. Технология называлась тогдаRDF Site Summary, отличалась сложным устройством и служила дляавтоматизированного создания интернет-порталов компаний. Вскоре Netscapeсоздала более простую и удобную версию, теперь уже под именем Rich SiteSummary. Через некоторое время Netscape свернула свои портальные проекты ипотеряла интерес к RSS, а сам формат получил открытую версию. Технология, какговорится, пошла в массы и стала активно применяться многими сетевымипроектами.
Флаг подхватили новыеигроки. Фирма UserLand Software применила этот формат в блогах, в очередной разсменив расшифровку RSS – Really Simple Syndication. Параллельно разработкойсвоей версии RSS занялась свободная группа RSS-DEV. Из-за появления несколькихразработчиков в стане RSS некоторое время царила форменная неразбериха.Достаточно сказать, что RSS 1.0 и 2.0 – это не последовательные версии однойтехнологии, а разные форматы от разных создателей. Выход из этой ситуациипопыталась найти рабочая группа IETF, разработавшая общий нейтральный формат,который сначала назывался Echo, а затем, видимо, чтобы не нарушать сложившуюсятрадицию, был также переименован – в Atom. Роль лесника, прогнавшего всех изизбушки, во многом сыграли программисты, которые добавили в современныеRSS-агрегаторы поддержку всех существующих RSS-форматов. Внутреннее устройствоRSS достаточно несложное. На сайте создается RSS-канал, который представляетсобой периодически обновляемый и отформатированный в соответствии соспецификацией XML-документ. Структура его традиционна – общий заголовок иописания отдельных элементов ленты со ссылками, точной датой обновления инекоторым вспомогательным кодом. При первом шапочном знакомстве даже странностановится: что же здесь делить-то было несколько лет? Теги — Ключевые слова,описывающие рассматриваемый объект, либо относящие его к какой-либо категории.Это своего рода метки, которые присваиваются объекту, чтобы определить егоместо среди других объектов. С понятием меток тесно связано понятие фолксономии— термина, о котором широко заговорили именно в связи с ростом сервисов Веб2.0, таких как Flickr, del.icio.us, и, в дальнейшем, Wink.
Эпоха Web 2.0 принеслаизменения и в такую респектабельную и устоявшуюся сферу, как индексация сетевойинформации. В Web 1.0 действовали две главные модели индексирования. Приформировании баз данных и некоторых веб-каталогов команда специалистовприсваивала документам ключевые слова или рубрики из заранее составленного дляданной предметной области словаря-тезауруса. При высоком качестве результатаэтот способ является медленным, трудоемким и дорогим. Существует и другаямодель, при которой универсальные интернет-поисковики автоматически анализируюттексты веб-страниц, выявляя с помощью достаточно сложных алгоритмов и сохраняяв своей базе данных поисковый образ документа. Высокоэффективный прииндексировании текстовых документов, этот способ резко теряет свой КПД приработе, например, с изображениями. В ход тогда идут косвенные признаки: именафайлов картинок, заполненные веб-мастером ALT-теги, анализ текста самойвеб-страницы и прочие вещи, с помощью которых поисковой системе приходится«угадывать» содержимое изображения.
В Web 2.0 предложентретий подход: пользователи-авторы коллективного ресурса сами присваиваютзагружаемым на сервер документам ключевые слова – теги. Они могут бытьсформулированы в произвольной форме, причем один документ может сопровождатьсямножеством тегов – естественно, в пределах разумного. Такой способ индексациибыл метко назван «фолксономией» (folksonomy), что подчеркивает его «народность»и открытость для всех. В этой модели у ключевых слов появилось новое измерение,недоступное традиционным «машинным» индексаторам, – ассоциативность. Теги такжепозволили реализовать в социальных программах рекомендательные функции. Теперьстало гораздо проще находить единомышленников и материалы по темам – системедостаточно отслеживать контент разных пользователей, помеченный одинаковымитегами, и отправлять подписчикам сообщения об обновлениях. Не стоит забывать ио том, что пользоватеьские теги становятся бесценной информацией длясовершенствования алгоритмов поиска. Этим, например, активно пользуется Yahoo!..Очень удобным средством визуализации популярности тех или иных ключевых словстали облака тегов, в которых шрифт, цвет или размер текста зависит от частотыиспользования конкретного тега в данном сообществе. Однако теги не являютсяпанацеей от всех бед систематизации сетевого контента. Далеко не всем хватаетвремени и терпения на качественное описание своих многочисленных файлов, к томуже взгляды пользователей на то, что является наиболее важным и интересным водном и том же документе, могут довольно сильно различаться.
Веб-службы — это программы, доступ к которымосуществляется через Веб (протокол HTTP), а обмен данными происходит в форматеXML, JSON, REST. Веб-службы являются платформонезависимымы, т.к. инструментыдля работы с HTTP и XML присутствуют во всех современных языкахпрограммирования. Нахождение на серверах компании создателя, Веб-службы,позволяет всегда предоставлять пользователю самые поздние версии данных, незаставляя заботиться об необходимых обновлениях и вычислительных мощностях. Вотличие от обычных динамических библиотек, такой подход обладает рядом плюсов:
1) Веб-служба находитсяна серверах компании, которая её создала. Поэтому в любой момент пользователюдоступна самая свежая версия данных и ему не приходится заботиться обобновлениях и вычислительных мощностях, требуемых для выполнения операции.
2) Инструменты для работыс HTTP и XML есть в любом современном языке программирования, поэтомувеб-службы переходят в разряд платформонезависимых. XML(eXtensible Markup Language) — язык разметки данных. Он представляет собой свод общих синтаксических правил, чтоделает его существенно лучше html. Веб-синдикация — одновременноераспространение информации в том числе аудио- и видео- на различные страницыили web-сайты, как правило, с использованием технологий RSS или Atom. Принципзаключается в распространении заголовков материалов и ссылки на них (например,последние сообщения форумов, и т. п.). Первоначально эта технологияиспользовалась на новостных ресурсах и в блогах, но постепенно сфера применениярасширилась.
Чистый HTML. Хотя многие разработчики и полагают,что у всех пользователей, как и у них самих, стоит последний Firefox с десятьюсамыми популярными плагинами, в действительности на многих машинах для доступав интернет по-прежнему используются Netscape 3.x или Internet Explorer 4.x.Браузеры этого уровня могут применяться с целью доступа к конкретномуприложению (исходники которого потеряны и его нельзя изменить), или же онимогут просто быть установлены дома у консервативного пользователя,продолжающего использовать Internet Explorer 4.0, лишь потому, что онпридерживается принципа «работает — не чини» в отношении обновлениябраузера. Совершенно очевидно, что HTML не может обеспечить такого удобствапользователя, как любая из вышеперечисленных технологий, основанные на HTMLпользовательские интерфейсы в долгосрочной перспективе по-прежнему будут игратьважную роль. Никакая другая технология не позволит приложению быть доступнымдля такого большого числа пользователей, как чистый HTML. В результате многиеприложения по-прежнему будут предоставлять такие пользовательские интерфейсыещё много лет.
Сегоднянаиболее авторитетным российским специалистом по вопросам педагогики сетевыхсообществ и использованию веб 2.0-сервисов является Е. Д. Патаракин, заведующийлабораторией учебных коммуникаций Института программных систем (НижнийНовгород), автор и координатор проекта Летописи.Ру – «Время вернуться домой»(http://letopisi.ru). Им была составлена примерная классификация социальныхсервисов (сетевого программного обеспечения, поддерживающего групповыевзаимодействия). Приведем описания основных функциональных особенностейсервисов.
1. Совместный поиск информации
www.swicki.com
www.rollyo.com,
google.com.
2.Совместное хранение закладок. Это продолжение и логическое развитие идеизакладок (ссылок на избранные сайты) в «Избранном» браузера. В отличие от такихзакладок, социальные закладки хранятся не на компьютере пользователя, а насервере в Интернете. Преимущества такого похода: доступ к своей коллекции«Избранного» с любого компьютера, подключенного к Интернету; возможностьподелиться своими закладками с другими пользователями; закладки можносистематизировать с помощью категорий или меток (http://del.icio.us,bobrdobr.ru, rumarkz.ru, memori.ru) 3. Совместное хранениемедиафайлов. Фотохостинг. Существуют сайты, позволяющие публиковать любыеизображения (напр., цифровые фотографии) в Интернет. Фотохостинги служат дляразмещения, хранения и показа изображений другим пользователям Сети. Это удобноесредство демонстрации фотографий. При размещении на фотохостинге каждому фотоприсваивается уникальный адрес. Автор снимка может легко поделиться гиперссылкой,ведущей на фотографию, с любым человеком, имеющим доступ в Интернет, а такжеразместить её на своем сайте. (http://flickr.com, www.panoramio.com, flamber.ru,picasaweb.google.com). Видеохостинг. Сайт, позволяющий загружать ипросматривать видео в браузере через специальный Flash-плеер.
(http://youtube.com,www.teachertube.com, www.l-vision.ru).
4.Создание и редактирование документов. Онлайн-офис может быть доступен с любого компьютера,у которого есть доступ в Интернет, независимо от того, какую операционную системуон использует. Это позволяет людям работать вместе по всему миру и в любое время,что ведет к созданию международных виртуальных команд для совместной работы надпроектами. Можно совместно создавать или взаимно редактировать самые разные документы(см. список с адресами сервисов, предназначенных для совместного редактирования).Презентации (http://scratch.mit.edu, slideshare.net,slideshare.net,http://www.alice.org, zoho.com,docs.google.com) Текстовые документы (http://www.scribd.com,docs.google.com) Блог – сайт, основное содержимое которого — регулярнодобавляемые авторские записи, изображения. Для блогов характерны недлинные записивременной значимости, отсортированные в обратном хронологическом порядке(последняя запись сверху). Отличия блога от традиционного дневника обусловливаютсясредой: блоги обычно публичны и предполагают сторонних читателей, которые могутвступить в публичную полемику с автором (в отзывах к блог-записи или своихблогах).
(http://www.livejournal.com,www.blogger.com)
5.ВикиВики – сайт, структуру и содержимое которого пользователи могут сообщаизменять с помощью инструментов, предоставляемых самим сайтом. Крупнейший иизвестнейший вики-сайт — Википедия. Вики характеризуется следующими признаками:
· возможностьмногократно править текст посредством самой вики-среды (сайта), без примененияособых приспособлений на стороне редактора;
· особый язык разметки— так называемая вики-разметка, которая позволяет легко и быстро размечать втексте структурные элементы и гиперссылки, форматировать и оформлять отдельныеэлементы;
· учёт изменений(версий) страниц: возможность сравнения редакций и восстановления ранних; проявлениеизменений сразу после их внесения;
· множествоавторов: вики могут править все посетители сайта
(http://ru.wikipedia.org,http://www.mediawiki.org,http://www.dokuwiki.ru).
6.Диаграмма связей (от англ. mind maps – интеллект-карта, карта памяти, картаума). Это способ изображения процесса общего системного мышления с помощьюсхем. Может рассматриваться как удобная техника альтернативной записи. Диаграммасвязей реализуется в виде древовидной схемы, на которой изображены слова, идеи,задачи или другие понятия, связанные ветвями, отходящими от центральногопонятия или идеи. В основе этой техники лежит принцип «радиантного мышления»,относящийся к ассоциативным мыслительным процессам, отправной точкой или точкойприложения которых является центральный объект. Диаграммы связей используютсядля создания, визуализации, структуризации и классификации идей, а также каксредство для обучения, организации, решения задач, принятия решений, принаписании статей. 7. Социальные сети – сайты с возможностью указать какую-либоинформацию о себе (дату рождения, школу, вуз, любимые занятия и другое), покоторой страницу пользователя смогут найти другие участники сети. Одна изобычных черт социальных сетей — система «друзей» и «групп». Социальные сетипредназначены для выстраивания онлайн-сообществ людей, объединенных какой-либодеятельностью (интересами) и заинтересованных в ее распространении.
(http://odnoklassniki.ru,vkontakte.ru, www.linkedin.com,
www.facebook.com,www.privet.ru).
8.Мэшапы – это веб-приложения, объединяющие данные из нескольких источников водин интегрированный инструмент: географические (http://wikimapia.org, sketchup.google.com,www.unype.com, earthify.org);
фотографические
www.locr.com,www.comeeko.com, www.netvides.com).
9.Общение в 3D (трёхмерной реальности) (http://secondlife.com).
Таким образом, втеоретической части нашего дипломного исследования мы раскрыли способыповышения мотивации учащихся и установили взаимосвязь между этими способами и коллективнойдеятельностью, направленной на создание школьного сайта, удовлетворяющегоинтересам самих школьников, а также содержащего возможности его совместногоиспользования и наполнения информацией в режиме он-лайн. Также мыпроанализировали научно-популярную литературу по теме «создание динамическихвеб-приложений». Как подобные технологии можно использовать на практике вшколе, мы рассмотри в практической части дипломной работы.
Глава 2. Создание школьного сайта сиспользованием технологии web2.0
2.1 Проектирование сайта. Настройкарабочей среды
Вторая глава нашейдипломного исследования посвящена практической работе по созданию школьногосайта спортивной тематики с использованием технологии web 2.0. В каждом параграфе главы будет разобран отдельновзятый этап работы над приложением, а именно: основные понятия и программныйкод, нужный для создания сайта. За основу создания сайта мы взяли руководство,описанное Квентином Зеврасом в книге «Web 2.0: создание приложений на PHP» [3].
Методика преподавания даннойне простой, не только для учащегося школы, темы заключается в следующем: заоснову берется программный код, расположенный на оф. сайте автора описанноговыше пособия. Он переписывается последовательно в том порядке, которыйпредставлен в книге. Поскольку изучить в школе языки PHP и асинхронный JavaScript на уровне позволяющем писатьподобные приложения без помощи книги, мы ставим перед собой следующие цели: учащийсядолжен знать основные понятия по каждому тематическому разделу, пониматьструктуру веб-приложения, порядок выполнения действий, этапы работы, способыподключения библиотек функций к приложению, уметь менять программныйкод, в зависимости от потребностей. Имеется ввиду HTML/CSSкод и команды на языке SQL,позволяющие создавать базы данных и запросы к ним.
Первый параграф второйглавы посвящен проектированию будущего сайта и настройке рабочей среды для егосоздания. Краткий план работы в рамках данного этапа выглядит следующимобразом:
1. Определение функций веб-сайта
2. Описание структуры веб-приложения
3. Установка и настройка веб-сервера
· Файловаяструктура приложения
· Настройкавиртуального сервера
· Настройка базыданных
4. Установка библиотеки Zend Framework
5. Установка системы управленияшаблонами
Определениефункций будущего веб-сайта
Прежде чем разрабатыватьконкретное веб-приложение, сначала нужно определить основные функции, которымион должен обладать. Именно функции сайта определяют его структуру и программныйкод. Итак, мы хотим, чтобы будущий школьный сайт спортивной тематики содержалследующие функциональные элементы:
1. Главная страница и домашние страницыпользователей.На главной странице нашего веб-приложения будут единым дневником отображатьсязаписи блогов всех пользователей. Зарегистрированные пользователи смогутвыбрать, размещать ли их записи на этой странице для всеобщего обозрения. Кромеглавной страницы, на сайте будет также набор домашних страниц отдельныхпользователей. На каждой такой странице будут отображаться записи блогаконкретного пользователя.
2. Регистрация пользователей. Необходимо создать системурегистрации пользователей, чтобы новые посетители смогли регистрировать своиучетные записи и создавать личные страницы. Данная система должна уметь делатьследующее:
· Проверятьпредоставленные пользователем данные;
· Создавать учетнуюзапись пользователя в базе данных;
· Отправлять поэлектронной почте письмо с подтверждением регистрации.
3. Вход на сайт и работа с личнойстраницей. Послесоздания учетной записи и подтверждения регистрации пользователь сможет входитьна сайт под своим именем и паролем. В этой части приложения пользователю надопредоставить следующие функциональные возможности:
· Управление своимблогом
· Изменение данныхучетной записи
· Выход из системы.
4. Блоги пользователей. Ведение блогов (личных страниц) –главная функция нашего веб-приложения. Чтобы создать удобную и полезную системууправления блогами, надо реализовать много разных функций:
· Добавлять,редактировать и удалять свои записи в блогах;
· Присваиватьзаписям блога тематические метки;
· Добавлять взаписи блогов графические изображения, показывать галереи изображений того илииного пользователя;
5. Поиск по сайту.
Основные понятияпараграфа
Веб-сервер — сервер, обеспечивающийпредоставление информации в службе глобального соединения.
Веб-сервер хранит ипредоставляет во внешнюю сеть данные, организованные в виде веб-страниц.Веб-сервер отвечает за обработку запросов клиентов к веб-сайту и исполнениеCGI-, JSP, ASP-, PHP- и других приложений.
Веб-сервером принятоназывать совокупность программного и аппаратного обеспечения, которое выполняетстандартные (хранение информации), так и дополнительные функции – ведениежурнала запросов, поддержка защищенного протокола HTTPS, динамическигенерируемых страниц.
Apache — это web-сервер, один из наиболеераспространенных, безопасных и удобных во всем мире. Если вы создаете свойдинамичный сайт с использованием языков программирования (например, таких какPerl или PHP) или просто пишете сайт, то без него Вам не обойтись. Конечно,если вы работаете дома с простыми страничками, которые написаны на HTML, тосервер Вам пока не нужен. Существуют версии как под Windows так и подUnix-платформы.
Сервер баз данных — сервер, выполняющий обработкузапросов, направляемых базе данных. Сервер баз данных обслуживает базу данных иотвечает за целостность и сохранность данных, а также обеспечивает операцииввода-вывода при доступе клиента к информации.
База данных — совокупность данных, хранимых всоответствии со схемой данных, манипулирование которыми выполняют всоответствии с правилами средств моделирования данных
MySQL — это самый популярный видуправления базой данных, который часто используется в комбинации с PHP. Данныемогут быть любыми — от простого списка предстоящих покупок до перечняэкспонатов картинной галереи или огромного количества информации в корпоративнойсети. Преимущества: открытый исходный код, быстрый доступ к данным, потому чтоданные структурируются таблицами, лёгкость использования.
PHP — это широко используемый языкпрограммирования с открытым исходным кодом. Открытый исходный код означает, чтоон может быть каждым и в любое время использован и изменён. Причём практическивсё ПО бесплатно. PHP был сделан специально для ведения разработок в интернетеи может вставляться в HTML-код. Отличием PHP от другого кода, напримерJavaScript, является то, что PHP-скрипты выполняются на сервере. Если бы у васна сервере был размещен скрипт, то посетитель страницы получил бы толькорезультат выполнения скрипта, причём он не смог бы выяснить, какой именно кодвыполняется. Вы даже можете настроить свой сервер таким образом, чтобыHTML-файлы обрабатывались процессором PHP, так что посетители страницы даже несмогут узнать, получают ли они обычный HTML-файл или результат выполненияскрипта. PHP крайне прост для освоения, но подходит и для профессиональных программистов.За несколько часов изучения PHP можно создавать простые PHP-скрипты.
Общая структуравеб-приложени
Структура будущегоприложения показана на рис. 1. Для хранения используемых имданных используется база данных. Для управления функциональными возможностямиприложения в ее структуре создано несколько логических областей. Кроме того,один из ключевых аспектов приложений для web 2.0 – строгое соблюдение стандартов XHTML и CSS. Для максимальной совместимости и согласованностидоступа к данным необходима качественная гипертекстовая разметка и хорошоструктурированные классы JavaScript. Также в ходе разработки стоит рассмотреть следующие аспекты: доступ кбазам данных, управление шаблонами, идентификация и допуски пользователей,использование сторонних веб-служб.
/>
Рис. 1 Общая структуравеб-приложения
Установка инастройка веб-сервера
Прежде чем, разрабатыватьдинамическое веб-приложение, нужно сначала установить и настроить веб-сервер. Дляработы будет использоваться следующая конфигурация:
· Веб-сервер Apache
· Сервер баз данных– MySQL
· Язык серверныхсценариев – PHP
Процесс установки
Для установки данныхпрограммных компонентов мы использовали базовый пакет Denwer. «Денвер» переводится дословно как «джентельменскийнаюор веб-разработчика». Это программа, позволяющая использовать уженастроенные Apache, PHP, MySQL и другие компоненты, необходимые для разработкиприложений. Данный пакет бесплатен и его можно скачать с официального сайтапроизводителя (http://www.denwer.ru/).
Для установки пакетанужно запустить инсталлятор и следовать его инструкциям. После завершенияустановки нужно выполнить команду Start, которая запускает виртуальный диск.
Файловая структураприложения
Рассмотрим структуру файлов,из которых будет состоять приложение. Все файлы, нужные для работы сайта будемпомещать в каталог: G:\home\localhost\www\phpweb20\. Полнаяфайловая структура web-приложенияизображена на рис. 2
/>
Рис. 2 Структуракаталогов веб-приложения
Рассмотрим подробнееназначение каждого каталога:
· Htdocs – корневой каталог, к которому будетобращаться веб-сервер. Именно этот каталог указывается в конфигурационнойинформации Apache и именно к нему обращается сервер,когда пользователь запрашивает страницу на веб-сайте.
· Data – каталог для хранения данных. Онбудет содержать журналы регистрации событий, закачанные пользователями на сайтфайлы и различные временные данные. Данный каталог будет содержать несколькоподкаталогов для отдельных типов данных: logs, uploaded-files, tmp.
· Include – каталог классов PHP. В нем будут храниться все функции ибиблиотеки PHP. Кроме собственного кода, здесь жебудут размещаться и все готовые сценарии, заимствованные у другихразработчиков. Контроллеры приложения (сценарии, которые определяют операции,разрешенные пользователю на веб-сайте) будут располагаться в подкаталоге Controllers. После того как мы создадимвиртуальный сервер Apache дляприложения, каталог Includeбудетвключен в директиву PHP include_path.
· Temlates – каталог шаблонов, в нем будутхраниться шаблоны веб-сайта. Настройка виртуального сервера
/>
Рис. 3 Конфигурациявеб-сервера Apache
Виртуальный сервер — сервер, который используются дляприсвоения одному компьютеру нескольких доменных имен. Чтобы успешносконфигурировать веб-сервер, необходимо вначале создать запись для Apache. Для этого нужно в директории G:\usr\local\apache\confотредактировать уже имеющийся файл httpd.conf. Код для конфигурации web-сервера приведен на рис.3.
Остановимся подробнее нанекоторых записях:
· VirtualHost 127.0.0.1 – адрес виртуального сервера
· ServerName phpweb20 – имя сервера«phpweb20»
· Directory"G:\home\localhost\www\phpweb20\htdocs" – указывает, в какой директорииискать главный файл index.php. Благодаря данной записи появилась возможностьобращаться к index.phpс помощью адреса localhost/.
· php_valueinclude_path".;G:\home\localhost\www\phpweb20\include\; G:\usr\local\php5\PEAR" – данная запись сообщает модулю PHP, где искать нужные для работыприложения функции на языке PHP.
Настройка базыданных
Задача данного этапа –создать базу данных MySQL, котораябудет использоваться в работе веб-приложения. У MySQL есть собственный интерфейс для организациивзаимодействия с клиентами, с помощью которого можно перемещать данные иизменять параметры базы данных. Назначение пользователей базы данных позволяетограничить круг пользователей, обладающих правом доступа к таблицам на сервере.Каждый сервер MySQL может содержать несколько базданных, где группируются таблицы. Веб-приложения, работающие на сторонесервера, могут использовать как свои собственные или как единую. Общую для всехприложений базу данных [2]. Чтобы подключиться к базе данных с целью ееиспользования, нужно знать:
· IP-адрес сервера баз данных;
· Имя базы данных;
· Имя пользователя;
· Пароль
Один из способов взаимодействияс MySQL основан на использовании клиентакомандной строки MySQL. Чтобызапустить режим командной строки, нужно найти исполняемый файл. В нашем случаеон находится по адресу:
G:\usr\local\mysql-5.1\bin. Запустив файл mysql_run_to_import_dumps.exe, появится ожидание команды вода (mysql>).
Для создания базыданных мы используем последовательность команд, изображенную на рис.4.
/>
Рис. 4 Создание базыданных для веб-приложения
Рассмотрим подробнеекаждую команду:
mysql> CREATEDATABASE phpweb20d; — данная команда создает базу данных под названием «phpweb20d»;
mysql> usephpweb20d – переходк использованию указанной базы данных;
grant allonphpweb20d.* tophpweb20d@localhostidentifiedby'diplom'; — данная команда создает учетную запись пользователя phpweb20d. Ему присваиваются все права на указанную базу данных ипароль«diplom».
Установкабиблиотеки ZendFramework
Zend Framework представляет собой библиотекукомпонентов PHP5 с открытым кодом, которую можноиспользовать для решения повседневных задач веб-программирования. Мы будемиспользовать эту библиотеку для создания веб-приложения. Поскольку онапозволяет сосредоточиться на реализации возможностей web 2.0. Рассмотрим некоторые компоненты:
· Zend_Authи Zend_Acl – используется для идентификации пользователей ипроверки уровня их доступа.
· Zend_Controller – используется для обработкизапросов клиентов и перенаправления запросов в соответствующие классы.
· Zend_Db – используются для связи с MyAQL-базой данных приложения
· Zend_Mail – используется для рассылкипользователям сообщений электронной почты.
· Zend_Validate и Zend_Filter – используется для проверки икоррекции данных, введенных пользователями в формах.
· Zend_Search – используется для полнотекстовогопоиска.
Для того, чтобыиспользовать данную библиотеку для создания приложения, нужно скачать софициального сайта (http://framework.zend.com/)установочный пакет и скопировать папку Zend в каталог include нашего веб приложения. Поскольку вфайле конфигурации уже прописан путь до каталога include, в дальнейшем можно обращаться ккомпонентам библиотеки следующим образом: require_once('Zend/имя_файла.php');
Установка системыуправления шаблонами
Для того, чтобывеб-приложение позволяло генерировать страницы на основании шаблонов, нужноустановить систему управления шаблонами. Для этих целей мы будем использовать
Smarty Template Engine – систему управления шаблонами, написанную для PHP, которая позволяет легко отделятьвывод данных и визуальную презентацию от внутренних операций приложения. Все,что увидит пользователь на экране, содержится в файле шаблона (.tpl). После обработки запросапользователя, этот файл будет выведен на экран через посредничество системы Smarty. Файл шаблона состоит изпоследовательности текстовых заменителей, используемых для динамического выводавеб-контента.
Код системы Smarty можно загрузить с официального сайта(http://www.smarty.net/). Далее нужно скопировать содержимое папки libsв подкаталог Smarty каталога include.
Чтобы пользоватьсясистемой Smarty, необходимо сконфигурироватьследующие свойства каждого созданного объекта Smarty:
· Значение template_dir задает местонахождение всех шаблонов приложения.Ранее, при создании структуры каталогов приложения и файла его рабочихнастроек, в качестве этого каталога был указан G:\home\localhost\www\phpweb20\templates
· Значение compile_dir задает каталог, в который система Smarty будет помещать скомпилированныешаблоны.
Поскольку в шаблонахиспользуется собственный метаязык, каждый такой шаблон компилируется в код PHP для ускорения последующеговыполнения.
При каждом изменениифайла шаблона система автоматически перекомпилирует его и помещает в этоткаталог. Каталог compile_dirдолжен быть доступен для записивеб-серверу. Для этой цели будем использовать каталог: G:\home\localhost\www\phpweb20\data\tmp\templates_c
Далее, с цельюпрограммной реализации настроек, мы последовательно создаем файлы, код которыхнаходится в приложении 2 (листинг1.1 – 1.10). Результатомреализации данного программного кода является главная страница сайта, котораяавтоматически создается по шаблону.
Таким образом, в этомпараграфе мы начали непосредственную разработку веб-приложения. Настроив рабочуюсреду, мы создали структуру приложения: разместили файлы в системе каталогов,задали общие настройки и параметры соединения с базой данных, подключилиобработку запросов, настроили вывод веб-страниц с помощью системы Smarty.
/>
Рис. 5 Главная страницабудущего веб-приложения
2.2 Учетные записи и личные страницыпользователей. Реализация средств web2.0
В данном параграфе мыдобавим в приложение средства аутентификации и авторизации пользователей спомощью компонента Zend_Auth из библиотеки ZendFramework. В числе этих средств – таблицы базы данных дляхранения информации о пользователях. План работы по данному направлениюразработки веб-приложения выглядит следующим образом:
1. Создание таблицы пользователей в базеданных
2. Программная реализация аутентификациипользователей
3. Регистрация, вход и выходпользователей
Создание таблицыпользователей в базе данных
Поскольку в приложениипредусмотрено хранение учетных записей множества пользователей, данные записинадо привести к организованной структуре. Для этого создадим таблицу базыданных под названием users. Каждаязапись таблицы соответствует одному пользователю и содержит информацию опользователе. Для каждого пользователя в базе данных будут храниться следующиеключевые параметры:
· User_id – целое число, используемое для внутреннегопредставления пользователя, его идентификационный номер;
· Username – уникальный буквенный идентификаторпользователя, используемый для входа на сайт. Это имя будет публичным – оноотображается в записях блога и других видах общедоступного контента сайтавместо настоящих имен, которые пользователи обычно скрывают;
· Password – строка символов, по которой выполняетсяаутентификация пользователя.
· User_type – строка, обозначающая классификациюпользователя по системе типов и категорий (администратор, пользователь илигость).
Поскольку таблица users не содержит никакой информации осамих пользователях, то для хранения этой информации нужно создать еще однутаблицу. Она будет называется users_profile. Вводя новую таблицу для хранения информации опользователях, мы получаем возможность ее неограниченно расширять, незатрагивая таблицу users. Каждаязапись в такой таблице будет соответствовать одному значению одного параметрапользовательского профиля. Таблица будет иметь три столбца:
· User_id – ссылка на пользователя, то есть запись в таблице users;
· Profile_key – имя параметра, который хранится в данной записи;
· Profile_value – значение параметра. Если значениеполя Profile_key равно e-mail, текущее поле будет содержать самадрес.
Для создания двухсвязанных таблиц, нужно использовать команды SQL, приведенные на рис.6.
Прокомментируем каждуюкоманду:
· Usephpweb20 – обратить к базе данных phpweb20; createtableusers – создать таблицу users, аналогично создаетсятаблица users_profile; user_idserialnotnull – устанавливает тип serial для поля user_id. Это счетчик, который автоматически будет менятьсядля каждой записи данного поля, не может быть пустым; Usernamevarchar(255) notnull – поле username может иметь до 255 символов в длину.Поля password и user_type будут иметь длину 32 и 20 символовсоответственно.
/>
Рис. 5 Команды sql для создания двух связанных таблиц
· primarykey (user_id) – поле user_id является ключевым
· unique(username) – полеusername уникальное, то есть его значения дляразных пользователей не могут повторяться.
· type = InnoDB– тип таблицы определентаким образом, чтобы была возможность создавать реляционные связи по внешнимключам.
· primarykey (user_id, profile_key) – поляuser_id, profile_key уникальны.
· foreignkey (user_id) references users (user_id) – даннаятаблица связанас таблицей users по ключевому полю user_id
Программнаяреализация аутентификации пользователей
Для аутентификациипользователей, то есть проверке вводимых им регистрационных данных используетсяпрограммный компонент Zend_Auth библиотеки Zend FrameWork. Чтобы пользователь прошелаутентификацию, он должен предоставить контрольную информацию. В нашем случаетакой информацией является поле password таблицы users. Проверка идентификационных данных и контрольной информации путемсравнения их с информацией из базы данных выполняется адаптером. Чтобыподключить данный компонент, мы последовательно набираем программный код,находящийся в листингах 2.1 – 2. 3 (приложение 2).
Регистрация, вход ивыход пользователей
Реализация процессарегистрации нового пользователя на сайте состоит из следующих этапов: добавлениесредств навигации по сайту, чтобы пользователь мог найти регистрационную форму;отображение регистрационной формы; получение от пользователя егоидентификационных данных и проверка их корректности; вывод сообщений об ошибках;сохранение записи в базе данных, отправка пользователю почтового сообщения,отображение страницы подтверждения регистрации.
Порядок написания программногокода для реализации данных функций веб-приложения следующая:
1. Создание класса функций, отвечающегоза обработку регистрационных форм UserRegistration.php(листинг 2.4)
2. Создание шаблонов для страниц,связанных с регистрацией пользователей (листинг 2.5 – 2.6) Использованиеобработчика для входа пользователя на сайт AccountController.php.
/>
Рис. 6 Форма длярегистрации
/>
Рис. 7 Форма для входа насайт
/>
Рис. 8 Приветствиевошедшего пользователя
Реализация средств web2.0.
Реализация средств web 2.0 подробно описана в книге К.Зевраса «Web 2.0: создание приложений на PHP» в главах 8-10. Для создания системыблогов мы последовательно используем приведенный в книге код, не внося в негоизменений. Главное, что нужно знать учащимся – это технологии, использованиекоторых дает возможность создавать веб 2.0 – приложения:
· Prototype – библиотека кода JavaScript, которая упрощает написание кода наязыке JavaScript, предлагая удобные средствамежплатформенной разработки.
· Scriptaculous – библиотека кода JavaScript, предназначенная для созданияспецэффектов и улучшения пользовательского интерфейса веб-сайтов. Этабиблиотека основывается на средствах Prototype.
Основная самостоятельнаяработа будет осуществляться учащимися в области оформления web-приложения. Данной теме посвященследующий параграф.
2.3 Визуальная стилистика web-приложения. Методика преподаванияязыковых стандартов разметки гипертекста в школе
В отличие отпрограммирования на языках PHP и JavaScript, а также создания баз данных изапросов к ним, языковые стандарты разметки гипертекста HTML и CSS являются, на наш взгляд, наиболее доступной для пониманияшкольников темой и способствуют реализации творческих способностей учеников.Если большая часть программного кода созданного приложения предполагает егокопирование и пользование готовыми библиотеками, то визуальное оформлениеучащиеся способны сделать самостоятельно и, в зависимости от мотивации, весьмаинтересное и качественное. Применительно к теме нашей дипломной работы,создание визуального оформления веб-приложения не будет отличаться отоформления обычных html-страниц. Длястандартных элементов оформления нужно прописать код на языке CSS, задающий стиль этих элементов.Поэтому в данном параграфе мы выложим все задания по теме «Гипертекстовоепредставление информации», которые применялись мною на уроках информатике в 9классе.
Практическая работа №1«Создание html-страниц.Простейшие средства оформления»
Задание 1
Создайте html-страницу
1. Имеющую заголовок «Лабораторнаяработа №1. »
2. Цветной фон (выбрать любой цвет)
Задание 2
1. На созданной странице разместитеследующее стихотворение “колыбельная” из приложения 3:
2. Оформите текст следующим образом:
Ø Заголовок выровнен по центру,четверостишья — по левому краю, авторство — по правому;
Ø Каждый абзац написан различнымшрифтом, цветом и размером.
Ø Заголовок по размеру большеостального текста и имеет жирное начертание
Ø Авторство написано курсивом
Ø Все компьютерные термины подчеркнуты.
Задание 3
Создайте html-страницу с именем Page2.html, имеющую
1. заголовок «Лабораторная работа №1.»
2. цветной фон (выбрать любой цвет)
На созданной страницеразместите следующую классификацию ЛВС из приложения 3 и оформитеее по образцу/>
Задание 4
1. Откройте документ Page2.html
1. Вставьте в этот документ «синий»текст ниже «классификации компьютерных сетей» и выполните задания:
1) С помощью тэгов p>, br> и ul>списокul> отформатируйте текст по образцу.
2) Вставьте картинки из папки imagesв те места, где стоит соответствующаяметка
3) Вернитесь к пункту классификации «Потипу сетевой топологии ». Сделайте так, чтобы каждый пункт списка (шина, звездаи т.д.) являлся ссылкой на соответствующее место в документе
4) * Измените начертание, размер и цветтекста «по вкусу»
Практическая работа №2
«Создание таблиц спомощью языка html»
Справочный материал
1. ТЭГИ
table> — начало таблицы
Содержимое таблицы
table> — конец таблицы
tr> — начало строки
Содержимое
tr> — конец строки
td> — начало столбца
Содержимое ячейки
td> — конец столбца
Пример
Написать код для созданиятаблицы, состоящей из 2 строк и 2 столбцов1 2 3 4
перваястрокà
1
2
--вторая строкаà
td> 3 td>
4
1. АТРИБУТЫТЭГОВ
1) Размеры
width = “ширина таблицы”
height = “высота таблицы”
2) Отступы
cellspasing = “расстояние между ячейками”
cellspadding = “отступ от границ ячейки внутринее”
3) Линии
border = “толщина линии рамки” bordercolor = “цвет линии рамки”
4) Заливка ячеек
bgcolor = “цвет заливки ячейки”
background = “фоновая картинка для таблицы”
5) Выравнивание
align = “выравнивание содержимого таблицыпо горизонтали”
valign = “выравнивание содержимого таблицыпо вертикали”
1. Для тэгов и применимы те же атрибуты, кроме №2 и №3, НО относитсяони будут исключительно к содержимому строки () и конкретной ячейки ()
2. Если ячейка ничего несодержит, то между тэгами, обозначающими ячейку, нужно вставить специальный код
td> td>
6) Объединениестрочек
Rowspan= “количество ячеек”
7) Объединениестолбцов
Colspan= “количество ячеек”
Задание №1
1. Откройте файл page3.html
2. Используярассмотренный ранее материал, создайте таблицу по образцу
/>
Этапы выполнениязадания:
1. Создайте таблицу, состоящую из 9строчек и 6 столбцов. Пронумеруйте ячейки следующим образом.
1 2 3 4 5 6 7 8 9 10 11 12 13 14
2. Задайте для тэга table> следующие атрибуты:
1) Ширина – 1000 пикселей
2) Выравнивание по центруэкрана
3) Расстояние междуячейками – 0
4) Отступ от границячейки внутри нее – 2 пикселя
5) Толщина линии – 1.Цвет линии – любой.
3. С помощью атрибута colspan= ‘” объедините 1,2 и 3 ячейки
4. С помощью атрибута rowspan= “” объедините ячейки: 7-9 и 10 – 14
5. Раскрасьте таблицу,задайте ширину столбцов (в %) и внесите в нее данные.
*Ширина столбца «Домашнеезадание» — 50%, «Предмет» — 25%. Остальные – 12,5%
Практическая работа №3
“Создание галереи”
Создайте html-документ, имеющий следующуюструктуру
1 строка: Названиегалерии и автор работы
2 строка: Список разделовгалереи
3 строка: Названиепервого раздела галереи
4 строка: Содержимоепервого раздела
5 строка: Названиевторого раздела галереи
6 строка: Содержимоевторого раздела
7 строка: Названиетретьего раздела галереи
8 строка: Содержимоетретьего раздела
Примечания:
1. Заднийфон надо замостить каким-либо изображением из папки background
2. Таблицазакрашена любым цветом и выровнена по центру
3. Списокразделов состоит из гиперссылок, позволяющих переходить к нужному месту вдокументе
4. Вкаждом разделе галереи содержатся миниатюры из папки small,которые являются ссылками на аналогичные изображения, хранящиеся в папке big.Чтобыкартинка открывалась в новом окне, нужно в тэге a>использоватьатрибут target="_blank"
5. Весьсодержащийся на старнице текст нужно отформатировать “по вкусу”, то естьизменить размер, шрифт, начертание и цвет.
Практическая работа №4
Написать таблицу стилей(CSS) для html-документа «Цвет и цветовые модели» (приложение№3)
Требования:
1. Заголовок 1-гоуровня (...)
— Выравнивание поцентру
— Отступ от верхнегокрая экрана — 30px
— Высота нижнего поля — 30x
— Размер, цвет и начертание,отличное от других элементов
2. Заголовки 2-гоуровня (...)
— Выравнивание полевому краю
— Высота нижнего поля в2 раза меньше высоты верхнего поля (задать самостоятельно)
— Наличие левогоотступа (задать самостоятельно)
— Размер, цвет и начертание,отличное от других элементов
3. Абзац ()
— Наличие краснойстроки (значение задать самостоятельно)
— Выравнивание поширине экрана
— Ширина левого отступа= ширине правого отступа (задать самостоятельно)
— Размер, цвет иначертание, отличное от других элементов
4*. Создать три классадля следующих частей абзаца (...)
1) Первое предложениекаждого абзаца
2) Термины иобозначения
3) Названия цветов
Задание №2
1. С помощью cssзадайте для элемента body (тело страницы) следующие значения:
— Фон закрашен однимузором из папки background. Изображение повторяется по горизонтали и повертикали
— Фон во времяпрокрутки страницы остается неподвижным
2. Создайте три классаэлементов «блок» (...)
1) Первый класссодержит в себе заголовок страницы (Цвет и цветовые модели)
— фон закршен одной изкартинок из папки background
— Изображение повторятьтолько по горизонтали
— высоту (height)задайте самостоятельно
— ширина (width) 100%
2) Второй класссодержит в себе меню страницы
— фон закрашенпроизвольным цветом
— высоту (height)задайте самостоятельно
— ширина (width) 100%
3) Третий класссодержит в себе графические изображения, расположенные в конце каждого абзаца.В блоке могут находится несколько изображений.
Практическая работа №5Разметка web-страницыс помощью «блоков»
/>
Пример:
Создание блока «Шапкастраницы»
Шапка страницы
Описание блока «Шапкастраницы с помощью CSS»
#top
{
height:200px;
width:100%;
background-color:#cc00cc;
position:absolute;}
Задание №1
1. Создайте 4 блока сразными идентификаторами и расположите в них соответствующий текст
1) Шапка страницы
2) Меню сайта
3) Контент сйта
4) Логотип сайта
2. Напишите таблицустилей для каждого блока, используя свойства:
height:
width:
background-color:
margin-left:
margin-top:
position:absolute;
Задание№2
1. Замостите любым узором из папки Background фон документа (по желанию, блоки«Меню сайта» и «Шапка страницы»)
2. Закрасьте блок «Контент сайта»цветом, согласующимся с фоном страницы.
3. Вставьте в блок «Логотип» любуюкартинку из папки Logo
4. Откройте Вашу предыдущую практическуюработу, находящуюся в папке «CSS –Прак. раб№2»
5. Скопируйте на страницу:
1) Заголовок «Цвета и цветовые модели» вблок «Шапка страницы»
2) Меню в блок «Меню»
3) Весь остальной текст в блок «Контентсайта»
6. Скопируйте таблицы стилей для этихэлементов и добавьте их на новую страницу
Данная система заданийимеет свой целью научить школьников основным приемам разметки веб-страницы спопомщью элементов и присваивать этим элементам нужные свойства с помощьюкаскадных таблиц стилей. В случае успешного овладения данными навыками, онибудут способны создать шаблон для генерации веб-страниц.
Таким образом, впарктической главе мы рассмотрели методику преподавания технологии web2.0 в школе и процесс создания школьго сайта с применением этой технологии,доступный по содержанию для учащихся школы.
Заключение
Подведем итоги нашейдипломной работы. Итак, наше исследование состоит из теоретической ипрактической части. В теоретической части мы рассмотрели психолого-педагогическиеаспекты преподавания веб-технологий в школе и способы воздействия на мотивациюучащихся с целью совместного создания и ведения школьного сайта спортивнойтематики. Также мы проанализировали научно-популярную литературу и различныеинформационные ресурсы по теме «Создание динамических web-приложений». На основе данного анализа мы выбралитехнологии, которые впоследствии использовали для создания веб-приложения «Спортивныйсайт школы».
В ходе теоретического иэкспериментального исследования получены следующие основные результаты:
1. Мы изучили методическую инаучно-популярную литературу по теме исследования и рассмотрели возможность ееприменения в образовательном процессе;
2. Установили взаимосвязь между совместнойработой над школьным сайтом и повышением мотивации к учебному процессу;
3. Установили класс теоретическихпонятий, которые нужно знать и понимать школьнику для выполнения практическойчасти;
4. Определили задания, выполнениекоторых призвано облегчить процесс понимания технологии web 2.0.
5. Отделили самостоятельную работу посозданию приложения от использования готового кода.
Создание веб-приложенияпо технологии web 2.0 делится нанесколько тематических этапов. На каждом этапе учащийся должен усвоитьопределенный объем понятий, связанных с темой этапа. Каждый этап имеет своюспецифику и предполагает использование тех или иных библиотек, программный кодкоторых менять не нужно. Учащимуся нужно знать, как функции этих библиотекподключаются к страницам веб-приложения и что обозначает каждый используемыйкомпонент. Также результатом проведения данной работы должно стать знаниеосновных команд языка запросов SQL,позволяющих создавать базы данных и связанные в ней таблицы. Цель подобнойработы – дать учащимся представление об этапах и способах созданиявеб-приложений, понимание их структуры, а не научить программировать на PHPи JavaScript. Фактически, созданиешкольного сайта – это осмысленное использование программного кода, котороедолжно жать учамися ценный опыт для дальнейшей работы в этом направлении. Основнойупор при работе над данным проектом делается на визуальную стилистикуприложения, потому как разметка гипертекста наиболее доступная учащимся дляпонимания.
Цель и задачи работыдостигнуты. Был сощдан школьный сайт спортивной тематики, на примере которогоучащиеся познакомились с технологией web2.0, а именно, поняли, в чем она состоит и за счет чего может быть реализована.
Библиография
1. Амуленкан, В. Технологии Web 2.0 [Электронный документ] /В. Амуленкан, Е. Кореко. – (http://av-school.ru/article/a-65.html). 28.03.2010
2. Дэвис, Е.М. Изучаем PHP и MySQL.: Пер. с англ. [Текст] /Е.М. Дэвис, Дж. А. Филипс.– СПб: Символ-Плюс, 2008.– 448 с.: ил.
3. Зеврас, К. Web 2.0 [Текст]: создание приложений на PHP /К. Зеврас.– М.: Вильямс, 2010.– 544 с.: ил.
4. Коннолли, Т. Базы данных: проектирование, реализация исопровождение: Учебник [Текст] / Т. Коннолли, К. Бегг.– М.: Диалектика, 2001.–1120 с.
5. Маклафлин, Б. Изучаем Ajax [Текст] / Б. Маклафлин.– СПб.:Питер, 2008.– 443 с.: ил.
6. Макфарланд, Д. Большая книга CSS [Текст] / Д. Макфарланд.–СПб.: Питер, 2010.– 512 с.: ил.
7. Монахов, М.Ю. Создаем школьный сайт в Интернете.Элективный курс [Текст]: Учебное пособие / М.Ю. Монахов, А.А. Воронин.– М.:Бином. Лаборатория знаний, 2005.– 128 с.: ил.
8. Образовательные возможности Веб 2.0.Веб 2.0 – сервисы Интернета – новые формы коллективного педагогическоговзаимодействия [Электронный документ]. – (www.eelmaa.net/dld/web20.pdf).10.04.2010
9. Скляр, Д. PHP. Рецептыпрограммирования [Текст] / Д. Скляр, А. Трахтенберг.– 2-е изд.– М.; СПб.:Русская редакция: БХВ-Петербург, 2007.– 736 с.: ил.
10. Что такое WEB 2.0 [Электронный документ].–(http://www.weboptima.ru/2_0.htm/). 28.03.2010
11. (http://coolvds.com/blog/webservers/what-is-a-webserver/)[Электронный документ]. 5.05.2010
12.(http://web20.su/blog/saytostroenie/wordpress-drupal-joomla/) [Электронныйдокумент]. 12.04.2010
Приложение 1
Обзор движков длясоздания сайтов по технологии web2.0[12]
Сервисы для созданияблогов, вроде LiveJournal или BlogSpot – это, конечно, удобно и просто, нокаждый блоггер со временем начинает задумывается об автономном блоге насобственном домене и отдельном движке. Выбрать последний – не самая простаязадача. Рассмотрим несколько движков, которые подойдут для создания блога.
Wordpress
Самый популярный в сетидвижок для создания блогов. Был разработан (Ryan Boren и Matthew Mullenweg) наPHP и MySQL. Среди достоинств Вордпресса можно назвать множество функций,необходимых блоггеру, русскоязычную поддержку в виде сообщества пользователей,большое количество плагинов и скинов, которые можно скачать на официальном ирусском сайтах Вордпресса, а также то, что этот движок распространяетсябесплатно. К недостаткам – то, что Wordpress – CMS исключительно для созданияблога, полноценный сайт на нем не построишь. Идеально подойдет для новичков.
(Скачать WordPress можнос wordpress.org/)
Joomla!
Появилась в результатеработы команды программистов под началом Эндрю Эдди (команда, разработавшаятакже Mamba CMS). Вообще, Joomla не «заточена» специально под создание блогов ивеб 2.0 сайтов в целом. Базируется на языке PHP с поддержкой MySQL. Движокдостаточно известен и популярен среди владельцев сайтов, блоги на этой CMSсоздаются, но их не настолько много. Сама Joomla! более сложна в использованиии не подходит для новичков, особенно если это касается первоначальной настройкии настройки обновлений. Расширения выпускаются в больших объемах, скачать ихможно на официальном сайте разработчиков.
(Официальный сайт –http://www.joomla.org/)
Drupal
Drupal – универсальныйдвижок для создания сайтов любого типа. Блог на Drupal можно разбавитьсообществом, форумом и другими расширениями. Построен на базе PHP. С помощьюDrupal можно построить не только блог, но и небольшую социальную сеть.Бесплатных приложений к этому движку очень много, многие из них весьма полезныименно для блогов. Drupal – CMS сложная для простого пользователя. Упрограммиста на php она не вызовет сложностей. Скачать Drupal и найтидокументацию по нему можно на drupal.org/
Textpattern
Бесплатный движок наPHP/MySQL. Подойдет для тех, кто не хочет «заморачиваться» по поводумногочисленных функций и настроек, сама настройка займет у пользователя неболее получаса. На этой CMS создать блог еще проще, чем на Вордпрессе, правда,здесь придется учить либо язык разметки Textile для форматирования текста всамом интерфейсе движка, либо html, чтобы создавать и закачивать готовыестраницы в блог. Поклонников Textpattern куда меньше, но расширений и тем кдвижку достаточно.
b2evolution
Как и все другие движки,описанные выше, b2evolution создан на языке PHP. CMS подходит для создания какодного блога, так и целой сети. Движок прост в использовании, в редакторезаписей имеет минимальный набор настроек. Распространяется, разумеется, такжебесплатно. К сожалению, плагинов у него очень немного – около 200 (по сравнениюс 3700 у Joomla), скачать их можно в сообществе b2evolution.
e2 По мнению Яндекса, самый лучшийдвижок для создания блогов. Разработан относительно недавно Ильей Бирманом наPHP. Главное отличие этого движка от других – отсутствие отдельной админки, всеуправление проходит в пользовательском интерфейсе, на котором владельцу блогадоступны дополнительные функции, которых достаточно много.
Приложение 2
Программный код,использовавшийся в практической части
Листинг 1.1Перенаправление запросов к веб-сайту через файл index.php
(файл .htaccess)
RewriteEngineon
RewriteCond%{SCRIPT_FILENAME} !-f
RewriteCond%{SCRIPT_FILENAME} !-d
RewriteRule^(.*)$ index.php/$1
Листинг 1.2 Обработкапользовательских запросов методами класса Zend-Controller(файл index.php)
require_once('Zend/Loader.php');
Zend_Loader::registerAutoload();
$controller =Zend_Controller_Front::getInstance();
$controller->setControllerDirectory($config->paths->base.
'/include/Controllers');
$controller->dispatch();
?>
Листинг 1.3 Контроллерindex, используемый на главной страницевеб-приложения (файлIndexController.php)
require_once('CustomControllerAction.php');
classIndexController extends CustomControllerAction
{
publicfunction indexAction()
{
Echo’Будущий школьный сайт’;
}
}
?>
Листинг 1.4 Начальныенастройки приложения (файлsettings.ini)
[development]
database.type =pdo_mysql
database.hostname= localhost
database.username= phpweb20
database.password= myPassword
database.database= phpweb20
paths.base =/var/www/phpweb20
paths.data =/var/www/phpweb20/data
paths.templates= /var/www/phpweb20/templates
logging.file =/var/www/phpweb20/data/logs/debug.log
Листинг 1.5 Загрузкарабочих настроек приложения с использованием класса Zend_Config_Ini(файл index.php)
$config = newZend_Config_Ini('../settings.ini', 'development');
Zend_Registry::set('config',$config);
$controller->setControllerDirectory($config->paths->base.
'/include/Controllers');
Листинг 1.6 РасширениеSmartyдля использования в веб-приложении
(файл Templater.php)
classTemplater extends Zend_View_Abstract
{
protected$_path;
protected$_engine;
publicfunction __construct()
{
$config =Zend_Registry::get('config');
require_once('Smarty/Smarty.class.php');
$this->_engine= new Smarty();
$this->_engine->template_dir= $config->paths->templates;
$this->_engine->compile_dir= sprintf('%s/tmp/templates_c',
$config->paths->data);
$this->_engine->plugins_dir= array($config->paths->base .
'/include/Templater/plugins',
'plugins');
}
publicfunction getEngine()
{
return$this->_engine;
}
publicfunction __set($key, $val)
{
$this->_engine->assign($key,$val);
}
publicfunction __get($key)
{
return$this->_engine->get_template_vars($key);
}
publicfunction __isset($key)
{
return$this->_engine->get_template_vars($key) !== null;
}
publicfunction __unset($key)
{
$this->_engine->clear_assign($key);
}
publicfunction assign($spec, $value = null)
{
if(is_array($spec)) {
$this->_engine->assign($spec);
return;
}
$this->_engine->assign($spec,$value);
}
publicfunction clearVars()
{
$this->_engine->clear_all_assign();
}
publicfunction render($name)
{
return$this->_engine->fetch(strtolower($name));
}
publicfunction _run()
{ }
}
?>
Листинг1.7 Новыйконтроллер, выводящийфайлindex.tpl
(файл IndexController.php)
classIndexController extends CustomControllerAction
{
publicfunction indexAction()
{
}
}
?>
Листинг1.8 Шаблондляоперацииindex контроллераindex
(файл index.tpl)
{includefile='header.tpl'}
Будущий спортивный сайт школы
{includefile='footer.tpl'}
Листинг1.9 ФайлзаголовкаHTML-страницы
(файл header.tpl)
PUBLIC"-//W3C//DTD XHTML 1.0 Strict//EN"
«www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd»>
Title
Листинг 1.10 Файлконца страницы, в котором закрываются тэги, открытые в заголовке(файл footer.tpl)
Листинг 2.1Загрузочный файл приложения с использованием компонента Zend_Auth(файл index.php)
// настройкаутентификации пользователей
$auth =Zend_Auth::getInstance();
$auth->setStorage(newZend_Auth_Storage_Session());
$controller->registerPlugin(newCustomControllerAclManager($auth));
Листинг 2.2 Подключаемыймодуль CustomControllerAclManager, проверяющий допуски перед отправкой запросана обработку
(файл CustomControllerAclManager.php)
class CustomControllerAclManagerextends Zend_Controller_Plugin_Abstract
{
// роль по умолчанию,если не вошел (или роль не определена)
private $_defaultRole ='guest';
// выполнить операцию,если у пользователя не хватает привилегий
private$_authController = array('controller' => 'account',
'action' =>'login');
publicfunction __construct(Zend_Auth $auth)
{
$this->auth= $auth;
$this->acl= new Zend_Acl();
// добаляем новые роли
$this->acl->addRole(newZend_Acl_Role($this->_defaultRole));
$this->acl->addRole(newZend_Acl_Role('member'));
$this->acl->addRole(newZend_Acl_Role('administrator'), 'member');
// добавляем контролируемые ресурсы
$this->acl->add(newZend_Acl_Resource('account'));
$this->acl->add(newZend_Acl_Resource('admin'));
// по умолчанию даемвсемпользователям доступ ко всему
// кроме управленияучетными записями и администрированием
$this->acl->allow();
$this->acl->deny(null,'account');
$this->acl->deny(null,'admin');
// добавляем исключение.чтобы гости могли войти или
// зарегистрироваться,если нет привилегий
$this->acl->allow('guest','account', array('login',
'fetchpassword',
'register',
'registercomplete'));
// позволяемзарегистрированным пользователям доступ к управлению учетными записями
$this->acl->allow('member','account');
// даем администраторамдоступ в область администрирования
$this->acl->allow('administrator','admin');
}
/**
* preDispatch
*
* Прежде, чем отправлятьзапрос на обработку, проверяет есть ли у пользователя
* нужные привелегии. Еслинет, инициирует операцию по умолчанию
*
*
* @paramZend_Controller_Request_Abstract $request
*/
publicfunction preDispatch(Zend_Controller_Request_Abstract $request)
{
// проверка, вошел липользователь и имеет ли нужную роль
// если нет, тоназначается роль по умолчанию (гость)
if($this->auth->hasIdentity())
$role =$this->auth->getIdentity()->user_type;
else
$role =$this->_defaultRole;
if(!$this->acl->hasRole($role))
$role =$this->_defaultRole;
// контролируемый ресурс- имя запрашиваемого контроллера
$resource =$request->controller;
// привилегия — имязапрашиваемой операции
$privilege =$request->action;
// если ресурс неопределен явно. проверить
// глобальные допускипо умолчанию
if(!$this->acl->has($resource))
$resource = null;
// в допуске отказано.Выполняется операция по умолчанию
if(!$this->acl->isAllowed($role, $resource, $privilege)) {
$request->setControllerName($this->_authController['controller']);
$request->setActionName($this->_authController['action']);
}
}
}
?>
Листинг 2.3Первоначальная версия класса DatabaseObject_User
(файл user.php)
classDatabaseObject_User extends DatabaseObject
{
static$userTypes = array('member' => 'Member',
'administrator'=> 'Administrator');
public$profile = null;
public$_newPassword = null;
publicfunction __construct($db)
{
parent::__construct($db,'users', 'user_id');
$this->add('username');
$this->add('password');
$this->add('user_type','member');
$this->add('ts_created',time(), self::TYPE_TIMESTAMP);
$this->add('ts_last_login',null, self::TYPE_TIMESTAMP);
}
}
?>
Листинг2.4 ПолныйтекстклассаFormProcessor_UserRegistration
(файл UserRegistration.php)
classFormProcessor_UserRegistration extends FormProcessor
{
protected $db= null;
public $user =null;
publicfunction __construct($db)
{
parent::__construct();
$this->db =$db;
$this->user= new DatabaseObject_User($db);
$this->user->type= 'member';
}
publicfunction process(Zend_Controller_Request_Abstract $request)
{
// проверка правильности имени
$this->username= trim($request->getPost('username'));
if(strlen($this->username) == 0)
$this->addError('username','Please enter a username');
else if(!DatabaseObject_User::IsValidUsername($this->username))
$this->addError('username','Please enter a valid username');
else if($this->user->usernameExists($this->username))
$this->addError('username','The selected username already exists');
else
$this->user->username= $this->username;
// проверка имени и фамилии
$this->first_name= $this->sanitize($request->getPost('first_name'));
if(strlen($this->first_name) == 0)
$this->addError('first_name','Please enter your first name');
else
$this->user->profile->first_name= $this->first_name;
$this->last_name= $this->sanitize($request->getPost('last_name'));
if(strlen($this->last_name) == 0)
$this->addError('last_name','Please enter your last name');
else
$this->user->profile->last_name= $this->last_name;
// проверка адресаэлектронной почты
$this->email= $this->sanitize($request->getPost('email'));
$validator =new Zend_Validate_EmailAddress();
if(strlen($this->email) == 0)
$this->addError('email','Please enter your e-mail address');
else if(!$validator->isValid($this->email))
$this->addError('email','Please enter a valid e-mail address');
else
$this->user->profile->email= $this->email;
$session = newZend_Session_Namespace('captcha');
$this->captcha= $this->sanitize($request->getPost('captcha'));
if($this->captcha != $session->phrase)
$this->addError('captcha','Please enter the correct phrase');
// если ошибок нет,сохранить данные пользоваетля
if(!$this->hasError()) {
$this->user->save();
unset($session->phrase);
}
// возврат true, если нет ошибок
return!$this->hasError();
}
}
Листинг 2.5 Шаблон HTMLдля формы регистрации пользователей
(файл register.tpl)
{includefile='header.tpl'}
Созданиеаккаунта
hasError()} style=«display:none»{/if}>
Заполните поля
Логин:
name=«username»value="{$fp->username|escape}" />
{includefile='lib/error.tpl' error=$fp->getError('username')}
E-mail:
name=«email»value="{$fp->email|escape}" />
{includefile='lib/error.tpl' error=$fp->getError('email')}
Имя:
name=«first_name»value="{$fp->first_name|escape}" />
{includefile='lib/error.tpl' error=$fp->getError('first_name')}
Фамилия:
name=«last_name»value="{$fp->last_name|escape}" />
{includefile='lib/error.tpl' error=$fp->getError('last_name')}
Введите символы,изображенные на картинке:
name=«captcha»value="{$fp->captcha|escape}" />
{includefile='lib/error.tpl' error=$fp->getError('captcha')}
{includefile='footer.tpl'}
Листинг 2.6 Формавхода на сайт (файл login.tpl)
{includefile='header.tpl'}
Зайти подсвоим именем
Логин:
name=«username»value="{$username|escape}" />
{includefile='lib/error.tpl' error=$errors.username}
Пароль:
name=«password»value="" />
{includefile='lib/error.tpl' error=$errors.password}
Забылипароль
{includefile='footer.tpl'}
Приложение 3
Материал для практическихзаданий по теме «Гипертекстовое представление информации»
Колыбельная.
Уснули километрыпроводов, уснули мониторы, материнки,
Уснули мыши, шарикимышов, цветные гифки и jpeg картинки.
Все биты, байты всеобъяты сном, и таймер больше такт не отбивает.
Не крутится уж больше CDROM, и память с кешом тихо засыпает.
Отключен интернет, погасмодем, процессор флаги выставил отбоя
Не бегают пакеты по сетиеще вчера не ведавшей покоя,
Коннект разорван ипрервалась нить, связующая близкое с далеким.
Динамик спит, чуть дышитмикрофон у спящего винчестера под боком.
Спит сканер, стример.Принтер сном объят, программы каждою своею строчкой.
Ячейки памяти и электроныспят. Все числа с плавающей и обычной точкой.
И каждый слот, детальсвою прижав, и дисковод дискету обнимая.
Машинный код недвижимый,устав лежит, беспечно сну внимая.
И пиксели не радуют ужглаз, системный блок в объятиях Морфея
Стоит во тьме, Луна — большой топаз, лениво освещает батарею
Бесперебойного питания. Втиши клавиатура дремлет под рукой твоею
Усни родная, и пусть сонявит то, что сказать тебе я не успею.
(с) Автор неизвестен,найдено на просторах сети
Классификация ЛВС
1. По охвату территории
— Персональная
— Локальная
— Городская
— Национальная
— Глобальная
2. По типу функциональноговзаимодействия
o Клиент-сервер
o Из точки в точку
o Одноранговая
3. По типу сетевой топологии
· Линейная шина
· Звезда
· Кольцо
· Решетка
· Смежная
· Полносвязанная
4. По функциональному назначению
a. Сети хранения данных
b. Сети управления процессом
c. Сети SOHO
5. По сетевым операционным системам
I. Windows
II. Linux
III. NetWare
IV. Смешанная
Цвет ицветовые модели
Меню
Что такое цвет
Цветовой круг
Цветовая модельRGB
Цветовая модельCMYK
Цветовая модельHSB
Что такоецвет
Что же такое цвет? Мы смотрим на предметыи, характеризуя их, говорим примерно следующее: он большой, мягкий,светло-голубого цвета. При описании чего-либо в большинстве случаев упоминаетсяцвет, так как он несет огромное количество информации. На самом деле тело неимеет определенного цвета.
Если говорить о дневномосвещении, то это белый свет. Попадая на предмет, он частично поглощается, ачастично отражается, так вот именно отраженный спектр и видит человек.
Видимыми являются волны,лежащие в диапазоне от 760 до 380миллимикрон, хотя некоторые животные видят и в областяхультрафиолетовых и ультракрасных волн. Зависимость цвета от длины волныпредставлена в таблице 1.
Первый, кто сумелразложить свет на различные составляющие, был Ньютон. Он заметил, что припропускании света через призму он раскладывается на лучи разных цветов, послечего снова собирается воедино.
Основным заблуждениемчеловека является то, что он видит то, что привык видеть, а именно еслисмотреть на хорошо знакомый красно-белый объект, освященный лишь зеленымсветом, то мы все равно увидим два цвета — красный и белый, — хотя в мозг черезглаз поступает иной сигнал, который игнорируется, точнее, преобразовывается всоответствии с тем, что он знает, а не с тем, что видит.
Дело в том, что зеленыйсвет не содержит красных лучей, следовательно, и отразить их предмет не может,а поэтому он поглощает весь спектр лучей, и оттого приобретает темный, близкийк черному, цвет. Что же касается белого, то он полностью отражает все падающиена него лучи и потому будет выглядеть зеленым.
Цветовойкруг
Наука о цвете —это довольно сложная и широкомасштабная наука, поэтому в ней время от временисоздаются различные цветовые модели, применяемые в той либо иной области. Однойиз таких моделей и является цветовой круг, о котором уже неоднократно упоминалосьв статьях, опубликованных ранее, и принцип которого заложен в таких операциях,как Invert — инвертировать (все цвета заменяются на те, которые находятсянапротив в цветовом круге), Hue/Saturation — Цвет/Насыщенность (вращениепроисходит все по тому же кругу) и другие.
Многим известно о том,что существует 3 первичных цвета, которые невозможно получить и которыеобразуют все остальные. Основные цвета — это желтый, красный и синий. Присмешивании желтого с красным получается оранжевый, синего с желтым — зеленый, акрасного с синим — фиолетовый. Таким образом, можно составить круг, которыйбудет содержать все цвета. Он представлен на рис. 1 и называется большим кругомОсвальда.
Наряду с кругом Освальдаесть еще и круг Гете, в котором основные цвета расположены в углахравностороннего треугольника, а дополнительные — в углах перевернутоготреугольника. Схема такого круга представлена на рис. 2.
Друг напротив другарасположены контрастные цвета.
Как же образуются цвета вмашинной графике? Ответить на этот вопрос однозначно невозможно, так как всезависит от того, какую цветовую модель использовать. Каждая из них хороша вопределенной области, поэтому однозначного предпочтения отдать нельзя, да и нестоит, так как лучшего результата можно добиться, комбинируя различныевозможности, предоставляемые программой.
Цветовая модельRGB
Это одна изнаиболее распространенных и часто используемых моделей. Она применяется вприборах, излучающих свет, таких, например, как мониторы, прожекторы, фильтры идругие подобные устройства.
Данная цветовая модельбазируется на трех основных цветах: Red — красном, Green — зеленом и Blue —синем. Каждая из вышеперечисленных составляющих может варьироваться в пределахот 0 до 255, образовывая разные цвета и обеспечивая, таким образом, доступ ковсем 16 миллионам. При работе с графическим редактором Adobe PhotoShop можновыбирать цвет, полагаясь не только на тот, что мы видим, но при необходимостиуказывать и цифровое значение, тем самым иногда, особенно при цветокоррекции, контролируяпроцесс работы.
Данная цветовая модельсчитается аддитивной, то есть при увеличении яркости отдельных составляющихбудет увеличиваться и яркость результирующего цвета: если смешать все три цветас максимальной интенсивностью, то результатом будет белый цвет; напротив, приотсутствии всех цветов получается черный.
При наложении отдельныхканалов результат получается не совсем такой, как если бы смешивались краски,поэтому для того, чтобы внести ясность, остановимся на каждом из сочетанийподробнее.
При смешении красного изеленого результатом будет желтый. Зеленого и синего — голубой, что ближерезультату, получаемому на палитре. Синего и красного — фиолетовый, причем приизменении пропорций смешиваемых цветов можно получать как розовые, так и пурпурныеоттенки.
Несомненнымидостоинствами данного режима является то, что он позволяет работать со всеми 16миллионами цветов, а недостаток состоит в том, что при выводе изображения напечать часть из этих цветов теряется, в основном самые яркие и насыщенные,также возникает проблема с синими цветами.
Цветовая модельCMYK
Это еще одна изнаиболее часто используемых цветовых моделей, нашедших широкое применение. Она,в отличие от аддитивной RGB, является субтрактивной моделью. Работа ее основанана том, как раскладывается на составляющие и видится нами свет и цвет. Как ужеговорилось ранее, видимым является отраженный спектр, остальные же составляющиепоглощаются. Аналогично образовываются цвета на бумаге при рисовании красками.То есть, проведя красную полосу, мы сделаем синюю и зеленую составляющиепоглощенными. Если поверху наложить зеленую краску, то результат будет грязным(из-за того, что цвета не совершенны, то есть несколько отличаются от эталонныхкрасного и зеленого) и очень близким к черному.
Основные цвета всубтрактивной модели отличаются от цветов аддитивной. Cyan — голубой, Magenta —пурпурный, Yellow — желтый. Так как при смешении всех вышеперечисленных цветовидеального черного не получится, то вводится еще один дополнительный цвет —черный, который позволяет добиваться большей глубины и используется при печатипрочих черных (как, например, обычный текст) объектов.
Цвета в рассматриваемойцветовой модели были выбраны такими не случайно, а из-за того, что голубойпоглощает лишь красный, пурпурный — зеленый, желтый — синий.
В отличие от аддитивноймодели, где отсутствие цветовых составляющих образует черный цвет, всубтрактивной все наоборот: если нет отдельных компонентов, то цвет белый, еслиони все присутствуют, то образуется грязно-коричневый, который делается болеетемным при добавлении черной краски, которая используется для затемнения идругих получаемых цветов. При смешивании отдельных цветовых составляющих можнополучить следующие результаты:
Голубой + Пурпурный =Синий с оттенком фиолетового, который можно усилить, изменив пропорциисмешиваемых цветов.
Пурпурный + Желтый =Красный. В зависимости от соотношения входящих в него составляющих он может бытьпреобразован в оранжевый или розовый.
Желтый + Голубой =Зеленый, который может быть преобразован при использовании тех же первичныхцветов как в салатовый, так и в изумрудный.
Несмотря на большиеразличия в цветовых моделях RGB и CMYK, следует освоить обе, так как каждаяприменяется в своей области, и если вы занимаетесь графикой, то столкновения сними вам не избежать. Следует помнить, что если вы готовите изображение кпечати, то следует все-таки работать с CMYK, потому что в противном случае то,что вы увидите на мониторе, и то, что получите на бумаге, будет отличатьсянастолько сильно, что вся работа может пойти насмарку.
Цветовая модельHSB
Здесь заглавныебуквы не соответствуют никаким цветам, а символизируют цвет, насыщенность ияркость. Все цвета располагаются по кругу, и каждому соответствует свой градус,то есть всего насчитывается 360 вариантов (красный — 0, желтый — 60, зеленый —120 градусов и так далее).
Насыщенность определяет,насколько ярко выраженным будет выбранный цвет. 0 — серый, 100 — самый яркий ичистый из возможных вариантов.
Параметр яркостисоответствует общепризнанному, то есть 0 — это черный цвет.
Такая цветовая модельнамного беднее рассмотренной ранее RGB, так как позволяет работать всего лишь с3 миллионами цветов.
Приложение4
Параметрышрифтаитекста
font-family: Serif; // шрифтысзасечками, например, Times New Roman.
Sans-serif //шрифты рубленные, без засечек, например, Arial.
Monospace //моноширинные шрифты, например, CourierNew.
Cursive //курсивные шрифты, например, CalistoMT.
Fantasy //декоративныешрифты, например, Torhok.
color: #значение цвета;
имя цвета:
text-align: left; // выравнивание по левому краю
right; // выравнивание по правому краю
center; // выравнивание по центру
justify; // выравнивание по ширине
text-indent: значениеpx; // красная строка, отступ
vertical-align: super; // верхний индекс
sub; // нижний индекс
значениеpx; // смещение относительновертикальной оси
font-style: italic; // курсив
oblique; // наклонный
normal; //нормальный
font-weight: bold; // полужирный
bolder; // более жирный по отношению к базовому
lighter; // менее жирный по отношению кбазовому
letter-spacing: значениеpx; // Расстояние между буквами
text-decoration: blink; // Устанавливает мигающий текст
line-through; // Создает перечеркнутый текст
overline; // Линия проходит над текстом
underline; // Устанавливает подчеркнутыйтекст
none; // Отменяет все эффекты
Параметры списков
list-style-type: disk; //закрашенныйкружок
Circle; //незакрашенный кружок
Square; //закрашенный квадрат
Decimal; //десятичные числа
lower-roman; //строчные римские цифры.
upper-roman; //прописные римские цифры.
lower-alpha; //строчные латинские буквы.
list-style-image: url (адрескартинки); //создает маркер из рисунка
list-style-position: inside; //маркерывграницеблока
utside; //маркеры за границей блока
Отступы и границы
margin-top: значениеpx; // ширина верхнего поля.
margin-right: значениеpx; // ширина правого поля.
margin-bottom: значениеpx; // ширина нижнего поля.
margin-left: значениеpx; // ширина левого поля.
padding-top: значениеpx; //ширина верхнего отступа.
padding-right:значениеpx; //ширина правого отступа.
padding-bottom: значениеpx; //ширина нижнего отступа.
padding-left: значениеpx; //ширина левого отступа.
Фон
background-color: цвет; // закрашивает фон цветом
background-image: url(picture.gif); // вставляет картинку вкачестве фона
background-repeat: repeat; //повторять изображение по горизонтали ивертикали.
repeat-x; //повторять изображение только по горизонтали.
repeat-y; //повторять изображение только по вертикали.
no-repeat; //не повторять изображение.
background-attachment: scroll; //фон прокручиваетсявместе с текстом.
Fixed; //фон во времяпрокрутки остается неподвижным.
background-position: значение x _ значение y;