Skip to content
Browse files

Views & CSS/Images

Now that we've gotten the Gemfile taken care of so DotCloud can install
our dependencies we add the last parts of our application. We're adding
all the views used, as well as the images and CSS on the page.

This tutorial is using Haml as the markup language but you could
substitute your preferred language (erb, slim, etc). Let's talk just a
bit about some of the views.

First, ``layout.haml`` serves to generate the "layout" of our site or
"what goes where" if you will. Thanks to Haml we save quite a bit of
typing. Sinatra by default looks for a file named layout in the
``views/`` directory to serve as the applications layout, we don't need
to do anything special to get this to work.

The ``index.haml`` gives us the header text, image, and 'view source'
link and tells Sinatra to render our two remaining templates, text and
footer.

``text.haml`` is the form that contains the input fields for "Number"
and "Message" as well as the "Text Me!" button. Finally ``footer.haml``
is made up of just the Twitter logo. It might be overkill in this simple
example to give this its own template but if the application were to
grow it makes it a little easier to add things and keeps our templates small.

With these files added you can now ``dotcloud push cloudsinger`` and
then visit the URL of your deployed app. When you visit the URL you
should be able to supply a phone number and a message (140 characters or
less of course!) that you would like to send. Click on "Text Me!" and if
you've setup ``config.yml`` correctly and all systems are go, you should
get a text shortly at the number you provided. Please note that if
you're using a Twilio demo account you may need to edit ``app.rb`` line
33. In this file you will need to add your Twilio PIN as the first
argument to ``Twilio::Sms.message()``, this is also documented directly
in ``app.rb``.

This is just the beginning of what's possible with Twilio. You can make
and receive phone calls, record them, create conferences, and receive
SMS messages. In a non-trivial application you would login to the Twilio
dashboard and setup Twilio to HTTP POST to a URL of your app when
someone calls or SMS messages your application and you would then write
the code to handle those POST events.

I hope you've enjoyed this DotCloud + Twilio demo, feel free to drop us
a line if you have problems.
  • Loading branch information...
1 parent 7ee81a4 commit 04b27f1b23a90850eff3cda5979cdbf577f2bdbf @caleywoods committed Sep 1, 2011
View
BIN public/.DS_Store
Binary file not shown.
View
148 public/css/style.css
@@ -0,0 +1,148 @@
+html, body, div, span, applet, object, iframe,
+h1, h2, h3, h4, h5, h6, p, blockquote, pre,
+a, abbr, acronym, address, big, cite, code,
+del, dfn, em, img, ins, kbd, q, s, samp,
+small, strike, strong, sub, sup, tt, var,
+b, u, i, center,
+dl, dt, dd, ol, ul, li,
+fieldset, form, label, legend,
+table, caption, tbody, tfoot, thead, tr, th, td,
+article, aside, canvas, details, embed,
+figure, figcaption, footer, header, hgroup,
+menu, nav, output, ruby, section, summary,
+time, mark, audio, video {
+ margin: 0;
+ padding: 0;
+ border: 0;
+ font-size: 100%;
+ font: inherit;
+ vertical-align: baseline;
+}
+
+body {
+ background: url(images/bg.png) repeat;
+ font-family: Helvetica, Arial, sans-serif;
+ padding-bottom: 60px;
+}
+
+a {
+ color: #3b7da6;
+}
+
+.sms {
+ margin: 10px;
+}
+
+input[type="submit"] {
+ display: inline-block;
+ padding: 8px 10px;
+ color: #333;
+ font-family: Arial, Helvetica, sans-serif;
+ font-weight: bold;
+ font-size: 12px;
+ text-shadow: 0 1px #fff;
+ text-decoration: none;
+ text-transform: uppercase;
+ background: #f4f4f4;
+ background: -webkit-gradient(linear, left top, left bottom, from(#fefefe), to(#e9e9e9));
+ background: -moz-linear-gradient(center top, #fefefe 0%, #e9e9e9 100%);
+ background: -moz-gradient(center top, #fefefe 0%, #e9e9e9 100%);
+ border: 1px solid #c9c9c9;
+ -webkit-background-clip: padding-box;
+ -webkit-border-radius: 4px;
+ -moz-background-clip: padding-box;
+ -moz-border-radius: 4px;
+ border-radius: 4px;
+ background-clip: padding-box;
+ -webkit-box-shadow: inset 0 -1px 0 #ffffff;
+ -moz-box-shadow: inset 0 -1px 0 #ffffff;
+ box-shadow: inset 0 -1px 0 #ffffff;
+ cursor: pointer;
+}
+
+input[type="submit"]:hover {
+ -webkit-box-shadow: 0 1px 0 rgba(255, 255, 255, 0.6) inset, 0 0 7px rgba(0, 0, 0, 0.4) inset;
+ -moz-box-shadow: 0 1px 0 rgba(255, 255, 255, 0.6) inset, 0 0 7px rgba(0, 0, 0, 0.4) inset;
+ box-shadow: 0 1px 0 rgba(255, 255, 255, 0.6) inset, 0 0 7px rgba(0, 0, 0, 0.4) inset;
+}
+
+input[type="submit"] {
+ color: #fff;
+ text-shadow: 0 -1px rgba(0, 0, 0, 0.4);
+ text-decoration: none;
+ background: #d26624;
+ background: -webkit-gradient(linear, left top, left bottom, from(#e2893a), to(#c2420d));
+ background: -moz-linear-gradient(center top, #e2893a 0%, #c2420d 100%);
+ background: -moz-gradient(center top, #e2893a 0%, #c2420d 100%);
+ border: 1px solid #c2420d;
+ -webkit-box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.45);
+ -moz-box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.45);
+ box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.45);
+}
+
+header {
+ background: #444e65;
+ background: -webkit-gradient(linear, left top, left bottom, from(#626b82), to(#253047));
+ background: -moz-linear-gradient(center top, #626b82 0%, #253047 100%);
+ background: -moz-gradient(center top, #626b82 0%, #253047 100%);
+ padding: 15px 0;
+ border-bottom: 1px solid #fff;
+ color: #fff;
+ text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.7);
+ overflow: hidden;
+}
+
+header h1 {
+ font-family: "helvetica neue";
+ position: absolute;
+ top: 8px;
+ font-size: 25px;
+ margin-left: 5px;
+}
+
+header a {
+ color: #fff;
+ font-weight: bold;
+ text-decoration: none;
+}
+
+header aside {
+ float: right;
+}
+
+header img {
+ position: absolute;
+ top: 10px;
+ left: 265px;
+}
+
+form input[type="text"], form textarea {
+ background: #f4f4f4;
+ background: -webkit-gradient(linear, left top, left bottom, from(#e9e9e9), to(#fefefe));
+ border: 1px solid #c9c9c9;
+ -webkit-background-clip: padding-box;
+ -webkit-border-radius: 4px;
+ border-radius: 4px;
+ background-clip: padding-box;
+ -webkit-box-shadow: inset 0 1px 0 #ffffff;
+ box-shadow: inset 0 1px 0 #ffffff;
+ padding: 7px 10px;
+ font-size: 14px;
+ color: #222;
+ line-height: 1.4;
+ margin-bottom: 10px;
+ width: 170px;
+}
+
+form input[type="text"]:focus, form textarea:focus {
+ border: 1px solid #999;
+}
+
+form input[type="submit"] {
+ width: 190px;
+}
+
+footer .twitter a {
+ background: url(images/twitter.png) no-repeat;
+ text-decoration: none;
+}
View
BIN public/images/bg.png
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
View
BIN public/images/logo.png
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
View
BIN public/images/twitter.png
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
View
5 views/footer.haml
@@ -0,0 +1,5 @@
+%footer
+ .twitter
+ %a{:href => 'http://twitter.com/dot_cloud'}
+ %img{:src => 'images/twitter.png',
+ :height => '40px'}
View
12 views/index.haml
@@ -0,0 +1,12 @@
+%header
+ %h1
+ DotCloud Twilio Demo
+ %a{:href => 'http://dotcloud.com'}
+ %img{:src => 'images/logo.png'}
+ %aside
+ %a{:href => 'http://bit.ly/nHu1dr'}View Source
+%br/
+.sms
+ = haml :text
+.footer
+ = haml :footer
View
9 views/layout.haml
@@ -0,0 +1,9 @@
+!!! 5
+%html
+ %head
+ %title We Love You Long Time
+ %link{:type => 'text/css',
+ :rel => 'stylesheet',
+ :href => 'css/style.css'}
+ %body
+ = yield
View
10 views/text.haml
@@ -0,0 +1,10 @@
+%form{:action => "/sms", :method => "POST", :name => "sms_form"}
+ %label{:for => "number"} Number:
+ %br/
+ %input{:type => "text", :name => "number"}
+ %br/
+ %label{:for => "msg"} Message:
+ %br/
+ %textarea{:name => "msg"}
+ %br/
+ %input{:type => "submit", :class => "txt_btn", :value => "Text Me!"}

0 comments on commit 04b27f1

Please sign in to comment.
Something went wrong with that request. Please try again.