Web Fundamentals Crash Course

633 views
553 views

Published on

Published in: Education, Technology, Design
0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total views
633
On SlideShare
0
From Embeds
0
Number of Embeds
0
Actions
Shares
0
Downloads
16
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

Web Fundamentals Crash Course

  1. 1. Web Fundamentals Crash Course
  2. 2. Aspects of Web Design ● The Human. ● The Server. ● The Search Engine. ● The Mighty Browser. Web Fundamentals Crash Course
  3. 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. 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. 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. 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. 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. 8. Aspects of Web Design : The Mighty Browser cont. Web Fundamentals Crash Course
  9. 9. Aspects of Web Design : The Mighty Browser cont. Web Fundamentals Crash Course
  10. 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. 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. 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. 13. Web Technologies Web Fundamentals Crash Course
  14. 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. 15. The Machine Is Us/ing Us Web Fundamentals Crash Course
  16. 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. 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. 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. 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. 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. 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. 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. 23. Web Technologies : HTML/CSS (trivial example) Web Fundamentals Crash Course
  24. 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. 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. 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. 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. 28. Web Technologies : MySQL , XML and Flash Web Fundamentals Crash Course
  29. 29. Where do we go from here ? Web Fundamentals Crash Course
  30. 30. Web Technologies : HTML/CSS (sophisticated example) Web Fundamentals Crash Course
  31. 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. 32. Questions ? Web Fundamentals Crash Course
  33. 33. Homework ● Design a two-column webpage. ● Design the following menu. Web Fundamentals Crash Course
  34. 34. Thank you! Web Fundamentals Crash Course

×