Поле ввода с убирающейся подсказкой

Трудно представить современный сайт без интерактивности. И она состоит из множества мелких деталей, которые стали уже чуть ли не стандартом в web-строительстве. Одна из таких "фишек" - текстовое поле ввода, в котором по умолчанию прописана подсказка об ожидаемом содержимом, например, "введите текст для поиска". При клике на это поле текст подсказки убирается, а при уходе с него, если пользователь ничего не ввел, текст подсказки возвращается обратно. Такой способ экономит полезное место в дизайне, не загромождая его выносными подсказками, а также помогает пользователю лучше ориентироваться при заполнении различных форм. Классический вариант, который обычно используется на сайтах, выглядит примерно так:Могут быть некоторые варианты в реализации, но основной принцип остается этот же. Алгоритм простейший: при получении фокуса полем ввода проверяется его содержимое. Если оно совпадает со значением, установленным в параметре value, то содержимое подменяется на пустую строку. При потере фокуса также выполняется обратная проверка, и если поле осталось пустым, то в него подставляется значение по умолчанию. Плюсы этого способа: минимальный код, работает с отключенными стилями, хорошая совместимость с различными браузерами. Но минусы тоже значительные: при отключенных скриптах поле ввода придется сперва вручную очистить, а затем уже вписать в него нужное значение, для смены оформления подсказки придется писать дополнительный код, при отправке формы без дополнительных проверок будет передано значение по умолчанию и в любом случае потребуется дополнительная обработка введенных данных на стороне сервера, особые поля типа пароля будут отображать звездочки вместо текста подсказки.

Читать статью целиком »

Исследование защиты программы TopStyle 4

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

Читать статью целиком »

Защита контента сайта при помощи CSS

Так уж получается, что старая пословица "Один с сошкой - семеро с ложкой" актуальна и в наше время. Только звучит немного иначе: "Один пишет - семеро копипастят", да и коэффициент 7 явно занижен. Я ничего не имею против, когда копируют статью и указывают прямую ссылку на сайт-первоисточник, это уважение к труду автора статьи и обычная практика в цивилизованном интернете. Но находятся безмозглые ублюдки, для которых размещение ссылки на сайт автора, у которого они скопипастили статью, является чем-то из области фантастики. В результате кто-то стрижет купоны за счет вашего труда, а вам от этого не перепадает ничего, даже новых посетителей. Активная защита, как правило, является пустой тратой времени (ну кроме, пожалуй, физического устранения, только УК РФ еще не отменили), письма админам и хостерам находят отклик и понимание лишь в единичных случаях. Полное запрещение копирования средствами скриптов и другие подобные меры во-первых бесполезны, а во-вторых будут только мешать нормальным посетителям пользоваться плодами вашего труда. Значит надо придумать какой-нибудь способ, который будет абсолютно прозрачным для обычных посетителей, но при этом статьи будут содержать информацию о том, откуда они были скопированы. Как ни странно, в этом могут помочь каскадные таблицы стилей CSS. А именно стиль display со значением none. При его применении к любому html-элементу, элемент визуально полностью исчезает со страницы, но при этом фактически продолжает на ней находиться. И, что самое важное для нас, содержимое скрытых элементов будет попадать в буфер при копировании. Простой пример, возьмем какой-нибудь оригинальный текст и добавим в него наш собственный, заключив его в теги span со стилем display:none.

Читать статью целиком »

Шпаргалки для Web-мастера по HTML, CSS и JavaScript

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

Целые каталоги шпаргалок по различным языкам программирования предлагают сайты TechCheatSheets.com, gotAPI, WhatIs.com и refcards.com. Последний сайт уже давно не обновлялся.

Большой набор файлов-шпаргалок по PHP, Apache, mod_rewrite, CSS, JavaScript, HTML, MySQL, ASP, VBScript и другие можно найти на сайте Added Bytes. Они выполнены в формате PDF и PNG.

Отдельно шпаргалки по JavaScript выложены на сайте JavaScript Reference, использование регулярных выражений в JavaScript можно посмотреть на сайте VisiBone. При желании там же можно за денежку заказать наборы шпаргалок в бумажном виде.

Онлайновый справочник по HTML и CSS на русском языке на сайте htmlbook.ru, а в виде шпаргалок на сайте HTML Tags. Справочники по CSS с примерами здесь и здесь. Справочник по CSS на русском языке выложен на сайте Александра Климова, а на сайте CSSplay вы можете посмотреть интересные примеры верстки с использованием CSS.

Таблицу HTML-цветов можно посмотреть на сайте VisiBone или скачать в формате PDF с сайта Veign.

Читать статью целиком »