#kinoutJS

HTML5 based Keynote System.

Header element

Header subelement

Footer element

Footer subelement

Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.
It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.

Header element (.box)

Subheader element

Footer element (.box .white)

Footer subelement

JavaScript doesn't suck! You're just doing it wrong.
Doug Crockford

vertical slides

(press down to view next slide)

second slide

(press down to view next slide)

third slide

Right! Now you can press right key.

data-step

...a cool property for elements in slide.

  • press down to view next step
  • Step with "fade"
  • Step with "boom"
  • Step with "zoom"
  • Step with "move"
  • Step with "move alternate"
  • press down to see in vertical slide

press down...

yeah!!!

it works!

data-image

... a easy way to full-screen images

Embedded code

a great way to show your code

$.ajax({
    type: 'POST', // defaults to 'GET'
    url: 'http://rest',
    data: {user: 'soyjavi', pass: 'twitter'},
    dataType: 'json', //'json', 'xml', 'html', or 'text'
    async: true,
    success: function(response) { ... },
    error: function(xhr, type) { ... }
});          

Press to view code with data-step

$.ajax({
    type: 'POST', // defaults to 'GET'
    url: 'http://rest',
    data: {user: 'soyjavi', pass: 'twitter'},
    dataType: 'json', //'json', 'xml', 'html', or 'text'
    async: true,
    success: function(response) { ... },
    error: function(xhr, type) { ... }
});          

Columns

divide your slide easily

.box .big .box .big
.box .medium .box .medium .box .medium
.box .small .box .small .box .small .box .small
Example with images

@soyjavi

@aitorjvoa

@mikel_ade

@janixy91

Nerd behind #kinoutJS

...dangerous with SublimeText

@soyjavi

  • Leire's husband
  • CEO & Founder at @tapquo
  • @LungoJS & @QuoJS author
  • #Web believer & #W3C member
  • #JavaScript & #CleanCode lover
  • #HTML5 evangelist
  • ...sometimes #Nerd Speaker