Skip to content

Разработка

Простой скриптик для создания кнопки IMDB рейтинга на странице

Скрипт дает возможность создавать вот такую кнопку    одним тегом.

Скрипт можно подключать в любом месте страницы.

Пример кода вставки кнопки: <a id="thirdparty-imdb-rating-tt0245429" class="thirdparty-imdb-rating">  </a>

Дополнительный источник: https://gist.github.com/bogdan-nazar/86b241e4786b8d90cf40

/**
* Simple snippet to embed IMDB rating button to your web-page
* Author: Bogdan Nazar <me@bogdan-nazar.ru>
*
* USAGE: <div class="thirdparty-imdb-rating" id="thirdparty-imdb-rating-ttXXXXXXX"></div>
*        where "ttXXXXXXX" is the uniq IMDB title identifier
*
* IMPORTANT: Before using this snippet you must replace
*   var user = "urXXXXXXXX"
* with your real IMDB user id.
*  
*/
(function(){
  var user = "urXXXXXXXX";
  var $ = {d: document, h: document.getElementsByTagName("HEAD")[0], w: window},
    css = [...

Continue reading

Jet Toolbar 2.5

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

Я веду клиентскую часть системы.

Jet Toolbar работает с основными веб-браузерами: MS Internet Explorer, Google Chrome, Firefox Mozilla, Opera, Apple Safari.

Jet Toolbar поддерживает полностью прозрачный режим работы. Запросы в интернет уходят от имени IP-адреса клиента. Абонент получает ответы от имени IP-адреса сервера в интернете. При этом дополнительные настройки в браузере клиента не требуютсяJet Toolbar позволяет настроить и отображать динамические инфор- мационные панели на просматриваемых абонентами интернет-страницах.

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

JetToolbar

Continue reading

Javascript: Alert Lightbox

var dlgAlert = function(msg, opts) {
	if (typeof opts != "object") opts = {};
	var optsd = {
		background: "#eee",
		borderRadius: 5,
		btnCloseBR: 5,
		btnCloseCap: "Close",
		btnCloseWidth: 150,
		textAlign: "left",
		fontColor: "#000",
		fontSize: 14,
		headerBgColor: "#fff",
		headerFontClr: "#000",
		headerFontSize: 16,
		headerFontWeight: "bold",
		headerHeight: 40,
		headerPadX: 10,
		headerPadY: 0,
		headerTextAlign: "left",
		height: 200,
		paddingX: 10,
		paddingY: 10,
		shaderColor: "#333",
		shaderOpacity: 0.5,
		shaddow: "",
		title: "Alert",
		width: 300
	};
	for (var c in optsd) {
		if (!optsd.hasOwnProperty(c)) continue;
		if (typeof opts[c] == "undefined") opts[c] = optsd[c];
	}
	/*
	сделать проверку входящих opts
	*/
	var d = {};
	d.main = document.createElement("DIV");
	d.main.style.fontSize = ("" + opts.fontSize + "px");
	d.main.style.fontFamily = "Tahoma, Arial, Helvetica, 'Helvetica Neue', 'Lucida Grande', Verdana, sans-serif";
	d.main.style.fontStyle = "normal";
	d.main.style.fontWeight = "normal";
	d.main.style.lineHeight = "normal";
	d.main.style.textAlign = "left";
	d.inner = document.createElement("DIV");
	d.inner.style.position = "absolute";
	d.inner.style.left = "0";
	d.inner.style.right = "0";
	d.inner.style.top = "0";
	d.inner.style.bottom = "0";
	d.inner.style.zIndex = 2147483500;
	d.inner.style.overflow = "hidden";
	d.main.appendChild(d.inner);
	d.shad = document.createElement("DIV");
	d.shad.style.position = "fixed";
	d.shad.style.left = "0";
	d.shad.style.right = "0";
	d.shad.style.top = "0";
	d.shad.style.bottom = "0";
	d.shad.style.background = opts.shaderColor;
	d.shad.style.opacity = opts.shaderOpacity;
	d.shad.style.zIndex = "-1";
	d.inner.appendChild(d.shad);
	d.cont = document.createElement("DIV");
	d.cont.style.position = "fixed";
	d.cont.style.width = "100%";
	d.cont.style.height = "100%";
	d.cont.style.textAlign = "center";
	d.inner.appendChild(d.cont);
	d.vsp = document.createElement("DIV");
	d.vsp.style.display = "inline-block";
	d.vsp.style.height = "100%";
	d.vsp.style.width = "0";
	d.vsp.style.verticalAlign = "middle";
	d.cont.appendChild(d.vsp);
	d.box = document.createElement("DIV");
	d.box.style.display = "inline-block";
	d.box.style.width = "" + opts.width + "px";
	d.box.style.height = "" + opts.height + "px";
	if (opts.borderRadius) {
		d.box.style.borderRadius = "" + opts.borderRadius + "px";
	}
	d.box.style.verticalAlign = "middle";
	d.box.style.background = opts.background;
	d.box.style.overflow = "hidden";
	d.cont.appendChild(d.box);
	d.header = document.createElement("DIV");
	d.header.style.height = "" + opts.headerHeight - (2 * opts.headerPadY) + "px";
	d.header.style.width = "" + (opts.width - opts.headerPadX * 2) + "px";
	d.header.style.padding = "" + opts.headerPadY + "px " + opts.headerPadX + "px";
	d.header.style.lineHeight = d.header.style.height;
	d.header.style.fontSize = opts.headerFontSize;
	d.header.style.fontWeight = opts.headerFontWeight;
	d.header.style.color = opts.headerFontClr;
	d.header.style.background = opts.headerBgColor;
	d.header.style.textAlign = opts.headerTextAlign;
	d.header.innerHTML = opts.title;
	d.box.appendChild(d.header);
	d.body = document.createElement("DIV");
	d.body.style.height = "" + opts.height - (opts.headerHeight * 2 + opts.paddingY * 2) + "px";
	d.body.style.width = "" + (opts.width - opts.paddingX * 2) + "px";
	d.body.style.padding = "" + opts.paddingY + "px " + opts.paddingX + "px";
	d.body.style.textAlign = opts.textAlign;
	d.body.innerHTML = msg;
	d.box.appendChild(d.body);
	d.btnWrap = document.createElement("DIV");
	d.btnWrap.style.height = "" + (opts.headerHeight - opts.paddingY) + "px";
	d.btnWrap.style.width = "" + opts.width + "px";
	d.btnWrap.style.padding = "0 0 " + opts.paddingY + "px 0";
	d.btnWrap.style.textAlign = "center";
	d.box.appendChild(d.btnWrap);
	d.btnClose = document.createElement("BUTTON");
	d.btnClose.style.margin = "0";
	d.btnClose.style.padding = "0";
	d.btnClose.style.outline = "0";
	d.btnClose.style.cursor = "pointer";
	d.btnClose.innerHTML = opts.btnCloseCap;
	d.btnClose.style.border = "1px solid #bcbcbc";
	if (opts.btnCloseBR) d.btnClose.style.borderRadius = "" + opts.btnCloseBR + "px";
	d.btnClose.style.fontSize = "" + opts.fontSize + "px";
	d.btnClose.style.width = "" + (opts.btnCloseWidth - 2) + "px";
	d.btnClose.style.height = "" + (opts.headerHeight - opts.paddingY - 2) + "px";
	d.btnClose.style.lineHeight = d.btnClose.style.height;
	d.btnClose.setAttribute("onclick", "document.body.removeChild(this.parentNode.parentNode.parentNode.parentNode.parentNode)");
	d.btnWrap.appendChild(d.btnClose);
	document.body.appendChild(d.main);
	return d;
};

Почему программирование стало «сложным»?

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

Какие же факторы делают работу программиста шаблонной, неинтересной и потому усложняющейся с каждым годом?

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

Налицо: нежелание ПРОГРАММИРОВАТЬ (парадокс, да?), неспособность правильно оценить затраты времени, боязнь демонстрировать свой код из-за страха потерять доверие и уважение, неспособности послать всех недовольных к такой-то матери (стадный инстинкт?).

2. Тенденция к усложнению средств программирования. Какие раньше были инструменты? Да почти никаких, текстовый редактор, да компилятор со сборщиком, вот и все средства. Сейчас же для того, чтобы написать какую-нибудь более менее сложную программу, например, в IDEA, нужно потратить месяц просто на то, чтоб разобраться в интерфейсе средства разработки! С течением времени программисты во время процесса программирования всё больше и больше «управляют средой» чем занимаются реальным написанием кода. Если так пойдет и дальше, то в скором времени программированием будут называть исключительно процесс запуска программы, которая далее сама создает код по озвученным критериям (и это уже не фантастика, а реальность).

3. Рабочий муравей. Бизнесу важен только результат с минимальными затратами. Именно под нужды бизнеса разрабатываются многие сотни (или тысячи уже?) автоматизированных средств разработки, а программисты по сути являются операторами при них. Программист в данном случае рассматривается как винтик системы построения ПО, и чем более он сам стандартен, тем это более выгодно для бизнес-процесса.

4. Популизм. Это отдельная большая тема.

Lancome Promo: Хороший тон (Dreamtone)

Lancome Promo: Хороший тон (Dreamtone)

Очередной небольшой промо-проект. По технологиям практически идентичен Mercedes-Benz GLA Promo

Особенность проекта в том, что пришлось делать его в очень сжатые сроки (10 дней) — к 8-му марта. Но, как это всегда бывает, административные проволочки, в итоге, все равно сорвали все сроки. В технической части 70% кода и вёрстки были готовы уже через неделю.

Посмотреть: http://dreamtone.elle.ru/

Зеркало: в новой вкладке

Mercedes-Benz GLA Promo

Mercedes-Benz GLA Promo

Промо-сайт для продвижения Mercedez-Benz GLA, стилизованный под анимированную презентацию с экслюзивными видео-роликами и 3D моделью автомобиля.

Технические особенности:

1. Написан в основном на Javascript/jQuery.

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

3. Резиновая кроссбраузерная верстка.

4. Высота страницы по размеру окна браузера без скроллов.

5. 3D-модель реализована с помощью набора заранее отрендеренных с оригинальной модели jpg сплайнов.

6. Основной скрипт реализован в виде анонимной функции.

Посмотреть: http://mbsensations.maximonline.ru/

Зеркало: в новой вкладке

Министерство жилищно-коммунального хозяйства Московской области

Министерство жилищно-коммунального хозяйства Московской области

Сайт задуман как более «социальная» альтернатива официальному сайту Министерства.

Технические детали:

1. Стек: PHP/Javascript/MySQL.

2. Ядро: FlexEngine 3.1.2

3. Эксклюзивные модули: «Новости», «Обратная связь».

Посмотреть http://mgkh-mo.ru/

Посмотреть в новой вкладке

Автоматическая синхронизация с FTP

Если контролем версий все более-менее понятно, то настроить синхронизацию с FTP серверами проектов не так просто. В интернете конечно много всяких программ,. типа rsync и ее порты на различные платформы, но большая часть из них либо работает только под unix/linux системами, либо только из командной строки, либо сделана бездарно и содержит бедный функционал. Есть конечно и хорошие программы, но они все платные, а платить сейчас я что-то не настроен, может позже :).

Буду продолжать искать…

WP Subversion: это просто!

PhpEd и TortoiseSVNНаконец-то разобрался как работать с вордпрессовским Subversion. Все оказалось не так страшно, как казалось в начале. Для этого использовал небезызвестный TortoiseSVN, который позволяет работать с исходниками проекта прямо из контекстного меню оболочки. Дополнительное удобство заключается в том, что к моему любимому PhpED теперь не надо искать никаких дополнительных плагинов (которых по правде говоря и так почти нет), дающих возможность работать с Subversion. Тыкаешь прямо в обзоре проекта на нужную папку и через Shell меню создаешь репозиторий! Короче, пока что я в восторге.

Тонкости работы с TortoiseSVN описывать не буду. В сети уйма информации по настройке и использованию этого клиента, которой я, собственно, и воспользовался. 🙂

Social Monster (релиз)

social-monster
Месяца 3 назад понадобился мне плагин для wp, реализующий комментилки FB и VK. Путного ничего не нашел, решил сделать сам. Делал неспешно, старательно, добавил за одно и кнопки для шаринга в различных блогах. В итоге получилось, на мой взгляд, неплохо. Делюсь с сообществом. Скачать плагин можно:

1) по этой ссылке (hithub)

2) c данного сайта

Более подробную информацию выложу http://bogdan-nazar.ru/wordpress/plugins/social-monster/

События «mouseover» и «mouseout» для многослойных html-конструкций

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

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

Превью скрипта и полный исходник примера под катом.

Continue reading

Сайт магазина строительных материалов

Скомплектуем

Интернет-магазин отделочных материалов, являющийся прямым дилером таких крупных производителей как Сен-Гобен Строительная Продукция Рус (торговые марки Isover, Vetonit, Weber), Кнауф (торговые марки Knauf, Knauf Insulation), Основит, Selena ( торговая марка Tytan), Bergauf, Teknos, Tikkurila (торговые марки Текс, Tikkurila), Технониколь, Албес, Ivsil, Italon, Juta, Kreisel, Изоспан, Юнис и других.

Технические детали:

1. Стек: PHP/Javascript/MySQL.

2. Ядро: FlexEngine 3.1.2

3. Эксклюзивные модули: «Интернет-магазин», «Авторизация».

Посмотреть http://scomplektuem.ru/

Необновляемое зеркало

Сайт компании «Стар Трейд»

«Стар Трейд» — официальный дистрибьютор швейцарской компании HUBER+SUHNER AG

Технические детали:

1. Стек: PHP/Javascript/MySQL.

2. Ядро: FlexEngine 3.1.2

3. Эксклюзивные модули: «Каталог».

Посмотреть http://star-trade.pro

Необновляемое зеркало

Ferropan: Защита от коррозии, противопожарная защита

ferropan.ru

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

Технические детали:

1. Стек: PHP/Javascript/MySQL.

2. Ядро: FlexEngine 3.0.2

3. Эксклюзивные модули: «Новости», «Обратная связь».

Посмотреть http://ferropan.ru/

Необновляемое зеркало

ООО «Стиль-1»

ООО «Стиль-1»

ООО «Стиль-1» существует с 1992 года и является одной из наиболее работоспособных и мобильных компаний, выполняющих строительно-монтажные работы, работы по реконструкции, капитальному ремонту и благоустройству.

Технические детали:

1. Стек: PHP/Javascript/MySQL.

2. Ядро: FlexEngine 3.1.2

3. Эксклюзивные модули: «Слайдер», «Объекты», «Новости», «Обратная связь».

Посмотреть http://style-1.ru/

Необновляемое зеркало

Агентство Умных Технологий (АСМАТЕК)

«Агентство Умных Технологий» (АСМАТЕК) — высокопрофессиональная компания, специализирующаяся на ИТ разработке.

Технические детали:

1. Стек: PHP/Javascript/MySQL.

2. Ядро: FlexEngine 3.0.2

3. Эксклюзивные модули: «Слайдер».

Посмотреть http://asmatec.ru

Необновляемое зеркало

Модный сайт (modmod.ru)

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

Технические особенности проекта:

1. Стек: PHP/MySQL/Javascript

2. Ядро: FlexEngine 3.0.0m (модифицированное)

3. Для обеспечения отказоустойчивости применены средства:
— NGINX
— загрузка статики через внешние CDN;
— кэширование выборок данных в сессии пользователя;
— кэширование редко изменяемых HTML блоков на диске (nosql)

4. Интегрированная серверная авторизация через Facebook.

Для реализации функционала наполнения сайта новостными статьями была развернута CMS WordPress и разработан специальный модуль сайта, умеющий импортировать новости (включая картинки) из WordPress в свой внутренний формат.

Посмотреть: http://modmod.ru

Студия Premake

Студия «Premake»

Студия «Premake» — коллектив креативных дизайнеров, верстальщиков и программистов, профессиональных менеджеров и специалистов по рекламе в интернет.

Технические детали:

1. Стек: PHP/Javascript/MySQL.

2. Ядро: FlexEngine 3.0.2

Посмотреть http://premake.ru/

Необновляемое зеркало

Сайт фотоконкурса Family

Фотоконкурс для многодетных семей с тремя и более детьми, спонсируемый компанией «deceuninck».

Технические детали:

1. Стек: PHP/Javascript/MySQL.

2. Ядро: FlexEngine 3.0.0

3. Эксклюзивные модули: «Фотогалерея».

Посмотреть http://family.metronews.ru

Необновляемое зеркало

Экзаменационная работа (помощь коллеге)

Экзаменационная работа

Коллега по работе попросила помочь сделать экзаменационную работу по информатике. Нужно было создать простую веб-страничку, презентующую некую гипотетическую компанию «Флорист».

В итоге по-быстрому за час, как говорится «на коленке», сваял аж 4 странички.

Технические детали:

1. Стек: HTML/CSS/JS.

2. Ядро: нет.

Посмотреть http://projects.bogdan-nazar.ru/florist-exam/index.htm

Исходник

АМедТур – Агентство Медицинского Туризма

АМедТур – Агентство Медицинского Туризма

АМЕДТУР — международный медицинский координационный центр, занимающийся организацией медицинского туризма и лечения в Москве и за рубежом. Главной целью компании является предоставление пациентам и консультирующим их врачам выбора наиболее подходящего госпиталя, клиники или амбулаторного центра.

Технические детали:

1. Стек: PHP/Javascript/MySQL.

2. Ядро: FlexEngine 3 (прототип)

3. Эксклюзивные модули: «Медицинские хроники», «Консультация эксперта», «Баннеры», «InPage content editor».

Посмотреть http://amedtour.com/

Необновляемое зеркало

АГР «Умный город»

АГР «Умный город»

АГР «Умный город» создано по инициативе Международной Ассамблеи столиц и крупных городов (МАГ), Министерства регионального развития Российской Федерации, Правительства Москвы, Интеграционного комитета ЕврАзЭС, Делового центра экономического развития СНГ, Московской международной бизнес ассоциации и ряда других общественных организация и частных компаний.
Технические детали:

1. Стек: PHP/Javascript/MySQL.

2. Ядро: FlexEngine 3 (прототип)

Посмотреть http://city-smart.ru/

Необновляемое зеркало

Собери набор и ничего не бойся (2012)

Развлекательная страница, посвященная «концу света» 2012 года.

Технические детали:

1. Стек: PHP/Javascript/MySQL.

2. Ядро: FlexEngine 3.0.0

3. Эксклюзивные модули: «Doomsday».

Посмотреть http://konez.metronews.ru

Необновляемое зеркало

Комбинат детского питания «Доброго здоровья»

Комбинат детского питания «Доброго здоровья»

Технические детали:

1. Стек: PHP/Javascript/MySQL.

2. Ядро: эксклюзивное.

Посмотреть http://babyfood-eco.ru/

Необновляемое зеркало

Фитнес центр «FitStudio»

Фитнес центр «FitStudio»

Фитнес центр расположен на территории бизнес центра «RigaLand»

1. Стек: PHP/Javascript/MySQL.

2. Ядро: FlexEngine 3 (прототип)

Посмотреть http://rigafit.ru/

Необновляемое зеркало

БЦ «RigaLand»

БЦ «RigaLand»

Исследовательская группа «Петромаркет» — независимая частная информационная и консалтинговая компания, специализирующаяся на проблемах нефтяных рынков России и стран СНГ. Основана в 2002 году

Технические детали:

1. Стек: PHP/Javascript/MySQL.

2. Ядро: FlexEngine 2.5

3. Эксклюзивные модули: «Меню», «Инфраструктура», «Новости», «Администратор».

Оригинальный сайт (http://rigaland.ru) уже переработан.

Необновляемое зеркало

Сайт клининговой компании «Чистые пингвины»

Клининговая компания «Чистые Пингвины» предлагает услуги по ежедневной и разовой уборке квартир и офисов.

Технические детали:

1. Стек: PHP/Javascript/MySQL.

2. Ядро: FlexEngine 3 (прототип)

3. Эксклюзивные модули: «Меню», «Администратор».

Посмотреть http://clean-penguin.ru

Необновляемое зеркало

Салон «Вики»

Салон красоты «Вики».

Технические детали:

1. Стек: PHP/Javascript/MySQL.

2. Ядро: WordPress

Посмотреть http://salonviki.ru

Агентство «СТАТУС»

Агентство «СТАТУС»

Агентство «СТАТУС» — успешно развивающаяся компания на российском рынке рекрутинга.

Технические детали:

1. Стек: PHP/MySQL/HTML/CSS/Javascript.

2. Ядро: эксклюзивное.

Оригинальный сайт (www.hrstatus.ru) — недоступен.

Необновляемое зеркало

Исследовательская группа «Петромаркет»

Исследовательская группа «Петромаркет» — независимая частная информационная и консалтинговая компания, специализирующаяся на проблемах нефтяных рынков России и стран СНГ. Основана в 2002 году

Технические детали:

1. Стек: PHP/Javascript/MySQL.

2. Ядро: FlexEngine 2.5

3. Эксклюзивные модули: «Меню», «Отзывы», «Новости», «Администратор».

Оригинальный сайт (http://petromarket.ru) уже переработан.

Необновляемое зеркало