Книга научит вас основам современного веб-дизайна и сч ерпывающ ее руководствое издание эксмо
 Скачать 23.7 Mb.
| Образовательный портал Как узнать результаты егэ Стихи про летний лагерь 3агадки для детей |
www.softodrom.ru). Немного усилий, ивы сможете создать полноценный веб-сайт, настроенный и прекрасно функционирующий без особых затрат Краткое знакомство с Если вы знакомы с миром веб-дизайна, то наверняка слышали аббревиатуру XML расширяемый язык разметки Вообще-то XML не совсем язык, он, скорее, представляет собой свод правил для того, чтобы создавать другие языки разметки. В качестве упрощенного примера если бы вы публиковали на странице рецепты, то могли бы использовать XML, чтобы создать пользовательский язык разметки, который включает элементы (теги) компонент инструкции и порции, которые точно описывают типы информации в ваших документах рецептов. Один раз правильно помеченная, эта информация может рассматриваться как данные. Фактически, XML — мощный инструмент для совместного использования данных разными приложениями. Несмотря на то, что он разрабатывался принципиально для Всемирной паутины, фактически XML оказал большее влияние вне веб-среды из-за своих возможностей обработки данных. Существуют файлы XML, работающие за кадром в растущем числе программных приложений, таких как Microsoft Office, Adobe Flash и Apple Однако существуют многие языки XML, которые используются и во Всемирной паутине. Наиболее распространен XHTML, который является языком HTML, переработанным в соответствии с более строгими правилами XML (Мы поговорим подробнее об XHTML в главе 10). Существуют также RSS (Really Simple Syndication, очень простой сбор сводной информации, который позволяет представлять ваш контент в виде кратких публикаций канала RSS, SVG (Scalable Vector Graphics, масштабируемая векторная графика, который использует теги, чтобы описать геометрические формы, и MathML, описывающий математическое обозначения. Ваш непосредственный опыт работы с XML как веб дизайнера, вероятно, ограничится созданием документов с помощью языка XHTML или, возможно, добавлением к веб-сайту канала RSS или изображений в формате SVG. Развитие новых языков XML должно быть обязанностью программистов или специалистов noXM Аппаратное обеспечение Для удобства при разработке веб-сайта я рекомендую следующее обо рудование: Надежный, современный компьютер. Компьютер под управлением Windows, Linux или OS X подойдет. Креативщики в профессиональных компаниях по веб-разработке имеют тенденцию работать на компьютерах Мае. Хотя и приятно работать на сверхпроизводительном компьютере, файлы веб-сайтов очень малы и при работе сними требуют не так много ресурсов. Если только вы не занялись обработкой звуковых файлов и видеомонтажом, не беспокойтесь о том, что ваш компьютер не самый новый и производительный. Дополнительная оперативная память. Поскольку вам придется переключаться между многими, приложениями, нужно установить достаточный объем оперативной памяти, чтобы запускать одновременно несколько программ, задействующих значительные ее объемы. Монитор с большой диагональю. Хотя это и необязательное требование, монитор с большой диагональю или высоким разрешением облегчает жизнь, особенно графическому дизайнеру (хотя я видела, как верстальщики кода прекрасно управлялись на ноутбуке Mac Book Air с диагональю 11 дюймов. Чем больше размер экрана вашего монитора, тем больше окон приложений и панелей управления вы сможете от- Часть I. Начало работы Необходимое обеспечение крыть одновременно. Чтобы принимать важные решения по дизайну страниц, вы должны видеть большую их часть одновременно. Если вы используете монитор с высоким разрешением, при работе над дизайном страниц помните о пользователях, пользующихся мониторами с меньшим разрешением. Сканер и/или цифровая камера. Если собираетесь подготавливать собственную графику, вам понадобятся некоторые инструменты для создания изображений или текстур. Дополнительный компьютер. Многие веб-дизайнеры используют второй тестовый компьютер, управляемый другой платформой, вот личие от компьютера, который они используют для разработки (иначе говоря, если вы верстаете страницы в операционной системе OS X, тестируйте их в операционной системе Windows, и наоборот. Поскольку браузеры работают по-разному на компьютерах с операционными системами OS X и W indows, важно проверить работу страницы в максимально возможном количестве среди особенно в текущей версии операционной системе Windows. Если вы только увлекаетесь веб-дизайном и работаете дома, можно проверить страницы на компьютере друга. Пользователям компьютеров Мае рекомендуется прочитать врезку Запуск операционной системы W indows на компьютере Мае» Мобильные устройства. Всемирная паутина стала мобильной Это означает, что крайне важно протестировать внешний вид и производительность вашего сайта в мобильном браузере на смартфоне или планшете. Возможно, вы сами уже обзавелись смартфоном. Если у вас нет средств на приобретение устройств с различными платформами, попросите друзей потратить несколько минут и протестировать ваш сайт на своих устройствах. Программное обеспечение Сейчас нет недостатка в программном обеспечении, пригодном для создания веб-страниц. Раньше мы могли пользоваться только инструментами, изначально разработанными для предпечатной подготовки. Сегодня есть замечательные программы, специально созданные для веб-дизайна, которые повышают эффективность процесса разработки сайтов. Яне могу перечислить все существующее программное обеспечение для веб-дизайна, поэтому хочу познакомить вас с самыми распространенными и проверенными инструментами. Вы можете загрузить демонстрационные версии многих из этих программ с веб-сайтов компаний, как это перечислено во врезке Популярные инструменты веб-дизайна» далее в этой главе. Программы для верстки веб-страниц Инструменты для верстки веб-страниц схожи с программами пред печатной подготовки, различие в конечном продукте — веб-странице Запуск операционной системы Windows на компьютере Мае Если у вас есть компьютер Мае с процессором Intel, на котором установлена операционная система OS X версии Leopard или выше, вам ненужен отдельный компьютер для тестирования проектов в среде Windows. Теперь вы можете запускать Windows прямо на компьютере Мае с помощью бесплатного приложения Boot Camp, которое позволяет переключаться на систему Windows при загрузке компьютера. Существует несколько других продуктов виртуализации для компьютеров Мае, которые позволяет легко переключаться между операционными системами OS X ив том числе (ww w.vm ware. com /ru/) — коммерческая программа с бесплатным пробным периодом, доступная для загрузки Desktop для OS X (w w w .parallels.com /ru/) коммерческая программа с бесплатным пробным периодом VirtualBox (virtualbox.org) — бесплатная программа, позволяющая запускать несколько гостевых операционных систем, включая Windows и некоторые модификации Для запуска виртуальной машины требуется приобрести копию операционной системы Microsoft Windows, но все же это дешевле, чем покупка второго компьютера. Глава 1. Самое начало Необходимое обеспечение ПРИМЕЧАНИЕ Для выполнения упражнений из этой книги вам будет достаточно текстового редактора, установленного вместе с вашей операционной системой. Специальное программное обеспечение не требуется. (файл P1TML и дополнительные файлы. Эти инструменты обеспечивают визуальный интерфейс «WYSIWYG» (W hat You See Is W hat You Get — Что видишь, то и получишь) и использование подсказок, которые освобождают от ввода повторяющегося кода HTM L и CSS. Однако эти инструменты не освобождают вас от изучения языка HTML. Даже самые сложные из них не сгенерируют такой чистый и продуманный H TM код, как при профессиональной верстке вручную, хотя они могут ускорить процесс, если вы уверены в своих знаниях. Ниже приведены некоторые популярные программы для верстки веб страниц: Adobe Dreamweaver (Windows и OS X). Наиболее серьезная и профессиональная программа, способствует получению чистого кода и предлагает расширенные возможности Expression Web только Windows). Часть пакета профессиональных средств проектирования корпорации Microsoft, может похвастаться созданием кода, совместимым со стандартами и макетами, основанными на таблицах стилей (Linux, Windows и OS X). Не хотите платить за редактор WYSIWYG? Nvu (произносится «эн-вью») — инструмент с открытым исходным кодом, который соответствует многим возможностям программы Dreamweaver и может быть загружен с веб-сайта nvu.mozilla- Редакторы HTML-кода Редакторы H TM кода (в противоположность инструментам для верстки) разработаны, чтобы ускорить процесс написания H TM кода вручную. Они не позволяют редактировать страницу визуально, поэтому необходимо тестировать ее в браузере. Многие профессиональные веб-дизайнеры на самом деле предпочитают создавать H TM L- документы вручную и рекомендуют следующие пять инструментов только Windows). TextPad — простой и недорогой редактор кода для операционной системы Windows. Sublime Text (Window, OS X и Linux). Этот недорогой и многообещающий редактор кажется урезанным, но предлагает множество функций например, подсветка синтаксиса и обзор кода целиком, которые очень нравятся разработчикам компании Panic (только OS X). Пользователям программы Coda нравится визуальная последовательность действий, инструменты управления файлами и встроенный доступ к терминалу компании M acroM ates (только OS X). Этот расширенный текстовый редактор включает инструменты управления проектами и интерфейс, встраиваемый в операционную систему OS X. Его популярность растет, потому что он прост в использовании, многофункционален и недорог. Часть I. Начало работы Необходимое обеспечение компании Bare Bones Software (только OS X). Множество замечательных возможностей подсветки синтаксиса кода сделали эту программу ведущим редактором для веб-разработчиков, работающих на компьютерах под управлением операционной системы OS Графические редакторы Вероятно, вы захотите добавить на ваши страницы изображения, поэтому вам понадобится графический редактор. Подробно я рассмотрю некоторые наиболее популярные графические программы в части IV. Тем временем вы можете изучить следующие инструменты создания графики для веб-страниц: Adobe Photoshop (W indows и OS X). Photoshop — бесспорный промышленный стандарт для создания изображений, как для печати, таки веб-страниц. Adobe Photoshop Elements (Windows и OS X). Эта упрощенная версия программы Photoshop разработана для любительского редактирования и организации фотографий, новы также обнаружите, что она содержит все инструменты, необходимые для создания изображений для веб-страниц. Adobe Illustrator (W indows и OS X). Так как дизайнерам нужно создавать логотипы, значки и иллюстрации различных размеров и разрешений, многие начинают работу с векторными изображениями в программе Illustrator, чтобы добиться максимальной гибкости. Вы можете сохранять изображения для Всемирной паутины непосредственно из программы Illustrator или переносить их в Photoshop для дополнительной обработки Fireworks (Windows и OS X). Эта программа для создания веб графики сочетает редактор изображений с инструментами для создания векторных иллюстраций, а также предоставляет дополнительные инструменты для создания графических изображений для Всемирной паутины PaintShop Pro только Windows). Полнофункциональный редактор изображений, популярный среди пользователей Windows, прежде всего из-за относительно низкой цены (U nix Windows и OS X). Этот бесплатный графический редактор функциональностью напоминает Photoshop. Интернет-инструменты Так как выбудете иметь дело с Интернетом, вам понадобятся некоторые инструменты, предназначенные для просмотра и перемещения файлов по сети. Различные браузеры. Поскольку браузеры отображают страницы по- разному, вы захотите проверить страницы на максимально возможном количестве браузеров. На рынке представлены сотни браузеров, но указанные ниже наиболее распространены на компьютерах под управлением операционных систем Windows и OS X: ПРИМЕЧАНИЕ Дистрибутивы или ссылки на все перечисленные программы вы найдете на диске, прилагающемся к книге. Глава 1. Самое начало Windows: Internet Explorer (текущая версия и по крайней мере две предшествующих версии И не забывайте о мобильных браузерах. Приведенный ниже список представляет собой обзор наиболее распространенных мобильных веб браузеров на момент написания книги (хотя кто знает, какие мобильные браузеры будут популярны сейчас, когда вычитаете эту книгу Safari (iO S) • Android Browser (Android) • Black Berry Browser (R IM ) • Nokia Series 40 и Nokia Browser для Symbian • Opera Mobile и Mini (устанавливается на любое устройство Explorer Mobile (W indows Phone) • Silk (Kindle Программы для передачи файлов (ио протоколу FTP). Такая программа позволит вам передавать файлы между вашим компьютером и сервером, на котором будут размещены ваши страницы во Всемирной паутине. Все программы верстки веб-страниц, перечисленные ранее, имеют встроенные инструменты для работы с протоколом FTP. Существуют также отдельные программы для передачи файлов по FTP, которые приведены ниже S F T P • C uteF T P • AceFTP • Filezilla OS X: • Transmit Терминальные приложения. Если вы знакомы с операционной системой Unix, вам может пригодиться терминальное приложение (интерпретатор командной строки, позволяющее вводить команды Unix на сервере. Оно может быть полезно для изменения разрешений доступа Необходимое обеспечение НА ЗАМЕТКУ Популярные инструменты веб-дизайна Верстка веб страниц n • Nvu (редактор веб-страниц с открытым исходным кодом, nvu.m o zilla-ru ssia.o Редактирование кода компании MacroMates, www. m acrom ates.com • Sublime Text, w w w .sublim etext.com • TextPad для Windows, ww w .textpad.com / p ro d ucts/textp ad /in dex.htm l • Coda компании Panic Software, ww w.panic.com / coda/ • BBEdit компании Bare Bones Software, www. b a re bo nes.com /p roducts/bbed it Браузеры • Internet Explorer (только Windows), w w w .m icrosoft. com /rus/w ind o w s/in tern et-e xp lo re r • Firefox, w w w .m ozilla.org/ru/firefox/fx/ • Chrome, w w w .google.com /chrom e?hl=ru • Opera, ru.opera.com • Safari (только OS X), w w w .apple.com Сетевые инструменты и другие инструменты для Windows доступны на ресурсе w w w .softodrom .ru • Transmit (OS X), w w w .panic.com /transm it • Cyberduck (OS X), cyberduck.ch • Fetch (OS X), fetch softw orks.com • Cygwin (эмулятор Linux для Windows), cygw in.com • PuTTY (эмулятор терминала telnet/SSH), www. chiark.greenend.org.u k/ sgtatham Обработка графики to r • Adobe Fireworks, w w w .adobe.com /ru/products/ firew orks • Corel PaintShop Pro, core l.ru/p ro d uct/p sp x5 / • GIMP, gim p.ru к файлу, перемещения или копирования файлов и каталогов или управления программным обеспечением сервера. Пользователи операционной системы Windows могут установить эмулятор Linux — программу под названием Cygwin — для доступа к командной строке. Существует также PuTTY, бесплатный клиент T elnet/ SSH. Система OS X содержит встроенное приложение под названием Terminal, которое является полноценной терминальной программой, предоставляющей доступ к системе Unix, и позволяющей использовать протокол SSH для доступа посредством командной строки к другим системам в Интернете. Глава 1. Самое начало Резюме УПРАЖНЕНИЕ 1.1. РЕЗЮМЕ Теперь, когда выделаете первый шаг в изучении веб дизайна, наступает момент, чтобы подытожить ваши средства и цели. Используя материалы в этой главе как общее руководство, попытайтесь лаконично ответить наследующие вопросы: • Какова ваша цель Стать профессиональным веб дизайнером? Делать только персональные веб-сайты? • Какие аспекты веб-дизайна интересуют вас больше всего? • Какие из имеющихся у вас навыков будут полезны при создании веб-страниц? • Какие навыки вам нужно освежить в памяти? • Какие инструменты из числа аппаратных средств и программного обеспечения для веб-дизайна у вас уже есть? • Какие инструменты вы должны приобрести Какие инструменты вы хотели бы приобрести со временем? Резюме Мораль этой главы вам ненужно изучать все. И даже если вы хотите узнать в конечном счете все, вы не должны изучать все сразу. Поэтому расслабьтесь и не беспокойтесь. Другая хорошая новость — в то время как существует множество профессиональных и дорогих инструментов, можно создать, разместить и открыть для доступа простой веб-сайт без особых затрат, используя бесплатные или недорогие программы и уже имеющийся компьютер. Скоро вы убедитесь, насколько легко приступить к созданию веб страниц — вы научитесь этому, когда прочтете книгу, которую держите в руках. Истого момента вы можете продолжить обучение и накопление опыта и найти свою специфическую нишу в сфере веб-дизайна. Часть I. Начало работы КАК РАБОТАЕТ ВСЕМИРНАЯ ПАУТИНА Я начала заниматься веб-дизайном вначале года — практически одновременно с рождением самой Всемирной паутины. По ее меркам я старикашка, но все же прошло не так много времени, чтобы забыть момент, когда я впервые взглянула на веб-страницу. Тогда было трудно сказать, откуда появлялась информация и как все это работало. Данная глава содержит исчерпывающую информацию о функционировании Всемирной паутины и познакомит вас с некоторыми основными терминами. Мы начнем с общей картины и доберемся до специфических особенностей. Интернет против Всемирной паутины Нет, это не сражение, это только возможность указать на различие между этими двумя словами, которые все чаще и чаще используются как синонимы. Интернет — это сеть связанных компьютеров. Он не принадлежит какой-либо компании это совместно работающие компьютеры, связь между которыми управляется системой стандартов и правил. Цель связи компьютеров состоит в совместном использовании информации. Существует много вариантов передачи данных между компьютерами, включая электронную почту, протокол FTP и множество других специализированных способов, на основе которых функционирует Интернет. Эти стандартизированные методы переноса данных посети известны как протоколы. Всемирная паутина (кратко называемая веб) является только одним из путей, каким можно получить доступ к информации через Интернет. Этот способ уникален тем, что позволяет документам быть связанными друг с другом посредством гипертекстовых ссылок. Таким образом формируется огромная информационная сеть. Всемирная паутина использует протокол, названный HTTP ( Протокол передачи гипертек- В этой главе • Отношение Всемирной паутины к Интернету Роль сервера • Роль браузера • Понятие U адреса и его компонентов • Анатомия веб-страницы Всемирная паутина — это подмножество Интернета Это просто один из многих способов передачи информации по объединенным в сеть компьютерам То есть веб. Обслуживание вашей информации ТЕРМИНОЛОГИЯ О ткры ты й исходный код Программное обеспечение с открытым исходным кодом разрабатывается совместными усилиями таким образом, чтобы другие программисты могли использовать и модифицировать этот код. Такие программы обычно бесплатны. ста). Если вы уже пытались разобраться в принципах функционирования Всемирной паутины, данная аббревиатура должна выглядеть для вас знакомой, потому что это первые четыре буквы почти всех адресов веб-сайтов, что мы обсудим в следующем разделе. Обслуживание вашей информации Давайте поговорим о компьютерах, которые составляют Интернет. Поскольку они выдают документы по запросу, эти компьютеры известны как серверы. Точнее, сервер — это не сам компьютера программное обеспечение, которое позволяет ему взаимодействовать с другими подобными устройствами. Однако слово сервер также используется, когда говорят о компьютере. Роль серверного программного обеспечения в том, чтобы ожидать запрос информации, а при получении такового разыскать и отослать эту информацию обратно как можно быстрее. Для Всемирной паутины нет особых различий, с кем иметь дело - с мощным сервером под управлением системы Unix или скромным персональным компьютером. Именно серверное программное обеспечение играет главную роль. Чтобы компьютер стал частью Всемирной паутины, на нем должно выполняться специальное ПО, позволяющее обрабатывать транзакции протокола передачи гипертекста (H ypertext Transfer Protocol). Веб-серверы также называют «НТТР-серверами». Серверное программное обеспечение различно, но чаще всего используется Apache H T T P -сервер (программное обеспечение с открытым исходным кодом) и Internet Information Services (IIS ) корпорации Microsoft. Программное обеспечение Apache свободно распространяется и доступно для ориентированных на Unix компьютеров, а также предустановлено на компьютерах Мае, работающих под управлением системы OS X. Кроме того, существует версия для операционной системы Windows. IIS — часть семейства решений для серверов корпорации Каждому компьютеру и устройству (модему, маршрутизатору, смарт фону, автомобилю и т. д) в Интернете назначается уникальный числовой адрес (In tern et Protocol — межсетевой протокол Например компьютер, на котором размещается сайт yandex.ru, имеет 1Р-адрес 93.158.134.3. Все эти числа могут вызвать головокружение. К счастью, существует система доменных имен ( DNS, Domain Name System), которая позволяет нам обращаться к этому серверу также по его доменному имени yandex.ru. Числовой IP -адрес используется компьютерами, в то время как доменное имя более понятно людям. Сопоставление текстовых доменных имен сих соответствующими числовыми IP -адресами - задача отдельного D N S-сервера. Сконфигурировать ваш веб-сервер можно так, чтобы с единственным IP -адресом сопоставлялось более одного доменного имени, позволяя нескольким сайтам совместно использовать один и тот же сервер. Часть I. Начало работы Несколько слово браузерах Больше никаких IP-адресов Администрация адресного пространства Интернет (Internet Assigned Numbers Authority, IANA) — организация, которая присваивает IP- номера — передала последний набор адресов 3 февраля 2011 года. Все верно, больше нет свободных адресов в формате ### . ### . ### . ###. Этот формат адреса (так называемый IPv4) способен производить 4,3 миллиарда уникальных адресов, что казалось огромным количеством в 1977 году, когда задумывался эксперимент с Интернетом. Его создатели никак не могли предвидеть, что однажды каждому телефону, телевизору и предмету на полке в магазине потребуется собственный адрес. Решением представляется новый формат адресов (IPv6, пока находится в разработке, позволяющий создать триллионы и триллионы уникальных номеров, но есть небольшая загвоздка — он несовместим с текущей сетью, работающей на основе адресов в формате IPv4. Так что IPv6 будет действовать параллельно тому Интернету, который есть сегодня. В конце концов использование адресов IPv4 прекратится, но некоторые говорят, что на это уйдут десятилетия. v ____________________________________________________________ Несколько слово браузерах Теперь вызнаете, что сервер выполняет обслуживание, но как насчет другой стороны Программное обеспечение, которое формирует и отправляет запросы, называют клиентом Люди используют браузеры настольных компьютеров, мобильных устройств и другие вспомогательные технологии (например, программы экранного доступа) в качестве клиентов для получения доступа к информации во Всемирной паутине. Сервер возвращает документы браузеру (который в технических кругах называют пользовательским агентом для отображения. Запросы и ответы обрабатываются протоколом HTTP, упомянутым ранее. Хотя мы говорили о документах, протокол H T T P может использоваться для передачи изображений, видеороликов, звуковых файлов, данных, сценариев и всех других ресурсов, из которых обычно состоят веб-сайты и приложения. Когда мы думаем о браузере, то обычно представляем окно программы на компьютерном мониторе, с веб-страницей, показанной в этом окне. Такие программы известны как графические, или настольные, браузеры, ив течение долгого времени они были единственными средствами просмотра ресурсов Всемирной паутины. К числу самых популярных браузеров для настольных компьютеров на момент написания этой книги относились Internet Explorer для операционной системы Windows, Chrome, Firefox, и Safari (OS X), а также Opera. Однако сегодня все больше и больше людей выходят в Интернет в дороге, используя браузеры в смартфонах и планшетах. Краткая история Всемирной паутины Всемирная паутина зародилась в Европейской организации по ядерным исследованиям (ЦЕРН) в Женеве (Швейцария) в 1989 году. Программист по имени Тим Бернерс-Ли впервые предложил систему управления информацией, которая использовала гипертекстовый процесс для объединения связанных документов посети. Они его партнер, Роберт Кайо, создали прототип проекта и выпустили его для презентации. Впервые несколько лет веб-страницы были только текстовыми. Трудно поверить, нов году (не так давно) в мире было всего 50 веб серверов. Реальный рост популярности Всемирной паутины произошел в 1993 году, когда был представлен первый графический браузер (NCSA Mosaic). Это позволило Всемирной паутине превратиться из научного исследования в средство массовой информации. Развитие Всемирной паутины продолжается под наблюдением Консорциума Всемирной паутины Если вы хотите глубже окунуться в историю, изучите эти сайты: Материалы из Википедии: ru.w ikipedia.org/w Интернет Всем ир- ная_паутина Исторические архивы консорциума Всемирной паутины w w .w 3.org/History.htm Глава 2. Как работает Всемирная паутина Адреса веб-страниц (URL) ТЕРМИНОЛОГИЯ С торона сервера и сторона клиента Часто в веб-дизайне вы услышите упоминание о приложениях на стороне клиента или на стороне сервера Эти термины используются, чтобы указать, какой компьютер выполняет обработку. Приложения на стороне клиента запускаются на компьютере пользователя, в то время как приложения и операции на стороне сервера используют ресурсы серверного компьютера. Интранет и экстранет Думая о веб-сайте, вы предполагаете, что он доступен любому пользователю, занимающемуся веб-серфингом. Однако многим организациям выгоднее использовать совместный доступ к информации и возможности веб-сайтов для обмена внутрикорпоративными данными. Такие специальные веб-ориентированные сети называют интранетом. Они функционируют как обычные веб-сайты, только расположены на компьютерах со специальными устройствами безопасности брандмауэрами которые запрещают доступ компьютерам вне компании. Интранет имеет множество применений, например обеспечение совместного доступа к информации о персонале или предоставление доступа к базе данных учетных записей. Экстранет похож на интранет, только он разрешает доступ к информации и аутентифицированным пользователям, находящимся за пределами организации. Например фирма-изготовитель может предоставить своим клиентам пароли, которые позволяют им проверять состояние заказов в базе данных компании. Разумеется, пароли определяют уровни доступа к информации Также важно иметь ввиду, что существуют альтернативные способы просмотра. Пользователи с ограничениями по зрению могут слушать веб страницу, читаемую программой экранного доступа (или очень сильно масштабировать текст. Люди с нарушениями опорно-двигательной системы могут пользоваться вспомогательными устройствами для перехода но ссылками ввода текста. Создаваемые сайты должны быть доступны и удобочитаемыми для всех этих пользователей, независимо от выбранного ими способа просмотра. Даже в современных графических браузерах, которые впервые показали нам огромный мир Всемирной паутины, веб-страницы могут выглядеть и функционировать по-разному. Это происходит из-за различий в поддержке веб-технологий и возможности пользователей изменять настройки просмотра. Адреса веб-страниц (У каждого документа во Всемирной паутине есть свой собственный специальный адрес, именуемый URL (Uniform Resource Locator — Унифицированный локатор ресурса. Практически каждый день мы видим U адреса (произносится как «ю-эр-эл») на рекламных уличных щитах, визитных карточках или в телевизионной рекламе. Веб-адреса полностью интегрированы в современный язык. Некоторые U адреса короткие и благозвучные. Другие могут быть похожи на неподвластные памяти последовательности символов, разделенные точками и слешами, но каждая часть имеет определенную цель. Сейчас мы рассмотрим их. Д Часть I. Начало работы Адреса веб-страниц (Состав URL-адреса Полный адрес состоит из трех частей протокола, имени сайта и абсолютного пути к файлу или ресурсу, как показано на рис. 2.1. 0 Протокол 0 Имя сайта 0 Абсолютный путь t t p : / / w w w . e x a m p l e . c o m / 2 0 1 3 / e x a m p l e / w eb p ag e. ht m l V I Имя хоста Имя домена Путь к папке Документ Рис. 2.1. Части О Первая задача U адреса — определить протокол для текущей специфической транзакции. Буквы H T T P сообщают серверу, что нужно использовать протокол передачи гипертекста, или перейти в «веб режим». 0 w w w Следующая часть U адреса идентифицирует веб-сайт по его доменному имени. В этом примере доменное имя — example.com. Часть «www.» вначале особое имя хоста в этом домене. Имя хоста «www» стало соглашением, ноне является правилом. Фактически, иногда имя хоста может быть опущено. В домене допустимо присутствие нескольких веб-сайтов (иногда называемых поддоменами или субдоменами), например, developm ent.exam ple.com , clients.exam ple.com итак далее / 2 0 1 Это абсолютный путь через каталоги на сервере к запрашиваемому документу HTML, webpage.html Слова, разделенные слешами (косыми чертами) — это имена каталогов, начиная с корневого каталога хоста (обозначенного первым слешем — /). Поскольку Интернет первоначально содержал компьютеры, управляемые операционной системой Unix, наш текущий порядок действий все еще следует многим ее правилами соглашениям. Отсюда и взят символ / , разделяющий имена каталогов. Подведем итоги приведенный в качестве примера адрес сообщает, что требуется использовать протокол HTTP, чтобы соединиться в Интернете с веб-сервером с именем w w w .exam ple.com , и запросить документ webpage.html (расположенный в каталоге example, который в свою очередь находится в каталоге Файлы по умолчанию Очевидно, не каждый U R адрес настолько длинный. Многие адреса не включают имени файла, а просто указывают на каталог, например / /w w w . eksmo . Почему в этом URL- адресе нет Поскольку почти все веб страницы используют протокол передачи гипертекста, часть h t t p : // часто только подразумевается. Таким образом, когда адреса сайтов рекламируются в печати или по телевидению, это способ сохранить адрес короткими благозвучным. Кроме того, браузеры запрограммированы добавлять часть h t t p : // автоматически, избавляя вас от лишних нажатий клавиш. Может показаться, что мы опускаем h t t p : / / , нона самом деле он отсылается на сервер незаметно для нас. Когда мы начнем использовать адреса для создания ги перссылок в документах HTML в главе 6, вы узнаете, что необходимо указывать протокол при создании ссылки на веб страницу на другом сервере. ПРИМЕЧАНИЕ Иногда вам будут встречаться адреса, которые начинаются с части h t t p s : //. Это признак зашифрованной транзакции с сервером. У защищенных серверов есть специальные устройства шифрования, которые скрывают определенный контент, такой как номера кредитных карт, в процессе передачи данных серверу и обратно. Обратите на это внимание, когда в следующий раз будете совершать онлайн-покупки. Глава 2. Как работает Всемирная паутина Адреса веб-страниц (Когда сервер получает запрос имени каталога, а неопределенного файла, он ищет в нем документ, заданный по умолчанию, обычно с именем index.html Поэтому, если ввести вышеупомянутые URL в адресную строку браузера, в итоге вы увидите следующие документы t t p ://www.ek s m o .ru/index.html h t t p Имя файла, заданного по умолчанию (также называемого индексным файлом, может меняться и зависит оттого, как сконфигурирован сервер. В этих примерах он носит имя index.html, но некоторые серверы предпочитают имя файла default.htm. Если ваш сайт использует на стороне сервера программное обеспечение для генерации страниц, индексному файлу можно присвоить имя index.php или index.asp. Но предварительно согласуйте это решение с администратором сервера, чтобы убедиться, что вы присваиваете индексному файлу надлежащее имя. Также следует отметить, что в первом примере оригинальный U RL- адрес не имеет заключительного слеша, указывающего, что это был каталог. Когда слеш опущен, сервер самостоятельно добавляет его, если находит каталог с таким именем. Индексный файл также полезен в целях безопасности. Некоторые серверы (в зависимости от их конфигурации) возвращают содержимое каталога для отображения в браузере, если файл по умолчанию не найден. Рис. 2.2 демонстрирует, как в таком случае файлы каталога housepics отображены в браузере. Один из способов воспрепятствовать людям, шпионящим за вашими файлами, — убедиться, что в каждом каталоге есть индексный файл. Системный администратор может добавить и другие формы защиты, чтобы запретить просмотр ваших каталогов в браузере. Р ис. 2.2. Некоторые серверы отображают содержимое каталога, если индексный файл не найден ф hnp / / www.littlechair.com/housepics ▼ Перейти Использование адреса для каталога а не для конкретного имени файла) принуждает сервер искать индексный файл, обычно носящий имя Некоторые серверы сконфигурированы таким образом, что выводят содержимое каталога, если индексный файл не найден. в о е' Reload Horn* ф h ttp / / w w w .llt tle c ta lr .c o m / h o u s e p lc s * Со О <* Index of УЖ .h ttl 07-Feb-2000 11:22 2k b r4.ht«l 07 -Feb-2000 11:22 lk br5.ht»ll 07-Feb-2000 11:22 lk br6.htnl 07-Feb-2000 11:22 lk d r l . h f l 07-Feb-2*0* 11:22 2k drZ.htnil 07-Feb-2000 11:22 lk dr3.html 07-Feb-20вв 11:22 lk S ite D Часть I. Начало работы Анатомия веб-страницы Анатомия веб-страницы Мы все знакомы стем, как веб-страницы выглядят в окне брау зера, но что происходит за кадром»? В верхней части рис. 2.3 вы видите, как простая веб-страница отображается в браузере. Хотя ее можно рассматривать как единый документ, фактически она состоит из четырех отдельных файлов H TM документа (index.html), таблицы стилей (kitchen.css) и двух изображений (Joods.gif и spoon.gif). Всеми компонентами управляет H TM L-документ. HTML-документы Вы удивитесь, узнав, что графически насыщенные и интерактивные страницы, которые мы видим во Всемирной паутине, сгенерированы простыми текстовыми документами. Такой файл называют исходным документом. Взгляните на index.html, исходный документ для веб-страницы Кухня Кристины. Вы увидите, что он содержит текстовое содержимое страницы плюс специальные теги (обозначенные угловыми скобками, < и >), которые описывают каждый текстовый элемент на странице. Добавление описывающих тегов к текстовому документу известно как разметка документа. Веб-страницы используют язык, названный языком гипертекстовой разметки (HyperText Markup Language), или коротко HTM L, который был создан специально для документов с гипертекстовыми ссылками. Язык HTM L определяет множество текстовых элементов, которые составляют документы, таких как заголовки, абзацы, подчеркнутый текст и, конечно, ссылки. Есть также H TM элементы, которые добавляют информацию о документе (например его название, а также изображения, видеоролики и виджеты элементов формы, например для ввода имени пользователя. Стоит вкратце отметить, что на самом делена сегодняшний день существует несколько версий языка HTML. Наиболее устоявшимися являются версия HTM L 4.01 и ее более строгий родственник XHTM L 1.0. Возможно, вы слышали, какая шумиха поднялась во Всемирной паутине с появлением новой версии HTML5, предназначенной для лучшей обработки веб приложений и постепенно обретающей поддержку браузеров. Я подробно расскажу обо всех версиях и их различиях в главе 10. А пока нам нужно рассмотреть основные элементы, которые применимы вне зависимости от выбранной вами версии языка УПРАЖНЕНИЕ ПРОСМОТР ИСХОДНОГО КОДА Вы можете просмотреть код любого файла веб-страницы, выбрав команду Вид Исходный код страницы) или Вид Источник (View => Source) вменю вашего браузера. Тот откроет исходный код документа в отдельном окне. Давайте заглянем во внутреннее устройство веб-страницы. 1. На диске, прилагающемся к книге, найдите в папке Примеры\глава- 02 файл index.html и откройте его в браузере. Вы должны увидеть веб-страницу, показанную на рис. 2.3. 2. Выберите команду Вид => Исходный код страницы (View => Page Source) или Вид => Источник (View => Source) вменю вашего браузера. В браузерах Chrome и Opera команда Исходный код (View Source) находится вменю Средства разработки (Developer). В браузере Internet Explorer команда выглядит следующим образом Вид => Просмотреть код. (Если строка меню в вашем браузере не отображается, нажмите клавишу Alt.) Откроется окно, демонстрирующее исходный код, показанный на рис. 2.3. 3. Исходный код для большинства сайтов значительно более сложный. Рассмотрите исходный код сайта ram bler.ru или любого другого. Не волнуйтесь, если вы не разберетесь в коде. Большая его часть станет понятна к тому времени, когда вы закончите читать эту книгу. П ре дуп реж де ни е . Имейте ввиду, что, хотя изучение кода чужих страниц полезно, кража кода для собственных проектов — дурной тони даже незаконна. Если вы хотите использовать код в том виде, в котором вы его видите на чужой странице, спросите разрешения у владельца и всегда ссылайтесь на него. Глава 2. Как работает Всемирная паутина Быстрое знакомство с HTML-разметкой Мы рассмотрим язык HTM L более подробно в части II, так как я не хочу нагружать вас большим количеством деталей прямо сейчас. Но есть несколько моментов, на которые следует внимание. Они касаются того, как функционирует H TM код и как с ним обращаются брау зеры. Просмотрите H T M L -код на рис. 2.3 и сравните его с результатом в браузере. Легко заметить, как элементы, помеченные H T M L -тегами в исходном коде, соответствуют тому, что отображается в окне брау зера. Во-первых, вы заметите, что текст внутри скобок (например, ) не отображается на странице в браузере. Показано только содержимое элемента, а разметка скрыта. Теги указывают на имя H T M L - элемента — обычно сокращенное, такое как h 1 для heading level 1 заголовок 1 уровня) или ет для emphasized text (акцентированный текст). Во-вторых, вы увидите, что большинство H T M L -тегов идут парами, окружая содержимое элемента. В нашем H TM документе | Образовательный портал Как узнать результаты егэ Стихи про летний лагерь 3агадки для детей |
