На мой взгляд, у стандартной постраничной навигации Друпала есть несколько недостатков.

Во-первых, ссылка на последнюю страницу стала бы более информативна и занимала бы меньше места, если её заменить на номер последней страницы [28].


Во-вторых, стоит нам перейти на вторую страницу и мы тут же видим две ссылки на первую страницу: [1] и [Первая]


Аналогичную картину мы видим с противоположной стороны навигационной линейки


Ниже привожу вариант своего решения этих недочетов (для Drupal 6.x)

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

jReject — jQuery Browser Rejection

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

Добрый день, коллеги!

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

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



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

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

1. Календарь + Контакт в адресной книге = Напоминалка о Дне Рождения
2. Фото + Контакт в адресной книге = Отметить человека на фотографии
3. Календарь + Фото = Разместить фотографии, сгруппировав по дате
4. Фото + GPS = Место, где была сделана фотография
5. GPS + Контакт в адресной книге = поставить адрес контакта, адрес его работы и тп
6. SMS + Контакт = Расположить СМС в виде чата
7. GPS + Журнал вызовов = Показать откуда делался вызов, (сомнительно, но для алиби может пригодиться)
8. Заметки + Контакт = мобильная CRM, оставлять любые заметки о человеке, от пожелания на ДР заканчивая тем, что должен 100 баксов (в любом количестве и сохраняя прошлые)
9. Контакт + Напоминалки = напоминание позвонить, позвонить и назначить встречу, приехать к контакту домой, отправить смс. Или же показывать напоминание при входящем, при входящей смс от контакта
10. Напоминалки + GPS = напоминать что надо сделать, когда телефон будет в заданном месте
11. Интернет + Контакт = агрегация типа friendfeed, rss с домашней странички
12. Интернет + Музыка = last.fm
13. Bluetooth + Контакт = Ассоциировать контакт и bluetooth адрес, хранить историю передач, ( а ещё лучше единым чатом с смс, логированием звонков, передач, rss, др.)
14. SMS + GPS = Отправить смс по прибытии в заданный район. «Сына, отправь смс как доберешься»

И так далее. Это на столько очевидно, что кем-нить реализовано или к тому идёт. Осталось найти (дождаться) этот телефон и купить.

Для наглядности — таблица этих исходных пунктов на docs.google.com

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

Однажды мне надоели жалобы клиентов, вроде «на моём сайте вирус, сделайте что-нибудь!». Объяснять людям об опасности сохранения паролей от ФТП на небезопасной машине так же надоело. Гениальное оказалось рядом — обычно поражаются файлы index.* и default.* — так почему бы не отслеживать изменение этих файлов. Сказано — сделано.
UPD: код переписан — теперь никакого SQL и PHP, тупо парсим xferlog bash'ем

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


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

Добрый день!

На хабре уже имели место несколько статей о том, как нужно учить английский, напомню:

• Практика разговорного американского
• Разговорный английский за месяц
• Как учить английские слова
• Английский для неудачников

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

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

Первая типографская революция произошла во Всемирной Паутине настолько давно, что приходится производить поиски, чтобы установить подробности. Кажется достоверным то, что пишет Ian Graham: в Netscape Navigator 2.0 впервые появился элемент <font> (тогда он позволял задавать только размеры шрифта, и только в условных единицах), а в Internet Explorer 3 у этого элемента появился атрибут face, позволявший задавать начертание, задавать шрифтовое семейство. Википедия подсказывает, что Netscape Navigator 2.0 появился в марте 1996 года, а Microsoft Internet Explorer 3 — в августе того же года. В язык HTML версии 3.2 даже не входил атрибут face, хотя и упоминалося, что такой атрибут существует.

Тринадцать лет назад.

Все эти тринадцать лет для начертания текста сайтов в основном использовались несвободные шрифты, являющиеся частью операционных систем и офисных пакетов. Сайтам приходилося гадать о том, какие шрифты установлены у читателя, а какие не установлены, и какова вероятность того или другого, какие шрифты можно считать безопасными. Сочинялись специальные плагины jQuery и создавались специальные страницы, способные выяснить набор шрифтов на компьютере читателя. Особый дух того времени прекрасно передал despoth, сочинив превосходную серию статей о такой веботипографике, которая основана именно на подборе несвободных шрифтов (часть I — часть II — часть III — часть IV — часть V).

Наконец, это время кончилось: явствуют, зримо явствуют признаки Второй типографской революции, связанной с приходом @font-face.

Джон Даггетт сочинил познавательную статью о том, как все мы совсем скоро (после появления Safari 3.1, Firefox 3.5, Opera 10) сможем использовать загружаемые шрифты во всех популярных браузерах, а не только в одном наиболее популярном.

Марк Пилгрим грубо обрисовал ситуацию с лицензированием собственнических шрифтов. Ситуация эта немало напоминает глухой тупик. Даже создателям прекрасной демонстрации возможностей Firefox 3.5, чтобы изготовить страницу, пришлось специально связаться со шрифтопроизводителями и изготовлять такие особые (усечённые) версии использовавшихся шрифтов, чтобы их не было смысла копировать нелицензионно. А вон там предлагают раздавать особые паутинные обкусанные ужатые копии купленных шрифтов (которые сам покупатель вывешивать не имеет никого права, а только ссылаться). Остроумно. Открывает широкую дорогу в сторону Большого Брата: типа как недавно читальники Kindle удаляли книги Оруэлла за нелицензионность (даже честно купленные — просто оставляя стоимость их на счету покупателя в уплату). Так и тут. Внешний шрифт может неожиданно подохнуть, даже купленный заранее.

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

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

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

Как использовать прилипающий футер

Введение

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

Решения Райана Фэйта хорошо известно и работает, но требует лишний пустой <div>. Приверженцы чистого HTML-кода могут найти это богохульство несемантичным. В нашем решении лишнего <div> нет.

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

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

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

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

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

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

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

Многие социальные сети предлагают пользователям такую платную услугу как «подарки». Обычно это символические знаки внимания, представленные в виде картинок, которые можно подарить другому пользователю, оплатив подарок sms-кой. Типичная стоимость подарков лежит в диапазоне от доллара до $7 за штучку.



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

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

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

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

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

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

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

О чем это он?

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


(Кликабельно)

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

Приведу пример из спецификации, эмулирующий обычный нумерованый список с помощью счетчика и свойства content:

OL { counter-reset: item }
LI { display: block }
LI:before { content: counter(item) ". "; counter-increment: item }

Первым правилом мы назначаем элементам OL счетчик с именем «item», затем для всех LI меняем значение свойства display на block, вместо значения по умолчанию (list-item), чем отключаем стандартные маркеры-цифры. Наконец, в последнем правиле, мы инкрементируем счетчик для каждого элемента списка, а само его значение показываем перед элементом c помощью функции counter() и свойства content. Всё просто.

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

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

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

Решил поделиться файликом, который я использую каждый раз, когда рисую макет или проектирую интерфейс.
Экономит мне кучу времени.



Скачать архив с пээсдэшником (49 kb)

UPD:
Ссылка от saltommeister
Контролы для Эксплорера, Файрфокса, Оперы и Сафари

Ссылка от niker
designerstoolbox.com/designresources/elements/

Ссылка от fatal
456bereastreet.com/archive/200409/styling_form_controls/

Ссылка от AlmeZ
Free Photoshop browser templates for webdesigners and screendesigners

Ссылка от 3fonov
Yahoo Design Stencil Kit

Рано или поздно все web-разработчики сталкиваются с ситуацией, когда Internet Explorer становится проблемой, тормозящей разработку проекта. Сайт свёрстан валидно, по стандартам. Нормально отображается в Mozilla, Opera, Safari и других нормальных браузерах. Но. Открываем его в IE. И видим. Как то, что мы подгоняли по пикселям, строго придерживаясь стандартов, размазано по странице. Ладно ещё в IE7 можно более-менее просто подогнать вёрстку (конечно зависит от дизайна), но от IE6 иногда волосы встают дыбом. К счастью, существуют способы, которые позволяют повлиять на ситуацию. Кто-то использует хаки, кто-то — conditional comments. Где-то можно пойти на компромис и упростить задумку дизайнеров, поддерживая пользователей недобраузеров.

Fugue Icons

Отличный пак из 1000 иконок в размере 16x16

Эти иконки распространяются по лицензии Creative Commons Attribution 3.0 license.

Ссылка на сайт
Скачать пак | Посмотреть иконки (1199.25 КБ)