О профессиональном и не только - Александр Михайленко IAMLAB Голосов: 0 Адрес блога: http://iamlab.blogspot.com/ Добавлен: 2014-02-25 00:53:44

SoundCloud, или эта музыка будет вечной

2014-02-08 19:48:00 (читать в оригинале)

---

В память о Idle Worship

2013-06-09 20:39:00 (читать в оригинале)

---

Эскперементируйте и улыбайтесь!

2013-04-23 20:34:00 (читать в оригинале)


Всем привет! Сегодня немного развлечений под конец отличного дня!

Заходим по ссылке webcamtoy.com/ru/app/ и просто, доверившись как дантисту, даем доступ к камере...

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

Эскперементируйте и улыбайтесь!

Всем добра и любви!
С вами я - Александр М.

P.S. режим - ЛСД )))

---

Эта музыка будет вечной если я...

2013-04-10 22:11:00 (читать в оригинале)


Здравствуйте друзья!
Сегодня мы поговорим о музыке. Музыке, роль которой в нашей жизни, просто неописуема. Наверное только когда мы спим ее не слышим, а может мы просто не знаем об этом. )

И так! Есть несколько друзей, все они сидят дома и им нечего делать, но вот каким то чудом Google понимает это и предлагает нам поучаствовать в своем эксперименте - JAM WITH CHROME.

Предлагаю сразу ставить себе этот браузер (если его еще нет), а параллельно продолжать читать статью.

1. Все просто выбираем инструмент.
На выбор у вас несколько типов гитар, барабанных установок и драм машин, клавишные от классики до синтезаторов. Например выбираем фортепиано.

Проходим маленькое обучение по управлению - все проще простого. Мы готовы!

2. "Приглашаем друга" - у нас +1 музыкант. Технологии этого продукта позволяют совместную игру командой до 4 человек  в реальном времени!
Быстро "кидаем" ссылку на приглашение через Google+, Facebook, Twitter.
Команда в сборе!

3. Поддерживаем связь с друзьями с помощью встроенного чата. (старый добрый skype тоже подойдет).

Все! Наше новое место для репетиций готово! Начинается джээээм!

Вооружаемся Google Crome браузером и начинаем свой эксперимент друзья!

Место репетиции:
http://www.jamwithchrome.com

Технологии:
http://www.jamwithchrome.com/technology?lang=ru

Всем удачи и отличного настроения!
Ваш Александр М.

---

Начинающим о responsive и @media

2013-03-31 22:19:00 (читать в оригинале)



Привет друзья! Сегодня технический мини "туториал" для начинающих веб-разработчиков.
И снова bootstrap нам куда? Правильно! В помощь! ) но не о нем пойдет речь в этой статье.

Если конкретнее, то совместим несколько полезных техник - теги и разметка HTML5, используем прелести css3 и responsive дизайна, столь актуального в наше время, и конечно же медиа типы.

Для начала вам достаточно создать страницу следующего содержания и приложить рядом с ней фреймворк - Bootstrap


Небольшое теоретическое отступление пока мы плавно переходим к таблице стилей.
Стили могут относиться к различным типам медиа. Например, можно создать отдельный стиль для страницы, которая будет просматриваться в браузере, и другой стиль для печати страницы.
Аналогичным образом мы будем определять тип медиа-устройства по размеру экрана (@media (min-width: 960px) and (max-width: 1199px) ) и переопределять специфичные css свойства для нужного блока или любого объекта на нашей странице.



А теперь перейдем к перечню стилей описанных в - style.css:

#info{
width: 830px;
font-family: Tahoma;
font-size: 26px;
margin:0px auto; /* - помним о центрировании блока  */
text-align:center;
}
#foot{
width: 480px;
text-align:center;
margin:0px auto;
}
#logo{
margin:0px auto;
}
@media (min-width: 1200px) { 
#logo{
width: 545px;
}
#foot{
width: 480px;
}
}
@media (min-width: 960px) and (max-width: 1199px) { 
#logo{
width: 545px;
}
#book{
width: 960px;
}
#foot{
width: 480px;
}
}
@media (min-width: 768px) and (max-width: 959px) { 
#logo{
width: 445px;
}
#foot{
width: 480px;
}
}

@media (min-width: 541px) and (max-width: 767px) { 
#logo{
width: 345px;
}
#foot{
width: 480px;
}
 }
 @media (min-width: 400px) and (max-width: 540px) { 
#logo{
width: 345px;
}
#foot{
width: 400px;
}
}
@media (min-width: 241px) and (max-width: 399px) { 
#logo{
width: 200px;
}
#foot{
width: 241px;
}
}
@media (min-width: 0px) and (max-width: 240px) { 
#logo{
width: 140px;
}

#foot{
width: 170px;
}
}

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

Максимально протестировать и проверить качество своей работы можно на - quirktools.com

Всем удачи! С вами ваш, Александр М.