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

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


21 полезный компонент PHP и туториал для повседневных web-проектов.

апреля 2, 2009

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

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

1. Графики

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

php-components1

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

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

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

php-components2

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);
}

php-components3

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

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

php-components4

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

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

php-components5

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

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

php-components6

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

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

php-components7

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

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

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

php-components8

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

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

php-components9

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

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

php-components10

11. jQuery - PHP И Ajax с Twitter API

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

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

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

php-components11

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

php-components12

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

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

php-components13

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

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

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

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

php-components14

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

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

php-components15

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

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

php-components16

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

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 !

Шпаргалка по css

марта 30, 2009

Открываю новую рубрику “Шпаргалка“.
В ней буду описывать редко используемые, но иногда так нужные фичи, хаки, приемы и просто синтаксис языков, которых знаю. Так получилось, что честь открыть рубрику выпала на долю CSS.
Ну, поехали…

1.Как сделать полупрозрачный блок


#test_opacity
{
filter:progid:DXImageTransform.Microsoft.Alpha(opacity=50);   /* IE 5.5+*/
-moz-opacity: 0.5;   /* Mozilla 1.6 и ниже */
-khtml-opacity: 0.5;   /* Konqueror 3.1, Safari 1.1 */
opacity: 0.5;   /* CSS3 - Mozilla 1.7b +, Firefox 0.9 +, Safari 1.2+, Opera 9 */
}

Для IE
100-полностью не прозрачный
0-полностью прозрачный
Для остальных
1-полностью не прозрачный
0-полностью прозрачный

Работет для всех элементов, наследуется.

2.png-прозрачность для фонового изображения в IE-6


#test_png
{
background-image: none;  /*Важно!*/
}
/*Для всех, кроме IE6 (IE6 не знает что такое [id] или [class] и пропускает описание свойств)*/
#test_png[id]
{
background-image:url(png-image.png) no-repeat;
}
/*Только для IE - остальные не знают *html и пропускают*/
*html #test_png
{
filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='png-image.png', sizing='scale');
}

3. Закругленные углы на css (к сожалению, пока только fierfox)


#test_corners
{
border-radius:5px;
-moz-border-radius: 5px;
}

4. Одна граница между ячейками таблицы вместо двух


table
{
border-collapse:collapse;
}

5. Как перечисляются отступы (padding;margin)

margin_padding


#test_padding_margin
{
margin: 12px 3px 6px 9px;
padding: 12px 3px 6px 9px;
}

Отступы перечисляются по-часовой стрелке:
1.top
2.rigtht
3.bottom
4.left

6. Как подгрузить css для определенного браузера

Для всех IE


<!--[if IE]>
<link rel="stylesheet" type="text/css" href="for_IE.css" />
<![endif]-->

Только для IE5


<!--[if IE 5]>
<link rel="stylesheet" type="text/css" href="for_IE5_only.css" />
<![endif]-->

Только для IE5.0


<!--[if IE 5.0]>
<link rel="stylesheet" type="text/css" href="for_IE5.0_only.css" />
<![endif]-->

Только для IE6


<!--[if IE 6]>
<link rel="stylesheet" type="text/css" href="for_IE6_only.css" />
<![endif]-->

Только для IE6 и выше (6,7, 8, …)


<!--[if gte IE 6]>
<link rel="stylesheet" type="text/css" href="for_IE6_and_up.css" />
<![endif]-->

Только для IE меньше 6 (5.5 ,5.0 , …)


<!--[if lt IE 6]>
<link rel="stylesheet" type="text/css" href="for_IE_lower_6.css" />
<![endif]-->

Только для IE6 и меньше (6, 5.5 ,5.0 , …)


<!--[if lte IE 6]>
<link rel="stylesheet" type="text/css" href="for_IE_lower_6_or_equal.css" />
<![endif]-->

Только для IE старше 6 (7, 8, …)


<!--[if gt IE 6]>
<link rel="stylesheet" type="text/css" href="for_IE_greater_than_6.css" />
<![endif]-->

7. В каком порядке перечисляются свойства фона



#test_background
{
background: #000 url(image.png) repeat;
}

1. цвет фона - (background-color)
2. фоновое изображение - (background-image)
3. повторение фонового изображения - (background-repeat)

Пока всё, если что-то вспомню, допишу в эту же статью, новую по css писать не буду. Хочу, чтобы всё было в одном месте.

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 !

Блогун - начинаем процесс монетизации

марта 27, 2009

Сегодня через rss-подписку пришел новый пост от  Блог в помощь блогерам, заметил  раздел “Работа для блогов” и подумал: “надо бы начать монетизировать свой блог”. Решил начать с Блогуна.

Об успехах отпишусь, как будут результаты.

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 !

Золотые иконки RSS

марта 26, 2009

Да, знаю, RSS иконок итак хватает на просторах интернета, но! Я хочу и я выложу свои, так сказать “фирменные” иконки RSS и не простые, а золотые! Почему “Фирменные”? Да потому что имя домена - goldblog, поэтому здесь должны быть именно золотые rss’ки.

rss_goldblog_com_ua

золотые иконки RSS

Скачать пак золотых RSS иконок в png-формате c прозрачным фоном, размером 1000*1000 можно!

rss_goldblog_com_ua.rar (346 Kb)

Юзайте на здоровье

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 !

HTML vs Jquery

марта 24, 2009

В этой статье я расскажу как сделать простейшую галерею на html. Название “HTML vs Jquery” ,безусловно преувеличено. Чистый html
не пожет конкурировать как с jquery, так и с другими библиотеками, но всё зависит от поставленной задачи.
Если нам необходимо сделать просто прокрутку изображений, тогда конечно самым простым способом будет использование HTML-тэга marquee. И если нам будет необходимо использовать управление галереей, тогда нам не обойтись без небольших javascript‘ов.

Пример того, что у меня получилось:

Галерея на HTML

Галерея на HTML

HTML Код:


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>HTML marquee | HTML vs Jquery | goldblog.com.ua</title>
<!--Подключаем стили сss-->
<link href="style.css" rel="stylesheet" type="text/css" />
</head>
<body>
<fieldset class="gallery">
<legend>HTML</legend>
<!--Формируем бегущую строку-->
<marquee id="gall" scrolldelay="0" scrollamount="3" direction="up" truespeed
onmouseover='document.getElementById("gall").stop();'
onmouseout='document.getElementById("gall").start();'>
<img src="h.gif" ><img src="t.gif" ><img src="m.gif" ><img src="l.gif" >
</marquee>
</fieldset>
<fieldset class="manage">
<legend>Управление HTML-галлереей</legend>
<!--Устанавливаем кнопки управления галереей-->
<!--Запустить бегущую строку-->
<div id="play"   onclick='document.getElementById("gall").start();'></div>
<!--Остановить бегущую строку-->
<div id="paused" onclick='document.getElementById("gall").stop();'></div>
<!--Изменить направление движения бегущей строки-->
<div id="up"     onclick='document.getElementById("gall").direction="up";'></div>
<div id="left"   onclick='document.getElementById("gall").direction="left";'></div>
<div id="right"  onclick='document.getElementById("gall").direction="right";'></div>
<div id="down"   onclick='document.getElementById("gall").direction="down";'></div>
</fieldset>
<a href="http://goldblog.com.ua">goldblog.com.ua</a>
</body>
</html>

В тело галереи можно вставить всё, чего душа пожелает: блоки, ссылки, изображения и тд…

Описание javascript-функций:

  • document.getElementById(”gall”).start() - запускает бегущую строку с id=”gall
  • document.getElementById(”gall”).stop() - останавливает бегущую строку с id=”gall
  • document.getElementById(”gall”).direction=”up” - заставляет бегущую строку двигаться вверх
  • document.getElementById(”gall”).direction=”left” - заставляет бегущую строку двигаться влево
  • document.getElementById(”gall”).direction=”right”- заставляет бегущую строку двигаться вправо
  • document.getElementById(”gall”).direction=down”- заставляет бегущую строку двигаться вниз

Рабочий пример HTML vs jquery.rar(14 Kb)

Юзайте на здоровье

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 !