Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.
Communications Lab :: Web Lecture 6: More advanced examples
Announcements <ul><ul><li>JavaScript assignment #5 due today. </li></ul></ul><ul><ul><li>Office hours by appointment only ...
Final Projects Final Project Ideas - User Experience Presentations
Sending an Email from Sinatra <ul><li>require 'pony' </li></ul><ul><li>post '/contact' do </li></ul><ul><li>   Pony.mail  ...
Sending an Email from Sinatra <ul><li>require 'pony' </li></ul><ul><li>post '/send_email' do  </li></ul><ul><li>     Pony....
Sending an Email from Sinatra <ul><li>require 'pony' </li></ul><ul><li>post '/send_email' do  </li></ul><ul><li>     Pony....
Email Resources <ul><li>http://www.sinatrarb.com/faq.html#email </li></ul><ul><li>http://ididitmyway.heroku.com/past/2010/...
Embedding a Video in HTML <ul><li>1. Go to youtube.com </li></ul><ul><li>2. Click on &quot;Share&quot; </li></ul><ul><li>3...
Embedding Fonts <ul><ul><li>Sometimes you may want to use a  font that's not web safe </li></ul></ul><ul><ul><li>If you us...
Embedding Fonts <ul><li>First, download a font. A good source: http://www.dafont.com/ </li></ul><ul><li>     <style type=&...
Embedding Fonts <ul><li>An alternative is to use  typekit , compatible with all browsers </li></ul><ul><ul><li>https://typ...
Creating a Navigation Menu <ul><li>Navigation menus can actually be lists: </li></ul><ul><li>< ul  id=&quot;nav&quot; clas...
Creating a Navigation Menu <ul><li>Adding CSS: </li></ul><ul><li>        ul.menu, ul.menu li, ul.menu ul  { </li></ul><ul>...
Creating a Navigation Menu <ul><li>Some more ideas: </li></ul><ul><ul><li>http://www.hongkiat.com/blog/drop-down-menu-30-f...
A Simple Image Gallery <ul><ul><li>Download Galleria: http://galleria.aino.se/download/ </li></ul></ul><ul><ul><li>Unzip G...
A Simple Image Gallery <ul><li>4. Define a div with a &quot;gallery&quot; id (required) and list all the images you want i...
A Simple Image Gallery <ul><li>5. At the end of your file, right before the body tag, add the following piece of JavaScrip...
Uploading Files with Sinatra <ul><li>get '/' do </li></ul><ul><li>   form = &quot;&quot; </li></ul><ul><li>   form += '<fo...
Uploading Files with Sinatra <ul><li>require 'dm-core' </li></ul><ul><li>DataMapper::setup(:default, {:adapter => 'yaml', ...
Uploading Files with Sinatra <ul><li>post ' /upload_file ' do </li></ul><ul><li>   tmpfile =  params[:file][:tempfile] </l...
Uploading Files with Sinatra <ul><li>get '/images' do </li></ul><ul><li>   output = &quot; </li></ul><ul><li><!DOCTYPE htm...
Adding Image Gallery in Sinatra <ul><li>get '/images' do </li></ul><ul><li>   output = &quot;<!DOCTYPE html> </li></ul><ul...
Adding Image Gallery in Sinatra <ul><li>output += &quot; </div><script> </li></ul><ul><li>         Galleria.loadTheme('/~i...
Sinatra Resources <ul><ul><li>Sinatra Google Group: https://groups.google.com/group/sinatrarb?pli=1 </li></ul></ul><ul><ul...
Next time... <ul><li>Final Project Presentations! </li></ul>
Upcoming SlideShare
Loading in …5
×

Lecture 6 - Comm Lab: Web @ ITP

1,150 views

Published on

Published in: Technology, Art & Photos
  • Be the first to comment

  • Be the first to like this

Lecture 6 - Comm Lab: Web @ ITP

  1. 1. Communications Lab :: Web Lecture 6: More advanced examples
  2. 2. Announcements <ul><ul><li>JavaScript assignment #5 due today. </li></ul></ul><ul><ul><li>Office hours by appointment only this week. </li></ul></ul>
  3. 3. Final Projects Final Project Ideas - User Experience Presentations
  4. 4. Sending an Email from Sinatra <ul><li>require 'pony' </li></ul><ul><li>post '/contact' do </li></ul><ul><li>  Pony.mail :to => 'you@example.com', </li></ul><ul><li>            :from => 'me@example.com', </li></ul><ul><li>            :subject => 'Hello email!' </li></ul><ul><li>end </li></ul>
  5. 5. Sending an Email from Sinatra <ul><li>require 'pony' </li></ul><ul><li>post '/send_email' do  </li></ul><ul><li>    Pony.mail ( </li></ul><ul><li>      :from => params[:name] + &quot;<&quot; + params[:email] + &quot;>&quot;, </li></ul><ul><li>      :to => 'my_email@gmail.com', </li></ul><ul><li>      :subject => params[:name] + &quot; has sent you an email&quot;, </li></ul><ul><li>      :body => params[:message], </li></ul><ul><li>      ......) </li></ul><ul><li>    redirect '/success'  </li></ul><ul><li>end </li></ul>
  6. 6. Sending an Email from Sinatra <ul><li>require 'pony' </li></ul><ul><li>post '/send_email' do  </li></ul><ul><li>    Pony.mail( </li></ul><ul><li>      :from => params[:name] + &quot;<&quot; + params[:email] + &quot;>&quot;, </li></ul><ul><li>      :to => 'my_email@gmail.com', </li></ul><ul><li>      :subject => params[:name] + &quot; has sent you an email&quot;, </li></ul><ul><li>      :body => params[:message], </li></ul><ul><li>      :port => '587', </li></ul><ul><li>      :via => :smtp, </li></ul><ul><li>      :via_options => {  </li></ul><ul><li>        :address              => 'smtp.gmail.com',  </li></ul><ul><li>        :port                 => '587',  </li></ul><ul><li>        :enable_starttls_auto => true,  </li></ul><ul><li>        :user_name            => 'my_email',  </li></ul><ul><li>        :password             => 'p@55w0rd',  </li></ul><ul><li>        :authentication       => :plain,  </li></ul><ul><li>        :domain               => 'example.com' </li></ul><ul><li>      }) </li></ul><ul><li>    redirect '/success'  </li></ul><ul><li>end </li></ul>
  7. 7. Email Resources <ul><li>http://www.sinatrarb.com/faq.html#email </li></ul><ul><li>http://ididitmyway.heroku.com/past/2010/12/4/ an_email_contact_form_in_sinatra/ </li></ul><ul><li>https://github.com/adamwiggins/pony </li></ul>
  8. 8. Embedding a Video in HTML <ul><li>1. Go to youtube.com </li></ul><ul><li>2. Click on &quot;Share&quot; </li></ul><ul><li>3. Click on &quot;embed&quot; </li></ul><ul><li>4. Copy the HTML and paste it in your HTML file </li></ul>
  9. 9. Embedding Fonts <ul><ul><li>Sometimes you may want to use a font that's not web safe </li></ul></ul><ul><ul><li>If you use a font face the user doesn't have on their computer, the browser will find the closest installed font and use it instead </li></ul></ul><ul><li>The solution? Embedded fonts!  Downsides: </li></ul><ul><ul><li>Use sparingly, since fonts take a long time to download . This will significantly slow down your web pages. </li></ul></ul><ul><ul><li>Different browsers accept different types of fonts. </li></ul></ul>
  10. 10. Embedding Fonts <ul><li>First, download a font. A good source: http://www.dafont.com/ </li></ul><ul><li>    <style type=&quot;text/css&quot;> </li></ul><ul><li>      @font-face { </li></ul><ul><li>        font-family: deadends ; </li></ul><ul><li>        src: url(' deadends.ttf '); </li></ul><ul><li>      } </li></ul><ul><li>      .deadend-font { </li></ul><ul><li>        font-family: deadends ; </li></ul><ul><li>        font-size: 3.2em; </li></ul><ul><li>      } </li></ul><ul><li>    </style> </li></ul><ul><li>    <body>  </li></ul><ul><li>         <h2 class=&quot;deadend-font&quot;>Today's News</h2>  </li></ul><ul><li>     </body> </li></ul>
  11. 11. Embedding Fonts <ul><li>An alternative is to use typekit , compatible with all browsers </li></ul><ul><ul><li>https://typekit.com/ </li></ul></ul><ul><li>Hundreds of free web-safe fonts on Google web fonts : </li></ul><ul><ul><li>http://www.google.com/webfonts </li></ul></ul>
  12. 12. Creating a Navigation Menu <ul><li>Navigation menus can actually be lists: </li></ul><ul><li>< ul id=&quot;nav&quot; class=&quot;menu&quot;> </li></ul><ul><li>     < li ><a href=&quot;index.html&quot;>Home</a></ li > </li></ul><ul><li>     <li><a href=&quot;syllabus.html&quot;>Syllabus</a></li> </li></ul><ul><li>     <li><a href=&quot;schedule.html&quot;>Schedule</a></li> </li></ul><ul><li>     <li><a href=&quot;resources.html&quot;>Resources</a></li> </li></ul><ul><li>     <li><a href=&quot;contact.html&quot;>Contact</a></li> </li></ul><ul><li></ ul > </li></ul>
  13. 13. Creating a Navigation Menu <ul><li>Adding CSS: </li></ul><ul><li>      ul.menu, ul.menu li, ul.menu ul { </li></ul><ul><li>        list-style: none; </li></ul><ul><li>      } </li></ul><ul><li>      ul.menu li { </li></ul><ul><li>        padding: 7px 10px; </li></ul><ul><li>        border-style: solid; </li></ul><ul><li>        border-width: 1px 1px 1px 0; </li></ul><ul><li>        border-color: #fff #d9d9d9 #d9d9d9; </li></ul><ul><li>        background-color: #f6f6f6; </li></ul><ul><li>        float: left; </li></ul><ul><li>      } </li></ul>
  14. 14. Creating a Navigation Menu <ul><li>Some more ideas: </li></ul><ul><ul><li>http://www.hongkiat.com/blog/drop-down-menu-30-free-scripts-to-enhance-header-navigation/ </li></ul></ul>
  15. 15. A Simple Image Gallery <ul><ul><li>Download Galleria: http://galleria.aino.se/download/ </li></ul></ul><ul><ul><li>Unzip Galleria in your directory. </li></ul></ul><ul><ul><li>In your html file, include the following two JavaScript files: </li></ul></ul><ul><li>    <script src=&quot; http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.js &quot;></script> </li></ul><ul><li>    <script src=&quot; galleria/galleria-1.2.5.min.js &quot;></script> </li></ul>
  16. 16. A Simple Image Gallery <ul><li>4. Define a div with a &quot;gallery&quot; id (required) and list all the images you want inside of it. </li></ul><ul><li>    <div id=&quot;gallery&quot;> </li></ul><ul><li>      <img src=&quot;photo1.jpg&quot;> </li></ul><ul><li>      <img src=&quot;photo2.jpg&quot;> </li></ul><ul><li>      <img src=&quot;photo3.jpg&quot;> </li></ul><ul><li>    </div> </li></ul>
  17. 17. A Simple Image Gallery <ul><li>5. At the end of your file, right before the body tag, add the following piece of JavaScript to define the width, height and theme of your gallery. </li></ul><ul><li>      <script>     </li></ul><ul><li>        Galleria.loadTheme('galleria/themes/classic/ </li></ul><ul><li>galleria.classic.min.js'); </li></ul><ul><li>        $(&quot;#gallery&quot;).galleria({ </li></ul><ul><li>            width: 900, </li></ul><ul><li>            height: 700 </li></ul><ul><li>        }); </li></ul><ul><li>    </script> </li></ul>
  18. 18. Uploading Files with Sinatra <ul><li>get '/' do </li></ul><ul><li>  form = &quot;&quot; </li></ul><ul><li>  form += '<form action=&quot;http://itp.nyu.edu/~irs221/sinatra/upload /upload_file &quot; method=&quot; POST &quot; enctype=&quot;multipart/form-data&quot; >' </li></ul><ul><li>  form += '<p><label>File:</label> <input type=&quot;file&quot; name=&quot;file&quot; /></p>' </li></ul><ul><li>  form += '<p><input type=&quot;submit&quot; value=&quot;Upload&quot; /></p>' </li></ul><ul><li>  form += '</form>' </li></ul><ul><li>  form </li></ul><ul><li>end </li></ul>
  19. 19. Uploading Files with Sinatra <ul><li>require 'dm-core' </li></ul><ul><li>DataMapper::setup(:default, {:adapter => 'yaml', :path => 'db'}) </li></ul><ul><li>class Image </li></ul><ul><li>  include DataMapper::Resource </li></ul><ul><li>  property :id,                 Serial </li></ul><ul><li>  property :filename,           String </li></ul><ul><li>end </li></ul>
  20. 20. Uploading Files with Sinatra <ul><li>post ' /upload_file ' do </li></ul><ul><li>  tmpfile = params[:file][:tempfile] </li></ul><ul><li>  name = params[:file][:filename] </li></ul><ul><li>  while blk = tmpfile.read(65536) </li></ul><ul><li>      File.open(File.join(Dir.pwd,&quot;public/uploads&quot;, name), &quot;ab&quot;) { |f| f.write(blk) } </li></ul><ul><li>  end </li></ul><ul><li>  image = Image.new </li></ul><ul><li>  image.filename = params[:file][:filename]; </li></ul><ul><li>  image.save </li></ul><ul><li>  &quot;success <img src='/~irs221/sinatra/upload/public/uploads/#{params[:file][:filename]}'/>&quot; </li></ul><ul><li>end </li></ul><ul><li>Don't forget to create the directory &quot;uploads&quot; in public first! </li></ul>
  21. 21. Uploading Files with Sinatra <ul><li>get '/images' do </li></ul><ul><li>  output = &quot; </li></ul><ul><li><!DOCTYPE html> </li></ul><ul><li>  <html> </li></ul><ul><li>    <head> </li></ul><ul><li>          <meta charset=utf-8 /> </li></ul><ul><li>          <title>Images</title> </li></ul><ul><li>    </head> </li></ul><ul><li>    <body> &quot; </li></ul><ul><li>  for i in Image.all </li></ul><ul><li>    output += <<-HTML </li></ul><ul><li><p>#{i.filename}<img src='http://itp.nyu.edu/~irs221/sinatra/upload/public/uploads/#{i.filename}'/></p> </li></ul><ul><li>HTML </li></ul><ul><li>  end </li></ul><ul><li>  output += &quot; </body></html> &quot; </li></ul><ul><li>  output </li></ul><ul><li>end </li></ul>
  22. 22. Adding Image Gallery in Sinatra <ul><li>get '/images' do </li></ul><ul><li>  output = &quot;<!DOCTYPE html> </li></ul><ul><li>  <html><head> </li></ul><ul><li>      <meta charset=utf-8 /><title>Images</title> </li></ul><ul><li>      <script src='http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.js'></script> </li></ul><ul><li>      <script src='/~irs221/sinatra/upload/public/galleria/galleria-1.2.5.min.js'></script> </li></ul><ul><li>    </head><body> <div id='gallery'> &quot; </li></ul><ul><li>  for i in Image.all </li></ul><ul><li>    output += <<-HTML </li></ul><ul><li><img src='http://itp.nyu.edu/~irs221/sinatra/upload/public/uploads/#{i.filename}'/> </li></ul><ul><li>HTML </li></ul><ul><li>  end </li></ul><ul><li>   </li></ul>
  23. 23. Adding Image Gallery in Sinatra <ul><li>output += &quot; </div><script> </li></ul><ul><li>        Galleria.loadTheme('/~irs221/sinatra/upload/public/galleria/themes/classic/galleria.classic.min.js'); </li></ul><ul><li>        $('#gallery').galleria({ </li></ul><ul><li>            width: 700, </li></ul><ul><li>            height: 500 </li></ul><ul><li>        }); </li></ul><ul><li>    </script> </body></html>&quot; </li></ul><ul><li>  output </li></ul><ul><li>end </li></ul><ul><li>   </li></ul>
  24. 24. Sinatra Resources <ul><ul><li>Sinatra Google Group: https://groups.google.com/group/sinatrarb?pli=1 </li></ul></ul><ul><ul><li>DataMapper Google Group: http://groups.google.com/group/datamapper </li></ul></ul><ul><ul><li>Reference for Sinatra Syntax and Examples: http://rubydoc.info/gems/sinatra/1.3.1/file/ README.rdoc </li></ul></ul>
  25. 25. Next time... <ul><li>Final Project Presentations! </li></ul>

×