.wpal » web 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 статистика на The One http://blog.web2.com.ua/2011/03/30/statistika-na-the-one/ http://blog.web2.com.ua/2011/03/30/statistika-na-the-one/#comments Wed, 30 Mar 2011 14:01:02 +0000 wert2all http://blog.web2.com.ua/?p=1131 Забыл написать, что на The One прикрутил статистику. Теперь на главной странице показывается количество отправленых и полученых сообщений. Цифры страшные ;) Только вопрос стоян не в самих цифрах и данных, а втом, чтобы написать каркас для записи логов и аггрегации их в таблицы. Потом стал вопрос о выводе статистических данных и пришлось написать несколько класов для работы с OpenChart.

Что же можно увидеть?

  1. общую статистику на страницах сервиса
  2. красивый график статистики
  3. выбрать месяц для графика
]]> http://blog.web2.com.ua/2011/03/30/statistika-na-the-one/feed/ 0 The One жив, без паники http://blog.web2.com.ua/2011/02/16/the-one-zhiv-bez-paniki/ http://blog.web2.com.ua/2011/02/16/the-one-zhiv-bez-paniki/#comments Wed, 16 Feb 2011 15:03:13 +0000 wert2all http://blog.web2.com.ua/?p=1097 От меня давно не было вестей. Стал ленивее ;) . Хотя новостей на The One не было и ничего не писал, это не означает что там нет изменений. Многие изменения не видны и многие ещё не доделаны, но сегодня решился написать. Тем более, что есть одно видимое изменение.

Я подумал, что строить ссылки в которых будет дата – это уж очень много, и с 8 символов даты урезал их до одного. "Прирост" в 8 раз ;) . Так что, будь я маркетологом, то уже бы писал фразу, что стало в 8 раз лучше :) .

Дата в ссылке была заменена на шестнадцатеричное представление месяца. Ссылки стали выглядеть вот так:

Мне теперь кажется, что в ней есть 2 лишних символа, а вам? :)

]]> http://blog.web2.com.ua/2011/02/16/the-one-zhiv-bez-paniki/feed/ 0 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 Memcached http://blog.web2.com.ua/2009/12/23/memcached/ http://blog.web2.com.ua/2009/12/23/memcached/#comments Wed, 23 Dec 2009 11:34:27 +0000 wert2all http://blog.web2.com.ua/2009/12/23/memcached/ Пишу, чтобы не забыть ибо иногда надо знать, что происходит с memcached’ом:

$mymemcache = new Memcache;
$mymemcache->addServer('localhost', 11211);
highlight_string(print_r($mymemcache->getExtendedStats(), true));

Массив ключами, которые означают:

  • pid – идентификатор процесса
  • uptime – время работы сервера
  • version – версия ПО
  • time – время в формате unixtimestamp
  • rusage_user – пользовательское время для процесса
  • rusage_system – системное время для процесса
  • curr_items – количество сохраненных объектов в памяти
  • total_items – сколько всего было сохранено объектов за время работы сервера
  • bytes – количество байт, которые занимают сохраненные объекты
  • curr_connections – количество открытых соединений
  • total_connections – сколько всего было открыто соединений
  • cmd_get – количество запросов на получение объектов из кеша
  • cmd_set – количество запросов на сохранение объекта в кеше
  • get_hits – количество запросов когда объект был успешно найден в кеше
  • get_misses – количество запросов к отсутствующим объектам
  • bytes_read – общее количество прочитанных байт из сети
  • bytes_written – общее количество отправленных байт
  • limit_maxbytes – ограничение памяти для хранения объектов

Мануал поссмотреть по Memcache::getStats

А так как использую APC то и целый скрипт для статистики

]]> http://blog.web2.com.ua/2009/12/23/memcached/feed/ 1 Шрифты для Web http://blog.web2.com.ua/2009/12/09/shriftyi-dlya-web/ http://blog.web2.com.ua/2009/12/09/shriftyi-dlya-web/#comments Wed, 09 Dec 2009 11:35:06 +0000 wert2all http://blog.web2.com.ua/?p=908 Не знаю как вам, но у меня всегда проблема при вёрстке – это шрифты. А фиг их знает, какие писать, как оно будет в выглядеть в гавне Сафаре и какая версия тоже гавна Висты установлена в пользователя. Тогда нашлось в просторах интернету такая статейко, где написаны все универсальные шрифты. Создавши файлик CSS отдаю всем нуждающимся:

  • .fTimes{
    font-family: Cambria, "Hoefler Text", Utopia, "Liberation Serif", "Nimbus Roman No9 L Regular", Times, "Times New Roman", serif;
    }

    • 1697-tnrstack

  • .fGeorgia{
    font-family: Constantia, "Lucida Bright", Lucidabright, "Lucida Serif", Lucida, "DejaVu Serif," "Bitstream Vera Serif", "Liberation Serif", Georgia, serif;
    }    1697-georgiastack
  • .fGaramond{
    font-family: "Palatino Linotype", Palatino, Palladio, "URW Palladio L", "Book Antiqua", Baskerville, "Bookman Old Style", "Bitstream Charter", "Nimbus Roman No9 L", Garamond, "Apple Garamond", "ITC Garamond Narrow", "New Century Schoolbook", "Century Schoolbook", "Century Schoolbook L", Georgia, serif;
    }1697-garamondstack
  • .fArial{
    font-family: Frutiger, "Frutiger Linotype", Univers, Calibri, "Gill Sans", "Gill Sans MT", "Myriad Pro", Myriad, "DejaVu Sans Condensed", "Liberation Sans", "Nimbus Sans L", Tahoma, Geneva, "Helvetica Neue", Helvetica, Arial, sans-serif;
    }1697-helveticastack
  • .fVerdana{
    font-family: Corbel, "Lucida Grande", "Lucida Sans Unicode", "Lucida Sans", "DejaVu Sans", "Bitstream Vera Sans", "Liberation Sans", Verdana, "Verdana Ref", sans-serif;
    }1697-verdanastack
  • .fTrebuchet{
    font-family: "Segoe UI", Candara, "Bitstream Vera Sans", "DejaVu Sans", "Bitstream Vera Sans", "Trebuchet MS", Verdana, "Verdana Ref", sans-serif;
    }1697-trebuchetstack
  • .fImpact{
    font-family: Impact, Haettenschweiler, "Franklin Gothic Bold", Charcoal, "Helvetica Inserat", "Bitstream Vera Sans Bold", "Arial Black", sans-serif;
    }1697-impactstack
  • .fMonospace{
    font-family: Consolas, "Andale Mono WT", "Andale Mono", "Lucida Console", "Lucida Sans Typewriter", "DejaVu Sans Mono", "Bitstream Vera Sans Mono", "Liberation Mono", "Nimbus Mono L", Monaco, "Courier New", Courier, monospace;
    }1697-monostack
]]> http://blog.web2.com.ua/2009/12/09/shriftyi-dlya-web/feed/ 0 С обновлением меня! http://blog.web2.com.ua/2008/03/31/wordpress_25/ http://blog.web2.com.ua/2008/03/31/wordpress_25/#comments Mon, 31 Mar 2008 13:50:10 +0000 wert2all http://blog.web2.com.ua/?p=559 Зашёл тут в админку блога и dashboard сказал, что уже WordPress 2.5 вышел. Обновился. ЙО! 2 плагина ушло в небытие и всё намного красивее и удобнее. Сами смотрите.

  • Dashboard
  • Редактирование поста
  • Загрузка картинок
]]> http://blog.web2.com.ua/2008/03/31/wordpress_25/feed/ 2 Хостинг и freehost.com.ua http://blog.web2.com.ua/2007/11/27/hosting-i-freehostcomua/ http://blog.web2.com.ua/2007/11/27/hosting-i-freehostcomua/#comments Tue, 27 Nov 2007 14:44:21 +0000 wert2all http://blog.web2.com.ua/2007/11/27/hosting-i-freehostcomua/ freehost logoДавно не гадил на хостеров, а после перезда и не думаю, что такое будет ;) Уже не впервые поражаюсь с freehost.com.ua. Нет, сказать что-то плохое не хочу, как раз наоборот. Я прозреваю с их суппорта. Во-первых, даже о малейших колупаниях в сервере они сообшают своим клиентам. Приходит такое гламурное письмецо, что мы в 3 часа ночи ребутнём ваш сервер, так что 10 минут ваши прокси-замописки работать не будут ). Это не может не радовать.

Это одна сторона медали. Второе – это “живой” суппорт. Админы быстро отвечают на мыло, посланое к ним. Быстро всё фиксят и даже местами рассказывают, что сделать в следующий раз. У них и аська есть ). Сегодня таки не смог попасть на свой хостинг (по работе часто исспользую), пробывал пинговать с разных точек. Но когда выслал всё им, то быстренько ответили и сказали, что есть проблемка, скоро профиксят.

Такого на предыдущем хостинге мне и не снилось.

]]> http://blog.web2.com.ua/2007/11/27/hosting-i-freehostcomua/feed/ 27 Репозитарии openSUSE в UA-IX http://blog.web2.com.ua/2007/11/23/repozitarii-opensuse-v-ua-ix/ http://blog.web2.com.ua/2007/11/23/repozitarii-opensuse-v-ua-ix/#comments Fri, 23 Nov 2007 16:33:09 +0000 wert2all http://blog.web2.com.ua/2007/11/23/repozitarii-opensuse-v-ua-ix/ Сегодня добавил в cron linux.kiev.ua затягивание репозитария с Compiz и Packman для openSUSE 10.3. Все репозитарии будут находится тут. Кого интересует ещё что-то и надо всё это в UA-IX – обращайтесь. Мне не сложно, а mike@ говорил, что винтов вагон и тележка с кастрюлькой. Сегодня в 2 часа ночи обновятся репозитарий Пакмана и KDE3 c KDE4. В это же время, каждый день эта операция будет повторяться.

А теперь вопрос по-серёзней.

Кому-то надо исошки и пакман для 10.1 версии? Так же на сервере валяется SLICK и девятка. Насколько я знаю, то 9 уже новелом не суппортится, а 10.1 и подавно никому не нужна. Я предлагаю всё это старьё убить и оставить только (пока) исошки с 10.2. Винты есть, но оно никому не надо и лежит мёртвым грузом.

Комментарии висят на форуме, если не будут против, то через недельку-вторую я потру всё ненужное. А Пакманом пользуйтесь! ;)

]]> http://blog.web2.com.ua/2007/11/23/repozitarii-opensuse-v-ua-ix/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