Доступ к Flickr посредством W3C-чистого Flickr badge

Перевод статьи Вирл Питерс (Veerle Pieters)

Оригинал доступен на сайте Veerle.duoh.com

Некоторым из вас, возможно, интересно, как осуществляется трансляция фотографий с сервиса Flickr на мой блог. Я использую HTML-версию Flickr-пропуска (“Flickr badge”: http://www.flickr.com/badge_new.gne). После завершения пяти непродолжительных этапов вы получите код, который нужно будет внедрить в ваш сайт. Так как мы хотим оставить сайт семантически “чистым” (придерживаясь стандартов W3C), то должны сделать “ уборку” – причем в первую очередь. Стили Flickr, которые этот фотосервис предлагает использовать, можно проигнорировать: мы будем оформлять все с помощью наших, внешних стилей…

По сути, единственное, что мне нужно из кода Flickr — это скрипт:

<script type=“text/javascript” 
src=“http://www.flickr.com/badge_code_v2.gne?
count=3&display=latest&size=s&layout=x&
source=user&user=76746199%40N00”>
</script>

Даже эту строку кода необходимо обновить. Амперсанды должны быть изменены на &amp, чтобы убедиться, что это действительно XHTML-код. Далее мне надо изменить “count=3” на “ count=4”, так как мне нужны 4-х фотографии для отображения. Впрочем, вы можете самостоятельно выбрать это количество.

Код скрипта

Это сценарий, который использую я:

<script type=“text/javascript” src=
  “http://www.flickr.com/badge_code_v2.gne?count=4&display=latest&size=
  s&layout=x&source=user&user=76746199%40N00”>
  </script>

XHTML-код

Следующий шаг — добавление сценария в XHTML-код страницы:

<div id="flickr">
<h2>Flickrness</h2>
<script type="text/javascript" 
src="http://www.flickr.com/badge_code_v2.gne?count=4&amp;...">
</script>
</div>
        

CSS-код

Далее мы оформим этот код посредством CSS-стилей. Я начала с контейнера # flickr div:

#flickr {
background:url(./graphics/flickerness.gif) no-repeat;
width:214px;
height:154px;
padding:14px 0 0 50px;
margin-top:40px;
}

Текст flickrness’а расположен в качестве фонового изображения. Мы зададим точную высоту, точную ширину, обрамление и отступы.

#flickr h2 {
position:absolute;
left:-300px;
top:-300px;
}
    

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

#flickr img {
  float:left;
  margin:0 0px 8px 8px;
  background:#3f4e4e;
  padding:4px;
  width:62px;
  height:62px;
  }
               

Размеры изображения также определяются в CSS. Граница вокруг картинки – это четыре пикселя + заданный цвет фона. Пространство между изображениями создается с помощью левого и нижнего краев из восьми пикселей. Я использую float:left, для размещения картинки с левой стороны.

Вот лишь малая часть того, что я реализовала на своем блоге. Обещаю, что вскоре расскажу об этом более подробно. Так что следите за обновлениями.

Пожалуйста, оцените статью: 
No votes yet

Добавить комментарий

Не нашли ответ на свой вопрос? Возможно, вы найдете решение проблемы на нашем канале в Youtube! Здесь мы собрали небольшие, но эффективные инструкции. Смотрите и подписывайтесь на наш youtube-канал!

Смотреть на Youtube

Помощь: задайте вопрос

Вы робот? Оставьте это поле пустым, если вы не робот, а человек

Руководства и обзоры

1 Что нужно восстановить?

Видео

MP4, AVI и HD видео хранятся на телефоне и / или по ошибке удаляются вместе с фотографиями и другими медиафайлами.

Контакты

Номера телефонов друзей и знакомых из приложения «Контакты Android», журналы вызовов; Восстановление SIM-карты.

Фото

Удалены файлы JPG / PNG из Галереи Android; фото, загруженные на мобильный, файлы повреждены после восстановления.

Смс и сообщения

Чаты WhatsApp и Facebook, текстовые сообщения в соцсетях, информация на сим-карте

2 Где пропали файлы?

На sd-карте

Фотографии и документы хранятся на SD-картах. Часто на них случайно удаляются файлы

На телефоне

Программы для восстановления не распознают внутреннее хранилище телефона как диск, но есть другие решения.

На USB флешке

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

На HDD или SSD

Несмотря на то, что настольные платформы становятся все менее популярными, проблема потери файлов всегда оставалась.