28 янв. 2008 г.

Новые книги

После НГ решил сделать себе небольшой подарок и заказал аж 6,5 отличных книг:



- ActionScript 3.0. Сборник рецептов (O’Reilly, Джой Лотт, Деррон Шалл);
- PHP. Справочник (O’Reilly, Пол Хадсон);
- Eclipse IDE. Карманный справочник (O’Reilly, Эд Барнет);
- Веб-редизайн (Келли Гото, Эмили Котлер);
- Искусство управления IT-проектами (Скотт Беркун);
- Гибкая разработка веб-приложений в среде Rails (Д. Томас, Д. Хэнссон);
- Rails. Сборник рецептов (Чэд Фоулер).

16 янв. 2008 г.

Labs.CSS: Скругленные уголки (Rounded corners)

Оказывается, проблема скругленных уголков все еще актуальна на сегодняшний день. Предлагаю свой метод решения данной проблемы с минимальным количеством кода, без использования JS и удобной, легко масштабируемой объектной структурой блока, отображаемой во всех популярных браузерах (IE6/7, Mozilla Firefox 2/3, Opera 9 и Safari 3).

На сегодняшний момент у большинства веб-разработчиков самая популярная конструкция является (признаюсь честно, я тоже так делал 2 года назад):

<div id="block-name">
<div class="corner1">
<div class="corner2">
<div class="corner3">

Content


</div>
</div>
</div>
</div>

А то и вовсе с использованием таблицы.
Данная конструкция не рекомендована к использованию. Я не буду расписывать, чем она не удобна, скажу просто – она не соответствует всем выше изложенным требованиям.

И так приступим:

1. Описываем xhtml структуру блока:

<!-- Block 1 -->
<div id="block-name1" class="corners">

<!-- Corner top left -->
<div class="corner-tl"><!-- spacer --></div><!-- end .corner-tl -->

<!-- Corner top right -->
<div class="corner-tr"><!-- spacer --></div><!-- end .corner-tr -->

<!-- Content -->
<div class="content">

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Praesent aliquam, justo convallis luctus rutrum, erat nulla fermentum diam, at nonummy quam ante ac quam. Maecenas urna purus, fermentum id, molestie in, commodo porttitor, felis. Nam blandit quam ut lacus. Quisque ornare risus quis ligula. Phasellus tristique purus a augue condimentum adipiscing. Aenean sagittis. Etiam leo pede, rhoncus venenatis, tristique in, vulputate at, odio. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Praesent aliquam, justo convallis luctus rutrum, erat nulla fermentum diam, at nonummy quam ante ac quam. Maecenas urna purus, fermentum id, molestie in, commodo porttitor, felis. Nam blandit quam ut lacus. Quisque ornare risus quis ligula. Phasellus tristique purus a augue condimentum adipiscing. Aenean sagittis. Etiam leo pede, rhoncus venenatis, tristique in, vulputate at, odio.


</div><!-- end .content -->

<!-- Corner bottom left -->
<div class="corner-bl"><!-- spacer --></div><!-- end .corner-bl -->

<!-- Corner bottom right -->
<div class="corner-br"><!-- spacer --></div><!-- end .corner-br -->

</div><!-- end #block-name1 .corners -->

2. Скопируем весь код блока и вставим его еще раз, после закрывающего “end #block-name1 .corners” и поставим между ними <br />. После чего изменим id нового блока с “block-name1” на “block-name2”. Сейчас поймете зачем.

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

3. Затем опишем CSS свойства:

/* Blocks */
#block-name1{
width:100%
}
#block-name2{
width:240px
}

“block-name1” делаем по ширине 100% - резиновый, а “block-name2” - фиксированный, например 240px.
Далее задаем свойства для класса corners и для каждого дива с уголком (corner-tl , corner-tr, corner-bl, corner-br):

/* Corners */
.corners{
position:relative;
margin:0;
padding:0;
background:#003366;

color:#FFF
}
.corners .content{
position:relative;
z-index:10;
padding:4px
}
.corners div.corner-tl,
.corners div.corner-tr,
.corners div.corner-bl,
.corners div.corner-br{
width:12px;
height:12px;
position:absolute
}
.corners div.corner-tl{
top:0;
left:0;
background:url(corner-tl.gif) top left no-repeat
}
.corners div.corner-tr{
top:0;
right:0;
background:url(corner-tr.gif) top right no-repeat
}
.corners div.corner-bl{
bottom:0;
left:0;
background:url(corner-bl.gif) top left no-repeat
}
.corners div.corner-br{
bottom:0;
right:0;
background:url(corner-br.gif) top right no-repeat
}

Обратите внимание на то, что у класса “corners” имеется обязательный атрибут position:relative, иначе ни чего не получится!
Через запятую описываем одинаковые свойства для классов: corner-tl , corner-tr, corner-bl, corner-br, обязательно position:absolute.
После чего, для каждого дива с уголком задаем свой background image.

Примечание:
corner-tl – top left – верхний левый
corner-tr – top right – верхний правый
corner-bl – bottom left – нижний левый
corner-br – bottom left – нижний правый

4. Рендерим:

Firefox 2.0: Okey
Firefox 3.0 beta 2: Okey
Safari 3.0.4: Okey
Opera 9.2: Okey
Opera 9.50 beta: Okey
IE6: как всегда Suck
IE7: Okey

Результат.

5. В IE6 справа и внизу появились одно пиксельные отступы, это связано с тем, что IE6 неверно понимает свойства right и bottom (досталось в наследство от IE5), к сожалению, не существует универсального метода для “лечения” этой простой “болезни”, поэтому придется переписать заново кое-какие свойства.

Будем использовать трюк со “звездочкой”, который видит только IE6. Через запятую заново описываем одинаковые свойства для классов: corner-tl , corner-tr, corner-bl, corner-br, но вначале пишем * html и обязательно position:relative:

/* Fixed for IE6 */
* html .corners div.corner-tl,
* html .corners div.corner-tr,
* html .corners div.corner-bl,
* html .corners div.corner-br{
position:relative
}
/* end fixed */

После чего, для каждого дива с уголком задаем нужное ему свойство float, а для нижних уголков задаем отрицательный верхний margin:

* html .corners div.corner-tl{
float:left
}
* html .corners div.corner-tr{
float:right
}
* html .corners div.corner-bl{
float:left;
margin:-12px 0 0
}
* html .corners div.corner-br{
float:right;
margin:-12px 0 0
}

Так же задаем свойства для дива с контентом clear:both тем самым гарантировав, что данный див не будет обтекать див с уголком и подымаем блок вверх на высоту дива с уголком (-12px), используя отрицательный margin:

* html .corners .content{
clear:both;
margin:-12px 0 0
}

6. Снова рендерим:

Firefox 2.0: Okey
Firefox 3.0 beta 2: Okey
Safari 3.0.4: Okey
Opera 9.2: Okey
Opera 9.50 beta: Okey
IE6: Okey
IE7: Okey

Все сделали! Блок с динамическими уголками, как по ширине, так и по высоте готов.

Результат.

Затраченное время чуть менее 15 минут.

6 янв. 2008 г.

Завершил еще один проект (веб-дизайн)

Как раз за неделю до конца старого года завершил проект.
Дизайн веб-сайта по продаже сноубордов, зимней амуниции и прочих аксессуаров NITRO в Болгарии.

К сожалению, заказчику “горел” проект и по любому до НГ (рождественские продажи) все должно работать, в связи с чем, страница каталога продукции – не доработана, плюс мелкие технические недоделки на главной странице.



5 янв. 2008 г.

iTunes – платформа для веб образования

Мой Safari для windows запустил update, где было предложено установить iTunes, QuickTime и прочую дребедень, “совершенно не подумав подумав” что internet анлим, установил iTunes и что я там обнаружил!!! Заходим в медиатеку \ подкасты \ каталог подкастов \ categories \ technology \

Подкасты Photoshop Killer Tips, Adobe Creative Suite, theInDesigner, Learning Rails и многое другое. Например, RailsCact:

Episode 1: Caching with Instance Variables
Episode 2: Dynamic find_by Methods
Episode 3: Find Through Association
Episode 4: Move Find into Model
Episode 5: Using with_scope
Episode 6: Shortcut Blocks with Symbol to_proc
Episode 7: All About Layouts
Episode 8: Layouts and content_for
...
Episode 50: Contributing to Rails
...
Episode 85: YAML Configuration File
Episode 86: Logging Variables

Все ФРИ!!!
Качаем \ смотрим \ учимся \ зарабатываем бабло :)))

P.S. В целях популяризации Rails и для тех кому лень или нет возможности установить iTunes ссылочка на видео уроки с примерами кода - http://www.railscasts.com/episodes;archive