Добрый день, Хабр!

На днях компания Samsung анонсировала новое мобильное устройство, которое стало своеобразным продолжением флагмана GALAXY S4 (а точнее — его уменьшенной версии GALAXY S4 Mini), но с уклоном в расширенные возможности фотосъемки. В конце прошлого года Samsung выпустила на рынок самый первый гибрид мобильного девайса и фотокамеры — GALAXY Camera. Она обаладала широкой функциональностью компактной камеры вкупе с возможностями выхода в интернет через Wi-Fi и 3G и интергигованными службами всех популярных соц. сетей. Тем не менее, GALAXY Camera была именно камерой — возможности мобильных коммуникаций были ограничены. GALAXY S4 zoom в полной мере запоняет этот пробел в нише гибридных смартфон-камер.

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

Здравствуй, дорогой хабрадруг!
Сегодня мы поделимся с вами аудио слайдшоу. Используя фреймворк jPlayer, слайдшоу будет показывать изображения и играть музыку, меняя картинки в определенном моменте песни. Ограничений в количестве изображений нет. Кроме того можно использовать тег div или любой другой макет.
Посмотреть демо | Скачать исходные файлы

Изображения взяты с Flickr. Музыка: J-Ralph.

Как правильно нарисовать иконку (размер 32х32, часть I)

Хочу предложить вашему вниманию урок по созданию иконок размером 32х32 в программе Adobe Photoshop. Данный урок позволит научиться рисовать иконки не прилагая много усилий – в итоге вы поймете что рисование иконок для интерфейсов не такая уж и сложная задача, нужно лишь запастись терпением, и знать представление о работе в программе Adobe Photoshop.

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

Уровень подготовки веб-мастера: любой

Теперь наша система поддерживает разметку schema.org для логотипов организаций. Это позволит вам выбрать логотип, который будет представлять ваш сайт в результатах поиска Google.

С помощью этой разметки вы можете указать системе, где находится ваш логотип. Например, если вы – владелец сайта www.example.com, можно использовать следующую разметку элементов на странице:

<div itemscope itemtype="http://schema.org/Organization">
<a itemprop="url" href="http://www.example.com/">Главная</a>
<img itemprop="logo" src="http://www.example.com/logo.png" />
</div>

Вчера прошла конференция MAX, на которой Adobe поведала, что после почти 10-летней истории пакетов Creative Suite решила полностью сосредоточиться на своих облачных приложениях и услугах Creative Cloud. Adobe объявила, что запускает новый «CC» (Creative Cloud) пакет, показав новый Photoshop CC, InDesign CC, Illustrator CC, Dreamweaver CC, Premiere Pro CC, глубокую интеграцию с социальными функциями Behance, настольный доступ к TypeKit и многое другое. Fireworks к сожалению, больше не жилец.

Вы используете CSS — фреймворк?

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

CSS — фреймворк — это заранее подготовленный набор HTML и CSS — файлов. Идея в том, чтобы при создании каждого нового проекта использовать этот готовый набор файлов, в которых для вас уже создан макет, задано шрифтовое оформление и написан весь основной код, общий для большинства сайтов. Я использую собственный CSS — фреймворк, он очень простой, идея взята из книги «CSS ручной работы», применяю его всякий раз, когда приступаю к реализации нового проекта.

Я покажу вам код каждого CSS — файла.

Можно также использовать готовый CSS — фрейворк, например: 960 Grid System или Blueprint. Если вы используете готовый фреймворк, то существует опасность того, что в вашем коде будет много ненужного хлама. Который вы не будете использовать в своем проекте. В любом случае выбор за вами какой фреймворк использовать, я делюсь только своим опытом работы и вариантом который, для меня больше подходит.

Скрипт, — реакция на частые просьбы о подобной разработке на форуме javascript.ru. Появились мысли, что интерес проявится
и у Хаброжителей.

Плагин делался быстро, — заинтересовала идея реализации произвольнной вложенности табов без наращивания скриптов. Большую помощь оказал devote. Позже, по просьбе, были добавлены: cookie-память и установка классов к активным вкладкам.

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

А мы используем внутренние стандарты. Они действительно полезны:
— стандартам совершенно не обязательно следовать;
— они позволяют быстрее и комфортнее осваиваться;
— они помогают меньше теряться при творческом процессе.

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

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

Первым делом начал собирать информацию, ее довольно много, есть правда и устаревшая. Например, Twitter поменял уже ссылку, старая twitter.com/share, а новая twitter.com/intent/tweet, у Google ссылка «www.google.com/buzz/post», уже давно не работает, вместо нее plus.google.com/share. Конечно, это общеизвестные факты, но, похоже, все-таки не все об этом знают и предлагают «шарить» на старые ссылки.

В общем, ознакомившись с темой, решил взять кнопки в первоисточнике:

Скажу сразу, всю DOM-модель мы строить не будем, а лишь рассмотрим ее элементы и как с ними работать при помощи jQuery. Статья рассчитана на начинающих или тех кто хочет вспомнить как можно строить элементы «на лету», надеюсь кому-то это будет полезно.
Большинство веб-разработчиков сталкивается с необходимостью вставить какое-либо содержимое из js, возможно это ajax или событие. Но никто не задумывается о том что с вашим кодом возможно кому-то придется работать. И часто даже в очень известных плагинах можно встретить код такого типа:

var content = "<table>"
for(i=0; i<3; i++){
    content += '<tr><td>' + 'result ' +  i + '</td></tr>';
}
content += "</table>"

$('#table').append(content);

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

День добрый, Хабр!

На прошлой неделе прошла международная выставка потребительской электроники CES 2013 — едва ли не самое громкое событие в году для всех компаний, так или иначе связанных с производством, сборкой и разработкой технологий и ПО для потребительской электроники во всех ее проявлениях: от банальной бытовой техники до горячих инноваций вроде гибких OLED-дисплеев и новейших процессоров для мобильных устройств. Ниже мы собрали все самые интересные новинки, которые Samsung представила за четыре дня выставки, с 8 по 11 января. Некоторые продукты уже выходят в продажу, другим еще только предстоит найти свое место на отечественном рынке. Так или иначе, под катом вас ждет много интересного.

Изначально для основного освещения одной из комнат, где шёл капитальный ремонт, планировалась обычная люстра. Но недавно мне на глаза попалась суперяркая светодиодная лента Ultra 5000 со светодиодами smd 5630 торговой марки Arlight. Решение было принято быстро, окончательно и бесповоротно — хочу такую ленту в качестве основного света в комнате.

Многие из вас наверняка слышали про сервисы, позволяющие делится скриншотами одним нажатием кнопки. Общая концепция следующая: жмёшь хоткей, выделяешь область экрана, в буфер обмена получаешь ссылку на скриншот, который автоматически загружается на какой-то хостинг. Так же многие из вас наверняка пользовались другими сервисами — позволяющими опубликовать фрагмент исходного кода и получить ссылку на страничку, отображающую этот исходник с подсветкой синтаксиса.

Мы объединили две эти идеи и сделали проект, обладающий следующими фичами:

• Публикация скриншотов и исходников по нажатию хоткея
• Open Source — можете форкнуть / поднять на своём сервере / добавить новые фичи
• Прямая ссылка на изображения, отсутствие рекламы
• Кроссплатформенность
• Устойчивость к высоким нагрузкам (хостимся в облаке)

Статья делится на три части:

• Вступление
• Как сделать простейший редактор самому, причем не будет никакой теории, только практика. Предупреждаю, для многих эта часть покажется простой и очевидной, так как текст ориентирован, можно сказать, на себя, в прошлом (нет, я не путешествую во времени :));
• Описание работы очень легкого редактора «Suit Up» (оригинальный объем кода: 5.97KB (1.87KB gzipped), минимизированный: 3.35KB (1.37KB gzipped) на момент написания статьи, не считая спрайта и стилей).

UPD Критика

Вступление

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

Однажды (не помню при каких условиях), мне захотелось или понадобилось разобраться в том, как работают браузерные «рич эдиторы». Моему удивлению не было предела, когда я сам, не имея каких-либо глубоких познаний в веб разработке, сделал две кнопочки: Bold и Italic, что оказалось очень простой задачей. Мне захотелось больше узнать о том, что же делать дальше. Так я познакомился с серией статей «WYSIWYG HTML редактор в браузере» (по ссылке первая статья, советую прочесть). Но информация на тот момент мне показалась несколько сложноватой. Поэтому я решил методом тыка, наступая на уже растоптанные кем-то грабли, написать свой простой редактор.

Сделал я его в виде jQuery плагина, и, думаю, не стоит отвечать «почему». Получилось кое-как заставить работать его в разных браузерах. Тут мне пришла в голову идея написать статью на хабр, после некоторых доработок. Время шло, допиливание я откладывал, откладывал… Два года, черт, целых два года. Но я постараюсь исправиться.

Простейший редактор

Для того, чтоб дать возможность пользователю менять содержимое блока (в данном случае, обычного дива) просто задаём ему (блоку) атрибут contenteditable:

<div contenteditable></div>

Редактор готов!

Всем давно известно, что jQuery легко расширяем. Сегодня мы добавим новый селектор — :regex.

После написания статьи про защиту от инъекций я взялся за написание класса, реализующего изложенные в ней идеи.
А точнее, поскольку ключевой функционал уже использовался в рамках рабочего фремворка, я занялся выделением его в самостоятельный класс. Пользуясь случаем, хочу поблагодарить участников PHPClub-а за помощь в исправлении нескольких критических ошибок и полезные замечания. Ниже я постараюсь описать основные особенности, но сначала небольшой
В двух словах, класс строится вокруг набора функций-хелперов, позволяющих выполнять большинство операций с БД в одну строку, обеспечивая при этом (в отличие от стандартных API) полную защиту от SQL инъекций, реализованную с помощью расширенного набора плейсхолдеров, защищающих любые типы данных, которые могут попадать запрос.
В основу класса положены три базовых принципа:

1. 100% защита от SQL инъекций
2. При этом защита очень удобная в применении, делающая код короче, а не длиннее
3. Универсальность, портабельность и простота освоения

Остановлюсь чуть подробнее на каждом из пунктов.

Давайте представим, что у вас на странице имеются большие картинки, и вы хотите, чтобы пользователь знал, что они загружаются. С помощью JavaScript'а можно внедрить анимированную иконку ко всем изображениям, которые еще не загружены, но мы можем предложить вам более простой и чистый способ.

Шаг 1: Найдите анимированную иконку

Существует много сайтов, где вы можете создать свою картинку для загрузчика. Наш любимый этот. Главное не выбирайте иконку, которая будет очень много весить. Вот такую сгенерировали мы:

Шаг 2: Добавьте CSS-правила

Тут совсем немного кода, и вы можете просто скопировать его. Только не забудьте сменить «youricon.gif» на свою картинку.

.load {
    background: url('images/youricon.gif') no-repeat center;
}

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

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

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

Итак, я подготовил некий список неочевидных моментов, с которыми мне неоднократно приходилось сталкиваться на практике. Начнем:

Установка копирайта и публикация в портфолио

Очень часто при общении с заказчиком при запуске нового проекта конфликтным моментом становится размещение «марки» студии на сайте («Сделано в XXX » и пр.). Если данный момент никак не обозначен в договоре, то убедить заказчика прислушаться к вашим доводам бывает сложно. Часто проблемы возникают в самый последний момент, даже если изначально лейбл присутствовал и на макетах, и на тестовой зоне: «Ой, а мы не думали, что так и пойдет на основную версию сайта». Итак, что рекомендуется сделать: