Download - Lecture 6 - Comm Lab: Web @ ITP
![Page 1: Lecture 6 - Comm Lab: Web @ ITP](https://reader035.vdocuments.us/reader035/viewer/2022062614/5458801bb1af9f39378b5616/html5/thumbnails/1.jpg)
Communications Lab :: Web
Lecture 6: More advanced examples
![Page 2: Lecture 6 - Comm Lab: Web @ ITP](https://reader035.vdocuments.us/reader035/viewer/2022062614/5458801bb1af9f39378b5616/html5/thumbnails/2.jpg)
Announcements
• JavaScript assignment #5 due today.
• Office hours by appointment only this week.
![Page 3: Lecture 6 - Comm Lab: Web @ ITP](https://reader035.vdocuments.us/reader035/viewer/2022062614/5458801bb1af9f39378b5616/html5/thumbnails/3.jpg)
Final Projects
Final Project Ideas - User Experience Presentations
![Page 4: Lecture 6 - Comm Lab: Web @ ITP](https://reader035.vdocuments.us/reader035/viewer/2022062614/5458801bb1af9f39378b5616/html5/thumbnails/4.jpg)
Sending an Email from Sinatra
require 'pony'
post '/contact' do Pony.mail :to => '[email protected]', :from => '[email protected]', :subject => 'Hello email!'end
![Page 5: Lecture 6 - Comm Lab: Web @ ITP](https://reader035.vdocuments.us/reader035/viewer/2022062614/5458801bb1af9f39378b5616/html5/thumbnails/5.jpg)
Sending an Email from Sinatra
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
![Page 6: Lecture 6 - Comm Lab: Web @ ITP](https://reader035.vdocuments.us/reader035/viewer/2022062614/5458801bb1af9f39378b5616/html5/thumbnails/6.jpg)
Sending an Email from Sinatra
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
![Page 7: Lecture 6 - Comm Lab: Web @ ITP](https://reader035.vdocuments.us/reader035/viewer/2022062614/5458801bb1af9f39378b5616/html5/thumbnails/7.jpg)
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
![Page 8: Lecture 6 - Comm Lab: Web @ ITP](https://reader035.vdocuments.us/reader035/viewer/2022062614/5458801bb1af9f39378b5616/html5/thumbnails/8.jpg)
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
![Page 9: Lecture 6 - Comm Lab: Web @ ITP](https://reader035.vdocuments.us/reader035/viewer/2022062614/5458801bb1af9f39378b5616/html5/thumbnails/9.jpg)
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.
![Page 10: Lecture 6 - Comm Lab: Web @ ITP](https://reader035.vdocuments.us/reader035/viewer/2022062614/5458801bb1af9f39378b5616/html5/thumbnails/10.jpg)
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>
![Page 11: Lecture 6 - Comm Lab: Web @ ITP](https://reader035.vdocuments.us/reader035/viewer/2022062614/5458801bb1af9f39378b5616/html5/thumbnails/11.jpg)
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
![Page 12: Lecture 6 - Comm Lab: Web @ ITP](https://reader035.vdocuments.us/reader035/viewer/2022062614/5458801bb1af9f39378b5616/html5/thumbnails/12.jpg)
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>
![Page 13: Lecture 6 - Comm Lab: Web @ ITP](https://reader035.vdocuments.us/reader035/viewer/2022062614/5458801bb1af9f39378b5616/html5/thumbnails/13.jpg)
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; }
![Page 14: Lecture 6 - Comm Lab: Web @ ITP](https://reader035.vdocuments.us/reader035/viewer/2022062614/5458801bb1af9f39378b5616/html5/thumbnails/14.jpg)
Creating a Navigation Menu
Some more ideas:• http://www.hongkiat.com/blog/drop-down-menu-30-
free-scripts-to-enhance-header-navigation/
![Page 15: Lecture 6 - Comm Lab: Web @ ITP](https://reader035.vdocuments.us/reader035/viewer/2022062614/5458801bb1af9f39378b5616/html5/thumbnails/15.jpg)
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>
![Page 16: Lecture 6 - Comm Lab: Web @ ITP](https://reader035.vdocuments.us/reader035/viewer/2022062614/5458801bb1af9f39378b5616/html5/thumbnails/16.jpg)
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>
![Page 17: Lecture 6 - Comm Lab: Web @ ITP](https://reader035.vdocuments.us/reader035/viewer/2022062614/5458801bb1af9f39378b5616/html5/thumbnails/17.jpg)
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>
![Page 18: Lecture 6 - Comm Lab: Web @ ITP](https://reader035.vdocuments.us/reader035/viewer/2022062614/5458801bb1af9f39378b5616/html5/thumbnails/18.jpg)
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
![Page 19: Lecture 6 - Comm Lab: Web @ ITP](https://reader035.vdocuments.us/reader035/viewer/2022062614/5458801bb1af9f39378b5616/html5/thumbnails/19.jpg)
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
![Page 20: Lecture 6 - Comm Lab: Web @ ITP](https://reader035.vdocuments.us/reader035/viewer/2022062614/5458801bb1af9f39378b5616/html5/thumbnails/20.jpg)
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!
![Page 21: Lecture 6 - Comm Lab: Web @ ITP](https://reader035.vdocuments.us/reader035/viewer/2022062614/5458801bb1af9f39378b5616/html5/thumbnails/21.jpg)
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
![Page 22: Lecture 6 - Comm Lab: Web @ ITP](https://reader035.vdocuments.us/reader035/viewer/2022062614/5458801bb1af9f39378b5616/html5/thumbnails/22.jpg)
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
![Page 23: Lecture 6 - Comm Lab: Web @ ITP](https://reader035.vdocuments.us/reader035/viewer/2022062614/5458801bb1af9f39378b5616/html5/thumbnails/23.jpg)
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
![Page 24: Lecture 6 - Comm Lab: Web @ ITP](https://reader035.vdocuments.us/reader035/viewer/2022062614/5458801bb1af9f39378b5616/html5/thumbnails/24.jpg)
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
![Page 25: Lecture 6 - Comm Lab: Web @ ITP](https://reader035.vdocuments.us/reader035/viewer/2022062614/5458801bb1af9f39378b5616/html5/thumbnails/25.jpg)
Next time...
Final Project Presentations!