Развлекуха

  • 09 06.08

    Публичная порка JS-гуру

    Конкурс закончился и работы проверены. Работы прислали 11 программистов, из которых один участник прислал аж 8 вариантов. На удивление решения задачи оказались очень разные. Многие писали обработчики событий обычным способом, но некоторые всё-таки рекомендуемым AddEventListener/AttachEvent. Поразило разнообразие способов проверки на пробелы и наличие классов. В принципе, поскольку сама...

    » Читать полностью » Комментарии (25)
  • 17 05.08

    Конкурс для javascript-гуру!

    Объявляю конкурс среди javascript-программистов! В качестве конкурсной задачи предлагаю выполнить зачётное задание по javascript, которое выполняли в этом году студенты web-курсов на которых я преподаю. Итак, задание: Дана форма. Нужно: При щелчке по лейблу и при помещении фокуса в поле нужно полю добавить класс «edit». При убирании фокуса из поля нужно: очистить содержимое...

    » Читать полностью » Комментарии (27)
  • 10 04.08

    Как создать логотип на основе известнейших марок

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

    » Читать полностью » Комментарии (21)
  • 07 03.08

    Видеоурок: Рисуем куб в перспективе. Результаты конкурса.

    Когда-то я затрагивал тему перспективы. Кто-то узнал о ней, кто-то освежил в памяти. Но теория должна подкрепляться практикой. Руководствуясь этим скринкастом можно легко научиться рисовать трехмерные объекты с простой линейной двухточечной перспективой в пакетах двухмерной графики. Долго искал бесплатный софт для редактирования сего произведения, в итоге использовал Windows Movie Maker....

    » Читать полностью » Комментарии (10)
  • 20 11.07

    Мода «Web 2.0». Конкурс.

    На основе статьи Web 2.0 how-to design style quide придумал шутливый туториал, приблизив модный нынче «Web 2.0» стиль web-дизайна к оффлайновой моде. 1. Простота Чем проще одежда, тем лучше. Мода 2.0 означает сосредоточение на чистоте и простоте. Но это не значит что нужно ходить в купальнике или с фиговым листочком. Это уже параноидальный минимализм.Одежда должна отличаться простотой, но иметь...

    » Читать полностью » Комментарии (15)
  • 01 11.07

    CAPTCHA креатив

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

    » Читать полностью » Комментарии (21)
  • 18 09.07

    Как объяснить блондинке объектно-ориентированное программирование?

    На примере php. Подразумевается, что самые азы программирования блондинка знает. Действующие лица: Преподаватель (П.) Блондинка (Б.) Диалог П.: Сейчас я тебе объясню принцип объектно-ориентированного программирования Б.: Ну даю... ой... хи-хи, то есть дааавате, объясняйте. П.: Ну так вот. Представь себе, что ты пошла в какой-нибудь магазин... Б.: Ещё б скааазали "гастраааном"....

    » Читать полностью » Комментарии (14)
  • 16 02.07

    OS Ресторанчики

    Пока Corel тормозит, напишу ещё пост.Обсуждали тут операционные системы и Andrew Tch такое привёл описание Осей на примере ресторанчиков (с моей редакцией):«Apple iMac - это красивый богатый ресторан в котором ты можешь заказать себе филе аллегатора фаршированое ушами слона, правда заплатить много придётся.Linux - это сеть ресторанов разных размеров, с разными вывесками, в котором заказав,...

    » Читать полностью » Комментарии (7)
  • 04 12.06

    Винни Пух и ещё, ещё, ещё…

    Вспомнил одну интересную и забавную вещь - на латышском языке Винни Пух звучит как Виннийс Пукс (Vinnijs Puks). Задумался, а как бы могло имя известнейшего героя звучать на других языках мира? Прикинул и набросал: по-немецки: Виннихь Пухштайн по-французски: Виньюа Пухьён по-испански: Виннио Пухиас по-итальянски: Винньето Пухини по-литовски: Винниатас Пухиайтис по-чешски: Винниаш Пухак по-польски:...

    » Читать полностью » Комментарии (7)
Google     
27 05.10

Вёрстка в Латвии: Вчера. Сегодня! Завтра?

Версия моего выступления на Web Standards Days Riga 2010 вызвавшего неоднозначную реакцию. Много было регистраций работников различных дизайн студий, компаний занимающихся разносторонней веб-разработкой, банков, министерств, фрилансеров и просто интересующихся. Я не зря добавил в форму регистрации поле для адреса сайта. Те люди, что собрались на конференцию, скромно говоря, флагманы, пионеры латвийской веб-разработки. Поэтому не грех было покопаться в их работах и попробовать понять, что же всё-таки у нас происходит с текущим использованием технологий? Статистика вещь интересная, но только если она связанна с интересными темами. Мне было интересно заняться небольшим статистическим анализом, результатами которого я с вами сейчас поделюсь. Конечно в дебри я не полез, из-за большой лени, но то, чего успел накопать хватает достаточно, чтобы составить небольшую рекомендацию, с чего стоит начать осовременивать свою вёрстку. Вчера Итак, что же можно назвать «вчера»? ASCII...

Категории: Исследования | Брaузеры | Статистика | xhtml/xml | htmlТэги: » Читать полностью » Комментарии (12)
09 02.10

Восприятие информации по горизонтали и вертикали

Почему мы воспринимаем информацию слева направо и сверху вниз (как говорят некоторые «буквой Z»)? Правильно, потому что мы так пишем. Так пишет добрая половина человечества, а создатели компьютеров «навязали» такой стиль и восточным народам (хотя те и сопротивляются). А почему мы так пишем? Да потому что писать справа налево неудобно так же как писать левшам слева направо. Мы же себе строчку рукой закрывать будем! «Лево-право, право-лево…» © Фунтик Т. е. вывод какой? Виновата физиология, а не мозги (у востока — наоборот). Посмотрим правде в глаза… человека: Если вы не знали, то глаза находятся на одной горизонтали и угол обзора по горизонтали больше, чем по вертикали. Соответственно в обзор попадает гораздо больше информации располагающейся по горизонтали, а не по вертикали. В силу опять-таки особенности физиологии человеческого глаза, мышцы двигающие глаза по горизонтали гораздо сильнее (или более развиты, не знаю как правильно), чем те, что двигают глаза по вертикали....

Категории: Веб‑дизайн | Usability | Разработка сайтовТэги: » Читать полностью » Комментарии (9)
25 08.09

Всемирная HTML 5 истерия

Я не знаю, об этом просто сейчас модно писать или народ действительно в восторге? На самом деле, я бы с удовольствием, присоединился к толпе ликующих, если бы событие произошло год назад, именно тогда я написал статью «HTML должен быть…». Чему всё-таки радуется человечество? Например, одна из самых распространённых тем в блогах, это новые тэги: header, footer, nav, article, aside, section и др. Очнитесь ребята! Эти тэги можно было использовать с тех пор как регламентировали стандарт xhtml! Все бразуеры, кроме IE воспринимали их как строчные элементы, а с помощью CSS их можно сделать блочными. Ну да, Internet Explorer… Но почему только когда официально консорциум объявил об отказе от XHTML 2.0 (кстати, я это пророчил), появился простой и понятный код, решающий эту проблему? document.createElement("header"); Это тоже работа группы WHATWG? Ах, да! Ещё и Firefox 2, в котором работают эти тэги, но только в режиме парсинга xhtml+xml. Это большая проблема, которая решилась...

Категории: ЖурналТэги: » Читать полностью » Комментарии (11)
16 08.09

Seleckis’ method vs Pixy’s method

Честное слово, пытался найти и убедить себя в том, что этот метод уже существует. Не нашёл. Исправьте меня если я не прав. Pixy’s method отображение картинок с надписями заключался в том, чтобы внутрь блока с текстом поместить пустой <span>, и вставить картинку как фон для этого span-а. Причём, для того чтобы текст показывался в случае если картинки отключены, необходимо span поместить поверх текста. В методе Pixy, для того чтобы <span> с картинкой налез на текст используется абсолютное позиционирование. В таких условиях кнопка не может находиться в строке, она может существовать только как блочный элемент. Почему? Потому что Firefox 2 не поддерживает свойство «display: inline-block». Для отображения блока в строке в Firefox-е используется проприетарное свойство «display: -moz-inline-box» или «display: -moz-inline-stack». Но в таком случае браузер не совсем адекватно позиционирует помещённые внутрь элементы. В частности некорректно работает абсолютное...

Категории: CSSТэги: » Читать полностью » Комментарии (9)
06 08.09

Min-width и max-width в IE6 с помощью expression

Уже писали много раз, просто приведу свой код. В JavaScript-файле размещаем такую функцию: function width(min,max){ w = document.documentElement.clientWidth; return (w = max) ? max + "px" : "auto"); } Функция всего лишь принимает значения максимальной и минимальной ширины, проверяет текущую ширину документа и возвращает значение: Если ширина документа меньше минимальной ширины, то возвращается минимальная ширина; Если ширина документа больше максимальной ширины, то возвращается максимальная ширина; Иначе ширина указывается автоматическая. Функция из CSS вызывается следующим образом: div { width: expression(width(600,1000)); /* далее для нормальных браузеров */ min-width: 600px; max-width: 1000px; } 600 и 1000 — минимальная и максимальная ширина. Поскольку expression работает только для IE, а min-width и max-width уже работают в IE7 и IE8, то этот CSS нужно изолировать и вынести в отдельный css-файл и подключить его с помощью...

Категории: Брaузеры | CSS | JavaScriptТэги: » Читать полностью » Комментарии (7)
31 07.09

«Резиновое» поле ввода в форме

Как известно у полей ввода ширина не может рассчитываться автоматически относительно контейнера, как это работает у блочных элементов. Значение ширины можно задать фиксированное, либо относительное. Есть сервисы в интернете с полями ввода (например, поиском) у которых ширина задана фиксированно. Соответственно, если шаблон сайта резиновый, то поле ввода растягиваться не будет. Как правило такие сайты имеют фиксированную вёрстку. К примеру, если вы зайдёте на «Yahoo Answers» и с помощью Firebug (Firefox), Web Inspector (Safari, Chrome) или Developer Tools (Opera, IE8) отключите у элемента <div id="y-ks-whole-page"> свойство «width: 750px;» в стилях, то сайт растянет на всю ширину, а поле поиска вопросов останется той же ширины. Конечно, кроме всего прочего, некоторые другие элементы останутся фиксированными, но мы говорим о полях ввода. И вспомним работу студии Артемия Лебедева, поисковик «Яндекс» и его страницу ya.ru — облегчённую версию поисковика или посмотрим на давно...

Категории: CSSТэги: » Читать полностью » Комментарии (23)
28 07.09

Элементы управления в веб-сервисах

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

Категории: Веб‑дизайн | Usability | Разработка сайтовТэги: » Читать полностью » Комментарии (6)
17 03.09

Навигация веб-сервисов и социальных сетей

Меня удивляет непоследовательность разработчиков интерфейсов различных социальных сетей и веб-сервисов в организации навигации. Простая и понятная навигация встречается на очень редких сайтах. Это свидетельствует о том, что в разработке не участвуют специалисты по юзабилити, либо по каким-то техническим, экономическим, амибициозависимым соображениям их рекомендации не берутся во внимание. Конечно я допускаю мысль о том, что часто изначально разработчики сами не знают какие функции будут доступны в их детище. Разработка циклична и возможно некоторые функциональные особенности будут со временем убраны или реорганизованны. В любом случае в такого рода разработке нужен системный подход. В этой статье я расскажу, как я вижу сложную навигацию веб-сервиса (на примере социальной сети). Как правило, социальная сеть состоит из пользователей, и содержимого, которое эти пользователи создают. Поэтому мы можем представить их взаимоотношение такой схемой: Если раскрыть значение этих...

Категории: Исследования | Usability | Разработка сайтовТэги: » Читать полностью » Комментарии (5)
28 02.09

Строчная кнопка как кнопка submit

Требуется создать строчную кнопку submit неопределённой ширины с фоновой картинкой. Почему это нельзя сделать стандартными средствами? Т. е. мы конечно можем поместить на страницу кнопку и спокойно её использовать. Но нет, нам же этого мало. Нужно чтобы кнопочка была красивая, градиентная, с закруглёнными уголками. Стандартным способом мы можем указать фон для кнопки, добавить рамочку и в браузерах FF и Safari добавить закругления. Но проблема в том, что это во-первых не будет работать в IE и Opera, а во вторых, размеры кнопочек, положение текста и отступы везде будут разные. В FF2 вообще фон вылез за край закруглений. Можно попробовать поместить кнопку submit в элемент span, чтобы использовать метод Sliding Doors. В этом случае можно будет без проблем поставить в качестве фона картинки как для элемента «span», так и для элемента «input». Но к сожалению и этот способ не подойдёт, поскольку нет возможности адекватно выровнять текст по...

Категории: CSSТэги: » Читать полностью » Комментарии (16)