Ajax Russia : Аякс по-русски

Свежие новости из мира IT

Archive for August, 2007

Script.aculo.us morph - красивые морфинг эффекты

August 20th, 2007 | Category: CSS, Javascript, Web20

script.aculo.us - web 2.0 javascriptМорфинг эффекты есть в Script.aculo.us уже некоторое время, но обратил я на них внимание только недавно, когда пытался написать фото слайдшоу на джаваскрипте. Мне нужно было, при нажатии на фотографию, увеличить и передвинуть её в сторону. И всё это передвижение должно происходить плавно, а не просто изменить размер и координаты.

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

Read more

2 comments

Как подгрузить CSS при помощи Prototype

August 17th, 2007 | Category: CSS, Javascript

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

Для этого "чуда" мы используем JavaScript библиотеку Prototype, с которой особенно хорошо знакомы все Ruby On Rails программисты . Конечно можно сделать всё, что я собираюсь показать, и стандартным джаваскритом, без дополнительных библиотек, но Prototype я хотел использовать по двум причинам. Во первых с прототайпом программировать удобнее, во вторых я хотел попробовать новую версию прототайпа, с его новым DOM Builder-ом.

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

Вот наш HTML. Ничего особенного в нём нет. Обратите внимание, что нигде нету ссылки на CSS файл.

PLAIN TEXT
HTML:
  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
  2.     "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
  3. <html xmlns="http://www.w3.org/1999/xhtml">
  4.     <head>
  5.         <meta http-equiv="Content-type" content="text/html; charset=utf-8"/>
  6.         <title>CSS стиль подгружается при помощи Javascript библиотеки - Prototype</title>
  7.         <!-- Для туториала нужен Prototype 1.6.0 -->
  8.         <script type="text/javascript" charset="utf-8" src="prototype.js"></script>
  9.     </head>
  10.     <body id="mybody">
  11.        
  12.         <h1>Привет, через 5 секунд мир станет ярче</h1>
  13.         <p>
  14.             CSS стиль подгружается при помощи Javascript библиотеки - Prototype.
  15.         </p>
  16.    
  17.     </body>
  18. </html>

А вот CSS который мы хотим загрузить через 5 секунд после открытия страницы. Этот стиль изменит цвет фона страницы на светло зелёный, или cucumber_shampoo.

PLAIN TEXT
CSS:
  1. #mybody {
  2.     background-color: #E1F5B0;
  3. }

Для этого напишем набольшой скрипт, который мы поместим в HEAD.

PLAIN TEXT
JavaScript:
  1. <script type="text/javascript" charset="utf-8">
  2.         // Следим за загрузкой страницы
  3.         Event.observe(window, 'load', function()
  4.         {
  5.             // Ставим таймер на 5 секунд
  6.             setTimeout(function()
  7.             {
  8.                 // Получаем элемент HEAD
  9.                 var head = $$('head')[0];
  10.                 // Создаём новый элемент LINK при помощи Prototype DOM-Builder
  11.                 var css = new Element('link', {type: 'text/css', rel: 'stylesheet', href: 'dynamic.css', media: 'screen'});
  12.                 // Добавим LINK в HEAD
  13.                 head.insert(css);
  14.             }, 5000);
  15.         });
  16.     </script>

Готовый результат можно посмотреть по этому адресу. Хочу ещё раз обратить ваше внимание на то, что версия прототайпа, использованная в туториале - 1.6.0 Release Candidate. С версией 1.5.1.1 скрипт скорее всего работать не будет.

Кто напишет в комментариях самый короткий JavaScript, который делает тоже самое, но без таймера - тот молодец :-)

1 comment

Сделай сам : красивые формы для поиска при помощи CSS

August 16th, 2007 | Category: CSS, Web20, Дизайн

Формы для поиска есть пожалуй на любом вэб сайте, но в большинстве случаев они очень скучные и похожи друг на друга. Мне нравится когда html формы чем то отличаются от других. Поэтому сегодня я хочу представить вашему вниманию туториал от Брайана Рэйндэла.

Для туториала нам потребуется две картинки и несколько минут свободного времени.
background image for search
button for search

  1. HTML Markup
    Тут мы создаём DIV контейнер, в котором будет наша форма.

    PLAIN TEXT
    HTML:
    1. <div id="search_box">
    2. <form id="search_form" method="post" action="/">
    3. <input type="text" id="s" value="Search" class="swap_value" />
    4. <input type="image" src="images/btn_search_box.gif" width="27" height="24" id="go" alt="Search" title="Search" />
    5. </form>
    6. </div>

  2. Добавляем CSS
    PLAIN TEXT
    CSS:
    1. #search_box {
    2. width: 201px;
    3. height: 31px;
    4. background: url(bg_search_box.gif);
    5. }
    6. #search_box #s {
    7. float: left;
    8. padding: 0;
    9. margin: 6px 0 0 6px;
    10. border: 0;
    11. width: 159px;
    12. background: none;
    13. }
    14. #search_box #go {
    15. float: right;
    16. margin: 3px 4px 0 0;
    17. }

И - пожалуйста, форма для поиска готова:
Search field with CSS

3 comments

Как сделан этот сайт?

August 15th, 2007 | Category: Web20

BuiltWith LogoКак и многим web разработчикам, мне интересно какие технологии используются на часто посещаемых мною сайтах и как эти сайты вообще сделаны. Обычно я просто отключаю CSS и смотрю как структурирован текст на странице - или это семантически корректный сайт, или на нём скрываются пара десятков таблиц. А иногда становится интересно на каком вэб сервере работает сайт, какие web сервисы он использует, про помощи какого фреймворка он построен. Информацию подобного рода так быстро не увидишь, или по крайней мере раньше - это было достаточно непросто.

Теперь же есть замечательный ресурс для таких любопытных интернет пользователей, как я. Называется сайт BuiltWith.com. Использовать его проще некуда - задаёшь адрес и жмёшь Lookup.

Информация которую выдаёт ресурс - довольно обширная. Там есть данные сервера, какие сервисы используются для ведения статистики, какие сервисы используются для раскрутки сайта, какие фреймворки использовал автор, и много других полезных сведений.

Вот подробный отчёт об AjaxRussia.com

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

2 comments

RegexPal - тестируем регулярные выражения в браузере

August 14th, 2007 | Category: Javascript

RegexPal - тестируем регулярные выражения в браузереУже есть миллион тестеров регулярных выражений. Зачем выдумывать ещё один? По мнению Стива, у RegexPal-a есть ряд преимуществ по сравнению с конкурентами :

  • Скорость. Обычные тестеры не выдерживают текст с 5000 или более фрагментами для поиска, или их скорость поиска при этом очень сильно падает. RegexPal выполняет поиск за пол секунды.
  • Подсветка синтаксиса в реальном времени.
  • Инвертирование поиска - всё что не найдено регулярным выражением.

RegexPal не очень богат на функциональность, но то что он умеет - он делает отлично.

No comments

« Previous Page — Next Page »