Posts Tagged ‘HTML’
Micro python HTML templating engine
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.
Mediawiki to wordpress
Скрипт для полегшення цитування різних вікі в блогах на wordpress. Йому треба дати лише адресу сторінки, він поверне html-код, підігнаний для wordpress. Більш-менш адекватно працює з посиланнями, LaTeX, та підсвіткою синтаксису, таким чином дозволяючи просто репостити щось схоже на оце.
Якщо ще щось бракує, чи працює неправильно – пишіть.
Що таке мікроформати?
В інтернеті є два види читачів – читачі люди, і читачі – машини.
Щоб людям було зручно читати ваші блоги, ви маєте дотримуватись правил граматики, гарно форматувати текст, та по можливості розбавляти його ілюстраціями. Кажуть ілюстрації краще сприймаються.
Щоб ваш блог було зручно розуміти машинам, варто дотримуватись правил граматики (XHTML), гарно структурувати текст, та розбавляти його мікроформатами. Мікроформати – це як ілюстрації що допомагають краще зрозуміти зміст прочитаного, тільки не для нас, а для комп’ютера.
Інакше кажучи, мікроформати – це спосіб створювати документи, що містять в собі опис своєї семантики. З точки зору коду, це просто невеличке доповнення мови HTML новими атрибутами. З точки зору філософії – мікроформати це великий крок на шляху до семантичної павутини.
З мікроформатами ви вже напевне стикались, якщо знаєте що таке rel="nofollow". Якщо не знаєте, то коротко – це атрибут тегу <a>, що каже пошуковій машині, що сторінка на яку ми посилаємось не варта індексації. Наприклад всі зовнішні посилання з вікіпедії містять такий атрибут (вікіпедія тонко натякає що вона не вітає SEO-шників).
Тепер розповім про трошки складніший мікроформат. Хай ми записуємо свої контакти:
Петрик П’яточкін
Дитсадок
тел: 1234567890
http://example.com/
Здавалось би, так Google нас знайде, і проіндексує. Він навіть мав би здогадатись, що “тел” – це телефон.
А тепер запишемо наші контакти в форматі hCard:
Нічого не змінилось, правда? Для звичайного читача так. Але гляньмо в код:
<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) та навіть для позначення координат на Марсі (в розробці). Тим не менш, описувати їх всі я не маю змоги. Є ще й інші вікіпедисти і блогери:).
Детальніше можна дізнатись за посиланнями:
- Microformats Wiki – містить специфікації усіх впроваджених мікроформатів, а також тих що розробляються.
- Мікроформат – стаття на Українській вікіпедії. Яка як завжди потребує вашого виправлення та доповнення;).
Післямова
Цю замітку я намагався написати ще в кінці березня 2010, для рубрики “лікбез” блогорідера, але чомусь Сергій Пішковцій не отримав листа. Потім я про це забув, і цей пост довгенько лежав в чорновиках. Ну, а сьогодні прочитав статтю колеги, і спочатку хотів вкрасти кусочок для вікіпедії, але потім згадав що маю контент поякісніше.
А мікроформати на мому блозі є вже відтоді. Дві штуки. Вгадаєте де?
Хочеться якось написати курсову про мікроформати, шаблони вікіпедії, вікіпедійних ботів, і багато інших цікавих речей, але не знаю яка ж буде тема. Деякі аспекти анатомії павуків та їх всесвітньої павутини на прикладі вікіпедії?
Як робити комп’ютерні презентації?
Нічого собі назва – сказав би я на вашому місці, якби таке прочитав. Ніби я не вмію робити презентації. Відкриваєш PowerPoint, pобиш слайд, додаєш на нього всякого-різного, потім ще один, і готово. Ну чи за смаком, OO.o Impress, чи Google docs. Вони еквівалентні.
Але деякі речі, як наприклад вставляти гарно підсвічений код там робити дуже важко. Я рився і рився в цьому безмежному павутинні, аж поки не наткнувся на пораду “роби скріншоти ide”. Порада непогана. Папка з картинками – назручніший формат презентації для демонстрації (правда не для наступного редагування), бо може демонструватись будь-яким пристроєм, аж до DVD-плеєра, з мобільним телефоном включно. Я навіть таким чином зробив презентацію прямо на захисті курсової. І ніхто навіть не здогадався що я вдома її взагалі не робив
.
Потім я подумав про txt2tags, html, та переходи між слайдами за посиланням. А якщо додати JavaScript? Коли я про це подумав, то наткнувся на http://www.zackgrossbart.com/hackito/present/. Скрипти в документі – хороша ідея. ПЗ для його відтворення ніби поставляється разом з ним. Ну, і я почав робити свою презентацію.
Прочитати решту цієї замітки »
Публікуємо свій код
За допопогою засобів 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


