Web development Hackathon

483 views

Published on

CAT Hackathon 2013 from novice to django

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

No Downloads
Views
Total views
483
On SlideShare
0
From Embeds
0
Number of Embeds
5
Actions
Shares
0
Downloads
17
Comments
0
Likes
3
Embeds 0
No embeds

No notes for slide

Web development Hackathon

  1. 1. WEB DEVELOPMENT FROM NOVICE TO DJANGO By AlSayed Gamal
  2. 2. AGENDA Session plan.! dj Fi na an l Web essentials.! Py th Python.! Django. In t Es ro se nt ia ls on go
  3. 3. TIME LINE In every section we will review/write a small snippet of code.! Essential skills.! Extra skills/tools.! Community.
  4. 4. WEB SCENARIO Every minute of you career you will be contributing to it.
  5. 5. FRONT-END ENGINEERING In this section we will be interested in technologies interested in generating and optimising user interface.
  6. 6. HTML Almost every single website have one of these.
  7. 7. DOCUMENT STRUCTURE Every document will / should include this
  8. 8. ANATOMY OF HTML TAG Tag is the building block of HTML.! <tag [attribute=”value”]> </tag>! or <tag [attribute=”value”] />! Example <p dir=“rlt”> We are paragraph. </p>
  9. 9. ANATOMY OF HTML TAG Text formatting.! <b>,<i>,<u>,<span>,<sup>,<sub>,<ul>,<li>, etc..! Images and media.! <img />, <embed />, <video>.! Tables.! <table>,<tr>, <td> and <th>! Forms (The where, what and how questions.)! <form>, <fieldset>, <legend> and label. <input type=””>,<select>,<option> and <textarea>.
  10. 10. QUICK DEMO #1 In this demo:! Text formatting tags.! Image tag.! Links.! Forms.! Tables.
  11. 11. HTML 5 & CSS3 The buzz
  12. 12. CSS(CASCADNG STYLE SHEETS) Because HTML isn’t enough.
  13. 13. CSS ANATOMY Important paragraphs are “Red” important.
  14. 14. QUICK DEMO #2 In this demo:! Linking stylesheets.! styling borders.! styling text.! styling background.
  15. 15. GRID SYSTEMS You are obsolete if you are not using css framework now.
  16. 16. JAVASCRIPT for the sake of client.
  17. 17. QUICK DEMO #3 In this demo:! How to link Javascript.! Window alert, confirm and prompt.! How to handle click / mouse over events.
  18. 18. JQUERY IS A MUST. Javascript libraries that made dom manipulation, animations, validation and AJAX easy.
  19. 19. BACK-END DEVELOPMENT From now on it’s more about making the correct option.
  20. 20. WHY PYTHON? It’s Open source.! Cross platform.! Easy to learn.! No boiler plates.! Dynamic
 (to be explained in code).! Community. ?
  21. 21. OPEN SOURCE open source = freedom.
  22. 22. CROSS PLATFORM write once, run everywhere.
  23. 23. EASY TO LEARN It takes < 10 seconds to write your hello, world.
  24. 24. SYSTEM.OUT.PRINT(“HELLO,WORLD”); It takes 1 line to your “hello, world”
  25. 25. FROM 29TH TO 8TH IN < 7 YEARS* It’s 8th too in 2013. *TOIBE.com | TIOBE Programming Community Index for November 2013
  26. 26. “Innovation distinguishes between a leader and a follower.” –Steve Jobs
  27. 27. PYTHON ESSENTIALS Scripting nature.! Basic data types.! Operators.! Flow control.! Functions are fun.! Modules.! OOP.
  28. 28. EXPRESSION IN PYTHON. Operators variable = 3 + 2 Data
 5, “hello”, Operands + * = / %
 [] () > = & != | Expression Variables
 x,name, __len__
  29. 29. PYTHON BLOCKS Branching if condition: If block Function definition def foo(x,y): function body Loop for item in structure: for block Class definition class class_name(parent): class definition
  30. 30. GETTING YOUR HANDS DIRTY Quick Demo #4
  31. 31. BEFORE WE START If you are linux or unix based you are good to go.! Else If you are on windows (I hope not) download and install! sublime text editor! python runtime! Our code will be perfect for Python 2.x and may be 3.x.
  32. 32. SORTED?
  33. 33. MEDIA.PY P1: Tawfik Okasha P2: Amr Adib
  34. 34. SCRIPT HIGHLIGHTS. Basic expression (variable assignment).! User input and output.! Function definition / passing function as variable.! List data-type.! Basic sorting.
  35. 35. DJANGO Django is RAD web framework! Django advantages! MTV.! ORM.! Admin Panel.! I18n.! Documentation.! Minimal Boiler Plates.! Elegant URL design
  36. 36. DJANGO ADMIN Well known to be the main advantage of django and it’s.
  37. 37. QUICK DEMO #5 The last and the best.
  38. 38. QUESTIONS?
  39. 39. THANKS

×