— Привет, меня зовут Максим Покровский. Вы находитесь в моем рабочем кабинете. Поскольку я фрилансер, будем считать, что именно так он и выглядит. Здесь я пишу много интересных вещей, и если вы почувствовали, что я именно тот человек, который вам нужен, то я всегда открыт для контакта.
Сейчас работаю над:
|
Заказать мне работу |
| 27.12 | Семантика или как же лучше |
Допустим мы имеем такую картинку
Распишем идеальную семантическую раскладку:
<div id="cabinet">Вы зашли как <a href="#">admin</a></div>
<form action="#">
<input class="form-text" value="введите строку для поиска" onblur="if (value == '') {value = 'введите строку для поиска'}" onfocus="if (value == 'введите строку для поиска') {value =''}" type="text" />
<input class="form-submit" value="найти" type="submit" />
</form>
</div>
В данном чтобы панелька имела именно такой вид, мы подготовим три изображения. Левое закругление, правое и сам background. Левое мы назначим на #cabinet, правое на form, а bаckground на #search-form. И стилями раставляем все по своим местам. (Я не стал все расписывать в css, кляня свою лень и надеясь на то, что и так все понятно)
Получилось:
Семантично - да;
Компактно - да;
Чисто - да;
Удобно - фиг!;
Под удобно я разумею последующие возможные редизайны или внесения правок в структуру. Вздумай заказчику со своими познаниями на уровне тега font внести туда какие-нибудь структурные изменения (например, захочет передвинуть блок cabinet в противоположный угол), он там сразу и себе нервы потрепет и верстку в итоге сломает.
Поэтому стоит учитовать данные нюасы. И вам хорошо, и заказчику прибавятся от вас положительные переживания. (Что тоже вам же хорошо)
Удобная разметка выглядит так:
<div id="cabinet">Вы зашли как <a href="#">admin</a></div>
<form action="#">
<input class="form-text" value="введите строку для поиска" onblur="if (value == '') {value = 'введите строку для поиска'}" onfocus="if (value == 'введите строку для поиска') {value =''}" type="text" />
<input class="form-submit" value="найти" type="submit" />
</form>
</div></div></div>
Теперь когда оформление вынесено в контейнерную часть, над содержимым этой панельки можно изгаляться как угодно.
Я, кстати, сделал все таки с уклоном в семантику. Во -первых, я люблю прогресс, во-вторых, я ненавижу регресс, и в-третьих, все равно мне туда в случае чего правки вносить.
| 18.12 | Иллюстрация для RPG-чата |
Кликабельно
Когда нервы истрепаны поиском ракурсов, когда глаза перестают отличать зеленый от красного, когда фотошоп затерт до дыр, а на винте скопился гигабайт зарезанных вариантов, я облегченно откинулся на спинку кресла и сказал: “Нравится”, а заказчик сказал: “А теперь дорогу к городу, и лес вместо пустыни”
А потом говорят, дизайнеры вспыльчивые.
| 14.12 | 16 признаков крутого верстальщика |
1. На сайте тебя больше интересует то, что скрывается под CTRL + U
2. Даже если твой друг скажет тебе, глянь какой красивый сайт, ты все равно полезешь смотреть код.
3. Когда ты проливаешь на себя кофе, тебе хочется нажать CTRL + Z
4. Мировое зло – это IE, а не Люцифер, как многие заблуждаются.
5. Искренне удивляешься и сочувствуешь людям, которые не знают, что такое firefox (либо просто не знают, зачем его ставить)
6. Твой CSS начинается со строчек * {padding:0; margin:0;}
7. Если ты не дизайнер, то почти все дизайнеры инопланетные засланцы, которых заслали, что бы довести тебя неклонируемым фоном и нестандартными шрифтами.
8. Ты …
| ! | Самое обсуждаемое |
- 16 признаков крутого верстальщика - 33
- Семантика или как же лучше - 28
- Переходим на em - 25
- Веб-дизайнер. Кто такой? - 22
- Убираем отступ у последнего элемента списка. - 19
- Контейнер для float - блоков - 19
- Прозрачность в шрифтах - 17
- Структурируем HTML. Версия Покровского. - 17
- Если б я менял работу - 16
- Меняем лицо - 16
— Как предоплата мобилизует отоношения - так и и гибкость в отношениях позволяет зарабатывать больше
комментарий заказчика к статье http://pokrovskii.com/predoplata-i-druzya
Они читают меня, я читаю их