Буквально неделю назад я загорелся идеей, максимально использовать для создания своих сайтов CSS3. И так как в последнее время меня мучает бессонница, я стал развивать эти навыки. Расслабляясь и смотря очередное видео, я пропитался новогодним настроением и решил сделать новогоднюю елку на CSS. Идея была в том, что все должно быть максимально простым, классическим и без использования картинок. В то время когда я делал елку, я решил сделать еще и таймер обратного отсчета к Новому году. На все это я потратил не очень много времени и масса удовольствия была мне обеспечена.

Здравствуйте, уважаемые Хабро-CSS3-люди!
Хочу поделиться маленьким опытом создания выезжающей панельки на CSS3 с iframe внутри и тем, как побороть неприятные сюрпризы от IE. Это решение мне кажется хорошо подойдет для добавления на сайт формы обратной связи, чата с консультантом и т.п.
На всякий случай напомню, что у iframe есть свои минусы, и при создании сайта с iframe необходимо их учитывать. Есть и плюсы, однако топик не об этом.

Небольшая демонстрация возможностей CSS3 на примере. Данный пример затрагивает свойства border-radius, box-shadow и linear-gradient.

head

Прошу расценивать предлагаемый код не в качестве готового решения, которое требуется использовать в своем проекте, а лишь как демонстрация. Хотя, при должной доработке, вполне возможно подойдет для какой-нибудь задачи.
Для тех, кому лень читать весь текст статьи я сразу прилагаю ссылку на рабочий пример. Солнце можно двигать по экрану, при его приближении к горизонту создается имитация заката. После полного ухода солнца за линию горизонта на небе выплывают звезды.
Пример тестировался в последних версиях современных браузеров — IE9, Chrome 16, Opera 11.60 и Firefox 8. Как ни странно, но шустрее всего на моей машине пример работал в браузере IE9, чуть похуже обстояли дела в браузере Firefox. В Chrome и Opera заметны некоторые фризы при движении.

Всё ближе долгожданные новогодние и рождественские праздники и самое время подготовить подарки и поздравления. А как известно, самый лучший подарок — это подарок сделанный своими руками. :) Поэтому сегодня мы создадим новогоднюю анимированную открытку при помощи CSS3. Создание такой открытки займет у вас всего лишь несколько минут, так как для него мы будем использовать только несколько фоновых картинок и CSS3 анимацию.

Mozilla закончила разработку BrowserID — единой децентрализованной системы аутентификации, которая использует HTML5, криптографию с открытым ключом и цифровые подписи. Она основана на упрощённой интерпретации Verified Email Protocol.

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


^{Так будет работать система, если Gmail станет поддерживать BrowserID. В этом случае отпадёт необходимость подтверждать свой email на сайте Browserid.org, который сейчас является пока единственным центром идентификации первого уровня.}

Кроме отсутствия паролей, ключевым преимуществом BrowserID является защита приватности — в отличие от OpenID и всех подобных систем, провайдер identity в BrowserID не получает данных о том, на каком сайте залогинился пользователь.

Мы часто выполняем на многих сайтах действие, которое постоянно эволюционирует и улучшается (а иногда наоборот). Это регистрация. Именно о разных способах и особенностях регистраций на сайтах я бы хотел с вами поговорить. Это не громоздкое исследование, а просто небольшие и (надеюсь) полезные выдержки из моего опыта дизайнера интерфейсов.


Пример удачной регистрации на сайте Tumblr.

Начну с определения самого понятия «регистрация», с ним всё не так просто, как может казаться. В результате полевых исследований нашей компании оказалось, что разные люди (клиенты, посетители и мы сами) нередко воспринимают это слово по-разному. Для того, чтобы избежать непонимания, опишу то, как я сам вижу регистрацию.

Vortal Combat

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

Бывает такое, что надо быстро отвекторить лого или другое изображение потому что НГ и надо быстро-быстро отдать в типографию штамп на тиснение, а растр не принимают. А может надо печатать огромный постер из логотипа, который вы только что сосканировали с единственной визитки. Такие изображения не всегда бывают достаточно простыми чтобы отрисовать их по оригиналу. Кроме того, у нас поджимает время – шампанское налито, студень остывает…

Долгожданное видео

Обещанного, как водится, три года ждут. А мы управились всего чуть больше, чем за месяц: видео со встречи Web Standards Days, прошедшей 29 октября в Минске наконец-то опубликовано вместе с докладами.

Кто-то спросит: а как же Киев, он же был на неделю раньше? Киев тоже будет, но по остаточному принципу: только те видео, которые не прозвучали потом в Минске. Хотя бы потому, что качество минского видео получилось лучше. Но давайте от слов к делу:

Adobe Edge. Веб-анимация по стандартам

Презентация: webstandardsdays.ru/2011/10/29/pres/edge

Представляю вашему вниманию перевод статьи под названием "A Study of Trends in Mobile Design" от Alexander Dawson. Перевели в компании UXDepot специально для пользователей Хабрахабра с одобрением издания Smashing Magazine.

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



Цель этой статьи — рассказать вам о методах, которые используются на самых популярных сайтах для того, чтобы предоставить пользователям мобильных устройств удобное и (надеемся) полезное взаимодействие. Среди проанализированных сайтов много известных компаний, например Facebook и Amazon. Мы приготовили для вас настоящий экскурс в мир мобильного веб-дизайна, со статистикой и по-настоящему интересными открытиями.

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

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

Безусловно в этом списке вы обязательно найдёте уже знакомые расширения, однако огромный пласт полезных расширений всегда остаётся в стороне. Так что приготовьтесь установить ещё парочку расширений! :)

Встроенные инструменты разработки в Firefox

Перед началом списка было бы неправильно не упомянуть об инструментах, уже встроенных в Firefox. Здесь речь идёт о тех самых инструментах разработки в Firefox Aurora 10 и том функционале, который сегодня можно найти в любом современном браузере.

При разработке интерфейса этих инструментов было перепробовано множество подходов и решений. В результате получился довольно приятный интерфейс, который любой желающий может испробовать, установив Firefox Aurora (хм, вы ещё его не поставили?)



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

Около полугода назад я написал простой джейкверный плагин для галерей на сайтах. Назвал его Фоторамой и выложил в интернет. По клику кроссфейдом показывалась следующая фотография, клик с шифтом мотал назад — вот и всё.

За эти месяцы Фоторама повзрослела, обзавелась сайтом с логотипом и, думаю, теперь можно написать о ней на Хабре.

Совсем недавно я побывал на мини-конференции местного разлива, где я размышлял на тему фриланса, с точки зрения веб-дизайнера. Даже подготовил для этого действа презентацию (на украинском). Здесь же попробую описать то, что хотел донести до слушателей Coffee Design Code.

Предисловие

Всем привет. Не так давно я написал статью о создании загрузчика изображений на флеше. Там я упомянул, что загрузчик можно реализовать и с помощью html5 File API. Несколько вечеров и — ура — я это сделал. Настало время рассказать, какие приемы я использовал, в каких браузерах это работает, и стоит ли этим вообще пользоваться.
Напомню вкратце требования: необходимо реализовать загрузчик изображений, поддерживающий пакетную загрузку, создание миниатюр(и загрузку их на сервер), и приемлемый интерфейс.

Добрый день. Несколько дней назад появилась необходимость использовать слайд-шоу на своём сайте, но оно должно было быть нестандартным, чтоб привлекало внимание пользователей. Искал в течение дня и ничего нормального не мог найти, были более менее подходящие «слайдеры», но душа хотела клубнички. После того как я облазил весь рунет, переключился на «забугорных» друзей и… удача! Забегая наперёд хочу сказать: этот обзор сделан потому, что в рунете нет никакого упоминания про это слайд-шоу, отсюда и логика.

Мне показалось странным, что на хабре эта тема практически не освещена и я постараюсь немного исправить эту ситуацию.

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

После более года разработки увидел свет финальный релиз jQuery Mobile 1.0 на базе jQuery 1.6.4 (поддержка jQuery 1.7 появится с версии jQuery Mobile 1.1). Этот фреймворк создан для разработки сайтов с тач-интерфейсом при помощи привычных HTML, CSS и JavaScript. Инструменты вроде PhoneGap позволяют легко трансформировать сайт HTML5 в мобильное приложение и распространять его через магазины приложений.

Все прочнее в среду разработчиков входит HTML5. Важным его достоинством является наличие такой технологии, как web workers, которая позволяет в некоторой степени обеспечить, если не мультипоточность, то ее подобие при выполнении скриптов.

Суть технологии проста — в отдельные файлы выносятся функции, обеспечивающие функционирование AJAX, либо функции обрабатывающие большие массивы информации, которые во время работы уменьшают скорость построения страницы. Таких файлов может быть столько сколько нужно. При выполнении скрипта на стороне браузера создается специальный объект Worker, который и отвечает за вызов необходимых функций. Многие современные браузеры поддерживают данную технологию.

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