Mansoura University CSED & Nozom web development sprint

2,518 views
2,434 views

Published on

1 day web development sprint containing introduction to web client side programming, python programming, django and more.

Published in: Technology
2 Comments
2 Likes
Statistics
Notes
No Downloads
Views
Total views
2,518
On SlideShare
0
From Embeds
0
Number of Embeds
815
Actions
Shares
0
Downloads
22
Comments
2
Likes
2
Embeds 0
No embeds

No notes for slide

Mansoura University CSED & Nozom web development sprint

  1. 1. Welcome to Web Development Day 01 “MarsAttack()” @AlSayedGamal 1 #webDaySunday, February 26, 2012
  2. 2. Agenda* • Problem Definition • Web Scenario • Client-side • Server-side • RAD • Summary. * We will recursively apply MarsAttack() on this. 2Sunday, February 26, 2012
  3. 3. The web scenario Behind the scene Abstract figure shows server, client side and HTTP we almost watch every day 3Sunday, February 26, 2012
  4. 4. The web scenario • It’s almost the same in all websites you know. • Browser functionality. • Server functionality. • The HTTP Protocol. • Don’t worry we will visit this again and again. 4Sunday, February 26, 2012
  5. 5. Firefox, Chrome and IE :D 5Sunday, February 26, 2012
  6. 6. Web Browser Anatomy • AKA a web client. • It’s firefox, chrome, safari, opera and unfortunately Internet Explorer. • Main functions: • Read and Compose HTTP Requests. • Interpret HTML. • Misc tasks including and not excluding bookmarks management. 6Sunday, February 26, 2012
  7. 7. The Server • Software && Hardware. • Contents. • Server is serving pretty straight forward. • Functionality is basically based on contents: • Web server, Database server, DNS Server, Mail server etc.. 7Sunday, February 26, 2012
  8. 8. HTML • The HTML document structure. • Anatomy of HTML Tag. • Tag groups. • Your first html document. • Something wrong, no? 8Sunday, February 26, 2012
  9. 9. Document Structure <html> <head></head> <body></body> </html> 9Sunday, February 26, 2012
  10. 10. Anatomy of HTML Tag Tag is the building block of HTML. <tag [attribute=”value”]> </tag> or <tag [attribute=”value”] /> Example <p dir=”rtl”> We are paragraph. </p> 10Sunday, February 26, 2012
  11. 11. Tag groups • Text formatting. • <p>, <div>,<blockquote>,<marquee>,etc.. • <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>. 11Sunday, February 26, 2012
  12. 12. CSS @selector{ property:value; } 12Sunday, February 26, 2012
  13. 13. CSS • Cascading style sheet. • Commonly we <link> it in the <head>. • The @selector* anatomy. • tag • .class • tag.class • #identifier *CSS3 selectors isn’t included and they are extra flexible. 13Sunday, February 26, 2012
  14. 14. CSS: properties and Values • Font. • Color and Background. • Box. • Classification. • Units 14Sunday, February 26, 2012
  15. 15. Javascript • Javascript is scripting language. • We write inside <script> Or inside on{event}=”” attribute to handle events. • Paradigm: it’s imperative with magic some OO capabilities. • eval() and the calculator demo. 15Sunday, February 26, 2012
  16. 16. The brighter side • The relative Zero. • What’s CSS Framework. • Examples: • Bootstrap. • YAML. • YUI. • What’s Javascript library. • Examples: • MooTools. • jQuery. • ExtJS 16Sunday, February 26, 2012
  17. 17. Mock-ups • I know you are burning to get your hands dirty. (I know how it feels). • It saves money directly and indirectly. • Makes UI and UX trackable more measurable. • And most importantly, it keeps designers away from Photoshop. 17Sunday, February 26, 2012
  18. 18. Mock-up tools • Cacoo, belsamq, creatly, pencil and others. • Collaborative web tools is the buzz. • Mocking taskati.info • Consider UX from second0 not day1. 18Sunday, February 26, 2012
  19. 19. Server side • Python. • Python for PHP programmers. • MySQL. • django framework. 19Sunday, February 26, 2012
  20. 20. Python • Installation. • Basic syntax. • Main differences between python and PHP. • django installation. • First django app. 20Sunday, February 26, 2012
  21. 21. MySQL • DML (Data Manipulation Language) • DDL (Data Definition Language) • ORM (Object Relation Mapping) 21Sunday, February 26, 2012
  22. 22. RAD • Agile SCRUM development methodology and TDD. • django testing. • taskati.info programming. • Web hosting. 22Sunday, February 26, 2012
  23. 23. django • Your first django project • django-admin.py startproject <projectname> • manage.py startapp <appname> • manage.py runserve • Anatomy of django files • urls.py: contains urls routs in REGEX • settings.py: contains project settings db, language, debug=True, etc.. • manage.py run django commands example: runserver, syncdb, shell, .. 23Sunday, February 26, 2012
  24. 24. django • models.py: contains model definition changes in this file most commonly will require syncdb to be reflected on db. • views.py: contains methods to handle requests like index() • tests.py: contains unit tests. 24Sunday, February 26, 2012
  25. 25. Summary View Bootstrap SCRUM Javascript MVC python TDD MySQL CSS YAML Design patterns Model 25Sunday, February 26, 2012
  26. 26. Questions? 26Sunday, February 26, 2012
  27. 27. Thank you! @AlSayedGamal 27Sunday, February 26, 2012

×