Google Doodles или креативные логотипы Гугла

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

21 мая  2010. PAC-MAN’s 30th Anniversary Doodle

Настоящая игра ПакМан вместо логотипа! Картинка кликабельная

4 сентября 2010. 25th Anniversary of Buckyball

25 годовщина Бакминстерфуллерена, особой формы углерода, открытая Ричардом Бакминстером. Мяч можно вращать. Картинка кликабельная

08 февраля 2011. 183 годовщина Жюля Верна

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

11 февраля 2011. день рождения Томаса Эдиссона

Практически все знают это имя. Великий физик, подаривший нам лампочку  и не только. Картинка не кликабельная.

31 марта 2011. 200 годовщина Роберта Бансена

Роберт Бансен это знаменитый немецкий химик. К его юбилею Гугл приготовил красивую анимацию. Картинка кликабельная

12 апреля 2011. Памяти первому человеку, полетевшему в космос

Все в мире помнят подвиг Гагарина. Вот и Гугл решил сделать мини интерактивное лого к юбилею с того дня. Картинка кликабельная

16 апреля  2011. К 122-му дню рождения Чарли Чаплина

Небольшой ролик снятый в стиле Чарли Чаплина красовался в его день рождения вместо логотипа. Картинка кликабельная.

11 мая 2011. День рождения Марты Грэхем

Знаменитая американская танцовщица тоже удостоилась внимания разработчиков Гугл. И Райан Вудварт создал прекрасную анимацию! Картинка кликабельная

09 июня 2011. День рождения Леса Пола

Странно было бы, если бы Гугл не сдали чего-нибудь с помощью HTML5! На этой гитаре можно играть с помощью клавиатуры и мыши. На ютубе уже немало творений с участием этой гитары. У меня уже была статья о ней. Картинка кликабельная.

05 сентября 2011. День рождения Фредди Меркури

К дню рождения Фредди, Гуглодевелоперы смастерили миниролик вместо логотипа, но на этот раз он был без участия видеохостинга Youtube.

24 сентября 2011. День рождения Джима Хенсона

Джим — создатель маппет-шоу, основными участниками которого были куклы из улицы сезам. У каждой из кукл 16 анимаций + 3 секретные.

23 ноября 2011. Дудл посвященный 60-летию со дня первой публикации Станислава Лема

И опять на сцену выступает CANVAS. Небольшая игра по мотивам рассказов великого писателя.

24 ноября 2011. День благодарения

 

Небольшой дудл посвященный дню благодарения. Был доступен только для жителей США.

По мере добавления новых интересных логотипов я буду обновлять статью. Если Вам понравился материал, делитесь им с друзьями, не жадничайте! =)

Google+ [инвайты, обзор]

Давно уже хотел написать эту статью, все из-за работы времени не было. Большая плезность статьи наверное будет именно в инвайтах, чем в обзоре, но все же.

Обзор

1. Home

Как Вы видите, ничего особо отличающего от привычных нам социальных сетей тут не имеется. Все таже новостная лента. Все те же аватарки, комментарии, чаты и «лайки», которые у Гугла называются «+1».

Добавление сообщения во многом работает по тому же принципу и что в Buzz — набираете сообщение, вставляете видеокартинкиссылки, которые автоматически оформляются ввиде аннотации с превьюшками, устанавливаете кто видит данное сообщение. Это может быть как человек из вне, так и участник(и) G+, может быть круг(и) или расширенные круги — тогда сообщение увидят как ваши друзья, так и друзья друзей, можно сделать сообщение и общедоступным.

2. Images

Вторая страница — обзор доступных изображений. Тут и ваши альбомы из Picasa, и добавленные вами изображения (при заливке через G+ изображение попадает в Picasa, либо в альбом «Фотографии из сообщений», либо в тот который вы укажите). Отдельными пунктами идут изображения из ваших кругов и изображения добавленные напрямую с телефона — видимо для оперативных репортажей с места событий (и никаких ограничений в 140 символов!). Само собой есть и пунктик где можно посмотреть все фотографии на которых вас отметили.

Довольно удобный сервис. И все очень шустро работает.

3. Profile

Страница профиля мало чем отличается от старой страницы, которая ранее располагалась по адресу вида google.com/profiles/username (сейчас с этой страницы стразу идет редирект на plus). Судя по тому что старую страницу уже не используют, а также тот факт что настройки профиля переместили в настройки Plus (старые настройки остались по адресу вида www.google.com/accounts/b/0/ManageAccount?nroma=1), Google всерьез решил избавиться от старья, и сделать Plus не только соц.сетью, но и местом сосредоточения большинства своих сервисов.

Выглядит все мило и пока нет ничего лишнего. Несколько вкладок полностью охватывают Ваш профиль. Особенно привлекает вкладочка «Все +1», где отображаются все нажатия на кнопочку «+1».

4. Circles

Ну собственно, то о чем Гугл и твердили уже  в течении полугода!

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

5. Темы

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

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

6. Приватность

Настройки приватности позволяют контролировать кому какая информация будет доступна — кто сможет увидеть все ваши контактные данные, а кто только рабочий телефон. Общая страница настроек приватности располагается по адресу plus.google.com/settings/privacy — там можно посмотреть и на то как будет выглядеть ваша общедоступная информация в поисковой выдаче, и определить параметры доступа. Вне зависимости от того кто может просматривать конкретный блок информации — пользователи все равно не узнают в какой круг вы их поместили, но свободно смогут обменяться комментариями к записи которую могут прочитать. Иначе говоря можно создать круг «любовницы», который никогда не пересечется с кругом «семья» 😉

Доступность информации из профиля определяется непосредственно при заполнение профиля (если не ошибаюсь так было и раньше).

А вообще настройки аккаунта доступны здесь.

Итог

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

Основой Г+ будет шаринг. Вы читаете статью в интернете и она Вам понравилась. Вы нажмете «+1»  и в последующем, Ваши друзья увидят ссылку на статью в своей ленте и эта статья по своим поисковым запросам будет у Ваших друзей выше в поиске. Это замечательная идея, которая уже давным давно должна была быть реализована! Поиск становится все более индивидуальным.

Также имеются у сервиса видеоконференции. Пока не протестировал. Ну и я надеюсь, что они не подведут и будут шлифовать сервис в лучшем направлении. Пока он оставил у меня только приятные впечатления. Как бы убогий контактик не умер под дальнейшими нововведениями Гугла. =)

Фото на память с интернет друзьями! (v1.2)

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

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

Большая просьба, вместо спасибо, оставляйте комментарии, подписывайтесь на обновления и рассказывайте друзьям по социальным кнопкам в конце статьи.

История версий:

(1.0) 16 июня 2011

  • Возможность запустить скрипт только один раз
  • Выдача общего коллажа из фотографий 50*50

(1.15) 18 июня 2011

  • Фотография собственника 100*100 в заглавии страницы
  • Возможность повторного запуска скрипта
  • Статистика в конце страницы
  • Рандомный порядок вывода друзей
  • Исправлена ошибка пустого места (глюк ВКонтакте)

(1.2) 23 июня 2011

  • Оптимизирован код, теперь все работает быстрее
  • Новое оформление фотографии!

Новая игрушка от Гугла!

Ну что тут говорить, смотрите сами! Картинка кликабельная!

Хинт: играть можно на клавиатуре (сначала нажмите на значок клавиатуры):

1 — соль
2 — ля
3 — си
4 — до
5 — ре
6 — ми
7 — фа диез
8 — соль
9 — ля (второй октавы)
0 — си

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

Вот парочка примеров: 36876,8676,453 и 48,48,57,57,69,69,60,60

UPD: для тез, кому интересно, тут собрана коллекция различных плюшек от гугла за все времена: http://www.google.com/logos/index.html (завтра наверняка придется обновить ссылочку на гитар…)

HTML 5 [3 подборка]

HTML5 все больше и больше захватывает зарубежный рынок. Очень многие веб студии за немалые деньги переводят сайты в модные CSS3 и HTML5. Российские верстальщики завидно усмехнулись, а остальные просто доверчиво кивнули, ну и ладно. Против великой и могучей Mozilla выступает Chrome со своим проектом Experiments, где каждый мало мальский программист может сабмитить свое HTML5 творение, только вот все творения содержат нашумевший canvas тег…

Для тех, кто с «Камчатки», напомню, что этот тег позволяет рисовать растровую графику при помощи JS. Уже даже есть немалое количество фреймворков и плагинов под знаменитые фреймворки. У меня есть отдельная ветка обучения тонкому мастерству программирования на JS и canvas. Скоро кстати уже будет новый урок. А пока наслаждайтесь чудесами HTML5!

Google I/O Conference: HTML5 Countdown Finale

У Гугла сейчас проходит конференция (10-11 мая), это очень интересный обратный отсчет до начала написанный на HTML5.

Arena5

Игра, управление ASDW+мышь. Вполне можно поубивать время!

Coil

Еще одна игра. Вам необходимо в ласо поймать синие шарики.

BallDroppings

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

Ball Pool

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


Подписывайтесь и рассказывайте друзьям! Скоро новая убойная подборка креативных идей HTML5!

Предыдущие подборки:

Создание магической книги Photoshop

Этот туториал покажет, как создать очень крутую магическую сценку на раскрытой книге. Мы будем использовать различные продвинутые технологии Photoshop, чтобы конечный результат  был как можно реалистичнее.

Предварительный просмотр финального изображения

Создайте новый документ размером 1200 × 600 пикселей. Скачайте антикварный стол в старом гранж интерьере. Измените размер изображения и положение, как показано ниже.

Мне необходима более гладкая стена, так что я совершенно случайно наткнулся на красивую текстуру из Krakograff’s Gallery. Измените размер текстуры и замостите ее горизонтально, чтобы закрыть оригинальную стену. Используйте инструмент Eraser, чтобы выделить круглый стол.

Скачайте «Открытую книгу» из ShutterStock. Измените размер книги и поместите ее в центр документа. Вырежьте книгу из белового фона используя один из методов выделения. Я использую маску.

Создайте новый слой ниже книги. Переименуйте его как «Тень от книги». С помощью инструмента кисть черного цвета, мягкого типа, круглую размером 35pt, нарисуйте тень вдоль нижней части книги.

Создайте новый слой выше всех остальных. Переименуйте новый слой в «Градиент». Выберите инструмент Градиент, чтобы сделать вертикальный градиент с верхним цветом # f19025 и нижним цветом #000000.

Затем установите режим наложения слоя «Градиент» на Soft Light (мягкий цвет). То что Вы создали, теперь может Вас порадовать. Смотрится довольно мило.

Создайте новый слой выше всех остальных. Переименуйте новый слой в  «черная рамка». Заполните все пространство черным цветом в этом слое.

Выберите инструмент Eraser с мягкого типа, круглый и 700pt размера, щелкните один или два раза в центре документа, чтобы раскрыть книгу.

Создайте новый слой корректирующий уровни выше всех других слоев. Установите значения на 9, 0,60, 255.

Скачайте пейзаж с ShutterStock. Измените размер изображения так, чтобы оно покрывало только левую часть книги. Назовите этот слой, как «трава».

Сделайте маску слоя «трава». Используйте кисть с черным (скрыть) и белым (отобразить) цветами, чтобы осталась только трава. Щелкните правой кнопкой мыши на слой травы и выберите Blending Options (опции наложения). Выберите «Тень», установите ее угол до 35, Расстояние до 3, размер 1, а остальное оставить по умолчанию.

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

Скачайте «бассейн» из ShutterStock . Разместите и измените размер изображения, как показано ниже. Установите непрозрачность этого слоя на 80%.

Используя инструмент Eraser, удалите и оставьте только часть на покрытие верхней части маленькой реки.

Повторите то же самое для фронтальной части реки.

Выберите верхний слой, перейдите к Image> Adjustment> Brightness / Contrast. Установить яркость до 40 и нажмите ОК.

Измените порядок, все слои с травой поместите под слоем «черная рамка». Создайте новый слой и назовите его как «свечение». С помощью инструмента Кисть, цвет белый, мягкий круглый и размер 500pt, нарисуйте большую точку в ​​центре документа. Установите режим наложения этого слоя Soft Light.

Скачайте  «Голубое небо» изShutterStock . Расположите и измените размер изображения в документе, как показано ниже. Установите режим наложения слоя на Screen и непрозрачность на 80%.

Используйте ластик с большим размером, чтобы удалить некоторые части облака.

Создайте новый слой и назовите его «Lens Flare». Залейте слой черным цветом. Перейти в Filter> Render> блики. Выберите 50-300mm Увеличьте и установите яркость до 100%.

Поверните слой «Lens Flare» немного и расположите его в центре документа.

Установите режим наложения слоя «Lens Flare» на Screen. Дублируйте этот слой, чтобы сделать эффект ярче.

Скачайте «Коллекция деревьев» из ShutterStock . Вырежте одно из деревьев из фона и поместите его на левую сторону книги. Используйте инструмент Dodge, чтобы сделать ярче правую часть дерева, что стоит перед «Lens Flare» и используйте инструмент Burn, чтобы затемнить противоположную сторону.

Дублируйте дерево и перейдите к Image> Adjustment> Hue / Saturation. Установить легкость до -100. Перейти в Edit> Transform> Flip Vertical.

Перейдите в Edit> Transform> Skew и сместите нижнюю часть дублированного дерева влево. Перейдите в Filter> Blur> Gaussian Blur и установите радиус в 2px.

Повторите процесс еще для несколько деревьев и скал. Обратите внимание, что тени должны исходить от вспышки по центру.

Скачайте «водопад» из ShutterStock . Расположите и измените размер изображения, как показано на рисунке. Переименуйте слой, как «водопад». Перейдите к каналам панели и нажмите Ctrl + левой кнопкой мыши на синий канал, чтобы загрузить выделение. Вернитесь к панели «Слои», и выберите Select> Inverse, чтобы инвертировать выделение. Нажмите Удалить.

Создайте маску слоя  и скройте ненужные части водопада.

Дублируйте слой «водопад» и установите режим наложения дубликата на  Screen. Теперь у нас есть основная среда, все готово. Давайте добавим еще несколько предметов в рисунок!

Я добавил несколько детей, играющих с воздушными шарами и рыбака на правой стороне.

Затем еще несколько воздушных змеев на другой стороне.

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

Перевод: Спартак

Источник: 10steps.sg

Скидывайте в комментарии, что у Вас получилось!

Креативные ошибки 404

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

Главное требование к этой страничке — это малый вес! А все потому что эта страничка часто ест не мало трафика, поэтому нужно ее минимизировать. Остальные требования я также опишу в следующих статьях. А пока я выложу очень интересные идеи, которые придумали дизайнеры с разных концов мира. Также в конце бонус, страничка 404 моей Веб-студии =)


HTML 5 [2 подборка]

Для тех, кто не в курсе, HTML5 это новая версия разметки, включающая в себя огромное количество новых возможностей, большую часть которой уже поддерживают современные браузеры!

С HTML5 можно творить чудеса! К примеру новая разметка поддерживает тэг <canvas>, который позволяет творить графику с помощью JavaScript. Вскоре я размещу пару уроков, как это можно сделать.

Ну а теперь небольшая подборочка красивых сайтов с HTML5. Советую Вам обновить Ваш браузер иначе Вы пропустите чудо!


Canvas Cycle

Еще одно приложение от разработчиков Google. Шикарные 8-битные сценки. Обязательно просмотрите все! Можно регулировать скорость и размер.

GraphyCalc

3D графический калькулятор! График можно вращать вокруг своей оси. Поэкспериментируйте.

Google Maps + Dynamic Canvas

Шикарный пример canvas! Все дело в API, которое предоставляет GoogleMaps. Вы с легкостью можете добавлять на него что угодно при помощи нового тега. В данном примере на карту Лондона нанесены все точки, где можно взять на прокат велосипеды. Точки нанесены с помощью API предоставляемым прокатчиком велосипедов.

Darkroom

Минифотошоп. Берем картинку откуда угодно из вэба и делаем с ней ,все что хотим.

20 Things

Шикарный пример мощи HTML5! Книжка под названием «20 вещей, которые я узнал о браузерах и сети». Создатели опять же ребята из Google. Великолепная анимация и типографика.

Agent 8-Ball

Бильярд на HTML5. Затягивает, так что будьте осторожны!

Ну и всем известная корпорация Apple, тоже, относительно недавно запустила версию своего сайта в HTML5.


HTML 5 [1 подборка]

Для тех, кто не в курсе, HTML5 это новая версия разметки, включающая в себя огромное количество новых возможностей, большую часть которой уже поддерживают современные браузеры!

Цитата из википедии:

HTML5 (англ. HyperText Markup Language, version 5) — пятая версия языка разметки HTML. Версия языка, полностью соответствующая стандарту XML, называется XHTML5.

Многие идеи HTML5 были изначально предложены WHATWG в стандарте Web Applications 1.0. HTML 5 включает другой стандарт WHATWG, Web Forms 2.0. Разработка HTML5 началась в новой рабочей группе W3C в 2007 году.

Первый черновик спецификации стал доступен широкой общественности 22 января 2008. Спецификация сейчас находится в разработке и может находиться в этой стадии ещё несколько лет, хотя предполагается, что отдельные части HTML 5 будут закончены и реализованы в браузерах до того, как спецификация официально получит статус рекомендации.

С HTML5 можно творить чудеса! К примеру новая разметка поддерживает тэг <canvas>, который позволяет творить графику с помощью JavaScript. Вскоре я размещу пару уроков, как это можно сделать.

Ну а теперь небольшая подборочка красивых сайтов с HTML5. Советую Вам обновить Ваш браузер иначе Вы пропустите чудо!


The Wilderness Downtown by Google & The Arcade Fire

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

The Wilderness Downtown

Jolicloud

Мини оперативная система прямо в браузере! Рабочий стол с собственными программками. Неплохая замена закладок любимых сайтов. Необходима регистрация.

Wordmark.it

Для тех, кто в курсе, у старых версий html нельзя было добавить собственных шрифтов. Что же, теперь можно! Этот сайт загружает шрифты с Вашего компьютера и показывает свой домен во всех ваших шрифтах.

Wordmark.it

Z-Type

Очень красиво сделанная игрушка! Необходимо набирать на клавиатуре слова, написанные рядом с выпадающими штуками! Игрушка также была запущена разработчиками Гугла.

Ztype game

Nike Better World

Nike это эталон дизайна уже оооочень оооооооооочень долгое время! Безумно красивый сайт!  И обязательно посмотрите ролик!

Nike Better World

Klowdz

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

Klowdz


 

Pop Web Design (из-за бугра)

Небольшая подборка зарубежных сайтов с интересным дизайном. Эта подборочка может помочь тем, кто нуждается в вдохновении или просто хочет посмотреть на ВЕБ-искусство! Интересно, а скоро будут открывать галереи веб-искусства? Вопрос риторический, но все же современное общество иногда охает от красиво выполненного сайта погромче, чем от картин Васнецова.