2015-10-16
381
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="ru" xml:lang="ru">
<head>
<title>Концепции - Сайт о сайтах</title>
<style type="text/css">
<!--
@import url(../style.css);
-->
</style>
</head>
<body>
<div id="carrier">
<h1 id="header"><a href="../index.html">Сайт о сайтах</a></h1>
<div id="menucarrier">
<div id="menu">
<p><span>Концепции</span></p>
<p><a href="../tech/index.html">Технологии</a></p>
<p><a href="../nuances/index.html">Нюансы</a></p>
<p><a href="../about/index.html">О проекте</a></p>
<p><a href="../map/index.html">Карта сайта</a></p>
</div>
</div>
<div id="text">
<h2>Концепции</h2>
<p>Представляем материалы, посвященные базовым и основополагающим принципам веб-разработки.</p>
<ul>
<li><a href="quality.html">Критерии качества сайтов</a></li>
<li><a href="stages.html">Технологическая цепочка создания сайтов</a></li>
</ul>
</div>
<div id="footer">
|
|
|
<p>ИВТ 2010</p>
</div>
</div>
</body>
</html>
Рисунок 2.19. Веб-страница Концепции
3а) Критерии качества сайтов ( concept\quality.html )
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="ru" xml:lang="ru">
<head>
<title>Критерии качества сайтов - Концепции - Сайт о сайтах</title>
<style type="text/css">
<!--
@import url(../style.css);
-->
</style>
</head>
<body>
<div id="carrier">
<h1 id="header"><a href="../index.html">Сайт о сайтах</a></h1>
<div id="menucarrier">
<div id="menu">
<p><a href="index.html" class="current">Концепции</a></p>
<p><a href="../tech/index.html">Технологии</a></p>
<p><a href="../nuances/index.html">Нюансы</a></p>
<p><a href="../about/index.html">О проекте</a></p>
<p><a href="../map/index.html">Карта сайта</a></p>
</div>
</div>
<div id="text">
<h2>Критерии качества сайтов</h2>
<p>Серьезные сайты отличают от бесполезного хлама, которым полнится Сеть, как минимум следующие непременные черты:</p>
<ul>
<li>высокое качество информационного наполнения и грамотность его подачи;</li>
<li>оригинальность и эстетическая привлекательность внешнего облика страниц;</li>
<li>доступность содержания сайта для максимально широкого круга пользователей вне зависимости от применяемых ими типов устройств и версий браузеров, а также от ограничений по состоянию здоровья;</li>
<li>эргономичность элементов пользовательского интерфейса сайта, обеспечивающая высокую эффективность, но в то же время легкость и непринужденность взаимодействия посетителя с веб-ресурсом;</li>
|
|
|
<li>надежность и безопасность используемых технологических решений, четкая согласованность работы всех компонентов;</li>
<li>безупречная проработка всех деталей и нюансов.</li>
</ul>
</div>
<div id="footer">
<p>ИВТ 2010.</p>
</div>
</div>
</body>
</html>
Рисунок 2.20. Веб-страница Критерии качества сайтов
3б) Технологическая цепочка создания сайтов ( concept\quality.html )
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="ru" xml:lang="ru">
<head>
<title>Технологическая цепочка создания сайтов - Концепции - Сайт о сайтах</title>
<style type="text/css">
<!--
@import url(../style.css);
-->
</style>
</head>
<body>
<div id="carrier">
<h1 id="header"><a href="../index.html">Сайт о сайтах</a></h1>
<div id="menucarrier">
<div id="menu">
<p><a href="index.html" class="current">Концепции</a></p>
<p><a href="../tech/index.html">Технологии</a></p>
<p><a href="../nuances/index.html">Нюансы</a></p>
<p><a href="../about/index.html">О проекте</a></p>
<p><a href="../map/index.html">Карта сайта</a></p>
</div>
</div>
<div id="text">
<h2>Технологическая цепочка создания сайтов</h2>
<p>Процесс проектирования и реализации любого веб-проекта можно подразделить на следующие характерные этапы:</p>
<ol>
<li>постановка задачи, включающая в себя:
<ul>
<li>анализ существующих конкурирующих и/или родственных проектов;</li>
<li>выработку концепции;</li>
</ul>
</li>
<li>подготовка первоначального информационного наполнения;</li>
<li>разработка макетов страниц;</li>
<li>подготовка шаблонов страниц;</li>
<li>проектирование и реализация сервисов;</li>
<li>сборка всех компонентов воедино;</li>
<li>тестирование;</li>
<li>ввод в эксплуатацию;</li>
<li>пожизненное сопровождение — информационное наполнение и техническая поддержка.</li>
</ol>
</div>
<div id="footer"> <p>ИВТ 2010</p> </div>
</div>
</body>
</html>
Рисунок 2.21. Веб-страница Технологическая цепочка создания сайтов
4) Технологии (tech\index.html)
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="ru" xml:lang="ru">
<head> <title>Технологии - Сайт о сайтах</title>
<style type="text/css">
<!--
@import url(../style.css);
-->
</style>
</head>
<body>
<div id="carrier">
<h1 id="header"><a href="../index.html">Сайт о сайтах</a></h1>
<div id="menucarrier">
<div id="menu">
<p><a href="../concept/index.html">Концепции</a></p>
<p><span>Технологии</span></p>
<p><a href="../nuances/index.html">Нюансы</a></p>
<p><a href="../about/index.html">О проекте</a></p>
<p><a href="../map/index.html">Карта сайта</a></p>
</div>
</div>
<div id="text">
<h2>Технологии</h2>
<p>Этот раздел включает в себя материалы, затрагивающие актуальные на сегодняшний день веб-технологии стороны клиента, разрабатываемые Консорциумом <a href="http://www.w3.org/">W3C</a>.</p>
<ul>
<li><a href="xhtml.html">Расширяемый язык разметки гипертекста XHTML</a></li>
<li><a href="css.html">Каскадные листы стилей CSS</a></li>
</ul>
</div>
<div id="footer"> <p>ИВТ 2010</p> </div>
</div>
</body>
</html>
Рисунок 2.22. Веб-страница Технологии
4а) HTML (tech\xhtml.html)
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="ru" xml:lang="ru">
<head>
<title>Расширяемый язык разметки гипертекста XHTML - Технологии - Сайт о сайтах</title>
<style type="text/css">
<!--
@import url(../style.css);
-->
</style>
</head>
<body>
<div id="carrier">
<h1 id="header"><a href="../index.html">Сайт о сайтах</a></h1>
|
|
|
<div id="menucarrier">
<div id="menu">
<p><a href="../concept/index.html">Концепции</a></p>
<p><a href="index.html" class="current">Технологии</a></p>
<p><a href="../nuances/index.html">Нюансы</a></p>
<p><a href="../about/index.html">О проекте</a></p>
<p><a href="../map/index.html">Карта сайта</a></p>
</div>
</div>
<div id="text">
<h2>Расширяемый язык разметки гипертекста XHTML</h2>
<p>На смену сложному и противоречивому SGML (Standard Generalized Markup Language) в качестве универсального стандарта для хранения любых структурированных данных приходит расширяемый язык разметки XML — eXtensible Markup Language, отличающийся более строгими правилами. HTML 4 стал в определенном смысле «тупиковой веткой» — это последняя версия HTML, основанная на SGML.</p>
<p>Развитием HTML 4 стал «расширяемый» (eXtensible) язык разметки гипертекста — XHTML 1.0, по сути своей явившийся лишь переформулировкой стандарта HTML 4.01 в соответствии с правилами XML 1.0. XHTML 1.0, за исключением ряда нюансов, в точности повторяет функциональность HTML 4.01 и включает в себя предусмотренные последним три типа документов: Strict, Transitional и Frameset.</p>
<p>XHTML 1.1, полностью упразднивший типы документов Transitional и Frameset и утвердивший еще некоторые ощутимые нововведения, уже несколько дальше от привычного HTML, но на практике пока используется довольно редко. XHTML 2.0 уходит в еще больший отрыв от совместимости с HTML — но эта версия пока еще находится в работе и в разряд официальных рекомендаций W3C перейдет не так скоро.</p>
</div>
<div id="footer"> <p>ИВТ 2010</p> </div>
</div>
</body>
</html>
Рисунок 2.23. Веб-страница Об HTML
4б) Каскадные листы стилей CSS (tech\css.html)
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="ru" xml:lang="ru">
<head>
<title>Каскадные листы стилей CSS - Технологии - Сайт о сайтах</title>
<style type="text/css">
<!--
@import url(../style.css);
|
|
|
-->
</style>
</head>
<body>
<div id="carrier">
<h1 id="header"><a href="../index.html">Сайт о сайтах</a></h1>
<div id="menucarrier">
<div id="menu">
<p><a href="../concept/index.html">Концепции</a></p>
<p><a href="index.html" class="current">Технологии</a></p>
<p><a href="../nuances/index.html">Нюансы</a></p>
<p><a href="../about/index.html">О проекте</a></p>
<p><a href="../map/index.html">Карта сайта</a></p>
</div>
</div>
<div id="text">
<h2>Каскадные листы стилей CSS</h2>
<p>В 1996 г. Консорциумом <a href="http://www.w3.org/">W3C</a> была утверждена спецификация CSS (Cascading Style Sheets).</p>
<p>Каскадные листы стилей отделены от содержания веб-страниц и потому не вредят внутренней логике последних. К тому же они, в отличие от встроенных в HTML возможностей визуального форматирования, явно предписывают агенту пользователя, каким образом должны интерпретироваться те или иные свойства. Полузабытый принцип разделения содержания и представления, заложенный разработчиками SGML, стал возрождаться.</p>
<p>Любой технологии, однако, нужны многие годы на обкатку. Первая версия CSS, CSS level 1 (или просто CSS1) оказалась почти не замеченной разработчиками, ибо не смогла заменить собой все визуальные средства, насильственно втиснутые в HTML. К тому же, качество поддержки CSS в браузерах тех лет не выдерживало никакой критики.</p>
<p>Спецификация CSS2, утвержденная в качестве официальной рекомендации в 1998 г., обладает намного более серьезными возможностями. Ее конек — блочная модель, позволяющая представить любую веб-страницу как набор прямоугольных областей с различными свойствами и тем самым избавиться от верстки шаблонов страниц при помощи таблиц. Кроме того, CSS2 позволяет определять индивидуальные и прозрачные для пользователя правила представления информации для различных сред и устройств вывода, в частности, для экрана настольного компьютера или ноутбука, для меньшего по размерам экрана «наладонника» или смартфона, для речевых браузеров, для механических строк Брайля, для принтера и т. д.</p>
</div>
<div id="footer">
<p>ИВТ 2010</p>
</div>
</div>
</body>
</html>
Рисунок 2.24. Веб-страница Каскадные листы стилей
5) Ньюансы (nuances\index.html)
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="ru" xml:lang="ru">
<head>
<title>Нюансы - Сайт о сайтах</title>
<style type="text/css">
<!--
@import url(../style.css);
-->
</style>
</head>
<body>
<div id="carrier">
<h1 id="header"><a href="../index.html">Сайт о сайтах</a></h1>
<div id="menucarrier">
<div id="menu">
<p><a href="../concept/index.html">Концепции</a></p>
<p><a href="../tech/index.html">Технологии</a></p>
<p><span>Нюансы</span></p>
<p><a href="../about/index.html">О проекте</a></p>
<p><a href="../map/index.html">Карта сайта</a></p>
</div>
</div>
<div id="text">
<h2>Нюансы</h2>
<p>Веб-разработка сопряжена с огромным количеством неочевидных для новичков (да и для многих опытных разработчиков, чего уж там греха таить) тонкостей и деталей. Таким вопросам и посвящается этот раздел нашего сайта.</p>
<ul>
<li><a href="layout.html">Организация пространства страницы</a></li>
<li><a href="nav.html">Проектирование систем навигации</a></li>
</ul>
</div>
<div id="footer">
<p>ИВТ 2010</p>
</div>
</div>
</body>
</html>
Рисунок 2.25. Веб-страница Ньюансы
5а) Организация пространства страницы (nuances\layout.html)
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="ru" xml:lang="ru">
<head>
<title>Организация пространства страницы - Нюансы - Сайт о сайтах</title>
<style type="text/css">
<!--
@import url(../style.css);
-->
</style>
</head>
<body>
<div id="carrier">
<h1 id="header"><a href="../index.html">Сайт о сайтах</a></h1>
<div id="menucarrier">
<div id="menu">
<p><a href="../concept/index.html">Концепции</a></p>
<p><a href="../tech/index.html">Технологии</a></p>
<p><a href="index.html" class="current">Нюансы</a></p>
<p><a href="../about/index.html">О проекте</a></p>
<p><a href="../map/index.html">Карта сайта</a></p>
</div>
</div>
<div id="text">
<h2>Организация пространства страницы</h2>
<p>Успех будущего веб-проекта во многом определяется качеством исполнения фундамента — шаблонов главной и внутренних страниц сайта. Мы приняли за аксиому тот факт, что все сайты информационного характера (в отличие от презентационных проектов) в значительной мере похожи друг на друга. И общность эта сильнее всего выражена в составе и взаимном расположении элементов страниц.</p>
<p>В организации пространства страницы любого информационного сайта можно выделить как минимум четыре функциональные области со строго определенными ролями. Это «шапка» (в английской терминологии — header), блок навигации, область основного текста и «подвал» (footer).</p>
</div>
<div id="footer">
<p>ИВТ 2005</p>
</div>
</div>
</body>
</html>
Рисунок 2.26. Веб-страница Организация пространства страницы
5б) Проектирование систем навигации (nuances\nav.html)
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="ru" xml:lang="ru">
<head>
<title>Проектирование систем навигации - Нюансы - Сайт о сайтах</title>
<style type="text/css">
<!--
@import url(../style.css);
-->
</style>
</head>
<body>
<div id="carrier">
<h1 id="header"><a href="../index.html">Сайт о сайтах</a></h1>
<div id="menucarrier">
<div id="menu">
<p><a href="../concept/index.html">Концепции</a></p>
<p><a href="../tech/index.html">Технологии</a></p>
<p><a href="index.html" class="current">Нюансы</a></p>
<p><a href="../about/index.html">О проекте</a></p>
<p><a href="../map/index.html">Карта сайта</a></p>
</div>
</div>
<div id="text">
<h2>Проектирование систем навигации</h2>
<p>В идеале — об этом можно прочесть у Якоба Нильсена (<a href="http://www.useit.com/">Jakob Nielsen</a>), одного из ведущих мировых специалистов в области проектирования пользовательских интерфейсов — навигация сайта должна в любой момент предоставлять посетителю четкие ответы на три вопроса: «Где я нахожусь?», «Где я уже был?» и «Куда я могу отсюда пойти?»</p>
<p>В основе любой системы навигации, конечно же, лежит краеугольный камень идеологии Всемирной Паутины — гипертекстовые ссылки. Но состав средств навигации ими вовсе не ограничивается — при ближайшем рассмотрении устройство любой сколько-либо сложной навигационной системы выявляет неоднородность.</p>
<p>Так, все средства навигации можно подразделить на внутренние и внешние (по отношению к данному сайту). И лишь внутренняя навигация представлена гиперссылками, размещенными на страницах сайта, тогда как навигация внешняя, «неофициальная», сопряжена со свободой перемещений, предоставляемой пользователю программой-клиентом, то есть браузером.</p>
</div>
<div id="footer">
<p>ИВТ 2010</p>
</div>
</div>
</body>
</html>
Рисунок 2.27. Веб-страница Проектирование систем навигации
6) О Проекте ( about\index.html)
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="ru" xml:lang="ru">
<head>
<title>О проекте - Сайт о сайтах</title>
<style type="text/css">
<!--
@import url(../style.css);
-->
</style>
</head>
<body>
<div id="carrier">
<h1 id="header"><a href="../index.html">Сайт о сайтах</a></h1>
<div id="menucarrier">
<div id="menu">
<p><a href="../concept/index.html">Концепции</a></p>
<p><a href="../tech/index.html">Технологии</a></p>
<p><a href="../nuances/index.html">Нюансы</a></p>
<p><span>О проекте</span></p>
<p><a href="../map/index.html">Карта сайта</a></p>
</div>
</div>
<div id="text">
<h2>О проекте</h2>
<p>Сайт создан и поддерживается группой специалистов, которым небезразличны тенденции развития веб-технологий и качество технологических решений, используемых в Рунете.</p>
</div>
<div id="footer">
<p>ИВТ 2010</p>
</div>
</div>
</body>
</html>
Рисунок 2.28. Веб-страница О Проеке
7) Карта Сайта ()
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="ru" xml:lang="ru">
<head>
<title>Карта сайта - Сайт о сайтах</title>
<style type="text/css">
<!--
@import url(../style.css);
-->
</style>
</head>
<body>
<div id="carrier">
<h1 id="header"><a href="../index.html">Сайт о сайтах</a></h1>
<div id="menucarrier">
<div id="menu">
<p><a href="../concept/index.html">Концепции</a></p>
<p><a href="../tech/index.html">Технологии</a></p>
<p><a href="../nuances/index.html">Нюансы</a></p>
<p><a href="../about/index.html">О проекте</a></p>
<p><span>Карта сайта</span></p>
</div>
</div>
<div id="text">
<h2>Карта сайта</h2>
<p>С этой страницы вы можете перейти на любую другую страницу нашего сайта, щелкнув по единственной ссылке.</p>
<ul>
<li><a href="../index.html">Сайт о сайтах</a>
<ul>
<li><a href="../concept/index.html">Концепции</a>
<ul>
<li><a href="../concept/quality.html">Критерии качества сайтов</a></li>
<li><a href="../concept/stages.html">Технологическая цепочка создания сайтов</a></li>
</ul>
</li>
<li><a href="../tech/index.html">Технологии</a>
<ul>
<li><a href="../tech/xhtml.html">Расширяемый язык разметки гипертекста XHTML</a></li>
<li><a href="../tech/css.html">Каскадные листы стилей CSS</a></li>
</ul>
</li>
<li><a href="../nuances/index.html">Нюансы</a>
<ul>
<li><a href="../nuances/layout.html">Организация пространства страницы</a></li>
<li><a href="../nuances/nav.html">Проектирование систем навигации</a></li>
</ul>
</li>
<li><a href="../about/index.html">О проекте</a></li>
<li>Карта сайта (текущая страница)</li>
</ul>
</li>
</ul>
</div>
<div id="footer">
<p>ИВТ 2010</p>
</div>
</div>
</body>
</html>
Рисунок 2.29. Веб-страница Карта сайта
Литература
1 Храмцов, П.Б. Основы Web-технологгий: учебное пособие / П.Б. Храмцов, С.А. Брик, А.М. Русак, А.И. Сурин. – М.: Интернет-Университет Информационных технологий; БИНОМ. Лаборатория знаний, 2007. – 374
2 Ломов, А.Ю. HTML, CSS, скрипты: практика создания сайтов / А.Ю. Ломов. – СПб.:БХВ-Петербург, 2007. – 416 с.
