19 дек. 2008 г.

XHTML (CSS) Framework

Начиная с лета 2007 года я не спеша вел разработку продвинутого XHTML (CSS) Framework-а.
Я очень не хотел, что бы это был тупой набор состоящий из пары css файлов и простейших html шаблонов, в нагрузку с извращенной концепцией.

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

Многие спросят, для чего нужен XHTML (CSS) Framework

Программисты и прочие девелоперы разработали разнообразные библиотеки для быстрой “сборки” веб-приложений. Дизайнеры тоже не исключение.

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

XHTML (CSS) Framework – это библиотека, которая содержит готовый набор CSS стилей, XHTML шаблонов и JS скриптов, функционирующая по определенным правилам и служащая для быстрой, легкой, простой, удобной, качественной и кроссбраузерной конечной “сборки” XHTML шаблонов.

XHTML (CSS) Framework будет полезен как опытным, так и начинающим специалистам, а так же прочим пользователям которые не хотят вникать в углубленное изучение XHTML и CSS.

Основные возможности
  • Абсолютная семантика всех элементов
  • Человеко-ориентированная среда и наименование элементов
  • Объектно ориентированный подход
  • Кроссбраузерность (IE 6/7/8, Ff 2/3, Opera 9.0/9.5, Safari 3.0, Google Chrome 1.0)
  • Гибкий и наращиваемый каркас xHtml шаблона
  • Возможность с легкостью создавать как “резиновые”, так и фиксированные xHtml шаблоны
  • Готовый к использованию разнообразный набор layout-ов (одна, две, три, мульти колонки)
  • Готовые к использованию компоненты и виджеты (функциональные блоки, набор нескольких компонентов)
  • Готовые к использованию UI интерфейсы (Стандартная текстовая страница, новости, статьи, блоги, каталог продукции, фото галереи, поиск, форма обратной связи, регистрация и многое другое)
  • Готовые к использованию AJAX компоненты и библиотеки (Adobe Spry, jQuery)
  • Тестирование Css стилей
  • PSD интеграция (Об этом позже. Дизайнеры смогут “на лету” создавать layout-ы страниц)
  • Готовые к использованию авторские скины
  • И многое другое

Возвращение

После супер длительного “отпуска с заказчиками” я вернулся и принес много нового и интересного.

В ближайшем будущем, обещаю написать весьма полезные статьи:
  • XHTML (CSS) Framework
  • Сказки и мифы
  • Обзор новых возможностей некоторых пакетов семейства CS4
  • Тонкие и важные настройки Eclipse (Eclipse (original), Aptana Studio)
  • Обзор CSS3, ColdFusion, AS3, Flex, AIR
  • и много другое

14 февр. 2008 г.

Yahoo – MS vs Google, полуфинал

Вторник, 12 февраля 2008 года Yahoo официально отвергла предложение MS о своей покупке за 44,6 млрд. долларов, ссылаясь на то, что MS выбрала удобный для себя момент, когда рыночная стоимость Yahoo достигла минимальной отметки.

Совет директоров Yahoo после тщательной оценки ситуации заявил, что данное предложение не отвечает интересам компании и ее акционерам.

MS в свою очередь призвал Yahoo пересмотреть свою позицию. Возможно, в будущем, MS попытается “надавить” на совет директоров на ежегодных выборах в компании в середине года. MS так же не сможет купить в обход акции у акционеров.

Сейчас Yahoo, во избежание поглощения со стороны MS рассматривает слияние с AOL (America Online).

Самое интересное то, что Google официально заявил, что готов помочь Yahoo в сложившийся ситуации.

От себя

Если бы данная сделка была заключена, возникли бы идеологические проблемы – MS имеет свою собственную платформу ПО (Windows Server, SQL Server,. NET и IIS), Yahoo использует “open source” ПО (Apache, Linux, PHP), а так же много ПО от Adobe (Flash, Flex, CF). Разработчики поддерживающие “open source”, неадекватно смотрят в сторону MS, после приобретения Yahoo MS переписывал бы все на .NET, Linux был бы заменен Windows, Apache – IIS.

P.S.

MS не смогла купить Yahoo, это радует, это значит что не все продается за “бабло”, даже за 44,6 млрд. долларов. MS стала “тупой” и “пустой” машиной для штамповки “баксов”, не более того! MS абсолютно не инновационная и не открытая компания, что собственно отталкивает от MS миллионы людей по всему миру.

Искренне надеюсь, что Yahoo выйдет из временного кризиса и останется в дальнейшем независимой компанией.

4 февр. 2008 г.

MS vs Google или будущие сети

MS является врагом свободно распространяемого ПО и интернета, с связи с гигантским развитием последнего, 30 октября 2005 года в MS был направлен чрезвычайный меморандум (коротко):

“Internet Software Services”
Произошла новая компьютерная революция, пора бить тревогу, происходит угроза ведения традиционного бизнеса MS, основой всегда был полный контроль над ПК, который был утерян благодаря распространению широкополосного доступа в сеть, людям больше не нужно устанавливать ПО на своих ПК, вместо этого они могут использовать ПО предоставляемое из сети.

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

Не слишком ли поздно MS задумалась?

Секрет успеха Google является в предоставлении бесплатных сервисов.

После покупки Yahoo, будут нарушены основные принципы сети “открытость и инновации”.
Продолжится практика некачественных браузеров, ОС и т д...
MS попытается оказать незаконное монопольное влияние на сеть, как в свою очередь, было сделано на ПК.

Кроме поискового сервера, портала Yahoo, сервиса хранения фотографий Flickr и прочего, MS получит один из самых популярных бесплатных почтовых сервисов и сервис обмена сообщениями, после чего вполне вероятно может сложится ситуация, аналогично той, что была в свое время с Internet Explorer и Windows Media Player – полная монополизация браузера и медиа плеера для ОС.

Если покупка все таки произойдет, то скорее всего некоторая часть пользователей Yahoo уйдет со своих аккаунтов (почта, Flickr и прочее) и перейдет на альтернативные (gmail и т д), что несомненно снизит стоимость Yahoo, после того, как она и так упала.

Как возможный финал всей этой истории, все инвестиции MS будут “похоронены” в Yahoo, а это более $41 млрд.

Open Source

Все крупные игроки поисковых сервисов, в том числе Yahoo, используют Linux и LAMP (Linux, Apache, MySQL, PHP+Perl+Python), и прочих проектов с открытым кодом. Кроме этого, Yahoo развивает довольно перспективные разработки по данному направлению, все эти технологии (Apache, PHP и прочие) полные конкуренты технологиям от MS, что будет с ними? Или Yahoo перейдет на Windows + “корявый” .Net?

Стоит задаться вопросом, нужен ли Yahoo MS только как средство онлайн рекламы?

От себя

20 век - был индустриальным веком, 21 век – информационный, в связи с чем, меняются формы ведения бизнеса. MS всегда вела традиционный бизнес для 20 века: производство/продажа, к сожалению (а может и к радости) она не может адекватно реагировать на изменения и тщательно старается защитить более “примитивную” форму бизнеса, тем самым предоставляя “некачественный и устаревший” товар потребителям.

P.S.

Для тех, кто не знает, MS открыла фабрики по сбору коробочных версий ПО в тюрьмах США, на которых работают убийцы, насильники, воры, маргинально криминальные элементы и прочая общественная “элита”.

При подготовке материала были использованы статьи с сайта sys-con.com:

- Google's Competitive Advantage: It Leverages "The Power of Free"
- Google: "Microsoft's Hostile Bid for Yahoo! Raises Troubling Questions"

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