От переводчика.
Это перевод статьи Филипа Бернарда с сайта css-tricks.com. Часть статьи, содержащую описание работы с созданным им сервисом, я позволил себе опустить. Если вы найдете ошибки, просьба сообщить о них в личном сообщении.

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

Фавикон был представлен в 1999 году, в Internet Explorer 5 (источник) и стандартизирован W3C несколько месяцев спустя. Это была маленькая иконка, представляющая сайт.



С тех пор большинство настольных браузеров следуют тенденции и используют фавикон тем или иным способом. Это очень просто, не так ли? Создать маленькую картинку и добавить в любой интернет-проект, чтобы сделать его «завершённым». Ничего сложного.

Вот недавно тут был неплохой обзор эмуляторов мобильных девайсов habrahabr.ru/blogs/webdev/96453. Но в этом посте упоминался всего навсего один эмулятор для тестирования web приложений под Iphone на Windows. Я хотел бы добавить еще один — MobiOne, который я для себя отметил, как очень хороший. Одна из основных проблем эмулятора который был предложен в выше упомянутом посте — это то что в нем не работают touch events. Допустим в моем случае мне нужно было тестировать Drag and drop функционал, но так как для реализации данного функционала в Iphone используются touch events, то тестирование с помощью предложенного эмулятора невозможно, так как mouse events работают по другому на Iphone/Ipad, а вот MobiOne позволяет такие вещи тестировать.

Привет, Хабр!
Аккурат к инициативе поддержки стартапов, озвученной deniskin, мы в ФРИИ продолжаем знакомить сообщество с темой бизнес-инкубаторов и акселераторов. В прошлой статье мы детально разобрали, в чём различие между бизнес-инкубаторами и акселераторами. Сегодня — расскажем о том, куда же, собственно, идти.

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

Что же, и возьмём мы SVG. Почему? Да потому что с ним легко работать человеку, знакомому с HTML. SVG — это векторный формат, основанный на XML. То есть у SVG-рисунка есть своя DOM, к различным элементам можно применять CSS-правила и управлять старым добрым JavaScript'ом.

Что же, начнём?

На презентации Adobe CS6 в Самаре я делал доклад о том как мы в компании Parcsis используем Adobe Illustrator для создания веб- и мобильных интерфейсов. Хочу поделиться этим докладом с вами в виде слайдов с комментариями.



Когда показываешь свои работы, зачастую начинающие дизайнеры задают вопрос «А в чем это нарисовано?» Опытные дизайнеры спрашивают такое реже, так как понимают, что одно и тоже можно сделать с помощью разных графических редакторов. Тем не менее, расскажу свою историю…

Рад представить дополнение оригинального списка из 300 потрясающих бесплатных сервисов. Автор оригинальной статьи Ali Mese добавил ещё +100 новых сервисов, которые помогут найти все — от источников вдохновения и редакторов фотографий до создания опросов и бесплатных иконок.

И еще подборку +500 инструментов от 10 марта 2017 г. смотрите здесь.

A. Бесплатные веб-сайты

• HTML5 UP: Адаптивные шаблоны HTML5 и CSS3.
• Bootswatch: Бесплатные темы для Bootstrap.
• Templated: Коллекция 845 бесплатных шаблонов CSS и HTML5.
• Wordpress.org | Wordpress.com: Бесплатное создание веб-сайта.
• Strikingly: Конструктор веб-сайтов.
• Layers: Создание сайтов на WordPress (new).
• Bootstrap Zero: Самая большая коллекция бесплатных шаблонов Bootstrap (new).
• Landing Harbor:  Продвижение мобильного приложения c помощью бесплатного лендинга (new).

Автор оригинальной статьи Ali Mese добавил ещё 100 новых бесплатных сервисов. Все 400 потрясающих сервисов доступны здесь. И еще подборку +500 инструментов от 10 марта 2017 г. смотрите здесь.

A. Бесплатные Веб-Сайты + Логотипы + Хостинг + Выставление Счета

• HTML5 UP: Адаптивные шаблоны HTML5 и CSS3.
• Bootswatch: Бесплатные темы для Bootstrap.
• Templated: Коллекция 845 бесплатных шаблонов CSS и HTML5.
• Wordpress.org | Wordpress.com: Бесплатное создание веб-сайта.
• Strikingly.com Domain: Конструктор веб-сайтов.
• Logaster: Онлайн генератор логотипов и элементов фирменного стиля (new).
• Withoomph: Мгновенное создание логотипов (англ.).
• Hipster Logo Generator: Генератор хипстерских логотипов.
• Squarespace Free Logo: Можно скачать бесплатную версию в маленьком разрешении.
• Invoice to me: Бесплатный генератор счета.
• Free Invoice Generator: Альтернативный бесплатный генератор счета.
• Slimvoice: Невероятно простой счет.

Чуть более ста лет назад инженер Фредерик Тейлор встал за спиной фабричных рабочих с секундомером и стал измерять, сколько времени они тратят на рутинные операции. Вскоре стало ясно, что их можно «оптимизировать» — повысить производительность с помощью системы научной организации труда. Именно из нее выросло современное массовое производство. Но могли ли тогдашние рабочие представить, что их правнуки примутся измерять свою производительность не по приказу капиталиста, а по собственной инициативе? Современным работникам умственного труда приходится самостоятельно планировать деятельность, а секундомер Тейлора им заменяют специальные программы для учета рабочего времени — тайм-трекеры.

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

Группировка с использованием элемента <g>

Элемент <g> используется для логической группировки набора связанных графических элементов. Это можно сравнить с группировкой объектов в графических редакторах.

Элемент <g> объединяет в группу все свое содержимое. Как правило, ему задается идентификатор, по которому будет производиться обращение в дальнейшем. Любые стили, применяемые к элементу <g>, будут также применены ко всем его потомкам. Это позволяет задавать стили и преобразования, а также добавлять интерактивность и анимацию сразу целой группе объектов.

В качестве примера будем использовать нарисованную в SVG птичку. Она состоит из нескольких отдельных фигур, описываемых кругами и путями. [По невыясненным причинам автором описаны круги путями вместо использования circle, хоть и было обещано использовать круги. Не спрашивайте почему. Я это исправил. Не спрашивайте зачем. — Пер.]

Текстовый редактор bootstrap-wysiwyg — это всего 1.5 Кб в минифицированном и сжатом виде и чуть больше 6 Кб исходного кода, базовые функции редактирования на основе execCommand, drag-and-drop для вставки изображений, поддержка стандартных горячих клавиш и ничего лишнего. Редактор работает в современных браузерах (Chrome 26, Firefox 19, Safari 6) и на мобильных платформах (IOS 6 iPad/iPhone, Android 4.1.1 Chrome). Зависимости — jQuery, jQuery HotKeys и Bootstrap.

Привет, хабр!

Одним прекрасным вечером, не предвещающим ничего интересного, в наш чатик поступило предложение от автора публикации «Переводим в код 5 действительно полезных шаблонов адаптивной разметки», написанной им весной 2012 года, написать статью-ремейк, но с применением FlexBox и сопутствующим пояснением что и как работает. После некоторой доли сомнений, интерес глубже разобраться в спецификации все таки победил и я благополучно сел верстать те самые примеры. В ходе погружения в эту область стало выясняться множество нюансов, что переросло в нечто большее чем просто переверстать макетики. В общем в данной статье хочу рассказать о такой чудесной спецификации, под названием «CSS Flexible Box Layout Module» и показать некоторые ее интересные особенности и примеры применения. Всех кому интересно, любезно приглашаю под хабракат.

Привет хабр, хочу рассказать о моем новом проекте для составления смет онлайн СметаCloud.

Цели и задачи СметаCloud

Основная цель проекта СметаCloud — предоставить удобный сервис для составления сметной документации и совместной работы над документами, используя лишь компьютер с выходом в интернет.

Для кого подходит СметаCloud

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

Интерактивное ТВ и Цифровое ТВ, они же IPTV и DVB-C, имеют много общего, например, позволяют смотреть современное телевидение в отличном качестве. В то же время, они являются разными услугами, рассчитанными на разную аудиторию и предоставляющими разный подход к просмотру телевизора. В этом материале мы рассмотрим обе услуги и расскажем о том, как они работают, что у них общего и что их различает.

Валидация форм была педантичным занятием с момента появления web. Первой пришла серверная валидация. Затем она развилась в валидацию на стороне клиента для проверки результатов в браузере. Теперь у нас есть такие гиганты как HTML5 и CSS3: глава о формах HTML5 предлагает нам новые типы для input полей и атрибуты, которые делают возможным проверку ограничений поля. Базовый UI модуль CSS3 предоставляет несколько псевдо-классов, которые помогают нам стилизовать состояние валидности и менять внешний вид поля в зависимости от действий пользователя. Давайте взглянем на комбинацию обоих для создания валидатора форм основанного на CSS, который имеет достаточно широкую поддержку браузеров.

Чем больше мы можем дать подсказок пользователю, как правильно заполнять форму, в процессе заполнения, тем меньше шансов, что он сделает ошибку. Взгляните на пример CSS3 валидации форм в браузере поддерживающем CSS3 UI псевдо-классы, например Chrome 4+, Safari 5+ или Opera 9.6+. Я использовал CSS3 UI псевдо-классы и HTML5 атрибуты форм для создания валидации основанной на CSS. Давайте посмотрим как это работает.

tFormer.js — empower your HTML forms

Предисловие:

Вам приходилось верстать формы? Приходилось писать скрипт для валидации этих форм на клиенте? Доводилось ли использовать уже существующие плагины/надстройки для валидации форм?
Мне приходилось, но я не был на 100% удовлетворен ни от подхода решения задачи в лоб (собственный скрипт валидации для каждого проекта под его формы), ни от того, как работают существующие сторонние плагины.

Проблема:

Основными проблемами собственных скриптов и плагинов всегда были — гибкость, удобство и простота.
Большое количество data-attributes, необходимых для конфигурации скриптов (как это в Parsley.js) делают и код менее читабельным, и никогда не помнишь, как все они пишутся. Не просто…
Не все плагины хорошо подходили под желаемые HTML-формы, а постоянно писать свои скрипты под разные формы не всегда удобно и разумно.

Задача:

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

Решение:

Решение вылилось в небольшой опенсорсный плагин, который получил название tFormer.js.

Допустим, я создал браузерную игру, а что дальше? Если для мобильных — есть магазины Google Play, App Store, Windows Store и куча всяких альтернативных. Можно найти площадки для распространения сборок standalone — Desura, Steam, Itch.io. Но когда задумываешься о судьбе браузерки, то невольно впадаешь в ступор. И куда ее?

Думать о судьбе своего детища необходимо еще на начальном этапе разработки. Так, в случае с Dangerous Insects, я уже знал, где и как буду размещаться, хотя от игры в лучшем случае был только диздок. Вот и с HTML5 захотелось заранее прощупать почву.

В издательстве «Питер» вышла книга "Как я украл миллион. Исповедь раскаявшегося кардера".

Издание в твердом переплете, 368 страниц. Но какое это чтение! Автор — Сергей Павлович в настоящее время отбывает наказание в одной из тюрем Беларуси и его история является по большему счету одной из глав его жизни.

В этой книге Сергей Павлович откровенно рассказывает о сотнях изощренных афер с кредитными карточками, которые он и его подельники на протяжении более 10 лет проворачивали по всему миру по чужим кредитным карточкам. Эта книга раскрывает методы работы управления «К», подразделения МВД, осуществляющего борьбу с преступлениями в сфере информационных технологий, и самой престижной и старейшей спецслужбы в мире — Секретной службы США.

Автор проливает свет на скрытый от широкой общественности мир профессиональных киберпреступников — людей молодых, честолюбивых, целеустремленных, к которым в совсем юном возрасте попадают в руки огромные деньги…

Предлагаем вашему вниманию материалы доклада Андрея Липатцева, Google, с последней конференции Bitrix Summer Fest. В своём выступлении Андрей рассказал о текущей ситуации с ранжированием и оценкой Google сайтов для мобильных устройств.

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

Внутри схемы, гифки, таблицы и много интересного текста.

Вы готовы?

За последние пару лет на IT-рынке сильно возросла потребность в различных системах безопасности, видеонаблюдения и контроля доступа. Существует масса решений, как уже готовых, так и в качестве платформ для создания специализированных систем. Любой специалист в смежной области сможет подобрать сервер для видеонаблюдения, учитывая параметры и количество камер, характер и динамику объекта наблюдения, требования к глубине архива. Но, так как, обычный пользователь/заказчик не обязан самостоятельно перемножать Битрейты и складывать Гигабайты с Гигагерцами, мне, по долгу службы, приходится проделывать это за них, подбирая оптимальную конфигурацию сервера. Я, как сотрудник компании STSS — отечественного сборщика серверного оборудования и интегратора, совместно с инженерами компании разработал линейку серверов видеонаблюдения STSS Flagman VX. Особенностью этих моделей является конфигуратор, который позволяет собирать систему не по компонентам, а по требованиям, заданным характеристиками камер и глубиной архива. Таким образом, пользователь может подобрать оптимальную модель сервера, зная лишь количество камер, их разрешение, частоту кадров в секунду и требуемый срок хранения архива. Вычислительная и дисковая подсистема формируется автоматически, и соответствует заданным требованиям.