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

TrustLink – новая белая база SeoPult

Всем добрый день. Давно не писал в блог, больше чем пол года. За это время многое успело случиться, я успел немного пересмотреть свои взгляды на жизнь, на работу и свои планы на будущее. Пока я отсутствовал на блоге ( не писал, но старался ответить на все вопросы в комментариях), блог на удивление подрос в плане посещаемости, количества читателей и что самое интересное, ТИЦ блога стал 10 (08.04.2010), несмотря на то, что на блоге более 6 месяцев не появилось ниодной статьи, за все время существования блога ( с марта 2009 г.) не было куплено ниодной ссылки, нисделано ниодного прогона. Короче говоря это все естественно и это не может не радовать.
А теперь к сути поста.
Сегодня была анонсирована новая биржа ссылок TrustLink от SeoPult, которая возможно станет серьезным конкурентом небезызвестной SAPE.ru. Пока ресурс находится на стадии бета тестирования, но уже доступны все функции для вебмастеров. Основное преимущество биржи заключается в гарантированном выкупе ссылок благодаря фильтрам SeoPult, по заверениям разработчиков системы – 60% ссылок раскупятся за 2 недели. Вполне вероятно, сайты из биржи станут новой белой базой SeoPult, так как в систему принимаются только качественные площадки, не участвующие в других биржах и с минимум тИЦ 10. А так как будет хороший постоянный спрос, то и цены будут выше.

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

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

селекторы css

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

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

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

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

htaccess

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

ajax - upload файлов

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

ajax - upload файлов

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

ajax - upload файлов

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

ajax - upload файлов

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 - функций для получения результата голосования без перезагрузки страницы, и придания опросу эффектов анимации.

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

Демо

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

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

Select jQuery UI

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

Демо

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

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

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

Демо

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

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