28 01 2012 javascript HTML5 Tweet
HTML5ベースのスライドつくる場合はJadeみたいなインデントでブロックを表現するような形式のほうが見やすいし書きやすい。
html2jadeを使えば、逆にhtmlをjadeに変換して読みやすく出来るのでオススメです。
impress.jsのindex.htmlをjadeに変換してみた。読みやすい。
#bored.step.slide(data-x='-1000', data-y='-1500') q | Aren't you just b bored | with all those slides-based presentations? .step.slide(data-x='0', data-y='-1500') q | Don't you think that presentations given strong in modern browsers | shouldn't strong copy the limits | of 'classic' slide decks? .step.slide(data-x='1000', data-y='-1500') q | Would you like to strong impress your audience | with strong stunning visualization | of your talk? #title.step(data-x='0', data-y='0', data-scale='4') span.try then you should try h1 | impress.js sup * span.footnote sup * | no rhyme intended #its.step(data-x='850', data-y='3000', data-rotate='90', data-scale='5') p | It's a strong presentation tool br | inspired by the idea behind a(href='http://prezi.com') prezi.com br | and based on the strong power of CSS3 transforms and transitions | in modern browsers. #big.step(data-x='3500', data-y='2100', data-rotate='180', data-scale='6') p | visualize your b big span.thoughts thoughts #tiny.step(data-x='2825', data-y='2325', data-z='-3000', data-rotate='300', data-scale='1') p | and b tiny | ideas