Набор передовых PHP фреймворков
PHP - скриптовый язык программирования, который позволяет быстро и относительно легко создавать серверные приложения для сайтов любого уровня, будь то домашняя страничка, блог, форум или огромный портал.
И уж коль вы работаете с этим языком, значит вам пригодятся размещенные в этом посте ссылки. Все они ведут на сайты различных PHP-фреймворков, которые сделают вашу работу в десятки раз проще, помогут решить многие типичные проблемы, избавят от множества ошибок и съэкономят вам сотни часов времени разработки.
Akelos
Cake PHP
Code Igniter
Kohana
Prado
Seagull
Symfony
Yii
Zend Framework
Zoop
22 передовых текстовых эффекта с помощью CSS
Вы скорее всего сталкивались с этими эффектами, когда бродили по сети. Они уже достаточно часто встречаются на сайтах (по крайней мере в "западном интернете") и постепенно набирают популярность в современном вэб-дизайне. Самое классное во всех этих эффектах - это то, что для их использования не нужно применять тяжеловесной графики и кучи изображений, сжирающих трафик и тормозящих загрузку ваших страниц. Все представленные эффекты создаются с помощью обычного CSS, достаточно просто вписать соответствующие стили в ваш код и вы получите превосходный результат.
Материал, собранный в этом обзоре, соответствует категории "Must Read". Пересмотрите, перечитайте, попробуйте все описанные техники и когла вы в следующий раз будете создавать дизайн для очередного сайта, комбинируя в Photoshop слои, тени, рельефы и прочие "штучки", не забудьте, что большинство из этих "наворотов" можно реализовать простым CSS кодом.
Типографика играет ведущую роль в современном вэб-дизайне, и ее нельзя не дооценивать. Поэтому прочтите внимательно все предлагаемые статьи и туториалы. Я думаю, вы найдете много полезной информации и с успехом примените ее при создании собственных потрясающих дизайнов. К сожалению все ссылки ведут на англоязычные ресурсы, но я думаю, пытливому уму это не помеха 
Создание вдавленных и выпуклых надписей с помощью CSS-теней.
Поворот текста с помощью CSS
Отображение даты с помощью спрайтов
Градиентные заливки текста с помощью CSS
Другие варианты градиентных текстов
Добавление эффекта "грандж" с помощью простого CSS-кода
Два простых способа создания рельефного текста
Техника "выдавливания текста" с помощью CSS
Кодовое имя "Радуга"
Симпатичные примеры смеси CSS и JavaScript ,предоставленные DragonInteractive, покажут как создавать двухцветные градиентные переходы для текста с тенями и бликами.
Падающая тень с помощью CSS
Отображение текста с тенью
Очень подробная статья о создании красивых и профессиональных текстовых эффектов с тенями, рельефом, бликами и свечением, выполняемых всего за несколько шагов.
Фоновые градиенты
Один из самых популярных нынче эффектоы - фоновый градиент - теперь можно создать несколькими строками CSS-кода.
CSS-тени в Opera, Safari, FireFox и других броузерах
Отсечение текста
Реализация sIFR3 на вашем сайте
Внедрение любых шрифтов в ваши страницы с помощью FLIR
Некоторые советы по типографике для создания полноценного дизайна ваших сайтов
Правильное использование заголовков на ваших страницах
Современные техники типографики средствами CSS
10 примеров достижения прекрасных типографических результатов с помощью CSS
Отличная статья, описывающая простые, но очень эффективные CSS-трюки по созданию красивых типографических эффектов всего несколькими строками кода.
Типографика: разделение и слияние
Статья, описывающая, как, с помощью типографики, правильно разделять потоки текста, создавая секции, разделы и блоки.
Применение типографических элементов в дизайне
5 принципов и идей по использованию текста в дизайне
AJAX — WEB 2.0 за 5 минут
Сегодня, в век WEB 2.0, строить сайты из статичных страниц просто пошло.
Суть WEB 2.0 заключается вовсе не в "стеклянных" кнопочках и раздвижных меню (как думают многие), а в интерактивности. А это значит, что страницы сайта должны реагировать на "внешние раздражители" (команды пользователя) без такой привычной и такой всем давно надоевшей полной перезагрузки. Добиться подобного функционала можно используя Flash или AJAX. Про флэш разговор отдельный, долгий и спорный, а вот AJAX — это как раз то, что нужно.
Сразу хочу обратить ваше внимание на две вещи:
-
во-первых, все примеры в этой статье на самом деле не совсем AJAX-овые. Это скорее AJAH, т.е. сервер возвращает простой HTML, вместо XML, как того требует технология AJAX.
-
во-вторых, я не стал размещать здесь действующих демонстраций — на мой взгляд примеры настолько просты и примитивны, что повторить их на своей локальной машине дело пары минут. А мне просто лень.
Если Вы никогда прежде не использовали AJAX, то может показаться, что все там сложно и запутанно. Но на самом деле все совсем не так. И в этой паре килобайт текста я вам дам всю необходимую информацию, чтобы начать использовать AJAX, даже если ваш сайт не имеет движка и состоит только из статичных HTML-страниц.
Приступим.
Для того, чтобы не лезть в дебри того, как выполняются HTTP-запросы, не рыться в форматах протоколов и не рвать себе волосы из-за несовместимости броузеров, я буду (и настоятельно рекомендую вам) использовать javascript-фреймфорк, имя которому jQuery. Это прекрасная библиотека, способная решить подавляющее большинство проблем, встающих перед дизайнером, создающим интерактивный сайт. Если у вас есть трудности с javascript, смело вставляйте в свои страницы команду загрузки jQuery и забудьте о своих проблемах. Анимация, визуальных эффекты, гибкое управление DOM, асинхронные запросы к серверу и многое-многое другое — все это больше не будет для вас проблемой — jQuery сделает всю черную работу за вас. Естественно, что из всех фантастических возможностей jQuery, в этой статье я остановлюсь только на работе с AJAX.
Итак, первое, что нужно сделать — подключить фреймворк к вашей странице. Поскольку вся библиотекуа представляет собой всего один обычный файл с java-скриптом, то и подключается он стандартным HTML-тэгом:
<script type="text/javascript" src="jquery.js"></script>
Обычно его располагают в секции <head> страницы.
Ок, библиотека подключена, что дальше?
Начнем с простейшей вещи — загрузки контента внутрь нашей страницы. Для примера вставим внутрь своей страницы такой код:
<div id="my_container" style="background: yellow; width: 300px; height: 200px;"></div>
Этот код создаст прямоугольную область 300х200 точек, залитую ядовитым желтым цветом. Эта область — наш контейнер, в который мы и будем загружать данные. Но эти данные кто-то должен предоставить... Поэтому сделаем файл, который будет посылать некий ответ на наш запрос. Для этого создадим HTML-файл, например, такого банального содержания:
<H1>Hello from ajax!</h1>
Сохраним его на сервере под именем text.html (но вы, естественно, можете дать любое имя).
Теперь вернемся к нашей странице и добавим в нее функцию загрузки содержимого:
<script>
function mytest()
{
$('#my_container').load('text.html');
}
</script>
О том, как работают селекторы jQuery можете прочесть в интернете, статей на эту тему уйма, я лишь скажу, что обратиться к любому элементу DOM (или набору элементов),можно просто передав в специальную функцию $(...) идентификатор или имя класса в формате CSS. Не понятно?
Ну смотрите, в CSS изменить свойства нашего контейнера (например, изменить его фоновый цвет) можно следующей "командой":
#my_container { background: red;}
Броузер понимает запись #my_container как некую ссылку на элемент с id="my_container", точно так же работает и jQuery — запись $('#my_container') указывает фреймворку, что мы собираемся работать с элементом DOM, имеющим id="my_container".
Функция $('#my_container') вернет объект jQuery, который имеет массу методов, выполняющих самые разные действия. Но, поскольку нас интересует загрузка содержимого в наш контейнер, то мы воспользуемся методом load(). Ему в качестве параметра передается URL, с которого необходимо получить данные. В моем примере я обращаюсь к ранее созданному HTML-файлу text.html. Т.е. после выполнения функции mytest() внутри контейнера будет помещено содержимое нашего файла (в данном примере это будет надпись "Hello from ajax!").
Итак, функция загрузки готова, осталось как-то ее активировать (запустить). Не стану изобретать велосипед и просто добавлю на страницу ссылку, кликнув по которой пользователь запустит наш скрипт. Код:
<a href="javascript:void(0);" onclick="mytest();">Run!</a>
Итак, полный код примера:
<html>
<head>
<script type="text/javascript" src="jquery.js"></script>
<script>
function mytest() { $('#my_container').load('text.html'); }
</script>
</head>
<body>
<div id="my_container"
style="background: yellow; width: 300px; height: 200px;">
</div>
<a href="javascript:void(0);" onclick="mytest();">Run!</a>
</body>
</html>
Сохраните файлы index.html, jquery.js и text.html в одной папке, откройте index.html в вашем любимом броузере, кликните по ссылку Run! и насладитесь динамической загрузкой контента БЕЗ перезагрузки самой страницы!
Сложно? Не-а!
Думаю не стоит упоминать, что таким способом вы можете загружать контент в любой контейнер вашей страницы будь то div, span или любой другой тэг. Например командой $('body').load('text.html'); вы полностью замените все содержимое вашей страницы. А с использованием более сложных селекторов вы можете одновременно загрузить контент сразу в несколько контейнеров.
Ок, идем дальше.
Как правило от простой загрузки статичного контента в контейнеры проку не очень много. Гораздо чаще встречается ситуация, когда нужно отправить серверу какие-то данные и получить ответ, который, затем необходимо всунуть в контейнер. Решается эта задача так же просто, но сперва давайте создадим серверный скрипт, который будет получать данные с нашей страницы и отправлять ответ.
Продолжаю банальничать. Наш скрипт будет получать со страницы имя пользователя и отправлять назад приветствие. Файл будет зваться name.php. Код:
<?php echo '<h1>Hello '.$_POST['n'],'</h1>'; ?>
Мы будем отправлять данные (введенное имя) в скрипт методом POST (а почему бы и нет?) в переменной n и получать в ответ фразу 'Hello …' с вставленным туда именем.
Слегка модифицируем нашу страницу — добавим поле для ввода имени:
Enter your name: <input id="n" value=""><br>
Так же придется изменить и функцию mytest(). Теперь она будет выглядеть вот так:
function mytest()
{
nnn = $('#n').attr('value');
$('#my_container').load('name.php', {'n': nnn});
}
Первой командой мы считываем значение атрибута value из нашего поля ввода и сохраняем его в переменной nnn, а второй командой вызываем наш серверный скрипт с передачей ему считанного имени и занесением ответа в наш контейнер.
Внимание! Этот пример использует серверный скрипт, поэтому на вашей локальной машине (без установленного вэб-сервера и интерпретатора PHP) он не сработает. Имейте это в виду прежде чем материться в комментах :)
Ну вот мы уже имеем полностью интерактивную страницу с запрограммированным поведением. В принципе этой информации уже достаточно, чтобы соорудить сколько угодно сложное взаимодействие с пользователем. Но мы пойдем дальше и решим еще пару часто возникающих проблем. Начнем с человеческой лени. ;)
Проблема встает, когда ваша форма содержит десятки элементов ввода — радио-кнопок, чек-боксов, полей ввода и т.д. Писать код, считывающий все эти значения, чтобы передать их скрипту — не самое приятное занятие. К тому же далеко не всегда полученные данные нужно тупо поместить в контейнер, гораздо чаще требуется провести еще кое-какую обработку полученной информации уже на стороне клиента. Можно, конечно, запихнуть их в скрытый контейнер и потом пропарсить, но такой подход никак нельзя назвать элегантным решением. Поэтому будем искать другой подход.
И тут нам на помощь приходит еще один метод jQuery — post(). Он делает тоже, что и load — передает данные на сервер и получает ответ, но при этом он не изменяет содержимое DOM. Вместо этого он позволяет создать функцию-обработчик полученных данных. Начнем, как и раньше, с серверного скрипта. Теперь он будет получать два значения: имя пользователя и его возраст и возвращать приветствие и год рождения пользователя (текущий год минус возраст).
Код:
<?php
echo '<h1>Hello '.$_POST['n'],'</h1>';
echo '<p>You was born in '.(date("Y")-$_POST['a']).'.</p>';
?>
Код страницы так же будет изменен. Приведу его полностью, чтобы было меньше путаницы:
<html>
<head>
<script type="text/javascript" src="jquery.js"></script>
<script>
function mytest()
{
$.post('name.php', $('#myform').serialize(), function(data)
{
$('#my_container').html(data);
});
}
</script>
</head>
<body>
<div id="my_container" style="background: yellow;
width: 300px; height: 200px;"></div>
<form id="myform">
Enter your name: <input name="n" value=""><br>
Enter your age: <input name="a" value=""><br>
</form>
<a href="javascript:void(0);" onclick="mytest();">Run!</a>
</body>
</html>
Как видите, теперь я создал форму и использовал два поля — для имени и для возраста. И теперь эти поля не имеют идентификаторов, зато имеют имена.Причина проста — идентификаторы нам не нужны, т.к. мы больше не будем "вручную" считывать данные из полей, этим займется метод serialize(), который сам соберет все данные из формы и упакует их в формат, понятный для метода post(). В свою очередь, метод post() (в отличии от load()) не требует обязательного определения целевого контейнера. Вместо этого он принимает третьим параметром функцию, которая будет обрабатывать полученные с сервера данные. В данном примере она просто помещает их в наш старый контейнер.
Теперь, если вам нужно передать на сервер больше данных, то просто добавьте в форму сколько угодно полей различных типов (радио-кнопки, текстовые области, пароли, чек-боксы). Больше никаких изменений в странице производить не нужно — фреймворк сам определит количество и типы полей и сам соберет из них данные для отправки. Выходит, что для расширения функционала никаких лишних телодвижений с вашей стороны не потребуется. Просто добавь воды... ;)
Ну вот, на этом можно было бы и закончить, если бы не одно "но". При всей простоте, гибкости, мощности и привлекательности, описанный выше способ имеет одно ограничение — вы не сможете с его помощью закачать на сервер файлы. А очень хочется...
Но решение, как всегда, уже давно существует! Просто придется подключить к jquery один маленький (всего 18 килобайт) плагин — jquery.form.js. Он упрощает отправку данных на сервер до предела — вам вообще ничего не придется программировать :)
Не станем здесь городить огород с реальной загрузкой файлов, просто выведем данные о загруженном файле. Код скрипта (файл file.php):
<?php var_dump($_FILES); ?>
И полный код страницы:
<html>
<head>
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript" src="jquery.form.js"></script>
<script>
$(document).ready(function()
{
$('#myform').ajaxForm(
{
beforeSubmit: function() { alert('start uploading'); },
success: function(data) { $('#my_container').html(data);}
});
});
</script>
</head>
<body>
<div id="my_container" style="background: yellow;
width: 300px; height: 200px;"></div>
<form id="myform" method="POST"
enctype="multipart/form-data"
action="file.php">
File: <input type="file" name="img"><br>
<input type="submit" name="upload" value="Upload!">
</form>
</body>
</html>
Чуть комментариев к коду.
-
как уже было сказано, сразу за библиотекой jquery загружаем плагин jquery.form.js
-
"жуткая" конструкция $(document).ready(...); всего навсего указывает функцию, которую необходимо выполнить сразу после загрузки страницы. Здесь нам это нужно, чтобы указать плагину, какую именно форму ему придется обрабатывать.
-
$('#myform).ajaxForm(...) — выбираем форму и задаем для нее две функции. Первая будет вызвана перед началом отправки данных (в данном примере она покажет alert-окно с надписью 'start uploading'), а вторая — после получения ответа (она поместит ответ в наш контейнер).
-
все, больше ничего делать не нужно. Всю необходимую информацию (список полей, их типы, адрес серверного скрипта и т.д.) плагин возьмет из формы.
Надеюсь, что этот скромный пост (и пол-часа ваших собственных экспериментов) навсегда закроют для вас тему использования AJAX на ваших сайтах. Читайте, изучайте, экспериментируйте, пишите комменты... ;)
