Mansoura University CSED & Nozom web development sprint

1. Welcome to Web Development Day 01 “MarsAttack()” @AlSayedGamal 1 #webDaySunday, February 26, 2012

2. Agenda* • Problem Deﬁnition • Web Scenario • Client-side • Server-side • RAD • Summary. * We will recursively apply MarsAttack() on this. 2Sunday, February 26, 2012

3. The web scenario Behind the scene Abstract ﬁgure shows server, client side and HTTP we almost watch every day 3Sunday, February 26, 2012

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. Firefox, Chrome and IE :D 5Sunday, February 26, 2012

6. Web Browser Anatomy • AKA a web client. • It’s ﬁrefox, 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. 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. HTML • The HTML document structure. • Anatomy of HTML Tag. • Tag groups. • Your ﬁrst html document. • Something wrong, no? 8Sunday, February 26, 2012

9. Document Structure <html> <head></head> <body></body> </html> 9Sunday, February 26, 2012

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. 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. CSS @selector{ property:value; } 12Sunday, February 26, 2012

13. CSS • Cascading style sheet. • Commonly we <link> it in the <head>. • The @selector* anatomy. • tag • .class • tag.class • #identiﬁer *CSS3 selectors isn’t included and they are extra ﬂexible. 13Sunday, February 26, 2012

14. CSS: properties and Values • Font. • Color and Background. • Box. • Classiﬁcation. • Units 14Sunday, February 26, 2012

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. 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. 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. 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. Server side • Python. • Python for PHP programmers. • MySQL. • django framework. 19Sunday, February 26, 2012

20. Python • Installation. • Basic syntax. • Main differences between python and PHP. • django installation. • First django app. 20Sunday, February 26, 2012

21. MySQL • DML (Data Manipulation Language) • DDL (Data Deﬁnition Language) • ORM (Object Relation Mapping) 21Sunday, February 26, 2012

22. RAD • Agile SCRUM development methodology and TDD. • django testing. • taskati.info programming. • Web hosting. 22Sunday, February 26, 2012

23. django • Your ﬁrst django project • django-admin.py startproject <projectname> • manage.py startapp <appname> • manage.py runserve • Anatomy of django ﬁles • 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. 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. Summary View Bootstrap SCRUM Javascript MVC python TDD MySQL CSS YAML Design patterns Model 25Sunday, February 26, 2012

26. Questions? 26Sunday, February 26, 2012

27. Thank you! @AlSayedGamal 27Sunday, February 26, 2012

Mansoura University CSED & Nozom web development sprint

Al Sayed Gamal

Mansoura University CSED & Nozom web development sprint