• Share
  • Email
  • Embed
  • Like
  • Save
  • Private Content
Zen coding15min
 

Zen coding15min

on

  • 975 views

Zen Coding introduction ( High speed coding tech )

Zen Coding introduction ( High speed coding tech )

Statistics

Views

Total Views
975
Views on SlideShare
973
Embed Views
2

Actions

Likes
0
Downloads
10
Comments
2

1 Embed 2

http://www.docseek.net 2

Accessibility

Categories

Upload Details

Uploaded via as Apple Keynote

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel

12 of 2 previous next

  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
  • good
    Are you sure you want to
    Your message goes here
    Processing…
  • この資料の後には、こちらのムービーがオススメ
    http://vimeo.com/7405114
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n

Zen coding15min Zen coding15min Presentation Transcript

  • Zen Coding @15min2012 .03.30 : Stu dy me eti ng @ clw it inc .
  • What is Zen-CodingZen Coding is an editor plugin for high-speedHTML, XML, XSL (or any other structured codeformat) coding and editing.( http://code.google.com/p/zen-coding/ )Aptana TextMate Notepad++ EmacsEclipse Coda Dreamweaver Vim and more ...
  • Uh...Yes, I know.It is CSS styleintelligentcode snippets. http://www.flickr.com/photos/lentzstudios/3884839779/
  • Right!
  • Right!But, not only
  • How to SpeedUpExpand Abbreviation i.e. snippets
  • How to SpeedUpExpand Abbreviation Update <img> SizeWrap with Merge LinesAbbreviation Remove TagBalance TagInward/Outward Split/Join TagGo to Next/Previous Toggle CommentEdit Point
  • (1) Expand Abbreviationdiv#page>div.logo+ul#navigation>li*5>a<div id="page">    <div class="logo"></div>    <ul id="navigation">        <li><a href=""></a></li>        <li><a href=""></a></li>        <li><a href=""></a></li>        <li><a href=""></a></li>        <li><a href=""></a></li>    </ul></div>
  • (2) Wrap with Abbreviation<div> <p|>Hello world</p></div> abbreviation “ div.wrap “<div> <div class=”wrap”> <p>Hello world</p> </div></div>
  • (2) Wrap with Abbreviation<div> <p>Hel|lo world</p></div> abbreviation “ div.wrap “<div> <p><div class=”wrap”>Hello world</div></p></div>
  • (2) Wrap with Abbreviation<div> About us Cat|alog Contacts</div> abbreviation “ ul#nav>li*>a “<div> <ul id=”nav”> <li><a href=””>About us</a></li> <li><a href=””>Catalog</a></li> <li><a href=””>Contacts</a></li> </ul></div>
  • (3) Balance Tag Inward/Out ward<div> <ul id=”nav”> <li><a href=””>|About us</a></li> <li><a href=””>Catalog</a></li> <li><a href=””>Contacts</a></li> </ul></div> inward?<div> <ul id=”nav”> <li><a href=””>About us</a></li> <li><a href=””>Catalog</a></li> <li><a href=””>Contacts</a></li> </ul></div>
  • (3) Balance Tag Inward/Out ward<div> <ul id=”nav”> <li><a href=””>|About us</a></li> <li><a href=””>Catalog</a></li> <li><a href=””>Contacts</a></li> </ul></div> out ward?<div> <ul id=”nav”> <li><a href=””>About us</a></li> <li><a href=””>Catalog</a></li> <li><a href=””>Contacts</a></li> </ul></div>
  • (3) Balance Tag Inward/Out ward<div> <ul id=”nav”> |<li><a href=””>About us</a></li> <li><a href=””>Catalog</a></li> <li><a href=””>Contacts</a></li> </ul></div> inward?<div> <ul id=”nav”> <li><a href=””>About us</a></li> <li><a href=””>Catalog</a></li> <li><a href=””>Contacts</a></li> </ul></div>
  • (3) Balance Tag Inward/Out ward<div> <ul id=”nav”> |<li><a href=””>About us</a></li> <li><a href=””>Catalog</a></li> <li><a href=””>Contacts</a></li> </ul></div> out ward?<div> <ul id=”nav”> <li><a href=””>About us</a></li> <li><a href=””>Catalog</a></li> <li><a href=””>Contacts</a></li> </ul></div>
  • (4) Go To Next/Previous Edit point<div> <div>|<span title=”|”>|</span>|</div> <p class=”title”>Lorem ipsum <a href=”|”>dolor</a> sit amet.</p> | <div> | </div> |</div>
  • (4) Go To Next/Previous Edit point Jump!<div> <div>|<span title=”|”>|</span>|</div> <p class=”title”>Lorem ipsum <a href=”|”>dolor</a> sit amet.</p> | <div> | </div> |</div>
  • (4) Go To Next/Previous Edit point Jump!<div> <div>|<span title=”|”>|</span>|</div> <p class=”title”>Lorem ipsum <a href=”|”>dolor</a> sit amet.</p> | <div> | </div> |</div>
  • (4) Go To Next/Previous Edit point Jump!<div> <div>|<span title=”|”>|</span>|</div> <p class=”title”>Lorem ipsum <a href=”|”>dolor</a> sit amet.</p> | <div> | </div> |</div>
  • (4) Go To Next/Previous Edit point Jump!<div> <div>|<span title=”|”>|</span>|</div> <p class=”title”>Lorem ipsum <a href=”|”>dolor</a> sit amet.</p> | <div> | </div> |</div>
  • (4) Go To Next/Previous Edit point<div> Jump! <div>|<span title=”|”>|</span>|</div> <p class=”title”>Lorem ipsum <a href=”|”>dolor</a> sit amet.</p> | <div> | </div> |</div>
  • (4) Go To Next/Previous Edit point<div> <div>|<span title=”|”>|</span>|</div> <p class=”title”>Lorem ipsum <a href=”|”>dolor</a> sit amet.</p> | <div> | </div> |</div>
  • (5) Update <img> Size<img src=”logo.jpg”><img src=”logo.jpg” width=”96” height=”96”>
  • (6) Merge Lines<div> <div class=”wrap”>| <p>Hello world</p> </div></div><div> <div class=”wrap”><p>Hello world</p></div></div>
  • (7) Remove Tag<div> <div class=”wrap”> <p|>Hello world</p> </div></div> remove<div> <div class=”wrap”> | </div></div> remove<div> |</div>
  • (8) Split/Join Tag<div> <div |class=”wrap”> <p>Hello world</p> </div></div> Join<div> <div |class=”wrap”/></div> Split<div> <div |class=”wrap”> </div></div>
  • (9) Toggle Comment<div> <div class=”wrap”> <p>Hel|lo world</p> </div></div><div> <div class=”wrap”> <!-- <p>Hel|lo world</p> --> </div></div>
  • (9) Toggle Comment<div> <div |class=”wrap”> <p>Hello world</p> </div></div><div> <!-- <div |class=”wrap”> <p>Hello world</p> </div> --></div>
  • demo
  • Let’s startHigh Speed Coding!
  • thank you http://twitter.com/kiyohara http://facebook.com/tomokazu.kiyohara