mansoura university csed & nozom web development sprint
DESCRIPTION
1 day web development sprint containing introduction to web client side programming, python programming, django and more.TRANSCRIPT
![Page 1: Mansoura University CSED & Nozom web development sprint](https://reader035.vdocument.in/reader035/viewer/2022062312/555ac62ed8b42a761a8b4e16/html5/thumbnails/1.jpg)
Web Development Day 01“MarsAttack()”
Welcome to
@AlSayedGamal #webDay1
Sunday, February 26, 2012
![Page 2: Mansoura University CSED & Nozom web development sprint](https://reader035.vdocument.in/reader035/viewer/2022062312/555ac62ed8b42a761a8b4e16/html5/thumbnails/2.jpg)
Agenda*
• Problem Definition
• Web Scenario
• Client-side
• Server-side
• RAD
• Summary.
* We will recursively apply MarsAttack() on this.2
Sunday, February 26, 2012
![Page 3: Mansoura University CSED & Nozom web development sprint](https://reader035.vdocument.in/reader035/viewer/2022062312/555ac62ed8b42a761a8b4e16/html5/thumbnails/3.jpg)
The web scenario
Behind the scenewe almost watch
every day
Abstract figure shows server, client side and HTTP
3
Sunday, February 26, 2012
![Page 4: Mansoura University CSED & Nozom web development sprint](https://reader035.vdocument.in/reader035/viewer/2022062312/555ac62ed8b42a761a8b4e16/html5/thumbnails/4.jpg)
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
![Page 5: Mansoura University CSED & Nozom web development sprint](https://reader035.vdocument.in/reader035/viewer/2022062312/555ac62ed8b42a761a8b4e16/html5/thumbnails/5.jpg)
Firefox, Chrome and IE :D5
Sunday, February 26, 2012
![Page 6: Mansoura University CSED & Nozom web development sprint](https://reader035.vdocument.in/reader035/viewer/2022062312/555ac62ed8b42a761a8b4e16/html5/thumbnails/6.jpg)
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
![Page 7: Mansoura University CSED & Nozom web development sprint](https://reader035.vdocument.in/reader035/viewer/2022062312/555ac62ed8b42a761a8b4e16/html5/thumbnails/7.jpg)
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
![Page 8: Mansoura University CSED & Nozom web development sprint](https://reader035.vdocument.in/reader035/viewer/2022062312/555ac62ed8b42a761a8b4e16/html5/thumbnails/8.jpg)
HTML
• The HTML document structure.
• Anatomy of HTML Tag.
• Tag groups.
• Your first html document.
• Something wrong, no?
8
Sunday, February 26, 2012
![Page 9: Mansoura University CSED & Nozom web development sprint](https://reader035.vdocument.in/reader035/viewer/2022062312/555ac62ed8b42a761a8b4e16/html5/thumbnails/9.jpg)
Document Structure
<html>
<head></head>
<body></body>
</html>
9
Sunday, February 26, 2012
![Page 10: Mansoura University CSED & Nozom web development sprint](https://reader035.vdocument.in/reader035/viewer/2022062312/555ac62ed8b42a761a8b4e16/html5/thumbnails/10.jpg)
Anatomy of HTML TagTag 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
![Page 11: Mansoura University CSED & Nozom web development sprint](https://reader035.vdocument.in/reader035/viewer/2022062312/555ac62ed8b42a761a8b4e16/html5/thumbnails/11.jpg)
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
![Page 12: Mansoura University CSED & Nozom web development sprint](https://reader035.vdocument.in/reader035/viewer/2022062312/555ac62ed8b42a761a8b4e16/html5/thumbnails/12.jpg)
CSS
@selector{ property:value;}
12
Sunday, February 26, 2012
![Page 13: Mansoura University CSED & Nozom web development sprint](https://reader035.vdocument.in/reader035/viewer/2022062312/555ac62ed8b42a761a8b4e16/html5/thumbnails/13.jpg)
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
![Page 14: Mansoura University CSED & Nozom web development sprint](https://reader035.vdocument.in/reader035/viewer/2022062312/555ac62ed8b42a761a8b4e16/html5/thumbnails/14.jpg)
CSS: properties and Values
• Font.
• Color and Background.
• Box.
• Classification.
• Units
14
Sunday, February 26, 2012
![Page 15: Mansoura University CSED & Nozom web development sprint](https://reader035.vdocument.in/reader035/viewer/2022062312/555ac62ed8b42a761a8b4e16/html5/thumbnails/15.jpg)
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
![Page 16: Mansoura University CSED & Nozom web development sprint](https://reader035.vdocument.in/reader035/viewer/2022062312/555ac62ed8b42a761a8b4e16/html5/thumbnails/16.jpg)
The brighter side• The relative Zero.
• What’s CSS Framework.
• Examples:
• Bootstrap.
• YAML.
• YUI.
• What’s Javascript library.
• Examples:
• MooTools.
• jQuery.
• ExtJS16
Sunday, February 26, 2012
![Page 17: Mansoura University CSED & Nozom web development sprint](https://reader035.vdocument.in/reader035/viewer/2022062312/555ac62ed8b42a761a8b4e16/html5/thumbnails/17.jpg)
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
![Page 18: Mansoura University CSED & Nozom web development sprint](https://reader035.vdocument.in/reader035/viewer/2022062312/555ac62ed8b42a761a8b4e16/html5/thumbnails/18.jpg)
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
![Page 19: Mansoura University CSED & Nozom web development sprint](https://reader035.vdocument.in/reader035/viewer/2022062312/555ac62ed8b42a761a8b4e16/html5/thumbnails/19.jpg)
Server side
• Python.
• Python for PHP programmers.
• MySQL.
• django framework.
19
Sunday, February 26, 2012
![Page 20: Mansoura University CSED & Nozom web development sprint](https://reader035.vdocument.in/reader035/viewer/2022062312/555ac62ed8b42a761a8b4e16/html5/thumbnails/20.jpg)
Python
• Installation.
• Basic syntax.
• Main differences between python and PHP.
• django installation.
• First django app.
20
Sunday, February 26, 2012
![Page 21: Mansoura University CSED & Nozom web development sprint](https://reader035.vdocument.in/reader035/viewer/2022062312/555ac62ed8b42a761a8b4e16/html5/thumbnails/21.jpg)
MySQL
• DML (Data Manipulation Language)
• DDL (Data Definition Language)
• ORM (Object Relation Mapping)
21
Sunday, February 26, 2012
![Page 22: Mansoura University CSED & Nozom web development sprint](https://reader035.vdocument.in/reader035/viewer/2022062312/555ac62ed8b42a761a8b4e16/html5/thumbnails/22.jpg)
RAD
• Agile SCRUM development methodology and TDD.
• django testing.
• taskati.info programming.
• Web hosting.
22
Sunday, February 26, 2012
![Page 23: Mansoura University CSED & Nozom web development sprint](https://reader035.vdocument.in/reader035/viewer/2022062312/555ac62ed8b42a761a8b4e16/html5/thumbnails/23.jpg)
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 commandsexample: runserver, syncdb, shell, ..
23
Sunday, February 26, 2012
![Page 24: Mansoura University CSED & Nozom web development sprint](https://reader035.vdocument.in/reader035/viewer/2022062312/555ac62ed8b42a761a8b4e16/html5/thumbnails/24.jpg)
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
![Page 25: Mansoura University CSED & Nozom web development sprint](https://reader035.vdocument.in/reader035/viewer/2022062312/555ac62ed8b42a761a8b4e16/html5/thumbnails/25.jpg)
SummaryMVC
CSS YAMLMySQLpythonJavascript
Bootstrap SCRUM
TDDDesign patterns
View
Model
25
Sunday, February 26, 2012
![Page 26: Mansoura University CSED & Nozom web development sprint](https://reader035.vdocument.in/reader035/viewer/2022062312/555ac62ed8b42a761a8b4e16/html5/thumbnails/26.jpg)
Questions?
26
Sunday, February 26, 2012
![Page 27: Mansoura University CSED & Nozom web development sprint](https://reader035.vdocument.in/reader035/viewer/2022062312/555ac62ed8b42a761a8b4e16/html5/thumbnails/27.jpg)
Thank you!@AlSayedGamal
27
Sunday, February 26, 2012