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

HTML5 и будущее веб-

__ Некоторые из них 1 | обнялись it, у некоторых есть отбрасывается it как слишком далеко в будущее, а в некоторых отказались неправильно friend в пользу старого пламени в стадии подготовки.Независимо стороне дискуссию you’ Re дальше, you’ нас, скорее всего, слышали все блоги болтовню окружающих “ новые hotness”, который HTML5.It’ S везде, it’ прихода, и вы хотите знать все, что вы можете до it’ Старая news.

Вещи, как JQuery плагинов, форматирование методы и тенденции дизайна меняются очень быстро по всему веб-сообществу.И по большей части we’ нас все признали, что некоторые из вещей, которые мы узнаем сегодня может быть устаревшим завтра, но that’ с природой нашего industry.

При поиске некоторых стабильности, мы, как правило, обращаются к самим кодом, как правило, остаются неизменными в течение длительного времени (условно говоря).Поэтому, когда что-то приходит и меняет наш код, it’ SA большое дело, и там собираются быть некоторые болезни роста we’ придется работать до конца.К счастью, по слухам, что у нас есть один меньше изменений беспокоиться about.

В этой статье I’ м, надеясь дать вам несколько советов и понимание HTML5, чтобы помочь облегчить боль неизбежна, который поставляется с переходом к несколько иной syntax.

Добро пожаловать в HTML5.

HTML5 logo

Каковы основы

DOCTYPE

Когда я впервые начал исследовать HTML5 несколько месяцев назад, одна из главных вещей, которые я пытался найти было DOCTYPE.Простая вещь, you’ D думаю, было бы везде, но после большого разочарования, я, наконец, нашел его похоронили в w3.org и вот оно: 

<!DOCTYPE html>

Мне было любопытно, почему они выбрали для “ html”, а не “ html5″, казалось, что логический способ сказать браузеру, что нынешний документ был написан в HTML5, и предложил хороший шаблон для будущего.Но я обнаружил, что <!DOCTYPE html5> триггеров Quirks Mode в IE6, и при принятии обратной совместимости во внимание <!DOCTYPE html>. Является очень хорошим выбором (на мой взгляд)

В целом, мне очень нравится новый DOCTYPE; it’ с небольшим, значимым, и, возможно, we’ будете на самом деле в состоянии запомнить эту наизусть и не иметь, чтобы вставить его с места на site.

Новые элементы вы должны know

На первый взгляд, с HTML5, новые элементы немедленно выскочить и команда внимание.W3C действительно слушали сообщества и запланированных на будущее, когда архитектурыОбилие новых элементов в наличии.У нас есть все, начиная от основных структурных элементов, как <header> и <footer> другим, как <canvas> и <audio>, которые наслаждаются, что, кажется, очень мощный API, который позволяет нам свободу для создания более удобных приложенийв то время как дальнейшее дистанцирование себя от опоры на флэш для сохранения данных и интенсивной animation.

Новые структурные elements
  • <header>В заголовке элемента содержит вводную информацию к разделу или странице.Это может включать что-нибудь от нашей обычной заголовки документов (брендинг информации) для всей таблица contents.
  • <nav>NAV элемента зарезервировано для части документа, которая содержит ссылки на другие страницы или ссылки на разделы той же странице.Не все группы ссылке необходимо, содержащиеся в < nav> элемент, просто первичных navigation.
  • <section>В разделе элемент представляет собой общего документа или приложения section.Он действует так же, <div> делает, отделяя от части document.
  • <article>В статье элемент представляет собой часть страницы, которая может стоять отдельно, такие как:. Блог, форум, запись, пользователь представили свои замечания или любые независимый пункт content
  • <aside>Помимо представляет содержание, связанное с основным направлением документа.Это обычно выражается в боковые панели, которые содержат элементы, такие как соответствующие должности, облака тегов и т.д. Они также могут быть использованы для тянуть quotes.
  • <footer>Колонтитул элемент для разметки нижнего колонтитула, а не только текущей страницы, но каждый раздел, содержащейся на странице.Таким образом, it’ очень вероятно, что you’ будете использовать < footer> элемент несколько раз в течение одного page.

Когда вы посмотрите на эти новые элементы, похоже, they’ повторно просто заменив наши общие идентификаторы DIV, и таким образом, it’ правда.Но, на рисунке ниже показано, что элементы, такие как <header> и <footer> могут использоваться более одного раза на одной странице, где они ведут себя скорее как классы и нормальным HTML элементы, которые можно использовать снова и снова, чтобы сохранить семантическую структуру.

HTML5 Structure Doc

Элементы, как < header> и < footer> не просто призваны представлять в верхней и нижней части текущего документа, но они также представляют собой <header> и <footer> каждого раздела документа, подобно тому, как мы используем<thead> и <tfoot> В данных tables.

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

Дальнейшее чтение на структурные HTML5

Упрощение перехода от XHTML

Несмотря на HTML 4.01, XHTML 1.0, & HTML5 все очень похожи есть некоторые небольшие различия синтаксиса, которые могут очень легко, проскользнуть мимо всех и недействительными код.Имея это в виду, HTML5 имеет несколько встроенных “ slack” сделать переход немного easier.

Например, при разметке формы в HTML5, это правильный синтаксис для элементов ввода текста: 

<input type="text" id="name">

Но это также признается действительным кодом в попытке облегчить боль для заядлых кодеров XHTML (как и я), которые используются для самозакрывания элементов: 

<input type="text" id="name"/>

Те же правила применяются к <meta> и другие элементы самостоятельного закрытия.Наследие элементы, такие как <b> и <i> Были также оставили на помощь тех, кто прибывает из более HTML 4.01.l

Каковы преимущества

С любой новой технологии там должен быть выгода; иначе зачем бы вы его используете?Если ваш старый код работает так же хорошо и эффективно, как новый код there’ нет причин для обновления.Нет причины, поверьте мне, я checked.

К счастью HTML5 является packed с набором новых интересных функций, код для похудения техники и много вещей я бы назвал очень большой benefits.Большинство из которых круг вокруг новых API-интерфейсов и DOM tree.

Расширение API

Наиболее очевидным преимуществом встроенных в HTML5 является неоднократным APIs и возможности, которые она открывает для будущего веб-приложений с помощью Святого Грааля кэша приложений и capabilities.Google Gears дал нам форума хранения данных и флэш познакомил нас с силой кэша приложений (Pandora использует его, чтобы сохранить ваши регистрационные данные).С HTML5, теперь эти возможности доступны для использования в самом языке и может быть легко расширена с JavaScript.

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

HTML5 API

Offline данных Storage

Крутой части о HTML5, безусловно, свои возможности форума.Такие программы, как Thunderbird и Outlook (иТеперь GMail в определенной степени) позволит вам просматривать ваши старые данные во время пребывания в автономном режиме.С HTML5, you’ Придется этом же функциональность, но в браузере.Это первый серьезный шаг на пути к преодолению разрыва между рабочим столом и в Интернете, и открывает все виды дверей для будущих веб-apps.

W3C принял лучших частей из различных веб-технологий и покатился их, то, что называют самым мощным языком разметки для date.

Некоторые другие из HTML5 APIs
  • Drag & DropПеретаскивания API определяет на основе событий перетаскивания системы.Тем не менее, он никогда не определяет, какие “ сопротивления и drop” есть.Этот API требует JavaScript, чтобы полноценно работать, как обычно думают перетаскивания functionality.
  • Video & AudioАудио & видео API, массивные вложения в модернизацию средств массовой информации.Хотя поддержка ограничена прямо сейчас, то, как вложение видео никогда не было проще: 

    <video width="400" height="360" src="vid.mp4">
  • GeolocationГеографическое положение является весьма прохладно API доступно в HTML5.Ее объект может быть использован для программного определения информации о местоположении через device’ с агентом пользователя (намек намек: мобильные устройства).
Дополнительная информация на HTML5 API

Где я могу его использовать

Даже с очень ограниченной поддержкой HTML5, веб-слишком прогрессивным, чтобы не создавать среду тестирования для нас, чтобы поиграть.В настоящее время, Safari является нашим лучшим тестирование платформы, так как она поддерживает большинство новых элементов и API.Конечно, это может измениться в любое время и так держать глаз на Opera, Chrome и Firefox как well.

Как правило, вы можете подумать, так как Safari представляет собой браузер Webkit, по умолчанию, все Webkit браузеры будут поддерживать те же элементы, к сожалению, это isn’ T дела.Хотя многие функции HTML5 are поддерживается через борт в браузерах Webkit, есть некоторые, такие как <video>, которые являются not.

Мобильные devices

Чтобы эффективно использовать HTML5 прямо сейчас, мы должны быть в состоянии контроль environment, в которых она используется.С поддержкой не так широко, как we’ D, как это doesn’ т сделать реальный смысл для того, чтобы быть в значительной степени использован, если, конечно, мы можем заблокировать использование определенных платформ, которые …

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

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

Comments are closed.