Блог web-разработчика | HTML+CSS, PHP, MySQL, JavaScript/jQuery

Очередная вкусняшка в CSS3 — свойство box-shadow, благодаря которому мы можем настроить отбрасываемую и внутреннюю тень для блочных элементов, не прибегаю к гуглению и поиску “1000 и 1 способ отбросить тень”. Я не буду вдаваться в подробности кроссбраузерности данного атрибута, лишь попытаюсь показать как этим пользоваться.
(далее…)

, Скрыть

Майкрософт уже сейчас предлагает скачать и установить новый Internet Explorer 9 с частичной поддержкой HTML5. Казалось бы мир стал лучше и майкрософт идет в ногу со временем, но, к сожалению, в сети еще преобладают пользователи со старыми версиями браузера от мелкомягких, в том числе бессмертный Internet Explorer 6.

Поскольку технологии не стоят на месте и консорциум w3c “призвал” разработчиков уже сейчас начать использование HTML5, для IE, который тупо игнорирует применение стилей к новым тегам HTML5 появился “хороший” хак – минискрипт HTML5 shiv.

Для того, чтобы приучить Internet Explorer понимать новый HTML5 необходимо всего лишь подключить на странице скрипт:

<!--[if IE]>
<script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->

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

<!--[if IE]>
<script>
  document.createElement('header');
  document.createElement('nav');
  document.createElement('section');
  document.createElement('article');
  document.createElement('aside');
  document.createElement('footer');
</script>
<![endif]-->

PS: поскольку это пока единственный скрипт, позволяющий IE понимать новый синтаксис, и многие разработчики включают в код ссылку на googlecode, велика вероятность что скрипт уже закэширован в браузере пользователя.

, Скрыть

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

(далее…)

Скрыть

В предыдущем посте Я рассказал о способе верстки вкладок(табов). Сейчас же Я хочу показать как реализовать переключение между вкладками при помощи jQuery, чтобы получилось вот так:


(далее…)

, , Скрыть

В дебрях интернет можно встретить множество разнообразных меню – от простых списков и до различного рода сложноструктурированных flash-меню. Быстрыми темпами сокращается количество браузеров не соблюдающие стандарты w3c (да-да, Я про IE6), браузеры становятся более безопасными, тем самым всё меньшее количество пользователей отключают JavaScript в своих браузерах. Благодаря этому, чуть ли не каждый веб-разработчик старается “нашпиговать” своё меню JavaScript’овыми анимациями, а некоторые даже забывают, что данное можно было реализовать на чистом HTML+CSS, не нагружаю страницу лишним программным кодом. В этом посте хочу описать процесс создания меню аля “Вкладки”, без JavaScripta на чистом HTML+CSS. Вот такой результат получился к концу данной публикации:


(далее…)

, , Скрыть

Июль/10

9

Проверка PR всех страниц сайта

Так сложилось, что помимо верстки и программирования мне приходиться продвигать свои сайты, так сказать заниматься SEO. Я думаю многие веб-мастера, а не только Я, занимаются параллельно абсолютно разными вещами: дизайн, верстка, программирование, SEO…

Это было небольшое вступление-отступление от темы поста =) Ну так вот, перейду к самой теме. Как и многим оптимизаторам мне сегодня понадобилось проверить Page Rank всех страниц одного старенького заброшеного мною сайта. Как наверно знаете, большинство сервисов показывают PR только индексной страницы, т.е. PR внутренних с помощью них не узнать. Сайт небольшой, около 100 страниц, голый HTML+CSS.. но перебирать в ручную каждую страницу, забиваю url в тот же be1.ru, пусть даже страниц не так много, но жуть как не удобно..

На помощь пришел удобный онлайн сервис для массовой проверки PR http://www.slavssoft.ru/developer/?page=site_pr . Как выяснилось для массовой проверки ему нужен всего лишь sitemap проверяемого сайта.

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

Скрыть

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

(далее…)

, , Скрыть

Апр/10

6

Эмуляторы Internet Explorer


Каждый верстальщик поздно или рано сталкивается с проблемой проверки на кроссбраузерность в разных версиях Internet Explorer’а. Так как Windows не дает возможности установки нескольких версий данного браузера одновременно, приходилось “извращаться”: кто-то тестировал на разных компах, кто-то устанавливал две ОС с разными версиями Explorer’а на один комп, более умные пользовались виртуальными машинами. Но как бы мы не извращались – это всегда оставалось “извращением” и многие желали упростить процесс проверки кроссбраузерности.
(далее…)

, Скрыть

Сложные горизонтальные  меню
Это вторая часть из серии постов на тему “Меню для сайта”. Первую часть можно почитать здесь. В этой части пойдет речь о сложных горизонтальных меню, то есть когда один элемент меню имеет свои подменю. Примером такого меню может быть стандартное меню, которое используется в окнах операционных систем Windows (Файл, Правка, Вид…).
(далее…)

, , Скрыть

Март/10

28

Меню для сайта. Часть I.

Меню при помощи CSS
Современные сайты пестрят обилием различного рода навигационных панелей, меню. Если поискать в сети, то можно найти онлайн сервисы по созданию меню на любой вкус, но этим постом мне хотелось бы начать серию публикаций и показать как можно сделать меню “своими руками”, используя современные методы CSS и JavaScript. В этой части покажу примеры простых горизонтальных и вертикальных меню.
(далее…)

, , Скрыть

« Следующие записи

Следующая страница »

Найти!

Дизайн devolux

Публикация материлов с сайта только с указанием активной ссылки на источник. web4develop.ru. 2010 год.