Your SlideShare is downloading. ×
Pamela - Brining back the pleasure of hand-written HTML - Montréal Python 8
Upcoming SlideShare
Loading in...5
×

Thanks for flagging this SlideShare!

Oops! An error has occurred.

×

Saving this for later?

Get the SlideShare app to save on your phone or tablet. Read anywhere, anytime - even offline.

Text the download link to your phone

Standard text messaging rates apply

Pamela - Brining back the pleasure of hand-written HTML - Montréal Python 8

2,238
views

Published on

Pamela allows you to write HTML faster by provider a CSS-savvy Python-inspired syntax that will reduce the risk of errors and make you more productive !

Pamela allows you to write HTML faster by provider a CSS-savvy Python-inspired syntax that will reduce the risk of errors and make you more productive !

Published in: Technology

1 Comment
0 Likes
Statistics
Notes
  • Be the first to like this

No Downloads
Views
Total Views
2,238
On Slideshare
0
From Embeds
0
Number of Embeds
1
Actions
Shares
0
Downloads
8
Comments
1
Likes
0
Embeds 0
No embeds

Report content
Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
No notes for slide

Transcript

  • 1. Pamela bringing back the pleasure of hand-written HTML Sébastien Pierre, Datalicious @Montréal Python 8, Jul. 2009 www.datalicious.ca | github.com/sebastien/pamela
  • 2. Less Is More
  • 3. Less Typing Is More Thinking (and faster prototyping)
  • 4. As designers we need to turn an idea into a prototype FAST !
  • 5. Plain HTML Too Many Typos with Big documents
  • 6. Plain HTML Too Much Typing with Modern HTML
  • 7. Modern HTML <html> <body> <div class="section"> <html> <div class="header"> <body> <h1 class="title">My First <h1>My First HTML Page<h1> HTML Page</h1> Hello, World ! </div> </body> <div class="content"> </html> Hello, World ! </div> </div> </body> </html>
  • 8. Modern HTML We add a lot more <div>s and <span>s to hook CSS rules <html> <body> <div class="section"> <html> <div class="header"> <body> <h1 class="title">My First <h1>My First HTML Page<h1> HTML Page</h1> Hello, World ! </div> </body> <div class="content"> </html> Hello, World ! </div> </div> </body> </html>
  • 9. Modern HTML <html> <body> <div class="section"> <html> <div class="header"> <body> <h1 class="title">My First <h1>My First HTML Page<h1> HTML Page</h1> Hello, World ! </div> </body> Which means <div class="content"> </html> more chances of Hello, World ! forgetting to close </div> a <div> or <span> </div> </body> </html>
  • 10. Pamela : simply syntax sugar for html (not a templating language)
  • 11. Feature 1: Indentation-based Python does it well No more oops, I forget to close my <div> <html | <body | | <h1:Pamela : Bringing back the pleasure of hand-written HTML ! | | Check out Pamela <a(href=http://github.com/sebastien/pamela):here>
  • 12. Feature 1: Indentation-based Python does it well No more oops, I forget to close my <div> Here the Python-style indentation <html | <body | | <h1:Pamela : Bringing back the pleasure of hand-written HTML ! | | Check out Pamela <a(href=http://github.com/sebastien/pamela):here>
  • 13. Feature 1: Indentation-based Python does it well No more oops, I forget to close my <div> We use a small variant <html of the HTML element syntax | <body | | <h1:Pamela : Bringing back the pleasure of hand-written HTML ! | | Check out Pamela <a(href=http://github.com/sebastien/pamela):here> <a href=http://github.com/sebastien/pamela>here</a>
  • 14. Feature 1: Indentation-based Python does it well No more oops, I forget to close my <div> <html | <body | | <h1:Pamela : Bringing back the pleasure of hand-written HTML ! | | Check out Pamela <a(href=http://github.com/sebastien/pamela):here> <a href=http://github.com/sebastien/pamela>here</a> # EOF No explicit closing needed !
  • 15. Feature 2 : ID and CSS shorthands Classes and IDs used a lot by JS libs (jQuery, Prototype, ) We use them a lot with CSS frameworks (Blueprint, 960,...) <div#content | <div.section | | <h1.title:Pamela : Bringing back the pleasure of hand-written HTML ! | | Check out Pamela | | <a#pid.pamela.link(href=http://github.com/sebastien/pamela):here>
  • 16. Feature 2 : ID and CSS shorthands Classes and IDs used a lot by JS libs (jQuery, Prototype, ) We use them a lot with CSS frameworks (Blueprint, 960,...) IDs are denoted as in CSS selectors #<ID_NAME> <div#content | <div.section | | <h1.title:Pamela : Bringing back the pleasure of hand-written HTML ! | | Check out Pamela | | <a#pid.pamela.link(href=http://github.com/sebastien/pamela):here>
  • 17. Feature 2 : ID and CSS shorthands Classes and IDs used a lot by JS libs (jQuery, Prototype, ) We use them a lot with CSS frameworks (Blueprint, 960,...) Same for classes <div#content .<CLASS_NAME> | <div.section | | <h1.title:Pamela : Bringing back the pleasure of hand-written HTML ! | | Check out Pamela | | <a#pid.pamela.link(href=http://github.com/sebastien/pamela):here>
  • 18. Feature 2 : ID and CSS shorthands Classes and IDs used a lot by JS libs (jQuery, Prototype, ) We use them a lot with CSS frameworks (Blueprint, 960,...) <div#content | <div.section | | <h1.title:Pamela : Bringing back the pleasure of hand-written HTML ! | | Check out Pamela | | <a#pid.pamela.link(href=http://github.com/sebastien/pamela):here> You can mix classes and ID, ID always comes first
  • 19. Pamela in Practice
  • 20. Pamela in Practice
  • 21. Pamela in Practice
  • 22. Pamela in a Nutshell Faithful to HTML/CSS Syntax is a variant of HTML, using CSS selector conventions Less errors, more time Python-style indentation and shorthands make you safer and faster Flexible Can be used as a command-line processor or as a Python module Powerful Manage whitespace, include files, add variables and more !
  • 23. The end Thank you ! www.github.com/sebastien/pamela www.datalicious.ca sebastien@datalicious.ca