Как определить, что сайт сверстан качественно?
Есть много статей о том, как делать хорошо, но совсем нет – о том, как делать не надо, ведь даже валидный и кроссбраузерный сайт может быть сверстан отвратительно.

Из этой статьи вы узнаете:

• О плохих приемах современной верстки;
• О том, как даже не будучи профессионалом, за 5 минут определить плохо ли сверстан сайт или нет.

По следам хабралинча имени Рюмкина коснёмся темы правильного типографического оформления чисел. В голову пришли следующие темы, если что-то вдруг забыто — пишите в комментариях, добавлю в статью.

• Минускульные и маюскульные цифры
• Целые числа и десятичные дроби
• Простые дроби
• Буквенные сокращения (тысяча, миллион, миллиард)
• Диапазоны
• Порядковые числительные и числительные в составе сложных слов

Ещё в комментариях к хабралинчу возникло интересное обсуждение согласования и управления при употреблении порядковых числительных, но это, как мне кажется, скорее отдельная тема для блога Пишу правильно.

Автор: Gennady

Эту штуку можно часто встретить, когда сталкиваешься с заполнением форм, там где требуется ввести дату или диапазон дат в нужном формате. Пользователь, он же обязательно ошибется и введет дату не в том формате, потом будет соображать, где ошибка, а потом и вовсе уйдет, не заполнив форму… Вот для того, чтобы сделать выбор даты очень простым и удобным и предназначен этот UI jQuery. Календарь, или что точнее datepicker…

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

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

Думаю многим из вас приходилось когда-либо сталкиваться с прикручиванием поиска, на сайте. Вот и мне по работе, пришлось этим заняться.

В поисках поискового движка, так понял, лидирующие места занимают Lucene и Sphinx.

Но требования следующие (норма):

• Стабильная работа с русским языком
• Морфология («гитара» <-> «гитары» <-> «гитар»)
• Быстродействие
• Возможность индексировать PG, MySQL и файлы (.html)
• PHP-API, установка на любом *nix дистрибутиве (FreeBSD, Ubuntu Server)

Выпал случай, поставил Sphinx, настроил (вроде как О_о), проиндексировал базу с каталогом товаров. (включена stemm_enru морфология).

Сортировка по релевантности, жму: «гитара fender», и из БД в первую очередь же он мне выводит струны для гитары фендер, потом уже сами гитары, а должно быть наоборот. Не понимаю, в чем дело, и что за Weight и как их настраивать.

Читал мануал на сайте разработчика, но всё там как то слишком сложно описано, либо я лох)

В общем, уважаемые, помогите пожалуйста разобраться.

При создании объекта есть два способа описать требования: «что должен уметь/делать объект» (описание цели) и «каким должен быть объект» (описание реализации). Прощу прощения если формулировка не точна, источника сией мысли я не знаю, формулирую сам. Далее речь пойдет о втором способе описания объекта — дизайна сайта.

На технику Сетки я обратил внимание около года назад. Тогда эта техника после очень поверхностного изучения показалась мне бесполезной и очень экспериментальной, отталкивало то что для реализаций необходимо создавать лишнюю разметку. Но сейчас уже становится трудно не замечать количество веб-сайтов построенных на сетке, а так же количество статей и уроков о ней. Благодаря последним стало гораздо проще изучить и понять принципы и концепцию, сделать более менее реальные выводы. Мой вывод спустя год таков — «Это простое и полезное решение которое когда либо было создано для вёрстки веб-страниц, должен знать каждый уважающий себя веб-дизайнер.»

Как следует из заголовка, речь в статье пойдёт о неотъемлемой части любого русскоязычного (и не только) текста — о пробеле. Мы затронем историю пробела, виды пробелов, вопросы употребления пробела в веб-типографике.

Вообще говоря, пробел — это любое пустое место в рукописном, печатном или отображаемом на любом другом носителе тексте. Так что пробелы бывают разные:

• спусковые (большие вертикальные пропуски в первой полосе издания) и концевые пробелы полосы,
• абзацные отступы и концевые пробелы абзаца,
• межстрочные пробелы (между строками текста),
• межсловные пробелы (между словами в одной строке),
• межбуквенные пробелы (между буквами в слове).

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

Вопрос о внедрении Flash с помощью разметки соответствующей стандартам возникает достаточно часто, между тем у этой проблемы есть достаточно известное решение — SWFObject. SWFObject 2 не только позволяет внедрять Flash динамически, с помощью JavaScript, но и статически, когда для внедрения используется стандартная разметка, а JavaScript только исправляет неразрешимые с помощью разметки проблемы, при этом даже если JavaScript отключен пользователи все равно увидят Flash.

Modalbox — библиотека на prototype и script.aculo.us для создания диалоговых окон и мастеров, обьем ее кода всего 10кб. На мой взгляд это настоящий атрибут веб два нольности.

Обычно при вёрстке текстов для веба на оформление цитат не обращают достаточного внимания. Стараясь исправить это досадное недоразумение, мы коснёмся двух вопросов: типографического оформления цитат (в той части, где чаще всего допускаются ошибки при вёрстке) и реализации этого оформления в HTML-коде.

Мы также не будем касаться вопросов проверки смысловой точности цитирования, правильного использования купюр, сокращений и дополнений — всех интересующихся ждёт «Справочник издателя и автора» А. Э. Мильчина и Л. К. Чельцовой.

Надеемся, что эту запись будет удобно использовать как справочник по часто встречающимся вопросам оформления цитат.

Хочу поделиться базой стран, регионов и городов на русском языке. Возможно, кому-то пригодиться в своих проектах. В базе 106 стран, 922 региона и 10969 городов!

Если кто не понял о чем речь, то вспомните, например, как на ВКонтакте указывается город: выбирается страна -> подгружается список регионов -> выбирается регион -> подгружается список городов

Задача:
Сделать поле ввода комментариев (textarea) на форме так, чтобы его размер (высота) изменялась согласно количеству (строк) текста.
Пользователь может ввести пару слов в одну строку или вставить табличку высотой двадцать строк из экселя — поле ввода должно автоматически увеличиться/уменьшиться.
Длина строк различна (форма резиновая и зависит от размера окна браузера), строки могут переноситься как по \r\n, так и просто, если не вмещаются по ширине.
В принципе, нужна формула подсчёта количества строк текста, чтобы менять атрибут rows у textarea.

Javascript приветствуется. Если решение возможно только средствами html/css, то ещё лучше.

Решения:

Хотя эта программа существует уже достаточно давно, я удосужился добраться до нее только сегодня. Итак, CSS Vista — легковесная софтина, позволяющая в реальном времени просматривать результат CSS-верстки одновременно в Firefox и IE6, что само по себе является отличной альтернативой запуску трех приложений отдельно.

Навеяно этим: habrahabr.ru/blog/css/36860.html

Для начала напомню, что для создания двойной/нестандартной рамки для изображений нужно {...cut...}, либо положить картинку в контейнер и задать для контейнера отступ и фоновое изображение.

И так далее. There is a better way!

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

Как-то перечитывая относительно старые посты на хабре я набрёл вот на эту тему.
Мне этот вопрос стал интересен и я решил реализовать что-то похожее на jQuery.

Так и родился этот небольшой примерчик. Есть одно но, пример служит по-большей части для ознакомления новичков (что-то вроде продолжения моего небольшого цикла примеров) с базовыми основами моей любимой библиотеки :) Пример рабочий, но не до конца, есть некотоыре аномалии :) До ума не доводил, т.к есть более удобный и правильно написанный плагин для jQuery, а именно Auto-Growing Textarea, который я и рекомендую использовать (а зачем велосипед изобретать? ;) ).

Скачать пример можно вот тут

P/S прошу не минусовать карму за недописанный пример, я лишь подал ход мысли :)

Недавно на работе разразился спор. Довольно нешуточный. Мы сейчас занимаемся одним очень крупным социальным проектом, над которым работает два дизайнера, одним из которых являюсь я. Но вопрос был не совсем по дизайну, а о html вёрстке. Спорили о том, надо ли и можно ли прибивать нижний колонтитул (footer) к низу страницы, не зависимо от количества информации, или же позволять ему плавать? На подавляющем большинстве страниц футер плавает, и если информации на странице мало, он поднимается вверх.

В этом топике я расскажу как установить и настроить Apache2 + PHP5 + MySQL + virtual hosts + xdebug, а также XDebug в Eclipse+PDT.

Однажды вечером я почувствовал, что пришло время расширить 97‐ й параграф «Ководства» Артемия Лебедева.

На клавиатуре одна чёрточка, она обычно правее нуля и повыше букв «З» и «Х». Неосведомлённые люди называют её попеременно то дефисом, то минусом, то тире. Лебедев объясняет нам, что это четыре (учитывая две разновидности тире) различных символа. На самом деле их как минимум девять, и об этом я и расскажу вам сейчас.