No public Twitter messages.


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

Новое в Dreamweaver CS5

Dreamweaver CS5CSS Inspect

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

Site Setup

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

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

CSS Enable

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

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

Live View Navigation

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

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

Adobe BrowserLabAdobe 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, эта функция будет недоступна.

функция Dreamweaver CS5 - PHP HintingPHP Hinting

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

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

DW CS5 Site-specific code hintingCode 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?

теги: , ,

1 комментарий.


23 июля 2009 // Веб-разработка

Validation и Browser Compatibility в Dreamweaver CS4

Сегодня хочу познакомить вас с двумя вкусностями Dreamweaver, которые использую постоянно, это Validation и Browser Compatibility. Если честно не знаю были ли эти функции в предыдущих версиях Dreamweaer, но наткнулся я на них уже в CS4.

Browser Compatibility

Window → Results → Browser Compatibility

Dreamweaver 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 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! :)

теги: , , , ,

1 комментарий.


21 июля 2009 // Веб-разработка

Функция Live View в Dreamweaver CS4

Я думаю большинство из вас для вёрстки сайтов использует Dreamweaver, ясное дело. Я тоже. Когда-то начинал со второй версии этой замечательной штуки, тогда она ещё принадлежала Macromedia. Долго я использовал вторую, потом переполз на 4, но уже не помню чем не понравилась — стал использовать UltraDev, он, кажется, был старее, но мне нравился больше. Тогда я интересовался новыми фишечками и всякими вкусностями новых версий, а когда уже полностью освоился и стал просто верстать вкусности как-то само собой ушли на второй план. И версии стал менять как тапочки, 8.0, CS3, ну и, затем, CS4.

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

Кнопки 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.

теги: , , , ,

комментарии отключены.



  • twitter
  • rss
  • хабр
  • жежека
  • ластфм