Your SlideShare is downloading. ×
0
Lecture 6 - Comm Lab: Web @ ITP
Lecture 6 - Comm Lab: Web @ ITP
Lecture 6 - Comm Lab: Web @ ITP
Lecture 6 - Comm Lab: Web @ ITP
Lecture 6 - Comm Lab: Web @ ITP
Lecture 6 - Comm Lab: Web @ ITP
Lecture 6 - Comm Lab: Web @ ITP
Lecture 6 - Comm Lab: Web @ ITP
Lecture 6 - Comm Lab: Web @ ITP
Lecture 6 - Comm Lab: Web @ ITP
Lecture 6 - Comm Lab: Web @ ITP
Lecture 6 - Comm Lab: Web @ ITP
Lecture 6 - Comm Lab: Web @ ITP
Lecture 6 - Comm Lab: Web @ ITP
Lecture 6 - Comm Lab: Web @ ITP
Lecture 6 - Comm Lab: Web @ ITP
Lecture 6 - Comm Lab: Web @ ITP
Lecture 6 - Comm Lab: Web @ ITP
Lecture 6 - Comm Lab: Web @ ITP
Lecture 6 - Comm Lab: Web @ ITP
Lecture 6 - Comm Lab: Web @ ITP
Lecture 6 - Comm Lab: Web @ ITP
Lecture 6 - Comm Lab: Web @ ITP
Lecture 6 - Comm Lab: Web @ ITP
Lecture 6 - Comm Lab: Web @ ITP
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

Lecture 6 - Comm Lab: Web @ ITP

850

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

×