Просто о создании сайтов и баннеров

Почему я не люблю разбираться в чужом коде

23.07.09    Разное

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

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

Читать дальше »

Метки: html, верстка, инфо, код

Простая анимация для сайта средствами CSS

22.07.09    Секреты верстки сайтов

Самые красивые и яркие анимационные ролики для веб-сайтов создаются, конечно же, с помощью технологий Adobe Flash и Microsoft Silverlight. Но далеко не всем веб-сайтам нужны дорогостоящие и трудоемкие анимационные шапки, а меню на flash еще и очень плохо индексируются. Уже никого не удивляют акционные баннеры, иконки или графические меню, которые могут слегка меняться при наведении на них указателя мыши.

Интерактивная анимация, которая состоит всего из двух кадров (активно/неактивно), имеет ряд преимуществ: она недорогая, легко создается, быстро загружается и при этом заметно оживляет сайт, делая его более дружественным для посетителя. Чаще всего такая двухкадровая анимация, реагирующая на действия пользователя, создается с помощью JavaScript или CSS. В этом уроке мы рассмотрим второй способ, т.к. анимация с помощью каскадных стилей имеет ряд преимуществ перед скриптовой анимацией.

Ярким примером использования возможностей CSS для реализации интерактивной двухкадровой анимации является сайт украинской художницы Елены Миросединой:

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

Бесплатно скачать коды урока интерактивной CSS-анимации

Читать дальше »

Метки: css, flash, html, JavaScript, Silverlight, анимация, браузер, верстка, иконка, класс, код, создание, стиль

Код CSS, который понимает только Internet Explorer

12.06.09    Секреты верстки сайтов

Браузер Internet Explorer не всегда утруждает себя соблюдением всех стандартов верстки W3C. В свое время это было «фишкой» Microsoft, которая пользовалась своим монопольным положением на рынке ПО, чтобы еще больше его упрочить. А до этого «вольное трактование» языка разметки помогло победить Netscape. Впрочем, речь в этой статье пойдет не о погибшем браузере и даже не о его победителях.

В результате отступления Майкрософта от некоторых стандартов HTML и CSS код может трактоваться по-разному браузером Internet Explorer и другими, «честными» браузерами (Firefox Mozilla, Opera, Safari и др.). Опытные веб-мастера и html-кодеры знают о нюансах создания качественного кроссбраузерного кода, но новички, у которых еще нет хорошего практического опыта верстки сайтов, часто набивают шишки и вспоминают родителей бывшего главы Microsoft. К сожалению, злость и обвинения – дело неконструктивное. Проблемы лучше решать, опираясь на опыт и шишки, желательно, чужие.

В этой статье я хотел бы рассказать об одной уловке при описании стилей CSS, позволяющей решить распространенную проблему: как сделать так, чтобы код верстки понимался только браузером Internet Explorer, но игнорировался всеми остальными «нормальными» браузерами. При этом JavaScript нам не понадобится, достаточно правок общего стиля CSS.

Читать дальше »

Метки: css, html, ie, Mozilla, браузер, верстка, код

Код для вставки Flash в текст или шаблон блога

17.01.09    Как сделать баннер

Казалось бы, тривиальная задача вставки flash-баннера или ролика в HTML-код своего сайта не заслуживает того, чтобы писать на эту тему целую статью. К сожалению, не все так просто. Существует множество вариантов кода для публикации Flash, при чем единственно правильного, однозначно понимаемого всеми браузерами и удовлетворяющего стандарты W3C, нет. И дело не только в том, что существует огромное количество вариантов того, в какой версии Flash создавался баннер, какие при этом использовались команды ActionScript, какой версией flash-плеера и в каком браузере будет просматриваться flash-анимация. Проблема еще и в том, что компания Microsoft при создании своего браузера Internet Explorer запретила реализовывать взаимодействие с интерактивным контентом, пока пользователь не активирует его сам. Примерно так же поступила и Opera. В результате появилось несколько десятков вариантов HTML-кода для вставки flash-роликов, у каждого из которого есть свои преимущества и недостатки.

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

Этот код HTML позволяет вставить на свою страницу баннер с именем banner_name.swf размером 240х350 и при этом достаточно flash-плеера 8й версии. Такой код генерировался средой разработки Macromedia Flash до выхода Adobe Flash 8.

Читать дальше »

Метки: Adobe, flash, html, баннер, вставка, код, публикация, флэш