Онлайн-форма: Internet Explorer рулит?

Еще неизвестно, чем это закончится, но интрига замечательная…

Те, кто следит за развитием небезызвестного многим проекта Windows Internet Explorer 9, мог заметить относительно свежие наработки по новому браузеру Microsoft. Разработчики всерьез взялись за свой полуживой продукт, и, по всей видимости, строят планы по выпуску первого за последние годы действительно интересного релиза Internet Explorer.

Подразумеваю совершенно конкретную вещь — аппаратное ускорение выполнения программных сценариев. Если сказать попроще, то даже простая анимация с огромным числом объектов в Internet Explorer 9 (см. hi-Tech PRO 5/2010, c. 104 электронной версии)  выполняется очень быстро. Если верить тестерам из DownloadSquad, то примерно, в 6—7 раз быстрее, чем это позволяют делать другие современные браузеры — Firefox, Chrome, Safari, Opera. Правда, рабочая версия Firefox 4, в которой также внедрена поддержка аппаратного ускорения WebGL, девятому IE не уступает в быстродействии. Но остальные браузеры в плане скорости работы JavaScript-кода оказались далеко позади — даже Safari и Chrome, которые достаточно долго держали в этом отношении пальму первенства.

Аппаратное ускорение просчета и отрисовки составляющих веб-страницы — это не только красивые мультики с рыбками, но и возможность создания сложных пользовательских интерфейсов, насыщенных и многочисленными деталями, и визуальными эффектами, упрощающими работу с такими веб-приложениями. И Microsoft действительно приятно удивила, что уже на стадии альфа-версии Internet Explorer готов к Вебу завтрашнего дня. В определенном смысле даже в большей степени, чем технологические лидеры, работающие на движке WebKit.

Остается только надеяться, что команда разработчиков IE9 не остановится на полпути и доведет все задуманное до конца.

Хола, Камбойя!

www.camboya.ws

Аргентинская студия дизайна Camboya сконструировала свое веб-портфолио в классическом флеш-стиле. Классическом в смысле живой, динамичной анимации, которой сопровождается смена скриншотов, переориентация стрелок навигации, появление панели меню и прочих элементов интерфейса.

При этом здесь вам никаких пафосных разглагольствований на тему «видения компании», ее высоких целей и прочего самовосхваления. Зашел на сайт дизайн-студии — значит, хочешь посмотреть на ее работы, а не на буквы. Понравилось — внизу адресок, телефончик и ящик электропочты. Такая лаконичность и деловой подход — явный признак того, что в «Камбойе» любят больше делать, чем говорить.

Диаграммы в цвете

www.moma.org

На самом деле это не коллекция диаграмм, как можно было бы подумать. Но инфографика в этой интерактивной инсталляции, размещенной в онлайн-галерее Moma.org, играет определяющую роль в подаче собранной здесь информации.

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

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

Футболки — умереть не встать

killer-clothing.com

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

Магазин «убийственной одежды» Killer как раз в таком стиле и оформлен. И кто скажет, что такое решение смотрится плохо, убого и вообще никак? — замечательный бюджетный вариант, который и продукт отлично демонстрирует, и при этом не навевает сметную тоску от просмотра микроскопических фотографий, стыренных на просторах Google Images.

Подача на пятерочку

www.panic.com/transmit

О программе Transmit вы можете почитать в этом номере журнала, где рассказано, как разработчики переработали интерфейс программы. Но им этого оказалось мало, и они изменили концепцию страницы Transmit.

Вместо скучной пачки скриншотов ребята сделали интерактивную модель главного окна программы, расставив на ней многочисленные «горячие точки». Наведите на одну из них курсор мыши — и вы получите краткое описание того или иного элемента интерфейса Transmit. Полный же список новых функций программы находится на обратной стороне модели окна — она переворачивается по нажатию на кнопку See All New Features.

Самое примечательное, что все это работает на HTML. Досадно, что сайт пока полноценно функционирует только в веб-браузерах на WebKit.

Переосмысление

relogik.com

Пожалуй, примерно так можно перевести название портфолио сербского дизайнера Дамьяна Станковича. Помните концепт светофора с круговым табло обратного отсчета? Так это Дамьян придумал. 

Но здесь речь о его личном сайте. Это еще один пример того, насколько мало нужно, чтобы веб-ресурс оставлял о себе приятное впечатление. Простая структура и аккуратная проработка мелких деталей — все, этого достаточно. В каком-то смысле объемные кнопки и логотип-оттиск даже подыгрывают основной идее сайта — Дамьян-то дизайнер промышленный.

Пожалуй, единственный минус у этого сайта — слишком мелкие иконки социальных сетей, которые расположены в правом верхнем углу страниц. Ну, и типографика хромает. А в остальном — довольно приятно, начиная с мягкого серого фона и заканчивая вполне хорошими иллюстрациями.

Жирным курсивом

thebolditalic.com

Этот сайт, пожалуй, может служить прекрасным примером того, как в «интернет-формате» можно публиковать журнальные статьи. Разумеется, на The Bold Italic материалы оригинальные, но они выглядят так, словно были взяты из бумажных периодических изданий.

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

Еще один интересный момент — информационные ссылки, разбросанные по материалам, которые можно складывать в персональный «загашник», где по ним дается краткая справка и список статей, в которых упоминается конкретный объект, человек или явление.

Жили-были Заум и Браун

www.zaum.co.uk

Сайт группы дизайнеров, работающих с певцами, страницами в музыкальном разделе MySpace, оформлением компакт-дисков и т. д.

Впрочем, с точки зрения «Формы», наибольший интерес на сайте «Заума и Брауна» представляет подход к компоновке его содержимого. Это так называемый резиновый дизайн, но другой его вариант. От привычной «резины» он отличается тем, что страница меняет свою компоновку в зависимости от ширины области отображения сайта.

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

Веб завтрашнего дня: CSS 3

Без единой картинки

graphicpeel.com/cssiosicons

Эти 11 иконок совсем недавно удивили многих. Пиктограммы практически один в один похожи на стандартные значки смартфона iPhone, однако они не нарисованы, а созданы исключительно с помощью CSS 3, который в должной мере поддерживается пока лишь в Safari и Chrome.

Диаграмма на CSS-тяге

demo.marcofolio.net/css3_bar_chart

Такую диаграмму можно было смастерить и раньше. Правда, для этого потребовались бы услуги дизайнера и значительно больше работы было бы у веб-технолога (в просторечии верстальщика). А с помощью CSS 3 код страницы получился максимально простым и легким, а визуально диаграмма доставляет.

История чемпионатов

robertivan.com/WorldCuphtml5.html

Еще один пример использования CSS 3 (в связке с HTML 5) — диаграмма, в которой показаны футбольные команды, игравшие в финалах двадцати последних чемпионатов мира (с 1930 по 2006 годы). Красные полосы, связывающие флаги команд с годами игр, означают поражение. Синие — победу.

Robo User
Web-droid редактор

     

Читайте також