Сайт концерт-холла «ТаймАут»
Сделал вторую версию сайта концерт-холла «ТаймАут» — timeout.dp.ua.
Первая версия выглядела как-то так.
Вторая выглядит так:
Работает сайт на Django, альбомы и фотографии хостятся на Google Picasa Web Albums, комментирование при помощи JS-Kit Comments, в браузере помогает JQuery.
Markdown синтаксис по-русски
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-текст][2]
...
...
[2]: http://example.com/image.jpg "Необязательный титул"
Дополнительно
Экранирование
Для экранирования служебных символов маркдауна нужно использовать обратный слеш \
Helicon Ape released
Замечательный модуль Helicon Ape для IIS, который эмулирует среду исполнения Apache, вышел.
Сделал определитель аппликатур гитарных аккордов
Однажды мне в голову пришла мысль, что сделать определитель аппликатур гитарных аккордов с веб-интерфейсом - это интересно и нетривиально. В сети я раздобыл уродливую программку, которая могла показывать такие аккорды, в внутри были текстовые файлы с этими самыми аппликатурами. Из кучи файлов я сделал один и отформатировал его удобным образом. Потом родился питон-скрипт, который сгенерировал хтмл.
И вот встречайте - Гитарные аккорды.
Никаких изображений, никаких лишних запросов к серверу. Все аккорды уже на странице. Выбирайте нужный. Работают ссылки с аккордами вида http://rukeba.com/chords/#Cm7.
Правда, это бета. Номера пальцев пока не отображаются. И аккорды конечно не все. В старых браузерах возможно будет отображаться ерунда какая-нибудь. Надеюсь, у меня хватит времени сделать всё до конца.
Пользуйтесь на здоровье. Отзывы и критика принимаются в гуглогруппе или в комментариях.
Подсветка синтаксиса Apache
Появилась у меня необходимость на страницах блога 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
Сделал дизайн для блога HeliconTech — helicontech.blogspot.com.
Дизайн простой и лёгкий, в стилистике головного сайта.
P.S.
Наконец-то я присел на твиттер — follow me on twitter.com/rukeba.
А самая лучшая соцсеть — френдфид!
Акваруим / Лошадь белая
Кто ещё не послушал новый альбом — настоятельно рекомендую. Гугл поможет найти место, откуда можно скачать. Звучание идеальное.
Можно уже петь — аккорды к «Лошадь белая».
Игра «Жизнь»
Лет семь назад, ещё будучи студентом, увлёкся я игрой «Жизнь» Джона Хортона Конвея и прочими подобными интересными штучками. В результате родилась моя реализации игры.
Получилась довольно быстрая и интересная реализация. Исходники на Borland Delphi к сожалению не сохранились. Вполне прилично работает и под Wine.
CSS Reset
Все, кто пытался сделать нетривиальную 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
Месяц назад я обновил свой блогодвижок до 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-лента для комментариев каждой странички. Недостаток в том, что комментарии не индексируются, но для меня это не очень важно (ресурс не очень комментируемый :). Всё бесплатно, естественно.
Красота. Я радуюсь.
