Loading presentation...

Present Remotely

Send the link below via email or IM

Copy

Present to your audience

Start remote presentation

  • Invited audience members will follow you as you navigate and present
  • People invited to a presentation do not need a Prezi account
  • This link expires 10 minutes after you close the presentation
  • A maximum of 30 users can follow your presentation
  • Learn more about this feature in our knowledge base article

Do you really want to delete this prezi?

Neither you, nor the coeditors you shared it with will be able to recover it again.

DeleteCancel

Make your likes visible on Facebook?

Connect your Facebook account to Prezi and let your likes appear on your timeline.
You can change this under Settings & Account at any time.

No, thanks

Web Development 101

No description
by

Mohammed Mahdi Davoodi

on 24 September 2013

Comments (0)

Please log in to add your comment.

Report abuse

Transcript of Web Development 101

Web Development 101
Mohammed Davoodi
So, uh, who are you?
Founder of
Former web developer at
So, what are we getting into?
High level overview of technologies
High level overview of design patterns
Pros/Cons of each
My opinion
4 Lords of Web Development
PHP?
PYTHON?
DJANGO?
RUBYONRAILS?!
APACHE??
NGINX..?
HTML!
CSS;
Client Side
HTML
The only thing that's really "required".
Teach me!
http://www.codecademy.com/courses/web-beginner
-en-HZA3b/0/1
http://htmldog.com/guides/html/beginner/
http://html5doctor.com/
<h2>This is a title</h2>
<p>This is some text</p>
Code snippet:
Example:
http://courses.cs.vt.edu/~cs2505/fall2013/
CSS
This makes things look pretty.
Code snippet:
body {background-color:#b0c4de;}
Bootstrap
Example: http://www.bbc.co.uk/news/
Teach me!
http://www.codecademy.com/courses/web-beginner-en-TlhFi/0/1
http://www.w3schools.com/css/default.asp
Bootstrap
It contains HTML and CSS-based design templates for typography, forms, buttons, etc....
Made by Twitter!
Examples:
http://www.breakingnews.com/
Teach me!
http://getbootstrap.com/getting-started/
...
HAML
DJANGO TEMPLATES
http://en.wikipedia.org/wiki/Comparison_of_web_template_engines
Erubis
Template languages
HAML
JQUERY
Ajax
Javascript
Code snippet:
<ul>
<% for item in list %>
<li><%= item %></li>
<% end %>
<%# here is ignored because starting with '#' %>
</ul>
Teach me!
http://www.kuwata-lab.com/erubis/users-guide.html
Erubis
Javascript
Not really a template langauge, more like a replacement.
%section.container
%h1= post.title
%h2= post.subtitle
.content
= post.content
Code snippet:
Teach me!
http://haml.info/
Java
Code Snippet:
{% extends "base_generic.html" %}
{% block title %}{{ section.title }}{% endblock %}
{% block content %}
<h1>{{ section.title }}</h1>
{% for story in story_list %}
<h2>
<a href="{{ story.get_absolute_url }}">
{{ story.headline|upper }}
</a>
</h2>
<p>{{ story.tease|truncatewords:"100" }}</p>
{% endfor %}
{% endblock %}
Teach me!
https://docs.djangoproject.com/
en/dev/topics/templates/
Ajax
jQuery
Backbone.js
Server Side
Angular.js
node.js
angular.js
When you click and things happen.
function showAlert() {
alert('You triggered an alert!');
}
Example:
http://www.w3schools.com/js/tryit.asp?filename=tryjs_ifthen
Teach me!
http://www.codecademy.com/courses/getting-started-v2/0/1
http://www.learn-js.org/
Nothing like Java!
What the client uses to communicate between servers asynchronously
No one really uses this on its own anymore.
So what happens when I type konkourse.com into the address bar?
Flask
What have we got?
Code snippet:
Framework developed to make client side scripting a lot easier.
Makes wrappers for AJax requests so you don't have to deal with browser compatibility, etc....
What does the $ mean?
Code snippet:
$("div.test").add("p.quote").addClass("blue").slideDown("slow");

Teach me!
http://highoncoding.com/Videos/537_Extended_Screencast_on_JQuery_Whole_38_Minutes_.aspx
http://www.codecademy.com/courses/web-beginner-en-bay3D/0/1
ASP.NET
MVP framework for web site design that is completely client side.
Object oriented Javasript
(function($){
var ListView = Backbone.View.extend({
el: $('body'), // attaches `this.el` to an existing element.

initialize: function(){
_.bindAll(this, 'render'); // fixes loss of context for 'this' within methods

this.render(); // not all views are self-rendering. This one is.
},
render: function(){
$(this.el).append("<ul> <li>hello world</li> </ul>");
}
});

var listView = new ListView();
})(jQuery);
Code snippet:
Teach me!
http://arturadib.com/hello-backbonejs/
http://addyosmani.github.io/backbone-fundamentals/
Python
Django
Flask
Rails
Ruby
PHP
Node.js
ASP.NET
PERL
Web Server Applications
Teach me!
http://angularjs.org/
http://www.thinkster.io/pick/GtaQ0oMGIl/
Example:
http://www.hulu.com/
Another MVC framework
Developed by Google.
A lot more higher level then Backbone
Can be embedded in html files
"Can" be unsecure. Banned at Amazon
Example:
Facebook.com
Code Snippet:
Teach me!
http://www.phptherightway.com/
http://learnxinyminutes.com/docs/php/
function foo ($x, $y, $z) {
echo "$x - $y - $z";
}
Example
http://builtwith.angularjs.org/
Java
SQL
MySQL
PostgreSQL
The Database
Thank you!
Email: mdavoodi@vt.edu
Pick your poison.
May or may not need to know SQL.
Oh and every SQL is different.
Apache
Nginx
So what the heck do I use?
Pretty old and very established
Open Source and modular
Handles both static and dynamic content.
Where does the name come from?
Lightweight and fast
Serves static content faster then apache
Can't modify it as much to get custom functionality
Resource: http://www.bentobox.io/
Teach me!
http://www.learnpython.org/
Code snippet:
def function(x):
print x
An awesome scripting language,
Cause you can do pretty much anything in it.
Build applets that communicate with the client side!
Not really used by startups.
Public void hello() {
System.out.println("Hello!");
}
Code snippet:
The old man of web development.
Example:
Amazon.com
Code snippet:
Teach me!
http://www.perl.org/learn.html
sub Hello{
print "Hello, World!\n";
}
Server side javascript!
Has its own server library, no need for Apache!
Code snippet:
var http = require('http');

http.createServer(
function (request, response) {
response.writeHead(200, {'Content-Type': 'text/plain'});
response.end('Hello World\n');
}
).listen(8000);

console.log('Server running at http://localhost:8000/');
Teach me!
http://www.nodebeginner.org/
Example
github.com
Framework developed by Microsoft
You can use any .NET langauge!
I really don't know anything else
Popular MVC framework, huge community
Seperates the M, the V and the C
Tons of gems to pick from
Does a lot of magic
Teach me!
https://tutorials.railsapps.org/rails-tutorial
Example:
twitter.com
Another awesome scripting langauge
Teach me!
http://tryruby.org/levels/1/challenges/0
Code snippet:
def say_hello(name)
var = ”Hello, ” + name
return var
end
MVC framework with a huge community.
A lot of stuff prebuilt.
A lot of apps.
Hard to change core functionality.
A really cool web ap framework
Example
instagram.com
Teach me!
https://docs.djangoproject.com/en/1.4/intro/tutorial01/
A lot less stuff done for you
Smaller community
A lot easier to change core functionality
Teach me!
http://flask.pocoo.org/docs/
Example
Pintrest.com
Teach me!
http://www.asp.net/mvc/tutorials/mvc-4/getting-started-with-aspnet-mvc4/intro-to-aspnet-mvc-4
Example
myspace.com
Full transcript