Как стать автором
Обновить
6
Карма
0
Рейтинг
qwertysx @qwertysx

Пользователь

  • Подписчики 2
  • Подписки 1

Обзор плагинов ++

jQuery *
Очередной топик с обзором нескольких интересных плагинов jQuery.

Mobily Map




Позволяет сделать интерфейс, подобный google-картам, на основе собственных изображений (возможность перетаскивать, ставить маркеры на изображении, реагировать на нажатие по ним и др.).
Узнать больше (англ.) | Посмотреть в действии


Читать дальше →
Всего голосов 162: ↑148 и ↓14 +134
Просмотры 3.1K
Комментарии 22

Canvas шаг за шагом: ПОНГ

JavaScript *HTML *Canvas *
Tutorial
Сегодня попробуем написать небольшую игру Понг используя html5 тег canvas. Те кто не хочет читать пост тот может сразу ИГРАТЬ.
Если верить Википедии, то можно узнать что Pong является простейшим симулятором настольного тенниса. Небольшой квадратик, заменяющий пинг-понговый мячик, двигается по экрану по линейной траектории. Если он ударяется о периметр игрового поля или об одну из нарисованных ракеток, то его траектория изменяется в соответствии с углом столкновения.
Геймплей состоит в том, что игроки передвигают свои ракетки вертикально, чтобы защищать свои ворота. Игрок получает одно очко, если ему удаётся отправить мячик за ракетку оппонента…

Мы попытаемся реализовать игру так что бы в неё можно было играть при помощи мыши, а оппонентом управлял компьютер. Итак приступим. Для начала определимся с тем что, для полного понимания происходящего в этой записи желательно ознакомиться с постом описывающим основы.
Читать дальше
Всего голосов 41: ↑41 и ↓0 +41
Просмотры 48K
Комментарии 22

Визуализация графов. Метод связывания ребер

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



Это граф зависимостей некой программной системы. Он представляет собой дерево разбиения на пакеты (серые шарики — пакеты, белые — классы), на которое поверх наложены ребра зависимости одних классов от других. Чтобы не рисовать стрелки направления, ребра нарисованы в виде градиентных линий, где зеленый — это начало, а красный — конец ребра. Как видите, граф настолько визуально перегружен, что архитектуру программы невозможно проследить.
Под катом описание метода, решающего эту проблему.
Читать дальше →
Всего голосов 214: ↑205 и ↓9 +196
Просмотры 54K
Комментарии 67

SSH-туннель домой без необходимости оставлять включённым домашний ПК

Информационная безопасность *
Disclaimer
Этот пост появился здесь по нескольким причинам:
1) Меня попросил сам Boomburum
2) Есть предположение, что на хабре всё-таки есть люди, имеющие прямое отношение к IT, но при этом имеющие весьма отдалённое представление о пользе SSH и её извлечении из обычного домашнего роутера, и которым, надеюсь, будет весьма интересно и полезно об этом узнать.

Хабралюдям, познавшим Дао IOS, tun, VPN, *wrt, WOL… etc, предлагается на выбор:
А) Закрыть топик, заняться делом и не выводить себя из нирваны чтением этой любительской фигни.
Б) Потратить время на конструктивную критику и полезные дополнения в комментариях.
Специально для GrammarNazi:
Пишите пожалуйста об ошибках в личку — обещаю исправиться.
Бла-бла-бла, а топик-то о чём?
Итак, я обещал рассказать «как поднять ssh-туннель домой без необходимости оставлять включённым домашний ПК» и, как правильно догадался peter23 речь пойдёт про ssh-сервер на роутере.
Читать дальше →
Всего голосов 259: ↑234 и ↓25 +209
Просмотры 200K
Комментарии 100

Вышла третья бета PIE 1.0

CSS *
Перевод
Предисловие переводчика.  «Костыль» PIE, позволяющий легко и уверенно обеспечить поддержку целого ряда свойств CSS3 во браузерах IE6, IE7 и IE8 (которые в этом смысле без «костыля» оказываются «хромыми» до убожества), давно заслужил горячую, страстную приязнь со стороны многих передовых сайтооформителей, и в этом качестве не раз на Хабрахабре упоминался (последний раз — 13 января 2011 г.). Я решил перевести нижеследующее, пускай и не новое, объявление (выход PIE 1.0 beta 3 состоялся 6 декабря 2010 г.) для того, чтобы в явном виде лишний раз донести до всех заинтересованных читателей весть о том, что в этот год PIE вступает обновлённым и улучшенным. Всем тем, кто впервые начал использовать PIE прошлой осенью или летом, настало время крепко призадуматься, во-первых, об апгрейде PIE (во имя ускорения работы сайтов), а во-вторых, об освоении новых, декабрьских свойств и возможностей PIE.
[CSS3 PIE]Она подготавливалась долгое время, но вот третья бета PIE 1.0 наконец вышла! Этот выпуск содержит множество изменений; вот некоторые из крупных улучшений в нём:
  • Скорость! — Крупнейшим и легкозаметнейшим улучшением в этом выпуске стала скорость. По итогам обширного профилирования были найдены наиболее медленные участки исполнения кода PIE, и многие из них подверглись оптимизации. Результаты ошеломляют: скорость PIE выросла до четырёх раз в сравнении со второй бетою, особенно заметно — в IE8. И это принесёт ускорение обработки страниц и вам, и читателям ваших сайтов!
     
  • Ленивая инициализация — Даже с учётом всех улучшений скорости, если ваша страница весьма длинна, она может содержать сотни PIEфицированных элементов, которые суммарно приведут к заметной задержке. Однако есть шанс, что лишь немногие из них видны в окне просмотра изначально (после загрузки страницы), чего же тогда тратить время на обработку остальных элементов, прямо сейчас не видимых? Теперь вы можете задавать специальное свойство -pie-lazy-init: true в CSS, и тем самым откладывать инициализацию всех PIEфицированных элементов за пределами видимой области загруженной страницы. Они будут проинициализированы и отображены после того, как читатель до них допрокручивает страницу.
     
  • PIE.js: отдельная версия на джаваскрипте — Теперь есть два способа использования PIE: традиционный (PIE.htc и behavior) и новый (отдельный джаваскриптовый файл PIE.js). Хотя указание файла .htc и свойства behavior останется рекомендуемым подходом, JS-версия позволяет употреблять PIE в некоторых таких ситуациях, в которых behavior не в состоянии сработать. Поглядите в документации по PIE.js подробности о том, когда и как вы можете пожелать прибегнуть к JS-версии.
     
  • Работает с табличными элементами — Теперь применение PIE к элементам <table>, <th> и <td> приводит к корректной обработке и впредь не грозит бесконечным циклом.
     
  • Работает с изображениями — Теперь вы можете использовать PIE для закругления уголков элементов <img>.
     
  • -pie-png-fix — Теперь вы можете использовать PIE в качестве общего исправления альфа-прозрачности PNG для IE6, используя новое специальное CSS-свойство -pie-png-fix: true. Подробности изложены в документации по -pie-png-fix. Эту функциональность обеспечил Felix Gnass.
     
  • Отключено в IE9 — Так как IE9 самостоятельно поддерживает множество тех же свойств и значений CSS3, что и PIE, и так как ещё не ясно, что IE9 будет поддерживать в окончательной версии, то на время PIE будет отключаться при работе в IE9; это временное решение будет пересмотрено по мере дальнейшего развития событий.
     
  • position:fixed — Теперь PIE располагает свои элементы отображения корректно, когда применяется к элементам со свойством position:fixed (это никак не касается IE6, поскольку IE6 не поддерживает свойство position:fixed самостоятельно).
     
  • Печать — Теперь PIE самостоятельно устраняет все свои элементы во время печати страницы. Помимо исключения целого ряда проблем с отображением, такое самоустранение также не пренебрегает пользовательскими настройками о непечатании фонов и обеспечивает экономию чернил.
     
  • Множество других исправлений и улучшений — см. логи правок кода.
Скачайте PIE 1.0 beta 3 прямо сейчас!

Читать дальше →
Всего голосов 83: ↑75 и ↓8 +67
Просмотры 7.5K
Комментарии 46

Переписываем проект с Zend Framework на Rails

Разработка веб-сайтов *
Около пяти месяцев назад я завязал с zend framework и пересел на рельсы. Тогда же начал переписывать свой проект www.okinfo.ru. Сейчас он уже закончен и sloccount показал что количество строк в проекте уменьшилось с 15000 до 4000. Мои знакомые php разработчики попросили success story и в итоге родилась эта статья. В ней я опишу как оно было, а так же немного расскажу о своем переходе на ruby.
Читать дальше →
Всего голосов 154: ↑143 и ↓11 +132
Просмотры 7.5K
Комментарии 197

Украшаем списки

CSS *
Перевод
В 2002 году Марк Ньюхаус (Mark Newhouse) опубликовал статью «Укрощение списков» ("Taming Lists"), довольно-таки интересную часть которой он посвятил объяснению того, как создавать собственные списки, украшенные псевдо-элементами. Почти десять лет спустя Николас Галлахер (Nicolas Gallagher) изобрел технику, которая использует псевдо-элементы из спрайтов, для создания фоновых изображений.
Сегондя, основываясь на опыте гигантов, мы постараемся развить эту тему. Мы обсудим, как можно украсить элементы без дополнительной разметки, используя только технику CSS-спрайтов. Результат будет работать также в Internet Explorer 6 и 7 версии.
Читать дальше →
Всего голосов 113: ↑107 и ↓6 +101
Просмотры 22K
Комментарии 27

Обзор jQuery-плагинов для стилизации селектов

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

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

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

Стандартный select



Достоинства:
  • работает на всех устройствах, в том числе на мобильных телефонах
  • автоматически подстраивает ширину
  • без проблем контролируется с помощью jQuery
  • открывается всегда на видимую часть страницы (так называемое «умное позиционирование»)
  • сам определяет оптимальную высоту для выпадающего списка
  • позволяет группировать опции
  • позволяет выделять сразу несколько пунктов (если, конечно, прописать необходимые атрибуты)
  • реагирует на переход Tab'ом
  • имеет подбор по первой букве
  • поддерживает скролл колёсиком мышки
Недостатки:
  • выглядят во всех браузерах по разному
  • не имеет возможности быть нормально стилизованным
Посмотрим что же могут остальные
Всего голосов 108: ↑91 и ↓17 +74
Просмотры 131K
Комментарии 69

Заработать на контенте. Шаг 2: анализ и выбор ниши, подготовка сайта

Блог компании НеВсем
Эта заметка в поддержку поста «Заработать на контенте», в котором я упомянул, что одним из вариантов выбора ниши для создания сайта может быть клуб о готовящейся к выходу модели машины.

Так получилось, что летом решили купить машину жене. Поездили, посмотрели, сравнили.

Выбор пал на Sandero Stepway. Производство машины стартовало в январе этого года. Модель новая, было интересно покопать информацию в сети. В итоге было собрано много материалов и я решил, что они могут быть полезны другим людям.

Так появился блог о Renault Stepway.

Работа по созданию сайта заняла 4 дня. Хочу поделиться с вами описанием процесса работы и результатами по его посещаемости.
под катом описание процесса и графики с результатами
Всего голосов 33: ↑27 и ↓6 +21
Просмотры 13K
Комментарии 30

JS1k — пишем отличное веб приложение в 1024 байт

JavaScript *


Уже второй год я участвую в JS1k, в прошлом году был пробный скрипт, сейчас я решил подойти основательно. Приложения я уже написал и отправил. В статье я хочу поделиться своим опытом: как стоит писать приложение для JS1k, чем сжимать, как сократить код в 4 раза и вообще как впихнуть что-то интересное в 1 Кб.

Тема текущего JS1k "Oregon Trail" — классическая игра для Apple II (что это можно нагуглить). Поэтому рекомендуется написать что-то в этом духе, но это не обязательно.

Начало


Вам необходимо придумать небольшое приложение или демку, которое по вашему мнению может влезть в 1кб (продумать детали и управление). Если вы сомневаетесь в своих прикидках, то можно посмотреть, что впихнули в прошлом году: Legend Of The Bouncing Beholder, Tiny chess. Прочитайте правила и используйте html шаблон — тогда ваше приложение будет 100% работать в демо среде.
Начните писать скрипт, без каких-либо оптимизаций, но следите за его размером. Если он стал больше 4-5Кб — вам стоит придумать другую тему или в будущем придется попотеть (у меня было 4393 байт).
Читать дальше →
Всего голосов 62: ↑59 и ↓3 +56
Просмотры 3.2K
Комментарии 48

Справочник, посвященный тонкостям JavaScript

JavaScript *
JavaScript Garden — справочник на английском, посвященный тонкостям JavaScript.

Из него я, например, узнал, что массивам можно задавать length:
var list = [1, 2, 3, 4, 5];
list.length = 3;
console.log(list); // => [1, 2, 3]
Читать дальше →
Всего голосов 86: ↑76 и ↓10 +66
Просмотры 3.3K
Комментарии 43

CSS спрайты из командной строки

Клиентская оптимизация *
Из песочницы
Да, инструменты для создания CSS спрайтов существуют. Я даже сделал один такой сервис. Но они время от времени ломаются (как сейчас, мой). Но и командная многого стоит, и imagemagick. Давайте посмотрим, как мы можем создавать CSS спрайты только из командной строки.

Создание картинки


Начнем с того, что у нас есть список отдельных файлов:
$ ls

1.png  2.gif  dot.png  phoney.gif  tw.gif

  • — 1.png
  • — 2.gif
  • — dot.png
  • — phoney.gif
  • — tw.gif

Сделаем из них спрайт:
$ convert *png *gif -append result/result-sprite.png

Да, это все. Смотрим результат.

Читать дальше →
Всего голосов 139: ↑129 и ↓10 +119
Просмотры 3.9K
Комментарии 22

DDoS, когда его совсем не ждут

Информационная безопасность *

Вступление


В этой статье не будет никакой рекламы конкретных фирм и она не претендует на «самую умную статью о DDoS». Цель этой статьи – обратить ваше внимание на проблему, которая рано или поздно может коснуться и вас.
Читать дальше →
Всего голосов 95: ↑84 и ↓11 +73
Просмотры 9.2K
Комментарии 117

Хостинг 3D-моделей Viewpot

Я пиарюсь
Привет, хабрасообщество! Хотел бы рассказать вам о своем проекте, над которым я работаю в свободное время. Он называется Viewpot и является первым в Сети хостингом 3D-моделей.


Читать дальше →
Всего голосов 62: ↑58 и ↓4 +54
Просмотры 1.8K
Комментарии 44

pv — маленькая, но очень полезная утилита

Настройка Linux *
Один мой друг сказал по поводу pv следующее «Я админю семь лет, мне нужна была эта тулза десятки раз, а я даже не знал что она существует». В размышлениях над тем как заполучить инвайт на Харбе, я набрал в поиске pv. И ничего не нашел.
Читать дальше →
Всего голосов 290: ↑280 и ↓10 +270
Просмотры 66K
Комментарии 93

HTML5 для веб-дизайнеров. Часть 3: Мультимедиа

IT-стандарты *
Перевод
HTML5 для веб-дизайнеров

  1. Краткая история языка разметки
  2. Модель HTML5
  3. Мультимедиа
  4. Формы 2.0
  5. Семантика
  6. HTML5 и современные условия


В истории всемирной сети каждый очередной виток перехода на новый уровень развития начинался с какого-нибудь технологического нововведения. Когда в HTML добавился элемент img, это в корне изменило облик сети. Затем введение JavaScript сделало ее более динамичной и интерактивной. Чуть позже появился Ajax, что открыло возможности для создания в сети полноценных приложений.

Современные веб-стандарты настолько продвинуты, что сейчас можно создать почти что угодно, используя лишь возможности HTML, CSS и JavaScript. Почти что угодно.

В спецификациях этих стандартов все еще есть пробелы. Так, если вы хотите сваять страницу с текстом и картинками, вы вполне обойдетесь HTML и CSS. Но если вам нужно опубликовать аудио или видео, тут неизбежно придется обратиться к сторонним технологиям — Flash или Silverlight.

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

HTML5 призван восполнить этот недостаток. В данный момент он вступает в прямую конкуренцию с собственническими технологиями, вроде Flash и Silverlight, и главное его преимущество в этой борьбе — ему не требуется плагины, так как его мультимедиа-возможности «вшиты» в браузеры.
Читать дальше →
Всего голосов 113: ↑111 и ↓2 +109
Просмотры 7.2K
Комментарии 30

jPlayer — плагин для проигрывания аудио и видео

jQuery *
imageЯ уже писал про скрипт audio.js, позволяющий проигрывать аудио файлы использую возможности html5 и flash. Пост был встречен хорошо, поэтому сейчас я хочу рассказать про jPlayer — jQuery плагин для проигрывания аудио и видео.
Читать дальше →
Всего голосов 90: ↑85 и ↓5 +80
Просмотры 54K
Комментарии 43

Загрузка файлов с помощью HTML5 и сколько раз мы сказали нехорошие слова

Разработка веб-сайтов *
Из песочницы
Стояла задача: найти или создать загрузчик файлов на сервер, использующий возможности HTML5 для мультизагрузки. Загрузчик должен:
  • отправлять методом POST любые параметры вместе с файлом;
  • отправлять куки;
  • предоставлять возможность выбора сразу нескольких файлов (или нескольких тысяч – тут как пользователь захочет);
  • отправлять файлы группами;
  • файлы собираются в группы до определенного количества мегабайт, или до определенного количества файлов в группе; (это связано с тем, что на сервере есть ограничение на размер POST запроса и на количество файлов в одном пакете)

Именно по причине отсутствия опыта работы с флешем, для создания загрузчика был выбран только JavaScript.

Итак, что из этого получилось

Читать дальше →
Всего голосов 87: ↑84 и ↓3 +81
Просмотры 6.5K
Комментарии 67

Информация

В рейтинге
Не участвует
Зарегистрирован
Активность