.wpal » javascript http://blog.web2.com.ua web, programming and linux Fri, 20 May 2011 13:29:04 +0000 en hourly 1 http://wordpress.org/?v=3.1.2 one.web2.com.ua – ускорение закрузки http://blog.web2.com.ua/2011/01/26/one-web2-com-ua-uskorenie-zakruzki/ http://blog.web2.com.ua/2011/01/26/one-web2-com-ua-uskorenie-zakruzki/#comments Wed, 26 Jan 2011 10:06:23 +0000 wert2all http://blog.web2.com.ua/?p=1076 На днях решил написать парочку целей для Ant’а, а на чём же пробовать и тестировать, как не на своих проектиках. В качестве полигона взял свой one.web2.com.ua и описал систему сборки для этого проекта. Теперь сайт должен грузится быстро и все изменения в стилях будут применяться автоматом. Что же я опритимизировал:

  1. Все стили CSS собираются в один файл и сжимаются yuicompressor.
  2. Все Javascript-файлы собираются в один и тем же жжымаются.
  3. Все библиотеки Javascript ( jQuery, jQuery UI ) просто собираются в один файл и будут перегружаться только, когда будут обновлены, а не при каждой сборке.
  4. Zend Framefork файлы собираются в один и только нужные классы. Как я это сделал, напишу попозже.
  5. Все классы моего фреймворка тоже, как и ZF, собираются в одном файле. Так как one.web2.com.ua состоит с одного контроллера, то он тоже склеен. Как вывод, подключаются только 2 файла PHP.
  6. Когда меняю что-то в стилях, это сразу применяется на сайте, потому что система применяет трюк с версиями ;)

Проверил и, по субъективному мнению, грузится просто реактивно! Осталось что-то сделать с CKEditor, но это в другой раз.

]]> http://blog.web2.com.ua/2011/01/26/one-web2-com-ua-uskorenie-zakruzki/feed/ 0 Перевод: 25 возможностей, подсказок и техник HTML5 которые вы должны знать http://blog.web2.com.ua/2010/10/22/perevod-25-vozmozhnostej-podskazok-i-texnik-html5-kotorye-vy-dolzhny-znat/ http://blog.web2.com.ua/2010/10/22/perevod-25-vozmozhnostej-podskazok-i-texnik-html5-kotorye-vy-dolzhny-znat/#comments Fri, 22 Oct 2010 07:54:58 +0000 wert2all http://blog.web2.com.ua/?p=997 Перевод статьи “28 HTML5 Features, Tips, and Techniques you Must Know“.

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

1. Новый Doctype

Всё ещё используете этот надоедливый, не запоминаемый XHTML doctype?

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
        "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

Если это так, то почему? Переходите на новый HTML5 doctype. Вы будете жить долго , как бы сказал Douglas Quaid.

<!DOCTYPE html>

На самом деле, Вы знаете, что это даже не столь важно для HTML5? Тем не менее, он используется в текущих и старых браузерах, которые требуют указания doctype. Браузеры, которые не понимают этот doctype будут просто прорисовывать содержание разметки в стандартном режиме. По этому, не стоит беспокоится, а просто принять новый doctype.

2. Елемент Figure

Рассмотрим разметку для рисунка:

<img src="path/to/image" alt="About image" />
<p>Image of Mars. </p>

К сожалению, нет легкого и семантического пути для указания подписи к рисунку, которая завёрнута в тэг <p>. В HTML5 это исправлено с помощью элемента <figure>. В сочетании с тэгом <figcaption>, мы можем семантически ассоциировать подписи соответственным рисункам.

<figure>
        <img src="path/to/image" alt="About image" />
        <figcaption>
                <p>This is an image of something interesting. </p>
        </figcaption>
</figure>

3. <small> переопределен

Не так давно я использовал <small> для создания подзаголовков, которые тесно связаны с логотипом. Это полезный презентационный элемент; тем не менее, теперь это будет не корректным использованием. Элемент small был переопределён, отныне более уместен он для указания мелкого шрифта. Более корректно, согласно новому определению HTML5, его использовать для обрамления информации о авторских правах в футтере вашего сайта.

Элемент small теперь означает «маленький шрифт».

4. Никаких Type для Script и Link

Вы, возможно, всё ещё добавляете атрибут type к тэгам link и script.

<link rel="stylesheet" href="path/to/stylesheet.css" type="text/css" />
<script type="text/javascript" src="path/to/script.js"></script>

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

<link rel="stylesheet" href="path/to/stylesheet.css" />
<script src="path/to/script.js"></script>

5. To Quote or Not to Quote

…Вот в чём вопрос. Помните же, что HTML5 не XHTML. Вы не должны оборачивать ваши атрибуты в кавычки, если вы это не хотите. Вы можете не закрывать тэги. Что уж говорить, нет ничего плохого в этом, коль вам так комфортнее. Как по мне, то это хорошо.

<p id=someId> Start the reactor.

Можете думать иначе. Если вы предпочитаете более структурированные документы, то можете лепить эти кавычки.

6. Делайте Ваш контент редактируемым

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

<!DOCTYPE html>

<html lang="en">
<head>
        <meta charset="utf-8">
        <title>untitled</title>
</head>
<body>
        <h2> To-Do List </h2>
     <ul contenteditable="true">
                <li> Break mechanical cab driver. </li>
                <li> Drive to abandoned factory
                <li> Watch video of self </li>
         </ul>
</body>
</html>

Или, как мы уже знаем с предыдущей подсказки, мы можем написать так:

<ul contenteditable=true>

7. Email Inputs

Если указать в атрибуте type значение “email” в поле формы, мы укажем браузеру, что значение поля может быть только правильным адресом электронной почты. Всё правильно: скоро будет встроенная валидация форм! Мы не можем полагаться на это на все 100% по понятным причинам. Старые браузеры не понимают тип «email» и будут воспринимать его как простой текст.

<!DOCTYPE html>

<html lang="en">
<head>
        <meta charset="utf-8">
        <title>untitled</title>
</head>
<body>
        <form action="" method="get">
                <label for="email">Email:</label>
                <input id="email" name="email" type="email" />

                <button type="submit"> Submit Form </button>
        </form>
</body>
</html>

Следует упомянуть, что текущие браузеры слегка ненадёжны, когда дело доходит до того, какие элементы и атрибуты они поддерживают, а какие – нет. Например, Opera кажется поддерживает валидацию email только когда указан атрибут name. Тем не менее, она не поддерживает атрибут placeholder, который мы рассмотрим в следующей главе. Резюмируя: не стоит зависеть от этой валидации форм пока… Но можно использовать!

8. Placeholder`ы

Раньше мы должны были использовать JavaScript для создания placeholder`ов в текстовых полях. Конечно, мы можем просто инициализировать атрибут value как мы бы хотели, но потом, когда пользователь сотрёт этот текст и кликнет за границей поля, оно останется пустым. Атрибут placeholder исправляет положение.

<input name="email" type="email" placeholder="doug@givethesepeopleair.com" />

Опять же, поддержка атрибута сомнительна в лучших браузерах, однако, это будет исправляться от релиза к релизу. По этому, если браузеры, такие как Firefox и Opera, сейчас не поддерживают placeholder, не стоит переживать по этому поводу.

9. Локальное хранилище

Благодаря локальному хранилищу (официально ещё не HTML5, но сгруппировано для удобства), мы можем заставить продвинутые браузеры «вспомнить», что мы собирали даже когда браузер был закрыт или обновлена страница.

“localStorage устанавливает поля для домена. Даже когда вы закроете ваш браузер, откроете и вернётесь на тот сайт, браузер вспомнит поля с localStorage.”
-QuirksBlog

Пока, очевидно, это не поддерживается всеми браузерами, но можно ожидать, что, скоре всего, поддержка появится в Internet Explorer 8, Safari 4 и Firefox 3.5. Отметим, что старые браузеры могут не поддерживать локальное хранилище, поэтому следует проверить на существование window.localStorage.

10. Семантические Header и Footer

В прошлом те дни, когда:

<div id="header">
        ...
</div>

<div id="footer">
        ...
</div>

Тэг div по своей природе, не имеет семантической составляющей — даже когда присуствует аттрибут id. Теперь в HTML5 есть возможность использовать <header> и <footer> елементы. Теперь структура, которая представлена выше, можно заменить на :

<header>
        ...
</header>

<footer>
        ...
</footer>

Это также позволяет иметь несколько елементов header и footer в ваших проектах.

Постарайтесь не путать эти элементы с “header-ом” and “footer-ом” вашего сайта. Они просто ссылаются на своё содержимое. Например, его можно использовать для вывода мета-информации в посте блога. Это применимо и для header.

11. Больше возможностей с формами HTML5

Давайте узнаем о полезных возможностях форм HTML5 с помощью этого короткого видео-урока.

12. Internet Explorer и HTML5

К сожалению, этот чёртов Internet Explorer требует немного костылей, дабы заставить его понимать новые HTML5 элементы.

Все элементы, по-умолчанию, имеют свойство display:inline.

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

header, footer, article, section, nav, menu, hgroup {
   display: block;
}

К сожелению, Internet Explorer будет продолжать игнорировать эти стили, потому что не имеет понятия, что это, как элемент header например. К счастью, это легко исправить:

document.createElement("article");
document.createElement("footer");
document.createElement("header");
document.createElement("hgroup");
document.createElement("nav");
document.createElement("menu");

Как ни странно, но код как будто выстреливает в Internet Explorer. Чтобы упростить этот процесс, Remy Sharp создал скрипт, как правило, называющийся «костылём» для HTML5. Он исправляет и некоторые проблемы с печатью.

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

13. hgroup

Представте, что в шапке ( header ) моего сайта есть название моего сайта, сразу под заголовком. По этому я могу использовать тэги <h1> и <h2>, соответственно, создать разметку, которая бы легко семантически указывала на их отношения. Кроме того, использование тэгов h2 принесёт много проблем, с точки зрения иерархии, когда дело дойдёт до отображения их в других частях сайта. Использовав элемент hgroup, можно группировать эти заголовки вместе, не переживая за схему документа.

<header>
        <hgroup>
                <h1> Recall Fan Page </h1>
                <h2> Only for people who want the memory of a lifetime. </h2>
        </hgroup>
</header>

14. Атрибут required

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

<input type="text" name="someInput" required>

Или более структурированным методом.

<input type="text" name="someInput" required="required">

Любой метод будет работать. Благодаря этому коду, в браузерах, которые поддерживают этот атрибут, форма не может быть отправлена, если текстовое поле “someInput” пустое. Ниже простеньки пример; также мы добавили атрибут placeholder так как нет причины этого не делать:

<form method="post" action="">
        <label for="someInput"> Your Name: </label>
        <input type="text" id="someInput" name="someInput" placeholder="Douglas Quaid" required>
        <button type="submit">Go</button>
</form>

Если поле ввода оставить пустым и попробовать отправить форму, то оно подсветится.

15. Атрибут Autofocus

Опять же, с приходом HTML5, потребность в JavaScript для решения этой проблемы отпала. Если определённое текстовое поле должно быть выделенным или с фокусом ввода, можно использовать атрибут autofocus.

<input type="text" name="someInput" placeholder="Douglas Quaid" required autofocus>

Хотя я лично предпочитаю более XHTML-ый подход (используя кавычки и т. д.), записывая "autofocus=autofocus", но чувствую себя немножечко странно. Таким образом, ми будем придерживаться подхода с использованием одного слова.

16. Поддержка аудио

Не надо больше полагаться на сторонние плагины, чтобы играть аудио. В HTML5 предлагается использовать элемент <audio>. Ну, по крайней мере, в конце концов, не надо беспокоится о плагинах. Пока только несколько браузеров поддерживают <audio>. В то же время, хорошая практика использовать некоторые формы обратной совместимости.

<audio autoplay="autoplay" controls="controls">
        <source src="file.ogg" />
        <source src="file.mp3" />
        <a href="#">Download file</a>
</audio>

Mozilla и Webkit не полностью ещё готовы, когда заходит речь о поддержке аудио. Firefox хочет видеть файл .ogg, когда как Webkit-браузеры хорошо работают с .mp3. Это значит, по крайней мере сейчас, что вы должны сделать 2 версии аудиофайла.

Когда Safari загружает страницу, то не понимает формат .ogg и пропустит его, и, соответственно, дойдёт до mp3-версии. Прошу заметить, что IE, как всегда, не поддерживает этого и Opera 10 и ниже может работать только с wav-файлами.

17. Поддержка видео

Так же, как и <audio> элемент, в HTML5 есть видео! На самом деле, совсем недавно YouTube анонсировали поддержку нового HTML5 видео для брузеров, которые его поддерживают. К сожалению, опять же из-за того, что спецификация HTML5 не указывет кодек для видео, это ложится на плечи браузера. В том время, пока Safari и Internet Explorer 9 поддерживают видео в H.264 формате (который Flash-прееры могут проигрывать), Firefox и Opera остановились на открытых форматах Theora и Vorbis. Как следствие, для показа видео HTML5 следует поддерживать оба формата.

<video controls preload>
        <source src="cohagenPhoneCall.ogv" type="video/ogg; codecs='vorbis, theora'" />
        <source src="cohagenPhoneCall.mp4" type="video/mp4; 'codecs='avc1.42E01E, mp4a.40.2'" />
        <p> Your browser is old. <a href="cohagenPhoneCall.mp4">Download this video instead.</a> </p>
</video>

Chrome корректно отображает видео, кодированное обеими, “ogg” и «mp4», форматами.

Есть несколько вещей, которые стоит отметить.

  1. Мы, технически, можем и не указывать атрибут type; тем не менее, если он не указан, браузер должен выяснить тип сам. Поберегите нервы и укажите его сами.
  2. Не все браузеры поддерживают элемент video. Под элементом source надо указать ссылку на закачку или встроить Flash-плеер. Всё зависит от вас.
  3. Атрибуты controls и preload будут рассмотрены в следующих друх главах.

18. Preload видео

Атрибут preload не совсем то, что вы могли подумать. Хотя, сначала вы должны решить хотите вы или не хотите, чтобы браузер начинал предварительно загружать видео. Важно это? Пожалуй, если пользователь попал на страницу, которая предназначена для показа видео, вы точно должны заставить браузер предварительно загружать его и сохранить пользователю время. Видео может загружаться предварительно установкой preload="preload", или просто preload. Я предпочитаю второй вариант — меньше лишнего.

<video preload>

19. Вывод кнопок управления

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

<video preload controls>

Заметьте, что каждый браузер по разному их рисует.

20. Регулярные выражения

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

<form action="" method="post">
        <label for="username">Create a Username: </label>
        <input type="text"
           name="username"
           id="username"
           placeholder="4 <> 10"
           pattern="[A-Za-z]{4,10}"
           autofocus
           required>
        <button type="submit">Go </button>
</form>

Если вы хоть как-то знакомы с регулярами, вы поймёте этот шаблон: [A-Za-z]{4,10} принимает только буквы в верхнам и нижнем регистре. Эта сторока должна быть минимум 4 символа и максимум 10.

Заметьте, что мы может обьединять эти замечательные выражения!

21. Определение поддержки атрибутов

Какой смысл от всех этих атрибутов, когда мы не знаем, поддержывает ли браузер их? Ну, резонный вопрос: но есть несколько способов выяснить это. Мы рассмотрим два. Первый — использовать чудесную библиотеку Modernizr. Кроме того, мы можем создавать и анализировать эти елементы, чтобы определить способность браузеров понимать их. Например, в предыдущем примере, если мы хотим определить, может ли браузер реализовать атрибут pattern, может добавить кусок кода на JavaScript:

alert( 'pattern' in document.createElement('input') ) // boolean;

По сути, это популярный метод определения совместимости браузеров. Библиотека jQuery использует этот трюк. Выше, мы создали новый обьект input и определили, может ли браузер поддерживать pattern. Если это так, то браузер будет использывать эту функциональность. Иначе — се ля ви ).

<script>
if (!'pattern' in document.createElement('input') ) {
        // do client/server side validation
}
</script>

Имейте ввиду, что это зависит от JavaScript!

22. Елемент Mark

Думайте о <mark> как о маркере. Строка, обрамлённая этим тэгом, должна быть связана с текущим действием пользователя. Например, если я искал “Open your Mind” в блоге, я мог бы, с помощью некоторого Javascript-а, обернуть строку поиска в тэг <mark>.

<h3> Search Results </h3>
<p> They were interrupted, just after Quato said, <mark>"Open your Mind"</mark>. </p>

23. Когда же использовать <div>

Некоторые теряются в сомнениях, когда же мы должны использовать обычный и привычный div. Теперь у нас есть header, article, section и footer, когда же тогда исползовать …div? Непременно.

Div следует использовать, когда нет подходящего елемента.

Например, если вы обнаружили, что надо обернуть кусок кода для позиционирования, <div> как раз кстати. Тем не менее, если вы собираетесь обернуть новый пост в блог или, возможно, список ссылок в подвале сайта, то следует подумать о <article> и <nav> соотведственно. Это более семантически правильно.

24. Что уже сейчас использовать

Рассказывая, что HTML5 не будет готов полностью до 2022, многие не используют его, что является большой ошибкой. В самом деле, есть несколько полезностей HTML5, которые можно использовать прямо сейчас! Простой и чистый код — это всегда хорошо. В сегодняшнем видео я покажу несколько примеров.

25. Что же не является HTML5

Люди могут быть прощены за то, что удивительные JavaScript подходы сгруппированы в всеобъемлющей HTML5. Эй, даже Apple за эту идею! (тоже мне, авторитет. Прим.пер). Для не-разработчиков, кому не всё равно: это лёгкий путь для внедрения web-стандартов. Но для нас важно понять, что такое не HTML5.

  1. SVG: Не HTML5. Ему, по меньшей мере, лет 5.
  2. CSS3: Не HTML5. Это…CSS.
  3. Client Storage: Не HTML5. Это было в одной связке, но исключено, потому что многие переживали, что идея становится слишком сложной. Это теперь имеет свою собственную спецификацию.
  4. Web Sockets: Не HTML5. Опять же, имеет свою спецификацию.

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

Заключение

Спасибо за прочтение! Мы рассмотрели многое, но всё же это просто вершки от того, что может HTML5. Надеюсь, этот обзор был вам полезен!

]]> http://blog.web2.com.ua/2010/10/22/perevod-25-vozmozhnostej-podskazok-i-texnik-html5-kotorye-vy-dolzhny-znat/feed/ 2 Подсказка: private-переменные в Javascript http://blog.web2.com.ua/2010/02/24/podskazka-private-peremennyie-v-javascript/ http://blog.web2.com.ua/2010/02/24/podskazka-private-peremennyie-v-javascript/#comments Wed, 24 Feb 2010 08:59:28 +0000 wert2all http://blog.web2.com.ua/?p=942 Это перевод статьи Quick Tip: Private Variables in JavaScript.

Подсказка: private-переменные в Javascript

Из-за зависимости JavaScript от глобальных переменных, можно легко забыть, что создание часных переменных (private variables) может быть реализовано так же просто, как и замыкания. За несколько минут, я продемонстрирую две основные техники, предоставляющие часные переменные и медоды в ваших проектах.

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

var MyObj = function() {

// Private переменные
  var priv1 = 'private 1',
      priv2 = 'private 2';

// Только методы и свойства в пределах этого  объекта будут доступны.
  return {
    doSomething : function() {
      // alert(priv1); // private 1
      alert(this.someProp); // someValue
    },

    someProp : 'someValue'
  }

}(); // эта функция выполняется, когда обьект инициализируется

  MyObj.doSomething();

Демонстрация

От себя добавлю, что в скринкасте описывается ещё один метод, с помощью конструктора:


function myConctructor(){
  var private1='sss'; // приватная переменная
  this.public1 = 'seee'; // public переменная
}

Думаю, тут понятно всё.

]]> http://blog.web2.com.ua/2010/02/24/podskazka-private-peremennyie-v-javascript/feed/ 1 Паттерн Registry в Javascript http://blog.web2.com.ua/2009/10/19/pattern-registry-v-javascript/ http://blog.web2.com.ua/2009/10/19/pattern-registry-v-javascript/#comments Mon, 19 Oct 2009 06:24:20 +0000 wert2all http://blog.web2.com.ua/?p=880 Мне почему-то понадобилось реализовать паттерн проектирования Registry на Javascript.  Как сделать это на PHP для меня не представляло сложности, а вот понять объектную модель Javascript у меня никогда не получалось. Самое сложное для меня остаётся понять, почему вышло реализовать Singleton.

Код пишу сюда, потому что могу и забыть как делается ;) 

<script type="text/javascript">
 function Registry(){
   if(!this.instance){
     /* нет пока объекта
         создадим
     */
       function registry(){  }
       /* сборище хэшей для передаваемых объектов */
       registry.prototype.reg = {}
       /* метод для добавления объектов */
       registry.prototype.add = function(name, object){
          this.reg[name] = object;
       }
       /* метод для получение объектов */
       registry.prototype.get = function (name){
          return this.reg[name];
       }

      this.instance = new registry();
   }
 return this.instance;
 }

.* а так его использовать */
/* добавляем в реестр объект */
 Registry().add('test', 3);
/* получаем объект */
 alert(Registry().get('test'));

 </script>

Вот и всё. И даже не скажешь, что не спал ночь )

]]> http://blog.web2.com.ua/2009/10/19/pattern-registry-v-javascript/feed/ 1 Функция отмены последнего действия (Undo) – это просто(Вторая часть): Срочные события http://blog.web2.com.ua/2007/11/09/funktsiya-otmenyi-poslednego-deystviya-undo-eto-prostovtoraya-chast-srochnyie-sobyitiya/ http://blog.web2.com.ua/2007/11/09/funktsiya-otmenyi-poslednego-deystviya-undo-eto-prostovtoraya-chast-srochnyie-sobyitiya/#comments Fri, 09 Nov 2007 13:12:12 +0000 wert2all http://blog.web2.com.ua/2007/11/09/funktsiya-otmenyi-poslednego-deystviya-undo-eto-prostovtoraya-chast-srochnyie-sobyitiya/ undo.jpgЭто вторая часть серии “Функция отмены – это просто”. Если вы их пропустили, то прочитайте первую часть [ перевод ].

В предыдущий раз рассматривали метод очереди событий, как полностью клиентскую реализацию лёгкой многоуровневой функции отмены. Я упоминал о паре обмолвок: это не работает в многопользовательской среде и не работает в время-зависимых событиях, как отправка email. Я пропустил существенную оговорку, на которой обратил внимание один с моих читателей, Alexander Botero-Lowry: два таба, в которых открыта одна и та же страница, не синхронизируются. Я написал, как это решить с помощью cookies [ перевод ].

На этот раз, давайте взглянем на решение Отмены для срочных действий. В методе очереди событий, мы могли бы подождать, пока событие “onunload” синхронизирует действия пользователя на стороне клиента с серверной стороной. Для срочных действий, таких как отправка email, у нас нет такой роскоши. Хуже всего, что email – это не push-технология. Отправивши раз email по диким трубам Internet, оно уже не может быть не отправленным.* Для несчастных, которые нажали “отправить” и лишь потом осознали, что переслали томное любовное письмо своему боссу, остаётся надеяться на перебои с электроэнергией и спам-фильтры. Учитывая, как часто спам проходит последние мои фильтры, перспективы не столь хороши.

Электронные письма нужно отправлять вскоре после того, как пользователь нажал на “Отправить” и операцию отправки нельзя отменить. Что мы можем сделать?

Для решения данной проблемы мы должны обратится к интерфейсу на основе времени. Как правило, интерфейсы на основе времени не в состоянии быть действительно годным к употреблению, потому что расчёт времени, в действительности, неправильный. Для некоторых людей оно слишком быстро, для других – медленно. Даже ваше собственное восприятие изменений времени основанно на вашей умственной нагрузке. Когда вы о о чём-то сильно думаете, вы не замечаете течение времени: что было слишком медленно прежде, теперь будет слишком быстрым. Старая поговорка: “Время летит, когда вы веселитесь” действительна для пользовательского интерфейса. Хорошим примером недостатка интерфейса на основе времени можно увидеть в наборе текста в мобильных телефонах, но эта тема подождёт до следующей заметки.

Когда посылается письмо, как правило в период “‘о, НЕТ! секунду“— доли секунды после нажатия “отправить” — вы понимаете, что отправили письмо на неправильный адрес. Желание не посылать электронную почту, которую послали час назад, происходит, но с намного меньшей частотой. Таким образом, решение на основе времени, когда пользователь может не послать письмо, имеет смысл только на коротком промежутке времени: back-end может просто отложить посылку письма на 30-60 секунд и, если пользователь захочет отменить отправку на протяжении нормального периода времени, back-end уберёт с очереди email и письмо не отправится.

Теперь, я не особенно счастлив с поддержкой интерфейса на основе времени, но я зажат ограничениями. С одной стороны, отправка электронной почты в реальном мире, действие, которое невозможно отменить. С другой стороны, письма надо отправлять живчиком. Функция отмены для срочных событий не является канонической проблемой и единственное решение, которое я вижу – это компромисс (если кто-то знает другое решение, я весь во внимании!). В целом, многие ситуации, в которой мы, как проектировщики, попадали с непроходимыми препятствиями. Лучшее, что мы можем сделать – разрабатывать системы, которые заботятся о наиболее вероятно использованных случаях, и позволяет пользователям изящно вернуться из наиболее распространенных ошибок. Undo на основе времени не решит всех недостатков отмены отправки письма ( это не будет помогать с ночными электронными письмами, Вы обнаружите, что послали следующим утром), но он будет ловить большинство ошибочно отправленных писем (ошибки типа “‘о, нет!’ секунду!” и вариант “Я-нажал-на-кнопку-случайно”). И это поймает намного больше ошибочных писем, чем банальное оповещение. Оказалось, что Paul Buchheit, создатель Gmail, тоже так думает. Как жаль, что это не было реализовано— это низковисячие фрукты, которые могли бы дать Gmail больший перевес в его превосходстве.

Не так то и много там этого метода. Для реализации его в стиле Ajax, вам просто понадобится mutex и таймер. Когда время истекает (или при переходе со страницы), письмо будет отправлено. Более продвинутый способ предполагает установление флага на сервере наряду с серверным обратным отсчётом. В сложной частью всего этого дело заключается в том, чтобы указать время, оставшееся таким образом, чтобы не запугать пользователей. Например, обратный отсчёт времени вызывает внутреннее чувство паники:

Не хорошее чувство, неправда-ли? Взамен, медленное затухание работает лучше:

Обратный отсчет, который не начинает считать в обратном порядке до последних 10 секунд, мог бы также работать. Это прекрасная задача – разработать механизмы красивого отображения лимита времени для отмены. Поделитесь своими мыслями в разделе комментариев. Бонусы за предложения любого вида!

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

*
Есть определенные решения – хотя и не очень – для этой проблемы. Для примера, письмо может состоять только с одного вложенного рисунка в виде текста. Если картинка хранится на вашем сервере, тогда для отмены отправки email, вы просто удаляете или меняете рисунок. Это эффективно не отправит контент письма (если уже не отправило). Так что кто-то будет знать только то, что вы отправили сообщение (с темой), но не содержание.

Перевод: Undo Made Easy with Ajax (Part 2): Time-Sensitive Actions

]]> http://blog.web2.com.ua/2007/11/09/funktsiya-otmenyi-poslednego-deystviya-undo-eto-prostovtoraya-chast-srochnyie-sobyitiya/feed/ 0 Функция отмены последнего действия (Undo) – это просто (Часть 1.5) http://blog.web2.com.ua/2007/09/27/funktsiya-otmenyi-poslednego-deystviya-undo-eto-prosto-chast-15/ http://blog.web2.com.ua/2007/09/27/funktsiya-otmenyi-poslednego-deystviya-undo-eto-prosto-chast-15/#comments Wed, 26 Sep 2007 22:48:51 +0000 wert2all http://blog.web2.com.ua/2007/09/27/funktsiya-otmenyi-poslednego-deystviya-undo-eto-prosto-chast-15/

Продолжаю переводить серию статей о реализации Undo.

Это вторая часть первой части серии заметок “Функция отмены последнего действия (Undo)”. Если вы её пропустили, то сначала прочитайте первую часть (перевод первой части).Один с моих читателей, Alex Botero-Lowry, отметил большую проблему реализации Undo c очереди полностью на стороне клиента: если пользователь открывает эту же страницу на второй вкладке браузера для просмотра, то эти страницы могут быть не синхронизированы. В примере to-do листа, если вы удаляете три to-do листа и открываете новую вкладку или окно этой же страницы, то эти to-do всё-таки останутся. Почему? Потому что первая страница знает о удалении (хотя оно и не законченное), а вторая – нет.

Возьмем клиентский подход и запустим его. В том, что нет запутанного back-end’а есть что-то красивое. Мы можем исправить проблему множественных вкладок, синхронизируя очередь событий со всех открытых страниц с помощью кукиз (cookie).

Хочу подчеркнуть, что метод очереди событий – очень легкое решение отмены действия. Существуют другие, более надёжные пути реализации Undo, такие как основаные на серверной стороне command pattern (пару моих читателей обратили на это внимание и я, возможно, рассмотрю это в следующих заметках). Но это не относится к делу. Когда мы, как инженеры, стараемся решить сложные проблемы, мы часто слишком обобщаем и слишком абстрагируемся к своему back-end решению, не замечая других вариантов. Когда мы делаем это, мы пропускаем простые решения, которые могут помочь пользователям уже сейчас. Некоторые формы Undo как низко-висячие фрукты, почему же не сорвать их? Конец отступления.

Повторяю, мы решаем что случится, когда пользователь удалит некоторые элементы, откроет другую вкладку этой же страницы и те пункты, оказывается, не удалены. Предположим, что очередь событий хранит идентификаторы удалённых объектов и каждый раз когда элемент удаляется или удаление незаконченное, мы пишем очередь в cookie; когда страница закрывается – мы очищаем куки. Когда страница загружается – мы проверяем куки и если в них есть не пустой список, то мы на стороне клиента “удаляем” элементы и добавляем их в очередь. Теперь каждая новая вкладка/окно открывается, мы гарантировано синхронизируем их.

Проблема решена.

Сложность

Итак, что случится когда вы сделаете изменения на одной странице, а потом переключитесь на другую, уже открытую страницу? Это может усложнить жизнь. Мы спасены от необходимости иметь дело с всей проблемой, потому что web не технология “толчка”. В настоящее время, никакое приложение сети, о котором я знаю, без возможности ручного обновления, не может обновить страницу, когда она изменена в другой вкладке. Пользователи используют обновление страницы, чтобы увидеть изменения. Это означает, что мы должны правильно обходится с вариантом, когда пользователь удаляет и восстанавливает данные в одной вкладке, возвращается в другую и нажимает refresh.

Чтобы решить эту проблему, мы должны сделать предположение, что последняя вкладка/окно, в котором пользователь что-то редактировал, содержит наиболее актуальную информацию. Это резонное предположение, потому что последнее с чем пользователь работал, наиболее вероятно будет тем, о чем пользователь думал как последняя версия.

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

Попробуйте

Поиграйте с этим, затем откройте новое окно браузера. Теперь, измените что-то в новом окне и потом обновите старое окно. Всё правильно обновляется.

Исходный код

…находится здесь.

Заключение

Польза от пути cookie заключается в том, что это улучшает положение с уже редком случае, когда пользователь теряет свою работу в случае краша браузера. Когда браузер “падает”, то все изменения сохраняются в куках, итак, когда пользователь загружает страницу опять, его изменения вся-таки применяться.

Система очереди событий с синхронизацией на куках – это низковисячий фрукт. Это работает не везде, но будет работать в поразительно большом количестве случаев. Это стоит сравнительно небольших сроков.

На следующей неделе, я напишу о решении Undo для время-зависимых действий.

Перевод: Undo Made Easy with Ajax (Part 1.5)

]]> http://blog.web2.com.ua/2007/09/27/funktsiya-otmenyi-poslednego-deystviya-undo-eto-prosto-chast-15/feed/ 2 Функция отмены последнего действия (Undo) – это просто (Часть 1) http://blog.web2.com.ua/2007/09/24/funktsiya-otmenyi-poslednego-deystviya-undo-eto-prosto-chast-1/ http://blog.web2.com.ua/2007/09/24/funktsiya-otmenyi-poslednego-deystviya-undo-eto-prosto-chast-1/#comments Mon, 24 Sep 2007 08:36:23 +0000 wert2all http://blog.web2.com.ua/2007/09/24/funktsiya-otmenyi-poslednego-deystviya-undo-eto-prosto-chast-1/

Я почитываю материалы по многим темам Internet, в том числе и по usability. А тут попалась на глазуа статья, как делать отмену последнего действия под Web. Стало интересно – решил переводить.

Как пользователи, мы делаем ошибки. Как дизайнеры, мы должны спроектировать интерфейсы с учётом этого, как я и утверждал в своей недавней статье Never Use a Warning When You Mean Undo ( перевод этой статьи – Реализуйте возможность отмены действия, вместо диалогов подтверждения ). Undo – это отличный спасательный круг, придающий потрясающее чувство надёжности работы интерфейса. Вот почему каждое десктопное приложение от Word до Photoshop предоставляет возможность многоуровневой отмены действия.

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

В этой серии записей в блоге, моя цель объяснить как легко реализовать функциональность отмены действия. Недавно, я дал предварительный вариант этой заметки на семинаре. После показа демо того, как может работать отмена, аудитория слегка привстала со своих мест. Когда же я открыл исходный код и начал показывать как это реализовано, универсальный возглас был: “Зачем Вы объясняете это? Это же всем понятно. Мы же разработчики ПО. Это легко!”

То-то же!

Добавление Undo в ваши интерфейсы сильно и положительно повлияет на удобство пользования вашим сайтом. Это уменьшит разочарования пользователя и увеличит его доверие.Оба этих умозаключения означают, что большие количество
пользователей вернуться, что увеличит вашу прибыль. Запомните: для пользователя, интерфейс – это продукт.

Теперь вы не можете не реализовать функцию отмены. Итак, без дальнейших хлопот, вот вам первый метод реализации.

Метод 1: Очередь событий

Ситуация: Вы сделали онлайновый to-do список и пользователя нужна возможность удалить любую сущность со списка. Вы не хотите, чтобы пользователь удалил сущность случайно, также вы не хотите чтобы он изменил своё мнение после удаления или через 2 секунды. Этот метод теперь реализован в Интернете через уведомление пользователю диалоговым окном.

  • Deleting a to-do item in highrise requires the use of a warning.
  • Даже 37 Signals, обычно оплот хорошего дизайна, использует уведомление вместо отмены действия.

Это не только не работает – это блокирует браузер, требуя принять решение перед тем, как переключиться на другую вкладку. Если вам нужно проверить электронную почту, чтобы выяснить, можно ли удалить дело, Вам не повезло.

Попробуйте поработать со списком to-do со стандартным (но не очень гуманным) окном предупреждения.

Теперь представим, что мы изменили своё мнение о удалении чего-либо или хотите удалить 3 строчки. Как бы расстраивает, не так ли?

Правильно решение функции отмены, которое мы можем осуществить здесь имеет очередь событий и вызов “onUnload”. Когда мы нажимаем на удаление, to-do сущность исчезает. В общем, в этой точке мы должны будем отправить AJAX-запрос на сервер, чтобы удалить её. Когда пишем Undo, вместо немедленного вызова AJAX, мы ждём пока пользователь уйдёт с текущей страницы (это мы определяем, используя вызов “onUnload”). Это достигается путём добавления ссылки на to-do в очередь для безопасного сохранения.

Когда пользователь нажимает на Undo, мы достаём последнюю добавленную в очередь и делаем её видимой опять. Когда же пользователь уходит со страницы или закрывает её, вызывается метод “onUnload”. На данном этапе мы получаем собитие с очереди и отправляем AJAX-запрос о удалении списка.

Одним с больших преимуществ метода с очередью событий в том, что это делает реализацию многоуровневой отмены задачей очень тривиальной. И это также даёт безболезненное удаление списка to-do кучей (чего нет, когда удаление происходит с сообщением). Попробуйте!

Исходный код

Заинтриговало? Хотите знать больше? Хорошо. Вот и задокументированный исходный код.

Предупреждение

Метод очереди событий в реализации функции отмены не идеален:

  • Если браузер пользователя или компьютер вызовет ошибку, тогда работа пользователя потеряется. Это явно не оптимальный расклад..С другой стороны,это редкое явление и можно смело игнорировать все, кроме жизни и смерти
    важных данных.
  • Работа в реальном времени не работает в этом методе, потому что данные не отправляются серверу пока пользователь не уйдёт со страницы. Таким образом, другие пользователи не увидят изменений в реальном времени. Другие методы
    реализации Undo обходят даную проблему, но надо ждать другую заметку с этой серии.
  • Этот метод не целесообразно использовать для отправки emails или других срочных действий. Потому что действие будет завершено только тогда, когда пользователь покинет страницу, а это может растянуться на полчаса или час пока email будет отправлено. Это неприемлемо.

Вывод

Как Вы видите, Undo не слишком трудоёмкое занятие. Метод очереди событий можно даже сделать полностью на клиентской стороне, что означает, что вы можете реализовать отмену даже без изменений “back end”.

Итак, больше никаких отговорок по-поводу сложности реализации функции отмены последнего действия! Пришла пора Undo в web!

На следующей неделе я покажу, как сделать Отмену для срочных действий.

Перевод статьи Undo Made Easy with Ajax (Part 1)

]]> http://blog.web2.com.ua/2007/09/24/funktsiya-otmenyi-poslednego-deystviya-undo-eto-prosto-chast-1/feed/ 2 Как установить Aptana на уже существующий Eclipse http://blog.web2.com.ua/2007/07/25/kak-ustanovit-aptana-na-uzhe-suschestvuyuschiy-eclipse/ http://blog.web2.com.ua/2007/07/25/kak-ustanovit-aptana-na-uzhe-suschestvuyuschiy-eclipse/#comments Wed, 25 Jul 2007 12:01:51 +0000 wert2all http://blog.web2.com.ua/2007/07/25/kak-ustanovit-aptana-na-uzhe-suschestvuyuschiy-eclipse/ Кто не знает то пока я web-developer (нравиться мне это слово. И просто вэб-программист не подходит). И в дому и в рабочей обстановке, системой, на которой происходит процесс набора букв с сайты, является ново-старая openЗЮЗЯ (именно в такой последовательности больших букв, так как openSUSE её настоящее имя ;) ). Если посчитать, сколько ПО использую . для работы, то получается многовато:

  • для HTML – quanta. Удобно, подсвечивает, подсказывает иногда показывает, но над показом ей к дримвиверу ещё сра…. ой, далеко;
  • для CSS та же кванта, но есть cssed, но используется крайне редко;
  • для JavaScript используется прекрасный редактор Aptana, которая за последнее время очень прибавила и даже описанный мною бубен ей уже не требуется;
  • для PHP (все руби, удавы и дотНето идут лесом вприпрыжку, забирая за собой свой кал и сопли, ибо им на этом свете нечего делать со своими языками) пишу “на_совсем_уже_купленном_за_свои_заработанные_деньги_типа” Zend Studio. Кряк не дам ;) , ищите гуглом. Зы, а хоть сколько оно стоит? ой, мама! (Сходивши на сайт)

А вот если поcчитать, что Aptana и Zend – это java-приложения, и они всегда запущены, то я задумался о альтернативах и совмещении этого хотя бы в что-то одно. Конечно, я задумался над мыслю, что 256 оперы на ЗюЗе дома, это даже не мало, а катастрофически ничтожно. Присматриваясь с PHP IDE от тех же Zend, но бесплатном и на Eclipse, решил попробовать работать в нём. Да и не просто работать, я решил совместить разработку на php c javascript в Aptana. Для этого нужно на один Eclipse повесить плагины от PHP IDE и Aptana.

Первое что я сделал, дабы упростить себе жизнь, я скачал уже собранный с плагинами (для Linux или Windows) PHP IDE. Если же у вас есть Eclipse, то качать следует только плагины. Скачавши, распаковавши, проверил работает ли всё (таки да) и попробовал пописать чуть код. Не привык к нему, но что поделаешь ради мирового господства пролетариата.

Следующий этап – поставить на всё Aptana. Честно, думал всё сложнее, но как оказалось – всё для простоты разработчика.

1. Выбираем пункт меню Help->Software Updates->Find and Install

  • eclipse.png
  • Установка Aptana

В диалоговом окне следует выбрать, что мы хотим установить новую фичу.

  • eclipse1.png
  • Выбираем установку

В результате имеем окно установки.

  • eclipse2.png
  • Окно установки

Для того, чтобы Eclipse нашёл нашу Aptana, надо добавить сторонний сайт. Для этого нажимаем на кнопку New Remote Site и получаем диалог New Update Site. В имя сайта хоть фамилию бабушки, а вот в линк добавить следует http://update.aptana.com/install/3.2/

  • eclipse3.png
  • Добавление нового сайта для Aptana

Нажимаем Ok, редактор что-то там шуршит и в результате получаем в окне установки новый сайт с плагинами. Финиш и ждём. Когда появится окно что ниже, тоже всё финиш, принимаем лицензию и тд

  • eclipse4.png
  • Установка уже плагина

В один прекрасный момент выведется список плагинов, который идёт с Aptana. Выбираем всё и жмём Finish.

  • eclipse5.png
  • Плагины Aptana
  • eclipse6.png
  • Идёт загрузка всего нужного

Дальше рассказывать просто нет смысла, так всё тривиально: загрузка, установка и перегрузка Eclipse.

Во всём этом разбирался с сайта Aptana.
Всё, работает.

Остался ещё один маленький вопрос: чтобы ещё перевести под одну платформу разработки?

]]> http://blog.web2.com.ua/2007/07/25/kak-ustanovit-aptana-na-uzhe-suschestvuyuschiy-eclipse/feed/ 2 Аналоги radiobutton http://blog.web2.com.ua/2007/07/11/analogi-radiobutton/ http://blog.web2.com.ua/2007/07/11/analogi-radiobutton/#comments Wed, 11 Jul 2007 09:10:30 +0000 wert2all http://blog.web2.com.ua/2007/07/11/analogi-radiobutton/ Я долго думал как начать, чтобы не спровоцировать флейм и непонимание меня. Понять, почему я сделал именно так, а не иначе, тоже не возможно. Думаю хотел сделать проще, хотя такая идея мне тоже не по душе.

Я не люблю переопределения интерфейса. Я терпеть не могу, когда Опера выводит свое окно не так как настроено в KDE, а как-то по-другому. Ведь если разработчики сделали методы для вывода окна, то зачем изобретать велосипед? Итак делает не только Опера: Zend DE и куча других программ. Зачем?

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

Теоретически это касается и WEB. Но только косвенно. Ведь все согласны, что стандартных input не то что мало, а их НЕТ! Конечно, саморобные контролы снижают узнаваемость их пользователями, но если подойти с умом, то можно сделать вполне удачные аналоги.

Вот и я, дабы упростить себе жизнь (лень мне писать кучу javascript-кода ;) ) решил вместо стандартных radiobutton сделать свои. На самом деле, сложного нет в этом ничего, да и удобностей поболе, как по мне.

Что же я имел вначале? Есть поле status типа enum , которое может принимать значения ‘new’, ‘confirm’ и ‘done’. Следует сделать механизм показа значения поля и его редактирования.

Конечно, можно это сделать с помощью radiobutton. Это 3 радио-кнопки и в зависимости от значения, одну с них нужно делать выбранной. Кто это реализовывал, тот знает, что каждый radio имеет простой индекс, и связь возможна, только пройдя по всем кнопкам и, если значение поля равно value радио-кнопки, то надо сделать её выделенной. Такие варианты меня не устраивали. Я же решил пойти другим путём.

Первое, с чего надо начать, так это создать 3 рисунка с ссылками на них и поле типа hidden, чтобы сохранять и передавать потом в форме значение статуса: 

< div id="status">
	< a class="st_new" href="">< img src="/_img/1x1.gif" />a>
	< a class="st_confirm" href="">< img src="/_img/1x1.gif" />a>
	< a class="st_done" href="">< img src="/_img/1x1.gif" />a>< span>
div>
< input type="hidden" name="status" value="">

Как видно с кода, в слое #status находятся картинки с ссылками. А теперь пропишем стили, чтобы это всё выглядело “по-людски”:

< style>
#status img{
	width: 16px;
	border: 1px #E8E8E8 solid;
}
style>

В результате мы имеем картину:

  • Внешний вид статусов

А теперь расскажу, как мы будем устанавливать активный статус. Для этого мы для div#status установим класс с именем нужного статуса. Если активный статус new, то получим 

< div id="status" class='new'>

Самое интересное , что в HTML это всё что надо! Теперь дело только за CSS. Напишем правила для CSS в которых, если активный пункт, то выводим красную границу: 

#status.new a.st_new img, #status.confirm a.st_confirm img,#status.done a.st_done img{
	border: 1px red solid;
}

Согласно этому правилу, если #status имеет стиль new, то картинка под a.st_new приобретает красную границу. Аналогично и с confirm и done.

  • Вот оно всё в действии с разными class.

Всё, тут уже нечего делать. Осталось в input вписывать статус и менять класс на #status. Js-функция для этого дела очень простая: 

function ch_status(status_value){
	if (status_value != 'new' && status_value != 'confirm' && status_value != 'done')
		 status_value = 'new';
	document.forms['st'].elements['status'].value = status_value;
	document.getElementById('status').className = status_value;
	return false;
}

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

Powered by ScribeFire.

]]> http://blog.web2.com.ua/2007/07/11/analogi-radiobutton/feed/ 4 Кто получил стиль? http://blog.web2.com.ua/2007/07/03/kto-poluchil-stil/ http://blog.web2.com.ua/2007/07/03/kto-poluchil-stil/#comments Tue, 03 Jul 2007 16:18:34 +0000 wert2all http://blog.web2.com.ua/2007/07/03/kto-poluchil-stil/ Из-за поддержки всеми A-grade браузерами DOM, множество основных (и некоторые сложные) взаимодействия могут быть выполнены с относительной лёгкостью. Такие штуки как добавление и удаление элементов, вставка HTML-тегов и работа с событиями сейчас довольно податливы в основе cross-браузерности. Там, естественно, несколько причуд которые вы должны будете учесть, но, в целом, большинство вещей работают, как вы и ожидали. За исключением динамической вставки CSS на вашу страницу.

Во время написания HTML, CSS могут быть включены на страницу используя тег