Web development basics

13.10.28 Web development basics

What we are going to learn 3 © Essen International
–  HTML, XML –  CSS – JavaScript, Java, Flash, Silverlight –  Apache, IIS –  MySQL, PostgreSQL, Oracle, SQL Server –  SQLite –  PHP, Python, Perl, Ruby, JSP, ASP, CGI –  Wordpress, Drupal, Episerver, etc.

Gotta go now? 3 © Essen International

From the start: the internet 3 © Essen International Front-end
(Client) Internet Back-end (Server) Response (HTTP) Request (HTTP)

Hypertext Transfer Protocol 3 © Essen International Client request Internet
Request (HTTP) Response (HTTP) GET /index.html HTTP/1.1 Host: www.mozilla.com HTTP/1.1 200 OK! Date: Mon, 28 Okt 2013 10:12:34 GMT! HTTP/1.1 200 OK Server: Apache/1.3.3.7 (Unix) (Red-Hat/Linux) ... Content-Type: text/html; charset=UTF-8 ... <html> <title>Mozilla — Home of the Mozilla Project — Mozilla</ title> ... Server response HTTP HTTP/1.1 200 OK! Date: Mon, 28 Okt 2013 10:12:34 GMT! HTTP/1.1 200 OK Server: Apache/1.3.3.7 (Unix) (Red-Hat/Linux) ... Content-Type: text/html; charset=UTF-8 ... <html> <title>Mozilla — Home of the Mozilla Project — Mozilla</ title> ...

3 © Essen International

What we are going to learn 3 © Essen International
–  HTML –  CSS – JavaScript –  Apache, IIS –  MySQL, PostgreSQL, Oracle, SQL Server –  SQLite –  PHP, Python, Perl, Ruby, JSP, ASP, CGI Wordpress, Drupal, Episerver, etc. Front-end Back-end Content managment systems (CMS) , Java, Flash, Silverlight , XML

Why does this matter for me? 3 © Essen International
Knowledge about a technology you use day by day. Better understanding in meetings with technical background. Learning something new is always an inspiration.

Approved? 3 © Essen International

Front-end 3 © Essen International

Frontend technologies 3 © Essen International –  HTML Document structure/
content Document styling Dynamics –  CSS –  Java script

Hypertext Markup Language 3 © Essen International HTML It’s a
mark up language, websites are written in html and there is a certain way to write it, like grammar. HMTL 5 is the current version of HTML, it’s still work in progress but hopefully soon the standard.

HTML 5 3 © Essen International HTML HTML 5 is
a platform; a set of many diﬀerent components created for the purpose of an “open web”. audio video camera-API

HTML 5 3 © Essen International HTML that means: e.g.
technically you could use Skype over your browser, without an external program.

HTML 5 3 © Essen International HTML another example for
open web standards: HTML5 apps can do “phone things” – they can make the phone vibrate, make a phone call or send a text message. 80 - 130 €

HTML document structure 3 © Essen International <head> </head> <body>
</body> Title: website name Meta data: e.g. search Style sheets & scripts: CSS, Javascript text: paragraph, headings multimedia: images, music, video forms and lists, hyperlinks <img src=”pictogram” />

HTML document structure 3 © Essen International

Cascading Style Sheets 3 © Essen International It’s a style
sheet language for describing document presentation semantics or more easily: the design. CSS CSS 3 is the newest version of the CSS spec. It’s also work in progress but most browsers support it. It’s normally separated from the content (HTML).

HTML document structure 3 © Essen International <head> </head> Title:
website name Meta data: e.g. search Style sheets & scripts: CSS, Javascript

CSS document styling 3 © Essen International Layout, fonts, color,
etc. body { suit: black; shirt: white; elbows: bent; } header { headgear: hat; } Just an analogy! In CSS 3: gradiations, shadows, small animations

No abbreviation :( 3 © Essen International Java script is
not to be confused with Java . Java script It’s a object oriented scripting language, it exposes HTML-documents to programmatic manipulation. Or more easily it “animates” websites without a plug-in. HTML 5 + Javascript = Awesomeness

HTML document structure 3 © Essen International <head> </head> Title:
website name Meta data: e.g. search Style sheets & scripts: CSS, Javascript

Adding dynamics through Java script 3 © Essen International function
move (body) { if (body === 0) { go right 1; } return left * move(body-1); } var: hat = 1; var: body; Loading new page content without reloading the page Just an analogy! Animation of elements, fading in and out, resizing them, moving them, etc. Interactive content Transmitting information about the user's browsing activities to various websites (web analytics, ad tracking, personalization). And more...

Frontend technologies 3 © Essen International

A simple static website 3 © Essen International https://dl.dropboxusercontent.com/u/2901571/Simple%20page%20list/index.html

A simple static website 3 © Essen International

Tired? 3 © Essen International

Wordpress 3 © Essen International WordPress is a free and
open source content-management system based on PHP and MySQL, which runs on a web hosting service. WordPress is the most popular blogging system in use on the Web, at more than 60 million websites. Features include a plug-in architecture and a template system.

Program languages & technologies 3 © Essen International –  HTML
–  CSS – JavaScript –  Apache, IIS –  MySQL, PostgreSQL, Oracle, SQL Server –  SQLite –  PHP, Python, Perl, Ruby, JSP, ASP, CGI Front-end Back-end , Java, Flash, Silverlight , XML

Modern front-end technologies 3 © Essen International –  HTML 5
Document structure/ content Document styling Dynamics –  CSS 3 –  Java script

CMS – Wordpress 3 © Essen International Front-end Back-end – 
HTML –  CSS – JavaScript –  Apache –  MySQL –  PHP Wordpress simpliﬁed!

Web development basics

Web development basics

More Decks by Bernhard Kahles

Other Decks in Technology

Featured

Transcript