Все обо всем и ничего ни о чем...

Все на ZFConf 2012!!!

noreply@blogger.com (LordOtU) — Fri, 13 Apr 2012 21:54:32 PDT

21 апреля в Москве пройдет очередная ежегодная конференция для веб-разработчиков ZFConf 2012, посвященная популярной платформе Zend Framework.

В этом году с докладом выступит гость из Италии — Enrico Zimuel из Zend Framework Core Team. А также Виктор Фараздаги, Александр Веремьев, Алексей Качаев и многие другие специалисты.

На сайте опубликован полный список докладов и открыта регистрация.

Доклады:

Zend Framework 2, a quick start
Enrico Zimuel (Zend Technologies, Zend Framework Core Team)
Code Generation и Scaffolding в Zend Framework 2
Виктор Фараздаги (Simple Square, Senior Developer)
Реализация доступа к СУБД IBM DB2 посредством встраиваемого SQL
Александр Веремьев (Zend Framework contributor)
Распределенные сетевые приложения c Zend Framework 2 и ZeroMQ
Алексей Качаев (Сogniance, Senior Software Engineer)
Dependency Management в PHP и Zend Framework 2
Кирилл Чебунин (Creara, Senior PHP Developer)
Кеш без промахов средствами Zend Framework 2
Никита Грибалев (Nival, Lead PHP Developer)
Проектирование архитектуры, внедрение и организация процесса разработки на примере собственного проекта на основе ZF
Антон Великанов (Sand Sign, Founder&CEO)
Capistrano для деплоймента PHP-приложений
Роман Лапин (Evercode Lab, Senior Developer)

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

Следите за последними новостями:

Хабраблог: habr.ru/company/wizartech/blog/
Facebook: facebook.com/groups/143714275748061/
ВКонтакте: vk.com/zfconf
RSS: feeds.feedburner.com/zfconf
Twitter: twitter.com/zfconf

Организатор: компания Wizartech

Партнеры: сообщество Zend Framework и конференция Frameworks Days

Модуль управления доступом к меню Menu subtree per role для Drupal 6

noreply@blogger.com (LordOtU) — Sun, 08 Apr 2012 06:07:52 PDT

Итак, второй модуль, призванный помочь администратору в деле управления доступом к меню на страницах создания/редактирования материала. Описание модуля находится тут: http://olevshin.ru/projects/drupal_6_menu_subtree_per_role.

Модуль создания маршрутов на Яндекс.Картах Ymaps Routes для Drupal 6

noreply@blogger.com (LordOtU) — Sun, 08 Apr 2012 06:04:42 PDT

Таки впервые показываю общественности свои наработки для Drupal. К сожалению, пока что активно пользую 6-ю ветку, но руки уже начали тянуться к 7-ой. Все проекты будут хоститься на ГитХабе (https://github.com/LordotU). Со временем, может быть, они замайнтейнятся на Drupal.org, но не сейчас.

Первые модуль - это модуль создания маршрутов на основе Яндекс.Карт. Описание модуля находится тут: http://olevshin.ru/projects/drupal_6_ymaps_routes_module.

Установка и настройка web-интерфейса Anyterm для терминала под Ubuntu и Apache

noreply@blogger.com (LordOtU) — Wed, 14 Mar 2012 09:07:44 PDT

Давайте проведем, так сказать, мысленный эксперимент. Представьте, что вы работаете в месте, где с рабочего компьютера очень сложно попасть во вне - вы ограничены только стандартными портами для HTTP, NTLM-аутентификацией и другими штуками, которые делают ваше пребывание в Сети не очень комфортным. Тем не менее, вам кровь из носу нужно достучаться по SSH до домашней (любой другой) машины. В этой заметке я постараюсь рассказать о том, как можно миновать вышеперечисленные ограничения.

Описанный ниже способ не претендует на единственность и оригинальность - это лишь один из вариантов. Например, можно еще поиграться с cntlm и proxytunnel. Но... тут речь пойдет не об этом. Здесь мы попробуем установить на целевую машину Anyterm и сделать его доступным по HTTPS с базовой аутентификацией.

Итак, мне нужно было достучаться до моего домашнего сервачка, на котором установлена Ubuntu 11.04, Apache 2 и остальной зоопарк разного ненужного, а сам он находится за NAT ADSL-роутера. Для того, чтобы он все время был доступен по одному адресу, я зарегистрировал домен третьего уровня на http://dlinkddns.com/.

Для начала Anyterm нужно скачать (http://anyterm.org/download/index.html). Я забирал последнюю dev-версию (1.1.29), так что все описанное справедливо именно для нее. Скачиваем, выполняя, например, такую команду:

svn co http://svn.anyterm.org/anyterm/tags/releases/1.1/1.1.29/ anyterm-1.1.29

Результатом ее выполнения будет папка anyterm-1.1.29, созданная в директории, откуда эта команда исполнялась. Т.к. были скачаны исходные кода, а сама программа написана на C++ с использованием библиотек Boost, то нужно убедиться, что у вас установлено все необходимое для успешного компилирования исходников, а именно: пакеты build-essential, libboost1.42-dev и zlib1g-dev. Все скопом можно установить, выполнив следующую команду:

sudo apt-get install build-essential libboost1.42-dev zlib1g-dev

Теперь, вроде, можно компилировать. Переходим в ранее созданную директорию anyterm-1.1.29 и, скрестя пальцы, выполняем команду:

make

К сожалению, скрещенные пальцы тут не помогут, т.к. процесс компиляции завершится неудачно - все дело в том, что в файле anyterm-1.1.29/libpbe/src/SmtpClient.cc отсутствует строка, которая подключает стандартную библиотеку языка. Её нужно добавить куда-нибудь в начало файла:

#include  //Missed string

После добавления этой пропущенной строки, необходимо выполнить команды:

make clean; make

Дожидаемся окончания процесса компиляции - на выходе получим исполняемый файл anytermd, который было бы полезно скопировать в какую-нибудь директорию типа /usr/local/bin (мой именно там и лежит).

Попробуем провести тестовый запуск свежескомпилированного демона командой:

anytermd -p 7777 --local-only

Запускаем браузер и переходим по адресу http://localhost:7777. Если вы увидели окошко терминала, то все ок и можно продолжать. Теперь необходимо сделать этот терминал доступным извне.

Для этого, как я уже писал выше, понадобится установленный веб-сервер Apache 2 с включенными модулями mod_proxy, mod_proxy_http, mod_ssl и mod_auth_basic. Включить их можно такой командой:

sudo a2enmod proxy proxy_http ssl auth_basic

Модули включили, теперь нужно создать самодписной SLL-сертификат и файл с данными для basic-аутентификации.

Этапы создания сертификата следующие: создание ключа, создание CSR (запроса на сертификат, в котором содержаться некоторые данные о сервере), подписание сертификата. Создаем какую-нибудь директорию для этого добра, переходим в нее и начинаем последовательно выполнять команды:

sudo openssl genrsa -des3 -out server.key 1024 #В конце два раза вводим парольную фразу
sudo openssl req -new -key server.key -out server.csr #Можно просто вводить пустые ответы
sudo openssl x509 -req -days 365 -in server.csr -signkey server.key -out server.crt

Теперь необходимо перенести созданное в правильные папки:

sudo cp server.crt /etc/ssl/certs
sudo cp server.key /etc/ssl/private

Далее, создадим файл с данными для basic-аутентификации. Для этого выполним команду:

htpasswd -mbc /var/www/anyterm/.htpasswd username PassWord #где username - имя пользователя, а PassWord - его пароль

Обратите внимание, что файл .htpasswd создастся в директории /var/www/anyterm, которая должна существовать. Предпоследний шаг - настроить веб-сервер так, чтобы он принимал соединения на 443 порт по HTTPS и перенаправлял их демону Anyterm. Для этого в директории /etc/apache2/sites-available (предварительно веб-сервер должен уметь работать с виртуальными хостами и прослушивать 443 порт) создадим файл anyterm, выполнив команду:

sudo touch /etc/apache2/sites-available/anyterm

Теперь, добавим в свеженький файл строки конфигурации примерно такого содержания:

<IfModule mod_ssl.c>

    <VirtualHost *:443>

        ServerName server

        <Location /anyterm>

             Allow from all

             ProxyPass http://localhost:8022 ttl=60

             ProxyPassReverse http://localhost:8022

             AuthType Basic

             AuthName "Anyterm"

             AuthUserFile /var/www/anyterm/.htpasswd             

             Require valid-user

         </Location>

         SSLEngine on

         SSLCertificateFile /etc/ssl/certs/server.crt

         SSLCertificateKeyFile /etc/ssl/private/server.key

    </VirtualHost>

</IfModule>

Ффух... осталось соовсем немного, потерпите. Дадим веб-серверу знать, что мы добавили новый хост и сделаем ему рестарт:

sodu a2ensite anyterm
sudo /etc/init.d/apache2 restart

Обратите внимание, что сервер попросит вас ввести парольную фразу для ssl-ключа. Теперь остается последний шаг - правильный запуск демона Anyterm. Помните, что мы выполняли тестовый запуск на 7777 порту? Так вот, надо бы остановить его выполнение. Самый простой способ - это посмотреть идентификатор процесса при помощи:

ps ax | grep anyterm

И его дальнейшее убийство командой kill:

kill идентификатор_процесса_anyterm

Запустим демона заново:

anyterm -p 8022 --user username #где username - имя пользователя, из-под которого будет вестись работа в терминале

Теперь, сидя на работе, вы спокойно можете постучаться на домашнюю машину. Для этого достаточно в адресной строке браузера вбить https://ваш_ip-адрес/anyterm (или https://ваш_домен.служба_динамических_dns:проброшеный_порт, если у вас ADSL без статичного IP и сервер находится за NAT) - и вы увидите родной терминал. :)

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

Еще одна мысль на тему, почему Lorem ipsum калечит Ваш дизайн

noreply@blogger.com (LordOtU) — Thu, 24 Nov 2011 12:32:10 PST

Я знаю, что сейчас Вы подумали что-то, типа: "Ооо, еще один пост на тему того, как важен контент, и что в дизайне должна использоваться копия реального текста... Ну а если клиенты не отдали мне текстовку, но все равно хотят, чтобы я что-то им показал? Как тут быть, а?"

Оокей, не волнуйтесь. Я тут не для того распинаюсь, чтобы давать Вам непрактичные советы или рассказывать то, что Вы и без меня прекрасно знаете. Я знаю, что если бы дизайнеры имели реальный контент, то они ни в коем случае не стали использовать Lorem ipsum, и с этим не поспоришь. Но, если все-таки Вас вынуждают использовать текстовую рыбу, то... вместо Lorem ipsum, Hipster ipsum, или Samuel L. Ipsum, я считаю, что Вы должны использовать первый абзац любой случайной статьи из Википедии.

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

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in the answer is purple voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

А теперь, если я спрошу, какой мой любимый цвет, то Вы сможете мне ответить?

А ведь ответ есть в прочтенном Вами тексте!

Как же так? Все потому, что как только Ваши глаза наткнулись на незнакомые латинские слова, то они просто соскользнули в его конец и Вы почти мгновенно прекратили чтение. Поверьте, Вы не сможете настроить свой мозг так, чтобы он смог переварить такую тарабарщину, как 100500 латинских слов.

Просмотр против Чтения

Как правило, Вы, как и Ваш клиент, игнорируете целые абзацы, не уделяя внимания многим мелочам. А происходит это потому, что Вы не читаете, а всего лишь просматриваете текст.

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

Почему Латынь?

Сейчас, я так полагаю, большинство людей используют рыбу Lorem Ipsum, даже не зная, откуда пошла такая практика - раньше этот текст использовали в книгопечатании в качестве заполнителя.

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

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

Источник: http://www.attackofdesign.com/why-lorem-ipsum-is-hurting-your-designs/

Об атрибуте scope в HTML5

noreply@blogger.com (LordOtU) — Thu, 24 Nov 2011 12:32:10 PST

В спецификации HTML5 был добавлен новый атрибут scope для тэга <style>. Итак, эта заметка о том, как работает этот новый атрибут и как это можно использовать.

Этот атрибут, исходя из названия, используется для того, чтобы ограничить область действия стиля, для которого он (атрибут) указан. Область действия стиля с таким атрибутом будет распространяться на родительский элемент, внутри которого находится тег <style> этого стиля, и всех дочерние элементы этого родителя. Все элементы снаружи области действия будут проигнорированы даже в случае полного совпадения селекторов. Этот атрибут принимает булевские значения, так что указывать его можно либо как просто scope для HTML, либо как scope="scoped" для XML/XHTML. Вот небольшой пример использования этого атрибута:

<!DOCTYPE html>
<html lang="ru">
    <head>
        <title>Пример использования атрибута scope</title>
        <style>
            p { color: black; }
        </style>
    </head>
    <body>
        <p>Цвет текста в этом параграфе будет черным.</p>
        <div>
            <style scoped>
                p { color: green; }
            </style>
            <p>А здесь - зеленым.</p>
            <p>И тут!</p>
        </div>
        <p>А тут - снова черным.</p>
    </body>
</html>

В браузерах, которые поддерживают этот атрибут, цвет текста в тех параграфах, что внутри <div>, будет зеленым, в остальных же - черным. Любой стиль, внутри тега <style> с ограниченной областью действия, будет применен только к его родителю (в данном случае - к <div>) и всем дочерним элементам этого родителя (в данном случае - к двум <p>).

И, еще небольшое уточнение. Любые общие правила (т.н. @-правила) игнорируются за пределами ограниченных стилей. Например, если внутри ограниченного стиля мы подключили какой-то шрифт посредством @font-face, то этот шрифт не получится использовать для элементов вне области действия данного стиля, даже если явно указать в свойстве font-family имя данного шрифта.

Зачем использовать стили с ограниченной областью действия?

Первый вопрос, который может возникнуть в голове у верстальщика, узнавшего про scope: "Где я могу это использовать?". Когда мы вставляем код стилей в HTML, то это не сильно, на первый взгляд, отличает scoped-стили от обыкновенных inline. Не надо путать эти два понятия.

Вот пара ситуаций, в которых можно было бы применить <style> с атрибутом scope. Первая - это какие-либо html-демо на странице. Чтобы не париться с различными блоками и их id, достаточно просто создать стиль с ограниченной областью действия и вставить его прямо в страницу. Это может пригодиться лишь немногим веб-разработчикам, но, тем не менее, использование новых возможностей в такой ситуации - очевидно.

Другая ситуация - это использование scoped-стилей для элементов управления богатых функционалом веб-приложений, для обеспечения самодостаточности этих элементов. Хотя существует множество фреймворков, которые призваны решить проблемы элементов интерфейса веб-приложений, да может и Shadow DOM стандартизируют, но, тем не менее, scope - тоже решение.

Какими браузерами это поддерживается?

Кхм... да пока никакими! Только работы по поддержки этого свойства в WebKit идут...

Было бы неплохо...

Основная критика, которую народ высказывает по поводу scope - это то, что новая возможности практически ничем не отличается от inline-стилей. Возможно, было бы логично сделать что-то вроде такого: <link rel="stylesheet" href="style.css" scoped for="scoped-element" />, - где вместо "scoped-element" был бы id родительского для этого стиля элемента. Но, умные люди, видимо, знают, почему так сделать нельзя. А жаль...

Источник: http://dstorey.tumblr.com/post/11405550112/scoped

Дорогие клиенты, Веб изменился! Пришло время использовать HTML5 и CSS3

noreply@blogger.com (LordOtU) — Thu, 22 Sep 2011 14:09:10 PDT

Отсебятина

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

Отношение к разработке

Приблизительно 40% времени разработки сайта уходит на то, чтобы сайт выглядел одинаково, пиксель в пиксель, во всех браузерах. Мы хотим, чтобы все браузеры показывали посетителю одно и то же (ну, или очень похожее). Но нет никаких гарантий, что на мобильных устройствах все будет хорошо.
Раньше при разработке сайта все были уверены, что он должен отображаться идентично всегда и везде.
Теперь мы должны понимать, что знакомый нам Веб изменился. Мы уже не в 2004 году, когда разработка велась в основном под IE 6 на PC. Сегодня Веб охватывает множество устройств, включая мобильные телефоны, телевизоры, портативные компьютеры и Маки. Так что, наши сайты должны отображаться на разных устройства в соответствии со спецификой их платформы.
Стремясь сделать внешний вид вашего проекта идентичным только во всех десктопных браузерах, вы делаете его менее доступным.

Валидность кода

Валидация – это всего лишь инструмент, а не религия, которой нужно слепо следовать. Если хотите ознакомится с этим утверждением поближе, то прочитайте статью Джефри Вэя «But It Doesn’t Validate».
Сайт, код которого полностью валидный, не будет более доступным для пользователей, и не факт, что он будет корректно отображаться во всех браузерах. Но валидация на доступность и юзабилити не будет излишней.
Google утверждает, что валидность не влияет на результат поисковой выдачи. Но на эти результаты отчасти влияет то, насколько сайт доступен на различных платформах. Если хотите, то можете посмотреть ответ Мэтта Ката на вопрос о том, почему google.com не проходит валидацию W3C.

Так как же нам вести разработку сегодня?

Мы должны использовать HTML5 и CSS3 для того, чтобы наши сайты были более дружелюбны к современным устройствам, чтобы они были доступны и удобны для пользователей;
В связи с этим, процесс разработки ускоряется, что позволяет заканчивать проекты быстрее и делать их очень качественными;
Такие изменения используемых технологий позволяют экономить деньги клиентов;
Спроектированные таким образом сайты будут более перспективными;
Эта методология ускоряет разработку и уменьшает стоимость проекта.

Контент – важнее всего!

Наиболее важные принципы, которых стоит придерживаться – это:

Доступность. Каждый сайт должен состоять из чистого HTML-кода, чтобы быть доступным на любом устройстве. Это подразумевает доступность контента везде и всюду.
Удобство. Удобство восприятия информации также важно. Если сайт будет доступен, но не удобен в использовании, то это очень плохо (и может даже повлиять на результаты поисковой выдачи Google).

Различия между браузерами

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

IE6, браузеры и устройства, которые не поддерживают CSS;
Устаревшие версии браузеров, такие как: IE7-8, FF2, Chrome, Opera и Safari;
Все современные браузеры, типа FF3.6, Chrome, Opera и Safari;
CSS 3-D-анимация, которая на данный момент доступна только в Safari, но вскоре должна появиться в FF и Chrome.

Адаптивный дизайн

Адаптивный подход к дизайну подразумевает немного другое отношение к созданию сайтов и увеличивает время разработки. Тут вы должны делать сайт с резиновой шириной такой, что взаимодействие с ним пользователя будет зависеть от разрешения экрана устройства, с которого ведется просмотр. Такой подход включает в себя ориентацию на различные размеры экранов устройств, начиная от смартфонов и заканчивая широкоэкранными PC и Маками. Вот главные категории устройств, на которые стоит ориентироваться при таком подходе:

Смартфоны;
iPad в портретной ориентации, различные планшеты;
iPad в ландшафтной ориентации, PC и Маки с экранными разрешениями около 1024 пикселей;
Широкоэкранные дисплеи.

Подводя итоги

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

Opera	iPhone	Nokia	iPod Touch	Blackberry	Android
26.35%	18.05%	15.84%	8.69%	14.41%	6.69%

Также можно наблюдать сокращение доли IE, который уступает место другим браузерам.

Рассказывайте вашим клиентам о HTML5 и CSS3

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

Полезные инструменты для работы с HTML, CSS и JS: часть 2

noreply@blogger.com (LordOtU) — Wed, 31 Aug 2011 23:24:13 PDT

Инструменты для работы с JS

Modernizr 2
Modernizr – это широко используемая, открытая JS-библиотека, которая помогает вам использовать HTML5 и CSS3 при разработке сайтов. Начиная со второй её версии, вы можете совместно использовать механизм определения функционала браузера, media queries и загрузку ресурсов по требованию. Это дает вам мощь и гибкость для оптимизации при любых обстоятельствах.

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

FitText
FitText – это плагин для jQuery, который предназначен для отображения текста таким образом, чтобы он заполнял все пространство родительского элемента. Отлично подходит для создания заголовках, которые будут выглядеть одинаково красиво как на огромной панели, так и на экране мобильного устройства.

jQuery Waypoints
Это маленький плагин для jQuery который позволяет выполнить какую-либо функция, когда пользователь доскроллил до определенного элемента.

jQuery Plugin Boilerplate
Этот шаблон уже содержит в себе реализацию public- и private-методов, а также набор public- и private-свойств, которые могут пригодиться для комплексной разработки плагинов для jQuery.

ligature-js
Эта библиотека предназначена для конвертирования символов текста в типографские лигатуры с последующей вставкой их на страницу.

Placeholder jQuery Plugin/Polyfill
Этот jQuery-плагин обеспечивает поддержку нового атрибута форм в HTML5 – placeholder="", - в браузерах, которые его не понимают (речь идет, конечно, об IE).

StronglyTyped
Эта библиотека превращает JavaScript в некое подобие строго типизированного языка.

Kaffeine
Это набор расширений для JS, которые добавляют в язык некоторый синтаксический сахар.

Crossroads.js
Библиотека, предназначенная для диспетчерезации URL-адресов, написанная на JS.

Doctor JS
Doctor JS анализирует ваш JS-код и выдает отчет о проделанной работе в формате JSON.

HEAD.js
Это скрипт, который предназначен для ускорения, упрощения и модернизации сайта – это набор различных универсальных решений. С ним вы сможете загружать скрипты, как обычные картинки, а также безопасно использовать HTML5 и CSS3.

Hivelogic
Публикация e-mail-адреса на сайте в открытом виде – не лучшее решение, т.к. можно нагрести кучу спама в свой почтовый ящик. Эта библиотека предназначена для безопасной публикации e-mail на страницах сайта, так что их увидят только реальные люди, а не спам-боты. Более надежным решением данной проблемы является сервис Mollom.

JavaScript Garden
Это сервис, который создавался с образовательной целью. Он содержит информацию о распространенных ошибках, которые допускают разработчики, только что начавшие изучение языка.

Syntaclet
Этот букмарклет предназначен для подсветки кода, который может быть вставлен в элемент textarea. Один клик – и вы видите подсвеченный в соответствии с выбранным синтаксисом код, строки которого пронумерованы.

Bookmarkleter
Этот сервис предназначен для создания букмарклетов из JS-кода. Он убирает переводы строк, табуляцию, ненужные пробелы, кодирует URL и помещает код в функцию-обёртку.

Bookmarklet Crunchinator
Крутая тулза, которая также поможет вам создать букмарклет из JS-кода.

Полезные инструменты для работы с HTML, CSS и JS: часть 1

noreply@blogger.com (LordOtU) — Sat, 27 Aug 2011 12:15:47 PDT

Разработка клиентской части веб-приложения – штука занятная: учиться ей не сложно, но, чтобы стать профессиональным разработчиком, придется постараться. Она состоит из огромной кучи всевозможных вещей, которые необходимо учитывать; безумного количества настроек, которые нужно применять то там, то сям; большого количества деталей, не обращать внимания на которые просто нельзя, если хочешь сделать все правильно… К счастью, разработчики и дизайнеры придумали множество полезных утилит, библиотек и приложений, которые помогают нам, простым смертным, в этом нелегком деле освоения клиентской веб-разработки. Такие инструменты являются ценными и полезными, поскольку они экономят наше время при автоматизации рутинных задач и, следовательно, помогают нам сосредоточиться на более важных вещах.

Инструменты для работы с HTML и CSS

MHTML Email Boilerplate
Примеры кода на этом сайте помогут вам справится с наиболее распространенными ошибками, которые встречаются при верстке HTML-макетов писем почтовой рассылки.

Initializr
Этот инструмент позволяет вам сгенерировать HTML5-шаблон, основанный на HTML5 Boilerplate. Вы можете решить добавить ли в него образец содержимого, использовать jQuery или чистый JS, указать различные совместимости и настройки сервера. На выходе вы получите шаблон, который сможете применить для нового проекта.

Layer Styles
Это симпотичный и простой инструмент для создания CSS-кода. Он позволяет добавлять тени, фон, границы блока, закругление уголков и генерирует кросс-браузерный CSS-код.

Mobile Boilerplate
Шаблон, который позволит создавать вам насыщенные и производительные мобильные приложения. Используя этот инструмент, вы получите кросс-браузерный код для новых мобильных устройств, а также поддержку устаревших платформ Symbian, Blackberry, IE mobile.

Kotatsu
Простой генератор HTML-таблиц, который позволит вам легко и просто присвоить необходимые классы столбцам и строкам. Если же вам нужен простой генератор списков, то посмотрите вот тут.

Vogue
Этот инструмент позволяет перезагружать стили на странице во всех браузерах и может быть настроен для одновременной перезагрузки стилей во всех открытых браузерах одновременно. Для того, чтобы воспользоваться данным инструментом, необходимо установить NodeJS и npm.

LiveReload
LiveReload применяет изменения CSS/JS-файлов страницы в Safari и Chrome без ее перезагрузки и перезагружает страницу, если был изменен ее HTML-код. В качестве альтернативы этому инструменту можно использовать библиотеку Live.js, задача которой отображать только актуальную версию страницы, над которой вы работаете в данный момент.

css-x-fire
Интересный инструмент, который позволяет применять в IDE CSS-свойства, которые были установлены «на лету» через FireBug. Таким образом, разработчик может сосредоточится на работе с CSS, избегая процесса обновления страницы.

Ffffallback
Букмарклет, который позволяет вам тестировать различные наборы шрифтов, пока не будет достигнут удовлетворительный результат. Работает он так: производится сканирование CSS открытой страницы, а затем создается ее клон, с которым вы можете спокойно работать.

LESS.app for Mac OS X
LESS добавляет в стандартный CSS переменные, вложенные правила и операторы. Это приложение делает работу с LESS еще проще и позволяет компилировать less-файлы в стандартный CSS.

Less-Boilerplate
Шаблонный CSS, написанный на LESS, включающий в себя CSS reset, CSS3-хелперы и многое другое.

Needle v0.1a1
Neddle представляет собой удобный инструмент для тестирования CSS путем снятия скриншотов различных частей сайта и сравнения их с эталоном. Также этот инструмент предоставляет средства для тестирования рассчитанных CSS-значений и позиционирования HTML-элементов.

inuit.css
Это CSS-фреймворк, который содержит полезные советы, приемы и практики в одном файле.

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

CSSsitemap System
David Leggett поделился с общественностью кодом основанной на CSS карты сайта, которую они разработали вместе с Andrew Maier.

Normalize.css
Normalize.css использует несколько другой подход к сбросу умолчаний CSS-свойств. Jonathan Neal и Nicolas Gallagher провели некоторые исследования и остановились на том, что не все свойства нужно сбрасывать, но некоторые из них нуждаются в «нормализации».

Holmes
Это инструмент для тестирования правильности разметки прямо на странице. Вам нужно только добавить один единственный класс в тег <body> страницы и вокруг ошибочной разметки появится красная рамка, желтой рамкой обведуться предупреждения, а серой – упраздненные элементы. Также, существует букмарклет, который позволяет holmes.css к любой странице, открытой в вашем браузере.

Zen Coding
Это плагин для редакторов и сред разработки, который позволяет писать разметку страницы в стиле CSS-селекторов.

CSS Stress Testing and Performance Profiling
Andy Edinborough поделился с нами кодом, при помощи которого можно провести стресс-тест на производительность CSS в основных браузерах.

CSS Crush
Препроцессор для CSS. Выполняет много полезной работы при обработке и подключении CSS-файлов на страницу.

CSSPrefixer
CSSPrefixer поможет вам оптимизировать рабочий процесс и сэкономить массу времени при вставке необходимых префиксов CSS-свойств для различных браузеров.

iOS Media Query Previewer
Очень простой и интуитивно понятный инструмент для того, чтобы посмотреть, как будет выглядеть сайт на iPhone и iPad.

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

PCSS
Написанный на PHP CSS-препроцессор, который позволяет использовать всю мощь CSS3, обходясь меньшим количеством кода.

Спич!

noreply@blogger.com (LordOtU) — Sat, 27 Aug 2011 04:17:28 PDT

Таки очень давно ничегошеньки не писал... И это "неписание" меня тяготит, т.к. в голове упорно вертится слово "надо", которое, что странно, не идет вразрез с "хочу". Что ж, вернемся пока к переводам, а там - посмотрим, как пойдет. ;)

Все на ZFConf 2011!!!

noreply@blogger.com (LordOtU) — Sat, 07 May 2011 08:27:22 PDT

Основные подготовительные работы по конференции закончены. Доклады сформированы. Среди спикеров представители KnpLabs, Magento, JetBrains, Sphinx и других известных компаний.

Открыта финальная регистрация!

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

Пожалуйста, обратите внимание на то, что изменилось место проведения! Мероприятие будет проходить на прошлогодней площадке — в актовом зале ЛГТЦ (Ленгипротранс-Центр), по адресу: Московский пр., 143, ст. м. «Электросила». Кофе-брейки и обсуждения на флипчартах будут проходить в фойе.

Cписок докладов:

Гибкая архитектура Zend Framework приложений с использованием Dependency Injection
Алексей Качаев (Сogniance, Senior PHP Developer)

Воюем за ресурсы: Повышение производительности Zend Framework приложения с помощью phpDaemon, Varnish и ESI
Алексей Качаев (Сogniance, Senior PHP Developer)

Behavior Driven Development в PHP и Zend Framework
Константин Кудряшов (KnpLabs, Senior Web Developer)

Разделение труда: Организация многозадачной, распределенной системы в Zend Framework с помощью Job Queue
Александр Готгельф (Magento, PHP-разработчик)

Как может помочь среда разработки при написании приложения на Zend Framework?
Николай Матвеев (JetBrains, разработчик)

Создание REST-API для сторонних разработчиков и мобильных устройств с авторизацией по протоколу OAuth 1.0
Дмитрий Чижевский (Дзен-мани, разработчик)

Толстая модель: История разработки собственного ORM
Михаил Шамин (Геометрия, ведущий разработчик)

Что такое Sphinx, зачем он вообще нужен и как его использовать с PHP (от простого индекса до поискового кластера)
Владимир Федорков (Sphinx, Director of Professional Services)

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

Торопитесь, количество мест ограничено!

Обязательно следите за последними новостями:
RSS-канал: feeds.feedburner.com/zfconf
Twitter: @zfconf
Группа ВКонтакте: vkontakte.ru/club14951507

Организатор: компания Wizartech
Партнеры: сообщество zendframework.ru и конференция ZFConf Ukraine

Лифторазмышление

noreply@blogger.com (LordOtU) — Tue, 30 Nov 2010 09:01:26 PST

Когда-то в лифте.

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

Все на ZFConf Ukraine!

noreply@blogger.com (LordOtU) — Tue, 16 Nov 2010 09:54:00 PST

27-го ноября в Киеве пройдет бесплатная, международная, совместная конференция ZFConf Ukraine (http://zfconf.org.ua) & MageConf (http://mageconf.com).

Цель конференции - объединить лучших специалистов PHP и Zend Framework Украины, России и других стран СНГ.

ZFConf Ukraine – первая в Украине конференция по Zend Framework, проводится в партнерстве с ZFConf Russia (http://www.zfconf.ru) и сообществом http://zendframework.ru. ZFConf Russia была первой конференцией по Zend Framework и прошла в марте этого года в Санкт-Петербурге, Россия, собрав более 200 участников из России, Беларуси, Украины, Литвы и других стран СНГ.

Конференция MageConf впервые прошла в мае 2010 года в Киеве. Это была первая конференция из серии PHP and Zend Framework в Украине. Ее посетили более 150 специалистов.

Конференция пройдет 27 ноября, в Киеве.

Титульный спонсор конференции – компания Magento.

Место: КиевЭкспоПлаза, ул. Салютная 2б, 3 павильон.

Время: 27 ноября 2010 г. (с 11:00 до 19:00).

Длительность: 1 полный день.

Формат: доклады в три потока и обсуждения на флипчарте (в перерывах).

Язык докладов: русский.

Стоимость участия: бесплатно.

Потоки: Zend Framework, PHP, Magento.

Аудитория: Разработчики ПО и специалисты по Project Management с Украины, России и близлежащих стран СНГ. Ожидаемое количество участников – 500 человек.

Доклады (http://zfconf.org.ua/conf-2010/category/topics):

Встречайте Zend Framework 2.0. Александр Веремьев / Zend Framework Core команда (Zend Technologies).
Эволюция ZF: архитектура, шаблоны, рефакторинг. Виктор Фараздаги / Component Maintainer и Contributor ZF 2.0 (4C).
Юнит тестирование в Zend Framework 2.0. Ростислав Михайлив / Chief Developer / Software Architect (Gadu-Gadu).
Хранение, обработка и отдача статики с использованием \Zend \File. Опыт социальной сети http://starlook.ru. Кирилл Мокевнин / Senior developer (undev).
Чуть сложнее чем Singleton: аннотации, IOC, АОП. Кирилл Чебунин / Senior PHP Developer (Альпари).
Doctrine 2. Валерий Рабиевский / Team leader (http://stfalcon.com).

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

Также были бы рады услышать ваши комментарии по текущим темам.

Регистрация (http://zfconf.org.ua/registration/).

Регистрируясь на одну конференцию, вы автоматически получаете доступ и на другую.

Если у вас есть предложения, или вы хотите быть спонсором, для связи с нами используйте контакты (http://zfconf.org.ua/contacts/).

Регистрируйтесь и следите за обновлениями на http://zfconf.org.ua.

Все на HighLoad++!

noreply@blogger.com (LordOtU) — Mon, 11 Oct 2010 09:45:05 PDT

Добрый день!

Через две недели, 25 и 26 октября в Москве пройдет крупнейшая профессиональная техничская конференция Рунета - конференция разработчиков высоконагруженных систем HighLoad++. Мероприятие проходит уже четвертый год, собирая более 700 участников. В этом году основная направленность конференции - оригинальные исследования, новые архитектуры, новые концепкции и подходы в построении крупных Интернет-проектов.

HighLoad++ - знаковое событие по обмену опытом - мы ожидаем Stoyan Stefanov (Yahoo), Eugene Chigirinskiy (Microsoft), Patrice Pelland (Microsoft), James Golick, Robert Johnson (Facebook), Joe Damato, Петр Зайцев (Percona), Simon Riggs (PostgreSQL) и Bruce Momjian (PostgreSQL).

Joe Damato, "хакер", специализирующийся на низком уровне, известный специалист в мире Ruby прочитает доклад "Настройка и инструментарий для Linux / Performance tweaks and tools for Linux". Доклад разделен на две части. В первой части Джо рассмотрит особенности различных настроек производительности ядра Linux (и стандартные драйвера). Разговор пойдет о некоторых малоизвестных настройках ядра, подстройка которых поможет наиболее эффективно использовать аппаратные средства железа.

Во второй части доклада разговор пойдет о полезных инструментах для изучения и диагностики ошибок в процессах. Автор пробежится по различным инструментам для Linux (strace, ltrace, oprofile, gdb, и другие) и разберет, как их можно использовать, чтобы получить представление о том, на что тратятся ресурсы и время обработки запросов.

Другой отличный доклад - про архитектуру крупнейшего интернет-сайта в мире - Facebook.com от Robert Johnson, руководитель отдела разработки в Facebook, где он разрабатывает технологии по экономически эфективному масштабированию инфраструктуры и оптимизации производительности для миллионов пользователей Facebook.

Роберт расскажет о технологии, необходимой для запуска сайта таких масштабов (100 млрд. просмотров в день, 50 млрд. хранящихся фотографий), включая конкретные технологии созданные компанией Фейсбук, некоторые принципы, применяемые в работе с масштабированием, и уроки, полученные во время этих разработок. Также Роберт расскажет о наших новейших разработках в области масштабирования - пропуска социального контекста из сети через платформу Facebook.

Организаторы собрали в эти два дня крупнейшую встречу разработчиков баз данных - мы узнаем о новшествах в PostgreSQL и MySQL от тех, кто разрабатывал эти новшества: Саймон Ригс, Брюс Момжан, Петр Зайцев, разработчики Сфинкса, Константин Осипов и другие.

Целый блок докладов о Ruby и Python отражает растущую популярность этих языков программирования:

Frontik. Сервер сборщик на python / Сергей Никулин (HeadHunter);
Оптимизация одного из топовых приложений для социальной сети ВКонтакте: 1000 запросов в секунду на Rails / Максим Лапшин;
Приемы разработки высоконагруженных приложений на Twisted / Андрей Смирнов;
Erlyvideo: 2000 одновременных видеоподключений / Максим Лапшин;

Конечно, конференция такого масштаба, включает в себя и рассказ об облачных вычислениях, причем на серьезном профессиональном уровне:

Cloud APIs: обзор API западных провайдеров и API Scalaxy;
Extreme Cloud Storage on FreeBSD / Андрей Пантюхин;
Scaling to Hundreds of Millions of Requests: What Worked and What Didn't / James Golick;

DDOS и защита от него:

Тандемные DDoS-атаки / Проблематика уязвимостей в спецификации TCP/IP (фундаментальные уязвимости) / Артем Гавриченков;
Отчет за год по DDOS (атаки на ДНС, "не жадные" ботнеты, атаки на индекс Yandex (черный seo), высокоскоростные атаки, позиция государства и МВД на эту тему) / Александр Лямин;

Пара круглых столов с участием крупнейших компаний Рунета и мира:

Квадратный стол про использование many-core CPU с участием Google, Intel, Yandex и Badoo / (Google, Яндекс, Mail.ru, Intel);
Круглый стол с представителями ВКонтакте;

Все доклады конференции построены как профессиональные - даже если докладчик рассказывает о своей услуге, он рассказывает о том, как она устроена, а не рекламирует ее. Например - "Как мы строим CDN в России". Классификация CDN по спобу расположения серверов: расстановка серверов по сетям интернет-провайдеров или подключение к провайдерам в точках обмена трафиком. Классификация CDN по способу распределения нагрузки: DNS, HTTP Redirect. Классификация CDN по способу нахождения кратчайшего пути до пользователя.

И многое, многое другое - более 60 докладов из которых Программный комитет конференции, в который входят технические директора и ведущие специалисты крупнейших компаний Рунета (Яндекс, Mail.ru, Рамблер, Badoo и другие), выберет самые лучшие.

Подробности Вы можете найти на сайте конференции.

Удачи и до встречи на конференции!

Google Maps API 3 – Мобильные устройства

noreply@blogger.com (LordOtU) — Sat, 09 Oct 2010 11:31:50 PDT

Google Maps API 3 – Мобильные устройства

Многие браузеры имеют мобильные версии. Поэтому теперь очень важно знать, как разрабатывать web-приложения (в том числе и карты) для них. Когда дело доходит до интеграции Google Maps в web-приложение, ориентированное на продвинутые устройства (такие, как, скажем, iPhone), то процесс разработки мало чем отличается от такового для настольных систем. Однако, существуют некоторые моменты, на которые стоит обратить внимание.

В текущей версии API разработчики уделили очень большое внимание мобильным девайсам. Производительность карт в мобильных версиях тех или иных браузера стала гораздо выше. Версия API 3, к примеру, работает в 2 раза быстрее на iPhone, чем ветка API 2.

Перейдем к делу.

Расширяем обозримое пространство

Экраны мобильных устройств намного меньше, нежели экраны их старших братьев. Первое, что мы сделаем, – будем использовать доступное экранное пространство по максимуму. Это делается путем установки ширины и высоты карты в 100%. Предположим, что id элемента, содержащего карту, равен "map". Тогда CSS-код будет выглядеть так:

html, body {  
  height: 100%;  
  margin: 0;  
}  
#map {  
  width: 100%;  
  height: 100%;  
}

Обратите внимание, что высота и ширина элементов <html> и <body> установлена в 100% при нулевом значении границ. Это нужно для того, чтобы не было пустого пространства вокруг карты. Вот что получилось:

Отключаем зуммирование страницы

Владельцы мобильных устройств с сенсорными экранами привыкли использовать пальцы, сложенные «щепотью», для увеличения масштаба страницы. Но в приложении с интегрированными картами такой «маневр», скорее всего, будет использоваться для зуммирования карты, а не всей страницы. К счастью, есть специальный тег <meta>, при помощи которого можно отключить масштабирование всей страницы. Выглядит он следующим образом:

<meta name="viewport" content="initial-scale=1.0, user-scalable=no" />

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

Отсутствие реакции на наведенный курсор

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

Заключение

Разработка карт для мобильных устройств практически ничем не отличается от таковой для настольных компьютеров. Если вы хотите узнать больше о разработке для iPhone, то загляните сюда. Разработчикам для Android рекомендую заглянуть сюда.

Google Maps API 3 - Инфо-окна

noreply@blogger.com (LordOtU) — Thu, 02 Sep 2010 10:47:24 PDT

Google Maps API 3 – Инфо-окна

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

Объект InfoWindow

Объект InfoWindow открывает инфо-окно в каком-нибудь месте карты. Оно, как правило, выглядит как речевая выноска («пузырь», бабл), хвостик которой указывает на конкретный объект. В качестве объекта могут выступать любе координаты на карте.

Объект находится в пространстве имен google.maps.InfoWindow и принимает в качестве необязательного аргумента параметр options. Options – это литерал, в котором вы можете определить свойства инфо-окна. Для того, чтобы заполнить инфо-окно содержимым, необходимо использовать свойство content литерала options. Можно задать его значение на этапе создания инфо-окна, а можно и позже – используя метод setContent(). Значением этого свойства может быть как простая строка, так и HTML-код.

Подготавливаем сцену

Начнем, пожалуй, с карты с одним маркером:

// Задаем список опций карты  
var options = {  
    zoom: 7,  
    center: new google.maps.LatLng(56.83, 15.16),  
    mapTypeId: google.maps.MapTypeId.ROADMAP  
};  
// Инициализируем карту
var map = new google.maps.Map(document.getElementById('map'), options);  
// Создаем маркер
var marker = new google.maps.Marker({  
  position: new google.maps.LatLng(56.8848, 14.7730),  
  map: map,  
  title: 'Маркер'  
});

Вот, что мы увидим в окне браузера:

Добавляем инфо-окно

Теперь, когда все подготовлено, давайте добавим инфо-окно. В этом примере мы просто заполним наше окошко классической фразой «Hello, world!»:

// Создаем объект инфо-окна
var infowindow = new google.maps.InfoWindow({  
  content: 'Hello, world!'  
});

Показываем добавленное окно

Теперь у нас есть инфо-окно с добавленным в него текстом, но не добавленное на карту. Для того, чтобы пользователь увидел наше окошко при загрузке карты, нужно использовать метод open() для объекта InfoWindow. Этот метод принимает два аргумента: объект карты, к которой добавляется инфо-окно, и якорь (маркер, координаты), которым фиксируется окошко.

Если второй аргумент не задан, то необходимо использовать свойство position объекта InfoWindow или метод setPosition(). В этом примере мы привязываем окошко к ранее созданному маркеру:

infowindow.open(map, marker);

Мы увидим следующее:

Дело обстоит так, что по умолчанию карта принимает такой вид, чтобы инфо-окно полностью попадала в область видимости. Это можно изменить, выставив значение свойства disableAutoPan инфо-окна в false.

Добавляем реакцию на клик

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

Для того, чтобы добавить событие к маркеру, необходимо использовать метод addListener(), которые находится в пространстве имен google.maps.event. Этот метод принимает три аргумента: первый – объект (в данном случае - маркер), к которому привязывается событие; второй – собственно наименование события (в данном случае - click); третий – функций, которая сработает после того, как произойдет событие.

Код следующий:

google.maps.event.addListener(marker, 'click', function() {  
  infowindow.open(map, marker);  
});

Теперь, когда мы загрузим страницу, инфо-окно не отобразится. Оно отобразится только после того, как произойдет клик по маркеру.

Множественные окна

Вы могли заметить, что код, инициализирующий инфо-окно, вынесен из обработчика события click по объекту marker. Тут можно подумать о том, а не проще ли и логичней внести этот код в обработчик. Нет, не проще и не логичней. Дело в том, что в данном случае (когда код инфо-окна вынесен из обработчика) мы уверены, что имеем только один экземпляр окошка. Если же мы внесем код в обработчик, то при каждом клике по маркеру будет создаваться новое инфо-окно.

Так что перед созданием какого-либо инфо-окна следует быть уверенным, что никаких других окон не создано.

Свойства объекта InfoWindow

Ниже перечислена некоторые свойства объекта инфо-окна, при помощи которых вы сможете более полно его контролировать. Вот они:

content

Значение этого свойства определяет содержимое инфо-окна. Это может быть как строка обычного текста, так и HTML-код. Размер окна автоматически подстраивается под размер содержимого.

disableAutoPan [boolean]

Если значение этого свойства установлено в true, то карта автоматически не фокусируется на инфо-окне. Значение по умолчанию – false.

maxWidth [number]

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

Еще один способ контроля ширины инфо-окна – это наполнение его каким-нибудь HTML-блоком, ширина которого изменяется посредством CSS.

pixelOffset [size]

Значение этого свойства определяет, как далеко инфо-окно будет смещено от точки позиционирования (якоря).

position [LatLng]

Определяет точки позиционирования инфо-окна.

zIndex [number]

Определяет порядок наложения инфо-окон.

В заключении

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

Источник

noreply@blogger.com (LordOtU) — Sun, 22 Aug 2010 16:04:42 PDT

Люди не знают, чего они хотят. Люди привыкли обращать самое пристальное внимание на окружающих. Люди берут жизнь из чужих рук – замкнутый круг. Люди – в большинстве своем абсолютно несамодостаточные существа, натура их не цельна. Люди – стадо. Идеализация – зло. Человек не должен создавать у себя в голове стереотипированный идеал – он должен быть уверен в том, что не ДОЛЖНО БЫТЬ ТАК, но БУДЕТ ТАК, исходя только из своих собственных убеждений. Человек должен быть настолько эгоистичным, насколько это вообще возможно.
К сожалению, сегодня, как и 67 лет назад, когда вышел второй роман Айн Рэнд «Источник», мало кто придерживается этих сентенций.
А зря.

Google Maps API 3 – Маркеры

noreply@blogger.com (LordOtU) — Thu, 12 Aug 2010 05:22:31 PDT

Google Maps API 3 – Маркеры

Маркеры являются, наверное, самым используемым элементом цифровых карт. В этой статье мы рассмотрим механизм размещения маркеров на карте и их кастомизацию применительно к Google Maps API 3.

Объект маркера

Объект, отвечающий за инициализацию маркеров, находится в пространстве имен google.maps.Marker и принимает единственный аргумент – список параметров, который является литералом. Этот литерал должен содержать следующие обязательные свойства:

map [Map] – индентификатор карты, на которой будет размещен маркер;
position [LatLng] – координаты точки, в которую будет установлен маркер; должно иметь тип google.maps.LatLng.

Давайте создадим карту, на которую поместим стандартный маркер:

// Создаем карту
var map = new google.maps.Map(document.getElementById('map'), {  
  zoom: 7,  
  center: new google.maps.LatLng(56.83, 15.16),  
  mapTypeId: google.maps.MapTypeId.ROADMAP  
});  
  
// Создаем и размещаем маркер на карте
var marker = new google.maps.Marker({  
  position: new google.maps.LatLng(56.8848, 14.7730),  
  map: map  
});

На экране мы увидим нечто вроде этого:

Добавляем подсказку к маркеру

Чтобы немного оживить наш маркер, добавим к нему всплывающую подсказку. Подсказка будет отображаться, когда пользователь наводит указатель мыши на маркер. Это легко сделать, если добавить к списку опций маркера свойство title со значением текста подсказки.

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

var marker = new google.maps.Marker({  
  position: new google.maps.LatLng(56.8848, 14.7730),  
  map: map,  
  title: 'My workplace',  
  clickable: false  
});

Увидим вот такую картину:

Изменяем иконку маркера

Часто приходится отображать на карте объекты разного типа. Для это целесообразно использовать различные маркеры.

Чтобы задать нестандартный маркер, необходимо придать свойству icon значение URL, по которому расположен файл иконки маркера (классные иконки есть тут http://code.google.com/p/google-maps-icons/):

var marker = new google.maps.Marker({  
  position: new google.maps.LatLng(56.8848, 14.7730),  
  map: map,  
  title: 'My workplace',  
  clickable: false,  
  icon: 'http://google-maps-icons.googlecode.com/files/factory.png'  
});

Перед нашими глазами предстанет вот такое чудо:

Ниже перечислены некоторые другие свойства маркеров, которые позволяют контролировать иконку в полном объеме, как то:

icon [string|MarkerImage] – определяет иконку маркера. Это свойство может принимать значение как URL’а, указывающего на соответствующее изображение, так и объекта Marker;
shadow [string|MarkerImage] – устанавливает тень для иконки маркера. Это свойство может принимать значение как URL’а, указывающего на соответствующее изображение, так и объекта MarkerImage;
shape [object] – определяет кликабельную область вокруг иконки маркера. Принимает объект MarkerShape, содержащий координаты многоугольной области, в качестве значения;
flat [boolean] – определяет наличие тени у иконки маркера. Если значение этого свойства установлено в true, то тень у иконки отсутствует.

Замечание: если устанавливать произвольную картинку для иконки маркера, то маркер автоматически лишается тени.

Другие свойства

Есть еще несколько свойств, при помощи которых можно контролировать внешний вид и поведение маркера. Вот они:

cursor [string] – это свойство определяет то, как будет выглядеть курсор мыши при наведении на маркер;
visible [boolean] – это свойство определяет видимость маркера. Если установить его значение в false, то маркер не будет виден;
zIndex [number] – определяет порядок наложения маркеров друг на друга.

В заключении

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

Google Maps API 3 – Настройки карты

noreply@blogger.com (LordOtU) — Fri, 06 Aug 2010 13:45:25 PDT

Google Maps API 3 – Настройки карты

В первой статье этого цикла мы говорили о том, как создать простую карту, используя новую версию API. В этот раз разговор пойдет о совойствах, доступных при создании карты, и о том, как они меняют внешний вид и поведение созданной нами карты.

Поехали.

Обязательные свойства

О трех обязательных свойствах (center, zoom, mapTypeId) я говорил в предыдущей статье, так что подробно на них останавливаться не буду, но перечислю значения, которые может принимать свойство mapTypeId – это:

ROADMAP – обычная карта;
SATELLITE – изображение со спутника;
HYBRID – гибрид изображения со спутника и обычной карты;
TERRAIN – карта ландшафта.

Для примера, инициализируем карту, у которой свойство mapTypeId примет значение SATELLITE:

// Создаем объект, содержащий свойства карты  
var options = {  
  zoom: 6,  
  center: new google.maps.LatLng(57.8, 14.0),  
  mapTypeId: google.maps.MapTypeId.SATELLITE  
};  
// Вызываем конструктор, инициализирующий карту  
var map = new google.maps.Map(document.getElementById('map'), options);

В браузере мы увидим нечто подобное:

Свойства интерфейса карты

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

disableDefaultUI [boolean]

Значение по умолчанию – false. Если установить значение этого свойства в true, то оно отключит те элементы управления, которые должны отображаться по умолчанию. Это: контроллер зума и список с доступными типами карты. Эти элементы можно включать/выключать по одиночке.

mapTypeControl [boolean]

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

mapTypeControlOptions

Значение этого свойства определяет то, каким образом будет отображаться список с типами карты. Это свойство может принимать одно из следующих значений, которые находятся в пространстве имен google.maps.MapTypeControlStyle:

DEFAULT – вид списка будет зависеть от размера карты и других факторов;
HORIZONTAL_BAR – список примет вид горизонтальной панели:
DROPDOWN_MENU – список примет вид выпадающего меню, размеры которого будут меняться в зависимости от доступного пространства, что не всегда способствует хорошему внешнему виду:

Примера ради, зададим свойства карты, список типов которой будет выглядеть как выпадающее меню:

var options = {  
  zoom: 6,  
  center: new google.maps.LatLng(57.8, 14.0),  
  mapTypeId: google.maps.MapTypeId.ROADMAP,  
  mapTypeControlOptions: {  
    style: google.maps.MapTypeControlStyle.DROPDOWN_MENU  
  }  
};

Отметим, что свойство mapControlOptions явялется литералом, параметр style которого отвечает как раз за вид списка типов карты. По началу такая запись может показаться громоздкой, но это лишь по началу.

navigationControl [boolean]

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

navigationControlOptions

Значение этого свойства определяет то, каким образом будет отображаться контроллер навигации по карте. Оно так же, как и mapTypeControlOptions, является литералом, значения параметра style которого находятся в пространстве имен google.maps.NavigationControlStyle:

DEFAULT – при этом значении вид контроллера навигации зависит от размера карты и других факторов;
SMALL – контроллер, оснащенный лишь кнопками управления зумом:
ANDROID – такой же контроллер, как и SMALL, только приспособленный под мобильную платформу Android;
ZOOM_PAN – контроллер, позволяющий управлять зумом и передвижением по карте:

Например, зададим свойства карты с самым функциональным контроллером навигации:

var options = {  
  zoom: 6,  
  center: new google.maps.LatLng(57.8, 14.0),  
  mapTypeId: google.maps.MapTypeId.ROADMAP,  
  navigationControlOptions: {  
    style: google.maps.NavigationControlStyle.ZOOM_PAN  
  }  
};

scaleControl [boolean]

Значении этого свойства определяет, будет ли отображаться линейка масштаба. По умолчанию имеет значение false. Если установить его в значение true, то на карте, внизу, появится такая линейка:

scaleControlOptions

Свойство, которое пока может принимать единственное значение – STANDART.

keyboardShortcuts [boolean]

Свойство, значение которого определяет возможность управления картой при помощи клавиатуры: перемещение происходит при помощи стрелок, а уровень зума регулируется клавишами +/-. По умолчанию имеет значение true. Если хотите отключить управление картой при помощи клавиатуры, то установите значение этого свойства в false.

Свойства блока с картой

Существует несколько свойств, определяющих поведение блока с картой.

noClear [boolean]

Значение по умолчанию – false. Определяет, будет ли очищен от первоначального содержимого блок, содержащий карту.

backgroundColor [string]

Свойство, определяющее фон блока до того, как будет загружен слой с картой.

noResize [boolean]

Значение по умолчанию – false. Определяет изменение размеров блока, содержащего карту.

Свойства курсора

И, наконец, немного о свойствах курсора.

draggableCursor

Устанавливает путь (URL) до файла-курсора, который будет отображаться при наведении на перетаскиваемый объект.

draggingCursor

Устанавливает путь (URL) до файла-курсора, который будет отображаться при перетаскивании объекта.

В заключении

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

Google Maps API 3 – Основы

noreply@blogger.com (LordOtU) — Wed, 04 Aug 2010 03:43:13 PDT

Google Maps API 3 – Основы

Итак, Google Maps API добрался-таки до третьей версии. Новая версия API была полностью переписана разработчиками и сориентировали ее в первую очередь на скорость работы. Эта статья – первая из нескольких, посвященных Google Maps API 3. Здесь будет рассказано о том, как создать простую карту при помощи новой версии API и о том, какие отличия имеются от предыдущих версий.

Информация к размышлению

Ну, прежде всего это – ранний релиз нового API и он все еще находится в разработке. Новая версия не содержит всех тех вещей, которые были во второй ветке API, и, скорее всего, никогда не будет поддерживать весь старый функционал такой, как, например, выполнение AJAX-запросов и вывод лога. Для всего этого человечество давно придумало такие библиотеки, как jQuery и, скажем, Prototype и полезные инструменты такие, как FireBug. Поэтому все эти особенности не были и не будут включены в новую версию API – она должна работать так быстро, как только это возможно.

Поехали.

Подключаем новый API

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

Единственный параметр, который необходимо указать при подключении API, - это то, есть ли у вашего устройства (браузера) датчик (GPS-сенсор, или другой способ определения местоположения) или нет: sensor=true, если датчик есть, и sensor=false, если его нет. Параметр sensor и его значение является последней частью строки URI, подключающей API.

Создаем карту

Новое пространство имен

В предыдущих версиях использовалось множество глобальных переменных, имеющих вначале префикс G таких, как GMap и GLatLng, например. В новой версии использутеся пространство имен google.maps. Таким образом то, что раньше называлось GLatLng, теперь будет называться google.maps.LatLng. Использование пространства имен – это хорошие нововведение, так как оно позволяет выработать хороший стиль программирования.

Теперь на практике посмотрим, как создать объект, содержащий координаты точки, в соответствии с новым стилем и сравним со стилем старым:

// По-старому  
var latlng = new GLatLng(57.8, 14.0);  
// По-новому  
var latlng = new google.maps.LatLng(57.8, 14.0);

Литералы объектов

Новый API делает упор на использование литералов объектов для передачи параметров в их методы. Старая версия API так же позволяла использовать литералы, но не так широко, как API за версией 3. Использование литералов делает код более читаемым и легко расширяемым:

var myObj = {  
  id: '1',  
  name: 'Whatever'  
};  
alert(myObj.name); //Выведет "Whatever"

Это быстрый и удобный способ создать JS-объект. Многие из вас могли найти схожесть между примером и JSON-кодом – это действительно верно, т.к. любой JSON-код фактически является объектом JavaScript.

Инициализируем карту

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

Теперь процесс инициализации весьма отличается от того, что мы знали по старым версиям API. Если раньше нам нужно было вызвать метод setCenter(), чтобы установить координаты центра и уровень увеличения, сразу после того, как мы использовали конструктор, то сейчас в этом нет необходимости: мы задаем координаты центра и уровень начального зума в литерале, а конструктор сам выполняет необходимые действия. Вот вам наглядный пример:

// Создаем объект LatLng, который будет содержать координаты центра карты
var latlng = new google.maps.LatLng(57.8, 14.0);  
// Создаем литерал, в котором будут хранится свойства карты  
var options = {  
  zoom: 6,  
  center: latlng,  
  mapTypeId: google.maps.MapTypeId.ROADMAP  
};  
// Вызываем конструктор, инициализирующий карту  
var map = new google.maps.Map(document.getElementById('map'), options);

Параметры

Как уже говорилось выше, параметр options – это литерал, который содержит три необходимых свойства для инициализации карты:

center - координаты центра карты в формате google.maps.LatLng;
zoom – уровень начального зума;
mapTypeId – тип инициализируемой карты в формате google.maps.MapTypeId.

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

В заключении

В заключении хотелось бы сказать вот что: команда Maps API – молодцы. Они выделили особое пространство имен, переменные которого не будут путаться с глобальными переменными; они сделали использование литералов более интенсивным.

Ну и в самом конце – ссылка на карту, созданную в соответствии с новой версией Google Maps API.

Используем HTML5-атрибут placeholder для элементов форм уже сейчас при помощи jQuery

noreply@blogger.com (LordOtU) — Thu, 12 Aug 2010 05:04:34 PDT

Используем HTML5-атрибут placeholder для элементов форм уже сейчас при помощи jQuery

Собственно, название отражает суть заметки. Никаких подробностей – только сухой код. Ну, и пример, конечно.

И, почти то же самое, только с расширенной функциональностью (в виде задания CSS-классов для текста в атрибуте placeholder) и сделанное в виде плагина для jQuery:

(function($) {
$.fn.placeholder = function(options) {
 var defaults = {css_class: "placeholder"};
 var options = $.extend(defaults, options);  
 this.each(function() {
  if ($(this).attr('placeholder') !== undefined) {
   var phvalue = $(this).attr("placeholder");
   var currvalue = $(this).attr("value");
   if (phvalue == currvalue) {
    $(this).addClass(options.css_class);
   }
   if (currvalue == "") {
    $(this).addClass(options.css_class);
    $(this).val(phvalue);
   }
   $(this).focusin(function(){
    var ph = $(this).attr("placeholder");
    if (ph == $(this).val()) {
     $(this).val("").removeClass(options.css_class);
    }
   });
   
   $(this).focusout(function(){
    var ph = $(this).attr("placeholder");
    if ($(this).val() == "") {
     $(this).val(ph).addClass(options.css_class);
    }
   });
  }
 });
 return this;
 };
})(jQuery);

Пример использования плагина лежит тут, а вот – ссылка на сам плагин.

SyntaxHighlighter, прикрутись!

noreply@blogger.com (LordOtU) — Thu, 22 Jul 2010 08:11:44 PDT

Сейчас попробуем лицезреть пост с вменяемой подсветкой исходного кода на, скажем, JS:

function foo()
{
    alert("Привет!");
}

Фото! Фотки! Фоточки!

noreply@blogger.com (LordOtU) — Sun, 18 Jul 2010 11:19:49 PDT

Парам-пам-пам! Живой, человеческий пост, в котором я пишу о новых фоточках! Итак, пополнились разделы "Горы" (выложено немного Архыза 2010 года) и "Камерофония". Ссылочки на Fotki.com: первая, вторая.

52 Framework

noreply@blogger.com (LordOtU) — Sat, 17 Jul 2010 06:30:39 PDT

52 Framework: первый HTML5 и CSS3 фреймворк

Сегодня мы рассмотрим новый проект от Enavu Network под названием 52 Framework.

Они (Enavu Network) утверждают, что их проект — это первый фреймворк, созданный специально для HTML5 и CSS3. Ниже мы рассмотрим некоторые основные черты этого проекта и немного покопаемся в коде, чтобы найти что-нибудь интересненькое. Итак, приступим.

Касаемо фреймворков в целом

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

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

Каждый фреймворк, который вы можете найти в Сети, был создан кем-то другим — не вами, - со своим пониманием того, как должно быть устроено и как должно работать веб-приложение. И одна из главных причин того, почему фреймворки так перегружены: они разработаны с учетом нужд каждого разработчика.

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

Теперь пора перейти к герою сегодняшнего обзора, ну а вы время от времени подумывайте над тем, что было сказано выше. :)

52 Framework

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

Так скоро?

HTML5 и СSS3 — все еще новые технологии, так не рано ли выпускать для них фреймворк? Нет, не рано. Поддержка этих технологий становится все шире и шире и сопровождается большим количеством разработчиков.

Разговор о том, пришло ли то время, когда можно в полном объем использовать HTML5 и CSS3, оставим на потом. В данный момент речь идет о том, что уже сейчас следует создавать системы (фреймворки), которые в ближайшем будущем помогут облегчить использование этих новых технологий. Никогда не наступит то время, когда веб-стандарты прекратят развиваться, тем самым создав благоприятный климат для разработчиков.

Загрузка

Как вы можете видеть, совокупный размер файлов фреймворка достаточно мал (если не брать в расчет PSD-файл, который вообще можно удалить), что не может не радовать.Весь фреймворк состоит из трех CSS-фалов, двух HTML-файлов, одного JS-файла, двух PSD-файлов и одного JPG-файла. Рассмотрим роль каждого из этих фалов.

Демонстрация

Откройте файл index.html — это сердце фреймворка.

Фреймворк настраивает все наиболее часто используемые элементы. Тэги заголовков (h1, h2 и h3) стилизованны в соответствии с книгопечатной типографикой, элементы форм готовы к использованию и имеют симпотичную кнопку подтверждения. Также существует метод отображения исходного кода и дополнительные стили для множества элементов.

Код

Проанализируем исходный код файла index.html.

DOCTYPE

Первое, что должно быть в каждом уважающем себя html-файле, — это строка с описанием DOCTYPE. В HTML5 эта строка выглядит просто и элегантно:

<!DOCTYPE html>

Эта обязательная строка, которая помогает браузерам правильно интерпретировать ваш код.

JavaScript

Следующая строка, на которую стоит обратить внимание — это строка в которой происходит подключение внешнего скриптового файла:

Этот JS-файл нужен для того, чтобы обеспечить поддержку новых элементов HTML5 в старых браузерах.

Семантика

Теперь обратим внимание на то, как построена сама HTML-страница. Фреймворк использует новую семантическую разметку — очень простую и чрезвычайно удобную, легкую для понимания. Ниже представлена общая структура страницы:

Число новых элементов достаточно велико. Страница разделена на заголовок (header), навигационную панель (nav), сайд-бар (aside), секции (section), статьи (article), исходный код (code) и подвал (footer).

Использование 52 Framework поможет вам быстро создавать страницы на качественно новом уровне.

Сброс стилей и модульная сетка

Фреймворк включает в себя три CSS-файла: general.css, grid.css и reset.css. reset.css является модифицированной версией сброса стилей от Эрика Мейера (Eric Meyer). Эта версия была создана Ричардом Кларком (Richard Clark).

Каждый уважающий себя HTML/CSS-фреймворк должен обладать модульной сеткой. Наш герой тоже может ей похвастаться:

Сетка самая обычная, состоящая из 16 колонок (960 grid system). Доступны колонки шириной от 40 до 940 пикселей с границами в 10 пикселей по обеим сторонам.

.col_1 {width:40px;}
.col_2 {width:100px;}
.col_3 {width:160px;}
.col_4 {width:220px;}
.col_5 {width:280px;}
.col_6 {width:340px;}
.col_7 {width:400px;}
.col_8 {width:460px;}
.col_9 {width:520px;}
.col_10 {width:580px;}
.col_11 {width:640px;}
.col_12 {width:700px;}
.col_13 {width:760px;}
.col_14 {width:820px;}
.col_15 {width:880px;}
.col_16 {width:940px;}

Основной CSS-файл

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

Интересной особенностью является то, что вы можете самостоятельно выбрать цвет, которым будет подсвечиваться выделенный вами текст:

::selection {
background: #525252; /* Safari */
}
::-moz-selection {
background: #525252; /* Firefox */
color:#fff;
}

В этом файле можно найти стили для полей с скругленными уголками:

{ -moz-border-radius: 4px;
-webkit-border-radius: 4px;
border-radius: 4px;
}

Наконец, в CSS-коде, который содержится в HTML-файле, вы можете найти стили, которые обеспечивают поддержку теней:

header .logo {
font-size:2.5em;
height:52px;
padding-top:28px;
font-weight:700;
text-shadow:1px 1px 2px #000;
color:#fff;
filter: Shadow(Color=#666666, Direction=135, Strength=3);}

Дальше — больше

Как было сказано выше, 52 Framework все еще находится на ранних стадиях разработки, но продолжает расти и улучшаться. Например, в новой бета-версии разработчики добавили поддержку элементов canvas и video.

В будущем хотелось бы видеть стили, отвечающие, скажем, за тени и скругленные уголки, вынесенными в отдельные классы.

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

jQuery и Google Maps API №4: Скользящая карта

noreply@blogger.com (LordOtU) — Fri, 16 Jul 2010 13:50:30 PDT

jQuery и Google Maps API №4: Скользящая карта

Google Maps API как-то неожиданно добрался до третьей версии, что не может не радовать. Я считаю, что одним из главных преимуществ новой версии АПИ стала возможность работать с картами без получения специального ключа.

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

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

Итак, попробуем немного поиграться с идеей, подсмотренной вот тут: http://hitotoki.org/places/japan/tokyo/.

Так как на дворе уже 2010 год, то в качестве инструментария будем использовать немножко CSS3, немножко — HTML5 и множко — jQuery. Суть дальнейшего действа проста до безобразия.

Для начала мы создадим неупорядоченный список из объектов, которые будут помечаться маркерами на карте. Каждый элемент этого списка будет содержать специальный HTML5-атрибут data, в котором будут храниться координаты этого объекта. Также, каждый элемент этого списка будет содержать краткую и полную информацию об объекте. Пример одного объекта из списка:

<li data-geo-lat="45.039131" data-geo-long="41.98214">
<h3>г. Ставрополь</h3>
<p>Населенный пункт</p>
<p class="longdesc"><strong>Об объекте:</strong> Ставрополь расположился на холмах и распадках в центральной части Предкавказья на Ставропольской возвышенности, в верховьях реки Ташла (бассейн Восточного Маныча), в 1450 км к югу от Москвы, на пересечении автодорог Ростов-Ставрополь и Астрахань-Невинномысск. Крайние высотные отметки — от 230 до 660 м над уровнем моря.</p>
</li>

Когда пользователь помещает указатель мыши на какой-нибудь объект из данного списка, то мы применяем к этому объекту класс hover для выделения, «передвигаем» центр карты к выделенному объекту и отмечаем объект маркером. Также, мы выделяем область с более детальной информацией.

А вот тут лежит пример.