Откройте свой Мир!

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

Internet Explorer

Один из популярнейших на сегодняшний день во всем мире браузеров, Internet Explorer (далее IE) – продукт корпорации Microsoft, разрабатываемый с 1995 года. Поставляется IE бесплатно вместе с операционной системой Microsoft Windows. Поэтому чтобы установить его, необходимо приобрести лицензионную копию этой операционной системы.

IE имеет множество версий, последняя из которых – восьмая. По данным статистики компании StatCounter за период 11.2008 – 11.2009 наиболее популярная версия этого браузера – седьмая. Рассмотрим основные возможности IE. Так, этот браузер, начиная с версии 7, имеет возможность работы с вкладками, блокировку всплывающих окон, встроенный RSS-агрегатор, поддержку интернациональных доменных имён. Кроме того, браузер IE имеет фишинг-фильтр и защиту от вредоносного ПО.

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

В IE имеется возможность индивидуальной настройки уровня безопасности, поиска по умолчанию, работы ускорителей, работы с cookies. Основные преимущества Internet Explorer: поставка в комплекте с ОС Windows, бесплатное обновление с Windows Updating.

Mozilla Firefox

«Огненная лиса» (именно так переводится название браузера Firefox) – бесплатный браузер, который существует на рынке интернет-браузеров с 2004 года (9 ноября 2004 вышел релиз версии 1.0). На сегодняшний день самая свежая версия этого браузера - Mozilla Firefox 3.5.

Mozilla Firefox более требователен к соблюдению стандартов W3C по сравнению с IE.

Mozilla Firefox 3.5 блокирует всплывающие окна, позволяет контролировать приватность в сети, «заметает следы» пребывания в сети благодаря мгновенному удалению данных сетевых журналов или cookies. Также Firefox поддерживает RSS.

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

Встроенный менеджер загрузок - одно из главных преимуществ Firefox'а. Этот менеджер позволяет догружать файлы даже после обрыва соединения. Состояние текущей загрузки всегда отображается в строке статуса браузера.

В Mozilla Firefox включен набор инструментов для веб-разработчиков, включая JavaScript и CSS. Гибкость и расширяемость Mozilla Firefox снискали ему славу самого настраиваемого браузера в мире. Распространенными расширениями для Firefox являются:

• JSView (для просмотра внешних файлов страницы)
• HTMLValidator (проверяет код на соответствие стандартам W3C)
• View Source Chart (визуализирует разметку страницы)
• Firebug (включает отладчик, DOM-навигатор и JavaScript-консоль)
• Web Developer (включает функции для отладки страниц)

Opera

Браузер Opera был выпущен в 1994 и был первым браузером в котором поддерживалась система вкладок. Opera – целая линейка браузеров как для обычных персональных компьютеров, так и для разных мобильных устройств: смартфонов, коммуникаторов, КПК. Раньше это браузер был платным, но с 2005 года все версии Opera (кроме Opera Mobile) распространяются бесплатно.

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

Opera, так же как и Mozilla Firefox, имеет встроенные инструменты для веб-разработчиков - Opera Dragonfly, кросс-платформенный комплекс отладки JavaScript, проверки и редактирования CSS и DOM.

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

Управление мышью – отличительная особенность браузера Opera. При помощи этой функции можно всего лишь несколькими специальными движениями мышью упростить и ускорить навигацию, работу со ссылками, работу с открытыми окнами в браузере.

Преимущества браузера Opera:

• отображает страницу сайта еще до ее полной загрузки;
• скорость обработки браузером скриптов JavaScript в два раза быстрее по сравнению с остальными.

Благодаря тому, что описанные выше браузеры имеют огромную популярность у пользователей Интернета, большинство веб-дизайнеров, верстальщиков и веб-программистов именно в них тестируют работоспособность своих сайтов. Однако можно заметить, что описанные современные браузеры, несмотря на их разные позиции в рейтинге популярности обладают достаточно схожим функционалом. Но следует отметить, что в отличие от Windows Inernet Explorer браузеры Opera и Mozilla Firefox лучше интегрированы с различными инструментами для разработки сайтов и различными веб-сервисами, поэтому предоставляют специалистам веб-диазйна больше возможностей в сфере разработки сайтов .

...

Если Вас заинтересовал данный материал - ознакомьтесь с материалом источника по теме Разработка сайтов. Обзор популярных браузеров более детально

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

Пользователям новая операционная система станет доступна в первой половине 2010 года.

Как подчеркивают в Google, в основу Chrome положены три принципа: скорость, безопасность и простота использования. На демонстрационном видео показано, что система загружается всего за семь секунд. Кроме того, разработчики уже завершили работу над файловым менеджером и рядом других программных приложений.

На уровне ядра Chrome поддерживает технологию HTML5, что позволяет системе одновременно работать на "рабочем столе" с веб-приложениями и офлайновыми решениями. Безопасность новой операционной системы базируется на так называемой "браузерной" модели, что отличается от общепринятых подходов.

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

Сама операционная система будет представлять собой легкую версию системы для маломощных персональных компьютеров и ноутбуков. В основном она рассчитана на работу в интернете.

Источник: podrobnosti.ua

Если Вас заинтересовал данный материал - ознакомьтесь с материалом источника по теме Google представила операционную систему Chrome более детально

В процессе создания сайта, на этапе разработки, очень важно проверить работоспособность сайта перед его размещением на хостинге. Для проверки работоспособности сайта проводится специальное тестирование. Что же включает тестирование сайта?

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

• просмотр сайта на разных мониторах. Просмотр сайта на мониторах разных размеров и при разном разрешении позволяет оценить как будет выглядеть дизайн сайта на компьютерах потенциальных посетителей: появляется ли горизонтальная полоса прокрутки на маленьких экранах, не смещаются ли элементы при разном разрешении и т.д.
• просмотр сайта в разных бразузерах. Просмотр сайта в различных интернет-браузерах и их версиях, позволяет проверить кроссбраузерность сайта;
• проверка времени загрузки сайта на разной скорости Интернет-подключения. Как быстро загружаются страницы сайта на минимальной и на максимальной скорости подключения.
• проверка работоспособности гиперссылок на сайте. Есть ли на сайте «битые» ссылки или ссылки, ведущие не на те страницы. После выявления таких ссылок их необходимо устранить или исправить;
• проверка корректного отображения цветов на сайте при различных настройках цветовой палитры монитора. Позволяет узнать, как будут отображены цвета сайта на мониторах потенциальных посетителей;
• проверка отображения шрифтов, анимации и графических изображений. Позволяет найти и устранить возможные проблемы с правильным отображением изображений, анимационных роликов и шрифтов на сайте;
• проверка свойств каждой страницы сайта: заголовков, ключевых слов, описания или иных мета-тегов;
• проверка содержания каждой страницы на соответствие исходным материалам заказчика и проверка правописания на каждой странице/

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

Для проведения различных проверок при тестировании сайта существует множество специальных программных инструментов. Например, HTML-валидаторы проверяют html-код страниц сайта на соответствие стандартам языка HTML. А анализаторы неработоспособных (битых) ссылок и изображений, например, Semonitor, позволяют автоматизировать процесс проверки сайта на работоспособность гиперссылок и корректное отображение картинок, фотографий и т.д.

Если Вас заинтересовал данный материал - ознакомьтесь с материалом источника по теме Веб-студия. Тестирование сайтов более детально

Когда заказанный в студии веб-дизайна сайт уже готов, многие заказчики думают что на этом этапе можно расслабиться – дальше все пойдет как по маслу. Но сайту регулярно требуется обновление контента, отслеживание и оперативное реагирование на вопросы или жалобы посетителей сайта и т.д. Что же делать заказчику с готовым сайтом?

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

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

Если сайт компании предполагает обратную связь с клиентами, тогда компании необходим сотрудник, отвечающий за эту связь. Такой сотрудник должен проверять электронную почту (оптимально - несколько раз в день), чтобы оперативно и точно отвечать на письма клиентов или партнеров, быть доступным для онлайн-общения с клиентами (Skype, ICQ и т.д), если это предусмотрено на сайте.

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

Если у Вас нет времени или возможности самостоятельно поддерживать сайт, Вы можете заказать техническую поддержку Вашего сайта в студии веб-дизайна WebStudio2U!

Если Вас заинтересовал данный материал - ознакомьтесь с материалом источника по теме Веб студия. Cайт готов. Что дальше? более детально

Вслед за Microsoft, недавно представившей визуальный поиск в Bing, аналогичные возможности для своей поисковой системы внедрила компания Google. Пока визуальный поиск для Google работает в виде экспериментального сервиса Image Swirl.

Воспользоваться Image Swirl могут все желающие. В официальном блоге Google подробно описан механизм работы сервиса.

Главная идея Image Swirl состоит в том, что при поиске по картинкам сервис сможет разложить похожие изображения по отдельным стопкам и наглядно показать связь между картинками. Такая идея группировки картинок, по мнению авторов сервиса, сделает визуальный поиск более удобным.

Сделав запрос на странице Image Swirl, пользователь получит страницу с результатами поиска в виде картинок, за каждой из которых скрывается стопка похожих изображений. Если кликнуть на одну из стопок, ситуация повторится - для всех входящих в нее картинок подобрано несколько похожих. Пока сервис позволяет просматривать такую группировку картинок для 200 тысяч запросов.

Источник: podrobnosri.ua

Если Вас заинтересовал данный материал - ознакомьтесь с материалом источника по теме Google запустила визуальный поиск более детально

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

Система навигации – это совокупность гиперссылок, помогающих посетителю находить нужную информацию на сайте. Гиперссылки для навигации по сайту могут быть текстовыми или графическими. В случае если при наведении курсора или при нажатии на ссылку она меняет свой внешний вид (цвет, размер шрифта), такая ссылка называется ролловером (текстовым или графическим).

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

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

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

• на какой странице посетитель находится сейчас?
• на каких страницах он уже был?
• на какие еще страницы он может попасть?

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

На довольно частый вопрос «Сколько же нужно размещать ссылок на сайте?» единого ответа нет. В зависимости от количества страниц, которые содержатся на сайте, гиперссылок может быть и 100-200 и 50 000 или даже больше. Точное количество необходимых конкретному сайту ссылок можно определить только опытным путем. И действует здесь единственное правило – ссылок должно быть ровно столько, сколько посетителю нужно для удобного пользования сайтом. Однако система навигации по сайту не должна занимать большую часть пространства на сайте. В зависимости от сложности сайта система навигации может занимать 5-15% полезной площади сайта и только в редких случаях больше.

С чего начинать разработку системы навигации сайта?

Разработку системы навигации по сайту следует начинать только тогда, когда определены задачи, решаемые сайтом, и определен объем текстовой и графической информации, то есть контент сайта. Иначе может случиться так, что новые материалы просто не впишутся в уже существующую структуру навигационной системы и все придется переделывать. Потому что, если какая-либо страница будет удалена, или ее URL-адрес будет изменен, то это неизбежно приведет к изменениям в навигации по сайту – все ссылки, связывающие удаленную или измененную страницу с остальными, нужно будет изменить.

...

Если Вас заинтересовал данный материал - ознакомьтесь с материалом источника по теме Дизайн сайтов. Навигация по сайту более детально

Как быстро можно найти на сайте требуемую информацию? За 5, 10 минут? За полчаса? И все это было бы действительно смешно, если бы не было так грустно! Часто случается так, что попав на сайт мы можем блуждать по замкнутому кругу из десятков страниц, но так и не найти нужной. Что служит тому причиной? Ответ очевиден - чрезмерная глубина сайта.

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

Какова же оптимальная глубина сайта?

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

Основных видов систем навигации сайта по глубине несколько:

• одноуровневая
• двухуровневая
• трехуровневая
• четырехуровневая

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

Сайт с двухуровневой системой навигации представляет собой главную страницу (нулевой уровень), с которой ссылки ведут на страницы первого уровня, первый и второй уровни. Ссылки со страниц первого уровня ведут на страницы второго уровня. Такая система навигации подходит для сайтов, которые содержат от 30-40 до 600-700 страниц.

Трехуровневая система предназначена для сайтов с количеством страниц более 700. Аналогично двухуровневой системе, сайт состоит из главной страницы, страниц первого, второго и третьего уровней. Ссылки ведут с главной на страницы первого уровня, с первого – на второй уровень и со страниц второго уровня – на третий.

И наконец, четырехуровневая система навигации по сайту предполагает еще большую глубину сайта. Добавляется четвертый уровень, на который ведут ссылки с предыдущего уровня, как и в предыдущих видах. Создавать сайт с четырехуровневой системой навигации следует лишь в случае очень (!) большого объема сайта. В некоторых случаях такая система на сайте была разработана по ошибке веб-дизайнера или по желанию заказчика.

Так как большинство корпоративных сайтов содержит до 600-700 страниц, то для них двухуровневая система и соответствующая ей глубина сайта будут оптимальны. Одноуровневая навигация будет оптимальной для сайтов-визиток или рекламных промо-сайтов, количество страниц в которых не превышает 30-40. Ну а для интернет-порталов, в зависимости от их размеров, подойдет трех- и четырехуровневая глубина сайта.

...

Если Вас заинтересовал данный материал - ознакомьтесь с материалом источника по теме Дизайн сайтов. Глубина сайта более детально

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

С точки зрения поисковой системы более ценна та страница, на которую ведет больше ссылок, поэтому на самые важные страницы на сайте необходимо максимальное количество ссылок. Однако следует избегать избыточной навигации, когда в погоне за вершинами поисковых рейтингов каждая страница сайта превращается в линкопомойку. Так, для различных видов сайтов вертикальное меню может содержать 20-40 ссылок, а каждая информативная страница – 5-10 ссылок. Кроме того, текст ссылки должен соответствовать тематике страницы, на которую ссылка ведет.

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

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

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

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

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

Как избежать ошибок при создании системы навигации сайта?

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

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

Если Вы обнаружили на своем сайте ошибки в навигации, подобные описанным выше, если Вы хотите, чтобы посетителям Вашего сайта было комфортно, то закажите проведение редизайна системы навигации Вашего сайта в студии веб-дизайна WebStudio2U!

...

Если Вас заинтересовал данный материал - ознакомьтесь с материалом источника по теме Дизайн сайтов. Ошибки в системе навигации более детально

Скорость загрузки страниц с сервера – важный фактор юзабилити сайта. Чтобы обеспечить хорошую скорость загрузки, веб-дизайнеры стараются максимально уменьшить использование «тяжелой» графики в дизайне сайтов. Для этого графические файлы заменяют применением специальных эффектов в DHTML. DHTML (Dynamic HTML) – доработанная динамическая версия HTML, позволяющая создавать визуальные эффекты.

Какие же визуальные эффекты для дизайна сайтов доступны в DHTML?

К основным эффектам в DHTML относят следующие:

• перемещение элемента относительно страницы сайта
  • влет
  • вылет
  • спускать по словам
  • пластик
  • скачок
  • спирали
  • волна
  • стирание
  • масштаб
  
  
• форматирование элементов страницы
  
  • изменение цвета строки или абзаца
  • изменение фона
  • изменение шрифта
  • изменение размера шрифта
  
  

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

• изображение исходной кнопки
• изображение кнопки при наведении на нее курсора мыши
• изображение кнопки в нажатом состоянии

Если размер каждого такого изображения будет достаточно мал, всего 3-4 кб, то их совокупный «вес» уже будет составлять 9-12 кб. Если количество анимированных таким образом кнопок велико, то общий «вес» страницы тоже существенно увеличивается и это замедляет загрузку всей страницы.

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

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

...

Если Вас заинтересовал данный материал - ознакомьтесь с материалом источника по теме Дизайн сайтов. Визуальные эффекты в DHTML более детально

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

• бегущие строки;
• анимированные кнопки;
• выпадающие меню;
• эффект при смене страниц;
• мерцающий фон и т.д.

О том, насколько целесообразно в бизнес-сайтах (корпоративных сайтах) использовать подобные эффекты мы и поговорим в этой статье.

Итак, бегущая строка. Бегущая строка вызывает ощущение срочности информации, ее новизны. Эффект бегущей строки может применяться в том случае, когда свободного места хватает ровно на строку текста, а необходимый объем информации намного превышает размер этой текстовой строки. Но, поскольку движение текста в бегущей строке часто отвлекает или раздражает посетителей сайта, то без обоснованных причин включать бегущую строку в дизайн сайта не следует.

Анимированные кнопки. Различным образом анимированные кнопки меню на сайте последнее время очень популярны. При наведении на них курсора мыши или при нажатии они меняют цвет, двигаются в стороны, вверх-вниз. Однако, функциональной пользы от использования анимированных кнопок в дизайне сайта – минимум, а хлопот – максимум. Ведь если у посетителя сайта в настройках браузера будет отключено воспроизведение графики или выполнение скриптов, то вместо Вашей, бесспорно, красивой кнопки, он увидит лишь пустой квадратик.

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

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

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

...

Если Вас заинтересовал данный материал - ознакомьтесь с материалом источника по теме Дизайн сайтов. Визуальные эффекты более детально

При разработке дизайна для страниц сайтов очень важно уделить внимание оформлению фона всей страницы или ее элементов. Традиционным считается обычный белый фон – на нем легче воспринимать текст сайта. Также не мешают восприятию текстовой информации сайта и оттенки белого – бежевый, кремовый. Однако все чаще сайты с простым белым фоном кажутся заказчикам слишком скучными и однообразными. Тогда возникает потребность создать сайт с фоном другого цвета или с фоновым рисунком. Что нужно учесть при использовании фонового рисунка или цветного фона в дизайне Вашего сайта?

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

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

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

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

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

Когда одноцветного или градиентного фона сайта кажется недостаточно, часто прибегают к использованию фоновых рисунков. При этом копии одного рисунка заполняют собой пространство страницы сайта – получается мозаика. Использование фонового рисунка непременно скажется на длительности загрузки страниц сайта, поэтому следует выбирать рисунок для мозаики размером не более 100х100 пикселей. При загрузке страниц сайта с сервера браузер сохранит в кэш-память компьютера фоновое изображение и уже потом выложит его мозаикой на фоне сайта. Следовательно, чем меньше кусочков в целом изображении, тем быстрее они будут сложены воедино. Поэтому мозаичный фон из изображений размером 25х25 будет загружаться медленнее, чем фон из кусочков 50х50.

Подводя итог всему вышесказанному, можно сделать несколько выводов:

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

...

Если Вас заинтересовал данный материал - ознакомьтесь с материалом источника по теме Дизайн сайтов. Оформление фона сайта более детально

Дизайн сайтов может быть красивым и не очень, дорогим или бесплатным, эксклюзивным или шаблонным. В наше время шаблонов дизайна сайтов существует просто огромнейшее количество. Готовые шаблоны дизайна сайтов есть и платные и бесплатные, на любой вкус. Однако у всех них есть огромный недостаток – они не уникальны. Даже если Вы купили шаблон, то его может купить и кто-то другой.

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

Итак, с чего начать. Первый шаг – предварительное тщательное обдумывание, каким Вы хотите видеть дизайн Вашего сайта, может показаться лишним. Однако лишь на первый взгляд. Лучше нарисовать будущий дизайн на бумаге, поэкспериментировать с различными вариантами и только потом начинать работу в графическом редакторе.

Следующий шаг, как Вы уже наверное догадались, это рисование дизайна в графическом редакторе. Какой при этом выбрать редактор – дело личных вкусов и предпочтений. Наиболее распространенный графический пакет – Adobe Phohtoshop, поэтому рассматривать создание шаблона дизайна сайта будем на его примере.

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

В программе Adobe Phohtoshop есть специальный инструмент для разрезания изображения – Slice Tool. Этим инструментом, буквально как ножом изображение нарезается на требуемое количество кусочков. При этом следует учитывать, что при заполнении текстом некоторые ячейки таблицы или блоки на странице сайта могут «потянуться». Поэтому для этих ячеек нужно вырезать кусочки изображения таким образом, чтобы при копировании они не создавали впечатления плитки.

Когда изображение разрезано на необходимое количество частей, нужно его сохранить. В программе Adobe Phohtoshop это сделать легко. В меню File нужно выбрать пункт Save for Web&devices. В открывшемся диалоговом окне необходимо выбрать тип файлов «HTML&images», указать имя файла «index.htm» или «index.html» (расширение .htm предпочтительнее) и сохранить этот файл в корневую папку Вашего будущего сайта. Если все было сделано правильно, то в этой папке появится соответствующий файл index.html и каталог images. В images как раз и будут находиться все нарезанные кусочки изображения.

Что дальше? Остается лишь отредактировать файл index.html таким образом, чтобы при заполнении его текстом не получалось разрывов изображения или белых полос. Чтобы избежать появления таких проблем, необходимо выбрать для каких ячеек изображения должны быть фоновыми, какие ячейки будут растягиваться или объединяться. Не отчаивайтесь, если Вам не удалось с первого раза идеально разрезать нужное изображение, возможно, понадобится несколько мучительных попыток. Но зато в результате дизайн Вашего сайта будет именно таким, каким Вы хотели, а сам сайт будет радовать Вас своей оригинальностью и уникальностью.

...

Если Вас заинтересовал данный материал - ознакомьтесь с материалом источника по теме Дизайн сайтов. Как самостоятельно сделать шаблон сайта? более детально

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

О сайтах конкурентов важно знать такие сведения:

• как давно существует сайт в сети Интернет?
• сколько страниц сайта индексируется поисковыми системами?
• каков уровень посещаемости сайта?
• каковы его показатели тИЦ и PR?

Какую пользу принесут эти данные?

Зная, сколько времени существует сайт в Интернете, Вы можете определить, сколько же Вам необходимо потратить времени на создание, раскрутку и продвижение Вашего сайта для того, чтобы он догнал сайт-конкурент или перегнал его. Имея на руках информацию о том, сколько страниц сайта-конкурента проиндексировано поисковыми системами, Вы поймете сколько проиндексированных страниц должен содержать Ваш сайт, чтобы обойти конкурентов. Алгоритмы ранжирования поисковых систем учитывают индекс цитируемости сайта. Для Яндекса это показатель тИЦ, а для Google – PageRank. Зная значение этих показателей для сайтов-конкурентов, Вы будете знать, какого тИЦ или PR необходимо достичь Вашему сайту.

Как получить информацию о сайтах-конкурентах? – Все достаточно просто. О дате регистрации домена сайта-конкурента узнать можно, используя специальные сервисы, например, бесплатный онлайн-сервис http://www.who.is/. Информацию о количестве проиндексированных страниц и показателях тИЦ и PR предоставляют сами поисковые системы. Выяснить уровень посещаемости сайта-конкурента легко – достаточно изучить данные его счетчика посещаемости.

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

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

Если Вас заинтересовал данный материал - ознакомьтесь с материалом источника по теме Дизайн сайтов. Как собрать сведения о конкурентах? более детально

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

Если цель Вашего сайта – предложить посетителям купить Ваш товар или воспользоваться Вашей услугой, то Вы должны понимать, что никакой дизайн сайта не поможет посетителя купить именно Ваш товар, если аналогичная продукция у конкурентов стоит значительно дешевле. Цена на Ваши товары высока, потому что они эксклюзивны или имеют множество преимуществ? Тогда на Вашем сайте непременно должно быть уделено внимание этому факту. Подчеркните уникальность Вашей продукции соответствующим оформлением дизайна сайта и, конечно же, опишите подробно все преимущества Ваших товаров или услуг в материалах сайта.

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

Чтобы стать конкурентоспособным, Ваш сайт должен загружаться максимально быстро. При этом также следует учитывать особенности Вашей целевой аудитории. Какова скорость подключения к Интернету у Ваших целевых посетителей? Быть может, большинство из них пользуются модемом? Тогда вряд ли они оценят красоту Вашей flash-заставки или анимированного меню. Статистика показывает, что сайты, которые слишком долго загружаются (по разным данным – дольше 40 секунд или 1 минуты), посетители покидают и переходят на другие сайты аналогичной тематики, то есть к Вашим непосредственным конкурентам.

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

Ваш сайт должен быть удобен для посетителей. Это значит, что он должен иметь удобную систему навигации, одинаково хорошо смотреться в разных браузерах (кроссбраузерность сайта) и на разных мониторах («жесткий» или «резиновый» дизайн). Шрифты хорошего с точки зрения юзабилити (удобства) сайта должны быть легко читаемы, то есть достаточного размера и удобного для глаз цвета. Трудно читать, например, желтый текст на белом фоне, или зеленый на красном. Оптимальным считается традиционное написание черных (темно-синих) букв на светлом фоне.

Конкурентоспособный сайт должен быть максимально информативен и полезен для посетителя. Вся информация, которая может понадобиться посетителю для совершения покупки или заказа услуги именно у Вас, должна быть на Вашем сайте. Опишите подробно предлагаемую продукцию, ее преимущества. Не забудьте указать свои контактные данные.

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

Подводя итог, хотелось бы отметить, что выживание сайта в конкурентной борьбе - дело, требующее немалых затрат времени, усилий и денег. Без четкого позиционирования сайта в той или иной рыночной нише и "весовой" категории все эти затраты могут оказаться напрасными. Только профессионалы, как, например, специалисты студии веб-дизайна WebStudio2U, могут, тщательно изучив рынок, Вашу целевую аудиторию и сайты конкурентов, помочь Вам получить прибыльный конкурентоспособный сайт.

...

Если Вас заинтересовал данный материал - ознакомьтесь с материалом источника по теме Дизайн сайтов. Конкурентоспособный сайт более детально

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

«Выживает только сильнейший» – это суровый закон дикой природы. В мире веб-сайтов этот закон также действует безотказно. Количество мест в ТОПе поисковой выдачи сильно ограничено у попасть туда очень непросто. Как же выжить сайту в жесткой конкурентной борьбе за клиента?

Для начала необходимо определиться, а кто же может являться конкурентом Вашего сайта?

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

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

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

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

Часто бывает, что, глядя на совершенно неприметный, на первый взгляд, дизайн этих сайтов, трудно понять, почему же он на вершине поисковой выдачи. Ведь, у Вашего сайта вроде бы и дизайн красивее (субъективно), и меню удобнее. Но они в ТОПе, а Вы – нет! Подробнее о том, что важно знать о конкурентах в сети, как собрать и с пользой применить сведения о сайтах-конкурентах, Вы узнаете, прочитав эту статью.

...

Если Вас заинтересовал данный материал - ознакомьтесь с материалом источника по теме Дизайн сайтов. Конкуренция сайтов более детально