• Главная
  • Оглавление
  • Обратная связь
  • Лента RSS
  • Правила
Что здесь уже нашли

Набор передовых PHP фреймворков

07 февраля 2010, 03:45

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

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

Akelos
 

 

Cake PHP
 

 

Code Igniter
 

Kohana
 

Prado
 

Seagull
 

Symfony
 

Yii
 

Zend Framework
 

Zoop
 

Тэги: php framework, серверные скрипты, фреймворки для создания сайтов
Комментариев: 6

22 передовых текстовых эффекта с помощью CSS

07 января 2010, 18:25

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

 

 

Тэги: CSS javascript, дизайн сайтов, стили страниц, типографика, шрифты
Оставить комментарий

AJAX — WEB 2.0 за 5 минут

29 декабря 2009, 08:34

Сегодня, в век 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-файл, например, такого банального содержания:

Содержимое файла text.html
<H1>Hello from ajax!</h1>

Сохраним его на сервере под именем text.html (но вы, естественно, можете дать любое имя).

Теперь вернемся к нашей странице и добавим в нее функцию загрузки содержимого:

Скрипт загрузки контента
<script>
function mytest()
{
   $('#my_container').load('text.html');
}
</script>

О том, как работают селекторы jQuery можете прочесть в интернете, статей на эту тему уйма, я лишь скажу, что обратиться к любому элементу DOM (или набору элементов),можно просто передав в специальную функцию $(...) идентификатор или имя класса в формате CSS. Не понятно?

Ну смотрите, в 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>

Итак, полный код примера:

Полный код файла index.html
<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. Код:

Файл name.php
<?php
  echo '<h1>Hello '.$_POST['n'],'</h1>';
?>

Мы будем отправлять данные (введенное имя) в скрипт методом POST (а почему бы и нет?) в переменной n и получать в ответ фразу 'Hello …' с вставленным туда именем.

Слегка модифицируем нашу страницу — добавим поле для ввода имени:

Поле ввода имени
Enter your name: <input id="n" value=""><br>

Так же придется изменить и функцию mytest(). Теперь она будет выглядеть вот так:

Измененная функция mytest()
function mytest()
{
    nnn = $('#n').attr('value');
    $('#my_container').load('name.php', {'n': nnn});
}

Первой командой мы считываем значение атрибута value из нашего поля ввода и сохраняем его в переменной nnn, а второй командой вызываем наш серверный скрипт с передачей ему считанного имени и занесением ответа в наш контейнер.

Внимание! Этот пример использует серверный скрипт, поэтому на вашей локальной машине (без установленного вэб-сервера и интерпретатора PHP) он не сработает. Имейте это в виду прежде чем материться в комментах :)

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

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

И тут нам на помощь приходит еще один метод jQuery — post(). Он делает тоже, что и load — передает данные на сервер и получает ответ, но при этом он не изменяет содержимое DOM. Вместо этого он позволяет создать функцию-обработчик полученных данных. Начнем, как и раньше, с серверного скрипта. Теперь он будет получать два значения: имя пользователя и его возраст и возвращать приветствие и год рождения пользователя (текущий год минус возраст).

Код:

Новый name.php
<?php
  echo '<h1>Hello '.$_POST['n'],'</h1>';
  echo '<p>You was born in '.(date("Y")-$_POST['a']).'.</p>';
?>

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

Новый index.html
<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):

Файл file.php
<?php
  var_dump($_FILES);
?>
	

И полный код страницы:

index.html - загрузка файлов
<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>

Чуть комментариев к коду.

  1. как уже было сказано, сразу за библиотекой jquery загружаем плагин jquery.form.js

  2. "жуткая" конструкция $(document).ready(...); всего навсего указывает функцию, которую необходимо выполнить сразу после загрузки страницы. Здесь нам это нужно, чтобы указать плагину, какую именно форму ему придется обрабатывать.

  3. $('#myform).ajaxForm(...) — выбираем форму и задаем для нее две функции. Первая будет вызвана перед началом отправки данных (в данном примере она покажет alert-окно с надписью 'start uploading'), а вторая — после получения ответа (она поместит ответ в наш контейнер).

  4. все, больше ничего делать не нужно. Всю необходимую информацию (список полей, их типы, адрес серверного скрипта и т.д.) плагин возьмет из формы.

Надеюсь, что этот скромный пост (и пол-часа ваших собственных экспериментов) навсегда закроют для вас тему использования AJAX на ваших сайтах. Читайте, изучайте, экспериментируйте, пишите комменты... ;)

Комментариев: 9

Page: 01 02 03 04 05 06 07 08 09 10
Fast: 10 20 30

Календарь

май, 2012
пн вт ср чт пт сб вс
  1 2 3 4 5 6
7 8 9 10 11 12 13
14 15 16 17 18 19 20
21 22 23 24 25 26 27
28 29 30 31      

Меню

  • Главная страница
  • Оглавление блога
  • Лента новостей
  • Обратная связь
  • Правила блога

Анонсы по темам

  • Все посты блога
  • С миру по нитке
  • Мысли вслух
  • Графика и фото
  • Кривизна платформы .NET
  • Грамотные интерфейсы
  • WEB-программирование
  • FlatCMS - шустрая и гибкая
  • Доработки Lasto-блога

Категории

  • Все посты по порядку
  • С миру по нитке
  • Графика и фото
  • Кривизна платформы .NET
  • Грамотные интерфейсы
  • WEB-программирование
  • FlatCMS - шустрая и гибкая
  • Доработки Lasto-блога

Сервисы

  • Поиск по блогу
  • Поиск по всему сайту
  • Шпионское досье

Реклама


Стоимость сайта

Мой вебсайт стоит 865 404,18 руб

Статистика

    Widgetize!
  • Время работы: 0,02668 сек.
  • Память: 3 072 кБт
  • Статистика привратника
Copyright FIT-Media.com, © 2007-2012
Главная | Общее оглавление | Обратная связь | Правила блога | Лента RSS