Введение в jQuery Mobile

Мобильная стратегия jQuery может быть легко объяснена — это внедрение пользовательского JavaScript в наиболее часто используемые браузеры на мобильных платформах.
Основной ценностью нашего подхода является широкий спектр платформ, поддерживаемых jQuery Mobile. Мы прилагаем все усилия, что бы jQuery поддерживал все мобильные браузеры, по крайней мере занимающие номинальную долю рынка.
Что бы обеспечить широкую поддержку, все страницы в jQuery Mobile построены на чистом HTML, это обеспечивает совместимость с довольно многими web-ориентированными устройствами. В устройствах, которые интерпретируют CSS и JavaScript, jQuery Mobile применяет прогрессивные методы, что бы ненавязчиво преобразовать семантические страницы используя богатый интерактивный опыт и мощь Query и CSS. Стандарты доступности активных интернет-приложений, таких как WAI-ARIA тесно интегрированы во всей структуре для оказания поддержки для чтения с экрана.

В апреле этого года во время презентации новой операционной системы iOS 4 (бывшая iPhone OS) Стив Джобс также представил и новую платформу компании Apple для мобильной рекламы – iAd. По заверению Apple, их главная задача — дать возможность заработать разработчикам бесплатных и недорогих приложений за счет размещения в последних рекламных баннеров. Оплата будет идти как за показ рекламного баннера, так и за клики по нему. Во втором случае оплата будет существенно выше.

Основная идея iAd – соединение интерактивности, которую дает использование смартфона или планшета, с эмоциональностью рекламного объявления, в котором задействованы и аудио, и видео. Для этих целей при создании рекламы используются Java Script, HTML5, CSS3 и мультитач. Все это позволяет создавать интересные и привлекающие внимание рекламные ролики-приложения. Примеры таких реклам мы могли видеть на презентации новой операционной системы (на английском языке).

Основной проблемой мобильной рекламы сегодня, по мнению Apple, является то, что кликая по рекламному баннеру, пользователь покидает приложение – переходя, чаще всего, на сайт рекламодателя. С помощью iAd мы можем обойти эту неприятность. После клика по баннеру рекламное объявление появляется поверх вашего приложения. Пользователь может в любой момент закрыть его и вернуться в ваше приложение точно в тот момент, в котором он его покинул.

На основе iAd Programming Guide и видео с WWDC 2010 я набросал краткий обзор-перевод этой новой технологии. Речь пойдет не о создании самих красочных рекламок, а именно о размещении таковых в ваших приложениях.

Для одного нашего проекта понадобилось подсвечивать области на картинке.
Было решено делать на jQuery. Из всего этого вышел Masker.



Страничка плагина и описание

Проверялось в: IE 7-8, FF 3.6, Safari 5, Chrome 5

На сайте студии Лебедева в разделе "Наш портрет" есть лупа. Очень удобная штука — всегда можно приблизить и посмотреть на кого-нибудь поближе. И всем бы она хороша, да только дергается в IE со страшной силой. Видимо, автор подошел к решению задачи без огонька. Лебедевская лупа сделана на Canvas (для Опер, Сафарь и Фаерфоксов) и VML (для IE).

И тут у меня возник резонный вопрос: А можно ли всю эту красоту сделать исключительно средствами HTML4 — без всяких новомодных наворотов (сам же я, кстати, являюсь большим поклонником новомодных наворотов)?
 

Как часто вы пользуетесь опциями некоторых программ (iTerm 2, Total Finder, Adium), которые позволяют показать окно приложения по нажатию на глобальный хоткей и скрыть это приложение при потере фокуса? Лично я — постоянно. А что если некая программа не имеет такого функционала и постоянно маячит перед глазами? Тот же Skype, например. Под катом вариант приведения своего рабочего пространства в порядок.

Исторически сложилось, что на моем MacBookPro Mid 2010 одновременно стояли три оси: Mountain Lion (10.8.3), Lion (10.7) и Snow Leopard (10.6). Все было бы хорошо, если для MacOS существовали бы 3ds Max и утилитка для создания всевозможных текстур The Compressonator, а старый верный ноутбук Toshiba, который спасал меня в такие ситуации, не ушел на пенсию по состоянию материнской платы. Нужно было создавать раздел Boot Camp, да так, чтобы не полетели остальные системы.

Уважаемые Хабравчане! Хотел поделиться с Вами статьей своего сотрудника. Думаю, она будет полезной.

Hello world! Меня зовут Слава, я работаю верстальщиком в агентстве Coalla. Эта статья не о разжигании холивара и рассуждения о том, какой браузер лучше, как бы всем легко жилось без Internet Explorer’a, а мой недавний полезный опыт по установке всех необходимых браузеров и их версий на одну операционную систему, а именно на Microsoft Windows 7 Ultimate x64.

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

qTip

qTip — это бесплатный плагин для jQuery для создания подсказок (tooltip). Данный плагин кроссбраузерный, имеет обширные возможности к настройке и содержит множество функций, таких как: закругленные углы без применения изображений, speech bubbles (изображение речи как в комиксах), а так же эффекты — fade (постепенное исчезновение изображения), slide и возможность создания собственных эффектов. Данный плагин уже включает пять готовых тем, но можно создавать свои темы без особых усилий. Кроме того можно создавать окна диалогов, изменять цвет фона подсказки и места, где она отображается.

Скачать | Демо

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

Нечего нового в этом эфире не говорится. Те кто хоть немного читал про Mac будет не интересно.
Но мне, как человеку не когда не интересовавшемуся Mac, было забавно послушать.

Закругленные уголки опять волнуют хабравчан, за последние 24 часа наблюдал 2 интересных топика с различными способа закругления этих самых уголков. Решил показать то, чем пользуюсь сам.
Сразу хочу оговориться, что я не претендую на уникальность данного способа, но додумался до него сам.

Begin

На хабре наверно уже миллион статей про колонки одинаковой высоты. Вы спросите зачем нам нужна еще одна статья в 1001й раз?

Вот в чем затык

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

.column {
  padding-bottom: 32750px;
  margin-bottom: -32750px;
}

* This source code was highlighted with Source Code Highlighter.

для колонок, которые должны быть одинаковой высоты,
и помещаем эти колонки во враппер с overflow: hidden.

НО! При этом нельзя задать нижнюю границу для колонок!

Решение

Все очень просто, надо обернуть враппер еще раз и внешнему указать

#container {
  background:transparent url(images/example-6.gif) no-repeat scroll center bottom;
  float:left;
  padding-bottom:1px;
}

* This source code was highlighted with Source Code Highlighter.

Мы просто указали фоновую картинку для внешнего враппера, на которой изображены границы :). Мне в текущем проекте очень помогло. Если есть еще варианты без js буду рад узнать их. Ну я думаю вам станет понятней, если посмотреть на пример: www.ejeliot.com/samples/equal-height-columns/example-6.html

Материал нашел здесь: www.ejeliot.com/blog/61

Друзья подкинули мне идею перевести книгу о заработке на Google Adsense “What google never told you about making money with Adsense” by Joel Komm (7МБ).

Оригинал занимает около 200 страниц.
Перевод занимает раз в 7 меньше, поэтому читается легко, в нем много картинок (почти все картинки сохранены).

Часть 1.
Что такое Google Adsense, как приступить к работе и выбрать объявления, настройка внешнего вида объявлений и страниц. Это не главы из Adsense Help, а скорее хитрости, о которых сам Google не сообщает.

Часть 2
Часть 3
Часть 4
Часть 5

Я постаралась выкинуть из перевода все устаревшие ссылки, устаревшую информацию и т.п.

В процессе перевода рейтинг кликов на моем сайте поднялся с <1% до около 3% (между делом), и думаю, что возможно дальнейшее повышение.

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

Update:
Перевод в одном файле (PDF, 4MB)

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

Что вы узнаете?

Алгоритмы поиска. Что представляет из себя индексация, инвертированный индекс. Математические модели, используемые современными поисковыми системами.

В javascript есть замечательный объект Range, который входит в стандарт DOM, определённый консорциумом всемирной паутины. В IE7 обещали включить поддержку Range, но это так и осталось на словах. Имеющийся в IE (и только в IE) объект TextRange не выдерживает никакой критики и не для чего серьёзного не пригоден (можно целую статью написать про маразм данного объекта).

Передо мной стояла задача написать WYSIWYG редактор генерирующий абсолютно валидный и абсолютно не избыточный html. Без Range было не обойтись. Из готового в инете нашёл только не рабочий скрипт некоего Jorgen Horstink, поэтому Range for IE пришлось писать с нуля.

По работе мне часто приходится работать с компьютерами, которые находятся в домене, отличном от домена моей рабочей машины.
Такое часто случается, когда нужно подключиться с домашней или рабочей машины к TFS, VSS, расшаренной папке или подобному сервису, находящемуся в другой корпоративной сети, например сети клиента.

Каждый, кто сталкивался с подобной задачей, знает — приходится постоянно вводить логин/пароль, при каждой установке соединения, на каждый отдельно взятый сервис.

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

Я люблю дизайнеров, которые рисуют «невозможные» сайты. Это не даёт закиснуть, заставляет искать новые решения вёрстки. Одним из таких решений стало применение «резинового неповторяющегося фона».
Решение основано на взаимосвязи вертикальной и горизонтальной координаты у изображения. Говоря иными словами, если у картинки указать только высоту, то ширина изменится согласно исходным пропорциям.
Суть идеи в том, что небольшое по размеру (и по объёму) фоновое изображение вставляется не через таблицу стилей в body, а непосредственно через тег img на странице сайта.

HTML:
<img src="url" class="body-img" alt="" title="" />

CSS:
.body-img{
position: absolute;
top: 0;
left: 0;
z-index: -1;
width: 100%;
}


Наглядная реализация метода: http://marow.ru/site/sadik/40/

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

Минус же в том, что этот способ не соответствует соображениям семантичности и разделения структуры от содержания.
Также утрачивается возможность указать значения margin и padding у тега body. Иначе картинка будет растягиваться не на весь экран.

О главном.

В ie6 при наведении на фон, созданный таким способом, появляется окно ImageToolbar, которое портит всё впечатление от содеянного. Благо, что сие решается довольно безболезненно. Достаточно установить в «голову» сайта мета-тег, который запрещает появление ImageToolbar на всей площади страницы:

<meta http-equiv="imagetoolbar" content="no" />

Кроме применения в качестве фонового изображения эффект зависимости высоты и ширины можно применить при необходимости создания блока высота которого будет меняться в зависимости от его ширины (например при масштабировании страницы). Достаточно просто поместить внутрь этого блока прозрачное изображение с заданными пропорциями.
Пример.

У вас несколько аккаунтов на каком-либо сайте? Или все члены семьи пользуются одним компьютером для сёрфинга по сети и вы хотите, чтобы закладки и настройки сохранялись для каждого в отдельности? Или установленные дополнения, которые вы используете для web-разработки, занимают пол-экрана и не нужны в нерабочее время?

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

Вот например у меня два профиля.

В одном все настроено для разработки сайтов (стоит Web Developer Toolbar, Firebug, Live HTTP Headers, разные тулбары, кнопки быстрого доступа к нужным сайтам и пр.)

А во втором все настроено для удобного и приятного сёрфинга в свободное от работы время (минималистичная тема, удобные закладки, и, самое главное, — ничего лишнего) и второй Google-аккаунт, который тоже нужен, но используется не так часто, как основной.