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

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

on

  • 3,368 views

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 !

Statistics

Views

Total Views
3,368
Views on SlideShare
2,853
Embed Views
515

Actions

Likes
0
Downloads
7
Comments
1

5 Embeds 515

http://ivy.fr 361
http://www.ivy.fr 148
http://www.slideshare.net 4
http://spider.newsisfree.com 1
http://web.archive.org 1

Accessibility

Categories

Upload Details

Uploaded via as Adobe PDF

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
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
  • HAML solves this problem as well. Did you guys evaluate it as well?
    Also there is python port PyHAML
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment

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

  • 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
  • Less Is More
  • Less Typing Is More Thinking (and faster prototyping)
  • As designers we need to turn an idea into a prototype FAST !
  • Plain HTML Too Many Typos with Big documents
  • Plain HTML Too Much Typing with Modern HTML
  • 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>
  • 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>
  • 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>
  • Pamela : simply syntax sugar for html (not a templating language)
  • 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>
  • 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>
  • 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>
  • 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 !
  • 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>
  • 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>
  • 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>
  • 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
  • Pamela in Practice
  • Pamela in Practice
  • Pamela in Practice
  • 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 !
  • The end Thank you ! www.github.com/sebastien/pamela www.datalicious.ca sebastien@datalicious.ca