2010-12-01

Семантический CSS

Если вы когда либо занимались HTML версткой, то вам наверняка доводилось  слышать от клиентов фразы типа: "сделай эту надпись больше", "этот заголовок должен быть красным",  все синие заголовки сделать светлее" и т. п...
Подобные задачи наиболее часто приходится решать HTML верстальщику при работе с текстом. Само собой разумеется, все эти задачи должны рещаться использованием стилей — хороший верстальщик будет использовать внешние стили прописанные в CSS файле, плохой - нагородит кучу inline стилей.

Когда-то, когда я был студентом, я подрабатывал версткой газет. При верстке печатных изданий у тебя есть фиксированный набор стилей, которые ты и можешь использовать. Что характерно, именно строгость стиля и делает внешний вид издания стильным и профессиональным. Кроме этого, профессиональные издания сделаны так, чтобы было проще сначала создать стиль a потом многократно его использовать, это гораздо удобнее, чем постоянно задавать, размер, цвет, выравнивание, кернинг, трекинг, гарнитуру и еще десятки параметров, которые могут изменяться у текста.

Кстати, в Microsoft Word, почему-то, используется прямо противоположный подход — там проще изменить атрибуты самого текста, чем стиля на котором этот текст основан. С каждой новой версией панель инструментов в этой программе увеличивается и увеличивается, вынуждая разработчиков придумывать все новые способы, чтобы уместить на экране все больше и больше кнопочек форматирования. Они даже изобрели новый вид меню, которое назвали "Меда-Лента" (правильно да?). Но с введением нового интерфейса дело еще более ухудшилось. Поэтому, редактирование документов в этом редакторе частенько вызывает приступ острой зубной боли у людей которым довелось поработать в профессиональных программах.

В это же самое время, профессиональные программы верстки часто вообще не имеют панелей инструментов освобождая освободившееся место под собственно документ. Например, интерфейс известного пакета QuarkXpress спроектирован таким образом, чтобы в нем практически невозможно было НЕ пользоваться стилями, тоесть нельзя было работать так как многие привыкли работать в Microsoft Word.

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

На деле, для форматирования текстов нужно совсем немного стилей:

- стили для заголовков h1, h2, h3, h4
- стили для тегов форматирования: b, i, em
- стили для выделения теста цветом: .red, .blue, .gray, .green
- стили для эффектов форматирования: .bold, .italic, .higlight
- стили для выделения размером: .small, .big, .bigger, .smaller
- вспомогательные стили для форматирования: .left, .right, .center, .middle

Речь идет именно о стилях форматирования, стили текста по умолчанию для элеметов body table ul td и других я в этом посте не рассматриваю.
 
В принципе, этого набора стилей хватает чтобы получить большое количество различных текстовых стилей. Остальные эффекты можно получить комбинируя эти стили между собой.

Допустим, нам нужно сделать слово в тексте красным и полужирным:

Это <b class="red">слово</b> будет полужирным.

Или нам потребовался нестандартный заголовок H2 выровненный по правому краю и зеленого цвета:

<h2 class="right green">Заголовок H2</h2>

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

У этого метода верстки есть один нюанс. Его можно применять только, если вы редактируете текст вручную, пользуясь текстовым редактором. К сожалению, я не видел еще не одного wysiwyg редактора, способного одновременно присвоить тексту несколько стилей. Если вы такие знаете подскажите.

 

Оставить комментарий

 
  2010-11-29

Еще раз про электронную книгу ONEXT

Забавно, я уже писал, что электронная читалка ONEXT - гаджет на редкость неудачный. Учитывая, как сильно он рекламируется - много людей его купят, и вскоре, пойдут сдавать его обратно в магазин. Я подумал, что будет правильно написать немного подробнее о своих впечатлениях об этом устройстве.

Покупать его я НАСТОЯТЕЛЬНО НЕ РЕКОМЕНДУЮ. Вот краткий перечень косяков данного устройства:

— из за ошибки в прошивке книга зависает если в корень положить файл в FB2 который она не может прочитать. Если файл лежит на флешке — то проблема решится выниманием флешки, вот только флешка в комплекте не идет, поэтому большинство пользователей будут использовать внутреннюю память устройства — после этого книгу останется только выкинуть или сдать обратно в магазин (если получится). Если вы купили такую книжку — купите еще и флешку - не пользуйтесь встроенной памятью! Кстати, кнопка выключения в книжке не предусмотрена а аккумулятор не съемный — если книжка зависла — лучше сразу нести ее в магазин — иначе аккумулятор или вздуется от постоянного большого разрядного тока или полностью разрядится и зарядить его будет уже трудно, ибо чтобы зарядить книжку, нужно сначала ее включить — а это невозможно. При работе в таком режиме книжка почему то разряжается гораздо сильнее, задняя панель сильно нагревается, через несколько часов я заметил, что еще и вздувается, возможно это вздувается сам аккумулятор.

— пользоваться встроенным браузером с WiFi невозможно - можно использовать только их собственный интернет магазин и покупать там книжки за деньги - интерфейс сайта разработан так, что хорошо работает со встроенным браузером - ссылки крупные, и то они не всегда срабатывают, обычные же сайты использовать невозможно в принципе - палец не попадает по маленьким ссылкам, а если и попадает, то ссылки почему-то не нажимаются. Закладки не предусмотрены. Пользоваться экранной клавиатурой трудно (клавиши срабатывают не всегда). Пробовал использовать разные предметы вместо стилуса, который не предусмотрен для ёмкостного экрана. Лучше всего себя показал в качестве стилуса хром-ванадиевый гаечный ключ на 16! Правда пользоваться им все равно невозможно ибо браузер воспринимает переход по ссылке в одном случае из десяти.

— экран серый — технология электронных чернил,  в этом устройстве используется технология SiPix другие производители электронных ридеров используют другие виды электронной бумаги дающие лучшую контрастность, возможно поэтому и более низкая цена на устройство с WiFi и сенсорным экраном - я купился именно на это — вы не покупайтесь, главное здесь — экран, а он — кака. Кстати, на сайте производителя на изображении экран абсолютно белый — это прямая ложь! Не покупайтесь.

— перелистывание происходит о-о-о-о-ч-ч-ч-ч-ч-е-нь медленно. О комфорном чтении можно забыть.

Поисковые запросы со словом onext, по которым люди попадают на мой сайт наиболее красноречиво говорят о качестве работы этого ридера:

onext резет
onext электронная книга неисправности
зависла электронная книга onext
не загружаются страницы браузера в onext

Возможно, в будущем данные неполадки будут устранены - большинство из них — программные, но все равно, будет жалко выбросить деньги за бесполезное устройство.

 

Коментариев: 14

 
  2010-11-25

Купил себе новую игрушку

Acer Aspire немножко приболел и долгими осенними вечерами стало чего то не хватать, поэтому, решил приобрести нового домашнего питомца. Учитывая ошибки сделанные при выборе предыдущего лептопа, решил умерить свои требования. Долгое время работы от батарейки - в топку - я так и не смог заставить платформу Acer'a работать больше четырех часов на Линуксе, да и честно говоря, даже такое время работы мне ни разу не пригодилось - я не очень часто путешествую в места где нет розетки, поэтому решил, пусть это будет дешевый нетбук на Atom'е на который можно поставить Ubuntu Remix. Мне, вобщем то, нужен маленький компьютер с полноценной операционной системой, на котором встанет офис, браузер и возможно Eclipse. Желательно, чтобы был легким. Поначалу хотел взять Lenovo s10-3t - недорогой нетбук-трансформер с сенсорным экраном, но в последний момент увидел у Вильянова в обзоре MSI U135DX и решил, что для опытов с Ubuntu Remix он пойдет как нельзя кстати. К тому же, после неудачной читалки с сенсорном экраном ONEXT я не был уверен, что емкостной сенсор будет настолько полезен в таком лаптопе, хотя, думаю все равно как нибудь еще возьму поиграться такое устройство...

Впечатления от покупки остались весьма положительные. На моей версии оказалась предустановленной XP Home Edition UTCPC Edidtion - спасибо, что не поставили семерку - эту я даже сносить не буду, работает она на этом железе лучше чем Виста работала на Acer Aspire. Диск сразу оказался разбит на три раздела, причем, третий, самый большой, оказался пустым - на него я и поставил - Ubintu Remix как будто специально для этого этот раздел и сделали. ОС встала без проблем. Хотя, ремиксовый десктоп мне не очень понравился - непривычно а десятидюймовый дисплей потянет и классический Gnome - нужно будет попробовать его туда поставить. В целом железка понравилась, если захотите себе такой - берите синюю или красную модель, я не очень люблю цветные гаджеты, но у этой дизайн на редкость приятный, так что цветной смотрелся бы даже лучше моего черного.

Единственный неприятный момент - маленькая кнопка шифт слева - на официальных фото она большая, в Россию поставляют почему то с маленькой, но думаю, с этим недостатком я как нибудь уживусь.

 

Оставить комментарий

 
  2010-11-25

Дрифтер

 

Коментариев: 1

 
  2010-11-18

Светодиодные лампы

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

Попробуем разобраться имеет ли смысл покупать светодиодные лампы сейчас или стоит подождать когда их стоимость упадет до психологически комфортных значений.

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

В качестве образца возьмем лампу ЛМС-88, по заявлением продавца она позиционируется на замену стандартным стоваттным лампочкам - то что нам нужно. Стоит она на момент написания статьи 3 250 рублей, потребление мощности 13.2 Вт, ресурс 50000 часов. Один киловатт-час на момент написания данной статьи стоит в Саратове 2 рубля 9 копеек.

Посчитаем сколько рублей будет стоить электроэнергия потребленная стоваттной лампочкой за 50000 часов: (100*50000/1000)*2.09=10450 рублей.

Аналогично, стоимость электроэнергии потребленной светодиодной лампой:

(13.2*50000/1000)*2.05 = 1353 рубля.

Таким образом, одна светодиодная лампа, с учетом стоимости самой лампы, сэкономит: 10450-1353-3250=5847 рублей.

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

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

Кстати, обратите внимание в этой лампе используются 88 обычных сверхярких светодиодов, очень похожих на те, что используются в дешёвых китайских фонариках. Эти светодиоды не разрабатывались на замену мощным лампам накаливания, их просто взяли у соединили вместе, увеличив тем саммым общий световой поток. Хотя сам по себе один светодиод довольно дешевый, в лампе их достаточно много - отсюда и высокая стоимость подобного девайса. Уже сейчас есть более мощные модели светодиодов, а значит, скоро появятся лампы с меньшим числом светодиодов по значительно низкой цене. Через двадцать лет вообще могут появиться принципиально новые источники света в сравнении с которыми 88-светодиодный девайс покажется забавным курьезом, и большинсво купленных сегодня таких ламп проработает от силы года два-три. Так что покупать или не покупать решайте сами.

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

 

Коментариев: 2

 
  2010-11-18

Мегамозг

Посмотрел сабж. Посмотрел, сразу скажу, в ужасном качестве, возможно, в кинотеатре да еще в 3D эффект получился бы совсем другим. Как всегда американцы сделали пародию на самих себя. Про простого черного синего парня, который победив на выборах белого соперника стал главным в Америке городе Мегасити. Сцена когда он знакомится с белым домом шикарна. А уж как они зажигают на сцене с Мишель Обамой Роксаной Ритчи так это просто шедевр. Вообще, симпатичный мультфильм с кучей параллелей на их действительность. Так и должно быть.

 

Оставить комментарий

 
  2010-11-14

Национальный домен для моего сайта

Решил сделать национальный домен для своего сайта. Это же так замечательно, теперь пользователи смогут заходить на мой сайт пользуясь привычной раскладкой, которая стоит на каждом компьютере по всему земному шару, а не набирать maxistar.ru пользуясь ненавистной латиницей. Почему такая простая идея не пришла мне в голову раньше. Это же так просто — долой латиницу, велком национальные домены.

Вы же будете заходить на мой сайт еcли его имя будет национальным?

Это же так просто!

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

Встречайте: (тада!)

マカシサタラ.co.jp

P.S. Если текст отображается в виде прямоугольников, значит, у вас еще не стоит поддержка японского... ай яй яй... это же так просто.

 

Коментариев: 1

 
  2010-11-13

Отличная цитата

Пессимисты, глядя на стакан, содержащий 50% воды и 50% воздуха, говорят, что он наполовину пуст. Оптимисты, наоборот, считают, что наполовину полон. А разработчики понимают, что просто сам стакан в два раза больше, чем должен быть. Боб Льюис

 

Коментариев: 1

 
  2010-11-13

Как узнать действующее значение стиля

При помощи объекта style можно узнать только явно заданные значения стилей, однако в большинстве случев необходимо знать не явно заданные а действующие значения стилей.

В Internet Explorer для этого можно воспользоваться свойстом currentStyle
var elem1 = document.getElementById("elemId");
alert(elem1.display);
(см. http://msdn.microsoft.com/en-us/library/ms535231%28v=VS.85%29.aspx) в браузерах на Mozilla можно использовать window.getComputedStyle(el)
var elem1 = document.getElementById("elemId");
var style = window.getComputedStyle(elem1, null);
alert(style.getPropertyValue("display"))
(см. https://developer.mozilla.org/en/DOM%3awindow.getComputedStyle)
Насчет HTML и Opera не уверен, но думаю там также как и у Mozilla.

 

Оставить комментарий

 
  2010-11-03

Векторный графический редактор на JavaScript

На сайте ztools.org создал небольшой векторный графический редактор. Реализованы пока всего три вида объектов - линия, овал и прямоугольник. Редактор сам по себе примитивный и сделан исключительно с целью демонстрации возможностей библиотеки ztools а также для отладки работы с векторной графикой.

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

Для прорисовки векторной графики в IE используется VML а в остальных браузерах SVG. В идеале, хочется сделать что то вроде библиотеки Raphael Дмитрия Барановского, но Raphael это вещь в себе, хотя и совершенно волшебная, мне же хочется сделать библиотеку для работы с векторной графикой на базе ztools. С его объектно-ориентированными возможностями можно будет создавать вещи нереализуемые при помощи классического HTML/CSS

 

Коментариев: 3