Статьи

Статьи http://divmotive.ru/article/ Tue, 18 Sep 2012 22:49:11 +0400 HostCMS Масштабируем CSS спрайты с SVG, убивая сразу трех зайцев http://divmotive.ru/article/coding/masshtab-css-sprite-svg/ Всем привет. Сразу хочу отметить, что если мы говорим об иконках, их можно масштабировать двумя способами (других я просто не знаю): конвертировать иконки в шрифт и подключать их через @font-face, либо использовать SVG в качестве формата для этих иконок. Немного отойду от темы и расскажу предысторию. Предыстория Я было решил использовать у себя на сайте шрифтовые иконки, казалось бы все хорошо: и размер менять можно, и цвет задавать и запрос к серверу всего один (на подключение шрифта). Другими словами, подключаемый шрифт это и есть своеобразный «CSS спрайт», верно? Я давай проверять, везде ли все красиво выглядит. Оказалось, что не все так хорошо как хотелось бы, потому как в некоторых размерах иконки выглядели кособокими, а при отключенном сглаживании вообще противно смотреть на них стало. Что делать? Использовать второй вариант — SVG, о чем и пойдет речь.

Всем привет. Сразу хочу отметить, что если мы говорим об иконках, их можно масштабировать двумя способами (других я просто не знаю): конвертировать иконки в шрифт и подключать их через @font-face, либо использовать SVG в качестве формата для этих иконок. Немного отойду от темы и расскажу предысторию. Предыстория Я было решил использовать у себя на сайте шрифтовые иконки, казалось бы все хорошо: и размер менять можно, и цвет задавать и запрос к серверу всего один (на подключение шрифта). Другими словами, подключаемый шрифт это и есть своеобразный «CSS спрайт», верно? Я давай проверять, везде ли все красиво выглядит. Оказалось, что не все так хорошо как хотелось бы, потому как в некоторых размерах иконки выглядели кособокими, а при отключенном сглаживании вообще противно смотреть на них стало. Что делать? Использовать второй вариант — SVG, о чем и пойдет речь. CSS спрайт с SVG Идея складывать спрайт в SVG формат не нова. Наверняка, многие читали этот пост на smashingmagazine. Так вот, я решил развить мысль автора, поэкспериментировать и предложить более гибкий вариант. А чтобы стало все понятно, некоторые примеры повторю здесь. Итак, для начала нам нужно сделать SVG спрайт. Как сделать SVG файл программно я пока не разобрался (надеюсь сообщество меня простит и даст ссылку где про это почитать). Поэтому я буду делать свой спрайт в CorelDRAW (Illustrator думаю тоже подойдет) и сохранять в SVG. Для быстрой реализации я использовал шрифт и напечатал вот такие иконки (кликабельно): Возьмем произвольный HTML код для примера: <div class="icons"> <a class="tw" href="#">Twitter</a> <a class="fb" href="#">Facebook</a> <a class="vk" href="#">Вконтакте</a> <a class="gl" href="#">Google+</a> <a class="rs" href="#">RSS</a> </div> Напишем в CSS самое основное: .icons a { float: left; display: inline-block; padding: 4px 0 4px 25px; margin-right: 5px; text-decoration: none; color: #444; /* вызов спрайта и задание размеров */ background-image: url('sprite.svg'); background-repeat: no-repeat; background-size: 20px auto; } /* такой вариант рассмотрен на smashingmagazine.com, только вместо px используются em как относительная величина */ .icons .tw {background-position: 0 0;} .icons .fb {background-position: 0 -48px;} .icons .vk {background-position: 0 -96px;} .icons .gl {background-position: 0 -144px;} .icons .rs {background-position: 0 -192px;} Стоит отметить одну особенность, что sprite.svg создан с четко заданными размерами 76x520, т.е. максимальный размер до которого мы можем увеличить нашу иконку будет 76x76. А что если сохранить SVG с относительными размерами, те. в процентах? Это ведь лучше, т.к. иконки теперь можно будет масштабировать до абсолютно любого размера и не терять при этом их качества. Немного подправим стили в CSS: /* этот блок остается без изменений */ .icons a { float: left; display: inline-block; padding: 4px 0 4px 25px; margin-right: 5px; text-decoration: none; color: #444; /* вызов спрайта и задание размеров */ background-image: url('sprite.svg'); background-repeat: no-repeat; background-size: 20px auto; } /* а здесь меняем абсолютную величину на относительную */ .icons .tw {background-position: 0 0;} .icons .fb {background-position: 0 -25%;} .icons .vk {background-position: 0 -50%;} .icons .gl {background-position: 0 -75%;} .icons .rs {background-position: 0 -100%;} Результат одинаковый, но background-size может быть любым, каким угодно. Создание сложных спрайтов В примере выше использовано всего 5 иконок и высчитать проценты не так сложно. Давайте рассмотрим более сложный пример. Пока с теми же "шрифтовыми" иконками. Допустим у нас такой спрайт: Что мы делаем, либо добавлем в html новый тег i, для которого можем написать стили с иконкой: <div class="icons"> <a class="tw" href="#"><i&rt;</i&rt;Twitter</a> <a class="fb" href="#"><i&rt;</i&rt;Facebook</a> <a class="vk" href="#"><i&rt;</i&rt;Вконтакте</a> <a class="gl" href="#"><i&rt;</i&rt;Google+</a> <a class="rs" href="#"><i&rt;</i&rt;RSS</a> </div> Либо оформляем иконку используя псевдоэлементы :before или :after. Я буду использовать псевдоэлемент :before, вы - как вам больше нравится. Обратите внимание, что я не стал придумывать новые классы для ссылок (ведь спрайт поменялся) и оставил прежние, разумеется для новых иконок классы будут свои. А мы рассмотрим с этими, чтоб не захломить кодом пост. Итак, внесем изменения в CSS: .icons a { float: left; display: inline-block; padding: 4px 0 4px 25px; margin-right: 5px; text-decoration: none; color: #444; /* добавляем */ position: relative; } /* создаем общий стиль для :before */ .icons a:before { position: absolute; left: 0; top: 0; content: ''; width: 25px; height: 25px; /* вызов спрайта и задание размеров */ background-image: url('sprite.svg'); background-repeat: no-repeat; background-size: 20px auto; } /* а здесь дописываем псевдоэлемент и задаем позицию в спрайте (соответственно для нового спрайта позиции будут другие, о чем ниже) */ .icons .tw:before {background-position: 0 0;} .icons .fb:before {background-position: 0 -25%;} .icons .vk:before {background-position: 0 -50%;} .icons .gl:before {background-position: 0 -75%;} .icons .rs:before {background-position: 0 -100%;} Сделаю несколько пояснений, а то я уже сам чуть было не запутался :). В background-size: 20px auto; число "20" это необходимый нам размер иконки, а "auto" это оставшийся размер спрайта. Если мы заменим "auto" например на 20px, то у нас вместо одной иконки получится весь спрайт размером 20x20 пикселей. Кроме того, на размер иконки теперь еще влияет ширина и высота блока формируемая псевдоэлементом, т.е. вместе с background-size теперь нужно менять width и height, чтобы иконка не обрезалась. Высчитываем относительные размеры Пожалуй, это ключевой момент и здесь стоит сделать выбор, либо вы задаете абсолютные размеры и при изменении background-size, width и height меняете их тоже, либо (что сложнее) высчитываете относительные размеры и при изменении background-size, width и height больше ничего не меняете. Итак, фактический размер спрайта 500x250 пикселей, по 10 иконок в строчку и по 5 в столбик, итого 50 иконок (в примере 49) размером 50x50 пикселей каждая. Высчитать размер довольно просто, т.к. будем отталкиваться от фактического размера спрайта. Кто работал со спрайтами объяснять не стоит. Правда здесь есть одна тонкость - размер иконки у нас уменьшен до 20 пикселей, соотвественно спрайт тоже изменился и стал равен 200x100 пикселей (10*20 и 5*20), а значит и размеры (background-position) мы будем считать, либо 0 0, 0 -20px, -20px 0, -20px -20px, 0 -40px, -40px 0, -40px -40px и т.д., либо 0 0, 0 -11,1%, 0 -22,2%, 0 -33,3, 25% 0, 25% -11,1%, 25% -22,2%, 25% -33,3 и т.д. Таким образом мы можем следать любой сложности спрайт и высчитать background-position для каждого элемента. К счастью или сожалению, пытливый ум не дает остановиться на сказанном, поэтому бегло рассмотрим еще более сложный пример. Более сложный спрайт с SVG Допустим, у нас есть некий дизайн, совсем приблизительно изобразил (кликабельно): Предположим, что прямоугольники это какие-то красивые клипарты, трудно, но предположим. Что мы можем сделать: 1. Сложить все слои в спрайт не меняй исходный размер и позиционировать каждый объект в соответствующем элементе; 2. Сложить все слои в спрайт, предварительно приведя все объекты к одному размеру и позиционировать каждый объект в соответствующем элементе меняя размер объекта до неоходимой величины. Приводить пример HTML или CSS кода, думаю, уже не имеет смысла. И так все понятно, настраивается по аналогии с предыдущими примерами. В заключении Теперь хочу подвести итог и отметить плюсы спрайтов с SVG. Во-первых, у нас получился всего один файл, а значит один запрос к северу - заяц1 убит, во-вторых, вес SVG файла гораздо меньше, чем например PNG или JPG, а значит и скорость загрузки выше - заяц2 убит, в-третьих, мы получили неограниченных размеров спрайт без потери качества изображения, а значит решили задачу с неограниченным масштабированием изображения - заяц3 убит. Единственный минус SVG перед шрифтовыми иконками: нельзя украшать иконки с помощью CSS, например, добавлять text-shadow или менять цвет. И очень большой плюс, что при отключенном сглаживании все линии в SVG будут ровные и четкие в отличае от шрифта. P.S. SVG дает нам огромное поле для деятельности и на примере CSS спрайтов я в этом полностью убедился. Конечно, можно было обойтись сухими словами и сказать "сохраняйте SVG в относительных размерах", но у меня это вылилось в целый пост. Спасибо за внимание. До новых встреч. (Статья подготовлена специально для habrahabr, при копировании, пожалуйста, не забывайте про ссылку на оригинал)

Sun, 08 Apr 2012 01:00:07 +0400 Кодинг http://divmotive.ru/article/coding/masshtab-css-sprite-svg/ Realtime xRTML — новый html-подобный язык разметки http://divmotive.ru/article/coding/realtime-xrtml-novyjj-html-podobnyjj-jazyk-razmetki/ Речь пойдет о новом запатентованном HTML-подобном языке разметки — xRTML, который позволяет редактировать функции сайта в реальном времени без использования Ajax.

Всем привет! Речь пойдет о новом запатентованном HTML-подобном языке разметки — xRTML, который позволяет редактировать функции сайта в реальном времени без использования Ajax. Разработчиками xRTML является часть португальской команды IBT (Internet Business Technologies), которые стремясь создать новый и доступный язык разметки, позволяющий быстро вносить изменения на сайт в реальном времени, придумали xRTML. Главными ключевыми особенностями xRTML являются его простота в изучении, необходимость только одной строчки кода, плагины для систем блогов, такой как WordPress, API для серверных языков, кросс-браузерность и кросс-платформенность — команда xRTML Основные характеристики xRTML Легок в изучении Одна строчка кода Гибридный открытый исходный код Плагины для WordPress и Blogger API для серверных языков, таких как ASP.NET, PHP, JSP Кросс-браузерность и кросс-платформенность Как работает xRTML xRTML работает с текущим сайтом как бы поверх него. Это сервер-агностик, который начинает работать на сайте после того, как веб-страницы загрузились с веб-сервера. Все это происходит на серверах Realtime®, поэтому Realtime® не зависит от текущей IT структуры. Схемы помогут понять, как работает xRTML: 1. Ретрансляция сообщений 2. Регистрация триггеров Триггер — это особая разновидность хранимой процедуры, выполняемая автоматически при возникновении события на сервере базы данных. Триггеры языка обработки данных выполняются по событиям, вызванным попыткой пользователя изменить данные с помощью языка обработки данных. 3. Тег связи Стоит отметить, что xRTML имеет собственные библиотеки готовые для использования. Предоставляются они бесплатно и доступны после регистрации. Язык xRTML является расширяемым (eXtensible), о чем говорит "х" в xRTML, что позволяет добавлять новые возможности для существующих тегов и даже создать свои собственные! Здесь можно посмотреть демонстрацию работы xRTML, правда я так и не дождался когда загорится "зеленый стрелочке" - то ли сервер загружен, то ли что. Realtime Framework Realtime Framework представляет собой набор инструментов, созданных разработчиками для разработчиков. Целью которых является предоставление средства разработчикам, чтобы они уже сегодня начали использовать xRTML на своих сайтах в режиме реального времени. В заключении Извините, что так коротко, обрывками написал топик - ночью писал. В следующей статье расскажу подробнее об установке xRTML. Страница проекта Демонстрации Регистрация на сайте Интересно было бы услышать мнение тех, кто уже работает с xRTML. Спасибо за внимание! До новых встреч. P.S. Это по большей части свободный перевод. Для читателя хотелось донести новость, а описание как-то само собой напросилось. UPD: Немного поясню. Разметка xRTML работает как Framework со своими библиотеками к различным языкам (PHP, ASP.NET, Java), а так же в качестве плагина к WordPress. Благодаря этому на xRTML можно писать какие-то функции для сайта и тут же видеть результат. Одна из отличительных особенностей xRTML в том, что все изменения происходят в реальном времени по протоколу WebSocket, что гораздо быстрее чем HTTP и Ajax методы. Например, читаете вы хабр и добавляемые юзерами комментарии тут же видите, без перезагрузки страницы. По-моему, это круто!

Sat, 11 Feb 2012 06:54:34 +0300 Кодинг http://divmotive.ru/article/coding/realtime-xrtml-novyjj-html-podobnyjj-jazyk-razmetki/ Рамблер Нихром. Коротко о главном http://divmotive.ru/article/internet/rambler-nikhrom-korotko-o-glavnom/ В начале февраля 2011 года компания Rambler выпустила в свет свой собственный браузер — Нихром, созданный на базе движка Chromium от Google. На первый взгляд Rambler Нихром ничем не отличается от Google Chrome, разве что панелью закладок сервисов Рамблера, однако, при близком рассмотрении, можно увидеть кое-что еще.

В начале февраля 2011 года компания Rambler выпустила в свет свой собственный браузер — Нихром, созданный на базе движка Chromium от Google. На первый взгляд Rambler Нихром ничем не отличается от Google Chrome, разве что панелью закладок сервисов Рамблера, однако, при близком рассмотрении, можно увидеть кое-что еще. Поскольку я не являюсь фанатом Rambler, первое, что мне захотелось сделать — изменить настройки, чтобы при открытии браузера Нихром была панель быстрого запуска, а не главная страница Рамблера. Открыл окно Параметров Нихрома и убрал лишнее: К сожалению, при перезапуске браузера изменение начальной страницы вернулось обратно: Другими словами, как не крути, а браузер Нихром всегда будет запускаться с главной страницы Рамблера. Искренне надеюсь, что это ошибка, и в следующем релизе она будет устранена, если конечно она не была сделана преднамеренно, что тоже вполне возможно. Еще одна, пожалуй, немаловажная особенность Рамблер Нихром — работает он только по Windows, в отличие своих братьев Яндекс Хром и Google Chrome. Скачать Rambler Нихром можно здесь.

Thu, 10 Mar 2011 20:59:30 +0300 Интернет http://divmotive.ru/article/internet/rambler-nikhrom-korotko-o-glavnom/ Верстка сайта на HTML5 с примерами http://divmotive.ru/article/coding/verstka-sajjta-na-html5-s-primerami/ Прошло уже более трех лет с момента, когда был анонсирован первый черновик спецификации стандарта разметки веб-страниц — HTML5, но до сих пор немного ресурсов на HTML5 и, наверное, лишь сотая доля верстальщиков используют HTML5 на практике, при верстке страниц сайта, хотя все современные браузеры поддерживают данный стандарт.

Полный список тегов HTML5 Список атрибутов HTML5 Структура HTML5 Пример верстки сайта на HTML5 Заключение Прошло уже более трех лет с момента, когда был анонсирован первый черновик спецификации стандарта разметки веб-страниц — HTML5, но до сих пор немного ресурсов на HTML5 и, наверное, лишь сотая доля верстальщиков используют HTML5 на практике, при верстке страниц сайта, хотя все современные браузеры поддерживают данный стандарт. Немного лирики, via wiki. HTML5 — это пятая версия основного языка разметки веб-страниц, разработка которой началась еще в 2007 году. В настоящее время спецификация HTML5 находится в стадии разработки, закончить которую планируют в 2014 году. Все современные браузеры уже поддерживают основные элементы HTML5, за что им честь и хвала. Прежде чем переходить к примерам верстки сайта на HTML 5, рассмотрим: теги, атрибуты и структуру HTML 5. Полный список тегов HTML5 Для наглядности в таблице ниже представлен полный справочник тегов HTML, новые теги HTML 5 выделены. Таблица 1. Справочник тегов HTML5 Тег Краткое описание <comment> Определяет комментарий <DOCTYPE> Определяет тип документа <a> Определяет гиперссылки <abbr> Определяет аббревиатуру <acronym> Не поддерживается. Определяет акроним <address> Определяет элемент с адресом <applet> Не поддерживается. Определяет апплет <area> Определяет область внутри изображения карты <article> Определяет статью <aside> Определяет контент в стороне от основного контента страницы <audio> Определяет аудио контент <b> Определяет жирный текст <base> Определяет базовый URL для всех относительных ссылок на странице <basefont> Не поддерживается. Используетя вместо CSS для задания шрифта <bdo> Определяет направление отображения текста <big> Не поддерживается. Определяет большой текст <blockquote> Определяет длинную цитату <body> Определяет элемент тела документа <br> Вставка одного разрыва строки <button> Определяет кнопку <canvas> Определяет графики <caption> Определяет заголовок (подпись) таблицы <center> Не поддерживается. Определяет текст по центру <cite> Определяет цитату или сноску на материал <code> Определяет, что текст является программным кодом <col> Определяет атрибуты для столбцов таблицы <colgroup> Определяет групп столбцов таблицы <command> Определяет командную кнопку <datagrid> Определяет данные в упорядоченный список <datalist> Определяет выпадающий список <datatemplate> Определяет шаблон данных <dd> Определяет описание определения <del> Определяет удаленный текст <details> Определяет детали элемента <dialog> Определяет диалог (разговор) <dir> Не поддерживается. Определяет список директорий <div> Определяет секцию (блок) в документе <dfn> Определяет определение термина <dl> Определяет список определений <dt> Определяет определение термина в списке <em> Определяет выделенный текст <embed> Определяет внешний интерактивный контент или плагин <eventsource> Определяет цель события, отправляемого по серверу <fieldset> Определяет сгруппированный набор полей формы <figure> Определяет группу медиа-контента, и их подписи <font> Устаревший. Определяет шрифт текста, размер и цвет <footer> Определяет нижний колонтитул для раздела или страницы <form> Определяет форму <frame> Не поддерживается. Определяет фрейм <frameset> Не поддерживается. Определяет набор фреймов <h1> по <h6> Определяет заголовок с 1 по 6 заголовок <head> Определяет информацию о документе <header> Определяет область заголовка раздела или страницы <hr> Определяет горизонтальную линию <html> Определяет html документ <i> Определяет курсив <iframe> Определяет встроенный фрейм <img> Определяет изображение <input> Определяет поле ввода <ins> Определяет вставленный (обновленный) текст <isindex> Не поддерживается. Определяет поисковый индекс в документе <kbd> Определяет текст, набранный на клавиатуре <label> Определяет метку для элемента формы <legend> Определяет заголовок группы элементов формы <li> Определяет элемент списка <link> Определяет ссылку на ресурс <mark> Определяет выделенный текст <map> Определяет изображение карты <menu> Определяет список меню <meta> Определяет мета-информацию <meter> Определяет измерения в течение заранее определенного диапазона <nav> Определяет навигационные ссылки <nest> Определяет вложенную точку в шаблоне данных <noframes> Не поддерживается. Определяет секцию, не поддерживающую фрейм <noscript> Определяет секцию, не поддерживающую сценарий (скрипт) <object> Определяет внедренный объект <ol> Определяет упорядоченный список <optgroup> Определяет группу вариантов в раскрывающемся списке <option> Определяет вариант в раскрывающемся списке <output> Определяет некоторые виды результата <p> Определяет параграф (абзац) <param> Определяет параметр для объекта <pre> Определяет выровненный (форматированный) текст <progress> Определяет ход выполнения задачи любого рода <q> Определяет краткую цитату <rule> Определяет правила для обновления шаблонов <s> Не поддерживается. Определяет зачеркнутый текст <samp> Определяет образец программного кода <script> Определяет сценарий (скрипт) <section> Определяет раздел (секцию) <select> Определяет список для выбора <small> Определяет мелкий текст <source> Определяет медиа-ресурсы <span> Определяет раздел в документе <strike> Не поддерживается. Определяет зачеркнутый текст <strong> Определяет выделенный жирный текст <style> Определяет определение стиля <sub> Определяет индексным текст <sup> Определяет надстрочным текст <table> Определяет таблицу <tbody> Определяет тело таблицы <td> Определяет ячейку таблицы <textarea> Определяет область ввода текста <tfoot> Определяет колонтитул таблицы <th> Определяет заголовок ячейки таблицы <thead> Определяет заголовок таблицы <time> Определяет дату/время <title> Определяет название документа <tr> Определяет строку таблицы <tt> Не поддерживается. Определяет телетайп текст <u> Не поддерживается. Определяет подчеркнутый текст <ul> Определяет неупорядоченный список <var> Определяет переменную <video> Определяет видео <xmp> Не поддерживается. Определяет выровненный текст Из Таблицы 1 видим, что новых тегов достаточно много, некоторые из них уже ориентированы на динамический контент, что дает большое преимущество HTML 5 перед HTML 4. Все эти теги подробно рассмотрим в новых статьях. Список атрибутов HTML5 В таблице ниже приведен список основных атрибутов HTML 5. Новые атрибуты и их значения выделены. Таблица 2. Справочник атрибутов HTML5 Атрибут Значение Краткое описание accesskey character Не поддерживается. Определяет сочетание клавиш для доступа к элементу class classname Определяет имя класса для элемента (используется для определения класса в таблице стилей) contenteditable true false Определяет, может ли пользователь редактировать содержимое (контент) contextmenu menu_id Определяет контекстное меню элемента dir ltr rtl Определяет направление текста контента в элементе draggable true false auto Определяет, может ли пользователь перетащить элемент id id Определяет уникальный идентификатор элемента irrelevant true false Определяет, что элемент не имеет значения. Элемент, имеющий значение не отображается lang language_code Определяет код языка содержимого (контента) в элементе ref URL / id Определяет ссылку на другой документ / часть документа (используется только тогда, когда значение атрибута установлено) registrationmark reg_mark Определяет зарегистрированный знак элемента style style_definition Определяет встроенный стиль элемента tabindex number Определяет порядок перехода элемента template URL / id Определяет ссылку на другой документ / часть документа, которые должны быть применены к элементу title text Определяет дополнительную информацию об элементе Структура HTML5 Различия между структорами в HTML4 и HTML5 показаны на рисунках: Структура разметки HTML4 Структура разметки HTML5 Разница очевидна, HTML5 имеет семантический чистый код, структура HTML5 более легкая, гибкая и функциональная. Функциональные особенности структуры HTML5 рассмотрим в новых статьях. Пример верстки сайта на HTML5 По сути, принцип верстки на HTML5 ничем не отличается от верстки на HTML4, единственное, на что стоит обратить внимание, что новые элементы (теги), показанные в структуре HTML5 — инлайновые (inline), поэтому сразу необходимо сделать их блочными для того, чтобы наш дизайн правильно отображался в браузере. Для этого пишем в CSS следующее: CSS код. header, nav, section, article, aside, footer {display:block} Так, нужен какой-то дизайн, который будем верстать. Для начала сделаем, пожалуй, самый простой макет, не нагруженный графикой и сложными элементами. Начнем с HTML разметки. Итак, у нас есть header, навигационное меню — nav, контент или section, внутри снова section и article, правая часть — aside, а снизу footer. Для того, чтобы была видна вложенность элементов HTML5 и где какой элемент находится я сделал для них тег <i> с классом tag. Графических элементов здесь нет, одна картинка, стили оформления и HTML5. HTML код: Верстка сайта на HTML5. <!DOCTYPE html><html><head> <meta charset="utf-8" /> <title>Пример верстки сайта на HTML5 от DivMotive.ru</title>  <style type="text/css"> /* Здесь будут наши стили */ </style></head><body><div id="main"> <header class="h"> <h1>Пример верстки сайта на HTML5 от DivMotive.ru</h1> <i class="tag"><header></i> </header> <nav> <ul> <li><a href="/about/">Об авторе</a></li> <li><a href="/service/">Услуги</a></li> <li><a href="/clients/">Клиентам</a></li> <li><a href="/project/">Проекты</a></li> <li><a href="/article/">Статьи</a></li> <li><a href="/news/">Новости</a></li> <li><a href="/contact/">Контакты</a></li> </ul> <i class="tag"><nav></i> </nav> <section> <img class="image" src="img.jpg" alt="" /> <i class="tag"><section></i> </section> <section> <section> <article> <header> <h2>Создание и разработка сайтов</h2> <i class="tag"><header></i> </header> <p>Компания «<a href="/">DivMotive</a>» предлагает комплекс высококачественных услуг по созданию, разработке и поддержке Интернет-ресурсов в сети на базе <a href="/cms/">Систем управления сайтом</a> (<abbr title="Content Management System">CMS</abbr>).</p> <p>К каждому проекту мы подходим индивидуально и выбираем оптимальный вариант для решения поставленных задач. Разработанный нами сайт будет отличаться оригинальным оформлением и функциональностью. При разработке веб-сайтов мы используем самые передовые технологии.</p> <i class="tag"><article></i> </article> <article> <header> <h2>Веб-дизайн</h2> <i class="tag"><header></i> </header> <p>Каждый сайт должен быть по-своему привлекателен. А первое, на что посетитель обращает внимание — это <strong>дизайн</strong>, т.е. все визуальное представление сайта, включая <em>пиктограммы</em> и <em>иконки</em>, <em>шрифты</em>, <em>иллюстрации</em>, и т.д.</p> <p>От того, насколько дружественно и качественно <strong>разработан дизайн</strong>, зависит дальнейшее пребывание пользователя на Вашем сайте.</p> <i class="tag"><article></i> </article> <article> <header> <h2>HTML верстка сайтов</h2> <i class="tag"><header></i> </header> <p><em>Верстка макета (HTML верстка)</em> — это процесс формирования веб-страницы, по средствам кода соответствующего языка разметки (<abbr title="HyperText Markup Language">HTML</abbr>, <abbr title="eXtensible Markup Language">XML</abbr> и т.п.), так же состоящей из стилей оформления (<abbr title="Cascading Style Sheets">CSS</abbr>) и подгружаемых картинок и фонов, на которые специальным образом разбивается макет сайта, в соответствии с дизайном, как правило, в формате <abbr title="Photoshop Document">PSD</abbr>.</p> <i class="tag"><article></i> </article> <i class="tag"><section></i> </section> <aside> <h2><a href="/service/">Услуги DivMotive</a></h2> <ul> <li> <h3><a href="/service/website/">Создание и разработка сайтов</a></h3> <em>Полностью готовый для работы в сети сайт на базе <abbr title="Content Management System">CMS</abbr></em> </li> <li> <h3><a href="/service/design/">Веб-дизайн</a></h3> <em>Оригинальные индивидуальные решения оформления сайта</em> </li> <li> <h3><a href="/service/markup/">HTML верстка сайтов</a></h3> <em>Блочная валидная семантическая <abbr title="HyperText Markup Language">HTML</abbr>/<abbr title="Extensible Hypertext Markup Language">XHTML</abbr> верстка сайта в строгой технической спецификации</em> </li> </ul> <br /> <h2>Наши преимущества</h2> <ol> <li>самый <a href="/cms/">широкий выбор CMS</a> для реализации любой идеи;</li> <li>создание уникального функционала для сайта;</li> <li>подбор наиболее оптимальной <abbr title="Content Management System">CMS</abbr> для поставленной задачи;</li> <li><a href="/service/website/">качественная разработка сайта</a> на каждом этапе его реализации;</li> <li>применение новых технологий в разработке сайта: jQuery, HTML5, CSS3;</li> <li>бесплатные консультации и сопровождение проекта в течение месяца;</li> <li>скидки постоянным клиентам и индивидуальные бонусные программы.</li> </ol> <i class="tag"><aside></i> </aside> <i class="tag"><section></i> </section> <footer> Copyright © 2011 <a href="/" rel="copyright">DivMotive</a>. All rights reserved. <i class="tag"><footer></i> </footer></div></body></html> Вот такой не замысловатый код у нас получился. Немного громоздко выглядит из-за текста, взятого с сайта, а так в качестве примера, думаю, самое оно. Ну и последнее, что нам осталось сделать, это прописать стили оформления, чтобы все выглядело подобающим образом. CSS код. * {margin:0;padding:0;outline:none} /* обнуляем все элементы *//* общие стили */html {font-size:75%;height:100%}body {font:normal 1em/1.3 arial, helvetica, sans-serif;color:#333;height:100%;background:#f0f0f0}a {color:#2b82dc}a:hover {text-decoration:none}abbr {border-bottom:1px dotted #2b82dc;cursor:help}h1, h2, h3, h4, h5, h6 {font-weight:normal;line-height:1;margin:4px 0 12px;color:#2ca9e4}h1 {font-size:1.88em}p {text-align:justify;word-spacing:.1ex;line-height:1.6;margin-bottom:1em}ul {list-style:none}ol {list-style-position:inside}header, nav, section, article, aside, footer {display:block;position:relative}/* выравниваем страницу по центру, делаем отступы и цвет фона */#main {width:950px;min-height:100%;padding:0 24px;margin:0 auto;background:#fff}/* пишем класс для шапки - header */.h {overflow:hidden;height:70px;padding:35px 25px 0}/* меню навигации */nav {width:100%;height:32px;background:#2ca9e4}nav li {float:left;margin:8px 20px 0}nav a {font-weight:bold;text-decoration:none;color:#fff}nav a:hover {text-decoration:underline;color:#fff}/* область основного контента */section {overflow:hidden}/* стиль для картинки */.image {width:100%;margin:10px 0}/* внутренняя область контента */section section {float:left;width:640px}/* правая часть */aside {overflow:hidden;width:250px;padding:0 30px}/* нижняя часть - footer */footer {height:40px;padding:25px 25px 0;margin:20px 0 0;border-top:1px solid #bbb}/* стили для выделения областей HTML */.tag {position:absolute;right:6px;top:2px;font-size:11px;font-style:normal}header:hover, nav:hover, section:hover, article:hover, aside:hover, footer:hover {background:#777;color:#fff}section section:hover, section aside:hover {background:#999}section article:hover {background:#bbb}article header:hover {background:#eee;color:#777}section article .tag {top:12px}article header .tag {right:70px;top:2px}aside .tag {top:12px} Простейший сайт на HTML5 готов. Ссылка на рабочий пример верстки сайта на HTML 5. Да, чуть не забыл. Вы, наверное, обратили внимание на следующий код: HTML код.  Это нужно для того, чтобы Internet Explorer 6, 7 и 8 понимал новые теги. Заключние Верстать на HTML5 уже можно прямо сейчас, не бойтесь этого, если вы занимаетесь версткой сайтов, тем более что все современные браузеры понимают HTML5. FireFox, Opera, Chrome и Safari как правило имеют автообновление и, как не крути, новые эффекты HTML5 так или иначе будут поддерживаться. Internet Explorer 9 тоже поддерживает HTML5, а для старых версий Internet Explorer можно применять JavaScript. На этом все. Встретимся в новых статьях..

Tue, 22 Feb 2011 23:41:00 +0300 Кодинг http://divmotive.ru/article/coding/verstka-sajjta-na-html5-s-primerami/ Блочная верстка сайта http://divmotive.ru/article/coding/blochnaja_verstka_sajta/ Чтобы не повторяться, в сети и так много информации по блочной верстке, пробегусь только по азам и определениям, приведу несколько примеров html-кода, каким он должен быть по моему глубокому убеждению.

Чтобы не повторяться, в сети и так много информации по блочной верстке, пробегусь только по азам и определениям, приведу несколько примеров html-кода, каким он должен быть по моему глубокому убеждению. Несколько определений Верстка страниц сайта — это процесс создания веб-страницы из макета дизайна, как правило, в формате PSD, с помощью кода соответствующего языка разметки (HTML, WML), так же состоящий из подключенных к ней стилей оформления (CSS) и подгружаемых скриптов (например, JavaScript) и объектов (например, Flash-анимация). Блочная верстка создается благодаря семантическим конструкциям разметки, например, <div></div>. Принято считать, что разновидностей верстки три: Табличная верстка — верстка, построенная на таблицах <table><tr><td>; Блочная верстка — верстка в конструкции <div></div>; Смешанная — использование в верстке табличных и блочный конструкций в примерно равных пропорциях. Некоторые выделяют еще один вид — css-верстка, т.е. верстка страницы с использованием CSS. Различают верстку и по ширине страницы: Фиксированная верстка — означает, что сверстанная страница имеет одну заданную ширину, как правило, расположенную по центру при большем разрешении экрана. Резиновая верстка — когда сверстанная страница тянется по ширине окна браузера, либо в заданных приделах, например, от 1024px до 1600px, либо не имеющая конечной ширины. Кросс-браузерность — это корректное идентичное отображение сверстанной страницы сайта в различных браузерах: Internet Explorer, FireFox, Opera, Safari, Google Chrome и другие. HTML-верстка Итак, верстка страницы сайта начинается с оценки макета дизайна и выбора конструкции — модульной сетки, по которой будет верстаться страница. На модульных сетках останавливаться пока не будем, рассмотрим их позже, в новых статьях. Далее, начинаем «нарезать» макет дизайна и выносим максимальное количество слоев в спрайты. Готовим html-каркас или берем заранее приготовленный: HTML код: Заранее приготовленный html-каркас. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en"> <head> <title>Example</title> </head> <body> <div class="header">...</div> <div id="container"> <div class="aside left">...</div> <div id="content">...</div> <div id="aside right">...</div> </div> <div id="footer">...</div> </body> </html> Далее, там где стоит многоточие «...», верстаем необходимые элементы разметки в соответствии с дизайном. Например, шапка сайта — header у нас получится такая: HTML код: Шапка сайта. <div class="header"> <div id="logo"> <a href="/">Example</a> </div> <ul id="nav"> <li> <a href="/about/">О нас</a> </li> <li> <a href="/service/">Услуги</a> </li> <li> <a href="/contact/">Контакты</a> </li> </ul> </div> Содержимое левого и правого блоков описывать не будем, дабы не тратить время на разъяснения. В них может содержаться все что угодно, начиная от меню каталога и заканчивая формами и баннерами. В контенте — content, понятное дело, располагается контент, текстовый, графический, какой угодно. Начинать следует с заголовка h1, текст желательно выделять в параграфы p, и т.д. в соответствии с семантикой. В нижней части сайта, так называемого подвала — footer, как правило, размещают копирайты, кнопки счетчиков, какие-либо ссылки на разделы. О стилях оформления CSS поговорим чуть позже, отмечу только что их необходимо выносить в отдельный файл и размещать между тегами <head> и </head>: HTML код: Вынос CSS в отдельный файл в спецификации xhtml. <link rel="stylesheet" href="style.css" type="text/css" media="all" /> Гм.. что еще? Несколько преимуществ блочной верстки Блочная верстка имеет более логичный семантический код; Блочная верстка имеет сравнительно небольшой вес, что способствует быстрой загрузке страницы; Блочная верстка позволяет отделить структуру от представления. Ну и все, пожалуй, вкратце по азам пробежались. На этом спешу отклониться. Спасибо за внимание.

Sun, 30 Jan 2011 19:18:00 +0300 Кодинг http://divmotive.ru/article/coding/blochnaja_verstka_sajta/ Ручная верстка: преимущества и недостатки http://divmotive.ru/article/coding/markup-hands/ В этой статье рассмотрим преимущества и недостатки ручной верстки страниц сайта, а так же узнаем как верстают профессионалы. Набор инструментов, помогающих быстро верстать «руками». В чем основные сложности ручной верстки. Стоит ли использовать фреймворк и какой он должен быть?

В этой статье рассмотрим преимущества и недостатки ручной верстки страниц сайта, а так же узнаем как верстают профессионалы. Стоит ли использовать фреймворк и какой он должен быть? Начну, пожалуй, с некоторых понятий и определений. Верстка — это процесс создания веб-страницы по макету дизайна с помощью кода соответствующего языка разметки (HTML, XML, WML), так же состоящий из подключенных к ней стилей оформления (CSS) и подгружаемых скриптов (например, JavaScript) и объектов (например, Flash-анимация). Ручная верстка (handmade) — это верстка, код которой набран вручную, либо в «Блокноте», либо в любом другом не визуальном редакторе. Визуальный редактор (WYSIWYG) — редактор с полным набором инструментов для редактирования текстов, вставки графики и других объектов, а также для создания различных документов, в том числе веб-страниц. К визуальным редакторам относятся: Adobe Dreamweaver; Microsoft Word; Microsoft FrontPage; TinyMCE — созданный на основе JavaScript; и многие другие. Стоит отметить, что TinyMCE используется в различных CMS как редактор контента сайта — позволяет вставлять рисунки, видео-объекты, таблицы, редактировать текст и стили оформления. Он не является редактором для построения полноценных html-страниц в отличие от Adobe Dreamweaver и Microsoft FrontPage. Кстати сказать, Adobe Dreamweaver имеет три режима: просмотр, html-редактор и визуальное форматирование. Упоминая Dreamweaver, речь идет именно о визуальном форматирование. Прошу не путать. Многие начинающие верстальщики используют именно визуальные редакторы, потому что в них легко разобраться и легко создавать html-страницы, либо по созданным в редакторе шаблонам, либо своими усилиями, где знание языка HTML разметки не является основой, т.к. все инструменты представлены в редакторе. Основной «минус» в использовании визуальных редакторов при верстке страниц — это, как правило, захламленный код, теговый мусор, неумение разделять HTML и XHTML разметку, а так же отсутствие семантики. Все эти «минусы» можно устранить и отформатировать html-страницу вручную, но зачем делать работу дважды и тратить свое драгоценное время на «чистку» кода, когда можно сразу все сделать правильно и красиво. Преимущества и недостатки ручной верстки сайта С визуальными редакторами разобрались и понимаем, что без знаний HTML заниматься версткой не стоит. Давайте рассмотрим преимущества и недостатки ручной верстки. Преимущества ручной верстки Четкое представление об исходном коде страницы — понимание того, что делаешь и как; Отсутствие тегового мусора в коде страницы — правильный, более легкий и не нагроможденный код; Наличие нужных элементов в коде страницы, например, !DOCTYPE и meta теги; Выбор конструкций верстки — блочная и/или табличная модель, и техники; Быстрое усвоение языка разметки, т.к. постоянно набираешь повторяющиеся элементы разметки и стилей. Недостатки ручной верстки Человеческий фактор — возможны опечатки и ошибки при наборе тегов разметки и их атрибутов, в том числе в каскадных таблицах стилей (CSS); Отсутствие визуального просмотра страницы — при наборе тегов разметки не знаешь как выглядит страница, пока не откроешь ее в браузере; Занимает больше времени, потому что приходится набирать часто повторяющиеся комбинации; Необходимо по-памяти знать все используемые элементы разметки и элементы стилей; Множество дополнительных действий при элементарных изменениях в разметке. Как видим, ручная верстка — довольно длительный и сложный процесс, особенно для начинающих, однако качество верстки на более высоком уровне, нежели при использовании WYSIWYG. Как верстают профессионалы Профессионалы верстают быстро и качественно с четким пониманием того, что они делают. Почему так? Потому что хороший верстальщик, как и программист, умеет логически думать и создавать необходимые конструкции в разметке при решении той или иной задачи, отлично знает HTML и CSS, часто JavaScript и другие технологии. Кроме того, существует ряд вспомогательных редакторов с подсветкой синтаксиса и авто-тегами, благодаря которым процесс создания html-страницы идет значительно быстрей. Вспомогательные редакторы HomeSite; Notepad++; TopStyle; TextMate; и многие другие. Framework Framework — относительно HTML, это подготовленная структура html-разметки и css-оформления, облегчающая процесс создания веб-страниц. Другими словами, это «база» для разработки html-сайта. Использовать фреймворк или нет, дело каждого верстальщика, основанное на желании и создании собственного фреймворка. Собственного потому, что чужие могут не принести вам должного результата и качества. Один из таких фреймворков можете посмотреть здесь. Заключение В заключении хочу сказать, что если вы никогда не верстали, но хотите этим заняться, начните изучать HTML и CSS, используйте редактор только для облегчения работы, но никак не для создания всей страницы. Спасибо за внимание.

Sun, 30 Jan 2011 11:51:00 +0300 Кодинг http://divmotive.ru/article/coding/markup-hands/