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

Директриса долго отпинывалась, да и я со своим характером не сахар. Но тем не менее в сентябре мне вручили журнал 7а класса по предмету «Вводный курс информатики и программирования».

Ребята очень активные и веселые. Класс дружный, но при этом абсолютно отсутствует стадный инстинкт и иерархия как таковая.

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

Как понимаете, мотивировать такой коллектив очень сложно, и я решил что нужно их заинтересовать.

Предисловие

Несколько недель назад в просторах интернета я увидел очень заинтересовавшую меня вещь — iOS иконки на CSS3 полностью без картинок. Первое что подумал — «Я тоже так могу»! А спустя еще 5 минут для себя четко решил — «challenge accepted». Но чтоб не повторяться я решил немножко усложнить задачу — сделать не только иконки, но и сам девайс.

Постановка задачи

Итак, в тот-же день я решил сделать iPhone4 на CSS3 абсолютно без картинок, base64, canvas или SVG и добавить еще некоторую изюминку — интерактивные возможности:
— включение/выключение;
— блокировка при включении и разблокировка как в реальном iPhone;
— анимация «slide to unlock» текста на экране блокировки;

Несколько раз натыкался за последнее время на публикацию данной инфографики, и всякий раз ссылка шла за бугор. Почти всегда (в таких случаях) народ незнающий английского и «не могущий» использовать словарь в коментах задают вопросы: а что? а как? Ответов на них хватило бы, что бы все перевести. Только не понятно почему не переводят )))

Итак, источник инфографики: www.blog.kissmetrics.com/fan-base/

Далее самое интересное:

Построение вашего онлайн сообщества «фанатов» невероятно важно. Ваше сообщество «фанатов» в социальных сетях может помочь поднять популярность вашего бренда и привести к увеличению трафика, вирусному распространению информации, и как следствие, увеличению прибыли. Но наращивание количества поклонников сообщества может быть заданием довольно трудным. Многие бренды и люди понятия не имеют, с чего начать. К счастью, сервис KISS Metrics, только что опубликовал фантастическую статью о важности поклонников и о методах увеличения их количества.

Инфографик сервиса KISS Metrics затронул не только лучших субъектов с точки зрения подписчиков Twitter и пользователей Facebook (в топ-рейтинг которых вошли: Lady Gaga, Facebook, Rihanna, Eminem и YouTube), и ведущих мировых брендов на Facebook (в топ-рейтинг которых вошли: Coca-Cola, Starbucks и Oreo), но и показал, как поклонники в социальных сетях могут быть использованы для развития бренда, в том числе тот факт, что 64% пользователей Twitter чаще всего отдают предпочтение брендам, подписчиками которых они являются.

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



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

Если кто-то захочет попробовать, я сделал простой пример системы, который показывает общее развитие сценария.

Навеяло топиком про горячие клавиши в Windows (статья 1 и статья 2)

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


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

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

Внезапно, у меня возникла задача выбрать товары в интернет-магазине вместе с сестрой. Казалось бы всё просто, только вот сестра находится на 800 км вдали от меня.

Кидать ссылки друг другу или шарить один из рабочих столов я посчитал неэффективным. Но нашёлся революционный сервис, который похож на Google Docs, но только для совместного посещения сайтов — Channel.me.



Ближе к делу: демо-канал для хабрапользователей | демо-канал №2
Комментарий от создателей по поводу хабра-эффекта в демо-канале:

The demo-channel is a bit crowded… Looks more like a stress test :-)
Our virtual server is running at 160% and with 20Mb/s traffic… cool!

На этой неделе Microsoft представила свой новый сервис Excel Mashup, который предназначен для внедрения возможностей табличного процессора Excel в HTML-страницу, причем все вычислительные и графические возможности Excel сохраняются, а управление объектом возможно при помощи JavaScript-библиотеки.

С сервисом предлагается работать следующим образом:

• Web-разработчик, располагая некими данными и/или графиками в книге Excel, загружает её на облачный сервис SkyDrive (необходима регистрация) и настраивает права доступа к ней.
  
• Затем получает от сервиса HTML-код для установки на страницу. Этот код и будет, по сути, «web-версией» обычной «десктопной» книги Excel.
  
• Если внедренным объектом необходимо управлять, то программист может использовать по своему усмотрению возможности JavaScript-библиотеки Excel Services.
  

Сервис хорошо документирован: есть интерактивные примеры сниппетов, выполнив код которых можно тут же увидеть как это выглядит, а также полноценное демо-приложение.

Эффектный пример с использованием Bing Maps также можно оценить здесь.

Для еще более глубокого использования также предлагается REST и SOAP API.

[ExcelMashup]

Интернет наполнен огромным количеством документации для веб-разработчиков. Но, к сожалению, использование большей части документации довольно неудобное. Для примера, возьмем Mozilla Developer Network (MDN). Сайт Mozilla Developer Network предлагает большой объем документации по CSS, JavaScript, HTML, SVG и т.д., но навигация по нему утомительна — нет никакого глобального меню и поиск не столь удобный.

Это привело разработчика Рафаэль Гарсия создать instaCSS — быстрый способ просматривать документацию CSS от MDN. Благодаря хорошей функции поиска и чистому, простому дизайну с хорошим глобальным меню instaCSS стал хитом по мнению читателей Hacker News. В связи с большим спросом, Гарсия перевел проект на более широкий домен DocHub.io и расширил поиск по CSS, HTML, JavaScript и DOM.

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

Работать дизайнером очень интересно. Это творческая работа. И как любому творческому человеку, дизайнеру нужна муза или вдохновение.

Я уверен, что у каждого дизайнера есть набор сайтов, на которые они периодически заходят для того что бы черпать это самое вдохновение. У меня так же есть такой список. И я хочу им с вами поделиться.

Естественно, если вы расскажите о своих ресурсах, я буду благодарен.

Хочу сразу предупредить, что практически все ресурсы, собранные мной — англоязычные. Только лишь один на русском. Так же я не очень приветствую узкопрофильные ресурсы (речь о ресурсах, на которых можно скачать только кисти для photoshop и прочее).

Представляю вашему вниманию перевод статьи под названием "User Experience and the design of news at BBC World Service" от Tammy Gur. Перевели в компании UXDepot специально для пользователей Хабрахабра с одобрением компании BBC и издания Johny Holland Magazine.

Проектирование окружающей среды для стремительного потока информации, проходящего через новостной веб-сайт в режиме нон-стоп — это вызов, не похожий ни на что другое. Команда дизайнеров и специалистов в области UX в BBC World Service создает новостные сайты для десктопных и мобильных браузеров на 27 языках, удовлетворяя различные аудитории по всему миру. В этой статье мы поделимся этим опытом с вами.

Хочу поделиться ссылками на несколько полезных сервисов. Некоторые из них помогут сэкономить время, другие — сделают за Вас незнакомую/нелюбимую работу. Список разбит по категориям, чтобы было легче ориентироваться.

Сервисы опросов
userreport.com (добавил Romanych)
simpoll.ru
webanketa.com (добавил mihass)

Кнопки постинга в социальные сети
Кнопка от Яндекса
addthis.com (добавил UksusoFF)
share42.com

HTML5-консоль, который вы могли видеть в одном из выступлений на майской конференции Google I/O, работает в онлайне (судя по всему, только в браузере Chrome).



Презентация HTML5 Wow целиком была создана для демонстрации возможностей HTML5. Все демонстрационные примеры, в том числе консоль, выложены с открытыми исходниками.

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

Пожалуйста, обратите внимание, что эти примеры будут корректно работать только в современных браузерах, которые поддерживают свойства CSS3.

С помощью @font-face вы можете загружать значки (иконки) не в виде PNG или GIF, а внедрить внутрь шрифта и подгрузить пользователю через директиву @font-face. CSS3 позволяет поворачивать такие значки, добавлять тени или даже анимированные эффекты с плавным изменением цвета при наведении курсора мыши (раньше такое было возможно только на Flash).

Вот здесь инструкция по использованию набора шрифтов IconPack (.eot, .woff, .ttf, .svg) и загрузке значков с помощью псевдо-элемента :before и тега span.

<style>  
.staricon {  
  font-family: 'IconPack';  
}  
.staricon:before {  
  content: 'a';  
}  
.show {  
  display:block;  
}  
.hide {  
  display:none;  
}  
</style>  
  
<div class="staricon">  
  <span class="show">star</span>  
</div>

Если вы запускаете новый сайт и заканчиваете его оформление, то есть смысл посмотреть коллекцию Subtle Patterns: отлично оформленную коллекцию фоновых текстур (паттернов) под лицензией Creative Commons Attribution 3.0 Unported. Их можно использовать без ограничений.

Сайт привлекает удобным предварительным просмотром: каждую текстуру можно мгновенно применить на всей странице в качестве фона. Сейчас там 93 работы, коллекция еженедельно пополняется отличными новинками.

Все текстуры на сайте Subtle Patterns являются повторяющимися, то есть склеиваются в бесшовную заливку.

Для демонстрации технологии Chrome Remoting компания Google выпустила расширение Chrome Remote Desktop (бета), которое позволяет осуществлять удалённый доступ к другому компьютеру через браузер Chrome, независимо от операционной системы (Windows, Linux, Mac, Chromebook).



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