Задача

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

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

Компания iTrack представляет независимый рейтинг систем управления сайтами (CMS), составленный по информации о реальных установках на сайтах.
Cпециально обученный «паук» (программа-робот) регулярно обходит все сайты в зоне .ru и собирает данные для анализа.
Ниже приведены предварительные результаты рейтинга на июнь 2009 года. С июля рейтинг станет ежемесячным, появится больше данных, улучшится точность.

Подробная информация о методике сбора и анализа данных

Предварительные результаты. Июль 2009.

Коммерческие коробочные CMS


Бесплатные CMS


Форумы


CMS для интернет-магазинов

В этом HOWTO я раскажу вам как обрезать фотографию до нужного вам размера и залить её на сервер с помощью Ruby on Rails.

Всем привет!

Сделал небольшой аддон к Денверу. Решил поделиться. Теперь при старте он запускает Sphinx, а при стопе выключает его. Версия: Денвер-3 2008-01-13.

Можно было добавить в denwer/scripts/main/start/ файл.bat, где просто написать пару команд для его запуска. Правда, чуть сложнее с остановкой. Но хочется, чтобы было все красиво. Со словами «Запускаем… Ждем 2 секунды… Готово...» Красота!

Итак.

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

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

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

Для начала стоит определиться с названием. При мозговом штурме мы учитывали три условия: 1. Компании с таким названием не должно существовать. Или на крайний случай их не должно быть много в РФ. 2.Свободное доменное имя в зоне ru.
В итоге, через несколько дней поиска у нас появилась целая куча странных и не очень названий типа: Мурака-Барака, Ник Кейв, Огенри, Кейтбланш, Магвай, Донни Дарко.

Мы выбрали Магвай. В тот момент я не подозревал о существовании фильма Гремлины, двое других о нем просто забыли. Так появилась веб-студия Магвай — создание сайтов в Волгограде.
Основные виды нашей деятельности: разработка сайтов, реклама (seo, контекстная и пр.), фирменный стиль + в дальнейшем создание и развитие собственных проектов.

Поиск офиса
Мы искали необшарпанную комнату до 25 метров, с умеренной ценой и не слишком далеко от центра города. Несколько советов для тех, кто сейчас в поиске, на что следует обратить внимание:
1. Цена, планировка, состояние офиса, наличие-отсутствие кондиционера, с какой стороны восходит солнце, куда дели жалюзи – все что должны узнать в первую очередь.

Всем привет, вот и подошло время для нового обновления таймера «Самоконтроль». Теперь он стал красивее и умеет делать чуть больше вещей.

Страница с таймером: http://www.boomstudio.ru/portfolio/files/experiments/timer_control/

Если быть точнее, то появились следующие штуки:
1) Улучшенный дизайн (за это отдельное спасибо Станиславу Щербакову )
2) Появилась возможность ставить таймеры на паузу. Для этого достаточно «отжать» уже нажатую кнопку (кликнуть повторно по нажатой кнопке).
3) Теперь программа сама следит за обновлениями. Если ваша версия таймера устареет, то программа покажет сообщение о наличии новых версий программы. Правда скачивать и распаковывать обновления, пока, придётся всё-таки самим.
4) Теперь можно изменять названия кнопок и цвет таймеров. Эти настройки вынесены во внешний XML файл.

P.S.: Если кому-то будет интересно, то вот предыдущие обсуждения программы на хабре:
Обсуждение #1: habrahabr.ru/blogs/arbeit/59123
Обсуждение #2: habrahabr.ru/blogs/arbeit/59477

Знаете, фавикончики в ico это как-то прошлый век =) Давайте будем модными, современными и все такое. Короче, берем иконку в png (да-да, с прозрачностью и всеми делами), сохраняем в размере 16×16, на сайте (в блоке <head>, ага) подключаем так:

<link rel="icon" type="image/png" href="favicon.png" />

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

<link rel="apple-touch-icon" href="apple-touch-favicon.png"/>

Над записью витает дух уже почти сгнившего трупа IE6, который вообще не знает о чем это все, ну да и фиг с ним =) Все, изыди.

UPD: Спасибо хабраюзеру NickyX3 за интересное уточнение:

Автор забыл указать, что иконда для springboard тачей и яблофонов будет в таком варианте закруглена по углам и на нее будет наложен блик автоматически самоим девайсом. Для избежания этого (совсем красивая кастом иконка) вместо apple-touch-icon следует написать apple-touch-icon-precomposed.

Рекомендация первая: забудьте про блочную верстку. Весь лэйаут должен быть на таблицах. При этом, без крайней необходимости — их тоже лучше не использовать. Также следует выкинуть из головы представления о семантике, сокращенных css-правилах, валидации, плавающих блоках — и прочее. Самый распространенный в РФ почтовый сервис на данный момент (mail.ru) вообще не понимает стили (css). Любые тэги/атрибуты style заменяются на xstyle и не работают. Вообще все.

Так что, фактически, при вёрстке html для почтовой рассылки надо мысленно переместиться в 90-ые годы прошлого века и смело использовать все распространенные приёмы того времени.

Для тех, кто с ними не знаком (как я был) — напомню:

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

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

Начинаю вести серию статей Это статья про вёрстку html css js, начинаю с самого простого, потом планирую описать более сложные вещи и всякие тонкости и этим видимо так и закончил

Захотелось мне тут для JavaScript perspective в любимом Eclipse заиметь автодополнение функций для jQuery с наличием полной документации. Порыскав в сети, нашёл только jQueryWTP, который даже ставить не хотелось из-за негативных отзывов, и устаревшей версии.
Потому пришлось сделать самостоятельно, и вот результат:

Требования: Eclipse, Web Tools Platform / Zend Studio for Eclipse / Любой редактор с поддержкой JSDoc

P.S. Конечно, есть и другие методы подключения jQuery, например использование NetBeans или плагина Aptana. Так уж получилось, что был выбран именно этот метод :)

Доброго времени суток. Хочу представить вашему вниманию мою подборку значков (пиктограмм), размером 16х16. Все значки бесплатны для личного и коммерческого использования.
Архив содержит:

• SILK ICONS (www.famfamfam.com/ by Mark James)
• Fugue Icons версия 1.8.1 (www.pinvoke.com/ by Yusuke Kamiyamane)
• Silk Companion (www.damieng.com by Damien Guard)
• Xiao (www.ineversay.com by Delacro)
• Vaga (www.tenbytwenty.com by Ed Merrit)
• Sizcons (www.randomjabber.com by RandomJabber)
• Free Web Design Icon Set (www.semlabs.co.uk by SEM Labs)
• 3 сета бесплатных иконок от IcoJoy (www.icojoy.com)

Посмотреть preview и скачать можно тут или скачать с Народа

Запуск сайта ответственное мероприятие, надеюсь что этот список контрольных вопросов позволит ничего не упустить из виду.

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

Конечно же, не претендую на какую-то новизну, и данная заметка будет больше полезна начинающим с jQuery (коим и сам являюсь), чем людям, имеющим существенный опыт с данным javascript фреймворком.

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

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

MailLink

Почти год назад была необходимость защитить большое количество адресов электронной почты от роботов по сборке мейлов, для последующей рассылки по ним спама. По этому поводу быстро набросал страничку, которая позволяет кодировать адреса посредством JavaScript. За основу был взят алгоритм из плагина шаблонизатора Smarty (для особо пытливых могу выложить реализацию на РНР отдельно).

Конечно у него есть и свои минусы:

1. адрес будет показываться только при всключенном JavaScript
2. если у робота есть поддержка JS, то он может распознать скрываемый e-mail

Насчет первого, то скорее всего выключенный JS — это паранойя во времена веб два нуль и выше. Насчет второго, то как показала практика — писателям таких пауков очень лень пытаться распознать закодированные адреса, когда на просторах сети полным полно не закодированных. Так что данных алгоритм работает в большинстве, чем 99.5% случаев.

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

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

Обычная история

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

(ч2. Подделка межсайтовых запросов; ч2. Работа с базой данных)

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

Некоторые сценарии XSS атак

Устойчивая атака

• Вова создает частицу контента на сайте Пети.
• Когда Маша просматривает этот контент, Вовин XSS ворует Машины куки.
• Теперь Вова может пробраться на сайт, используя Машину сессию.
• Чем более людей увидит этот контент, тем более успешной можно считать атаку. Максимум достигается путем создания противоречивых холиварных тем на сайте и т.д.