Сайт концерт-холла «ТаймАут»

2009-05-21 09:50комментарии  design  django  done  google  web

Сделал вторую версию сайта концерт-холла «ТаймАут»timeout.dp.ua.
Первая версия выглядела как-то так.
Вторая выглядит так:

сайт ТаймАута

Работает сайт на Django, альбомы и фотографии хостятся на Google Picasa Web Albums, комментирование при помощи JS-Kit Comments, в браузере помогает JQuery.

Markdown синтаксис по-русски

2009-02-28 21:01комментарии  python  web

Markdown - это легковесный язык разметки текста для веба. Был создан для удобства чтения и написания размеченных текстов. Движок markdown генерирует валидный XHTML. Авторы - John Gruber и Aaron Swartz. Официальная страница проекта и более подробная документация на сайте Daring Fireball.

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

Блочные Элементы

Параграфы

<пустая строка>
Текст параграфа. Может быть
разбит на несколько строк.
<пустая строка>

Переводы строк

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

Текст параграфа.<пробел><пробел>
Этот текст будет с новой строки.

Заголовки

Заголовок первого уровня H1
===========================


Заголовок второго уровня H2
---------------------------

или так

# Заголовок первого уровня H1
## Заголовок второго уровня H2
###### Заголовок шестого уровня H6

или так

# Заголовок первого уровня H1 #
## Заголовок второго уровня H2 ##
###### Заголовок шестого уровня H6 ######

Цитаты

> Это
> многострочная
> цитата

или так

> Это
многострочная
цитата

Списки

Ненумерованные:

* красный
* зеленый
* синий

или так

- красный
- зеленый
- синий

или даже так

+ красный
+ зеленый
+ синий

Нумерованные:

1. Первый
2. Второй
3. Третий

Код

Отступ в четыре пробела или один таб генерирует блок кода:

<пробел><пробел><пробел><пробел>print 'Hello, World!'

Горизонтальная линия

* * *

или так:

***

или так:

------

Строчные элементы

Ссылки

Инлайн ссылки

Это простая [ссылка](http://rukeba.com/) в тексте.
Это [ссылка](http://rukeba.com/ "Титул") с аттрибутом title.

Ссылки в справочном стиле

Это [ссылка][1] в справочном стиле.
...
...
[1]: http://rukeba.com/ "Необязательный титул"

Что бы урл в тексте стал ссылкой его нужно обрамить в < и >

По урлу <http://rukeba.com/> находится мой сайт.

Выделение

Одинарные звездочки генерируют тег <em>

это \*выделенный\* текст

Двойные звёздочки генерируют тег <strong>

это \*\*очень выделенный\*\* текст

Код в строке

Используйте функцию `printf()` для вывода.

Изображения

![alt-текст](http://example.com/image.jpg "Необязательный титул")

или в справочном стиле:

![alt-текст][2]
...
...
[2]: http://example.com/image.jpg "Необязательный титул"

Дополнительно

Экранирование

Для экранирования служебных символов маркдауна нужно использовать обратный слеш \

Helicon Ape released

2009-01-16 10:09комментарии  apache  done  iis

Замечательный модуль Helicon Ape для IIS, который эмулирует среду исполнения Apache, вышел.

Сделал определитель аппликатур гитарных аккордов

2009-01-10 15:07комментарии  chords  done  music  web

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

И вот встречайте - Гитарные аккорды.
Никаких изображений, никаких лишних запросов к серверу. Все аккорды уже на странице. Выбирайте нужный. Работают ссылки с аккордами вида http://rukeba.com/chords/#Cm7.

Правда, это бета. Номера пальцев пока не отображаются. И аккорды конечно не все. В старых браузерах возможно будет отображаться ерунда какая-нибудь. Надеюсь, у меня хватит времени сделать всё до конца.

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

Подсветка синтаксиса Apache

2008-12-27 14:27комментарии  apache  done  web

Появилась у меня необходимость на страницах блога HeliconTech синтаксически подсвечивать конфигурационные файлы Apache (httpd.conf и .htaccess). Первым делом я пошёл на сайт Ивана Сагалаева, но оказалось, что его замечательный highlight.js подсвечивать конфигурацию Apache не умеет. Но также выяснилось, что написать новую подсветку синтаксиса довольно просто. С сайта документации Apache я получил html-страницу, на которой были все (*почти все :) его директивы. После некоторого шаманства с регулярными выражениями из этого html-файла я получил список всех директив Apache в простом текстовом файле. Дальше, немного потрудившись, получилось и само описание синтаксиса.

Скачать highlight-apache.zip
Пример работы

Для использования распакуйте архив на сайте и в html-документах внутри тега head необходимо добавить:

<link rel="stylesheet" href="apache.css">
<script src='highlight.js'></script>
<script src='apache.js'></script>
<script>hljs.initHighlightingOnLoad();</script>

Не забудьте поправить пути к файлам.

Подсветка работает. И я радуюсь.

2009-01-03 UPDATE: Иван Сагалаев добавил подсветку apache в проект highlight.js!

2009-01-04 UPDATE: сделал новый стиль - Magula. Тоже уже принят в основной бранч.

Дизайн для блога HeliconTech

2008-12-24 11:09комментарии  design  done  web

Сделал дизайн для блога HeliconTech — helicontech.blogspot.com.
Дизайн простой и лёгкий, в стилистике головного сайта.

HeliconTech Blog

P.S.
Наконец-то я присел на твиттер — follow me on twitter.com/rukeba.
А самая лучшая соцсеть — френдфид!

Акваруим / Лошадь белая

2008-12-10 09:00комментарии  music

Кто ещё не послушал новый альбом — настоятельно рекомендую. Гугл поможет найти место, откуда можно скачать. Звучание идеальное.

Можно уже петь — аккорды к «Лошадь белая».

Игра «Жизнь»

2008-12-03 21:36комментарии  done  software

Лет семь назад, ещё будучи студентом, увлёкся я игрой «Жизнь» Джона Хортона Конвея и прочими подобными интересными штучками. В результате родилась моя реализации игры.

Игра Жизнь

Получилась довольно быстрая и интересная реализация. Исходники на Borland Delphi к сожалению не сохранились. Вполне прилично работает и под Wine.

Скачать life.exe.zip

CSS Reset

2008-12-02 20:14комментарии  design  howto  web

Все, кто пытался сделать нетривиальную html-страницу, которая будет отображаться более чем в одном браузере, знают о проблемах совместимости (а точнее несовместимости :) между ними. Об этом уже очень много написано. Самое первое лекарство, которое применяю я -- Css Reset. Файл стилей сайта я всегда начинаю так:

/*
Copyright (c) 2007, Yahoo! Inc. All rights reserved.
Code licensed under the BSD License:
http://developer.yahoo.net/yui/license.txt
version: 2.3.1
*/
body {color:#000;background:#FFF;}
body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,
    pre,code,form,fieldset,legend,input,textarea,p,blockquote,th,td{margin:0;padding:0;}
table{border-collapse:collapse;border-spacing:0;}
fieldset,img{border:0;}
address,caption,cite,code,dfn,em,strong,th,var{font-style:normal;font-weight:normal;}
li {list-style:none;}
caption,th {text-align:left;}
h1,h2,h3,h4,h5,h6{font-size:100%;font-weight:normal;}
q:before,q:after{content:'';}
abbr,acronym {border:0;font-variant:normal;}
sup,sub {line-height:-1px;vertical-align: text-top;}
sub {vertical-align:text-bottom;}
input, textarea, select{font-family:inherit;font-size:inherit;font-weight:inherit;}

Эти строки сбрасывают стили html-элементов для всех браузеров. А после я определяю стили как мне нужно. Сейчас доступна уже 3я версия этой фичи, но меня вполне устраивает и та, которая уже есть.

CSS Reset - часть большого проекта Yahoo User Interface, в которой есть ещё много интересных возможностей.

CSS Reset облегчает мне вёрстку, и я радуюсь!

Комментирование с помощью JS-Kit

2008-12-01 21:34комментарии  a1blog  web

Месяц назад я обновил свой блогодвижок до Django 1.0. Прежние FreeComments работать перестали, а сделать комментирование по-новому руки всё не доходили. А вчера я вспомнил о замечательном проекте JS-Kit Comments. Идея до гениальности проста и удобна -- вставляете в html код

<div class="js-kit-comments" permalink=""></div>
<script src="http://js-kit.com/comments.js"></script>

и всё - комментарии рисуются, постятся, модерируются. Хранятся - на серверах JS-Kit. Стилями подгоняете под свой дизайн. Есть rss-лента для комментариев каждой странички. Недостаток в том, что комментарии не индексируются, но для меня это не очень важно (ресурс не очень комментируемый :). Всё бесплатно, естественно.

Красота. Я радуюсь.

← Prev 1 2 3 4 5 Next →