Что есть веб-страница сегодня?

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

И каждый будет прав по-своему.

Однако, все же, согласитесь – основное назначение подобной страницы на сегодня – информационное. Следовательно, в обязательном порядке здесь будет содержаться текстовая информация, много информации. Разумеется, всё должно быть оформлено в соответствии с пожеланиями дизайнера и требованиями стандартов.

Что касается дизайна, то неотъемлемой его частью является выбор шрифтов. И издавна, при участии Microsoft как монополиста рынка ОС, был заложен обычай использовать в вебе лишь те шрифты, что являются рекомендуемыми для отображения на экране монитора и встречаются на большинстве машин.

Обзор решений

Однако прогресс не стоит на месте. И, поскольку развитие веб-стандартов добралось и до типографики, стоит обратить внимание на доступные сегодня решения по внедрению собственных шрифтов.

Рассмотрим каждый из них в отдельности.

1. cufon
2. sIFR
3. Typekit
4. Google Fonts API
5. @font-face

Рассмотрим каждый из методов в отдельности.

1. Cufon

Суть методики такова. Имеем две составные части – непосредственно сам движок рендеринга шрифтов на JavaScript и предварительно подготовленный с помощью специального генератора файл шрифта.

При запуске скрипт рендерит необходимые лигатуры и заменяет их элементами canvas.

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

Резюме:

+ Простота внедрения
+ Поддержка большинства популярных браузеров
+ Высокая производительность
+ Возможность выбора используемых в шрифте символов и настраиваемые дополнительные параметры
+ Поддержка кириллицы
+ Малый размер файлов шрифтов (~30 КБ)
- Невозможно выделить/скопировать обработанный текст (для поддержки данной функции автор рекомендует использовать Typekit)
- Развитие проекта сконцентрировано на отлове багов, внедрение новых возможностей не планируется
- Возможны проблемы с SEO

2. sIFR

Данная методика использует связку JavaScript, CSS и Flash, заменяя каждый символ кастомизируемого текста флэш-элементом с учетом указанных в стилях страници свойств.

Резюме:

+ Поддержка большинства популярных браузеров
+ Возможность выделения/копирования текста
+ Поддержка кириллицы
- Сложность настройки
- Не столь высокая производительность из-за использования Flash
- Развитие проекта прекращено в 2009 году

3. Typekit

JavaScript-решение, использующее фирменную технологию для рендеринга шрифтов на базе свойства @font-face. Предварительно подготовленные лицензированные шрифты подгружаются с серверов компании расположенных по всему миру.

Резюме:

+ Поддержка большинства популярных браузеров
+ Возможность выделения/копирования текста
+ Высокое качество предоставляемых шрифтов
+ Лицензионная чистота используемых шрифтов
+ Высокая скорость работы
+ Поддержка кириллицы
+ Простота внедрения
- Решение платное (присутствует возможность бесплатного использования до 2 шрифтов из пробной библиотеки при условии внедрения на страницу значка компании и минимум 25 000 просмотров в месяц; ограничено применением на 1 сайте)
- Требуется подгрузка шрифтов из внешнего источника
- Возможно внедрение только тех шрифтов, что есть в библиотеке; добавление собственных шрифтов требует специального запроса
- Потенциально больший объем трафика нежели при использовании Cufon

4. Google web fonts

Решение разработанное Google совместно с компанией Typekit. Принцип работы аналогичен предыдущему. Однако, сервис бесплатный и позволяет подгружать в базу собственные шрифты, при условии что они станут OpenSource.

Резюме:

+ Поддержка большинства популярных браузеров
+ Возможность выделения/копирования текста
+ OpenSource-шрифты
+ Высочайшая скорость работы благодаря ресурсам Google CDN
+ Поддержка кириллицы
+ Простота внедрения
- Требуется подгрузка шрифтов из внешнего источника
- Потенциально больший объем трафика нежели при использовании Cufon

5. @font-face на базе FontSquirrel.com

Очередное @font-face-решение. Отличается от предложенных выше возможностью гибкой настройки параметров шрифтов и поддержкой любых пользовательских шрифтов, в том числе коммерческих. Соблюдение авторского права в данном случае остается на совести веб-мастера.

+ Полностью кроссбраузерное решение
+ Возможность выделения/копирования текста
+ Генератор автоматически создает пакет файлов готовых к внедрению
+ Значительно сниженный размер дистрибутива в сравнении с другими решениями
+ Не требуется подгрузка шрифтов из внешнего источника
+ Высокая скорость работы
+ Простота внедрения
+ Наиболее гибкая из предложенных методик настройка шрифтов
+ Поддержка кириллицы
- Недостатков не обнаружено

Выводы

Из рассмотренных решений наиболее функционально гибким и экономным для внедрения собственных шрифтов является сервис FontSquirrel.com. Его однозначно стоит рекомендовать для реализации новых проектов. На второе место пожалуй стоит поставить сервис Google web fonts – проект обладает огромным потенциалом и со временем возможно станет стандартом де-факто для внедрения шрифтов. Если же в веб-проектах вы предпочитаете использовать только шрифты высшего качества, стоит обратить внимание на платный сервис Typekit.

На семинаре «Формула сайта:интеренет-магазин. Начинаем зарабатывать!» слушатели узнают основы открытия, управления и продвижения интеренет- магазина. Целью семинара является оказания  помощи для экономить время и денег  на самостоятельное изучение темы и избежать возможных ошибок.

Темы, рассматриваемые на семинарах, позволят вам с минимальными финансовыми и трудозатратами создать интернет-магазин и использовать его для эффективного решения ваших бизнес-задач:

• - разновидности и особенности интернет-магазинов
• - разработка правильной структуры и юзабилити интернет-магазина
• - выбор системы управления интернет-магазином
• - методы продвижения интернет-сервисы для интернет-магазина
• - практические примеры и рекомендации  

В семинаре принимают участие:

• - Николай Никульников, директор веб-студии  Webrover 
• - Даниил Малых, RU-CENTER 
• - Денис Донченко, 1С-Битрикс
• - Гульнара Тазетдинова, Яндекс 
• - Алексей Воронков, Рассвет Медиа
• - Павел Козлов, Яндекс 

Дополнительную информацию о семинаре Вы можете получить в веб-студии Webrover по телефону (846) 246-23-51 или на сайте «1С-Битрикс».

Об организаторах

Студия Webrover - золотой сертифицированный партнер "1С-Битрикс", профессионально занимается разработкой сайтов с 1997 года. Приоритетное направление деятельности – комплексный интернет-маркетинг и разработка сайтов под ключ на платформе "1С-Битрикс". Сегодня WebRover Internet Solutions является ведущим российским веб-разработчиком и поставщиком интернет-решений для бизнеса.

"1С-Битрикс" - российский разработчик систем управления веб-проектами и корпоративной информацией. Программные продукты "1С-Битрикс" - профессиональные системы управления веб-проектами: сайтами компаний, интернет-магазинами, социальными сетями и сообществами, корпоративными порталами, системами аренды веб-приложений и другими проектами.

Компании-участники

Программа семинара

Дата: 16 апреля 2010 года,
Адрес: г. Самара, Московское шоссе, 77, второй корпус ПГУТИ,
Место проведения: ПГУТИ, второй корпус, первый этаж, актовый зал, схема проезда.

16 апреля в Самаре компания "1С-Битрикс" при поддержке организационных партнеров "Поволжского государственного университета телекоммуникаций и информатики" и веб-студии Webrover проведет информационный семинар "Формула сайта".

В семинаре примут участие специалисты ведущих компаний IT-отрасли: Mail.ru и .masterhost. Мероприятие пройдет при информационной поддержке компании Softkey.

На семинаре слушатели ознакомятся с полным циклом работ по созданию и продвижению сайта: от формирования концепции сайта и выбора доменного имени до оценки эффективности готового проекта. Цель семинара - рассказать о составляющих и этапах создания современного эффективного интернет-проекта:

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

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

Семинар будет интересен всем, кто имеет собственный сайт или только задумывается о целесообразности его создания, тем, кто отвечает за эффективную работу сайта и его успешное продвижение. Регистрация участников на сайте "1С-Битрикс".

В семинаре принимают участие:

• — Алексей Юрасов, д.э.н. заведующий кафедрой Электронной Коммерции ПГУТИ
• — Фрол Петровичев, старший менеджер клиентской службы .masterhost
• — Лиля Зиладинова, Mail.ru
• — Николай Никульников, директор веб-студии WebRover
• — Артём Рябинков, ведущий аналитик, координатор проектов «1С-Битрикс»

Программа семинара

Регистрация слушателей: 10:00 - 10:30

Что нам стоит сайт построить?

• — интернет-маркетинг: проблемы широкого внедрения и использования современных интернет-технологий
• — зачем нужен сайт для коммерческой структуры
• — функции, которые несет сайт на языке бизнеса, а не технологий
• — что необходимо для создания сайта (бизнес-план, критерии эффективности, техническое задание)

Алексей Юрасов, ПГУТИ, 10:30 - 11:10

Как вы лодку назовете – так она и поплывет.

• — выбор доменного имени для вашего сайта, рекомендации
• — домены .ru, .com, .org, .рф и т.п.
• — что это значит и какие выбрать?
• — правовые аспекты регистрации доменов

Фрол Петровичев, .masterhost, 11:10 - 11:40

Управляем сайтом: Быстро. Просто. Эффективно.

• — что такое CMS - плюсы и минусы использования CMS
• — выбор CMS - демонстрация возможностей "1С-Битрикс: Управление сайтом"

Артем Рябинков, "1С-Битрикс", 11:40 – 12:40

Ответы на вопросы: 12:40 - 12:50

Кофе-брейк: 12:50 – 13:20

Где живут сайты? Это загадочное слово «хостинг».

• — как все работает - виды хостинга

Фрол Петровичев, .masterhost, 13:20 – 13:50

Эффективная реклама в интернете - миф или реальность?

• — виды, способы и технологии рекламы в зависимости от решаемых рекламодателем задач

Лиля Зиладинова, Mail.ru, 13:50 – 14:20

"А эффективен ли сайт?"

• — критерии оценки эффективности
• — инструменты оценки
• — истории успеха

Николай Никульников, студия «Webrover», 14:20 - 15:00

Сайт готов. Что дальше? Привлекаем клиентов с помощью интернет-рекламы.

• — реклама на портале Mail.ru
• — виды и технологии рекламы на портале Mail.ru
• — специальное предложение для региональных рекламодателей

Лиля Зиладинова, Mail.ru, 15:00 – 15:30

Свободное общение с докладчиками: 15:30 – 16:00

Дополнительную информацию о семинаре Вы можете получить в веб-студии WebRover по телефону . Информация о семинаре на сайте "1С-Битрикс".

Об организаторах

Поволжский государственный университет телекоммуникаций и информатики - известен в мире как один из четырех российских центров, ведущих научные исследования и широкомасштабную подготовку специалистов по направлениям телекоммуникации, радиотехники,информатики и экономики. ПГУТИ был первым ВУЗом в России открывшим кафедру Электронной Коммерции.

Студия Webrover - золотой сертифицированный партнер "1С-Битрикс", профессионально занимается разработкой сайтов с 1997 года. Приоритетное направление деятельности – комплексный интернет-маркетинг и разработка сайтов под ключ на платформе "1С-Битрикс". Сегодня WebRover Internet Solutions является ведущим российским веб-разработчиком и поставщиком интернет-решений для бизнеса.

"1С-Битрикс" - российский разработчик систем управления веб-проектами и корпоративной информацией. Программные продукты "1С-Битрикс" - профессиональные системы управления веб-проектами: сайтами компаний, интернет-магазинами, социальными сетями и сообществами, корпоративными порталами, системами аренды веб-приложений и другими проектами.

Сайт Самарской Епархии Русской Православной Церкви победил в номинации Религия (голосование экспертов), а также победил в народном финале. Естественным образом победа продублирована по Поволжскому ФО. Данный сайт был разработан в рамках благотворительной акции компании WebRover совместно с Центром Разработки Корпоративных Порталов кафедры Электронной Коммерции ПГУТИ. Кстати говоря сайт кафедры также стал призером в номинации Лучший сайт на "1С-Битрикс" по Приволжскому Федеральному Округу.

Сайт Волжского Казачьего Войска победил в номинации Общество и также одержал победу в народном голосовании. Кроме дубля в этой же номинации по Приволжскому Федеральному Округу Волжскому Казачьему Войску досталась победа в номинации Разработки студий.

Сайт туристического агентства Наутилус-тур победил в номинации Лучший сайт на "1С-Битрикс" по Приволжскому Федеральному Округу.

"Золотой Сайт" является старейшим конкурсом интернет-сайтов в Рунете и проводится с 1997 года. В конкурсе 2009 года приняло участие более 1600 сайтов, из которых были отобраны победители в 35 номинациях. В состав жюри конкурса входят профессионалы сферы интернет-бизнеса из России, стран ближнего и дальнего зарубежья. Партнерами конкурса в этом году выступили RU-CENTER, "Лаборатория Касперского", компания Softkey, "Деловой Мир Онлайн" и другие. Более подробно о конкурсе можно узнать на сайте www.goldensite.ru.

Я выделил 24 характерных хаков и протестировал их работу в 18 браузерах 4х семейств (FifeFox, Opera, Safari, Chrome). В результате получил вот такую таблицу:

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

Примечание: ряд хаков действуют и на ie - но "conditional comments" спасут отцов российской...

Что у нас следует при беглом осмотре таблицы?

1. уникальные хаки есть для всех семейств кроме Chrome.

2. несмотря на то, что нет хака для ФФ 2 (у него рендеринг значительно отличается от 3-й версии и немало доставляет...), есть относительно простой финт ухом, позволяющий победить нежелание 2-й версии ФФ понимать display-inline (для примера)

3. хаки для Оперы охватывают ряд версий, но не все, однако можно при необходимости применить оба хака сразу

4. вряд ли понадобится, но можно отделить зерна от плевен хром от сафари комбинацией хаков №14,№23 и переопределив стиль для FF 3.0 хаком №23

5. как ни странно, есть хаки которые кем-то где то публиковались, но не работают (№№2,11,21)

6. хаки - зло и лучше их не использовать

Хочу поделится техникой, переопределения стилей при использовании хака который воздействует на несколько версий или семейств на примере следующей задачи: выделить стиль для FF 2.0 (пунт 2., подходит с допиливанием к пункту 4.).

Исходные данные:

мы имеем 3 хака, которые понимают только FF: №№3,4,5, причем №5 понимают только FF младше версии 3.0 (но нет гарантий, что его будут понимать и последующие версии - в этом и недостаток хаков).

Решение:
1. определяем стиль элемента в CSS без хаков для всех прочих браузеров.

p {
	color: red;
}

2. применяем хак для FF всех версий, наш CSS файл пример вид:

p {
	color: red;
}

x:-moz-any-link,p
{
	color: red
}

3. для того чтобы FF >= 3.0 не применяли последний стиль к элементу, переопределяем его хаком и ставим ПОСЛЕ хака из предыдущего пункта. CSS имеет вид:

p {
	color: red;
}

x:-moz-any-link,p {
	color: red
}

x:-moz-any-link,x:default,p{
	color: red
}

Теперь: любой браузер, кроме FF, читая данный CSS, применит к элементу только первый стиль, т.к. хаки не будут интерпретированы. FF 2.х прочитает первый стиль, прочитает второй стиль, не поймет третий и применит последний прочитанный стиль. FF 3.х прочитает все три стиля и тоже применит последний. Задача решена.

Ниже таблица хаков с кодом и номерами - некоторые хаки имеют несколько версий. Вместо #селектор# может быть любая CSS <=2 конструкция вроде #index p .class

Примечательно что направление 1С-Битрикс мы открыли летом 2008 года, и вот фактически за год успешной веб-разработки и внедрения CMS Bitrix, студии удалось опередить остальные 35 самарских компаний продвигающим 1С-Битрикс в Самарской области.

Это признание делает нас более привлекательными и прозрачными для Заказчиков: компания которая за год может добиться общепризнанных результатов находится в отличной форме (много стало студий, которые заявляют "мы 10 лет на рынке", а в действительности мало что из себя представляют).

Затем, после просмотра фотографий, был выбран подходящий ракурс и сделан карандашный набросок здания. Так оно и будет выглядеть на сайте.

Далее нижние этажи с выступами и входами. Был отрисован один выступ с окном и раскопирован. Нарисован вход справа…скопирован, доработан, и из него получен второй вход с того же края. Дошла очередь и до главного входа. Придана текстура, добавлена сверху табличка «Телекоммуникаций и информатики» и дорисованы фонари.

В конце добавлены деревья, которые перед этим долго вырезались, небо, отдельно были нарисованы облака. И в завершение всего – синяя полоса, место нахождения кафедры «Электронная коммерция».

Исходя из этого, подача информации должна быть понятной и удобной. Основой раздел на сайте это «каталог», так как в нем расположена основная информация – описание продукции компании, поэтому решили вынести его отдельно в раскрытом виде. Таким образом, можно просмотреть любой вид продукции, находясь в любом разделе сайта.

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

Самое главное в данной работе над этим проектом было проработать большой массив информации, трансформировав ее в доступный для пользователя контент.

На главной странице сделали интерактивную флешку с описанием и фотографиями топовых объектов, которые были построены с использованием продукции компании Термостепс-МТЛ. Она занимает не так много места, а несет в себе много интересно-важной информации.

У компании Термостепс-МТЛ существует огромное количество дилеров. На странице «где купить» (страница дилеров компании) присутствует интерактивная флешка в виде карты России, где продемонстрировано местоположение всех дилеров, с полной просмотра информацией о конкретном дилере с возможностью увидеть его место расположение на Яндекс.Картах, так же реализована быстрая навигация между другими дилерами.

Ещё на сайте компании планировалось размещения огромного количества зданий построенных из продукции компании Термостепс-МТЛ. Была придумана идея реализации этого при помощи фреймворка jQuery, что позволило размесить огромное количество зданий, не загружая страницу и добавляя интерактивность.

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

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