29.3.09

Blogger: А как Ваш блог выглядит в браузере IE8?

25 comments

И вечный бой!
Покой нам только снится...


Всем доброго времени суток! Пожалуйста, не пугайтесь, речь всего лишь пойдет о так называемой войне браузеров. Страшном кошмарном сне настоящих веб-дизанеров, а что до нас - простых блоггеров, по большому счету мы её не касаемся используя в основном уже кем-то созданные шаблоны для наших блогов. И тем не менее...

На ратное поле Войны браузеров вышел новый игрок - Internet Explorer 8 (IE 8). Кайл будучи очень креативным человеком тут же его к себе на ноутбук и устновил, в основном в ознакомительных целях. Очень меня там порадовала опция совместимости с Интернет Эксплорером 7. Т.е. если вы зашли на сайт, а его сайт т.е. перекосило нажимаем кнопочку, глядишь и все выравнивается. Наш сайт "Windows to Russia - The Russian Blog!" почти не перекосило, ну, так чуть-чуть, в одном месте только. И стал Кайл разбираться как сделать, чтобы сайт в IE8 выглядел также как в IE7, т.е. неперекошенным. И дошел Кайл до вот этой простой строчки:
<meta content='IE=EmulateIE7' http-equiv='X-UA-Compatible'/>

А ставить её надо в ПОСЛЕ строчки <head>

А знаете ли вы, что в интернете есть сервис, где можно проверить как ваш блог будет выглядеть на той или иной операционной системе в том или ином браузере и даже в том или этом разрешении?

Я имею в виду, конечно, BrowserShots.

Работать, с сервисом достаточно просто. Вводим адрес блога и ждем... иногда долго, помним, что они страничка с результатами запроса действительна только 30 минут, поэтому пока ждем время от времени нажимаем на кнопочку Extend

Желающие могут посмотреть скриншоты нашей работы с этим сервисом.

1) Стартуем запрос, убираем половину проставленных по умолчанию галочек, кстати, можно также заказать скриншоты блога в различных разрешениях:

Blogger: Заказываем скриншоты своего блога

2) Ждем, появляются первые скриншоты, можно здесь можно нажать кнопку Extend (увеличит время хранения страницы), можно посмотреть, расписание по которому будут делаться различные скриншоты на различных системах и выгрузить архив с уже полученными скриншотами к себе на компьютер.

Blogger: Смотрим на свой блог на разных браузерах

3) А так выглядит расписание производства скриншотов:

Blogger: Расписание производства скриншотов

4) Ой, мамочка! А что ЭТО?

Blogger: Один из скриншотов

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

Эта картинка показала, что фон в блоге Кайла остался от предыдущего цветового решения.. Бывает - теперь подправили ;).

В этой статье мы показываем для желающих картинки с помощью javascript'а описанного в статье: Blogger: Расширяемые Посты на JavaScript!.

Из новостей одной строкой: Прокофьевна (Удалили нечаянно блог?) открыла, что Blogger стал более заботливым. Теперь если заглянуть на Панель управления можно заметить, что Blogger предлагает возможность восстановить недавно удаленные блоги.

Правда, мой с такими трудами восстановленный блог "Russian Video from Russia!" они восстановить не предложили (давно же я его так неудачно удалила). А эпопею как мы его удачно восстановили (собственно после этого и пришла идея завести этот блог), можно прочитать здесь: Как восстановить удаленный блог на BLOGSPOT(Blogger)?

На этой оптимистичной ноте, что все меняется к лучшему по крайней мере у нас на Blogger'e я откланиваюсь.

Всем удачи и счастья!
СветаBlogger: кошка.

Комментарии и вопросы более чем приветствуются,
нужна помощь - поможем! Читать дальше...

19.3.09

Blogger: Гугл и Яндекс проиндексировали все расширения в сообщении!

29 comments


Здравствуйте! Как вы наверное догадались в нашем маленьком состязании, которое состоялось вчера, Google вышел абсолютным победителем! Он нашел все три слова из трех предложенных!

Напомню еще раз об условиях состязания: В своей прошлой статье (Blogger: Индексирует ли Google спрятанное по кат?) я загадала три слова, которые никогда прежде не использовала в этом блоге и может быть никогда использовать не буду. Прятала я различные слова под кат различными способами и Google нашел и проиндексировал их все! Проверила я это с помощью запросов к Google использовала в запросах слова света кайл и искомое слово. Предъявляю результаты.

1) Слово на этой картинке было спрятано под недружественный JavaScript-кат (Blogger: Расширяемые Посты на JavaScript):
Blogger Experiment: Google found word #1
2) Слово на этой картинке было спрятано под дружественный JavaScript-кат (Blogger: Расширяемые Посты на JavaScript):
Blogger Experiment: Google found word #2
3) Слово на этой картинке было спрятано под кат с переадресацией на страницу поста (Blogger: Улучшенные расширяемые сообщения (Убираем под кат)):
Blogger Experiment: Google found word #3
Выводы и наблюдения:


1) Эксперимент закончился очень удачно. Кстати, Яндекс тоже нашел все три слова, но чтобы это проверить мне пришлось в запросах поменять слово света на слово blogger (все-таки о нем я в основном и пишу).

2) Не обошлось и без небольшого казуса: При первом сохранении статьи еще с английским названием (зачем я это делаю можно прочитать здесь: Blogger-SEO: Меняем заголовок статьи!) я немножко ошиблась в javascript'е - ну, как же такой гуру должен писать все по памяти lol (не взяла имя переменной в апострофы) и Google налету (не успела я даже сменить заголовок) проиндексировал блог и не увидел там под катами ничего, хотя все слова там были.. но каты действительно не работали - вот он их и не проиндексировал. Заглянул ко мне потом часа через 3 и вот тогда уже я с облегчением увидела, что все слова он нашел.

3) Про "недружественный" JavaScript-кат. Я рада, что Google и Яндекс все внутри проиндексировали. Google-Reader тоже показывает все спрятанные куски, а вот при рассылке по email'у содержимое из-под недружественного JavaScript-ката показано не было так же как и в Яндекс ленте (хотя в исходном коде странице оно было, просто не отображалось), все остальное содержимое было показано целиком.

4) Кат с переадресацией на страницу поста в выдаче Google получил целых две страницы в выдаче: главную страницу блога и страницу самого поста.

На этом мои наблюдения заканчиваются. Если вы что-то еще заметили, буду очень рада если вы с нами поделитесь.

И на последок: Заглавная картинка этой статьи заслуживает отдельного упоминания. Уже несколько лет компания Google проводит весной конкурс "Doodle 4 Google" (Намалюй для Гугла). И вот на этой страничке сверху мы видим рисунок прошлогодней победительницы этого конкурса - 12-летней Grace Moon школьницы из Калифорнии (жалко, что они проводят этот конкурс только для американских детишек). Страничка конкурса находится по адресу: http://www.google.com/doodle4google, а там есть интересное прошлогоднее видео, показывающее как это все у них проходило.

Всем удачи и весеннего настроения!
Света
Blogger: кошка.

Комментарии и вопросы более чем приветствуются,
нужна помощь - поможем! Читать дальше...

18.3.09

Blogger: Индексирует ли Google спрятанное по кат?

Здравствуйте! Этот пост является чисто экспериментальным. Мы уже много разговаривали о расширяемых сообщениях:
1) Blogger: Улучшенные расширяемые сообщения (Убираем под кат)!
2) Blogger: Расширяемые Посты на JavaScript!

и даже собираемся этот разговор продолжить.

А вот вчера Алексей aka Бродячий Проповедник ("Путь Бродячего Проповедника")... Кстати, а вы знаете что значит aka? Я вот узнала несколько месяцев назад aka - это английская аббревиатура для also known as, что можно перевести как также известный как. Да, так о Бродячем Проповеднике, вчера он задал в комментарии к предыдущей статье архиважный вопрос: Интересно, а индексирует ли Google, то что мы прячем под катом?

Вопрос интересный и на мой взгляд очень важный, а то так спрячешь что-нибудь, а потом никто никогда этого уже не найдет. Так что проведем эксперимент. А чтобы никто не помешал уважаемому Google'у думать, комментарии для этой статьи я убрала. (Результат эксперимента смотрим здесь.)

Эксперимент:

В этой статье будет использовано 3 способа прятать часть контента (содержимого статьи) под катом. Каждая часть будет содержать свое уникальное слово, по которому мы в дальнейшем решать проиндексировал ли Google этот кусок поста.

1) Недружественный JavaScript-кат. Как вы помните этот JavaScript-кат делает информацию недоступной для людей без поддержки javascript, для RSS-ридера и теперь посмотрим как к ней отнесется Google. Итак, смотрим первое слово - кликаем сюда (кстати, эта псевдоссылка разворачивает и сворачивает спрятанную информацию):


2) Дружественный JavaScript-кат. С ним на самом деле уже все ясно, он дружественный для читателей с выключенным javascript'ом, для RSS-ридера и вчера я установила, что Google индексирует заключенную под такой кат информацию. Но для полноты картины спрячу и здесь чего-нибудь. Кликаем сюда чтобы посмотреть, только Google'у не подсказывайте:

Ну, что же... если мы так пошли по биологической тематике. Вторым нашим словом будет: Слон. И поговорим мы с вами о силе привычки. Слоны совершено восхитительные животные: умные, сильные, добрые (так по крайней мере считается) почти что такие же замечательные животные как и Д... (ой, молчать же надо), ну как те что мы обсуждали в пункте 1). Во как! Я сказала, а вы сразу поняли, ну если у вас конечно javascript в браузере работает (или если вы очень догадливы).

А про силу привычки я продолжу. Конечно, людям не просто управлять этими могучими животными. Поэтому они их воспитывают так: берут тоненькую веревочку и пока слоненок еще маленький привязывают его к колышку. Слоненок может быть и рад бы был убежать, побегать с друзьями на воле или посмотреть чем там родители занимаются, но он не может - тоненький шнурок крепко держит его на привязи и сил у него еще недостаточно чтобы порвать этот шнурок. Теперь представьте себе взрослого слона, который смирно стоит привязанный все тем же тоненьким шнурком, этот слон вырос из того самого слоненка, которого привязывали время от времени... и слон не знает, что он уже изменился и была бы его воля никакой шнурок не смог бы его удержать. Но он этого не знает... А вы?

Это была притча не знаю имеет ли она чего-нибудь общее с действительностью, а если вам действительно интересно знать как учат слонов кликните по этой картинке:


3) Кат с переадресацией на страницу поста. Пишется на CSS с условием.(Если вы находитесь на странице сообщения ссылку Читать далее вы не увидите, чтобы её увидеть найдите этот пост, например, в рубрике: Расширяемые сообщения).
О чем бы нам с вами еще поговорить... Может быть об Обезьянах. Итак, Google, внимание - если ты, конечно, читаешь эти строки. Наше третье слово: Обезьяна. Только не спрашивайте меня почему обезьяна. И про обезьяну как-то ничего в голову не приходит, вот беда-то... Ну, ладно, будет вам и про обезьяну притча:

Случилось как-то раз большое наводнение, и застигло оно обезьяну и рыбу.

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

С самыми добрыми намерениями обезьяна наклонилась и вынула рыбу из воды. Результат был печален. (Д. Адамс)


Притча была найдена на сайте "Самые разные притчи", можете зайти полюбопытствовать, а я буду ждать результатов эксперимента, о которых доложу вам в ближайшее время!

Всем здоровья и удачи!
СветаBlogger: кошка.

Комментарии и вопросы более чем приветствуются,
нужна помощь - поможем!
Читать дальше...

17.3.09

Blogger: Расширяемые Посты на JavaScript!

79 comments

Шапка невидимка для BloggerЛюблю искать к статьям подходящие картинки. Вот сегодня узнала, что оказывается "Возможность существования плаща-невидимки сведена к математической теореме."
Шапка невидимка для вашего блога!

Здравствуйте! Сегодня мы продолжим беседу о расширяемых сообщениях в блоге. Мы уже с вами поговорили первом способе реализации "расширяемых сообщений" в предыдущем посте (Blogger: Улучшенные расширяемые сообщения [Убираем под кат]). Пост пользовался заслуженной популярностью, хотя и не у всех сразу все получилось, так что пришлось написать еще один пост о структуре языка HTML (Blogger: Структура языка HTML [приложение к статье о расширяемых сообщениях]) после чего стало гораздо легче.

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

Сегодня я опишу для вас как создать реально расширяемый пост. Т.е. пост который при щелчке по ссылке (псевдоссылке) разворачивался и сворачивался.

Покажу работу псевдоссылки на примере:

Нажмите на эту ссылку - вылетит птичка!

Все для Blogger(а):Птичка.

Что, это не птичка... это лошадка?... - Ну, изините, а я так старалась... :(
А может вы тогда попробуете нажать эту ссылку

Все для Blogger(а):Птичка.

Птичка! Даже целых ДВЕ!!! - Я же обещала! :)))

Теперь мы увидели как это работает и можно заняться javascript'ом, с помощью которого это все было реализовано. Итак, закрываем зоопарк - кликаем по этой ссылке (кстати, картинки для примера были взяты с сайта Glitter Graphics).

Пример, надеюсь, посмотрели. Мою аналогия про Шапку-Невидимку поняли. А я продолжаю...

Таким же образом можно, на самом деле, реализовывать, что угодно. Вот на своем видеосайте Russian Video from Russia я таким образом прячу видео, когда публикую полнометражные фильмы в Ютюб'овской 10-минутной нарезке (а кусочками, кстати, смотреть удобнее). А еще таким образом можно просто расширяемые посты делать, расширяемые списки и т.д.

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

Метод состоит из трех частей:

1) JavaScript функция описание которой мы вставляем ПЕРЕД </head> в Нtml коде нашего макета.

<script type='text/javascript'>
function displ(nnn) {
if (document.getElementById(nnn).style.display == 'none')
{document.getElementById(nnn).style.display = 'block'}
else {document.getElementById(nnn).style.display = 'none'}
}</script>
Функция displ очень простенькая. На входе имя элемента - ну, вот того самого контейнера (коробочки) про которые я рассказывала в заметке о Структуре языка HTML [приложение к статье о расширяемых сообщениях]. И занимается функция вот чем - если на момент обращения к функции элемент был спрятан, то элемент становится видимым, а если элемент был видимым он прячется.

Вторая и третья части метода описываются в самом сообщении.

При редактировании сообщения переходим из режима Создать в режим Изменить Html.

2) Сначала, создаем псевдоссылку она очень похожа на обычную (Blogger: Начала HTML - Ссылки) с единственной разницей вместо указания адреса, куда мы хотим отправить нашего читателя, мы указываем имя функции в нашем случае displ и параметр имя элемента.

Такая псевдоссылка может выглядеть так:

<a href="javascript:displ('var1603093')" title="Читать ОБЯЗАТЕЛЬНО!">Подробности здесь:</a>
Т.е. смотрите в href мы говорим, что будет выполняться javascript функция с именем displ, а параметр у этой функции будет переменная с именем var1603093 Именем переменной может быть любым сочетанием цифр и латинских букв, начинающееся с буквы и оно должно быть уникально в вашем блоге. Я даю название переменным очень простым образом сначала пишу var а потом к ним приписываю дату статьи и номер скрываемого элемента в статье: 1 для первого элемента статьи, который я хочу спрятать, 2 для следующего элемента, который будет спрятан и т.д.

3) Теперь выделяем кусок нашего поста, который для начала мы хотим скрыть, а потом показать при щелчке по ссылке.

В начале куска вставляем следующий код:
<span id="var1603093" style="display: none;">

а заканчиваем спрятанный кусок разумеется вот этим:
</span>

Небольшие пояснения: Кусок нашей статьи заключаем внутри блочного элемента span предназначенного для выделения фрагмента документа с целью изменения его (этого фрагмента свойств). Вот мы его свойства и меняем - делаем фрагмент изначально невидимым и присваиваем ему имя (в данном случае var1603093).

Постойте, не торопитесь еще копировать... Послушайте - почитайте еще немного мои лирические отступления. Код я этот написала довольно давно, когда только стала изучать javascript. И всем он был хорош и замечателен... вот только одна мысль мне не давала покоя, что увидят люди, которые по тем или иным причинам отключили у себя в браузере javascript. А ничего они не увидят! И что же делать - считать если отключили javascript, то сами виноваты... Не хорошо - хотя все люди которые используют подобный метод, похоже так и считаю (т.е. я ни разу еще не видела код, который бы позволял людям с отключенным javascript прочесть весь текст). Последние две недели я особенно плотно работала над этой проблемой (обещала же написать этот пост, а публиковать несовершеннй код я не могла). И, наконец, пару дней назад нашла совершенно очевидный результат. Описания span в пункте 3) мы будем прятать внутри javascript'а. Тогда если у человека включен javascript у него в статье будут стоять соответствующий span и часть статьи будет изначально спрятана, а появляться будет по клику по псевдоссылке, а если человек выключил javascript тогда описание элемента span со свойством display:none не появится в его статье и стало быть он увидит наш пост со всеми деталями.

Возможно, некоторым покажутся мои рассуждения никому не нужной филантропией, но я позволю с этим поспорить. Люди занимающиеся поисковой оптимизацией знают, что поисковые роботы любят сайты сделанные для людей! И если пригласить поисковый робот на страничку в которой часть текста изначально скрыта под грифом display:none т.е. не показывать, то он (поисковый робот ваш спрятанный фрагмент и индексировать не будет), а если описание span display:none поместить внутрь javascript, то он проигнорирует этот span, зато нормально проиндексирует изначально спрятанный кусок.

Т.е. в результате небольшого усилия мы получили код: дружественный для читателя, для поисковых роботов и для RSS-ридера. Наконец, Алиса ("Кошка у камелька"), я поняла слова о недружественности убирания под кат для RSS-ридоров. Этот способ получился дружественным! ;)

Теперь показываю весь код для пункта 2) Действительно, если у читателя отключен javascript и от него мы ничего прятать не будем, хорошо бы спрятать нашу псевдоссылку (Но у меня не получилось, так что оставляем как есть... и ничего страшного если читатель у видит фразу что "Подробности ниже"). Так что код остался без изменения:

<a href="javascript:displ('var1603093')" title="Читать ОБЯЗАТЕЛЬНО!">Подробности ниже:</a>
и весь код для пункта 3)

Этот код мы ставим перед началом спрятанного фрагмента:
<script type="text/javascript"> document.write('<span id="var1603093" style="display: none;">');</script>
А этот код мы ставим в конце спрятанного фрагмента:
<script> document.write('</span>');</script>
Ну, вот этот код вы уже можете использовать, только не забывайте менять переменные. Имя переменной в псевдоссылке должно быть уникально и совпадать с именем id в span, которым она управляет.

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


Бороться с этим просто: Ставим галочку на "Не показывать ошибки HTML для тела этого сообщения".

И напоследок кликаем сюда.

Всем здоровья и счастья!
Света
Blogger: кошка.

Комментарии и вопросы более чем приветствуются,
нужна помощь - поможем! Читать дальше...

8.3.09

Blogger: Где взять и как вставить музыку в блог.

74 comments

Поздравляем с 8 Марта!

Здоровья, Счастья, Любви и Удачи ВСЕМ! Милым Дамам потому что это наш праздник и Верным Рыцарям потому что от них в нашей жизни зависит так много...

Здесь мы приготовили небольшой подарок для всех наших читателей! Загляните - не пожалеете!!!

[1.06.2013 Внимание код аудиоплейера для блогов изменен! Пожалуйста, измените его и в ваших блогах...]
Сегодня я отвечу на вопрос о том как я вставляю аудио в свой блог. В блоге IvanaXP (Я блоггер!) мы это уже обсуждали, в статье "Простой mp3 плеер для блога" он рассказал о маленьком симпатичном плейере основанном на javascript.


Я же традиционно пользуюсь вот таким flash-плейером который храню по адресу: http://blogger4you.ru/blogger4you/audio/player.swf а на сайте или в блоге, куда я хочу вставить музыку я вставляю вот такой код:
<object id="audioplayer1" data="http://blogger4you.ru/blogger4you/audio/player.swf" wmode="transparent" type="application/x-shockwave-flash" width="180" height="16"> <param value="http://blogger4you.ru/blogger4you/audio/player.swf" name="movie"> <param value="playerID=1&amp;bg=0x67452E&amp;leftbg=0xB3B3B3&amp;lefticon=0xoooooo&amp;rightbg=0x67452E&amp;rightbghover=0x999999&amp;rightcon=0xoooooo&amp;righticonhover=0xffffff&amp;text=0x666666&amp;slider=0x8CA4C0&amp;track=0x8CA4C0&amp;border=0x666666&amp;loader=0x9FFFB8&amp;loop=no&amp;autostart=no&amp;soundFile=http://ЭТО ССЫЛКА НА MP3-ФАЙЛ КОТОРЫЙ МЫ ХОТИМ ПРОИГРЫВАТЬ&amp;" name="FlashVars"> <param value="high" name="quality"> <param value="false" name="menu"> <param value="transparent" name="wmode"> </object>
Понятно, что в этот код надо вставить ссылку на mp3-файл. Какие еще параметры можно поменять: Ширину (width) и высоту (heigth) - Внимание! их можно менять только сохраняя пропорции. И разумеется все цвета. Цвета здесь записаны в виде 0xNNNNNN где NNNNNN - это шестнацатеричная запись цвета (О цветах и кодах для них мы говорили, когда готовили краски для раскраски). Очень важные параметры: loop=no и autostart=no, говорят сами за себя.
И напоследок в качестве еще одного подарка, я расскажу где можно найти музыку в интернете. Я использую поисковую систему http://tagoo.ru/ или http://poiskm.com/. (Для экспертов: взять ссылку на понравившуюся вам найденную музыку - это дело техники. Я выделяю фрагмент страницы с плейером, который играет понравившуюся мне музыку, прошу браузер показать мне исходный текст выделенного кода и в нем ищу ссылку на mp3).
Всем и особенно Милым Дамам - Здоровья, Радости и Счастья! Света и Кайл Комментарии и вопросы более чем приветствуются, нужна помощь - поможем! Читать дальше...

1.3.09

Blogger: Как опубликовать презентацию (pps/ppt) в интернете?

42 comments

Честита Баба Марта!

Поздравляю Всех с Наступление Весны!
Здоровья, Счастья и Любви!


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

Когда я думаю о весне, сердце радостно сжимается в предвкушении радости и света. Каждая весна это рождении чего-то нового, необычного:



Возможно, многие из вас видели, а некоторые даже умеют создавать эти невероятно красивые презентации использую продукт Microsoft Office PowerPoint. Многие пользователи интернета пересылают друг другу по email эти pps или ppt файлы. И вот по заданию Челиты, которая сейчас начала новый блог: Мир прекрасен , посмотри..., и у которой в запасе всегда невероятное количество слайд-шоу(презентаций), которые она всегда щедро рассылает своим друзьям (эта презентация, кстати, тоже из её коллекции), а теперь еще начала публиковать в новом блоге, я провела всестороннее исследование вопроса, как можно размещать презентации в блоге... и вчера, наконец, обнаружила идеальный вариант! Это сервис, на котором презентации можно закачивать, хранить и включать в свои посты. Сервис расположен по адресу: http://www.slideboom.com сервис на английском, но все очень понятно. Покажу в стиле комикса:

1) Регистрируемся так:



дожидаемся email и подтверждаем регистрацию.

2) Закачиваем презентацию. Два обязательных поля Title/Название и Topic/Рубрика. Нажимаем Submit:



3) Любуемся и берем Embeded code, чтобы опубликовать в блоге:



Условия использование очень демократичные, каждый из нас бесплатно может закачать до 100 презентаций! Подробности, что можно получить за 99$ в год читаем здесь: Slideboom (ProAccaunt).

Надеюсь, это статья кому-нибудь поможет - значит красоты в интернете станет больше!

Всем удачи и радости!
Света

Комментарии и вопросы более чем приветствуются,
нужна помощь - поможем! Читать дальше...

1.3.09

Blogger: Структура языка HTML (приложение к статье о расширяемых сообщениях).

13 comments

Сто одежек и все без застежек...


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

Капуста пришла мне в голову только в качестве ассоциации с темой о которой я сегодня хочу побеседовать. А говорить мы сегодня с вами будем о структуре языка разметки страниц HTML.

Это небольшое разъяснение структуры языка Html оказалось совершенно необходимым приложением к статье Blogger: Улучшенные расширяемые сообщения (Убираем под кат), потому что у многих читателей возникли проблемы как правильно поставить теги начала и конца "спрятанной области" поста.

Я получила массу вопросов на тему, почему у меня не работает. Любовь (Путь к себе), просто пообещала меня замучить если я не скажу где почитать как во всем этом (а всем этим оказался Html) разобраться. Так что не желая быть замученной, я написала эту статью.

Когда я думаю о языке Html, у меня всегда возникает перед глазами образ коробочек, ну, даже не совсем коробочек, а таких коробок из под шляп вложенных друг в друга. Готовую картинку с коробками я не нашла, пришлось Кайлу нарисовать вот такой вид сверху всего этого набора коробок и коробочек. Да, а еще я забыла попросить Кайла разместить в этих коробках несколько игрушек: машинку, например, или куколку... (Придется нам напрячь воображение и их представить самостоятельно). А вот это собственно наши коробки:



Давайте я поясню что есть что на картинке... Каждая коробочка - это область нашего Html-документа, наделенная определенными свойствами (например, свойство области быть ссылкой, или быть выровненным по левому краю абзацем, или быть областью с буквами синего цвета и т.д.). Эти области, как и коробочки пересекаться не могут. Одна область может только ЦЕЛИКОМ попадать внутрь другой. Что до не нарисованных игрушек - это были бы так называемые одиночные теги их на самом деле очень немного: картинки, разрыв линии - это пожалуй и все что вы сможете встретить в Html-коде вашей статьи.

Теперь несколько формальных слов:

1) Язык Html состоит из элементов разметки, которые называются тегами.
2) Теги заключаются в угловые скобки < >
3) Имя_тега это одна или больше латинских букв.
4) Теги бывают как правило парные (для описания коробочек со свойствами), но иногда одиночными.
5) Парные теги состоят из двух частей открывающего тега и закрывающего.
Открывающий тег выглядит так: <имя_тега атрибуты>
а соответствующий закрывающий будет выглядеть так: </имя_тега>
6) Одиночный тег будет записан вот так <имя_тега атрибуты /> (Специалистам: слэш перед закрывающей угловой скобкой в одиночном теге не обязателен, он не является требованием языка HTML, а его требует развитие языка XML, который используется в Blogger).

Какие имена тегов вы можете встретить у себя в статье, когда перейдете в режим Изменить Html и что они означают:

div (парный) - определение блока в документе
span (парный) - определение области в документе
p (парный) - параграф
center (парный) - выровнять блок по центру
b (парный) - выделенный полужирным шрифтом
strong (парный) - выделенный (как правило полужирным шрифтом)
a (парный) - ссылка
img (одиночный) - рисунок
br (одиночный) - признак новой строки
object (парный) - может появится если вы вставляете видео в вашу статью
embed (парный) - может появится если вы вставляете видео в вашу статью
parm (одиночный) - может появится если вы вставляете видео в вашу статью

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

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



Парные открывающий - закрывающий тег на рисунке линии одного цвета.

Я надеюсь, что идея со взаимным расположением парных тегов в Html-коде должна быть ясна.

Теперь, двигаясь дальше, нам надо в Html-код статьи вставить теги описывающие "спрятанную" область. Спрятанную область мы описываем вот таким парным тегом span : <span class="fulltext"> и </span>

Напомню, что для работы нового алгоритма также необходимо чтобы статья (код статьи) заканчивался закрывающим тегом нашей спрятанной области.

Рассматривать различные случаи будем на схемках. В случае встречающихся в статье парных тегов их конкретное значение (ссылка это или параграф, например) нам не важно, нам только важно открывающий это или закрывающий тег. Поэтому, давайте любые парные теги обозначать: открывающий тег обозначим открывающей квадратной скобкой [, а закрывающий тег, соответственно закрывающей квадратной скобкой ].

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

Точками мы покажем, что между этими парными тегами в статье что-то находится: буквы какие-нибудь или одиночные теги.

А фигурными скобками { } мы будем обозначать: начало и конец спрятанной/спрятанных областей.

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

1) Самый простой случай - никакого форматирования в статье не наблюдается - не улыбайтесь - это не так уж редко.

Вот как задача выглядит на схеме:

...............{.........................

а вот и решение:

...............{.........................}

2) Вся статья бывает заключена внутри одного парного тега. Это бывает, например, когда вы написали статью, а потом к ней всей применили выравнивание по ширине, например:

Вот как задача выглядит на схеме:

[...............{.........................]

а вот и решение:

[...............{.........................}]{}

В общем все остальные случаи можно свести к этим двум, но мы порассматриваем несколько схемок еще:

3) В статье много парных тегов форматирования, тут и параграфы и выделение цветом и выравнивание:

Вот как задача выглядит на схеме:

.......[...[........]]......[.{....].......[...[....]....]....[[[.....]....].....].............

а вот и решение:

.......[...[........]]......[.{....}]{.......[...[....]....]....[[[.....]....].....].............}

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

Вот как задача выглядит на схеме:

[.......[...[........]]......[.{....].......[...[....]....]....[[[.....]....].....].............]

а вот и решение:

[.......[...[........]]......[.{....}]{.......[...[....]....]....[[[.....]....].....].............}]{}

5) А если схема статьи выглядит так:

[.....[.......[.....[........{......]]........]..[....[.................]...........]...............]

Что будем делать? ;)

Задание на дом. Исключительно для тех кто хочет разобраться со структурой Html и применять у себя в блоге на Blogspot новый улучшенный алгоритм создания расширяемых статей или убирания части статьи под кат:

1) Прочитайте статью не торопясь столько раз сколько вам потребуется чтобы понять хотя бы половину.
2) Войдите в редактирование своей статьи, перейдите в режим Изменить Html и посмотрите:
а) какие теги используются в Html-коде вашей статьи. На атрибуты внимание не обращаем: т.е. смотрим на имя_тега и игнорируем всё последующее до закрывающей угловой скобки >
б) какие из тегов парные, а какие одиночные.
в) попробуйте проследить как парные теги вкладываются друг в друга, можно даже нарисовать схемку вашей статьи.
г) возможно, вы заметили два тега открывающий и закрывающий идут подряд и между ними ничего нет... Странно? Да, нет - бывает. Их (эту пару) можно безболезненно удалить.
3) Кто уже пользуется улучшенным алгоритмом "Читать далее..." вставьте в вашу статью теги для определения спрятанной области: <span class="fulltext">, </span> возможно у вас получится несколько спрятанных областей.
4) Если есть желание решите задачку 5 и напишите в комментарии ваше решение.
5) Чтобы расширить свои познания в Html и познакомится с другими тегами, которые вы сможете использовать в дальнейшем, рекомендую заглянуть вот сюда: htmlbook для тех кто делает сайты.
6) А если вы еще не читали здесь: Blogger: Начала HTML - Ссылки! мы подробнейшим образом рассматривали наверное самый важный тег в Html - a.

Всем здоровья и удачи!
Ешьте побольше капусты - там много витаминов!


Света
Комментарии и вопросы более чем приветствуются,
нужна помощь - поможем!
Читать дальше...

Популярные сообщения