Web Fundamentals Crash Course

  • 508 views
Uploaded on

 

More in: Education , Technology , Design
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Be the first to comment
    Be the first to like this
No Downloads

Views

Total Views
508
On Slideshare
0
From Embeds
0
Number of Embeds
0

Actions

Shares
Downloads
16
Comments
0
Likes
0

Embeds 0

No embeds

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
    No notes for slide

Transcript

  • 1. Web Fundamentals Crash Course
  • 2. Aspects of Web Design ● The Human. ● The Server. ● The Search Engine. ● The Mighty Browser. Web Fundamentals Crash Course
  • 3. 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) Web Fundamentals Crash Course
  • 4. Aspects of Web Design : The Server ● Every bit counts. ● Keep reuquests per page small. ● Dedicated vs Shared servers. ● Use compression. ● Avoid downtimes. Web Fundamentals Crash Course
  • 5. Aspects of Web Design : The Seach Engine ● Clean, standard HTML. ● Meaningful meta information. ● Unique content. ● Links on other web sites. Web Fundamentals Crash Course
  • 6. Aspects of Web Design : The Mighty Browser ● Browser is the compiler, interpreter, ... whatever! ● Browsers' variants/versions. ● Mobile Browsers. ● The tale of two browsers. Web Fundamentals Crash Course
  • 7. 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. Web Fundamentals Crash Course
  • 8. Aspects of Web Design : The Mighty Browser cont. Web Fundamentals Crash Course
  • 9. Aspects of Web Design : The Mighty Browser cont. Web Fundamentals Crash Course
  • 10. 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! Web Fundamentals Crash Course
  • 11. Word on Open Standards ● Internet is built upon open/vendor indep. standards. ● HTTP is open. ● Firefox is open source. ● Open Source matters. Web Fundamentals Crash Course
  • 12. 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 Fundamentals Crash Course
  • 13. Web Technologies Web Fundamentals Crash Course
  • 14. The Rise of Web Apps ● The browser that grew to be an OS. ● Cloud computing. ● Netbooks, easier internet access. Web Fundamentals Crash Course
  • 15. The Machine Is Us/ing Us Web Fundamentals Crash Course
  • 16. 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 Fundamentals Crash Course
  • 17. Web Technologies : HTML (Hello, World!) <html> <head> <title>Hello World</title> </head> <body> <h1>Hello, World!</h1> </body> </html> Web Fundamentals Crash Course
  • 18. Web Technologies : HTML (hyperlink) <a href="http://www.google. com/"> This text</a> is a link to Google's website. Web Fundamentals Crash Course
  • 19. 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 Fundamentals Crash Course
  • 20. 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 Fundamentals Crash Course
  • 21. 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 Fundamentals Crash Course
  • 22. 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 Fundamentals Crash Course
  • 23. Web Technologies : HTML/CSS (trivial example) Web Fundamentals Crash Course
  • 24. 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 Fundamentals Crash Course
  • 25. 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 Fundamentals Crash Course
  • 26. 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 Fundamentals Crash Course
  • 27. 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 Fundamentals Crash Course
  • 28. Web Technologies : MySQL , XML and Flash Web Fundamentals Crash Course
  • 29. Where do we go from here ? Web Fundamentals Crash Course
  • 30. Web Technologies : HTML/CSS (sophisticated example) Web Fundamentals Crash Course
  • 31. 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. Web Fundamentals Crash Course
  • 32. Questions ? Web Fundamentals Crash Course
  • 33. Homework ● Design a two-column webpage. ● Design the following menu. Web Fundamentals Crash Course
  • 34. Thank you! Web Fundamentals Crash Course