Почему мне не нравятся CSS-сетки

CSS-сетки (CSS grid systems) - это же фиксированная разметка! Размеры элементов в пикселях - как 2002! Я не могу увеличить страницу и просто читать - нужно прокручивать. Не могу уменьшить окно и просто читать - нужно прокручивать. Зачем?

Я представляю вам альтернативу... Invisible CSS framework!

Я пользовался масштабируемой версткой довольно долго, и решил отделить основу. Не повторяй себя (Don't Repeat Yourself), да?

<aside class="sideleft">
My cool sidebar.
</aside>
<section class="withls"> <!-- that means "with left sidebar" -->
Lorem ipsum dolor sit amet...
</section>
Как видите, это очень просто. Но не надо думать, что на нем нельзя сделать что-нибудь сложное. Вот:

В Invisible есть сброс (CSS reset), настройки шрифтов, основные margin'ы, 50/50 и стандартный 2/3-колоночный макет (layout не совсем «макет», но слова лучше я не нашел. разметка?). Он модульный и написан на CleverCSS, а собирается pake.

Качать здесь, пользуйтесь на здоровье - public domain. А еще можно забрать исходники из Bazaar'а ( bzr branch lp:invisible ) и собрать самому - например, с меньшим количеством модулей (для сборки нужны clevercss и cssutils).

P.S. по поводу того, что текст выглядит как перевод - он и есть перевод. я сначала пишу на английском.
Постовой: forex webmoney обмен sms forex sms пополнения webmoney и открытие forex счетов
2010-03-05 20:09:45 | Теги: web20 markup | Комментарии
Закругленные уголки и градиенты с помощью jQuery

Ох, кажется, я сделал свой первый jQuery-плагин =)

включи картинки включи ааааааааааа

Он называется JACG: Just Another Corners&Gradients (просто еще одни углы и градиенты), и он просто работает.

Фишка в том, что он старается быть как можно более нативным и использовать самые лучшие технологии, доступные на запущенном браузере (например, в Opera <= 10.10 используется SVG-градиент и на нем же уголки, а в 10.50 - SVG-градиент и CSS-уголки. CSS-уголки и градиенты на Firefox >= 3.6, CSS-уголки и градиенты картинкой - тоже мое приложение - на 3.5 и ниже). Код появился в моих личных проектах. Когда я стал его использовать сразу в двух, решил сделать плагином, а не копипастом.

Оно все размещено в проекте на Launchpad - код, багтрекер и все такое. А еще есть страничка на jQuery, там можно скачать плагин и проголосовать за него. Но качать лучше Bazaar'ом, чтобы потом обновлять удобно было и вообще, VCS же. bzr branch lp:jacg

Постовой: все для lineage 2 на gamesgold.ru
2010-02-15 19:44:04 | Теги: web20 javascript markup | Комментарии
Игры на HTML...
...вместо Flash (:

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

Но как быть с играми? Да, при знании jQuery (а он намного проще ActionScript!!) можно сделать простую игру ;)

Пример - сборка АК, подсказал один товарищ. Надо не так много: средство против лени, фото разобранного автомата (идите в гугл!), графический и текстовый редакторы, нормальный браузер (Safari, Chrome или Firefox).

Я не буду подробно расписывать каждую строчку - скажу лишь, что с помощью jQueryUI мы придаем деталям draggable и создаем цели, куда они droppable. Тут сильно не доделано все - можно деталь поместить не в то место и отображается все это только в консоли. Доработаете и сделаете таймер - будет вам игра :)

<!DOCTYPE HTML>
<html><head><title>AK Game</title>
<script src="http://myfreeweb.ru/media/mfwjs/jquery.1.3.2.min.js" type="application/x-javascript"></script>
<script src="http://myfreeweb.ru/media/mfwjs/jquery-ui-1.7.2.custom.min.js" type="application/x-javascript"></script>
<script type="text/javascript">
$(document).ready(function(){
$('.piece').draggable({ cursor: 'crosshair' });
$('#t_2').droppable({ drop: function(event, ui){
console.log('dropped to 2'); } });
$('#t_3').droppable({ drop: function(event, ui){
console.log('dropped to 3'); } });
$('#t_4').droppable({ drop: function(event, ui){
console.log('dropped to 4'); } });
});
</script>
<style type="text/css">
.target { position: absolute; }
#t_2 { margin: 55px 0px 0px 215px; width: 120px; height: 150px; }
#t_3 { margin: 10px 0px 0px 277px; width: 177px; height: 22px; }
#t_4 { margin: 5px 0px 0px 100px; width: 128px; height: 32px; }
</style></head>
<body>
<div id="ak">
  <div class="target" id="t_2"></div><div class="target" id="t_3"></div><div class="target" id="t_4"></div>
  <img src="1.png" alt="включи картинки!"/>
</div>
<img src="2.png" id="2" class="piece" alt="включи картинки!"/>
<img src="3.png" id="3" class="piece" alt="включи картинки!"/>
<img src="4.png" id="4" class="piece" alt="включи картинки!"/>
</body></html>
СКАЧАТЬ демо (картинки + код выше)
Постовой: Создание сайта визитки
2009-11-30 20:32:47 | Теги: test web20 apps javascript markup | Комментарии
Прячем части страницы от Google

Все вебмастера знают о том, как прятать целые страницы от поисковых роботов (robots.txt, meta-теги). Но далеко не все догадываются, что можно запрещать индексирование текста/анкора/добавление в сниппет определенной части страницы.

Это очень полезно, если в сниппеты попадают информационные ссылки и всякие копилефты из подвала, а еще... если индексируется пример статьи, который каждый раз разный (юзер кликает, а там такого нет). Примеры из личного опыта ;)

Итак, все просто для Google. У остальных вряд ли есть что-то подобное.

Это индексируется.
<!-- googleoff: %s -->
Это не индексируется/попадает в сниппет.
<!-- googleon: %s -->
Это тоже индексируется.

где %s - index, anchor, snippet или all. Смотря что нужно отключить.
Например:

ПОРОЛЬ ОТ АСЬКИ ВСЕХ И ОТ МЫЛА: <!--googleoff: snippet-->123456<!--googleon: snippet-->
- тут все понятно, да? Сам пароль не попадает в сниппет - пользователь интересуется, заходит, видит тысячи попандеров, кликает.

Официальная документация - здесь.

Постовой: программирование и дизайн, новости.
Национальная экономика
2009-11-26 22:03:19 | Теги: web20 google markup | Комментарии
Серверная виртуализация

Меня тут свои люди из хостинговой компании просили отговорить покупать Virtuozzo (: Отговорил.

Я знал о том, что есть свободные альтернативы, но особо не изучал. Оказывается, OpenVZ и тот самый Virtuozzo используют одно и то же ядро системы, а что это значит - догадаться не сложно. Свободы-то и нету! VDS покупается ради того, чтобы делать все, что угодно. Хоть ставить модули ядра.

Гугл и прочие умные сайты привели меня к Xen - самой правильной технологии виртуализации. Не смотря на то, что российские (да и не только) хостинг-провайдеры пока в основном продают VPS на одном ядре (как OpenVZ), все-таки бывает правильный vps хостинг.

Xen работает как обычная виртуальная машина типа всеми любимого VirtualBox, но задействует все серверное железо, а значит, что это лучший вариант для Virtual Dedicated Server. Причем такие виртуальные сервера стоят не дороже OpenVZ'шных. На Xen можно поставить хоть DOS - интересно, под него реально собрать nginx? :)

Технически это устроено не так сложно. В Xen используется паравиртуализация. Это подход, означающий предоставление виртуальным машинам програмный интерфейс, похожий на существующее железо сервера. Запускается на Linux и других Unix-подобных ОС, но запускаться в нем может даже обычный Windows - с помощью аппаратных технологий вроде Intel VT. Короче, это то, что нужно.

Хватит извращаться с установкой Django на общественный хостинг (кстати, вот так работает этот сайт) - покупайте VDS!

2009-11-21 19:11:08 | Теги: test web20 hosting | Комментарии
Client-side slug

Slug - короткое название статьи.

У Django есть нужные средства. Но стоит ли нагружать сервер? Да ладно, нагрузки там почти никакой, но удобно ли? Иногда хочется исправить то, что сделано автоматически.

В общем, лучше генерировать на лету с помощью syncTranslit. Наша задача - встроить это в админку Django. На первый взгляд кажется сложным - там же кучи шаблонов и видов, не разберешься в них... Стоп, а подумать?

Оказалось довольно просто: в change_form.html надо заменить

{% if adminform and add %}
<script type="text/javascript">
document.getElementById("{{ adminform.first_field.auto_id }}").focus();
</script>
{% endif %}

на

{% if adminform and add %}
   <script type="application/x-javascript"
     src="http://myfreeweb.ru/media/mfwjs/jquery.1.3.2.min.js"></script>
   <script type="application/x-javascript"
    src="http://myfreeweb.ru/media/mfwjs/jquery.synctranslit.min.js"></script>
   <script type="text/javascript">
    document.getElementById("{{ adminform.first_field.auto_id }}").focus();
    $(document).ready(function () {
    if ($('#id_slug') && $('#id_name')) {
    $('#id_name').syncTranslit({destination: 'id_slug', urlSeparator: '_'});
    }
    });</script>
{% endif %}

И все хорошо :) Конечно, если поля называются не name и slug (самые очевидные названия), то надо поменять их.

Постовой: раскрутка сайтов
2009-11-13 17:34:38 | Теги: web20 django javascript | Комментарии
Jolicloud

Пришло приглашение на тест 2 альфа-версии Jolicloud - ОС для нетбуков. Давно хотел что-нибудь подобное... дождался :)

Для пользователя - это такой линукс, у которого красивый интерфейс, можно поставить веб-приложения, Google Chrome 4.x, Skype, Dropbox и даже Spotify (!!!) одной кнопкой. Технически - это Ubuntu Netbook Remix с другим оформлением и программой Dashboard. Нет, не маковский с виджетами, а панель для установки тех самых приложений (и зачем-то показывает, какие приложения установили друзья).

InternetAppDir

Веб-приложения - это "закладки" Mozilla Prism. То есть просто окно, занятое полностью тем приложением.

Flickr

Firefox неплохо допилен (а на самом деле это одно расширение) и не занимает так много места ;) А если убрать панель закладок - вообще отлично.

Firefox

Короче, это та самая система для нетбуков. Если бы с ней продавались Eee PC, никто бы не ставил на них венду. А то у Xandros не все в порядке с юзабилити и обновлением софта.

Постовой: заработай на своем блоге.

И самое главное! Есть 9 инвайтов, почту в коментарии.

2009-11-07 22:25:11 | Теги: test beta web20 linux apps | Комментарии
Krosswordr Autowiki

(для тех, кто не знает: krosswordr.ru - мой проект, словарь кроссвордных понятий)

Вот я подумал, а почему бы не добавить на krosswordr.ru немножко wiki-стиля? Не в смысле всеобщего редактирования - всего лишь ссылки между страницами. Но добавлять руками - лень, да и вообще маразм какой-то. По базе скрипт прогонять? Тоже лень, да и попортить можно.

И сделал я это прямо в шаблоне. Template Tags делаются просто. Нагрузка на сервер, скорость рендеринга? Ну так кеш же. Все работает предельно просто:

Krosswordr Autowiki

Попробовать можно, например, тут.

Постовой: расчет каско. Все страховые компании. Бесплатно.
2009-11-07 17:52:39 | Теги: services web20 django | Комментарии
Drupal - CMS для ленивых

Я тут недавно разговаривал о создании сайта с одним человеком. И посоветовал ему Drupal. Причем я его никогда не пробовал :) Только видел сайты на нем. Например, ubuntu.com.

Решил таки проверить популярную CMS, которую все выбирают. Зашел в демо админки. И увидел кучу ссылок... однако, в них все понятно!

drupal admin

Это намного проще, чем писать CMS на Django (хотя на Django лучше ;) не будет лишнего) или модифицировать Wordpress под не-совсем-блог.

Однако, популярность Drupal удивляет. При том, что там много лишнего и сайты на нем при высокой нагрузке отключаются (Apache/PHP не умеют то, что умеют Nginx/Tornado - выдерживать тысячи запросов), им пользуются почти все. Википедию вам в помощь: NASA, FedEx, White House... Друпалом занимаются очень многие студии веб-дизайна, друпал разработчики.

2009-11-02 13:02:54 | Теги: test web20 blog apps | Комментарии
Зачем всё это нужно?
да картинки включи!
Постовой:

Избавляйтесь от хлама. куплю лежалую трубу.

9 октября ждем игру по Star Wars: The Clone Wars. игровые новости 2009

2009-11-01 19:44:14 | Теги: web20 apps | Комментарии