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

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

В этом туториале Вы узнаете, как создать опрос с использованием PHP и XHTML, а также jQuery 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, её плюсы и достоинства перед другими:
• Загружает файлы без перезагрузки страницы.
• Можно загружать сразу несколько файлов.
• Имеет анимированный прогресс-бар.
• Легко настраивается с помощью 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 Fancy Captcha - хороший шаг вперёд с точки зрения повышения юзабилити форм.

Демо

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

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

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

Демо

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

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

Демо

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

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

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

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

(далее…)

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

Давиче хотел найти  как сделать эффект мутной прозрачности как в Vist’е и наткнулся на интересную javascript библиотеку pixastic, о ней, собственно и пойдет речь.

Для начала покажу пример.

Довольно занятно не правда ли? И это без подмены изображений, на чистом javascript.

С помощью этой библиотеки к изображениям можно применять  следующие эффекты:

• Blend - наложение изображений
• Blur - размытие
• Blur Fast -  размытие (можно задать силу размытия)
• Brightness/Contrast - яркость/контраст
• Color Adjust - цвето-фильтры
• Color Histogram - цветовая гистограмма
• Crop - обрезание изображения
• Desaturate - чёрно-белое
• Emboss - рельефное изображение
• Flip Horizontally - отразить по-горизонтали
• Flip Vertically - отразить по-вертикали
• Glow - свечение
• Hue/Saturation/Lightness - оттенок / насыщенность / яркость
• Invert - инверсия
• Lighten - яркость
• Mosaic - мозаика
• Noise - шум
• Posterize - пастеризация
• Remove Noise - убрать шум
• Sepia - сепия
• Sharpen - четкость
• и.т.д

Область применения:

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

Кстати о наведении мыши, на сайте разработчиков не нашел как сделать так, чтобы при onmouseover применялся эффект, а при onmouseout - возвращались исходные значения. Пришлось сделать самому на jquery, скачать и просмотреть реализацию (39 Kb)  можно!

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

P.S. По просьбам читателей реализован обратный эффект, т.е. при загрузке страницы изображение - чёрно-белое (к примеру), а при наведении мыши становится цветным.

Скачать демо обратного эффекта.

P.P.S. Добавлен пример эффекта blur fast

Скачать демо blur-fast.

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

1. Лайтбокс Lightbox2

Лайтбокс - простой, ненавязчивый скрипт, используется для наложения изображения на текущую страницу. Легко и быстро настраивается и работает во всех современных браузерах. Особенности: можно использовать с группами изображений и легко переключаться между ними (предыдущее - следущее).  Лайтбокс анимированно ресайзится под размеры изображения. Используется prototype.

2. Cлайдер изображений jQuery Image Strip

jQuery Image Strip - слайдер изображений, с эффектом скольжения по-горизонтали. Используется jQuery.

3. Cлайдер изображений slideViewer  1.1

slideViewer 1.1 - простой слайдер изображений, с эффектом скольжения по-горизонтали. Построен на ненумерованных списках. Используется jQuery.

4. Cлайдер изображений Photo Slider

Photo Slider - слайдер изображений, отличается от остальных автоматической прокруткой изображений, с возможностью приостановки. Используется jQuery.

5. Обрезание изображений jQuery Thumbs

jThumb - динамично обвертывает изображения  и / или ссылки с изображениями в div. Вы можете задать им конкретные размеры (ширина и высота) в CSS файле. В кадр попадает середина изображения. Используется jQuery.

6. Слайдер изображений  jCarousel Lite

jCarousel Lite - очень легкая галерея, всего лишь 2 kb.  Позволяет прокручивать изображения, HTML - код. Используется jQuery.

7. Эффекты смены изображений jQuery Cycle Plugin

Cycle Plugin - плагин jquery, используется для создания эффектов при смене изображений в галерее.

8.  Галерея с миниатюрами lightweight image gallery

lightweight image gallery - галерея с миниатюрами. Используется javascript.

9. Галерея с миниатюрами Galleria

Galleria - красивая галерея с миниатюрами. Особенности: показ описания изображения, возможность  листания изображений (предыдущее - следующее) Используется jQuery.

10.  Простая галерея на HTML - HTML vs jQuery

html vs jquery - самая простая галерея. В ее основе лежит html - тэг “marquee”. Управление галереей осуществляется небольшими функциями javascript. Код галереи - 10 строк (галерея + управление). Используется HTML.

Вот, собственно, и всё! Желаю блестящих реализаций всех ваших идей.

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

WEB приложения разрастаются как на дрожжах примочками для удобства пользователей, в основном благодаря технологии AJAX. Если объединить аккуратную функциональность PHP и одаренность JavaScript, Вы сможете получить потрясающие результаты. Чтобы момочь обуздать эту технологию, хочу поделиться методами оказания помощи вашему сайту.

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

1. Графики

pChart представляет собой PHP класс, ориентированный на создание псевдо таблиц. На сегодняшний день большая часть библиотеки распространяется на бесплатной основе.
Данные могут быть получены из запросов SQL, CSV файлов, или вручную. Этот проект все еще находится в стадии развития и новые функции и исправления производятся каждую неделю. Фокус был сделан на качество , чтобы графики выглядели как конфетки. Скорость резко увеличилась, в сравнении с первыми опытами, разработчики обещают продолжать оптимизировать код!

2. PHP компонент: Автозаполнение

PHP компонент создан в целях создания поисковой формы с автозаполнением, используется PHP и MySQL.

Этот прием стал очень популярен в последнее время. Яркие приемы применения автозаполнения - строка поиска в поисковых системах (Google, Yandex и т.д. ).

3. Анимированное удаление записей - AJAX. Используется MooTools.

Если Вы огромный поклонник WordPress, тогда знаете, что когда Вы нажмете на ссылку удалить (например комментарий или запись), тогда удаляемый пункт становится красным, и исчезает. Вот как можно достичь этой функциональности с MooTools JavaScript.

if(isset($_GET['delete']))
{
$query = 'DELETE FROM my_table WHERE item_id = '.(int)$_GET['delete'];
$result = mysql_query($result,$link);
}

4. Валидация и проверка данных с помощью PHP фильтров.

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

5. Как создать Логин - систему для простого веб-сайта

В этом туториале Вы узнаете, как создать систему входа на сайт с помощью PHP и MySQL. В нём рассмотрены многие функции: в том числе MySqli, подготовленные приглашения, jQuery, классы сессии, cookies и т.д.

6. Как создать свою первую простую CMS

В этом туториале вы научитесь создавать простые PHP классы:
Создание базы данных
Подключение к базе данных
Показ формы с двумя полями
Сохранение данных формы в базу данных
Показ сохраненных данных из базы данных

7. Как сделать голосование в стиле Reddit с помощью PHP, MySQL и jQuery

Если вы заходили на Reddit, Вы наверное заметили, каким образом люди там голосуют. Вы можете голосовать за или голосовать против. Достаточно интересно, да? Этот туториал поможет Вам создать такую систему голосования с помощью jQuery, PHP и MySQL.

8. Простая постраничная навигация на PHP и Mootools

Это PHP класс, который обрабатывает запросы баз данных, создает AJAX страницу навигации и даже создает Javascript для Вас.

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

9. Кэширование динамических страниц PHP – ЛЕГКО!

Вы ищете решение для кэширования тяжелых страниц и преобразования их в статическую HTML версию на некоторое время? Вот это решение для буферизации вывода.

10. Дерево каталогов на PHP и jquery

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

11. jQuery - PHP И Ajax с Twitter API

Узнайте, как можно с использованием jQuery, PHP, и немного AJAX подключиться к Twitter API и вернуть результат. При загрузке HTML вызывается функция JavaScript getSearch (), чтобы возвращать Twitter API результаты каждые 30 секунд.

12. Как сделать проверку стойкости пароля как в Google

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

13. Как создать резервную копию базы данных в XML-файле с использованием PHP.

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

<database name="my_database">
<table name="wp_comments">
<columns>
<column name="comment_ID" blob="0" maxlength="" multiple_key="0" not_null="1" numeric="1" primary_key="1" table="wp_comments" type="int" default="" unique_key="0" unsigned="1" zerofill="0" />
<column name="comment_post_ID" blob="0" maxlength="" multiple_key="1" not_null="1" numeric="1" primary_key="0" table="wp_comments" type="int" default="" unique_key="0" unsigned="0" zerofill="0" />

14. Добавить пользовательские результаты поиска Google на Ваш сайт с использованием PHP .

Узнайте, как интегрировать пользовательский поиск Google в результаты поиска на Вашем сайте, и настроить его стиль по своему вкусу.

15. Как отправить без нервотрепки бесплатные и надежные HTML сообщения с использованием PHP.

Простая функция, которая просто передает HTML по электронной почте в простом текстовом формате с вложениями, используя AOL 2.5.

16. Как проверить форму с двух сторон (пользовательской и серверной) с помощью PHP и jQuery.

В этом туториале рассказывается как проверить свою форму с помощью PHP и jQuery с «двух сторон»: на стороне клиента (с использованием JavaScript, jQuery) и стороне сервера (с помощью PHP). Думаю Вам будет интересно узнать о том, как использовать регулярные выражения для проверки различных типов электронной почты, паролей и многое другое.

17. Как создать чат с использованием PHP и AJAX (с jQuery)

Как создать динамический AJAX-чат, основанный на jQuery с нуля. Будет очень интересно узнать, как использовать AJAX функции jQuery и как они могут быть использованы для вставки и выборки данных из базы данных MySQL через PHP асинхронно.

18. 3 способа сжатия CSS-файлов с помощью PHP

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

19. «Умное» изменение размера изображения

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

20. Контактная форма на PHP

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

21. PHP И jQuery загрузка изображения и обрезание v1.2

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

Эта статья была вольным переводом статьи “20 Useful PHP Components & Tutorials for Everyday Project“.

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