lecture 6 - comm lab: web @ itp
Post on 01-Nov-2014
972 Views
Preview:
DESCRIPTION
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] + "<" + params[:email] + ">", :to => 'my_email@gmail.com', :subject => params[:name] + " has sent you an email", :body => params[:message], ......) redirect '/success' end
Sending an Email from Sinatra
require 'pony'post '/send_email' do Pony.mail( :from => params[:name] + "<" + params[:email] + ">", :to => 'my_email@gmail.com', :subject => params[:name] + " has sent you an email", :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.com2. Click on "Share"3. Click on "embed"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="text/css"> @font-face { font-family: deadends; src: url('deadends.ttf'); } .deadend-font { font-family: deadends; font-size: 3.2em; } </style> <body> <h2 class="deadend-font">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="nav" class="menu"> <li><a href="index.html">Home</a></li> <li><a href="syllabus.html">Syllabus</a></li> <li><a href="schedule.html">Schedule</a></li> <li><a href="resources.html">Resources</a></li> <li><a href="contact.html">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
1.Download Galleria: http://galleria.aino.se/download/2.Unzip Galleria in your directory.3.In your html file, include the following two JavaScript
files:
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.js"></script> <script src="galleria/galleria-1.2.5.min.js"></script>
A Simple Image Gallery
4. Define a div with a "gallery" id (required) and list all the images you want inside of it.
<div id="gallery"> <img src="photo1.jpg"> <img src="photo2.jpg"> <img src="photo3.jpg"> </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'); $("#gallery").galleria({ width: 900, height: 700 }); </script>
Uploading Files with Sinatra
get '/' do form = "" form += '<form action="http://itp.nyu.edu/~irs221/sinatra/upload/upload_file" method="POST" enctype="multipart/form-data">' form += '<p><label>File:</label> <input type="file" name="file" /></p>' form += '<p><input type="submit" value="Upload" /></p>' form += '</form>' formend
Uploading Files with Sinatra
require 'dm-core'
DataMapper::setup(:default, {:adapter => 'yaml', :path => 'db'})
class Image include DataMapper::Resource
property :id, Serial property :filename, Stringend
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,"public/uploads", name), "ab") { |f| f.write(blk) } end
image = Image.new image.filename = params[:file][:filename]; image.save
"success <img src='/~irs221/sinatra/upload/public/uploads/#{params[:file][:filename]}'/>"end
Don't forget to create the directory "uploads" in public first!
Uploading Files with Sinatra
get '/images' do output = "<!DOCTYPE html> <html> <head> <meta charset=utf-8 /> <title>Images</title> </head> <body>" 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 += "</body></html>" outputend
Adding Image Gallery in Sinatra
get '/images' do output = "<!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'>" 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 += "</div><script> Galleria.loadTheme('/~irs221/sinatra/upload/public/galleria/themes/classic/galleria.classic.min.js'); $('#gallery').galleria({ width: 700, height: 500 }); </script></body></html>" outputend
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!
top related