Главная страница

Технические детали:

• Графика:
• Верстка:
• Фрэймворки:
• Технологии:
• CMS:

Главная страница

Технические детали:

• Графика:
• Верстка:
• Фрэймворки:
• CMS:

Делать сайт было приятно, ещё больше порадовала восторженная реакция заказчиков.

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

Вам поставили локальную задачу в рамках проекта. Алгоритм решения:

1. Понять для чего проект и каким целям служит. Если не понятно, спросить.
2. Узнать все, что требуется для того чтоб ваша задача считалась завершенной.
3. После того как задача понятна, следует расписать ее на мелкие подзадачи, т.е. составить план (разумеется, записать его). Каждый пункт плана должен быть небольшим, чтоб с большой долей правды его можно было оценить по времени. Подробное планирование заставляет мозг обдумать способы решения и закрепить картину выполнения.
4. Сказать тому кто поставил задачу прогнозируемое время выполнения и прогнозируемую дату. В тоже время мозг получит ограничение по времени и в фоновом режиме начнет корректировать действия чтоб уложиться в срок.
5. Последовательно выполнить каждый пункт плана. По себе знаю, что с большой неохотой сажусь за выполнение непонятных мне задач, делаю их медленно. Если же проанализировать вначале задачу и сделать ее ясной — выполнение пойдет плавно и приятно.

Если у вас много разных задач, ведите туду лист (мне хватает текстовых файликов). В случае если у вас есть мелкие задачки, лучше их сделать быстро и сразу, чтоб освободить место в мозге.

Рядом с 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 показать всему миру, что сайт сделан с учётом всех стандартов, обладает семантической вёрсткой и хорошей структурой.

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

Часто приходится стоять на перепутье – скачать ломаную версию или выбрать бесплатную альтернативу. И каждый раз когда я выбираю второй вариант – это победа и я ей искренне радуюсь. Так было, например, при выборе ftp-клиента (сменил CuteFTP на FileZilla), офисного пакета (MS Office на OpenOffice).

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

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

MSDN Academic Alliance

По этой программе Microsoft подарил мне безвременные лицензии на профессиональные редакции Windows 7 и Visual Studio 2008. Помимо них по программе доступен просто необъятный список продуктов, включая

• Windows Server 2008 R2,
• Microsoft SQL Server 2008 (различных редакций),
• Visual Studio 2008 (различных редакций),
• Microsoft Robotics Developer Studio 2008 R2,
• Microsoft CCR and DSS Toolkit 2008 R2,
• XNA Game Studio 3,
• Microsoft Surface SDK,
• Access 2007,
• InfoPath 2007,
• OneNote 2007,
• Project 2007,
• Office SharePoint Server 2007

Да, MS Office тут не дают :)

Ищите у себя в ВУЗе объявления и спрашивайте у преподавателей что они знают об этой программе. Вся информация здесь.

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

Microsoft DreamSpark

Если честно, я сам не очень понимаю в чём эта программа отлична от msdnaa, однако здесь требуется только скан собственного студака (правда почему-то максимальный размер скана который можно им отправить – что-то в районе 50кбайт).

По этой программе можно получить тоже самое что и в msdnaa, однако помимо этого есть ещё и Expression Studio 3, Windows Embedded CE 6.0, Visual Studio 2010 Ultimate Beta 2, Microsoft Virtual PC и всяческие утилиты для разработки под Windows Phone.

Вся информация о программе здесь.

Однажды, я прочитал несколько книг по веб-стандартам и немного спецификации 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]

Испугался, полез в интернеты искать ответ. 3 человека вопрашают и никакого толку. Нещнал что делать. Взял его, потряс, он выключился. Вытащил аккум, вставил обратно – заработало. Хехе.

P.S. Теперь я знаю чем же так плохи процессоры фирмы Zoom – если с ними что-то случается найти решение в интернетах – сущий анрил, ибо натыкаешься на стопицот сообщений о том, насколько суровы обладателей сих девайсов и что им срочнейшим образом с этими девайсами сотворить необходимо. Хех.

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

2. Повтор

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

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

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

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

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

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