Downloaded 16 times
![Backend Developer?
save: function() {
if (this.blank) {
Telecaster.db.create("INSERT INTO files (name, content) VALUES (?, ?)",
[this.name, this.content], function(t, r){
this.id = r.insertId;
this.blank = false;
}.bind(this));
} else {
Telecaster.db.update("UPDATE files SET name=?, content=? WHERE id=?",
[this.name, this.content, this.id], function(t, r){
}.bind(this));
}
this.blank = false;
}](https://image.slidesharecdn.com/webappdesign-101015233747-phpapp01/85/Advanced-Technology-for-Web-Application-Design-3-320.jpg)
![CoffeeScript
• Compiles to safe, valid cross-browser compatible JavaScript
var _i, _j, _len, _len2, _ref, _ref2, roid, roid2;
_ref = asteroids;
for (_i = 0, _len = _ref.length; _i < _len; _i++) {
roid = _ref[_i];
_ref2 = asteroids;
for (_j = 0, _len2 = _ref2.length; _j < _len2; _j++) {
roid2 = _ref2[_j];
if (roid !== roid2) {
if (roid.overlaps(roid2)) {
roid.explode();
}
}
}
}](https://image.slidesharecdn.com/webappdesign-101015233747-phpapp01/85/Advanced-Technology-for-Web-Application-Design-50-320.jpg)
![CoffeeScript
• Not a “JavaScript framework” like
Prototype or jQuery
$('.navigation').click (e) ->
return if e.target.tagName.toLowerCase() is 'a'
if this isnt (current_nav and current_nav[0])
close_menus()
current_nav = $(this)
current_nav.addClass 'active'
false](https://image.slidesharecdn.com/webappdesign-101015233747-phpapp01/85/Advanced-Technology-for-Web-Application-Design-51-320.jpg)
![http://bit.ly/jsvscs
save: function() {
if (this.blank) {
Telecaster.db.create("INSERT INTO files (name, content) VALUES (?, ?)",
[this.name, this.content], function(t, r){
this.id = r.insertId;
this.blank = false;
}.bind(this));
} else {
Telecaster.db.update("UPDATE files SET name=?, content=? WHERE id=?",
[this.name, this.content, this.id], function(t, r){
}.bind(this));
}
this.blank = false;
}
save: ->
if @blank
Telecaster.db.create "INSERT INTO files (name, content) VALUES (?, ?)",
[@name, @content],
(t, r) =>
@id = r.insertId
@blank = false
else
Telecaster.db.update "UPDATE files SET name=?, content=? WHERE id=?",
[@name, @content, @id],
(t, r) =>
@blank = false](https://image.slidesharecdn.com/webappdesign-101015233747-phpapp01/85/Advanced-Technology-for-Web-Application-Design-52-320.jpg)
![Rake
require 'rake'
require 'fileutils'
include FileUtils
HAMLS = Rake::FileList['pages/*.html.haml']
HAML_OUTPUT = HAMLS.map{ |f| f.sub(/^pages/, 'output').sub(/.haml$/, '') }
HAMLS.zip(HAML_OUTPUT) do |p|
input, output = p
file output => [input, 'output'] do
sh 'haml', input, output
end
end](https://image.slidesharecdn.com/webappdesign-101015233747-phpapp01/85/Advanced-Technology-for-Web-Application-Design-64-320.jpg)
Uploaded byBryce Kerley
Advanced Technology for Web Application Design
This document provides an overview and introduction to advanced technologies for web design, including HAML, SASS, Compass, CoffeeScript, Rake, and Charleston. HAML and SASS are markup languages that can simplify and improve HTML and CSS. Compass is a CSS meta-framework built with SASS. CoffeeScript is a programming language that compiles to JavaScript. Rake is a build tool that can be used with these technologies. Charleston is a static site generator that bundles Rake rules for using HAML, SASS, and CoffeeScript together on a project. Installation and usage instructions are provided for each technology.
More Related Content
Similar to Advanced Technology for Web Application Design
Advanced Technology for Web Application Design
- 1. Advanced Technology for Web Design Miami DesignMeetup October 13, 2010
- 2. Who? I’m Bryce. I livedown the street. I’ve been accused of being a backend developer.
- 3. Backend Developer? save: function(){ if (this.blank) { Telecaster.db.create("INSERT INTO files (name, content) VALUES (?, ?)", [this.name, this.content], function(t, r){ this.id = r.insertId; this.blank = false; }.bind(this)); } else { Telecaster.db.update("UPDATE files SET name=?, content=? WHERE id=?", [this.name, this.content, this.id], function(t, r){ }.bind(this)); } this.blank = false; }
- 4. Backend Developer • Thispresentation is a bit terminal-centric. • Mac OS X: • /Applications/Utilities/Terminal.app • Windows: • Command Line or cmd.exe
- 7.
- 8. Browser Languages HTML -content CSS - display content JavaScript - animate content
- 9. Additional Tools Compass -CSS meta-framework Rake - build tool Charleston - site framework
- 10. Topics • HAML • SASS •Compass • CoffeeScript • Rake • Charleston
- 11.
- 12. HAML Hampton’s HTML Awesome Abstraction Markup Markup Language Language
- 13. HTML <div class='editor_box'> <div class='chrome'> <inputid='filename' /> <span class='button' id='save_button'>Save</span> <span class='button' id='eval_button'>Eval</span> </div> <textarea id='editor'></textarea> </div>
- 14.
- 15.
- 16. HAML .editor_box class name .chrome %input#filename %span.button#save_button Save
- 17. HAML .editor_box class name .chrome Implicit div %input#filename %span.button#save_button Save
- 18. HAML .editor_box class name .chrome Implicit div %input#filename tag name, id name %span.button#save_button Save
- 19. HAML .editor_box class name .chrome Implicit div %input#filename tag name, id name %span.button#save_button Save tag, class, and id names
- 20. HAML !!! 5 %head %title hamldemo %body %h1 hello .content %p I am a paragraph. :markdown You can embed markdown in HAML, because HAML isn't great at body text.
- 21. HTML <!DOCTYPE html> <head> <title>haml demo</title> </head> <body> <h1>hello</h1> <divclass='content'> <p> I am a paragraph. </p> <p>You can embed markdown in HAML, because HAML isn't great at body text.</p> </div> </body>
- 22. Installation • Mac OSX: 1. gem install haml • Windows: 1. Install ruby from http://rubyinstaller.org 2. gem install haml
- 23. HAML Work ow 1.WriteHAML le 2.Use haml tool 3.Enjoy HTML le
- 24. HAML Work ow hamldemo.haml > demo.html
- 25.
- 26.
- 27. CSS .header { height:89px; … } .header div { height: 89px; } .header .logo { width: 253px; height: 89px; …} .header .logo a:link, .header .logo a:visited { width: 253px; height: 89px; }
- 28. SASS $header_height: 89px $logo_width: 253px .header height:$header_height div height: $header_height .logo width: $logo_width height: $header_height a:link, a:visited width: $logo_width height: $header_height
- 29.
- 30. SASS $header_height: 89px variable assignment .header height: $header_height div width: $logo_width
- 31. SASS $header_height: 89px variable assignment .header properties get braced height: $header_height div width: $logo_width
- 32. SASS $header_height: 89px variable assignment .header properties get braced height: $header_height variable reference div width: $logo_width
- 33. SASS $header_height: 89px variable assignment .header properties get braced height: $header_height variable reference div nesting width: $logo_width
- 34. Installation • Mac OSX: 1. gem install haml • Windows: 1. Install ruby from http://rubyinstaller.org 2. gem install haml
- 35. SASS Work ow 1.WriteSASS le 2.Use sass tool 3.Enjoy CSS le
- 36. SASS Work ow sassdemo.sass > demo.css
- 37.
- 38. Compass CSS Meta-framework built with SASS
- 39. Compass body#index %body#index #headers #headers #page-header #page-header my groceries +span(6) #files-header link to groceries.csv #files-header #description-header +span(8) i need these to eat! #description-header #content +span(10) %ul#groceries %li turkey cutlets #content %li captain crunch ul#groceries %li 12 green peppers +no-bullets %li Brooklyn Local 1
- 40. Blueprint vs. Compass • Blueprint: • Express structure as classes in HTML • Express layout as classes in HTML • Do layout and formatting in CSS • Do text formatting in CSS • Mix in Compass styles where needed • Don’t mess up the Blueprint styles • Great way to build stable layouts • Marginally better than tables • Compass:
- 41. A Bit ofHistory HAML + SASS
- 42. Ruby on Rails3 Gem le: gem 'haml-rails' ???compass/sass
- 43.
- 44. Topics • HAML • SASS •Compass • CoffeeScript • Rake • Charleston
- 45.
- 46. JavaScript LISP in C’sClothing - Douglas Crockford
- 47. JavaScript Functional math = { Object-oriented root: Math.sqrt, square: square, Runs everywhere cube: function(x) { return x * square(x); } Gnarly syntax }; Esoteric restrictions
- 48. CoffeeScript math = { root: Math.sqrt, math = square: square, root: Math.sqrt cube: function(x) { square: square return x * square(x); cube: (x) -> x * square x } };
- 49. CoffeeScript • Indentation-basedsyntax • Simpler function de nitions • Simpler loops and conditionals for roid in asteroids for roid2 in asteroids when roid isnt roid2 roid.explode() if roid.overlaps roid2
- 50. CoffeeScript • Compiles to safe, valid cross-browser compatible JavaScript var _i, _j, _len, _len2, _ref, _ref2, roid, roid2; _ref = asteroids; for (_i = 0, _len = _ref.length; _i < _len; _i++) { roid = _ref[_i]; _ref2 = asteroids; for (_j = 0, _len2 = _ref2.length; _j < _len2; _j++) { roid2 = _ref2[_j]; if (roid !== roid2) { if (roid.overlaps(roid2)) { roid.explode(); } } } }
- 51. CoffeeScript • Not a “JavaScript framework” like Prototype or jQuery $('.navigation').click (e) -> return if e.target.tagName.toLowerCase() is 'a' if this isnt (current_nav and current_nav[0]) close_menus() current_nav = $(this) current_nav.addClass 'active' false
- 52. http://bit.ly/jsvscs save: function() { if(this.blank) { Telecaster.db.create("INSERT INTO files (name, content) VALUES (?, ?)", [this.name, this.content], function(t, r){ this.id = r.insertId; this.blank = false; }.bind(this)); } else { Telecaster.db.update("UPDATE files SET name=?, content=? WHERE id=?", [this.name, this.content, this.id], function(t, r){ }.bind(this)); } this.blank = false; } save: -> if @blank Telecaster.db.create "INSERT INTO files (name, content) VALUES (?, ?)", [@name, @content], (t, r) => @id = r.insertId @blank = false else Telecaster.db.update "UPDATE files SET name=?, content=? WHERE id=?", [@name, @content, @id], (t, r) => @blank = false
- 53. Disclaimer CoffeeScript is justfor fun. Until it reaches 1.0, there are no guarantees that the syntax won't change between versions. http://jashkenas.github.com/coffee-script/ emphasis added
- 54. Disclaimer CoffeeScript is justfor fun. Until it reaches 1.0, there are no guarantees that the syntax won't change between versions. http://jashkenas.github.com/coffee-script/ emphasis added
- 55. Installation • Mac OSX with homebrew: 1. brew install coffee-script • Windows: 1. Please read http://bit.ly/coffee4win
- 56. CoffeeScript Build-time vs. Load-time
- 57.
- 58. Load-time <script type="text/coffeescript"> #CoffeeScript here </script> <script src="coffee-script.js"></script>
- 59.
- 60. Topics • HAML • SASS •Compass • CoffeeScript • Rake • Charleston
- 61.
- 62.
- 63. Rake Ruby-based buildtool Used internally by HAML, SASS, CoffeeScript
- 64. Rake require 'rake' require 'fileutils' includeFileUtils HAMLS = Rake::FileList['pages/*.html.haml'] HAML_OUTPUT = HAMLS.map{ |f| f.sub(/^pages/, 'output').sub(/.haml$/, '') } HAMLS.zip(HAML_OUTPUT) do |p| input, output = p file output => [input, 'output'] do sh 'haml', input, output end end
- 65. Rake My secret Rakele technique
- 66. Rake My secret Rakele technique Just copy the last one you wrote and modify it as little as possible.
- 67.
- 68.
- 69. Charleston The static sitegenerator I want to use.
- 70.
- 71. Charleston • Bundle ofRake rules • Example HAML, SASS, and CoffeeScript les • Installs HAML and SASS • Requires separate CoffeeScript install
- 72. Charleston Installation • MacOS X: • sudo gem install charleston • Windows: 1. Install ruby from http://rubyinstaller.org 2. gem install charleston
- 73. Charleston Usage charleston my_project cdmy_project rake open output/index.html
- 75. Charleston Creating a NewPage 1. Create new HTML or HAML le in your_project/pages 2. Link to new_page.html (even if it’s HAML) in your existing pages %a(href='new_page.html')
- 76. Charleston Creating a NewStylesheet 1. Create new CSS or SASS le in your_project/stylesheets 2. Reference stylesheets/your_stylesheet.css (even if it’s SASS) in appropriate HTML les %link(rel='stylesheet' type='text/css' href='stylesheets/screen.css')
- 77. Charleston Creating a NewScript 1. Create new JavaScript or CoffeeScript le in your_project/javascripts 2. Reference javascripts/your_script.js (even if it’s CoffeeScript) in appropriate HTML les %script(type='text/javascript' src='javascripts/example.js')
- 78. Charleston Adding an Image 1.Put the image le in your_project/images 2. Reference images/charleston_chew.jpg in appropriate HTML les %img(src='images/charleston_chew.jpg' alt='some candy’)
- 79. Charleston • Each Charlestonproject is a separate directory. • You should aggressively version-control these projects. • The only les you need to upload are in the output directory.
- 80.
- 81. Summary HAML SASS Compass CoffeeScript Rake Charleston
- 82. Photo Credits All photosare of your friendly local historic mansion landmark, Villa Vizcaya. http://www. ickr.com/photos/gesteves/3336482837/ http://www. ickr.com/photos/mattkieffer/4671838772/ http://www. ickr.com/photos/portablematthew/21583071/ http://www. ickr.com/photos/spbutterworth/2755374263/ http://www. ickr.com/photos/gesteves/3337338344/ http://www. ickr.com/photos/italintheheart/4017460039/
- 83.