Ни для одного опытного программиста или верстальщика не секрет, что настроенная под себя среда разработки (не в смысле IDE, а в более общем) — жизненная необходимость. Было время, когда я делал очередную верстку в практически голом Notepad++ на единственном мониторе, поочередно открывая Photoshop, браузер и редактор. Сегодня, в эпоху «автоматизации всего», мне сложно представить, как вообще можно было так работать.

Sublime Text 2 — популярный расширяемый кроссплатформенный текстовый редактор, для которого написано множество плагинов если и не на все случаи жизни, то на многие. В этом посте я попытаюсь рассказать как из этого конструктора сложить удобный инструмент front-end разработчика для работы с HTML, CSS и JavaScript.

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



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

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

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

Давайте попробуем разобраться, как правильно подходить к постановке задач для сайта, в этой статье из четырёх частей:

1. Поведение потребителя в «цифровую эпоху» — чем отличается сегодняшний потребитель от вчерашнего, и как это влияет на бизнес.
2. Сайт как инструмент влияния — чем отличается сегодняшний сайт от вчерашнего, и о чём нужно помнить, решив создать новый сайт.
3. Как ставить задачи для сайта? — конкретные рекомендации для заказчиков и студий. За рецептами — пролистывайте до сюда.
4. Пример блока «Назначение сайта» — демонстрация того, что должно получиться в итоге.

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

Полезные сервисы

Easel.io — отличный сервис для прототипирования прямо в браузере.

На днях столкнулся с задачей:

Сделать две одинаковые по высоте -колонки, не зависимо от количества текста в какой либо из них.

Условия:

1. Никаких таблиц;
2. Поддержка IE6+ и т.д;
3. Резиновая верстка;
4. Никакого JavaScript, чистый HTML и CSS.

Дизайн:

В дизайне изображены две колонки с отступом друг от друга. Каждый из них имеет свой фон и border с округленными уголками. На вид все просто.

Поиск решений:

Искал и естественно нашел очень полезный пост, где описаны все самые действенные способы решения данной задачи: http://habrahabr.ru/post/64173/.
Собственно 4-е решение из этого поста было наиболее приемлемым, но с помощью него мне так и не удалось вывести два разных фона для своих колонок.

Решение

Инфоблоки — это, наверное, самый используемый модуль. Ни один сайт на этой CMS не обходится без него. Это очень гибкий инструмент, но чтобы воспользоваться всей этой гибкостью, придётся хорошенько изучить API Битрикса. Но официальная документация, как мы знаем, описывает не всё моменты ;)

Так получилось (и прошу считать это удачным совпадением), именно сегодня на Хабре опубликован топик про практическое применение теней из CSS3 для создания интересных эффектов, а мы в свою очередь подготовили топик про основы для этого творчества.

Мы попробуем разобраться в том, как работают тени в новых модулях CSS3. С практической точки зрения, мы рассмотрим два правила: box-shadow и text-shadow, определенные соответственно в модулях CSS3 Backgrounds and Borders и CSS3 Text.

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

Первая часть посвещена работе с box-shadow, во второй мы пройдемся по теням для текста.

Сейчас самое время повышать уровень дизайна своих работ с помощью веб-шрифтов

Без преувеличения, сейчас сетевая типографика переживает захватывающий период своей жизни. Недавние технологические скачки приблизили нас еще на шаг ближе к типографической нирване в интернете. Шаг, которого все так долго ждали.

Свобода использования веб-шрифтов вне безопасного списка на всех ведущих ОС стала возможной, по большому счету, благодаря трем основным, почти одновременным технологическим факторам: широко распространенной поддержке правила @font-face в браузерах; появлению таких «шрифтохранилищ» как Typekit и Fontdeck; создание нового формата шрифтов — архивированного файла шрифта WOFF.

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

Любой, кто играл или наблюдал за игрой друзей, либо в принципе видел игры, которые были выпущены в 80-90-х годах, должны быть знакомы с техникой параллакс-скроллинга.

Вспомните такие игры, как Mario Bros, Streets of Rage, Mortal Kombat, Turtles in Time или оригинальную игру Moon Patrol. В этих играх техника параллакса наблюдается в тот момент, когда несколько фоновых слоев с различными текстурами двигаются с разной скоростью, что создает эффект трехмерного пространства.

Почему я начал говорить о ретро-играх в статье о веб-разработке? Самым простым ответом мог бы быть «потому что они клевые», но нет. Параллакс-скроллинг является классным дизайнерским концептом, который прокладывает свой путь в мир веб-дизайна. Nike были одними из первых, кто использовал эту технику с большим успехом, когда они наняли маркетинговых гигантов Weiden and Kennedy для разработки их оригинального сайта Nike Better World. Сайт Nike Better World с того времени был обновлен и заменен на новый, однако есть другой сайт, довольно похожий на то, как выглядел первый параллакс-дизайн от Nike — сайт о спортивных напитках Activate.

Ну вот дошли руки до следующей части.
Сегоня расскажу что знаю про американский бухучет применительно к к нашей alien`ской конторе и налоги.

Это продолжение топиков HOWTO: свой бизнес в США из России,
и Бизнес в США из России. Часть II. Деньги и банки.

Последнее время все чаще можно встретить сайты с необычным дизайном и функциональностью, увидев которые, можно залипнуть на некоторое время. Увидев такие, у меня рука непроизвольно тянется к f12, чтобы открыть firebug и посмотреть, как же реализован тот или иной компонент. Таким образом можно открыть для себя интересные техники и в будущем реализовать их на своих проектах. Некоторые из них стали доступны с приходом новых технологий, например таких, как CSS 3 — то, что раньше было реализовано на флеше, теперь можно воплотить с помощью строк кода в таблице стилей. Дизайнеры тоже не теряют времени, создавая новые тренды и все плотнее взаимодействуя с верстальщиками. В этой статье я хотел бы показать 15 сайтов, которые так или иначе удивили и порадовали меня. Возможно, кого-то они вдохновят на собственный шедевр

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

[('съешьте', 'глаг.'), ('еще', 'нареч.'), ('этих', 'местоим. прил.'), ('мягких', 'прил.'), ('французских', 'прил.'), ('булок', 'сущ.'), ('да', 'союз'), ('выпейте', 'глаг.'), ('чаю', 'сущ.')]

Зачем это нужно? Например, для автоматического определения тегов для блог-поста (для отбора существительных). Морфологическая разметка является одним из первых этапов компьютерного анализа текста.

Tinyicon это небольшая библиотека для манипуляции с favicon сайта для передачи информации о новых событиях. Для браузеров не поддерживающих canvas счетчик отображается в title страницы.

Дизайнер Джессика из компании Seed Design Consultancy занимается подбором оригинальных цветовых палитр для сайтов и предлагает несколько методов, в том числе по произвольному цвету, по рубрикатору тем (осень, минералы, природа). Сейчас она придумала ещё один способ, который несложно реализовать самостоятельно методом статистического анализа.

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

Приветствуем Вас, уважаемые покупатели и владельцы магазинов. После только что прошедших новогодних праздников, мы снова решили напомнить Вам о себе, и для этого есть несколько хороших поводов. Но обо всем по порядку. Напомним Вам, что разработка кредитного сервиса Conpay.ru началась 8 сентября сразу после публикации статьи на хабре, где я в общих чертах описал идею проекта. Из отведенных на разработку 6 месяцев прошло уже почти 4, и нам пора отчитаться о проделанной работе. И вообще, нужно же кому-нибудь оценить нашу работу и добавить в процесс конструктивной критики.

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

UPD: Сайт лег от хабраэффекта. Ругаюсь с хостером. Решим в течение 10 минут.
UPD2: Все исправили. Сайт ожил. Приносим свои извинения.

На Хабре давно появляются статьи о государственной субсидии в 327 000 рублей на открытие собственного дела. Последний топик, который, как верно подметил в комментарии один пользователь Хабра, выглядит скорее как реклама, нежели детальный обзор этапов получения субсидии и подтолкнул меня на написание отчета. Скажу сразу, эту субсидию я «получаю» уже несколько месяцев: недели прохождения всех бюрократических этапов, решение экспертов отправить бизнес-план на переработку и логическое завершение этого «цирка» — отказ финансовой комиссии в предоставлении субсидии.

Вторая, заключительная часть статьи про опыт внедрения подхода Getting Real от компании 37signals на примере нашей компании. Начало опубликовано вчера.

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

В настоящее время программа государственного субсидирования самозанятости предоставляет возможность гражданину, состоящему на учете в центре занятости населения в качестве безработного, организовать свое дело и получить наиболее крупную единовременную субсидию (до 30 МРОТ).

Возможно, вам будет интересно узнать, как именно обычный человек из простого российского города может вот так взять и получить субсидию на развитие своего дела в размере 327 000 рублей.
Сколько времени и сил было потрачено, какие препоны стояли на пути к достижению цели — обо всем вкратце будет рассказано под катом.

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

Безусловно в этом списке вы обязательно найдёте уже знакомые расширения, однако огромный пласт полезных расширений всегда остаётся в стороне. Так что приготовьтесь установить ещё парочку расширений! :)

Встроенные инструменты разработки в Firefox

Перед началом списка было бы неправильно не упомянуть об инструментах, уже встроенных в Firefox. Здесь речь идёт о тех самых инструментах разработки в Firefox Aurora 10 и том функционале, который сегодня можно найти в любом современном браузере.

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



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

При использовании свойств box-shadow или border-radius непосредственно на изображении, браузеры могут некорректно отображать заданные нами CSS стили, из-за чего внешний вид блока будет существенно отличаться от задуманного. Однако если использовать изображение в качестве фона, то этой проблемы можно запросто избежать. Из статьи вы узнаете, как с помощью jQuery сделать идеально закругленные углы у изображений, а так же какие еще способы оформления возможны с помощью таких свойств как box-shadow, border-radius и transition.