Web Dev Day 01 Agenda
•
2 recomendaciones•1,262 vistas
The document outlines an agenda for a web development training covering client-side and server-side technologies. It discusses web browsers, HTML, CSS, JavaScript, mockup tools, server-side programming with Python and Django, databases with MySQL, and rapid application development methodologies. Key topics include the web scenario, HTML tags and document structure, CSS selectors and properties, JavaScript basics, mockups, Python syntax, the Django framework, and agile development with SCRUM.
Recomendados
Más contenido relacionado
La actualidad más candente
La actualidad más candente (20)
Similar a Web Dev Day 01 Agenda
Similar a Web Dev Day 01 Agenda (20)
Más de Al Sayed Gamal
Más de Al Sayed Gamal (20)
Último
Último (20)
Web Dev Day 01 Agenda
- 1. Welcome to Web Development Day 01 “MarsAttack()” @AlSayedGamal 1 #webDay Sunday, February 26, 2012
- 2. Agenda* • Problem Definition • Web Scenario • Client-side • Server-side • RAD • Summary. * We will recursively apply MarsAttack() on this. 2 Sunday, February 26, 2012
- 3. The web scenario Behind the scene Abstract figure shows server, client side and HTTP we almost watch every day 3 Sunday, 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. 4 Sunday, February 26, 2012
- 5. Firefox, Chrome and IE :D 5 Sunday, February 26, 2012
- 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. 6 Sunday, 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.. 7 Sunday, February 26, 2012
- 8. HTML • The HTML document structure. • Anatomy of HTML Tag. • Tag groups. • Your first html document. • Something wrong, no? 8 Sunday, February 26, 2012
- 9. Document Structure <html> <head></head> <body></body> </html> 9 Sunday, 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> 10 Sunday, 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>. 11 Sunday, February 26, 2012
- 12. CSS @selector{ property:value; } 12 Sunday, February 26, 2012
- 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. 13 Sunday, February 26, 2012
- 14. CSS: properties and Values • Font. • Color and Background. • Box. • Classification. • Units 14 Sunday, 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. 15 Sunday, 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 16 Sunday, 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. 17 Sunday, 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. 18 Sunday, February 26, 2012
- 19. Server side • Python. • Python for PHP programmers. • MySQL. • django framework. 19 Sunday, February 26, 2012
- 20. Python • Installation. • Basic syntax. • Main differences between python and PHP. • django installation. • First django app. 20 Sunday, February 26, 2012
- 21. MySQL • DML (Data Manipulation Language) • DDL (Data Definition Language) • ORM (Object Relation Mapping) 21 Sunday, February 26, 2012
- 22. RAD • Agile SCRUM development methodology and TDD. • django testing. • taskati.info programming. • Web hosting. 22 Sunday, February 26, 2012
- 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, .. 23 Sunday, 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. 24 Sunday, February 26, 2012
- 25. Summary View Bootstrap SCRUM Javascript MVC python TDD MySQL CSS YAML Design patterns Model 25 Sunday, February 26, 2012
- 26. Questions? 26 Sunday, February 26, 2012
- 27. Thank you! @AlSayedGamal 27 Sunday, February 26, 2012