Вы читаете журнал [info]a_shapovalov

2 Июл, 2008

smile

Дополнения для Firefox, которые установлены у меня

music: 06 Limp Bizkit - Rollin'
  1. firebug -  firebug он и в африке firebug. Мощное средство для разработки. позволяет редактировать, отлаживать и мониторить Html, Css, Net, DOM. Без него, как без рук:)
  2. fireshot - позволяет делать скриншоты просматриваемых web-страниц как видимой области, так и всей страницы. Предоставляет в распоряжение целый ряд инструментов для редактирования скриншота и добавления графических и текстовых аннотаций.
  3. html validator - это расширение которое добавляет возможность проверки HTML кода в браузер.После установки расширения, в статусбаре добавляется новая иконка, которая изменяется с зеленой иконки при отсутствии ошибок на оранжевую при наличии замечаний и на красную при наличии ошибок. При наведении мышки на иконку во всплывающем окошке показывается результат проверки HTML кода. Детальную информацию об ошибках можно увидеть посмотрев HTML код страницы (вызывается по двойному клику на иконке, либо через просмотр исходного кода) .
  4. It's All text! - Изменяет содержимое textarea с помощью внешнего текстового редактора. После установки необходимо щелкнуть правой кнопкой мышки на textarea, выбрать "It's All text!" после чего откроется внешний редактор.
  5. MeasureIt - позволяет измерить ширину, высоту, или выравнивание элементов на странице в пикселях.
  6. web developer - добавляет в тулбар меню с инструментами разработчика.
Метки: ,

Posted at 18:54 | | Оставить комментарий | 9 комментариев | В избранное | Поделиться

13 Июл, 2007

smile

Текст в таблице, повернутый на 90 градусов

Как-то заказчик попросил сделать таблицы с такого вида:

Казалось бы, ничего проще - наделал картинок и готово. Но дело осложнялось тем, что вертикальных столбцов было порядка 150. Поискав в Сети всевозможную информацию, наткнулся на SVG и понял - вот оно.
Для реализации такой таблицы необходимо в каждую ячейку с вертикальным текстом поместить такую конструкцию:

<body class="page-body">
<div class=vcanv>Ваш текст</div>
<object data="data:image/svg+xml,
  <svg xmlns='http://www.w3.org/2000/svg'><text x='-200' y='12' class='rotate_text' transform='rotate(-90)'>
    <tspan>Ваш текст</tspan>
</text></svg>" type="image/svg+xml" style="width: 15px;" class="obj"/>
</body>
И в таблице стилей прописать:

div.vcanv {
display: block;
filter: "flipv() fliph()";
writing-mode: "tb-rl";
width: 14px;
height: 150px;
}
body[class|="page-body"] div.vcanv{
display: none;
}
html>body .obj{
display: block; width: 42px; height: 200px;
}
.obj {
display: none;
}

Теперь разберем подробно вышеописанное.
Со стилями для <div class=vcanv> все понятно, поэтому рассмотрим свойства объекта text для <object>:

x='-200' - задает высоту объекта в пикселях
y='15' - задает ширину объекта в пикселях
transform='rotate(-90)' - поворачивает текст на 90 градусов

Как это работает в различных браузерах:
  1. В IE <div class=vcanv> будет отображаться повернутым на 90 градусов при помощи div.vcanv, а <object> будет скрыт.
  2. В FF <object> будет отображаться при помощи html>body .obj, а <div class=vcanv> будет скрыт при помощи div.vcanv. Хак body[class|="page-body"] применяется для того, чтобы сккрыть <div class=vcanv> только для FF и OPERA выше 9 версии.
  3. В OPERA ниже 9 версии <div class=vcanv> будет отображаться не повернутым, а <object> будет скрыт. OPERA выше 9 версии понимает хак body[class|="page-body"] и SVG-объекты, поэтому <object> будет отображаться при помощи html>body .obj.




Метки: ,

Posted at 18:04 | | Оставить комментарий | 3 комментария | В избранное | Поделиться

9 Июл, 2007

smile

Как стать профессионалом за 10 шагов.

  1. Изучить набор базовых знаний в предметной области.
  2. Выбрать книги для более глубокого изучения предметной области. К таким книгам можно отнести: «WEB-дизайн по стандартам» Джефри Зельдмана и «Создание WEB-страниц: искусство верстки» М. Дубакова.
  3. Выбрать сайты и форумы для более глубокого изучения предметной области. Для этого пункта хорошо подойдет сайт http://htmlbook.ru. В качестве форумов можно посоветовать: форум htmlbook.ru / CSS и форум: HTML+CSS+JavaScript.
  4. Выбрать программные средства для работы. В качестве Html-редактора прекрасно подойдет Macromedia Dreamweaver, в качестве текстового редактора — EM Editor, PS Pad и им подобные. Так же необходимы наиболее распространенные браузеры: Internet Explorer 6, Internet Explorer 7, Firefox 1.5, Firefox 2, Opera 7.54, Opera 9.
  5. В процессе изучения предметной области приступить к работе над проектом и довести его до логического конца, не бросая на половине пути.
  6. По завершение проекта, провести анализ информационных источников и программных средств, необходимых для продолжения производственной деятельности. В случае необходимости заменить, что требуется из вышеперечисленного.
  7. Принимать участие в тематических семинарах и конференциях. Участие в них позволяет узнать что-то новое и познакомиться с новыми людьми, не важно профессионалами своего дела или нет.
  8. Завести собственный блог и писать в него о деятельности.
  9. Стать профессионалом невозможно без признания своих заслуг. Всвязи с этим необходимо общественное признание, которое может появиться только после участия в каком-либо крупном или выдающемся на фоне остальных проекте.
  10. Необходимо либо обладать, либо развивать в себе нестандартное, нешаблонное мышление. Просто применять набор по принципу «попугая» набор полученных знаний на практике недостаточно для профессионализма.

Posted at 19:17 | | Оставить комментарий | 1 комментарий | В избранное | Поделиться

smile

Регулярные выраженя

Недавно столкнулся с проблемой конвертации большого *.doc  файла в *.html. Пробовал сначала в Dreamweaver почистить с помощью Clean Up Word HTML, в ответ на что Dreamweaver "умер". тогда решил исправить это дело с помощью регулярных выражений.

После анализа фронта работ, стало ясно, что нужно:
1. Почистить свойста у некоторых групп тегов;
2. Удалить некоторые группы тегов;
3. Удалить двойные пробелы.

Решение:
В Dreamweaver открываем Edit -> Find and Replace или просто жмем Ctrl+F, ставим галочку Use regular expressions. Далее по пунктам.
1. Найти:"(<)(b|i|table)\s([^>]*)", Заменить: "$1$2" — данное выражение находит все перечисленные теги (в данном случае - это <b>, <i>  и <table>) и удаляет у них все свойства, стили, классы и пр. 
2. Найти: "</{0,1}(span|st1)[^>]*>", Заменить: " " — данное выражение находит все перечисленные теги (в данном случае - это <span>, </span>, <st1> и </st1>) и заменяет их на пробел.
3. Найти: "  ", Заменить: " " — два пробела заменяются на один. (нужно произвести данную манипуляцию несколько раз).

Posted at 13:49 | | Оставить комментарий | В избранное | Поделиться

3 Июл, 2007

smile

Сервис для проведения опросов

Недавно столкнулся с задачей проведения опроса на сайте. Решил поискать готовый сервис, в итоге остановил свой выбор на сервисе polldaddy.com.
На мое решение повлияло несколько факторов:
  1. Сервис является бесплатным
  2. Простая процедура регистрации
  3. Интуитивно понятный и удобный интерфейс
  4. Возможность редактирования визуального оформления формы голосования
  5. Несколько способов размещения формы голосования (java script - метод, flash - метод, direct link - метод)
После регистрации, я решил провести опрос. Если вам не трудно проголосуйте пожалуйста :)
  1. java script - метод
  2. flash - метод

  3. direct link - метод

Posted at 13:36 | | Оставить комментарий | 2 комментария | В избранное | Поделиться

26 Июн, 2007

smile

Слайд шоу с помощью Lightbox 2

Lightbox - JS библиотека для создания слайд шоу, которая использует JS библиотеки Prototype и Scriptaculous.

Подключение:
1. Подключить три *.js скрипта
<script src="/js/prototype.js" type="text/javascript"></script>
<script src="/js/scriptaculous.js?load=effects" type="text/javascript"></script>
<script src="/js/lightbox.js" type="text/javascript"></script>

2. Подключить один *.css файл
<link rel="stylesheet" href="/lightbox.css" type="text/css" media="screen" />

3. Загрузить картинки для кнопок "Назад", "Далее", "Закрыть", пустой кнопки и индикатора загрузки (кнопка "Закрыть" и индикатор загрузки описываются в lightbox.js остальное в lightbox.css)

Использование:
Добавляем rel="lightbox" атрибут тега ссылки ("a")
пример:
<a  title="Изпользуйте клавиши &quot;вправо&quot; и &quot;влево&quot; для навигации"  rel="lightbox" href="pic.gif"><img alt="" src="pic_small.gif"></a>

Официальный сайт
Метки:

Posted at 18:38 | | Оставить комментарий | В избранное | Поделиться

smile

Подарок ко дню рождения

7 июня у меня был день рождения. На работе подарили напоминалку, пластиковая штукенция в виде коровы. Записываешь фразу и вешаешь корову на стенку, а когда проходишь мимо нее - срабатывает датчик движения и корова произносит записанную фразу. Сразу возникло две идеи, где этот гаджет можно использовать:
1) дома - записать фразу "ХВАТИТ ЖРАТЬ" и повесить зверушку на холодильник;
2) в офисе - этот вариант использования оказался намного сложнее, т.к. единственная фраза, на которой сошлось мнение большинства была "РАБОТАТЬ". Это же большинство решило, что при такой фразе жить зверю от силы час-два.

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

Posted at 18:29 | | Оставить комментарий | В избранное | Поделиться