widescreen-m

ЭЛЕКТРОНИКА ИМ 02 на CSS3

Новогодние праздники дали возможность отдохнуть от компа, от работы, уделить больше времени семье… но к концу выходных руки уже зачесались, захотелось чего-нибудь эдакого, чего раньше не делал. Решил поэкспериментировать с CSS3, давно собирался, да как-то ни до того было. Захотелось что-то изобразить в коде без применения графики, выбор пал на игровой девайс школьных лет – электронную игру «Ну, погоди!» (в последствии переименовал в Микки Мауса). Для себя решил, что никакого копипаста делать не буду, всё буду писать сам (за исключением градиентов, тут уж лучше генератором). Читать далее

balcon

Рабочее место 2 месяца спустя

За 2 месяца я достаточно не плохо обжился на балконе и научился бороться с небольшими минусами, такими как жара в солнечную погоду (решилось навешивание шторки). Мне не хватало места на столе под всякую хренотень, постоянно какие-то провода, коробки, откуда-то появляющиеся детские игрушки… Посему назрела необходимость внести небольшие коррективы. Читать далее

html5

Почему я верстаю в HTML5?

Где-то на стыке 2010-2011 года я понемногу начал верстать в HTML5, вдохновившись докладом Вадима Макеева Доктайп. Точка. Хотя… не совсем по немногу ) Текущий на тот момент проект я хотел сверстать только подставив вместо общепринятого strict xhtml доктайпа новый, только начинающий пользоваться популярностью короткий и красивый Doctype HTML5 – <!DOCTYPE HTML> (кстати, я думаю, что именно последоклада Вадима его популярность в России резко возросла). Но как-то увлёкшись я сделал всю разметку на HTML5. Сейчас я чаще верстаю в новой разметке, исключение оставляют сайты, заказчики которых боятся нововведений, для таких сайтов из HTML5 остается только новый доктайп.

Так почему же я всё-таки сделал выбор в пользу нового стандарта?

Читать далее

balcon

Новый рабочий кабинет – на балконе

Проработав в домашних условиях втечении почти трех месяцев было принято решение переехать с кухни на балкон (других вариантов небыло). Причины переезда – не мешать жене заниматься своими делами и поменьше хомячить – чем дальше от холодильника, тем надежнее :) Читать далее

semantic

ARIA Roles в HTML5 – семантическая разметка

Большинство сайтов имеют одинаковую структуру блоков, и чаще всего эти блоки имеют общепринятые имена классов или ID. Обычно сайт представляет из себя шапку (header), навигацию (nav), контент (content), сайтбар (sidebar, leftbar, rightbar) и подвал (footer).
В HTML5 появились атрибуты, которые позволяют четче указать что есть что. Атрибуты role назначают роли для блоков, обозначая их важность и назначение. Вы можете ознакомиться со спецификацией ARIA Role – WIA-ARIA specification. Я же приведу наиболее актуальные роли (возможно буду пополнять со временем). Читать далее

preview

Обработка скриншота под фото с экрана

Я не мастер фотошопа, но иногда бывает необходимость сделать такую картинку (пару раз требовалось), а тут еще и в твиттере вопрос возник. Попробуем быстро и без заморочек сделать это )

Идем по порядку: Читать далее

shpora

Шпаргалка по jQuery: часто используемые небольшие скрипты

В моей работе иногда требуется быстро вставить небольшой скрипт jQuery, который я уже неоднократно вставлял на предыдущих проектах. И вот тогда я начинаю вспоминать тот проект, конечно-же вспоминаю далеко не с первого раза, рою архивы… Вот и решил сделать для себя некую шпаргалку, может еще кому-то пригодиться. Шпаргалка будет пополняться постоянно. Принимаются советы и ваши мини-скриптики :) Читать далее

settings

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

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

logo

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

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

Читать далее

netbeans

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

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

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

dropbox

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

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

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

Читать далее

netbeans

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

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

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

media

Просто о @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. Попробую на примерах показать некоторые «фишки». Читать далее

sirota

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

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

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

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

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

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

html

CSS Naked Day

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

Page 1 of 2
1
2