Основы Web - технологий Часть 1. Общее представление о WEB - технологиях q q q Структура курса Содержание лабораторных работ Требования к курсовому проекту Перечень библиографических источников Историческая справка, роль WEB-технологий Определение основных терминов и понятий Протоколы WEB - технологий Основные этапы проектирования WEB – приложений Базовые технологии для разработки приложений Базовые инструменты для разработки приложений Понятие о XML и SGML
Основы WEB-технологий. Часть1. Общее представление о Web - технологиях Структура курса Лекции – 8, 17 часов 1. Введение. Общее представление о технологиях. Понятие об XML 2. DOM. НТМL и CSS 3. Основы языка программирования PHP. Установка Den. Wer и работа с ним. 4. My. SQL. Работа с php. My. Admin 5. Типовые задачи PHP и их решение: работа с БД, отправка почты, рисование и т. д. 6. Основы программирования на JS (Java. Script) 7. Технология AJAX. JS – применение библиотеки j. Query. Организация обмена данных с применением XML и JSON 8. Применение Flash – технологии и CMS при разработке сайтов 9. Общее представление о проприетарных технологиях Лабораторные работы – 3, 17 часов 1. Разработка дизайна, верстки и контекста проекта – 4 часа + 12 часов СРС 2. Верстка сайта с применением HTML и CSS. – 6 часов + 12 часов СРС 3. Программирование сайта на PHP и JS. – 7 часов + 20 часов СРС Курсовой проект – 7 часов на оформление и доводку В конце курса – защита КП + зачет Всего СРС – 51 час Алт. ГТУ. ВСИБ. Якунин А. Г. Общее представление о WEB – технологиях. 2011. ВМКС -71 2
Основы WEB-технологий. Часть1. Общее представление о Web - технологиях Содержание лабораторной работы 1: дизайн и контент сайта - Уяснить функции сайта в простом (реализуемом полностью) и полном варианте (реализуемом фрагментарно) в соответствии с темой полученного задания. Информационное наполнение сайта должно предполагать получение сведений из БД в виде текста и/или изображений, вплоть до полностью оформленных страниц сайта - Представить эскиз шаблонов основных страниц и диалоговых форм. В эскизах предусмотреть в учебных целях страницы, основанные на применении таблиц и фреймов, которые могут быть исключены впоследствии из окончательной редакции сайта после выполнения работы 2 и 3. - Представить материал для отображения на сайте (текст, графика, видео и т. д) - Разработать карту сайта, структуру меню и БД - С помощью графического редактора подготовить весь иллюстративный материал к размещению на сайте (фон, кнопки, иллюстрации, прочие элементы оформления) с учетом требуемого графического разрешения - Продумать набор используемых стилей и их структуру Алт. ГТУ. ВСИБ. Якунин А. Г. Общее представление о WEB – технологиях. 2011. ВМКС -71 3
Основы WEB-технологий. Часть1. Общее представление о Web - технологиях 4 Содержание лабораторных работ 2 и 3 Работа 2. Верстка. - Создать коды верстки главной страницы, одной из дополнительных страниц сайта с формой - и одной – с данными из БД. В соответствии со структурой сайта дополнить имеющиеся и создать новые шаблоны для всех основных страниц (главной страниц, разделов, табличных, текстовых частей и т. д. ) с использованием разработанных стилей. Занести на страницу подготовленный для нее материал в требуемой последовательности без учета взаимного расположения объектов. Освоить разные способы переходов между страницами и сайтами (включая переходы с использованием ссылок и изображений). Проанализировать особенность реализации переходов при использовании фреймов, а также переходы на вновь создаваемые окна Пользуясь только средствами HTML, оценить его возможности по работе с изображениями, фреймами, списками, таблицами, объектами, звуком, форматированием текста и другими элементами сайта. Проверить, что все шаблоны правильно отображают содержимое страниц на всех основных используемых на сегодня браузерах (Explorer 6 -8; Mozilla Fire. Fox, Opera, Chrome и, возможно, Safari) Работа 2. Программирование. - Преобразовать разработанный в предыдущих версиях код на код с применением PHP и JS. - Выбрать по одной – две наиболее характерных функции, требующих обработки данных из - формы и отображения на странице сайта данных из БД, и, после согласования с преподавателем, реализовать их. Убедиться, что реализованные функции одинаково правильно исполняются на всех основных браузерах Алт. ГТУ. ВСИБ. Якунин А. Г. Общее представление о WEB – технологиях. 2011. ВМКС -71
Основы WEB-технологий. Часть1. Общее представление о Web - технологиях Требования к курсовому проекту 1. Тематика проекта выбирается из предложенных преподавателем или выбирается самостоятельно, но обязательно должна быть согласована с преподавателем 2. Тема проекта должна быть выбрана к началу 3 –й недели занятий. Список тем оформляется отдельным распоряжением по кафедре и утверждается в деканате. 3. Основу курсового проекта составляют результаты выполнения лабораторных работ 4. Объем выполненных в рамках курсового проекта работ должен быть достаточным для реализации основных функций разрабатываемого приложения и продемонстрировать знание основ работы рассмотренных в рамках лекций базовых технологий 5. Если проект выполняется для конкретного заказчика или по отдельному заданию преподавателя, в нем могут быть использован иной перечень технологий и сред разработки 6. Более подробно требования к проекту и порядок его оформления изложены в соответствующих методических указаниях Алт. ГТУ. ВСИБ. Якунин А. Г. Общее представление о WEB – технологиях. 2011. ВМКС -71 5
Основы WEB-технологий. Часть1. Общее представление о Web - технологиях Перечень библиографических источников 1. Библиографические источники - Храмцов П. Б. Основы Web-технологий: учебное пособие. Изд-во Интернет-Университет Информационных Техно. Арт. 80078. ISBN 978 -5 -94774 -648 -8. 2008 г. 374 с. (ТД Бином). – 5 экз. Якунин А. Г. Методические указания по курсовому проектированию по дисциплине «Основы WEB-технологий» . - Барнаул, Алт. ГТУ, 2010. 60 с. Источник: электронная библиотека образовательных ресурсов Алт. ГТУ. Режим доступа http: //elib. altstu. ru/elib/eum/avs/WEBjakunin. pdf 2. Интернет – источники http: //www. htmlbook. ru/html/. – справочная информация по HTML – тегам, CSS и SSI http: //wdh. suncloud. ru – web-dezigner help – большой учебник - энциклопедия об всем http: //jquery. com – официальный сайт сообщества разработчиков библиотеки JS http: //spravkaweb. ru – справочник по HTML, JS, VBS, CSS, SSI, Flash, Perl, PHP, My. SQL http: //www. php. su/ - сообщество программистов, пишущих на языке РНР http: //www. javascript. ru/ - подробное руководство по программированию на javascript http: //aceweb. ru/ - документация, скрипты, шаблоны и форумы по WEB - технологиям http: //www. woweb. ru/ -скрипты, шаблоны, наборы графических элементов по WEB - технологиям http: //joomla. org/ - официальный сайт сообщества разработчиков CMS Joomla http: //content-management-systems. info/node/173 - документация по СМС Drupal 3. Файлы с методической и справочной информацией, примерами и шаблонами – кафедральные ресурсы Алт. ГТУ. ВСИБ. Якунин А. Г. Общее представление о WEB – технологиях. 2011. ВМКС -71 6
Основы WEB-технологий. Часть1. Общее представление о Web - технологиях Историческая справка. Роль WEB-технологий - - Прародителем Интернет явилась компьютерная сеть ARPANET (Advanced Research Projects Agency Network), созданная в 1969 году по заказу министерства обороны США. Для обмена данными использовались разные протоколы, в том числе и дожившие до нашего времени К почти тому виду, как он есть сейчас, Интернет пришел в конце XX века с появлением сети WWW, протокола передачи гипертекста HTTP (Hyper Text Transfer Protocol) и языка гипертекстовой разметки HTML (Hyper Text Markup Language). Концепция WWW была предложена в 1989 году в Европейском совете по ядерным исследованиям (Швейцария, CERN), и за 2 года были разработаны протокол HTTP, язык HTML, идентификатор имен, или единый указатель ресурсов URL (URL — Uniform Resource Locator) и WWW стала доступна в Интернете. Сеть предназначалась первоначально для физиков, но затем получила широкое признание. Таким образом, Интернет и WWW – это не одно и то же. «WWW» , или, как еще говорят Веб (от web) - это подсистема Интернета, также как Рунет русскоязычная часть всемирной сети Интернет Области применения - Информационные и поисковые ресурсы, реклама Социальные сети Передача данных Распределенные информационные и управляющие системы: АРМы, SCADA, «Аутсорсинговая» работа приложений – Saa. S, Paa. S Cloud Computing Алт. ГТУ. ВСИБ. Якунин А. Г. Общее представление о WEB – технологиях. 2011. ВМКС -71 7
Основы WEB-технологий. Часть1. Общее представление о Web - технологиях Основные термины Интернет – глобальная телекоммуникационная сеть информационных и вычислительных ресурсов WWW или WEB – сокращение от World Wide Web (всемирная паутина) — распределенная система, предоставляющая собой совокупность программнотехнических средств, обеспечивающих доступ к связанным между собой документам и другой информации, расположенной на различных компьютерах, подключенных к Интернету Web-сервер – устройство и/или программа, основное назначение которых – обеспечение пользователям Интернета доступа к информационным ресурсам Дата-центр (Data-center) - специально оборудованный и располагаемый на огражденной и охраняемой вооруженной охраной территории специализированный комплекс, в зданиях которых обеспечивается поддержание должный температурный режим и бесперебойное энергоснабжение ЦОД – центр обработки данных –усеченный до размера отдельного помещения Дата – центр Хостер –(хостинговая компания, хостинг-провайдер, веб-хостер, HSP - Hosting Service Provider) – организация или физическое лицо, оказывающая услуги по предоставлению Интернет - услуг Хост – Web–сервер, предназначенный для размещения сайта и иных Web – приложений Браузер (иногда пишут – броузер от англ. Browse) – программа для загрузки и просмотра web-страниц и доступа к другой хранимой в Интернете информации URL/URI (universal (uniform) resource location / identifier) – уникальный адрес для Web – ресурсов Алт. ГТУ. ВСИБ. Якунин А. Г. Общее представление о WEB – технологиях. 2011. ВМКС -71 8
Основы WEB-технологий. Часть1. Общее представление о Web - технологиях Протоколы WWW - технологий TELNET (TELecommunication NETwork) — протокол удаленного доступа. Дает возможность абоненту работать на любом компьютере сети Интернет как на своем собственном, включая запуск программы и изменение настроек. На практике возможности лимитируются уровнем доступа, задаваемым администратором удаленной машины. FTP (File Transfer Protocol) — протокол передачи файлов со специального файлового сервера на компьютер пользователя. Установив связь, пользователь получает доступ к отдельным каталогам файл – сервера как к каталогам своей собственной машины. SFTP (Security File Transfer Protocol) — аналогичный FTP протокол передачи файлов, но имеющий средства криптографической защиты. POP (Post Office Protocol) — стандартный протокол почтового соединения. Серверы POP обрабатывают входящую почту, а протокол POP обрабатывает запросы на получение почты от клиентских почтовых программ. SMTP (Simple Mail Transfer Protocol) — протокол, который задает набор правил для передачи почты. Сервер SMTP возвращает либо подтверждение о приеме, либо сообщение об ошибке, либо запрашивает дополнительную информацию. HTTP (Hyper Text Transfer Protocol) – протокол передачи данных для просмотра сайтов Как перечисленные, так и другие протоколы базируются на двух протоколах нижнего уровня TCP/IP, являющихся основой связи в сети Интернет. - Протокол TCP (Transmission Control Protocol, транспортный уровень по модели OSI) разбивает передаваемую информацию на порции (пакеты) и нумерует все порции. - Протокол IP (Internet Protocol) передает пакеты получателю. Далее протокол TCP проверяет, все ли части получены, располагает их в нужном порядке и собирает в единое целое. ВСИБ. Якунин А. Г. Общее представление о WEB – технологиях. 2011. ВМКС -71 Алт. ГТУ. 9
Основы WEB-технологий. Часть1. Общее представление о Web - технологиях Этапы разработки 1. 2. 3. 4. 5. 6. 7. Определение цели сайта Определение аудитории сайта Подбор контента сайта Дизайн сайта Верстка сайта Программирование Тестирование ПО и работоспособности в разных условиях 8. Продвижение (SEO – технологии) Основная проблема – несовместимость браузеров и различные настройки хостов Алт. ГТУ. ВСИБ. Якунин А. Г. Общее представление о WEB – технологиях. 2011. ВМКС -71 10
Основы WEB-технологий. Часть1. Общее представление о Web - технологиях Технологии и языки разработки 1. На стороне сервера - CGI PHP, Piton, Perl, Java, C, Ruby on Rail My. SQL, Postgres Asp, ASP. NET 2. На стороне браузера - Flash + Action Script + MXML JS VBS HTML, DHTML, XHTML, CSS 3. Совмещенные и универсальные - AJAX Silver. Light Moon. Light Windows Foundation Presentation AIR 4. Форматы передаваемых данных - JSON XML SVG Алт. ГТУ. ВСИБ. Якунин А. Г. Общее представление о WEB – технологиях. 2011. ВМКС -71 11
Основы WEB-технологий. Часть1. Общее представление о Web - технологиях 12 Языки описания интерфейсов 1. UIML (User Interface Markup Language). Разработчик - Harmonia, 1998 UML реализует концепцию, в которой путь данных от приложения до физического устройства отображения данных лежит через абстрактные области логики, интерфейса и представления. Область интерфейса включает описание структуры, стилей, содержания и поведения элементов. Задача языка UIML - эффективно реализовать область интерфейса. Ныне доступна версия 3. 0 на сайте проекта www. uiml. org. UML определяет элементы пользовательского интерфейса, их представление (визуально/вербально/тактильно), содержание (текст, изображения, звуки и т. д. ), реакцию на действия пользователя, способ контроля событий (Java Swing classes, теги HTML), внешний API, если он есть. 1. Список open source процессоров для UIML-трансформации есть на www. uiml. org/tools/index. htm • XUL (XML User-interface Language) - полнофункциональный язык разметки, таких • XAML (e. Xtemsible Application Markup Language) — язык интерфейсов платформы объктов, как окна, метки и кнопки. Соответствует стандарту W 3 C XML 1. 0. Приложения на XUL могут использовать HTML, CSS, DOM, Java-script. XUL разделяет представление данных, оформление, содержание и логику приложений. Доступен в Windows, Unix, Mac. Привязан к Mozilla. Windows Longhorn. Описывает панели, элементы управления, элементы, связанные с документом и графические фигуры через их свойства, а логика приложения управляется процедурным кодом (С#, VB и т. д. ). Может использоваться для web и настольных приложений. 1. MXML (Macromedia Flex Markup Language) - язык разметки и объектно- ориентированный программный язык, позволяет наглядно описать структуру пользовательского интерфейса, по которой он будет воссоздан клиентским приложением. Action. Script выполняет задачи контроллера (программная реакция на события в среде) и обеспечивает уровень модели приложения. Разработчики Flex - рабочая группа Mozilla, и компания Microsoft. Используется преимущественно в AIR, Flash. Подробности – на технологиюwww. macromedia. com/software/flex/productinfo/brz_overview/ Другие разработчики (Opera Software) – также разрабатывают свои технологии, пока не получившие широкого применения Алт. ГТУ. ВСИБ. Якунин А. Г. Общее представление о WEB – технологиях. 2011. ВМКС -71
Основы WEB-технологий. Часть1. Общее представление о Web - технологиях Инструменты разработки 1. Текстовые редакторы. Note. Pad++, Sci. TE и др. 2. WYSIWYG (Front. Page, Dream. Weaver) 3. Среды разработки для Flash: Action Script + MXML в среде Adobe Flex 2 SDK, Flash. Develop, Adobe Flash CS 5 4. Наборы для разработки типа: * Denwer (http: //www. denwer. ru/), версия 3 на 01. 09. 12 * XAMPP (http: //www. apachefriends. org/en/xampp. html) , версия 1. 8. 0 на 01. 09. 12 5. CMS – системы Алт. ГТУ. ВСИБ. Якунин А. Г. Общее представление о WEB – технологиях. 2011. ВМКС -71 13
Скачать презентацию Основы Web — технологий Часть 1 Общее представление
Web1(Intro)+.ppt