Как стать автором
Обновить
24
Карма
0
Рейтинг

Пользователь

  • Подписчики 9
  • Подписки 11

7 мощных каруселей изображений для Web-дизайнеров

Разработка веб-сайтов *
Перевод
Эта статья является коллекцией некоторых мощных каруселей изображений и текстовых материалов, готовых к использованию в ваших Web-проектах. Она включает в себя Agile Carousel, YUI Carousel, JCarousel, iCarousel (jQuery + MooTools) и учебное пособие о том, как реализовать простую карусель наподобие карусели во Flickr, используя Prototype-UI.
Читать дальше →
Всего голосов 50: ↑42 и ↓8 +34
Просмотры 83K
Комментарии 28

Улучшаем формы или Веб-Восемь-Ноль-Сто-Три

JavaScript *
Итак, мы выбрали браузер вместо отдельно стоящего толстого клиента. Пользователь очень хочет вводить данные. Однако, обычные формы плохие. Потому, что:

Читать дальше →
Всего голосов 65: ↑42 и ↓23 +19
Просмотры 1.2K
Комментарии 52

Интеграция вкусностей jQuery в другие сайты

jQuery *
Есть у меня небольшой проект с user-generated content-ом. Встала задача сделать код кнопки с ссылкой на страничку пользователя, для интеграции в пользовательские блоги и сайты. Но делать скучные кнопки, как у большинства конкурентов, не хотелось. Хотелось, на равне с простыми кнопками и ссылками, сделать что-то особенное, jQuery-евское, с аяксом и анимацией :).

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

Проблемы очевидны:
  1. Необходимо определить, используется ли jQuery и нужный плагин на сайте пользователя. Если нет, то обоих динамически подгрузить. Делать отдельно коды для тех кто использует jQuery на своем сайте и для тех кто нет — не комильфо, а тем более подгружать при любом раскладе (могут возникнуть глюки, особенно у плагинов).
  2. Пережатый jQuery весит около 60 кБ, и в случае подкачки может не успеть полностью загрузиться и инициализироваться до исполнения кода.

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

Ниже представлен код.
Читать дальше →
Всего голосов 47: ↑36 и ↓11 +25
Просмотры 2.2K
Комментарии 66

текст под произвольным углом без флеш и js

CSS *
Ранее здесь была представлена статья о том как сделать вертикальный текст картинками, генерируемыми php.

Теперь я хочу вам рассказать о том как сделать поставленную задачу без картинок, флеш и js, только средствами html и css. К тому же стало возможно сделать текст под произвольным углом. В конце статьи есть готовый пример.

вертикальный текст и текст под углом
Читать дальше →
Всего голосов 181: ↑170 и ↓11 +159
Просмотры 29K
Комментарии 115

«Резина» (fluid grids)

Разработка веб-сайтов *
Перевод
image

В этом году я делал редизайн веб-сайта с большим количеством контента. Требования к дизайну были простые: клиент попросил сохранить существующий логотип компании, улучшить плотность печати и увеличить читабельность. Так что, в самом начале разработки дизайна, я потратил значительное количество времени на планирование хорошо структурированной сетки для библиотеки информационных блоков.
Последние несколько лет такой образ мышления стал более распространенным. Благодаря Марку Балтону (Mark Boulton), Кхои Винху (Khoi Vinh), и другим, мы видим возрождение интереса к типографской сетке, и того, как использовать ее в сети. И, откровенно, идея была сногсшибательным хитом: миллионы CSS фреймворков расцвели множеством дополняющих их инструментов, каждый из которых создан для того, чтобы сделать основанный на сетке дизайн еще более доступным для среднестатистического дизайнера/верстальщика. И почему бы и нет? После нескольких минут мышления в категориях сетки достоинства становятся очевидны: дизайнеры получают рациональный, структурированный фреймворк для образования структуры информации и пользователи получают хорошо структурированные, читабельные сайты.
Между тем, наш клиент выдвинул еще одно, убойное, требование: дизайн должен быть тянущимся и изменять размеры вместе с окном браузера. Обычно это заставило бы меня шумно и смущенно радоваться. «Резина» — недооцененная парадигма в веб-дизайне. Она отдает контроль над дизайном в руки пользователей и их привычек веб-серфинга. А еще ее возможности абсолютно не соответствуют фантазии веб-дизайнеров.
Читать дальше →
Всего голосов 131: ↑117 и ↓14 +103
Просмотры 41K
Комментарии 71

Составляем договор дизайн-студии, часть 1

Управление проектами *
Итак, начинаю публикацию целой серии долгожданных заметок о договорах и прочей документации дизайн-студии. Сразу скажу, что договор студии Made выкладывать сюда или куда-нибудь еще я не буду, у нас политика такая. Хотя, какие-то его части, быть может, и появятся в открытом доступе. Вместо рыбы я дам вам удочку.
Читать дальше →
Всего голосов 55: ↑39 и ↓16 +23
Просмотры 7.5K
Комментарии 37

Рецепты хорошей типографики

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

Содержание

  1. Дефисы, тире, минусы и другие палочки
  2. Кавычки и чёрточки
  3. Скобки
  4. Многоточие
  5. Заголовки, списки

Читать дальше →
Всего голосов 154: ↑133 и ↓21 +112
Просмотры 53K
Комментарии 90

Полезные инструменты для web-разработчиков

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

MailLink


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

Конечно у него есть и свои минусы:
  1. адрес будет показываться только при всключенном JavaScript
  2. если у робота есть поддержка JS, то он может распознать скрываемый e-mail
Насчет первого, то скорее всего выключенный JS — это паранойя во времена веб два нуль и выше. Насчет второго, то как показала практика — писателям таких пауков очень лень пытаться распознать закодированные адреса, когда на просторах сети полным полно не закодированных. Так что данных алгоритм работает в большинстве, чем 99.5% случаев.

Читать дальше →
Всего голосов 100: ↑83 и ↓17 +66
Просмотры 2.2K
Комментарии 34

Исследование на тему замены стандартных кнопок

JavaScript *
В процессе работы над интерфейсом одного продукта, появилась надобность в изготовлении собственного дизайна кнопок. За это время код, который заменяет стандартную кнопку на требуемую несколько раз переписывался и в данный момент тоже далёк от идеала. Учитывая все текущие проблемы кросс-браузерности, за это время выяснились и получилось нижеописанное.

Допустим, что она должна выглядеть примерно так:


Читать дальше →
Всего голосов 81: ↑60 и ↓21 +39
Просмотры 2.6K
Комментарии 113

8 простых способов улучшить типографику в вашем дизайне

Разработка веб-сайтов *
Перевод
Множество людей, включая дизайнеров, думают, что типографика – это только выбор гарнитуры, размера шрифта и того, должен ли он быть нормальным или полужирным. Для большинства людей на этом все и заканчивается. Но для получения хорошей типографики нужно гораздо больше и как правило это детали, которые дизайнеры часто игнорируют.
Эти детали дают дизайнеру полный контроль, позволяет ему создавать прекрасные и последовательные с точки зрения типографики решения в дизайне. Хотя все это применимо для различных типов носителей, в этой статье мы сосредоточимся на том, как их применить к веб-дизайну с использованием CSS. Вот 8 простых путей с помощью CSS улучшить типографику и, следовательно, общее удобство дизайна.
Читать дальше →
Всего голосов 206: ↑198 и ↓8 +190
Просмотры 41K
Комментарии 110

Pict.com — новая версия хостинга изображений.

Я пиарюсь
Всем привет!

Сегодня была запущена новая версия бесплатного хостинга изображений Pict.com.
Надеемся, что обновленный Pict.com понравится Хабравчанам.



Итак, вкратце о нововведениях...
Всего голосов 76: ↑66 и ↓10 +56
Просмотры 1.2K
Комментарии 211

Ускорение верстки — да поможет Notepad++

GTD *
Я уже довольно-таки давно верстаю в Notepad++, пробовал и другие редакторы — не срослось. Основная причина, по которой мне нравился раньше этот редактор — подсветка кода. Видел. что есть много каких-то настроек, но небыло необходимости в них разбираться — ведь и так всё работает прекрасно.

Ситуация изменилась, когда объем работы вырос, и я физически не успевал верстать то, что вроде как должен успевать. Конечно, есть свои html и css заготовки, но копипастить их — сомнительный выигрыш во времени. Работа по FTP через Total Commander тоже не очень то удобна — много лишних телодвижений.

И вот я решил потратить время на настройку своего любимого Notepad++, слышал где-то что гибко он настраивается :)

(Описание скорее для тех разработчиков, которые не в курсе всех прелестей Notepad++, знающие могут дальше не читать).
Подробнее с картинками...
Всего голосов 118: ↑103 и ↓15 +88
Просмотры 54K
Комментарии 206

HotKeys Trainer — носимся по клаве с пользой

Я пиарюсь
Как известно, почти во всех программах есть так называемые “Горячие клавиши” (HotKeys), нажав которые, вызывается та или иная функция. У всех программ эти сочетания различны и запомнить их все практически нереально. Но можно ;)

image
Читать дальше →
Всего голосов 48: ↑41 и ↓7 +34
Просмотры 1.1K
Комментарии 49

Установка Web Optimizer

Я пиарюсь
Web Optimizer (Веб Оптимизатор) — приложение, автоматизирующее все действия по клиентской оптимизации для произвольного сайта. На данный момент оно существует в виде отдельного приложения (которое нужно самостоятельно установить на сайт). В качестве базы для Web Optimizer использовался PHP Speedy (который также существует в виде дополнения для Wordpress, Joomla и Drupal).

Давайте рассмотрим, каким образом можно установить Web Optimizer.

Шаг 1: загрузка архива


Загрузка архива
Читать дальше →
Всего голосов 59: ↑57 и ↓2 +55
Просмотры 731
Комментарии 46

50 монохромных образцов дизайна web-сайтов

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

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

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

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

Монохромные варианты дизайна
Всего голосов 98: ↑77 и ↓21 +56
Просмотры 12K
Комментарии 58

Веб-мастеру на заметку: «Разгоняем» тег TITLE

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

Вот тут вы и можете помочь пользователю, установив на своем сайте в теге <titlе> уже набранный в неверной раскладке адрес своего веб-сайта!


Поясню на картинке:


Читать дальше →
Всего голосов 185: ↑120 и ↓65 +55
Просмотры 992
Комментарии 117

Обзор Jabber-клиентов для мобильных телефонов с поддержкой Java (J2ME)

Мессенджеры *
В последние время многие решили перейти на Jabber. И тут же возникает вопрос какой Jabber клиент выбрать для мобильного телефона? Не так давно был обзор существующих решений для Symbian 9. К сожалению, смартфоны есть не у всех — поэтому представляю краткий обзор Jabber-клиентов для мобильных телефонов с поддержкой Java.

Читать дальше →
Всего голосов 47: ↑42 и ↓5 +37
Просмотры 18K
Комментарии 32

Масштабируемая картинка на фоне сайта

Разработка веб-сайтов *
Задача:
Дизайнер нарисовал макет страницы, на заднем фоне которой была картинка. Я сначала было решил, что это фон который увеличивается по ширине в зависимости о разрешения монитора.
Но не тут то было. Дизайнер настаивал на то, что это масштабируемая картинка, которая сужается / растягивается при изменение окна приложения и по ширине и по высоте.
Заранее предупредив заказчика – что картинка будет грузиться 1 и в максимальном разрешении – его определили как 1600, приступил к работе.
Смотрим что получилось ...
Всего голосов 69: ↑53 и ↓16 +37
Просмотры 20K
Комментарии 50

Информация

В рейтинге
Не участвует
Откуда
Смоленская обл., Россия
Дата рождения
Зарегистрирован
Активность