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

Історія хвороби контуженого інформаційним вибухом

Posts Tagged ‘HTML

Новий безкоштовий онлайн-курс веб-розробки для початківців

with 3 comments

Ну а шо, в мене тепер купа досвіду в викладанні, а попит є. То чому б ні? Першим 10-тьом учасникам – участь безкоштовна. 😉 А далі буде видно скільки я осилю. Може раз на тиждень, поки не прийде пора відпусток літом?

Прем’єра в четвер, 17-го березня, онлайн, в Google Hangouts. Приєднатись можна за посиланням: https://plus.google.com/events/cd18to4v9bob2p94ume6fb7qih8

Курс розглядатиме всі аспекти, починаючи від верстання статичних сторінок (що я погано вмію 🙂 ), і контролю версій, до NoSQL баз даних (бо SQL я погано вмію 🙂 ), і того що таке REST API. Ну, коротше кажучи, будемо розбиратись разом. Але почнемо з простого – що таке Git, Github, HTML і як помістити останній на Github pages.
Прочитати решту цього запису »

Advertisements

Written by bunyk

Березень 16, 2016 at 01:45

Оприлюднено в Кодерство, Нещоденник

Tagged with ,

Додекалендар

with one comment

Я вирішив стати майстром верстки, CSS3, SVG і всяких інших крутих штук. Для цього вирішив забабахати календар на гранях додекаедра, розгортку якого можна подивитись на моєму гітхабі: http://bunyk.github.io/dodecahedron/

Календар на гранях додекаедра вигідний тим, що це оригінально, бо 3d, а ще ним добре грати футбол чи інші ігри з м’ячем. 🙂

Так як я на це вбив майже половину вихідних (5 з половиною годин замість трьох запланованих), і вже не маю сил написати рендеринг власне табличок для місяців, бо треба ще вирішити чи залишати текст в тегу <pre>, чи зверстати місяці табличками, то вирішив просто написати про це тут, може хтось хто в веб-дизайні розбирається краще, щось мені порадить і прискорить роботу.

Далі я ще планую зробити кнопочку яка дозволяє змінити рік (аби в 2015 заново не кодити), і кнопочки що дозволяють змінити фонові картинки. Тоді залишатиметься лише роздрукувати на A3 і можна клеїти комусь подарунок до нового року.

Найбільше сил пішло на те, щоб вирішити що React чомусь не хоче рендерити SVG, з D3 доведеться писати море коду, а Angular – саме воно, і треба його трохи підучити. Мені дуже сподобалось, надалі намагатимусь писати на ньому більше.

Розгортка і моделька

Розгортка і моделька з листка A4

А зовсім круті нерди можуть зробити аналогічний календар за допомогою Tikz в \LaTeX.

Written by bunyk

Грудень 14, 2014 at 23:13

Відкрити браузер і передати йому html

leave a comment »

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

Але це заморочливо. Тепер я вмію мокати smtplib і листи почнуть покриватись тестами. І тоді вже почнеться повне TDD і всім буде добре, бо розробники зможуть виправляти помилки ще до того як відправити їх тестерам.

Тільки от біда, що є речі які автоматичними тестами не покриваються. Наприклад треба переконатись що текст не вилазить за межі кнопочки шаблон якої зверстали наші круті стиляги-верстальщики.

Рішення яке використовую я – під час розробки показати html що генерується у браузері. Як у webtest може об’єкт responce.

Перед тим як щось робити самому я звичайно погуглив, і знайшов спосіб, який щоправда трохи застарілий. Потрібно хоча б заголовок Content-Type передавати, тому що його не задають в мета-тегу, а в заголовках формату MIME.

Власне ось сам код – веб-сервер в одній функції що відповідає на один запит:

import webbrowser
from wsgiref.simple_server import make_server
def show_in_browser(html):
        html = html.encode('utf-8')
        def wsgiapp(environ, start_response):
        headers = [('Content-type', 'text/html; charset=utf-8'),
                   ('Content-Length', str(len(html)))]
        start_response('200 OK', headers)
        return [html]

    # нульовий порт означає "знайди вільний сам"
    server = make_server('127.0.0.1', 0, wsgiapp)
    webbrowser.open('http://127.0.0.1:%s' % server.server_port)
    server.handle_request() # один запит

Мене на рев’ю запитали чому ж я не запишу html в тимчасовий файл? Видно я вже занадто веб-девелопер, бо раніше не знав як таке зробити. Зараз знаю як створити тимчасовий файл, але щось локальні файли відкриваються неадекватно. В текстовому редакторі.

Written by bunyk

Листопад 2, 2012 at 01:25

Оприлюднено в Кодерство, Розмітка

Tagged with , ,

Micro python HTML templating engine

with 3 comments

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

with one comment

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

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

КОД ТУТ.

Written by bunyk

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

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

with one comment

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

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

Щоб ваш блог було зручно розуміти машинам, варто дотримуватись правил граматики (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 ,

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

with 14 comments

В цій публікації мова піде про те як робити презентації за допомогою інструментів HTML та JavaScript, і націлена вона більше на розробників. Якщо вас цікавить загальний процес – читайте новішу публікацію: Як зробити презентацію краще?

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

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

Written by bunyk

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

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

Tagged with , ,