Вы находитесь здесь: Главная

HTML 5

Пора прощаться с time?

Автор: · Ваш отзыв 

Йен Хиксон, редактор спецификаций HTML5 собирается из HTML5 исключить элемент <time>. В этом случае всем кто в настоящее время использует <time>, а это такие популярные площадки как Github, Reddit и WordPress (дефолтная WP имеющая 2,6 млн инсталляций), и тем кто разрабатывает браузер Opera, придётся изменить <time> на <data> или убедить Хиксона изменить свое решение.

Хиксон напоминает, что у <time> существуют три постоянных способа использования.

  •  Наиболее удобное указание даты и времени в CSS.
  • Маркировка даты и времени публикации документов (к примеру, при экспорте в Atom).
  • Указание даты и времени в машиночитаемом виде при использовании в микроданных и микроформатах.

По мнению Хиксона <time> для первых двух случаев так и не стал популярным, а в третьем <data> намного удобнее.

Читать полностью

Ноябрь 2, 2011 · Метки: , , , , ,

Новости

Microsoft сделал ставку на Windows 8

Автор: · Ваш отзыв 


На ежегодной конференции Microsoft Build (которая была ранее известна, как PDC), было заявлено немало интересных разработок, однако, как и следовало ожидать, наибольшее внимание привлек долгожданный прототип ОС Windows 8. Точнее, все внимание было приковано к ее концептуально новому интерфейсу Metro, который, как самоуверенно считают разработчики, может составить серьезную конкуренцию популярным интерфейсам для Apple.

В Microsoft заверяют, что Metro является новейшим продуктом, оптимизированный специально под сенсорные дисплеи, который позволяет выполнять запуск самых популярных приложений “быстрее, выше, сильнее”. В Metro, как в интерфейсе нового поколения, вы не увидите древнего классического Windows-меню и других элементов рабочего стола – их заменили жесты и крупные значки, так называемые “плитки”.

Читать полностью

Октябрь 30, 2011 · Метки: , , , ,

HTML 5

Локальные хранилища HTML 5

Автор: · Отзывов (4) 


Проблема хранения информации на стороне пользователя давно терзала умы веб-разработчиков. Cookies, хоть и справлялись со своей задачей хранить небольшие объемы данных, все-таки не совсем удовлетворяют требованиям современных сайтов.

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

Обычный вариант хранения в памяти браузера тоже не всегда подходит, так как все данные теряются при перезагрузке страницы или закрытии браузера. К счастью, HTML5 дает нам готовый инструмент для реализации полноценного хранения данных на стороне пользователя – объект localStorage глобального объекта window.

Перед началом работы, конечно же, необходимо проверить поддержку локального хранилища браузером:

function supports_html5_storage() {
return (‘localStorage’ in window) &amp;&amp; window['localStorage'] !== null;
} Читать полностью

Октябрь 1, 2011 · Метки: , , , , , , ,

API

Текст в canvas в HTML 5

Автор: · Отзывов (3) 

Помимо геометрических фигур и картинок, тэг canvas так же может отобразить текст. Техника его размещения не похожа на привычную механику CSS – на холсте нет блоков, нет отступов и переносов. Все что можно сделать, это указать тексту несколько атрибутов и точку где все это отрисовать.

Да начала как обычно добавим и подключим сам холст:

<canvas id=”с” width=”300″ height=”225″></canvas>
…
var canvas = document.getElementById(“с”);
var context = canvas.getContext(“2d”);

Для шрифтов доступны следующие аргументы:

  • font – принимает строку со всеми стандартными настройками шрифтов CSS.
  • textAlign – задает выравнивание текста, по отношению к указанной точке. Может принимать значения start, end идентичные им left, right и center. По умолчанию строка начинается с заданных координат, что равносильно значению start.
  • textBaseline – вертикальное выравнивание, весьма запутанное и требующее дополнительных пояснений.

    • Читать полностью

Сентябрь 30, 2011 · Метки: , , , , , , ,

HTML 5

Градиенты в canvas

Автор: · Отзывов (2) 

Мы уже рассказывали, как рисовать в canvas простые и не очень фигуры и закрашивать их в однотонные цвета, теперь настал черед градиентов. Для начала создадим сам холст:

<canvas id=”d” width=”300″ height=”225″></canvas>

И подготовим его к наполнению через javascript:

var d_canvas = document.getElementById(“d”);
var context = d_canvas.getContext(“2d”);

Для того чтобы нарисовать градиент воспользуемся функцией createLinearGradient(x0, y0, x1, y1). Координаты x и y в ней задают точки, между которыми будет нарисован градиент.
var my_gradient = context.createLinearGradient(0, 0, 300, 0); Читать полностью

Сентябрь 29, 2011 · Метки:

HTML 5

Поля для ввода персональных данных и поиска

Автор: · Отзывов (3) 

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

Создать его также просто, как и любое другое текстовое поле, достаточно указать нужный тип:
<input type=”email” />

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

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

Сентябрь 28, 2011 · Метки: , , , , , , ,

HTML 5

Поле даты

Автор: · Отзывов (3) 

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

В HTML5 все это заменяет простое поле типа date, на которое распространяется автоматическая проверка корректности даты:
<input type=”date”>

В него можно вводить даты в формате год-месяц-день, но существуют и другие варианты:

  •   time – время в формате часы-минуты
  •  datetime – комбинация даты и времени
  • month – год и месяц
  • week – год и номер недели

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

Сентябрь 27, 2011 · Метки:

API

Числовые поля форм

Автор: · Отзывов (2) 

HTML5 добавил формам немало новых полей и одним из них стало специальное поле для ввода цифр. Создать его можно, так же как и любое другое, через атрибут type:
<input type=”number”>

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

Раньше предварительную проверку приходилось осуществлять при помощи javascript, но в HTML5 его можно заменить простыми атрибутами:

  • min и max – задают соответственно минимальное и максимальное значение которое может принимать поле. С помощью них можно легко отсеять заведомо неправильные, например отрицательные числа при вводе возраста или 32-ое число месяца.
  • step – шаг, с которым сменяются допустимые значения. Например, для примеров выше идеальным будет выставить шаг в 1, так как числа должны быть целыми, а для удобного ввода денежных сумм указать 0,01.
  • value, как нетрудно догадаться, указывает значение поля по умолчанию. Читать полностью

Сентябрь 26, 2011 · Метки: , , ,

API

Атрибут placeholder, кроссбраузерное решение

Автор: · Отзывов (2) 


HTML5 значительно расширил наш арсенал для работы с формами. Одним из его новых элементов стал атрибут placeholder тэга input, он добавляет в поле подсказку-пример, которая поможет пользователю правильно все заполнить. Его основным отличием от уже существующего атрибута value, кроме того, что placeholder не считается содержимым поля, является зависимость отображения подсказки от фокуса на поле.

При переводе курсора в поле, значение атрибута placeholder исчезает и возвращается, только если пользователь снимет фокусировку, так ничего и не заполнив. Подобного эффекта можно было добиться и раньше, используя javascript, но подобное можно сказать и об абсолютном большинстве нововведений HTML5. Теперь же для этого понадобится всего пара строк чистого HTML:

1
2
3
4
5

<form id="register_form">
<input type="text" placeholder="логин" name="name" required="required" /><br />
<input type="password" placeholder="пароль" name="password" /><br />
<input type="password" placeholder="подтвердить пароль" name="re_password" /><br />
</form>

Читать полностью

Сентябрь 19, 2011 · Метки:

Теги HTML 5

Video и canvas, часть 3. Продвинутая манипуляция пикселями

Автор: · 1 отзыв 

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

КОНВЕРТАЦИЯ ВИДЕО НАЛЕТУ В РЕЛЬЕФНОЕ ИЗОБРАЖЕНИЕ

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

А вот и сам код. HTML и большая часть начального кода не изменились с прошлых примеров, поэтому мы и пропустим и перейдем сразу к функции draw():

1
2

function draw(v,c,bc,cw,ch) {
if(v.paused || v.ended) return false;

Для начала, перенесем изображение на временный холст

1

bc.drawImage(v,0,0,cw,ch);

Извлекаем данные о пикселях из временного холста

1
2
3
4

var idata = bc.getImageData(0,0,cw,ch);
var data = idata.data;
var w = idata.width;
var limit = data.length

Перебираем каналы пикселей, выставляя им новые значения

1
2
3
4

for(var i = 0; i < limit; i++) {
if( i%4 == 3 ) continue;
data[i] = 127 + 2*data[i] - data[i + 4] - data[i +w*4];
}

Переносим пиксели на видимый холст

1
2
3
4

c.putImageData(idata,0,0);
// Вновь вызываем функцию для следующего кадра
setTimeout(draw,20,v,c,bc,cw,ch);
}

Читать полностью

Сентябрь 12, 2011 · Метки:

Следующая страница »