Пошлый resources html. Ресурсы

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

Что такое HTML5?

На первый взгляд HTML5 - это всего лишь новая версия языка разметки. Однако сейчас под этим термином подразумевают несколько иное. Рассматривать HTML5 без упоминания того же CSS3 просто нелепо, поскольку для разработки действительно современных web-приложений без него никак не обойтись. Нельзя забывать и о JavaScript. С его помощью реализуется обращение к богатому API, описанному в стандарте HTML5. Резюмируя все вышесказанное, напрашивается определение: HTML5 - это совокупность современных технологий/стандартов (JS, HTML5, CSS3 и так далее), применяемых для разработки web-приложений.

Капелька истории

HTML5 появился отнюдь не внезапно. Его разработка началась еще в 2007 году. За процесс работки отвечала специально созданная группа от консорциума W3C. Но многие возможности HTML5 были придуманы еще в рамках стандарта Web Application 1.0, а над ним корпели аж с 2004 года. Так что в реальности HTML5 не такая уж и юная технология, как может показаться на первый взгляд.

Первая черновая версия спецификации HTML5 стала доступна уже 22 января 2008 года. Прошло три года, но окончательная версия спецификации так и не готова и вряд ли поспеет в ближайшие годдва. Этот печальный момент обязывает разработчиков аккуратно применять новые возможности в своих проектах. Спецификация может запросто поменяться, да и не все современные браузеры (FireFox 4, Google Chrome 10, IE9, Opera 11) в полной мере поддерживают новые возможности.

Полезные рецепты

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

Рецепт №1: Включаем Drag&Drop на полную

Одной из приятных няшек (наверное, зря ты употребил столько энергетиков, ведь тут должно быть слово «фишек» - прим. ред.) HTML5 стала возможность применения File API и Drag and Drop API.

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

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

А ведь технология Drag&Drop применяется в системе сплошь и рядом. Мне лично всегда хотелось просто выделить нужные файлы и легким взмахом крысы кинуть на страницу. Это куда удобней, чем рыскать в поисках файла при помощи стандартного диалога.

HTML5 внес свои коррективы, и теперь ничто не мешает организовать полноценный Drag&Drop для передачи файла на страницу. Первыми эту фичу реализовали гугловчане в Gmail. Если ты пользуешься гмылом, то наверняка давно заметил область, на которую можно перетащить файлы для приаттачивания к письму. Лично я активно пользуюсь этой функцией и сейчас покажу тебе, как замутить такую же для своего проекта. Наш проект будет состоять из трех файлов: sample.html, style.css и scripts.js. Мы, конечно, могли бы ограничиться и одним html-файлом, но тогда код получился бы нечитабельным. Не нужно мешать HTML с JS или CSS. Лучше все разбить по файлам, и потом спокойненько с ними работать. Первым делом подготовим структуру нашего приложения. Создавай файл sample.html и напиши в нем:




media="all" href="style.css" />



Тащи свои файлы сюда



Для удобства написания кода на JavaScript я подключил библиотеку jquery. После этого описал структуру будущего html-документа. Она проста до безобразия - нам требуется описать поле, на которое пользователь должен перетягивать файлы. Для этого необходим лишь один div-контейнер. Если сейчас открыть страницу в браузере, то ничего хорошего ты не увидишь. Чтобы наше поле стало заметным визуально, требуется его оформить при помощи CSS. Открываем файл style.css и пишем в него следующий код:

#box {
width: 500px;
height: 300px;
border: 2px dashed #000000;
background-color: #FCFFB2;
text-align: center;
color: #3D91FF;
font-size: 2em;
font-family: Verdana, sans-serif;

Moz-border-radius: 8px;
-webkit-border-radius: 8px;
}
#label {
position: relative;
top: 2%;
}

Идентификатор «box» - это и есть наш будущий контейнер для приема файлов (на эту область пользователь должен перетаскивать документы). Чтобы юзер не промахнулся, я делаю область побольше и в качестве варианта обрамления выбираю dashed - пунктирные линии. Обычные пунктирные линии смотрятся не очень, поэтому я сразу задаю значения для свойств: -moz-border-radius и -webkitborderradius. Вот сейчас ты можешь открыть созданную страницу в браузере и оценить общий вид.

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

$(document).ready(function() {

//Добавляем обработчики событий

Var mybox = document.getElementById("box")

Mybox.addEventListener("dragenter", dragEnter, false);

Mybox.addEventListener("dragexit", dragExit, false);

Mybox.addEventListener("dragover", dragOver, false);

Mybox.addEventListener("drop", drop, false);
});
function dragEnter(evt) {

Evt.stopPropagation();

Evt.preventDefault();
}
function dragExit(evt) {

Evt.stopPropagation();

Evt.preventDefault();
}
function dragOver(evt) {

Evt.stopPropagation();

Evt.preventDefault();
}
function drop(evt) {

Evt.stopPropagation();

Evt.preventDefault();

Var files = evt.dataTransfer.files;

Var count = files.length;

If (count > 0)

HandleFiles(files);
}
function handleFiles(fi les) {

//Берем первый файл

//Если требуется работать с несколькими

//файлами, то здесь нужно организовать перебор

Var file = files;

Document.getElementById("label").innerHTML =
"Поймал: " + file.name;

Var reader = new FileReader();

Reader.onprogress = handleReaderProgress;

Reader.readAsDataURL(file);
}
function handleReaderProgress(evt) {

If (evt.lengthComputable) {

If (evt.loaded = evt.total) {

Alert("Загружен...");
}
}
}

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

В ней я преднамеренно обращаюсь к самому первому файлу (files) и начинаю с ним работать. Учти, пользователь может перетащить за раз сразу несколько файлов. Если твое приложение должно уметь обрабатывать такие ситуации, то организуем перебор всего массива files. В функции handleFiles() происходит все самое интересное.

Сначала я вывожу в элемент label (помнишь надпись «Тащи свои файлы сюда»?) имя файла, который пользователь перетянул на активную область, а затем начинаю его считывать при помощи объекта типа FileReader(). Подробней про него можно почитать в этой статье: html5rocks.com/tutorials/file/dndfiles . На всякий случай я определяю обработчик события onProgress для объекта типа FileReader(). Это событие будет вызываться каждый раз, когда произойдет считывание порции данных. В самом обработчике я выставил условие: если объем загруженных данных равен размеру файла, значит, считывание успешно завершено, и можно выводить радостное сообщение.

Рецепт №2: Пей пиво, смотри видео, слушай рок

До появления HTML5 просмотр видео в web’е осуществлялся при помощи всевозможных flash-плееров. Нельзя сказать, что просмотр видео этим способом неудобен. Проблемы есть разве что в безопас ности (в последнее время Flash Player просто кишит уязвимостями) и необходимости установки самого плагина. Стандарт HTML5 предлагает элегантное решение - встроенная возможность проигрывания видео- и аудио-контента.

Наверное, многие уже догадались, что я говорю о тегах