• Share
  • Email
  • Embed
  • Like
  • Save
  • Private Content
Lecture 6 - Comm Lab: Web @ ITP
 

Lecture 6 - Comm Lab: Web @ ITP

on

  • 829 views

 

Statistics

Views

Total Views
829
Views on SlideShare
723
Embed Views
106

Actions

Likes
0
Downloads
0
Comments
0

1 Embed 106

http://itpweblab.blogspot.com 106

Accessibility

Upload Details

Uploaded via as Microsoft PowerPoint

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…
Post Comment
Edit your comment

    Lecture 6 - Comm Lab: Web @ ITP Lecture 6 - Comm Lab: Web @ ITP Presentation Transcript

    • Communications Lab :: Web Lecture 6: More advanced examples
    • Announcements
        • JavaScript assignment #5 due today.
        • Office hours by appointment only this week.
    • Final Projects Final Project Ideas - User Experience Presentations
    • Sending an Email from Sinatra
      • require 'pony'
      • post '/contact' do
      •   Pony.mail :to => 'you@example.com',
      •             :from => 'me@example.com',
      •             :subject => 'Hello email!'
      • end
    • 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
    • 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
    • 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
    • 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
    • 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.
    • 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>
    • 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
    • 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 >
    • 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;
      •       }
    • Creating a Navigation Menu
      • Some more ideas:
        • http://www.hongkiat.com/blog/drop-down-menu-30-free-scripts-to-enhance-header-navigation/
    • 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>
    • 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>
    • 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>
    • 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
    • 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
    • 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!
    • 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
    • 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
      •   
    • 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
      •   
    • 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
    • Next time...
      • Final Project Presentations!