Облегчение процесса разработки сайтов

Легкий, логически стройный, прозрачный код намного проще писать и впоследствии сопровождать, чем код, разрабатываемый абы как. Конечно же, разработчикам консервативной школы придется сделать некоторое усилие над собой с тем, чтобы перестроиться на новый лад, но оно сто́ит того. Вообще, конечно, это вполне себе тема для холивора самостоятельной статьи, достойная рассмотрения в деталях…

Заключение

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

http://cleverscript.ru/html/2012-04-08-23-01-00/44-test-web-standarts.html

Тест на знание современных веб-стандартов
Если вы занимаетесь web-разработкой и используете такие web технологии как HTML, CSS, Javascript и пр. Вам будет интересно пройти замечательный тест на проверку свох знаний в области веб разработки и использовании web-стандартов. Вопросы довольно интересные и многие составлены в ключе последних статусов спецификаций различных web стандартов (HTML, CSS, SVG).

Пройти тест вы можете на сайте http://www.itquiz.ru/Rules.aspx, и ко всему прочему вы можете выиграть интересные призы от Microsoft, а также в конце теста получить и распечатать сертификат.

Довольно полезный тест, который может подтолкнуть к изучению веб стандартов, что в последствии повысит эффективность вашего труда:))

 

http://appledu.ru/library/web-development-new-edu

Разработка Web-страниц. Современный подход к обучению

Статья была написана в 2007 году, но, как мне кажется, не утратила своей актуальности. До сих пор в школьных учебниках вы, с большой вероятностью, увидите всё тот же подход времен HTML 3. Никаких таблиц стилей и, соответственно, разделения логической разметки и правил оформления.

Введение

Разработка web-страниц в том или ином виде входит во многие современные курсы информационных технологий. Сейчас, в связи со все более активным использованием Интернета, это один из наиболее востребованных учащимися разделов программы. И нам, естественно, хотелось бы использовать его максимально эффективно. Как же этого добиться?

Самый краткий ответ: «Соблюдая стандарты!» Но разве раньше дело обстояло иначе? Да. И это было объяснимо. Сами по себе web-стандарты еще довольно молоды. Но главное, мало иметь стандарты, нужны программы, полноценно их поддерживающие. Пока на компьютерах основной массы пользователей стояли браузеры, плохо совместимые со стандартами, web-дизайнеры были вынуждены использовать соответствующий код. Создавались книги и интернет-ресурсы описывающие такой подход. Это, конечно, не могло не отразиться на содержании школьного курса.

Сейчас ситуация изменилась. Практически во всех современных браузерах для Windows, Linux, Mac OS X (MS InternetExplorer 6+, Netscape 6+, Opera 7+, Firefox, Safari, Konqueror, Galeon и др.) достаточно хорошо реализованыweb-стандарты. В то же время в школы (в том числе, в результате национального проекта «Образование») приходят новые компьютеры, доступнее становится Интернет. Это позволяет иначе строить и обучение разработке web-страниц.

В чем же особенности предлагаемого подхода и какие преимущества он предоставляет?

Есть три кита...

XHTML — eXtensibleHyperTextMarkupLanguage — расширенный язык разметки гипертекста
CSS — CascadingStyleSheets — каскадные таблицы стилей
DOM — DocumentObjectModel — объектная модель документа

Современныеweb-стандарты позволяют разделить структуру документа, его оформление и поведение. За структуру отвечает XHTML (или HTML). Внешний вид описывается на языке CSS. «Оживить» же страницу позволяет JavaScript, обращающийся к ее отдельным элементам в соответствии с DOM. JavaScript (под именем ECMAScript) был стандартизован Европейской ассоциацией по стандартизации информационных и вычислительных систем (ранее называвшейся Европейской ассоциацией производителей компьютеров — ECMA); XHTML, CSS, DOM являются рекомендациями (фактически, тоже стандартами) Консорциума World-WideWeb (W3C).

Рассказывая о разработке web-сайтов на уроках информационных технологий, мы и должны сразу же опираться на «трех китов» — разметку структуры, описание внешнего вида, программирование поведения, и четко различать назначение языков XHTML, CSS и JavaScript.

Структура

Самое главное (и, вероятно, самое сложное) — использовать XHTML исключительно для структурной разметки документа. Возможно, придется ломать стереотипы и у учителя, и у «юных дизайнеров». Тем не менее это необходимо. И с утилитарной точки зрения гораздо полезнее овладевать технологией, нацеленной в будущее (и уже успешно применяющейся), чем тратить время на приобретение заведомо устаревших навыков. Но главное -- мы же в школе, а не на ускоренных компьютерных курсах -- это дополнительный повод возвратиться к важному вопросу структуры документа. Сейчас можно уже говорить о неких единых принципах работы с текстом как при его оформлении в текстовом процессоре (не важно, MS Word, OpenOffice или каком-то ином), так и при гипертекстовой разметке. И в том, и в другом случае при грамотной работе задачи написания и верстки полностью разделены и, вообще говоря, независимы.

Итак, мы используем только структурные теги (или, как их еще называют, теги логической разметки) и только по их прямому назначению. Абзацы текста создаются с помощью тега <p>, и никак иначе. Заголовки (и только заголовки) — тегами <h1>, <h2>... <h6>. <div> — это крупный раздел, блок на странице. Никаких <b>, <i>, <u>, тем более, <font...>!

Вторая особенность — более жесткие и единообразные правила XHTML по сравнению с HTML. Это, с одной стороны, упрощает их изучение, с другой — подталкивает к более аккуратной работе.

Напомним основные отличия:

• все теги и имена атрибутов записываются строчными буквами (значения атрибутов могут содержать и заглавные)
• все значения атрибутов заключаются в кавычки
• все атрибуты должны иметь значения (например, вместо

<input type="checkbox" name="size" value="big" checked>

нужнописать

<input type="checkbox" name="size" value="big" checked="checked">

• все теги должны быть закрыты (в том числе, <p>, <li>, <td> и т. п.); «пустые» теги закрываются наклонной чертой в конце тега (например, <br />)
• все специальные символы должны быть закодированы (знак «<», не являющийся частью тега, записывается как «&lt;», «>» — «&gt;», «&» — «&amp;» и т. д.)

Заметьте: каждое правило начинается словом «все». Никаких исключений. Просто, не правда ли?

Совет 1. Чтобы позволить некоторые «вольности» (например, включение в разметку тегов или атрибутов, признанных в XHTML устаревшими), рекомендуется использовать «переходный» (transitional) вариант языка.

Совет 2. Большинство браузеров при работе со страницами, в которых не указан тип документа или это указание неполное, переключаются в режим «обратной совместимости». Поэтому для обработки в соответствии со стандартами (а именно это нам необходимо) первой строкой XHTML-файла обязательно должно быть объявление типа. Поскольку мы используем «переходный» вариант разметки, оно будет выглядеть так:

<!DOCTYPE html PUBLIC «- W3C DTD XHTML 1.0 Transitional EN»
«http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd»>

Обратите внимание: здесь указан полный URI dtd-файла. (Список всех допустимых типов документа приведен на сайте Консорциума World-Wide Web)

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

<!DOCTYPE html PUBLIC «-W3CDTD XHTML 1.0 TransitionalEN»
«http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd»>
<html xmlns=«http://www.w3.org/1999/xhtml» xml:lang=«ru» lang=«ru»>
<head>
<title></title>
<meta http-equiv=«content-type» content=«text/html;charset=windows-1251» />
</head>
<body>
</body>
</html>

Совет 3. По существующим правилам тегу DOCTYPE может предшествовать xml-пролог — строка, выглядящая приблизительно так:

<?xmlversion=«1.0» encoding=«windows-1251»?>

К сожалению, в самом распространенном на данный момент браузере MS InternetExplorer 6 имеется ошибка, из-за которой он при наличии такого текста в первой строке не опознает тип документа и переключается в режим «обратной совместимости». По этой причине лучше отказаться от использования xml-пролога.

Внешний вид

Следующая составная часть построенного по стандартам сайта — каскадные таблицы стилей. Что нам дает использование CSS?

Посмотрим сначала с точки зрения web-дизайнера. Учителю необходимо знать об этом, чтобы убедить школьников (среди которых вполне могут быть уже создававшие собственные сайты) в необходимости изучения CSS. Итак...

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

Однако изучая CSS, мы не только передаем некий набор правил работы, но и вновь демонстрируем практическое приложение ранее изученных общих понятий информатики. Мы можем рассматривать сайт как иерархическую структуру (Рис. 1).

Ей соответствует структура таблиц стилей:

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

Но этого мало. Изучение CSS позволяет вспомнить в некоторой степени и об объектно-ориентированном подходе:

• каждый элемент страницы рассматривается как объект;
• вложенный объект наследует свойства родительского, за исключением определенных непосредственно для него;
• свойства могут быть описаны для тега, класса элементов и экземпляра, определяемого идентификатором; при этом значения, указанные для экземпляра, имеют приоритет перед указанным для класса, а они, в свою очередь, перед значениями свойств тега.

Совет 1. Если вам по какой-либо причине требуется сделать страницу, корректно выглядящую в Netscape 4, свойства придется прописывать для каждого элемента — в этом браузере механизм наследования еще не был реализован.

Программирование

существовали также объектные модели документа, разработанные Microsoft и Netscape до появления рекомендаций Консорциума World-WideWeb. В MS InternetExplorer до сих пор поддерживается и стандартная и фирменная модели.

Третья составляющая построения сайта по стандартам — программирование его поведения, динамики с использованием JavaScript на основе W3C DOM.

Основное преимущество этой модели — возможность обратиться к любому элементу страницы по идентификатору, независимо от его положения в иерархии объектов:

document.getElementById(идентификатор),

где идентификатор — текстовая строка, совпадающая со значением атрибута id соответствующего тега. Например, чтобы изменить цвет текста в некотором абзаце, отмеченном тегами

<p id="i123">...</p>,

мыможемзаписать:

document.getElementById("i123").style.color = "red";

Если требуется поменять сразу несколько атрибутов, используется смена класса элемента:

document.getElementById("i123").className = " имя_класса ";

По ряду причин на практике обычно бывает удобнее скрывать один элемент и показывать другой, изменяя значение атрибута display.

Можно поменять и текст внутри элемента. В простейшем случае, если наш абзац не содержит никаких других тегов, для этого потребуется примерно такая строка:

document.getElementById("i123").firstChild.data = " новый_текст ";

В этом примере текст является первым (и единственным) дочерним объектом абзаца.

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

JavaScript — современный язык, возможностей которого более чем достаточно для начального знакомства с программированием. Для работы с ним нет необходимости в специализированном программном обеспечении — достаточно браузера и простейшего текстового редактора, стандартно входящих в дистрибутив любой современной ОС. С самых первых занятий школьники получают возможность создавать сценарии, пригодные для практического применения на web-страницах. Все это — серьезные основания для использования в базовом курсе информатики и ИТ именно JavaScript. Конечно, он не подходит для задач олимпиад по программированию или части «C» ЕГЭ, но ведь стандарты основного общего и базового уровня среднего (полного) общего образования [1, 2], равно как действующие программы, предусматривают только самое минимальное знакомство с алгоритмизацией.

Совет 1. При разработке сайта не для учебных (или не только для учебных) целей не стоит забывать, что JavaScript поддерживается далеко не всеми браузерами (к тому же пользователь может просто отключить исполнение сценариев). Поэтому для всех существенных элементов необходимо предусматривать альтернативные варианты. Например, использовать тег <noscript>, наборы обычных текстовых ссылок вместо выпадающих меню и т. п.

Естественно, это не относится к страницам, основной задачей которых является как раз исполнение некоторой программы.

Совет 2. Чтобы ссылка при отсутствии поддержки JavaScript не вела «в никуда», делайте ее комбинированной:

<a href="somedir/somefile.html" onclick="someFunction(); return false;">...</a>

Тогда, если в браузере включен JavaScript, выполнится функция someFunction(), а иначе произойдет самый обычный гипертекстовый переход на страницу somefile.html.

Пример разработки сайта

Посмотрим, как может выглядеть процесс разработки простого сайта школы. На первом этапе, конечно же, нужно определить его общую структуру. Предположим, мы хотим разместить основные сведения о школе, учебные материалы, оперативную информацию о происходящих событиях. Соответственно, выделяются три основных раздела: «Новости», «О школе» и «Учеба». Кроме того, редкий школьный сайт обходится без «Фотоальбома».

Приступим к подготовке шаблона страниц. Каждая из них должна включать, помимо основного содержания, название сайта, два меню — для перехода по разделам и внутри текущего раздела. Отведем также место для полезных ссылок на другие сайты, а в самом конце — для вспомогательной информации (например, указания времени последнего обновления, копирайта и т. п.).

В результате у нас должно получиться примерно следующее:

<!DOCTYPE html PUBLIC "-W3CDTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Нашашкола</title>
<link rel="stylesheet" type="text/css" media="all" href="c/general.css" />
<script language="JavaScript" type="text/javascript" src="j/general.js"></script>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1251" />
</head>
<body id="main">
<div id="wrapper">
<div id="header">
</div><!-- end of header -->
<div id="globalnav">
</div><!-- end of globalnav -->
<div id="maincontent">
</div><!-- End of maincontent -->
<div id="sidebar">
<h3>Разделы</h3>
<div id="sec">
</div><!-- End of sec -->
<h3>Полезныессылки</h3>
<div id="links">
</div><!-- End of links -->
</div><!-- End of sidebar -->
<div id="footer">
</div><!-- Endoffooter -->
</div>
</body>
</html>

Как видите, здесь просто перечислены намеченные разделы. Об оформлении неизвестно почти ничего. Мы только отметили, что, во-первых, меню подразделов, ссылки и другие вспомогательные элементы будут объединены в единый блок (sidebar), а во-вторых, что содержимое страницы будет ограничено размерами раздела (wrapper).

Заметьте: мы сразу предусматриваем подключение внешней таблицы стилей general.css и файла сценариев general.js. Поскольку в будущем число подобных файлов может увеличиться, сразу же создаем отдельные каталоги для стилей и сценариев, а также, забегая немного вперед, для элементов графического оформления страниц: c, j, i (имена даны по первым буквам слов css, javascript и images).

Естественно, если сейчас открыть этот документ в браузере, мы не увидим почти ничего (только подзаголовки «Разделы» и «Наши друзья»). Вставим в нашу заготовку элементы, общие для всех страниц. В раздел «header» вставим название сайта. Естественно, его нужно заключить в тег <h1>:

<divid="header">
<h1>Наша школа</h1>
</div><!-- endofheader -->

Главное меню сайта представим в виде ненумерованного списка:

<div id="globalnav">
<ul id="menu">
<li id="news"><a href="" title="">Новости</a></li>
<li id="about"><a href="about.html" title="">Ошколе</a></li>
<li id="study"><a href="study.html" title="">Учеба</a></li>
<li id="photos"><a href="photos.html" title="">Фотоальбом</a></li>
</ul>
</div><!-- end of globalnav -->

В нижний колонтитул впишем знак охраны авторского права:

<div id="footer">
<p>&copy; <a href="">Школа *****</a>, 2006</p>
</div><!--Endoffooter -->

Кроме того, сделаем заготовки для меню подразделов и ссылок:

<div id="sec">
<ul>
<li><a href="">Раздел 1</a></li>
<li><a href="">Раздел 2</a></li>
<li><a href="">Раздел 3</a></li>
<li><a href="">Раздел 4</a></li>
</ul>
</div><!-- End of sec -->

и

<div id="links">
<ul>
<li><a href="">Ссылка 1</a></li>
<li><a href="">Ссылка 2</a></li>
<li><a href="">Ссылка 3</a></li>
<li><a href="">Ссылка 4</a></li>
</ul>
</div><!-- Endoflinks -->

В таком виде xhtml-шаблон уже готов. То есть, если идет групповая работа над проектом, с этого момента учащиеся могут разделиться. Часть из них будет делать страницы сайта, заполняя шаблон подготовленной информацией. В это же время другие займутся оформлением — разработкой таблицы стилей и подготовкой графических элементов.

Чтобы видеть, как будет выглядеть готовый сайт, нужно разместить в основном разделе страницы-образца какие-либо текстовые и графические элементы.

Важно заметить, что даже без какой бы то ни было таблицы стилей мы получаем вполне полноценную функциональную страницу (Рис. 2). Но сейчас мы сделаем так, что она будет еще и красивой.

Рис. 2
Посмотреть пример страницы

Итак, создаем файл general.css. Первым делом задаем размещение на странице основных блоков и их характеристики. Заметьте: нельзя полагаться на настройки браузеров «по умолчанию», следует прописать в таблице стилей значения всех свойств, включая цвета фона и текста, базовый кегль шрифта и т. п.

body {
text-align: center;
margin: 0;
padding: 0;
border: 0;
background: #ddb url(../i/holder.gif) top center repeat-y;
color: #663;
font: 13px/15px Verdana, Helvetica, sans-serif;
}
div#wrapper {
color: #663;
background: transparent url(../i/wrapinner.gif) top left repeat-y;
width: 742px;
margin: 0 auto;
padding: 0;
text-align: left;
}
div#header {
width: 700px;
height: 50px;
background: #cc9;
margin: 0 0 0 12px;
padding: 0;
border: 0;
}
div#maincontent {
float: left;
width: 440px;
padding: 0;
border: 0;
margin: 0;
margin-left: 6px; /* поледля IE 6 */
}
html>body div#maincontent {
margin-left: 12px; /* аэто — длявсехнормальныхбраузеров */
min-height: 500px;
}
div#sidebar {
margin: 0 0 0 472px;
padding: 0;
width: 230px;
border: 0;
}
div#footer {
clear: both;
border: 0;
border-top: 10px solid #eed;
border-bottom: 10px solid #eed;
background: #cc9;
color: #663;
width: 700px;
padding: 5px 0;
margin: 10px 0 0 12px;
}

Рис. 3
Посмотреть пример страницы

Обратите внимание на два использованных здесь полезных приема. Во-первых, используя селектор, не распознаваемый InternetExplorer, мы обошли имеющуюся в этом браузере ошибку обработки размеров блока. Во-вторых, с помощью фоновых изображений, повторяющихся только вдоль оси Y, создали эффект отбрасываемой страницей тени и выделили правый блок.

Теперь опишем, как должны оформляться отдельные элементы в каждом блоке.

Выделим название сайта более явно, а указание об авторском праве наоборот уменьшим:

div#header h1 {
background: #cc9;
margin: 0;
padding: 12px;
border: 0;
font-size: 24px;
letter-spacing: 2px;
text-transform: uppercase;
}
div#footer p {
font-size: 11px;
line-height: 18px;
margin: 0;
padding: 0 50px;
text-align: right;
}

Изменимстандартноеоформлениессылок:

a {
font-weight: bold;
background: transparent;
text-decoration: none;
}
a:link, a:visited {
color: #785;
}
a:hover {
text-decoration: underline;
color: #530;
}
a:active {
color: #785;
}
div#maincontent a {
font-weight: normal;
text-decoration: underline;
}

Определим, как должны выглядеть структурные элементы основного текста:

h2, h3 {
font-weight: bold;
line-height: 1.2em;
margin: 1em 0 0 0;
}
p {
margin: 0.3em 0 0 0;
text-align: justify;
text-indent: 2em;
line-height: 140%;
}
div#maincontent h2 {
font-size: 18px;
letter-spacing: 1px;
}
div#maincontent h3, div#sidebar h3 {
font-size: 14px;
}

Рис. 4
Посмотреть пример страницы

Теперь поработаем со списками. В меню боковой панели просто уберем метки элементов:

#sidebar ul {
margin: 6px 12px;
padding: 0;
}
#sidebar li {
list-style: none;
margin: 0;
padding: 0;
}

А вот главное преобразуем гораздо основательнее:

#globalnav {
height: 30px;
width: 700px;
margin: 0 0 0 12px;
padding: 0;
border: 0;
background: #eed;
}
#globalnavul#menu {
height: 30px;
width: 700px;
background: transparent;
margin: 0;
padding: 0;
}
#globalnav li {
margin: 0;
padding: 6px 10px;
display: block;
float: left;
list-style: none;
letter-spacing: 1px;
text-transform: uppercase;
border-right: solid #cc9 1px;
}

Рис. 5
Посмотреть пример страницы
Таблица стилей

В результате обычный ненумерованный список превращается в горизонтальное меню. А вся страница приобретает вполне законченный и профессиональный вид (Рис. 5)

Литература

1. Стандарт основного общего образования по информатике и информационным технологиям//Информатика и образование. 2004. № 4
2. Стандарт среднего (полного) общего образования по информатике и информационным технологиям//Информатика и образование. 2004. № 4
3. Спецификация HTML 4.01.
4. XHTML™ 1.0: Расширяемый Язык Гипертекстовой Разметки. Переформулирование HTML 4 в XML 1.0.
5. Спецификация CSS2.
6. ECMAScriptLanguageSpecification.
7. Document Object Model (DOM) Level 1 Specification.
8. ЗельдманДж.Web-дизайн по стандартам. М.: NT Press, 2005

В оформлении страницы-примера использованы элементы дизайна сайта www.zeldman.com, который я настоятельно рекомендую посетить всем, интересующимся web-дизайном.

http://webstandards.org.ru/blog/layout/web-standards.html