MediaRitm » Web Development

Разработка сайтов на AJAX-технологиях

admin — Tue, 29 Dec 2009 07:05:36 +0000

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

Чтобы интернет-страница обновлялась, надо нажать кнопку F5 либо сочетание CTRL и F5. Можно обновить информацию с помощью специальной кнопки в меню на панели браузера. Но теперь есть другие механизмы. Изменение контента интернет-страницы без ее принудительной перезагрузки называется AJAX. Создание сайта с помощью AJAX позволяет самостоятельно догружать необходимые данные и информацию на страницу. Данная технология стала популярна в среде веб-программистов, когда IT-гигант Google использовал его при создании сайтов — почтовика Gmail и ресурса Google maps.

Создание сайтов на технологии AJAX

Название AJAX-технология впервые было использовано в 2005 году, в публикации Джеймса Гарретта под названием новый подход к веб-технологиям, хотя создание сайтов с принципом этого механизма был задействован еще в 1996 году в Internet Explorer. AJAX не является самостоятельным механизмом. Он базируется на использовании смежных механизмов и полагается на два элемента: элемент динамического обращения к серверу, не перезагружая страницу полностью, и использование DHTML для изменения запрашиваемой страницы.

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

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

Разработка сайтов с применением технологии AJAX сформировала принципиально новый подход к формированию динамических страниц. С точки зрения кодировки это не самый сложный язык, и он сильно перекликается с приложениями, с которыми работает. С точки зрения администратора сайта — он более легкий в обращении с базой данных SQL, не создает новых таблиц, съедает меньше трафика, обновляется быстрее. Создание сайта на AJAX дает больше зрительных эффектов, вряд ли простой пользователь будет считать время отклика и промежуток загрузки сайта, но упорная статистика говорит, что использование AJAX-технологии встречается в 70 % современных сайтов. Это говорит о том, что эта технология нашла свое применение и будет популярна еще очень долго.

Смотрите также:

CSS – азы правильной работы таблицами стилей

admin — Tue, 24 Nov 2009 21:44:45 +0000

Первый совет – не плодите много DIVов!

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

Не добавляйте лишние стили

А вы знаете правило бритвы Оккама? Если не обязательно добавлять еще один стиль, не добавляйте его. Если вы хотите добавить стиль, например цвет бэкграунда, но не уверены, нужно ли это, не добавляйте прежде чем не проверите – возможно он и без того наследуется этим элементом. А если вы уже добавили стиль в разных местах, подумайте: может достаточно и одного? Все это кажется неважным только до того момента, когда что-то идет не так и надо искать причину. И тогда свой же код 3-х дневной давности кажется нелогичным и запутанным.

Не злоупотребляйте “хаками” для IE

Не используйте хаки, пока не разобрались, что именно и почему идет не так. Сначала лучше попытаться сделать разметку так, чтобы она нормально отображалась и в правильных браузерах и в IE 6,7. Можно и пожертвовать незначительным элементом дизайна, чтобы не осложнять себе жизнь. Создание сайтов, работающих стабильно в разных браузерах, предполагает компромиссы.

Определяйте константы

В программировании есть такие понятия как константы, которые используются раз за разом в коде программы. В CSS констант не хватает, но можно попробовать восполнить этот недостаток. Для этого хорошо использовать комментарии. Классический пример – создание списка цветов, используемых на сайте. Это значит, что у вас перед глазами всегда есть номера основных цветов и это снижает риск выбрать какой-то близкий, но не точный цвет по ошибке. Также этот список помогает менять цвета при необходимости. Вот пример такого комментария:
* /* * 1 # Text: #333333 * 2 # h1,h2 #000066 * 3 # blue header #333399 * 4 # navigation #CCCCFF * 5 */

Используйте для форматирования текста: small, em, strong

Иногда хочется отформатировать определенным образом части текста или только пару слов в предложении. Не нужно придумывать новые классы и тем более заключать блоки текста в отдельные дивы. Для форматирования текста есть специально для этого предназначенные элементы разметки: strong, em, small. Также, их использование более оправдано с точки зрения сео т.к. словам в тегах выделения присваивается несколько больший вес поисковиками. Главное тут не переусердствовать. Но если продвижение сайтов происходит в условиях серьезной конкуренции, то почему не использовать и такую маленькую возможность опередить конкурентов?

Используйте логичные названия

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

Нужно избегать называть классы и id в зависимости от их цвета, расположения и размера т.е. всего того, что называется презентацией. Иначе то, что сегодня было #right-black, завтра может уже превратиться в #left-white. Т.е. вы изменили расположение элемента на странице и его цвет, а имя, присвоенное #id осталось прежним и это, мягко говоря, нелогично.

Больше используйте групповые селекторы

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

Извлекайте пользу из каскадной природы CSS

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

Смотрите также:

Создание сайта визитки – от чего зависят сроки?

admin — Wed, 09 Sep 2009 18:44:54 +0000

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

Шаблон для сайта-визитки

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

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

Дизайн для сайта-визитки

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

Готовый шаблон для сайта

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

Смотрите также:

Важность SEO на этапе создания сайта

admin — Fri, 05 Jun 2009 14:31:41 +0000

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

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

1. Работа по формированию структуры страниц сайта

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

2. Работы по формированию и оптимизации структуры интернет-сайта

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

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

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

3. Содержание веб-ресурса.

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

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

Смотрите также:

Как создать интернет-магазин – SEO советы

admin — Tue, 26 May 2009 17:06:54 +0000

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

Зародившись как средство обмена научной информацией, в 21 веке интернет представляет собой универсальный и общедоступный инструмент коммуникаций, содержащий в своей видимой части несколько сот миллиардов документов и невидимой (еще не найденная краулерами ПС), которая может содержать до пол триллиона файлов. На максимальной скорости, модуль спайдера, такого крупного поисковика как Google способен сканировать до 100 страниц в секунду, но даже таких возможностей не достаточно для того, чтобы охватить своей базой всю Сеть. Но даже для реализации такой задачи масштабирования, корпорация Google вынуждена ежедневно увеличивать свои датацентры на 50 серверов.

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

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

Основная проблема в создании Интернет-магазинов, которые рассчитаны на большой каталог продукции и простоту использования заключается в том, что динамически формируемое содержание, основанное на реализации таких технологий, как jsp, языков программирования php, технологий предварительной обработки asp, затрудняет индексацию страниц документа поисковыми машинами. Универсальный локатор ресурса (url) динамических сайтов содержит в себе такие переменные, как ?,!=, +, $, &, %. Такие параметры являются для робота поисковой системы неизвестными, что также ухудшает индексацию данных страниц. В случае желания владельца отслеживать статистику посещения разделов Интернет-магазина большинство разработчиков применяют возможности идентификации сессий, но в данном случае мы сталкиваемся с той проблемой, что интеллектуальный агент поисковой системы (спайдер) закачивая страницы сайта, использующих идентификацию сессий при каждой загрузке одной и той же страницы имеет разный адрес, но идентичное содержание. Таким образом, создание интернет-магазина требует учета всех данных аспектов.

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