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

876

Published on

Published in: Technology, Art & Photos
0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total Views
876
On Slideshare
0
From Embeds
0
Number of Embeds
1
Actions
Shares
0
Downloads
1
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

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>
  1. A particular slide catching your eye?

    Clipping is a handy way to collect important slides you want to go back to later.

×