Language HIGH LEVEL Overview More to come in future classes
Languages HTML CSS Javascript PHP / Ruby / Java / ASP / Perl
Client-server model When searching on Google: Your PC’s browser requests a webpage from Google’s server Google’s server processes that request Google’s server sends your browser an HTML file Your PC’s browser renders what you see as a webpage from that HTML
Simplest Reply: HTML Page Server simply sends you a single .html file Only HTML, no other programming required Said to be “static” – never changes Cannot have any interaction Cannot pull content from a database Cannot read or save other files Cannot log in or log out
HTML HTML serves one purpose: layout content on a webpage Hyper Text Markup Language Created by Tim Burners-Lee at CERN in 1991 Today universal, open standard supported on all browsers: Internet Explorer, Firefox, Chrome, Opera, and more Also now called “XHTML” – basically the same
HTML - Example
HTML + CSS Problem: HTML was limited in how you could display things. Solution: Cascading Style Sheets Compliments HTML – more control over how things look, in bulk manner Introduced idea of “separating form from content” CSS can be embedded in HTML or be sent by the server as a second document
HTML + CSS - Example
JavaScript (JS) Client side script – runs in your browser - NOT THE SERVER Server sends JS in HTML or as a separate file Makes the web page interactive Mouseovers Clocks Alert boxes Drag-and-drop Much more complicated than CSS or HTML – big leap Warnings Older browsers can’t work with newer commands Can be disabled by browsers (approx 1-3%) Code is 100% viewable – people can steal
Server Architecture Servers run programs, just like your PC: Operating System (OS) Manages server’s hardware and other programs Linux, Windows Web Server Software (HTTP) Process’s client requests, sends response Apache, LigHTTPD, IIS Database (DB) Optional, used for large web apps Stores tables of information – i.e. user info MySQL, Postgres, Oracle, Microsoft SQL Scripting Language Processor Depends on the language your site is coded in The “processor” will read your script and execute it
Server-side Languages Scripting language generally determines architecture PHP, Ruby, ASP, Java, Perl Executes code on the server Saves files, logs users in/out, queries the database Totally invisible to client Sends client HTML once completed
Common Web App Architectures LAMP Ruby on Rails ASP.NET OS Linux Windows Server Server Apache IIS DB MySQL Microsoft SQL Server-side script PHP Ruby ASP Framework (optional) Rails .NET Layout HTML Styling CSS Client-side script JavaScript
PHP “PHP Hypertext Processor” (recursive acronym) LAMP architecture Linux for OS Apache for webserver software MySQL for database PHP for programming Advantages: Large developer base All open source Very scalable Great documentation at PHP.net Disadvantages: Slower development than Ruby or ASP Sites that use PHP in parts or all of their site: Facebook.com Wikipedia.com Wordpress.com
PHP Example <html> <head> <title>PHP Test</title> </head> <body> 1+1 = <?php echo 1+1; ?> </body> </html> Executed by web server
What the browser sees <html> <head> <title>PHP Test</title> </head> <body> 1+1 = 2 </body> </html> Executed by web server
Ruby (on Rails) Ruby is the language Almost always used with Rails – the framework Advantages: Developed specifically for modern web apps Fastest to develop on Tight integration between server, DB, front and back ends Easy to make API’s Disadvantages: Poor scalability (so far) Samples of sites using Ruby: Twitter.com – fail whale Basecamp.com – 37 signals maintains Rails
ASP “Active Server Pages” - Microsoft’s web programming language Primarily for use if you want to go Microsoft across the board Windows for OS IIS for web server Microsoft SQL server for DB Advantages: Comes with a workflow & website framework “Enterprise” - geared towards large companies Microsoft provides customer service Disadvantages: Proprietary Expensive Not as popular as PHP or Ruby Samples of sites using ASP: Microsoft.com
Other Languages Java By Sun/Oracle Fallen out of popularity for web apps Python / Django Google has historically used Django Runs quickly on the server Perl Early Language Not designed for web, slow development
AJAX “Asynchronous JavaScript and XML” – is a technique, not a language How it works Javascript sends requests to server Server-side script (PHP) processes request Server sends back XML Browser updates the webpage Samples of sites using AJAX: http://maps.google.com http://www.kayak.com
Maps.Google.com
Web Hosting Hosting Option Self-hosted Shared Hosting Dedicated /Co-lo Cloud Hosting Where You own your box and connect it to the internet in your garage Your site is one of many on a machine at your webhost’s facility You get your own private box at your webhost’s facility Your site is abstracted across many boxes at your webhost Hardware Access Total None Set-up Software Access Limited Reliability Poor Good Scalability OK Great Security
My Preferred Configuration Hosting: Dedicated Servers at LiquidWeb.com OS: CentOS 5 (Linux) Server: Apache 2 DB: MySQL 5 SS-Script: PHP 5 Framework: Proprietary Benefits: Open source, low cost, stable, scalable, easy development, large developer pool
Why is this important? Dot Com 1.0 mistake: I have a great website idea. I’ll just pay some guy to make it. Then I’ll make millions!
With Technical founders Without Technical Founders Successful Web Companies With Technical founders Without Technical Founders (quasi-technical)
Dot Com 1.0 Reality You can’t tell a good contractor from a bad one Your contractor tells you all your terrible ideas are great just so you’ll hire him ½ of your billings go towards waste-of-time-phone calls You end up with a terrible site It’s programmed in Java and completely unmaintainable You don’t have the capacity to improve it or even fix bugs Your “amazing idea” will be copied by a better technical company in a week They’ll make millions and you just wasted $50,000
Web 2.0 Lessons Every founder needs a basic level of technical proficiency At least one founder needs to be technically advanced Ideas are worthless, the best execution wins Web companies need to be technically driven Products need to be constantly iterated and improved
Learn More W3Schools.com Go to any webpage, right click, “View Source”