Posts

Showing posts from August, 2012

HTML5 Микроданные - Schema.org

Продолжаем о Микроданных (microdata). Оказывается есть такой сайт Schema.org который создавался общими усилиями Google, Microsoft и Alexa (точно уже не помню), который служит в качестве словаря для описания микроданных. Словарей там довольно много и расположены они в древовидном порядке, то есть есть корневой словарь и от него наследуемые по убыванию, в порядке от большого к меньшему и более специализированному. Я описывал свой рабочий сайт Team.in.ua с помощью словаря Organization. Подключение словаря к вашему сайту происходит довольно легко. В родительском элементе itemscope пишем еще один атрибут itemtype  и указываем адрес словаря. В моем случае это http://schema.org/Organization. То есть в итоге должно получится что-то такое: <span itemscope itemtype="http://schema.org/Organization"> Сам по себе этот словарь содержит довольно много различным типов данных. Но лично мне понадобилось только три, это name - название организации, telephone - собственно

HTML5 Микроданные (структурированные данные)

Сегодня узнал (как гром среди ясного неба) что в новой версии HTML5 есть такая вещь как структурированные данные! Их всего три вида: микроданные, микроформаты и RDF. Скажу честно, я лишь коснулся первого варианта (потому что его рекомендует Google). Что это такое? Если в двух словах - это краткие описания (пояснения) для поисковых систем, что означают те или иные элементы на вашей страничке. Ранее я уже встречался с такими новыми тегами как: article, header, footer, nav и т.д. Но эти все теги интуитивно понятны - если header, то логично что это относится к шапке сайта, если footer, то к "подвалу". Но вот эти микроданные мне логичными ну как-то совсем не показались... может со временем привыкну (а привыкнуть придется, потому что поисковики от них отказываться не собираются). Я на этом блоге даже отдельный мета-тег заведу микроданные, в котором буду собирать всю инфу которую найду (не весь мусор, а именно то, что нужно для понимания). Итак к делу, что за сегодня я

Делаем красивую кнопочку без использования картинки (img)

Сегодня узнал как сделать красивую кнопку без использования тега img (то есть без картинки). Оказывается есть такое замечательное свойство в CSS3: для Chrome background: -webkit-gradient(linear,left top,left bottom,color-stop(0%,#85D390),color-stop(50%,#009700),color-stop(51%,#007800),color-stop(75%,#219B0C),color-stop(100%,#31A517)); для Opera background: -moz-linear-gradient(center top , #85D390 0%, #009700 50%, #007800 51%, #219B0C 75%, #31A517 100%) repeat scroll 0 0 transparent; Разберем что делают эти свойства. В случае хрома используется -webkit-gradient у которого указывается сначала в каком направлении будет осуществляться заливка (в нашем случае линейно) и указываются контрольные точке color-stop на которых мы изменяем цвета. color-stop имеет два параметра, первый это точка в процентах где нам нужно установить необходимый цвет и второй параметр это сам цвет. В случае оперы этим занимается -moz-linear-gradient, в сущности с таким же принципом: контрольные точки и