Рядом с Live View появилась новая кнопочка – CSS Inspect. Это такая функция, которая помогает визуально понять, где какие проблемы в CSS. В основном это связано с параметрами width/height, padding и margin. После запуска функции блоки начинают подсвечиваться при наведении на них курсора, как, например, это сделано в Opera DragonFly или FireBug. Разными цветами подсвечиваются внешний и внутренний отступы, так и высота, и ширина блока. Нажав на блок, мы можем отредактировать свойства CSS-селектора и сразу же увидеть изменения.

Site Setup

Более удобное окно настроек сайта. На первой странице только лишь название сайта и его папка. Всё остальное убрано во вкладку Advanced settings.

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

CSS Enable

Удобная и приятная функция, которая позволяет одним кликом включить или отключить (закомментировать) какое-либо свойство класса.

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

Live View Navigation

Теперь стало возможным при использовании функции Live View перемещаться по страницам сайта. Например, исправили мы класс какой, смотрим страницу и радуемся, переходим по ссылке, а там этот класс уже не так красиво смотрится, ибо иные реалии уже :)

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

Adobe BrowserLab

То, что все так ждали и хотели видеть. То, что уже давно реализовано в Microsoft Expression Web 3 Super Preview. Теперь, помимо живого просмотра страницы через Live View на вебките, появляется возможность посмотреть на то как сайт будет смотреться в других популярных браузерах (правда, почему-то, забыли про Оперу, как всегда), а именно – Chrome 3, FF2+, IE6+ и Safari 3+.

Не без ложки дёгтя, конечно. 1) Функционал в аналоге от Microsoft приятней, хоть и доступен там только IE и FF, впрочем как и удобство использования (на первый взгляд); 2) Эта функция реализована как плагин на Adobe AIR и работает через сервер Adobe Labs. Само собой каждый раз при использовании функции происходит загрузка страниц и много всяких лишних действий, ну и, разумеется – 3) Для тех пользователей, которые не платили за использование DW, эта функция будет недоступна.

PHP Hinting

Теперь при написании PHP-кода DW будет его понимать. Т.е. создав функцию или написав переменную DW, как любой уважающий себя IDE, будет подсказывать не только html-теги и css-свойства. Причём DW стал настолько умён, что подтягивать переменные и функции он будет даже из php-файлов привязанных к странице функцией require.

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

Code Hinting

Добавляет к функционалу PHP Hinting функции и полуглобальные переменные популярных фрэймворков, например, стандартно в DW CS5 вшиты функции Drupal, Joomla и WordPress (нужное выбрать во время редактирования). Включена возможность дать сжевать DW любой другой CMF и тогда DW научится понимать и его сленг.

Фильтр связанных файлов

Под открытыми вкладками в DW обычно располагается список файлов связанных с открытым во вкладке (style.css, jquery.js, custom.js, ну и всякое такое) документом.

Чем суровей наша страница, чем больше мы используем сценариев, визуальных эффектов и прочего, тем больше у нас становится связанных файлов. А когда файлов становится больше, чем может поместиться в экране, появляется противная и неудобная стрелка. В компании Adobe очень изящно решили эту задачу – добавили фильтр, указав в котором маску файлов, будут фильтроваться все неподходящие под эту маску файлы. Стандартно присутствуют три маски – *.html, *.js, *.css.

Widget Browser

Как и раньше, для меня остаётся загадкой вопрос – почему Adobe придумала свою собственную Spry, вместо того, чтобы использовать, практически ставшую стандартом, jQuery? Хотя с другой стороны, конечно, они давно уже этим занялись и негоже отступать. Adobe ведь. Ну да пофиг.

Компания Adobe написала целую кучу разных виджетов на своём этом Spry и пустила их в свободный доступ на Adobe Live Labs. Идея вообще очень интересная. С помощью этой функции можно загрузить любой из этих виджетов прямо в DW и встроить в свою страницу. Причём каждый виджет можно полностью настроить под нужды страницы, и даже сохранять настройки как пресеты. Т.е. достаточно сложнй скрипт установится полностью сам и ни разу не придётся лезть в код.

Минус тут, опять же, в том, что функция работает как аддон на Adobe AIR и работает через сервера Adobe, т.е. 1) это невозможность использования на бесплатных версиях; 2) no internet – no work.

Больше ничего серьёзного не наблюдается. Как думаете, стоит такое обновление $199?

CSS Naked Day был учреждён в 2006м году Дастином Диазом, дабы продвигать и популяризировать веб-стандарты. Отключая CSS показать всему миру, что сайт сделан с учётом всех стандартов, обладает семантической вёрсткой и хорошей структурой.

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

Однажды, я прочитал несколько книг по веб-стандартам и немного спецификации xhtml, после чего, само собой, код стал весьма и весьма валиден. В каждом конкретном случае хотелось, чтобы этот факт подтверждал и тот самый валидатор, даже не смотря на то, что многие, как и у нас, так и на западе называют его «всего-лишь скриптом». Разумеется столкнулся я с рядом проблем возникающих от чужого кода (со своим, благо, справился без проблем), одной из главных стала валидация кода счётчика LiveInternet при доктайпе xhtml1.0 transitional. Сначала я пытался отловить проблемы в коде и создать универсальный и валидный код. Из этого ничего не вышло. Однако решение подсказал сам LiveInternet.

При кастомизации кода счётчика необходимо выбрать пункт «отдельный код для логотипа и для счётчика», а на сайт просто вставляем их друг за другом, или вообще в разных местах. И валидатор счастлив.

Вот он, валидный код счётчика LiveInternet на все времена:

<!--LiveInternet counter-->
<script type="text/javascript">new Image().src = "http://counter.yadro.ru/hit?r" + escape(document.referrer) + ((typeof(screen)=="undefined")?"" : ";s"+screen.width+"*"+screen.height+"*" + (screen.colorDepth?screen.colorDepth:screen.pixelDepth)) + ";u"+escape(document.URL) + ";h"+escape(document.title.substring(0,80)) + ";" +Math.random();</script>
<!--/LiveInternet-->

<!--LiveInternet logo-->
<a href="http://www.liveinternet.ru/click" target="_blank">
<img src="http://counter.yadro.ru/logo?38.2" border="0" width="31" height="31" alt="" title="LiveInternet"/>
</a>
<!--/LiveInternet-->

Всех с началом новой недели!

Решил для простоты написать этот не мудрёный процесс сюда, чтобы и люди находили и мне далеко за этми идти не надо было.

Для настройки ЧПУ на сайте с CMS Made Simple необходимо:

1. В файле config.php найти блок #URL Settings и установить настройки как здесь:

#------------
#URL Settings
#------------
#What type of URL rewriting should we be using for pretty URLs?  Valid options are:
#'none', 'internal', and 'mod_rewrite'.  'internal' will not work with IIS some CGI
#configurations. 'mod_rewrite' requires proper apache configuration, a valid
#.htaccess file and most likely {metadata} in your page templates.  For more
#information, see:
#http://wiki.cmsmadesimple.org/index.php/FAQ/Installation/Pretty_URLs#Pretty_URL.27s
$config['url_rewriting'] = 'mod_rewrite';

#Extension to use if you're using mod_rewrite for pretty URLs.
$config['page_extension'] = '/';

#If you're using the internal pretty url mechanism or mod_rewrite, would you like to
#show urls in their hierarchy?  (ex. http://www.mysite.com/parent/parent/childpage)
$config['use_hierarchy'] = true;

#If using none of the above options, what should we be using for the query string
#variable?  (ex. http://www.mysite.com/index.php?page=somecontent)
$config['query_var'] = 'page';

2. В корне сайта создаём файл .htaccess и записываем в него следующее:

RewriteEngine on# 301 Redirect all requests that don't contain a dot or trailing slash to
# include a trailing slash
RewriteCond %{REQUEST_URI} !/$
RewriteCond %{REQUEST_URI} !\.
RewriteRule ^(.*) %{REQUEST_URI}/ [R=301,L]

# Rewrites urls in the form of /parent/child/
# but only rewrites if the requested URL is not a file or directory
RewriteCond %{REQUEST_FILENAME} !-f
RewriteCond %{REQUEST_FILENAME} !-d
RewriteRule ^(.+)$ index.php?page=$1 [QSA]

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

2. Повтор

Визуальные элементы дизайна (цвета, фигуры, текстуры, пространственные пропорции, толщина линий, концептуальные решения) должны повторяться. Это структурирует работу и усиливает её стилистическую целостность.

3. Выравнивание

Ни один элемент страницы не должен занимать случайное место. Каждый элемент нуждается в визуальной связи с соседними. Благодаря этому страница выглядит ясно, утонченно и свежо.

4. Приближенность

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

© Робин Вильямс «Дизайн для НЕдизайнеров»

1. И так нам необходим архив с файлами Zend Optimizer. Скачать (2.3 мб).

2. Первым делом распакуем архив.

3. Распакованные файлы переносим в папку %denwer%/usr/local/php5

4. Далее открываем файл php.ini находящийся в этой же папке и добавляем в самый конец следующий код:

[Zend]
zend_extension_ts = "/usr/local/php5/ZendExtensionManager.dll"
zend_extension_manager.optimizer_ts="/usr/local/php5/Optimizer-3.3.0/"
zend_optimizer.enable_loader = 1
zend_optimizer.optimization_level = 15

Сохраняем документ и запускаем/перезапускаем Denwer.

Enjoy!

Browser Compatibility

Window → Results → Browser Compatibility

Как легко понять из названия эта функция проверяет код на поддержку различными браузерами и подсказывает как себя будут вести различные браузеры с текущим кодом. Функция заточена под все нужные браузеры и даже под Internet Explorer for Macintosh, хотя я, лично, никогда и не стремился верстать с поддержкой этого браузера. Однако даже с последними апдейтами функция не владеет информацией о FF 3.5, IE8 (только 8.0b1), Opera 10 (и даже 9.5), Safari 4, что, впрочем, не беда. Самое главное — исчерпывающая информация о IE6.

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

Validation

Window → Results → Validation

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

Однако замечены мною и случаи, когда мнения валидатора Dreamweaver и валидатора w3c расходились, например так у меня было с счётчиком liveinternet, в котором валидатор w3c при доктайпе xhtml 1.0 transitional находил кучу ошибок, в то время как Dreamweaver радовался хорошему коду.

Помимо классических стандартов HTML и XHTML этот валидатор также проверяет документ по множеству других стандартов и технологий, большинство из которых я никогда и не использовал, так что рассказать про них ничего не могу, к ним относятся ColdFusion (Basic, 3.0-MX 7), Internet Explorer Extensions, Netscape Navigator Extensions, SMIL 1.0, WML и JavaServer Page Tags.

Enjoy! :)

Кнопки Live View и Live Code на панели задач

Решил я поискать вкусностей для любимого инструмента и первая же найденая вкусность оказалась невероятно удобной и полезной, имя ей — Live View. Она позволяет посмотреть как сайт выглядит в браузере прямо в окне редактирования.

В Dreamweaver CS4 вшит WebKit, что, надо сказать, существенно сокращает время отладки макета. Функция запускает все динамические элементы страницы реализованые с помощью CSS, Flash и JavaScript (включая фрэймворки вроде jQuery, MooTools, Prototype и т.п.). Кстати для JavaScript присутствует ещё и функция Live Code – она позволяет в реальном времени просматривать изменение страницы, подобно FireBug и DragonFly.

P.S. Недавно думал попробывать сделать макет с нуля и до конца в Microsoft Expression Web 2, и вот именно отсутствие альтернативы функции Live View не дало мне завершить начатое :)

P.P.S. Видео с сайта Adobe.