Web Fundamentals Crash Course

Web Fundamentals Crash Course

Aspects of Web Design

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


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.


Aspects of Web Design : The Mighty Browser

● Browser is the compiler, interpreter, ... whatever!

● Browsers' variants/versions.

● Mobile Browsers.● The tale of two

browsers.


Aspects of Web Design : 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.






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/logo_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 : PHP (if-else example)

<html>

<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 linkhttp://www.multiurl.com/l/0E5Please copy then paste the url into your browsers address bar if it didn't work right away.


http://www.multiurl.com/l/0E5

Questions ?


Homework

● Design a two-column webpage.

● Design the following menu.


Thank you!


Technology

Web Fundamentals Crash Course