Блог Web-мастера

jQuery, php, CSS и немножко SEO


Способы повышения юзабилити форм.

июня 15, 2009

1. Создание динамических опросов на jQuery и PHP.

В этом туториале Вы узнаете, как создать опрос с использованием PHP и XHTML, а также jQuery Ajax - функций для получения результата голосования без перезагрузки страницы, и придания опросу эффектов анимации.

Как создать опрос на AJAX

Как создать опрос на AJAX?


<div id="poll-container">
<h3>Poll</h3>
<form id='poll' action="poll.php" method="post" accept-charset="utf-8">
<p>Pick your favorite Javascript framework:</p>
<p><input type="radio" name="poll" value="opt1" id="opt1" /><label for='opt1'>&nbsp;jQuery</label><br />
<input type="radio" name="poll" value="opt2" id="opt2" /><label for='opt2'>&nbsp;Ext JS</label><br />
<input type="radio" name="poll" value="opt6" id="opt6" /><label for='opt6'>&nbsp;mootools</label><br /><br />
<input type="submit" value="Vote &rarr;" /></p>
</form>
</div>

Эта форма будет обработана на PHP в асинхронном режиме (без перезагрузки страницы), и когда мы получим ответ от сервера, в работу всупит Javascript (jQuery) и покажет нам результат голосования.

Демо

2. FancyUpload – загрузка файлов на Ajax (v3.0)

FancyUpload-достойная альтернатива стандартной загрузке файлов.

Загрузка файлов AJAX

AJAX-загрузка файлов

Загрузка файлов AJAX, её плюсы и достоинства перед другими:
Загружает файлы без перезагрузки страницы.
Можно загружать сразу несколько файлов.
Имеет анимированный прогресс-бар.
Легко настраивается с помощью CSS и XHTML.
Использует библиотеку Mootools.


<form action="../script.php" method="post" enctype="multipart/form-data" id="form-demo">
<fieldset id="demo-fallback">
<legend> Загрузка файла </ Legend>
<p>
Эта форма является лишь примером FancyUpload.
Если Вы видите эту часть, то что-то не впорядке с вашим исходным кодом.
</ P>
<label for="demo-photoupload">
Загрузить файл:
<input type="file" name="Filedata" />
</label>
</ fieldset>

Демо

3. Ajax Fancy Captcha - drag and drop каптча.

Ajax Fancy Captcha - jQuery плагин, который помогает вам защитить ваши веб-страницы от роботов и спамеров. Ajax каптча - новый, интуитивно понятный способ  ”проверить человечность” посетителя сайта. Для этого посетителю предлагается перетащить указанный пункт в круг.

AJAX каптча

AJAX каптча

Теперь посетителям нет необходимости разбирать непонятные картинки и вводить их значеия в поле или складывать цифры. Ajax Fancy Captcha - хороший шаг вперёд с точки зрения повышения юзабилити форм.

Демо

4. jQuery UI Слайдер для элементов SELECT

Плагин позволяет прогрессивно расширить функционал HTML-тэга <select>. Ползунок дает возможность визуально показать, “развернуть” на шкале значения поля <select>.

Select jQuery UI

Select jQuery UI

Идеально подойдет для выбора временного периода по шкале времени или цены, устраивающей покупателя в форме для поиска товара по цене.

Демо

5. jQuery Password Strength Meter - проверка паролей на прочность.

jQuery Password Strength Meter представляет собой подключаемый модуль, который с помощью смарт алгоритмов обрабатывает на лету входящие данные (пароль) и возвращает данные о его надежности.

Проверка паролей на прочность jQuery

Проверка паролей на прочность jQuery

Демо

И напоследок, не пропустите акцию от блога “Всё обо всём или попытки заработка“  и получите Бесплатный баннер на 2 месяца. Удачи!

Google Bookmarks Digg I.ua Linkstore Myscoop Communizm Ru-marks Webmarks Ruspace Linkomatic Kli.kz Web-zakladka Zakladok.net Reddit delicious Ma.gnolia Technorati Slashdot Yahoo My Web News2.ru БобрДобр.ru Ваау! Memori.ru rucity.com МоёМесто.ru Mister Wong

Если Вам понравилась эта статья,
подпишитесь на RSS !

Статистика использования браузеров.

мая 7, 2009

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

Статистика использования браузеров за апрель 2009г.

1. Fierfox - 50.58%

2. IE - 25.25%

3. Opera - 17.7%

4. Safari - 3.36%

5. Chrome - 3.04%

6. Konqueror - 0.07%

Радует, что Fierfox, совместно с другими браузерами, отобрали лидирующие позиции на рынке браузеров у всеми любимого Internet Explorer ‘ а

Статистика использования браузеров (по версиям) за апрель 2009г.

1. IE 6.0 - 13.61%

2. Fierfox 3.0.10 - 18.47%

3. Fierfox 3.0.9 - 10.91%

4. IE 7.0 - 9.23%

5. Fierfox 3.0.6 - 6.9%

6. Fierfox 3.0.8 - 6.76%

7. Opera 9.64 - 5.5%

8. Opera 9.63 - 5.03%

9. Fierfox 3.0.5 - 3.91%

10. Chrome 1.0.154 - 2.98%

11. Opera 9.62 - 2.51%

12. Fierfox 2.0 - 1.95%

13. Safari 528.5 - 1.67%

14. IE 8.0 - 1.67%

15. Fierfox 3.0.7 - 1.58%

16. Opera 9.61 - 1.39%

17. Fierfox 3.0.95 - 1.3%

18. Safari 525.25.1 - 1.3%

19. Fierfox 3.0 - 0.83%

20. Opera 10.00 - 0.74%

21. Opera 9.5 - 0.65%

22. Opera 9.6 - 0.65%

23. Opera 9.23 - 0.46%

Остальные встречаются настолько редко, что я даже не стал включать их в статистику. Жду не дождусь того дня, когда IE6 будет забыт и похоронен, но пока этого не случилось, он занимает 1 место (по версиям браузеров) и с ним необходимо считаться.

Статистика использования операционных систем за апрель 2009г.

1. Windows XP - 73.07%

2. Windows Vista - 11.45%

3. Mac Intel OSX - 4.89%

4. Linux - 4.45%

5. Windows 2000 - 3.4%

6. Ubuntu - 1.22%

7. Mac PPOSX - 0.69%

8. Windows 98 - 0.34%

9. Mandriva - 0.17

10. Windows 95 - 0.17%

11. Fedora - 0.15%

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

Вот собственно и всё. Если Вам интересно, как я собираю статистику, можете прочесть статью “11 плагинов wp, которыми пользуюсь сам“.

И на закуску вкусная акция от блога Все о SEO - “Прогон по закладкам за фотку!

490109215

Не знаю как называется, но под цвет сайдбара подходит.

Google Bookmarks Digg I.ua Linkstore Myscoop Communizm Ru-marks Webmarks Ruspace Linkomatic Kli.kz Web-zakladka Zakladok.net Reddit delicious Ma.gnolia Technorati Slashdot Yahoo My Web News2.ru БобрДобр.ru Ваау! Memori.ru rucity.com МоёМесто.ru Mister Wong

Если Вам понравилась эта статья,
подпишитесь на RSS !

Креативные обои c символикой Apple

апреля 27, 2009

Что делать дизайнеру, если муза ушла, все идеи реализованы, а незаконченный проект умоляет: “прикончи меня, не издевайся!”? Необходимо пуститься во все тяжкие в поисках вдохновения… Ниже приведены работы дизайнеров, у которых его навалом. Кто знает, может они и станут источником ваших новых блестящих мыслей, идей, и помогут дать жизнь проектам, которые будут вдохновлять и удивлять других…

d0b1d0b5d0b7d0b8d0bcd0b5d0bdd0b8-7

Напоминает запуск ракеты…

d0b1d0b5d0b7d0b8d0bcd0b5d0bdd0b8-5

Неправильно накрытый крышкой люк - куча скрытого подтекста…

d0b1d0b5d0b7d0b8d0bcd0b5d0bdd0b8-4Надгробная плита от Apple…

d0b1d0b5d0b7d0b8d0bcd0b5d0bdd0b8-8

Iphone… как много в этом звуке…

d0b1d0b5d0b7d0b8d0bcd0b5d0bdd0b8-1

Мало того, что телефон поламали, так ещё и паркет испортили…

d0b1d0b5d0b7d0b8d0bcd0b5d0bdd0b8-2

Apple…

d0b1d0b5d0b7d0b8d0bcd0b5d0bdd0b8-3

Для игры в гольф этот мячик уже не годится…
Блогун - монетизируем блоги

Диструкция повседневности - кладязь креатива. Удачи Вам в поисках идей и блестящих их реализаций!

Google Bookmarks Digg I.ua Linkstore Myscoop Communizm Ru-marks Webmarks Ruspace Linkomatic Kli.kz Web-zakladka Zakladok.net Reddit delicious Ma.gnolia Technorati Slashdot Yahoo My Web News2.ru БобрДобр.ru Ваау! Memori.ru rucity.com МоёМесто.ru Mister Wong

Если Вам понравилась эта статья,
подпишитесь на RSS !

3d приложения в WEB

апреля 22, 2009

Google O3D API

Google O3D API

O3D является открытым исходным кодом web-API для создания богатых интерактивных 3D приложений в браузере.
Этот API открывают на раннем этапе развития более широкому кругу разработчиков для создания открытого web-стандартa 3D графики.
Присоединяйтесь, будем вместе создавать новый web-стандарт.
Плагин O3D поддерживается в Windows, Mac OS, Linux.  Можете скачать плагин .

Примеры:

O3D пляж

1000 летающих чайников

1000 летающих чайников

1000 летающих чайников

Анимированная сцена

Анимированная сцена

Анимированная сцена

3d игра шашки

3D игра шашки

3D игра шашки

Все примеры 3d графики и анимации.

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

Google Bookmarks Digg I.ua Linkstore Myscoop Communizm Ru-marks Webmarks Ruspace Linkomatic Kli.kz Web-zakladka Zakladok.net Reddit delicious Ma.gnolia Technorati Slashdot Yahoo My Web News2.ru БобрДобр.ru Ваау! Memori.ru rucity.com МоёМесто.ru Mister Wong

Если Вам понравилась эта статья,
подпишитесь на RSS !

Проверка форм на jQuery

апреля 20, 2009

Проверка форм на jQuery

form_login

Проверка формы для комментариев с помощью плагина jQuery jquery.validation_form.js

В продолжение темы “проверка паролей на javascript” решил сделать плагин проверки форм для самой распространенной javascript библиотеки - jQuery.

Читать остальное »

Google Bookmarks Digg I.ua Linkstore Myscoop Communizm Ru-marks Webmarks Ruspace Linkomatic Kli.kz Web-zakladka Zakladok.net Reddit delicious Ma.gnolia Technorati Slashdot Yahoo My Web News2.ru БобрДобр.ru Ваау! Memori.ru rucity.com МоёМесто.ru Mister Wong

Если Вам понравилась эта статья,
подпишитесь на RSS !