Начало путешествия 10 сентября 2010, окончание – пока не понятно. Примерный маршрут:Китай, Сингапур, Индонезия, Таиланд, Камбоджа.

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

1. Города и IT магазины (фото магазинов гаджетов в различных странах и описание цен и товаров).

2. SEO по азиатски (напроситься в гости в SEO студии и сравнить рабочие места IT специалистов разных стран)

3. Многоликий Google (фото и описание офисов гугл, правда внутрь не обещаю что смогу попасть но фасад точно смогу пофоткать)

Буду рада Вашим комментариям.

Надеюсь будет много впечатлений и фото!

Этот вопрос интересует многих начинающих дизайнеров. На помощь Вам может придти Divine – бесплатный плагин для Photoshop, который позволяет из файла *.psd сделать шаблон для WordPress.
Скачать можно с официального сайта: www.divine-project.com/download
Инструкция:
1. Запустите установочный файл Divine_setup.exe. В появившемся окне визарда жмите “Далее”:

Дальнейшая установка так же не отличается от стандартной (выбираете папку и завершаете установку)
2. После завершения установки откроется окно приветствия плагина Divine, из него можно начать работу с заготовленным шаблоном в формате psd.

3. Создание простого шаблона для CMS WordPress:
Откройте подготовленный Вами шаблон, через меню программы Photoshop. После того как шаблон загрузится запустите установленный плагин: “File > Automate > Divine”.

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

Далее нам необходимо назначить правила для основных элементов шаблона. Обычно это: Header(Шапка), Sidebar, Post(Основной контент), Footer (Подвал сайта). Для CMS WordPress возможно разбиение этой четвёрки на более мелкие составляющие, например, в Sidebar можно выделить:

• Form text field(Текстовое поле для Формы),
• Form “Submit” button (Кнопка формы),
• Sidebar caption (Заголовок сайдбара),
• Sidebar link (ссылка – обычно пункт меню),
• Sidebar text (текстовый блок).

Дополнительно к элементу Post выделяются:

• Post main title (Заголовок статьи),
• Post date (Дата публикации),
• Post Author (Ник или имя автора),
• Post text (Основной текст),
• Number of comments (количество комментариев),
• Comments link (Ссылка на комментарии),
• Read more (Читать далее),
• Comment response (Ответ на комментарий),
• Previous comments link (Ссылка на предыдущую страницу с комментариями),
• Next comments link (Ссылка на следуюущую страницу с комментариями),
• Comment author (Автор комментария),
• Comment date (Дата комментария),
• Comment text (Текст комментария)

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

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

Для публикации шаблона необходимо нажать “Publish” в панели меню.

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

Продолжаю серию статей посвящённых плагину для FireFox – FireBug. Сегодняшний пост посвящён работе с CSS.

Навигация по свойствам CSS.

Представим ситуацию, Вы задаёте цвет для ссылки зелёный, но он отображается как красный. Если бы не этот замечательный плагин, пришлось бы долго искать где переопределяется стиль для нашего элемента. Для обладателей FireBug найти проблемный элемент не составит труда.

1. Нажимаем кнопку “Анализировать” в левом верхнем меню либо контекстном.

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

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

4. Нажмите на элемент, его код выделиться голубым. Выделение будет держаться до тех пор, пока вы не нажмёте на другом элементе.

Правка свойств CSS.

Действия аналогичны правке во вкладке html.

Отдельно необходимо отметить возможность внесения изменений в отдельный файл CSS.

Правка размеров.

С размерами удобно работать на вкладке “Макет”. Вкладка отображает габариты и отступы выбранного элемента. Для этого необходимо:

1. Перейти в режим “Анализ” и навести курсор мыши на элемент с размерами которого мы желаем поработать.

2. Щёлкнуть на элементе, после этого при наведении курсора на поле макета, соответствующее поле будет подсвечиваться и на странице.

3. Для редактирования размера поля достаточно нажать на его числовом значении во вкладке “Макет”

Полезные приёмы плагина.

Предпросмотр цветов и изображений.

Если навести на строку кода, содержащую ссылку на изображение или цвет фона – во всплывающем окне отобразится миниатюра изображения или цвета.

Отключение и включение специфических правил CSS.

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

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

Установка шаблонов OpenCart

1. Скопировать папку с темой из архива в
/catalog/view/theme/
2. Скопировать картинку для админки (обычно находиться рядом с папкой)
/image/templates/
3. Активировать тему
Система -> Настройки -> Магазин

Топ бесплатных шаблонов

1 место я бы отдала дефолтному шаблону, но вряд ли Вы собираетесь его оставить (а зачем бы Вы ещё желали бесплатно скачать шаблоны OpenCart)

2 место – Electronics (оптимизирован для версии 1.4, ширина 980 px, в архиве есть psd исходник)

Демо версия: myecommercetemplates.com/opencart/OPC032/

3 место сofran.

4 место досталось Японии с шаблоном kanoko.

5 место заняла немного видоизменённая дефолтная тема со странным названием cc_carbon

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

FireBug – расширение для FireFox, одной из функций которого является работа с исходным кодом страницы.

Функции FireBug.

Конечно, возможностью посмотреть код страницы никого не удивить, все современные браузеры неплохо с этим справляются. Зачем же тогда делать специальный плагин? Конечно же для того чтоб реализовать в нём гораздо больший функционал. Рассмотрим полезную для вёрстки вкладку HTML.

Как видно из рисунка на ней присутствуют три поля. Первое – позволяет  отображать и изменять свойства и атрибуты тегов. Второе – отображает стиль выбранного элемента, а третье его DOM свойства.

Вкладка HTML в FireBug отображает больше информации о элементе, чем просто просмотр кода через браузер. Но это не единственное достоинство данного плагина! С помощью него можно  редактировать или удалять элементы и атрибуты “на лету”, при этом страница браузера немедленно обновляется, отображая изменения.

Изменим содержимое копирайта на сайте.

Для этого необходимо отредактировать соответствующее поле в firebug.

Однако, если посмотреть код страницы через браузер – в нём по прежнему старый копирайт.

FireBug позволяет легко экспериментировать с элементами, изменять их и сразу же видеть результат.

Как пользоваться FireBug.

Как изменить значение элемента на странице?

1. Откройте вкладку HTML, в ней отобразится код документа.
2. Раскрывая плюсы найдите элемент, который Вы желаете изменить. Для навигации по элементам можно использовать Tab (перемещает редактируемые области) и стрелки навигации на клавиатуре (смещает выделение элемента).
3. Нажмите левой кнопкой на изменяемом значении, весь элемент выделиться в отдельный блок. Изменяемое значение немедленно отобразится на странице.

Как добавить новый атрибут элементу? Например, я хочу добавить к заголовку h2: class=”author”

1. На элементе к которому вы хотите добавить атрибут нажать правой кнопкой, в моём примере это тэг h2.
2. В появившемся меню выбрать “Новый атрибут”.
3. Ввести название атрибута (у меня это class), нажать Tab и ввести его значение (у меня author).
4. При нажатии за пределами редактируемого поля, изменения применяться автоматически.

Для удаления элемента целиком, достаточно нажать на нём правой кнопкой мыши и в появившемся меню, выбрать “Удалить элемент”.

Как быстро найти элемент в коде страницы? Для этого необходимо использовать кнопку на панели “Анализировать”. После её нажатия любой элемент на который Вы наводите курсор автоматически ищется в коде.

Приведённые примеры удобны для небольших изменений, если же требуется изменить целый блок кода,  удобнее использовать режим “Редактирования”. Вызывается он несколькими способами: одноимённой кнопкой на панели или пунктом меню “Редактировать HTML”.

Логирование событий.

Для включения логирования событий происходящих с элементом достаточно нажать на нём правой кнопкой мыши и выбрать “Записывать события”. Будут зафиксированы события следующих типов:

• Фокус на элементе
• Смещение фокуса
• Движение мыши над элементом
• Движение мыши от элемента
• Движение мыши к элементу
• Выделение элемента
• Печать текста (для форм)

Лог доступен на вкладке “Консоль”.
Постовой: Разработка сайта

Данная статья является первой в цикле публикаций посвящённым плагину FireBug для FireFox, а так же его дополнений. Начну с расширения позволяющего проанализировать факторы влияющие на скорость загрузки страницы.

YSlow – описание инструмента.

YSlow – это расширение Firebug, которое оценивает страницу по различным характеристикам, а так же предлагает различные методы для улучшения. Расширение базируется на 22 правилах, которые влияют на производительность веб страницы в браузере. Правила отобраны из 34 предложенных, командой разработчиков компании Yahoo.

Приведу 22 правила на которых базируется YSlow в порядке уменьшения важности и эффективности:

1. Минимизировать HTTP запросы (Minimize HTTP Requests)
2. Использование CDN – не используется в России (Use a Content Delivery Network)
3. Использование Expires или Cache-Control в заголовке (Add an Expires or a Cache-Control Header)
4. Компоненты Gzip (Gzip Components)
5. Размещение таблицы стилей в начале документа (Put StyleSheets at the Top)
6. Размещение скриптов в конце документа (Put Scripts at the Bottom)
7. Отсутствие CSS Expressions (Avoid CSS Expressions)
8. Использование скриптов и таблиц стилей во внешних файлах (Make JavaScript and CSS External)
9. Сокращение DNS-запросов (Reduce DNS Lookups)
10. Уменьшенный JavaScript и CSS (Minify JavaScript and CSS)
11. Отсутствие редиректов (Avoid Redirects)
12. Удалены дублирующие скрипты (Remove Duplicate Scripts)
13. Сконфигурированы ETags (Configure ETags)
14. Ajax кэшируется (Make AJAX Cacheable)
15. Использование метода Get для AJAX запросов(Use GET for AJAX Requests)
16. Уменьшение количества DOM элементов (Reduce the Number of DOM Elements)
17. Отсутствие 404 ошибки(No 404s)
18. Уменьшение размера Cookie (Reduce Cookie Size)
19. Использование компонентов не использующих Cookie (Use Cookie-Free Domains for Components)
20. Отсутствие фильтров (Avoid Filters)
21. Не использовать масштабирование изображения средствами HYML (Do Not Scale Images in HTML)
22. Использовать небольшой favicon.ico с возможностью кэширования (Make favicon.ico Small and Cacheable)

Инструмент даёт нам оценку по одному из трёх предопределённых наборов правил. Начиная с версии YSlow 2.0 пользователи могут создавать собственные наборы или использовать один из трёх имеющихся.

• YSlow (V2) – этот набор содержит 22 правила, которые я расписала выше.
• Classic (V1) – содержит первые 13 правил
• Small Site or Blog – этот набор содержит 14 правил применимых к небольшому сайту или блогу

YSlow анализирует характеристики веб страницы, проверяя все компоненты страницы, включая динамически созданные, например, средствами JavaScript.

После анализа базовых характеристик по выбранному набору правил YSlow отображает отчёт, разделённый по четырём категориям:

Grade – эта вкладка содержит общую оценку (от A до F) по каждому правилу, чем ближе к началу алфавита- тем более оптимизирован ваш сайт. В результате даются краткие рекомендации по устранению найденных проблем.

Components – Эта вкладка показывает различные компоненты из которых состоит ваша страница и информацию по ним.

Statistics – эта вкладка отображает графическое представление числа запросов генерируемых к серверу для отображения страницы. Рассмотрено два случая: при отключённом кэше страниц и включённом.

Tools – эта вкладка показывает предлагаемые разработчикам инструменты.

Начало работы с расширением YSlow.

Внимание! Для работы инструмента требуется установленный Firebug: https://addons.mozilla.org/en-US/firefox/addon/1843

После запуска Firebug можно скачивать и устанавливать  https://addons.mozilla.org/en-US/firefox/addon/5369/

Для начала работы необходимо выбрать требуемый набор правил и нажать кнопку “Run test”

Личный опыт использования.

Мой блог получает категорию “C” при сокращённом (Small Site or Blog) тесте, общее количеств очков – 72. Важными показателями, получившими оценку – “F” является: Add Expires headers и Compress components with gzip. Для  увеличения оценки по этим пунктам, необходимо в  файл .htaccess добавить следующие строки:

 ExpiresActive on
 ExpiresDefault "access plus 30 days"
 
Header unset ETag
FileETag None
 
AddOutputFilterByType DEFLATE text/html text/plain text/xml text/css application/javascript
application/x-javascript application/x-httpd-php application/rss+xml application/atom_xml text/javascript

Этот шаг позволит добавить параметр expires header, а так же выключает ETag headers и включает gzip сжатие файлов, посылаемых браузеру. Нужно отметить что указанный код не будет работать, если на сервере отключён mod_expires.

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

Различий, которые привели к этой ситуации,  множество. От банальных физиологических: при чтении текста с монитора глаза устают быстрее, а чтение самого текста идёт на 25% медленнее. До сложных психологических: при чтении печатной продукции читатель получает информацию строчку за строчкой – линейно, на веб-сайте же есть несколько центров внимания.

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

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

Отсюда первое правило: Зрительно выделяйте ключевые моменты своего текста.

Для акцентирования внимания, выделите в каждом абзаце ключевую мысль в виде 2-6 слов и измените их начертание или цвет. Это позволит посетителю, не читая весь текст понять о чём он и возможно заинтересует к более полному прочтению.

Это правило распространяется не только на контент, но и на заголовки. Ведь это первое что люди видят попав на Ваш сайт.

Второе правило: Заголовок должен быть кратким, содержать основную мысль в начале предложения.

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

Третье правило: В начале каждой статьи помещайте вступительный параграф с основной идеей вашего текста.

Если читатель увидит огромную страницу цельного текста, придя по конкретному запросу, возможно  он даже не станет искать ваши ключевые слова в нём. Поэтому в тексте более 3 абзацев лучше выделять подзаголовки. Например если Вы пишете одну большую статью о программе, разбейте её на блоки: установка, настройка, отзыв или любые другие в зависимости от текста. Но это правило конечно применимо не всегда. Для построения подзаголовков используйте те же правила что и для заголовков.

Четвёртое правило: Блоки текста с одной идеей объединяйте в подзаголовки.

Перейдём к последнему правилу, оно касается списков, ссылок и картинок на вашей странице.

Пятое правило: Не забывайте о мелочах.

Приведу несколько примеров “важных мелочей”. Не путайте случаи, когда оправдано применение маркированного и нумерованного списков (нумерованные только для отображения последовательности действий и иерархии, для всех остальных – маркированные). Не создавайте ссылки с текстом “Читать дальше”, “скачать здесь” более информативно и релевантно смотрятся ссылки содержащие в теле от 3 до 7 ключевых слов.

Постовой: как создать свой сайт

PrestaShop поставляется с большим количеством предустановленных модулей, управлять модулями можно на странице админ панели “Модули”. Для включения модуля из данного списка достаточно нажать “Установить” и выбрать его позицию на странице  “Модули – Позиции”.

Добавление модуля отсутствующего в списке, возможно в ручном режиме (создание подпапки в папке modules) или  с помощью админ панели, для этого достаточно нажать на кнопку “Добавить новый модуль”

1. Добавление навигации по продуктам каталога товаров.

Автором модуля является пользователь официального форума rocky, предлагаю скачать русифицированную версию плагина навигации по продуктам (русификация моя).

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

Скачанный архив распаковываем в папку /modules и включаем его через панель администрирования (см рисунок ниже).

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

2.Добавление карусели (слайд шоу) товаров на главную страницу PrestaShop.

В интернете есть несколько плагинов, которые позволяют организовать карусель товаров (картинок), в основе каждого из них лежит jquery. Предлагаемый мной плагин можно скачать на сайте разработчика: spaceforaname.com/galleryview

Установка и настройка плагина:

• Скачиваем архив и распаковываем в паку /modules
• В панели администрирования нажимаем “Установить”
• Картинки необходимо загружать в подпапку /modules/jgalleryview/slides/, если необходимо изменить путь – редактируйте файл jgalleryview.tpl

1. Копируем содержимое папки /themes/prestashop в вновь созданную вами /themes/web-esse.

2. Изменяем стили, отвечающие за размещение и отображение блоков. Главный файл стилей находится в папке вашей темы  /css/global.css

Например, как изменить логотип магазина на PrestaShop и центральный блок с товаром

Для этого необходимо заменить изображения в корневой папке /img/logo.jpg (не в подпапке темы).

За отображение центрального блока с изображением отвечает модуль Editorial, если вы просто хотите изменить центральную картинку, замените её в папке /modules/editorial/homepage_logo.jpg, чтобы вообще убрать этот блок (например заменить на слайдшоу продукции) можно удалить папку /modules/editorial

В результате получится примерно следующее:

3. Все изображения используемые для дизайна должны быть размещены в подпапке вашей темы /img, т.е путь получается такой /themes/web-esse/img

4. Изменение настроек модулей PrestaShop (например, количество отображаемых тегов в облаке) можно осуществить либо вручную, либо через панель администрирования:

Панель Управления >> Модули

Выбираем интересующий нас модуль, нажимаем настроить и задаём нужное значение.

В этом же разделе можно управлять позицией модуля.

5. Создаём превью (preview.jpg) размещаем его в корне нашей темы, разрешение не должно превышать 100*100 пикселей.

6. Переходим к изменению содержимого страницы:

Убираем ссылку “Работает на PrestaShop” – для этого необходимо отредактировать файл
\modules\blockvariouslinks\blockvariouslinks.tpl

Удаляем или изменяем строки между

	<li class="item">....</li>

Добавляем уведомление об авторских правах с автоматической подстановкой текущего года – для этого редактируем файл footer.tpl, который находится в папке вашей темы.
Сразу после ($ HOOK_FOOTER) добавляем:

{l s='Copyright'} © {$smarty.now|date_format:"%Y"} {$shop_name|escape:'htmlall':'UTF-8'}. {l s='Все права защищены'}.

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

Добавление слайд шоу на главную страницу PrestaShop описано в следующем посте.

5. Переключаем пользовательский шаблон в панели администрирования PrestaShop

Back Office >> Preferences >> Appearance >> Themes section
Панель Управления >> Настройки >> Дизайн

Ещё посты по теме: Сравнение CMS для интернет магазинов

В первую очередь мы должны получить реальную картину по всем посещениям и переходам на страницах Вашего блога, для этого необходимо исключить весь трафик с вашего Ip. Настраивается это не сложно:

Диспетчер фильтров – Добавить фильтр – Тип фильтра: Исключить, Трафик с ip адресов, идентичные, Ваш ip.

Для оценки эффективности содержимого Вашего блога можно использовать краткий отчёт на панели инструментов “Использование сайта”, в нём в процентном соотношении указано количество посетителей покинувших страницу входа в течении 10 секунд. Естественно чем меньше это число тем лучше.

Так же будет полезен отчёт: Посетители – Лояльность посетителей – Лояльность, в нём можно увидеть сколько раз пользователи возвращались на ваш сайт. Чем больше пользователей сгруппировано в нижней части тем лучше.

Ещё один отчёт полезный для анализа находится в том же разделе “Лояльность посетителей” – “Продолжительность посещения” и показывает сколько времени посетители проводят на сайте.

Вооружившись информацией любезно предоставленной Google Analytics необходимо приступить к анализу. Свести показатель отказов на нет не удастся, это можно понять просмотрев отчёт: Источники трафика – Поисковые системы. Пользователи попадают на блог по запросам о которых возможно Вы никогда и не будите писать, например, пользователь из Яндекса попал на страницу об установке wampserver  по запросу “установка joomla на wampserver”, естественно не найдя инструкции он покинул сайт. С этим к сожалению ничего не поделать, поэтому будем оптимизировать блог под разумные запросы.

Переходим к практической части, а именно будем работать со страницами попав на которые пользователь решил не задерживаться и покинул её. В этом нам поможет отчёт: Содержание – Самые популярные страницы входа. Для удобства делаем сортировку по графе “Отказы” и начинаем работать с каждой строкой, например я выбрала вторую:

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

Наибольший интерес представляют два отчёта.

“Сводка по навигации” позволяет понять перешёл ли посетитель на другую, возможно связанную по смыслу страницу или просто покинул сайт.

Если показатель переходов низкий – необходимо изменить место расположения связанных статей или выделить их визуально.

“Ключевые слова входа” позволяет понять что именно хотел найти на вашей странице посетитель.

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

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

Другие посты по теме: Почему я перешла с Метрики на Google Analytics