Задача

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

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

Хотя Firefox 3.0 улучшил отображение шрифтов, привнеся поддержку кернинга, лигатур, различных толщин, а также поддержку отображения сложных начертаний, всё же авторов ограничивало использование в своих дизайнах только общедоступных шрифтов. Firefox 3.5 снимает это ограничение, вводя поддержку CSS-правила @font-face — это способ прицеплять шрифты TrueType и OpenType точно так же, как нынче прицепляют код и иллюстрации. Браузер Safari поддерживал этот вид гиперсвязи со шрифтом, начиная от версии 3.1, а в Opera объявили, что планируют поддержать его в Opera 10.

Использовать @font-face для гиперсвязи со шрифтом — сравнительно несложно. Внутри стилевого файла каждое свойство @font-face задаёт используемое имя шрифтового семейства, и подгружаемый шрифтовой ресурс, и стилевые характеристики заданного начертания — скажем, полужирное ли оно, курсивное ли. Firefox 3.5 скачивает шрифты только по мере нужды, так что стилевой файл может задать полный набор шрифтов, из которых лишь выборочно несколькие станут использоваться в действительности.

/* Graublau Sans Web (www.fonts.info) */
 
@font-face {
  font-family: Graublau Sans Web;
  src: url(GraublauWeb.otf) format("opentype");
}
 
body {
  font-family: Graublau Sans Web, Lucida Grande, sans-serif; 
}

Браузеры, поддерживающие @font-face, отобразят текст при помощи Graublau Sans Web, тогда как более старые браузеры отобразят его при помощи либо Lucida Grande, либо начертания по умолчанию для sans-serif. Вот пример:

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

• встроенная оптимизация Drupal;
• оптимизация Drupal с помощью модулей;
• оптимизация конфигурации и обслуживания Drupal;
• оптимизация сервера.

Это перевод статьи, написанной Jon Hobbs-Smith. Я счел ее довольно интересной и решил выложить в своем блоге, а также поделиться им с хабрапользователями, также как и я заинтересованными в библиотеке jQuery. Перед тем как начать хочу отметить, что написана она (как и переведена) далеко не экспертом в jQuery, поэтому если вы найдете в ней ошибку, пожалуйста, сообщите. Итак, начнем.

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

Эта статья сфокусирована на вопросах усиления безопасности WordPress — как административной панели, так и настроек блога, подразумевая все содержимое папки «wp-admin», которое отображается только после авторизации. Мы сознательно выделили фразу "после авторизации" — вы должны четко осознавать, что только один простой запрос отделяет «злого хакера» и админку всего вашего блога или сайта! А последняя защищена настолько сильно, насколько мощный пароль вы выбрали.



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

Статья является расширенным сборником CSS-хаков в сравнении с аналогичной статьей.
Под хаком подразумевается метод, позволяющий воспринимать CSS только определенному браузеру.
Хаки могут использоваться не только для исправления багов в верстке, но и в случае использования определенных особенностей браузера для ускорения рендеринга web-страницы в нём (к примеру CSS3-свойства)

Помните мою выпадающую панель для входа/регистрации, реализованную с помощью Mootools 1.2? Я подумал, что её можно было бы улучшить как с точки зрения дизайна, так и с точки зрения функциональности, и я это сделал! Но с этого времени уже на jQuery.

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

Поэтому я попробую исправить этот недочёт.

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

Welcome!

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

Проекты для дяди

Когда вы создаете проект для заказчика, то вам, по большому счету, плевать, будет ли проект коммерчески успешным. Заказчик хочет новую социальную сеть? Пожалуйста. А о том что очередная социальная сеть никому не нужна, и что создавать ее сегодня уже просто смешно, вы скромно умолчите. Заказчики часто не понимают, что большая часть фич, которые они хотят, на самом деле никогда не будут востребованы. Как-то мне довелось столкнуться с проектом, который со стороны выглядел обычным каталогом сайтов. На создание аналогичного каталога ушла бы неделя. Но на самом деле объем этого проекта составлял более ста тысяч (!) строк.

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

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

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

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

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

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

Недавно я делал обзор электронной книги Orsio b731. Внимательные читатели узрели на фотографиях папку шпаргалок и попросили поделиться. Что ж, держите! ;)

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

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

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

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

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

Выкроив немного свободного времени в перерыве между проектами реализовал (именно реализовал, а не написал — почему именно так, расскажу немного ниже) систему для заказа еды. За основу, как нетрудно догадаться исходя из тематики блога, была взята CMS Drupal, которая является моим основным инструментом уже около полутора лет.

Цели данного топика:

• Показать новичкам на довольно простом примере, как создается сайт невысокой сложности на CMS Drupal
• Кратко расказать про несколько основных модулей — как правило они применяются в 90% проектов на друпале
• Показать как можно собрать сайт на друпале из готовых компонентов, не написав при этом ни одной строчки кода (на самом деле будет пара строк кода, но немного не в том виде, как он обычно пишется =))

Итак, что должно быть реализовано в проекте:

• Меню — список блюд, разделенных на категории, с возможностью описания блюд
• Индивидуальные заказы — пользователь может сделать и заказ, просмотреть его содержимое и изменить
• Сводный заказ — список всех заказаных пользователями блюд с указанием их количества
• Возможность делиться впечатлениями о блюдах — тут просто возможность комментирования и рейтингования

Недавно я для себя открыл простую модель, которая обьясняет, какие инструменты нужны менеджеру и команде для ведения и управления проектами.

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

Представляю Вам третью статью из серии jQuery для начинающих. В этот раз я постараюсь рассказать о реализации AJAX запросов...

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

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

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

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

Друпал предоставляет свои собственные средства для доступа к базе данных.

Во-первых, это позволяет не зависеть от используемого типа СУБД. К слову, на сегодняшний момент, полностью функционирует прослойка для MySQL и PostgreeSQL. В седьмом Друпале этот список будет расширен Ораклом и SQLite.

Во-вторых же, прослойка БД позволяет защититься от SQL инъекций.

Очень нравится мне возможность ограничивать набор вводимых символов в полях ввода с помощью регулярного выражения.

Эта функциональность существует в Ext.JS, но этот каркас несколько тяжеловесен для большинства сайтов. Поэтому я нарисовал плагин для jQuery, выполняющий тот же функционал.