Профессионалам и не только

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

Хочется, наконец, обобщить опыт и упростить понимание кода между большинством веб-разработчиков.

Счётчик для сайтов на css|box

Релиз счётчика. Показывает рейтинг сайта, размещённого на css|box.

Например: Этот сайт в галерее CSS-сайтов css|box

Код счётчика есть на странице каждого сайта.

jQuery, CSS3, клиенты, картинки

Проблема:

Клиент, радостный, хочет выложить фото своей новой собаки. Открывает свой сайт, создаёт статью, вставляет картинку выравнивает её по левому краю. Сохраняет, смотрит на сайт…. и о боже, у картинки нету отступов! Или наоборот, они есть с обоих сторон…

Читаем дальше…

Каждому блогеру на пиво и хостинг

… достанется, если писать регулярно что нибудь интересное. 360$ в год, вполне реально. Sape — система автоматической покупки и продаж ссылок.

sape.gif

Для этого надо просто выделить немного места на странице, под небольшой блок ссылок. Пусть они будут и «продажные» :).

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

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

Зарегистрироваться, вставить небольшой код на страницы своего блога и ждать поступления денег на свой WM-кошелёк, всего 3 простых шага. 3 шага, которые окупят хостинг, домен и ещё останется побаловать себя любимого.

CSS-Framework

Начал новый проект, CSS-Framework. Надеюсь, будет кому-то полезен :)

Это набор CSS-правил для оформления контента, форм. Стандартные горизонтальные и вертикальные меню. Некий шаблон, с которого можно быстро начать новую html-вёрстку.

Псевдокнопочки на CSS

Всё новое, это хорошо забытое старое, подумал я, читая How to make sexy buttons with CSS.

Технология сдвижных дверей, судя по всему, остаётся актуальной, пока не будет повсеместно введена поддержка CSS3.

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

Для создания нам понадобиться 1 картинка:

psevdoknopochki-pic-2.gif

Верхняя часть, это фон обычной кнопки, нижняя — нажатой.

Небольшая иллюстрация для наглядности:

psevdoknopochki-pic-1.gif

И совсем чуть-чуть CSS-кода:

a.button {
    background: url("button.gif") no-repeat top right;
    color: #444;
    display: block;
    float: left;
    font: normal 12px Arial, Sans-Serif;
    height: 24px;
    margin-right: 6px;
    padding-right: 18px;
    text-decoration: none;
    outline: none;
}

a.button span {
    background: transparent url("button.gif") no-repeat;
    display: block;
    line-height: 14px;
    padding: 5px 0 5px 18px;
}

a.button:active {
    background-position: bottom right;
    color: #000;
}

a.button:active span {
    background-position: bottom left;
    padding: 6px 0 4px 18px;
}

Сам html-код:

<a href="/" class="button"><span>Ok</span></a>

И пример реализации.

Счётчик не желаете?

Думается создать графический счётчик-кнопку(88×15) для сайтов, размещённых в css|box. Или эти все кнопочки уже как признак плохого вкуса? :)

В связи с проблемами на хостинге(надеюсь временными) изменен порядок регистрации новых сайтов. Для реистрации достаточно отправить мне письмо, подробнее…

Результаты голосования — «Как писать классы и идентификаторы из 2-ух и более слов»

В итоге недельного голосования победило тире «-». Этот символ становиться негласный стандартом, при разделении сложных имён классов и идентификаторов.

Сейчас стартовало 4 опроса, целью которых — выбрать наиболее предпочитаемые имена директорий для стилей, картинок, скриптов. Они выводятся в случайном порядке, в правой колонке.

Имена для фоновых изображений, каталоги

Во время создания макета через наши «фотошопы» проходит множество картинок, фоновых и не очень.

Чтобы долго не ломать голову, где какая картинка. Я называю их по имени объекта, фоновой картинкой, которого она является.

body.jpg(картинка для body), header.gif(#header), logo.gif(#logo), catalog-item.gif(.catalog-item)

Картинки складываю в директорию i, JavaScript лежит в директории js, рыбные картинки в temp_images, стили в папке css.

Вот и все премудрости. А, как у вас?

Этот пост затевался для того, чтобы определиться с этими 2-мя премудростями:

  1. Какие имена лучше всего давать фоновым картинкам?
  2. Какие имена для папок с ресурсами?

Стандарты именования html-layout

Хочется поднять с глубин обсуждений такую тему, как стандартизация именования элементов в html-вёрстке.

Потому-что:

  • чтобы было понятно не только автору, но, и всем, кто продолжит работу с сайтом после…
  • для облегчения самого процесса работы
  • css-файлы станут намного понятнее и проще
  • ещё много плюсов…

Все следующие публикации связанные с этой темой будут построены по простому принципу:

  1. Пишется пост с темой обсуждения, предлагается несколько вариантов для принятия его в стандарт
  2. В комментариях любой жалающий может их оспорить, предложить свой вариант и т.д.
  3. Через неделю открывается голосовалка, с наиболее приёмленными вариантами стандарта
  4. Ещё через неделю, вариант решения, собравший наиболее количество голосов, уходит в стандарт

Обсудждать можем начать с того, как писать классы и идентификаторы из 2-ух и более слов:

  1. через – (header-logo)
  2. через _ (header_logo)
  3. через Большие буквы (headerLogo)