Блоґ одного кібера

Я не знаю куди й нащо мені бігти. Та це все таки веселіше ніж сидіти.

Posts Tagged ‘HTML

Micro python HTML templating engine

Кількість коментарів - 3

Idea that XML is not the most compact form of trees markup is not new. Like idea that HTML is hard to write by hand and should be dynamically generated on server. (Or compiled. There is even whole class of software – site compilers, which can be cheaper equivalents to content management systems). Furthermore, today even CSS can be compiled from SASS and JavaScript can be compiled from CoffeScript. Which means that web is making a new leap to a more high-level languages, which are compiled to “machine code” (and in our case “machine” is a browser).

Oh, and now I should return to my point. XML document is just a tree. HTML too. And code of any programming language also represent a tree. This is most explicitly seen in Lisp-like languages where we have a lot of parentheses. So why not to write web-pages in Lisp? Or, as I don’t know Lisp good enought, in Python?

Now I am presenting you my brand new lispy micro html templating engine. It is supercompact, and probably superslow, but I am too lazy to test. Also it doesn’t have escaping support, so use with caution.

Прочитати решту цієї замітки »

Written by bunyk

Грудень 22, 2011 at 00:02

Опубліковано в Кодерство, Розмітка, English posts

Tagged with , ,

Mediawiki to wordpress

з коментарем

Скрипт для полегшення цитування різних вікі в блогах на wordpress. Йому треба дати лише адресу сторінки, він поверне html-код, підігнаний для wordpress. Більш-менш адекватно працює з посиланнями, LaTeX, та підсвіткою синтаксису, таким чином дозволяючи просто репостити щось схоже на оце.

Якщо ще щось бракує, чи працює неправильно – пишіть.

КОД ТУТ.

Written by bunyk

Лютий 11, 2011 at 00:00

Що таке мікроформати?

з коментарем

В інтернеті є два види читачів – читачі люди, і читачі – машини.

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

Щоб ваш блог було зручно розуміти машинам, варто дотримуватись правил граматики (XHTML), гарно структурувати текст, та розбавляти його мікроформатами. Мікроформати – це як ілюстрації що допомагають краще зрозуміти зміст прочитаного, тільки не для нас, а для комп’ютера.

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

З мікроформатами ви вже напевне стикались, якщо знаєте що таке rel="nofollow". Якщо не знаєте, то коротко – це атрибут тегу <a>, що каже пошуковій машині, що сторінка на яку ми посилаємось не варта індексації. Наприклад всі зовнішні посилання з вікіпедії містять такий атрибут (вікіпедія тонко натякає що вона не вітає SEO-шників).

Тепер розповім про трошки складніший мікроформат. Хай ми записуємо свої контакти:

Петрик П’яточкін
Дитсадок
тел: 1234567890
http://example.com/

Здавалось би, так Google нас знайде, і проіндексує. Він навіть мав би здогадатись, що “тел” – це телефон.

А тепер запишемо наші контакти в форматі hCard:

Петрик П’яточкін
Дитсадок
1234567890

http://example.com/

Нічого не змінилось, правда? Для звичайного читача так. Але гляньмо в код:

<div class="vcard">
    <div class="fn">Петрик П'яточкін</div>
    <div class="org">Дитсадок</div>
    <div class="tel">1234567890</div>
    <a class="url" href="http://example.com/">http://example.com/</a>
</div>

Щоб сильно не заморочуватись зі створенням такої візитки, і не боятись прописати помилкові атрибути, можна використати майстра.

Мікроформати бувають вкладені. В vCard можна вставити наприклад своє місцезнаходження використавши мікроформат Geo. Цей мікроформат зберігає координати стандарту WGS84. Найширше цим користується напевне вікіпедія, яка містить інформацію про тисячі географічних об’єктів. Google чудово парсить цей мікроформат. Принаймі на Google Maps можна ввімкнути відображення на карті статтей вікіпедії. За це в вікіпедії відповідає цілий проект.

Виглядає мікроформат Geo так:

<div class="geo">
 <abbr class="latitude" title="37.408183">N 37° 24.491</abbr> 
 <abbr class="longitude" title="-122.13855">W 122° 08.313</abbr>
</div>

Просто, хіба ні?

Ще одним надзвичайно поширеним мікроформатом є ліцензія:

<a href="http://creativecommons.org/licenses/by/2.0/" rel="license">cc by 2.0</a>

Цей мікроформат допомагає ідентифікувати вашу сторінку за типом ліцензії, для можливості подальшої фільтрації у пошукових машинах. (Наприклад в складному пошуку Google можна вибрати тип ліцензії контенту який шукається). Creative Commons має форму, що дозволяє обрати ліцензію, та отримати всі потрібні теги та мікроформати автоматично.

Існує ще багато різних мікроформатів для семантичної розмітки різних даних, від типів зв’язків з іншими людьми (XFN) до різних подій (hCalendar) та навіть для позначення координат на Марсі (в розробці). Тим не менш, описувати їх всі я не маю змоги. Є ще й інші вікіпедисти і блогери:).

Детальніше можна дізнатись за посиланнями:

  1. Microformats Wiki – містить специфікації усіх впроваджених мікроформатів, а також тих що розробляються.
  2. Мікроформат – стаття на Українській вікіпедії. Яка як завжди потребує вашого виправлення та доповнення;).

Післямова

Цю замітку я намагався написати ще в кінці березня 2010, для рубрики “лікбез” блогорідера, але чомусь Сергій Пішковцій не отримав листа. Потім я про це забув, і цей пост довгенько лежав в чорновиках. Ну, а сьогодні прочитав статтю колеги, і спочатку хотів вкрасти кусочок для вікіпедії, але потім згадав що маю контент поякісніше.

А мікроформати на мому блозі є вже відтоді. Дві штуки. Вгадаєте де?

Хочеться якось написати курсову про мікроформати, шаблони вікіпедії, вікіпедійних ботів, і багато інших цікавих речей, але не знаю яка ж буде тема. Деякі аспекти анатомії павуків та їх всесвітньої павутини на прикладі вікіпедії?

Written by bunyk

Січень 16, 2011 at 23:59

Опубліковано в Павутина, Розмітка

Tagged with ,

Як робити комп’ютерні презентації?

Кількість коментарів - 12

Нічого собі назва – сказав би я на вашому місці, якби таке прочитав. Ніби я не вмію робити презентації. Відкриваєш PowerPoint, pобиш слайд, додаєш на нього всякого-різного, потім ще один, і готово. Ну чи за смаком, OO.o Impress, чи Google docs. Вони еквівалентні.

Але деякі речі, як наприклад вставляти гарно підсвічений код там робити дуже важко. Я рився і рився в цьому безмежному павутинні, аж поки не наткнувся на пораду “роби скріншоти ide”. Порада непогана. Папка з картинками – назручніший формат презентації для демонстрації (правда не для наступного редагування), бо може демонструватись будь-яким пристроєм, аж до DVD-плеєра, з мобільним телефоном включно. Я навіть таким чином зробив презентацію прямо на захисті курсової. І ніхто навіть не здогадався що я вдома її взагалі не робив :) .

Потім я подумав про txt2tags, html, та переходи між слайдами за посиланням. А якщо додати JavaScript? Коли я про це подумав, то наткнувся на http://www.zackgrossbart.com/hackito/present/. Скрипти в документі – хороша ідея. ПЗ для його відтворення ніби поставляється разом з ним. Ну, і я почав робити свою презентацію.
Прочитати решту цієї замітки »

Written by bunyk

Серпень 26, 2010 at 12:30

Опубліковано в Інструменти, Розмітка

Tagged with , ,

Публікуємо свій код

Кількість коментарів - 9

За допопогою засобів WordPress.com

WordPress.com має плагін, який виконує підсвітку синтаксису. За допомогою нього код поститься дуже просто. Пишемо:

[sourcecode language='Наша мова']

Сюди вставляємо свій код

[/sourcecode]

Замість ‘Наша мова’ пишемо одне з таких: bash, bash, cpp, csharp, css, delphi, html, java, jscript, php, python, ruby, shell, sql, vb, xml

Власники автономних блогів можуть скачати цей плагін звідси: http://code.google.com/p/syntaxhighlighter/.

GVim

Але як ми бачимо цей плагін знає далеко не все. Набагато більше знає Vim. (Туди можна дописати навіть підсвітку вікі-розмітки). Тільки поки я користувався консольною версією знайти команду яка генерує html підсвітку синтаксису мені не вдавалось. А от в GVim випадково натрапив на команду головного меню:

Синтаксис -> Створити HTML

Або клавіатурною командою:

:TOhtml

І все готово. Навіть для якогось там древнього Фортрана:



C AREA OF A TRIANGLE WITH A STANDARD SQUARE ROOT FUNCTION
C INPUT – CARD READER UNIT 5, INTEGER INPUT
C OUTPUT – LINE PRINTER UNIT 6, REAL OUTPUT
C INPUT ERROR DISPLAY ERROR OUTPUT CODE 1 IN JOB CONTROL LISTING
      READ INPUT TAPE 5, 501, IA, IB, IC
  501 FORMAT (3I5)
C IA, IB, AND IC MAY NOT BE NEGATIVE
C FURTHERMORE, THE SUM OF TWO SIDES OF A TRIANGLE
C IS GREATER THAN THE THIRD SIDE, SO WE CHECK FOR THAT, TOO
      IF (IA) 777, 777, 701
  701 IF (IB) 777, 777, 702
  702 IF (IC) 777, 777, 703
  703 IF (IA+IB-IC) 777,777,704
  704 IF (IA+IC-IB) 777,777,705
  705 IF (IB+IC-IA) 777,777,799
  777 STOP 1
C USING HERON’S FORMULA WE CALCULATE THE
C AREA OF THE TRIANGLE
  799 S = FLOATF (IA + IB + IC) / 2.0
      AREA = SQRT( S * (S - FLOATF(IA)) * (S - FLOATF(IB)) *
     +     (S - FLOATF(IC)))
      WRITE OUTPUT TAPE 6, 601, IA, IB, IC, AREA
  601 FORMAT (4H A= ,I5,5H  B= ,I5,5H  C= ,I5,8H  AREA= ,F10.2,
     +        13H SQUARE UNITS)
      STOP
      END

Written by bunyk

Вересень 28, 2009 at 20:20

Опубліковано в Інструменти, Кодерство

Tagged with , ,

Follow

Get every new post delivered to your Inbox.