Туристичний елементаль

Спробував злізти з Firefox на інший браузер. Давно збирався це зробити — не стільки із-за того, що Вогнелис поганий — наразі у мене 8 гігабайт оперативної пам'яті на ноутбуці і зайняти їх хоч половину ніякому браузеру поки не вдавалося. Просто тому, що до мене дійшла інформація про те, що Google Chrome "зливає" інформацію про відвідані мною сторінки. Але я. чомусь, не знав, що Chrome і Chromium — це два різних браузера. Останній є відкритим і береться за основу для першого. І він, ніби, нічого не зливає Гуглю. Але на вигляд вони ніби однакові. В репозиторіях Debian є саме Chromium і я його поставив задля спробувати.

Для початку — короткий вступ. Можете пропустити, якщо не любите графоманії від мене.

В один прекрасний день знайшлися підараси, які влаштували фішингову атаку у ЖЖ, поцупивши багато паролів від облікових записів. Суть полягала в тому, що коли користувач, маючи френда із зламаним журналом, заходячи у свою френдстрічку, бачив повідомлення про необхідність авторизації. І СУП, борючись із такими атаками, влаштувала фільтрацію атрибутів class та id у дописах користувачів. Чим же він був корисним? Наприклад тим, що всі стилі, про які я писав, можна один-єдиний раз занести в налаштування журналу і не прописувати щоразу в кожному дописі, просто пишучи щось типу:

На даний момент можливість таку повернули, але лише платним та постійним обліковим записам. Можна було-б заплатити тих нещасних 2 бакса за місяць, тим більше, що там даються розширені можливості для оформлення журналу — геть до того, що можна ваяти власні "шкірки", та-й реклами не буде. Але стабільність роботи сервісу заставляє бажати кращого, тому обійдемося чим є.

На майбутнє — якщо ЖЖ серйозно глючитиме, можете читати мене на стенделоні — там коментарі через DISQUS, ніби без особливих проблем пишуться.

Ну, а тепер по суті. Сьогодні я розкажу, як за допомогою атрибуту style зробити маленький спойлер, приховавши текст і як зробити текст із спадною підказкою. Для цього ми будемо використовувати тег <span></span>. Він призначений для виділення фрагментів тексту і сам по собі нічого не робить, проте із атрибутом style можна змінити стилі для фрагменту тексту. Мої студенти інколи намагаються писати його як spam, але велика замашна дерев’яна указка призначена для запобігання таких випадків в подальшому.

Отже, заключаємо текст в тег span і прописуємо однакові кольори для тексту та фону — так, як на самому початку допису:

Тут color — колір тексту, background-color — для фону, відповідно. Щоб не так кидалося в очі, можна зробити білим, або під фоновий колір вашого журналу. Достатньо виділити слова щоб прочитати. Якби був доступний атрибут class, можна було-б використати псевдоклас hover — тоді текст показувався-б при наведенні курсору миші.

Щоб зробити спадну підказку, знадобиться атрибут title, якого можна прописати поруч зі style. Я про нього вже писав, коли розказував, як оформлювати картинки.

Підведіть курсор до слова title. підкресленого пунктиром щоб побачити, як це працює. Тут я вжив параметр border-bottom, яким задається нижня рамка — вона dashed (пунктир), товщиною 2px і чорна. Ось і все на сьогодні, не перемикайтеся.

Затишненька ЖеЖешечка десь після обіду безнадійно лягла і абсолютно недоступна. В статусі намалювали красивий юзерхед в касці і з автоматом, підписавши, що їх, нещасних, DDoSять не по дитячому. Чому так не лягає ВК, він-же більш популярний, невже немає охочих потрусити його? Треба потихеньку переманювати моїх читачів не стенделон.

Зібравши вчора багато критичних коментарів з приводу моєї любові до візуального представлення інформації, зокрема, до того, що я запропонував візуально представляти, сьогодні продовжу тему, але в більш конструктивному руслі. І тут мене закритикувати не вийде, бо HTML я знаю краще, ніж психологію. І питання полягатиме не в тому, що представляти у візуальній формі — це я залишу на ваш вибір, а сам розкажу, як це зробити.

Отже, мова сьогодні піде про вставлення зображень у запис блогу. Навіть не просто вставлення — тицьнути на кнопку у візуальному редакторі може кожен, а про те, як можна налаштувати вигляд зображення, його розташування та інші параметри. Варто сказати, що дані поради працюють і в коментарях ЖЖ — от тільки їх антиспам може заскрінити вашу писанину, помітивши як підозрілу.

Отже, вставивши за допомогою кнопки малюнок і перемкнувшись у режим HTML ми побачимо щось таке:

Тег img, власне, відповідає за вставляння зображення у веб-документ і йому можна дописати іще цілу купу параметрів. Розглянемо ті, що є уже.

• src — зрозуміло, що це посилання на вашу картинку.
• width та height — масштабування зображення за шириною та висотою. Якщо не писати цих параметрів, то картинка буде показана такою, як вона є. Якщо вказати один із цих параметрів, то інший буде змінений браузером так, щоб зберегти пропорції. Якщо вказати обидва, то пропорції можуть бути порушені.
• alt — заміщуючий напис — ви його побачите на сторінці, якщо зображення з якихось причин не завантажиться. Наприклад, можна написати "ImageShack нехай горить у топці" і, якщо зображення не покажеться, всі дізнаються, чому це сталося. Пошуковики за alt можуть індексувати ваші малюнки, тому вказуйте те, що на них зображено, якщо вас хвилює хоч якась релевантність пошуку вашого контенту.
• title — заголовок зображення, з’явиться у вигляді спливаючої підказки (tooltip) під курсором миші. Так, як на зображенні нижче.

Переглядаючи стрічку друзів у ЖЖ, тобто тих, кого я читаю — адже як можна називати друзями тих, кого я не знаю особисто (хоча у мене вона підписана "Любі друзі" і декого я, таки, бачив вживу) знаходжу "лист щастя" у Вови Комента, де пропонується попіарити тих, кого ти читаєш. Я не любитель листів щастя, проте зробити таке хотів давно, отже маємо нагоду.

Суть в тому, що дата 31.08 найбільш графічно схожа на слово Blog, отже можна вважати її днем блогерів. А блогери — це такий народ, що святкує свій день не у фонтанах, як десантники, а у блогах. Отже, із тих, кого я читаю, хочу відмітити:

• noddeat: Досить широка географія мандрівок + незвичний погляд на звичні речі. Приїхавши до якоїсь Пізи, noddeat не буде підпирати Пізанську вежу, натомість у об’єктив потрапить громадський транспорт, незвичні дорожні знаки, величні вказівники, вузенькі провулки, смітники та каналізаційні люки. У блозі принципово не ставить LJ-CUT, тому читайте його через RSS. Іще він, буває, матюкається і йому начхати, що про нього думають читачі.
• xenoir: останнім часом пише рідко, але фотографії дуже смачні. Не стільки технічно, як композицією. Раніше можна було знайти звіти із вилазок на різні покинуті і не дуже індустріальні об’єкти — починаючи від покинутих шахт, закінчуючи діючими (і закритими для відвідування) металургійними заводами.
• Роман Наумов: іще один цікавий фотограф-любитель. Каже, що взагалі не переймається технічними деталями, просто фотографує у своє задоволення. Основна фішка — здатність знаходити незвичайні ракурси знайомим усім об’єктам. Тобто, якщо його відправити підпирати Пізанську вежу, то він знайде таку точку зйомки, що ніхто не назве фотографію баянною.

Я хотів написати про більше блогерів, але деякі давно не пишуть, а тих, кого я недавно почав читати — того-ж Вову Комента, включу до списку пізніше.

s/n 17-009 наштовхнув мене на одне цікаве відкриття. Виявляється, ера гуртовщиків у Microsoft компанії не закінчилася. До цього висновку я дійшов, зазирнувши в україномовний розділ на сайті Служби технічного упору Microsoft компанії.

Власне, воно мені саме статті українською пропонувало типово — оскільки в ОС всі налаштування українські, а браузер повідомляє сайтам вашу мову. До речі, ану, товариші борці за українське слово в інтернетах, топі ЖЖ, підписувачі петицій за українізацію Розетки, покажіть ваш User Agent — яку системну мову рапортує ваш браузер сайтам? Дізнатися це можна тут, дивіться рядок Accept-language. Служба Google Analytics показує, що в моєму блозі добра половина ru, незважаючи на україномовний контингент коментаторів.

Повернемося до статті. Вони там відразу зізналися, що переклад машинний. Звісно, в текстах немає таких лулзів, як у відомому баяні, але якась невловима схожість є. І нормально читати цей машинний переклад технічного тексту вкрай важко. Адже ми всі пам’ятаємо, що Microsoft компанія завжди думає, як вас краще зробити.

Великі набори фотографій я заливаю на майданчик, де є мій блог, а от різні дрібнички, щоб швидше, заливав спочатку на radikal.ru, потім на ImageShack.us. На разі обидва сервіси вважаються мною гуаном — перший уже давно, а другий — не давно, коли замість опублікованих зображень з’явилася заглушка Media is not available. Буду пробувати flickr, так як Picasa мені, чомусь, не зручна.

Я, коли користувався PicasaWeb, навіть був видалив профіль із Google+ (я ним все одно не користуюся), оскільки він псував галерею, заміняючи класичний інтерфейс на свій. Але, нещодавно, в Google зжалилися над ретроманами і зробили посилання, за яким можна перейти на класичну PicasaWeb. Якщо ви його не побачили, можна дописати щось таке — https://picasaweb.google.com/home?noredirect=1. Тоді вас не буде закидати в галерею Google+

Пропоную вашій увазі матеріал про те, як зробити гарну плашку для статті в блозі. Власне, я наведу зразок HTML-коду і поясню, з чого він складається, щоб ви могли замінити мої параметри на свої. Цей спосіб підійде для будь-якого ресурсу, де допускається свій HTML-код у дописах і не фільтрується параметр style. Раніше в LiveJournal також не фільтрувався параметр class, тому можна було загнати свій код у CSS-стилі і не писати його щоразу у новому дописі.

Отже, код плашки, що ви бачите вище, має наступний вигляд:

Цей код можна скопіювати до себе в блог, чи куди там захочете. Як ви вже зрозуміли, замість мого тексту можна вставити свій, оскільки він не є частиною коду. Знаходиться він усередині тегу div (блок), у відкриваючій частині якого написано style="купа_незрозумілих_літер". От їх ми і розглянемо.

• min-height:115px; — мінімальна висота блоку у пікселях, якщо текст не заповнює його повністю. Зроблено для того, щоб вміщався графічний знак. Якщо ви захочете використати зображення іншої висоти, можете змінити цей параметр, якщо у плашці достатня кількість тексту.
• margin: 10px; зовнішні відступи плашки.
• padding: 10px 10px 10px 140px; внутрішні відступи плашки. Остання цифра — відступ від лівого краю, зроблено великим, щоб текст не наклазив на графічний знак. Якщо ви використовуєте зображення інших розмірів, змініть цю цифру.
• background-image:url(...); посилання на зображення із вашим знаком.
• background-color: yellow; колір фону. Список кольорів у HTML можна знайти тут.
• border: 2px solid red; товщина у пікселях, тип (solid/dotted/none) та колір границі плашки.
• font-size:14pt; розмір шрифту у пунктах, як у M$ Word. Окрім цього можна дописати color: red — колір тексту.

Насправді, там можна дописати набагато більше, список можливих опцій великий. Якщо будуть запитання або побажання до наявного дизайну — пишіть.

у Google Maps зліва з'явилося запрошення взяти участь у тестуванні нових карт гугля. Я по ньому клацнув дещо раніше, а сьогодні прискакало на пошту запрошення їх спробувати і написати їм відгука. Я-й спробував.

Перше, що кинулося в очі, це чорний фон мап і досить таки мінімалістичний інтерфейс самих карт, що займає мінімум корисної площі. Звісно, кількість AJAX'у в такому рішенні зашкалює, але на сучасному настільному комп'ютері воно все працює плавно. Цікаво, як воно працюватиме на недорогому китайському планшеті?