августа 04, 2011

Гопники в интернете или лохотрон продолжается

Мощеничество в Интеренете тема обширная и хитрожопые ребятки с каждым днем преподносят нам все новые и новые сюрпризы. Есть индивиды облапошивающие наших граждан с завидным постоянством, практически ничего не меняя в своей тактике. В первой части записей о сетевом лохотроне я затронул парочку интересных комбинаций по отъему денюжек у добропорядочных граждан.
Сегодня хочу рассказать о наиболее устоявшихся, я бы даже сказал оборзевших делягах промышляющих на ниве обмана интернет жителей. Поговорим мы о таких видах обмана как "Обыграй легко казино"


"Обыграй легко казино"


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

Так вот, перво на перво запомните, интернет казино практически невозможно обыграть, так же как и казино реальное. Нет конечно, существуют одиночные счастливчики, которым удавалось поднять более или менее приличную суму, но это лишь единичные случаи.
А хитрожопые, предлагают разработанную методику развода казино - Бред!!!

В чем смысл их развода, да все до безобразия просто, давайте рассмотрим схему на одном из пожалуй самых липучих и надоедливых дельцах от этого лоходейства, имя ему Евгеша Шульц.
Скорее ни какой он и не Евгений Шульц, а просто Петя Поросенкин. Так вот, регистрируется такой Евгеша в каком нибудь казино, может и поигрывает время от времени, но больше всего его интересует партнерская программа этого самого казино, по условиям которой, этот чел будет получать процент и от каждого приведенного в лоно этого казино, ну и конечно же будет капать процент от вложенных денег вновь прибывших, чем больше вы проиграете, тем больше процент у этого Шульца

Сетевой Лохотрон


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

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

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

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

Удачи и всех благ, в следующий раз поговорим о спонсорах кидалах.

августа 03, 2011

Простой онлайн-генератор CSS

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

Генератор CSS3


 


Довольно простой, совершенно бесплатный, с приятным интерфейсом онлайн-генератор CSS3, с контролем над базовыми атрибутами CSS3:
  • border-radius - устанавливает радиус скругления уголков
  • box-shadow - добавляет тень к элементу
  • background-gradients - эффект градиента
  • opacity - уровень прозрачности элемента
Набор контролируемых функций конечно не особо велик, но этот недостаток компенсируется наличием интерактивного интерфейса, который позволяет простейшим перетаскиванием ползунка по шкале задать настройки и получить желаемый CSS3  код.

На этом все, надеюсь работать с этим инструментом вам понравится. Удачи и всех благ!

июня 09, 2011

Меню "Аккордеон" на основе jQuery и CSS

Всем, снова здравствуйте.

Давно не обращался к разработке меню для сайтов, а технологии не стоят на месте, да и наш пытливый ум не дает покоя. Меня спрашивают, как сделать  меню в стиле "аккордеон" с функцией открытия и закрытия подменю не при наведении, а при нажатии на пункт меню. Сегодня именно о таком способе построения навигации и пойдет речь, мы рассмотрим технику создания меню в стиле "аккордеон" на основе CSS и совсем немного jQuery.
Но для начала, хотелось бы выделить основные преимущества данного меню:

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




Разметка HTML

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

<ul class="menu collapsible">
<li>
<a href="#">Рубрики</a>
<ul class="acitem">
<li>
<a href="#">Рубрика 1</a>
</li>
<li><a href="#">Рубрика 2</a></li>
<li><a href="#">Рубрика 3</a></li>
<li><a href="#">Рубрика 4</a></li>
<li><a href="#">Рубрика 5</a></li>
<li><a href="#">Рубрика 6</a></li>
</ul>
</li>
<li>
<a href="#">Архивы</a>
<ul class="acitem">
<li><a href="#">Январь (10)</a></li>
<li><a href="#">Февраль (15)</a></li>
<li><a href="#">Март (8)</a></li>
<li><a href="#">Апрель (12)</a></li>
<li><a href="#">Май (9)</a></li>
<li><a href="#">Июнь (4)</a></li>
</ul>
</li>
</ul>
Для полноценной работы нам потребуется подключить JQuery, функцию меню и таблицу стилей, которые найдете в исходниках. Используя эти не хитрые инструменты, можно в последствии изменить внешний вид и настроить параметры работы меню исходя из своих потребностей.
В начале документа html между тегами <head> и </head>  размещаете три заветные строчки:

<script src="jquery-1.4.2.min.js" type="text/javascript"></script>
<script src="menu.js" type="text/javascript"></script>
<link rel="stylesheet" type="text/css" href="style.css" />
Как вы видите основной элемент в меню это тег UL, который имеет класс "menu" с дополнительным классом "collapsible". В данном и конкретном случае мы получаем раздвижной "аккордеон" с функцией открытия и закрытия непосредственно при нажатии на главный пункт меню.
Для того чтобы какой-либо из пунктов меню автоматически после загрузки страницы отображался в развернутом виде можно воспользоваться другим дополнительным классом, например "expand".

CSS


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

И так, код стилей меню, кому то может показаться слишком объемным, так что к некоторым пунктам я добавил пояснения:

ul.menu, ul.menu ul {
list-style-type:none;
margin: 0;
padding: 0;
width: 15em;
}

ul.menu a {
display: block;
text-decoration: none;
text-align: left;
}

ul.menu li {
margin-top: 1px;
}

ul.menu li a, ul.menu ul.menu li a {
padding: 0.5em;
/* закругленные углы пунктов меню */
border-radius: 5px;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
color: #d7d7d7;
border: solid 1px #333;
background: #333;
/* функция градиента для Webkit - браузеров */
background: -webkit-gradient(linear, left top, left bottom, from(#666), to(#000));
/* функция градиента для Firefox + */  
background: -moz-linear-gradient(top, #666, #000);
/* функция градиента для Opera 11 + */  
background-image: -o-linear-gradient(top,rgb(102,102,102),rgb(0,0,0));
/* примочка для тупого IE */
filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#666666', endColorstr='#000000');
}

ul.menu li a:hover, ul.menu ul.menu li a:hover { 
/* фон и градиент пунктов меню при наведении */  
background: #000;
background: -webkit-gradient(linear, left top, left bottom, from(#444), to(#000));
background: -moz-linear-gradient(top, #444, #000);
background-image: -o-linear-gradient(top,rgb(68,68,68),rgb(0,0,0));
filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#444444', endColorstr='#000000');
}

ul.menu li ul li a, ul.menu ul.menu li ul li a {
background: #ccc;
color: #000;
padding-left: 20px;
}

ul.menu li ul li a:hover, ul.menu ul.menu li ul li a:hover {
background: #aaa;
border-left: 5px #000 solid;
padding-left: 15px;
}
ul.menu ul.menu li a:hover {
border-left: 0;
padding-left: 0.5em;
}
ul.menu ul.menu {
border-left: 5px #f00 solid;
}
ul.menu a.active, ul.menu ul.menu li a.active, ul.menu a.active:hover, ul.menu ul.menu li a.active:hover {
/* фон и градиент активных пунктов меню */
text-decoration: none;
color: #faddde;
border: solid 1px #980c10;
background: #d81b21;
background: -webkit-gradient(linear, left top, left bottom, from(#ed1c24), to(#aa1317));
background: -moz-linear-gradient(top, #ed1c24, #aa1317);
background-image: -o-linear-gradient(top, #ed1c24, #aa1317);
filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#ed1c24', endColorstr='#aa1317');
}
div.panel {
border: 1px #000 solid;
padding: 5px;
margin-top: 1px;
}

ul.menu div.panel a, ul.menu div.panel li a:hover {
display :inline;
color: #666;
background: none;
margin: 0;
padding: 0;
border: none;
font-weight: bold;
}
ul.menu div.panel a:hover {
color: #000;
text-decoration: underline;
}

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

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

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


Всем спасибо и удачи.

* * * * *

HTMLPad 2010 - всеобъемлющий редактор HTML, CSS, JavaScript и XHTML, который на данный момент является выбором тысяч веб-разработчиков и преподавателей более чем в 50-ти странах.

мая 31, 2011

Сетевой лохотрон или гоп-стоп в интернете

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

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

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

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

Нигерийские письма

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

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

Полностью содержние такого письма приводить не буду, так как оно может быть разным, а вот начинаются такие письма всегда практически одинаково.
Уважаемые Сер,
Добрый день и как вы себя чувствуете сегодня? надеюсь, что все хорошо с вами.
Я адвокат, Джеймс Obiaha, личным адвокатом до конца швед Dr.M R.Petrenko, гражданином своей страны, который используется для работы в качестве директора Национального общества де-де коммерциализации продуктов P?troliers (SONACOP) нефтяной компании в Республике Того , Западная Африка. Здесь и в дальнейшем будет именоваться как мой клиент. 14 февраля 2007 года, мой клиент, его жена и трое их детей были вовлечены в ghasty автомобильной аварии, как они вернулись из пикника Святого Валентина на пляже, Коко. Все пассажиры автомобиля к сожалению, потеряли свои жизни, включая водителя моего клиента. С тех пор я сделал несколько запросов в ваше посольство, чтобы определить местонахождение любого из моих клиентов расширенных родственников это также оказалось неудачным.

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

Как себя обезопасить и Что делать?

  • Ни при каких обстоятельствах не высылайте персональную информацию, а уж тем более копии каких бы то ни было документов и номера банковских счетов по запросу организаций, в которые вы сами не обращались.
  • Старайтесь на разных форумах, открытых сетевых тусовках или социальных сервисах не светить свой рабочий почтовый ящик, а заведите левый мусороприемник с отдельным паролем
  • Доверяйте программам-фильтрам спама, которые не задумываясь отправляют или рекомендуют «нигерийские письма» отправлять в корзину.
  • Охолонитесь и трезво подумайте, с какого такого боку вдруг вам такое счастье.
Признаки того, что вас пытаются поиметь:

  • Письмо исполнено на английском или очень ломаном русском (английский, впрочем, иногда не лучше).
  • Вас убедительно просят хранить все в строжайшей тайне и никому ни-ни о содержании письма - чтобы «завистники», боже упаси не присвоили ваши миллионы.
  • В послании как правило фигурируют захватывающее дух и затуманивающие сознание космические суммы денег, которые напрочь лишают в первые минуты адекватно мыслить.
  • Благодетели или мнимые партнеры с невинным видом требуют от вас персональные данные: полное имя, адрес, телефон и т. п.
  • Отсутствие упоминаний о том, что вы должны за что-то платить. Вам предлагают миллионы только и всего. В крайнем случае речь идет о мелких суммах типа $150 - 250 за перевод или услуги банка. Отошлете считайте девственность потеряли, и пойдет по накатанной.
  • Адрес отправителя скорее окажется  адресом вполне уважаемой и легальной организации, а вот обратный адрес зарегистрирован на публичном бесплатном почтовом сервере, на него то и уйдет уйдет ваше ответное письмо.
Российские интернет-мошенники позаимствовали этот способ и всячески его культивируют перестраивая комбинацию на свой манер, неизвестно сколько «мистеров Уильямсов и Джеймсов» на самом деле живут в Мухосранске или Урюпинске?.

На вопрос как самостоятельно бороться с этой заразой, у меня однозначного ответа нет. Если вы жаждете мести, попытайтесь обратиться в международные организации (конечно, на английском языке). Жалобы на интернет-аферистов онлайн принимает организация под названием Internet Crime Complaint Center.

К нашим "доблестным" ментопузикам(полицаям) думаю вряд ли имеет смысл обращаться, шанс что помогут минимален, а вот кровушки попьют по полной

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

*  *  *  *  *

Узнай Тайну Фамилии


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

Как это работает

Давайте рассмотрим данный вид мошенничества на примере одного из многих якобы онлайн-архивов фамилий. Называют они себя не много - не мало "Национальный онлайн архив"

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


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


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



Здесь как говориться и зарыта та собака, вся фича в стоимости СмС, забудьте о бесплатности, парочка этих самых смсок обойдется вам, примерно в 500 - 600 кровных ваших рубликов.
Проверить стоимость смс можете здесь: Тынц.. или в каком другом месте, благо таких сервисов достаточно.

Ладно, допустим чел не прислушался к предостережениям и все же отправил смс, потеряв 500 руб и что он в итоге получит. Получит в лучшем случае какой-нибудь код для доступа, якобы в архив и кучу текста с датами, которые ему ну совсем не в жилу.
В конце концов придет осознание, что его грубо поимели, дружище утрется и постарается забыть о том что он ЛОХ. Не тут то было, помните он вписывал свой телефон, так вот, на этот самый телефон попрут с остервенением различные рекламные сообщения или еще какая дрянь.
Лихо закручено, ничего не скажешь. Так вот, прежде чем влезать в эту аферу по разгадыванию тайн своей фамилии, подумайте, откуда на хрен и какой архив на Пупкина Ивана Ивановича, таджика по национальности, с бабушкой немкой и дедом евреем, живущем в Казахстане....

На этом не заканчиваю свой обзор новых видов интернет - мошенничества, надеюсь в скором времени рассказать и о других, тема по всей видимости нескончаемая и хочется верить, что кому-нибудь мои статьи помогут избавиться от совсем не гордого звания - "ЛОХ".

мая 20, 2011

Широкоформатный Слайдер для сайта

Всем доброго дня или ночи, это уж кого как вставило.

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

Достопочтенные буржуины например, давно и плотно используют слайдеры на своих блогах, не только в качестве галерей, но и как способ анонсирования статей на главных страницах. Среди наших блогеров “слайдеры” так же приобретают все большую популярность, все чаще можно увидеть использование шаблонов и тем со встроенными ротаторами изображений. Как все это устроено и работает, мы и попробуем разобраться, без лишней суеты, как говориться: с чувством, с толком, с расстановкой.



Установка:


Для того что бы слайдер заработал, в первую очередь нам необходимо подключить к документу html дополнительные javascript, а точнее плагины jQuery, которые вы найдете в папке с исходниками, для этого перед тегом /head следует прописать следующее:

<script type="text/javascript" src="js/jquery-1.4.4.min.js"></script>
<script type="text/javascript" src="js/jquery.nivo.slider.pack.js"></script>
<script type="text/javascript" src="js/jquery.nivo.slider.settings.js"></script>

Затем нужно определиться с местом где будет выводиться сам слайдер, в моем примере вывод ротатора настроен сразу под шапкой и меню точно посередине, так как в нашем случае слайдер широкоформатный и занимает всю ширину фиксированного шаблона размером 960px. Не стал особо мудрить и заключил наш слайдер в div контейнер, выглядит в html это так:

<div id="banner">
<div id="slider-wrapper">
<div id="slider" class="nivoSlider">
<a href="#"><img src="banner/banner.jpg" alt="" /></a>
<a href="#"><img src="banner/banner2.jpg" alt="" title="#htmlcaption" /></a>
<a href="#"><img src="banner/banner3.jpg" alt="" /></a>
<a href="#"><img src="banner/banner4.jpg" alt="" /></a>
</div>
<div id="htmlcaption" class="nivo-html-caption"><p>Это пример заголовка изображения или анонс статьи HTML </p></div>
</div>
</div>
Как вы видите ничего сложного и особо навороченного в данном коде нет, все настройки вынесены в отдельный файл стилей style.css, который так же следует подключить к нашему документу:

<link rel="stylesheet" type="text/css" href="css/style.css" title="styles1" />
Соответственно путь к файлу у вас может разниться с указанным в примере, так что будьте внимательны и постарайтесь не лопухнуться, иначе вылезет полнейший косяк. В стилях тоже особо сложных настроек не наблюдается, думаю трудностей не возникнет, если решите поэкспериментировать с параметрами при желании изменить внешний вид слайдера.

/* Основа ротатора изображений */
#banner { padding:0 0 30px 0; background:#ebebeb url(../images/shadow0.png) bottom no-repeat; margin:0; height:260px; text-align:center;}

/* Контейнер */
#container { width:960px; margin: 20px auto; }
#slider-wrapper { background:none; width:960px; padding:0; margin:auto; }
#slider { position:relative; width:960px; height:260px;background:url(../images/loading.png) no-repeat 50% 50%; }
#slider img { position:absolute; top:0px; left:0px; display:none; }
#slider a { border:0; display:block; }
.nivo-controlNav { margin:auto;padding:0; position:absolute; bottom:-19px;left:440px;text-align:center; margin:auto; }
.nivo-controlNav a { display:block;width:15px;height:15px;
background:url(../images/bullets.png) no-repeat; text-indent:-9999px;
border:0; margin-right:3px; float:left; position:relative; z-index:30; cursor:pointer; }
.nivo-controlNav a.active {font-weight:bold; background-position:0 -22px; }
.nivo-directionNav a { display:block; width:56px; height:50px;
background:url(../images/arrows.png) no-repeat;
text-indent:-9999px; border:0; position:absolute; top:45%;
z-index:30;cursor:pointer; }
a.nivo-nextNav { background-position:-56px 0; top:101px; right:-15px; }
a.nivo-nextNav:hover { background-position:-56px -50px; }
a.nivo-prevNav { top:101px; left:-15px; }
a.nivo-prevNav:hover { background-position:0 -50px; }

/* Nivo Slider стили */
.nivoSlider { position:relative; }
.nivoSlider img { position:absolute; top:0px; left:0px; }

/* Если изображение обвернуто в ссылку */
.nivoSlider a.nivo-imageLink { position:absolute;
top:0px; left:0px; width:100%; height:100%;
border:0; padding:0; margin:0; z-index:20; display:none; }
.nivo-slice { display:block; position:absolute;z-index:10;height:100%; }

/* Стили заголовка */
.nivo-caption {position:absolute; left:0px; bottom:0px; font:13px calibri;
padding:0; margin:0; color:#CCC; background:#000; opacity:0.7; width:100%; z-index:29; }
.nivo-caption p { margin:0; padding:10px 15px 10px 15px;}
.nivo-caption a { color:#efe9d1; text-decoration:underline;display:inline !important; }
.nivo-html-caption { display:none; }


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

Всем спасибо и удачи.

Отдельное спасибо: Dobrovoimaster



мая 18, 2011

Онлайн-инструменты для веб-разработки

С большим интересом наблюдаю за появлением новых и за развитием плотно устоявшихся, онлайн-инструментах,  которые существенно облегчают жизнь и работу веб-разработчикам. Согласитесь, не плохо иметь всегда под рукой какой-нибудь онлайн-генератор мета тегов, компрессор css или быстрый редактор .htaccess. Подобрать шрифт, эксперементировать с цветовой палитрой, быстро создавать макет сетки в PNG, редактировать CSS на лету и выполнять еще много других операций, можно используя различные онлайн-инструменты.
В Рунете таких онлайн-конструкторов на сегодняшний день появляется все больше, хорошим примером может служить Веб мастерская с набором необходимых ресурсов веб-мастеру.

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

Font comparer


Ничего замысловатого и вроде бы сверхестественного, а попробовав в работе думаешь, полезная вещь черт возьми. Просто вписываешь любые слова, выбираешь цвет текста и фона, смотришь как все это дело будет выглядеть при написании разными шрифтами, и в завершении нажав на кнопу: Get font, рядом с каждым примером, получаешь расклад по атрибутам данного шрифта.

Color Explorer


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

ProCSSor


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

SpriteBox


SpriteBox это своеобразный визуальный WYSIWYG — редактор в помощь веб-дизайнерам быстро и легко создать CSS классы и идентификаторы из одного изображения (спрайта). Загружаете изображение, перемещаете по экрану устанавливая в нужных только вам позициях и размерах, смотрите результат и забираете в работу если все устраивает.

Gridulator


Gridulator — с этим инструментом все понятно без лишних пояснений, это хорошая возможность для веб-дизайнера быстро создавать макет сетки в PNG . Наконец это просто удобно, потому что монстроподобный Photoshop не сможет помочь в данном случае(может я многого не знаю).

CopyPaste Character


Простой, но очень часто, такой необходимый инструмент для копирования и вставки в веб, различных специальных символов, не у каждого ведь есть способность держать все варианты в голове, а здесь нажал на символ и получил вариант вставки в html — формате.

Name Check


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

Scrim


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

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

Источник: Dobrovoimaster 

Раньше у нас было время
Теперь у нас есть дела
Доказывать что сильный жрет слабых
Доказывать что сажа бела

мая 09, 2011

Набор иконок для веб-дизайнера

Доброго времени суток.

Представляю вашему вниманию отличный набор иконок для веб - дизайна. Все иконки выполнены в формате PNG и имеют различный размер.




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




Этот набор абсолютно бесплатный и предоставляется для свободного использования.

PNG | 16x16, 24x24, 32x32, 48x48, 64x64, 128x128 |6,4MB

апреля 24, 2011

Opera 11 – В поход за расширениями

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

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

Поддержка расширений (extensions) Opera пожалуй самое ожидаемое новшество и оно вполне способно изменить расстановку сил на рынке браузеров. У меня не вызывает сомнений то, что поддержка дополнительных модулей – это очень удачный ход по отношению к Mozilla Firefox.
Вообще по отношению к браузерам, да и других программ, вырисовывается порой странная ситуевина, авторы и разработчики могут с тупым упорством годами игнорировать, казалось бы очевидные и востребованные функции программ, ярчайшим примером служит, так горячо мною не любимый (просто не за что) IE всех версий.
В Opera, правда  нехватку дополнений в какой  то мере устраняло наличие Виджетов, но это все же не то, поддержка самостоятельных мини-приложений не заменяет интересные возможности браузера, которые открываются перед пользователем, использующим дополнительные модули.

Не стоит путать дополнения с плагинами, плагины в своей работе используют функционал программы, а расширения его увеличивают и могут поддерживать свои собственные плагины. Большинству "человеков" скорее нет дела до таких тонкостей, а по сему заострим свой не затуманенный взор, именно на появлении в Opera 11 полезных и не очень расширений.

Расширения Opera11

Что бы посмотреть, выбрать и попробовать в работе расширения, создан официальный репозиторий (слово то какое), где собраны, и разложены по категориям, все доступные на сегодняшний день дополнения, своеобразный аналог библиотеки дополнений  Mozilla Firefox.


На  странице с расширениями все выглядит довольно просто, разобраться будет не сложно, даже не владея "буржуинским". Выбор дополнений на сегодняшний день не велик, если сравнивать с Firefox, но с каждым днем прибавляются все новые и новые.

Дополнения разбиты на категории, все по накатанной, можно посмотреть в разделе рекомендованных, популярные, по рейтингу и соответственно новые. К каждому дополнению дается краткое описание, клацнув по названию или картинке, попадете на страницу с детальным описанием, ну а если вы знаете, что это такое можете приступить к установке незамедлительно, нажав на кнопку «install».

Так как большинство наших граждан, в свое время не обременяли себя изучением иностранных языков, будет немного сложно изучать расширения. Выбрав Русский язык, вам выдадут список дополнений написанных именно на могучем и великом, правда таких модулей совсем еще не много, так что как не крути, а первым расширением для многих станет дополнение из обоймы переводчиков.
Таких модулей несколько и все они по-своему интересны. Например Easy Translation работает по принципу: выделил текст, нажал на кнопку и получил перевод отрывка текста непосредственно на странице. Работает очень быстро и поддерживает большое количество языков. Поставив это расширение, вы облегчите себе изучение возможностей других дополнений.


Из этой же серии переводчиков, выделяется модуль google-translate построенный на использовании перевода с Google и PROMT. Так же как и предыдущий, обрабатывает выделенный на странице текст или всю страницу. Выделите текст, нажмите кнопку расширения и выберите  направление перевода. Если текст не выделен, вся страница будет переведена. При выборе одного слова, вам будет показан словарь. Результат перевода появляется в сплывающем окошке.


Все, с переводом определились, теперь будет более или менее понятно, что к чему при выборе расширений.
На сегодняшний день сложилась такая ситуация, что если у вас не стоит какого-нибудь блокировщика рекламы, то это своеобразный косяк. В этом плане для Opera11 уже разработано несколько дополнений из разряда резаков различных видов рекламы. Конечно же лидером является вездесущий NoAds, баннерорезка разработанная нашим соотечественником Алексеем Рузановым.


Имеется еще парочка не плохих резаков разного рода мусора на страницах сайтов, разные по исполнению, но выполняющие практически одинаковые задачи, это избавить пользователей от созерцания назойливой рекламы при активном серфе в интернете.
Стоит обратить внимание на NoAds Fixed, так сказать альтернативная версия NoAds с исправлениями некоторых ошибок присутствующих в оригинальном резаке. В целом же, это клон раскрученной баннерорезки.
Тем кто не на шутку озабочен безопасностью и веб-серфингистам экстремалам, следует присмотреться к аддону с говорящим названием VirusTotal Extension, добавляющему на панель инструментов браузера клавишу быстрого доступа к онлайновому сервису VirusTotal.


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

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

GMail Checker периодически проверяет ваш почтовый ящик Google Mail и показывает количество не прочитанных писем. Расширение не просит ваш пароль используется AuthSub. Присутствуют звуковые уведомления о получении почты. Все действия задаются в настройках дополнения.

Google Mail Notifier.  Не знаю, кому как, мне больше приглянулось именно это расширение, для работы с почтой. Простое и быстрое расширение, которое сообщает вам количество непрочитанных сообщений в ящике Gmail и показывает их заголовки. Расширение может работать с несколькими аккаунтами и позволяет открывать ссылки mailto: с помощью Gmail. Хорошие возможности и стабильная работа этого дополнения, сделают его популярным среди пользователей Opera. Поддерживаются английский, немецкий и русский языки, что уже само по себе есть "Гуд".


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

Посетив библиотеку расширений для Opera 11, вы увидите, что движуха проходит в правильном направлении, дополнений создается много, охватить в одной статье все просто не возможно. Так что думаю мы продолжим следить за появлением новых и знакомиться с уже имеющимися расширениями, в последующих обзорах.
Под занавес своего повествования, хочу познакомить вас с еще одним интересным, на мой взгляд дополнением, из категории модулей для  работы с изображениями, это Image Preview Popup.


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

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

PS: Убедительная просьба к читающим, не затевайте спор и не лезьте в драку брызгая слюной, по поводу того какой браузер лучше, для этого достаточно других мест, да и замусолили эту тему порядком.


ПрограммыИнтернетБраузерыOpera 11 – В поход за расширениями