Генераторы CSS3 кода для кнопок.

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

  • http://www.webarti.com/best-CSS3-button-maker/
  • http://www.cssbuttongenerator.com/
  • http://css3button.net/
  • http://www.sciweavers.org/i2style

Бесплатные online-инструменты для прототипирования сайтов и создания wireframes

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

В этой статье мы решили собрать несколько бесплатных инструментов для создания прототипов (макетов) для сайта.

1) MockFlow

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

2) Cacoo

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

3) Mockup Builder (beta)

На данным момент бесплатное Silverlight онлайн-приложение для создания прототипов. Есть оффлайн версия. Также имеется большая библиотека готовых элементов. Проекты можно сохранять на компьютер в виде pdf, png и формата самого приложения.

4) Creately

Онлайн инструмент для создания прототипов, блок-схем и диаграмм. Есть русский интерфейс и бесплатная версия с ограниченным функционалом (ограничение снимается путем регистрации). У сервиса довольно простой интерфейс, но маленький выбор компонентов.

5) ProtoShare

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

6) iPlotz

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

7) Dabbleboard

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

8) Pencil Project

Это скорее большой плагин для FireFox, нежели онлайн-инструмент. Но, инструмент очень качественный и абсолютно бесплатный. После его установки можно создавать прототипы прямо в браузере, а благодаря удобному интерфейсу, с большим количеством всевозможных инструментов и функций (многостраничные документы, экспорт html, png, файлов OpenOffice и т.д.) разработка будет упрошена до минимума.

Отображение Online/Offline статуса ICQ, Skype, Gtalk, Mail-agent на вашем сайте

В этом посте пойдет речь о том, как сделать на своем сайте отображение Online/Offline статусов популярных мессенджеров, таких как ICQ, Skype, Gtalk и Mail-agent.

Статус Skype

Добавление кнопки Skype на ваш сайт, позволит посетителям видеть Ваш онлайн-статус, а также звонить и писать вам сообщения одним нажатием кнопки.

Если после размещения кода на сайте Ваш онлайн статус не отображается, возможно вы не настроили сам Skype (меню Инструменты > Настройки > Безопасность и ставим галочку Показывать мой сетевой статус в Интернете)

Статус ICQ

Здесь приводится копия страницы The ICQ Online Status Indicator , которая на данный момент уже не доступна на официальном сайте:

  1.   :
    <img src="http://online.mirabilis.com/scripts/online.dll?icq=Здесь_ВАШ_ICQ#_&img=1">
  2.   
    <img src="http://online.mirabilis.com/scripts/online.dll?icq=Здесь_ВАШ_ICQ#_&img=2">



  3. <img src="http://online.mirabilis.com/scripts/online.dll?icq=Здесь_ВАШ_ICQ#_&img=3">

  4. <img src="http://online.mirabilis.com/scripts/online.dll?icq=Здесь_ВАШ_ICQ#_&img=4">
  5. <img src="http://online.mirabilis.com/scripts/online.dll?icq=Здесь_ВАШ_ICQ#_&img=5">

  6. <img src="http://online.mirabilis.com/scripts/online.dll?icq=Здесь_ВАШ_ICQ#_&img=6">

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

Статус Gtalk

Переходим на страницу http://www.google.com/talk/service/badge/New (не забываем войти в свой аккаунт). Жмем ссылку «Изменить», появится форма, в которой необходимо выбрать опции стиля отображения, поставить галочку «показывать ваш статус» и заполнить отображаемое имя.  Нажимаем кнопку «Обновить значок» и копируем код из поля на свой сайт.

Статус Mail-агента

Для того, чтобы добавить отображение статуса Mail-agent’a на вашем сайте, необходимо зайти сначала на сам сайт http://agent.mail.ru/ru/. Далее введите ваш  «e-mail» и получите html-код картинки, которая покажет статус вашего Mail.Ru Агента и позволит другим пользователям добавить вас в список контактов.

Автор: Тютюников Павел

Как перекрыть flash (swf видео) или youtube-видео

Бывают такие ситуации, когда блок с абсолютным позиционированием залезает под flash контент (видео, баннер и др.). Такая же проблема может возникнуть и с YouTube-видео вставленным на страницы сайта. Как это исправить?

Как перекрыть Flash

Для добавления возможности перекрытия flash, нужно добавить параметр, который позволит перекрыть флеш другим div-слоем:
<param name="wmode" value="opaque" />, а также необходимо назначить wmode="opaque" тегу embed.
Весь html код будет выглядеть следующим образом:

<object>
<param name="movie" value="flash.swf" />
<param name="wmode" value="opaque" />
<embed src="flash.swf" wmode="opaque" width="200" height="300" type="application/x-shockwave-flash" />
</object>

Нужный слой поверх YouTube-видео

Если взять обычный iframe код c YouTube, и разместить его на сайте, то в местах где используются слои, этот код видео ролика будет выше. Но, это можно исправить используя следующий код:

<object>
<embed src="http://www.youtube.com/v/3sMNqEDSdes&hl=ru_RU&fs=1" loop="true" quality="high" wmode="transparent" type="application/x-shockwave-flash" pluginspage="http://www.macromedia.com/go/getflashplayer" width="400" height="300" allowfullscreen="true">
</object>

Всё, что нужно сделать, это прописать свой путь в атрибут src. При необходимости можно поменять ширину и высоту, изменяя параметры width="400" и height="300"