Роман Середенко - фриланс веб-дизайнер/разработчик http://romul.name Дизайн веб-сайтов, xhtml/css верстка, разработка флеш-сайтов Tue, 13 Mar 2012 08:27:59 +0000 en hourly 1 http://wordpress.org/?v=3.2.1 Быстрая пробежка по HTML5 http://romul.name/2012/02/04/html5-quick-guide/ http://romul.name/2012/02/04/html5-quick-guide/#comments Sat, 04 Feb 2012 15:47:06 +0000 Romul http://romul.name/?p=765 Несомненно, HTML5 в последнее время является горячей темой для обсуждения среди разработчиков. Давайте попробуем выяснить, что хорошее принес нам новый стандарт и быстро пройдемся по новым возможностям HTML5.

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

Новые семантические элементы

В HTML5 появились возможность использования семантических элементов, назначение которых понятно как разработчикам, так и браузерам. К примеру, тэг <div> не несет никакой смысловой нагрузки, он просто абстрактный блок в HTML документе. Чтобы придать этому блоку какой-то смысл ему обычно назначают id или class со значением описывающее назначение данного элемента. Например, так:

<div id=”header”> или <div class=”footer”>

В данном случае уже понятно, что блок содержит какой-то заголовок или футер. Но это понятно нам, разработчика, но ничего не говорит браузеру.

В HTML5 предыдущие блоки можно описать новыми семантическими элементами:

<header> или <footer>

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

Краткий набор новых семантических элементов, которые появились в HTML5: <header>, <footer>, <nav>, <section>, <aside>, <article>, <author>, <mark>.

По именам этих элементов можно легко догадаться о их назначении.

Простой пример HTML5 верстки:

[html] Page title

Page header

Article #1

This is the content of the first article.

Article #2

This is the content of the second article.
Copyright 2012
[/html]

Поддержка аудио и видео

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

Воспроизведение аудио файлов на странице осуществляется с помощью тэга <audio>, например, следующим образом:

[html] [/html]

В разных браузерах на странице это будет выглядеть по-разному, например в Opera 11, это будет следующим образом:

Атрибуты controls, autoplay и loop служат для отображения управляющих кнопок, авто воспроизведения и циклического воспроизведения файла соответственно. Элемент <source> указывает на местоположение аудио файла и его формат. Так как, разные браузеры поддерживают разные кодеки для воспроизведения аудио файлов, существует вероятность отсутствия нужного кодека и невозможность воспроизведения. Поэтому, следует задавать дополнительные тэги <source> и предоставить аудио файл в нескольких форматах.

Если браузер не поддерживает <audio>, будет отображаться текст из этого тэга. Дополнительную информацию об элементе <audio> можно найти тут

Встраивание в веб-страницу видео происходит аналогичным способом, например так:

[html] [/html]

Дополнительную информацию об элементе < video> и возможные его атрибуты можно найти тут

Рисование в HTML5 используя элемент canvas

Еще один интересный элемент в HTML5 является <canvas>, он служит холстом для рисования на странице, используя JavaScript.

Ниже приведен простой пример, демонстрирующий работу элемента <canvas>. Я собираюсь нарисовать синий квадрат с белой буквой «М» внутри него. Пример очень простой и хорошо закомментирован, поэтому в дополнительных пояснениях не нуждается.

[html] Ващ браузер не поддерживает элемент canvas. [/html] [javascript] [/javascript]

Поддержка браузерами

На данный момент все современные браузеры в какой-то мере поддерживают HTML5. Но далеко не в полной мере.

Хуже обстоят дела со старыми браузерами (Например, Internet Explorer 8), они и вовсе не поддерживают HTML5.

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

Исчерпывающую информацию о поддержке современными браузерами стандарта HTML5 можно найти тут.

]]> http://romul.name/2012/02/04/html5-quick-guide/feed/ 0 Joomla: Ошибки при установке компонентов, плагинов или модулей http://romul.name/2011/11/12/joomla-component-plugin-module-install-errors/ http://romul.name/2011/11/12/joomla-component-plugin-module-install-errors/#comments Fri, 11 Nov 2011 23:22:45 +0000 Romul http://romul.name/?p=742 Нередко при установке в джумле компонентов, плагинов или модулей возникают разного рода ошибки. Попробуем рассмотреть некоторые, наиболее вероятные и критичные из них.

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

Could not create directory
Failed to copy file

Первым делом при таких ошибках следует проверить доступность для записи необходимых директорий в джумле. Для этого заходим в админку джумлы и идем сюда: Help->System Info ->Directory Permissions. На этой странице в колонке Status все директории должны иметь значение Writable(доступно для записи). Если для какой-то директории стоит красным значение Unwritable(недоступно для записи), следует это исправить.

Для этого можно воспользоваться любым FTP клиентом (например, FileZilla) и попробовать поставить chmod 777. В FileZilla это можно сделать, кликнув правой копкой мыши на нужную папку, выбрать File Permissions и в поле Numeric values поставить 777. Также можно воспользоваться файловым менеджером в панели управления хостингом, если провайдер это позволяет.

Возможен также случай, когда в файле конфигурации configuration.php стоит неверное значение для переменной $tmp_path. Это может случиться при переносе сайта на другой хостинг. Следует отметить, что путь в данной переменной должен быть абсолютным (как его узнать смотрите в конце поста). Если вышесказанное не помогает (в большинстве случаев этого достаточно) можно попробовать включить (выключить) FTP в том же файле конфигурации джумлы configuration.php. Сделать это можно задав правильные значения для следующих переменных:

[php] var $ftp_enable = ’1′; //1 – включает, 0 – выключает FTP var $ftp_host = ‘ftp.site.com ‘; //Ваш FTP сервер var $ftp_port = ’21′; //FTP порт var $ftp_user = ‘username’; //Имя пользователя var $ftp_pass = ‘userpass’; //Пароль var $ftp_root = ‘public_html ‘; //Путь к установленной джумлы (тот, который вы видите в FTP клиенте) [/php]

За более редким случаем причиной возникновения такого рода ошибок является неправильные значения для владельца файлов или папок. Эти значения можно посмотреть в вашем FTP клиенте. В FileZilla это крайняя правая колонка, которая называется Owner/Group. Проверьте если владелец файлов и папок является Apache, FTP пользователь, или PHP пользователь.

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

Как узнать абсолютный путь к файлам на сервере.

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

Создайте новый текстовый файл и вставьте в него следующий код:

[php] [/php]

Дайте ему расширение php и загрузите по FTP на ваш сервер (в папку с джумлой). Затем выполните этот документ через браузер. Как результат его выполнения вы должны увидеть что-то похожее на это:

/usr/home/username/www/htdocs

Это и есть абсолютный путь к вашему сайту.

]]> http://romul.name/2011/11/12/joomla-component-plugin-module-install-errors/feed/ 4 Как создать простые табы на jQuery с автосменой активного таба http://romul.name/2011/11/07/simple-jquery-auto-tabs/ http://romul.name/2011/11/07/simple-jquery-auto-tabs/#comments Mon, 07 Nov 2011 21:44:33 +0000 Romul http://romul.name/?p=728 Рассмотрено как с помощью jQuery создать простые табы (вкладки) с автоматической сменой активного таба.

Задача

Задача состоит в создании простых табов (вкладок) на основе популярной javascript библиотеки jQuery. При этом, активный таб должен поочередно меняться с каким-либо интервалом.

Решение

Для решения данной задачи нам, для начала, необходимо создать следующую структуру:

[html]
Контент первого таба
Контент второго таба
Контент третьего таба
Контент четвертого таба
[/html]

Класс .tabs-navigation служит контейнером для заголовков табов. А класс .tabs-container (как видно из названия) будет контейнером для содержания самих табов. Как вы уже успели заметить есть соответствие между значениями атрибутов href тегов <а> в .tabs-navigation и значениям атрибутов id блоков с контеном для табов в контейнере .tabs-container. Именно это и связывает заголовок таба с его содержимым.

Теперь попробуем немного стилизовать данную структуру.

[css] .tabs-container{ padding: 20px; border: 1px solid #448abb } .tabs-navigation{ margin: 0; height: 20px; } .tabs-navigation li{ float: left; list-style: none; } .tabs-navigation li a{ display: block; margin: 0 1px; padding: 0 15px; height: 20px; color: #448abb; font-size: 14px; line-height: 20px; text-decoration: none; border: 1px solid #448abb } .tabs-navigation li.selected a, .tabs-navigation li:hover a{ color: #fff; background: #448abb } [/css]

Следует отметить, что стили в данном случае не играют большую роль и вы можете экспериментировать с ними как угодно.

А теперь, самое главное, код который приведет табы в рабочее состояние.

[javascript] $(document).ready(function(){ var tabContainers = $(‘.tabs-container > div’); tabContainers.hide().filter(‘:first’).show(); $(‘ul.tabs-navigation li a’).click(function(){ tabContainers.hide(); tabContainers.filter(this.hash).show(); $(‘ul.tabs-navigation a’).parent(‘li’).removeClass(‘selected’); $(this).parent(‘li’).addClass(‘selected’); return false; }).filter(‘:first’).click(); }); [/javascript]

Тут, сначала мы прячем все контейнеры для табов кроме первого. Затем прикрепляем событие мыши click на заголовки табов, в функции для этого события мы сначала прячем все табы (строка 7), показываем только таб связанный с текущим заголовком (строка 8), ставим класс selected со старого на заголовок текущего активного таба (строки 9-10).

Не забудьте, также, включить и саму библиотеку jQuery. Это можно сделать следующим образом:

[javascript] [/javascript]

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

[javascript] $(document).ready(function(){ var tabContainers = $(‘.tabs-container > div’); tabContainers.hide().filter(‘:first’).show(); $(‘ul.tabs-navigation li a’).click(function(){ tabContainers.hide(); tabContainers.filter(this.hash).show(); $(‘ul.tabs-navigation a’).parent(‘li’).removeClass(‘selected’); $(this).parent(‘li’).addClass(‘selected’); return false; }).filter(‘:first’).click(); function pressNextTab(){ if ($(‘ul.tabs-navigation li.selected’).hasClass(‘last’)){ $(‘ul.tabs-navigation li:first’).find(‘a’).trigger(‘click’); }else{ $(‘ul.tabs-navigation li.selected’).next(‘li’).find(‘a’).trigger(‘click’); } } $(‘ul.tabs-navigation li:last’).addClass(‘last’); var int = setInterval(pressNextTab, 5000); }); [/javascript]

В строке 22 мы сначала отмечаем последний таб, добавив к его контейнеру класс .last. Затем устанавливаем бесконечное интервальное выполнение функции pressNextTab через каждые 5 секунд (строка 23). В этой функции мы проверяем не является ли текущий таб последним (для этого мы и добавили к нему класс .last) и в зависимости от этого активизируем событие click на первом или следующем по отношении к текущему табу.

Вот так, достаточно просто мы сделали табы на jQuery с автоматической сменой активного таба.

Пример

Страницу с рабочими табами можете посмотреть тут.]]> http://romul.name/2011/11/07/simple-jquery-auto-tabs/feed/ 0 Как показать записи из блога WordPress за его пределами http://romul.name/2011/10/11/how-to-show-wordpress-posts-outside-the-blog/ http://romul.name/2011/10/11/how-to-show-wordpress-posts-outside-the-blog/#comments Tue, 11 Oct 2011 20:19:02 +0000 Romul http://romul.name/?p=714 Рассмотрено как показать несколько последних записей из блога WordPress за его пределами.

Суть задачи

Предположим, что у Вас есть сайт в котором есть раздел “Блог” (под управлением ВордПресс) и Вам надо показать несколько последних записей на главной странице сайта.

Решение

Решить эту задачу весьма просто. Сначала Вам нужно подключить к странице функциональность ВордПресса, чтобы было возможным показывать записи. Для этого в страницу следует включить следующий код: [php] [/php]

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

Далее в месте куда должны выводится записи вставляем следующий код: [php]
http://romul.name/?p=693 Сегодня столкнулся с необычной проблемой. К моему удивлению у IE8 не может правильно обработать свойство max-width для элемента который находится в ячейке таблицы или же в блоке с display:table-cell. И что самое удивительное этот баг не проявляется в IE7, а только в IE8.

Сегодня столкнулся с необычной проблемой. К моему удивлению у IE8 не может правильно обработать свойство max-width для элемента который находится в ячейке таблицы или же в блоке с display:table-cell. И что самое удивительное этот баг не проявляется в IE7, а только в IE8.

А теперь детальнее.

Суть проблемы

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

У нас должна получится такая структура (упрощенная):

[html]
[/html]

C такими стилями:

[css] table td{ width: 200px; height: 200px; vertical-align: middle; text-align: center; border: 1px solid #0F0 } table td img{ max-width: 200px; max-height: 200px } [/css]

И везде все хорошо отображается, даже в IE7. Но в IE8 ячейки таблицы получаются деформированными так, как будто свойство max-width не применяется и картинки имеют свою оригинальную ширину. И что самое интересное, визуально картинки имеют ширину указанную в свойстве max-width. Странно, но факт. Но, не все потеряно, и решение для такого бага есть.

Решение

Чтобы избавится от этого бага нам всего лишь нужно задать для таблицы ее ширину, а также свойство table-layout fixed:

[css] table{ table-layout: fixed; width: 200px } [/css]

Вот и все.

Модификации

Если у нас та же самая задача, но мы используем div’ы, то баг в IE8 также проявляется. Решение – аналогичное. В конечном итоге у нас должно получится что-то вроде этого: [html]
[/html] [css] div.wrapper{ display: table; table-layout: fixed; width: 200px } div.inner{ display: table-cell; width: 200px; height: 200px; vertical-align: middle; text-align: center; border: 1px solid #0F0 } div.inner img{ max-width: 200px; max-height: 200px } [/css] ]]> http://romul.name/2011/09/30/bug-ie8-max-width-table-cell/feed/ 0 500 Internal Server Error в админке Joomla 1.5 http://romul.name/2011/08/31/500-internal-server-error-in-joomla/ http://romul.name/2011/08/31/500-internal-server-error-in-joomla/#comments Wed, 31 Aug 2011 21:24:36 +0000 Romul http://romul.name/?p=677 Ошибка “500 Internal Server Error” при попытке зайти в админку Joomla 1.5

Пару дней назад я начал разрабатывать веб-сайт на основе Joomla. Я поставил Joomla 1.5.23 и все шло хорошо, пока я не попробовал зайти в админку.

При каждой попытке залогинится сервер выдавал ошибку: 500 Internal Server Error. И никаких явных причин для этого не было, ведь эту самую сборку Joomla я использовал много раз и на этом же сервере.

Решение этой проблеме нашлось абсолютно случайно. Помогло смена прав для папки administrator на 777 и обратно на 755 в FTP клиенте. Удивительно но именно после этого все заработало как надо.

]]> http://romul.name/2011/08/31/500-internal-server-error-in-joomla/feed/ 3 Веб-сайт для компании – поставщика ликвидности http://romul.name/2011/07/19/web-site-liquidity-provider/ http://romul.name/2011/07/19/web-site-liquidity-provider/#comments Tue, 19 Jul 2011 13:13:32 +0000 Romul http://romul.net/?p=521 Создан веб-сайт для компании PFG Chicago FX

Создан веб-сайт для компании PFG Chicago FX

Моя часть работы состоит в создании html/css шаблонов из предоставленных PSD проектов

Посетить сайт

]]> http://romul.name/2011/07/19/web-site-liquidity-provider/feed/ 0 Корпоративный веб-сайт для инсайдерской компании http://romul.name/2011/07/12/corporate-website-insider-trading/ http://romul.name/2011/07/12/corporate-website-insider-trading/#comments Tue, 12 Jul 2011 11:39:46 +0000 Romul http://romul.net/?p=511 Разработан корпоративный веб-сайт для InsiderScore – компании специализирующиеся на финансовых услугах

Разработан корпоративный веб-сайт для InsiderScore – компании специализирующиеся на финансовых услугах

Моя часть работы состоит в верстке html/css шаблонов для сайта, а также UI шаблонов для веб-приложения.

Посетить веб-сайт

]]> http://romul.name/2011/07/12/corporate-website-insider-trading/feed/ 0 Врач-косметолог Татьяна Леонидовна Волочаева http://romul.name/2011/06/05/cosmetologist-tatiana-volochaeva/ http://romul.name/2011/06/05/cosmetologist-tatiana-volochaeva/#comments Sun, 05 Jun 2011 21:29:27 +0000 Romul http://romul.net/?p=548 Я создал дизайн и разработал WordPress веб-сайт для врача-косметолога Татьяны Волочаевой. Также я создал логотип и элементы фирменного стиля.

Я создал дизайн и разработал WordPress веб-сайт для врача-косметолога Татьяны Волочаевой. Также я создал логотип и элементы фирменного стиля.

Врач-косметолог Волочаева Татьяна Леонидовна – дипломированный специалист с более чем десятилетним стажем в области лечебной косметологии. Волочаева Т.Л. является опытным специалистом в области мезотерапии, инъекции ботокса, нехирургической контурной пластике, биоревитализации, лечения гипергидроза (устранение потливости).

Посетить сайт

]]> http://romul.name/2011/06/05/cosmetologist-tatiana-volochaeva/feed/ 0 Веб-интерфейс для ХоумТраст http://romul.name/2011/05/30/web-interface-ht/ http://romul.name/2011/05/30/web-interface-ht/#comments Mon, 30 May 2011 14:16:57 +0000 Romul http://romul.net/?p=524 Был разработан веб-интерфейс для сервиса поиска недвижимости ХоумТраст

Был разработан веб-интерфейс для сервиса поиска недвижимости ХоумТраст

Я создал xhtml-шаблоны

Посетить веб-сайт

]]> http://romul.name/2011/05/30/web-interface-ht/feed/ 0