До 2010 ничего не будет

Мое почтение, господа! Спешу сообщить, что в данный момент времени я отдыхаю. До 2010 года не будет ни одного нового поста. Всем удачи и счастливого нового года. Пока =)

JSNES - эмулятор NES написанный на JavaScript

Доброго времени суток всем!

Хочу представить Вашему вниманию уникальную вещицу! JSNES - это эмулятор Nintendo Entertainment System. Многие знакомы с подобными эмуляторами, но этот написан на JavaScript!

JSNES является портом эмулятора vNES написанного на Java. Он использует HTML элемент canvas для отрисовки графики (пользователи Internet Explorer отдыхают в связи с несостоятельность этого браузера). Звук к сожалению не поддерживается.

Перейти на сайт JSNES

На сайте имеется 17 игр в которые можно поиграть. В Firefox 3.5 запускается все нормально, но реально поиграть не получится, так как скорость очень низкая - в лучшем случае 10 кадров в секунду даже на очень хорошем компьютере.

Реальная возможность поиграть это Google Chrome - он запускает эмулятор на полной скорости (50-60 кадров в секунду) на среднем компьютере. У Google Chrome очень хорошая оптимизация производительности canvas.

В любом случае JSNES это больше чем интересный эксперимент - это реальная возможность оценить какие перспективы имеются в будущем для современных JavaScript-систем.

Новый релиз Qooxdoo 0.8.3!

Как и планировалось вышел новый резил Open Source RIA Framework qooxdoo 0.8.3. Это полноценный релиз с множеством улучшений и исправлений. Больше информации о релизе можно найти на официальном сайте в release notes.

Основные новшества:

• Новый Обработчик Форм
  
• Единый API для работы с выбираемыми элементами (списки, деревья и т.д.)
  
• Расширенные методы Привязки данных
  
• Новый FlowLayout
• Новый FlashWidget
• Новый ThemedIframe
• Глобальный Обработчик ошибок
• и много другого и интересного…

На скриншоте показаны некоторые моменты нового обработчика форм:

Qooxdoo 0.8.3 один из самых протестированных и широких релизов на сегодняшний день. Чтобы понять это взгляните на следующий список:

• около 1.700 введений относительно предыдущего релиза
  
• около 300 исправлений ошибок
  
• более 1.100 Unit-тестов
• около 30 браузеров/ОС и их комбинаций постоянно тестируются
  
• около 160 GUI-тестов приложений, полностью автоматизированы
  

Всем разработчикам, использующим qooxdoo рекомендуется обновиться до этого стабильного релиза.
А тем, кто еще не знает - Скачайте и попробуйте.

Конкурс от Concrete5 CMS

Небольшой фото-конкурс от concrete5. Ставьте тег concrete5 у своих фотографий на flickr и они будут рассмотрены для размещения на страницах нового календаря concrete5 на 2010 год. На фотографиях может быть что угодно. Цель - создать календарь сообщества =)

Каждый, чья фотография будет отобрана для включения в календарь получит 1% от продаж календаря. Деньги будут не реальные, вы получите их в качестве денег на счете вашего аккаунта на concrete5.org и сможете приобретать на них товары из Concrete5 Marketplace.

Более подробная информация и все вопросы и ответы на форуме concrete5.org.

Не знаю насколько эта новость интересна и стоит ли оно того, но у меня нет аккаунта на flickr и фотографиями я не занимаюсь, поэтому обойду это дело стороной :D

Conrete5 версия 5.3.2 Русская

Приветствую!

Предлагаю Вашему внимаю последнюю локализованную версию Concrete5 CMS 5.3.2.

Исправлено более 20 ошибок и около 7 дополнений в переводе.

» Скачать дистрибутив

» Скачать только файл локализации (для самостоятельной локализации уже работающего сайта)

Буду признателен за фидбеки. Комментируйте, сообщайте об ошибках, предлагайте идеи. Спасибо всем!

Пользуйтесь!

Ссылки по теме:

• Официальный сайт Concrete5 CMS
• Сайт Русскоязычного сообщества Concrete5 CMS
  

Долгожданная возможность Blogger!

Доброго времени суток!

Настало время презентовать еще один подарок от Blogger в честь его дня рождения - возможность размещать на странице анонс поста со ссылкой вида "Читать далее" для перехода к полному тексту.

Долгое время многие владельцы блогов на платформе Blogspot занимались различными ухищрениями, чтобы создать такую возможность. Теперь разработчики платформы позаботились о нас.

Есть несколько способов реализовать "Читать далее" для поста. Если вы используете новый редактор постов (имеется на Blogger in Draft, либо включите его на своей странице настроек), то на панели инструментов редактора в самом конце есть кнопка "Вставить переход". Кликните на этой кнопке и в том месте где стоит курсор появится "разрыв" страницы. Все что после него не будет показано в анонсе, а только в "Читать далее".

Если вы не используете новый редактор, то переход можно добавить перейдя в режим редактирования HTML и вставив <!-- more --> туда, где должен находиться переход.

В панели редактирования Макета блога в настройках отображения сообщения так же можно заменить "Далее" на что-нибудь более оригинальное, например - "Хочу подробнее... =)".

Есть правда одна проблема, которая сразу же обнаружилась и в официальном блоге люди уже обсуждают ее - эта полезная вещь работает в стандартных шаблонах, но если у вас полностью ваш шаблон, то могут возникнуть проблемы. Например у меня ссылка "Читать далее" не появляется, вместо нее появляется DIV с clear:all и портит мне всю верстку шаблона. Как это решить? Пока не скажу. Эта приятная новость появилась всего несколько часов назад и я еще не разобрался. Будем изучать Blogger API. Нужно изменить код своего шаблона. Разберусь чуть позже.

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

Добавить нужно сразу после вот этих строчек в шаблоне:

    < div class="post-body entry-content" >
      < data:post.body />
      < div style="clear: both;" /> 
    < /div >

Эххх! А все же как приятно! Это как раз то, чего мне не хватало для написания больших постов!

Улыбаемся и машем!

Эммм.... Т.е. Наслаждаемся и пишем!

Удачи =)

Concrete5 - лучшая CMS!

Доброго времени суток!

Я долгое время писал про Concrete5, но ни разу не написал что же это такое, кроме слов, что это система управления контентом, проще говоря - система для создания сайтов.

И что же в ней такого? Очередная CMS, которых и так как грибов осенью после дождя?

Я немного расскажу о Concrete5, надеюсь, Вам понравится. Итак... Начнем!

Для обычного человека, неискушенного в различных интернет-технологиях, создание сайта и механизм работы веб-приложений кажется чем-то мистическим. Как же это все сделано? Это все так сложно - какие-то панели управления, HTML, CSS, права доступа, JavaScript, PHP.

Как мне создать свой сайт в считанные минуты, легко изменять содержимое страниц, текст, изображения, добавить какие-нибудь сервисы? Мне нужно изучать HTML или еще что-то, вдаваться в подробности различных технических тонкостей?

Не обязательно.
Используя новую открытую (читай - бесплатную) систему управления контентом Concrete5 вы можете легко создать сайт со всей современной функциональностью в считанные минуты.

Установка Concrete5 проходит в один шаг. На этой стадии Вам будет предложено ввести название сайта, адрес вашей электронной почты и параметры доступа к базе данных MySQL. После этого вы получите пароль администратора и сразу же можете приступить к работе с вашим сайтом.

Concrete5 отлично работает со всеми современными браузерами. А простота и легкость весьма радуют и впечатляют. Дизайнеры любят Concrete5 за невероятную простоту создания тем. Разработчики любят за использование современных технологий, последних версий PHP, хороший API и использование MVC архитектуры.

Процесс создания и редактирования страниц - сущая простота. Справится даже ваша секретарша-блондинка =). Вы просто переходите в режим редактирования страницы и в реальном времени правите контент, добавляете сервисы и сразу же видите как это будет выглядеть на сайте.

Конечно же присутствует поддержка разных версий страниц и сравнения их отличий и еще много вкусностей.

На официальном сайте можно посмотреть видео-ролики и убедиться в том, что это действительно просто. Также там можно создать свой демонстрационный сайт, чтобы "поиграться" с Concrete5 CMS.

Требуется меньше 10 шагов, чтобы создать свой сайт на Concrete5 CMS:

1. Скачать архив с Concrete5 с официального сайта или с сайта Русскоязычного Сообщества Concrete5 CMS (там пока только файл локализации, дистрибутив появится в ближайшее время), либо с этого блога, но у меня пока версия 5.3.1.1, но сразу русифицированная, последняя же на данный момент это 5.3.2.
2. Распаковать на свой жесткий диск.
   
3. Создать базу данных на вашем сервере (и не забыть записать имя базы данных, сервер, имя пользователя БД и пароль конечно же)
4. Подключиться к Вашему серверу хостинга через любимы FTP-клиент и загрузить распакованное содержимое на сервер (подробности узнавайте у Вашего хостинг-провайдера).
5. Открыть Ваш любимый браузер и перейти на адрес Вашего сайта.
6. Откроется страница со списком информации о возможности установки Concrete5. Посмотрите список, если напротив всех пунктов стоит зеленая галочка, значит все нормально, в противном случае нужно что-то изменить (права доступа к файлам или конфигурацию хостинга, это узнавайте у своего хостинг-провайдера). Если все номально, введите название Вашего сайта, данные для доступа к БД и кликните кнопочку в самом низу. Все! Готово! Concrete5 CMS установлена на Ваш хостинг.

Новая установка будет использовать тему по-умолчанию. Также будет установлено несколько стандартных дополнений.

Создание тем - дело очень простое. Описывать этот процесс сейчас я не стану. Но в скором времени документация по этой теме появится на сайте Русскоязычного Сообщества Concrete5 CMS.

В панели управления на вкладке управления темами можно сразу же устанавливать темы, имеющиеся на официальном сайте Concrete5. С дополнениями можно делать то же самое.

Для редактирования изображений в Concrete5 существует интеграция с онлайн графическим редактором Picnik, что также бывает очень удобно, если нужно поправить фотографию или иное изображение.

Описать все достоинства Concret5 CMS тут я не смогу, да и не ставил такой цели. Лучше всего не 1000 раз услышать, а один раз попробовать! Попробуйте поработать хотя бы с демонстрационным сайтом и я уверяю Вас - если вы не станете использовать ее постоянно, то уж точно не останетесь равнодушны и запомните это название надолго - Concrete5!

Ну и напоследок хочу сказать, что всего несколько дней назад мы открыли Русскоязычное Сообщество Concrete5! Пока там очень мало информации, но мы работаем и развиваемся. Присоединяйтесь к нам, задавайте вопросы, общайтесь, читайте и пишите! Мы всегда рады помочь или поучаствовать!

Спасибо всем!

Сервис для организации чата Chatroll

Представляю Вашему вниманию неплохой сервис для организации чата Chatroll.

Допустим, Вы хотите добавить чат в свой блог на Blogger. Что для этого нужно?

Для начала - заходим на сайт и кликаем "Sign Up", чтобы зарегистрироваться. Далее переходим к созданию чата. Вводим имя чата и, если нужно, правим автоматически сгенерированный URL по своему усмотрению. Кликаем "Next". Теперь выбираем кто сможет общаться в нашем чате - "Public" - любой желающий, даже гость, "Members Only" - только зарегистрированные пользователи. Для блога я предлагаю выбрать "Public", чтобы общаться мог любой человек, посетивший блог.

Все, чат готов. Я не буду описывать настройки чата и различные особенности сервиса. Расскажу лучше, как теперь добавить его в блог или еще куда-нибудь.

Для того, чтобы добавить виджет чата в свой блог кликаем "Embed".

Теперь нам предлагают выбрать цвет фона, рамки, области текста и цвет текста. Я не буду ничего менять. Далее предлагается выбрать размер окна чата, либо ввести его вручную в пикселях. Я ввел 350х350. И, осталось еще две галочки - показывать ли рамку окна и включить ли в чате звук оповещения о поступлении новых сообщений. Рамку я убрал, а звук оставил.

Теперь копируем сгенерированный HTML из поля внизу и вставляем его туда, куда нам нужно. Если вы хотите добавить виджет на панель блога в Blogger, то в разделе управления макетом блога добавьте новый виджет типа "HTML/JavaScript" и скопируйте в него полученный HTML.

Вот такой HTML (у вас будет свой, конечно же):

Count Raven Amiant Blog Chat - Fullscreen

Но у себя я убрал надпись под окном чата, а также обернул его в DIV, чтобы выровнять по центру в теле поста, поэтому HTML все же вот такой:

Мне не нужен чат в блоге, поэтому я не буду этого делать. Я просто добавлю получившийся чат в этот пост для примера.

Чат ниже:

Русскоязычное сообщество Concrete5 CMS

Ну вот, наконец! Основано русскоязычное сообщество пользователей и разработчиков замечательной системы управления контентом Concrete5.

Приглашаю всех, присоединяйтесь к нам!
http://talks.c5cms.ru/

На сайте сообщества в скором времени можно будет найти локализованные дистрибутивы, документацию, модули и шаблоны для Concrete5.

Также доступен форум и Wiki. Общайтесь, задавайте вопросы, предлагайте и критикуйте!

Спасибо всем, кто с нами!

concrete5 CMS - победа!

Ну вот и еще одна маленькая победа на пути к мировому господству =) Кхм-кхм... Шучу ;-)

Итак, собственно, новость:

Concrete5 CMS получила награду Ассоциации коммерсантов США (USCA) "Best of Portland 2009" в категории "Web Site Design".

Пресс-релиз тут.

concrete5 showcase на c5mix

На c5mix появился очень интересный раздел - c5mix showcase.

В разделе представлены десятки сайтов, созданных с использованием CMS concrete5. Многие весьма недурны.

Если вы владелец сайта на concrete5 - есть возможность добавить свой сайт в каталог c5mix showcase.

concrete5 CMS - сайты по теме

Ресурсов, посвященных Concrete5 CMS в сети как-то очень мало. Но некоторые я знаю. Решил поделиться списком со всеми =)

• concrete5.org - официальный сайт concrete5
• CodeBlog.ch - примеры, статьи, трюки, посвященные concrete5
• c5mix - уроки, темы и прочее для concrete5
• Concrete5 The Studio - блог, посвященный concrete5
• Concrete5 Japan - сайт японского сообщества concrete5. Кто бы там чего понял :D
• concrete5.info - немецкий блог о concrete5
• concrete5 Indonesia - сайт индонезийского сообщества concrete5
• concrete5.fr - сайт французского сообщества concrete5
• defunctlife.com - блог, в котором тоже интересуются concrete5 =)
• Blog About Concrete5 CMS - как и видно из названия, это блог о concrete5 CMS
• Denis Vlasov's Blog - блог PHP-разработчика, там довольно много постов о concrete5
  
• Count Raven Amiant | Blog - чуть не забыл, тут я интересуюсь concrete5
  

Если кто-то может дополнить список - буду очень рад. А то ресурсов о concrete5 правда очень мало.

concrete5 CMS Русская Версия

Доброго времени суток!

Представляю вашему внимаю русскую локализацию замечательной системы управления контентом (CMS) concrete5.

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

Файл локализации охватывает самую последнюю на сегодняшний день версию concrete5 5.3.1.1. Этот файл подходит и для более ранних версий.

Чтобы русифицировать свою concrete5 самостоятельно, скачайте архив с файлом локализации ru_RU-UTF8-5.3.1.1.zip (140 Kb).

Кроме файла локализации я подготовил и дистрибутив concrete5 версии 5.3.1.1 с уже настроенной русской локализацией в комплекте. Процесс установки CMS на веб-сервер также полностью на русском языке. Скачать файл дистрибутива concrete5.3.1.1.ru_RU.UTF8.zip (7,16 Mb).

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

Спасибо всем пользователям и разработчикам concrete5!

А специально для фанов concrete5 - интригую:

Скоро я выложу еще несколько вкусностей, пока они на стадии пре-альфа и в них обнаружено несколько багов, а также не достигнута запланированная функциональность.

10 полезных AIR приложений

Представляю Вашему вниманию небольшой обзор интересных и полезных приложений для платформы Adobe AIR.

В последнее время стал баловаться с платформой Adobe AIR. В результате сего процесса подсел на некоторые весьма забавные приложения, о которых хочу рассказать. Итак...

Doomi

Это приложение представляет из себя To-do list. Простой и удобный менеджер списка дел с функцией напоминания. Вообще, приложений подобного рода полно, у всех свои преимущества и недостатки. Некоторые слишком простые и их функциональность не устраивает, друге, напротив, слижком уж навороченные и выходят за рамки обычного To-do list. Doomi, на мой взгляд, отличается неплохой функциональностью, симпатичным видом и простотой. Также, когда окно свернуто, Doomi торчит значком в области уведомлений. Скачать Doomi можно тут. Все абсолютно бесплатно.

Polaris

Polaris представляет из себя очень красивый и удобный desktop-клиент для Google Analytics. Есть возможность просматривать график посещаемости сайта, рейтинг посещаемости страниц, карту посетителей и т.д. и т.п. В общем - все то, что предлагает веб-интерфейс Google Analytics. Всего 8 стандартных отчетов.

Может работать с несколькими аккаунтами Google Analytics, но, в таком случае это будет стоить 15$ в год, в случае же одного аккаунта - все бесплатно. Очень приятный анимированный интерфейс.

Вообще, считаю Polaris очень полезным инструментом, давно хотел иметь что-то подобное и, при том, кросс-платформенное. Активно рекомендую. Взять Polaris можно тут.

Color Browser

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

AIR Translate

Это приложение есть ничто иное как клиент для переводчика Google Translate. Собственно, рассказывать нечего. Вводим текст, выбираем язык перевода приложение переводит. Бывает полезно, особенно когда делаешь локализации. Лежит тут.

RegExr

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



Fractal 4D

Это приложение меня увлекло часа на 3. Можно рисовать очень прикольные картины. Много настроек, есть эффекты. Тут сложно описать, это нужно попробовать. Брать тут.

TiltShift

Простое приложение для обработки фотографий. Все очень просто, тем не менее, результаты весьма приятные и это бесплатно. Есть всего 7 ругуляторов: радиус и сила размывания изображения, яркость, контрастность, насыщеность, степень виньетирования и качество JPEG. Конечно, это не профессиональный инструмент для обработки фотографий, но иногда больше ничего и не нужно, чтобы сделать фотографию симпатичнее. Брать тут.



WebKut

WebKut это приложение, позволяющее делать снимки веб-страниц или их частей. WebKut предлагает 3 варианта создания снимка: снять всю страницу, видимую область страницы или только выделенную область. Где это применить? Кому как, мне иногда удобно делать снимки понравившихся в плане дизайна сайтов, когда вижу интересную идею. Живет тут.



Snippely

Snippely - очень полезное приложения для организации библиотеки блоков кода. Раньше у меня такие вещи хранились в плохо организованных текстовых файлах, или в записках TomBoy. Думаю, пригодится любому программисту. Скачать можно тут.

Mindomo

Приложение для создания схем мыслей и идей (mind mapping). Позволяет работать как при отсутствии соединения с интернет (offline), так и online и хранить схемы на сервере. Имеет возможность добавлять в схемы ссылки на файлы. Данные хранит в формате XML, что также очень полезно в некоторых ситуациях. Обитает тут.

Выпуск книги “Уроки Блоггинга”

Сергей Бирюков в своем блоге сообщает, что заканчивает работу над книгой "Уроки Блоггинга. Full Version".

Книга представляет из себя руководство для начинающего блоггера или сборник заповедей профессионала.

Вы сможете использовать “Уроки Блоггинга”, как свою настольную книгу или как “библию блоггера”, а каждую статью воспринимать как заповедь.

Есть и еще несколько примечательных моментов, связанных с этим событием. Подробности читаем в блоге Сергея Бирюкова "Блогинг в крови".

Список интересных JavaScript GUI Frameworks

Всем привет. Собственно хотел сгруппировать полученную за последние месяцы информацию и предоставить список JavaScript GUI фреймворков, которые я рекомендую к рассмотрению.

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

• Jx
• MochaUI
• JsRIA
• Mootools Ext Adapter
• Ext JS
• ComponentArt
• Qooxdoo
• Google Web Toolkit
• ActiveWidgets
• JQuery
• UI4Web
• Dojo
• Backbase
• Prototype
• Tibco General Interface
• Bindows
• Yahoo! User Interface Library
• JackBe Presto

Это еще не все, в будущем список будет пополняться.

Поболтайте с Винсентом

Кино будет, но пленку еще мотают

Привет всем!

Много работы, завал, плохая погода, потерял мобильник, патологическое невезение, депрессия, паранойя, ежики-грибоеды, проблемы с самоидентификацией, аутизм, старость, гастарбайтеры, общение с кретинами, приятный дождь, романтика, 4 месяца без секса и т.д.

Прошу выбирать что бы вам хотелось увидеть первым из списка ниже.

Короче на конвейере стоит:

1. Как установить Google Chrome под Linux (никакого wine, сборка официальной beta под Linux).
2. Инструменты для анализа посещаемости сайта (точно не первым пунктом стоит, нужно материалов пособирать, чтобы написать статью).
3. Инструменты для общения и обмена контентом. Хранилища файлов.
4. Краткий обзор по виртуальным ОС (Cloud computing).
5. Инструменты FullAJAX.
6. Краткий обзор AJAX GUI Frameworks.
7. Эмуляция Java 2 ME на сайте.
8. Трюки и примеры GIMP, рассмотрение статей по Adobe Photoshop в контексте GIMP.
9. Анимация на JavaScript.

Пока занят на недельку. Через неделю будет новый дизайн блога, новые сервисы и некоторые интересные технологии, которые я также опишу и расскажу как их реализовать на движке Blogger.

Такие дела =) Никак не могу придерживаться графика минимум 1 нормальный пост в неделю. Времени катастрофически нет.

Прошу всех голосовать в комментариях - о чем написать из приведенного выше списка. Можно также предложить тему, отсутствующую в списке, я рассмотрю заявку и занесу в график.

Пишите документацию к проекту и коду!

• Часто ли вы пишете документацию или хотя бы подробные комментарии к своему коду?
• Как вы себя чувствуете когда вам приходится работать над проектом, который был написан другим человеком и в нем нет никаких комментариев, а код достаточно большой?
• Во время разработки вы не писали документацию? Прошел год и вам пришлось вернуться к этому проекту? Как ощущения? =)

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

Люди эти, к моему глубокому сожалению не обременили себя написанием хотябы скромных комментариев к коду, либо не нашли на это времени.

Так сильно задевает меня эта тема и так много проблем порой доставляет недокументированный код, а если он еще и "кривой", то только на то, чтобы понять что к чему уходят дни, не говоря уже о том, когда можно будет приступить к продолжению работы над проектом.

И ладно бы, я человек спокойный и терпеливый. Ну разобрался бы в итоге. Но существует заказчик, которому никак не объяснить почему вроде бы не такая сложная задача не может быть решена за один день и почему предыдущий разработчик (автор того самого недокументированного кривого кода) делал все быстрее. Заказчик не может понять, что мне нужно переварить груду этого толком неструктурированного кода, чтобы сделать умозаключения о дальнейшей разработке. Мало того, когда заказчик задает вопросы о сроках разработки на начальном этапе передачи проекта, то в данном случае я затрудняюсь ответить - еще не ясно что меня ждет дальше и насколько удобоваримый код я буду рад лицезреть.

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

Честно признаюсь, этот крик души не одинок! Не хочу копировать посты, просто присоединяюсь к замечательному блогу Станислава Малкина.

Высота таблиц и центрирование контента

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

Итак, первый вопрос о высоте таблиц.

Почему при установке DOCTYPE в начале документа не работает атрибут HEIGHT у таблицы?

<table height="100%">
<tr>
<td>
Таблица
</td>
</tr>
</table>

Проблема в том, что вообще в спецификации HTML нет атрибута height у таблицы. Т.е. его использование - это ошибка изначально.Так почему же это работает когда не указан DOCTYPE? Дело в том, что режим рендеринга страницы браузером определяется именно типом документа (DOCTYPE). Но когда DOCTYPE не указан браузер отрисовывает страницу в так называемом "quirks mode" не пытаясь соответствовать какому-то конкретному стандарту.

В режиме соответствия стандартам это работать не будет. Т.е. если у страницы указан полный DOCTYPE или если указан DOCTYPE XHTML, то браузер отрисовывает страницу в режиме соответствия стандартам, если же DOCTYPE отсутствует или же присутствует, но без URL его XML-описания, то отрисовка будет в режиме совместимости (quirks mode).


Так зачем мне указывать DOCTYPE?
Отвечу кратко - это гарантирует, или по крайней мере позволяет надеяться, что страница будет одинакого выглядеть в разных браузерах, а во-вторых - следование стандартам - это к тому же правило хорошего тона и в некоторых случаях может избавить вас от лишних проблем.


Так как же сделать, чтобы это работало?
Чтобы работал именно атрибут height - никак, а вот чтобы добиться того же результата нужно использовать CSS.


Для начала нужно задать CSS самого тела страницы:

html, body {

margin: 0px;

padding: 0px;

height: 100%;

border: none;

}

Для чего это нужно?
Дело в том, что таблица растягиваться на всю высоту элемента, в котором она содержится, т.е. в данном случае на высоту элемента BODY. Но он может не иметь высоту области отображения страницы в браузере, поэтому нам нужно задать высоту BODY принудительно.


Теперь создадим стиль для нашей таблицы:

#full_height_table {

height: 100%;

}

Ну а HTML должен быть таким:

<body>

<table id="full_height_table">

<tr>

<td>

Таблица

</td>

</tr>

</table>

</body>

Теперь у нас все замечательно работает и таблица имеет высоту в 100%.


Теперь второй вопрос.
Как в XHTML центрировать контент из блочных элементов?

Атрибут ALIGN="center" теперь нам не поможет. Чтобы центрировать блочный элемент по горизонтали нужно задать для него CSS со праметрами margin-left и margin-right.

#my_centered_div {

margin-left: auto;

margin-right: auto;

}

Центрированный элемент

Это касается блочных элементов, чтобы центрировать текст нужно использовать CSS text-align: center;


Чтобы центрировать по вертикали нужно использовать свойство CSS родительского элемента vertical-align, но это подойдет только для текста, для блочного элемента следует добавить свойство display: table-cell;. Однако в Internet Explorer это работать не будет. Приемы как сделать вертикальное центрирование блочного элемента в IE можно посмотреть тут.

#my_centered_div_container {

vertical-align: middle;

display: table-cell;

}

Центрированный элемент

Небольшое демо:

Блочный элемент

Свойства CSS (кликайте и смотрите результат выше):
margin-left: 0px; margin-right: auto;
margin-left: auto; margin-right: auto;
margin-left: auto; margin-right: 0px;

И в заключение

Старайтесь задавать все параметры внешнего вида через CSS и вынесите CSS в отдельный файл, не прописывайте стили внутри страницы. В дальнейшем это избавит вас от многих проблем, если вы захотите изменить внешний вид и поведение страницы.

Jet Profiler для MySQL

Искал недавно инструмент, чтобы анализировать производительность сервера MySQL. Просто было очень интересно какая нагрузка на сервер идет в некоторых местах моих PHP-скриптов, работающих с базой данных.

Требовалось что-нибудь достаточно простое, наглядное и удобное. И нашел. Вот интересный инструмент - Jet Profiler.

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

Работает Jet Profiler как под Linux, так и под Windows и Mac.

Для работы потребуется Sun Java 2 SE VM версии 1.6. И не надо сразу так скептически относиться к данному ПО. У меня Java всегда есть и устанавливаю я ее чуть-ли не первым компонентом после установки самой ОС и драйверов. Если у вас нет Java VM, то скачать можно тут.

Jet Profiler отслеживает какие запросы к БД производились за определенный промежуток времени, строит графики количества запросов, времени выполнения. Сигнализирует о самых низкопроизводительных моментах в работе, анализирует SQL-запросы и предлагает варианты по оптимизации для повышения производительности. Jet Profiler так же предоставляет другую статистическую информацию о работе сервера MySQL.

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

Теперь я обитаю и в Twitter'е

Теперь вы можете наблюдать за мной в Twitter'e.

Зовут меня там Count_Raven.

Также здесь в блоге справа появилась панель моего Twitter'а с последними 5-ю сообщениями...

Наблюдайте и наблюдаемы будете =)

Рекомендую блог для дизайнеров, программистов, веб-мастеров использующих ОС Ubuntu Linux

Всем рекомендую, хороший блог.
Вот линк: http://my.opera.com/area42/blog/

A blog for designer, artists and developers programming websites, painting icons, creating multimedia content, doing dtp or constructing in 3D space using (Ubuntu) Linux.

Начнем приложение с Qooxdoo

Люди у нас в основном своем большинстве либо новички (желают создать свой сайт и стать крутыми веб-девелоперами), либо сидят под Windows и про командную строку не вспоминают особо, а про Python вообще не знают. Эта статья адресована именно такой категории. Специалисты, а также люди хорошо знающие английский легко разберутся с официальной документацией по Qooxdoo, ну а остальным я постараюсь помочь в меру своего свободного времени и иных возможностей.

Начнем.

1. Скачаем Qooxdoo SDK. На момент написания этой статьи имеется версия Qooxdoo 0.8.2. Это стабильный релиз. Имеется также версия 0.7.4 гарантирующая стабильность и работоспособность во всех отношениях для всех броузеров вышедших не позже выхода самого релиза. Использовать рекомендую более новую версию, так как в любом случае в дальнейшем необходимо будет делать процедуру перехода (зачем нам это лишний раз), во-вторых вам самим захочется 0.8 не иначе. Если бы 0.7 обладала всем-всем-всем, то можно было бы отнестись к этому вопросу проще, но даже в 0.8 есть некоторые общепринятые (стандартные для привычного нам GUI) вещи, которые еще не реализованы.
Да что говорить. Берем 0.8 и все. Документация по 0.8 полноценна и исчерпывающая на все 100%, остальные вопросы отпадают или не ко мне =). Лол. Продолжим.

Качаем http://downloads.sourceforge.net/qooxdoo/qooxdoo-0.8.2-sdk.zip
Либо смотрим сами: http://qooxdoo.org/download и выбираем, можно и SVN-repository взять, кто хочет грызть гранит фреймворка по-полной =)

Скачали, распаковали.
Смотрим папку. Видим структуру:

application
component
framework
tool
index.html
license.txt
readme.txt
version.txt

Так...

2. Можно конечно все делать руками, но зачем? Точнее не так. Руками все делать нужно, но есть очень удобные инструменты, которые следует взять в руки. Написаны они все на Python.

Пользователям Linux волноваться не о чем. Все как обычно либо уже под рукой, либо стоит поставить пакеты Python. Нужна версия Python не ниже 2.4. (2.3 более не поддерживается).

Пользователям Windows следует поставить ActivePython.
Да-да, конечно, ленивым я дам ссылку: http://www.activestate.com/activepython/

Ну и далее...

Для людей, которые привычны к капанию в исходниках эту статью писать не стоит, для других - рекомендую прочитать readme.txt. Если не помогло, буду рассказывать содержимое readme.txt. Итак:


Как создать новое приложение?

• Переходим в ./tool/bin. Запускаем create-application.py. И что? Ничего пока. Расскажу о параметрах этого скрипта.

Для особо одаренных: - Все имена, идентификаторы, параметры и т.д. пишутся только латинскими символами.

Общее:
create-application.py --name myapp

Параметы:
-n ИМЯПРИЛОЖЕНИЯ, или --name=ИМЯПРИЛОЖЕНИЯ
ИМЯПРИЛОЖЕНИЯ - название вашего приложения. Обязательное поле. Это имя создаваемого приложения. С таким же именем будет создана папка для приложения.

-o ПУТЬ_К_ПАПКЕ, --out=ПУТЬ_К_ПАПКЕ
Это путь к той папке, в которой будет создана папка приложения (см. выше).

-s ПРОСТРАНСТВОИМЕН, --namespace=ПРОСТРАСТВОИМЕН
Основное пространство имен для приложения. Объяснять что такое "пространство имен" не намерен. Если совсем новички - игнорируйте эту опцию и все. (По-умолчанию пространством имен будет являться ИМЯПРИЛОЖЕНИЯ (см. выше))

-t ТИП, --type=ТИП
Типом может быть inline, migration, bom, gui.
'gui' создаст стандартное qooxdoo GUI приложение,
'inline' создаст "inline", т. е. интегрируемое в страницу сайта qooxdoo GUI приложение, 'migration' используется для перехода с версии приложения qooxdoo 0.7 и 'bom' может быть использовано для создания low-level (низкоуровневого (для новичков - ничего общего с плохим, слабым, низким и другими словами) qooxdoo приложения. Если этот параметр не указывать, то по-умолчанию будет 'gui'.

-l LOGFILE, --logfile=LOGFILE
Тут LOGFILE - имя текстового файла, куда будет сохраняться вся информация по ходу работы скрипта.

-p PATH, --skeleton-path=PATH
Дополнительная опция. Здесь PATH - это имя к папке шаблонов, по которым может быть создано приложение. (По-умолчанию: ПУТЬ_К_QOOXDOO_SDK/component/skeleton)

Итак, запустим например такое:
./create-application.py -n myfirst -s mynamespace -t gui

• Теперь мы получили папку myfirst в той же папке, где и был запущен скрипт create-application.py. Структура папки такая:

cache
source
config.json
generate.py
Manifest.json
readme.txt

3. В congif.json мы имеем конфигурацию нашего приложения, необходимые модули, переменные среды и т.д. Это нам понадобится для сборки завершенной версии приложения. Все данные хранятся в формате JSON.

В Manifest.json находится информация о приложении, название, версия, описание и наименование главного класса приложения для запуска.

Не правда ли напоминает Java 2 ME =) Похоже, но только в JSON формате.

• Ну наконец уже надоело. Запустим мы приложение или нет? Давайте запустим.

Запустим в папке нашего приложения скрипт generate.py с параметром source-all
./generate.py source-all

Это выдаст:
=====================================================
INITIALIZING: MYFIRST
=====================================================
>>> Configuration: config.json
>>> Jobs: source-all
>>> Resolving config includes...
>>> Resolving jobs...
>>> Resolving macros...
>>> Resolving libs/manifests...

=====================================================
EXECUTING: SOURCE-ALL::SOURCE-ALL-SCRIPT
=====================================================
>>> Scanning libraries...
- Scanning /home/raven/Desktop/Qooxdoo/qooxdoo-0.8.2-sdk/framework...
- Scanning /home/raven/Desktop/Qooxdoo/qooxdoo-0.8.2-sdk/tool/bin/myfirst...
- Excludes may break code!
>>> Resolving dependencies...
- Sorting 513 classes...
>>> Resolving dependencies...
- Sorting 513 classes...
>>> Generate source version...
- Processing translation for 2 locales...
- Analysing assets...
- Compiling resource list...
- Generate translation code...
- Generating boot loader...
>>> Done

Теперь у нас создана debug-версия приложения. Что это значит?
Это значит то, что мы можем запустить наше приложение и посмотреть на его работу, но это не версия для издания, т.е. эта версия не предназначена для наших конечных пользователей, она имеет много "лишней" отладочной информации и связана с нашими локальными модулями. В своих последующих статьях я расскажу как создавать полноценные приложения и размещать их в сети интернет.

• Айе! Наконец запуск! Переходим в папку soure. Открываем в броузере файл index.html.

В стандартной ситуации, т.е. если использована стандартная версия SDK, описанная в этой статье и если вы следовали инструкциям этой статьи, то вы получите приложение с кнопкой, при клике на которой будет выведено сообщение.

Вот такое у нас первое приложение.



В дальнейших моих планах есть описание создания нескольких более серьезных приложений, в том числе с использованием запросов к серверу, где на стороне сервера будет использоваться PHP и MySQL. К сожалению в мои планы не входит публиковать тут учебник по Qooxdoo или что-то подобное. Всего лишь основы.

Обсуждаем, смотрим, пользуемся, жалуемся и т.д..............

Несколько JavaScript GUI Frameworks

Вчера копался в форуме eyeOS и прочел, что их JavaScript-фреймворк работает, но он очень простой и происходит это по той причине, что в команде нет ни одного фаната JavaScript и написано все очень примитивно. Там же они сообщили, что присматриваются к AJAX-фреймворку Qooxdoo, чтобы построить на нем свой eyeOS tooklit2. Именно так я узнал о Qooxdoo. Приятное открытие.

qooxdoo is a comprehensive and innovative Ajax application framework. Leveraging object-oriented JavaScript allows developers to build impressive cross-browser applications. No HTML, CSS nor DOM knowledge is needed.

It includes a platform-independent development tool chain, a state-of-the-art GUI toolkit and an advanced client-server communication layer. It is open source under an LGPL/EPL dual license.

Qooxdoo оказался действительно тем, что я давно искал и я потратил всю ночь, чтобы поиграться с ним. На официальном сайте есть исчерпывающая документация по всему фреймворку. Демонстрационное приложение создано очень удобно и вместе с результатом показывает и исходный код демки.

Но почему же мне все так понравилось?

Несмотря на то, что Qooxdoo относится к "тяжеловесным" фреймворкам, грузится он очень даже быстро, а в работе не пожирает ресурсы процессора в отличие от некоторых его конкурентов.

Упс... Заикнулся про конкурентов. Надо бы и про них немного рассказать, итак:

• TIBCO General Interface - сейчас наверное самый нашумевший из "тяжеловесов". Довольно много с ним работал, месяца 3. Вообще понравился, но очень уж "тяжелый" и многие его возможности мне просто не нужны.
  
• Bindows - взглянул, с первого раза впечатления как от Tibco. Красиво, тяжело, запутанно.
  
• Dojo - о нем знают все. Но это скорее AJAX-фремворк для использования в структуре обычного сайта. Где-то прилепил эффект, где-то окно, где-то получил данные из базы. Это нельзя назвать GUI-фреймворком как остыльных в этом списке, однако и лишить Dojo упоминания тоже как-то нельзя. Имеено по причине его "не совсем GUI-фреймворк" я искал что-то другое.
  
• Jx - люблю! =) молодой фреймворк построенный на базе Mootools. Легковесный, как и все, что связано с Mootools. Хороший конструктор для хороших мозгов. Еще очень молодой, но очень приятный и быстрый. Рекомендую всем.
  
• Backbase AJAX Framework - достойный конкурент Qooxdoo. Мне понравился. Идея описывать весь GUI и events в XML очень хорошая. Однозначно! Для ознакомления - всем.
  
• JackBe Presto Framework - что-то ооооочень тяжелое, но выглядит красиво. Заморачиваться не стал, так как при виде демо сразу испугался =).

Работать с Qooxdoo одно удовольствие. Все понятно и очень удобно в отличие от того же TIBCO General Interface. Форматом обмена данными в Qooxdoo является JSON, что не может не радовать, так как работать с XML не очень удобно, если проект у тебя довольно небольшой.

Вот пример создания обычной кнопки с изображением рядом с текстом:

// Создаем кнопку
var button1 = new qx.ui.form.Button("Моя кнопка", "images/myicon.png");

// Создаем контейнер в котором будет находиться кнопка, в данном случае само тело страницы (объект document)
var doc = this.getRoot();

// Помещаем кнопку в контейнер с фиксированными координатами
doc.add(button1, {
left : 100,
top : 50
});

// Добавим обработчик события
button1.addListener("execute", function(e) {
alert("Привет!");
});

Все элементарно и очень удобно.


А вот пример как сделать RPC (Remote Procedure Call):

var rpc = new qx.io.remote.Rpc(
"http://localhost:8080/qooxdoo/.qxrpc",
"qooxdoo.test"
);

// синхронный вызов
try {
var result = rpc.callSync("echo", "Test");
alert("Результат вызова: " + result);
} catch (exc) {
alert("Исключение во время вызова: " + exc);
}

// ассинхронный вызов
var handler = function(result, exc) {
if (exc == null) {
    alert("Результат вызова: " + result);
} else {
    alert("Исключение во время вызова: " + exc);
}
};
rpc.callAsync(handler, "echo", "Test");

Ну на этом закончу. Цели рассказать подробно я не ставил, хотел лишь сказать, что мне очень понравился Qooxdoo и порекомендовать всем если не использовать, то хотябы ознакомиться с этим творением.

Опять же не стоит забывать о том, что всему свое место и время. Использовать Qooxdoo для создания обычного сайта или для создания сайта с элементами AJAX глупо. Qooxdoo предназначен для создания именно веб-приложений и если вам требуется просто делать XMLHttpRequest или добавить эффекты и анимацию на сайт, то рекомендую использовать компиляцию Mootools с набором необходимых классов, а не таскать за страницами "тяжеловесный" фреймворк типа Qooxdoo или TIBCO General Interface.