Websovet | Полезные советы по созданию веб сайтов

jQuery для чайников | Введение

Дата: 27.01.2010 | Рубрики: jQuery | Комментарии (4)

Тэги: jQuery

Данный цикл статей предназначен для вебмастеров, которым вовсе не интересно вникать в программные премудрости библиотеки JavaScript по имени jQuery, но очень хочется использовать все ее навороты в своих веб-сайтах. О каких наворотах идет речь? Все вы наверняка видели на современных сайтах различные всплывающие или наоборот прячущиеся панели, сайдбары – гармошки, картинки плавно затухающие или скользящие, классные фото-галереи и т.п. Красиво, черт!

В шаблонах Wordpress а ля “премиум” уже просто не обходится без слайдера с картинками. Смотрится красиво и стильно. Хочется ведь и в своем шаблоне что-то подобное прикрутить. Самое простое, конечно же, взять готовый буржуйский шаблон и банально заменить в нем диз на свои каляки-маляки, оставив функционал как есть. Но кто даст гарантию, что шаблон после этого не поплывет? Мало ли где что-нибудь напутали. Поэтому хотя бы на уровне грамотного пользователя jQuery (не разработчика!) изучить данный предмет стоит. Вот этим и займемся.

Еще раз, для прояснения: в данном цикле статей будет в самой простой и доступной форме показан ряд примеров практического применения библиотеки jQuery, без глубокого вникания в суть происходящих процессов. Кому интересно более детальное изучение предмета — читайте профильные форумы и блоги. Вот несколько ссылок:

1. Статья из Wiki
2. Руководство jQuery (рус)
3. Документация на jQuery-Docs.Ru
4. LinkExchanger Blog
5. Сайт разработчиков jQuery

Так как сегодняшний пост озаглавлен словом Введение, то с jQuery мы познакомимся пока что лишь в общих чертах. Чтобы сложилось достаточно простое и внятное понимание, о чем вообще идет речь.

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

Выглядело это достаточно просто. В код веб-страницы вставлялась ссылка на внешний файл скрипта:

<script type="text/javascript" src="clock.js"></script>

Практически точно также мы пристегиваем к странице файл стилей. Это просто.

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

<script type="text/javascript"> программный код самого скрипта </script>

Скриптов этих существует тысячи, на любой вкус, эффект и цвет. Поэтому умные люди прикинули, что можно собрать кучно самые эффектные и наиболее используемые кунштюки и сложить их в одном месте. Так появилась специальная библиотека-сборник по имени jQuery. Теперь достаточно положить в корневую папку нашего сайта один единственный файл jquery.js и затем выдергивать из него необходимые эффекты в нужных местах страницы. Удобно? Безусловно!

Библиотека эта постоянно совершенствуется и пополняется. Ее свежую версию всегда можно скачать с официального сайта разработчиков jquery.com. На данный момент времени (27.01.2010) свежая версия имеет номер 1.4.1

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

Enjoy!

PDA версия сайта

Дата: 22.01.2010 | Рубрики: Обсуждения | Комментарии (7)

Тэги: pda-версия сайта, мобильный интернет

Не за горами приход Nexus One, который, судя по некоторым данным, станет убивцем iPhone. Ну, во всяком случае, в плане ожидаемой стоимости. Хотя пока все это слухи. Но речь не о том. Интернет, как среда обитания (да, да, для некоторых хомо сапиенсов оно уже так и есть), становится все более мобильным. А стало быть, владельцам сайтов пора уже конкретно призадуматься о том, как отображаются их детища на экранах мобильных устройств а ля PDA.

В спецификации CSS 2 давно уже определен ряд устройств вывода информации, и к каждому из них можно применить индивидуальный набор правил. Выражаясь языком научным, это дает возможность создавать аппаратно-зависимые стили.

К примеру, если путь к внешнему css файлу прописать в коде страницы таким образом:

<link rel="stylesheet" href="style.css" type="text/css" media="screen" />

то данные стили будут применены к сайту при отображении его только лишь на экранах мониторов. Ключевое слово здесь — screen.

Если же нам нужно дать возможность вывести страницу сайта на печать, то мы должны создать для этого отдельный файл css, в котором убирается все лишнее: фоновые изображения, картинки-кнопки, свойства ссылок и т.п. Понятно, что для печати все это добро лишнее. Но чтобы принтер не съел лишнего, мы должны показать, что у нас есть специально подготовленный лист стилей. Тогда ссылка на него будет выглядеть уже так:

<link rel="stylesheet" href="print.css" type="text/css" media="print" />

Думаю, принцип понятен.

Соответственно, и для PDA устройств был придуман специальный финт. Чтобы автоматически загружался лист стилей именно для мобильных устройств, путь к нему пишется так:

<link rel="stylesheet" href="handheld.css" type="text/css" media="handheld" />

Читать полностью →

Несколько соображений по теме использования Twitter

Дата: 14.01.2010 | Рубрики: Twitter | Комментарии (5)

Тэги: Twitter, использование Twitter, хэштэг

Написать сей пост сподвигло множество вопросов от друзей-знакомых, а также от читателей блога Вебсовет на тему: на кой нужен этот Twitter и как в нем можно что-то толковое замутить?

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

Однако такой разброд происходит от непонимания и в корне неправильного использования сервиса. Twitter — это не болталка и не место для пустопорожнего словесного поноса. Если кто помнит, вначале над лентой сообщений висел вопрос (по английски, разумеется) “Что вы сейчас делаете?” Однако многие восприняли это слишком буквально и стали сыпать всякую чушь типа: поспал, посраль, сходил за пивасиком, посмотрел доктора Хауса и т.п. Это кому-то интересно? Это отстой, ненужный даже самому автору. Вопрос на самом деле подразумевал: что вы сейчас делаете полезного в плане ваших интересов, увлечений или работы.

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

Поэтому сейчас авторы сервиса переиначили вопрос, и он звучит уже типа: “Что происходит?” Тем самым подначивая писать интересные новости, а не чухню всякую. Иэтапральна! (с)

Будем считать, что общую цель ведения записей в Twitter мы раскрыли. А теперь более подробно и даже с кое-какими примерами.

Читать полностью →