Меняю шкурку блога. HTML5/CSS3/μ

Решил в Новом году изменить шкурку блога, так как предыдущая тема была была красивой, но тяжелой, некоторые вещи мне там совсем не нравились.
В прошлом году я увлёкся современными подходами к верстке: HTML5, CSS3, HTML microdata, микроформаты, WCAG-2.0, верстка под мобильные и всякие разные платформы. Посему было решено использовать всё что успел изучить и изучу в процессе. При этом я буду верстать по стандартам без оглядки на поддержку фич браузерами (от префиксов правда пока никуда не деться), поэтому всех требований WCAG, а именно доступности контента, я не выполню.
Возможно что-то будет криво пока буду делать — вы уж извините, буду резать по живому )) На переработку шкурки у меня есть времени все новогодние праздники, потом на работу.
С радостью приму ценные советы!

Установка клиент-банка ДБО BS-Client v.3 на виртуальную машину

Многие банки, к сожалению, используют в качестве клиент-банка такую штуку, как ДБО BS-Client v.3. Почему к сожалению? Потому что, на мой взгляд, это идеальный пример отстойного ПО, ну никак нельзя назвать данное ПО идущим в ногу со временем. Размышляя логически: я предприниматель/бизнесмен/бухгалтер (не суть), пользуюсь современной техникой, в том числе новыми компьютерами с новым ПО (в частностиWindows 7), не могу установить себе клиент-банк из-за того, что он не поддерживает архитектуру x64, да и вообще ему подавай Internet Explorer 6 (в поддержке сказали, что вроде как должна пойти и на IE8, но не гарантированно). Ключи криптозащиты выдали на дискете. Откуда в моем новеньком ноуте дисковод!!! Блин, каменный век. Вот взяли в Альфабанке и сделали нормальный клиент-банк, удобно, просто, всем нравится. Но нам досталось это унылое г… (кстати, у ДБО BS-Client даже есть версия для iPhone, т.е. могут при желании сделать что-то человечное, почему не сделают для основной версии — загадка).
Лично для себя я решил эту проблему установкой клиент-банка на виртуальную систему. Чтобы всё получилось пришлось сделать много попыток, т.к. логика процесса инопланетна, документация заставляет нервно хихикать. Поехали.

Читать далее

Расширение набора макросов для Netbeans

По ходу работы с Netbeans записывались новые макросы, что-то менялось. Первый пост про макросы был написан почти сразу после перехода с Notepad++ на Netbeans (в котором я сразу же стал искать способы ускорения верстки) и был несколько сыроват. На хабре мне тогда посоветовали использовать шаблоны кода, но мне не понравилась ни их функциональность для CSS, ни скорость работы (в некоторых случаях приходится мириться с неспешностью Netbeans). Макросы в сравнении с шаблонами кода работают моментально.
Для демонстрации я сделал видео:

Макросы можно скачать и скопировать .xml в c:\Users\your_name\.netbeans\6.9\config\Editors\Macros\
Если кого-нибудь заинтересовал такой способ верстки на таком редакторе и есть вопросы — спрашивайте в комментариях.
Progg it

Синхронизируйся с Dropbox!

Главные инструменты верстальщика — фотошоп и редактор кода. Но есть инструменты, с которыми вроде как и не работаешь, а жизнь они упрощают значительно. Одним из них является Dropbox.

Работа верстальщика предполагает постоянное взаимодействие с заказчиком, дизайнером, программистоом, иногда сеошником. Сверстав очередную страницу необходимо показать ее всем этим людям чтобы они одобрили или же сделали свои замечания. Раньше я по старинке выкладывал проекты на свой сервер и раздавал ссылочки всем, кому надо. Теперь я делаю проще: создаю папку в разделе Public, верстаю прямо там или выкладываю туда готовую верстку (в последнее время обычно первый вариант) и даю клиенту ссылку типа http://dl.dropbox.com/u/2930651/pro-price/html/index.html, а он уже сам раздает ее кому посчитает нужным. По завершению проекта я удаляю работу из публичной папки в свой архив.

Читать далее

CSS-макросы для NetBeans

На хабре несколько раз публиковалась информация о Zen Coding, который может подключаться ко многим редакторам кода с целью ускорения верстки HTML и CSS кода. Одним из таких редакторов является NetBeans, который, правда, не работает с ZEN CSS.

Не желая мириться с таким положением дел, я, как и в случае с Notepad++, написал макросы для самых частоупотребляемых записей, дабы сэкономить драгоценные секунды (да и лень честно говоря писать свойства целиком). Читать далее

Просто о @media и @import

При верстке нового сайта я руководствуюсь принципом — каждому девайсу свой вариант отображения странички. Имея один html-код мы можем совершенно по разному представить страницу на различныйх устройствах. В различных учебниках традиционно перечисляют типы устройств:

  • all — Все типы. Это значение используется по умолчанию.
  • aural — Речевые синтезаторы, а также программы для воспроизведения текста вслух. Сюда, например, можно отнести речевые браузеры.
  • braille — Устройства, основанные на системе Брайля, которые предназначены для слепых людей.
  • handheld — Наладонные компьютеры и аналогичные им аппараты.
  • print — Печатающие устройства вроде принтера.
  • projection — Проектор.
  • screen — Экран монитора.
  • tv — Телевизор.

Обычно верстка очередного макета ограничивается записью:

1
<link rel="stylesheet" type="text/css" media="all" href="style.css" />

где media=«all» — это указание для всех девайсов использовать стить style.css. Немного реже можно увидеть где media=«print» для принтеров. Но мало кто из верстальщиков знают (или используют) всю мощь @media. Попробую на примерах показать некоторые «фишки». Читать далее

Требуется помощь в разработке сайта

Не очень то я умею писать красивые слова, поэтому напишу коротко.

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

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

Сайт проекта: dari-dobro-detyam.ru

Заранее всем спасибо! Читать далее

CSS Naked Day

Сегодняшний день, 9 апреля 2010 года, известен многим web-разработчикам как CSS Naked Day. В этот день принято отключать CSS в своих сайтах, чтобы показать, насколько он важен. Вот и у меня сегодня не будет никакого лоска, наслаждайтесь HTML-версией сайта 🙂

Закругленные уголки HTML+CSS+jQuery

В некоторых последних проектах я использовал закругленные уголки у блоков без использования изображений, но с использованием jQuery
Подробнее Вы можете ознакомиться непосредственно на страничке с закруглёнными уголками 🙂

Ускорение верстки — да поможет Notepad++

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

Ситуация изменилась, когда объем работы вырос, и я физически не успевал верстать то, что вроде как должен успевать. Конечно, есть свои html и css заготовки, но копипастить их — сомнительный выигрыш во времени. Работа по FTP через Total Commander тоже не очень то удобна — много лишних телодвижений.

И вот я решил потратить время на настройку своего любимого Notepad++, слышал где-то что гибко он настраивается 🙂

(Описание скорее для тех разработчиков, которые не в курсе всех прелестей Notepad++, знающие могут дальше не читать).

Читать далее

Утилита для подбора цвета EYE

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

HTML-book & CSS-book — книги, учебники и справочники. Рекомендации верстальщика.

Для начинающего верстальщика всегда стоит наиважнейшая задача — впитать в себя как можно больше информации, не нахватавшись при этом «воды». Очень помогают в этом блоги и специализированные сайты, но не всегда постер описывает всё подробно, не разжовывает для новичка. Поэтому в начале советую почитать простые бумажные такие книжки, они еще продаются 🙂

Я тут прошелся по онлайн-прилавкам, кое что посоветовали коллеги, что-то прочел сам лично. Вот решил выложить небольшой список литературы для верстальщика, которая, как я считаю, помогут новичку в освоении языка разметки HTML и каскадных таблиц CSS. Читать далее

CSS-хаки, трюки и жестокие обманы валидатора

Обманывать не хорошо, так в детстве мама говорила, но иногда без этого никак… В web-верстке тоже самое — нужен хак, и заказчик требует валидность, а еще и в портфолио потом работу выкладывать. Вот и приходится хитрить, хотя, по сути, верстка страничка всё равно невалидна, просто обманутый валидатор этого не замечает (да и не хочет он это замечать). Как бы не вопили противники хаков, от этого никуда не уйти.

Постараюсь максимально выложить всё что знаю по этой теме, а что сразу не вспомню (или пока не знаю) буду со временем дописывать… Читать далее

Прижимаем подвал (footer) к низу экрана

Не всегда страничка должна иметь много контента (например страничка с сообщением об ошибке 404), а красивый подвал посреди экрана выглядит как-то неуместно. Надо бы его прижать 🙂

Логический алгоритм следующий:

  1. Высоту странички body выставляем в 100% (минимум);
  2. Основной слой (page), в котором будет шапка (header) и контент (content) так же растягиваем на 100% по высоте;
  3. Подвал (footer) прижимаем книзу position:relative; bottom:0;
  4. Т.к. подвал находится ниже 100% слоя page, то нужно его поднять на столько, сколько он сам имеет роста: margin-top:-50px;
  5. Теперь страничка и без скрола, и подвал внизу, но при нынешнем состоянии контент будет залезать под подвал, применим-ка мы к нему padding-bottom:60px; Читать далее
Page 2 of 3
1
2
3