Блог » Страница 43 » СОЗДАНИЕ САЙТОВ | Разработка сайтов

Валидный Youtube в DLE #

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

Теперь пойдет о мини хаке для ДЛЕ.

Откройте \engine\classes\parse.class.php на строчке где-то 540-овой найдите:

return '

';

и замените на

return '

';

Теперь последующее новое видео с ютуба будет отображаться валидно!

Блог » XHTML / Теги: валидация, DLE, data life / 12.05.10 / Комментировать [0]

Заказчик-исполнитель, жизненно! #

Блог » Видео / / 12.05.10 / Комментировать [0]

Пропорциональное масштабируемое видео и валидный youtube #

Пропорциональное масштабируемое реализовано за счет позиционирования блоков и процентных соотношений. Применимо на резиновых сайтах.
CSS

#containingBlock {
  width:50%;
}
.videoWrapper {
  position: relative;
  padding-bottom:56.25%;
  padding-top:25px;
  height:0;
  overflow:hidden;
}
.videoWrapper div,
.videoWrapper object {
  position:absolute;
  top:0;
  left:0;
  width: 100%;
  height:100%;
}

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

HTML

Following is the description of the video embeded in this document

This short clip is about YouTube widescreen formatting. It shows the two main formats (16:9, 4:3) and also explains the best way to create a Flash movie according to the new widescreen format.

...

Очень мне нравится девочка с видео демки -)

ДЕМО: https://veselov.sumy.ua/uploads/files/demo/003/index.html

CSS, XHTML / Теги: видео, youtube / 12.05.10 / Комментировать [0]

css map и jquery notes #

Более продвинутая реализация Image Map. Суть работы та же как и в предыдущем примере. Описывать метод не буду, проще посмотреть демку https://veselov.sumy.ua/uploads/files/demo/002/index.html

Но самая классная как по мне реализация это jquery notes. Красиво юзабельно, но яваскрипт тяжел.
demo: http://jquery-notes.rydygel.de/samples.php

CSS, XHTML / Теги: css, map, jquery, notes / 11.05.10 / Комментировать [0]

Image Maps c помощью спрайта #

Это один из простейших способов построения карты.

Заключается в смене позиционирования бекграунда при наведении на определенную зону картинки.
Недостаток большая картинка и неюзабильно.

CSS:

dd#monitorDef{ top: 65px; left: 114px; }
dd#monitorDef a{ position: absolute; width: 73px; height: 69px; text-decoration: none; }
dd#monitorDef a span{ display: none; }
dd#monitorDef a:hover{ position: absolute; background: transparent url(office.jpg) -109px -317px no-repeat; top: -10px; left: -5px; }

dd#monitorDef a:hover span{
display: block;
text-indent: 0;
vertical-align: top;
color: #000;
background-color: #F4F4F4;
font-weight: bold;
position: absolute;
border: 1px solid #BCBCBC;
bottom: 100%;
margin: 0;
padding: 5px;
width: 250%;
}

HTML:

1. Monitor: Here's my 17" Monitor. I wish I had an LCD!
2. Phone: Does this thing ever stop ringing?
3. PC Case: This is my crazy Linux box! Gotta love that Linux...
4. IBM ThinkPad: Here's my Linux notebook. Some crazy coding going on.
5. External Floppy Drive: Floppy Drive. Ancient... I know!

DEMO: https://veselov.sumy.ua/uploads/files/demo/001/index.html

CSS, XHTML / / 11.05.10 / Комментировать [0]

Желание верить -( #

Люди испытывают сильнейшее желание во что-нибудь верить. Желания часто порождают парадокс: чем больше вы за чем-нибудь гоняетесь, тем труднее оно дается в руки, ускользая; чем больше интереса вы выказываете к объекту желаний, тем сильнее он отталкивает от себя.

Задумайтесь, как бы вы себя начали вести, если бы узнали, что осталось жить 1 месяц…