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

Конференция нацелена на профессиональных веб-разработчиков и тех, кто мечтает ими стать. Она объединяет ВСЕ самые распространенные языки, при этом каждому выделен свой поток(зал).

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

Подробнее о конференции

Школа веб-технологий организовывает делегацию участников конференции из Латвии. На DevConf в Москву поедет наш преподаватель Арвид. По всем вопросам обращайтесь через контактную форму. Поможем с билетами и визами.

Картинки против CSS

Когда можно обойтись инструкцией CSS — это самый лучший вариант. Достаточно написать border-radius: 5px и получим закругленные уголки с радиусом 5 пикселей. Но эта инструкция доступна только в браузерах поддерживающих CSS3.

Еще раньше были созданны собственные свойства у браузеров Mozilla Firefox 2 (-moz-border-radius) и Safari 3 (-webkit-border-radius) с аналогичным действием. Еще были слухи о мистическом -khtml-border-radius для Konqueror, но говорят, что это не работает. Корректно поддерживал закругленные уголки только Safari, когда как в Мозиле эти уголки выглядят ужасно — пиксельные, без сглаживания, они могли быть использованы только если цвета не слишком контрастные.

В Firefox 3 была реализована более правильная поддержка таких уголков. Они стали красивые, сглаженные.

Опера и IE никогда и не пытались это реализовать. О них и о некрасивых уголках в FF2 и пойдет речь в этом посте.

Opera и SVG

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

В отдельный файл (например bg.svg) пишем SVG-код и сохраняем. Это обычный текстовой файл, только с раcширением svg. В CSS для нужного нам блока прописываем фон:

.block {
   background: url(bg.svg);
}

Чтобы это были именно закругленные уголки, нужно в SVG-файле написать что-то вроде такого:

<svg xmlns="http://www.w3.org/2000/svg">
<rect stroke="#000" fill="#DDD" stroke-width="4" width="100%" height="100%" rx="15" ry="15" />
</svg>

Атрибуты тэга rect меняйте как вам нужно.

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

Firefox 2

Пиксели, пиксели, пиксели… Они повсюду, они атакуют… Они напоминают времена DOS-овских игр…

Исправить можно. Опять же через SVG. Но поскольку FF2 не поддерживает SVG в качестве фона, то придется хитрить и добавить пару лишних блоков, один из которых будет являться внедренным объектом, а в другой будет помещено нужное нам содержимое. Таким образом object будет играть роль подложки.

Добавим позиционирование.

/* внешний блок */
.block {
position: relative;
}

/* объект */
.block > object {
position: absolute;
top: 0; left: 0;
width: 100%;
height: 100%;
}

В результате .content будет наложен на object.

Осталось придумать как это показать только FF2 и скрыть от других браузеров. В вашем распоряжении наверное только хаки.

IE

Много пелось диферамбов языку VML. Сколько статей о том, на сколько он лучше SVG. А в нашем случае все в основном предлагают использовать код такого плана:

Content of the block

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

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

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

Defines the rounded corners of a rounded rectangle as a percentage of half the smaller dimension of the length and width of a rectangle. 0% would have square corners, and 100% would form circular corners. A square with an ArcSize value of 1.0 would be a circle. The default value is 0.2 (20%).

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

А теперь внимание вопрос: с какого укура нужно было быть, чтобы такое придумать?

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

Решение

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

Тупое, но все-таки решение.

И на сладкое

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

Я попробовал все выровнять, но использовал очень много хакков, и проверял в браузерах FF2, FF3, Safari 3, IE 6, IE 7, Opera 9.5. Не знаю в каких условиях, но где-то обязательно даст сбой. Так что, мой материал несет учебно-ознакомительный характер, а не руководство к использованию.

Пример закругленных уголков без использования картинок

Зацепило

О Silverlight 1.0 говорить нечего. Тот же Flash, только элементы в приложении описаны с помощью XAML, что позволяет индексировать содержимое, и не имеет своего скрипта, а использует JavaScript. Зная, как IE обрабатывает JS можем предположить, на сколько может быть популярной эта версия.

Логично, что MS не стали оптимизировать обработку JS в своём браузере, а пошли другим путём. А точнее…

Silverlight 1.1

Эта версия может иметь программную составляющую написанную на любом .NET или web-языке (С#, Visual Basic, PHP, Ruby и др.). Т.е. получив доступ к элементам в приложении через описание XAML, можно забыть про JavaScript и писать на своём любимом языке. Потом это каким-то образом экспортируется в свой формат исполняемый маленьким фреймворком установленным на компьютере пользователя вместе с Silverlight-плагином для браузера. Я не буду вдаваться в подробности, о том как это всё работает, меня это не интересует.

Лектор озвучил плюсы:

• Очень маленький размер файла плагина
• Быстрая обработка видео
• Быстрая обработка скрипта

Я не буду искать опровержений или подтверждений данным высказываниям. Скажу лишь, что для создания аналоговых часов, лектор скопировал около 200 строчек C# кода, и ещё около 100 XAML кода. Многовато что-то…

XML based structure

Так, всё-таки что же меня зацепило? А сам принцип. С принципом описания структуры элементов в XML языке и управления им через скрипт я столкнулся в TYPO3 в плагине TemplaVoila!. Плагин позволяет взять HTML шаблон, отметить на нём «горячие» тэги, дать им соответствующие уникальные имена для того, чтобы можно было ими управлять (помещать контент, настраивать внешний вид) в TypoScript.

К примеру:

• Отметим на сайте какой-то тэг, например <div id=”sidebar”>…</div>.
• Дадим ему уникальное имя: lib.sidebar (lib —глобальный объект содержащий внутренние объекты на странице).
• В XML структуре запишется (причём самому ничего не надо писать):

  
  	
  
  		Just place some content in sidebar
  		
  			[ ### Sidebar goes here ### ]
  		
  		TypoScriptObject
  		div:inner
  		lib.sidebar
  	
  

• А в TypoScript можем описать, какого типа это будет объект и что же он должен содержать:
  lib.sidebar = TEXT
lib.sidebar .value = Hello, world!

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

Многообещавшая, но не оправдавшая себя презентация Web 3.0. Идеи и перспективы весьма туманны. Вернее идей не было. Были озвучены уже многим известные способы представления информации в виде объектов с мета-данными, вместо простого текста.

Если порыться в Гугле, на запрос «Web 3.0» можно найти множество статей, посвящённых этой теме, где новую версию Вэба представляют порой даже в слишком фантастическом виде. Короткий обзор по будущему Web 3.0 так же можно прочитать в Википедии.

Что самое странное, лектор ограничился только одним свойством Web 3.0, остальное забраковав или просто не искал расширеную информацию. Тем самым он дискредитировал себя в глазах пришедших прикоснуться к будущему. Критика полилась со всех сторон и автор не слишком уверено парировал нападения комментирующих.

Слишком длинное вступление, включавшее объяснение термина Web 1.0 и Web 2.0, отличия, плюсы-минусы, заставило слушателей начинать скучать и к 10 минуте нетерпеливая публика стала настойчиво требовать поскорей переходить к главной теме. Появился слайд с надписью «Web 3.0» с вопросом на фоне, что вызвало облегчённый вздох актового зала.

За пару минут мы получили весьма скомканое объяснение относительно нового подхода использования форматов URI, онтологии и формата RDF (Resource Description Framework), который в сущности является эволюционным этапом развития XML (RSS) и сопутствующих форматов.

это разработанная консорциумом W3C модель для описания ресурсов, в особенности — метаданных о ресурсах. В основе этой модели лежит идея об использовании специального вида утверждений, высказываемых о ресурсе. Каждое утверждение имеет вид «субъект — предикат — объект» и в терминологии RDF называется триплетом. Например, утверждение «Небо голубого цвета» в RDF-терминологии можно представить следующим образом: субъект — «небо», предикат — «имеет цвет», объект — «голубой». Для идентификации субъектов, предикатов и объектов в RDF используются URI (англ. Uniform Resource Identifier). Одной из главных целей RDF является предоставление утверждений одинаково в машинно- и человеко-распознаваемом виде.

Wikipedia.org

RDF, в совокупности с URI и формализацией (онтологией) объектов, получаем концептуальную модель семантического Web’а, в котором весь контент, кроме цифро-буквенного содержания, имеет структурированое описание, по которому поисковые движки будут способны ориентироваться при выдаче релевантного результата запроса. Поисковые машины практически будут «думать», прежде чем выдавать результат запроса, и понимать контент который они индексируют.

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

И это всё?

Люди, пришедшие в зал для знакомства с будущим, остались не довольны пафосностью заголовка и практически нулевым оправданием оного. Ведь, так называемый Web 3.0 – это не только глобальная семантизация Web’a, но и превращение его в децентрализованую базу данных, выход контента за рамки Web-браузеров в настольные приложения, Геопространственный Web и 3D-технологии интернет-серфинга, мобильные технологии и ещё неизвестное количество идей и перспективных проектов.

Тема полностью не раскрыта. Фтопку!

Так получилось, что буквально за несколько дней я увидел столько всего нового, что меня это начинает удивлять, когда они успевают всё это делать?

Zink

Zero INK (ноль чернил). Технология нового способа печати цифровых фотографий изобретённая и запатентованная компанией ZINK Imaging. Этот способ не требует никаких сложных полиграфических устройств с картриджами с чернилами.

Секрет заключается в специальной бумаге состоящей из особого композитного материала с вживлёнными кристаллами красителя и внешним защитным полимерным слоем. Перед печатью материал выглядит как обычная фотобумага, а кристаллы – бесцветны. ZINK™ принтер нагревая кристаллы активирует и преобразует их для получения нужных цветов. Защитный слой предохраняет фотографии от влияния солнечных лучей и обеспечивает вашим фотографиям наибольшую долговечность.

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

Подозреваю что для компьютеров могут появиться девайсы на основе ZINK. Представьте себе: у вас устройство на подобие CD-ROM’a из которого можно получить распечатанную фотографию.

Photosynth

Это программа созданная на основе Microsoft Seadragon, олицетворяющее собой многомерное пространство для просмотра цифрового контента с использованием высококачественного приближения объектов. По ссылке видеопрезентация программы. Photosynth радикально меняет наше представление о просмотре цифровых фотографий.

Но самое главное – в конце презентации, посмотрите какое инновационное решение предлагает Photosynth! У вас несколько фотографий Собора Парижской Богоматери (Notre Dame de Paris) или ландшафтные панарамные фотографии из которых программа организует такой просмотр, который я даже объяснить не могу. Просто посмотрите.

Perceptive Pixel

И ещё одно видео демонстрирующее возможности тактильного интерфейса. Реализация почти такая же как у Microsoft Surface, только с демонстрацией вертикального экрана и наиболее широкими возможностями.

Мне даже пальцы захотелось поразмять на таком экране.

Узнал обо всём этом из журнала Designcollector

Subversion

Столкнулся я с этой системой буквально пару дней назад. Зарегистрировался на Wordpress.org и стал контребьютором (^_^) своего плагина NS Recent Plugins. Теперь мой плагин можно скачать с официального репозитория плагинов для Wordpress.

Subversion — свободно распространяемая система управления версиями с открытым кодом. Subversion разработана специально для замены CVS, самой распространённой открытой системы управления версиями. Она обладает всеми основными функциями CVS (хотя некоторые из них выполняет другими способами) и лишена ряда её недостатков.

via Wikipedia

Разобраться было бы не сложно, но я так понимаю, команда Wordpress не любит Виндоузятников или просто думают, что все нормальные программисты работают на Unix-based системах. Помогла Википедия. Прочитав что такое svn и subversion, загрузив пару программ-клиентов для работы с репозиторием, я разобрался в использовании и наконец-таки влез в свой аккаунт на svn.wp-plugins.org

Smart SVN

На windows платформе я поставил програмку Smart SVN, которая оказалась портированной из под Linux – интерфейс как у KDE приложений. Мало того, что триальная, так ещё куча лишних настроек и новых непонятных терминов. В письме от WPшников мне обещали закрыть хостинг-аккаунт если я не воспользуюсь им в течение часа. Так что времени особо не было, пришлось пользовать, то что успел найти.

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

Пришёл на работу и обнаружил, что в репозитории информация о плагине отображается как-то лево. Тогда я понял что информация о плагине черпается из readme файла. А ведь надо было сначала инструкцию прочитать. Как говориться “Инструкцию читают либо когда нечего читать, либо когда уже всё сломалось”. Но за что я люблю эру компьютеров и связанные с ней технологии, так это за то, что всё можно исправить (если уметь). Никогда ничего не выбрасывается. ))

KDEsvn

Поскольку лень было искать Windows клиент для работы с Subversion, проще было найти клиент под Unix. Переключился на старенький комп с PC-BSD и полез в Википедию. Там я без удивления узнал, что существует GUI клиент под KDE – KDEsvn. Но качать я его не стал. Поставил из портов. Но сначала нужно апгрейднуть neon (если он конечно установлен).

Короче, вот что понадобилось сделать:


$ cd /usr/ports/www/neon
$ make install FORCE_PKG_REGISTER=1
$ make clean distclean


$ cd /usr/ports/devel/kdesvn
$ make
$ make install
$ make clean distclean


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

Достаточно компактна и по внешнему виду и по количеству пунктов меню. Не то, что Smart SVN. Достаточно простое подключение к репозиторию. Естественно пароли хранятся в KDE Wallet.

WP-plugins readme.txt

Есть оказывается особенности синтаксиса readme файла для Wordpress плагинов. И когда я их соблёл, то всё встало на свои места и отобразилось нужным образом. Вот пример readme файла.. В нём написано как правильно нужно оформлять этот документ. А от меня вам справочник по форматирования readme.txt

Справочник по форматированию readme файла для Wordpress плагинов


=== My Wordpress Plugin === - Название плагина. Пишется в самом начале, на первой строке.
Contributors: markjaquith, mdawaffe - распрастранители плагина в репозитории. Пишется имя пользователя зарегистрированного на wordpress.org
Donate link: http://example.com/ - ссылка для пожертвований автору плагина.
Tags: comments, spam - Тэги связанные по теме плагина
Requires at least: 2.0.2 - Минимальная версия Wordpress на которой работает плагин.
Tested up to: 2.1 - До какой версии был тестирован.
Stable tag: 4.3 - стабильная версия плагина. Разные версии можно выкладывать в папку tags своего репозитория. Не путайте с тэгами - ключевыми словами.

Короткое описание. Будет отображаться под названием плагина в списке плагинов. Просто текст. Без форматирования. До 150 знаков.

== Description == - меню описания.

Описание плагина, будет отображаться в меню Description. Поддерживается форматирование. Если этого текста нет, то берётся текст из короткого описания.

В тексте можно использовать маркированый список:

* Должен начинаться со знака звёздочки.
* В начале и в конце списка должна быть пустая строка.
* Чтобы привести пример кода нужно код заключить в `косые кавычки`.
* Текст в любом месте, кроме как в коде, можно сделать **жирным**.
* Или *наклонным*.

Также можно использовать и нумерованный список

1. Каждый пункт меню начинается с цифры 1 с точкой
1. Никаких "1. 2. 3."
1. Только "1. 1. 1"
1. Тоже должны быть пустые строки перед списком и после списка.

> Перед цитатой пишется "знак больше". Как здесь.

== Installation == - меню установки

Описание установки. Поддерживается форматирование описанное выше.

== Frequently Asked Questions == - меню часто задаваемых вопросов.

= Вопрос? =

Ответ

= Ещё вопрос? =

Ещё ответ

== Screenshots == - Меню скриншотов

1. Здесь ссылки на скриншоты не пишутся. Берётся номер который написан в начале строки и подцепляется картинка screenshot-1.(png|jpg|jpeg|gif) лежащая в папке со стабильной версией (например /tags/2.0/screenshot-1.jpg или trunk/screenshot-1.jpg если стабильная версия не указана). Здесь пишется только описание к скриншоту.
2. Здесь идёт описание к screenshot-2.(png|jpg|jpeg|gif). Формат картинки один из указанных. Репозиторий сам подберёт расширение.

== Other Notes == - Любой другой заголовок автоматически записывается под пунктом меню Other Notes.

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

== Big Header == - большой заголовок в меню Other Notes

Кстати, можно использовать форматирование для ссылок [Заголовок ссылки](http://adress.ssilki.com/ "Текст для атрибута title") или такое форматирование. Текст для атрибута title естественно не обязателен.

= Small Header = - заголовок поменьше. Тоже отправляется в меню Other Notes

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