Мар 11

С чем едят JSON?

Как и обещалось после Нового года, что не пройдет и года, как я напишу новую статью про передачу параметров от PHP к JavaScript по средствам передачи данных в формате JSON.

Встречайте: AJAX и jQuery. Передача параметров из PHP в JavaScript. Использование JSON

По моему мнению, эта статья завершает цикл статей посвященных механизму AJAX на моём основном сайте http://codething.ru/. Так как рассмотрены уже все основные функции, возможности и примеры.

Что дальше? Пока не знаю. Может быть сделать платный курс или давать консультации? Если есть какие-то соображения, идеи - пишите: mike@pestr.ru.

p.s. Кстати, готов разместить рекламу на сайте, т.к. ежедневная аудитория довольно большая. Подробности здесь.

Опубликовать в Мой Мир
Опубликовать в Одноклассники
Опубликовать в Google Plus
Опубликовать в LiveJournal
Мар 03

Скрипт увеличивающейся при наведении картинки

Скрипт увеличивающейся при наведении картинки

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

Рассмотрим решение данной задачи с помощью JavaScript-скрипта и библиотеки jQuery.

<html>
 <head>
  <script src="jquery.js"></script>
 </head>
 <body>
  <img src='small.png' onmouseover='bigImage(this, "big.png");' align="left"/>
  <p>Какой-то текст, показывающий, что увеличенное изображение не ломает верстку, а размещается поверх содержимого страницы.</p>

  <div id="big" style="display: none; top: 0px; left: 0px; position: absolute; z-index: 1000;"></div>
  <script>
  function bigImage(obj, fname)
  {
   $("#big").css("left", $(obj).offset().left);
   $("#big").css("top", $(obj).offset().top);
   $("#big").html("<img src='"+fname+"' onmouseout='bigImageHide();'/><br/>");
   $("#big").show();
  }

  function bigImageHide()
  {
   $("#big").hide();
  }
  </script>
 </body>
</html>

Исходная картинка small.png загружается традиционно средствами HTML, но к ней мы добавим событие onmouseover (срабатывающее при наведении мышки), которое будет вызывать написанную нами функцию bigImage();

Для вывода увеличенной картинки на экран, создадим контейнер big, задав ему абсолютное позиционирование поверх других элементов сайта (z-index: 1000).

В функцию bigImage() передаются два параметра - информация о текущем элементе и название увеличенной картинки.

Функция bigImage() задает координаты контейнера big такими же, как и у уменьшенной картинки, после чего в контейнер размещается HTML-код увеличенного изображения. Увеличенное изображение содержит событие onmouseout (срабатывает, когда мышка ушла с объекта), по которому вызывается функция bigImageHide() - скрывающая с экрана контейнер big.

Полезный совет по использованию примера скрипта увеличения картинки:

  • Если вам надо передать ссылку, просто передавайте её третьим параметром в функции bigImage(). В саму функцию bigImage() также следует внести изменения, добавив в HTML-выдачу соответствующий тег <A> с параметром ссылки.

Скачать архив с примером скрипта увеличивающийся при наведении картинки, 54 Кб.

Опубликовать в Мой Мир
Опубликовать в Одноклассники
Опубликовать в Google Plus
Опубликовать в LiveJournal
Фев 12

Быть фрилансером. С чего начать?

Перед тем как стать фрилансером, подумайте хорошо, надо ли это вам. Оцените плюсы и минусы данного вида деятельности.

Начинать работать фрилансером лучше всего постепенно, по возможности сразу не покидая основное место работы. Фрилансеру, даже начинающему, желательно иметь собственный сайт. Сайт желательно иметь на платном хостинге с доменом второго уровня. Это показывает клиентам, что вы серьезно настроены работать в этом секторе. На сайте следует разместить портфолио и перечень оказываемых услуг. Если портфолио совсем никакого нет, необходимо его создать — предложите друзьям и знакомым ваши услуги, ищите работу на специализированных сайтах фрилансеров, на городских форумах и в газетах. Как только портфолио из нескольких работ готово — можно активно продвигать себя и сайт. Тут любые средства хороши — от визиток и объявлениях на форумах и в соц.сетях до контекстной рекламы. В какой-то момент работа начнет искать вас сама.

С основной работы есть смысл уходить только тогда, когда почувствуете перспективность работы фрилансером. Если чувство перспективности не приходит, наверное, и не стоит ничего менять.

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

Опубликовать в Мой Мир
Опубликовать в Одноклассники
Опубликовать в Google Plus
Опубликовать в LiveJournal
Фев 02

Вебдванольный интерфейс от Twitter

Если хотите, чтобы ваши сайты смотрелись модно и современно, то следует обратить внимание на framework Bootstrap от Twitter. Удобная вещь для построения пользовательских интерфейсов в стиле Веб 2.0, с использованием HTML 5, CSS 3 и Javascript.

Взять можно отсюда: http://twitter.github.com/bootstrap/index.html, скрипты лицензированы под Apache License v2.0.

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

При использовании стоит учитывать тот факт, что Bootstrap не будет  работать корректно в старых браузерах, например,  таких как Opera 9 или IE 6.

Опубликовать в Мой Мир
Опубликовать в Одноклассники
Опубликовать в Google Plus
Опубликовать в LiveJournal
Янв 16

Новый год — новый материал на сайт

Часто, ориентируясь на материалы сайта codething.ru, пользователи писали что у них не выходит сделать загрузку JavaScript'а в режиме AJAX. Ничего не выходит, мол. На самом деле, проблема очень просто решается с помощью библиотеке jQuery, а как именно, я и показал в новом материале:

http://codething.ru/ajax_script.php

Следующий материал выйдет скоро (не придется ждать и года) и будет посвящен передаче через протокол JSON.

p.s. Всех поздравляю с новым наступившим 2012-м годом!

Опубликовать в Мой Мир
Опубликовать в Одноклассники
Опубликовать в Google Plus
Опубликовать в LiveJournal