HTML5 и CSS3 — начнём верстать. Часть 2

Из серии статей «HTML5 и CSS3 – наступает время пользоваться»

Продолжение статьи HTML5 и CSS3 — начнём верстать. Часть 1

“Новый” элемент разметки <canvas>

С появлением стандарта HTML5 и соответствующего API браузеров, стало возможным широко использовать области для программной отрисовки различных элементов.

Добавим и себе на страницу такой элемент. Всё что нам нужно — это элемент section, в котором у нас будет расположен canvas и текст на случай если у пользователя будут проблемы с браузером. Смотрите Листинг №4. Этот код вам нужно будет поместить после закрывающего тега </article>.

Листинг 4. Элемент <canvas> на странице

<section class="withCanvas">
	<header>
		<h2>Узоры на 2D канве</h2>
	</header>
	<div>
		<canvas id="housesPlan"></canvas>
		<div id="no-canvas">
			<p>Вам необходим браузер поддерживающий канву!</p>
		</div>
	</div>
</section>

У некоторых браузеров расходятся взгляды на канву. Одни разрешают помещать элементы внутрь канвы, другие — нет. Чтобы не наткнуться на непонимание, сделаем канву без элементов. Для удобства при программировании, мы дали канве идентификатор.

Переходим к рисованию, этим у нас будет заниматься javascript-код. Для получения красивого HTML-кода мы разместим наш скрипт в отдельном файле и подключим его в заголовке документа. В Листинге №5 показано это подключение.

Листинг 5. Добавление скрипта к документу (подсвечено)

<head>
	<meta charset="utf-8" />
	<title>Инвесторы видят перспективу</title>
	<link rel="stylesheet" href="style.css" />
	<script type="text/javascript" src="script.js"></script>
</head>

Далее напишем в нашем скрипте пару функций, для изображения упрощённого плана комнаты. Одна функция будет проверять можно ли рисовать на канве, вторая собственно — рисовать. В файле script.js напишите следующий код, представленный в Листинге №6.

Листинг 6. Скрипт для рисования на канве элемента

function loadCanvas() {
	var canvas = document.getElementById('housesPlan');
	if(!canvas.getContext('2d')) {
		document.getElementById('housesPlan').style.display = 'none';
		document.getElementById('no-canvas').style.display = 'block';
		return;
	}
	canvas.width = 480;
	canvas.height = 320;
	drawPlan(canvas);
}

function drawPlan(canvas) {
	var ctx = canvas.getContext('2d');
	ctx.fillStyle = '#00f'; // blue
	ctx.strokeStyle = '#f00'; // red
	ctx.lineWidth = 4;

	// стены комнаты
	ctx.strokeRect(12, 12, 456, 296);
	ctx.strokeRect(20, 20, 440, 280);

	// дверь
	ctx.strokeRect(12, 180, 8, 80);
	ctx.beginPath();
	ctx.moveTo(20, 260);
	ctx.lineTo(80, 200);
	ctx.stroke();

	// окно
	ctx.strokeRect(460, 100, 8, 120);
	ctx.lineWidth = 1;
	ctx.beginPath();
	ctx.moveTo(464, 102);
	ctx.lineTo(464, 220);
	ctx.stroke();
	ctx.lineWidth = 4;

	// диван
	ctx.fillRect(180, 200, 220, 90);
	ctx.strokeRect(180, 200, 16, 90);
	ctx.strokeRect(384, 200, 16, 90);
	ctx.strokeRect(196, 266, 188, 24);

	// TV
	ctx.beginPath();
	ctx.moveTo(200, 40);
	ctx.lineTo(210, 30);
	ctx.lineTo(360, 30);
	ctx.lineTo(370, 40);
	ctx.fill();
	ctx.stroke();

	// стол
	ctx.beginPath();
	ctx.arc(80, 80, 50, 0, 90, false);
	ctx.fill();
	ctx.stroke();
}

Чтобы это всё было нарисовано при загрузки страницы, добавьте вызов функции loadCanvas() в соответствующем обработчике события. Для этого нужно добавить атрибут onload в тег боди, это будет выглядеть так:
<body onload="loadCanvas()">
Перейдём к скрипту. Первая функция дословно делает следующее:
— создаётся переменная canvas. Она принимает значение, которое возвращает функция getElementById(), здесь всё ясно из названия функции и переменной;
— если мы не сможем получить возможность делать двухмерные рисунки, то нам придётся скрыть элемент канву, и показать текст с предупреждением — пользуйтесь кошерными браузерами;
— выставим ширину и высоту, такие же как и у реального элемента, иначе получим не то, что хотим — увеличенное изображение или уменьшенное;
— далее мы позовём функцию, которая нарисует на канве план комнаты.

Вызванная функция делает следующее:
— получает доступ к двухмерному рисованию;
— определяет стиль заливки контуров (здесь только цвет, хотя может быть указан градиент или текстура);
— задаёт цвет контуров;
— толщину линии контура;
это конечно не всё, далее идут куча функций, которые собственно и занимаются рисованием, их рассмотрим отдельно.

Отметим, что нулевые координаты на канве находятся в её верхнем левом углу. Горизонтальная координата X увеличивается вправо, вертикальная координата Y увеличивается вниз.

strokeRect(x, y, w, h) — рисует контур прямоугольника линией, толщину и цвет которой мы задали ранее, ей нужны — координата верхнего левого угла фигуры — x и y, а также ширина и высота w и h;
fillRect(x, y, w, h) — тоже, что и для предыдущей функции, только прямоугольник оказывается без контура, зато с заливкой, стиль которой мы определили ранее (если ранее ничего не указывали, то он будет чёрным);
beginPath() — определяет начало рисования некоторой линии, если её не вызвать, то все точки, которые вы будете определять в программе будут соединены одной линией;
moveTo(x, y) — представьте, что у вас карандаш, вы ещё не определились откуда начать рисовать, эта функция укажет координаты x и y, куда нужно поставить карандаш;
lineTo(x, y) — этой функцией будет проведена линия от текущего положения карандаша до точки (x;y);
arc(x, y, r, a1, a2, acw) — эта функция поможет вам нарисовать часть окружности, центр которой расположен в точке (x;y), радиусом r, начиная от угла a1 и заканчивая a2. Если последнему параметру acw (против часовой стрелки) вы укажите true, то вы начертите окружность или её часть против часовой стрелки (углы указываются в радианах, 180 градусов — это 3.141592 радиан);
stroke() — после того, как вы вызвали нужные функции для рисования линий и окружностей, эта функция собственно и нарисует линию на канве;
fill() — данная функция сделает заливку на канве той области, которую вы очертили.

Сделаем небольшое оформление канвы. Следующие правила позволят сделать её ещё более привлекательной. Всё что нам нужно, это добавить правила из Листинга №7, в конец файла styles.css.

Листинг 7. CSS правила для канвы

section.withCanvas {
	margin-top: 25px;
	text-align: center;
}

#no-canvas {
	display: none;
}

canvas {
	width: 480px;
	height: 320px;
	-moz-border-radius: 6px 0 0 0;
	-webkit-border-radius:6px 0 0 0;
	border-radius: 6px 0 0 0;
	box-shadow: 3px 3px 5px 2px #FFAA88;
}

После того, как вы обновите свою страничку в браузере, её нижняя часть должна выглядеть так, как изображено на Рисунок №2.

Рисунок 2. План на канве

Примечание:

Для того, чтобы вы не остались без дела, дорисуйте, пожалуйста, подоконник для окна и коврик посреди комнаты.
То, что у вас получилось, а также свои вопросы — пишите в комментариях.

Далее, вы познакомитесь с элементом <video> и тем, как его использовать.

Элемент <video> — новые возможности

Способ добавления видео на страницу стал похож на добавление картинки. Вы указываете нужный тег для видео — это <video>; указываете ему немного параметров; и вот уже ваше видео на веб-страничке. Некоторые параметры в точности такие как и для картинки — src ожидает от вас URL видеофайла, width и height определяют ширину и высоту плеера для воспроизведения видео, однако, вам не нужно указывать единицы измерения. То есть, если вы заказываете ширину плеера шестьсот точек, то пишем так width="600".

Существуют нюансы на счёт формата видео файлов. Например, файлы ogg, закодированные кодеком Theora, спокойно воспроизводятся в браузерах Firefox и Google Chrome, однако, в браузере Safari вас ждёт разочарование. Если вы возьмёте такой популярный формат файлов как mp4, в котором видео сжато кодеком H264, то в Firefox он не пойдёт, Opera с ним будет притормаживать, а вот Chrome и Safari скушают его и не подавятся.

Возьмём какой-нибудь трейлер, например, "Пираты карибского моря — 4". Вы можете выбрать любой другой. У нас будет ссылка на файл в формате mp4, мы укажем плееру именно его.

Для элемента плеера мы добавим атрибуты, которые включат у него дополнительные опции:
— автоматическое проигрывание autoplay позволит запустить видео сразу после загрузки страницы;
— элементы управления controls дадут возможность управлять показываемым видео.
Давайте воплотим в коде то, что мы сейчас перечислили. Он показан в Листинге №8. Это будет ещё одна секция, в которой разместим заголовок и элемент с видео.

Листинг 8. Добавление видео на страницу

<section>
	<header>
		<h1>Сбор рогов и копыт</h1>
	</header>
	<video
		src="http://tr.kinopoisk.ru/427076/kinopoisk.ru-Pirates-Caribbean-4-On-Stranger-Tides-57654.mp4"
		width="600" controls autoplay>
		<div class="noVideo">
			<p>Это видео можно просматривать в Chrome или Opera.</p>
		</div>
	</video>
</section>

Секция создаётся для того, чтобы клипу было уютно на странице, да и структуру надо выдерживать, чтобы всё было прозрачно. Для видео также создаётся заголовок. Кроме того, внутри контейнера <video> есть элемент с текстом. Он потребуется, в случае, когда пользовательский браузер не поддерживает элемент <video> или не поддерживает кодек загружаемого видео. У этого элемента задан класс noVideo.
Чтобы всё это выглядело культурно, давайте добавим несколько правил в таблицы стилей. Код, показанный в Листинге №9, нужно разместить в нашем файле стилей style.css в конце.

В листинге 9. CSS правила для раздела видео

section video {
	box-shadow: 3px 3px 5px 2px #FFAA88;
}
.noVideo {
	color:red;
}

Эти правила отбросят тень от нашего плеера и выделят ошибку красным цветом, если браузер окажется не в состоянии поддерживать нужный кодек или тег. Браузер Chrome воспроизводит видео замечательно, во всяком случае лучше чем Opera. А вот наш Firefox совсем отказался показывать трейлер, видимо он действительно не хочет поддерживать mp4.
В Chrome на нашей странице видеоплеер выглядит так, как показано на Рисунке №3.

Рисунок 3. HTML5 помогает смотреть трейлер фильма

Если открыть страницу в каком-нибудь старом браузере, то можно увидеть сообщение об ошибке. Например, такое как это, изображённое на Рисунке №4.

Рисунок 4. Нет поддержки видео HTML5 — ошибка

Да, получается намного удобнее — не нужно скачивать дополнительные файлы плеера и подключать их к своему веб-приложению.

Обновлённые Веб-формы

Девиз веб-разработчиков приложений на HTML5 "Легче лёгкого". Формы теперь делаются быстрее, не нужно добавлять javascript для проверок на корректность и делать анимацию трекера. Новые типы элементов не будут смущать вас тем, что они новые. Если браузер ещё не знает HTML5, то ваш элемент будет выглядеть как простая строка редактирования.

Мы рассмотрим поля для ввода адреса электронной почты, телефона, даты и адреса сайта.
Расширьте вашу страничку кодом из Листинга №10. Разместите код сразу после секции с трейлером.

Листинг 10. Веб-форма

<section>
	<header>
		<h1>Свяжитесь с нами</h1>
		<h2>Ваши данные</h2>
	</header>
	<form>
		<label for="cust_email">E-mail:</label>
		<input type="email" id="cust_email" placeholder="Введите ваш email" autofocus="autofocus"><br />            
		<label for="cust_site">URL вашего сайта:</label>
		<input type="url" id="cust_site" placeholder="Введите URL вашего сайта"><br />
		<label for="cust_phone">Тел.:</label>
		<input type="tel" id="cust_phone" placeholder="Введите телефонный номер"><br />
		<label for="cust_birthday">Дата вашего рождения:</label>
		<input type="datetime" id="cust_birthday"><br />
		<label for="cust_priority">Важность для вас:</label>
		<input type="range" min="1" max="10" value="5" id="cust_priority"><br /><br />
		<input type="submit" value="Связаться">
	</form>
</section>

Добавим немного красок. Чтобы все эти элементы были расположены удобно, добавьте к файлу style.css следующий код, показанный в Листинге №11.

Листинг 11. Оформим форму

section form {
	border: 1px solid #887;
	-moz-border-radius: 10px;
	-webkit-border-radius: 10px;
	border-radius: 10px;    
	-moz-box-shadow: 10px 10px 5px #887;
	-webkit-box-shadow: 10px 10px 5px #887;
	box-shadow: 10px 10px 5px #887;
	background-color: #eed;
	padding: 10px; margin-bottom: 25px;
}

section label {
	font-weight: bold; font-size: 12px;
}

section input {
	margin-bottom: 3px; font-size: 12px;
}

Вы можете удивиться: "Откуда взялся текст внутри управляющих элементов?". Это одна из фишек HTML5 — мы его определяли через атрибуты, создавая форму. Кроме того, фокус ввода автоматически оказался в первой строке ввода — email. Это оказалось возможным, за счёт атрибута autofocus.
Когда вы откроете свою страничку в браузере, желательно в Chrome, вы увидите, что все элементы имеют соответствующие особенности, это изображено на Рисунке №5.

Рисунок 5. Новые компоненты формы

Если вы откроете в Firefox, то предпоследний элемент будет выглядеть как простая строка ввода, да и день рождения будет неудобно записывать. В Opera всё это выглядит более презентабельно. Особенно компонент для выбора даты.

И что в результате?

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

А пока у нас есть ещё время и мы можем поупражняться в разметке и стилях.

Добавьте себе на страницу ещё одну секцию, и реализуйте в ней то, что изображено на Рисунке №6.

Рисунок 6. Образец для подражания

Обратите внимание — фоновый узор сделан с помощью javascript и канвы.

Свои впечатления о проделанной работе, а также вопросы можете оставлять как комментарии к данной статье, мы обязательно ответим.

Понравилась статья? Посоветуйте другу

Количество коментариев: 5

  1. Денис

    loadCanvas() не понял как вызвать?

    • Дмитрий Артанов Дмитрий Артанов

      Денис, спасибо за комментарий — код был скрыт. Сейчас подправил.

  2. Спасибо за такой отличный пост — хоть и искал информацию о CSS но сейчас вижу, что javascript тоже надо подучить, имхо много полезного он дает.

  3. СЕРГЕЙ

    В оригинале статьи:
    «Добавим немного красок. Чтобы все эти элементы были расположены удобно, добавьте к файлу script.css следующий код, показанный в Листинге №11.»
    Надо:
    «Добавим немного красок. Чтобы все эти элементы были расположены удобно, добавьте к файлу styles.css следующий код, показанный в Листинге №11.»

Добавить комментарий



[ Ctrl + Enter ]