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

CSS - один из сымых мощных инструментов, для веб-дизайнеров и разработчиков web-сайтов и приложений (если не самый мощный). С его помощью мы можем полностью преобразовывать внешний вид сайта всего за пару минут. Но, несмотря на тот факт, что все мы хорошо осведомлены о его полезности, CSS селекторы до сих пор не используются в той степени, которую заслуживают, и мы иногда перегружаем наш HTML чрезмерным количеством ненужных классов и идентификаторов, div’ами и span’ами.

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

(далее…)

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

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

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

После подсказок поговорим о 8 самых распространенных ошибках. Что ж, начнём?

(далее…)

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

Современные сайтостроители не могут себе позволить обычный способ загрузки файлов с помощью поля <input type=”file” />. Он морально устарел по нескольким причинам:

1. Можно загрузить только один файл.

2. Требует перезагрузки страницы.

3. Тяжело настроить его внешний вид.

Требуется инструмент, который обладал бы следующими качествами:

1. Легко подключаемый.

2. Легко настраиваемый как функционально, так и визуально.

3. Загрузка нескольких файлов.

4. Прогрессбар (показ процесса загрузки).

5. Кроссбраузерность (работоспособность во всех современных браузерах).

Для меня таким инструментом стал FancyUpload - Swiff meets Ajax (v3.0).

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

1. Вот так он, собственно выглядит на моём сайте… Жмём на ссылку для выбора файлов, подлежащих загрузке.

2. Выбираем файлы , можно даже несколько одновременно. Жмем открыть.

3. Появляются превьюшки с названиями и размером файлов, которые загружаем и это при том, что мы их ещё не загрузили! Жмем загрузить фотографии.

4. Начинается загрузка файлов. Два прогрессбара. Первый показывает общий прогресс, второй - файла, который грузится в данный момент.

5. Если Вы внимательно разглядывали картинки, то, наверное заметили ссылку очистить список. В версии, которую я “затачивал” под себя она без перезагрузки страницы удаляет список загрузок и соответствующие ему файлы на сервере.

В моей реализации при загрузке создаются три копии картинки :

1. Иконка (20px*Xpх)
2. Миниатюра (150px*Xpx)
3. Большое изображение(600px*Xpx)

Ресайзятся пропорционально. Исходное изображение тут же удаляется. Этим я “предохраняю” сервер от неоправданно больших и “тяжелых” изображений.

На миниатюру и большое избражение вставляется водяной знак.

С помощью FancyUpload’а можно загружать файлы размером до 2Гб!

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

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

1. imageresize - ресайзит изображение пропорционально, наносит водяной знак на получившееся изображение.

// $outfile -  путь к файлу, который получится после преобразования
// $neww - ширина в px, к которой преобразуем
// $infile - путь к файлу, который преобразуем
// $quality - качество изображения в %
// вызов функции выглядит примерно так:
//
// imageresize("images/out_image.jpg",150,"uploads/image.jpg",100);
//
function imageresize($outfile,$neww,$infile,$quality) {

$im=imagecreatefromjpeg($infile);

$newh=$neww*imagesy($im)/imagesx($im);

$im1=imagecreatetruecolor($neww,$newh);
imagecopyresampled($im1,$im,0,0,0,0,$neww,$newh,imagesx($im),imagesy($im));
if($neww>=140)//добавляем водяной знак на изображения больше среднего размера
{              //путь к изображению с водяным знаком
$image_logo = "../../../images/logo.png";
$im_logo = imagecreatefrompng($image_logo);
imagecopy($im1, $im_logo, 0, 0, 0, 0, 150, 25);
}
imagejpeg($im1,$outfile,$quality);
imagedestroy($im);
imagedestroy($im1);
}

2. Удаление файла

//удаляем исходный файл
if(@file_exists('upload/file.jpg'))
{
unlink('upload/file.jpg');
}

По просьбам читателей выкладываю исходники своего варианта этого загрузчика: скачать ajax-uploader.

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

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 !

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 !