Праздник Игоря

«Телевизор — лишняя абсолютно вещь в жизни, пока это не плазменный экран на всю стену…»

Попробовать комментировать

С одной замечательной девушкой поиграли в диджеев радио, которые записывают рекламные ролики.

Рекламировать решили меня, Игоря Кононученко, причем на украинском языке. По закону о радиовещании реклама должна быть на украинском.

• Мое исполнение
• Очаровательной девушки

Писалось на диктофон телефона, так что качество не самое лучшее.

Комментарии(1)

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

«Приглашаем вас на феерическое и эпатажное травести шоу» -)

Попробовать комментировать

Я начинаю серию статей, в которых последовательно опишу процесс создания фотогалереи. Эту галерею я написал для одного из проектов.

Задача

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

Начало разработки

В самом начале я получил, штмл верстку галереи. Не идеально, но концепция понятна. За прототип дерева было взято цсс дерево из техногрета Артемия Лебедева. . Недостатоки того дерева: поддерживает только один уровень вложенности, в ИЕ плохо выглядит. Уже вырисовывается первая задача.

Создание дерева

Я подумываю об использовании дерева из библиотеки ext.js. Но решаю не внедрять библиотеку в этот проект. В проекте использую только prototype.js library.

Задача: Создать дерево с неограниченной вложенностью. Должно позволять добавлять, удалять и редактировать узлы.

Задача ясна. Первое что решаю сделать, добавить в дерево поддержку ИЕ и научить неограниченной вложенности. Делаю это, используя просто штмл и цсс. До динамики еще время дойдет. В итоге получаю такой вид дерева. Из рисунка видно что начальный вариант несколько изменился. Штмл такого вида: <ul class="ul_maincategory"> <li class=""> <div> <p> <a class="sc" href="javascript:expand_or_collapse();"><span class="expanded_node" /> </a><a class="title" title="ARATA" href="javascript:open_item();">ARATA</a></p> </div> <ul class="ul_subcategory"> <li class=""> <div> <p style="left: 1.89em;"> <a class="sc" href="javascript:expand_or_collapse();"><span class="expanded_node" /> </a><a class="title" title="Подкатегория1" href="javascript:open_item();">Подкатегория1</a></p> </div> <ul class="ul_subcategory" style="border-left: 2px solid white; margin-left: -1px;"> <li class=""> <div> <p style="left: 1.89em;"> <a class="sc" href="javascript:expand_or_collapse();"><span class="expanded_node" /> </a><a class="title" title="Подкатегория1" href="javascript:open_item();">Подкатегория1</a></p> </div> <ul class="ul_subcategory" style="border-left: 2px solid white; margin-left: -1px;"> <li> <div> <p> <a class="sc" href="javascript:expand_or_collapse();" /><a class="title" title="Подкатегория1" href="javascript:open_item();">Подкатегория1</a></p> </div> </li> </ul> </li> </ul> </li></p> </ul> </li> <li> <div> <p> <a class="sc" href="javascript:expand_or_collapse();" /><a class="title" href="javascript:open_item();" title="CATALANO">CATALANO</a></p> </div> </li> <li> <div> <p> <a class="sc" href="javascript:expand_or_collapse();" /><a class="title" href="javascript:open_item();" title="MONILE">MONILE</a></p> </div> </li> <li> <div> <p> <a class="sc" href="javascript:expand_or_collapse();" /><a class="title" href="javascript:open_item();" title="LENVAL">LENVAL</a></p> </div> </li> <li> <div> <p> <a class="sc" href="javascript:expand_or_collapse();" /><a class="title" href="javascript:open_item();" title="ROBERTO GIANNOTTI">ROBERTO GIANNOTTI</a></p> </div> </li> </ul>

Вырисовывается задача с помощью джаваскрипта создать тоже самое.

На вход нужно давать данные. Выбор формата очевиден.

JSON, лучше в JS нет!

Ручками создаем данные. С помощью этих данных будет отображено дерево категорий.

var data={nodes:[{name:'ARATA',hint:'ARATA',url:'ARATA',expanded:false,languages:[{language:'Русский',name:'ARATA',hint:'ARATA'},{language:'English',name:'ARATA',hint:'ARATA'}],categoryId:58,childNodes:[{name:Кольца,hint:Кольца,url:'arata/rings',expanded:false,languages:[{language:'Русский',name:Кольца,hint:Кольца},{language:'English',name:'Rings',hint:'Rings'}],categoryId:64}]},{name:’CATALANO’,hint:’CATALANO’,url:’CATALANO’,expanded:false,languages:[{language:'Русский',name:'CATALANO',hint:'CATALANO'},{language:'English',name:'CATALANO',hint:'CATALANO'}],categoryId:59},{name:’MONILE’,hint:’MONILE’,url:’MONILE’,expanded:false,languages:[{language:'Русский',name:'MONILE',hint:'MONILE'},{language:'English',name:'MONILE',hint:'MONILE'}],categoryId:60},{name:’LENVAL’,hint:’LENVAL’,url:’LENVAL’,expanded:false,languages:[{language:'Русский',name:'LENVAL',hint:'LENVAL'},{language:'English',name:'LENVAL',hint:'LENVAL'}],categoryId:62},{name:’ROBERTO GIANNOTTI’,hint:’ROBERTO GIANNOTTI’,url:’ROBERTO GIANNOTTI’,expanded:false,languages:[{language:'Русский',name:'ROBERTO GIANNOTTI',hint:'ROBERTO GIANNOTTI'},{language:'English',name:'ROBERTO GIANNOTTI',hint:'ROBERTO GIANNOTTI'}],categoryId:63}]};

Итак, можно заняться наконец рендерингом дерева.

Рендеринг дерева

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

В объектной структуре особо нечего выдумывать, классы те же что и везде (класс дерева и класс узла):

Tree – содержит в себе ноды, рисует дерево итд.

TreeNode – реализация логики узла.

var Tree = Class.create(); Tree.prototype = { initialize:function(container,dataSource) { this.el = $(container); this.data= dataSource; this.el.className = «tree»; this.childNodes =new Array(); this.el.onclick = this.deselectAll.bindAsEventListener(this); this.render(); this.selectedNode = this; }, render:function() { this.nodesEl =createElement(»ul»,»",this.el,»ul_maincategory»); this.createChilds(); this.renderChilds(); this.updateConnectors(); }, createChilds:function() { for(var i=0;i<this.data.nodes.length;i++) { this.appendNode(new TreeNode(this.data.nodes[i],this,this)); } }, renderChilds:function() { for(var i=0;i<this.childNodes.length;i++) { this.childNodes[i].render(); } }, appendNode:function(child) { this.childNodes.push(child); }, appendNodeToSelected:function(config) { var selectedNode = this.selectedNode?this.selectedNode:this; node = new TreeNode(config, this,selectedNode); if(selectedNode){ selectedNode.appendNode(node); selectedNode.updateNodesEl(); } else {this.appendNode(node);} node.render(); this.updateConnectors(); return node; }, updateNodesEl:function() {}, setSelectedNode:function(node) { if(this.selectedNode&&this.selectedNode!=this) this.selectedNode.deselectNode(); this.selectedNode = node; if(this.onSelect) this.onSelect(node); }, selectFirstNode:function() { this.childNodes[0].onClickHandler(); }, deselectAll:function() { this.setSelectedNode(this); }, deleteSelectedNode:function() { if(!this.selectedNode) return; this.selectedNode.deleteNode(); this.updateConnectors(); }, updateConnectors:function() { //update recursively childs for(var i=0;i<this.childNodes.length;i++) { this.childNodes[i].updateConnectors(); } } }

Из полезного, метод удаления выбраного нода (deleteSelectedNode), добавление нода (appendNode), добавление нода в дети текущего узла (appendNodeToSelected).

Код нода не показываю тут, так как его много. В ноде реализованы методы редактирующие его отображение и данные.

setTitle:function(title) { this.titleEl.innerHTML = title; this.data.name = title; this.title = title; }, setHint:function(hint) { this.titleEl.title = hint; this.data.hint = hint; this.hint = hint; }, setUrl:function(url) { this.data.url = url; }, А также код удаления: deleteNode:function() { this.parentNode.childNodes=deleteElementFromArray(this.parentNode.childNodes,this.getIndex()); destroyElement(this.el); this.el = null; if(this.parentNode.childNodes.length==0) {destroyElement(this.parentNode.nodesEl); this.parentNode.nodesEl=null;}; if(this.parentNode!=this.tree) this.parentNode.updateNodesEl(); this.tree.selectedNode = null; },

В завершении

Задача выполнена, дерево отображается в ИЕ и ФФ; позволяет добавлять удалять и редактировать ноды; содержит удобное АПИ для работы.

Пример посмотреть можно здесь.

Скачать пример здесь.

В следующей части я напишу серверную часть, которая будет отображать дерево.

English verison of article

Комментарии(3)

Попробовать комментировать

Завершился очередной «КИГ ПРЕЗД». В этот раз размах был настолько большим, что пришлось сделать официальное событие с призами.

Суть события

Это был переезд с перевозкой холодильника и большого количества вещей.

Люди, помогавшие мне в этом деле, получили замечательные призы: пиво, водку и сигареты (такие надписи были на пакетах с призами)

Итак, призеры: Джерико (пиво), Найкон (сигареты), Хеш (водка). Поздравляю.

Фотоотчета не будет ввиду отсутсвия фотоматериала.

Попробовать комментировать

Идея родилась при просмотре этой страницы

Попробовать комментировать

Киев. Чуть позже чем новый 2007 год. Вечер. Штаб квартира коммандира. Просмотр секретного кода агента по кличке Рыжий. Тогда мы не знали что на этот код лучше бы вообще никогда не смотреть. Едва слышимый крик: «Н. этот код заразный, не трогай его!!!». Гудки в телефонной трубке: «пи — пи — пи — пи»…

Попробовать комментировать

Прочитал позавчера эту книгу. За один присест съел. Очень интересно. Огромное количество хороших иллюстраций. Вчера решил отдельно внимательно посмотреть на них. Заметил, что раза 3 в картинках попадается «Оптимус мини 3» — дивайс Лебедева (издатель себя пропиарил — хех)

Очень рекомендую книгу. Полезна не только дизайнерам.

Комментарии(1)

Идея может быть отличной, но реализация говном.

Идея может быть простой и всем известной, но реализация отличной.

Классная реализация важнее идеи.

Комментарии(2)

Частое оправдание, не правда ли?

Решение простое.

Между делом присесть 20 раз, или отжаться от пола раз 30, прямой участок дороги не пройти, а пробежать.

В метро пока едешь, размять пальцы, шею. Можно в транспорте упереться в поручень, используя статическое усилие.

Спортом можно заниматься без напрягов, без траты часов на него.

Начните с очень малого, но начните. Прямо сейчас.

Комментарии(1)

Когда тебе говорят «Мы в этом виноваты», не питай иллюзий — тебе говорят, что виноват ты.

Комментарии(1)

Посчытай, пожалуйста.

Скильки сейчас времья?

Попробовать комментировать

Нужно пополнять постоянно. Постепенно он угасает. Когда кажется что его нет, надо себя заставить сделать действие, его станет еще меньше. Но через какое то время его станет больше.

На себе проверенно в плане физических и умственных нагрузок.

Комментарии(2)

Поставьте, пожалуйста, копировальный аппарат чтоб люди могли «отксерить» документ в случае необходимости. Сделайте услугу платной. Вам деньги, нам приятно (людям)

Попробовать комментировать

В прошлую субботу посетил я концерт. Скажу сразу, я не ходок по концертам, а в дворце «УкраЇна» вообще был только пару раз очень давно на каких то детских новогодних концертах. Почему решил пойти? – Интересный Гришко человек, добрый. Видел раньше его по телевизору — заинтересовался. За дней 20 до концерта взял 2 билета по 80 грн – они были самыми дешевыми, думал начать с малого можно.
День концерта.
Большое количество людей на подходе к залу. Женщины в платьях, мужчины в дорогих костюмах. Известные лица мелькают.
Внутри огромный холл. Выясняется что наши места на балконе на третьем этаже. Проходим к входу в зал. В холле сидят девушки с ленточками как на конкурсах, модельной внешности, тоненькие и высокие. Я подумал, что как всегда в концерт втулят каких то моделей (ну такая уж традиция, по крайней мере, в тех концертах, что по телевизору иногда видел. В дальнейшем оказалось что эти девушки от спонсора, ходили и цветы дарили).
Заходим в зал, садимся на свои места. Поет Гришко что то классическое (мы немного опоздали ), очень красиво поет. Ряды стоят очень близко, так что ноги, еле помещаются. Зал оказался довольно таки большим, так что лицо артиста с высоты балкона было сложновато увидеть (экран бы, что ли, поставили). Ну и совковость зала ремонтами так и не скрыли…
На входе нам дали программку, и тут сразу сюрприз… До концерта я прочитал в Интернете программу концерта:
Bessame mucho”- солист В. Гришко Э. Мериконе «Крестный отец» — В. Гришко Д. Руссос «Сувенир» — В. Гришко Д. Руссос (хиты) — солист В. Гришко Goodbye my love, goodbye! — солист В. Гришко Дж. Десен «Если б не было тебя…» — солист В. Гришко Элвис Пресли (лучшее) — В. Гришко «Ямайка» — солист В.Мельник Фрэнк Синатра «Strangers in the night” — солист В. Гришко A day…- солист В. Гришко „Нью-Йорк, Нью-Йорк“ — солист В. Гришко Легран „Шербургские зонтики“ — солист В. Гришко „O, sole mio!“ -дует В. Гришко, В. Мельник „Love me tender, love me…“ Элвис Пресли — репертуар — В. Гришко Родригес „Parangues“ — солист В. Гришко Родригес «Kisse volar» — В. Гришко Крис Дебург «Woman in red” — солист В. Гришко На деле оказалось, что в концерте принимают участие еще множество артистов, как очень хороших, так и не понятно что делавших в такой компании.
После Гришко выходит солистка метрополитен опера из Америки и поет очень красиво, меня очень задело, аж глаза покраснели ). Далее был внук легендарного Карузо. Пел профессионально, классически и скучно, я засыпал…
Вышал Мельник(мальчик из шоу „Шанс“ с невероятным голосом). Нервничал он сильно, конечно. И сразу исполнил одну из самых сложных арий Паваротти. Немного не вытягивал из за нервов, но аплодисменты были бурными — это было здорово. Людей цепляет искренность и эмоции.
Потом опять выходил скушный Карузо, солистка метрополитен, Гришко (он радовал неимоверно, правда было видно что организация концерта и ухаживание за остальными участниками концерта отняли много сил).
Дальше был дуэт Гришко — Мельник „O, sole mio!“. В песне был момент когда Мельник не смог вытянуть музыкальную фразу, но в следующей блестяще исправился.
Я сидел и думал откуда берутся такие музыкальные глотки )).
Был мальчик, который поет очень низко, такой бас, что ниже уже некуда…
Маленький мальчик был, пел в дуете с Гришко – понравилось.
Первая часть концерта была классической под живую музыку в исполнении национального оркестра Украины. Вторая – это уже мировые хиты.
Много было участников во второй части. Скажу сразу, что не все понравилось. Не понравилось: — ужасный электронная музыка в аккомпанементе к песням, попросту минусовка как в караоке.. — Наталья Бучинская, которая пела что то очень страшное — Танцюристы различные хоть и хорошо смотрелись, как по мне, их многовато было…

О хорошем). Понравилось очень исполнение арии из „Пятого элемента“ – восхитительно. Исполняла певица имя которой я не запомнил.
Валевская появилась, вместе с Гришко в дуете спели очень красивую, душевную песню. У нее таки классные вокальные данные (но своего она ничего не несет…).
Очень понравилась грузинская певица Тамара Гвердцители. Восторг зала был неописуем, когда она в дуете с Гришко под рояль исполняла старые хиты.
Зал встал когда Гришко закончил петь народную песню „Два кольори“ — очень сильная энергетика этого певца.
В конце был мужик из Америки, голос которого на 5 октав. Веселый дядька.
Под самый конец обессиленный, но счастливый Гришко, сказал спасибо залу, и в чувствах стал на колено и поблагодарил очень искренне.
Спасибо за концерт!

Комментарии(1)