Кодирование HTML 5 Layout From Scratch

HTML5 __ и 1 | CSS3 только что прибыли (своего рода), а вместе с ними целый новый бой за ‘ лучшие markup’ трофей начался.

По правде говоря, все эти технологии являются лишь инструментами ждет квалифицированных разработчиков для работы над проектом права.Как разработчики мы shouldn’ т получить в бессмысленных дискуссиях которого разметки является лучшим.Все они ведут в никуда.Скорее, мы должны получить совершенно новую идеологию и изменить наши привычки кодирования, чтобы держать веб-accessible.

Хотя это правда, HTML5 и CSS3 находятся в стадии разработки и будет оставаться таким в течение некоторого времени, there’ нет причин, чтобы не начать его использовать Право now.В конце концов, time’ S доказала, что реализация незавершенного specifications работает и может быть легко ошибиться полным рекомендации W3C.That’ S были Прогрессивная Enhancement __ и 1 | Изящные Degradation вступят в play.

Итак, сегодня we’ Re собираюсь немного поэкспериментировать с этими новыми технологиями.В конце этой статьи you’ узнаете, как:

Использование изящные методы деградации и технологии, чтобы держать вещи в месте наследие browsers.
Использование прогрессивных методов и технологий повышения, чтобы быть в курсе последних trends.
Использование HTML5 вместе с ростом технологий:. Microformats
Иметь четкое представление о некоторых из наиболее интересных новых функций HTML5 и CSS3 будет bring.

It’ D быть хорошей идеей, чтобы читать в некоторых из этих статей Первое:

HTML5 и будущее Web которая учит самые основы HTML5, вводит новые элементы и объясняет некоторые из преимуществ новой разметки language.
HTML5 позволяет script который показывает метод, который позволяет HTML5 теги IE6 быть styled.
взаимопонимании aside где обычно понимают новые теги explained.

I’ будем также предполагаем, что вы знакомы с основами HTML и CSS.Включая все “ старые school” теги и основные селекторы и properties.

Прежде, чем мы begin…

There’ SA пару вещей, которые вы должны иметь в виду, прежде чем приключения на новой лодке разметки.HTML5 не для всех.Таким образом, вы должны быть мудрыми и выбрать, как и где его использовать.Подумайте обо всех вкусов разметки you’ ве получили доступны инструменты: использовать правильный выбор для правильной работы.Поэтому, если ваш сайт кодируется в совместимых стандартов XHTML strict there’ нет реальной необходимости для изменения HTML5.

There’ S также тот факт, что с помощью HTML5 код прямо сейчас ваш сайт застревает в какой-то “ limbo” поскольку даже если ваш браузер будет оказывать HTML5, это не понимает it до сих пор.Это может также применяться к другим программным обеспечением, таким как screenreaders и поиск engines.

В заключение необходимо учитывать, что HTML5 все еще находится в интенсивной разработке, и it’ Наверное, “ Самый open” проект W3C никогда не делал.С огромным количеством обратной связи и на всю шумиху вокруг него, текущий draft связано с изменением и it’ невозможно предсказать, как much.

Таким образом, если you’ Re готов сделать выключатель, не боятся использованием технологий, которые в ближайшем будущем будут более значимым и может легко изменить любой кусок кода, который может сломаться, а затем сохранить reading.

Слова на постепенное повышение и изящные Degradation

Так что эти два термина все? Изящные Degradation является широко используемым термином, который идеологии в основном с использованием новейших технологий, а затем исправить все, что нужно исправить для старых браузеров.Мы делаем это на ежедневной основе: большинство из нас код для Firefox, а затем исправить Internet Explorer.То есть плавное снижение в practice.

Прогрессивная Enhancement относится к привычке строительство первого на менее способных, устаревший браузер, а затем для повышения новейших технологий.Мы тоже использовать это на ежедневной основе.Например, в большинстве случаев мы кодируем сайта мы начинаем с разметки, а затем применить внешний файл CSS, где мы добавляем все стили.То есть постепенное повышение в practice.

Обе технологии обычно идут рука об руку и были частью пути мы делаем вещи в течение многих лет.It’ просто термины, которые не так хорошо известны.И теперь, как эти практики должны развиваться за счет новых языков, которые приближаются.Если вы хотите углубиться в обоих этих терминов, проверить соответствующую статью на accessites.org.

1.Design

Это будет образец макета we’ будете кодирования:

Очень основная схема блестяще именем Smashing HTML5 !, Которая охватывает большинство элементов, мы можем начать программировать с помощью HTML5.В основном: page’ имя и it’ слоган, меню, выделенный (Рекомендуемые) области, сообщение каталоге, раздел дополнений в некоторыевнешние ссылки, около окна и, наконец, авторское право statement.

2.Markup

Как очень основные начала нашей разметки, это наш скелет HTML файл:

 
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>Smashing HTML5!</title>
 
<link rel="stylesheet" href="css/main.css" type="text/css" />
 
<!--[if IE]>
	<script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script><![endif]-->
<!--[if lte IE 7]>
	<script src="js/IE8.js" type="text/javascript"></script><![endif]-->
<!--[if lt IE 7]>
 
	<link rel="stylesheet" type="text/css" media="all" href="css/ie6.css"/><![endif]-->
</head>
 
<body id="index" class="home">
</body>
</html>

Несколько основных моментов:

3 различных Условное comments для IE.Первая из них включает html5 shiv код непосредственно из Google Code для всех версий IE.Вторая включает в себя IE8.js для лучшей совместимости для IE7 и ниже, а также ie.css файл, который будет Sove IE7 и ниже CSS ошибок.Третью это просто файл CSS, чтобы исправить IE6 bugs.
Использование “ index” ID и “ home” класса на <body> тег.Это просто привычка I’ ве разработанных за последние годы, что упростила кодирования внутреннего сечения слишком сложным websites.
Упрощенная версия кодировки недвижимости для лучшей совместимости со старыми browsers.
I’ м с использованием XHTML 1.0 синтаксиса HTML5 документа.That’ ы, как я двигаюсь.It’ SA привычка, которая мне очень нравится и с Я все еще можете использовать it, я буду.Можно, однако, использовать нормальную HTML синтаксис.То есть, прописные атрибутов и названий тегов, незакрытые теги и без кавычек для упаковки attributes’ значения.It’ с до you.

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

Если бы мы имели рентгеновский аппарат предназначен для веб-сайтов, это будет нашим page’ скелет:

Smashing HTML5! template x-rayed

Header

Smashing HTML5! Header block

Макет заголовка так же просто, как оно получает.Новый <header> теги спецификации гласит:

В заголовке элемента представляет собой группу из вступительных или навигационных средств.

Таким образом, это больше, чем логика, которую мы используем это для разметки заголовка.We’ будем также использовать <nav> тег.Спецификация гласит:

nav элемент представляет раздел страницы, ссылки на другие страницы или в части в пределах страницы: раздел со ссылками навигации.Не все группы ссылок на странице должны быть в навигационный элемент — только разделы,состоят из основных блоков навигации подходят для навигационной element.

There’ SA много шума относительно спецификацию навигационных элементов, так как “ основной навигации blocks” не очень полезно описание.Но на этот раз we’ говорим о нашей главной навигации веб-сайта, он can’ т получить любой крупный, чем это.Так что через пару id’ S и классов нашего заголовка заканчивается так:

 
<header id="banner" class="body">
	<h1><a href="#">Smashing HTML5! <strong>HTML5 in the year <del>2022</del> <ins>2009</ins></strong></a></h1>
 
	<nav><ul>
		<li class="active"><a href="#">home</a></li>
		<li><a href="#">portfolio</a></li>
 
		<li><a href="#">blog</a></li>
		<li><a href="#">contact</a></li>
	</ul></nav>
 
</header><!-- /#banner -->

Layout’ Sbody

Smashing HTML5! Body block

Следующая наша document’ тело с, где весь контент будет.С этим блоком представляет универсальный документ section и секции тематическая группировка content, этот, без сомнения, <section> tag.

Для сообщений, we’ будем использовать старое <ol> теги поскольку, ну, it’ S упорядоченный список статей.Каждая <li> должны иметь <article> теги и в этом, we’ Придется <header> для Сообщение title, <footer> для Сообщение information и <div> для добавить content.Да, <div>.

Причина для использования дел проста: we’ будете использовать hAtom 0,1 Microformat и требует содержание записи, которая будет обернут элементом.Поскольку никаких других тегов относится к этому (это не раздел, это не полный текст статьи, это не подвал и т.д.) we’ буду использовать <div>, поскольку она не обеспечивает семантическое значение сама по себе и поддерживает разметкутак чисто, как possible.

С учетом всех этих тегов, и hAtom микроформат на месте, код должен выглядеть следующим образом:

 
<section id="content" class="body">
 
	<ol id="posts-list" class="hfeed">
 
		<li><article class="hentry">	
			<header>
				<h2 class="entry-title"><a href="#" rel="bookmark" title="Permalink to this POST TITLE">This be the title</a></h2>
			</header>
 
			<footer class="post-info">
				<abbr class="published" title="2005-10-10T14:07:00-07:00"><!-- YYYYMMDDThh:mm:ss+ZZZZ -->
					10th October 2005
				</abbr>
 
				<address class="vcard author">
					By <a class="url fn" href="#">Enrique Ramírez</a>
 
				</address>
			</footer><!-- /.post-info -->
 
			<div class="entry-content">
				<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque venenatis nunc vitae libero iaculis elementum. Nullam et justo <a href="#">non sapien</a> dapibus blandit nec et leo. Ut ut malesuada tellus.</p>
 
			</div><!-- /.entry-content -->
		</article></li>
		
		<li><article class="hentry">
			...
		</article></li>
 
		
		<li><article class="hentry">
			...
		</article></li>
	</ol><!-- /#posts-list -->
 
</section><!-- /#content -->

Для сильных: да, я не использовать <time> элемент.Этот тег является достаточно новым, и он не совместим с текущей microformat реализаций там.С I’ м Действительно, использование hAtom он сделал мало смысла иметь как недействительные микроформата и еще непонятная-тегов.Если you’ не используете микроформат, I’ D предлагаю использовать <time> instead.

Дополнительные block

Smashing HTML5! Extras block

Блок дополнительных еще один раздел нашего документа.Вы могли бы бороться за некоторое время принятия решения о <aside> или <section> теги было бы лучше для этого раздела.В конце концов, этот раздел не может быть рассматривать отдельно от основного content поскольку он содержит ссылки Blogroll и некоторые социальные информацию веб-сайта.Таким образом, <section> элемент более appropriate.

Здесь we’ также найдете другое применение для <div> тег.Для оформления потребности и grouping’ ради, мы можем добавить две дивы здесь: один для blogroll раздел и один для social section.

Для остальной части блока there’ S нечего решать.It’ с повседневной <ul> разместить набор ссылок на обеих секциях, которые, в конце концов, могут выглядеть следующим образом:

 
<section id="extras" class="body">
	<div class="blogroll">
		<h2>blogroll</h2>
		<ul>
 
			<li><a href="#" rel="external">HTML5 Doctor</a></li>
			<li><a href="#" rel="external">HTML5 Spec (working draft)</a></li>
			<li><a href="#" rel="external">Smashing Magazine</a></li>
 
			<li><a href="#" rel="external">W3C</a></li>
			<li><a href="#" rel="external">Wordpress</a></li>
			<li><a href="#" rel="external">Wikipedia</a></li>
 
			<li><a href="#" rel="external">HTML5 Doctor</a></li>
			<li><a href="#" rel="external">HTML5 Spec (working draft)</a></li>
			<li><a href="#" rel="external">Smashing Magazine</a></li>
 
			<li><a href="#" rel="external">W3C</a></li>
			<li><a href="#" rel="external">Wordpress</a></li>
			<li><a href="#" rel="external">Wikipedia</a></li>
 
			<li><a href="#" rel="external">HTML5 Doctor</a></li>
			<li><a href="#" rel="external">HTML5 Spec (working draft)</a></li>
			<li><a href="#" rel="external">Smashing Magazine</a></li>
 
			<li><a href="#" rel="external">W3C</a></li>
			<li><a href="#" rel="external">Wordpress</a></li>
			<li><a href="#" rel="external">Wikipedia</a></li>
 
		</ul>
	</div><!-- /.blogroll -->
 
	<div class="social">
		<h2>social</h2>
		<ul>
 
			<li><a href="http://delicious.com/enrique_ramirez" rel="me">delicious</a></li>
			<li><a href="http://digg.com/users/enriqueramirez" rel="me">digg</a></li>
			<li><a href="http://facebook.com/enrique.ramirez.velez" rel="me">facebook</a></li>
 
			<li><a href="http://www.lastfm.es/user/enrique-ramirez" rel="me">last.fm</a></li>
			<li><a href="http://website.com/feed/" rel="alternate">rss</a></li>
			<li><a href="http://twitter.com/enrique_ramirez" rel="me">twitter</a></li>
 
		</ul>
	</div><!-- /.social -->
</section><!-- /#extras -->

О и нижний колонтитулы blocks

Smashing HTML5! About and Footer blocks

Колонтитула не имеет реальных трудностей.We’ будем использовать новые <footer> тег, чтобы обернуть как о и информацию об авторском праве, так как спецификации гласит:

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

С чем ближе предков наших <footer> Тег <body> теги, больше, чем правой, чтобы обернуть элементы как здесь, так как we’ повторное добавление информации о website’. Владельца (и, следовательно, автор)

Для блока о we’ буду использовать <address> теги, которые содержит контактную информацию для it’ с ближайшими <article> или <body> элемент ancestor.We’ будем также использовать hCard Microformat повышения семантическое значение.Для информации об авторских правах we’ пойду с простыми <p> теги поэтому код заканчивается так:

 
<footer id="contentinfo" class="body">
	<address id="about" class="vcard body">
		<span class="primary">
			<strong><a href="#" class="fn url">Smashing Magazine</a></strong>
 
			<span class="role">Amazing Magazine</span>
		</span><!-- /.primary -->
		
		<img src="images/avatar.gif" alt="Smashing Magazine Logo" class="photo" />
		<span class="bio">Smashing Magazine is a website and blog that offers resources and advice to web developers and web designers. It was founded by Sven Lennartz and Vitaly Friedman.</span>
 
	</address><!-- /#about -->
	<p>2005-2009 <a href="http://smashingmagazine.com">Smashing Magazine</a>.</p>
</footer><!-- /#contentinfo -->

Подводя up

Итак, после всего этого беспорядка, полный код выглядит следующим образом:

<!DOCTYPE html>

<html lang="en">

<head>

<meta charset="utf-8" />

<title>Smashing HTML5!</title>
<link rel="stylesheet" href="css/main.css" type="text/css" />
<!--[if IE]>

	<script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script><![endif]-->

<!--[if lte IE 7]>

	<script src="js/IE8.js" type="text/javascript"></script><![endif]-->
<!--[if lt IE 7]>

	<link rel="stylesheet" type="text/css" media="all" href="css/ie6.css"/><![endif]-->

</head>
<body id="index" class="home">
<header id="banner" class="body">

	<h1><a href="#">Smashing HTML5! <strong>HTML5 in the year <del>2022</del> <ins>2009</ins></strong></a></h1>
	<nav><ul>

		<li class="active"><a href="#">home</a></li>

		<li><a href="#">portfolio</a></li>
		<li><a href="#">blog</a></li>

		<li><a href="#">contact</a></li>

	</ul></nav>
</header><!-- /#banner -->	
<aside id="featured" class="body"><article>

	<figure>

		<img src="images/temp/sm-logo.gif" alt="Smashing Magazine" />

	</figure>

	<hgroup>
		<h2>Featured Article</h2>

		<h3><a href="#">HTML5 in Smashing Magazine!</a></h3>

	</hgroup>

	<p>Discover how to use Graceful Degradation and Progressive Enhancement techniques to achieve an outstanding, cross-browser <a href="http://dev.w3.org/html5/spec/Overview.html" rel="external">HTML5</a> and <a href="http://www.w3.org/TR/css3-roadmap/" rel="external">CSS3</a> website today!</p>
</article></aside><!-- /#featured -->
<section id="content" class="body">

	<ol id="posts-list" class="hfeed">

		<li><article class="hentry">

			<header>

				<h2 class="entry-title"><a href="#" rel="bookmark" title="Permalink to this POST TITLE">This be the title</a></h2>
			</header>
			<footer class="post-info">

				<abbr class="published" title="2005-10-10T14:07:00-07:00"><!-- YYYYMMDDThh:mm:ss+ZZZZ -->

					10th October 2005

				</abbr>
				<address class="vcard author">
					By <a class="url fn" href="#">Enrique Ramírez</a>

				</address>

			</footer><!-- /.post-info -->
			<div class="entry-content">
				<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque venenatis nunc vitae libero iaculis elementum. Nullam et justo <a href="#">non sapien</a> dapibus blandit nec et leo. Ut ut malesuada tellus.</p>

			</div><!-- /.entry-content -->

		</article></li>
		<li><article class="hentry">

			...

		</article></li>
		<li><article class="hentry">

			...

		</article></li>
	</ol><!-- /#posts-list -->

</section><!-- /#content -->
<section id="extras" class="body">

	<div class="blogroll">

		<h2>blogroll</h2>
		<ul>

			<li><a href="#" rel="external">HTML5 Doctor</a></li>

			<li><a href="#" rel="external">HTML5 Spec (working draft)</a></li>
			<li><a href="#" rel="external">Smashing Magazine</a></li>

			<li><a href="#" rel="external">W3C</a></li>

			<li><a href="#" rel="external">Wordpress</a></li>
			<li><a href="#" rel="external">Wikipedia</a></li>

			<li><a href="#" rel="external">HTML5 Doctor</a></li>

			<li><a href="#" rel="external">HTML5 Spec (working draft)</a></li>
			<li><a href="#" rel="external">Smashing Magazine</a></li>

			<li><a href="#" rel="external">W3C</a></li>

			<li><a href="#" rel="external">Wordpress</a></li>
			<li><a href="#" rel="external">Wikipedia</a></li>

			<li><a href="#" rel="external">HTML5 Doctor</a></li>

			<li><a href="#" rel="external">HTML5 Spec (working draft)</a></li>
			<li><a href="#" rel="external">Smashing Magazine</a></li>

			<li><a href="#" rel="external">W3C</a></li>

			<li><a href="#" rel="external">Wordpress</a></li>
			<li><a href="#" rel="external">Wikipedia</a></li>

		</ul>

	</div><!-- /.blogroll -->
	<div class="social">
		<h2>social</h2>

		<ul>

			<li><a href="http://delicious.com/enrique_ramirez" rel="me">delicious</a></li& ... 

Если вы хотите прочитать полностью статью, посетите сайт наших спонсоров


 		
		
				
		
				
			  Главная   →  Программирование  → 04.08.2009  by  Newsbot

bot.kz — Новости IT