papilio

Архив на November, 2007

Твиттер как SMS 2.0

Опкбликовано Evgeny Pavlov @ 26 November, 2007 * Коммент.(3)

Долго бродил вокруг одного странного сервиса в интернете. Сервиса, где опять что-то пишут. Сначала я просто видел, как некоторые сайты, вроде Хабрахабра, пишут там небольшие фразы о текущем состоянии дел в разработке проекта. Потом я много читал, как люди пишут о чём-то совершенно новом и прикольном в интернете.

Twitter Home

Это Twitter. По своей сути — очень странный сервис, в котором можно публиковать записи как блоге, но не более 140 символов. То есть это уникальный блог-хостинг, который заставляет писать ёмкие фразы. Такие же фразы, предложения и тексты мы пишем в обычных SMS. Но ведь SMS читает только один человек? А здесь получается так, что читают все, кто за тобой следует (follow), то есть подписан на твою ленту.

Сервис позволяет обновлять свои записи многими способами: через обычный интернет, через сотовый телефон и интернет-пейджеры IM.

Но вот способ добавления новый друзей достаточно сложен — его просто нет. Поэтому приходится просто просматривать новые сообщения, чтобы найти что-нибудь интересное. Зато, если у вас уже кто-то есть в друзьях, можно погулять по трёхмерному миру: вы стартуете со своего твиттера, постепенно перемещаясь через своих друзей до тех, кого никогда не читали.

Twitter Explore!

Именно так интересно и происходит погружение в социальный интернет.

Метки: , , , ,

Сложно ли делать хорошие презентации?

Опкбликовано Evgeny Pavlov @ 21 November, 2007 * Коммент.(4)

У нас в университете все точно помешаны на PowerPoint — я ещё не видел, чтобы кто-нибудь сделал презентацию в Adobe Flash или Adobe Acrobat. Продукт от Microsoft хороший, но он, почему-то, заставляет делать немного кривые презентации. Кривые даже не по содержанию (а об этом ниже), а по дизайну. Может, это из-за того, что студенты начинают пользоваться шаблонами и клипартами?

В интернете нашёл отличную презентацию о презентациях (автор Алексей Каптерев): она на английском, но с русскими примерами:

Хотя это и не идеал создания презентаций, но тем не менее есть интересные советы:

  • Давать слушателям только 3-4 довода своему утверждению. Больше они просто не запомнят. Лучше сначала написать 3-4 аргумента, которые впоследствии можно уточнить и раскрыть.
  • Упрощать, но не сильно. То есть стараться не перегружать данными:
Пример презентации
  • Писать мало. И не читать то, что написано в презентации. Если ты напишешь то, что будешь читать, то ты становишься бесполезным, так как люди прочитают быстрее, чем ты успеешь то же рассказать. Лучше выделить основные идеи.
  • Автор советует размещать на одном слайде не более семи строк, а в каждой строке — не более семи слов.
  • Выделять ключевые слова. Лучше цветом.
  • Стараться визуализировать. Использовать только фотографии! Поменьше клипарта.
  • «No audience? Present to the furniture. But aloud. Try it.» Тренируйтесь. Пытайтесь рассказывать. Даже, если не кому рассказывать, расскажи стулу и вслух =)
  • И всё получится!

P.S. Большим плюсом создания презентаций не в PowerPoint — это возможность сохранения шрифтов. Или я не знаю, как это делать? Хотя можно сделать всё и в PowerPoint, а потом просто сконвертировать в PDF.

Метки: , , ,

Динамическая иконка

Опкбликовано Evgeny Pavlov @ 18 November, 2007 * Коммент.(3)

В предыдущем посте мы создали иконку в Corel Draw. Теперь нам надо сделать так, чтобы при наведении на неё она либо плавно увеличивалась, либо просто меняла прозрачность. Всё это мы попробуем реализовать с помощью JavaScript фреймворка jQuery.

Сначала нам надо просто скачать последнюю версию jQuery, переименовать в jquery.js и положить в папку с программой.

[cc lang="html"]
<!DOCTYPE html PUBLIC «-//W3C//DTD XHTML 1.0 Transitional//EN» «http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd»>
<html xmlns="http://www.w3.org/1999/xhtml">

<head profile="http://gmpg.org/xfn/11">
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<script src="jquery.js"></script>
[/cc]

Теперь создадим главный слой wrap, в котором будет содержаться все остальные слои:

[cc lang="html"]
<div id="wrap">
...
</div>
[/cc]

Внутрь него вложим два слоя: один будет содержать иконку small.png размера 70 пикселей, а другой иконку big.png размером 80 пикселей. Второй слой как раз и будет отображаться при наведении на иконку мышкой.

[cc lang="html"]
<div id="wrap">
<div id="small_ball"></div>
<div id="big_ball"></div>
</div>
[/cc]

Определим для этих слоёв свойства. Во-первых, чтобы красиво смотрелось сделаем выравнивание по центру. Во-вторых, два слоя, содержащие изображение, поместим вниз слоя wrap для того, чтобы при увеличении тень смотрелась естественней — для этого определим их позицией absolute, а слой wrap с relative. Также выключим отображение второго слоя с большой иконкой.

[cc lang="css"]
#wrap {
position:relative;
width:200px; height:100px;
text-align:center;
border:1px solid black;
}
#small_ball {
position:absolute;
width:90px;
bottom:0; left:50%;
margin-left:-45px;
z-index:1;
}
#big_ball {
position:absolute;
width:90px;
bottom:0; left:50%;
margin-left:-45px;
z-index:2;
display:none;
}
[/cc]

Теперь самое интересное: нам надо сделать так, чтобы тогда, когда курсор мышки находится над иконкой, она увеличилась в размере, а когда убираем курсор — уменьшалась. Для первого случая это событие mouseover, для второго — mouseout. В jQuery всё достаточно легко и просто. Многое описано в документации. Чтобы плавно увеличить иконку, воспользуемся эффектом fadeIn:

[cc lang="javascript"]
$(document).ready (function (){
$(«#small_ball»).mouseover (function (){
$(«#big_ball»).fadeIn (500);
});
$(«#big_ball»).mouseout (function (){
$(«#big_ball»).fadeOut (300);
});
});
[/cc]

Из этого кода видно, что мы увеличиваем прозрачность элемента с идентификатором big_ball (слоя с большой иконкой) за 500 миллисекунд при возникновении события mouseover на элементе small_ball (слой с маленькой иконкой).

Вот, что получилось:

Уже после создания этого я нашёл интересное решение, как раз связанное с Dock: Fisheye от Interface. Советую присмотреться.

Метки: , , , ,

Попробуем создать шар в CorelDraw

Опкбликовано Evgeny Pavlov @ 14 November, 2007 * Коммент.(4)

Этот пост начинает цикл, состоящий из двух статей, о создании динамической иконки для сайта: что-то вроде Docs в MacOS или Kiba (или AWN) для Linux. Подробнее об этом можно почитать в Википедии.

А сегодня просто попробуем создать будущую иконку — мячик с тенью — в программе CorelDraw X3:

Шарик: результат

Интересно? Тогда вперёд =)

Вначале просто создадим окружность: для этого выбираем инструмент Ellipse Tool (F7) и рисуем, удерживая клавишу Shift:

Шарик: создание окружности

Затем на этой окружности создаём эллипс: вначале рисуем, а затем, нажав на центральный крестик, чтобы появились стрелки управления, поворачиваем:

Шарик: мини-окружность

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

Шарик: квадрат

Теперь воспользуемся небольшим трюком: сначала переведём наш прямоугольник в линии Convert To Curves (Ctrl+Q), а затем с помощью Shape Tool (F10) подведём углы к границам окружностей:

Шарик: перевод в линии

Для того чтобы придать нормальную форму, сначала нажимаем правой кнопкой мыши на какую-нибудь сторону нашей фигуры и выбираем To Curve. Так надо сделать с каждой из четырёх сторон. Теперь с помощью стрелок можно изменять форму линии:

Шарик: придаём форму

И так с небольшим удалением друг от друга создаём несколько полосок. Все они должны находиться выше основной окружности. Это можно проверить на панели Object Manager. В промежуточном итоге получаем такой шар:

Шарик: голый шар

Теперь самое интересное: раскрашиваем шар! Жёлтый у основного шара, а, так как он находится внизу, полоски перекрывают его цвет своим. Заливку лучше делать радиальной:

Шарик: окраска

Итак, у нас получился вполне симпатичный шар:

Шарик: полуфинал

Но у него есть несколько недостатков: например, нет тени и бликов. Попробуем создать сначала блик. Для этого с помощью обычного Bezier Tool рисуем форму нашего блика. Чтобы получить острый угол, при рисовании надо не забывать придерживать клавишу C. Заливаем его белым цветом:

Шарик: создание блика

Далее просто применяем к нашей белой форме Interactive Transparency Tool. Для создания тени на самом шарике копируем основную окружность, затем заливаем ему серым и применяем радиальный Interactive Transparency Tool:

Шарик: тень на шаре

Эту тень накладываем поверх всего шара, но перед бликами. Теперь осталось сделать только тень от самого шара. Для этого создаём эллипс и заливаем его с помощью Mesh Tool:

Шарик: тень под шаром

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

Шарик: маштабирование

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

Метки: , , , ,