Lecture 6 - Comm Lab: Web @ ITP

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 => '[email protected]', :from => '[email protected]', :subject => 'Hello email!'end


require 'pony'

post '/send_email' do Pony.mail( :from => params[:name] + "<" + params[:email] + ">", :to => '[email protected]', :subject => params[:name] + " has sent you an email", :body => params[:message], ......) redirect '/success' end


require 'pony'post '/send_email' do Pony.mail( :from => params[:name] + "<" + params[:email] + ">", :to => '[email protected]', :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>


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; }


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>


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>


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


require 'dm-core'

DataMapper::setup(:default, {:adapter => 'yaml', :path => 'db'})

class Image include DataMapper::Resource

property :id, Serial property :filename, Stringend


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!


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!

Technology

Lecture 6 - Comm Lab: Web @ ITP