Web Fundamentals Crash Course

Aspects of Web Design

● The Human.
● The Server.
● The Search Engine.
● The Mighty Browser.

Web Fundamentals Crash Course

Aspects of Web Design : The Human

● It should look beautiful.
● The simpler, the better.
● Accessible and usable.
● People with disabilities
or poor eyesight
(screen readers)


Aspects of Web Design : The Server
● Every bit counts.
● Keep reuquests per
page small.
● Dedicated vs
Shared servers.
● Use compression.
● Avoid downtimes.


Aspects of Web Design :
The Seach Engine
● Clean, standard
HTML.
● Meaningful meta
information.
● Unique content.
● Links on other web
sites.


The Mighty Browser
● Browser is the
compiler, interpreter,
... whatever!
● Browsers'
variants/versions.
● Mobile Browsers.
● The tale of two
browsers.


The Mighty Browser cont.
● IE against the world.
● Most of
developement time
is wasted on IE6!
● CSS conditional
statements and
@import to take
care of IE.


The Mighty Browser cont.


HTTP
● It's a web protocol
(application layer).
● It "transfers" text,
not!
● It works in the
hyperspace.
● There are dozens of
protocols out there.
● Check wikipedia!


Word on Open Standards
● Internet is built upon
open/vendor indep.
standards.
● HTTP is open.
● Firefox is open
source.
● Open Source
matters.


Software You Will Need
● Web Browsers (IE, FF, Opera, Safari,
Chrome, ...)
● Text Editor or IDE (Notepad++, PSPad
Editor, Dreamweaver, Expressions, ...)
● Image Editor (Photoshop, Paint.NET, ...)
● FTP Client ( Filezilla, ...)
● Webserver Enviroment (Xampp,
easyphp, ...)
● Firebug for Firefox.

Web Technologies


The Rise of Web Apps

● The browser that
grew to be an
OS.
● Cloud computing.
● Netbooks, easier
internet access.


The Machine Is Us/ing Us


Web Technologies : HTML
● Hyper-text markup
language.
● It marks the text up
throughout tags i.e.
document hierarchy.
● Semantic language.
● Please leave the
styling part to CSS.
● Tables are bad!


Web Technologies :
HTML (Hello, World!)
<html>
<head>
<title>Hello World</title>
</head>
<body>
<h1>Hello, World!</h1>
</body>
</html>


Web Technologies :
HTML (hyperlink)

<a
href="http://www.google.
com/">
This text</a>
is a link to Google's
website.


Web Technologies :
HTML (text formatting)
<b>This text is bold</b>
<strong>This text is strong</strong>
<big>This text is big</big>
<em>This text is emphasized</em>
<i>This text is italic</i>
<small>This text is small</small>
This is<sub> subscript</sub> and
<sup>superscript</sup>


Web Technologies :
HTML (images)

<img
src="http://www.google.com
.eg/intl/en_com/images/log
o_plain.png" width="267"
height="110"
alt="Welcome!" />


Web Technologies :
HTML (tables)
● Tables are bad design
practice.
● Tables were used when
there was no CSS for
layout.
● Divisions + CSS can do
much more.


Web Technologies :
HTML (divisions)
● Division is the unit cell of
modern html layouts.
● Always group your related
html elements inside a
division.
● Give it a name <div id="..." >
...... </div>
● Or <div class="..."> .....
</div>
● Control it via CSS.


Web Technologies :
HTML/CSS (trivial example)


Web Technologies : PHP
● Hyper-text
preprocessor is a
scripting language.
● It makes the web
dynamic away from
javascript browser
fails. (server sided
language)
● Mostly used to
parse HTML code.

Web Technologies :
<html>
PHP (if-else example)
<body>

<?php

$d=date("D");

if ($d=="Fri")

echo "Have a nice weekend!";

elseif ($d=="Sun")

echo "Have a nice Sunday!";

else

echo "Have a nice day!";

?>

</body>

</html>


Web Technologies : Javascript
● A client sided
dynamic scripting
language.
● The abuse of
javascript used to
make web experience
terrible.
● The evolution of js
libraries resulted in
Web 2.0 as we know
it.

Web Technologies :
Javascript (lightbox example)

● AJAX is what makes
Gmail what it's.
● Jquery, mootools are
the most significant js
libraries on the web.
● Do not overuse
javascript.


Web Technologies :
MySQL , XML and Flash


Where do we go from here ?


Web Technologies :
HTML/CSS (sophisticated example)


Useful Links

● Everything on one easy link
http://www.multiurl.com/l/0E5
Please copy then paste the url into your
browsers address bar if it didn't work right
away.


Questions ?


Homework

● Design a two-column webpage.

● Design the following menu.


Thank you!


Web Fundamentals Crash Course

More Related Content

What's hot (19)

Similar to Web Fundamentals Crash Course (20)

Recently uploaded (20)

Web Fundamentals Crash Course